Fix React 17/Webpack 4 compatibility (#46)

.eslintrc.cjs

@@ -22,7 +22,7 @@ module.exports = {
   plugins: ["prettier", "react", "@typescript-eslint", "matrix-org"],
   settings: {
     react: {
-      version: "detect",
+      version: "17",
     },
   },
 };

.storybook/main.ts

@@ -6,8 +6,8 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "storybook-addon-designs",
-    "storybook-addon-themes",
+    "@storybook/addon-designs",
+    "@storybook/addon-styling",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.ts

@@ -1,3 +1,5 @@
+import { withThemeByClassName } from "@storybook/addon-styling";
+
 import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
 import "../src/styles/global.css";
 
@@ -10,21 +12,16 @@ export const parameters = {
     },
   },
   backgrounds: { disable: true },
-  themes: {
-    default: "light",
-    list: [
-      { name: "light", class: "cpd-theme-light", color: "#fff" },
-      { name: "dark", class: "cpd-theme-dark", color: "#101317" },
-      {
-        name: "light-high-contrast",
-        class: "cpd-theme-light-hc",
-        color: "#fff",
-      },
-      {
-        name: "dark-high-contrast",
-        class: "cpd-theme-dark-hc",
-        color: "#101317",
-      },
-    ],
-  },
 };
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: "cpd-theme-light",
+      dark: "cpd-theme-dark",
+      "light-high-contrast": "cpd-theme-light-hc",
+      "dark-high-contrast": "cpd-theme-dark-hc",
+    },
+    defaultTheme: "light",
+  })
+];

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "description": "Compound components for the Web",
   "type": "module",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
     ".": {
@@ -21,8 +22,8 @@
     "prettier": "npx prettier --write .",
     "lint": "yarn lint:js && yarn lint:styles",
     "lint:js": "eslint --max-warnings=0 .",
-    "lint:styles": "npx stylelint \"**/*.css\"",
-    "test": "jest",
+    "lint:styles": "npx stylelint src/**/*.css",
+    "test": "vitest",
     "prepercy": "node scripts/disableStoryStore7.js && yarn build-storybook",
     "percy": "percy storybook ./storybook-static",
     "postpercy": "git checkout .storybook/main.ts",
@@ -47,59 +48,72 @@
   },
   "homepage": "https://github.com/vector-im/compound-web#readme",
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
-    "@percy/cli": "^1.24.0",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@percy/cli": "^1.26.2",
     "@percy/storybook": "^4.3.6",
-    "@storybook/addon-actions": "^7.0.10",
-    "@storybook/addon-essentials": "^7.0.10",
-    "@storybook/addon-interactions": "^7.0.10",
-    "@storybook/addon-links": "^7.0.10",
-    "@storybook/addons": "^7.0.10",
-    "@storybook/react": "^7.0.10",
-    "@storybook/react-vite": "^7.0.10",
-    "@storybook/testing-library": "^0.1.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@storybook/addon-actions": "7.0.27",
+    "@storybook/addon-designs": "7.0.1",
+    "@storybook/addon-essentials": "7.0.27",
+    "@storybook/addon-interactions": "7.0.27",
+    "@storybook/addon-links": "7.0.27",
+    "@storybook/addon-styling": "1.3.5",
+    "@storybook/addons": "7.0.27",
+    "@storybook/react": "7.0.27",
+    "@storybook/react-vite": "7.0.27",
+    "@storybook/testing-library": "^0.2.0",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.1",
-    "@types/lodash-es": "^4.17.7",
-    "@types/node": "^18.16.0",
-    "@types/react": "^18.0.38",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "babel-loader": "^9.1.2",
+    "@types/lodash-es": "^4.17.8",
+    "@types/node": "^20.4.5",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "@vitejs/plugin-react": "^4.0.4",
+    "@vitest/coverage-v8": "^0.33.0",
+    "babel-loader": "^9.1.3",
     "browserslist-to-esbuild": "^1.2.0",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-matrix-org": "^1.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.12",
-    "jest": "^29.5.0",
-    "jest-css-modules": "^2.1.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^2.8.7",
-    "rimraf": "^5.0.0",
-    "storybook": "^7.0.10",
-    "storybook-addon-designs": "^7.0.0-beta.2",
-    "storybook-addon-themes": "^6.1.0",
-    "stylelint": "^15.2.0",
-    "stylelint-config-standard": "^30.0.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.3.5",
-    "vite-plugin-dts": "^2.3.0",
-    "vite-plugin-svgr": "^3.2.0"
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
+    "eslint-plugin-matrix-org": "^1.2.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-storybook": "^0.6.13",
+    "jsdom": "^22.1.0",
+    "prettier": "3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.1",
+    "storybook": "^7.0.27",
+    "stylelint": "^15.10.2",
+    "stylelint-config-standard": "^34.0.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.8",
+    "vite-plugin-dts": "^3.4.0",
+    "vite-plugin-svgr": "^3.2.0",
+    "vitest": "^0.33.0"
   },
   "dependencies": {
-    "@radix-ui/react-form": "^0.0.2",
-    "@vector-im/compound-design-tokens": "https://github.com/vector-im/compound-design-tokens#develop",
+    "@radix-ui/react-form": "^0.0.3",
+    "@vector-im/compound-design-tokens": "0.0.3",
     "classnames": "^2.3.2",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
   }
 }

scripts/disableStoryStore7.js

@@ -28,5 +28,5 @@ const main = fs.readFileSync(".storybook/main.ts", "utf-8");
 fs.writeFileSync(
   ".storybook/main.ts",
   main.replace("storyStoreV7: true,", "storyStoreV7: false,"),
-  "utf-8"
+  "utf-8",
 );

scripts/genComponent.js

@@ -46,7 +46,7 @@ fs.mkdirSync(path.join(DIST_PATH, COMPONENT_NAME), { recursive: true });
 for (const extension of fileExtensions) {
   const content = fs.readFileSync(
     path.join(BASE_PATH, NAME_ID + extension),
-    "utf-8"
+    "utf-8",
   );
 
   const newFileContent = content
@@ -57,7 +57,7 @@ for (const extension of fileExtensions) {
   const filePath = path.join(
     DIST_PATH,
     COMPONENT_NAME,
-    COMPONENT_NAME + extension
+    COMPONENT_NAME + extension,
   );
   fs.writeFileSync(filePath, newFileContent, "utf-8");
   console.log(`Creating ${filePath}`);

src/components/ActionControl/ActionControl.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { vi, describe, it, expect } from "vitest";
 import { fireEvent, getByLabelText, render } from "@testing-library/react";
 import React from "react";
 
@@ -29,20 +30,20 @@ describe("ActionControl", () => {
         onActionClick={() => {
           console.log("clicked!");
         }}
-      />
+      />,
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it("trigger the action", () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
     const { container } = render(
       <ActionControl
         Icon={ThreadIcon}
         actionLabel="Click me!"
         onActionClick={spy}
-      />
+      />,
     );
 
     const actionBtn = getByLabelText(container, "Click me!");

src/components/ActionControl/ActionControl.tsx

@@ -28,14 +28,14 @@ type ActionControlProps = {
   disabled?: boolean;
 } & React.ComponentProps<typeof Control>;
 
-export const ActionControl = ({
+export const ActionControl: React.FC<PropsWithChildren<ActionControlProps>> = ({
   children,
   Icon,
   className,
   actionLabel,
   onActionClick,
   ...props
-}: PropsWithChildren<ActionControlProps>) => {
+}) => {
   const id = useId();
   const classes = classnames(styles.actioncontrol, className);
   return (
@@ -62,9 +62,9 @@ export const ActionControl = ({
   );
 };
 
-export const StandaloneActionControl = (
-  props: PropsWithChildren<ActionControlProps>
-): React.JSX.Element => {
+export const StandaloneActionControl: React.FC<
+  PropsWithChildren<ActionControlProps>
+> = (props) => {
   return (
     <Root>
       <Field name="action">

src/components/ActionControl/__snapshots__/ActionControl.test.tsx.snap

@@ -1,32 +1,46 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ActionControl renders 1`] = `
+exports[`ActionControl > renders 1`] = `
 <DocumentFragment>
   <form
-    class="root"
+    class="_root_dc87d2"
   >
     <div
-      class="field"
+      class="_field_dc87d2"
     >
       <div
-        class="actioncontrol"
+        class="_actioncontrol_b007d7"
       >
         <input
           autocomplete="off"
           autocorrect="off"
-          class="control input"
+          class="_control_dc87d2 _input_b007d7"
           id=":r1:"
           name="action"
           title=""
         />
         <svg
           aria-controls=":r1:"
           aria-label="Click me!"
-          class="icon"
+          class="_icon_b007d7"
+          fill="none"
           height="24"
           role="button"
+          viewBox="0 0 18 18"
           width="24"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"
+            fill="currentColor"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
       </div>
     </div>
   </form>

src/components/Alert/Alert.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { vi, describe, it, expect } from "vitest";
 import {
   fireEvent,
   getByLabelText,
@@ -30,7 +31,7 @@ describe("Alert", () => {
     const { asFragment } = render(
       <Alert title="Title" type="success">
         Success!
-      </Alert>
+      </Alert>,
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -39,21 +40,21 @@ describe("Alert", () => {
     render(
       <Alert title="Title" type="info">
         Click me!
-      </Alert>
+      </Alert>,
     );
     expect(screen.queryByLabelText("Close")).not.toBeInTheDocument();
   });
 
   it("can have a close button", async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { container } = render(
       <Alert title="Title" type="critical" onClose={spy}>
         Click me!
-      </Alert>
+      </Alert>,
     );
 
     await waitFor(() =>
-      expect(getByLabelText(container, "Close")).toBeInTheDocument()
+      expect(getByLabelText(container, "Close")).toBeInTheDocument(),
     );
 
     fireEvent.click(getByLabelText(container, "Close"));