@burdenoff/microfe-movethewheels 2026.713.1 → 2026.716.2

package/dist/stories/MetricCard.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MetricCard } from '../movethewheels/components/MetricCard';
+
+declare const meta: Meta<typeof MetricCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDelta: Story;
+export declare const FeaturedWithSparkline: Story;

package/dist/stories/Notice.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Notice } from '../movethewheels/components/Notice';
+
+declare const meta: Meta<typeof Notice>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Success: Story;
+export declare const Info: Story;
+export declare const Empty: Story;

package/dist/stories/StatusBadge.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StatusBadge } from '../movethewheels/components/StatusBadge';
+
+declare const meta: Meta<typeof StatusBadge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InTransit: Story;
+export declare const Delivered: Story;
+export declare const Cancelled: Story;
+export declare const VehicleAvailable: Story;
+export declare const DriverOffline: Story;
+export declare const Priority: Story;
+export declare const VehicleType: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.713.1",
+  "version": "2026.716.2",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [
@@ -31,7 +31,10 @@
     "lint:sanity": "if [ \"${CI:-}\" = \"true\" ]; then bun run lint; else bun run lint -- --cache --cache-location .eslintcache; fi",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "type:check": "tsc --noEmit",
-    "sanity": "bun run codegen && bun run lint:sanity && bun run format && bun run type:check && bun run build",
+    "sanity": "bun run codegen && bun run lint:sanity && bun run format && bun run type:check && bun run build && bun run build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test:storybook": "test-storybook",
     "schema:pull": "graphql-codegen --project schema-wspace && graphql-codegen --project schema-global",
     "codegen": "graphql-codegen --project wspace && graphql-codegen --project global",
     "codegen:all": "bun run schema:pull && bun run codegen",
@@ -68,6 +71,13 @@
     "@graphql-codegen/typescript": "^4.0.0",
     "@graphql-codegen/typescript-operations": "^4.0.0",
     "@graphql-codegen/typescript-react-apollo": "^4.0.0",
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/addon-interactions": "^8.6.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
+    "@storybook/test": "^8.6.0",
+    "@storybook/test-runner": "0.22.0",
+    "@tailwindcss/vite": "^4.3.2",
     "@types/leaflet": "^1.9.12",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",

package/src/stories/MetricCard.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Package, Truck, TrendingUp } from 'lucide-react';
+import { MetricCard } from '../movethewheels/components/MetricCard';
+
+const meta: Meta<typeof MetricCard> = {
+  title: 'MoveTheWheels/MetricCard',
+  component: MetricCard,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <Package size={24} />,
+    value: '1,248',
+    label: 'Active orders',
+  },
+};
+
+export const WithDelta: Story = {
+  args: {
+    icon: <Truck size={24} />,
+    value: '98.2%',
+    label: 'On-time deliveries',
+    delta: { value: '+2.4%', direction: 'up' },
+    accent: 'success',
+  },
+};
+
+export const FeaturedWithSparkline: Story = {
+  args: {
+    icon: <TrendingUp size={24} />,
+    value: '$42,890',
+    label: 'Monthly revenue',
+    delta: { value: '+8.1%', direction: 'up' },
+    sparklineData: [32000, 33500, 36100, 35400, 38900, 40200, 42890],
+    accent: 'brand',
+    glow: true,
+  },
+};

package/src/stories/Notice.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Notice } from '../movethewheels/components/Notice';
+
+const meta: Meta<typeof Notice> = {
+  title: 'MoveTheWheels/Notice',
+  component: Notice,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Success: Story = {
+  args: {
+    message: 'Route optimization completed successfully.',
+    variant: 'success',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    message: 'Dispatch window updated to 09:00–17:00 IST.',
+    variant: 'info',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    message: null,
+  },
+};

package/src/stories/StatusBadge.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  StatusBadge,
+  PriorityBadge,
+  VehicleTypeBadge,
+} from '../movethewheels/components/StatusBadge';
+
+const meta: Meta<typeof StatusBadge> = {
+  title: 'MoveTheWheels/StatusBadge',
+  component: StatusBadge,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    status: {
+      control: { type: 'text' },
+      description: 'Raw server enum value (e.g. in_transit, delivered, available)',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const InTransit: Story = {
+  args: {
+    status: 'in_transit',
+    type: 'order',
+  },
+};
+
+export const Delivered: Story = {
+  args: {
+    status: 'delivered',
+    type: 'order',
+  },
+};
+
+export const Cancelled: Story = {
+  args: {
+    status: 'cancelled',
+    type: 'order',
+  },
+};
+
+export const VehicleAvailable: Story = {
+  args: {
+    status: 'available',
+    type: 'vehicle',
+  },
+};
+
+export const DriverOffline: Story = {
+  args: {
+    status: 'offline',
+    type: 'driver',
+  },
+};
+
+export const Priority: Story = {
+  render: () => <PriorityBadge priority="urgent" />,
+};
+
+export const VehicleType: Story = {
+  render: () => <VehicleTypeBadge type="truck" />,
+};