refactor: some code (#29)

* refactor: some code * fix: build * fix: incorrect btn type
pure-js · Oct 30, 2023 · 370bea4 · 370bea4
1 parent dff092f
commit 370bea4
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 23 deletions.
diff --git a/src/components/button/Button.stories.ts b/src/components/button/Button.stories.ts
@@ -22,7 +22,15 @@ export const Primary: Story = {
   args: {
     primary: true,
     label: 'Button',
-    size: 'large',
+    size: 'lg',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+    size: 'lg',
   },
 };
 
@@ -36,14 +44,14 @@ Hover.parameters = { pseudo: { hover: true } };
 
 export const Large: Story = {
   args: {
-    size: 'large',
+    size: 'lg',
     label: 'Button',
   },
 };
 
 export const Small: Story = {
   args: {
-    size: 'small',
+    size: 'sm',
     label: 'Button',
   },
 };

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -1,3 +1,4 @@
+import { getCssNameBySize } from '@/utils/index';
 import button from './button.module.scss';
 
 interface ButtonProps {
@@ -8,7 +9,7 @@ interface ButtonProps {
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg';
   /**
    * Button contents
    */
@@ -26,17 +27,18 @@ interface ButtonProps {
  */
 export const Button = ({
   primary = false,
-  size = 'medium',
+  size = 'md',
   label,
   isDisabled,
   className,
   ...props
 }: ButtonProps) => {
   const mode = primary ? button.primary : '';
+  const $size = getCssNameBySize(size);
   return (
     <button
       type="button"
-      className={[className, button.base, button[size], mode].join(' ')}
+      className={[className, button.default, button[$size], mode].join(' ')}
       disabled={isDisabled}
       {...props}
     >

diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
@@ -1,13 +1,12 @@
-.base {
+.default {
   transition: opacity 0.3s;
   cursor: pointer;
   box-sizing: border-box;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
   border: 0;
   border-radius: 2em;
-  background-color: transparent; // secondary
+  // secondary
   width: 100%;
-  color: #333; // secondary
   font-weight: 700;
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
@@ -25,20 +24,25 @@
   }
 }
 
+.secondary {
+  background-color: transparent;
+  color: #333;
+}
+
 .primary {
   background-color: #1ea7fd;
   color: white;
 }
 
-.small {
+.--small {
   padding: 10px 16px;
   font-size: 12px;
 }
-.medium {
+.--medium {
   padding: 11px 20px;
   font-size: 14px;
 }
-.large {
+.--large {
   padding: 12px 24px;
   font-size: 16px;
 }
diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
@@ -8,7 +8,10 @@ interface FormProps {
 }
 
 export const Form = ({ onSubmit, children }: PropsWithChildren<FormProps>) => (
-  <form onSubmit={onSubmit} className={[form.base, layout.container].join(' ')}>
+  <form
+    onSubmit={onSubmit}
+    className={[form.default, layout.container].join(' ')}
+  >
     {children}
   </form>
 );
diff --git a/src/components/form/form.module.scss b/src/components/form/form.module.scss
@@ -1,4 +1,4 @@
-.base {
+.default {
   display: flex;
   flex-direction: column;
   align-self: center;

diff --git a/src/components/sortable-table/SortableTable.stories.tsx b/src/components/sortable-table/SortableTable.stories.tsx
@@ -28,5 +28,7 @@ type Story = StoryObj<typeof SortableTable>;
 // };
 
 export const SortableTableBasic: Story = {
-  args: {},
+  args: {
+    headings: ['Date', 'Title', 'Amount', 'Distance'],
+  },
 };
diff --git a/src/components/sortable-table/SortableTable.tsx b/src/components/sortable-table/SortableTable.tsx
@@ -1,12 +1,15 @@
-export const SortableTable = () => {
+interface SortableTableProps {
+  headings: string[];
+}
+
+export const SortableTable = ({ headings }: SortableTableProps) => {
   return (
     <table>
       <thead>
         <tr>
-          <th>Date</th>
-          <th>Title</th>
-          <th>Amount</th>
-          <th>Distance</th>
+          {headings.map((heading) => (
+            <th>{heading}</th>
+          ))}
         </tr>
       </thead>
       <tbody>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -14,7 +14,6 @@ function Auth() {
 
 export const HomePage = () => {
   const { data, isLoading, error } = useDataFetch();
-  console.log('data ', data);
 
   return (
     <>
@@ -23,7 +22,7 @@ export const HomePage = () => {
       {data && (
         <>
           <h1>Global Fundamentals Data</h1>
-          <SortableTable />
+          <SortableTable headings={['Date', 'Title', 'Amount', 'Distance']} />
         </>
       )}
     </>

diff --git a/src/pages/sign-in/SignIn.tsx b/src/pages/sign-in/SignIn.tsx
@@ -10,7 +10,7 @@ export const SignInPage = () => {
     <Form onSubmit={() => {}}>
       <Input label="Username" type="text" id="username" autoFocus={true} />
       <Input label="Password" type="password" minLength={8} id="password" />
-      <Button primary size="large" onClick={() => {}} label="Log in" />
+      <Button primary size="lg" onClick={() => {}} label="Log in" />
     </Form>
   );
 };