refact

RealWagmi · Nov 14, 2023 · 7aa75f1 · 7aa75f1
1 parent 61a832f
commit 7aa75f1
Show file tree

Hide file tree

Showing 39 changed files with 529 additions and 496 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/src/components/AppBtn/index.tsx b/src/components/AppBtn/index.tsx
diff --git a/src/components/AppRadioBtn/index.stories.tsx b/src/components/AppRadioBtn/index.stories.tsx
diff --git a/src/components/Breadcrumbs/index.stories.tsx b/src/components/Breadcrumbs/index.stories.tsx
@@ -1,5 +1,6 @@
 import BreadcrumbsComponent from "./index";
 import { BrowserRouter } from "react-router-dom";
+import React from "react";
 
 export default {
   title: "Components/Breadcrumbs",

diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
@@ -1,36 +1,19 @@
 import { createContext, ElementType, useContext } from "react";
-import { Flex } from "../Box";
-import styled from "styled-components";
-import { rgba } from "polished";
 import { ArrowLeftIcon } from "../Svg";
 import Text from "../Text";
-export const MenuContext = createContext<{ linkComponent: ElementType }>({ linkComponent: "a" });
-
-interface IProps {
-  label: string;
-  to: string;
-}
+import { BreadcrumbsWrapper } from "./styles";
+import { IBreadcrumbsProps } from './types';
 
-const BreadcrumbsWrap = styled(Flex)`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2px 16px;
-  border-radius: 12px;
-  min-width: 89px;
-  text-decoration: none;
-  border: 0.5px solid ${({ theme }) => rgba(theme.colors.strokeGray, 0.2)};
-  background: ${({ theme }) => rgba(theme.colors.strokeGray, 0.08)};
-`;
+export const MenuContext = createContext<{ linkComponent: ElementType }>({ linkComponent: "a" });
 
-export default function Breadcrumbs({ label, to }: IProps) {
+export default function ({ label, to }: IBreadcrumbsProps) {
   const { linkComponent } = useContext(MenuContext);
   return (
-    <BreadcrumbsWrap as={linkComponent} href={to}>
+    <BreadcrumbsWrapper as={linkComponent} href={to}>
       <ArrowLeftIcon size={"16px"} mr={1} color="darkGray" />
       <Text variant="body-2" color="darkGray">
         {label}
       </Text>
-    </BreadcrumbsWrap>
+    </BreadcrumbsWrapper>
   );
 }
diff --git a/src/components/Breadcrumbs/styles.tsx b/src/components/Breadcrumbs/styles.tsx
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { Flex } from "../Box";
+import { rgba } from "polished";
+
+export const BreadcrumbsWrapper = styled(Flex)`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 16px;
+  border-radius: 12px;
+  min-width: 89px;
+  text-decoration: none;
+  border: 0.5px solid ${({ theme }) => rgba(theme.colors.strokeGray, 0.2)};
+  background: ${({ theme }) => rgba(theme.colors.strokeGray, 0.08)};
+`;
diff --git a/src/components/Breadcrumbs/types.ts b/src/components/Breadcrumbs/types.ts
@@ -0,0 +1,4 @@
+export interface IBreadcrumbsProps {
+  label: string;
+  to: string;
+}
diff --git a/src/components/AppBtn/index.stories.tsx → src/components/Button/index.stories.tsx b/src/components/AppBtn/index.stories.tsx → src/components/Button/index.stories.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import AppBtnComponent from "./index";
+import React, { useEffect, useState } from "react";
+import Button from "./index";
 import { BrowserRouter } from "react-router-dom";
 import { Box, Grid } from "../Box";
 import Text from "../Text";
@@ -8,7 +8,7 @@ import Tooltip from "../Tooltip";
 
 export default {
   title: "Components/Buttons",
-  component: AppBtnComponent,
+  component: Button,
   argTypes: {},
 };
 
@@ -33,26 +33,26 @@ export const Buttons = () => {
         <Text>Outlined</Text>
         <Text>Text</Text>
         <Box>
-          <AppBtnComponent>Button</AppBtnComponent>
+          <Button>Button</Button>
         </Box>
         <Box>
-          <AppBtnComponent variant={"outlined"}>Button</AppBtnComponent>
+          <Button variant={"outlined"}>Button</Button>
         </Box>
         <Box>
-          <AppBtnComponent variant={"text"}>Button</AppBtnComponent>
+          <Button variant={"text"}>Button</Button>
         </Box>
         <Box>
-          <AppBtnComponent disabled={true}>Button</AppBtnComponent>
+          <Button disabled={true}>Button</Button>
         </Box>
         <Box>
-          <AppBtnComponent variant={"outlined"} disabled={true}>
+          <Button variant={"outlined"} disabled={true}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
         <Box>
-          <AppBtnComponent variant={"text"} disabled={true}>
+          <Button variant={"text"} disabled={true}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
       </Grid>
       <Text variant={"h5"} m="40px 0 20px">
@@ -63,69 +63,69 @@ export const Buttons = () => {
         <Text>Outlined</Text>
         <Text>Text</Text>
         <Box>
-          <AppBtnComponent scale={"small"}>Button</AppBtnComponent>
+          <Button scale={"small"}>Button</Button>
         </Box>
         <Box>
-          <AppBtnComponent scale={"small"} variant={"outlined"}>
+          <Button scale={"small"} variant={"outlined"}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
         <Box>
-          <AppBtnComponent scale={"small"} variant={"text"}>
+          <Button scale={"small"} variant={"text"}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
         <Box>
-          <AppBtnComponent scale={"small"} disabled={true}>
+          <Button scale={"small"} disabled={true}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
         <Box>
-          <AppBtnComponent scale={"small"} variant={"outlined"} disabled={true}>
+          <Button scale={"small"} variant={"outlined"} disabled={true}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
         <Box>
-          <AppBtnComponent scale={"small"} variant={"text"} disabled={true}>
+          <Button scale={"small"} variant={"text"} disabled={true}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
       </Grid>
       <Text variant={"h5"} m="40px 0 20px">
         Error Button
       </Text>
       <Grid gridTemplateColumns="repeat(3, 1fr)" gridGap="20px">
         <Box>
-          <AppBtnComponent color={"error"}>Button</AppBtnComponent>
+          <Button color={"error"}>Button</Button>
         </Box>
         <Box>
-          <AppBtnComponent color={"error"} variant={"outlined"}>
+          <Button color={"error"} variant={"outlined"}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
         <Box>
-          <AppBtnComponent color={"error"} variant={"text"}>
+          <Button color={"error"} variant={"text"}>
             Button
-          </AppBtnComponent>
+          </Button>
         </Box>
       </Grid>
       <Text variant={"h5"} m="40px 0 20px">
         Link Button
       </Text>
       <Box>
-        <AppBtnComponent to={"https://docs.popsicle.finance/"} target={"_blank"} width={"50%"}>
+        <Button to={"https://docs.popsicle.finance/"} target={"_blank"} width={"50%"}>
           Button
-        </AppBtnComponent>
+        </Button>
       </Box>
       <Text variant={"h5"} m="40px 0 20px">
         With Start/End components
       </Text>
       <Grid gridTemplateColumns="repeat(3, 1fr)" gridGap="20px">
-        <AppBtnComponent startIcon={<InfoIcon size={"16px"} />}>Button</AppBtnComponent>
-        <AppBtnComponent endIcon={<QuestionIcon size={"16px"} />} variant={"outlined"}>
+        <Button startIcon={<InfoIcon size={"16px"} />}>Button</Button>
+        <Button endIcon={<QuestionIcon size={"16px"} />} variant={"outlined"}>
           Button
-        </AppBtnComponent>
-        <AppBtnComponent
+        </Button>
+        <Button
           color={"error"}
           disabled={true}
           variant={"text"}
@@ -154,14 +154,14 @@ export const Buttons = () => {
           }
         >
           With Tooltips
-        </AppBtnComponent>
+        </Button>
       </Grid>
 
       <Text variant={"h5"} m="40px 0 20px">
         With Loader
       </Text>
 
-      <AppBtnComponent
+      <Button
         width={"50%"}
         onClick={() => {
           setLoading(true);
@@ -170,7 +170,7 @@ export const Buttons = () => {
         variant={"outlined"}
       >
         Click here
-      </AppBtnComponent>
+      </Button>
     </BrowserRouter>
   );
 };