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

Merge branch 'next' into nextjs-framework-support

Browse Source
This commit is contained in:
Yann Braga 2022-10-18 10:17:10 +02:00
commit 8ec2e8384e
130 changed files with 765 additions and 1690 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/cron-weekly.yml vendored
View File

@ -8,7 +8,7 @@ jobs:
check-links:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: gaurav-nelson/github-action-markdown-link-check@v1
# checks all markdown files from important folders including all subfolders
with:

4
.github/workflows/danger-js.yml vendored
View File

@ -8,10 +8,10 @@ jobs:
name: Danger JS
runs-on: ubuntu-latest
steps:
- uses: actions/setup-node@v2
- uses: actions/setup-node@v3
with:
node-version: '16'
- uses: actions/checkout@master
- uses: actions/checkout@v3
- name: Danger JS
uses: danger/danger-js@10.9.0
env:

4
.github/workflows/generate-repros-next.yml vendored
View File

@ -15,10 +15,10 @@ jobs:
env:
YARN_ENABLE_IMMUTABLE_INSTALLS: false
steps:
- uses: actions/setup-node@v2
- uses: actions/setup-node@v3
with:
node-version: 16
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup git user
run: |
git config --global user.name "Storybook Bot"

4
.github/workflows/generate-repros.yml vendored
View File

@ -15,10 +15,10 @@ jobs:
env:
YARN_ENABLE_IMMUTABLE_INSTALLS: false
steps:
- uses: actions/setup-node@v2
- uses: actions/setup-node@v3
with:
node-version: 16
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup git user
run: |
git config --global user.name "Storybook Bot"

6
.github/workflows/handle-release-branches.yml vendored
View File

@ -23,7 +23,7 @@ jobs:
if: ${{ needs.branch-checks.outputs.is-latest-branch == 'true' }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- run: curl -X POST "https://api.netlify.com/build_hooks/${{ secrets.FRONTPAGE_HOOK }}"
@ -32,7 +32,7 @@ jobs:
if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' || needs.branch-checks.outputs.is-release-branch == 'true' }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
with:
ref: next
path: next
@ -54,7 +54,7 @@ jobs:
if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
with:
fetch-depth: 0

4
.github/workflows/tests-unit.yml vendored
View File

@ -23,9 +23,9 @@ jobs:
node_version: 16
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Set node version to ${{ matrix.node_version }}
uses: actions/setup-node@v2
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node_version }}
cache: yarn

2
MIGRATION.md
View File

@ -440,9 +440,11 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
- `@storybook/svelte-webpack5`
- `@storybook/svelte-vite`
- `@storybook/vue-webpack5`
- `@storybook/vue-vite`
- `@storybook/vue3-webpack5`
- `@storybook/vue3-vite`
- `@storybook/web-components-webpack5`
- `@storybook/web-components-vite`
We will be expanding this list over the course of the 7.0 development cycle. More info on the rationale here: [Frameworks RFC](https://www.notion.so/chromatic-ui/Frameworks-RFC-89f8aafe3f0941ceb4c24683859ed65c).

9
code/addons/storyshots/storyshots-core/.storybook/config.js
View File

@ -1,9 +0,0 @@
import { configure } from '@storybook/react';
configure(
[
require.context('../stories/required_with_context', false, /\.stories\.(js|mdx)$/),
require.context('../stories/directly_required', false, /index\.js$/),
],
module
);

12
code/addons/storyshots/storyshots-core/.storybook/configTest.js
View File

@ -1,12 +0,0 @@
import { configure } from '@storybook/react';
const req = require.context('../stories/required_with_context', false, /\.stories\.js$/);
const loadStories = () => {
const result = req.keys().map((filename) => req(filename));
// eslint-disable-next-line global-require
require('../stories/directly_required');
return result;
};
configure(loadStories, module);

1
code/addons/storyshots/storyshots-core/.storybook/presets.js
View File

@ -1 +0,0 @@
module.exports = ['@storybook/addon-docs/preset'];

2
code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts
View File

@ -1,6 +1,6 @@
import { snapshotWithOptions } from '../test-bodies';
import { Stories2SnapsConverter } from '../Stories2SnapsConverter';
import { StoryshotsOptions } from './StoryshotsOptions';
import type { StoryshotsOptions } from './StoryshotsOptions';
const ignore = ['**/node_modules/**'];
const defaultStories2SnapsConverter = new Stories2SnapsConverter();

2
code/addons/storyshots/storyshots-core/src/api/index.ts
View File

@ -4,7 +4,7 @@ import ensureOptionsDefaults from './ensureOptionsDefaults';
import snapshotsTests from './snapshotsTestsTemplate';
import integrityTest from './integrityTestTemplate';
import loadFramework from '../frameworks/frameworkLoader';
import { StoryshotsOptions } from './StoryshotsOptions';
import type { StoryshotsOptions } from './StoryshotsOptions';
const { describe, window: globalWindow } = global;

12
code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
View File

@ -1,22 +1,14 @@
import type { AnyFramework } from '@storybook/csf';
import type { ClientStoryApi, Loadable } from '@storybook/addons';
import type { Loadable } from '@storybook/addons';
import { ClientApi as ClientApiClass } from '@storybook/client-api';
import type { StoryshotsOptions } from '../api/StoryshotsOptions';
import type { SupportedFramework } from './SupportedFramework';
export type RenderTree = (story: any, context?: any, options?: any) => any;
export interface ClientApi<TFramework extends AnyFramework>
extends ClientStoryApi<TFramework['storyResult']> {
export interface ClientApi<TFramework extends AnyFramework> extends ClientApiClass<AnyFramework> {
configure(loader: Loadable, module: NodeModule | false, showDeprecationWarning?: boolean): void;
forceReRender(): void;
clearDecorators: ClientApiClass<TFramework>['clearDecorators'];
getStorybook: ClientApiClass<TFramework>['getStorybook'];
setAddon: ClientApiClass<TFramework>['setAddon'];
addArgsEnhancer: ClientApiClass<TFramework>['addArgsEnhancer'];
addArgTypesEnhancer: ClientApiClass<TFramework>['addArgTypesEnhancer'];
addStepRunner: ClientApiClass<TFramework>['addStepRunner'];
raw: ClientApiClass<TFramework>['raw'];
}
export interface Loader {

17
code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
View File

@ -2,8 +2,8 @@ import 'core-js';
import 'core-js/es/reflect';
import hasDependency from '../hasDependency';
import configure from '../configure';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function setupAngularJestPreset() {
// Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
@ -34,8 +34,17 @@ function load(options: StoryshotsOptions) {
setupAngularJestPreset();
const storybook = jest.requireActual('@storybook/angular');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'angular' as const,
@ -43,7 +52,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for angular');
},
storybook,
storybook: api,
};
}

19
code/addons/storyshots/storyshots-core/src/frameworks/frameworkLoader.ts
View File

@ -2,7 +2,7 @@
import fs from 'fs';
import path from 'path';
import { Loader } from './Loader';
import { StoryshotsOptions } from '../api/StoryshotsOptions';
import type { StoryshotsOptions } from '../api/StoryshotsOptions';
const loaderScriptName = 'loader.js';
@ -13,8 +13,21 @@ function getLoaders(): Loader[] {
.readdirSync(__dirname)
.map((name) => path.join(__dirname, name))
.filter(isDirectory)
.map((framework) => path.join(framework, loaderScriptName))
.filter(fs.existsSync)
.map((framework) => {
const pa = path.join(framework, loaderScriptName);
const pb = path.join(framework, 'loader.ts');
if (fs.existsSync(pa)) {
return pa;
}
if (fs.existsSync(pb)) {
return pb;
}
return null;
})
.filter(Boolean)
.map((loader) => require(loader).default);
}

17
code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts
View File

@ -1,7 +1,7 @@
import global from 'global';
import configure from '../configure';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return options.framework === 'html';
@ -11,8 +11,17 @@ function load(options: StoryshotsOptions) {
global.STORYBOOK_ENV = 'html';
const storybook = jest.requireActual('@storybook/html');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'html' as const,
@ -20,7 +29,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for HTML');
},
storybook,
storybook: api,
};
}

17
code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts
View File

@ -4,8 +4,8 @@
import global from 'global';
import configure from '../configure';
import hasDependency from '../hasDependency';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return (
@ -17,8 +17,17 @@ function load(options: StoryshotsOptions) {
global.STORYBOOK_ENV = 'preact';
const storybook = jest.requireActual('@storybook/preact');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'preact' as const,
@ -26,7 +35,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for preact');
},
storybook,
storybook: api,
};
}

17
code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts
View File

@ -1,8 +1,8 @@
import global from 'global';
import configure from '../configure';
import hasDependency from '../hasDependency';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return options.framework === 'rax' || (!options.framework && hasDependency('@storybook/rax'));
@ -12,8 +12,17 @@ function load(options: StoryshotsOptions) {
global.STORYBOOK_ENV = 'rax';
const storybook = jest.requireActual('@storybook/rax');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'rax' as const,
@ -21,7 +30,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for rax');
},
storybook,
storybook: api,
};
}

14
code/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts
View File

@ -1,8 +1,8 @@
/* eslint-disable global-require */
import path from 'path';
import hasDependency from '../hasDependency';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return (
@ -25,14 +25,20 @@ function configure(options: StoryshotsOptions, storybook: any) {
function load(options: StoryshotsOptions) {
const storybook = jest.requireActual('@storybook/react-native');
const clientAPI = jest.requireActual('@storybook/client-api');
configure(options, storybook);
const api = {
...clientAPI,
...storybook,
};
configure(options, api);
return {
renderTree: require('../react/renderTree').default,
renderShallowTree: require('../react/renderShallowTree').default,
framework: 'react-native' as const,
storybook,
storybook: api,
};
}

17
code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts
View File

@ -1,7 +1,7 @@
import configure from '../configure';
import hasDependency from '../hasDependency';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
@ -9,14 +9,23 @@ function test(options: StoryshotsOptions): boolean {
function load(options: StoryshotsOptions) {
const storybook = jest.requireActual('@storybook/react');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'react' as const,
renderTree: jest.requireActual('./renderTree').default,
renderShallowTree: jest.requireActual('./renderShallowTree').default,
storybook,
storybook: api,
};
}

17
code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts
View File

@ -1,8 +1,8 @@
import global from 'global';
import hasDependency from '../hasDependency';
import configure from '../configure';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function mockRiotToIncludeCompiler() {
jest.mock('riot', () => jest.requireActual('riot/riot.js'));
@ -17,8 +17,17 @@ function load(options: StoryshotsOptions) {
mockRiotToIncludeCompiler();
const storybook = jest.requireActual('@storybook/riot');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'riot' as const,
@ -26,7 +35,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for riot');
},
storybook,
storybook: api,
};
}

17
code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts
View File

@ -1,8 +1,8 @@
import global from 'global';
import hasDependency from '../hasDependency';
import configure from '../configure';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return (
@ -14,8 +14,17 @@ function load(options: StoryshotsOptions) {
global.STORYBOOK_ENV = 'svelte';
const storybook = jest.requireActual('@storybook/svelte');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'svelte' as const,
@ -23,7 +32,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for svelte');
},
storybook,
storybook: api,
};
}

17
code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts
View File

@ -1,8 +1,8 @@
import global from 'global';
import hasDependency from '../hasDependency';
import configure from '../configure';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function mockVueToIncludeCompiler() {
jest.mock('vue', () => jest.requireActual('vue/dist/vue.common.js'));
@ -17,8 +17,17 @@ function load(options: StoryshotsOptions) {
mockVueToIncludeCompiler();
const storybook = jest.requireActual('@storybook/vue');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'vue' as const,
@ -26,7 +35,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for vue');
},
storybook,
storybook: api,
};
}

19
code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts
View File

@ -1,8 +1,8 @@
import global from 'global';
import hasDependency from '../hasDependency';
import configure from '../configure';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return options.framework === 'vue3' || (!options.framework && hasDependency('@storybook/vue3'));
@ -11,9 +11,18 @@ function test(options: StoryshotsOptions): boolean {
function load(options: StoryshotsOptions) {
global.STORYBOOK_ENV = 'vue3';
const storybook = jest.requireActual('@storybook/vue3');
const storybook = jest.requireActual('@storybook/vue');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'vue3' as const,
@ -21,7 +30,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for Vue 3');
},
storybook,
storybook: api,
};
}

19
code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts
View File

@ -1,7 +1,7 @@
import global from 'global';
import configure from '../configure';
import { Loader } from '../Loader';
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
import type { Loader } from '../Loader';
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
function test(options: StoryshotsOptions): boolean {
return options.framework === 'web-components';
@ -10,9 +10,18 @@ function test(options: StoryshotsOptions): boolean {
function load(options: StoryshotsOptions) {
global.STORYBOOK_ENV = 'web-components';
const storybook = jest.requireActual('@storybook/web-components');
const storybook = jest.requireActual('@storybook/html');
const clientAPI = jest.requireActual('@storybook/client-api');
configure({ ...options, storybook });
const api = {
...clientAPI,
...storybook,
};
configure({
...options,
storybook: api,
});
return {
framework: 'web-components' as const,
@ -20,7 +29,7 @@ function load(options: StoryshotsOptions) {
renderShallowTree: () => {
throw new Error('Shallow renderer is not supported for web-components');
},
storybook,
storybook: api,
};
}

177
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -1,139 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<Button
onClick={[Function]}
>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
</Button>
<Container>
<div>
prefix
<Component>
<button
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
</Component>
suffix
</div>
</Container>
`;
exports[`Storyshots Another Button with text 1`] = `
<Button
onClick={[Function]}
>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
</Button>
<Container>
<div>
prefix
<Component>
<button
onClick={[Function]}
>
Hello button
</button>
</Component>
suffix
</div>
</Container>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<AsyncTestComponent>
<h1 />
</AsyncTestComponent>
`;
exports[`Storyshots Button With Text 1`] = `
<Button
onClick={[Function]}
>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
</Button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<Button
onClick={[Function]}
>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
</Button>
`;
exports[`Storyshots Welcome MDX to Storybook 1`] = `
<Welcome
showApp={[Function]}
>
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
</Welcome>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<Welcome
showApp={[Function]}
>
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
</Welcome>
exports[`Storyshots Text Simple 1`] = `
<Container>
<div>
prefix
<Component>
contents
</Component>
suffix
</div>
</Container>
`;

33
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.metadata.test.js.snap
View File

@ -1,5 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<div>
prefix
<button
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
suffix
</div>
`;
exports[`Storyshots Another Button with text 1`] = `
<div>
prefix
<button
onClick={[Function]}
>
Hello button
</button>
suffix
</div>
`;
exports[`Storyshots Text Simple 1`] = `
<div>
prefix

128
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
View File

@ -1,115 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
<div>
prefix
<Unknown />
suffix
</div>
`;
exports[`Storyshots Another Button with text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
<div>
prefix
<Unknown />
suffix
</div>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Welcome MDX to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
exports[`Storyshots Text Simple 1`] = `
<div>
prefix
<Unknown />
suffix
</div>
`;

128
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
View File

@ -1,115 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
<div>
prefix
<Unknown />
suffix
</div>
`;
exports[`Storyshots Another Button with text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
<div>
prefix
<Unknown />
suffix
</div>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Welcome MDX to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
exports[`Storyshots Text Simple 1`] = `
<div>
prefix
<Unknown />
suffix
</div>
`;

137
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
View File

@ -1,115 +1,44 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
<div>
prefix
<button
onClick={[Function]}
>
😀 😎 👍 💯
</span>
</button>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
suffix
</div>
`;
exports[`Storyshots Another Button with text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
<div>
prefix
<button
onClick={[Function]}
>
😀 😎 👍 💯
</span>
</button>
Hello button
</button>
suffix
</div>
`;
exports[`Storyshots Welcome MDX to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
exports[`Storyshots Text Simple 1`] = `
<div>
prefix
contents
suffix
</div>
`;

46
code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index.foo
View File

@ -1,46 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Another Button with text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;

46
code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index.storyshot
View File

@ -1,46 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Another Button with text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;

26
code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index@Another-_-Button@with-_-some-_-emoji.boo
View File

@ -1,26 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;

21
code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index@Another-_-Button@with-_-text.boo
View File

@ -1,21 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;

0
code/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js → code/addons/storyshots/storyshots-core/stories/exported_metadata/Async.stories.jsx
View File

8
code/addons/storyshots/storyshots-core/stories/directly_required/index.js → code/addons/storyshots/storyshots-core/stories/exported_metadata/Extra.stories.jsx
View File

@ -1,15 +1,15 @@
/* eslint-disable react/button-has-type */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from '../react-demo';
storiesOf('Another Button', module)
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with text', () => <button onClick={action('clicked')}>Hello button</button>)
.add('with some emoji', () => (
<Button onClick={action('clicked')}>
<button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
</button>
));

0
code/addons/storyshots/storyshots-core/stories/exported_metadata/Text.stories.js → code/addons/storyshots/storyshots-core/stories/exported_metadata/Text.stories.jsx
View File

34
code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Extra.stories.storyshot Normal file
View File

@ -0,0 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<div>
prefix
<button
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
suffix
</div>
`;
exports[`Storyshots Another Button with text 1`] = `
<div>
prefix
<button
onClick={[Function]}
>
Hello button
</button>
suffix
</div>
`;

14
code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Extra.stories@Another-_-Button@with-_-some-_-emoji.boo Normal file
View File

@ -0,0 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
<button
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;

5
code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo → code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Extra.stories@Another-_-Button@with-_-text.boo
View File

@ -1,10 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome to Storybook 1`] = `
exports[`Storyshots Another Button with text 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
Hello button
</button>
`;

11
code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Text.stories.storyshot Normal file
View File

@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Text Simple 1`] = `
<div>
prefix
contents
suffix
</div>
`;

2
code/addons/storyshots/storyshots-core/stories/exported_metadata/main.js
View File

@ -1,3 +1,3 @@
module.exports = {
stories: ['./Text.stories.js'],
stories: ['./Text.stories.jsx', './Extra.stories.jsx'],
};

7
code/addons/storyshots/storyshots-core/stories/exported_metadata/preview.js
View File

@ -1,10 +1,13 @@
/* eslint-disable react/prop-types */
import React from 'react';
const Container = ({ children }) => <div>{children}</div>;
export const decorators = [
(StoryFn, { parameters, globals }) => (
<div>
<Container>
{parameters.prefix} <StoryFn /> {globals.suffix}
</div>
</Container>
),
];

34
code/addons/storyshots/storyshots-core/stories/react-demo.js vendored
View File

@ -1,34 +0,0 @@
import React from 'react';
const styles = {
border: '1px solid #eee',
borderRadius: 3,
backgroundColor: '#FFFFFF',
cursor: 'pointer',
fontSize: 15,
padding: '3px 10px',
margin: 10,
};
// eslint-disable-next-line react/prop-types
export const Button = ({ children, onClick }) => (
<button onClick={onClick} style={styles} type="button">
{children}
</button>
);
Button.displayName = 'Button';
Button.defaultProps = {
onClick: () => {},
};
// eslint-disable-next-line react/prop-types
export const Welcome = ({ showApp }) => (
<button type="button" onClick={showApp}>
Welcome
</button>
);
Welcome.displayName = 'Welcome';
Welcome.defaultProps = {
showApp: () => {},
};

23
code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
View File

@ -1,23 +0,0 @@
import React from 'react';
import { Button } from '../react-demo';
export default {
title: 'Button',
parameters: {
component: Button,
},
};
export const WithText = () => <Button>Hello Button</Button>;
export const WithSomeEmoji = () => (
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
);
WithSomeEmoji.storyName = 'with some emoji';

15
code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
View File

@ -1,15 +0,0 @@
import React from 'react';
import { Welcome } from '../react-demo';
export default {
title: 'Welcome',
parameters: {
component: Welcome,
},
};
export const ToStorybook = () => <Welcome showApp={() => {}} />;
ToStorybook.storyName = 'to Storybook';

13
code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
View File

@ -1,13 +0,0 @@
import { Welcome } from '../react-demo';
import { Meta, Story } from '@storybook/addon-docs';
<Meta
title="Welcome MDX"
parameters={{
component: Welcome,
}}
/>
<Story name="to Storybook">
<Welcome showApp={() => {}} />
</Story>

7
code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot
View File

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
THIS IS SO DONE
</h1>
`;

7
code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo
View File

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;

7
code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot
View File

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;

46
code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo
View File

@ -1,46 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;

46
code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot
View File

@ -1,46 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
Hello Button
</button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#FFFFFF",
"border": "1px solid #eee",
"borderRadius": 3,
"cursor": "pointer",
"fontSize": 15,
"margin": 10,
"padding": "3px 10px",
}
}
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;

19
code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
View File

@ -1,19 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome MDX to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<button
onClick={[Function]}
type="button"
>
Welcome
</button>
`;

6
code/addons/storyshots/storyshots-core/stories/storyshot.async.test.js
View File

@ -1,13 +1,13 @@
import path from 'path';
import { render, screen, waitFor } from '@testing-library/react';
import initStoryshots, { Stories2SnapsConverter } from '../dist/types';
import { TIMEOUT, EXPECTED_VALUE } from './required_with_context/Async.stories';
import initStoryshots, { Stories2SnapsConverter } from '../src';
import { TIMEOUT, EXPECTED_VALUE } from './exported_metadata/Async.stories.jsx';
initStoryshots({
asyncJest: true,
framework: 'react',
integrityOptions: false,
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
// When async is true we need to provide a test method that
// calls done() when at the end of the test method

4
code/addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '../dist/types';
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '../src';
class AnotherStories2SnapsConverter extends Stories2SnapsConverter {
getSnapshotFileName(context) {
@ -38,7 +38,7 @@ initStoryshots({
config: ({ configure }) =>
configure(() => {
// eslint-disable-next-line global-require
require('./directly_required');
require('./exported_metadata/Extra.stories.jsx');
}, module),
test: multiSnapshotWithOptions(),
});

4
code/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js
View File

@ -1,9 +1,9 @@
import path from 'path';
import { mount } from 'enzyme';
import initStoryshots from '../dist/types';
import initStoryshots from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
renderer: mount,
});

2
code/addons/storyshots/storyshots-core/stories/storyshot.metadata.test.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import initStoryshots from '../dist/types';
import initStoryshots from '../src';
// jest.mock('@storybook/node-logger');

4
code/addons/storyshots/storyshots-core/stories/storyshot.renderOnly.test.js
View File

@ -1,8 +1,8 @@
import path from 'path';
import initStoryshots, { renderOnly } from '../dist/types';
import initStoryshots, { renderOnly } from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
test: renderOnly,
});

4
code/addons/storyshots/storyshots-core/stories/storyshot.renderWithOptions.test.js
View File

@ -1,8 +1,8 @@
import path from 'path';
import initStoryshots, { renderWithOptions } from '../dist/types';
import initStoryshots, { renderWithOptions } from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
test: renderWithOptions({}),
});

4
code/addons/storyshots/storyshots-core/stories/storyshot.shallow.test.js
View File

@ -1,8 +1,8 @@
import path from 'path';
import initStoryshots, { shallowSnapshot } from '../dist/types';
import initStoryshots, { shallowSnapshot } from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
test: shallowSnapshot,
});

4
code/addons/storyshots/storyshots-core/stories/storyshot.shallowWithOptions.test.js
View File

@ -1,9 +1,9 @@
import path from 'path';
import initStoryshots, { shallowSnapshot } from '../dist/types';
import initStoryshots, { shallowSnapshot } from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
test: (data) =>
shallowSnapshot({
...data,

4
code/addons/storyshots/storyshots-core/stories/storyshot.snapshotWithOptionsFunction.test.js
View File

@ -1,8 +1,8 @@
import path from 'path';
import initStoryshots, { snapshotWithOptions } from '../dist/types';
import initStoryshots, { snapshotWithOptions } from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
test: snapshotWithOptions(() => ({})),
});

10
code/addons/storyshots/storyshots-core/stories/storyshot.specificConfig.test.js
View File

@ -1,10 +0,0 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '../dist/types';
initStoryshots({
framework: 'react',
integrityOptions: { cwd: __dirname },
stories2snapsConverter: new Stories2SnapsConverter({ snapshotExtension: '.foo' }),
configPath: path.join(__dirname, '..', '.storybook', 'configTest.js'),
test: multiSnapshotWithOptions(),
});

4
code/addons/storyshots/storyshots-core/stories/storyshot.test.js
View File

@ -1,5 +1,5 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '../dist/types';
import initStoryshots, { multiSnapshotWithOptions } from '../src';
jest.mock('@storybook/node-logger');
@ -8,6 +8,6 @@ initStoryshots({
framework: 'react',
// Ignore integrityOptions for async.storyshot because only run when asyncJest is true
integrityOptions: { cwd: __dirname, ignore: ['**/**.async.storyshot'] },
configPath: path.join(__dirname, '..', '.storybook'),
configPath: path.join(__dirname, 'exported_metadata'),
test: multiSnapshotWithOptions(),
});

33
code/addons/storysource/package.json
View File

@ -21,9 +21,27 @@
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts",
"exports": {
".": {
"require": "./dist/index.js",
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts"
},
"./preset": {
"require": "./dist/preset.js",
"import": "./dist/preset.mjs",
"types": "./dist/preset.d.ts"
},
"./register": {
"require": "./dist/manager.js",
"import": "./dist/manager.mjs",
"types": "./dist/manager.d.ts"
},
"./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"files": [
"dist/**/*",
"README.md",
@ -32,7 +50,7 @@
],
"scripts": {
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
"prep": "node ../../../scripts/prepare.js"
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.38",
@ -66,6 +84,13 @@
"publishConfig": {
"access": "public"
},
"bundler": {
"entries": [
"./src/index.ts",
"./src/manager.tsx",
"./src/preset.ts"
]
},
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Storysource",

32
code/addons/storysource/preset.js
View File

@ -1,31 +1 @@
function webpack(webpackConfig = {}, options = {}) {
const { module = {} } = webpackConfig;
const { loaderOptions, rule = {} } = options;
return {
...webpackConfig,
module: {
...module,
rules: [
...(module.rules || []),
{
test: [/\.stories\.(jsx?$|tsx?$)/],
...rule,
enforce: 'pre',
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: loaderOptions,
},
],
},
],
},
};
}
function managerEntries(entry = []) {
return [...entry, require.resolve('./dist/esm/manager')];
}
module.exports = { webpack, managerEntries };
import './dist/preset';

2
code/addons/storysource/register.js
View File

@ -1 +1 @@
import './dist/esm/manager';
import './dist/manager';

36
code/addons/storysource/src/preset.ts Normal file
View File

@ -0,0 +1,36 @@
/// <reference types="webpack" />
function webpack(
webpackConfig = { module: { rules: [] as Array<unknown> } },
options = { loaderOptions: {}, rule: {} }
) {
const { module = { rules: [] } } = webpackConfig;
const { loaderOptions, rule = {} } = options;
return {
...webpackConfig,
module: {
...module,
rules: [
...(module.rules || []),
{
test: [/\.stories\.(jsx?$|tsx?$)/],
...rule,
enforce: 'pre',
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: loaderOptions,
},
],
},
],
},
};
}
function managerEntries(entry = [] as Array<unknown>) {
return [...entry, require.resolve('./manager')];
}
export { webpack, managerEntries };

10
code/examples/standalone-preview/storybook.ts
View File

@ -1,15 +1,7 @@
import './addPreview';
import { configure, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs';
import { configure } from '@storybook/react';
import * as Comp1 from './stories/Component1.stories';
import * as Comp2 from './stories/Component2.stories';
addParameters({
docs: {
page: DocsPage,
container: DocsContainer,
},
});
configure(() => [Comp1, Comp2], module);

1
code/examples/svelte-kitchen-sink/package.json
View File

@ -27,6 +27,7 @@
"@storybook/svelte": "7.0.0-alpha.38",
"@storybook/svelte-webpack5": "7.0.0-alpha.38",
"@storybook/testing-library": "0.0.14-next.0",
"raw-loader": "^4.0.2",
"storybook": "7.0.0-alpha.38",
"svelte-jester": "^2.3.2",
"svelte-preprocess": "^4.10.6"

13
code/frameworks/angular/package.json
View File

@ -42,6 +42,7 @@
"@storybook/core-common": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/core-server": "7.0.0-alpha.38",
"@storybook/core-webpack": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/docs-tools": "7.0.0-alpha.38",
"@storybook/node-logger": "7.0.0-alpha.38",
@ -50,24 +51,15 @@
"@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14",
"@types/semver": "^7.3.4",
"autoprefixer": "^9.8.6",
"core-js": "^3.8.2",
"find-up": "^5.0.0",
"fork-ts-checker-webpack-plugin": "^7.2.6",
"global": "^4.4.0",
"nanoid": "^3.1.23",
"p-limit": "^3.1.0",
"postcss": "^7.0.36",
"postcss-loader": "^6.2.1",
"raw-loader": "^4.0.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"read-pkg-up": "^7.0.1",
"sass-loader": "^12.6.0",
"semver": "^7.3.7",
"telejson": "^6.0.8",
"ts-dedent": "^2.0.0",
"ts-loader": "^9.2.8",
"tsconfig-paths-webpack-plugin": "^3.5.2",
"util-deprecate": "^1.0.2",
"webpack": "5"
@ -81,14 +73,11 @@
"@angular/compiler": "^13.3.6",
"@angular/compiler-cli": "^13.3.6",
"@angular/core": "^13.3.6",
"@angular/elements": "^13.3.6",
"@angular/forms": "^13.3.6",
"@angular/platform-browser": "^13.3.6",
"@angular/platform-browser-dynamic": "^13.3.6",
"@nrwl/workspace": "14.6.1",
"@types/autoprefixer": "^9.7.2",
"@types/tmp": "^0.2.3",
"@types/webpack-env": "^1.16.0",
"cross-spawn": "^7.0.3",
"jest": "^27.5.1",
"jest-preset-angular": "^12.0.0",

32
code/frameworks/angular/src/client/decorators.test.ts
View File

@ -1,9 +1,7 @@
import { addons, mockChannel } from '@storybook/addons';
import type { StoryContext } from '@storybook/addons';
import { Component } from '@angular/core';
import { moduleMetadata } from './decorators';
import { addDecorator, storiesOf, clearDecorators, getStorybook, configure } from '.';
const defaultContext: StoryContext = {
componentId: 'unspecified',
@ -106,34 +104,4 @@ describe('moduleMetadata', () => {
},
});
});
it('should work when added globally', () => {
const metadata = {
declarations: [MockComponent],
providers: [MockService],
entryComponents: [MockComponent],
imports: [MockModule],
};
addons.setChannel(mockChannel());
configure(() => {
addDecorator(moduleMetadata(metadata));
storiesOf('Test', module).add('Default', () => ({
component: MockComponent,
}));
}, {} as NodeModule);
const [storybook] = getStorybook();
expect(storybook.stories[0].render({}).moduleMetadata).toEqual({
declarations: [MockComponent],
providers: [MockService],
entryComponents: [MockComponent],
imports: [MockModule],
schemas: [],
});
clearDecorators();
});
});

12
code/frameworks/angular/src/client/public-api.ts
View File

@ -3,17 +3,14 @@ import type { ClientStoryApi, Loadable } from '@storybook/addons';
import { start } from '@storybook/core-client';
import { renderToDOM, render } from './render';
import decorateStory from './decorateStory';
import type { IStorybookSection, AngularFramework } from './types';
import type { AngularFramework } from './types';
export * from './public-types';
const FRAMEWORK = 'angular';
interface ClientApi extends ClientStoryApi<AngularFramework['storyResult']> {
setAddon(addon: any): void;
configure(loader: Loadable, module: NodeModule): void;
getStorybook(): IStorybookSection[];
clearDecorators(): void;
forceReRender(): void;
raw: () => any; // todo add type
load: (...args: any[]) => void;
@ -28,12 +25,5 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const addDecorator: ClientApi['addDecorator'] = api.clientApi
.addDecorator as ClientApi['addDecorator'];
export const addParameters: ClientApi['addParameters'] = api.clientApi
.addParameters as ClientApi['addParameters'];
export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
export const raw: ClientApi['raw'] = api.clientApi.raw;

10
code/frameworks/angular/src/client/types.ts
View File

@ -14,16 +14,6 @@ export interface ICollection {
[p: string]: any;
}
export interface IStorybookStory {
name: string;
render: (context: any) => any;
}
export interface IStorybookSection {
kind: string;
stories: IStorybookStory[];
}
export interface StoryFnAngularReturnType {
/** @deprecated `component` story input is deprecated, and will be removed in Storybook 7.0. */
component?: any;

3
code/frameworks/ember/src/client/preview/index.ts
View File

@ -5,8 +5,7 @@ import { renderToDOM } from './render';
const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM);
export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } =
clientApi;
export const { raw } = clientApi;
const FRAMEWORK = 'ember';
export const storiesOf = (kind: string, m: any) =>

11
code/frameworks/ember/src/index.ts
View File

@ -1,15 +1,6 @@
/// <reference types="webpack-env" />
export {
storiesOf,
setAddon,
addDecorator,
addParameters,
configure,
getStorybook,
forceReRender,
raw,
} from './client/preview';
export { storiesOf, configure, forceReRender, raw } from './client/preview';
// optimization: stop HMR propagation in webpack
module?.hot?.decline();

1
code/frameworks/html-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/html';
export * from './types';

1
code/frameworks/preact-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/preact';
export * from './types';

1
code/frameworks/react-vite/src/index.ts
View File

@ -5,5 +5,4 @@ export { addons } from '@storybook/addons';
export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
export { ClientApi } from '@storybook/client-api';
export * from '@storybook/react';
export type { StorybookConfig } from '@storybook/builder-vite';

1
code/frameworks/react-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/react';
export * from './types';

1
code/frameworks/server-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/server';
export * from './types';

1
code/frameworks/svelte-vite/src/index.ts
View File

@ -5,5 +5,4 @@ export { addons } from '@storybook/addons';
export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
export { ClientApi } from '@storybook/client-api';
export * from '@storybook/svelte';
export type { StorybookConfig } from '@storybook/builder-vite';

1
code/frameworks/svelte-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/svelte';
export * from './types';

1
code/frameworks/vue-vite/src/index.ts
View File

@ -5,5 +5,4 @@ export { addons } from '@storybook/addons';
export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
export { ClientApi } from '@storybook/client-api';
export * from '@storybook/vue';
export type { StorybookConfig } from '@storybook/builder-vite';

1
code/frameworks/vue-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/vue';
export * from './types';

1
code/frameworks/vue3-vite/src/index.ts
View File

@ -5,5 +5,4 @@ export { addons } from '@storybook/addons';
export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
export { ClientApi } from '@storybook/client-api';
export * from '@storybook/vue3';
export type { StorybookConfig } from '@storybook/builder-vite';

1
code/frameworks/vue3-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/vue3';
export * from './types';

1
code/frameworks/web-components-vite/src/index.ts
View File

@ -5,5 +5,4 @@ export { addons } from '@storybook/addons';
export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
export { ClientApi } from '@storybook/client-api';
export * from '@storybook/web-components';
export type { StorybookConfig } from '@storybook/builder-vite';

1
code/frameworks/web-components-webpack5/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/web-components';
export * from './types';

13
code/lib/addons/src/types.ts
View File

@ -168,17 +168,6 @@ export interface ClientApiAddons<StoryFnReturnType> {
[key: string]: ClientApiAddon<StoryFnReturnType>;
}
// Old types for getStorybook()
export interface IStorybookStory {
name: string;
render: (context: any) => any;
}
export interface IStorybookSection {
kind: string;
stories: IStorybookStory[];
}
export type ClientApiReturnFn<StoryFnReturnType = unknown> = (
...args: any[]
) => StoryApi<StoryFnReturnType>;
@ -198,8 +187,6 @@ export interface StoryApi<StoryFnReturnType = unknown> {
export interface ClientStoryApi<StoryFnReturnType = unknown> {
storiesOf(kind: StoryKind, module: any): StoryApi<StoryFnReturnType>;
addDecorator(decorator: DecoratorFunction<StoryFnReturnType>): StoryApi<StoryFnReturnType>;
addParameters(parameter: Parameters): StoryApi<StoryFnReturnType>;
}
type LoadFn = () => any;

1
code/lib/cli/package.json
View File

@ -55,6 +55,7 @@
"commander": "^6.2.1",
"cross-spawn": "^7.0.3",
"degit": "^2.8.4",
"detect-indent": "^6.1.0",
"envinfo": "^7.7.3",
"execa": "^5.0.0",
"express": "^4.17.1",

39
code/lib/cli/src/automigrate/fixes/eslint-plugin.ts
View File

@ -2,6 +2,8 @@ import chalk from 'chalk';
import { dedent } from 'ts-dedent';
import { ConfigFile, readConfig, writeConfig } from '@storybook/csf-tools';
import { getStorybookInfo } from '@storybook/core-common';
import { readFile, readJson, writeJson } from 'fs-extra';
import detectIndent from 'detect-indent';
import { findEslintFile, SUPPORTED_ESLINT_EXTENSIONS } from '../helpers/getEslintInfo';
@ -79,26 +81,39 @@ export const eslintPlugin: Fix<EslintPluginRunOptions> = {
if (!dryRun) packageManager.addDependencies({ installAsDevDependencies: true }, deps);
if (!dryRun && unsupportedExtension) {
throw new Error(dedent`
⚠️ The plugin was successfuly installed but failed to configure.
logger.info(dedent`
⚠️ The plugin was successfully installed but failed to configure.
Found an .eslintrc config file with an unsupported automigration format: ${unsupportedExtension}.
Supported formats for automigration are: ${SUPPORTED_ESLINT_EXTENSIONS.join(', ')}.
Found an eslint config file with an unsupported automigration format: .eslintrc.${unsupportedExtension}.
The supported formats for this automigration are: ${SUPPORTED_ESLINT_EXTENSIONS.join(
', '
)}.
Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually.
`);
return;
}
const eslint = await readConfig(eslintFile);
logger.info(`✅ Configuring eslint rules in ${eslint.fileName}`);
logger.info(`✅ Adding Storybook plugin to ${eslintFile}`);
if (!dryRun) {
logger.info(`✅ Adding Storybook to extends list`);
const extendsConfig = eslint.getFieldValue(['extends']) || [];
const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig];
eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']);
if (eslintFile.endsWith('json')) {
const eslintConfig = (await readJson(eslintFile)) as { extends?: string[] };
const existingConfigValue = Array.isArray(eslintConfig.extends)
? eslintConfig.extends
: [eslintConfig.extends];
eslintConfig.extends = [...(existingConfigValue || []), 'plugin:storybook/recommended'];
await writeConfig(eslint);
const eslintFileContents = await readFile(eslintFile, 'utf8');
const spaces = detectIndent(eslintFileContents).amount || 2;
await writeJson(eslintFile, eslintConfig, { spaces });
} else {
const eslint = await readConfig(eslintFile);
const extendsConfig = eslint.getFieldValue(['extends']) || [];
const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig];
eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']);
await writeConfig(eslint);
}
}
},
};

3
code/lib/cli/src/automigrate/fixes/index.ts
View File

@ -8,9 +8,11 @@ import { builderVite } from './builder-vite';
import { npm7 } from './npm7';
import { sbScripts } from './sb-scripts';
import { newFrameworks } from './new-frameworks';
import { removedGlobalClientAPIs } from './remove-global-client-apis';
import { Fix } from '../types';
export * from '../types';
export const fixes: Fix[] = [
cra5,
webpack5,
@ -22,4 +24,5 @@ export const fixes: Fix[] = [
npm7,
sbScripts,
newFrameworks,
removedGlobalClientAPIs,
];

58
code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts Normal file
View File

@ -0,0 +1,58 @@
/// <reference types="@types/jest" />;
/* eslint-disable no-underscore-dangle */
import path from 'path';
import { JsPackageManager } from '../../js-package-manager';
import { RemovedAPIs, removedGlobalClientAPIs as migration } from './remove-global-client-apis';
// eslint-disable-next-line global-require, jest/no-mocks-import
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
const check = async ({ packageJson = {}, contents }) => {
if (contents) {
// eslint-disable-next-line global-require
require('fs-extra').__setMockFiles({
[path.join('.storybook', 'preview.js')]: contents,
});
}
const packageManager = {
retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
} as JsPackageManager;
return migration.check({ packageManager });
};
describe('removedGlobalClientAPIs fix', () => {
it('file does not exist', async () => {
const contents = false;
await expect(check({ contents })).resolves.toBeNull();
});
it('uses no removed APIs', async () => {
const contents = `
export const parameters = {};
`;
await expect(check({ contents })).resolves.toBeNull();
});
it('uses 1 removed API', async () => {
const contents = `
import { addParameters } from '@storybook/react';
addParameters({});
`;
await expect(check({ contents })).resolves.toEqual(
expect.objectContaining({
usedAPIs: [RemovedAPIs.addParameters],
})
);
});
it('uses >1 removed APIs', async () => {
const contents = `
import { addParameters, addDecorator } from '@storybook/react';
addParameters({});
addDecorator((storyFn) => storyFn());
`;
await expect(check({ contents })).resolves.toEqual(
expect.objectContaining({
usedAPIs: expect.arrayContaining([RemovedAPIs.addParameters, RemovedAPIs.addDecorator]),
})
);
});
});

65
code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts Normal file
View File

@ -0,0 +1,65 @@
import chalk from 'chalk';
import dedent from 'ts-dedent';
import { getStorybookInfo } from '@storybook/core-common';
import { readFile } from 'fs-extra';
import { Fix } from '../types';
export enum RemovedAPIs {
addDecorator = 'addDecorator',
addParameters = 'addParameters',
addLoader = 'addLoader',
getStorybook = 'getStorybook',
setAddon = 'setAddon',
clearDecorators = 'clearDecorators',
}
interface GlobalClientAPIOptions {
usedAPIs: RemovedAPIs[];
previewPath: string;
}
export const removedGlobalClientAPIs: Fix<GlobalClientAPIOptions> = {
id: 'removedglobalclientapis',
async check({ packageManager }) {
const packageJson = packageManager.retrievePackageJson();
const { previewConfig } = getStorybookInfo(packageJson);
if (previewConfig) {
const contents = await readFile(previewConfig, 'utf8');
const usedAPIs = Object.values(RemovedAPIs).reduce((acc, item) => {
if (contents.includes(item)) {
acc.push(item);
}
return acc;
}, [] as RemovedAPIs[]);
if (usedAPIs.length) {
return {
usedAPIs,
previewPath: previewConfig,
};
}
}
return null;
},
prompt({ usedAPIs, previewPath }) {
return dedent`
The following APIs (used in "${chalk.yellow(previewPath)}") have been removed from Storybook:
${usedAPIs.map(chalk.cyan).join(', ')}
You'll need to update "${chalk.yellow(previewPath)}" manually.
Please see the migration guide for more information:
${chalk.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-global-client-apis'
)}
`;
},
async run() {
console.log('Skipping automatic fix for removed global client APIs');
},
};

4
code/lib/cli/src/automigrate/helpers/getEslintInfo.ts
View File

@ -1,7 +1,7 @@
import fse from 'fs-extra';
export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs'];
const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml', 'json'];
export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs', 'json'];
const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml'];
export const findEslintFile = () => {
const filePrefix = '.eslintrc';

90
code/lib/client-api/src/ClientApi.test.ts
View File

@ -6,96 +6,6 @@ beforeEach(() => {
});
describe('ClientApi', () => {
describe('setAddon', () => {
it('should register addons', () => {
const clientApi = new ClientApi();
let data;
clientApi.setAddon({
aa() {
data = 'foo';
},
});
// @ts-expect-error (Converted from ts-ignore)
clientApi.storiesOf('none', module).aa();
expect(data).toBe('foo');
});
it('should not remove previous addons', () => {
const clientApi = new ClientApi();
const data = [];
clientApi.setAddon({
aa() {
data.push('foo');
},
});
clientApi.setAddon({
bb() {
data.push('bar');
},
});
// @ts-expect-error (Converted from ts-ignore)
clientApi.storiesOf('none', module).aa().bb();
expect(data).toEqual(['foo', 'bar']);
});
it('should call with the clientApi context', () => {
const clientApi = new ClientApi();
let data;
clientApi.setAddon({
aa() {
data = typeof this.add;
},
});
// @ts-expect-error (Converted from ts-ignore)
clientApi.storiesOf('none', module).aa();
expect(data).toBe('function');
});
it('should be able to access addons added previously', () => {
const clientApi = new ClientApi();
let data;
clientApi.setAddon({
aa() {
data = 'foo';
},
});
clientApi.setAddon({
bb() {
this.aa();
},
});
// @ts-expect-error (Converted from ts-ignore)
clientApi.storiesOf('none', module).bb();
expect(data).toBe('foo');
});
it('should be able to access the current kind', () => {
const clientApi = new ClientApi();
const kind = 'dfdwf3e3';
let data;
clientApi.setAddon({
aa() {
data = this.kind;
},
});
// @ts-expect-error (Converted from ts-ignore)
clientApi.storiesOf(kind, module).aa();
expect(data).toBe(kind);
});
});
describe('getStoryIndex', () => {
it('should remember the order that files were added in', async () => {
const clientApi = new ClientApi();

106
code/lib/client-api/src/ClientApi.ts
View File

@ -1,6 +1,5 @@
/// <reference types="webpack-env" />
import deprecate from 'util-deprecate';
import { dedent } from 'ts-dedent';
import global from 'global';
import { logger } from '@storybook/client-logger';
@ -15,7 +14,6 @@ import type {
ArgsEnhancer,
LoaderFunction,
StoryFn,
ComponentTitle,
Globals,
GlobalTypes,
LegacyStoryFn,
@ -49,94 +47,77 @@ let singleton: ClientApi<AnyFramework>;
const warningAlternatives = {
addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`,
addParameters: `Instead, use \`export const parameters = {};\` in your \`preview.js\`.`,
addLoaders: `Instead, use \`export const loaders = [];\` in your \`preview.js\`.`,
addLoader: `Instead, use \`export const loaders = [];\` in your \`preview.js\`.`,
addArgs: '',
addArgTypes: '',
addArgsEnhancer: '',
addArgTypesEnhancer: '',
addStepRunner: '',
getGlobalRender: '',
setGlobalRender: '',
};
const warningMessage = (method: keyof typeof warningAlternatives) =>
deprecate(
() => {},
dedent`
\`${method}\` is deprecated, and will be removed in Storybook 7.0.
${warningAlternatives[method]}
Read more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addparameters-and-adddecorator).`
);
const warnings = {
addDecorator: warningMessage('addDecorator'),
addParameters: warningMessage('addParameters'),
addLoaders: warningMessage('addLoaders'),
};
const checkMethod = (method: string, deprecationWarning: boolean) => {
const checkMethod = (method: keyof typeof warningAlternatives) => {
if (global.FEATURES?.storyStoreV7) {
throw new Error(
dedent`You cannot use \`${method}\` with the new Story Store.
${warningAlternatives[method as keyof typeof warningAlternatives]}`
${warningAlternatives[method]}`
);
}
if (!singleton) {
throw new Error(`Singleton client API not yet initialized, cannot call \`${method}\`.`);
}
if (deprecationWarning) {
warnings[method as keyof typeof warningAlternatives]();
}
};
export const addDecorator = (
decorator: DecoratorFunction<AnyFramework>,
deprecationWarning = true
) => {
checkMethod('addDecorator', deprecationWarning);
export const addDecorator = (decorator: DecoratorFunction<AnyFramework>) => {
checkMethod('addDecorator');
singleton.addDecorator(decorator);
};
export const addParameters = (parameters: Parameters, deprecationWarning = true) => {
checkMethod('addParameters', deprecationWarning);
export const addParameters = (parameters: Parameters) => {
checkMethod('addParameters');
singleton.addParameters(parameters);
};
export const addLoader = (loader: LoaderFunction<AnyFramework>, deprecationWarning = true) => {
checkMethod('addLoader', deprecationWarning);
export const addLoader = (loader: LoaderFunction<AnyFramework>) => {
checkMethod('addLoader');
singleton.addLoader(loader);
};
export const addArgs = (args: Args) => {
checkMethod('addArgs', false);
checkMethod('addArgs');
singleton.addArgs(args);
};
export const addArgTypes = (argTypes: ArgTypes) => {
checkMethod('addArgTypes', false);
checkMethod('addArgTypes');
singleton.addArgTypes(argTypes);
};
export const addArgsEnhancer = (enhancer: ArgsEnhancer<AnyFramework>) => {
checkMethod('addArgsEnhancer', false);
checkMethod('addArgsEnhancer');
singleton.addArgsEnhancer(enhancer);
};
export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<AnyFramework>) => {
checkMethod('addArgTypesEnhancer', false);
checkMethod('addArgTypesEnhancer');
singleton.addArgTypesEnhancer(enhancer);
};
export const addStepRunner = (stepRunner: StepRunner) => {
checkMethod('addStepRunner', false);
checkMethod('addStepRunner');
singleton.addStepRunner(stepRunner);
};
export const getGlobalRender = () => {
checkMethod('getGlobalRender', false);
checkMethod('getGlobalRender');
return singleton.facade.projectAnnotations.render;
};
export const setGlobalRender = (render: StoryFn<AnyFramework>) => {
checkMethod('setGlobalRender', false);
checkMethod('setGlobalRender');
singleton.facade.projectAnnotations.render = render;
};
@ -176,32 +157,10 @@ export class ClientApi<TFramework extends AnyFramework> {
return this.facade.getStoryIndex(this.storyStore);
}
setAddon = deprecate(
(addon: any) => {
this.addons = { ...this.addons, ...addon };
},
dedent`
\`setAddon\` is deprecated and will be removed in Storybook 7.0.
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-setaddon
`
);
addDecorator = (decorator: DecoratorFunction<TFramework>) => {
this.facade.projectAnnotations.decorators.push(decorator);
};
clearDecorators = deprecate(
() => {
this.facade.projectAnnotations.decorators = [];
},
dedent`
\`clearDecorators\` is deprecated and will be removed in Storybook 7.0.
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-cleardecorators
`
);
addParameters = ({
globals,
globalTypes,
@ -414,25 +373,6 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m
return api;
};
getStorybook = (): GetStorybookKind<TFramework>[] => {
const { entries } = this.storyStore.storyIndex;
const kinds: Record<ComponentTitle, GetStorybookKind<TFramework>> = {};
Object.entries(entries).forEach(([storyId, { title, name, importPath, type }]) => {
if (type && type !== 'story') return;
if (!kinds[title]) {
kinds[title] = { kind: title, fileName: importPath, stories: [] };
}
const { storyFn } = this.storyStore.fromId(storyId);
kinds[title].stories.push({ name, render: storyFn });
});
return Object.values(kinds);
};
// @deprecated
raw = () => {
return this.storyStore.raw();

8
code/lib/client-api/src/index.ts
View File

@ -1,8 +1,8 @@
import {
ClientApi,
addDecorator,
addParameters,
addLoader,
addParameters,
addArgs,
addArgTypes,
addArgsEnhancer,
@ -20,13 +20,13 @@ export * from './queryparams';
export * from '@storybook/store';
export {
addArgsEnhancer,
addArgTypesEnhancer,
addDecorator,
addLoader,
addParameters,
addArgsEnhancer,
addArgTypesEnhancer,
addArgs,
addArgTypes,
addParameters,
addStepRunner,
setGlobalRender,
ClientApi,

137
code/lib/core-client/src/preview/start.test.ts
View File

@ -302,37 +302,6 @@ describe('start', () => {
]);
});
it('allows global metadata via client-api', async () => {
const renderToDOM = jest.fn(({ storyFn }) => storyFn());
const { configure, clientApi } = start(renderToDOM);
const loader = jest.fn(async () => ({ val: 'loaded' }));
const decorator = jest.fn();
configure('test', () => {
clientApi.addLoader(loader);
clientApi.addDecorator(decorator);
clientApi.addParameters({ param: 'global' });
clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());
});
await waitForRender();
expect(loader).toHaveBeenCalled();
expect(decorator).toHaveBeenCalled();
expect(renderToDOM).toHaveBeenCalledWith(
expect.objectContaining({
storyContext: expect.objectContaining({
parameters: expect.objectContaining({
framework: 'test',
param: 'global',
}),
}),
}),
'story-root'
);
});
it('allows setting compomnent/args/argTypes via a parameter', async () => {
const renderToDOM = jest.fn(({ storyFn }) => storyFn());
@ -1190,112 +1159,6 @@ describe('start', () => {
});
});
// These tests need to be in here, as they require a convoluted hookup between
// a ClientApi and a StoryStore
describe('ClientApi.getStorybook', () => {
it('should transform the storybook to an array with filenames, empty', () => {
const { configure, clientApi } = start(jest.fn());
configure('test', () => {});
expect(clientApi.getStorybook()).toEqual([]);
});
it('should transform the storybook to an array with filenames, full', () => {
const { configure, clientApi } = start(jest.fn());
configure('test', () => {
clientApi
.storiesOf('kind 1', { id: 'file1' } as any)
.add('name 1', () => '1')
.add('name 2', () => '2');
clientApi
.storiesOf('kind 2', { id: 'file2' } as any)
.add('name 1', () => '1')
.add('name 2', () => '2');
});
expect(clientApi.getStorybook()).toEqual([
expect.objectContaining({
fileName: expect.any(String),
kind: 'kind 1',
stories: [
{
name: 'name 1',
render: expect.any(Function),
},
{
name: 'name 2',
render: expect.any(Function),
},
],
}),
expect.objectContaining({
fileName: expect.any(String),
kind: 'kind 2',
stories: [
{
name: 'name 1',
render: expect.any(Function),
},
{
name: 'name 2',
render: expect.any(Function),
},
],
}),
]);
});
it('reads filename from module', async () => {
const { configure, clientApi } = start(jest.fn());
const fn = jest.fn();
configure('test', () => {
clientApi.storiesOf('kind', { id: 'foo.js' } as NodeModule).add('name', fn);
});
const storybook = clientApi.getStorybook();
expect(storybook).toEqual([
{
kind: 'kind',
fileName: 'foo.js',
stories: [
{
name: 'name',
render: expect.any(Function),
},
],
},
]);
});
it('should stringify ids from module', async () => {
const { configure, clientApi } = start(jest.fn());
const fn = jest.fn();
configure('test', () => {
clientApi.storiesOf('kind', { id: 1211 } as any).add('name', fn);
});
const storybook = clientApi.getStorybook();
expect(storybook).toEqual([
{
kind: 'kind',
fileName: '1211',
stories: [
{
name: 'name',
render: expect.any(Function),
},
],
},
]);
});
});
describe('auto-title', () => {
const componentDExports = {
default: {

Some files were not shown because too many files have changed in this diff Show More