@lateralus-ai/shipping-ui 1.4.12 → 1.4.14

package/src/stories/Dropdowns.tsx

@@ -1,52 +1,52 @@
-import {
-  Button,
-  IconButton,
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-
-export const Dropdowns = () => (
-  <div className="p-8 grid gap-4">
-    <div className="flex gap-4">
-      <Menu>
-        <MenuHandler>
-          <Button>Menu</Button>
-        </MenuHandler>
-        <MenuList>
-          <MenuItem>Menu Item 1</MenuItem>
-          <MenuItem>Menu Item 2</MenuItem>
-          <MenuItem>Menu Item 3</MenuItem>
-        </MenuList>
-      </Menu>
-
-      <Menu>
-        <MenuHandler>
-          <Button color="blue">
-            <Icon icon="hugeicons:menu-01" /> Menu
-          </Button>
-        </MenuHandler>
-        <MenuList>
-          <MenuItem>Menu Item 1</MenuItem>
-          <MenuItem>Menu Item 2</MenuItem>
-          <MenuItem>Menu Item 3</MenuItem>
-        </MenuList>
-      </Menu>
-
-      <Menu>
-        <MenuHandler>
-          <IconButton color="neutral" variant="outlined">
-            <Icon icon="hugeicons:menu-01" />
-          </IconButton>
-        </MenuHandler>
-        <MenuList>
-          <MenuItem>Menu Item 1</MenuItem>
-          <MenuItem>Menu Item 2</MenuItem>
-          <MenuItem>Menu Item 3</MenuItem>
-        </MenuList>
-      </Menu>
-    </div>
-  </div>
-);
+import {
+  Button,
+  IconButton,
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from "@material-tailwind/react";
+import { Icon } from "@iconify/react";
+
+export const Dropdowns = () => (
+  <div className="p-8 grid gap-4">
+    <div className="flex gap-4">
+      <Menu>
+        <MenuHandler>
+          <Button>Menu</Button>
+        </MenuHandler>
+        <MenuList>
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </MenuList>
+      </Menu>
+
+      <Menu>
+        <MenuHandler>
+          <Button color="blue">
+            <Icon icon="hugeicons:menu-01" /> Menu
+          </Button>
+        </MenuHandler>
+        <MenuList>
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </MenuList>
+      </Menu>
+
+      <Menu>
+        <MenuHandler>
+          <IconButton color="neutral" variant="outlined">
+            <Icon icon="hugeicons:menu-01" />
+          </IconButton>
+        </MenuHandler>
+        <MenuList>
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </MenuList>
+      </Menu>
+    </div>
+  </div>
+);

package/src/stories/InputPrompt.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { InputPrompts } from "./InputPrompt";
-
-const meta = {
-  title: "Design System/InputPrompts",
-  component: InputPrompts,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof InputPrompts>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputPrompts } from "./InputPrompt";
+
+const meta = {
+  title: "Design System/InputPrompts",
+  component: InputPrompts,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof InputPrompts>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/InputPrompt.tsx

@@ -1,63 +1,63 @@
-import { Button, IconButton } from "@material-tailwind/react";
-import { InputPrompt } from "../components/";
-import { Icon } from "@iconify/react";
-
-export const InputPrompts = () => {
-  const bottomButtons = (
-    <div>
-      <Button variant="text" color="gray">
-        Select ship
-      </Button>
-    </div>
-  );
-
-  const rightButtons = (
-    <div className="flex gap-2">
-      <IconButton variant="text" color="gray">
-        <Icon icon="material-symbols:attach-file-rounded" className="size-6" />
-      </IconButton>
-      <InputPrompt.SubmitButton onClick={() => alert("Click")} />
-    </div>
-  );
-
-  const topContent = (
-    <div className="p-2 mt-2 mx-2 rounded bg-orange-50">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex minima hic
-      qui! Ipsum et, perferendis molestias ut voluptatum laborum id similique.
-    </div>
-  );
-
-  const textArea = (
-    <InputPrompt.Textarea placeholder="Write your message here" />
-  );
-
-  return (
-    <div className="w-[650px] grid gap-8 p-4">
-      <InputPrompt.Container right={rightButtons} textArea={textArea} />
-      <InputPrompt.Container
-        right={rightButtons}
-        bottom={bottomButtons}
-        textArea={textArea}
-      />
-      <InputPrompt.Container
-        right={rightButtons}
-        top={topContent}
-        textArea={textArea}
-      />
-
-      <div className="border rounded-lg">
-        <div className="border-b p-4">Lorem Ipsum dorcet sit amet</div>
-        <div className="p-4 border-b">
-          <div className="h-[650px] text-gray-400 font-semibold bg-gray-100 rounded-2xl items-center justify-center flex">
-            Content placeholder
-          </div>
-        </div>
-        <InputPrompt.Container
-          right={rightButtons}
-          textArea={textArea}
-          className="border-none shadow-none"
-        />
-      </div>
-    </div>
-  );
-};
+import { Button, IconButton } from "@material-tailwind/react";
+import { InputPrompt } from "../components/";
+import { Icon } from "@iconify/react";
+
+export const InputPrompts = () => {
+  const bottomButtons = (
+    <div>
+      <Button variant="text" color="gray">
+        Select ship
+      </Button>
+    </div>
+  );
+
+  const rightButtons = (
+    <div className="flex gap-2">
+      <IconButton variant="text" color="gray">
+        <Icon icon="material-symbols:attach-file-rounded" className="size-6" />
+      </IconButton>
+      <InputPrompt.SubmitButton onClick={() => alert("Click")} />
+    </div>
+  );
+
+  const topContent = (
+    <div className="p-2 mt-2 mx-2 rounded bg-orange-50">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex minima hic
+      qui! Ipsum et, perferendis molestias ut voluptatum laborum id similique.
+    </div>
+  );
+
+  const textArea = (
+    <InputPrompt.Textarea placeholder="Write your message here" />
+  );
+
+  return (
+    <div className="w-[650px] grid gap-8 p-4">
+      <InputPrompt.Container right={rightButtons} textArea={textArea} />
+      <InputPrompt.Container
+        right={rightButtons}
+        bottom={bottomButtons}
+        textArea={textArea}
+      />
+      <InputPrompt.Container
+        right={rightButtons}
+        top={topContent}
+        textArea={textArea}
+      />
+
+      <div className="border rounded-lg">
+        <div className="border-b p-4">Lorem Ipsum dorcet sit amet</div>
+        <div className="p-4 border-b">
+          <div className="h-[650px] text-gray-400 font-semibold bg-gray-100 rounded-2xl items-center justify-center flex">
+            Content placeholder
+          </div>
+        </div>
+        <InputPrompt.Container
+          right={rightButtons}
+          textArea={textArea}
+          className="border-none shadow-none"
+        />
+      </div>
+    </div>
+  );
+};

package/src/stories/ModalHeader.stories.tsx

@@ -1,36 +1,36 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ModalPanel } from "../components/ModalPanel";
-
-const meta: Meta<typeof ModalPanel.Header> = {
-  title: "Design System/ModalPanel",
-  component: ModalPanel.Header,
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ModalPanel.Header>;
-
-export const Default: Story = {
-  args: {
-    onClose: () => console.log("Close button clicked"),
-    children: "Modal Panel Example",
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[500px] border border-gray-200 rounded-xl">
-        <Story />
-        <ModalPanel.Body className="h-64 p-4">
-          <p className="text-body">
-            This is the modal body content. The height is controlled by the h-64 class,
-            and the width fills the container automatically.
-          </p>
-          <p className="text-body mt-4">
-            You can add any content here and control the height through the className prop.
-          </p>
-        </ModalPanel.Body>
-      </div>
-    ),
-  ],
+import type { Meta, StoryObj } from "@storybook/react";
+import { ModalPanel } from "../components/ModalPanel";
+
+const meta: Meta<typeof ModalPanel.Header> = {
+  title: "Design System/ModalPanel",
+  component: ModalPanel.Header,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ModalPanel.Header>;
+
+export const Default: Story = {
+  args: {
+    onClose: () => console.log("Close button clicked"),
+    children: "Modal Panel Example",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[500px] border border-gray-200 rounded-xl">
+        <Story />
+        <ModalPanel.Body className="h-64 p-4">
+          <p className="text-body">
+            This is the modal body content. The height is controlled by the h-64 class,
+            and the width fills the container automatically.
+          </p>
+          <p className="text-body mt-4">
+            You can add any content here and control the height through the className prop.
+          </p>
+        </ModalPanel.Body>
+      </div>
+    ),
+  ],
 };