@altinn/altinn-components 0.6.2 → 0.6.3

package/lib/stories/Inbox/InboxProvider.tsx

@@ -1,136 +0,0 @@
-import { type ReactNode, createContext, useContext, useState } from 'react';
-import type { DialogProps } from '../../components';
-
-interface AccountProps {
-  id?: string;
-  type?: string;
-  name?: string;
-}
-
-export interface InboxDefaultValue {
-  accountId?: string | null;
-  accounts: AccountProps[];
-  inboxId?: string | null;
-  dialogId?: string | null;
-  dialogs?: DialogProps[];
-  selectedIds?: string[];
-}
-
-interface InboxProviderProps {
-  children: ReactNode;
-  defaultValue?: InboxDefaultValue;
-}
-
-interface InboxContextProvider {
-  theme?: string;
-  account?: AccountProps;
-  accountId?: string | null;
-  accounts?: AccountProps[];
-  inboxId?: string | null;
-  dialogId?: string | null;
-  onAccountId?: (id: string) => void;
-  onInboxId?: (id: string) => void;
-  onDialogId?: (id: string) => void;
-  items?: (DialogProps & { selected: boolean })[];
-  itemsCount: number;
-  onSelectId?: (id: string) => void;
-  onUnselectAll?: () => void;
-  selectedCount: number;
-}
-
-const InboxContext = createContext<InboxContextProvider>({
-  theme: '',
-  account: {},
-  accountId: null,
-  accounts: [],
-  inboxId: null,
-  dialogId: null,
-  items: [],
-  itemsCount: 0,
-  selectedCount: 0,
-});
-
-export const InboxProvider = ({ defaultValue, children }: InboxProviderProps) => {
-  const [accountId, setAccountId] = useState(defaultValue?.accountId ?? null);
-  const [accounts, setAccounts] = useState(defaultValue?.accounts ?? []);
-  const [inboxId, setInboxId] = useState(defaultValue?.inboxId ?? null);
-  const [dialogId, setDialogId] = useState(defaultValue?.dialogId ?? null);
-  const [selectedIds, setSelectedIds] = useState(defaultValue?.selectedIds || []);
-
-  const onAccountId = (id: string) => {
-    setAccountId(id);
-    setAccounts((prevState) => {
-      return prevState.map((item) => {
-        return {
-          ...item,
-          selected: id === item.id,
-        };
-      });
-    });
-  };
-
-  const account = accounts?.find((item) => item.id === accountId);
-  const theme = account?.type;
-
-  const onInboxId = (id: string) => {
-    setInboxId(id);
-    setDialogId(null);
-  };
-
-  const onDialogId = (id: string) => {
-    setDialogId((prevState) => (prevState === id ? null : id));
-  };
-
-  const onSelectId = (id: string) => {
-    setSelectedIds((prevState) => {
-      if (prevState.includes(id)) {
-        return prevState.filter((prevId) => prevId !== id);
-      }
-      return [...prevState, id];
-    });
-  };
-
-  const onUnselectAll = () => {
-    setSelectedIds([]);
-  };
-
-  const items = defaultValue?.dialogs?.map((item) => ({
-    ...item,
-    selected: selectedIds.includes(item.id),
-    recipient: account
-  }));
-
-  const itemsCount = items?.length || 0;
-  const selectedCount = selectedIds.length;
-
-  return (
-    <InboxContext.Provider
-      value={{
-        theme,
-        account,
-        accounts,
-        accountId,
-        onAccountId,
-        inboxId,
-        onInboxId,
-        dialogId,
-        onDialogId,
-        items,
-        itemsCount,
-        onSelectId,
-        onUnselectAll,
-        selectedCount,
-      }}
-    >
-      {children}
-    </InboxContext.Provider>
-  );
-};
-
-export const useInbox = () => {
-  return useContext(InboxContext);
-};
-
-export const useProfile = () => {
-  return useContext(InboxContext);
-};

package/lib/stories/Inbox/InboxSection.tsx

@@ -1,39 +0,0 @@
-'use client';
-import { actionMenu, useInbox } from './';
-import { BookmarksPage, DialogPage, InboxPage, ProfilePage, SettingsPage } from './';
-
-export function InboxSection() {
-  const { inboxId, dialogId, onDialogId, items = [] } = useInbox();
-
-  if (inboxId === 'bookmarks') {
-    return <BookmarksPage />;
-  }
-
-  if (inboxId === 'settings') {
-    return <SettingsPage />;
-  }
-
-  if (inboxId === 'profile') {
-    return <ProfilePage />;
-  }
-
-  if (dialogId) {
-    const dialog = items.find((item) => item.id === dialogId);
-    return (
-      <DialogPage
-        dialog={{
-          ...dialog,
-          menu: {
-            id: 'context-menu',
-            items: actionMenu,
-          },
-          backButton: {
-            onClick: () => onDialogId(dialogId),
-          },
-        }}
-      />
-    );
-  }
-
-  return <InboxPage />;
-}

package/lib/stories/Inbox/InboxToolbar.tsx

@@ -1,94 +0,0 @@
-'use client';
-import { Toolbar, Button } from '../../components';
-import { useInbox } from './';
-
-export function InboxToolbar({ items }) {
-  const { accounts = [], accountId, onAccountId } = useInbox();
-
-  const senderOptions = {};
-
-  items?.map((item) => {
-    const { sender } = item;
-
-    if (!senderOptions[sender?.name]) {
-      senderOptions[sender?.name] = {
-        label: sender.name,
-        value: sender.name,
-        count: 0,
-      };
-    }
-
-    senderOptions[sender?.name].count++;
-  });
-
-  const currentAccount = accounts?.find((item) => item.id === accountId);
-
-  const accountMenu = {
-    label: currentAccount?.name,
-    value: currentAccount?.id,
-    currentAccount,
-    items: accounts.map((item) => {
-      return {
-        group: item.type,
-        title: item?.name,
-        avatar: item,
-        onClick: () => onAccountId(item.id),
-      };
-    }),
-  };
-
-  const filters =
-    items &&
-    [
-      {
-        name: 'status',
-        label: 'Velg status',
-        optionType: 'checkbox',
-        options: [
-          {
-            groupId: '1',
-            value: 'draft',
-            label: 'Utkast',
-          },
-          {
-            groupId: '1',
-            value: 'sent',
-            label: 'Sendt',
-          },
-          {
-            groupId: '2',
-            value: 'in-progress',
-            label: 'Under arbeid',
-          },
-          {
-            groupId: '2',
-            value: 'requires-attention',
-            label: 'Krever handling',
-          },
-          {
-            groupId: '2',
-            value: 'completed',
-            label: 'Avsluttet',
-          },
-        ],
-      },
-      {
-        name: 'sender',
-        label: 'Velg avsender',
-        optionType: 'checkbox',
-        options: Object.values(senderOptions)?.map((item) => {
-          return {
-            ...item,
-            badge: { label: item?.count.toString() || '2' },
-          };
-        }),
-      },
-    ].map((item) => {
-      return {
-        ...item,
-        removable: true,
-      };
-    });
-
-  return <Toolbar menu={accountMenu} filters={filters}><Button size="sm" variant="text" reverse icon="bookmark">Lagre søk</Button></Toolbar>;
-}

package/lib/stories/Inbox/ProfilePage.tsx

@@ -1,36 +0,0 @@
-'use client';
-import {
-  Avatar,
-  Heading,
-  ListBase,
-  ListItem,
-  MetaItem,
-  PageBase,
-  PageHeader,
-  SectionBase,
-  SectionFooter,
-  SectionHeader,
-  Typography,
-} from '../../components';
-import { useProfile } from './';
-
-export function ProfilePage() {
-  const { account } = useProfile();
-
-  return (
-    <PageBase>
-      <PageHeader
-        title={account.name}
-        description="Fnr: XXXXXXX XXXXX"
-        avatar={{ type: account?.type, name: account.name }}
-        inset
-        padding
-        spacing="lg"
-        color="white"
-        shadow="xs"
-      >
-        <Typography size="lg">Lorem ipsum dolor sit amet</Typography>
-      </PageHeader>
-    </PageBase>
-  );
-}

package/lib/stories/Inbox/SettingsPage.tsx

@@ -1,19 +0,0 @@
-'use client';
-import {
-  Heading,
-  ListBase,
-  ListItem,
-  MetaItem,
-  PageBase,
-  SectionBase,
-  SectionFooter,
-  SectionHeader,
-  Typography,
-} from '../../components';
-import { useProfile } from './';
-
-export function SettingsPage() {
-  const { account } = useProfile;
-
-  return <PageBase inset>{JSON.stringify(account)}</PageBase>;
-}

package/lib/stories/Inbox/accounts/accounts.ts

@@ -1,24 +0,0 @@
-export const accounts = [
-  {
-    type: 'person',
-    name: 'Aurora Mikalsen',
-    selected: true,
-  },
-  {
-    type: 'company',
-    name: 'Auroras blomster',
-  },
-  {
-    type: 'company',
-    name: 'Aurora bier',
-  },
-  {
-    type: 'company',
-    name: 'Auroras bier og blomster',
-  },
-].map((item, index) => {
-  return {
-    ...item,
-    id: 'a' + index,
-  };
-});

package/lib/stories/Inbox/accounts/index.ts

@@ -1 +0,0 @@
-export * from './accounts';

package/lib/stories/Inbox/actionMenu.ts

@@ -1,24 +0,0 @@
-import type { MenuItemProps } from '../../components';
-
-export const actionMenu: MenuItemProps[] = [
-  {
-    id: '1',
-    icon: 'arrow-redo',
-    title: 'Del og gi tilgang',
-  },
-  {
-    id: '2',
-    icon: 'eye',
-    title: 'Marker som lest',
-  },
-  {
-    id: '3',
-    icon: 'archive',
-    title: 'Flytt til arkiv',
-  },
-  {
-    id: '4',
-    icon: 'trash',
-    title: 'Flytt til papirkurv',
-  },
-];

package/lib/stories/Inbox/dialogs/brreg-completed.json

@@ -1,35 +0,0 @@
-{
-  "_createdAt": "2024-10-23T09:33:00Z",
-  "_id": "95f30463-b886-402d-b765-95d9eccf68c0",
-  "_rev": "n6M6ED8lI6VdyYqDQoyiME",
-  "_type": "dialog",
-  "_updatedAt": "2024-10-28T17:07:12Z",
-  "additionalInfo": "For at du skal kunne registrere enkeltpersonforetaket, er du nødt til å drive med næringsaktivitet. Dette er aktivitet som er egnet til å ha et visst omfang og varighet.",
-  "body": "## Nøkkelinformasjon\n- **Foretakets navn:** Olas Enkeltmannsforetak\n- **Organisasjonsnummer:** 999 999 999\n- **Dato registrert**: 14. mai 2024\n\n## Hva nå?\nTips og triks til deg som har startet enkeltpersonforetak:\n- Få en regnskapsfører.\n- Slik driver du selskapet ditt.\n- Bla bla bla.",
-  "history": [
-    {
-      "_key": "334c343862da",
-      "_type": "historyItem",
-      "summary": "Skjema ble opprettet."
-    },
-    {
-      "_key": "f5cc7d1053c9",
-      "_type": "historyItem",
-      "summary": "Bla bla bla."
-    }
-  ],
-  "recipient": {
-    "type": "person",
-    "name": "Rein Regnskapsfører",
-    "imageUrl": null
-  },
-  "sender": {
-    "type": "company",
-    "name": "Brønnøysundregistrene",
-    "imageUrl": "https://cdn.sanity.io/images/z3it2oa7/production/3be5df0229c0b58c7ab59db2ade6208cc83954d2-300x300.png?w=96"
-  },
-  "status": { "label": "Avsluttet", "value": "completed" },
-  "summary": "Gratulerer! Ditt enkeltpersonforetak er godkjent og klart til bruk.",
-  "title": "Registrering av enkeltmannsforetak",
-  "updatedAt": "2024-10-28T17:07:12Z"
-}

package/lib/stories/Inbox/dialogs/brreg-draft.json

@@ -1,41 +0,0 @@
-{
-  "_createdAt": "2024-10-23T07:17:42Z",
-  "_id": "7cda3a28-2171-488c-8554-6b061b48e533",
-  "_rev": "n6M6ED8lI6VdyYqDQoylrM",
-  "_type": "dialog",
-  "_updatedAt": "2024-10-28T17:07:32Z",
-  "additionalInfo": "For at du skal kunne registrere enkeltpersonforetaket, er du nødt til å drive med næringsaktivitet. Dette er aktivitet som er egnet til å ha et visst omfang og varighet.",
-  "body": "## Oppsummering\n- **Foretakets navn:** Olas Enkeltmannsforetak\n- **Lorem ipsum:** Data",
-  "history": [
-    {
-      "_key": "334c343862da",
-      "_type": "historyItem",
-      "summary": "Skjema ble opprettet."
-    },
-    {
-      "_key": "f5cc7d1053c9",
-      "_type": "historyItem",
-      "summary": "Bla bla bla."
-    }
-  ],
-  "recipient": { "type": "person", "name": "Ola Nordmann", "imageUrl": null },
-  "sender": {
-    "type": "company",
-    "name": "Brønnøysundregistrene",
-    "imageUrl": "https://cdn.sanity.io/images/z3it2oa7/production/3be5df0229c0b58c7ab59db2ade6208cc83954d2-300x300.png?w=96"
-  },
-  "status": { "label": "Draft", "value": "draft" },
-  "summary": "Et utkast til skjema er lagret.",
-  "title": "Registrering av enkeltmannsforetak",
-  "updatedAt": "2024-10-28T17:07:32Z",
-  "actions": [
-    {
-      "priority": "primary",
-      "label": "Til skjema"
-    },
-    {
-      "priority": "secondary",
-      "label": "Forkast utkast"
-    }
-  ]
-}

package/lib/stories/Inbox/dialogs/enova-in-progress.json

@@ -1,35 +0,0 @@
-{
-  "_createdAt": "2024-10-25T09:44:01Z",
-  "_id": "c06f1c30-8c7b-45ad-ab72-86b26514419a",
-  "_rev": "n6M6ED8lI6VdyYqDQmkmXW",
-  "_type": "dialog",
-  "_updatedAt": "2024-10-28T13:00:31Z",
-  "additionalInfo": "Søk om støtte til å installere solenergianlegg i borettslag eller sameier. Ordningen støtter både solcelleanlegg og solfangere og du kan få dekket inntil 20% av kostnadene.",
-  "body": "## Nøkkelinformasjon\n- **Din saksbehandler:** Johanna Yo. \n- **Ditt saksnummer:** 3456\n- **Forventet behandlingstid:** 2 uker",
-  "history": [
-    {
-      "_key": "d80749bc45a8",
-      "_type": "historyItem",
-      "attachments": [
-        {
-          "_key": "dfa24dc52aee",
-          "_type": "attachment",
-          "label": "Søknad om støtte til utbygging av solceller.pdf"
-        }
-      ],
-      "relativeTime": { "_type": "relativeTimeAgo", "unit": "day", "value": 3 },
-      "summary": "Søknaden ble sendt.",
-      "createdAt": "2024-10-25T12:00:31.000Z"
-    }
-  ],
-  "recipient": { "type": "person", "name": "Ola Nordmann", "imageUrl": null },
-  "sender": {
-    "type": "company",
-    "name": "Enova",
-    "imageUrl": "https://cdn.sanity.io/images/z3it2oa7/production/454b2ce709b0695c97f4c0861d694a18381194de-48x48.png?w=96"
-  },
-  "status": { "label": "Under arbeid", "value": "in-progress" },
-  "summary": "Din søknad har fått saksbehandler. Forventet behandlingstid: 2 uker.",
-  "title": "Støtte til utbygging av solceller",
-  "updatedAt": "2024-10-28T13:00:31Z"
-}

package/lib/stories/Inbox/dialogs/index.ts

@@ -1,53 +0,0 @@
-const getSeenBy = ({seenByEndUser, seenByOthersCount}) => {
-  const seenByLabel = [];
-
-  if (seenByEndUser) {
-    seenByLabel.push('deg');
-  }
-
-  if (seenByOthersCount) {
-    seenByLabel.push(seenByOthersCount);
-  }
-
-  const label = 'Sett av ' + seenByLabel.join('+');
-
-  if (seenByEndUser || seenByOthersCount) {
-    return {
-      seen: true,
-      seenByEndUser,
-      seenByOthersCount,
-      label
-    }
-  }
-
-  return null;
-}
-
-const getTimeLabel = (timestamp) => {
-
-  const event = new Date(timestamp);
-  const options = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  };
- 
-    return event.toLocaleDateString('no-NB', options)
-
-}
-
-import brregCompleted from './brreg-completed.json';
-import brregDraft from './brreg-draft.json';
-import skatt2023 from './skatt-2023.json';
-import sykmeldingReferat from './sykmelding-referat.json';
-import enovaInProgress from './enova-in-progress.json';
-
-export const dialogs = [brregDraft, brregCompleted, skatt2023, sykmeldingReferat, enovaInProgress].map((item, index) => {
-
-  return {
-    ...item,
-    seenBy: getSeenBy(item),
-    updatedAtLabel: getTimeLabel(item?.updatedAt),
-    id: 'd' + index,
-  };
-});

package/lib/stories/Inbox/dialogs/skatt-2023.json

@@ -1,33 +0,0 @@
-{
-  "_createdAt": "2024-10-23T21:31:44Z",
-  "_id": "83b80be7-9b3a-474e-94bc-d5d24710ec9c",
-  "_rev": "5k1KJXrtipgHMEvoTB1MJV",
-  "_type": "dialog",
-  "_updatedAt": "2024-10-28T17:07:25Z",
-  "action": [
-    {
-      "_key": "2d7c53da7794",
-      "_type": "dialogAction",
-      "label": "Åpne skattemeldingen"
-    }
-  ],
-  "dueAt": "2024-05-31",
-  "recipient": { "type": "person", "name": "Ola Nordmann", "imageUrl": null },
-  "sender": {
-    "type": "company",
-    "name": "Skatteetaten",
-    "imageUrl": "https://cdn.sanity.io/images/z3it2oa7/production/e16a4f384d1d5ed959e1d74f0626259711d67509-88x88.png?w=96"
-  },
-  "status": { "label": "Krever handling", "value": "requires-attention" },
-  "summary": "Skattemeldingen for 2023 er tilgjengelig. Du bør sjekke at opplysningene er riktige.",
-  "title": "Skatten din 2023",
-  "updatedAt": "2024-10-28T17:07:25Z",
-  "actions": [
-    {
-      "_key": "2d7c53da7794",
-      "_type": "dialogAction",
-      "label": "Åpne skattemeldingen"
-    }
-  ],
-  "history": null
-}

package/lib/stories/Inbox/dialogs/sykmelding-referat.json

@@ -1,41 +0,0 @@
-{
-  "_createdAt": "2024-11-06T10:22:59Z",
-  "_id": "5eefff1f-b93f-46c1-9d32-0cd3ce4ef81d",
-  "_rev": "DhXUHjo1pBqkOz5GIDfYsI",
-  "_type": "dialog",
-  "_updatedAt": "2024-11-06T10:35:39Z",
-  "action": [
-    {
-      "_key": "be3958c43f74",
-      "_type": "dialogAction",
-      "label": "Bekreftet mottatt"
-    }
-  ],
-  "attachments": [
-    {
-      "_key": "39359e07e4bf",
-      "_type": "attachment",
-      "label": "Referat fra dialogmøte.pdf"
-    }
-  ],
-  "body": "Dette er en kopi av et brev som er tilgjengelig for nærmeste leder på Dine Sykmeldte hos NAV. ",
-  "sender": {
-    "type": "company",
-    "name": "Nav",
-    "imageUrl": "https://cdn.sanity.io/images/z3it2oa7/production/5f3c858ec7d74e231caa2058e45b6af2d59455fe-290x272.png?w=96"
-  },
-  "status": { "label": "Ny", "value": "new" },
-  "summary": "[Summary]",
-  "title": "Referat fra dialogmøte [kopi] - Sander Syk - 20905995783",
-  "actions": [
-    {
-      "_key": "be3958c43f74",
-      "_type": "dialogAction",
-      "label": "Bekreftet mottatt"
-    }
-  ],
-  "updatedAt": "2024-11-06T10:35:39Z",
-  "history": null,
-  "seen": true,
-  "seenByEndUser": true
-}

package/lib/stories/Inbox/groupBy.ts

@@ -1,19 +0,0 @@
-interface GroupableItem {
-  group: string;
-}
-
-export const groupBy = (items: GroupableItem[]) => {
-  const groups: Record<string, GroupableItem[]> = items?.reduce(
-    (acc: Record<string, GroupableItem[]>, item) => {
-      const group = item?.group || '';
-      if (!acc[group]) {
-        acc[group] = [];
-      }
-      acc[group].push(item);
-      return acc;
-    },
-    {} as Record<string, GroupableItem[]>,
-  );
-
-  return groups;
-};

package/lib/stories/Inbox/inboxSection.module.css

@@ -1,19 +0,0 @@
-.section {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  row-gap: 1rem;
-}
-
-.header {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.25;
-  margin: 6px 0;
-}

package/lib/stories/Inbox/index.ts

@@ -1,15 +0,0 @@
-export * from './accounts/';
-export * from './dialogs/';
-export * from './layout/';
-
-export * from './actionMenu';
-
-export * from './InboxProvider';
-export * from './InboxLayout';
-export * from './InboxSection';
-
-export * from './InboxPage';
-export * from './DialogPage';
-export * from './BookmarksPage';
-export * from './ProfilePage';
-export * from './SettingsPage';