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

fix merge conflicts

Browse Source
This commit is contained in:
Jessica Koch 2019-06-22 18:40:41 -07:00
commit 6db0abb6df
116 changed files with 2981 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
MIGRATION.md
View File

@ -1,5 +1,7 @@
# Migration
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
- [Docs mode docgen](#docs-mode-docgen)
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
- [React native server](#react-native-server)
- [Angular 7](#angular-7)
@ -56,6 +58,15 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
## From version 5.1.x to 5.2.x
### Docs mode docgen
This isn't a breaking change per se, because `addon-docs` is a new feature. However it's intended to replace `addon-info`, so if you're migrating from `addon-info` there are a few things you should know:
1. Support for only one prop table
2. Prop table docgen info should be stored on the component and not in the global variable `STORYBOOK_REACT_CLASSES` as before.
## From version 5.0.x to 5.1.x
### React native server

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

@ -11,13 +11,13 @@
"files",
"viewer"
],
"homepage": "https://github.com/storybooks/storybook#readme",
"homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/storybooks/storybook.git",
"url": "git+https://github.com/storybookjs/storybook.git",
"directory": "addons/design-assets"
},
"license": "MIT",

1
addons/docs/blocks.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/blocks');

9
addons/docs/package.json
View File

@ -24,9 +24,16 @@
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/api": "5.2.0-alpha.23"
"@storybook/api": "5.2.0-alpha.23",
"@storybook/components": "5.2.0-alpha.23",
"@storybook/router": "5.2.0-alpha.23",
"@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"prop-types": "^15.7.2"
},
"devDependencies": {
"@types/prop-types": "^15.5.9",
"@types/util-deprecate": "^1.0.0",
"@types/webpack-env": "^1.13.7"
},

68
addons/docs/src/blocks/Description.tsx Normal file
View File

@ -0,0 +1,68 @@
/* eslint-disable no-underscore-dangle */
import React from 'react';
import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
import { Component, CURRENT_SELECTION } from './shared';
export enum DescriptionType {
INFO = 'info',
NOTES = 'notes',
DOCGEN = 'docgen',
AUTO = 'auto',
}
type Notes = string | any;
type Info = string | any;
interface DescriptionProps {
of?: '.' | Component;
type?: DescriptionType;
markdown?: string;
}
const getNotes = (notes?: Notes) =>
notes && (typeof notes === 'string' ? notes : notes.markdown || notes.text);
const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : info.text);
const getDocgen = (component?: Component) =>
(component && component.__docgenInfo && component.__docgenInfo.description) || '';
export const getDescriptionProps = (
{ of, type, markdown }: DescriptionProps,
{ parameters }: DocsContextProps
): PureDescriptionProps => {
if (markdown) {
return { markdown };
}
const { component, notes, info } = parameters;
const target = of === CURRENT_SELECTION ? component : of;
switch (type) {
case DescriptionType.INFO:
return { markdown: getInfo(info) };
case DescriptionType.NOTES:
return { markdown: getNotes(notes) };
case DescriptionType.DOCGEN:
return { markdown: getDocgen(target) };
case DescriptionType.AUTO:
default:
return {
markdown: `
${getNotes(notes) || getInfo(info) || ''}
${getDocgen(target)}
`.trim(),
};
}
};
const DescriptionContainer: React.FunctionComponent<DescriptionProps> = props => (
<DocsContext.Consumer>
{context => {
const { markdown } = getDescriptionProps(props, context);
return markdown && <Description markdown={markdown} />;
}}
</DocsContext.Consumer>
);
export { DescriptionContainer as Description };

52
addons/docs/src/blocks/DocsContainer.tsx Normal file
View File

@ -0,0 +1,52 @@
/* eslint-disable react/destructuring-assignment */
import React from 'react';
// import { MDXProvider } from '@mdx-js/react';
import { Global, createGlobal, ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
import { DocumentFormatting, DocsWrapper, DocsContent } from '@storybook/components';
import { DocsContextProps, DocsContext } from './DocsContext';
interface DocsContainerProps {
context: DocsContextProps;
content: React.ElementType<any>;
}
const defaultComponents = {
// p: ({ children }) => <b>{children}</b>,
wrapper: DocumentFormatting,
};
const globalWithOverflow = (args: any) => {
const global = createGlobal(args);
const { body, ...rest } = global;
const { overflow, ...bodyRest } = body;
return {
body: bodyRest,
...rest,
};
};
export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
context,
content: MDXContent,
}) => {
const parameters = (context && context.parameters) || {};
const options = parameters.options || {};
const theme = ensureTheme(options.theme);
const { components: userComponents = null } = options.docs || {};
const components = { ...defaultComponents, ...userComponents };
return (
<DocsContext.Provider value={context}>
<ThemeProvider theme={theme}>
<Global styles={globalWithOverflow} />
{/* <MDXProvider components={components}> */}
<DocsWrapper>
<DocsContent>
<MDXContent components={components} />
</DocsContent>
</DocsWrapper>
{/* </MDXProvider> */}
</ThemeProvider>
</DocsContext.Provider>
);
};

23
addons/docs/src/blocks/DocsContext.ts Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
export interface DocsContextProps {
id?: string;
selectedKind?: string;
selectedStory?: string;
/**
* mdxKind is a statically-generated "kind" that corresponds to the
* component that's being documented in the MDX file, It's combined
* with the MDX story name `<Story name='story name'>...</Story>` to
* generate a storyId. In the case that the user is viewing a non-MDX
* story, the value of `mdxKind` will be the currently-selected kind.
* (I can't remember the corner case in which using the currentl-selected
* kind breaks down in MDX-defined stories, but there is one!)
*/
mdxKind?: string;
parameters?: any;
storyStore?: any;
forceRender?: () => void;
}
export const DocsContext: React.Context<DocsContextProps> = React.createContext({});

140
addons/docs/src/blocks/DocsPage.tsx Normal file
View File

@ -0,0 +1,140 @@
import React from 'react';
import { parseKind } from '@storybook/router';
import { styled } from '@storybook/theming';
import { DocsPage as PureDocsPage, DocsPageProps } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
import { DocsContainer } from './DocsContainer';
import { Description } from './Description';
import { Story } from './Story';
import { Preview } from './Preview';
import { Props } from './Props';
enum DocsStoriesType {
ALL = 'all',
PRIMARY = 'primary',
REST = 'rest',
}
interface DocsStoriesProps {
type?: DocsStoriesType;
}
interface DocsStoryProps {
id: string;
name: string;
description?: string;
expanded?: boolean;
}
interface StoryData {
id: string;
kind: string;
name: string;
parameters?: any;
}
const getDocsStories = (type: DocsStoriesType, componentStories: StoryData[]): DocsStoryProps[] => {
let stories = componentStories;
if (type !== DocsStoriesType.ALL) {
const primary = stories.find(s => s.parameters && s.parameters.primary);
const [first, ...rest] = stories;
if (type === DocsStoriesType.PRIMARY) {
stories = [primary || first];
} else {
stories = primary ? stories.filter(s => !s.parameters || !s.parameters.primary) : rest;
}
}
return stories.map(({ id, name, parameters: { notes, info } }) => ({
id,
name,
description: notes || info || null,
}));
};
const StoriesHeading = styled.h2();
const StoryHeading = styled.h3();
const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
id,
name,
description,
expanded = true,
}) => (
<>
{expanded && <StoryHeading>{name}</StoryHeading>}
{expanded && description && <Description markdown={description} />}
<Preview>
<Story id={id} />
</Preview>
</>
);
const DocsStories: React.FunctionComponent<DocsStoriesProps> = ({ type = DocsStoriesType.ALL }) => (
<DocsContext.Consumer>
{({ selectedKind, storyStore }) => {
const componentStories = (storyStore.raw() as StoryData[]).filter(
s => s.kind === selectedKind
);
const stories = getDocsStories(type, componentStories);
if (stories.length === 0) {
return null;
}
const expanded = type !== DocsStoriesType.PRIMARY;
return (
<>
{expanded && <StoriesHeading>Stories</StoriesHeading>}
{stories.map(s => (
<DocsStory key={s.id} expanded={expanded} {...s} />
))}
</>
);
}}
</DocsContext.Consumer>
);
const getDocsPageProps = (context: DocsContextProps): DocsPageProps => {
const { selectedKind, selectedStory, parameters } = context;
const {
hierarchyRootSeparator: rootSeparator,
hierarchySeparator: groupSeparator,
} = (parameters && parameters.options) || {
hierarchyRootSeparator: '|',
hierarchySeparator: '/',
};
const { groups } = parseKind(selectedKind, { rootSeparator, groupSeparator });
const title = (groups && groups[groups.length - 1]) || selectedKind;
return {
title,
subtitle: parameters && parameters.componentDescription,
};
};
const DocsPage: React.FunctionComponent = () => (
<DocsContext.Consumer>
{context => {
const docsPageProps = getDocsPageProps(context);
return (
<PureDocsPage {...docsPageProps}>
<Description of="." />
<DocsStories type={DocsStoriesType.PRIMARY} />
<Props of="." />
<DocsStories type={DocsStoriesType.REST} />
</PureDocsPage>
);
}}
</DocsContext.Consumer>
);
interface DocsPageWrapperProps {
context: DocsContextProps;
}
const DocsPageWrapper: React.FunctionComponent<DocsPageWrapperProps> = ({ context }) => (
/* eslint-disable react/destructuring-assignment */
<DocsContainer context={{ ...context, mdxKind: context.selectedKind }} content={DocsPage} />
);
export { DocsPageWrapper as DocsPage };

16
addons/docs/src/blocks/Meta.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
type Decorator = (...args: any) => any;
interface MetaProps {
title: string;
decorators?: [Decorator];
parameters?: any;
}
/**
* This component is used to declare component metadata in docs
* and gets transformed into a default export underneath the hood.
* It doesn't actually render anything.
*/
export const Meta: React.FunctionComponent<MetaProps> = props => null;

48
addons/docs/src/blocks/Preview.tsx Normal file
View File

@ -0,0 +1,48 @@
import React, { ReactNodeArray } from 'react';
import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
import { toId } from '@storybook/router';
import { getSourceProps } from './Source';
import { DocsContext, DocsContextProps } from './DocsContext';
export enum SourceState {
OPEN = 'open',
CLOSED = 'closed',
NONE = 'none',
}
type PreviewProps = PurePreviewProps & {
withSource?: SourceState;
};
const getPreviewProps = (
{
withSource = SourceState.CLOSED,
children,
...props
}: PreviewProps & { children?: React.ReactNode },
{ mdxKind, storyStore }: DocsContextProps
): PurePreviewProps => {
if (withSource === SourceState.NONE && !children) {
return props;
}
const childArray: ReactNodeArray = Array.isArray(children) ? children : [children];
const stories = childArray.filter(
(c: React.ReactElement) => c.props && (c.props.id || c.props.name)
) as React.ReactElement[];
const targetIds = stories.map(s => s.props.id || toId(mdxKind, s.props.name));
const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
return {
...props, // pass through columns etc.
withSource: sourceProps,
isExpanded: withSource === SourceState.OPEN,
};
};
export const Preview: React.FunctionComponent<PreviewProps> = props => (
<DocsContext.Consumer>
{context => {
const previewProps = getPreviewProps(props, context);
return <PurePreview {...previewProps}>{props.children}</PurePreview>;
}}
</DocsContext.Consumer>
);

57
addons/docs/src/blocks/Props.tsx Normal file
View File

@ -0,0 +1,57 @@
import React from 'react';
import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
import { Component, CURRENT_SELECTION } from './shared';
import { getPropDefs as autoPropDefs, PropDefGetter } from '../lib/getPropDefs';
interface PropsProps {
exclude?: string[];
of: '.' | Component;
}
const inferPropDefs = (framework: string): PropDefGetter | null => {
switch (framework) {
case 'react':
case 'vue':
return autoPropDefs;
default:
return null;
}
};
export const getPropsTableProps = (
{ exclude, of }: PropsProps,
{ parameters }: DocsContextProps
): PropsTableProps => {
const { component } = parameters;
try {
const target = of === CURRENT_SELECTION ? component : of;
if (!target) {
throw new Error(PropsTableError.NO_COMPONENT);
}
const { framework = null } = parameters || {};
const { getPropDefs = inferPropDefs(framework) } =
(parameters && parameters.options && parameters.options.docs) || {};
if (!getPropDefs) {
throw new Error(PropsTableError.PROPS_UNSUPPORTED);
}
const allRows = getPropDefs(target);
const rows = !exclude ? allRows : allRows.filter((row: PropDef) => !exclude.includes(row.name));
return { rows };
} catch (err) {
return { error: err.message };
}
};
const PropsContainer: React.FunctionComponent<PropsProps> = props => (
<DocsContext.Consumer>
{context => {
const propsTableProps = getPropsTableProps(props, context);
return <PropsTable {...propsTableProps} />;
}}
</DocsContext.Consumer>
);
export { PropsContainer as Props };

97
addons/docs/src/blocks/Source.tsx Normal file
View File

@ -0,0 +1,97 @@
import React from 'react';
import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
import { CURRENT_SELECTION } from './shared';
interface CommonProps {
language?: string;
}
type SingleSourceProps = {
id: string;
} & CommonProps;
type MultiSourceProps = {
ids: string[];
} & CommonProps;
type CodeProps = {
code: string;
} & CommonProps;
type NoneProps = CommonProps;
type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
interface Location {
line: number;
col: number;
}
interface StorySource {
source: string;
locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
}
const extract = (targetId: string, { source, locationsMap }: StorySource) => {
const location = locationsMap[targetId];
// FIXME: bad locationsMap generated for module export functions whose titles are overridden
if (!location) return null;
const { startBody: start, endBody: end } = location;
const lines = source.split('\n');
if (start.line === end.line) {
return lines[start.line - 1].substring(start.col, end.col);
}
// NOTE: storysource locations are 1-based not 0-based!
const startLine = lines[start.line - 1];
const endLine = lines[end.line - 1];
return [
startLine.substring(start.col),
...lines.slice(start.line, end.line - 1),
endLine.substring(0, end.col),
].join('\n');
};
export const getSourceProps = (
props: SourceProps,
{ id: currentId, storyStore }: DocsContextProps
): PureSourceProps => {
const codeProps = props as CodeProps;
const singleProps = props as SingleSourceProps;
const multiProps = props as MultiSourceProps;
let source = codeProps.code; // prefer user-specified code
if (!source) {
const targetId = singleProps.id === CURRENT_SELECTION ? currentId : singleProps.id;
const targetIds = multiProps.ids || [targetId];
source = targetIds
.map(sourceId => {
const data = storyStore.fromId(sourceId);
if (data && data.parameters) {
const { mdxSource, storySource } = data.parameters;
return mdxSource || (storySource && extract(sourceId, storySource));
}
return '';
})
.join('\n\n');
}
return source
? { code: source, language: props.language || 'jsx' }
: { error: SourceError.SOURCE_UNAVAILABLE };
};
/**
* Story source doc block renders source code if provided,
* or the source for a story if `storyId` is provided, or
* the source for the current story if nothing is provided.
*/
const SourceContainer: React.FunctionComponent<SourceProps> = props => (
<DocsContext.Consumer>
{context => {
const sourceProps = getSourceProps(props, context);
return <Source {...sourceProps} />;
}}
</DocsContext.Consumer>
);
export { SourceContainer as Source };

69
addons/docs/src/blocks/Story.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react';
import { toId } from '@storybook/router';
import { Story, StoryProps as PureStoryProps } from '@storybook/components';
import { CURRENT_SELECTION } from './shared';
import { DocsContext, DocsContextProps } from './DocsContext';
interface CommonProps {
height?: string;
}
type StoryDefProps = {
name: string;
children: React.ReactNode;
} & CommonProps;
type StoryRefProps = {
id?: string;
} & CommonProps;
export type StoryProps = StoryDefProps | StoryRefProps;
const inferInlineStories = (framework: string): boolean => {
switch (framework) {
case 'react':
return true;
default:
return false;
}
};
export const getStoryProps = (
props: StoryProps,
{ id: currentId, storyStore, parameters, mdxKind }: DocsContextProps
): PureStoryProps => {
const { id } = props as StoryRefProps;
const { name } = props as StoryDefProps;
const inputId = id === CURRENT_SELECTION ? currentId : id;
const previewId = inputId || toId(mdxKind, name);
const { height } = props;
const data = storyStore.fromId(previewId);
const { framework = null } = parameters || {};
const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
(parameters && parameters.options && parameters.options.docs) || {};
return {
inline: inlineStories,
id: previewId,
storyFn: data && data.getDecorated(),
height: height || iframeHeight,
title: data && data.name,
};
};
const StoryContainer: React.FunctionComponent<StoryProps> = props => (
<DocsContext.Consumer>
{context => {
const storyProps = getStoryProps(props, context);
return <Story {...storyProps} />;
}}
</DocsContext.Consumer>
);
StoryContainer.defaultProps = {
children: null,
name: null,
};
export { StoryContainer as Story };

9
addons/docs/src/blocks/Wrapper.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
interface WrapperProps {
children: React.ReactNode;
}
export const Wrapper: React.FunctionComponent<WrapperProps> = ({ children }) => (
<div style={{ fontFamily: 'sans-serif' }}>{children}</div>
);

12
addons/docs/src/blocks/index.ts Normal file
View File

@ -0,0 +1,12 @@
export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
export * from './Description';
export * from './DocsContext';
export * from './DocsPage';
export * from './DocsContainer';
export * from './Meta';
export * from './Preview';
export * from './Props';
export * from './Source';
export * from './Story';
export * from './Wrapper';

2
addons/docs/src/blocks/shared.ts Normal file
View File

@ -0,0 +1,2 @@
export const CURRENT_SELECTION = '.';
export type Component = any;

88
addons/docs/src/lib/getPropDefs.ts Normal file
View File

@ -0,0 +1,88 @@
/* eslint-disable no-underscore-dangle */
import PropTypes from 'prop-types';
import { PropDef } from '@storybook/components';
import { Component } from '../blocks/shared';
interface PropDefMap {
[p: string]: PropDef;
}
export type PropDefGetter = (type: Component) => PropDef[] | null;
const propTypesMap = new Map();
Object.keys(PropTypes).forEach(typeName => {
// @ts-ignore
const type = PropTypes[typeName];
propTypesMap.set(type, typeName);
propTypesMap.set(type.isRequired, typeName);
});
const hasDocgen = (obj: any) => obj && obj.props && Object.keys(obj.props).length > 0;
const propsFromDocgen: PropDefGetter = type => {
const props: PropDefMap = {};
const docgenInfoProps = type.__docgenInfo.props;
Object.keys(docgenInfoProps).forEach(property => {
const docgenInfoProp = docgenInfoProps[property];
const defaultValueDesc = docgenInfoProp.defaultValue || {};
const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
props[property] = {
name: property,
type: propType,
required: docgenInfoProp.required,
description: docgenInfoProp.description,
defaultValue: defaultValueDesc.value,
};
});
return Object.values(props);
};
const propsFromPropTypes: PropDefGetter = type => {
const props: PropDefMap = {};
if (type.propTypes) {
Object.keys(type.propTypes).forEach(property => {
const typeInfo = type.propTypes[property];
const required = typeInfo.isRequired === undefined;
const docgenInfo =
type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
const description = docgenInfo ? docgenInfo.description : null;
let propType = propTypesMap.get(typeInfo) || 'other';
if (propType === 'other') {
if (docgenInfo && docgenInfo.type) {
propType = docgenInfo.type.name;
}
}
props[property] = { name: property, type: propType, required, description };
});
}
if (type.defaultProps) {
Object.keys(type.defaultProps).forEach(property => {
const value = type.defaultProps[property];
if (value === undefined) {
return;
}
if (!props[property]) {
props[property] = { name: property, type: 'any', required: false };
}
props[property].defaultValue = value;
});
}
return Object.values(props);
};
export const getPropDefs: PropDefGetter = type =>
hasDocgen(type.__docgenInfo) ? propsFromDocgen(type) : propsFromPropTypes(type);

4
addons/info/src/__snapshots__/index.test.js.snap
View File

@ -1331,7 +1331,7 @@ exports[`addon Info should render component description if story kind matches co
bordered={true}
className={null}
copyable={true}
format={true}
format={false}
language="js"
padded={false}
>
@ -5888,7 +5888,7 @@ exports[`addon Info should render component description if story name matches co
bordered={true}
className={null}
copyable={true}
format={true}
format={false}
language="js"
padded={false}
>

2
addons/info/src/components/markdown/code.js
View File

@ -5,7 +5,7 @@ import { ThemeProvider, convert } from '@storybook/theming';
const Code = ({ code, language = 'plaintext', ...rest }) => (
<ThemeProvider theme={convert()}>
<SyntaxHighlighter bordered copyable language={language} {...rest}>
<SyntaxHighlighter bordered copyable format={false} language={language} {...rest}>
{code}
</SyntaxHighlighter>
</ThemeProvider>

8
addons/notes/src/Panel.tsx
View File

@ -68,7 +68,13 @@ export const SyntaxHighlighter = ({ className, children, ...props }: SyntaxHighl
// className: "lang-jsx"
const language = className.split('-');
return (
<SyntaxHighlighterBase language={language[1] || 'plaintext'} bordered copyable {...props}>
<SyntaxHighlighterBase
language={language[1] || 'plaintext'}
bordered
format={false}
copyable
{...props}
>
{children}
</SyntaxHighlighterBase>
);

6
addons/queryparams/package.json
View File

@ -7,13 +7,13 @@
"storybook",
"query"
],
"homepage": "https://github.com/storybooks/storybook#readme",
"homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/storybooks/storybook.git",
"url": "git+https://github.com/storybookjs/storybook.git",
"directory": "addons/addon-queryparams"
},
"license": "MIT",

3
addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
View File

@ -5,6 +5,9 @@ import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
storiesOf('Button', module)
.addParameters({
component: Button,
})
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emoji', () => (
<Button onClick={action('clicked')}>

6
addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
View File

@ -4,4 +4,8 @@ import { storiesOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Welcome', module)
.addParameters({
component: Welcome,
})
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

2
app/rax/README.md
View File

@ -3,7 +3,7 @@
Storybook for Rax is a UI development environment for your Rax components.
With it, you can visualize different states of your UI components and develop them interactively.
![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

6
app/rax/package.json
View File

@ -6,13 +6,13 @@
"storybook",
"rax"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/rax",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/rax",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git",
"url": "https://github.com/storybookjs/storybook.git",
"directory": "app/rax"
},
"license": "MIT",

3
app/react/src/client/preview/render.js
View File

@ -53,6 +53,7 @@ export default function renderMain({
if (!forceRender) {
ReactDOM.unmountComponentAtNode(rootEl);
}
showMain();
render(element, rootEl);
showMain();
}

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

@ -8,13 +8,13 @@
"storybook",
"parameter"
],
"homepage": "https://github.com/storybooks/storybook#readme",
"homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/storybooks/storybook.git",
"url": "git+https://github.com/storybookjs/storybook.git",
"directory": "dev-kit/addon-parameter"
},
"license": "MIT",

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

@ -8,13 +8,13 @@
"storybook",
"roundtrip"
],
"homepage": "https://github.com/storybooks/storybook#readme",
"homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/storybooks/storybook.git",
"url": "git+https://github.com/storybookjs/storybook.git",
"directory": "dev-kit/addon-roundtrip"
},
"license": "MIT",

2
docs/package.json
View File

@ -37,7 +37,7 @@
"is-builtin-module": "^3.0.0",
"lodash": "^4.17.11",
"marked": "^0.6.2",
"polished": "^3.4.0",
"polished": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-document-title": "^2.0.3",

3
docs/src/new-components/basics/tooltip/Tooltip.stories.js
View File

@ -16,6 +16,9 @@ const Content = styled.div`
`;
storiesOf('basics/tooltip/Tooltip', module)
.addParameters({
component: Tooltip,
})
.add('basic, default', () => (
<Tooltip hasChrome {...mockPopperProps}>
<Content>Text</Content>

3
docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
View File

@ -13,6 +13,9 @@ export const links = [
];
storiesOf('basics/tooltip/TooltipLinkList', module)
.addParameters({
component: TooltipLinkList,
})
.addDecorator(storyFn => (
<div style={{ height: '300px' }}>
<WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>

3
docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
View File

@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
import TooltipMessage from './TooltipMessage';
storiesOf('basics/tooltip/TooltipMessage', module)
.addParameters({
component: TooltipMessage,
})
.addDecorator(storyFn => (
<div style={{ height: '300px' }}>
<WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>

3
docs/src/new-components/basics/tooltip/TooltipNote.stories.js
View File

@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
import TooltipNote from './TooltipNote';
storiesOf('basics/tooltip/TooltipNote', module)
.addParameters({
component: TooltipNote,
})
.addDecorator(storyFn => (
<div style={{ height: '300px' }}>
<WithTooltip hasChrome={false} placement="top" trigger="click" startOpen tooltip={storyFn()}>

3
docs/src/new-components/basics/tooltip/WithTooltip.stories.js
View File

@ -46,6 +46,9 @@ Tooltip.defaultProps = {
};
storiesOf('basics/tooltip/WithTooltip', module)
.addParameters({
component: WithTooltip,
})
.addDecorator(storyFn => (
<ViewPort>
<BackgroundBox>

2
docs/src/pages/addons/writing-addons/index.md
View File

@ -266,7 +266,7 @@ You can learn more about the complete API [here](/addons/api).
## Packaging
You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybooks/storybook/tree/master/addons/notes).
You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybookjs/storybook/tree/master/addons/notes).
In addition to moving the above code to a NPM module, we've set `react` and `@storybook/addons` as peer dependencies.

19
docs/yarn.lock
View File

@ -23,20 +23,13 @@
dependencies:
regenerator-runtime "^0.12.0"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.4.2":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/types@^7.0.0":
version "7.3.4"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed"
@ -8805,12 +8798,12 @@ pngquant-bin@^3.0.0:
bin-wrapper "^3.0.0"
logalot "^2.0.0"
polished@^3.3.1, polished@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.0.tgz#29b2a028ee0408df5dded55a2a25e913bc6749a9"
integrity sha512-GiuavmunMIKMOEoSPkXoqBYM2ZcI4YIwCaiwmTOQ55Zq4HG2kD0YZt3WlLZ2l3U9XhJ1LM/fgjCFHHffiZP0YQ==
polished@^3.3.1, polished@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.1.tgz#1eb5597ec1792206365635811d465751f5cbf71c"
integrity sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg==
dependencies:
"@babel/runtime" "^7.4.4"
"@babel/runtime" "^7.4.5"
popper.js@^1.14.4, popper.js@^1.14.7:
version "1.15.0"

8
examples-native/crna-kitchen-sink/storybook/stories/index.js
View File

@ -20,7 +20,9 @@ addParameters({
],
});
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
storiesOf('Welcome', module).addParameters({
component: Welcome
}).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
notes: `
# Markdown!\n
* List Item
@ -28,7 +30,9 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
`,
});
storiesOf('Button', module)
storiesOf('Button', module).addParameters({
component: Button
})
.addParameters({
backgrounds: [
{ name: 'dark', value: '#222222' },

12
examples/cra-kitchen-sink/src/stories/App.stories.js
View File

@ -1,8 +1,8 @@
// FIXME: svgr issue @igor-dv
// import React from 'react';
// import { storiesOf } from '@storybook/react';
//
// import App from '../App';
//
// storiesOf('App', module).add('full app', () => <App />);
import React from 'react';
import { storiesOf } from '@storybook/react';
import App from '../App';
storiesOf('App', module).add('full app', () => <App />);

2
examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
View File

@ -63,7 +63,7 @@ exports[`Storyshots Button with new info 1`] = `
>
Use the
<a
href="https://github.com/storybooks/storybook/tree/master/addons/info"
href="https://github.com/storybookjs/storybook/tree/master/addons/info"
rel="noopener noreferrer"
style="color:#3498db"
target="_blank"

3
examples/cra-kitchen-sink/src/stories/index.stories.js
View File

@ -24,6 +24,9 @@ const InfoButton = () => (
);
storiesOf('Button', module)
.addParameters({
component: Button,
})
.add('with text', () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>, {
options: { selectedPanel: 'storybook/actions/panel' },
})

6
examples/cra-kitchen-sink/src/stories/welcome.js
View File

@ -3,4 +3,8 @@ import { Welcome } from '@storybook/react/demo';
import { storiesOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Welcome', module)
.addParameters({
component: Welcome,
})
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

9
examples/cra-react15/src/stories/index.js
View File

@ -6,9 +6,16 @@ import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Welcome', module)
.addParameters({
component: Welcome,
})
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Button', module)
.addParameters({
component: Button,
})
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emoji', () => (
<Button onClick={action('clicked')}>

3
examples/ember-cli/stories/addon-centered.stories.js
View File

@ -3,6 +3,9 @@ import { storiesOf } from '@storybook/ember';
import Centered from '@storybook/addon-centered/ember';
storiesOf('Addon|Centered', module)
.addParameters({
component: Centered,
})
.addDecorator(Centered)
.add('button', () => ({
template: hbs`<button>A Button</button>`,

8
examples/marko-cli/src/stories/addon-actions.stories.js
View File

@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/marko';
import { action } from '@storybook/addon-actions';
import Button from '../components/action-button/index.marko';
storiesOf('Addons|Actions/Button', module).add('Simple', () =>
Button.renderSync({ click: action('action logged!') })
);
storiesOf('Addons|Actions/Button', module)
.addParameters({
component: Button,
})
.add('Simple', () => Button.renderSync({ click: action('action logged!') }));

3
examples/marko-cli/src/stories/addon-knobs.stories.js
View File

@ -3,6 +3,9 @@ import { withKnobs, text, number } from '@storybook/addon-knobs';
import Hello from '../components/hello/index.marko';
storiesOf('Addons|Knobs/Hello', module)
.addParameters({
component: Hello,
})
.addParameters({ options: { panelPosition: 'right' } })
.addDecorator(withKnobs)
.add('Simple', () => {

21
examples/marko-cli/src/stories/index.stories.js
View File

@ -4,12 +4,27 @@ import ClickCount from '../components/click-count/index.marko';
import StopWatch from '../components/stop-watch/index.marko';
import Welcome from '../components/welcome/index.marko';
storiesOf('Main|Welcome', module).add('welcome', () => Welcome.renderSync({}));
storiesOf('Main|Welcome', module)
.addParameters({
component: Welcome,
})
.add('welcome', () => Welcome.renderSync({}));
storiesOf('Main|Hello', module)
.addParameters({
component: Hello,
})
.add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
.add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
storiesOf('Main|ClickCount', module).add('Simple', () => ClickCount.renderSync({}));
storiesOf('Main|ClickCount', module)
.addParameters({
component: ClickCount,
})
.add('Simple', () => ClickCount.renderSync({}));
storiesOf('Main|StopWatch', module).add('Simple', () => StopWatch.renderSync({}));
storiesOf('Main|StopWatch', module)
.addParameters({
component: StopWatch,
})
.add('Simple', () => StopWatch.renderSync({}));

3
examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
View File

@ -7,6 +7,9 @@ import Centered from '@storybook/addon-centered/mithril';
import Button from '../Button';
storiesOf('Addons|Centered', module)
.addParameters({
component: Centered,
})
.addDecorator(Centered)
.add('button', () => ({
view: () => <Button>A button</Button>,

13
examples/mithril-kitchen-sink/src/stories/index.stories.js
View File

@ -7,11 +7,18 @@ import { linkTo } from '@storybook/addon-links';
import Button from '../Button';
import Welcome from '../Welcome';
storiesOf('Welcome', module).add('to Storybook', () => ({
view: () => m(Welcome, { showApp: linkTo('Button') }),
}));
storiesOf('Welcome', module)
.addParameters({
component: Welcome,
})
.add('to Storybook', () => ({
view: () => m(Welcome, { showApp: linkTo('Button') }),
}));
storiesOf('Button', module)
.addParameters({
component: Button,
})
.add('with text', () => ({
view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
}))

4
examples/official-storybook/config.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { load, addDecorator, addParameters } from '@storybook/react';
import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
import { DocsPage } from '@storybook/addon-docs/blocks';
import { withCssResources } from '@storybook/addon-cssresources';
import { withA11y } from '@storybook/addon-a11y';
@ -49,13 +50,14 @@ addParameters({
options: {
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: '|',
theme: { base: 'light', brandTitle: 'Storybook!' },
theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
},
backgrounds: [
{ name: 'storybook app', value: themes.light.appBg, default: true },
{ name: 'light', value: '#eeeeee' },
{ name: 'dark', value: '#222222' },
],
docs: DocsPage,
});
load(require.context('../../lib/ui/src', true, /\.stories\.js$/), module);

7
examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
View File

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Docs default 1`] = `
<div>
Click the docs tab to see the docs
</div>
`;

9
examples/official-storybook/stories/addon-a11y.stories.js
View File

@ -12,6 +12,9 @@ const image = 'http://placehold.it/350x150';
const href = 'javascript:void 0';
storiesOf('Addons|A11y/BaseButton', module)
.addParameters({
component: BaseButton,
})
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Default', () => <BaseButton label="" />)
.add('Label', () => <BaseButton label={text} />)
@ -27,6 +30,9 @@ storiesOf('Addons|A11y/BaseButton', module)
));
storiesOf('Addons|A11y/Button', module)
.addParameters({
component: Button,
})
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Default', () => <Button />)
.add('Content', () => <Button content={text} />)
@ -35,6 +41,9 @@ storiesOf('Addons|A11y/Button', module)
.add('Invalid contrast', () => <Button contrast="wrong" content={text} />);
storiesOf('Addons|A11y/Form', module)
.addParameters({
component: Form,
})
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Without Label', () => (
<Form.Field label="">

27
examples/official-storybook/stories/addon-info.stories.js
View File

@ -74,6 +74,30 @@ Sometimes you might want to manually include some \`code\` examples:
const Button = () => <button />;
~~~
classes in javascript
~~~javascript
export class FromComponent {
form = new FormControl({
searchTerm: new FromControl(''),
searchDate: new FromControl(''),
endDate: new FromControl(''),
})
}
~~~
html with special formatting
~~~html
<foo-outer property-a="value"
property-b="value"
property-c="value">
<foo-inner property-a="value"
property-b="value" />
</foo-outer>
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
`;
@ -229,6 +253,9 @@ storiesOf('Addons|Info/Options.styles', module)
});
storiesOf('Addons|Info/Options.TableComponent', module)
.addParameters({
component: TableComponent,
})
.addDecorator(withInfo)
.add('Use a custom component for the table', () => <BaseButton label="Button" />, {
info: {

3
examples/official-storybook/stories/addon-knobs.stories.js
View File

@ -42,6 +42,9 @@ let injectedItems = [];
let injectedIsLoading = false;
storiesOf('Addons|Knobs.withKnobs', module)
.addParameters({
component: withKnobs,
})
.addDecorator(withKnobs)
.add('tweaks static values', () => {
const name = text('Name', 'Storyteller');

25
examples/official-storybook/stories/addon-notes.stories.js
View File

@ -30,6 +30,31 @@ storiesOf('Addons|Notes', module)
}
)
~~~
## Code examples for syntax-highlighter to deal with
### classes in javascript
~~~javascript
export class FromComponent {
form = new FormControl({
searchTerm: new FromControl(''),
searchDate: new FromControl(''),
endDate: new FromControl(''),
})
}
~~~
### html with special formatting
~~~html
<foo-outer property-a="value"
property-b="value"
property-c="value">
<foo-inner property-a="value"
property-b="value" />
</foo-outer>
~~~
`;
const markdownTable = `

26
examples/official-storybook/stories/core/errors.stories.js
View File

@ -1,9 +1,13 @@
import React, { Fragment } from 'react';
const BadComponent = () => ({ renderable: 'no, react can not render objects' });
export default {
title: 'Core|Errors',
};
export const exception = () => {
throw new Error('error');
throw new Error('storyFn threw an error! WHOOPS');
};
exception.title = 'story throws exception';
exception.parameters = {
@ -11,9 +15,23 @@ exception.parameters = {
chromatic: { disable: true },
};
export const errors = () => null;
errors.title = 'story errors';
errors.parameters = {
export const badComponent = () => (
<Fragment>
<div>Hello world</div>
<BadComponent />
</Fragment>
);
badComponent.title = 'story errors - variant error';
badComponent.parameters = {
notes: 'Story does not return something react can render',
storyshots: { disable: true },
chromatic: { disable: true },
};
export const badStory = () => false;
badStory.title = 'story errors - story un-renderable type';
badStory.parameters = {
notes: 'Story does not return something react can render',
storyshots: { disable: true },
chromatic: { disable: true },
};

11
examples/official-storybook/stories/other-demo.stories.js
View File

@ -6,11 +6,16 @@ import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
storiesOf('Other|Demo/Welcome', module).add('to Storybook', () => (
<Welcome showApp={linkTo('Button')} />
));
storiesOf('Other|Demo/Welcome', module)
.addParameters({
component: Welcome,
})
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Other|Demo/Button', module)
.addParameters({
component: Button,
})
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emoji', () => (
<Button onClick={action('clicked')}>

3
examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
View File

@ -7,5 +7,8 @@ import Centered from '@storybook/addon-centered/preact';
import Button from '../Button';
storiesOf('Addons|Centered', module)
.addParameters({
component: Centered,
})
.addDecorator(Centered)
.add('Button', () => <Button>A button</Button>);

9
examples/preact-kitchen-sink/src/stories/index.stories.js
View File

@ -9,9 +9,16 @@ import { linkTo } from '@storybook/addon-links';
import Welcome from '../Welcome';
import Button from '../Button';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Welcome', module)
.addParameters({
component: Welcome,
})
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Button', module)
.addParameters({
component: Button,
})
.add('with text', () => <Button onclick={action('clicked')}>Hello Button</Button>)
.add('with some emoji', () => (
<Button onclick={action('clicked')}>

2
examples/rax-kitchen-sink/.storybook/config.js
View File

@ -3,7 +3,7 @@ import { configure, addParameters } from '@storybook/rax';
addParameters({
options: {
name: 'Rax Kitchen Sink',
url: 'https://github.com/storybooks/storybook/tree/master/examples/rax-kitchen-sink',
url: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink',
goFullScreen: false,
showAddonsPanel: true,
showSearchBox: false,

3
examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
View File

@ -5,6 +5,9 @@ import { action } from '@storybook/addon-actions';
import Button from '../components/Button.svelte';
storiesOf('Addon|Centered', module)
.addParameters({
component: Centered,
})
.addDecorator(Centered)
.add('rounded', () => ({
Component: Button,

1
examples/vue-kitchen-sink/.storybook/addons.js
View File

@ -8,3 +8,4 @@ import '@storybook/addon-options/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-contexts/register';
import '@storybook/addon-docs/register';

3
examples/vue-kitchen-sink/.storybook/config.js
View File

@ -2,6 +2,8 @@ import { configure, addParameters, addDecorator } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex';
import { withA11y } from '@storybook/addon-a11y';
import { DocsPage } from '@storybook/addon-docs/blocks';
import MyButton from '../src/stories/Button.vue';
addDecorator(withA11y);
@ -12,6 +14,7 @@ addParameters({
options: {
hierarchyRootSeparator: /\|/,
},
docs: DocsPage,
});
function loadStories() {

1
examples/vue-kitchen-sink/package.json
View File

@ -20,6 +20,7 @@
"@storybook/addon-backgrounds": "5.2.0-alpha.23",
"@storybook/addon-centered": "5.2.0-alpha.23",
"@storybook/addon-contexts": "5.2.0-alpha.23",
"@storybook/addon-docs": "5.2.0-alpha.23",
"@storybook/addon-knobs": "5.2.0-alpha.23",
"@storybook/addon-links": "5.2.0-alpha.23",
"@storybook/addon-notes": "5.2.0-alpha.23",

3
examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
View File

@ -4,6 +4,9 @@ import Centered from '@storybook/addon-centered/vue';
import MyButton from './Button.vue';
storiesOf('Addon|Centered', module)
.addParameters({
component: Centered,
})
.addDecorator(Centered)
.add('rounded', () => ({
components: { MyButton },

20
examples/vue-kitchen-sink/src/stories/index.js
View File

@ -4,13 +4,21 @@ import { linkTo } from '@storybook/addon-links';
import Welcome from './Welcome.vue';
import App from '../App.vue';
storiesOf('Welcome', module).add('Welcome', () => ({
render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
}));
storiesOf('Welcome', module)
.addParameters({
component: Welcome,
})
.add('Welcome', () => ({
render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
}));
storiesOf('App', module).add('App', () => ({
render: h => h(App),
}));
storiesOf('App', module)
.addParameters({
component: App,
})
.add('App', () => ({
render: h => h(App),
}));
storiesOf('Button', module)
// Works if Vue.component is called in the config.js in .storybook

2
lib/cli/generators/RAX/template/.storybook/config.js
View File

@ -3,7 +3,7 @@ import { configure, addParameters } from '@storybook/rax';
addParameters({
options: {
name: 'Rax Kitchen Sink',
url: 'https://github.com/storybooks/storybook/tree/master/examples/rax-kitchen-sink',
url: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink',
goFullScreen: false,
showAddonsPanel: true,
showSearchBox: false,

40
lib/client-api/src/config_api.ts
View File

@ -1,6 +1,5 @@
/* eslint no-underscore-dangle: 0 */
import { location } from 'global';
import Events from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { PostmsgTransport } from '@storybook/channel-postmessage';
@ -68,40 +67,29 @@ export default class ConfigApi {
loaders();
}
} catch (e) {
logger.error(e);
errors.push(e);
}
try {
this._renderMain();
} catch (e) {
logger.error(e);
errors.push(e);
if (!errors.length) {
try {
this._renderMain();
} catch (e) {
errors.push(e);
}
}
if (errors.length) {
if (module.hot && module.hot.status() === 'apply') {
// We got this issue, after webpack fixed it and applying it.
// Therefore error message is displayed forever even it's being fixed.
// So, we'll detect it reload the page.
logger.error('RELOAD THE PAGE', 'module.hot.status() === apply');
location.reload();
} else {
// If we are accessing the site, but the error is not fixed yet.
// There we can render the error.
this._renderError(errors[0]);
this._storyStore.setSelection(undefined, errors[0]);
// Clear out the store as chances as only some of the stories will have
// made it in before the error was thrown
// this._storyStore.clean();
}
throw errors[0];
} else {
this._storyStore.setSelection(undefined, null);
}
};
if (module.hot) {
module.hot.accept(() => {
setTimeout(render);
});
module.hot.dispose(() => {
if (m.hot) {
m.hot.accept();
m.hot.dispose(() => {
this._clearDecorators();
});
}

10
lib/client-api/src/story_store.ts
View File

@ -99,13 +99,19 @@ export default class StoryStore extends EventEmitter {
);
}
setSelection = ({ storyId, viewMode }) => {
this._selection = { storyId, viewMode };
setSelection = (data: any, error: Error) => {
const { storyId, viewMode } = data || {};
this._selection = data === undefined ? this._selection : { storyId, viewMode };
this._error = error === undefined ? this._error : error;
setTimeout(() => this.emit(Events.STORY_RENDER), 1);
};
getSelection = () => this._selection;
getError = () => this._error;
remove = (id: string): void => {
const { _data } = this;
delete _data[id as Keys];

4
lib/client-api/src/types.ts
View File

@ -382,7 +382,7 @@ export interface LegacyItem {
export type LegacyData = { [K in Keys]: LegacyItem };
export interface StoryStore {
fromId: (id: string) => any;
getSelection: () => void;
getSelection: (a: any, b: Error) => void;
getRevision: () => number;
incrementRevision: () => void;
addLegacyStory: (p: DecoratorData) => void;
@ -390,7 +390,7 @@ export interface StoryStore {
addStory: (p: DecoratorData) => void;
remove: (id: string) => void;
setChannel: (channel: Channel) => void;
setSelection: (ref: any) => void;
setSelection: (ref: any, err: Error) => void;
emit?: (...args: any) => void;
raw?: () => [] | {};
extract: () => {};

74
lib/codemod/README.md
View File

@ -9,8 +9,8 @@ It will help you migrate breaking changes & deprecations.
yarn add jscodeshift @storybook/codemod --dev
```
- `@storybook/codemod` is our collection of codemod scripts.
- `jscodeshift` is a tool we use to apply our codemods.
- `@storybook/codemod` is our collection of codemod scripts.
- `jscodeshift` is a tool we use to apply our codemods.
After running the migration commands, you can remove them from your `package.json`, if you added them.
@ -65,23 +65,18 @@ Replaces the Info addon's deprecated `addWithInfo` API with the standard `withIn
Simple example:
```js
storiesOf('Button').addWithInfo(
'simple usage',
'This is the basic usage of the button.',
() => (
<Button label="The Button" />
)
)
storiesOf('Button').addWithInfo('simple usage', 'This is the basic usage of the button.', () => (
<Button label="The Button" />
));
```
Becomes
```js
storiesOf('Button').add('simple usage', withInfo(
'This is the basic usage of the button.'
)(() => (
<Button label="The Button" />
)))
storiesOf('Button').add(
'simple usage',
withInfo('This is the basic usage of the button.')(() => <Button label="The Button" />)
);
```
With options example:
@ -90,21 +85,50 @@ With options example:
storiesOf('Button').addWithInfo(
'simple usage (disable source)',
'This is the basic usage of the button.',
() => (
<Button label="The Button" />
),
() => <Button label="The Button" />,
{ source: false, inline: true }
)
);
```
Becomes
```js
storiesOf('Button').add('simple usage (disable source)', withInfo({
text: 'This is the basic usage of the button.',
source: false,
inline: true
})(() => (
<Button label="The Button" />
)))
storiesOf('Button').add(
'simple usage (disable source)',
withInfo({
text: 'This is the basic usage of the button.',
source: false,
inline: true,
})(() => <Button label="The Button" />)
);
```
### add-component-parameters
This tries to smartly adds "component" parameters to all your existing stories
for use in SB Docs.
```sh
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/add-component-parameters.js . --ignore-pattern "node_modules|dist"
```
For example:
```js
input { Button } from './Button';
storiesOf('Button', module).add('story', () => <Button label="The Button" />);
```
Becomes:
```js
input { Button } from './Button';
storiesOf('Button', module)
.addParameters({ component: Button })
.add('story', () => <Button label="The Button" />);
```
Heuristics:
- The storiesOf "kind" name must be Button
- Button must be imported in the file

44
lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js Normal file
View File

@ -0,0 +1,44 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
import { storiesOf, configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';
storiesOf('Button', module).add('basic', () => <Button label="The Button" />);
storiesOf('Button').add('no module', () => <Button label="The Button" />);
storiesOf('Button', module).add('with story parameters', () => <Button label="The Button" />, {
header: false,
inline: true,
});
storiesOf('Button', module)
.addParameters({ foo: 1 })
.add('with kind parameters', () => <Button label="The Button" />);
storiesOf('Button', module)
.addParameters({ component: Button })
.add('with existing component parameters', () => <Button label="The Button" />);
storiesOf('Button', module).add('complex story', () => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
</div>
));
storiesOf('Root|Some/Button', module).add('with path', () => <Button label="The Button" />);
storiesOf('Some.Button', module).add('with dot-path', () => <Button label="The Button" />);
storiesOf('Some.Button', module)
.addDecorator(withKnobs)
.add('with decorator', () => <Button label="The Button" />);
// This isn't a valid story, but it tests the `import { comp } from ...` case
storiesOf('action', module).add('non-default component export', () => <action />);
// This shouldn't get modified since the story name doesn't match
storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);

64
lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js Normal file
View File

@ -0,0 +1,64 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
import { storiesOf, configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';
storiesOf('Button', module).addParameters({
component: Button
}).add('basic', () => <Button label="The Button" />);
storiesOf('Button').addParameters({
component: Button
}).add('no module', () => <Button label="The Button" />);
storiesOf('Button', module).addParameters({
component: Button
}).add('with story parameters', () => <Button label="The Button" />, {
header: false,
inline: true,
});
storiesOf('Button', module).addParameters({
component: Button
})
.addParameters({ foo: 1 })
.add('with kind parameters', () => <Button label="The Button" />);
storiesOf('Button', module).addParameters({
component: Button
})
.addParameters({ component: Button })
.add('with existing component parameters', () => <Button label="The Button" />);
storiesOf('Button', module).addParameters({
component: Button
}).add('complex story', () => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
</div>
));
storiesOf('Root|Some/Button', module).addParameters({
component: Button
}).add('with path', () => <Button label="The Button" />);
storiesOf('Some.Button', module).addParameters({
component: Button
}).add('with dot-path', () => <Button label="The Button" />);
storiesOf('Some.Button', module).addParameters({
component: Button
})
.addDecorator(withKnobs)
.add('with decorator', () => <Button label="The Button" />);
// This isn't a valid story, but it tests the `import { comp } from ...` case
storiesOf('action', module).addParameters({
component: action
}).add('non-default component export', () => <action />);
// This shouldn't get modified since the story name doesn't match
storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);

8
lib/codemod/src/transforms/__tests__/add-component-parameters.test.js Normal file
View File

@ -0,0 +1,8 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
defineTest(
__dirname,
'add-component-parameters',
null,
'add-component-parameters/add-component-parameters'
);

62
lib/codemod/src/transforms/add-component-parameters.js Normal file
View File

@ -0,0 +1,62 @@
/**
* Adds a `component` parameter for each storiesOf(...) call.
*
* For example:
*
* input { Button } from './Button';
* storiesOf('Button', module).add('story', () => <Button label="The Button" />);
*
* Becomes:
*
* input { Button } from './Button';
* storiesOf('Button', module)
* .addParameters({ component: Button })
* .add('story', () => <Button label="The Button" />);
*
* Heuristics:
* - The storiesOf "kind" name must be Button
* - Button must be imported in the file
*/
export default function transformer(file, api) {
const j = api.jscodeshift;
const root = j(file.source);
// Create a dictionary whose keys are all the named imports in the file.
// For instance:
//
// import foo from 'foo';
// import { bar, baz } from 'zoo';
//
// => { foo: true, bar: true, baz: true }
const importMap = {};
root.find(j.ImportDeclaration).forEach(imp =>
imp.node.specifiers.forEach(spec => {
importMap[spec.local.name] = true;
})
);
function getLeafName(string) {
const parts = string.split(/\/|\.|\|/);
return parts[parts.length - 1];
}
function addComponentParameter(call) {
const { node } = call;
const leafName = getLeafName(node.arguments[0].value);
return j.callExpression(j.memberExpression(node, j.identifier('addParameters')), [
j.objectExpression([j.property('init', j.identifier('component'), j.identifier(leafName))]),
]);
}
const storiesOfCalls = root
.find(j.CallExpression)
.filter(call => call.node.callee.name === 'storiesOf')
.filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
.filter(call => {
const leafName = getLeafName(call.node.arguments[0].value);
return importMap[leafName];
})
.replaceWith(addComponentParameter);
return root.toSource();
}

9
lib/components/src/blocks/BlockBackgroundStyles.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Theme } from '@storybook/theming';
export const getBlockBackgroundStyle: (theme: Theme) => object = (theme: Theme) => ({
borderRadius: theme.appBorderRadius,
background: theme.background.content,
boxShadow:
theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
border: `1px solid ${theme.appBorderColor}`,
});

32
lib/components/src/blocks/ColorPalette.stories.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import { ColorItem, ColorPalette } from './ColorPalette';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|ColorPalette',
Component: ColorPalette,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const defaultStyle = () => (
<ColorPalette>
<ColorItem
title="theme.color.greyscale"
subtitle="Some of the greys"
colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
/>
<ColorItem title="theme.color.primary" subtitle="Coral" colors={['#FF4785']} />
<ColorItem title="theme.color.secondary" subtitle="Ocean" colors={['#1EA7FD']} />
<ColorItem
title="theme.color.positive"
subtitle="Green"
colors={[
'rgba(102,191,60,1)',
'rgba(102,191,60,.8)',
'rgba(102,191,60,.6)',
'rgba(102,191,60,.3)',
]}
/>
</ColorPalette>
);

164
lib/components/src/blocks/ColorPalette.tsx Normal file
View File

@ -0,0 +1,164 @@
import React, { Fragment } from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
const ItemTitle = styled.div(({ theme }) => ({
fontWeight: theme.typography.weight.bold,
}));
const ItemSubtitle = styled.div(({ theme }) => ({
color:
theme.base === 'light'
? transparentize(0.2, theme.color.defaultText)
: transparentize(0.6, theme.color.defaultText),
}));
const ItemDescription = styled.div({
flex: '0 0 30%',
lineHeight: '20px',
marginTop: 5,
});
const SwatchLabel = styled.div(({ theme }) => ({
flex: 1,
textAlign: 'center',
fontFamily: theme.typography.fonts.mono,
fontSize: theme.typography.size.s1,
lineHeight: 1,
overflow: 'hidden',
color:
theme.base === 'light'
? transparentize(0.4, theme.color.defaultText)
: transparentize(0.6, theme.color.defaultText),
'> div': {
display: 'inline-block',
overflow: 'hidden',
maxWidth: '100%',
},
}));
const SwatchLabels = styled.div({
display: 'flex',
flexDirection: 'row',
});
const Swatch = styled.div({
flex: 1,
});
const SwatchColors = styled.div(({ theme }) => ({
...getBlockBackgroundStyle(theme),
display: 'flex',
flexDirection: 'row',
height: 50,
marginBottom: 5,
overflow: 'hidden',
}));
const SwatchSpecimen = styled.div({
display: 'flex',
flexDirection: 'column',
flex: 1,
position: 'relative',
marginBottom: 30,
});
const Swatches = styled.div({
flex: 1,
display: 'flex',
flexDirection: 'row',
});
const Item = styled.div({
display: 'flex',
alignItems: 'flex-start',
});
const ListName = styled.div({
flex: '0 0 30%',
});
const ListSwatches = styled.div({
flex: 1,
});
const ListHeading = styled.div(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 20,
fontWeight: theme.typography.weight.bold,
color:
theme.base === 'light'
? transparentize(0.4, theme.color.defaultText)
: transparentize(0.6, theme.color.defaultText),
}));
const List = styled.div({
display: 'flex',
flexDirection: 'column',
});
interface ColorProps {
title: string;
subtitle: string;
colors: string[];
}
/**
* A single color row your styleguide showing title, subtitle and one or more colors, used
* as a child of `ColorPalette`.
*/
export const ColorItem: React.FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
return (
<Item>
<ItemDescription>
<ItemTitle>{title}</ItemTitle>
<ItemSubtitle>{subtitle}</ItemSubtitle>
</ItemDescription>
<Swatches>
<SwatchSpecimen>
<SwatchColors>
{colors.map(color => (
<Swatch
key={color}
title={color}
style={{
backgroundColor: color,
}}
/>
))}
</SwatchColors>
<SwatchLabels>
{colors.map(color => (
<SwatchLabel key={color} title={color}>
<div>{color}</div>
</SwatchLabel>
))}
</SwatchLabels>
</SwatchSpecimen>
</Swatches>
</Item>
);
};
/**
* Styleguide documentation for colors, including names, captions, and color swatches,
* all specified as `ColorItem` children of this wrapper component.
*/
export const ColorPalette: React.FunctionComponent = ({ children, ...props }) => {
return (
<List {...props}>
<ListHeading>
<ListName>Name</ListName>
<ListSwatches>Swatches</ListSwatches>
</ListHeading>
{children}
</List>
);
};

17
lib/components/src/blocks/Description.stories.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import { Description } from './Description';
import { DocsPageWrapper } from './DocsPage';
import markdownCaption from './DocsPageExampleCaption.md';
export default {
title: 'Docs|Description',
Component: Description,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`;
export const text = () => <Description markdown={textCaption} />;
export const markdown = () => <Description markdown={markdownCaption} />;

14
lib/components/src/blocks/Description.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import Markdown from 'markdown-to-jsx';
export interface DescriptionProps {
markdown: string;
}
/**
* A markdown description for a component, typically used to show the
* components docgen docs.
*/
export const Description: React.FunctionComponent<DescriptionProps> = ({ markdown }) => (
<Markdown options={{ forceBlock: true }}>{markdown}</Markdown>
);

66
lib/components/src/blocks/DocsPage.stories.tsx Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import { DocsPage, DocsWrapper, DocsContent } from './DocsPage';
import * as storyStories from './Story.stories';
import * as previewStories from './Preview.stories';
import * as propsTableStories from './PropsTable/PropsTable.stories';
import * as sourceStories from './Source.stories';
import * as descriptionStories from './Description.stories';
export default {
title: 'Docs|DocsPage',
Component: DocsPage,
decorators: [
storyFn => (
<DocsWrapper>
<DocsContent>{storyFn()}</DocsContent>
</DocsWrapper>
),
],
};
export const empty = () => (
<DocsPage title={null}>
{storyStories.error()}
{propsTableStories.error()}
{sourceStories.sourceUnavailable()}
</DocsPage>
);
export const noText = () => (
<DocsPage title="no text">
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
</DocsPage>
);
noText.title = 'no text';
export const text = () => (
<DocsPage title="Sensorium">
{descriptionStories.text()}
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
</DocsPage>
);
export const withSubtitle = () => (
<DocsPage
title="SimStim"
subtitle="A digital representation of the thoughts and feelings of another person."
>
{descriptionStories.text()}
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
</DocsPage>
);
export const markdown = () => (
<DocsPage title="markdown">
{descriptionStories.markdown()}
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
</DocsPage>
);

84
lib/components/src/blocks/DocsPage.tsx Normal file
View File

@ -0,0 +1,84 @@
import React from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { DocumentFormatting } from '../typography/DocumentFormatting';
const breakpoint = 600;
const pageMargin = '5.55555';
export interface DocsPageProps {
title: string;
subtitle?: string;
}
const Title = styled.h1(({ theme }) => ({
// overrides h1 in DocumentFormatting
'&&': {
fontSize: theme.typography.size.m3,
lineHeight: '32px',
[`@media (min-width: ${breakpoint * 1}px)`]: {
fontSize: theme.typography.size.l1,
lineHeight: '36px',
},
},
}));
const Subtitle = styled.h2(({ theme }) => ({
// overrides h2 in DocumentFormatting
'&&': {
fontWeight: theme.typography.weight.regular,
fontSize: theme.typography.size.s3,
lineHeight: '20px',
borderBottom: 'none',
marginBottom: '15px',
[`@media (min-width: ${breakpoint * 1}px)`]: {
fontSize: theme.typography.size.m1,
lineHeight: '28px',
marginBottom: '25px',
},
},
color:
theme.base === 'light'
? transparentize(0.25, theme.color.defaultText)
: transparentize(0.25, theme.color.defaultText),
}));
export const DocsContent = styled(DocumentFormatting)({
maxWidth: 800,
width: '100%',
});
export const DocsWrapper = styled.div(({ theme }) => ({
background: theme.background.content,
display: 'flex',
justifyContent: 'center',
minHeight: '100vh',
padding: '4rem 20px',
[`@media (min-width: ${breakpoint * 1}px)`]: {},
}));
export const DocsPageWrapper: React.FunctionComponent = ({ children }) => (
<DocsWrapper>
<DocsContent>{children}</DocsContent>
</DocsWrapper>
);
/**
* An out-of-the box documentation page for components that shows the
* title & subtitle and a collection of blocks including `Description`,
* and `Preview`s for each of the component's stories.
*/
const DocsPage: React.FunctionComponent<DocsPageProps> = ({ title, subtitle, children }) => (
<>
{title && <Title>{title}</Title>}
{subtitle && <Subtitle>{subtitle}</Subtitle>}
{children}
</>
);
export { DocsPage };

93
lib/components/src/blocks/DocsPageExampleCaption.md Normal file
View File

@ -0,0 +1,93 @@
# My Example Markdown
The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
![An image](http://placehold.it/350x150)
He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
## Typography
# H1
## H2
### H3
#### H4
##### H5
###### H6
Emphasis, aka italics, with _asterisks_ or _underscores_.
Strong emphasis, aka bold, with **asterisks** or **underscores**.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
Maybe include a [link](http://storybook.js.org) to your project as well.
## Block quote
How about a block quote to spice things up?
> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
## Lists
Mixed list:
1. First ordered list item
2. Another item
- Unordered sub-list.
3. Actual numbers don't matter, just that it's a number
1. Ordered sub-list
2. Yo ho ho
4. And another item.
Bullet list:
- Whatever
- This is getting
- Very ...
- Very ...
- Tedious!
- It's getting late, nothing to see here
Numbered:
1. You get the idea
2. You still get the idea
3. You really get the idea
4. I'm done
## Tables
A basic table:
| Tables | Are | Cool |
| ------------- | :-----------: | -----: |
| col 3 is | right-aligned | \$1600 |
| col 2 is | centered | \$12 |
| zebra stripes | are neat | \$1 |
Let's throw in a crazy table, because why not?
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
| [a11y](addons/a11y) | + | | + | + | + | + | + | + | | | + | + |
| [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + | + |
| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + |
| [centered](addons/centered) | + | | + | + | | + | + | | + | | + | + |
| [contexts](addons/contexts) | + | | + | | | | | | | | | + |
## Code
Sometimes you might want to manually include some \`code\` examples? Let's do it.
```js
const Button = () => <button />;
```

93
lib/components/src/blocks/DocsPageExampleCaption.mdx Normal file
View File

@ -0,0 +1,93 @@
# My Example Markdown
The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
![An image](http://placehold.it/350x150)
He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
## Typography
# H1
## H2
### H3
#### H4
##### H5
###### H6
Emphasis, aka italics, with _asterisks_ or _underscores_.
Strong emphasis, aka bold, with **asterisks** or **underscores**.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
Maybe include a [link](http://storybook.js.org) to your project as well.
## Block quote
How about a block quote to spice things up?
> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
## Lists
Mixed list:
1. First ordered list item
2. Another item
- Unordered sub-list.
3. Actual numbers don't matter, just that it's a number
1. Ordered sub-list
2. Yo ho ho
4. And another item.
Bullet list:
- Whatever
- This is getting
- Very ...
- Very ...
- Tedious!
- It's getting late, nothing to see here
Numbered:
1. You get the idea
2. You still get the idea
3. You really get the idea
4. I'm done
## Tables
A basic table:
| Tables | Are | Cool |
| ------------- | :-----------: | -----: |
| col 3 is | right-aligned | \$1600 |
| col 2 is | centered | \$12 |
| zebra stripes | are neat | \$1 |
Let's throw in a crazy table, because why not?
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
| [a11y](addons/a11y) | + | | + | + | + | + | + | + | | | + | + |
| [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + | + |
| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + |
| [centered](addons/centered) | + | | + | + | | + | + | | + | | + | + |
| [contexts](addons/contexts) | + | | + | | | | | | | | | + |
## Code
Sometimes you might want to manually include some \`code\` examples? Let's do it.
```js
const Button = () => <button />;
```

12
lib/components/src/blocks/EmptyBlock.stories.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { EmptyBlock } from './EmptyBlock';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|EmptyBlock',
Component: EmptyBlock,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const error = () => <EmptyBlock>Generic error message</EmptyBlock>;

21
lib/components/src/blocks/EmptyBlock.tsx Normal file
View File

@ -0,0 +1,21 @@
import React, { FunctionComponent } from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
const Wrapper = styled.div(({ theme }) => ({
backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
borderRadius: theme.appBorderRadius,
border: `1px dashed ${theme.appBorderColor}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '20px',
margin: '25px 0 40px',
color:
theme.base === 'light'
? transparentize(0.4, theme.color.defaultText)
: transparentize(0.6, theme.color.defaultText),
}));
export const EmptyBlock = (props: any) => <Wrapper {...props} />;

63
lib/components/src/blocks/IFrame.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
import window from 'global';
interface IFrameProps {
id: string;
key?: string;
title: string;
src: string;
allowFullScreen: boolean;
scale: number;
style?: any;
}
interface BodyStyle {
width: string;
height: string;
transform: string;
transformOrigin: string;
}
export class IFrame extends React.Component<IFrameProps> {
iframe: any = null;
componentDidMount() {
const { id } = this.props;
this.iframe = window.document.getElementById(id);
}
shouldComponentUpdate(nextProps: IFrameProps) {
const { scale } = nextProps;
// eslint-disable-next-line react/destructuring-assignment
if (scale !== this.props.scale) {
this.setIframeBodyStyle({
width: `${scale * 100}%`,
height: `${scale * 100}%`,
transform: `scale(${1 / scale})`,
transformOrigin: 'top left',
});
}
// if(this.props.src !== src) {
// debugger;
// }
return false;
}
setIframeBodyStyle(style: BodyStyle) {
return Object.assign(this.iframe.contentDocument.body.style, style);
}
render() {
const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
return (
<iframe
scrolling="yes"
id={id}
title={title}
src={src}
allowFullScreen={allowFullScreen}
{...rest}
/>
);
}
}

34
lib/components/src/blocks/IconGallery.stories.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { IconItem, IconGallery } from './IconGallery';
import { DocsPageWrapper } from './DocsPage';
import { Icons as ExampleIcon } from '../icon/icon';
export default {
title: 'Docs|IconGallery',
Component: IconGallery,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const defaultStyle = () => (
<IconGallery>
<IconItem name="add">
<ExampleIcon icon="add" />
</IconItem>
<IconItem name="subtract">
<ExampleIcon icon="subtract" />
</IconItem>
<IconItem name="home">
<ExampleIcon icon="home" />
</IconItem>
<IconItem name="facehappy">
<ExampleIcon icon="facehappy" />
</IconItem>
<IconItem name="bar">
<img src="https://placehold.it/50x50" alt="example" />
</IconItem>
<IconItem name="bar">
<img src="https://placehold.it/50x50" alt="example" />
</IconItem>
</IconGallery>
);

63
lib/components/src/blocks/IconGallery.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
import { styled } from '@storybook/theming';
import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
const ItemLabel = styled.div({
marginLeft: 10,
lineHeight: 1.2,
});
const ItemSpecimen = styled.div(({ theme }) => ({
...getBlockBackgroundStyle(theme),
overflow: 'hidden',
height: 40,
width: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flex: 'none',
'> img, > svg': {
width: 20,
height: 20,
},
}));
const Item = styled.div({
display: 'inline-flex',
flexDirection: 'row',
alignItems: 'center',
flex: '0 1 calc(20% - 10px)',
minWidth: 120,
margin: '0px 10px 30px 0',
});
const List = styled.div({
display: 'flex',
flexFlow: 'row wrap',
});
interface IconItemProps {
name: string;
}
/**
* An individual icon with a caption and an example (passed as `children`).
*/
export const IconItem: React.FunctionComponent<IconItemProps> = ({ name, children }) => {
return (
<Item>
<ItemSpecimen>{children}</ItemSpecimen>
<ItemLabel>{name}</ItemLabel>
</Item>
);
};
/**
* Show a grid of icons, as specified by `IconItem`.
*/
export const IconGallery: React.FunctionComponent = ({ children, ...props }) => {
return <List {...props}>{children}</List>;
};

82
lib/components/src/blocks/Preview.stories.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Preview } from './Preview';
import { DocsPageWrapper } from './DocsPage';
import { Button } from '../Button/Button';
import * as sourceStories from './Source.stories';
export default {
title: 'Docs|Preview',
Component: Preview,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const codeCollapsed = () => (
<Preview isExpanded={false} withSource={sourceStories.jsx().props}>
<Button secondary>Button 1</Button>
</Preview>
);
export const codeExpanded = () => (
<Preview isExpanded withSource={sourceStories.jsx().props}>
<Button secondary>Button 1</Button>
</Preview>
);
export const codeError = () => (
<Preview isExpanded withSource={sourceStories.sourceUnavailable().props}>
<Button secondary>Button 1</Button>
</Preview>
);
export const single = () => (
<Preview>
<Button secondary>Button 1</Button>
</Preview>
);
export const row = () => (
<Preview>
<Button secondary>Button 1</Button>
<Button secondary>Button 2</Button>
<Button secondary>Button 3</Button>
<Button secondary>Button 4</Button>
<Button secondary>Button 5</Button>
<Button secondary>Button 6</Button>
<Button secondary>Button 7</Button>
</Preview>
);
export const column = () => (
<Preview isColumn>
<Button secondary>Button 1</Button>
<Button secondary>Button 2</Button>
<Button secondary>Button 3</Button>
</Preview>
);
export const gridWith3Columns = () => (
<Preview columns={3}>
<Button secondary>Button 1</Button>
<Button secondary>Button 2</Button>
<Button secondary>Button 3</Button>
<Button secondary>Button 4</Button>
<Button secondary>Button 5</Button>
<Button secondary>Button 6</Button>
<Button secondary>Button 7 long long long long long title</Button>
<Button secondary>Button 8</Button>
<Button secondary>Button 9</Button>
<Button secondary>Button 10</Button>
<Button secondary>Button 11</Button>
<Button secondary>Button 12</Button>
<Button secondary>Button 13</Button>
<Button secondary>Button 14</Button>
<Button secondary>Button 15</Button>
<Button secondary>Button 16</Button>
<Button secondary>Button 17</Button>
<Button secondary>Button 18</Button>
<Button secondary>Button 19</Button>
<Button secondary>Button 20</Button>
</Preview>
);

96
lib/components/src/blocks/Preview.tsx Normal file
View File

@ -0,0 +1,96 @@
import React from 'react';
import { styled } from '@storybook/theming';
import { darken } from 'polished';
import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
import { Source, SourceProps } from './Source';
import { ActionBar } from '../ActionBar/ActionBar';
export interface PreviewProps {
isColumn?: boolean;
columns?: number;
withSource?: SourceProps;
isExpanded?: boolean;
}
const ChildrenContainer = styled.div<PreviewProps>(({ isColumn, columns }) => ({
display: 'flex',
flexWrap: 'wrap',
flexDirection: isColumn ? 'column' : 'row',
marginTop: -20,
'> *': {
flex: columns ? `1 1 calc(100%/${columns} - 20px)` : `1 1 0%`,
marginRight: 20,
marginTop: 20,
},
}));
const StyledSource = styled(Source)(({ theme }) => ({
margin: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
border: 'none',
background:
theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
color: theme.color.lightest,
button: {
background:
theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
},
}));
const PreviewWrapper = styled.div<PreviewProps>(({ theme, withSource }) => ({
...getBlockBackgroundStyle(theme),
padding: '30px 20px',
position: 'relative',
borderBottomLeftRadius: withSource && 0,
borderBottomRightRadius: withSource && 0,
}));
const PreviewContainer = styled.div({
margin: '25px 0 40px',
});
/**
* A preview component for showing one or more component `Story`
* items. The preview also shows the source for the componnent
* as a drop-down.
*/
const Preview: React.FunctionComponent<PreviewProps> = ({
isColumn,
columns,
children,
withSource,
isExpanded = false,
...props
}) => {
const [expanded, setExpanded] = React.useState(isExpanded);
const { source, actionItem } = expanded
? {
source: <StyledSource {...withSource} dark />,
actionItem: { title: 'Hide code', onClick: () => setExpanded(false) },
}
: {
source: null,
actionItem: { title: 'Show code', onClick: () => setExpanded(true) },
};
return (
<PreviewContainer {...props}>
<PreviewWrapper withSource={withSource}>
<ChildrenContainer isColumn={isColumn} columns={columns}>
{Array.isArray(children) ? (
children.map((child, i) => <div key={i.toString()}>{child}</div>)
) : (
<div>{children}</div>
)}
</ChildrenContainer>
{withSource && <ActionBar actionItems={[actionItem]} />}
</PreviewWrapper>
{withSource && source}
</PreviewContainer>
);
};
export { Preview };

7
lib/components/src/blocks/PropsTable/PropDef.ts Normal file
View File

@ -0,0 +1,7 @@
export interface PropDef {
name: string;
type: any;
required: boolean;
description?: string;
defaultValue?: any;
}

113
lib/components/src/blocks/PropsTable/PropRow.stories.tsx Normal file
View File

@ -0,0 +1,113 @@
import React from 'react';
import { PropRow } from './PropRow';
import { Table } from './PropsTable';
import { DocsPageWrapper } from '../DocsPage';
export default {
Component: PropRow,
title: 'Docs|PropRow',
decorators: [
getStory => (
<DocsPageWrapper>
<Table>
<tbody>{getStory()}</tbody>
</Table>
</DocsPageWrapper>
),
],
};
const stringDef = {
name: 'someString',
type: { name: 'string' },
required: true,
description: 'someString description',
defaultValue: 'fixme',
};
const longNameDef = {
...stringDef,
name: 'reallyLongStringThatTakesUpSpace',
};
const longDescDef = {
...stringDef,
description: 'really long description that takes up a lot of space. sometimes this happens.',
};
const numberDef = {
name: 'someNumber',
type: { name: 'number' },
required: false,
description: 'someNumber description',
defaultValue: 0,
};
const objectDef = {
name: 'someObject',
type: { name: 'objectOf', value: { name: 'number' } },
required: false,
description: 'A simple `objectOf` propType.',
defaultValue: { value: '{ key: 1 }', computed: false },
};
const arrayDef = {
name: 'someOArray',
type: { name: 'arrayOf', value: { name: 'number' } },
required: false,
description: 'array of a certain type',
defaultValue: { value: '[1, 2, 3]', computed: false },
};
const complexDef = {
name: 'someComplex',
type: {
name: 'objectOf',
value: {
name: 'shape',
value: {
id: {
name: 'number',
description:
"Just an internal propType for a shape.\n It's also required, and as you can see it supports multi-line comments!",
required: true,
},
func: {
name: 'func',
description: 'A simple non-required function',
required: false,
},
arr: {
name: 'arrayOf',
value: {
name: 'shape',
value: {
index: {
name: 'number',
description: '5-level deep propType definition and still works.',
required: true,
},
},
},
description: 'An `arrayOf` shape',
required: false,
},
},
},
},
required: false,
description: 'A very complex `objectOf` propType.',
defaultValue: {
value: '{\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n}',
computed: false,
},
};
export const string = () => <PropRow row={stringDef} />;
export const longName = () => <PropRow row={longNameDef} />;
export const longDesc = () => <PropRow row={longDescDef} />;
export const number = () => <PropRow row={numberDef} />;
export const objectOf = () => <PropRow row={objectDef} />;
export const arrayOf = () => <PropRow row={arrayDef} />;
export const complex = () => <PropRow row={complexDef} />;

102
lib/components/src/blocks/PropsTable/PropRow.tsx Normal file
View File

@ -0,0 +1,102 @@
import React from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { PropDef } from './PropDef';
enum PropType {
SHAPE = 'shape',
UNION = 'union',
ARRAYOF = 'arrayOf',
OBJECTOF = 'objectOf',
ENUM = 'enum',
INSTANCEOF = 'instanceOf',
}
interface PrettyPropTypeProps {
type: any;
}
interface PrettyPropValProps {
value: any;
}
interface PropRowProps {
row: PropDef;
// FIXME: row options
}
const Name = styled.span({ fontWeight: 'bold' });
const Required = styled.span(({ theme }) => ({
color: theme.color.negative,
fontFamily: theme.typography.fonts.mono,
cursor: 'help',
}));
const StyledPropDef = styled.div(({ theme }) => ({
color:
theme.base === 'light'
? transparentize(0.4, theme.color.defaultText)
: transparentize(0.6, theme.color.defaultText),
fontFamily: theme.typography.fonts.mono,
fontSize: `${theme.typography.size.code}%`,
}));
const prettyPrint = (type: any): string => {
if (!type || !type.name) {
return '';
}
let fields = '';
switch (type.name) {
case PropType.SHAPE:
fields = Object.keys(type.value)
.map((key: string) => `${key}: ${prettyPrint(type.value[key])}`)
.join(', ');
return `{ ${fields} }`;
case PropType.UNION:
return Array.isArray(type.value)
? `Union<${type.value.map(prettyPrint).join(' | ')}>`
: JSON.stringify(type.value);
case PropType.ARRAYOF:
return `[ ${prettyPrint(type.value)} ]`;
case PropType.OBJECTOF:
return `objectOf(${prettyPrint(type.value)})`;
case PropType.ENUM:
if (type.computed) {
return JSON.stringify(type);
}
return Array.isArray(type.value)
? type.value.map((v: any) => v && v.value && v.value.toString()).join(' | ')
: JSON.stringify(type);
case PropType.INSTANCEOF:
return `instanceOf(${JSON.stringify(type.value)})`;
default:
return type.name;
}
};
export const PrettyPropType: React.FunctionComponent<PrettyPropTypeProps> = ({ type }) => (
<span>{prettyPrint(type)}</span>
);
export const PrettyPropVal: React.FunctionComponent<PrettyPropValProps> = ({ value }) => (
<span>{JSON.stringify(value)}</span>
);
export const PropRow: React.FunctionComponent<PropRowProps> = ({
row: { name, type, required, description, defaultValue },
}) => (
<tr>
<td>
<Name>{name}</Name>
{required ? <Required title="Required">*</Required> : null}
</td>
<td>
<div>{description}</div>
<StyledPropDef>
<PrettyPropType type={type} />
</StyledPropDef>
</td>
<td>{defaultValue === undefined ? '-' : <PrettyPropVal value={defaultValue} />}</td>
</tr>
);

18
lib/components/src/blocks/PropsTable/PropsTable.stories.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import { PropsTable, PropsTableError } from './PropsTable';
import { DocsPageWrapper } from '../DocsPage';
import * as rowStories from './PropRow.stories';
export default {
Component: PropsTable,
title: 'Docs|PropTable',
decorators: [storyFn => <DocsPageWrapper>{storyFn()}</DocsPageWrapper>],
};
export const error = () => <PropsTable error={PropsTableError.NO_COMPONENT} />;
export const empty = () => <PropsTable rows={[]} />;
const { row: stringRow } = rowStories.string().props;
const { row: numberRow } = rowStories.number().props;
export const normal = () => <PropsTable rows={[stringRow, numberRow]} />;

166
lib/components/src/blocks/PropsTable/PropsTable.tsx Normal file
View File

@ -0,0 +1,166 @@
import React from 'react';
import { styled } from '@storybook/theming';
import { opacify, transparentize } from 'polished';
import { PropRow } from './PropRow';
import { PropDef } from './PropDef';
import { EmptyBlock } from '../EmptyBlock';
export const Table = styled.table(({ theme }) => ({
'&&': {
// Resets for cascading/system styles
borderCollapse: 'collapse',
borderSpacing: 0,
tr: {
border: 'none',
background: 'none',
},
'td, th': {
padding: 0,
border: 'none',
},
// End Resets
fontSize: theme.typography.size.s2,
lineHeight: '20px',
textAlign: 'left',
width: '100%',
// Margin collapse
marginTop: '25px',
marginBottom: '40px',
'th:first-of-type, td:first-of-type': {
paddingLeft: 20,
},
'th:last-of-type, td:last-of-type': {
paddingRight: '20px',
width: '20%',
},
th: {
color:
theme.base === 'light'
? transparentize(0.4, theme.color.defaultText)
: transparentize(0.6, theme.color.defaultText),
paddingTop: 10,
paddingBottom: 10,
'&:not(:first-of-type)': {
paddingLeft: 15,
paddingRight: 15,
},
},
td: {
paddingTop: '16px',
paddingBottom: '16px',
'&:not(:first-of-type)': {
paddingLeft: 15,
paddingRight: 15,
},
'&:last-of-type': {
paddingRight: '20px',
},
},
// Table "block" styling
// Emphasize tbody's background and set borderRadius
// Calling out because styling tables is finicky
// Makes border alignment consistent w/other DocBlocks
marginLeft: 1,
marginRight: 1,
'tr:first-child td:first-child': {
borderTopLeftRadius: theme.appBorderRadius,
},
'tr:first-child td:last-child': {
borderTopRightRadius: theme.appBorderRadius,
},
'tr:last-child td:first-child': {
borderBottomLeftRadius: theme.appBorderRadius,
},
'tr:last-child td:last-child': {
borderBottomRightRadius: theme.appBorderRadius,
},
tbody: {
// slightly different than the other DocBlock shadows to account for table styling gymnastics
boxShadow:
theme.base === 'light'
? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
: `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
borderRadius: theme.appBorderRadius,
tr: {
background: 'transparent',
'&:not(:first-child)': {
borderTop: `1px solid ${theme.appBorderColor}`,
},
},
td: {
background: theme.background.content,
},
},
// End finicky table styling
},
}));
export enum PropsTableError {
NO_COMPONENT = 'No component found',
PROPS_UNSUPPORTED = 'Props unsupported. See Props documentation for your framework.',
}
export interface PropsTableRowsProps {
rows: PropDef[];
}
export interface PropsTableErrorProps {
error: PropsTableError;
}
export type PropsTableProps = PropsTableRowsProps | PropsTableErrorProps;
/**
* Display the props for a component as a props table. Each row is a collection of
* PropDefs, usually derived from docgen info for the component.
*/
const PropsTable: React.FunctionComponent<PropsTableProps> = props => {
const { error } = props as PropsTableErrorProps;
if (error) {
return <EmptyBlock>{error}</EmptyBlock>;
}
const { rows } = props as PropsTableRowsProps;
if (rows.length === 0) {
return <EmptyBlock>No props found for this component</EmptyBlock>;
}
return (
<Table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
{rows.map(row => (
<PropRow key={row.name} row={row} />
))}
</tbody>
</Table>
);
};
export { PropsTable, PropDef };

40
lib/components/src/blocks/Source.stories.tsx Normal file
View File

@ -0,0 +1,40 @@
import React from 'react';
import { Source, SourceError } from './Source';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|Source',
Component: Source,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const noStory = () => <Source error={SourceError.NO_STORY} />;
noStory.title = 'no story';
export const sourceUnavailable = () => <Source error={SourceError.SOURCE_UNAVAILABLE} />;
sourceUnavailable.title = 'source unavailable';
const jsxCode = `
<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>
<SomeOtherComponent funcProp={(a) => a.id} />
</MyComponent>
`.trim();
const jsxProps = {};
export const jsx = () => <Source code={jsxCode} language="jsx" />;
const cssCode = `
@-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.waitingForConnection {
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}
`.trim();
export const css = () => <Source code={cssCode} language="css" />;

67
lib/components/src/blocks/Source.tsx Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
import { EmptyBlock } from './EmptyBlock';
import { SyntaxHighlighter } from '../syntaxhighlighter/syntaxhighlighter';
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
// DocBlocks-specific styling and overrides
margin: '25px 0 40px',
boxShadow:
theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
'pre.hljs': {
padding: 20,
background: 'inherit',
},
}));
export enum SourceError {
NO_STORY = 'There\u2019s no story here.',
SOURCE_UNAVAILABLE = 'Oh no! The source is not available.',
}
interface SourceErrorProps {
error?: SourceError;
}
interface SourceCodeProps {
language?: string;
code?: string;
dark?: boolean;
}
// FIXME: Using | causes a typescript error, so stubbing it with & for now
// and making `error` optional
export type SourceProps = SourceErrorProps & SourceCodeProps;
/**
* Syntax-highlighted source code for a component (or anything!)
*/
const Source: React.FunctionComponent<SourceProps> = props => {
const { error } = props as SourceErrorProps;
if (error) {
return <EmptyBlock {...props}>{error}</EmptyBlock>;
}
const { language, code, dark, ...rest } = props as SourceCodeProps;
const syntaxHighlighter = (
<StyledSyntaxHighlighter
bordered
copyable
language={language}
className="docblock-source"
{...rest}
>
{code}
</StyledSyntaxHighlighter>
);
if (typeof dark === 'undefined') {
return syntaxHighlighter;
}
const overrideTheme = dark ? themes.dark : themes.light;
return <ThemeProvider theme={convert(overrideTheme)}>{syntaxHighlighter}</ThemeProvider>;
};
export { Source };

16
lib/components/src/blocks/Story.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { Story, StoryError } from './Story';
import { DocsPageWrapper } from './DocsPage';
import { Button } from '../Button/Button';
export default {
title: 'Docs|Story',
Component: Story,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const error = () => <Story error={StoryError.NO_STORY} />;
const buttonFn = () => <Button secondary>Hello Button</Button>;
export const inline = () => <Story inline storyFn={buttonFn} title="hello button" />;

80
lib/components/src/blocks/Story.tsx Normal file
View File

@ -0,0 +1,80 @@
import React from 'react';
import { IFrame } from './IFrame';
import { EmptyBlock } from './EmptyBlock';
const BASE_URL = 'iframe.html';
export enum StoryError {
NO_STORY = 'No component or story to display',
}
interface CommonProps {
title: string;
height?: string;
}
type InlineStoryProps = {
storyFn: () => React.ElementType;
} & CommonProps;
type IFrameStoryProps = {
id: string;
} & CommonProps;
type ErrorProps = {
error?: StoryError;
} & CommonProps;
// How do you XOR properties in typescript?
export type StoryProps = (InlineStoryProps | IFrameStoryProps | ErrorProps) & {
inline: boolean;
};
const InlineStory: React.FunctionComponent<InlineStoryProps> = ({ storyFn, height }) => (
<div style={{ height }}>{storyFn()}</div>
);
const IFrameStory: React.FunctionComponent<IFrameStoryProps> = ({
id,
title,
height = '500px',
}) => (
<div style={{ width: '100%', height }}>
<IFrame
key="iframe"
id={`storybook-Story-${id}`}
title={title}
src={`${BASE_URL}?id=${id}&viewMode=story`}
allowFullScreen
scale={1}
style={{
width: '100%',
height: '100%',
border: '0 none',
}}
/>
</div>
);
/**
* A story element, either renderend inline or in an iframe,
* with configurable height.
*/
const Story: React.FunctionComponent<StoryProps> = props => {
const { error } = props as ErrorProps;
const { storyFn } = props as InlineStoryProps;
const { id } = props as IFrameStoryProps;
const { inline, title, height } = props;
if (error) {
return <EmptyBlock>{error}</EmptyBlock>;
}
return inline ? (
<InlineStory storyFn={storyFn} title={title} height={height} />
) : (
<IFrameStory id={id} title={title} height={height} />
);
};
export { Story };

19
lib/components/src/blocks/Typeset.stories.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { Typeset } from './Typeset';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|Typeset',
Component: Typeset,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
const fontSizes = [12, 14, 16, 20, 24, 32, 40, 48];
const fontWeight = 900;
export const withFontSizes = () => <Typeset fontSizes={fontSizes} />;
export const withFontWeight = () => <Typeset fontSizes={fontSizes} fontWeight={fontWeight} />;
export const withWeightText = () => (
<Typeset fontSizes={fontSizes} fontWeight={fontWeight} sampleText="Heading" />
);

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