@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/Toolbar/Toolbar.tsx

@@ -1,156 +0,0 @@
-'use client';
-import { useMemo, useState } from 'react';
-import { useRootContext } from '../RootProvider';
-import { ToolbarAdd } from './ToolbarAdd';
-import { ToolbarBase } from './ToolbarBase';
-import { ToolbarFilter, type ToolbarFilterProps } from './ToolbarFilter.tsx';
-import { ToolbarMenu, type ToolbarMenuProps } from './ToolbarMenu.tsx';
-import type { ToolbarOptionType } from './ToolbarOptions.tsx';
-import { ToolbarSearch, type ToolbarSearchProps } from './ToolbarSearch.tsx';
-
-export type FilterState = Record<string, ToolbarFilterProps['value']>;
-type ExpandedItemType = 'filter' | 'menu' | 'add-filter';
-
-type ExpandedItem = {
-  name: string;
-  type: ExpandedItemType;
-} | null;
-
-export interface ToolbarProps {
-  filters?: ToolbarFilterProps[];
-  search?: ToolbarSearchProps;
-  menu?: ToolbarMenuProps;
-  filterState?: FilterState;
-  getFilterLabel?: (name: string, value: ToolbarFilterProps['value']) => string;
-  onFilterStateChange?: (state: FilterState) => void;
-}
-
-export const Toolbar = ({
-  filters = [],
-  filterState,
-  onFilterStateChange,
-  search,
-  menu,
-  getFilterLabel,
-}: ToolbarProps) => {
-  const { currentId, openId, closeAll } = useRootContext();
-  const [expandedItem, setExpandedItem] = useState<ExpandedItem>(null);
-  const [localFilterState, setLocalFilterState] = useState<Record<string, ToolbarFilterProps['value']>>(
-    filterState ?? {},
-  );
-  const changeFilterState = typeof onFilterStateChange === 'function' ? onFilterStateChange : setLocalFilterState;
-  const applicableFilterState = filterState || localFilterState;
-
-  const [visibleFilterNames, setVisibleFilterNames] = useState<string[]>(
-    filters
-      ?.filter((item) => !(item.removable && typeof applicableFilterState[item.name] === 'undefined'))
-      .map((item) => item.name) ?? [],
-  );
-
-  const hiddenFilterNames = filters?.filter((item) => !visibleFilterNames.includes(item.name));
-
-  const visibleFilters = useMemo(
-    () =>
-      visibleFilterNames
-        .map((name) => {
-          return filters.find((item) => item.name === name);
-        })
-        .filter((item) => typeof item !== 'undefined'),
-    [filters, visibleFilterNames],
-  );
-
-  const hiddenFilters = useMemo(
-    () => filters.filter((item) => hiddenFilterNames.includes(item)),
-    [filters, hiddenFilterNames],
-  );
-
-  const onToggle = (type: ExpandedItemType, name: string) => {
-    if (expandedItem?.name === name && expandedItem.type === type) {
-      closeAll();
-      setExpandedItem(null);
-    } else {
-      openId('toolbar');
-      setExpandedItem({ name, type });
-    }
-  };
-
-  const onClose = () => {
-    setExpandedItem(null);
-    closeAll();
-  };
-
-  const onFilterChange = (name: string, value: ToolbarFilterProps['value'], optionType: ToolbarOptionType) => {
-    if (optionType === 'radio') {
-      changeFilterState({
-        ...applicableFilterState,
-        [name]: value,
-      });
-      onToggle('filter', name);
-    } else {
-      changeFilterState({
-        ...applicableFilterState,
-        [name]: applicableFilterState[name]
-          ? applicableFilterState[name].some((v) => value?.includes(v))
-            ? applicableFilterState[name].filter((v) => !(value || []).includes(v))
-            : [...applicableFilterState[name], ...(value || [])]
-          : value,
-      });
-    }
-  };
-
-  const onFilterRemove = (name: string) => {
-    setVisibleFilterNames((prevState) => prevState.filter((prevName) => prevName !== name));
-    changeFilterState({
-      ...applicableFilterState,
-      [name]: undefined,
-    });
-  };
-
-  const onFilterAdd = (name: string) => {
-    setVisibleFilterNames((prevState) => [...prevState, name]);
-    onToggle('filter', name);
-  };
-
-  return (
-    <ToolbarBase open={currentId === 'toolbar'} onClose={onClose}>
-      {menu && <ToolbarMenu onToggle={() => onToggle('menu', '')} expanded={expandedItem?.type === 'menu'} {...menu} />}
-      {visibleFilters.map((item) => {
-        return (
-          <ToolbarFilter
-            key={item.name}
-            onToggle={() => onToggle('filter', item.name)}
-            expanded={currentId === 'toolbar' && item.name === expandedItem?.name && expandedItem?.type === 'filter'}
-            onRemove={() => {
-              onFilterRemove(item.name);
-            }}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              onFilterChange(item.name, [event.target.value], item.optionType);
-            }}
-            name={item.name}
-            options={item.options}
-            label={item.label}
-            value={applicableFilterState[item.name]}
-            optionType={item.optionType}
-            removable={item.removable}
-            getSelectedLabel={getFilterLabel}
-          />
-        );
-      })}
-      {hiddenFilters?.length > 0 && (
-        <ToolbarAdd
-          expanded={currentId === 'toolbar' && expandedItem?.type === 'add-filter'}
-          onToggle={() => onToggle('add-filter', '')}
-          items={hiddenFilters.map((item) => ({
-            id: item.name,
-            label: item.label,
-            name: item.name,
-            onClick: () => {
-              onFilterAdd(item.name);
-            },
-          }))}
-        />
-      )}
-      {search && <ToolbarSearch {...search} />}
-    </ToolbarBase>
-  );
-};

package/lib/components/Toolbar/ToolbarAdd.stories.ts

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ToolbarAdd } from './ToolbarAdd';
-
-const meta = {
-  title: 'Toolbar/ToolbarAdd',
-  component: ToolbarAdd,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof ToolbarAdd>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      {
-        label: 'Velg dato',
-      },
-    ],
-  },
-};

package/lib/components/Toolbar/ToolbarAdd.tsx

@@ -1,26 +0,0 @@
-import type { MouseEventHandler } from 'react';
-import { DrawerOrDropdown } from '../';
-import { Menu, type MenuItemProps } from '../Menu';
-import { ToolbarButton } from './ToolbarButton';
-import styles from './toolbarAdd.module.css';
-
-export interface ToolbarAddProps {
-  items: MenuItemProps[];
-  expanded: boolean;
-  onToggle?: MouseEventHandler;
-  label?: string;
-  className?: string;
-}
-
-export const ToolbarAdd = ({ expanded = false, onToggle, label = 'Legg til', items }: ToolbarAddProps) => {
-  return (
-    <div className={styles.menu}>
-      <ToolbarButton type="add" onToggle={onToggle}>
-        {label}
-      </ToolbarButton>
-      <DrawerOrDropdown title={label} onClose={onToggle} expanded={expanded}>
-        <Menu theme="global" items={items} />
-      </DrawerOrDropdown>
-    </div>
-  );
-};

package/lib/components/Toolbar/ToolbarBase.tsx

@@ -1,12 +0,0 @@
-'use client';
-import type { ReactNode } from 'react';
-import styles from './toolbarBase.module.css';
-export interface ToolbarBaseProps {
-  children?: ReactNode;
-  open?: boolean;
-  onClose?: () => void;
-}
-
-export const ToolbarBase = ({ children }: ToolbarBaseProps) => {
-  return <div className={styles.toolbar}>{children}</div>;
-};

package/lib/components/Toolbar/ToolbarButton.stories.ts

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ToolbarButton } from './ToolbarButton';
-
-const meta = {
-  title: 'Toolbar/ToolbarButton',
-  component: ToolbarButton,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    children: 'Label',
-  },
-} satisfies Meta<typeof ToolbarButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Add: Story = {
-  args: {
-    type: 'add',
-  },
-};
-
-export const Removable: Story = {
-  args: {
-    removable: true,
-  },
-};

package/lib/components/Toolbar/ToolbarButton.tsx

@@ -1,65 +0,0 @@
-import type { ElementType, MouseEventHandler, ReactNode } from 'react';
-import { Button, ComboButton } from '../Button';
-import styles from './toolbarButton.module.css';
-
-export type ToolbarButtonType = 'add' | 'select' | 'switch';
-
-export interface ToolbarButtonProps {
-  as?: ElementType;
-  type?: ToolbarButtonType;
-  removable?: boolean;
-  selected?: boolean;
-  icon?: string;
-  active?: boolean;
-  children?: ReactNode;
-  onToggle?: MouseEventHandler;
-  onRemove?: MouseEventHandler;
-}
-
-export const ToolbarButton = ({
-  type = 'select',
-  selected = false,
-  removable = false,
-  active,
-  children,
-  onToggle,
-  onRemove,
-}: ToolbarButtonProps) => {
-  if (removable) {
-    return (
-      <ComboButton
-        className={styles.removeButton}
-        variant={active ? 'solid' : 'outline'}
-        color="primary"
-        size="sm"
-        icon="x-mark"
-        selected={selected}
-        onLabelClick={onToggle}
-        onIconClick={onRemove}
-      >
-        {children}
-      </ComboButton>
-    );
-  }
-
-  if (type === 'add') {
-    return (
-      <Button reverse variant="dotted" color="primary" size="sm" icon="plus" selected={selected} onClick={onToggle}>
-        {children}
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      variant={active ? 'solid' : 'outline'}
-      color="primary"
-      size="sm"
-      icon="chevron-up-down"
-      selected={selected}
-      onClick={onToggle}
-    >
-      {children}
-    </Button>
-  );
-};

package/lib/components/Toolbar/ToolbarFilter.stories.ts

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ToolbarFilter } from './ToolbarFilter';
-
-const meta = {
-  title: 'Toolbar/ToolbarFilter',
-  component: ToolbarFilter,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    label: 'Velg avsender',
-    options: [
-      {
-        label: 'Skatteetaten',
-        value: 'skatt',
-      },
-      {
-        label: 'Digdir',
-        value: 'digdir',
-      },
-      {
-        label: 'Helstilsynet',
-        value: 'helse',
-      },
-    ],
-  },
-} satisfies Meta<typeof ToolbarFilter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Single: Story = {
-  args: {
-    optionType: 'radio',
-  },
-};
-
-export const SingleExpanded: Story = {
-  args: {
-    ...Single.args,
-    expanded: true,
-  },
-};
-
-export const SingleValue: Story = {
-  args: {
-    optionType: 'radio',
-    value: 'helse',
-  },
-};
-
-export const Multiple: Story = {
-  args: {
-    optionType: 'checkbox',
-    value: ['skatt', 'digdir'],
-  },
-};
-
-export const MultipleExpanded: Story = {
-  args: {
-    optionType: 'checkbox',
-    value: ['skatt', 'digdir'],
-    expanded: true,
-  },
-};

package/lib/components/Toolbar/ToolbarFilter.tsx

@@ -1,75 +0,0 @@
-import type { ChangeEventHandler, MouseEventHandler } from 'react';
-import { DrawerOrDropdown } from '../';
-import type { MenuOptionProps } from '../Menu';
-import { ToolbarButton } from './ToolbarButton';
-import { ToolbarOptions } from './ToolbarOptions';
-import styles from './toolbarFilter.module.css';
-
-type ToolbarFilterValue = (string | number)[];
-export interface ToolbarFilterProps {
-  name: string;
-  options: MenuOptionProps[];
-  label: string;
-  value?: ToolbarFilterValue;
-  optionType: 'checkbox' | 'radio';
-  expanded?: boolean;
-  removable?: boolean;
-  getSelectedLabel?: (name: string, value?: ToolbarFilterValue) => string;
-  className?: string;
-  onChange?: ChangeEventHandler;
-  onToggle?: MouseEventHandler;
-  onRemove?: MouseEventHandler;
-}
-
-const defaultGetSelectedLabel = (_: string, value?: ToolbarFilterValue) => {
-  if (Array.isArray(value)) {
-    return value.join(', ');
-  }
-  return value;
-};
-
-export const ToolbarFilter = ({
-  expanded = false,
-  removable,
-  label,
-  name,
-  value,
-  options,
-  onToggle,
-  onChange,
-  onRemove,
-  getSelectedLabel,
-  optionType,
-}: ToolbarFilterProps) => {
-  const filterOptions = (options ?? []).map(
-    (item): MenuOptionProps => ({
-      ...item,
-      name,
-      checked: Array.isArray(value) ? value.includes(item.value) : item.value === value,
-    }),
-  );
-
-  const valueLabel = getSelectedLabel?.(name, value) ?? defaultGetSelectedLabel(name, value);
-
-  return (
-    <div className={styles.filter} aria-expanded={expanded}>
-      <ToolbarButton
-        type="select"
-        removable={removable}
-        active={Array.isArray(value) ? value.length > 0 : typeof value !== 'undefined'}
-        onToggle={onToggle}
-        onRemove={onRemove}
-      >
-        {valueLabel || label}
-      </ToolbarButton>
-      <DrawerOrDropdown
-        expanded={expanded}
-        title={label}
-        onClose={onToggle}
-        button={{ onClick: onToggle, label: 'Vis X treff' }}
-      >
-        <ToolbarOptions options={filterOptions} onChange={onChange} optionType={optionType} />
-      </DrawerOrDropdown>
-    </div>
-  );
-};

package/lib/components/Toolbar/ToolbarMenu.stories.ts

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { ToolbarMenu } from './ToolbarMenu';
-
-const meta = {
-  title: 'Toolbar/ToolbarMenu',
-  component: ToolbarMenu,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    label: 'Skattetetaten',
-    value: 'skatt',
-    items: [
-      {
-        title: 'Skatteetaten',
-      },
-      {
-        title: 'Digdir',
-      },
-      {
-        title: 'Helstilsynet',
-      },
-    ],
-  },
-} satisfies Meta<typeof ToolbarMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Expanded: Story = {
-  args: {
-    expanded: true,
-  },
-};

package/lib/components/Toolbar/ToolbarMenu.tsx

@@ -1,29 +0,0 @@
-import type { MouseEventHandler } from 'react';
-import { DrawerOrDropdown } from '../';
-import { Menu, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
-import { ToolbarButton } from './ToolbarButton';
-import styles from './toolbarMenu.module.css';
-
-export interface ToolbarMenuProps {
-  onToggle?: MouseEventHandler;
-  label: string;
-  value: string | number;
-  items: MenuItemProps[];
-  groups?: MenuItemGroups;
-  search?: MenuSearchProps;
-  expanded?: boolean;
-  className?: string;
-}
-
-export const ToolbarMenu = ({ expanded = false, onToggle, label, value, groups, search, items }: ToolbarMenuProps) => {
-  return (
-    <div className={styles.menu}>
-      <ToolbarButton type="switch" onToggle={onToggle} active={!!value}>
-        {label}
-      </ToolbarButton>
-      <DrawerOrDropdown expanded={expanded} title="Endre konto" onClose={onToggle}>
-        <Menu theme="global" defaultItemColor="subtle" groups={groups} search={search} items={items} />
-      </DrawerOrDropdown>
-    </div>
-  );
-};

package/lib/components/Toolbar/ToolbarOptions.stories.ts

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ToolbarOptions } from './ToolbarOptions';
-
-const meta = {
-  title: 'Toolbar/ToolbarOptions',
-  component: ToolbarOptions,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof ToolbarOptions>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Checkboxes: Story = {
-  args: {
-    optionType: 'checkbox',
-    options: [
-      {
-        type: 'checkbox',
-        label: 'Skatteetaten',
-        value: '1',
-      },
-      {
-        type: 'checkbox',
-        label: 'Digdir',
-        value: '2',
-      },
-      {
-        type: 'checkbox',
-        checked: true,
-        label: 'Helstilsynet',
-        value: '3',
-      },
-    ],
-  },
-};
-
-export const Radio: Story = {
-  args: {
-    optionType: 'radio',
-    options: [
-      {
-        type: 'radio',
-        label: 'Skatteetaten',
-        value: '1',
-      },
-      {
-        type: 'radio',
-        label: 'Digdir',
-        value: '2',
-      },
-      {
-        type: 'radio',
-        checked: true,
-        label: 'Helstilsynet',
-        value: '3',
-      },
-    ],
-  },
-};
-
-export const RadioCheckbox: Story = {
-  args: {
-    optionGroups: {
-      a: {
-        title: 'Velg skadedyr',
-        optionType: 'radio',
-      },
-      b: {
-        title: 'Velg straff',
-        optionType: 'checkbox',
-      },
-    },
-    options: [
-      {
-        groupId: 'a',
-        name: 'animal',
-        label: 'Katt',
-        value: 'cat',
-        checked: true,
-      },
-      {
-        groupId: 'a',
-        name: 'animal',
-        label: 'Mus',
-        value: 'mouse',
-      },
-      {
-        groupId: 'a',
-        name: 'animal',
-        label: 'Veggdyr',
-        value: 'spider',
-      },
-      {
-        groupId: 'b',
-        label: 'Husarrest',
-        value: 'digdir',
-      },
-      {
-        groupId: 'b',
-        checked: true,
-        label: 'Piskeslag',
-        value: 'helse',
-      },
-    ],
-  },
-};