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

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# @developer-overheid-nl/don-register-components
+
+## 1.1.0
+
+### Minor Changes
+
+- 804dc03: Added Analytics component.
+  - Added `PiwikPro` component to encapsulate Piwik analytics tracking.
+  - Added restProps to `AlignBox` component and `CopyButton` component.
+
+### Patch Changes
+
+- 4447980: Updated dependencies
+
+  Removed standalone postcss.config.cjs files from apps (integrated into astro.config.mjs)
+
+- f7034b9: Updated dependencies:
+  - @rijkshuisstijl-community/components-css
+  - @rijkshuisstijl-community/components-react
+- ded15aa: fix: exclude 'current' property when mapping NavBar items
+
+## 1.0.0
+
+### Major Changes
+
+- d8d2e78: Version 1.0!
+- 8dde9ed: Nieuwe componenten
+
+  - Button
+  - Fieldset
+  - FormFieldLabel
+  - FormFieldTextInput
+
+  Wijzigingen
+
+  - ReadOnlyTextInput: fontVariant toegevoegd.
+
+### Patch Changes
+
+- 3b4f506: Change value to defaultValue in search form.
+- Updated dependencies [8dde9ed]
+- Updated dependencies [d8d2e78]
+  - @developer-overheid-nl/don-register-locales@1.0.0

package/package.json

@@ -5,7 +5,7 @@
   "license": "EUPL-1.2",
   "private": false,
   "type": "module",
-  "version": "1.0.1",
+  "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/alignBox/AlignBox.tsx

@@ -21,12 +21,11 @@ type Align =
 
 type Gap = "none" | "small" | "medium" | "large";
 
-export interface AlignBoxProps {
+export interface AlignBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   align?: Align;
   gap?: Gap;
   direction?: "row" | "column";
   display?: "block" | "inline";
-  className?: string;
   children: ReactNode;
 }
 
@@ -87,6 +86,7 @@ const AlignBox: React.FC<AlignBoxProps> = ({
   display = "block",
   className,
   children,
+  ...restProps
 }) => {
   const alignmentClass = getAlignmentClass(align);
   const gapClass = getGapClass(gap);
@@ -101,6 +101,7 @@ const AlignBox: React.FC<AlignBoxProps> = ({
         gapClass,
         className ?? "",
       )}
+      {...restProps}
     >
       {children}
     </div>

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/copyButton/CopyButton.tsx

@@ -5,13 +5,12 @@ import clsx from "clsx";
 import Icon from "../iconsSprite/Icon";
 import styles from "./styles.module.css";
 
-const CopyButton = ({
-  text,
-  className,
-}: {
+interface CopyButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   text?: string;
-  className?: string;
-}) => {
+}
+
+const CopyButton = ({ text, className, ...restProps }: CopyButtonProps) => {
   const handleCopy = async () => {
     if ("clipboard" in navigator) {
       await navigator.clipboard.writeText(
@@ -29,6 +28,7 @@ const CopyButton = ({
         onClick={handleCopy}
         title="Kopieer naar klembord"
         aria-label="Kopieer naar klembord"
+        {...restProps}
       >
         <Icon className={styles.icon} name="kopieer-inline" />
       </SecondaryActionButton>

package/src/i18n.ts

@@ -7,6 +7,7 @@ const i18nInstance: i18n = createInstance({
   lng: "nl",
   fallbackLng: "nl",
   // debug: true,
+  showSupportNotice: false,
 
   interpolation: {
     escapeValue: false, // not needed for react as it escapes by default