@storybook/components 5.2.1 → 5.2.5

package/src/blocks/IconGallery.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { ResetWrapper } from '../typography/DocumentFormatting';
-
-import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
-
-const ItemLabel = styled.div<{}>(({ theme }) => ({
-  fontFamily: theme.typography.fonts.base,
-  fontSize: theme.typography.size.s2,
-  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 (
-    <ResetWrapper>
-      <List {...props} className="docblock-icongallery">
-        {children}
-      </List>
-    </ResetWrapper>
-  );
-};

package/src/blocks/Preview.stories.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-
-import { Preview } from './Preview';
-
-import { Story } from './Story';
-import { Button } from '../Button/Button';
-import * as sourceStories from './Source.stories';
-
-export default {
-  title: 'Docs|Preview',
-  component: Preview,
-};
-
-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>
-);
-
-const buttonFn = () => <Button secondary>Hello Button</Button>;
-
-export const withToolbar = () => (
-  <Preview withToolbar>
-    <Story inline storyFn={buttonFn} title="with toolbar" />
-  </Preview>
-);
-
-export const withToolbarMulti = () => (
-  <Preview withToolbar>
-    <Story inline storyFn={buttonFn} title="story1" />
-    <Story inline storyFn={buttonFn} title="story2" />
-  </Preview>
-);

package/src/blocks/Preview.tsx

@@ -1,162 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { darken } from 'polished';
-import { logger } from '@storybook/client-logger';
-
-import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
-import { Source, SourceProps } from './Source';
-import { ActionBar, ActionItem } from '../ActionBar/ActionBar';
-import { Toolbar } from './Toolbar';
-import { ZoomContext } from './ZoomContext';
-
-export interface PreviewProps {
-  isColumn?: boolean;
-  columns?: number;
-  withSource?: SourceProps;
-  isExpanded?: boolean;
-  withToolbar?: 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,
-  borderBottomLeftRadius: theme.appBorderRadius,
-  borderBottomRightRadius: theme.appBorderRadius,
-  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, isExpanded }) => ({
-    ...getBlockBackgroundStyle(theme),
-    padding: '30px 20px',
-    position: 'relative',
-    overflow: 'hidden',
-    borderBottomLeftRadius: withSource && isExpanded && 0,
-    borderBottomRightRadius: withSource && isExpanded && 0,
-    borderBottomWidth: isExpanded && 0,
-  }),
-  ({ withToolbar }) => withToolbar && { paddingTop: 64 }
-);
-
-const PreviewContainer = styled.div({
-  margin: '25px 0 40px',
-});
-
-interface SourceItem {
-  source?: React.ReactElement;
-  actionItem: ActionItem;
-}
-
-const getSource = (
-  withSource: SourceProps,
-  expanded: boolean,
-  setExpanded: Function
-): SourceItem => {
-  switch (true) {
-    case !!(withSource && withSource.error): {
-      return {
-        source: null,
-        actionItem: {
-          title: 'No code available',
-          disabled: true,
-          onClick: () => setExpanded(false),
-        },
-      };
-    }
-    case expanded: {
-      return {
-        source: <StyledSource {...withSource} dark />,
-        actionItem: { title: 'Hide code', onClick: () => setExpanded(false) },
-      };
-    }
-    default: {
-      return {
-        source: null,
-        actionItem: { title: 'Show code', onClick: () => setExpanded(true) },
-      };
-    }
-  }
-};
-function getStoryId(children: React.ReactNode) {
-  if (React.Children.count(children) === 1) {
-    const elt = children as React.ReactElement;
-    if (elt.props) {
-      return elt.props.id;
-    }
-  }
-  return null;
-}
-
-/**
- * A preview component for showing one or more component `Story`
- * items. The preview also shows the source for the component
- * as a drop-down.
- */
-const Preview: React.FunctionComponent<PreviewProps> = ({
-  isColumn,
-  columns,
-  children,
-  withSource,
-  withToolbar = false,
-  isExpanded = false,
-  ...props
-}) => {
-  const [expanded, setExpanded] = React.useState(isExpanded);
-  const { source, actionItem } = getSource(withSource, expanded, setExpanded);
-  const [scale, setScale] = React.useState(1);
-
-  if (withToolbar && Array.isArray(children)) {
-    logger.warn('Cannot use toolbar with multiple preview children, disabling');
-  }
-  const showToolbar = withToolbar && !Array.isArray(children);
-  return (
-    <PreviewContainer {...props}>
-      <PreviewWrapper {...{ withSource, withToolbar: showToolbar }}>
-        {showToolbar && (
-          <Toolbar
-            border
-            zoom={z => setScale(scale * z)}
-            resetZoom={() => setScale(1)}
-            storyId={getStoryId(children)}
-            baseUrl="./iframe.html"
-          />
-        )}
-        <ZoomContext.Provider value={{ scale }}>
-          <ChildrenContainer isColumn={isColumn} columns={columns}>
-            {Array.isArray(children) ? (
-              children.map((child, i) => <div key={i.toString()}>{child}</div>)
-            ) : (
-              <div>{children}</div>
-            )}
-          </ChildrenContainer>
-        </ZoomContext.Provider>
-        {withSource && <ActionBar actionItems={[actionItem]} />}
-      </PreviewWrapper>
-      {withSource && source}
-    </PreviewContainer>
-  );
-};
-
-export { Preview };

package/src/blocks/PropsTable/PropDef.ts

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

package/src/blocks/PropsTable/PropRow.stories.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import { PropRow } from './PropRow';
-import { Table } from './PropsTable';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
-
-export default {
-  component: PropRow,
-  title: 'Docs|PropRow',
-  excludeStories: /.*Def$/,
-  decorators: [
-    getStory => (
-      <ResetWrapper>
-        <Table>
-          <tbody>{getStory()}</tbody>
-        </Table>
-      </ResetWrapper>
-    ),
-  ],
-};
-
-export const stringDef = {
-  name: 'someString',
-  type: { name: 'string' },
-  required: true,
-  description: 'someString description',
-  defaultValue: 'fixme',
-};
-
-export const longNameDef = {
-  ...stringDef,
-  name: 'reallyLongStringThatTakesUpSpace',
-};
-
-export const longDescDef = {
-  ...stringDef,
-  description: 'really long description that takes up a lot of space. sometimes this happens.',
-};
-
-export const numberDef = {
-  name: 'someNumber',
-  type: { name: 'number' },
-  required: false,
-  description: 'someNumber description',
-  defaultValue: 0,
-};
-
-export const objectDef = {
-  name: 'someObject',
-  type: { name: 'objectOf', value: { name: 'number' } },
-  required: false,
-  description: 'A simple `objectOf` propType.',
-  defaultValue: { value: '{ key: 1 }', computed: false },
-};
-
-export 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 },
-};
-
-export 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} />;

package/src/blocks/PropsTable/PropRow.tsx

@@ -1,102 +0,0 @@
-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>
-);

package/src/blocks/PropsTable/PropsTable.stories.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { PropsTable, PropsTableError } from './PropsTable';
-import { stringDef, numberDef } from './PropRow.stories';
-
-export default {
-  component: PropsTable,
-  title: 'Docs|PropTable',
-};
-
-export const normal = () => <PropsTable rows={[stringDef, numberDef]} />;
-
-export const error = () => <PropsTable error={PropsTableError.NO_COMPONENT} />;
-
-export const empty = () => <PropsTable rows={[]} />;