feat: Implement contribution page

components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx

@@ -17,13 +17,13 @@ export interface LanguageObject {
 }
 
 interface CardHorizontalBarChartProps {
-  languagesUsed: LanguageObject[];
+  languageList: LanguageObject[];
 }
 
 const languageToColor: AllSimpleColors = colors as AllSimpleColors;
 
-const CardHorizontalBarChart = ({ languagesUsed }: CardHorizontalBarChartProps): JSX.Element => {
-  const sortedLangArray = languagesUsed.sort((a, b) => b.percentageUsed - a.percentageUsed);
+const CardHorizontalBarChart = ({ languageList }: CardHorizontalBarChartProps): JSX.Element => {
+  const sortedLangArray = languageList.sort((a, b) => b.percentageUsed - a.percentageUsed);
 
   const [descriptText, setDescriptText] = useState(sortedLangArray[0].languageName);
 

components/molecules/ContributorTable/contributor-table.tsx

@@ -15,12 +15,12 @@ export interface PRs {
 }
 
 interface CardTableProps {
-  prList: PRs[];
+  listOfPRs: PRs[];
 }
 
-const ContributorTable = ({ prList }: CardTableProps) => {
+const ContributorTable = ({ listOfPRs }: CardTableProps) => {
   return (
-    prList.length > 0 ?
+    listOfPRs.length > 0 ?
       <>
         <div className="flex gap-2 items-center bg-light-slate-3 rounded-md px-2 py-1">
           <div className="w-3/5">
@@ -49,7 +49,7 @@ const ContributorTable = ({ prList }: CardTableProps) => {
             </div>
           </IconContext.Provider>
         </div>
-        {prList.map(({prName, prStatus, prIssuedTime, prClosedTime, noOfFilesChanged, noOfLinesChanged}, index) => 
+        {listOfPRs.map(({prName, prStatus, prIssuedTime, prClosedTime, noOfFilesChanged, noOfLinesChanged}, index) => 
           <div key={index} className="flex gap-2 items-center px-2 py-1">
             <div className="flex item-center gap-2 w-3/5">
               {prStatus === "open" ? 

components/organisms/ContributorCard/contributor-card.tsx

@@ -20,9 +20,9 @@ interface ContributorObject {
     dateOfFirstPR: string;
   };
   repoList: RepoList[];
-  lineChartOption: object;
-  languagesUsed: LanguageObject[];
-  prList: PRs[];
+  lineChart: object;
+  languageList: LanguageObject[];
+  listOfPRs: PRs[];
 }
 
 interface ContributorCardProps {
@@ -31,31 +31,27 @@ interface ContributorCardProps {
 }
 
 const ContributorCard = ({ className, contributor }: ContributorCardProps) => {
-  const { profile, repoList, lineChartOption, languagesUsed, prList } = contributor;
+  const { profile, repoList, lineChart, languageList, listOfPRs } = contributor;
   const [ showPRs, setShowPRs ] = useState(false);
 
   return (
-    <Card className={className} >
+    <Card className={className}>
       <div className="flex flex-col gap-2">
         <div className="flex w-full justify-between gap-2">
           <CardProfile {...profile} />
           <div className="w-32">
-            <CardHorizontalBarChart languagesUsed={languagesUsed} />
+            <CardHorizontalBarChart languageList={languageList} />
           </div>
         </div>
-        <CardLineChart lineChartOption={lineChartOption}/>
-        <CardRepoList repoList={repoList}/>
-        {showPRs ? 
+        <CardLineChart lineChartOption={lineChart} />
+        <CardRepoList repoList={repoList} />
+        {showPRs ? (
           <div className="p-4">
-            <ContributorTable prList={prList} />
+            <ContributorTable listOfPRs={listOfPRs} />
           </div>
-
-          :
-
-          null
-        }
+        ) : null}
         <div className="flex w-full py-3 justify-center">
-          <Button onClick={() => setShowPRs(prevState => !prevState)} type="link">
+          <Button onClick={() => setShowPRs((prevState) => !prevState)} type="link">
             <Text className="!text-xs !text-light-slate-11 font-medium">
               {showPRs ? "Hide" : "Show"} latest pull requests
             </Text>

components/organisms/Contributors/contributors.tsx

@@ -0,0 +1,14 @@
+import useContributorData from "lib/hooks/useContributorData";
+import ContributorCard from "../ContributorCard/contributor-card";
+const Contributors = (): JSX.Element =>{
+  const data = useContributorData();
+  const array = Array.apply(null, Array(9));
+  return (
+    <div className="w-full grid grid-cols-automobile  md:grid-cols-autodesktop gap-3">
+      {array.map((contributor, index) => (
+        <ContributorCard key={index} className="" contributor={{ ...data }} />
+      ))}
+    </div>
+  );
+};
+export default Contributors; 

components/organisms/ToolsDisplay/tools-display.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Contributors from "../Contributors/contributors";
 
 import Dashboard from "../Dashboard/dashboard";
 import Reports from "../Reports/reports";
@@ -17,7 +18,9 @@ const Tool = ({ tool }: ToolProps): JSX.Element => {
     return <Repositories />;
 
   case "Reports":
-    return <Reports/>;
+    return <Reports/>; 
+  case "Contributors":
+    return <Contributors/>;
   default:
     return <> {tool ? `${tool}` : "Test"} Tool Page</>;
   }

next.config.js

@@ -2,6 +2,6 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ["avatars.githubusercontent.com"]
+    domains: ["avatars.githubusercontent.com", "images.unsplash.com"]
   }
 };

stories/organisms/contributors.stories.tsx

@@ -0,0 +1,10 @@
+import Contributors from "components/organisms/Contributors/contributors";
+
+const StoryConfig = {
+  title: "Design System/Organisms/Contributors",
+};
+export default StoryConfig;
+
+const ContributorsTemplate = (): JSX.Element => <Contributors />;
+export const ContributorsStory = ContributorsTemplate.bind({});
+