Use storybook with vite

.storybook/main.ts

@@ -1,14 +1,17 @@
-const config = {
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../src/fonts/'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-mdx-gfm'
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {

.storybook/preview.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import type { Preview } from '@storybook/react'
+import React from 'react'
 import { ThemeProvider } from 'styled-components'
 import theme from '../src/theme'
 
@@ -9,7 +9,7 @@ const preview: Preview = {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
+        date: /Date$/i,
       },
     },
   },

package.json

@@ -15,40 +15,42 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-interactions": "^7.6.15",
-    "@storybook/addon-links": "^7.6.15",
-    "@storybook/addon-mdx-gfm": "^7.6.15",
-    "@storybook/blocks": "^7.6.15",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-webpack5": "^7.6.15",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-mdx-gfm": "^7.6.17",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
-    "@svgr/rollup": "^8.0.1",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
+    "@svgr/rollup": "^8.1.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
     "@types/styled-system": "^5.1.22",
     "@types/styled-system__css": "^5.0.21",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
-    "eslint": "^8.46.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-import": "^2.28.0",
@@ -58,7 +60,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-watch": "^8.0.0",
-    "gh-pages": "^5.0.0",
+    "gh-pages": "^6.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.1.1",
@@ -68,19 +70,20 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "rimraf": "^5.0.1",
-    "rollup": "^3.27.0",
-    "rollup-plugin-copy": "^3.4.0",
+    "rollup": "^4.12.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^5.3.1",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.35.0",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "storybook": "^7.6.15",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "storybook": "^7.6.17",
     "styled-components": "^6.1.8",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3"
   },
   "resolutions": {
     "serialize-javascript": "^6.0.0",

rollup.config.mjs

@@ -1,17 +1,17 @@
-import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
-import typescript from '@rollup/plugin-typescript'
-import { dts } from 'rollup-plugin-dts'
 import json from '@rollup/plugin-json'
+import resolve from '@rollup/plugin-node-resolve'
 import terser from '@rollup/plugin-terser'
-import { visualizer } from 'rollup-plugin-visualizer'
+import typescript from '@rollup/plugin-typescript'
+import url from '@rollup/plugin-url'
+import svgr from '@svgr/rollup'
+import copy from 'rollup-plugin-copy'
+import del from 'rollup-plugin-delete'
+import { dts } from 'rollup-plugin-dts'
 import filesize from 'rollup-plugin-filesize'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
-import copy from 'rollup-plugin-copy'
-import svgr from '@svgr/rollup'
-import url from '@rollup/plugin-url'
+import { visualizer } from 'rollup-plugin-visualizer'
 import packageJson from './package.json' assert { type: 'json' }
-import del from 'rollup-plugin-delete'
 
 const extensions = ['.ts', '.tsx']
 const mainBundle = {

stories/Colors.mdx

@@ -1,5 +1,5 @@
 import ColorPalette from './components/ColorPalette'
-import { theme, Flex, Box } from '../src'
+import { theme, Flex, Box } from '../src/index'
 
 # Colors
 

stories/Container.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import Container from '../src/components/Container'
 

stories/FacebookShareButton.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import FacebookShareButton from '../src/components/FacebookShareButton'
 

stories/Heading.stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 import Heading from '../src/components/Heading'
 import colors from '../src/theme/colors'
 

stories/Hero.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
+import React from 'react'
+import Heading from '../src/components/Heading'
 import Hero from '../src/components/Hero'
 import HeroLead from '../src/components/HeroLead'
 import LogoOONIRun from '../src/components/LogoOONIRun'
-import Heading from '../src/components/Heading'
 import Text from '../src/components/Text'
 
 const meta: Meta = {

stories/IconButton.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { FaAmazon, FaAndroid, FaApple } from 'react-icons/fa'
 import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { FaAndroid } from 'react-icons/fa'
 import IconButton from '../src/components/IconButton'
 
 const meta = {

stories/Input.stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 import Input from '../src/components/Input'
 
 const meta = {

stories/InputWithIconButton.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 import { MdDelete } from 'react-icons/md'
-import InputWithIconButton from '../src/components/InputWithIconButton'
 import Container from '../src/components/Container'
+import InputWithIconButton from '../src/components/InputWithIconButton'
 
 const meta: Meta = {
   title: 'Components/InputWithIconButton',

stories/LogoOONIRun.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
-import LogoOONIRun from '../src/components/LogoOONIRun'
+import React from 'react'
 import Container from '../src/components/Container'
+import LogoOONIRun from '../src/components/LogoOONIRun'
 
 const meta: Meta = {
   title: 'LogoOONIRun',

stories/Modal.stories.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useState } from 'react'
-import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useCallback, useState } from 'react'
 import Box from '../src/components/Box'
+import Button from '../src/components/Button'
+import Container from '../src/components/Container'
 import Flex from '../src/components/Flex'
 import Modal from '../src/components/Modal'
-import Container from '../src/components/Container'
-import Button from '../src/components/Button'
 
 const meta: Meta = {
   title: 'Components/Modal',

stories/MultiSelect.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { Meta } from '@storybook/react'
+import React from 'react'
 
 import Box from '../src/components/Box'
 import MultiSelect from '../src/components/MultiSelect'

stories/MultiSelectCreatable.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import React from 'react'
 
 import Box from '../src/components/Box'
 import MultiSelectCreatable from '../src/components/MultiSelectCreatable'

stories/OONIIcons.stories.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
+import React from 'react'
 import Box from '../src/components/Box'
 import Flex from '../src/components/Flex'
-import * as OONIIcons from '../src/components/icons'
 import Text from '../src/components/Text'
+import * as OONIIcons from '../src/components/icons'
+
+type IconType = keyof typeof OONIIcons
 
 const meta: Meta = {
   title: 'OONIIcons',
@@ -15,7 +17,7 @@ export const Default = {
   render: () => (
     <Flex flexWrap="wrap">
       {Object.keys(OONIIcons).map((k) => {
-        const Icon = OONIIcons[k]
+        const Icon = OONIIcons[k as IconType] 
         return (
           <Box key={k} width={1 / 5} pb={3}>
             <Icon size={50} />

stories/RadioButton.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import RadioButton from '../src/components/RadioButton'
 

stories/RadioGroup.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import RadioGroup from '../src/components/RadioGroup'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 import RadioButton from '../src/components/RadioButton'
+import RadioGroup from '../src/components/RadioGroup'
 
 const meta: Meta = {
   title: 'Components/RadioGroup',

stories/Select.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { Meta } from '@storybook/react'
+import React from 'react'
 
 import Box from '../src/components/Box'
 import Select from '../src/components/Select'

stories/Textarea.stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 import Textarea from '../src/components/Textarea'
 
 const meta = {

stories/components/ColorPalette.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Text } from '../../src'
+import { Box, Text } from '../../src/index'
 
 type ColorPaletteProps = {
   color: string

vite.config.ts

@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});