fix: resolve integration test assertions and add Storybook design tokens

Author: sudo-robi

contracts/tests/integration_tests.rs

@@ -216,7 +216,7 @@ fn integration_rebalance_rejects_corrupted_allocations() {
     });
 
     let result = client.try_execute_rebalance(&pid, &Map::new(&env));
-    assert_eq!(result, Err(Ok(Error::InvalidAllocationSum)));
+    assert_eq!(result, Err(Error::InvalidAllocationSum));
 }
 
 // ── Portfolio value USD view (#862) ────────────────────────────────────
@@ -319,7 +319,7 @@ fn integration_emergency_stop_blocks_rebalance() {
     });
 
     let result = client.try_execute_rebalance(&pid, &Map::new(&env));
-    assert_eq!(result, Err(Ok(Error::EmergencyStop)));
+    assert_eq!(result, Err(Error::EmergencyStop));
 
     client.set_emergency_stop(&false);
     let result = client.try_execute_rebalance(&pid, &Map::new(&env));

frontend/src/stories/AllocationSlider.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AllocationSlider } from '../components/ui/AllocationSlider'
+
+const meta: Meta<typeof AllocationSlider> = {
+  title: 'Components/AllocationSlider',
+  component: AllocationSlider,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: { action: 'changed' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof AllocationSlider>
+
+export const Default: Story = {
+  args: { label: 'XLM allocation', value: 40 },
+}
+
+export const Disabled: Story = {
+  args: { label: 'BTC allocation', value: 30, disabled: true },
+}

frontend/src/stories/Button.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from '../components/ui/Button'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'danger', 'ghost'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: { children: 'Primary action', variant: 'primary' },
+}
+
+export const Secondary: Story = {
+  args: { children: 'Secondary action', variant: 'secondary' },
+}
+
+export const Danger: Story = {
+  args: { children: 'Delete', variant: 'danger' },
+}
+
+export const Loading: Story = {
+  args: { children: 'Saving...', loading: true, disabled: true },
+}
+
+export const Disabled: Story = {
+  args: { children: 'Disabled', disabled: true },
+}

frontend/src/stories/DesignTokens.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta = {
+  title: 'Design Tokens',
+  tags: ['docs'],
+  parameters: {
+    docs: { description: { component: 'Core design tokens used across the frontend.' } },
+  },
+}
+export default meta
+
+type Story = StoryObj<{ tokens: Record<string, string> }>
+
+export const Colors: Story = {
+  args: {
+    tokens: {
+      background: 'bg-gray-50 dark:bg-gray-900',
+      surface: 'bg-white dark:bg-gray-800',
+      border: 'border-gray-200 dark:border-gray-700',
+      mutedText: 'text-gray-500 dark:text-gray-400',
+      primaryText: 'text-gray-900 dark:text-gray-100',
+      primaryAction: 'bg-blue-600 hover:bg-blue-700 text-white',
+      danger: 'bg-red-600 hover:bg-red-700 text-white',
+    },
+  },
+  render: (args) => (
+    <div className="grid grid-cols-2 gap-4">
+      {Object.entries(args.tokens).map(([key, value]) => (
+        <div key={key} className="flex items-center gap-3">
+          <span className="rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-600">{key}</span>
+          <span className={`rounded-md px-2 py-1 text-xs ${value}`}>Aa</span>
+        </div>
+      ))}
+    </div>
+  ),
+}

frontend/src/stories/Header.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Header } from './Header';
+
+const meta = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

frontend/src/stories/Modal.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Modal } from '../components/ui/Modal'
+import { Button } from '../components/ui/Button'
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof Modal>
+
+export const Default: Story = {
+  args: {
+    open: true,
+    title: 'Delete your data?',
+    description: 'This will reset the demo portfolio to its default state.',
+    children: 'Proceeding will discard unsaved allocations.',
+    footer: (
+      <>
+        <Button variant="secondary">Cancel</Button>
+        <Button variant="danger">Confirm</Button>
+      </>
+    ),
+  },
+}

frontend/src/stories/Page.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Page } from './Page';
+
+const meta = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedOut: Story = {};
+
+// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

frontend/src/stories/PortfolioCard.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { PortfolioCard } from '../components/ui/PortfolioCard'
+import { Button } from '../components/ui/Button'
+
+const meta: Meta<typeof PortfolioCard> = {
+  title: 'Components/PortfolioCard',
+  component: PortfolioCard,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof PortfolioCard>
+
+export const Default: Story = {
+  args: {
+    title: 'Total Value',
+    value: '$10,000.00',
+    change: 3.4,
+    subtitle: 'Last rebalanced 2 hours ago',
+    actions: <Button variant="secondary">Export</Button>,
+  },
+}

frontend/src/stories/Toast.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Toast } from '../components/ui/Toast'
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Toast',
+  component: Toast,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof Toast>
+
+export const Info: Story = { args: { title: 'Info message', description: 'Something you should know.', tone: 'info' } }
+export const Success: Story = { args: { title: 'Success', description: 'Operation completed.', tone: 'success' } }
+export const Warning: Story = { args: { title: 'Warning', description: 'Please review before continuing.', tone: 'warning' } }
+export const Error: Story = { args: { title: 'Error', description: 'Something failed.', tone: 'error' } }