Migrate to sku version 13, and fix minor bug in useToast for React 18.3.0

.changeset/strange-otters-carry.md

@@ -0,0 +1,10 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - useToast
+---
+
+Fix warning in React 18.3.0 when using useToast.

.eslintignore

@@ -1,5 +1,5 @@
 dist*/
-dist-storybook/
+storybook-static
 node_modules/
 
 !/.*.js

.prettierignore

@@ -1,5 +1,5 @@
 coverage/
-dist-storybook/
+storybook-static
 dist/
 report/
 .changeset/*.md

packages/braid-design-system/.eslintignore

@@ -5,10 +5,10 @@
 
 node_modules/
 codemod/dist/
-dist-storybook/
 src/lib/components/icons/*/*Svg.tsx
 src/lib/playroom/snippets/*
 README.md
+storybook-static
 
 # managed by crackle
 /color-mode/query-param

packages/braid-design-system/.gitignore

@@ -1,9 +1,9 @@
 node_modules/
 codemod/dist/
-dist-storybook/
 src/lib/components/icons/*/*Svg.tsx
 src/lib/playroom/snippets/*
 README.md
+storybook-static
 
 # managed by crackle
 /color-mode/query-param

packages/braid-design-system/.npmignore

@@ -1,6 +1,6 @@
 scripts/
 icons/
-dist-storybook/
+storybook-static
 **/__snapshots__/**/*
 *.test.tsx
 *.test.ts

packages/braid-design-system/.storybook/main.ts

@@ -0,0 +1,20 @@
+import { babel, webpackFinal } from 'sku/config/storybook';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
+  stories: ['../src/lib/stories/all.stories.tsx'],
+  features: {
+    storyStoreV7: false,
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        fsCache: true,
+      },
+    },
+  },
+  addons: [],
+  babel,
+  webpackFinal,
+} satisfies StorybookConfig;

packages/braid-design-system/package.json

@@ -177,9 +177,9 @@
     "lint:eslint": "eslint --cache .",
     "lint:prettier": "prettier --cache --list-different .",
     "lint:tsc": "tsc",
-    "storybook": "SKU_TELEMETRY=false sku storybook",
-    "storybook:build": "SKU_TELEMETRY=false sku build-storybook",
-    "storybook:chromatic": "chromatic --storybook-build-dir ./dist-storybook --exit-zero-on-changes --exit-once-uploaded --auto-accept-changes master",
+    "storybook": "storybook dev",
+    "storybook:build": "storybook build",
+    "storybook:chromatic": "chromatic --storybook-build-dir ./storybook-static --exit-zero-on-changes --exit-once-uploaded --auto-accept-changes master",
     "%skott": "skott --displayMode=file-tree --showCircularDependencies --no-trackTypeOnlyDependencies",
     "validate:src": "pnpm %skott src",
     "validate:dist": "pnpm %skott dist/index.mjs"
@@ -212,6 +212,8 @@
     "@babel/core": "^7.18.0",
     "@babel/plugin-transform-typescript": "^7.20.13",
     "@braid-design-system/source.macro": "workspace:*",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",
@@ -245,7 +247,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.12.1",
-    "sku": "12.7.0",
+    "sku": "13.0.0",
+    "storybook": "7.6.20",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },

packages/braid-design-system/sku.config.js

@@ -7,5 +7,4 @@ module.exports = {
   supportedBrowsers: browserslist,
   displayNamesProd: true,
   skipPackageCompatibilityCompilation: ['lodash', 'prettier'],
-  storybookStoryStore: false,
 };

packages/braid-design-system/src/lib/components/useToast/ToastContext.tsx

@@ -168,10 +168,11 @@ export const useToast = () => {
   return useCallback(
     (toast: Toast) => {
       const id = `${toastCounter++}`;
-      const dedupeKey = toast.key ?? id;
+      const { key, ...rest } = toast;
+      const dedupeKey = key ?? id;
 
       addToast({
-        ...toast,
+        ...rest,
         vanillaTheme,
         id,
         dedupeKey,

packages/braid-design-system/src/lib/stories/all.stories.tsx

@@ -1,7 +1,7 @@
 import '../../entries/reset';
 
 import React, { type ReactNode, Fragment, useId } from 'react';
-import { storiesOf } from 'sku/@storybook/react';
+import { storiesOf } from '@storybook/react';
 import { BrowserRouter } from 'react-router-dom';
 import { uniq, flatten, values } from 'lodash';
 import * as themes from '../themes';