feat: Implement Contributor Card Component (#245)

* Initial commit for contributor card.

* Starting to work on contributor card component. Made quick hook that'll give component all the data it needs.

* Completed as much as possible with current components. Left markers for where other components would need to be added.

* Added horizontal bar to contributor card.

* Added contributor table and completed contributor card.

* Updated contributor card component to take in props to build contributor card rather than use hook to build the contributor card.

* Updating contributor hook and line chart options based on code review feedback.

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

@@ -11,7 +11,7 @@ interface AllSimpleColors {
 
 const NOTSUPPORTED = "#64748B";
 
-interface LanguageObject {
+export interface LanguageObject {
   languageName: string;
   percentageUsed: number;
 }

components/molecules/CardLineChart/card-line-chart.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import EChartWrapper from "components/atoms/EChartWrapper/echart-wrapper";
 
 interface CardLineChartProps {
-  option: Object;
+  lineChartOption: Object;
 }
 
-const CardLineChart: React.FC<CardLineChartProps> = ({ option }) => {
+const CardLineChart: React.FC<CardLineChartProps> = ({ lineChartOption }) => {
   return (
     <>
-      <EChartWrapper option={option} />
+      <EChartWrapper option={lineChartOption} />
     </>
   );
 };

components/molecules/CardRepoList/card-repo-list.tsx

@@ -3,7 +3,7 @@ import { StaticImageData } from "next/image";
 
 const REPOLISTLIMIT = 5;
 
-interface RepoList {
+export interface RepoList {
   repoName: string;
   repoIcon: StaticImageData;
 }

components/molecules/ContributorTable/contributor-table.tsx

@@ -5,7 +5,7 @@ import { BsFileDiff } from "react-icons/bs";
 import { GoDiff } from "react-icons/go";
 import { VscGitPullRequest,VscGitPullRequestClosed, VscGitMerge, VscGitPullRequestDraft } from "react-icons/vsc";
 
-interface PRs {
+export interface PRs {
   prStatus: string;
   prName: string;
   prIssuedTime: string;
@@ -18,7 +18,7 @@ interface CardTableProps {
   prList: PRs[];
 }
 
-const CardTable = ({ prList }: CardTableProps) => {
+const ContributorTable = ({ prList }: CardTableProps) => {
   return (
     prList.length > 0 ?
       <>
@@ -108,4 +108,4 @@ const CardTable = ({ prList }: CardTableProps) => {
   );
 };
 
-export default CardTable;
+export default ContributorTable;

components/organisms/ContributorCard/contributor-card.tsx

@@ -0,0 +1,69 @@
+import Button from "components/atoms/Button/button";
+import Card from "components/atoms/Card/card";
+import Text from "components/atoms/Typography/text";
+import CardHorizontalBarChart, { LanguageObject } from "components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart";
+import CardLineChart from "components/molecules/CardLineChart/card-line-chart";
+import CardProfile from "components/molecules/CardProfile/card-profile";
+import CardRepoList, { RepoList } from "components/molecules/CardRepoList/card-repo-list";
+import ContributorTable, { PRs } from "components/molecules/ContributorTable/contributor-table";
+import { useState } from "react";
+
+/* 
+  Use this hook in the Contributor Page componenttbecause it has all the mock data:
+  import useContributorCard from "lib/hooks/useContributorCard";
+*/
+interface ContributorObject {
+  profile: {
+    githubAvatar: string;
+    githubName: string;
+    totalPRs: number;
+    dateOfFirstPR: string;
+  };
+  repoList: RepoList[];
+  lineChartOption: object;
+  languagesUsed: LanguageObject[];
+  prList: PRs[];
+}
+
+interface ContributorCardProps {
+  className?: string;
+  contributor: ContributorObject;
+}
+
+const ContributorCard = ({ className, contributor }: ContributorCardProps) => {
+  const { profile, repoList, lineChartOption, languagesUsed, prList } = contributor;
+  const [ showPRs, setShowPRs ] = useState(false);
+
+  return (
+    <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} />
+          </div>
+        </div>
+        <CardLineChart lineChartOption={lineChartOption}/>
+        <CardRepoList repoList={repoList}/>
+        {showPRs ? 
+          <div className="p-4">
+            <ContributorTable prList={prList} />
+          </div>
+
+          :
+
+          null
+        }
+        <div className="flex w-full py-3 justify-center">
+          <Button onClick={() => setShowPRs(prevState => !prevState)} type="link">
+            <Text className="!text-xs !text-light-slate-11 font-medium">
+              {showPRs ? "Hide" : "Show"} latest pull requests
+            </Text>
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default ContributorCard;

lib/hooks/useContributorData.ts

@@ -0,0 +1,137 @@
+import TestRepoAvatar from "public/icons/test-repo-avatar.svg";
+
+const useContributorData = () => {
+  const lineChart  = {
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      axisLabel: {
+        fontSize: 14,
+        fontWeight: "bold",
+        color: "darkgray"
+      },
+      data: ["Jan 2022", "Mar 2022", "Jun 2022"]
+    },
+    yAxis: {
+      type: "value",
+      splitNumber: 1,
+      axisLabel: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed"
+        }
+      }
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        lineStyle: {
+          color: "#ff9800"
+        },
+        areaStyle: {
+          color: "#FFB74D",
+          opacity: 0.6
+        }
+      }
+    ]
+  };
+
+  const profile = {
+    githubAvatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80",
+    githubName: "ChadStewart",
+    totalPRs: 4,
+    dateOfFirstPR: "3mo"
+  };
+
+  const repoList = [
+    {
+      repoName: "test",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "test2",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "test3",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "test4",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "test5",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "test6",
+      repoIcon: TestRepoAvatar
+    }
+  ];
+
+  const languageList = [
+    {
+      languageName: "TypeScript",
+      percentageUsed: 50
+    },
+    {
+      languageName: "JavaScript",
+      percentageUsed: 20
+    },
+    {
+      languageName: "Rust",
+      percentageUsed: 30
+    }
+  ];
+
+  const listOfPRs = [
+    {
+      prName: "Merging some work",
+      prStatus: "merged",
+      prIssuedTime: "2mo",
+      prClosedTime: "2mo",
+      noOfFilesChanged: 13,
+      noOfLinesChanged: 837
+    },
+    {
+      prName: "Merging some work",
+      prStatus: "closed",
+      prIssuedTime: "2mo",
+      prClosedTime: "2mo",
+      noOfFilesChanged: 13,
+      noOfLinesChanged: 837
+    },
+    {
+      prName: "Merging some work",
+      prStatus: "open",
+      prIssuedTime: "2mo",
+      prClosedTime: "2mo",
+      noOfFilesChanged: 13,
+      noOfLinesChanged: 837
+    },
+    {
+      prName: "Merging some work",
+      prStatus: "draft",
+      prIssuedTime: "2mo",
+      prClosedTime: "2mo",
+      noOfFilesChanged: 13,
+      noOfLinesChanged: 837
+    }
+  ];
+
+  return {
+    lineChart,
+    profile,
+    repoList,
+    languageList,
+    listOfPRs
+  };
+};
+
+export default useContributorData;

stories/molecules/card-line-chart.stories.tsx

@@ -54,4 +54,4 @@ const CardLineChartTemplate: ComponentStory<typeof CardLineChart> = (args) => <C
 
 // ScatterChart Default
 export const Default = CardLineChartTemplate.bind({});
-Default.args = { option: testOptions };
+Default.args = { lineChartOption: testOptions };

stories/molecules/card-repo-list.stories.tsx

@@ -3,7 +3,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import CardRepoList from "components/molecules/CardRepoList/card-repo-list";
 import TestRepoAvatar from "public/icons/test-repo-avatar.svg";
 
-
 const storyConfig = {
   title: "Design System/Molecules/Card Repo List",
   component: "Card Repo List"