Merge pull request #13978 from Baystef/feat/contributorscomponent-story

Create Story for Contributors Component

Author: wackerow

src/components/Contributors/Contributors.stories.tsx

@@ -0,0 +1,101 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import ContributorsComponent, { type Contributor } from "."
+
+const meta = {
+  title: "Molecules / Display Content / Contributors",
+  component: ContributorsComponent,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <article className="max-w-3xl scroll-mt-24">
+        <Story />
+      </article>
+    ),
+  ],
+} satisfies Meta<typeof ContributorsComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const mockContributors: Contributor[] = [
+  {
+    login: "carlfairclough",
+    name: "Carl Fairclough",
+    avatar_url: "https://avatars1.githubusercontent.com/u/4670881?v=4",
+    profile: "http://carlfairclough.me",
+    contributions: ["design", "code", "bug"],
+  },
+  {
+    login: "RichardMcSorley",
+    name: "Richard McSorley",
+    avatar_url: "https://avatars2.githubusercontent.com/u/6407008?v=4",
+    profile: "https://github.com/RichardMcSorley",
+    contributions: ["code"],
+  },
+  {
+    login: "ajsantander",
+    name: "Alejandro Santander",
+    avatar_url: "https://avatars2.githubusercontent.com/u/550409?v=4",
+    profile: "http://ajsantander.github.io/",
+    contributions: ["content"],
+  },
+  {
+    login: "Lililashka",
+    name: "Lililashka",
+    avatar_url: "https://avatars1.githubusercontent.com/u/28689401?v=4",
+    profile: "http://impermanence.co",
+    contributions: ["design", "bug"],
+  },
+  {
+    login: "chriseth",
+    name: "chriseth",
+    avatar_url: "https://avatars2.githubusercontent.com/u/9073706?v=4",
+    profile: "https://github.com/chriseth",
+    contributions: ["content", "review"],
+  },
+  {
+    login: "fzeoli",
+    name: "Franco Zeoli",
+    avatar_url: "https://avatars2.githubusercontent.com/u/232174?v=4",
+    profile: "https://nomiclabs.io",
+    contributions: ["content", "review"],
+  },
+  {
+    login: "P1X3L0V4",
+    name: "Anna Karpińska",
+    avatar_url: "https://avatars2.githubusercontent.com/u/3372341?v=4",
+    profile: "https://github.com/P1X3L0V4",
+    contributions: ["translation"],
+  },
+  {
+    login: "vrde",
+    name: "vrde",
+    avatar_url: "https://avatars1.githubusercontent.com/u/134680?v=4",
+    profile: "https://github.com/vrde",
+    contributions: ["content"],
+  },
+  {
+    login: "AlexandrouR",
+    name: "Rousos Alexandros",
+    avatar_url: "https://avatars1.githubusercontent.com/u/21177075?v=4",
+    profile: "https://github.com/AlexandrouR",
+    contributions: ["content"],
+  },
+  {
+    login: "eswarasai",
+    name: "Eswara Sai",
+    avatar_url: "https://avatars2.githubusercontent.com/u/5172086?v=4",
+    profile: "https://eswarasai.com",
+    contributions: ["code"],
+  },
+]
+
+export const Contributors: Story = {
+  args: {
+    contributors: mockContributors,
+  },
+}

src/components/Contributors.tsx renamed to src/components/Contributors/index.tsx

@@ -20,12 +20,20 @@ export interface Contributor {
 
 const allContributors = JSON.parse(data)
 
-const Contributors = () => {
+interface ContributorsProps {
+  contributors?: Contributor[]
+}
+
+const Contributors = ({ contributors }: ContributorsProps) => {
   const [contributorsList, setContributorsList] = useState<Contributor[]>([])
 
   useEffect(() => {
-    setContributorsList(shuffle(allContributors.contributors))
-  }, [])
+    if (contributors) {
+      setContributorsList(contributors)
+    } else {
+      setContributorsList(shuffle(allContributors.contributors))
+    }
+  }, [contributors])
 
   return (
     <>
@@ -44,6 +52,9 @@ const Contributors = () => {
               className="h-[132px] w-[132px]"
               src={contributor.avatar_url}
               alt={contributor.name}
+              width={132}
+              height={132}
+              sizes="132px"
             />
             <div className="p-4">
               <h3 className="mb-4 mt-2 text-md">

src/components/DataTable/index.tsx

@@ -137,7 +137,7 @@ const DataTable = <TData, TValue>({
       </div>
       <Table {...props}>
         <TableBody
-          className={`duration-75 transition-opacity ${
+          className={`transition-opacity duration-75 ${
             isVisible ? "opacity-100" : "opacity-0"
           }`}
         >