feat: add favorite repos on the design system (#744)

closes #717

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;

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;

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 => {

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"
+};

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"
+    }
+  ]
+};