Merge branch 'next' into feat/improved-e2e-scripts

This commit is contained in:
Gaëtan Maisse 2021-05-18 17:56:27 +02:00
commit 4c7d4d627a
No known key found for this signature in database
GPG Key ID: D934C0EF3714A8A8
228 changed files with 5808 additions and 1325 deletions

View File

@ -12,7 +12,13 @@ const withTests = {
],
};
const modules = process.env.BABEL_ESM === 'true' ? false : 'auto';
// type BabelMode = 'cjs' | 'esm' | 'modern';
const modules = process.env.BABEL_MODE === 'cjs' ? 'auto' : false;
// FIXME: optional chaining introduced in chrome 80, not supported by wepback4
// https://github.com/webpack/webpack/issues/10227#issuecomment-642734920
const targets = process.env.BABEL_MODE === 'modern' ? { chrome: '79' } : 'defaults';
module.exports = {
ignore: [
@ -26,7 +32,7 @@ module.exports = {
shippedProposals: true,
useBuiltIns: 'usage',
corejs: '3',
targets: 'defaults',
targets,
modules,
},
],
@ -70,7 +76,7 @@ module.exports = {
useBuiltIns: 'usage',
corejs: '3',
modules,
targets: 'defaults',
targets,
},
],
'@babel/preset-react',

View File

@ -78,7 +78,7 @@ commands:
jobs:
build:
executor:
class: large
class: xlarge
name: sb_node_12_classic
steps:
- git-shallow-clone/checkout_advanced:
@ -218,8 +218,8 @@ jobs:
command: yarn wait-on http://localhost:6000
- run:
name: Run E2E tests
# Do not test CRA here because it's done in PnP part and add `angular` as soon as SB will support Angular 12
command: yarn test:e2e-framework vue3 angular11 web_components_typescript
# Do not test CRA here because it's done in PnP part
command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript
- store_artifacts:
path: /tmp/storybook/cypress
destination: cypress
@ -246,7 +246,7 @@ jobs:
cd ..
npx create-react-app cra-bench
cd cra-bench
npx @storybook/bench 'npx sb init' --label cra
npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern"
e2e-tests-pnp:
executor:
class: medium

View File

@ -1,7 +1,7 @@
blank_issues_enabled: false
contact_links:
- name: Documentation 📚
url: https://storbyook.js.org/docs/
url: https://storybook.js.org/docs/
about: Check out the official docs for answers to common questions
- name: Questions & discussions 🤔
url: https://github.com/storybookjs/storybook/discussions

View File

@ -1,3 +1,52 @@
## 6.3.0-alpha.33 (May 18, 2021)
### Bug Fixes
- Controls: Fix controls without options and add warning ([#14976](https://github.com/storybookjs/storybook/pull/14976))
- Core: Add remaining sbmodern exports ([#14977](https://github.com/storybookjs/storybook/pull/14977))
## 6.3.0-alpha.32 (May 18, 2021)
Failed NPM publish
## 6.3.0-alpha.31 (May 18, 2021)
### Features
- Angular: Pass bootstrapOptions to angular ([#14852](https://github.com/storybookjs/storybook/pull/14852))
- Controls: Update all controls to have explicit handling for `undefined` ([#14899](https://github.com/storybookjs/storybook/pull/14899))
- Core: Add args enhancers + use in addon-actions ([#14901](https://github.com/storybookjs/storybook/pull/14901))
- Addon-docs: Remove all defaultValue eval-ing ([#14900](https://github.com/storybookjs/storybook/pull/14900))
## 6.3.0-alpha.30 (May 18, 2021)
### Features
- Core: Built-in static `stories.json` support ([#14945](https://github.com/storybookjs/storybook/pull/14945))
### Maintenance
- Core: Add modern build target to apps aka frameworks ([#14967](https://github.com/storybookjs/storybook/pull/14967))
- Build: Increase CI `build` step to XL ([#14970](https://github.com/storybookjs/storybook/pull/14970))
## 6.3.0-alpha.29 (May 17, 2021)
### Features
- UI: Provide option to hide default toolbar tools ([#14897](https://github.com/storybookjs/storybook/pull/14897))
- Core: Support modern browser target ([#14954](https://github.com/storybookjs/storybook/pull/14954))
### Maintenance
- Core: Remove updateGlobals warning message ([#14949](https://github.com/storybookjs/storybook/pull/14949))
- Controls: Tighten color control inference heuristic and test ([#14684](https://github.com/storybookjs/storybook/pull/14684))
## 6.3.0-alpha.28 (May 15, 2021)
### Bug Fixes
- CLI: Keep Webpack 4 builder for Angular lower than 12 ([#14942](https://github.com/storybookjs/storybook/pull/14942))
## 6.3.0-alpha.27 (May 14, 2021)
### Features

View File

@ -4,6 +4,7 @@
- [Angular 12 upgrade](#angular-12-upgrade)
- [6.3 deprecations](#63-deprecations)
- [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
- [Deprecated argType.defaulValue](#deprecated-argtype-defaultValue)
- [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
- [MDX pattern tweaked](#mdx-pattern-tweaked)
- [6.2 Angular overhaul](#62-angular-overhaul)
@ -193,6 +194,21 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
import { Meta, Story } from '@storybook/addon-docs';
```
#### Deprecated `argType.defaultValue`
Previously, unset `args` were set to the `argType.defaultValue` if set or inferred from the component's prop types (etc.). In 6.3 we no longer infer default values and instead set arg values to `undefined` when unset, allowing the framework to supply the default value.
If you were using `argType.defaultValue` to fix issues with the above inference, it should no longer be necessary, you can remove that code. If you were using it to set a default value for an arg, there is a simpler way; simply set a value for the arg at the component level:
```js
export default {
component: MyComponent,
args: {
argName: 'default-value',
},
};
```
## From version 6.1.x to 6.2.0
### MDX pattern tweaked

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -45,14 +45,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/channels": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/client-logger": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/core-events": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/channels": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/client-logger": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/core-events": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"axe-core": "^4.2.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -81,7 +81,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Accessibility",
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"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.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/core-events": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/core-events": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
"global": "^4.4.0",
@ -78,7 +78,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Actions",
"unsupportedFrameworks": [

View File

@ -1,3 +1,3 @@
import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
export const argTypesEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
export const argsEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];

View File

@ -1,76 +1,67 @@
import { StoryContext } from '@storybook/addons';
import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
const withDefaultValue = (argTypes) =>
Object.keys(argTypes).filter((key) => !!argTypes[key].defaultValue);
describe('actions parameter enhancers', () => {
describe('actions.argTypesRegex parameter', () => {
const baseParameters = {
argTypes: { onClick: {}, onFocus: {}, somethingElse: {} },
actions: { argTypesRegex: '^on.*' },
};
const parameters = { actions: { argTypesRegex: '^on.*' } };
const argTypes = { onClick: {}, onFocus: {}, somethingElse: {} };
it('should add actions that match a pattern', () => {
const parameters = baseParameters;
const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onFocus']);
const args = inferActionsFromArgTypesRegex(({
argTypes,
parameters,
} as unknown) as StoryContext);
expect(args).toEqual({
onClick: expect.any(Function),
onFocus: expect.any(Function),
});
});
it('should override pre-existing argTypes', () => {
const parameters = {
...baseParameters,
const args = inferActionsFromArgTypesRegex(({
parameters,
argTypes: {
onClick: { defaultValue: 'pre-existing value' },
},
};
const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(withDefaultValue(argTypes)).toEqual(['onClick']);
expect(argTypes.onClick.defaultValue).not.toBeNull();
expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value');
} as unknown) as StoryContext);
expect(args).toEqual({
onClick: expect.any(Function),
});
});
it('should do nothing if actions are disabled', () => {
const parameters = {
...baseParameters,
actions: { ...baseParameters.actions, disable: true },
};
const result = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(result).toEqual(parameters.argTypes);
const args = inferActionsFromArgTypesRegex(({
parameters: {
...parameters,
actions: { ...parameters.actions, disable: true },
},
argTypes,
} as unknown) as StoryContext);
expect(args).toEqual({});
});
});
describe('argTypes.action parameter', () => {
const baseParameters = {
argTypes: {
onClick: { action: 'clicked!' },
onBlur: { action: 'blurred!' },
},
const argTypes = {
onClick: { action: 'clicked!' },
onBlur: { action: 'blurred!' },
};
it('should add actions based on action.args', () => {
const parameters = baseParameters;
const argTypes = addActionsFromArgTypes({ parameters } as StoryContext);
expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
});
it('should override pre-existing args', () => {
const parameters = {
...baseParameters,
argTypes: {
onClick: { defaultValue: 'pre-existing value', action: 'onClick' },
onBlur: { action: 'onBlur' },
},
};
const argTypes = addActionsFromArgTypes({ parameters } as StoryContext);
expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
expect(argTypes.onClick.defaultValue).not.toBeNull();
expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value');
expect(
addActionsFromArgTypes(({ argTypes, parameters: {} } as unknown) as StoryContext)
).toEqual({
onClick: expect.any(Function),
onBlur: expect.any(Function),
});
});
it('should do nothing if actions are disabled', () => {
const parameters = { ...baseParameters, actions: { disable: true } };
const result = addActionsFromArgTypes({ parameters } as StoryContext);
expect(result).toEqual(parameters.argTypes);
expect(
addActionsFromArgTypes(({
argTypes,
parameters: { actions: { disable: true } },
} as unknown) as StoryContext)
).toEqual({});
});
});
});

View File

@ -1,5 +1,5 @@
import mapValues from 'lodash/mapValues';
import { ArgTypesEnhancer } from '@storybook/client-api';
import { Args } from '@storybook/addons';
import { ArgsEnhancer } from '@storybook/client-api';
import { action } from '../index';
// interface ActionsParameter {
@ -12,35 +12,42 @@ import { action } from '../index';
* matches a regex, such as `^on.*` for react-style `onClick` etc.
*/
export const inferActionsFromArgTypesRegex: ArgTypesEnhancer = (context) => {
const { actions, argTypes } = context.parameters;
export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
const {
parameters: { actions },
argTypes,
} = context;
if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
return argTypes;
return {};
}
const argTypesRegex = new RegExp(actions.argTypesRegex);
return mapValues(argTypes, (argType, name) => {
if (!argTypesRegex.test(name)) {
return argType;
}
return { ...argType, defaultValue: action(name) };
});
const argTypesMatchingRegex = Object.entries(argTypes).filter(
([name]) => !!argTypesRegex.test(name)
);
return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
acc[name] = action(name);
return acc;
}, {} as Args);
};
/**
* Add action args for list of strings.
*/
export const addActionsFromArgTypes: ArgTypesEnhancer = (context) => {
const { argTypes, actions } = context.parameters;
export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
const {
argTypes,
parameters: { actions },
} = context;
if (actions?.disable || !argTypes) {
return argTypes;
return {};
}
return mapValues(argTypes, (argType, name) => {
if (!argType.action) {
return argType;
}
const message = typeof argType.action === 'string' ? argType.action : name;
return { ...argType, defaultValue: action(message) };
});
const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
return argTypesWithAction.reduce((acc, [name, argType]) => {
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
return acc;
}, {} as Args);
};

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@ -45,12 +45,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/client-logger": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/core-events": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/client-logger": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/core-events": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
@ -76,7 +76,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Backgrounds",
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
@ -45,12 +45,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/node-logger": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/node-logger": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"ts-dedent": "^2.0.0"
},
@ -69,7 +69,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/register.js",
"storybook": {
"displayName": "Controls",
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

View File

@ -59,15 +59,15 @@ If you're coming from the `storiesOf` format, there's [a codemod that adds it fo
## Subcomponents parameter
Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `List` and `ListItem` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `Button` and `ButtonGroup` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
```js
import { List, ListHeading, ListItem } from './List';
import { Button, ButtonGroup } from '../ButtonGroup';
export default {
title: 'Path/to/List',
component: List,
subcomponents: { ListHeading, ListItem },
title: 'Path/to/ButtonGroup',
component: ButtonGroup,
subcomponents: { Button },
};
```
@ -79,7 +79,7 @@ If you want organize your documentation differently for groups of components, we
## Replacing DocsPage
What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
What if you don't want a `DocsPage` for your Storybook, for a specific component, or even for a specific story?
You can replace DocsPage at any level by overriding the `docs.page` parameter:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
@ -63,19 +63,19 @@
"@mdx-js/loader": "^1.6.22",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/builder-webpack4": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/client-logger": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-events": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/builder-webpack4": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/client-logger": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-events": "6.3.0-alpha.33",
"@storybook/csf": "0.0.1",
"@storybook/node-logger": "6.3.0-alpha.27",
"@storybook/postinstall": "6.3.0-alpha.27",
"@storybook/source-loader": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/node-logger": "6.3.0-alpha.33",
"@storybook/postinstall": "6.3.0-alpha.33",
"@storybook/source-loader": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"acorn": "^7.4.1",
"acorn-jsx": "^5.3.1",
"acorn-walk": "^7.2.0",
@ -102,11 +102,11 @@
"@babel/core": "^7.12.10",
"@emotion/core": "^10.1.1",
"@emotion/styled": "^10.0.27",
"@storybook/angular": "6.3.0-alpha.27",
"@storybook/lit": "6.3.0-alpha.27",
"@storybook/react": "6.3.0-alpha.27",
"@storybook/vue": "6.3.0-alpha.27",
"@storybook/web-components": "6.3.0-alpha.27",
"@storybook/angular": "6.3.0-alpha.33",
"@storybook/lit": "6.3.0-alpha.33",
"@storybook/react": "6.3.0-alpha.33",
"@storybook/vue": "6.3.0-alpha.33",
"@storybook/web-components": "6.3.0-alpha.33",
"@types/cross-spawn": "^6.0.2",
"@types/doctrine": "^0.0.3",
"@types/enzyme": "^3.10.8",
@ -136,11 +136,11 @@
"zone.js": "^0.11.3"
},
"peerDependencies": {
"@storybook/angular": "6.3.0-alpha.27",
"@storybook/lit": "6.3.0-alpha.27",
"@storybook/vue": "6.3.0-alpha.27",
"@storybook/vue3": "6.3.0-alpha.27",
"@storybook/web-components": "6.3.0-alpha.27",
"@storybook/angular": "6.3.0-alpha.33",
"@storybook/lit": "6.3.0-alpha.33",
"@storybook/vue": "6.3.0-alpha.33",
"@storybook/vue3": "6.3.0-alpha.33",
"@storybook/web-components": "6.3.0-alpha.33",
"lit": "^2.0.0-rc.1",
"lit-html": "^1.0.0",
"react": "^16.8.0 || ^17.0.0",
@ -194,7 +194,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Docs",
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

View File

@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 10017-ts-union 1`] = `
Object {
"icon": Object {
"control": Object {
"type": "object",
},
"description": "specify icon=\\"search\\" or icon={IconComponent}",
"name": "icon",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "union",
},
},
"type": Object {
"name": "union",
"raw": "React.ReactNode | string",
"required": true,
"value": Array [
Object {
"name": "other",
"raw": "React.ReactNode",
"value": "ReactReactNode",
},
Object {
"name": "string",
},
],
},
},
}
`;

View File

@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 10278-ts-multiple-components 1`] = `
Object {
"aProperty": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "aProperty",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "any",
},
},
"type": Object {
"name": "other",
"required": true,
"value": "any",
},
},
}
`;

View File

@ -0,0 +1,127 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8140-js-prop-types-oneof 1`] = `
Object {
"blank": Object {
"control": Object {
"type": "boolean",
},
"description": "No background or border if static alert",
"name": "blank",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"icon": Object {
"control": Object {
"type": "text",
},
"description": "Allows icon override, accepts material icon name",
"name": "icon",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"message": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "message",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
"mode": Object {
"control": Object {
"type": "radio",
},
"description": "",
"name": "mode",
"options": Array [
"static",
"timed",
],
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'static'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "'static' | 'timed'",
},
},
"type": Object {
"name": "enum",
"required": false,
"value": Array [
"static",
"timed",
],
},
},
"type": Object {
"control": Object {
"type": "radio",
},
"description": "",
"name": "type",
"options": Array [
"success",
"warning",
"error",
"primary",
],
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'warning'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "'success' | 'warning' | 'error' | 'primary'",
},
},
"type": Object {
"name": "enum",
"required": false,
"value": Array [
"success",
"warning",
"error",
"primary",
],
},
},
}
`;

View File

@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8143-ts-imported-types 1`] = `
Object {
"bar": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "bar",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Foo['bar']",
},
},
"type": Object {
"name": "other",
"raw": "Foo['bar']",
"required": true,
"value": "Foo['bar']",
},
},
}
`;

View File

@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8143-ts-react-fc-generics 1`] = `
Object {
"padding": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "padding",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'0'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
}
`;

View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8279-js-styled-docgen 1`] = `Object {}`;

View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8428-js-static-prop-types 1`] = `
Object {
"test": Object {
"control": Object {
"type": "text",
},
"description": "Please work...",
"name": "test",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8663-js-styled-components 1`] = `
Object {
"bg": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "bg",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8740-ts-multi-props 1`] = `
Object {
"size": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "size",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'a'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
}
`;

View File

@ -0,0 +1,48 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
Object {
"disabled": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "disabled",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"variant": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "variant",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'small'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
}
`;

View File

@ -0,0 +1,89 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9023-js-hoc 1`] = `
Object {
"classes": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "classes",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "object",
},
},
"type": Object {
"name": "object",
"required": true,
},
},
"dismissible": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "dismissible",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"icon": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "icon",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "elementType",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "elementType",
},
},
"variant": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "variant",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'primary'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9399-js-proptypes-shape 1`] = `
Object {
"areas": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "areas",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": "[object]",
"summary": "object[]",
},
},
"type": Object {
"name": "array",
"required": true,
"value": Object {
"name": "object",
"value": Object {
"names": Object {
"name": "array",
"value": Object {
"name": "string",
},
},
"position": Object {
"name": "string",
},
},
},
},
},
}
`;

View File

@ -0,0 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9465-ts-type-props 1`] = `
Object {
"disabled": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "disabled",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "boolean",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9493-ts-display-name 1`] = `
Object {
"message": Object {
"control": Object {
"type": "text",
},
"description": "A message alerting about Empire activities.",
"name": "message",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
"title": Object {
"control": Object {
"type": "object",
},
"description": "A title that brings attention to the alert.",
"name": "title",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'Code Yellow'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "union",
},
},
"type": Object {
"name": "union",
"raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
"required": false,
"value": Array [
Object {
"name": "other",
"value": "literal",
},
Object {
"name": "other",
"value": "literal",
},
Object {
"name": "other",
"value": "literal",
},
],
},
},
}
`;

View File

@ -0,0 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9556-ts-react-default-exports 1`] = `
Object {
"isDisabled": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "isDisabled",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "boolean",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9575-ts-camel-case 1`] = `
Object {
"color": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "color",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'primary'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,41 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9586-js-react-memo 1`] = `
Object {
"label": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "label",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
"onClick": Object {
"description": "",
"name": "onClick",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": true,
},
},
}
`;

View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9591-ts-import-types 1`] = `
Object {
"other": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "other",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9592-ts-styled-props 1`] = `
Object {
"title": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "title",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
}
`;

View File

@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9626-js-default-values 1`] = `
Object {
"title": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "title",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'Beta'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
}
`;

View File

@ -0,0 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = `
Object {
"heads": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "heads",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "array",
},
},
"type": Object {
"name": "array",
"required": true,
"value": undefined,
},
},
"onAddClick": Object {
"description": "",
"name": "onAddClick",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9721-ts-deprecated-jsdoc 1`] = `
Object {
"size": Object {
"control": Object {
"type": "object",
},
"description": "The size (replaces width)",
"name": "size",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "signature",
},
},
"type": Object {
"name": "object",
"raw": "{ width: number; height: number }",
"required": true,
"value": Object {
"height": Object {
"name": "number",
},
"width": Object {
"name": "number",
},
},
},
},
"width": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "width",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": true,
},
},
}
`;

View File

@ -0,0 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9764-ts-extend-props 1`] = `
Object {
"checked": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "checked",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "boolean",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"defaultChecked": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "defaultChecked",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "boolean",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"value": Object {
"control": Object {
"type": "object",
},
"description": "The input content value",
"name": "value",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "union",
},
},
"type": Object {
"name": "union",
"raw": "string | number",
"required": false,
"value": Array [
Object {
"name": "string",
},
Object {
"name": "number",
},
],
},
},
}
`;

View File

@ -0,0 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9827-ts-default-values 1`] = `
Object {
"bar": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "bar",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Array",
},
},
"type": Object {
"name": "array",
"raw": "string[]",
"required": false,
"value": Array [
Object {
"name": "string",
},
],
},
},
"foo": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "foo",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "boolean",
},
},
"type": Object {
"name": "boolean",
"required": true,
},
},
"title": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "title",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'this is the default :)'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
}
`;

View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9832-ts-enum-export 1`] = `Object {}`;

View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9922-ts-component-props 1`] = `
Object {
"spacing": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "spacing",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": true,
},
},
}
`;

View File

@ -0,0 +1,386 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties js-class-component 1`] = `
Object {
"arrayOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "['array', 'optional']",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string[]",
},
},
"type": Object {
"name": "array",
"required": false,
"value": Object {
"name": "string",
},
},
},
"arrayRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string[]",
},
},
"type": Object {
"name": "array",
"required": true,
"value": Object {
"name": "string",
},
},
},
"booleanOptional": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"booleanRequired": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": true,
},
},
"dateOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "new Date('20 Jan 1983')",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "instanceOf(Date)",
},
},
"dateRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": true,
"value": "instanceOf(Date)",
},
},
"functionOptional": Object {
"description": "",
"name": "functionOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "() => 'foo'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": false,
},
},
"functionRequired": Object {
"description": "",
"name": "functionRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": true,
},
},
"globalReference": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "globalReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "Date",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "any",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "any",
},
},
"importedReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "importedReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "imported",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"localReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "localReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'local-value'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"numberOptional": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "numberOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "1",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": false,
},
},
"numberRequired": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "numberRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": true,
},
},
"objectOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "{ object: 'optional' }",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "{ }",
},
},
"type": Object {
"name": "object",
"required": false,
"value": Object {},
},
},
"objectRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "{ }",
},
},
"type": Object {
"name": "object",
"required": true,
"value": Object {},
},
},
"stringGlobalName": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringOptional": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'stringOptional'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringRequired": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
}
`;

View File

@ -0,0 +1,237 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties js-function-component-inline-defaults-no-propTypes 1`] = `
Object {
"arrayOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "arrayOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "['array', 'optional']",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"booleanOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "booleanOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"dateOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "dateOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "new Date('20 Jan 1983')",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"functionOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "functionOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "() => 'foo'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"globalReference": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "globalReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "Date",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"importedReference": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "importedReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "imported",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"localReference": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "localReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'local-value'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"numberOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "numberOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "1",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"objectOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "objectOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "{ object: 'optional' }",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"stringGlobalName": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "stringGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"stringOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "stringOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'stringOptional'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
}
`;

View File

@ -0,0 +1,386 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties js-function-component-inline-defaults 1`] = `
Object {
"arrayOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "['array', 'optional']",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string[]",
},
},
"type": Object {
"name": "array",
"required": false,
"value": Object {
"name": "string",
},
},
},
"arrayRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string[]",
},
},
"type": Object {
"name": "array",
"required": true,
"value": Object {
"name": "string",
},
},
},
"booleanOptional": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"booleanRequired": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": true,
},
},
"dateOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "new Date('20 Jan 1983')",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "instanceOf(Date)",
},
},
"dateRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": true,
"value": "instanceOf(Date)",
},
},
"functionOptional": Object {
"description": "",
"name": "functionOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "() => 'foo'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": false,
},
},
"functionRequired": Object {
"description": "",
"name": "functionRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": true,
},
},
"globalReference": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "globalReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "Date",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "any",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "any",
},
},
"importedReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "importedReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "imported",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"localReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "localReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'local-value'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"numberOptional": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "numberOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "1",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": false,
},
},
"numberRequired": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "numberRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": true,
},
},
"objectOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "{ object: 'optional' }",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "{ }",
},
},
"type": Object {
"name": "object",
"required": false,
"value": Object {},
},
},
"objectRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "{ }",
},
},
"type": Object {
"name": "object",
"required": true,
"value": Object {},
},
},
"stringGlobalName": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringOptional": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'stringOptional'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringRequired": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
}
`;

View File

@ -0,0 +1,386 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties js-function-component 1`] = `
Object {
"arrayOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "['array', 'optional']",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string[]",
},
},
"type": Object {
"name": "array",
"required": false,
"value": Object {
"name": "string",
},
},
},
"arrayRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string[]",
},
},
"type": Object {
"name": "array",
"required": true,
"value": Object {
"name": "string",
},
},
},
"booleanOptional": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"booleanRequired": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "bool",
},
},
"type": Object {
"name": "boolean",
"required": true,
},
},
"dateOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "new Date('20 Jan 1983')",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "instanceOf(Date)",
},
},
"dateRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": true,
"value": "instanceOf(Date)",
},
},
"functionOptional": Object {
"description": "",
"name": "functionOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "() => 'foo'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": false,
},
},
"functionRequired": Object {
"description": "",
"name": "functionRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "func",
},
},
"type": Object {
"name": "function",
"required": true,
},
},
"globalReference": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "globalReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "Date",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "any",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "any",
},
},
"importedReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "importedReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "imported",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"localReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "localReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'local-value'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"numberOptional": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "numberOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "1",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": false,
},
},
"numberRequired": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "numberRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": true,
},
},
"objectOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "{ object: 'optional' }",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "{ }",
},
},
"type": Object {
"name": "object",
"required": false,
"value": Object {},
},
},
"objectRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "{ }",
},
},
"type": Object {
"name": "object",
"required": true,
"value": Object {},
},
},
"stringGlobalName": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringOptional": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'stringOptional'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringRequired": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
}
`;

View File

@ -0,0 +1,279 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties ts-function-component-inline-defaults 1`] = `
Object {
"arrayOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "arrayOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "['array', 'optional']",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"booleanOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "booleanOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"dateOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "dateOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "new Date('20 Jan 1983')",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"enumGlobalName": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "enumGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"functionOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "functionOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "() => 'foo'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"globalReference": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "globalReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "Date",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"importedReference": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "importedReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "imported",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"localReference": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "localReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'local-value'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"numberOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "numberOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "1",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"objectOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "objectOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "{ object: 'optional' }",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"stringGlobalName": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "stringGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"stringOptional": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "stringOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'stringOptional'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
"unionGlobalName": Object {
"control": Object {
"type": "object",
},
"description": undefined,
"name": "unionGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "unknown",
},
},
"type": Object {
"required": false,
},
},
}
`;

View File

@ -0,0 +1,396 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties ts-function-component 1`] = `
Object {
"arrayOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "['array', 'optional']",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Array",
},
},
"type": Object {
"name": "array",
"raw": "string[]",
"required": false,
"value": Array [
Object {
"name": "string",
},
],
},
},
"arrayRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "arrayRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Array",
},
},
"type": Object {
"name": "array",
"raw": "string[]",
"required": true,
"value": Array [
Object {
"name": "string",
},
],
},
},
"booleanOptional": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "false",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "boolean",
},
},
"type": Object {
"name": "boolean",
"required": false,
},
},
"booleanRequired": Object {
"control": Object {
"type": "boolean",
},
"description": "",
"name": "booleanRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "boolean",
},
},
"type": Object {
"name": "boolean",
"required": true,
},
},
"dateOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "new Date('20 Jan 1983')",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "Date",
},
},
"dateRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "dateRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Date",
},
},
"type": Object {
"name": "other",
"required": true,
"value": "Date",
},
},
"functionOptional": Object {
"description": "",
"name": "functionOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "() => 'foo'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "signature",
},
},
"type": Object {
"name": "function",
"raw": "() => string",
"required": false,
},
},
"functionRequired": Object {
"description": "",
"name": "functionRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "signature",
},
},
"type": Object {
"name": "function",
"raw": "() => string",
"required": true,
},
},
"globalReference": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "globalReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "Date",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "any",
},
},
"type": Object {
"name": "other",
"required": false,
"value": "any",
},
},
"importedReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "importedReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "imported",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"localReference": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "localReference",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'local-value'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"numberOptional": Object {
"control": Object {
"type": "number",
},
"description": "",
"name": "numberOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "1",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": false,
},
},
"numberRequired": Object {
"control": Object {
"type": "number",
},
"description": "Description",
"name": "numberRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "number",
},
},
"type": Object {
"name": "number",
"required": true,
},
},
"objectOptional": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "{ object: 'optional' }",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Record",
},
},
"type": Object {
"name": "other",
"raw": "Record<string, string>",
"required": false,
"value": "Record",
},
},
"objectRequired": Object {
"control": Object {
"type": "object",
},
"description": "",
"name": "objectRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "Record",
},
},
"type": Object {
"name": "other",
"raw": "Record<string, string>",
"required": true,
"value": "Record",
},
},
"stringGlobalName": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringGlobalName",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'top'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringOptional": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringOptional",
"table": Object {
"defaultValue": Object {
"detail": undefined,
"summary": "'stringOptional'",
},
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": false,
},
},
"stringRequired": Object {
"control": Object {
"type": "text",
},
"description": "",
"name": "stringRequired",
"table": Object {
"defaultValue": null,
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
"summary": "string",
},
},
"type": Object {
"name": "string",
"required": true,
},
},
}
`;

View File

@ -7,26 +7,19 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
const { rows } = extractProps(component);
if (rows) {
return rows.reduce((acc: ArgTypes, row: PropDef) => {
const { name, type, sbType, defaultValue: defaultSummary, jsDocTags, required } = row;
const {
name,
description,
type,
sbType,
defaultValue: defaultSummary,
jsDocTags,
required,
} = row;
let defaultValue;
if (component.defaultProps) {
defaultValue = component.defaultProps[name];
} else {
const defaultValueString =
defaultSummary && (defaultSummary.detail || defaultSummary.summary);
try {
if (defaultValueString) {
// eslint-disable-next-line no-new-func
defaultValue = Function(`"use strict";return (${defaultValueString})`)();
}
// eslint-disable-next-line no-empty
} catch {}
}
acc[row.name] = {
...row,
defaultValue,
acc[name] = {
name,
description,
type: { required, ...sbType },
table: {
type,

View File

@ -4,7 +4,6 @@ import { storiesOf, StoryContext } from '@storybook/react';
import { ArgsTable } from '@storybook/components';
import { Args } from '@storybook/api';
import { inferControls } from '@storybook/client-api';
import { useTheme, Theme } from '@storybook/theming';
import { extractArgTypes } from './extractArgTypes';
import { Component } from '../../blocks';
@ -16,23 +15,6 @@ const argsTableProps = (component: Component) => {
return { rows };
};
function FormatArg({ arg }) {
const theme = useTheme<Theme>();
const badgeStyle = {
background: theme.background.hoverable,
border: `1px solid ${theme.background.hoverable}`,
borderRadius: 2,
};
if (typeof arg !== 'undefined') {
try {
return <code>{JSON.stringify(arg, null, 2)}</code>;
} catch (err) {
return <code style={badgeStyle}>{arg.toString()}</code>;
}
}
return <code style={badgeStyle}>undefined</code>;
}
const ArgsStory = ({ component }: any) => {
const { rows } = argsTableProps(component);
const initialArgs = mapValues(rows, (argType) => argType.defaultValue) as Args;
@ -40,11 +22,16 @@ const ArgsStory = ({ component }: any) => {
const [args, setArgs] = useState(initialArgs);
return (
<>
<p>
<b>NOTE:</b> these stories are to help visualise the snapshot tests in{' '}
<code>./react-properties.test.js</code>.
</p>
<ArgsTable rows={rows} args={args} updateArgs={(val) => setArgs({ ...args, ...val })} />
<table>
<thead>
<tr>
<th>key</th>
<th>val</th>
<th>arg name</th>
<th>argType</th>
</tr>
</thead>
<tbody>
@ -54,13 +41,12 @@ const ArgsStory = ({ component }: any) => {
<code>{key}</code>
</td>
<td>
<FormatArg arg={val} />
<pre>{JSON.stringify(rows[key])}</pre>
</td>
</tr>
))}
</tbody>
</table>
<ArgsTable rows={rows} args={args} updateArgs={(val) => setArgs({ ...args, ...val })} />
</>
);
};
@ -132,5 +118,7 @@ issuesFixtures.forEach((fixture) => {
// eslint-disable-next-line import/no-dynamic-require, global-require
const { component } = require(`./__testfixtures__/${fixture}/input`);
issuesStories.add(fixture, () => <ArgsStory component={component} />);
issuesStories.add(fixture, () => <ArgsStory component={component} />, {
chromatic: { disable: true },
});
});

View File

@ -3,9 +3,12 @@ import path from 'path';
import fs from 'fs';
import { transformFileSync, transformSync } from '@babel/core';
import { inferControls } from '@storybook/client-api';
import { StoryContext } from '@storybook/react';
import requireFromString from 'require-from-string';
import { extractProps } from './extractProps';
import { extractArgTypes } from './extractArgTypes';
import { normalizeNewlines } from '../../lib/utils';
// jest.mock('../imported', () => () => ({ imported: 'imported-value' }), { virtual: true });
@ -63,6 +66,12 @@ describe('react component properties', () => {
const { component } = requireFromString(docgenModule, inputPath);
const properties = extractProps(component);
expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
// snapshot the output of `extractArgTypes`
const argTypes = extractArgTypes(component);
const parameters = { __isArgsStory: true, argTypes };
const rows = inferControls(({ parameters } as unknown) as StoryContext);
expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot'));
});
}
}

View File

@ -90,7 +90,6 @@ describe('Extracting Arguments', () => {
"control": Object {
"type": "boolean",
},
"defaultValue": true,
"description": null,
"name": "rounded",
"table": Object {
@ -123,7 +122,6 @@ describe('Extracting Arguments', () => {
"control": Object {
"type": "text",
},
"defaultValue": "",
"description": null,
"name": "text",
"table": Object {

View File

@ -41,7 +41,6 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
required: hasKeyword('required', item.keywords),
summary: item.type?.text,
},
defaultValue: item.defaultValue,
table: {
type: {
summary: item.type?.text,

View File

@ -1,12 +1,9 @@
import { ArgTypes } from '@storybook/api';
import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
import { convert } from '../../lib/convert';
import { trimQuotes } from '../../lib/convert/utils';
const SECTIONS = ['props', 'events', 'slots'];
const trim = (val: any) => (val && typeof val === 'string' ? trimQuotes(val) : val);
export const extractArgTypes: ArgTypesExtractor = (component) => {
if (!hasDocgen(component)) {
return null;
@ -17,18 +14,10 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
const { name, type, description, defaultValue: defaultSummary, required } = propDef;
const sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
let defaultValue = defaultSummary && (defaultSummary.detail || defaultSummary.summary);
try {
// eslint-disable-next-line no-eval
defaultValue = eval(defaultValue);
// eslint-disable-next-line no-empty
} catch {}
results[name] = {
name,
description,
type: { required, ...sbType },
defaultValue,
table: {
type,
jsDocTags,

View File

@ -14,18 +14,11 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
const { name, type, description, defaultValue: defaultSummary, required } = propDef;
const sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
let defaultValue = defaultSummary && (defaultSummary.detail || defaultSummary.summary);
try {
// eslint-disable-next-line no-eval
defaultValue = eval(defaultValue);
// eslint-disable-next-line no-empty
} catch {}
results[name] = {
name,
description,
type: { required, ...sbType },
defaultValue,
table: {
type,
jsDocTags,

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@ -39,29 +39,29 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addon-actions": "6.3.0-alpha.27",
"@storybook/addon-backgrounds": "6.3.0-alpha.27",
"@storybook/addon-controls": "6.3.0-alpha.27",
"@storybook/addon-docs": "6.3.0-alpha.27",
"@storybook/addon-toolbars": "6.3.0-alpha.27",
"@storybook/addon-viewport": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/node-logger": "6.3.0-alpha.27",
"@storybook/addon-actions": "6.3.0-alpha.33",
"@storybook/addon-backgrounds": "6.3.0-alpha.33",
"@storybook/addon-controls": "6.3.0-alpha.33",
"@storybook/addon-docs": "6.3.0-alpha.33",
"@storybook/addon-toolbars": "6.3.0-alpha.33",
"@storybook/addon-viewport": "6.3.0-alpha.33",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/node-logger": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"regenerator-runtime": "^0.13.7",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/vue": "6.3.0-alpha.27",
"@storybook/vue": "6.3.0-alpha.33",
"@types/jest": "^26.0.16",
"@types/webpack-env": "^1.16.0"
},
"peerDependencies": {
"@babel/core": "^7.9.6",
"@storybook/vue": "6.3.0-alpha.27",
"@storybook/web-components": "6.3.0-alpha.27",
"@storybook/vue": "6.3.0-alpha.33",
"@storybook/web-components": "6.3.0-alpha.33",
"babel-loader": "^8.0.0",
"lit-html": "^1.0.0",
"react": "^16.8.0 || ^17.0.0",
@ -91,5 +91,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -47,11 +47,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/core-events": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/core-events": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react-sizeme": "^3.0.1",
@ -76,7 +76,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Jest",
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"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.3.0-alpha.27",
"@storybook/client-logger": "6.3.0-alpha.27",
"@storybook/core-events": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/client-logger": "6.3.0-alpha.33",
"@storybook/core-events": "6.3.0-alpha.33",
"@storybook/csf": "0.0.1",
"@storybook/router": "6.3.0-alpha.27",
"@storybook/router": "6.3.0-alpha.33",
"@types/qs": "^6.9.5",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -72,7 +72,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Links",
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Take a code snapshot of every story automatically with Jest",
"keywords": [
"addon",
@ -45,10 +45,10 @@
},
"dependencies": {
"@jest/transform": "^26.6.2",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@types/glob": "^7.1.3",
"@types/jest": "^26.0.16",
"@types/jest-specific-snapshot": "^0.5.3",
@ -67,11 +67,11 @@
"devDependencies": {
"@angular/core": "^11.2.0",
"@angular/platform-browser-dynamic": "^11.2.0",
"@storybook/addon-docs": "6.3.0-alpha.27",
"@storybook/angular": "6.3.0-alpha.27",
"@storybook/react": "6.3.0-alpha.27",
"@storybook/vue": "6.3.0-alpha.27",
"@storybook/vue3": "6.3.0-alpha.27",
"@storybook/addon-docs": "6.3.0-alpha.33",
"@storybook/angular": "6.3.0-alpha.33",
"@storybook/react": "6.3.0-alpha.33",
"@storybook/vue": "6.3.0-alpha.33",
"@storybook/vue3": "6.3.0-alpha.33",
"babel-loader": "^8.2.2",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
@ -148,7 +148,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"storybook": {
"displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",

View File

@ -12,6 +12,7 @@ export interface ClientApi extends ClientStoryApi<unknown> {
getStorybook: ClientApiThing['getStorybook'];
setAddon: ClientApiThing['setAddon'];
raw: ClientApiThing['raw'];
addArgsEnhancer: ClientApiThing['addArgsEnhancer'];
addArgTypesEnhancer: ClientApiThing['addArgTypesEnhancer'];
}

View File

@ -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 { ArgTypesEnhancer, DecoratorFunction } from '@storybook/client-api';
import { ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/client-api';
import { ClientApi } from './Loader';
import { StoryshotsOptions } from '../api/StoryshotsOptions';
@ -85,9 +85,14 @@ function configure(
if (preview) {
// This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template
const { parameters, decorators, globals, globalTypes, argTypesEnhancers } = jest.requireActual(
preview
);
const {
parameters,
decorators,
globals,
globalTypes,
argsEnhancers,
argTypesEnhancers,
} = jest.requireActual(preview);
if (decorators) {
decorators.forEach((decorator: DecoratorFunction) => storybook.addDecorator(decorator));
@ -95,6 +100,9 @@ function configure(
if (parameters || globals || globalTypes) {
storybook.addParameters({ ...parameters, globals, globalTypes });
}
if (argsEnhancers) {
argsEnhancers.forEach((enhancer: ArgsEnhancer) => storybook.addArgsEnhancer(enhancer));
}
if (argTypesEnhancers) {
argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer) =>
storybook.addArgTypesEnhancer(enhancer)

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@ -41,7 +41,7 @@
},
"dependencies": {
"@storybook/csf": "0.0.1",
"@storybook/node-logger": "6.3.0-alpha.27",
"@storybook/node-logger": "6.3.0-alpha.33",
"@types/jest-image-snapshot": "^4.1.3",
"@wordpress/jest-puppeteer-axe": "^3.0.3",
"core-js": "^3.8.2",
@ -53,7 +53,7 @@
"@types/puppeteer": "^5.4.0"
},
"peerDependencies": {
"@storybook/addon-storyshots": "6.3.0-alpha.27",
"@storybook/addon-storyshots": "6.3.0-alpha.33",
"puppeteer": "^2.0.0 || ^3.0.0"
},
"peerDependenciesMeta": {
@ -64,5 +64,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "View a storys 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.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/client-logger": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/router": "6.3.0-alpha.27",
"@storybook/source-loader": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/client-logger": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/router": "6.3.0-alpha.33",
"@storybook/source-loader": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"estraverse": "^5.2.0",
"loader-utils": "^2.0.0",
@ -75,7 +75,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Storysource",
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
@ -45,10 +45,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"core-js": "^3.8.2"
},
"peerDependencies": {
@ -66,7 +66,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/register.js",
"storybook": {
"displayName": "Toolbars",
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Build responsive components by adjusting Storybooks viewport size and orientation",
"keywords": [
"addon",
@ -42,12 +42,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/client-logger": "6.3.0-alpha.27",
"@storybook/components": "6.3.0-alpha.27",
"@storybook/core-events": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/client-logger": "6.3.0-alpha.33",
"@storybook/components": "6.3.0-alpha.33",
"@storybook/core-events": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
@ -69,7 +69,8 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a",
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/preview.js",
"storybook": {
"displayName": "Viewport",
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -45,11 +45,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/node-logger": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@storybook/node-logger": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"autoprefixer": "^9.8.6",
"core-js": "^3.8.2",
@ -124,5 +124,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7"
}

View File

@ -38,7 +38,10 @@ export class ElementRendererService {
return this.rendererService
.newPlatformBrowserDynamic()
.bootstrapModule(createElementsModule(ngModule))
.bootstrapModule(
createElementsModule(ngModule),
parameters.bootstrapModuleOptions ?? undefined
)
.then((m) => m.instance.ngEl);
}
}

View File

@ -1,7 +1,7 @@
import { Component } from '@angular/core';
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Parameters } from '../types-6-0';
import { RendererService } from './RendererService';
jest.mock('@angular/platform-browser-dynamic');
@ -182,5 +182,34 @@ describe('RendererService', () => {
expect(countDestroy).toEqual(1);
});
describe('bootstrap module options', () => {
async function setupComponentWithWhitespace(bootstrapModuleOptions: unknown) {
await rendererService.render({
storyFnAngular: {
template: '<div> </div>',
props: {},
},
forced: false,
parameters: {
bootstrapModuleOptions,
} as Parameters,
});
}
it('should preserve whitespaces', async () => {
await setupComponentWithWhitespace({ preserveWhitespaces: true });
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
'<div> </div>'
);
});
it('should remove whitespaces', async () => {
await setupComponentWithWhitespace({ preserveWhitespaces: false });
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
'<div></div>'
);
});
});
});
});

View File

@ -105,7 +105,10 @@ export class RendererService {
}
this.storyProps$ = storyProps$;
await this.newPlatformBrowserDynamic().bootstrapModule(createStorybookModule(moduleMetadata));
await this.newPlatformBrowserDynamic().bootstrapModule(
createStorybookModule(moduleMetadata),
parameters.bootstrapModuleOptions ?? undefined
);
}
public newPlatformBrowserDynamic() {

View File

@ -33,6 +33,7 @@ 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 };

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
"bugs": {
@ -43,8 +43,8 @@
},
"dependencies": {
"@ember/test-helpers": "^2.1.4",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react": "16.14.0",
@ -65,5 +65,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -45,10 +45,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -68,5 +68,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/lit",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for lit: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
@ -45,10 +45,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -70,5 +70,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -11,7 +11,7 @@ export {
raw,
} from './preview';
export * from './preview/types';
export * from './preview/types-6-0';
// TODO: disable HMR and do full page loads because of customElements.define
if (module && module.hot && module.hot.decline) {

View File

@ -0,0 +1,19 @@
import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
import { StoryFnLitReturnType } from './types';
export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
/**
* 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<string> & Annotations<Args, StoryFnLitReturnType>;
/**
* 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, StoryFnLitReturnType> &
Annotations<Args, StoryFnLitReturnType>;

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@ -46,9 +46,9 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.12",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -72,5 +72,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -49,10 +49,10 @@
"@babel/preset-flow": "^7.12.1",
"@babel/preset-react": "^7.12.10",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/node-logger": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@storybook/node-logger": "6.3.0-alpha.33",
"@storybook/semver": "^7.3.2",
"@types/webpack-env": "^1.16.0",
"babel-plugin-add-react-displayname": "^0.0.5",
@ -71,7 +71,7 @@
"webpack": "4"
},
"devDependencies": {
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.33",
"@types/node": "^14.14.20",
"@types/prompts": "^2.0.9"
},
@ -94,5 +94,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/server",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -45,12 +45,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/api": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/node-logger": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/api": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@storybook/node-logger": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -70,5 +70,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -45,9 +45,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react": "16.14.0",
@ -73,5 +73,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -45,9 +45,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -81,5 +81,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -45,9 +45,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@ -80,5 +80,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit-html",
@ -50,10 +50,10 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/preset-env": "^7.12.11",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/client-api": "6.3.0-alpha.27",
"@storybook/core": "6.3.0-alpha.27",
"@storybook/core-common": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/client-api": "6.3.0-alpha.33",
"@storybook/core": "6.3.0-alpha.33",
"@storybook/core-common": "6.3.0-alpha.33",
"@types/webpack-env": "^1.16.0",
"babel-plugin-bundled-import-meta": "^0.3.1",
"core-js": "^3.8.2",
@ -78,5 +78,6 @@
"publishConfig": {
"access": "public"
},
"gitHead": "c48862959a2c0ba676deaf0b01ded9183d88b94a"
"gitHead": "a70d3fa1577b078011ae1fe56f9acda0daa95ae7",
"sbmodern": "dist/modern/client/index.js"
}

View File

@ -0,0 +1,49 @@
describe('addon-controls', () => {
it('should change component when changing controls', () => {
cy.visitStorybook();
cy.navigateToStory('example-button', 'Primary');
cy.viewAddonPanel('Controls');
// Text input: Label
cy.getStoryElement().find('button').should('contain.text', 'Button');
cy.get('#label').clear().type('Hello world');
cy.getStoryElement().find('button').should('contain.text', 'Hello world');
// Args in URL
cy.url().should('include', 'args=label:Hello+world');
// Boolean toggle: Primary/secondary
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
cy.get('#primary').click();
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
// Color picker: Background color
cy.get('input[placeholder="Choose color"]').type('red');
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(255, 0, 0)');
// TODO: enable this once the controls for size are aligned in all CLI templates.
// Radio buttons: Size
// cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
// cy.get('label[for="size-large"]').click();
// cy.getStoryElement().find('button').should('have.css', 'font-size', '16px');
// Reset controls: assert that the component is back to original state
cy.get('button[title="Reset controls"]').click();
cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
cy.getStoryElement().find('button').should('contain.text', 'Button');
});
it('should apply controls automatically when passed via url', () => {
cy.visit('/', {
qs: {
path: '/story/example-button--primary',
args: 'label:Hello world',
},
});
cy.getStoryElement().find('button').should('contain.text', 'Hello world');
});
});

View File

@ -6,7 +6,7 @@ One of Storybook's main features is its robust addon ecosystem. Use addons to en
## What we're building
For this example we're going to build a bare-bones addon which:
For this example, we're going to build a bare-bones addon which:
- Adds a new panel in Storybook.
- Retrieves a custom parameter from the stories.
@ -27,9 +27,9 @@ We recommend a common addon file and directory structure for consistency.
### Get started
Open a new terminal and create a new directory called `my-addon`. Inside it run `npm init` to initialize a new node project. For your project's name choose `my-addon` and for entry point `dist/preset.js`.
Open a new terminal and create a new directory called `my-addon`. Inside it, run `npm init` to initialize a new node project. For your project's name, choose `my-addon` and for entry point `dist/preset.js`.
Once you've gone through the prompts your `package.json` should look like:
Once you've gone through the prompts, your `package.json` should look like:
```json
{
@ -57,7 +57,7 @@ npx sb init
```
<div class="aside">
Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. This prevents the addon from breaking Storybook when there are different versions available.
💡 Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. It prevents the addon from breaking Storybook when there are different versions available.
</div>
Next, create a `.babelrc.js` file in the root directory with the following:
@ -87,7 +87,7 @@ Change your `package.json` and add the following script to build the addon:
```
<div class="aside">
Running <code>yarn build</code> at this stage will output the code into the <code>dist</code> directory, transpiled into a ES5 module ready to be installed into any Storybook.
💡 Running <code>yarn build</code> at this stage will output the code into the <code>dist</code> directory, transpiled into a ES5 module ready to be installed into any Storybook.
</div>
Finally, create a new directory called `src` and inside a new file called `preset.js` with the following:
@ -108,7 +108,7 @@ Presets are the way addons hook into Storybook. Among other tasks they allow you
- Add to the [preview iframe](./writing-presets.md#preview-entries)
- Modify [babel](./writing-presets.md#babel) and [webpack settings](./writing-presets.md#webpack)
For this example, we'll just modify Storybook's UI.
For this example, we'll modify Storybook's UI.
### Add a panel
@ -125,7 +125,7 @@ Now lets add a panel to Storybook. Inside the `src` directory, create a new f
<!-- prettier-ignore-end -->
<div class="aside">
Make sure to include the <code>key</code> when you register the addon. This will prevent any issues when the addon renders.
💡 Make sure to include the <code>key</code> when you register the addon. It will prevent any issues when the addon renders.
</div>
Going over the code snippet in more detail. When Storybook starts up:
@ -149,7 +149,7 @@ Finally, lets hook it all up. Change `.storybook/main.js` to the following:
<!-- prettier-ignore-end -->
<div class="aside">
When you register a Storybook addon, it will look for either <code>register.js</code> or <code>preset.js</code> as the entry points.
💡 When you register a Storybook addon, it will look for either <code>register.js</code> or <code>preset.js</code> as the entry points.
</div>
Run `yarn storybook` and you should see something similar to:
@ -172,11 +172,11 @@ Next, lets replace the `MyPanel` component from above to show the parameter.
The new version is made smarter by [`useParameter`](./addons-api.md#useparameter), which is a [React hook](https://reactjs.org/docs/hooks-intro.html) that updates the parameter value and re-renders the panel every time the story changes.
The [addon API](./addons-api.md) provides hooks like this so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality.
The [addon API](./addons-api.md) provides hooks like this, so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality.
### Using the addon with a story
When Storybook was initialized it provided a small set of examples stories. Change your `Button.stories.js` to the following:
When Storybook was initialized, it provided a small set of example stories. Change your `Button.stories.js` to the following:
<!-- prettier-ignore-start -->
@ -203,7 +203,7 @@ After applying the changes to the story, the Storybook UI will show the followin
### Root level preset.js
Before publishing the addon, we'll need to make one final change. In the root directory of the addon create a new file called `preset.js` and add the following:
Before publishing the addon, we'll need to make one last change. In the root directory of the addon, create a new file called `preset.js` and add the following:
<!-- prettier-ignore-start -->
@ -219,7 +219,7 @@ This auto-registers the addon without any additional configuration from the user
### Packaging and publishing
Now that you've seen how to create a bare-bones addon, let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements:
Now that you've seen how to create a bare-bones addon let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements:
- `package.json` file with metadata about the addon
- Peer dependencies of `react` and `@storybook/addons`
@ -235,12 +235,10 @@ Learn how to [add to the addon catalog](./addon-catalog.md).
### More guides and tutorials
In the previous example, we introduced the structure of an addon, but barely scratched the surface of what addons can do.
In the previous example, we introduced the structure of an addon but barely scratched the surface of what addons can do.
To dive deeper we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. Its an excellent walkthrough that covers the same ground as the above introduction, but goes further and leads you through the full process of creating a realistic addon.
[How to build a Storybook addon](https://www.chromatic.com/blog/how-to-build-a-storybook-addon/) shows you how to create a standalone addon in great detail.
To dive deeper, we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. Its an excellent walkthrough covering the same ground as the above introduction but goes further and leads you through the entire process of creating a realistic addon.
### Addon kit
To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.

View File

@ -28,6 +28,7 @@ The following table details how to use the API values:
| **selectedPanel** | String |Id to select an addon panel |`my-panel` |
| **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` |
| **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` |
| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` |
The following options are configurable under the `sidebar` namespace:
@ -36,3 +37,9 @@ The following options are configurable under the `sidebar` namespace:
| **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` |
| **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` |
| **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => <abbr title="...">{item.name}</abbr>`|
The following options are configurable under the `toolbar` namespace:
| Name | Type | Description | Example Value |
| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` |

View File

@ -13,6 +13,6 @@ export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary',
label: 'Button',
};
```

View File

@ -40,7 +40,7 @@ with unique URLs, which is great for review and testing.
<Canvas>
<Story name="warning" args={{
status: warning,
status: 'warning',
label: 'Warning'
}}>
{Template.bind({})}
@ -58,7 +58,7 @@ with unique URLs, which is great for review and testing.
{Template.bind({})}
</Story>
<Story name="with icon" args={{
status: warning,
status: 'warning',
label: (<Icon icon="check" inline /> with icon)
)}}>
{Template.bind({})}

View File

@ -17,5 +17,12 @@ addons.setConfig({
showRoots: false,
collapsedRoots: ['other'],
},
toolbar: {
title: { hidden: false, },
zoom: { hidden: false, },
eject: { hidden: false, },
copy: { hidden: false, },
fullscreen: { hidden: false, },
},
});
```
```

View File

@ -2,8 +2,8 @@
<!-- .storybook/preview-body.html -->
<style>
body {
html {
font-size: 15px;
}
</style>
```
```

View File

@ -11,6 +11,6 @@ export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary',
label: 'Button',
};
```

View File

@ -12,6 +12,6 @@ export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary',
label: 'Button',
};
```

View File

@ -9,6 +9,6 @@ export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary',
label: 'Button',
};
```

View File

@ -21,6 +21,6 @@ const Template = (args, { argTypes }) => ({
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary',
label: 'Button',
};
```

View File

@ -22,6 +22,6 @@ const Template = (args) => ({
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary',
label: 'Button',
};
```

View File

@ -14,6 +14,6 @@ export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary',
label: 'Button',
};
```

View File

@ -1 +1 @@
{"version":"6.3.0-alpha.27","info":{"plain":"### Features\n\n- CLI: Add Angular 12 + docs inline rendering support ([#14928](https://github.com/storybookjs/storybook/pull/14928))"}}
{"version":"6.3.0-alpha.33","info":{"plain":"### Bug Fixes\n\n- Controls: Fix controls without options and add warning ([#14976](https://github.com/storybookjs/storybook/pull/14976))\n- Core: Add remaining sbmodern exports ([#14977](https://github.com/storybookjs/storybook/pull/14977))"}}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View File

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"private": true,
"license": "MIT",
"scripts": {
@ -37,18 +37,18 @@
"@angular/compiler-cli": "^11.2.0",
"@angular/elements": "^11.2.0",
"@compodoc/compodoc": "^1.1.11",
"@storybook/addon-a11y": "6.3.0-alpha.27",
"@storybook/addon-actions": "6.3.0-alpha.27",
"@storybook/addon-backgrounds": "6.3.0-alpha.27",
"@storybook/addon-controls": "6.3.0-alpha.27",
"@storybook/addon-docs": "6.3.0-alpha.27",
"@storybook/addon-jest": "6.3.0-alpha.27",
"@storybook/addon-links": "6.3.0-alpha.27",
"@storybook/addon-storyshots": "6.3.0-alpha.27",
"@storybook/addon-storysource": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/angular": "6.3.0-alpha.27",
"@storybook/source-loader": "6.3.0-alpha.27",
"@storybook/addon-a11y": "6.3.0-alpha.33",
"@storybook/addon-actions": "6.3.0-alpha.33",
"@storybook/addon-backgrounds": "6.3.0-alpha.33",
"@storybook/addon-controls": "6.3.0-alpha.33",
"@storybook/addon-docs": "6.3.0-alpha.33",
"@storybook/addon-jest": "6.3.0-alpha.33",
"@storybook/addon-links": "6.3.0-alpha.33",
"@storybook/addon-storyshots": "6.3.0-alpha.33",
"@storybook/addon-storysource": "6.3.0-alpha.33",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/angular": "6.3.0-alpha.33",
"@storybook/source-loader": "6.3.0-alpha.33",
"@types/core-js": "^2.5.4",
"@types/jest": "^26.0.16",
"@types/node": "^14.14.20",

View File

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Core / Parameters / With Bootstrap Options With Preserve Whitespaces 1`] = `
<storybook-wrapper>
<component-with-whitespace>
<div>
<p>
Some content
</p>
</div>
</component-with-whitespace>
</storybook-wrapper>
`;

View File

@ -0,0 +1,24 @@
import { Meta, Story } from '@storybook/angular/types-6-0';
import { Component } from '@angular/core';
@Component({
selector: 'component-with-whitespace',
template: ` <div>
<p>Some content</p>
</div>`,
})
class ComponentWithWhitespace {}
export default {
title: 'Core / Parameters / With Bootstrap Options',
parameters: {
bootstrapOptions: {
preserveWhitespaces: true,
},
},
component: ComponentWithWhitespace,
} as Meta;
export const WithPreserveWhitespaces: Story = (_args) => ({});
WithPreserveWhitespaces.storyName = 'With Preserve Whitespaces';

View File

@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
"version": "6.3.0-alpha.27",
"version": "6.3.0-alpha.33",
"private": true,
"scripts": {
"build": "react-scripts build",
@ -11,7 +11,7 @@
"test": "react-scripts test --env=jsdom"
},
"dependencies": {
"@storybook/client-logger": "6.3.0-alpha.27",
"@storybook/client-logger": "6.3.0-alpha.33",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"react": "16.14.0",
@ -21,18 +21,18 @@
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@storybook/addon-a11y": "6.3.0-alpha.27",
"@storybook/addon-actions": "6.3.0-alpha.27",
"@storybook/addon-backgrounds": "6.3.0-alpha.27",
"@storybook/addon-docs": "6.3.0-alpha.27",
"@storybook/addon-jest": "6.3.0-alpha.27",
"@storybook/addon-links": "6.3.0-alpha.27",
"@storybook/addon-storyshots": "6.3.0-alpha.27",
"@storybook/addons": "6.3.0-alpha.27",
"@storybook/builder-webpack4": "6.3.0-alpha.27",
"@storybook/addon-a11y": "6.3.0-alpha.33",
"@storybook/addon-actions": "6.3.0-alpha.33",
"@storybook/addon-backgrounds": "6.3.0-alpha.33",
"@storybook/addon-docs": "6.3.0-alpha.33",
"@storybook/addon-jest": "6.3.0-alpha.33",
"@storybook/addon-links": "6.3.0-alpha.33",
"@storybook/addon-storyshots": "6.3.0-alpha.33",
"@storybook/addons": "6.3.0-alpha.33",
"@storybook/builder-webpack4": "6.3.0-alpha.33",
"@storybook/preset-create-react-app": "^3.1.6",
"@storybook/react": "6.3.0-alpha.27",
"@storybook/theming": "6.3.0-alpha.27",
"@storybook/react": "6.3.0-alpha.33",
"@storybook/theming": "6.3.0-alpha.33",
"webpack": "4"
},
"storybook": {

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