refactor: add default variants

wanted-fork-fork · Nov 25, 2024 · a7a5140 · a7a5140
1 parent 33d2e0b
commit a7a5140
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 20 deletions.
diff --git a/src/shared/ui/Button/Button.stories.tsx b/src/shared/ui/Button/Button.stories.tsx
@@ -9,6 +9,51 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
+export const Default: Story = {
+  render: () => {
+    const variantList = ['filled', 'outline', 'ghost'] as const;
+    const colorList = ['primary', 'neutral'] as const;
+    const widthType = ['fill', 'hug'] as const;
+    const size = ['fit', 'S', 'M'] as const;
+    return (
+      <div style={{ display: 'grid', gap: '20px', padding: '20px' }}>
+        <div style={{ display: 'grid', gap: '8px' }}>
+          <h3>variant</h3>
+          {variantList.map((v) => (
+            <Button key={v} variant={v} color={'primary'} widthType={'hug'}>
+              variant: {v}
+            </Button>
+          ))}
+        </div>
+        <div style={{ display: 'grid', gap: '8px' }}>
+          <h3>color</h3>
+          {colorList.map((v) => (
+            <Button key={v} variant={'filled'} color={v} widthType={'hug'}>
+              color: {v}
+            </Button>
+          ))}
+        </div>
+        <div style={{ display: 'grid', gap: '8px' }}>
+          <h3>widthType</h3>
+          {widthType.map((v) => (
+            <Button key={v} variant={'filled'} color={'primary'} widthType={v}>
+              widthType: {v}
+            </Button>
+          ))}
+        </div>
+        <div style={{ display: 'grid', gap: '8px' }}>
+          <h3>size</h3>
+          {size.map((v) => (
+            <Button key={v} variant={'filled'} color={'primary'} widthType={'hug'} size={v}>
+              size: {v}
+            </Button>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
 export const PrimaryButton: Story = {
   args: {
     variant: 'filled',

diff --git a/src/shared/ui/Button/Button.tsx b/src/shared/ui/Button/Button.tsx
@@ -1,20 +1,9 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react';
 import styles from './Button.module.css';
-import { cva } from 'cva';
-
-type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-  variant: 'filled' | 'outline' | 'ghost';
-  color: 'primary' | 'neutral';
-  widthType: 'fill' | 'hug';
-  suffixSlot?: ReactNode;
-  prefixSlot?: ReactNode;
-  textAlign?: 'left' | 'center' | 'right';
-  size?: 'fit' | 'S' | 'M';
-};
+import { cva, VariantProps } from 'cva';
 
 const buttonStyle = cva(styles.Button, {
   variants: {
-    disabled: { enabled: '', disabled: '' },
     widthType: { fill: styles.WidthType_Fill, hug: styles.WidthType_Hug },
     textAlign: { left: styles.TextAlign_Left, center: styles.TextAlign_Center, right: styles.TextAlign_Right },
     size: { M: styles.Size_M, S: styles.Size_S, fit: styles.Size_Fit },
@@ -28,26 +17,33 @@ const buttonStyle = cva(styles.Button, {
     { variant: 'outline', color: 'neutral', className: styles.Variant_Outline_Neutral },
     { variant: 'ghost', color: 'primary', className: styles.Variant_Ghost_Primary },
     { variant: 'ghost', color: 'neutral', className: styles.Variant_Ghost_Neutral },
-    { variant: 'ghost', disabled: 'disabled', className: styles.Disabled_Ghost },
   ],
+  defaultVariants: {
+    variant: 'filled',
+    color: 'primary',
+    size: 'M',
+    textAlign: 'center',
+  },
 });
 
+type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+  suffixSlot?: ReactNode;
+  prefixSlot?: ReactNode;
+} & VariantProps<typeof buttonStyle>;
+
 export const Button = ({
   className = '',
   variant,
   color,
-  size = 'M',
-  widthType = 'fill',
-  textAlign = 'center',
+  size,
+  widthType,
+  textAlign,
   suffixSlot,
   prefixSlot,
   children,
   ...props
 }: ButtonProps) => (
-  <button
-    className={`${buttonStyle({ variant, color, widthType, textAlign, size, disabled: props.disabled ? 'disabled' : 'enabled' })} ${className}`}
-    {...props}
-  >
+  <button className={`${buttonStyle({ variant, color, widthType, textAlign, size })} ${className}`} {...props}>
     {prefixSlot && <span className={styles.PrefixSlot}>{prefixSlot}</span>}
     {children && <span className={styles.Center}>{children}</span>}
     {suffixSlot && <span className={styles.SuffixSlot}>{suffixSlot}</span>}