@developer-overheid-nl/don-register-components 1.0.0 → 1.1.0

package/README.md

@@ -1,20 +1,20 @@
-# Register Site Components
-
-> Deze package bevat de generieke React componenten voor een register site.
-
-![NPM License](https://img.shields.io/npm/l/%40developer-overheid-nl%2Fdon-register-components)
-[![NPM Version](https://img.shields.io/npm/v/%40developer-overheid-nl%2Fdon-register-components)](https://www.npmjs.com/package/@developer-overheid-nl/don-register-components)
-![NPM Last Update](https://img.shields.io/npm/last-update/%40developer-overheid-nl%2Fdon-register-components)
-
-## Gebruik
-
-Deze package wordt gebruikt in de register sites van developer.overheid.nl en in register-site-template repository.
-
-De package heeft o.a. de volgende dependencies:
-
-- [Rijkshuisstijl Community](https://www.rijkshuisstijl-community.nl/) voor de React componenten, CSS en design tokens
-- [@developer-overheid-nl/don-register-locales](https://www.npmjs.com/package/@developer-overheid-nl/don-register-locales)
-
-## Changelog
-
-Zie de [CHANGELOG](./CHANGELOG.md) voor een overzicht van de wijzigingen in deze package.
+# Register Site Components
+
+> Deze package bevat de generieke React componenten voor een register site.
+
+![NPM License](https://img.shields.io/npm/l/%40developer-overheid-nl%2Fdon-register-components)
+[![NPM Version](https://img.shields.io/npm/v/%40developer-overheid-nl%2Fdon-register-components)](https://www.npmjs.com/package/@developer-overheid-nl/don-register-components)
+![NPM Last Update](https://img.shields.io/npm/last-update/%40developer-overheid-nl%2Fdon-register-components)
+
+## Gebruik
+
+Deze package wordt gebruikt in de register sites van developer.overheid.nl en in register-site-template repository.
+
+De package heeft o.a. de volgende dependencies:
+
+- [Rijkshuisstijl Community](https://www.rijkshuisstijl-community.nl/) voor de React componenten, CSS en design tokens
+- [@developer-overheid-nl/don-register-locales](https://www.npmjs.com/package/@developer-overheid-nl/don-register-locales)
+
+## Changelog
+
+Zie de [CHANGELOG](./CHANGELOG.md) voor een overzicht van de wijzigingen in deze package.

package/package.json

@@ -5,7 +5,7 @@
   "license": "EUPL-1.2",
   "private": false,
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "keywords": [],
   "publishConfig": {
     "access": "public"
@@ -13,22 +13,25 @@
   "exports": {
     ".": "./src/index.ts",
     "./client": "./src/client.ts",
+    "./analytics": "./src/analytics/index.ts",
     "./i18n": "./src/i18n.ts"
   },
   "main": "./src/index.ts",
   "files": [
     "src/",
-    "tsconfig.json"
+    "tsconfig.json",
+    "CHANGELOG.md"
   ],
   "dependencies": {
-    "@rijkshuisstijl-community/components-css": "11.0.0",
-    "@rijkshuisstijl-community/components-react": "10.0.0",
+    "@piwikpro/react-piwik-pro": "2.5.0",
+    "@rijkshuisstijl-community/components-css": "12.0.0",
+    "@rijkshuisstijl-community/components-react": "11.0.0",
     "@rijkshuisstijl-community/design-tokens": "11.0.0",
     "@types/parse-link-header": "^2.0.3",
     "clsx": "2.1.1",
-    "i18next": "25.7.3",
+    "i18next": "25.8.4",
     "parse-link-header": "^2.0.0",
-    "react-i18next": "16.5.1",
+    "react-i18next": "16.5.4",
     "react-markdown": "10.1.0",
     "remark-behead": "^3.1.0",
     "@developer-overheid-nl/don-register-locales": "1.0.0"
@@ -37,7 +40,7 @@
     "@vitejs/plugin-react": "^5.1.2",
     "rimraf": "^6.1.2",
     "typescript": "5.9.3",
-    "vite": "7.3.0",
+    "vite": "7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {

package/src/alert/Alert.tsx

@@ -1,19 +1,19 @@
-import {
-  Alert as RHCAlert,
-  type AlertProps as RHCAlertProps,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import type { PropsWithChildren } from "react";
-import styles from "./styles.module.css";
-
-export interface AlertProps extends RHCAlertProps {
-  className?: string;
-}
-
-const Alert = (props: PropsWithChildren<AlertProps>) => {
-  const { className } = props;
-
-  return <RHCAlert className={clsx(className, styles.alert)} {...props} />;
-};
-
-export default Alert;
+import {
+  Alert as RHCAlert,
+  type AlertProps as RHCAlertProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import styles from "./styles.module.css";
+
+export interface AlertProps extends RHCAlertProps {
+  className?: string;
+}
+
+const Alert = (props: PropsWithChildren<AlertProps>) => {
+  const { className } = props;
+
+  return <RHCAlert className={clsx(className, styles.alert)} {...props} />;
+};
+
+export default Alert;

package/src/alert/styles.module.css

@@ -1,3 +1,3 @@
-.alert {
-  --utrecht-space-around: 1;
-}
+.alert {
+  --utrecht-space-around: 1;
+}

package/src/alignBox/AlignBox.tsx

@@ -1,110 +1,111 @@
-import clsx from "clsx";
-import type React from "react";
-import type { ReactNode } from "react";
-import styles from "./styles.module.css";
-
-type Align =
-  | "left"
-  | "center"
-  | "right"
-  | "top"
-  | "bottom"
-  | "middle"
-  | "top-left"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-right"
-  | "stretch"
-  | "space-between"
-  | "space-around"
-  | "space-evenly";
-
-type Gap = "none" | "small" | "medium" | "large";
-
-export interface AlignBoxProps {
-  align?: Align;
-  gap?: Gap;
-  direction?: "row" | "column";
-  display?: "block" | "inline";
-  className?: string;
-  children: ReactNode;
-}
-
-const getAlignmentClass = (align: Align): string => {
-  switch (align) {
-    case "left":
-      return styles.left;
-    case "center":
-      return styles.center;
-    case "right":
-      return styles.right;
-    case "top":
-      return styles.top;
-    case "bottom":
-      return styles.bottom;
-    case "middle":
-      return styles.middle;
-    case "top-left":
-      return styles.topLeft;
-    case "top-right":
-      return styles.topRight;
-    case "bottom-left":
-      return styles.bottomLeft;
-    case "bottom-right":
-      return styles.bottomRight;
-    case "stretch":
-      return styles.stretch;
-    case "space-between":
-      return styles.spaceBetween;
-    case "space-around":
-      return styles.spaceAround;
-    case "space-evenly":
-      return styles.spaceEvenly;
-    default:
-      return styles.center;
-  }
-};
-
-const getGapClass = (gap: Gap): string => {
-  switch (gap) {
-    case "none":
-      return styles.gapNone;
-    case "small":
-      return styles.gapSmall;
-    case "medium":
-      return styles.gapMedium;
-    case "large":
-      return styles.gapLarge;
-    default:
-      return styles.gapMedium;
-  }
-};
-
-const AlignBox: React.FC<AlignBoxProps> = ({
-  align = "center",
-  gap = "none",
-  direction = "row",
-  display = "block",
-  className,
-  children,
-}) => {
-  const alignmentClass = getAlignmentClass(align);
-  const gapClass = getGapClass(gap);
-
-  return (
-    <div
-      className={clsx(
-        styles.alignBox,
-        styles[direction],
-        styles[display],
-        alignmentClass,
-        gapClass,
-        className ?? "",
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default AlignBox;
+import clsx from "clsx";
+import type React from "react";
+import type { ReactNode } from "react";
+import styles from "./styles.module.css";
+
+type Align =
+  | "left"
+  | "center"
+  | "right"
+  | "top"
+  | "bottom"
+  | "middle"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "stretch"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+
+type Gap = "none" | "small" | "medium" | "large";
+
+export interface AlignBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  align?: Align;
+  gap?: Gap;
+  direction?: "row" | "column";
+  display?: "block" | "inline";
+  children: ReactNode;
+}
+
+const getAlignmentClass = (align: Align): string => {
+  switch (align) {
+    case "left":
+      return styles.left;
+    case "center":
+      return styles.center;
+    case "right":
+      return styles.right;
+    case "top":
+      return styles.top;
+    case "bottom":
+      return styles.bottom;
+    case "middle":
+      return styles.middle;
+    case "top-left":
+      return styles.topLeft;
+    case "top-right":
+      return styles.topRight;
+    case "bottom-left":
+      return styles.bottomLeft;
+    case "bottom-right":
+      return styles.bottomRight;
+    case "stretch":
+      return styles.stretch;
+    case "space-between":
+      return styles.spaceBetween;
+    case "space-around":
+      return styles.spaceAround;
+    case "space-evenly":
+      return styles.spaceEvenly;
+    default:
+      return styles.center;
+  }
+};
+
+const getGapClass = (gap: Gap): string => {
+  switch (gap) {
+    case "none":
+      return styles.gapNone;
+    case "small":
+      return styles.gapSmall;
+    case "medium":
+      return styles.gapMedium;
+    case "large":
+      return styles.gapLarge;
+    default:
+      return styles.gapMedium;
+  }
+};
+
+const AlignBox: React.FC<AlignBoxProps> = ({
+  align = "center",
+  gap = "none",
+  direction = "row",
+  display = "block",
+  className,
+  children,
+  ...restProps
+}) => {
+  const alignmentClass = getAlignmentClass(align);
+  const gapClass = getGapClass(gap);
+
+  return (
+    <div
+      className={clsx(
+        styles.alignBox,
+        styles[direction],
+        styles[display],
+        alignmentClass,
+        gapClass,
+        className ?? "",
+      )}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default AlignBox;

package/src/alignBox/styles.module.css

@@ -1,106 +1,106 @@
-.alignBox {
-  display: flex;
-  inline-size: 100%;
-
-  :global(.no-shrink) {
-    flex-shrink: 0;
-  }
-}
-
-.inline {
-  inline-size: max-content;
-}
-
-.block {
-  inline-size: 100%;
-}
-
-.row {
-  flex-direction: row;
-}
-
-.column {
-  flex-direction: column;
-}
-
-.left {
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.center,
-.middle {
-  align-items: center;
-  justify-content: center;
-}
-
-.right {
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.top {
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.bottom {
-  align-items: flex-end;
-  justify-content: center;
-}
-
-.topLeft {
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-
-.topRight {
-  align-items: flex-start;
-  justify-content: flex-end;
-}
-
-.bottomLeft {
-  align-items: flex-end;
-  justify-content: flex-start;
-}
-
-.bottomRight {
-  align-items: flex-end;
-  justify-content: flex-end;
-}
-
-.stretch {
-  align-items: stretch;
-  justify-content: stretch;
-}
-
-.spaceBetween {
-  align-items: center;
-  justify-content: space-between;
-}
-
-.spaceAround {
-  align-items: center;
-  justify-content: space-around;
-}
-
-.spaceEvenly {
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-.gapNone {
-  gap: 0;
-}
-
-.gapSmall {
-  gap: 0.5rem;
-}
-
-.gapMedium {
-  gap: 1rem;
-}
-
-.gapLarge {
-  gap: 2rem;
-}
+.alignBox {
+  display: flex;
+  inline-size: 100%;
+
+  :global(.no-shrink) {
+    flex-shrink: 0;
+  }
+}
+
+.inline {
+  inline-size: max-content;
+}
+
+.block {
+  inline-size: 100%;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.left {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.center,
+.middle {
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.top {
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.bottom {
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.topLeft {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.topRight {
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.bottomLeft {
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+.bottomRight {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.stretch {
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.spaceBetween {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.spaceAround {
+  align-items: center;
+  justify-content: space-around;
+}
+
+.spaceEvenly {
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.gapNone {
+  gap: 0;
+}
+
+.gapSmall {
+  gap: 0.5rem;
+}
+
+.gapMedium {
+  gap: 1rem;
+}
+
+.gapLarge {
+  gap: 2rem;
+}

package/src/analytics/PiwikPro.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import PiwikPro, {
+  ContentTracking,
+  type Dimensions,
+  DownloadAndOutlink,
+  ErrorTracking,
+  PageViews,
+  SiteSearch,
+} from "@piwikpro/react-piwik-pro";
+import { useEffect } from "react";
+
+interface AnalyticsProps {
+  siteId: string;
+  accountAddress: string;
+  dataLayerName?: string;
+  trackJSErrors?: boolean;
+  downloadExtensions?: string[];
+  pageTitle?: string;
+  isSearchPage?: boolean;
+  searchObject?: {
+    keyword: string;
+    category?: string;
+    searchCount?: number;
+    dimensions?: Dimensions;
+  };
+}
+
+// Default extra download extensions in addition to the standard ones tracked by Piwik Pro.
+const DOWNLOAD_EXTENSIONS = ["json", "yaml", "yml"];
+
+export default function Analytics(props: AnalyticsProps) {
+  /* const nonce = `n.${Math.random() * 1000000}`; // TODO: replace with nanoid or uuid */
+  const {
+    siteId,
+    accountAddress,
+    dataLayerName,
+    trackJSErrors = true,
+    pageTitle,
+    isSearchPage,
+    searchObject,
+  } = props;
+  const downloadExtensions = [
+    ...DOWNLOAD_EXTENSIONS,
+    ...(props.downloadExtensions || []),
+  ];
+
+  PiwikPro.initialize(siteId, accountAddress, {
+    /* nonce, */
+    dataLayerName,
+  });
+
+  DownloadAndOutlink.addDownloadExtensions(downloadExtensions);
+
+  ContentTracking.trackAllContentImpressions();
+  ContentTracking.trackVisibleContentImpressions(true);
+
+  if (trackJSErrors) {
+    ErrorTracking.enableJSErrorTracking();
+  }
+
+  useEffect(() => {
+    if (pageTitle && !isSearchPage) {
+      PageViews.trackPageView(pageTitle);
+    } else if (isSearchPage && searchObject?.keyword) {
+      const { keyword, category, searchCount, dimensions } = searchObject;
+      SiteSearch.trackSiteSearch(keyword, category, searchCount, dimensions);
+    }
+  }, [pageTitle, isSearchPage, searchObject]);
+
+  return null;
+}

package/src/analytics/index.ts

@@ -0,0 +1 @@
+export { default as PiwikPro } from "./PiwikPro";

package/src/article/Article.tsx

@@ -1,10 +1,10 @@
-import {
-  type ArticleProps,
-  Article as RHCArticle,
-} from "@rijkshuisstijl-community/components-react";
-
-const Article = (props: ArticleProps) => {
-  return <RHCArticle {...props} />;
-};
-
-export default Article;
+import {
+  type ArticleProps,
+  Article as RHCArticle,
+} from "@rijkshuisstijl-community/components-react";
+
+const Article = (props: ArticleProps) => {
+  return <RHCArticle {...props} />;
+};
+
+export default Article;