@jobber/components-native 0.109.1 → 0.111.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/hooks/useAtlantisI18n/releasedLanguages.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Languages that have been fully released and are safe to surface to users.
+ * Any locale not present in this list will fall back to "en".
+ *
+ * To release a new language, add its BCP 47 language tag here (e.g. "es").
+ */
+export declare const RELEASED_LANGUAGES: readonly string[];
+/**
+ * Returns the locale to use based on what has been released. Matches on the
+ * language part of the locale (before the "-") so that regional variants like
+ * "en-CA" or "es-US" resolve correctly:
+ *
+ * - "en-CA" → "en-CA"  (language "en" is released; full locale preserved for
+ *                        date/time formatting)
+ * - "es-US" → "en"     (language "es" not yet released; falls back to "en")
+ * - "fr"    → "en"     (language "fr" not released; falls back to "en")
+ */
+export declare function getReleasedLocale(locale: string): string;

package/dist/types/src/hooks/useAtlantisI18n/useAtlantisI18n.d.ts

@@ -2,7 +2,9 @@ import en from "./locales/en.json";
 export type I18nKeys = keyof typeof en;
 export interface useAtlantisI18nValue {
     /**
-     * The set locale based on the AtlantisContext.
+     * The effective locale, resolved from the AtlantisContext locale against the
+     * list of released languages. Regional variants (e.g. "en-CA") are preserved
+     * when their language is released. Unreleased locales fall back to "en".
      */
     readonly locale: string;
     /**

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.111.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": "6346e405a6b057bc5b03e75a03412811e44571b5"
 }

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"],
+  },
+}));