@jobber/components-native 0.16.0 → 0.18.0

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+import { FlexProps } from "./types";
+export declare function Flex({ template, align, gap, children, }: PropsWithChildren<FlexProps>): JSX.Element;

package/dist/types/src/Flex/Flex.styles.d.ts

@@ -0,0 +1,9 @@
+import { ViewStyle } from "react-native";
+import { ColumnKeys } from "./types";
+export declare const styles: {
+    row: {
+        flexDirection: "row";
+    };
+};
+export declare const columnStyles: Record<ColumnKeys, ViewStyle>;
+export declare const gapStyles: Record<"none" | "small" | "base" | "smallest" | "smaller" | "large", ViewStyle>;

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

@@ -0,0 +1 @@
+export * from "./Flex";

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

@@ -0,0 +1,29 @@
+import { ViewStyle } from "react-native";
+export type ColumnKeys = "shrink" | "grow";
+export interface FlexProps {
+    /**
+     * Determine how the children gets laid out on the flex grid. If there are more
+     * Children than elements in the template, it will render multiple rows.
+     *
+     * **Supported keys**
+     * - `"grow"` - Grows to the space available. If all children are set to
+     *   grow, then they'll have equal width.
+     * - `"shrink"` - Shrinks to the smallest size possible. Normally the size of
+     *   the child.
+     *
+     * By default, this will set every children to grow in equal widths.
+     */
+    readonly template?: ColumnKeys[];
+    /**
+     * It works the same way as `alignItems` style with flex.
+     */
+    readonly align?: ViewStyle["alignItems"];
+    /**
+     * The spacing between the children.
+     */
+    readonly gap?: Spacing;
+}
+export declare const spacing: readonly ["none", "smallest", "smaller", "small", "base", "large"];
+type ValuesOfSpacing<T extends typeof spacing> = T[number];
+export type Spacing = ValuesOfSpacing<typeof spacing>;
+export {};

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { IconColorNames, IconNames } from "@jobber/design";
+interface IconButtonProps {
+    /**
+     * Press handler
+     */
+    onPress?(): void;
+    /** The icon to show.  */
+    readonly name: IconNames;
+    /**
+     * Accessibilty label for the component. It's also used for testing
+     */
+    readonly accessibilityLabel: string;
+    /**
+     * Determines the color of the icon. If not specified, some icons have a default system colour
+     * like quotes, jobs, and invoices.
+     * Others that don't have a system colour fall back to greyBlue.
+     */
+    readonly color?: IconColorNames;
+    /**
+     * Sets a custom color for the icon. Can be a rgb() or hex value.
+     */
+    readonly customColor?: string;
+    /**
+     * a component that would render over the icon
+     * e.g. the number of notifications over the activity feed icon
+     */
+    readonly badge?: React.ReactNode;
+    /**
+     * Used to locate this button in tests
+     */
+    readonly testID?: string;
+}
+export declare function IconButton({ badge, name, color, customColor, onPress, accessibilityLabel, testID, }: IconButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const styles: {
+    container: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};

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

@@ -0,0 +1 @@
+export { IconButton } from "./IconButton";

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

@@ -1,17 +1,19 @@
-export * from "./Icon";
-export * from "./Divider";
-export * from "./Typography";
-export * from "./Text";
-export * from "./ErrorMessageWrapper";
+export * from "./ActionItem";
 export * from "./ActionLabel";
-export * from "./Content";
 export * from "./ActivityIndicator";
-export * from "./Card";
-export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
+export * from "./Card";
+export * from "./Chip";
+export * from "./Content";
+export * from "./Divider";
+export * from "./ErrorMessageWrapper";
+export * from "./Flex";
+export * from "./Heading";
+export * from "./Icon";
+export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./ProgressBar";
-export * from "./Heading";
-export * from "./Chip";
-export * from "./ActionItem";
+export * from "./StatusLabel";
+export * from "./Text";
+export * from "./Typography";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@jobber/design": "^0.40.0",
+    "lodash.chunk": "^4.2.0",
     "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
     "react-native-gesture-handler": "^2.5.0",
@@ -35,6 +36,7 @@
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/react-native": "^12.0.1",
+    "@types/lodash.chunk": "^4.2.7",
     "@types/react": "^18.0.28",
     "@types/react-native": "^0.71.6",
     "@types/react-native-uuid": "^1.4.0",
@@ -47,5 +49,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "0315bc6a7dea11378a1f187a78ee7d55f0600c0c"
+  "gitHead": "792c5dfee7847194e09713617184b61f70431e30"
 }

package/src/Flex/Flex.styles.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, ViewStyle } from "react-native";
+import { ColumnKeys, Spacing, spacing } from "./types";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+});
+
+export const columnStyles: Record<ColumnKeys, ViewStyle> = StyleSheet.create({
+  shrink: {
+    flexGrow: 0,
+    flexShrink: 1,
+  },
+  grow: {
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 0,
+  },
+});
+
+export const gapStyles = StyleSheet.create(
+  spacing.reduce((gapObj, space) => {
+    let paddingLeft = 0;
+    if (space !== "none") paddingLeft = tokens[`space-${space}`];
+
+    gapObj[space] = { paddingLeft };
+    return gapObj;
+  }, {} as Record<Spacing, ViewStyle>),
+);

package/src/Flex/Flex.test.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View, ViewStyle } from "react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import { JobberStyle } from "@jobber/design/foundation";
+import { Flex } from "./Flex";
+import { FlexProps, Spacing } from "./types";
+import { columnStyles } from "./Flex.styles";
+import { Text } from "../Text";
+import { Icon } from "../Icon";
+
+function getContentComponent(parentView: ReactTestInstance) {
+  return (parentView?.children[0] as ReactTestInstance)
+    ?.children[0] as ReactTestInstance;
+}
+
+function getFlexCol(flexRow: ReactTestInstance) {
+  return flexRow.children as ReactTestInstance[];
+}
+function setUp(props?: FlexProps) {
+  const container = render(
+    <View accessibilityLabel="contentView">
+      <Flex align={props?.align} template={props?.template} gap={props?.gap}>
+        <Icon name={"email"} />
+        <Text>Hi onLookers!</Text>
+        <Text>You look Great Today!</Text>
+        <Text>Thanks for coming to my Ted Talk :D</Text>
+      </Flex>
+    </View>,
+  );
+  const contentView = getContentComponent(
+    container.getByLabelText("contentView"),
+  );
+  const flexRow = container.getAllByTestId("ATL-Flex-Row");
+  const flexCol = getFlexCol(flexRow[0]);
+  return { ...container, contentView, flexRow, flexCol };
+}
+
+describe("Gap", () => {
+  const gapTestCases: [Spacing, number][] = [
+    ["none", 0],
+    ["smallest", JobberStyle["space-smallest"]],
+    ["smaller", JobberStyle["space-smaller"]],
+    ["small", JobberStyle["space-small"]],
+    ["base", JobberStyle["space-base"]],
+    ["large", JobberStyle["space-large"]],
+  ];
+  it.each(gapTestCases)(
+    "Should have a gap of %s around the children components",
+    (a, expected) => {
+      const { contentView, flexCol } = setUp({
+        template: ["grow", "grow", "shrink"],
+        gap: a,
+      });
+      expect(flexCol[1].props.style).toContainEqual({
+        paddingLeft: expected,
+      });
+      expect(contentView.props.childSpacing).toEqual(a);
+    },
+  );
+});
+
+describe("Vertical alignment", () => {
+  it("should align children to center by default if align is not specified", () => {
+    const { flexRow } = setUp({
+      template: ["grow", "grow", "shrink"],
+      gap: "large",
+    });
+
+    expect(flexRow[0].props.style).toContainEqual({ alignItems: "center" });
+  });
+
+  const alignTestCases: [ViewStyle["alignItems"]][] = [
+    ["flex-start"],
+    ["flex-end"],
+    ["center"],
+    ["baseline"],
+    ["stretch"],
+  ];
+  it.each(alignTestCases)("should align children to %s", a => {
+    const { flexRow } = setUp({
+      template: ["grow", "grow", "shrink"],
+      align: a,
+    });
+
+    expect(flexRow[0].props.style).toContainEqual({
+      alignItems: a,
+    });
+  });
+});
+
+describe("Layout", () => {
+  it("should by default display a 1 row flex grid with equal spacing between each children", () => {
+    const { flexCol, flexRow } = setUp({});
+
+    expect(flexCol[0].props.style).toContainEqual(columnStyles.grow);
+    expect(flexCol[1].props.style).toContainEqual(columnStyles.grow);
+    expect(flexCol[2].props.style).toContainEqual(columnStyles.grow);
+    expect(flexCol[3].props.style).toContainEqual(columnStyles.grow);
+    expect(flexRow.length).toEqual(1);
+  });
+
+  it("should follow the template to decide whether to grow or shrink", () => {
+    const { flexCol } = setUp({
+      template: ["grow", "grow", "shrink"],
+    });
+
+    expect(flexCol[0].props.style).toContainEqual(columnStyles.grow);
+    expect(flexCol[1].props.style).toContainEqual(columnStyles.grow);
+    expect(flexCol[2].props.style).toContainEqual(columnStyles.shrink);
+  });
+
+  it("should create a flex grid with 2 rows", () => {
+    const { flexRow } = setUp({
+      template: ["grow", "grow", "shrink"],
+    });
+
+    expect(flexRow.length).toEqual(2);
+  });
+
+  it("should inject extra children on the last row of a multiRow flex grid if needed", () => {
+    const { flexRow } = setUp({
+      template: ["grow", "grow", "shrink"],
+    });
+    const flexCol2 = getFlexCol(flexRow[1]);
+    expect(flexRow.length > 1).toBeTruthy();
+    expect(flexCol2.length).toEqual(3);
+  });
+});

package/src/Flex/Flex.tsx

@@ -0,0 +1,71 @@
+import React, { Children, PropsWithChildren } from "react";
+import { View } from "react-native";
+import chunk from "lodash.chunk";
+import { columnStyles, gapStyles, styles } from "./Flex.styles";
+import { FlexProps } from "./types";
+import { Content } from "../Content";
+
+export function Flex({
+  template = [],
+  align = "center",
+  gap = "base",
+  children,
+}: PropsWithChildren<FlexProps>): JSX.Element {
+  if (template.length === 1) {
+    console.warn("Please use <Content /> component for a stacked layout");
+  }
+
+  const childrenArray = Children.toArray(children);
+  const chunkedChildren = chunk(
+    childrenArray,
+    template.length || childrenArray.length,
+  );
+
+  return (
+    <Content spacing="none" childSpacing={gap}>
+      {chunkedChildren.map((childArray, rowIndex) => (
+        <Row key={rowIndex} template={template} align={align} gap={gap}>
+          {injectChild(childArray)}
+        </Row>
+      ))}
+    </Content>
+  );
+
+  function injectChild(value: ReturnType<typeof Children.toArray>) {
+    const hasMoreRows = chunkedChildren.length > 1;
+    const childrenCount = value.length;
+    const templateCount = template.length;
+
+    if (hasMoreRows && childrenCount < templateCount) {
+      const missingChildCount = templateCount - childrenCount;
+
+      for (let index = 0; index < missingChildCount; index++) {
+        value.push(<React.Fragment key={index} />);
+      }
+    }
+
+    return value;
+  }
+}
+
+function Row({
+  template = [],
+  align = "center",
+  gap = "base",
+  children,
+}: PropsWithChildren<FlexProps>): JSX.Element {
+  return (
+    <View testID="ATL-Flex-Row" style={[styles.row, { alignItems: align }]}>
+      {Children.map(children, (child, index) => (
+        <View
+          style={[
+            columnStyles[template[index]] || columnStyles.grow,
+            index > 0 && gap && gapStyles[gap],
+          ]}
+        >
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/Flex/index.ts

@@ -0,0 +1 @@
+export * from "./Flex";

package/src/Flex/types.ts

@@ -0,0 +1,41 @@
+import { ViewStyle } from "react-native";
+
+export type ColumnKeys = "shrink" | "grow";
+
+export interface FlexProps {
+  /**
+   * Determine how the children gets laid out on the flex grid. If there are more
+   * Children than elements in the template, it will render multiple rows.
+   *
+   * **Supported keys**
+   * - `"grow"` - Grows to the space available. If all children are set to
+   *   grow, then they'll have equal width.
+   * - `"shrink"` - Shrinks to the smallest size possible. Normally the size of
+   *   the child.
+   *
+   * By default, this will set every children to grow in equal widths.
+   */
+  readonly template?: ColumnKeys[];
+
+  /**
+   * It works the same way as `alignItems` style with flex.
+   */
+  readonly align?: ViewStyle["alignItems"];
+
+  /**
+   * The spacing between the children.
+   */
+  readonly gap?: Spacing;
+}
+
+export const spacing = [
+  "none",
+  "smallest",
+  "smaller",
+  "small",
+  "base",
+  "large",
+] as const;
+
+type ValuesOfSpacing<T extends typeof spacing> = T[number];
+export type Spacing = ValuesOfSpacing<typeof spacing>;

package/src/IconButton/IconButton.style.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: tokens["space-largest"],
+    height: tokens["space-largest"],
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/src/IconButton/IconButton.test.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { IconButton } from "./IconButton";
+import { Text } from "../Text";
+
+describe("IconButton", () => {
+  it("renders an IconButton", () => {
+    const pressHandler = jest.fn();
+    const { getByTestId } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        accessibilityLabel="Job Button"
+        testID="JobButton"
+      />,
+    );
+
+    expect(getByTestId("JobButton")).toBeDefined();
+  });
+
+  it("should call the onPress", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        accessibilityLabel={"Job Button"}
+      />,
+    );
+    fireEvent.press(getByLabelText("Job Button"));
+    expect(pressHandler).toHaveBeenCalled();
+  });
+
+  it("should render badge component", () => {
+    const pressHandler = jest.fn();
+    const badge = <Text>Hi</Text>;
+    const { getByText } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        badge={badge}
+        accessibilityLabel={"Job Button"}
+      />,
+    );
+    expect(getByText("Hi")).toBeDefined();
+  });
+
+  it("should render IconButton with custom color", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        customColor="#f33323"
+        accessibilityLabel={"Job Button"}
+      />,
+    );
+    const iconBtnColorProp = getByLabelText("Job Button").findByProps({
+      customColor: "#f33323",
+    }).props.customColor;
+
+    expect(iconBtnColorProp).toEqual("#f33323");
+  });
+
+  it("should expose testID", () => {
+    const pressHandler = jest.fn();
+    const testID = "JobButton";
+    const { getByTestId } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        accessibilityLabel={"Job Button"}
+        testID={testID}
+      />,
+    );
+    fireEvent.press(getByTestId(testID));
+    expect(pressHandler).toHaveBeenCalled();
+  });
+});

package/src/IconButton/IconButton.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { IconColorNames, IconNames } from "@jobber/design";
+import { styles } from "./IconButton.style";
+import { Icon } from "../Icon";
+
+interface IconButtonProps {
+  /**
+   * Press handler
+   */
+  onPress?(): void;
+
+  /** The icon to show.  */
+  readonly name: IconNames;
+
+  /**
+   * Accessibilty label for the component. It's also used for testing
+   */
+  readonly accessibilityLabel: string;
+
+  /**
+   * Determines the color of the icon. If not specified, some icons have a default system colour
+   * like quotes, jobs, and invoices.
+   * Others that don't have a system colour fall back to greyBlue.
+   */
+  readonly color?: IconColorNames;
+
+  /**
+   * Sets a custom color for the icon. Can be a rgb() or hex value.
+   */
+  readonly customColor?: string;
+
+  /**
+   * a component that would render over the icon
+   * e.g. the number of notifications over the activity feed icon
+   */
+  readonly badge?: React.ReactNode;
+
+  /**
+   * Used to locate this button in tests
+   */
+  readonly testID?: string;
+}
+
+export function IconButton({
+  badge,
+  name,
+  color,
+  customColor,
+  onPress,
+  accessibilityLabel,
+  testID,
+}: IconButtonProps): JSX.Element {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={styles.container}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      {badge}
+      <Icon name={name} color={color} customColor={customColor} />
+    </TouchableOpacity>
+  );
+}

package/src/IconButton/index.ts

@@ -0,0 +1 @@
+export { IconButton } from "./IconButton";

package/src/index.ts

@@ -1,17 +1,19 @@
-export * from "./Icon";
-export * from "./Divider";
-export * from "./Typography";
-export * from "./Text";
-export * from "./ErrorMessageWrapper";
+export * from "./ActionItem";
 export * from "./ActionLabel";
-export * from "./Content";
 export * from "./ActivityIndicator";
-export * from "./Card";
-export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
+export * from "./Card";
+export * from "./Chip";
+export * from "./Content";
+export * from "./Divider";
+export * from "./ErrorMessageWrapper";
+export * from "./Flex";
+export * from "./Heading";
+export * from "./Icon";
+export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./ProgressBar";
-export * from "./Heading";
-export * from "./Chip";
-export * from "./ActionItem";
+export * from "./StatusLabel";
+export * from "./Text";
+export * from "./Typography";