@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib-esm/utils/deprecate.js

@@ -1,6 +1,6 @@
+/* eslint-disable no-console */
 import { useRef, useCallback } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {}; // eslint-disable-next-line import/no-mutable-exports
 
 
@@ -70,8 +70,7 @@ export class Deprecations {
     message,
     version
   }) {
-    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`; // eslint-disable-next-line no-console
-
+    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`;
     console.warn(msg);
     this.get().deprecations.push({
       name,

package/lib-esm/utils/isNumeric.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function isNumeric(n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
 }

package/lib-esm/utils/iterateFocusableElements.js

@@ -98,5 +98,5 @@ export function isFocusable(elem, strict = false) {
  */
 
 export function isTabbable(elem, strict = false) {
-  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+  return isFocusable(elem, strict) && elem.getAttribute("tabindex") !== "-1";
 }

package/lib-esm/utils/test-deprecations.js

@@ -1,5 +1,5 @@
 import semver from 'semver';
-import { Deprecations } from './deprecate'; // eslint-disable-next-line @typescript-eslint/no-var-requires
+import { Deprecations } from './deprecate';
 
 const ourVersion = require('../../package.json').version;
 

package/lib-esm/utils/test-matchers.js

@@ -5,7 +5,14 @@ import { getClasses, getComputedStyles, render } from './testing';
 expect.addSnapshotSerializer(styleSheetSerializer);
 
 const stringify = d => JSON.stringify(d, null, '  ');
+/**
+ * These are props that styled-system aliases for backwards compatibility.
+ * For some reason, they don't show up in our toImplementSystemProps() matcher,
+ * so we skip over them.
+ */
 
+
+const ALIAS_PROP_TYPES = ['w', 'align', 'justify', 'wrap'];
 expect.extend({
   toMatchKeys(obj, values) {
     return {
@@ -39,12 +46,13 @@ expect.extend({
         color: 'red.5'
       }
     };
-    const elem = /*#__PURE__*/React.cloneElement(element, {
+    const elem = React.cloneElement(element, {
       sx: sxPropValue
     });
+    const rendered = render(elem);
 
     function checkStylesDeep(rendered) {
-      const className = rendered.props.className;
+      const className = rendered !== null && rendered !== void 0 && rendered.props ? rendered.props.className : '';
       const styles = getComputedStyles(className);
       const mediaStyles = styles[mediaKey];
 
@@ -58,7 +66,7 @@ expect.extend({
     }
 
     return {
-      pass: checkStylesDeep(render(elem)),
+      pass: checkStylesDeep(rendered),
       message: () => 'sx prop values did not change styles of component nor of any sub-components'
     };
   },

package/lib-esm/utils/testing.js

@@ -4,8 +4,8 @@ import renderer from 'react-test-renderer';
 import enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ThemeProvider } from '..';
-import { default as defaultTheme } from '../theme';
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+import { default as defaultTheme } from '../theme'; // eslint-disable-next-line @typescript-eslint/no-var-requires
+
 const readFile = promisify(require('fs').readFile);
 export const COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/;
 enzyme.configure({
@@ -178,6 +178,7 @@ export function unloadCSS(path) {
 
 export function behavesAsComponent({
   Component,
+  systemPropArray,
   toRender,
   options
 }) {
@@ -193,11 +194,11 @@ export function behavesAsComponent({
 
   if (!options.skipAs) {
     it('respects the as prop', () => {
-      const As = /*#__PURE__*/React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", {
+      const As = React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", {
         className: "as-component",
         ref: ref
       }));
-      const elem = /*#__PURE__*/React.cloneElement(getElement(), {
+      const elem = React.cloneElement(getElement(), {
         as: As
       });
       expect(render(elem)).toEqual(render( /*#__PURE__*/React.createElement(As, null)));
@@ -210,8 +211,7 @@ export function behavesAsComponent({
   it('renders consistently', () => {
     expect(render(getElement())).toMatchSnapshot();
   });
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+}
 export function checkExports(path, exports) {
   it('has declared exports', () => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires

package/lib-esm/utils/theme.js

@@ -14,7 +14,7 @@ function fontStack(fonts) {
 
 
 function isShadowValue(value) {
-  return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
+  return typeof value === 'string' && /(inset\s|)([0-9.empx\s]+){1,4}rgb[a]?\(.*\)/.test(value);
 }
 
 function isColorValue(value) {

package/lib-esm/utils/types.js

@@ -1 +0,0 @@
-export {};

package/lib-esm/utils/uniqueId.js

@@ -1,4 +1,3 @@
-// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
 let idSeed = 10000;
 export function uniqueId() {
   return `__primer_id_${idSeed++}`;

package/package.json

@@ -1,28 +1,29 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-20219922627",
+  "version": "0.0.0-2022530201059",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
-  "typings": "lib/index.d.ts",
-  "sideEffects": [
-    "(lib|lib-esm)/behaviors/focusZone.js",
-    "(lib|lib-esm)/behaviors/focusTrap.js"
-  ],
+  "typings": "index.d.ts",
   "scripts": {
-    "setup": "./script/setup",
-    "build": "./script/build",
-    "start": "concurrently npm:start:*",
-    "start:docs": "cd docs && npm run develop",
-    "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
-    "lint:fix": "npm run lint -- --fix",
-    "test": "jest",
-    "test:update": "npm run test -- --updateSnapshot",
-    "release": "npm run build && changeset publish",
-    "size": "size-limit"
+    "start": "cd docs && yarn run develop",
+    "dist": "concurrently yarn:dist:*",
+    "dist:rollup": "rm -rf dist && cross-env NODE_ENV=production rollup -c",
+    "dist:transpile:cjs": "rm -rf lib && cross-env BABEL_MODULE=commonjs babel src --out-dir lib --extensions '.js,.ts,.jsx,.tsx'",
+    "dist:transpile:esm": "rm -rf lib-esm && babel src --out-dir lib-esm --extensions '.js,.ts,.jsx,.tsx'",
+    "dist:types": "rm -rf types && tsc",
+    "lint": "eslint src docs/components",
+    "test": "jest -- src",
+    "update-snapshots": "jest -u -- src",
+    "watch": "jest --watch --no-coverage",
+    "playroom:start": "playroom start",
+    "playroom:build": "playroom build",
+    "build": "yarn playroom:build",
+    "release": "yarn dist && changeset publish",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
-  "repository": "primer/react",
+  "repository": "primer/components",
   "keywords": [
     "react",
     "components",
@@ -36,104 +37,94 @@
     "lib-esm",
     "index.d.ts",
     "!lib/__tests__",
-    "!lib/stories",
-    "!lib-esm/__tests__",
-    "!lib-esm/stories"
+    "!lib-esm/__tests__"
   ],
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "4.8.1",
-    "@radix-ui/react-polymorphic": "0.0.14",
-    "@react-aria/ssr": "3.1.0",
+    "@primer/octicons-react": "^11.3.0",
+    "@primer/primitives": "0.0.0-202121782215",
     "@styled-system/css": "5.1.5",
-    "@styled-system/props": "5.1.5",
+    "@styled-system/props": "5.1.4",
     "@styled-system/theme-get": "5.1.2",
     "@types/history": "4.7.8",
-    "@types/styled-components": "5.1.11",
-    "@types/styled-system": "5.1.12",
-    "@types/styled-system__css": "5.0.16",
+    "@types/styled-components": "5.1.7",
+    "@types/styled-system": "5.1.10",
+    "@types/styled-system__css": "5.0.14",
     "@types/styled-system__theme-get": "5.0.1",
-    "classnames": "2.3.1",
-    "date-fns": "2.25.0",
+    "classnames": "^2.2.5",
     "deepmerge": "4.2.2",
-    "focus-visible": "5.2.0",
-    "styled-system": "5.1.5"
+    "polished": "3.5.2",
+    "react-is": "16.10.2",
+    "styled-system": "5.1.2"
   },
   "devDependencies": {
-    "@babel/cli": "7.14.5",
-    "@babel/core": "7.14.8",
-    "@babel/eslint-parser": "7.15.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
-    "@babel/plugin-proposal-optional-chaining": "7.14.5",
-    "@babel/plugin-transform-modules-commonjs": "7.14.5",
-    "@babel/preset-react": "7.14.5",
-    "@babel/preset-typescript": "7.15.0",
-    "@changesets/changelog-github": "0.4.0",
-    "@changesets/cli": "2.17.0",
+    "@babel/cli": "7.8.4",
+    "@babel/core": "7.9.0",
+    "@babel/eslint-parser": "7.12.1",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
+    "@babel/plugin-proposal-optional-chaining": "7.12.16",
+    "@babel/plugin-transform-modules-commonjs": "7.12.1",
+    "@babel/preset-react": "7.9.4",
+    "@babel/preset-typescript": "7.12.7",
+    "@changesets/changelog-github": "0.2.8",
+    "@changesets/cli": "2.13.0",
     "@github/prettier-config": "0.0.4",
-    "@rollup/plugin-commonjs": "19.0.2",
-    "@rollup/plugin-node-resolve": "13.0.5",
-    "@size-limit/preset-big-lib": "5.0.2",
-    "@storybook/addon-a11y": "6.3.4",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "6.3.8",
-    "@testing-library/dom": "7.31.2",
-    "@testing-library/react": "11.2.7",
-    "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.1.9",
+    "@rollup/plugin-commonjs": "16.0.0",
+    "@rollup/plugin-node-resolve": "7.1.3",
+    "@storybook/addon-actions": "^6.1.17",
+    "@storybook/addon-essentials": "^6.1.17",
+    "@storybook/addon-links": "^6.1.17",
+    "@storybook/react": "^6.1.17",
+    "@testing-library/dom": "7.29.0",
+    "@testing-library/react": "11.2.2",
+    "@testing-library/react-hooks": "5.0.3",
+    "@testing-library/user-event": "13.0.6",
     "@types/chroma-js": "2.1.3",
-    "@types/enzyme": "3.10.9",
-    "@types/jest": "26.0.23",
-    "@types/jest-axe": "3.5.3",
+    "@types/enzyme": "3.10.8",
+    "@types/jest": "26.0.20",
+    "@types/jest-axe": "3.5.1",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
-    "@typescript-eslint/eslint-plugin": "4.31.2",
-    "@typescript-eslint/parser": "4.26.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
+    "@typescript-eslint/eslint-plugin": "4.14.1",
+    "@typescript-eslint/parser": "4.14.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.3.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-react-displayname": "0.0.5",
-    "babel-plugin-macros": "3.1.0",
+    "babel-plugin-macros": "2.8.0",
     "babel-plugin-preval": "5.0.0",
-    "babel-plugin-styled-components": "1.12.0",
+    "babel-plugin-styled-components": "1.10.7",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
-    "chroma-js": "2.1.2",
-    "concurrently": "6.2.1",
-    "copyfiles": "2.4.1",
-    "cross-env": "7.0.3",
-    "enzyme": "3.11.0",
-    "eslint": "7.28.0",
-    "eslint-plugin-github": "4.1.3",
-    "eslint-plugin-jest": "24.3.6",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-mdx": "1.15.1",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.5.0",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "jest": "27.0.4",
-    "jest-axe": "5.0.1",
-    "jest-styled-components": "6.3.4",
-    "jscodeshift": "0.13.0",
+    "chroma-js": "2.1.0",
+    "concurrently": "5.3.0",
+    "cross-env": "7.0.2",
+    "enzyme": "3.10.0",
+    "eslint": "6.5.1",
+    "eslint-plugin-github": "4.1.1",
+    "eslint-plugin-jest": "22.20.0",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react-hooks": "3.0.0",
+    "jest": "26.6.3",
+    "jest-axe": "4.1.0",
+    "jest-styled-components": "6.3.3",
+    "jscodeshift": "0.6.4",
     "lodash.isempty": "4.4.0",
     "lodash.isobject": "3.0.2",
-    "prettier": "2.3.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-test-renderer": "17.0.2",
-    "rollup": "2.56.3",
+    "playroom": "0.15.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-test-renderer": "16.10.2",
+    "rollup": "2.33.1",
     "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.5.0",
-    "semver": "7.3.5",
-    "size-limit": "5.0.2",
+    "rollup-plugin-terser": "5.3.0",
+    "rollup-plugin-visualizer": "4.0.4",
+    "semver": "7.3.2",
     "styled-components": "4.4.1",
-    "typescript": "4.2.2"
+    "typescript": "4.1.3"
   },
   "peerDependencies": {
     "react": "^17.0.0",
@@ -141,16 +132,17 @@
     "styled-components": "4.x || 5.x"
   },
   "prettier": "@github/prettier-config",
-  "size-limit": [
-    {
-      "path": "dist/browser.esm.js",
-      "webpack": false,
-      "running": false
-    },
-    {
-      "path": "dist/browser.umd.js",
-      "webpack": false,
-      "running": false
-    }
-  ]
+  "actionBundlesize": {
+    "build": "yarn && yarn dist:rollup",
+    "files": [
+      {
+        "path": "dist/browser.esm.js",
+        "name": "ESM Build"
+      },
+      {
+        "path": "dist/browser.umd.js",
+        "name": "UMD Build"
+      }
+    ]
+  }
 }

package/codemods/__tests__/deprecateUtilityComponents.js

@@ -1,200 +0,0 @@
-import {defineInlineTest} from 'jscodeshift/dist/testUtils'
-import deprecateUtilityComponents from '../deprecateUtilityComponents'
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Flex} from '@primer/components'
-export default () => (
-  <Flex>
-    <div />
-  </Flex>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box display="flex">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Grid} from '@primer/components'
-export default () => (
-  <Grid>
-    <div />
-  </Grid>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box display="grid">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Position} from '@primer/components'
-export default () => (
-  <Position>
-    <div />
-  </Position>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box>
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Absolute} from '@primer/components'
-export default () => (
-  <Absolute>
-    <div />
-  </Absolute>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box position="absolute">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Relative} from '@primer/components'
-export default () => (
-  <Relative>
-    <div />
-  </Relative>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box position="relative">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Fixed} from '@primer/components'
-export default () => (
-  <Fixed>
-    <div />
-  </Fixed>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box position="fixed">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Sticky} from '@primer/components'
-export default () => (
-  <Sticky>
-    <div />
-  </Sticky>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box position="sticky">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {BorderBox} from '@primer/components'
-export default () => (
-  <BorderBox borderColor="border.secondary" borderRadius={1}>
-    <div />
-  </BorderBox>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box borderColor="border.secondary" borderRadius={1} borderWidth="1px" borderStyle="solid">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)
-
-defineInlineTest(
-  deprecateUtilityComponents,
-  {},
-  `
-import {Flex} from '@primer/components'
-export default () => (
-  <Flex p={2} m={1}>
-    <div />
-  </Flex>
-)
-`.trim(),
-  `
-import {Box} from '@primer/components'
-export default () => (
-  <Box p={2} m={1} display="flex">
-    <div />
-  </Box>
-)
-`.trim(),
-  'deprecateUtilityComponents'
-)