mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +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:
|
||||
|
||||
@ -5,5 +5,3 @@
|
||||
tasks:
|
||||
- init: yarn
|
||||
command: yarn bootstrap --core
|
||||
|
||||
|
||||
|
||||
19
.vscode/launch.json
vendored
19
.vscode/launch.json
vendored
@ -3,21 +3,18 @@
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [{
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "official-storybook",
|
||||
"runtimeExecutable": "npm",
|
||||
"cwd": "${workspaceFolder}/examples/official-storybook",
|
||||
"runtimeArgs": [
|
||||
"run-script",
|
||||
"debug"
|
||||
],
|
||||
"runtimeArgs": ["run-script", "debug"],
|
||||
"port": 9229,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
]
|
||||
}, {
|
||||
"skipFiles": ["<node_internals>/**"]
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "cli html",
|
||||
@ -30,9 +27,7 @@
|
||||
"html"
|
||||
],
|
||||
"port": 9229,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
]
|
||||
"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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ 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) |
|
||||
|
||||
@ -94,7 +94,7 @@ 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) |
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
## Supported Versions
|
||||
|
||||
| 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"]
|
||||
}
|
||||
@ -69,7 +69,7 @@ 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 |
|
||||
| ------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| 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) |
|
||||
|
||||
@ -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 -->
|
||||
|
||||
@ -57,7 +57,6 @@ For development mode:
|
||||
|
||||
For production mode:
|
||||
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -181,7 +181,7 @@ 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 } }}` |
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -21,7 +21,7 @@ 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' }` |
|
||||
|
||||
@ -37,7 +37,7 @@ It includes additional customization via parameters. Below is a condensed exampl
|
||||
| `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 |
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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,12 +1,13 @@
|
||||
<!--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=">
|
||||
<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>
|
||||
<ul>
|
||||
@ -14,10 +15,11 @@
|
||||
<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,12 +1,12 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<title>Ng5test</title>
|
||||
<base href="/">
|
||||
<base href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<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>
|
||||
|
||||
@ -4,27 +4,40 @@
|
||||
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name"
|
||||
<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">
|
||||
[(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"
|
||||
<select
|
||||
class="form-control"
|
||||
id="power"
|
||||
required
|
||||
[(ngModel)]="model.power" name="power"
|
||||
#power="ngModel">
|
||||
[(ngModel)]="model.power"
|
||||
name="power"
|
||||
#power="ngModel"
|
||||
>
|
||||
<option></option>
|
||||
<option *ngFor="let pow of powers" [value]="pow">{{ pow }}</option>
|
||||
</select>
|
||||
@ -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>
|
||||
<br />
|
||||
<button class="btn btn-primary" (click)="submitted = false">Edit</button>
|
||||
</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: 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,6 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
@ -39,5 +38,4 @@
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</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,7 +1,7 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@ -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", {
|
||||
[
|
||||
"@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"]
|
||||
}
|
||||
@ -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 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"]
|
||||
}
|
||||
}
|
||||
@ -8,9 +8,6 @@
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
@ -9,18 +9,12 @@
|
||||
"declarationMap": true,
|
||||
"inlineSources": true,
|
||||
"types": [],
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2018"
|
||||
]
|
||||
"lib": ["dom", "es2018"]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"skipTemplateCodegen": true,
|
||||
"strictMetadataEmit": true,
|
||||
"enableResourceInlining": true
|
||||
},
|
||||
"exclude": [
|
||||
"src/test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
"exclude": ["src/test.ts", "**/*.spec.ts"]
|
||||
}
|
||||
|
||||
@ -8,9 +8,6 @@
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
{
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"include": ["./src"],
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
@ -11,9 +9,6 @@
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
{
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"include": ["./src"],
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
@ -11,9 +9,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"]
|
||||
}
|
||||
}
|
||||
@ -9,18 +9,12 @@
|
||||
"declarationMap": true,
|
||||
"inlineSources": true,
|
||||
"types": [],
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2018"
|
||||
]
|
||||
"lib": ["dom", "es2018"]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"skipTemplateCodegen": true,
|
||||
"strictMetadataEmit": true,
|
||||
"enableResourceInlining": true
|
||||
},
|
||||
"exclude": [
|
||||
"src/test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
"exclude": ["src/test.ts", "**/*.spec.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"]
|
||||
}
|
||||
}
|
||||
@ -4,18 +4,12 @@
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "CommonJS",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
],
|
||||
"lib": ["es2020", "dom"],
|
||||
"outDir": "dist",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
"resolveJsonModule": true,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*",
|
||||
"src/**/*.json"
|
||||
]
|
||||
"include": ["src/**/*", "src/**/*.json"]
|
||||
}
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest",
|
||||
"node"
|
||||
],
|
||||
"typeRoots": [
|
||||
"../../node_modules/@types",
|
||||
"node_modules/@types"
|
||||
],
|
||||
"types": ["webpack-env", "jest", "node"],
|
||||
"typeRoots": ["../../node_modules/@types", "node_modules/@types"],
|
||||
"allowJs": true
|
||||
},
|
||||
"include": [
|
||||
"**/*.test.ts",
|
||||
"**/*.d.ts",
|
||||
"setup-jest.ts"
|
||||
]
|
||||
"include": ["**/*.test.ts", "**/*.d.ts", "setup-jest.ts"]
|
||||
}
|
||||
|
||||
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