@jobber/components-native 0.13.0 → 0.14.0

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,5 +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.13.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": "bfc022e4558ae4f056b05b1186c4f82eb137ae0e"
+  "gitHead": "7237667e48edeb962f88a75bacaaca79e510f415"
 }

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;
+}

package/src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
+<View
+  accessibilityLabel="0 of 0 complete, 1 in progress"
+  accessibilityRole="progressbar"
+  accessible={true}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "height": 20,
+        "marginBottom": 8,
+        "marginTop": 8,
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(244, 244, 244)",
+            "width": "100%",
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(60, 162, 224)",
+            "width": "0%",
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(125, 176, 14)",
+            "width": "0%",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`] = `
+<View
+  accessibilityLabel="1 of 2 complete"
+  accessibilityRole="progressbar"
+  accessible={true}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "height": 20,
+        "marginBottom": 8,
+        "marginTop": 8,
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(244, 244, 244)",
+            "width": "100%",
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(125, 176, 14)",
+            "width": "50%",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;

package/src/ProgressBar/index.tsx

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

package/src/ProgressBar/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  complete: {
+    id: "complete",
+    defaultMessage: "{current} of {total} complete",
+    description: "Progress bar accessibilityLabel for current/total",
+  },
+  inProgress: {
+    id: "inProgress",
+    defaultMessage: "{inProgress} in progress",
+    description: "Progress bar accessibilityLabel for inProgress/total",
+  },
+});

package/src/ProgressBar/types.ts

@@ -0,0 +1,34 @@
+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/src/index.ts

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