mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
Merge branch 'next' into update-primary-block-of-prop
This commit is contained in:
Wilson
GitHub
commit
ebfd6b1b7b
@ -43,7 +43,7 @@ jobs:
|
||||
run: yarn wait-on http://localhost:6001
|
||||
working-directory: ./code
|
||||
- name: Generate
|
||||
run: yarn generate-sandboxes --local-registry
|
||||
run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
|
||||
working-directory: ./code
|
||||
- name: Publish
|
||||
run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main
|
||||
|
||||
@ -43,7 +43,7 @@ jobs:
|
||||
run: yarn wait-on http://localhost:6001
|
||||
working-directory: ./code
|
||||
- name: Generate
|
||||
run: yarn generate-sandboxes --local-registry
|
||||
run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
|
||||
working-directory: ./code
|
||||
- name: Publish
|
||||
run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
|
||||
|
||||
9
.github/workflows/prepare-patch-release.yml
vendored
9
.github/workflows/prepare-patch-release.yml
vendored
@ -88,6 +88,15 @@ jobs:
|
||||
git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
|
||||
yarn release:pick-patches
|
||||
|
||||
- name: Cancel when 0 picked
|
||||
if: steps.pick-patches.outputs.pr-count == '0'
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
# From https://stackoverflow.com/a/75809743
|
||||
run: |
|
||||
gh run cancel ${{ github.run_id }}
|
||||
gh run watch ${{ github.run_id }}
|
||||
|
||||
- name: Bump version deferred
|
||||
id: bump-version
|
||||
if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
|
||||
|
||||
12
CHANGELOG.md
12
CHANGELOG.md
@ -1,3 +1,15 @@
|
||||
## 7.4.4
|
||||
|
||||
- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
|
||||
## 7.4.3
|
||||
|
||||
- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!
|
||||
- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
|
||||
## 7.4.2
|
||||
|
||||
- Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
|
||||
@ -1,3 +1,31 @@
|
||||
## 7.5.0-alpha.3
|
||||
|
||||
- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!
|
||||
- Build: Migrate @storybook/addon-backgrounds to strict-ts - [#22178](https://github.com/storybookjs/storybook/pull/22178), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
|
||||
- Build: Upgrade chromatic bin package - [#24133](https://github.com/storybookjs/storybook/pull/24133), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- CLI: Change `/Date$/` to `/Dates$/i` - [#24195](https://github.com/storybookjs/storybook/pull/24195), thanks [@arup1221](https://github.com/arup1221)!
|
||||
- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- Core: Throw an error when critical presets fail to load - [#24176](https://github.com/storybookjs/storybook/pull/24176), thanks [@yannbf](https://github.com/yannbf)!
|
||||
- Core: Unify error when builder is missing - [#24177](https://github.com/storybookjs/storybook/pull/24177), thanks [@yannbf](https://github.com/yannbf)!
|
||||
- Core: Upgrade `esbuild-register` to `3.5.0` - [#24175](https://github.com/storybookjs/storybook/pull/24175), thanks [@anneau](https://github.com/anneau)!
|
||||
- Dependencies: Upgrade `file-system-cache` - [#24232](https://github.com/storybookjs/storybook/pull/24232), thanks [@seriouz](https://github.com/seriouz)!
|
||||
- Indexer: Rename `index` to `createIndex` - [#24075](https://github.com/storybookjs/storybook/pull/24075), thanks [@JReinhold](https://github.com/JReinhold)!
|
||||
- Maintenance: Regen lockfiles - [#24152](https://github.com/storybookjs/storybook/pull/24152), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!
|
||||
- Nextjs: Improve Google Fonts failure error messages and documentation - [#23891](https://github.com/storybookjs/storybook/pull/23891), thanks [@nsheaps](https://github.com/nsheaps)!
|
||||
- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!
|
||||
- Theming: Add `barHoverColor` - [#20169](https://github.com/storybookjs/storybook/pull/20169), thanks [@julien-deramond](https://github.com/julien-deramond)!
|
||||
- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- Types: Don't distribute generic type of Meta and Story - [#24110](https://github.com/storybookjs/storybook/pull/24110), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
|
||||
- UI: Expand sidebar for selected story when using composition - [#23781](https://github.com/storybookjs/storybook/pull/23781), thanks [@joaonunomota](https://github.com/joaonunomota)!
|
||||
- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
- UI: Fix TreeNode alignment when using a different font - [#22221](https://github.com/storybookjs/storybook/pull/22221), thanks [@bdriguesdev](https://github.com/bdriguesdev)!
|
||||
- UI: Fix custom theme hover-color inconsistency - [#22262](https://github.com/storybookjs/storybook/pull/22262), thanks [@yoshi2no](https://github.com/yoshi2no)!
|
||||
- UI: Fix keydown shortcut within shadow tree - [#24179](https://github.com/storybookjs/storybook/pull/24179), thanks [@stropitek](https://github.com/stropitek)!
|
||||
- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!
|
||||
|
||||
## 7.5.0-alpha.2
|
||||
|
||||
- Angular: Categorize legacy build options error - [#24014](https://github.com/storybookjs/storybook/pull/24014), thanks [@yannbf](https://github.com/yannbf)!
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -18,10 +18,10 @@ import { getBackgroundColorByName } from '../helpers';
|
||||
|
||||
const createBackgroundSelectorItem = memoize(1000)(
|
||||
(
|
||||
id: string,
|
||||
id: string | null,
|
||||
name: string,
|
||||
value: string,
|
||||
hasSwatch: boolean,
|
||||
hasSwatch: boolean | null,
|
||||
change: (arg: { selected: string; name: string }) => void,
|
||||
active: boolean
|
||||
): BackgroundSelectorItem => ({
|
||||
@ -102,7 +102,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
|
||||
}
|
||||
|
||||
const onBackgroundChange = useCallback(
|
||||
(value: string) => {
|
||||
(value: string | undefined) => {
|
||||
updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
|
||||
},
|
||||
[backgroundsConfig, globals, updateGlobals]
|
||||
|
||||
@ -15,7 +15,7 @@ export const isReduceMotionEnabled = () => {
|
||||
export const getBackgroundColorByName = (
|
||||
currentSelectedValue: string,
|
||||
backgrounds: Background[] = [],
|
||||
defaultName: string
|
||||
defaultName: string | null | undefined
|
||||
): string => {
|
||||
if (currentSelectedValue === 'transparent') {
|
||||
return 'transparent';
|
||||
@ -52,7 +52,7 @@ export const clearStyles = (selector: string | string[]) => {
|
||||
const clearStyle = (selector: string) => {
|
||||
const element = document.getElementById(selector) as HTMLElement;
|
||||
if (element) {
|
||||
element.parentElement.removeChild(element);
|
||||
element.parentElement?.removeChild(element);
|
||||
}
|
||||
};
|
||||
|
||||
@ -70,7 +70,7 @@ export const addGridStyle = (selector: string, css: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
export const addBackgroundStyle = (selector: string, css: string, storyId: string) => {
|
||||
export const addBackgroundStyle = (selector: string, css: string, storyId: string | null) => {
|
||||
const existingStyle = document.getElementById(selector) as HTMLElement;
|
||||
if (existingStyle) {
|
||||
if (existingStyle.innerHTML !== css) {
|
||||
@ -85,7 +85,7 @@ export const addBackgroundStyle = (selector: string, css: string, storyId: strin
|
||||
// If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
|
||||
const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement;
|
||||
if (existingGridStyle) {
|
||||
existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
|
||||
existingGridStyle.parentElement?.insertBefore(style, existingGridStyle);
|
||||
} else {
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ export interface Background {
|
||||
}
|
||||
|
||||
export interface BackgroundsParameter {
|
||||
default?: string;
|
||||
default?: string | null;
|
||||
disable?: boolean;
|
||||
values: Background[];
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": ["src/**/*"],
|
||||
"compilerOptions": {
|
||||
"strict": false
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -119,9 +119,11 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/pluginutils": "^5.0.2",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.8.0",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.3",
|
||||
"vite": "^4.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
|
||||
@ -2,7 +2,7 @@ import type { Options } from '@storybook/types';
|
||||
import type { Plugin } from 'vite';
|
||||
import remarkSlug from 'remark-slug';
|
||||
import remarkExternalLinks from 'remark-external-links';
|
||||
import { createFilter } from 'vite';
|
||||
import { createFilter } from '@rollup/pluginutils';
|
||||
import { dirname, join } from 'path';
|
||||
|
||||
const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
|
||||
@ -175,6 +175,15 @@ export const addons: StorybookConfig['addons'] = [
|
||||
require.resolve('@storybook/react-dom-shim/dist/preset'),
|
||||
];
|
||||
|
||||
export const viteFinal = async (config: any, options: Options) => {
|
||||
const { plugins = [] } = config;
|
||||
const { mdxPlugin } = await import('./plugins/mdx-plugin');
|
||||
|
||||
plugins.push(mdxPlugin(options));
|
||||
|
||||
return config;
|
||||
};
|
||||
|
||||
/*
|
||||
* This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162
|
||||
* something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-mdx-gfm",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "GitHub Flavored Markdown in Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-themes",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Switch between multiple themes for you components in Storybook",
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-manager",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook manager builder",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "A plugin to run and build Storybooks with Vite",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
|
||||
"bugs": {
|
||||
@ -47,7 +47,6 @@
|
||||
"@storybook/client-logger": "workspace:*",
|
||||
"@storybook/core-common": "workspace:*",
|
||||
"@storybook/csf-plugin": "workspace:*",
|
||||
"@storybook/mdx2-csf": "^1.0.0",
|
||||
"@storybook/node-logger": "workspace:*",
|
||||
"@storybook/preview": "workspace:*",
|
||||
"@storybook/preview-api": "workspace:*",
|
||||
@ -59,8 +58,6 @@
|
||||
"find-cache-dir": "^3.0.0",
|
||||
"fs-extra": "^11.1.0",
|
||||
"magic-string": "^0.30.0",
|
||||
"remark-external-links": "^8.0.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
"rollup": "^2.25.0 || ^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -96,9 +93,6 @@
|
||||
"entries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"externals": [
|
||||
"@storybook/mdx1-csf"
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export * from './inject-export-order-plugin';
|
||||
export * from './mdx-plugin';
|
||||
export * from './strip-story-hmr-boundaries';
|
||||
export * from './code-generator-plugin';
|
||||
export * from './csf-plugin';
|
||||
|
||||
@ -15,7 +15,6 @@ import {
|
||||
codeGeneratorPlugin,
|
||||
csfPlugin,
|
||||
injectExportOrderPlugin,
|
||||
mdxPlugin,
|
||||
stripStoryHMRBoundary,
|
||||
externalGlobalsPlugin,
|
||||
} from './plugins';
|
||||
@ -81,7 +80,6 @@ export async function pluginConfig(options: Options) {
|
||||
const plugins = [
|
||||
codeGeneratorPlugin(options),
|
||||
await csfPlugin(options),
|
||||
await mdxPlugin(options),
|
||||
injectExportOrderPlugin,
|
||||
stripStoryHMRBoundary(),
|
||||
{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
8
code/chromatic.config.json
Normal file
8
code/chromatic.config.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"projectId": "Project:635781f3500dd2c49e189caf",
|
||||
"projectToken": "80b312430ec4",
|
||||
"buildScriptName": "storybook:ui:build",
|
||||
"onlyChanged": true,
|
||||
"storybookConfigDir": "./ui/.storybook",
|
||||
"storybookBaseDir": "./code"
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/client-api",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook Client API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-client",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/api",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook Manager API (facade)",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preview-web",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/store",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
|
||||
"bugs": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
- [next/font/google](#nextfontgoogle)
|
||||
- [next/font/local](#nextfontlocal)
|
||||
- [Not supported features of next/font](#not-supported-features-of-nextfont)
|
||||
- [Mocking fonts during testing](#mocking-fonts-during-testing)
|
||||
- [Next.js Routing](#nextjs-routing)
|
||||
- [Overriding defaults](#overriding-defaults)
|
||||
- [Global Defaults](#global-defaults)
|
||||
@ -271,6 +272,51 @@ The following features are not supported (yet). Support for these features might
|
||||
- [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
|
||||
- [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
|
||||
|
||||
#### Mocking fonts during testing
|
||||
|
||||
Occasionally fetching fonts from Google may fail as part of your Storybook build step. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. Next.js [supports mocking fonts](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36) via a JavaScript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references.
|
||||
|
||||
For example, using [GitHub Actions](https://www.chromatic.com/docs/github-actions):
|
||||
|
||||
```shell
|
||||
- uses: chromaui/action@v1
|
||||
env:
|
||||
#👇 the location of mocked fonts to use
|
||||
NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js
|
||||
with:
|
||||
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
```
|
||||
|
||||
Your mocked fonts will look something like this:
|
||||
|
||||
```js
|
||||
// mocked-google-fonts.js
|
||||
//👇 Mocked responses of google fonts with the URL as the key
|
||||
module.exports = {
|
||||
'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': `
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* more font declarations go here */
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}`,
|
||||
};
|
||||
```
|
||||
|
||||
### Next.js Routing
|
||||
|
||||
[Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/nextjs",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Next.js",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -95,6 +95,7 @@
|
||||
"@storybook/addon-actions": "workspace:*",
|
||||
"@storybook/builder-webpack5": "workspace:*",
|
||||
"@storybook/core-common": "workspace:*",
|
||||
"@storybook/core-events": "workspace:*",
|
||||
"@storybook/node-logger": "workspace:*",
|
||||
"@storybook/preset-react-webpack": "workspace:*",
|
||||
"@storybook/preview-api": "workspace:*",
|
||||
|
||||
@ -5,6 +5,14 @@ import type { NextConfig } from 'next';
|
||||
import { DefinePlugin } from 'webpack';
|
||||
import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';
|
||||
|
||||
const tryResolve = (path: string) => {
|
||||
try {
|
||||
return require.resolve(path);
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const configureConfig = async ({
|
||||
baseConfig,
|
||||
nextConfigPath,
|
||||
@ -17,6 +25,12 @@ export const configureConfig = async ({
|
||||
const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
|
||||
|
||||
addScopedAlias(baseConfig, 'next/config');
|
||||
if (tryResolve('next/dist/compiled/react')) {
|
||||
addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
|
||||
}
|
||||
if (tryResolve('next/dist/compiled/react-dom')) {
|
||||
addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
|
||||
}
|
||||
setupRuntimeConfig(baseConfig, nextConfig);
|
||||
|
||||
return nextConfig;
|
||||
|
||||
36
code/frameworks/nextjs/src/dependency-map.ts
Normal file
36
code/frameworks/nextjs/src/dependency-map.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import type { Configuration as WebpackConfig } from 'webpack';
|
||||
import semver from 'semver';
|
||||
import { getNextjsVersion, addScopedAlias } from './utils';
|
||||
|
||||
const mapping: Record<string, Record<string, string>> = {
|
||||
'<11.1.0': {
|
||||
'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context',
|
||||
},
|
||||
'>=11.1.0': {
|
||||
'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context',
|
||||
},
|
||||
'>=13.5.0': {
|
||||
'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context.shared-runtime',
|
||||
'next/dist/shared/lib/head-manager-context':
|
||||
'next/dist/shared/lib/head-manager-context.shared-runtime',
|
||||
'next/dist/shared/lib/app-router-context':
|
||||
'next/dist/shared/lib/app-router-context.shared-runtime',
|
||||
'next/dist/shared/lib/hooks-client-context':
|
||||
'next/dist/shared/lib/hooks-client-context.shared-runtime',
|
||||
},
|
||||
};
|
||||
|
||||
export const configureAliasing = (baseConfig: WebpackConfig): void => {
|
||||
const version = getNextjsVersion();
|
||||
const result: Record<string, string> = {};
|
||||
|
||||
Object.keys(mapping).forEach((key) => {
|
||||
if (semver.intersects(version, key)) {
|
||||
Object.assign(result, mapping[key]);
|
||||
}
|
||||
});
|
||||
|
||||
Object.entries(result).forEach(([name, alias]) => {
|
||||
addScopedAlias(baseConfig, name, alias);
|
||||
});
|
||||
};
|
||||
@ -1,6 +1,10 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
import loaderUtils from 'next/dist/compiled/loader-utils3';
|
||||
import {
|
||||
GoogleFontsDownloadError,
|
||||
GoogleFontsLoadingError,
|
||||
} from '@storybook/core-events/server-errors';
|
||||
import type { LoaderOptions } from '../types';
|
||||
|
||||
const cssCache = new Map<string, Promise<string>>();
|
||||
@ -33,7 +37,10 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
|
||||
cssCache.delete(url);
|
||||
}
|
||||
if (fontFaceCSS === null) {
|
||||
throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts.`);
|
||||
throw new GoogleFontsDownloadError({
|
||||
fontFamily,
|
||||
url,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
@ -45,6 +52,6 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
|
||||
variable,
|
||||
};
|
||||
} catch (error) {
|
||||
throw new Error("Google Fonts couldn't be loaded.");
|
||||
throw new GoogleFontsLoadingError({ error, url });
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@ import { getProjectRoot } from '@storybook/core-common';
|
||||
import { configureConfig } from './config/webpack';
|
||||
import { configureCss } from './css/webpack';
|
||||
import { configureImports } from './imports/webpack';
|
||||
import { configureRouting } from './routing/webpack';
|
||||
import { configureStyledJsx } from './styledJsx/webpack';
|
||||
import { configureImages } from './images/webpack';
|
||||
import { configureRuntimeNextjsVersionResolution } from './utils';
|
||||
@ -17,6 +16,7 @@ import TransformFontImports from './font/babel';
|
||||
import { configureNextFont } from './font/webpack/configureNextFont';
|
||||
import nextBabelPreset from './babel/preset';
|
||||
import { configureNodePolyfills } from './nodePolyfills/webpack';
|
||||
import { configureAliasing } from './dependency-map';
|
||||
|
||||
export const addons: PresetProperty<'addons', StorybookConfig> = [
|
||||
dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
|
||||
@ -143,13 +143,13 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
|
||||
configDir: options.configDir,
|
||||
});
|
||||
|
||||
configureAliasing(baseConfig);
|
||||
configureNextFont(baseConfig);
|
||||
configureNextImport(baseConfig);
|
||||
configureRuntimeNextjsVersionResolution(baseConfig);
|
||||
configureImports({ baseConfig, configDir: options.configDir });
|
||||
configureCss(baseConfig, nextConfig);
|
||||
configureImages(baseConfig, nextConfig);
|
||||
configureRouting(baseConfig);
|
||||
configureStyledJsx(baseConfig);
|
||||
configureNodePolyfills(baseConfig);
|
||||
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import type { Configuration as WebpackConfig } from 'webpack';
|
||||
import semver from 'semver';
|
||||
import { addScopedAlias, getNextjsVersion } from '../utils';
|
||||
|
||||
export const configureRouting = (baseConfig: WebpackConfig): void => {
|
||||
// here we resolve the router context path with the installed version of Next.js
|
||||
const routerContextPath = getRouterContextPath();
|
||||
addScopedAlias(baseConfig, routerContextPath);
|
||||
};
|
||||
|
||||
const getRouterContextPath = () => {
|
||||
const version = getNextjsVersion();
|
||||
if (semver.gte(version, '11.1.0')) {
|
||||
return 'next/dist/shared/lib/router-context';
|
||||
}
|
||||
|
||||
return 'next/dist/next-server/lib/router-context';
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -29,7 +29,7 @@ However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/mo
|
||||
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Future | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
|
||||
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Future | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
|
||||
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer |
|
||||
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | Mocks planned, so you can set different store values per story. |
|
||||
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | Mocks planned, so you can set different store values per story. |
|
||||
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
|
||||
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/sveltekit",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for SvelteKit",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-vite",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-webpack5",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sb",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "storybook",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { getStorybookInfo } from '@storybook/core-common';
|
||||
import { getStorybookInfo, serverRequire } from '@storybook/core-common';
|
||||
import { readConfig, writeConfig } from '@storybook/csf-tools';
|
||||
import { isAbsolute, join } from 'path';
|
||||
import SemVer from 'semver';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
import {
|
||||
JsPackageManagerFactory,
|
||||
@ -38,6 +40,21 @@ const getVersionSpecifier = (addon: string) => {
|
||||
return groups ? [groups[1], groups[2]] : [addon, undefined];
|
||||
};
|
||||
|
||||
const requireMain = (configDir: string) => {
|
||||
const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
|
||||
const mainFile = join(absoluteConfigDir, 'main');
|
||||
|
||||
return serverRequire(mainFile) ?? {};
|
||||
};
|
||||
|
||||
const checkInstalled = (addonName: string, main: any) => {
|
||||
const existingAddon = main.addons?.find((entry: string | { name: string }) => {
|
||||
const name = typeof entry === 'string' ? entry : entry.name;
|
||||
return name?.endsWith(addonName);
|
||||
});
|
||||
return !!existingAddon;
|
||||
};
|
||||
|
||||
/**
|
||||
* Install the given addon package and add it to main.js
|
||||
*
|
||||
@ -60,9 +77,16 @@ export async function add(
|
||||
}
|
||||
const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
|
||||
const packageJson = await packageManager.retrievePackageJson();
|
||||
const { mainConfig, configDir } = getStorybookInfo(packageJson);
|
||||
|
||||
if (checkInstalled(addon, requireMain(configDir))) {
|
||||
throw new Error(dedent`
|
||||
Addon ${addon} is already installed; we skipped adding it to your ${mainConfig}.
|
||||
`);
|
||||
}
|
||||
|
||||
const [addonName, versionSpecifier] = getVersionSpecifier(addon);
|
||||
|
||||
const { mainConfig } = getStorybookInfo(packageJson);
|
||||
if (!mainConfig) {
|
||||
logger.error('Unable to find storybook main.js config');
|
||||
return;
|
||||
|
||||
@ -131,7 +131,7 @@ describe('configurePreview', () => {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -162,7 +162,7 @@ describe('configurePreview', () => {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -213,7 +213,7 @@ describe('configurePreview', () => {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -152,7 +152,7 @@ export async function configurePreview(options: ConfigurePreviewOptions) {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -213,9 +213,14 @@ describe('PNPM Proxy', () => {
|
||||
.spyOn(pnpmProxy, 'writePackageJson')
|
||||
.mockImplementation(jest.fn());
|
||||
|
||||
const basePackageAttributes = {
|
||||
dependencies: {},
|
||||
devDependencies: {},
|
||||
};
|
||||
|
||||
jest.spyOn(pnpmProxy, 'retrievePackageJson').mockImplementation(
|
||||
// @ts-expect-error (not strict)
|
||||
jest.fn(() => ({
|
||||
jest.fn(async () => ({
|
||||
...basePackageAttributes,
|
||||
overrides: {
|
||||
bar: 'x.x.x',
|
||||
},
|
||||
@ -228,6 +233,7 @@ describe('PNPM Proxy', () => {
|
||||
await pnpmProxy.addPackageResolutions(versions);
|
||||
|
||||
expect(writePackageSpy).toHaveBeenCalledWith({
|
||||
...basePackageAttributes,
|
||||
overrides: {
|
||||
...versions,
|
||||
bar: 'x.x.x',
|
||||
|
||||
@ -296,7 +296,7 @@ const baseTemplates = {
|
||||
builder: '@storybook/builder-webpack5',
|
||||
},
|
||||
skipTasks: ['e2e-tests-dev', 'bench'],
|
||||
// TODO: Can be enabled once we re-revert this PR: https://github.com/storybookjs/storybook/pull/24033
|
||||
// TODO: Should be removed after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
|
||||
inDevelopment: true,
|
||||
},
|
||||
'angular-cli/default-ts': {
|
||||
@ -586,7 +586,8 @@ export const merged: TemplateKey[] = [
|
||||
];
|
||||
export const daily: TemplateKey[] = [
|
||||
...merged,
|
||||
'angular-cli/prerelease',
|
||||
// TODO: Should be re-added after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
|
||||
// 'angular-cli/prerelease',
|
||||
'cra/default-js',
|
||||
'react-vite/default-js',
|
||||
'vue3-vite/default-js',
|
||||
|
||||
@ -1,97 +1,97 @@
|
||||
// auto generated file, do not edit
|
||||
export default {
|
||||
'@storybook/addon-a11y': '7.5.0-alpha.2',
|
||||
'@storybook/addon-actions': '7.5.0-alpha.2',
|
||||
'@storybook/addon-backgrounds': '7.5.0-alpha.2',
|
||||
'@storybook/addon-controls': '7.5.0-alpha.2',
|
||||
'@storybook/addon-docs': '7.5.0-alpha.2',
|
||||
'@storybook/addon-essentials': '7.5.0-alpha.2',
|
||||
'@storybook/addon-highlight': '7.5.0-alpha.2',
|
||||
'@storybook/addon-interactions': '7.5.0-alpha.2',
|
||||
'@storybook/addon-jest': '7.5.0-alpha.2',
|
||||
'@storybook/addon-links': '7.5.0-alpha.2',
|
||||
'@storybook/addon-mdx-gfm': '7.5.0-alpha.2',
|
||||
'@storybook/addon-measure': '7.5.0-alpha.2',
|
||||
'@storybook/addon-outline': '7.5.0-alpha.2',
|
||||
'@storybook/addon-themes': '7.5.0-alpha.2',
|
||||
'@storybook/addon-storyshots': '7.5.0-alpha.2',
|
||||
'@storybook/addon-storyshots-puppeteer': '7.5.0-alpha.2',
|
||||
'@storybook/addon-storysource': '7.5.0-alpha.2',
|
||||
'@storybook/addon-toolbars': '7.5.0-alpha.2',
|
||||
'@storybook/addon-viewport': '7.5.0-alpha.2',
|
||||
'@storybook/addons': '7.5.0-alpha.2',
|
||||
'@storybook/angular': '7.5.0-alpha.2',
|
||||
'@storybook/api': '7.5.0-alpha.2',
|
||||
'@storybook/blocks': '7.5.0-alpha.2',
|
||||
'@storybook/builder-manager': '7.5.0-alpha.2',
|
||||
'@storybook/builder-vite': '7.5.0-alpha.2',
|
||||
'@storybook/builder-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/channel-postmessage': '7.5.0-alpha.2',
|
||||
'@storybook/channel-websocket': '7.5.0-alpha.2',
|
||||
'@storybook/channels': '7.5.0-alpha.2',
|
||||
'@storybook/cli': '7.5.0-alpha.2',
|
||||
'@storybook/client-api': '7.5.0-alpha.2',
|
||||
'@storybook/client-logger': '7.5.0-alpha.2',
|
||||
'@storybook/codemod': '7.5.0-alpha.2',
|
||||
'@storybook/components': '7.5.0-alpha.2',
|
||||
'@storybook/core-client': '7.5.0-alpha.2',
|
||||
'@storybook/core-common': '7.5.0-alpha.2',
|
||||
'@storybook/core-events': '7.5.0-alpha.2',
|
||||
'@storybook/core-server': '7.5.0-alpha.2',
|
||||
'@storybook/core-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/csf-plugin': '7.5.0-alpha.2',
|
||||
'@storybook/csf-tools': '7.5.0-alpha.2',
|
||||
'@storybook/docs-tools': '7.5.0-alpha.2',
|
||||
'@storybook/ember': '7.5.0-alpha.2',
|
||||
'@storybook/html': '7.5.0-alpha.2',
|
||||
'@storybook/html-vite': '7.5.0-alpha.2',
|
||||
'@storybook/html-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/instrumenter': '7.5.0-alpha.2',
|
||||
'@storybook/manager': '7.5.0-alpha.2',
|
||||
'@storybook/manager-api': '7.5.0-alpha.2',
|
||||
'@storybook/nextjs': '7.5.0-alpha.2',
|
||||
'@storybook/node-logger': '7.5.0-alpha.2',
|
||||
'@storybook/postinstall': '7.5.0-alpha.2',
|
||||
'@storybook/preact': '7.5.0-alpha.2',
|
||||
'@storybook/preact-vite': '7.5.0-alpha.2',
|
||||
'@storybook/preact-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/preset-create-react-app': '7.5.0-alpha.2',
|
||||
'@storybook/preset-html-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preset-preact-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preset-react-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preset-server-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preset-svelte-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preset-vue-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preset-vue3-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preset-web-components-webpack': '7.5.0-alpha.2',
|
||||
'@storybook/preview': '7.5.0-alpha.2',
|
||||
'@storybook/preview-api': '7.5.0-alpha.2',
|
||||
'@storybook/preview-web': '7.5.0-alpha.2',
|
||||
'@storybook/react': '7.5.0-alpha.2',
|
||||
'@storybook/react-dom-shim': '7.5.0-alpha.2',
|
||||
'@storybook/react-vite': '7.5.0-alpha.2',
|
||||
'@storybook/react-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/router': '7.5.0-alpha.2',
|
||||
'@storybook/server': '7.5.0-alpha.2',
|
||||
'@storybook/server-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/source-loader': '7.5.0-alpha.2',
|
||||
'@storybook/store': '7.5.0-alpha.2',
|
||||
'@storybook/svelte': '7.5.0-alpha.2',
|
||||
'@storybook/svelte-vite': '7.5.0-alpha.2',
|
||||
'@storybook/svelte-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/sveltekit': '7.5.0-alpha.2',
|
||||
'@storybook/telemetry': '7.5.0-alpha.2',
|
||||
'@storybook/theming': '7.5.0-alpha.2',
|
||||
'@storybook/types': '7.5.0-alpha.2',
|
||||
'@storybook/vue': '7.5.0-alpha.2',
|
||||
'@storybook/vue-vite': '7.5.0-alpha.2',
|
||||
'@storybook/vue-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/vue3': '7.5.0-alpha.2',
|
||||
'@storybook/vue3-vite': '7.5.0-alpha.2',
|
||||
'@storybook/vue3-webpack5': '7.5.0-alpha.2',
|
||||
'@storybook/web-components': '7.5.0-alpha.2',
|
||||
'@storybook/web-components-vite': '7.5.0-alpha.2',
|
||||
'@storybook/web-components-webpack5': '7.5.0-alpha.2',
|
||||
sb: '7.5.0-alpha.2',
|
||||
storybook: '7.5.0-alpha.2',
|
||||
'@storybook/addon-a11y': '7.5.0-alpha.3',
|
||||
'@storybook/addon-actions': '7.5.0-alpha.3',
|
||||
'@storybook/addon-backgrounds': '7.5.0-alpha.3',
|
||||
'@storybook/addon-controls': '7.5.0-alpha.3',
|
||||
'@storybook/addon-docs': '7.5.0-alpha.3',
|
||||
'@storybook/addon-essentials': '7.5.0-alpha.3',
|
||||
'@storybook/addon-highlight': '7.5.0-alpha.3',
|
||||
'@storybook/addon-interactions': '7.5.0-alpha.3',
|
||||
'@storybook/addon-jest': '7.5.0-alpha.3',
|
||||
'@storybook/addon-links': '7.5.0-alpha.3',
|
||||
'@storybook/addon-mdx-gfm': '7.5.0-alpha.3',
|
||||
'@storybook/addon-measure': '7.5.0-alpha.3',
|
||||
'@storybook/addon-outline': '7.5.0-alpha.3',
|
||||
'@storybook/addon-themes': '7.5.0-alpha.3',
|
||||
'@storybook/addon-storyshots': '7.5.0-alpha.3',
|
||||
'@storybook/addon-storyshots-puppeteer': '7.5.0-alpha.3',
|
||||
'@storybook/addon-storysource': '7.5.0-alpha.3',
|
||||
'@storybook/addon-toolbars': '7.5.0-alpha.3',
|
||||
'@storybook/addon-viewport': '7.5.0-alpha.3',
|
||||
'@storybook/addons': '7.5.0-alpha.3',
|
||||
'@storybook/angular': '7.5.0-alpha.3',
|
||||
'@storybook/api': '7.5.0-alpha.3',
|
||||
'@storybook/blocks': '7.5.0-alpha.3',
|
||||
'@storybook/builder-manager': '7.5.0-alpha.3',
|
||||
'@storybook/builder-vite': '7.5.0-alpha.3',
|
||||
'@storybook/builder-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/channel-postmessage': '7.5.0-alpha.3',
|
||||
'@storybook/channel-websocket': '7.5.0-alpha.3',
|
||||
'@storybook/channels': '7.5.0-alpha.3',
|
||||
'@storybook/cli': '7.5.0-alpha.3',
|
||||
'@storybook/client-api': '7.5.0-alpha.3',
|
||||
'@storybook/client-logger': '7.5.0-alpha.3',
|
||||
'@storybook/codemod': '7.5.0-alpha.3',
|
||||
'@storybook/components': '7.5.0-alpha.3',
|
||||
'@storybook/core-client': '7.5.0-alpha.3',
|
||||
'@storybook/core-common': '7.5.0-alpha.3',
|
||||
'@storybook/core-events': '7.5.0-alpha.3',
|
||||
'@storybook/core-server': '7.5.0-alpha.3',
|
||||
'@storybook/core-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/csf-plugin': '7.5.0-alpha.3',
|
||||
'@storybook/csf-tools': '7.5.0-alpha.3',
|
||||
'@storybook/docs-tools': '7.5.0-alpha.3',
|
||||
'@storybook/ember': '7.5.0-alpha.3',
|
||||
'@storybook/html': '7.5.0-alpha.3',
|
||||
'@storybook/html-vite': '7.5.0-alpha.3',
|
||||
'@storybook/html-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/instrumenter': '7.5.0-alpha.3',
|
||||
'@storybook/manager': '7.5.0-alpha.3',
|
||||
'@storybook/manager-api': '7.5.0-alpha.3',
|
||||
'@storybook/nextjs': '7.5.0-alpha.3',
|
||||
'@storybook/node-logger': '7.5.0-alpha.3',
|
||||
'@storybook/postinstall': '7.5.0-alpha.3',
|
||||
'@storybook/preact': '7.5.0-alpha.3',
|
||||
'@storybook/preact-vite': '7.5.0-alpha.3',
|
||||
'@storybook/preact-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/preset-create-react-app': '7.5.0-alpha.3',
|
||||
'@storybook/preset-html-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preset-preact-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preset-react-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preset-server-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preset-svelte-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preset-vue-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preset-vue3-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preset-web-components-webpack': '7.5.0-alpha.3',
|
||||
'@storybook/preview': '7.5.0-alpha.3',
|
||||
'@storybook/preview-api': '7.5.0-alpha.3',
|
||||
'@storybook/preview-web': '7.5.0-alpha.3',
|
||||
'@storybook/react': '7.5.0-alpha.3',
|
||||
'@storybook/react-dom-shim': '7.5.0-alpha.3',
|
||||
'@storybook/react-vite': '7.5.0-alpha.3',
|
||||
'@storybook/react-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/router': '7.5.0-alpha.3',
|
||||
'@storybook/server': '7.5.0-alpha.3',
|
||||
'@storybook/server-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/source-loader': '7.5.0-alpha.3',
|
||||
'@storybook/store': '7.5.0-alpha.3',
|
||||
'@storybook/svelte': '7.5.0-alpha.3',
|
||||
'@storybook/svelte-vite': '7.5.0-alpha.3',
|
||||
'@storybook/svelte-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/sveltekit': '7.5.0-alpha.3',
|
||||
'@storybook/telemetry': '7.5.0-alpha.3',
|
||||
'@storybook/theming': '7.5.0-alpha.3',
|
||||
'@storybook/types': '7.5.0-alpha.3',
|
||||
'@storybook/vue': '7.5.0-alpha.3',
|
||||
'@storybook/vue-vite': '7.5.0-alpha.3',
|
||||
'@storybook/vue-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/vue3': '7.5.0-alpha.3',
|
||||
'@storybook/vue3-vite': '7.5.0-alpha.3',
|
||||
'@storybook/vue3-webpack5': '7.5.0-alpha.3',
|
||||
'@storybook/web-components': '7.5.0-alpha.3',
|
||||
'@storybook/web-components-vite': '7.5.0-alpha.3',
|
||||
'@storybook/web-components-webpack5': '7.5.0-alpha.3',
|
||||
sb: '7.5.0-alpha.3',
|
||||
storybook: '7.5.0-alpha.3',
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/client-logger",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/codemod",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "A collection of codemod scripts written with JSCodeshift",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-common",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -54,7 +54,7 @@
|
||||
"chalk": "^4.1.0",
|
||||
"esbuild": "^0.18.0",
|
||||
"esbuild-register": "^3.5.0",
|
||||
"file-system-cache": "2.3.0",
|
||||
"file-system-cache": "^2.4.4",
|
||||
"find-cache-dir": "^3.0.0",
|
||||
"find-up": "^5.0.0",
|
||||
"fs-extra": "^11.1.0",
|
||||
@ -69,6 +69,7 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^11.0.1",
|
||||
"@types/mock-fs": "^4.13.1",
|
||||
"@types/picomatch": "^2.3.0",
|
||||
"mock-fs": "^5.2.0",
|
||||
|
||||
@ -100,7 +100,7 @@ const getConfigInfo = (packageJson: PackageJson, configDir?: string) => {
|
||||
}
|
||||
|
||||
return {
|
||||
configDir,
|
||||
configDir: storybookConfigDir,
|
||||
mainConfig: findConfigFile('main', storybookConfigDir),
|
||||
previewConfig: findConfigFile('preview', storybookConfigDir),
|
||||
managerConfig: findConfigFile('manager', storybookConfigDir),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-events",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Event names used in storybook core",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -328,3 +328,43 @@ export class MissingBuilderError extends StorybookError {
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export class GoogleFontsDownloadError extends StorybookError {
|
||||
readonly category = Category.FRAMEWORK_NEXTJS;
|
||||
|
||||
readonly code = 1;
|
||||
|
||||
public readonly documentation =
|
||||
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#nextjs-font-optimization';
|
||||
|
||||
constructor(public data: { fontFamily: string; url: string }) {
|
||||
super();
|
||||
}
|
||||
|
||||
template() {
|
||||
return dedent`
|
||||
Failed to fetch \`${this.data.fontFamily}\` from Google Fonts with URL: \`${this.data.url}\`
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export class GoogleFontsLoadingError extends StorybookError {
|
||||
readonly category = Category.FRAMEWORK_NEXTJS;
|
||||
|
||||
readonly code = 2;
|
||||
|
||||
public readonly documentation =
|
||||
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#nextjs-font-optimization';
|
||||
|
||||
constructor(public data: { error: unknown | Error; url: string }) {
|
||||
super();
|
||||
}
|
||||
|
||||
template() {
|
||||
return dedent`
|
||||
An error occurred when trying to load Google Fonts with URL \`${this.data.url}\`.
|
||||
|
||||
${this.data.error instanceof Error ? this.data.error.message : ''}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-server",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-webpack",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/csf-plugin",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Enrich CSF files via static analysis",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/csf-tools",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Parse and manipulate CSF and Storybook config files",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/docs-tools",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Shared utility functions for frameworks to implement docs",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/instrumenter",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/manager-api",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Core Storybook Manager API & Context",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -386,30 +386,34 @@ export function useParameter<S>(parameterKey: string, defaultValue?: S) {
|
||||
}
|
||||
|
||||
// cache for taking care of HMR
|
||||
const addonStateCache: {
|
||||
[key: string]: any;
|
||||
} = {};
|
||||
globalThis.STORYBOOK_ADDON_STATE = {};
|
||||
const { STORYBOOK_ADDON_STATE } = globalThis;
|
||||
|
||||
// shared state
|
||||
export function useSharedState<S>(stateId: string, defaultState?: S) {
|
||||
const api = useStorybookApi();
|
||||
const existingState = api.getAddonState<S>(stateId) || addonStateCache[stateId];
|
||||
const existingState = api.getAddonState<S>(stateId) || STORYBOOK_ADDON_STATE[stateId];
|
||||
const state = orDefault<S>(
|
||||
existingState,
|
||||
addonStateCache[stateId] ? addonStateCache[stateId] : defaultState
|
||||
STORYBOOK_ADDON_STATE[stateId] ? STORYBOOK_ADDON_STATE[stateId] : defaultState
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (api.getAddonState(stateId) === undefined && api.getAddonState(stateId) !== state) {
|
||||
api.setAddonState<S>(stateId, state).then((s) => {
|
||||
addonStateCache[stateId] = s;
|
||||
});
|
||||
}
|
||||
}, [api]);
|
||||
let quicksync = false;
|
||||
|
||||
const setState = (s: S | API_StateMerger<S>, options?: Options) => {
|
||||
const result = api.setAddonState<S>(stateId, s, options);
|
||||
addonStateCache[stateId] = result;
|
||||
if (state === defaultState && defaultState !== undefined) {
|
||||
STORYBOOK_ADDON_STATE[stateId] = defaultState;
|
||||
quicksync = true;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (quicksync) {
|
||||
api.setAddonState<S>(stateId, defaultState);
|
||||
}
|
||||
});
|
||||
|
||||
const setState = async (s: S | API_StateMerger<S>, options?: Options) => {
|
||||
const result = await api.setAddonState<S>(stateId, s, options);
|
||||
STORYBOOK_ADDON_STATE[stateId] = result;
|
||||
return result;
|
||||
};
|
||||
const allListeners = useMemo(() => {
|
||||
@ -421,17 +425,17 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
|
||||
[SET_STORIES]: async () => {
|
||||
const currentState = api.getAddonState(stateId);
|
||||
if (currentState) {
|
||||
addonStateCache[stateId] = currentState;
|
||||
STORYBOOK_ADDON_STATE[stateId] = currentState;
|
||||
api.emit(`${SHARED_STATE_SET}-manager-${stateId}`, currentState);
|
||||
} else if (addonStateCache[stateId]) {
|
||||
} else if (STORYBOOK_ADDON_STATE[stateId]) {
|
||||
// this happens when HMR
|
||||
await setState(addonStateCache[stateId]);
|
||||
api.emit(`${SHARED_STATE_SET}-manager-${stateId}`, addonStateCache[stateId]);
|
||||
await setState(STORYBOOK_ADDON_STATE[stateId]);
|
||||
api.emit(`${SHARED_STATE_SET}-manager-${stateId}`, STORYBOOK_ADDON_STATE[stateId]);
|
||||
} else if (defaultState !== undefined) {
|
||||
// if not HMR, yet the defaults are from the manager
|
||||
await setState(defaultState);
|
||||
// initialize addonStateCache after first load, so its available for subsequent HMR
|
||||
addonStateCache[stateId] = defaultState;
|
||||
// initialize STORYBOOK_ADDON_STATE after first load, so its available for subsequent HMR
|
||||
STORYBOOK_ADDON_STATE[stateId] = defaultState;
|
||||
api.emit(`${SHARED_STATE_SET}-manager-${stateId}`, defaultState);
|
||||
}
|
||||
},
|
||||
|
||||
@ -146,7 +146,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ provider, store, fullAPI }) =
|
||||
.then(() => api.getAddonState(addonId));
|
||||
},
|
||||
getAddonState: (addonId) => {
|
||||
return store.getState().addons[addonId];
|
||||
return store.getState().addons[addonId] || globalThis?.STORYBOOK_ADDON_STATE[addonId];
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
1
code/lib/manager-api/src/typings.d.ts
vendored
1
code/lib/manager-api/src/typings.d.ts
vendored
@ -6,3 +6,4 @@ declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
|
||||
declare var REFS: any;
|
||||
declare var VERSIONCHECK: any;
|
||||
declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
|
||||
declare var STORYBOOK_ADDON_STATE: Record<string, any>;
|
||||
|
||||
@ -1 +1 @@
|
||||
export const version = '7.5.0-alpha.2';
|
||||
export const version = '7.5.0-alpha.3';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/node-logger",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/postinstall",
|
||||
"version": "7.5.0-alpha.2",
|
||||
"version": "7.5.0-alpha.3",
|
||||
"description": "Storybook addons postinstall utilities",
|
||||
"keywords": [
|
||||
"api",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user