export function MemexSortable()

in src/stories/ActionList2/fixtures.stories.tsx [970:1048]
75 lines of code
4 McCabe index (conditional complexity)

export function MemexSortable(): JSX.Element {
  const [options, setOptions] = React.useState<Option[]>([
    {text: 'Status', icon: <IssueOpenedIcon />, selected: true},
    {text: 'Stage', icon: <TableIcon />, selected: true},
    {text: 'Assignee', icon: <PeopleIcon />, selected: true},
    {text: 'Team', icon: <TypographyIcon />, selected: true},
    {text: 'Estimate', icon: <NumberIcon />, selected: false},
    {text: 'Due Date', icon: <CalendarIcon />, selected: false}
  ])

  const toggle = (text: string) => {
    setOptions(
      options.map(option => {
        if (option.text === text) option.selected = !option.selected
        return option
      })
    )
  }

  const reorder = ({optionToMove, moveAfterOption}: {optionToMove: Option; moveAfterOption: Option}) => {
    setOptions(currentOptions => {
      const newOptions = [...currentOptions]
      // remove option to move
      const currentPosition = newOptions.findIndex(o => o.text === optionToMove.text)
      newOptions.splice(currentPosition, 1)
      // add it after the provided element
      const newPosition = newOptions.findIndex(o => o.text === moveAfterOption.text) + 1
      newOptions.splice(newPosition, 0, optionToMove)
      return newOptions
    })
  }

  const visibleOptions = options.filter(option => option.selected)
  const hiddenOptions = options.filter(option => !option.selected)

  return (
    <>
      <h1>Memex Sortable List</h1>
      <ErsatzOverlay>
        <DndProvider backend={HTML5Backend}>
          <ActionList selectionVariant="multiple">
            <ActionList.Group title="Visible fields (can be reordered)" role="listbox">
              {visibleOptions.map(option => (
                <SortableItem
                  key={option.text}
                  role="option"
                  option={option}
                  onSelect={() => toggle(option.text)}
                  reorder={reorder}
                />
              ))}
            </ActionList.Group>
            <ActionList.Group
              role="listbox"
              title="Hidden fields"
              selectionVariant={
                /** selectionVariant override on Group: disable selection if there are no options */
                hiddenOptions.length ? 'multiple' : false
              }
            >
              {hiddenOptions.map((option, index) => (
                <ActionList.Item
                  key={index}
                  role="option"
                  selected={option.selected}
                  onSelect={() => toggle(option.text)}
                >
                  <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
                  {option.text}
                </ActionList.Item>
              ))}
              {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
            </ActionList.Group>
          </ActionList>
        </DndProvider>
      </ErsatzOverlay>
    </>
  )
}