diff --git a/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx b/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx index 957d953d86..318294eb13 100644 --- a/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx +++ b/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; } diff --git a/components/molecules/CardLineChart/card-line-chart.tsx b/components/molecules/CardLineChart/card-line-chart.tsx index 236f6607c0..8943d4de68 100644 --- a/components/molecules/CardLineChart/card-line-chart.tsx +++ b/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 = ({ option }) => { +const CardLineChart: React.FC = ({ lineChartOption }) => { return ( <> - + ); }; diff --git a/components/molecules/CardRepoList/card-repo-list.tsx b/components/molecules/CardRepoList/card-repo-list.tsx index 295ea5982d..c11ab0976c 100644 --- a/components/molecules/CardRepoList/card-repo-list.tsx +++ b/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; } diff --git a/components/molecules/ContributorTable/contributor-table.tsx b/components/molecules/ContributorTable/contributor-table.tsx index 1f18604fd9..e84ba03939 100644 --- a/components/molecules/ContributorTable/contributor-table.tsx +++ b/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; \ No newline at end of file +export default ContributorTable; \ No newline at end of file diff --git a/components/organisms/ContributorCard/contributor-card.tsx b/components/organisms/ContributorCard/contributor-card.tsx new file mode 100644 index 0000000000..d076df55c7 --- /dev/null +++ b/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 ( + +
+
+ +
+ +
+
+ + + {showPRs ? +
+ +
+ + : + + null + } +
+ +
+
+ + ); +}; + +export default ContributorCard; \ No newline at end of file diff --git a/lib/hooks/useContributorData.ts b/lib/hooks/useContributorData.ts new file mode 100644 index 0000000000..c7ad2ff48f --- /dev/null +++ b/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; \ No newline at end of file diff --git a/stories/molecules/card-line-chart.stories.tsx b/stories/molecules/card-line-chart.stories.tsx index 60e4af0a3f..cfd4e8647c 100644 --- a/stories/molecules/card-line-chart.stories.tsx +++ b/stories/molecules/card-line-chart.stories.tsx @@ -54,4 +54,4 @@ const CardLineChartTemplate: ComponentStory = (args) => = (args) => ; + +export const Default = ContributorCardTemplate.bind({}); + +Default.args = { + contributor: { + lineChartOption: lineChart, + profile: profile, + prList: listOfPRs, + languagesUsed: languageList, + repoList: repoList + } +}; \ No newline at end of file