@gympass/yoga 7.88.0 → 7.88.2

package/esm/Snackbar/native/Snackbar.js

@@ -0,0 +1,246 @@
+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, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import styled from "styled-components";
+import { string, oneOf, func, elementType, number } from "prop-types";
+import { PanResponder } from "react-native";
+import Box from "../../Box";
+import Button from "../../Button";
+import Icon from "../../Icon";
+import Text from "../../Text";
+import SnackbarAnimationWrapper from "./SnackbarAnimationWrapper";
+const SWIPE_THRESHOLD = 32;
+const SnackbarContainer = styled.View`
+  ${({
+  bottomOffset,
+  variant,
+  theme: {
+    yoga: {
+      colors: { feedback },
+      components: {
+        snackbar: {
+          padding,
+          margin,
+          variant: {
+            color: { [variant]: backgroundColor = feedback.success.light }
+          },
+          border
+        }
+      }
+    }
+  }
+}) => `
+    padding: ${padding.vertical}px ${padding.horizontal}px;
+    margin-horizontal: ${margin.horizontal}px
+    margin-bottom: ${margin.bottom + bottomOffset}px;
+    background-color: ${backgroundColor};
+    border-radius: ${border.radius}px;
+    flex-direction: row;
+    align-items: center;
+  `}
+`;
+const Snackbar = forwardRef((props, ref) => {
+  const _a = props, {
+    icon,
+    message,
+    actionLabel,
+    onAction,
+    variant,
+    onSnackbarClose,
+    duration,
+    bottomOffset
+  } = _a, rest = __objRest(_a, [
+    "icon",
+    "message",
+    "actionLabel",
+    "onAction",
+    "variant",
+    "onSnackbarClose",
+    "duration",
+    "bottomOffset"
+  ]);
+  const wrapperRef = useRef();
+  const [currentProps, setCurrentProps] = useState({
+    icon,
+    message,
+    actionLabel,
+    onAction,
+    variant
+  });
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      wrapperRef.current.open();
+    },
+    close: () => {
+      wrapperRef.current.close();
+    }
+  }));
+  useEffect(() => {
+    if (wrapperRef.current && currentProps.message) {
+      wrapperRef.current.close(() => {
+        setCurrentProps({
+          icon,
+          message,
+          actionLabel,
+          onAction,
+          variant
+        });
+        wrapperRef.current.open();
+      });
+    } else {
+      setCurrentProps({
+        icon,
+        message,
+        actionLabel,
+        onAction,
+        variant
+      });
+    }
+  }, [icon, message, actionLabel, onAction, variant]);
+  const handlePanResponderRelease = (_evt, gestureState) => {
+    if (gestureState.dy > SWIPE_THRESHOLD) {
+      wrapperRef.current.close();
+    } else {
+      wrapperRef.current.open();
+    }
+  };
+  const panResponder = PanResponder.create({
+    onPanResponderMove: (_, gestureState) => {
+      if (gestureState.dy > 0) {
+        wrapperRef.current.translateY(gestureState.dy);
+      }
+    },
+    onPanResponderRelease: handlePanResponderRelease,
+    onPanResponderTerminate: handlePanResponderRelease,
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: (_, gestureState) => {
+      return !(gestureState.dy <= 2 && gestureState.dy >= -2);
+    },
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onShouldBlockNativeResponder: () => true
+  });
+  const handleOnAction = () => {
+    wrapperRef.current.close();
+    if (currentProps.onAction) {
+      currentProps.onAction();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    SnackbarAnimationWrapper,
+    {
+      onSnackbarClose,
+      duration,
+      ref: wrapperRef,
+      children: /* @__PURE__ */ jsxs(
+        SnackbarContainer,
+        __spreadProps(__spreadValues(__spreadValues({
+          variant: currentProps.variant,
+          bottomOffset
+        }, rest), panResponder.panHandlers), {
+          children: [
+            currentProps.icon && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                as: currentProps.icon,
+                fill: "secondary",
+                size: "large",
+                marginRight: "xxsmall"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                flex: 1,
+                fontSize: "small",
+                marginTop: "xxxsmall",
+                marginBottom: "xxxsmall",
+                numberOfLines: 2,
+                children: currentProps.message
+              }
+            ),
+            currentProps.actionLabel && /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: Button.Text,
+                small: true,
+                secondary: true,
+                marginLeft: "xxsmall",
+                onPress: handleOnAction,
+                children: currentProps.actionLabel
+              }
+            )
+          ]
+        })
+      )
+    }
+  );
+});
+Snackbar.propTypes = {
+  /** The style variant change the color of the component, it may be "success", "informative" or "attention". */
+  variant: oneOf(["success", "informative", "attention"]),
+  /** Can be any icon of yoga-icons. */
+  icon: elementType,
+  /** The message shown when snackbar is opened. The maximum number of lines is two. */
+  message: string,
+  /** Label for a custom action. */
+  actionLabel: string,
+  /** Function for the custom action. The `actionLabel` becomes required when passing this function. */
+  onAction: func,
+  /** Callback function triggered by the Snackbar close action. Can be used for events, for example. */
+  onSnackbarClose: func,
+  /** The duration sets how long it will take to close snackbar automatically, it may be "fast" (4 seconds), "default" (8 seconds), "slow" (10 seconds) or "indefinite" (it doesn't close automatically). */
+  duration: oneOf(["fast", "default", "slow", "indefinite"]),
+  /** Add extra margin to Snackbar. Can be useful for SafeAreaView or button cases. */
+  bottomOffset: number
+};
+Snackbar.defaultProps = {
+  variant: "success",
+  icon: void 0,
+  message: "",
+  actionLabel: void 0,
+  onAction: void 0,
+  onSnackbarClose: void 0,
+  duration: "default",
+  bottomOffset: 0
+};
+var Snackbar_default = Snackbar;
+export {
+  Snackbar_default as default
+};

package/esm/Snackbar/native/Snackbar.test.js

@@ -0,0 +1,108 @@
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import * as RN from "react-native";
+import { CheckedFull } from "@gympass/yoga-icons";
+import { ThemeProvider, Snackbar } from "../..";
+import Button from "../../Button";
+RN.Animated.spring = jest.fn().mockReturnValue({
+  start: jest.fn()
+});
+const Component = (overrideProps) => {
+  const snackbarRef = useRef();
+  return /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        full: true,
+        small: true,
+        onPress: () => {
+          snackbarRef.current.open();
+        },
+        children: "Tap to open snackbar"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      __spreadValues({
+        ref: snackbarRef,
+        message: "Feedback Message"
+      }, overrideProps)
+    )
+  ] });
+};
+describe("<Snackbar />", () => {
+  it("should match snapshot when snackbar is default", () => {
+    const { toJSON } = render(/* @__PURE__ */ jsx(Component, {}));
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when have an icon and action", () => {
+    const overrideProps = {
+      icon: CheckedFull,
+      actionLabel: "Action",
+      onAction: () => {
+      }
+    };
+    const { toJSON } = render(/* @__PURE__ */ jsx(Component, __spreadValues({}, overrideProps)));
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when have a long text", () => {
+    const overrideProps = {
+      message: "Lorem Ipsum is simply dummy text of the printing and types.",
+      icon: CheckedFull,
+      actionLabel: "Action",
+      onAction: () => {
+      }
+    };
+    const { toJSON } = render(/* @__PURE__ */ jsx(Component, __spreadValues({}, overrideProps)));
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when have a variant informative or attention prop", () => {
+    const overrideProps = {
+      variant: "informative"
+    };
+    const { toJSON } = render(/* @__PURE__ */ jsx(Component, __spreadValues({}, overrideProps)));
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should show and hide snackbar when the open and close Animation function is called", () => {
+    const overrideProps = {
+      onSnackbarClose: jest.fn(),
+      actionLabel: "Action",
+      onAction: jest.fn()
+    };
+    const { getByText, getByTestId } = render(/* @__PURE__ */ jsx(Component, __spreadValues({}, overrideProps)));
+    fireEvent(getByTestId("wrapper"), "layout", {
+      nativeEvent: {
+        layout: { height: 200 }
+      }
+    });
+    fireEvent.press(getByText("Tap to open snackbar"));
+    expect(RN.Animated.spring.mock.calls[0][1]).toEqual({
+      toValue: 0,
+      bounciness: 0,
+      useNativeDriver: true
+    });
+    fireEvent.press(getByText("Action"));
+    expect(RN.Animated.spring.mock.calls[1][1]).toEqual({
+      toValue: 200,
+      bounciness: 0,
+      useNativeDriver: true
+    });
+  });
+});

package/esm/Snackbar/native/SnackbarAnimationWrapper.js

@@ -0,0 +1,114 @@
+import { jsx } from "react/jsx-runtime";
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { Animated, useWindowDimensions, View } from "react-native";
+import { func, node, oneOf } from "prop-types";
+import styled from "styled-components";
+const durationDictionary = {
+  fast: 4e3,
+  default: 8e3,
+  slow: 1e4,
+  indefinite: -1
+};
+const Wrapper = styled(Animated.View)(
+  () => `
+    position: absolute;
+    width: 100%;
+    bottom: 0px;
+  `
+);
+const SnackbarAnimationWrapper = forwardRef(
+  ({ onSnackbarClose, children, duration }, ref) => {
+    const { height: windowHeight } = useWindowDimensions();
+    const [childrenHeight, setChildrenHeight] = useState();
+    const translateY = useRef(new Animated.Value(windowHeight)).current;
+    const timeoutRef = useRef();
+    const childrenRef = useRef();
+    const openAnimation = () => {
+      Animated.spring(translateY, {
+        toValue: 0,
+        bounciness: 0,
+        useNativeDriver: true
+      }).start();
+    };
+    const closeAnimation = (callback) => {
+      if (childrenHeight) {
+        Animated.spring(translateY, {
+          toValue: childrenHeight,
+          bounciness: 0,
+          useNativeDriver: true
+        }).start(({ finished }) => {
+          if (finished && callback) {
+            callback();
+          }
+        });
+        if (onSnackbarClose) {
+          onSnackbarClose();
+        }
+      }
+    };
+    const setupSnackbarTimeout = () => {
+      const timeoutDuration = durationDictionary[duration];
+      const shouldCloseOnTimer = childrenHeight && timeoutDuration > 0;
+      if (shouldCloseOnTimer) {
+        timeoutRef.current = setTimeout(() => {
+          clearTimeout(timeoutRef.current);
+          closeAnimation();
+        }, timeoutDuration);
+      }
+    };
+    const openSnackbar = () => {
+      openAnimation();
+      setupSnackbarTimeout();
+    };
+    const closeSnackbar = (callback) => {
+      clearTimeout(timeoutRef.current);
+      closeAnimation(callback);
+    };
+    useImperativeHandle(ref, () => ({
+      open: () => {
+        openSnackbar();
+      },
+      close: (callback) => {
+        closeSnackbar(callback);
+      },
+      translateY: (dy) => {
+        translateY.setValue(dy);
+      }
+    }));
+    useEffect(() => () => clearTimeout(timeoutRef.current), []);
+    return /* @__PURE__ */ jsx(Wrapper, { style: { zIndex: 10, transform: [{ translateY }] }, children: /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: "wrapper",
+        ref: childrenRef,
+        onLayout: ({
+          nativeEvent: {
+            layout: { height }
+          }
+        }) => {
+          setChildrenHeight(height);
+          translateY.setValue(height);
+        },
+        children
+      }
+    ) });
+  }
+);
+SnackbarAnimationWrapper.propTypes = {
+  onSnackbarClose: func,
+  children: node.isRequired,
+  duration: oneOf(["fast", "default", "slow", "indefinite"]).isRequired
+};
+SnackbarAnimationWrapper.defaultProps = {
+  onSnackbarClose: void 0
+};
+var SnackbarAnimationWrapper_default = SnackbarAnimationWrapper;
+export {
+  SnackbarAnimationWrapper_default as default
+};

package/esm/Snackbar/native/index.js

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

package/esm/Spinner/Spinner.theme.js

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

package/esm/Spinner/index.js

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

package/esm/Stepper/Stepper.theme.js

@@ -0,0 +1,36 @@
+const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
+  padding: {
+    left: spacing.xxlarge,
+    right: spacing.xxlarge
+  },
+  line: {
+    backgroundColor: {
+      active: colors.primary,
+      inactive: colors.elements.backgroundAndDisabled,
+      secondary: colors.medium
+    }
+  },
+  dot: {
+    radius: radii.circle,
+    backgroundColor: {
+      active: colors.primary,
+      inactive: colors.elements.backgroundAndDisabled,
+      secondary: colors.medium
+    }
+  },
+  label: {
+    font: {
+      weight: fontWeights.bold,
+      size: fontSizes.xsmall
+    },
+    color: {
+      active: colors.primary,
+      inactive: colors.elements.selectionAndIcons,
+      secondary: colors.medium
+    }
+  }
+});
+var Stepper_theme_default = Stepper;
+export {
+  Stepper_theme_default as default
+};

package/esm/Stepper/activeDot.js

@@ -0,0 +1,5 @@
+const activeDot = (currentIndex, activeStep) => typeof activeStep !== "number" ? false : currentIndex <= activeStep;
+var activeDot_default = activeDot;
+export {
+  activeDot_default as default
+};

package/esm/Stepper/index.js

@@ -0,0 +1,6 @@
+import { Stepper, Step } from "./web";
+Stepper.Step = Step;
+var Stepper_default = Stepper;
+export {
+  Stepper_default as default
+};

package/esm/Stepper/index.native.js

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

package/esm/Stepper/native/Dots.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { arrayOf, bool, number, string } from "prop-types";
+import React from "react";
+import styled, { css } from "styled-components";
+import Text from "../../Text";
+import activeDot from "../activeDot";
+const Wrapper = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const DotWrapper = styled.View`
+  width: 15px;
+`;
+const Dot = styled.View(
+  ({
+    active,
+    secondary,
+    theme: {
+      yoga: {
+        components: { stepper }
+      }
+    }
+  }) => {
+    const state = secondary ? "secondary" : "active";
+    return css`
+      width: 15px;
+      height: 15px;
+      margin-top: -6px;
+
+      border-radius: ${stepper.dot.radius}px;
+      background-color: ${active ? stepper.dot.backgroundColor[state] : stepper.dot.backgroundColor.inactive};
+    `;
+  }
+);
+const Label = styled(Text.Bold)(
+  ({
+    active,
+    secondary,
+    theme: {
+      yoga: {
+        components: { stepper }
+      }
+    }
+  }) => {
+    const state = secondary ? "secondary" : "active";
+    return css`
+      width: 95px;
+      margin-top: 10px;
+      margin-left: -40px;
+      color: ${active ? stepper.label.color[state] : stepper.label.color.inactive};
+      font-size: ${stepper.label.font.size}px;
+      text-align: center;
+    `;
+  }
+);
+function Dots({ activeStep, labels, secondary }) {
+  return /* @__PURE__ */ jsx(Wrapper, { children: labels.map((label, index) => /* @__PURE__ */ jsxs(DotWrapper, { children: [
+    /* @__PURE__ */ jsx(Dot, { active: activeDot(index, activeStep), secondary }),
+    /* @__PURE__ */ jsx(Label, { active: activeDot(index, activeStep), secondary, children: label })
+  ] }, label)) });
+}
+Dots.propTypes = {
+  activeStep: number,
+  labels: arrayOf(string),
+  secondary: bool
+};
+Dots.defaultProps = {
+  activeStep: 0,
+  labels: [],
+  secondary: false
+};
+var Dots_default = Dots;
+export {
+  Dots_default as default
+};

package/esm/Stepper/native/Line.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { bool, number } from "prop-types";
+import styled from "styled-components";
+const Wrapper = styled.View`
+  position: relative;
+`;
+const InactiveLine = styled.View(
+  ({
+    theme: {
+      yoga: {
+        components: { stepper }
+      }
+    }
+  }) => `
+  width: 100%;
+  height: 4px;
+
+  position: absolute;
+  top: 0;
+
+  background-color: ${stepper.line.backgroundColor.inactive};
+`
+);
+const ActiveLine = styled.View(
+  ({
+    width,
+    secondary,
+    theme: {
+      yoga: {
+        components: { stepper }
+      }
+    }
+  }) => `
+    position: absolute;
+    top: 0;
+
+    background-color: ${secondary ? stepper.line.backgroundColor.secondary : stepper.line.backgroundColor.active};
+    width: ${width}%;
+    height: 4px;
+`
+);
+function Line({ activeStep, totalSteps, secondary }) {
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    /* @__PURE__ */ jsx(InactiveLine, {}),
+    /* @__PURE__ */ jsx(
+      ActiveLine,
+      {
+        width: activeStep <= 0 ? 0 : activeStep / totalSteps * 100,
+        secondary
+      }
+    )
+  ] });
+}
+Line.propTypes = {
+  activeStep: number,
+  totalSteps: number,
+  secondary: bool
+};
+Line.defaultProps = {
+  activeStep: 0,
+  totalSteps: 0,
+  secondary: false
+};
+var Line_default = Line;
+export {
+  Line_default as default
+};