@stoplight/ui-kit 3.0.0-beta.9 → 3.0.1

package/src/__stories__/FormButton/index.tsx

@@ -0,0 +1,55 @@
+import { FormGroup } from '@blueprintjs/core';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import * as yup from 'yup';
+
+import { FormButton } from '../../FormButton';
+import { FormInput } from '../../FormInput';
+
+storiesOf('FormButton', module).add('validation', () => {
+  return (
+    <div className="p-40">
+      <ExampleContainer />
+    </div>
+  );
+});
+
+const ExampleContainer: React.FC = () => {
+  const [field1, setField1] = React.useState('');
+  const [field2, setField2] = React.useState('');
+
+  const totalData = React.useMemo(
+    () => ({
+      field1,
+      field2,
+    }),
+    [field1, field2],
+  );
+
+  return (
+    <div>
+      <FormGroup label="Field 1 - Name">
+        <FormInput
+          value={field1}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setField1(e.currentTarget.value)}
+          schema={field1Schema}
+        />
+      </FormGroup>
+      <FormGroup label="Field 2 - Email">
+        <FormInput
+          value={field2}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setField2(e.currentTarget.value)}
+          schema={field2Schema}
+        />
+      </FormGroup>
+      <FormButton onClick={() => alert('hey')} data={totalData} schema={totalSchema} text="Submit" />
+    </div>
+  );
+};
+
+const field1Schema = yup.string().min(2, 'Min 2 characters');
+const field2Schema = yup.string().email();
+const totalSchema = yup.object().shape({
+  field1: field1Schema,
+  field2: field2Schema,
+});

package/src/__stories__/FormInput/index.tsx

@@ -0,0 +1,43 @@
+import { withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import * as yup from 'yup';
+
+import { FormInput } from '../../';
+
+storiesOf('FormInput', module)
+  .addDecorator(withKnobs)
+  .add('with synchronous validation', () => (
+    <div className="p-40">
+      <p>The number of characters must be odd</p>
+      <FormInputContainer schema={exampleSyncSchema} />
+    </div>
+  ))
+  .add('with async validation', () => (
+    <div className="p-40">
+      <p>The number of characters must be odd</p>
+      <FormInputContainer schema={exampleAsyncSchema} />
+    </div>
+  ));
+
+const FormInputContainer: React.FC<{ schema: yup.StringSchema }> = ({ schema }) => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <FormInput
+      value={value}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
+      schema={schema}
+    />
+  );
+};
+
+const exampleSyncSchema = yup.string().min(3, 'waaay too short').max(5, 'waaay too long');
+
+const exampleAsyncSchema = yup.string().test('oddchars', 'The number of characters must be odd', value => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(value.length % 2 === 1);
+    }, 1000);
+  });
+});

package/src/__stories__/ScrollContainer/index.tsx

@@ -0,0 +1,114 @@
+import { boolean, withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+
+import { IScrollContainer, ScrollContainer } from '../../ScrollContainer';
+
+export const scrollContainerKnobs = (): IScrollContainer => ({
+  shadows: boolean('shadows', true),
+});
+
+storiesOf('ScrollContainer', module)
+  .addDecorator(withKnobs)
+  .add('default autogrow', () => (
+    <div className="border" style={{ height: '98vh' }}>
+      <ScrollContainer {...scrollContainerKnobs()}>
+        <ScrollContent />
+      </ScrollContainer>
+    </div>
+  ))
+  .add('container max-height', () => (
+    <div className="border" style={{ height: '98vh', maxHeight: 500 }}>
+      <ScrollContainer {...scrollContainerKnobs()}>
+        <ScrollContent />
+      </ScrollContainer>
+    </div>
+  ))
+  .add('sibling elem, fill remaining', () => (
+    <div className="border-2 flex flex-col" style={{ height: '98vh', maxHeight: 500, margin: 50 }}>
+      <div style={{ height: 250, margin: 20, background: 'pink' }}>
+        remaining content should only fill the rest of the space
+      </div>
+      <ScrollContainer {...scrollContainerKnobs()}>
+        <ScrollContent />
+      </ScrollContainer>
+    </div>
+  ))
+  .add('dark', () => (
+    <div className="border bp3-dark bg-gray-8 p-10" style={{ height: '98vh', maxHeight: 500 }}>
+      <ScrollContainer {...scrollContainerKnobs()}>
+        <ScrollContent />
+      </ScrollContainer>
+    </div>
+  ))
+
+  // TODO FIXME
+  .add('broken: sibling text, fill remaining', () => (
+    <div className="border-2" style={{ height: '98vh', maxHeight: 500, margin: 50 }}>
+      This edgecase does not work, when the div contains text directly next to the scroll container the height is
+      incorrect
+      <ScrollContainer {...scrollContainerKnobs()}>
+        <ScrollContent />
+      </ScrollContainer>
+    </div>
+  ));
+
+const ScrollContent = () => {
+  return (
+    <div style={{ padding: 40 }}>
+      <h1>
+        This is the primary heading and there should only be one of these per page
+        sadassadasdsdasdaslkdmaslkdmasldkmalskdmasldmasldkamsldkamsdlkasmdlkamsdlkmsadlksamdlksamdlaskdmasldkmsakdmasldkmasdkmalskdmlaskdm
+      </h1>
+      <p>
+        A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.
+      </p>
+      <a href="#ul-list" id="ul-list" />
+      <ul>
+        <li>This is a list item</li>
+        <li>So is this - there could be more</li>
+        <li>
+          Make sure to style list items to:
+          <ul>
+            <li>Not forgetting child list items</li>
+            <li>Not forgetting child list items</li>
+            <li>Not forgetting child list items</li>
+            <li>Not forgetting child list items</li>
+          </ul>
+        </li>
+        <li>A couple more</li>
+        <li>top level list items</li>
+      </ul>
+      <p>
+        Don't forget <strong>Ordered lists</strong>:
+      </p>
+      <ol>
+        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+        <li>
+          Aliquam tincidunt mauris eu risus.
+          <ol>
+            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+            <li>Aliquam tincidunt mauris eu risus.</li>
+          </ol>
+        </li>
+        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+        <li>Aliquam tincidunt mauris eu risus.</li>
+      </ol>
+      <a href="#sub-heading2" id="sub-heading2" />
+      <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
+        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
+        ultricies mi vitae est. Mauris placerat eleifend leo.
+      </p>
+
+      <a href="#sub-heading3" id="sub-heading3" />
+      <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
+        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
+        ultricies mi vitae est. Mauris placerat eleifend leo.
+      </p>
+    </div>
+  );
+};

package/src/__stories__/ScrollList/index.tsx

@@ -0,0 +1,72 @@
+import { number, withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { areEqual } from 'react-window';
+
+import { FixedSizeList, IFixedSizeListProps, IVariableSizeListProps, VariableSizeList } from '../../ScrollList';
+
+/**
+ * KNOBS
+ */
+
+export const fixedSizeListKnobs = (tabName = 'FixedSizeList'): Omit<IFixedSizeListProps, 'children'> => ({
+  itemCount: number('itemCount', 20, { min: 0, max: Infinity, range: false, step: 1 }, tabName),
+  itemSize: number('itemSize', 50, { min: 0, max: Infinity, range: false, step: 1 }, tabName),
+});
+
+export const variableSizedListKnobs = (
+  tabName = 'FixedSizeList',
+): Omit<IVariableSizeListProps, 'children' | 'itemSize'> => ({
+  itemCount: number('itemCount', 20, { min: 0, max: Infinity, range: false, step: 1 }, tabName),
+  overscanCount: number('overscanCount', 10, { min: 0, max: Infinity, range: false, step: 1 }, tabName),
+});
+
+/**
+ * COMPONENTS
+ */
+
+const Row: React.FunctionComponent<any> = ({ index, style }) => (
+  <div style={style} className="flex items-center border-b px-4">
+    <div className="flex-1">{index}.</div>
+    <div>Item</div>
+  </div>
+);
+
+const MemoizedRow = React.memo(props => <Row {...props} />, areEqual);
+
+/**
+ * STORIES
+ */
+storiesOf('ScrollList-FixedSizeList', module)
+  .addDecorator(withKnobs)
+  .add('grow to container height', () => (
+    <div style={{ outline: '1px solid currentColor', height: '50vh', margin: 50 }}>
+      <FixedSizeList {...fixedSizeListKnobs()}>{Row}</FixedSizeList>
+    </div>
+  ))
+
+  .add('maxRows', () => (
+    <div style={{ outline: '1px solid currentColor', margin: 50 }}>
+      <FixedSizeList
+        {...fixedSizeListKnobs()}
+        maxRows={number('maxRows', 5, { min: 0, max: Infinity, range: false, step: 1 }, 'FixedSizeList')}
+      >
+        {Row}
+      </FixedSizeList>
+    </div>
+  ))
+  .add('memoized', () => (
+    <div style={{ outline: '1px solid currentColor', height: '50vh', margin: 50 }}>
+      <FixedSizeList {...fixedSizeListKnobs()}>{MemoizedRow}</FixedSizeList>
+    </div>
+  ));
+
+storiesOf('ScrollList-VariableSizeList', module)
+  .addDecorator(withKnobs)
+  .add('memoized', () => (
+    <div style={{ outline: '1px solid currentColor', height: '50vh', margin: 50 }}>
+      <VariableSizeList {...variableSizedListKnobs('VariableSizeList')} itemSize={index => Math.max(index, 4) * 10}>
+        {MemoizedRow}
+      </VariableSizeList>
+    </div>
+  ));

package/src/__stories__/SecretInput/index.tsx

@@ -0,0 +1,41 @@
+import { withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+
+import { FormGroup, SecretInput } from '../../';
+
+storiesOf('SecretInput', module)
+  .addDecorator(withKnobs)
+  .add('with defaults', () => {
+    return (
+      <div className="p-40">
+        <FormGroup
+          helperText={
+            <span>
+              A <code>SecretInput</code> is a regular <code>InputGroup</code> and takes all the same props, but has a
+              predefined <code>rightElement</code> button that toggles <code>type</code> between "text" and "password".
+            </span>
+          }
+        >
+          <SecretInput value="password" />
+        </FormGroup>
+      </div>
+    );
+  })
+  .add('with icon and selectOnFocus', () => {
+    return (
+      <div className="p-40">
+        <FormGroup
+          label="Secret UUID Token"
+          helperText={
+            <span>
+              Use the <code>selectOnFocus</code> prop to assist users when you expect the most common interactions will
+              be to copy or replace the entire value.
+            </span>
+          }
+        >
+          <SecretInput leftIcon="lock" selectOnFocus={true} value="01234567890123456789012345678912" />
+        </FormGroup>
+      </div>
+    );
+  });

package/src/__stories__/SimpleTabs/index.tsx

@@ -0,0 +1,57 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+
+import { SimpleTab, SimpleTabList, SimpleTabPanel, SimpleTabs } from '../../SimpleTabs';
+
+storiesOf('SimpleTabs', module)
+  .add('with defaults', () => (
+    <div className="p-10">
+      <SimpleTabs>
+        <SimpleTabList>
+          <SimpleTab>Title 1</SimpleTab>
+          <SimpleTab>Title 2</SimpleTab>
+        </SimpleTabList>
+
+        <SimpleTabPanel>
+          <h3>Any content 1</h3>
+        </SimpleTabPanel>
+        <SimpleTabPanel>
+          <h2>Any content 2</h2>
+        </SimpleTabPanel>
+      </SimpleTabs>
+    </div>
+  ))
+  .add('disabled Simpletab', () => (
+    <div className="p-10">
+      <SimpleTabs>
+        <SimpleTabList>
+          <SimpleTab>Title 1</SimpleTab>
+          <SimpleTab disabled={true}>Title 2</SimpleTab>
+        </SimpleTabList>
+
+        <SimpleTabPanel>
+          <h3>Any content 1</h3>
+        </SimpleTabPanel>
+        <SimpleTabPanel>
+          <h2>Any content 2</h2>
+        </SimpleTabPanel>
+      </SimpleTabs>
+    </div>
+  ))
+  .add('dark', () => (
+    <div className="bp3-dark bg-gray-8 p-10" style={{ height: '90vh', width: '100%' }}>
+      <SimpleTabs>
+        <SimpleTabList>
+          <SimpleTab>Title 1</SimpleTab>
+          <SimpleTab>Title 2</SimpleTab>
+        </SimpleTabList>
+
+        <SimpleTabPanel>
+          <h3 className="p-10">Any content 1</h3>
+        </SimpleTabPanel>
+        <SimpleTabPanel>
+          <h2>Any content 2</h2>
+        </SimpleTabPanel>
+      </SimpleTabs>
+    </div>
+  ));

package/src/__stories__/TableOfContents/index.tsx

@@ -0,0 +1,151 @@
+import { Button } from '@blueprintjs/core';
+import { withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+
+import { studioContents } from '../../__fixtures__/table-of-contents/studio';
+import { tree } from '../../__fixtures__/table-of-contents/tree';
+import { DefaultRow, ITableOfContentsLink, RowComponentType, TableOfContents } from '../../TableOfContents';
+
+const styles = {
+  height: '100vh',
+  borderRight: '1px solid #E6ECF1',
+  backgroundColor: '#F5F7F9',
+  paddingTop: 24,
+  paddingLeft: 24,
+};
+
+storiesOf('TableOfContents', module)
+  .addDecorator(withKnobs)
+  .add('studio /w custom RowComponent', () => {
+    return <SimpleCustomComponentStory />;
+  })
+  .add('studio /w custom RowComponent and extra props', () => {
+    return <CustomComponentWithExtraPropsStory />;
+  })
+  .add('studio without rowComponent', () => {
+    return (
+      <div style={styles}>
+        <TableOfContents className="h-full" contents={studioContents} />
+      </div>
+    );
+  })
+  .add('nested tree', () => {
+    return (
+      <div style={styles}>
+        <TableOfContents className="h-full" contents={tree} />
+      </div>
+    );
+  })
+  .add('mobile', () => {
+    return <MobileStory />;
+  });
+
+const MobileStory = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <div style={styles}>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <TableOfContents
+        className="h-full"
+        contents={studioContents}
+        title={'Mobile Support'}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        enableDrawer={1000}
+        rowComponent={RowComponentWithExtraProps}
+        rowComponentExtraProps={{ helloString: 'a' }}
+      />
+    </div>
+  );
+};
+
+const NavigationContext = React.createContext({ path: '', setPath: (_: string) => {} });
+
+const SimpleCustomComponentStory = () => {
+  const [path, setPath] = React.useState('/reference/petstore/openapi.v1.yaml/paths/~1pets~1{petId}/get');
+
+  const contextValue = React.useMemo(() => ({ path, setPath }), [path, setPath]);
+
+  const contentsWithDynamicIsActive = React.useMemo(() => {
+    return studioContents.map(c => ({ ...c, isActive: c.to === path }));
+  }, [path]);
+
+  return (
+    <NavigationContext.Provider value={contextValue}>
+      <div style={styles}>
+        <TableOfContents className="h-full" contents={contentsWithDynamicIsActive} rowComponent={SimpleRowComponent} />
+      </div>
+    </NavigationContext.Provider>
+  );
+};
+
+const CustomComponentWithExtraPropsStory = () => {
+  const [path, setPath] = React.useState('/reference/petstore/openapi.v1.yaml/paths/~1pets~1{petId}/get');
+
+  const contextValue = React.useMemo(() => ({ path, setPath }), [path, setPath]);
+
+  const contentsWithDynamicIsActive = React.useMemo(() => {
+    return studioContents.map(c => ({ ...c, isActive: c.to === path }));
+  }, [path]);
+
+  return (
+    <NavigationContext.Provider value={contextValue}>
+      <div style={styles}>
+        <TableOfContents
+          className="h-full"
+          contents={contentsWithDynamicIsActive}
+          rowComponent={RowComponentWithExtraProps}
+          rowComponentExtraProps={{ helloString: 'Hello' }}
+        />
+      </div>
+    </NavigationContext.Provider>
+  );
+};
+
+const SimpleRowComponent: RowComponentType<ITableOfContentsLink> = ({ item, ...rest }) => {
+  const { setPath } = React.useContext(NavigationContext);
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (item.to) {
+        setPath(item.to);
+      }
+      e.preventDefault();
+    },
+    [item.to, setPath],
+  );
+
+  return (
+    <a href={item.to} onClick={handleClick}>
+      <DefaultRow item={item} {...rest} />
+    </a>
+  );
+};
+
+type ExtraProps = {
+  helloString: string;
+};
+
+const RowComponentWithExtraProps: RowComponentType<ITableOfContentsLink, ExtraProps> = ({
+  item,
+  extra: { helloString },
+}) => {
+  const { setPath } = React.useContext(NavigationContext);
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (item.to) {
+        setPath(item.to);
+      }
+      e.preventDefault();
+    },
+    [item.to, setPath],
+  );
+
+  return (
+    <Button onClick={handleClick} className="block mb-2 mt-2">
+      <em>{helloString}</em> {item.name}
+    </Button>
+  );
+};

package/src/__stories__/Toaster/index.tsx

@@ -0,0 +1,46 @@
+import { action as StorybookAction } from '@storybook/addon-actions';
+import { boolean, button, select, text, withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+
+import { IconName, Intent, Position, Toaster } from '../../';
+
+const _toaster = Toaster.create({
+  position: Position.BOTTOM_RIGHT,
+});
+
+storiesOf('Toaster', module)
+  .addDecorator(withKnobs)
+  .add('with defaults', () => {
+    button('Show Toast', showToast);
+
+    let action = {
+      icon: text('action.icon', 'airplane') as IconName,
+      text: text('action.text', 'Action Text'),
+      onClick: StorybookAction('onClick action'),
+    };
+    let props = {
+      ...(boolean('show action', false) && { action }),
+      intent: select('intent', Intent, 'primary'),
+      message: text('message', 'Hello world!'),
+    };
+
+    function showToast() {
+      // I found I had to re-run these or else they wouldn't be up-to-date.
+      // Also, Storybook doesn't let you use hooks, and frankly... I don't really know how knobs work.
+      // If there's a better way I don't know it yet.
+      action = {
+        icon: text('action.icon', 'airplane') as IconName,
+        text: text('action.text', 'Action Text'),
+        onClick: StorybookAction('onClick action'),
+      };
+      props = {
+        ...(boolean('show action', false) && { action }),
+        intent: select('intent', Intent, 'primary'),
+        message: text('message', 'Hello world!'),
+      };
+      _toaster.show(props);
+    }
+
+    return <div className="p-40" />;
+  });

package/src/__stories__/index.ts

@@ -0,0 +1,13 @@
+import './Docs';
+import './Checkbox';
+import './Code';
+import './Dropdown';
+import './FormButton';
+import './FormInput';
+import './AutoSizer';
+import './ScrollContainer';
+import './ScrollList';
+import './SecretInput';
+import './SimpleTabs';
+import './Toaster';
+import './TableOfContents';

package/src/_hooks/useIsMobile.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export const useIsMobile = (enableDrawer: boolean | number) => {
+  const [isMobile, setIsMobile] = React.useState(checkMobile(enableDrawer));
+
+  const updateLayout = React.useCallback(() => {
+    setIsMobile(checkMobile(enableDrawer));
+  }, [enableDrawer]);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', updateLayout);
+    return () => {
+      window.removeEventListener('resize', updateLayout);
+    };
+  }, [updateLayout]);
+
+  return isMobile;
+};
+
+export const checkMobile = (enableDrawer: boolean | number) => {
+  if (enableDrawer === false) {
+    return false;
+  }
+
+  return typeof window !== 'undefined' && window.innerWidth < 768;
+};

package/src/_hooks/useValidateSchema.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useDebounce } from 'use-debounce';
+import * as yup from 'yup';
+
+const noError: string[] = [];
+const unknownError = ['Unknown error'];
+
+export function useValidateSchema<T>(
+  schema?: yup.Schema<T>,
+  value?: T,
+  { abortEarly }: yup.ValidateOptions = {},
+  debounceDelay: number = 500,
+) {
+  const [debouncedValue] = useDebounce(value, debounceDelay);
+  const [errors, setErrors] = React.useState<string[]>(noError);
+  const [isValidating, setIsValidating] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!schema) {
+      setErrors(noError);
+      return;
+    }
+
+    setIsValidating(true);
+
+    schema
+      .validate(debouncedValue, { strict: true, abortEarly: abortEarly ?? true }) // to avoid taking a useEffect dependency on validateOpts that is an object
+      .then(() => setErrors(noError))
+      .catch(e => setErrors(e.errors || unknownError))
+      .finally(() => setIsValidating(false));
+  }, [schema, debouncedValue, abortEarly]);
+
+  return [{ errors, isValidating }];
+}

package/src/classes.ts

@@ -0,0 +1,21 @@
+/**
+ * EASY EXPORT CLASSES TO USE ELSEWHERE
+ */
+import { Classes as BPClasses } from '@blueprintjs/core';
+
+const NS = process.env.BLUEPRINT_NAMESPACE || 'bp3';
+
+/**
+ * EXPORTS
+ */
+export const Classes = {
+  ...BPClasses,
+  NS,
+  CODE_EDITOR: 'CodeEditor',
+  CODE_VIEWER: 'CodeViewer',
+  SIMPLE_TAB: `${NS}-simple-tab`,
+  SIMPLE_TAB_LIST: `${NS}-simple-tab-list`,
+  SIMPLE_TAB_PANEL: `${NS}-simple-tab-panel`,
+  SCROLL_TRACK: `${NS}-scroll-track`,
+  SCROLL_THUMB: `${NS}-scroll-thumb`,
+};