feat: create React Textbox component package (#2571)

Co-authored-by: Robbert Broersma <git@robbertbroersma.nl>

.changeset/lovely-rocks-look.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/textbox-react": major
+---
+
+Create React Textbox component package

packages/component-library-react/package.json

@@ -147,7 +147,7 @@
     "@utrecht/table-css": "workspace:*",
     "@utrecht/table-of-contents-css": "workspace:*",
     "@utrecht/textarea-css": "workspace:*",
-    "@utrecht/textbox-css": "workspace:*",
+    "@utrecht/textbox-react": "workspace:*",
     "@utrecht/top-task-link-css": "workspace:*",
     "@utrecht/top-task-nav-css": "workspace:*",
     "@utrecht/unordered-list-css": "workspace:*",

packages/component-library-react/src/Textbox.tsx

@@ -1,63 +1,8 @@
-import clsx from 'clsx';
-import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
-export type TextboxTypes =
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'search'
-  | 'tel'
-  | 'text'
-  | 'time'
-  | 'url'
-  | 'week';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2025 Frameless B.V.
+ * Copyright (c) 2021-2025 Gemeente Utrecht
+ */
 
-export interface TextboxProps extends InputHTMLAttributes<HTMLInputElement> {
-  inputRequired?: boolean;
-  invalid?: boolean;
-  type?: string | TextboxTypes;
-}
-
-export const Textbox = forwardRef(
-  (
-    {
-      dir,
-      disabled,
-      invalid,
-      readOnly,
-      required,
-      inputRequired,
-      className,
-      type = 'text',
-      inputMode,
-      ...restProps
-    }: TextboxProps,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => (
-    <input
-      {...restProps}
-      ref={ref}
-      type={type}
-      className={clsx(
-        'utrecht-textbox',
-        'utrecht-textbox--html-input',
-        disabled && 'utrecht-textbox--disabled',
-        invalid && 'utrecht-textbox--invalid',
-        readOnly && 'utrecht-textbox--readonly',
-        (required || inputRequired) && 'utrecht-textbox--required',
-        className,
-      )}
-      dir={dir ?? 'auto'}
-      disabled={disabled}
-      readOnly={readOnly}
-      aria-required={required ? required : undefined}
-      required={inputRequired}
-      aria-invalid={invalid || undefined}
-      inputMode={inputMode || (type === 'number' ? 'numeric' : undefined)}
-    />
-  ),
-);
-
-Textbox.displayName = 'Textbox';
+export type { TextboxProps, TextboxTypes } from '@utrecht/textbox-react';
+export { Textbox } from '@utrecht/textbox-react';

packages/component-library-react/src/css-module/Textbox.tsx

@@ -3,6 +3,4 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import '@utrecht/textbox-css/src/index.scss';
-
-export * from '../Textbox';
+export * from '@utrecht/textbox-react/dist/css';

packages/components-react/textbox-react/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "jest/globals": true
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

packages/components-react/textbox-react/babel.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};

packages/components-react/textbox-react/jest.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  testPathIgnorePatterns: ['/dist/'],
+  moduleNameMapper: {
+    '^@utrecht/(.*)$': '<rootDir>/../$1/src/',
+  },
+};

packages/components-react/textbox-react/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@utrecht/textbox-react",
+  "version": "0.0.0",
+  "author": "Community for NL Design System",
+  "description": "Textbox component for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist *.tsbuildinfo .rollup.cache coverage",
+    "build": "rollup --config ./rollup.config.mjs",
+    "test": "mkdir -p pages && jest --coverage --verbose",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "7.24.7",
+    "@babel/preset-env": "7.24.7",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "26.0.1",
+    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-typescript": "12.1.0",
+    "@testing-library/dom": "8.20.1",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jest": "29.5.13",
+    "@types/react": "18.3.3",
+    "@types/testing-library__jest-dom": "5.14.9",
+    "@utrecht/textbox-css": "workspace:*",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "react": "18.3.1",
+    "rollup": "4.23.0",
+    "rollup-plugin-filesize": "10.0.0",
+    "rollup-plugin-node-externals": "7.1.2",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "typescript": "5.6.2"
+  },
+  "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/textbox-react"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.23.6",
+    "react": "18",
+    "react-dom": "18"
+  },
+  "dependencies": {
+    "clsx": "2.1.1"
+  }
+}

packages/components-react/textbox-react/rollup.config.mjs

@@ -0,0 +1,87 @@
+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 typescript from '@rollup/plugin-typescript';
+import { readFileSync } from 'fs';
+import filesize from 'rollup-plugin-filesize';
+import nodeExternal from 'rollup-plugin-node-externals';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+
+const packagePath = new URL('./package.json', import.meta.url).pathname;
+const packageJson = JSON.parse(readFileSync(packagePath, 'utf8'));
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+export default [
+  {
+    input: './src/index.tsx',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      commonjs(),
+      nodeExternal(),
+      resolve({ browser: true }),
+      json(),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'runtime',
+        exclude: ['node_modules/**', 'dist/**'],
+        extensions: ['.ts', '.tsx'],
+        inputSourceMap: true,
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+      filesize(),
+    ],
+  },
+  {
+    input: './src/css.tsx',
+    output: [
+      {
+        file: './dist/css.js',
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: './dist/css.mjs',
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      commonjs(),
+      nodeExternal(),
+      resolve({ browser: true }),
+      json(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        minimize: true,
+      }),
+      typescript({ tsconfig: './tsconfig.build.json' }),
+      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/textbox-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/textbox-css/src/index.scss';
+
+export * from './index';

packages/component-library-react/src/Textbox.test.tsx → packages/components-react/textbox-react/src/index.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
-import { Textbox } from './Textbox';
+import { Textbox } from './index';
 import '@testing-library/jest-dom';
 
 describe('Textbox', () => {

packages/components-react/textbox-react/src/index.tsx

@@ -0,0 +1,63 @@
+import clsx from 'clsx';
+import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+export type TextboxTypes =
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week';
+
+export interface TextboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  inputRequired?: boolean;
+  invalid?: boolean;
+  type?: string | TextboxTypes;
+}
+
+export const Textbox = forwardRef(
+  (
+    {
+      dir,
+      disabled,
+      invalid,
+      readOnly,
+      required,
+      inputRequired,
+      className,
+      type = 'text',
+      inputMode,
+      ...restProps
+    }: TextboxProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => (
+    <input
+      {...restProps}
+      ref={ref}
+      type={type}
+      className={clsx(
+        'utrecht-textbox',
+        'utrecht-textbox--html-input',
+        disabled && 'utrecht-textbox--disabled',
+        invalid && 'utrecht-textbox--invalid',
+        readOnly && 'utrecht-textbox--readonly',
+        (required || inputRequired) && 'utrecht-textbox--required',
+        className,
+      )}
+      dir={dir ?? 'auto'}
+      disabled={disabled}
+      readOnly={readOnly}
+      aria-required={required ? required : undefined}
+      required={inputRequired}
+      aria-invalid={invalid || undefined}
+      inputMode={inputMode || (type === 'number' ? 'numeric' : undefined)}
+    />
+  ),
+);
+
+Textbox.displayName = 'Textbox';

packages/components-react/textbox-react/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true
+  }
+}

packages/components-react/textbox-react/tsconfig.json

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

packages/components-react/textbox-react/tsconfig.test.json

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