@pedidopago/ui 1.5.21 → 1.5.23

package/dist/shared/theme/theme.test.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  var utils = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PPUIThemeProvider, _objectSpread(_objectSpread({}, props), {}, {
+    children: props.children
+  })));
+  return utils;
+};
+
+describe('Theme', function () {
+  it('should extend the default theme and pass it to pp provider', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var newTheme, TestComponent, utils;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            newTheme = (0, _.extendTheme)({
+              colors: {
+                primary: '#ff0000'
+              }
+            });
+
+            TestComponent = function TestComponent() {
+              var _useTheme = (0, _.useTheme)(),
+                  theme = _useTheme.theme;
+
+              var color = theme.colors.primary;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: color
+              });
+            };
+
+            utils = setup({
+              theme: newTheme,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {})
+            });
+            _context.t0 = expect;
+            _context.next = 6;
+            return utils.findByText('#ff0000');
+
+          case 6:
+            _context.t1 = _context.sent;
+            (0, _context.t0)(_context.t1).toBeInTheDocument();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should to apply the dark mode for child components and switch that to light mode', function () {
+    var ChildComponent = function ChildComponent() {
+      var _useColorMode = (0, _.useColorMode)(),
+          colorMode = _useColorMode.colorMode,
+          switchColorMode = _useColorMode.switchColorMode;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "data-testid": "button-child",
+        onClick: switchColorMode,
+        children: colorMode === 'light' ? 'Light mode' : 'Dark mode'
+      });
+    };
+
+    var utils = setup({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChildComponent, {})
+    });
+    expect(utils.getByTestId('button-child')).toHaveTextContent('Light mode');
+
+    _react.fireEvent.click(utils.getByTestId('button-child'));
+
+    expect(utils.getByTestId('button-child')).toHaveTextContent('Dark mode');
+
+    _react.fireEvent.click(utils.getByTestId('button-child'));
+  });
+  it('should to switch between two colors according to color mode', function () {
+    var ChildComponent = function ChildComponent() {
+      var _useColorMode2 = (0, _.useColorMode)(),
+          switchColorMode = _useColorMode2.switchColorMode;
+
+      var color = (0, _.useColorModeValue)('#ff0000', '#0000ff');
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "data-testid": "button-child",
+        onClick: switchColorMode,
+        children: color
+      });
+    };
+
+    var utils = setup({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChildComponent, {})
+    });
+    expect(utils.getByTestId('button-child')).toHaveTextContent('#ff0000');
+
+    _react.fireEvent.click(utils.getByTestId('button-child'));
+
+    expect(utils.getByTestId('button-child')).toHaveTextContent('#0000ff');
+  });
+});

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.5.21",
+  "version": "1.5.23",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "repository": {
     "type": "git",
@@ -24,12 +25,12 @@
     "@emotion/styled": "^11.3.0",
     "framer-motion": "^4.1.17",
     "phone": "^3.1.33",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\" --ignore \"**/*.test.tsx\" --ignore \"**/*.stories.js\" && npm run build:declarations",
+    "build": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\" --ignore \"**/*.test.js\" --ignore \"**/*.stories.js\" && npm run build:declarations",
     "build:declarations": "tsc --declaration --emitDeclarationOnly --outDir dist",
     "build:publish": "npm run build && npm publish --access public",
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
@@ -112,9 +113,5 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.3.5",
     "webpack": "^5"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
   }
 }