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

package/dist/styles/tailwind/tailwind.config.js

@@ -0,0 +1,412 @@
+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.285714286rem', // 60px at standard 14px page font size
+      '20': '5rem',
+      '24': '6rem',
+      '28': '7rem',
+      '32': '8rem',
+      '40': '10rem',
+      '48': '12rem',
+      '56': '14rem',
+      '64': '16rem',
+      '72': '18rem',
+      '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', 'group-hover', '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', 'group-hover'],
+    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', 'group-hover'],
+    fontSize: ['responsive'],
+    fontStyle: [],
+    textTransform: [],
+    textDecoration: ['hover', 'focus'],
+    fontSmoothing: [],
+    letterSpacing: [],
+    userSelect: [],
+    verticalAlign: [],
+    visibility: ['responsive', 'group-hover'],
+    whitespace: ['responsive'],
+    wordBreak: ['responsive'],
+    width: ['responsive', 'hover'],
+    zIndex: ['hover'],
+  },
+  corePlugins: {},
+  plugins: [
+    function ({ addVariant, e }) {
+      addVariant('dark', ({ 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/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: '@stoplight/scripts',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  moduleNameMapper: {
+    '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
+  },
+  testPathIgnorePatterns: ['/node_modules/'],
+};

package/package.json

@@ -1,42 +1,178 @@
 {
   "name": "@stoplight/ui-kit",
-  "version": "3.0.0-beta.9",
-  "description": "Foundational React components for the Stoplight ecosystem.",
+  "version": "3.0.1",
+  "description": "Foundational React components for the Stoplight ecosystem. Stable version with all critical security vulnerabilities patched.",
   "keywords": [
     "react",
     "ui",
-    "ui-components"
+    "ui-components",
+    "secure",
+    "stable"
   ],
   "main": "index.js",
+  "types": "index.d.ts",
   "sideEffects": false,
-  "files": [
-    "**/*"
-  ],
+  "homepage": "https://github.com/stoplightio/ui-kit",
+  "bugs": "https://github.com/stoplightio/ui-kit/issues",
   "author": "Stoplight <support@stoplight.io>",
   "repository": {
     "type": "git",
     "url": "https://github.com/stoplightio/ui-kit.git"
   },
   "license": "Apache-2.0",
+  "files": [
+    "**/*"
+  ],
+  "scripts": {
+    "build": "sl-scripts build --sourcemap && yarn build.styles",
+    "build.styles": "yarn build.tw && copyfiles -u 1 \"./src/styles/**/*\" ./dist",
+    "build.tw": "postcss ./scripts/build-tailwind/tailwind.css -o ./src/styles/tailwind/_base.scss -c ./sripts/tailwind-build/postcss.config.js",
+    "commit": "git-cz",
+    "lint": "yarn prettier.check && eslint --ext .js,.jsx,.ts,.tsx .",
+    "lint.fix": "prettier --ignore-path .eslintignore --write '**/*.{js,jsx,ts,tsx,graphql,md}'; eslint --ext .js,.jsx,.ts,.tsx . --fix",
+    "prettier.check": "prettier --ignore-path .eslintignore --check '**/*.{js,jsx,ts,tsx,md}'",
+    "release": "sl-scripts release",
+    "release.dryRun": "sl-scripts release --dry-run --debug",
+    "storybook": "start-storybook -p 9001",
+    "test": "jest",
+    "type-check": "tsc --noEmit",
+    "test.prod": "yarn lint && yarn type-check && yarn test --runInBand",
+    "test.update": "yarn test --updateSnapshot",
+    "test.watch": "yarn test --watch"
+  },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.25.0",
-    "@blueprintjs/icons": "^3.15.0",
-    "@blueprintjs/select": "^3.12.1",
-    "@fortawesome/fontawesome-common-types": "^0.2.28",
+    "@blueprintjs/core": "^3.29.0",
+    "@blueprintjs/icons": "^3.19.0",
+    "@blueprintjs/select": "^3.13.4",
+    "@fortawesome/fontawesome-common-types": "^0.2.31",
     "classnames": "^2.2.6",
     "prismjs": "^1.20.0",
     "react-input-autosize": "^2.2.2",
-    "react-scrollbars-custom": "~4.0.21",
+    "react-scrollbars-custom": "~4.0.25",
     "react-simple-code-editor": "~0.11.0",
-    "react-tabs": "^3.1.0",
+    "react-tabs": "^3.1.1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "~1.8.5",
-    "use-debounce": "^3.4.1",
+    "refractor": "^3.0.0",
+    "tslib": "^1.12.0",
+    "use-debounce": "^3.4.3",
     "yup": "^0.28.3"
   },
-  "typings": "index.d.ts"
+  "devDependencies": {
+    "@babel/core": "^7.9",
+    "@sambego/storybook-state": "^1.3",
+    "@stoplight/eslint-config": "^1.1.0",
+    "@stoplight/json": "^3.6.0",
+    "@stoplight/scripts": "^8.2.0",
+    "@stoplight/storybook-config": "2.0.5",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-info": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addon-options": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/core": "^5.3.18",
+    "@storybook/react": "^5.3.18",
+    "@storybook/theming": "^5.3.18",
+    "@types/classnames": "^2.2.10",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^25.2.1",
+    "@types/lodash": "^4.14.149",
+    "@types/node-sass": "^4.11.0",
+    "@types/prettier": "^2.0.0",
+    "@types/prismjs": "^1.16.0",
+    "@types/react": "~16.9.34",
+    "@types/react-dom": "~16.9.6",
+    "@types/react-input-autosize": "^2.0.2",
+    "@types/react-tabs": "^2.3.1",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@types/react-window": "^1.8.1",
+    "@types/refractor": "^2.8.0",
+    "@types/yup": "~0.26.35",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "autoprefixer": "^9.7.6",
+    "babel-loader": "^8.1.0",
+    "copyfiles": "^2.2.0",
+    "css-loader": "^3.5.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jest": "^23.8.2",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-simple-import-sort": "^5.0.2",
+    "jest": "^25.3.0",
+    "jest-enzyme": "^7.1.2",
+    "lodash": "^4.17.15",
+    "node-sass": "^4.13.1",
+    "postcss-cli": "^7.1.0",
+    "postcss-import": "^12.0.1",
+    "prettier": "~2.0.4",
+    "react": "~16.12.0",
+    "react-dom": "~16.12.0",
+    "resolve-url-loader": "^3.1.1",
+    "sass-inline-svg": "^1.2.3",
+    "sass-loader": "^8.0.2",
+    "tailwindcss": "~1.3.0",
+    "ts-jest": "^25.3.1",
+    "ts-loader": "^6.2.2",
+    "typescript": "3.8.3",
+    "webpack": "~4.42.1"
+  },
+  "resolutions": {
+    "shell-quote": "1.7.3",
+    "form-data": "2.5.4",
+    "cross-spawn": "6.0.6",
+    "qs": "6.5.3",
+    "semver": "5.7.2",
+    "js-yaml": "3.14.2",
+    "minimist": "1.2.8",
+    "tough-cookie": "4.1.3",
+    "property-expr": "2.0.6",
+    "merge-deep": "3.0.3",
+    "handlebars": "4.7.9",
+    "url-parse": "1.5.10",
+    "pbkdf2": "3.1.3",
+    "sha.js": "2.4.12",
+    "cipher-base": "1.0.5",
+    "elliptic": "6.6.1",
+    "eventsource": "1.1.1",
+    "ejs": "3.1.7",
+    "json-schema": "0.4.0",
+    "loader-utils": "1.4.1",
+    "@babel/traverse": "7.23.2"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release": {
+    "extends": "@stoplight/scripts/release"
+  }
 }

package/scripts/build-tailwind/postcss.config.js

@@ -0,0 +1,9 @@
+var tailwindcss = require('tailwindcss');
+
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    tailwindcss('./src/styles/tailwind/tailwind.config.js'),
+    require('autoprefixer'),
+  ],
+};

package/scripts/build-tailwind/tailwind.css

@@ -0,0 +1,10 @@
+/*
+ * THESE CLASSES ARE AUTOMATICALLY GENERATED USING THE SYLES-BUILD SCRIPT AND SHOULD NOT BE UPDATED BY HAND
+ * TO UPDATE ONE OF THESE VALUES, UPDATE THE TAILWIND.CONFIG.JS AND RUN "YARN BUILD.TW"
+ */
+
+@import 'tailwindcss/utilities';
+
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/base';

package/setupTests.ts

@@ -0,0 +1,18 @@
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.mock('lodash');
+jest.mock('lodash/debounce');
+jest.mock('react-window');
+
+window.IntersectionObserver = class implements IntersectionObserver {
+  readonly root!: Element | null;
+  readonly rootMargin!: string;
+  readonly thresholds!: ReadonlyArray<number>;
+
+  public readonly observe = jest.fn();
+  public readonly unobserve = jest.fn();
+  public readonly disconnect = jest.fn();
+  public readonly takeRecords = jest.fn();
+};

package/src/AutoSizer/index.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import VirtualizedSizer, { AutoSizerProps } from 'react-virtualized-auto-sizer';
+
+/**
+ * AUTOSIZER
+ */
+
+export const AutoSizer: React.FunctionComponent<AutoSizerProps> = props => <VirtualizedSizer {...props} />;