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.stories.tsx b/src/components/data/kanban/kanban.stories.tsx index 7d67f3b5..1b1608e9 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,52 @@ const meta: Meta = { export default meta; type Story = StoryObj; -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" }], - ], - }, - render: (args) => { - const abortController = new AbortController(); - const [objectList, setObjectList] = useState([]); - // Process sorting and pagination locally in place for demonstration purposes. +export const generateComponentList = (count: number) => { + const randomLorenIpsum = [ + "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", + ]; - 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 randomDays = ["20 days", "30 days", "40 days", "50 days", "60 days"]; - const even = objectList.filter((o, index) => index % 2 === 0); - const odd = objectList.filter((o, index) => index % 2 !== 0); + const randomData = [ + "Some random test", + "Some more test data to differentiate", + "And slightly more so that we can see the difference", + ]; - return "groupBy" in args ? ( - - ) : ( - - ); - }, -}; + const getRandomInt = (max: number) => { + return Math.floor(Math.random() * max); + }; -export const WithCustomPreview = { - ...KanbanComponent, - args: { - ...KanbanComponent.args, - renderPreview: (attributeData) => ( - {attributeData.title} + return Array.from({ length: count }, (_, i) => ({ + id: i.toString(), + content: ( +
+ {randomDays[getRandomInt(randomDays.length)]} + {randomLorenIpsum[getRandomInt(randomLorenIpsum.length)]} + {randomData[getRandomInt(randomData.length)]} +
), - }, + })); }; -export const GroupBy = { - ...KanbanComponent, +// Define the component list +const componentList = [ + { 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 = { args: { - fieldset: [`{group}`, { fields: ["title"], title: "title" }], - groupBy: "alphaIndex", + title: "The quick brown fox jumps over the lazy dog.", + componentList, + }, + render: (args) => { + return ; }, }; diff --git a/src/components/data/kanban/kanban.tsx b/src/components/data/kanban/kanban.tsx index 5fe5ddd4..12127765 100644 --- a/src/components/data/kanban/kanban.tsx +++ b/src/components/data/kanban/kanban.tsx @@ -1,127 +1,88 @@ 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 "change column" (accessible) label. It will be shown as an accessible label when selecting columns */ labelSelectColumn?: string; - /** The kanban "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 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; - - /** Get called when an object is dropped onto a column. */ - onObjectChange?: ( - object: AttributeData, + /** Get called when a component changes columns. */ + onComponentChange?: ( + movedComponent: KanbanColumnItem, sourceColumnIndex: number, - targetColumnIndex: number, sourceObjectIndex: number, + targetColumnIndex: number, targetObjectIndex: number, ) => void; + + /** The new componentList prop defining columns and their items */ + componentList: KanbanColumn[]; + + /** The title of the kanban */ + title?: string; +}; + +export type KanbanColumn = { + title: string; + id: string; + items: KanbanColumnItem[]; +}; + +export type KanbanColumnItem = { + id: string; + content: 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, + onComponentChange, ...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 +92,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 +104,36 @@ 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: KanbanColumnItem, 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?.( + setComponentListState(newComponentListState); + onComponentListChange?.(newComponentListState); + onComponentChange?.( object, sourceColumnIndex, - targetColumnIndex, sourceObjectIndex, + targetColumnIndex, _targetObjectIndex, ); - onObjectListsChange?.(newObjectListsState); }; - /** - * 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 +147,204 @@ 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: KanbanColumnItem[]; 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: KanbanColumnItem, 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: KanbanColumnItem; + 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: KanbanColumnItem, 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 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 [selectedColumn, setSelectedColumn] = useState(columnIndex); + const [selectedPosition, setSelectedPosition] = useState(objectIndex); - 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.content}
{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 66% rename from src/templates/kanban/kanban.stories.tsx rename to src/templates/kanban-template/kanban-template.stories.tsx index 866287bf..95af8bc9 100644 --- a/src/templates/kanban/kanban.stories.tsx +++ b/src/templates/kanban-template/kanban-template.stories.tsx @@ -1,10 +1,10 @@ +import { action } from "@storybook/addon-actions"; 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 { generateComponentList } from "../../components/data/kanban/kanban.stories"; +import { KanbanTemplate } from "./kanban-template"; const meta: Meta = { title: "Templates/Kanban", @@ -12,6 +12,14 @@ const meta: Meta = { argTypes: { onClick: { action: "onClick" } }, }; +// Define the component list +const componentList = [ + { 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 default meta; type Story = StoryObj; @@ -19,12 +27,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 +42,13 @@ 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: action("onComponentListChange"), + onComponentChange: action("onComponentChange"), }} /> ); @@ -172,9 +144,6 @@ export const WithCustomPreview: Story = { ...WithSecondaryNavigation.args, kanbanProps: { ...WithSecondaryNavigation.args.kanbanProps, - renderPreview: (attributeData) => ( - {attributeData.title} - ), }, }, }; diff --git a/src/templates/kanban-template/kanban-template.tsx b/src/templates/kanban-template/kanban-template.tsx new file mode 100644 index 00000000..e7706e28 --- /dev/null +++ b/src/templates/kanban-template/kanban-template.tsx @@ -0,0 +1,25 @@ +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; +}; + +/** + * Kanban template + */ +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} - - )} - - ); -};