@gympass/yoga 7.88.0 → 7.88.1

package/esm/List/native/List.test.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+import ThemeProvider from "../../Theme";
+import List from "..";
+const data = [
+  { key: "Devin" },
+  { key: "Dan" },
+  { key: "Dominic" },
+  { key: "Jackson" },
+  { key: "James" },
+  { key: "Joel" },
+  { key: "John" },
+  { key: "Jillian" },
+  { key: "Jimmy" },
+  { key: "Julie" }
+];
+describe("<List />", () => {
+  describe("Snapshots", () => {
+    describe("Without props", () => {
+      it("should match snapshot with a default list", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+            List,
+            {
+              data,
+              renderItem: ({ item }) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(Text, { children: item.key }) })
+            }
+          ) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should match snapshot with a small list", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+            List,
+            {
+              data,
+              renderItem: ({ item }) => /* @__PURE__ */ jsx(List.Item, { small: true, children: /* @__PURE__ */ jsx(Text, { children: item.key }) })
+            }
+          ) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should match snapshot with a list without divisors", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+            List,
+            {
+              data,
+              renderItem: ({ item }) => /* @__PURE__ */ jsx(List.Item, { divided: false, children: /* @__PURE__ */ jsx(Text, { children: item.key }) })
+            }
+          ) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should match snapshot with a horizontal list", () => {
+        const { toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+            List,
+            {
+              horizontal: true,
+              data,
+              renderItem: ({ item }) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(Text, { children: item.key }) })
+            }
+          ) })
+        );
+        expect(toJSON()).toMatchSnapshot();
+      });
+      it("should call onPress when selectable item is pressed", () => {
+        const a = { key: "Devin", onPress: jest.fn() };
+        const { getByText } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+            List,
+            {
+              data: [a],
+              renderItem: ({ item }) => /* @__PURE__ */ jsx(List.Item, { onPress: item.onPress, children: /* @__PURE__ */ jsx(Text, { children: item.key }) })
+            }
+          ) })
+        );
+        const selectableItem = getByText(a.key);
+        fireEvent.press(selectableItem);
+        expect(a.onPress).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/esm/List/native/ListItem.js

@@ -0,0 +1,109 @@
+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 { TouchableHighlight } from "react-native";
+import PropTypes from "prop-types";
+import styled, { withTheme } from "styled-components";
+const StyledView = styled.View(
+  ({
+    divided,
+    small,
+    theme: {
+      yoga: {
+        components: { list }
+      }
+    }
+  }) => `
+  ${divided ? `
+          border-bottom-width: ${list.border.width}px;
+          border-bottom-color: ${list.border.color};
+        ` : ""}
+
+  ${small ? `
+          padding:
+            ${list.listItem.small.padding.top}px
+            ${list.listItem.small.padding.right}px
+            ${list.listItem.small.padding.bottom}px
+            ${list.listItem.small.padding.left}px;
+        ` : `
+          padding:
+            ${list.listItem.padding.top}px
+            ${list.listItem.padding.right}px
+            ${list.listItem.padding.bottom}px
+            ${list.listItem.padding.left}px;
+        `}
+  `
+);
+const ListItem = (_a) => {
+  var _b = _a, {
+    theme: {
+      yoga: {
+        components: {
+          list: { listItem }
+        }
+      }
+    },
+    small,
+    divided,
+    onPress
+  } = _b, rest = __objRest(_b, [
+    "theme",
+    "small",
+    "divided",
+    "onPress"
+  ]);
+  const Component = /* @__PURE__ */ jsx(StyledView, __spreadValues({ small, divided }, rest));
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      TouchableHighlight,
+      {
+        onPress,
+        underlayColor: listItem.selectable.color,
+        children: Component
+      }
+    );
+  }
+  return Component;
+};
+ListItem.propTypes = {
+  small: PropTypes.bool,
+  divided: PropTypes.bool,
+  onPress: PropTypes.func
+};
+ListItem.defaultProps = {
+  small: false,
+  divided: true,
+  onPress: void 0
+};
+ListItem.displayName = "List.Item";
+var ListItem_default = withTheme(ListItem);
+export {
+  ListItem_default as default
+};

package/esm/List/native/index.js

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

package/esm/Menu/Menu.theme.js

@@ -0,0 +1,43 @@
+const Menu = ({ spacing, radii, colors, fontWeights }) => ({
+  border: {
+    radius: radii.small
+  },
+  width: {
+    min: 176,
+    max: 280
+  },
+  margin: {
+    default: spacing.small,
+    medium: spacing.medium,
+    xxsmall: spacing.xxsmall
+  },
+  padding: {
+    horizontal: spacing.small,
+    vertical: spacing.xxsmall
+  },
+  backgroundColor: {
+    white: colors.white,
+    disabled: colors.elements.backgroundAndDisabled
+  },
+  text: {
+    default: {
+      color: colors.text.primary
+    },
+    active: {
+      color: colors.primary
+    },
+    disabled: {
+      color: colors.text.disabled
+    }
+  },
+  font: {
+    weight: fontWeights.medium
+  },
+  icon: {
+    disabled: colors.elements.selectionAndIcons
+  }
+});
+var Menu_theme_default = Menu;
+export {
+  Menu_theme_default as default
+};

package/esm/Menu/index.js

@@ -0,0 +1,11 @@
+import Menu from "./web/Menu";
+import MenuAction from "./web/MenuAction";
+import MenuList from "./web/MenuList";
+import MenuItem from "./web/MenuItem";
+Menu.Action = MenuAction;
+Menu.List = MenuList;
+Menu.Item = MenuItem;
+var Menu_default = Menu;
+export {
+  Menu_default as default
+};

package/esm/Popover/Popover.theme.js

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

package/esm/Popover/index.js

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

package/esm/Progress/Progress.theme.js

@@ -0,0 +1,18 @@
+const Progress = ({ spacing, colors, radii, fontSizes }) => ({
+  height: spacing.xxsmall,
+  backgroundColor: {
+    bar: colors.elements.backgroundAndDisabled
+  },
+  border: {
+    radius: radii.small
+  },
+  label: {
+    font: {
+      size: fontSizes.xsmall
+    }
+  }
+});
+var Progress_theme_default = Progress;
+export {
+  Progress_theme_default as default
+};

package/esm/Progress/index.js

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

package/esm/Progress/index.native.js

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

package/esm/Progress/native/Progress.js

@@ -0,0 +1,198 @@
+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 styled from "styled-components";
+import { string, number, shape, oneOfType, oneOf } from "prop-types";
+import {
+  backgroundColor,
+  borders,
+  elevation,
+  positions,
+  display,
+  spacing as systemSpacing
+} from "@gympass/yoga-system";
+import { charLength } from "../../shared";
+const ProgressWrapper = styled.View`
+  width: 100%;
+
+  ${({ isNumber, align }) => `
+
+  ${isNumber ? `
+      flex-direction: row;
+    ` : `
+      flex-direction: column;
+    `}
+
+  ${isNumber && align === "left" ? "flex-direction: row-reverse;" : ""}
+  `}
+
+  ${backgroundColor}
+  ${borders}
+  ${elevation}
+  ${positions}
+  ${display}
+  ${systemSpacing}
+`;
+const ProgressBar = styled.View`
+  position: relative;
+  flex-grow: 1;
+
+  margin: auto 0;
+
+  ${({
+  theme: {
+    yoga: {
+      components: { progress }
+    }
+  }
+}) => `
+    height: ${progress.height}px;
+
+    background-color: ${progress.backgroundColor.bar};
+
+    border-radius: ${progress.border.radius}px;
+  `};
+`;
+const ProgressValue = styled.View`
+  position: absolute;
+
+  height: 100%;
+
+  ${({
+  variant,
+  width,
+  theme: {
+    yoga: {
+      colors: { [variant]: color },
+      components: { progress }
+    }
+  }
+}) => `
+    width: ${width}%;
+
+    background-color: ${color};
+
+    border-radius: ${progress.border.radius}px;
+  `}
+`;
+const Label = styled.Text`
+  ${({
+  isNumber,
+  align,
+  theme: {
+    yoga: {
+      baseFont,
+      spacing,
+      colors,
+      components: { progress }
+    }
+  }
+}) => `
+  font-family: ${baseFont.family};
+  font-size: ${progress.label.font.size}px;
+  text-align: ${align};
+  color: ${colors.deep};
+
+  ${isNumber ? `
+      width: 22px;
+
+      margin-${align === "right" ? "left" : "right"}: ${spacing.xxsmall}px;
+    ` : `
+      margin-top: ${spacing.xxxsmall}px;
+    `}
+`}
+`;
+const Progress = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, max, value, variant } = _b, props = __objRest(_b, ["label", "max", "value", "variant"]);
+    const isNumber = !/[a-zA-Z]/g.test(label.value);
+    const align = label.placement || "left";
+    return /* @__PURE__ */ jsxs(ProgressWrapper, __spreadProps(__spreadValues({ ref }, props), { isNumber, align, children: [
+      /* @__PURE__ */ jsx(ProgressBar, { children: /* @__PURE__ */ jsx(ProgressValue, { width: value / max * 100, variant }) }),
+      Object.keys(label).length > 0 && (isNumber || label.value) && /* @__PURE__ */ jsx(Label, { isNumber, align, children: label.value })
+    ] }));
+  }
+);
+Progress.propTypes = {
+  /** Use labels to increase users understanding. If the value is numeric, make
+   * sure it has a maximum of 3 characters */
+  label: shape({
+    value: charLength(3, oneOfType([number, string])),
+    placement: oneOf(["left", "right"])
+  }),
+  /** This attribute describes how much work the task indicated by the progress
+   * element requires. The max attribute, if present, must have a value greater
+   * than zero and be a valid floating point number. The default value is 1. */
+  max: number,
+  /** This attribute specifies how much of the task that has been completed. It
+   * must be a valid floating point number between 0 and max, or between 0 and 1
+   * if max is omitted. If there is no value attribute, the progress bar is
+   * indeterminate; this indicates that an activity is ongoing with no
+   * indication of how long it is expected to take. */
+  value: number,
+  /** style the card following the theme (primary, secondary, vibin, hope,
+   * energy, relax, peace, verve, uplift, deepPurple, deep, stamina, dark,
+   * medium, light, clear, white) */
+  variant: oneOf([
+    "primary",
+    "secondary",
+    "vibin",
+    "hope",
+    "energy",
+    "relax",
+    "peace",
+    "verve",
+    "uplift",
+    "deepPurple",
+    "stamina",
+    "dark",
+    "medium",
+    "deep",
+    "light",
+    "clear",
+    "white"
+  ])
+};
+Progress.defaultProps = {
+  label: {
+    value: void 0,
+    placement: "left"
+  },
+  max: 1,
+  value: void 0,
+  variant: "verve"
+};
+var Progress_default = Progress;
+export {
+  Progress_default as default
+};

package/esm/Progress/native/Progress.test.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Progress } from "../..";
+describe("<Progress />", () => {
+  it("should match snapshot", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Progress, {}),
+        /* @__PURE__ */ jsx(Progress, { max: 100 }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 60 })
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with label string", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Progress, { max: 100, label: { value: "Some decription here" } }),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 65,
+            label: { value: "Some decription here", placement: "right" }
+          }
+        )
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with label number", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 } }),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 65,
+            label: { value: 65, placement: "right" }
+          }
+        )
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with all variants", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "primary"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "secondary"
+          }
+        ),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "vibin" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "hope" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "energy" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "relax" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "peace" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "verve" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "uplift" }),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "deepPurple"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "stamina"
+          }
+        ),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "dark" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "medium" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "deep" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "light" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "clear" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "white" })
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with positions prop system", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { position: "absolute", top: "small", left: "small" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with spacing prop system", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { m: "small", padding: "medium" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with background color prop system", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { backgroundColor: "primary" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with border prop system", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { b: "small", bRadius: "small" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with elevation prop system", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { elevation: "small" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Progress/native/index.js

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