@altinn/altinn-components 0.4.1 → 0.5.0

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,50 @@
+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,
+        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,50 @@
+'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;
+  selected?: boolean;
+}
+
+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),
+  }));
+
+  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 } 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,
+    items: accounts.map((item) => {
+      return {
+        group: item.type,
+        title: item?.name,
+        avatar: item,
+        selected: item.selected,
+        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} />;
+}

package/lib/stories/Inbox/ProfilePage.tsx

@@ -0,0 +1,35 @@
+'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}
+        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,45 @@
+{
+  "_createdAt": "2024-10-23T07:17:42Z",
+  "_id": "7cda3a28-2171-488c-8554-6b061b48e533",
+  "_rev": "n6M6ED8lI6VdyYqDQoylrM",
+  "_type": "dialog",
+  "_updatedAt": "2024-10-28T17:07:32Z",
+  "action": [
+    { "priority": "primary", "label": "Til skjema" },
+    {
+      "label": "Forkast utkast"
+    }
+  ],
+  "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": [
+    { "_key": "4af713286bf6", "_type": "dialogAction", "label": "Til skjema" },
+    {
+      "_key": "1ef5bc424eee",
+      "_type": "dialogAction",
+      "label": "Forkast utkast"
+    }
+  ]
+}

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

@@ -0,0 +1,10 @@
+import brregCompleted from './brreg-completed.json';
+import brregDraft from './brreg-draft.json';
+import skatt2023 from './skatt-2023.json';
+
+export const dialogs = [brregDraft, brregCompleted, skatt2023].map((item, index) => {
+  return {
+    ...item,
+    id: 'd' + index,
+  };
+});

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

@@ -0,0 +1,33 @@
+{
+  "_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/groupBy.ts

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

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

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