@structuralists/scaffolding 0.0.1 → 0.1.0

package/eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import boundaries from 'eslint-plugin-boundaries';
 import tsParser from '@typescript-eslint/parser';
 
@@ -17,90 +20,88 @@ import tsParser from '@typescript-eslint/parser';
 // `!(Modals|Chat)` is an extglob negation that excludes umbrella sections from
 // the depth-3 patterns, so files inside Modals/Chat fall through to the
 // depth-2 patterns and resolve to the umbrella as one primitive.
-export default [
-  {
-    files: ['src/**/*.{ts,tsx}'],
-    plugins: { boundaries },
-    languageOptions: {
-      parser: tsParser,
-      parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true } },
+export default [{
+  files: ['src/**/*.{ts,tsx}'],
+  plugins: { boundaries },
+  languageOptions: {
+    parser: tsParser,
+    parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true } },
+  },
+  settings: {
+    'import/resolver': {
+      node: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
     },
-    settings: {
-      'import/resolver': {
-        node: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    'boundaries/include': ['src/**/*'],
+    'boundaries/elements': [
+      // Plain-section component primitives (depth-3 under src/components)
+      {
+        type: 'primitive-entry',
+        pattern: 'src/components/!(Modals|Chat)/*/index.{ts,tsx}',
+        mode: 'full',
+        capture: ['_section', 'name'],
       },
-      'boundaries/include': ['src/**/*'],
-      'boundaries/elements': [
-        // Plain-section component primitives (depth-3 under src/components)
-        {
-          type: 'primitive-entry',
-          pattern: 'src/components/!(Modals|Chat)/*/index.{ts,tsx}',
-          mode: 'full',
-          capture: ['_section', 'name'],
-        },
-        {
-          type: 'primitive-dogfood',
-          pattern: 'src/components/!(Modals|Chat)/*/**/*.{stories,test}.{ts,tsx}',
-          mode: 'full',
-          capture: ['_section', 'name'],
-        },
-        {
-          type: 'primitive',
-          pattern: 'src/components/!(Modals|Chat)/*',
-          mode: 'folder',
-          capture: ['_section', 'name'],
-        },
-        // Umbrella-section primitives (depth-2): Modals, Chat
-        {
-          type: 'primitive-entry',
-          pattern: 'src/components/*/index.{ts,tsx}',
-          mode: 'full',
-          capture: ['name'],
-        },
-        {
-          type: 'primitive-dogfood',
-          pattern: 'src/components/*/**/*.{stories,test}.{ts,tsx}',
-          mode: 'full',
-          capture: ['name'],
-        },
-        {
-          type: 'primitive',
-          pattern: 'src/components/*',
-          mode: 'folder',
-          capture: ['name'],
-        },
-      ],
-    },
-    rules: {
-      'boundaries/no-unknown': 'off',
-      'boundaries/no-unknown-files': 'off',
-      'boundaries/dependencies': [
-        'error',
-        {
-          default: 'allow',
-          rules: [
-            // External imports into a primitive must go through its barrel.
-            // Importers that aren't in the same primitive can't reach internals.
-            {
-              from: [
-                { type: 'primitive', captured: { name: '!{{ to.captured.name }}' } },
-                { type: 'primitive-entry', captured: { name: '!{{ to.captured.name }}' } },
-                { type: 'primitive-dogfood', captured: { name: '!{{ to.captured.name }}' } },
-              ],
-              disallow: [{ to: { type: 'primitive' } }],
-              message: "External imports must go through the folder's index barrel.",
-            },
-            // Inside the same primitive, files must not import their own barrel
-            // (cycle risk). Reach the neighbor directly.
-            {
-              from: [{ type: 'primitive', captured: { name: '{{ to.captured.name }}' } }],
-              disallow: [{ to: { type: 'primitive-entry' } }],
-              message:
-                "Files inside a primitive folder must not import their own index barrel; import the neighbor directly.",
-            },
-          ],
-        },
-      ],
-    },
+      {
+        type: 'primitive-dogfood',
+        pattern: 'src/components/!(Modals|Chat)/*/**/*.{stories,test}.{ts,tsx}',
+        mode: 'full',
+        capture: ['_section', 'name'],
+      },
+      {
+        type: 'primitive',
+        pattern: 'src/components/!(Modals|Chat)/*',
+        mode: 'folder',
+        capture: ['_section', 'name'],
+      },
+      // Umbrella-section primitives (depth-2): Modals, Chat
+      {
+        type: 'primitive-entry',
+        pattern: 'src/components/*/index.{ts,tsx}',
+        mode: 'full',
+        capture: ['name'],
+      },
+      {
+        type: 'primitive-dogfood',
+        pattern: 'src/components/*/**/*.{stories,test}.{ts,tsx}',
+        mode: 'full',
+        capture: ['name'],
+      },
+      {
+        type: 'primitive',
+        pattern: 'src/components/*',
+        mode: 'folder',
+        capture: ['name'],
+      },
+    ],
+  },
+  rules: {
+    'boundaries/no-unknown': 'off',
+    'boundaries/no-unknown-files': 'off',
+    'boundaries/dependencies': [
+      'error',
+      {
+        default: 'allow',
+        rules: [
+          // External imports into a primitive must go through its barrel.
+          // Importers that aren't in the same primitive can't reach internals.
+          {
+            from: [
+              { type: 'primitive', captured: { name: '!{{ to.captured.name }}' } },
+              { type: 'primitive-entry', captured: { name: '!{{ to.captured.name }}' } },
+              { type: 'primitive-dogfood', captured: { name: '!{{ to.captured.name }}' } },
+            ],
+            disallow: [{ to: { type: 'primitive' } }],
+            message: "External imports must go through the folder's index barrel.",
+          },
+          // Inside the same primitive, files must not import their own barrel
+          // (cycle risk). Reach the neighbor directly.
+          {
+            from: [{ type: 'primitive', captured: { name: '{{ to.captured.name }}' } }],
+            disallow: [{ to: { type: 'primitive-entry' } }],
+            message:
+              "Files inside a primitive folder must not import their own index barrel; import the neighbor directly.",
+          },
+        ],
+      },
+    ],
   },
-];
+}, ...storybook.configs["flat/recommended"]];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structuralists/scaffolding",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "./index.ts",
   "types": "./index.ts",
   "exports": {
@@ -19,32 +19,33 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@uiw/react-json-view": "^2.0.0-alpha.41",
+    "@uiw/react-json-view": "^2.0.0-alpha.42",
     "react-markdown": "^10.1.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-router": "^7.0.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^15.0.0",
-    "@storybook/addon-essentials": "^8.6.0",
-    "@storybook/addon-storysource": "^8.6.0",
-    "@storybook/react": "^8.6.0",
-    "@storybook/react-vite": "^8.6.0",
-    "@testing-library/dom": "^10.0.0",
-    "@testing-library/react": "^16.0.0",
+    "@happy-dom/global-registrator": "^20.9.0",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/react": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/bun": "latest",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/parser": "^8.58.2",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^10.2.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/parser": "^8.59.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
     "eslint-plugin-boundaries": "^6.0.2",
-    "react-router": "^7.0.0",
-    "storybook": "^8.6.0",
-    "typescript": "^5.0.0",
-    "vite": "^6.0.0"
+    "eslint-plugin-storybook": "10.3.6",
+    "react-router": "^7.14.2",
+    "storybook": "^10.3.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5"
   }
 }

package/roadmap.md

@@ -0,0 +1,27 @@
+# Roadmap
+
+## Soon
+
+### Investigate `@storybook/addon-vitest`
+
+Storybook 10's flagship test workflow: stories become tests automatically. Each `*.stories.tsx` is run as a Vitest test in a real browser via Playwright — every story is at minimum a smoke test, and any story with a `play` function becomes a full interaction test. Optional `addon-a11y` integration can fail builds on accessibility violations.
+
+**Why it's appealing:**
+
+- ~50+ component smoke tests for free, in real browser environments — no test code to write.
+- Real layout, focus, and dialog semantics (catches things happy-dom misses).
+- A11y gating in CI without standing up a separate framework.
+
+**What to weigh:**
+
+- Adds Vitest + Playwright to the dep tree (~200MB of browser binaries on install). CI install time goes up.
+- Two test runners coexisting: keep `bun:test` for unit tests (utils, modal) and add Vitest for stories. The `test` script would invoke both.
+- The current `MediumModal.test.tsx` and similar are arguably better expressed as story interaction tests once this lands.
+
+**Rough plan if we go:**
+
+1. `bun add -d @storybook/addon-vitest vitest @vitest/browser playwright @storybook/test`
+2. Run `bunx playwright install chromium` (and add it to the CI workflow).
+3. Add a `vitest.config.ts` that pulls in `@storybook/addon-vitest/vitest-plugin`.
+4. Register the addon in `.storybook/main.ts`.
+5. Add `test:stories` script; decide whether to fold into `test` or run as a separate gate in the workflow.

package/src/components/Chat/ChatComposer/ChatComposer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ChatComposer } from './index';
 
 const meta: Meta<typeof ChatComposer> = {

package/src/components/Chat/ChatMessage/ChatMessage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ChatMessage } from './index';
 import { Stack } from '../../Layout/Stack';
 import { Badge } from '../../Content/Badge';

package/src/components/Chat/ChatRecipientsHeader/ChatRecipientsHeader.stories.tsx

@@ -1,5 +1,5 @@
 import { useState, type ComponentType } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ChatRecipientsHeader } from './index';
 import type { PillComboboxOption } from '../PillCombobox/types';
 import { Stack } from '../../Layout/Stack';

package/src/components/Chat/ChatShell/ChatShell.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { ChatShell } from './index';
 import { ChatMessage } from '../ChatMessage';

package/src/components/Chat/PillCombobox/PillCombobox.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { PillCombobox, type PillComboboxOption } from './index';
 
 const meta: Meta<typeof PillCombobox> = {

package/src/components/Content/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from './index';
 import { Stack } from '../../Layout/Stack';
 

package/src/components/Content/Card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Card } from './index';
 import { Heading } from '../Heading';
 import { Stack } from '../../Layout/Stack';

package/src/components/Content/EditableMarkdown/EditableMarkdown.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { EditableMarkdown } from './index';
 

package/src/components/Content/Heading/Heading.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Heading } from './index';
 
 const meta: Meta<typeof Heading> = {

package/src/components/Content/Link/Link.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Link } from './index';
 
 const meta: Meta<typeof Link> = {

package/src/components/Content/List/List.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { List, ListItem } from './index';
 
 const meta: Meta<typeof List> = {

package/src/components/Content/LoadingContainer/LoadingContainer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { LoadingContainer } from './index';
 import { Toggle } from '../../../storybook';

package/src/components/Content/Markdown/Markdown.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Markdown } from './index';
 
 const sample = `# Heading 1

package/src/components/Content/Menu/Menu.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Menu } from './index';
 import type { MenuItem } from './types';
 

package/src/components/Content/Text/Text.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Text } from './index';
 
 const meta: Meta<typeof Text> = {

package/src/components/Forms/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from './index';
 import { Stack } from '../../Layout/Stack';
 

package/src/components/Forms/Field/Field.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Field } from './index';
 import { Input } from '../Input';
 

package/src/components/Forms/IconButton/IconButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { IconButton } from './index';
 import type { IconButtonVariant, IconButtonSize } from './types';
 

package/src/components/Forms/Input/Input.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Input } from './index';
 
 const meta: Meta<typeof Input> = {

package/src/components/Forms/Select/MultiSelect/MultiSelect.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { MultiSelect } from './index';
 import { Field } from '../../Field';

package/src/components/Forms/Select/SingleSelect/SingleSelect.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { SingleSelect } from './index';
 import { Button } from '../../Button';

package/src/components/Forms/Textarea/Textarea.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Textarea } from './index';
 
 const meta: Meta<typeof Textarea> = {

package/src/components/Json/Json/Json.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Json } from './index';
 
 const meta: Meta<typeof Json> = {

package/src/components/Json/JsonTable/JsonTable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { JsonTable } from './index';
 
 const meta: Meta<typeof JsonTable> = {

package/src/components/Layout/Bar/Bar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Bar } from './index';
 import { Button } from '../../Forms/Button';
 import { Debug } from '../Debug';

package/src/components/Layout/Debug/Debug.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Debug } from './index';
 import { Stack } from '../Stack';
 import { Text } from '../../Content/Text';

package/src/components/Layout/Divider/Divider.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Divider } from './index';
 import { Stack } from '../Stack';
 import { Text } from '../../Content/Text';

package/src/components/Layout/Grid/Grid.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Grid } from './index';
 import { Card } from '../../Content/Card';
 import { Text } from '../../Content/Text';

package/src/components/Layout/Panels/Panels.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Panels } from './index';
 import { Bar } from '../Bar';
 import { Button } from '../../Forms/Button';
@@ -155,6 +155,52 @@ export const RightOverlay: Story = {
   },
 };
 
+// Same shape as RightOverlay, but passes `onRightOverlayDismiss` so a
+// pointerdown anywhere outside the overlay clears the selection. The
+// parent still owns the open state — the callback just signals intent.
+export const RightOverlayDismissOnOutsideClick: Story = {
+  render: () => {
+    const Demo = () => {
+      const [selected, setSelected] = useState<string | null>(null);
+
+      return (
+        <Panels
+          header={<Bar title="Workbench" />}
+          footer={<Bar title="Click outside the panel to dismiss." />}
+          leftSidebar={slot(<LeftSidebarContent />, 200)}
+          onRightOverlayDismiss={() => setSelected(null)}
+          rightOverlay={
+            selected
+              ? slot(
+                  <Stack gap={3}>
+                    <Heading level={3}>{selected}</Heading>
+                    <Text isMuted size="small">
+                      Click anywhere outside this panel to dismiss it.
+                    </Text>
+                  </Stack>,
+                )
+              : null
+          }
+        >
+          {slot(
+            <Stack gap={3}>
+              <Heading level={2}>Items</Heading>
+              {['Alpha', 'Beta', 'Gamma'].map((name) => (
+                <Button key={name} onClick={() => setSelected(name)}>
+                  Open {name}
+                </Button>
+              ))}
+              <Lorem paragraphs={20} as={Text} />
+            </Stack>,
+          )}
+        </Panels>
+      );
+    };
+
+    return <Demo />;
+  },
+};
+
 // The overlay's content is itself a Panels — header/footer stay pinned
 // while the body scrolls. The header carries the title and an X close
 // button; the outer layout is intentionally minimal (no sidebars) to

package/src/components/Layout/Panels/index.tsx

@@ -1,6 +1,12 @@
-import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
+import {
+  useEffect,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
 import { backgroundStyle } from '../../../tokens';
 import { cx } from '../../../utils';
+import { useClickOutside } from '../../../hooks/useClickOutside';
 import type { PanelsProps } from './types';
 import styles from './styles.module.css';
 
@@ -16,6 +22,7 @@ export const Panels = (props: PanelsProps) => {
     leftSidebar,
     rightSidebar,
     rightOverlay,
+    onRightOverlayDismiss,
     leftSidebarWidth,
     rightSidebarWidth,
     rightOverlayWidth,
@@ -46,6 +53,14 @@ export const Panels = (props: PanelsProps) => {
   const [renderedOverlay, setRenderedOverlay] = useState<ReactNode>(rightOverlay ?? null);
   const [isOverlayClosing, setIsOverlayClosing] = useState(false);
 
+  // Outside-click dismissal. Gated to the open state so the close
+  // animation window — where `rightOverlay` is null but `renderedOverlay`
+  // is still mounted — doesn't fire a second dismissal.
+  const { ref: overlayRef } = useClickOutside<HTMLDivElement>({
+    onOutside: onRightOverlayDismiss,
+    enabled: rightOverlay != null,
+  });
+
   useEffect(() => {
     if (rightOverlay != null) {
       setRenderedOverlay(rightOverlay);
@@ -97,6 +112,7 @@ export const Panels = (props: PanelsProps) => {
         )}
         {renderedOverlay != null && (
           <div
+            ref={overlayRef}
             className={cx(styles.rightOverlay, isOverlayClosing && styles.closing)}
             style={rightOverlayStyle}
           >

package/src/components/Layout/Panels/types.ts

@@ -18,6 +18,11 @@ export type PanelsProps = {
    *  Parent owns the open state and renders its own close affordance —
    *  there is no backdrop scrim or built-in dismissal. */
   rightOverlay?: ReactNode;
+  /** Optional outside-click dismissal for `rightOverlay`. When provided,
+   *  a pointerdown anywhere outside the overlay element invokes this
+   *  callback; the parent is responsible for clearing `rightOverlay` in
+   *  response. Omit to disable outside-click dismissal entirely. */
+  onRightOverlayDismiss?: () => void;
   /** Fixed width for the left sidebar. Numbers → px, strings pass through
    *  (`"22rem"`, `"25%"`, etc). Defaults to content-sized. */
   leftSidebarWidth?: number | string;

package/src/components/Layout/Stack/Stack.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Stack } from './index';
 import { Button } from '../../Forms/Button';
 

package/src/components/Modals/ConfirmModal/ConfirmModal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ConfirmModal } from './index';
 import { Toggle } from '../../../storybook';
 

package/src/components/Modals/LargeModal/LargeModal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { LargeModal } from './index';
 import { Button } from '../../Forms/Button';
 import { Stack } from '../../Layout/Stack';

package/src/components/Modals/MediumModal/MediumModal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { MediumModal } from './index';
 import { Button } from '../../Forms/Button';
 import { Field } from '../../Forms/Field';