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