@lateralus-ai/shipping-ui 1.4.12 → 1.4.14

package/src/stories/Buttons.stories.tsx

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

package/src/stories/Buttons.tsx

@@ -1,52 +1,52 @@
-import { Button, IconButton } from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-
-export const Buttons = () => (
-  <div className="p-8 grid gap-4">
-    <div className="flex gap-4">
-      <IconButton color="blue">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="green">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="gray" variant="text">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="orange">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="red">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton variant="outlined" color="gray">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-    </div>
-
-    <div className="flex gap-4">
-      <Button color="blue" className="tracking-[0.16px]">
-        Lorem ipsum
-      </Button>
-
-      <Button color="green">Lorem ipsum</Button>
-
-      <Button color="gray" variant="text">
-        Lorem ipsum
-      </Button>
-
-      <Button color="orange">Lorem ipsum</Button>
-
-      <Button color="red">Lorem ipsum</Button>
-
-      <Button variant="outlined" color="gray">
-        Lorem ipsum
-      </Button>
-    </div>
-  </div>
-);
+import { Button, IconButton } from "@material-tailwind/react";
+import { Icon } from "@iconify/react";
+
+export const Buttons = () => (
+  <div className="p-8 grid gap-4">
+    <div className="flex gap-4">
+      <IconButton color="blue">
+        <Icon icon="lucide:ship" />
+      </IconButton>
+
+      <IconButton color="green">
+        <Icon icon="lucide:ship" />
+      </IconButton>
+
+      <IconButton color="gray" variant="text">
+        <Icon icon="lucide:ship" />
+      </IconButton>
+
+      <IconButton color="orange">
+        <Icon icon="lucide:ship" />
+      </IconButton>
+
+      <IconButton color="red">
+        <Icon icon="lucide:ship" />
+      </IconButton>
+
+      <IconButton variant="outlined" color="gray">
+        <Icon icon="lucide:ship" />
+      </IconButton>
+    </div>
+
+    <div className="flex gap-4">
+      <Button color="blue" className="tracking-[0.16px]">
+        Lorem ipsum
+      </Button>
+
+      <Button color="green">Lorem ipsum</Button>
+
+      <Button color="gray" variant="text">
+        Lorem ipsum
+      </Button>
+
+      <Button color="orange">Lorem ipsum</Button>
+
+      <Button color="red">Lorem ipsum</Button>
+
+      <Button variant="outlined" color="gray">
+        Lorem ipsum
+      </Button>
+    </div>
+  </div>
+);

package/src/stories/Checkbox.stories.tsx

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

package/src/stories/Checkbox.tsx

@@ -1,56 +1,56 @@
-import { Checkbox } from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-import { useState } from "react";
-
-export const CheckboxItem = () => {
-  const [isChecked, setIsChecked] = useState(false);
-
-  return (
-    <div className="p-8 grid gap-4">
-      <div className="flex flex-col gap-2">
-        <div className="font-medium text-lg">Default</div>
-        <Checkbox
-          checked={isChecked}
-          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          containerProps={{
-            className: "pl-1 pr-2 pb-0 pt-1",
-          }}
-        />
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <div className="font-medium text-lg">With label</div>
-        <Checkbox
-          label="Remember Me"
-          checked={isChecked}
-          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          containerProps={{
-            className: "pl-1 pr-2 pb-0 pt-1",
-          }}
-        />
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <div className="font-medium text-lg">Disabled</div>
-        <Checkbox
-          label="Remember Me"
-          checked={isChecked}
-          disabled={true}
-          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          containerProps={{
-            className: "pl-1 pr-2 pb-0 pt-1",
-          }}
-        />
-      </div>
-    </div>
-  );
-};
+import { Checkbox } from "@material-tailwind/react";
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+
+export const CheckboxItem = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div className="p-8 grid gap-4">
+      <div className="flex flex-col gap-2">
+        <div className="font-medium text-lg">Default</div>
+        <Checkbox
+          checked={isChecked}
+          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
+          onChange={() => {
+            setIsChecked(!isChecked);
+          }}
+          containerProps={{
+            className: "pl-1 pr-2 pb-0 pt-1",
+          }}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <div className="font-medium text-lg">With label</div>
+        <Checkbox
+          label="Remember Me"
+          checked={isChecked}
+          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
+          onChange={() => {
+            setIsChecked(!isChecked);
+          }}
+          containerProps={{
+            className: "pl-1 pr-2 pb-0 pt-1",
+          }}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <div className="font-medium text-lg">Disabled</div>
+        <Checkbox
+          label="Remember Me"
+          checked={isChecked}
+          disabled={true}
+          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
+          onChange={() => {
+            setIsChecked(!isChecked);
+          }}
+          containerProps={{
+            className: "pl-1 pr-2 pb-0 pt-1",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/stories/ColorPalette.stories.tsx

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

package/src/stories/ColorPalette.tsx

@@ -1,72 +1,85 @@
-import React from "react";
-
-const colorGroups = {
-  Gray: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Green: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Blue: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Red: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  Orange: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-};
-
-export const ColorPalette = () => {
-  return (
-    <div className="p-8 space-y-8">
-      <h2 className="text-2xl font-bold mb-4">Color Palette</h2>
-
-      {Object.entries(colorGroups).map(([colorName, shades]) => (
-        <div key={colorName}>
-          <h3 className="text-lg font-semibold mb-4">{colorName}</h3>
-          <div className="grid grid-cols-10 gap-2">
-            {shades.map((shade) => {
-              const colorClass = `bg-${colorName.toLowerCase()}-${shade}`;
-              return (
-                <div key={shade} className="text-center">
-                  <div
-                    className={`${colorClass} h-20 rounded-md border border-gray-200`}
-                  />
-                  <p className="text-xs mt-1">{shade}</p>
-                  <p className="text-xs text-gray-500">
-                    {colorName.toLowerCase()}-{shade}
-                  </p>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Special Colors</h3>
-        <div className="grid grid-cols-6 gap-4">
-          <div className="text-center">
-            <div className="bg-brand-purple h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Brand Purple</p>
-            <p className="text-xs text-gray-500">#ab68ff</p>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">CSS Variables</h3>
-        <div className="grid grid-cols-4 gap-4">
-          <div className="text-center">
-            <div className="bg-surface-primary h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Primary</p>
-          </div>
-          <div className="text-center">
-            <div className="bg-surface-secondary h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Secondary</p>
-          </div>
-          <div className="text-center">
-            <div className="bg-surface-tertiary h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Tertiary</p>
-          </div>
-          <div className="text-center">
-            <div className="bg-surface-submit h-20 rounded-md border border-gray-200" />
-            <p className="text-xs mt-1">Surface Submit</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { theme } from "../tailwind-theme";
+
+const colorGroups = {
+  Gray: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  Green: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  Blue: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  Red: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  Orange: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  Purple: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  Brand: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+};
+
+export const ColorPalette = () => {
+  const getColorValue = (colorName: string, shade: string): string => {
+    const colorKey = colorName.toLowerCase() as keyof typeof theme.colors;
+    const color = theme.colors[colorKey];
+    if (typeof color === "object" && color !== null && shade in color) {
+      return (color as Record<string, string>)[shade];
+    }
+    return "#000000";
+  };
+
+  return (
+    <div className="p-8 space-y-8">
+      <h2 className="text-2xl font-bold mb-4">Color Palette</h2>
+
+      {Object.entries(colorGroups).map(([colorName, shades]) => (
+        <div key={colorName}>
+          <h3 className="text-lg font-semibold mb-4">{colorName}</h3>
+          <div className="grid grid-cols-10 gap-2">
+            {shades.map((shade) => {
+              const colorValue = getColorValue(colorName, shade);
+              return (
+                <div key={shade} className="text-center">
+                  <div
+                    className="h-20 rounded-md border border-gray-200"
+                    style={{ backgroundColor: colorValue }}
+                  />
+                  <p className="text-xs mt-1">{shade}</p>
+                  <p className="text-xs text-gray-500">
+                    {colorName.toLowerCase()}-{shade}
+                  </p>
+                  <p className="text-xs text-gray-400">{colorValue}</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Special Colors</h3>
+        <div className="grid grid-cols-6 gap-4">
+          <div className="text-center">
+            <div className="bg-brand-purple h-20 rounded-md border border-gray-200" />
+            <p className="text-xs mt-1">Brand Purple</p>
+            <p className="text-xs text-gray-500">#ab68ff</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">CSS Variables</h3>
+        <div className="grid grid-cols-4 gap-4">
+          <div className="text-center">
+            <div className="bg-surface-primary h-20 rounded-md border border-gray-200" />
+            <p className="text-xs mt-1">Surface Primary</p>
+          </div>
+          <div className="text-center">
+            <div className="bg-surface-secondary h-20 rounded-md border border-gray-200" />
+            <p className="text-xs mt-1">Surface Secondary</p>
+          </div>
+          <div className="text-center">
+            <div className="bg-surface-tertiary h-20 rounded-md border border-gray-200" />
+            <p className="text-xs mt-1">Surface Tertiary</p>
+          </div>
+          <div className="text-center">
+            <div className="bg-surface-submit h-20 rounded-md border border-gray-200" />
+            <p className="text-xs mt-1">Surface Submit</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};