paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 20 Packages Projects Releases Wiki Activity

Merge pull request #31142 from backstage/sb9

Browse Source 
Upgrade Storybook to version 9
This commit is contained in:
Charles de Dreuille
2025-09-15 18:08:16 +01:00
committed by GitHub
parent e6ff786ae4 9c2760d47c
commit 6de6882316
40 changed files with 596 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/main.ts
+76 -3
View File
@@ -35,15 +35,88 @@ const config: StorybookConfig = {
stories,
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('@storybook/addon-themes'),
getAbsolutePath('@storybook/addon-storysource'),
getAbsolutePath('@storybook/addon-docs'),
],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {},
},
viteFinal: async (config, { configType }) => {
// Add Node.js polyfills for browser compatibility
//
// When upgrading from Storybook 8 to 9 with the react-vite framework,
// Node.js polyfills are no longer automatically included by Vite.
// This causes "ReferenceError: process is not defined" errors in the browser
// when code tries to access Node.js globals like `process` and `util`.
//
// The @vitest/mocker (included with Storybook 9) expects MSW v2 APIs,
// but we want to keep MSW v1 for the rest of the monorepo to avoid
// breaking changes. This configuration provides the necessary polyfills
// and handles the MSW compatibility issue specifically for Storybook.
//
// These polyfills provide browser-compatible versions of Node.js globals:
// - process: Node.js process object with env
// - global -> globalThis: Maps Node.js global to browser's globalThis
//
// Without these, Backstage components that rely on Node.js APIs will fail
// to load in Storybook's browser environment.
// Different configurations for development vs production
if (configType === 'DEVELOPMENT') {
// Development: Include process polyfill to prevent runtime errors
config.define = {
...config.define,
global: 'globalThis',
'process.env': {},
process: '({ env: {}, browser: true })',
};
} else if (configType === 'PRODUCTION') {
// Production: Minimal define to avoid esbuild errors
config.define = {
...config.define,
global: 'globalThis',
'process.env': {},
// No process polyfill in production build
};
}
config.resolve = {
...config.resolve,
alias: {
...config.resolve?.alias,
// Provide Node.js polyfills for browser
process: 'process/browser',
util: 'util',
buffer: 'buffer',
stream: 'stream-browserify',
// Fix MSW v2 imports for @vitest/mocker compatibility
// @vitest/mocker expects MSW v2 APIs but we want to keep MSW v1 for the rest of the monorepo
'msw/browser': join(__dirname, 'msw-browser-shim.js'),
'msw/core/http': join(__dirname, 'msw-http-shim.js'),
},
};
// Optimize dependencies for better performance
config.optimizeDeps = {
...config.optimizeDeps,
include: [
...(config.optimizeDeps?.include || []),
'process/browser',
'util',
'buffer',
'stream-browserify',
],
// Exclude MSW to prevent optimization conflicts with our shims
exclude: [
...(config.optimizeDeps?.exclude || []),
'msw',
'msw/browser',
'msw/core/http',
],
};
return config;
},
};
export default config;
.storybook/msw-browser-shim.js
+47
View File
@@ -0,0 +1,47 @@
// MSW v2 browser compatibility shim for @vitest/mocker
// This provides MSW v2 exports using MSW v1 APIs to maintain compatibility
// while keeping the rest of the monorepo on MSW v1
try {
// Try to import from MSW v1
const { setupWorker, rest } = require('msw');
// Export in MSW v2 format expected by @vitest/mocker
module.exports = {
setupWorker,
// MSW v2 uses 'http' instead of 'rest', but we provide both for compatibility
http: rest,
rest, // Keep rest for any MSW v1 code
};
} catch (error) {
// Fallback if MSW is not available - provide minimal mock
console.warn(
'MSW not available, providing minimal mock for @vitest/mocker compatibility',
);
module.exports = {
setupWorker: () => ({
start: () => Promise.resolve(),
stop: () => {},
use: () => {},
resetHandlers: () => {},
}),
http: {
get: () => {},
post: () => {},
put: () => {},
delete: () => {},
patch: () => {},
head: () => {},
options: () => {},
},
rest: {
get: () => {},
post: () => {},
put: () => {},
delete: () => {},
patch: () => {},
head: () => {},
options: () => {},
},
};
}
.storybook/msw-http-shim.js
+47
View File
@@ -0,0 +1,47 @@
// MSW v2 http compatibility shim for @vitest/mocker
// This provides MSW v2 http exports using MSW v1 APIs
try {
// Try to import from MSW v1
const { rest } = require('msw');
// Export MSW v1 'rest' as MSW v2 'http' for @vitest/mocker compatibility
module.exports = {
http: rest,
// Provide individual methods that @vitest/mocker might expect
get: rest.get,
post: rest.post,
put: rest.put,
delete: rest.delete,
patch: rest.patch,
head: rest.head,
options: rest.options,
all: rest.all,
};
} catch (error) {
// Fallback if MSW is not available
console.warn(
'MSW not available, providing minimal http mock for @vitest/mocker compatibility',
);
const noop = () => {};
module.exports = {
http: {
get: noop,
post: noop,
put: noop,
delete: noop,
patch: noop,
head: noop,
options: noop,
all: noop,
},
get: noop,
post: noop,
put: noop,
delete: noop,
patch: noop,
head: noop,
options: noop,
all: noop,
};
}
.storybook/preview.tsx
+10 -2
View File
@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
import { TestApiProvider } from '@backstage/test-utils';
import { Content, AlertDisplay } from '@backstage/core-components';
import { apis } from './support/apis';
import type { Decorator, Preview } from '@storybook/react';
import { useGlobals } from '@storybook/preview-api';
import type { Decorator, Preview } from '@storybook/react-vite';
import { useGlobals } from 'storybook/preview-api';
import { UnifiedThemeProvider, themes } from '@backstage/theme';
// Default Backstage theme CSS (from packages/ui)
@@ -52,20 +52,24 @@ const preview: Preview = {
},
parameters: {
layout: 'fullscreen',
backgrounds: {
disable: true,
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
options: {
storySort: {
order: ['Backstage UI', 'Plugins', 'Layout', 'Navigation'],
},
},
viewport: {
viewports: {
initial: {
@@ -82,6 +86,10 @@ const preview: Preview = {
},
},
},
docs: {
codePanel: true,
},
},
decorators: [
Story => {
.yarn/patches/@storybook-react-npm-9.1.5-2331f18b6b.patch
+35
View File
@@ -0,0 +1,35 @@
diff --git a/dist/preview.d.ts b/dist/preview.d.ts
index 73525b5fe07240d27733b59362cf2076cd28a6ed..0420e6b170a65b6d0db64fcfcfa07b68cd851942 100644
--- a/dist/preview.d.ts
+++ b/dist/preview.d.ts
@@ -174,7 +174,7 @@ type UnionToIntersection<Union> = (
declare function __definePreview<Addons extends PreviewAddon<never>[]>(input: {
addons: Addons;
} & ProjectAnnotations<ReactTypes & InferTypes<Addons>>): ReactPreview<ReactTypes & InferTypes<Addons>>;
-interface ReactPreview<T extends AddonTypes> extends Preview<ReactTypes & T> {
+interface ReactPreview<T extends AddonTypes = any> extends Omit<Preview<ReactTypes & T>, 'meta'> {
meta<TArgs extends Args, Decorators extends DecoratorFunction<ReactTypes & T, any>, TMetaArgs extends Partial<TArgs>>(meta: {
render?: ArgsStoryFn<ReactTypes & T, TArgs>;
component?: ComponentType<TArgs>;
@@ -187,16 +187,13 @@ interface ReactPreview<T extends AddonTypes> extends Preview<ReactTypes & T> {
}>;
}
type DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
-interface ReactMeta<T extends ReactTypes, MetaInput extends ComponentAnnotations<T>> extends Meta<T, MetaInput> {
+interface ReactMeta<T extends ReactTypes = any, MetaInput = any> extends Omit<Meta<T, ComponentAnnotations<T, any>>, 'story'> {
story<TInput extends (() => ReactTypes['storyResult']) | (StoryAnnotations<T, T['args']> & {
render: () => ReactTypes['storyResult'];
- })>(story?: TInput): ReactStory<T, TInput extends () => ReactTypes['storyResult'] ? {
- render: TInput;
- } : TInput>;
- story<TInput extends Simplify<StoryAnnotations<T, AddMocks<T['args'], MetaInput['args']>, SetOptional<T['args'], keyof T['args'] & keyof MetaInput['args']>>>>(story?: TInput): ReactStory<T, TInput>;
+ })>(story?: TInput): ReactStory<T>;
+ story<TInput = any>(story?: TInput): ReactStory<T>;
}
-interface ReactStory<T extends ReactTypes, TInput extends StoryAnnotations<T, T['args']>> extends Story<T, TInput> {
+interface ReactStory<T extends ReactTypes> {
Component: ComponentType<Partial<T['args']>>;
}
-
export { ReactPreview, ReactStory, __definePreview };
\ No newline at end of file
.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch
+15
View File
@@ -0,0 +1,15 @@
diff --git a/lib/main.d.ts b/lib/main.d.ts
index 9b54fef0086ea0c99368d8a95f2476e5dcd6d9c1..5c3853901e522c445cdb23b07538aad8a15bafb0 100644
--- a/lib/main.d.ts
+++ b/lib/main.d.ts
@@ -1,7 +1,7 @@
-import { ASTNode, Type, AnyType, Field } from "./types";
-import { NodePath } from "./node-path";
+import { ASTNode, type Type, AnyType, Field } from "./types";
+import { type NodePath } from "./node-path";
import { namedTypes } from "./gen/namedTypes";
-import { builders } from "./gen/builders";
+import { type builders } from "./gen/builders";
import { Visitor } from "./gen/visitor";
declare const astNodesAreEquivalent: {
(a: any, b: any, problemPath?: any): boolean;
package.json
+11 -9
View File
@@ -106,10 +106,15 @@
"@yarnpkg/plugin-npm@npm:^3.1.0": "patch:@yarnpkg/plugin-npm@npm%3A3.1.0#~/.yarn/patches/@yarnpkg-plugin-npm-npm-3.1.0-6533d0f5a1.patch",
"ast-types@0.14.2": "patch:ast-types@npm%3A0.14.2#./.yarn/patches/ast-types-npm-0.14.2-43c4ac4b0d.patch",
"ast-types@^0.14.1": "patch:ast-types@npm%3A0.14.2#./.yarn/patches/ast-types-npm-0.14.2-43c4ac4b0d.patch",
"ast-types@npm:^0.13.4": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
"ast-types@npm:0.14.2": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
"ast-types@npm:^0.16.1": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
"csstype@npm:^3.0.2": "3.0.9",
"csstype@npm:^3.1.2": "3.0.9",
"csstype@npm:^3.1.3": "3.0.9",
"jest-haste-map@^29.7.0": "patch:jest-haste-map@npm%3A29.7.0#./.yarn/patches/jest-haste-map-npm-29.7.0-e3be419eff.patch"
"jest-haste-map@^29.7.0": "patch:jest-haste-map@npm%3A29.7.0#./.yarn/patches/jest-haste-map-npm-29.7.0-e3be419eff.patch",
"recast@npm:0.23.9>ast-types": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
"@storybook/react@npm:9.1.5": "patch:@storybook/react@npm%3A9.1.5#~/.yarn/patches/@storybook-react-npm-9.1.5-2331f18b6b.patch"
},
"dependencies": {
"@backstage/errors": "workspace:^",
@@ -129,13 +134,10 @@
"@octokit/rest": "^19.0.3",
"@playwright/test": "^1.32.3",
"@spotify/eslint-plugin": "^15.0.0",
"@storybook/addon-essentials": "^8.6.12",
"@storybook/addon-interactions": "^8.6.12",
"@storybook/addon-links": "^8.6.12",
"@storybook/addon-storysource": "^8.6.12",
"@storybook/addon-themes": "^8.6.12",
"@storybook/react": "^8.6.12",
"@storybook/react-vite": "^8.6.12",
"@storybook/addon-docs": "^9.1.5",
"@storybook/addon-links": "^9.1.5",
"@storybook/addon-themes": "^9.1.5",
"@storybook/react-vite": "^9.1.5",
"@techdocs/cli": "workspace:*",
"@types/cacheable-request": "^8.3.6",
"@types/memjs": "^1.3.3",
@@ -160,7 +162,7 @@
"shx": "^0.4.0",
"sloc": "^0.3.1",
"sort-package-json": "^2.8.0",
"storybook": "^8.6.12",
"storybook": "^9.1.5",
"typedoc": "^0.28.0",
"typescript": "~5.7.0",
"vite": "^7.1.2"
packages/ui/package.json
+2 -4
View File
@@ -40,18 +40,16 @@
"dependencies": {
"@base-ui-components/react": "1.0.0-alpha.7",
"@remixicon/react": "^4.6.0",
"@storybook/test": "^8.6.12",
"@tanstack/react-table": "^8.21.3",
"clsx": "^2.1.1",
"react-aria-components": "^1.10.1"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
"@storybook/react": "^8.6.12",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"chalk": "^5.4.1",
"eslint-plugin-storybook": "^0.12.0",
"eslint-plugin-storybook": "^9.1.5",
"glob": "^11.0.1",
"globals": "^15.11.0",
"lightningcss": "^1.29.1",
@@ -59,7 +57,7 @@
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-router-dom": "^6.3.0",
"storybook": "^8.6.12"
"storybook": "^9.1.5"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
packages/ui/src/components/Avatar/Avatar.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Avatar } from './index';
import { Flex } from '../..';
packages/ui/src/components/Box/Box.stories.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Box } from './Box';
import { Flex } from '../Flex';
packages/ui/src/components/Button/Button.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Button } from './Button';
import { Flex } from '../Flex';
import { Text } from '../Text';
packages/ui/src/components/ButtonIcon/ButtonIcon.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { ButtonIcon } from './ButtonIcon';
import { Flex } from '../Flex';
import { Text } from '../Text';
packages/ui/src/components/ButtonLink/ButtonLink.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { ButtonLink } from './ButtonLink';
import { Flex } from '../Flex';
import { Text } from '../Text';
packages/ui/src/components/Card/Card.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Card, CardHeader, CardBody, CardFooter } from './Card';
import { IconNames, Text } from '../..';
packages/ui/src/components/Checkbox/Checkbox.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Checkbox } from './Checkbox';
import { Flex } from '../Flex';
import { Text } from '../Text';
packages/ui/src/components/Collapsible/Collapsible.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Collapsible } from './Collapsible';
import { Button } from '../Button';
import { Box } from '../Box';
packages/ui/src/components/Container/Container.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Box } from '../Box/Box';
import { Container } from './Container';
packages/ui/src/components/FieldError/FieldError.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { TextField, Input, Form } from 'react-aria-components';
import { FieldError } from './FieldError';
packages/ui/src/components/FieldLabel/FieldLabel.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { FieldLabel } from './FieldLabel';
const meta = {
packages/ui/src/components/Flex/Flex.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Flex } from './Flex';
import { Text } from '../Text';
packages/ui/src/components/Grid/Grid.stories.tsx
+2 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Grid } from './Grid';
import type { GridItemProps } from './types';
import { Box } from '../Box/Box';
@@ -23,7 +23,7 @@ import { Flex } from '../Flex';
const meta = {
title: 'Backstage UI/Grid',
component: Grid.Root,
} satisfies Meta<typeof Grid>;
} satisfies Meta<typeof Grid.Root>;
export default meta;
type Story = StoryObj<typeof meta>;
packages/ui/src/components/Header/Header.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj, StoryFn } from '@storybook/react';
import type { Meta, StoryObj, StoryFn } from '@storybook/react-vite';
import { Header } from './Header';
import type { HeaderTab } from './types';
import {
packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj, StoryFn } from '@storybook/react';
import type { Meta, StoryObj, StoryFn } from '@storybook/react-vite';
import { HeaderPage } from './HeaderPage';
import type { HeaderTab } from '../Header/types';
import { MemoryRouter } from 'react-router-dom';
packages/ui/src/components/Icon/Icon.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { Meta, StoryObj } from '@storybook/react';
import { Meta, StoryObj } from '@storybook/react-vite';
import { Icon } from './Icon';
import { IconProvider } from './provider';
import { icons } from './icons';
packages/ui/src/components/Link/Link.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryFn, StoryObj } from '@storybook/react';
import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
import { Link } from './Link';
import { Flex } from '../Flex';
import { Text } from '../Text';
packages/ui/src/components/Menu/Menu.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import {
MenuTrigger,
SubmenuTrigger,
packages/ui/src/components/RadioGroup/RadioGroup.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { RadioGroup, Radio } from './RadioGroup';
const meta = {
packages/ui/src/components/ScrollArea/ScrollArea.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { ScrollArea } from './ScrollArea';
import { Text } from '../Text/Text';
packages/ui/src/components/SearchField/SearchField.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { SearchField } from './SearchField';
import { Form } from 'react-aria-components';
import { Icon } from '../Icon';
packages/ui/src/components/Select/Select.stories.tsx
+1 -1
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Select } from './Select';
import { Flex } from '../Flex';
import { Form } from 'react-aria-components';
packages/ui/src/components/Skeleton/Skeleton.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Skeleton } from './Skeleton';
import { Flex } from '../Flex';
packages/ui/src/components/Switch/Switch.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Switch } from './Switch';
const meta = {
packages/ui/src/components/Table/Table.stories.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { useState } from 'react';
import type { Meta, StoryFn, StoryObj } from '@storybook/react';
import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
import {
Table,
TableHeader,
packages/ui/src/components/TablePagination/TablePagination.stories.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
// TODO: Bring useArgs() back when we update Storybook to 9
// import { useArgs } from 'storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { TablePagination } from './TablePagination';
const meta = {
packages/ui/src/components/Tabs/Tabs.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryFn, StoryObj } from '@storybook/react';
import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
import { Tabs, TabList, Tab, TabPanel } from './Tabs';
import { MemoryRouter } from 'react-router-dom';
import { Box } from '../Box';
packages/ui/src/components/TagGroup/TagGroup.stories.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { TagGroup, Tag } from '.';
import type { Selection } from 'react-aria-components';
import { Flex, Icon, IconNames } from '../../';
packages/ui/src/components/Text/Text.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Text } from './Text';
import { Flex } from '../Flex';
packages/ui/src/components/TextField/TextField.stories.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { TextField } from './TextField';
import { Form } from 'react-aria-components';
import { Icon } from '../Icon';
packages/ui/src/components/Tooltip/Tooltip.stories.tsx
+11 -11
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Placement } from '@react-types/overlays';
import { TooltipTrigger, Tooltip } from './Tooltip';
import { Button } from '../Button/Button';
@@ -41,7 +41,7 @@ const meta = {
control: { type: 'number' },
},
},
render: ({ tooltip, isOpen, isDisabled, placement, delay, closeDelay }) => (
render: ({ children, isOpen, isDisabled, placement, delay, closeDelay }) => (
<TooltipTrigger
isOpen={isOpen}
isDisabled={isDisabled}
@@ -49,11 +49,11 @@ const meta = {
closeDelay={closeDelay}
>
<Button>Button</Button>
<Tooltip placement={placement}>{tooltip ?? 'I am a tooltip'}</Tooltip>
<Tooltip placement={placement}>{children ?? 'I am a tooltip'}</Tooltip>
</TooltipTrigger>
),
} as Meta<{
tooltip?: string;
children?: string;
isOpen?: boolean;
isDisabled?: boolean;
placement?: Placement;
@@ -66,7 +66,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
tooltip: 'I am a tooltip',
children: 'I am a tooltip',
},
};
@@ -102,14 +102,14 @@ export const OrthogonalPlacements: Story = {
...Default.args,
isOpen: true,
},
render: ({ isOpen, tooltip }) => {
render: ({ isOpen, children }) => {
return (
<TooltipTrigger isOpen={isOpen}>
<Button>Button</Button>
<Tooltip placement="top">{tooltip}</Tooltip>
<Tooltip placement="right">{tooltip}</Tooltip>
<Tooltip placement="bottom">{tooltip}</Tooltip>
<Tooltip placement="left">{tooltip}</Tooltip>
<Tooltip placement="top">{children}</Tooltip>
<Tooltip placement="right">{children}</Tooltip>
<Tooltip placement="bottom">{children}</Tooltip>
<Tooltip placement="left">{children}</Tooltip>
</TooltipTrigger>
);
},
@@ -119,7 +119,7 @@ export const WithLongText: Story = {
args: {
...Default.args,
isOpen: true,
tooltip:
children:
'I am a tooltip with a very long text. orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
},
};
yarn.lock
+311 -674
View File
File diff suppressed because it is too large Load Diff