feat: add button-react package

.changeset/silver-bugs-invite.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/button-react": major
+---
+
+Add `@utrecht/button-react` package.

.eslintrc.js

@@ -70,6 +70,8 @@ module.exports = {
           'packages/component-library-angular/tsconfig.spec.json',
           'packages/component-library-react/tsconfig.json',
           'packages/component-library-react/tsconfig.test.json',
+          'packages/component-library-react/packages/button-react/tsconfig.json',
+          'packages/component-library-react/packages/button-react/tsconfig.test.json',
           'packages/component-library-vue/tsconfig.jest.json',
           'packages/component-library-vue/tsconfig.json',
           'packages/component-library-vue/tsconfig.lib.json',

.gitignore

@@ -9,6 +9,9 @@ tmp/
 *.tgz
 .angular
 *.tsbuildinfo
+.swc
+packages/component-library-react/pages
+packages/component-library-react/packages/*/pages
 
 # Ignore log files
 *.err

packages/component-library-react/jest-component.config.mjs

@@ -0,0 +1,22 @@
+/* eslint-env node */
+import nextJest from 'next/jest.js';
+import { dirname } from 'node:path';
+
+export const createJestConfig = (path) => {
+  // Next Jest config is great for Jest 27 + React + TypeScript, so let's use that as basis
+  const createJestConfig = nextJest({
+    dir: dirname(new URL(path).pathname),
+  });
+
+  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)'],
+  };
+
+  return createJestConfig(customJestConfig);
+};

packages/component-library-react/package.json

@@ -69,7 +69,7 @@
     "@utrecht/badge-status-css": "workspace:*",
     "@utrecht/blockquote-css": "workspace:*",
     "@utrecht/breadcrumb-nav-css": "workspace:*",
-    "@utrecht/button-css": "workspace:*",
+    "@utrecht/button-react": "workspace:*",
     "@utrecht/button-group-css": "workspace:*",
     "@utrecht/button-link-css": "workspace:*",
     "@utrecht/calendar-css": "workspace:*",

packages/component-library-react/packages/button-react/jest.config.mjs

@@ -0,0 +1,3 @@
+import { createJestConfig } from '../../jest-component.config.mjs';
+
+export default createJestConfig(import.meta.url);

packages/component-library-react/packages/button-react/package.json

@@ -0,0 +1,41 @@
+{
+  "version": "0.0.0",
+  "author": "Community for NL Design System",
+  "description": "Button component for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@utrecht/button-react",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c ./rollup.config.mjs",
+    "clean": "rimraf dist",
+    "test": "mkdir -p pages && NODE_OPTIONS=--experimental-vm-modules jest --verbose"
+  },
+  "devDependencies": {
+    "@utrecht/button-css": "workspace:*",
+    "jest": "29.7.0",
+    "rollup": "4.18.0"
+  },
+  "keywords": [
+    "nl-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/utrecht.git",
+    "directory": "packages/component-library-react/packages/button-react"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.23.6",
+    "react": "18",
+    "react-dom": "18"
+  }
+}

packages/component-library-react/packages/button-react/rollup.config.mjs

@@ -0,0 +1,3 @@
+import { createComponentPackageConfig } from '../../rollup-component-package.mjs';
+
+export default createComponentPackageConfig(import.meta.url);

packages/component-library-react/packages/button-react/src/css.tsx

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2025 Frameless B.V.
+ * Copyright (c) 2021-2025 Gemeente Utrecht
+ */
+
+import '@utrecht/button-css/src/index.scss';
+
+export * from './index';

packages/component-library-react/src/Button.test.tsx → packages/component-library-react/packages/button-react/src/index.test.tsx

@@ -1,6 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2025 Frameless B.V.
+ * Copyright (c) 2021-2025 Gemeente Utrecht
+ */
+
 import { render, screen } from '@testing-library/react';
 import { createRef, FormEvent } from 'react';
-import { Button } from './Button';
+import { Button } from './index';
 import '@testing-library/jest-dom';
 
 describe('Button', () => {

packages/component-library-react/packages/button-react/src/index.tsx

@@ -0,0 +1,79 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2025 Frameless B.V.
+ * Copyright (c) 2021-2025 Gemeente Utrecht
+ */
+
+import clsx from 'clsx';
+import { ButtonHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  appearance?: string;
+  busy?: boolean;
+  hint?: string;
+  pressed?: boolean;
+}
+
+export const Button = forwardRef(
+  (
+    {
+      appearance,
+      busy,
+      disabled,
+      children,
+      className,
+      hint,
+      pressed,
+      type,
+      ...restProps
+    }: PropsWithChildren<ButtonProps>,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={clsx(
+          'utrecht-button',
+          busy && 'utrecht-button--busy',
+          disabled && 'utrecht-button--disabled',
+          type === 'submit' && 'utrecht-button--submit',
+          appearance === 'primary-action-button' && 'utrecht-button--primary-action',
+          appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',
+          appearance === 'subtle-button' && 'utrecht-button--subtle',
+          hint === 'danger' && 'utrecht-button--danger',
+          hint === 'warning' && 'utrecht-button--warning',
+          hint === 'ready' && 'utrecht-button--ready',
+          pressed === true && 'utrecht-button--pressed',
+          className,
+        )}
+        aria-busy={busy || undefined}
+        aria-pressed={typeof pressed === 'boolean' ? pressed : undefined}
+        disabled={disabled}
+        type={type || 'button'}
+        {...restProps}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export const PrimaryActionButton = ({ ...args }) => {
+  return <Button {...args} appearance="primary-action-button" />;
+};
+
+PrimaryActionButton.displayName = 'PrimaryActionButton';
+
+export const SecondaryActionButton = ({ ...args }) => {
+  return <Button {...args} appearance="secondary-action-button" />;
+};
+
+SecondaryActionButton.displayName = 'SecondaryActionButton';
+
+export const SubtleButton = ({ ...args }) => {
+  return <Button {...args} appearance="subtle-button" />;
+};
+
+SubtleButton.displayName = 'SubtleButton';

packages/component-library-react/packages/button-react/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["**/node_modules/*", "**/*.test.ts", "**/*.test.tsx"]
+}

packages/component-library-react/packages/button-react/tsconfig.test.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["**/node_modules/*"]
+}

packages/component-library-react/rollup-component-package.mjs

@@ -0,0 +1,106 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+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 peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import typescript from 'rollup-plugin-typescript2';
+
+export const createComponentPackageConfig = (path) => {
+  const packagePath = new URL('./package.json', path).pathname;
+  const packageJson = JSON.parse(readFileSync(packagePath, 'utf8'));
+
+  const outputGlobals = {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+  };
+
+  /**
+   * @type {import('rollup').RollupOptions}
+   */
+  return [
+    {
+      input: new URL('./src/index.tsx', path).pathname,
+      output: [
+        {
+          file: packageJson.main,
+          format: 'cjs',
+          sourcemap: true,
+          globals: outputGlobals,
+        },
+        {
+          file: packageJson.module,
+          format: 'esm',
+          sourcemap: true,
+          globals: outputGlobals,
+        },
+      ],
+      plugins: [
+        peerDepsExternal(),
+        nodeExternal(),
+        resolve({ browser: true }),
+        commonjs({
+          include: /node_modules/,
+        }),
+        nodePolyfills(),
+        typescript({ includeDependencies: false }),
+        json(),
+        babel({
+          presets: ['@babel/preset-react'],
+          babelHelpers: 'runtime',
+          exclude: ['node_modules/**', 'dist/**'],
+          extensions: ['.ts', '.tsx'],
+          inputSourceMap: true,
+          plugins: ['@babel/plugin-transform-runtime'],
+        }),
+        filesize(),
+      ],
+    },
+    {
+      input: new URL('./src/index.tsx', path).pathname,
+      output: [
+        {
+          file: 'dist/css.js',
+          format: 'cjs',
+          sourcemap: true,
+          globals: outputGlobals,
+        },
+        {
+          file: 'dist/css.mjs',
+          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 }),
+        json(),
+        babel({
+          presets: ['@babel/preset-react'],
+          babelHelpers: 'runtime',
+          exclude: ['node_modules/**', 'dist/**'],
+          extensions: ['.ts', '.tsx'],
+          inputSourceMap: true,
+          plugins: ['@babel/plugin-transform-runtime'],
+        }),
+        filesize(),
+      ],
+    },
+  ];
+};