GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 16:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into ts-migration/polymer

Browse Source
This commit is contained in:
Norbert de Langen 2019-11-21 12:39:40 +01:00 committed by GitHub
commit 2d70ce247b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
344 changed files with 2375 additions and 1784 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@ -1,3 +1,22 @@
## 5.3.0-beta.3 (November 21, 2019)
### Features
* Addon-docs: Rich props table UI ([#8887](https://github.com/storybookjs/storybook/pull/8887))
* Addon-docs: Improve basic support for Flow props ([#8890](https://github.com/storybookjs/storybook/pull/8890))
* CLI: Avoid id changes after `storiesof-to-csf` migration ([#8856](https://github.com/storybookjs/storybook/pull/8856))
### Bug Fixes
* Addon-docs: Fix props table for sections props ([#8904](https://github.com/storybookjs/storybook/pull/8904))
* Addon-docs: Fix Description block when no component provided ([#8902](https://github.com/storybookjs/storybook/pull/8902))
* Angular: Fix project without `architect.build` option ([#6737](https://github.com/storybookjs/storybook/pull/6737))
### Maintenance
* Addon-docs: Docgen lib maintenance ([#8896](https://github.com/storybookjs/storybook/pull/8896))
* Examples: Fix stories glob in official-storybook ([#8888](https://github.com/storybookjs/storybook/pull/8888))
## 5.3.0-beta.2 (November 19, 2019)
### Features

10
MIGRATION.md
View File

@ -125,15 +125,19 @@ Addon-docs configuration gets simpler in 5.3. In 5.2, each framework had its own
We've deprecated the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar). From Storybook 6.0 we will have a single separator `/`, which cannot be configured.
If you are currently using using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, (we will soon provide) a codemod that can be used to rename all your components.
If you are currently using using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename all your components.
If you were using `|` and wish to keep the "root" behaviour, use the `showRoots: true` option to re-enable roots:
```
yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
```
If you were using `|` and wish to keep the "root" behavior, use the `showRoots: true` option to re-enable roots:
```js
addParameters({ options: { showRoots: true } });
```
NOTE: it is no longer possible to have some stories with roots and others without. If you want to keep the old behaviour, simply add a root called "Others" to all your previously unrooted stories.
NOTE: it is no longer possible to have some stories with roots and others without. If you want to keep the old behavior, simply add a root called "Others" to all your previously unrooted stories.
## From version 5.1.x to 5.2.x

14
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -33,12 +33,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"axe-core": "^3.3.2",
"core-js": "^3.0.1",
"global": "^4.3.2",

14
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -28,12 +28,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",

14
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -32,12 +32,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",

4
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
@ -29,7 +29,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"

10
addons/contexts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook Addon Contexts",
"keywords": [
"preact",
@ -27,10 +27,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0"

10
addons/cssresources/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@ -32,10 +32,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"

14
addons/design-assets/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@ -34,12 +34,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

21
addons/docs/docs/docspage.md
View File

@ -8,6 +8,7 @@ When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config d
- [Motivation](#motivation)
- [Component parameter](#component-parameter)
- [Subcomponents parameter](#subcomponents-parameter)
- [DocsPage slots](#docspage-slots)
- [Replacing DocsPage](#replacing-docspage)
- [Story file names](#story-file-names)
@ -54,6 +55,26 @@ storiesOf('Path/to/Badge', module).addParameters({ component: Badge });
If you're coming from the `storiesOf` format, there's [a codemod that adds it for you](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#add-component-parameters).
## Subcomponents parameter
Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `List` and `ListItem` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
```js
import { List, ListHeading, ListItem } from './List';
export default {
title: 'Path/to/List',
component: List,
subcomponents: { ListHeading, ListItem },
};
```
Subcomponent prop tables will show up in a tabbed interface along with the primary component, and the tab titles will correspond to the keys of the `subcomponents` object.
<img src="./media/docspage-subcomponents.png" width="100%" />
If you want organize your documentation differently for groups of components, we recommend trying [MDX](./mdx.md) which is completely flexible to support any configuration.
## DocsPage slots
`DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.

BIN
addons/docs/docs/media/docspage-subcomponents.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

49
addons/docs/docs/multiframework.md
View File

@ -1,45 +1,36 @@
# Storybook Docs framework dev guide
Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to set up a new framework in docs.
Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to optimize a new framework in docs.
- [Adding a preset](#adding-a-preset)
- [Framework-specific configuration](#framework-specific-configuration)
- [Props tables](#props-tables)
- [Component descriptions](#component-descriptions)
- [Inline story rendering](#inline-story-rendering)
## Adding a preset
## Framework-specific configuration
To get basic support, you need to add a [preset](https://storybook.js.org/docs/presets/introduction). By default this doesn't need to do much.
Your framework might need framework-specific configuration. This could include adding extra webpack loaders or global decorators/story parameters.
Here's a basic preset for `@storybook/html` in `addons/docs/html/preset.js`:
Addon-docs handles this kind of customization by file naming convention. Its [common preset](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts) does this by looking for files `../<framework>/{preset,config}.[tj]sx?`, where `<framework>` is the framework identifier, e.g. `vue`, `angular`, `react`, etc.
```js
module.exports = require('../dist/frameworks/common/makePreset').default('html');
For example, consider Storybook Docs for Vue, which needs `vue-docgen-loader` in its webpack config, and also has custom extraction functions for [props tables](#props-tables) and [component descriptions](#component-descriptions).
For webpack configuration, Docs for Vue defines [preset.ts](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/preset.ts), which follows the [preset](https://storybook.js.org/docs/presets/introduction) file structure:
```
export function webpack(webpackConfig: any = {}, options: any = {}) {
webpackConfig.module.rules.push({
test: /\.vue$/,
loader: 'vue-docgen-loader',
enforce: 'post',
});
return webpackConfig;
}
```
This automatically adds [DocsPage](./docspage.md) for each story, as well as webpack/babel settings for MDX support.
This appends `vue-docgen-loader` to the existing configuration, which at this point will also include modifications made by the common preset.
There is also a little hoop-jumping that will hopefully be unnecessary soon.
`addons/docs/src/frameworks/html/config.js`
```js
import { addParameters } from '@storybook/html';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
},
});
```
`addons/docs/html/config.js`
```js
module.exports = require('../dist/frameworks/html/config');
```
For props tables and descriptions, both of which are described in more detail below, it defines a file [config.tsx](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/config.tsx).
## Props tables

16
addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Superior documentation for your components",
"keywords": [
"addon",
@ -45,13 +45,13 @@
"@mdx-js/loader": "^1.1.0",
"@mdx-js/mdx": "^1.1.0",
"@mdx-js/react": "^1.0.27",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/postinstall": "5.3.0-beta.2",
"@storybook/router": "5.3.0-beta.2",
"@storybook/source-loader": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/postinstall": "5.3.0-beta.3",
"@storybook/router": "5.3.0-beta.3",
"@storybook/source-loader": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"acorn": "^7.1.0",
"acorn-jsx": "^5.1.0",
"acorn-walk": "^7.0.0",

2
addons/docs/src/blocks/Description.tsx
View File

@ -2,7 +2,7 @@ import React, { FunctionComponent, useContext } from 'react';
import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
import { Component, CURRENT_SELECTION, DescriptionSlot } from './shared';
import { str } from '../lib/docgen/utils';
import { str } from '../lib/docgen';
export enum DescriptionType {
INFO = 'info',

22
addons/docs/src/blocks/Props.tsx
View File

@ -5,6 +5,8 @@ import {
PropsTable,
PropsTableError,
PropsTableProps,
PropsTableRowsProps,
PropsTableSectionsProps,
PropDef,
TabsState,
} from '@storybook/components';
@ -37,6 +39,9 @@ const inferPropsExtractor = (framework: string): PropsExtractor | null => {
}
};
const filterRows = (rows: PropDef[], exclude: string[]) =>
rows && rows.filter((row: PropDef) => !exclude.includes(row.name));
export const getComponentProps = (
component: Component,
{ exclude }: PropsProps,
@ -49,16 +54,25 @@ export const getComponentProps = (
const params = parameters || {};
const { framework = null } = params;
const { extractProps = inferPropsExtractor(framework) } = params.docs || {};
const { extractProps = inferPropsExtractor(framework) }: { extractProps: PropsExtractor } =
params.docs || {};
if (!extractProps) {
throw new Error(PropsTableError.PROPS_UNSUPPORTED);
}
let { rows } = extractProps(component);
let props = extractProps(component);
if (!isNil(exclude)) {
rows = rows.filter((row: PropDef) => !exclude.includes(row.name));
const { rows } = props as PropsTableRowsProps;
const { sections } = props as PropsTableSectionsProps;
if (rows) {
props = { rows: filterRows(rows, exclude) };
} else if (sections) {
Object.keys(sections).forEach(section => {
sections[section] = filterRows(sections[section], exclude);
});
}
}
return { rows };
return props;
} catch (err) {
return { error: err.message };
}

1
addons/docs/src/frameworks/common/index.ts
View File

@ -1 +0,0 @@
export * from '../../lib/docgen';

4
addons/docs/src/frameworks/react/extractProps.ts
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { isForwardRef, isMemo } from 'react-is';
import { PropDef } from '@storybook/components';
import { hasDocgen, extractPropsFromDocgen, PropsExtractor, TypeSystem } from '../../lib/docgen';
import { hasDocgen, extractComponentProps, PropsExtractor, TypeSystem } from '../../lib/docgen';
import { Component } from '../../blocks/shared';
import { enhancePropTypesProps } from './propTypes/handleProp';
@ -32,7 +32,7 @@ function getPropDefs(component: Component, section: string): PropDef[] {
}
}
const extractedProps = extractPropsFromDocgen(processedComponent, section);
const extractedProps = extractComponentProps(processedComponent, section);
if (extractedProps.length === 0) {
return [];
}

21
addons/docs/src/frameworks/react/propTypes/createDefaultValue.ts
View File

@ -1,6 +1,6 @@
import { isNil } from 'lodash';
// @ts-ignore
import { PropDefaultValue, PropSummaryValue } from '@storybook/components';
import { PropDefaultValue } from '@storybook/components';
import { inspectValue } from '../inspection/inspectValue';
import { OBJECT_CAPTION, FUNCTION_CAPTION, ELEMENT_CAPTION, ARRAY_CAPTION } from './captions';
import { generateCode } from './generateCode';
@ -11,12 +11,7 @@ import {
InspectionElement,
} from '../inspection/types';
import { isHtmlTag } from './isHtmlTag';
const MAX_SUMMARY_LENGTH = 50;
function isTooLongForSummary(value: string): boolean {
return value.length > MAX_SUMMARY_LENGTH;
}
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib';
// TODO: Fix this any type.
function getPrettyIdentifier(inferedType: any): string {
@ -32,10 +27,6 @@ function getPrettyIdentifier(inferedType: any): string {
}
}
function createSummaryValue(summary: string, detail?: string): PropSummaryValue {
return { summary, detail };
}
function generateObject({ ast }: InspectionResult): PropDefaultValue {
let prettyCaption = generateCode(ast, true);
@ -45,7 +36,7 @@ function generateObject({ ast }: InspectionResult): PropDefaultValue {
prettyCaption = `${prettyCaption.slice(0, -1)} }`;
}
return !isTooLongForSummary(prettyCaption)
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(OBJECT_CAPTION, generateCode(ast));
}
@ -59,7 +50,7 @@ function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue
const prettyCaption = generateCode(ast, true);
return !isTooLongForSummary(prettyCaption)
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(FUNCTION_CAPTION, generateCode(ast));
}
@ -84,7 +75,7 @@ function generateElement(
}
}
return !isTooLongForSummary(defaultValue)
return !isTooLongForDefaultValueSummary(defaultValue)
? createSummaryValue(defaultValue)
: createSummaryValue(ELEMENT_CAPTION, defaultValue);
}
@ -92,7 +83,7 @@ function generateElement(
function generateArray({ ast }: InspectionResult): PropDefaultValue {
const prettyCaption = generateCode(ast, true);
return !isTooLongForSummary(prettyCaption)
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(ARRAY_CAPTION, generateCode(ast));
}

18
addons/docs/src/frameworks/react/propTypes/createType.ts
View File

@ -1,5 +1,6 @@
import { isNil } from 'lodash';
import { PropSummaryValue, PropType } from '@storybook/components';
import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
import { inspectValue } from '../inspection/inspectValue';
import { generateCode } from './generateCode';
@ -15,8 +16,6 @@ import {
import { InspectionType } from '../inspection/types';
import { isHtmlTag } from './isHtmlTag';
const MAX_SUMMARY_LENGTH = 35;
enum PropTypesType {
CUSTOM = 'custom',
ANY = 'any',
@ -90,15 +89,11 @@ function getCaptionFromInspectionType(type: InspectionType): string {
}
}
function isTooLongForSummary(value: string): boolean {
return value.length > MAX_SUMMARY_LENGTH;
}
function generateValuesForObjectAst(ast: any): [string, string] {
let summary = prettyObject(ast, true);
let detail;
if (!isTooLongForSummary(summary)) {
if (!isTooLongForTypeSummary(summary)) {
detail = summary;
} else {
summary = OBJECT_CAPTION;
@ -188,7 +183,7 @@ function generateObjectOf(type: DocgenPropType, extractedProp: ExtractedProp): T
let { summary, detail } = value;
if (name === PropTypesType.SHAPE) {
if (!isTooLongForSummary(detail)) {
if (!isTooLongForTypeSummary(detail)) {
summary = detail;
}
}
@ -350,15 +345,12 @@ export function createType(extractedProp: ExtractedProp): PropType {
case PropTypesType.ARRAYOF: {
const { summary, detail } = generateType(type, extractedProp).value;
return {
summary,
detail: summary !== detail ? detail : undefined,
};
return createSummaryValue(summary, summary !== detail ? detail : undefined);
}
case PropTypesType.FUNC: {
const { detail } = generateType(type, extractedProp).value;
return { summary: detail };
return createSummaryValue(detail);
}
default:
return null;

8
addons/docs/src/frameworks/react/propTypes/handleProp.test.ts
View File

@ -3,7 +3,7 @@
import { PropDef } from '@storybook/components';
import PropTypes from 'prop-types';
import { Component } from '../../../blocks/shared';
import { extractPropsFromDocgen, DocgenInfo } from '../../../lib/docgen';
import { extractComponentProps, DocgenInfo } from '../../../lib/docgen';
import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp';
const DOCGEN_SECTION = 'props';
@ -43,7 +43,7 @@ function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} })
}
function extractPropDef(component: Component): PropDef {
return enhancePropTypesProp(extractPropsFromDocgen(component, DOCGEN_SECTION)[0]);
return enhancePropTypesProp(extractComponentProps(component, DOCGEN_SECTION)[0]);
}
describe('enhancePropTypesProp', () => {
@ -914,7 +914,7 @@ describe('enhancePropTypesProps', () => {
});
const props = enhancePropTypesProps(
extractPropsFromDocgen(component, DOCGEN_SECTION),
extractComponentProps(component, DOCGEN_SECTION),
component
);
@ -945,7 +945,7 @@ describe('enhancePropTypesProps', () => {
});
const props = enhancePropTypesProps(
extractPropsFromDocgen(component, DOCGEN_SECTION),
extractComponentProps(component, DOCGEN_SECTION),
component
);

2
addons/docs/src/frameworks/vue/config.tsx
View File

@ -4,7 +4,7 @@ import toReact from '@egoist/vue-to-react';
import { StoryFn } from '@storybook/addons';
import { addParameters } from '@storybook/client-api';
import { extractProps } from './extractProps';
import { extractComponentDescription } from '../../lib/docgen/utils';
import { extractComponentDescription } from '../../lib/docgen';
addParameters({
docs: {

4
addons/docs/src/frameworks/vue/extractProps.ts
View File

@ -1,5 +1,5 @@
import { PropDef } from '@storybook/components';
import { PropsExtractor, hasDocgen, extractPropsFromDocgen } from '../../lib/docgen';
import { PropsExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen';
const SECTIONS = ['props', 'events', 'slots'];
@ -9,7 +9,7 @@ export const extractProps: PropsExtractor = component => {
}
const sections: Record<string, PropDef[]> = {};
SECTIONS.forEach(section => {
sections[section] = extractPropsFromDocgen(component, section).map(x => x.propDef);
sections[section] = extractComponentProps(component, section).map(x => x.propDef);
});
return { sections };
};

23
addons/docs/src/lib/docgen/createDefaultValue.ts
View File

@ -1,23 +0,0 @@
import { isNil } from 'lodash';
import { PropDefaultValue } from '@storybook/components';
import { DocgenPropDefaultValue } from './types';
const BLACKLIST = ['null', 'undefined'];
function isDefaultValueBlacklisted(value: string) {
return BLACKLIST.some(x => x === value);
}
export function createDefaultValue(defaultValue: DocgenPropDefaultValue): PropDefaultValue {
if (!isNil(defaultValue)) {
const { value } = defaultValue;
if (!isDefaultValueBlacklisted(value)) {
return {
summary: value,
};
}
}
return null;
}

73
addons/docs/src/lib/docgen/createPropDef.ts
View File

@ -1,8 +1,10 @@
import { isNil } from 'lodash';
import { PropDef } from '@storybook/components';
import { TypeSystem, DocgenInfo, DocgenType } from './types';
import { PropDef, PropDefaultValue } from '@storybook/components';
import { TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types';
import { JsDocParsingResult } from '../jsdocParser';
import { createDefaultValue } from './createDefaultValue';
import { createSummaryValue } from '../utils';
import { createFlowPropDef } from './flow/createPropDef';
import { isDefaultValueBlacklisted } from './utils/defaultValue';
export type PropDefFactory = (
propName: string,
@ -10,30 +12,36 @@ export type PropDefFactory = (
jsDocParsingResult?: JsDocParsingResult
) => PropDef;
function createDefaultValue(defaultValue: DocgenPropDefaultValue): PropDefaultValue {
if (!isNil(defaultValue)) {
const { value } = defaultValue;
if (!isDefaultValueBlacklisted(value)) {
return createSummaryValue(value);
}
}
return null;
}
function createBasicPropDef(name: string, type: DocgenType, docgenInfo: DocgenInfo): PropDef {
const { description, required, defaultValue } = docgenInfo;
return {
name,
type: { summary: type.name },
type: createSummaryValue(type.name),
required,
description,
defaultValue: createDefaultValue(defaultValue),
};
}
function createPropDef(
name: string,
type: DocgenType,
docgenInfo: DocgenInfo,
jsDocParsingResult: JsDocParsingResult
): PropDef {
const propDef = createBasicPropDef(name, type, docgenInfo);
function applyJsDocResult(propDef: PropDef, jsDocParsingResult: JsDocParsingResult): PropDef {
if (jsDocParsingResult.includesJsDoc) {
const { description, extractedTags } = jsDocParsingResult;
if (!isNil(description)) {
// eslint-disable-next-line no-param-reassign
propDef.description = jsDocParsingResult.description;
}
@ -41,6 +49,7 @@ function createPropDef(
const hasReturns = !isNil(extractedTags.returns) && !isNil(extractedTags.returns.type);
if (hasParams || hasReturns) {
// eslint-disable-next-line no-param-reassign
propDef.jsDocTags = {
params:
hasParams &&
@ -53,36 +62,28 @@ function createPropDef(
return propDef;
}
export const javaScriptFactory: PropDefFactory = (
propName: string,
docgenInfo: DocgenInfo,
jsDocParsingResult?: JsDocParsingResult
) => {
return createPropDef(propName, docgenInfo.type, docgenInfo, jsDocParsingResult);
export const javaScriptFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
const propDef = createBasicPropDef(propName, docgenInfo.type, docgenInfo);
return applyJsDocResult(propDef, jsDocParsingResult);
};
export const tsFactory: PropDefFactory = (
propName: string,
docgenInfo: DocgenInfo,
jsDocParsingResult?: JsDocParsingResult
) => {
return createPropDef(propName, docgenInfo.tsType, docgenInfo, jsDocParsingResult);
export const tsFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
const propDef = createBasicPropDef(propName, docgenInfo.tsType, docgenInfo);
return applyJsDocResult(propDef, jsDocParsingResult);
};
export const flowFactory: PropDefFactory = (
propName: string,
docgenInfo: DocgenInfo,
jsDocParsingResult?: JsDocParsingResult
) => {
return createPropDef(propName, docgenInfo.flowType, docgenInfo, jsDocParsingResult);
export const flowFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
const propDef = createFlowPropDef(propName, docgenInfo);
return applyJsDocResult(propDef, jsDocParsingResult);
};
export const unknownFactory: PropDefFactory = (
propName: string,
docgenInfo: DocgenInfo,
jsDocParsingResult?: JsDocParsingResult
) => {
return createPropDef(propName, { name: 'unknown' }, docgenInfo, jsDocParsingResult);
export const unknownFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
const propDef = createBasicPropDef(propName, { name: 'unknown' }, docgenInfo);
return applyJsDocResult(propDef, jsDocParsingResult);
};
export const getPropDefFactory = (typeSystem: TypeSystem): PropDefFactory => {

165
addons/docs/src/lib/docgen/extractDocgenProps.test.ts
View File

@ -1,7 +1,7 @@
/* eslint-disable no-underscore-dangle */
import { Component } from '../../blocks/shared';
import { extractPropsFromDocgen } from './extractDocgenProps';
import { extractComponentProps } from './extractDocgenProps';
const DOCGEN_SECTION = 'props';
const PROP_NAME = 'propName';
@ -14,6 +14,7 @@ interface TypeSystemDef {
const TypeSystems: TypeSystemDef[] = [
{ name: 'javascript', typeProperty: 'type' },
{ name: 'typescript', typeProperty: 'tsType' },
{ name: 'flow', typeProperty: 'flowType' },
];
function createType(typeName: string, others: Record<string, any> = {}): Record<string, string> {
@ -53,103 +54,127 @@ function createComponent(docgenInfo: Record<string, any>): Component {
}
TypeSystems.forEach(x => {
it('should map defaults docgen info properly', () => {
const component = createComponent({
...createStringType(x),
description: 'Hey! Hey!',
defaultValue: {
value: 'Default',
},
describe(`${x.name}`, () => {
it('should map defaults docgen info properly', () => {
const component = createComponent({
...createStringType(x),
description: 'Hey! Hey!',
defaultValue: {
value: 'Default',
},
});
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
expect(propDef.name).toBe(PROP_NAME);
expect(propDef.type.summary).toBe('string');
expect(propDef.description).toBe('Hey! Hey!');
expect(propDef.required).toBe(false);
expect(propDef.defaultValue.summary).toBe('Default');
});
const { propDef } = extractPropsFromDocgen(component, DOCGEN_SECTION)[0];
it('should remove JSDoc tags from the description', () => {
const component = createComponent({
...createStringType(x),
description: 'Hey!\n@param event\nreturns {string}',
});
expect(propDef.name).toBe(PROP_NAME);
expect(propDef.type.summary).toBe('string');
expect(propDef.description).toBe('Hey! Hey!');
expect(propDef.required).toBe(false);
expect(propDef.defaultValue.summary).toBe('Default');
});
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
it('should remove JSDoc tags from the description', () => {
const component = createComponent({
...createStringType(x),
description: 'Hey!\n@param event\nreturns {string}',
expect(propDef.description).toBe('Hey!');
});
const { propDef } = extractPropsFromDocgen(component, DOCGEN_SECTION)[0];
it('should not remove newline characters of multilines description without JSDoc tags', () => {
const component = createComponent({
...createStringType(x),
description: 'onClick description\nis a\nmulti-lines\ndescription',
});
expect(propDef.description).toBe('Hey!');
});
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
it('should not remove newline characters of multilines description without JSDoc tags', () => {
const component = createComponent({
...createStringType(x),
description: 'onClick description\nis a\nmulti-lines\ndescription',
expect(propDef.description).toBe('onClick description\nis a\nmulti-lines\ndescription');
});
const { propDef } = extractPropsFromDocgen(component, DOCGEN_SECTION)[0];
it('should not remove newline characters of multilines description with JSDoc tags', () => {
const component = createComponent({
...createFuncType(x),
description: 'onClick description\nis a\nmulti-lines\ndescription\n@param event',
});
expect(propDef.description).toBe('onClick description\nis a\nmulti-lines\ndescription');
});
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
it('should not remove newline characters of multilines description with JSDoc tags', () => {
const component = createComponent({
...createFuncType(x),
description: 'onClick description\nis a\nmulti-lines\ndescription\n@param event',
expect(propDef.description).toBe('onClick description\nis a\nmulti-lines\ndescription');
});
const { propDef } = extractPropsFromDocgen(component, DOCGEN_SECTION)[0];
it('should not remove markdown from description without JSDoc tags', () => {
const component = createComponent({
...createStringType(x),
description: 'onClick *emphasis*, **strong**, `formatted` description.',
});
expect(propDef.description).toBe('onClick description\nis a\nmulti-lines\ndescription');
});
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
it('should not remove markdown from description without JSDoc tags', () => {
const component = createComponent({
...createStringType(x),
description: 'onClick *emphasis*, **strong**, `formatted` description.',
expect(propDef.description).toBe('onClick *emphasis*, **strong**, `formatted` description.');
});
const { propDef } = extractPropsFromDocgen(component, DOCGEN_SECTION)[0];
it('should not remove markdown from description with JSDoc tags', () => {
const component = createComponent({
...createFuncType(x),
description: 'onClick *emphasis*, **strong**, `formatted` description.\n@param event',
});
expect(propDef.description).toBe('onClick *emphasis*, **strong**, `formatted` description.');
});
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
it('should not remove markdown from description with JSDoc tags', () => {
const component = createComponent({
...createFuncType(x),
description: 'onClick *emphasis*, **strong**, `formatted` description.\n@param event',
expect(propDef.description).toBe('onClick *emphasis*, **strong**, `formatted` description.');
});
const { propDef } = extractPropsFromDocgen(component, DOCGEN_SECTION)[0];
it('should return null when the property is marked with @ignore', () => {
const component = createComponent({
...createStringType(x),
description: 'onClick description\n@ignore',
});
expect(propDef.description).toBe('onClick *emphasis*, **strong**, `formatted` description.');
});
it('should return null when the property is marked with @ignore', () => {
const component = createComponent({
...createStringType(x),
description: 'onClick description\n@ignore',
expect(extractComponentProps(component, DOCGEN_SECTION).length).toBe(0);
});
expect(extractPropsFromDocgen(component, DOCGEN_SECTION).length).toBe(0);
});
it('should provide raw @param tags', () => {
const component = createComponent({
...createFuncType(x),
description:
'onClick description\n@param {SyntheticEvent} event - Original event.\n@param {string} value',
});
it('should provide raw @param tags', () => {
const component = createComponent({
...createFuncType(x),
description:
'onClick description\n@param {SyntheticEvent} event - Original event.\n@param {string} value',
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
expect(propDef.description).toBe('onClick description');
expect(propDef.jsDocTags).toBeDefined();
expect(propDef.jsDocTags.params).toBeDefined();
expect(propDef.jsDocTags.params[0].name).toBe('event');
expect(propDef.jsDocTags.params[0].description).toBe('Original event.');
expect(propDef.jsDocTags.params[1].name).toBe('value');
expect(propDef.jsDocTags.params[1].description).toBeNull();
});
const { propDef } = extractPropsFromDocgen(component, DOCGEN_SECTION)[0];
it("should not return 'null' default value", () => {
const component = createComponent({
...createStringType(x),
defaultValue: { value: 'null' },
});
expect(propDef.description).toBe('onClick description');
expect(propDef.jsDocTags).toBeDefined();
expect(propDef.jsDocTags.params).toBeDefined();
expect(propDef.jsDocTags.params[0].name).toBe('event');
expect(propDef.jsDocTags.params[0].description).toBe('Original event.');
expect(propDef.jsDocTags.params[1].name).toBe('value');
expect(propDef.jsDocTags.params[1].description).toBeNull();
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
expect(propDef.defaultValue).toBeNull();
});
it("should not return 'undefined' default value", () => {
const component = createComponent({
...createStringType(x),
defaultValue: { value: 'undefined' },
});
const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
expect(propDef.defaultValue).toBeNull();
});
});
});

8
addons/docs/src/lib/docgen/extractDocgenProps.ts
View File

@ -3,7 +3,7 @@ import { PropDef } from '@storybook/components';
import { Component } from '../../blocks/shared';
import { ExtractedJsDoc, parseJsDoc } from '../jsdocParser';
import { DocgenInfo, TypeSystem } from './types';
import { getDocgenSection, isValidDocgenSection } from './utils';
import { getDocgenSection, isValidDocgenSection, getDocgenDescription } from './utils';
import { getPropDefFactory, PropDefFactory } from './createPropDef';
export interface ExtractedProp {
@ -31,7 +31,7 @@ const getTypeSystem = (docgenInfo: DocgenInfo): TypeSystem => {
return TypeSystem.UNKNOWN;
};
export const extractPropsFromDocgen: ExtractProps = (component, section) => {
export const extractComponentProps: ExtractProps = (component, section) => {
const docgenSection = getDocgenSection(component, section);
if (!isValidDocgenSection(docgenSection)) {
@ -75,3 +75,7 @@ function extractProp(
return null;
}
export function extractComponentDescription(component?: Component): string {
return !isNil(component) && getDocgenDescription(component);
}

22
addons/docs/src/lib/docgen/flow/createDefaultValue.ts Normal file
View File

@ -0,0 +1,22 @@
import { PropDefaultValue } from '@storybook/components';
import { isNil } from 'lodash';
import { DocgenPropDefaultValue, DocgenPropType } from '../types';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../utils';
import { isDefaultValueBlacklisted } from '../utils/defaultValue';
export function createDefaultValue(
defaultValue: DocgenPropDefaultValue,
type: DocgenPropType
): PropDefaultValue {
if (!isNil(defaultValue)) {
const { value } = defaultValue;
if (!isDefaultValueBlacklisted(value)) {
return !isTooLongForDefaultValueSummary(value)
? createSummaryValue(value)
: createSummaryValue(type.name, value);
}
}
return null;
}

242
addons/docs/src/lib/docgen/flow/createPropDef.test.ts Normal file
View File

@ -0,0 +1,242 @@
import { isNil } from 'lodash';
import { createFlowPropDef } from './createPropDef';
import { DocgenInfo, DocgenFlowType } from '../types';
const PROP_NAME = 'propName';
function createDocgenInfo({
type,
defaultValue,
...rest
}: {
type: DocgenFlowType;
defaultValue?: string;
}): DocgenInfo {
return {
flowType: type,
defaultValue: !isNil(defaultValue) ? { value: defaultValue } : undefined,
required: false,
...rest,
};
}
describe('type', () => {
['string', 'number', 'boolean', 'any', 'void', 'Object', 'String', 'MyClass', 'literal'].forEach(
x => {
it(`should support ${x}`, () => {
const docgenInfo = createDocgenInfo({
type: { name: x },
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe(x);
expect(type.detail).toBeUndefined();
});
}
);
['Array', 'Class', 'MyClass'].forEach(x => {
it(`should support untyped ${x}`, () => {
const docgenInfo = createDocgenInfo({
type: { name: x },
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe(x);
expect(type.detail).toBeUndefined();
});
it(`should support typed ${x}`, () => {
const docgenInfo = createDocgenInfo({
type: {
name: x,
elements: [
{
name: 'any',
},
],
raw: `${x}<any>`,
},
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe(`${x}<any>`);
expect(type.detail).toBeUndefined();
});
});
it('should support short object signature', () => {
const docgenInfo = createDocgenInfo({
type: {
name: 'signature',
type: 'object',
raw: '{ foo: string, bar?: mixed }',
signature: {
properties: [
{
key: 'foo',
value: {
name: 'string',
required: true,
},
},
{
key: 'bar',
value: {
name: 'mixed',
required: false,
},
},
],
},
},
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('{ foo: string, bar?: mixed }');
expect(type.detail).toBeUndefined();
});
it('should support long object signature', () => {
const docgenInfo = createDocgenInfo({
type: {
name: 'signature',
type: 'object',
raw: '{ (x: string): void, prop: string }',
signature: {
properties: [
{
key: 'prop',
value: {
name: 'string',
required: true,
},
},
],
constructor: {
name: 'signature',
type: 'function',
raw: '(x: string): void',
signature: {
arguments: [
{
name: 'x',
type: {
name: 'string',
},
},
],
return: {
name: 'void',
},
},
},
},
},
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('object');
expect(type.detail).toBe('{ (x: string): void, prop: string }');
});
it('should support func signature', () => {
const docgenInfo = createDocgenInfo({
type: {
name: 'signature',
type: 'function',
raw: '(x: string) => void',
signature: {
arguments: [
{
name: 'x',
type: {
name: 'string',
},
},
],
return: {
name: 'void',
},
},
},
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('(x: string) => void');
expect(type.detail).toBeUndefined();
});
it('should support tuple', () => {
const docgenInfo = createDocgenInfo({
type: {
name: 'tuple',
raw: '[foo, "value", number]',
elements: [
{
name: 'foo',
},
{
name: 'literal',
value: '"value"',
},
{
name: 'number',
},
],
},
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('[foo, "value", number]');
});
it('should support union', () => {
const docgenInfo = createDocgenInfo({
type: {
name: 'union',
raw: 'number | string',
elements: [
{
name: 'number',
},
{
name: 'string',
},
],
},
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('number | string');
});
it('should support intersection', () => {
const docgenInfo = createDocgenInfo({
type: {
name: 'intersection',
raw: 'number & string',
elements: [
{
name: 'number',
},
{
name: 'string',
},
],
},
});
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('number & string');
});
});

15
addons/docs/src/lib/docgen/flow/createPropDef.ts Normal file
View File

@ -0,0 +1,15 @@
import { PropDefFactory } from '../createPropDef';
import { createType } from './createType';
import { createDefaultValue } from './createDefaultValue';
export const createFlowPropDef: PropDefFactory = (propName, docgenInfo) => {
const { flowType, description, required, defaultValue } = docgenInfo;
return {
name: propName,
type: createType(flowType),
required,
description,
defaultValue: createDefaultValue(defaultValue, flowType),
};
};

66
addons/docs/src/lib/docgen/flow/createType.ts Normal file
View File

@ -0,0 +1,66 @@
import { PropType } from '@storybook/components';
import { isNil } from 'lodash';
import { DocgenFlowType } from '../types';
import { createSummaryValue, isTooLongForTypeSummary } from '../../utils';
enum FlowTypesType {
UNION = 'union',
SIGNATURE = 'signature',
}
interface DocgenFlowUnionType extends DocgenFlowType {
elements: { name: string; value: string }[];
}
function generateUnion({ name, raw, elements }: DocgenFlowUnionType): PropType {
if (!isNil(raw)) {
return createSummaryValue(raw);
}
if (!isNil(elements)) {
return createSummaryValue(elements.map(x => x.value).join(' | '));
}
return createSummaryValue(name);
}
function generateFuncSignature({ type, raw }: DocgenFlowType): PropType {
if (!isNil(raw)) {
return createSummaryValue(raw);
}
return createSummaryValue(type);
}
function generateObjectSignature({ type, raw }: DocgenFlowType): PropType {
if (!isNil(raw)) {
return !isTooLongForTypeSummary(raw) ? createSummaryValue(raw) : createSummaryValue(type, raw);
}
return createSummaryValue(type);
}
function generateSignature(flowType: DocgenFlowType): PropType {
const { type } = flowType;
return type === 'object' ? generateObjectSignature(flowType) : generateFuncSignature(flowType);
}
function generateDefault({ name, raw }: DocgenFlowType): PropType {
if (!isNil(raw)) {
return !isTooLongForTypeSummary(raw) ? createSummaryValue(raw) : createSummaryValue(name, raw);
}
return createSummaryValue(name);
}
export function createType(type: DocgenFlowType): PropType {
switch (type.name) {
case FlowTypesType.UNION:
return generateUnion(type as DocgenFlowUnionType);
case FlowTypesType.SIGNATURE:
return generateSignature(type);
default:
return generateDefault(type);
}
}

8
addons/docs/src/lib/docgen/types.ts
View File

@ -15,8 +15,12 @@ export interface DocgenPropType extends DocgenBaseType {
computed?: boolean;
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface DocgenFlowType extends DocgenBaseType {}
export interface DocgenFlowType extends DocgenBaseType {
type?: string;
raw?: string;
signature?: any;
elements?: any[];
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface DocgenTypeScriptType extends DocgenBaseType {}

5
addons/docs/src/lib/docgen/utils/defaultValue.ts Normal file
View File

@ -0,0 +1,5 @@
const BLACKLIST = ['null', 'undefined'];
export function isDefaultValueBlacklisted(value: string): boolean {
return BLACKLIST.some(x => x === value);
}

18
addons/docs/src/lib/docgen/utils.ts → addons/docs/src/lib/docgen/utils/docgen.ts
View File

@ -1,17 +1,8 @@
/* eslint-disable no-underscore-dangle */
import { isNil } from 'lodash';
import { Component } from '../../blocks/shared';
export const str = (obj: any) => {
if (!obj) {
return '';
}
if (typeof obj === 'string') {
return obj as string;
}
throw new Error(`Description: expected string, got: ${JSON.stringify(obj)}`);
};
import { Component } from '../../../blocks/shared';
import { str } from './string';
export function hasDocgen(component: Component): boolean {
return !!component.__docgenInfo;
@ -25,5 +16,6 @@ export function getDocgenSection(component: Component, section: string): any {
return hasDocgen(component) ? component.__docgenInfo[section] : null;
}
export const extractComponentDescription = (component?: Component) =>
component && hasDocgen(component) && str(component.__docgenInfo.description);
export function getDocgenDescription(component: Component): string {
return hasDocgen(component) && str(component.__docgenInfo.description);
}

3
addons/docs/src/lib/docgen/utils/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './defaultValue';
export * from './string';
export * from './docgen';

9
addons/docs/src/lib/docgen/utils/string.ts Normal file
View File

@ -0,0 +1,9 @@
export const str = (obj: any) => {
if (!obj) {
return '';
}
if (typeof obj === 'string') {
return obj as string;
}
throw new Error(`Description: expected string, got: ${JSON.stringify(obj)}`);
};

1
addons/docs/src/lib/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './utils';

16
addons/docs/src/lib/utils.ts Normal file
View File

@ -0,0 +1,16 @@
import { PropSummaryValue } from '@storybook/components';
export const MAX_TYPE_SUMMARY_LENGTH = 30;
export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50;
export function isTooLongForTypeSummary(value: string): boolean {
return value.length > MAX_TYPE_SUMMARY_LENGTH;
}
export function isTooLongForDefaultValueSummary(value: string): boolean {
return value.length > MAX_DEFALUT_VALUE_SUMMARY_LENGTH;
}
export function createSummaryValue(summary: string, detail?: string): PropSummaryValue {
return { summary, detail };
}

12
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -31,11 +31,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"format-json": "^1.0.3",
"lodash": "^4.17.15",

6
addons/google-analytics/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react-ga": "^2.5.7"

6
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@ -29,8 +29,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.16.0",

10
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@ -28,10 +28,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"marksy": "^7.0.0",

12
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -35,11 +35,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

14
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@ -29,12 +29,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"@types/react-color": "^3.0.1",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",

10
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@ -29,10 +29,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/router": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/router": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"prop-types": "^15.7.2",

16
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -30,13 +30,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/router": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/router": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.10.3",

8
addons/ondevice-actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-actions",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@ -26,13 +26,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
"@storybook/addon-actions": "5.3.0-beta.2"
"@storybook/addon-actions": "5.3.0-beta.3"
},
"peerDependencies": {
"@storybook/addon-actions": "*",

8
addons/ondevice-backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -31,9 +31,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},

6
addons/ondevice-knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-knobs",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@ -28,8 +28,8 @@
},
"dependencies": {
"@emotion/native": "^10.0.14",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",

12
addons/ondevice-notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@ -28,11 +28,11 @@
},
"dependencies": {
"@emotion/core": "^10.0.20",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"

4
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Options addon for storybook",
"keywords": [
"addon",
@ -29,7 +29,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"core-js": "^3.0.1",
"util-deprecate": "^1.0.2"
},

14
addons/queryparams/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@ -30,12 +30,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",

10
addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@ -33,8 +33,8 @@
},
"dependencies": {
"@jest/transform": "^24.9.0",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"@types/glob": "^7.1.1",
"@types/jest": "^24.0.16",
"@types/jest-specific-snapshot": "^0.5.3",
@ -47,8 +47,8 @@
"ts-dedent": "^1.1.0"
},
"devDependencies": {
"@storybook/addon-docs": "5.3.0-beta.2",
"@storybook/react": "5.3.0-beta.2",
"@storybook/addon-docs": "5.3.0-beta.3",
"@storybook/react": "5.3.0-beta.3",
"babel-loader": "^8.0.6",
"enzyme-to-json": "^3.4.1",
"jest-emotion": "^10.0.17",

6
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@ -29,8 +29,8 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/node-logger": "5.3.0-beta.2",
"@storybook/router": "5.3.0-beta.2",
"@storybook/node-logger": "5.3.0-beta.3",
"@storybook/router": "5.3.0-beta.3",
"@types/jest-image-snapshot": "^2.8.0",
"@types/puppeteer-core": "^1.9.0",
"core-js": "^3.0.1",

12
addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/router": "5.3.0-beta.2",
"@storybook/source-loader": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/router": "5.3.0-beta.3",
"@storybook/source-loader": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",

14
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@ -29,12 +29,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",

8
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,9 +33,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/node-logger": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@storybook/node-logger": "5.3.0-beta.3",
"core-js": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^3.0.1",
"global": "^4.3.2",

13
app/angular/src/server/__tests__/angular-cli_config.test.ts
View File

@ -51,12 +51,23 @@ describe('angular-cli_config', () => {
});
});
it('should return null if `architect.build` option are not exists.', () => {
const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8');
const angularJsonWithNoBuildOptions = JSON.parse(stripJsonComments(angularJson));
angularJsonWithNoBuildOptions.projects['angular-cli'].architect.build = undefined;
getLeadingAngularCliProject(angularJsonWithNoBuildOptions);
const config = getAngularCliWebpackConfigOptions('/');
expect(config).toBeNull();
});
it('should return baseConfig if no angular.json was found', () => {
const baseConfig = { test: 'config' };
const projectConfig = getAngularCliWebpackConfigOptions('test-path' as Path);
const config = applyAngularCliWebpackConfig(baseConfig, projectConfig);
expect(projectConfig).toBe(undefined);
expect(projectConfig).toBe(null);
expect(config).toBe(baseConfig);
});
});

13
app/angular/src/server/angular-cli_config.ts
View File

@ -57,6 +57,10 @@ export function getAngularCliConfig(dirToSearch: string) {
}
export function getLeadingAngularCliProject(ngCliConfig: any) {
if (!ngCliConfig) {
return null;
}
const { defaultProject } = ngCliConfig;
const { projects } = ngCliConfig;
if (!projects || !Object.keys(projects).length) {
@ -70,19 +74,18 @@ export function getLeadingAngularCliProject(ngCliConfig: any) {
export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
const angularCliConfig = getAngularCliConfig(dirToSearch);
if (!angularCliConfig) {
return undefined;
const project = getLeadingAngularCliProject(angularCliConfig);
if (!angularCliConfig || !project.architect.build) {
return null;
}
const project = getLeadingAngularCliProject(angularCliConfig);
const { options: projectOptions } = project.architect.build;
const normalizedAssets = normalizeAssetPatterns(
projectOptions.assets,
dirToSearch,
project.sourceRoot
);
const projectRoot = path.resolve(dirToSearch, project.root);
const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig) as Path;
const tsConfig = getTsConfigOptions(tsConfigPath);

4
app/ember/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
"bugs": {
@ -31,7 +31,7 @@
},
"dependencies": {
"@ember/test-helpers": "^1.5.0",
"@storybook/core": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"regenerator-runtime": "^0.13.3",

6
app/html/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,8 +33,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@types/webpack-env": "^1.13.9",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
app/marko/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,8 +33,8 @@
},
"dependencies": {
"@marko/webpack": "^2.0.0",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"regenerator-runtime": "^0.13.3",

6
app/mithril/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
@ -35,8 +35,8 @@
"dependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@types/mithril": "^2.0.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
app/polymer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,8 +33,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@webcomponents/webcomponentsjs": "^1.2.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
app/preact/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@ -34,8 +34,8 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@types/webpack-env": "^1.13.9",
"core-js": "^3.0.1",
"global": "^4.3.2",

4
app/rax/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/rax",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Rax: Develop Rax Component in isolation.",
"keywords": [
"rax",
@ -33,7 +33,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.3",
"babel-preset-rax": "^1.0.0-beta.0",
"core-js": "^3.0.1",
"driver-dom": "^2.0.0",

14
app/react-native-server/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-server",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -31,12 +31,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/channel-websocket": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/ui": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/channel-websocket": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/ui": "5.3.0-beta.3",
"commander": "^4.0.1",
"core-js": "^3.0.1",
"global": "^4.3.2",

12
app/react-native/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -31,11 +31,11 @@
"dependencies": {
"@emotion/core": "^10.0.20",
"@emotion/native": "^10.0.14",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/channel-websocket": "5.3.0-beta.2",
"@storybook/channels": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/channel-websocket": "5.3.0-beta.3",
"@storybook/channels": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"core-js": "^3.0.1",
"emotion-theming": "^10.0.19",
"react-native-swipe-gestures": "^1.0.4"

2
app/react/README.md
View File

@ -25,7 +25,7 @@ You can also build a [static version](https://storybook.js.org/basics/exporting-
Here are some featured storybooks that you can reference to see how Storybook works:
- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)
- [Demo of React Native Web](https://necolas.github.io/react-native-web/docs/) - [source](https://github.com/necolas/react-native-web)
## Create React App

8
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -36,9 +36,9 @@
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/node-logger": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@storybook/node-logger": "5.3.0-beta.3",
"@svgr/webpack": "^4.0.3",
"@types/webpack-env": "^1.13.7",
"babel-plugin-add-react-displayname": "^0.0.5",

4
app/riot/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,7 +33,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"raw-loader": "^3.1.0",

6
app/svelte/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,8 +33,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"regenerator-runtime": "^0.13.3",

6
app/vue/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,8 +33,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@types/webpack-env": "^1.13.9",
"core-js": "^3.0.1",
"global": "^4.3.2",

6
app/web-components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit-html",
@ -37,8 +37,8 @@
"dependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/core": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/core": "5.3.0-beta.3",
"@types/webpack-env": "^1.13.9",
"babel-plugin-bundled-import-meta": "^0.3.1",
"core-js": "^3.0.1",

6
dev-kits/addon-decorator/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-decorator",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "decorator addon for storybook",
"keywords": [
"addon",
@ -24,8 +24,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.4.0"
},

14
dev-kits/addon-parameter/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-parameter",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

4
dev-kits/addon-preview-wrapper/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-preview-wrapper",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "preview wrapper addon for storybook",
"keywords": [
"addon",
@ -24,7 +24,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"react": "^16.8.3"
},
"publishConfig": {

16
dev-kits/addon-roundtrip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-roundtrip",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"description": "roundtrip addon for storybook",
"keywords": [
"addon",
@ -24,13 +24,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-beta.2",
"@storybook/api": "5.3.0-beta.2",
"@storybook/client-api": "5.3.0-beta.2",
"@storybook/client-logger": "5.3.0-beta.2",
"@storybook/components": "5.3.0-beta.2",
"@storybook/core-events": "5.3.0-beta.2",
"@storybook/theming": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/api": "5.3.0-beta.3",
"@storybook/client-api": "5.3.0-beta.3",
"@storybook/client-logger": "5.3.0-beta.3",
"@storybook/components": "5.3.0-beta.3",
"@storybook/core-events": "5.3.0-beta.3",
"@storybook/theming": "5.3.0-beta.3",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

2
docs/src/pages/basics/exporting-storybook/index.md
View File

@ -6,7 +6,7 @@ title: 'Exporting Storybook as a Static App'
Storybook gives a great developer experience with its dev time features, like instant change updates via Webpack's HMR.
But Storybook is also a tool you can use to showcase your components to others.
Demos of [React Native Web](http://necolas.github.io/react-native-web/storybook/) and [React Dates](http://airbnb.io/react-dates/) are a good example for that.
Demos of [React Native Web](https://necolas.github.io/react-native-web/docs/) and [React Dates](http://airbnb.io/react-dates/) are a good example for that.
For that, Storybook comes with a tool to export your storybook into a static web app. Then you can deploy it to GitHub pages or any static hosting service.

2
docs/src/pages/basics/introduction/index.md
View File

@ -16,6 +16,6 @@ A [Static version](/basics/exporting-storybook) of Storybook can also be built a
Here are some featured Storybooks to see how it works:
- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)
- [Demo of React Native Web](https://necolas.github.io/react-native-web/docs/) - [source](https://github.com/necolas/react-native-web)
Read the Learn Storybook [tutorial](https://www.learnstorybook.com) for a step by step guide to building an app with Storybook and to see how building components in isolation can supercharge your app development workflow.

2
docs/src/pages/examples/_examples.yml
View File

@ -69,7 +69,7 @@ necolas:
title: React Native Web
description: Storybook demo for React Native Web.
source: https://github.com/necolas/react-native-web
demo: https://necolas.github.io/react-native-web/storybook/
demo: https://necolas.github.io/react-native-web/docs/
griddle:
thumbnail: griddle.jpg
title: Griddle

2
docs/src/stories/data.js
View File

@ -82,7 +82,7 @@ storiesOf('Toggle', module)
owner: 'https://avatars3.githubusercontent.com/u/239676?v=3&s=460',
storybook: {
name: 'React Native Web',
link: 'https://necolas.github.io/react-native-web/storybook',
link: 'https://necolas.github.io/react-native-web/docs/',
},
source: 'https://github.com/necolas/react-native-web',
},

2
docs/src/versions/next.json
View File

@ -1 +1 @@
{"version":"5.3.0-beta.2","info":{"plain":"### Features\n\n* Addon-docs: Customizable DocPage doc blocks ([#8855](https://github.com/storybookjs/storybook/pull/8855))\n\n### Bug Fixes\n\n* Addon-docs: Add back Props \"exclude\" support ([#8868](https://github.com/storybookjs/storybook/pull/8868))\n* Addon-docs: Fix MDX component permalinking ([#8872](https://github.com/storybookjs/storybook/pull/8872))\n* Addon-docs: Fix regression to @ignore in Props ([#8867](https://github.com/storybookjs/storybook/pull/8867))\n\n### Maintenance\n\n* Addon-docs: Add tests for prop types default value ([#8869](https://github.com/storybookjs/storybook/pull/8869))"}}
{"version":"5.3.0-beta.3","info":{"plain":"### Features\n\n* Addon-docs: Rich props table UI ([#8887](https://github.com/storybookjs/storybook/pull/8887))\n* Addon-docs: Improve basic support for Flow props ([#8890](https://github.com/storybookjs/storybook/pull/8890))\n* CLI: Avoid id changes after `storiesof-to-csf` migration ([#8856](https://github.com/storybookjs/storybook/pull/8856))\n\n### Bug Fixes\n\n* Addon-docs: Fix props table for sections props ([#8904](https://github.com/storybookjs/storybook/pull/8904))\n* Addon-docs: Fix Description block when no component provided ([#8902](https://github.com/storybookjs/storybook/pull/8902))\n* Angular: Fix project without `architect.build` option ([#6737](https://github.com/storybookjs/storybook/pull/6737))\n\n### Maintenance\n\n* Addon-docs: Docgen lib maintenance ([#8896](https://github.com/storybookjs/storybook/pull/8896))\n* Examples: Fix stories glob in official-storybook ([#8888](https://github.com/storybookjs/storybook/pull/8888))"}}

20
examples-native/crna-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "crna-kitchen-sink",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"workspaces": {
@ -31,15 +31,15 @@
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-react-jsx-source": "^7.2.0",
"@storybook/addon-actions": "5.3.0-beta.2",
"@storybook/addon-knobs": "5.3.0-beta.2",
"@storybook/addon-links": "5.3.0-beta.2",
"@storybook/addon-ondevice-actions": "5.3.0-beta.2",
"@storybook/addon-ondevice-backgrounds": "5.3.0-beta.2",
"@storybook/addon-ondevice-knobs": "5.3.0-beta.2",
"@storybook/addon-ondevice-notes": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/react-native": "5.3.0-beta.2",
"@storybook/addon-actions": "5.3.0-beta.3",
"@storybook/addon-knobs": "5.3.0-beta.3",
"@storybook/addon-links": "5.3.0-beta.3",
"@storybook/addon-ondevice-actions": "5.3.0-beta.3",
"@storybook/addon-ondevice-backgrounds": "5.3.0-beta.3",
"@storybook/addon-ondevice-knobs": "5.3.0-beta.3",
"@storybook/addon-ondevice-notes": "5.3.0-beta.3",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/react-native": "5.3.0-beta.3",
"babel-loader": "^8.0.4",
"babel-plugin-module-resolver": "^3.2.0",
"babel-preset-expo": "^7.0.0",

32
examples/angular-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "5.3.0-beta.2",
"version": "5.3.0-beta.3",
"private": true,
"license": "MIT",
"scripts": {
@ -37,21 +37,21 @@
"@angular/cli": "^8.3.6",
"@angular/compiler-cli": "^8.2.8",
"@compodoc/compodoc": "^1.1.11",
"@storybook/addon-a11y": "5.3.0-beta.2",
"@storybook/addon-actions": "5.3.0-beta.2",
"@storybook/addon-backgrounds": "5.3.0-beta.2",
"@storybook/addon-centered": "5.3.0-beta.2",
"@storybook/addon-docs": "5.3.0-beta.2",
"@storybook/addon-jest": "5.3.0-beta.2",
"@storybook/addon-knobs": "5.3.0-beta.2",
"@storybook/addon-links": "5.3.0-beta.2",
"@storybook/addon-notes": "5.3.0-beta.2",
"@storybook/addon-options": "5.3.0-beta.2",
"@storybook/addon-storyshots": "5.3.0-beta.2",
"@storybook/addon-storysource": "5.3.0-beta.2",
"@storybook/addons": "5.3.0-beta.2",
"@storybook/angular": "5.3.0-beta.2",
"@storybook/source-loader": "5.3.0-beta.2",
"@storybook/addon-a11y": "5.3.0-beta.3",
"@storybook/addon-actions": "5.3.0-beta.3",
"@storybook/addon-backgrounds": "5.3.0-beta.3",
"@storybook/addon-centered": "5.3.0-beta.3",
"@storybook/addon-docs": "5.3.0-beta.3",
"@storybook/addon-jest": "5.3.0-beta.3",
"@storybook/addon-knobs": "5.3.0-beta.3",
"@storybook/addon-links": "5.3.0-beta.3",
"@storybook/addon-notes": "5.3.0-beta.3",
"@storybook/addon-options": "5.3.0-beta.3",
"@storybook/addon-storyshots": "5.3.0-beta.3",
"@storybook/addon-storysource": "5.3.0-beta.3",
"@storybook/addons": "5.3.0-beta.3",
"@storybook/angular": "5.3.0-beta.3",
"@storybook/source-loader": "5.3.0-beta.3",
"@types/core-js": "^2.5.0",
"@types/jest": "^24.0.11",
"@types/node": "^12.7.9",

8
examples/angular-cli/src/stories/addon-actions.stories.ts
View File

@ -5,7 +5,7 @@ export default {
title: 'Addon/Actions',
};
export const actionOnly = () => ({
export const ActionOnly = () => ({
component: Button,
props: {
text: 'Action only',
@ -13,11 +13,11 @@ export const actionOnly = () => ({
},
});
actionOnly.story = {
ActionOnly.story = {
name: 'Action only',
};
export const actionAndMethod = () => ({
export const ActionAndMethod = () => ({
component: Button,
props: {
text: 'Action and Method',
@ -29,6 +29,6 @@ export const actionAndMethod = () => ({
},
});
actionAndMethod.story = {
ActionAndMethod.story = {
name: 'Action and method',
};

4
examples/angular-cli/src/stories/addon-jest.stories.ts
View File

@ -13,12 +13,12 @@ export default {
],
};
export const appComponentWithJestTests = () => ({
export const AppComponentWithJestTests = () => ({
component: AppComponent,
props: {},
});
appComponentWithJestTests.story = {
AppComponentWithJestTests.story = {
name: 'app.component with jest tests',
parameters: {

12
examples/angular-cli/src/stories/addon-knobs.stories.ts
View File

@ -26,7 +26,7 @@ export default {
},
};
export const simple = () => {
export const Simple = () => {
const name = text('name', 'John Doe');
const age = number('age', 0);
const phoneNumber = text('phoneNumber', '555-55-55');
@ -53,11 +53,11 @@ export const simple = () => {
};
};
simple.story = {
Simple.story = {
name: 'Simple',
};
export const allKnobs = () => {
export const AllKnobs = () => {
const name = text('name', 'Jane');
const stock = number('stock', 20, {
range: true,
@ -101,14 +101,14 @@ export const allKnobs = () => {
};
};
allKnobs.story = {
AllKnobs.story = {
name: 'All knobs',
};
export const xssSafety = () => ({
export const XssSafety = () => ({
template: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
});
xssSafety.story = {
XssSafety.story = {
name: 'XSS safety',
};

4
examples/angular-cli/src/stories/addon-links.stories.ts
View File

@ -5,7 +5,7 @@ export default {
title: 'Addon/Links',
};
export const buttonWithLinkToAnotherStory = () => ({
export const ButtonWithLinkToAnotherStory = () => ({
component: Button,
props: {
text: 'Go to Welcome Story',
@ -13,6 +13,6 @@ export const buttonWithLinkToAnotherStory = () => ({
},
});
buttonWithLinkToAnotherStory.story = {
ButtonWithLinkToAnotherStory.story = {
name: 'button with link to another story',
};

8
examples/angular-cli/src/stories/addon-notes.stories.ts
View File

@ -4,7 +4,7 @@ export default {
title: 'Addon/Notes',
};
export const simpleNote = () => ({
export const SimpleNote = () => ({
component: Button,
props: {
text: 'Notes on some Button',
@ -12,12 +12,12 @@ export const simpleNote = () => ({
},
});
simpleNote.story = {
SimpleNote.story = {
name: 'Simple note',
parameters: { notes: 'My notes on some button' },
};
export const noteWithHtml = () => ({
export const NoteWithHtml = () => ({
component: Button,
props: {
text: 'Notes with HTML',
@ -25,7 +25,7 @@ export const noteWithHtml = () => ({
},
});
noteWithHtml.story = {
NoteWithHtml.story = {
name: 'Note with HTML',
parameters: {
notes: `

4
examples/angular-cli/src/stories/app.component.stories.ts
View File

@ -5,12 +5,12 @@ export default {
component: AppComponent,
};
export const componentWithSeparateTemplate = () => ({
export const ComponentWithSeparateTemplate = () => ({
component: AppComponent,
props: {},
});
componentWithSeparateTemplate.story = {
ComponentWithSeparateTemplate.story = {
name: 'Component with separate template',
parameters: { docs: { iframeHeight: 400 } },
};

8
examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
View File

@ -5,25 +5,25 @@ export default {
title: 'Custom/Dependencies',
};
export const inputsAndInjectDependencies = () => ({
export const InputsAndInjectDependencies = () => ({
component: DiComponent,
props: {
title: 'Component dependencies',
},
});
inputsAndInjectDependencies.story = {
InputsAndInjectDependencies.story = {
name: 'inputs and inject dependencies',
};
export const inputsAndInjectDependenciesWithKnobs = () => ({
export const InputsAndInjectDependenciesWithKnobs = () => ({
component: DiComponent,
props: {
title: text('title', 'Component dependencies'),
},
});
inputsAndInjectDependenciesWithKnobs.story = {
InputsAndInjectDependenciesWithKnobs.story = {
name: 'inputs and inject dependencies with knobs',
decorators: [withKnobs],
};

4
examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
View File

@ -4,10 +4,10 @@ export default {
title: 'Custom/styleUrls',
};
export const componentWithStyles = () => ({
export const ComponentWithStyles = () => ({
component: StyledComponent,
});
componentWithStyles.story = {
ComponentWithStyles.story = {
name: 'Component with styles',
};

4
examples/angular-cli/src/stories/core.stories.ts
View File

@ -14,7 +14,7 @@ export default {
},
};
export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
export const PassedToStory = ({ parameters: { fileName, ...parameters } }) => ({
component: Button,
props: {
text: `Parameters are ${JSON.stringify(parameters)}`,
@ -22,7 +22,7 @@ export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
},
});
passedToStory.story = {
PassedToStory.story = {
name: 'passed to story',
parameters: { storyParameter },
};

8
examples/angular-cli/src/stories/custom-pipes.stories.ts
View File

@ -16,25 +16,25 @@ export default {
],
};
export const simple = () => ({
export const Simple = () => ({
component: NameComponent,
props: {
field: 'foobar',
},
});
simple.story = {
Simple.story = {
name: 'Simple',
};
export const withKnobsStory = () => ({
export const WithKnobsStory = () => ({
component: NameComponent,
props: {
field: text('field', 'foobar'),
},
});
withKnobsStory.story = {
WithKnobsStory.story = {
name: 'With Knobs',
decorators: [withKnobs],
};

8
examples/angular-cli/src/stories/custom-providers.stories.ts
View File

@ -16,18 +16,18 @@ export default {
],
};
export const simple = () => ({
export const Simple = () => ({
component: ServiceComponent,
props: {
name: 'Static name',
},
});
simple.story = {
Simple.story = {
name: 'Simple',
};
export const withKnobsStory = () => {
export const WithKnobsStory = () => {
const name = text('name', 'Dynamic knob');
return {
@ -38,7 +38,7 @@ export const withKnobsStory = () => {
};
};
withKnobsStory.story = {
WithKnobsStory.story = {
name: 'With knobs',
decorators: [withKnobs],
};

8
examples/angular-cli/src/stories/custom-styles.stories.ts
View File

@ -12,7 +12,7 @@ export default {
],
};
export const defaultStory = () => ({
export const DefaultStory = () => ({
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
props: {
text: 'Button with custom styles',
@ -28,11 +28,11 @@ export const defaultStory = () => ({
],
});
defaultStory.story = {
DefaultStory.story = {
name: 'Default',
};
export const withKnobsStory = () => ({
export const WithKnobsStory = () => ({
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
props: {
text: text('text', 'Button with custom styles'),
@ -48,7 +48,7 @@ export const withKnobsStory = () => ({
],
});
withKnobsStory.story = {
WithKnobsStory.story = {
name: 'With Knobs',
decorators: [withKnobs],
};

4
examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
View File

@ -9,7 +9,7 @@ export default {
title: 'Custom/ngModel',
};
export const customControlValueAccessor = () => ({
export const CustomControlValueAccessor = () => ({
component: CustomCvaComponent,
props: {
ngModel: 'Type anything',
@ -17,7 +17,7 @@ export const customControlValueAccessor = () => ({
},
});
customControlValueAccessor.story = {
CustomControlValueAccessor.story = {
name: 'custom ControlValueAccessor',
parameters: { notes: description },
};

2
examples/angular-cli/src/stories/doc-button/doc-button.stories.ts
View File

@ -6,7 +6,7 @@ export default {
parameters: { docs: { iframeHeight: 120 } },
};
export const basic = () => ({
export const Basic = () => ({
component: ButtonComponent,
props: {
label: 'Docs Test',

8
examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
View File

@ -5,7 +5,7 @@ export default {
title: 'Custom/Inheritance',
};
export const iconButton = () => ({
export const IconButton = () => ({
component: IconButtonComponent,
props: {
icon: 'this is icon',
@ -13,17 +13,17 @@ export const iconButton = () => ({
},
});
iconButton.story = {
IconButton.story = {
name: 'icon button',
};
export const baseButton = () => ({
export const BaseButton = () => ({
component: BaseButtonComponent,
props: {
label: 'this is label',
},
});
baseButton.story = {
BaseButton.story = {
name: 'base button',
};

8
examples/angular-cli/src/stories/metadata-combined.stories.ts
View File

@ -22,18 +22,18 @@ export default {
],
};
export const combined1 = () => ({
export const Combined1 = () => ({
template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
props: {
name: 'Prop Name',
},
});
combined1.story = {
Combined1.story = {
name: 'Combined 1',
};
export const combined2 = () => ({
export const Combined2 = () => ({
template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
props: {
name: 'Prop Name',
@ -43,6 +43,6 @@ export const combined2 = () => ({
},
});
combined2.story = {
Combined2.story = {
name: 'Combined 2',
};

Some files were not shown because too many files have changed in this diff Show More