@jobber/components-native 0.12.0 → 0.14.0

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { AccessibilityRole } from "react-native";
+import { IconNames } from "@jobber/design";
+export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
+export interface ChipProps {
+    /**
+     * label of the chip.
+     */
+    readonly label?: string;
+    /**
+     * chip's active status
+     */
+    readonly isActive: boolean;
+    /**
+     * Boolean for chip's ability to be dismissed
+     */
+    readonly isDismissible?: boolean;
+    /**
+     * Background color to be used for inactive chips
+     *
+     * @default "background"
+     */
+    readonly inactiveBackgroundColor?: "surface" | "background";
+    /**
+     * Accessibility label for the component. It's also used for testing
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Accessibility role for the component
+     */
+    readonly accessibilityRole?: AccessibilityRole;
+    /**
+     * Press handler
+     */
+    onPress?(): void;
+    /**
+     * Optional Icon
+     */
+    readonly icon?: IconNames;
+    /**
+     * Background color to be used for Active chips
+     */
+    readonly accent?: AccentType;
+}
+export declare function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBackgroundColor, accessibilityLabel, accessibilityRole, accent, }: ChipProps): JSX.Element;

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

@@ -0,0 +1,29 @@
+export declare const styles: {
+    container: {
+        alignItems: "center";
+        borderRadius: number;
+        flexDirection: "row";
+        height: number;
+        justifyContent: "center";
+        marginHorizontal: number;
+        marginTop: number;
+        paddingHorizontal: number;
+    };
+    iconLeft: {
+        marginHorizontal: number;
+    };
+    chipText: {
+        flexGrow: number;
+        flexShrink: number;
+        marginHorizontal: number;
+    };
+    dismissIcon: {
+        backgroundColor: string;
+        borderRadius: number;
+        marginLeft: number;
+        padding: number;
+    };
+    activeDismissIcon: {
+        backgroundColor: string;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { Chip } from "./Chip";
+export type { AccentType } from "./Chip";

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ProgressBarProps } from "./types";
+export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, }: ProgressBarProps): JSX.Element;

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

@@ -0,0 +1,22 @@
+export declare const styles: {
+    progressBarContainer: {
+        marginTop: number;
+        marginBottom: number;
+        height: number;
+        position: "relative";
+        flexDirection: "row";
+    };
+    progressBarInner: {
+        backgroundColor: string;
+        width: string;
+        height: string;
+        position: "absolute";
+        left: number;
+        top: number;
+        borderRadius: number;
+    };
+    progressInner: {
+        height: string;
+        borderRadius: number;
+    };
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ProgressBarInnerProps {
+    readonly width: number;
+    readonly animationDuration?: number;
+    readonly color?: string;
+}
+export declare function ProgressBarInner({ width, color, }: ProgressBarInnerProps): JSX.Element;
+export declare function calculateWidth(total: number, current: number): number;
+export {};

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

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

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

@@ -0,0 +1,12 @@
+export declare const messages: {
+    complete: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inProgress: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+export interface ProgressBarProps {
+    /**
+     * The total number of items to be completed
+     */
+    readonly total: number;
+    /**
+     * The number of items that are currently completed
+     */
+    readonly current: number;
+    /**
+     * The number of items in progress (not completed, but to be less than the total)
+     */
+    readonly inProgress?: number;
+    /**
+     * If the progress bar is loading, the progress indicators aren't rendered on the screen
+     */
+    readonly loading?: boolean;
+    /**
+     * If the amountFormatted and totalAmountFormatted text needs to appear more visibile because of the
+     * background, for example
+     */
+    readonly reverseTheme?: boolean;
+    /**
+     * Component to render above the progress bar.
+     */
+    readonly header?: ReactNode;
+}

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

@@ -11,4 +11,6 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./ProgressBar";
 export * from "./Heading";
+export * from "./Chip";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -47,5 +47,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "b059ff05b89ebdd41e79b4b2cf761e91706bc9c9"
+  "gitHead": "7237667e48edeb962f88a75bacaaca79e510f415"
 }

package/src/Chip/Chip.style.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const chipHeight = tokens["space-larger"] + tokens["space-small"];
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    borderRadius: tokens["radius-circle"],
+    flexDirection: "row",
+    height: chipHeight,
+    justifyContent: "center",
+    marginHorizontal: tokens["space-smaller"],
+    marginTop: tokens["space-small"],
+    paddingHorizontal: tokens["space-small"],
+  },
+  iconLeft: {
+    marginHorizontal: tokens["space-smallest"],
+  },
+  chipText: {
+    flexGrow: 1,
+    flexShrink: 1,
+    marginHorizontal: tokens["space-smallest"],
+  },
+  dismissIcon: {
+    backgroundColor: tokens["color-surface"],
+    borderRadius: tokens["radius-circle"],
+    marginLeft: tokens["space-smaller"],
+    padding: tokens["space-smaller"],
+  },
+  activeDismissIcon: {
+    backgroundColor: tokens["color-surface--background"],
+  },
+});

package/src/Chip/Chip.test.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Chip } from "./Chip";
+import { tokens } from "../utils/design";
+
+it("renders an active Chip", () => {
+  const { getByText, getByLabelText } = render(
+    <Chip
+      label="Foo"
+      onPress={jest.fn()}
+      accessibilityLabel={"Foo chip"}
+      isActive
+    />,
+  );
+  expect(getByText("Foo")).toBeDefined();
+  expect(getByLabelText("Foo chip").props.style).toContainEqual({
+    backgroundColor: tokens["color-surface--reverse"],
+  });
+});
+
+it("renders an active Chip without onPress as disabled", () => {
+  const { getByTestId } = render(
+    <Chip label="Foo" accessibilityLabel={"Foo chip"} isActive />,
+  );
+  expect(
+    getByTestId("chipTest").props.accessibilityState.disabled,
+  ).toBeTruthy();
+});
+
+it("renders an inactive Chip with a default backgroundColor", () => {
+  const { getByTestId } = render(
+    <Chip label="Foo" onPress={jest.fn()} isActive={false} />,
+  );
+  expect(getByTestId("chipTest").props.style).not.toContainEqual({
+    backgroundColor: tokens["color-surface--reverse"],
+  });
+  expect(getByTestId("chipTest").props.style).toContainEqual({
+    backgroundColor: tokens["color-surface--background"],
+  });
+});
+
+it("renders an inactive Chip with a surface backgroundColor", () => {
+  const { getByTestId } = render(
+    <Chip
+      label="Foo"
+      onPress={jest.fn()}
+      isActive={false}
+      inactiveBackgroundColor={"surface"}
+    />,
+  );
+  expect(getByTestId("chipTest").props.style).toContainEqual({
+    backgroundColor: tokens["color-surface"],
+  });
+});
+
+it("renders an active Chip with icon", () => {
+  const { getByTestId } = render(
+    <Chip onPress={jest.fn()} icon="invoice" isActive />,
+  );
+  expect(getByTestId("invoice")).toBeDefined();
+});
+
+it("renders an inactive Chip with icon", () => {
+  const { getByTestId } = render(
+    <Chip onPress={jest.fn()} icon="invoice" isActive={false} />,
+  );
+  expect(getByTestId("invoice")).toBeDefined();
+});
+
+it("renders a Chip with the dismiss icon", () => {
+  const { getByTestId } = render(
+    <Chip label="Foo" onPress={jest.fn()} isActive isDismissible={true} />,
+  );
+  expect(getByTestId("remove")).toBeDefined();
+});
+
+it("should call the handler with the new value", () => {
+  const pressHandler = jest.fn();
+  const accessibilityLabel = "test chip";
+  const { getByLabelText } = render(
+    <Chip
+      onPress={pressHandler}
+      label={"foo"}
+      accessibilityLabel={accessibilityLabel}
+      isActive
+    />,
+  );
+
+  fireEvent.press(getByLabelText(accessibilityLabel));
+  expect(pressHandler).toHaveBeenCalled();
+});
+
+describe("accessibilityLabel", () => {
+  it("uses accessibilityLabel if specified", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <Chip
+        onPress={pressHandler}
+        label="label"
+        accessibilityLabel="accessibilityLabel"
+        isActive
+      />,
+    );
+
+    expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+  });
+
+  it("uses label if unspecified", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <Chip onPress={pressHandler} label="label" isActive />,
+    );
+
+    expect(getByLabelText("label")).toBeTruthy();
+  });
+});
+
+describe("accent", () => {
+  it("uses accent color when present and chip is Active", () => {
+    const { getByTestId } = render(
+      <Chip
+        label="Foo"
+        onPress={jest.fn()}
+        accessibilityLabel={"Foo chip"}
+        isActive={true}
+        accent={"client"}
+      />,
+    );
+    expect(getByTestId("chipTest").props.style).toContainEqual({
+      backgroundColor: tokens["color-client"],
+    });
+  });
+});

package/src/Chip/Chip.tsx

@@ -0,0 +1,142 @@
+import React, { useMemo } from "react";
+import { AccessibilityRole, Pressable, View } from "react-native";
+import { IconNames } from "@jobber/design";
+import { styles } from "./Chip.style";
+import { Icon } from "../Icon";
+import { Typography } from "../Typography";
+import { tokens } from "../utils/design";
+
+export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
+
+export interface ChipProps {
+  /**
+   * label of the chip.
+   */
+  readonly label?: string;
+
+  /**
+   * chip's active status
+   */
+  readonly isActive: boolean;
+
+  /**
+   * Boolean for chip's ability to be dismissed
+   */
+  readonly isDismissible?: boolean;
+
+  /**
+   * Background color to be used for inactive chips
+   *
+   * @default "background"
+   */
+  readonly inactiveBackgroundColor?: "surface" | "background";
+
+  /**
+   * Accessibility label for the component. It's also used for testing
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Accessibility role for the component
+   */
+  readonly accessibilityRole?: AccessibilityRole;
+
+  /**
+   * Press handler
+   */
+  onPress?(): void;
+
+  /**
+   * Optional Icon
+   */
+  readonly icon?: IconNames;
+
+  /**
+   * Background color to be used for Active chips
+   */
+  readonly accent?: AccentType;
+}
+
+const defaultAccentColor = tokens["color-surface--reverse"];
+
+export function Chip({
+  icon,
+  label,
+  onPress,
+  isDismissible,
+  isActive,
+  inactiveBackgroundColor = "background",
+  accessibilityLabel,
+  accessibilityRole = "radio",
+  accent,
+}: ChipProps): JSX.Element {
+  const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
+    const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
+
+    const iconColor = isActive ? tokens["color-surface"] : accentColor;
+    const chip = [
+      styles.container,
+      {
+        backgroundColor:
+          inactiveBackgroundColor === "surface"
+            ? tokens["color-surface"]
+            : tokens["color-surface--background"],
+      },
+      isActive && { backgroundColor: accentColor },
+    ];
+    const dismiss =
+      (isActive || inactiveBackgroundColor === "surface") &&
+      styles.activeDismissIcon;
+
+    return {
+      chipStyle: chip,
+      iconCustomColor: iconColor,
+      dismissColor: dismiss,
+    };
+  }, [accent, isActive, inactiveBackgroundColor]);
+
+  const accessibilityState = useMemo(() => {
+    const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
+    if (checkableRoles.includes(accessibilityRole)) {
+      return { checked: isActive };
+    }
+    return {};
+  }, [accessibilityRole, isActive]);
+
+  return (
+    <Pressable
+      testID="chipTest"
+      hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+      onPress={onPress}
+      disabled={typeof onPress !== "function"}
+      style={chipStyle}
+      accessibilityLabel={accessibilityLabel || label}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+    >
+      {icon && (
+        <View style={styles.iconLeft}>
+          <Icon name={icon} size={"base"} customColor={iconCustomColor} />
+        </View>
+      )}
+      {label && (
+        <View style={styles.chipText}>
+          <Typography
+            color="base"
+            fontWeight="medium"
+            maxFontScaleSize={tokens["typography--fontSize-large"]}
+            maxLines="single"
+            reverseTheme={isActive}
+          >
+            {label}
+          </Typography>
+        </View>
+      )}
+      {isDismissible && (
+        <View style={[styles.dismissIcon, dismissColor]}>
+          <Icon name={"remove"} size={"small"} />
+        </View>
+      )}
+    </Pressable>
+  );
+}

package/src/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from "./Chip";
+export type { AccentType } from "./Chip";

package/src/ProgressBar/ProgressBar.style.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  progressBarContainer: {
+    marginTop: tokens["space-small"],
+    marginBottom: tokens["space-small"],
+    height: 20,
+    position: "relative",
+    flexDirection: "row",
+  },
+  progressBarInner: {
+    backgroundColor: "rgba(255,255,255,0.3)",
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    borderRadius: 100,
+  },
+  progressInner: {
+    height: "100%",
+    borderRadius: 100,
+  },
+});

package/src/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ProgressBar, ProgressBarProps } from ".";
+
+const defaultSetupProps = {
+  total: 0,
+  current: 0,
+  inProgress: 0,
+  loading: false,
+};
+
+type ProgressBarCombinedProps = ProgressBarProps;
+
+function renderProgressBarComponent({
+  total,
+  current,
+  inProgress,
+}: ProgressBarCombinedProps) {
+  return render(
+    <ProgressBar total={total} current={current} inProgress={inProgress} />,
+  );
+}
+
+it("renders blue inProgress bar when 1 or more jobs is in progress", () => {
+  const bar = renderProgressBarComponent({
+    ...defaultSetupProps,
+    inProgress: 1,
+  }).toJSON();
+  expect(bar).toMatchSnapshot();
+});
+
+it("renders green CompletedProgress bar when 1 or more jobs is completed", () => {
+  const current = 1;
+  const bar = renderProgressBarComponent({
+    ...defaultSetupProps,
+    current: current,
+    total: 2,
+  });
+  expect(bar).toMatchSnapshot();
+  expect(bar.getByLabelText("1 of 2 complete")).toBeDefined();
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { ProgressBarProps } from "./types";
+import { styles } from "./ProgressBar.style";
+import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
+import { messages } from "./messages";
+import { tokens } from "../utils/design";
+
+export function ProgressBar({
+  loading,
+  total,
+  current,
+  inProgress = 0,
+  reverseTheme = false,
+  header,
+}: ProgressBarProps): JSX.Element {
+  const { formatMessage } = useIntl();
+  const accessibilityLabel = [];
+  accessibilityLabel.push(formatMessage(messages.complete, { current, total }));
+  inProgress &&
+    accessibilityLabel.push(formatMessage(messages.inProgress, { inProgress }));
+
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel.join(", ")}
+    >
+      {header}
+      <View style={styles.progressBarContainer}>
+        <ProgressBarInner
+          width={100}
+          animationDuration={0}
+          color={reverseTheme ? undefined : tokens["color-surface--background"]}
+        />
+        {!loading && (
+          <>
+            {inProgress && inProgress > 0 ? (
+              <ProgressBarInner
+                width={calculateWidth(total, current + inProgress)}
+                color={tokens["color-informative"]}
+                animationDuration={800}
+              />
+            ) : (
+              <></>
+            )}
+            <ProgressBarInner
+              width={calculateWidth(total, current)}
+              color={tokens["color-interactive"]}
+              animationDuration={600}
+            />
+          </>
+        )}
+      </View>
+    </View>
+  );
+}

package/src/ProgressBar/ProgressBarInner.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { View } from "react-native";
+// import Reanimated from "react-native-reanimated";
+// import { useTiming } from "utils/reanimated";
+import { styles } from "./ProgressBar.style";
+
+interface ProgressBarInnerProps {
+  readonly width: number;
+  readonly animationDuration?: number;
+  readonly color?: string;
+}
+
+export function ProgressBarInner({
+  width,
+  // animationDuration = 0,
+  color,
+}: ProgressBarInnerProps): JSX.Element {
+  // Animation breaking on Android
+  // const [animatedOpacity] = useTiming({
+  //   duration: animationDuration,
+  //   fromValue: 0,
+  //   toValue: 1,
+  // });
+
+  return (
+    <View
+      style={[
+        styles.progressBarInner,
+        {
+          width: `${width}%`,
+          // opacity: animatedOpacity,
+          ...(color && { backgroundColor: color }),
+        },
+      ]}
+    />
+  );
+}
+
+export function calculateWidth(total: number, current: number): number {
+  if (total <= 0) return 0;
+  if (current >= total) return 100;
+
+  const curr = Math.max(0, current);
+
+  if (curr >= total) return 100;
+  return (curr / total) * 100;
+}