@gympass/yoga 7.88.0 → 7.88.2

package/esm/Checkbox/native/Switch.js

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { bool } from "prop-types";
+import styled, { withTheme } from "styled-components";
+import { hexToRgb } from "@gympass/yoga-common";
+import { Animated } from "react-native";
+import withTouchable from "../../Button/native/withTouchable";
+import Box from "../../Box";
+const SwitchTrack = styled.View`
+  ${({
+  theme: {
+    yoga: {
+      components: { checkboxswitch }
+    }
+  },
+  checked,
+  disabled
+}) => `
+    display: flex;
+    justify-content: center;
+    width: ${checkboxswitch.track.width}px;
+    height: ${checkboxswitch.track.height}px;
+    borderRadius: ${checkboxswitch.track.radii}px;
+    background-color: ${checked ? checkboxswitch.track.checked.backgroundColor : checkboxswitch.track.backgroundColor};
+
+    ${disabled ? `
+        background-color: ${checkboxswitch.track.disabled.backgroundColor};` : ""}
+  `};
+`;
+const ThumbShadow = styled.View(
+  ({
+    theme: {
+      yoga: {
+        colors,
+        components: { checkboxswitch }
+      }
+    },
+    checked
+  }) => {
+    const width = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+    const height = checkboxswitch.thumb.height * checkboxswitch.thumb.shadowScale;
+    return `
+      width: ${width}px;
+      height: ${height}px;
+      position: absolute;
+      background-color: ${checked ? hexToRgb(colors.primary, 0.75) : hexToRgb(colors.elements.backgroundAndDisabled, 0.75)};
+      border-radius: ${checkboxswitch.thumb.radii}px;
+    `;
+  }
+);
+const SwitchThumb = styled(Box).attrs(
+  ({
+    theme: {
+      yoga: {
+        components: { checkboxswitch }
+      }
+    },
+    disabled
+  }) => ({
+    width: checkboxswitch.thumb.width,
+    height: checkboxswitch.thumb.height,
+    borderRadius: checkboxswitch.thumb.radii,
+    bgColor: disabled ? checkboxswitch.thumb.disabled.backgroundColor : checkboxswitch.thumb.backgroundColor,
+    elevation: checkboxswitch.thumb.shadow
+  })
+)``;
+const CheckboxSwitch = ({
+  checked,
+  pressed,
+  disabled,
+  theme: {
+    yoga: {
+      components: { checkboxswitch }
+    }
+  }
+}) => {
+  const [thumbPosition] = useState(new Animated.Value(Number(checked)));
+  const thumbTo = checkboxswitch.track.width - checkboxswitch.thumb.width - checkboxswitch.thumb.left;
+  const thumbFrom = checkboxswitch.thumb.left;
+  const shadowDiameter = checkboxswitch.thumb.width * checkboxswitch.thumb.shadowScale;
+  const shadowAndThumbDiff = shadowDiameter - checkboxswitch.thumb.width;
+  const halfDiff = shadowAndThumbDiff / 2;
+  const thumbShadowFrom = (halfDiff - checkboxswitch.thumb.left) * -1;
+  const thumbShadowTo = thumbTo - halfDiff;
+  useEffect(() => {
+    const toggle = (isChecked, position) => {
+      const animValue = {
+        fromValue: isChecked ? 0 : 1,
+        toValue: isChecked ? 1 : 0,
+        duration: 100,
+        useNativeDriver: false
+      };
+      Animated.timing(position, animValue).start();
+    };
+    toggle(!checked, thumbPosition);
+  }, [checked]);
+  return /* @__PURE__ */ jsxs(
+    SwitchTrack,
+    {
+      checked,
+      disabled,
+      as: Animated.View,
+      style: !disabled && {
+        backgroundColor: thumbPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [
+            checkboxswitch.track.checked.backgroundColor,
+            checkboxswitch.track.backgroundColor
+          ]
+        })
+      },
+      children: [
+        pressed && !disabled && /* @__PURE__ */ jsx(
+          ThumbShadow,
+          {
+            checked,
+            as: Animated.View,
+            style: {
+              transform: [
+                {
+                  translateX: thumbPosition.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [thumbShadowTo, thumbShadowFrom]
+                  })
+                }
+              ]
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SwitchThumb,
+          {
+            checked,
+            disabled,
+            as: Animated.View,
+            style: {
+              transform: [
+                {
+                  translateX: thumbPosition.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [thumbTo, thumbFrom]
+                  })
+                }
+              ]
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+CheckboxSwitch.propTypes = {
+  checked: bool,
+  disabled: bool,
+  pressed: bool
+};
+CheckboxSwitch.defaultProps = {
+  checked: false,
+  disabled: false,
+  pressed: false
+};
+CheckboxSwitch.displayName = "Checkbox.Switch";
+var Switch_default = withTouchable(withTheme(CheckboxSwitch));
+export {
+  Switch_default as default
+};

package/esm/Checkbox/native/Switch.test.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import Checkbox from "..";
+import ThemeProvider from "../../Theme";
+jest.useFakeTimers();
+describe("<Checkbox />", () => {
+  describe("<Checkbox.Switch />", () => {
+    describe("Snapshots", () => {
+      it("should match snapshot with default switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, {}) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should match snapshot with disabled switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, { disabled: true }) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should match snapshot with checked switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, { checked: true }) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should match snapshot with disabled and checked switch", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox.Switch, { disabled: true, checked: true }) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should call onChange function when click on Checkbox.Switch", () => {
+        const onChangeMock = jest.fn();
+        const { getByRole } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+            Checkbox.Switch,
+            {
+              onChange: onChangeMock,
+              accessibilityRole: "button"
+            }
+          ) })
+        );
+        fireEvent.press(getByRole("button"));
+        expect(onChangeMock).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/esm/Checkbox/native/index.js

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

package/esm/Chips/index.js

@@ -0,0 +1,5 @@
+import Chips from "./web";
+var Chips_default = Chips;
+export {
+  Chips_default as default
+};

package/esm/Chips/index.native.js

@@ -0,0 +1,5 @@
+import Chips from "./native";
+var index_native_default = Chips;
+export {
+  index_native_default as default
+};

package/esm/Chips/native/Chips.js

@@ -0,0 +1,182 @@
+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 from "react";
+import { number, arrayOf, bool, func, node } from "prop-types";
+import styled, { css, withTheme } from "styled-components";
+import { TouchableWithoutFeedback } from "react-native";
+import Counter from "./Counter";
+import { theme } from "../../Theme";
+import Text from "../../Text";
+import Icon from "../../Icon";
+const Wrapper = styled.View`
+  height: 32px;
+  max-width: 216px;
+
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  margin-right: ${theme.spacing.xxsmall}px;
+  padding: ${theme.spacing.xxsmall}px;
+
+  border-style: solid;
+  border-color: ${theme.colors.elements.lineAndBorders};
+  border-radius: ${theme.radii.small}px;
+  border-width: ${theme.borders.small}px;
+
+  background-color: ${theme.colors.white};
+
+  overflow: hidden;
+
+  ${({ disabled }) => disabled ? css`
+          background-color: ${theme.colors.elements.backgroundAndDisabled};
+          color: ${theme.colors.elements.selectionAndIcons};
+
+          border-color: ${theme.colors.elements.lineAndBorders};
+        ` : ""}
+
+  ${({ selected }) => selected ? css`
+          background-color: ${theme.colors.yoga};
+          border-color: transparent;
+        ` : ""}
+`;
+const StyledChips = styled(Text)`
+  font-size: ${theme.fontSizes.xsmall}px;
+  line-height: ${theme.lineHeights.xxsmall}px;
+
+  flex-shrink: 1;
+
+  ${({ selected }) => selected ? css`
+          color: ${theme.colors.primary};
+        ` : ""}
+`;
+const Chips = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      selected,
+      counter,
+      icons,
+      disabled,
+      onToggle,
+      onPress = onToggle,
+      theme: {
+        yoga: { spacing }
+      }
+    } = _b, props = __objRest(_b, [
+      "children",
+      "selected",
+      "counter",
+      "icons",
+      "disabled",
+      "onToggle",
+      "onPress",
+      "theme"
+    ]);
+    const [FirstIcon, SecondIcon] = icons;
+    return /* @__PURE__ */ jsx(
+      TouchableWithoutFeedback,
+      __spreadProps(__spreadValues({
+        onPress,
+        ref,
+        accessibilityRole: "button"
+      }, props), {
+        children: /* @__PURE__ */ jsxs(Wrapper, { disabled, selected, children: [
+          SecondIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              as: SecondIcon,
+              fill: selected ? "primary" : "secondary",
+              width: "small",
+              height: "small",
+              style: {
+                marginRight: children ? spacing.xxxsmall : void 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StyledChips,
+            {
+              as: selected ? Text.Medium : Text,
+              selected,
+              numberOfLines: 1,
+              children
+            }
+          ),
+          selected && counter && !disabled && /* @__PURE__ */ jsx(Counter, { value: counter }),
+          FirstIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              as: FirstIcon,
+              fill: selected ? "primary" : "secondary",
+              width: "small",
+              height: "small",
+              style: {
+                marginLeft: children ? spacing.xxxsmall : void 0
+              }
+            }
+          )
+        ] })
+      })
+    );
+  }
+);
+Chips.propTypes = {
+  /** text to be displayed */
+  children: node,
+  /** if the chip is selected */
+  selected: bool,
+  /** will display a three digit number, if the value is greater than 999 a plus
+   * sign will be displayed instead. ex: "+999" */
+  counter: number,
+  /** disable chip */
+  disabled: bool,
+  /** a list of max two icons from @gympass/yoga-icons package */
+  icons: arrayOf(func),
+  /** onPress event */
+  onToggle: func,
+  onPress: func
+};
+Chips.defaultProps = {
+  children: void 0,
+  selected: false,
+  disabled: false,
+  counter: void 0,
+  icons: [],
+  onToggle: void 0,
+  onPress: void 0
+};
+var Chips_default = withTheme(Chips);
+export {
+  Chips_default as default
+};

package/esm/Chips/native/Chips.test.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { MapPin, ChevronDown } from "@gympass/yoga-icons";
+import { ThemeProvider, Chips } from "../..";
+describe("<Chips />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot", () => {
+      const { root, toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { children: "Classes" }) })
+      );
+      expect(toJSON(root)).toMatchSnapshot();
+    });
+    it("should match snapshot with disabled prop", () => {
+      const { root, toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { disabled: true, children: "Classes" }) })
+      );
+      expect(toJSON(root)).toMatchSnapshot();
+    });
+    it("should match snapshot with more than one Chip", () => {
+      const { root, toJSON } = render(
+        /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+          /* @__PURE__ */ jsx(Chips, { children: "Classes" }),
+          /* @__PURE__ */ jsx(Chips, { children: "Gyms and studios" }),
+          /* @__PURE__ */ jsx(Chips, { children: "Personal trainers" })
+        ] })
+      );
+      expect(toJSON(root)).toMatchSnapshot();
+    });
+    it("should match snapshot with a long text", () => {
+      const { root, toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { children: "Classes with a very long text" }) })
+      );
+      expect(toJSON(root)).toMatchSnapshot();
+    });
+    describe("selected", () => {
+      it("should match snapshot", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { selected: true, children: "Classes" }) })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+      it("should match snapshot with more than one Chip", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+            /* @__PURE__ */ jsx(Chips, { children: "Classes" }),
+            /* @__PURE__ */ jsx(Chips, { selected: true, children: "Gyms and studios" }),
+            /* @__PURE__ */ jsx(Chips, { selected: true, children: "Personal trainers" })
+          ] })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+    });
+    describe("counter", () => {
+      it("should match snapshot", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { counter: 8, children: "Classes" }) })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+      it("should match snapshot with more than one Chip", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+            /* @__PURE__ */ jsx(Chips, { counter: 8, children: "Classes" }),
+            /* @__PURE__ */ jsx(Chips, { counter: 52, selected: true, children: "Gyms and studios" }),
+            /* @__PURE__ */ jsx(Chips, { counter: 1732, selected: true, children: "Personal trainers" })
+          ] })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+    });
+    describe("icon", () => {
+      it("should match selected snapshot", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+            /* @__PURE__ */ jsx(Chips, { counter: 8, icon: [MapPin], children: "Location" }),
+            /* @__PURE__ */ jsx(Chips, { counter: 8, icon: [MapPin, ChevronDown], children: "Classes" }),
+            /* @__PURE__ */ jsx(Chips, { icon: [MapPin, ChevronDown], children: "Gyms and studios" }),
+            /* @__PURE__ */ jsx(Chips, { icon: [MapPin], children: "Personal trainers" }),
+            /* @__PURE__ */ jsx(Chips, { counter: 8, selected: true, icon: [MapPin], children: "Activities" }),
+            /* @__PURE__ */ jsx(Chips, { counter: 8, selected: true, icon: [MapPin, ChevronDown], children: "Language" }),
+            /* @__PURE__ */ jsx(Chips, { selected: true, icon: [MapPin, ChevronDown], children: "Categories" }),
+            /* @__PURE__ */ jsx(Chips, { selected: true, icon: [MapPin], children: "Availability" })
+          ] })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+    });
+  });
+  describe("Events", () => {
+    it("should toggle using onPress", () => {
+      const toggleMock = jest.fn();
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { onPress: toggleMock, children: "Classes" }) })
+      );
+      fireEvent.press(getByText("Classes"));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+    it("should toggle using onToggle", () => {
+      const toggleMock = jest.fn();
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { onToggle: toggleMock, children: "Classes" }) })
+      );
+      fireEvent.press(getByText("Classes"));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Chips/native/Counter.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+import { number, oneOfType, string } from "prop-types";
+import { theme } from "../../Theme";
+import Text from "../../Text";
+const Wrapper = styled(Text.Medium)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  height: 16px;
+  min-width: 16px;
+
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-left: ${theme.spacing.xxxsmall}px;
+
+  color: ${theme.colors.white};
+  font-size: ${theme.fontSizes.xsmall}px;
+  line-height: ${theme.lineHeights.xsmall}px;
+
+  border-radius: ${theme.radii.small}px;
+  background-color: ${theme.colors.primary};
+
+  overflow: hidden;
+`;
+const Counter = ({ value }) => /* @__PURE__ */ jsx(Wrapper, { children: Number(value) > 999 ? "+999" : value });
+Counter.propTypes = {
+  value: oneOfType([number, string]).isRequired
+};
+var Counter_default = Counter;
+export {
+  Counter_default as default
+};

package/esm/Chips/native/index.js

@@ -0,0 +1,5 @@
+import Chips from "./Chips";
+var native_default = Chips;
+export {
+  native_default as default
+};

package/esm/Datepicker/Datepicker.theme.js

@@ -0,0 +1,12 @@
+const Datepicker = () => ({
+  width: {
+    day: 32
+  },
+  height: {
+    day: 20
+  }
+});
+var Datepicker_theme_default = Datepicker;
+export {
+  Datepicker_theme_default as default
+};

package/esm/Datepicker/index.js

@@ -0,0 +1,5 @@
+import Datepicker from "./web";
+var Datepicker_default = Datepicker;
+export {
+  Datepicker_default as default
+};

package/esm/Dialog/Dialog.theme.js

@@ -0,0 +1,23 @@
+const Dialog = ({ radii, spacing }) => ({
+  border: {
+    radius: radii.regular
+  },
+  padding: {
+    default: spacing.xlarge,
+    top: spacing.xxlarge,
+    withCloseButton: spacing.large
+  },
+  width: {
+    default: 580
+  },
+  height: {
+    min: 160
+  },
+  position: {
+    default: spacing.zero
+  }
+});
+var Dialog_theme_default = Dialog;
+export {
+  Dialog_theme_default as default
+};

package/esm/Dialog/index.js

@@ -0,0 +1,5 @@
+import Dialog from "./web";
+var Dialog_default = Dialog;
+export {
+  Dialog_default as default
+};

package/esm/Divider/Divider.theme.js

@@ -0,0 +1,5 @@
+const Divider = () => ({});
+var Divider_theme_default = Divider;
+export {
+  Divider_theme_default as default
+};

package/esm/Divider/index.js

@@ -0,0 +1,5 @@
+import Divider from "./web";
+var Divider_default = Divider;
+export {
+  Divider_default as default
+};

package/esm/Divider/index.native.js

@@ -0,0 +1,5 @@
+import Divider from "./native";
+var index_native_default = Divider;
+export {
+  index_native_default as default
+};

package/esm/Divider/native/Divider.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { bool } from "prop-types";
+import React from "react";
+import styled, { css, withTheme } from "styled-components";
+const StyledDivider = styled.View`
+  ${({
+  theme: {
+    yoga: { borders, colors }
+  },
+  vertical
+}) => {
+  return css`
+      ${vertical ? "height: auto" : "width: auto"};
+      ${vertical ? `border-left-width: ${borders.small}` : `border-bottom-width: ${borders.small}`};
+
+      border-color: ${colors.text.disabled};
+    `;
+}}
+`;
+const Divider = React.forwardRef(({ vertical }, ref) => {
+  return /* @__PURE__ */ jsx(StyledDivider, { vertical, ref });
+});
+Divider.propTypes = {
+  /** If this value is defined, the divider will be in vertical when the flexDirection is row type */
+  vertical: bool
+};
+Divider.defaultProps = {
+  vertical: false
+};
+var Divider_default = withTheme(Divider);
+export {
+  Divider_default as default
+};