♻️ - refactor: refactor Kanban api

maykinmedia · Jun 4, 2024 · f60e705 · f60e705
1 parent 1284071
commit f60e705
Show file tree

Hide file tree

Showing 12 changed files with 626 additions and 293 deletions.
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
@@ -3,14 +3,15 @@
   border: 1px solid;
   color: var(--mykn-badge-color);
   align-items: center;
-  border-radius: var(--border-radius-s);
+  border-radius: 10px;
   display: inline-flex;
   font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-xs);
   font-weight: var(--typography-font-weight-bold);
   height: var(--typography-line-height-body-s);
   justify-content: center;
   line-height: var(--typography-line-height-body-xs);
+  overflow: hidden;
   padding: 0 var(--spacing-h);
   position: relative;
   transform-style: preserve-3d;

diff --git a/src/components/data/kanban/kanban.scss b/src/components/data/kanban/kanban.scss
@@ -12,29 +12,16 @@
     height: 100%;
   }
 
-  &__count {
-    margin-left: var(--spacing-h);
-    border-radius: 10px;
-    border: 1px solid var(--typography-color-border);
-    background-color: #fafafa;
-    padding: 0 6px;
-    color: var(--typography-color-muted);
-  }
-
   &__body .mykn-column {
-    border: 1px solid var(--typography-color-border);
-    border-radius: var(--border-radius-l);
-    background-color: var(--page-color-background-alt);
+    box-sizing: border-box;
     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) * 3);
+    height: calc(var(--typography-line-height-body-s) * 2);
     padding-block: var(--spacing-v);
   }
 
@@ -43,27 +30,54 @@
     border-style: dashed;
   }
 
-  &__body .mykn-column > .mykn-button {
+  &__body .mykn-column > .mykn-body > .mykn-h3 {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  &__body .mykn-column .mykn-badge {
+    margin-inline-start: var(--spacing-h);
+  }
+
+  &__track {
     border: 1px solid var(--typography-color-border);
-    border-radius: var(--border-radius-l);
+    display: flex;
+    flex-direction: column;
+    gap: calc(2 * var(--spacing-v));
+    padding: calc(2 * var(--spacing-v)) calc(2 * var(--spacing-h)) !important;
+    position: relative;
+  }
+
+  &__track:before {
+    background-color: var(--typography-color-border);
+    content: "";
+    height: 100%;
+    inset-block-start: 0;
+    inset-inline-start: calc(-2 * var(--spacing-h));
+    opacity: 0.1;
+    position: absolute;
+    width: calc(100% + 2 * var(--spacing-h));
+  }
+
+  &__body &__button {
     white-space: normal;
-    background-color: var(--typography-color-background);
-    padding: 16px;
 
     &:focus-within {
       z-index: 100;
     }
   }
 
-  &__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 &__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 > .mykn-select {
+  &__select {
     inset-block-end: var(--spacing-v);
     inset-inline-end: var(--spacing-h);
     position: absolute;
@@ -81,8 +95,4 @@
       visibility: visible;
     }
   }
-
-  &__item {
-    width: 100%;
-  }
 }
diff --git a/src/components/data/kanban/kanban.stories.tsx b/src/components/data/kanban/kanban.stories.tsx
@@ -1,6 +1,8 @@
 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";
 
@@ -19,52 +21,62 @@ const meta: Meta<typeof Kanban> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-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",
-  ];
+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.
 
-  const randomDays = ["20 days", "30 days", "40 days", "50 days", "60 days"];
+    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 randomData = [
-    "Some random test",
-    "Some more test data to differentiate",
-    "And slightly more so that we can see the difference",
-  ];
+    const even = objectList.filter((o, index) => index % 2 === 0);
+    const odd = objectList.filter((o, index) => index % 2 !== 0);
 
-  const getRandomInt = (max: number) => {
-    return Math.floor(Math.random() * max);
-  };
+    return "groupBy" in args ? (
+      <Kanban objectList={objectList} {...args} />
+    ) : (
+      <Kanban objectLists={[even, odd, [], []]} {...args} />
+    );
+  },
+};
 
-  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 WithCustomPreview = {
+  ...KanbanComponent,
+  args: {
+    ...KanbanComponent.args,
+    renderPreview: (attributeData) => (
+      <img alt={attributeData.title} src={attributeData.thumbnailUrl} />
     ),
-  }));
+  },
 };
 
-// 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 = {
+export const GroupBy = {
+  ...KanbanComponent,
   args: {
-    title: "The quick brown fox jumps over the lazy dog.",
-    componentList,
-  },
-  render: (args) => {
-    return <Kanban {...args} />;
+    fieldset: [`{group}`, { fields: ["title"], title: "title" }],
+    groupBy: "alphaIndex",
   },
 };