tycho-storybook 0.2.7 → 0.3.1

package/dist/AlphaFilter/AlphaFilter.stories.d.ts

@@ -9,10 +9,10 @@ declare const meta: {
     tags: string[];
     argTypes: {
         className: {
-            control: string;
+            control: "text";
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
     };
 };

package/dist/AlphaFilter/AlphaFilter.stories.js

@@ -1,4 +1,5 @@
 import AlphaFilter from './AlphaFilter';
+import { fn } from 'storybook/test';
 const LETTERS = [
     'A',
     'B',
@@ -43,5 +44,6 @@ export default meta;
 export const Primary = {
     args: {
         items: LETTERS,
+        onSelect: fn(),
     },
 };

package/dist/AnchorLink/AnchorLink.stories.d.ts

@@ -9,19 +9,19 @@ declare const meta: {
     tags: string[];
     argTypes: {
         title: {
-            control: string;
+            control: "text";
         };
         subtitle: {
-            control: string;
+            control: "text";
         };
         className: {
-            control: string;
+            control: "text";
         };
         fixed: {
-            control: string;
+            control: "boolean";
         };
         active: {
-            control: string;
+            control: "boolean";
         };
     };
 };

package/dist/AudioMedia/AudioMedia.stories.d.ts

@@ -9,10 +9,10 @@ declare const meta: {
     tags: string[];
     argTypes: {
         src: {
-            control: string;
+            control: "text";
         };
         placement: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/AudioPlayer/AudioPlayer.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         src: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/Avatar/Avatar.stories.d.ts

@@ -3,17 +3,17 @@ import Avatar from './Avatar';
 declare const meta: {
     title: string;
     component: typeof Avatar;
-    decorators: ((Story: import("@storybook/react").StoryFn) => import("react/jsx-runtime").JSX.Element)[];
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
         src: {
-            control: string;
+            control: "text";
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["x-large", "large", "medium", "small", "x-small"];
         };
     };

package/dist/Badge/Badge.stories.d.ts

@@ -9,14 +9,14 @@ declare const meta: {
     tags: string[];
     argTypes: {
         text: {
-            control: string;
+            control: "text";
         };
         color: {
-            control: string;
+            control: "select";
             options: readonly ["none", "black", "blue", "green", "red", "yellow", "violet"];
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small", "x-small"];
         };
     };

package/dist/Button/Button.stories.d.ts

@@ -9,34 +9,34 @@ declare const meta: {
     tags: string[];
     argTypes: {
         text: {
-            control: string;
+            control: "text";
         };
         color: {
-            control: string;
+            control: "select";
             options: readonly ["accent", "danger", "white"];
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small", "x-small"];
         };
         mode: {
-            control: string;
+            control: "select";
             options: readonly ["filled", "tonal", "outlined", "ghost"];
         };
         active: {
-            control: string;
+            control: "boolean";
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
         title: {
-            control: string;
+            control: "text";
         };
         icon: {
-            control: string;
+            control: "text";
         };
         iconPosition: {
-            control: string;
+            control: "select";
             options: readonly ["left", "right"];
         };
     };

package/dist/DropdownButton/DropdownButton.stories.d.ts

@@ -9,30 +9,30 @@ declare const meta: {
     tags: string[];
     argTypes: {
         text: {
-            control: string;
+            control: "text";
         };
         color: {
-            control: string;
+            control: "select";
             options: readonly ["primary", "secondary", "tertiary"];
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small"];
         };
         active: {
-            control: string;
+            control: "boolean";
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
         hideIcon: {
-            control: string;
+            control: "boolean";
         };
         hideDivider: {
-            control: string;
+            control: "boolean";
         };
         right: {
-            control: string;
+            control: "boolean";
         };
     };
 };

package/dist/DropdownList/DropdownList.stories.d.ts

@@ -3,17 +3,17 @@ import DropdownList from './DropdownList';
 declare const meta: {
     title: string;
     component: typeof DropdownList;
-    decorators: ((Story: import("@storybook/react").StoryFn) => import("react/jsx-runtime").JSX.Element)[];
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
         list: {
-            control: string;
+            control: "object";
         };
         className: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/DropdownList/DropdownList.stories.js

@@ -1,6 +1,7 @@
 import DropdownList from './DropdownList';
 import avatar from '../Avatar/avatar.png';
 import StorybookUtils from '../StorybookUtils';
+import { fn } from 'storybook/test';
 const meta = {
     title: 'Components/DropdownList',
     component: DropdownList,
@@ -10,13 +11,14 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        list: { control: 'array' },
+        list: { control: 'object' },
         className: { control: 'text' },
     },
 };
 export default meta;
 export const Primary = {
     args: {
+        onSelect: fn(),
         list: [
             { label: 'Label', value: 'Label', tag: 'Tag' },
             { label: 'Label', value: 'Label', icon: 'Star', sublabel: 'hist.' },

package/dist/DropdownMenu/DropdownMenu.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         list: {
-            control: string;
+            control: "object";
         };
     };
 };

package/dist/DropdownMenu/DropdownMenu.stories.js

@@ -7,7 +7,7 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        list: { control: 'array' },
+        list: { control: 'object' },
     },
 };
 export default meta;

package/dist/Dummy/Dummy.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         mode: {
-            control: string;
+            control: "select";
             options: readonly ["white", "blue"];
         };
     };

package/dist/FilterDropdown/FilterDropdown.stories.d.ts

@@ -9,17 +9,17 @@ declare const meta: {
     tags: string[];
     argTypes: {
         text: {
-            control: string;
+            control: "text";
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small"];
         };
         active: {
-            control: string;
+            control: "boolean";
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
     };
 };

package/dist/Icon/Icon.stories.d.ts

@@ -9,14 +9,14 @@ declare const meta: {
     tags: string[];
     argTypes: {
         name: {
-            control: string;
+            control: "text";
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["x-large", "large", "medium", "small", "x-small"];
         };
         weight: {
-            control: string;
+            control: "select";
             options: readonly ["regular", "heavy"];
         };
     };

package/dist/IconButton/IconButton.stories.d.ts

@@ -3,38 +3,38 @@ import IconButton from './IconButton';
 declare const meta: {
     title: string;
     component: typeof IconButton;
-    decorators: ((Story: import("@storybook/react").StoryFn) => import("react/jsx-runtime").JSX.Element)[];
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
         name: {
-            control: string;
+            control: "text";
         };
         color: {
-            control: string;
+            control: "select";
             options: readonly ["accent", "danger", "white"];
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small", "x-small"];
         };
         mode: {
-            control: string;
+            control: "select";
             options: readonly ["filled", "tonal", "outlined", "ghost"];
         };
         active: {
-            control: string;
+            control: "boolean";
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
         spin: {
-            control: string;
+            control: "boolean";
         };
         title: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/ImageUpload/ImageUpload.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         className: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/Pill/Pill.stories.d.ts

@@ -9,23 +9,23 @@ declare const meta: {
     tags: string[];
     argTypes: {
         text: {
-            control: string;
+            control: "text";
         };
         icon: {
-            control: string;
+            control: "text";
         };
         active: {
-            control: string;
+            control: "boolean";
         };
         className: {
-            control: string;
+            control: "text";
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small"];
         };
         type: {
-            control: string;
+            control: "select";
             options: readonly ["outlined", "filled"];
         };
     };

package/dist/ProfileDropdown/ProfileDropdown.stories.d.ts

@@ -3,18 +3,18 @@ import ProfileDropdown from './ProfileDropdown';
 declare const meta: {
     title: string;
     component: typeof ProfileDropdown;
-    decorators: ((Story: import("@storybook/react").StoryFn) => import("react/jsx-runtime").JSX.Element)[];
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
         color: {
-            control: string;
+            control: "select";
             options: readonly ["white", "blue"];
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
     };
 };

package/dist/SearchBar/SearchBar.stories.d.ts

@@ -9,14 +9,14 @@ declare const meta: {
     tags: string[];
     argTypes: {
         value: {
-            control: string;
+            control: "text";
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small"];
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
         onChange: {
             action: string;

package/dist/SearchBar/SearchBar.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SearchBar, { SearchBarSizes } from './SearchBar';
-import { action } from '@storybook/addon-actions';
+import { fn } from 'storybook/test';
 import { useState } from 'react';
 const meta = {
     title: 'Components/SearchBar',
@@ -31,6 +31,6 @@ export const Primary = {
     args: {
         size: 'medium',
         disabled: false,
-        onChange: action('onChange'),
+        onChange: fn(),
     },
 };

package/dist/SearchList/SearchList.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         list: {
-            control: string;
+            control: "object";
         };
     };
 };

package/dist/SearchList/SearchList.stories.js

@@ -7,7 +7,7 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        list: { control: 'array' },
+        list: { control: 'object' },
     },
 };
 export default meta;

package/dist/SelectField/SelectField.stories.d.ts

@@ -8,31 +8,31 @@ declare const meta: {
     tags: string[];
     argTypes: {
         label: {
-            control: string;
+            control: "text";
         };
         attr: {
-            control: string;
+            control: "text";
         };
         createdForm: {
-            control: boolean;
+            control: false;
         };
         className: {
-            control: string;
+            control: "text";
         };
         title: {
-            control: string;
+            control: "text";
         };
         placeholder: {
-            control: string;
+            control: "text";
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
         multiple: {
-            control: string;
+            control: "boolean";
         };
         options: {
-            control: string;
+            control: "object";
         };
     };
 };

package/dist/SelectField/SelectField.stories.js

@@ -17,7 +17,7 @@ const meta = {
         placeholder: { control: 'text' },
         disabled: { control: 'boolean' },
         multiple: { control: 'boolean' },
-        options: { control: 'array' },
+        options: { control: 'object' },
     },
 };
 export default meta;

package/dist/Spinner/Spinner.stories.d.ts

@@ -9,17 +9,17 @@ declare const meta: {
     tags: string[];
     argTypes: {
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small", "x-small"];
         };
         title: {
-            control: string;
+            control: "text";
         };
         description: {
-            control: string;
+            control: "text";
         };
         titlePlacement: {
-            control: string;
+            control: "select";
             options: readonly ["right", "bottom"];
         };
     };

package/dist/StorybookUtils.d.ts

@@ -1,6 +1,6 @@
-import type { StoryFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 declare const StorybookUtils: {
-    WithDynamicDocsBackground: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;
-    WithSecondaryDocsBackground: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;
+    WithDynamicDocsBackground: Decorator;
+    WithSecondaryDocsBackground: Decorator;
 };
 export default StorybookUtils;

package/dist/StorybookUtils.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
 import { useEffect } from 'react';
 const secondaryBackgroundColor = '#185ABD';
 // This is now a proper React component
-const WithDynamicDocsBackground = (Story) => {
-    const [{ color }] = useArgs();
+const WithDynamicDocsBackground = (Story, context) => {
+    const { color } = context.args || {};
     useEffect(() => {
         const backgroundColor = color === 'white' ? '#185ABD' : '#FFFFFF';
         const docsStoryElement = document.querySelector('.docs-story');

package/dist/Tabs/Tabs.stories.d.ts

@@ -3,23 +3,23 @@ import Tabs from './Tabs';
 declare const meta: {
     title: string;
     component: typeof Tabs;
-    decorators: ((Story: import("@storybook/react").StoryFn) => import("react/jsx-runtime").JSX.Element)[];
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
         items: {
-            control: string;
+            control: "object";
         };
         className: {
-            control: string;
+            control: "text";
         };
         onSelect: {
             action: string;
         };
         color: {
-            control: string;
+            control: "select";
             options: readonly ["white", "blue"];
         };
     };

package/dist/Tabs/Tabs.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { fn } from 'storybook/test';
 import Tabs, { TabsColors } from './Tabs';
 import StorybookUtils from '../StorybookUtils';
 const meta = {
@@ -10,7 +10,7 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        items: { control: 'array' },
+        items: { control: 'object' },
         className: { control: 'text' },
         onSelect: { action: 'onSelect' },
         color: { control: 'select', options: TabsColors },
@@ -25,6 +25,6 @@ export const Primary = {
             { label: 'Tab C', value: 'tab_c', active: true },
             { label: 'Tab D', value: 'tab_d', disabled: true },
         ],
-        onSelect: action('onSelect'),
+        onSelect: fn(),
     },
 };

package/dist/Tag/Tag.stories.d.ts

@@ -9,28 +9,28 @@ declare const meta: {
     tags: string[];
     argTypes: {
         text: {
-            control: string;
+            control: "text";
         };
         color: {
-            control: string;
+            control: "select";
             options: readonly ["gray", "blue", "green", "red", "yellow", "violet"];
         };
         size: {
-            control: string;
+            control: "select";
             options: readonly ["large", "medium", "small"];
         };
         type: {
-            control: string;
+            control: "select";
             options: readonly ["low", "accent"];
         };
         disabled: {
-            control: string;
+            control: "boolean";
         };
         title: {
-            control: string;
+            control: "text";
         };
         className: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/Tooltip/Tooltip.stories.d.ts

@@ -9,14 +9,14 @@ declare const meta: {
     tags: string[];
     argTypes: {
         mode: {
-            control: string;
+            control: "select";
             options: readonly ["simple", "confirmation", "delete"];
         };
         placement: {
-            control: string;
+            control: "text";
         };
         title: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/VerticalButton/VerticalButton.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
     tags: string[];
     argTypes: {
         text: {
-            control: string;
+            control: "text";
         };
     };
 };

package/dist/styles/main.scss

@@ -1,10 +1,49 @@
 @use 'base/typographs' as *;
-@import 'base/borders';
-@import 'base/colors';
-@import 'base/displays';
-@import 'base/margins';
-@import 'base/spacing';
-@import 'base/tokens';
+@use 'base/borders';
+@use 'base/colors';
+@use 'base/displays';
+@use 'base/margins';
+@use 'base/spacing';
+@use 'base/tokens';
+
+html,
+body,
+#root {
+  background-color: var(--color-background);
+  font-family:
+    'Nunito',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-corner {
+  background: #fff;
+}
 
 .pointer {
   cursor: pointer;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "tycho-storybook",
   "private": false,
-  "version": "0.2.7",
+  "version": "0.3.1",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",  
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./dist/styles/main": "./dist/styles/main.scss",
     "./dist/styles/base/typographs": "./dist/styles/base/_typographs.scss"
@@ -31,29 +31,27 @@
     "react-dom": ">=17 <19"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/cli": "^8.4.7",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/cli": "^10.1.11",
+    "@storybook/react": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react": "^4.1.1",
+    "@vitejs/plugin-react": "^5.0.0",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.1",
     "eslint-plugin-storybook": "^0.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.5.3",
+    "sass-embedded": "^1.97.2",
+    "storybook": "^10.1.11",
     "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "vite": "^7.0.0"
   },
   "scripts": {
     "start": "storybook dev -p 6006",