2453 card cssreact componenten opsplitsen

.changeset/tender-parents-cry.md

@@ -0,0 +1,6 @@
+---
+'@rijkshuisstijl-community/card-react': major
+'@rijkshuisstijl-community/card-css': major
+---
+
+We hebben individuele packages aangemaakt om meer controle te geven over dependency maintenance en versie beheer duidelijker per component te omschrijven.

packages/components-css/card-css/README.md

@@ -0,0 +1,21 @@
+<!-- @license CC0-1.0 -->
+
+# Omschrijving
+
+Dit is het Card CSS-component van het Rijkshuisstijl Community Design System[<https://github.com/nl-design-system/rijkshuisstijl-community/>]. Zie ook de volgende links:
+
+- README.md voor alle CSS-componenten
+  [<https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-css/library-css/README.md>]
+
+- Storybook voor dit component
+  [<https://rijkshuisstijl-community.vercel.app/?path=/docs/css-card--docs>]
+
+## Installatie
+
+```bash
+pnpm add @rijkshuisstijl-community/card-css
+```
+
+## Gebruik
+
+Op de Storybook voor card-css [<https://rijkshuisstijl-community.vercel.app/?path=/docs/css-action-group--docs>] staan voorbeelden voor het gebruik van dit component.

packages/components-css/card-css/package.json

@@ -0,0 +1,34 @@
+{
+  "version": "0.0.0",
+  "author": "Community for Rijkshuisstijl-Community Design System",
+  "description": "Card component",
+  "license": "EUPL-1.2",
+  "name": "@rijkshuisstijl-community/card-css",
+  "files": [
+    "dist/",
+    "docs/",
+    "src/",
+    "*.md"
+  ],
+  "main": "dist/index.css",
+  "scripts": {
+    "build": "build-css-package",
+    "clean": "rimraf dist",
+    "watch": "build-css-package && chokidar 'src/**/*' --follow-symlinks --command 'build-css-package'"
+  },
+  "devDependencies": {
+    "@rijkshuisstijl-community/build-utils-css": "workspace:*",
+    "chokidar-cli": "3.0.0"
+  },
+  "keywords": [
+    "rijkshuisstijl-community-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
+    "directory": "packages/components-css/card-css"
+  }
+}

packages/components-css/card-css/src/tokens.json

@@ -0,0 +1 @@
+{}

packages/components-css/library-css/index.scss

@@ -12,7 +12,7 @@
 @use "@rijkshuisstijl-community/button-css/src/index" as button;
 @use "src/link-button/index" as linkButton;
 @use "src/card-as-link/index" as cardAsLink;
-@use "src/card/index" as card;
+@use "@rijkshuisstijl-community/card-css/src/index" as card;
 @use "src/checkbox/index" as checkbox;
 @use "src/checkbox-group/index" as checkboxGroup;
 @use "src/code-input/index" as codeInput;

packages/components-css/library-css/package.json

@@ -43,6 +43,7 @@
     "@rijkshuisstijl-community/article-css": "workspace:*",
     "@rijkshuisstijl-community/blockquote-css": "workspace:*",
     "@rijkshuisstijl-community/button-css": "workspace:*",
+    "@rijkshuisstijl-community/card-css": "workspace:*",
     "@rijkshuisstijl-community/dot-badge-css": "workspace:*",
     "@rijkshuisstijl-community/figure-css": "workspace:*",
     "@rijkshuisstijl-community/link-css": "workspace:*",

packages/components-react/card-react/README.md

@@ -0,0 +1,31 @@
+<!-- @license CC0-1.0 -->
+
+# Omschrijving
+
+Dit is de Card React-component van het Rijkshuisstijl Community Design System. Zie ook de volgende links:
+
+- README.md voor alle React-componenten
+  [https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-react/library-react/README.md]
+
+- CSS:
+  [https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-css/library-css/README.md]
+
+- Web Components:
+  [https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/web-components/README.md]
+
+- Twig:
+  [https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/components-twig/README.md]
+
+## Installatie
+
+```bash
+pnpm add @rijkshuisstijl-community/card-react
+```
+
+## Gebruik
+
+Op de storybook voor Card React Component staan voorbeelden voor het gebruik van dit component[https://rijkshuisstijl-community.vercel.app/?path=/docs/rhc-card--docs]
+
+## Testing
+
+We bundelen de CSS direct mee met de componenten zodat je dit niet apart hoeft in te laden. Let wel op met unit tests die in de Node omgeving draaien: die ondersteunen niet altijd standaard `.css` files. Voor vitest moet je bijvoorbeeld `pool: 'vmThreads',` aanzetten in de config als je de volgende error tegenkomt: `TypeError: Unknown file extension ".css"`

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

@@ -0,0 +1,84 @@
+{
+  "version": "0.0.0",
+  "author": "Community for Rijkshuisstijl-Community Design System",
+  "description": "Card component",
+  "license": "EUPL-1.2",
+  "name": "@rijkshuisstijl-community/card-react",
+  "type": "module",
+  "files": [
+    "dist/",
+    "docs/",
+    "src/",
+    "*.md"
+  ],
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "rhc:source": "./src/index.ts",
+      "default": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.esm.js"
+      }
+    }
+  },
+  "scripts": {
+    "build": "rollup --config rollup.config.mjs",
+    "clean": "rimraf dist",
+    "watch": "rollup --config rollup.config.mjs --watch",
+    "typecheck": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
+    "test": "vitest run --coverage --reporter verbose"
+  },
+  "keywords": [
+    "rijkshuisstijl-community-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
+    "directory": "packages/components-react/card-react"
+  },
+  "devDependencies": {
+    "@babel/core": "7.29.0",
+    "@babel/plugin-transform-runtime": "7.29.0",
+    "@babel/preset-env": "7.29.0",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@babel/runtime": "7.28.6",
+    "@rollup/plugin-babel": "6.1.0",
+    "@rollup/plugin-commonjs": "29.0.0",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/lodash.chunk": "4.2.9",
+    "@types/react": "19.2.14",
+    "@vitejs/plugin-react": "4.7.0",
+    "@vitest/coverage-v8": "3.2.4",
+    "clsx": "2.1.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "rollup": "4.59.0",
+    "rollup-plugin-filesize": "10.0.0",
+    "rollup-plugin-node-externals": "8.1.2",
+    "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.36.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vitest": "3.2.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "dependencies": {
+    "@rijkshuisstijl-community/card-css": "workspace:*",
+    "@rijkshuisstijl-community/link-react": "workspace:*",
+    "@utrecht/component-library-react": "13.0.1"
+  }
+}

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

@@ -0,0 +1,6 @@
+import { createRollupConfig } from '../library-react/rollup.config.mjs';
+import { readFileSync } from 'node:fs';
+
+const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'));
+
+export default createRollupConfig(packageJson);

packages/components-react/card-react/src/index.ts

@@ -0,0 +1,3 @@
+import '@rijkshuisstijl-community/card-css';
+
+export { Card } from './Card';

packages/components-react/card-react/tsconfig.dev.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  }
+}

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

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

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

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "rootDir": "./",
+    "types": ["vitest/globals", "node"]
+  },
+  "include": ["next-env.d.ts", "vite.config.ts", "src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["**/node_modules/*"]
+}

packages/components-react/card-react/vite.config.ts

@@ -0,0 +1,31 @@
+import react from '@vitejs/plugin-react';
+import { resolve } from 'node: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: 'Card',
+      // the proper extensions will be added
+      fileName: 'card-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()],
+  test: {
+    environment: 'jsdom',
+  },
+});

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

@@ -106,6 +106,7 @@
     "@rijkshuisstijl-community/article-react": "workspace:*",
     "@rijkshuisstijl-community/blockquote-react": "workspace:*",
     "@rijkshuisstijl-community/button-react": "workspace:*",
+    "@rijkshuisstijl-community/card-react": "workspace:*",
     "@rijkshuisstijl-community/dot-badge-react": "workspace:*",
     "@rijkshuisstijl-community/figure-react": "workspace:*",
     "@rijkshuisstijl-community/icon-react": "workspace:*",

packages/components-react/library-react/src/index.ts

@@ -34,7 +34,7 @@ export {
   SecondaryActionButton,
   SubtleButton,
 } from '@rijkshuisstijl-community/button-react';
-export { Card } from './Card';
+export { Card } from '@rijkshuisstijl-community/card-react';
 export {
   CardAsLink,
   type CardAsLinkProps,