@developer-overheid-nl/don-register-components 1.3.0 → 1.6.1

package/package.json

@@ -3,9 +3,13 @@
   "author": "developer.overheid.nl",
   "description": "The components for the API- and OSS registers",
   "license": "EUPL-1.2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/developer-overheid-nl/don-register-site"
+  },
   "private": false,
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.6.1",
   "keywords": [],
   "publishConfig": {
     "access": "public"
@@ -29,19 +33,17 @@
     "@rijkshuisstijl-community/design-tokens": "11.0.0",
     "@types/parse-link-header": "^2.0.3",
     "clsx": "2.1.1",
-    "i18next": "25.8.4",
+    "i18next": "26.4.2",
     "parse-link-header": "^2.0.0",
-    "react-i18next": "16.5.4",
+    "react-i18next": "17.0.14",
     "react-markdown": "10.1.0",
     "remark-behead": "^3.1.0",
-    "@developer-overheid-nl/don-register-locales": "1.2.0"
+    "@developer-overheid-nl/don-register-locales": "1.2.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^5.1.2",
-    "rimraf": "^6.1.2",
+    "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "vite": "7.1.7",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "8.3.0"
   },
   "peerDependencies": {
     "@types/react": ">=19.2 <19.3",

package/src/Introduction.mdx

@@ -0,0 +1,31 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Introduction" />
+
+# Register Site Components
+
+Dit is de Storybook van `@developer-overheid-nl/don-register-components`: de gedeelde
+React-componenten voor de registersites van developer.overheid.nl (het API-register en
+het OSS-register).
+
+De componenten zijn gebouwd op de [Rijkshuisstijl Community](https://www.rijkshuisstijl-community.nl/)
+(RHC) design-system-componenten, CSS en design tokens, aangevuld met eigen componenten en
+teksten (via `@developer-overheid-nl/don-register-locales`).
+
+## Componenten in de zijbalk
+
+Elke component in de zijbalk heeft een label dat aangeeft hoe de component zich verhoudt
+tot de onderliggende RHC-component:
+
+| Label | Icon | Betekenis |
+| --- | --- | --- |
+| **Re-export** | 🚛 | Rechtstreeks doorgegeven vanuit RHC, zonder eigen aanpassingen. |
+| **Remixed** | ♻️ | Een RHC-component die hier is aangevuld of anders is samengesteld. |
+| **Custom** | ✨ | Een component die volledig eigen is aan deze registry, niet afkomstig uit RHC. |
+| **Deprecated** |  | Verouderd; wordt in een latere versie verwijderd. Gebruik niet in nieuwe code. |
+
+## Meer informatie
+
+- [Broncode van deze package](https://github.com/developer-overheid-nl/don-register-site/tree/main/packages/components)
+- [CHANGELOG](https://github.com/developer-overheid-nl/don-register-site/blob/main/packages/components/CHANGELOG.md)
+- [NPM package](https://www.npmjs.com/package/@developer-overheid-nl/don-register-components)

package/src/alert/Alert.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Alert from "./Alert";
+
+/**
+ * Een Alert toont een bericht op de pagina.
+ *
+ * ## Wijzigingen tov RHC:
+ * - Space around aangepast
+ */
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  tags: ["autodocs", "remixed"],
+  args: {
+    children: "Dit is een melding.",
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["info", "ok", "warning", "error"],
+    },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InfoAlert: Story = {
+  name: "Info",
+  args: {
+    type: "info",
+  },
+};
+
+export const OkAlert: Story = {
+  name: "Ok",
+  args: {
+    type: "ok",
+    children: "De actie is succesvol uitgevoerd.",
+  },
+};
+
+export const WarningAlert: Story = {
+  name: "Warning",
+  args: {
+    type: "warning",
+    children: "Let op: controleer de ingevoerde gegevens.",
+  },
+};
+
+export const ErrorAlert: Story = {
+  name: "Error",
+  args: {
+    type: "error",
+    children: "Er is een fout opgetreden.",
+  },
+};

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.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import AlignBox from "./AlignBox";
+
+/**
+ * AlignBox is een hulpcomponent om kindelementen ten opzichte van elkaar uit
+ * te lijnen (bijv. links, gecentreerd, gespreid) met flexbox.
+ */
+const meta = {
+  title: "Components/AlignBox",
+  component: AlignBox,
+  tags: ["autodocs", "custom"],
+  argTypes: {
+    align: {
+      control: "select",
+      options: [
+        "left",
+        "center",
+        "right",
+        "top",
+        "bottom",
+        "middle",
+        "top-left",
+        "top-right",
+        "bottom-left",
+        "bottom-right",
+        "stretch",
+        "space-between",
+        "space-around",
+        "space-evenly",
+      ],
+    },
+    gap: {
+      control: "select",
+      options: ["none", "small", "medium", "large"],
+    },
+    direction: {
+      control: "select",
+      options: ["row", "column"],
+    },
+    display: {
+      control: "select",
+      options: ["block", "inline"],
+    },
+  },
+  args: {
+    align: "center",
+    gap: "medium",
+    direction: "row",
+    wrap: false,
+    display: "block",
+  },
+  render: (args) => (
+    <AlignBox {...args} style={{ border: "1px dashed #ccc", minHeight: 120 }}>
+      <div style={{ background: "#e0e0e0", padding: "8px 16px" }}>Een</div>
+      <div style={{ background: "#e0e0e0", padding: "8px 16px" }}>Twee</div>
+      <div style={{ background: "#e0e0e0", padding: "8px 16px" }}>Drie</div>
+    </AlignBox>
+  ),
+} satisfies Meta<typeof AlignBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const SpaceBetween: Story = {
+  args: {
+    align: "space-between",
+  },
+};
+
+export const Column: Story = {
+  args: {
+    direction: "column",
+    align: "stretch",
+  },
+};
+
+export const Wrap: Story = {
+  args: {
+    wrap: true,
+    gap: "small",
+  },
+};

package/src/alignBox/AlignBox.tsx

@@ -1,114 +1,114 @@
-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";
-  wrap?: boolean;
-  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",
-  wrap = false,
-  display = "block",
-  className,
-  children,
-  ...restProps
-}) => {
-  const alignmentClass = getAlignmentClass(align);
-  const gapClass = getGapClass(gap);
-
-  return (
-    <div
-      className={clsx(
-        styles.alignBox,
-        styles[direction],
-        wrap && styles.wrap,
-        styles[display],
-        alignmentClass,
-        gapClass,
-        className ?? "",
-      )}
-      {...restProps}
-    >
-      {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";
+  wrap?: boolean;
+  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",
+  wrap = false,
+  display = "block",
+  className,
+  children,
+  ...restProps
+}) => {
+  const alignmentClass = getAlignmentClass(align);
+  const gapClass = getGapClass(gap);
+
+  return (
+    <div
+      className={clsx(
+        styles.alignBox,
+        styles[direction],
+        wrap && styles.wrap,
+        styles[display],
+        alignmentClass,
+        gapClass,
+        className ?? "",
+      )}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default AlignBox;