feat: Implement the hacktoberfest reports page (#229)

* created reports component, Next is the story.

* add reports component to the tools list component

* create reports story component... next will be a clean up to my code :)

* Made some changes to the reports component

* Eslinting fix

* refactor styles

* updated the return type of th tool display component

* add media query for smaller screens

* cleaning up the code and testing

* more clean up...

Fixes #168

components/molecules/SelectReportsFilter/select-reports-filter.tsx

@@ -12,22 +12,23 @@ interface SelectReportsFilterProps {
 }
 
 const SelectReportsFilter = ({ filterList, callback }: SelectReportsFilterProps): JSX.Element => {
-  const [ selectedValue, setSelectedValue ] = useState("");
+  const [selectedValue, setSelectedValue] = useState("");
 
   return (
     <div className="flex flex-col gap-2">
-      <Title level={4} >
-        Select a Filter
-      </Title>
+      <Title level={4}>Select a Filter</Title>
       <Text>
-        Download the filtered contributions from the last 30 days as a CSV. Selecting a filter will remove all the added repositories.
+        Download the filtered contributions from the last 30 days as a CSV. Selecting a filter will remove all the added
+        repositories.
       </Text>
-      <div className="flex gap-2">
-        <Select onChange={event => setSelectedValue(event.target.value)} className="w-full">
+      <div className="flex flex-col md:flex-row gap-2">
+        <Select onChange={(event) => setSelectedValue(event.target.value)} className="w-full">
           <SelectOption value="">Select a Filter</SelectOption>
-          {filterList?.map(({filterName, filterValue}, index) => 
-            <SelectOption key={index} value={filterValue}>{filterName}</SelectOption>
-          )}
+          {filterList?.map(({ filterName, filterValue }, index) => (
+            <SelectOption key={index} value={filterValue}>
+              {filterName}
+            </SelectOption>
+          ))}
         </Select>
         <Button type="primary" onClick={() => callback(selectedValue)} className="w-52">
           Download CSV
@@ -37,4 +38,4 @@ const SelectReportsFilter = ({ filterList, callback }: SelectReportsFilterProps)
   );
 };
 
-export default SelectReportsFilter;
+export default SelectReportsFilter;

components/organisms/Reports/reports.tsx

@@ -0,0 +1,29 @@
+import Title from "components/atoms/Typography/title";
+import SelectReportsFilter from "components/molecules/SelectReportsFilter/select-reports-filter";
+
+const Reports = (): JSX.Element => {
+  return (
+    <section className="w-full py-4 px-8 flex justify-center">
+      <div className="max-w-4xl">
+        <Title className="!font-medium relative !text-left " level={3}>
+          Contributions Insights
+        </Title>
+        <hr className="border-light-slate-6 my-4" />
+        <div className="!text-left">
+          <SelectReportsFilter
+            callback={function () {
+              throw new Error("Function not implemented.");
+            }}
+          />
+        </div>
+        <Title className="!font-medium relative mt-16 !text-left " level={3}>
+          Download History
+        </Title>
+        <hr className="border-light-slate-6 my-4" />
+        {/* Download History goes here */}
+      </div>
+    </section>
+  );
+};
+
+export default Reports;

components/organisms/ToolsDisplay/tools-display.tsx

@@ -1,24 +1,25 @@
 import React from "react";
 
 import Dashboard from "../Dashboard/dashboard";
+import Reports from "../Reports/reports";
 import Repositories from "../Repositories/repositories";
 
-
 interface ToolProps {
   tool?: string;
 }
 
-
-const Tool: React.FC<ToolProps> = ({ tool }) => {    
+const Tool = ({ tool }: ToolProps): JSX.Element => {
   switch (tool) {
   case "Dashboard":
     return <Dashboard />;
 
   case "Repositories":
     return <Repositories />;
 
+  case "Reports":
+    return <Reports/>;
   default:
-    return <>{tool ? `${tool}` : "Test"} Tool Page</>;
+    return <> {tool ? `${tool}` : "Test"} Tool Page</>;
   }
 };
 

stories/organisms/reports.stories.tsx

@@ -0,0 +1,8 @@
+import Reports from "components/organisms/Reports/reports";
+
+const StoryConfig = {
+  title: "Design System/Organisms/Reports"
+};
+export default StoryConfig;
+
+export const ReportsOrganism = (): JSX.Element => <Reports />;