@primer/components 0.0.0-202111023745 → 0.0.0-20211111716

package/lib-esm/utils/testing.js

@@ -3,8 +3,11 @@ import { promisify } from 'util';
 import renderer from 'react-test-renderer';
 import enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { ThemeProvider } from 'styled-components';
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { ThemeProvider } from '..';
 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({
@@ -13,6 +16,7 @@ enzyme.configure({
 export function mount(component) {
   return enzyme.mount(component);
 }
+
 /**
  * Render the component (a React.createElement() or JSX expression)
  * into its intermediate object representation with 'type',
@@ -24,9 +28,10 @@ export function mount(component) {
  * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
  * ```
  */
-
-export function render(component) {
-  return renderer.create(component).toJSON();
+export function render(component, theme = defaultTheme) {
+  return renderer.create( /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, component)).toJSON();
 }
 /**
  * Render the component (a React.createElement() or JSX expression)
@@ -62,11 +67,6 @@ export function renderClasses(component) {
 export function rendersClass(node, klass) {
   return renderClasses(node).includes(klass);
 }
-export function renderWithTheme(node, theme = defaultTheme) {
-  return render( /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, node));
-}
 export function px(value) {
   return typeof value === 'number' ? `${value}px` : value;
 }
@@ -87,11 +87,12 @@ export function getComputedStyles(className) {
   const computed = {};
 
   for (const sheet of document.styleSheets) {
+    // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule
     for (const rule of sheet.cssRules) {
-      if (rule.type === 1) {
-        readRule(rule, computed);
-      } else if (rule.type === 4) {
+      if (rule instanceof CSSMediaRule) {
         readMedia(rule);
+      } else if (rule instanceof CSSStyleRule) {
+        readRule(rule, computed);
       } else {// console.warn('rule.type =', rule.type)
       }
     }
@@ -99,6 +100,18 @@ export function getComputedStyles(className) {
 
   return computed;
 
+  function matchesSafe(node, selector) {
+    if (!selector) {
+      return false;
+    }
+
+    try {
+      return node.matches(selector);
+    } catch (error) {
+      return false;
+    }
+  }
+
   function readRule(rule, dest) {
     if (matchesSafe(div, rule.selectorText)) {
       const {
@@ -119,7 +132,9 @@ export function getComputedStyles(className) {
     const dest = {};
 
     for (const rule of mediaRule.cssRules) {
-      readRule(rule, dest);
+      if (rule instanceof CSSStyleRule) {
+        readRule(rule, dest);
+      }
     } // Don't add media rule to computed styles
     // if no styles were actually applied
 
@@ -128,18 +143,6 @@ export function getComputedStyles(className) {
       computed[key] = dest;
     }
   }
-
-  function matchesSafe(node, selector) {
-    if (!selector) {
-      return false;
-    }
-
-    try {
-      return node.matches(selector);
-    } catch (error) {
-      return false;
-    }
-  }
 }
 /**
  * This provides a layer of compatibility between the render() function from
@@ -175,26 +178,16 @@ export function unloadCSS(path) {
 // to render without errors, you can pass a `toRender` function that
 // returns an element ready to be rendered.
 
-export function behavesAsComponent(Component, systemPropArray, toRender = null, options) {
-  if (typeof toRender === 'object' && !options) {
-    options = toRender;
-    toRender = null;
-  }
-
+export function behavesAsComponent({
+  Component,
+  toRender,
+  options
+}) {
   options = options || {};
 
   const getElement = () => toRender ? toRender() : /*#__PURE__*/React.createElement(Component, null);
 
-  it('implements system props', () => {
-    for (const systemProps of systemPropArray) {
-      expect(Component).toImplementSystemProps(systemProps);
-    }
-  });
-
   if (!options.skipSx) {
-    it('implements the sx prop', () => {
-      expect(Component).toImplementSxProp();
-    });
     it('implements sx prop behavior', () => {
       expect(getElement()).toImplementSxBehavior();
     });
@@ -202,11 +195,11 @@ export function behavesAsComponent(Component, systemPropArray, toRender = null,
 
   if (!options.skipAs) {
     it('respects the as prop', () => {
-      const As = React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", {
+      const As = /*#__PURE__*/React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", {
         className: "as-component",
         ref: ref
       }));
-      const elem = React.cloneElement(getElement(), {
+      const elem = /*#__PURE__*/React.cloneElement(getElement(), {
         as: As
       });
       expect(render(elem)).toEqual(render( /*#__PURE__*/React.createElement(As, null)));
@@ -216,17 +209,38 @@ export function behavesAsComponent(Component, systemPropArray, toRender = null,
   it('sets a valid displayName', () => {
     expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX);
   });
-  it('sets the default theme', () => {
-    expect(getElement()).toSetDefaultTheme();
-  });
   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
     const mod = require(`../${path}`);
 
     expect(mod).toSetExports(exports);
   });
+}
+expect.extend(toHaveNoViolations);
+export function checkStoriesForAxeViolations(name) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+
+
+  const {
+    default: _meta,
+    ...Stories
+  } = stories;
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return;
+    it(`story ${Story.storyName} should have no axe violations`, async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Story, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+  });
 }

package/lib-esm/utils/theme.d.ts

@@ -0,0 +1,9 @@
+export function fontStack(fonts: any): any;
+export function isShadowValue(value: any): boolean;
+export function isColorValue(value: any): boolean;
+export function filterObject(obj: any, predicate: any): {};
+export function partitionColors(colors: any): {
+    colors: {};
+    shadows: {};
+};
+export function omitScale(obj: any): any;

package/lib-esm/utils/theme.js

@@ -0,0 +1,66 @@
+// Utility functions used in theme-preval.js
+// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+const isEmpty = require('lodash.isempty');
+
+const isObject = require('lodash.isobject');
+
+const chroma = require('chroma-js');
+
+function fontStack(fonts) {
+  return fonts.map(font => font.includes(' ') ? `"${font}"` : font).join(', ');
+} // The following functions are a temporary measure for splitting shadow values out from the colors object.
+// Eventually, we will push these structural changes upstream to primer/primitives so this data manipulation
+// will not be needed.
+
+
+function isShadowValue(value) {
+  return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
+}
+
+function isColorValue(value) {
+  return chroma.valid(value);
+}
+
+function filterObject(obj, predicate) {
+  if (Array.isArray(obj)) {
+    return obj.filter(predicate);
+  }
+
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (isObject(value)) {
+      const result = filterObject(value, predicate); // Don't include empty objects or arrays
+
+      if (!isEmpty(result)) {
+        acc[key] = result;
+      }
+    } else if (predicate(value)) {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {});
+}
+
+function partitionColors(colors) {
+  return {
+    colors: filterObject(colors, value => isColorValue(value)),
+    shadows: filterObject(colors, value => isShadowValue(value))
+  };
+}
+
+function omitScale(obj) {
+  const {
+    scale,
+    ...rest
+  } = obj;
+  return rest;
+}
+
+module.exports = {
+  fontStack,
+  isShadowValue,
+  isColorValue,
+  filterObject,
+  partitionColors,
+  omitScale
+};

package/lib-esm/utils/types/AriaRole.d.ts

@@ -0,0 +1 @@
+export declare type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox ' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';

package/lib-esm/utils/types/AriaRole.js

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

package/lib-esm/utils/types/ComponentProps.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export declare type ComponentProps<T> = T extends React.ComponentType<infer Props> ? Props extends object ? Props : never : never;

package/lib-esm/utils/types/ComponentProps.js

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

package/lib-esm/utils/types/Flatten.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Contruct a type describing the items in `T`, if `T` is an array.
+ */
+export declare type Flatten<T extends unknown> = T extends (infer U)[] ? U : never;

package/lib-esm/utils/types/Flatten.js

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

package/lib-esm/utils/types/KeyPaths.d.ts

@@ -0,0 +1,3 @@
+export declare type KeyPaths<O extends Record<string, unknown>> = {
+    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
+}[keyof O];

package/lib-esm/utils/types/KeyPaths.js

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

package/lib-esm/utils/types/MandateProps.d.ts

@@ -0,0 +1,3 @@
+export declare type MandateProps<T extends unknown, K extends keyof T> = Omit<T, K> & {
+    [MK in K]-?: NonNullable<T[MK]>;
+};

package/lib-esm/utils/types/MandateProps.js

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

package/lib-esm/utils/types/Merge.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Given two object types A and B, return a type with all the properties of A that aren't also
+ * properties of B, and all the properties of B.
+ *
+ * Useful when we have a component that spreads a "rest" of its props on a subcomponent:
+ *
+ * ```ts
+ * interface OwnProps {
+ *  foo: string
+ * }
+ *
+ * type MyComponentProps = Merge<SubcomponentProps, OwnProps>
+ * const MyComponent = ({foo, ...rest}: MyComponentProps) => {
+ *   // ...
+ *   return <SubComponent {...rest} />
+ * }
+ * ```
+ */
+export declare type Merge<A = {}, B = {}> = Omit<A, keyof B> & B;

package/lib-esm/utils/types/Merge.js

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

package/lib-esm/utils/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AriaRole';
+export * from './ComponentProps';
+export * from './Flatten';
+export * from './Merge';
+export * from './MandateProps';

package/lib-esm/utils/types/index.js

@@ -0,0 +1,5 @@
+export * from './AriaRole';
+export * from './ComponentProps';
+export * from './Flatten';
+export * from './Merge';
+export * from './MandateProps';

package/lib-esm/utils/uniqueId.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(): string;

package/lib-esm/utils/uniqueId.js

@@ -0,0 +1,5 @@
+// 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/lib-esm/utils/use-force-update.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/lib-esm/utils/use-force-update.js

@@ -0,0 +1,6 @@
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+import React from 'react';
+export const useForceUpdate = () => {
+  const [, rerender] = React.useState({});
+  return React.useCallback(() => rerender({}), []);
+};

package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

package/lib-esm/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

package/lib-esm/utils/userAgent.d.ts

@@ -0,0 +1 @@
+export declare function isMacOS(): boolean;

package/lib-esm/utils/userAgent.js

@@ -0,0 +1,8 @@
+let isMac = undefined;
+export function isMacOS() {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform);
+  }
+
+  return isMac;
+}