feat: upgrade storybook and vite (#651)

Co-authored-by: Jake Laderman <[email protected]>

.storybook/main.ts

@@ -1,13 +1,22 @@
 import { type StorybookConfig } from '@storybook/react-vite'
 
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
   ],
+
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+
   framework: '@storybook/react-vite',
-}
 
-export default config
+  // TODO: Enable if we need autodocs. Causes a CJS warning in vite
+  // typescript: {
+  //   reactDocgen: 'react-docgen-typescript',
+  // },
+} as StorybookConfig

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons'
+import { addons } from '@storybook/manager-api'
 
 import theme from './theme'
 

.storybook/preview.ts

@@ -1,45 +1,73 @@
-import * as jest from 'jest-mock'
-
 import { type Preview } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { themes } from '@storybook/theming'
 
+import { DEFAULT_COLOR_MODE } from '../src/theme'
 import themeDecorator from '../src/ThemeDecorator'
-import { COLOR_MODES, DEFAULT_COLOR_MODE } from '../src/theme'
 
-// @ts-expect-error
-window.jest = jest
+// Copied from https://github.com/storybookjs/storybook/blob/v8.2.5/code/core/src/theming/utils.ts
+const { window: globalWindow } = global
+
+export const getPreferredColorScheme = () => {
+  if (!globalWindow || !globalWindow.matchMedia) return 'light'
+
+  const isDarkThemePreferred = globalWindow.matchMedia(
+    '(prefers-color-scheme: dark)'
+  ).matches
+
+  if (isDarkThemePreferred) return 'dark'
+
+  return 'light'
+}
 
 const preview: Preview = {
   parameters: {
     layout: 'fullscreen',
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: { onClick: fn },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    docs: {
+      theme: themes.dark,
+    },
     options: {
       storySort: {
         order: ['Semantic System', '*'],
       },
     },
   },
+
   globalTypes: {
     theme: {
+      name: 'Toggle theme',
       description: 'Global theme for components',
-      defaultValue: DEFAULT_COLOR_MODE,
       toolbar: {
         // The label to show for this toolbar item
         title: 'Theme',
         icon: 'circlehollow',
         // Array of plain string values or MenuItem shape (see below)
-        items: COLOR_MODES,
+        items: [
+          { value: 'light', icon: 'circlehollow', title: 'Light' },
+          { value: 'dark', icon: 'circle', title: 'Dark' },
+        ],
         // Change title based on selected value
         dynamicTitle: true,
+        showName: true,
       },
     },
   },
+
+  initialGlobals: {
+    theme: DEFAULT_COLOR_MODE,
+  },
+
   decorators: [themeDecorator],
+
+  // TODO: Enable if we need autodocs
+  // tags: ['autodocs'],
 }
 
 export default preview

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create'
+import { create } from '@storybook/theming'
 
 export default create({
   base: 'dark',
@@ -27,9 +27,9 @@ export default create({
   textMutedColor: 'grey',
 
   // Toolbar default and active colors
-  barTextColor: 'white',
-  barSelectedColor: '#293EFF',
-  barBg: '#2A2E37',
+  barTextColor: '#73828C',
+  barSelectedColor: '#73828C',
+  barBg: '#1E2229',
 
   // Form colors
   inputBg: '#1E2229',

package.json

@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "description": "Pluralsh Design System",
   "main": "dist/index.js",
+  "type": "module",
   "files": [
     "dist/**/*",
     "src/**/*"
   ],
   "scripts": {
-    "start": "storybook dev -p 6006 -s public",
-    "build:storybook": "yarn clean && storybook build -s public && yarn build:fix:storybook",
+    "start": "storybook dev -p 6006",
+    "build:storybook": "yarn clean && storybook build && yarn build:fix:storybook",
     "build:fix:storybook": "perl -pi -w -e 's/%40/@/g;' storybook-static/index.html",
     "storybook:serve-static": "yarn build:storybook && http-server storybook-static",
     "build": "npx tsc --declaration",
@@ -75,17 +76,16 @@
     "@emotion/styled": "11.11.0",
     "@pluralsh/eslint-config-typescript": "2.5.147",
     "@react-types/shared": "3.22.0",
-    "@storybook/addon-actions": "7.6.5",
-    "@storybook/addon-docs": "7.6.5",
-    "@storybook/addon-essentials": "7.6.5",
-    "@storybook/addon-interactions": "7.6.5",
-    "@storybook/addon-links": "7.6.5",
-    "@storybook/addons": "7.6.17",
-    "@storybook/builder-vite": "7.6.5",
-    "@storybook/node-logger": "7.6.5",
-    "@storybook/react": "7.6.5",
-    "@storybook/react-vite": "7.6.5",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-actions": "8.3.5",
+    "@storybook/addon-docs": "8.3.5",
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-interactions": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/builder-vite": "8.3.5",
+    "@storybook/node-logger": "8.3.5",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-vite": "8.3.5",
+    "@storybook/theming": "8.3.5",
     "@testing-library/jest-dom": "5.17.0",
     "@types/chroma-js": "2.4.3",
     "@types/lodash-es": "4.17.12",
@@ -94,6 +94,7 @@
     "@types/react-transition-group": "4.4.10",
     "@typescript-eslint/eslint-plugin": "6.14.0",
     "@typescript-eslint/parser": "6.14.0",
+    "@vitejs/plugin-react": "4.3.2",
     "@vitest/coverage-v8": "1.0.4",
     "@vitest/ui": "1.0.4",
     "babel-loader": "9.1.3",
@@ -103,7 +104,7 @@
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-import-newlines": "1.3.4",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
@@ -118,15 +119,15 @@
     "lint-staged": "15.2.0",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.5",
-    "storybook": "7.6.5",
+    "storybook": "8.3.5",
     "styled-components": "6.1.13",
     "typescript": "5.6.2",
-    "vite": "5.0.10",
-    "vitest": "1.0.4"
+    "vite": "5.4.8",
+    "vitest": "2.1.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.0",
@@ -136,7 +137,7 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "react-transition-group": ">=4.4.5",
-    "styled-components": ">=5.3.11"
+    "styled-components": ">=6.1.13"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/components/TagMultiSelect.tsx

@@ -1,5 +1,4 @@
 import { type ComponentProps, type Key, useMemo, useState } from 'react'
-
 import styled, { useTheme } from 'styled-components'
 
 import {
@@ -12,14 +11,8 @@ import {
   SelectButton,
   type SelectPropsSingle,
 } from '..'
-
 import { isNonNullable } from '../utils/isNonNullable'
 
-export type MultiSelectTag = {
-  name: string
-  value: string
-}
-
 const matchOptions = [
   { label: 'All', value: 'AND' },
   { label: 'Any', value: 'OR' },
@@ -28,11 +21,11 @@ const matchOptions = [
 type TagMultiSelectProps = {
   options: string[]
   loading: boolean
+  selectedTagKeys: Set<Key>
+  setSelectedTagKeys: (keys: Set<Key>) => void
+  inputValue: string
+  setInputValue: (value: string) => void
   innerChips?: boolean
-  selectedTagKeys?: Set<Key>
-  setSelectedTagKeys?: (keys: Set<Key>) => void
-  inputValue?: string
-  setInputValue?: (value: string) => void
   selectedMatchType?: 'AND' | 'OR'
   onSelectedTagsChange?: (keys: Set<Key>) => void
   onFilterChange?: (value: string) => void
@@ -41,7 +34,21 @@ type TagMultiSelectProps = {
   selectProps?: Omit<SelectPropsSingle, 'children'>
 }
 
-function TagMultiSelect({
+const MultiSelectMatchButtonContainer = styled.div`
+  > div {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
+`
+
+const TagMultiSelect = styled(TagMultiSelectUnstyled)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing.xsmall,
+}))
+
+function TagMultiSelectUnstyled({
   options,
   loading,
   innerChips = true,
@@ -56,7 +63,10 @@ function TagMultiSelect({
   ...props
 }: TagMultiSelectProps & ComponentProps<'div'>) {
   const theme = useTheme()
-  const selectedTagArr = useMemo(() => [...selectedTagKeys], [selectedTagKeys])
+  const selectedTagArr = useMemo(
+    () => [...(selectedTagKeys ?? [])],
+    [selectedTagKeys]
+  )
   const [isOpen, setIsOpen] = useState(false)
   const [searchLogic, setSearchLogic] = useState<string>(
     selectedMatchType || matchOptions[0].value
@@ -72,7 +82,7 @@ function TagMultiSelect({
   }
 
   return (
-    <TagMultiSelectWrapperSC {...props}>
+    <div {...props}>
       <Flex>
         <Select
           label="Pick search logic"
@@ -114,7 +124,7 @@ function TagMultiSelect({
               : undefined
           }
           onDeleteChip={(chipKey) => {
-            const newKeys = new Set(selectedTagKeys)
+            const newKeys = new Set(selectedTagKeys ?? [])
 
             newKeys.delete(chipKey)
             setSelectedTagKeys(newKeys)
@@ -141,7 +151,7 @@ function TagMultiSelect({
         >
           {options
             .map((tagStr) => {
-              if (selectedTagKeys.has(tagStr)) {
+              if (selectedTagKeys?.has(tagStr) ?? false) {
                 return null
               }
 
@@ -179,23 +189,9 @@ function TagMultiSelect({
           }}
         />
       )}
-    </TagMultiSelectWrapperSC>
+    </div>
   )
 }
 
 export { TagMultiSelect }
 export type { TagMultiSelectProps }
-
-const TagMultiSelectWrapperSC = styled.div(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing.xsmall,
-}))
-
-const MultiSelectMatchButtonContainer = styled.div`
-  > div {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: none;
-  }
-`

src/components/pricingcalculator/PricingCalculatorExtended.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useEffect, useMemo, useState } from 'react'
 import { Switch } from 'honorable'
 
+import { useTheme } from 'styled-components'
+
 import Card, { type CardProps } from '../Card'
 
 import {
@@ -39,6 +41,7 @@ const PricingCalculatorExtended = forwardRef<
     },
     ref
   ) => {
+    const theme = useTheme()
     const [providerId, setProviderId] = useState(PROVIDERS[0].id)
     const [clusters, setClusters] = useState(clustersDefault)
     const [apps, setApps] = useState(appsDefault)
@@ -73,9 +76,11 @@ const PricingCalculatorExtended = forwardRef<
 
     return (
       <Card
-        padding="xlarge"
-        {...props}
+        css={{
+          padding: theme.spacing.xlarge,
+        }}
         ref={ref}
+        {...props}
       >
         <PricingCalculatorContainerQuery>
           <PricingCalculatorWrap>