@jobber/components-native 0.109.1 → 0.110.0

package/dist/types/src/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,6 @@
 import React from "react";
 import type { ProgressBarProps } from "./types";
+/**
+ * @deprecated Use `ProgressIndicator` from `@jobber/components-native` instead.
+ */
 export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, UNSAFE_style, }: ProgressBarProps): React.JSX.Element;

package/dist/types/src/ProgressBar/types.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
+/**
+ * @deprecated Use `ProgressIndicator` from `@jobber/components-native` instead.
+ */
 export interface ProgressBarProps {
     /**
      * The total number of items to be completed

package/dist/types/src/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ProgressIndicatorProps } from "./types";
+export declare function ProgressIndicator({ value, max, pendingValue, variation, size, accessibilityLabel, style, }: ProgressIndicatorProps): React.JSX.Element;

package/dist/types/src/ProgressIndicator/ProgressIndicator.size.style.d.ts

@@ -0,0 +1,19 @@
+import type { ProgressIndicatorProps } from "./types";
+type Size = NonNullable<ProgressIndicatorProps["size"]>;
+/**
+ * Bar heights per size. Matches the web `ProgressIndicator` ladder and today's
+ * mobile `ProgressBar` sizing.
+ */
+export declare const sizeHeights: Record<Size, number>;
+export declare const sizeStyles: {
+    smaller: {
+        height: number;
+    };
+    small: {
+        height: number;
+    };
+    base: {
+        height: number;
+    };
+};
+export {};

package/dist/types/src/ProgressIndicator/ProgressIndicator.style.d.ts

@@ -0,0 +1,48 @@
+/**
+ * ProgressIndicator
+ *
+ * Colour tokens mirror the web `ProgressIndicator`: the fill / filled segments
+ * use `color-interactive--subtle`; the track / empty segments use
+ * `color-surface--active`. The mobile-only pending band / pending segments use
+ * `color-informative`, carried forward from today's `ProgressBar` `inProgress`
+ * overlay.
+ *
+ * The bar height is set by the size style; the border radius is derived from
+ * that height at render time so the fill and segments stay pill-shaped at every
+ * size.
+ */
+export declare const useStyles: () => {
+    continuous: {
+        width: "100%";
+        flexDirection: "row";
+        overflow: "hidden";
+        backgroundColor: string;
+    };
+    fill: {
+        height: "100%";
+        backgroundColor: string;
+    };
+    pending: {
+        height: "100%";
+        position: "absolute";
+        left: number;
+        top: number;
+        backgroundColor: string;
+    };
+    stepped: {
+        width: "100%";
+        flexDirection: "row";
+        gap: number;
+    };
+    segment: {
+        flex: number;
+        height: "100%";
+        backgroundColor: string;
+    };
+    segmentFilled: {
+        backgroundColor: string;
+    };
+    segmentPending: {
+        backgroundColor: string;
+    };
+};

package/dist/types/src/ProgressIndicator/ProgressIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/ProgressIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressIndicator } from "./ProgressIndicator";
+export type { ProgressIndicatorProps } from "./types";

package/dist/types/src/ProgressIndicator/types.d.ts

@@ -0,0 +1,44 @@
+import type { StyleProp, ViewStyle } from "react-native";
+export interface ProgressIndicatorProps {
+    /**
+     * Current progress. Expected to be in the range `0..max` inclusive.
+     */
+    readonly value: number;
+    /**
+     * Maximum value.
+     * @default 100
+     */
+    readonly max?: number;
+    /**
+     * Additional in-flight progress beyond `value`, measured on the same scale as
+     * `value` and `max`. The bar visually fills `value + pendingValue` of `max`,
+     * with the `value` portion shown as completed and the `pendingValue` portion
+     * shown as pending. Mobile-only; there is no web counterpart.
+     * @default 0
+     */
+    readonly pendingValue?: number;
+    /**
+     * Set the variation of the progress indicator. `continuous` renders a single
+     * fill; `stepped` renders one segment per integer step from `1..max`.
+     * @default continuous
+     */
+    readonly variation?: "continuous" | "stepped";
+    /**
+     * Set the size of the progress indicator. Corresponds to bar heights of
+     * 4px / 8px / 16px.
+     * @default base
+     */
+    readonly size?: "smaller" | "small" | "base";
+    /**
+     * Accessible label override. When omitted, the label is derived via
+     * `useAtlantisI18n`: `"{value}%"` when `max` is `100` (or omitted) and
+     * `pendingValue` is `0`; `"{value} / {max}"` when `max` is not `100` and
+     * `pendingValue` is `0`; `"{value} of {max}, {pendingValue} pending"` when
+     * `pendingValue` is greater than `0`.
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Custom style applied to the root element.
+     */
+    readonly style?: StyleProp<ViewStyle>;
+}

package/dist/types/src/index.d.ts

@@ -37,6 +37,7 @@ export * from "./InputSearch";
 export * from "./InputText";
 export * from "./InputTime";
 export * from "./ProgressBar";
+export * from "./ProgressIndicator";
 export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.109.1",
+  "version": "0.110.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -124,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "879bbb072a470c876e4ee7e9a9757f5edb0f3b82"
+  "gitHead": "c81a2b04748119a1bd84cc39f4f5e7a97c410afb"
 }

package/src/ProgressBar/ProgressBar.stories.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-deprecated -- This file documents the deprecated
+ * ProgressBar component until it is removed or shimmed. */
 import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { ProgressBar } from "@jobber/components-native";

package/src/ProgressBar/ProgressBar.test.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-deprecated -- This file tests the deprecated
+ * ProgressBar component until it is removed or shimmed. */
 import React from "react";
 import { render, screen } from "@testing-library/react-native";
 import type { ProgressBarProps } from ".";

package/src/ProgressBar/ProgressBar.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-deprecated -- This file implements the deprecated
+ * ProgressBar component; self-references predate the deprecation. Migrate to
+ * ProgressIndicator. */
 import React from "react";
 import { View } from "react-native";
 import type { ProgressBarProps } from "./types";
@@ -8,6 +11,9 @@ import { sizeStyles } from "./ProgressBar.size.style";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
+/**
+ * @deprecated Use `ProgressIndicator` from `@jobber/components-native` instead.
+ */
 export function ProgressBar({
   loading,
   total,

package/src/ProgressBar/docs/ProgressBarBasic.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-deprecated -- This example documents the deprecated
+ * ProgressBar component until it is removed or shimmed. */
 import React from "react";
 import { ProgressBar } from "@jobber/components-native";
 import type { ProgressBarProps } from "@jobber/components-native";

package/src/ProgressBar/docs/ProgressBarWithHeader.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-deprecated -- This example documents the deprecated
+ * ProgressBar component until it is removed or shimmed. */
 import React, { useState } from "react";
 import {
   Button,

package/src/ProgressBar/types.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 
+/**
+ * @deprecated Use `ProgressIndicator` from `@jobber/components-native` instead.
+ */
 export interface ProgressBarProps {
   /**
    * The total number of items to be completed

package/src/ProgressIndicator/ProgressIndicator.size.style.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import type { ProgressIndicatorProps } from "./types";
+
+type Size = NonNullable<ProgressIndicatorProps["size"]>;
+
+/**
+ * Bar heights per size. Matches the web `ProgressIndicator` ladder and today's
+ * mobile `ProgressBar` sizing.
+ */
+export const sizeHeights: Record<Size, number> = {
+  smaller: 4,
+  small: 8,
+  base: 16,
+};
+
+export const sizeStyles = StyleSheet.create({
+  smaller: { height: sizeHeights.smaller },
+  small: { height: sizeHeights.small },
+  base: { height: sizeHeights.base },
+});

package/src/ProgressIndicator/ProgressIndicator.stories.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from "react";
+import { View } from "react-native";
+import type { ComponentProps } from "react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { ProgressIndicator } from "@jobber/components-native";
+import { ProgressIndicatorBasic, ProgressIndicatorPending } from "./docs";
+
+type ProgressIndicatorStoryArgs = Partial<
+  Pick<
+    ComponentProps<typeof ProgressIndicator>,
+    | "value"
+    | "max"
+    | "pendingValue"
+    | "variation"
+    | "size"
+    | "accessibilityLabel"
+  >
+>;
+
+const meta = {
+  title: "Components/Status and Feedback/ProgressIndicator",
+  component: ProgressIndicator,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+    showNativeOnWebDisclaimer: true,
+  },
+  argTypes: {
+    variation: {
+      control: { type: "radio" },
+      options: ["continuous", "stepped"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["smaller", "small", "base"],
+    },
+  },
+} satisfies Meta<typeof ProgressIndicator>;
+
+export default meta;
+
+type Story = StoryObj<ProgressIndicatorStoryArgs>;
+
+/**
+ * The default continuous bar, filled to `value` out of `max`.
+ */
+export const Basic: Story = {
+  render: ProgressIndicatorBasic,
+  args: {
+    value: 75,
+    size: "base",
+  },
+};
+
+/**
+ * The three sizes stacked so the heights (4 / 8 / 16px) are visually
+ * comparable.
+ */
+export const Sizes: Story = {
+  render: args => (
+    <View style={{ gap: 16 }}>
+      <ProgressIndicator {...args} value={args.value ?? 50} size="smaller" />
+      <ProgressIndicator {...args} value={args.value ?? 50} size="small" />
+      <ProgressIndicator {...args} value={args.value ?? 50} size="base" />
+    </View>
+  ),
+  args: {
+    value: 50,
+  },
+};
+
+/**
+ * The stepped variation renders one segment per step and fills the first
+ * `value` of `max`.
+ */
+export const Stepped: Story = {
+  render: ProgressIndicatorBasic,
+  args: {
+    value: 2,
+    max: 5,
+    variation: "stepped",
+    size: "base",
+  },
+};
+
+/**
+ * Mobile-only pending overlay: `value` of `max` completed plus an additional
+ * `pendingValue` of `max` in flight.
+ */
+export const Pending: Story = {
+  render: ProgressIndicatorPending,
+  args: {
+    value: 2,
+    max: 10,
+    pendingValue: 3,
+  },
+};
+
+/**
+ * The stepped variation with a pending overlay: the first `value` segments are
+ * filled and the next `pendingValue` segments are shown as in flight.
+ */
+export const SteppedPending: Story = {
+  render: ProgressIndicatorPending,
+  args: {
+    value: 3,
+    max: 6,
+    pendingValue: 2,
+    variation: "stepped",
+  },
+};
+
+/**
+ * Demonstrates the default `"{value}%"` accessibility label when `max` is
+ * omitted or equal to 100.
+ */
+export const Percentage: Story = {
+  render: ProgressIndicatorBasic,
+  args: {
+    value: 42,
+  },
+};
+
+/**
+ * Demonstrates the default `"{value} / {max}"` accessibility label when
+ * `max !== 100`.
+ */
+export const Ratio: Story = {
+  render: ProgressIndicatorBasic,
+  args: {
+    value: 3,
+    max: 4,
+  },
+};
+
+/**
+ * Drives `value` over time so the determinate width transition is visible. The
+ * transition is intentionally preserved under a reduce-motion preference
+ * because it conveys functional progress (WCAG 2.3.3).
+ */
+export const WithState: Story = {
+  render: function WithStateStory() {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setValue(current => (current >= 100 ? 0 : current + 10));
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return <ProgressIndicator value={value} />;
+  },
+};

package/src/ProgressIndicator/ProgressIndicator.style.ts

@@ -0,0 +1,53 @@
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+/**
+ * ProgressIndicator
+ *
+ * Colour tokens mirror the web `ProgressIndicator`: the fill / filled segments
+ * use `color-interactive--subtle`; the track / empty segments use
+ * `color-surface--active`. The mobile-only pending band / pending segments use
+ * `color-informative`, carried forward from today's `ProgressBar` `inProgress`
+ * overlay.
+ *
+ * The bar height is set by the size style; the border radius is derived from
+ * that height at render time so the fill and segments stay pill-shaped at every
+ * size.
+ */
+export const useStyles = buildThemedStyles(tokens => ({
+  /* Continuous: the root IS the track; the fill / pending sit on top. */
+  continuous: {
+    width: "100%",
+    flexDirection: "row",
+    overflow: "hidden",
+    backgroundColor: tokens["color-surface--active"],
+  },
+  fill: {
+    height: "100%",
+    backgroundColor: tokens["color-interactive--subtle"],
+  },
+  pending: {
+    height: "100%",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    backgroundColor: tokens["color-informative"],
+  },
+
+  /* Stepped: the root IS the flex row; segments are direct children. */
+  stepped: {
+    width: "100%",
+    flexDirection: "row",
+    gap: tokens["space-small"],
+  },
+  segment: {
+    flex: 1,
+    height: "100%",
+    backgroundColor: tokens["color-surface--active"],
+  },
+  segmentFilled: {
+    backgroundColor: tokens["color-interactive--subtle"],
+  },
+  segmentPending: {
+    backgroundColor: tokens["color-informative"],
+  },
+}));

package/src/ProgressIndicator/ProgressIndicator.test.tsx

@@ -0,0 +1,214 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { ProgressIndicator } from ".";
+
+describe("ProgressIndicator", () => {
+  describe("public API", () => {
+    it("renders with role='progressbar'", () => {
+      render(<ProgressIndicator value={50} />);
+
+      expect(screen.getByRole("progressbar")).toBeTruthy();
+    });
+
+    it("sets accessibilityValue now/min/max", () => {
+      render(<ProgressIndicator value={50} />);
+
+      expect(screen.getByRole("progressbar").props.accessibilityValue).toEqual(
+        expect.objectContaining({ now: 50, min: 0, max: 100 }),
+      );
+    });
+
+    it("uses max in accessibilityValue when provided", () => {
+      render(<ProgressIndicator value={3} max={4} />);
+
+      expect(screen.getByRole("progressbar").props.accessibilityValue).toEqual(
+        expect.objectContaining({ now: 3, max: 4 }),
+      );
+    });
+
+    it("renders a continuous fill by default", () => {
+      render(<ProgressIndicator value={50} />);
+
+      expect(screen.getByTestId("progressindicator-fill")).toBeTruthy();
+      expect(screen.queryByTestId("progressindicator-step-filled")).toBeNull();
+    });
+
+    it("applies style to the root", () => {
+      render(<ProgressIndicator value={50} style={{ margin: 8 }} />);
+
+      expect(screen.getByRole("progressbar").props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ margin: 8 })]),
+      );
+    });
+
+    it("rounds the continuous track so both ends are pill-shaped", () => {
+      render(<ProgressIndicator value={50} size="base" />);
+
+      // base height is 16px, so the track radius is 8. Without this the
+      // unfilled (right) end of the track renders with square corners.
+      expect(screen.getByRole("progressbar").props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ borderRadius: 8 })]),
+      );
+    });
+
+    it("does not round the stepped root (segments carry their own radius)", () => {
+      render(<ProgressIndicator value={2} max={5} variation="stepped" />);
+
+      const rootStyles = screen
+        .getByRole("progressbar")
+        .props.style.filter(Boolean);
+      expect(rootStyles).not.toContainEqual(
+        expect.objectContaining({ borderRadius: expect.anything() }),
+      );
+    });
+  });
+
+  describe("accessibility label", () => {
+    it("defaults to '{value}%' when max is omitted", () => {
+      render(<ProgressIndicator value={42} />);
+
+      expect(screen.getByLabelText("42%")).toBeTruthy();
+    });
+
+    it("defaults to '{value}%' when max === 100", () => {
+      render(<ProgressIndicator value={42} max={100} />);
+
+      expect(screen.getByLabelText("42%")).toBeTruthy();
+    });
+
+    it("defaults to '{value} / {max}' when max !== 100", () => {
+      render(<ProgressIndicator value={3} max={4} />);
+
+      expect(screen.getByLabelText("3 / 4")).toBeTruthy();
+    });
+
+    it("defaults to the pending template when pendingValue > 0", () => {
+      render(<ProgressIndicator value={2} pendingValue={3} max={10} />);
+
+      expect(screen.getByLabelText("2 of 10, 3 pending")).toBeTruthy();
+    });
+
+    it("uses a consumer-supplied accessibilityLabel when provided", () => {
+      render(
+        <ProgressIndicator value={50} accessibilityLabel="Uploading file" />,
+      );
+
+      expect(screen.getByLabelText("Uploading file")).toBeTruthy();
+    });
+  });
+
+  /**
+   * Native screen readers (VoiceOver / TalkBack) announce a progressbar from
+   * its `accessibilityRole` plus the resolved `accessibilityValue.text` /
+   * `accessibilityLabel`. These assertions lock that announced payload
+   * deterministically — the automatable proxy for the on-device smoke, which
+   * cannot capture live screen-reader speech in CI.
+   */
+  describe("screen reader announcement contract", () => {
+    it.each([
+      ["percent (max omitted)", { value: 50 }, "50%"],
+      ["ratio (max !== 100)", { value: 3, max: 4 }, "3 / 4"],
+      ["pending", { value: 2, pendingValue: 3, max: 10 }, "2 of 10, 3 pending"],
+      [
+        "custom label",
+        { value: 50, accessibilityLabel: "Uploading file" },
+        "Uploading file",
+      ],
+    ])(
+      "announces %s as a progressbar with the derived text",
+      (_n, props, text) => {
+        render(<ProgressIndicator {...props} />);
+
+        const root = screen.getByRole("progressbar");
+        expect(root.props.accessibilityRole).toBe("progressbar");
+        expect(root.props.accessibilityLabel).toBe(text);
+        expect(root.props.accessibilityValue).toEqual(
+          expect.objectContaining({ text }),
+        );
+      },
+    );
+
+    it("carries the numeric value/min/max alongside the announced text", () => {
+      render(<ProgressIndicator value={3} max={4} />);
+
+      expect(screen.getByRole("progressbar").props.accessibilityValue).toEqual({
+        min: 0,
+        max: 4,
+        now: 3,
+        text: "3 / 4",
+      });
+    });
+  });
+
+  describe("sizes", () => {
+    it.each([
+      ["smaller", 4],
+      ["small", 8],
+      ["base", 16],
+    ] as const)("applies %s height (%dpx) to the root", (size, height) => {
+      render(<ProgressIndicator value={50} size={size} />);
+
+      expect(screen.getByRole("progressbar").props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ height })]),
+      );
+    });
+  });
+
+  describe("pending overlay (continuous)", () => {
+    it("renders a pending band when pendingValue > 0", () => {
+      render(<ProgressIndicator value={2} pendingValue={3} max={10} />);
+
+      expect(screen.getByTestId("progressindicator-pending")).toBeTruthy();
+    });
+
+    it("renders no pending band when pendingValue is 0", () => {
+      render(<ProgressIndicator value={4} max={10} />);
+
+      expect(screen.queryByTestId("progressindicator-pending")).toBeNull();
+    });
+  });
+
+  describe("stepped variation", () => {
+    it("renders max segments with the first value filled", () => {
+      render(<ProgressIndicator value={2} max={5} variation="stepped" />);
+
+      expect(
+        screen.getAllByTestId("progressindicator-step-filled"),
+      ).toHaveLength(2);
+      expect(
+        screen.getAllByTestId("progressindicator-step-empty"),
+      ).toHaveLength(3);
+    });
+
+    it("classifies filled, pending, and empty segments", () => {
+      render(
+        <ProgressIndicator
+          value={3}
+          pendingValue={2}
+          max={6}
+          variation="stepped"
+        />,
+      );
+
+      expect(
+        screen.getAllByTestId("progressindicator-step-filled"),
+      ).toHaveLength(3);
+      expect(
+        screen.getAllByTestId("progressindicator-step-pending"),
+      ).toHaveLength(2);
+      expect(
+        screen.getAllByTestId("progressindicator-step-empty"),
+      ).toHaveLength(1);
+    });
+
+    it("keeps a single progressbar on the root and none on segments", () => {
+      render(<ProgressIndicator value={2} max={5} variation="stepped" />);
+
+      expect(screen.getAllByRole("progressbar")).toHaveLength(1);
+      screen.getAllByTestId(/progressindicator-step-/).forEach(segment => {
+        expect(segment.props.accessibilityRole).toBeUndefined();
+        expect(segment.props.accessibilityValue).toBeUndefined();
+      });
+    });
+  });
+});