mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 06:41:17 +08:00
Merge branch 'next' into feat/addons-actions-tsup
# Conflicts: # code/addons/actions/package.json
This commit is contained in:
Norbert de Langen
commit
32e90fca19
@ -42,6 +42,19 @@ executors:
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
sb_playwright:
|
||||
parameters:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: mcr.microsoft.com/playwright:v1.25.1-focal
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
|
||||
orbs:
|
||||
git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3
|
||||
@ -257,7 +270,7 @@ jobs:
|
||||
# executor:
|
||||
# class: large
|
||||
# name: sb_cypress_8_node_14
|
||||
# parallelism: 2
|
||||
# parallelism: 8
|
||||
# steps:
|
||||
# - git-shallow-clone/checkout_advanced:
|
||||
# clone_options: '--depth 1 --verbose'
|
||||
@ -276,19 +289,14 @@ jobs:
|
||||
# no_output_timeout: 5m
|
||||
cra-bench:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_cypress_8_node_14
|
||||
class: medium+
|
||||
name: sb_playwright
|
||||
working_directory: /tmp/storybook
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: install playright
|
||||
command: |
|
||||
cd code
|
||||
npx playwright install
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: |
|
||||
@ -309,7 +317,14 @@ jobs:
|
||||
name: Run @storybook/bench on repro
|
||||
command: |
|
||||
cd ./cra-bench
|
||||
npx @storybook/bench@1.0.0--canary.11.52d1ee7.1 'echo noop' --label cra
|
||||
npx -p @storybook/bench@1.0.0--canary.12.7cccdee.0 sb-bench 'echo noop' --label cra
|
||||
- run:
|
||||
name: prep artifacts
|
||||
when: always
|
||||
command: tar cvzf /tmp/sb-bench.tar.gz ./cra-bench
|
||||
- store_artifacts:
|
||||
path: /tmp/sb-bench.tar.gz
|
||||
destination: sb-bench.tar.gz
|
||||
e2e-tests-pnp:
|
||||
executor:
|
||||
class: medium
|
||||
@ -462,7 +477,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 2
|
||||
parallelism: 7
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -482,7 +497,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 2
|
||||
parallelism: 7
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -498,7 +513,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 2
|
||||
parallelism: 7
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -518,7 +533,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 2
|
||||
parallelism: 7
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -534,7 +549,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 2
|
||||
parallelism: 7
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -547,9 +562,10 @@ jobs:
|
||||
- store_test_results:
|
||||
path: code/test-results
|
||||
e2e-sandboxes:
|
||||
docker:
|
||||
- image: mcr.microsoft.com/playwright:v1.24.0-focal
|
||||
parallelism: 2
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_playwright
|
||||
parallelism: 7
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
|
||||
5
.github/workflows/generate-repros-next.yml
vendored
5
.github/workflows/generate-repros-next.yml
vendored
@ -7,7 +7,7 @@ on:
|
||||
# To remove when the branch will be merged
|
||||
push:
|
||||
branches:
|
||||
- shilman/add-angular-repro-template
|
||||
- vite-frameworks-xyz
|
||||
|
||||
jobs:
|
||||
generate:
|
||||
@ -15,6 +15,9 @@ jobs:
|
||||
env:
|
||||
YARN_ENABLE_IMMUTABLE_INSTALLS: false
|
||||
steps:
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
- uses: actions/checkout@v2
|
||||
- name: Setup git user
|
||||
run: |
|
||||
|
||||
2
.github/workflows/tests-unit.yml
vendored
2
.github/workflows/tests-unit.yml
vendored
@ -15,7 +15,7 @@ jobs:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
os: [ubuntu-latest]
|
||||
node_version: [12, 14, 16]
|
||||
node_version: [14, 16]
|
||||
include:
|
||||
- os: macos-latest
|
||||
node_version: 16
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -9,7 +9,6 @@ dist
|
||||
junit.xml
|
||||
/repros
|
||||
/sandbox
|
||||
/built-sandboxes
|
||||
.verdaccio-cache
|
||||
|
||||
# Yarn stuff
|
||||
|
||||
14
.gitpod.yml
14
.gitpod.yml
@ -3,5 +3,15 @@
|
||||
# and commit this file to your remote git repository to share the goodness with others.
|
||||
|
||||
tasks:
|
||||
- init: yarn
|
||||
command: yarn bootstrap --core
|
||||
- name: Scripts
|
||||
init: |
|
||||
cd scripts
|
||||
yarn install
|
||||
gp sync-done scripts
|
||||
|
||||
- name: Code
|
||||
init: |
|
||||
gp sync-await scripts # wait for the above 'init' to finish
|
||||
cd code
|
||||
yarn install
|
||||
yarn bootstrap --core
|
||||
|
||||
145
CHANGELOG.md
145
CHANGELOG.md
@ -1,3 +1,148 @@
|
||||
## 7.0.0-alpha.31 (September 7, 2022)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Doc blocks: Update ArgTable Reset button to use IconButton [#19052](https://github.com/storybooks/storybook/pull/19052)
|
||||
- UI: Update a handful of icons [#19084](https://github.com/storybooks/storybook/pull/19084)
|
||||
- Build: Update to latest nx [#19078](https://github.com/storybooks/storybook/pull/19078)
|
||||
- Vite: Fix plugin types [#19095](https://github.com/storybooks/storybook/pull/19095)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Chore: Remove unused dependencies in /lib [#19100](https://github.com/storybooks/storybook/pull/19100)
|
||||
|
||||
## 7.0.0-alpha.30 (September 6, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- CLI: Fix include rendererAssets in npm bundle [#19115](https://github.com/storybooks/storybook/pull/19115)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- CLI: remove outdated comment in Angular starter [#19097](https://github.com/storybooks/storybook/pull/19097)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Remove deprecated `stable` dependency [#19103](https://github.com/storybooks/storybook/pull/19103)
|
||||
- Svelte: Update sveltedoc dependencies [#19111](https://github.com/storybooks/storybook/pull/19111)
|
||||
- Deps: Remove core-js from most packages [#19098](https://github.com/storybooks/storybook/pull/19098)
|
||||
- Deps: Upgrade react-element-to-jsx-string and react-inspector for React 18 [#19104](https://github.com/storybooks/storybook/pull/19104)
|
||||
|
||||
## 7.0.0-alpha.29 (September 2, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- CLI/Vite: Don't add babel dependencies during init [#19088](https://github.com/storybooks/storybook/pull/19088)
|
||||
- CLI: Fix sb init to use renderer assets instead of frameworks [#19091](https://github.com/storybooks/storybook/pull/19091)
|
||||
- Core: Ensure if a docs render is torndown during preparation, it throws [#19071](https://github.com/storybooks/storybook/pull/19071)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Addon-viewport: Move stories into addon [#19086](https://github.com/storybooks/storybook/pull/19086)
|
||||
- Addon-backgrounds: Move stories into addon [#19085](https://github.com/storybooks/storybook/pull/19085)
|
||||
- Addon-actions: Move stories into addon [#19082](https://github.com/storybooks/storybook/pull/19082)
|
||||
- Build: Exit yarn bootstrap with nonzero code if failed [#19089](https://github.com/storybooks/storybook/pull/19089)
|
||||
- Vite: cleanup custom plugins [#19087](https://github.com/storybooks/storybook/pull/19087)
|
||||
- Build: Prefix generic addon stories in sandbox storybooks [#19092](https://github.com/storybooks/storybook/pull/19092)
|
||||
|
||||
## 7.0.0-alpha.28 (September 2, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- Vite: Automatically use vite.config.js [#19026](https://github.com/storybooks/storybook/pull/19026)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- CLI: Fix race condition in sb init [#19083](https://github.com/storybooks/storybook/pull/19083)
|
||||
- Vite: Fix framework option checks, and SSv6 [#19062](https://github.com/storybooks/storybook/pull/19062)
|
||||
- Core: Fix WebProjectAnnotations export in preview-web for back-compat [#19048](https://github.com/storybooks/storybook/pull/19048)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Update to new TS reference format (?) [#19072](https://github.com/storybooks/storybook/pull/19072)
|
||||
- Build: Conditionally force vite rebuilds in sandbox [#19063](https://github.com/storybooks/storybook/pull/19063)
|
||||
- Build: Fix CRA bench [#19066](https://github.com/storybooks/storybook/pull/19066)
|
||||
|
||||
## 7.0.0-alpha.27 (August 31, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- Vite: Set `resolve.preserveSymlinks` based on env vars [#19039](https://github.com/storybooks/storybook/pull/19039)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Core: Restore `/preview` etc package exports; return unresolved path from presets. [#19045](https://github.com/storybooks/storybook/pull/19045)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Core: Add previewHead and previewBody to StorybookConfig interface [#19047](https://github.com/storybooks/storybook/pull/19047)
|
||||
- Build: Fix the sb-bench CI step [#19029](https://github.com/storybooks/storybook/pull/19029)
|
||||
- Remove sandbox from `.ignore` [#19040](https://github.com/storybooks/storybook/pull/19040)
|
||||
- Build: Use new test runner with builtin junit [#19028](https://github.com/storybooks/storybook/pull/19028)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Vite: Clean up framework dependencies / unused files [#19035](https://github.com/storybooks/storybook/pull/19035)
|
||||
|
||||
## 7.0.0-alpha.26 (August 26, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- CLI: Add react, vue3, and svelte vite to new-frameworks automigration [#19016](https://github.com/storybooks/storybook/pull/19016)
|
||||
- Svelte: Add svelte-vite framework [#18978](https://github.com/storybooks/storybook/pull/18978)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Core: Fix default story glob [#19018](https://github.com/storybooks/storybook/pull/19018)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- React-vite: update/cleanup dependencies [#19025](https://github.com/storybooks/storybook/pull/19025)
|
||||
- Remove babel-loader from core-common [#19022](https://github.com/storybooks/storybook/pull/19022)
|
||||
|
||||
## 7.0.0-alpha.25 (August 25, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- Vite: Add builder-vite, react-vite, and vue3-vite [#19007](https://github.com/storybooks/storybook/pull/19007)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- CI: use runner with playwright installed for cra_bench [#18951](https://github.com/storybooks/storybook/pull/18951)
|
||||
- Replace rollup-plugin-node-polyfills to analogs [#18975](https://github.com/storybooks/storybook/pull/18975)
|
||||
|
||||
## 7.0.0-alpha.24 (August 24, 2022)
|
||||
|
||||
#### Breaking changes
|
||||
|
||||
- Preview: Rename Storybook DOM root IDs [#10638](https://github.com/storybooks/storybook/pull/10638)
|
||||
|
||||
#### Features
|
||||
|
||||
- Interactions: Add `step` function and support multiple levels of nesting [#18555](https://github.com/storybooks/storybook/pull/18555)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix canvas support expand code for non-story [#18808](https://github.com/storybooks/storybook/pull/18808)
|
||||
- Components: Avoid including line numbers when copying the code [#18725](https://github.com/storybooks/storybook/pull/18725)
|
||||
- Vue: Fix enum check in extractArgTypes [#18959](https://github.com/storybooks/storybook/pull/18959)
|
||||
- Core: Fix frameworkOptions preset [#18979](https://github.com/storybooks/storybook/pull/18979)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Addon-a11y: Remove achromatomaly color filter [#18852](https://github.com/storybooks/storybook/pull/18852)
|
||||
- Build: Use ts-up to build core-webpack [#18912](https://github.com/storybooks/storybook/pull/18912)
|
||||
- Build: Use ts-up to build addon-viewport [#18943](https://github.com/storybooks/storybook/pull/18943)
|
||||
- Build: Improve generate-repros-next [#19001](https://github.com/storybooks/storybook/pull/19001)
|
||||
- Examples: Remove refs in angular example [#18986](https://github.com/storybooks/storybook/pull/18986)
|
||||
- Build: Use ts-up to build client-logger [#18893](https://github.com/storybooks/storybook/pull/18893)
|
||||
- Generate-repros: Run local registry on `--local-registry` option [#18997](https://github.com/storybooks/storybook/pull/18997)
|
||||
- Build: Remove unused bootstrap --cleanup [#18981](https://github.com/storybooks/storybook/pull/18981)
|
||||
- CLI: Fix local repro publishing [#18977](https://github.com/storybooks/storybook/pull/18977)
|
||||
- Build: Run verdaccio on 6001 to enable web UI [#18983](https://github.com/storybooks/storybook/pull/18983)
|
||||
- CLI: determine whether to add interactive stories from `renderer` rather than `framework` [#18968](https://github.com/storybooks/storybook/pull/18968)
|
||||
- CLI: Auto-accept migrations when running `generate-repros-next` [#18969](https://github.com/storybooks/storybook/pull/18969)
|
||||
|
||||
## 7.0.0-alpha.23 (August 18, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
60
MIGRATION.md
60
MIGRATION.md
@ -3,6 +3,8 @@
|
||||
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
|
||||
- [Alpha release notes](#alpha-release-notes)
|
||||
- [Breaking changes](#breaking-changes)
|
||||
- [`Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`](#story-type-change-to-storyfn-and-the-new-story-type-now-refers-to-storyobj)
|
||||
- [Change of root html IDs](#change-of-root-html-ids)
|
||||
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
|
||||
- [Modern browser support](#modern-browser-support)
|
||||
- [No more configuration for manager](#no-more-configuration-for-manager)
|
||||
@ -16,6 +18,7 @@
|
||||
- [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default)
|
||||
- [Babel mode v7 by default](#babel-mode-v7-by-default)
|
||||
- [7.0 feature flags removed](#70-feature-flags-removed)
|
||||
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
|
||||
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
|
||||
- [Icons API changed](#icons-api-changed)
|
||||
- [Docs Changes](#docs-changes)
|
||||
@ -235,6 +238,50 @@ In the meantime, these migration notes are the best available documentation on t
|
||||
|
||||
### Breaking changes
|
||||
|
||||
#### `Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`
|
||||
|
||||
In 6.x you were able to do this:
|
||||
|
||||
```js
|
||||
import type { Story } from '@storybook/react';
|
||||
|
||||
export const MyStory: Story = () => <div />;
|
||||
```
|
||||
|
||||
But this will produce an error in 7.0 because `Story` is now a type that refers to the `StoryObj` type.
|
||||
You must now use the new `StoryFn` type:
|
||||
|
||||
```js
|
||||
import type { StoryFn } from '@storybook/react';
|
||||
|
||||
export const MyStory: StoryFn = () => <div />;
|
||||
```
|
||||
|
||||
This change was done to improve the experience of writing CSF3 stories, which is the recommended way of writing stories in 7.0:
|
||||
|
||||
```js
|
||||
import type { Story } from '@storybook/react';
|
||||
import { Button, ButtonProps } from './Button';
|
||||
|
||||
export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Primary: Story<ButtonProps> = {
|
||||
variant: 'primary',
|
||||
};
|
||||
```
|
||||
|
||||
If you want to be explicit, you can also import `StoryObj` instead of `Story`, they are the same type.
|
||||
|
||||
For Storybook for react users: We also changed `ComponentStory` to refer to `ComponentStoryObj` instead of `ComponentStoryFn`, so if you were using `ComponentStory` you should now import/use `ComponentStoryFn` instead.
|
||||
|
||||
You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
|
||||
|
||||
#### Change of root html IDs
|
||||
|
||||
The root ID unto which storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code.
|
||||
|
||||
#### No more default export from `@storybook/addons`
|
||||
|
||||
The default export from `@storybook/addons` has been removed. Please use the named exports instead:
|
||||
@ -384,10 +431,13 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
|
||||
- `@storybook/html-webpack5`
|
||||
- `@storybook/preact-webpack5`
|
||||
- `@storybook/react-webpack5`
|
||||
- `@storybook/react-vite`
|
||||
- `@storybook/server-webpack5`
|
||||
- `@storybook/svelte-webpack5`
|
||||
- `@storybook/svelte-vite`
|
||||
- `@storybook/vue-webpack5`
|
||||
- `@storybook/vue3-webpack5`
|
||||
- `@storybook/vue3-vite`
|
||||
- `@storybook/web-components-webpack5`
|
||||
|
||||
We will be expanding this list over the course of the 7.0 development cycle. More info on the rationale here: [Frameworks RFC](https://www.notion.so/chromatic-ui/Frameworks-RFC-89f8aafe3f0941ceb4c24683859ed65c).
|
||||
@ -468,13 +518,19 @@ In 7.0 we've removed the following feature flags:
|
||||
| `emotionAlias` | This flag is no longer needed and should be deleted. |
|
||||
| `breakingChangesV7` | This flag is no longer needed and should be deleted. |
|
||||
|
||||
#### Vite builder uses vite config automatically
|
||||
|
||||
When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0.
|
||||
Some settings will be overridden by storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
|
||||
If you were using `viteFinal` in 6.5 to simply merge in your project's standard vite config, you can now remove it.
|
||||
|
||||
#### Removed docs.getContainer and getPage parameters
|
||||
|
||||
It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
|
||||
|
||||
#### Icons API changed
|
||||
|
||||
For addon authors who use the `Icons` component, its API has been udpated in Storybook 7.
|
||||
For addon authors who use the `Icons` component, its API has been updated in Storybook 7.
|
||||
|
||||
```diff
|
||||
export interface IconsProps extends ComponentProps<typeof Svg> {
|
||||
@ -2152,7 +2208,7 @@ To configure a11y now, you have to specify configuration using story parameters,
|
||||
```js
|
||||
export const parameters = {
|
||||
a11y: {
|
||||
element: '#root',
|
||||
element: "#storybook-root",
|
||||
config: {},
|
||||
options: {},
|
||||
manual: true,
|
||||
|
||||
14
README.md
14
README.md
@ -73,7 +73,7 @@ It allows you to browse a component library, view the different states of each c
|
||||
|
||||
## Getting Started
|
||||
|
||||
Visit [Storybook's website](https://storybook.js.org) to learn more about Storybook, and to get started.
|
||||
Visit [Storybook's website](https://storybook.js.org) to learn more about Storybook and to get started.
|
||||
|
||||
### Documentation
|
||||
|
||||
@ -127,12 +127,12 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
| [graphql](https://github.com/storybookjs/addon-graphql) | Query a GraphQL server within Storybook stories |
|
||||
| [jest](code/addons/jest/) | View the results of components' unit tests in Storybook |
|
||||
| [links](code/addons/links/) | Create links between stories |
|
||||
| [measure](code/addons/measure/) | Visually inspect the layout and box model within the Storybook UI |
|
||||
| [outline](code/addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI |
|
||||
| [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params |
|
||||
| [storyshots](code/addons/storyshots/) | Snapshot testing for components in Storybook |
|
||||
| [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
| [outline](code/addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI |
|
||||
| [measure](code/addons/measure/) | Visually inspect the layout and box model within the Storybook UI |
|
||||
|
||||
See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
@ -140,11 +140,11 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr
|
||||
|
||||
| Addons | |
|
||||
| ---------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information |
|
||||
| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
|
||||
In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
|
||||
|
||||
@ -177,7 +177,7 @@ We welcome contributions to Storybook!
|
||||
|
||||
- 📥 Pull requests and 🌟 Stars are always welcome.
|
||||
- Read our [contributing guide](CONTRIBUTING.md) to get started,
|
||||
or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you
|
||||
or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you.
|
||||
|
||||
Looking for a first issue to tackle?
|
||||
|
||||
|
||||
@ -101,5 +101,11 @@ module.exports = {
|
||||
'jest/no-test-callback': 'off', // These aren't jest tests
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/builder-vite/input/iframe.html'],
|
||||
rules: {
|
||||
'no-undef': 'off', // ignore "window" undef errors
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
3
code/.vscode/settings.json
vendored
Normal file
3
code/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { DocgenButton } from '../components/DocgenButton';
|
||||
import FlowTypeButton from '../components/FlowTypeButton';
|
||||
@ -13,19 +12,19 @@ storiesOf('Addons|Info.React Docgen', module)
|
||||
'Comments from PropType declarations',
|
||||
withInfo(
|
||||
'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
|
||||
)(() => <DocgenButton onClick={action('clicked')} label="Docgen Button" />)
|
||||
)(() => <DocgenButton label="Docgen Button" />)
|
||||
)
|
||||
.add(
|
||||
'Comments from Flow declarations',
|
||||
withInfo(
|
||||
'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
|
||||
)(() => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />)
|
||||
)(() => <FlowTypeButton label="Flow Typed Button" />)
|
||||
)
|
||||
.add(
|
||||
'Comments from component declaration',
|
||||
withInfo(
|
||||
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
|
||||
)(() => <BaseButton onClick={action('clicked')} label="Button" />)
|
||||
)(() => <BaseButton label="Button" />)
|
||||
);
|
||||
|
||||
const markdownDescription = `
|
||||
@ -41,7 +40,7 @@ Maybe include a [link](http://storybook.js.org) to your project as well.
|
||||
|
||||
storiesOf('Addons|Info.Markdown', module).add(
|
||||
'Displays Markdown in description',
|
||||
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
|
||||
withInfo(markdownDescription)(() => <BaseButton label="Button" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.inline', module).add(
|
||||
|
||||
@ -175,7 +175,7 @@ export default {
|
||||
parameters: {
|
||||
a11y: {
|
||||
// optional selector which element to inspect
|
||||
element: '#root',
|
||||
element: '#storybook-root',
|
||||
// axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
|
||||
config: {},
|
||||
// axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -41,7 +41,7 @@
|
||||
"import": "./dist/preview.mjs",
|
||||
"types": "./dist/preview.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -59,20 +59,19 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/channels": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/channels": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -105,7 +104,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -36,7 +36,7 @@ const run = async (storyId: string) => {
|
||||
channel.emit(EVENTS.RUNNING);
|
||||
const axe = (await import('axe-core')).default;
|
||||
|
||||
const { element = '#root', config, options = {} } = input;
|
||||
const { element = '#storybook-root', config, options = {} } = input;
|
||||
const htmlElement = document.querySelector(element);
|
||||
axe.reset();
|
||||
if (config) {
|
||||
|
||||
@ -52,13 +52,6 @@ export const Filters: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
||||
values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
|
||||
/>
|
||||
</filter>
|
||||
<filter id="achromatomaly">
|
||||
<feColorMatrix
|
||||
in="SourceGraphic"
|
||||
type="matrix"
|
||||
values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -28,7 +28,9 @@ const defaultProviderValue = {
|
||||
|
||||
describe('<HighlightToggle />', () => {
|
||||
it('should render', () => {
|
||||
const { container } = render(<HighlightToggle elementsToHighlight={[nodeResult('#root')]} />);
|
||||
const { container } = render(
|
||||
<HighlightToggle elementsToHighlight={[nodeResult('#storybook-root')]} />
|
||||
);
|
||||
expect(container.firstChild).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -37,10 +39,10 @@ describe('<HighlightToggle />', () => {
|
||||
<A11yContext.Provider
|
||||
value={{
|
||||
...defaultProviderValue,
|
||||
highlighted: ['#root'],
|
||||
highlighted: ['#storybook-root'],
|
||||
}}
|
||||
>
|
||||
<HighlightToggle elementsToHighlight={[nodeResult('#root')]} />
|
||||
<HighlightToggle elementsToHighlight={[nodeResult('#storybook-root')]} />
|
||||
</A11yContext.Provider>
|
||||
);
|
||||
const checkbox = getByRole('checkbox') as HTMLInputElement;
|
||||
@ -52,10 +54,12 @@ describe('<HighlightToggle />', () => {
|
||||
<A11yContext.Provider
|
||||
value={{
|
||||
...defaultProviderValue,
|
||||
highlighted: ['#root'],
|
||||
highlighted: ['#storybook-root'],
|
||||
}}
|
||||
>
|
||||
<HighlightToggle elementsToHighlight={[nodeResult('#root'), nodeResult('#root1')]} />
|
||||
<HighlightToggle
|
||||
elementsToHighlight={[nodeResult('#storybook-root'), nodeResult('#storybook-root1')]}
|
||||
/>
|
||||
</A11yContext.Provider>
|
||||
);
|
||||
const checkbox = getByRole('checkbox') as HTMLInputElement;
|
||||
@ -64,10 +68,10 @@ describe('<HighlightToggle />', () => {
|
||||
|
||||
describe('toggleHighlight', () => {
|
||||
it.each`
|
||||
highlighted | elementsToHighlight | expected
|
||||
${[]} | ${['#root']} | ${true}
|
||||
${['#root']} | ${['#root']} | ${false}
|
||||
${['#root']} | ${['#root', '#root1']} | ${true}
|
||||
highlighted | elementsToHighlight | expected
|
||||
${[]} | ${['#storybook-root']} | ${true}
|
||||
${['#storybook-root']} | ${['#storybook-root']} | ${false}
|
||||
${['#storybook-root']} | ${['#storybook-root', '#storybook-root1']} | ${true}
|
||||
`(
|
||||
'should be triggered with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight',
|
||||
({ highlighted, elementsToHighlight, expected }) => {
|
||||
|
||||
@ -19,7 +19,6 @@ export const baseList = [
|
||||
{ name: 'protanopia', percentage: 0.59 },
|
||||
{ name: 'tritanomaly', percentage: 0.01 },
|
||||
{ name: 'tritanopia', percentage: 0.016 },
|
||||
{ name: 'achromatomaly', percentage: 0.00001 },
|
||||
{ name: 'achromatopsia', percentage: 0.0001 },
|
||||
{ name: 'grayscale' },
|
||||
] as Option[];
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -55,23 +55,22 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"dequal": "^2.0.2",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
"polished": "^4.2.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-inspector": "^5.1.0",
|
||||
"react-inspector": "^6.0.0",
|
||||
"telejson": "^6.0.8",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"util-deprecate": "^1.0.2",
|
||||
@ -103,7 +102,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { FC, Fragment } from 'react';
|
||||
import { styled, withTheme } from '@storybook/theming';
|
||||
import type { Theme } from '@storybook/theming';
|
||||
|
||||
import Inspector from 'react-inspector';
|
||||
import { Inspector } from 'react-inspector';
|
||||
import { ActionBar, ScrollArea } from '@storybook/components';
|
||||
|
||||
import { Action, InspectorContainer, Counter } from './style';
|
||||
@ -27,7 +27,7 @@ interface InspectorProps {
|
||||
}
|
||||
|
||||
const ThemedInspector = withTheme(({ theme, ...props }: InspectorProps) => (
|
||||
<Inspector theme={theme.addonActionsTheme || 'chromeLight'} {...props} />
|
||||
<Inspector theme={theme.addonActionsTheme || 'chromeLight'} table={false} {...props} />
|
||||
));
|
||||
|
||||
interface ActionLoggerProps {
|
||||
|
||||
@ -20,7 +20,7 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>
|
||||
const serializeArg = <T>(a: T) => {
|
||||
if (isReactSyntheticEvent(a)) {
|
||||
const e: SyntheticEvent = Object.create(
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
a.constructor.prototype,
|
||||
Object.getOwnPropertyDescriptors(a)
|
||||
);
|
||||
|
||||
@ -43,7 +43,7 @@ const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[])
|
||||
|
||||
const applyEventHandlers = deprecate(
|
||||
(actionsFn: any, ...handles: any[]) => {
|
||||
const root = document && document.getElementById('root');
|
||||
const root = document && document.getElementById('storybook-root');
|
||||
useEffect(() => {
|
||||
if (root != null) {
|
||||
const handlers = createHandlers(actionsFn, ...handles);
|
||||
|
||||
1
code/addons/actions/src/typings.d.ts
vendored
1
code/addons/actions/src/typings.d.ts
vendored
@ -1,4 +1,3 @@
|
||||
// TODO: following packages need definition files or a TS migration
|
||||
declare module 'global';
|
||||
declare module 'react-inspector';
|
||||
declare module 'uuid-browser/v4';
|
||||
|
||||
26
code/addons/actions/template/stories/argtype.stories.ts
Normal file
26
code/addons/actions/template/stories/argtype.stories.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import globalThis from 'global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
children: 'Click Me!',
|
||||
},
|
||||
argTypes: {
|
||||
onClick: {},
|
||||
},
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
actions: { argTypesRegex: '^on.*' },
|
||||
},
|
||||
};
|
||||
|
||||
export const String = {
|
||||
argTypes: {
|
||||
onClick: { action: 'clicked!' },
|
||||
},
|
||||
};
|
||||
export const Boolean = {
|
||||
argTypes: {
|
||||
onClick: { action: true },
|
||||
},
|
||||
};
|
||||
99
code/addons/actions/template/stories/basics.stories.ts
Normal file
99
code/addons/actions/template/stories/basics.stories.ts
Normal file
@ -0,0 +1,99 @@
|
||||
import globalThis from 'global';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
children: 'Click Me!',
|
||||
},
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic = {
|
||||
args: { onClick: action('onClick') },
|
||||
};
|
||||
|
||||
export const TypeString = {
|
||||
args: { onClick: () => action('onClick')('string') },
|
||||
};
|
||||
export const TypeBoolean = {
|
||||
args: { onClick: () => action('onClick')(false) },
|
||||
};
|
||||
export const TypeObject = {
|
||||
args: { onClick: () => action('onClick')({}) },
|
||||
};
|
||||
export const TypeNull = {
|
||||
args: { onClick: () => action('onClick')(null) },
|
||||
};
|
||||
export const TypeUndefined = {
|
||||
args: { onClick: () => action('onClick')(undefined) },
|
||||
};
|
||||
export const TypeNaN = {
|
||||
args: { onClick: () => action('onClick')(NaN) },
|
||||
};
|
||||
export const TypeInfinity = {
|
||||
args: { onClick: () => action('onClick')(Infinity) },
|
||||
};
|
||||
export const TypeMinusInfinity = {
|
||||
args: { onClick: () => action('onClick')(-Infinity) },
|
||||
};
|
||||
export const TypeNumber = {
|
||||
args: { onClick: () => action('onClick')(10000) },
|
||||
};
|
||||
export const TypeGlobal = {
|
||||
args: { onClick: () => action('onClick')(globalThis) },
|
||||
};
|
||||
export const TypeSymbol = {
|
||||
args: { onClick: () => action('onClick')(Symbol('MySymbol')) },
|
||||
};
|
||||
export const TypeRegExp = {
|
||||
args: { onClick: () => action('onClick')(new RegExp('MyRegExp')) },
|
||||
};
|
||||
export const TypeArray = {
|
||||
args: { onClick: () => action('onClick')(['a', 'b', 'c']) },
|
||||
};
|
||||
export const TypeClass = {
|
||||
args: { onClick: () => action('onClick')(class MyClass {}) },
|
||||
};
|
||||
export const TypeFunction = {
|
||||
args: { onClick: () => action('onClick')(function MyFunction() {}) },
|
||||
};
|
||||
export const TypeMultiple = {
|
||||
args: { onClick: () => action('onClick')('string', true, false, null, undefined, [], {}) },
|
||||
};
|
||||
|
||||
export const Cyclical = {
|
||||
args: {
|
||||
onClick: () =>
|
||||
action('onClick')(
|
||||
(() => {
|
||||
const cyclical: Record<string, any> = {};
|
||||
cyclical.cyclical = cyclical;
|
||||
return cyclical;
|
||||
})()
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const Reserved = {
|
||||
args: { onClick: action('delete') },
|
||||
};
|
||||
|
||||
export const OptionPersist = {
|
||||
args: { onClick: action('onClick', { clearOnStoryChange: false }) },
|
||||
};
|
||||
export const OptionDepth = {
|
||||
args: { onClick: action('onClick', { depth: 2 }) },
|
||||
};
|
||||
|
||||
export const Disabled = {
|
||||
args: { onClick: action('onCLick') },
|
||||
parameters: {
|
||||
actions: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,14 +0,0 @@
|
||||
import globalThis from 'global';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
children: 'Click Me!',
|
||||
},
|
||||
};
|
||||
|
||||
export const BasicExample = {
|
||||
args: { onClick: action('hello-world') },
|
||||
};
|
||||
36
code/addons/actions/template/stories/configs.stories.ts
Normal file
36
code/addons/actions/template/stories/configs.stories.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import globalThis from 'global';
|
||||
|
||||
import { actions, configureActions } from '@storybook/addon-actions';
|
||||
|
||||
const configs = actions('actionA', 'actionB', 'actionC');
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
children: 'Click Me!',
|
||||
},
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const ActionA = {
|
||||
args: { onClick: configs.actionA },
|
||||
};
|
||||
export const ActionB = {
|
||||
args: { onClick: configs.actionB },
|
||||
};
|
||||
export const ActionC = {
|
||||
args: { onClick: configs.actionC },
|
||||
};
|
||||
|
||||
export const ConfigureActions = {
|
||||
args: { onClick: configs.actionA },
|
||||
decorators: [
|
||||
(storyFn: any) => {
|
||||
configureActions({ depth: 2 });
|
||||
|
||||
return storyFn();
|
||||
},
|
||||
],
|
||||
};
|
||||
17
code/addons/actions/template/stories/parameters.stories.ts
Normal file
17
code/addons/actions/template/stories/parameters.stories.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import globalThis from 'global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
children: 'Click Me!',
|
||||
},
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic = {
|
||||
parameters: {
|
||||
handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
|
||||
},
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,7 +41,7 @@
|
||||
"import": "./dist/preview.mjs",
|
||||
"types": "./dist/preview.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -59,17 +59,16 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"ts-dedent": "^2.0.0",
|
||||
@ -100,7 +99,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
51
code/addons/backgrounds/template/stories/grid.stories.ts
Normal file
51
code/addons/backgrounds/template/stories/grid.stories.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import globalThis from 'global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
children: 'Click Me!',
|
||||
},
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
grid: {
|
||||
cellSize: 10,
|
||||
cellAmount: 4,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic = {
|
||||
parameters: {},
|
||||
};
|
||||
|
||||
export const Custom = {
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
grid: {
|
||||
cellSize: 100,
|
||||
cellAmount: 10,
|
||||
opacity: 0.8,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Grid should have an offset of 0 when in fullscreen
|
||||
export const Fullscreen = {
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled = {
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
grid: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -36,7 +36,7 @@
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -54,20 +54,19 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/blocks": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/blocks": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-common": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@storybook/store": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/node-logger": "7.0.0-alpha.31",
|
||||
"@storybook/store": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -93,7 +92,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
2
code/addons/docs/angular/index.js
vendored
2
code/addons/docs/angular/index.js
vendored
@ -2,6 +2,6 @@
|
||||
/* global window */
|
||||
|
||||
export const setCompodocJson = (compodocJson) => {
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -46,31 +46,30 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/blocks": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/blocks": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-common": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.23",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.23",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.31",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.31",
|
||||
"@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@storybook/postinstall": "7.0.0-alpha.23",
|
||||
"@storybook/preview-web": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@storybook/store": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"@storybook/node-logger": "7.0.0-alpha.31",
|
||||
"@storybook/postinstall": "7.0.0-alpha.31",
|
||||
"@storybook/preview-web": "7.0.0-alpha.31",
|
||||
"@storybook/source-loader": "7.0.0-alpha.31",
|
||||
"@storybook/store": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"babel-loader": "^8.2.5",
|
||||
"core-js": "^3.8.2",
|
||||
"dequal": "^2.0.2",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
@ -104,7 +103,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
@ -145,7 +145,7 @@ export async function webpack(
|
||||
export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
|
||||
const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
|
||||
let code = (await fs.readFile(fileName, 'utf-8')).toString();
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
const { compile } = global.FEATURES?.previewMdx2
|
||||
? await import('@storybook/mdx2-csf')
|
||||
: await import('@storybook/mdx1-csf');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,28 +30,27 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-measure": "7.0.0-alpha.23",
|
||||
"@storybook/addon-outline": "7.0.0-alpha.23",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.31",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.31",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
||||
"@storybook/addon-measure": "7.0.0-alpha.31",
|
||||
"@storybook/addon-outline": "7.0.0-alpha.31",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.31",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.31",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/core-common": "7.0.0-alpha.31",
|
||||
"@storybook/node-logger": "7.0.0-alpha.31",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "7.0.0-alpha.23",
|
||||
"@storybook/vue": "7.0.0-alpha.31",
|
||||
"@types/jest": "^26.0.16",
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
@ -99,5 +98,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a"
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -34,12 +34,11 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -49,7 +48,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
|
||||
@ -1 +1 @@
|
||||
import './dist/esm/manager';
|
||||
import './dist/manager';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -21,9 +21,32 @@
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./dist/index.js",
|
||||
"import": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts"
|
||||
},
|
||||
"./manager": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
},
|
||||
"./preview": {
|
||||
"require": "./dist/preset/preview.js",
|
||||
"import": "./dist/preset/preview.mjs",
|
||||
"types": "./dist/preset/preview.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -32,20 +55,19 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-common": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/instrumenter": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/instrumenter": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.2.2",
|
||||
@ -72,7 +94,14 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"bundler": {
|
||||
"entries": [
|
||||
"./src/index.ts",
|
||||
"./src/manager.tsx",
|
||||
"./src/preset/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './dist/esm/preset/preview';
|
||||
export * from './dist/preset/preview';
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/* eslint-disable jest/no-standalone-expect */
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
@ -48,7 +47,7 @@ export default {
|
||||
fileName: 'addon-interactions.stories.tsx',
|
||||
hasException: false,
|
||||
isPlaying: false,
|
||||
onScrollToEnd: action('onScrollToEnd'),
|
||||
onScrollToEnd: () => {},
|
||||
endRef: null,
|
||||
// prop for the AddonPanel used as wrapper of Panel
|
||||
active: true,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -38,7 +38,7 @@
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -56,16 +56,15 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
"upath": "^1.2.0"
|
||||
@ -95,7 +94,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||
|
||||
@ -27,7 +27,7 @@ describe('defineJestParameter', () => {
|
||||
});
|
||||
|
||||
test('returns null if filename is a module ID that cannot be inferred from', () => {
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
expect(defineJestParameter({ fileName: 1234 })).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,7 +42,7 @@
|
||||
"import": "./dist/react/index.mjs",
|
||||
"types": "./dist/react.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -60,15 +60,14 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/router": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/router": "7.0.0-alpha.31",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -99,7 +98,7 @@
|
||||
"./src/react/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||
|
||||
@ -14,7 +14,7 @@ jest.mock('global', () => ({
|
||||
search: 'search',
|
||||
},
|
||||
},
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
window: global,
|
||||
__STORYBOOK_STORY_STORE__: {
|
||||
getSelection: jest.fn(() => ({ id: 1 })),
|
||||
|
||||
@ -5,9 +5,9 @@ import { linkTo, hrefTo } from './utils';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
jest.mock('global', () => ({
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
document: global.document,
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
window: global,
|
||||
}));
|
||||
|
||||
|
||||
@ -36,9 +36,9 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
|
||||
return new Promise((resolve) => {
|
||||
const { location } = document;
|
||||
const query = parseQuery(location.search);
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
const existingId = [].concat(query.id)[0];
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
const titleToLink = title || existingId.split('--', 2)[0];
|
||||
const id = toId(titleToLink, name);
|
||||
const url = `${location.origin + location.pathname}?${Object.entries({ ...query, id })
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -40,7 +40,7 @@
|
||||
"import": "./dist/preview.mjs",
|
||||
"types": "./dist/preview.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -58,16 +58,15 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -95,7 +94,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -43,7 +43,7 @@
|
||||
"import": "./dist/preset/preview.mjs",
|
||||
"types": "./dist/preview.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -61,16 +61,15 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -99,7 +98,7 @@
|
||||
"./src/preset/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,17 +33,17 @@
|
||||
"scripts": {
|
||||
"build-storybook": "sb build",
|
||||
"example": "jest storyshot.test",
|
||||
"prepare": "node ../../../../scripts/prepare.js",
|
||||
"prep": "node ../../../../scripts/prepare.js",
|
||||
"storybook": "yarn sb dev -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "7.0.0-alpha.23",
|
||||
"@storybook/core-client": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.23",
|
||||
"@storybook/client-api": "7.0.0-alpha.31",
|
||||
"@storybook/core-client": "7.0.0-alpha.31",
|
||||
"@storybook/core-common": "7.0.0-alpha.31",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.31",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
@ -62,11 +62,11 @@
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/angular": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/vue": "7.0.0-alpha.23",
|
||||
"@storybook/vue3": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
||||
"@storybook/angular": "7.0.0-alpha.31",
|
||||
"@storybook/react": "7.0.0-alpha.31",
|
||||
"@storybook/vue": "7.0.0-alpha.31",
|
||||
"@storybook/vue3": "7.0.0-alpha.31",
|
||||
"babel-loader": "^8.2.5",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -144,7 +144,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -25,7 +25,6 @@ function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) {
|
||||
};
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
function ensureOptionsDefaults(options: StoryshotsOptions) {
|
||||
const {
|
||||
suite = 'Storyshots',
|
||||
|
||||
@ -52,7 +52,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
|
||||
const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
|
||||
const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);
|
||||
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
expect(storyshots).notToBeAbandoned(stories2snapsConverter);
|
||||
});
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@ const riotForStorybook = jest.requireActual('@storybook/riot');
|
||||
|
||||
function bootstrapADocumentAndReturnANode() {
|
||||
const rootElement = document.createElement('div');
|
||||
rootElement.id = 'root';
|
||||
rootElement.id = 'storybook-root';
|
||||
document.body = document.createElement('body');
|
||||
document.body.appendChild(rootElement);
|
||||
return rootElement;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/* eslint-disable camelcase */
|
||||
import global from 'global';
|
||||
// @ts-ignore
|
||||
import { set_current_component } from 'svelte/internal';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// @ts-ignore
|
||||
import Vue from 'vue';
|
||||
|
||||
// this is defined in @storybook/vue but not exported,
|
||||
@ -14,7 +13,7 @@ function getRenderedTree(story: any) {
|
||||
},
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
vm[VALUES] = story.initialArgs;
|
||||
|
||||
return vm.$mount().$el;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Button } from '../react-demo';
|
||||
|
||||
export default {
|
||||
@ -11,10 +10,10 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
|
||||
export const WithText = () => <Button>Hello Button</Button>;
|
||||
|
||||
export const WithSomeEmoji = () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
<Button>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
|
||||
@ -333,7 +333,7 @@ To create a screenshot of just a single element (with its children), rather than
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
const beforeScreenshot = (page) => page.$('#root > *');
|
||||
const beforeScreenshot = (page) => page.$('#storybook-root > *');
|
||||
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,14 +30,13 @@
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../../../scripts/prepare.js"
|
||||
"prep": "node ../../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@storybook/node-logger": "7.0.0-alpha.31",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -45,7 +44,7 @@
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.31",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -56,5 +55,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a"
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
|
||||
...extendedConfig,
|
||||
async testBody(page, testOptions) {
|
||||
const {
|
||||
element = '#root',
|
||||
element = '#storybook-root',
|
||||
exclude,
|
||||
disabledRules,
|
||||
options,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,17 +32,16 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/router": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/router": "7.0.0-alpha.31",
|
||||
"@storybook/source-loader": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"estraverse": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.5.0"
|
||||
@ -67,7 +66,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -36,7 +36,7 @@
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -54,15 +54,14 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2"
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.6.3"
|
||||
@ -89,7 +88,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -38,7 +38,7 @@
|
||||
"import": "./dist/preview.mjs",
|
||||
"types": "./dist/preview.d.ts"
|
||||
},
|
||||
"./register.js": {
|
||||
"./register": {
|
||||
"require": "./dist/manager.js",
|
||||
"import": "./dist/manager.mjs",
|
||||
"types": "./dist/manager.d.ts"
|
||||
@ -56,16 +56,15 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/api": "7.0.0-alpha.31",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/core-events": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.7.2"
|
||||
@ -96,7 +95,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
50
code/addons/viewport/template/stories/parameters.stories.ts
Normal file
50
code/addons/viewport/template/stories/parameters.stories.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import globalThis from 'global';
|
||||
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
args: {
|
||||
children: 'Click Me!',
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
viewports: MINIMAL_VIEWPORTS,
|
||||
},
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic = {
|
||||
parameters: {},
|
||||
};
|
||||
|
||||
export const Selected = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Custom = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
viewports: {
|
||||
phone: {
|
||||
name: 'Phone Width',
|
||||
styles: {
|
||||
height: '600px',
|
||||
width: '100vh',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled = {
|
||||
parameters: {
|
||||
viewport: { disable: true },
|
||||
},
|
||||
};
|
||||
@ -20,7 +20,7 @@ export const visit = (route = '') => {
|
||||
expect(element).not.null;
|
||||
|
||||
if (element !== null) {
|
||||
expect(element.querySelector('#root > *, #docs-root > *')).not.null;
|
||||
expect(element.querySelector('#storybook-root > *, #storybook-docs > *')).not.null;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -41,11 +41,11 @@ export const getStorybookPreview = () => {
|
||||
expect(element).not.null;
|
||||
|
||||
if (element !== null) {
|
||||
expect(element.querySelector('#root > *')).not.null;
|
||||
expect(element.querySelector('#storybook-root > *')).not.null;
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
return cy.wrap(element).get('#root');
|
||||
return cy.wrap(element).get('#storybook-root');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@ -46,7 +46,7 @@ Cypress.Commands.add('visitStorybook', () => {
|
||||
.its('0.contentDocument.body', { log: false })
|
||||
.should('not.be.empty')
|
||||
.then((body) => cy.wrap(body, { log: false }))
|
||||
.find('#docs-root', { log: false })
|
||||
.find('#storybook-docs', { log: false })
|
||||
.should('not.be.empty');
|
||||
});
|
||||
|
||||
@ -57,7 +57,7 @@ Cypress.Commands.add('getStoryElement', {}, () => {
|
||||
.its('0.contentDocument.body', { log: false })
|
||||
.should('not.be.empty')
|
||||
.then((body) => cy.wrap(body, { log: false }))
|
||||
.find('#root', { log: false })
|
||||
.find('#storybook-root', { log: false })
|
||||
.should('not.be.empty')
|
||||
.then((storyRoot) => cy.wrap(storyRoot, { log: false }));
|
||||
});
|
||||
@ -69,7 +69,7 @@ Cypress.Commands.add('getDocsElement', {}, () => {
|
||||
.its('0.contentDocument.body', { log: false })
|
||||
.should('not.be.empty')
|
||||
.then((body) => cy.wrap(body, { log: false }))
|
||||
.find('#docs-root', { log: false })
|
||||
.find('#storybook-docs', { log: false })
|
||||
.should('not.be.empty')
|
||||
.then((storyRoot) => cy.wrap(storyRoot, { log: false }));
|
||||
});
|
||||
|
||||
@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
test.describe('addon-actions', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page).waitUntilLoaded();
|
||||
});
|
||||
|
||||
test('should trigger an action', async ({ page }) => {
|
||||
|
||||
@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
test.describe('addon-backgrounds', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page).waitUntilLoaded();
|
||||
});
|
||||
|
||||
test('should have a dark background', async ({ page }) => {
|
||||
|
||||
@ -8,6 +8,7 @@ test.describe('addon-controls', () => {
|
||||
test('should change component when changing controls', async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
const sbPage = new SbPage(page);
|
||||
await sbPage.waitUntilLoaded();
|
||||
|
||||
await sbPage.navigateToStory('example-button', 'primary');
|
||||
await sbPage.viewAddonPanel('Controls');
|
||||
@ -62,6 +63,7 @@ test.describe('addon-controls', () => {
|
||||
await page.goto(`${storybookUrl}?path=/story/example-button--primary&args=label:Hello+world`);
|
||||
|
||||
const sbPage = new SbPage(page);
|
||||
await sbPage.waitUntilLoaded();
|
||||
await expect(sbPage.previewRoot().locator('button')).toContainText('Hello world');
|
||||
|
||||
await sbPage.viewAddonPanel('Controls');
|
||||
|
||||
@ -10,6 +10,7 @@ const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
|
||||
test.describe('addon-docs', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page).waitUntilLoaded();
|
||||
});
|
||||
|
||||
test('should provide source snippet', async ({ page }) => {
|
||||
|
||||
@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
test.describe('addon-interactions', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page).waitUntilLoaded();
|
||||
});
|
||||
|
||||
// FIXME: skip xxx
|
||||
|
||||
@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
test.describe('addon-viewport', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page).waitUntilLoaded();
|
||||
});
|
||||
|
||||
test('should have viewport button in the toolbar', async ({ page }) => {
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import process from 'process';
|
||||
|
||||
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
|
||||
test('Basic story test', async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
|
||||
const preview = page.frameLocator('#storybook-preview-iframe');
|
||||
const root = preview.locator('#root:visible, #docs-root:visible');
|
||||
|
||||
// Specific check for introduction story
|
||||
await expect(root).toContainText('Welcome');
|
||||
});
|
||||
@ -32,13 +32,21 @@ export class SbPage {
|
||||
await expect(selected).toBe('true');
|
||||
}
|
||||
|
||||
async waitUntilLoaded() {
|
||||
const root = this.previewRoot();
|
||||
const docsLoadingPage = root.locator('.sb-preparing-docs');
|
||||
const storyLoadingPage = root.locator('.sb-preparing-story');
|
||||
await docsLoadingPage.waitFor({ state: 'hidden' });
|
||||
await storyLoadingPage.waitFor({ state: 'hidden' });
|
||||
}
|
||||
|
||||
previewIframe() {
|
||||
return this.page.frameLocator('#storybook-preview-iframe');
|
||||
}
|
||||
|
||||
previewRoot() {
|
||||
const preview = this.previewIframe();
|
||||
return preview.locator('#root:visible, #docs-root:visible');
|
||||
return preview.locator('#storybook-root:visible, #storybook-docs:visible');
|
||||
}
|
||||
|
||||
panelContent() {
|
||||
|
||||
@ -19,7 +19,12 @@ const mainConfig: import('@storybook/angular').StorybookConfig = {
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
disableTelemetry: true,
|
||||
},
|
||||
staticDirs: ['../src/assets'],
|
||||
staticDirs: [
|
||||
'../src/assets',
|
||||
// reproduction of https://github.com/storybookjs/storybook/issues/16732
|
||||
{ from: '../src/assets/a', to: 'assets' },
|
||||
{ from: '../src/assets/b', to: 'assets/b' },
|
||||
],
|
||||
features: {
|
||||
buildStoriesJson: false,
|
||||
breakingChangesV7: false,
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
import addCssWarning from '../src/cssWarning';
|
||||
|
||||
// @ts-ignore
|
||||
import docJson from '../documentation.json';
|
||||
// remove ButtonComponent to test #12009
|
||||
const filtered = !docJson?.components
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"workspaces": {
|
||||
@ -31,7 +31,6 @@
|
||||
"@angular/platform-browser": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@ngrx/store": "^13.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"rxjs": "^6.6.7",
|
||||
"sass": "^1.43.4",
|
||||
"telejson": "^6.0.8",
|
||||
@ -44,24 +43,23 @@
|
||||
"@angular/compiler-cli": "^13.3.6",
|
||||
"@angular/elements": "^13.3.6",
|
||||
"@compodoc/compodoc": "^1.1.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/angular": "7.0.0-alpha.23",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.31",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.31",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.31",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.31",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.31",
|
||||
"@storybook/addon-links": "7.0.0-alpha.31",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.31",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.31",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/angular": "7.0.0-alpha.31",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.31",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"@types/core-js": "^2.5.4",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/sass": "^1",
|
||||
@ -72,7 +70,7 @@
|
||||
"jest": "^26.6.3",
|
||||
"jest-preset-angular": "^8.3.2",
|
||||
"protractor": "~7.0.0",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"storybook": "7.0.0-alpha.31",
|
||||
"storybook-addon-angular-ivy": "^0.0.1",
|
||||
"ts-jest": "^26.4.4",
|
||||
"ts-node": "^10.4.0",
|
||||
|
||||
0
code/examples/angular-cli/src/assets/a/a.json
Normal file
0
code/examples/angular-cli/src/assets/a/a.json
Normal file
0
code/examples/angular-cli/src/assets/b/b.json
Normal file
0
code/examples/angular-cli/src/assets/b/b.json
Normal file
@ -1,45 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button 🥁"
|
||||
>
|
||||
<button>
|
||||
Button 🥁
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button 🥁"
|
||||
>
|
||||
<button>
|
||||
Button 🥁
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Actions Story with template 1`] = `
|
||||
<storybook-wrapper>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Actions Use action in method 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button 🥁"
|
||||
>
|
||||
<button>
|
||||
Button 🥁
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,46 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Meta, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
export default {
|
||||
component: Button,
|
||||
title: 'Addons/Actions',
|
||||
} as Meta;
|
||||
|
||||
export const ComponentOutputWithEventEmitter: StoryFn = () => ({
|
||||
props: {
|
||||
text: 'Button 🥁',
|
||||
onClick: action('On click'),
|
||||
},
|
||||
});
|
||||
ComponentOutputWithEventEmitter.storyName = 'Component Output with EventEmitter';
|
||||
|
||||
export const UseActionInMethod: StoryFn = () => ({
|
||||
props: {
|
||||
text: 'Button 🥁',
|
||||
onClick: (e) => {
|
||||
console.log(e);
|
||||
e.preventDefault();
|
||||
action('Action name')(e.target, 'Another arg');
|
||||
},
|
||||
},
|
||||
});
|
||||
UseActionInMethod.storyName = 'Use action in method';
|
||||
|
||||
export const StoryTemplate: StoryFn = () => ({
|
||||
template: `<button (click)="onClick($event)" (mouseover)="onOver()">Button</button>`,
|
||||
props: {
|
||||
onClick: action('On click'),
|
||||
onOver: action('On over'),
|
||||
},
|
||||
});
|
||||
StoryTemplate.storyName = 'Story with template';
|
||||
|
||||
export const ComponentOutputWithArgsTypes: StoryFn = (args) => ({
|
||||
props: {
|
||||
text: 'Button 🥁',
|
||||
...args,
|
||||
},
|
||||
});
|
||||
ComponentOutputWithArgsTypes.storyName = 'Component Output with ArgsTypes';
|
||||
ComponentOutputWithArgsTypes.argTypes = { onClick: { action: 'On click' } };
|
||||
@ -1,37 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="This one should have different"
|
||||
>
|
||||
<button>
|
||||
This one should have different backgrounds
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons / Backgrounds With Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons / Backgrounds With Template 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,38 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
export default {
|
||||
title: 'Addons / Backgrounds',
|
||||
component: Button,
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
default: 'twitter',
|
||||
values: [
|
||||
{ name: 'twitter', value: '#00aced' },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
],
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const WithComponent: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
|
||||
export const WithTemplate: StoryFn = () => ({
|
||||
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
|
||||
export const Overridden = () => ({
|
||||
props: { text: 'This one should have different backgrounds' },
|
||||
});
|
||||
Overridden.parameters = {
|
||||
backgrounds: {
|
||||
default: 'pink',
|
||||
values: [
|
||||
{ name: 'pink', value: 'hotpink' },
|
||||
{ name: 'blue', value: 'deepskyblue' },
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -1,6 +1,5 @@
|
||||
import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs';
|
||||
import { Button } from '../.././angular-demo';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
<Meta title="Addons/Docs/SimpleButton" component={Button} />
|
||||
|
||||
@ -21,7 +20,7 @@ import { action } from '@storybook/addon-actions';
|
||||
{(args) => ({
|
||||
props: {
|
||||
text: args.text,
|
||||
onClick: action('clicked'),
|
||||
onClick: () => {},
|
||||
},
|
||||
})}
|
||||
</Story>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
|
||||
import { CustomCvaComponent } from './custom-cva.component';
|
||||
|
||||
@ -21,7 +20,7 @@ export default {
|
||||
export const SimpleInput: StoryFn = () => ({
|
||||
props: {
|
||||
ngModel: 'Type anything',
|
||||
ngModelChange: action('ngModelChange'),
|
||||
ngModelChange: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
import { addParameters } from '@storybook/angular';
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addParameters({ globalParameter });
|
||||
|
||||
export default {
|
||||
title: 'Core / Parameters / All parameters',
|
||||
parameters: {
|
||||
chapterParameter,
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({
|
||||
component: Button,
|
||||
props: {
|
||||
text: `Parameters are ${JSON.stringify(parameters, null, 2)}`,
|
||||
onClick: () => 0,
|
||||
},
|
||||
});
|
||||
|
||||
PassedToStory.storyName = 'All parameters passed to story';
|
||||
PassedToStory.parameters = { storyParameter };
|
||||
@ -1,5 +1,4 @@
|
||||
import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
export default {
|
||||
@ -15,7 +14,7 @@ export const TemplateStory: StoryFn = () => ({
|
||||
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
|
||||
props: {
|
||||
text: 'Button with custom styles',
|
||||
onClick: action('log'),
|
||||
onClick: () => {},
|
||||
},
|
||||
styles: [
|
||||
`
|
||||
|
||||
@ -25,7 +25,7 @@ const mainConfig: StorybookConfig = {
|
||||
const resolvePlugins = config.resolve?.plugins;
|
||||
if (Array.isArray(resolvePlugins)) {
|
||||
resolvePlugins.forEach((p) => {
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
const appSrcs = p.appSrcs as unknown as string[];
|
||||
if (Array.isArray(appSrcs)) {
|
||||
appSrcs.push(path.join(__dirname, '..', '..', '..'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -11,7 +11,7 @@
|
||||
"test": "react-scripts test --env=jsdom"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.31",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.14.0",
|
||||
@ -21,21 +21,21 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.31",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.31",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.31",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.31",
|
||||
"@storybook/addon-links": "7.0.0-alpha.31",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.31",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.31",
|
||||
"@storybook/preset-create-react-app": "^4.1.0",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.31",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"storybook": "7.0.0-alpha.31",
|
||||
"webpack": "5"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Button } from '../components/react-demo';
|
||||
|
||||
export default {
|
||||
@ -7,7 +6,7 @@ export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
|
||||
export const Story1 = () => <Button>Hello Button</Button>;
|
||||
Story1.storyName = 'with text';
|
||||
|
||||
Story1.parameters = {
|
||||
@ -15,7 +14,7 @@ Story1.parameters = {
|
||||
};
|
||||
|
||||
export const Story2 = () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
<Button>
|
||||
<span role="img" aria-label="yolo">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from '../components/react-demo';
|
||||
|
||||
const Bold = ({ children }) => {
|
||||
return <b>{children}</b>;
|
||||
};
|
||||
|
||||
Bold.propTypes = {
|
||||
children: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Decorators',
|
||||
component: Button,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ padding: 25, border: '3px solid red' }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const WithArgs = (args) => <Button {...args} />;
|
||||
WithArgs.args = { onClick: action('clicked', { depth: 1 }), children: 'With args' };
|
||||
|
||||
export const Basic = () => <Button onClick={action('clicked', { depth: 1 })}>Basic</Button>;
|
||||
|
||||
export const Nested = (args) => (
|
||||
<Button {...args}>
|
||||
<Bold>Hello</Bold>
|
||||
</Button>
|
||||
);
|
||||
Nested.args = { onClick: action('clicked', { depth: 1 }) };
|
||||
@ -1,10 +1,9 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Button } from '../components/react-demo';
|
||||
|
||||
export default {
|
||||
title: 'Some really long story kind description',
|
||||
};
|
||||
|
||||
export const Story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
|
||||
export const Story1 = () => <Button>Hello Button</Button>;
|
||||
Story1.storyName = 'with text';
|
||||
|
||||
@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = {
|
||||
const resolvePlugins = config.resolve?.plugins;
|
||||
if (Array.isArray(resolvePlugins)) {
|
||||
resolvePlugins.forEach((p) => {
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
const appSrcs = p.appSrcs as unknown as string[];
|
||||
if (Array.isArray(appSrcs)) {
|
||||
appSrcs.push(path.join(__dirname, '..', '..', '..'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-essentials",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -23,8 +23,8 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.31",
|
||||
"@storybook/theming": "7.0.0-alpha.31",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
@ -37,15 +37,15 @@
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.31",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.31",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.31",
|
||||
"@storybook/preset-create-react-app": "^4.1.0",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.31",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.31",
|
||||
"@storybook/testing-library": "^0.0.9",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"storybook": "7.0.0-alpha.31",
|
||||
"ts-node": "^10.4.0",
|
||||
"webpack": "5"
|
||||
},
|
||||
|
||||
@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = {
|
||||
const resolvePlugins = config.resolve?.plugins;
|
||||
if (Array.isArray(resolvePlugins)) {
|
||||
resolvePlugins.forEach((p) => {
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
const appSrcs = p.appSrcs as unknown as string[];
|
||||
if (Array.isArray(appSrcs)) {
|
||||
appSrcs.push(path.join(__dirname, '..', '..', '..'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-kitchen-sink",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,23 +34,23 @@
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.31",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.31",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.31",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.31",
|
||||
"@storybook/addon-links": "7.0.0-alpha.31",
|
||||
"@storybook/addons": "7.0.0-alpha.31",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.31",
|
||||
"@storybook/preset-create-react-app": "^4.1.0",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.31",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.31",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.6",
|
||||
"react-moment-proptypes": "^1.7.0",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"storybook": "7.0.0-alpha.31",
|
||||
"ts-node": "^10.4.0",
|
||||
"webpack": "5"
|
||||
},
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import Button, { Type } from './Button';
|
||||
|
||||
export default {
|
||||
@ -9,7 +8,7 @@ export default {
|
||||
|
||||
export const SimpleButton = () => {
|
||||
const x = 0;
|
||||
return <Button onClick={action('button clicked')}>OK {x}</Button>;
|
||||
return <Button>OK {x}</Button>;
|
||||
};
|
||||
|
||||
const typeOptions = {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
@ -7,10 +6,10 @@ export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
|
||||
export const Text = () => <Button>Hello Button</Button>;
|
||||
|
||||
export const Emoji = () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
<Button>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
|
||||
@ -15,7 +15,6 @@ export const ButtonReactFC: React.FC<ButtonProps> = ({ onClick, children }) => (
|
||||
<button onClick={onClick}>{children}</button>
|
||||
);
|
||||
ButtonReactFC.defaultProps = {
|
||||
// @ts-ignore
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
@ -26,7 +25,6 @@ export const ButtonFC: FC<ButtonProps> = ({ onClick, children }) => (
|
||||
<button onClick={onClick}>{children}</button>
|
||||
);
|
||||
ButtonFC.defaultProps = {
|
||||
// @ts-ignore
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
@ -37,6 +35,5 @@ export const ButtonFunctionComponent: FC<ButtonProps> = ({ onClick, children })
|
||||
<button onClick={onClick}>{children}</button>
|
||||
);
|
||||
ButtonFunctionComponent.defaultProps = {
|
||||
// @ts-ignore
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// @ts-ignore
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export const PRESET_SHAPE = {
|
||||
|
||||
@ -8,10 +8,6 @@ const config: StorybookConfig = {
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
disableTelemetry: true,
|
||||
},
|
||||
typescript: {
|
||||
check: true,
|
||||
checkOptions: {},
|
||||
},
|
||||
features: {
|
||||
postcss: false,
|
||||
storyStoreV7: true,
|
||||
|
||||
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