@stoplight/ui-kit 3.0.2 → 3.0.3

package/src/__fixtures__/table-of-contents/studio.ts

@@ -1,161 +0,0 @@
-import { ITableOfContentsLink } from '../../TableOfContents';
-
-export const studioContents: ITableOfContentsLink[] = [
-  {
-    name: 'Introduction',
-    depth: 0,
-    type: 'item',
-    to: '/docs/introduction.md',
-  },
-  {
-    name: 'UI Overview',
-    depth: 0,
-    type: 'item',
-    to: '/docs/ui-overview.md',
-  },
-  {
-    name: 'Markdown',
-    depth: 0,
-    type: 'divider',
-  },
-  {
-    name: 'Markdown Basics',
-    depth: 0,
-    type: 'item',
-    to: '/docs/markdown/basic-syntax.md',
-  },
-  {
-    name: 'Stoplight Flavored Markdown (SMD)',
-    depth: 0,
-    type: 'item',
-    to: '/docs/markdown/stoplight-flavored-markdown.md',
-  },
-  {
-    name: 'Swagger Petstore',
-    depth: 0,
-    type: 'divider',
-  },
-  {
-    name: 'Overview',
-    depth: 0,
-    type: 'item',
-    to: '/reference/petstore/openapi.v1.yaml',
-  },
-  {
-    name: 'Pets',
-    depth: 0,
-    type: 'group',
-  },
-  {
-    name: 'Pets',
-    depth: 1,
-    type: 'item',
-    to: '/reference/petstore/openapi.v1.yaml/components/schemas/Pets',
-  },
-  {
-    name: 'Info for a specific pet [active item]',
-    depth: 1,
-    type: 'item',
-    to: '/reference/petstore/openapi.v1.yaml/paths/~1pets~1{petId}/get',
-    isActive: true,
-  },
-  {
-    name: 'List all pets',
-    depth: 1,
-    type: 'item',
-    to: '/reference/petstore/openapi.v1.yaml/paths/~1pets/get',
-  },
-  {
-    name: 'Create a pet',
-    depth: 1,
-    type: 'item',
-    to: '/reference/petstore/openapi.v1.yaml/paths/~1pets/post',
-  },
-  {
-    name: 'To-dos',
-    depth: 0,
-    type: 'divider',
-  },
-  {
-    name: 'Overview',
-    depth: 0,
-    type: 'item',
-    to: '/reference/todos/openapi.v1.json',
-  },
-  {
-    name: 'Todos',
-    depth: 0,
-    type: 'group',
-  },
-  {
-    name: 'Delete Todo',
-    depth: 1,
-    type: 'item',
-    to: '/reference/todos/openapi.v1.json/paths/~1todos~1{todoId}/delete',
-  },
-  {
-    name: 'Get Todo',
-    depth: 1,
-    type: 'item',
-    to: '/reference/todos/openapi.v1.json/paths/~1todos~1{todoId}/get',
-  },
-  {
-    name: 'Update Todo',
-    depth: 1,
-    type: 'item',
-    to: '/reference/todos/openapi.v1.json/paths/~1todos~1{todoId}/put',
-  },
-  {
-    name: 'List Todos',
-    depth: 1,
-    type: 'item',
-    to: '/reference/todos/openapi.v1.json/paths/~1todos/get',
-  },
-  {
-    name: 'Create Todo',
-    depth: 1,
-    type: 'item',
-    to: '/reference/todos/openapi.v1.json/paths/~1todos/post',
-  },
-  {
-    name: 'Models',
-    depth: 0,
-    type: 'divider',
-  },
-  {
-    name: 'Category',
-    to: '/reference/petstore/models/category.v1.yaml',
-    depth: 0,
-    type: 'item',
-  },
-  {
-    name: 'Error',
-    to: '/reference/common/models/error.v1.yaml',
-    depth: 0,
-    type: 'item',
-  },
-  {
-    name: 'Pet',
-    to: '/reference/petstore/models/pet.v1.yaml',
-    depth: 0,
-    type: 'item',
-  },
-  {
-    name: 'Todo Full',
-    to: '/reference/todos/models/todo-full.v1.json',
-    depth: 0,
-    type: 'item',
-  },
-  {
-    name: 'Todo Partial',
-    to: '/reference/todos/models/todo-partial.v1.json',
-    depth: 0,
-    type: 'item',
-  },
-  {
-    name: 'User',
-    to: '/reference/todos/models/user.v1.json',
-    depth: 0,
-    type: 'item',
-  },
-];

package/src/__fixtures__/table-of-contents/tree.ts

@@ -1,56 +0,0 @@
-import { ITableOfContentsLink } from '../../TableOfContents';
-
-export const tree: ITableOfContentsLink[] = [
-  {
-    name: 'Tree',
-    depth: 0,
-    type: 'divider',
-  },
-  {
-    name: 'Group with link',
-    depth: 0,
-    type: 'group',
-    to: '/path',
-    icon: 'cloud',
-    startExpanded: true,
-  },
-  {
-    name: 'Nested Item with text icon',
-    depth: 1,
-    type: 'item',
-    textIcon: 'ONE',
-    iconColor: 'red',
-    iconPosition: 'right',
-  },
-  {
-    name: 'Nested Group',
-    depth: 1,
-    type: 'group',
-  },
-  {
-    name: 'Nested Group',
-    depth: 2,
-    type: 'group',
-  },
-  {
-    name: 'Nested Item',
-    depth: 3,
-    type: 'item',
-    textIcon: 'TWO',
-    iconColor: 'blue',
-    iconPosition: 'right',
-  },
-  {
-    name: 'Nested Group',
-    depth: 1,
-    type: 'group',
-  },
-  {
-    name: 'Nested Item',
-    depth: 2,
-    type: 'item',
-    textIcon: 'THREE',
-    iconColor: 'green',
-    iconPosition: 'left',
-  },
-];

package/src/__stories__/AutoSizer/index.tsx

@@ -1,19 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import { AutoSizer } from '../../';
-
-storiesOf('AutoSizer', module)
-  .addDecorator(withKnobs)
-  .add('with defaults', () => (
-    <div style={{ height: '100vh' }}>
-      <AutoSizer>
-        {({ height, width }) => (
-          <div style={{ height, width, background: 'red' }}>
-            height: {height}px width: {width}px
-          </div>
-        )}
-      </AutoSizer>
-    </div>
-  ));

package/src/__stories__/Checkbox/index.tsx

@@ -1,13 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import { Checkbox } from '../../';
-
-storiesOf('Checkbox', module)
-  .addDecorator(withKnobs)
-  .add('with defaults', () => (
-    <div className="p-40">
-      <Checkbox />
-    </div>
-  ));

package/src/__stories__/Code/CodeEditor.tsx

@@ -1,49 +0,0 @@
-import { StateDecorator, Store } from '@sambego/storybook-state';
-import { action } from '@storybook/addon-actions';
-import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import { CodeEditor, ICodeEditorProps } from '../../CodeEditor';
-
-const store = new Store({
-  value: 'stoplight.uiKit();',
-});
-
-export const codeEditorKnobs = (tabName = 'Code Editor'): ICodeEditorProps => ({
-  language: text('language', 'javascript', tabName),
-  value: text('value', 'const defaultValue = stoplight.io();', tabName),
-  onChange: action('onChange'),
-  placeholder: text('placeholder', 'placeholder...', tabName),
-  showLineNumbers: boolean('showLineNumbers', false, tabName),
-  padding: number('padding', 0, {}, tabName),
-});
-
-storiesOf('Code:Editor', module)
-  .addDecorator(withKnobs)
-  .add('with defaults', () => (
-    <>
-      <CodeEditor {...codeEditorKnobs()} onChange={action('onChange')} />
-    </>
-  ))
-  .add('dark', () => (
-    <div className="bp3-dark">
-      <CodeEditor {...codeEditorKnobs()} onChange={action('onChange')} />
-    </div>
-  ));
-
-storiesOf('Code:Editor', module)
-  .addDecorator(withKnobs)
-  // @ts-ignore
-  .addDecorator(StateDecorator(store))
-  .add('with store', () => (
-    <CodeEditor {...codeEditorKnobs()} value={store.get('value')} onChange={(value: string) => store.set({ value })} />
-  ))
-  .add('with store autofocus', () => (
-    <CodeEditor
-      {...codeEditorKnobs()}
-      value={store.get('value')}
-      onChange={(value: string) => store.set({ value })}
-      autoFocus
-    />
-  ));

package/src/__stories__/Code/CodeViewer.tsx

@@ -1,52 +0,0 @@
-import { boolean, text, withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import * as ember from '../../__fixtures__/CodeViewer/ember.json';
-import { CodeViewer, ICodeViewerProps } from '../../CodeViewer';
-
-export const codeViewerKnobs = (tabName = 'Code Viewer'): ICodeViewerProps => ({
-  language: text('language', 'jsx', tabName),
-
-  value: text(
-    'value',
-    `function Clock(props) {
-  const [date, setDate] = useState(new Date());
-
-  useEffect(() => {
-    var timerID = setInterval(() => tick(), 1000);
-    function defaultValue = stoplight.io();
-    return function cleanup() {
-      clearInterval(timerID);
-    };
-  });
-
-  function tick() {
-    setDate(new Date());
-  }
-  
-  return (
-    <div>
-      <h2>It is {date.toLocaleTimeString()}.</h2>
-    </div>
-  );
-}`,
-    tabName,
-  ),
-
-  inline: boolean('inline', false, tabName),
-  showLineNumbers: boolean('showLineNumbers', false, tabName),
-});
-
-storiesOf('Code:Viewer', module)
-  .addDecorator(withKnobs({ escapeHTML: false }))
-  .add('with defaults', () => <CodeViewer {...codeViewerKnobs()} />)
-  .add('dark', () => (
-    <div className="bp3-dark">
-      <CodeViewer {...codeViewerKnobs()} />
-    </div>
-  ))
-  .add('inline', () => <CodeViewer {...codeViewerKnobs()} inline />)
-  .add('lots of text', () => (
-    <CodeViewer language="json" value={JSON.stringify(ember, null, 2)} showLineNumbers={true} />
-  ));

package/src/__stories__/Code/index.ts

@@ -1,2 +0,0 @@
-import './CodeEditor';
-import './CodeViewer';

package/src/__stories__/Docs/Classes.tsx

@@ -1,168 +0,0 @@
-import { map, range } from 'lodash';
-import * as React from 'react';
-
-import { HTMLTable } from '../../';
-
-const ColorRows = ({ color }: { color: string }) => (
-  <tr>
-    <td>{color}</td>
-    <td>
-      <div className={`w-5 h-5 bg-${color} m-auto rounded-full shadow`} />
-    </td>
-    {map(range(1, 10), num => (
-      <td>
-        <div className={`w-5 h-5 bg-${color}-${num} m-auto rounded-full shadow`} />
-      </td>
-    ))}
-  </tr>
-);
-
-const Code = (props: any) => <pre className="inline text-sm bg-warning-2 px-1">{props.children}</pre>;
-
-export default () => (
-  <div className="m-20">
-    <div>
-      Here are some important classnames and their displays! For the rest look through the Tailwind doucmentation at{' '}
-      <a href="https://next.tailwindcss.com/">https://next.tailwindcss.com/</a>.
-    </div>
-    <div className="mt-5 mb-10">
-      <div>
-        This the stoplight color pallete that comes with ui-kit. Colors can be used with <Code>text-color</Code>,{' '}
-        <Code>bg-color</Code>, or
-        <Code>border-color</Code>. To use a shade of a color incluide the shade <Code>text-color-1</Code>
-      </div>
-
-      <HTMLTable condensed={true}>
-        <thead>
-          <tr>
-            <th>Colors</th>
-            <th>Default</th>
-            {map(range(1, 10), num => (
-              <th>{num}</th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          <ColorRows color="gray" />
-          <ColorRows color="lighten" />
-          <ColorRows color="darken" />
-
-          <ColorRows color="info" />
-          <ColorRows color="success" />
-          <ColorRows color="warning" />
-          <ColorRows color="danger" />
-          <ColorRows color="primary" />
-          <ColorRows color="secondary" />
-          <tr>
-            <td>white</td>
-            <td>
-              <div className="w-5 h-5 bg-white m-auto rounded-full shadow" />
-            </td>
-          </tr>
-          <tr>
-            <td>black</td>
-            <td>
-              <div className="w-5 h-5 bg-black m-auto rounded-full shadow" />
-            </td>
-          </tr>
-        </tbody>
-      </HTMLTable>
-      <div className="w-5 h-5 bg-red" />
-    </div>
-
-    <div className="flex mb-10">
-      <div className="flex-1">
-        <div>FONT SIZE</div>
-        <div className="text-xs mr-2">text-xs</div>
-        <div className="text-sm mr-2">text-sm</div>
-        <div className="text-base mr-2">text-base</div>
-        <div className="text-lg mr-2">text-lg</div>
-        <div className="text-xl mr-2">text-xl</div>
-        <div className="text-2xl mr-2">text-2xl</div>
-        <div className="text-3xl mr-2">text-3xl</div>
-        <div className="text-4xl mr-2">text-4xl</div>
-        <div className="text-5xl mr-2">text-5xl</div>
-        <div className="text-6xl mr-2">text-6xl</div>
-      </div>
-
-      <div className="flex-1">
-        <div>FONT WEIGHT</div>
-        <div className="font-hairline mr-2">font-hairline</div>
-        <div className="font-thin mr-2">font-thin</div>
-        <div className="font-light mr-2">font-light</div>
-        <div className="font-normal mr-2">font-normal</div>
-        <div className="font-medium mr-2">font-medium</div>
-        <div className="font-semibold mr-2">font-semibold</div>
-        <div className="font-bold mr-2">font-bold</div>
-        <div className="font-extrabold mr-2">font-extrabold</div>
-        <div className="font-black mr-2">font-black</div>
-      </div>
-
-      <div className="flex-1">
-        <div>FONT FAMILY</div>
-        <div className="font-sans">font-sans</div>
-        <div className="font-serif">font-serif</div>
-        <div className="font-mono">font-mono</div>
-      </div>
-    </div>
-
-    <div className="flex mb-10">
-      <div className="flex-1">
-        <div>BORDER WIDTH</div>
-        <div className="border mb-2 w-20">border</div>
-        <div className="border-2 mb-2 w-20">border-2</div>
-        <div className="border-4 mb-2 w-20">border-4</div>
-        <div className="border-8 mb-2 w-20">border-8</div>
-      </div>
-
-      <div className="flex-1">
-        <div>BORDER RADIUS</div>
-        <div className="border rounded-sm mb-2 w-32 px-2">rounded-sm</div>
-        <div className="border rounded mb-2 w-32 px-2">rounded</div>
-        <div className="border rounded-lg mb-2 w-32 px-2">rounded-lg</div>
-        <div className="border rounded-full mb-2 w-32 px-2">rounded-full</div>
-        <div className="border rounded-none mb-2 w-32 px-2">rounded-none</div>
-      </div>
-
-      <div className="flex-1">
-        <div>BOX SHADOW</div>
-        <div className="border shadow mb-2 w-32 px-2">shadow</div>
-        <div className="border shadow-md mb-2 w-32 px-2">shadow-md</div>
-        <div className="border shadow-lg mb-2 w-32 px-2">shadow-lg</div>
-        <div className="border shadow-inner mb-2 w-32 px-2">shadow-inner</div>
-        <div className="border shadow-outline mb-2 w-32 px-2">shadow-outline</div>
-        <div className="border shadow-none mb-2 w-32 px-2">shadow-none</div>
-      </div>
-    </div>
-
-    <div className="flex mb-10">
-      <div className="flex-1">
-        <div>OPACITY</div>
-        <div className="mb-2 opacity-100">opacity-100</div>
-        <div className="mb-2 opacity-75">opacity-75</div>
-        <div className="mb-2 opacity-50">opacity-50</div>
-        <div className="mb-2 opacity-25">opacity-25</div>
-        <div className="mb-2">opacity-0</div>
-      </div>
-
-      <div className="flex-1">
-        <div>LINE HEIGHT</div>
-        <div className="border mb-2 px-1 w-1/2 leading-tight">leading-tight</div>
-        <div className="border mb-2 px-1 w-1/2 leading-snug">leading-snug</div>
-        <div className="border mb-2 px-1 w-1/2 leading-normal">leading-normal</div>
-        <div className="border mb-2 px-1 w-1/2 leading-relaxed">leading-relaxed</div>
-        <div className="border mb-2 px-1 w-1/2 leading-loose">leading-loose</div>
-      </div>
-
-      <div className="flex-1">
-        <div>LETTER SPACING</div>
-        <div className="mb-2 tracking-tighter">tracking-tighter</div>
-        <div className="mb-2 tracking-tight">tracking-tight</div>
-        <div className="mb-2 tracking-normal">tracking-normal</div>
-        <div className="mb-2 tracking-wide">tracking-wide</div>
-        <div className="mb-2 tracking-wider">tracking-wider</div>
-        <div className="mb-2 tracking-widest">tracking-widest</div>
-      </div>
-    </div>
-  </div>
-);

package/src/__stories__/Docs/Namespaces.tsx

@@ -1,55 +0,0 @@
-import './_theme-namespace.scss';
-
-import * as React from 'react';
-
-import { Button, CodeViewer, ThemeContainer } from '../..';
-
-export default () => (
-  <div className="m-20">
-    <div className="mb-10">
-      Your theme is now customized, but maybe you need to two different instances of the color "primary". This can be
-      done with clever namespacing! (this is an advanced feature and should be used with caution, also using this
-      feature will currently bloat your css until we optimize)
-    </div>
-    <div>
-      To use namespaces simply overwrite and import the theme like you normally would, but nested inside of a unique
-      class! Then use our ThemeContainer Component with the namespace prop equal to your new classname.
-    </div>
-    <CodeViewer
-      value={`/*main.scss*/
-
-/**applied with <ThemeContainer namespace="namespace-1">*/
-.namespace-1 {
-  $sl-config: (
-    colors: (
-      success: blue,
-    ),
-  );
-
-  @import '~@stoplight/ui-kit';
-}
-
-/**applied with <ThemeContainer namespace="namespace-2">*/
-.namespace-2 {
-  $sl-config: (
-    colors: (
-      success: red,
-    ),
-  );
-
-  @import '~@stoplight/ui-kit';
-}
-`}
-    />
-
-    <Button intent="success">success is normal</Button>
-
-    <ThemeContainer namespace="namespace-1">
-      <Button intent="success">success is blue</Button>
-    </ThemeContainer>
-
-    <ThemeContainer namespace="namespace-2">
-      <Button intent="success">success is red</Button>
-    </ThemeContainer>
-  </div>
-);

package/src/__stories__/Docs/Theme.tsx

@@ -1,32 +0,0 @@
-import './_theme-overwrite.scss';
-
-import * as React from 'react';
-
-import { Button, CodeViewer, ThemeContainer } from '../../';
-
-export default () => (
-  <div className="m-20">
-    <div>Don't like the stoplight color pallete? Overwrite theme in your applications!!</div>
-    <div>
-      To overwrite our variables you must be using SCSS. Then in whatever file you import our scss, define an $sl-config
-      ABOVE the import, then replace with whatever values. Example below:
-    </div>
-    <CodeViewer
-      value={`/*main.scss*/
-
-$sl-config: (
-  colors: (
-    success: red,
-  ),
-);
-
-@import '~@stoplight/ui-kit/src/styles/ui-kit';
-`}
-    />
-
-    {/* we are using the namespace prop so we don't overwrite the them in our other stories */}
-    <ThemeContainer namespace="namespace">
-      <Button intent="success">success is red</Button>
-    </ThemeContainer>
-  </div>
-);

package/src/__stories__/Docs/_theme-namespace.scss

@@ -1,20 +0,0 @@
-// /**applied with <ThemeContainer namespace="namespace-1">*/
-// .namespace-1 {
-//   $sl-config: (
-//     colors: (
-//       success: blue,
-//     ),
-//   );
-
-//   @import '../../../styles/ui-kit';
-// }
-
-// .namespace-2 {
-//   $sl-config: (
-//     colors: (
-//       success: red,
-//     ),
-//   );
-
-//   @import '../../../styles/ui-kit';
-// }

package/src/__stories__/Docs/_theme-overwrite.scss

@@ -1,9 +0,0 @@
-// .namespace {
-//   $sl-config: (
-//     colors: (
-//       success: red,
-//     ),
-//   );
-
-//   @import '../../../styles/ui-kit';
-// }

package/src/__stories__/Docs/index.tsx

@@ -1,10 +0,0 @@
-import { storiesOf } from '@storybook/react';
-
-import Classes from './Classes';
-import Namespaces from './Namespaces';
-import Theme from './Theme';
-
-storiesOf('Docs', module)
-  .add('Classes', Classes)
-  .add('Overwritting the Theme', Theme)
-  .add('Multiple Namespaces', Namespaces);

package/src/__stories__/Dropdown/index.tsx

@@ -1,28 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { array, boolean, number, withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import { Icon } from '../..';
-import { Dropdown, IDropdown } from '../../Dropdown/Dropdown';
-import { Select } from '../../Select';
-
-export const dropdownKnobs = (tabName = 'Dropdown'): Partial<IDropdown> => ({
-  items: array('items', ['foo', 'bar', 'baz'], ',', tabName),
-  filterable: boolean('filterable', false, tabName),
-  maxRows: number('maxRows', 10, { min: 1, max: Infinity, range: false, step: 1 }, tabName),
-  itemSize: number('itemSize', 30, { min: 1, max: Infinity, range: false, step: 1 }, tabName),
-});
-
-const ItemSelector = Select.ofType<string>();
-
-storiesOf('Dropdown', module)
-  .addDecorator(withKnobs)
-  .add('with defaults', () => (
-    <Dropdown baseComponent={ItemSelector} {...(dropdownKnobs() as IDropdown)} onItemSelect={action('onItemSelect')}>
-      <div className="flex items-center justify-center cursor-pointer text-xl p-2">
-        Open
-        <Icon className="pl-1 -mr-2" icon="caret-down" iconSize={14} />
-      </div>
-    </Dropdown>
-  ));