feat: Implement contribution page (#263)

* add grid template column sizes for mobile and desktop

* include domain for unsplash images

* update card props to match incoming datas

* created contributors component

* add to tools display component, finishing touches left

* added contributors story

* update story props

* update naming convention on contributors component

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 contributorData = useContributorData();
+  const randomArray = Array.apply(null, Array(9));
+  return (
+    <div className="w-full grid grid-cols-automobile  md:grid-cols-autodesktop gap-3">
+      {randomArray.map((contributor, index) => (
+        <ContributorCard key={index} className="" contributor={{ ...contributorData }} />
+      ))}
+    </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/molecules/card-horizontal-bar.stories.tsx

@@ -30,26 +30,26 @@ const CardHorizontalBarTemplate: ComponentStory<typeof CardHorizontalBarChart> =
 export const OneLanguage = CardHorizontalBarTemplate.bind({});
 
 OneLanguage.args = {
-  languagesUsed: [
+  languageList: [
     {
       languageName: "JavaScript",
-      percentageUsed: 100
-    }
-  ]
+      percentageUsed: 100,
+    },
+  ],
 };
 
 export const MultipleLanguages = CardHorizontalBarTemplate.bind({});
 
 MultipleLanguages.args = {
-  languagesUsed: testLanguageList
+  languageList: testLanguageList,
 };
 export const notSupportedLanguage = CardHorizontalBarTemplate.bind({});
 
 notSupportedLanguage.args = {
-  languagesUsed: [
+  languageList: [
     {
       languageName: "qBasic",
-      percentageUsed: 100
-    }
-  ]
+      percentageUsed: 100,
+    },
+  ],
 };

stories/molecules/contributor-table.stories.tsx

@@ -51,9 +51,9 @@ export const AddedPullRequests = ContributorTableTemplate.bind({});
 export const NoPullRequests = ContributorTableTemplate.bind({});
 
 AddedPullRequests.args = {
-  prList: testPRs
+  listOfPRs: testPRs,
 };
 
 NoPullRequests.args = {
-  prList: []
+  listOfPRs: [],
 };

stories/organisms/contributor-card.stories.tsx

@@ -141,10 +141,10 @@ export const Default = ContributorCardTemplate.bind({});
 
 Default.args = {
   contributor: {
-    lineChartOption: lineChart,
+    lineChart: lineChart,
     profile: profile,
-    prList: listOfPRs,
-    languagesUsed: languageList,
-    repoList: repoList
-  }
+    listOfPRs: listOfPRs,
+    languageList: languageList,
+    repoList: repoList,
+  },
 };

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({});
+