mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 07:21:17 +08:00
Merge branch 'next' into lit-next
This commit is contained in:
Gaëtan Maisse
commit
9d3d0383d5
12
.babelrc.js
12
.babelrc.js
@ -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',
|
||||
|
||||
@ -78,7 +78,7 @@ commands:
|
||||
jobs:
|
||||
build:
|
||||
executor:
|
||||
class: large
|
||||
class: xlarge
|
||||
name: sb_node_12_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
@ -195,7 +195,8 @@ jobs:
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
command: yarn test:e2e-framework --clean --skip angular --skip vue3 --skip web_components_typescript --skip cra
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
@ -218,8 +219,9 @@ jobs:
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
# Do not test CRA nor Web Components here because it's done in PnP part
|
||||
command: yarn test:e2e-framework vue3 angular
|
||||
# Do not test CRA here because it's done in PnP part
|
||||
command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
@ -246,7 +248,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
|
||||
@ -266,7 +268,7 @@ jobs:
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework --pnp sfcVue cra web_components_typescript
|
||||
command: yarn test:e2e-framework --pnp sfcVue cra
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
|
||||
3
.github/ISSUE_TEMPLATE/bug_report.md
vendored
3
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@ -8,7 +8,8 @@ labels: needs triage, bug
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Link to a reproduction repo that demonstrates the bug, plus instructions on how to trigger it.
|
||||
Please create a reproduction repo by running `npx sb@next repro` and following the instructions.
|
||||
When you're done, please link the repo here. We prioritize issues with reproductions over those without.
|
||||
|
||||
**System**
|
||||
Please paste the results of `npx sb@next info` here.
|
||||
|
||||
8
.github/ISSUE_TEMPLATE/config.yml
vendored
8
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -1,5 +1,11 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Storybook Discord
|
||||
- name: Documentation 📚
|
||||
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
|
||||
about: Ask questions, request features & discuss RFCs
|
||||
- name: Community Discord 💬
|
||||
url: https://discord.gg/storybook
|
||||
about: Community discussions, interactive support, contributor help
|
||||
|
||||
6
.github/ISSUE_TEMPLATE/feature_request.md
vendored
6
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@ -5,13 +5,13 @@ labels: needs triage, feature request
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
A clear and concise description of the problem. E.g. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
What would you like to see added to Storybook to solve problem?
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
Any alternative solutions or features you've considered.
|
||||
|
||||
**Are you able to assist to bring the feature to reality?**
|
||||
no | yes, I can...
|
||||
|
||||
14
.github/ISSUE_TEMPLATE/question.md
vendored
14
.github/ISSUE_TEMPLATE/question.md
vendored
@ -1,14 +0,0 @@
|
||||
---
|
||||
name: Questions 🤔
|
||||
about: Documentation missing or you just need help? Let us know here.
|
||||
labels: needs triage, question / support
|
||||
---
|
||||
|
||||
**What's the problem?**
|
||||
Clear and concise statement of what's troubling you.
|
||||
|
||||
**Is there documentation on this?**
|
||||
If this is documented at https://storybook.js.org/docs/ but the documentation is incomplete or unclear, link to it here.
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
158
CHANGELOG.md
158
CHANGELOG.md
@ -1,3 +1,161 @@
|
||||
## 6.3.0-alpha.42 (May 24, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Core: Fix manager builder dependencies for PnP ([#15019](https://github.com/storybookjs/storybook/pull/15019))
|
||||
|
||||
## 6.3.0-alpha.41 (May 24, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-docs: Exclude decorators in dynamic source snippets ([#14652](https://github.com/storybookjs/storybook/pull/14652))
|
||||
|
||||
## 6.3.0-alpha.40 (May 24, 2021)
|
||||
|
||||
Failed NPM publish
|
||||
|
||||
## 6.3.0-alpha.39 (May 23, 2021)
|
||||
|
||||
Fix stale dependencies appended to [#15001](https://github.com/storybookjs/storybook/pull/15001)
|
||||
|
||||
## 6.3.0-alpha.38 (May 23, 2021)
|
||||
|
||||
Minor manager webapck5 fixes appended to [#15001](https://github.com/storybookjs/storybook/pull/15001)
|
||||
|
||||
## 6.3.0-alpha.37 (May 23, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Support manager build with webpack5 ([#15001](https://github.com/storybookjs/storybook/pull/15001))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix opt-in stories.json generation ([#15003](https://github.com/storybookjs/storybook/pull/15003))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Maintenance: Build ESM in watch mode, revert modern ([#15015](https://github.com/storybookjs/storybook/pull/15015))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Storyshots-puppeteer: Remove the usage of GPL-licensed `@wordpress/jest-puppeteer-axe` package ([#15006](https://github.com/storybookjs/storybook/pull/15006))
|
||||
|
||||
## 6.3.0-alpha.36 (May 20, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add sb link --local option ([#14950](https://github.com/storybookjs/storybook/pull/14950))
|
||||
- Controls: Add automatic ids to all controls ([#14296](https://github.com/storybookjs/storybook/pull/14296))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Improve e2e script ([#14980](https://github.com/storybookjs/storybook/pull/14980))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- React: Upgrade to @storybook/react-docgen-typescript-plugin ([#14991](https://github.com/storybookjs/storybook/pull/14991))
|
||||
|
||||
## 6.3.0-alpha.35 (May 20, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Feature flag for builtin stories.json support ([#14992](https://github.com/storybookjs/storybook/pull/14992))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- React: Upgrade to @storybook/react-docgen-typescript-plugin ([#14991](https://github.com/storybookjs/storybook/pull/14991))
|
||||
|
||||
## 6.3.0-alpha.34 (May 19, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Single story option in iframe view ([#14875](https://github.com/storybookjs/storybook/pull/14875))
|
||||
- Lit: Add typings for @storybook/lit ([#14962](https://github.com/storybookjs/storybook/pull/14962))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump telejson to 5.3.2 to use the ESM version ([#14983](https://github.com/storybookjs/storybook/pull/14983))
|
||||
- CSF: Add undeclared dependency `regenerator-runtime` ([#14979](https://github.com/storybookjs/storybook/pull/14979))
|
||||
|
||||
## 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
|
||||
|
||||
- CLI: Add Angular 12 + docs inline rendering support ([#14928](https://github.com/storybookjs/storybook/pull/14928))
|
||||
|
||||
## 6.3.0-alpha.26 (May 14, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-controls: Fix duplicate color swatch id's in Color control ([#14925](https://github.com/storybookjs/storybook/pull/14925))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Add preamble instructions to `sb repro` ([#14924](https://github.com/storybookjs/storybook/pull/14924))
|
||||
- Webpack5: Always set `resolve.fallback.crypto` to `false` ([#14914](https://github.com/storybookjs/storybook/pull/14914))
|
||||
- Build: Add missing dependencies ([#14919](https://github.com/storybookjs/storybook/pull/14919))
|
||||
- Build: Put E2E tests back on track ([#14917](https://github.com/storybookjs/storybook/pull/14917))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Addon-storyshots: Make @storybook/react dependency optional ([#14891](https://github.com/storybookjs/storybook/pull/14891))
|
||||
|
||||
## 6.3.0-alpha.25 (May 13, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Builder-Webpack5: Use native features instead of plugins ([#14281](https://github.com/storybookjs/storybook/pull/14281))
|
||||
- CLI: Repro refinements per feedback ([#14888](https://github.com/storybookjs/storybook/pull/14888))
|
||||
|
||||
## 6.3.0-alpha.24 (May 11, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
51
MIGRATION.md
51
MIGRATION.md
@ -1,14 +1,18 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
|
||||
- [Webpack 5 manager build](#webpack-5-manager-build)
|
||||
- [Angular 12 upgrade](#angular-12-upgrade)
|
||||
- [6.3 deprecations](#63-deprecations)
|
||||
- [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
|
||||
- [Deprecated `argType.defaultValue`](#deprecated-argtypedefaultvalue)
|
||||
- [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)
|
||||
- [New Angular storyshots format](#new-angular-storyshots-format)
|
||||
- [Deprecated Angular story component](#deprecated-angular-story-component)
|
||||
- [New Angular renderer](#new-angular-renderer)
|
||||
- [Components without selectors](#components-without-selectors)
|
||||
- [Packages now available as ESModules](#packages-now-available-as-esmodules)
|
||||
- [6.2 Deprecations](#62-deprecations)
|
||||
- [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
|
||||
@ -157,6 +161,34 @@
|
||||
|
||||
## From version 6.2.x to 6.3.0
|
||||
|
||||
### Webpack 5 manager build
|
||||
|
||||
Storybook 6.2 introduced **experimental** webpack5 support for building user components. Storybook 6.3 also supports building the manager UI in webpack 5 to avoid strange hoisting issues.
|
||||
|
||||
If you're upgrading from 6.2 and already using the experimental webpack5 feature, this might be a breaking change (hence the 'experimental' label) and you should try adding the manager builder:
|
||||
|
||||
```
|
||||
yarn add @storybook/manager-webpack5 --dev
|
||||
```
|
||||
|
||||
### Angular 12 upgrade
|
||||
|
||||
Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project:
|
||||
|
||||
```js
|
||||
npm install @storybook/builder-webpack5 --save-dev # or yarn
|
||||
```
|
||||
|
||||
Then edit your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
core: {
|
||||
builder: 'webpack5',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 6.3 deprecations
|
||||
|
||||
#### Deprecated scoped blocks imports
|
||||
@ -173,6 +205,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
|
||||
@ -224,6 +271,10 @@ export const parameters = {
|
||||
|
||||
Please also file an issue if you need to opt out. We plan to remove the legacy renderer in 7.0.
|
||||
|
||||
#### Components without selectors
|
||||
|
||||
When the new Angular renderer is used, all Angular Story components must either have a selector, or be added to the `entryComponents` array of the story's `moduleMetadata`. If the component has any `Input`s or `Output`s to be controlled with `args`, a selector should be added.
|
||||
|
||||
### Packages now available as ESModules
|
||||
|
||||
Many Storybook packages are now available as ESModules in addition to CommonJS. If your jest tests stop working, this is likely why. One common culprit is doc blocks, which [is fixed in 6.3](#deprecated-scoped-blocks-imports). In 6.2, you can configure jest to transform the packages like so ([more info](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)):
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/channels": "6.3.0-alpha.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/client-logger": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/core-events": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/channels": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/client-logger": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/core-events": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
function managerEntries(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
@ -11,17 +10,4 @@ function config(entry = []) {
|
||||
];
|
||||
}
|
||||
|
||||
async function webpack(webpackConfig, options) {
|
||||
const core = await options.presets.apply('core');
|
||||
if ((core && core.builder) !== 'webpack5') {
|
||||
return webpackConfig;
|
||||
}
|
||||
if (!webpackConfig.resolve.fallback) {
|
||||
webpackConfig.resolve.fallback = {};
|
||||
}
|
||||
webpackConfig.resolve.fallback.crypto = false;
|
||||
|
||||
return webpackConfig;
|
||||
}
|
||||
|
||||
module.exports = { managerEntries, config, webpack };
|
||||
module.exports = { managerEntries, config };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/core-events": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/core-events": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -78,7 +78,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
|
||||
|
||||
export const argTypesEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
|
||||
export const argsEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
|
||||
|
||||
@ -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({});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/client-logger": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/core-events": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/client-logger": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/core-events": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -76,7 +76,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/node-logger": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/node-logger": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -69,7 +69,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -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 |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/builder-webpack4": "6.3.0-alpha.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/client-logger": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-events": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/builder-webpack4": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/client-logger": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-events": "6.3.0-alpha.42",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.3.0-alpha.24",
|
||||
"@storybook/postinstall": "6.3.0-alpha.24",
|
||||
"@storybook/source-loader": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/node-logger": "6.3.0-alpha.42",
|
||||
"@storybook/postinstall": "6.3.0-alpha.42",
|
||||
"@storybook/source-loader": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/lit": "6.3.0-alpha.24",
|
||||
"@storybook/react": "6.3.0-alpha.24",
|
||||
"@storybook/vue": "6.3.0-alpha.24",
|
||||
"@storybook/web-components": "6.3.0-alpha.24",
|
||||
"@storybook/angular": "6.3.0-alpha.42",
|
||||
"@storybook/lit": "6.3.0-alpha.42",
|
||||
"@storybook/react": "6.3.0-alpha.42",
|
||||
"@storybook/vue": "6.3.0-alpha.42",
|
||||
"@storybook/web-components": "6.3.0-alpha.42",
|
||||
"@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.24",
|
||||
"@storybook/lit": "6.3.0-alpha.24",
|
||||
"@storybook/vue": "6.3.0-alpha.24",
|
||||
"@storybook/vue3": "6.3.0-alpha.24",
|
||||
"@storybook/web-components": "6.3.0-alpha.24",
|
||||
"@storybook/angular": "6.3.0-alpha.42",
|
||||
"@storybook/lit": "6.3.0-alpha.42",
|
||||
"@storybook/vue": "6.3.0-alpha.42",
|
||||
"@storybook/vue3": "6.3.0-alpha.42",
|
||||
"@storybook/web-components": "6.3.0-alpha.42",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -194,7 +194,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
@ -16,7 +16,7 @@ function makeAngularElementRendererOptional(): Plugin[] {
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
return [new IgnorePlugin(/@storybook(\\|\/)angular(\\|\/)element-renderer/)];
|
||||
return [new IgnorePlugin({ resourceRegExp: /@storybook(\\|\/)angular(\\|\/)element-renderer/ })];
|
||||
}
|
||||
|
||||
function moduleIsAvailable(moduleName: string): boolean {
|
||||
|
||||
@ -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",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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",
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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",
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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']",
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8279-js-styled-docgen 1`] = `Object {}`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9832-ts-enum-export 1`] = `Object {}`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -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,
|
||||
|
||||
@ -155,12 +155,13 @@ describe('renderJsx', () => {
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
const makeContext = (name: string, parameters: any, args: any): StoryContext => ({
|
||||
const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
|
||||
id: `jsx-test--${name}`,
|
||||
kind: 'js-text',
|
||||
name,
|
||||
parameters,
|
||||
args,
|
||||
...extra,
|
||||
});
|
||||
|
||||
describe('jsxDecorator', () => {
|
||||
@ -183,6 +184,32 @@ describe('jsxDecorator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should not render decorators when provided excludeDecorators parameter', () => {
|
||||
const storyFn = (args: any) => <div>args story</div>;
|
||||
const decoratedStoryFn = (args: any) => (
|
||||
<div style={{ padding: 25, border: '3px solid red' }}>{storyFn(args)}</div>
|
||||
);
|
||||
const context = makeContext(
|
||||
'args',
|
||||
{
|
||||
__isArgsStory: true,
|
||||
docs: {
|
||||
source: {
|
||||
excludeDecorators: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{},
|
||||
{ originalStoryFn: storyFn }
|
||||
);
|
||||
jsxDecorator(decoratedStoryFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'jsx-test--args',
|
||||
'<div>\n args story\n</div>'
|
||||
);
|
||||
});
|
||||
|
||||
it('should skip dynamic rendering for no-args stories', () => {
|
||||
const storyFn = () => <div>classic story</div>;
|
||||
const context = makeContext('classic', {}, {});
|
||||
|
||||
@ -166,8 +166,13 @@ export const jsxDecorator = (storyFn: any, context: StoryContext) => {
|
||||
...(context?.parameters.jsx || {}),
|
||||
} as Required<JSXOptions>;
|
||||
|
||||
// Exclude decorators from source code snippet by default
|
||||
const sourceJsx = context?.parameters.docs?.source?.excludeDecorators
|
||||
? context.originalStoryFn(context.args)
|
||||
: story;
|
||||
|
||||
let jsx = '';
|
||||
const rendered = renderJsx(story, options);
|
||||
const rendered = renderJsx(sourceJsx, options);
|
||||
if (rendered) {
|
||||
jsx = applyTransformSource(rendered, options, context);
|
||||
}
|
||||
|
||||
@ -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 },
|
||||
});
|
||||
});
|
||||
|
||||
@ -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'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/addon-backgrounds": "6.3.0-alpha.24",
|
||||
"@storybook/addon-controls": "6.3.0-alpha.24",
|
||||
"@storybook/addon-docs": "6.3.0-alpha.24",
|
||||
"@storybook/addon-toolbars": "6.3.0-alpha.24",
|
||||
"@storybook/addon-viewport": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/node-logger": "6.3.0-alpha.24",
|
||||
"@storybook/addon-actions": "6.3.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.3.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.3.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.3.0-alpha.42",
|
||||
"@storybook/addon-toolbars": "6.3.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.3.0-alpha.42",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/node-logger": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/vue": "6.3.0-alpha.42",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.3.0-alpha.24",
|
||||
"@storybook/web-components": "6.3.0-alpha.24",
|
||||
"@storybook/vue": "6.3.0-alpha.42",
|
||||
"@storybook/web-components": "6.3.0-alpha.42",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -91,5 +91,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/core-events": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/core-events": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/client-logger": "6.3.0-alpha.24",
|
||||
"@storybook/core-events": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/client-logger": "6.3.0-alpha.42",
|
||||
"@storybook/core-events": "6.3.0-alpha.42",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.3.0-alpha.24",
|
||||
"@storybook/router": "6.3.0-alpha.42",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@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.24",
|
||||
"@storybook/angular": "6.3.0-alpha.24",
|
||||
"@storybook/react": "6.3.0-alpha.24",
|
||||
"@storybook/vue": "6.3.0-alpha.24",
|
||||
"@storybook/vue3": "6.3.0-alpha.24",
|
||||
"@storybook/addon-docs": "6.3.0-alpha.42",
|
||||
"@storybook/angular": "6.3.0-alpha.42",
|
||||
"@storybook/react": "6.3.0-alpha.42",
|
||||
"@storybook/vue": "6.3.0-alpha.42",
|
||||
"@storybook/vue3": "6.3.0-alpha.42",
|
||||
"babel-loader": "^8.2.2",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -108,6 +108,9 @@
|
||||
"@storybook/angular": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/vue": {
|
||||
"optional": true
|
||||
},
|
||||
@ -145,7 +148,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -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'];
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -40,10 +40,10 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.3.0-alpha.24",
|
||||
"@storybook/node-logger": "6.3.0-alpha.42",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"@wordpress/jest-puppeteer-axe": "^3.0.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.3.0-alpha.24",
|
||||
"@storybook/addon-storyshots": "6.3.0-alpha.42",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c"
|
||||
}
|
||||
|
||||
@ -1,27 +1,39 @@
|
||||
import '@wordpress/jest-puppeteer-axe';
|
||||
import AxePuppeteer from '@axe-core/puppeteer';
|
||||
import { defaultAxeConfig, AxeConfig } from './config';
|
||||
import { puppeteerTest } from './puppeteerTest';
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line @typescript-eslint/no-namespace,no-redeclare
|
||||
namespace jest {
|
||||
interface Matchers<R, T> {
|
||||
toPassAxeTests(parameters: any): R;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
|
||||
const config = { ...defaultAxeConfig, ...customConfig };
|
||||
const { beforeAxeTest } = config;
|
||||
const extendedConfig = { ...defaultAxeConfig, ...customConfig };
|
||||
const { beforeAxeTest } = extendedConfig;
|
||||
|
||||
puppeteerTest({
|
||||
...config,
|
||||
async testBody(page, options) {
|
||||
const parameters = options.context.parameters.a11y;
|
||||
const include = parameters?.element ?? '#root';
|
||||
return puppeteerTest({
|
||||
...extendedConfig,
|
||||
async testBody(page, testOptions) {
|
||||
const { element = '#root', exclude, disabledRules, options, config } =
|
||||
testOptions.context.parameters.a11y || {};
|
||||
await beforeAxeTest(page, options);
|
||||
await expect(page).toPassAxeTests({ ...parameters, include });
|
||||
const axe = new AxePuppeteer(page);
|
||||
axe.include(element);
|
||||
|
||||
if (exclude) {
|
||||
axe.exclude(exclude);
|
||||
}
|
||||
|
||||
if (options) {
|
||||
axe.options(options);
|
||||
}
|
||||
|
||||
if (disabledRules) {
|
||||
axe.disableRules(disabledRules);
|
||||
}
|
||||
|
||||
if (config) {
|
||||
axe.configure(config);
|
||||
}
|
||||
|
||||
const { violations } = await axe.analyze();
|
||||
|
||||
expect(violations).toHaveLength(0);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/client-logger": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/router": "6.3.0-alpha.24",
|
||||
"@storybook/source-loader": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/client-logger": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/router": "6.3.0-alpha.42",
|
||||
"@storybook/source-loader": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -75,7 +75,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -66,7 +66,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/client-logger": "6.3.0-alpha.24",
|
||||
"@storybook/components": "6.3.0-alpha.24",
|
||||
"@storybook/core-events": "6.3.0-alpha.24",
|
||||
"@storybook/theming": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/client-logger": "6.3.0-alpha.42",
|
||||
"@storybook/components": "6.3.0-alpha.42",
|
||||
"@storybook/core-events": "6.3.0-alpha.42",
|
||||
"@storybook/theming": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/node-logger": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@storybook/node-logger": "6.3.0-alpha.42",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -124,5 +124,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c"
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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 };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -65,5 +65,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -68,5 +68,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/lit",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -70,5 +70,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
19
app/lit/src/client/preview/types-6-0.ts
Normal file
19
app/lit/src/client/preview/types-6-0.ts
Normal 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>;
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,5 +72,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -49,10 +49,11 @@
|
||||
"@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.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/node-logger": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@storybook/node-logger": "6.3.0-alpha.42",
|
||||
"@storybook/react-docgen-typescript-plugin": "0.7.2-canary.abb479f.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
@ -63,7 +64,6 @@
|
||||
"lodash": "^4.17.20",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-dev-utils": "^11.0.3",
|
||||
"react-docgen-typescript-plugin": "^0.6.2",
|
||||
"react-refresh": "^0.8.3",
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
@ -71,7 +71,7 @@
|
||||
"webpack": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@types/node": "^14.14.20",
|
||||
"@types/prompts": "^2.0.9"
|
||||
},
|
||||
@ -94,5 +94,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';
|
||||
import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';
|
||||
import type { TypescriptConfig } from '@storybook/core-common';
|
||||
import * as preset from './framework-preset-react-docgen';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { TransformOptions } from '@babel/core';
|
||||
import type { Configuration } from 'webpack';
|
||||
import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';
|
||||
import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';
|
||||
import type { Options, TypescriptConfig } from '@storybook/core-common';
|
||||
|
||||
export async function babel(config: TransformOptions, { presets }: Options) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/api": "6.3.0-alpha.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/node-logger": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/api": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@storybook/node-logger": "6.3.0-alpha.42",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -70,5 +70,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -73,5 +73,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,5 +81,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -80,5 +80,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.3.0-alpha.24",
|
||||
"version": "6.3.0-alpha.42",
|
||||
"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.24",
|
||||
"@storybook/client-api": "6.3.0-alpha.24",
|
||||
"@storybook/core": "6.3.0-alpha.24",
|
||||
"@storybook/core-common": "6.3.0-alpha.24",
|
||||
"@storybook/addons": "6.3.0-alpha.42",
|
||||
"@storybook/client-api": "6.3.0-alpha.42",
|
||||
"@storybook/core": "6.3.0-alpha.42",
|
||||
"@storybook/core-common": "6.3.0-alpha.42",
|
||||
"@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": "a8870128bc9684f9b54083decbd10664bf26bcc4"
|
||||
"gitHead": "8cb665a7789e6f1a6f853a5c2de05448c854f14c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
49
cypress/generated/addon-controls.spec.ts
Normal file
49
cypress/generated/addon-controls.spec.ts
Normal 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('textarea[name=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('input[name=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');
|
||||
});
|
||||
});
|
||||
@ -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 let’s 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, let’s 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, let’s 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. It’s 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. It’s 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.
|
||||
@ -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 }` |
|
||||
|
||||
@ -111,12 +111,12 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
name: 'Dynamic source',
|
||||
supported: ['react'],
|
||||
supported: ['react', 'vue', 'angular', 'svelte'],
|
||||
path: 'writing-docs/doc-blocks#source',
|
||||
},
|
||||
{
|
||||
name: 'Args Table',
|
||||
supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components'],
|
||||
supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
|
||||
path: 'writing-docs/doc-blocks#argstable',
|
||||
},
|
||||
{
|
||||
@ -126,7 +126,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
name: 'Inline stories',
|
||||
supported: ['react', 'vue', 'web-components', 'html', 'svelte'],
|
||||
supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
|
||||
path: 'writing-docs/doc-blocks#inline-rendering',
|
||||
},
|
||||
],
|
||||
|
||||
@ -13,6 +13,6 @@ export const Primary = Template.bind({});
|
||||
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
label: 'Primary',
|
||||
label: 'Button',
|
||||
};
|
||||
```
|
||||
|
||||
@ -15,10 +15,7 @@ export default {
|
||||
component: Icon,
|
||||
argTypes: {
|
||||
icon: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: Object.keys(iconMap),
|
||||
},
|
||||
options: Object.keys(iconMap),
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
@ -8,16 +8,13 @@ export default {
|
||||
status: {
|
||||
name: 'Badge Status',
|
||||
description: 'Available options available to the Badge',
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [
|
||||
'positive',
|
||||
'negative',
|
||||
'warning',
|
||||
'error',
|
||||
'neutral'
|
||||
],
|
||||
},
|
||||
options: [
|
||||
'positive',
|
||||
'negative',
|
||||
'warning',
|
||||
'error',
|
||||
'neutral'
|
||||
],
|
||||
table: {
|
||||
defaultValue: {
|
||||
summary: 'positive'
|
||||
@ -43,4 +40,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
@ -11,16 +11,13 @@ import { Badge } from './Badge';
|
||||
status: {
|
||||
name: 'Badge Status',
|
||||
description: 'Available options available to the Badge',
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [
|
||||
'positive',
|
||||
'negative',
|
||||
'warning',
|
||||
'error',
|
||||
'neutral'
|
||||
],
|
||||
},
|
||||
options: [
|
||||
'positive',
|
||||
'negative',
|
||||
'warning',
|
||||
'error',
|
||||
'neutral'
|
||||
],
|
||||
table: {
|
||||
defaultValue: {
|
||||
summary: 'positive'
|
||||
@ -54,4 +51,4 @@ Let's define a story for our `Badge` component
|
||||
<ArgsTable of={Badge} />
|
||||
|
||||
<!-- remainder story implementation -->
|
||||
```
|
||||
```
|
||||
|
||||
@ -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({})}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user