@altinn/altinn-components 0.6.2 → 0.6.3

package/lib/hooks/useClickOutside.ts

@@ -1,22 +0,0 @@
-'use client';
-import { type RefObject, useEffect } from 'react';
-
-export const useClickOutside = (ref: RefObject<HTMLDivElement>, callback: () => void) => {
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        callback();
-      }
-    };
-
-    document.addEventListener('mouseup', handleClickOutside);
-    document.addEventListener('touchend', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mouseup', handleClickOutside);
-      document.removeEventListener('touchend', handleClickOutside);
-    };
-  }, [callback, ref]);
-
-  return ref;
-};

package/lib/hooks/useEscapeKey.ts

@@ -1,17 +0,0 @@
-'use client';
-import { useEffect } from 'react';
-
-export const useEscapeKey = (onEscape?: () => void): void => {
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onEscape?.();
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [onEscape]);
-};

package/lib/hooks/useMenu.tsx

@@ -1,81 +0,0 @@
-'use client';
-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,78 +0,0 @@
-'use client';
-import {
-  Heading,
-  BookmarksList,
-  ListBase,
-  ListItem,
-  MetaItem,
-  PageBase,
-  SectionBase,
-  SectionFooter,
-  SectionHeader,
-  Typography,
-} from '../../components';
-import { InboxToolbar } from './InboxToolbar';
-
-export function BookmarksPage() {
-  const contextMenu = {
-    items: [
-      {
-        icon: "pencil",
-        label: "Rediger søk"
-      },
-      {
-        icon: "trash",
-        label: "Slett søk"
-      }
-    ]
-  }
-
-  const bookmarks = [
-    {
-      id: '1',
-      title: 'Mitt eget søk',
-      params: [
-        {type: "search", label: "Skatt"},
-        {type: "filter", label: "Under arbeid"}
-      ],
-    },
-    {
-      id: '2',
-      params: [
-        {type: "search", label: "Skatt"},
-        {type: "filter", label: "Under arbeid"}
-      ],
-    },
-    {
-      id: '3',
-      params: [
-        {type: "filter", label: "Brønnøysundregistrene"},
-        {type: "filter", label: "Krever handling"}
-      ],
-    },
-  ].map(item => {
-    return {
-      ...item,
-      menu: {...contextMenu, id: [item.id, "-menu"].join("-")}
-    }
-  });
-
-
-  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 padding color="subtle" spacing="lg" inset>
-      <SectionHeader>
-          <Heading size="sm">{title}</Heading>
-        </SectionHeader>
-        <BookmarksList spacing="none" items={bookmarks} />
-        <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,51 +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>
-  );
-}