@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/components/Datepicker/useDatepicker.tsx

@@ -0,0 +1,146 @@
+'use client';
+import { useMemo } from 'react';
+
+export interface DatepickerDate {
+  /** Day of the month */
+  day: number;
+  /** ISO date string in YYYY-MM-DD format */
+  date: string;
+  /** Indicates if the day is selected */
+  selected: boolean;
+  /** Indicates if the day belongs to the current month */
+  isCurrentMonth: boolean;
+}
+
+/**
+ * Represents a day object in the datepicker.
+ */
+interface DayObject extends DatepickerDate {
+  /** Year of the date */
+  year: number;
+  /** Zero-based month (0 = January, 11 = December) */
+  month: number;
+}
+
+interface UseDatepickerOutput {
+  /** Year of the calendar */
+  year: number;
+  /** Zero-based month of the calendar (0 = January, 11 = December) */
+  month: number;
+  /** Weeks in the calendar */
+  rows: DayObject[][];
+  /** Day of the month */
+  day: number;
+  /** ISO date string for the next month */
+  next: string;
+  /** ISO date string for the previous month */
+  prev: string;
+}
+
+/**
+ * Props for the useDatepicker hook.
+ */
+interface UseDatepickerProps {
+  /** ISO date string for the calendar month */
+  date?: string;
+  /** Optional ISO date string for the start of the selection range */
+  selectFrom?: string;
+  /** Optional ISO date string for the end of the selection range */
+  selectTo?: string;
+}
+
+export const useDatepicker = ({ date, selectFrom, selectTo }: UseDatepickerProps): UseDatepickerOutput => {
+  return useMemo(() => {
+    const generateIsoDate = (year: number, month: number, day: number) => {
+      const paddedMonth = String(month + 1).padStart(2, '0');
+      const paddedDay = String(day).padStart(2, '0');
+      return `${year}-${paddedMonth}-${paddedDay}`;
+    };
+
+    const isSelected = (isoDate: string) => {
+      if (!fromTimestamp && !toTimestamp) {
+        return false;
+      }
+
+      const dateTimestamp = new Date(isoDate).getTime();
+      return (
+        (fromTimestamp === null || dateTimestamp >= fromTimestamp) &&
+        (toTimestamp === null || dateTimestamp <= toTimestamp)
+      );
+    };
+
+    const baseDate = date ? new Date(date) : new Date();
+    const year = baseDate.getFullYear();
+    const month = baseDate.getMonth();
+
+    const fromTimestamp = selectFrom ? new Date(selectFrom).getTime() : null;
+    const toTimestamp = selectTo ? new Date(selectTo).getTime() : null;
+
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfMonth = (new Date(year, month, 1).getDay() + 6) % 7; // Start weeks on Monday
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+    const rows: DayObject[][] = [];
+    let currentDay = 1;
+
+    for (let i = 0; i < 6; i++) {
+      const week: DayObject[] = [];
+      for (let j = 0; j < 7; j++) {
+        if (i === 0 && j < firstDayOfMonth) {
+          // Days from the previous month
+          const day = daysInPrevMonth - firstDayOfMonth + j + 1;
+          const prevMonth = month === 0 ? 11 : month - 1;
+          const prevYear = month === 0 ? year - 1 : year;
+          const isoDate = generateIsoDate(prevYear, prevMonth, day);
+          week.push({
+            year: prevYear,
+            month: prevMonth,
+            day,
+            isCurrentMonth: false,
+            date: isoDate,
+            selected: isSelected(isoDate),
+          });
+        } else if (currentDay > daysInMonth) {
+          // Days from the next month
+          const day = currentDay - daysInMonth;
+          const nextMonth = month === 11 ? 0 : month + 1;
+          const nextYear = month === 11 ? year + 1 : year;
+          const isoDate = generateIsoDate(nextYear, nextMonth, day);
+          week.push({
+            year: nextYear,
+            month: nextMonth,
+            day,
+            isCurrentMonth: false,
+            date: isoDate,
+            selected: isSelected(isoDate),
+          });
+          currentDay++;
+        } else {
+          // Days from the current month
+          const isoDate = generateIsoDate(year, month, currentDay);
+          week.push({
+            year,
+            month,
+            day: currentDay,
+            isCurrentMonth: true,
+            date: isoDate,
+            selected: isSelected(isoDate),
+          });
+          currentDay++;
+        }
+      }
+      rows.push(week);
+      if (currentDay > daysInMonth) break; // Stop once we've covered all days
+    }
+
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prev = generateIsoDate(prevYear, prevMonth, 1);
+
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear = month === 11 ? year + 1 : year;
+    const next = generateIsoDate(nextYear, nextMonth, 1);
+
+    return { year, month, rows, day: currentDay, next, prev };
+  }, [date, selectFrom, selectTo]);
+};

package/lib/components/Dialog/Dialog.stories.ts

@@ -0,0 +1,331 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dialog } from './Dialog';
+
+const meta = {
+  title: 'Dialog/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  parameters: {},
+  argTypes: { body: { control: 'text' } },
+  args: {
+    menu: {
+      id: 'context-menu',
+      items: [
+        {
+          label: 'Fjern',
+          id: 'remove',
+        },
+      ],
+    },
+    updatedAt: '1999-05-26',
+    updatedAtLabel: '26. mai 1999',
+    title: 'Title',
+    summary: 'Summary',
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Body: Story = {
+  args: {
+    body:
+      '## Body\n\n' +
+      'Body will be loaded async.\n\n' +
+      '### Syntax\n\n' +
+      'body supporters basic headings from h2 -> h4 + lists.\n\n' +
+      '- List 1\n' +
+      '- List 2\n' +
+      '- List 3\n',
+  },
+};
+
+export const Attachments: Story = {
+  args: {
+    attachments: {
+      items: [
+        {
+          label: 'Dokument 1.pdf',
+          href: '',
+        },
+        {
+          label: 'Dokument 2.pdf',
+          href: '',
+        },
+      ],
+    },
+  },
+};
+
+export const Action: Story = {
+  args: {
+    action: [
+      {
+        label: 'Primary',
+      },
+      {
+        label: 'Secondary',
+      },
+    ],
+  },
+};
+
+export const SeenBy: Story = {
+  args: {
+    ...Action.args,
+    seenBy: {
+      as: 'a',
+      href: '#',
+      label: 'Sett av deg + 24',
+      seenByEndUser: true,
+      seenByOthersCount: 24,
+    },
+    activityLog: {
+      as: 'a',
+      href: '#',
+      label: 'Aktivitetslogg',
+    },
+  },
+};
+
+export const Example: Story = {
+  args: {
+    status: { value: 'requires-attention' },
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+    recipient: {
+      name: 'Bergen Bar',
+    },
+    title: 'Rapportering av bedriftsdata',
+    summary: 'Du må levere bedriftsdata innen 31. oktober.',
+    additionalInfo:
+      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. ' +
+      'Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
+    action: [
+      {
+        label: 'Rapporter bedriftsdata',
+      },
+    ],
+    attachments: {
+      items: [
+        {
+          label: 'Vedtak om innlevering av bedriftsdata.pdf',
+          href: '',
+        },
+      ],
+    },
+  },
+};
+
+export const HistoryContact: Story = {
+  args: {
+    status: { value: 'requires-attention' },
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+    recipient: {
+      name: 'Bergen Bar',
+    },
+    title: 'Rapportering av bedriftsdata',
+    summary: 'Innrapporteringen inneholder feil. Se over og lever på nytt.',
+    additionalInfo:
+      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. ' +
+      'Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
+    action: [
+      {
+        label: 'Rapporter bedriftsdata',
+      },
+    ],
+    attachments: {
+      items: [
+        {
+          label: 'Feilliste.pdf',
+        },
+      ],
+    },
+    history: [
+      {
+        createdAt: '2004-01-01 13:34',
+        createdBy: {
+          name: 'Eirik Horneland',
+        },
+        summary: 'Rapportering ble sendt inn.',
+        attachments: [
+          {
+            label: 'Kvittering.pdf',
+          },
+        ],
+      },
+      {
+        createdAt: '2004-01-01 13:34',
+        createdBy: {
+          imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+
+          name: 'Statistisk sentralbyrå',
+        },
+        summary: 'Du må levere bedriftsdata innen 31. oktober.',
+        attachments: [
+          {
+            label: 'Vedtak om innlevering av bedriftsdata.pdf',
+          },
+        ],
+      },
+    ],
+    contactInfo:
+      'Kontakt oss på svar@ssb.no eller ring 62 88 56 08.\n\n' +
+      'Svartjenesten er åpen alle hverdager fra kl. 9-21 og lørdager fra kl. 10-16.',
+  },
+};
+
+export const Signering: Story = {
+  args: {
+    status: { value: 'requires-attention' },
+
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+
+    recipient: {
+      name: 'Bergen Bar',
+    },
+
+    title: 'Registrere enkeltmannsforetak',
+    summary: 'Skjema er klar til signering.',
+    additionalInfo:
+      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
+
+    action: [
+      {
+        label: 'Gå til signering',
+      },
+    ],
+
+    attachments: {},
+
+    history: {
+      items: [
+        {
+          updatedAt: '2004-01-01 13:34',
+
+          updatedBy: {
+            name: 'Eirik Horneland',
+          },
+
+          summary: 'Rapportering ble sendt inn.',
+
+          attachments: [
+            {
+              label: 'Kvittering.pdf',
+            },
+          ],
+        },
+        {
+          updatedAt: '2004-01-01 13:34',
+
+          updatedBy: {
+            imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+            name: 'Statistisk sentralbyrå',
+          },
+
+          summary: 'Du må levere bedriftsdata innen 31. oktober.',
+
+          attachments: [
+            {
+              label: 'Vedtak om innlevering av bedriftsdata.pdf',
+            },
+          ],
+        },
+      ],
+    },
+
+    contact: {
+      title: 'Ta kontakt',
+      body: 'Ta kontakt for mer informasjon på telefon 99 00 00 00.',
+    },
+  },
+};
+
+export const BrregDraft: Story = {
+  args: {
+    status: { value: 'draft' },
+
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+
+    recipient: {
+      name: 'Bergen Bar',
+    },
+
+    title: 'Registrere enkeltmannsforetak',
+    summary: 'Skjema er opprettet.',
+
+    action: [
+      {
+        label: 'Gå til skjema',
+      },
+      {
+        label: 'Forkast',
+      },
+    ],
+
+    attachments: {},
+    additionalInfo:
+      'Enkeltpersonforetak må registreres i Enhetsregisteret for å få et organisasjonsnummer. Enkelte må også registreres i Foretaksregisteret.',
+  },
+};
+
+export const BrregSign: Story = {
+  args: {
+    ...BrregDraft.args,
+    status: { value: 'requires-attention' },
+    summary: 'Skjema er klar til signering.',
+
+    action: [
+      {
+        label: 'Til signering',
+      },
+      {
+        label: 'Avslå signering',
+      },
+    ],
+
+    history: {
+      items: [
+        {
+          createdAt: '2004-01-01 13:34',
+          createdBy: {
+            type: 'person',
+            name: 'Eirik Horneland',
+          },
+          summary: 'Rapportering ble sendt inn.',
+          attachments: [
+            {
+              label: 'Kvittering.pdf',
+            },
+          ],
+        },
+        {
+          createdAt: '2004-01-01 13:34',
+          createdBy: {
+            imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+            name: 'Statistisk sentralbyrå',
+          },
+
+          summary: 'Du må levere bedriftsdata innen 31. oktober.',
+
+          attachments: [
+            {
+              label: 'Vedtak om innlevering av bedriftsdata.pdf',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};

package/lib/components/Dialog/Dialog.tsx

@@ -0,0 +1,111 @@
+import { MetaBase } from '../Meta';
+import { DialogActivityLog, type DialogActivityLogProps } from './DialogActivityLog';
+import { DialogArticleBase } from './DialogArticleBase';
+import { DialogAttachments, type DialogAttachmentsProps } from './DialogAttachments';
+import { DialogBase } from './DialogBase';
+import { DialogBodyBase } from './DialogBodyBase';
+import { DialogContent } from './DialogContent';
+import { DialogFooter } from './DialogFooter';
+import { DialogHeader } from './DialogHeader';
+import { DialogSeenBy, type DialogSeenByProps } from './DialogSeenBy';
+
+import type { ContextMenuProps } from '../ContextMenu/';
+
+import type { ReactNode } from 'react';
+import { type DialogActionButtonProps, DialogActions } from './DialogActions.tsx';
+import type { DialogRecipientProps, DialogSenderProps } from './DialogHeadings.tsx';
+import { DialogHistory, type DialogHistoryProps } from './DialogHistory';
+import { type DialogBackButtonProps, DialogNav } from './DialogNav';
+import type { DialogStatusProps } from './DialogStatus';
+
+export interface DialogProps {
+  /** Dialog id */
+  id: string;
+  /** Title */
+  title: string;
+  /** Back button */
+  backButton?: DialogBackButtonProps;
+  /** Context menu */
+  menu?: ContextMenuProps;
+  /** Dialog status */
+  status?: DialogStatusProps;
+  /** Updated date time */
+  updatedAt?: string;
+  /** Updated label */
+  updatedAtLabel?: string;
+  /** Due date */
+  dueAt?: string;
+  /** Due at label */
+  dueAtLabel?: string;
+  /** Sender */
+  sender?: DialogSenderProps;
+  /** Recipient  */
+  recipient?: DialogRecipientProps;
+  /** Summary */
+  summary?: string;
+  /** Body (should be an output markdown/html rendered to React / HTML) */
+  body?: ReactNode;
+  /** List of action (buttons) */
+  actions?: DialogActionButtonProps[];
+  /** Dialog attachments */
+  attachments?: DialogAttachmentsProps;
+  /** Dialog is seen by the end user or others */
+  seenBy?: DialogSeenByProps;
+  /** Activity Log */
+  activityLog?: DialogActivityLogProps;
+  /** More information about the dialog, process, etc. */
+  additionalInfo?: string;
+  /** History */
+  history?: DialogHistoryProps;
+}
+
+/**
+ * Full representation of a dialog, including attachments, actions and history,
+ */
+
+export const Dialog = ({
+  backButton,
+  menu,
+  updatedAt,
+  updatedAtLabel,
+  dueAt,
+  dueAtLabel,
+  status,
+  title,
+  sender,
+  recipient,
+  summary = 'Summary.',
+  body,
+  actions = [],
+  attachments,
+  history,
+  seenBy,
+  activityLog,
+  additionalInfo,
+}: DialogProps) => {
+  return (
+    <DialogBase>
+      <DialogNav status={status} dueAt={dueAt} dueAtLabel={dueAtLabel} backButton={backButton} menu={menu} />
+      <DialogArticleBase>
+        <DialogHeader
+          title={title}
+          sender={sender}
+          recipient={recipient}
+          seen={seenBy?.seenByEndUser ?? false}
+          variant="neutral"
+        />
+        <DialogBodyBase>
+          <DialogContent updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} summary={summary} body={body} />
+          {attachments && <DialogAttachments {...attachments} />}
+          {actions?.length > 0 && <DialogActions items={actions} />}
+          <MetaBase>
+            {seenBy && <DialogSeenBy {...seenBy} />}
+            {activityLog && <DialogActivityLog {...activityLog} />}
+          </MetaBase>
+        </DialogBodyBase>
+        {additionalInfo && <DialogFooter additionalInfo={additionalInfo} />}
+        {history && <DialogHistory {...history} />}
+      </DialogArticleBase>
+    </DialogBase>
+  );
+};

package/lib/components/Dialog/DialogActions.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DialogActions } from './DialogActions';
+
+const meta = {
+  title: 'Dialog/Sections/DialogActions',
+  component: DialogActions,
+  tags: ['autodocs'],
+  args: {
+    items: [
+      {
+        label: 'Primary',
+        priority: 'primary',
+        id: 'primary',
+      },
+      {
+        label: 'Secondary',
+        priority: 'secondary',
+        id: 'secondary',
+      },
+    ],
+  },
+} satisfies Meta<typeof DialogActions>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Secondary: Story = {
+  args: {},
+};
+
+export const MultipleButtons: Story = {
+  args: {
+    items: [
+      {
+        id: 'primary',
+        label: 'Primary',
+        priority: 'primary',
+      },
+      {
+        id: 'secondary-1',
+        label: 'Secondary',
+        priority: 'secondary',
+      },
+      {
+        id: 'tertiary-1',
+        label: 'Third action',
+        priority: 'tertiary',
+      },
+      {
+        id: 'tertiary-2',
+        label: 'Fourth action',
+        priority: 'tertiary',
+      },
+    ],
+  },
+};