@12-apps/ui 1.5.0 → 1.5.1

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

@@ -1,271 +0,0 @@
-/**
- * `usePwaInstall` / `InstallPrompt` — the machinery that turns an installable
- * site into one that actually asks.
- *
- * The regression this file exists for: a manifest and a service worker satisfy
- * every installability criterion a browser checks, and still produce no prompt
- * of any kind, because nothing in the page captures `beforeinstallprompt`. The
- * `preventDefault` case below guards that hole — without that call the browser
- * reclaims the event and the app can never install itself.
- *
- * The iOS branch lives in `InstallPrompt.ios.test.tsx`, which needs a
- * module-level mock this file must not carry.
- */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import { InstallPrompt } from '../index';
-import {
-  isDismissalActive,
-  isIosSafariAgent,
-  readDismissedAt,
-  writeDismissedAt,
-} from '../InstallPrompt.helpers';
-import type { BeforeInstallPromptEvent } from '../InstallPrompt.types';
-import { usePwaInstall } from '../usePwaInstall';
-
-const STORAGE_KEY = 'pwa-install-dismissed';
-
-// A fixed clock. Deriving expectations from the real `Date.now()` would make
-// them depend on how long the test took to run.
-const NOW = 1_700_000_000_000;
-const DAY = 86_400_000;
-
-type MockPromptEvent = BeforeInstallPromptEvent & { prompt: ReturnType<typeof vi.fn> };
-
-/**
- * Stands in for the Chromium event: `prompt()` records that it was called and
- * `userChoice` resolves with whatever answer the test wants the user to give.
- */
-const createPromptEvent = (outcome: 'accepted' | 'dismissed'): MockPromptEvent => {
-  const event = new Event('beforeinstallprompt') as MockPromptEvent;
-
-  Object.assign(event, {
-    platforms: ['web'],
-    prompt: vi.fn().mockResolvedValue(undefined),
-    userChoice: Promise.resolve({ outcome, platform: 'web' }),
-  });
-
-  return event;
-};
-
-/** Renders the hook's state into the DOM so assertions can read it directly. */
-const HookProbe = ({ dismissForDays }: { dismissForDays?: number }) => {
-  const { canInstall, platform, isInstalled } = usePwaInstall({ dismissForDays });
-
-  return (
-    <div>
-      <span data-testid="can-install">{String(canInstall)}</span>
-      <span data-testid="platform">{platform}</span>
-      <span data-testid="is-installed">{String(isInstalled)}</span>
-    </div>
-  );
-};
-
-const IPHONE_SAFARI =
-  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1';
-const IPADOS_SAFARI =
-  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15';
-const CHROME_ON_IOS =
-  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0 Mobile/15E148 Safari/604.1';
-const DESKTOP_CHROME =
-  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
-
-describe('isIosSafariAgent', () => {
-  it('detects Safari on iPhone', () => {
-    expect(isIosSafariAgent(IPHONE_SAFARI, 5)).toBe(true);
-  });
-
-  it('detects iPadOS, which reports a Macintosh agent with touch points', () => {
-    expect(isIosSafariAgent(IPADOS_SAFARI, 5)).toBe(true);
-  });
-
-  it('rejects desktop Safari, which shares that agent but has no touch points', () => {
-    expect(isIosSafariAgent(IPADOS_SAFARI, 0)).toBe(false);
-  });
-
-  it('rejects Chrome on iOS, which cannot add to the home screen at all', () => {
-    expect(isIosSafariAgent(CHROME_ON_IOS, 5)).toBe(false);
-  });
-
-  it('rejects desktop Chrome', () => {
-    expect(isIosSafariAgent(DESKTOP_CHROME, 0)).toBe(false);
-  });
-});
-
-describe('InstallPrompt dismissal storage', () => {
-  afterEach(() => {
-    window.localStorage.clear();
-  });
-
-  it('reports no dismissal when nothing was ever stored', () => {
-    expect(readDismissedAt(STORAGE_KEY)).toBeNull();
-    expect(isDismissalActive(null, 30, NOW)).toBe(false);
-  });
-
-  it('round-trips a dismissal timestamp', () => {
-    writeDismissedAt(STORAGE_KEY, NOW);
-    expect(readDismissedAt(STORAGE_KEY)).toBe(NOW);
-  });
-
-  it('ignores a corrupted stored value instead of throwing', () => {
-    window.localStorage.setItem(STORAGE_KEY, 'not-a-number');
-    expect(readDismissedAt(STORAGE_KEY)).toBeNull();
-  });
-
-  it('keeps a dismissal active inside the window and expires it after', () => {
-    expect(isDismissalActive(NOW, 30, NOW + 29 * DAY)).toBe(true);
-    expect(isDismissalActive(NOW, 30, NOW + 31 * DAY)).toBe(false);
-  });
-
-  it('treats dismissForDays of 0 as permanent', () => {
-    expect(isDismissalActive(NOW, 0, NOW + 3650 * DAY)).toBe(true);
-  });
-
-  it('treats a future timestamp as active so a wound-back clock cannot re-prompt', () => {
-    expect(isDismissalActive(NOW + DAY, 30, NOW)).toBe(true);
-  });
-});
-
-describe('usePwaInstall', () => {
-  afterEach(() => {
-    window.localStorage.clear();
-  });
-
-  it('cannot install before the browser offers a prompt', async () => {
-    render(<HookProbe />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('platform')).toHaveTextContent('unsupported');
-    });
-    expect(screen.getByTestId('can-install')).toHaveTextContent('false');
-  });
-
-  it('becomes installable once beforeinstallprompt fires', async () => {
-    render(<HookProbe />);
-    fireEvent(window, createPromptEvent('accepted'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('can-install')).toHaveTextContent('true');
-    });
-    expect(screen.getByTestId('platform')).toHaveTextContent('prompt');
-  });
-
-  it('calls preventDefault so the deferred handle survives', async () => {
-    render(<HookProbe />);
-
-    const event = createPromptEvent('accepted');
-    const preventDefault = vi.spyOn(event, 'preventDefault');
-    fireEvent(window, event);
-
-    await waitFor(() => {
-      expect(preventDefault).toHaveBeenCalled();
-    });
-  });
-
-  // `dismissForDays: 0` makes the stored dismissal permanent, so this asserts
-  // that the hook consults storage at all without depending on the wall clock.
-  // The expiry arithmetic itself is covered above against a fixed clock.
-  it('stays suppressed while a dismissal is stored', async () => {
-    writeDismissedAt(STORAGE_KEY, NOW);
-
-    render(<HookProbe dismissForDays={0} />);
-    fireEvent(window, createPromptEvent('accepted'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('platform')).toHaveTextContent('prompt');
-    });
-    expect(screen.getByTestId('can-install')).toHaveTextContent('false');
-  });
-
-  it('reports installed and stays suppressed after appinstalled', async () => {
-    render(<HookProbe />);
-    fireEvent(window, createPromptEvent('accepted'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('can-install')).toHaveTextContent('true');
-    });
-
-    fireEvent(window, new Event('appinstalled'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('is-installed')).toHaveTextContent('true');
-    });
-    expect(screen.getByTestId('can-install')).toHaveTextContent('false');
-  });
-});
-
-describe('InstallPrompt', () => {
-  afterEach(() => {
-    window.localStorage.clear();
-  });
-
-  it('renders nothing until the browser offers a prompt', async () => {
-    render(<InstallPrompt />);
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('install-prompt')).not.toBeInTheDocument();
-    });
-  });
-
-  it('appears with an install button once the prompt is captured', async () => {
-    render(<InstallPrompt title="Install FutureDrink" />);
-    fireEvent(window, createPromptEvent('accepted'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt')).toBeInTheDocument();
-    });
-    expect(screen.getByTestId('install-prompt-install')).toBeInTheDocument();
-  });
-
-  it('fires the native prompt and reports the accepted outcome', async () => {
-    const onInstall = vi.fn();
-
-    render(<InstallPrompt onInstall={onInstall} />);
-    const event = createPromptEvent('accepted');
-    fireEvent(window, event);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt-install')).toBeInTheDocument();
-    });
-    fireEvent.click(screen.getByTestId('install-prompt-install'));
-
-    await waitFor(() => {
-      expect(onInstall).toHaveBeenCalledWith('accepted');
-    });
-    expect(event.prompt).toHaveBeenCalledTimes(1);
-  });
-
-  it('records a dismissal when the user declines the native dialog', async () => {
-    render(<InstallPrompt onInstall={vi.fn()} />);
-    fireEvent(window, createPromptEvent('dismissed'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt-install')).toBeInTheDocument();
-    });
-    fireEvent.click(screen.getByTestId('install-prompt-install'));
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('install-prompt')).not.toBeInTheDocument();
-    });
-    expect(readDismissedAt(STORAGE_KEY)).not.toBeNull();
-  });
-
-  it('hides and persists the dismissal when the close button is used', async () => {
-    const onDismiss = vi.fn();
-
-    render(<InstallPrompt onDismiss={onDismiss} />);
-    fireEvent(window, createPromptEvent('accepted'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('install-prompt-dismiss')).toBeInTheDocument();
-    });
-    fireEvent.click(screen.getByTestId('install-prompt-dismiss'));
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('install-prompt')).not.toBeInTheDocument();
-    });
-    expect(onDismiss).toHaveBeenCalledTimes(1);
-    expect(readDismissedAt(STORAGE_KEY)).not.toBeNull();
-  });
-});

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

@@ -1,340 +0,0 @@
-import { Alert,Box, Button, Paper, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-
-import { Portal } from './Portal';
-
-const meta: Meta<typeof Portal> = {
-  title: 'Utility/Portal',
-  component: Portal,
-  tags: ['autodocs', 'component:Portal'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Portal component for rendering content outside the normal DOM hierarchy, useful for modals, tooltips, and overlays.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Portal>;
-
-const BasicComponent = () => {
-  const [showPortal, setShowPortal] = useState(false);
-
-  return (
-    <Box>
-      <Paper sx={{ p: 3, mb: 2 }}>
-        <Typography variant="h6" gutterBottom>
-          Component Container
-        </Typography>
-        <Typography paragraph>This content is in the normal DOM hierarchy.</Typography>
-        <Button variant="contained" onClick={() => setShowPortal(!showPortal)}>
-          {showPortal ? 'Hide' : 'Show'} Portal Content
-        </Button>
-      </Paper>
-
-      {showPortal && (
-        <Portal>
-          <Box
-            sx={{
-              position: 'fixed',
-              top: 16,
-              right: 16,
-              zIndex: 9999,
-              maxWidth: 300,
-            }}
-          >
-            <Alert severity="info" onClose={() => setShowPortal(false)}>
-              <Typography variant="subtitle2">Portal Content</Typography>
-              This content is rendered outside the normal DOM hierarchy using a Portal. It&apos;s
-              positioned fixed at the top-right corner.
-            </Alert>
-          </Box>
-        </Portal>
-      )}
-    </Box>
-  );
-};
-
-export const Basic: Story = {
-  render: () => <BasicComponent />,
-};
-
-const CustomContainerComponent = () => {
-  const [customContainer, setCustomContainer] = useState<HTMLElement | null>(null);
-  const [showPortal, setShowPortal] = useState(false);
-
-  return (
-    <Box sx={{ display: 'flex', gap: 3 }}>
-      <Paper sx={{ p: 3, flex: 1 }}>
-        <Typography variant="h6" gutterBottom>
-          Source Container
-        </Typography>
-        <Typography paragraph>This is where the Portal component is defined.</Typography>
-        <Button
-          variant="contained"
-          onClick={() => setShowPortal(!showPortal)}
-          disabled={!customContainer}
-        >
-          {showPortal ? 'Hide' : 'Show'} Portal
-        </Button>
-      </Paper>
-
-      <Paper
-        sx={{ p: 3, flex: 1, bgcolor: 'primary.light', position: 'relative' }}
-        ref={(el) => setCustomContainer(el)}
-      >
-        <Typography variant="h6" gutterBottom color="primary.contrastText">
-          Target Container
-        </Typography>
-        <Typography paragraph color="primary.contrastText">
-          Portal content will appear here even though it&apos;s defined elsewhere.
-        </Typography>
-
-        {showPortal && customContainer && (
-          <Portal container={customContainer}>
-            <Box
-              sx={{
-                position: 'absolute',
-                bottom: 16,
-                right: 16,
-                maxWidth: 200,
-              }}
-            >
-              <Alert severity="success">
-                <Typography variant="body2">Portaled into custom container!</Typography>
-              </Alert>
-            </Box>
-          </Portal>
-        )}
-      </Paper>
-    </Box>
-  );
-};
-
-export const CustomContainer: Story = {
-  render: () => <CustomContainerComponent />,
-};
-
-const DisabledPortalComponent = () => {
-  const [disablePortal, setDisablePortal] = useState(false);
-
-  return (
-    <Box>
-      <Paper sx={{ p: 3, mb: 2, position: 'relative' }}>
-        <Typography variant="h6" gutterBottom>
-          Portal Behavior Test
-        </Typography>
-        <Typography paragraph>Toggle between portal and normal rendering.</Typography>
-
-        <Box sx={{ mb: 2 }}>
-          <Button
-            variant={disablePortal ? 'contained' : 'outlined'}
-            onClick={() => setDisablePortal(!disablePortal)}
-          >
-            {disablePortal ? 'Enable' : 'Disable'} Portal
-          </Button>
-        </Box>
-
-        <Portal disablePortal={disablePortal}>
-          <Box
-            sx={{
-              position: disablePortal ? 'static' : 'fixed',
-              top: disablePortal ? 'auto' : 100,
-              left: disablePortal ? 'auto' : '50%',
-              transform: disablePortal ? 'none' : 'translateX(-50%)',
-              zIndex: disablePortal ? 'auto' : 9999,
-              maxWidth: 300,
-            }}
-          >
-            <Alert severity={disablePortal ? 'warning' : 'info'}>
-              <Typography variant="subtitle2">
-                {disablePortal ? 'Normal Rendering' : 'Portal Rendering'}
-              </Typography>
-              {disablePortal
-                ? 'This content is rendered in the normal DOM hierarchy.'
-                : 'This content is portaled to document.body.'}
-            </Alert>
-          </Box>
-        </Portal>
-      </Paper>
-    </Box>
-  );
-};
-
-export const DisabledPortal: Story = {
-  render: () => <DisabledPortalComponent />,
-};
-
-const MultiplePortalsComponent = () => {
-  const [activePortals, setActivePortals] = useState<Set<number>>(new Set());
-
-  const togglePortal = (id: number) => {
-    setActivePortals((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
-    });
-  };
-
-  const portalConfigs = [
-    { id: 1, position: { top: 20, left: 20 }, color: 'error' },
-    { id: 2, position: { top: 20, right: 20 }, color: 'warning' },
-    { id: 3, position: { bottom: 20, left: 20 }, color: 'success' },
-    { id: 4, position: { bottom: 20, right: 20 }, color: 'info' },
-  ];
-
-  return (
-    <Box>
-      <Paper sx={{ p: 3 }}>
-        <Typography variant="h6" gutterBottom>
-          Multiple Portal Demo
-        </Typography>
-        <Typography paragraph>Create multiple portals in different screen positions.</Typography>
-
-        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-          {portalConfigs.map(({ id, color }) => (
-            <Button
-              key={id}
-              variant={activePortals.has(id) ? 'contained' : 'outlined'}
-              color={color as 'error' | 'warning' | 'success' | 'info'}
-              size="small"
-              onClick={() => togglePortal(id)}
-            >
-              Portal {id}
-            </Button>
-          ))}
-        </Box>
-      </Paper>
-
-      {portalConfigs.map(
-        ({ id, position, color }) =>
-          activePortals.has(id) && (
-            <Portal key={id}>
-              <Box
-                sx={{
-                  position: 'fixed',
-                  ...position,
-                  zIndex: 9999,
-                  maxWidth: 250,
-                }}
-              >
-                <Alert
-                  severity={color as 'error' | 'warning' | 'success' | 'info'}
-                  onClose={() => togglePortal(id)}
-                >
-                  <Typography variant="subtitle2">Portal {id}</Typography>
-                  This is portal content positioned at{' '}
-                  {Object.entries(position)
-                    .map(([key, value]) => `${key}: ${value}px`)
-                    .join(', ')}
-                </Alert>
-              </Box>
-            </Portal>
-          ),
-      )}
-    </Box>
-  );
-};
-
-export const MultiplePortals: Story = {
-  render: () => <MultiplePortalsComponent />,
-};
-
-// Required story exports for validation
-export const Default: Story = {
-  render: () => <BasicComponent />,
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <BasicComponent />
-      <CustomContainerComponent />
-      <DisabledPortalComponent />
-    </Box>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        Portal Size Variations
-      </Typography>
-      <Typography paragraph>
-        Portal component doesn't have inherent sizes - it renders children as-is. Size is determined
-        by the children content.
-      </Typography>
-      <BasicComponent />
-    </Box>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <DisabledPortalComponent />
-      <BasicComponent />
-    </Box>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => <MultiplePortalsComponent />,
-};
-
-const ResponsivePortalComponent = () => {
-  const [showPortal, setShowPortal] = useState(false);
-
-  return (
-    <Box>
-      <Paper sx={{ p: 3, mb: 2 }}>
-        <Typography variant="h6" gutterBottom>
-          Responsive Portal Demo
-        </Typography>
-        <Typography paragraph>Portal content adapts to different screen sizes.</Typography>
-        <Button variant="contained" onClick={() => setShowPortal(!showPortal)}>
-          {showPortal ? 'Hide' : 'Show'} Responsive Portal
-        </Button>
-      </Paper>
-
-      {showPortal && (
-        <Portal>
-          <Box
-            sx={{
-              position: 'fixed',
-              top: { xs: 16, sm: 32, md: 48 },
-              right: { xs: 16, sm: 32, md: 48 },
-              left: { xs: 16, sm: 'auto' },
-              zIndex: 9999,
-              maxWidth: { xs: 'calc(100% - 32px)', sm: 400, md: 500 },
-            }}
-          >
-            <Alert severity="info" onClose={() => setShowPortal(false)}>
-              <Typography variant="subtitle2">Responsive Portal</Typography>
-              <Typography variant="body2">This portal adapts to different screen sizes:</Typography>
-              <Typography variant="caption" component="ul" sx={{ mt: 1, pl: 2 }}>
-                <li>Mobile: Full width with 16px margins</li>
-                <li>Tablet: 400px max width, 32px positioning</li>
-                <li>Desktop: 500px max width, 48px positioning</li>
-              </Typography>
-            </Alert>
-          </Box>
-        </Portal>
-      )}
-    </Box>
-  );
-};
-
-export const Responsive: Story = {
-  render: () => <ResponsivePortalComponent />,
-};