@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/hooks/useMenu.tsx

@@ -1,80 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-export interface UseMenuItemProps<T> {
-  menuIndex: number;
-  active?: boolean;
-  props: T;
-}
-
-export interface UseMenuGroup<T, V> {
-  items: UseMenuItemProps<T>[];
-  props: Record<string, V>;
-}
-
-export interface UseMenuOutput<T, V> {
-  menu: UseMenuGroup<T, V>[];
-  activeIndex: number;
-  setActiveIndex: (activeIndex: number) => void;
-}
-
-export interface UseMenuInput<T, V> {
-  items: T[];
-  groups: Record<string, V>;
-  groupByKey?: keyof T;
-  keyboardEvents?: boolean;
-}
-
-export const useMenu = <T, V>({
-  items,
-  groups,
-  groupByKey,
-  keyboardEvents = false,
-}: UseMenuInput<T, V>): UseMenuOutput<T, V> => {
-  const [activeIndex, setActiveIndex] = useState<number>(-1);
-
-  const menu = useMemo(() => {
-    const flatItems: T[] = [];
-    const grouped = items.reduce(
-      (acc, item) => {
-        const key = groupByKey && item[groupByKey] ? (item[groupByKey] as string) : 'ungrouped';
-        acc[key] = acc[key] || [];
-        acc[key].push(item);
-        flatItems.push(item);
-        return acc;
-      },
-      {} as Record<string, T[]>,
-    );
-
-    return Object.entries(grouped).map(([key, groupItems]) => ({
-      items: groupItems.map((item) => ({
-        menuIndex: flatItems.indexOf(item),
-        active: activeIndex === flatItems.indexOf(item),
-        props: item,
-      })),
-      props: groups[key] || {},
-    }));
-  }, [items, groupByKey, activeIndex, groups]);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === 'ArrowDown') {
-        setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
-      } else if (event.key === 'ArrowUp') {
-        setActiveIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
-      }
-    },
-    [items.length],
-  );
-
-  useEffect(() => {
-    if (keyboardEvents) {
-      setActiveIndex(0);
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [handleKeyDown, keyboardEvents]);
-
-  return { menu, activeIndex, setActiveIndex };
-};

package/lib/stories/Color/MenuItem.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { LayoutBase, type LayoutTheme, MenuBase, MenuItem, type MenuItemColor, MetaItem } from '../../components';
-
-const meta = {
-  title: 'Demo/Color/MenuItem',
-  component: MenuItem,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    id: 'inbox',
-  },
-} satisfies Meta<typeof MenuItem>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ThemesAndColors = () => {
-  const themes: LayoutTheme[] = ['global', 'neutral', 'company', 'person', 'global-dark'];
-  const colors: MenuItemColor[] = ['neutral', 'subtle', 'strong', 'company', 'person'];
-
-  return (
-    <div style={{ display: 'flex', width: '100%' }}>
-      {themes.map((theme) => {
-        return (
-          <div key={theme} style={{ flexGrow: 1 }}>
-            <LayoutBase theme={theme}>
-              <MenuBase>
-                {colors.map((color) => {
-                  return (
-                    <div key={color}>
-                      <MenuItem icon="inbox" title="Title" color={color} id="inbox" />
-                      <MetaItem>{theme + '/' + color}</MetaItem>
-                    </div>
-                  );
-                })}
-              </MenuBase>
-            </LayoutBase>
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/lib/stories/Color/Swatches.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Swatches } from './Swatches';
-
-const meta = {
-  title: 'Demo/Color/Swatches',
-  component: Swatches,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {},
-} satisfies Meta<typeof Swatches>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};

package/lib/stories/Color/Swatches.tsx

@@ -1,42 +0,0 @@
-import type { LayoutTheme } from '../../components';
-import colors from './colors.json';
-import styles from './swatches.module.css';
-
-const themes = {
-  neutral: 'Neutral',
-  person: 'Person',
-  company: 'Company',
-};
-
-export interface SwatchesProps {
-  theme: LayoutTheme;
-}
-
-export const SwatchesList = ({ theme }: SwatchesProps) => {
-  return (
-    <div className={styles.list} data-theme={theme}>
-      {Object.keys(colors).map((key) => {
-        const style = {
-          backgroundColor: 'var(--theme-' + key + ')',
-        };
-
-        return (
-          <section className={styles.item}>
-            <div style={style} className={styles.swatch}></div>
-            {key}
-          </section>
-        );
-      })}
-    </div>
-  );
-};
-
-export const Swatches = ({ theme }: SwatchesProps) => {
-  return (
-    <div className={styles.row}>
-      {Object.keys(themes).map((key) => {
-        return <SwatchesList theme={key} />;
-      })}
-    </div>
-  );
-};

package/lib/stories/Color/colors.json

@@ -1,62 +0,0 @@
-{
-  "background-default": {
-    "$type": "color",
-    "$value": "{color.<color>.1}"
-  },
-  "background-subtle": {
-    "$type": "color",
-    "$value": "{color.<color>.2}"
-  },
-  "surface-default": {
-    "$type": "color",
-    "$value": "{color.<color>.3}"
-  },
-  "surface-hover": {
-    "$type": "color",
-    "$value": "{color.<color>.4}"
-  },
-  "surface-active": {
-    "$type": "color",
-    "$value": "{color.<color>.5}"
-  },
-  "border-subtle": {
-    "$type": "color",
-    "$value": "{color.<color>.6}"
-  },
-  "border-default": {
-    "$type": "color",
-    "$value": "{color.<color>.7}"
-  },
-  "border-strong": {
-    "$type": "color",
-    "$value": "{color.<color>.8}"
-  },
-  "base-default": {
-    "$type": "color",
-    "$value": "{color.<color>.9}"
-  },
-  "base-hover": {
-    "$type": "color",
-    "$value": "{color.<color>.10}"
-  },
-  "base-active": {
-    "$type": "color",
-    "$value": "{color.<color>.11}"
-  },
-  "text-subtle": {
-    "$type": "color",
-    "$value": "{color.<color>.12}"
-  },
-  "text-default": {
-    "$type": "color",
-    "$value": "{color.<color>.13}"
-  },
-  "contrast-default": {
-    "$type": "color",
-    "$value": "{color.<color>.contrast-1}"
-  },
-  "contrast-subtle": {
-    "$type": "color",
-    "$value": "{color.<color>.contrast-2}"
-  }
-}

package/lib/stories/Color/swatches.module.css

@@ -1,14 +0,0 @@
-.swatch {
-  width: 4rem;
-  height: 4rem;
-  border: 1px solid;
-}
-
-.row {
-  display: flex;
-}
-
-.col {
-  display: flex;
-  flex-direction: column;
-}

package/lib/stories/Inbox/BookmarksPage.tsx

@@ -1,52 +0,0 @@
-'use client';
-import {
-  Heading,
-  ListBase,
-  ListItem,
-  MetaItem,
-  PageBase,
-  SectionBase,
-  SectionFooter,
-  SectionHeader,
-  Typography,
-} from '../../components';
-import { InboxToolbar } from './InboxToolbar';
-
-export function BookmarksPage() {
-  const bookmarks = [
-    {
-      id: '1',
-      title: '123',
-    },
-    {
-      id: '2',
-      title: '123',
-    },
-    {
-      id: '3',
-      title: '123',
-    },
-  ];
-
-  const count = bookmarks.length;
-  const title = (count > 1 && count + ' lagrede søk') || (count && '1 lagret søk') || 'Ingen lagrede søk';
-
-  return (
-    <PageBase margin="lg" spacing="lg">
-      <InboxToolbar />
-      <SectionBase spacing="lg">
-        <SectionHeader padding>
-          <Heading size="md">{title}</Heading>
-        </SectionHeader>
-        <ListBase spacing="sm">
-          {bookmarks.map((item) => (
-            <ListItem {...item} key={item.id} />
-          ))}
-        </ListBase>
-        <SectionFooter padding>
-          <MetaItem>Sist oppdatert: 10 minutter siden.</MetaItem>
-        </SectionFooter>
-      </SectionBase>
-    </PageBase>
-  );
-}

package/lib/stories/Inbox/DialogPage.tsx

@@ -1,15 +0,0 @@
-import { ActionMenu, Dialog, PageBase } from '../../components';
-import type { DialogProps } from '../../components';
-
-interface DialogPageProps {
-  dialog: DialogProps;
-}
-
-export function DialogPage({ dialog }: DialogPageProps) {
-  return (
-    <PageBase inset>
-      <Dialog {...dialog} />
-      <ActionMenu items={dialog?.menu?.items} />
-    </PageBase>
-  );
-}

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

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

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

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

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

@@ -1,135 +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),
-  }));
-
-  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 />;
-}