refactor(design-system): update grid variants to use string literals (#…

…133)
kgu-clab · May 12, 2024 · 58ca686 · 58ca686
1 parent 0fef7f9
commit 58ca686
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/packages/design-system/src/Grid/Grid.styles.ts b/packages/design-system/src/Grid/Grid.styles.ts
@@ -1,18 +1,18 @@
 import { cva } from 'class-variance-authority';
 
-export const gridVariants = cva('gird', {
+export const gridVariants = cva('grid', {
   variants: {
     col: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-2',
-      3: 'grid-cols-3',
-      4: 'grid-cols-4',
-      5: 'grid-cols-5',
-      6: 'grid-cols-6',
-      7: 'grid-cols-7',
-      8: 'grid-cols-8',
-      9: 'grid-cols-9',
-      10: 'grid-cols-10',
+      '1': 'grid-cols-1',
+      '2': 'grid-cols-2',
+      '3': 'grid-cols-3',
+      '4': 'grid-cols-4',
+      '5': 'grid-cols-5',
+      '6': 'grid-cols-6',
+      '7': 'grid-cols-7',
+      '8': 'grid-cols-8',
+      '9': 'grid-cols-9',
+      '10': 'grid-cols-10',
     },
     gap: {
       none: 'gap-0',
@@ -22,7 +22,7 @@ export const gridVariants = cva('gird', {
     },
   },
   defaultVariants: {
-    col: 1,
+    col: '1',
     gap: 'none',
   },
 });
diff --git a/packages/design-system/src/Grid/Grid.tsx b/packages/design-system/src/Grid/Grid.tsx
@@ -1,14 +1,14 @@
 import React, { type HTMLAttributes, forwardRef } from 'react';
 
-import { type VariantProps } from 'class-variance-authority';
-
 import { cn } from '../utils';
 import { gridVariants } from './Grid.styles';
-import { GridColVariant, GridGapVariant } from './Grid.types';
+import type {
+  GridColVariant,
+  GridGapVariant,
+  GridVariantProps,
+} from './Grid.types';
 
-interface GridProps
-  extends HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof gridVariants> {
+interface GridProps extends HTMLAttributes<HTMLDivElement>, GridVariantProps {
   col?: GridColVariant;
   gap?: GridGapVariant;
 }

diff --git a/packages/design-system/src/Grid/Grid.types.ts b/packages/design-system/src/Grid/Grid.types.ts
@@ -1,4 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+
 import type { DesignSystemSizeVariant } from '../types';
+import { gridVariants } from './Grid.styles';
+
+export type GridVariantProps = VariantProps<typeof gridVariants>;
 
-export type GridColVariant = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export type GridColVariant =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10';
 export type GridGapVariant = DesignSystemSizeVariant<'none'>;