@12-apps/ui 1.4.0 → 1.5.0

package/eslint.config.js

@@ -1,6 +1,7 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import tsParser from '@typescript-eslint/parser';
 import storybook from "eslint-plugin-storybook";
+import testFlakiness from 'eslint-plugin-test-flakiness';
 import globals from 'globals';
 
 import { config } from "@12-apps/eslint-config/base";
@@ -23,6 +24,17 @@ export default [
   },
   ...config,
   ...storybook.configs["flat/recommended"],
+
+  // The flakiness gate is a separate lane (eslint.flakiness.config.mjs), so its
+  // rules are not enabled here. Test files still carry inline disables for the
+  // few findings that are deliberate, and without the plugin registered those
+  // directives fail to resolve — "definition for rule ... was not found" — which
+  // this everyday lint run counts as a warning under --max-warnings 0.
+  // Registering the plugin with no rules turned on makes them resolve.
+  {
+    plugins: { 'test-flakiness': testFlakiness },
+    linterOptions: { reportUnusedDisableDirectives: 'off' },
+  },
   // Override parser for all TypeScript files after storybook config
   {
     files: ['**/*.ts', '**/*.tsx'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",
@@ -194,7 +194,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@12-apps/forms-core": "^1.3.0",
+    "@12-apps/forms-core": "^1.4.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@monaco-editor/react": "^4.7.0",
@@ -209,8 +209,8 @@
     "recharts": "^3.5.1"
   },
   "devDependencies": {
-    "@12-apps/eslint-config": "^1.4.0",
-    "@12-apps/typescript-config": "^1.4.0",
+    "@12-apps/eslint-config": "^1.5.0",
+    "@12-apps/typescript-config": "^1.5.0",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.1.10",
@@ -226,6 +226,7 @@
     "concurrently": "^9.2.1",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-storybook": "9.1.10",
+    "eslint-plugin-test-flakiness": "^1.4.0",
     "glob": "^13.0.0",
     "globals": "^16.5.0",
     "http-server": "^14.1.1",

package/src/components/data-display/AlertDialog/AlertDialog.test.stories.tsx

@@ -288,13 +288,15 @@ export const FocusManagement: Story = {
     await step('Tab through focusable elements', async () => {
       // Tab cycles through dialog elements
       await userEvent.tab();
-      expect(document.activeElement?.getAttribute('aria-label')).toBe('close');
+      await waitFor(() =>
+        expect(document.activeElement?.getAttribute('aria-label')).toBe('close'),
+      );
 
       await userEvent.tab();
-      expect(document.activeElement?.textContent).toContain('Cancel');
+      await waitFor(() => expect(document.activeElement?.textContent).toContain('Cancel'));
 
       await userEvent.tab();
-      expect(document.activeElement?.textContent).toContain('Confirm');
+      await waitFor(() => expect(document.activeElement?.textContent).toContain('Confirm'));
     });
 
     await step('Close dialog and verify focus return', async () => {
@@ -519,6 +521,10 @@ const PerformanceComponent = () => {
     const startTime = window.performance.now();
     setDialogCount((prev) => prev + 1);
     setCurrentDialog(dialogCount + 1);
+    // This is the demo measuring itself for display, not an assertion — the
+    // story renders the number rather than asserting on it, so nothing here
+    // can fail on a slow machine.
+    // eslint-disable-next-line test-flakiness/no-animation-wait -- demo self-measurement, not an assertion
     window.requestAnimationFrame(() => {
       const endTime = window.performance.now();
       setRenderTime(endTime - startTime);
@@ -670,9 +676,13 @@ const IntegrationComponent = () => {
 
   const handleDelete = async () => {
     setIsDeleting(true);
-    // Simulate API call
+    // The delay is the point of this story — it shows the pending state — so it
+    // is the demo's own behaviour rather than a test waiting for something.
+    // eslint-disable-next-line test-flakiness/no-hard-coded-timeout -- simulated latency is what this story demonstrates
     await new Promise((resolve) => window.setTimeout(resolve, 1000));
-    setConfirmations((prev) => [...prev, `Deleted at ${new Date().toLocaleTimeString()}`]);
+    // Numbered rather than timestamped: the entry only needs to be distinct, and
+    // a clock reading makes the rendered text different on every run.
+    setConfirmations((prev) => [...prev, `Deleted item ${prev.length + 1}`]);
     setIsDeleting(false);
   };
 
@@ -746,7 +756,7 @@ export const Integration: Story = {
 
     await step('Verify action was logged', async () => {
       await waitFor(() => {
-        expect(canvas.getByText(/Deleted at/)).toBeInTheDocument();
+        expect(canvas.getByText(/Deleted item/)).toBeInTheDocument();
       });
     });
   },

package/src/components/data-display/Banner/Banner.test.stories.tsx

@@ -116,30 +116,34 @@ export const KeyboardNavigation: Story = {
 
     // Focus the banner
     const banner = canvas.getByRole('status');
-    banner.focus();
-    expect(banner).toHaveFocus();
+    await userEvent.click(banner);
+    await waitFor(() => expect(banner).toHaveFocus());
 
     // Tab to first action button
     await userEvent.tab();
     const action1 = canvas.getByRole('button', { name: 'Action 1' });
-    expect(action1).toHaveFocus();
+    await waitFor(() => expect(action1).toHaveFocus());
 
     // Tab to second action button
     await userEvent.tab();
     const action2 = canvas.getByRole('button', { name: 'Action 2' });
-    expect(action2).toHaveFocus();
+    await waitFor(() => expect(action2).toHaveFocus());
 
     // Tab to dismiss button
     await userEvent.tab();
     const dismissButton = canvas.getByRole('button', { name: /dismiss banner/i });
-    expect(dismissButton).toHaveFocus();
+    await waitFor(() => expect(dismissButton).toHaveFocus());
 
-    // Test Enter key on action button
+    // Test Enter key on action button. Focused directly rather than clicked:
+    // a click would fire the very handler the next line counts.
+    // eslint-disable-next-line test-flakiness/no-focus-check -- clicking would fire the handler under assertion
     action1.focus();
     await userEvent.keyboard('{Enter}');
     expect(args.actions![0].onClick).toHaveBeenCalledTimes(1);
 
-    // Test Space key on dismiss button
+    // Test Space key on dismiss button. Focused rather than clicked for the
+    // same reason: a click is itself a dismiss.
+    // eslint-disable-next-line test-flakiness/no-focus-check, test-flakiness/await-async-events -- clicking would perform the action under test
     dismissButton.focus();
     await userEvent.keyboard(' ');
 
@@ -198,17 +202,17 @@ export const FocusManagement: Story = {
     expect(banner).toHaveAttribute('tabIndex', '0');
 
     // Test focus visibility
-    banner.focus();
-    expect(banner).toHaveFocus();
+    await userEvent.click(banner);
+    await waitFor(() => expect(banner).toHaveFocus());
 
     // Test that focus moves properly through interactive elements
     await userEvent.tab();
     const actionButton = canvas.getByRole('button', { name: 'Focus Test' });
-    expect(actionButton).toHaveFocus();
+    await waitFor(() => expect(actionButton).toHaveFocus());
 
     await userEvent.tab();
     const dismissButton = canvas.getByRole('button', { name: /dismiss banner/i });
-    expect(dismissButton).toHaveFocus();
+    await waitFor(() => expect(dismissButton).toHaveFocus());
   },
 };
 
@@ -365,14 +369,18 @@ export const Performance: Story = {
     const allDismissButtons = canvas.getAllByRole('button', { name: /dismiss banner/i });
 
     // Click first 3 dismiss buttons
-    for (let i = 0; i < Math.min(3, allDismissButtons.length); i++) {
+    const dismissCount = Math.min(3, allDismissButtons.length);
+    for (let i = 0; i < dismissCount; i++) {
       await userEvent.click(allDismissButtons[i]);
-      await waitFor(
-        () => {
-          // Wait a bit for dismiss animation
-        },
-        { timeout: 100 },
-      );
+      // The old wait here had an empty body, so it was a fixed delay with a
+      // waitFor's name on it. Waiting for the banner count to actually drop is
+      // both the real signal and the assertion.
+      const remaining = allDismissButtons.length - (i + 1);
+      await waitFor(() => {
+        expect(canvas.queryAllByRole('button', { name: /dismiss banner/i })).toHaveLength(
+          remaining,
+        );
+      });
     }
   },
 };

package/src/components/data-display/Carousel/Carousel.chrome.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { CarouselArrows, CarouselIndicators, CarouselThumbnails } from './Carousel.parts';
+import type {
+  CarouselArrowsProps,
+  CarouselIndicatorsProps,
+  CarouselItem,
+  CarouselThumbnailsProps,
+} from './Carousel.types';
+
+type IndicatorPosition = NonNullable<CarouselIndicatorsProps['position']>;
+type Color = NonNullable<CarouselIndicatorsProps['color']>;
+
+export interface CarouselChromeProps {
+  items: CarouselItem[];
+  activeIndex: number;
+  loop: boolean;
+  disabled: boolean;
+  showArrows: boolean;
+  showIndicators: boolean;
+  showThumbnails: boolean;
+  arrowPosition: NonNullable<CarouselArrowsProps['position']>;
+  indicatorPosition: IndicatorPosition;
+  color: Color;
+  size: NonNullable<CarouselThumbnailsProps['size']>;
+  onPrev: () => void;
+  onNext: () => void;
+  onSelect: (index: number) => void;
+}
+
+/**
+ * Everything drawn over the slides: the arrows, the indicators and the thumbnail
+ * strip. Each is independently switchable, so they travel together rather than
+ * as three conditional blocks inside the carousel's own render.
+ */
+export const CarouselChrome: React.FC<CarouselChromeProps> = ({
+  items,
+  activeIndex,
+  loop,
+  disabled,
+  showArrows,
+  showIndicators,
+  showThumbnails,
+  arrowPosition,
+  indicatorPosition,
+  color,
+  size,
+  onPrev,
+  onNext,
+  onSelect,
+}) => (
+  <>
+    {showArrows && !disabled && (
+      <CarouselArrows
+        onPrev={onPrev}
+        onNext={onNext}
+        position={arrowPosition}
+        color={color}
+        disablePrev={!loop && activeIndex === 0}
+        disableNext={!loop && activeIndex === items.length - 1}
+      />
+    )}
+
+    {showIndicators && (
+      <CarouselIndicators
+        count={items.length}
+        activeIndex={activeIndex}
+        onSelect={onSelect}
+        position={indicatorPosition}
+        color={color}
+      />
+    )}
+
+    {showThumbnails && (
+      <CarouselThumbnails
+        items={items}
+        activeIndex={activeIndex}
+        onSelect={onSelect}
+        size={size}
+      />
+    )}
+  </>
+);

package/src/components/data-display/Carousel/Carousel.hooks.ts

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface CarouselNavigationInput {
+  count: number;
+  loop: boolean;
+  autoPlay: boolean;
+  autoPlayInterval: number;
+  pauseOnHover: boolean;
+  disabled: boolean;
+  onChange?: (index: number) => void;
+}
+
+/**
+ * Steps `current` by `step`, wrapping when `loop` allows it and stopping at the
+ * end when it does not. Returns the same index it was given when there is
+ * nowhere to go, which is what lets the caller skip a no-op `onChange`.
+ */
+const stepIndex = (current: number, step: number, count: number, loop: boolean) => {
+  const next = current + step;
+
+  if (next >= count) return loop ? 0 : current;
+  if (next < 0) return loop ? count - 1 : 0;
+  return next;
+};
+
+/**
+ * Which slide is showing and everything that changes it: the arrows, an
+ * indicator click, and the autoplay timer.
+ *
+ * Hover is tracked here rather than in the component because its only job is to
+ * pause that timer.
+ */
+export const useCarouselNavigation = ({
+  count,
+  loop,
+  autoPlay,
+  autoPlayInterval,
+  pauseOnHover,
+  disabled,
+  onChange,
+}: CarouselNavigationInput) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isHovered, setIsHovered] = useState(false);
+  const intervalRef = useRef<number | null>(null);
+
+  const goBy = useCallback(
+    (step: number) => {
+      setActiveIndex((prev) => {
+        const next = stepIndex(prev, step, count, loop);
+        if (next !== prev) {
+          onChange?.(next);
+        }
+        return next;
+      });
+    },
+    [count, loop, onChange],
+  );
+
+  const handleNext = useCallback(() => goBy(1), [goBy]);
+  const handlePrev = useCallback(() => goBy(-1), [goBy]);
+
+  const handleSelect = useCallback(
+    (index: number) => {
+      setActiveIndex(index);
+      onChange?.(index);
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    if (!autoPlay || isHovered || disabled) return;
+
+    intervalRef.current = window.setInterval(handleNext, autoPlayInterval);
+
+    return () => {
+      if (intervalRef.current) {
+        window.clearInterval(intervalRef.current);
+      }
+    };
+  }, [autoPlay, autoPlayInterval, isHovered, disabled, handleNext]);
+
+  const hoverProps = {
+    onMouseEnter: () => pauseOnHover && setIsHovered(true),
+    onMouseLeave: () => pauseOnHover && setIsHovered(false),
+  };
+
+  return { activeIndex, handleNext, handlePrev, handleSelect, hoverProps };
+};