Use storybook with vite

.storybook/main.ts

@@ -1,14 +1,16 @@
-const config = {
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  staticDirs: ['../src/fonts/'],
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   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

@@ -25,13 +25,15 @@
     "@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",
+    "@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",
@@ -76,11 +78,12 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.35.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "storybook": "^7.6.15",
+    "storybook": "^7.6.17",
     "styled-components": "^6.1.8",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3"
   },
   "resolutions": {
     "serialize-javascript": "^6.0.0",

stories/Box.stories.tsx → src/stories/Box.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
-import Box from '../src/components/Box'
+import Box from '../components/Box'
 
 const meta = {
   title: 'Components/Box',

stories/Button.stories.tsx → src/stories/Button.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 import { BsTwitter } from 'react-icons/bs'
-import Box from '../src/components/Box'
-import Button from '../src/components/Button'
+import Box from '../components/Box'
+import Button from '../components/Button'
 
 const meta = {
   title: 'Components/Button',

stories/Checkbox.stories.tsx → src/stories/Checkbox.stories.tsx

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

stories/Colors.mdx → src/stories/Colors.mdx

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

stories/Container.stories.tsx → src/stories/Container.stories.tsx

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

stories/FacebookShareButton.stories.tsx → src/stories/FacebookShareButton.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import FacebookShareButton from '../src/components/FacebookShareButton'
+import FacebookShareButton from '../components/FacebookShareButton'
 
 const meta = {
   title: 'Components/FacebookShareButton',

stories/Heading.stories.tsx → src/stories/Heading.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import Heading from '../src/components/Heading'
-import colors from '../src/theme/colors'
+import React from 'react'
+import Heading from '../components/Heading'
+import colors from '../theme/colors'
 
 const meta: Meta = {
   title: 'Components/Heading',

stories/Hero.stories.tsx → src/stories/Hero.stories.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
-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'
+import React from 'react'
+import Heading from '../components/Heading'
+import Hero from '../components/Hero'
+import HeroLead from '../components/HeroLead'
+import LogoOONIRun from '../components/LogoOONIRun'
+import Text from '../components/Text'
 
 const meta: Meta = {
   title: 'Components/Hero',

stories/IconButton.stories.tsx → src/stories/IconButton.stories.tsx

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

stories/Input.stories.tsx → src/stories/Input.stories.tsx

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

stories/InputWithIconButton.stories.tsx → src/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 Container from '../components/Container'
+import InputWithIconButton from '../components/InputWithIconButton'
 
 const meta: Meta = {
   title: 'Components/InputWithIconButton',

stories/Link.stories.tsx → src/stories/Link.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import Link from '../src/components/Link'
+import Link from '../components/Link'
 
 const meta = {
   title: 'Components/Link',

stories/LogoOONIRun.stories.tsx → src/stories/LogoOONIRun.stories.tsx

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

stories/Modal.stories.tsx → src/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 Box from '../src/components/Box'
-import Flex from '../src/components/Flex'
-import Modal from '../src/components/Modal'
-import Container from '../src/components/Container'
-import Button from '../src/components/Button'
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useCallback, useState } from 'react'
+import Box from '../components/Box'
+import Button from '../components/Button'
+import Container from '../components/Container'
+import Flex from '../components/Flex'
+import Modal from '../components/Modal'
 
 const meta: Meta = {
   title: 'Components/Modal',

stories/MultiSelect.stories.tsx → src/stories/MultiSelect.stories.tsx

@@ -1,9 +1,9 @@
-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'
+import Box from '../components/Box'
+import MultiSelect from '../components/MultiSelect'
 
 const meta: Meta = {
   title: 'Components/MultiSelect',

stories/MultiSelectCreatable.stories.tsx → src/stories/MultiSelectCreatable.stories.tsx

@@ -1,9 +1,8 @@
-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'
+import Box from '../components/Box'
+import MultiSelectCreatable from '../components/MultiSelectCreatable'
 
 const meta: Meta = {
   title: 'Components/MultiSelectCreatable',

stories/OONIIcons.stories.tsx → src/stories/OONIIcons.stories.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
 import { Meta } from '@storybook/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 React from 'react'
+import Box from '../components/Box'
+import Flex from '../components/Flex'
+import Text from '../components/Text'
+import * as OONIIcons from '../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 → src/stories/RadioButton.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import RadioButton from '../src/components/RadioButton'
+import RadioButton from '../components/RadioButton'
 
 const meta: Meta = {
   title: 'Components/RadioButton',

stories/RadioGroup.stories.tsx → src/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 RadioButton from '../src/components/RadioButton'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import RadioButton from '../components/RadioButton'
+import RadioGroup from '../components/RadioGroup'
 
 const meta: Meta = {
   title: 'Components/RadioGroup',

stories/Select.stories.tsx → src/stories/Select.stories.tsx

@@ -1,9 +1,9 @@
-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'
+import Box from '../components/Box'
+import Select from '../components/Select'
 
 const meta: Meta = {
   title: 'Components/Select',

stories/Text.stories.tsx → src/stories/Text.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import Text from '../src/components/Text'
+import Text from '../components/Text'
 
 const meta = {
   title: 'Components/Text',

stories/Textarea.stories.tsx → src/stories/Textarea.stories.tsx

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

stories/TwitterShareButton.stories.tsx → src/stories/TwitterShareButton.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
-import TwitterShareButton from '../src/components/TwitterShareButton'
+import TwitterShareButton from '../components/TwitterShareButton'
 
 const meta = {
   title: 'Components/TwitterShareButton',

stories/components/ColorPalette.tsx → src/stories/components/ColorPalette.tsx

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

tsconfig.json

@@ -18,6 +18,6 @@
     "baseUrl": "src",
     "allowJs": true
   },
-  "include": ["src", "src/types/svg.d.ts", "stories"],
+  "include": ["src", "src/types/svg.d.ts", "src/stories"],
   "exclude": ["dist", "node_modules", "src/components/icons"]
 }

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()],
+});