blixify-ui-web-mcp 0.1.2 → 0.1.18

package/lib/components/display/flexTable/flexTable.stories.tsx

@@ -1,19 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { FlexTable, FlexTableItem } from ".";
 import { StorySection } from "../../storyUtils";
 import { Button } from "../../action/button";
 import { DataStructure, FlexMathQuery } from "../../data/dataTemplate/model";
 import { Form } from "../../input/form";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
-
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
+const meta = { title: "Display/FlexTable" };
+export default meta;
 
 const researchCategories = [
   {
@@ -136,6 +129,57 @@ const columnsWithMath: DataStructure[] = [
   },
 ];
 
+// INFO: columns for image and time picker demo
+const mediaColumns: DataStructure[] = [
+  { id: "photo", name: "Photo", type: "image" },
+  { id: "photos", name: "Photos", type: "multipleImage" },
+  { id: "startTime", name: "Start Time", type: "date", hideShowDate: true },
+  { id: "endTime", name: "End Time", type: "date", hideShowDate: true },
+];
+
+const sampleMediaData: FlexTableItem[] = [
+  {
+    id: "m1",
+    title: "Session A",
+    category: null,
+    photo: {
+      data: [
+        {
+          token: "photo-m1-a",
+          fileName: "https://placehold.co/56x56/3B82F6/FFFFFF.jpg",
+        },
+      ],
+      upload: [],
+      remove: [],
+    },
+    photos: {
+      data: [
+        {
+          token: "photos-m1-1",
+          fileName: "https://placehold.co/56x56/10B981/FFFFFF.jpg",
+        },
+        {
+          token: "photos-m1-2",
+          fileName: "https://placehold.co/56x56/F59E0B/FFFFFF.jpg",
+        },
+      ],
+      upload: [],
+      remove: [],
+    },
+    startTime: new Date("2026-06-08T09:00:00").toISOString(),
+    endTime: new Date("2026-06-08T11:30:00").toISOString(),
+  },
+  {
+    id: "m2",
+    title: "Session B",
+    category: null,
+    photo: { data: [], upload: [], remove: [] },
+    photos: { data: [], upload: [], remove: [] },
+    startTime: new Date("2026-06-08T13:00:00").toISOString(),
+    endTime: null,
+  },
+];
+
 const flexMathQueries: FlexMathQuery[] = [
   { type: "categoryPercentage", targetCategory: "Test 2", maxPercentage: 50 },
   {
@@ -146,9 +190,10 @@ const flexMathQueries: FlexMathQuery[] = [
   },
 ];
 
-stories.add("FlexTable", () => {
+export const FlexTableStory = () => {
   const [data, setData] = useState<FlexTableItem[]>(sampleData);
   const [viewOnlyData] = useState<FlexTableItem[]>(sampleData);
+  const [mediaData, setMediaData] = useState<FlexTableItem[]>(sampleMediaData);
 
   const formRef = useRef<any>(null);
   const tableRef = useRef<any>(null);
@@ -308,6 +353,64 @@ stories.add("FlexTable", () => {
           />
         </div>
       </StorySection>
+
+      <StorySection
+        title="Image & Multiple Image Columns"
+        description="type='image' stores a single URL; type='multipleImage' stores an array. multipleImage supports selecting multiple files at once. Click any thumbnail to open it in the zoom/rotate/download preview modal."
+      >
+        <div className="w-full">
+          <FlexTable
+            label="Media Table (Editable)"
+            data={mediaData}
+            columns={mediaColumns}
+            hideCategory={true}
+            onChangeData={setMediaData}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Image Columns (Read Only)"
+        description="disabled=true renders thumbnails inline with no upload controls. Thumbnails are still clickable to open the zoom preview."
+      >
+        <div className="w-full">
+          <FlexTable
+            label="Media Table (Read Only)"
+            data={mediaData}
+            columns={mediaColumns}
+            hideCategory={true}
+            disabled={true}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Time Picker Columns"
+        description="A DataStructure column with type='date' and hideShowDate=true maps to a timePicker cell. Values are stored as ISO strings and displayed as HH:MM in read mode."
+      >
+        <div className="w-full">
+          <FlexTable
+            label="Schedule (Editable)"
+            data={mediaData}
+            columns={[
+              {
+                id: "startTime",
+                name: "Start Time",
+                type: "date",
+                hideShowDate: true,
+              },
+              {
+                id: "endTime",
+                name: "End Time",
+                type: "date",
+                hideShowDate: true,
+              },
+            ]}
+            hideCategory={true}
+            onChangeData={setMediaData}
+          />
+        </div>
+      </StorySection>
     </>
   );
-});
+};

package/lib/components/display/grid/README.md

@@ -79,33 +79,34 @@ Custom ribbon on card image:
 
 ##### Optional props
 
-| Name                    | Type                                       | Default                                                 | Description                                                                                                              |
-| ----------------------- | ------------------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `paginationType`        | `"cursor" \| "page"`                       | —                                                       | Enables pagination. `"cursor"` for token-based, `"page"` for numbered pages                                              |
-| `limit`                 | `number`                                   | `5`                                                     | Cards per page. Required when `paginationType` is set                                                                    |
-| `pageIndex`             | `number`                                   | —                                                       | Current page index (0-based). Required when `paginationType` is set                                                      |
-| `cursor`                | `any`                                      | —                                                       | Pass a truthy value while more pages exist; falsy on the last page. Required when `paginationType="cursor"`              |
-| `size`                  | `number`                                   | —                                                       | Total record count. Required when `paginationType="page"` to calculate page count                                        |
-| `hidePagination`        | `boolean`                                  | `false`                                                 | Hide the pagination bar                                                                                                  |
-| `horizontalScroll`      | `boolean`                                  | `false`                                                 | Render cards in a horizontally scrollable row instead of a grid                                                          |
-| `infinityScroll`        | `boolean`                                  | `false`                                                 | Auto-load the next page when the user scrolls to the end. Requires `horizontalScroll=true` and `paginationType="cursor"` |
-| `gridColClassName`      | `string`                                   | `"sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 lg:gap-x-8"` | Tailwind grid column classes                                                                                             |
-| `className`             | `string`                                   | —                                                       | Tailwind classes for the outer container                                                                                 |
-| `itemClassName`         | `string`                                   | —                                                       | Tailwind classes applied to each card, e.g. `"shadow-md rounded"`                                                        |
-| `selectedItemClassName` | `string`                                   | —                                                       | Tailwind classes applied to cards whose id is in `selectedItemsId`                                                       |
-| `selectedItemsId`       | `string[]`                                 | —                                                       | IDs of cards to highlight with `selectedItemClassName`                                                                   |
-| `customGridItems`       | `{ [id: string]: ReactElement }`           | —                                                       | Replace a specific card with custom JSX. The key must match the item's `id` in `data`                                    |
-| `imgContain`            | `boolean`                                  | `false`                                                 | Use `object-contain` instead of `object-cover` for card images                                                           |
-| `darkMode`              | `boolean`                                  | `false`                                                 | Enable dark mode card styling                                                                                            |
-| `darkModeBg`            | `string`                                   | —                                                       | Tailwind bg class for dark mode cards, e.g. `"bg-gray-800"`                                                              |
-| `newTabUrl`             | `string`                                   | —                                                       | Prepends a link to each card. The card `id` is appended to this URL                                                      |
-| `addNewTabUrl`          | `string`                                   | —                                                       | URL appended to the add-card action link                                                                                 |
-| `draggable`             | `boolean`                                  | `false`                                                 | Enable drag-and-drop reordering of cards                                                                                 |
-| `droppable`             | `boolean`                                  | `false`                                                 | Allow cards to be dropped onto other cards                                                                               |
-| `renderImgRibbon`       | `(id: string) => ReactElement \| null`     | —                                                       | Return a ReactElement to overlay on the card image (e.g. a ribbon badge), or `null` for no ribbon                        |
-| `onClickData`           | `(id: string) => void`                     | —                                                       | Called with the card id when a card is clicked                                                                           |
-| `onDropData`            | `(dragId: string, dropId: string) => void` | —                                                       | Called when a card is dropped onto another card                                                                          |
-| `handleUpdatePageIndex` | `(value: string \| number) => void`        | —                                                       | Called with `"next"`, `"prev"`, or a page number when the user navigates                                                 |
+| Name                    | Type                                       | Default                                                 | Description                                                                                                                   |
+| ----------------------- | ------------------------------------------ | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `paginationType`        | `"cursor" \| "page"`                       | —                                                       | Enables pagination. `"cursor"` for token-based, `"page"` for numbered pages                                                   |
+| `limit`                 | `number`                                   | `5`                                                     | Cards per page. Required when `paginationType` is set                                                                         |
+| `pageIndex`             | `number`                                   | —                                                       | Current page index (0-based). Required when `paginationType` is set                                                           |
+| `cursor`                | `any`                                      | —                                                       | Pass a truthy value while more pages exist; falsy on the last page. Required when `paginationType="cursor"`                   |
+| `size`                  | `number`                                   | —                                                       | Total record count. Required when `paginationType="page"` to calculate page count                                             |
+| `hidePagination`        | `boolean`                                  | `false`                                                 | Hide the pagination bar                                                                                                       |
+| `customPaginationSize`  | `number`                                   | —                                                       | Overrides the count shown in `Showing X result(s)`. When provided, replaces `size` (page mode) or `data.length` (cursor mode) |
+| `horizontalScroll`      | `boolean`                                  | `false`                                                 | Render cards in a horizontally scrollable row instead of a grid                                                               |
+| `infinityScroll`        | `boolean`                                  | `false`                                                 | Auto-load the next page when the user scrolls to the end. Requires `horizontalScroll=true` and `paginationType="cursor"`      |
+| `gridColClassName`      | `string`                                   | `"sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 lg:gap-x-8"` | Tailwind grid column classes                                                                                                  |
+| `className`             | `string`                                   | —                                                       | Tailwind classes for the outer container                                                                                      |
+| `itemClassName`         | `string`                                   | —                                                       | Tailwind classes applied to each card, e.g. `"shadow-md rounded"`                                                             |
+| `selectedItemClassName` | `string`                                   | —                                                       | Tailwind classes applied to cards whose id is in `selectedItemsId`                                                            |
+| `selectedItemsId`       | `string[]`                                 | —                                                       | IDs of cards to highlight with `selectedItemClassName`                                                                        |
+| `customGridItems`       | `{ [id: string]: ReactElement }`           | —                                                       | Replace a specific card with custom JSX. The key must match the item's `id` in `data`                                         |
+| `imgContain`            | `boolean`                                  | `false`                                                 | Use `object-contain` instead of `object-cover` for card images                                                                |
+| `darkMode`              | `boolean`                                  | `false`                                                 | Enable dark mode card styling                                                                                                 |
+| `darkModeBg`            | `string`                                   | —                                                       | Tailwind bg class for dark mode cards, e.g. `"bg-gray-800"`                                                                   |
+| `newTabUrl`             | `string`                                   | —                                                       | Prepends a link to each card. The card `id` is appended to this URL                                                           |
+| `addNewTabUrl`          | `string`                                   | —                                                       | URL appended to the add-card action link                                                                                      |
+| `draggable`             | `boolean`                                  | `false`                                                 | Enable drag-and-drop reordering of cards                                                                                      |
+| `droppable`             | `boolean`                                  | `false`                                                 | Allow cards to be dropped onto other cards                                                                                    |
+| `renderImgRibbon`       | `(id: string) => ReactElement \| null`     | —                                                       | Return a ReactElement to overlay on the card image (e.g. a ribbon badge), or `null` for no ribbon                             |
+| `onClickData`           | `(id: string) => void`                     | —                                                       | Called with the card id when a card is clicked                                                                                |
+| `onDropData`            | `(dragId: string, dropId: string) => void` | —                                                       | Called when a card is dropped onto another card                                                                               |
+| `handleUpdatePageIndex` | `(value: string \| number) => void`        | —                                                       | Called with `"next"`, `"prev"`, or a page number when the user navigates                                                      |
 
 ##### GridClass
 

package/lib/components/display/grid/grid.stories.tsx

@@ -1,16 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Grid, GridClass } from ".";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Grid" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const data: GridClass[] = [
   {
@@ -83,7 +77,7 @@ const renderImgRibbon = (id: string) => {
   return null;
 };
 
-stories.add("Grid", () => {
+export const GridStory = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const limit = 5;
   const cursor = true;
@@ -231,4 +225,4 @@ stories.add("Grid", () => {
       </StorySection>
     </>
   );
-});
+}

package/lib/components/display/kanban/kanban.stories.tsx

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useState } from "react";
 import { Kanban } from ".";
 import { GridClass } from "../grid";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Kanban" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const initialData = [
   {
@@ -20,7 +14,7 @@ const initialData = [
     description: "Desc",
     groupBy: "Open",
     tags: ["Sports", "Promotions"],
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "2",
@@ -29,7 +23,7 @@ const initialData = [
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
     groupBy: "In progress",
     tags: ["Sports", "Promotions"],
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "3",
@@ -37,48 +31,48 @@ const initialData = [
     description: "test",
     groupBy: "To be tested",
     tags: ["Sports", "Promotions"],
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "4",
     title: "DC-4",
     description: "test",
     groupBy: "Reopen",
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "5",
     title: "DC-5",
     description: "test",
     groupBy: "Reopen",
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "6",
     title: "DC-6",
     description: "test",
     groupBy: "Open",
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "7",
     title: "DC-7",
     description: "test",
     groupBy: "Open",
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "8",
     title: "DC-8",
     description: "test",
     groupBy: "Open",
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
   {
     id: "9",
     title: "DC-9",
     description: "test",
-    createdAt: moment("12/24/2020").toDate(),
+    createdAt: dayjs("12/24/2020").toDate(),
   },
 ];
 
@@ -90,7 +84,7 @@ const groupClusters = [
   },
 ];
 
-stories.add("Kanban", () => {
+export const KanbanStory = () => {
   const [data, setData] = useState<GridClass[]>(initialData);
 
   return (
@@ -130,4 +124,4 @@ stories.add("Kanban", () => {
       </div>
     </div>
   );
-});
+}

package/lib/components/display/list/README.md

@@ -61,35 +61,36 @@ const handlePagination = (value) => {
 
 ### Optional props
 
-| Name                    | Type                                   | Default         | Description                                                                                                                    |
-| ----------------------- | -------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `paginationType`        | `"cursor"` \| `"page"`                 | —               | Enables pagination controls                                                                                                    |
-| `limit`                 | `number`                               | `10`            | Items per page — required when `paginationType` is set                                                                         |
-| `pageIndex`             | `number`                               | `0`             | Current page index — required when `paginationType` is set                                                                     |
-| `cursor`                | `any`                                  | —               | Last fetched cursor value (string or Date). Required for `paginationType="cursor"` to enable the next button beyond local data |
-| `size`                  | `number`                               | —               | Total record count. Required for `paginationType="page"` to calculate page numbers                                             |
-| `hidePagination`        | `boolean`                              | `false`         | Hides the pagination row entirely                                                                                              |
-| `groupId`               | `string`                               | —               | Key on `ListClass` items to group by. Renders a Tabs bar to filter the list by unique values                                   |
-| `imgContain`            | `boolean`                              | `false`         | Uses `object-contain` instead of `object-cover` for item images                                                                |
-| `actionMobile`          | `boolean`                              | `false`         | Moves the `action` element to a new line on mobile                                                                             |
-| `noTruncate`            | `boolean`                              | `false`         | Removes CSS truncation from item titles                                                                                        |
-| `showId`                | `boolean`                              | `false`         | Includes the `id` field in the rendered key/value pairs                                                                        |
-| `newTabUrl`             | `string`                               | —               | Base URL for row links e.g. `"https://example.com/items?id="`                                                                  |
-| `addNewTabUrl`          | `string`                               | —               | Suffix appended after the id in the link URL e.g. `"?type=view"`                                                               |
-| `darkMode`              | `boolean`                              | `false`         | Applies dark colour scheme                                                                                                     |
-| `darkModeBg`            | `tailwind class`                       | `"bg-gray-900"` | Background class used in dark mode                                                                                             |
-| `checkbox`              | `boolean`                              | `false`         | Adds a checkbox to each row for multi-select                                                                                   |
-| `selectedIds`           | `string[]`                             | —               | Array of selected item ids — required when `checkbox` is `true`                                                                |
-| `selectAll`             | `boolean`                              | `false`         | When `true`, treats all items across all pages as selected                                                                     |
-| `selectAllText`         | `string`                               | —               | Text appended to "All" in the selected count label                                                                             |
-| `disableSelectFullData` | `boolean`                              | `false`         | Hides the "Select All in List / Unselect All in List" popup                                                                    |
-| `multiActionButton`     | `ReactElement`                         | —               | Action buttons shown in the selection header when items are selected                                                           |
-| `className`             | `tailwind class`                       | —               | Class applied to the outer container                                                                                           |
-| `onClickRow`            | `(id: string, index?: number) => void` | —               | Called when a row is clicked                                                                                                   |
-| `handleUpdatePageIndex` | `(value: string \| number) => void`    | —               | Called on pagination. Receives `"prev"`, `"next"`, or a page number                                                            |
-| `handleSelectedIds`     | `(value: string[]) => void`            | —               | Called when the selected ids change                                                                                            |
-| `handleSelectAll`       | `(value: boolean) => void`             | —               | Called when select-all state changes                                                                                           |
-| `linkProps`             | `LinkProps`                            | —               | Refer to Link component documentation                                                                                          |
+| Name                    | Type                                   | Default         | Description                                                                                                                              |
+| ----------------------- | -------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `paginationType`        | `"cursor"` \| `"page"`                 | —               | Enables pagination controls                                                                                                              |
+| `limit`                 | `number`                               | `10`            | Items per page — required when `paginationType` is set                                                                                   |
+| `pageIndex`             | `number`                               | `0`             | Current page index — required when `paginationType` is set                                                                               |
+| `cursor`                | `any`                                  | —               | Last fetched cursor value (string or Date). Required for `paginationType="cursor"` to enable the next button beyond local data           |
+| `size`                  | `number`                               | —               | Total record count. Required for `paginationType="page"` to calculate page numbers                                                       |
+| `hidePagination`        | `boolean`                              | `false`         | Hides the pagination row entirely                                                                                                        |
+| `customPaginationSize`  | `number`                               | —               | Overrides the count shown in `Showing X result(s)`. When provided, replaces `size` (page mode) or the filtered list length (cursor mode) |
+| `groupId`               | `string`                               | —               | Key on `ListClass` items to group by. Renders a Tabs bar to filter the list by unique values                                             |
+| `imgContain`            | `boolean`                              | `false`         | Uses `object-contain` instead of `object-cover` for item images                                                                          |
+| `actionMobile`          | `boolean`                              | `false`         | Moves the `action` element to a new line on mobile                                                                                       |
+| `noTruncate`            | `boolean`                              | `false`         | Removes CSS truncation from item titles                                                                                                  |
+| `showId`                | `boolean`                              | `false`         | Includes the `id` field in the rendered key/value pairs                                                                                  |
+| `newTabUrl`             | `string`                               | —               | Base URL for row links e.g. `"https://example.com/items?id="`                                                                            |
+| `addNewTabUrl`          | `string`                               | —               | Suffix appended after the id in the link URL e.g. `"?type=view"`                                                                         |
+| `darkMode`              | `boolean`                              | `false`         | Applies dark colour scheme                                                                                                               |
+| `darkModeBg`            | `tailwind class`                       | `"bg-gray-900"` | Background class used in dark mode                                                                                                       |
+| `checkbox`              | `boolean`                              | `false`         | Adds a checkbox to each row for multi-select                                                                                             |
+| `selectedIds`           | `string[]`                             | —               | Array of selected item ids — required when `checkbox` is `true`                                                                          |
+| `selectAll`             | `boolean`                              | `false`         | When `true`, treats all items across all pages as selected                                                                               |
+| `selectAllText`         | `string`                               | —               | Text appended to "All" in the selected count label                                                                                       |
+| `disableSelectFullData` | `boolean`                              | `false`         | Hides the "Select All in List / Unselect All in List" popup                                                                              |
+| `multiActionButton`     | `ReactElement`                         | —               | Action buttons shown in the selection header when items are selected                                                                     |
+| `className`             | `tailwind class`                       | —               | Class applied to the outer container                                                                                                     |
+| `onClickRow`            | `(id: string, index?: number) => void` | —               | Called when a row is clicked                                                                                                             |
+| `handleUpdatePageIndex` | `(value: string \| number) => void`    | —               | Called on pagination. Receives `"prev"`, `"next"`, or a page number                                                                      |
+| `handleSelectedIds`     | `(value: string[]) => void`            | —               | Called when the selected ids change                                                                                                      |
+| `handleSelectAll`       | `(value: boolean) => void`             | —               | Called when select-all state changes                                                                                                     |
+| `linkProps`             | `LinkProps`                            | —               | Refer to Link component documentation                                                                                                    |
 
 ### ListClass
 

package/lib/components/display/list/list.stories.tsx

@@ -1,16 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { List, ListClass } from ".";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/List" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const baseLists: ListClass[] = [
   {
@@ -59,7 +53,7 @@ const groupedLists: ListClass[] = baseLists.map((item) => ({
   groupId: item.tag,
 }));
 
-stories.add("List", () => {
+export const ListStory = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const [limit] = useState(2);
   const [cursor] = useState("");
@@ -185,4 +179,4 @@ stories.add("List", () => {
       </StorySection>
     </>
   );
-});
+}

package/lib/components/display/loading/loading.stories.tsx

@@ -1,15 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Loading } from ".";
-import README from "./README.md";
-const stories = storiesOf("Display", module);
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
+const meta = { title: "Display/Loading" };
+export default meta;
 
-stories.add("Loading", () => {
+
+export const LoadingStory = () => {
   return <Loading />;
-});
+}

package/lib/components/display/mapView/mapView.stories.tsx

@@ -1,16 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 import { MapMarker, MapView } from ".";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/MapView" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const baseMarkers: MapMarker[] = [
   {
@@ -63,7 +57,7 @@ const handleInjectGoogleMaps = (onReady: () => void) => {
   }, 500);
 };
 
-stories.add("MapView", () => {
+export const MapViewStory = () => {
   const [loading, setLoading] = useState(true);
   const [markers, setMarkers] = useState<MapMarker[]>(baseMarkers);
 
@@ -222,4 +216,4 @@ stories.add("MapView", () => {
       </StorySection>
     </>
   );
-});
+}

package/lib/components/display/modal/modal.stories.tsx

@@ -1,21 +1,14 @@
 import { Transition } from "@headlessui/react";
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Modal } from ".";
 import { DataTemplateWrapper } from "../../data/dataWrapper";
 import { Notification } from "../notification";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Modal" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
-
-stories.add("Modal", () => {
+export const ModalStory = () => {
   const [open, setOpen] = useState(true);
   const notification = (
     <Notification
@@ -78,4 +71,4 @@ stories.add("Modal", () => {
       }}
     />
   );
-});
+};

package/lib/components/display/notification/notification.stories.tsx

@@ -1,19 +1,13 @@
 import { Transition } from "@headlessui/react";
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Notification } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Notification" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Notification", () => {
+export const NotificationStory = () => {
   return (
     <Notification
       icon={<CheckCircleIcon className="w-10 h-10 text-primary-600" />}
@@ -27,4 +21,4 @@ stories.add("Notification", () => {
       }}
     />
   );
-});
+}