From c8660b5fec5f872f04554524bd8329da1e8860c8 Mon Sep 17 00:00:00 2001
From: NightKnight <Ahmedatwa866@yahoo.com>
Date: Fri, 30 Dec 2022 21:10:18 +0200
Subject: [PATCH] feat: add favorite repos on the design system (#744)

closes #717
---
 .../FavoriteRepoCard/favorite-repo-card.tsx   | 42 +++++++++++++++++++
 .../FavoriteRepos/favorite-repos.tsx          | 28 +++++++++++++
 .../table-repository-name.tsx                 |  2 +-
 .../molecules/favorite-repo-card.stories.tsx  | 21 ++++++++++
 stories/molecules/favorite-repos.stories.tsx  | 38 +++++++++++++++++
 5 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 components/molecules/FavoriteRepoCard/favorite-repo-card.tsx
 create mode 100644 components/molecules/FavoriteRepos/favorite-repos.tsx
 create mode 100644 stories/molecules/favorite-repo-card.stories.tsx
 create mode 100644 stories/molecules/favorite-repos.stories.tsx

diff --git a/components/molecules/FavoriteRepoCard/favorite-repo-card.tsx b/components/molecules/FavoriteRepoCard/favorite-repo-card.tsx
new file mode 100644
index 0000000000..e7d57b2c20
--- /dev/null
+++ b/components/molecules/FavoriteRepoCard/favorite-repo-card.tsx
@@ -0,0 +1,42 @@
+import Avatar from "components/atoms/Avatar/avatar";
+import { truncateString } from "lib/utils/truncate-string";
+import { StaticImageData } from "next/image";
+import Link from "next/link";
+import React from "react";
+
+export interface FavoriteRepoCardProps {
+  avatarURL: string | StaticImageData;
+  name: string;
+  owner: string;
+  topic: string;
+  userPage?: string;
+}
+
+const FavoriteRepoCard = ({ avatarURL, name, owner, topic, userPage }: FavoriteRepoCardProps): JSX.Element => {
+  return (
+    <div className="p-3 bg-white border-2 rounded-xl">
+      <div className="flex items-center gap-2.5 h-10">
+        {/* Avatar */}
+        <a href={`https://www.github.com/${owner}/${name}`} target="_blank" rel="noreferrer" className="h-10">
+          <Avatar className="shrink-0 min-w-10 min-h-10" size={40} avatarURL={avatarURL} isCircle={false} />
+        </a>
+
+        {/* Text */}
+        <div className="flex flex-col justify-center">
+          <div className="  text-sm text-light-slate-11 truncate max-w-[85px] md:max-w-[110px]">
+            <Link href={`/${userPage ? `pages/${userPage}/` : ""}${topic}/repositories/filter/${owner}/${name}`}>
+              <a>{owner}</a>
+            </Link>
+          </div>
+          <div title={name} className="text-lg text-light-slate-12 tracking-tight -mt-0.5">
+            <Link href={`/${userPage ? `pages/${userPage}/` : ""}${topic}/repositories/filter/${owner}/${name}`}>
+              <a>{name.length > 10 ? truncateString(name, 12) : name}</a>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FavoriteRepoCard;
diff --git a/components/molecules/FavoriteRepos/favorite-repos.tsx b/components/molecules/FavoriteRepos/favorite-repos.tsx
new file mode 100644
index 0000000000..39e203c4b0
--- /dev/null
+++ b/components/molecules/FavoriteRepos/favorite-repos.tsx
@@ -0,0 +1,28 @@
+import Card from "components/atoms/Card/card";
+import Text from "components/atoms/Typography/text";
+import Title from "components/atoms/Typography/title";
+import FavoriteRepoCard, { FavoriteRepoCardProps } from "../FavoriteRepoCard/favorite-repo-card";
+import TableRepositoryName from "../TableRepositoryName/table-repository-name";
+
+interface FavoriteReposProps {
+  /** Limited to maximum of 3 items to show. */
+  repos: FavoriteRepoCardProps[];
+}
+
+const FavoriteRepos = ({repos}: FavoriteReposProps) => {
+
+  return (
+    <div>
+      <span className="text-xl text-light-slate-12">Favorite Repositories</span>
+      <div className="flex gap-4 mt-2">
+        {
+          repos.map((repo) => (
+            <FavoriteRepoCard key={repo.name} name={repo.name} owner={repo.owner} avatarURL={repo.avatarURL} topic={repo.topic} userPage={repo.userPage} />
+          ))
+        }
+      </div>
+    </div>
+  );
+};
+
+export default FavoriteRepos;
diff --git a/components/molecules/TableRepositoryName/table-repository-name.tsx b/components/molecules/TableRepositoryName/table-repository-name.tsx
index 6ef6aae341..720a44605d 100644
--- a/components/molecules/TableRepositoryName/table-repository-name.tsx
+++ b/components/molecules/TableRepositoryName/table-repository-name.tsx
@@ -10,7 +10,7 @@ interface TableRepositoryNameProps {
   handle?: string;
   isLoading?: boolean;
   topic?: string;
-  user: string | string[] | undefined;
+  user?: string | string[];
 }
 
 const TableRepositoryName = ({ avatarURL, name, handle, topic, user }: TableRepositoryNameProps): JSX.Element => {
diff --git a/stories/molecules/favorite-repo-card.stories.tsx b/stories/molecules/favorite-repo-card.stories.tsx
new file mode 100644
index 0000000000..fd03fe2edf
--- /dev/null
+++ b/stories/molecules/favorite-repo-card.stories.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import FavoriteRepoCard from "components/molecules/FavoriteRepoCard/favorite-repo-card";
+
+const storyConfig = {
+  title: "Design System/Molecules/Favorite Repo Card",
+  component: "FavoriteRepoCard"
+};
+
+export default storyConfig;
+
+//TableRepositoryName Template
+const FavoriteRepoCardTemplate: ComponentStory<typeof FavoriteRepoCard> = (args) => <FavoriteRepoCard {...args} />;
+
+export const Default = FavoriteRepoCardTemplate.bind({});
+
+Default.args = {
+  name: "jsonhero-web",
+  owner: "apihero-run",
+  avatarURL: "https://avatars.githubusercontent.com/u/7252105?v=4"
+};
diff --git a/stories/molecules/favorite-repos.stories.tsx b/stories/molecules/favorite-repos.stories.tsx
new file mode 100644
index 0000000000..69662056b8
--- /dev/null
+++ b/stories/molecules/favorite-repos.stories.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import FavoriteRepos from "components/molecules/FavoriteRepos/favorite-repos";
+
+const storyConfig = {
+  title: "Design System/Molecules/Favorite Repos",
+  component: "FavoriteRepos"
+};
+
+export default storyConfig;
+
+//TableRepositoryName Template
+const FavoriteReposTemplate: ComponentStory<typeof FavoriteRepos> = (args) => <FavoriteRepos {...args} />;
+
+export const Default = FavoriteReposTemplate.bind({});
+
+Default.args = {
+  repos: [
+    {
+      name: "jsonhero-web",
+      owner: "apihero-run",
+      avatarURL: "https://avatars.githubusercontent.com/u/7252105?v=4",
+      topic: "javascript"
+    },
+    {
+      name: "insights",
+      owner: "opensauced",
+      avatarURL: "https://avatars.githubusercontent.com/u/52013393?s=64&v=4",
+      topic: "javascript"
+    },
+    {
+      name: "xstate",
+      owner: "stately",
+      avatarURL: "https://avatars.githubusercontent.com/u/69631?v=4",
+      topic: "javascript"
+    }
+  ]
+};