@gympass/yoga 7.88.0 → 7.88.1

package/esm/Theme/Provider/web/FontLoader.js

@@ -0,0 +1,21 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import React from "react";
+import GoogleFontLoader from "react-google-font-loader";
+import { withTheme } from "styled-components";
+const FontLoader = ({
+  theme: {
+    yoga: {
+      baseFont: { family, weight }
+    }
+  }
+}) => /* @__PURE__ */ jsx(Fragment, { children: typeof window !== "undefined" ? /* @__PURE__ */ jsx(GoogleFontLoader, { fonts: [{ font: family, weights: weight }] }) : /* @__PURE__ */ jsx(
+  "link",
+  {
+    rel: "stylesheet",
+    href: `https://fonts.googleapis.com/css?family=${family}:${weight.join()}`
+  }
+) });
+var FontLoader_default = withTheme(FontLoader);
+export {
+  FontLoader_default as default
+};

package/esm/Theme/Provider/web/FontLoader.test.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import FontLoader from "./FontLoader";
+import ThemeProvider from "./ThemeProvider";
+describe("FontLoader component", () => {
+  it("Should create standard font link", () => {
+    render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(FontLoader, {}) })
+    );
+    const link = document.getElementsByTagName("link").item(0).outerHTML;
+    expect(link).toContain(
+      `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900,300i,400i,500i,700i,900i">`
+    );
+  });
+});

package/esm/Theme/Provider/web/GlobalStyle.js

@@ -0,0 +1,18 @@
+import { createGlobalStyle } from "styled-components";
+const GlobalStyle = createGlobalStyle`
+  ${({
+  theme: {
+    yoga: {
+      baseFont: { family }
+    }
+  }
+}) => `
+    body {
+      font-family: "${family}";
+    }
+  `}
+`;
+var GlobalStyle_default = GlobalStyle;
+export {
+  GlobalStyle_default as default
+};

package/esm/Theme/Provider/web/GlobalStyle.test.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import tokens from "@gympass/yoga-tokens";
+import theme from "../../theme";
+import GlobalStyle from "./GlobalStyle";
+import ThemeProvider from "./ThemeProvider";
+import expectCSSMatches from "./expectCssMatches";
+const { baseFont } = theme(tokens);
+describe("GlobalStyle component", () => {
+  it("Should use standard font in the body", () => {
+    render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(GlobalStyle, {}) })
+    );
+    expectCSSMatches(
+      `body {
+        font-family: "${baseFont.family}";
+      }`
+    );
+  });
+});

package/esm/Theme/Provider/web/ThemeProvider.js

@@ -0,0 +1,50 @@
+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 { node } from "prop-types";
+import Provider from "../Provider";
+import GlobalStyle from "./GlobalStyle";
+const ThemeProvider = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsxs(Provider, __spreadProps(__spreadValues({}, rest), { children: [
+    /* @__PURE__ */ jsx(GlobalStyle, {}),
+    children
+  ] }));
+};
+ThemeProvider.propTypes = {
+  children: node.isRequired
+};
+var ThemeProvider_default = ThemeProvider;
+export {
+  ThemeProvider_default as default
+};

package/esm/Theme/Provider/web/expectCssMatches.js

@@ -0,0 +1,14 @@
+const normalizeCSS = (rule) => rule.join("\n").replace(/(?:\r\n|\r|\n)/g, "").replace(/ {\s+/g, "{").replace(/\s+ }/g, "}").replace(/,\s+/g, ",").replace(/;\s+/g, ";").replace(/:\s+/g, ":").replace(/:\s+;/g, ":;");
+const getCSS = (scope) => normalizeCSS(
+  Array.from(scope.querySelectorAll("style")).map((tag) => tag.innerHTML)
+);
+const expectCSSMatches = (expectation) => {
+  const _expectation = normalizeCSS(expectation.split("\n"));
+  const css = getCSS(document);
+  expect(css).toContain(_expectation);
+  return css;
+};
+var expectCssMatches_default = expectCSSMatches;
+export {
+  expectCssMatches_default as default
+};

package/esm/Theme/Provider/web/index.js

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

package/esm/Theme/helpers/themeGenerator/index.js

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

package/esm/Theme/helpers/themeGenerator/themeGenerator.js

@@ -0,0 +1,13 @@
+function createTheme(themeVars) {
+  if (typeof themeVars !== "function")
+    throw new TypeError(
+      `Invalid param 'themeVars', expected 'function', received '${typeof themeVars}'.`
+    );
+  const themeBuilder = themeVars.bind({});
+  themeBuilder.isFromThemeBuilder = true;
+  return themeBuilder;
+}
+var themeGenerator_default = createTheme;
+export {
+  themeGenerator_default as default
+};

package/esm/Theme/helpers/themeGenerator/themeGenerator.test.js

@@ -0,0 +1,20 @@
+import * as tokens from "@gympass/yoga-tokens";
+import createTheme from "./index";
+describe("given theme generator:createTheme()", () => {
+  it("should generate a callable theme which overrides only received tokens", () => {
+    const generatedTheme = createTheme((yogaTokens) => ({
+      colors: {
+        primary: yogaTokens.colors.stamina
+      }
+    }));
+    expect(typeof generatedTheme === "function");
+    expect(generatedTheme(tokens.default)).toEqual({
+      colors: {
+        primary: "#231B22"
+      }
+    });
+  });
+  it("should not accept invalid parameters", () => {
+    expect(() => createTheme(true)).toThrow(TypeError);
+  });
+});

package/esm/Theme/helpers/themeReader/base.test.js

@@ -0,0 +1,73 @@
+import ProxyPolyfillBuilder from "proxy-polyfill/src/proxy";
+import theme from "./index";
+describe("themeReader - base specs", () => {
+  beforeAll(() => {
+    global.Proxy = ProxyPolyfillBuilder();
+  });
+  it("should return a function", () => {
+    expect(theme).toBeInstanceOf(Function);
+  });
+  it("should return undefined if key does not exist on the theme", () => {
+    expect(typeof theme.colors.randomValue).toBe("undefined");
+    expect(typeof theme.randomValue).toBe("undefined");
+  });
+  it("should have theme.yoga as the base path", () => {
+    const yoga = "wow cool theme, such tokens";
+    const obj = { theme: { yoga } };
+    expect(theme(obj)).toBe(yoga);
+  });
+  it("should be able to get fields with keys", () => {
+    const value = "deep!";
+    const obj = {
+      theme: {
+        yoga: {
+          breakpoints: {
+            xs: {
+              margin: value
+            }
+          }
+        }
+      }
+    };
+    expect(theme.breakpoints.xs.margin(obj)).toBe(value);
+  });
+  it("should be able to get fields with array position", () => {
+    const array = ["nice", "array", "bro"];
+    const obj = {
+      theme: {
+        yoga: {
+          borders: array
+        }
+      }
+    };
+    array.forEach((val, i) => {
+      expect(theme.borders[i](obj)).toBe(val);
+    });
+  });
+  it("should be destructible", () => {
+    const baseFontSizeValue = "nice size";
+    const primaryValue = "very primary";
+    const lgValue = "much large";
+    const obj = {
+      theme: {
+        yoga: {
+          baseFontSize: baseFontSizeValue,
+          colors: {
+            primary: primaryValue
+          },
+          breakpoints: {
+            lg: lgValue
+          }
+        }
+      }
+    };
+    const {
+      baseFontSize,
+      colors: { primary },
+      breakpoints
+    } = theme;
+    expect(primary(obj)).toBe(primaryValue);
+    expect(breakpoints.lg(obj)).toBe(lgValue);
+    expect(baseFontSize(obj)).toBe(baseFontSizeValue);
+  });
+});

package/esm/Theme/helpers/themeReader/index.js

@@ -0,0 +1,26 @@
+import "proxy-polyfill";
+import tokens from "@gympass/yoga-tokens";
+import theme from "../../theme";
+const skeleton = theme(tokens);
+const CACHE_PLACEHOLDER = null;
+const withoutKey = (fn, key) => !{}.hasOwnProperty.call(fn, key) || key === "prototype";
+const createFakeObj = (paths, object) => {
+  const fn = (props) => paths.reduce((acc, path) => acc[path], props);
+  Object.keys(object).forEach((key) => {
+    fn[key] = CACHE_PLACEHOLDER;
+  });
+  return new Proxy(fn, {
+    get(target, key) {
+      if (withoutKey(fn, key))
+        return target[key];
+      if (fn[key])
+        return fn[key];
+      fn[key] = createFakeObj([...paths, key], object[key]);
+      return fn[key];
+    }
+  });
+};
+var themeReader_default = createFakeObj(["theme", "yoga"], skeleton);
+export {
+  themeReader_default as default
+};

package/esm/Theme/helpers/themeReader/native/native.test.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled, { css } from "styled-components";
+import { render } from "@testing-library/react-native";
+import ThemeProvider, { theme } from "../../../index.native";
+import "../base.test";
+describe("themeReader - web specs", () => {
+  it("should render", () => {
+    const Component = styled.View`
+      border: ${theme.borders.small}px solid;
+    `;
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Component, { testID: "component", children: "Teste" }) })
+    );
+    expect(toJSON().props.style).toEqual([
+      { borderWidth: 1, borderColor: "black", borderStyle: "solid" }
+    ]);
+  });
+  it("should render with conditional", () => {
+    const Component = styled.View`
+      border: ${({ borders }) => borders ? css`
+              ${theme.borders.small}px solid
+            ` : "none"};
+    `;
+    const { toJSON, rerender } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Component, { borders: false, testID: "component", children: "Teste" }) })
+    );
+    expect(toJSON().props.style).toEqual([
+      { borderWidth: 0, borderColor: "black", borderStyle: "solid" }
+    ]);
+    rerender(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Component, { borders: true, "data-testid": "component" }) })
+    );
+    expect(toJSON().props.style).toEqual([
+      { borderWidth: 1, borderColor: "black", borderStyle: "solid" }
+    ]);
+  });
+});

package/esm/Theme/helpers/themeReader/web/web.test.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled, { css } from "styled-components";
+import { render } from "@testing-library/react";
+import ThemeProvider, { theme } from "../../../index";
+import "../base.test";
+describe("themeReader - web specs", () => {
+  it("should render", () => {
+    const Component = styled.div`
+      border: ${theme.borders.small}px solid;
+    `;
+    const { getByTestId } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Component, { "data-testid": "component" }) })
+    );
+    expect(getByTestId("component")).toHaveStyleRule("border", "1px solid");
+  });
+  it("should render with conditional", () => {
+    const Component = styled.div`
+      border: ${({ borders }) => borders ? css`
+              ${theme.borders.small}px solid
+            ` : "none"};
+    `;
+    const { getByTestId, rerender } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Component, { borders: false, "data-testid": "component" }) })
+    );
+    expect(getByTestId("component")).toHaveStyleRule("border", "none");
+    rerender(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Component, { borders: true, "data-testid": "component" }) })
+    );
+    expect(getByTestId("component")).toHaveStyleRule("border", "1px solid");
+  });
+});

package/esm/Theme/index.js

@@ -0,0 +1,11 @@
+import { ThemeProvider, FontLoader } from "./Provider";
+import yogaTheme from "./theme";
+import theme from "./helpers/themeReader";
+import createTheme from "./helpers/themeGenerator";
+export {
+  FontLoader,
+  createTheme,
+  ThemeProvider as default,
+  theme,
+  yogaTheme
+};

package/esm/Theme/index.native.js

@@ -0,0 +1,10 @@
+import ThemeProvider from "./Provider";
+import yogaTheme from "./theme";
+import theme from "./helpers/themeReader";
+import createTheme from "./helpers/themeGenerator";
+export {
+  createTheme,
+  ThemeProvider as default,
+  theme,
+  yogaTheme
+};

package/esm/Theme/theme/index.js

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

package/esm/Theme/theme/theme.js

@@ -0,0 +1,81 @@
+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 { merge } from "@gympass/yoga-common";
+import * as componentThemes from "../../**/*.theme.js";
+const getComponentThemes = (tokens) => {
+  const { colors, baseFont, baseFontSize } = tokens;
+  const components = Object.entries(componentThemes).reduce(
+    (componentsStyles, [names, themed]) => {
+      const [, name] = names.toLowerCase().split("$");
+      return __spreadProps(__spreadValues({}, componentsStyles), {
+        [name]: themed(__spreadProps(__spreadValues({}, tokens), {
+          colors,
+          baseFont,
+          baseFontSize
+        }))
+      });
+    },
+    {}
+  );
+  return { components };
+};
+const theme = (tokens) => {
+  const baseFont = tokens.fonts.rubik;
+  const baseFontSize = tokens.fontSizes.medium;
+  const colors = __spreadProps(__spreadValues({}, tokens.colors), {
+    primary: tokens.colors.vibin,
+    secondary: tokens.colors.stamina,
+    feedback: {
+      success: [tokens.colors.success, tokens.colors.hope],
+      informative: [tokens.colors.neutral, tokens.colors.relax],
+      attention: [tokens.colors.attention, tokens.colors.verve],
+      neutral: [tokens.colors.light, tokens.colors.medium]
+    },
+    text: {
+      primary: tokens.colors.stamina,
+      secondary: tokens.colors.deep,
+      disabled: tokens.colors.light
+    },
+    elements: {
+      selectionAndIcons: tokens.colors.medium,
+      lineAndBorders: tokens.colors.light,
+      backgroundAndDisabled: tokens.colors.clear
+    }
+  });
+  [colors.feedback.success.light, colors.feedback.success.dark] = colors.feedback.success;
+  [colors.feedback.informative.light, colors.feedback.informative.dark] = colors.feedback.informative;
+  [colors.feedback.attention.light, colors.feedback.attention.dark] = colors.feedback.attention;
+  [colors.feedback.neutral.light, colors.feedback.neutral.dark] = colors.feedback.neutral;
+  return __spreadProps(__spreadValues({}, tokens), {
+    colors,
+    baseFont,
+    baseFontSize
+  });
+};
+const composeTheme = (tokens, customTheming = {}) => {
+  const baseTheme = theme(tokens);
+  const customTheme = merge(baseTheme, customTheming);
+  const componentTheming = getComponentThemes(customTheme);
+  return merge(customTheme, componentTheming);
+};
+var theme_default = composeTheme;
+export {
+  theme_default as default
+};

package/esm/hooks/index.js

@@ -0,0 +1,3 @@
+export * from "./usePortal";
+export * from "./useKeyPress";
+export * from "./useCombinedRefs";

package/esm/hooks/useCombinedRefs.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+const useCombinedRefs = (...refs) => {
+  const targetRef = useRef(null);
+  useEffect(() => {
+    for (let i = 0; i < refs.length; i++) {
+      const ref = refs[i];
+      if (!ref)
+        return;
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    }
+  }, [refs]);
+  return targetRef;
+};
+export {
+  useCombinedRefs
+};

package/esm/hooks/useKeyPress.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+const useKeyPress = (targetKey) => {
+  const [keyPressed, setKeyPressed] = useState(false);
+  useEffect(() => {
+    function downHandler({ key }) {
+      if (key === targetKey) {
+        setKeyPressed(true);
+      }
+    }
+    function upHandler({ key }) {
+      if (key === targetKey) {
+        setKeyPressed(false);
+      }
+    }
+    window.addEventListener("keydown", downHandler);
+    window.addEventListener("keyup", upHandler);
+    return () => {
+      window.removeEventListener("keydown", downHandler);
+      window.removeEventListener("keyup", upHandler);
+    };
+  }, [targetKey]);
+  return keyPressed;
+};
+export {
+  useKeyPress
+};

package/esm/hooks/usePortal.js

@@ -0,0 +1,39 @@
+import { useRef, useEffect } from "react";
+const createRootElement = (id) => {
+  const rootContainer = document.createElement("div");
+  rootContainer.setAttribute("id", id);
+  return rootContainer;
+};
+const addRootElement = (rootElement) => {
+  document.body.insertBefore(
+    rootElement,
+    document.body.lastElementChild.nextElementSibling
+  );
+};
+const usePortal = (id) => {
+  const rootElementRef = useRef(null);
+  useEffect(() => {
+    const existingParent = document.getElementById(id);
+    const parentElem = existingParent || createRootElement(id);
+    if (!existingParent) {
+      addRootElement(parentElem);
+    }
+    parentElem.appendChild(rootElementRef.current);
+    return function removeElement() {
+      rootElementRef.current.remove();
+      if (!parentElem.childElementCount) {
+        parentElem.remove();
+      }
+    };
+  }, [id]);
+  const getRootElemement = () => {
+    if (!rootElementRef.current) {
+      rootElementRef.current = document.createElement("div");
+    }
+    return rootElementRef.current;
+  };
+  return getRootElemement();
+};
+export {
+  usePortal
+};

package/esm/index.js

@@ -0,0 +1,90 @@
+import ThemeProvider, {
+  FontLoader,
+  yogaTheme,
+  theme,
+  createTheme
+} from "./Theme";
+import Accordion from "./Accordion";
+import Button from "./Button";
+import List from "./List";
+import Checkbox from "./Checkbox";
+import Slider from "./Slider";
+import RadioGroup from "./RadioGroup";
+import { Card, PlanCard, EventCard } from "./Card";
+import Stepper from "./Stepper";
+import { Container, Row, Col, Hide } from "./Grid";
+import Text from "./Text";
+import Rating from "./Rating";
+import Tag from "./Tag";
+import Input from "./Input";
+import Progress from "./Progress";
+import Dropdown from "./Dropdown";
+import TextArea from "./TextArea";
+import AutoComplete from "./AutoComplete";
+import Icon from "./Icon";
+import Chips from "./Chips";
+import Box from "./Box";
+import Snackbar from "./Snackbar";
+import Avatar from "./Avatar";
+import BottomSheet from "./BottomSheet";
+import Dialog from "./Dialog";
+import Divider from "./Divider";
+import Header from "./Header";
+import Menu from "./Menu";
+import Banner from "./Banner";
+import Heading from "./Heading";
+import Feedback from "./Feedback";
+import Datepicker from "./Datepicker";
+import Drawer from "./Drawer";
+import Skeleton from "./Skeleton";
+import ActionRequirement from "./ActionRequirement";
+import Popover from "./Popover";
+import Spinner from "./Spinner";
+export {
+  Accordion,
+  ActionRequirement,
+  AutoComplete,
+  Avatar,
+  Banner,
+  BottomSheet,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Chips,
+  Col,
+  Container,
+  Datepicker,
+  Dialog,
+  Divider,
+  Drawer,
+  Dropdown,
+  EventCard,
+  Feedback,
+  FontLoader,
+  Header,
+  Heading,
+  Hide,
+  Icon,
+  Input,
+  List,
+  Menu,
+  PlanCard,
+  Popover,
+  Progress,
+  RadioGroup,
+  Rating,
+  Row,
+  Skeleton,
+  Slider,
+  Snackbar,
+  Spinner,
+  Stepper,
+  Tag,
+  Text,
+  TextArea,
+  ThemeProvider,
+  createTheme,
+  theme,
+  yogaTheme
+};