@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/stories/Inbox/Inbox.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { accounts, dialogs } from './';
+import { Inbox } from './Inbox';
+
+const meta = {
+  title: 'Demo/Inbox/Inbox',
+  component: Inbox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    inboxId: 'inbox',
+    accounts,
+    accountId: 'a0',
+    dialogs,
+  },
+} satisfies Meta<typeof Inbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const BulkMode: Story = {
+  args: {
+    selectedIds: ['d1'],
+  },
+};
+
+export const DialogOpen: Story = {
+  args: {
+    dialogId: 'd1',
+  },
+};
+
+export const SavedSearches: Story = {
+  args: {
+    inboxId: 'bookmarks',
+  },
+};
+
+export const ProfilePage: Story = {
+  args: {
+    inboxId: 'profile',
+  },
+};
+
+export const SettingsPage: Story = {
+  args: {
+    inboxId: 'settings',
+  },
+};

package/lib/stories/Inbox/Inbox.tsx

@@ -0,0 +1,12 @@
+import { InboxLayout, InboxProvider, InboxSection } from './';
+import type { InboxDefaultValue } from './';
+
+export const Inbox = ({ accounts, accountId, inboxId, dialogId, dialogs, selectedIds }: InboxDefaultValue) => {
+  return (
+    <InboxProvider defaultValue={{ accounts, accountId, inboxId, dialogId, dialogs, selectedIds }}>
+      <InboxLayout>
+        <InboxSection />
+      </InboxLayout>
+    </InboxProvider>
+  );
+};

package/lib/stories/Inbox/InboxLayout.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import { ActionFooter, ActionHeader, ActionMenu, Layout } from '../../components';
+import { actionMenu, footer, header, menu } from './';
+import { useInbox } from './';
+
+export interface InboxLayoutProps {
+  children: ReactNode;
+}
+
+export const InboxLayout = ({ children }: InboxLayoutProps) => {
+  const { theme, itemsCount, selectedCount, inboxId, accounts, dialogId, onInboxId, onUnselectAll } = useInbox();
+
+  const selectedTitle = `${selectedCount} av ${itemsCount} valgt`;
+  const bulkMode = selectedCount > 0;
+
+  return (
+    <Layout
+      theme={selectedCount ? 'neutral' : theme}
+      footer={footer}
+      header={{
+        ...header,
+        currentAccount: accounts?.[0],
+        menu: {
+          accounts,
+        },
+        search: !dialogId && {
+          ...header.search,
+        },
+      }}
+      sidebar={{
+        hidden: bulkMode,
+        menu: {
+          ...menu,
+          items: menu?.items.map((item) => {
+            return {
+              ...item,
+              selected: inboxId === item.id,
+              onClick: () => onInboxId(item.id),
+            };
+          }),
+        },
+      }}
+    >
+      <ActionHeader title={selectedTitle} hidden={!bulkMode} onDismiss={onUnselectAll} />
+      {children}
+      <ActionFooter hidden={!bulkMode}>
+        <ActionMenu theme="global-dark" items={actionMenu} />
+      </ActionFooter>
+    </Layout>
+  );
+};

package/lib/stories/Inbox/InboxPage.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { DialogList, PageBase } from '../../components';
+import { useInbox } from './';
+import { InboxToolbar } from './InboxToolbar';
+
+export function InboxPage() {
+  const { inboxId, onDialogId, items = [], onSelectId, selectedCount } = useInbox();
+  const selected = items?.filter((item) => item.selected);
+
+  const inboxItems = items
+    ?.filter((item) => {
+      const inboxStatus = item?.status.value;
+
+      if (inboxId === 'drafts' && inboxStatus !== 'draft') {
+        return false;
+      }
+      if (inboxId === 'sent' && inboxStatus !== 'sent') {
+        return false;
+      }
+      if (inboxId === 'inbox' && (item.status.value === 'sent' || item.status.value === 'draft')) {
+        return false;
+      }
+
+      return true;
+    })
+    .map((item) => {
+
+      return {
+        ...item,
+        groupId: 'g1',
+        onClick: selectedCount > 0 ? () => onSelectId(item.id) : () => onDialogId(item.id),
+        select: {
+          checked: item?.selected,
+          onChange: () => onSelectId(item.id),
+        },
+      };
+    });
+
+  const inboxGroups = {
+    g1: {
+      title: 'Gruppe',
+    },
+  };
+
+  return (
+    <PageBase spacing="md" margin="lg">
+      {!selected.length > 0 && <InboxToolbar items={inboxItems} />}
+      <DialogList items={inboxItems} groups={inboxGroups} />
+    </PageBase>
+  );
+}

package/lib/stories/Inbox/InboxProvider.tsx

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

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

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

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

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

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

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

package/lib/stories/Inbox/actionMenu.ts

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

@@ -0,0 +1,35 @@
+{
+  "_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

@@ -0,0 +1,41 @@
+{
+  "_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

@@ -0,0 +1,35 @@
+{
+  "_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"
+}