mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 20:41:07 +08:00
Merge branch 'next' into 6-4-docs
This commit is contained in:
jonniebigodes
commit
f39e8c48cc
10
CHANGELOG.md
10
CHANGELOG.md
@ -1,3 +1,13 @@
|
||||
## 6.4.0-alpha.35 (September 14, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: On demand store ([#15871](https://github.com/storybookjs/storybook/pull/15871))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix ActionButton out of position in Safari ([#15981](https://github.com/storybookjs/storybook/pull/15981))
|
||||
|
||||
## 6.4.0-alpha.34 (September 7, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
42
MIGRATION.md
42
MIGRATION.md
@ -1,7 +1,9 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
|
||||
- [Story Store v7](#story-store-v7)
|
||||
- [Babel mode v7](#babel-mode-v7)
|
||||
- [Loader behavior with args changes](#loader-behaviour-with-args-changes)
|
||||
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
|
||||
- [Webpack 5 manager build](#webpack-5-manager-build)
|
||||
- [Angular 12 upgrade](#angular-12-upgrade)
|
||||
@ -166,6 +168,42 @@
|
||||
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Story Store v7
|
||||
|
||||
SB6.4 introduces an opt-in feature flag, `features.storyStoreV7`, which loads stories in an "on demand" way (that is when rendered), rather than up front when the Storybook is booted. This way of operating will become the default in 7.0 and will likely be switched to opt-out in that version.
|
||||
|
||||
The key benefit of the on demand store is that stories are code-split automatically (in `builder-webpack4` and `builder-webpack5`), which allows for much smaller bundle sizes, faster rendering, and improved general performance via various opt-in Webpack features.
|
||||
|
||||
The on-demand store relies on the "story index" data structure which is generated in the server (node) via static code analysis. As such, it has the following limitations:
|
||||
|
||||
- Does not work with `storiesOf()`
|
||||
- Does not work if you used dynamic story names or component titles.
|
||||
|
||||
However, the `autoTitle` feature is supported.
|
||||
|
||||
#### Behavioral differences
|
||||
|
||||
The key behavioral differences of the v7 store are:
|
||||
|
||||
- `SET_STORIES` is not emitted on boot up. Instead the manager loads the story index independenly.
|
||||
- A new event `STORY_PREPARED` is emitted when a story is rendered for the first time, which contains metadata about the story, such as `parameters`.
|
||||
- All "entire" store APIs such as `extract()` need to be proceeded by an async call to `loadAllCSFFiles()` which fetches all CSF files and processes them.
|
||||
|
||||
#### Using the v7 store
|
||||
|
||||
To activate the v7 mode set the feature flag in your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
// ... your existing config
|
||||
features: {
|
||||
storyStoreV7: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
NOTE: `features.storyStoreV7` implies `features.buildStoriesJson` and has the same limitations.
|
||||
|
||||
### Babel mode v7
|
||||
|
||||
SB6.4 introduces an opt-in feature flag, `features.babelModeV7`, that reworks the way Babel is configured in Storybook to make it more consistent with the Babel is configured in your app. This breaking change will become the default in SB 7.0, but we encourage you to migrate today.
|
||||
@ -197,6 +235,10 @@ npx sb@next babelrc
|
||||
|
||||
This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly.
|
||||
|
||||
### Loader behavior with args changes
|
||||
|
||||
In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders do not re-run. Instead the previous value of the loader in passed to the story, irrespective of the new args.
|
||||
|
||||
## From version 6.2.x to 6.3.0
|
||||
|
||||
### Webpack 5 manager build
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/channels": "6.4.0-alpha.34",
|
||||
"@storybook/client-api": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/channels": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { DecoratorFunction } from '@storybook/addons';
|
||||
import { AnyFramework, DecoratorFunction } from '@storybook/csf';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
@ -9,7 +9,7 @@ if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
export const withA11y: DecoratorFunction = deprecate(
|
||||
export const withA11y: DecoratorFunction<AnyFramework> = deprecate(
|
||||
(storyFn, storyContext) => {
|
||||
return storyFn(storyContext);
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-api": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -8,7 +8,7 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should add actions that match a pattern', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: {},
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
@ -20,7 +20,7 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should NOT override pre-existing args', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: 'pre-existing value' },
|
||||
initialArgs: { onClick: 'pre-existing value' },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
@ -29,7 +29,7 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should NOT override pre-existing args, if null', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: null },
|
||||
initialArgs: { onClick: null },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
@ -38,7 +38,7 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should override pre-existing args, if undefined', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: undefined },
|
||||
initialArgs: { onClick: undefined },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
@ -47,7 +47,7 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: {},
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters: {
|
||||
...parameters,
|
||||
@ -65,7 +65,11 @@ describe('actions parameter enhancers', () => {
|
||||
};
|
||||
it('should add actions based on action.args', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({ args: {}, argTypes, parameters: {} } as unknown) as StoryContext)
|
||||
addActionsFromArgTypes(({
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
onBlur: expect.any(Function),
|
||||
@ -76,7 +80,7 @@ describe('actions parameter enhancers', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: 'pre-existing value' },
|
||||
initialArgs: { onClick: 'pre-existing value' },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({});
|
||||
@ -86,7 +90,7 @@ describe('actions parameter enhancers', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: null },
|
||||
initialArgs: { onClick: null },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({});
|
||||
@ -96,7 +100,7 @@ describe('actions parameter enhancers', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: undefined },
|
||||
initialArgs: { onClick: undefined },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({ onClick: expect.any(Function) });
|
||||
@ -105,7 +109,7 @@ describe('actions parameter enhancers', () => {
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
args: {},
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters: { actions: { disable: true } },
|
||||
} as unknown) as StoryContext)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Args } from '@storybook/addons';
|
||||
import { ArgsEnhancer } from '@storybook/client-api';
|
||||
import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
|
||||
import { action } from '../index';
|
||||
|
||||
// interface ActionsParameter {
|
||||
@ -12,9 +12,9 @@ import { action } from '../index';
|
||||
* matches a regex, such as `^on.*` for react-style `onClick` etc.
|
||||
*/
|
||||
|
||||
export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (context) => {
|
||||
const {
|
||||
args,
|
||||
initialArgs,
|
||||
argTypes,
|
||||
parameters: { actions },
|
||||
} = context;
|
||||
@ -28,7 +28,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
);
|
||||
|
||||
return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
|
||||
if (typeof args[name] === 'undefined') {
|
||||
if (typeof initialArgs[name] === 'undefined') {
|
||||
acc[name] = action(name);
|
||||
}
|
||||
return acc;
|
||||
@ -38,9 +38,9 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
/**
|
||||
* Add action args for list of strings.
|
||||
*/
|
||||
export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
|
||||
export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
|
||||
const {
|
||||
args,
|
||||
initialArgs,
|
||||
argTypes,
|
||||
parameters: { actions },
|
||||
} = context;
|
||||
@ -51,7 +51,7 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
|
||||
const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
|
||||
|
||||
return argTypesWithAction.reduce((acc, [name, argType]) => {
|
||||
if (typeof args[name] === 'undefined') {
|
||||
if (typeof initialArgs[name] === 'undefined') {
|
||||
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
|
||||
}
|
||||
return acc;
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
// Based on http://backbonejs.org/docs/backbone.html#section-164
|
||||
import global from 'global';
|
||||
import { useEffect } from '@storybook/client-api';
|
||||
import { useEffect, makeDecorator } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import { actions } from './actions';
|
||||
|
||||
import { PARAM_KEY } from '../constants';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -76,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
|
||||
import { useMemo, useEffect } from '@storybook/addons';
|
||||
import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
import {
|
||||
@ -8,7 +9,10 @@ import {
|
||||
isReduceMotionEnabled,
|
||||
} from '../helpers';
|
||||
|
||||
export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
export const withBackground = (
|
||||
StoryFn: StoryFunction<AnyFramework>,
|
||||
context: StoryContext<AnyFramework>
|
||||
) => {
|
||||
const { globals, parameters } = context;
|
||||
const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
|
||||
const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import dedent from 'ts-dedent';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
|
||||
import { useMemo, useEffect } from '@storybook/addons';
|
||||
import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
|
||||
import { clearStyles, addGridStyle } from '../helpers';
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
@ -15,7 +16,10 @@ const deprecatedCellSizeWarning = deprecate(
|
||||
`
|
||||
);
|
||||
|
||||
export const withGrid = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
export const withGrid = (
|
||||
StoryFn: StoryFunction<AnyFramework>,
|
||||
context: StoryContext<AnyFramework>
|
||||
) => {
|
||||
const { globals, parameters } = context;
|
||||
const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
|
||||
const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,16 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-api": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/node-logger": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/node-logger": "6.4.0-alpha.35",
|
||||
"@storybook/store": "6.4.0-alpha.35",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.20",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -69,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -63,20 +63,22 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.34",
|
||||
"@storybook/client-api": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/csf-tools": "6.4.0-alpha.34",
|
||||
"@storybook/node-logger": "6.4.0-alpha.34",
|
||||
"@storybook/postinstall": "6.4.0-alpha.34",
|
||||
"@storybook/source-loader": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.35",
|
||||
"@storybook/client-api": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/csf-tools": "6.4.0-alpha.35",
|
||||
"@storybook/node-logger": "6.4.0-alpha.35",
|
||||
"@storybook/postinstall": "6.4.0-alpha.35",
|
||||
"@storybook/preview-web": "6.4.0-alpha.35",
|
||||
"@storybook/source-loader": "6.4.0-alpha.35",
|
||||
"@storybook/store": "6.4.0-alpha.35",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -105,10 +107,11 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.4.0-alpha.34",
|
||||
"@storybook/react": "6.4.0-alpha.34",
|
||||
"@storybook/vue": "6.4.0-alpha.34",
|
||||
"@storybook/web-components": "6.4.0-alpha.34",
|
||||
"@storybook/angular": "6.4.0-alpha.35",
|
||||
"@storybook/html": "6.4.0-alpha.35",
|
||||
"@storybook/react": "6.4.0-alpha.35",
|
||||
"@storybook/vue": "6.4.0-alpha.35",
|
||||
"@storybook/web-components": "6.4.0-alpha.35",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -138,10 +141,12 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.4.0-alpha.34",
|
||||
"@storybook/vue": "6.4.0-alpha.34",
|
||||
"@storybook/vue3": "6.4.0-alpha.34",
|
||||
"@storybook/web-components": "6.4.0-alpha.34",
|
||||
"@storybook/angular": "6.4.0-alpha.35",
|
||||
"@storybook/html": "6.4.0-alpha.35",
|
||||
"@storybook/react": "6.4.0-alpha.35",
|
||||
"@storybook/vue": "6.4.0-alpha.35",
|
||||
"@storybook/vue3": "6.4.0-alpha.35",
|
||||
"@storybook/web-components": "6.4.0-alpha.35",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -155,6 +160,12 @@
|
||||
"@storybook/angular": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/html": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/vue": {
|
||||
"optional": true
|
||||
},
|
||||
@ -192,7 +203,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -1,24 +1,23 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import React, { FC, useContext, useEffect, useState, useCallback } from 'react';
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import {
|
||||
ArgsTable as PureArgsTable,
|
||||
ArgsTableProps as PureArgsTableProps,
|
||||
ArgsTableError,
|
||||
ArgTypes,
|
||||
SortType,
|
||||
TabbedArgsTable,
|
||||
} from '@storybook/components';
|
||||
import { Args } from '@storybook/addons';
|
||||
import { StoryStore, filterArgTypes } from '@storybook/client-api';
|
||||
import type { PropDescriptor } from '@storybook/client-api';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { filterArgTypes, PropDescriptor } from '@storybook/store';
|
||||
import Events from '@storybook/core-events';
|
||||
import { StrictArgTypes, Args } from '@storybook/csf';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';
|
||||
import { getComponentName, getDocsStories } from './utils';
|
||||
import { getComponentName } from './utils';
|
||||
import { ArgTypesExtractor } from '../lib/docgen/types';
|
||||
import { lookupStoryId } from './Story';
|
||||
import { useStory } from './useStory';
|
||||
|
||||
interface BaseProps {
|
||||
include?: PropDescriptor;
|
||||
@ -45,29 +44,33 @@ type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps;
|
||||
|
||||
const useArgs = (
|
||||
storyId: string,
|
||||
storyStore: StoryStore
|
||||
context: DocsContextProps
|
||||
): [Args, (args: Args) => void, (argNames?: string[]) => void] => {
|
||||
const story = storyStore.fromId(storyId);
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const story = context.storyById(storyId);
|
||||
if (!story) {
|
||||
throw new Error(`Unknown story: ${storyId}`);
|
||||
}
|
||||
|
||||
const { args: initialArgs } = story;
|
||||
const [args, setArgs] = useState(initialArgs);
|
||||
const storyContext = context.getStoryContext(story);
|
||||
|
||||
const [args, setArgs] = useState(storyContext.args);
|
||||
useEffect(() => {
|
||||
const cb = (changed: { storyId: string; args: Args }) => {
|
||||
if (changed.storyId === storyId) {
|
||||
setArgs(changed.args);
|
||||
}
|
||||
};
|
||||
storyStore._channel.on(Events.STORY_ARGS_UPDATED, cb);
|
||||
return () => storyStore._channel.off(Events.STORY_ARGS_UPDATED, cb);
|
||||
channel.on(Events.STORY_ARGS_UPDATED, cb);
|
||||
return () => channel.off(Events.STORY_ARGS_UPDATED, cb);
|
||||
}, [storyId]);
|
||||
const updateArgs = useCallback((newArgs) => storyStore.updateStoryArgs(storyId, newArgs), [
|
||||
storyId,
|
||||
]);
|
||||
const updateArgs = useCallback(
|
||||
(updatedArgs) => channel.emit(Events.UPDATE_STORY_ARGS, { storyId, updatedArgs }),
|
||||
[storyId]
|
||||
);
|
||||
const resetArgs = useCallback(
|
||||
(argNames?: string[]) => storyStore.resetStoryArgs(storyId, argNames),
|
||||
(argNames?: string[]) => channel.emit(Events.RESET_STORY_ARGS, { storyId, argNames }),
|
||||
[storyId]
|
||||
);
|
||||
return [args, updateArgs, resetArgs];
|
||||
@ -75,12 +78,12 @@ const useArgs = (
|
||||
|
||||
export const extractComponentArgTypes = (
|
||||
component: Component,
|
||||
{ parameters }: DocsContextProps,
|
||||
{ id, storyById }: DocsContextProps,
|
||||
include?: PropDescriptor,
|
||||
exclude?: PropDescriptor
|
||||
): ArgTypes => {
|
||||
const params = parameters || {};
|
||||
const { extractArgTypes }: { extractArgTypes: ArgTypesExtractor } = params.docs || {};
|
||||
): StrictArgTypes => {
|
||||
const { parameters } = storyById(id);
|
||||
const { extractArgTypes }: { extractArgTypes: ArgTypesExtractor } = parameters.docs || {};
|
||||
if (!extractArgTypes) {
|
||||
throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
|
||||
}
|
||||
@ -94,11 +97,13 @@ const isShortcut = (value?: string) => {
|
||||
return value && [CURRENT_SELECTION, PRIMARY_STORY].includes(value);
|
||||
};
|
||||
|
||||
export const getComponent = (props: ArgsTableProps = {}, context: DocsContextProps): Component => {
|
||||
export const getComponent = (
|
||||
props: ArgsTableProps = {},
|
||||
{ id, storyById }: DocsContextProps
|
||||
): Component => {
|
||||
const { of } = props as OfProps;
|
||||
const { story } = props as StoryProps;
|
||||
const { parameters = {} } = context;
|
||||
const { component } = parameters;
|
||||
const { component } = storyById(id);
|
||||
if (isShortcut(of) || isShortcut(story)) {
|
||||
return component || null;
|
||||
}
|
||||
@ -127,47 +132,51 @@ export const StoryTable: FC<
|
||||
StoryProps & { component: Component; subcomponents: Record<string, Component> }
|
||||
> = (props) => {
|
||||
const context = useContext(DocsContext);
|
||||
const { id: currentId, componentStories } = context;
|
||||
const {
|
||||
id: currentId,
|
||||
parameters: { argTypes },
|
||||
storyStore,
|
||||
} = context;
|
||||
const { story, component, subcomponents, showComponent, include, exclude, sort } = props;
|
||||
let storyArgTypes;
|
||||
story: storyName,
|
||||
component,
|
||||
subcomponents,
|
||||
showComponent,
|
||||
include,
|
||||
exclude,
|
||||
sort,
|
||||
} = props;
|
||||
try {
|
||||
let storyId;
|
||||
switch (story) {
|
||||
switch (storyName) {
|
||||
case CURRENT_SELECTION: {
|
||||
storyId = currentId;
|
||||
storyArgTypes = argTypes;
|
||||
break;
|
||||
}
|
||||
case PRIMARY_STORY: {
|
||||
const primaryStory = getDocsStories(context)[0];
|
||||
const primaryStory = componentStories()[0];
|
||||
storyId = primaryStory.id;
|
||||
storyArgTypes = primaryStory.parameters.argTypes;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
storyId = lookupStoryId(story, context);
|
||||
const data = storyStore.fromId(storyId);
|
||||
storyArgTypes = data.parameters.argTypes;
|
||||
storyId = lookupStoryId(storyName, context);
|
||||
}
|
||||
}
|
||||
storyArgTypes = filterArgTypes(storyArgTypes, include, exclude);
|
||||
|
||||
const story = useStory(storyId, context);
|
||||
// eslint-disable-next-line prefer-const
|
||||
let [args, updateArgs, resetArgs] = useArgs(storyId, context);
|
||||
if (!story) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
const argTypes = filterArgTypes(story.argTypes, include, exclude);
|
||||
|
||||
const mainLabel = getComponentName(component) || 'Story';
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
let [args, updateArgs, resetArgs] = useArgs(storyId, storyStore);
|
||||
let tabs = { [mainLabel]: { rows: storyArgTypes, args, updateArgs, resetArgs } } as Record<
|
||||
let tabs = { [mainLabel]: { rows: argTypes, args, updateArgs, resetArgs } } as Record<
|
||||
string,
|
||||
PureArgsTableProps
|
||||
>;
|
||||
|
||||
// Use the dynamically generated component tabs if there are no controls
|
||||
const storyHasArgsWithControls =
|
||||
storyArgTypes && Object.values(storyArgTypes).find((v) => !!v?.control);
|
||||
const storyHasArgsWithControls = argTypes && Object.values(argTypes).find((v) => !!v?.control);
|
||||
|
||||
if (!storyHasArgsWithControls) {
|
||||
updateArgs = null;
|
||||
@ -203,15 +212,19 @@ export const ComponentsTable: FC<ComponentsProps> = (props) => {
|
||||
|
||||
export const ArgsTable: FC<ArgsTableProps> = (props) => {
|
||||
const context = useContext(DocsContext);
|
||||
const { parameters: { subcomponents, controls } = {} } = context;
|
||||
const { id, storyById } = context;
|
||||
const {
|
||||
parameters: { controls },
|
||||
subcomponents,
|
||||
} = storyById(id);
|
||||
|
||||
const { include, exclude, components, sort: sortProp } = props as ComponentsProps;
|
||||
const { story } = props as StoryProps;
|
||||
const { story: storyName } = props as StoryProps;
|
||||
|
||||
const sort = sortProp || controls?.sort;
|
||||
|
||||
const main = getComponent(props, context);
|
||||
if (story) {
|
||||
if (storyName) {
|
||||
return <StoryTable {...(props as StoryProps)} component={main} {...{ subcomponents, sort }} />;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { FC, ReactElement, ReactNode, ReactNodeArray, useContext } from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { toId, storyNameFromExport } from '@storybook/csf';
|
||||
import { toId, storyNameFromExport, AnyFramework } from '@storybook/csf';
|
||||
import {
|
||||
resetComponents,
|
||||
Preview as PurePreview,
|
||||
@ -19,10 +19,10 @@ type CanvasProps = PurePreviewProps & {
|
||||
|
||||
const getPreviewProps = (
|
||||
{ withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode },
|
||||
docsContext: DocsContextProps,
|
||||
docsContext: DocsContextProps<AnyFramework>,
|
||||
sourceContext: SourceContextProps
|
||||
): PurePreviewProps => {
|
||||
const { mdxComponentMeta, mdxStoryNameToKey } = docsContext;
|
||||
const { mdxComponentAnnotations, mdxStoryNameToKey } = docsContext;
|
||||
let sourceState = withSource;
|
||||
if (sourceState === SourceState.NONE) {
|
||||
return props;
|
||||
@ -41,7 +41,7 @@ const getPreviewProps = (
|
||||
(s) =>
|
||||
s.props.id ||
|
||||
toId(
|
||||
mdxComponentMeta.id || mdxComponentMeta.title,
|
||||
mdxComponentAnnotations.id || mdxComponentAnnotations.title,
|
||||
storyNameFromExport(mdxStoryNameToKey[s.props.name])
|
||||
)
|
||||
);
|
||||
|
||||
@ -31,12 +31,13 @@ const noDescription = (component?: Component): string | null => null;
|
||||
|
||||
export const getDescriptionProps = (
|
||||
{ of, type, markdown, children }: DescriptionProps,
|
||||
{ parameters }: DocsContextProps
|
||||
{ id, storyById }: DocsContextProps<any>
|
||||
): PureDescriptionProps => {
|
||||
const { component, parameters } = storyById(id);
|
||||
if (children || markdown) {
|
||||
return { markdown: children || markdown };
|
||||
}
|
||||
const { component, notes, info, docs } = parameters;
|
||||
const { notes, info, docs } = parameters;
|
||||
const { extractComponentDescription = noDescription, description } = docs || {};
|
||||
const target = of === CURRENT_SELECTION ? component : of;
|
||||
|
||||
@ -63,7 +64,7 @@ ${extractComponentDescription(target) || ''}
|
||||
case DescriptionType.DOCGEN:
|
||||
case DescriptionType.AUTO:
|
||||
default:
|
||||
return { markdown: extractComponentDescription(target, parameters) };
|
||||
return { markdown: extractComponentDescription(target, { component, ...parameters }) };
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import dedent from 'ts-dedent';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
|
||||
import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components';
|
||||
import { AnyFramework } from '@storybook/csf';
|
||||
import { DocsContextProps, DocsContext } from './DocsContext';
|
||||
import { anchorBlockIdFromId } from './Anchor';
|
||||
import { storyBlockIdFromId } from './Story';
|
||||
@ -14,8 +15,8 @@ import { scrollToElement } from './utils';
|
||||
|
||||
const { document, window: globalWindow } = global;
|
||||
|
||||
export interface DocsContainerProps {
|
||||
context: DocsContextProps;
|
||||
export interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {
|
||||
context: DocsContextProps<TFramework>;
|
||||
}
|
||||
|
||||
const defaultComponents = {
|
||||
@ -35,8 +36,10 @@ const warnOptionsTheme = deprecate(
|
||||
);
|
||||
|
||||
export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
|
||||
const { id: storyId = null, parameters = {} } = context || {};
|
||||
const { options = {}, docs = {} } = parameters;
|
||||
const { id: storyId, storyById } = context;
|
||||
const {
|
||||
parameters: { options = {}, docs = {} },
|
||||
} = storyById(storyId);
|
||||
let themeVars = docs.theme;
|
||||
if (!themeVars && options.theme) {
|
||||
warnOptionsTheme();
|
||||
|
||||
@ -1,22 +1,10 @@
|
||||
import { Context, createContext } from 'react';
|
||||
import { window as globalWindow } from 'global';
|
||||
|
||||
export interface DocsContextProps {
|
||||
id?: string;
|
||||
kind?: string;
|
||||
name?: string;
|
||||
import { DocsContextProps } from '@storybook/preview-web';
|
||||
import { AnyFramework } from '@storybook/csf';
|
||||
|
||||
/**
|
||||
* mdxStoryNameToKey is an MDX-compiler-generated mapping of an MDX story's
|
||||
* display name to its story key for ID generation. It's used internally by the `<Story>`
|
||||
* and `Preview` doc blocks.
|
||||
*/
|
||||
mdxStoryNameToKey?: Record<string, string>;
|
||||
mdxComponentMeta?: any;
|
||||
parameters?: any;
|
||||
storyStore?: any;
|
||||
forceRender?: () => void;
|
||||
}
|
||||
export type { DocsContextProps };
|
||||
|
||||
// We add DocsContext to window. The reason is that in case DocsContext.ts is
|
||||
// imported multiple times (maybe once directly, and another time from a minified bundle)
|
||||
@ -29,4 +17,4 @@ if (globalWindow.__DOCS_CONTEXT__ === undefined) {
|
||||
globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
|
||||
}
|
||||
|
||||
export const DocsContext: Context<DocsContextProps> = globalWindow.__DOCS_CONTEXT__;
|
||||
export const DocsContext: Context<DocsContextProps<AnyFramework>> = globalWindow.__DOCS_CONTEXT__;
|
||||
|
||||
@ -2,9 +2,8 @@ import { extractTitle } from './Title';
|
||||
|
||||
describe('defaultTitleSlot', () => {
|
||||
it('splits on last /', () => {
|
||||
const parameters = {};
|
||||
expect(extractTitle({ kind: 'a/b/c', parameters })).toBe('c');
|
||||
expect(extractTitle({ kind: 'a|b', parameters })).toBe('a|b');
|
||||
expect(extractTitle({ kind: 'a/b/c.d', parameters })).toBe('c.d');
|
||||
expect(extractTitle({ title: 'a/b/c' } as any)).toBe('c');
|
||||
expect(extractTitle({ title: 'a|b' } as any)).toBe('a|b');
|
||||
expect(extractTitle({ title: 'a/b/c.d' } as any)).toBe('c.d');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
import React, { FC, useContext } from 'react';
|
||||
import global from 'global';
|
||||
import { Args, BaseAnnotations, BaseMeta } from '@storybook/addons';
|
||||
import { BaseAnnotations } from '@storybook/csf';
|
||||
import { Anchor } from './Anchor';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { getDocsStories } from './utils';
|
||||
import { Component } from './types';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
type MetaProps = BaseMeta<Component> & BaseAnnotations<Args, any>;
|
||||
type MetaProps = BaseAnnotations;
|
||||
|
||||
function getFirstStoryId(docsContext: DocsContextProps): string {
|
||||
const stories = getDocsStories(docsContext);
|
||||
const stories = docsContext.componentStories();
|
||||
|
||||
return stories.length > 0 ? stories[0].id : null;
|
||||
}
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
import React, { useContext, FC } from 'react';
|
||||
import { Story } from '@storybook/store';
|
||||
|
||||
import { DocsContext } from './DocsContext';
|
||||
import { DocsStory } from './DocsStory';
|
||||
import { getDocsStories } from './utils';
|
||||
|
||||
interface PrimaryProps {
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export const Primary: FC<PrimaryProps> = ({ name }) => {
|
||||
const context = useContext(DocsContext);
|
||||
const componentStories = getDocsStories(context);
|
||||
const { componentStories: getComponentStories } = useContext(DocsContext);
|
||||
const componentStories = getComponentStories();
|
||||
let story;
|
||||
if (componentStories) {
|
||||
story = name ? componentStories.find((s) => s.name === name) : componentStories[0];
|
||||
story = name ? componentStories.find((s: Story<any>) => s.name === name) : componentStories[0];
|
||||
}
|
||||
return story ? <DocsStory {...story} expanded={false} withToolbar /> : null;
|
||||
};
|
||||
|
||||
@ -5,8 +5,7 @@ import {
|
||||
SourceProps as PureSourceProps,
|
||||
} from '@storybook/components';
|
||||
import { StoryId } from '@storybook/api';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import { StoryContext } from '@storybook/addons';
|
||||
import { Story } from '@storybook/store';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { SourceContext, SourceContextProps } from './SourceContainer';
|
||||
@ -14,6 +13,7 @@ import { CURRENT_SELECTION } from './types';
|
||||
import { SourceType } from '../shared';
|
||||
|
||||
import { enhanceSource } from './enhanceSource';
|
||||
import { useStories } from './useStory';
|
||||
|
||||
export enum SourceState {
|
||||
OPEN = 'open',
|
||||
@ -43,28 +43,8 @@ type NoneProps = CommonProps;
|
||||
|
||||
type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
|
||||
|
||||
const getStoryContext = (storyId: StoryId, docsContext: DocsContextProps): StoryContext | null => {
|
||||
const { storyStore } = docsContext;
|
||||
const storyContext = storyStore?.fromId(storyId);
|
||||
|
||||
if (!storyContext) {
|
||||
// Fallback if we can't get the story data for this story
|
||||
logger.warn(`Unable to find information for story ID '${storyId}'`);
|
||||
return null;
|
||||
}
|
||||
|
||||
return storyContext;
|
||||
};
|
||||
|
||||
const getSourceState = (storyIds: string[], docsContext: DocsContextProps) => {
|
||||
const states = storyIds
|
||||
.map((storyId) => {
|
||||
const storyContext = getStoryContext(storyId, docsContext);
|
||||
if (!storyContext) return null;
|
||||
return storyContext.parameters.docs?.source?.state;
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
const getSourceState = (stories: Story[]) => {
|
||||
const states = stories.map((story) => story.parameters.docs?.source?.state).filter(Boolean);
|
||||
if (states.length === 0) return SourceState.CLOSED;
|
||||
// FIXME: handling multiple stories is a pain
|
||||
return states[0];
|
||||
@ -77,12 +57,12 @@ const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): st
|
||||
return sources?.[storyId] || '';
|
||||
};
|
||||
|
||||
const getSnippet = (snippet: string, storyContext?: StoryContext): string => {
|
||||
if (!storyContext) {
|
||||
const getSnippet = (snippet: string, story?: Story<any>): string => {
|
||||
if (!story) {
|
||||
return snippet;
|
||||
}
|
||||
|
||||
const { parameters } = storyContext;
|
||||
const { parameters } = story;
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
const isArgsStory = parameters.__isArgsStory;
|
||||
const type = parameters.docs?.source?.type || SourceType.AUTO;
|
||||
@ -95,16 +75,16 @@ const getSnippet = (snippet: string, storyContext?: StoryContext): string => {
|
||||
|
||||
// if user has explicitly set this as dynamic, use snippet
|
||||
if (type === SourceType.DYNAMIC) {
|
||||
return parameters.docs?.transformSource?.(snippet, storyContext) || snippet;
|
||||
return parameters.docs?.transformSource?.(snippet, story) || snippet;
|
||||
}
|
||||
|
||||
// if this is an args story and there's a snippet
|
||||
if (type === SourceType.AUTO && snippet && isArgsStory) {
|
||||
return parameters.docs?.transformSource?.(snippet, storyContext) || snippet;
|
||||
return parameters.docs?.transformSource?.(snippet, story) || snippet;
|
||||
}
|
||||
|
||||
// otherwise, use the source code logic
|
||||
const enhanced = enhanceSource(storyContext) || parameters;
|
||||
const enhanced = enhanceSource(story) || parameters;
|
||||
return enhanced?.docs?.source?.code || '';
|
||||
};
|
||||
|
||||
@ -112,10 +92,11 @@ type SourceStateProps = { state: SourceState };
|
||||
|
||||
export const getSourceProps = (
|
||||
props: SourceProps,
|
||||
docsContext: DocsContextProps,
|
||||
docsContext: DocsContextProps<any>,
|
||||
sourceContext: SourceContextProps
|
||||
): PureSourceProps & SourceStateProps => {
|
||||
const { id: currentId, parameters = {} } = docsContext;
|
||||
const { id: currentId, storyById } = docsContext;
|
||||
const { parameters } = storyById(currentId);
|
||||
|
||||
const codeProps = props as CodeProps;
|
||||
const singleProps = props as SingleSourceProps;
|
||||
@ -127,17 +108,22 @@ export const getSourceProps = (
|
||||
singleProps.id === CURRENT_SELECTION || !singleProps.id ? currentId : singleProps.id;
|
||||
const targetIds = multiProps.ids || [targetId];
|
||||
|
||||
const stories = useStories(targetIds, docsContext);
|
||||
if (!stories) {
|
||||
return { error: SourceError.SOURCE_UNAVAILABLE, state: SourceState.NONE };
|
||||
}
|
||||
|
||||
if (!source) {
|
||||
source = targetIds
|
||||
.map((storyId) => {
|
||||
.map((storyId, idx) => {
|
||||
const storySource = getStorySource(storyId, sourceContext);
|
||||
const storyContext = getStoryContext(storyId, docsContext);
|
||||
return getSnippet(storySource, storyContext);
|
||||
const storyObj = stories[idx];
|
||||
return getSnippet(storySource, storyObj);
|
||||
})
|
||||
.join('\n\n');
|
||||
}
|
||||
|
||||
const state = getSourceState(targetIds, docsContext);
|
||||
const state = getSourceState(stories);
|
||||
|
||||
const { docs: docsParameters = {} } = parameters;
|
||||
const { source: sourceParameters = {} } = docsParameters;
|
||||
|
||||
@ -18,24 +18,18 @@ export const SourceContainer: FC<{}> = ({ children }) => {
|
||||
const [sources, setSources] = useState<StorySources>({});
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const sourcesRef = React.useRef<StorySources>();
|
||||
const handleSnippetRendered = (id: StoryId, newItem: SourceItem) => {
|
||||
if (newItem !== sources[id]) {
|
||||
const newSources = { ...sourcesRef.current, [id]: newItem };
|
||||
sourcesRef.current = newSources;
|
||||
}
|
||||
};
|
||||
|
||||
// Bind this early (instead of inside `useEffect`), because the `SNIPPET_RENDERED` event
|
||||
// is triggered *during* the rendering process, not after. We have to use the ref
|
||||
// to ensure we don't end up calling setState outside the effect though.
|
||||
channel.on(SNIPPET_RENDERED, handleSnippetRendered);
|
||||
|
||||
useEffect(() => {
|
||||
const current = sourcesRef.current || {};
|
||||
if (!deepEqual(sources, current)) {
|
||||
setSources(current);
|
||||
}
|
||||
const handleSnippetRendered = (id: StoryId, newItem: SourceItem) => {
|
||||
if (newItem !== sources[id]) {
|
||||
const newSources = { ...sources, [id]: newItem };
|
||||
|
||||
if (!deepEqual(sources, newSources)) {
|
||||
setSources(newSources);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
channel.on(SNIPPET_RENDERED, handleSnippetRendered);
|
||||
|
||||
return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
|
||||
});
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { useContext, FunctionComponent } from 'react';
|
||||
import { DocsContext } from './DocsContext';
|
||||
import { DocsStory } from './DocsStory';
|
||||
import { Heading } from './Heading';
|
||||
import { getDocsStories } from './utils';
|
||||
import { DocsStoryProps } from './types';
|
||||
|
||||
interface StoriesProps {
|
||||
@ -11,10 +10,9 @@ interface StoriesProps {
|
||||
}
|
||||
|
||||
export const Stories: FunctionComponent<StoriesProps> = ({ title, includePrimary = false }) => {
|
||||
const context = useContext(DocsContext);
|
||||
const componentStories = getDocsStories(context);
|
||||
const { componentStories } = useContext(DocsContext);
|
||||
|
||||
let stories: DocsStoryProps[] = componentStories;
|
||||
let stories: DocsStoryProps[] = componentStories();
|
||||
if (!includePrimary) stories = stories.slice(1);
|
||||
|
||||
if (!stories || stories.length === 0) {
|
||||
|
||||
@ -1,17 +1,32 @@
|
||||
import React, { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react';
|
||||
import React, {
|
||||
FunctionComponent,
|
||||
ReactNode,
|
||||
ElementType,
|
||||
ComponentProps,
|
||||
useContext,
|
||||
useRef,
|
||||
useEffect,
|
||||
useMemo,
|
||||
} from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { resetComponents, Story as PureStory } from '@storybook/components';
|
||||
import { toId, storyNameFromExport } from '@storybook/csf';
|
||||
import { Args, BaseAnnotations } from '@storybook/addons';
|
||||
import { CURRENT_SELECTION } from './types';
|
||||
import { StoryId, toId, storyNameFromExport, StoryAnnotations, AnyFramework } from '@storybook/csf';
|
||||
import { Story as StoryType } from '@storybook/store';
|
||||
import global from 'global';
|
||||
|
||||
import { CURRENT_SELECTION } from './types';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { useStory } from './useStory';
|
||||
|
||||
export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
|
||||
|
||||
type PureStoryProps = ComponentProps<typeof PureStory>;
|
||||
|
||||
type CommonProps = BaseAnnotations<Args, any> & {
|
||||
type Annotations = Pick<
|
||||
StoryAnnotations,
|
||||
'decorators' | 'parameters' | 'args' | 'argTypes' | 'loaders'
|
||||
>;
|
||||
type CommonProps = Annotations & {
|
||||
height?: string;
|
||||
inline?: boolean;
|
||||
};
|
||||
@ -34,22 +49,26 @@ export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & Co
|
||||
|
||||
export const lookupStoryId = (
|
||||
storyName: string,
|
||||
{ mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps
|
||||
{ mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps
|
||||
) =>
|
||||
toId(
|
||||
mdxComponentMeta.id || mdxComponentMeta.title,
|
||||
mdxComponentAnnotations.id || mdxComponentAnnotations.title,
|
||||
storyNameFromExport(mdxStoryNameToKey[storyName])
|
||||
);
|
||||
|
||||
export const getStoryProps = (props: StoryProps, context: DocsContextProps): PureStoryProps => {
|
||||
export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryId => {
|
||||
const { id } = props as StoryRefProps;
|
||||
const { name } = props as StoryDefProps;
|
||||
const inputId = id === CURRENT_SELECTION ? context.id : id;
|
||||
const previewId = inputId || lookupStoryId(name, context);
|
||||
const data = context.storyStore.fromId(previewId) || {};
|
||||
return inputId || lookupStoryId(name, context);
|
||||
};
|
||||
|
||||
const { height, inline } = props;
|
||||
const { storyFn = undefined, name: storyName = undefined, parameters = {} } = data;
|
||||
export const getStoryProps = <TFramework extends AnyFramework>(
|
||||
{ height, inline }: StoryProps,
|
||||
story: StoryType<TFramework>,
|
||||
context: DocsContextProps<TFramework>
|
||||
): PureStoryProps => {
|
||||
const { name: storyName, parameters } = story;
|
||||
const { docs = {} } = parameters;
|
||||
|
||||
if (docs.disable) {
|
||||
@ -65,33 +84,100 @@ export const getStoryProps = (props: StoryProps, context: DocsContextProps): Pur
|
||||
);
|
||||
}
|
||||
|
||||
const boundStoryFn = () =>
|
||||
story.unboundStoryFn({
|
||||
...context.getStoryContext(story),
|
||||
loaded: {},
|
||||
});
|
||||
return {
|
||||
parameters,
|
||||
inline: storyIsInline,
|
||||
id: previewId,
|
||||
storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn, data) : storyFn,
|
||||
id: story.id,
|
||||
height: height || (storyIsInline ? undefined : iframeHeight),
|
||||
title: storyName,
|
||||
...(storyIsInline && {
|
||||
parameters,
|
||||
storyFn: () => prepareForInline(boundStoryFn, story),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
const Story: FunctionComponent<StoryProps> = (props) => (
|
||||
<DocsContext.Consumer>
|
||||
{(context) => {
|
||||
const storyProps = getStoryProps(props, context);
|
||||
if (!storyProps) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div id={storyBlockIdFromId(storyProps.id)}>
|
||||
<MDXProvider components={resetComponents}>
|
||||
<PureStory {...storyProps} />
|
||||
</MDXProvider>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</DocsContext.Consumer>
|
||||
);
|
||||
const Story: FunctionComponent<StoryProps> = (props) => {
|
||||
const context = useContext(DocsContext);
|
||||
const ref = useRef();
|
||||
const story = useStory(getStoryId(props, context), context);
|
||||
|
||||
// Ensure we wait until this story is properly rendered in the docs context.
|
||||
// The purpose of this is to ensure that that the `DOCS_RENDERED` event isn't emitted
|
||||
// until all stories on the page have rendered.
|
||||
const { id: storyId, registerRenderingStory } = context;
|
||||
const storyRendered = useMemo(registerRenderingStory, [storyId]);
|
||||
useEffect(() => {
|
||||
if (story) storyRendered();
|
||||
}, [story]);
|
||||
|
||||
useEffect(() => {
|
||||
let cleanup: () => void;
|
||||
if (story && ref.current) {
|
||||
const { componentId, id, title, name } = story;
|
||||
const renderContext = {
|
||||
componentId,
|
||||
title,
|
||||
kind: title,
|
||||
id,
|
||||
name,
|
||||
story: name,
|
||||
// TODO what to do when these fail?
|
||||
showMain: () => {},
|
||||
showError: () => {},
|
||||
showException: () => {},
|
||||
};
|
||||
cleanup = context.renderStoryToElement({
|
||||
story,
|
||||
renderContext,
|
||||
element: ref.current as Element,
|
||||
});
|
||||
}
|
||||
return () => cleanup && cleanup();
|
||||
}, [story]);
|
||||
|
||||
if (!story) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
const storyProps = getStoryProps(props, story, context);
|
||||
if (!storyProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (global?.FEATURES.modernInlineRender) {
|
||||
// We do this so React doesn't complain when we replace the span in a secondary render
|
||||
const htmlContents = `<span data-is-loading-indicator="true">loading story...</span>`;
|
||||
|
||||
// FIXME: height/style/etc. lifted from PureStory
|
||||
const { height } = storyProps;
|
||||
return (
|
||||
<div id={storyBlockIdFromId(story.id)}>
|
||||
<MDXProvider components={resetComponents}>
|
||||
{height ? (
|
||||
<style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
|
||||
) : null}
|
||||
<div
|
||||
ref={ref}
|
||||
data-name={story.name}
|
||||
dangerouslySetInnerHTML={{ __html: htmlContents }}
|
||||
/>
|
||||
</MDXProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={storyBlockIdFromId(story.id)}>
|
||||
<MDXProvider components={resetComponents}>
|
||||
<PureStory {...storyProps} />
|
||||
</MDXProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Story.defaultProps = {
|
||||
children: null,
|
||||
|
||||
@ -7,8 +7,8 @@ interface SubtitleProps {
|
||||
}
|
||||
|
||||
export const Subtitle: FunctionComponent<SubtitleProps> = ({ children }) => {
|
||||
const context = useContext(DocsContext);
|
||||
const { parameters } = context;
|
||||
const { id, storyById } = useContext(DocsContext);
|
||||
const { parameters } = storyById(id);
|
||||
let text: JSX.Element | string = children;
|
||||
if (!text) {
|
||||
text = parameters?.componentSubtitle;
|
||||
|
||||
@ -8,9 +8,9 @@ interface TitleProps {
|
||||
|
||||
const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
|
||||
|
||||
export const extractTitle = ({ kind }: DocsContextProps) => {
|
||||
const groups = kind.trim().split(STORY_KIND_PATH_SEPARATOR);
|
||||
return (groups && groups[groups.length - 1]) || kind;
|
||||
export const extractTitle = ({ title }: DocsContextProps) => {
|
||||
const groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
|
||||
return (groups && groups[groups.length - 1]) || title;
|
||||
};
|
||||
|
||||
export const Title: FunctionComponent<TitleProps> = ({ children }) => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { combineParameters } from '@storybook/client-api';
|
||||
import { StoryContext, Parameters } from '@storybook/addons';
|
||||
import { Parameters } from '@storybook/addons';
|
||||
import { Story } from '@storybook/store';
|
||||
|
||||
// ============================================================
|
||||
// START @storybook/source-loader/extract-source
|
||||
@ -76,8 +77,8 @@ const extract = (targetId: string, { source, locationsMap }: StorySource) => {
|
||||
return extractSource(location, lines);
|
||||
};
|
||||
|
||||
export const enhanceSource = (context: StoryContext): Parameters => {
|
||||
const { id, parameters } = context;
|
||||
export const enhanceSource = (story: Story<any>): Parameters => {
|
||||
const { id, parameters } = story;
|
||||
const { storySource, docs = {} } = parameters;
|
||||
const { transformSource } = docs;
|
||||
|
||||
@ -87,7 +88,7 @@ export const enhanceSource = (context: StoryContext): Parameters => {
|
||||
}
|
||||
|
||||
const input = extract(id, storySource);
|
||||
const code = transformSource ? transformSource(input, context) : input;
|
||||
const code = transformSource ? transformSource(input, story) : input;
|
||||
|
||||
return { docs: combineParameters(docs, { source: { code } }) };
|
||||
};
|
||||
|
||||
30
addons/docs/src/blocks/useStory.ts
Normal file
30
addons/docs/src/blocks/useStory.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { StoryId, AnyFramework } from '@storybook/csf';
|
||||
import { Story } from '@storybook/store';
|
||||
|
||||
import { DocsContextProps } from './DocsContext';
|
||||
|
||||
export function useStory<TFramework extends AnyFramework>(
|
||||
storyId: StoryId,
|
||||
context: DocsContextProps<TFramework>
|
||||
): Story<TFramework> | void {
|
||||
const stories = useStories([storyId], context);
|
||||
return stories && stories[0];
|
||||
}
|
||||
|
||||
export function useStories<TFramework extends AnyFramework>(
|
||||
storyIds: StoryId[],
|
||||
context: DocsContextProps<TFramework>
|
||||
): Story<TFramework>[] | void {
|
||||
const [stories, setStories] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all(storyIds.map((storyId) => context.loadStory(storyId))).then((loadedStories) => {
|
||||
if (!stories) {
|
||||
setStories(loadedStories);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return stories;
|
||||
}
|
||||
@ -1,18 +1,5 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { DocsContextProps } from './DocsContext';
|
||||
import { StoryData, Component } from './types';
|
||||
|
||||
export const getDocsStories = (context: DocsContextProps): StoryData[] => {
|
||||
const { storyStore, kind } = context;
|
||||
|
||||
if (!storyStore) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return storyStore
|
||||
.getStoriesForKind(kind)
|
||||
.filter((s: any) => !(s.parameters && s.parameters.docs && s.parameters.docs.disable));
|
||||
};
|
||||
import { Component } from './types';
|
||||
|
||||
const titleCase = (str: string): string =>
|
||||
str
|
||||
|
||||
@ -43,7 +43,7 @@ export const checkValidCompodocJson = (compodocJson: CompodocJson) => {
|
||||
const hasDecorator = (item: Property, decoratorName: string) =>
|
||||
item.decorators && item.decorators.find((x: any) => x.name === decoratorName);
|
||||
|
||||
const mapPropertyToSection = (key: string, item: Property) => {
|
||||
const mapPropertyToSection = (item: Property) => {
|
||||
if (hasDecorator(item, 'ViewChild')) {
|
||||
return 'view child';
|
||||
}
|
||||
@ -73,7 +73,7 @@ const mapItemToSection = (key: string, item: Method | Property): string => {
|
||||
if (isMethod(item)) {
|
||||
throw new Error("Cannot be of type Method if key === 'propertiesClass'");
|
||||
}
|
||||
return mapPropertyToSection(key, item);
|
||||
return mapPropertyToSection(item);
|
||||
default:
|
||||
throw new Error(`Unknown key: ${key}`);
|
||||
}
|
||||
|
||||
@ -2,16 +2,19 @@ import React from 'react';
|
||||
import pLimit from 'p-limit';
|
||||
import { nanoid } from 'nanoid';
|
||||
|
||||
import { IStory, StoryContext } from '@storybook/angular';
|
||||
import { AngularFramework, StoryContext } from '@storybook/angular';
|
||||
import { rendererFactory } from '@storybook/angular/renderer';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { PartialStoryFn } from '@storybook/csf';
|
||||
|
||||
const limit = pLimit(1);
|
||||
|
||||
/**
|
||||
* Uses the angular renderer to generate a story. Uses p-limit to run synchronously
|
||||
*/
|
||||
export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: StoryContext) => {
|
||||
export const prepareForInline = (
|
||||
storyFn: PartialStoryFn<AngularFramework>,
|
||||
{ id, parameters }: StoryContext
|
||||
) => {
|
||||
return React.createElement('div', {
|
||||
ref: async (node?: HTMLDivElement): Promise<void> => {
|
||||
if (!node) {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { addons, StoryContext, StoryFn } from '@storybook/addons';
|
||||
import { IStory } from '@storybook/angular';
|
||||
import { addons, useEffect } from '@storybook/addons';
|
||||
import { PartialStoryFn } from '@storybook/csf';
|
||||
import { StoryContext, AngularFramework } from '@storybook/angular';
|
||||
import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
|
||||
import prettierHtml from 'prettier/parser-html';
|
||||
import prettier from 'prettier/standalone';
|
||||
@ -30,7 +31,10 @@ const prettyUp = (source: string) => {
|
||||
* @param storyFn Fn
|
||||
* @param context StoryContext
|
||||
*/
|
||||
export const sourceDecorator = (storyFn: StoryFn<IStory>, context: StoryContext) => {
|
||||
export const sourceDecorator = (
|
||||
storyFn: PartialStoryFn<AngularFramework>,
|
||||
context: StoryContext
|
||||
) => {
|
||||
const story = storyFn();
|
||||
if (skipSourceRender(context)) {
|
||||
return story;
|
||||
@ -38,9 +42,12 @@ export const sourceDecorator = (storyFn: StoryFn<IStory>, context: StoryContext)
|
||||
const channel = addons.getChannel();
|
||||
const { props, template, userDefinedTemplate } = story;
|
||||
|
||||
const {
|
||||
parameters: { component, argTypes },
|
||||
} = context;
|
||||
const { component, argTypes } = context;
|
||||
|
||||
let toEmit: string;
|
||||
useEffect(() => {
|
||||
if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(template));
|
||||
});
|
||||
|
||||
if (component && !userDefinedTemplate) {
|
||||
const source = computesTemplateSourceFromComponent(component, props, argTypes);
|
||||
@ -48,14 +55,10 @@ export const sourceDecorator = (storyFn: StoryFn<IStory>, context: StoryContext)
|
||||
// We might have a story with a Directive or Service defined as the component
|
||||
// In these cases there might exist a template, even if we aren't able to create source from component
|
||||
if (source || template) {
|
||||
channel.emit(SNIPPET_RENDERED, context.id, prettyUp(source || template));
|
||||
toEmit = prettyUp(source || template);
|
||||
}
|
||||
return story;
|
||||
}
|
||||
|
||||
if (template) {
|
||||
channel.emit(SNIPPET_RENDERED, context.id, prettyUp(template));
|
||||
return story;
|
||||
} else if (template) {
|
||||
toEmit = prettyUp(template);
|
||||
}
|
||||
|
||||
return story;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { ArgType, ArgTypes } from '@storybook/api';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { StrictInputType } from '@storybook/csf';
|
||||
import { enhanceArgTypes } from './enhanceArgTypes';
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
@ -12,30 +13,28 @@ const enhance = ({
|
||||
extractedArgTypes,
|
||||
isArgsStory = true,
|
||||
}: {
|
||||
argType?: ArgType;
|
||||
argType?: StrictInputType;
|
||||
arg?: any;
|
||||
extractedArgTypes?: ArgTypes;
|
||||
isArgsStory?: boolean;
|
||||
}) => {
|
||||
const context = {
|
||||
id: 'foo--bar',
|
||||
componentId: 'foo',
|
||||
title: 'foo',
|
||||
kind: 'foo',
|
||||
id: 'foo--bar',
|
||||
name: 'bar',
|
||||
story: 'bar',
|
||||
component: 'dummy',
|
||||
parameters: {
|
||||
component: 'dummy',
|
||||
__isArgsStory: isArgsStory,
|
||||
docs: {
|
||||
extractArgTypes: extractedArgTypes && (() => extractedArgTypes),
|
||||
},
|
||||
argTypes: argType && {
|
||||
input: argType,
|
||||
},
|
||||
args: {
|
||||
input: arg,
|
||||
},
|
||||
},
|
||||
args: {},
|
||||
argTypes: {},
|
||||
argTypes: argType && { input: argType },
|
||||
initialArgs: { input: arg },
|
||||
args: { input: arg },
|
||||
globals: {},
|
||||
};
|
||||
return enhanceArgTypes(context);
|
||||
@ -46,7 +45,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('should no-op', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { foo: 'unmodified', type: { name: 'number' } },
|
||||
argType: { name: 'input', foo: 'unmodified', type: { name: 'number' } },
|
||||
isArgsStory: false,
|
||||
}).input
|
||||
).toMatchInlineSnapshot(`
|
||||
@ -66,7 +65,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('number', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { type: { name: 'number' } },
|
||||
argType: { name: 'input', type: { name: 'number' } },
|
||||
}).input
|
||||
).toMatchInlineSnapshot(`
|
||||
{
|
||||
@ -99,7 +98,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('range', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { control: { type: 'range', min: 0, max: 100 } },
|
||||
argType: { name: 'input', control: { type: 'range', min: 0, max: 100 } },
|
||||
}).input
|
||||
).toMatchInlineSnapshot(`
|
||||
{
|
||||
@ -115,7 +114,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('options', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { control: { type: 'radio', options: [1, 2] } },
|
||||
argType: { name: 'input', control: { type: 'radio', options: [1, 2] } },
|
||||
}).input
|
||||
).toMatchInlineSnapshot(`
|
||||
{
|
||||
@ -137,7 +136,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('user-specified argTypes take precedence over extracted argTypes', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { type: { name: 'number' } },
|
||||
argType: { name: 'input', type: { name: 'number' } },
|
||||
extractedArgTypes: { input: { type: { name: 'string' } } },
|
||||
}).input
|
||||
).toMatchInlineSnapshot(`
|
||||
@ -153,7 +152,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('user-specified argTypes take precedence over inferred argTypes', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { type: { name: 'number' } },
|
||||
argType: { name: 'input', type: { name: 'number' } },
|
||||
arg: 'hello',
|
||||
}).input
|
||||
).toMatchInlineSnapshot(`
|
||||
@ -184,7 +183,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('user-specified controls take precedence over inferred controls', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { defaultValue: 5, control: { type: 'range', step: 50 } },
|
||||
argType: { name: 'input', defaultValue: 5, control: { type: 'range', step: 50 } },
|
||||
arg: 3,
|
||||
extractedArgTypes: { input: { name: 'input' } },
|
||||
}).input
|
||||
@ -223,7 +222,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('includes extracted argTypes when user-specified argTypes match', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { type: { name: 'number' } },
|
||||
argType: { name: 'input', type: { name: 'number' } },
|
||||
extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } },
|
||||
})
|
||||
).toMatchInlineSnapshot(`
|
||||
@ -246,7 +245,7 @@ describe('enhanceArgTypes', () => {
|
||||
it('excludes extracted argTypes when user-specified argTypes do not match', () => {
|
||||
expect(
|
||||
enhance({
|
||||
argType: { type: { name: 'number' } },
|
||||
argType: { name: 'input', type: { name: 'number' } },
|
||||
extractedArgTypes: { foo: { type: { name: 'number' } } },
|
||||
})
|
||||
).toMatchInlineSnapshot(`
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { ArgTypesEnhancer, combineParameters } from '@storybook/client-api';
|
||||
import { normalizeArgTypes } from './normalizeArgTypes';
|
||||
import { AnyFramework, StoryContextForEnhancers } from '@storybook/csf';
|
||||
import { combineParameters } from '@storybook/store';
|
||||
|
||||
export const enhanceArgTypes: ArgTypesEnhancer = (context) => {
|
||||
const { component, argTypes: userArgTypes = {}, docs = {} } = context.parameters;
|
||||
export const enhanceArgTypes = <TFramework extends AnyFramework>(
|
||||
context: StoryContextForEnhancers<TFramework>
|
||||
) => {
|
||||
const {
|
||||
component,
|
||||
argTypes: userArgTypes,
|
||||
parameters: { docs = {} },
|
||||
} = context;
|
||||
const { extractArgTypes } = docs;
|
||||
|
||||
const normalizedArgTypes = normalizeArgTypes(userArgTypes);
|
||||
const namedArgTypes = mapValues(normalizedArgTypes, (val, key) => ({ name: key, ...val }));
|
||||
const extractedArgTypes = extractArgTypes && component ? extractArgTypes(component) : {};
|
||||
const withExtractedTypes = extractedArgTypes
|
||||
? combineParameters(extractedArgTypes, namedArgTypes)
|
||||
: namedArgTypes;
|
||||
? combineParameters(extractedArgTypes, userArgTypes)
|
||||
: userArgTypes;
|
||||
|
||||
return withExtractedTypes;
|
||||
};
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { SBType } from '@storybook/client-api';
|
||||
|
||||
const normalizeType = (type: SBType | string) => (typeof type === 'string' ? { name: type } : type);
|
||||
|
||||
const normalizeControl = (control?: any) =>
|
||||
typeof control === 'string' ? { type: control } : control;
|
||||
|
||||
export const normalizeArgTypes = (argTypes: ArgTypes) =>
|
||||
mapValues(argTypes, (argType) => {
|
||||
if (!argType) return argType;
|
||||
const normalized = { ...argType };
|
||||
const { type, control } = argType;
|
||||
if (type) normalized.type = normalizeType(type);
|
||||
if (control) normalized.control = normalizeControl(control);
|
||||
return normalized;
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { PartialStoryFn } from '@storybook/csf';
|
||||
|
||||
export function prepareForInline(storyFn: StoryFn<string>) {
|
||||
export function prepareForInline(storyFn: PartialStoryFn<any>) {
|
||||
const html = storyFn();
|
||||
if (typeof html === 'string') {
|
||||
// eslint-disable-next-line react/no-danger
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { addons, StoryContext, useEffect } from '@storybook/addons';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
import { SNIPPET_RENDERED } from '../../shared';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
const mockedUseEffect = useEffect as jest.Mocked<typeof useEffect>;
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
print: (val: any) => val,
|
||||
test: (val) => typeof val === 'string',
|
||||
});
|
||||
|
||||
const tick = () => new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
|
||||
id: `html-test--${name}`,
|
||||
kind: 'js-text',
|
||||
@ -25,15 +28,17 @@ describe('sourceDecorator', () => {
|
||||
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
|
||||
beforeEach(() => {
|
||||
mockedAddons.getChannel.mockReset();
|
||||
mockedUseEffect.mockImplementation((cb) => setTimeout(cb, 0));
|
||||
|
||||
mockChannel = { on: jest.fn(), emit: jest.fn() };
|
||||
mockedAddons.getChannel.mockReturnValue(mockChannel as any);
|
||||
});
|
||||
|
||||
it('should render dynamically for args stories', () => {
|
||||
it('should render dynamically for args stories', async () => {
|
||||
const storyFn = (args: any) => `<div>args story</div>`;
|
||||
const context = makeContext('args', { __isArgsStory: true }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
@ -41,7 +46,7 @@ describe('sourceDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should dedent source by default', () => {
|
||||
it('should dedent source by default', async () => {
|
||||
const storyFn = (args: any) => `
|
||||
<div>
|
||||
args story
|
||||
@ -49,6 +54,7 @@ describe('sourceDecorator', () => {
|
||||
`;
|
||||
const context = makeContext('args', { __isArgsStory: true }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
@ -56,14 +62,15 @@ describe('sourceDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should skip dynamic rendering for no-args stories', () => {
|
||||
it('should skip dynamic rendering for no-args stories', async () => {
|
||||
const storyFn = () => `<div>classic story</div>`;
|
||||
const context = makeContext('classic', {}, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should use the originalStoryFn if excludeDecorators is set', () => {
|
||||
it('should use the originalStoryFn if excludeDecorators is set', async () => {
|
||||
const storyFn = (args: any) => `<div>args story</div>`;
|
||||
const decoratedStoryFn = (args: any) => `
|
||||
<div style="padding: 25px; border: 3px solid red;">${storyFn(args)}</div>
|
||||
@ -82,6 +89,7 @@ describe('sourceDecorator', () => {
|
||||
{ originalStoryFn: storyFn }
|
||||
);
|
||||
sourceDecorator(decoratedStoryFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
@ -89,12 +97,13 @@ describe('sourceDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('allows the snippet output to be modified by transformSource', () => {
|
||||
it('allows the snippet output to be modified by transformSource', async () => {
|
||||
const storyFn = (args: any) => `<div>args story</div>`;
|
||||
const transformSource = (dom: string) => `<p>${dom}</p>`;
|
||||
const docs = { transformSource };
|
||||
const context = makeContext('args', { __isArgsStory: true, docs }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
/* global window */
|
||||
import { addons, StoryContext, StoryFn } from '@storybook/addons';
|
||||
import { addons, useEffect } from '@storybook/addons';
|
||||
import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
import dedent from 'ts-dedent';
|
||||
import { HtmlFramework } from '@storybook/html';
|
||||
|
||||
import { SNIPPET_RENDERED, SourceType } from '../../shared';
|
||||
|
||||
function skipSourceRender(context: StoryContext) {
|
||||
function skipSourceRender(context: StoryContext<HtmlFramework>) {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
@ -23,22 +26,27 @@ function defaultTransformSource(source: string) {
|
||||
return dedent(source);
|
||||
}
|
||||
|
||||
function applyTransformSource(source: string, context: StoryContext): string {
|
||||
function applyTransformSource(source: string, context: StoryContext<HtmlFramework>): string {
|
||||
const docs = context.parameters.docs ?? {};
|
||||
const transformSource = docs.transformSource ?? defaultTransformSource;
|
||||
return transformSource(source, context);
|
||||
}
|
||||
|
||||
export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
|
||||
export function sourceDecorator(
|
||||
storyFn: PartialStoryFn<HtmlFramework>,
|
||||
context: StoryContext<HtmlFramework>
|
||||
) {
|
||||
const story = context?.parameters.docs?.source?.excludeDecorators
|
||||
? context.originalStoryFn(context.args)
|
||||
? (context.originalStoryFn as ArgsStoryFn<HtmlFramework>)(context.args, context)
|
||||
: storyFn();
|
||||
|
||||
let source: string;
|
||||
if (typeof story === 'string' && !skipSourceRender(context)) {
|
||||
const source = applyTransformSource(story, context);
|
||||
|
||||
addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
|
||||
source = applyTransformSource(story, context);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
|
||||
});
|
||||
|
||||
return story;
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { PartialStoryFn } from '@storybook/csf';
|
||||
import { ReactFramework } from '@storybook/react';
|
||||
|
||||
import { extractArgTypes } from './extractArgTypes';
|
||||
import { extractComponentDescription } from '../../lib/docgen';
|
||||
import { jsxDecorator } from './jsxDecorator';
|
||||
@ -7,7 +9,7 @@ export const parameters = {
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
// NOTE: that the result is a react element. Hooks support is provided by the outer code.
|
||||
prepareForInline: (storyFn: StoryFn) => storyFn(),
|
||||
prepareForInline: (storyFn: PartialStoryFn<ReactFramework>) => storyFn(),
|
||||
extractArgTypes,
|
||||
extractComponentDescription,
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { StrictArgTypes } from '@storybook/csf';
|
||||
import { PropDef, ArgTypesExtractor } from '../../lib/docgen';
|
||||
import { extractProps } from './extractProps';
|
||||
|
||||
@ -6,7 +6,7 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
|
||||
if (component) {
|
||||
const { rows } = extractProps(component);
|
||||
if (rows) {
|
||||
return rows.reduce((acc: ArgTypes, row: PropDef) => {
|
||||
return rows.reduce((acc: StrictArgTypes, row: PropDef) => {
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { addons, StoryContext, useEffect } from '@storybook/addons';
|
||||
import { renderJsx, jsxDecorator } from './jsxDecorator';
|
||||
import { SNIPPET_RENDERED } from '../../shared';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
const mockedUseEffect = useEffect as jest.Mocked<typeof useEffect>;
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
print: (val: any) => val,
|
||||
@ -168,15 +169,17 @@ describe('jsxDecorator', () => {
|
||||
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
|
||||
beforeEach(() => {
|
||||
mockedAddons.getChannel.mockReset();
|
||||
mockedUseEffect.mockImplementation((cb) => setTimeout(cb, 0));
|
||||
|
||||
mockChannel = { on: jest.fn(), emit: jest.fn() };
|
||||
mockedAddons.getChannel.mockReturnValue(mockChannel as any);
|
||||
});
|
||||
|
||||
it('should render dynamically for args stories', () => {
|
||||
it('should render dynamically for args stories', async () => {
|
||||
const storyFn = (args: any) => <div>args story</div>;
|
||||
const context = makeContext('args', { __isArgsStory: true }, {});
|
||||
jsxDecorator(storyFn, context);
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'jsx-test--args',
|
||||
@ -184,7 +187,7 @@ describe('jsxDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should not render decorators when provided excludeDecorators parameter', () => {
|
||||
it('should not render decorators when provided excludeDecorators parameter', async () => {
|
||||
const storyFn = (args: any) => <div>args story</div>;
|
||||
const decoratedStoryFn = (args: any) => (
|
||||
<div style={{ padding: 25, border: '3px solid red' }}>{storyFn(args)}</div>
|
||||
@ -203,6 +206,8 @@ describe('jsxDecorator', () => {
|
||||
{ originalStoryFn: storyFn }
|
||||
);
|
||||
jsxDecorator(decoratedStoryFn, context);
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'jsx-test--args',
|
||||
@ -210,20 +215,24 @@ describe('jsxDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should skip dynamic rendering for no-args stories', () => {
|
||||
it('should skip dynamic rendering for no-args stories', async () => {
|
||||
const storyFn = () => <div>classic story</div>;
|
||||
const context = makeContext('classic', {}, {});
|
||||
jsxDecorator(storyFn, context);
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
expect(mockChannel.emit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// This is deprecated, but still test it
|
||||
it('allows the snippet output to be modified by onBeforeRender', () => {
|
||||
it('allows the snippet output to be modified by onBeforeRender', async () => {
|
||||
const storyFn = (args: any) => <div>args story</div>;
|
||||
const onBeforeRender = (dom: string) => `<p>${dom}</p>`;
|
||||
const jsx = { onBeforeRender };
|
||||
const context = makeContext('args', { __isArgsStory: true, jsx }, {});
|
||||
jsxDecorator(storyFn, context);
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'jsx-test--args',
|
||||
@ -231,12 +240,14 @@ describe('jsxDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('allows the snippet output to be modified by transformSource', () => {
|
||||
it('allows the snippet output to be modified by transformSource', async () => {
|
||||
const storyFn = (args: any) => <div>args story</div>;
|
||||
const transformSource = (dom: string) => `<p>${dom}</p>`;
|
||||
const jsx = { transformSource };
|
||||
const context = makeContext('args', { __isArgsStory: true, jsx }, {});
|
||||
jsxDecorator(storyFn, context);
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'jsx-test--args',
|
||||
@ -253,7 +264,7 @@ describe('jsxDecorator', () => {
|
||||
expect(transformSource).toHaveBeenCalledWith('<div>\n args story\n</div>', context);
|
||||
});
|
||||
|
||||
it('renders MDX properly', () => {
|
||||
it('renders MDX properly', async () => {
|
||||
// FIXME: generate this from actual MDX
|
||||
const mdxElement = {
|
||||
type: { displayName: 'MDXCreateElement' },
|
||||
@ -265,6 +276,7 @@ describe('jsxDecorator', () => {
|
||||
};
|
||||
|
||||
jsxDecorator(() => mdxElement, makeContext('mdx-args', { __isArgsStory: true }, {}));
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
|
||||
@ -3,8 +3,10 @@ import reactElementToJSXString, { Options } from 'react-element-to-jsx-string';
|
||||
import dedent from 'ts-dedent';
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { addons, useEffect } from '@storybook/addons';
|
||||
import { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/csf';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import { ReactFramework } from '@storybook/react';
|
||||
|
||||
import { SourceType, SNIPPET_RENDERED } from '../../shared';
|
||||
import { getDocgenSection } from '../../lib/docgen';
|
||||
@ -22,7 +24,7 @@ type JSXOptions = Options & {
|
||||
/** Deprecated: A function ran after the story is rendered */
|
||||
onBeforeRender?(dom: string): string;
|
||||
/** A function ran after a story is rendered (prefer this over `onBeforeRender`) */
|
||||
transformSource?(dom: string, context?: StoryContext): string;
|
||||
transformSource?(dom: string, context?: StoryContext<ReactFramework>): string;
|
||||
};
|
||||
|
||||
/** Run the user supplied onBeforeRender function if it exists */
|
||||
@ -44,7 +46,11 @@ const applyBeforeRender = (domString: string, options: JSXOptions) => {
|
||||
};
|
||||
|
||||
/** Run the user supplied transformSource function if it exists */
|
||||
const applyTransformSource = (domString: string, options: JSXOptions, context?: StoryContext) => {
|
||||
const applyTransformSource = (
|
||||
domString: string,
|
||||
options: JSXOptions,
|
||||
context?: StoryContext<ReactFramework>
|
||||
) => {
|
||||
if (typeof options.transformSource !== 'function') {
|
||||
return domString;
|
||||
}
|
||||
@ -138,7 +144,7 @@ const defaultOpts = {
|
||||
showDefaultProps: false,
|
||||
};
|
||||
|
||||
export const skipJsxRender = (context: StoryContext) => {
|
||||
export const skipJsxRender = (context: StoryContext<ReactFramework>) => {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
@ -165,17 +171,26 @@ const mdxToJsx = (node: any) => {
|
||||
return createElement(originalType, rest, ...jsxChildren);
|
||||
};
|
||||
|
||||
export const jsxDecorator = (storyFn: any, context: StoryContext) => {
|
||||
export const jsxDecorator = (
|
||||
storyFn: PartialStoryFn<ReactFramework>,
|
||||
context: StoryContext<ReactFramework>
|
||||
) => {
|
||||
const channel = addons.getChannel();
|
||||
const skip = skipJsxRender(context);
|
||||
const story = storyFn();
|
||||
|
||||
let jsx = '';
|
||||
|
||||
useEffect(() => {
|
||||
if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
|
||||
});
|
||||
|
||||
// We only need to render JSX if the source block is actually going to
|
||||
// consume it. Otherwise it's just slowing us down.
|
||||
if (skipJsxRender(context)) {
|
||||
if (skip) {
|
||||
return story;
|
||||
}
|
||||
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const options = {
|
||||
...defaultOpts,
|
||||
...(context?.parameters.jsx || {}),
|
||||
@ -183,18 +198,15 @@ export const jsxDecorator = (storyFn: any, context: StoryContext) => {
|
||||
|
||||
// Exclude decorators from source code snippet by default
|
||||
const storyJsx = context?.parameters.docs?.source?.excludeDecorators
|
||||
? context.originalStoryFn(context.args)
|
||||
? (context.originalStoryFn as ArgsStoryFn<ReactFramework>)(context.args, context)
|
||||
: story;
|
||||
|
||||
const sourceJsx = mdxToJsx(storyJsx);
|
||||
|
||||
let jsx = '';
|
||||
const rendered = renderJsx(sourceJsx, options);
|
||||
if (rendered) {
|
||||
jsx = applyTransformSource(rendered, options, context);
|
||||
}
|
||||
|
||||
channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
|
||||
|
||||
return story;
|
||||
};
|
||||
|
||||
@ -10,8 +10,8 @@ import { Component } from '../../blocks';
|
||||
|
||||
const argsTableProps = (component: Component) => {
|
||||
const argTypes = extractArgTypes(component);
|
||||
const parameters = { __isArgsStory: true, argTypes };
|
||||
const rows = inferControls(({ parameters } as unknown) as StoryContext);
|
||||
const parameters = { __isArgsStory: true };
|
||||
const rows = inferControls(({ argTypes, parameters } as unknown) as StoryContext<any>);
|
||||
return { rows };
|
||||
};
|
||||
|
||||
|
||||
@ -3,8 +3,9 @@ import path from 'path';
|
||||
import fs from 'fs';
|
||||
|
||||
import { transformFileSync, transformSync } from '@babel/core';
|
||||
import { inferControls } from '@storybook/client-api';
|
||||
import { inferControls } from '@storybook/store';
|
||||
import { StoryContext } from '@storybook/react';
|
||||
import { AnyFramework } from '@storybook/csf';
|
||||
import requireFromString from 'require-from-string';
|
||||
|
||||
import { extractProps } from './extractProps';
|
||||
@ -69,8 +70,11 @@ describe('react component properties', () => {
|
||||
|
||||
// snapshot the output of `extractArgTypes`
|
||||
const argTypes = extractArgTypes(component);
|
||||
const parameters = { __isArgsStory: true, argTypes };
|
||||
const rows = inferControls(({ parameters } as unknown) as StoryContext);
|
||||
const parameters = { __isArgsStory: true };
|
||||
const rows = inferControls(({
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext<AnyFramework>);
|
||||
expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot'));
|
||||
});
|
||||
}
|
||||
|
||||
@ -73,7 +73,8 @@ describe('Extracting Arguments', () => {
|
||||
"category": "events",
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
"name": "other",
|
||||
"value": "void",
|
||||
},
|
||||
},
|
||||
"event_click": Object {
|
||||
@ -83,7 +84,8 @@ describe('Extracting Arguments', () => {
|
||||
"category": "events",
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
"name": "other",
|
||||
"value": "void",
|
||||
},
|
||||
},
|
||||
"rounded": Object {
|
||||
@ -115,7 +117,8 @@ describe('Extracting Arguments', () => {
|
||||
"category": "slots",
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
"name": "other",
|
||||
"value": "void",
|
||||
},
|
||||
},
|
||||
"text": Object {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { SBScalarType, StrictArgTypes } from '@storybook/csf';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import type {
|
||||
SvelteComponentDoc,
|
||||
@ -31,7 +31,7 @@ export const extractArgTypes: ArgTypesExtractor = (component: ComponentWithDocge
|
||||
};
|
||||
|
||||
export const createArgTypes = (docgen: SvelteComponentDoc) => {
|
||||
const results: ArgTypes = {};
|
||||
const results: StrictArgTypes = {};
|
||||
docgen.data.forEach((item) => {
|
||||
results[item.name] = {
|
||||
control: parseTypeToControl(item.type),
|
||||
@ -39,7 +39,7 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
|
||||
description: item.description,
|
||||
type: {
|
||||
required: hasKeyword('required', item.keywords),
|
||||
name: item.type?.text,
|
||||
name: item.type?.text as SBScalarType['name'],
|
||||
},
|
||||
table: {
|
||||
type: {
|
||||
@ -57,7 +57,7 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
|
||||
results[`event_${item.name}`] = {
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
type: { name: 'void' },
|
||||
type: { name: 'other', value: 'void' },
|
||||
table: {
|
||||
category: 'events',
|
||||
},
|
||||
@ -70,7 +70,7 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
|
||||
description: [item.description, item.params?.map((p) => `\`${p.name}\``).join(' ')]
|
||||
.filter((p) => p)
|
||||
.join('\n\n'),
|
||||
type: { name: 'void' },
|
||||
type: { name: 'other', value: 'void' },
|
||||
table: {
|
||||
category: 'slots',
|
||||
},
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { AnyFramework, StoryFn } from '@storybook/csf';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
// @ts-ignore
|
||||
import HOC from './HOC.svelte';
|
||||
|
||||
export const prepareForInline = (storyFn: StoryFn) => {
|
||||
export const prepareForInline = (storyFn: StoryFn<AnyFramework>) => {
|
||||
const el = React.useRef(null);
|
||||
React.useEffect(() => {
|
||||
const root = new HOC({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { ArgTypes, Args } from '@storybook/api';
|
||||
import { addons, useEffect } from '@storybook/addons';
|
||||
import { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/csf';
|
||||
|
||||
import { SourceType, SNIPPET_RENDERED } from '../../shared';
|
||||
|
||||
@ -8,7 +8,7 @@ import { SourceType, SNIPPET_RENDERED } from '../../shared';
|
||||
*
|
||||
* @param context StoryContext
|
||||
*/
|
||||
const skipSourceRender = (context: StoryContext) => {
|
||||
const skipSourceRender = (context: StoryContext<AnyFramework>) => {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
@ -144,15 +144,22 @@ function getWrapperProperties(component: any) {
|
||||
* @param storyFn Fn
|
||||
* @param context StoryContext
|
||||
*/
|
||||
export const sourceDecorator = (storyFn: any, context: StoryContext) => {
|
||||
export const sourceDecorator = (storyFn: any, context: StoryContext<AnyFramework>) => {
|
||||
const channel = addons.getChannel();
|
||||
const skip = skipSourceRender(context);
|
||||
const story = storyFn();
|
||||
|
||||
if (skipSourceRender(context)) {
|
||||
let source: string;
|
||||
useEffect(() => {
|
||||
if (!skip && source) {
|
||||
channel.emit(SNIPPET_RENDERED, (context || {}).id, source);
|
||||
}
|
||||
});
|
||||
|
||||
if (skip) {
|
||||
return story;
|
||||
}
|
||||
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const { parameters = {}, args = {} } = context || {};
|
||||
let { Component: component = {} } = story;
|
||||
|
||||
@ -161,11 +168,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
|
||||
component = parameters.component;
|
||||
}
|
||||
|
||||
const source = generateSvelteSource(component, args, context?.argTypes, slotProperty);
|
||||
|
||||
if (source) {
|
||||
channel.emit(SNIPPET_RENDERED, (context || {}).id, source);
|
||||
}
|
||||
source = generateSvelteSource(component, args, context?.argTypes, slotProperty);
|
||||
|
||||
return story;
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { StrictArgTypes } from '@storybook/csf';
|
||||
import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
|
||||
import { convert } from '../../lib/convert';
|
||||
|
||||
@ -8,7 +8,7 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
|
||||
if (!hasDocgen(component)) {
|
||||
return null;
|
||||
}
|
||||
const results: ArgTypes = {};
|
||||
const results: StrictArgTypes = {};
|
||||
SECTIONS.forEach((section) => {
|
||||
const props = extractComponentProps(component, section);
|
||||
props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import Vue from 'vue';
|
||||
import { StoryFn, StoryContext } from '@storybook/addons';
|
||||
import { StoryContext, PartialStoryFn } from '@storybook/csf';
|
||||
import { VueFramework } from '@storybook/vue';
|
||||
|
||||
// Inspired by https://github.com/egoist/vue-to-react,
|
||||
// modified to store args as props in the root store
|
||||
@ -9,7 +10,10 @@ import { StoryFn, StoryContext } from '@storybook/addons';
|
||||
const COMPONENT = 'STORYBOOK_COMPONENT';
|
||||
const VALUES = 'STORYBOOK_VALUES';
|
||||
|
||||
export const prepareForInline = (storyFn: StoryFn, { args }: StoryContext) => {
|
||||
export const prepareForInline = (
|
||||
storyFn: PartialStoryFn<VueFramework>,
|
||||
{ args }: StoryContext<VueFramework>
|
||||
) => {
|
||||
const component = storyFn();
|
||||
const el = React.useRef(null);
|
||||
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
|
||||
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { StoryContext } from '@storybook/csf';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import prettier from 'prettier/standalone';
|
||||
import prettierHtml from 'prettier/parser-html';
|
||||
import type Vue from 'vue';
|
||||
import { VueFramework } from '@storybook/vue';
|
||||
|
||||
import { SourceType, SNIPPET_RENDERED } from '../../shared';
|
||||
|
||||
export const skipSourceRender = (context: StoryContext) => {
|
||||
export const skipSourceRender = (context: StoryContext<VueFramework>) => {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
@ -22,7 +24,7 @@ export const skipSourceRender = (context: StoryContext) => {
|
||||
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
||||
};
|
||||
|
||||
export const sourceDecorator = (storyFn: any, context: StoryContext) => {
|
||||
export const sourceDecorator = (storyFn: any, context: StoryContext<VueFramework>) => {
|
||||
const story = storyFn();
|
||||
|
||||
// See ../react/jsxDecorator.tsx
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { StrictArgTypes } from '@storybook/csf';
|
||||
import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
|
||||
import { convert } from '../../lib/convert';
|
||||
|
||||
@ -8,7 +8,7 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
|
||||
if (!hasDocgen(component)) {
|
||||
return null;
|
||||
}
|
||||
const results: ArgTypes = {};
|
||||
const results: StrictArgTypes = {};
|
||||
SECTIONS.forEach((section) => {
|
||||
const props = extractComponentProps(component, section);
|
||||
props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import React from 'react';
|
||||
import * as Vue from 'vue';
|
||||
import { StoryFn, StoryContext } from '@storybook/addons';
|
||||
import { app } from '@storybook/vue3';
|
||||
import { StoryContext, PartialStoryFn } from '@storybook/csf';
|
||||
import { app, VueFramework } from '@storybook/vue3';
|
||||
|
||||
// This is cast as `any` to workaround type errors caused by Vue 2 types
|
||||
const { render, h } = Vue as any;
|
||||
|
||||
export const prepareForInline = (storyFn: StoryFn, { args }: StoryContext) => {
|
||||
export const prepareForInline = (
|
||||
storyFn: PartialStoryFn<VueFramework>,
|
||||
{ args }: StoryContext<VueFramework>
|
||||
) => {
|
||||
const component = storyFn();
|
||||
|
||||
const vnode = h(component, args);
|
||||
|
||||
@ -123,7 +123,7 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
|
||||
};
|
||||
|
||||
const getMetaData = (tagName: string, manifest: any) => {
|
||||
if (manifest.version === 'experimental') {
|
||||
if (manifest?.version === 'experimental') {
|
||||
return getMetaDataExperimental(tagName, manifest);
|
||||
}
|
||||
return getMetaDataV1(tagName, manifest);
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import type { StoryFn } from '@storybook/addons';
|
||||
import type { PartialStoryFn } from '@storybook/csf';
|
||||
import { WebComponentsFramework } from '@storybook/web-components';
|
||||
import React from 'react';
|
||||
|
||||
import { render } from 'lit-html';
|
||||
|
||||
export const prepareForInline = (storyFn: StoryFn) => {
|
||||
export const prepareForInline = (storyFn: PartialStoryFn<WebComponentsFramework>) => {
|
||||
class Story extends React.Component {
|
||||
wrapperRef = React.createRef<HTMLElement>();
|
||||
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import { html } from 'lit-html';
|
||||
import { styleMap } from 'lit-html/directives/style-map';
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { addons, StoryContext, useEffect } from '@storybook/addons';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
import { SNIPPET_RENDERED } from '../../shared';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
const mockedUseEffect = useEffect as jest.Mocked<typeof useEffect>;
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
print: (val: any) => val,
|
||||
test: (val) => typeof val === 'string',
|
||||
});
|
||||
|
||||
const tick = () => new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
|
||||
id: `lit-test--${name}`,
|
||||
kind: 'js-text',
|
||||
@ -27,15 +30,17 @@ describe('sourceDecorator', () => {
|
||||
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
|
||||
beforeEach(() => {
|
||||
mockedAddons.getChannel.mockReset();
|
||||
mockedUseEffect.mockImplementation((cb) => setTimeout(cb, 0));
|
||||
|
||||
mockChannel = { on: jest.fn(), emit: jest.fn() };
|
||||
mockedAddons.getChannel.mockReturnValue(mockChannel as any);
|
||||
});
|
||||
|
||||
it('should render dynamically for args stories', () => {
|
||||
it('should render dynamically for args stories', async () => {
|
||||
const storyFn = (args: any) => html`<div>args story</div>`;
|
||||
const context = makeContext('args', { __isArgsStory: true }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'lit-test--args',
|
||||
@ -43,14 +48,15 @@ describe('sourceDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should skip dynamic rendering for no-args stories', () => {
|
||||
it('should skip dynamic rendering for no-args stories', async () => {
|
||||
const storyFn = () => html`<div>classic story</div>`;
|
||||
const context = makeContext('classic', {}, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should use the originalStoryFn if excludeDecorators is set', () => {
|
||||
it('should use the originalStoryFn if excludeDecorators is set', async () => {
|
||||
const storyFn = (args: any) => html`<div>args story</div>`;
|
||||
const decoratedStoryFn = (args: any) => html`
|
||||
<div style=${styleMap({ padding: `${25}px`, border: '3px solid red' })}>${storyFn(args)}</div>
|
||||
@ -69,6 +75,7 @@ describe('sourceDecorator', () => {
|
||||
{ originalStoryFn: storyFn }
|
||||
);
|
||||
sourceDecorator(decoratedStoryFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'lit-test--args',
|
||||
@ -76,12 +83,13 @@ describe('sourceDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('allows the snippet output to be modified by transformSource', () => {
|
||||
it('allows the snippet output to be modified by transformSource', async () => {
|
||||
const storyFn = (args: any) => html`<div>args story</div>`;
|
||||
const transformSource = (dom: string) => `<p>${dom}</p>`;
|
||||
const docs = { transformSource };
|
||||
const context = makeContext('args', { __isArgsStory: true, docs }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'lit-test--args',
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
/* global window */
|
||||
import { render } from 'lit-html';
|
||||
import { addons, StoryContext, StoryFn } from '@storybook/addons';
|
||||
import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
import { addons, useEffect } from '@storybook/addons';
|
||||
import { WebComponentsFramework } from '@storybook/web-components';
|
||||
|
||||
import { SNIPPET_RENDERED, SourceType } from '../../shared';
|
||||
|
||||
function skipSourceRender(context: StoryContext) {
|
||||
function skipSourceRender(context: StoryContext<WebComponentsFramework>) {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
@ -17,22 +20,31 @@ function skipSourceRender(context: StoryContext) {
|
||||
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
||||
}
|
||||
|
||||
function applyTransformSource(source: string, context: StoryContext): string {
|
||||
function applyTransformSource(
|
||||
source: string,
|
||||
context: StoryContext<WebComponentsFramework>
|
||||
): string {
|
||||
const { transformSource } = context.parameters.docs ?? {};
|
||||
if (typeof transformSource !== 'function') return source;
|
||||
return transformSource(source, context);
|
||||
}
|
||||
|
||||
export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
|
||||
export function sourceDecorator(
|
||||
storyFn: PartialStoryFn<WebComponentsFramework>,
|
||||
context: StoryContext<WebComponentsFramework>
|
||||
) {
|
||||
const story = context?.parameters.docs?.source?.excludeDecorators
|
||||
? context.originalStoryFn(context.args)
|
||||
? (context.originalStoryFn as ArgsStoryFn<WebComponentsFramework>)(context.args, context)
|
||||
: storyFn();
|
||||
|
||||
let source: string;
|
||||
useEffect(() => {
|
||||
if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
|
||||
});
|
||||
if (!skipSourceRender(context)) {
|
||||
const container = window.document.createElement('div');
|
||||
render(story, container);
|
||||
const source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
|
||||
if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
|
||||
source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
|
||||
}
|
||||
|
||||
return story;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable no-case-declarations */
|
||||
import { SBType } from '@storybook/client-api';
|
||||
import { SBType } from '@storybook/csf';
|
||||
import { FlowType, FlowSigType, FlowLiteralType } from './types';
|
||||
|
||||
const isLiteral = (type: FlowType) => type.name === 'literal';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable no-case-declarations */
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { SBType } from '@storybook/client-api';
|
||||
import { SBType } from '@storybook/csf';
|
||||
import { PTType } from './types';
|
||||
import { trimQuotes } from '../utils';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable no-case-declarations */
|
||||
import { SBType } from '@storybook/client-api';
|
||||
import { SBType } from '@storybook/csf';
|
||||
import { TSType, TSSigType } from './types';
|
||||
|
||||
const convertSig = (type: TSSigType) => {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { StrictArgTypes } from '@storybook/csf';
|
||||
import { PropDef } from './PropDef';
|
||||
import { Component } from '../../blocks/types';
|
||||
|
||||
export type PropsExtractor = (component: Component) => { rows?: PropDef[] } | null;
|
||||
|
||||
export type ArgTypesExtractor = (component: Component) => ArgTypes | null;
|
||||
export type ArgTypesExtractor = (component: Component) => StrictArgTypes | null;
|
||||
|
||||
export interface DocgenType {
|
||||
name: string;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,31 +39,31 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.4.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.34",
|
||||
"@storybook/addon-measure": "6.4.0-alpha.34",
|
||||
"@storybook/addon-outline": "6.4.0-alpha.34",
|
||||
"@storybook/addon-toolbars": "6.4.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/node-logger": "6.4.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.35",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.35",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.35",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.35",
|
||||
"@storybook/addon-measure": "6.4.0-alpha.35",
|
||||
"@storybook/addon-outline": "6.4.0-alpha.35",
|
||||
"@storybook/addon-toolbars": "6.4.0-alpha.35",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.35",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/node-logger": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.4.0-alpha.34",
|
||||
"@storybook/vue": "6.4.0-alpha.35",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.4.0-alpha.34",
|
||||
"@storybook/web-components": "6.4.0-alpha.34",
|
||||
"@storybook/vue": "6.4.0-alpha.35",
|
||||
"@storybook/web-components": "6.4.0-alpha.35",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -93,6 +93,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/router": "6.4.0-alpha.35",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,11 +44,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
@ -70,7 +71,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* eslint-env browser */
|
||||
import { StoryFn as StoryFunction, StoryContext, useEffect } from '@storybook/addons';
|
||||
import { useEffect } from '@storybook/addons';
|
||||
import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
import { drawSelectedElement } from './box-model/visualizer';
|
||||
import { init, rescale, destroy } from './box-model/canvas';
|
||||
import { deepElementFromPoint } from './util';
|
||||
@ -12,7 +13,10 @@ function findAndDrawElement(x: number, y: number) {
|
||||
drawSelectedElement(nodeAtPointerRef);
|
||||
}
|
||||
|
||||
export const withMeasure = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
export const withMeasure = (
|
||||
StoryFn: StoryFunction<AnyFramework>,
|
||||
context: StoryContext<AnyFramework>
|
||||
) => {
|
||||
const { measureEnabled } = context.globals;
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -47,11 +47,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
@ -75,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
|
||||
import { useMemo, useEffect } from '@storybook/addons';
|
||||
import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
|
||||
import { clearStyles, addOutlineStyles } from './helpers';
|
||||
import { PARAM_KEY } from './constants';
|
||||
import outlineCSS from './outlineCSS';
|
||||
|
||||
export const withOutline = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
export const withOutline = (
|
||||
StoryFn: StoryFunction<AnyFramework>,
|
||||
context: StoryContext<AnyFramework>
|
||||
) => {
|
||||
const { globals } = context;
|
||||
const isActive = globals[PARAM_KEY] === true;
|
||||
const isInDocs = context.viewMode === 'docs';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,10 +45,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/client-api": "6.4.0-alpha.34",
|
||||
"@storybook/core": "6.4.0-alpha.34",
|
||||
"@storybook/core-common": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/client-api": "6.4.0-alpha.35",
|
||||
"@storybook/core": "6.4.0-alpha.35",
|
||||
"@storybook/core-client": "6.4.0-alpha.35",
|
||||
"@storybook/core-common": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -67,11 +69,11 @@
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.34",
|
||||
"@storybook/angular": "6.4.0-alpha.34",
|
||||
"@storybook/react": "6.4.0-alpha.34",
|
||||
"@storybook/vue": "6.4.0-alpha.34",
|
||||
"@storybook/vue3": "6.4.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.35",
|
||||
"@storybook/angular": "6.4.0-alpha.35",
|
||||
"@storybook/react": "6.4.0-alpha.35",
|
||||
"@storybook/vue": "6.4.0-alpha.35",
|
||||
"@storybook/vue3": "6.4.0-alpha.35",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -149,7 +151,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
import { AnyFramework } from '@storybook/csf';
|
||||
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
import { ClientApi as ClientApiThing } from '@storybook/client-api';
|
||||
import { ClientApi as ClientApiClass } from '@storybook/client-api';
|
||||
import { StoryshotsOptions } from '../api/StoryshotsOptions';
|
||||
import { SupportedFramework } from './SupportedFramework';
|
||||
|
||||
export type RenderTree = (story: any, context?: any, options?: any) => any;
|
||||
|
||||
export interface ClientApi extends ClientStoryApi<unknown> {
|
||||
export interface ClientApi<TFramework extends AnyFramework>
|
||||
extends ClientStoryApi<TFramework['storyResult']> {
|
||||
configure(loader: Loadable, module: NodeModule | false, showDeprecationWarning?: boolean): void;
|
||||
forceReRender(): void;
|
||||
clearDecorators: ClientApiThing['clearDecorators'];
|
||||
getStorybook: ClientApiThing['getStorybook'];
|
||||
setAddon: ClientApiThing['setAddon'];
|
||||
raw: ClientApiThing['raw'];
|
||||
addArgsEnhancer: ClientApiThing['addArgsEnhancer'];
|
||||
addArgTypesEnhancer: ClientApiThing['addArgTypesEnhancer'];
|
||||
clearDecorators: ClientApiClass<TFramework>['clearDecorators'];
|
||||
getStorybook: ClientApiClass<TFramework>['getStorybook'];
|
||||
setAddon: ClientApiClass<TFramework>['setAddon'];
|
||||
addArgsEnhancer: ClientApiClass<TFramework>['addArgsEnhancer'];
|
||||
addArgTypesEnhancer: ClientApiClass<TFramework>['addArgTypesEnhancer'];
|
||||
raw: ClientApiClass<TFramework>['raw'];
|
||||
}
|
||||
|
||||
export interface Loader {
|
||||
@ -23,7 +25,7 @@ export interface Loader {
|
||||
framework: SupportedFramework;
|
||||
renderTree: RenderTree;
|
||||
renderShallowTree: any;
|
||||
storybook: ClientApi;
|
||||
storybook: ClientApi<AnyFramework>;
|
||||
};
|
||||
test: (options: StoryshotsOptions) => boolean;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ function getRenderedTree(story: any) {
|
||||
const moduleMeta = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: currentStory,
|
||||
parameters: story.parameters,
|
||||
component: story.component,
|
||||
// TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
|
||||
targetSelector: 'storybook-wrapper',
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@ import path from 'path';
|
||||
import { toRequireContext } from '@storybook/core-common';
|
||||
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
|
||||
import global from 'global';
|
||||
import { ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/client-api';
|
||||
import { AnyFramework, ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/csf';
|
||||
|
||||
import { ClientApi } from './Loader';
|
||||
import { StoryshotsOptions } from '../api/StoryshotsOptions';
|
||||
@ -69,9 +69,9 @@ function getConfigPathParts(input: string): Output {
|
||||
return { preview: configDir };
|
||||
}
|
||||
|
||||
function configure(
|
||||
function configure<TFramework extends AnyFramework>(
|
||||
options: {
|
||||
storybook: ClientApi;
|
||||
storybook: ClientApi<TFramework>;
|
||||
} & StoryshotsOptions
|
||||
): void {
|
||||
const { configPath = '.storybook', config, storybook } = options;
|
||||
@ -95,17 +95,21 @@ function configure(
|
||||
} = jest.requireActual(preview);
|
||||
|
||||
if (decorators) {
|
||||
decorators.forEach((decorator: DecoratorFunction) => storybook.addDecorator(decorator));
|
||||
decorators.forEach((decorator: DecoratorFunction<TFramework>) =>
|
||||
storybook.addDecorator(decorator)
|
||||
);
|
||||
}
|
||||
if (parameters || globals || globalTypes) {
|
||||
storybook.addParameters({ ...parameters, globals, globalTypes });
|
||||
}
|
||||
if (argsEnhancers) {
|
||||
argsEnhancers.forEach((enhancer: ArgsEnhancer) => storybook.addArgsEnhancer(enhancer));
|
||||
argsEnhancers.forEach((enhancer: ArgsEnhancer<TFramework>) =>
|
||||
storybook.addArgsEnhancer(enhancer as any)
|
||||
);
|
||||
}
|
||||
if (argTypesEnhancers) {
|
||||
argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer) =>
|
||||
storybook.addArgTypesEnhancer(enhancer)
|
||||
argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer<TFramework>) =>
|
||||
storybook.addArgTypesEnhancer(enhancer as any)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ function getRenderedTree(story: any) {
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
vm[VALUES] = story.args;
|
||||
vm[VALUES] = story.initialArgs;
|
||||
|
||||
return vm.$mount().$el;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,19 +41,19 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.4.0-alpha.34",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/node-logger": "6.4.0-alpha.35",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.35",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57"
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/router": "6.4.0-alpha.34",
|
||||
"@storybook/source-loader": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/router": "6.4.0-alpha.35",
|
||||
"@storybook/source-loader": "6.4.0-alpha.35",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { API, Story } from '@storybook/api';
|
||||
import { API, Story, useParameter } from '@storybook/api';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Link } from '@storybook/router';
|
||||
import {
|
||||
@ -45,43 +45,28 @@ interface StoryPanelProps {
|
||||
|
||||
interface SourceParams {
|
||||
source: string;
|
||||
locationsMap: LocationsMap;
|
||||
locationsMap?: LocationsMap;
|
||||
}
|
||||
export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
|
||||
const [state, setState] = React.useState<SourceParams & { currentLocation?: SourceBlock }>({
|
||||
source: 'loading source...',
|
||||
locationsMap: {},
|
||||
});
|
||||
|
||||
const story: Story | undefined = api.getCurrentStoryData() as Story;
|
||||
const selectedStoryRef = React.useRef<HTMLDivElement>(null);
|
||||
React.useEffect(() => {
|
||||
if (story) {
|
||||
const {
|
||||
parameters: {
|
||||
// @ts-ignore
|
||||
storySource: { source, locationsMap } = { source: '', locationsMap: {} },
|
||||
} = {},
|
||||
} = story;
|
||||
const currentLocation = locationsMap
|
||||
? locationsMap[
|
||||
Object.keys(locationsMap).find((key: string) => {
|
||||
const sourceLoaderId = key.split('--');
|
||||
return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
|
||||
})
|
||||
]
|
||||
: undefined;
|
||||
setState({ source, locationsMap, currentLocation });
|
||||
}
|
||||
}, [story ? story.id : null]);
|
||||
const { source, locationsMap }: SourceParams = useParameter('storySource', {
|
||||
source: 'loading source...',
|
||||
});
|
||||
const currentLocation = locationsMap
|
||||
? locationsMap[
|
||||
Object.keys(locationsMap).find((key: string) => {
|
||||
const sourceLoaderId = key.split('--');
|
||||
return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
|
||||
})
|
||||
]
|
||||
: undefined;
|
||||
React.useEffect(() => {
|
||||
if (selectedStoryRef.current) {
|
||||
selectedStoryRef.current.scrollIntoView();
|
||||
}
|
||||
}, [selectedStoryRef.current]);
|
||||
|
||||
const { source, locationsMap, currentLocation } = state;
|
||||
|
||||
const createPart = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) =>
|
||||
rows.map((node, i) =>
|
||||
createSyntaxHighlighterElement({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,11 +45,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-api": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -68,7 +67,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/client-logger": "6.4.0-alpha.34",
|
||||
"@storybook/components": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/theming": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/client-logger": "6.4.0-alpha.35",
|
||||
"@storybook/components": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/theming": "6.4.0-alpha.35",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.4.0-alpha.34",
|
||||
"version": "6.4.0-alpha.35",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,12 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.34",
|
||||
"@storybook/api": "6.4.0-alpha.34",
|
||||
"@storybook/core": "6.4.0-alpha.34",
|
||||
"@storybook/core-common": "6.4.0-alpha.34",
|
||||
"@storybook/core-events": "6.4.0-alpha.34",
|
||||
"@storybook/node-logger": "6.4.0-alpha.34",
|
||||
"@storybook/addons": "6.4.0-alpha.35",
|
||||
"@storybook/api": "6.4.0-alpha.35",
|
||||
"@storybook/core": "6.4.0-alpha.35",
|
||||
"@storybook/core-common": "6.4.0-alpha.35",
|
||||
"@storybook/core-events": "6.4.0-alpha.35",
|
||||
"@storybook/csf": "0.0.2--canary.68887a1.0",
|
||||
"@storybook/node-logger": "6.4.0-alpha.35",
|
||||
"@storybook/store": "6.4.0-alpha.35",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -129,5 +131,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57"
|
||||
"gitHead": "8f65635eb105c8ef3e6ffea3c9cf6668ad34705e"
|
||||
}
|
||||
|
||||
7
app/angular/preset.js
vendored
Normal file
7
app/angular/preset.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
function config(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/client/preview/config')];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
config,
|
||||
};
|
||||
@ -92,16 +92,19 @@ export abstract class AbstractRenderer {
|
||||
* @param forced {boolean} If :
|
||||
* - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes
|
||||
* - false fully recharges or initializes angular module & component
|
||||
* @param component {Component}
|
||||
* @param parameters {Parameters}
|
||||
*/
|
||||
public async render({
|
||||
storyFnAngular,
|
||||
forced,
|
||||
parameters,
|
||||
component,
|
||||
targetDOMNode,
|
||||
}: {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
forced: boolean;
|
||||
component?: any;
|
||||
parameters: Parameters;
|
||||
targetDOMNode: HTMLElement;
|
||||
}) {
|
||||
@ -109,7 +112,7 @@ export abstract class AbstractRenderer {
|
||||
|
||||
const newStoryProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
|
||||
const moduleMetadata = getStorybookModuleMetadata(
|
||||
{ storyFnAngular, parameters, targetSelector },
|
||||
{ storyFnAngular, component, targetSelector },
|
||||
newStoryProps$
|
||||
);
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ export class CanvasRenderer extends AbstractRenderer {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
forced: boolean;
|
||||
parameters: Parameters;
|
||||
component: any;
|
||||
targetDOMNode: HTMLElement;
|
||||
}) {
|
||||
await super.render(options);
|
||||
|
||||
@ -8,6 +8,7 @@ export class DocsRenderer extends AbstractRenderer {
|
||||
public async render(options: {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
forced: boolean;
|
||||
component: any;
|
||||
parameters: Parameters;
|
||||
targetDOMNode: HTMLElement;
|
||||
}) {
|
||||
|
||||
@ -27,12 +27,14 @@ export class ElementRendererService {
|
||||
public async renderAngularElement({
|
||||
storyFnAngular,
|
||||
parameters,
|
||||
component,
|
||||
}: {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
parameters: Parameters;
|
||||
component: any;
|
||||
}): Promise<CustomElementConstructor> {
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{ storyFnAngular, parameters, targetSelector: RendererService.SELECTOR_STORYBOOK_WRAPPER },
|
||||
{ storyFnAngular, component, targetSelector: RendererService.SELECTOR_STORYBOOK_WRAPPER },
|
||||
new BehaviorSubject<ICollection>(storyFnAngular.props)
|
||||
);
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ describe('RendererFactory', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
|
||||
@ -63,9 +63,8 @@ describe('RendererFactory', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {
|
||||
component: FooComponent,
|
||||
},
|
||||
parameters: {},
|
||||
component: FooComponent,
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
|
||||
@ -87,7 +86,7 @@ describe('RendererFactory', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
});
|
||||
@ -111,7 +110,7 @@ describe('RendererFactory', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
expect(countDestroy).toEqual(0);
|
||||
@ -129,7 +128,7 @@ describe('RendererFactory', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
|
||||
@ -157,7 +156,7 @@ describe('RendererFactory', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
expect(countDestroy).toEqual(0);
|
||||
@ -177,7 +176,7 @@ describe('RendererFactory', () => {
|
||||
moduleMetadata: { providers: [{ provide: 'foo', useValue: 42 }] },
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
expect(countDestroy).toEqual(1);
|
||||
@ -194,7 +193,7 @@ describe('RendererFactory', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
|
||||
@ -209,7 +208,7 @@ describe('RendererFactory', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
|
||||
@ -227,7 +226,7 @@ describe('RendererFactory', () => {
|
||||
template: 'Canvas 🖼',
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
});
|
||||
|
||||
@ -36,7 +36,7 @@ describe('RendererService', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
|
||||
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe('🦊');
|
||||
@ -51,9 +51,8 @@ describe('RendererService', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {
|
||||
component: FooComponent,
|
||||
},
|
||||
component: FooComponent,
|
||||
parameters: {},
|
||||
});
|
||||
|
||||
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
|
||||
@ -78,7 +77,7 @@ describe('RendererService', () => {
|
||||
moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
|
||||
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe('🦊');
|
||||
@ -96,7 +95,7 @@ describe('RendererService', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
});
|
||||
|
||||
@ -120,7 +119,7 @@ describe('RendererService', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
expect(countDestroy).toEqual(0);
|
||||
|
||||
@ -138,7 +137,7 @@ describe('RendererService', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
|
||||
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe('🍺');
|
||||
@ -161,7 +160,7 @@ describe('RendererService', () => {
|
||||
},
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
expect(countDestroy).toEqual(0);
|
||||
|
||||
@ -176,7 +175,7 @@ describe('RendererService', () => {
|
||||
moduleMetadata: { providers: [{ provide: 'foo', useValue: 42 }] },
|
||||
},
|
||||
forced: true,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
expect(countDestroy).toEqual(1);
|
||||
});
|
||||
@ -191,7 +190,7 @@ describe('RendererService', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
|
||||
rendererService.platform.onDestroy(() => {
|
||||
@ -204,7 +203,7 @@ describe('RendererService', () => {
|
||||
props: {},
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
parameters: {},
|
||||
});
|
||||
|
||||
expect(countDestroy).toEqual(1);
|
||||
|
||||
@ -55,20 +55,22 @@ export class RendererService {
|
||||
* @param forced {boolean} If :
|
||||
* - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes
|
||||
* - false fully recharges or initializes angular module & component
|
||||
* @param parameters {Parameters}
|
||||
* @param component {Parameters}
|
||||
*/
|
||||
public async render({
|
||||
storyFnAngular,
|
||||
forced,
|
||||
component,
|
||||
parameters,
|
||||
}: {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
forced: boolean;
|
||||
component?: any;
|
||||
parameters: Parameters;
|
||||
}) {
|
||||
const storyProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
|
||||
const moduleMetadata = getStorybookModuleMetadata(
|
||||
{ storyFnAngular, parameters, targetSelector: RendererService.SELECTOR_STORYBOOK_WRAPPER },
|
||||
{ storyFnAngular, component, targetSelector: RendererService.SELECTOR_STORYBOOK_WRAPPER },
|
||||
storyProps$
|
||||
);
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@ describe('StorybookModule', () => {
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props },
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
new BehaviorSubject<ICollection>(props)
|
||||
@ -85,7 +85,7 @@ describe('StorybookModule', () => {
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props },
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
new BehaviorSubject<ICollection>(props)
|
||||
@ -110,7 +110,7 @@ describe('StorybookModule', () => {
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props: initialProps },
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
storyProps$
|
||||
@ -162,7 +162,7 @@ describe('StorybookModule', () => {
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props: initialProps },
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
storyProps$
|
||||
@ -203,7 +203,7 @@ describe('StorybookModule', () => {
|
||||
props: initialProps,
|
||||
template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
|
||||
},
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
storyProps$
|
||||
@ -242,7 +242,7 @@ describe('StorybookModule', () => {
|
||||
props,
|
||||
moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
|
||||
},
|
||||
parameters: { component: WithoutSelectorComponent },
|
||||
component: WithoutSelectorComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
new BehaviorSubject<ICollection>(props)
|
||||
@ -265,7 +265,7 @@ describe('StorybookModule', () => {
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { template: '' },
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
new BehaviorSubject({})
|
||||
|
||||
@ -5,7 +5,6 @@ import dedent from 'ts-dedent';
|
||||
import { Subject } from 'rxjs';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { ICollection, StoryFnAngularReturnType } from '../types';
|
||||
import { Parameters } from '../types-6-0';
|
||||
import { storyPropsProvider } from './StorybookProvider';
|
||||
import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
|
||||
import { isDeclarable } from './utils/NgComponentAnalyzer';
|
||||
@ -30,11 +29,11 @@ const deprecatedStoryComponentWarning = deprecate(
|
||||
export const getStorybookModuleMetadata = (
|
||||
{
|
||||
storyFnAngular,
|
||||
parameters,
|
||||
component: annotatedComponent,
|
||||
targetSelector,
|
||||
}: {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
parameters: Parameters;
|
||||
component?: any;
|
||||
targetSelector: string;
|
||||
},
|
||||
storyProps$: Subject<ICollection>
|
||||
@ -45,7 +44,7 @@ export const getStorybookModuleMetadata = (
|
||||
if (storyComponent) {
|
||||
deprecatedStoryComponentWarning();
|
||||
}
|
||||
const component = storyComponent ?? parameters.component;
|
||||
const component = storyComponent ?? annotatedComponent;
|
||||
|
||||
if (hasNoTemplate(template) && component) {
|
||||
template = computesTemplateFromComponent(component, props, '');
|
||||
|
||||
@ -5,10 +5,11 @@ import { FormsModule } from '@angular/forms';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { Observable, ReplaySubject, Subscriber } from 'rxjs';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { PartialStoryFn } from '@storybook/csf';
|
||||
import { AppComponent } from './components/app.component';
|
||||
import { STORY } from './app.token';
|
||||
import { NgModuleMetadata, StoryFnAngularReturnType } from '../types';
|
||||
import { AngularFramework } from '../types-6-0';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
@ -132,7 +133,7 @@ const getExistenceOfComponentInModules = (
|
||||
});
|
||||
};
|
||||
|
||||
const initModule = (storyFn: StoryFn<StoryFnAngularReturnType>) => {
|
||||
const initModule = (storyFn: PartialStoryFn<AngularFramework>) => {
|
||||
const storyObj = storyFn();
|
||||
const { component, template, props, styles, moduleMetadata = {} } = storyObj;
|
||||
|
||||
@ -200,7 +201,7 @@ const draw = (newModule: DynamicComponentType): void => {
|
||||
}
|
||||
};
|
||||
|
||||
export const renderNgApp = (storyFn: StoryFn<StoryFnAngularReturnType>, forced: boolean) => {
|
||||
export const renderNgApp = (storyFn: PartialStoryFn<AngularFramework>, forced: boolean) => {
|
||||
if (!forced) {
|
||||
draw(initModule(storyFn));
|
||||
} else {
|
||||
|
||||
3
app/angular/src/client/preview/config.ts
Normal file
3
app/angular/src/client/preview/config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { render, renderToDOM } from './render';
|
||||
|
||||
export const parameters = { framework: 'angular' };
|
||||
@ -21,7 +21,7 @@ describe('decorateStory', () => {
|
||||
expect(
|
||||
decorated(
|
||||
makeContext({
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
args: {
|
||||
parentInput: 'Parent input',
|
||||
grandparentInput: 'grandparent input',
|
||||
@ -64,7 +64,7 @@ describe('decorateStory', () => {
|
||||
expect(
|
||||
decorated(
|
||||
makeContext({
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
})
|
||||
)
|
||||
).toEqual({
|
||||
@ -88,7 +88,7 @@ describe('decorateStory', () => {
|
||||
];
|
||||
const decorated = decorateStory(() => ({ template: '</child>' }), decorators);
|
||||
|
||||
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
|
||||
expect(decorated(makeContext({ component: FooComponent }))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
@ -121,7 +121,7 @@ describe('decorateStory', () => {
|
||||
];
|
||||
const decorated = decorateStory(() => ({ template: '</child>' }), decorators);
|
||||
|
||||
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
|
||||
expect(decorated(makeContext({ component: FooComponent }))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
@ -154,7 +154,7 @@ describe('decorateStory', () => {
|
||||
];
|
||||
const decorated = decorateStory(() => ({ template: '</child>' }), decorators);
|
||||
|
||||
expect(decorated()).toEqual({
|
||||
expect(decorated(makeContext({}))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
@ -187,7 +187,7 @@ describe('decorateStory', () => {
|
||||
];
|
||||
const decorated = decorateStory(() => ({}), decorators);
|
||||
|
||||
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
|
||||
expect(decorated(makeContext({ component: FooComponent }))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: false,
|
||||
@ -220,7 +220,7 @@ describe('decorateStory', () => {
|
||||
];
|
||||
const decorated = decorateStory(() => ({ component: FooComponent }), decorators);
|
||||
|
||||
expect(decorated()).toEqual({
|
||||
expect(decorated(makeContext({}))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
|
||||
component: FooComponent,
|
||||
@ -234,7 +234,7 @@ describe('decorateStory', () => {
|
||||
];
|
||||
const decorated = decorateStory(() => ({ template: '' }), decorators);
|
||||
|
||||
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
|
||||
expect(decorated(makeContext({ component: FooComponent }))).toEqual({
|
||||
template: '<parent></parent>',
|
||||
});
|
||||
});
|
||||
@ -250,7 +250,7 @@ describe('decorateStory', () => {
|
||||
expect(
|
||||
decorated(
|
||||
makeContext({
|
||||
parameters: { component: FooComponent },
|
||||
component: FooComponent,
|
||||
argTypes: {
|
||||
withControl: { control: { type: 'object' }, name: 'withControl' },
|
||||
withAction: { action: 'onClick', name: 'withAction' },
|
||||
@ -288,7 +288,7 @@ describe('decorateStory', () => {
|
||||
];
|
||||
const decorated = decorateStory(() => ({ props: { a: [0] } }), decorators);
|
||||
|
||||
expect(decorated()).toEqual({ props: { a: [0, 1, 2, 3] } });
|
||||
expect(decorated(makeContext({}))).toEqual({ props: { a: [0, 1, 2, 3] } });
|
||||
});
|
||||
|
||||
it('passes context through to sub decorators', () => {
|
||||
|
||||
@ -1,31 +1,23 @@
|
||||
import { DecoratorFunction, StoryContext, StoryFn } from '@storybook/addons';
|
||||
import { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/csf';
|
||||
import { sanitizeStoryContextUpdate } from '@storybook/store';
|
||||
import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
|
||||
import { StoryFnAngularReturnType } from './types';
|
||||
|
||||
const defaultContext: StoryContext = {
|
||||
id: 'unspecified',
|
||||
name: 'unspecified',
|
||||
kind: 'unspecified',
|
||||
parameters: {},
|
||||
args: {},
|
||||
argTypes: {},
|
||||
globals: {},
|
||||
};
|
||||
import { AngularFramework } from './types-6-0';
|
||||
|
||||
export default function decorateStory(
|
||||
mainStoryFn: StoryFn<StoryFnAngularReturnType>,
|
||||
decorators: DecoratorFunction<StoryFnAngularReturnType>[]
|
||||
): StoryFn<StoryFnAngularReturnType> {
|
||||
mainStoryFn: LegacyStoryFn<AngularFramework>,
|
||||
decorators: DecoratorFunction<AngularFramework>[]
|
||||
): LegacyStoryFn<AngularFramework> {
|
||||
const returnDecorators = [cleanArgsDecorator, ...decorators].reduce(
|
||||
(previousStoryFn: StoryFn<StoryFnAngularReturnType>, decorator) => (
|
||||
context: StoryContext = defaultContext
|
||||
(previousStoryFn: LegacyStoryFn<AngularFramework>, decorator) => (
|
||||
context: StoryContext<AngularFramework>
|
||||
) => {
|
||||
const decoratedStory = decorator(
|
||||
({ parameters, ...innerContext }: StoryContext = {} as StoryContext) => {
|
||||
return previousStoryFn({ ...context, ...innerContext });
|
||||
},
|
||||
context
|
||||
);
|
||||
const decoratedStory = decorator((update) => {
|
||||
return previousStoryFn({
|
||||
...context,
|
||||
...sanitizeStoryContextUpdate(update),
|
||||
});
|
||||
}, context);
|
||||
|
||||
return decoratedStory;
|
||||
},
|
||||
@ -36,12 +28,12 @@ export default function decorateStory(
|
||||
}
|
||||
|
||||
const prepareMain = (
|
||||
story: StoryFnAngularReturnType,
|
||||
context: StoryContext
|
||||
): StoryFnAngularReturnType => {
|
||||
story: AngularFramework['storyResult'],
|
||||
context: StoryContext<AngularFramework>
|
||||
): AngularFramework['storyResult'] => {
|
||||
let { template } = story;
|
||||
|
||||
const component = story.component ?? context.parameters.component;
|
||||
const component = story.component ?? context.component;
|
||||
const userDefinedTemplate = !hasNoTemplate(template);
|
||||
|
||||
if (!userDefinedTemplate && component) {
|
||||
@ -57,7 +49,7 @@ function hasNoTemplate(template: string | null | undefined): template is undefin
|
||||
return template === null || template === undefined;
|
||||
}
|
||||
|
||||
const cleanArgsDecorator: DecoratorFunction<StoryFnAngularReturnType> = (storyFn, context) => {
|
||||
const cleanArgsDecorator: DecoratorFunction<AngularFramework> = (storyFn, context) => {
|
||||
if (!context.argTypes || !context.args) {
|
||||
return storyFn();
|
||||
}
|
||||
|
||||
@ -2,16 +2,24 @@ import { addons, mockChannel, StoryContext } from '@storybook/addons';
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { moduleMetadata } from './decorators';
|
||||
import { addDecorator, storiesOf, clearDecorators, getStorybook } from '.';
|
||||
import { addDecorator, storiesOf, clearDecorators, getStorybook, configure } from '.';
|
||||
|
||||
const defaultContext: StoryContext = {
|
||||
componentId: 'unspecified',
|
||||
kind: 'unspecified',
|
||||
title: 'unspecified',
|
||||
id: 'unspecified',
|
||||
name: 'unspecified',
|
||||
kind: 'unspecified',
|
||||
story: 'unspecified',
|
||||
parameters: {},
|
||||
initialArgs: {},
|
||||
args: {},
|
||||
argTypes: {},
|
||||
globals: {},
|
||||
hooks: {},
|
||||
loaded: {},
|
||||
originalStoryFn: jest.fn(),
|
||||
viewMode: 'story',
|
||||
};
|
||||
|
||||
class MockModule {}
|
||||
@ -102,15 +110,17 @@ describe('moduleMetadata', () => {
|
||||
};
|
||||
|
||||
addons.setChannel(mockChannel());
|
||||
addDecorator(moduleMetadata(metadata));
|
||||
|
||||
storiesOf('Test', module).add('Default', () => ({
|
||||
component: MockComponent,
|
||||
}));
|
||||
configure(() => {
|
||||
addDecorator(moduleMetadata(metadata));
|
||||
storiesOf('Test', module).add('Default', () => ({
|
||||
component: MockComponent,
|
||||
}));
|
||||
}, {} as NodeModule);
|
||||
|
||||
const [storybook] = getStorybook();
|
||||
|
||||
expect(storybook.stories[0].render().moduleMetadata).toEqual({
|
||||
expect(storybook.stories[0].render({}).moduleMetadata).toEqual({
|
||||
declarations: [MockComponent],
|
||||
providers: [MockService],
|
||||
entryComponents: [MockComponent],
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { Type } from '@angular/core';
|
||||
import { DecoratorFunction, StoryContext } from '@storybook/addons';
|
||||
import { DecoratorFunction, StoryContext } from '@storybook/csf';
|
||||
import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
|
||||
import { isComponent } from './angular-beta/utils/NgComponentAnalyzer';
|
||||
import { ICollection, NgModuleMetadata, StoryFnAngularReturnType } from './types';
|
||||
import { ICollection, NgModuleMetadata } from './types';
|
||||
import { AngularFramework } from './types-6-0';
|
||||
|
||||
export const moduleMetadata = (
|
||||
metadata: Partial<NgModuleMetadata>
|
||||
): DecoratorFunction<StoryFnAngularReturnType> => (storyFn) => {
|
||||
): DecoratorFunction<AngularFramework> => (storyFn) => {
|
||||
const story = storyFn();
|
||||
const storyMetadata = story.moduleMetadata || {};
|
||||
metadata = metadata || {};
|
||||
@ -29,8 +30,8 @@ export const moduleMetadata = (
|
||||
|
||||
export const componentWrapperDecorator = (
|
||||
element: Type<unknown> | ((story: string) => string),
|
||||
props?: ICollection | ((storyContext: StoryContext) => ICollection)
|
||||
): DecoratorFunction<StoryFnAngularReturnType> => (storyFn, storyContext) => {
|
||||
props?: ICollection | ((storyContext: StoryContext<AngularFramework>) => ICollection)
|
||||
): DecoratorFunction<AngularFramework> => (storyFn, storyContext) => {
|
||||
const story = storyFn();
|
||||
const currentProps = typeof props === 'function' ? (props(storyContext) as ICollection) : props;
|
||||
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
import { RenderStoryFunction, start } from '@storybook/core/client';
|
||||
import decorateStory from './decorateStory';
|
||||
import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
import { IStorybookSection, StoryFnAngularReturnType } from './types';
|
||||
import { Story } from './types-6-0';
|
||||
import { renderToDOM, render } from './render';
|
||||
import decorateStory from './decorateStory';
|
||||
import { IStorybookSection } from './types';
|
||||
import { AngularFramework } from './types-6-0';
|
||||
|
||||
const framework = 'angular';
|
||||
|
||||
interface ClientApi extends ClientStoryApi<StoryFnAngularReturnType> {
|
||||
interface ClientApi extends ClientStoryApi<AngularFramework['storyResult']> {
|
||||
setAddon(addon: any): void;
|
||||
configure(loader: Loadable, module: NodeModule): void;
|
||||
getStorybook(): IStorybookSection[];
|
||||
@ -19,11 +19,8 @@ interface ClientApi extends ClientStoryApi<StoryFnAngularReturnType> {
|
||||
load: (...args: any[]) => void;
|
||||
}
|
||||
|
||||
const globalRender: Story = (props) => ({ props });
|
||||
const api = start(renderToDOM, { decorateStory, render });
|
||||
|
||||
const api = start((render as any) as RenderStoryFunction, { decorateStory });
|
||||
|
||||
api.clientApi.globalRender = globalRender;
|
||||
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
|
||||
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
|
||||
framework,
|
||||
|
||||
@ -1,43 +1,39 @@
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { RenderContext } from '@storybook/store';
|
||||
import { ArgsStoryFn } from '@storybook/csf';
|
||||
|
||||
import { renderNgApp } from './angular/helpers';
|
||||
import { StoryFnAngularReturnType } from './types';
|
||||
import { Parameters } from './types-6-0';
|
||||
import { AngularFramework } from './types-6-0';
|
||||
|
||||
import { RendererFactory } from './angular-beta/RendererFactory';
|
||||
|
||||
const rootElement = global.document.getElementById('root');
|
||||
|
||||
export const rendererFactory = new RendererFactory();
|
||||
|
||||
export default async function renderMain({
|
||||
storyFn,
|
||||
showMain,
|
||||
forceRender,
|
||||
parameters,
|
||||
targetDOMNode = rootElement,
|
||||
id,
|
||||
}: {
|
||||
storyFn: StoryFn<StoryFnAngularReturnType>;
|
||||
showMain: () => void;
|
||||
forceRender: boolean;
|
||||
parameters: Parameters;
|
||||
targetDOMNode: HTMLElement;
|
||||
id: string;
|
||||
}) {
|
||||
export const render: ArgsStoryFn<AngularFramework> = (props) => ({ props });
|
||||
|
||||
export async function renderToDOM(
|
||||
{
|
||||
storyFn,
|
||||
showMain,
|
||||
forceRemount,
|
||||
storyContext: { parameters, component },
|
||||
id,
|
||||
}: RenderContext<AngularFramework>,
|
||||
element: HTMLElement
|
||||
) {
|
||||
showMain();
|
||||
|
||||
if (parameters.angularLegacyRendering) {
|
||||
renderNgApp(storyFn, forceRender);
|
||||
renderNgApp(storyFn, !forceRemount);
|
||||
return;
|
||||
}
|
||||
|
||||
const renderer = await rendererFactory.getRendererInstance(id, targetDOMNode);
|
||||
const renderer = await rendererFactory.getRendererInstance(id, element);
|
||||
|
||||
await renderer.render({
|
||||
storyFnAngular: storyFn(),
|
||||
component,
|
||||
parameters,
|
||||
forced: forceRender,
|
||||
targetDOMNode,
|
||||
forced: !forceRemount,
|
||||
targetDOMNode: element,
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,39 +1,38 @@
|
||||
import {
|
||||
Args as DefaultArgs,
|
||||
Annotations,
|
||||
BaseMeta,
|
||||
BaseStory,
|
||||
Args,
|
||||
Parameters as DefaultParameters,
|
||||
StoryContext as DefaultStoryContext,
|
||||
} from '@storybook/addons';
|
||||
ComponentAnnotations,
|
||||
StoryAnnotationsOrFn,
|
||||
} from '@storybook/csf';
|
||||
|
||||
import { StoryFnAngularReturnType } from './types';
|
||||
|
||||
export type { Args, ArgTypes } from '@storybook/addons';
|
||||
export type { Args, ArgTypes } from '@storybook/csf';
|
||||
|
||||
type AngularComponent = any;
|
||||
type AngularReturnType = StoryFnAngularReturnType;
|
||||
export type AngularFramework = {
|
||||
component: any;
|
||||
storyResult: StoryFnAngularReturnType;
|
||||
};
|
||||
|
||||
/**
|
||||
* Metadata to configure the stories for a component.
|
||||
*
|
||||
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
|
||||
*/
|
||||
export type Meta<Args = DefaultArgs> = BaseMeta<AngularComponent> &
|
||||
Annotations<Args, AngularReturnType>;
|
||||
export type Meta<TArgs = Args> = ComponentAnnotations<AngularFramework, TArgs>;
|
||||
|
||||
/**
|
||||
* Story function that represents a component example.
|
||||
*
|
||||
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
||||
*/
|
||||
export type Story<Args = DefaultArgs> = BaseStory<Args, AngularReturnType> &
|
||||
Annotations<Args, AngularReturnType>;
|
||||
export type Story<TArgs = Args> = StoryAnnotationsOrFn<AngularFramework, TArgs>;
|
||||
|
||||
export type Parameters = DefaultParameters & {
|
||||
/** Uses legacy angular rendering engine that use dynamic component */
|
||||
angularLegacyRendering?: boolean;
|
||||
component: unknown;
|
||||
bootstrapModuleOptions?: unknown;
|
||||
};
|
||||
|
||||
export type StoryContext = DefaultStoryContext & { parameters: Parameters };
|
||||
export type StoryContext = DefaultStoryContext<AngularFramework> & { parameters: Parameters };
|
||||
|
||||
@ -11,7 +11,7 @@ export interface ICollection {
|
||||
|
||||
export interface IStorybookStory {
|
||||
name: string;
|
||||
render: () => any;
|
||||
render: (context: any) => any;
|
||||
}
|
||||
|
||||
export interface IStorybookSection {
|
||||
|
||||
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