@gympass/yoga 7.88.0 → 7.88.1

package/esm/Divider/native/Divider.test.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Divider, Box, Text } from "../..";
+describe("<Divider />", () => {
+  it("should create a divider component", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          display: "flex",
+          flexDirection: "column",
+          minWidth: 300,
+          justifyContent: "space-between",
+          children: [
+            /* @__PURE__ */ jsx(Text.H4, { children: "First Content" }),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(Text.H4, { children: "Second Content" })
+          ]
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should create vertical divider component", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          display: "flex",
+          flexDirection: "row",
+          minWidth: 300,
+          justifyContent: "space-between",
+          children: [
+            /* @__PURE__ */ jsx(Text.H4, { children: "First Content" }),
+            /* @__PURE__ */ jsx(Divider, { vertical: true }),
+            /* @__PURE__ */ jsx(Text.H4, { children: "Second Content" })
+          ]
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Divider/native/index.js

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

package/esm/Drawer/Drawer.theme.js

@@ -0,0 +1,15 @@
+const Drawer = ({ spacing }) => ({
+  padding: {
+    top: spacing.small,
+    right: spacing.xxxlarge,
+    bottom: spacing.xxlarge,
+    left: spacing.xxxlarge
+  },
+  width: {
+    default: 600
+  }
+});
+var Drawer_theme_default = Drawer;
+export {
+  Drawer_theme_default as default
+};

package/esm/Drawer/index.js

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

package/esm/Dropdown/Dropdown.theme.js

@@ -0,0 +1,185 @@
+import { hexToRgb } from "@gympass/yoga-common";
+const Dropdown = ({
+  colors,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii,
+  spacing,
+  borders
+}) => ({
+  width: 320,
+  selector: {
+    background: colors.white,
+    padding: {
+      top: spacing.small,
+      right: spacing.small,
+      bottom: spacing.small,
+      left: spacing.small
+    },
+    border: {
+      width: borders.small,
+      radius: radii.small,
+      color: colors.elements.lineAndBorders
+    }
+  },
+  arrow: {
+    fill: colors.text.secondary
+  },
+  input: {
+    font: {
+      color: colors.text.secondary,
+      size: fontSizes.small,
+      lineHeight: lineHeights.small
+    },
+    label: {
+      color: colors.text.primary,
+      margin: {
+        left: spacing.xxxsmall
+      }
+    }
+  },
+  button: {
+    padding: {
+      right: spacing.small,
+      top: spacing.small,
+      bottom: spacing.small
+    }
+  },
+  optionsList: {
+    backgroundColor: colors.white,
+    border: {
+      radius: {
+        topLeft: radii.sharp,
+        topRight: radii.sharp,
+        bottomRight: radii.small,
+        bottomLeft: radii.small
+      },
+      width: borders.small,
+      color: colors.text.primary
+    }
+  },
+  option: {
+    height: spacing.xxlarge,
+    backgroundColor: colors.white,
+    padding: {
+      top: spacing.zero,
+      right: spacing.small,
+      bottom: spacing.zero,
+      left: spacing.small
+    },
+    border: {
+      width: borders.small,
+      color: colors.elements.backgroundAndDisabled,
+      radius: {
+        topLeft: radii.sharp,
+        topRight: radii.sharp,
+        bottomRight: radii.small,
+        bottomLeft: radii.small
+      }
+    },
+    font: {
+      color: colors.text.primary,
+      size: fontSizes.small,
+      lineHeight: lineHeights.small,
+      weight: fontWeights.regular
+    }
+  },
+  backdrop: {
+    content: {
+      height: 320,
+      backgroundColor: colors.white,
+      border: {
+        radius: {
+          topLeft: radii.small,
+          topRight: radii.small
+        }
+      },
+      title: {
+        padding: {
+          top: spacing.medium,
+          right: spacing.zero,
+          bottom: spacing.medium,
+          left: spacing.zero
+        },
+        font: {
+          weight: fontWeights.bold,
+          size: fontSizes.medium
+        }
+      },
+      option: {
+        padding: {
+          top: spacing.large,
+          right: spacing.large,
+          bottom: spacing.large,
+          left: spacing.large
+        }
+      },
+      actions: {
+        padding: {
+          top: spacing.zero,
+          right: spacing.large,
+          bottom: spacing.large,
+          left: spacing.large
+        }
+      }
+    }
+  },
+  hover: {
+    selector: {
+      border: {
+        color: colors.text.primary,
+        error: colors.verve
+      }
+    },
+    option: {
+      backgroundColor: hexToRgb(colors.elements.backgroundAndDisabled, 0.5)
+    }
+  },
+  disabled: {
+    selector: {
+      border: {
+        color: colors.elements.backgroundAndDisabled
+      }
+    },
+    input: {
+      font: {
+        color: colors.text.disabled
+      }
+    },
+    arrow: {
+      fill: colors.elements.lineAndBorders
+    }
+  },
+  selected: {
+    selector: {
+      border: {
+        color: colors.text.primary
+      }
+    },
+    arrow: {
+      fill: colors.text.primary
+    },
+    input: {
+      font: {
+        color: colors.text.primary
+      }
+    },
+    optionsList: {
+      border: {
+        color: colors.text.primary
+      }
+    },
+    option: {
+      font: {
+        color: colors.text.primary,
+        weight: fontWeights.medium,
+        size: fontSizes.medium
+      }
+    }
+  }
+});
+var Dropdown_theme_default = Dropdown;
+export {
+  Dropdown_theme_default as default
+};

package/esm/Dropdown/index.js

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

package/esm/Dropdown/index.native.js

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

package/esm/Dropdown/native/Backdrop.js

@@ -0,0 +1,157 @@
+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, { useEffect, useState } from "react";
+import styled, { withTheme } from "styled-components";
+import { node, string, func, bool } from "prop-types";
+import {
+  Animated,
+  TouchableWithoutFeedback,
+  Easing,
+  Modal
+} from "react-native";
+import Text from "../../Text";
+const ClosableArea = styled(Animated.View)`
+  ${({
+  theme: {
+    yoga: { colors }
+  }
+}) => `
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    background-color: ${colors.text.primary};
+  `}
+`;
+const ContentWrapper = styled(Animated.View)`
+  position: absolute;
+  justify-content: flex-end;
+
+  width: 100%;
+`;
+const Content = styled.View`
+  ${({
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    justify-content: center;
+    width: 100%;
+
+    background-color: ${dropdown.backdrop.content.backgroundColor};
+    border-top-left-radius: ${dropdown.backdrop.content.border.radius.topLeft}px;
+    border-top-right-radius: ${dropdown.backdrop.content.border.radius.topRight}px;
+  `}
+`;
+const Title = styled(Text.Bold)`
+  ${({
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    width: 100%;
+    padding:
+      ${dropdown.backdrop.content.title.padding.top}px
+      ${dropdown.backdrop.content.title.padding.right}px
+      ${dropdown.backdrop.content.title.padding.bottom}px
+      ${dropdown.backdrop.content.title.padding.left}px;
+
+    font-size: ${dropdown.backdrop.content.title.font.size}px;
+
+    text-align: center;
+  `}
+`;
+const Backdrop = (_a) => {
+  var _b = _a, {
+    visible,
+    title,
+    children,
+    onClose,
+    theme: {
+      yoga: {
+        transition,
+        components: { dropdown }
+      }
+    }
+  } = _b, props = __objRest(_b, [
+    "visible",
+    "title",
+    "children",
+    "onClose",
+    "theme"
+  ]);
+  const [isOpen, toggleIsOpen] = useState(visible);
+  const [backgroundAnimation] = useState(new Animated.Value(0));
+  const [contentAnimation] = useState(
+    new Animated.Value(-dropdown.backdrop.content.height)
+  );
+  const animate = (animation, toValue) => Animated.timing(animation, {
+    toValue,
+    duration: transition.duration[0],
+    easing: Easing.out(Easing.ease),
+    useNativeDriver: false
+  }).start(() => !visible && toggleIsOpen(false));
+  useEffect(() => {
+    if (visible)
+      toggleIsOpen(true);
+    animate(backgroundAnimation, visible ? 0.5 : 0);
+    animate(contentAnimation, visible ? 0 : -dropdown.backdrop.content.height);
+  }, [visible]);
+  return isOpen && /* @__PURE__ */ jsxs(Modal, __spreadProps(__spreadValues({}, props), { transparent: true, animationType: "none", children: [
+    /* @__PURE__ */ jsx(TouchableWithoutFeedback, { onPress: onClose, children: /* @__PURE__ */ jsx(ClosableArea, { style: { opacity: backgroundAnimation } }) }),
+    /* @__PURE__ */ jsx(ContentWrapper, { style: { bottom: contentAnimation }, children: /* @__PURE__ */ jsxs(Content, { children: [
+      title && /* @__PURE__ */ jsx(Title, { children: title }),
+      children
+    ] }) })
+  ] }));
+};
+Backdrop.propTypes = {
+  visible: bool,
+  title: string,
+  children: node.isRequired,
+  onClose: func
+};
+Backdrop.defaultProps = {
+  visible: false,
+  title: null,
+  onClose: () => {
+  }
+};
+var Backdrop_default = withTheme(Backdrop);
+export {
+  Backdrop_default as default
+};

package/esm/Dropdown/native/Backdrop.test.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider } from "../..";
+import Backdrop from "./Backdrop";
+jest.useFakeTimers();
+describe("<Backdrop />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Backdrop, { title: "Find an Activity", children: "Some Content" }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot when visible", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Backdrop, { visible: true, title: "Find an Activity", children: "Some Content" }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Dropdown/native/Dropdown.js

@@ -0,0 +1,220 @@
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import styled, { withTheme } from "styled-components";
+import {
+  arrayOf,
+  func,
+  shape,
+  number,
+  string,
+  bool,
+  oneOfType
+} from "prop-types";
+import { TouchableWithoutFeedback, View } from "react-native";
+import { ChevronDown } from "@gympass/yoga-icons";
+import Options from "./Options";
+import Backdrop from "./Backdrop";
+import Text from "../../Text";
+import Helper from "../../Input/native/Helper";
+const Selector = styled.View`
+  ${({
+  disabled,
+  selected,
+  error,
+  full,
+  theme: {
+    yoga: {
+      colors,
+      components: { dropdown }
+    }
+  }
+}) => `
+    position: relative;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    width: ${full ? "100%" : `${dropdown.width}px`};
+    padding: ${dropdown.selector.padding.top}px
+      ${dropdown.selector.padding.right}px
+      ${dropdown.selector.padding.bottom}px
+      ${dropdown.selector.padding.left}px;
+
+    background-color: ${dropdown.selector.background};
+    border-radius: ${dropdown.selector.border.radius}px;
+    border-width: ${dropdown.selector.border.width}px;
+    border-style: solid;
+    border-color: ${error ? colors.feedback.attention[1] : dropdown.selector.border.color};
+
+    ${disabled ? `border-color: ${dropdown.disabled.selector.border.color};` : ""};
+    ${selected ? `border-color: ${dropdown.selected.selector.border.color};` : ""};
+  `}
+`;
+const Label = styled(Text)`
+  ${({
+  disabled,
+  selected,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    color: ${dropdown.input.font.color};
+    ${disabled ? `color: ${dropdown.disabled.input.font.color};` : ""}
+    ${selected ? `color: ${dropdown.selected.input.font.color};` : ""}
+  `}
+`;
+const getSelectedOption = (options) => options.find((item) => item.selected === true);
+const Dropdown = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      error,
+      label,
+      disabled,
+      full,
+      options,
+      cancelActionLabel,
+      confirmActionLabel,
+      onChange,
+      theme: {
+        yoga: {
+          components: { dropdown }
+        }
+      }
+    } = _b, rest = __objRest(_b, [
+      "error",
+      "label",
+      "disabled",
+      "full",
+      "options",
+      "cancelActionLabel",
+      "confirmActionLabel",
+      "onChange",
+      "theme"
+    ]);
+    const [selected, toggleIsSelected] = useState(getSelectedOption(options));
+    const [isOpen, toggleIsOpen] = useState(false);
+    const iconColor = () => {
+      if (disabled)
+        return dropdown.disabled.arrow.fill;
+      if (selected)
+        return dropdown.selected.arrow.fill;
+      return dropdown.arrow.fill;
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        TouchableWithoutFeedback,
+        {
+          accessibilityRole: "button",
+          onPress: () => !disabled && toggleIsOpen(true),
+          children: /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsxs(
+              Selector,
+              __spreadProps(__spreadValues({
+                full,
+                disabled,
+                selected,
+                error
+              }, rest), {
+                ref,
+                children: [
+                  /* @__PURE__ */ jsx(Label, { disabled, selected, children: selected && selected.label || label }),
+                  /* @__PURE__ */ jsx(ChevronDown, { width: 20, height: 20, fill: iconColor() })
+                ]
+              })
+            ),
+            error && !selected && /* @__PURE__ */ jsx(Helper, { error })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Backdrop,
+        {
+          visible: isOpen,
+          title: label,
+          onClose: () => toggleIsOpen(false),
+          children: /* @__PURE__ */ jsx(
+            Options,
+            {
+              options,
+              selectedOption: selected,
+              cancelActionLabel,
+              confirmActionLabel,
+              onClose: () => toggleIsOpen(false),
+              onSelect: (item) => {
+                toggleIsSelected(item);
+                onChange(item);
+                toggleIsOpen(false);
+              }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Dropdown.propTypes = {
+  label: string,
+  disabled: bool,
+  error: string,
+  full: bool,
+  /** { label (string), value (string or number), selected: (boolean) } */
+  options: arrayOf(
+    shape({
+      label: string,
+      value: oneOfType([string, number]),
+      selected: bool
+    })
+  ).isRequired,
+  /** Cancel label that will be shown in iOS option chooser */
+  cancelActionLabel: string,
+  /** Confirm label that will be shown in iOS option chooser */
+  confirmActionLabel: string,
+  onChange: func
+};
+Dropdown.defaultProps = {
+  label: "",
+  error: void 0,
+  full: false,
+  cancelActionLabel: "Cancel",
+  confirmActionLabel: "Confirm",
+  disabled: false,
+  onChange: () => {
+  }
+};
+var Dropdown_default = withTheme(Dropdown);
+export {
+  Dropdown_default as default
+};