Remove drag and drop in action list example (#5594)

* Remove sortable example * Remove unused: * Remove now unused dnd library * Add package-lock change
primer · Jan 27, 2025 · 0895e47 · 0895e47
1 parent 469f703
commit 0895e47
Show file tree

Hide file tree

Showing 3 changed files with 0 additions and 198 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -186,8 +186,6 @@
     "micromark-extension-mdxjs": "3.0.0",
     "postcss-preset-primer": "^0.0.0",
     "react": "18.3.1",
-    "react-dnd": "14.0.4",
-    "react-dnd-html5-backend": "14.0.2",
     "react-dom": "18.3.1",
     "react-test-renderer": "18.3.1",
     "recast": "0.23.7",

diff --git a/packages/react/src/ActionList/ActionList.examples.stories.tsx b/packages/react/src/ActionList/ActionList.examples.stories.tsx
@@ -1,7 +1,5 @@
 import type {Meta} from '@storybook/react'
 import React, {forwardRef} from 'react'
-import {DndProvider, useDrag, useDrop} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
 import {
   TypographyIcon,
   StarIcon,
@@ -13,7 +11,6 @@ import {
   LinkIcon,
   XIcon,
 } from '@primer/octicons-react'
-import type {ActionListItemProps} from '.'
 import {ActionList} from '.'
 import TextInput from '../TextInput'
 import Spinner from '../Spinner'
@@ -251,127 +248,6 @@ export function AsyncListWithSpinner(): JSX.Element {
   )
 }
 
-type Option = {text: string; icon: React.ReactNode; selected: boolean}
-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 (
-    // @ts-ignore react-dnd needs to be updated to support React 18
-    <DndProvider backend={HTML5Backend}>
-      <ActionList selectionVariant="multiple" role="menu">
-        <ActionList.Group>
-          <ActionList.GroupHeading>Visible fields (can be reordered)</ActionList.GroupHeading>
-          {visibleOptions.map(option => (
-            <SortableItem
-              key={option.text}
-              role="menuitemcheckbox"
-              option={option}
-              onSelect={() => toggle(option.text)}
-              reorder={reorder}
-            />
-          ))}
-        </ActionList.Group>
-        <ActionList.Group
-          selectionVariant={
-            /** selectionVariant override on Group: disable selection if there are no options */
-            hiddenOptions.length ? 'multiple' : false
-          }
-        >
-          <ActionList.GroupHeading>Hidden fields</ActionList.GroupHeading>
-          {hiddenOptions.map((option, index) => (
-            <ActionList.Item
-              key={index}
-              role="menuitemcheckbox"
-              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>
-  )
-}
-MemexSortable.storyName = 'Memex Sortable List'
-
-type SortableItemProps = {
-  option: Option
-  role: ActionListItemProps['role']
-  onSelect: ActionListItemProps['onSelect']
-  reorder: ({optionToMove, moveAfterOption}: {optionToMove: Option; moveAfterOption: Option}) => void
-}
-const SortableItem: React.FC<React.PropsWithChildren<SortableItemProps>> = ({option, role, onSelect, reorder}) => {
-  const [{isDragging}, dragRef] = useDrag(() => ({
-    type: 'ITEM',
-    item: option,
-    collect: monitor => {
-      return {isDragging: monitor.isDragging()}
-    },
-  }))
-
-  const [{isOver}, dropRef] = useDrop(() => ({
-    accept: 'ITEM',
-    collect: monitor => {
-      return {isOver: monitor.isOver()}
-    },
-    drop: (optionDropped: Option) => {
-      reorder({optionToMove: optionDropped, moveAfterOption: option})
-    },
-  }))
-
-  return (
-    <ActionList.Item
-      role={role}
-      ref={element => dragRef(element) && dropRef(element)} // merge refs
-      selected={option.selected}
-      onSelect={onSelect}
-      sx={{
-        opacity: isDragging ? 0.5 : 1,
-        boxShadow: isOver ? theme => `0px 2px 0 0px ${theme.colors.accent.emphasis}` : undefined,
-        borderRadius: isOver ? 0 : 2,
-      }}
-    >
-      <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
-      {option.text}
-    </ActionList.Item>
-  )
-}
-
 export function AllCombinations(): JSX.Element {
   return (
     <>