@12-apps/ui 1.0.0 → 1.3.1

package/src/components/navigation/NavigationMenu/stories/NavigationMenu.test.stories.tsx

@@ -1,13 +1,11 @@
-import {
-  Analytics,
-  Dashboard,
-  Home,
-  Inventory,
-  Notifications,
-  People,
-  Settings,
-  ShoppingCart,
-} from '@mui/icons-material';
+import Analytics from '@mui/icons-material/Analytics';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Home from '@mui/icons-material/Home';
+import Inventory from '@mui/icons-material/Inventory';
+import Notifications from '@mui/icons-material/Notifications';
+import People from '@mui/icons-material/People';
+import Settings from '@mui/icons-material/Settings';
+import ShoppingCart from '@mui/icons-material/ShoppingCart';
 import { Box, createTheme,ThemeProvider, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
@@ -226,10 +224,13 @@ export const KeyboardNavigation: Story = {
     // Test basic keyboard interactions
     const dashboardItem = canvas.getByText('Dashboard').closest('button, a, [role="button"]') as HTMLElement;
     if (dashboardItem) {
-      dashboardItem.focus();
+      // Dashboard is the first item in the menu, so one tab reaches it. Tabbing
+      // rather than calling .focus() keeps this a keyboard journey, and the tab
+      // below continues it to the next item.
+      await userEvent.tab();
 
       // Test that item can receive focus
-      expect(dashboardItem).toHaveFocus();
+      await waitFor(() => expect(dashboardItem).toHaveFocus());
 
       // Test tab navigation to next item
       await userEvent.tab();
@@ -313,10 +314,11 @@ export const FocusManagement: Story = {
 
     // Test focus ring visibility
     const dashboardItem = canvas.getByText('Dashboard').closest('a, div[role="button"]') as HTMLElement;
-    dashboardItem?.focus();
+    // Dashboard is the first focusable item in the menu.
+    await userEvent.tab();
 
     // Check focus is visible
-    expect(dashboardItem).toHaveFocus();
+    await waitFor(() => expect(dashboardItem).toHaveFocus());
 
     // Test focus trap in expanded menu
     const analyticsItem = canvas.getByText('Analytics');
@@ -326,10 +328,13 @@ export const FocusManagement: Story = {
       expect(canvas.getByText('Overview')).toBeInTheDocument();
     });
 
-    // Focus should move to submenu items
+    // The submenu item is reachable and rendered. Whether focus moves into the
+    // submenu automatically is deliberately NOT asserted here: the previous
+    // version called .focus() itself and then checked the element was focused,
+    // which proved only that the DOM honours focus(), never that the component
+    // moved it.
     const overviewItem = canvas.getByText('Overview').closest('a, div[role="button"]') as HTMLElement;
-    overviewItem?.focus();
-    expect(overviewItem).toHaveFocus();
+    expect(overviewItem).toBeVisible();
   },
 };
 
@@ -492,8 +497,9 @@ export const PerformanceTest: Story = {
       canvas.getByRole('list').closest('[role="list"]') || canvas.getByRole('list');
     expect(menuContainer).toBeTruthy();
 
-    // Basic scroll behavior test - check if container is scrollable
-    expect(menuContainer.scrollHeight).toBeGreaterThanOrEqual(menuContainer.clientHeight);
+    // Scrollability is not asserted: scrollHeight >= clientHeight holds for every
+    // element that has ever been laid out, so the check could not fail, and both
+    // figures move with the runner's window size.
   },
 };
 
@@ -896,11 +902,9 @@ export const AdvancedKeyboardNavigation: Story = {
     const canvas = within(canvasElement);
 
     // Focus first menu item
+    // No pre-focus needed: the step below clicks this button directly.
     const firstMenuItem = canvas.getByText('Dashboard').closest('button');
-    if (firstMenuItem) {
-      firstMenuItem.focus();
-      await expect(firstMenuItem).toHaveFocus();
-    }
+    expect(firstMenuItem).toBeInTheDocument();
 
     // Test Enter key activation - click the focused button directly
     if (firstMenuItem) {

package/src/components/navigation/NavigationMenu/stories/NavigationMenuHorizontal.stories.tsx

@@ -1,16 +1,14 @@
-import {
-  Analytics,
-  Business,
-  Dashboard,
-  Help,
-  Home,
-  Inventory,
-  Notifications,
-  People,
-  Report,
-  Settings,
-  ShoppingCart,
-} from '@mui/icons-material';
+import Analytics from '@mui/icons-material/Analytics';
+import Business from '@mui/icons-material/Business';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Help from '@mui/icons-material/Help';
+import Home from '@mui/icons-material/Home';
+import Inventory from '@mui/icons-material/Inventory';
+import Notifications from '@mui/icons-material/Notifications';
+import People from '@mui/icons-material/People';
+import Report from '@mui/icons-material/Report';
+import Settings from '@mui/icons-material/Settings';
+import ShoppingCart from '@mui/icons-material/ShoppingCart';
 import { Box, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 

package/src/components/navigation/NavigationMenu/stories/NavigationMenuVertical.stories.tsx

@@ -1,14 +1,12 @@
-import {
-  Analytics,
-  Business,
-  Dashboard,
-  Home,
-  Inventory,
-  People,
-  Report,
-  Settings,
-  ShoppingCart,
-} from '@mui/icons-material';
+import Analytics from '@mui/icons-material/Analytics';
+import Business from '@mui/icons-material/Business';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Home from '@mui/icons-material/Home';
+import Inventory from '@mui/icons-material/Inventory';
+import People from '@mui/icons-material/People';
+import Report from '@mui/icons-material/Report';
+import Settings from '@mui/icons-material/Settings';
+import ShoppingCart from '@mui/icons-material/ShoppingCart';
 import { Avatar,Box, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 

package/src/components/navigation/Pagination/Pagination.helpers.tsx

@@ -0,0 +1,85 @@
+import FirstPage from '@mui/icons-material/FirstPage';
+import LastPage from '@mui/icons-material/LastPage';
+import NavigateBefore from '@mui/icons-material/NavigateBefore';
+import NavigateNext from '@mui/icons-material/NavigateNext';
+import React from 'react';
+
+import type { PaginationProps } from './Pagination.types';
+
+type PaginationDefaultedKeys =
+  | 'variant'
+  | 'size'
+  | 'boundaryCount'
+  | 'siblingCount'
+  | 'hideNextButton'
+  | 'hidePrevButton'
+  | 'showFirstButton'
+  | 'showLastButton'
+  | 'firstIcon'
+  | 'lastIcon'
+  | 'previousIcon'
+  | 'nextIcon'
+  | 'disabled'
+  | 'color'
+  | 'showPageInfo'
+  | 'pageInfoFormat'
+  | 'showItemsPerPage'
+  | 'itemsPerPageOptions'
+  | 'itemsPerPage';
+
+export type ResolvedPaginationProps = PaginationProps &
+  Required<Pick<PaginationProps, PaginationDefaultedKeys>>;
+
+const PAGINATION_DEFAULTS: Pick<PaginationProps, PaginationDefaultedKeys> = {
+  variant: 'default',
+  size: 'md',
+  boundaryCount: 1,
+  siblingCount: 1,
+  hideNextButton: false,
+  hidePrevButton: false,
+  showFirstButton: false,
+  showLastButton: false,
+  firstIcon: <FirstPage />,
+  lastIcon: <LastPage />,
+  previousIcon: <NavigateBefore />,
+  nextIcon: <NavigateNext />,
+  disabled: false,
+  color: 'primary',
+  showPageInfo: false,
+  pageInfoFormat: (page: number, count: number) => `Page ${page} of ${count}`,
+  showItemsPerPage: false,
+  itemsPerPageOptions: [10, 25, 50, 100],
+  itemsPerPage: 10,
+};
+
+// Strips explicitly-undefined props before the merge, so `prop={undefined}` still
+// falls back to the default exactly as a destructuring default would. Applied as
+// a merge rather than destructuring defaults, which would otherwise put nineteen
+// branches into the component's own complexity budget.
+export const resolvePaginationProps = (props: PaginationProps): ResolvedPaginationProps =>
+  ({
+    ...PAGINATION_DEFAULTS,
+    ...(Object.fromEntries(
+      Object.entries(props).filter(([, value]) => value !== undefined),
+    ) as Partial<PaginationProps>),
+  }) as ResolvedPaginationProps;
+
+export const makeTestId =
+  (dataTestId?: string) =>
+  (suffix: string): string =>
+    dataTestId ? `${dataTestId}-${suffix}` : `pagination-${suffix}`;
+
+// Our three sizes map onto MUI's own scale.
+export const muiSizeFor = (size: string): 'small' | 'medium' | 'large' => {
+  if (size === 'sm') return 'small';
+  if (size === 'lg') return 'large';
+  return 'medium';
+};
+
+// One scale for every place that sizes something off the same prop. Kept
+// generic so spacing values stay in MUI units rather than being converted.
+export const scaleFor = <T,>(size: string, scale: [T, T, T]): T => {
+  if (size === 'sm') return scale[0];
+  if (size === 'lg') return scale[2];
+  return scale[1];
+};

package/src/components/navigation/Pagination/Pagination.md

@@ -156,7 +156,8 @@ function CompleteExample() {
 ### With Custom Icons
 
 ```tsx
-import { ArrowBack, ArrowForward } from '@mui/icons-material';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 
 <Pagination
   page={1}

package/src/components/navigation/Pagination/Pagination.stories.tsx

@@ -1,9 +1,7 @@
-import {
-  KeyboardArrowLeft,
-  KeyboardArrowRight,
-  KeyboardDoubleArrowLeft,
-  KeyboardDoubleArrowRight,
-} from '@mui/icons-material';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardDoubleArrowLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import KeyboardDoubleArrowRight from '@mui/icons-material/KeyboardDoubleArrowRight';
 import { Box, Divider,Paper, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';

package/src/components/navigation/Pagination/Pagination.styles.ts

@@ -0,0 +1,135 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material/styles';
+
+const ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
+  sm: (theme) => ({
+      fontSize: '0.875rem',
+      minWidth: 28,
+      height: 28,
+      padding: theme.spacing(0.25, 0.5) }),
+  lg: (theme) => ({
+      fontSize: '1.125rem',
+      minWidth: 44,
+      height: 44,
+      padding: theme.spacing(1, 1.5) }) };
+
+// One variant applies at a time, so a lookup replaces the mutually exclusive
+// spreads.
+const ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSObject> = {
+  default: (theme, _customSize) => ({
+      borderRadius: theme.spacing(1),
+      '&:hover': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        transform: 'translateY(-1px)',
+        boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}` },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+        '&:hover': {
+          backgroundColor: theme.palette.primary.dark,
+          transform: 'translateY(-2px)' } } }),
+  rounded: (theme, customSize) => ({
+      borderRadius: '50%',
+      minWidth: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
+      width: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
+      '&:hover': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        transform: 'scale(1.1)',
+        boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}` },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        transform: 'scale(1.05)',
+        boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
+        '&:hover': {
+          backgroundColor: theme.palette.primary.dark,
+          transform: 'scale(1.15)' } } }),
+  dots: (theme, customSize) => ({
+      borderRadius: '50%',
+      minWidth: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
+      width: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
+      height: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
+      fontSize: 0,
+      backgroundColor: alpha(theme.palette.text.secondary, 0.3),
+      '&:hover': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.5),
+        transform: 'scale(1.3)' },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.primary.main,
+        transform: 'scale(1.2)',
+        '&:hover': {
+          backgroundColor: theme.palette.primary.dark,
+          transform: 'scale(1.4)' } },
+      '&.MuiPaginationItem-previousNext, &.MuiPaginationItem-firstLast': {
+        display: 'none' } }),
+  minimal: (theme, _customSize) => ({
+      borderRadius: theme.spacing(0.5),
+      backgroundColor: 'transparent',
+      color: theme.palette.text.secondary,
+      padding: theme.spacing(0.5, 1),
+      '&:hover': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.04),
+        color: theme.palette.primary.main },
+      '&.Mui-selected': {
+        backgroundColor: 'transparent',
+        color: theme.palette.primary.main,
+        fontWeight: 600,
+        position: 'relative',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          bottom: 0,
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: '60%',
+          height: 2,
+          backgroundColor: theme.palette.primary.main,
+          borderRadius: 1 } } }) };
+
+const itemSizeStyles = (theme: Theme, customSize?: string): CSSObject =>
+  customSize ? (ITEM_SIZE_STYLES[customSize]?.(theme) ?? {}) : {};
+
+const itemVariantStyles = (theme: Theme, customVariant?: string, customSize?: string): CSSObject =>
+  customVariant ? (ITEM_VARIANTS[customVariant]?.(theme, customSize) ?? {}) : {};
+
+// The pagination list's own styling, lifted out so the styled() callback is a
+// single spread.
+export const paginationStyles = ({
+  theme,
+  customVariant,
+  customSize }: {
+  theme: Theme;
+  customVariant?: string;
+  customSize?: string;
+}): CSSObject => ({
+  '& .MuiPagination-ul': {
+    gap: customVariant === 'minimal' ? theme.spacing(0.5) : theme.spacing(1) },
+
+  '& .MuiPaginationItem-root': {
+    ...itemSizeStyles(theme, customSize),
+    ...itemVariantStyles(theme, customVariant, customSize),
+    transition: 'all 0.2s ease',
+    fontWeight: 500,
+
+
+
+
+
+    // Default variant (flat design)
+
+
+    // Rounded variant
+
+
+    // Dots variant (minimal circular dots)
+
+
+    // Minimal variant (text-only)
+
+  },
+
+  // Hide ellipsis for dots variant
+  ...(customVariant === 'dots' && {
+    '& .MuiPaginationItem-ellipsis': {
+      display: 'none' } }) });