@crystallize/design-system 1.24.28 → 1.24.29

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.24.29
+
+### Patch Changes
+
+- b8c9016: Upgrade storybook and vite to latest verions
+
 ## 1.24.28
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.28",
+  "version": "1.24.29",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -9,9 +9,9 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./tailwind-config": "./tailwind.config.cjs",
     "./styles.css": {
@@ -62,19 +62,23 @@
     "@faker-js/faker": "7.6.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-actions": "7.6.2",
-    "@storybook/addon-backgrounds": "7.6.2",
-    "@storybook/addon-docs": "7.0.0-beta.14",
-    "@storybook/addon-essentials": "7.6.2",
-    "@storybook/addon-highlight": "7.6.2",
-    "@storybook/addon-interactions": "7.6.2",
-    "@storybook/addon-links": "7.6.2",
-    "@storybook/addon-measure": "7.6.2",
-    "@storybook/addon-outline": "7.6.2",
-    "@storybook/manager-api": "7.6.2",
-    "@storybook/react": "7.6.2",
-    "@storybook/react-vite": "7.6.2",
-    "@storybook/theming": "7.6.2",
+    "@storybook/addon-actions": "8.6.11",
+    "@storybook/addon-backgrounds": "8.6.11",
+    "@storybook/addon-designs": "8.2.1",
+    "@storybook/addon-docs": "8.6.11",
+    "@storybook/addon-essentials": "8.6.11",
+    "@storybook/addon-highlight": "8.6.11",
+    "@storybook/addon-interactions": "8.6.11",
+    "@storybook/addon-links": "8.6.11",
+    "@storybook/addon-measure": "8.6.11",
+    "@storybook/addon-outline": "8.6.11",
+    "@storybook/client-logger": "8.6.11",
+    "@storybook/manager-api": "8.6.11",
+    "@storybook/preview-api": "8.6.11",
+    "@storybook/react": "8.6.11",
+    "@storybook/react-vite": "8.6.11",
+    "@storybook/theming": "8.6.11",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
@@ -87,13 +91,12 @@
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
     "prettier": "2.8.4",
-    "storybook": "7.6.2",
-    "storybook-addon-designs": "^6.3.1",
-    "storybook-dark-mode": "^2.0.5",
+    "storybook": "8.6.11",
+    "storybook-dark-mode": "4.0.2",
     "tailwindcss": "^3.3.5",
     "tsup": "^6.5.0",
     "typescript": "4.9.4",
-    "vite": "5.3.5",
+    "vite": "6.2.4",
     "vitest": "2.1.8",
     "tsconfig": "0.0.0"
   },
@@ -117,13 +120,13 @@
     "tailwind.config.cjs"
   ],
   "scripts": {
-    "build:storybook": "storybook build -s public",
+    "build:storybook": "storybook build public",
     "build:tw": "tailwindcss -c ./tailwind.config.cjs -i src/index.css -o dist/index.css",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
     "build": "pnpm build:tw && pnpm build:tsup",
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
     "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
-    "dev:storybook": "storybook dev -p 6006 --no-open -s public",
+    "dev:storybook": "storybook dev -p 6006 --no-open public",
     "dev": "concurrently \"npm:dev:*\"",
     "test": "vitest run src/",
     "test:watch": "vitest src/"

package/src/colors/Colors.stories.tsx

@@ -1,6 +1,6 @@
-import { useDarkMode } from 'storybook-dark-mode';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { useDarkMode } from '../../.storybook/use-dark-mode';
 import colorDefaults from './color-defaults.json';
 import colorPairing from './color-pairing.json';
 import rawColors from './colors.json';
@@ -65,7 +65,7 @@ export default meta;
 function ColorItem({ colorName, color }: { colorName: ColorName; color: Color }) {
   const shades = Object.keys(color);
 
-  const isDark = useDarkMode();
+  const [isDark] = useDarkMode();
 
   // @ts-expect-error
   const applicationsForMode = !isDark ? applications : applications.map(a => ({ ...a, shade: colorPairing[a.shade] }));