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

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,144 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.0.1",
-  "description": "Design System React Components",
+  "version": "1.0.2",
+  "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",
+    "src"
+  ],
+  "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",
+    "he": "1.2.0",
+    "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"
+  },
+  "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/src/__tests__/fileMock.ts

@@ -0,0 +1,6 @@
+/**
+ * This file is use to mock asset imports in TSX files, mostly
+ * used in our case to mock SVG files.
+ */
+
+module.exports = "div";

package/src/__tests__/setup.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import "@testing-library/jest-dom";
+// Import this to be able to call this jest-axe assertion for all test files:
+// expect(...).toHaveNoViolations();
+import "jest-axe/extend-expect";
+
+const { JSDOM } = require("jsdom");
+
+const jsdom = new JSDOM("<!doctype html><html><body></body></html>", {
+  url: "http://localhost",
+});
+const { window } = jsdom;
+const exposedProperties = ["window", "navigator", "document"];
+
+(global as any).window = window;
+(global as any).document = window.document;
+Object.keys((document as Document).defaultView).forEach((property) => {
+  if (typeof (global as any)[property] === "undefined") {
+    exposedProperties.push(property);
+    (global as any)[property] = (document as any).defaultView[property];
+  }
+});
+
+// We expect an error to be thrown and we do catch, but it still gets
+// logged and we don't want to see expected errors while we test.
+jest.spyOn(global.console, "error").mockImplementation(() => jest.fn());
+jest.spyOn(global.console, "warn").mockImplementation(() => jest.fn());

package/src/__tests__/utils/utils.test.ts

@@ -0,0 +1,18 @@
+import { range } from "../../utils/utils";
+
+describe("range", () => {
+  it("returns an array of values not including the stop argument", () => {
+    expect(range(1, 2)).toEqual([1]);
+    expect(range(4, 7)).toEqual([4, 5, 6]);
+    expect(range(2, 9)).toEqual([2, 3, 4, 5, 6, 7, 8]);
+  });
+
+  it("returns an array of values skipping by the step argument", () => {
+    expect(range(1, 10, 2)).toEqual([1, 3, 5, 7, 9]);
+    expect(range(4, 8, 3)).toEqual([4, 7]);
+    expect(range(2, 20, 2)).toEqual([2, 4, 6, 8, 10, 12, 14, 16, 18]);
+    expect(range(2, 20, 4)).toEqual([2, 6, 10, 14, 18]);
+    expect(range(2, 6, 2)).toEqual([2, 4]);
+    expect(range(2, 20, 5)).toEqual([2, 7, 12, 17]);
+  });
+});

package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx

@@ -0,0 +1,42 @@
+import { Meta } from "@storybook/addon-docs";
+
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta title={getCategory("Skip Navigation")} />
+
+# Skip Navigation
+
+| Table of Contents                              |
+| ---------------------------------------------- |
+| 1. [General Information](#general-information) |
+| 2. [Resources](#resources)                     |
+
+## General Information
+
+An application's "skip navigation" is used to skip to the primary or main
+content of a page. This component usually contains one link that is located at
+the top of the page and is visually hidden until a user focuses on the link.
+In the case of NYPL applications, the skip navigation contains two links; the
+first link points to the main content of the page and the second link points to
+accessibility information on [NYPL.org/accessibility](https://nypl.org/accessibility).
+For most digitial applications on the NYPL.org platform, the [NYPL Header](https://github.com/NYPL/dgx-header-component)
+is used and this component already renders a skip navigation area with links.
+
+In the Reservoir Design System (DS), the `SkipNavigation` component renders two
+links.
+
+The first link points to the `"#mainContent"` anchor which an NYPL page
+is expected to have. The `TemplateAppContainer` component renders as a `main`
+HTML element with a default `id` of `"mainContent"`. While it's possible to
+update the target of the skip link and the id of the `<main>` element, this is
+not recommended. When using the DS' `SkipNavigation` and `TemplateAppContainer`
+components, this accessibility combination is automatically handled. When not
+using the `TemplateAppContainer` component, make sure to render a `main` HTML
+element with an `id` of `"mainContent"`.
+
+The second link points to additional accessibility information on [NYPL.org/accessibility](https://nypl.org/accessibility).
+
+## Resources
+
+- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
+- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)