Issues/2024 10 15

src/components/form/.storybook/decorators.tsx → .storybook/decorators.tsx

@@ -2,10 +2,7 @@ import { Decorator } from "@storybook/react";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 
-
-
-import { serializeForm } from "../../../lib";
-
+import { Column, Grid, Page, serializeForm } from "../src";
 
 export const FORM_TEST_DECORATOR: Decorator = (Story) => {
   // Solely here to force re-rendering story on change.
@@ -30,3 +27,11 @@ export const FORM_TEST_DECORATOR: Decorator = (Story) => {
     </form>
   );
 };
+
+export const PAGE_DECORATOR: Decorator = (Story) => (
+  <Page>
+    <Grid>
+      <Column span={12}>{Story()}</Column>
+    </Grid>
+  </Page>
+);

src/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -1,19 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import * as React from "react";
 
-import { Page } from "../layout";
+import { PAGE_DECORATOR } from "../../../.storybook/decorators";
 import { Breadcrumbs } from "./breadcrumbs";
 
 const meta: Meta<typeof Breadcrumbs> = {
   title: "Controls/Breadcrumbs",
   component: Breadcrumbs,
-  decorators: [
-    (Story) => (
-      <Page pad={true}>
-        <Story />
-      </Page>
-    ),
-  ],
+  decorators: [PAGE_DECORATOR],
 };
 
 export default meta;

src/components/card/card.stories.tsx

@@ -1,20 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import * as React from "react";
 
-import { Page } from "../layout";
+import { PAGE_DECORATOR } from "../../../.storybook/decorators";
 import { Body, P } from "../typography";
 import { Card } from "./card";
 
 const meta: Meta<typeof Card> = {
   title: "Building Blocks/Card",
   component: Card,
-  decorators: [
-    (Story) => (
-      <Page pad={true}>
-        <Story />
-      </Page>
-    ),
-  ],
+  decorators: [PAGE_DECORATOR],
   parameters: {
     layout: "fullscreen",
   },

src/components/data/attributetable/attributetable.scss

@@ -24,8 +24,11 @@
   &__cell--key {
     font-weight: var(--typography-font-weight-bold);
   }
+  &__cell--key > .mykn-icon:last-child {
+    margin-inline-start: var(--spacing-h);
+  }
 
-  &__cell .mykn-icon {
+  &__cell > .mykn-icon {
     margin-inline-end: var(--spacing-h);
   }
 }

src/components/data/attributetable/attributetable.stories.tsx

@@ -62,9 +62,9 @@ export const LabeledAttributeTableComponentWithNodes: Story = {
       },
       labelWithIcon: {
         label: (
-          <div>
+          <>
             A label with icon <Outline.AcademicCapIcon />
-          </div>
+          </>
         ),
         value: "Some value",
       },

src/components/data/datagrid/datagrid.scss

@@ -49,7 +49,7 @@
     background-color: var(--typography-color-background);
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 20;
   }
 
   &__toolbar ~ &__scrollpane:not(&__scrollpane--overflow-y) &__thead {

src/components/data/datagrid/datagrid.stories.tsx

@@ -1,21 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import * as React from "react";
 
+import { PAGE_DECORATOR } from "../../../../.storybook/decorators";
 import { FIXTURE_PRODUCTS } from "../../../../.storybook/fixtures/products";
 import { Button } from "../../button";
-import { Page } from "../../layout";
 import { DataGrid } from "./datagrid";
 
 const meta: Meta<typeof DataGrid> = {
   title: "Data/DataGrid",
   component: DataGrid,
-  decorators: [
-    (Story) => (
-      <Page pad={false}>
-        <Story />
-      </Page>
-    ),
-  ],
+  decorators: [PAGE_DECORATOR],
   parameters: {
     actions: [], // Prevent auto mocked callback functions.
   },

src/components/data/itemgrid/itemgrid.stories.tsx

@@ -1,92 +1,56 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import * as React from "react";
-import { useEffect, useState } from "react";
 
-import { generateHexColor } from "../../../../.storybook/utils";
-import { AttributeData, FieldSet } from "../../../lib";
-import { Page } from "../../layout";
+import { PAGE_DECORATOR } from "../../../../.storybook/decorators";
+import {
+  FIXTURE_TODOS,
+  FIXTURE_TODOS_STATUS_DONE,
+  FIXTURE_TODOS_STATUS_IN_PROGRESS,
+  FIXTURE_TODOS_STATUS_IN_REVIEW,
+  FIXTURE_TODOS_STATUS_TODO,
+} from "../../../../.storybook/fixtures/todos";
+import { AttributeData } from "../../../lib";
 import { ItemGrid, ItemGridProps } from "./itemgrid";
 
 const meta: Meta<typeof ItemGrid> = {
   title: "Data/Itemgrid",
   component: ItemGrid,
-  decorators: [
-    (Story) => (
-      <Page>
-        <Story />
-      </Page>
-    ),
-  ],
+  decorators: [PAGE_DECORATOR],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const ItemGridComponent: Story = {
-  // @ts-expect-error - Fix never
+  // @ts-expect-error - never
   args: {
     title: "The quick brown fox jumps over the lazy dog.",
     fieldsets: [
-      ["Even", { fields: ["title"], title: "title" }],
-      ["Odd", { fields: ["title"], title: "title" }],
+      ["Todo", { fields: ["title"], title: "title" }],
+      ["In Progress", { fields: ["title"], title: "title" }],
+      ["In Review", { fields: ["title"], title: "title" }],
+      ["Done", { fields: ["title"], title: "title" }],
+    ],
+    objectLists: [
+      FIXTURE_TODOS_STATUS_TODO,
+      FIXTURE_TODOS_STATUS_IN_PROGRESS,
+      FIXTURE_TODOS_STATUS_IN_REVIEW,
+      FIXTURE_TODOS_STATUS_DONE,
     ],
-  },
-  render: (args: ItemGridProps) => {
-    const abortController = new AbortController();
-    const [objectList, setObjectList] = useState<AttributeData[]>([]);
-    // Process sorting and pagination locally in place for demonstration purposes.
-
-    useEffect(() => {
-      const limit = "groupBy" in args ? 200 : 11;
-      fetch(`https://jsonplaceholder.typicode.com/photos?_limit=${limit}`, {
-        signal: abortController.signal,
-      })
-        .then((response) => response.json())
-        .then((data: AttributeData[]) => {
-          setObjectList(
-            data.map((d) => {
-              const url = `https://placehold.co/600x400/${generateHexColor(d.id as number)}/000`;
-              return {
-                ...d,
-                alphaIndex: String(d.title?.toString()[0]).toUpperCase(),
-                url: url,
-                thumbnailUrl: url,
-              };
-            }),
-          );
-        });
-    }, [args]);
-
-    const even = objectList.filter((o, index) => index % 2 === 0);
-    const odd = objectList.filter((o, index) => index % 2 !== 0);
-
-    return "groupBy" in args ? (
-      <ItemGrid
-        {...args}
-        objectList={objectList}
-        objectLists={undefined}
-        fieldset={args.fieldset as FieldSet}
-        fieldsets={undefined}
-        groupBy={args.groupBy as string}
-      />
-    ) : (
-      <ItemGrid {...args} objectLists={[even, odd]} />
-    );
   },
 };
 
-export const WithCustomPreview: Story = {
+export const CustomPreview: Story = {
   ...ItemGridComponent,
   // @ts-expect-error - Fix never
   args: {
     ...(ItemGridComponent.args as ItemGridProps),
     renderPreview: (attributeData: AttributeData<string>) => (
       <img
         alt={attributeData.title}
-        src={attributeData.thumbnailUrl}
-        width="100%"
-        height="100%"
-        style={{ objectFit: "cover" }}
+        src="/static/maykin_logo.png"
+        height="24"
+        style={{ objectFit: "contain" }}
       />
     ),
   },
@@ -96,7 +60,10 @@ export const GroupBy: Story = {
   ...ItemGridComponent,
   // @ts-expect-error - Fix never
   args: {
+    ...(ItemGridComponent.args as ItemGridProps),
+    title: "The quick brown fox jumps over the lazy dog.",
     fieldset: [`{group}`, { fields: ["title"], title: "title" }],
-    groupBy: "alphaIndex",
+    objectList: FIXTURE_TODOS,
+    groupBy: "status",
   },
 };

src/components/data/itemgrid/itemgrid.tsx

@@ -93,7 +93,7 @@ export const ItemGridSection: React.FC<ItemGridSectionProps> = ({
       <Grid>
         {fieldset[0] && (
           <Column span={12}>
-            <H3>{fieldset[0]}</H3>
+            <H3>{field2Title(fieldset[0])}</H3>
           </Column>
         )}
         {objectList.map((o, index) => (

src/components/data/kanban/kanban.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import * as React from "react";
 
+import { PAGE_DECORATOR } from "../../../../.storybook/decorators";
 import {
   FIXTURE_TODOS,
   FIXTURE_TODOS_STATUS_DONE,
@@ -9,19 +10,12 @@ import {
   FIXTURE_TODOS_STATUS_TODO,
 } from "../../../../.storybook/fixtures/todos";
 import { AttributeData } from "../../../lib";
-import { Page } from "../../layout";
 import { Kanban, KanbanProps } from "./kanban";
 
 const meta: Meta<typeof Kanban> = {
   title: "Data/Kanban",
   component: Kanban,
-  decorators: [
-    (Story) => (
-      <Page>
-        <Story />
-      </Page>
-    ),
-  ],
+  decorators: [PAGE_DECORATOR],
 };
 
 export default meta;

src/components/data/paginator/paginator.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
-import * as React from "react";
 
+import { PAGE_DECORATOR } from "../../../../.storybook/decorators";
 import { allModes } from "../../../../.storybook/modes";
-import { Page } from "../../layout";
 import { Paginator } from "./paginator";
 
 const meta: Meta<typeof Paginator> = {
@@ -13,13 +12,7 @@ const meta: Meta<typeof Paginator> = {
     onPageChange: { action: "onPageChange" },
     onPageSizeChange: { action: "onPageSizeChange" },
   },
-  decorators: [
-    (Story) => (
-      <Page>
-        <Story />
-      </Page>
-    ),
-  ],
+  decorators: [PAGE_DECORATOR],
 };
 
 export default meta;