@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/utils/deprecate.jsx

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Deprecations = exports.useDeprecation = exports.deprecate = void 0;
-const react_1 = require("react");
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => { };
-// eslint-disable-next-line import/no-mutable-exports
-let deprecate = noop;
-exports.deprecate = deprecate;
-if (__DEV__) {
-    exports.deprecate = deprecate = ({ name, message, version }) => {
-        Deprecations.deprecate({ name, message, version });
-    };
-}
-// eslint-disable-next-line import/no-mutable-exports
-let useDeprecation = null;
-exports.useDeprecation = useDeprecation;
-if (__DEV__) {
-    exports.useDeprecation = useDeprecation = ({ name, message, version }) => {
-        const ref = react_1.useRef(false);
-        const logDeprecation = react_1.useCallback(() => {
-            if (!ref.current) {
-                ref.current = true;
-                deprecate({ name, message, version });
-            }
-        }, [name, message, version]);
-        return logDeprecation;
-    };
-}
-else {
-    exports.useDeprecation = useDeprecation = () => {
-        return noop;
-    };
-}
-class Deprecations {
-    constructor() {
-        this.deprecations = [];
-    }
-    static get() {
-        if (!Deprecations.instance) {
-            Deprecations.instance = new Deprecations();
-        }
-        return Deprecations.instance;
-    }
-    static deprecate({ name, message, version }) {
-        const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`;
-        // eslint-disable-next-line no-console
-        console.warn(msg);
-        this.get().deprecations.push({ name, message, version });
-    }
-    static getDeprecations() {
-        return this.get().deprecations;
-    }
-    static clearDeprecations() {
-        this.get().deprecations.length = 0;
-    }
-}
-exports.Deprecations = Deprecations;
-Deprecations.instance = null;

package/lib/utils/isNumeric.jsx

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function isNumeric(n) {
-    return !isNaN(parseFloat(n)) && isFinite(n);
-}
-exports.default = isNumeric;

package/lib/utils/ssr.jsx

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSSRSafeId = exports.SSRProvider = void 0;
-var ssr_1 = require("@react-aria/ssr");
-Object.defineProperty(exports, "SSRProvider", { enumerable: true, get: function () { return ssr_1.SSRProvider; } });
-Object.defineProperty(exports, "useSSRSafeId", { enumerable: true, get: function () { return ssr_1.useSSRSafeId; } });

package/lib/utils/test-deprecations.jsx

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const semver_1 = __importDefault(require("semver"));
-const deprecate_1 = require("./deprecate");
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const ourVersion = require('../../package.json').version;
-beforeEach(() => {
-    deprecate_1.Deprecations.clearDeprecations();
-});
-afterEach(() => {
-    const deprecations = deprecate_1.Deprecations.getDeprecations();
-    for (const dep of deprecations) {
-        if (semver_1.default.gte(ourVersion, dep.version)) {
-            throw new Error(`Found a deprecation that should be removed in ${dep.version}`);
-        }
-    }
-});

package/lib/utils/test-helpers.jsx

@@ -1,8 +0,0 @@
-"use strict";
-// JSDOM doesn't mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => {
-    return {
-        observe: jest.fn(),
-        disconnect: jest.fn()
-    };
-});

package/lib/utils/test-matchers.jsx

@@ -1,100 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-require("jest-styled-components");
-const serializer_1 = require("jest-styled-components/serializer");
-const react_1 = __importDefault(require("react"));
-const testing_1 = require("./testing");
-expect.addSnapshotSerializer(serializer_1.styleSheetSerializer);
-const stringify = (d) => JSON.stringify(d, null, '  ');
-expect.extend({
-    toMatchKeys(obj, values) {
-        return {
-            pass: Object.keys(values).every(key => this.equals(obj[key], values[key])),
-            message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}`
-        };
-    },
-    toHaveClass(node, klass) {
-        const classes = testing_1.getClasses(node);
-        const pass = classes.includes(klass);
-        return {
-            pass,
-            message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}`
-        };
-    },
-    toHaveClasses(node, klasses, only = false) {
-        const classes = testing_1.getClasses(node);
-        const pass = only
-            ? this.equals(classes.sort(), klasses.sort())
-            : klasses.every((klass) => classes.includes(klass));
-        return {
-            pass,
-            message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}`
-        };
-    },
-    toImplementSxBehavior(element) {
-        const mediaKey = '@media (max-width:123px)';
-        const sxPropValue = {
-            [mediaKey]: {
-                color: 'red.5'
-            }
-        };
-        const elem = react_1.default.cloneElement(element, { sx: sxPropValue });
-        function checkStylesDeep(rendered) {
-            const className = rendered.props.className;
-            const styles = testing_1.getComputedStyles(className);
-            const mediaStyles = styles[mediaKey];
-            if (mediaStyles && mediaStyles.color) {
-                return true;
-            }
-            else if (rendered.children) {
-                return rendered.children.some((child) => checkStylesDeep(child));
-            }
-            else {
-                return false;
-            }
-        }
-        return {
-            pass: checkStylesDeep(testing_1.render(elem)),
-            message: () => 'sx prop values did not change styles of component nor of any sub-components'
-        };
-    },
-    toSetExports(mod, expectedExports) {
-        if (!Object.keys(expectedExports).includes('default')) {
-            return {
-                pass: false,
-                message: () => "You must specify the module's default export"
-            };
-        }
-        const seen = new Set();
-        for (const exp of Object.keys(expectedExports)) {
-            seen.add(exp);
-            if (mod[exp] !== expectedExports[exp]) {
-                if (!mod[exp] && !expectedExports[exp]) {
-                    continue;
-                }
-                return {
-                    pass: false,
-                    message: () => `Module exported a different value from key '${exp}' than expected`
-                };
-            }
-        }
-        for (const exp of Object.keys(mod)) {
-            if (seen.has(exp)) {
-                continue;
-            }
-            if (mod[exp] !== expectedExports[exp]) {
-                return {
-                    pass: false,
-                    message: () => `Module exported an unexpected value from key '${exp}'`
-                };
-            }
-        }
-        return {
-            pass: true,
-            message: () => ''
-        };
-    }
-});

package/lib/utils/testing.jsx

@@ -1,206 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkExports = exports.behavesAsComponent = exports.unloadCSS = exports.loadCSS = exports.getClasses = exports.getClassName = exports.getProps = exports.getComputedStyles = exports.renderStyles = exports.percent = exports.px = exports.rendersClass = exports.renderClasses = exports.renderRoot = exports.render = exports.mount = exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
-const react_1 = __importDefault(require("react"));
-const util_1 = require("util");
-const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
-const enzyme_1 = __importDefault(require("enzyme"));
-const enzyme_adapter_react_17_1 = __importDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
-const __1 = require("..");
-const theme_1 = __importDefault(require("../theme"));
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const readFile = util_1.promisify(require('fs').readFile);
-exports.COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/;
-enzyme_1.default.configure({ adapter: new enzyme_adapter_react_17_1.default() });
-function mount(component) {
-    return enzyme_1.default.mount(component);
-}
-exports.mount = mount;
-/**
- * Render the component (a React.createElement() or JSX expression)
- * into its intermediate object representation with 'type',
- * 'props', and 'children' keys
- *
- * The returned object can be matched with expect().toEqual(), e.g.
- *
- * ```js
- * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
- * ```
- */
-function render(component, theme = theme_1.default) {
-    return react_test_renderer_1.default
-        .create(<__1.ThemeProvider theme={theme}>{component}</__1.ThemeProvider>)
-        .toJSON();
-}
-exports.render = render;
-/**
- * Render the component (a React.createElement() or JSX expression)
- * using react-test-renderer and return the root node
- * ```
- */
-function renderRoot(component) {
-    return react_test_renderer_1.default.create(component).root;
-}
-exports.renderRoot = renderRoot;
-/**
- * Get the HTML class names rendered by the component instance
- * as an array.
- *
- * ```js
- * expect(renderClasses(<div className='a b' />))
- *   .toEqual(['a', 'b'])
- * ```
- */
-function renderClasses(component) {
-    const { props: { className } } = render(component);
-    return className ? className.trim().split(' ') : [];
-}
-exports.renderClasses = renderClasses;
-/**
- * Returns true if a node renders with a single class.
- */
-function rendersClass(node, klass) {
-    return renderClasses(node).includes(klass);
-}
-exports.rendersClass = rendersClass;
-function px(value) {
-    return typeof value === 'number' ? `${value}px` : value;
-}
-exports.px = px;
-function percent(value) {
-    return typeof value === 'number' ? `${value}%` : value;
-}
-exports.percent = percent;
-function renderStyles(node) {
-    const { props: { className } } = render(node);
-    return getComputedStyles(className);
-}
-exports.renderStyles = renderStyles;
-function getComputedStyles(className) {
-    const div = document.createElement('div');
-    div.className = 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 instanceof CSSMediaRule) {
-                readMedia(rule);
-            }
-            else if (rule instanceof CSSStyleRule) {
-                readRule(rule, computed);
-            }
-            else {
-                // console.warn('rule.type =', rule.type)
-            }
-        }
-    }
-    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 { style } = rule;
-            for (let i = 0; i < style.length; i++) {
-                const prop = style[i];
-                dest[prop] = style.getPropertyValue(prop);
-            }
-        }
-        else {
-            // console.warn('no match:', rule.selectorText)
-        }
-    }
-    function readMedia(mediaRule) {
-        const key = `@media ${mediaRule.media[0]}`;
-        // const dest = computed[key] || (computed[key] = {})
-        const dest = {};
-        for (const rule of mediaRule.cssRules) {
-            if (rule instanceof CSSStyleRule) {
-                readRule(rule, dest);
-            }
-        }
-        // Don't add media rule to computed styles
-        // if no styles were actually applied
-        if (Object.keys(dest).length > 0) {
-            computed[key] = dest;
-        }
-    }
-}
-exports.getComputedStyles = getComputedStyles;
-/**
- * This provides a layer of compatibility between the render() function from
- * react-test-renderer and Enzyme's mount()
- */
-function getProps(node) {
-    return typeof node.props === 'function' ? node.props() : node.props;
-}
-exports.getProps = getProps;
-function getClassName(node) {
-    return getProps(node).className;
-}
-exports.getClassName = getClassName;
-function getClasses(node) {
-    const className = getClassName(node);
-    return className ? className.trim().split(/ +/) : [];
-}
-exports.getClasses = getClasses;
-async function loadCSS(path) {
-    const css = await readFile(require.resolve(path), 'utf8');
-    const style = document.createElement('style');
-    style.setAttribute('data-path', path);
-    style.textContent = css;
-    document.head.appendChild(style);
-    return style;
-}
-exports.loadCSS = loadCSS;
-function unloadCSS(path) {
-    const style = document.querySelector(`style[data-path="${path}"]`);
-    if (style) {
-        style.remove();
-        return true;
-    }
-}
-exports.unloadCSS = unloadCSS;
-function behavesAsComponent({ Component, toRender, options }) {
-    options = options || {};
-    const getElement = () => (toRender ? toRender() : <Component />);
-    if (!options.skipSx) {
-        it('implements sx prop behavior', () => {
-            expect(getElement()).toImplementSxBehavior();
-        });
-    }
-    if (!options.skipAs) {
-        it('respects the as prop', () => {
-            const As = react_1.default.forwardRef((_props, ref) => <div className="as-component" ref={ref}/>);
-            const elem = react_1.default.cloneElement(getElement(), { as: As });
-            expect(render(elem)).toEqual(render(<As />));
-        });
-    }
-    it('sets a valid displayName', () => {
-        expect(Component.displayName).toMatch(exports.COMPONENT_DISPLAY_NAME_REGEX);
-    });
-    it('renders consistently', () => {
-        expect(render(getElement())).toMatchSnapshot();
-    });
-}
-exports.behavesAsComponent = behavesAsComponent;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-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);
-    });
-}
-exports.checkExports = checkExports;

package/lib-esm/EmojiPicker/EmojiPicker.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface EmojiPickerProps {
-    onSelect?: (emoji: string) => void;
-}
-export interface Emoji {
-    name: string;
-    emoji: string;
-}
-export interface EmojiCategory {
-    id: number;
-    name: string;
-    emojis: Array<Emoji>;
-}
-declare const EmojiPicker: ({ onSelect }: EmojiPickerProps) => JSX.Element;
-export default EmojiPicker;

package/lib-esm/EmojiPicker/EmojiPicker.js

@@ -1,184 +0,0 @@
-import { ClockIcon, GlobeIcon, HeartIcon, ImageIcon, LightBulbIcon, LocationIcon, MarkGithubIcon, OrganizationIcon, SmileyIcon, SquirrelIcon } from '@primer/octicons-react';
-import React, { useEffect, useRef, useState } from 'react';
-import { Box, Button, ButtonInvisible, StyledOcticon, Text, TextInput } from '..';
-import { AnchoredOverlay } from '../AnchoredOverlay';
-import emojis from './data';
-import styled from 'styled-components';
-import { get } from 'styled-system';
-const githubEmojis = [];
-const CategoryButton = styled(ButtonInvisible).withConfig({
-  displayName: "EmojiPicker__CategoryButton",
-  componentId: "sc-13xkiny-0"
-})(["color:", ";padding:8px;flex:1;"], get('colors.fg.muted'));
-
-const EmojiPicker = ({
-  onSelect
-}) => {
-  const emojiAnchor = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [frequentEmojis, setFrequentEmojis] = useState([]);
-  useEffect(() => {
-    if (isOpen) {
-      var _localStorage$getItem;
-
-      const lsEmojis = JSON.parse((_localStorage$getItem = localStorage.getItem('frequentEmojis')) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '[]');
-
-      if (lsEmojis) {
-        setFrequentEmojis(lsEmojis);
-      }
-    }
-  }, [isOpen]);
-
-  const onEmojiClick = emoji => {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(emoji.emoji);
-    setIsOpen(false);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    ref: emojiAnchor,
-    onClick: () => setIsOpen(!isOpen)
-  }, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: SmileyIcon
-  })), /*#__PURE__*/React.createElement(AnchoredOverlay, {
-    anchorRef: emojiAnchor,
-    renderAnchor: null,
-    open: isOpen,
-    height: 'large',
-    width: 'medium'
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      flex: 1,
-      flexDirection: 'column',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      flex: 1,
-      flexDirection: 'row',
-      width: '100%'
-    }
-  }, frequentEmojis.length > 0 && /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: ClockIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: MarkGithubIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: SmileyIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: SquirrelIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: ImageIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: GlobeIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: OrganizationIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: LightBulbIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: HeartIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/React.createElement(CategoryButton, null, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: LocationIcon,
-    color: "fg.muted"
-  }))), /*#__PURE__*/React.createElement(TextInput, {
-    block: true,
-    width: "auto",
-    color: "fg.default"
-  }), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      overflow: 'auto',
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      height: '100%',
-      p: 2
-    }
-  }, frequentEmojis.length > 0 && /*#__PURE__*/React.createElement(Box, {
-    key: "frequently-used"
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: 1,
-      color: 'fg.muted'
-    }
-  }, "Frequently Used"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      width: '100%'
-    }
-  }, frequentEmojis.map(emoji => /*#__PURE__*/React.createElement(Text, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1
-    }
-  }, emoji.emoji)))), /*#__PURE__*/React.createElement(Box, {
-    key: "github"
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: 1,
-      color: 'fg.muted'
-    }
-  }, "Github"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      width: '100%'
-    }
-  }, githubEmojis.map(emoji => /*#__PURE__*/React.createElement(ButtonInvisible, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1,
-      color: 'fg.muted'
-    },
-    onClick: () => onEmojiClick(emoji)
-  }, /*#__PURE__*/React.createElement(Text, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1
-    }
-  }, emoji.emoji))))), emojis.map(category => /*#__PURE__*/React.createElement(Box, {
-    key: category.id
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: 0,
-      color: 'fg.muted'
-    }
-  }, category.name), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      width: '100%'
-    }
-  }, category.emojis.map(emoji => /*#__PURE__*/React.createElement(ButtonInvisible, {
-    key: `emoji-${emoji.emoji}`,
-    sx: {
-      p: '10px',
-      borderRadius: 'radii.3',
-      flex: 1,
-      color: 'fg.muted'
-    },
-    onClick: () => onEmojiClick(emoji)
-  }, /*#__PURE__*/React.createElement(Text, {
-    key: `emoji-${emoji.emoji}`
-  }, emoji.emoji))))))))));
-};
-
-export default EmojiPicker;

package/lib-esm/EmojiPicker/EmojiPickerPanel.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const EmojiPickerPanel: () => JSX.Element;
-export default EmojiPickerPanel;

package/lib-esm/EmojiPicker/EmojiPickerPanel.js

@@ -1,8 +0,0 @@
-import React from 'react';
-
-const EmojiPickerPanel = () => {
-  return /*#__PURE__*/React.createElement("div", null);
-};
-
-EmojiPickerPanel.displayName = "EmojiPickerPanel";
-export default EmojiPickerPanel;

package/lib-esm/EmojiPicker/data.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    id: number;
-    name: string;
-    emojis: {
-        name: string;
-        emoji: string;
-    }[];
-}[];
-export default _default;