@nypl/design-system-react-components 1.0.1 → 1.0.3

package/dist/theme/components/toggle.d.ts

@@ -0,0 +1,93 @@
+import { ToggleSizes } from "../../components/Toggle/Toggle";
+interface ToggleBaseStyle {
+    isDisabled: boolean;
+    size: ToggleSizes;
+}
+declare const _default: {
+    Toggle: {
+        parts: string[];
+        baseStyle: ({ isDisabled, size }: ToggleBaseStyle) => {
+            label: {
+                alignItems: string;
+                display: string;
+                width: string;
+            };
+            helperErrorText: {
+                marginLeft: string;
+                fontStyle: string;
+            };
+        };
+        defaultProps: {
+            size: string;
+        };
+    };
+    Switch: {
+        baseStyle: ({ size }: {
+            size: string;
+        }) => {
+            alignItems: string;
+            opacity: number;
+            track: {
+                backgroundColor: string;
+                border: string;
+                borderColor: string;
+                p: string;
+                _checked: {
+                    bg: string;
+                    borderColor: string;
+                    opacity: number;
+                };
+                _invalid: {
+                    bg: string;
+                    borderColor: string;
+                    "> span": {
+                        bg: string;
+                    };
+                };
+                _disabled: {
+                    bg: string;
+                    borderColor: string;
+                    _checked: {
+                        opacity: number;
+                    };
+                };
+                _focus: {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    zIndex: string;
+                };
+            };
+            label: {
+                fontSize: string;
+                marginLeft: string;
+                marginTop: string;
+                _disabled: {
+                    color: string;
+                    fontStyle: string;
+                };
+            };
+            thumb: {
+                _disabled: {
+                    bg: string;
+                };
+            };
+        };
+        sizes: {
+            sm: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            lg: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        };
+        defaultProps: {
+            colorScheme: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/components/videoPlayer.d.ts

@@ -0,0 +1,40 @@
+declare const VideoPlayer: {
+    baseStyle: {
+        inside: {
+            height: string;
+            overflow: string;
+            paddingBottom: string;
+            position: string;
+        };
+        iframe: {
+            height: string;
+            left: string;
+            margin: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        helperText: {
+            marginBottom: string;
+            marginTop: string;
+        };
+    };
+    variants: {
+        fourByThree: {
+            inside: {
+                paddingBottom: string;
+            };
+        };
+        invalid: {
+            backgroundColor: string;
+            height: string;
+            padding: string;
+        };
+        square: {
+            inside: {
+                paddingBottom: string;
+            };
+        };
+    };
+};
+export default VideoPlayer;

package/dist/theme/foundations/breakpoints.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("@chakra-ui/theme-tools").Breakpoints<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+}>;
+/**
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
+ * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
+ *
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
+ *
+ * @Note Chakra provides a 2xl option while the DS does not. We don't
+ * recommend using this value until further notice.
+ */
+export default _default;

package/dist/theme/foundations/colors.d.ts

@@ -0,0 +1,3 @@
+import { Colors } from "@chakra-ui/react";
+declare const colors: Colors;
+export default colors;

package/dist/theme/foundations/global.d.ts

@@ -0,0 +1,58 @@
+/**
+ * These rules affect all the global elements on the `body` element of the
+ * page when the `DSProvider` component is used.
+ */
+declare const global: {
+    body: {
+        boxSizing: string;
+        bg: string;
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        overflowX: string;
+    };
+    a: {
+        color: string;
+    };
+    svg: {
+        display: string;
+    };
+    "button, select, input, textarea": {
+        "&:not([disabled])": {
+            _focus: {
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+        };
+    };
+    "iframe, [href], [tabindex], [contentEditable='true']": {
+        _focus: {
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+            outlineColor: string;
+            zIndex: string;
+        };
+    };
+    p: {
+        margin: string;
+        marginBottom: string;
+    };
+    ul: {
+        margin: string;
+        marginBottom: string;
+    };
+    ol: {
+        margin: string;
+        marginBottom: string;
+    };
+    "*, *::before, &::after": {
+        boxSizing: string;
+    };
+};
+export default global;

package/dist/theme/foundations/radii.d.ts

@@ -0,0 +1,6 @@
+declare const radii: {
+    checkbox: string;
+    pill: string;
+    round: string;
+};
+export default radii;

package/dist/theme/foundations/shadows.d.ts

@@ -0,0 +1,4 @@
+declare const shadows: {
+    outline: string;
+};
+export default shadows;

package/dist/theme/foundations/spacing.d.ts

@@ -0,0 +1,82 @@
+export declare const spacing: {
+    xxxs: string;
+    xxs: string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    input: {
+        group: {
+            button: {
+                hstack: string;
+                vstack: string;
+            };
+            default: {
+                hstack: string;
+                vstack: string;
+            };
+        };
+    };
+    inset: {
+        default: string;
+        extranarrow: string;
+        extrawide: string;
+        narrow: string;
+        wide: string;
+    };
+    grid: {
+        default: string;
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+    };
+    page: {
+        hstack: string;
+        vstack: string;
+    };
+    table: {
+        column: string;
+        row: string;
+    };
+    px: string;
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+};

package/dist/theme/foundations/typography.d.ts

@@ -0,0 +1,8 @@
+import { Dict } from "../types";
+declare type Typography = {
+    fonts: Dict;
+    fontSizes: Dict;
+    fontWeights: Dict;
+};
+declare const typography: Typography;
+export default typography;

package/dist/theme/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * See Chakra default theme for shape of theme object:
+ * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
+ *
+ * The following are using the default configuration from Chakra:
+ *   - z-indices
+ *   - radii
+ *   - blur
+ *   - shadows
+ *   - borders
+ *   - transitions
+ *
+ * Theme extensions exist for:
+ *   - breakpoints
+ *   - colors
+ *   - typography (font, font size, font weight)
+ *   - spacing
+ */
+declare const theme: Record<string, any>;
+export default theme;

package/dist/theme/provider.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const DSProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
+export default DSProvider;

package/dist/theme/types.d.ts

@@ -0,0 +1 @@
+export declare type Dict<T = any> = Record<string, T>;

package/dist/utils/componentCategories.d.ts

@@ -0,0 +1 @@
+export declare const getCategory: (component: string) => string;

package/dist/utils/interfaces.d.ts

@@ -0,0 +1,5 @@
+export interface AriaAttributes {
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+}

package/dist/utils/utils.d.ts

@@ -0,0 +1,31 @@
+import { HelperErrorTextType } from "../components/HelperErrorText/HelperErrorText";
+import { AriaAttributes } from "./interfaces";
+/**
+ * range
+ * Get an array of values from `start` to `stop` - 1 with an optional
+ * `step` between values.
+ */
+export declare const range: (start: number, stop: number, step?: number) => number[];
+/**
+ * Given a pagination's pageCount, this will return (1) a page number,
+ * derived from the current URL, and (2) a function that, when passed to
+ * Pagination component, makes the URL change and refreshes the page.
+ * @NOTE this is only used for Storybook documentation.
+ */
+export declare const getStorybookHrefProps: (pageCount: number) => {
+    computedCurrentPage: number;
+    getPageHref: (selectedPage: number) => string;
+};
+interface GetAriaAttrsProps {
+    footnote: HelperErrorTextType;
+    id: string;
+    labelText: HelperErrorTextType;
+    name: string;
+    showLabel: boolean;
+}
+/**
+ * Get aria-* attributes for input components. This sets the `aria-label` and
+ * `aria-describedby` attributes, based on the label and footnote values.
+ */
+export declare const getAriaAttrs: ({ footnote, id, labelText, name, showLabel, }: GetAriaAttrsProps) => AriaAttributes;
+export {};

package/package.json

@@ -1,31 +1,143 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.0.1",
-  "description": "Design System React Components",
+  "version": "1.0.3",
+  "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
-    "url": "https://github.com/NYPL/nypl-design-system/tree/development/src/react-components"
+    "url": "https://github.com/NYPL/nypl-design-system/"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/design-system-react-components.esm.js",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">10"
   },
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
   "author": "NYPL",
   "license": "Apache-2.0",
-  "scripts": {
-    "prepare": "npm run build",
-    "prepublishOnly": "npm run lint && npm run test",
-    "build": "tsc",
-    "lint": "tslint -c tslint.json 'src/**/*.ts?(x)'",
-    "test": "mocha --require lib/__tests__/*.js lib/__tests__/**/*.js",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "keywords": [],
-  "devDependencies": {
-    "tslint": "^6.0.0-beta0",
-    "typescript": "^3.6.4"
-  },
-  "gitHead": "591d619c4b7a6caebc1e8d0410067f03ed374549",
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build && npm run generate-sass-resources",
+    "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test - --watch",
+    "test:generate-output": "tsdx test --json --outputFile=.jest-test-results.json  || true",
+    "lint": "tsdx lint",
+    "prepare": "npm run build && husky install",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "generate-sass-resources": "gulp",
+    "storybook": "start-storybook -p 6006 -s ./.storybook/public",
+    "build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",
+    "prebuild:storybook": "npm run test:generate-output"
+  },
+  "lint-staged": {
+    "*.{jsx,ts,tsx}": "eslint src --ext=jsx,ts,tsx --cache --fix",
+    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "es5"
+  },
+  "size-limit": [
+    {
+      "path": "dist/design-system-react-components.cjs.production.min.js",
+      "limit": "300 KB"
+    },
+    {
+      "path": "dist/design-system-react-components.esm.js",
+      "limit": "300 KB"
+    }
+  ],
+  "dependencies": {
+    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
+    "@chakra-ui/system": ">=1.11.0 <=1.12.1",
+    "@emotion/react": ">=11.4.1",
+    "@emotion/styled": ">=11.3.0",
+    "framer-motion": "^4.1.17",
+    "react-datepicker": "4.1.1",
+    "system-font-css": "2.0.2",
+    "typescript": "4.3.5"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
+    "@chakra-ui/system": ">=1.11.0 <=1.12.1",
+    "@emotion/react": ">=11.4.1",
+    "@emotion/styled": ">=11.3.0",
+    "framer-motion": "^4.1.17",
+    "react": ">=16.13.0",
+    "react-dom": ">=16.13.0",
+    "typescript": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "7.14.6",
+    "@chakra-ui/storybook-addon": "1.0.3",
+    "@mdx-js/react": "1.6.22",
+    "@size-limit/preset-small-lib": "5.0.1",
+    "@storybook/addon-a11y": "6.4.19",
+    "@storybook/addon-actions": "6.4.19",
+    "@storybook/addon-docs": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
+    "@storybook/addon-jest": "6.4.19",
+    "@storybook/addon-links": "6.4.19",
+    "@storybook/addons": "6.4.19",
+    "@storybook/react": "6.4.19",
+    "@svgr/rollup": "5.5.0",
+    "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.2.1",
+    "@types/jest": "26.0.20",
+    "@types/jest-axe": "3.5.3",
+    "@types/jsdom": "12.2.4",
+    "@types/node": "12.7.12",
+    "@types/react": "16.14.21",
+    "@types/testing-library__jest-dom": "5.14.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "autoprefixer": "9.8.8",
+    "babel-loader": "8.2.2",
+    "breakpoint-sass": "2.7.1",
+    "css-loader": "5.2.7",
+    "cssnano": "5.0.7",
+    "eslint": "7.31.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.8.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-storybook": "^0.5.6",
+    "gulp": "4.0.2",
+    "gulp-concat": "^2.6.1",
+    "husky": "^7.0.4",
+    "import-glob-loader": "1.1.0",
+    "jest": "27.3.1",
+    "jest-axe": "5.0.1",
+    "jsdom": "15.2.1",
+    "lint-staged": "10.5.4",
+    "node-sass-glob-importer": "5.3.2",
+    "normalize.css": "8.0.1",
+    "prettier": "2.4.1",
+    "react": "17.0.2",
+    "react-autosuggest": "10.0.2",
+    "react-docgen-typescript-loader": "3.7.2",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
+    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-svg": "2.0.0",
+    "sass": "1.35.1",
+    "sass-loader": "10.0.0",
+    "semantic-release-slack-bot": "2.1.0",
+    "size-limit": "5.0.1",
+    "storybook-addon-designs": "6.2.1",
+    "style-loader": "2.0.0",
+    "ts-jest": "27.0.4",
+    "tsdx": "0.14.1",
+    "tslib": "2.3.0"
   }
 }

package/lib/components/Button/Button.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-export interface ButtonProps {
-    /** The action to perform on the <button>'s onClick function */
-    callback: (event: React.MouseEvent) => void;
-    content?: string | JSX.Element;
-    className?: string;
-    disabled?: boolean;
-    type?: string;
-    mouseDown?: boolean;
-}
-export default class Button extends React.Component<ButtonProps, {}> {
-    static defaultProps: {
-        mouseDown: boolean;
-    };
-    constructor(props: ButtonProps);
-    render(): JSX.Element;
-}

package/lib/components/Button/Button.js

@@ -1,42 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-class Button extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const _a = this.props, { content, className, type, disabled, mouseDown, callback } = _a, rest = __rest(_a, ["content", "className", "type", "disabled", "mouseDown", "callback"]);
-        let btnContent = content || "Submit";
-        let btnClassName = `button${className ? ` ${className}` : ""}`;
-        let btnProps = {
-            type: (type || "submit"),
-            className: btnClassName,
-            disabled: (disabled || null),
-        };
-        let btnCallback = mouseDown ? { onMouseDown: callback } : { onClick: callback };
-        return React.createElement("button", Object.assign(Object.assign(Object.assign({}, btnProps), btnCallback), rest), btnContent);
-    }
-}
-exports.default = Button;
-Button.defaultProps = {
-    mouseDown: false
-};

package/lib/index.d.ts

@@ -1 +0,0 @@
-export * from "./components/Button/Button";

package/lib/index.js

@@ -1,6 +0,0 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./components/Button/Button"));

package/lib/stories/0-Welcome.stories.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("@storybook/react");
-react_1.storiesOf("Home", module)
-    .add("introduction", () => React.createElement("div", null,
-    React.createElement("h2", null, "NYPL Design System React Components"),
-    React.createElement("p", null, "Welcome to the documentation for the NYPL Design System React Components")), {
-    info: {
-        disable: true
-    }
-});

package/lib/stories/1-Button.stories.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const filled: () => JSX.Element;
-export declare const outline: () => JSX.Element;