@gympass/yoga 7.88.0 → 7.88.1

package/esm/Result/native/Result.test.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { BuildingFilled } from "@gympass/yoga-icons";
+import { ThemeProvider } from "../..";
+import Result from "./Result";
+import Avatar from "../../Avatar";
+import Text from "../../Text";
+const attendanceList = [
+  {
+    description: "Attendance 01",
+    icon: BuildingFilled
+  },
+  {
+    description: "Attendance 02",
+    icon: BuildingFilled
+  }
+];
+const entranceList = [
+  {
+    children: "From 7:30 am to 9:00 pm",
+    variant: "stamina"
+  }
+];
+const activitiesList = [
+  {
+    children: "Yoga",
+    variant: "deep"
+  },
+  {
+    children: "Meditation",
+    variant: "deep"
+  },
+  {
+    children: "Pilates",
+    variant: "deep"
+  },
+  {
+    children: "Activity4",
+    variant: "deep"
+  },
+  {
+    children: "Activity5",
+    variant: "deep"
+  }
+];
+const tagsList = [
+  {
+    children: "Plan x Product availability",
+    variant: "informative"
+  },
+  {
+    children: "Restriction",
+    variant: "attention"
+  }
+];
+describe("<Result />", () => {
+  it("should match snapshot", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(
+        Result,
+        {
+          rate: "5.0",
+          avatar: /* @__PURE__ */ jsx(Avatar.Circle, {}),
+          attendances: attendanceList,
+          title: "Jane Doe",
+          subTitle: "Activity",
+          divided: true,
+          children: [
+            /* @__PURE__ */ jsx(Result.Details, { items: entranceList, dots: true, renderItem: Text.Small }),
+            /* @__PURE__ */ jsx(
+              Result.Details,
+              {
+                items: activitiesList,
+                dots: true,
+                limit: 3,
+                renderItem: Text.Small,
+                limitLabel: "activities"
+              }
+            ),
+            /* @__PURE__ */ jsx(Result.Tags, { items: tagsList }),
+            /* @__PURE__ */ jsx(Result.Button, { children: "See Details" })
+          ]
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot without limitLabel prop", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(
+        Result,
+        {
+          rate: "5.0",
+          avatar: /* @__PURE__ */ jsx(Avatar.Circle, {}),
+          attendances: attendanceList,
+          title: "John Doe",
+          subTitle: "Activity",
+          divided: true,
+          children: [
+            /* @__PURE__ */ jsx(Result.Details, { items: entranceList, dots: true, renderItem: Text.Small }),
+            /* @__PURE__ */ jsx(
+              Result.Details,
+              {
+                items: activitiesList,
+                dots: true,
+                limit: 2,
+                renderItem: Text.Small
+              }
+            ),
+            /* @__PURE__ */ jsx(Result.Tags, { items: tagsList }),
+            /* @__PURE__ */ jsx(Result.Button, { children: "See Details" })
+          ]
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot without attendence", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Result, { avatar: /* @__PURE__ */ jsx(Avatar, {}), title: "Gym", children: [
+        /* @__PURE__ */ jsx(Result.Details, { items: entranceList, dots: true }),
+        /* @__PURE__ */ jsx(Result.Details, { items: activitiesList, dots: true })
+      ] }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Result/native/ResultButton.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import Button from "../../Button";
+const ResultButton = styled(Button.Link)`
+  ${({
+  theme: {
+    yoga: {
+      spacing: { xxsmall, xlarge }
+    }
+  }
+}) => {
+  return `
+      margin-top: ${xxsmall}px;
+      margin-right: ${xlarge}px;
+    `;
+}}
+`;
+var ResultButton_default = ResultButton;
+export {
+  ResultButton_default as default
+};

package/esm/Result/native/Tags.js

@@ -0,0 +1,65 @@
+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 { arrayOf, shape } from "prop-types";
+import styled from "styled-components";
+import Tag from "../../Tag";
+const TagStyled = styled(Tag.Informative)`
+  margin-right: 4px;
+`;
+const Wrapper = styled.ScrollView`
+  display: flex;
+  flex-direction: row;
+  ${({
+  theme: {
+    yoga: {
+      spacing: { xxsmall }
+    }
+  }
+}) => `
+    margin-top: ${xxsmall}px;
+  `}
+`;
+const ResultTags = ({ items }) => /* @__PURE__ */ jsx(Wrapper, { horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((_a, index) => {
+  var props = __objRest(_a, []);
+  return (
+    // eslint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ jsx(TagStyled, __spreadValues({ small: true }, props), index)
+  );
+}) });
+ResultTags.displayName = "Result.Tags";
+ResultTags.propTypes = {
+  /** Props to generate each Tag. See Tag for details */
+  items: arrayOf(shape({})).isRequired
+};
+var Tags_default = ResultTags;
+export {
+  Tags_default as default
+};

package/esm/Result/native/TinyTextIcon.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 Box from "../../Box";
+import Icon from "../../Icon";
+const TinyTextIcon = (props) => /* @__PURE__ */ jsx(Box, { height: "xsmall", width: "xsmall", children: /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, props), { size: "xsmall", mt: "2px" })) });
+TinyTextIcon.propTypes = Icon.propTypes;
+var TinyTextIcon_default = TinyTextIcon;
+export {
+  TinyTextIcon_default as default
+};

package/esm/Result/native/index.js

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

package/esm/Skeleton/Skeleton.theme.js

@@ -0,0 +1,22 @@
+const Skeleton = ({ lineHeights, radii }) => ({
+  border: {
+    circular: radii.circle
+  },
+  height: {
+    text: {
+      h1: lineHeights.huge,
+      h2: lineHeights.xxxlarge,
+      h3: lineHeights.xxlarge,
+      h4: lineHeights.xlarge,
+      h5: lineHeights.large,
+      body1: lineHeights.medium,
+      body2: lineHeights.small,
+      overline: lineHeights.xsmall,
+      exception: lineHeights.xxsmall
+    }
+  }
+});
+var Skeleton_theme_default = Skeleton;
+export {
+  Skeleton_theme_default as default
+};

package/esm/Skeleton/index.js

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

package/esm/Skeleton/index.native.js

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

package/esm/Skeleton/native/Skeleton.js

@@ -0,0 +1,142 @@
+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 { checkPropTypes, oneOf } from "prop-types";
+import React, { useEffect, useState } from "react";
+import { Animated, Easing } from "react-native";
+import styled from "styled-components";
+import { margins, widths, heights } from "@gympass/yoga-system";
+const StyledSkeleton = styled.View`
+  display: flex;
+  align-items: center;
+
+  ${margins}
+
+  ${widths}
+
+  ${heights}
+
+   ${({
+  type,
+  variant,
+  theme: {
+    yoga: {
+      colors,
+      components: {
+        skeleton: {
+          border: { [type]: borderRadius },
+          height: { [type]: { [variant]: height } = {} }
+        }
+      }
+    }
+  }
+}) => `
+    background-color: ${colors.elements.backgroundAndDisabled};
+    ${borderRadius ? `border-radius: ${borderRadius}px;` : ""}
+    ${height ? `height: ${height}px;` : ""}
+  `}
+`;
+function Skeleton(_a) {
+  var _b = _a, { animation = "pulse" } = _b, props = __objRest(_b, ["animation"]);
+  const [opacity] = useState(new Animated.Value(0.4));
+  useEffect(() => {
+    if (animation) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(opacity, {
+            toValue: 1,
+            delay: 500,
+            duration: 1e3,
+            easing: Easing.inOut(Easing.linear),
+            useNativeDriver: true
+          }),
+          Animated.timing(opacity, {
+            toValue: 0.4,
+            duration: 500,
+            easing: Easing.inOut(Easing.linear),
+            useNativeDriver: true
+          })
+        ])
+      ).start();
+    }
+  }, [opacity]);
+  return /* @__PURE__ */ jsx(Animated.View, { style: { opacity }, children: /* @__PURE__ */ jsx(StyledSkeleton, __spreadValues({}, props)) });
+}
+Skeleton.propTypes = {
+  /**
+   * Determines which type will be rendered. It can be
+   * 'circular', 'rectangular' or 'text'.
+   */
+  type: oneOf(["circular", "rectangular", "text"]).isRequired,
+  /**
+   * style the skeleton following the theme (the variant prop can only be used assemble to type "text").
+   * It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
+   */
+  variant: (props, propName, componentName) => {
+    const { type } = props;
+    if (type !== "text" && !!props[propName]) {
+      return new Error(
+        `The ${propName} prop must only be used when the type is equal to "text".`
+      );
+    }
+    if (type === "text") {
+      return checkPropTypes(
+        {
+          [propName]: oneOf([
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "body1",
+            "body2",
+            "overline",
+            "exception"
+          ]).isRequired
+        },
+        props,
+        "prop",
+        componentName
+      );
+    }
+    return null;
+  },
+  /**
+   * Determine if the animation will 'pulse' or false;
+   */
+  animation: oneOf(["pulse", false])
+};
+Skeleton.defaultProps = {
+  variant: void 0,
+  animation: "pulse"
+};
+var Skeleton_default = Skeleton;
+export {
+  Skeleton_default as default
+};

package/esm/Skeleton/native/Skeleton.test.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Skeleton } from "../..";
+describe("<Skeleton />", () => {
+  it("should render the circular skeleton", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "circular", width: 64, height: 64 }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should render the rectangular skeleton", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "rectangular", width: 400, height: 200 }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should render the text skeleton", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: 61, height: 32 }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should render all text skeleton variants correctly", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h1", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h2", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h3", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h4", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h5", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body2", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "overline", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "exception", width: "100" })
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Skeleton/native/index.js

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

package/esm/Slider/Slider.theme.js

@@ -0,0 +1,75 @@
+const Slider = ({
+  colors,
+  radii,
+  elevations,
+  spacing,
+  fontWeights,
+  fontSizes
+}) => ({
+  track: {
+    backgroundColor: {
+      active: colors.primary,
+      inactive: colors.elements.lineAndBorders
+    },
+    border: {
+      radius: radii.circle
+    }
+  },
+  step: {
+    backgroundColor: {
+      active: colors.primary,
+      inactive: colors.elements.lineAndBorders
+    },
+    border: {
+      radius: radii.circle
+    }
+  },
+  marker: {
+    backgroundColor: colors.primary,
+    border: {
+      color: colors.white,
+      radius: radii.circle
+    },
+    shadow: elevations.small
+  },
+  tooltip: {
+    shadow: elevations.medium,
+    radius: radii.small,
+    backgroundColor: colors.elements.backgroundAndDisabled,
+    distance: spacing.large,
+    padding: {
+      top: spacing.xxxsmall,
+      right: spacing.xxsmall,
+      bottom: spacing.xxxsmall,
+      left: spacing.xxsmall
+    },
+    font: {
+      color: colors.text.secondary,
+      title: {
+        weight: fontWeights.regular
+      },
+      description: {
+        weight: fontWeights.regular
+      }
+    },
+    ribbon: {
+      backgroundColor: colors.primary,
+      radius: radii.small,
+      padding: {
+        top: spacing.xxxsmall,
+        right: spacing.xxsmall,
+        bottom: spacing.xxxsmall,
+        left: spacing.xxsmall
+      },
+      font: {
+        color: colors.white,
+        weight: fontWeights.bold,
+        size: fontSizes.xsmall
+      }
+    }
+  }
+});
+var Slider_theme_default = Slider;
+export {
+  Slider_theme_default as default
+};

package/esm/Slider/index.js

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

package/esm/Slider/index.native.js

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

package/esm/Slider/native/Label.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { oneOf } from "prop-types";
+const LabelView = styled.View`
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const LabelText = styled.Text(
+  ({
+    placement,
+    theme: {
+      yoga: { baseFont }
+    }
+  }) => `
+    position: relative;
+    bottom: 5;
+    left: ${placement === "left" ? -8 : 0}px;
+
+    font-family: ${baseFont.family};
+
+    text-align: ${placement};
+  `
+);
+LabelText.propTypes = {
+  placement: oneOf(["left", "right"])
+};
+LabelText.defaultProps = {
+  placement: "left"
+};
+export {
+  LabelText,
+  LabelView
+};

package/esm/Slider/native/Marker.js

@@ -0,0 +1,84 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { bool, number, shape, string } from "prop-types";
+import styled from "styled-components";
+import { hexToRgb } from "@gympass/yoga-common";
+import Tooltip from "./Tooltip";
+import Box from "../../Box";
+const Circle = styled(Box).attrs(
+  ({
+    theme: {
+      yoga: {
+        components: { slider }
+      }
+    }
+  }) => ({
+    bgColor: slider.marker.backgroundColor,
+    border: 6,
+    borderColor: slider.marker.border.color,
+    borderRadius: slider.marker.border.radius,
+    elevation: slider.marker.shadow,
+    height: 24,
+    width: 24,
+    top: "2px",
+    position: "relative",
+    as: TouchableOpacity
+  })
+)``;
+const CirclePressed = styled(Circle)(
+  ({
+    pressed,
+    theme: {
+      yoga: {
+        components: { slider }
+      }
+    }
+  }) => `
+    ${pressed ? `
+          background-color: ${hexToRgb(slider.marker.backgroundColor, 0.2)};
+          border: none;
+          width: 40px;
+          height: 40px;
+          position: absolute;
+          elevation: 0;
+          top: -6px;
+    ` : "display: none; border: none;"}
+  `
+);
+CirclePressed.propTypes = {
+  pressed: bool
+};
+CirclePressed.defaultProps = {
+  pressed: false
+};
+const Marker = ({ pressed, tooltip }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  pressed && tooltip && /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      description: tooltip.description,
+      title: tooltip.title,
+      ribbon: tooltip.ribbon
+    }
+  ),
+  /* @__PURE__ */ jsx(CirclePressed, { as: View, pressed }),
+  /* @__PURE__ */ jsx(Circle, { accessible: true, accessibilityRole: "adjustable" })
+] });
+Marker.propTypes = {
+  pressed: bool,
+  tooltip: shape({
+    description: string,
+    title: string,
+    ribbon: string,
+    visible: bool,
+    step: number
+  })
+};
+Marker.defaultProps = {
+  pressed: false,
+  tooltip: void 0
+};
+var Marker_default = Marker;
+export {
+  Marker_default as default
+};