@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/components/Toolbar/Toolbar.stories.tsx

@@ -1,188 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { type FilterState, Toolbar } from './Toolbar';
-
-const meta = {
-  title: 'Toolbar/Toolbar',
-  component: Toolbar,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof Toolbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    menu: {
-      label: 'Ola Nordmann',
-      value: 'ola',
-      items: [
-        {
-          avatar: {
-            name: 'Ola Nordmann',
-          },
-          label: 'Ola Nordmann',
-        },
-        {
-          avatar: {
-            name: 'Kari Nordmann',
-          },
-          label: 'Kari Nordmann',
-        },
-      ],
-    },
-    filters: [
-      {
-        removable: true,
-        name: 'from',
-        optionType: 'checkbox',
-        label: 'Velg avsender',
-        options: [
-          {
-            value: 'skatt',
-            label: 'Skatteetaten',
-          },
-          {
-            value: 'brreg',
-            label: 'Brønnøysund',
-          },
-          {
-            value: 'nav',
-            label: 'NAV',
-          },
-          {
-            value: 'oslo',
-            label: 'Oslo kommune',
-          },
-        ],
-      },
-      {
-        removable: true,
-        name: 'to',
-        optionType: 'radio',
-        label: 'Velg mottaker',
-        options: [
-          {
-            value: 'ola',
-            label: 'Ola Nordmann',
-          },
-          {
-            value: 'kari',
-            label: 'Kari Nordmann',
-          },
-        ],
-      },
-      {
-        removable: true,
-        name: 'status',
-        optionType: 'radio',
-        label: 'Velg status',
-        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',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export const CustomFilterLabel: Story = {
-  args: {
-    ...Default.args,
-    getFilterLabel: (name, value) => {
-      return Array.isArray(value) && value.length > 1 ? `${value.length} selected` : value;
-    },
-  },
-};
-
-export const NoFilters: Story = {
-  args: {
-    ...Default.args,
-    filters: [],
-  },
-};
-
-export const StaticFilters: Story = {
-  args: {
-    filters: Default?.args?.filters?.map((item) => {
-      return {
-        ...item,
-        removable: false,
-      };
-    }),
-  },
-};
-
-export const ControlledStateFilters = () => {
-  const [filterState, setFilterState] = React.useState<FilterState>({
-    from: ['skatt', 'brreg'],
-  });
-  return <Toolbar filters={Default.args!.filters} filterState={filterState} onFilterStateChange={setFilterState} />;
-};
-
-export const FilterAndSearch: Story = {
-  args: {
-    search: {
-      placeholder: 'Søk etter filter',
-    },
-    filters: [
-      {
-        name: 'status',
-        optionType: 'checkbox',
-        label: 'Velg status',
-        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',
-          },
-        ],
-      },
-    ],
-  },
-};

package/lib/components/Toolbar/Toolbar.tsx

@@ -1,159 +0,0 @@
-'use client';
-import { type ReactNode, 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;
-  children?: ReactNode;
-}
-
-export const Toolbar = ({
-  filters = [],
-  filterState,
-  onFilterStateChange,
-  search,
-  menu,
-  getFilterLabel,
-  children,
-}: 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} />}
-      {children}
-    </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 { ToolbarFilterBase } from './ToolbarFilterBase';
-
-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 (
-    <ToolbarFilterBase expanded={expanded}>
-      <ToolbarButton type="add" onToggle={onToggle}>
-        {label}
-      </ToolbarButton>
-      <DrawerOrDropdown title={label} onClose={onToggle} expanded={expanded}>
-        <Menu theme="global" items={items} />
-      </DrawerOrDropdown>
-    </ToolbarFilterBase>
-  );
-};

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/ToolbarDate.stories.ts

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ToolbarFilter } from './ToolbarFilter';
-
-const meta = {
-  title: 'Toolbar/ToolbarDate',
-  component: ToolbarFilter,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    label: 'Velg dato',
-    value: 'today',
-    optionType: 'radio',
-    options: [
-      {
-        groupId: 'a',
-        name: 'date',
-        label: 'I dag',
-        value: 'today',
-      },
-      {
-        groupId: 'a',
-        name: 'date',
-        label: 'Denne uken',
-        value: 'this-week',
-      },
-      {
-        groupId: 'a',
-        name: 'date',
-        label: 'Denne måneden',
-        value: 'this-week',
-      },
-      {
-        groupId: 'b',
-        name: 'date',
-        label: 'Siste 6 måneder',
-        value: 'last-6-months',
-      },
-      {
-        groupId: 'b',
-        label: 'Siste 12 måneder',
-        value: 'last-year',
-      },
-      {
-        groupId: 'c',
-        label: 'Spesifiser dato ...',
-        value: 'other',
-      },
-    ],
-  },
-} satisfies Meta<typeof ToolbarFilter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Expanded: Story = {
-  args: {
-    expanded: true,
-  },
-};

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

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

package/lib/components/Toolbar/ToolbarDaterange.tsx

@@ -1,73 +0,0 @@
-import { type MouseEventHandler, useState } from 'react';
-import { DrawerOrDropdown } from '../';
-import { Datepicker } from '../Datepicker';
-import { MenuBase, MenuInputField, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
-import { ToolbarButton } from './ToolbarButton';
-import { ToolbarFilterBase } from './ToolbarFilterBase';
-import styles from './toolbarDaterange.module.css';
-
-export interface ToolbarDaterangeProps {
-  title: string;
-  description?: string;
-  label: string;
-  value: string | number;
-  onToggle?: MouseEventHandler;
-  expanded?: boolean;
-  className?: string;
-}
-
-export const ToolbarDaterange = ({
-  title = 'Select daterange',
-  description = 'Choose dates or click to set daterange.',
-  fromLabel = 'From date',
-  toLabel = 'To date',
-  label = 'Select daterange',
-  value,
-  expanded = false,
-  onToggle,
-}: ToolbarDaterangeProps) => {
-  const [fromDate, setFromDate] = useState('');
-  const [toDate, setToDate] = useState('');
-
-  const onFromDateChange = (e) => {
-    setFromDate(e.target.value);
-  };
-
-  const onToDateChange = (e) => {
-    setToDate(e.target.value);
-  };
-
-  const onDatepickerSelect = (date) => {
-    if (toDate) {
-      setFromDate(date);
-      setToDate('');
-    } else if (fromDate && date < fromDate) {
-      setToDate(fromDate);
-      setFromDate(date);
-    } else if (fromDate) {
-      setToDate(date);
-    } else {
-      setFromDate(date);
-    }
-  };
-
-  return (
-    <ToolbarFilterBase expanded={expanded}>
-      <ToolbarButton type="switch" onToggle={onToggle} active={!!value}>
-        {label}
-      </ToolbarButton>
-      <DrawerOrDropdown expanded={expanded} title={title} onClose={onToggle}>
-        <MenuBase>
-          <div className={styles.fields}>
-            <MenuInputField value={fromDate} type="date" label={fromLabel} onChange={onFromDateChange} />
-            <MenuInputField value={toDate} type="date" label={toLabel} onChange={onToDateChange} />
-          </div>
-          <section className={styles.datepicker}>
-            <Datepicker onSelect={onDatepickerSelect} selectFrom={fromDate} selectTo={toDate} />
-            <p className={styles.description}>{description}</p>
-          </section>
-        </MenuBase>
-      </DrawerOrDropdown>
-    </ToolbarFilterBase>
-  );
-};