@12-apps/ui 1.4.1 → 1.5.1

package/src/components/utility/InfiniteScroll/InfiniteScroll.test.stories.tsx

@@ -1,361 +0,0 @@
-import { Box, ListItem, ListItemText,Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useRef, useState } from 'react';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
-
-import { InfiniteScroll } from './InfiniteScroll';
-
-const meta: Meta<typeof InfiniteScroll> = {
-  title: 'Utility/InfiniteScroll/Tests',
-  component: InfiniteScroll,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:InfiniteScroll'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-interface TestItem {
-  id: number;
-  name: string;
-  description: string;
-}
-
-const generateItems = (start: number, count: number): TestItem[] =>
-  Array.from({ length: count }, (_, i) => ({
-    id: start + i,
-    name: `Item ${start + i + 1}`,
-    description: `Description ${start + i + 1}`,
-  }));
-
-const createTestComponent = (useTestMode = false) => {
-  const TestComponent = () => {
-    const [items, setItems] = useState<TestItem[]>(generateItems(0, 5));
-    const [loading, setLoading] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
-    const triggerRef = useRef<(() => void) | undefined>(undefined);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const loadMoreRef = useRef<(() => Promise<void>) | undefined>(undefined);
-    const loadingRef = useRef(false);
-
-    const loadMore = useCallback(async () => {
-      if (loadingRef.current) return; // Already loading
-      loadingRef.current = true;
-      setLoading(true);
-      await waitFor(() => {
-  // TODO: Add assertion or condition
-  expect(true).toBe(true);
-});
-      const newItems = generateItems(items.length, 3);
-      setItems([...items, ...newItems]);
-      setHasMore(items.length + 3 < 12);
-      setLoading(false);
-      loadingRef.current = false;
-    }, [items]);
-
-    // Expose trigger to container for tests
-    React.useEffect(() => {
-      loadMoreRef.current = loadMore;
-      if (useTestMode && containerRef.current) {
-        (containerRef.current as HTMLElement & { _testTrigger?: () => void; _loadMore?: () => Promise<void> })._testTrigger = triggerRef.current || loadMore;
-        (containerRef.current as HTMLElement & { _testTrigger?: () => void; _loadMore?: () => Promise<void> })._loadMore = loadMore;
-      }
-    });
-
-    return (
-      <Box
-        ref={containerRef}
-        sx={{ width: 400, height: 250, overflow: 'auto', border: '1px solid #ccc' }}
-        data-testid="scroll-container"
-      >
-        <InfiniteScroll
-          hasMore={hasMore}
-          loading={loading}
-          loadMore={loadMore}
-          testMode={useTestMode}
-          testTriggerRef={useTestMode ? triggerRef : undefined}
-        >
-          {items.map((item) => (
-            <ListItem key={item.id} data-testid={`item-${item.id}`} tabIndex={0}>
-              <ListItemText primary={item.name} secondary={item.description} />
-            </ListItem>
-          ))}
-        </InfiniteScroll>
-      </Box>
-    );
-  };
-  return TestComponent;
-};
-
-// ===== INTERACTION TESTS =====
-
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  render: () => {
-    const TestComponent = createTestComponent(false);
-    return <TestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      // Verify initial 5 items are present (IDs 0-4)
-      await expect(canvas.getByTestId('item-0')).toBeInTheDocument();
-      await expect(canvas.getByTestId('item-1')).toBeInTheDocument();
-      await expect(canvas.getByTestId('item-2')).toBeInTheDocument();
-      await expect(canvas.getByTestId('item-3')).toBeInTheDocument();
-      await expect(canvas.getByTestId('item-4')).toBeInTheDocument();
-
-      // Verify next batch items are NOT present yet
-      await waitFor(() => expect(canvas.queryByTestId('item-5')).not.toBeInTheDocument());
-
-      // Verify sentinel is present and properly configured
-      const sentinel = canvas.getByTestId('infinite-scroll-sentinel');
-      await expect(sentinel).toBeInTheDocument();
-
-      // Verify container is scrollable
-      const container = canvas.getByTestId('scroll-container');
-      await expect(container).toBeInTheDocument();
-    });
-  },
-};
-
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  render: () => {
-    const TestComponent = createTestComponent();
-    return <TestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Container focus verification', async () => {
-      const container = canvas.getByTestId('scroll-container');
-      container.setAttribute('tabindex', '0');
-      await userEvent.click(container);
-      await waitFor(() => expect(container).toHaveFocus());
-    });
-  },
-};
-
-export const ScreenReader: Story = {
-  name: '👂 Screen Reader Test',
-  render: () => {
-    const TestComponent = createTestComponent();
-    return <TestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Accessible content verification', async () => {
-      const item = canvas.getByTestId('item-0');
-      await expect(item).toHaveTextContent('Item 1');
-      await expect(item).toHaveTextContent('Description 1');
-    });
-  },
-};
-
-export const FocusManagement: Story = {
-  name: '🎯 Focus Management Test',
-  render: () => {
-    const TestComponent = createTestComponent();
-    return <TestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Focus management verification', async () => {
-      const firstItem = canvas.getByTestId('item-0');
-      await userEvent.click(firstItem);
-      await waitFor(() => expect(firstItem).toHaveFocus());
-
-      const container = canvas.getByTestId('scroll-container');
-      container.setAttribute('tabindex', '0');
-      await userEvent.click(container);
-      await waitFor(() => expect(container).toHaveFocus());
-    });
-  },
-};
-
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-    chromatic: { viewports: [375] },
-  },
-  render: () => {
-    const TestComponent = createTestComponent();
-    return <TestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Mobile viewport verification', async () => {
-      await expect(canvas.getByTestId('scroll-container')).toBeInTheDocument();
-    });
-  },
-};
-
-export const ThemeVariations: Story = {
-  name: '🎨 Theme Variations Test',
-  render: () => {
-    const TestComponent = createTestComponent();
-    return (
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <TestComponent />
-        <TestComponent />
-      </Box>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Multiple theme support verification', async () => {
-      const containers = canvas.getAllByTestId('scroll-container');
-      await expect(containers).toHaveLength(2);
-    });
-  },
-};
-
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  render: () => (
-    <Box>
-      <Typography variant="h6">Normal State</Typography>
-      <Box sx={{ width: 300, height: 150, overflow: 'auto', border: '1px solid #ccc' }}>
-        <InfiniteScroll hasMore={false} loading={false} loadMore={() => {}}>
-          {generateItems(0, 3).map((item) => (
-            <ListItem key={item.id}>
-              <ListItemText primary={item.name} />
-            </ListItem>
-          ))}
-        </InfiniteScroll>
-      </Box>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Visual state verification', async () => {
-      await expect(canvas.getByText('Item 1')).toBeInTheDocument();
-    });
-  },
-};
-
-export const Performance: Story = {
-  name: '⚡ Performance Test',
-  render: () => {
-    const items = generateItems(0, 30);
-    return (
-      <Box>
-        <Typography data-testid="render-time">Render time: 15.00ms</Typography>
-        <Box sx={{ width: 400, height: 200, overflow: 'auto', border: '1px solid #ccc' }}>
-          <InfiniteScroll hasMore={false} loading={false} loadMore={() => {}}>
-            {items.map((item) => (
-              <ListItem key={item.id} data-testid={`perf-item-${item.id}`}>
-                <ListItemText primary={item.name} />
-              </ListItem>
-            ))}
-          </InfiniteScroll>
-        </Box>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Performance verification', async () => {
-      await expect(canvas.getByTestId('perf-item-0')).toBeInTheDocument();
-      await expect(canvas.getByTestId('perf-item-29')).toBeInTheDocument();
-    });
-  },
-};
-
-export const EdgeCases: Story = {
-  name: '🔍 Edge Cases Test',
-  render: () => (
-    <Box sx={{ display: 'flex', gap: 2 }}>
-      <Box>
-        <Typography variant="subtitle2">Empty</Typography>
-        <Box
-          sx={{ width: 200, height: 100, border: '1px solid #ccc' }}
-          data-testid="empty-container"
-        >
-          <InfiniteScroll hasMore={false} loading={false} loadMore={() => {}}>
-            <Typography sx={{ p: 1 }}>No items</Typography>
-          </InfiniteScroll>
-        </Box>
-      </Box>
-      <Box>
-        <Typography variant="subtitle2">Single</Typography>
-        <Box
-          sx={{ width: 200, height: 100, border: '1px solid #ccc' }}
-          data-testid="single-container"
-        >
-          <InfiniteScroll hasMore={false} loading={false} loadMore={() => {}}>
-            <ListItem>
-              <ListItemText primary="Item 1" />
-            </ListItem>
-          </InfiniteScroll>
-        </Box>
-      </Box>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Edge cases verification', async () => {
-      await expect(canvas.getByTestId('empty-container')).toBeInTheDocument();
-      await expect(canvas.getByTestId('single-container')).toBeInTheDocument();
-    });
-  },
-};
-
-export const Integration: Story = {
-  name: '🔗 Integration Test',
-  render: () => {
-    const [items] = useState(generateItems(0, 5));
-    const [search, setSearch] = useState('');
-
-    const filtered = items.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()));
-
-    return (
-      <Box sx={{ width: 400 }}>
-        <input
-          type="text"
-          placeholder="Search..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          data-testid="search-input"
-          style={{ width: '100%', marginBottom: '8px', padding: '4px' }}
-        />
-        <Typography data-testid="item-count">{filtered.length} items</Typography>
-        <Box sx={{ height: 150, overflow: 'auto', border: '1px solid #ccc' }}>
-          <InfiniteScroll hasMore={false} loading={false} loadMore={() => {}}>
-            {filtered.map((item) => (
-              <ListItem key={item.id}>
-                <ListItemText primary={item.name} />
-              </ListItem>
-            ))}
-          </InfiniteScroll>
-        </Box>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Integration functionality verification', async () => {
-      await expect(canvas.getByTestId('search-input')).toBeInTheDocument();
-      await expect(canvas.getByTestId('item-count')).toHaveTextContent('5 items');
-    });
-
-    await step('Search functionality', async () => {
-      await userEvent.type(canvas.getByTestId('search-input'), 'Item 1');
-      await waitFor(() => expect(canvas.getByTestId('item-count')).toHaveTextContent('1 items'));
-    });
-  },
-};

package/src/components/utility/InstallPrompt/InstallPrompt.stories.tsx

@@ -1,118 +0,0 @@
-import { Box, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useEffect } from 'react';
-
-import { InstallPrompt } from './InstallPrompt';
-import type { BeforeInstallPromptEvent } from './InstallPrompt.types';
-
-/**
- * The component listens for a browser event that Storybook will never fire, so
- * every story synthesises one. This is also the shape a host can dispatch from
- * its own early capture script to replay an event that arrived before React
- * mounted.
- */
-const useSyntheticInstallEvent = () => {
-  useEffect(() => {
-    const event = new Event('beforeinstallprompt') as BeforeInstallPromptEvent;
-
-    Object.assign(event, {
-      platforms: ['web'],
-      prompt: () => Promise.resolve(),
-      userChoice: Promise.resolve({ outcome: 'accepted' as const, platform: 'web' }),
-    });
-
-    window.dispatchEvent(event);
-  }, []);
-};
-
-/** Storage is shared across stories; clear it so a dismissal in one does not hide the next. */
-const useCleanDismissalState = (storageKey: string) => {
-  useEffect(() => {
-    window.localStorage.removeItem(storageKey);
-  }, [storageKey]);
-};
-
-const meta: Meta<typeof InstallPrompt> = {
-  title: 'Utility/InstallPrompt',
-  component: InstallPrompt,
-  tags: ['autodocs', 'component:InstallPrompt'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Dismissible PWA install invitation. Captures the Chromium `beforeinstallprompt` ' +
-          'event so the app can offer installation itself, and falls back to Add to Home ' +
-          'Screen instructions on iOS Safari, where no programmatic install exists. Renders ' +
-          'nothing when the app is already installed, was recently dismissed, or the browser ' +
-          'cannot install it.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof InstallPrompt>;
-
-const DefaultComponent = () => {
-  useCleanDismissalState('sb-install-default');
-  useSyntheticInstallEvent();
-
-  return <InstallPrompt storageKey="sb-install-default" />;
-};
-
-export const Default: Story = {
-  render: () => <DefaultComponent />,
-};
-
-const WithDescriptionComponent = () => {
-  useCleanDismissalState('sb-install-described');
-  useSyntheticInstallEvent();
-
-  return (
-    <InstallPrompt
-      storageKey="sb-install-described"
-      title="Install FutureDrink"
-      description="Order faster next time — the menu opens straight from your home screen."
-      installLabel="Install"
-    />
-  );
-};
-
-export const WithDescription: Story = {
-  render: () => <WithDescriptionComponent />,
-};
-
-const LocalisedComponent = () => {
-  useCleanDismissalState('sb-install-ptbr');
-  useSyntheticInstallEvent();
-
-  return (
-    <InstallPrompt
-      storageKey="sb-install-ptbr"
-      title="Instalar o FutureDrink"
-      description="Peça mais rápido na próxima visita, direto da tela de início."
-      installLabel="Instalar"
-      dismissLabel="Dispensar"
-    />
-  );
-};
-
-/** Every string is a prop; this package ships no locale of its own. */
-export const Localised: Story = {
-  render: () => <LocalisedComponent />,
-};
-
-const NotInstallableComponent = () => (
-  <Box>
-    <Typography variant="body2" sx={{ mb: 2 }}>
-      No install event was dispatched, so the component renders nothing. This is what a browser
-      with no install route, an already-installed app, and a recent dismissal all look like.
-    </Typography>
-    <InstallPrompt storageKey="sb-install-absent" />
-  </Box>
-);
-
-export const NotInstallable: Story = {
-  render: () => <NotInstallableComponent />,
-};

package/src/components/utility/InstallPrompt/InstallPrompt.test.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useEffect } from 'react';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
-
-import { InstallPrompt } from './InstallPrompt';
-import type { BeforeInstallPromptEvent } from './InstallPrompt.types';
-
-const meta: Meta<typeof InstallPrompt> = {
-  title: 'Utility/InstallPrompt/Tests',
-  component: InstallPrompt,
-  parameters: {
-    layout: 'padded',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:InstallPrompt'],
-};
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-const dispatchInstallEvent = () => {
-  const event = new Event('beforeinstallprompt') as BeforeInstallPromptEvent;
-
-  Object.assign(event, {
-    platforms: ['web'],
-    prompt: () => Promise.resolve(),
-    userChoice: Promise.resolve({ outcome: 'accepted' as const, platform: 'web' }),
-  });
-
-  window.dispatchEvent(event);
-};
-
-const Installable = ({ storageKey }: { storageKey: string }) => {
-  useEffect(() => {
-    window.localStorage.removeItem(storageKey);
-    dispatchInstallEvent();
-  }, [storageKey]);
-
-  return <InstallPrompt storageKey={storageKey} title="Install this app" />;
-};
-
-// ================================
-// INTERACTION TESTS
-// ================================
-
-export const AppearsWhenInstallable: Story = {
-  render: () => <Installable storageKey="sb-test-appears" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await waitFor(async () => {
-      await expect(canvas.getByTestId('install-prompt')).toBeInTheDocument();
-    });
-    await expect(canvas.getByTestId('install-prompt-install')).toBeInTheDocument();
-  },
-};
-
-export const DismissHidesPrompt: Story = {
-  render: () => <Installable storageKey="sb-test-dismiss" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await waitFor(async () => {
-      await expect(canvas.getByTestId('install-prompt-dismiss')).toBeInTheDocument();
-    });
-    await userEvent.click(canvas.getByTestId('install-prompt-dismiss'));
-
-    await waitFor(async () => {
-      await expect(canvas.queryByTestId('install-prompt')).not.toBeInTheDocument();
-    });
-  },
-};
-
-export const HiddenWithoutInstallEvent: Story = {
-  render: () => <InstallPrompt storageKey="sb-test-hidden" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await waitFor(async () => {
-      await expect(canvas.queryByTestId('install-prompt')).not.toBeInTheDocument();
-    });
-  },
-};

package/src/components/utility/InstallPrompt/__tests__/InstallPrompt.ios.test.tsx

@@ -1,65 +0,0 @@
-/**
- * `InstallPrompt` on iOS Safari.
- *
- * Its own file because the platform probe has to be replaced at module scope,
- * and `vi.mock` is hoisted over the whole file — the Chromium cases in
- * `usePwaInstall.test.tsx` must keep the real probe.
- *
- * What matters here is the ABSENCE of the install button. Safari exposes no way
- * to open its own Add to Home Screen sheet, so a button on iOS would be a
- * control that does nothing when tapped; the instructions take its place.
- */
-import { render, screen, waitFor } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import { InstallPrompt } from '../index';
-
-vi.mock('../InstallPrompt.helpers', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../InstallPrompt.helpers')>();
-
-  return { ...actual, resolveInstallPlatform: () => 'ios' as const };
-});
-
-describe('InstallPrompt on iOS Safari', () => {
-  afterEach(() => {
-    window.localStorage.clear();
-  });
-
-  it('shows without waiting for an event that iOS never fires', async () => {
-    render(<InstallPrompt title="Instalar FutureDrink" />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt')).toBeInTheDocument();
-    });
-    expect(screen.getByTestId('install-prompt-title')).toHaveTextContent('Instalar FutureDrink');
-  });
-
-  it('offers instructions instead of an install button', async () => {
-    render(<InstallPrompt />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt-ios-instructions')).toBeInTheDocument();
-    });
-    await waitFor(() => {
-      expect(screen.queryByTestId('install-prompt-install')).not.toBeInTheDocument();
-    });
-  });
-
-  it('accepts host-supplied instruction copy', async () => {
-    render(<InstallPrompt iosInstructions={<span>Toque em Compartilhar</span>} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt-ios-instructions')).toHaveTextContent(
-        'Toque em Compartilhar',
-      );
-    });
-  });
-
-  it('can still be dismissed', async () => {
-    render(<InstallPrompt />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt-dismiss')).toBeInTheDocument();
-    });
-  });
-});