@12-apps/ui 1.5.0 → 1.5.1

package/src/components/layout/SettingsLayout/SettingsLayout.stories.tsx

@@ -1,192 +0,0 @@
-import LanguageOutlined from '@mui/icons-material/LanguageOutlined';
-import LockOutlined from '@mui/icons-material/LockOutlined';
-import NotificationsOutlined from '@mui/icons-material/NotificationsOutlined';
-import PaletteOutlined from '@mui/icons-material/PaletteOutlined';
-import PaymentOutlined from '@mui/icons-material/PaymentOutlined';
-import PersonOutlined from '@mui/icons-material/PersonOutlined';
-import { Box, Stack, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-import { SettingsLayout } from './SettingsLayout';
-import type { SettingsNavGroup } from './SettingsLayout.types';
-
-const GROUPS: SettingsNavGroup[] = [
-  {
-    id: 'account',
-    label: 'Account',
-    items: [
-      { id: 'profile', label: 'Profile', icon: <PersonOutlined fontSize="small" /> },
-      {
-        id: 'security',
-        label: 'Security',
-        icon: <LockOutlined fontSize="small" />,
-        keywords: ['password', 'two-factor', '2fa'],
-      },
-      {
-        id: 'notifications',
-        label: 'Notifications',
-        icon: <NotificationsOutlined fontSize="small" />,
-      },
-    ],
-  },
-  {
-    id: 'workspace',
-    label: 'Workspace',
-    description: 'Preferences that apply to this workspace only.',
-    items: [
-      { id: 'appearance', label: 'Appearance', icon: <PaletteOutlined fontSize="small" /> },
-      {
-        id: 'billing',
-        label: 'Billing',
-        icon: <PaymentOutlined fontSize="small" />,
-        keywords: ['invoice', 'plan', 'payment'],
-      },
-    ],
-  },
-  {
-    id: 'advanced',
-    label: 'Advanced',
-    items: [
-      { id: 'language', label: 'Language & region', icon: <LanguageOutlined fontSize="small" /> },
-    ],
-  },
-];
-
-const ALL_ITEMS = GROUPS.flatMap((group) => group.items);
-
-/** A minimal example panel that reflects the selected item. */
-function ExamplePanel({ itemId }: { itemId: string }): React.JSX.Element {
-  const item = ALL_ITEMS.find((candidate) => candidate.id === itemId) ?? ALL_ITEMS[0];
-  return (
-    <Stack spacing={1} sx={{ p: 1 }}>
-      <Typography variant="h6">{item?.label}</Typography>
-      <Typography variant="body2" color="text.secondary">
-        This central panel renders a custom screen for “{item?.label}”. In a real app each item
-        maps to its own route/component.
-      </Typography>
-      <Box
-        sx={{
-          mt: 1,
-          height: 160,
-          borderRadius: 1,
-          border: (theme) => `1px dashed ${theme.palette.divider}`,
-        }}
-      />
-    </Stack>
-  );
-}
-
-const meta: Meta<typeof SettingsLayout> = {
-  title: 'Layout/SettingsLayout',
-  component: SettingsLayout,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs', 'component:SettingsLayout'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Controlled example: clicking a rail item swaps the central panel. */
-export const Default: Story = {
-  render: () => {
-    const InteractiveSettings = (): React.JSX.Element => {
-      const [active, setActive] = useState('profile');
-      return (
-        <Box sx={{ p: 3, minHeight: 480 }}>
-          <SettingsLayout
-            title="Settings"
-            searchPlaceholder="Search settings"
-            groups={GROUPS}
-            activeItemId={active}
-            onSelectItem={setActive}
-          >
-            <ExamplePanel itemId={active} />
-          </SettingsLayout>
-        </Box>
-      );
-    };
-    return <InteractiveSettings />;
-  },
-};
-
-/** Group headers can carry a one-line description (Facebook-style). */
-export const WithDescriptions: Story = {
-  render: () => (
-    <Box sx={{ p: 3, minHeight: 480 }}>
-      <SettingsLayout title="Settings" groups={GROUPS} activeItemId="billing">
-        <ExamplePanel itemId="billing" />
-      </SettingsLayout>
-    </Box>
-  ),
-};
-
-/** A single group renders as a flat list under the search field. */
-export const FlatSingleGroup: Story = {
-  render: () => (
-    <Box sx={{ p: 3, minHeight: 480 }}>
-      <SettingsLayout
-        title="Settings"
-        groups={[{ id: 'all', label: 'All settings', items: ALL_ITEMS }]}
-        activeItemId="profile"
-      >
-        <ExamplePanel itemId="profile" />
-      </SettingsLayout>
-    </Box>
-  ),
-};
-
-/** Items with `href` + a `linkComponent` render as navigation links. */
-export const AsLinks: Story = {
-  render: () => {
-    const linkedGroups: SettingsNavGroup[] = GROUPS.map((group) => ({
-      ...group,
-      items: group.items.map((item) => ({ ...item, href: `#/settings/${item.id}` })),
-    }));
-    return (
-      <Box sx={{ p: 3, minHeight: 480 }}>
-        <SettingsLayout
-          title="Settings"
-          groups={linkedGroups}
-          activeItemId="security"
-          linkComponent="a"
-        >
-          <ExamplePanel itemId="security" />
-        </SettingsLayout>
-      </Box>
-    );
-  },
-};
-
-/** Items without icons still align cleanly. */
-export const NoIcons: Story = {
-  render: () => {
-    const plainGroups: SettingsNavGroup[] = GROUPS.map((group) => ({
-      ...group,
-      items: group.items.map(({ icon: _icon, ...rest }) => rest),
-    }));
-    return (
-      <Box sx={{ p: 3, minHeight: 480 }}>
-        <SettingsLayout title="Settings" groups={plainGroups} activeItemId="appearance">
-          <ExamplePanel itemId="appearance" />
-        </SettingsLayout>
-      </Box>
-    );
-  },
-};
-
-/** Below `md` the rail stacks full-width above the panel. */
-export const Responsive: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-  },
-  render: () => (
-    <Box sx={{ p: 2, minHeight: 480 }}>
-      <SettingsLayout title="Settings" groups={GROUPS} activeItemId="profile">
-        <ExamplePanel itemId="profile" />
-      </SettingsLayout>
-    </Box>
-  ),
-};

package/src/components/layout/SettingsLayout/SettingsLayout.test.stories.tsx

@@ -1,175 +0,0 @@
-import { Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
-import { SettingsLayout } from './SettingsLayout';
-import type { SettingsNavGroup } from './SettingsLayout.types';
-
-const GROUPS: SettingsNavGroup[] = [
-  {
-    id: 'account',
-    label: 'Account',
-    items: [
-      { id: 'profile', label: 'Profile' },
-      { id: 'security', label: 'Security', keywords: ['password', '2fa'] },
-    ],
-  },
-  {
-    id: 'workspace',
-    label: 'Workspace',
-    description: 'Workspace-only preferences.',
-    items: [{ id: 'billing', label: 'Billing' }],
-  },
-];
-
-const meta: Meta<typeof SettingsLayout> = {
-  title: 'Layout/SettingsLayout/Tests',
-  component: SettingsLayout,
-  parameters: {
-    layout: 'fullscreen',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:SettingsLayout'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const panel = <Typography data-testid="demo-panel">Panel content</Typography>;
-
-export const StructureRender: Story = {
-  name: '🧪 Structure Render Test',
-  render: () => (
-    <SettingsLayout title="Settings" groups={GROUPS} activeItemId="profile">
-      {panel}
-    </SettingsLayout>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Rail, search, groups and panel render', async () => {
-      await expect(canvas.getByTestId('settings-rail')).toBeInTheDocument();
-      await expect(canvas.getByTestId('settings-search')).toBeInTheDocument();
-      await expect(canvas.getByTestId('settings-group-account')).toBeInTheDocument();
-      await expect(canvas.getByTestId('settings-group-workspace')).toBeInTheDocument();
-      await expect(canvas.getByTestId('settings-item-profile')).toBeInTheDocument();
-      await expect(canvas.getByTestId('settings-panel')).toBeInTheDocument();
-      await expect(canvas.getByTestId('demo-panel')).toBeInTheDocument();
-    });
-  },
-};
-
-export const ActiveHighlight: Story = {
-  name: '🎯 Active Item Highlight Test',
-  render: () => (
-    <SettingsLayout title="Settings" groups={GROUPS} activeItemId="security">
-      {panel}
-    </SettingsLayout>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Active item carries aria-current=page', async () => {
-      const active = canvas.getByTestId('settings-item-security');
-      await expect(active).toHaveAttribute('aria-current', 'page');
-      const inactive = canvas.getByTestId('settings-item-profile');
-      await expect(inactive).not.toHaveAttribute('aria-current');
-    });
-  },
-};
-
-export const SelectionCallback: Story = {
-  name: '🖱️ Selection Callback Test',
-  args: { onSelectItem: fn() },
-  render: (args) => (
-    <SettingsLayout title="Settings" groups={GROUPS} activeItemId="profile" {...args}>
-      {panel}
-    </SettingsLayout>
-  ),
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Clicking a button item fires onSelectItem with its id', async () => {
-      await userEvent.click(canvas.getByTestId('settings-item-billing'));
-      await expect(args.onSelectItem).toHaveBeenCalledWith('billing');
-    });
-  },
-};
-
-export const SearchFilters: Story = {
-  name: '🔎 Search Filter Test',
-  render: () => (
-    <SettingsLayout title="Settings" groups={GROUPS} activeItemId="profile">
-      {panel}
-    </SettingsLayout>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const search = canvas.getByTestId('settings-search').querySelector('input');
-
-    await step('Typing a label narrows the rail', async () => {
-      await userEvent.type(search as HTMLInputElement, 'secur');
-      await expect(canvas.getByTestId('settings-item-security')).toBeInTheDocument();
-      await waitFor(() => {
-        expect(canvas.queryByTestId('settings-item-profile')).not.toBeInTheDocument();
-        expect(canvas.queryByTestId('settings-group-workspace')).not.toBeInTheDocument();
-      });
-    });
-
-    await step('Keywords are matched too', async () => {
-      await userEvent.clear(search as HTMLInputElement);
-      await userEvent.type(search as HTMLInputElement, 'password');
-      await expect(canvas.getByTestId('settings-item-security')).toBeInTheDocument();
-    });
-
-    await step('No match shows the empty state', async () => {
-      await userEvent.clear(search as HTMLInputElement);
-      await userEvent.type(search as HTMLInputElement, 'zzzzz');
-      await expect(canvas.getByTestId('settings-empty')).toBeInTheDocument();
-    });
-  },
-};
-
-export const LinkMode: Story = {
-  name: '🔗 Link Mode Test',
-  render: () => {
-    const linked: SettingsNavGroup[] = GROUPS.map((group) => ({
-      ...group,
-      items: group.items.map((item) => ({ ...item, href: `#/settings/${item.id}` })),
-    }));
-    return (
-      <SettingsLayout title="Settings" groups={linked} activeItemId="profile" linkComponent="a">
-        {panel}
-      </SettingsLayout>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Items with href render as anchors', async () => {
-      const item = canvas.getByTestId('settings-item-security');
-      await expect(item.tagName.toLowerCase()).toBe('a');
-      await expect(item).toHaveAttribute('href', '#/settings/security');
-    });
-  },
-};
-
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  render: () => (
-    <SettingsLayout title="Settings" groups={GROUPS} activeItemId="profile">
-      {panel}
-    </SettingsLayout>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Search field is focusable and typeable', async () => {
-      const input = canvas.getByTestId('settings-search').querySelector('input') as HTMLInputElement;
-      await userEvent.click(input);
-      await waitFor(() => expect(input).toHaveFocus());
-      await userEvent.keyboard('pro');
-      await expect(canvas.getByTestId('settings-item-profile')).toBeInTheDocument();
-    });
-  },
-};