mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 05:41:06 +08:00
Merge pull request #18735 from storybookjs/future/improve-linting
Build: Lint css, html, json, md, mdx, yml files
This commit is contained in:
Norbert de Langen
GitHub
commit
06a88f8555
@ -117,7 +117,7 @@ module.exports = {
|
||||
shippedProposals: true,
|
||||
useBuiltIns: 'usage',
|
||||
targets: {
|
||||
node: '10',
|
||||
node: '14',
|
||||
},
|
||||
modules,
|
||||
corejs: '3',
|
||||
@ -149,7 +149,7 @@ module.exports = {
|
||||
shippedProposals: true,
|
||||
useBuiltIns: 'usage',
|
||||
targets: {
|
||||
node: '10',
|
||||
node: '14',
|
||||
},
|
||||
corejs: '3',
|
||||
modules: false,
|
||||
|
||||
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
|
||||
|
||||
@ -5,5 +5,3 @@
|
||||
tasks:
|
||||
- init: yarn
|
||||
command: yarn bootstrap --core
|
||||
|
||||
|
||||
|
||||
57
.vscode/launch.json
vendored
57
.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>/**"]
|
||||
}
|
||||
]
|
||||
}
|
||||
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
|
||||
|
||||
42
CHANGELOG.md
42
CHANGELOG.md
@ -2,33 +2,33 @@
|
||||
|
||||
#### 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)
|
||||
|
||||
|
||||
@ -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/**/*",
|
||||
|
||||
@ -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/**/*",
|
||||
|
||||
@ -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/**/*",
|
||||
|
||||
@ -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 }]
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 -->
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
@ -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} />
|
||||
```
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 -->
|
||||
|
||||
|
||||
@ -230,14 +230,15 @@ First, ensure that `transcludeMarkdown` is set to `true` in `main.js`:
|
||||
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
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
:root {
|
||||
background: rgba(232,232,232,1);
|
||||
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 11%,rgba(232,232,232,1) 100%);
|
||||
background: rgba(232, 232, 232, 1);
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
rgba(255, 255, 255, 1) 11%,
|
||||
rgba(232, 232, 232, 1) 100%
|
||||
);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -5,10 +5,7 @@
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
@ -11,14 +11,8 @@
|
||||
"skipLibCheck": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"types": [
|
||||
"jest",
|
||||
"node"
|
||||
],
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
],
|
||||
"types": ["jest", "node"],
|
||||
"lib": ["es2017", "dom"],
|
||||
"allowJs": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
@ -28,7 +22,5 @@
|
||||
"isolatedModules": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="logo192.png" />
|
||||
<!--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -22,13 +21,13 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<title>React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -38,6 +37,5 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
@ -11,16 +11,8 @@
|
||||
"skipLibCheck": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"types": [
|
||||
"jest",
|
||||
"node"
|
||||
],
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
"types": ["jest", "node"],
|
||||
"lib": ["es2017", "dom"]
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
"include": ["src"]
|
||||
}
|
||||
@ -6,8 +6,5 @@
|
||||
"skipLibCheck": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/*",
|
||||
".storybook/main.ts"
|
||||
]
|
||||
"include": ["src/*", ".storybook/main.ts"]
|
||||
}
|
||||
@ -1,16 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>ember-example</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
{{content-for "head"}}
|
||||
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-example.css">
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-example.css" />
|
||||
|
||||
{{content-for "head-footer"}}
|
||||
</head>
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -32,7 +33,7 @@ a {
|
||||
.main {
|
||||
padding: 15px;
|
||||
line-height: 1.4;
|
||||
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@ html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
{
|
||||
"presets": [
|
||||
"@babel/preset-typescript"
|
||||
]
|
||||
"presets": ["@babel/preset-typescript"]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,25 +1,25 @@
|
||||
.main {
|
||||
padding: 15px;
|
||||
line-height: 1.4;
|
||||
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
||||
background-color: #ffffff;
|
||||
padding: 15px;
|
||||
line-height: 1.4;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: rebeccapurple;
|
||||
color: rebeccapurple;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 256px;
|
||||
margin: 15px;
|
||||
width: 256px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f2f2;
|
||||
color: #3a3a3a;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f2f2;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
@ -4,14 +4,15 @@
|
||||
<p>
|
||||
We've added some basic stories inside the <code class="code">stories</code> directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
A story is a single state of one or more UI components. You can have as many stories as you
|
||||
want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample <a class="link" href="#" data-sb-kind="Demo" data-sb-story="button">stories</a>
|
||||
</p>
|
||||
<p><img src=logo.svg class="logo" /></p>
|
||||
<p><img src="logo.svg" class="logo" /></p>
|
||||
<p>
|
||||
Just like that, you can add your own snippets as stories.
|
||||
<br />
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -7,7 +7,5 @@
|
||||
Supports code snippets too:
|
||||
|
||||
```jsx
|
||||
<div>
|
||||
Foo
|
||||
</div>
|
||||
<div>Foo</div>
|
||||
```
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
{
|
||||
"plugins": [
|
||||
["@babel/plugin-transform-react-jsx", {
|
||||
"pragma": "h",
|
||||
"pragmaFrag": "Fragment"
|
||||
}]
|
||||
[
|
||||
"@babel/plugin-transform-react-jsx",
|
||||
{
|
||||
"pragma": "h",
|
||||
"pragmaFrag": "Fragment"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -8,8 +8,5 @@
|
||||
"skipLibCheck": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src/*",
|
||||
".storybook/main.ts"
|
||||
]
|
||||
"include": ["src/*", ".storybook/main.ts"]
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
{
|
||||
{
|
||||
"parameters": {
|
||||
"options": { "selectedPanel": "storybook/actions/panel" }
|
||||
},
|
||||
@ -44,7 +44,10 @@
|
||||
"parameters": {
|
||||
"server": { "id": "addons/actions/story6" },
|
||||
"actions": {
|
||||
"handles": [{ "click": "clicked", "contextmenu": "right clicked" }, { "clearOnStoryChange": false }]
|
||||
"handles": [
|
||||
{ "click": "clicked", "contextmenu": "right clicked" },
|
||||
{ "clearOnStoryChange": false }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
},
|
||||
"args": { "name": "John Doe", "color": "orangered" },
|
||||
"argTypes": {
|
||||
"color": { "control": { "type": "color"} }
|
||||
"color": { "control": { "type": "color" } }
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -32,12 +32,12 @@
|
||||
"price": 2.25,
|
||||
"colour": "deeppink",
|
||||
"today": "Jan 20 2017 GMT+0",
|
||||
"items": ["Laptop", "Book", "Whiskey"],
|
||||
"items": ["Laptop", "Book", "Whiskey"],
|
||||
"nice": true,
|
||||
"other": {"hair": "brown", "eyes": "blue"}
|
||||
"other": { "hair": "brown", "eyes": "blue" }
|
||||
},
|
||||
"argTypes": {
|
||||
"stock": { "control": { "type": "range", "min": 0, "max": 30, "step": 5} },
|
||||
"stock": { "control": { "type": "range", "min": 0, "max": 30, "step": 5 } },
|
||||
"fruit": {
|
||||
"options": ["apples", "bananas", "cherries"],
|
||||
"control": {
|
||||
@ -49,8 +49,8 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"colour": { "control": { "type": "color"} },
|
||||
"today": { "control": { "type": "date"} }
|
||||
"colour": { "control": { "type": "color" } },
|
||||
"today": { "control": { "type": "date" } }
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Head Src" ,
|
||||
"name": "Head Src",
|
||||
"parameters": {
|
||||
"server": { "id": "scripts/head_src" }
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Head Src" ,
|
||||
"name": "Head Src",
|
||||
"parameters": {
|
||||
"server": { "id": "styles/head_src" }
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,7 +8,5 @@
|
||||
"strict": true,
|
||||
"moduleResolution": "Node"
|
||||
},
|
||||
"include": [
|
||||
"src/*"
|
||||
]
|
||||
"include": ["src/*"]
|
||||
}
|
||||
@ -1,15 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong
|
||||
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
|
||||
JavaScript enabled. Please enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
@ -14,21 +14,8 @@
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
@ -11,17 +11,8 @@
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
"skipLibCheck": true,
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules"
|
||||
]
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["**/node_modules"]
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<title>demo2</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -8,10 +8,6 @@
|
||||
"experimentalDecorators": true,
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.stories.ts"
|
||||
]
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/**/*.stories.ts"]
|
||||
}
|
||||
@ -3,7 +3,5 @@
|
||||
"compilerOptions": {
|
||||
"rootDir": "."
|
||||
},
|
||||
"include": [
|
||||
"./*.ts"
|
||||
]
|
||||
"include": ["./*.ts"]
|
||||
}
|
||||
@ -8,9 +8,6 @@
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
@ -8,9 +8,6 @@
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
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