From cc76ffb2d21c613ee2139081d42ba1a712b3c34e Mon Sep 17 00:00:00 2001 From: Julian Roeland Date: Thu, 23 May 2024 14:48:05 +0200 Subject: [PATCH 1/6] :sparkles: #17 - feat: improved kanban --- src/components/data/kanban/kanban.scss | 51 +- src/components/data/kanban/kanban.tsx | 572 +++++------------- src/style/tokens/base.scss | 1 + src/templates/index.ts | 1 + src/templates/kanban-template/index.ts | 1 + .../kanban-template.stories.tsx} | 74 +-- .../kanban-template/kanban-template.tsx | 26 + src/templates/kanban/index.ts | 1 - src/templates/kanban/kanban.tsx | 47 -- 9 files changed, 250 insertions(+), 524 deletions(-) create mode 100644 src/templates/kanban-template/index.ts rename src/templates/{kanban/kanban.stories.tsx => kanban-template/kanban-template.stories.tsx} (68%) create mode 100644 src/templates/kanban-template/kanban-template.tsx delete mode 100644 src/templates/kanban/index.ts delete mode 100644 src/templates/kanban/kanban.tsx diff --git a/src/components/data/kanban/kanban.scss b/src/components/data/kanban/kanban.scss index f908c7e6..e566aaab 100644 --- a/src/components/data/kanban/kanban.scss +++ b/src/components/data/kanban/kanban.scss @@ -12,25 +12,29 @@ height: 100%; } - &__body .mykn-column { + &__count { + margin-left: var(--spacing-h); + border-radius: 10px; border: 1px solid var(--typography-color-border); - overflow-y: auto; + background-color: #fafafa; + padding: 0 6px; + color: var(--typography-color-muted); } - &__body .mykn-column:before { - background-color: var(--typography-color-border); - opacity: 0.1; - content: ""; - height: 100%; - position: absolute; - width: 100%; + &__body .mykn-column { + border: 1px solid var(--typography-color-border); + border-radius: var(--border-radius-l); + background-color: var(--page-color-background-alt); + overflow-y: auto; + overflow-x: hidden; + padding: 18px 16px; } &__body &__drop-indicator { background-color: var(--page-color-accent); border: 1px dashed var(--page-color-primary); box-sizing: content-box; - height: calc(var(--typography-line-height-body-s) * 2); + height: calc(var(--typography-line-height-body-s) * 3); padding-block: var(--spacing-v); } @@ -39,27 +43,24 @@ border-style: dashed; } - &__body .mykn-column > .mykn-h3 { - position: sticky; - top: 0; - z-index: 10; - } - &__body .mykn-column > .mykn-button { + border: 1px solid var(--typography-color-border); + border-radius: var(--border-radius-l); white-space: normal; + background-color: var(--typography-color-background); + padding: 16px; &:focus-within { z-index: 100; } } - &__body &__preview { - display: flex; - flex-shrink: 0; - height: calc(var(--typography-line-height-body-s) * 2); - justify-content: center; - overflow: hidden; - width: calc(var(--typography-line-height-body-s) * 2); + &__body .mykn-column > .mykn-button:hover, + &__body .mykn-column > .mykn-button:focus { + border: 1px solid var(--page-color-primary); + scale: 100%; + box-shadow: unset; + background-color: var(--typography-color-background-alt); } &__body .mykn-column > .mykn-button > .mykn-select { @@ -80,4 +81,8 @@ visibility: visible; } } + + &__item { + width: 100%; + } } diff --git a/src/components/data/kanban/kanban.tsx b/src/components/data/kanban/kanban.tsx index 5fe5ddd4..928a2c7f 100644 --- a/src/components/data/kanban/kanban.tsx +++ b/src/components/data/kanban/kanban.tsx @@ -1,127 +1,72 @@ import React, { useEffect, useState } from "react"; -import { - AttributeData, - DEFAULT_URL_FIELDS, - FieldSet, - field2Title, - formatMessage, - useIntl, -} from "../../../lib"; -import { - GroupedAttributeDataProps, - getContextData, -} from "../../../lib/data/groupedattributedata"; -import { Button, ButtonLink, ButtonLinkProps, ButtonProps } from "../../button"; +import { Button, ButtonProps } from "../../button"; import { Select } from "../../form"; import { Column, Grid } from "../../layout"; -import { Body, H1, H2, H3, P } from "../../typography"; +import { Body, H2, H3 } from "../../typography"; import "./kanban.scss"; -export type KanbanProps = GroupedAttributeDataProps & { - /** If set, items are `draggable` allowing the user to rearrange them (across) columns). */ +export type KanbanProps = { + /** If set, items are `draggable` allowing the user to rearrange them (across columns). */ draggable?: boolean; - /** The kanban "change column" (accessible) label */ + /** The kanban-template "change column" (accessible) label */ labelSelectColumn?: string; - /** The kanban "move object position" (accessible) label. */ + /** The kanban-template "move object position" (accessible) label. */ labelMoveObject?: string; - /** Get called when the fieldsets change. */ - onFieldsetsChange?: (fieldsets: FieldSet[]) => void; + /** Get called when the componentList changes. */ + onComponentListChange?: (componentList: KanbanColumn[]) => void; - /** Get called when the objectLists change. */ - onObjectListsChange?: (objectLists: AttributeData[][]) => void; + /** The new componentList prop defining columns and their items */ + componentList: KanbanColumn[]; - /** Get called when an object is dropped onto a column. */ - onObjectChange?: ( - object: AttributeData, - sourceColumnIndex: number, - targetColumnIndex: number, - sourceObjectIndex: number, - targetObjectIndex: number, - ) => void; + /** The title of the kanban */ + title?: string; +}; + +export type KanbanColumn = { + title: string; + items: React.ReactNode[]; }; export type KanbanDragData = { sourceColumnIndex: number; sourceObjectIndex: number; - object: AttributeData; }; -/** - * Kanban component, shows item over various columns. Items can be made `draggable` allowing the user to rearrange them - * (across columns). - */ export const Kanban: React.FC = ({ - buttonProps, - buttonLinkProps, + componentList, draggable = false, - fieldset, - fieldsets, - groupBy, labelSelectColumn, labelMoveObject, - objectList, - objectLists, - renderPreview, + onComponentListChange, title, - urlFields = DEFAULT_URL_FIELDS, - onClick, - onFieldsetsChange, - onObjectListsChange, - onObjectChange, ...props }) => { const [dragIndexState, setDragIndexState] = useState<[number, number] | null>( null, ); - const [fieldsetsState, setFieldsetsState] = useState([]); - const [objectListsState, setObjectListsState] = useState( - [], - ); + const [componentListState, setComponentListState] = + useState(componentList); useEffect(() => { - const [_fieldsets, _objectLists] = getContextData( - groupBy, - fieldset, - fieldsets, - objectList, - objectLists, - ); - setFieldsetsState(_fieldsets); - setObjectListsState(_objectLists); - onFieldsetsChange?.(_fieldsets); - onObjectListsChange?.(_objectLists); - }, [groupBy, fieldset, fieldsets, objectList, objectLists]); + setComponentListState(componentList); + }, [componentList]); - /** - * Gets called when the user drags an item over a column. - * Updates `setDragIndexState` with column/object index. - * @param e - */ const handleDragOver: React.DragEventHandler = (e) => { e.preventDefault(); - const currentTarget: HTMLElement = e.currentTarget as HTMLElement; - const target: HTMLElement = e.currentTarget as HTMLElement; - if (target.className !== e.currentTarget.className) { - return; - } - - const siblings = [...currentTarget.children].filter((child) => - child.getAttribute("draggable"), - ); - + const currentTarget = e.currentTarget as HTMLElement; const columnIndex = parseInt(currentTarget.dataset.columnIndex || "0"); - const insertIndex = getInsertIndex(siblings, e.nativeEvent.clientY); + const insertIndex = getInsertIndex( + Array.from(currentTarget.children), + e.clientY, + ); setDragIndexState([columnIndex, insertIndex]); }; - /** - * Gets called when the user drops an item on a colum. - * @param e - */ const handleDrop: React.DragEventHandler = (e) => { + e.preventDefault(); const [targetColumnIndex, targetObjectIndex] = dragIndexState || [0, 0]; setDragIndexState(null); @@ -131,7 +76,8 @@ export const Kanban: React.FC = ({ : {}; if (typeof sourceColumnIndex !== "undefined") { - const object = objectListsState[sourceColumnIndex][sourceObjectIndex]; + const object = + componentListState[sourceColumnIndex].items[sourceObjectIndex]; moveObject( object, sourceColumnIndex, @@ -142,71 +88,29 @@ export const Kanban: React.FC = ({ } }; - const handleObjectChange = ( - object: AttributeData, - sourceColumnIndex: number, - targetColumnIndex: number, - sourceObjectIndex: number, - targetObjectIndex: number, - ) => - moveObject( - object, - sourceColumnIndex, - targetColumnIndex, - sourceObjectIndex, - targetObjectIndex, - ); - - /** - * Moves `object` to column/position at given indices and updates `objectListsState`. - * on`onObjectChange` and `onObjectListsChange` are called subsequently. - * @param object - * @param sourceColumnIndex - * @param targetColumnIndex - * @param sourceObjectIndex - * @param targetObjectIndex - */ const moveObject = ( - object: AttributeData, + object: React.ReactNode, sourceColumnIndex: number, targetColumnIndex: number, sourceObjectIndex: number, targetObjectIndex: number, ) => { - const newObjectListsState = [...objectListsState]; - const sourceObjectList = newObjectListsState[sourceColumnIndex]; - const targetObjectList = newObjectListsState[targetColumnIndex] || []; + const newComponentListState = [...componentListState]; + const sourceItems = newComponentListState[sourceColumnIndex].items; + const targetItems = newComponentListState[targetColumnIndex].items; const _targetObjectIndex = - targetObjectIndex === -1 ? targetObjectList.length : targetObjectIndex; - - // Remove item from source column - sourceObjectList.splice(sourceObjectIndex, 1); + targetObjectIndex === -1 ? targetItems.length : targetObjectIndex; - // Add item to target column - targetObjectList.splice(_targetObjectIndex, 0, object); + sourceItems.splice(sourceObjectIndex, 1); + targetItems.splice(_targetObjectIndex, 0, object); - // Update objectListsState - setObjectListsState(newObjectListsState); - - // Call callbacks - onObjectChange?.( - object, - sourceColumnIndex, - targetColumnIndex, - sourceObjectIndex, - _targetObjectIndex, - ); - onObjectListsChange?.(newObjectListsState); + setComponentListState(newComponentListState); + onComponentListChange?.(newComponentListState); }; - /** - * Returns the `index` required to insert a new (HTML) sibling in `children` at closes to `y`. - * @param children - * @param y Y position based on the viewport. - */ - const getInsertIndex = (children: ArrayLike, y: number): number => { + const getInsertIndex = (children: Element[], y: number): number => { const yPositions = Array.from(children).map( - (n) => n.getBoundingClientRect().y, + (n) => n.getBoundingClientRect().top, ); const lastIndex = yPositions.findIndex((p) => p >= y); return lastIndex === -1 ? children.length : lastIndex; @@ -220,359 +124,207 @@ export const Kanban: React.FC = ({ )} - - {fieldsetsState.map((fieldset, index) => ( - - ))} + + {componentListState.map((column, columnIndex) => { + const count = column.items.length; + return ( +
+ +

+ {column.title} +
{count}
+

+ + +
+ ); + })} ); }; -export type KanbanSectionProps = Omit< - React.ComponentProps<"section">, - "onClick" -> & { - buttonLinkProps?: ButtonLinkProps; - buttonProps?: ButtonProps; +export type KanbanSectionProps = { columnIndex: number; + items: React.ReactNode[]; draggable?: boolean; dragIndex: [number, number] | null; - fieldset: FieldSet; - fieldsets: FieldSet[]; - fieldsetIndex: number; labelSelectColumn?: string; labelMoveObject?: string; - objectList: AttributeData[]; - renderPreview?: (attributeData: AttributeData) => React.ReactNode; - urlFields: (keyof KanbanSectionProps["objectList"][number])[]; - onClick?: (event: React.MouseEvent, attributeData: AttributeData) => void; onDragOver: React.DragEventHandler; onDrop: React.DragEventHandler; - onObjectChange?: ( - object: AttributeData, + moveObject: ( + object: React.ReactNode, sourceColumnIndex: number, targetColumnIndex: number, sourceObjectIndex: number, targetObjectIndex: number, ) => void; + componentListState: KanbanColumn[]; }; export const KanbanSection: React.FC = ({ - buttonProps, - buttonLinkProps, columnIndex, + items, draggable, dragIndex, - fieldset, - fieldsets, - fieldsetIndex, - labelSelectColumn, - labelMoveObject, - objectList, - renderPreview, - urlFields, - onClick, onDragOver, onDrop, - onObjectChange, + moveObject, + labelSelectColumn, + labelMoveObject, + componentListState, }) => { const isDragging = Boolean(dragIndex && dragIndex[0] === columnIndex); + return ( - {fieldset[0] && ( - -

{fieldset[0]}

- - )} - {objectList.map((o, index) => ( - - {isDragging && dragIndex?.[1] === index && ( -
- )} - - + {items.map((item, index) => ( + ))} - {isDragging && (dragIndex?.[1] || 0) >= objectList.length && ( + {isDragging && (dragIndex?.[1] || 0) >= items.length && (
)} ); }; - -export type KanbanItemProps = Omit, "onClick"> & { - buttonLinkProps?: ButtonLinkProps; +export type KanbanItemProps = { buttonProps?: ButtonProps; draggable?: boolean; - fieldset: FieldSet; - fieldsets: FieldSet[]; - fieldsetIndex: number; - labelSelectColumn?: string; - labelMoveObject?: string; - object: AttributeData; + item: React.ReactNode; + columnIndex: number; objectIndex: number; - objectList: AttributeData[]; - renderPreview?: (attributeData: AttributeData) => React.ReactNode; - urlFields: (keyof KanbanItemProps["object"])[]; - onClick?: (event: React.MouseEvent, attributeData: AttributeData) => void; - onObjectChange?: ( - object: AttributeData, + moveObject: ( + object: React.ReactNode, sourceColumnIndex: number, targetColumnIndex: number, sourceObjectIndex: number, targetObjectIndex: number, ) => void; + labelSelectColumn?: string; + labelMoveObject?: string; + componentListState: KanbanColumn[]; }; export const KanbanItem: React.FC = ({ buttonProps, - buttonLinkProps, draggable, - fieldset, - fieldsets, - fieldsetIndex, - labelSelectColumn, - labelMoveObject, - object, + item, + columnIndex, objectIndex, - objectList, - renderPreview, - urlFields, - onClick, - onObjectChange, + moveObject, + labelSelectColumn = "Select column", + labelMoveObject = "Select position", + componentListState, }) => { - const intl = useIntl(); - const fields = fieldset[1].fields; - const titleField = fieldset[1].title || Object.keys(object)[0]; - const urlField = urlFields.find((f) => object[f]); + const [selectedColumn, setSelectedColumn] = useState(columnIndex); + const [selectedPosition, setSelectedPosition] = useState(objectIndex); - const title = field2Title(String(object[titleField])); - const href = urlField ? String(object[urlField]) || undefined : undefined; - const otherFields = fields.filter( - (field) => ![...urlFields, titleField].includes(field), - ); - const _labelSelectColumn = labelSelectColumn - ? formatMessage(labelSelectColumn, object) - : intl.formatMessage( - { - id: "mykn.components.Kanban.labelSelectColumn", - description: - 'mykn.components.Kanban: The kanban "change column" (accessible) label', - defaultMessage: "verplaats onderdeel naar kolom", - }, - object as Record, - ); - - const _labelMoveObject = labelMoveObject - ? formatMessage(labelMoveObject, object) - : intl.formatMessage( - { - id: "mykn.components.Kanban.labelMoveObject", - description: - 'mykn.components.Kanban: The kanban "move object position" (accessible) label', - defaultMessage: "wijzig positie van onderdeel", - }, - object as Record, - ); - - /** - * Gets called when the user starts dragging the item. - * Populates the datatransfer with stringified `KanbanDragData`. - * @param e - */ - const onDragStart: React.DragEventHandler = (e) => { + const onDragStart = ( + e: React.DragEvent, + columnIndex: number, + objectIndex: number, + ) => { const data: KanbanDragData = { - sourceColumnIndex: fieldsetIndex, + sourceColumnIndex: columnIndex, sourceObjectIndex: objectIndex, - object, }; - e.dataTransfer.dropEffect = "move"; - e.dataTransfer.setData("text/plain", title); e.dataTransfer.setData("application/json", JSON.stringify(data)); - href && e.dataTransfer.setData("text/uri-list", href); }; + const handleColumnChange = (e: React.ChangeEvent) => { + const targetColumnIndex = parseInt(e.target.value); + setSelectedColumn(targetColumnIndex); + moveObject(item, columnIndex, targetColumnIndex, objectIndex, -1); + }; + + const handlePositionChange = (e: React.ChangeEvent) => { + const targetPositionIndex = parseInt(e.target.value); + setSelectedPosition(targetPositionIndex); + moveObject( + item, + columnIndex, + selectedColumn, + objectIndex, + targetPositionIndex, + ); + }; + + const columnOptions = componentListState.map((column, index) => ({ + label: column.title, + value: index.toString(), + })); + + const positionOptions = componentListState[selectedColumn].items.map( + (_, index) => ({ + label: `Position ${index + 1}`, + value: index.toString(), + }), + ); + return ( - onDragStart(e, columnIndex, objectIndex)} > -

- {title} -

- - {otherFields.map((field) => ( -

- {object[field]} -

- ))} - - {/* A11y column selector. */} +
{item}
{draggable && ( <> { - const option = { - label: String(o[titleField] || index), - selected: o === object, - value: index, - }; - return option; - })} + aria-label={labelMoveObject} + value={selectedPosition.toString()} + options={positionOptions} required textSize="xs" onClick={(e) => e.preventDefault()} - onChange={(e) => - onObjectChange?.( - object, - fieldsetIndex, - fieldsetIndex, - objectIndex, - parseInt(e.target.value), - ) - } + onChange={handlePositionChange} /> )} - - ); -}; - -export type KanbanButtonProps = { - buttonLinkProps?: ButtonLinkProps; - buttonProps?: ButtonProps; - children: React.ReactNode; - draggable?: boolean; - href?: string; - object: AttributeData; - renderPreview?: (attributeData: AttributeData) => React.ReactNode; - title: string; - onClick?: (event: React.MouseEvent, attributeData: AttributeData) => void; - onDragStart: React.DragEventHandler; -}; - -export const KanbanButton: React.FC = ({ - buttonProps, - buttonLinkProps, - children, - draggable, - href, - title, - object, - renderPreview = () =>

{title[0].toUpperCase()}

, - onClick, - onDragStart, -}) => { - const content = renderPreview(object); - - return href ? ( - onClick?.(e, object)} - onDragStart={onDragStart} - > - {content} - {children} - - ) : ( - ); }; diff --git a/src/style/tokens/base.scss b/src/style/tokens/base.scss index d73cca1f..39e6703e 100644 --- a/src/style/tokens/base.scss +++ b/src/style/tokens/base.scss @@ -132,6 +132,7 @@ /* PAGE */ --page-color-accent: hsl(var(--brand-color-hue) 100% 95%); --page-color-background: #f5f7fd; + --page-color-background-alt: #fafafa; --page-color-highlight: var(--page-color-background); --page-color-info: #00bfcb; --page-color-success: #339343; diff --git a/src/templates/index.ts b/src/templates/index.ts index 1ee71223..02b26236 100644 --- a/src/templates/index.ts +++ b/src/templates/index.ts @@ -3,3 +3,4 @@ export * from "./base"; export * from "./detail"; export * from "./login"; export * from "./list"; +export * from "./kanban-template"; diff --git a/src/templates/kanban-template/index.ts b/src/templates/kanban-template/index.ts new file mode 100644 index 00000000..9ac55e38 --- /dev/null +++ b/src/templates/kanban-template/index.ts @@ -0,0 +1 @@ +export * from "./kanban-template"; diff --git a/src/templates/kanban/kanban.stories.tsx b/src/templates/kanban-template/kanban-template.stories.tsx similarity index 68% rename from src/templates/kanban/kanban.stories.tsx rename to src/templates/kanban-template/kanban-template.stories.tsx index 866287bf..6af86546 100644 --- a/src/templates/kanban/kanban.stories.tsx +++ b/src/templates/kanban-template/kanban-template.stories.tsx @@ -1,10 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react"; import * as React from "react"; -import { useEffect, useState } from "react"; import { Badge, Outline } from "../../components"; -import { AttributeData } from "../../lib"; -import { KanbanTemplate } from "./kanban"; +import { KanbanTemplate } from "./kanban-template"; const meta: Meta = { title: "Templates/Kanban", @@ -12,6 +10,31 @@ const meta: Meta = { argTypes: { onClick: { action: "onClick" } }, }; +const generateComponentList = (count: number) => { + const randomLorenIpsum = [ + "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + "Ut enim ad minim veniam, quis nostrud exercitation ullamco.", + "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + "Excepteur sint occaecat cupidatat non proident, sunt in.", + ]; + return Array.from({ length: count }, (_, i) => ( +
+ 20 days + {randomLorenIpsum[i % randomLorenIpsum.length]} + Some more data +
+ )); +}; + +// Define the component list +const componentList = [ + { title: "Todo", items: generateComponentList(10) }, + { title: "In Progress", items: generateComponentList(10) }, + { title: "In Review", items: generateComponentList(10) }, + { title: "Done", items: generateComponentList(10) }, +]; + export default meta; type Story = StoryObj; @@ -19,12 +42,7 @@ export const kanbanTemplate: Story = { args: { kanbanProps: { title: "The quick brown fox jumps over the lazy dog.", - fieldsets: [ - ["Todo", { fields: ["title"], title: "title" }], - ["In Progress", { fields: ["title"], title: "title" }], - ["In Review", { fields: ["title"], title: "title" }], - ["Done", { fields: ["title"], title: "title" }], - ], + componentList, }, breadcrumbItems: [ { label: "Home", href: "/" }, @@ -39,44 +57,14 @@ export const kanbanTemplate: Story = { ], }, render: (args) => { - const abortController = new AbortController(); - const [objectList, setObjectList] = useState([]); - // Process sorting and pagination locally in place for demonstration purposes. - - useEffect(() => { - fetch(`https://jsonplaceholder.typicode.com/photos?_limit=10`, { - signal: abortController.signal, - }) - .then((response) => response.json()) - .then((data: AttributeData[]) => { - setObjectList( - data.map((d) => ({ - ...d, - alphaIndex: String(d.title[0]).toUpperCase(), - })), - ); - }); - }, [args]); - - const even = objectList.filter((o, index) => index % 2 === 0); - const odd = objectList.filter((o, index) => index % 2 !== 0); - - return "groupBy" in args ? ( - console.log("foo"), - objectList: objectList, - }} - /> - ) : ( + return ( console.log("foo"), - objectLists: [even, odd, [], []], + onComponentListChange: (componentList) => { + console.log("Component list changed", componentList); + }, }} /> ); diff --git a/src/templates/kanban-template/kanban-template.tsx b/src/templates/kanban-template/kanban-template.tsx new file mode 100644 index 00000000..8c169c7d --- /dev/null +++ b/src/templates/kanban-template/kanban-template.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +import { Kanban as KanbanComponent, KanbanProps } from "../../components"; +import { CardBaseTemplate } from "../base"; +import { BodyBaseTemplateProps } from "../base/bodyBase"; + +export type KanbanTemplateProps = BodyBaseTemplateProps & { + kanbanProps: KanbanProps; +}; + +/** + * grid template + * @constructor + */ +export const KanbanTemplate: React.FC = ({ + children, + kanbanProps, + ...props +}) => { + return ( + + {children} + + + ); +}; diff --git a/src/templates/kanban/index.ts b/src/templates/kanban/index.ts deleted file mode 100644 index 698e2678..00000000 --- a/src/templates/kanban/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./kanban"; diff --git a/src/templates/kanban/kanban.tsx b/src/templates/kanban/kanban.tsx deleted file mode 100644 index 7f80bb81..00000000 --- a/src/templates/kanban/kanban.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from "react"; - -import { Kanban as KanbanComponent, KanbanProps } from "../../components"; -import { AttributeData, FieldSet } from "../../lib"; -import { CardBaseTemplate } from "../base"; -import { BodyBaseTemplateProps } from "../base/bodyBase"; - -export type KanbanTemplateProps = BodyBaseTemplateProps & { - kanbanProps: KanbanProps; -}; - -/** - * grid template - * @constructor - */ -export const KanbanTemplate: React.FC = ({ - children, - kanbanProps, - ...props -}) => { - const { objectList, objectLists, fieldset, fieldsets, groupBy, ...kbProps } = - kanbanProps; - - return ( - - {children} - {kanbanProps.groupBy ? ( - - {children} - - ) : ( - - {children} - - )} - - ); -}; From d19c7eca0646f434a286abedb168ad7676e41d0e Mon Sep 17 00:00:00 2001 From: Julian Roeland Date: Fri, 24 May 2024 13:51:51 +0200 Subject: [PATCH 2/6] :bug: #17 - fix: fixed storybook error --- src/components/data/kanban/kanban.stories.tsx | 81 +++++++------------ .../kanban-template.stories.tsx | 3 - 2 files changed, 27 insertions(+), 57 deletions(-) diff --git a/src/components/data/kanban/kanban.stories.tsx b/src/components/data/kanban/kanban.stories.tsx index 7d67f3b5..fc3733a2 100644 --- a/src/components/data/kanban/kanban.stories.tsx +++ b/src/components/data/kanban/kanban.stories.tsx @@ -1,8 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import * as React from "react"; -import { useEffect, useState } from "react"; -import { AttributeData } from "../../../lib"; import { Page } from "../../layout"; import { Kanban } from "./kanban"; @@ -21,62 +19,37 @@ const meta: Meta = { export default meta; type Story = StoryObj; +const generateComponentList = (count: number) => { + const randomLorenIpsum = [ + "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + "Ut enim ad minim veniam, quis nostrud exercitation ullamco.", + "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + "Excepteur sint occaecat cupidatat non proident, sunt in.", + ]; + return Array.from({ length: count }, (_, i) => ( +
+ 20 days + {randomLorenIpsum[i % randomLorenIpsum.length]} + Some more data +
+ )); +}; + +// Define the component list +const componentList = [ + { title: "Todo", items: generateComponentList(10) }, + { title: "In Progress", items: generateComponentList(10) }, + { title: "In Review", items: generateComponentList(10) }, + { title: "Done", items: generateComponentList(10) }, +]; + export const KanbanComponent: Story = { args: { title: "The quick brown fox jumps over the lazy dog.", - fieldsets: [ - ["Todo", { fields: ["title"], title: "title" }], - ["In Progress", { fields: ["title"], title: "title" }], - ["In Review", { fields: ["title"], title: "title" }], - ["Done", { fields: ["title"], title: "title" }], - ], + componentList, }, render: (args) => { - const abortController = new AbortController(); - const [objectList, setObjectList] = useState([]); - // Process sorting and pagination locally in place for demonstration purposes. - - useEffect(() => { - const limit = 11; - fetch(`https://jsonplaceholder.typicode.com/photos?_limit=${limit}`, { - signal: abortController.signal, - }) - .then((response) => response.json()) - .then((data: AttributeData[]) => { - setObjectList( - data.map((d) => ({ - ...d, - alphaIndex: String(d.title[0]).toUpperCase(), - })), - ); - }); - }, [args]); - - const even = objectList.filter((o, index) => index % 2 === 0); - const odd = objectList.filter((o, index) => index % 2 !== 0); - - return "groupBy" in args ? ( - - ) : ( - - ); - }, -}; - -export const WithCustomPreview = { - ...KanbanComponent, - args: { - ...KanbanComponent.args, - renderPreview: (attributeData) => ( - {attributeData.title} - ), - }, -}; - -export const GroupBy = { - ...KanbanComponent, - args: { - fieldset: [`{group}`, { fields: ["title"], title: "title" }], - groupBy: "alphaIndex", + return ; }, }; diff --git a/src/templates/kanban-template/kanban-template.stories.tsx b/src/templates/kanban-template/kanban-template.stories.tsx index 6af86546..30d97b52 100644 --- a/src/templates/kanban-template/kanban-template.stories.tsx +++ b/src/templates/kanban-template/kanban-template.stories.tsx @@ -160,9 +160,6 @@ export const WithCustomPreview: Story = { ...WithSecondaryNavigation.args, kanbanProps: { ...WithSecondaryNavigation.args.kanbanProps, - renderPreview: (attributeData) => ( - {attributeData.title} - ), }, }, }; From 0a0c7f75417d711fb543da726cb75c7fd4c2ebcd Mon Sep 17 00:00:00 2001 From: Julian Roeland Date: Tue, 28 May 2024 14:25:40 +0200 Subject: [PATCH 3/6] :sparkles: #17 - fix: pr review --- src/components/data/kanban/kanban.stories.tsx | 30 +++++++++++++------ src/components/data/kanban/kanban.tsx | 15 ++++------ .../kanban-template.stories.tsx | 21 ++----------- .../kanban-template/kanban-template.tsx | 3 +- 4 files changed, 31 insertions(+), 38 deletions(-) diff --git a/src/components/data/kanban/kanban.stories.tsx b/src/components/data/kanban/kanban.stories.tsx index fc3733a2..b875c4eb 100644 --- a/src/components/data/kanban/kanban.stories.tsx +++ b/src/components/data/kanban/kanban.stories.tsx @@ -19,19 +19,31 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const generateComponentList = (count: number) => { +export const generateComponentList = (count: number) => { const randomLorenIpsum = [ - "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", - "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", - "Ut enim ad minim veniam, quis nostrud exercitation ullamco.", - "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", - "Excepteur sint occaecat cupidatat non proident, sunt in.", + "This is a card", + "The card has the purpose to show some data", + "The data can either be super duper long, or also very short and concise", + "This is just the title", ]; + + const randomDays = ["20 days", "30 days", "40 days", "50 days", "60 days"]; + + const randomData = [ + "Some random test", + "Some more test data to differentiate", + "And slightly more so that we can see the difference", + ]; + + const getRandomInt = (max: number) => { + return Math.floor(Math.random() * max); + }; + return Array.from({ length: count }, (_, i) => (
- 20 days - {randomLorenIpsum[i % randomLorenIpsum.length]} - Some more data + {randomDays[getRandomInt(randomDays.length)]} + {randomLorenIpsum[getRandomInt(randomLorenIpsum.length)]} + {randomData[getRandomInt(randomData.length)]}
)); }; diff --git a/src/components/data/kanban/kanban.tsx b/src/components/data/kanban/kanban.tsx index 928a2c7f..452452f8 100644 --- a/src/components/data/kanban/kanban.tsx +++ b/src/components/data/kanban/kanban.tsx @@ -9,10 +9,10 @@ import "./kanban.scss"; export type KanbanProps = { /** If set, items are `draggable` allowing the user to rearrange them (across columns). */ draggable?: boolean; - /** The kanban-template "change column" (accessible) label */ + /** The kanban "change column" (accessible) label. It will be shown as an accessible label when selecting columns */ labelSelectColumn?: string; - /** The kanban-template "move object position" (accessible) label. */ + /** The kanban "move object position" (accessible) label. It will be shown as an accessible label on dragging */ labelMoveObject?: string; /** Get called when the componentList changes. */ @@ -129,12 +129,10 @@ export const Kanban: React.FC = ({ const count = column.items.length; return (
- -

- {column.title} -
{count}
-

- +

+ {column.title} +
{count}
+

= ({
); }; - export type KanbanSectionProps = { columnIndex: number; items: React.ReactNode[]; diff --git a/src/templates/kanban-template/kanban-template.stories.tsx b/src/templates/kanban-template/kanban-template.stories.tsx index 30d97b52..9e41d33e 100644 --- a/src/templates/kanban-template/kanban-template.stories.tsx +++ b/src/templates/kanban-template/kanban-template.stories.tsx @@ -1,7 +1,9 @@ +import { action } from "@storybook/addon-actions"; import type { Meta, StoryObj } from "@storybook/react"; import * as React from "react"; import { Badge, Outline } from "../../components"; +import { generateComponentList } from "../../components/data/kanban/kanban.stories"; import { KanbanTemplate } from "./kanban-template"; const meta: Meta = { @@ -10,23 +12,6 @@ const meta: Meta = { argTypes: { onClick: { action: "onClick" } }, }; -const generateComponentList = (count: number) => { - const randomLorenIpsum = [ - "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", - "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", - "Ut enim ad minim veniam, quis nostrud exercitation ullamco.", - "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", - "Excepteur sint occaecat cupidatat non proident, sunt in.", - ]; - return Array.from({ length: count }, (_, i) => ( -
- 20 days - {randomLorenIpsum[i % randomLorenIpsum.length]} - Some more data -
- )); -}; - // Define the component list const componentList = [ { title: "Todo", items: generateComponentList(10) }, @@ -63,7 +48,7 @@ export const kanbanTemplate: Story = { kanbanProps={{ ...args.kanbanProps, onComponentListChange: (componentList) => { - console.log("Component list changed", componentList); + action("onComponentListChange")(componentList); }, }} /> diff --git a/src/templates/kanban-template/kanban-template.tsx b/src/templates/kanban-template/kanban-template.tsx index 8c169c7d..e7706e28 100644 --- a/src/templates/kanban-template/kanban-template.tsx +++ b/src/templates/kanban-template/kanban-template.tsx @@ -9,8 +9,7 @@ export type KanbanTemplateProps = BodyBaseTemplateProps & { }; /** - * grid template - * @constructor + * Kanban template */ export const KanbanTemplate: React.FC = ({ children, From 2d9131ff57f5aa3d6eb37ac1bc2ed0775f32aa30 Mon Sep 17 00:00:00 2001 From: Julian Roeland Date: Thu, 30 May 2024 11:44:28 +0200 Subject: [PATCH 4/6] :sparkles: #17 - fix: pr review --- src/components/data/kanban/kanban.tsx | 17 +++++++++++++++++ .../kanban-template/kanban-template.stories.tsx | 15 +++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/src/components/data/kanban/kanban.tsx b/src/components/data/kanban/kanban.tsx index 452452f8..4bf714ba 100644 --- a/src/components/data/kanban/kanban.tsx +++ b/src/components/data/kanban/kanban.tsx @@ -18,6 +18,15 @@ export type KanbanProps = { /** Get called when the componentList changes. */ onComponentListChange?: (componentList: KanbanColumn[]) => void; + /** Get called when a component changes columns. */ + onComponentChange?: ( + movedComponent: React.ReactNode, + sourceColumnIndex: number, + sourceObjectIndex: number, + targetColumnIndex: number, + targetObjectIndex: number, + ) => void; + /** The new componentList prop defining columns and their items */ componentList: KanbanColumn[]; @@ -42,6 +51,7 @@ export const Kanban: React.FC = ({ labelMoveObject, onComponentListChange, title, + onComponentChange, ...props }) => { const [dragIndexState, setDragIndexState] = useState<[number, number] | null>( @@ -106,6 +116,13 @@ export const Kanban: React.FC = ({ setComponentListState(newComponentListState); onComponentListChange?.(newComponentListState); + onComponentChange?.( + object, + sourceColumnIndex, + sourceObjectIndex, + targetColumnIndex, + _targetObjectIndex, + ); }; const getInsertIndex = (children: Element[], y: number): number => { diff --git a/src/templates/kanban-template/kanban-template.stories.tsx b/src/templates/kanban-template/kanban-template.stories.tsx index 9e41d33e..4221e191 100644 --- a/src/templates/kanban-template/kanban-template.stories.tsx +++ b/src/templates/kanban-template/kanban-template.stories.tsx @@ -50,6 +50,21 @@ export const kanbanTemplate: Story = { onComponentListChange: (componentList) => { action("onComponentListChange")(componentList); }, + onComponentChange: ( + movedComponentData, + sourceColumnIndex, + sourceObjectIndex, + targetColumnIndex, + targetObjectIndex, + ) => { + action("onComponentChange")({ + movedComponentData, + sourceColumnIndex, + sourceObjectIndex, + targetColumnIndex, + targetObjectIndex, + }); + }, }} /> ); From 88e1667072b3f10fa89e58c3a67aeaad8e7de9c4 Mon Sep 17 00:00:00 2001 From: Julian Roeland Date: Thu, 30 May 2024 11:47:45 +0200 Subject: [PATCH 5/6] :sparkles: #17 - fix: pr review --- .../kanban-template.stories.tsx | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/src/templates/kanban-template/kanban-template.stories.tsx b/src/templates/kanban-template/kanban-template.stories.tsx index 4221e191..920d473d 100644 --- a/src/templates/kanban-template/kanban-template.stories.tsx +++ b/src/templates/kanban-template/kanban-template.stories.tsx @@ -47,24 +47,8 @@ export const kanbanTemplate: Story = { {...args} kanbanProps={{ ...args.kanbanProps, - onComponentListChange: (componentList) => { - action("onComponentListChange")(componentList); - }, - onComponentChange: ( - movedComponentData, - sourceColumnIndex, - sourceObjectIndex, - targetColumnIndex, - targetObjectIndex, - ) => { - action("onComponentChange")({ - movedComponentData, - sourceColumnIndex, - sourceObjectIndex, - targetColumnIndex, - targetObjectIndex, - }); - }, + onComponentListChange: action("onComponentListChange"), + onComponentChange: action("onComponentChange"), }} /> ); From e2e70378c82bcbc52e7ac29201ea89a9195e424b Mon Sep 17 00:00:00 2001 From: Julian Roeland Date: Thu, 30 May 2024 13:06:52 +0200 Subject: [PATCH 6/6] :sparkles: #17 - fix: pr review --- src/components/data/kanban/kanban.stories.tsx | 25 +++++++++++-------- src/components/data/kanban/kanban.tsx | 24 +++++++++++------- .../kanban-template.stories.tsx | 8 +++--- 3 files changed, 33 insertions(+), 24 deletions(-) diff --git a/src/components/data/kanban/kanban.stories.tsx b/src/components/data/kanban/kanban.stories.tsx index b875c4eb..1b1608e9 100644 --- a/src/components/data/kanban/kanban.stories.tsx +++ b/src/components/data/kanban/kanban.stories.tsx @@ -39,21 +39,24 @@ export const generateComponentList = (count: number) => { return Math.floor(Math.random() * max); }; - return Array.from({ length: count }, (_, i) => ( -
- {randomDays[getRandomInt(randomDays.length)]} - {randomLorenIpsum[getRandomInt(randomLorenIpsum.length)]} - {randomData[getRandomInt(randomData.length)]} -
- )); + return Array.from({ length: count }, (_, i) => ({ + id: i.toString(), + content: ( +
+ {randomDays[getRandomInt(randomDays.length)]} + {randomLorenIpsum[getRandomInt(randomLorenIpsum.length)]} + {randomData[getRandomInt(randomData.length)]} +
+ ), + })); }; // Define the component list const componentList = [ - { title: "Todo", items: generateComponentList(10) }, - { title: "In Progress", items: generateComponentList(10) }, - { title: "In Review", items: generateComponentList(10) }, - { title: "Done", items: generateComponentList(10) }, + { title: "Todo", id: "1", items: generateComponentList(10) }, + { title: "In Progress", id: "2", items: generateComponentList(10) }, + { title: "In Review", id: "3", items: generateComponentList(10) }, + { title: "Done", id: "4", items: generateComponentList(10) }, ]; export const KanbanComponent: Story = { diff --git a/src/components/data/kanban/kanban.tsx b/src/components/data/kanban/kanban.tsx index 4bf714ba..12127765 100644 --- a/src/components/data/kanban/kanban.tsx +++ b/src/components/data/kanban/kanban.tsx @@ -20,7 +20,7 @@ export type KanbanProps = { /** Get called when a component changes columns. */ onComponentChange?: ( - movedComponent: React.ReactNode, + movedComponent: KanbanColumnItem, sourceColumnIndex: number, sourceObjectIndex: number, targetColumnIndex: number, @@ -36,7 +36,13 @@ export type KanbanProps = { export type KanbanColumn = { title: string; - items: React.ReactNode[]; + id: string; + items: KanbanColumnItem[]; +}; + +export type KanbanColumnItem = { + id: string; + content: React.ReactNode; }; export type KanbanDragData = { @@ -99,7 +105,7 @@ export const Kanban: React.FC = ({ }; const moveObject = ( - object: React.ReactNode, + object: KanbanColumnItem, sourceColumnIndex: number, targetColumnIndex: number, sourceObjectIndex: number, @@ -145,7 +151,7 @@ export const Kanban: React.FC = ({ {componentListState.map((column, columnIndex) => { const count = column.items.length; return ( -
+

{column.title}
{count}
@@ -172,7 +178,7 @@ export const Kanban: React.FC = ({ }; export type KanbanSectionProps = { columnIndex: number; - items: React.ReactNode[]; + items: KanbanColumnItem[]; draggable?: boolean; dragIndex: [number, number] | null; labelSelectColumn?: string; @@ -180,7 +186,7 @@ export type KanbanSectionProps = { onDragOver: React.DragEventHandler; onDrop: React.DragEventHandler; moveObject: ( - object: React.ReactNode, + object: KanbanColumnItem, sourceColumnIndex: number, targetColumnIndex: number, sourceObjectIndex: number, @@ -235,11 +241,11 @@ export const KanbanSection: React.FC = ({ export type KanbanItemProps = { buttonProps?: ButtonProps; draggable?: boolean; - item: React.ReactNode; + item: KanbanColumnItem; columnIndex: number; objectIndex: number; moveObject: ( - object: React.ReactNode, + object: KanbanColumnItem, sourceColumnIndex: number, targetColumnIndex: number, sourceObjectIndex: number, @@ -316,7 +322,7 @@ export const KanbanItem: React.FC = ({ {...buttonProps} onDragStart={(e) => onDragStart(e, columnIndex, objectIndex)} > -
{item}
+
{item.content}
{draggable && ( <>