✨ #17 - feat: improved kanban

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%;
+  }
 }

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<typeof Kanban> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-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<AttributeData[]>([]);
-    // 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 ? (
-      <Kanban objectList={objectList} {...args} />
-    ) : (
-      <Kanban objectLists={[even, odd, [], []]} {...args} />
-    );
-  },
-};
+  const getRandomInt = (max: number) => {
+    return Math.floor(Math.random() * max);
+  };
 
-export const WithCustomPreview = {
-  ...KanbanComponent,
-  args: {
-    ...KanbanComponent.args,
-    renderPreview: (attributeData) => (
-      <img alt={attributeData.title} src={attributeData.thumbnailUrl} />
+  return Array.from({ length: count }, (_, i) => ({
+    id: i.toString(),
+    content: (
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <span>{randomDays[getRandomInt(randomDays.length)]}</span>
+        <span>{randomLorenIpsum[getRandomInt(randomLorenIpsum.length)]}</span>
+        <span>{randomData[getRandomInt(randomData.length)]}</span>
+      </div>
     ),
-  },
+  }));
 };
 
-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 <Kanban {...args} />;
   },
 };