@stoplight/ui-kit 3.0.0-beta.8 → 3.0.0

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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,52 @@
+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

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

package/src/__stories__/Docs/Classes.tsx

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,20 @@
+// /**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

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

package/src/__stories__/Docs/index.tsx

@@ -0,0 +1,10 @@
+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

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