@jobber/components-native 0.35.0 → 0.36.0

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

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { XOR } from "ts-xor";
+interface CommonCheckboxProps {
+    /**
+     * Label to be displayed beside the checkbox
+     */
+    readonly label?: string;
+    /**
+     * Default value for when the checkbox is uncontrolled
+     */
+    readonly defaultChecked?: boolean;
+    /**
+     * When true, the checkbox is shown as indeterminate
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * Checkbox is disabled
+     */
+    readonly disabled?: boolean;
+    /**
+     * Assistive Text, shown under label
+     */
+    readonly assistiveText?: string;
+    /**
+     * Accessibility Label for the checkbox. Defaults to label
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Press handler
+     */
+    onChange?(value: boolean): void;
+    /**
+     * If the checkbox is checked. This should be set when this is intended as a controlled component
+     */
+    readonly checked?: boolean;
+    /**
+     * Name of the checkbox; this is important when using in a form component
+     */
+    readonly name?: string;
+}
+interface ControlledCheckboxProps extends CommonCheckboxProps {
+    /**
+     * Press handler
+     */
+    onChange(value: boolean): void;
+    /**
+     * If the checkbox is checked. This should be set when this is intended as a controlled component
+     */
+    readonly checked: boolean;
+}
+interface UncontrolledCheckboxProps extends CommonCheckboxProps {
+    /**
+     * Name of the checkbox; this is important when using in a form component
+     */
+    readonly name: string;
+}
+export type CheckboxProps = XOR<ControlledCheckboxProps, UncontrolledCheckboxProps>;
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+export declare const styles: {
+    container: {
+        width: string;
+    };
+    checkBoxContainer: {
+        width: string;
+        justifyContent: "space-between";
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+    };
+    label: {
+        flex: number;
+    };
+    checkbox: {
+        borderRadius: number;
+        borderWidth: number;
+        justifyContent: "flex-end";
+        width: number;
+        height: number;
+        marginLeft: number;
+        borderColor: string;
+    };
+    disabledCheckbox: {
+        borderColor: string;
+    };
+};

package/dist/types/src/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { XOR } from "ts-xor";
+import { CheckboxProps } from "./Checkbox";
+import { CheckboxElement, CheckboxGroupState } from "./types";
+interface CommonCheckboxGroupProps extends Omit<CheckboxProps, "onChange"> {
+    /**
+     * Checkbox items
+     */
+    children: CheckboxElement[];
+    state?: CheckboxGroupState;
+    onChange?(groupChecks: CheckboxGroupState): void;
+}
+interface ControlledCheckboxGroupProps extends CommonCheckboxGroupProps {
+    state: CheckboxGroupState;
+    onChange(groupChecks: CheckboxGroupState): void;
+}
+interface UncontrolledCheckboxGroupProps extends CommonCheckboxGroupProps {
+    name: string;
+}
+export type CheckboxGroupProps = XOR<UncontrolledCheckboxGroupProps, ControlledCheckboxGroupProps>;
+export declare function CheckboxGroup({ children, state, onChange, name, ...rest }: CheckboxGroupProps): JSX.Element;
+export {};

package/dist/types/src/Checkbox/CheckboxGroup.style.d.ts

@@ -0,0 +1,12 @@
+export declare const styles: {
+    container: {
+        width: string;
+        justifyContent: "center";
+        alignItems: "center";
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    nestedCheckboxes: {
+        marginLeft: number;
+    };
+};

package/dist/types/src/Checkbox/CheckboxGroupReducer.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxGroupState, CheckboxGroupStateInitializer } from "./types";
+interface UpdateAction {
+    type: "Update";
+    data: Partial<CheckboxGroupState>;
+}
+type CheckboxGroupAction = UpdateAction;
+export declare function initCheckboxGroupState(childNames: CheckboxGroupStateInitializer): CheckboxGroupState;
+export declare function checkboxGroupReducer(state: CheckboxGroupState, action: CheckboxGroupAction): CheckboxGroupState;
+export {};

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

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { CheckboxGroup } from "./CheckboxGroup";

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

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+import { Checkbox, CheckboxProps } from "./Checkbox";
+export interface CheckboxGroupChildrenState {
+    [key: string]: boolean;
+}
+export interface CheckboxGroupState {
+    parentChecked?: boolean;
+    childrenChecked: CheckboxGroupChildrenState;
+}
+export type CheckboxGroupStateInitializer = string[];
+export type CheckboxElement = ReactElement<CheckboxProps, typeof Checkbox>;

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

@@ -7,6 +7,7 @@ export * from "./BottomSheet";
 export * from "./Button";
 export * from "./ButtonGroup";
 export * from "./Card";
+export * from "./Checkbox";
 export * from "./Chip";
 export * from "./Content";
 export * from "./Divider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -37,6 +37,7 @@
   "dependencies": {
     "@jobber/design": "^0.42.0",
     "@react-native-picker/picker": "^2.4.10",
+    "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
     "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
@@ -74,5 +75,5 @@
     "react-native": ">=0.69.2",
     "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "5028c2bd4c97479b567b031432a331e3884afcaa"
+  "gitHead": "8c1f0b371ca033af1e54e2dbf7e1e0c2f199be00"
 }

package/src/Checkbox/Checkbox.style.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const checkboxDimensions = tokens["space-large"] + tokens["space-smaller"];
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+
+  checkBoxContainer: {
+    width: "100%",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: tokens["space-small"],
+  },
+
+  label: {
+    flex: 1,
+  },
+
+  checkbox: {
+    borderRadius: tokens["radius-base"],
+    borderWidth: tokens["border-thick"],
+    justifyContent: "flex-end",
+    width: checkboxDimensions,
+    height: checkboxDimensions,
+    marginLeft: tokens["space-smaller"],
+    borderColor: tokens["color-interactive"],
+  },
+
+  disabledCheckbox: {
+    borderColor: tokens["color-disabled"],
+  },
+});

package/src/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Checkbox } from "./Checkbox";
+
+const accessibilityLabel = "testA11y";
+const onChange = jest.fn();
+afterEach(() => jest.resetAllMocks());
+
+describe("Checkbox", () => {
+  it("renders checkbox label", () => {
+    const label = "TestLabel";
+    const { getByLabelText } = render(
+      <Checkbox name="testCheckbox" label={label} />,
+    );
+    expect(getByLabelText(label)).toBeTruthy();
+  });
+
+  it("renders checkbox with defaultChecked set to true", () => {
+    const { getByTestId, getByRole } = render(
+      <Checkbox name="testCheckbox" defaultChecked={true} />,
+    );
+    expect(getByRole("checkbox").props.accessibilityState).toHaveProperty(
+      "checked",
+      true,
+    );
+    expect(getByTestId("checkmark")).toBeDefined();
+  });
+
+  it("renders checkbox label with assistive text", () => {
+    const label = "TestLabel";
+    const assistive = "TestAssistive";
+    const { getByLabelText, getByText } = render(
+      <Checkbox name="testCheckbox" label={label} assistiveText={assistive} />,
+    );
+    expect(getByLabelText(label)).toBeTruthy();
+    expect(getByText(assistive)).toBeTruthy();
+  });
+
+  it("will call onChange with true when pressed without default checked state set", () => {
+    const { getByLabelText } = render(
+      <Checkbox
+        name="testCheckbox"
+        onChange={onChange}
+        accessibilityLabel={accessibilityLabel}
+      />,
+    );
+    const checkbox = getByLabelText(accessibilityLabel);
+    fireEvent.press(checkbox);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("will call onChange with false when checked checkbox is pressed", () => {
+    const { getByLabelText } = render(
+      <Checkbox
+        name="onChangeTest"
+        checked={true}
+        onChange={onChange}
+        accessibilityLabel={accessibilityLabel}
+      />,
+    );
+    const checkbox = getByLabelText(accessibilityLabel);
+    fireEvent.press(checkbox);
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+  it("will call onChange with true when unchecked checkbox is pressed", () => {
+    const { getByLabelText } = render(
+      <Checkbox
+        name="onChangeTest"
+        checked={false}
+        onChange={onChange}
+        accessibilityLabel={accessibilityLabel}
+      />,
+    );
+    const checkbox = getByLabelText(accessibilityLabel);
+    fireEvent.press(checkbox);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("will not call onChange when disabled", () => {
+    const { getByLabelText } = render(
+      <Checkbox
+        name="testCheckbox"
+        onChange={onChange}
+        disabled={true}
+        accessibilityLabel={accessibilityLabel}
+      />,
+    );
+    const checkbox = getByLabelText(accessibilityLabel);
+    fireEvent.press(checkbox);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("can be set as indeterminate", () => {
+    const { getByTestId } = render(
+      <Checkbox
+        name="testCheckbox"
+        onChange={onChange}
+        indeterminate={true}
+        accessibilityLabel={accessibilityLabel}
+      />,
+    );
+    expect(getByTestId("minus2")).toBeDefined();
+  });
+});

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import { ColorValue, Pressable, View } from "react-native";
+import { XOR } from "ts-xor";
+import { tokens } from "@jobber/design/foundation";
+import { styles } from "./Checkbox.style";
+import { Text } from "../Text";
+import { Icon } from "../Icon";
+import { FormField } from "../FormField";
+
+interface CommonCheckboxProps {
+  /**
+   * Label to be displayed beside the checkbox
+   */
+  readonly label?: string;
+
+  /**
+   * Default value for when the checkbox is uncontrolled
+   */
+  readonly defaultChecked?: boolean;
+
+  /**
+   * When true, the checkbox is shown as indeterminate
+   */
+  readonly indeterminate?: boolean;
+
+  /**
+   * Checkbox is disabled
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Assistive Text, shown under label
+   */
+  readonly assistiveText?: string;
+
+  /**
+   * Accessibility Label for the checkbox. Defaults to label
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Press handler
+   */
+  onChange?(value: boolean): void;
+
+  /**
+   * If the checkbox is checked. This should be set when this is intended as a controlled component
+   */
+  readonly checked?: boolean;
+
+  /**
+   * Name of the checkbox; this is important when using in a form component
+   */
+  readonly name?: string;
+}
+
+interface ControlledCheckboxProps extends CommonCheckboxProps {
+  /**
+   * Press handler
+   */
+  onChange(value: boolean): void;
+
+  /**
+   * If the checkbox is checked. This should be set when this is intended as a controlled component
+   */
+  readonly checked: boolean;
+}
+
+interface UncontrolledCheckboxProps extends CommonCheckboxProps {
+  /**
+   * Name of the checkbox; this is important when using in a form component
+   */
+  readonly name: string;
+}
+
+export type CheckboxProps = XOR<
+  ControlledCheckboxProps,
+  UncontrolledCheckboxProps
+>;
+
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  if (props.checked !== undefined && props.onChange !== undefined) {
+    return <CheckboxInternal {...props} />;
+  } else if (props.name) {
+    return (
+      <FormField<boolean> name={props.name} defaultValue={props.defaultChecked}>
+        {field => {
+          return (
+            <CheckboxInternal
+              {...props}
+              checked={field.value}
+              onChange={newValue => {
+                props?.onChange?.(newValue);
+                field.onChange(newValue);
+              }}
+            />
+          );
+        }}
+      </FormField>
+    );
+  } else {
+    throw new Error("Checkbox was given invalid props");
+  }
+}
+
+function CheckboxInternal({
+  label,
+  checked,
+  defaultChecked,
+  indeterminate = false,
+  disabled = false,
+  assistiveText,
+  onChange,
+  accessibilityLabel,
+}: CheckboxProps): JSX.Element {
+  const internalValue = checked ?? !!defaultChecked;
+
+  const iconName = indeterminate ? "minus2" : "checkmark";
+  const textVariation = disabled ? "disabled" : "subdued";
+  const a11yStateChecked = indeterminate ? "mixed" : internalValue;
+
+  const backgroundColor = getBackgroundColor(
+    internalValue,
+    disabled,
+    indeterminate,
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityLabel={accessibilityLabel || label}
+      accessibilityState={{
+        disabled: disabled,
+        checked: a11yStateChecked,
+      }}
+      disabled={disabled}
+      style={({ pressed }) => [
+        {
+          opacity: pressed ? 0.2 : 1,
+        },
+        styles.container,
+      ]}
+      onPress={() => {
+        onChange?.(!internalValue);
+      }}
+    >
+      <View style={styles.checkBoxContainer}>
+        {label && (
+          <View style={styles.label}>
+            <Text variation={textVariation} align="start">
+              {label}
+            </Text>
+          </View>
+        )}
+        <View
+          style={[
+            styles.checkbox,
+            disabled && styles.disabledCheckbox,
+            {
+              backgroundColor,
+            },
+          ]}
+        >
+          {(internalValue || indeterminate) && (
+            <Icon name={iconName} color="white" />
+          )}
+        </View>
+      </View>
+      {assistiveText && (
+        <Text level="textSupporting" align="start" variation={textVariation}>
+          {assistiveText}
+        </Text>
+      )}
+    </Pressable>
+  );
+}
+
+function getBackgroundColor(
+  checked: boolean,
+  disabled: boolean,
+  indeterminate: boolean,
+): ColorValue {
+  if (checked || indeterminate) {
+    if (disabled) {
+      return tokens["color-disabled"];
+    } else {
+      return tokens["color-interactive"];
+    }
+  } else {
+    return tokens["color-overlay--dimmed"];
+  }
+}

package/src/Checkbox/CheckboxGroup.style.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: tokens["space-base"],
+    paddingVertical: tokens["space-small"],
+  },
+  nestedCheckboxes: {
+    marginLeft: tokens["space-large"],
+  },
+});