mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 12:21:05 +08:00
Merge pull request #30924 from storybookjs/norbert/remove-addon-essentials
Essentials: Move remaining addons into core
This commit is contained in:
Valentin Palkovic
GitHub
commit
224f4677f7
28
CODEOWNERS
28
CODEOWNERS
@ -14,21 +14,12 @@
|
||||
|
||||
# Addons
|
||||
# /code/addons/a11y/ @ndelangen @yannbf
|
||||
# /code/addons/actions/ @ndelangen @yannbf
|
||||
# /code/addons/backgrounds/ @yannbf @ndelangen
|
||||
# /code/addons/controls/ @kasperpeulen @ndelangen
|
||||
# /code/addons/docs/ @JReinhold @kasperpeulen
|
||||
# /code/addons/essentials/ @valentinpalkovic @ndelangen
|
||||
# /code/addons/gfm/ @ndelangen @valentinpalkovic
|
||||
# /code/addons/highlight/ @yannbf @valentinpalkovic
|
||||
# /code/addons/jest/ @ndelangen
|
||||
# /code/addons/links/ @yannbf @JReinhold
|
||||
# /code/addons/measure/ @yannbf @valentinpalkovic
|
||||
# /code/addons/outline/ @yannbf @valentinpalkovic
|
||||
# /code/addons/storysource/ @ndelangen
|
||||
# /code/addons/themes/ @JReinhold @yannbf
|
||||
# /code/addons/toolbars/ @ndelangen @JReinhold
|
||||
# /code/addons/viewport/ @yannbf @ndelangen
|
||||
|
||||
# Builder
|
||||
# /code/builders/builder-manager/ @ndelangen @valentinpalkovic
|
||||
@ -50,28 +41,15 @@
|
||||
# /code/frameworks/web-components-webpack5/ @kasperpeulen @JReinhold
|
||||
|
||||
# Lib
|
||||
# /code/lib/channels/ @ndelangen @kasperpeulen
|
||||
# /code/lib/cli/ @yannbf @valentinpalkovic @ndelangen
|
||||
# /code/lib/cli-sb/ @yannbf @valentinpalkovic @ndelangen
|
||||
# /code/lib/cli-storybook/ @yannbf @valentinpalkovic @ndelangen
|
||||
# /code/lib/client-logger/ @ndelangen @yannbf
|
||||
# /code/lib/codemod/ @kasperpeulen @ndelangen
|
||||
# /code/lib/core-common/ @ndelangen @yannbf
|
||||
# /code/lib/core-events/ @ndelangen @kasperpeulen
|
||||
# /code/lib/core-server/ @ndelangen @JReinhold @tmeasday @shilman
|
||||
# /code/lib/core-webpack/ @valentinpalkovic @ndelangen
|
||||
# /code/lib/csf-plugin/ @ndelangen @valentinpalkovic
|
||||
# /code/lib/csf-tools/ @kasperpeulen @shilman
|
||||
# /code/lib/docs-tools/ @JReinhold @shilman
|
||||
# /code/lib/instrumenter/ @yannbf @kasperpeulen
|
||||
# /code/lib/manager-api/ @ndelangen @valentinpalkovic @kasperpeulen
|
||||
# /code/lib/node-logger/ @yannbf @ndelangen
|
||||
# /code/lib/preview/ @ndelangen @kasperpeulen
|
||||
# /code/lib/preview-api/ @yannbf @ndelangen @tmeasday
|
||||
# /code/lib/react-dom-shim/ @ndelangen @valentinpalkovic @tmeasday
|
||||
# /code/lib/router/ @ndelangen @JReinhold
|
||||
# /code/lib/telemetry/ @shilman @yannbf @ndelangen
|
||||
# /code/lib/theming/ @cdedreuille @ndelangen @JReinhold
|
||||
# /code/lib/types/ @kasperpeulen @ndelangen
|
||||
|
||||
# Presets
|
||||
@ -85,11 +63,5 @@
|
||||
# /code/renderers/vue3/ @kasperpeulen @JReinhold
|
||||
# /code/renderers/web-components/ @kasperpeulen @JReinhold
|
||||
|
||||
# UI
|
||||
# /code/ui/.storybook/ @JReinhold @cdedreuille
|
||||
# /code/ui/blocks/ @JReinhold @cdedreuille
|
||||
# /code/ui/components/ @cdedreuille @JReinhold
|
||||
# /code/ui/manager/ @ndelangen @JReinhold @cdedreuille @tmeasday
|
||||
|
||||
# E2E
|
||||
# /code/e2e-tests/ @yannbf @valentinpalkovic
|
||||
|
||||
@ -43,10 +43,6 @@ const config = defineMain({
|
||||
directory: '../addons/a11y/template/stories',
|
||||
titlePrefix: 'addons/accessibility',
|
||||
},
|
||||
{
|
||||
directory: '../addons/backgrounds/template/stories',
|
||||
titlePrefix: 'addons/backgrounds',
|
||||
},
|
||||
{
|
||||
directory: '../addons/docs/template/stories',
|
||||
titlePrefix: 'addons/docs',
|
||||
@ -75,7 +71,6 @@ const config = defineMain({
|
||||
addons: [
|
||||
'@storybook/addon-themes',
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-designs',
|
||||
'@storybook/addon-test',
|
||||
|
||||
@ -13,7 +13,6 @@ import { definePreview } from '@storybook/react-vite';
|
||||
|
||||
import addonA11y from '@storybook/addon-a11y';
|
||||
import addonDocs from '@storybook/addon-docs';
|
||||
import addonEssentials from '@storybook/addon-essentials';
|
||||
import addonTest from '@storybook/addon-test';
|
||||
import addonThemes from '@storybook/addon-themes';
|
||||
|
||||
@ -370,14 +369,7 @@ const parameters = {
|
||||
};
|
||||
|
||||
export default definePreview({
|
||||
addons: [
|
||||
addonDocs(),
|
||||
addonThemes(),
|
||||
addonEssentials(),
|
||||
addonA11y(),
|
||||
addonTest(),
|
||||
templatePreview,
|
||||
],
|
||||
addons: [addonDocs(), addonThemes(), addonA11y(), addonTest(), templatePreview],
|
||||
decorators,
|
||||
loaders,
|
||||
tags: ['test', 'vitest'],
|
||||
|
||||
@ -66,7 +66,6 @@
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "workspace:*",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"axe-core": "^4.2.0"
|
||||
},
|
||||
|
||||
@ -7,8 +7,6 @@ import {
|
||||
type StoryFinishedPayload,
|
||||
} from 'storybook/internal/core-events';
|
||||
|
||||
import { HIGHLIGHT, RESET_HIGHLIGHT, SCROLL_INTO_VIEW } from '@storybook/addon-highlight';
|
||||
|
||||
import type { AxeResults, Result } from 'axe-core';
|
||||
import {
|
||||
experimental_getStatusStore,
|
||||
@ -23,6 +21,11 @@ import {
|
||||
import type { Report } from 'storybook/preview-api';
|
||||
import { convert, themes } from 'storybook/theming';
|
||||
|
||||
import {
|
||||
HIGHLIGHT,
|
||||
RESET_HIGHLIGHT,
|
||||
SCROLL_INTO_VIEW,
|
||||
} from '../../../../core/src/highlight/constants';
|
||||
import {
|
||||
ADDON_ID,
|
||||
EVENTS,
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
# Storybook Addon Backgrounds
|
||||
|
||||
Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-backgrounds
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
export default {
|
||||
addons: ['@storybook/addon-backgrounds'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/backgrounds).
|
||||
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,103 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "9.0.0-alpha.12",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"background",
|
||||
"react",
|
||||
"storybook",
|
||||
"essentials",
|
||||
"design"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/backgrounds"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "jbaxleyiii",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./register": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"preview": [
|
||||
"dist/preview.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/global": "^5.0.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/icons": "^1.4.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/preview';
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-backgrounds",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import * as addonAnnotations from './preview';
|
||||
|
||||
export default () => definePreview(addonAnnotations);
|
||||
|
||||
export type { BackgroundsParameters, BackgroundsGlobals } from './types';
|
||||
@ -1,20 +0,0 @@
|
||||
import { PARAM_KEY as KEY } from './constants';
|
||||
import { withBackgroundAndGrid } from './decorator';
|
||||
import type { BackgroundsParameters, GlobalState } from './types';
|
||||
|
||||
export const decorators = [withBackgroundAndGrid];
|
||||
|
||||
export const parameters = {
|
||||
[KEY]: {
|
||||
grid: {
|
||||
cellSize: 20,
|
||||
opacity: 0.5,
|
||||
cellAmount: 5,
|
||||
},
|
||||
disable: false,
|
||||
},
|
||||
} satisfies Partial<BackgroundsParameters>;
|
||||
|
||||
export const initialGlobals: Record<string, GlobalState> = {
|
||||
[KEY]: { value: undefined, grid: false },
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -1,13 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
|
||||
|
||||
import { Source, type SourceParameters } from '@storybook/blocks';
|
||||
|
||||
import { addons, types, useChannel, useParameter } from 'storybook/manager-api';
|
||||
import { ignoreSsrWarning, styled, useTheme } from 'storybook/theming';
|
||||
|
||||
import {
|
||||
ADDON_ID,
|
||||
PANEL_ID,
|
||||
PARAM_KEY,
|
||||
SNIPPET_RENDERED,
|
||||
} from '../../../core/src/docs-tools/shared';
|
||||
import type { SourceParameters } from '../../../lib/blocks/src';
|
||||
import { Source } from '../../../lib/blocks/src/components/Source';
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'Code',
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
# Storybook Essentials
|
||||
|
||||
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
|
||||
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) for all of the officially supported frameworks.
|
||||
|
||||
## Contents
|
||||
|
||||
Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
|
||||
|
||||
- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds)
|
||||
- [Measure](https://github.com/storybookjs/storybook/tree/next/code/addons/measure)
|
||||
- [Outline](https://github.com/storybookjs/storybook/tree/next/code/addons/outline)
|
||||
|
||||
## Installation
|
||||
|
||||
You can add Essentials to your project with:
|
||||
|
||||
```
|
||||
npm install --save-dev @storybook/addon-essentials
|
||||
```
|
||||
|
||||
And then add the following line to your `.storybook/main.ts`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Essentials is "zero config." That means that comes with a recommended configuration out of the box.
|
||||
|
||||
If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `main.ts` on startup and if detects one of its addons is already configured in the `addons` field, it will skip that addon's configuration entirely.
|
||||
|
||||
## Disabling addons
|
||||
|
||||
You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.ts`:
|
||||
|
||||
```js
|
||||
export default {
|
||||
addons: [{
|
||||
name: '@storybook/addon-essentials',
|
||||
options: {
|
||||
<addon-key>: false,
|
||||
}
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
Valid addon keys include: `backgrounds`, `measure`, `outline`.
|
||||
|
||||
Note: The `docs` addon was previously part of essentials but is now a separate package. If you need documentation features, please install `@storybook/addon-docs` separately; see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-addon-moved-out-of-addon-essentials)
|
||||
@ -1,123 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "9.0.0-alpha.12",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"essentials",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/essentials",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/essentials"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./entry-preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./backgrounds/preview": {
|
||||
"types": "./dist/backgrounds/preview.d.ts",
|
||||
"import": "./dist/backgrounds/preview.mjs",
|
||||
"require": "./dist/backgrounds/preview.js"
|
||||
},
|
||||
"./backgrounds/manager": "./dist/backgrounds/manager.js",
|
||||
"./highlight/preview": {
|
||||
"types": "./dist/highlight/preview.d.ts",
|
||||
"import": "./dist/highlight/preview.mjs",
|
||||
"require": "./dist/highlight/preview.js"
|
||||
},
|
||||
"./measure/preview": {
|
||||
"types": "./dist/measure/preview.d.ts",
|
||||
"import": "./dist/measure/preview.mjs",
|
||||
"require": "./dist/measure/preview.js"
|
||||
},
|
||||
"./measure/manager": "./dist/measure/manager.js",
|
||||
"./outline/preview": {
|
||||
"types": "./dist/outline/preview.d.ts",
|
||||
"import": "./dist/outline/preview.mjs",
|
||||
"require": "./dist/outline/preview.js"
|
||||
},
|
||||
"./outline/manager": "./dist/outline/manager.js",
|
||||
"./preset": "./dist/preset.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"entry-preview": [
|
||||
"dist/preview.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-backgrounds": "workspace:*",
|
||||
"@storybook/addon-highlight": "workspace:*",
|
||||
"@storybook/addon-measure": "workspace:*",
|
||||
"@storybook/addon-outline": "workspace:*",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"nodeEntries": [
|
||||
"./src/preset.ts"
|
||||
],
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"entries": [],
|
||||
"managerEntries": [
|
||||
"./src/backgrounds/manager.ts",
|
||||
"./src/measure/manager.ts",
|
||||
"./src/outline/manager.ts"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts",
|
||||
"./src/backgrounds/preview.ts",
|
||||
"./src/highlight/preview.ts",
|
||||
"./src/measure/preview.ts",
|
||||
"./src/outline/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/preset');
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-essentials",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
// @ts-expect-error (no types)
|
||||
export * from '@storybook/addon-backgrounds/manager';
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-backgrounds/preview';
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-highlight/preview';
|
||||
@ -1,5 +0,0 @@
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import addonAnnotations from './preview';
|
||||
|
||||
export default () => definePreview(addonAnnotations);
|
||||
@ -1,2 +0,0 @@
|
||||
// @ts-expect-error (no types needed for this)
|
||||
export * from '@storybook/addon-measure/manager';
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-measure/preview';
|
||||
@ -1,2 +0,0 @@
|
||||
// @ts-expect-error (no types)
|
||||
export * from '@storybook/addon-outline/manager';
|
||||
@ -1 +0,0 @@
|
||||
export * from '@storybook/addon-outline/preview';
|
||||
@ -1,62 +0,0 @@
|
||||
import { isAbsolute, join } from 'node:path';
|
||||
|
||||
import { serverRequire } from 'storybook/internal/common';
|
||||
import { logger } from 'storybook/internal/node-logger';
|
||||
|
||||
interface PresetOptions {
|
||||
/**
|
||||
* Allow to use @storybook/addon-backgrounds
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-backgrounds
|
||||
*/
|
||||
backgrounds?: boolean;
|
||||
configDir: string;
|
||||
/**
|
||||
* Allow to use @storybook/addon-measure
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-measure
|
||||
*/
|
||||
measure?: boolean;
|
||||
/**
|
||||
* Allow to use @storybook/addon-outline
|
||||
*
|
||||
* @default true
|
||||
* @see https://storybook.js.org/addons/@storybook/addon-outline
|
||||
*/
|
||||
outline?: boolean;
|
||||
themes?: boolean;
|
||||
}
|
||||
|
||||
const requireMain = (configDir: string) => {
|
||||
const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
|
||||
const mainFile = join(absoluteConfigDir, 'main');
|
||||
|
||||
return serverRequire(mainFile) ?? {};
|
||||
};
|
||||
|
||||
export function addons(options: PresetOptions) {
|
||||
const checkInstalled = (addonName: string, main: any) => {
|
||||
const addon = `@storybook/addon-${addonName}`;
|
||||
const existingAddon = main.addons?.find((entry: string | { name: string }) => {
|
||||
const name = typeof entry === 'string' ? entry : entry.name;
|
||||
return name?.startsWith(addon);
|
||||
});
|
||||
if (existingAddon) {
|
||||
logger.info(`Found existing addon ${JSON.stringify(existingAddon)}, skipping.`);
|
||||
}
|
||||
return !!existingAddon;
|
||||
};
|
||||
|
||||
const main = requireMain(options.configDir);
|
||||
|
||||
// NOTE: The order of these addons is important.
|
||||
return ['backgrounds', 'measure', 'outline', 'highlight']
|
||||
.filter((key) => (options as any)[key] !== false)
|
||||
.filter((addon) => !checkInstalled(addon, main))
|
||||
.map((addon) => {
|
||||
// We point to the re-export from addon-essentials to support yarn pnp and pnpm.
|
||||
return `@storybook/addon-essentials/${addon}`;
|
||||
});
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import backgroundsAddon from '@storybook/addon-backgrounds';
|
||||
import highlightAddon from '@storybook/addon-highlight';
|
||||
import measureAddon from '@storybook/addon-measure';
|
||||
import outlineAddon from '@storybook/addon-outline';
|
||||
|
||||
import { composeConfigs } from 'storybook/preview-api';
|
||||
|
||||
export default composeConfigs([
|
||||
backgroundsAddon(),
|
||||
measureAddon(),
|
||||
outlineAddon(),
|
||||
highlightAddon(),
|
||||
]);
|
||||
@ -1,10 +0,0 @@
|
||||
import type { BackgroundsParameters } from '@storybook/addon-backgrounds';
|
||||
import type { HighlightParameters } from '@storybook/addon-highlight';
|
||||
import type { MeasureParameters } from '@storybook/addon-measure';
|
||||
import type { OutlineParameters } from '@storybook/addon-outline';
|
||||
|
||||
export interface EssentialsParameters
|
||||
extends BackgroundsParameters,
|
||||
HighlightParameters,
|
||||
MeasureParameters,
|
||||
OutlineParameters {}
|
||||
1
code/addons/essentials/src/typings.d.ts
vendored
1
code/addons/essentials/src/typings.d.ts
vendored
@ -1 +0,0 @@
|
||||
declare module 'fs';
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -1,139 +0,0 @@
|
||||
# Storybook Addon Highlight
|
||||
|
||||
Storybook addon allows for highlighting specific DOM nodes within your story.
|
||||
|
||||
Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
|
||||
|
||||
yarn:
|
||||
|
||||
```sh
|
||||
yarn add --dev @storybook/addon-highlight
|
||||
```
|
||||
|
||||
npm:
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-highlight --save-dev
|
||||
```
|
||||
|
||||
pnpm:
|
||||
|
||||
```sh
|
||||
pnpm add --save-dev @storybook/addon-highlight
|
||||
```
|
||||
|
||||
Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js|ts`:
|
||||
|
||||
```ts
|
||||
// .storybook/main.ts
|
||||
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
|
||||
import type { StorybookConfig } from '@storybook/your-framework';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
addons: ['@storybook/addon-highlight'],
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
|
||||
### Highlighting DOM Elements
|
||||
|
||||
Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight.
|
||||
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { useChannel } from '@storybook/preview-api';
|
||||
import { HIGHLIGHT } from '@storybook/addon-highlight';
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
const meta: Meta<typeof MyComponent> = {
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MyComponent>;
|
||||
|
||||
export const Highlighted: Story = {
|
||||
decorators: [
|
||||
(storyFn) => {
|
||||
const emit = useChannel({});
|
||||
emit(HIGHLIGHT, {
|
||||
elements: ['.title', '.subtitle'],
|
||||
});
|
||||
return storyFn();
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Reset highlighted elements
|
||||
|
||||
Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
|
||||
|
||||
```ts
|
||||
// MyComponent.stories.ts|tsx
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { useChannel } from '@storybook/preview-api';
|
||||
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
const meta: Meta<typeof MyComponent> = {
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MyComponent>;
|
||||
|
||||
export const ResetHighlight: Story = {
|
||||
decorators: [
|
||||
(storyFn) => {
|
||||
const emit = useChannel({});
|
||||
emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
|
||||
emit(HIGHLIGHT, {
|
||||
elements: ['header', 'section', 'footer'],
|
||||
});
|
||||
return storyFn();
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Customize style
|
||||
|
||||
The addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:
|
||||
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { useChannel } from '@storybook/preview-api';
|
||||
import { HIGHLIGHT } from '@storybook/addon-highlight';
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
const meta: Meta<typeof MyComponent> = {
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MyComponent>;
|
||||
|
||||
export const StyledHighlight: Story = {
|
||||
decorators: [
|
||||
(storyFn) => {
|
||||
const emit = useChannel({});
|
||||
emit(HIGHLIGHT, {
|
||||
elements: ['.title', '.subtitle'],
|
||||
color: 'red',
|
||||
style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
|
||||
});
|
||||
return storyFn();
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -1,93 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "9.0.0-alpha.12",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
"essentials",
|
||||
"style",
|
||||
"appearance"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/highlight",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/highlight"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "winkerVSbecks",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"preview": [
|
||||
"dist/preview.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/global": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
],
|
||||
"icon": "https://user-images.githubusercontent.com/42671/162045505-9d06fe2e-8fcb-4c41-9486-e0553bce10cc.png"
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/preview';
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-highlight",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,104 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "9.0.0-alpha.12",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
"essentials",
|
||||
"style",
|
||||
"CSS",
|
||||
"design"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/measure",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/measure"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "winkerVSbecks",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./register": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"manager": [
|
||||
"dist/manager.d.ts"
|
||||
],
|
||||
"preview": [
|
||||
"dist/preview.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/global": "^5.0.0",
|
||||
"tiny-invariant": "^1.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/icons": "^1.4.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
],
|
||||
"icon": "https://user-images.githubusercontent.com/42671/119589951-dbcd9600-bda1-11eb-9227-078f3cfc1e74.png"
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/preview';
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-measure",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -42,7 +42,6 @@ const config = {
|
||||
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-essentials",
|
||||
- "@storybook/addon-onboarding"
|
||||
],
|
||||
};
|
||||
|
||||
@ -1 +0,0 @@
|
||||
import './dist/manager';
|
||||
@ -1,104 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "9.0.0-alpha.12",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
"essentials",
|
||||
"outline",
|
||||
"css",
|
||||
"layout",
|
||||
"debug",
|
||||
"storybook-addon",
|
||||
"style"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/outline",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/addons/outline"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "winkerVSbecks",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preview": {
|
||||
"types": "./dist/preview.d.ts",
|
||||
"import": "./dist/preview.mjs",
|
||||
"require": "./dist/preview.js"
|
||||
},
|
||||
"./manager": "./dist/manager.js",
|
||||
"./register": "./dist/manager.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": [
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"preview": [
|
||||
"dist/preview.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/global": "^5.0.0",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/icons": "^1.4.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"exportEntries": [
|
||||
"./src/index.ts"
|
||||
],
|
||||
"managerEntries": [
|
||||
"./src/manager.tsx"
|
||||
],
|
||||
"previewEntries": [
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
],
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991674-48355c80-3c7c-11eb-9686-f684e755fcdd.png"
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/preview';
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "addon-outline",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
||||
@ -16,17 +16,9 @@ const INCLUDE_CANDIDATES = [
|
||||
'@emotion/styled',
|
||||
'@jridgewell/sourcemap-codec',
|
||||
'@storybook/addon-a11y/preview',
|
||||
'@storybook/addon-backgrounds/preview',
|
||||
'@storybook/addon-designs/blocks',
|
||||
'@storybook/addon-docs/preview',
|
||||
'@storybook/addon-essentials/backgrounds/preview',
|
||||
'@storybook/addon-essentials/highlight/preview',
|
||||
'@storybook/addon-essentials/measure/preview',
|
||||
'@storybook/addon-essentials/outline/preview',
|
||||
'@storybook/addon-highlight/preview',
|
||||
'@storybook/addon-links/preview',
|
||||
'@storybook/addon-measure/preview',
|
||||
'@storybook/addon-outline/preview',
|
||||
'@storybook/addon-themes',
|
||||
'@storybook/addon-themes/preview',
|
||||
'@storybook/blocks',
|
||||
|
||||
|
Before Width: | Height: | Size: 465 KiB After Width: | Height: | Size: 465 KiB |
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 187 KiB |
@ -83,6 +83,81 @@
|
||||
"import": "./dist/core-server/presets/common-override-preset.js",
|
||||
"require": "./dist/core-server/presets/common-override-preset.cjs"
|
||||
},
|
||||
"./internal/backgrounds": {
|
||||
"types": "./dist/backgrounds/index.d.ts",
|
||||
"import": "./dist/backgrounds/index.js",
|
||||
"require": "./dist/backgrounds/index.cjs"
|
||||
},
|
||||
"./backgrounds": {
|
||||
"types": "./dist/backgrounds/index.d.ts",
|
||||
"import": "./dist/backgrounds/index.js",
|
||||
"require": "./dist/backgrounds/index.cjs"
|
||||
},
|
||||
"./internal/backgrounds/preview": {
|
||||
"types": "./dist/backgrounds/preview.d.ts",
|
||||
"import": "./dist/backgrounds/preview.js",
|
||||
"require": "./dist/backgrounds/preview.cjs"
|
||||
},
|
||||
"./backgrounds/preview": {
|
||||
"types": "./dist/backgrounds/preview.d.ts",
|
||||
"import": "./dist/backgrounds/preview.js",
|
||||
"require": "./dist/backgrounds/preview.cjs"
|
||||
},
|
||||
"./internal/measure": {
|
||||
"types": "./dist/measure/index.d.ts",
|
||||
"import": "./dist/measure/index.js",
|
||||
"require": "./dist/measure/index.cjs"
|
||||
},
|
||||
"./measure": {
|
||||
"types": "./dist/measure/index.d.ts",
|
||||
"import": "./dist/measure/index.js",
|
||||
"require": "./dist/measure/index.cjs"
|
||||
},
|
||||
"./internal/measure/preview": {
|
||||
"types": "./dist/measure/preview.d.ts",
|
||||
"import": "./dist/measure/preview.js",
|
||||
"require": "./dist/measure/preview.cjs"
|
||||
},
|
||||
"./measure/preview": {
|
||||
"types": "./dist/measure/preview.d.ts",
|
||||
"import": "./dist/measure/preview.js",
|
||||
"require": "./dist/measure/preview.cjs"
|
||||
},
|
||||
"./internal/outline": {
|
||||
"types": "./dist/outline/index.d.ts",
|
||||
"import": "./dist/outline/index.js",
|
||||
"require": "./dist/outline/index.cjs"
|
||||
},
|
||||
"./outline": {
|
||||
"types": "./dist/outline/index.d.ts",
|
||||
"import": "./dist/outline/index.js",
|
||||
"require": "./dist/outline/index.cjs"
|
||||
},
|
||||
"./internal/outline/preview": {
|
||||
"types": "./dist/outline/preview.d.ts",
|
||||
"import": "./dist/outline/preview.js",
|
||||
"require": "./dist/outline/preview.cjs"
|
||||
},
|
||||
"./outline/preview": {
|
||||
"types": "./dist/outline/preview.d.ts",
|
||||
"import": "./dist/outline/preview.js",
|
||||
"require": "./dist/outline/preview.cjs"
|
||||
},
|
||||
"./internal/highlight": {
|
||||
"types": "./dist/highlight/index.d.ts",
|
||||
"import": "./dist/highlight/index.js",
|
||||
"require": "./dist/highlight/index.cjs"
|
||||
},
|
||||
"./internal/highlight/preview": {
|
||||
"types": "./dist/highlight/preview.d.ts",
|
||||
"import": "./dist/highlight/preview.js",
|
||||
"require": "./dist/highlight/preview.cjs"
|
||||
},
|
||||
"./highlight/preview": {
|
||||
"types": "./dist/highlight/preview.d.ts",
|
||||
"import": "./dist/highlight/preview.js",
|
||||
"require": "./dist/highlight/preview.cjs"
|
||||
},
|
||||
"./internal/actions": {
|
||||
"types": "./dist/actions/index.d.ts",
|
||||
"import": "./dist/actions/index.js",
|
||||
@ -103,12 +178,6 @@
|
||||
"import": "./dist/actions/preview.js",
|
||||
"require": "./dist/actions/preview.cjs"
|
||||
},
|
||||
"./internal/actions/manager": {
|
||||
"import": "./dist/actions/manager.js"
|
||||
},
|
||||
"./actions/manager": {
|
||||
"import": "./dist/actions/manager.js"
|
||||
},
|
||||
"./internal/actions/decorator": {
|
||||
"types": "./dist/actions/decorator.d.ts",
|
||||
"import": "./dist/actions/decorator.js"
|
||||
@ -127,9 +196,6 @@
|
||||
"import": "./dist/component-testing/preview.js",
|
||||
"require": "./dist/component-testing/preview.cjs"
|
||||
},
|
||||
"./internal/component-testing/manager": {
|
||||
"import": "./dist/component-testing/manager.js"
|
||||
},
|
||||
"./internal/viewport": {
|
||||
"types": "./dist/viewport/index.d.ts",
|
||||
"import": "./dist/viewport/index.js",
|
||||
@ -150,9 +216,6 @@
|
||||
"import": "./dist/viewport/preview.js",
|
||||
"require": "./dist/viewport/preview.cjs"
|
||||
},
|
||||
"./internal/viewport/manager": {
|
||||
"import": "./dist/viewport/manager.js"
|
||||
},
|
||||
"./internal/controls": {
|
||||
"types": "./dist/controls/index.d.ts",
|
||||
"import": "./dist/controls/index.js",
|
||||
@ -163,9 +226,6 @@
|
||||
"import": "./dist/controls/preview.js",
|
||||
"require": "./dist/controls/preview.cjs"
|
||||
},
|
||||
"./internal/controls/manager": {
|
||||
"import": "./dist/controls/manager.js"
|
||||
},
|
||||
"./internal/controls/decorator": {
|
||||
"types": "./dist/controls/decorator.d.ts",
|
||||
"import": "./dist/controls/decorator.js"
|
||||
@ -365,6 +425,51 @@
|
||||
"internal/core-server": [
|
||||
"./dist/core-server/index.d.ts"
|
||||
],
|
||||
"internal/backgrounds": [
|
||||
"./dist/backgrounds/index.d.ts"
|
||||
],
|
||||
"backgrounds": [
|
||||
"./dist/backgrounds/index.d.ts"
|
||||
],
|
||||
"internal/backgrounds/preview": [
|
||||
"./dist/backgrounds/preview.d.ts"
|
||||
],
|
||||
"backgrounds/preview": [
|
||||
"./dist/backgrounds/preview.d.ts"
|
||||
],
|
||||
"internal/measure": [
|
||||
"./dist/measure/index.d.ts"
|
||||
],
|
||||
"measure": [
|
||||
"./dist/measure/index.d.ts"
|
||||
],
|
||||
"internal/measure/preview": [
|
||||
"./dist/measure/preview.d.ts"
|
||||
],
|
||||
"measure/preview": [
|
||||
"./dist/measure/preview.d.ts"
|
||||
],
|
||||
"internal/outline": [
|
||||
"./dist/outline/index.d.ts"
|
||||
],
|
||||
"outline": [
|
||||
"./dist/outline/index.d.ts"
|
||||
],
|
||||
"internal/outline/preview": [
|
||||
"./dist/outline/preview.d.ts"
|
||||
],
|
||||
"outline/preview": [
|
||||
"./dist/outline/preview.d.ts"
|
||||
],
|
||||
"internal/highlight": [
|
||||
"./dist/highlight/index.d.ts"
|
||||
],
|
||||
"internal/highlight/preview": [
|
||||
"./dist/highlight/preview.d.ts"
|
||||
],
|
||||
"highlight/preview": [
|
||||
"./dist/highlight/preview.d.ts"
|
||||
],
|
||||
"internal/actions": [
|
||||
"./dist/actions/index.d.ts"
|
||||
],
|
||||
|
||||
@ -27,9 +27,20 @@ async function run() {
|
||||
'storybook/test/spy',
|
||||
'storybook/test/preview',
|
||||
|
||||
'storybook/measure',
|
||||
'storybook/measure/preview',
|
||||
|
||||
'storybook/highlight',
|
||||
'storybook/highlight/preview',
|
||||
|
||||
'storybook/outline',
|
||||
'storybook/outline/preview',
|
||||
|
||||
'storybook/backgrounds',
|
||||
'storybook/backgrounds/preview',
|
||||
|
||||
'storybook/actions',
|
||||
'storybook/actions/preview',
|
||||
'storybook/actions/manager',
|
||||
'storybook/actions/decorator',
|
||||
|
||||
'storybook/viewport',
|
||||
@ -41,7 +52,6 @@ async function run() {
|
||||
'storybook/internal/common',
|
||||
'storybook/internal/component-testing',
|
||||
'storybook/internal/component-testing/preview',
|
||||
'storybook/internal/component-testing/manager',
|
||||
'storybook/internal/components',
|
||||
'storybook/internal/core-events',
|
||||
'storybook/internal/core-server',
|
||||
|
||||
@ -14,24 +14,35 @@ export const getEntries = (cwd: string) => {
|
||||
|
||||
define('src/core-server/index.ts', ['node'], true, ['react']),
|
||||
define('src/core-server/presets/common-preset.ts', ['node'], false),
|
||||
define('src/core-server/presets/common-manager.ts', ['browser'], false),
|
||||
define('src/core-server/presets/common-manager.ts', ['browser'], false, [
|
||||
'react',
|
||||
'@storybook/icons',
|
||||
]),
|
||||
define('src/core-server/presets/common-override-preset.ts', ['node'], false),
|
||||
|
||||
define('src/backgrounds/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
define('src/backgrounds/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
|
||||
define('src/measure/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
define('src/measure/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
|
||||
define('src/outline/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
define('src/outline/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
|
||||
define('src/highlight/index.ts', ['browser', 'node'], true, ['react'], [], [], false),
|
||||
define('src/highlight/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
|
||||
define('src/actions/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
define('src/actions/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
define('src/actions/manager.tsx', ['browser'], false, ['react'], [], [], true),
|
||||
define('src/actions/decorator.ts', ['browser'], true, ['react'], [], [], true),
|
||||
|
||||
define('src/component-testing/index.ts', ['browser', 'node'], true, ['react'], [], []),
|
||||
define('src/component-testing/preview.ts', ['browser', 'node'], true, ['react'], [], []),
|
||||
define('src/component-testing/manager.tsx', ['browser'], false, ['react'], [], []),
|
||||
define('src/viewport/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
define('src/viewport/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
|
||||
define('src/viewport/manager.tsx', ['browser'], false, ['react'], [], [], false),
|
||||
|
||||
define('src/controls/index.ts', ['browser', 'node'], true, ['react']),
|
||||
define('src/controls/preview.ts', ['browser', 'node'], true, ['react']),
|
||||
define('src/controls/manager.tsx', ['browser'], false, ['react']),
|
||||
define('src/controls/decorator.ts', ['browser'], true, ['react']),
|
||||
|
||||
define('src/core-events/index.ts', ['browser', 'node'], true),
|
||||
|
||||
@ -209,6 +209,10 @@ async function run() {
|
||||
'storybook/theming': join(cwd, 'src', 'theming'),
|
||||
'storybook/test': join(cwd, 'src', 'test'),
|
||||
'storybook/internal': join(cwd, 'src'),
|
||||
'storybook/outline': join(cwd, 'src', 'outline'),
|
||||
'storybook/backgrounds': join(cwd, 'src', 'backgrounds'),
|
||||
'storybook/highlight': join(cwd, 'src', 'highlight'),
|
||||
'storybook/measure': join(cwd, 'src', 'measure'),
|
||||
'storybook/actions': join(cwd, 'src', 'actions'),
|
||||
'storybook/viewport': join(cwd, 'src', 'viewport'),
|
||||
react: dirname(require.resolve('react/package.json')),
|
||||
@ -240,7 +244,11 @@ async function run() {
|
||||
'storybook/theming': join(cwd, 'src', 'theming'),
|
||||
'storybook/test': join(cwd, 'src', 'test'),
|
||||
'storybook/actions': join(cwd, 'src', 'actions'),
|
||||
'storybook/outline': join(cwd, 'src', 'outline'),
|
||||
'storybook/backgrounds': join(cwd, 'src', 'backgrounds'),
|
||||
'storybook/measure': join(cwd, 'src', 'measure'),
|
||||
'storybook/viewport': join(cwd, 'src', 'viewport'),
|
||||
'storybook/highlight': join(cwd, 'src', 'highlight'),
|
||||
|
||||
'storybook/internal': join(cwd, 'src'),
|
||||
react: dirname(require.resolve('react/package.json')),
|
||||
|
||||
@ -40,7 +40,7 @@ function Title() {
|
||||
);
|
||||
}
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
export default addons.register(ADDON_ID, (api) => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: Title,
|
||||
type: types.PANEL,
|
||||
|
||||
@ -2,7 +2,7 @@ import type { DecoratorFunction } from 'storybook/internal/types';
|
||||
|
||||
import { useEffect } from 'storybook/preview-api';
|
||||
|
||||
import { PARAM_KEY as KEY } from './constants';
|
||||
import { PARAM_KEY } from './constants';
|
||||
import { DEFAULT_BACKGROUNDS } from './defaults';
|
||||
import type { BackgroundsParameters, GridConfig } from './types';
|
||||
import { addBackgroundStyle, addGridStyle, clearStyles, isReduceMotionEnabled } from './utils';
|
||||
@ -19,14 +19,14 @@ const GRID_SELECTOR_BASE = 'addon-backgrounds-grid';
|
||||
const transitionStyle = isReduceMotionEnabled() ? '' : 'transition: background-color 0.3s;';
|
||||
|
||||
export const withBackgroundAndGrid: DecoratorFunction = (StoryFn, context) => {
|
||||
const { globals, parameters, viewMode, id } = context;
|
||||
const { globals = {}, parameters = {}, viewMode, id } = context;
|
||||
const {
|
||||
options = DEFAULT_BACKGROUNDS,
|
||||
disable,
|
||||
grid = defaultGrid,
|
||||
} = (parameters[KEY] || {}) as BackgroundsParameters['backgrounds'];
|
||||
const data = globals[KEY] || {};
|
||||
const backgroundName: string | undefined = typeof data === 'string' ? data : data.value;
|
||||
} = (parameters[PARAM_KEY] || {}) as BackgroundsParameters['backgrounds'];
|
||||
const data = globals[PARAM_KEY] || {};
|
||||
const backgroundName: string | undefined = typeof data === 'string' ? data : data?.value;
|
||||
|
||||
const item = backgroundName ? options[backgroundName] : undefined;
|
||||
const value = typeof item === 'string' ? item : item?.value || 'transparent';
|
||||
5
code/core/src/backgrounds/index.ts
Normal file
5
code/core/src/backgrounds/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import addonAnnotations from './preview';
|
||||
|
||||
export default addonAnnotations;
|
||||
|
||||
export type { BackgroundsParameters, BackgroundsGlobals } from './types';
|
||||
@ -5,7 +5,7 @@ import { addons, types } from 'storybook/manager-api';
|
||||
import { BackgroundTool } from './components/Tool';
|
||||
import { ADDON_ID } from './constants';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
export default addons.register(ADDON_ID, () => {
|
||||
addons.add(ADDON_ID, {
|
||||
title: 'Backgrounds',
|
||||
type: types.TOOL,
|
||||
29
code/core/src/backgrounds/preview.ts
Normal file
29
code/core/src/backgrounds/preview.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import { PARAM_KEY } from './constants';
|
||||
import { withBackgroundAndGrid } from './decorator';
|
||||
import type { BackgroundsParameters, GlobalState } from './types';
|
||||
|
||||
const decorators = [withBackgroundAndGrid];
|
||||
|
||||
const parameters = {
|
||||
[PARAM_KEY]: {
|
||||
grid: {
|
||||
cellSize: 20,
|
||||
opacity: 0.5,
|
||||
cellAmount: 5,
|
||||
},
|
||||
disable: false,
|
||||
},
|
||||
} satisfies Partial<BackgroundsParameters>;
|
||||
|
||||
const initialGlobals: Record<string, GlobalState> = {
|
||||
[PARAM_KEY]: { value: undefined, grid: false },
|
||||
};
|
||||
|
||||
export default () =>
|
||||
definePreview({
|
||||
decorators,
|
||||
parameters,
|
||||
initialGlobals,
|
||||
});
|
||||
@ -1,9 +1,10 @@
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
const { document, window } = global;
|
||||
const { document } = globalThis;
|
||||
|
||||
export const isReduceMotionEnabled = () => {
|
||||
const prefersReduceMotion = window?.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
if (!globalThis?.matchMedia) {
|
||||
return false;
|
||||
}
|
||||
const prefersReduceMotion = globalThis.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
return !!prefersReduceMotion?.matches;
|
||||
};
|
||||
|
||||
@ -13,20 +14,28 @@ export const clearStyles = (selector: string | string[]) => {
|
||||
};
|
||||
|
||||
const clearStyle = (selector: string) => {
|
||||
const element = document.getElementById(selector) as HTMLElement;
|
||||
if (element) {
|
||||
element.parentElement?.removeChild(element);
|
||||
if (!document) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = document.getElementById(selector);
|
||||
if (element && element.parentElement) {
|
||||
element.parentElement.removeChild(element);
|
||||
}
|
||||
};
|
||||
|
||||
export const addGridStyle = (selector: string, css: string) => {
|
||||
const existingStyle = document.getElementById(selector) as HTMLElement;
|
||||
if (!document) {
|
||||
return;
|
||||
}
|
||||
|
||||
const existingStyle = document.getElementById(selector);
|
||||
if (existingStyle) {
|
||||
if (existingStyle.innerHTML !== css) {
|
||||
existingStyle.innerHTML = css;
|
||||
}
|
||||
} else {
|
||||
const style = document.createElement('style') as HTMLElement;
|
||||
const style = document.createElement('style');
|
||||
style.setAttribute('id', selector);
|
||||
style.innerHTML = css;
|
||||
document.head.appendChild(style);
|
||||
@ -34,19 +43,23 @@ export const addGridStyle = (selector: string, css: string) => {
|
||||
};
|
||||
|
||||
export const addBackgroundStyle = (selector: string, css: string, storyId: string | null) => {
|
||||
const existingStyle = document.getElementById(selector) as HTMLElement;
|
||||
if (!document) {
|
||||
return;
|
||||
}
|
||||
|
||||
const existingStyle = document.getElementById(selector);
|
||||
if (existingStyle) {
|
||||
if (existingStyle.innerHTML !== css) {
|
||||
existingStyle.innerHTML = css;
|
||||
}
|
||||
} else {
|
||||
const style = document.createElement('style') as HTMLElement;
|
||||
const style = document.createElement('style');
|
||||
style.setAttribute('id', selector);
|
||||
style.innerHTML = css;
|
||||
|
||||
const gridStyleSelector = `addon-backgrounds-grid${storyId ? `-docs-${storyId}` : ''}`;
|
||||
// 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;
|
||||
const existingGridStyle = document.getElementById(gridStyleSelector);
|
||||
if (existingGridStyle) {
|
||||
existingGridStyle.parentElement?.insertBefore(style, existingGridStyle);
|
||||
} else {
|
||||
@ -69,7 +69,14 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
|
||||
target: ['chrome100', 'safari15', 'firefox91'],
|
||||
platform: 'browser',
|
||||
bundle: true,
|
||||
minify: true,
|
||||
minify: false,
|
||||
minifyWhitespace: false,
|
||||
minifyIdentifiers: false,
|
||||
minifySyntax: false,
|
||||
metafile: true,
|
||||
|
||||
// treeShaking: true,
|
||||
|
||||
sourcemap: false,
|
||||
conditions: ['browser', 'module', 'default'],
|
||||
|
||||
@ -171,6 +178,13 @@ const starter: StarterFunction = async function* starterGeneratorFn({
|
||||
|
||||
const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
|
||||
|
||||
if (compilation.metafile && options.outputDir) {
|
||||
await writeFile(
|
||||
join(options.outputDir, 'metafile.json'),
|
||||
JSON.stringify(compilation.metafile, null, 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Build additional global values
|
||||
const globals: Record<string, any> = await buildFrameworkGlobalsFromOptions(options);
|
||||
|
||||
|
||||
@ -4,9 +4,9 @@ import { normalizeStories, normalizeStoryPath } from 'storybook/internal/common'
|
||||
import { sanitize, storyNameFromExport, toId } from 'storybook/internal/csf';
|
||||
import type { Options, StoriesEntry } from 'storybook/internal/types';
|
||||
|
||||
import { userOrAutoTitleFromSpecifier } from 'storybook/preview-api';
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
import { userOrAutoTitleFromSpecifier } from '../../preview-api/modules/store/autoTitle';
|
||||
import { posix } from './posix';
|
||||
|
||||
interface StoryIdData {
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
// auto generated file, do not edit
|
||||
export default {
|
||||
'@storybook/addon-a11y': '9.0.0-alpha.12',
|
||||
'@storybook/addon-backgrounds': '9.0.0-alpha.12',
|
||||
'@storybook/addon-docs': '9.0.0-alpha.12',
|
||||
'@storybook/addon-essentials': '9.0.0-alpha.12',
|
||||
'@storybook/addon-mdx-gfm': '9.0.0-alpha.12',
|
||||
'@storybook/addon-highlight': '9.0.0-alpha.12',
|
||||
'@storybook/addon-jest': '9.0.0-alpha.12',
|
||||
'@storybook/addon-links': '9.0.0-alpha.12',
|
||||
'@storybook/addon-measure': '9.0.0-alpha.12',
|
||||
'@storybook/addon-onboarding': '9.0.0-alpha.12',
|
||||
'@storybook/addon-outline': '9.0.0-alpha.12',
|
||||
'@storybook/addon-storysource': '9.0.0-alpha.12',
|
||||
'@storybook/addon-test': '9.0.0-alpha.12',
|
||||
'@storybook/addon-themes': '9.0.0-alpha.12',
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { expect, userEvent, within } from 'storybook/test';
|
||||
|
||||
import { CallStates } from '../../instrumenter/types';
|
||||
import { getCalls } from '../mocks';
|
||||
import { Interaction } from './Interaction';
|
||||
import SubnavStories from './Subnav.stories';
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
|
||||
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { ListUnorderedIcon } from '@storybook/icons';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
import { type Call, CallStates, type ControlStates } from '../../instrumenter/types';
|
||||
import { isChaiError, isJestError, useAnsiToHtmlFilter } from '../utils';
|
||||
import type { Controls } from './InteractionsPanel';
|
||||
import { MatcherResult } from './MatcherResult';
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { ManagerContext } from 'storybook/manager-api';
|
||||
@ -9,6 +7,7 @@ import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { isChromatic } from '../../../../.storybook/isChromatic';
|
||||
import { CallStates } from '../../instrumenter/types';
|
||||
import { getCalls, getInteractions } from '../mocks';
|
||||
import { InteractionsPanel } from './InteractionsPanel';
|
||||
import SubnavStories from './Subnav.stories';
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import type { CallStates } from 'storybook/internal/instrumenter';
|
||||
import { type Call, type ControlStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import type { Call, CallStates, ControlStates } from '../../instrumenter/types';
|
||||
import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
|
||||
import { Empty } from './EmptyState';
|
||||
import { Interaction } from './Interaction';
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { Call } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
import type { Call } from '../../instrumenter/types';
|
||||
import { MethodCall, Node } from './MethodCall';
|
||||
|
||||
const StyledWrapper = styled.div(({ theme }) => ({
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import type { ReactElement } from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
import type { Call, CallRef, ElementRef } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { ObjectInspector } from '@devtools-ds/object-inspector';
|
||||
import { useTheme } from 'storybook/theming';
|
||||
|
||||
import type { Call, CallRef, ElementRef } from '../../instrumenter/types';
|
||||
|
||||
const colorsLight = {
|
||||
base: '#444',
|
||||
nullish: '#7D99AA',
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { type Call, CallStates, type LogItem } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { type Call, CallStates, type LogItem } from '../../instrumenter/types';
|
||||
import { getInteractions } from './Panel';
|
||||
|
||||
describe('Panel', () => {
|
||||
|
||||
@ -8,7 +8,6 @@ import {
|
||||
STORY_THREW_EXCEPTION,
|
||||
UNHANDLED_ERRORS_WHILE_PLAYING,
|
||||
} from 'storybook/internal/core-events';
|
||||
import { type Call, CallStates, EVENTS, type LogItem } from 'storybook/internal/instrumenter';
|
||||
import type { StatusValue } from 'storybook/internal/types';
|
||||
|
||||
import { global } from '@storybook/global';
|
||||
@ -24,6 +23,8 @@ import {
|
||||
STATUS_TYPE_ID_COMPONENT_TEST,
|
||||
STORYBOOK_ADDON_TEST_CHANNEL,
|
||||
} from '../../../../addons/test/src/constants';
|
||||
import { EVENTS } from '../../instrumenter/EVENTS';
|
||||
import { type Call, CallStates, type LogItem } from '../../instrumenter/types';
|
||||
import { ADDON_ID } from '../constants';
|
||||
import { InteractionsPanel } from './InteractionsPanel';
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { CallStates } from '../../instrumenter/types';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
import React from 'react';
|
||||
|
||||
import { type Call, CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { styled, typography } from 'storybook/theming';
|
||||
|
||||
import { type Call, CallStates } from '../../instrumenter/types';
|
||||
|
||||
export interface StatusBadgeProps {
|
||||
status: Call['status'];
|
||||
}
|
||||
|
||||
const StatusColorMapping = {
|
||||
[CallStates.DONE]: 'positive',
|
||||
[CallStates.ERROR]: 'negative',
|
||||
[CallStates.ACTIVE]: 'warning',
|
||||
[CallStates.WAITING]: 'warning',
|
||||
} as const;
|
||||
|
||||
const StyledBadge = styled.div<StatusBadgeProps>(({ theme, status }) => {
|
||||
const backgroundColor = {
|
||||
[CallStates.DONE]: theme.color.positive,
|
||||
[CallStates.ERROR]: theme.color.negative,
|
||||
[CallStates.ACTIVE]: theme.color.warning,
|
||||
[CallStates.WAITING]: theme.color.warning,
|
||||
}[status!];
|
||||
const backgroundColor = theme.color[StatusColorMapping[status!]];
|
||||
return {
|
||||
padding: '4px 6px 4px 8px;',
|
||||
padding: '4px 6px 4px 8px',
|
||||
borderRadius: '4px',
|
||||
backgroundColor,
|
||||
color: 'white',
|
||||
@ -30,13 +32,15 @@ const StyledBadge = styled.div<StatusBadgeProps>(({ theme, status }) => {
|
||||
};
|
||||
});
|
||||
|
||||
const StatusTextMapping = {
|
||||
[CallStates.DONE]: 'Pass',
|
||||
[CallStates.ERROR]: 'Fail',
|
||||
[CallStates.ACTIVE]: 'Runs',
|
||||
[CallStates.WAITING]: 'Runs',
|
||||
} as const;
|
||||
|
||||
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
|
||||
const badgeText = {
|
||||
[CallStates.DONE]: 'Pass',
|
||||
[CallStates.ERROR]: 'Fail',
|
||||
[CallStates.ACTIVE]: 'Runs',
|
||||
[CallStates.WAITING]: 'Runs',
|
||||
}[status!];
|
||||
const badgeText = StatusTextMapping[status!];
|
||||
return (
|
||||
<StyledBadge aria-label="Status of the test run" status={status}>
|
||||
{badgeText}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { CallStates } from '../../instrumenter/types';
|
||||
import { StatusIcon } from './StatusIcon';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
import { type Call, CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
|
||||
|
||||
import { transparentize } from 'polished';
|
||||
import { styled, useTheme } from 'storybook/theming';
|
||||
|
||||
import { type Call, CallStates } from '../../instrumenter/types';
|
||||
|
||||
export interface StatusIconProps {
|
||||
status: Call['status'];
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { action } from 'storybook/actions';
|
||||
|
||||
import { CallStates } from '../../instrumenter/types';
|
||||
import { Subnav } from './Subnav';
|
||||
|
||||
export default {
|
||||
|
||||
@ -10,8 +10,6 @@ import {
|
||||
TooltipNote,
|
||||
WithTooltip,
|
||||
} from 'storybook/internal/components';
|
||||
import type { Call, ControlStates } from 'storybook/internal/instrumenter';
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import {
|
||||
FastForwardIcon,
|
||||
@ -23,6 +21,7 @@ import {
|
||||
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { type Call, CallStates, type ControlStates } from '../../instrumenter/types';
|
||||
import type { Controls } from './InteractionsPanel';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { ManagerContext } from 'storybook/manager-api';
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
import { CallStates } from '../../instrumenter/types';
|
||||
import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
|
||||
|
||||
type Story = StoryObj<typeof TestDiscrepancyMessage>;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Link } from 'storybook/internal/components';
|
||||
import { CallStates } from 'storybook/internal/instrumenter';
|
||||
|
||||
import { useStorybookApi } from 'storybook/manager-api';
|
||||
import { styled } from 'storybook/theming';
|
||||
|
||||
import { CallStates } from '../../instrumenter/types';
|
||||
import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
|
||||
|
||||
const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
|
||||
|
||||
@ -8,7 +8,7 @@ import { Panel } from './components/Panel';
|
||||
import { PanelTitle } from './components/PanelTitle';
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
export default addons.register(ADDON_ID, () => {
|
||||
const filter = ({ state }: Combo) => {
|
||||
return {
|
||||
storyId: state.storyId,
|
||||
|
||||
@ -54,7 +54,7 @@ const stringifyArgs = (args: Record<string, any>) =>
|
||||
return value;
|
||||
});
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
export default addons.register(ADDON_ID, (api) => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const saveStory = async () => {
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
/* these imports are in the exact order in which the panels need to be registered */
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import { addons } from 'storybook/manager-api';
|
||||
|
||||
/* eslint-disable prettier/prettier */
|
||||
import controlsManager from '../../controls/manager';
|
||||
import actionsManager from '../../actions/manager';
|
||||
import componentTestingManager from '../../component-testing/manager';
|
||||
import backgroundsManager from '../../backgrounds/manager';
|
||||
import measureManager from '../../measure/manager';
|
||||
import outlineManager from '../../outline/manager';
|
||||
import viewportManager from '../../viewport/manager';
|
||||
/* eslint-enable prettier/prettier */
|
||||
|
||||
const TAG_FILTERS = 'tag-filters';
|
||||
const STATIC_FILTER = 'static-filter';
|
||||
|
||||
addons.register(TAG_FILTERS, (api) => {
|
||||
const tagFiltersManager = addons.register(TAG_FILTERS, (api) => {
|
||||
// FIXME: this ensures the filter is applied after the first render
|
||||
// to avoid a strange race condition in Webkit only.
|
||||
const staticExcludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
|
||||
@ -28,3 +39,14 @@ addons.register(TAG_FILTERS, (api) => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
export default [
|
||||
measureManager,
|
||||
tagFiltersManager,
|
||||
actionsManager,
|
||||
backgroundsManager,
|
||||
componentTestingManager,
|
||||
controlsManager,
|
||||
viewportManager,
|
||||
outlineManager,
|
||||
];
|
||||
|
||||
@ -371,10 +371,6 @@ export const managerEntries = async (existing: any, options: Options) => {
|
||||
dirname(require.resolve('storybook/package.json')),
|
||||
'dist/core-server/presets/common-manager.js'
|
||||
),
|
||||
join(dirname(require.resolve('storybook/package.json')), 'dist/actions/manager.js'),
|
||||
join(dirname(require.resolve('storybook/package.json')), 'dist/component-testing/manager.js'),
|
||||
join(dirname(require.resolve('storybook/package.json')), 'dist/controls/manager.js'),
|
||||
join(dirname(require.resolve('storybook/package.json')), 'dist/viewport/manager.js'),
|
||||
...(existing || []),
|
||||
];
|
||||
};
|
||||
|
||||
@ -25,11 +25,12 @@ import type {
|
||||
import { findUp } from 'find-up';
|
||||
import picocolors from 'picocolors';
|
||||
import slash from 'slash';
|
||||
import { sortStoriesV7, userOrAutoTitleFromSpecifier } from 'storybook/preview-api';
|
||||
import invariant from 'tiny-invariant';
|
||||
import { dedent } from 'ts-dedent';
|
||||
import * as TsconfigPaths from 'tsconfig-paths';
|
||||
|
||||
import { userOrAutoTitleFromSpecifier } from '../../preview-api/modules/store/autoTitle';
|
||||
import { sortStoriesV7 } from '../../preview-api/modules/store/sortStories';
|
||||
import { IndexingError, MultipleIndexingError } from './IndexingError';
|
||||
import { autoName } from './autoName';
|
||||
import { type IndexStatsSummary, addStats } from './summarizeStats';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { Renderer, StoryContextForEnhancers } from 'storybook/internal/types';
|
||||
|
||||
import { combineParameters } from 'storybook/preview-api';
|
||||
import { combineParameters } from '../../preview-api/modules/store/parameters';
|
||||
|
||||
export const enhanceArgTypes = <TRenderer extends Renderer>(
|
||||
context: StoryContextForEnhancers<TRenderer>
|
||||
|
||||
@ -1,8 +1,2 @@
|
||||
import { definePreview } from 'storybook/preview-api';
|
||||
|
||||
import './preview';
|
||||
|
||||
export { HIGHLIGHT, RESET_HIGHLIGHT, SCROLL_INTO_VIEW } from './constants';
|
||||
export type { HighlightParameters } from './types';
|
||||
|
||||
export default () => definePreview({});
|
||||
@ -3,7 +3,7 @@ import { STORY_CHANGED } from 'storybook/internal/core-events';
|
||||
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import { addons } from 'storybook/preview-api';
|
||||
import { addons, definePreview } from 'storybook/preview-api';
|
||||
|
||||
import { HIGHLIGHT, RESET_HIGHLIGHT, SCROLL_INTO_VIEW } from './constants';
|
||||
|
||||
@ -68,41 +68,52 @@ const highlightStyle = (
|
||||
}`;
|
||||
};
|
||||
|
||||
const channel = addons.getChannel();
|
||||
const sheetIds = new Set<string>();
|
||||
if (addons && addons.ready) {
|
||||
addons.ready().then(() => {
|
||||
const channel = addons.getChannel();
|
||||
const sheetIds = new Set<string>();
|
||||
|
||||
const highlight = (options: HighlightOptions) => {
|
||||
const sheetId = Math.random().toString(36).substring(2, 15);
|
||||
sheetIds.add(sheetId);
|
||||
const highlight = (options: HighlightOptions) => {
|
||||
const sheetId = Math.random().toString(36).substring(2, 15);
|
||||
sheetIds.add(sheetId);
|
||||
|
||||
const sheet = document.createElement('style');
|
||||
sheet.innerHTML = highlightStyle(Array.from(new Set(options.elements)), options);
|
||||
sheet.setAttribute('id', sheetId);
|
||||
document.head.appendChild(sheet);
|
||||
const sheet = document.createElement('style');
|
||||
sheet.innerHTML = highlightStyle(Array.from(new Set(options.elements)), options);
|
||||
sheet.setAttribute('id', sheetId);
|
||||
document.head.appendChild(sheet);
|
||||
|
||||
const timeout = options.pulseOut || options.fadeOut;
|
||||
if (timeout) {
|
||||
setTimeout(() => removeHighlight(sheetId), timeout + 500);
|
||||
}
|
||||
};
|
||||
const timeout = options.pulseOut || options.fadeOut;
|
||||
if (timeout) {
|
||||
setTimeout(() => removeHighlight(sheetId), timeout + 500);
|
||||
}
|
||||
};
|
||||
|
||||
const removeHighlight = (id: string) => {
|
||||
const sheetElement = document.getElementById(id);
|
||||
sheetElement?.parentNode?.removeChild(sheetElement);
|
||||
sheetIds.delete(id);
|
||||
};
|
||||
const removeHighlight = (id: string) => {
|
||||
const sheetElement = document.getElementById(id);
|
||||
sheetElement?.parentNode?.removeChild(sheetElement);
|
||||
sheetIds.delete(id);
|
||||
};
|
||||
|
||||
const resetHighlight = () => {
|
||||
sheetIds.forEach(removeHighlight);
|
||||
};
|
||||
const resetHighlight = () => {
|
||||
sheetIds.forEach(removeHighlight);
|
||||
};
|
||||
|
||||
const scrollIntoView = (target: string, options?: ScrollIntoViewOptions) => {
|
||||
const element = document.querySelector(target);
|
||||
element?.scrollIntoView({ behavior: 'smooth', block: 'center', ...options });
|
||||
highlight({ elements: [target], color: '#1EA7FD', width: '2px', offset: '2px', pulseOut: 3000 });
|
||||
};
|
||||
const scrollIntoView = (target: string, options?: ScrollIntoViewOptions) => {
|
||||
const element = document.querySelector(target);
|
||||
element?.scrollIntoView({ behavior: 'smooth', block: 'center', ...options });
|
||||
highlight({
|
||||
elements: [target],
|
||||
color: '#1EA7FD',
|
||||
width: '2px',
|
||||
offset: '2px',
|
||||
pulseOut: 3000,
|
||||
});
|
||||
};
|
||||
|
||||
channel.on(STORY_CHANGED, resetHighlight);
|
||||
channel.on(SCROLL_INTO_VIEW, scrollIntoView);
|
||||
channel.on(RESET_HIGHLIGHT, resetHighlight);
|
||||
channel.on(HIGHLIGHT, highlight);
|
||||
channel.on(STORY_CHANGED, resetHighlight);
|
||||
channel.on(SCROLL_INTO_VIEW, scrollIntoView);
|
||||
channel.on(RESET_HIGHLIGHT, resetHighlight);
|
||||
channel.on(HIGHLIGHT, highlight);
|
||||
});
|
||||
}
|
||||
export default () => definePreview({});
|
||||
9
code/core/src/instrumenter/EVENTS.ts
Normal file
9
code/core/src/instrumenter/EVENTS.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export const EVENTS = {
|
||||
CALL: 'storybook/instrumenter/call',
|
||||
SYNC: 'storybook/instrumenter/sync',
|
||||
START: 'storybook/instrumenter/start',
|
||||
BACK: 'storybook/instrumenter/back',
|
||||
GOTO: 'storybook/instrumenter/goto',
|
||||
NEXT: 'storybook/instrumenter/next',
|
||||
END: 'storybook/instrumenter/end',
|
||||
};
|
||||
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