mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-29 05:04:31 +08:00
lint the newly linted code
This commit is contained in:
Norbert de Langen
parent
701a8baac2
commit
d08c11c6a3
48
.github/autolabeler.yml
vendored
48
.github/autolabeler.yml
vendored
@ -1,25 +1,25 @@
|
||||
'addon: a11y': ["addons/a11y/**"]
|
||||
'addon: actions': ["addons/actions/**"]
|
||||
'addon: backgrounds': ["addons/backgrounds/**"]
|
||||
'addon: events ': ["addons/events/**"]
|
||||
'addon: graphql ': ["addons/graphql/**"]
|
||||
'addon: info': ["addons/info/**"]
|
||||
'addon: jest': ["addons/jest/**"]
|
||||
'addon: knobs': ["addons/knobs/**"]
|
||||
'addon: links': ["addons/links/**"]
|
||||
'addon: notes': ["addons/notes/**"]
|
||||
'addon: options': ["addons/options/**"]
|
||||
'addon: storyshots': ["addons/storyshots/**"]
|
||||
'addon: viewport': ["addons/viewport/**"]
|
||||
'app: angular': ["app/angular/**"]
|
||||
'app: preact': ["app/preact/**"]
|
||||
'app: rax': ["app/rax/**"]
|
||||
'app: react': ["app/react/**"]
|
||||
'app: vue': ["app/vue/**"]
|
||||
'app: svelte': ["app/svelte/**"]
|
||||
'app: mithril': ["app/mithril/**"]
|
||||
'babel / webpack': ["webpack", "babel"]
|
||||
'cli': ["lib/cli/**"]
|
||||
'addon: a11y': ['addons/a11y/**']
|
||||
'addon: actions': ['addons/actions/**']
|
||||
'addon: backgrounds': ['addons/backgrounds/**']
|
||||
'addon: events ': ['addons/events/**']
|
||||
'addon: graphql ': ['addons/graphql/**']
|
||||
'addon: info': ['addons/info/**']
|
||||
'addon: jest': ['addons/jest/**']
|
||||
'addon: knobs': ['addons/knobs/**']
|
||||
'addon: links': ['addons/links/**']
|
||||
'addon: notes': ['addons/notes/**']
|
||||
'addon: options': ['addons/options/**']
|
||||
'addon: storyshots': ['addons/storyshots/**']
|
||||
'addon: viewport': ['addons/viewport/**']
|
||||
'app: angular': ['app/angular/**']
|
||||
'app: preact': ['app/preact/**']
|
||||
'app: rax': ['app/rax/**']
|
||||
'app: react': ['app/react/**']
|
||||
'app: vue': ['app/vue/**']
|
||||
'app: svelte': ['app/svelte/**']
|
||||
'app: mithril': ['app/mithril/**']
|
||||
'babel / webpack': ['webpack', 'babel']
|
||||
'cli': ['lib/cli/**']
|
||||
'compatibility with other tools': []
|
||||
'documentation': ["docs", "*.md"]
|
||||
'ui': ["lib/ui"]
|
||||
'documentation': ['docs', '*.md']
|
||||
'ui': ['lib/ui']
|
||||
|
||||
2
.github/workflows/cron-weekly.yml
vendored
2
.github/workflows/cron-weekly.yml
vendored
@ -2,7 +2,7 @@ name: Markdown Links Check
|
||||
# runs every monday at 9 am
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 9 * * 1"
|
||||
- cron: '0 9 * * 1'
|
||||
|
||||
jobs:
|
||||
check-links:
|
||||
|
||||
2
.github/workflows/generate-repros.yml
vendored
2
.github/workflows/generate-repros.yml
vendored
@ -4,7 +4,7 @@ on:
|
||||
schedule:
|
||||
- cron: '2 2 */1 * *'
|
||||
workflow_dispatch:
|
||||
# To remove when the branch will be merged
|
||||
# To remove when the branch will be merged
|
||||
push:
|
||||
branches:
|
||||
- generate-repros
|
||||
|
||||
@ -35,4 +35,4 @@
|
||||
}
|
||||
],
|
||||
"aliveStatusCodes": [429, 200]
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,5 +5,3 @@
|
||||
tasks:
|
||||
- init: yarn
|
||||
command: yarn bootstrap --core
|
||||
|
||||
|
||||
|
||||
59
.vscode/launch.json
vendored
59
.vscode/launch.json
vendored
@ -3,36 +3,31 @@
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "official-storybook",
|
||||
"runtimeExecutable": "npm",
|
||||
"cwd": "${workspaceFolder}/examples/official-storybook",
|
||||
"runtimeArgs": [
|
||||
"run-script",
|
||||
"debug"
|
||||
],
|
||||
"port": 9229,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
]
|
||||
}, {
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "cli html",
|
||||
"cwd": "${workspaceFolder}/lib/cli/stories",
|
||||
"runtimeArgs": [
|
||||
"--inspect-brk",
|
||||
"${workspaceFolder}/lib/cli/bin/index.js",
|
||||
"init",
|
||||
"--type",
|
||||
"html"
|
||||
],
|
||||
"port": 9229,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
]
|
||||
}
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "official-storybook",
|
||||
"runtimeExecutable": "npm",
|
||||
"cwd": "${workspaceFolder}/examples/official-storybook",
|
||||
"runtimeArgs": ["run-script", "debug"],
|
||||
"port": 9229,
|
||||
"skipFiles": ["<node_internals>/**"]
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "cli html",
|
||||
"cwd": "${workspaceFolder}/lib/cli/stories",
|
||||
"runtimeArgs": [
|
||||
"--inspect-brk",
|
||||
"${workspaceFolder}/lib/cli/bin/index.js",
|
||||
"init",
|
||||
"--type",
|
||||
"html"
|
||||
],
|
||||
"port": 9229,
|
||||
"skipFiles": ["<node_internals>/**"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,3 +1,3 @@
|
||||
{
|
||||
"deepscan.enable": true
|
||||
}
|
||||
}
|
||||
|
||||
12
.yarnrc.yml
12
.yarnrc.yml
@ -8,21 +8,21 @@ logFilters:
|
||||
- code: YN0076
|
||||
level: discard
|
||||
- level: discard
|
||||
pattern: "@workspace:examples"
|
||||
pattern: '@workspace:examples'
|
||||
- level: discard
|
||||
pattern: "@storybook/root@workspace:."
|
||||
pattern: '@storybook/root@workspace:.'
|
||||
- level: discard
|
||||
pattern: "@workspace:addons/storyshots/"
|
||||
pattern: '@workspace:addons/storyshots/'
|
||||
|
||||
nodeLinker: node-modules
|
||||
|
||||
npmRegistryServer: "https://registry.yarnpkg.com"
|
||||
npmRegistryServer: 'https://registry.yarnpkg.com'
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
|
||||
spec: "@yarnpkg/plugin-typescript"
|
||||
spec: '@yarnpkg/plugin-typescript'
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
spec: "@yarnpkg/plugin-interactive-tools"
|
||||
spec: '@yarnpkg/plugin-interactive-tools'
|
||||
|
||||
unsafeHttpWhitelist:
|
||||
- localhost
|
||||
|
||||
46
CHANGELOG.md
46
CHANGELOG.md
@ -2,41 +2,41 @@
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Addon docs: Pass remarks plugins to mdx loader [#18740](https://github.com/storybooks/storybook/pull/18740)
|
||||
- Preview: Ensure docs container re-renders when globals change [#18711](https://github.com/storybooks/storybook/pull/18711)
|
||||
- Core: Set other manager-side constants in build [#18728](https://github.com/storybooks/storybook/pull/18728)
|
||||
- CLI: Fix detection of type: module when initializing storybook [#18714](https://github.com/storybooks/storybook/pull/18714)
|
||||
- UI: Include full URL in the "Copy Canvas Link" button [#17498](https://github.com/storybooks/storybook/pull/17498)
|
||||
- Toolbars: Fallback to name if title and icon are unspecified [#17430](https://github.com/storybooks/storybook/pull/17430)
|
||||
- CLI: Fix addons register in RN template [#18693](https://github.com/storybooks/storybook/pull/18693)
|
||||
- Index: Support `{ csfData as default }` CSF exports [#18588](https://github.com/storybooks/storybook/pull/18588)
|
||||
- Svelte: Always create main with cjs extension [#18648](https://github.com/storybooks/storybook/pull/18648)
|
||||
- Addon docs: Pass remarks plugins to mdx loader [#18740](https://github.com/storybooks/storybook/pull/18740)
|
||||
- Preview: Ensure docs container re-renders when globals change [#18711](https://github.com/storybooks/storybook/pull/18711)
|
||||
- Core: Set other manager-side constants in build [#18728](https://github.com/storybooks/storybook/pull/18728)
|
||||
- CLI: Fix detection of type: module when initializing storybook [#18714](https://github.com/storybooks/storybook/pull/18714)
|
||||
- UI: Include full URL in the "Copy Canvas Link" button [#17498](https://github.com/storybooks/storybook/pull/17498)
|
||||
- Toolbars: Fallback to name if title and icon are unspecified [#17430](https://github.com/storybooks/storybook/pull/17430)
|
||||
- CLI: Fix addons register in RN template [#18693](https://github.com/storybooks/storybook/pull/18693)
|
||||
- Index: Support `{ csfData as default }` CSF exports [#18588](https://github.com/storybooks/storybook/pull/18588)
|
||||
- Svelte: Always create main with cjs extension [#18648](https://github.com/storybooks/storybook/pull/18648)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Build addons/a11y with ts-up [#18772](https://github.com/storybooks/storybook/pull/18772)
|
||||
- Typescript: Drop Emotion 10 types in lib/theming [#18598](https://github.com/storybooks/storybook/pull/18598)
|
||||
- Tests: Don't run the docs e2e in `react@18` [#18736](https://github.com/storybooks/storybook/pull/18736)
|
||||
- Addon-docs: Localize channel to docs context [#18730](https://github.com/storybooks/storybook/pull/18730)
|
||||
- Addon-docs: Move DocsRenderer back to addon-docs [#18708](https://github.com/storybooks/storybook/pull/18708)
|
||||
- Addon-docs: Remove `AddContext` from mdx packages [#18709](https://github.com/storybooks/storybook/pull/18709)
|
||||
- Preview: Simplify docsMode [#18729](https://github.com/storybooks/storybook/pull/18729)
|
||||
- Examples: Upgrade @storybook/jest in examples [#18582](https://github.com/storybooks/storybook/pull/18582)
|
||||
- Svelte: Make `svelte-loader` optional dependency [#18645](https://github.com/storybooks/storybook/pull/18645)
|
||||
- Build: Fix dts-localize script for windows [#18664](https://github.com/storybooks/storybook/pull/18664)
|
||||
- Build addons/a11y with ts-up [#18772](https://github.com/storybooks/storybook/pull/18772)
|
||||
- Typescript: Drop Emotion 10 types in lib/theming [#18598](https://github.com/storybooks/storybook/pull/18598)
|
||||
- Tests: Don't run the docs e2e in `react@18` [#18736](https://github.com/storybooks/storybook/pull/18736)
|
||||
- Addon-docs: Localize channel to docs context [#18730](https://github.com/storybooks/storybook/pull/18730)
|
||||
- Addon-docs: Move DocsRenderer back to addon-docs [#18708](https://github.com/storybooks/storybook/pull/18708)
|
||||
- Addon-docs: Remove `AddContext` from mdx packages [#18709](https://github.com/storybooks/storybook/pull/18709)
|
||||
- Preview: Simplify docsMode [#18729](https://github.com/storybooks/storybook/pull/18729)
|
||||
- Examples: Upgrade @storybook/jest in examples [#18582](https://github.com/storybooks/storybook/pull/18582)
|
||||
- Svelte: Make `svelte-loader` optional dependency [#18645](https://github.com/storybooks/storybook/pull/18645)
|
||||
- Build: Fix dts-localize script for windows [#18664](https://github.com/storybooks/storybook/pull/18664)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Storyshots: Allow react-test-renderer 18 [#18296](https://github.com/storybooks/storybook/pull/18296)
|
||||
- Core: Remove unnecessary webpack dependency [#18651](https://github.com/storybooks/storybook/pull/18651)
|
||||
- Storyshots: Allow react-test-renderer 18 [#18296](https://github.com/storybooks/storybook/pull/18296)
|
||||
- Core: Remove unnecessary webpack dependency [#18651](https://github.com/storybooks/storybook/pull/18651)
|
||||
|
||||
## 7.0.0-alpha.15 (July 25, 2022)
|
||||
|
||||
Failed publish
|
||||
Failed publish
|
||||
|
||||
## 7.0.0-alpha.14 (July 25, 2022)
|
||||
|
||||
Failed publish
|
||||
Failed publish
|
||||
|
||||
## 7.0.0-alpha.13 (July 11, 2022)
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
|
||||
* MDX: Upgrade csf-mdx libraries ([#18300](https://github.com/storybookjs/storybook/pull/18300))
|
||||
* security: update x-default-browser ([#18157](https://github.com/storybookjs/storybook/pull/18157))
|
||||
- MDX: Upgrade csf-mdx libraries ([#18300](https://github.com/storybookjs/storybook/pull/18300))
|
||||
- security: update x-default-browser ([#18157](https://github.com/storybookjs/storybook/pull/18157))
|
||||
|
||||
## 6.5.0-rc.1 (May 18, 2022)
|
||||
|
||||
@ -6753,5 +6752,3 @@ Failed NPM publish
|
||||
- Bump @babel/runtime from 7.7.4 to 7.7.7 ([#9277](https://github.com/storybookjs/storybook/pull/9277))
|
||||
- Bump corejs-upgrade-webpack-plugin from 2.2.0 to 3.0.1 ([#9427](https://github.com/storybookjs/storybook/pull/9427))
|
||||
- Bump terser-webpack-plugin from 2.2.1 to 2.3.2 ([#9386](https://github.com/storybookjs/storybook/pull/9386))
|
||||
|
||||
|
||||
|
||||
@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
- Using welcoming and inclusive language
|
||||
- Being respectful of differing viewpoints and experiences
|
||||
- Gracefully accepting constructive criticism
|
||||
- Focusing on what is best for the community
|
||||
- Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
- The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
- Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
- [Verify your local version is working](#verify-your-local-version-is-working)
|
||||
- [Documentation](#documentation)
|
||||
- [Release Guide](#release-guide)
|
||||
- [Prerelease:](#prerelease)
|
||||
- [Full release:](#full-release)
|
||||
- [Prerelease:](#prerelease)
|
||||
- [Full release:](#full-release)
|
||||
|
||||
Thanks for your interest in improving Storybook! We are a community-driven project and welcome contributions of all kinds: from discussion to documentation to bugfixes to feature improvements.
|
||||
|
||||
|
||||
136
MAINTAINERS.md
136
MAINTAINERS.md
@ -7,71 +7,71 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
|
||||
# Labels
|
||||
|
||||
| label name | purpose |
|
||||
|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| accessibility | Issue, bug, or pull request related to accessibility |
|
||||
| addon:(name) | Issue, bug, or pull request related to Storybook addons (e.g., [Controls](/docs/essentials/controls.md)) |
|
||||
| app:(name) | Issue, bug, or pull request related to Storybook's supported frameworks (e.g., React) |
|
||||
| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) |
|
||||
| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) |
|
||||
| babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) |
|
||||
| BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. |
|
||||
| BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) |
|
||||
| build-storybook | Issue, bug, or pull request related to Storybook's production build |
|
||||
| cleanup | Minor cleanup style change that won't show up in release changelog |
|
||||
| bug | A bug within Storybook |
|
||||
| cli | Issue, bug, or pull request that affects the Storybook's CLI |
|
||||
| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) |
|
||||
| components | Issue, bug, or pull request related to Storybook's internal components |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) |
|
||||
| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) |
|
||||
| core | Issue, bug, or pull request related to Storybook's Core |
|
||||
| cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
|
||||
| CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md) |
|
||||
| decorators | Issue, bug, or pull related to Storybook's [Decorators](/docs/writing-stories/decorators.md) |
|
||||
| dependencies | Issue, bug, or pull request that related to upstream dependencies |
|
||||
| discussion | Issue currently being discussed between the maintainers and community |
|
||||
| do not merge | Pull request that will introduce regressions and will not be merged |
|
||||
| documentation | Issue, bug, or pull request that affects Storybook's documentation |
|
||||
| duplicate | Question or issue already asked in the repo's issues |
|
||||
| feature request | Request for a new feature to be included in Storybook |
|
||||
| flow | Issue, bug, or pull request related to Storybook and Flow |
|
||||
| Funded on Issuehunt | Storybook issue funded on [IssueHunt](https://issuehunt.io/) |
|
||||
| gatsby | Issue, bug, or pull request that affects Storybook and [Gatsby](https://www.gatsbyjs.com/) |
|
||||
| good first issue | Low impact Storybook issues that help new members get involved and start contributing |
|
||||
| has workaround | Issue or bug that has an alternative way to be solved with Storybook |
|
||||
| help wanted | Issue, or bug that requires additional help from the community |
|
||||
| ie11 | Issue, bug, or pull request related to Storybook and IE11 |
|
||||
| in progress | Issue or pull request that is currently being reviewed or worked on with the author |
|
||||
| inactive | Issue, or pull request that has gone stale and no active development has been done |
|
||||
| maintenance | Issue, or pull request related to Storybook's internal maintenance |
|
||||
| mdx | Issue, bug, or pull request related to MDX and Storybook |
|
||||
| medium | Issue or pull request that involves a significant amount of work within Storybook |
|
||||
| monorepos | Issue, bug, or pull request related to Storybook and monorepos (e.g., [lerna](https://lerna.js.org/) ) |
|
||||
| mui | Issue, bug, or pull request that affects Storybook and [Material-UI](https://material-ui.com/) |
|
||||
| multiframework | Issue, bug, or pull request that affects multiple supported frameworks (e.g., React, Vue) |
|
||||
| needs more info | Issue, or bug that requires additional context from the author |
|
||||
| needs reproduction | Issue, or bug that requires a reproduction to be looked at |
|
||||
| needs triage | Issue, bug, or pull request that requires further investigation from the maintainers |
|
||||
| nextjs | Issue, bug, or pull request related to Storybook's integration with [Next.js](https://nextjs.org/) |
|
||||
| nx | Issue, bug, or pull request related to Storybook's integration with [NX](https://nx.dev/) |
|
||||
| other | Storybook's miscellaneous issue or pull request |
|
||||
| P(n) | Bug or issue priority. Ranges from `0` (most urgent) to `N` (least urgent) |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the main branch |
|
||||
| performance issue | Issue, bug or pull request that affects Storybook's performance |
|
||||
| picked | Patch PRs cherry-picked to the main branch |
|
||||
| presets | Issue, bug, or pull requests that affect Storybook's presets |
|
||||
| question / support | General question about Storybook |
|
||||
| run e2e extended test suite | Pull request that affects Storybook's testing suite |
|
||||
| search | Issue, bug or pull request related to Storybook's search functionality |
|
||||
| security | Issue, bug, or pull request that addresses security with Storybook |
|
||||
| small | Issue or pull request that requires a small amount of work to be done |
|
||||
| source-loader | Issue, bug, or pull request related to code display within Storybook's stories |
|
||||
| theming | Issue, bug, or pull request related to Storybook customization (e.g., [theming](/docs/configure/theming.md)) |
|
||||
| todo | Issue or pull request currently being worked on |
|
||||
| typescript | Issue, bug, or pull request related to TypeScript |
|
||||
| ui | Issue, bug, or pull request related to Storybook's UI |
|
||||
| webpack5 | Issue, bug, or pull request related to Webpack 5 |
|
||||
| won't fix | Issue or pull request that won't be addressed by the maintainers (e.g., introduces a regression) |
|
||||
| yarn/npm | Issue or pull request related to node package managers |
|
||||
| label name | purpose |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| accessibility | Issue, bug, or pull request related to accessibility |
|
||||
| addon:(name) | Issue, bug, or pull request related to Storybook addons (e.g., [Controls](/docs/essentials/controls.md)) |
|
||||
| app:(name) | Issue, bug, or pull request related to Storybook's supported frameworks (e.g., React) |
|
||||
| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) |
|
||||
| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) |
|
||||
| babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) |
|
||||
| BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. |
|
||||
| BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) |
|
||||
| build-storybook | Issue, bug, or pull request related to Storybook's production build |
|
||||
| cleanup | Minor cleanup style change that won't show up in release changelog |
|
||||
| bug | A bug within Storybook |
|
||||
| cli | Issue, bug, or pull request that affects the Storybook's CLI |
|
||||
| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) |
|
||||
| components | Issue, bug, or pull request related to Storybook's internal components |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) |
|
||||
| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) |
|
||||
| core | Issue, bug, or pull request related to Storybook's Core |
|
||||
| cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/)) |
|
||||
| CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md) |
|
||||
| decorators | Issue, bug, or pull related to Storybook's [Decorators](/docs/writing-stories/decorators.md) |
|
||||
| dependencies | Issue, bug, or pull request that related to upstream dependencies |
|
||||
| discussion | Issue currently being discussed between the maintainers and community |
|
||||
| do not merge | Pull request that will introduce regressions and will not be merged |
|
||||
| documentation | Issue, bug, or pull request that affects Storybook's documentation |
|
||||
| duplicate | Question or issue already asked in the repo's issues |
|
||||
| feature request | Request for a new feature to be included in Storybook |
|
||||
| flow | Issue, bug, or pull request related to Storybook and Flow |
|
||||
| Funded on Issuehunt | Storybook issue funded on [IssueHunt](https://issuehunt.io/) |
|
||||
| gatsby | Issue, bug, or pull request that affects Storybook and [Gatsby](https://www.gatsbyjs.com/) |
|
||||
| good first issue | Low impact Storybook issues that help new members get involved and start contributing |
|
||||
| has workaround | Issue or bug that has an alternative way to be solved with Storybook |
|
||||
| help wanted | Issue, or bug that requires additional help from the community |
|
||||
| ie11 | Issue, bug, or pull request related to Storybook and IE11 |
|
||||
| in progress | Issue or pull request that is currently being reviewed or worked on with the author |
|
||||
| inactive | Issue, or pull request that has gone stale and no active development has been done |
|
||||
| maintenance | Issue, or pull request related to Storybook's internal maintenance |
|
||||
| mdx | Issue, bug, or pull request related to MDX and Storybook |
|
||||
| medium | Issue or pull request that involves a significant amount of work within Storybook |
|
||||
| monorepos | Issue, bug, or pull request related to Storybook and monorepos (e.g., [lerna](https://lerna.js.org/) ) |
|
||||
| mui | Issue, bug, or pull request that affects Storybook and [Material-UI](https://material-ui.com/) |
|
||||
| multiframework | Issue, bug, or pull request that affects multiple supported frameworks (e.g., React, Vue) |
|
||||
| needs more info | Issue, or bug that requires additional context from the author |
|
||||
| needs reproduction | Issue, or bug that requires a reproduction to be looked at |
|
||||
| needs triage | Issue, bug, or pull request that requires further investigation from the maintainers |
|
||||
| nextjs | Issue, bug, or pull request related to Storybook's integration with [Next.js](https://nextjs.org/) |
|
||||
| nx | Issue, bug, or pull request related to Storybook's integration with [NX](https://nx.dev/) |
|
||||
| other | Storybook's miscellaneous issue or pull request |
|
||||
| P(n) | Bug or issue priority. Ranges from `0` (most urgent) to `N` (least urgent) |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the main branch |
|
||||
| performance issue | Issue, bug or pull request that affects Storybook's performance |
|
||||
| picked | Patch PRs cherry-picked to the main branch |
|
||||
| presets | Issue, bug, or pull requests that affect Storybook's presets |
|
||||
| question / support | General question about Storybook |
|
||||
| run e2e extended test suite | Pull request that affects Storybook's testing suite |
|
||||
| search | Issue, bug or pull request related to Storybook's search functionality |
|
||||
| security | Issue, bug, or pull request that addresses security with Storybook |
|
||||
| small | Issue or pull request that requires a small amount of work to be done |
|
||||
| source-loader | Issue, bug, or pull request related to code display within Storybook's stories |
|
||||
| theming | Issue, bug, or pull request related to Storybook customization (e.g., [theming](/docs/configure/theming.md)) |
|
||||
| todo | Issue or pull request currently being worked on |
|
||||
| typescript | Issue, bug, or pull request related to TypeScript |
|
||||
| ui | Issue, bug, or pull request related to Storybook's UI |
|
||||
| webpack5 | Issue, bug, or pull request related to Webpack 5 |
|
||||
| won't fix | Issue or pull request that won't be addressed by the maintainers (e.g., introduces a regression) |
|
||||
| yarn/npm | Issue or pull request related to node package managers |
|
||||
|
||||
26
README.md
26
README.md
@ -93,19 +93,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
| Version | Supported |
|
||||
| --------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
| Version | Supported |
|
||||
| ------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
@ -14,4 +12,4 @@
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -81,7 +81,6 @@ Storybook Docs supports all view layers that Storybook supports except for React
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/multiframework.md)
|
||||
|
||||
@ -63,7 +63,7 @@ basic.parameters = {
|
||||
|
||||
```md
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
import * as stories from './Button.stories.js';
|
||||
import \* as stories from './Button.stories.js';
|
||||
import { Button } from './Button';
|
||||
import { SomeComponent } from 'path/to/SomeComponent';
|
||||
|
||||
@ -348,7 +348,7 @@ const Example = () => <Button />;
|
||||
Example.parameters = {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Individual story description, may contain `markdown` markup"
|
||||
story: 'Individual story description, may contain `markdown` markup',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/__tests__/**/*",
|
||||
|
||||
@ -39,6 +39,7 @@ Known analyzers that output `custom-elements.json` v1.0.0:
|
||||
- Supports Vanilla, LitElement, FASTElement, Stencil, Catalyst, Atomico
|
||||
|
||||
Known analyzers that output older versions of `custom-elements.json`:
|
||||
|
||||
- [web-component-analyzer](https://github.com/runem/web-component-analyzer)
|
||||
- Supports LitElement, Polymer, Vanilla, (Stencil)
|
||||
- [stenciljs](https://stenciljs.com/)
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -2,13 +2,9 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
@ -17,4 +13,4 @@
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -7,7 +7,5 @@
|
||||
"skipLibCheck": true,
|
||||
"skipDefaultLibCheck": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
]
|
||||
}
|
||||
"include": ["src/**/*.ts"]
|
||||
}
|
||||
|
||||
@ -5,10 +5,6 @@
|
||||
"types": ["node"],
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/__tests__/**/*"]
|
||||
}
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
|
||||
@ -4,4 +4,4 @@ coverage:
|
||||
project:
|
||||
default:
|
||||
target: auto
|
||||
threshold: 2%
|
||||
threshold: 2%
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
{
|
||||
"extends": [
|
||||
"plugin:cypress/recommended"
|
||||
],
|
||||
"extends": ["plugin:cypress/recommended"],
|
||||
"rules": {
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error", { "devDependencies": true }
|
||||
]
|
||||
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,4 +2,4 @@
|
||||
"name": "Using fixtures to represent data",
|
||||
"email": "hello@cypress.io",
|
||||
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,17 +3,9 @@
|
||||
"strict": true,
|
||||
"baseUrl": "../node_modules",
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
],
|
||||
"types": [
|
||||
"cypress",
|
||||
"node"
|
||||
],
|
||||
"lib": ["es2017", "dom"],
|
||||
"types": ["cypress", "node"],
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts"
|
||||
]
|
||||
}
|
||||
"include": ["**/*.ts"]
|
||||
}
|
||||
|
||||
@ -68,11 +68,11 @@ Use the components listed below with your next addon.
|
||||
|
||||
Complementing the components, also included is a set of UI primitives. Use the content listed below as a reference for styling your addon.
|
||||
|
||||
| Component | Source | Story |
|
||||
| ------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| Component | Source | Story |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/Colors) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) |
|
||||
| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) |
|
||||
| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/typography) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all) |
|
||||
| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) |
|
||||
| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/typography) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all) |
|
||||
|
||||
<div class="aside">
|
||||
The color palette implemented by <code>@storybook/components</code> is a high-level abstraction of the <a href="https://github.com/storybookjs/storybook/tree/next/lib/theming/src"><code>@storybook/theming</code></a> package.
|
||||
@ -130,4 +130,4 @@ If you're working on a preset that loads third-party addons, which you don't hav
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you have control over the addons you want to customize. In that case, you can update your preset and implement a custom function to load any additional presets and provide the necessary configuration, similar to how it's implemented in the [Essentials](../../addons/essentials/src/index.ts) addon.
|
||||
If you have control over the addons you want to customize. In that case, you can update your preset and implement a custom function to load any additional presets and provide the necessary configuration, similar to how it's implemented in the [Essentials](../../addons/essentials/src/index.ts) addon.
|
||||
|
||||
@ -26,7 +26,6 @@ Use this boilerplate code to add a new `Panel` to Storybook's UI:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
### Toolbars
|
||||
|
||||
Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example the official [@storybook/backgrounds](../essentials/backgrounds.md) and the [storybook-addon-outline](https://github.com/chromaui/storybook-outline) use this pattern.
|
||||
@ -69,7 +68,6 @@ Use this boilerplate code to add a new `Tab` to Storybook's UI:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
<div class="aside">
|
||||
Learn how to write your own addon that include these UI elements <a href="./writing-addons">here</a>.
|
||||
</div>
|
||||
@ -92,4 +90,4 @@ Use this boilerplate code while writing your own preset addon.
|
||||
|
||||
<div class="aside">
|
||||
Learn more about writing your own preset addon <a href="./writing-presets">here</a>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -380,4 +380,4 @@ The following options are configurable under the `toolbar` namespace:
|
||||
|
||||
| Name | Type | Description | Example Value |
|
||||
| ------ | :----: | :--------------------------------: | :-----------------: |
|
||||
| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |
|
||||
| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |
|
||||
|
||||
@ -92,4 +92,4 @@ Consider the following example:
|
||||
Preset addons may also have addon-specific configuration. Read their respective READMEs.
|
||||
</div>
|
||||
|
||||
Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined.
|
||||
Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined.
|
||||
|
||||
@ -77,7 +77,6 @@ As of Storybook 6.3, Storybook can run with either `webpack4` or `webpack5` buil
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
### Manager entries
|
||||
|
||||
The addon config `managerEntries` allows you to add addons to Storybook from within a preset. For addons that require custom Webpack/Babel configuration, it is easier to install the preset, and it will take care of everything.
|
||||
@ -122,7 +121,6 @@ For example, the Backgrounds preset contains the following code:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
Which in turn invokes:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -113,7 +113,6 @@ Now consider the same example, re-written with args:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
Or even more simply:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
@ -236,4 +235,4 @@ For this particular example, you could achieve the same result in different ways
|
||||
- `excludeStories: /.*Data$/`
|
||||
- `excludeStories: ['simpleData', 'complexData']`
|
||||
|
||||
The first option is the recommended solution if you follow the best practice of starting story exports with an uppercase letter (i.e., use UpperCamelCase).
|
||||
The first option is the recommended solution if you follow the best practice of starting story exports with an uppercase letter (i.e., use UpperCamelCase).
|
||||
|
||||
@ -16,4 +16,4 @@ Core frameworks have dedicated maintainers or contributors who are responsible f
|
||||
|
||||
Community frameworks have fewer contributors which means they may not be as up to date as core frameworks. If you use one of these frameworks for your job, please consider contributing to its integration with Storybook.
|
||||
|
||||
<FrameworkSupportTable core={false} />
|
||||
<FrameworkSupportTable core={false} />
|
||||
|
||||
@ -147,4 +147,4 @@ To get a "documentation-only story" in your UI, define a `<Meta>` as you usually
|
||||
|
||||
Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. It tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
|
||||
|
||||
Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](https://github.com/storybookjs/storybook/tree/master/addons/docs#installation).
|
||||
Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](https://github.com/storybookjs/storybook/tree/master/addons/docs#installation).
|
||||
|
||||
@ -169,4 +169,4 @@ The globals file typically sets up a single global variable that client-side cod
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The `start` function abstracts all of Storybook’s framework-independent client-side (browser) code, and it takes the render function we defined above. For examples of render functions, see [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/client/preview/render.tsx), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/client/preview/render.ts), [Angular](https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/render.ts), and [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/client/preview/render.ts) in the Storybook monorepo.
|
||||
The `start` function abstracts all of Storybook’s framework-independent client-side (browser) code, and it takes the render function we defined above. For examples of render functions, see [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/client/preview/render.tsx), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/client/preview/render.ts), [Angular](https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/render.ts), and [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/client/preview/render.ts) in the Storybook monorepo.
|
||||
|
||||
@ -160,4 +160,4 @@ This area is under rapid development, so the documented is still in progress and
|
||||
|
||||
- [Vite builder](./vite.md) for bundling with Vite
|
||||
- [Webpack builder](./webpack.md) for bundling with Webpack
|
||||
- Builder API for building a Storybook builder
|
||||
- Builder API for building a Storybook builder
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Builders'
|
||||
---
|
||||
|
||||
Storybook, at its core, is powered by builders such as Webpack and Vite. These builders spin up a development environment, compile your code—Javascript, CSS, and MDX—into an executable bundle and update the browser in real-time.
|
||||
Storybook, at its core, is powered by builders such as Webpack and Vite. These builders spin up a development environment, compile your code—Javascript, CSS, and MDX—into an executable bundle and update the browser in real-time.
|
||||
|
||||
|
||||
|
||||
@ -21,4 +21,4 @@ npx storybook init --builder <webpack4 | webpack5 | vite>
|
||||
Storybook uses the Webpack 4 builder by default if you don't specify one. If you want to use a different builder in your application, these docs detail how you can set up Storybook's supported builders.
|
||||
|
||||
- [**Vite builder**](./vite.md) for bundling your stories with Vite with near-instant HMR.
|
||||
- [**Webpack**](./webpack.md) for bundling your stories with Webpack with improved performance
|
||||
- [**Webpack**](./webpack.md) for bundling your stories with Webpack with improved performance
|
||||
|
||||
@ -57,7 +57,6 @@ For development mode:
|
||||
|
||||
For production mode:
|
||||
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
|
||||
@ -11,7 +11,7 @@ STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files.
|
||||
💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files.
|
||||
|
||||
</div>
|
||||
|
||||
@ -74,7 +74,6 @@ You can also pass these environment variables when you are [building your Storyb
|
||||
|
||||
Then they'll be hardcoded to the static version of your Storybook.
|
||||
|
||||
|
||||
### Using Storybook configuration
|
||||
|
||||
Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
|
||||
@ -116,4 +115,4 @@ The table below lists the available options:
|
||||
|
||||
<div class="aside">
|
||||
💡 By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,4 +55,4 @@ You can use URL parameters to configure some of the available features:
|
||||
| **showNav** | `nav` | `false` |
|
||||
| **showPanel** | `panel` | `false`, `right`, `bottom` |
|
||||
| **selectedPanel** | `addonPanel` | Any panel ID |
|
||||
| **showTabs** | `tabs` | `true` |
|
||||
| **showTabs** | `tabs` | `true` |
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Story layout'
|
||||
---
|
||||
|
||||
The `layout` [parameter](../writing-stories/parameters.md) allows you to configure how stories are positioned in Storybook's Canvas tab.
|
||||
The `layout` [parameter](../writing-stories/parameters.md) allows you to configure how stories are positioned in Storybook's Canvas tab.
|
||||
|
||||
## Global layout
|
||||
|
||||
@ -54,4 +54,4 @@ Or even apply it to specific stories like so:
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
@ -22,4 +22,4 @@ There are many, many Storybook addons, but they can be roughly categorized into
|
||||
|
||||
- **Essential** addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations.
|
||||
- **Core** addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons).
|
||||
- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](https://storybook.js.org/addons/), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
|
||||
- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](https://storybook.js.org/addons/), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
title: 'User interface'
|
||||
---
|
||||
|
||||
|
||||
Storybook's UI is a highly customizable one and full of rich features to help you with your development process.
|
||||
|
||||
Read more about the Storybook's features below:
|
||||
@ -11,4 +10,4 @@ Read more about the Storybook's features below:
|
||||
- [Theming](./theming.md)
|
||||
- [Storybook addons](./storybook-addons.md)
|
||||
- [Sidebar & URLS](./sidebar-and-urls.md)
|
||||
- [Environment variables](./environment-variables.md)
|
||||
- [Environment variables](./environment-variables.md)
|
||||
|
||||
@ -6,14 +6,14 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com
|
||||
|
||||
## Initial setup
|
||||
|
||||
Start by [forking](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook monorepo and cloning it locally.
|
||||
Start by [forking](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook monorepo and cloning it locally.
|
||||
|
||||
```shell
|
||||
git clone https://github.com/your-username/storybook.git
|
||||
```
|
||||
|
||||
Navigate to the `storybook` directory and install the required dependencies with the following commands:
|
||||
|
||||
|
||||
```shell
|
||||
yarn && yarn bootstrap --core
|
||||
```
|
||||
|
||||
@ -87,7 +87,7 @@ Go through the rest of the documentation and repeat the process.
|
||||
|
||||
Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
|
||||
|
||||
Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally.
|
||||
Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally.
|
||||
|
||||
```shell
|
||||
git clone https://github.com/your-username/frontpage.git
|
||||
|
||||
@ -86,4 +86,4 @@ This will bind a standard HTML event handler to the outermost HTML element rende
|
||||
|
||||
## Advanced / legacy usage
|
||||
|
||||
There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
|
||||
There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
|
||||
|
||||
@ -102,4 +102,4 @@ If you need to disable the grid for a specific story, set the `backgrounds` para
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
@ -180,23 +180,23 @@ The Controls addon can be configured in two ways:
|
||||
|
||||
As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes.md) field of either a component or story. Below is a condensed example and table featuring all available controls.
|
||||
|
||||
| Data Type | Control | Description |
|
||||
| ----------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **boolean** | `boolean` | Provides a toggle for switching between possible states.<br/> `argTypes: { active: { control: 'boolean' }}` |
|
||||
| **number** | `number` | Provides a numeric input to include the range of all possible values.<br/> `argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}` |
|
||||
| | `range` | Provides a range slider component to include all possible values.<br/> `argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}` |
|
||||
| **object** | `object` | Provides a JSON-based editor component to handle the object's values.<br/> Also allows edition in raw mode.<br/> `argTypes: { user: { control: 'object' }}` |
|
||||
| **array** | `object` | Provides a JSON-based editor component to handle the values of the array.<br/> Also allows edition in raw mode.<br/> `argTypes: { odd: { control: 'object' }}` |
|
||||
| | `file` | Provides a file input component that returns an array of URLs.<br/> Can be further customized to accept specific file types.<br/> `argTypes: { avatar: { control: { type: 'file', accept: '.png' } }}` |
|
||||
| **enum** | `radio` | Provides a set of radio buttons based on the available options.<br/> `argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `inline-radio` | Provides a set of inlined radio buttons based on the available options.<br/> `argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `check` | Provides a set of checkbox components for selecting multiple options.<br/> `argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `inline-check` | Provides a set of inlined checkbox components for selecting multiple options.<br/> `argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` |
|
||||
| | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` |
|
||||
| **string** | `text` | Provides a freeform text input. <br/> `argTypes: { label: { control: 'text' }}` |
|
||||
| Data Type | Control | Description |
|
||||
| ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **boolean** | `boolean` | Provides a toggle for switching between possible states.<br/> `argTypes: { active: { control: 'boolean' }}` |
|
||||
| **number** | `number` | Provides a numeric input to include the range of all possible values.<br/> `argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}` |
|
||||
| | `range` | Provides a range slider component to include all possible values.<br/> `argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}` |
|
||||
| **object** | `object` | Provides a JSON-based editor component to handle the object's values.<br/> Also allows edition in raw mode.<br/> `argTypes: { user: { control: 'object' }}` |
|
||||
| **array** | `object` | Provides a JSON-based editor component to handle the values of the array.<br/> Also allows edition in raw mode.<br/> `argTypes: { odd: { control: 'object' }}` |
|
||||
| | `file` | Provides a file input component that returns an array of URLs.<br/> Can be further customized to accept specific file types.<br/> `argTypes: { avatar: { control: { type: 'file', accept: '.png' } }}` |
|
||||
| **enum** | `radio` | Provides a set of radio buttons based on the available options.<br/> `argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `inline-radio` | Provides a set of inlined radio buttons based on the available options.<br/> `argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `check` | Provides a set of checkbox components for selecting multiple options.<br/> `argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `inline-check` | Provides a set of inlined checkbox components for selecting multiple options.<br/> `argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}` |
|
||||
| | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` |
|
||||
| | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` |
|
||||
| **string** | `text` | Provides a freeform text input. <br/> `argTypes: { label: { control: 'text' }}` |
|
||||
| | `color` | Provides a color picker component to handle color values.<br/> Can be additionally configured to include a set of color presets.<br/> `argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}` |
|
||||
| | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` |
|
||||
| | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` |
|
||||
|
||||
<div class="aside">
|
||||
💡 The <code>date</code> control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object.
|
||||
|
||||
@ -47,7 +47,6 @@ Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-ren
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Now when you run Storybook, the Interactions addon will be enabled.
|
||||
|
||||
|
||||
|
||||
@ -26,4 +26,4 @@ With Storybook's Outline addon, you can toggle the outlines associated with all
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source src="addon-outline-optimized.mp4" type="video/mp4"/>
|
||||
</video>
|
||||
</video>
|
||||
|
||||
@ -166,4 +166,4 @@ For example, if you were working on a [toolbar addon](../addons/addon-types.md#t
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
@ -138,4 +138,4 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
|
||||
- Next viewport: <kbd>v</kbd>
|
||||
- Reset viewport: <kbd>alt</kbd> + <kbd>v</kbd>
|
||||
|
||||
If you need, you can edit them on the shortcuts page.
|
||||
If you need, you can edit them on the shortcuts page.
|
||||
|
||||
@ -20,7 +20,7 @@ module.exports = {
|
||||
name: '@storybook/angular',
|
||||
options: {
|
||||
enableIvy: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -356,7 +356,7 @@ This is a known issue with MDX 2. We're working to fix it. For now you can apply
|
||||
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
|
||||
import * as stories from './Button.stories.jsx';
|
||||
import \* as stories from './Button.stories.jsx';
|
||||
|
||||
<Story name="Basic" story={stories.Basic} />
|
||||
```
|
||||
|
||||
@ -99,4 +99,4 @@ If all else fails, try asking for [help](https://storybook.js.org/support)
|
||||
|
||||
</details>
|
||||
|
||||
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
|
||||
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
|
||||
|
||||
@ -1 +1,6 @@
|
||||
{"version":"6.3.0","info":{"plain":"**[Optimized for UI development](https://github.com/storybookjs/storybook/issues/14397)**\n\nSB6.3 adds new UI development and testing features, while evolving with the JS ecosystem:\n\n- 📐 Layout debugging with Measure and Outline addons\n- 🔌 Reuse your stories in unit tests: Jest, Cypress & more\n- 🚀 Frameworks: Angular 12 Ivy, Lit2 web components\n- 🛠 Builders: Webpack5 stable, Vite community\n- 📦 Packaging: Modern ESM\n\nIt also contains hundreds more fixes, features, and tweaks. Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) matching `6.3.0-alpha.*`, `6.3.0-beta.*`, and `6.3.0-rc.*` for the full list of changes. See [Storybook 6 migration guide](https://storybook.js.org/blog/storybook-6-migration-guide/) to upgrade from `5.x` or [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) for detailed migration instructions."}}
|
||||
{
|
||||
"version": "6.3.0",
|
||||
"info": {
|
||||
"plain": "**[Optimized for UI development](https://github.com/storybookjs/storybook/issues/14397)**\n\nSB6.3 adds new UI development and testing features, while evolving with the JS ecosystem:\n\n- 📐 Layout debugging with Measure and Outline addons\n- 🔌 Reuse your stories in unit tests: Jest, Cypress & more\n- 🚀 Frameworks: Angular 12 Ivy, Lit2 web components\n- 🛠 Builders: Webpack5 stable, Vite community\n- 📦 Packaging: Modern ESM\n\nIt also contains hundreds more fixes, features, and tweaks. Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) matching `6.3.0-alpha.*`, `6.3.0-beta.*`, and `6.3.0-rc.*` for the full list of changes. See [Storybook 6 migration guide](https://storybook.js.org/blog/storybook-6-migration-guide/) to upgrade from `5.x` or [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) for detailed migration instructions."
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ At any point during your development, you can preview the documentation you've w
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"storybook-docs": "start-storybook --docs --no-manager-cache",
|
||||
"storybook-docs": "start-storybook --docs --no-manager-cache"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -39,7 +39,7 @@ You can also publish your documentation, the same you would [publish](../sharing
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build-storybook-docs": "build-storybook --docs",
|
||||
"build-storybook-docs": "build-storybook --docs"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -179,4 +179,4 @@ You can also extend the formula above and introduce subcategories, allowing bett
|
||||
|
||||
### Controls
|
||||
|
||||
The controls inside an `ArgsTable` are configured in exactly the same way as the [controls](../essentials/controls.md) addon pane. You’ll probably notice the table is very similar! It uses the same component and mechanism behind the scenes.
|
||||
The controls inside an `ArgsTable` are configured in exactly the same way as the [controls](../essentials/controls.md) addon pane. You’ll probably notice the table is very similar! It uses the same component and mechanism behind the scenes.
|
||||
|
||||
@ -63,4 +63,4 @@ Additionally, you can also place non-story related content inside `Canvas` Doc B
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When rendered, Storybook will automatically generate the code snippet for this inside the [Source](./doc-block-source.md) block beneath the block.
|
||||
When rendered, Storybook will automatically generate the code snippet for this inside the [Source](./doc-block-source.md) block beneath the block.
|
||||
|
||||
@ -25,4 +25,4 @@ Similar to [`Typeset`](./doc-block-typeset.md), the `ColorPalette` Doc Block is
|
||||
| ---------- | -------------------------------------------------------------------------------------------------------------------- |
|
||||
| `title` | Sets the name of the color to be displayed. <br/> `<ColorItem title='tomato' />` |
|
||||
| `subtitle` | Provides an additional description to the color. <br/> `<ColorItem subtitle='This is a bright red color' />` |
|
||||
| `colors` | Provides the list of colors to be displayed. <br/> `<ColorItem colors={{ White: '#FFFFFF', Concrete: '#F3F3F3' } />` |
|
||||
| `colors` | Provides the list of colors to be displayed. <br/> `<ColorItem colors={{ White: '#FFFFFF', Concrete: '#F3F3F3' } />` |
|
||||
|
||||
@ -20,11 +20,11 @@ Storybook extracts the component's description and renders it at the top of the
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Option | Description |
|
||||
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `component` | Overrides the default component description. <br/> `description: { component:'An example component description' }` |
|
||||
| `markdown` | Provides custom Markdown for the component description. <br/> `<Description markdown={dedent'# Custom Description'} />` <br/> Only applicable to MDX. |
|
||||
| `story` | Overrides the story description. <br/> `description: { story: 'An example story description' }` |
|
||||
| Option | Description |
|
||||
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `component` | Overrides the default component description. <br/> `description: { component:'An example component description' }` |
|
||||
| `markdown` | Provides custom Markdown for the component description. <br/> `<Description markdown={dedent'# Custom Description'} />` <br/> Only applicable to MDX. |
|
||||
| `story` | Overrides the story description. <br/> `description: { story: 'An example story description' }` |
|
||||
| `of` | Sets the description based either on a component or story. <br/> `<Description of={Component} />` <br/> `<Description of={'.'} />` <br/> Only applicable to MDX. |
|
||||
|
||||
## Working with MDX
|
||||
@ -39,4 +39,4 @@ If you need, you can also include the `Description` Doc Block in your MDX storie
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
@ -22,4 +22,4 @@ Similar to other documentation-oriented Doc Blocks such as [`TypeSet`](./doc-blo
|
||||
|
||||
| Option | Description |
|
||||
| ------ | --------------------------------------------------------- |
|
||||
| `name` | Sets the name of the icon. <br/> `<IconItem name="add"/>` |
|
||||
| `name` | Sets the name of the icon. <br/> `<IconItem name="add"/>` |
|
||||
|
||||
@ -36,11 +36,11 @@ It includes additional customization via parameters. Below is a condensed exampl
|
||||
| `format` | Formats the code snippet. <br/> `docs: { source: { format:false } }` |
|
||||
| `type` | Sets how the story source snippet is auto-generated. See table below for available values. |
|
||||
|
||||
| Value | Description | Support |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
|
||||
| **auto** (default) | Use `dynamic` snippets if the story is written using [Args](../writing-stories/args.md) and the framework supports it.<br/> `docs: { source: { type: 'auto' } }` | All |
|
||||
| **dynamic** | Dynamically generated code snippet based on the output of the story function (e.g, JSX code for React). <br/> `docs: { source: { type: 'dynamic' } }` | [Limited](../api/frameworks-feature-support.md) |
|
||||
| **code** | Use the raw story source as written in the story file. <br/> `docs: { source: { type: 'code' } }` | All |
|
||||
| Value | Description | Support |
|
||||
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
|
||||
| **auto** (default) | Use `dynamic` snippets if the story is written using [Args](../writing-stories/args.md) and the framework supports it.<br/> `docs: { source: { type: 'auto' } }` | All |
|
||||
| **dynamic** | Dynamically generated code snippet based on the output of the story function (e.g, JSX code for React). <br/> `docs: { source: { type: 'dynamic' } }` | [Limited](../api/frameworks-feature-support.md) |
|
||||
| **code** | Use the raw story source as written in the story file. <br/> `docs: { source: { type: 'code' } }` | All |
|
||||
|
||||
## Working with MDX
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ With MDX, the `Story` block is not only a way of rendering stories, but how you
|
||||
| `loaders` | (Experimental) Asynchronous function for data fetching with stories. <br/> `<Story loaders={[async () => ({ data: await (await fetch('your-endpoint'))}) ]}/>` <br/> Read the [documentation](../writing-stories/loaders.md) to learn more. |
|
||||
| `name` | Adds a name to the component story. <br/> `<Story name="Example"/>` . |
|
||||
| `parameters` | Provides the necessary static named metadata related to the story. <br/> `Story parameters={{ backgrounds: { values: [{ name:'red', value:'#f00' }] } }} />` <br/> Read the [documentation](../writing-stories/parameters.md) to learn more. |
|
||||
| `play` | Generate component interactions. <br/> `<Story play={async () => { await userEvent.click(screen.getByRole('button')) }}/>` <br/> Read the [documentation](../writing-stories/play-function.md) to learn more. |
|
||||
| `play` | Generate component interactions. <br/> `<Story play={async () => { await userEvent.click(screen.getByRole('button')) }}/>` <br/> Read the [documentation](../writing-stories/play-function.md) to learn more. |
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -47,4 +47,4 @@ With MDX, the `Story` block is not only a way of rendering stories, but how you
|
||||
|
||||
### Inline rendering
|
||||
|
||||
All stories are rendered in the Preview iframe for isolated development in Storybook's Canvas. With Docs, if your framework supports [inline rendering](./docs-page.md#inline-stories-vs-iframe-stories), it will be used by default for both performance and convenience. However, you can force this feature by providing the required configuration option (see tables above).
|
||||
All stories are rendered in the Preview iframe for isolated development in Storybook's Canvas. With Docs, if your framework supports [inline rendering](./docs-page.md#inline-stories-vs-iframe-stories), it will be used by default for both performance and convenience. However, you can force this feature by providing the required configuration option (see tables above).
|
||||
|
||||
@ -25,4 +25,4 @@ Similar to other documentation related Doc Blocks (e.g., `ColorPalette`, `IconGa
|
||||
| `fontFamily` | Provides a font family to be displayed . <br/> `<Typeset fontFamily={"Nunito Sans"} />` |
|
||||
| `fontSizes` | Provides a list of available font sizes. <br/> `<Typeset fontSizes={[ 12, 14, 20 ]} />` |
|
||||
| `fontWeight` | Defines the weight of the font to be displayed. <br/> `<Typeset fontWeight={800} />` |
|
||||
| `sampleText` | Defines the text to be displayed. <br/> `<Typeset sampleText='Example Text' />` |
|
||||
| `sampleText` | Defines the text to be displayed. <br/> `<Typeset sampleText='Example Text' />` |
|
||||
|
||||
@ -227,17 +227,18 @@ First, ensure that `transcludeMarkdown` is set to `true` in `main.js`:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Then, import the markdown and treat the imported file as a component in the MDX file:
|
||||
Then, import the markdown and treat the imported file as a component in the MDX file:
|
||||
|
||||
```mdx
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
import Changelog from "../CHANGELOG.md";
|
||||
import Changelog from '../CHANGELOG.md';
|
||||
|
||||
<Meta title="Changelog" />
|
||||
|
||||
<Changelog />
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Linking to other stories and pages
|
||||
|
||||
@ -154,4 +154,4 @@ All decorators relevant to a story will run in the following order once the stor
|
||||
|
||||
- Global decorators, in the order they are defined
|
||||
- Component decorators, in the order they are defined
|
||||
- Story decorators, in the order they are defined
|
||||
- Story decorators, in the order they are defined
|
||||
|
||||
@ -163,7 +163,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.
|
||||
|
||||
What’s more, you can import `args` to reuse when writing stories for other components, and it's helpful when you’re building composite components. For example, if we make a `ButtonGroup` story, we might remix two stories from its child component `Button`.
|
||||
|
||||
@ -69,4 +69,4 @@ Loaders have the following known limitations:
|
||||
- They are not yet compatible with the storyshots addon ([#12703](https://github.com/storybookjs/storybook/issues/12703)).
|
||||
- They are not yet compatible with inline-rendered stories in Storybook Docs ([#12726](https://github.com/storybookjs/storybook/issues/12726)).
|
||||
|
||||
If you're interested in contributing to this feature, read our [contribution guide](../contribute/how-to-contribute.md) and submit a pull request with your work.
|
||||
If you're interested in contributing to this feature, read our [contribution guide](../contribute/how-to-contribute.md) and submit a pull request with your work.
|
||||
|
||||
@ -103,7 +103,7 @@ The `storySort` can also accept a configuration object.
|
||||
| Field | Type | Description | Required | Default Value | Example |
|
||||
| --------------- | :-----: | :------------------------------------------------------: | :------: | :---------------------: | :-----------------------: |
|
||||
| **method** | String | Tells Storybook in which order the stories are displayed | No | Storybook configuration | `'alphabetical'` |
|
||||
| **order** | Array | The stories to be shown, ordered by supplied name | No | Empty Array `[]` | `['Intro', 'Components']` |
|
||||
| **order** | Array | The stories to be shown, ordered by supplied name | No | Empty Array `[]` | `['Intro', 'Components']` |
|
||||
| **includeName** | Boolean | Include story name in sort calculation | No | `false` | `true` |
|
||||
| **locales** | String | The locale required to be displayed | No | System locale | `en-US` |
|
||||
|
||||
|
||||
@ -21,7 +21,6 @@ We can set a parameter for a single story with the `parameters` key on a CSF exp
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
## Component parameters
|
||||
|
||||
We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
|
||||
|
||||
@ -217,4 +217,4 @@ Browser-based accessibility tests, like those found in Storybook, evaluate the r
|
||||
- Accessibility tests for accessibility
|
||||
- [Interaction tests](./interaction-testing.md) for user behavior simulation
|
||||
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
|
||||
@ -185,4 +185,4 @@ Once you execute Playwright, it opens a new browser window, loads Storybook's is
|
||||
- [Accessibility tests](./accessibility-testing.md) for accessibility
|
||||
- [Interaction tests](./interaction-testing.md) for user behavior simulation
|
||||
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
|
||||
- Import stories in other tests for other tools
|
||||
- Import stories in other tests for other tools
|
||||
|
||||
@ -19,4 +19,4 @@ Storybook also comes with tools, [a test runner](./test-runner.md), and [handy i
|
||||
- [**Accessibility tests**](./accessibility-testing.md) catch usability issues related to visual, hearing, mobility, cognitive, speech, or neurological disabilities
|
||||
- [**Interaction tests**](./interaction-testing.md) verify component functionality by simulating user behaviour, firing events, and ensuring that state is updated as expected
|
||||
- [**Snapshot tests**](./snapshot-testing.md) detect changes in the rendered markup to surface rendering errors or warnings
|
||||
- [**Import stories in other tests**](./importing-stories-in-tests.md) to QA even more UI characteristics
|
||||
- [**Import stories in other tests**](./importing-stories-in-tests.md) to QA even more UI characteristics
|
||||
|
||||
@ -118,4 +118,4 @@ Visual tests capture images of stories and compare them against image baselines.
|
||||
- [Accessibility tests](./accessibility-testing.md) for accessibility
|
||||
- [Interaction tests](./interaction-testing.md) for user behavior simulation
|
||||
- Snapshot tests for rendering errors and warnings
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
|
||||
@ -31,8 +31,6 @@ Next, install the [chromatic](https://www.npmjs.com/package/chromatic) CLI packa
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
|
||||
Run the following command after the package finishes installing:
|
||||
|
||||
```shell
|
||||
@ -84,4 +82,4 @@ Snapshot tests compare the rendered markup of every story against known baseline
|
||||
- [Accessibility tests](./accessibility-testing.md) for accessibility
|
||||
- [Interaction tests](./interaction-testing.md) for user behavior simulation
|
||||
- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
|
||||
|
||||
@ -20,4 +20,4 @@ Live examples of these:
|
||||
- [HTML](https://storybookjs.netlify.com/html-kitchen-sink/)
|
||||
- [Svelte](https://storybookjs.netlify.com/svelte-kitchen-sink/)
|
||||
- [Ember](https://storybookjs.netlify.com/ember-cli/)
|
||||
- [Preact](https://storybookjs.netlify.com/preact-kitchen-sink/)
|
||||
- [Preact](https://storybookjs.netlify.com/preact-kitchen-sink/)
|
||||
|
||||
@ -1,16 +1,8 @@
|
||||
{
|
||||
"extends": "../tsconfig.app.json",
|
||||
"exclude": [
|
||||
"../src/karma.ts",
|
||||
"../src/**/*.spec.ts"
|
||||
],
|
||||
"include": [
|
||||
"../src/**/*",
|
||||
"preview.ts"
|
||||
],
|
||||
"exclude": ["../src/karma.ts", "../src/**/*.spec.ts"],
|
||||
"include": ["../src/**/*", "preview.ts"],
|
||||
"compilerOptions": {
|
||||
"types": [
|
||||
"@testing-library/jest-dom"
|
||||
]
|
||||
"types": ["@testing-library/jest-dom"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,10 +5,6 @@
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"node"
|
||||
]
|
||||
"types": ["jasmine", "jasminewd2", "node"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,25 @@
|
||||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div class="hide" style="color: red; font-size: 30px; text-align: center;">
|
||||
<div class="hide" style="color: red; font-size: 30px; text-align: center">
|
||||
This should be hidden, if not - scss is not loaded as needed.
|
||||
</div>
|
||||
<div style="text-align:center">
|
||||
<h1>
|
||||
Welcome to {{title}}!
|
||||
</h1>
|
||||
<img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
|
||||
<div style="text-align: center">
|
||||
<h1>Welcome to {{ title }}!</h1>
|
||||
<img
|
||||
width="300"
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
/>
|
||||
</div>
|
||||
<h2>Here are some links to help you start: </h2>
|
||||
<h2>Here are some links to help you start:</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
|
||||
<h2>
|
||||
<a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a>
|
||||
</h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" href="https://blog.angular.io//">Angular blog</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ng5test</title>
|
||||
<base href="/">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ng5test</title>
|
||||
<base href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<storybook-app-root></storybook-app-root>
|
||||
</body>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<storybook-app-root></storybook-app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,29 +4,42 @@
|
||||
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name"
|
||||
required
|
||||
[(ngModel)]="model.name" name="name"
|
||||
#name="ngModel">
|
||||
<div [hidden]="name.valid || name.pristine"
|
||||
class="alert alert-danger">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="name"
|
||||
required
|
||||
[(ngModel)]="model.name"
|
||||
name="name"
|
||||
#name="ngModel"
|
||||
/>
|
||||
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control" id="alterEgo"
|
||||
[(ngModel)]="model.alterEgo" name="alterEgo">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="alterEgo"
|
||||
[(ngModel)]="model.alterEgo"
|
||||
name="alterEgo"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" id="power"
|
||||
required
|
||||
[(ngModel)]="model.power" name="power"
|
||||
#power="ngModel">
|
||||
<select
|
||||
class="form-control"
|
||||
id="power"
|
||||
required
|
||||
[(ngModel)]="model.power"
|
||||
name="power"
|
||||
#power="ngModel"
|
||||
>
|
||||
<option></option>
|
||||
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
|
||||
<option *ngFor="let pow of powers" [value]="pow">{{ pow }}</option>
|
||||
</select>
|
||||
|
||||
<div [hidden]="power.valid || power.pristine" class="alert alert-danger">
|
||||
@ -36,7 +49,12 @@
|
||||
|
||||
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">
|
||||
Submit
|
||||
<span *ngIf="submitting" class="spinner-border spinner-border-sm ml-2" role="status" aria-hidden="true"></span>
|
||||
<span
|
||||
*ngIf="submitting"
|
||||
class="spinner-border spinner-border-sm ml-2"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -55,7 +73,7 @@
|
||||
<div class="col-sm-3 font-weight-bold">Power</div>
|
||||
<div class="col-sm-9" data-testid="hero-power">{{ model.power }}</div>
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" (click)="submitted=false">Edit</button>
|
||||
<br />
|
||||
<button class="btn btn-primary" (click)="submitted = false">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div>
|
||||
<div>All dependencies are defined: {{isAllDeps()}}</div>
|
||||
<div>Title: {{title}}</div>
|
||||
<div>Injector: {{injector.constructor.toString()}}</div>
|
||||
<div>ElementRef: {{elRefStr()}}</div>
|
||||
<div>TestToken: {{testToken}}</div>
|
||||
<div>All dependencies are defined: {{ isAllDeps() }}</div>
|
||||
<div>Title: {{ title }}</div>
|
||||
<div>Injector: {{ injector.constructor.toString() }}</div>
|
||||
<div>ElementRef: {{ elRefStr() }}</div>
|
||||
<div>TestToken: {{ testToken }}</div>
|
||||
</div>
|
||||
|
||||
@ -5,16 +5,8 @@
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jest",
|
||||
"node"
|
||||
]
|
||||
"types": ["jest", "node"]
|
||||
},
|
||||
"files": [
|
||||
"karma.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
"files": ["karma.ts"],
|
||||
"include": ["**/*.spec.ts", "**/*.d.ts"]
|
||||
}
|
||||
|
||||
@ -4,14 +4,7 @@
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"**/*.stories.*"
|
||||
]
|
||||
"files": ["src/main.ts", "src/polyfills.ts"],
|
||||
"include": ["src/**/*.d.ts"],
|
||||
"exclude": ["**/*.stories.*"]
|
||||
}
|
||||
|
||||
@ -15,10 +15,7 @@
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"importHelpers": true,
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"lib": ["es2020", "dom"],
|
||||
"module": "es2020",
|
||||
"moduleResolution": "node",
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
@ -30,10 +27,7 @@
|
||||
"sourceMap": true,
|
||||
"strict": false,
|
||||
"target": "es2017",
|
||||
"typeRoots": [
|
||||
"../../node_modules/@types",
|
||||
"node_modules/@types"
|
||||
]
|
||||
"typeRoots": ["../../node_modules/@types", "node_modules/@types"]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -25,4 +25,4 @@
|
||||
To create a production bundle, use `npm run build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "./base.css";
|
||||
@import './base.css';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
@ -21,6 +21,10 @@
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
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