add dark mode

.eslintrc.cjs

@@ -1,8 +1,4 @@
 module.exports = {
-  extends: ['@it-incubator/eslint-config', 'plugin:storybook/recommended'],
-  rules: {
-    'no-console': ['warn', {
-      allow: ['warn', 'error']
-    }]
-  }
+  extends: ['@it-incubator/eslint-config', 'plugin:storybook/recommended',],
+  plugins: ['react-refresh'],
 };

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import { themes } from '@storybook/theming'
+
+addons.setConfig({
+  theme: themes.dark,
+})

.storybook/preview.ts

@@ -2,11 +2,24 @@ import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/700.css'
 import '../src/styles/index.scss'
 
+import { themes } from '@storybook/theming'
 import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+      theme: themes.dark,
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#000000',
+        },
+      ],
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -10,42 +10,44 @@
     "format": "prettier --write src",
     "lint": "eslint --fix src/**/*.{tsx,ts,jsx,js} --no-error-on-unmatched-pattern && stylelint --fix src/{,*/}*.{scss,css} --allow-empty-input",
     "storybook": "storybook dev -p 6006",
+    "sb": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@fontsource/roboto": "^5.0.5",
+    "@fontsource/roboto": "^5.0.13",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
-    "clsx": "^2.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@storybook/test": "8.0.9",
+    "clsx": "^2.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@it-incubator/eslint-config": "^0.1.3",
+    "@it-incubator/eslint-config": "^1.0.2",
     "@it-incubator/prettier-config": "^0.1.2",
-    "@it-incubator/stylelint-config": "^0.1.5",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/addon-interactions": "^7.1.1",
-    "@storybook/addon-links": "^7.1.1",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.1.1",
-    "@storybook/react": "^7.1.1",
-    "@storybook/react-vite": "^7.1.1",
-    "@storybook/testing-library": "^0.2.0",
-    "@types/node": "^20.4.5",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@it-incubator/stylelint-config": "^1.0.3",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-onboarding": "^8.0.9",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/manager-api": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-vite": "^8.0.9",
+    "@storybook/theming": "^8.0.9",
+    "@types/node": "^20.12.8",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
-    "sass": "^1.64.1",
-    "storybook": "^7.1.1",
-    "stylelint": "^15.10.2",
-    "typescript": "^5.0.2",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^0.8.0",
+    "sass": "^1.76.0",
+    "storybook": "^8.0.9",
+    "stylelint": "^16.5.0",
+    "typescript": "^5.4.5",
     "vite": "^4.4.5"
   }
 }

src/components/ui/checkbox/checkbox.stories.tsx

@@ -28,7 +28,7 @@ export const Controlled: Story = {
         {...args}
         label="Click here"
         checked={checked}
-        onChange={() => setChecked(!checked)}
+        onCheckedChange={() => setChecked(!checked)}
       />
     )
   },

src/components/ui/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { ComponentPropsWithoutRef, FC } from 'react'
 
 import * as CheckboxRadix from '@radix-ui/react-checkbox'
 import * as LabelRadix from '@radix-ui/react-label'
@@ -10,25 +10,16 @@ import { Check } from '@/assets/icons'
 import { Typography } from '@/components'
 
 export type CheckboxProps = {
-  className?: string
-  checked?: boolean
-  onChange?: (checked: boolean) => void
-  disabled?: boolean
-  required?: boolean
   label?: string
-  id?: string
-  position?: 'left'
-}
+  position?: 'left' | 'default'
+} & ComponentPropsWithoutRef<typeof CheckboxRadix.Root>
 
 export const Checkbox: FC<CheckboxProps> = ({
-  checked,
-  onChange,
-  position,
-  disabled,
-  required,
+  position = 'default',
   label,
-  id,
   className,
+  disabled,
+  ...rest
 }) => {
   const classNames = {
     container: clsx(s.container, className),
@@ -43,19 +34,10 @@ export const Checkbox: FC<CheckboxProps> = ({
       <LabelRadix.Root asChild>
         <Typography variant="body2" className={classNames.label} as={'label'}>
           <div className={classNames.buttonWrapper}>
-            <CheckboxRadix.Root
-              className={classNames.root}
-              checked={checked}
-              onCheckedChange={onChange}
-              disabled={disabled}
-              required={required}
-              id={id}
-            >
-              {checked && (
-                <CheckboxRadix.Indicator className={classNames.indicator} forceMount>
-                  <Check />
-                </CheckboxRadix.Indicator>
-              )}
+            <CheckboxRadix.Root className={classNames.root} disabled={disabled} {...rest}>
+              <CheckboxRadix.Indicator className={classNames.indicator}>
+                <Check />
+              </CheckboxRadix.Indicator>
             </CheckboxRadix.Root>
           </div>
           {label}

src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export * from './button'
 export * from './card'
-export * from './typography'
 export * from './checkbox'
+export * from './text-field'
+export * from './typography'