feat(dragdrop)!: remove top level subcomponents (#1697)

chanzuckerberg · Jul 19, 2023 · b4fd00c · b4fd00c
1 parent 0c8280d
commit b4fd00c
Show file tree

Hide file tree

Showing 11 changed files with 236 additions and 269 deletions.
diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
@@ -10,7 +10,6 @@ import {
   Card,
   DataBar,
   DragDrop,
-  DragDropContainerHeader,
   Grid,
   GridItem,
   Heading,
@@ -421,7 +420,7 @@ export const CoursePlannerEdit = () => {
       itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
       emptyContent: container1EmptyContent(),
       header: (
-        <DragDropContainerHeader>
+        <DragDrop.ContainerHeader>
           <div className="mb-4 flex items-center gap-4">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Available projects
@@ -433,14 +432,14 @@ export const CoursePlannerEdit = () => {
               </Button>
             </div>
           </div>
-        </DragDropContainerHeader>
+        </DragDrop.ContainerHeader>
       ),
     },
     'container-2': {
       itemIds: [],
       emptyContent: container2EmptyContent(),
       header: (
-        <DragDropContainerHeader>
+        <DragDrop.ContainerHeader>
           <div className="mb-4 flex items-center gap-4">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Planned projects
@@ -452,7 +451,7 @@ export const CoursePlannerEdit = () => {
               </Button>
             </div>
           </div>
-        </DragDropContainerHeader>
+        </DragDrop.ContainerHeader>
       ),
     },
   });

diff --git a/src/components/DragDrop/DragDrop.stories.tsx b/src/components/DragDrop/DragDrop.stories.tsx
@@ -1,16 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import type { ComponentProps } from 'react';
 import React, { useState } from 'react';
-import type { NewState } from './DragDrop';
-import { DragDrop } from './DragDrop';
-import {
-  Button,
-  Card,
-  DragDropContainerHeader,
-  Heading,
-  Icon,
-  Text,
-} from '../..';
+import { DragDrop, type NewState } from './DragDrop';
+import { Button, Card, Heading, Icon, Text } from '../..';
 import styles from './DragDrop.stories.module.css';
 
 export default {
@@ -89,13 +81,13 @@ export const Default: StoryObj<Args> = {
       'container-1': {
         itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
         header: (
-          <DragDropContainerHeader>
+          <DragDrop.ContainerHeader>
             <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Available Projects
               </Heading>
             </div>
-          </DragDropContainerHeader>
+          </DragDrop.ContainerHeader>
         ),
       },
       'container-2': {
@@ -296,13 +288,13 @@ export const Default: StoryObj<Args> = {
           </>
         ),
         header: (
-          <DragDropContainerHeader>
+          <DragDrop.ContainerHeader>
             <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Selected Projects
               </Heading>
             </div>
-          </DragDropContainerHeader>
+          </DragDrop.ContainerHeader>
         ),
       },
     },
@@ -363,13 +355,13 @@ export const HoveredHandle: StoryObj<Args> = {
       'container-1': {
         itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
         header: (
-          <DragDropContainerHeader>
+          <DragDrop.ContainerHeader>
             <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Available Projects
               </Heading>
             </div>
-          </DragDropContainerHeader>
+          </DragDrop.ContainerHeader>
         ),
       },
       'container-2': {
@@ -490,13 +482,13 @@ export const HoveredHandle: StoryObj<Args> = {
           </>
         ),
         header: (
-          <DragDropContainerHeader>
+          <DragDrop.ContainerHeader>
             <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Selected Projects
               </Heading>
             </div>
-          </DragDropContainerHeader>
+          </DragDrop.ContainerHeader>
         ),
       },
     },
@@ -512,13 +504,13 @@ const InteractiveDragDrop = () => {
   );
 
   const [indexState, setIndexState] = useState<number | undefined>(2);
-  const [containers, setContainers] = useState({
+  const [containers, setContainers] = useState<NewState['containers']>({
     'container-1': {
       columnClassName: styles['bg-yellow'],
       emptyContent: emptyContent(),
       itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
       header: (
-        <DragDropContainerHeader>
+        <DragDrop.ContainerHeader>
           <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Available projects
@@ -530,7 +522,7 @@ const InteractiveDragDrop = () => {
               </Button>
             </div>
           </div>
-        </DragDropContainerHeader>
+        </DragDrop.ContainerHeader>
       ),
     },
     'container-2': {
@@ -539,7 +531,7 @@ const InteractiveDragDrop = () => {
       emptyContent: emptyContent(),
       itemIds: [],
       header: (
-        <DragDropContainerHeader>
+        <DragDrop.ContainerHeader>
           <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Planned projects
@@ -551,7 +543,7 @@ const InteractiveDragDrop = () => {
               </Button>
             </div>
           </div>
-        </DragDropContainerHeader>
+        </DragDrop.ContainerHeader>
       ),
     },
     'container-3': {
@@ -560,7 +552,7 @@ const InteractiveDragDrop = () => {
       emptyContent: emptyContent(),
       itemIds: [],
       header: (
-        <DragDropContainerHeader>
+        <DragDrop.ContainerHeader>
           <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Planned projects
@@ -572,7 +564,7 @@ const InteractiveDragDrop = () => {
               </Button>
             </div>
           </div>
-        </DragDropContainerHeader>
+        </DragDrop.ContainerHeader>
       ),
     },
     'container-4': {
@@ -581,7 +573,7 @@ const InteractiveDragDrop = () => {
       emptyContent: emptyContent(),
       itemIds: [],
       header: (
-        <DragDropContainerHeader>
+        <DragDrop.ContainerHeader>
           <div className="bg-neutral-subtle mb-4 flex items-center gap-4 p-0">
             <Heading as="h2" size="title-sm" variant="neutral-strong">
               Planned projects
@@ -593,11 +585,11 @@ const InteractiveDragDrop = () => {
               </Button>
             </div>
           </div>
-        </DragDropContainerHeader>
+        </DragDrop.ContainerHeader>
       ),
     },
   });
-  const [items, setItems] = useState({
+  const [items, setItems] = useState<NewState['items']>({
     'item-1': {
       title: 'Project #1',
       children: (
@@ -639,7 +631,7 @@ const InteractiveDragDrop = () => {
       ),
     },
   });
-  const returnUpdatedItems = (updatedItems: any) => {
+  const returnUpdatedItems = (updatedItems: NewState) => {
     setContainers(updatedItems.containers);
     setItems(updatedItems.items);
     updatedItems.containers['container-2'].itemIds.map(
@@ -655,7 +647,7 @@ const InteractiveDragDrop = () => {
     <DragDrop
       containers={containers}
       containersClassName={styles['grid-square']}
-      getNewState={(updatedItems: NewState) => returnUpdatedItems(updatedItems)}
+      getNewState={(updatedItems) => returnUpdatedItems(updatedItems)}
       items={items}
       multipleContainers={false}
       unstyledItems