@jobber/components-native 0.30.0 → 0.31.0

package/ios/Picker/ATLPickerView.swift

@@ -0,0 +1,61 @@
+//
+//  PickerView.swift
+//  @jobber/components-native
+//
+//  Created by Darryl Tec on 2022-07-21.
+//  Copyright © 2022 Octopusapp Inc. All rights reserved.
+//
+
+import Foundation
+
+import UIKit
+@available(iOS 14.0, *)
+@objc(ATLPickerView)
+class ATLPickerView: UIButton {
+    override init(frame: CGRect) {
+      super.init(frame: frame)
+    }
+    private var _hasSelectedValue: Bool = false;
+    private var _options: [UIAction] = [];
+
+    @objc var onOptionPress: RCTDirectEventBlock?
+    @objc func sendButtonAction(_ action: UIAction) {
+        if let onPress = onOptionPress {
+            onPress(["event": action.identifier.rawValue])
+        }
+    }
+
+    @objc var options: [NSDictionary]? {
+        didSet {
+            guard let options = self.options else {
+                return
+            }
+            _options.removeAll()
+            options.forEach { menuAction in
+                let opt = ATLPickerOption(details: menuAction)
+                _hasSelectedValue = opt.isActive
+                _options.append(opt.createUIAction({action in self.sendButtonAction(action)}))
+            }
+            self.setup()
+        }
+    }
+
+    func setup () {
+        let menu = UIMenu(title: "", identifier: nil, options: .displayInline, children: _options)
+
+        self.menu = menu
+        self.showsMenuAsPrimaryAction = true
+        if #available(iOS 15.0, *) {
+            self.setTitleColor(UIColor.clear, for: .normal)
+            self.changesSelectionAsPrimaryAction = true
+        }
+    }
+
+    override func reactSetFrame(_ frame: CGRect) {
+        super.reactSetFrame(frame);
+    };
+
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}

package/ios/Picker/RCTATLPickerManager.m

@@ -0,0 +1,26 @@
+//
+//  RCTPickerManager.m
+//  Jobber
+//
+//  Created by Darryl Tec on 2022-07-21.
+//  Copyright © 2022 Octopusapp Inc. All rights reserved.
+//
+
+#import <Foundation/Foundation.h>
+
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(RCTATLPicker, RCTViewManager)
+
+/**
+ * Options the user can choose
+ */
+RCT_EXPORT_VIEW_PROPERTY(options, NSArray)
+
+/**
+ * Callback when one of the option is pressed
+ */
+RCT_EXPORT_VIEW_PROPERTY(onOptionPress, RCTDirectEventBlock)
+
+@end

package/ios/Picker/RCTATLPickerManager.swift

@@ -0,0 +1,25 @@
+//
+//  RCTPickerManager.swift
+//  @jobber/components-native
+//
+//  Created by Darryl Tec on 2022-07-21.
+//  Copyright © 2022 Octopusapp Inc. All rights reserved.
+//
+
+import Foundation
+
+@objc(RCTATLPicker)
+class RCTATLPickerManager: RCTViewManager {
+
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+
+    override func view() -> UIView! {
+        if #available(iOS 14.0, *) {
+            return ATLPickerView();
+        } else {
+            return ATLFallBackPickerView()
+        }
+    }
+}

package/jobber-components-native.podspec

@@ -0,0 +1,35 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "jobber-components-native"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/MichaelParadis/jobber-components-native.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+  end
+end

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "license": "MIT",
+  "description": "React Native implementation of Atlantis",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GetJobber/atlantis.git"
+  },
+  "author": "The Frends",
+  "bugs": {
+    "url": "https://github.com/GetJobber/atlantis/issues"
+  },
+  "homepage": "https://github.com/GetJobber/atlantis#readme",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/src/index.d.ts",
@@ -10,7 +20,11 @@
     "src",
     "!**/__tests__",
     "!**/__fixtures__",
-    "!**/__mocks__"
+    "!**/__mocks__",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build"
   ],
   "scripts": {
     "clean": "rm -rf dist/* tsconfig.tsbuildinfo",
@@ -22,6 +36,7 @@
   },
   "dependencies": {
     "@jobber/design": "^0.41.3",
+    "@react-native-picker/picker": "^2.4.10",
     "lodash.chunk": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lodash.identity": "^3.0.0",
@@ -57,5 +72,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "362d0d3914aa440bcbb40f9eed388d447cd205e0"
+  "gitHead": "af99db94db46063487cedd6ddb3200674c9ce8e9"
 }

package/src/Select/Select.style.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from "react-native";
+import { commonInputStyles } from "../InputFieldWrapper";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: StyleSheet.flatten([
+    commonInputStyles.container,
+    {
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      minHeight: tokens["space-largest"] + tokens["border-base"],
+    },
+  ]),
+
+  input: StyleSheet.flatten([
+    commonInputStyles.input,
+    {
+      flexDirection: "row",
+      flexGrow: 0,
+      paddingBottom: tokens["space-smaller"],
+      minHeight: 0,
+      minWidth: "100%",
+    },
+  ]),
+
+  value: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+
+  icon: {
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+
+  invalid: {
+    color: tokens["color-critical"],
+    borderColor: tokens["color-critical"],
+  },
+
+  errorMessageWrapperIcon: {
+    flex: 0,
+    flexBasis: "auto",
+    paddingTop: tokens["space-minuscule"],
+    paddingRight: tokens["space-smaller"],
+  },
+  messageWrapper: {
+    paddingTop: tokens["space-smaller"],
+    flexDirection: "row",
+  },
+});

package/src/Select/Select.test.tsx

@@ -0,0 +1,323 @@
+import React from "react";
+import {
+  RenderAPI,
+  cleanup,
+  fireEvent,
+  render,
+} from "@testing-library/react-native";
+import { tokens } from "@jobber/design/foundation";
+import { AccessibilityInfo } from "react-native";
+import { Option, Select } from ".";
+import { messages } from "./messages";
+import { SelectInternalPicker } from "./components/SelectInternalPicker";
+
+const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
+
+const onChange = jest.fn();
+
+beforeEach(() => {
+  A11yInfoSpy.mockImplementation(() => Promise.resolve(false));
+});
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+describe("Select", () => {
+  it("renders a Select", () => {
+    const component = render(
+      <Select onChange={onChange}>
+        <Option value={"one"}>one</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+    expect(component.getByTestId("arrowDown")).toBeDefined();
+    expect(
+      component.getByText(messages.emptyValue.defaultMessage, {
+        includeHiddenElements: true,
+      }),
+    ).toBeDefined();
+  });
+
+  it("renders a Select with a label", () => {
+    const label = "Press me";
+    const { getByText } = render(
+      <Select onChange={onChange} label={label}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+
+    expect(getByText(label, { includeHiddenElements: true })).toBeDefined();
+  });
+
+  it("renders a Select with a placeholder", () => {
+    const placeholder = "I am a placeholder";
+    const { getByText } = render(
+      <Select onChange={onChange} placeholder={placeholder}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+
+    expect(
+      getByText(placeholder, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("renders a Select with assistive text", () => {
+    const assistiveText = "You need to pick something";
+    const { getByText } = render(
+      <Select onChange={onChange} assistiveText={assistiveText}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+    expect(
+      getByText(assistiveText, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  describe("when invalid", () => {
+    const labelText = "labelText";
+
+    it("renders an invalid Select", () => {
+      const { getByText } = render(
+        <Select onChange={onChange} invalid={true} label={labelText}>
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+      expect(
+        getByText(labelText, { includeHiddenElements: true }).props.style,
+      ).toContainEqual({
+        color: tokens["color-critical"],
+      });
+    });
+
+    it("renders an invalid Select with placeholder", () => {
+      const placeholder = "Place me in the holder";
+      const { getByText } = render(
+        <Select
+          label={labelText}
+          onChange={onChange}
+          invalid={true}
+          placeholder={placeholder}
+        >
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(
+        getByText(placeholder, { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(
+        getByText(labelText, { includeHiddenElements: true }).props.style,
+      ).toContainEqual({
+        color: tokens["color-critical"],
+      });
+    });
+  });
+
+  it("renders a disabled Select", () => {
+    const labelText = "labelText";
+    const { getByText } = render(
+      <Select label={labelText} onChange={onChange} disabled={true}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+    expect(
+      getByText(labelText, { includeHiddenElements: true }).props.style,
+    ).toContainEqual({
+      color: tokens["color-disabled"],
+    });
+  });
+
+  it("renders a Select with a value provided", () => {
+    const expectedValue = "That should be me";
+    const { getByText } = render(
+      <Select onChange={onChange} value={"2"}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>{expectedValue}</Option>
+      </Select>,
+    );
+
+    expect(
+      getByText(expectedValue, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("renders a Select with a defaultValue provided", () => {
+    const expectedValue = "It's the 3rd value";
+    const { getByText } = render(
+      <Select onChange={onChange} defaultValue={"3"}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+        <Option value={"3"}>{expectedValue}</Option>
+      </Select>,
+    );
+
+    expect(
+      getByText(expectedValue, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  describe("fires the onChange callback", () => {
+    it("fires", () => {
+      const { getByTestId } = render(
+        <Select onChange={onChange} value={"2"}>
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      const select = getByTestId("ATL-Select").findByType(SelectInternalPicker);
+      expect(select).toBeTruthy();
+      fireEvent(select, "onChange", "1");
+      expect(onChange).toHaveBeenCalledWith("1");
+    });
+  });
+
+  describe("Invalid value", () => {
+    it("renders with the empty value option", () => {
+      const { getByText } = render(
+        <Select onChange={onChange} value={"invalid"}>
+          <Option value={"first"}>first</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(
+        getByText(messages.emptyValue.defaultMessage, {
+          includeHiddenElements: true,
+        }),
+      ).toBeDefined();
+    });
+
+    it("renders with the placeholder", () => {
+      const { getByText } = render(
+        <Select
+          onChange={onChange}
+          value={"invalid"}
+          placeholder={"Make a selection"}
+        >
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(
+        getByText("Make a selection", { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+  });
+
+  describe("accessibilityLabel", () => {
+    it("uses accessibilityLabel if specified", () => {
+      const { getByLabelText } = render(
+        <Select
+          onChange={onChange}
+          label="label"
+          accessibilityLabel="accessibilityLabel"
+        >
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+    });
+  });
+
+  describe("when validations are passed to the component", () => {
+    describe("validations fail", () => {
+      let tree: RenderAPI;
+      const labelText = "labelText";
+      const errorMsg = "Too short";
+      beforeEach(() => {
+        tree = render(
+          <Select
+            label={labelText}
+            onChange={onChange}
+            value={"Watermelon"}
+            validations={{
+              minLength: { value: 60, message: errorMsg },
+            }}
+          >
+            <Option value={"Apple"}>Apple</Option>
+            <Option value={"Watermelon"}>Watermelon</Option>
+          </Select>,
+        );
+      });
+
+      it("renders the error message when there is an error", async () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        fireEvent(select, "onChange", "Apple");
+        expect(
+          await tree.findByText(errorMsg, { includeHiddenElements: true }),
+        ).toBeTruthy();
+      });
+
+      it("shows the invalid colours", async () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        fireEvent(select, "onChange", "Apple");
+        expect(
+          (await tree.findByText(labelText, { includeHiddenElements: true }))
+            .props.style,
+        ).toContainEqual({
+          color: tokens["color-critical"],
+        });
+      });
+    });
+
+    describe("validations passes", () => {
+      let tree: RenderAPI;
+      const labelText = "labelText";
+      const errorMsg = "Not too short";
+      beforeEach(() => {
+        tree = render(
+          <Select
+            label={labelText}
+            onChange={onChange}
+            value={"Watermelon"}
+            validations={{
+              minLength: { value: 4, message: errorMsg },
+            }}
+          >
+            <Option value={"Apple"}>Apple</Option>
+            <Option value={"Watermelon"}>Watermelon</Option>
+          </Select>,
+        );
+      });
+
+      it("does not render any error messages", () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        expect(select).toBeTruthy();
+        fireEvent(select, "onChange", "Apple");
+        expect(tree.queryByText(errorMsg)).toBeNull();
+      });
+
+      it("has non-critical colours", () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        fireEvent(select, "onChange", "Apple");
+        expect(
+          tree.getByText(labelText, { includeHiddenElements: true }).props
+            .style,
+        ).toContainEqual({
+          color: tokens["color-text--secondary"],
+        });
+      });
+    });
+  });
+});