@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/components/Datepicker/useDatepicker.tsx

@@ -1,146 +0,0 @@
-'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

@@ -1,331 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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',
-      },
-    ],
-  },
-};