@jobber/components-native 0.17.0 → 0.19.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/index.d.ts

@@ -8,6 +8,7 @@ export * from "./Chip";
 export * from "./Content";
 export * from "./Divider";
 export * from "./ErrorMessageWrapper";
+export * from "./Flex";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -21,7 +21,8 @@
     "build:clean": "rm -rf ./dist"
   },
   "dependencies": {
-    "@jobber/design": "^0.40.0",
+    "@jobber/design": "^0.41.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": "4f8524610aba80691217778e1824149409c65524"
+  "gitHead": "e112ab079fb049e3ef003bb4c27ccae64cd75991"
 }

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/Heading/__snapshots__/Heading.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`when Heading called with Subtitle variation should match snapshot 1`] =
   collapsable={false}
   maxFontSizeMultiplier={1}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -41,7 +41,7 @@ exports[`when Heading called with an alignment should match snapshot 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -75,7 +75,7 @@ exports[`when Heading called with maxLines should match snapshot 1`] = `
   collapsable={false}
   numberOfLines={1}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -108,7 +108,7 @@ exports[`when Heading called with reverseTheme should match snapshot 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -142,7 +142,7 @@ exports[`when Heading called with sub-heading variation and text-color should ma
   collapsable={false}
   maxFontSizeMultiplier={1.375}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -176,7 +176,7 @@ exports[`when Heading called with sub-heading variation should match snapshot 1`
   collapsable={false}
   maxFontSizeMultiplier={1.375}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -209,7 +209,7 @@ exports[`when Heading called with text as the only prop should match snapshot 1`
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -243,7 +243,7 @@ exports[`when Heading called with title variation should match snapshot 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={1.0625}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {

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

@@ -27,7 +27,7 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
       collapsable={false}
       maxFontSizeMultiplier={1.1428571428571428}
       selectable={true}
-      selectionColor="rgb(160, 215, 42)"
+      selectionColor="rgb(132, 234, 0)"
       style={
         [
           {
@@ -106,7 +106,7 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
       collapsable={false}
       maxFontSizeMultiplier={1.1428571428571428}
       selectable={true}
-      selectionColor="rgb(160, 215, 42)"
+      selectionColor="rgb(132, 234, 0)"
       style={
         [
           {
@@ -185,7 +185,7 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
       collapsable={false}
       maxFontSizeMultiplier={1.1428571428571428}
       selectable={true}
-      selectionColor="rgb(160, 215, 42)"
+      selectionColor="rgb(132, 234, 0)"
       style={
         [
           {
@@ -264,7 +264,7 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
       collapsable={false}
       maxFontSizeMultiplier={1.1428571428571428}
       selectable={true}
-      selectionColor="rgb(160, 215, 42)"
+      selectionColor="rgb(132, 234, 0)"
       style={
         [
           {
@@ -343,7 +343,7 @@ exports[`StatusLabel status when status prop set to "informative" should match s
       collapsable={false}
       maxFontSizeMultiplier={1.1428571428571428}
       selectable={true}
-      selectionColor="rgb(160, 215, 42)"
+      selectionColor="rgb(132, 234, 0)"
       style={
         [
           {
@@ -422,7 +422,7 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
       collapsable={false}
       maxFontSizeMultiplier={1.1428571428571428}
       selectable={true}
-      selectionColor="rgb(160, 215, 42)"
+      selectionColor="rgb(132, 234, 0)"
       style={
         [
           {
@@ -501,7 +501,7 @@ exports[`StatusLabel status when status prop set to default ("success") should m
       collapsable={false}
       maxFontSizeMultiplier={1.1428571428571428}
       selectable={true}
-      selectionColor="rgb(160, 215, 42)"
+      selectionColor="rgb(132, 234, 0)"
       style={
         [
           {

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

@@ -8,7 +8,7 @@ exports[`renders text supporting with no additional props 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={1.1428571428571428}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -42,7 +42,7 @@ exports[`renders text supporting with variation success 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={1.1428571428571428}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -76,7 +76,7 @@ exports[`renders text supporting with variation success reverseTheme true 1`] =
   collapsable={false}
   maxFontSizeMultiplier={1.1428571428571428}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -111,7 +111,7 @@ exports[`renders text that is not scaled down with adjustsFontSize false 1`] = `
   maxFontSizeMultiplier={3.125}
   numberOfLines={4}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -146,7 +146,7 @@ exports[`renders text that is scaled down with adjustsFontSize true 1`] = `
   maxFontSizeMultiplier={3.125}
   numberOfLines={4}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -180,7 +180,7 @@ exports[`renders text with base variation 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -214,7 +214,7 @@ exports[`renders text with center alignment 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -248,7 +248,7 @@ exports[`renders text with error variation 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -282,7 +282,7 @@ exports[`renders text with error variation reverseTheme true 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -316,7 +316,7 @@ exports[`renders text with info variation 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -350,7 +350,7 @@ exports[`renders text with left alignment 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -384,7 +384,7 @@ exports[`renders text with no additional props 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -418,7 +418,7 @@ exports[`renders text with right alignment 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -452,7 +452,7 @@ exports[`renders text with subdued variation 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -486,7 +486,7 @@ exports[`renders text with success variation 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -520,7 +520,7 @@ exports[`renders text with success variation reverseTheme true 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -554,7 +554,7 @@ exports[`renders text with warn variation 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {
@@ -588,7 +588,7 @@ exports[`renders with strikethrough styling 1`] = `
   collapsable={false}
   maxFontSizeMultiplier={3.125}
   selectable={true}
-  selectionColor="rgb(160, 215, 42)"
+  selectionColor="rgb(132, 234, 0)"
   style={
     [
       {