nl-design-system · JoeriRoijenga · Dec 10, 2024 · Dec 10, 2024 · Dec 11, 2024 · Dec 11, 2024
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -43,6 +43,7 @@
     "@rijkshuisstijl-community/logius-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/mijnoverheid-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*",
+    "@rijkshuisstijl-community/web-components": "workspace:*",
     "@rijkshuisstijl-community/web-components-react": "workspace:*",
     "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
     "@storybook/addon-a11y": "8.4.7",
@@ -85,5 +86,8 @@
     "twig": "1.17.1",
     "typescript": "5.7.2",
     "vite": "6.0.2"
+  },
+  "dependencies": {
+    "@storybook/web-components": "8.4.7"
   }
 }
diff --git a/packages/storybook/src/web-components/hero.stories.tsx b/packages/storybook/src/web-components/hero.stories.tsx
@@ -0,0 +1,120 @@
+import { HeroWebComponent } from '@rijkshuisstijl-community/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
+HeroWebComponent.define();
+
+const meta = {
+  title: 'Web Components/Hero',
+  id: 'rhc-hero-web',
+  component: 'rhc-hero',
+  argTypes: {
+    aspectRatio: {
+      name: 'Aspect Ratio',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['16 / 9', '1 / 1', '4 / 3'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: '16 / 9' },
+      },
+    },
+    heading: {
+      name: 'Heading Text',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+    heroMessage: {
+      name: 'Show Hero Message',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['true', 'false'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    imageAlt: {
+      name: 'Image Alt Text',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+    subHeading: {
+      name: 'Sub Heading Text',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+    textAlign: {
+      name: 'Text Alignment',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['start', 'end'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: 'start' },
+      },
+    },
+    borderRadiusCorner: {
+      name: 'Border Radius Corner',
+      type: { name: 'string' },
+      control: 'select',
+      options: ['start-start', 'start-end', 'end-start', 'end-end'],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: 'null' },
+      },
+    },
+    headingLevel: {
+      name: 'Heading Level',
+      type: { name: 'string' },
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6],
+      table: {
+        category: 'Attributes',
+        defaultValue: { summary: '3' },
+      },
+    },
+    imageSrc: {
+      name: 'Image Source URL',
+      type: { name: 'string' },
+      control: 'text',
+      table: {
+        category: 'Attributes',
+      },
+    },
+  },
+  args: {
+    aspectRatio: '16 / 9',
+    heading: 'heading text',
+    heroMessage: 'true',
+    imageAlt: 'image alt text',
+    subHeading: 'sub heading text',
+    textAlign: 'start',
+    borderRadiusCorner: 'start-start',
+    headingLevel: 3,
+    imageSrc:
+      'https://raw.githubusercontent.com/nl-design-system/rijkshuisstijl-community/main/proprietary/assets/src/placeholder.jpg',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    status: {
+      type: 'UNSTABLE',
+    },
+    docs: {
+      description: {
+        component: 'Hero',
+      },
+    },
+  },
+} as Meta<typeof HeroWebComponent>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};
diff --git a/packages/web-components/index.html b/packages/web-components/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web Component Test</title>
+    <script type="module" src="./dist/index.mjs"></script>
+    <script type="module">
+      import { HeroWebComponent } from './dist/index.mjs';
+      HeroWebComponent.define();
+    </script>
+    <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/design-tokens/dist/index.css" />
+  </head>
+  <body class="rhc-theme">
+    <rhc-hero heading="heading wc" />
+  </body>
+</html>
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@rijkshuisstijl-community/web-components",
+  "version": "1.0.0",
+  "author": "Community for NL Design System",
+  "description": "Generic web components bundle based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/yyyy/yyyy.esm.js",
+  "files": [
+    "dist/"
+  ],
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
+    "directory": "packages/web-components"
+  },
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "vite build",
+    "clean": "rimraf dist/",
+    "start": "vite"
+  },
+  "devDependencies": {
+    "@rijkshuisstijl-community/components-css": "workspace:*",
+    "@rijkshuisstijl-community/components-react": "workspace:*",
+    "@rijkshuisstijl-community/design-tokens": "workspace:*",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "@utrecht/component-library-css": "7.0.0",
+    "@vitejs/plugin-react": "4.3.4",
+    "rimraf": "6.0.1",
+    "tslib": "2.8.1",
+    "typescript": "5.7.2",
+    "vite": "6.0.3",
+    "vite-plugin-dts": "4.3.0",
+    "vite-plugin-static-copy": "2.2.0"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  }
+}
diff --git a/packages/web-components/src/components/BaseComponent.tsx b/packages/web-components/src/components/BaseComponent.tsx
@@ -0,0 +1,40 @@
+import ReactDOM from 'react-dom/client';
+
+export abstract class BaseWebComponent extends HTMLElement {
+  protected root: ReactDOM.Root;
+  static get tagName(): string {
+    throw new Error('tagName must be defined in the derived class');
+  }
+
+  static observedAttributes: string[];
+
+  constructor(stylesheet: string) {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    this.root = ReactDOM.createRoot(shadowRoot);
+
+    const style: CSSStyleSheet = new CSSStyleSheet();
+    style.replaceSync(stylesheet);
+    shadowRoot.adoptedStyleSheets = [style];
+  }
+
+  connectedCallback(): void {
+    this.render();
+  }
+
+  attributeChangedCallback(): void {
+    this.render();
+  }
+
+  disconnectedCallback(): void {
+    this.root.unmount();
+  }
+
+  protected abstract render(): void;
+
+  static define(): void {
+    if (!customElements.get(this.tagName)) {
+      customElements.define(this.tagName, this as unknown as CustomElementConstructor);
+    }
+  }
+}
diff --git a/packages/web-components/src/components/hero/index.tsx b/packages/web-components/src/components/hero/index.tsx
@@ -0,0 +1,47 @@
+import stylesheet from '@rijkshuisstijl-community/components-css/dist/index.css?inline';
+import { Hero, HeroProps } from '@rijkshuisstijl-community/components-react';
+import { BaseWebComponent } from '../BaseComponent';
+
+export type HeroWebComponentAttributes = HeroProps;
+
+export class HeroWebComponent extends BaseWebComponent {
+  static override tagName: string = 'rhc-hero';
+  static override observedAttributes: string[] = [
+    'aspectratio',
+    'heading',
+    'heromessage',
+    'imagealt',
+    'subheading',
+    'textalign',
+    'borderradiuscorner',
+    'headinglevel',
+    'imagesrc',
+  ];
+
+  constructor() {
+    super(stylesheet);
+  }
+
+  render(): void {
+    this.root.render(
+      <Hero
+        aspectRatio={(this.getAttribute('aspectRatio') as HeroProps['aspectRatio']) ?? undefined}
+        borderRadiusCorner={(this.getAttribute('borderRadiusCorner') as HeroProps['borderRadiusCorner']) ?? undefined}
+        heading={this.getAttribute('heading') ?? 'default heading'}
+        imageAlt={this.getAttribute('imageAlt') ?? 'image alt'}
+        subHeading={this.getAttribute('subHeading') ?? 'sub heading'}
+        textAlign={(this.getAttribute('textAlign') as HeroProps['textAlign']) ?? undefined}
+        headingLevel={
+          ((this.getAttribute('headingLevel') &&
+            Number(this.getAttribute('headingLevel'))) as HeroProps['headingLevel']) ?? undefined
+        }
+        imageSrc={
+          this.getAttribute('imageSrc') ??
+          'https://raw.githubusercontent.com/nl-design-system/rijkshuisstijl-community/main/proprietary/assets/src/placeholder.jpg'
+        }
+      >
+        <slot />
+      </Hero>,
+    );
+  }
+}
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -0,0 +1 @@
+export { HeroWebComponent, type HeroWebComponentAttributes } from './components/hero';
diff --git a/packages/web-components/tsconfig.json b/packages/web-components/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "outDir": "dist",
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "skipLibCheck": true
+  },
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules/*", "dist", "loader", "**/*.spec.ts", "**/*.spec.tsx"]
+}
diff --git a/packages/web-components/types/css.d.ts b/packages/web-components/types/css.d.ts
@@ -0,0 +1,4 @@
+declare module '*.css?inline' {
+  const content: string;
+  export default content;
+}
diff --git a/packages/web-components/types/global.d.ts b/packages/web-components/types/global.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'rhc-hero': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
diff --git a/packages/web-components/vite.config.mjs b/packages/web-components/vite.config.mjs
@@ -0,0 +1,34 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'RhcWebComponents',
+      formats: ['es'],
+      fileName: 'index',
+    },
+    sourcemap: true,
+    minify: 'terser',
+    target: 'esnext',
+  },
+  plugins: [
+    react(),
+    dts({
+      entryRoot: 'src',
+      insertTypesEntry: true,
+      rollupTypes: true,
+    }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'types/*.d.ts',
+          dest: 'types',
+        },
+      ],
+    }),
+  ],
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { HeroWebComponent, type HeroWebComponentAttributes } from './components/hero';