@stoplight/ui-kit 0.0.0-beta-0.1

package/styles/tailwind/tailwind.config.js

@@ -0,0 +1,410 @@
+function getScssTheme(...path) {
+  return `get-theme(${path.join(' , ')})`;
+}
+
+function getScssThemeColors(color) {
+  return {
+    default: getScssTheme('colors', color, 5),
+    1: getScssTheme('colors', color, 1),
+    2: getScssTheme('colors', color, 2),
+    3: getScssTheme('colors', color, 3),
+    4: getScssTheme('colors', color, 4),
+    5: getScssTheme('colors', color, 5),
+    6: getScssTheme('colors', color, 6),
+    7: getScssTheme('colors', color, 7),
+    8: getScssTheme('colors', color, 8),
+    9: getScssTheme('colors', color, 9),
+  };
+}
+
+module.exports = {
+  prefix: '',
+  important: false,
+  separator: ':',
+  theme: {
+    colors: {
+      inherit: 'inherit',
+      transparent: getScssTheme('colors', 'transparent'),
+      lighten: getScssThemeColors('lighten'),
+      darken: getScssThemeColors('darken'),
+      disabled: getScssTheme('colors', 'disabled'),
+
+      black: getScssTheme('colors', 'black'),
+      white: getScssTheme('colors', 'white'),
+      gray: getScssThemeColors('gray'),
+
+      red: getScssThemeColors('red'),
+      orange: getScssThemeColors('orange'),
+      green: getScssThemeColors('green'),
+      blue: getScssThemeColors('blue'),
+      purple: getScssThemeColors('purple'),
+
+      // add so we have primary/info/etc classnames
+      primary: getScssTheme('colors', 'blue', 5),
+      info: getScssTheme('colors', 'blue', 5),
+      success: getScssTheme('colors', 'green', 5),
+      warning: getScssTheme('colors', 'orange', 5),
+      danger: getScssTheme('colors', 'red', 5),
+    },
+    spacing: {
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '18': '4.462rem', // 58px at standard 13px page font size
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem',
+      '40': '10rem',
+      '48': '12rem',
+      '56': '14rem',
+      '64': '16rem',
+      '80': '20rem',
+      '96': '24rem',
+      '128': '32rem',
+    },
+    screens: {
+      sm: { max: '767px' }, // mobile
+      md: { max: '1007px' }, // tablet
+      // lg: { min: '1008px' }, // desktop is the default
+      print: { raw: 'print' },
+    },
+    fontFamily: {
+      sans: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
+    },
+    fontSize: {
+      xs: getScssTheme('fontSize, xs'),
+      sm: getScssTheme('fontSize', 'sm'),
+      base: getScssTheme('fontSize', 'base'),
+      lg: getScssTheme('fontSize', 'lg'),
+      xl: getScssTheme('fontSize', 'xl'),
+      '2xl': getScssTheme('fontSize', '2xl'),
+      '3xl': getScssTheme('fontSize', '3xl'),
+      '4xl': getScssTheme('fontSize', '4xl'),
+      '5xl': getScssTheme('fontSize', '5xl'),
+      '6xl': getScssTheme('fontSize', '6xl'),
+    },
+    fontWeight: {
+      hairline: getScssTheme('fontWeight', 'hairline'),
+      thin: getScssTheme('fontWeight', 'thin'),
+      light: getScssTheme('fontWeight', 'light'),
+      normal: getScssTheme('fontWeight', 'normal'),
+      medium: getScssTheme('fontWeight', 'medium'),
+      semibold: getScssTheme('fontWeight', 'semibold'),
+      bold: getScssTheme('fontWeight', 'bold'),
+      extrabold: getScssTheme('fontWeight', 'extrabold'),
+      black: getScssTheme('fontWeight', 'black'),
+    },
+    lineHeight: {
+      none: 1,
+      tight: 1.25,
+      snug: 1.375,
+      normal: 1.5,
+      relaxed: 1.625,
+      loose: 2,
+    },
+    letterSpacing: {
+      tighter: '-.05em',
+      tight: '-.025em',
+      normal: '0',
+      wide: '.025em',
+      wider: '.05em',
+      widest: '.1em',
+    },
+    textColor: theme => theme('colors'),
+    backgroundColor: theme => theme('colors'),
+    backgroundPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain',
+    },
+    borderWidth: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
+    },
+    borderColor: theme => ({
+      ...theme('colors'),
+      default: theme('colors').gray[3],
+    }),
+    borderRadius: {
+      none: getScssTheme('borderRadius', 'none'),
+      sm: getScssTheme('borderRadius', 'sm'),
+      default: getScssTheme('borderRadius', 'default'),
+      lg: getScssTheme('borderRadius', 'lg'),
+      full: getScssTheme('borderRadius', 'full'),
+    },
+    cursor: {
+      auto: 'auto',
+      default: 'default',
+      pointer: 'pointer',
+      wait: 'wait',
+      move: 'move',
+      'not-allowed': 'not-allowed',
+    },
+    width: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.33333%',
+      '2/3': '66.66667%',
+      '1/4': '25%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.66667%',
+      '5/6': '83.33333%',
+      full: '100%',
+      screen: '100vw',
+    }),
+    height: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+    }),
+    minWidth: {
+      '0': '0',
+      full: '100%',
+    },
+    minHeight: {
+      '0': '0',
+      full: '100%',
+      screen: '100vh',
+    },
+    maxWidth: {
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      full: '100%',
+    },
+    maxHeight: {
+      full: '100%',
+      screen: '100vh',
+    },
+    padding: theme => theme('spacing'),
+    margin: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '-px': '-1px',
+      '-1': '-0.25rem',
+      '-2': '-0.5rem',
+      '-3': '-0.75rem',
+      '-4': '-1rem',
+      '-5': '-1.25rem',
+      '-6': '-1.5rem',
+      '-8': '-2rem',
+      '-10': '-2.5rem',
+      '-12': '-3rem',
+      '-16': '-4rem',
+      '-20': '-5rem',
+      '-24': '-6rem',
+      '-32': '-8rem',
+      '-40': '-10rem',
+      '-48': '-12rem',
+      '-56': '-14rem',
+      '-64': '-16rem',
+    }),
+    negativeMargin: theme => theme('spacing'),
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    boxShadow: {
+      default: getScssTheme('boxShadow', 'default'),
+      md: getScssTheme('boxShadow', 'md'),
+      lg: getScssTheme('boxShadow', 'lg'),
+      inner: getScssTheme('boxShadow', 'inner'),
+      outline: getScssTheme('boxShadow', 'outline'),
+      none: getScssTheme('boxShadow', 'none'),
+    },
+    zIndex: {
+      auto: 'auto',
+      '0': 0,
+      '10': 10,
+      '20': 20,
+      '30': 30,
+      '40': 40,
+      '50': 50,
+    },
+    opacity: {
+      '0': '0',
+      '25': '.25',
+      '50': '.5',
+      '75': '.75',
+      '100': '1',
+    },
+    fill: {
+      current: 'currentColor',
+    },
+    stroke: {
+      current: 'currentColor',
+    },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
+    flexGrow: {
+      '0': 0,
+      default: 1,
+    },
+    flexShrink: {
+      '0': 0,
+      default: 1,
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    inset: {
+      '0': 0,
+      auto: 'auto',
+    },
+    container: {},
+  },
+  variants: {
+    appearance: [],
+    backgroundAttachment: [],
+    backgroundColor: ['hover', 'focus', 'active', 'dark', 'dark-hover', 'dark-active'],
+    backgroundPosition: [],
+    backgroundRepeat: [],
+    backgroundSize: [],
+    borderCollapse: [],
+    borderColor: ['hover', 'focus', 'active', 'dark'],
+    borderRadius: [],
+    borderStyle: [],
+    borderWidth: ['dark'],
+    cursor: [],
+    display: ['responsive', 'group-hover'],
+    flexDirection: ['responsive'],
+    flexWrap: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: [],
+    justifyContent: ['responsive'],
+    alignContent: [],
+    flex: ['responsive'],
+    flexGrow: [],
+    flexShrink: [],
+    float: [],
+    fontFamily: [],
+    fontWeight: ['hover', 'focus'],
+    height: ['responsive'],
+    lineHeight: [],
+    listStylePosition: [],
+    listStyleType: [],
+    margin: ['responsive'],
+    maxHeight: [],
+    maxWidth: [],
+    minHeight: [],
+    minWidth: [],
+    negativeMargin: [],
+    objectFit: [],
+    objectPosition: [],
+    opacity: ['hover', 'focus', 'group-hover'],
+    outline: ['focus'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    pointerEvents: [],
+    position: ['responsive'],
+    inset: [],
+    resize: [],
+    boxShadow: ['hover', 'focus', 'dark'],
+    fill: [],
+    stroke: [],
+    tableLayout: [],
+    textAlign: ['responsive'],
+    textColor: ['hover', 'focus', 'active', 'dark'],
+    fontSize: ['responsive'],
+    fontStyle: [],
+    textTransform: [],
+    textDecoration: ['hover', 'focus'],
+    fontSmoothing: [],
+    letterSpacing: [],
+    userSelect: [],
+    verticalAlign: [],
+    visibility: ['responsive', 'group-hover'],
+    whitespace: ['responsive'],
+    wordBreak: ['responsive'],
+    width: ['responsive'],
+    zIndex: [],
+  },
+  corePlugins: {},
+  plugins: [
+    function({ addUtilities, addComponents, addVariant, e, prefix, config }) {
+      addVariant('dark', ({ modifySelectors, separator, container }) => {
+        container.walkRules(rule => {
+          rule.selector = `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(
+            `dark${separator}${rule.selector.slice(1)}`
+          )}`;
+        });
+      });
+      addVariant('dark-hover', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(`dark-hover${separator}${className}`)}:hover`;
+        });
+      });
+      addVariant('dark-active', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(
+            `dark-active${separator}${className}`
+          )}:active`;
+        });
+      });
+    },
+  ],
+};

package/types.d.ts

@@ -0,0 +1,3 @@
+export type Dictionary<T, K extends string | number = string> = {
+    [key in K]: T;
+};

package/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/withErrorBoundary.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+export type FallbackComponent = React.ComponentType<{
+    error: Error | null;
+}>;
+export interface IErrorBoundary {
+    FallbackComponent?: FallbackComponent;
+}
+export declare function withErrorBoundary<T extends IErrorBoundary>(WrappedComponent: React.ComponentType<Omit<T, 'FallbackComponent'>>, props?: Array<keyof T>, displayName?: string): {
+    new (props: T | Readonly<T>): {
+        state: {
+            error: null;
+        };
+        componentDidUpdate(prevProps: Readonly<T>): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "error">(state: {
+            error: Error | null;
+        } | ((prevState: Readonly<{
+            error: Error | null;
+        }>, props: Readonly<T>) => {
+            error: Error | null;
+        } | Pick<{
+            error: Error | null;
+        }, K> | null) | Pick<{
+            error: Error | null;
+        }, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<T> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<T>, nextState: Readonly<{
+            error: Error | null;
+        }>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<T>, prevState: Readonly<{
+            error: Error | null;
+        }>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<T>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<T>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<T>, nextState: Readonly<{
+            error: Error | null;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<T>, nextState: Readonly<{
+            error: Error | null;
+        }>, nextContext: any): void;
+    };
+    new (props: T, context: any): {
+        state: {
+            error: null;
+        };
+        componentDidUpdate(prevProps: Readonly<T>): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "error">(state: {
+            error: Error | null;
+        } | ((prevState: Readonly<{
+            error: Error | null;
+        }>, props: Readonly<T>) => {
+            error: Error | null;
+        } | Pick<{
+            error: Error | null;
+        }, K> | null) | Pick<{
+            error: Error | null;
+        }, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<T> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<T>, nextState: Readonly<{
+            error: Error | null;
+        }>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<T>, prevState: Readonly<{
+            error: Error | null;
+        }>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<T>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<T>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<T>, nextState: Readonly<{
+            error: Error | null;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<T>, nextState: Readonly<{
+            error: Error | null;
+        }>, nextContext: any): void;
+    };
+    displayName: string | undefined;
+    getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    contextType?: React.Context<any> | undefined;
+};

package/withErrorBoundary.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withErrorBoundary = void 0;
+const tslib_1 = require("tslib");
+const _isEqual = require("lodash/isEqual");
+const React = require("react");
+const FallbackComponent = ({ error }) => {
+    return (React.createElement("div", { className: "p-4" },
+        React.createElement("b", null, "Error"),
+        error && `: ${error.message}`));
+};
+function withErrorBoundary(WrappedComponent, props, displayName) {
+    var _a;
+    return _a = class ErrorBoundary extends React.PureComponent {
+            constructor() {
+                super(...arguments);
+                this.state = {
+                    error: null,
+                };
+            }
+            componentDidUpdate(prevProps) {
+                if (this.state.error !== null) {
+                    if (!props || !props.length) {
+                        if (!_isEqual(this.props, prevProps)) {
+                            this.setState({ error: null });
+                        }
+                    }
+                    else {
+                        for (const prop of props) {
+                            if (!_isEqual(this.props[prop], prevProps[prop])) {
+                                this.setState({ error: null });
+                            }
+                        }
+                    }
+                }
+            }
+            static getDerivedStateFromError(error) {
+                return { error };
+            }
+            render() {
+                const _a = this.props, { FallbackComponent: Fallback = FallbackComponent } = _a, props = tslib_1.__rest(_a, ["FallbackComponent"]);
+                if (this.state.error) {
+                    return React.createElement(Fallback, { error: this.state.error });
+                }
+                return React.createElement(WrappedComponent, Object.assign({}, props));
+            }
+        },
+        _a.displayName = displayName,
+        _a;
+}
+exports.withErrorBoundary = withErrorBoundary;
+//# sourceMappingURL=withErrorBoundary.js.map

package/withErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withErrorBoundary.js","sourceRoot":"","sources":["../src/withErrorBoundary.tsx"],"names":[],"mappings":";;;;AAAA,2CAA4C;AAC5C,+BAA+B;AAE/B,MAAM,iBAAiB,GAAsB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,CACL,6BAAK,SAAS,EAAC,KAAK;QAClB,uCAAY;QACX,KAAK,IAAI,KAAK,KAAK,CAAC,OAAO,EAAE,CAC1B,CACP,CAAC;AACJ,CAAC,CAAC;AAQF,SAAgB,iBAAiB,CAC/B,gBAAmE,EACnE,KAAsB,EACtB,WAAoB;;IAEpB,YAAO,MAAM,aAAc,SAAQ,KAAK,CAAC,aAAyC;YAA3E;;gBACE,UAAK,GAAG;oBACb,KAAK,EAAE,IAAI;iBACZ,CAAC;YAiCJ,CAAC;YA7BQ,kBAAkB,CAAC,SAAsB;gBAC9C,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,EAAE;oBAC7B,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;wBAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE;4BACpC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;yBAChC;qBACF;yBAAM;wBACL,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;4BACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE;gCAChD,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;6BAChC;yBACF;qBACF;iBACF;YACH,CAAC;YAGM,MAAM,CAAC,wBAAwB,CAAC,KAAY;gBACjD,OAAO,EAAE,KAAK,EAAE,CAAC;YACnB,CAAC;YAEM,MAAM;gBACX,MAAM,KAAgE,IAAI,CAAC,KAAK,EAA1E,EAAE,iBAAiB,EAAE,QAAQ,GAAG,iBAAiB,OAAyB,EAApB,KAAK,sBAA3D,qBAA6D,CAAa,CAAC;gBACjF,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;oBACpB,OAAO,oBAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;iBAC9C;gBAED,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,EAAI,CAAC;YACzC,CAAC;SACF;QA/Be,cAAW,GAAG,WAAY;WA+BxC;AACJ,CAAC;AA1CD,8CA0CC"}