Moar storybook (codesandbox#2275)

SaraVieira · web-flow · commit 38398c418a9b · 2019-08-11T16:20:35.000+02:00
* add build script

* yaaaaas

* fix ts

* ts
diff --git a/packages/app/src/sandbox/eval/npm/fetch-npm-module.ts b/packages/app/src/sandbox/eval/npm/fetch-npm-module.ts
@@ -274,6 +274,11 @@ type DependencyVersionResult =
   | {
       version: string;
       packageJSONPath: null;
+    }
+  | {
+      version: string;
+      name: string | null;
+      packageJSONPath: null;
     };
 
 async function findDependencyVersion(
diff --git a/packages/common/.storybook/config.js b/packages/common/.storybook/config.js
@@ -5,6 +5,8 @@ import { themes } from '@storybook/theming';
 
 import global from '../src/global.css';
 import { createGlobalStyle } from 'styled-components';
+import { ThemeDecorator } from '../src/stories/decorators';
+import { withKnobs } from '@storybook/addon-knobs';
 
 const GlobalStyle = createGlobalStyle`
   ${global}
@@ -33,3 +35,5 @@ function loadStories() {
 
 configure(loadStories, module);
 addDecorator(withGlobal);
+addDecorator(ThemeDecorator);
+addDecorator(withKnobs);
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -15,6 +15,7 @@
     "clean": "rimraf lib && yarn rimraf node_modules/@types/react-native",
     "start": "(yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib --watch)",
     "start:storybook": "start-storybook",
+    "build-storybook": "build-storybook -c .storybook -o public",
     "build": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
     "build:dev": "yarn build",
     "prepublish": "yarn build"
diff --git a/packages/common/src/components/AutosizeInput/index.stories.tsx b/packages/common/src/components/AutosizeInput/index.stories.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import AutosizeInput from './';
-import { ThemeDecorator } from '../../stories/decorators';
 
-const stories = storiesOf('components/Input', module).addDecorator(
-  ThemeDecorator
-);
+const stories = storiesOf('components/Input', module);
 
 stories.add('Basic AutosizeInput', () => <AutosizeInput />);
diff --git a/packages/common/src/components/AutosizeTextArea/index.stories.tsx b/packages/common/src/components/AutosizeTextArea/index.stories.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import AutosizeTextArea from './';
-import { ThemeDecorator } from '../../stories/decorators';
-
-const stories = storiesOf('components/Input', module).addDecorator(
-  ThemeDecorator
-);
 
+const stories = storiesOf('components/Input', module);
 stories.add('Basic AutosizeTextArea', () => <AutosizeTextArea />);
diff --git a/packages/common/src/components/Button/index.stories.tsx b/packages/common/src/components/Button/index.stories.tsx
@@ -1,10 +1,40 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
 import { Button } from './';
 
-const stories = storiesOf('components/Button', module);
-
-stories.add('Basic button with text', () => (
-  <Button onClick={action('onClick')}>Text</Button>
-));
+storiesOf('components/Button', module)
+  .add('Basic button with text', () => (
+    <Button onClick={action('onClick')}>{text('Value', 'Text')}</Button>
+  ))
+  .add('Button small', () => (
+    <Button small={boolean('small', true)} onClick={action('onClick')}>
+      {text('Value', 'Text')}
+    </Button>
+  ))
+  .add('Button block', () => (
+    <Button block={boolean('block', true)} onClick={action('onClick')}>
+      {text('Value', 'Text')}
+    </Button>
+  ))
+  .add('Button disabled', () => (
+    <Button disabled={boolean('disabled', true)} onClick={action('onClick')}>
+      {text('Value', 'Text')}
+    </Button>
+  ))
+  .add('Button red', () => (
+    <Button red={boolean('red', true)} onClick={action('onClick')}>
+      {text('Value', 'Text')}
+    </Button>
+  ))
+  .add('Button secondary', () => (
+    <Button secondary={boolean('secondary', true)} onClick={action('onClick')}>
+      {text('Value', 'Text')}
+    </Button>
+  ))
+  .add('Button danger', () => (
+    <Button danger={boolean('danger', true)} onClick={action('onClick')}>
+      {text('Value', 'Text')}
+    </Button>
+  ));
diff --git a/packages/common/src/components/Checkbox/index.stories.tsx b/packages/common/src/components/Checkbox/index.stories.tsx
@@ -2,11 +2,8 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Checkbox } from './';
-import { ThemeDecorator } from '../../stories/decorators';
 
-const stories = storiesOf('components/Input', module).addDecorator(
-  ThemeDecorator
-);
+const stories = storiesOf('components/Input', module);
 
 stories
   .add('Basic Checkbox', () => (
diff --git a/packages/common/src/components/CommunityBadges/index.stories.tsx b/packages/common/src/components/CommunityBadges/index.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import CommunityBadge from './';
-import { ThemeDecorator } from '../../stories/decorators';
 
 const templates = [
   'create-react-app',
@@ -43,13 +42,13 @@ const FrameworkBadge = ({ template, sandboxNumber = 100 }) => (
 );
 
 templates.map(t =>
-  storiesOf('components/Community Badge/Gold', module)
-    .addDecorator(ThemeDecorator)
-    .add(t, () => <FrameworkBadge template={t} />)
+  storiesOf('components/Community Badge/Gold', module).add(t, () => (
+    <FrameworkBadge template={t} />
+  ))
 );
 
 templates.map(t =>
-  storiesOf('components/Community Badge/Silver', module)
-    .addDecorator(ThemeDecorator)
-    .add(t, () => <FrameworkBadge sandboxNumber={51} template={t} />)
+  storiesOf('components/Community Badge/Silver', module).add(t, () => (
+    <FrameworkBadge sandboxNumber={51} template={t} />
+  ))
 );
diff --git a/packages/common/src/components/ContributorsBadge/index.stories.tsx b/packages/common/src/components/ContributorsBadge/index.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
+import { text } from '@storybook/addon-knobs';
 import ContributorsBadge from './';
-import { ThemeDecorator } from '../../stories/decorators';
 
-const stories = storiesOf('components/ContributorsBadge', module).addDecorator(
-  ThemeDecorator
-);
-stories.add('Default', () => <ContributorsBadge username={'SaraVieira'} />);
+const stories = storiesOf('components/ContributorsBadge', module);
+stories.add('Default', () => (
+  <ContributorsBadge username={text('name', 'SaraVieira')} />
+));
diff --git a/packages/common/src/components/GithubBadge/index.stories.tsx b/packages/common/src/components/GithubBadge/index.stories.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import GithubBadge from './';
-import { ThemeDecorator } from '../../stories/decorators';
 
-const stories = storiesOf('components/GithubBadge', module).addDecorator(
-  ThemeDecorator
-);
+const stories = storiesOf('components/GithubBadge', module);
 
 stories
   .add('Master', () => (
diff --git a/packages/common/src/components/Input/index.stories.tsx b/packages/common/src/components/Input/index.stories.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import Input from './';
-import { ThemeDecorator } from '../../stories/decorators';
 
-const stories = storiesOf('components/Input', module).addDecorator(
-  ThemeDecorator
-);
+const stories = storiesOf('components/Input', module);
 
 stories
   .add('Basic Input', () => <Input />)
diff --git a/packages/common/src/components/SandboxCard/index.stories.tsx b/packages/common/src/components/SandboxCard/index.stories.tsx
@@ -1,17 +1,9 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import {
-  withKnobs,
-  text,
-  select,
-  number,
-  array,
-  boolean,
-} from '@storybook/addon-knobs';
+import { text, select, number, array, boolean } from '@storybook/addon-knobs';
 import SandboxCard, { Props, Sandbox } from './';
 import * as fixtures from './fixtures';
-import { ThemeDecorator } from '../../stories/decorators';
 
 const authorWithKnobs = (
   group: string,
@@ -24,9 +16,8 @@ const authorWithKnobs = (
 
   if (knobs.username !== null || knobs.avatar_url !== null) {
     return knobs;
-  } else {
-    return author;
   }
+  return author;
 };
 
 const sandboxWithKnobs = (group: string, sandbox: Sandbox): Sandbox => ({
@@ -66,8 +57,6 @@ const createSandboxStory = ({
 );
 
 storiesOf('components/SandboxCard', module)
-  .addDecorator(ThemeDecorator)
-  .addDecorator(withKnobs)
   .add('basic', createSandboxStory({}))
   .add('small', createSandboxStory({ small: true }))
   .add('no height', createSandboxStory({ noHeight: true }))
diff --git a/packages/common/src/components/Select/index.stories.tsx b/packages/common/src/components/Select/index.stories.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import Select from '.';
+
+storiesOf('components/Select', module)
+  .add('Select', () => (
+    <Select>
+      <option>one</option>
+      <option>two</option>
+      <option>three</option>
+      <option>four</option>
+      <option>five</option>
+      <option>six</option>
+    </Select>
+  ))
+  .add('Select error', () => (
+    <Select error>
+      <option>one</option>
+      <option>two</option>
+      <option>three</option>
+      <option>four</option>
+      <option>five</option>
+      <option>six</option>
+    </Select>
+  ));
diff --git a/packages/common/src/components/Stats/index.stories.tsx b/packages/common/src/components/Stats/index.stories.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { number } from '@storybook/addon-knobs';
+import StatsComponent from '.';
+
+const defaults = () => ({
+  viewCount: number('viewCount', 1223),
+  likeCount: number('likeCount', 1223),
+  forkCount: number('forkCount', 122123123),
+});
+
+storiesOf('components/Stats', module)
+  .add('Stats', () => <StatsComponent {...defaults()} />)
+  .add('Stats with text', () => <StatsComponent {...defaults()} text />)
+  .add('Vertical Stats', () => <StatsComponent {...defaults()} vertical />)
+  .add('Vertical Stats with text', () => (
+    <StatsComponent {...defaults()} vertical text />
+  ));
diff --git a/packages/common/src/components/Stats/index.tsx b/packages/common/src/components/Stats/index.tsx
@@ -7,14 +7,24 @@ import Stat from './Stat';
 
 import { Stats } from './elements';
 
+type StatsComponentProps = {
+  viewCount: number;
+  likeCount: number;
+  forkCount: number;
+  vertical?: boolean;
+  text?: boolean;
+  style?: React.CSSProperties;
+};
+
 function StatsComponent({
   viewCount,
   likeCount,
   forkCount,
-  vertical,
-  text,
+  vertical = false,
+  text = false,
+  style,
   ...props
-}) {
+}: StatsComponentProps) {
   return (
     <Stats vertical={vertical} {...props}>
       <Stat
diff --git a/packages/common/src/components/Switch/index.stories.tsx b/packages/common/src/components/Switch/index.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import Switch from '.';
+
+storiesOf('components/Switch', module)
+  .add('Switch', () => <Switch onClick={action('Clikkkk')} right={false} />)
+  .add('Switch Right', () => (
+    <Switch onClick={action('Clikkkk')} right={boolean('right', true)} />
+  ))
+  .add('Switch secondary', () => (
+    <Switch
+      right={false}
+      onClick={action('Clikkkk')}
+      secondary={boolean('secondary', true)}
+    />
+  ))
+  .add('Switch offMode', () => (
+    <Switch
+      right={false}
+      onClick={action('Clikkkk')}
+      offMode={boolean('offMode', true)}
+    />
+  ))
+  .add('Switch small', () => (
+    <Switch
+      right={false}
+      onClick={action('Clikkkk')}
+      small={boolean('small', true)}
+    />
+  ));
diff --git a/packages/common/src/components/Tags/index.stories.tsx b/packages/common/src/components/Tags/index.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { select, array } from '@storybook/addon-knobs';
+import Tags from '.';
+
+storiesOf('components/Tags', module)
+  .add('One tag', () => <Tags tags={array('tags', ['one'])} />)
+  .add('Many tags', () => (
+    <Tags tags={array('tags', ['one', 'two', 'three', 'four', 'five'])} />
+  ))
+  .add('Many tags', () => (
+    <Tags
+      tags={array('tags', ['one', 'two', 'three', 'four', 'five'])}
+      align={select('align', ['right', 'left'], 'right')}
+    />
+  ));
diff --git a/packages/common/src/components/UserWithAvatar/index.stories.tsx b/packages/common/src/components/UserWithAvatar/index.stories.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, boolean } from '@storybook/addon-knobs';
+import { UserWithAvatar } from '.';
+
+const defaults = () => ({
+  username: text('Username', 'SaraVieira'),
+  avatarUrl: text(
+    'avatar url',
+    'https://avatars0.githubusercontent.com/u/1051509?s=460&v=4'
+  ),
+});
+
+storiesOf('components/UserAvatar', module)
+  .add('User', () => <UserWithAvatar {...defaults()} />)
+  .add('With Name', () => (
+    <UserWithAvatar {...defaults()} name={text('name', 'Sara Vieira')} />
+  ))
+  .add('With Subscription', () => (
+    <UserWithAvatar
+      {...defaults()}
+      subscriptionSince={text('subscriptionSince', new Date().toString())}
+    />
+  ))
+  .add('With hideBadge', () => (
+    <UserWithAvatar {...defaults()} hideBadge={boolean('hideBadge', true)} />
+  ))
+  .add('With useBigName', () => (
+    <UserWithAvatar {...defaults()} useBigName={boolean('useBigName', true)} />
+  ));
diff --git a/packages/common/src/components/flex/index.stories.tsx b/packages/common/src/components/flex/index.stories.tsx
