chore: 타입스크립트 버전을 5.4.5 버전으로 올린다

.storybook/main.ts

@@ -43,14 +43,17 @@ const config: StorybookViteConfig & {
       disable: true,
     },
   },
+
   stories: storybookLibraries.map(name => ({
     directory: `../packages/${name}`,
     files: '**/*.stories.tsx',
     titlePrefix: name,
   })),
+
   features: {
     storyStoreV7: true,
   },
+
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-controls',
@@ -60,6 +63,7 @@ const config: StorybookViteConfig & {
     '@storybook/addon-viewport',
     '@storybook/native-addon/dist/register.js',
   ].filter(Boolean),
+
   typescript: {
     check: true,
     reactDocgen: 'react-docgen-typescript',
@@ -116,9 +120,9 @@ const config: StorybookViteConfig & {
       },
     },
   },
-  core: {
-    builder: '@storybook/builder-vite',
-  },
+
+  core: {},
+
   previewHead: head => `
     ${head}
     <link
@@ -134,6 +138,7 @@ const config: StorybookViteConfig & {
     />
     <link href="https://cdn.class101.net/fonts/pretendard-1.3.0/pretendard-jp-dynamic-subset.css" rel="stylesheet" />
   `,
+
   async viteFinal(viteConfig) {
     return mergeConfig(viteConfig, {
       cacheDir: path.join(
@@ -159,6 +164,7 @@ const config: StorybookViteConfig & {
       plugins: [tsconfigPaths()],
     } as InlineConfig);
   },
+
   env(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       return {
@@ -170,6 +176,15 @@ const config: StorybookViteConfig & {
 
     return config;
   },
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {
+    autodocs: false,
+  },
 };
 
 export default config;

package.json

@@ -10,9 +10,9 @@
     "lint:all": "nx run-many --target=lint --all",
     "lint:all:fix": "nx run-many --target=lint --all --fix",
     "storybook": "nx storybook",
-    "start-storybook": "NODE_OPTIONS=\"--openssl-legacy-provider\" start-storybook --port=5004",
+    "start-storybook": "NODE_OPTIONS=\"--openssl-legacy-provider\" storybook dev --port=5004",
     "generate-icons": "svgo -rf packages/vibrant-icons/assets/icons && nx generate-icons vibrant-icons",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "typecheck": "nx typecheck",
     "vibrant-app": "nx start vibrant-example-app",
     "vibrant-docs": "nx serve vibrant-website"
@@ -52,19 +52,19 @@
     "@react-native-community/cli-platform-ios": "10.2.1",
     "@rollup/plugin-alias": "5.1.1",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@storybook/addon-actions": "6.5.10",
-    "@storybook/addon-controls": "6.5.10",
-    "@storybook/addon-jest": "6.5.10",
-    "@storybook/addon-links": "6.5.10",
-    "@storybook/addon-measure": "6.5.10",
-    "@storybook/addon-toolbars": "6.5.10",
-    "@storybook/addon-viewport": "6.5.10",
-    "@storybook/builder-vite": "0.1.36",
-    "@storybook/core-server": "6.5.10",
+    "@storybook/addon-actions": "7.6.20",
+    "@storybook/addon-controls": "7.6.20",
+    "@storybook/addon-jest": "7.6.20",
+    "@storybook/addon-links": "7.6.20",
+    "@storybook/addon-measure": "7.6.20",
+    "@storybook/addon-toolbars": "7.6.20",
+    "@storybook/addon-viewport": "7.6.20",
+    "@storybook/core-server": "7.6.20",
     "@storybook/native": "2.2.8",
     "@storybook/native-addon": "2.2.8",
     "@storybook/native-dev-middleware": "2.2.8",
-    "@storybook/react": "6.5.10",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-vite": "7.6.20",
     "@svgr/cli": "6.2.1",
     "@svgr/core": "6.2.1",
     "@svgr/webpack": "6.5.1",
@@ -82,9 +82,9 @@
     "@types/react-dom": "18.0.6",
     "@types/react-test-renderer": "18.0.0",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.59.6",
-    "@typescript-eslint/parser": "5.59.6",
-    "@typescript-eslint/utils": "5.59.6",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/utils": "5.62.0",
     "babel-jest": "29.4.3",
     "babel-plugin-react-native-web": "0.18.1",
     "babel-plugin-transform-node-env-inline": "0.4.3",
@@ -118,17 +118,17 @@
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-multi-input": "1.3.1",
     "rollup-plugin-visualizer": "5.8.3",
-    "storybook": "6.5.10",
+    "storybook": "7.6.20",
     "style-loader": "^3.3.0",
     "stylus": "^0.55.0",
     "stylus-loader": "^7.1.0",
     "svgo": "3.3.2",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "4.7.2",
+    "typescript": "5.4.5",
     "url-loader": "^4.1.1",
-    "vite": "3.2.6",
-    "vite-tsconfig-paths": "3.5.0",
+    "vite": "5.4.11",
+    "vite-tsconfig-paths": "5.1.4",
     "webpack": "^5.75.0",
     "webpack-merge": "^5.8.0"
   },

packages/vibrant-components/src/lib/CheckboxGroupField/CheckboxGroupField.tsx

@@ -15,7 +15,7 @@ export const CheckboxGroupField = withCheckboxGroupFieldVariation(
     testId = 'checkbox-group-field',
     onValueChange,
   }) => {
-    const [checkboxValue, setCheckboxValue] = useState(
+    const [checkboxValue, setCheckboxValue] = useState<Record<string, boolean>>(
       () =>
         defaultValue ?? options.reduce((prevValue, currentValue) => ({ ...prevValue, [currentValue.value]: false }), {})
     );

packages/vibrant-components/src/lib/Divider/DividerProps.ts

@@ -62,6 +62,7 @@ export const withDividerVariation = withVariation<DividerProps>('Divider')(
       },
       {
         name: 'size',
+        responsive: true,
       },
       {
         name: 'spacing',

packages/vibrant-components/src/lib/FieldLayout/FieldLayout.stories.tsx

@@ -12,6 +12,6 @@ export default {
 
 export const Basic: ComponentStory<typeof FieldLayout> = props => (
   <VStack width="100%" p={20}>
-    <FieldLayout {...props} renderField={() => null} />
+    <FieldLayout {...props} renderField={() => null} size={['sm', 'md']} />
   </VStack>
 );

packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx

@@ -37,6 +37,7 @@ export const FieldLayout = withFieldLayoutVariation(
     helperTextTypography,
     helperTextSpacing,
     height,
+    fieldHeight,
     spacing,
     iconSize,
     hitSlop,
@@ -83,7 +84,7 @@ export const FieldLayout = withFieldLayoutVariation(
               {prefixText}
             </Text>
 
-            {renderField({ height: height - 2, color: valueColor, pt, pl, pr, pb, typography })}
+            {renderField({ height: fieldHeight, color: valueColor, pt, pl, pr, pb, typography })}
 
             <Text
               typography={typography}

packages/vibrant-components/src/lib/FieldLayout/FieldLayoutProps.ts

@@ -43,6 +43,7 @@ export const withFieldLayoutVariation = withVariation<FieldLayoutProps>('FieldLa
     variants: {
       lg: {
         height: 50,
+        fieldHeight: 48,
         typography: 'body2',
         helperTextTypography: 'body4',
         helperTextSpacing: 4,
@@ -53,6 +54,7 @@ export const withFieldLayoutVariation = withVariation<FieldLayoutProps>('FieldLa
       },
       md: {
         height: 38,
+        fieldHeight: 36,
         typography: 'body2',
         helperTextTypography: 'body4',
         helperTextSpacing: 4,
@@ -63,6 +65,7 @@ export const withFieldLayoutVariation = withVariation<FieldLayoutProps>('FieldLa
       },
       sm: {
         height: 30,
+        fieldHeight: 28,
         typography: 'body4',
         helperTextTypography: 'body5',
         helperTextSpacing: 2,

packages/vibrant-components/src/lib/Toast/ToastProps.ts

@@ -23,6 +23,10 @@ export const withToastVariation = withVariation<ToastProps>('Toast')(
   propVariant({
     props: [{ name: 'kind', default: 'default' }],
     variants: {
+      default: {
+        IconComponent: undefined,
+        color: 'onColor' as const,
+      },
       error: {
         IconComponent: Icon.AlertCircle.Fill,
         color: 'onViewError' as const,

packages/vibrant-core/src/lib/propVariant/propVariant.ts

@@ -21,19 +21,19 @@ const getVariationProps = <Props extends Record<string, any>>(
   return variants[variantKey as string];
 };
 
-export const propVariant =
-  <
+export function propVariant<
     Props extends Record<string, any>,
-    PropsConfig extends AnyPropConfig<Props>[],
+    // eslint-disable-next-line prettier/prettier
+    const PropsConfig extends readonly AnyPropConfig<Props>[],
     Variants extends VariantsConfig<Props, PropsConfig>
   >({
     props,
     variants,
   }: {
-    props: [...PropsConfig];
+    props: readonly [...PropsConfig];
     variants: Variants;
-  }): VariantFn<Props, SkipForwards<Props, PropsConfig> & VariantsReturnProps<PropsConfig, Variants>> =>
-  (prevProps: any) => {
+  }): VariantFn<Props, SkipForwards<Props, PropsConfig> & VariantsReturnProps<PropsConfig, Variants>> {
+  return (prevProps: any) => {
     const shouldHandleResponsive = props.some(config => config.responsive);
     const nextProps = {
       ...prevProps,
@@ -92,4 +92,5 @@ export const propVariant =
       ...nextProps,
       ...variantProps,
     };
-  };
+  }
+}

packages/vibrant-core/src/lib/propVariant/type.ts

@@ -57,17 +57,17 @@ export type VariantsValue<PropsConfig, Value> = {
     : DeepWritable<IncludeResponsiveProp<PropsConfig> extends true ? ResponsiveValue<Value[key]> : Value[key]>;
 };
 
-type VariantsFnProps<Props, PropsConfig> = PropsConfig extends [infer First, ...infer Rest]
-  ? (First extends { name: keyof Props }
-      ? {
-          [key in First['name']]-?: Exclude<
-            UnResponsiveValue<Props[First['name']]>,
-            First extends { default: any } ? undefined : never
-          >;
-        }
-      : unknown) &
-      VariantsFnProps<Props, Rest>
-  : Record<never, never>;
+type VariantsFnProps<Props, PropsConfig extends readonly AnyPropConfig<Props>[]> = {
+  [K in PropsConfig[number] as K extends { name: infer Name }
+    ? Name extends keyof Props
+      ? Name
+      : never
+    : never]: K extends { name: infer Name }
+    ? Name extends keyof Props
+      ? Exclude<UnResponsiveValue<Props[Name]>, K extends { default: any } ? undefined : never>
+      : never
+    : never;
+};
 
 export type SkipForwards<Props, PropsConfig> = PropsConfig extends [infer First, ...infer Rest]
   ? First extends {
@@ -79,10 +79,11 @@ export type SkipForwards<Props, PropsConfig> = PropsConfig extends [infer First,
     : Props
   : Props;
 
-export type VariantsConfig<Props, PropsConfig, VariantsReturn = Record<string, any>> = PropsConfig extends [
-  infer First,
-  ...infer Rest
-]
+export type VariantsConfig<
+  Props,
+  PropsConfig extends readonly AnyPropConfig<Props>[],
+  VariantsReturn = Record<string, any>
+> = PropsConfig extends readonly [infer First, ...infer Rest]
   ? Rest extends [any]
     ? (props: VariantsFnProps<Props, PropsConfig>) => VariantsReturn
     : First extends { name: keyof Props }