feat: create components react package

.eslintrc.json

@@ -81,6 +81,8 @@
         "project": [
           "packages/storybook/tsconfig.json",
           "packages/web-components-react/tsconfig.json",
+          "packages/components-react/tsconfig.json",
+          "packages/components-react/tsconfig.test.json",
           "packages/web-components-stencil/tsconfig.json",
           "packages/web-components-stencil/tsconfig.jest.json"
         ]

packages/components-react/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

packages/components-react/jest.config.mjs

@@ -0,0 +1,19 @@
+/* eslint-env node */
+import nextJest from "next/jest.js";
+
+// Next Jest config is great for Jest 27 + React + TypeScript, so let's use that as basis
+const createJestConfig = nextJest({
+  dir: "./",
+});
+
+const customJestConfig = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "jest-environment-jsdom",
+  testPathIgnorePatterns: ["/dist/"],
+  // transformIgnorePatterns: ['node_modules/(?!@utrecht/web-component-library-react)'],
+};
+
+export default createJestConfig(customJestConfig);

packages/components-react/package.json

@@ -0,0 +1,84 @@
+{
+  "version": "1.0.0-alpha.0",
+  "author": "Community for NL Design System",
+  "description": "React component library for the Example repository, based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@example/components-react",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": true,
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/example-community.git"
+  },
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "npm-run-all build:**",
+    "build:components": "vite build",
+    "clean": "rimraf dist/ pages/",
+    "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
+    "test": "mkdir -p pages && NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "watch:test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"
+  },
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "dependencies": {
+    "clsx": "1.2.1",
+    "date-fns": "2.30.0",
+    "lodash.chunk": "4.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.21.5",
+    "@babel/plugin-transform-runtime": "7.21.4",
+    "@babel/preset-env": "7.21.5",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.21.5",
+    "@babel/runtime": "7.21.5",
+    "@example/components-css": "workspace:*",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "24.1.0",
+    "@rollup/plugin-node-resolve": "15.0.2",
+    "@testing-library/dom": "8.20.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/date-fns": "2.6.0",
+    "@types/jest": "29.5.1",
+    "@types/lodash.chunk": "4.2.7",
+    "@types/react": "18.2.0",
+    "@types/testing-library__jest-dom": "5.14.5",
+    "@vitejs/plugin-react": "4.0.2",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "next": "13.3.4",
+    "npm-run-all": "4.1.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "4.4.1",
+    "rollup": "3.26.3",
+    "rollup-plugin-filesize": "10.0.0",
+    "rollup-plugin-node-externals": "6.1.1",
+    "rollup-plugin-node-polyfills": "0.2.1",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-typescript2": "0.35.0",
+    "sass": "1.62.1",
+    "tslib": "2.5.0",
+    "typescript": "4.9.5",
+    "vite": "4.4.1",
+    "vite-plugin-runtime-config": "1.0.2"
+  },
+  "peerDependencies": {
+    "react": "18",
+    "react-dom": "18"
+  }
+}

packages/components-react/rollup.config.mjs

@@ -0,0 +1,66 @@
+import babel from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import { readFileSync } from "fs";
+import filesize from "rollup-plugin-filesize";
+import nodeExternal from "rollup-plugin-node-externals";
+import nodePolyfills from "rollup-plugin-node-polyfills";
+import postcss from "rollup-plugin-postcss";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import typescript from "rollup-plugin-typescript2";
+
+const packageJson = JSON.parse(readFileSync("./package.json", "utf8"));
+
+// rollup.config.js
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+
+export const outputGlobals = {
+  react: "React",
+  "react-dom": "ReactDOM",
+};
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+        globals: outputGlobals,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+        globals: outputGlobals,
+      },
+    ],
+    external: [/@babel\/runtime/, "react-dom", "react"],
+    plugins: [
+      peerDepsExternal({ includeDependencies: true }),
+      nodeExternal(),
+      resolve({ browser: true }),
+      commonjs({
+        include: /node_modules/,
+      }),
+      nodePolyfills(),
+      postcss({
+        extensions: [".css", ".scss"],
+        minimize: true,
+      }),
+      typescript({ includeDependencies: false }),
+      babel({
+        presets: ["@babel/preset-react"],
+        babelHelpers: "runtime",
+        exclude: ["node_modules/**", "dist/**"],
+        extensions: [".ts", ".tsx"],
+        inputSourceMap: true,
+        plugins: ["@babel/plugin-transform-runtime"],
+      }),
+      filesize(),
+    ],
+  },
+];

packages/components-react/src/Button.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Button } from './Button';
+import '@testing-library/jest-dom';
+
+describe('Button', () => {
+  it('renders a button role element', () => {
+    render(<Button>OK</Button>);
+
+    const button = screen.getByRole('button', {
+      name: 'OK',
+    });
+
+    expect(button).toBeInTheDocument();
+    expect(button).toBeVisible();
+  });
+
+  it('renders an HTML button element', () => {
+    const { container } = render(<Button />);
+
+    const button = container.querySelector('button:only-child');
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders labels that contain HTML rich text content', () => {
+    const { container } = render(
+      <Button>
+        Order <strong>now</strong>
+      </Button>,
+    );
+
+    const button = container.querySelector(':only-child');
+
+    const richText = button?.querySelector('strong');
+
+    expect(richText).toBeInTheDocument();
+  });
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLButtonElement>();
+
+    const { container } = render(<Button ref={ref} />);
+
+    const button = container.querySelector(':only-child');
+
+    expect(ref.current).toBe(button);
+  });
+});

packages/components-react/src/Button.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import { ButtonHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+import '@example/components-css/button/index.scss';
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const Button = forwardRef(
+  ({ children, className, ...restProps }: PropsWithChildren<ButtonProps>, ref: ForwardedRef<HTMLButtonElement>) => {
+    return (
+      <button ref={ref} className={clsx('example-button', className)} {...restProps}>
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';

packages/components-react/src/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

packages/components-react/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "es2020"],
+    "module": "es2020",
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "es2020"
+  },
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/index.ts", "vite.config.ts"],
+  "exclude": ["**/node_modules/*", "**/*.test.ts", "src/**/*.test.tsx"]
+}

packages/components-react/tsconfig.test.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "../../node_modules/.pnpm/@types+jest@29.5.1/node_modules/@types/jest/index.d.ts"
+  ],
+  "exclude": ["**/node_modules/*"]
+}

packages/components-react/vite.config.ts

@@ -0,0 +1,29 @@
+/* eslint-env node */
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'Components React',
+      // the proper extensions will be added
+      fileName: 'components-react',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['react'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          react: 'React',
+        },
+      },
+    },
+  },
+  plugins: [react()],
+});

packages/storybook/src/button.stories.tsx

@@ -0,0 +1,34 @@
+import { ArgsTable, Primary, PRIMARY_STORY, Stories } from '@storybook/addon-docs';
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../../components-react/src/Button';
+
+const meta = {
+  title: 'React Component/Button',
+  id: 'react-button',
+  component: Button,
+  args: {
+    children: 'Read more...',
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: [undefined, 'button', 'submit', 'reset'],
+    },
+  },
+} as Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

packages/web-components-react/package.json

@@ -15,7 +15,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "tsc -p .",
-    "clean": "rimraf dist/"
+    "clean": "rimraf dist/ src/components.ts src/react-component-lib/"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",

packages/web-components-stencil/package.json

@@ -29,7 +29,7 @@
     "build": "npm-run-all build:**",
     "build:stencil": "stencil build",
     "build:typescript": "tsc",
-    "clean": "rimraf dist/",
+    "clean": "rimraf dist/ ../web-components-react/src/components.ts ../web-components-react/src/react-component-lib/",
     "start": "stencil build --dev --watch --serve",
     "watch": "npm-run-all --parallel watch:**",
     "watch:stencil": "chokidar --follow-symlinks --initial --command 'npm run build:stencil' '../../components/**/*.(js|jsx|ts|tsx)'",