GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into dependabot/npm_and_yarn/recast-0.19.0

Browse Source
This commit is contained in:
Norbert de Langen 2020-04-15 10:26:35 +02:00
commit 4f8ea2e112
18 changed files with 182 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
MIGRATION.md
View File

@ -18,6 +18,8 @@
- [Actions Addon API changes](#actions-addon-api-changes)
- [Actions Addon uses parameters](#actions-addon-uses-parameters)
- [Removed action decorator APIs](#removed-action-decorator-apis)
- [Removed addon centered](#removed-addon-centered)
- [Removed withA11y decorator](#removed-witha11y-decorator)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Using main.js](#using-mainjs)
@ -201,41 +203,41 @@ In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-
This breaking change currently applies to: `addon-a11y`, `addon-actions`, `addon-knobs`, `addon-links`, `addon-queryparams`.
Consider the following `main.js` config for the accessibility addon, `addon-a11y`:
Consider the following `main.js` config for the accessibility addon, `addon-knobs`:
```js
module.exports = {
stories: ['../**/*.stories.js'],
addons: ['@storybook/addon-a11y'],
addons: ['@storybook/addon-knobs'],
};
```
In earlier versions of Storybook, this would automatically call `@storybook/addon-a11y/register`, which adds the the a11y panel to the Storybook UI. As a user you would also add a decorator:
In earlier versions of Storybook, this would automatically call `@storybook/addon-knobs/register`, which adds the the knobs panel to the Storybook UI. As a user you would also add a decorator:
```js
import { withA11y } from '../index';
import { withKnobs } from '../index';
addDecorator(withA11y);
addDecorator(withKnobs);
```
Now in 6.0, `addon-a11y` comes with a preset, `@storybook/addon-a11y/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator.
Now in 6.0, `addon-knobs` comes with a preset, `@storybook/addon-knobs/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator.
If you wish to disable this new behavior, you can modify your `main.js` to force it to use the `register` logic rather than the `preset`:
```js
module.exports = {
stories: ['../**/*.stories.js'],
addons: ['@storybook/addon-a11y/register'],
addons: ['@storybook/addon-knobs/register'],
};
```
If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters:
If you wish to selectively disable `knobs` checks for a subset of stories, you can control this with story parameters:
```js
export const MyNonCheckedStory = () => <SomeComponent />;
MyNonCheckedStory.story = {
parameters: {
a11y: { disable: true },
knobs: { disable: true },
},
};
```
@ -386,10 +388,28 @@ export const MyStory = () => <div>my story</div>;
MyStory.story = {
parameters: { layout: 'centered' },
};
```
Other possible values are: `padded` (default) and `fullscreen`.
#### Removed withA11y decorator
In 6.0 we removed the `withA11y` decorator. The code that runs accessibility checks is now directly injected in the preview.
Remove the addon-a11y decorator.
To configure a11y now, you have to specify configuration using `addParameters`.
```js
addParameters({
a11y: {
element: "#root",
config: {},
options: {},
manual: true,
}
};
```
## From version 5.2.x to 5.3.x
### To main.js configuration

3
addons/a11y/README.md
View File

@ -56,11 +56,8 @@ You can override these options [at story level too](https://storybook.js.org/doc
import React from 'react';
import { storiesOf, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
export default {
title: 'button',
decorators: [withA11y],
parameters: {
a11y: {
// optional selector which element to inspect

60
addons/a11y/src/a11yRunner.ts Normal file
View File

@ -0,0 +1,60 @@
import { document, window } from 'global';
import { STORY_RENDERED } from '@storybook/core-events';
import axe, { ElementContext, RunOptions, Spec } from 'axe-core';
import addons from '@storybook/addons';
import { EVENTS } from './constants';
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
interface Setup {
element?: ElementContext;
config: Spec;
options: RunOptions;
}
const channel = addons.getChannel();
let active = false;
const getElement = () => {
const storyRoot = document.getElementById('story-root');
return storyRoot ? storyRoot.children : document.getElementById('root');
};
const run = async (storyId: string) => {
try {
const input = getParams(storyId);
if (!active) {
active = true;
const {
element = getElement(),
config,
options = {
restoreScroll: true,
},
} = input;
axe.reset();
if (config) {
axe.configure(config);
}
const result = await axe.run(element, options);
channel.emit(EVENTS.RESULT, result);
}
} catch (error) {
channel.emit(EVENTS.ERROR, error);
} finally {
active = false;
}
};
const getParams = (storyId: string): Setup => {
// eslint-disable-next-line no-underscore-dangle
const { parameters } = window.__STORYBOOK_STORY_STORE__._stories[storyId] || {};
return parameters.a11y;
};
channel.on(STORY_RENDERED, run);
channel.on(EVENTS.REQUEST, run);

4
addons/a11y/src/components/A11YPanel.test.js
View File

@ -12,6 +12,8 @@ function createApi() {
jest.spyOn(emitter, 'emit');
jest.spyOn(emitter, 'on');
jest.spyOn(emitter, 'off');
emitter.getCurrentStoryData = () => ({ id: '1' });
return emitter;
}
@ -130,7 +132,7 @@ describe('A11YPanel', () => {
// then
expect(wrapper.text()).toMatch(/Please wait while the accessibility scan is running/);
expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST);
expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST, '1');
});
it('should handle "ran" status', () => {

2
addons/a11y/src/components/A11YPanel.tsx
View File

@ -169,7 +169,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
status: 'running',
},
() => {
api.emit(EVENTS.REQUEST);
api.emit(EVENTS.REQUEST, api.getCurrentStoryData().id);
// removes all elements from the redux map in store from the previous panel
store.dispatch(clearElements());
}

116
addons/a11y/src/index.ts
View File

@ -1,119 +1,3 @@
import { document } from 'global';
import debounce from 'lodash/debounce';
import memoize from 'memoizerific';
import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
import addons, { DecoratorFunction } from '@storybook/addons';
import { STORY_RENDERED } from '@storybook/core-events';
import { Listener } from '@storybook/channels';
import { EVENTS, PARAM_KEY } from './constants';
interface Setup {
element?: ElementContext;
config: Spec;
options: RunOptions;
manual: boolean;
}
const setup: Setup = { element: undefined, config: {}, options: {}, manual: false };
const getElement = () => {
const storyRoot = document.getElementById('story-root');
if (storyRoot) {
return storyRoot.children;
}
return document.getElementById('root');
};
const performRun = (() => {
let isRunning = false;
return debounce(async (s, callback) => {
if (isRunning) {
return;
}
isRunning = true;
await run(s)
.then(
(result) => callback(undefined, result),
(error) => callback(error)
)
.then(() => {
isRunning = false;
});
}, 100);
})();
const run = async (input: Setup) => {
const {
element = getElement(),
config,
options = {
restoreScroll: true,
},
} = input;
await axe.reset();
if (config) {
await axe.configure(config);
}
return axe.run(element, options);
};
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
let storedDefaultSetup: Setup | null = null;
const performSetup = (parameter: Partial<Setup> | undefined) => {
if (parameter) {
if (storedDefaultSetup === null) {
storedDefaultSetup = { ...setup };
}
Object.assign(setup, parameter);
}
if (storedDefaultSetup !== null) {
Object.assign(setup, storedDefaultSetup);
storedDefaultSetup = null;
}
};
const usePermanentChannel = memoize(1)((eventMap: Record<string, Listener>) => {
const channel = addons.getChannel();
const emit = channel.emit.bind(channel);
Object.entries(eventMap).forEach(([type, handler]) => {
channel.on(type, handler);
});
return emit;
});
export const withA11y: DecoratorFunction = (storyFn, storyContext) => {
const respond = () => {
const parameter = storyContext.parameters[PARAM_KEY] as Partial<Setup>;
performSetup(parameter);
performRun(setup, (error: Error, result: AxeResults) => {
if (error) {
emit(EVENTS.ERROR, String(error));
} else {
emit(EVENTS.RESULT, result);
}
});
};
const emit = usePermanentChannel({
[EVENTS.REQUEST]: respond,
[STORY_RENDERED]: respond,
});
return storyFn(storyContext);
};

7
addons/a11y/src/preset.ts Normal file
View File

@ -0,0 +1,7 @@
export function managerEntries(entry: any[] = []) {
return [...entry, require.resolve('./register')];
}
export function config(entry: any[] = []) {
return [...entry, require.resolve('./a11yRunner')];
}

3
addons/a11y/src/preset/addDecorator.ts
View File

@ -1,3 +0,0 @@
import { withA11y } from '../index';
export const decorators = [withA11y];

15
addons/a11y/src/preset/index.ts
View File

@ -1,15 +0,0 @@
type A11yOptions = {
addDecorator?: boolean;
};
export function managerEntries(entry: any[] = []) {
return [...entry, require.resolve('../register')];
}
export function config(entry: any[] = [], { addDecorator = true }: A11yOptions = {}) {
const a11yConfig = [];
if (addDecorator) {
a11yConfig.push(require.resolve('./addDecorator'));
}
return [...entry, ...a11yConfig];
}

2
addons/knobs/package.json
View File

@ -54,7 +54,7 @@
"@types/enzyme": "^3.10.5",
"@types/escape-html": "0.0.20",
"@types/react-lifecycles-compat": "^3.0.1",
"@types/react-select": "^2.0.19",
"@types/react-select": "^3.0.11",
"@types/webpack-env": "^1.15.1",
"enzyme": "^3.11.0"
},

7
addons/storyshots/storyshots-core/src/frameworks/configure.ts
View File

@ -54,12 +54,7 @@ function getConfigPathParts(input: string): Output {
(pattern: string | { path: string; recursive: boolean; match: string }) => {
const { path: basePath, recursive, match } = toRequireContext(pattern);
// eslint-disable-next-line no-underscore-dangle
return global.__requireContext(
configDir,
basePath,
recursive,
new RegExp(match.slice(1, -1))
);
return global.__requireContext(configDir, basePath, recursive, match);
}
);
}

4
docs/src/pages/configurations/overview/index.md
View File

@ -48,9 +48,9 @@ In `preview.js` you can add global [decorators](../../basics/writing-stories/#de
```js
// preview.js
import { addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
addDecorator(withA11y);
addDecorator(withKnobs);
```
In `manager.js` you can add [UI options](../options-parameter/#global-options).

2
docs/src/pages/formats/storiesof-api/index.md
View File

@ -71,7 +71,7 @@ And finally, story-level decorators are provided via parameters:
storiesOf('Button', module).add(
'with text',
() => <Button onClick={action('clicked')}>Hello Button</Button>,
{ decorators: withA11y }
{ decorators: withKnobs }
);
```

2
examples/ember-cli/stories/addon-a11y.stories.js
View File

@ -1,9 +1,7 @@
import { hbs } from 'ember-cli-htmlbars';
import { withA11y } from '@storybook/addon-a11y';
export default {
title: 'Addon/a11y',
decorators: [withA11y],
parameters: {
options: { selectedPanel: '@storybook/a11y/panel' },

2
lib/core/package.json
View File

@ -85,7 +85,7 @@
"ip": "^1.1.5",
"json5": "^2.1.1",
"lazy-universal-dotenv": "^3.0.1",
"micromatch": "^4.0.2",
"nanomatch": "^1.2.13",
"node-fetch": "^2.6.0",
"pkg-dir": "^4.2.0",
"pnp-webpack-plugin": "1.6.4",

8
lib/core/src/server/preview/to-require-context.js
View File

@ -1,16 +1,12 @@
import globBase from 'glob-base';
import { makeRe } from 'micromatch';
import { makeRe } from 'nanomatch';
const isObject = (val) => val != null && typeof val === 'object' && Array.isArray(val) === false;
export const toRequireContext = (input) => {
switch (true) {
case typeof input === 'string': {
const { base, glob } = globBase(input);
const regex = makeRe(glob)
.toString()
// webpack prepends the relative path with './'
.replace(/^\/\^/, '/^\\.\\/')
.replace(/\?:\^/g, '?:');
const regex = makeRe(glob);
return { path: base, recursive: glob.startsWith('**'), match: regex };
}

68
lib/core/src/server/preview/to-require-context.test.js Normal file
View File

@ -0,0 +1,68 @@
import path from 'path';
import { toRequireContext } from './to-require-context';
const testCases = [
{
glob: '**/*.stories.tsx',
validPaths: [
'./Icon.stories.tsx',
'./src/Icon.stories.tsx',
'./src/components/Icon.stories.tsx',
'./src/components/Icon.stories/Icon.stories.tsx',
],
invalidPaths: [
'./stories.tsx',
'./Icon.stories.ts',
'./Icon.stories.js',
'./src/components/stories.tsx',
'./src/components/Icon.stories/stories.tsx',
'./src/components/Icon.stories.ts',
'./src/components/Icon.stories.js',
],
},
{
glob: '../src/stories/**/*.stories.(js|mdx)',
validPaths: [
'../src/stories/components/Icon.stories.js',
'../src/stories/Icon.stories.js',
'../src/stories/Icon.stories.mdx',
'../src/stories/components/Icon/Icon.stories.js',
'../src/stories/components/Icon.stories/Icon.stories.mdx',
],
invalidPaths: [
'./stories.js',
'./src/stories/Icon.stories.js',
'./Icon.stories.js',
'../src/Icon.stories.mdx',
'../src/stories/components/Icon/Icon.stories.ts',
'../src/stories/components/Icon/Icon.mdx',
],
},
{
glob: 'dirname/../stories/*.stories.*',
validPaths: [
'./dirname/../stories/App.stories.js',
'./dirname/../stories/addon-centered.stories.js',
],
invalidPaths: ['./dirname/../stories.js', './dirname/../App.stories.js'],
},
];
describe('toRequireContext', () => {
it('matches only suitable paths', () => {
testCases.forEach(({ glob, validPaths, invalidPaths }) => {
const { path: base, match: regex } = toRequireContext(glob);
function isMatched(filePath) {
const relativePath = `./${path.relative(base, filePath)}`;
return filePath.includes(base) && regex.test(relativePath);
}
const isMatchedForValidPaths = validPaths.every(isMatched);
const isMatchedForInvalidPaths = invalidPaths.every(filePath => !isMatched(filePath));
expect(isMatchedForValidPaths).toBe(true);
expect(isMatchedForInvalidPaths).toBe(true);
});
});
});

10
yarn.lock
View File

@ -4428,10 +4428,10 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-select@^2.0.19":
version "2.0.19"
resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-2.0.19.tgz#59a80ef81a4a5cb37f59970c53a4894d15065199"
integrity sha512-5GGBO3npQ0G/poQmEn+kI3Vn3DoJ9WjRXCeGcpwLxd5rYmjYPH235lbYPX5aclXE2RqEXyFxd96oh0wYwPXYpg==
"@types/react-select@^3.0.11":
version "3.0.11"
resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.11.tgz#b69b6fe1999bedfb05bd7499327206e16a7fb00e"
integrity sha512-ggUsAdZuRFtLMjGMcdf9SeeE678TRq3lAKj1fbwGM8JAZTIzCu1CED0dvJgFVCPT2bDs8TcBD6+6SN6i4e7JYQ==
dependencies:
"@types/react" "*"
"@types/react-dom" "*"
@ -20885,7 +20885,7 @@ nan@^2.12.1, nan@^2.13.2:
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
nanomatch@^1.2.9:
nanomatch@^1.2.13, nanomatch@^1.2.9:
version "1.2.13"
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==