From 1e757386e3cfbaf0efa98a2ef8b9d19536564046 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Sat, 3 Aug 2024 11:47:04 +0200 Subject: [PATCH] feat: add button-react package --- .changeset/silver-bugs-invite.md | 5 + .eslintrc.js | 2 + .gitignore | 3 + .../jest-component.config.mjs | 22 + packages/component-library-react/package.json | 2 +- .../packages/button-react/jest.config.mjs | 3 + .../packages/button-react/package.json | 41 + .../packages/button-react/rollup.config.mjs | 3 + .../packages/button-react/src/css.tsx | 9 + .../button-react/src/index.test.tsx} | 8 +- .../packages/button-react/src/index.tsx | 79 + .../packages/button-react/tsconfig.json | 8 + .../packages/button-react/tsconfig.test.json | 8 + .../rollup-component-package.mjs | 106 + .../component-library-react/src/Button.tsx | 81 +- .../src/css-module/Button.tsx | 4 +- .../component-library-react/tsconfig.json | 16 +- .../tsconfig.test.json | 2 +- pnpm-lock.yaml | 2068 +++++++---------- pnpm-workspace.yaml | 1 + 20 files changed, 1184 insertions(+), 1287 deletions(-) create mode 100644 .changeset/silver-bugs-invite.md create mode 100644 packages/component-library-react/jest-component.config.mjs create mode 100644 packages/component-library-react/packages/button-react/jest.config.mjs create mode 100644 packages/component-library-react/packages/button-react/package.json create mode 100644 packages/component-library-react/packages/button-react/rollup.config.mjs create mode 100644 packages/component-library-react/packages/button-react/src/css.tsx rename packages/component-library-react/{src/Button.test.tsx => packages/button-react/src/index.test.tsx} (98%) create mode 100644 packages/component-library-react/packages/button-react/src/index.tsx create mode 100644 packages/component-library-react/packages/button-react/tsconfig.json create mode 100644 packages/component-library-react/packages/button-react/tsconfig.test.json create mode 100644 packages/component-library-react/rollup-component-package.mjs diff --git a/.changeset/silver-bugs-invite.md b/.changeset/silver-bugs-invite.md new file mode 100644 index 00000000000..766576e748a --- /dev/null +++ b/.changeset/silver-bugs-invite.md @@ -0,0 +1,5 @@ +--- +"@utrecht/button-react": major +--- + +Add `@utrecht/button-react` package. diff --git a/.eslintrc.js b/.eslintrc.js index 9d6ac1e44e4..b83c7152055 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/.gitignore b/.gitignore index dca1ce3c6db..e9868f01bdf 100644 --- a/.gitignore +++ b/.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 diff --git a/packages/component-library-react/jest-component.config.mjs b/packages/component-library-react/jest-component.config.mjs new file mode 100644 index 00000000000..e95ac84de16 --- /dev/null +++ b/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: ['/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', '/'], + testEnvironment: 'jest-environment-jsdom', + testPathIgnorePatterns: ['/dist/'], + // transformIgnorePatterns: ['node_modules/(?!@utrecht/web-component-library-react)'], + }; + + return createJestConfig(customJestConfig); +}; diff --git a/packages/component-library-react/package.json b/packages/component-library-react/package.json index 3090acc123d..0566c0e119e 100644 --- a/packages/component-library-react/package.json +++ b/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:*", diff --git a/packages/component-library-react/packages/button-react/jest.config.mjs b/packages/component-library-react/packages/button-react/jest.config.mjs new file mode 100644 index 00000000000..e26eb68cfd6 --- /dev/null +++ b/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); diff --git a/packages/component-library-react/packages/button-react/package.json b/packages/component-library-react/packages/button-react/package.json new file mode 100644 index 00000000000..ad1ff9e8c49 --- /dev/null +++ b/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" + } +} diff --git a/packages/component-library-react/packages/button-react/rollup.config.mjs b/packages/component-library-react/packages/button-react/rollup.config.mjs new file mode 100644 index 00000000000..a97d32a0f9c --- /dev/null +++ b/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); diff --git a/packages/component-library-react/packages/button-react/src/css.tsx b/packages/component-library-react/packages/button-react/src/css.tsx new file mode 100644 index 00000000000..2c93b55f88a --- /dev/null +++ b/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'; diff --git a/packages/component-library-react/src/Button.test.tsx b/packages/component-library-react/packages/button-react/src/index.test.tsx similarity index 98% rename from packages/component-library-react/src/Button.test.tsx rename to packages/component-library-react/packages/button-react/src/index.test.tsx index ea4cbede663..30ca69c63ce 100644 --- a/packages/component-library-react/src/Button.test.tsx +++ b/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', () => { diff --git a/packages/component-library-react/packages/button-react/src/index.tsx b/packages/component-library-react/packages/button-react/src/index.tsx new file mode 100644 index 00000000000..1caf88d7f02 --- /dev/null +++ b/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 { + appearance?: string; + busy?: boolean; + hint?: string; + pressed?: boolean; +} + +export const Button = forwardRef( + ( + { + appearance, + busy, + disabled, + children, + className, + hint, + pressed, + type, + ...restProps + }: PropsWithChildren, + ref: ForwardedRef, + ) => { + return ( + + ); + }, +); + +Button.displayName = 'Button'; + +export const PrimaryActionButton = ({ ...args }) => { + return - ); - }, -); - -Button.displayName = 'Button'; - -export const PrimaryActionButton = ({ ...args }) => { - return