mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-20 05:02:37 +08:00
Merge branch 'next' into tech/tsup-core-server-v2
This commit is contained in:
Norbert de Langen
commit
57b14d45bb
@ -43,7 +43,7 @@ executors:
|
||||
default: 'small'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: mcr.microsoft.com/playwright:v1.29.0-focal
|
||||
- image: mcr.microsoft.com/playwright:v1.29.1-focal
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=6144
|
||||
resource_class: <<parameters.class>>
|
||||
@ -91,12 +91,21 @@ jobs:
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
|
||||
- prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
|
||||
- run:
|
||||
name: Install
|
||||
command: |
|
||||
cd scripts
|
||||
yarn install
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
key: prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
|
||||
paths:
|
||||
- ~/.yarn/berry/cache
|
||||
- run:
|
||||
name: Prettier
|
||||
command: |
|
||||
cd scripts
|
||||
yarn
|
||||
yarn docs:prettier:check
|
||||
build:
|
||||
executor:
|
||||
@ -637,3 +646,5 @@ workflows:
|
||||
parallelism: 26
|
||||
requires:
|
||||
- build-sandboxes
|
||||
|
||||
# VS Code Extension Version: 1.5.0
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,6 +3,7 @@ node_modules
|
||||
.idea
|
||||
*.iml
|
||||
*.sw*
|
||||
!.swcrc
|
||||
dist
|
||||
*.DS_Store
|
||||
.cache
|
||||
|
||||
30
CHANGELOG.md
30
CHANGELOG.md
@ -1,3 +1,33 @@
|
||||
## 7.0.0-beta.14 (December 23, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- CLI: Write into a log file if automigrations fail [#20310](https://github.com/storybooks/storybook/pull/20310)
|
||||
- CLI: Add nodejs check in automigrations [#20342](https://github.com/storybooks/storybook/pull/20342)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- UI: Disable React.strictmode to avoid findNode deprecation warnings [#20345](https://github.com/storybooks/storybook/pull/20345)
|
||||
- Vite: Fix peerDep warning by updating `@joshwooding/vite-plugin-react-docgen-typescript` [#20359](https://github.com/storybooks/storybook/pull/20359)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Don't allow setting `Meta of={X}` if `X` is tagged with `'autodocs'` [#20373](https://github.com/storybooks/storybook/pull/20373)
|
||||
- Rename `docsPage` => `autodocs` [#20364](https://github.com/storybooks/storybook/pull/20364)
|
||||
- Rename `docsOptions.enabled` to `docsOptions.disable` [#20363](https://github.com/storybooks/storybook/pull/20363)
|
||||
- Angular: Switch to default to inlineStories=true [#20118](https://github.com/storybooks/storybook/pull/20118)
|
||||
- Types: Add Addon_OptionsParameterV7 type [#20384](https://github.com/storybooks/storybook/pull/20384)
|
||||
|
||||
#### Build
|
||||
|
||||
- Build: regen lockfiles [#20386](https://github.com/storybooks/storybook/pull/20386)
|
||||
- Build: fix prettydocs CI flakyness [#20385](https://github.com/storybooks/storybook/pull/20385)
|
||||
- Build: Update Playwright to 1.29.1 [#20372](https://github.com/storybooks/storybook/pull/20372)
|
||||
- Build: store extra metadata for each sandbox test [#20365](https://github.com/storybooks/storybook/pull/20365)
|
||||
- Build: Remove the non-cross-platform dash-S option [#20360](https://github.com/storybooks/storybook/pull/20360)
|
||||
- Build: sync issues of `next` packages [#20354](https://github.com/storybooks/storybook/pull/20354)
|
||||
|
||||
|
||||
## 6.5.15 (December 20, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
16
MIGRATION.md
16
MIGRATION.md
@ -40,7 +40,7 @@
|
||||
- [Docs Changes](#docs-changes)
|
||||
- [Standalone docs files](#standalone-docs-files)
|
||||
- [Referencing stories in docs files](#referencing-stories-in-docs-files)
|
||||
- [Docs Page](#docs-page)
|
||||
- [Autodocs](#autodocs)
|
||||
- [Configuring the Docs Container](#configuring-the-docs-container)
|
||||
- [External Docs](#external-docs)
|
||||
- [MDX2 upgrade](#mdx2-upgrade)
|
||||
@ -754,32 +754,32 @@ import * as SecondComponentStories from './second-component.stories';
|
||||
<Story of={SecondComponentStories.standard} meta={SecondComponentStories} />
|
||||
```
|
||||
|
||||
#### Docs Page
|
||||
#### Autodocs
|
||||
|
||||
In 7.0, rather than rendering each story in "docs view mode", Docs Page operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
|
||||
In 7.0, rather than rendering each story in "docs view mode", Autodocs (formerly known as "Docs Page") operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
|
||||
|
||||
You can configure Docs Page in `main.js`:
|
||||
You can configure Autodocs in `main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
docs: {
|
||||
docsPage: 'automatic', // see below for alternatives
|
||||
autodocs: true, // see below for alternatives
|
||||
defaultName: 'Docs', // set to change the name of generated docs entries
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
If you are migrating from 6.x your `docs.docsPage` option will have been set to `'automatic'`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `true`, which requires opting into DocsPage per-CSF file, with the `docsPage` **tag** on your component export:
|
||||
If you are migrating from 6.x your `docs.autodocs` option will have been set to `true`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `'tag'`, which requires opting into Autodocs per-CSF file, with the `autodocs` **tag** on your component export:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
component: MyComponent
|
||||
// Tags are a new feature coming in 7.1, that we are using to drive this behaviour.
|
||||
tags: ['docsPage']
|
||||
tags: ['autodocs']
|
||||
}
|
||||
```
|
||||
|
||||
You can also set `docsPage: false` to opt-out of docs page entirely.
|
||||
You can also set `autodocs: false` to opt-out of Autodocs entirely.
|
||||
|
||||
You can change the default template in the same way as in 6.x, using the `docs.page` parameter.
|
||||
|
||||
|
||||
1
code/.gitignore
vendored
1
code/.gitignore
vendored
@ -3,6 +3,7 @@ node_modules
|
||||
.idea
|
||||
*.iml
|
||||
*.sw*
|
||||
!.swcrc
|
||||
npm-shrinkwrap.json
|
||||
dist
|
||||
.tern-port
|
||||
|
||||
24
code/.swcrc
Normal file
24
code/.swcrc
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/swcrc",
|
||||
"jsc": {
|
||||
"parser": {
|
||||
"syntax": "typescript",
|
||||
"tsx": true
|
||||
},
|
||||
"transform": {
|
||||
"react": {
|
||||
"runtime": "classic",
|
||||
"pragma": "React.createElement",
|
||||
"pragmaFrag": "React.Fragment",
|
||||
"throwIfNamespace": false,
|
||||
"development": false
|
||||
}
|
||||
},
|
||||
"target": "es2020",
|
||||
"loose": false,
|
||||
"externalHelpers": false,
|
||||
// Requires v1.2.50 or upper and requires target to be es2016 or upper.
|
||||
"keepClassNames": false
|
||||
},
|
||||
"minify": false
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -63,16 +63,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "7.0.0-beta.13",
|
||||
"@storybook/channels": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.14",
|
||||
"@storybook/channels": "7.0.0-beta.14",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"axe-core": "^4.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"react-resize-detector": "^7.1.2"
|
||||
@ -104,7 +104,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -3,7 +3,7 @@ import React from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Badge } from '@storybook/components';
|
||||
import type { CheckResult } from 'axe-core';
|
||||
import ReactResizeDetector from 'react-resize-detector';
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
|
||||
const List = styled.div({
|
||||
display: 'flex',
|
||||
@ -53,6 +53,11 @@ const formatSeverityText = (severity: string) => {
|
||||
};
|
||||
|
||||
const Rule: FC<RuleProps> = ({ rule }) => {
|
||||
const { ref, width } = useResizeDetector({
|
||||
refreshMode: 'debounce',
|
||||
handleHeight: false,
|
||||
handleWidth: true,
|
||||
});
|
||||
let badgeType: any = null;
|
||||
switch (rule.impact) {
|
||||
case ImpactValue.CRITICAL:
|
||||
@ -71,14 +76,10 @@ const Rule: FC<RuleProps> = ({ rule }) => {
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
|
||||
{(size) => (
|
||||
<Item elementWidth={size.width || 0}>
|
||||
<StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
|
||||
<Message>{rule.message}</Message>
|
||||
</Item>
|
||||
)}
|
||||
</ReactResizeDetector>
|
||||
<Item ref={ref} elementWidth={width || 0}>
|
||||
<StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
|
||||
<Message>{rule.message}</Message>
|
||||
</Item>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
import type { NodeResult, Result } from 'axe-core';
|
||||
import ReactResizeDetector from 'react-resize-detector';
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import HighlightToggle from './Report/HighlightToggle';
|
||||
|
||||
import type { RuleType } from './A11YPanel';
|
||||
@ -99,6 +99,11 @@ function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
|
||||
}
|
||||
|
||||
export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
|
||||
const { ref, width } = useResizeDetector({
|
||||
refreshMode: 'debounce',
|
||||
handleHeight: false,
|
||||
handleWidth: true,
|
||||
});
|
||||
const { tab: activeTab, setTab } = useA11yContext();
|
||||
|
||||
const handleToggle = React.useCallback(
|
||||
@ -111,38 +116,32 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
|
||||
const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
|
||||
const highlightLabel = `Highlight results`;
|
||||
return (
|
||||
<ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
|
||||
{(size) => (
|
||||
<Container>
|
||||
<List>
|
||||
<TabsWrapper>
|
||||
{tabs.map((tab, index) => (
|
||||
<Item
|
||||
/* eslint-disable-next-line react/no-array-index-key */
|
||||
key={index}
|
||||
data-index={index}
|
||||
active={activeTab === index}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{tab.label}
|
||||
</Item>
|
||||
))}
|
||||
</TabsWrapper>
|
||||
</List>
|
||||
{tabs[activeTab].items.length > 0 ? (
|
||||
<GlobalToggle elementWidth={size.width || 0}>
|
||||
<HighlightToggleLabel htmlFor={highlightToggleId}>
|
||||
{highlightLabel}
|
||||
</HighlightToggleLabel>
|
||||
<HighlightToggle
|
||||
toggleId={highlightToggleId}
|
||||
elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
|
||||
/>
|
||||
</GlobalToggle>
|
||||
) : null}
|
||||
{tabs[activeTab].panel}
|
||||
</Container>
|
||||
)}
|
||||
</ReactResizeDetector>
|
||||
<Container ref={ref}>
|
||||
<List>
|
||||
<TabsWrapper>
|
||||
{tabs.map((tab, index) => (
|
||||
<Item
|
||||
/* eslint-disable-next-line react/no-array-index-key */
|
||||
key={index}
|
||||
data-index={index}
|
||||
active={activeTab === index}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{tab.label}
|
||||
</Item>
|
||||
))}
|
||||
</TabsWrapper>
|
||||
</List>
|
||||
{tabs[activeTab].items.length > 0 ? (
|
||||
<GlobalToggle elementWidth={width || 0}>
|
||||
<HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
|
||||
<HighlightToggle
|
||||
toggleId={highlightToggleId}
|
||||
elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
|
||||
/>
|
||||
</GlobalToggle>
|
||||
) : null}
|
||||
{tabs[activeTab].panel}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -77,14 +77,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"dequal": "^2.0.2",
|
||||
"lodash": "^4.17.21",
|
||||
"polished": "^4.2.2",
|
||||
@ -121,7 +121,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -76,14 +76,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"memoizerific": "^1.11.3",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -112,7 +112,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -68,15 +68,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/blocks": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/blocks": "7.0.0-beta.14",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.8",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -102,7 +102,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -15,6 +15,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [IFrame height](#iframe-height)
|
||||
- [Inline Stories](#inline-stories)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Installation
|
||||
@ -186,9 +187,7 @@ Storybook Docs renders all Angular stories inside IFrames, with a default height
|
||||
To update the global default, modify `.storybook/preview.ts`:
|
||||
|
||||
```ts
|
||||
import { addParameters } from '@storybook/angular';
|
||||
|
||||
addParameters({ docs: { iframeHeight: 400 } });
|
||||
export const parameters = { docs: { iframeHeight: 400 } };
|
||||
```
|
||||
|
||||
For `DocsPage`, you need to update the parameter locally in a story:
|
||||
@ -208,18 +207,14 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
|
||||
|
||||
## Inline Stories
|
||||
|
||||
Storybook Docs renders all Angular stories inside IFrames by default. But it is possible to use an inline rendering:
|
||||
Storybook Docs renders all Angular stories inline by default.
|
||||
|
||||
Then update `.storybook/preview.js`:
|
||||
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
||||
|
||||
To do so for all stories, update `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/angular';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
},
|
||||
});
|
||||
export const parameters = { docs: { inlineStories: false } };
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
@ -125,9 +125,7 @@ Storybook Docs renders all Ember stories inside `iframe`s, with a default height
|
||||
To update the global default, modify `.storybook/preview.js`:
|
||||
|
||||
```ts
|
||||
import { addParameters } from '@storybook/ember';
|
||||
|
||||
addParameters({ docs: { iframeHeight: 400 } });
|
||||
export const parameters = { docs: { iframeHeight: 400 } };
|
||||
```
|
||||
|
||||
For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -103,17 +103,17 @@
|
||||
"@babel/plugin-transform-react-jsx": "^7.19.0",
|
||||
"@jest/transform": "^29.3.1",
|
||||
"@mdx-js/react": "^2.1.5",
|
||||
"@storybook/blocks": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.13",
|
||||
"@storybook/csf-tools": "7.0.0-beta.13",
|
||||
"@storybook/blocks": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.14",
|
||||
"@storybook/csf-tools": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/mdx2-csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/postinstall": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/postinstall": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"fs-extra": "^9.0.1",
|
||||
"remark-external-links": "^8.0.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
@ -140,7 +140,7 @@
|
||||
"./src/shims/mdx-react-shim.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
@ -98,14 +98,14 @@ Some **markdown** description, or whatever you want.
|
||||
|
||||
## Inline stories
|
||||
|
||||
Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`:
|
||||
Storybook Docs renders all React stories inline by default.
|
||||
|
||||
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
||||
|
||||
To do so for all stories, update `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: false,
|
||||
},
|
||||
};
|
||||
export const parameters = { docs: { inlineStories: false } };
|
||||
```
|
||||
|
||||
## TypeScript props with `react-docgen`
|
||||
|
||||
@ -150,9 +150,9 @@ const storyIndexers = (indexers: StoryIndexer[] | null) => {
|
||||
const docs = (docsOptions: DocsOptions) => {
|
||||
return {
|
||||
...docsOptions,
|
||||
enabled: true,
|
||||
disable: false,
|
||||
defaultName: 'Docs',
|
||||
docsPage: true,
|
||||
autodocs: 'tag',
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { within } from '@storybook/testing-library';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Pre,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: { text: 'Play has not run' },
|
||||
parameters: { chromatic: { disable: true } },
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: { label: 'Click Me!' },
|
||||
parameters: { chromatic: { disable: true } },
|
||||
};
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
subcomponents: {
|
||||
Pre: globalThis.Components.Pre,
|
||||
},
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: { label: 'Click Me!' },
|
||||
parameters: {
|
||||
docs: {
|
||||
|
||||
@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: { label: 'Click Me!' },
|
||||
parameters: {
|
||||
docs: {
|
||||
|
||||
@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: { label: 'Rendered in iframe' },
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
|
||||
@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Pre,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
text: 'Demonstrates overflow',
|
||||
style: { width: 2000, height: 500, background: 'hotpink' },
|
||||
|
||||
@ -15,7 +15,7 @@ const Override = () => 'overridden';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: { label: 'Click Me!' },
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
|
||||
@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
args: { label: 'Click Me!' },
|
||||
parameters: { chromatic: { disable: true } },
|
||||
};
|
||||
|
||||
@ -133,18 +133,14 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
|
||||
|
||||
## Inline Stories
|
||||
|
||||
Storybook Docs renders all Vue stories inside IFrames, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter).
|
||||
Storybook Docs renders all Vue stories inline by default.
|
||||
|
||||
Starting in 5.3, you can also render stories inline, and in 6.0 this has become the default behavior. To render inline, update `.storybook/preview.js`:
|
||||
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
||||
|
||||
To do so for all stories, update `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/vue';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
},
|
||||
});
|
||||
export const parameters = { docs: { inlineStories: false } };
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
@ -133,18 +133,14 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
|
||||
|
||||
## Inline Stories
|
||||
|
||||
Storybook Docs renders all Vue stories inside IFrames, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter).
|
||||
Storybook Docs renders all Vue stories inline by default.
|
||||
|
||||
Starting in 5.3, you can also render stories inline, and in 6.0 this has become the default behavior. To render inline, update `.storybook/preview.js`:
|
||||
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
||||
|
||||
To do so for all stories, update `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/vue';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
},
|
||||
});
|
||||
export const parameters = { docs: { inlineStories: false } };
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
@ -112,24 +112,14 @@ For a full example see the [web-components-kitchen-sink/custom-elements.json](..
|
||||
|
||||
## Stories not inline
|
||||
|
||||
By default stories are rendered inline.
|
||||
For web components that is usually fine as they are style encapsulated via shadow dom.
|
||||
However when you have a style tag in you template it might be best to show them in an iframe.
|
||||
Storybook Docs renders all web components stories inline by default.
|
||||
|
||||
To always use iframes you can set
|
||||
However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
|
||||
|
||||
To do so for all stories, update `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
addParameters({
|
||||
docs: {
|
||||
inlineStories: false,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
or add it to individual stories.
|
||||
|
||||
```js
|
||||
<Story inline={false} />
|
||||
export const parameters = { docs: { inlineStories: false } };
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -119,23 +119,23 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-beta.13",
|
||||
"@storybook/addon-backgrounds": "7.0.0-beta.13",
|
||||
"@storybook/addon-controls": "7.0.0-beta.13",
|
||||
"@storybook/addon-docs": "7.0.0-beta.13",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.13",
|
||||
"@storybook/addon-measure": "7.0.0-beta.13",
|
||||
"@storybook/addon-outline": "7.0.0-beta.13",
|
||||
"@storybook/addon-toolbars": "7.0.0-beta.13",
|
||||
"@storybook/addon-viewport": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/addon-actions": "7.0.0-beta.14",
|
||||
"@storybook/addon-backgrounds": "7.0.0-beta.14",
|
||||
"@storybook/addon-controls": "7.0.0-beta.14",
|
||||
"@storybook/addon-docs": "7.0.0-beta.14",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.14",
|
||||
"@storybook/addon-measure": "7.0.0-beta.14",
|
||||
"@storybook/addon-outline": "7.0.0-beta.14",
|
||||
"@storybook/addon-toolbars": "7.0.0-beta.14",
|
||||
"@storybook/addon-viewport": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/vue": "7.0.0-beta.13",
|
||||
"@storybook/vue": "7.0.0-beta.14",
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -166,5 +166,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -61,9 +61,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.13"
|
||||
"@storybook/preview-api": "7.0.0-beta.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -72,24 +72,24 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/instrumenter": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/instrumenter": "7.0.0-beta.14",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.2.2",
|
||||
"ts-dedent": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"@storybook/jest": "next",
|
||||
"@storybook/testing-library": "next",
|
||||
"@types/node": "^16.0.0",
|
||||
"formik": "^2.2.9",
|
||||
"typescript": "~4.9.3"
|
||||
@ -118,7 +118,7 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -70,13 +70,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"react-resize-detector": "^7.1.2",
|
||||
"upath": "^1.2.0"
|
||||
},
|
||||
@ -105,7 +105,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||
|
||||
@ -2,7 +2,7 @@ import type { FC } from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
import { styled, themes, convert } from '@storybook/theming';
|
||||
import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
|
||||
import ResizeObserver from 'react-resize-detector';
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import { Result } from './Result';
|
||||
import type { Test } from '../hoc/provideJestResult';
|
||||
import { provideTests as provideJestResult } from '../hoc/provideJestResult';
|
||||
@ -118,150 +118,143 @@ const getColorByType = (type: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
const TestPanel: FC<{ test: Test }> = ({ test }) => {
|
||||
const { ref, width } = useResizeDetector();
|
||||
const { result } = test;
|
||||
if (!result || !result.assertionResults) {
|
||||
return <Placeholder>This story has tests configured, but no file was found</Placeholder>;
|
||||
}
|
||||
|
||||
const testsByType: Map<string, any> = getTestsByTypeMap(result);
|
||||
const entries: any = testsByType.entries();
|
||||
const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
|
||||
|
||||
return (
|
||||
<section ref={ref}>
|
||||
<SuiteHead>
|
||||
<SuiteTotals {...{ result, width }} />
|
||||
{width > 240 ? (
|
||||
<ProgressWrapper>
|
||||
{sortedTestsByCount.map((entry: any) => {
|
||||
return (
|
||||
<SuiteProgressPortion
|
||||
key={`progress-portion-${entry[0]}`}
|
||||
color={getColorByType(entry[0])}
|
||||
progressPercent={
|
||||
entry[1] ? (entry[1].length / result.assertionResults.length) * 100 : 0
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ProgressWrapper>
|
||||
) : null}
|
||||
</SuiteHead>
|
||||
<TabsState
|
||||
initial="failing-tests"
|
||||
backgroundColor={convert(themes.light).background.hoverable}
|
||||
>
|
||||
<div
|
||||
id="failing-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.FAILED_TYPE)
|
||||
? testsByType.get(StatusTypes.FAILED_TYPE).length
|
||||
: 0
|
||||
} Failed`}
|
||||
color={getColorByType(StatusTypes.FAILED_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.FAILED_TYPE) ? (
|
||||
testsByType.get(StatusTypes.FAILED_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.FAILED_TYPE}`}>
|
||||
This story has no failing tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="passing-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.PASSED_TYPE)
|
||||
? testsByType.get(StatusTypes.PASSED_TYPE).length
|
||||
: 0
|
||||
} Passed`}
|
||||
color={getColorByType(StatusTypes.PASSED_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.PASSED_TYPE) ? (
|
||||
testsByType.get(StatusTypes.PASSED_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.PASSED_TYPE}`}>
|
||||
This story has no passing tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="pending-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.PENDING_TYPE)
|
||||
? testsByType.get(StatusTypes.PENDING_TYPE).length
|
||||
: 0
|
||||
} Pending`}
|
||||
color={getColorByType(StatusTypes.PENDING_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.PENDING_TYPE) ? (
|
||||
testsByType.get(StatusTypes.PENDING_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.PENDING_TYPE}`}>
|
||||
This story has no pending tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="todo-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.TODO_TYPE)
|
||||
? testsByType.get(StatusTypes.TODO_TYPE).length
|
||||
: 0
|
||||
} Todo`}
|
||||
color={getColorByType(StatusTypes.TODO_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.TODO_TYPE) ? (
|
||||
testsByType.get(StatusTypes.TODO_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.TODO_TYPE}`}>
|
||||
This story has no tests todo.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
</TabsState>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const Content = styled(({ tests, className }: ContentProps) => (
|
||||
<div className={className}>
|
||||
{tests.map(({ name, result }) => {
|
||||
if (!result || !result.assertionResults) {
|
||||
return (
|
||||
<Placeholder key={name}>
|
||||
This story has tests configured, but no file was found
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
const testsByType: Map<string, any> = getTestsByTypeMap(result);
|
||||
const entries: any = testsByType.entries();
|
||||
const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
|
||||
|
||||
return (
|
||||
<ResizeObserver refreshMode="debounce" key={name}>
|
||||
{(size) => {
|
||||
const { width } = size;
|
||||
return (
|
||||
<section>
|
||||
<SuiteHead>
|
||||
<SuiteTotals {...{ result, width }} />
|
||||
{width > 240 ? (
|
||||
<ProgressWrapper>
|
||||
{sortedTestsByCount.map((entry: any) => {
|
||||
return (
|
||||
<SuiteProgressPortion
|
||||
key={`progress-portion-${entry[0]}`}
|
||||
color={getColorByType(entry[0])}
|
||||
progressPercent={
|
||||
entry[1]
|
||||
? (entry[1].length / result.assertionResults.length) * 100
|
||||
: 0
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ProgressWrapper>
|
||||
) : null}
|
||||
</SuiteHead>
|
||||
<TabsState
|
||||
initial="failing-tests"
|
||||
backgroundColor={convert(themes.light).background.hoverable}
|
||||
>
|
||||
<div
|
||||
id="failing-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.FAILED_TYPE)
|
||||
? testsByType.get(StatusTypes.FAILED_TYPE).length
|
||||
: 0
|
||||
} Failed`}
|
||||
color={getColorByType(StatusTypes.FAILED_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.FAILED_TYPE) ? (
|
||||
testsByType.get(StatusTypes.FAILED_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.FAILED_TYPE}`}>
|
||||
This story has no failing tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="passing-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.PASSED_TYPE)
|
||||
? testsByType.get(StatusTypes.PASSED_TYPE).length
|
||||
: 0
|
||||
} Passed`}
|
||||
color={getColorByType(StatusTypes.PASSED_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.PASSED_TYPE) ? (
|
||||
testsByType.get(StatusTypes.PASSED_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.PASSED_TYPE}`}>
|
||||
This story has no passing tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="pending-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.PENDING_TYPE)
|
||||
? testsByType.get(StatusTypes.PENDING_TYPE).length
|
||||
: 0
|
||||
} Pending`}
|
||||
color={getColorByType(StatusTypes.PENDING_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.PENDING_TYPE) ? (
|
||||
testsByType.get(StatusTypes.PENDING_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.PENDING_TYPE}`}>
|
||||
This story has no pending tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="todo-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.TODO_TYPE)
|
||||
? testsByType.get(StatusTypes.TODO_TYPE).length
|
||||
: 0
|
||||
} Todo`}
|
||||
color={getColorByType(StatusTypes.TODO_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.TODO_TYPE) ? (
|
||||
testsByType.get(StatusTypes.TODO_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.TODO_TYPE}`}>
|
||||
This story has no tests todo.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
</TabsState>
|
||||
</section>
|
||||
);
|
||||
}}
|
||||
</ResizeObserver>
|
||||
);
|
||||
})}
|
||||
{tests.map((test) => (
|
||||
<TestPanel key={test.name} test={test} />
|
||||
))}
|
||||
</div>
|
||||
))({
|
||||
flex: '1 1 0%',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -77,14 +77,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/router": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/router": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"prop-types": "^15.7.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -114,7 +114,7 @@
|
||||
"./src/react/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -75,13 +75,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13"
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -108,7 +108,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -78,13 +78,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -112,7 +112,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,12 +39,12 @@
|
||||
"dependencies": {
|
||||
"@jest/transform": "^29.3.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/core-webpack": "7.0.0-beta.13",
|
||||
"@storybook/client-api": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/core-webpack": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest-specific-snapshot": "^0.5.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -60,11 +60,11 @@
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "7.0.0-beta.13",
|
||||
"@storybook/angular": "7.0.0-beta.13",
|
||||
"@storybook/react": "7.0.0-beta.13",
|
||||
"@storybook/vue": "7.0.0-beta.13",
|
||||
"@storybook/vue3": "7.0.0-beta.13",
|
||||
"@storybook/addon-docs": "7.0.0-beta.14",
|
||||
"@storybook/angular": "7.0.0-beta.14",
|
||||
"@storybook/react": "7.0.0-beta.14",
|
||||
"@storybook/vue": "7.0.0-beta.14",
|
||||
"@storybook/vue3": "7.0.0-beta.14",
|
||||
"babel-loader": "^8.3.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -142,7 +142,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,8 +35,8 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"@types/jest-image-snapshot": "^5.1.0",
|
||||
"jest-image-snapshot": "^6.0.0"
|
||||
},
|
||||
@ -45,7 +45,7 @@
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "7.0.0-beta.13",
|
||||
"@storybook/addon-storyshots": "7.0.0-beta.14",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -56,5 +56,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -54,13 +54,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/router": "7.0.0-beta.13",
|
||||
"@storybook/source-loader": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/router": "7.0.0-beta.14",
|
||||
"@storybook/source-loader": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"estraverse": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.5.0"
|
||||
@ -92,7 +92,7 @@
|
||||
"./src/preset.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"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-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -68,11 +68,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13"
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -99,7 +99,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"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-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -73,13 +73,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
@ -109,7 +109,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908",
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -34,19 +34,19 @@
|
||||
"prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/core-client": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/core-server": "7.0.0-beta.13",
|
||||
"@storybook/core-webpack": "7.0.0-beta.13",
|
||||
"@storybook/docs-tools": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/core-client": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/core-server": "7.0.0-beta.14",
|
||||
"@storybook/core-webpack": "7.0.0-beta.14",
|
||||
"@storybook/docs-tools": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/react": "^16.14.34",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -122,5 +122,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/builders/builders.json",
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -5,8 +5,7 @@ import { sourceDecorator } from './sourceDecorator';
|
||||
|
||||
export const parameters: Parameters = {
|
||||
docs: {
|
||||
// probably set this to true by default once it's battle-tested
|
||||
inlineStories: false,
|
||||
inlineStories: true,
|
||||
extractArgTypes,
|
||||
extractComponentDescription,
|
||||
source: {
|
||||
|
||||
@ -5,7 +5,7 @@ import Button from './button.component';
|
||||
const meta: Meta<Button> = {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
render: (args: Button) => ({
|
||||
props: {
|
||||
backgroundColor: null,
|
||||
|
||||
@ -8,8 +8,8 @@ import Header from './header.component';
|
||||
const meta: Meta<Header> = {
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
|
||||
tags: ['docsPage'],
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
|
||||
tags: ['autodocs'],
|
||||
render: (args) => ({ props: args }),
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
|
||||
"bugs": {
|
||||
@ -31,12 +31,12 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/docs-tools": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/docs-tools": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -59,5 +59,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-vite",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,15 +48,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-beta.13",
|
||||
"@storybook/builder-vite": "7.0.0-beta.13",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.13",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.13",
|
||||
"@storybook/client-api": "7.0.0-beta.13",
|
||||
"@storybook/core-server": "7.0.0-beta.13",
|
||||
"@storybook/html": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview-web": "7.0.0-beta.13",
|
||||
"@storybook/addons": "7.0.0-beta.14",
|
||||
"@storybook/builder-vite": "7.0.0-beta.14",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.14",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.14",
|
||||
"@storybook/client-api": "7.0.0-beta.14",
|
||||
"@storybook/core-server": "7.0.0-beta.14",
|
||||
"@storybook/html": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview-web": "7.0.0-beta.14",
|
||||
"magic-string": "^0.26.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,11 +48,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/html": "7.0.0-beta.13",
|
||||
"@storybook/preset-html-webpack": "7.0.0-beta.13",
|
||||
"@storybook/html": "7.0.0-beta.14",
|
||||
"@storybook/preset-html-webpack": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/nextjs",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Next.js",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -60,13 +60,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@next/font": "^13.0.7",
|
||||
"@storybook/addon-actions": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/react": "7.0.0-beta.13",
|
||||
"@storybook/addon-actions": "7.0.0-beta.14",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/react": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0",
|
||||
"find-up": "^5.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
@ -84,7 +84,7 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/types": "^7.20.5",
|
||||
"@storybook/addon-actions": "7.0.0-beta.12",
|
||||
"@storybook/addon-actions": "7.0.0-beta.14",
|
||||
"@types/babel__core": "^7",
|
||||
"next": "^13.0.5",
|
||||
"typescript": "^4.9.3",
|
||||
@ -124,5 +124,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { Button } from './Button';
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
|
||||
@ -3,8 +3,8 @@ import { Header } from './Header';
|
||||
export default {
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
|
||||
tags: ['docsPage'],
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
|
||||
@ -6,7 +6,7 @@ import { Button } from './Button';
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
|
||||
@ -4,8 +4,8 @@ import { Header } from './Header';
|
||||
const meta: Meta<typeof Header> = {
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
|
||||
tags: ['docsPage'],
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/preact": "7.0.0-beta.13",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/preact": "7.0.0-beta.14",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -77,5 +77,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-vite",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@joshwooding/vite-plugin-react-docgen-typescript": "0.0.0-20221218231544",
|
||||
"@joshwooding/vite-plugin-react-docgen-typescript": "^0.2.1",
|
||||
"@rollup/pluginutils": "^4.2.0",
|
||||
"@storybook/builder-vite": "7.0.0-beta.13",
|
||||
"@storybook/react": "7.0.0-beta.13",
|
||||
"@storybook/builder-vite": "7.0.0-beta.14",
|
||||
"@storybook/react": "7.0.0-beta.14",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"ast-types": "^0.14.2",
|
||||
"magic-string": "^0.26.1",
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,9 +48,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.13",
|
||||
"@storybook/react": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.14",
|
||||
"@storybook/react": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/preset-server-webpack": "7.0.0-beta.13",
|
||||
"@storybook/server": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/preset-server-webpack": "7.0.0-beta.14",
|
||||
"@storybook/server": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -74,5 +74,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-vite",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,9 +48,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/svelte": "7.0.0-beta.13",
|
||||
"@storybook/builder-vite": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/svelte": "7.0.0-beta.14",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"svelte": "^3.0.0",
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-beta.13",
|
||||
"@storybook/svelte": "7.0.0-beta.13"
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-beta.14",
|
||||
"@storybook/svelte": "7.0.0-beta.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^3.48.0",
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/sveltekit",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for SvelteKit",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -51,9 +51,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.13",
|
||||
"@storybook/svelte": "7.0.0-beta.13",
|
||||
"@storybook/svelte-vite": "7.0.0-beta.13"
|
||||
"@storybook/builder-vite": "7.0.0-beta.14",
|
||||
"@storybook/svelte": "7.0.0-beta.14",
|
||||
"@storybook/svelte-vite": "7.0.0-beta.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-vite",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/core-server": "7.0.0-beta.13",
|
||||
"@storybook/vue": "7.0.0-beta.13",
|
||||
"@storybook/builder-vite": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/core-server": "7.0.0-beta.14",
|
||||
"@storybook/vue": "7.0.0-beta.14",
|
||||
"magic-string": "^0.26.1",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
},
|
||||
@ -79,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-beta.13",
|
||||
"@storybook/vue": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-beta.14",
|
||||
"@storybook/vue": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-vite",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,9 +48,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.13",
|
||||
"@storybook/core-server": "7.0.0-beta.13",
|
||||
"@storybook/vue3": "7.0.0-beta.13",
|
||||
"@storybook/builder-vite": "7.0.0-beta.14",
|
||||
"@storybook/core-server": "7.0.0-beta.14",
|
||||
"@storybook/vue3": "7.0.0-beta.14",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-beta.13",
|
||||
"@storybook/vue3": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-beta.14",
|
||||
"@storybook/vue3": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-vite",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.13",
|
||||
"@storybook/core-server": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/web-components": "7.0.0-beta.13",
|
||||
"@storybook/builder-vite": "7.0.0-beta.14",
|
||||
"@storybook/core-server": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/web-components": "7.0.0-beta.14",
|
||||
"magic-string": "^0.26.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -75,5 +75,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -51,10 +51,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/preset-web-components-webpack": "7.0.0-beta.13",
|
||||
"@storybook/web-components": "7.0.0-beta.13",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/preset-web-components-webpack": "7.0.0-beta.14",
|
||||
"@storybook/web-components": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -79,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -24,23 +24,9 @@ module.exports = {
|
||||
path.resolve('./__mocks__/fileMock.js'),
|
||||
'\\.(css|scss|stylesheet)$': path.resolve('./__mocks__/styleMock.js'),
|
||||
'\\.(md)$': path.resolve('./__mocks__/htmlMock.js'),
|
||||
|
||||
// core-js v2 to v3 mapping
|
||||
'core-js/modules/es6.(.*)': 'core-js/modules/es.$1',
|
||||
'core-js/modules/es7.(.*)': 'core-js/modules/esnext.$1',
|
||||
'core-js/library/fn/(.*)': `core-js/features/$1`,
|
||||
'core-js/es5/(.*)': `core-js/es/$1`,
|
||||
'core-js/es6/(.*)': `core-js/es/$1`,
|
||||
'core-js/es7/reflect': `core-js/proposals/reflect-metadata`,
|
||||
'core-js/es7/(.*)': `core-js/proposals/$1`,
|
||||
'core-js/object$/': `core-js/es/object`,
|
||||
'core-js/object/(.*)': `core-js/es/object/$1`,
|
||||
'babel-runtime/core-js/(.*)': `core-js/es/$1`,
|
||||
// 'babel-runtime/core-js/object/assign'
|
||||
'core-js/library/fn/object/assign': 'core-js/es/object/assign',
|
||||
},
|
||||
transform: {
|
||||
'^.+\\.[jt]sx?$': path.resolve('../scripts/utils/jest-transform-js.js'),
|
||||
'^.+\\.(t|j)sx?$': '@swc/jest',
|
||||
'^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
|
||||
},
|
||||
transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|@mdx-js)'],
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"registry": "https://registry.npmjs.org",
|
||||
"version": "7.0.0-beta.13"
|
||||
"version": "7.0.0-beta.14"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -44,9 +44,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13"
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
@ -60,5 +60,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-manager",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook manager builder",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -44,16 +44,18 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/manager": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/manager": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@types/ejs": "^3.1.1",
|
||||
"@types/find-cache-dir": "^3.2.1",
|
||||
"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
|
||||
"browser-assert": "^1.2.1",
|
||||
"ejs": "^3.1.8",
|
||||
"esbuild": "^0.16.4",
|
||||
"esbuild-plugin-alias": "^0.2.1",
|
||||
"express": "^4.17.3",
|
||||
"find-cache-dir": "^4.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"process": "^0.11.10",
|
||||
"slash": "^3.0.0",
|
||||
@ -71,5 +73,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ import aliasPlugin from 'esbuild-plugin-alias';
|
||||
|
||||
import { getTemplatePath, renderHTML } from './utils/template';
|
||||
import { definitions } from './utils/globals';
|
||||
import { wrapManagerEntries } from './utils/managerEntries';
|
||||
import type {
|
||||
BuilderBuildResult,
|
||||
BuilderFunction,
|
||||
@ -34,10 +35,14 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
|
||||
getTemplatePath('addon.tsconfig.json'),
|
||||
]);
|
||||
|
||||
const entryPoints = customManagerEntryPoint
|
||||
? [...addonsEntryPoints, customManagerEntryPoint]
|
||||
: addonsEntryPoints;
|
||||
|
||||
const realEntryPoints = await wrapManagerEntries(entryPoints);
|
||||
|
||||
return {
|
||||
entryPoints: customManagerEntryPoint
|
||||
? [...addonsEntryPoints, customManagerEntryPoint]
|
||||
: addonsEntryPoints,
|
||||
entryPoints: realEntryPoints,
|
||||
outdir: join(options.outputDir || './', 'sb-addons'),
|
||||
format: 'esm',
|
||||
write: false,
|
||||
|
||||
37
code/lib/builder-manager/src/utils/managerEntries.ts
Normal file
37
code/lib/builder-manager/src/utils/managerEntries.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { join, parse, relative } from 'path';
|
||||
import fs from 'fs-extra';
|
||||
import findCacheDirectory from 'find-cache-dir';
|
||||
/**
|
||||
* Manager entries should be **self-invoking** bits of code.
|
||||
* They can of-course import from modules, and ESbuild will bundle all of that into a single file.
|
||||
* But they should not export anything. However this can't be enforced, so what we do is wrap the given file, in a bit of code like this:
|
||||
*
|
||||
* ```js
|
||||
* import '<<file>>';
|
||||
* ```
|
||||
*
|
||||
* That way we are indicating to ESbuild that we do not care about this files exports, and they will be dropped in the bundle.
|
||||
*
|
||||
* We do all of that so we can wrap a try-catch around the code.
|
||||
* That would have been invalid syntax had the export statements been left in place.
|
||||
*
|
||||
* We need to wrap each managerEntry with a try-catch because if we do not, a failing managerEntry can stop execution of other managerEntries.
|
||||
*/
|
||||
export async function wrapManagerEntries(entrypoints: string[]) {
|
||||
return Promise.all(
|
||||
entrypoints.map(async (entry) => {
|
||||
const { name, dir } = parse(entry);
|
||||
const cacheLocation = findCacheDirectory({ name: 'sb-manager' });
|
||||
|
||||
if (!cacheLocation) {
|
||||
throw new Error('Could not create/find cache directory');
|
||||
}
|
||||
|
||||
const location = join(cacheLocation, relative(process.cwd(), dir), `${name}-bundle.mjs`);
|
||||
await fs.ensureFile(location);
|
||||
await fs.writeFile(location, `import '${entry}';`);
|
||||
|
||||
return location;
|
||||
})
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-vite",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "A plugin to run and build Storybooks with Vite",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme",
|
||||
"bugs": {
|
||||
@ -43,14 +43,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.14",
|
||||
"@storybook/mdx2-csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"browser-assert": "^1.2.1",
|
||||
"es-module-lexer": "^0.9.3",
|
||||
"express": "^4.17.3",
|
||||
@ -95,5 +95,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-webpack5",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -58,25 +58,25 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addons": "7.0.0-beta.13",
|
||||
"@storybook/api": "7.0.0-beta.13",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.13",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.13",
|
||||
"@storybook/channels": "7.0.0-beta.13",
|
||||
"@storybook/client-api": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/components": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/core-webpack": "7.0.0-beta.13",
|
||||
"@storybook/addons": "7.0.0-beta.14",
|
||||
"@storybook/api": "7.0.0-beta.14",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.14",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.14",
|
||||
"@storybook/channels": "7.0.0-beta.14",
|
||||
"@storybook/client-api": "7.0.0-beta.14",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/components": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/core-webpack": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/router": "7.0.0-beta.13",
|
||||
"@storybook/store": "7.0.0-beta.13",
|
||||
"@storybook/theming": "7.0.0-beta.13",
|
||||
"@storybook/manager-api": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/router": "7.0.0-beta.14",
|
||||
"@storybook/store": "7.0.0-beta.14",
|
||||
"@storybook/theming": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/semver": "^7.3.4",
|
||||
"babel-loader": "^8.3.0",
|
||||
@ -130,5 +130,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -43,9 +43,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/channels": "7.0.0-beta.14",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"qs": "^6.10.0",
|
||||
"telejson": "^7.0.3"
|
||||
@ -61,5 +61,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -43,8 +43,8 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "7.0.0-beta.13",
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/channels": "7.0.0-beta.14",
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"telejson": "^7.0.3"
|
||||
},
|
||||
@ -59,5 +59,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -53,5 +53,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sb",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,7 +24,7 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/cli": "7.0.0-beta.13"
|
||||
"@storybook/cli": "7.0.0-beta.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -32,5 +32,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "storybook",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,7 +27,7 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/cli": "7.0.0-beta.13"
|
||||
"@storybook/cli": "7.0.0-beta.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -35,5 +35,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
@ -43,13 +43,13 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@storybook/codemod": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/core-server": "7.0.0-beta.13",
|
||||
"@storybook/csf-tools": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/telemetry": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/codemod": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/core-server": "7.0.0-beta.14",
|
||||
"@storybook/csf-tools": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/telemetry": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"@types/semver": "^7.3.4",
|
||||
"boxen": "^5.1.2",
|
||||
"chalk": "^4.1.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "7.0.0-beta.13",
|
||||
"@storybook/client-api": "7.0.0-beta.14",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/prompts": "^2.0.9",
|
||||
"@types/puppeteer-core": "^2.1.0",
|
||||
@ -97,5 +97,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -9,15 +9,15 @@ import type { Fix } from '../types';
|
||||
|
||||
const logger = console;
|
||||
|
||||
interface DocsPageAutomaticFrameworkRunOptions {
|
||||
interface AutodocsTrueFrameworkRunOptions {
|
||||
main: ConfigFile;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the docs.docsPage option to automatic if it isn't already set
|
||||
* Set the docs.autodocs option to true if it isn't already set
|
||||
*/
|
||||
export const docsPageAutomatic: Fix<DocsPageAutomaticFrameworkRunOptions> = {
|
||||
id: 'docsPageAutomatic',
|
||||
export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
|
||||
id: 'autodocsTrue',
|
||||
|
||||
async check({ packageManager }) {
|
||||
const packageJson = packageManager.retrievePackageJson();
|
||||
@ -32,29 +32,29 @@ export const docsPageAutomatic: Fix<DocsPageAutomaticFrameworkRunOptions> = {
|
||||
const main = await readConfig(mainConfig);
|
||||
const docs = main.getFieldValue(['docs']);
|
||||
|
||||
return docs?.docsPage === undefined ? { main } : null;
|
||||
return docs?.autodocs === undefined ? { main } : null;
|
||||
},
|
||||
|
||||
prompt() {
|
||||
const docsPageAutomaticFormatted = chalk.cyan(`docs: { docsPage: 'automatic' }`);
|
||||
const AutodocsTrueFormatted = chalk.cyan(`docs: { autodocs: true }`);
|
||||
|
||||
return dedent`
|
||||
We've detected that your main.js configuration file has not configured docsPage. In 6.x we
|
||||
we defaulted to having a docsPage for every story, in 7.x you need to opt in per-component.
|
||||
However, we can set the \`docs.docsPage\` to 'automatic' to approximate the old behaviour:
|
||||
We've detected that your main.js configuration file has not configured autodocs. In 6.x we
|
||||
we defaulted to having a autodocs for every story, in 7.x you need to opt in per-component.
|
||||
However, we can set the \`docs.autodocs\` to true to approximate the old behaviour:
|
||||
|
||||
${docsPageAutomaticFormatted}
|
||||
${AutodocsTrueFormatted}
|
||||
|
||||
More info: ${chalk.yellow(
|
||||
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-page'
|
||||
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs'
|
||||
)}
|
||||
`;
|
||||
},
|
||||
|
||||
async run({ result: { main }, dryRun }) {
|
||||
logger.info(`✅ Setting 'docs.docsPage' to 'automatic' in main.js`);
|
||||
logger.info(`✅ Setting 'docs.autodocs' to true in main.js`);
|
||||
if (!dryRun) {
|
||||
main.setFieldValue(['docs', 'docsPage'], 'automatic');
|
||||
main.setFieldValue(['docs', 'autodocs'], true);
|
||||
await writeConfig(main);
|
||||
}
|
||||
},
|
||||
@ -13,7 +13,7 @@ import { nextjsFramework } from './nextjs-framework';
|
||||
import { newFrameworks } from './new-frameworks';
|
||||
import { removedGlobalClientAPIs } from './remove-global-client-apis';
|
||||
import { mdx1to2 } from './mdx-1-to-2';
|
||||
import { docsPageAutomatic } from './docsPage-automatic';
|
||||
import { autodocsTrue } from './autodocs-true';
|
||||
import { sveltekitFramework } from './sveltekit-framework';
|
||||
import { addReact } from './add-react';
|
||||
import { nodeJsRequirement } from './nodejs-requirement';
|
||||
@ -36,6 +36,6 @@ export const fixes: Fix[] = [
|
||||
nextjsFramework,
|
||||
removedGlobalClientAPIs,
|
||||
mdx1to2,
|
||||
docsPageAutomatic,
|
||||
autodocsTrue,
|
||||
addReact,
|
||||
];
|
||||
|
||||
@ -198,7 +198,7 @@ export async function baseGenerator(
|
||||
|
||||
await configureMain({
|
||||
framework: { name: frameworkInclude, options: options.framework || {} },
|
||||
docs: { docsPage: true },
|
||||
docs: { autodocs: 'tag' },
|
||||
addons: pnp ? addons.map(wrapForPnp) : addons,
|
||||
extensions,
|
||||
commonJs,
|
||||
|
||||
@ -61,7 +61,6 @@ const frameworkToPreviewParts: Partial<Record<SupportedFrameworks | SupportedRen
|
||||
setCompodocJson(docJson);
|
||||
|
||||
`.trimStart(),
|
||||
extraParameters: 'docs: { inlineStories: true },',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -21,6 +21,16 @@ export type Template = {
|
||||
renderer: string;
|
||||
builder: string;
|
||||
};
|
||||
|
||||
expectedFailures?: Array<{
|
||||
feature: string;
|
||||
issues: string[];
|
||||
}>;
|
||||
|
||||
unsupportedFeatures?: Array<{
|
||||
feature: string;
|
||||
issues: string[];
|
||||
}>;
|
||||
/**
|
||||
* Some sandboxes might not work properly in specific tasks temporarily, but we might
|
||||
* still want to run the other tasks. Set the ones to skip in this property.
|
||||
@ -33,7 +43,7 @@ export type Template = {
|
||||
inDevelopment?: boolean;
|
||||
};
|
||||
|
||||
export const allTemplates: Record<string, Template> = {
|
||||
export const allTemplates = {
|
||||
'cra/default-js': {
|
||||
name: 'Create React App (Javascript)',
|
||||
script: 'npx create-react-app .',
|
||||
@ -321,7 +331,7 @@ export const allTemplates: Record<string, Template> = {
|
||||
builder: '@storybook/builder-webpack5',
|
||||
},
|
||||
},
|
||||
};
|
||||
} satisfies Record<string, Template>;
|
||||
|
||||
export const ci: TemplateKey[] = ['cra/default-ts', 'react-vite/default-ts'];
|
||||
export const pr: TemplateKey[] = [
|
||||
|
||||
@ -1,89 +1,89 @@
|
||||
// auto generated file, do not edit
|
||||
export default {
|
||||
'@storybook/addon-a11y': '7.0.0-beta.13',
|
||||
'@storybook/addon-actions': '7.0.0-beta.13',
|
||||
'@storybook/addon-backgrounds': '7.0.0-beta.13',
|
||||
'@storybook/addon-controls': '7.0.0-beta.13',
|
||||
'@storybook/addon-docs': '7.0.0-beta.13',
|
||||
'@storybook/addon-essentials': '7.0.0-beta.13',
|
||||
'@storybook/addon-highlight': '7.0.0-beta.13',
|
||||
'@storybook/addon-interactions': '7.0.0-beta.13',
|
||||
'@storybook/addon-jest': '7.0.0-beta.13',
|
||||
'@storybook/addon-links': '7.0.0-beta.13',
|
||||
'@storybook/addon-measure': '7.0.0-beta.13',
|
||||
'@storybook/addon-outline': '7.0.0-beta.13',
|
||||
'@storybook/addon-storyshots': '7.0.0-beta.13',
|
||||
'@storybook/addon-storyshots-puppeteer': '7.0.0-beta.13',
|
||||
'@storybook/addon-storysource': '7.0.0-beta.13',
|
||||
'@storybook/addon-toolbars': '7.0.0-beta.13',
|
||||
'@storybook/addon-viewport': '7.0.0-beta.13',
|
||||
'@storybook/addons': '7.0.0-beta.13',
|
||||
'@storybook/angular': '7.0.0-beta.13',
|
||||
'@storybook/manager-api': '7.0.0-beta.13',
|
||||
'@storybook/blocks': '7.0.0-beta.13',
|
||||
'@storybook/builder-manager': '7.0.0-beta.13',
|
||||
'@storybook/builder-vite': '7.0.0-beta.13',
|
||||
'@storybook/builder-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/channel-postmessage': '7.0.0-beta.13',
|
||||
'@storybook/channel-websocket': '7.0.0-beta.13',
|
||||
'@storybook/channels': '7.0.0-beta.13',
|
||||
'@storybook/cli': '7.0.0-beta.13',
|
||||
'@storybook/client-api': '7.0.0-beta.13',
|
||||
'@storybook/client-logger': '7.0.0-beta.13',
|
||||
'@storybook/codemod': '7.0.0-beta.13',
|
||||
'@storybook/components': '7.0.0-beta.13',
|
||||
'@storybook/core-client': '7.0.0-beta.13',
|
||||
'@storybook/core-common': '7.0.0-beta.13',
|
||||
'@storybook/core-events': '7.0.0-beta.13',
|
||||
'@storybook/core-server': '7.0.0-beta.13',
|
||||
'@storybook/core-webpack': '7.0.0-beta.13',
|
||||
'@storybook/csf-tools': '7.0.0-beta.13',
|
||||
'@storybook/docs-tools': '7.0.0-beta.13',
|
||||
'@storybook/ember': '7.0.0-beta.13',
|
||||
'@storybook/html': '7.0.0-beta.13',
|
||||
'@storybook/html-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/html-vite': '7.0.0-beta.13',
|
||||
'@storybook/instrumenter': '7.0.0-beta.13',
|
||||
'@storybook/nextjs': '7.0.0-beta.13',
|
||||
'@storybook/node-logger': '7.0.0-beta.13',
|
||||
'@storybook/postinstall': '7.0.0-beta.13',
|
||||
'@storybook/preact': '7.0.0-beta.13',
|
||||
'@storybook/preact-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/preset-html-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preset-preact-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preset-react-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preset-server-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preset-svelte-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preset-vue-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preset-vue3-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preset-web-components-webpack': '7.0.0-beta.13',
|
||||
'@storybook/preview': '7.0.0-beta.13',
|
||||
'@storybook/preview-api': '7.0.0-beta.13',
|
||||
'@storybook/preview-web': '7.0.0-beta.13',
|
||||
'@storybook/react': '7.0.0-beta.13',
|
||||
'@storybook/react-vite': '7.0.0-beta.13',
|
||||
'@storybook/react-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/router': '7.0.0-beta.13',
|
||||
'@storybook/server': '7.0.0-beta.13',
|
||||
'@storybook/server-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/source-loader': '7.0.0-beta.13',
|
||||
'@storybook/store': '7.0.0-beta.13',
|
||||
'@storybook/svelte': '7.0.0-beta.13',
|
||||
'@storybook/sveltekit': '7.0.0-beta.13',
|
||||
'@storybook/svelte-vite': '7.0.0-beta.13',
|
||||
'@storybook/svelte-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/telemetry': '7.0.0-beta.13',
|
||||
'@storybook/theming': '7.0.0-beta.13',
|
||||
'@storybook/manager': '7.0.0-beta.13',
|
||||
'@storybook/vue': '7.0.0-beta.13',
|
||||
'@storybook/vue-vite': '7.0.0-beta.13',
|
||||
'@storybook/vue-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/vue3': '7.0.0-beta.13',
|
||||
'@storybook/vue3-vite': '7.0.0-beta.13',
|
||||
'@storybook/vue3-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/web-components': '7.0.0-beta.13',
|
||||
'@storybook/web-components-webpack5': '7.0.0-beta.13',
|
||||
'@storybook/web-components-vite': '7.0.0-beta.13',
|
||||
sb: '7.0.0-beta.13',
|
||||
storybook: '7.0.0-beta.13',
|
||||
'@storybook/addon-a11y': '7.0.0-beta.14',
|
||||
'@storybook/addon-actions': '7.0.0-beta.14',
|
||||
'@storybook/addon-backgrounds': '7.0.0-beta.14',
|
||||
'@storybook/addon-controls': '7.0.0-beta.14',
|
||||
'@storybook/addon-docs': '7.0.0-beta.14',
|
||||
'@storybook/addon-essentials': '7.0.0-beta.14',
|
||||
'@storybook/addon-highlight': '7.0.0-beta.14',
|
||||
'@storybook/addon-interactions': '7.0.0-beta.14',
|
||||
'@storybook/addon-jest': '7.0.0-beta.14',
|
||||
'@storybook/addon-links': '7.0.0-beta.14',
|
||||
'@storybook/addon-measure': '7.0.0-beta.14',
|
||||
'@storybook/addon-outline': '7.0.0-beta.14',
|
||||
'@storybook/addon-storyshots': '7.0.0-beta.14',
|
||||
'@storybook/addon-storyshots-puppeteer': '7.0.0-beta.14',
|
||||
'@storybook/addon-storysource': '7.0.0-beta.14',
|
||||
'@storybook/addon-toolbars': '7.0.0-beta.14',
|
||||
'@storybook/addon-viewport': '7.0.0-beta.14',
|
||||
'@storybook/addons': '7.0.0-beta.14',
|
||||
'@storybook/angular': '7.0.0-beta.14',
|
||||
'@storybook/manager-api': '7.0.0-beta.14',
|
||||
'@storybook/blocks': '7.0.0-beta.14',
|
||||
'@storybook/builder-manager': '7.0.0-beta.14',
|
||||
'@storybook/builder-vite': '7.0.0-beta.14',
|
||||
'@storybook/builder-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/channel-postmessage': '7.0.0-beta.14',
|
||||
'@storybook/channel-websocket': '7.0.0-beta.14',
|
||||
'@storybook/channels': '7.0.0-beta.14',
|
||||
'@storybook/cli': '7.0.0-beta.14',
|
||||
'@storybook/client-api': '7.0.0-beta.14',
|
||||
'@storybook/client-logger': '7.0.0-beta.14',
|
||||
'@storybook/codemod': '7.0.0-beta.14',
|
||||
'@storybook/components': '7.0.0-beta.14',
|
||||
'@storybook/core-client': '7.0.0-beta.14',
|
||||
'@storybook/core-common': '7.0.0-beta.14',
|
||||
'@storybook/core-events': '7.0.0-beta.14',
|
||||
'@storybook/core-server': '7.0.0-beta.14',
|
||||
'@storybook/core-webpack': '7.0.0-beta.14',
|
||||
'@storybook/csf-tools': '7.0.0-beta.14',
|
||||
'@storybook/docs-tools': '7.0.0-beta.14',
|
||||
'@storybook/ember': '7.0.0-beta.14',
|
||||
'@storybook/html': '7.0.0-beta.14',
|
||||
'@storybook/html-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/html-vite': '7.0.0-beta.14',
|
||||
'@storybook/instrumenter': '7.0.0-beta.14',
|
||||
'@storybook/nextjs': '7.0.0-beta.14',
|
||||
'@storybook/node-logger': '7.0.0-beta.14',
|
||||
'@storybook/postinstall': '7.0.0-beta.14',
|
||||
'@storybook/preact': '7.0.0-beta.14',
|
||||
'@storybook/preact-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/preset-html-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preset-preact-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preset-react-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preset-server-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preset-svelte-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preset-vue-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preset-vue3-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preset-web-components-webpack': '7.0.0-beta.14',
|
||||
'@storybook/preview': '7.0.0-beta.14',
|
||||
'@storybook/preview-api': '7.0.0-beta.14',
|
||||
'@storybook/preview-web': '7.0.0-beta.14',
|
||||
'@storybook/react': '7.0.0-beta.14',
|
||||
'@storybook/react-vite': '7.0.0-beta.14',
|
||||
'@storybook/react-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/router': '7.0.0-beta.14',
|
||||
'@storybook/server': '7.0.0-beta.14',
|
||||
'@storybook/server-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/source-loader': '7.0.0-beta.14',
|
||||
'@storybook/store': '7.0.0-beta.14',
|
||||
'@storybook/svelte': '7.0.0-beta.14',
|
||||
'@storybook/sveltekit': '7.0.0-beta.14',
|
||||
'@storybook/svelte-vite': '7.0.0-beta.14',
|
||||
'@storybook/svelte-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/telemetry': '7.0.0-beta.14',
|
||||
'@storybook/theming': '7.0.0-beta.14',
|
||||
'@storybook/manager': '7.0.0-beta.14',
|
||||
'@storybook/vue': '7.0.0-beta.14',
|
||||
'@storybook/vue-vite': '7.0.0-beta.14',
|
||||
'@storybook/vue-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/vue3': '7.0.0-beta.14',
|
||||
'@storybook/vue3-vite': '7.0.0-beta.14',
|
||||
'@storybook/vue3-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/web-components': '7.0.0-beta.14',
|
||||
'@storybook/web-components-webpack5': '7.0.0-beta.14',
|
||||
'@storybook/web-components-vite': '7.0.0-beta.14',
|
||||
sb: '7.0.0-beta.14',
|
||||
storybook: '7.0.0-beta.14',
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/client-api",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook Client API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -42,8 +42,8 @@
|
||||
"prep": "../../../scripts/prepare/facade.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13"
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -54,5 +54,5 @@
|
||||
],
|
||||
"shim": "@storybook/preview-api/dist/client-api"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/client-logger",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -56,5 +56,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/codemod",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "A collection of codemod scripts written with JSCodeshift",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,12 +46,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/types": "^7.20.2",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/csf-tools": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/csf-tools": "7.0.0-beta.14",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"globby": "^11.0.2",
|
||||
"jscodeshift": "^0.13.1",
|
||||
@ -84,5 +85,5 @@
|
||||
"./src/transforms/upgrade-hierarchy-separators.js"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { describe, it, expect } from '@jest/globals';
|
||||
// import { describe, it, expect } from '@jest/globals';
|
||||
import { dedent } from 'ts-dedent';
|
||||
import _transform from '../csf-2-to-3';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-client",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -35,8 +35,8 @@
|
||||
"prep": "../../../scripts/prepare/facade.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13"
|
||||
"@storybook/client-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -47,5 +47,5 @@
|
||||
],
|
||||
"shim": "@storybook/preview-api/dist/core-client"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-common",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -44,8 +44,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"@types/babel__core": "^7.1.20",
|
||||
"@types/express": "^4.7.0",
|
||||
"@types/node": "^16.0.0",
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-events",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Event names used in storybook core",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -53,5 +53,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/core-server",
|
||||
"version": "7.0.0-beta.13",
|
||||
"version": "7.0.0-beta.14",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -58,17 +58,17 @@
|
||||
"dependencies": {
|
||||
"@aw-web-design/x-default-browser": "1.4.88",
|
||||
"@discoveryjs/json-ext": "^0.5.3",
|
||||
"@storybook/builder-manager": "7.0.0-beta.13",
|
||||
"@storybook/core-common": "7.0.0-beta.13",
|
||||
"@storybook/core-events": "7.0.0-beta.13",
|
||||
"@storybook/builder-manager": "7.0.0-beta.14",
|
||||
"@storybook/core-common": "7.0.0-beta.14",
|
||||
"@storybook/core-events": "7.0.0-beta.14",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/csf-tools": "7.0.0-beta.13",
|
||||
"@storybook/csf-tools": "7.0.0-beta.14",
|
||||
"@storybook/docs-mdx": "next",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/node-logger": "7.0.0-beta.13",
|
||||
"@storybook/preview-api": "7.0.0-beta.13",
|
||||
"@storybook/telemetry": "7.0.0-beta.13",
|
||||
"@storybook/types": "7.0.0-beta.13",
|
||||
"@storybook/node-logger": "7.0.0-beta.14",
|
||||
"@storybook/preview-api": "7.0.0-beta.14",
|
||||
"@storybook/telemetry": "7.0.0-beta.14",
|
||||
"@storybook/types": "7.0.0-beta.14",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/node-fetch": "^2.5.7",
|
||||
"@types/pretty-hrtime": "^1.0.0",
|
||||
@ -118,5 +118,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "ddf86bd126ede0c019d7c9494f99f24a5cad9908"
|
||||
"gitHead": "c3b2e8fe2517ba2d7630e260de0fd1ad86cafeb6"
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@ const options = {
|
||||
] as StoryIndexer[],
|
||||
storiesV2Compatibility: false,
|
||||
storyStoreV7: true,
|
||||
docs: { enabled: true, defaultName: 'docs', docsPage: false },
|
||||
docs: { disable: false, defaultName: 'docs', autodocs: false },
|
||||
};
|
||||
|
||||
describe('StoryIndexGenerator', () => {
|
||||
@ -172,7 +172,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"importPath": "./src/B.stories.ts",
|
||||
"name": "Story One",
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "B",
|
||||
@ -183,7 +183,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"importPath": "./src/D.stories.jsx",
|
||||
"name": "Story One",
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "D",
|
||||
@ -279,7 +279,7 @@ describe('StoryIndexGenerator', () => {
|
||||
|
||||
const generator = new StoryIndexGenerator([specifier], {
|
||||
...options,
|
||||
docs: { enabled: false },
|
||||
docs: { disable: true },
|
||||
});
|
||||
await generator.initialize();
|
||||
|
||||
@ -304,37 +304,23 @@ describe('StoryIndexGenerator', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('docsPage', () => {
|
||||
const docsPageOptions = {
|
||||
describe('autodocs', () => {
|
||||
const autodocsOptions = {
|
||||
...options,
|
||||
docs: { ...options.docs, docsPage: true },
|
||||
docs: { ...options.docs, autodocs: 'tag' as const },
|
||||
};
|
||||
it('generates an entry per CSF file with the docsPage tag', async () => {
|
||||
it('generates an entry per CSF file with the autodocs tag', async () => {
|
||||
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
|
||||
'./src/**/*.stories.(ts|js|jsx)',
|
||||
options
|
||||
);
|
||||
|
||||
const generator = new StoryIndexGenerator([specifier], docsPageOptions);
|
||||
const generator = new StoryIndexGenerator([specifier], autodocsOptions);
|
||||
await generator.initialize();
|
||||
|
||||
expect(await generator.getIndex()).toMatchInlineSnapshot(`
|
||||
Object {
|
||||
"entries": Object {
|
||||
"a--docs": Object {
|
||||
"id": "a--docs",
|
||||
"importPath": "./src/A.stories.js",
|
||||
"name": "docs",
|
||||
"standalone": false,
|
||||
"storiesImports": Array [],
|
||||
"tags": Array [
|
||||
"component-tag",
|
||||
"docsPage",
|
||||
"docs",
|
||||
],
|
||||
"title": "A",
|
||||
"type": "docs",
|
||||
},
|
||||
"a--story-one": Object {
|
||||
"id": "a--story-one",
|
||||
"importPath": "./src/A.stories.js",
|
||||
@ -353,7 +339,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"standalone": false,
|
||||
"storiesImports": Array [],
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"docs",
|
||||
],
|
||||
"title": "B",
|
||||
@ -364,7 +350,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"importPath": "./src/B.stories.ts",
|
||||
"name": "Story One",
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "B",
|
||||
@ -377,7 +363,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"standalone": false,
|
||||
"storiesImports": Array [],
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"docs",
|
||||
],
|
||||
"title": "D",
|
||||
@ -388,7 +374,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"importPath": "./src/D.stories.jsx",
|
||||
"name": "Story One",
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "D",
|
||||
@ -431,19 +417,20 @@ describe('StoryIndexGenerator', () => {
|
||||
`);
|
||||
});
|
||||
|
||||
it('generates an entry for every CSF file when docsOptions.docsPage = automatic', async () => {
|
||||
const autodocsTrueOptions = {
|
||||
...autodocsOptions,
|
||||
docs: {
|
||||
...autodocsOptions.docs,
|
||||
autodocs: true,
|
||||
},
|
||||
};
|
||||
it('generates an entry for every CSF file when docsOptions.autodocs = true', async () => {
|
||||
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
|
||||
'./src/**/*.stories.(ts|js|jsx)',
|
||||
options
|
||||
);
|
||||
|
||||
const generator = new StoryIndexGenerator([specifier], {
|
||||
...docsPageOptions,
|
||||
docs: {
|
||||
...docsPageOptions.docs,
|
||||
docsPage: 'automatic',
|
||||
},
|
||||
});
|
||||
const generator = new StoryIndexGenerator([specifier], autodocsTrueOptions);
|
||||
await generator.initialize();
|
||||
|
||||
expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
|
||||
@ -464,7 +451,26 @@ describe('StoryIndexGenerator', () => {
|
||||
`);
|
||||
});
|
||||
|
||||
it('does not generate a docs page entry if there is a standalone entry with the same name', async () => {
|
||||
it('throws an error if you attach a MetaOf entry to a tagged autodocs entry', async () => {
|
||||
const csfSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
|
||||
'./src/B.stories.ts',
|
||||
options
|
||||
);
|
||||
|
||||
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
|
||||
'./errors/MetaOfAutodocs.mdx',
|
||||
options
|
||||
);
|
||||
|
||||
const generator = new StoryIndexGenerator([csfSpecifier, docsSpecifier], autodocsOptions);
|
||||
await generator.initialize();
|
||||
|
||||
await expect(generator.getIndex()).rejects.toThrowError(
|
||||
`You created a component docs page for B (./errors/MetaOfAutodocs.mdx), but also tagged the CSF file (./src/B.stories.ts) with 'autodocs'. This is probably a mistake.`
|
||||
);
|
||||
});
|
||||
|
||||
it('allows you to override autodocs with MetaOf if it is automatic', async () => {
|
||||
const csfSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
|
||||
'./src/A.stories.js',
|
||||
options
|
||||
@ -475,7 +481,10 @@ describe('StoryIndexGenerator', () => {
|
||||
options
|
||||
);
|
||||
|
||||
const generator = new StoryIndexGenerator([csfSpecifier, docsSpecifier], docsPageOptions);
|
||||
const generator = new StoryIndexGenerator(
|
||||
[csfSpecifier, docsSpecifier],
|
||||
autodocsTrueOptions
|
||||
);
|
||||
await generator.initialize();
|
||||
|
||||
expect(await generator.getIndex()).toMatchInlineSnapshot(`
|
||||
@ -519,7 +528,7 @@ describe('StoryIndexGenerator', () => {
|
||||
options
|
||||
);
|
||||
|
||||
const generator = new StoryIndexGenerator([specifier], docsPageOptions);
|
||||
const generator = new StoryIndexGenerator([specifier], autodocsOptions);
|
||||
await generator.initialize();
|
||||
|
||||
expect(await generator.getIndex()).toMatchInlineSnapshot(`
|
||||
@ -534,7 +543,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"./duplicate/SecondA.stories.js",
|
||||
],
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"docs",
|
||||
],
|
||||
"title": "duplicate/A",
|
||||
@ -545,7 +554,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"importPath": "./duplicate/A.stories.js",
|
||||
"name": "Story One",
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "duplicate/A",
|
||||
@ -556,7 +565,7 @@ describe('StoryIndexGenerator', () => {
|
||||
"importPath": "./duplicate/SecondA.stories.js",
|
||||
"name": "Story Two",
|
||||
"tags": Array [
|
||||
"docsPage",
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "duplicate/A",
|
||||
@ -575,7 +584,7 @@ describe('StoryIndexGenerator', () => {
|
||||
options
|
||||
);
|
||||
|
||||
const generator = new StoryIndexGenerator([csfSpecifier], docsPageOptions);
|
||||
const generator = new StoryIndexGenerator([csfSpecifier], autodocsOptions);
|
||||
await generator.initialize();
|
||||
|
||||
expect(await generator.getIndex()).toMatchInlineSnapshot(`
|
||||
@ -700,7 +709,7 @@ describe('StoryIndexGenerator', () => {
|
||||
...options,
|
||||
docs: {
|
||||
...options.docs,
|
||||
enabled: false,
|
||||
disable: true,
|
||||
},
|
||||
});
|
||||
await generator.initialize();
|
||||
|
||||
@ -67,7 +67,7 @@ const makeAbsolute = (otherImport: Path, normalizedPath: Path, workingDir: Path)
|
||||
*
|
||||
* A stories file is indexed by an indexer (passed in), which produces a list of stories.
|
||||
* - If the stories have the `parameters.docsOnly` setting, they are disregarded.
|
||||
* - If the indexer is a "docs template" indexer, OR docsPage is enabled,
|
||||
* - If the indexer is a "docs template" indexer, OR autodocs is enabled,
|
||||
* a templated docs entry is added pointing to the story file.
|
||||
*
|
||||
* A (modern) docs file is indexed, a standalone docs entry is added.
|
||||
@ -165,7 +165,7 @@ export class StoryIndexGenerator {
|
||||
this.isDocsMdx(absolutePath) ? false : this.extractStories(specifier, absolutePath)
|
||||
);
|
||||
|
||||
if (this.options.docs.enabled) {
|
||||
if (!this.options.docs.disable) {
|
||||
await this.updateExtracted(async (specifier, absolutePath) =>
|
||||
this.extractDocs(specifier, absolutePath)
|
||||
);
|
||||
@ -234,14 +234,14 @@ export class StoryIndexGenerator {
|
||||
}
|
||||
});
|
||||
|
||||
if (this.options.docs.enabled && csf.stories.length) {
|
||||
const { docsPage } = this.options.docs;
|
||||
const docsPageOptedIn =
|
||||
docsPage === 'automatic' || (docsPage && componentTags.includes('docsPage'));
|
||||
if (!this.options.docs.disable && csf.stories.length) {
|
||||
const { autodocs } = this.options.docs;
|
||||
const autodocsOptedIn =
|
||||
autodocs === true || (autodocs === 'tag' && componentTags.includes('autodocs'));
|
||||
// We need a docs entry attached to the CSF file if either:
|
||||
// a) it is a stories.mdx transpiled to CSF, OR
|
||||
// b) we have docs page enabled for this file
|
||||
if (componentTags.includes('mdx') || docsPageOptedIn) {
|
||||
if (componentTags.includes('mdx') || autodocsOptedIn) {
|
||||
const name = this.options.docs.defaultName;
|
||||
const id = toId(csf.meta.title, name);
|
||||
entries.unshift({
|
||||
@ -388,9 +388,14 @@ export class StoryIndexGenerator {
|
||||
`🚨 You have two component docs pages with the same name ${betterEntry.title}:${betterEntry.name}. ${changeDocsName}`
|
||||
);
|
||||
}
|
||||
// If one entry is standalone (i.e. .mdx of={}) we are OK with it overriding a template
|
||||
// - docs page templates, this is totally fine and expected
|
||||
// - not sure if it is even possible to have a .mdx of={} pointing at a stories.mdx file
|
||||
|
||||
// If you link a file to a tagged CSF file, you have probably made a mistake
|
||||
if (worseEntry.tags?.includes('autodocs'))
|
||||
throw new Error(
|
||||
`You created a component docs page for ${worseEntry.title} (${betterEntry.importPath}), but also tagged the CSF file (${worseEntry.importPath}) with 'autodocs'. This is probably a mistake.`
|
||||
);
|
||||
|
||||
// Otherwise the existing entry is created by `autodocs=true` which allowed to be overridden.
|
||||
} else {
|
||||
// If both entries are templates (e.g. you have two CSF files with the same title), then
|
||||
// we need to merge the entries. We'll use the the first one's name and importPath,
|
||||
|
||||
@ -2,7 +2,7 @@ const component = {};
|
||||
export default {
|
||||
component,
|
||||
title: 'duplicate/A',
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
|
||||
export const StoryOne = {};
|
||||
|
||||
@ -2,7 +2,7 @@ const component = {};
|
||||
export default {
|
||||
component,
|
||||
title: 'duplicate/A',
|
||||
tags: ['docsPage'],
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
|
||||
export const StoryTwo = {};
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import * as BStories from '../src/B.stories';
|
||||
|
||||
<Meta of={BStories} />
|
||||
|
||||
# Docs with of
|
||||
|
||||
hello docs
|
||||
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