@gympass/yoga 7.88.0 → 7.88.2

package/esm/Input/native/Input.test.js

@@ -0,0 +1,132 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { ThemeProvider, Input } from "../..";
+describe("<Input />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with label", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input" }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match when input is focused", () => {
+      const { toJSON, getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", testID: "input" }) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with disabled input", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { disabled: true }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with error", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { error: "Error message" }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with helper text and max length", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { helper: "Helper text", maxLength: 20 }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with helper text, max length and hideMaxLength", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { helper: "Helper text", maxLength: 20, hideMaxLength: true }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with full width", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Label", full: true }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+  describe("Events", () => {
+    it("should call onChangeText", () => {
+      const onChangeTextMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", testID: "input", onChangeText: onChangeTextMock }) })
+      );
+      fireEvent.changeText(getByTestId("input"), "foo");
+      expect(onChangeTextMock).toHaveBeenCalled();
+    });
+    it("should not call onChangeText when input is disabled", () => {
+      const onChangeTextMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Input",
+            testID: "input",
+            onChangeText: onChangeTextMock,
+            disabled: true
+          }
+        ) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      expect(onChangeTextMock).not.toHaveBeenCalled();
+    });
+    it("should call onFocus", () => {
+      const onFocusMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", testID: "input", onFocus: onFocusMock }) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it("should call onBlur", () => {
+      const onBlurMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", testID: "input", onBlur: onBlurMock }) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      fireEvent(getByTestId("input"), "blur");
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe("maxLength", () => {
+    it("should update maxLength counter when add character", () => {
+      const { getByText, rerender } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", testID: "input", maxLength: 10 }) })
+      );
+      expect(getByText("0/10")).toBeTruthy();
+      rerender(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", value: "foo", maxLength: 10 }) })
+      );
+      expect(getByText("3/10")).toBeTruthy();
+    });
+  });
+  describe("clean button", () => {
+    it("should call onClean when press clean button", () => {
+      const onCleanMock = jest.fn();
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", value: "foo", onClean: onCleanMock }) })
+      );
+      fireEvent.press(getByRole("button"));
+      expect(onCleanMock).toHaveBeenCalledWith("");
+    });
+    it("should test if clean button is present", () => {
+      const { rerender, queryByRole } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input" }) })
+      );
+      expect(queryByRole("button")).toBeNull();
+      rerender(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input, { label: "Input", value: "foo" }) })
+      );
+      expect(queryByRole("button")).not.toBeNull();
+    });
+  });
+});

package/esm/Input/native/Number.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import Input from "./Input";
+const InputNumber = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({ ref }, props), { keyboardType: "numeric" }));
+});
+var Number_default = InputNumber;
+export {
+  Number_default as default
+};

package/esm/Input/native/Number.test.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Input } from "../..";
+describe("<Input.Number />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Number, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/Password.js

@@ -0,0 +1,166 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { TouchableWithoutFeedback, Keyboard } from "react-native";
+import styled, { withTheme } from "styled-components";
+import { bool, func, shape } from "prop-types";
+import { Visibility, VisibilityOff } from "@gympass/yoga-icons";
+import Input from "./Input";
+const Wrapper = styled.View(
+  ({
+    full,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    position: relative;
+
+    width: ${full ? "100%" : `${input.width}px`};
+  `
+);
+const IconWrapper = styled.View(
+  ({
+    theme: {
+      yoga: { spacing }
+    }
+  }) => `
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    padding-right: ${spacing.small}px;
+    padding-left: ${spacing.xxsmall}px;
+  `
+);
+const Password = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      disabled,
+      style,
+      full,
+      onBlur,
+      onFocus,
+      theme: {
+        yoga: {
+          colors,
+          components: { input }
+        }
+      }
+    } = _b, props = __objRest(_b, [
+      "disabled",
+      "style",
+      "full",
+      "onBlur",
+      "onFocus",
+      "theme"
+    ]);
+    const [showPassword, toggleShowPassword] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const iconColor = () => {
+      if (disabled) {
+        return colors.elements.backgroundAndDisabled;
+      }
+      if (focused) {
+        return input.font.color.focus;
+      }
+      return input.font.color.default;
+    };
+    return /* @__PURE__ */ jsxs(Wrapper, { style, full, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        __spreadProps(__spreadValues({
+          ref
+        }, props), {
+          autoCompleteType: "password",
+          blurOnSubmit: false,
+          cleanable: false,
+          clearTextOnFocus: false,
+          disabled,
+          full,
+          secureTextEntry: !showPassword,
+          textContentType: "password",
+          onSubmitEditing: () => Keyboard.dismiss(),
+          onBlur: (e) => {
+            setFocused(false);
+            onBlur(e);
+          },
+          onFocus: (e) => {
+            setFocused(true);
+            onFocus(e);
+          }
+        })
+      ),
+      /* @__PURE__ */ jsx(
+        TouchableWithoutFeedback,
+        {
+          accessibilityRole: "button",
+          onPress: () => {
+            if (disabled)
+              return;
+            toggleShowPassword(!showPassword);
+          },
+          children: /* @__PURE__ */ jsx(IconWrapper, { disabled, children: showPassword ? /* @__PURE__ */ jsx(Visibility, { height: input.height, width: 20, fill: iconColor() }) : /* @__PURE__ */ jsx(
+            VisibilityOff,
+            {
+              height: input.height,
+              width: 20,
+              fill: iconColor()
+            }
+          ) })
+        }
+      )
+    ] });
+  }
+);
+Password.propTypes = {
+  disabled: bool,
+  full: bool,
+  style: shape({}),
+  onBlur: func,
+  onFocus: func
+};
+Password.defaultProps = {
+  disabled: false,
+  full: false,
+  style: void 0,
+  onBlur: () => {
+  },
+  onFocus: () => {
+  }
+};
+var Password_default = withTheme(Password);
+export {
+  Password_default as default
+};

package/esm/Input/native/Password.test.js

@@ -0,0 +1,109 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { ThemeProvider, Input } from "../..";
+describe("<Input.Password />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match when input is focused", () => {
+      const { toJSON, getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { label: "Input", testID: "input" }) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with disabled input", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { disabled: true }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match with full width", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { label: "Label", full: true }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+  describe("Events", () => {
+    it("should call onChangeText", () => {
+      const onChangeTextMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          Input.Password,
+          {
+            label: "Input",
+            testID: "input",
+            onChangeText: onChangeTextMock
+          }
+        ) })
+      );
+      fireEvent.changeText(getByTestId("input"), "foo");
+      expect(onChangeTextMock).toHaveBeenCalled();
+    });
+    it("should not call onChangeText when input is readOnly", () => {
+      const onChangeTextMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          Input.Password,
+          {
+            label: "Input",
+            testID: "input",
+            onChangeText: onChangeTextMock,
+            readOnly: true
+          }
+        ) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      expect(onChangeTextMock).not.toHaveBeenCalled();
+    });
+    it("should not call onChangeText when input is disabled", () => {
+      const onChangeTextMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          Input.Password,
+          {
+            label: "Input",
+            testID: "input",
+            onChangeText: onChangeTextMock,
+            disabled: true
+          }
+        ) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      expect(onChangeTextMock).not.toHaveBeenCalled();
+    });
+    it("should call onFocus", () => {
+      const onFocusMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { label: "Input", testID: "input", onFocus: onFocusMock }) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it("should call onBlur", () => {
+      const onBlurMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { label: "Input", testID: "input", onBlur: onBlurMock }) })
+      );
+      fireEvent(getByTestId("input"), "focus");
+      fireEvent(getByTestId("input"), "blur");
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe("visibility button", () => {
+    it("should toggle password visibility when press visibility button", () => {
+      const { getByRole, getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { label: "Input", testID: "input" }) })
+      );
+      expect(getByTestId("input").props.secureTextEntry).toBe(true);
+      fireEvent.press(getByRole("button"));
+      expect(getByTestId("input").props.secureTextEntry).toBe(false);
+    });
+  });
+});

package/esm/Input/native/Tel.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import Input from "./Input";
+const Tel = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Input,
+  __spreadProps(__spreadValues({
+    ref
+  }, props), {
+    keyboardType: "phone-pad",
+    autoCompleteType: "tel",
+    textContentType: "telephoneNumber"
+  })
+));
+var Tel_default = Tel;
+export {
+  Tel_default as default
+};

package/esm/Input/native/Tel.test.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Input } from "../..";
+describe("<Input.Tel />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Tel, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/index.js

@@ -0,0 +1,12 @@
+import Input from "./Input";
+import Password from "./Password";
+import InputNumber from "./Number";
+import Tel from "./Tel";
+import Email from "./Email";
+export {
+  Email,
+  Input,
+  InputNumber,
+  Password,
+  Tel
+};

package/esm/List/List.theme.js

@@ -0,0 +1,29 @@
+const List = ({ spacing, borders, colors }) => ({
+  listItem: {
+    padding: {
+      top: spacing.medium,
+      right: spacing.large,
+      bottom: spacing.medium,
+      left: spacing.large
+    },
+    small: {
+      padding: {
+        top: spacing.xxsmall,
+        right: spacing.medium,
+        bottom: spacing.xxsmall,
+        left: spacing.medium
+      }
+    },
+    selectable: {
+      color: colors.clear
+    }
+  },
+  border: {
+    width: borders.small,
+    color: colors.elements.backgroundAndDisabled
+  }
+});
+var List_theme_default = List;
+export {
+  List_theme_default as default
+};

package/esm/List/index.js

@@ -0,0 +1,7 @@
+import { List, ListItem, LinkItem } from "./web";
+List.Item = ListItem;
+List.LinkItem = LinkItem;
+var List_default = List;
+export {
+  List_default as default
+};

package/esm/List/index.native.js

@@ -0,0 +1,6 @@
+import { List, ListItem } from "./native";
+List.Item = ListItem;
+var index_native_default = List;
+export {
+  index_native_default as default
+};

package/esm/List/native/List.js

@@ -0,0 +1,43 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+const StyledFlatList = styled.FlatList`
+  width: 100%;
+`;
+const List = React.forwardRef((_a, ref) => {
+  var rest = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(StyledFlatList, __spreadValues({ ref }, rest));
+});
+List.displayName = "List";
+var List_default = List;
+export {
+  List_default as default
+};