Update Storybook to v8
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,53 @@
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
import { join, dirname, posix } from 'path';
|
||||
|
||||
/**
|
||||
* This set of stories are the ones that we publish to backstage.io.
|
||||
*/
|
||||
const backstageCoreStories = [
|
||||
'packages/core-components',
|
||||
'packages/app',
|
||||
'plugins/org',
|
||||
'plugins/search',
|
||||
'plugins/search-react',
|
||||
'plugins/home',
|
||||
'plugins/catalog-react',
|
||||
];
|
||||
|
||||
const rootPath = '../../';
|
||||
const storiesSrcMdx = 'src/**/*.mdx';
|
||||
const storiesSrcGlob = 'src/**/*.stories.@(js|jsx|mjs|ts|tsx)';
|
||||
|
||||
const getStoriesPath = (element: string, pattern: string) =>
|
||||
posix.join(rootPath, element, pattern);
|
||||
|
||||
const stories = backstageCoreStories.flatMap(element => [
|
||||
getStoriesPath(element, storiesSrcMdx),
|
||||
getStoriesPath(element, storiesSrcGlob),
|
||||
]);
|
||||
|
||||
/**
|
||||
* This function is used to resolve the absolute path of a package.
|
||||
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
|
||||
*/
|
||||
function getAbsolutePath(value: string): any {
|
||||
return dirname(require.resolve(join(value, 'package.json')));
|
||||
}
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories,
|
||||
addons: [
|
||||
getAbsolutePath('@storybook/addon-onboarding'),
|
||||
getAbsolutePath('@storybook/addon-links'),
|
||||
getAbsolutePath('@storybook/addon-essentials'),
|
||||
getAbsolutePath('@chromatic-com/storybook'),
|
||||
getAbsolutePath('@storybook/addon-interactions'),
|
||||
getAbsolutePath('storybook-dark-mode'),
|
||||
],
|
||||
framework: {
|
||||
name: getAbsolutePath('@storybook/react-vite'),
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { TestApiProvider } from '@backstage/test-utils';
|
||||
import { Content, AlertDisplay } from '@backstage/core-components';
|
||||
import { lightTheme, darkTheme } from '@backstage/theme';
|
||||
import { CssBaseline, ThemeProvider } from '@material-ui/core';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
import { apis } from './apis';
|
||||
|
||||
import type { Preview } from '@storybook/react';
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
darkMode: {
|
||||
current: 'light',
|
||||
},
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<TestApiProvider apis={apis}>
|
||||
<ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
|
||||
<CssBaseline>
|
||||
<AlertDisplay />
|
||||
<Content>
|
||||
<Story />
|
||||
</Content>
|
||||
</CssBaseline>
|
||||
</ThemeProvider>
|
||||
</TestApiProvider>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export default preview;
|
||||
|
||||
export const parameters = {
|
||||
options: {
|
||||
storySort: {
|
||||
order: ['Plugins', 'Layout', 'Navigation'],
|
||||
},
|
||||
},
|
||||
};
|
||||
+36
-29
@@ -3,40 +3,47 @@
|
||||
"version": "0.2.2",
|
||||
"description": "Storybook build for components package",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook --output-dir dist",
|
||||
"start": "start-storybook -p 6006"
|
||||
"build": "tsc -b && vite build",
|
||||
"build-storybook": "storybook build",
|
||||
"dev": "vite",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"storybook": "storybook dev -p 6006"
|
||||
},
|
||||
"resolutions": {
|
||||
"webpack": "^5.73.0"
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"plugin:storybook/recommended"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@swc/core": "^1.3.46",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"react-router-dom": "^6.25.1",
|
||||
"swc-loader": "^0.2.3"
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^6.5.9",
|
||||
"@storybook/addon-actions": "^6.5.9",
|
||||
"@storybook/addon-controls": "^6.5.9",
|
||||
"@storybook/addon-links": "^6.5.9",
|
||||
"@storybook/addon-storysource": "^6.5.9",
|
||||
"@storybook/addons": "^6.5.9",
|
||||
"@storybook/builder-webpack5": "^6.5.9",
|
||||
"@storybook/manager-webpack5": "^6.5.9",
|
||||
"@storybook/node-logger": "^6.5.9",
|
||||
"@storybook/react": "^6.5.9",
|
||||
"@storybook/testing-library": "^0.2.0",
|
||||
"storybook-dark-mode": "^1.1.0",
|
||||
"typescript": "~4.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@backstage/core-app-api": "*",
|
||||
"@backstage/core-plugin-api": "*",
|
||||
"@backstage/test-utils": "*",
|
||||
"@backstage/theme": "*"
|
||||
"@chromatic-com/storybook": "^1.9.0",
|
||||
"@eslint/js": "^9.11.1",
|
||||
"@storybook/addon-essentials": "^8.3.5",
|
||||
"@storybook/addon-interactions": "^8.3.5",
|
||||
"@storybook/addon-links": "^8.3.5",
|
||||
"@storybook/addon-onboarding": "^8.3.5",
|
||||
"@storybook/blocks": "^8.3.5",
|
||||
"@storybook/react": "^8.3.5",
|
||||
"@storybook/react-vite": "^8.3.5",
|
||||
"@storybook/test": "^8.3.5",
|
||||
"@types/react": "^18.3.10",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.2",
|
||||
"eslint": "^9.11.1",
|
||||
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.12",
|
||||
"eslint-plugin-storybook": "^0.9.0",
|
||||
"globals": "^15.9.0",
|
||||
"storybook": "^8.3.5",
|
||||
"storybook-dark-mode": "^4.0.2",
|
||||
"typescript": "^5.5.3",
|
||||
"typescript-eslint": "^8.7.0",
|
||||
"vite": "^5.4.8"
|
||||
}
|
||||
}
|
||||
|
||||
+3171
-9296
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,2 @@
|
||||
registry=https://registry.npmjs.org/
|
||||
engine-strict=true
|
||||
@@ -0,0 +1,75 @@
|
||||
import {
|
||||
AlertApiForwarder,
|
||||
ErrorAlerter,
|
||||
ErrorApiForwarder,
|
||||
GithubAuth,
|
||||
GitlabAuth,
|
||||
GoogleAuth,
|
||||
OAuthRequestManager,
|
||||
OktaAuth,
|
||||
ConfigReader,
|
||||
LocalStorageFeatureFlags,
|
||||
} from '@backstage/core-app-api';
|
||||
|
||||
import {
|
||||
alertApiRef,
|
||||
errorApiRef,
|
||||
githubAuthApiRef,
|
||||
gitlabAuthApiRef,
|
||||
googleAuthApiRef,
|
||||
identityApiRef,
|
||||
oauthRequestApiRef,
|
||||
oktaAuthApiRef,
|
||||
configApiRef,
|
||||
featureFlagsApiRef,
|
||||
} from '@backstage/core-plugin-api';
|
||||
|
||||
import { translationApiRef } from '@backstage/core-plugin-api/alpha';
|
||||
import { MockTranslationApi } from '@backstage/test-utils/alpha';
|
||||
|
||||
const configApi = new ConfigReader({});
|
||||
const featureFlagsApi = new LocalStorageFeatureFlags();
|
||||
const alertApi = new AlertApiForwarder();
|
||||
const errorApi = new ErrorAlerter(alertApi, new ErrorApiForwarder());
|
||||
const identityApi = {
|
||||
getUserId: () => 'guest',
|
||||
getProfile: () => ({ email: 'guest@example.com' }),
|
||||
getIdToken: () => undefined,
|
||||
signOut: async () => {},
|
||||
};
|
||||
const oauthRequestApi = new OAuthRequestManager();
|
||||
const googleAuthApi = GoogleAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const githubAuthApi = GithubAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const gitlabAuthApi = GitlabAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const oktaAuthApi = OktaAuth.create({
|
||||
apiOrigin: 'http://localhost:7007',
|
||||
basePath: '/auth/',
|
||||
oauthRequestApi,
|
||||
});
|
||||
const translationApi = MockTranslationApi.create();
|
||||
|
||||
export const apis = [
|
||||
[configApiRef, configApi],
|
||||
[featureFlagsApiRef, featureFlagsApi],
|
||||
[alertApiRef, alertApi],
|
||||
[errorApiRef, errorApi],
|
||||
[identityApiRef, identityApi],
|
||||
[oauthRequestApiRef, oauthRequestApi],
|
||||
[googleAuthApiRef, googleAuthApi],
|
||||
[githubAuthApiRef, githubAuthApi],
|
||||
[gitlabAuthApiRef, gitlabAuthApi],
|
||||
[oktaAuthApiRef, oktaAuthApi],
|
||||
[translationApiRef, translationApi],
|
||||
];
|
||||
@@ -0,0 +1,36 @@
|
||||
# storybook
|
||||
|
||||
## 0.2.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @backstage/core-plugin-api@0.6.0
|
||||
- @backstage/test-utils@0.2.3
|
||||
- @backstage/core-app-api@0.5.0
|
||||
|
||||
## 0.2.2-next.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @backstage/core-plugin-api@0.6.0-next.0
|
||||
- @backstage/core-app-api@0.5.0-next.0
|
||||
- @backstage/test-utils@0.2.3-next.0
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @backstage/test-utils@0.2.2
|
||||
- @backstage/core-plugin-api@0.5.0
|
||||
- @backstage/core-app-api@0.4.0
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [ae5983387]
|
||||
- Updated dependencies [0d4459c08]
|
||||
- @backstage/theme@0.2.0
|
||||
@@ -0,0 +1,17 @@
|
||||
# storybook
|
||||
|
||||
This package provides a Storybook build for Backstage. See https://backstage.io/storybook/.
|
||||
|
||||
## Usage
|
||||
|
||||
To run the storybook locally, call `yarn storybook` in repo root. This will show the default set of stories that we publish to https://backstage.io/storybook
|
||||
|
||||
If you want to show stories other than the default set, you can pass one or more package paths as an argument when calling storybook, for example:
|
||||
|
||||
```sh
|
||||
yarn storybook plugins/search
|
||||
```
|
||||
|
||||
## Why is this not part of `@backstage/core-components`?
|
||||
|
||||
This separate storybook package exists because of dependency conflicts with `@backstage/cli`. It uses `nohoist` to avoid the conflicts, and since you can only use that in private packages it has to be separated out of `@backstage/core-components`.
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "storybook",
|
||||
"version": "0.2.2",
|
||||
"description": "Storybook build for components package",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook --output-dir dist",
|
||||
"start": "start-storybook -p 6006"
|
||||
},
|
||||
"resolutions": {
|
||||
"webpack": "^5.73.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@swc/core": "^1.3.46",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"react-router-dom": "^6.25.1",
|
||||
"swc-loader": "^0.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^6.5.9",
|
||||
"@storybook/addon-actions": "^6.5.9",
|
||||
"@storybook/addon-controls": "^6.5.9",
|
||||
"@storybook/addon-links": "^6.5.9",
|
||||
"@storybook/addon-storysource": "^6.5.9",
|
||||
"@storybook/addons": "^6.5.9",
|
||||
"@storybook/builder-webpack5": "^6.5.9",
|
||||
"@storybook/manager-webpack5": "^6.5.9",
|
||||
"@storybook/node-logger": "^6.5.9",
|
||||
"@storybook/react": "^6.5.9",
|
||||
"@storybook/testing-library": "^0.2.0",
|
||||
"storybook-dark-mode": "^1.1.0",
|
||||
"typescript": "~4.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@backstage/core-app-api": "*",
|
||||
"@backstage/core-plugin-api": "*",
|
||||
"@backstage/test-utils": "*",
|
||||
"@backstage/theme": "*"
|
||||
}
|
||||
}
|
||||
+12078
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user