@jobber/components-native 0.22.0 → 0.23.0

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { XOR } from "ts-xor";
+import { BaseSwitchProps } from "./components/BaseSwitch";
+interface WithLabelProps extends BaseSwitchProps {
+    /**
+     * Optional label to display in front of the switch
+     */
+    readonly label: string;
+    /**
+     * Optional descriptive text to display under the switch
+     */
+    readonly description?: string;
+}
+type SwitchProps = XOR<BaseSwitchProps, WithLabelProps>;
+export declare function Switch(props: SwitchProps): JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+export declare const styles: {
+    container: {
+        marginTop: number;
+        marginBottom: number;
+    };
+    row: {
+        flexDirection: "row";
+        width: string;
+    };
+    label: {
+        flex: number;
+        justifyContent: "center";
+        marginRight: number;
+    };
+    description: {
+        marginTop: number;
+    };
+};

package/dist/types/src/Switch/components/BaseSwitch/BaseSwitch.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export interface BaseSwitchProps {
+    /**
+     * Value of the switch
+     */
+    readonly value?: boolean;
+    /**
+     * Default value of the switch when uncontrolled
+     */
+    readonly defaultValue?: boolean;
+    /**
+     * Callback to handle value changes
+     */
+    onValueChange?(val: boolean): void;
+    /**
+     * When true, the switch cannot be toggled
+     */
+    readonly disabled?: boolean;
+    /**
+     * Accessibility label for this switch
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Name of the input.
+     */
+    readonly name?: string;
+}
+export declare function BaseSwitch({ value, defaultValue, onValueChange, disabled, accessibilityLabel, name, }: BaseSwitchProps): JSX.Element;

package/dist/types/src/Switch/components/BaseSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export { BaseSwitch } from "./BaseSwitch";
+export type { BaseSwitchProps } from "./BaseSwitch";

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

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

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

@@ -18,5 +18,6 @@ export * from "./InputPressable";
 export * from "./InputText";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
+export * from "./Switch";
 export * from "./Text";
 export * from "./Typography";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -51,5 +51,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "4924f4190c152e4d11b9f52adcd8dd91a727ae16"
+  "gitHead": "4a2124e4c8284dd7377668648eb94d72e7cb118d"
 }

package/src/Switch/Switch.styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    marginTop: tokens["space-base"],
+    marginBottom: tokens["space-base"],
+  },
+  row: {
+    flexDirection: "row",
+    width: "100%",
+  },
+  label: {
+    flex: 1,
+    justifyContent: "center",
+    marginRight: tokens["space-small"],
+  },
+  description: {
+    marginTop: tokens["space-smaller"],
+  },
+});

package/src/Switch/Switch.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ViewStyle } from "react-native";
+import { Switch } from "./Switch";
+
+it("renders a labeled Switch with value true", () => {
+  const { getByLabelText } = render(
+    <Switch value={true} label="true switch" />,
+  );
+  const valueProp = getByLabelText("true switch").props.value;
+  expect(valueProp).toEqual(true);
+});
+
+it("renders a labeled Switch with value false", () => {
+  const { getByLabelText } = render(
+    <Switch value={false} label="false switch" />,
+  );
+  const valueProp = getByLabelText("false switch").props.value;
+  expect(valueProp).toEqual(false);
+});
+
+it("renders an unlabeled Switch with value true", () => {
+  const { getByRole } = render(<Switch value={true} />);
+  const valueProp = getByRole("switch").props.value;
+  expect(valueProp).toEqual(true);
+});
+
+it("renders an unlabeled Switch with value false", () => {
+  const { getByRole } = render(<Switch value={false} />);
+  const valueProp = getByRole("switch").props.value;
+  expect(valueProp).toEqual(false);
+});
+
+describe("description", () => {
+  it("renders a Switch with label and description", () => {
+    const { getByText } = render(
+      <Switch label="Label" description="Description" />,
+    );
+
+    expect(getByText("Label")).toBeDefined();
+    expect(getByText("Description")).toBeDefined();
+  });
+
+  it("matches the width of the label and description", () => {
+    const { getByTestId } = render(
+      <Switch label="Label" description="Description" />,
+    );
+    const labelView = getByTestId("switch-label-view");
+    const descriptionView = getByTestId("switch-description-view");
+
+    fireEvent(labelView, "onLayout", {
+      nativeEvent: {
+        layout: {
+          width: 123,
+        },
+      },
+    });
+
+    const flattenedStyle = descriptionView.props.style.reduce(
+      (style: ViewStyle, additionalStyles: ViewStyle) => ({
+        ...style,
+        ...additionalStyles,
+      }),
+      {},
+    );
+    expect(flattenedStyle).toEqual(
+      expect.objectContaining({
+        maxWidth: 123,
+      }),
+    );
+  });
+});
+
+describe("accessibilityLabel", () => {
+  it("uses accessibilityLabel if specified", () => {
+    const { getByLabelText } = render(
+      <Switch
+        value={true}
+        label="label"
+        accessibilityLabel="accessibilityLabel"
+      />,
+    );
+
+    expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+  });
+
+  it("uses placeholder if unspecified", () => {
+    const { getByLabelText } = render(<Switch value={true} label="label" />);
+
+    expect(getByLabelText("label")).toBeTruthy();
+  });
+
+  it("unavailable if unspecified", () => {
+    const { queryByLabelText } = render(<Switch value={true} />);
+
+    expect(queryByLabelText("label")).not.toBeTruthy();
+  });
+});

package/src/Switch/Switch.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { XOR } from "ts-xor";
+import { BaseSwitch, BaseSwitchProps } from "./components/BaseSwitch";
+import { styles } from "./Switch.styles";
+import { Text } from "../Text";
+
+interface WithLabelProps extends BaseSwitchProps {
+  /**
+   * Optional label to display in front of the switch
+   */
+  readonly label: string;
+
+  /**
+   * Optional descriptive text to display under the switch
+   */
+  readonly description?: string;
+}
+
+type SwitchProps = XOR<BaseSwitchProps, WithLabelProps>;
+
+export function Switch(props: SwitchProps): JSX.Element {
+  const switchProps: SwitchProps = {
+    ...props,
+    accessibilityLabel: props.accessibilityLabel || props.label,
+  };
+
+  const [labelWidth, setLabelWidth] = useState<number | undefined>();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        {props.label && (
+          <View
+            style={styles.label}
+            onLayout={event => setLabelWidth(event.nativeEvent.layout.width)}
+            testID="switch-label-view"
+          >
+            <Text variation={props.disabled ? "disabled" : "base"}>
+              {props.label}
+            </Text>
+          </View>
+        )}
+        <BaseSwitch {...switchProps} />
+      </View>
+      {props.description && (
+        <View
+          style={[styles.description, { maxWidth: labelWidth }]}
+          testID="switch-description-view"
+        >
+          <Text level="textSupporting" variation="subdued">
+            {props.description}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/Switch/components/BaseSwitch/BaseSwitch.test.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { BaseSwitch } from "./BaseSwitch";
+
+it("renders a Switch with value true", () => {
+  const tree = render(<BaseSwitch value={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders a Switch with defaultValue true", () => {
+  const tree = render(<BaseSwitch defaultValue={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders a Switch with value false", () => {
+  const tree = render(<BaseSwitch value={false} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders a Switch with defaultValue false", () => {
+  const tree = render(<BaseSwitch defaultValue={false} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders a disabled Switch with value true", () => {
+  const tree = render(<BaseSwitch value={true} disabled={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders a disabled Switch with value false", () => {
+  const tree = render(<BaseSwitch value={false} disabled={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("invokes the valueChange callback", () => {
+  const valueChangedCallback = jest.fn();
+  const tree = render(
+    <BaseSwitch
+      value={false}
+      onValueChange={valueChangedCallback}
+      accessibilityLabel={"test switch"}
+    />,
+  );
+  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
+  expect(valueChangedCallback).toHaveBeenCalledWith(true);
+  fireEvent(tree.getByLabelText("test switch"), "valueChange", false);
+  expect(valueChangedCallback).toHaveBeenCalledWith(false);
+});
+
+it("doesn't invoke the valueChange callback if disabled", () => {
+  const valueChangedCallback = jest.fn();
+  const tree = render(
+    <BaseSwitch
+      value={false}
+      disabled={true}
+      onValueChange={valueChangedCallback}
+      accessibilityLabel={"test switch"}
+    />,
+  );
+  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
+  expect(valueChangedCallback).not.toHaveBeenCalled();
+});

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { Platform } from "react-native";
+import { Switch } from "react-native-gesture-handler";
+import { useFormController } from "../../../hooks";
+import { tokens } from "../../../utils/design";
+
+export interface BaseSwitchProps {
+  /**
+   * Value of the switch
+   */
+  readonly value?: boolean;
+
+  /**
+   * Default value of the switch when uncontrolled
+   */
+  readonly defaultValue?: boolean;
+
+  /**
+   * Callback to handle value changes
+   */
+  onValueChange?(val: boolean): void;
+
+  /**
+   * When true, the switch cannot be toggled
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Accessibility label for this switch
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Name of the input.
+   */
+  readonly name?: string;
+}
+
+export function BaseSwitch({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  accessibilityLabel,
+  name,
+}: BaseSwitchProps): JSX.Element {
+  const { field } = useFormController({
+    name,
+    value: value ?? defaultValue,
+  });
+
+  const internalValue = value ?? field.value;
+
+  function getThumbColor() {
+    if (Platform.OS === "android") {
+      if (disabled) {
+        return tokens["color-disabled"];
+      } else if (internalValue) {
+        return tokens["color-interactive"];
+      } else {
+        return tokens["color-surface--background"];
+      }
+    }
+    return undefined; //use default iOS
+  }
+
+  function getTrackColors() {
+    if (Platform.OS === "android") {
+      return {
+        true: disabled
+          ? tokens["color-disabled--secondary"]
+          : tokens["color-green--lighter"],
+        false: disabled
+          ? tokens["color-disabled--secondary"]
+          : tokens["color-disabled"],
+      };
+    } else {
+      //iOS
+      return {
+        true: tokens["color-interactive"],
+        false: tokens["color-surface--background"],
+      };
+    }
+  }
+
+  return (
+    <Switch
+      value={internalValue}
+      onValueChange={(val: boolean) => {
+        if (!disabled) {
+          onValueChange?.(val);
+          field.onChange(val);
+        }
+      }}
+      disabled={disabled}
+      thumbColor={getThumbColor()}
+      trackColor={getTrackColors()}
+      ios_backgroundColor={tokens["color-surface--background"]}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={"switch"}
+      accessibilityState={{
+        disabled: disabled,
+        checked: internalValue,
+      }}
+    />
+  );
+}

package/src/Switch/components/BaseSwitch/__snapshots__/BaseSwitch.test.tsx.snap

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a Switch with defaultValue false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={4}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={false}
+/>
+`;
+
+exports[`renders a Switch with defaultValue true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={2}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={true}
+/>
+`;
+
+exports[`renders a Switch with value false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={3}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={false}
+/>
+`;
+
+exports[`renders a Switch with value true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={1}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={true}
+/>
+`;
+
+exports[`renders a disabled Switch with value false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": true,
+    }
+  }
+  collapsable={false}
+  disabled={true}
+  handlerTag={6}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={false}
+/>
+`;
+
+exports[`renders a disabled Switch with value true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": true,
+    }
+  }
+  collapsable={false}
+  disabled={true}
+  handlerTag={5}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={true}
+/>
+`;

package/src/Switch/components/BaseSwitch/index.ts

@@ -0,0 +1,2 @@
+export { BaseSwitch } from "./BaseSwitch";
+export type { BaseSwitchProps } from "./BaseSwitch";

package/src/Switch/index.ts

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

package/src/index.ts

@@ -18,5 +18,6 @@ export * from "./InputPressable";
 export * from "./InputText";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
+export * from "./Switch";
 export * from "./Text";
 export * from "./Typography";