2 merge types (christopher-caldwell#16)

* fix: Consolidating types and adding a one board

* chore(release): 0.0.6

* fix: Correcting index signatures

* feat: Improving types for bags

* fix: Removing BoundingFunc

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.6](https://github.com/christopher-caldwell/react-kanban/compare/v0.0.5...v0.0.6) (2022-11-01)
+
+
+### Bug Fixes
+
+* Consolidating types and adding a one board ([ef36872](https://github.com/christopher-caldwell/react-kanban/commit/ef36872a7d1d2e61a8a6f6322d515379f83e6ce4))
+
 ### [0.0.5](https://github.com/christopher-caldwell/react-kanban/compare/v0.0.2...v0.0.5) (2022-10-31)
 
 

demo/src/data/index.ts

@@ -170,6 +170,18 @@ export const board: KanbanBoard<CustomCard> = {
   ]
 }
 
+export const createNewCard = () => {
+  return {
+    id: uuid(),
+    title: 'Super New Card',
+    description: 'Card content',
+    assigneeId: assigneeIdGenerator(),
+    storyPoints: storyPointGenerator(),
+    ticketType: TicketType.Feature,
+    createdAt: faker.date.past()
+  }
+}
+
 // export const cardsKeyedById: Record<string | number, Card> = board.columns.reduce<Record<string | number, Card>>(
 //   (total, current) => {
 //     const cards: Record<string | number, Card> = current.cards.reduce((cardTotal, card) => {

demo/src/features/notion/components/ColumnHeader.tsx

@@ -4,10 +4,15 @@ import AddIcon from '@mui/icons-material/Add'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 import randomRgba from 'random-rgba'
 
-import { CustomCard } from '@/data'
+import { createNewCard, CustomCard } from '@/data'
 import { ColoredBgText } from './Card'
 
 export const renderColumnHeader: UncontrolledBoardProps<CustomCard>['renderColumnHeader'] = (column, { addCard }) => {
+  const onAddCard = () => {
+    const newCard = createNewCard()
+    // Can be async, do mutation here awaiting result, then call `addCard`
+    addCard(newCard, { on: 'top' })
+  }
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <Box sx={{ flexGrow: 1, display: 'flex' }}>
@@ -18,7 +23,7 @@ export const renderColumnHeader: UncontrolledBoardProps<CustomCard>['renderColum
         <IconButton>
           <MoreHorizIcon />
         </IconButton>
-        <IconButton onClick={addCard}>
+        <IconButton onClick={onAddCard}>
           <AddIcon />
         </IconButton>
       </Box>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caldwell619/react-kanban",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "(fork of) Yet another Kanban/Trello board lib for React",
   "scripts": {
     "lint": "eslint --ext .ts,.tsx src",

src/features/board/components/Container.tsx

@@ -14,15 +14,15 @@ import {
 import { withDroppable } from '@/features/with-droppable'
 import { RenderCard } from '@/features/column'
 import { Card, Column as ColumnType, KanbanBoard } from '@/types'
-import { SharedProps } from './shared'
+import { ControlledBoardProps } from './Controlled'
 
 const Columns = forwardRef<HTMLDivElement>((props, ref) => (
   <div ref={ref} style={{ whiteSpace: 'nowrap' }} {...props} />
 ))
 const DroppableBoard = withDroppable(Columns)
 
 export const BoardContainer = function <TCard extends Card>({
-  children: board,
+  board,
   renderCard,
   disableColumnDrag,
   disableCardDrag,
@@ -90,11 +90,11 @@ export interface OnDragEnd<TSubject> extends Partial<Coordinates> {
   subject: TSubject
 }
 interface Props<TCard extends Card> {
-  children: KanbanBoard<TCard>
+  board: KanbanBoard<TCard>
   renderCard: RenderCard<TCard>
   disableColumnDrag: boolean
   disableCardDrag: boolean
-  renderColumnHeader: SharedProps<TCard>['renderColumnHeader']
+  renderColumnHeader: ControlledBoardProps<TCard>['renderColumnHeader']
   renderColumnAdder: () => JSX.Element | null
   allowRemoveColumn: boolean
   onColumnRemove?: (column: ColumnType<TCard>) => void

src/features/board/components/Controlled.tsx

@@ -81,9 +81,8 @@ export const ControlledBoard = function <TCard extends Card>({
         //
       }}
       allowAddCard
-    >
-      {board}
-    </BoardContainer>
+      board={board}
+    />
   )
 }
 
@@ -94,4 +93,8 @@ export type OnDragEndNotification<TSubject> = (
 ) => void
 export interface ControlledBoardProps<TCard extends Card> extends SharedProps<TCard> {
   children: KanbanBoard<TCard>
+  /** If not provided , will render the default column adder */
+  renderColumnAdder?: () => JSX.Element
+  /** If not provided , will render the default column header */
+  renderColumnHeader?: (column: Column<TCard>) => JSX.Element
 }

src/features/board/components/Uncontrolled.tsx

@@ -143,12 +143,30 @@ export const UncontrolledBoard = function <TCard extends Card>({
       disableCardDrag={disableCardDrag}
       onCardNew={async (column, card) => await handleDraftCardAdd(column, card, allowAddCard)}
       allowAddCard={!!allowAddCard && !!onNewCardConfirm}
-    >
-      {board}
-    </BoardContainer>
+      board={board}
+    />
   )
 }
 
+interface ColumnAdderBag<TCard extends Card> {
+  addColumn: (newColumn: Column<TCard>) => Promise<void>
+}
+
+interface Position {
+  on: 'top' | 'bottom'
+}
+
+// TODO: Fix bound function into proper signature
+interface ColumnHeaderBag<TCard extends Card> {
+  removeColumn: () => void
+  renameColumn: (title: string) => void
+  addCard: (card: TCard, options?: Position) => void
+}
+
 export interface UncontrolledBoardProps<TCard extends Card> extends SharedProps<TCard> {
   initialBoard: KanbanBoard<TCard>
+  /** If not provided , will render the default column adder */
+  renderColumnAdder?: (options: ColumnAdderBag<TCard>) => JSX.Element
+  /** If not provided , will render the default column header */
+  renderColumnHeader?: (column: Column<TCard>, options: ColumnHeaderBag<TCard>) => JSX.Element
 }

src/features/board/components/shared.ts → src/features/board/components/shared.d.ts

@@ -10,30 +10,17 @@ interface ColumnCallbackInfo<TCard extends Card> {
   board: KanbanBoard<TCard>
   column: Column<TCard>
 }
-
-interface ColumnAdderBag<TCard extends Card> {
-  addColumn: (newColumn: Column<TCard>) => Promise<void>
-}
-interface ColumnHeaderBag {
-  removeColumn: BoundFunction
-  renameColumn: BoundFunction
-  addCard: BoundFunction
-}
 interface CardBag {
-  removeCard?: BoundFunction
+  removeCard?: () => void
   dragging: boolean
 }
+
 export interface SharedProps<TCard extends Card> {
   onCardDragEnd?: OnDragEndNotification<TCard>
   onColumnDragEnd?: OnDragEndNotification<Column<TCard>>
   onColumnRemove?: (info: ColumnCallbackInfo<TCard>) => void
   onCardRemove?: (info: CardCallbackInfo<TCard>) => void
   renderCard?: (card: TCard, options: CardBag) => JSX.Element
-  /** If not provided , will render the default column adder */
-  renderColumnAdder?: (options?: ColumnAdderBag<TCard>) => JSX.Element
-  /** If not provided , will render the default column header */
-  renderColumnHeader?: (column: Column<TCard>, options?: ColumnHeaderBag) => JSX.Element
-  /** If not provided , will render the default card */
   onColumnRename?: (info: ColumnCallbackInfo<TCard>) => void
   onCardNew?: (info: CardCallbackInfo<TCard>) => void
   onColumnNew?: (info: ColumnCallbackInfo<TCard>) => void
@@ -65,5 +52,3 @@ export type OnDragEndNotification<TSubject> = (
 export interface OnDragEnd<TSubject> extends Partial<Coordinates> {
   subject: TSubject
 }
-
-type BoundFunction = any

src/features/board/index.tsx

@@ -3,10 +3,12 @@ import { ControlledBoard, ControlledBoardProps, UncontrolledBoard, UncontrolledB
 
 export const Board = function <TCard extends Card>({ initialBoard, children, ...restProps }: Props<TCard>) {
   if (initialBoard) return <UncontrolledBoard initialBoard={initialBoard} {...restProps} />
-  if (children) return <ControlledBoard {...restProps}>{children}</ControlledBoard>
+  if (children) return <ControlledBoard {...(restProps as ControlledBoardProps<TCard>)}>{children}</ControlledBoard>
   throw new Error('Must provide either "children" or "initialBoard" props')
 }
 
-export type Props<TCard extends Card> = Partial<UncontrolledBoardProps<TCard>> & Partial<ControlledBoardProps<TCard>>
+export type Props<TCard extends Card> =
+  | (Partial<UncontrolledBoardProps<TCard>> & { children?: never })
+  | (Partial<ControlledBoardProps<TCard>> & { initialBoard?: never })
 
 export * from './components'