@ilo-org/react 0.0.18 → 0.1.0

package/package.json

@@ -1,20 +1,7 @@
 {
   "name": "@ilo-org/react",
+  "version": "0.1.0",
   "description": "React components for the ILO's Design System",
-  "version": "0.0.18",
-  "author": "@justintemps",
-  "license": "Apache-2.0",
-  "main": "lib/index.js",
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "lib/index.esm.js",
-  "types": "lib/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/international-labour-organization/designsystem.git",
-    "directory": "packages/react"
-  },
   "keywords": [
     "ui_patterns",
     "prototyping",
@@ -22,94 +9,145 @@
     "designsystem",
     "components"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/international-labour-organization/designsystem.git",
+    "directory": "packages/react"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/types/react/src/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "default": "./lib/cjs/index.js"
+    },
+    "./components/*": {
+      "import": "./lib/esm/components/*/index.js",
+      "require": "./lib/cjs/components/*/index.js",
+      "types": "./lib/types/react/src/components/*/index.d.ts"
+    },
+    "./hooks/*": {
+      "import": "./lib/esm/hooks/*.js",
+      "require": "./lib/cjs/hooks/*.js",
+      "types": "./lib/types/react/src/hooks/index.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "components": [
+        "./lib/types/react/src/components/index.d.ts"
+      ],
+      "hooks": [
+        "./lib/types/react/src/hooks/index.d.ts"
+      ],
+      "*": [
+        "./lib/types/react/src/index.d.ts"
+      ]
+    }
+  },
+  "license": "Apache-2.0",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "type": "module",
+  "types": "lib/types/react/src/index.d.ts",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
-    "@ilo-org/brand-assets": "0.0.1",
-    "@ilo-org/fonts": "0.0.6",
-    "@ilo-org/icons-react": "0.0.16",
-    "@ilo-org/styles": "0.1.14",
-    "@ilo-org/themes": "0.1.14",
-    "@ilo-org/utils": "0.0.10",
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
-    "global": "^4.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
+    "react-player": "2.10.1",
     "react-transition-group": "^4.4.1",
-    "typescript": "4.3.4"
+    "@ilo-org/brand-assets": "0.0.2",
+    "@ilo-org/fonts": "0.0.7",
+    "@ilo-org/icons-react": "0.0.17",
+    "@ilo-org/styles": "0.1.15",
+    "@ilo-org/themes": "0.1.15",
+    "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
-    "@ilo-org/eslint-config": "0.0.1",
-    "@ilo-org/prettier-config": "0.0.1",
-    "@ilo-org/typescript-config": "0.0.1",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@storybook/addon-a11y": "^6.4.12",
-    "@storybook/addon-actions": "^6.4.12",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.12",
-    "@storybook/addon-links": "^6.4.12",
-    "@storybook/builder-webpack5": "^6.4.12",
-    "@storybook/client-api": "^6.4.0",
-    "@storybook/manager-webpack5": "^6.4.12",
-    "@storybook/node-logger": "^6.4.12",
-    "@storybook/preset-create-react-app": "^4.0.0",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@storybook/addon-a11y": "next",
+    "@storybook/addon-actions": "next",
+    "@storybook/addon-docs": "next",
+    "@storybook/addon-essentials": "next",
+    "@storybook/addon-links": "next",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/blocks": "next",
+    "@storybook/builder-webpack5": "next",
+    "@storybook/client-api": "next",
+    "@storybook/manager-webpack5": "6.5.15",
+    "@storybook/node-logger": "next",
+    "@storybook/preset-create-react-app": "4.1.2",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.12",
-    "@storybook/testing-react": "^1.2.3",
-    "@storybook/theming": "^6.4.19",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@storybook/react": "next",
+    "@storybook/react-webpack5": "next",
+    "@storybook/testing-react": "next",
+    "@storybook/theming": "next",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
+    "@types/mdx": "^2.0.3",
     "@types/node": "^17.0.21",
     "@types/react": "17.0.11",
     "@types/react-dom": "^17.0.13",
-    "classnames": "2.2.6",
     "http-server": "^14.1.0",
     "jest-environment-jsdom": "^27.5.1",
-    "react-player": "2.10.1",
-    "rollup": "^2.56.3",
+    "nodemon": "^2.0.20",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "5.0.1",
+    "remark-gfm": "^3.0.1",
+    "rollup": "^3.9.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-multi-input": "^1.3.1",
+    "rollup-plugin-mv": "^0.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^3.1.8",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-typescript2": "^0.34.1",
     "sass": "^1.49.9",
     "screenfull": "^5.2.0",
+    "storybook": "next",
     "storybook-addon-performance": "^0.16.1",
     "ts-jest": "^27.1.3",
     "tslib": "^2.3.1",
-    "webpack": "^5.68.0"
+    "typescript": "4.9.3",
+    "webpack": "^5.68.0",
+    "@ilo-org/eslint-config": "0.0.2",
+    "@ilo-org/prettier-config": "0.0.1",
+    "@ilo-org/typescript-config": "0.0.1"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build-test": "react-scripts build",
-    "test": "NODE_OPTIONS=--experimental-vm-modules SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false --setupFilesAfterEnv ./src/setup.ts",
-    "test:update": "SKIP_PREFLIGHT_CHECK=true react-scripts test -u --watchAll=false --setupFilesAfterEnv ./src/setup.ts",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006",
-    "storybook:static": "http-server ./storybook-static",
-    "build": "pnpm run build:rollup && npm run build:storybook",
-    "build:storybook": "build-storybook",
-    "build:rollup": "rollup -c",
-    "check": "tsc --noEmit",
+    "build": "pnpm build:lib",
+    "build:lib": "rollup -c",
+    "build:docs": "storybook build",
+    "check": "tsc --noEmit --p tsconfig.build.json",
+    "dev:lib": "rollup --config --configDevelop -w",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:fix": "pnpm lint -- --fix"
-  },
-  "readme": "# ILO Design System - React Package\n\nThis package provides the implementation of the Design System using [React](https://reactjs.org). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of the components in the system. It has dependencies on the following other @ilo-org packages:\n\n- [@ilo-org/themes](./packages/themes)\n- [@ilo-org/fonts](./packages/fonts)\n- [@ilo-org/styles](./packages/styles)\n- [@ilo-org/utils](./packages/utils)\n- [@ilo-org/icons](./packages/icons)\n- [@ilo-org/icons-react](./packages/icons-react)\n\n## Installation and PNPM Commands\n\nTo install\n\n```bash\nnpm i @ilo-org/react\n```\n\nTo start storybook\n\n```bash\npnpm storybook\n```\n\nTo build storybook\n\n```bash\npnpm build:storybook\n```\n\nTo test formatting\n\n```bash\npnpm format\n```\n\nTo test formatting and fix errors\n\n```bash\npnpm format:fix\n```\n\nTo lint\n\n```bash\npnpm lint\n```\n\nTo test formatting and fix errors\n\n```bash\npnpm lint:fix\n```\n\n## Questions and Feedback\n\n(TBD)\n\n## Accessibility Standards\n\n(TBD)\n\n## Contributing\n\nILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.\n\n### Branches\n\n| Branch    | Purpose                            |\n| --------- | ---------------------------------- |\n| `main`    | The latest version of all packages |\n| `develop` | The next release of all packages   |\n\n### Contribution workflow\n\n1. Fork and clone the repo\n2. Create a new branch from the `develop` branch\n3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages\n4. Push your branch to the forked version of the repo\n5. Open a pull request back to the `develop` branch of the main repo\n\n### Versioning\n\nThe project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.\n\nSee more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)\n\n### Conventions\n\nContributions should respect the following conventions for branch names, commit messages and pull request descriptions\n\n#### Commits\n\nCommits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).\n\n```\n<type>(<scope>): <subject>\n```\n\nExamples:\n\n```\nfix(react): change button color on hover\nfeat(twig): add button component\nci(github): add release workflow\nperf(react): improve modal animations\n```\n\n#### Types\n\n- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n- docs: Documentation only changes\n- feat: A new feature\n- fix: A bug fix\n- perf: A code change that improves performance\n- refactor: A code change that neither fixes a bug nor adds a feature\n- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n- test: Adding missing tests or correcting existing tests\n\n#### Scopes\n\nThis should be a package name or an aspect of the project's configuration.\n\n### Branches\n\nBranch names should broadly mirror the same convention as commits.\n\nExamples:\n\n```\nfeat/react/modal-wrapper\nfix/twig/modal-wrapper\n```\n\n### Pull requests\n\nPull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.\n\n## Building the project\n\nUse [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.\n\n```bash\nnvm use\n```\n\nInstall [pnpm](https://pnpm.io/).\n\n```bash\nnpm i -g pnpm\n```\n\nInstall dependencies\n\n```bash\npnpm recursive install\n```\n\nBuild all packages.\n\n```bash\npnpm build:all\n```\n\nStart React storybook\n\n```bash\npnpm start:react-storybook\n```\n\nStart Twig storybook\n\n```bash\npnpm start:twig-storybook\n```\n\nCheck types\n\n```bash\npnpm check:types\n```\n\nRun all tests\n\n```bash\npnpm test:all\n```\n"
+    "lint:fix": "pnpm lint -- --fix",
+    "storybook": "storybook dev -p 6006",
+    "storybook:static": "http-server ./storybook-static",
+    "test": "NODE_OPTIONS=--experimental-vm-modules SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false --setupFilesAfterEnv ./src/setup.ts"
+  }
 }

package/rollup.config.mjs

@@ -0,0 +1,70 @@
+import commonjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
+import resolve from "@rollup/plugin-node-resolve";
+import { createRequire } from "node:module";
+import del from "rollup-plugin-delete";
+import livereload from "rollup-plugin-livereload";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import typescript from "rollup-plugin-typescript2";
+import multiInput from "rollup-plugin-multi-input";
+
+const require = createRequire(import.meta.url);
+const packageJson = require("./package.json");
+
+const config = {
+  input: [
+    "src/index.ts",
+    "src/components/**/index.ts",
+    "src/components/**/*.tsx",
+    "src/hooks/*.ts",
+    "src/utils/*.ts",
+  ],
+  external: [
+    ...Object.keys(packageJson.dependencies),
+    ...Object.keys(packageJson.devDependencies),
+  ],
+  output: [
+    {
+      dir: "lib/esm",
+      format: "esm",
+    },
+    {
+      dir: "lib/cjs",
+      format: "cjs",
+    },
+  ],
+};
+
+const basePlugins = [
+  resolve(),
+  commonjs(),
+  json(),
+  multiInput.default({ relative: "src/" }),
+  typescript({
+    baseUrl: "./src",
+    useTsconfigDeclarationDir: true,
+    tsconfig: "./tsconfig.build.json",
+  }),
+  peerDepsExternal(),
+];
+
+export default function (commandLineArgs) {
+  let plugins;
+
+  // For production
+  if (!commandLineArgs.configDevelop) {
+    plugins = [...basePlugins, del({ targets: "lib/*" })];
+  }
+
+  // for development
+  if (commandLineArgs.configDevelop) {
+    plugins = [
+      ...basePlugins,
+      del({ targets: "lib/*", runOnce: true }),
+      livereload(),
+    ];
+  }
+
+  config.plugins = plugins;
+  return config;
+}

package/src/components/Accordion/Accordion.args.ts

@@ -6,7 +6,7 @@ const large: AccordionProps = {
   },
   allowMultipleExpanded: true,
   defaultAccordionsExpanded: ["l1", "l2"],
-  children: "",
+  children: undefined,
 };
 
 /**

package/src/components/Accordion/{Accordion.props.d.ts → Accordion.props.ts}

@@ -1,13 +1,15 @@
-import { MouseEvent } from "react";
+import { Dispatch, MouseEvent, ReactElement, SetStateAction } from "react";
 export { default as AccordionItem } from "./AccordionItem";
-import { headingLevel } from "../../types";
 import { getUpdatedItems } from "@ilo-org/utils";
+import { AccordionItemProps } from "./AccordionItem.props";
 
 export interface AccordionProps {
   /**
    * Specify the content of your Accordion.
    */
-  children: ReactElement<AccordionItem> | Array<ReactElement<AccordionItem>>;
+  children?:
+    | ReactElement<AccordionItemProps>
+    | Array<ReactElement<AccordionItemProps>>;
 
   /**
    * Callback to onButtonClick event;
@@ -32,7 +34,7 @@ export interface AccordionProps {
 
 export interface AccordionContextProps {
   activeItems: string[];
-  getUpdatedItems: getUpdatedItems;
+  getUpdatedItems: typeof getUpdatedItems;
   setActiveItems: Dispatch<SetStateAction<string[]>>;
   allowMultipleExpanded: boolean;
   onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;

package/src/components/Accordion/Accordion.tsx

@@ -1,18 +1,10 @@
-import {
-  useState,
-  useEffect,
-  createContext,
-  FC,
-  ReactElement,
-  Children,
-} from "react";
-import classNames from "classnames";
 import { getUpdatedItems } from "@ilo-org/utils";
+import classNames from "classnames";
+import { Children, FC, ReactElement, useEffect, useState } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { AccordionProps, AccordionContextProps } from "./Accordion.props";
 import { checkArrayDuplicates } from "../../utils/checkArrayDuplicates";
-
-export const AccordionContext = createContext({} as AccordionContextProps);
+import { AccordionProps } from "./Accordion.props";
+import { AccordionContext } from "./AccordionCtx";
 
 const Accordion: FC<AccordionProps> = ({
   children,

package/src/components/Accordion/AccordionButton.tsx

@@ -1,10 +1,8 @@
-// prettier-ignore
-import { FC, useContext, MouseEvent } from "react";
 import classNames from "classnames";
+import { FC, MouseEvent, useContext } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { default as AccordionButtonProps } from "./AccordionButton.props";
-import { AccordionContext } from "./Accordion";
-import { AccordionItemContext } from "./AccordionItem";
+import { AccordionContext, AccordionItemContext } from "./AccordionCtx";
 
 const AccordionButton: FC<AccordionButtonProps> = ({
   children,

package/src/components/Accordion/AccordionCtx.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { AccordionContextProps } from "./Accordion.props";
+import { AccordionItemContextProps } from "./AccordionItem.props";
+
+export const AccordionContext = createContext({} as AccordionContextProps);
+
+export const AccordionItemContext = createContext(
+  {} as AccordionItemContextProps
+);

package/src/components/Accordion/AccordionItem.tsx

@@ -1,14 +1,8 @@
-import { FC, createContext } from "react";
 import classNames from "classnames";
+import { FC } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import {
-  AccordionItemProps,
-  AccordionItemContextProps,
-} from "./AccordionItem.props";
-
-export const AccordionItemContext = createContext(
-  {} as AccordionItemContextProps
-);
+import { AccordionItemContext } from "./AccordionCtx";
+import { AccordionItemProps } from "./AccordionItem.props";
 
 const AccordionItem: FC<AccordionItemProps> = ({
   children,

package/src/components/Accordion/AccordionPanel.tsx

@@ -1,9 +1,8 @@
-import { FC, useContext, useLayoutEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import { FC, useContext, useLayoutEffect, useRef, useState } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { AccordionContext, AccordionItemContext } from "./AccordionCtx";
 import { default as AccordionPanelProps } from "./AccordionPanel.props";
-import { AccordionContext } from "./Accordion";
-import { AccordionItemContext } from "./AccordionItem";
 
 const AccordionPanel: FC<AccordionPanelProps> = ({
   children,