fix #160: add standalone output, update dependencies, reformat (#162)

also fixes an error when using renderChat without configuring local storage

Author: Fabilin

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
   extends: [
     'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
     'plugin:storybook/recommended',
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
   ],

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint

README.md

@@ -41,18 +41,14 @@ The toolkit is currently used in production by various conversational assistants
 
 ## Quick Start
 
-Include `react`, `react-dom`, `@emotion-core`, `@emotion-styled`, `emotion-theming` and `tock-react-kit` in an HTML page.
-_React must be at least version 16.8 (must have hooks)_
+If you do not use a package manager, you can include the standalone bundle for the `tock-react-kit` in an HTML page.
+Note that this bundle includes its own copy of React - if you have an existing React application,
+please refer to the [module instructions below](#use-as-a-module).
 
 ```html
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
-<script crossorigin src="https://unpkg.com/@emotion/core@10/dist/core.umd.min.js"></script>
-<script crossorigin src="https://unpkg.com/@emotion/styled@10/dist/styled.umd.min.js"></script>
-<script crossorigin src="https://unpkg.com/emotion-theming@10/dist/emotion-theming.umd.min.js"></script>
 <script
   crossorigin
-  src="https://unpkg.com/tock-react-kit@latest/build/tock-react-kit.umd.js"
+  src="https://unpkg.com/tock-react-kit@latest/build/tock-react-kit-standalone.umd.js"
 ></script>
 ```
 
@@ -69,14 +65,15 @@ Render your app in an element:
 
 ## Use as a module
 
-You can also use it as a module (i.e [Create React App](https://github.com/facebook/create-react-app)) and bundle it:
+You can install this package alongside its peer dependencies using the package manager of your choice,
+and then bundle it with the rest of your web application. For example with NPM:
 
 ```
-npm i tock-react-kit
-npm i @emotion/react@11
-npm i @emotion/styled@11
+npm i react@18 react-dom@18 @emotion/react@11 @emotion/styled@11 tock-react-kit
 ```
 
+Your bundler must support ESM modules, which is the case for Webpack, Rollup and Vite among others.
+
 ### Use in a React app
 
 ```jsx
@@ -104,6 +101,8 @@ Therefore, in apps where the `Chat` component is susceptible to being unmounted
 
 ### Use in a non-React app
 
+When working in a non-React app, you can once again use `renderChat` to render the app in an existing element:
+
 ```js
 import { renderChat } from 'tock-react-kit';
 
@@ -510,7 +509,7 @@ This is typically used to pass tokens or custom values to the Bot backend.
 
 Tock web connector can send custom messages :
 
-```json
+```json5
 {
   data: {
     departure: 'Paris',

package.json

@@ -15,7 +15,9 @@
     "build/tock-react-kit.d.ts",
     "build/tock-react-kit.esm.js",
     "build/tock-react-kit.esm.js.map",
-    "build/tock-react-kit.umd.js"
+    "build/tock-react-kit.umd.js",
+    "build/tock-react-kit-standalone.umd.js",
+    "build/tock-react-kit-standalone.esm.js"
   ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -29,11 +31,6 @@
     "test-release": "np --preview",
     "release": "np"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "dependencies": {
     "deepmerge": "^4.2.2",
     "linkifyjs": "^2.1.9",
@@ -47,85 +44,54 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
     "@emotion/eslint-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.0.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addons": "^7.4.0",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/builder-webpack5": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/builder-webpack5": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
     "@storybook/testing-library": "^0.2.0",
-    "@types/node": "^14.0.26",
-    "@types/react-color": "^3.0.4",
-    "@types/react-dom": "^18.2.8",
-    "@types/storybook__react": "^5.2.1",
-    "@typescript-eslint/eslint-plugin": "^3.9.1",
-    "@typescript-eslint/parser": "^3.9.1",
+    "@types/node": "^20.11.20",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "auto-changelog": "^2.4.0",
     "babel-loader": "^9.1.3",
-    "eslint": "^7.7.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-storybook": "^0.6.13",
-    "husky": "^4.2.5",
-    "np": "^8.0.4",
-    "prettier": "^2.0.5",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "np": "^9.2.0",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.29.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-dts": "^6.0.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-typescript": "^1.0.1",
-    "storybook": "^7.4.0",
-    "type-fest": "^4.3.1",
-    "typescript": "^4.9.5"
+    "rollup": "^4.12.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "storybook": "^7.6.17",
+    "type-fest": "^4.10.3",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "react": ">=16.13",
-    "react-dom": ">=16.13"
+    "react": ">=17.0",
+    "react-dom": ">=17.0"
   },
   "resolutions": {
-    "immer": "9.0.6",
-    "y18n": "5.0.8",
-    "lodash": "4.17.21",
-    "lodash-es": "4.17.21",
-    "set-value": "4.0.1",
-    "trim-newlines": "3.0.1",
-    "glob-parent": "5.1.2",
-    "normalize-url": "4.5.1",
-    "ssri": "8.0.1",
-    "react-dev-utils": "11.0.4",
-    "hosted-git-info": "3.0.8",
-    "browserslist": "4.17.1",
-    "merge-deep": "3.0.3",
-    "tar": "6.1.9",
-    "prismjs": "1.27.0",
-    "ini": "1.3.6",
-    "semver-regex": "3.1.4",
-    "nth-check": "2.0.1",
-    "elliptic": "6.5.4",
-    "highlight.js": "10.7.3",
-    "path-parse": "1.0.7",
-    "handlebars": "4.7.7",
-    "shelljs": "0.8.5",
-    "ansi-html": "0.0.8",
-    "postcss": "7.0.36",
-    "node-fetch": "2.6.7",
-    "ansi-regex": "5.0.1",
-    "trim": "0.0.3",
-    "minimist": "1.2.6",
-    "shell-quote": "1.7.3",
-    "got": "11.8.5",
-    "ejs": "3.1.7",
-    "terser": "5.14.2"
+    "jackspeak": "2.1.1",
+    "string-width": "^4"
   },
   "auto-changelog": {
     "includeBranch": [

rollup.config.mjs

@@ -1,15 +1,17 @@
-import commonjs from 'rollup-plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
 import dts from 'rollup-plugin-dts';
-import resolve from 'rollup-plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
-import typescript from 'rollup-plugin-typescript';
+import terser from "@rollup/plugin-terser";
+import typescript from '@rollup/plugin-typescript';
 
 export default [
   {
     input: 'src/index.ts',
     external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'],
     output: [
       {
+        // TODO deprecated build output, remove in 24.x
         file: 'build/tock-react-kit.umd.js',
         format: 'umd',
         name: 'TockReact',
@@ -35,6 +37,31 @@ export default [
       }),
     ],
   },
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'build/tock-react-kit-standalone.umd.js',
+        format: 'umd',
+        name: 'TockReact',
+        sourcemap: true,
+      },
+      {
+        file: 'build/tock-react-kit-standalone.esm.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript(),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+      terser(),
+    ],
+  },
   {
     // path to your declaration files root
     input: 'src/index.ts',

src/TockContext.tsx

@@ -13,16 +13,14 @@ import { retrieveUserId } from './utils';
 import { QuickReply } from './model/buttons';
 import { Message } from './model/messages';
 
-export const TockSettingsContext: Context<
-  TockSettings | undefined
-> = createContext<TockSettings | undefined>(undefined);
+export const TockSettingsContext: Context<TockSettings | undefined> =
+  createContext<TockSettings | undefined>(undefined);
 
 export const TockStateContext: Context<TockState | undefined> = createContext<
   TockState | undefined
 >(undefined);
-export const TockStateDispatch: Context<
-  Dispatch<TockAction> | undefined
-> = createContext<Dispatch<TockAction> | undefined>(undefined);
+export const TockStateDispatch: Context<Dispatch<TockAction> | undefined> =
+  createContext<Dispatch<TockAction> | undefined>(undefined);
 
 export const useTockSettings: () => TockSettings = () => {
   const settings = useContext(TockSettingsContext);
@@ -41,9 +39,8 @@ export const useTockState: () => TockState = () => {
 };
 
 export const useTockDispatch: () => Dispatch<TockAction> = () => {
-  const dispatch: Dispatch<TockAction> | undefined = useContext(
-    TockStateDispatch,
-  );
+  const dispatch: Dispatch<TockAction> | undefined =
+    useContext(TockStateDispatch);
   if (!dispatch) {
     throw new Error('useTockDispatch must be used in a TockContext');
   }

src/components/Card/Card.tsx

@@ -12,19 +12,17 @@ import UrlButton from '../buttons/UrlButton';
 import PostBackButton from '../buttons/PostBackButton';
 import { css, Theme } from '@emotion/react';
 
-export const CardOuter: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLLIElement>,
-  HTMLLIElement
->> = styled.li`
+export const CardOuter: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLLIElement>, HTMLLIElement>
+> = styled.li`
   max-width: ${theme('sizing.conversation.width')};
   margin: 0.5em auto;
   list-style: none;
 `;
 
-export const CardContainer: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
->> = styled.div`
+export const CardContainer: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = styled.div`
   padding: 0.5em;
   background: ${theme('palette.background.card')};
   color: ${theme('palette.text.card')};
@@ -35,10 +33,9 @@ export const CardContainer: StyledComponent<DetailedHTMLProps<
   ${theme('overrides.card.cardContainer')};
 `;
 
-const CardTitle: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLSpanElement>,
-  HTMLSpanElement
->> = styled.span`
+const CardTitle: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+> = styled.span`
   margin: 0.5em 0;
   font-size: 1.5em;
   font-weight: bold;
@@ -47,10 +44,9 @@ const CardTitle: StyledComponent<DetailedHTMLProps<
   ${theme('overrides.card.cardTitle')};
 `;
 
-const CardSubTitle: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLSpanElement>,
-  HTMLSpanElement
->> = styled.span`
+const CardSubTitle: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+> = styled.span`
   margin: 0.5em 0;
   font-size: 1em;
   font-weight: bold;
@@ -59,20 +55,18 @@ const CardSubTitle: StyledComponent<DetailedHTMLProps<
   ${theme('overrides.card.cardSubTitle')};
 `;
 
-const CardImage: StyledComponent<DetailedHTMLProps<
-  ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
->> = styled.img`
+const CardImage: StyledComponent<
+  DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
+> = styled.img`
   max-width: 100%;
   max-height: 100%;
 
   ${theme('overrides.card.cardImage')};
 `;
 
-const ButtonList: StyledComponent<DetailedHTMLProps<
-  HTMLAttributes<HTMLUListElement>,
-  HTMLUListElement
->> = styled.ul`
+const ButtonList: StyledComponent<
+  DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>
+> = styled.ul`
   margin: 0.5em 0;
   list-style: none;
   padding: 0.5em 0;
@@ -168,8 +162,8 @@ const Card = React.forwardRef<HTMLLIElement, CardProps>(function cardRender(
         ref == undefined
           ? undefined
           : roleDescription
-          ? roleDescription
-          : 'Slide'
+            ? roleDescription
+            : 'Slide'
       }
     >
       <CardContainer aria-hidden={isHidden}>