npm - @dbcdk/react-components - Versions diffs - 0.0.8 → 0.0.10 - Mend

@dbcdk/react-components 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,167 @@
+# DBC React Components
+Reusable React components for DBC projects.
+This library provides a shared, themeable component system used across DBC’s internal (and selected external) applications. It is designed to promote consistency, speed up development, and improve overall quality and accessibility.
+---
+## Purpose of the library
+The goals of this component library are:
+- **Consistency**
+  Provide a unified look and feel across DBC’s digital products, especially internal tools.
+- **Development speed**
+  Reduce development and maintenance time by reusing well-tested components instead of rebuilding UI from scratch.
+- **Quality & accessibility**
+  Components are reviewed and built according to best practices, with accessibility and robustness in mind, ensuring a strong baseline quality.
+- **Reduced third-party dependency**
+  Increase digital independence by building and sharing our own components across the organisation, reducing reliance on external NPM packages.
+---
+## Getting started
+### 1) Install the package
+```bash
+npm install @dbcdk/react-components
+```
+---
+### 2) Import global styles
+> **Important:** The component library requires global styles to be imported once in your application.
+```ts
+import '@dbcdk/react-components/styles.css'
+```
+---
+### 3) Add the theme `<link>` in your root layout (Next.js example)
+The library uses theme CSS files that are dynamically loaded via a `<link>` tag in `<head>`.
+You **must** use the exported `LINK_ID` so the `useTheme()` hook can update the active theme at runtime.
+```tsx
+import { ReactNode } from 'react'
+import { cookies } from 'next/headers'
+import { LINK_ID } from '@dbcdk/react-components'
+import '@dbcdk/react-components/styles.css'
+export default async function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+  const cookieStore = await cookies()
+  const themeId = cookieStore.get('dbc_theme')?.value || 'light'
+  return (
+    <html lang="da">
+      <head>
+        <link id={LINK_ID} rel="stylesheet" href={`/themes/${themeId}.css`} />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+> Theme files are expected to be served from `/themes/<theme>.css`.
+---
+### 4) Switching theme in your application
+Example using `useTheme()`:
+```tsx
+'use client'
+import { AppHeader, Button, useTheme } from '@dbcdk/react-components'
+import { Moon, Sun } from 'lucide-react'
+export default function Header() {
+  const { theme, switchTheme } = useTheme()
+  return (
+    <AppHeader>
+      <Button variant="outlined" onClick={() => switchTheme(theme === 'light' ? 'dark' : 'light')}>
+        {theme === 'light' ? <Moon /> : <Sun />}
+      </Button>
+    </AppHeader>
+  )
+}
+```
+The hook updates the `<link>` tag automatically and persists the selected theme.
+---
+## Using Storybook
+Storybook is the primary documentation and exploration tool for this library.
+### Local Storybook
+```bash
+npm run storybook
+```
+Storybook runs on `http://localhost:6006`.
+### In Storybook you can:
+1. Browse components in the left-hand navigation
+2. Open a story to see variants and states
+3. Adjust props via **Controls**
+4. Read guidelines and usage notes in the **Docs** tab
+---
+## Themes
+Use the 🎨 **theme selector** in the Storybook toolbar to switch between available themes (e.g. light and dark).
+All components are styled using CSS variables defined in the theme files.
+---
+## Accessibility (a11y)
+Accessibility is a first-class concern in this library.
+We aim to ensure that components:
+- Are usable with keyboard navigation
+- Have visible and consistent focus states
+- Work with screen readers
+- Follow common ARIA and semantic HTML best practices
+Storybook includes the a11y addon to help identify issues during development.
+---
+## Contributing
+See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for detailed guidelines on:
+- Folder structure
+- Styling and theming rules
+- Storybook requirements
+- TypeScript conventions
+- Versioning and changesets
+---
+## License
+ISC
+```
+```

package/dist/components/__stories__/_data/tabs.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TabItem } from '../../../components/tabs/Tabs';
+export declare const tabItems: TabItem[];
+export declare const tabArgs: {
+    tabs: TabItem[];
+    variant: 'filled' | 'outlined';
+    header: string;
+    addition: ReactNode;
+};

package/dist/components/__stories__/_data/tabs.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Hourglass, Undo2 } from 'lucide-react';
+import { Button } from '../../../components/button/Button';
+import { Icon } from '../../../components/icon/Icon';
+import { SampleTable } from './table';
+export const tabItems = [
+    {
+        header: 'Afvist af anmelder',
+        id: 1,
+        headerIcon: _jsx(Icon, { severity: "error" }),
+        content: _jsx(SampleTable, {}),
+    },
+    {
+        header: 'Afventer godkendelse',
+        id: 2,
+        headerIcon: _jsx(Hourglass, {}),
+        content: _jsx(SampleTable, {}),
+    },
+    {
+        header: 'Retur til redigering',
+        id: 3,
+        headerIcon: _jsx(Undo2, {}),
+        content: _jsx(SampleTable, {}),
+    },
+];
+export const tabArgs = {
+    tabs: tabItems,
+    variant: 'filled',
+    header: 'Sagsoversigt',
+    addition: _jsx(Button, { children: "Se historik" }),
+};

package/dist/components/accordion/Accordion.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+export interface AccordionItem {
+    header: string;
+    headerIcon?: ReactNode;
+    severity?: Severity;
+    children: ReactNode;
+    disabled?: boolean;
+}
+type Size = 'sm' | 'md' | 'lg';
+type Mode = 'single' | 'multiple';
+export interface AccordionProps {
+    items: AccordionItem[];
+    mode?: Mode;
+    size?: Size;
+    /** Uncontrolled defaults */
+    defaultOpenIndex?: number | null;
+    defaultOpenIndexes?: number[];
+    /** Controlled state */
+    openIndex?: number | null;
+    openIndexes?: number[];
+    /** Change callbacks */
+    onOpenIndexChange?: (index: number | null) => void;
+    onOpenIndexesChange?: (indexes: number[]) => void;
+}
+export declare function Accordion({ items, mode, size, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }: AccordionProps): JSX.Element;
+export {};

package/dist/components/accordion/Accordion.js ADDED Viewed

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import styles from './Accordion.module.css';
+import { Headline } from '../headline/Headline';
+function uniqSorted(nums) {
+    return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+export function Accordion({ items, mode = 'single', size = 'md', defaultOpenIndex = null, defaultOpenIndexes = [], openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }) {
+    const uid = useId();
+    const isControlledSingle = mode === 'single' && openIndex !== undefined;
+    const isControlledMultiple = mode === 'multiple' && openIndexes !== undefined;
+    const [internalOpenIndex, setInternalOpenIndex] = useState(mode === 'single' ? defaultOpenIndex : null);
+    const [internalOpenIndexes, setInternalOpenIndexes] = useState(mode === 'multiple' ? uniqSorted(defaultOpenIndexes) : []);
+    const currentOpenIndex = mode === 'single' ? (isControlledSingle ? openIndex : internalOpenIndex) : null;
+    const currentOpenIndexes = useMemo(() => mode === 'multiple'
+        ? isControlledMultiple
+            ? uniqSorted(openIndexes)
+            : internalOpenIndexes
+        : [], [mode, isControlledMultiple, openIndexes, internalOpenIndexes]);
+    const openSet = useMemo(() => new Set(mode === 'single'
+        ? currentOpenIndex !== null
+            ? [currentOpenIndex]
+            : []
+        : currentOpenIndexes), [mode, currentOpenIndex, currentOpenIndexes]);
+    function setSingle(next) {
+        if (isControlledSingle)
+            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+        else {
+            setInternalOpenIndex(next);
+            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+        }
+    }
+    function setMultiple(next) {
+        const normalized = uniqSorted(next);
+        if (isControlledMultiple)
+            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
+        else {
+            setInternalOpenIndexes(normalized);
+            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
+        }
+    }
+    function toggle(index) {
+        const item = items[index];
+        if (!item || item.disabled)
+            return;
+        if (mode === 'single') {
+            const isOpen = openSet.has(index);
+            setSingle(isOpen ? null : index);
+            return;
+        }
+        // multiple
+        const isOpen = openSet.has(index);
+        if (isOpen)
+            setMultiple(currentOpenIndexes.filter(i => i !== index));
+        else
+            setMultiple([...currentOpenIndexes, index]);
+    }
+    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => {
+            const isOpen = openSet.has(i);
+            const isDisabled = !!item.disabled;
+            const buttonId = `${uid}-acc-btn-${i}`;
+            const panelId = `${uid}-acc-panel-${i}`;
+            return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(i), disabled: isDisabled, children: [_jsx("span", { className: styles.title, children: _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header }) }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 20 20", focusable: "false", children: _jsx("path", { d: "M5.5 7.5L10 12l4.5-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: styles.panel, "data-open": isOpen ? 'true' : 'false', children: _jsx("div", { className: styles.content, children: item.children }) })] }, i));
+        }) }));
+}

package/dist/components/accordion/Accordion.module.css ADDED Viewed

@@ -0,0 +1,87 @@
+.container {
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-bg-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: var(--spacing-xxs);
+}
+.trigger {
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  user-select: none;
+  padding: var(--spacing-xs) var(--spacing-md);
+  background: var(--color-bg-contextual);
+  /* IMPORTANT: allow flex children to actually shrink */
+  min-width: 0;
+}
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.disabled .trigger {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+.title {
+  /* IMPORTANT: this is the shrinking area that contains Headline */
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+  /* ensures any overflow is clipped so ellipsis can show */
+  overflow: hidden;
+}
+.chevron {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  flex: 0 0 auto;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+.open .chevron {
+  transform: rotate(180deg);
+}
+/* Collapsible panel using max-height */
+.panel {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--transition-slow) var(--ease-decelerate);
+}
+.panel[data-open='true'] {
+  max-height: 999px;
+}
+.content {
+  padding: var(--spacing-md) 0;
+}
+/* Sizes */
+.sm .trigger,
+.sm .content {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+.md .trigger {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+.lg .trigger {
+  padding: var(--spacing-md) var(--spacing-md);
+}

package/dist/components/button/Button.module.css CHANGED Viewed

@@ -47,6 +47,7 @@
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
+  opacity: 0.5;
 }
 /* ==========================================================================

package/dist/components/circle/Circle.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
+type CircleSize = 'xs' | 'sm' | 'md' | 'lg';
 interface CircleProps {
     severity: Severity;
     children?: ReactNode;
     glow?: boolean;
+    pulse?: boolean;
+    size?: CircleSize;
 }
-export declare function Circle({ severity, children, glow }: CircleProps): JSX.Element;
+export declare function Circle({ severity, children, glow, pulse, size }: CircleProps): JSX.Element;
 export {};

package/dist/components/circle/Circle.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Circle.module.css';
-export function Circle({ severity, children, glow }) {
-    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, className: `${styles.circle} ${styles[severity]}` }), children, ' '] }));
+export function Circle({ severity, children, glow, pulse, size = 'sm' }) {
+    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, className: `${styles.circle} ${styles[severity]}` }), children] }));
 }

package/dist/components/circle/Circle.module.css CHANGED Viewed

@@ -10,9 +10,10 @@
 }
 .circle {
+  position: relative;
   display: inline-block;
-  inline-size: var(--component-size-xs);
-  block-size: var(--component-size-xs);
+  inline-size: var(--component-size-sm);
+  block-size: var(--component-size-sm);
   border-radius: var(--border-radius-round);
   flex-shrink: 0;
@@ -60,3 +61,54 @@
 .info[data-glow='true'] {
   box-shadow: 0 0 0 2px var(--color-status-info-bg);
 }
+.circle[data-size='xs'] {
+  inline-size: var(--component-size-xxs);
+  block-size: var(--component-size-xxs);
+}
+.circle[data-size='sm'] {
+  inline-size: 14px;
+  block-size: 14px;
+}
+.circle[data-size='md'] {
+  inline-size: 18px;
+  block-size: 18px;
+}
+.circle[data-size='lg'] {
+  inline-size: 22px;
+  block-size: 22px;
+}
+.circle[data-pulse='true']::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: inherit;
+  animation: circle-pulse 1.6s ease-out infinite;
+  pointer-events: none;
+}
+@keyframes circle-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  60% {
+    transform: scale(2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .circle[data-pulse='true']::after {
+    animation: none;
+  }
+}

package/dist/components/code-block/CodeBlock.module.css CHANGED Viewed

@@ -13,7 +13,7 @@
 }
 .container.sm {
-  padding: var(--spacing-xxs);
+  padding: var(--spacing-xs);
   padding-inline-end: calc(var(--spacing-xxs) + 40px);
   min-height: 0;
 }

package/dist/components/datetime-picker/DateTimePicker.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Input } from '../../components/forms/input/Input';
+import { type UtcIsoString } from './dateTimeHelpers';
 type Mode = 'single' | 'range';
 type WeekStart = 0 | 1;
-export type DateValue = Date | null | {
-    start: Date | null;
-    end: Date | null;
+export type DateValue = UtcIsoString | null | {
+    start: UtcIsoString | null;
+    end: UtcIsoString | null;
 };
 type InputProps = React.ComponentProps<typeof Input>;
 export interface DateTimePickerProps {
@@ -24,10 +25,6 @@ export interface DateTimePickerProps {
             end: Date;
         };
     }[];
-    /**
-     * Forwarded to the internal <Input />.
-     * DateTimePicker controls: value, onInput/onBlur/onKeyDown, icon, onClear.
-     */
     inputProps?: Omit<InputProps, 'value' | 'onInput' | 'onBlur' | 'icon' | 'onClear' | 'type'>;
     formatDate?: (d: Date, opts: {
         locale: string;