uikit-react-public 0.29.6 → 0.30.0

package/lib/components/Tabs/index.ts

@@ -1,2 +1,9 @@
 export { default } from './Tabs';
-export type { TabsProps } from './Tabs';
+export type {
+  TabsActivationMode,
+  TabsListProps,
+  TabsOrientation,
+  TabsPanelProps,
+  TabsProps,
+} from './Tabs';
+export type { TabProps } from './Tab';

package/lib/components/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 './Textarea';
 

package/lib/components/Timepicker/Timepicker.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 Timepicker from './Timepicker';
 

package/lib/components/Toggle/Documentation.mdx

@@ -7,7 +7,7 @@ import {
   Controls,
   Source,
   ArgTypes,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 
 export const usage = {
   default: `<Toggle />`,

package/lib/components/Toggle/Toggle.stories.tsx

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

package/lib/components/Tooltip/Tooltip.stories.tsx

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

package/lib/components/UclLogo/UclLogo.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import UclLogo from './UclLogo';
 
 // Need this because the `UclLogo` component will default to 0 size :(

package/lib/components/WeekPicker/WeekPicker.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import WeekPicker from './WeekPicker';
 
 const meta = {

package/lib/components/common/Common.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from '@storybook/addon-docs/blocks';
 import marginsStyle from './marginsStyle';
 import { CommonMargins } from './../Button/Button.stories';
 import { theme } from '../../theme';

package/lib/components/index.ts

@@ -134,7 +134,13 @@ export { default as Alert } from './Alert';
 export type { AlertProps } from './Alert';
 
 export { default as Tabs } from './Tabs';
-export type { TabsProps } from './Tabs';
+export type {
+  TabsActivationMode,
+  TabsListProps,
+  TabsOrientation,
+  TabsPanelProps,
+  TabsProps,
+} from './Tabs';
 export type { TabProps } from './Tabs/Tab';
 
 export { default as Accordion } from './Accordion';

package/lib/theme/Icons.mdx

@@ -5,7 +5,7 @@ import {
   Subtitle,
   IconGallery,
   IconItem,
-} from "@storybook/blocks";
+} from "@storybook/addon-docs/blocks";
 import { ThemeContextProvider } from "./useTheme";
 import { Icon } from "../components";
 

package/lib/theme/Typography.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Typeset } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Typeset } from '@storybook/addon-docs/blocks';
 import theme from './original/defaultTheme';
 
 { console.log(theme.font) } 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.29.6",
+  "version": "0.30.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,18 +51,15 @@
   },
   "devDependencies": {
     "@azure/msal-browser": "^4.7.0",
-    "@chromatic-com/storybook": "^3.2.5",
+    "@chromatic-com/storybook": "^5.2.1",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
-    "@storybook/addon-onboarding": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/test": "^8.6.4",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/addon-onboarding": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "eslint-plugin-storybook": "10.4.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -92,7 +89,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.13.1",
-    "storybook": "^8.6.4",
+    "storybook": "10.4.6",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",
     "vite": "^6.2.1",

package/lib/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -1,185 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Tabs > snapshot: Auto width 1`] = `
-<div
-  class="ucl-uikit-tabs css-1hchved"
-  data-testid="ucl-uikit-tabs"
-  role="tablist"
->
-  <button
-    aria-selected="true"
-    class="ucl-uikit-tabs__tab css-u8nay3"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 1
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-eoe29w"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 2
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-eoe29w"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 3
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-eoe29w"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    A longer tab item showing auto width
-     
-  </button>
-</div>
-`;
-
-exports[`Tabs > snapshot: Counter 1`] = `
-<div
-  class="ucl-uikit-tabs css-1hchved"
-  data-testid="ucl-uikit-tabs"
-  role="tablist"
->
-  <button
-    aria-selected="true"
-    class="ucl-uikit-tabs__tab css-1gzur5d"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 1
-     
-    (12)
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 2
-     
-    (6)
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 3
-     
-    (9)
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 4
-     
-    (0)
-  </button>
-</div>
-`;
-
-exports[`Tabs > snapshot: Custom test id 1`] = `
-<div
-  class="ucl-uikit-tabs css-1hchved"
-  data-testid="custom-test-id"
-  role="tablist"
->
-  <button
-    aria-selected="true"
-    class="ucl-uikit-tabs__tab css-1gzur5d"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 1
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 2
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 3
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 4
-     
-  </button>
-</div>
-`;
-
-exports[`Tabs > snapshot: Minimal props 1`] = `
-<div
-  class="ucl-uikit-tabs css-1hchved"
-  data-testid="ucl-uikit-tabs"
-  role="tablist"
->
-  <button
-    aria-selected="true"
-    class="ucl-uikit-tabs__tab css-1gzur5d"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 1
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 2
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 3
-     
-  </button>
-  <button
-    aria-selected="false"
-    class="ucl-uikit-tabs__tab css-b3abfp"
-    data-testid="ucl-uikit-tabs__tab"
-    role="tab"
-  >
-    Tab Item 4
-     
-  </button>
-</div>
-`;