chore(components): Utrecht React components toevoegen (#266)

- Utrecht React components toegevoegd --------- Co-authored-by: Jaap-Hein Wester <[email protected]>
nl-design-system · Oct 3, 2024 · 0a66b8d · 0a66b8d
1 parent 8c77e1b
commit 0a66b8d
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 8 deletions.
diff --git a/packages/components-react/README.md b/packages/components-react/README.md
@@ -0,0 +1,20 @@
+# React Componenten voor het LUX Design System
+
+Deze package bevat de React componenten van het LUX Design System.  
+Je kan deze package gebruiken in je React- of NextJS-applicatie.
+
+Het CSS component dat het LUX design system en de `lux-`- en `utrecht-`-classnames de juiste styling geeft staan in aparte packages. Vergeet niet om deze ook te installeren, samen met het `@lux-design-system/design-tokens`-package voor de design tokens.
+
+## Installeren
+
+### NPM
+
+`npm install @lux-design-system/components-react --save-dev`
+
+### Yarn
+
+`yarn add @lux-design-system/components-react --dev`
+
+### PNPM
+
+`pnpm add @lux-design-system/components-react --save-dev`
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,16 +1,16 @@
 {
   "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",
+  "description": "React component library for LUX, the Design System for Logius, based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@lux-design-system/components-react",
   "keywords": [
-    "nl-design-system"
+    "nl-design-system",
+    "lux-design-system"
   ],
-  "private": true,
+  "private": false,
   "publishConfig": {
-    "access": "restricted",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "repository": {
     "type": "git+ssh",
@@ -19,6 +19,7 @@
   },
   "scripts": {
     "prebuild": "npm run clean",
+    "prepack": "npm run build",
     "build": "npm-run-all build:**",
     "build:components": "vite build",
     "clean": "rimraf dist/ pages/",
@@ -33,6 +34,8 @@
     "dist/"
   ],
   "dependencies": {
+    "@utrecht/component-library-css": "5.2.0",
+    "@utrecht/component-library-react": "6.2.0",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "lodash.chunk": "4.2.0"

diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts
@@ -0,0 +1 @@
+import '@utrecht/component-library-css/dist/index.css';
diff --git a/packages/components-react/vite.config.ts b/packages/components-react/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'Components React',
       // the proper extensions will be added
-      fileName: 'components-react',
+      fileName: 'index',
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -24,6 +24,7 @@ export default defineConfig({
         },
       },
     },
+    minify: false,
   },
   plugins: [react()],
 });
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -27,6 +27,7 @@
     "@chromatic-com/storybook": "1.6.1",
     "@lux-design-system/assets": "workspace:*",
     "@lux-design-system/components-css": "workspace:*",
+    "@lux-design-system/components-react": "workspace:*",
     "@lux-design-system/design-tokens": "workspace:*",
     "@lux-design-system/font": "workspace:*",
     "@lux-design-system/web-components-react": "workspace:*",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/proprietary/design-tokens/README.md b/proprietary/design-tokens/README.md
@@ -15,7 +15,7 @@ In design tokens worden de design beslissingen vastgelegd voor het design system
 
 ### PNPM
 
-`pnpm add -D @lux-design-system/design-tokens --save-dev`
+`pnpm add @lux-design-system/design-tokens --save-dev`
 
 Daarna zijn de volgende tokens beschikbaar:
 

diff --git a/proprietary/font/README.md b/proprietary/font/README.md
@@ -15,7 +15,7 @@ Deze package bevat de referenties naar de lettertypes RijksoverheidSerif en Rijk
 
 ### PNPM
 
-`pnpm add -D @lux-design-system/font --save-dev`
+`pnpm add @lux-design-system/font --save-dev`
 
 Daarna zijn de volgende `@font-face` `font-family`s beschikbaar:
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import '@utrecht/component-library-css/dist/index.css';