@jobber/components-native 0.13.0 → 0.15.0

package/src/ActionItem/components/ActionItemContainer.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./ActionItemContainer.style";
+import { styles as actionItemStyles } from "../ActionItem.style";
+
+interface ActionItemContainerProps {
+  readonly children: ReactNode;
+  readonly title?: string;
+  readonly onPress?: () => void;
+  readonly testID?: string;
+}
+
+export function ActionItemContainer({
+  onPress,
+  title,
+  children,
+  testID,
+}: ActionItemContainerProps): JSX.Element {
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [
+          styles.container,
+          actionItemStyles.actionItemHorizontalOffset,
+          pressed && styles.pressed,
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={title}
+        testID={testID}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.container, actionItemStyles.actionItemHorizontalOffset]}
+      testID={testID}
+    >
+      {children}
+    </View>
+  );
+}

package/src/ActionItem/index.ts

@@ -0,0 +1,2 @@
+export { ActionItem, ActionItemProps } from "./ActionItem";
+export { ActionItemGroup } from "./ActionItemGroup";

package/src/Button/Button.tsx

@@ -3,7 +3,6 @@ import { TouchableHighlight, View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
 import { styles } from "./Button.style";
-// eslint-disable-next-line import/no-internal-modules
 import { InternalButtonLoading } from "./components/InternalButtonLoading";
 import { ButtonSize, ButtonType, ButtonVariation } from "./types";
 import { ActionLabel, ActionLabelVariation } from "../ActionLabel";

package/src/Card/Card.tsx

@@ -8,7 +8,6 @@ import {
 import { IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
 import { styles } from "./Card.style";
-// eslint-disable-next-line import/no-internal-modules
 import { InternalCardHeader } from "./components/InternalCardHeader";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { ActionLabel } from "../ActionLabel";
@@ -49,7 +48,7 @@ type HeaderActionProps =
     }
   | {
       readonly onPress: () => void;
-      readonly actionItem: ActionItem;
+      readonly actionItem: CardAction;
     };
 
 interface IconAction {
@@ -60,7 +59,7 @@ interface ButtonAction {
   readonly label: string;
 }
 
-export type ActionItem = XOR<IconAction, ButtonAction>;
+export type CardAction = XOR<IconAction, ButtonAction>;
 
 function getElevationStyle(elevation: elevationProp) {
   if (elevation === "none") {

package/src/Card/index.ts

@@ -1,2 +1,2 @@
 export { Card } from "./Card";
-export type { ActionItem, HeaderProps } from "./Card";
+export type { CardAction, HeaderProps } from "./Card";

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,7 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./ProgressBar";
 export * from "./Heading";
 export * from "./Chip";
+export * from "./ActionItem";