@stoplight/ui-kit 3.0.1 → 3.0.3

package/src/__stories__/FormButton/index.tsx

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-/**
- * 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`,
-};