Docs: updated stories

.storybook/main.ts

@@ -11,6 +11,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "storybook-addon-deep-controls",
     "@dreamworld/addon-redux",
   ],
   framework: {

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,7 +1,18 @@
+import React from 'react';
 import type { Preview } from '@storybook/react';
+import { Toaster } from 'sonner';
 import '@/styles/index.css';
 import '@/styles/storybook.css';
 
+const withToaster = (Story, context) => {
+  return (
+    <>
+      <Toaster />
+      <Story {...context} />
+    </>
+  );
+}
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -11,10 +22,13 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    deepControls: { enabled: true },
     reactRouter: {},
     options: {}
   },
-  decorators: [],
+  decorators: [
+    withToaster
+  ],
 };
 
 export default preview;

.storybook/theme.ts

@@ -3,8 +3,7 @@ import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',
-  brandTitle: 'Mezh HQ Seat Toolkit',
+  brandTitle: 'Mezh HQ | Seat Toolkit',
   brandUrl: 'https://mezh-hq.github.io',
-  brandImage: '',
   brandTarget: '_self',
 });

package.json

@@ -102,11 +102,15 @@
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.13",
+    "install": "0.13.0",
     "lefthook": "1.4.3",
+    "npm": "10.8.1",
     "patch-package": "8.0.0",
     "postcss": "8.4.31",
     "prettier": "2.8.8",
+    "sonner": "1.5.0",
     "storybook": "7.3.2",
+    "storybook-addon-deep-controls": "0.2.1",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "1.0.6",
     "tsc-alias": "1.8.8",

src/stories/_utils/index.ts

@@ -0,0 +1,18 @@
+export const disableArgTypes = (keys: string[]) => {
+  return keys.reduce((acc: Record<string, any>, key) => {
+    acc[key] = { table: { disable: true } };
+    return acc;
+  }, {});
+};
+
+export const prefixKeys = (object: Record<string, any>, prefix: string) => {
+  return Object.keys(object).reduce((acc: Record<string, any>, key) => {
+    acc[`${prefix}${key}`] = object[key];
+    return acc;
+  }, {});
+};
+
+export enum STKMode {
+  DESIGNER = "designer",
+  USER = "user"
+}

src/stories/customization.mdx

@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/blocks";
+import { Button } from "../components";
+
+
+
+<Meta title="Customization" />
+
+<h1>Customization</h1>
+
+<h4>React Seat Toolkit is highly customizable. You can change almost every aspect of it through its `styles` prop</h4>
+
+<h4>Here is an example of how you can override its default styles:</h4>
+
+```jsx
+import { SeatToolkit } from "@mezh-hq/react-seat-toolkit";
+
+return <SeatToolkit 
+  mode="designer"
+  styles={{
+    root: {
+      className: "bg-gray-100",
+      style: {
+        padding: "20px",
+        borderRadius: "10px",
+        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)"
+      }
+    }
+  }}
+/>
+```
+
+<h4>For a full list of supported styles please have a look at its type definitions</h4>

src/stories/designer/basic.stories.tsx

@@ -0,0 +1,46 @@
+import { toast } from "sonner";
+import SeatToolkit from "@/index";
+import { STKMode } from "../_utils";
+import { options } from "../options";
+
+export default {
+  title: "Designer/Basic",
+  component: SeatToolkit,
+  ...options
+};
+
+export const Story = {
+  render: (props) => <SeatToolkit mode={STKMode.DESIGNER} {...props} />
+};
+
+export const WithoutFooter = {
+  render: (props) => (
+    <SeatToolkit
+      mode={STKMode.DESIGNER}
+      {...props}
+      options={{
+        showFooter: false,
+        ...props.options
+      }}
+    />
+  )
+};
+
+export const WithReloadButton = {
+  render: (props) => (
+    <SeatToolkit
+      mode={STKMode.DESIGNER}
+      {...props}
+      options={{
+        showReloadButton: true,
+        ...props.options
+      }}
+      events={{
+        onReload: () => {
+          toast.info("Reload clicked");
+        },
+        ...props.events
+      }}
+    />
+  )
+};

src/stories/designer/blank.stories.tsx

@@ -0,0 +1,13 @@
+import SeatToolkit from "@/index";
+import { STKMode } from "../_utils";
+import { options } from "../options";
+
+export default {
+  title: "Designer/Blank",
+  component: SeatToolkit,
+  ...options
+};
+
+export const Story = {
+  render: (props) => <SeatToolkit mode={STKMode.DESIGNER} data={{}} {...props} />
+};

src/stories/designer/persisted.stories.tsx

@@ -0,0 +1,34 @@
+import { toast } from "sonner";
+import SeatToolkit from "@/index";
+import { STKMode } from "../_utils";
+import { options } from "../options";
+
+export default {
+  title: "Designer/Persisted",
+  component: SeatToolkit,
+  ...options
+};
+
+export const Story = {
+  render: (props) => {
+    const saved = sessionStorage.getItem("stk-data");
+    const data = saved ? JSON.parse(saved) : undefined;
+    return (
+      <SeatToolkit
+        {...props}
+        mode={STKMode.DESIGNER}
+        data={data}
+        options={{
+          exportButtonText: "Save to Session Storage"
+        }}
+        events={{
+          onExport: (data) => {
+            sessionStorage.setItem("stk-data", JSON.stringify(data));
+            toast.info("Changes saved to session storage. They will be available on page reload");
+          },
+          ...props.events
+        }}
+      />
+    );
+  }
+};

src/stories/configure.mdx → src/stories/installation.mdx

@@ -3,11 +3,11 @@ import { Button } from "../components";
 
 export const command = "bun install @mezh-hq/react-seat-toolkit"
 
-export const copy = () => {
+export function copy () {
   navigator.clipboard.writeText(command);
-};
+}
 
-<Meta title="Configure your project" />
+<Meta title="Installation" />
 
 <div className="h-full w-full flex flex-col justify-center items-center gap-12 text-center p-3 md:p-12">
   <span className="w-10/12 !text-[30px] md:!text-[48px] lg:!text-[54px] text-center font-bold tracking-[-2px]"> Complete toolkit for seat design</span>

src/stories/options.ts

@@ -0,0 +1,132 @@
+import { disableArgTypes, prefixKeys } from "./_utils";
+
+export const options = {
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...disableArgTypes(["options"]),
+    ...prefixKeys(
+      {
+        showFooter: {
+          control: "boolean",
+          description: "Show or hide the footer",
+          defaultValue: { summary: true }
+        },
+        showGridSwitch: {
+          control: "boolean",
+          description: "Show or hide the grid switch",
+          defaultValue: { summary: true }
+        },
+        showSeatLabels: {
+          control: "boolean",
+          description: "Show or hide the seat labels",
+          defaultValue: { summary: true }
+        },
+        showZoomControls: {
+          control: "boolean",
+          description: "Show or hide the zoom controls",
+          defaultValue: { summary: true }
+        },
+        showVisibilityControls: {
+          control: "boolean",
+          description: "Show or hide the visibility controls",
+          defaultValue: { summary: true }
+        },
+        showReloadButton: {
+          control: "boolean",
+          description: "Show or hide the reload button",
+          defaultValue: { summary: false }
+        },
+        exportButtonText: {
+          control: "text",
+          description: "Custom text for the export button",
+          defaultValue: { summary: "Export" }
+        },
+        operationTriggerIcon: {
+          control: "function",
+          description: "React component to use in place of the operation trigger icon"
+        },
+        seatIcon: {
+          control: "function",
+          description: "React component to use as a seat icon"
+        },
+        selectedSeatIcon: {
+          control: "function",
+          description: "React component to use as a selected seat icon"
+        },
+        maxSeatSelectionCount: {
+          control: "number",
+          description:
+            "Maximum number of seats that can be selected. Only applicable in user mode. Defaults to infinity."
+        },
+        maxImageSize: {
+          control: "number",
+          description: "Maximum size of an image which can be added to the workspace in bytes"
+        },
+        locationInputPlaceholder: {
+          control: "text",
+          description: "Placeholder text for the location input"
+        },
+        disableCategoryDelete: {
+          control: "boolean",
+          description: "Disable category deletion",
+          defaultValue: { summary: false }
+        },
+        disableCategoryDeleteIfReserved: {
+          control: "boolean",
+          description: "Disable category deletion if there are reserved seats falling under the category",
+          defaultValue: { summary: false }
+        },
+        disableSectionDelete: {
+          control: "boolean",
+          description: "Disable section deletion",
+          defaultValue: { summary: false }
+        }
+      },
+      "options."
+    ),
+    ...disableArgTypes(["events"]),
+    ...prefixKeys(
+      {
+        onSeatClick: {
+          description: "Fired when a seat is clicked"
+        },
+        onFreeSeatClick: {
+          description: "Fired when a free seat is clicked"
+        },
+        onSeatHover: {
+          description: "Fired when a seat is hovered over"
+        },
+        onSeatLeave: {
+          description: "Fired when a seat is no longer hovered over"
+        },
+        onSeatSelectionChange: {
+          description: "Fired when the selected seats change. Only applicable in user mode."
+        },
+        onMaxSeatSelectionCountReached: {
+          description: "Fired when the user tries to select more seats than the maxSeatSelectionCount"
+        },
+        onWorkspaceHover: {
+          description: "Fired when the workspace is hovered over"
+        },
+        onWorkspaceLoad: {
+          description: "Fired when the workspace is loaded"
+        },
+        onSectionClick: {
+          description: "Fired when a section is clicked"
+        },
+        onExport: {
+          description: "Fired when the export button is clicked"
+        },
+        onReload: {
+          description: "Fired when the reload button is clicked"
+        }
+      },
+      "events."
+    )
+  }
+};
+
+export default options;