react-restyle-components 0.1.29 → 0.1.30

package/lib/cjs/core-components/atoms/loader/loader.stories.js

@@ -1,18 +1,24 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Primary = void 0;
 const react_1 = __importDefault(require("react"));
 const loader_component_1 = require("./loader.component");
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 exports.default = {
-    title: 'Atoms/Loader',
-    component: loader_component_1.Loader,
+  title: "Atoms/Loader",
+  component: loader_component_1.Loader,
 };
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Primary = () => (react_1.default.createElement("div", { className: "flex flex-row" },
-    react_1.default.createElement(loader_component_1.Loader, null)));
+const Primary = () =>
+  react_1.default.createElement(
+    "div",
+    { className: "flex flex-row" },
+    react_1.default.createElement(loader_component_1.Loader, null)
+  );
 exports.Primary = Primary;
-//# sourceMappingURL=loader.stories.js.map
+//# sourceMappingURL=loader.stories.js.map

package/lib/cjs/core-components/atoms/radio/radio.component.js

@@ -1,15 +1,29 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 const react_1 = __importDefault(require("react"));
 const checkedRadio_svg_1 = require("@assets/svg/checkedRadio.svg");
 const uncheckRadio_svg_1 = require("@assets/svg/uncheckRadio.svg");
 const Radio = ({ className, checked, onChange }) => {
-    const width = 20;
-    return (react_1.default.createElement("div", { className: `${className} flex flex-row mr-2`, onClick: onChange }, checked ? (react_1.default.createElement(checkedRadio_svg_1.ReactComponent, { width: width, height: width })) : (react_1.default.createElement(uncheckRadio_svg_1.ReactComponent, { width: width, height: width }))));
+  const width = 20;
+  return react_1.default.createElement(
+    "div",
+    { className: `${className} flex flex-row mr-2`, onClick: onChange },
+    checked
+      ? react_1.default.createElement(checkedRadio_svg_1.ReactComponent, {
+          width: width,
+          height: width,
+        })
+      : react_1.default.createElement(uncheckRadio_svg_1.ReactComponent, {
+          width: width,
+          height: width,
+        })
+  );
 };
 exports.Radio = Radio;
-//# sourceMappingURL=radio.component.js.map
+//# sourceMappingURL=radio.component.js.map

package/lib/cjs/core-components/atoms/radio/radio.component.test.js

@@ -1,14 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable testing-library/render-result-naming-convention */
 const react_1 = __importDefault(require("react"));
 const _core_utils_1 = require("@core-utils");
 const radio_component_1 = require("./radio.component");
-it('render XB_Radio correctly', () => {
-    const radio = (0, _core_utils_1.render)(react_1.default.createElement(radio_component_1.Radio, { checked: true, onChange: () => jest.fn() }));
-    expect(radio).toMatchSnapshot();
+it("render XB_Radio correctly", () => {
+  const radio = (0, _core_utils_1.render)(
+    react_1.default.createElement(radio_component_1.Radio, {
+      checked: true,
+      onChange: () => jest.fn(),
+    })
+  );
+  expect(radio).toMatchSnapshot();
 });
-//# sourceMappingURL=radio.component.test.js.map
+//# sourceMappingURL=radio.component.test.js.map

package/lib/cjs/core-components/atoms/radio/radio.stories.js

@@ -1,20 +1,32 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Primary = void 0;
 const react_1 = __importDefault(require("react"));
 const radio_component_1 = require("./radio.component");
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 exports.default = {
-    title: 'Atoms/Radio',
-    component: radio_component_1.Radio,
+  title: "Atoms/Radio",
+  component: radio_component_1.Radio,
 };
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Primary = () => (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement("div", { className: "flex flex-row" },
-        react_1.default.createElement(radio_component_1.Radio, { checked: true, onChange: () => { } }),
-        react_1.default.createElement("span", null, "Married"))));
+const Primary = () =>
+  react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    react_1.default.createElement(
+      "div",
+      { className: "flex flex-row" },
+      react_1.default.createElement(radio_component_1.Radio, {
+        checked: true,
+        onChange: () => {},
+      }),
+      react_1.default.createElement("span", null, "Married")
+    )
+  );
 exports.Primary = Primary;
-//# sourceMappingURL=radio.stories.js.map
+//# sourceMappingURL=radio.stories.js.map

package/lib/cjs/core-components/atoms/stepper/stepper.component.js

@@ -1,42 +1,85 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stepper = void 0;
 const react_1 = __importDefault(require("react"));
-const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }) => {
-    const finalClass = `${className} w-full px-4 sm:px-8`;
-    const progressClass = 'absolute my-4 top-1/2 left-0 h-0.5  transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500';
-    const Steps = steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
-        let stepClass = 'inline-block transform -translate-x-1/2 pt-1 w-8 h-8 rounded-full text-center';
-        if (index < currentStep)
+const Stepper = ({ className = "", steps, currentStep = 1, onStepClick }) => {
+  const finalClass = `${className} w-full px-4 sm:px-8`;
+  const progressClass =
+    "absolute my-4 top-1/2 left-0 h-0.5  transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500";
+  const Steps =
+    steps === null || steps === void 0
+      ? void 0
+      : steps.map((step, index) => {
+          let stepClass =
+            "inline-block transform -translate-x-1/2 pt-1 w-8 h-8 rounded-full text-center";
+          if (index < currentStep)
             stepClass +=
-                ' font-medium border border-orange  bg-background-secondary text-gray';
-        else if (index > currentStep)
+              " font-medium border border-orange  bg-background-secondary text-gray";
+          else if (index > currentStep)
             stepClass +=
-                ' font-medium border border-gray-dark-secondary text-gray bg-background-secondary';
-        else if (currentStep === index)
-            stepClass += ' font-medium bg-orange text-white';
-        if (typeof onStepClick === 'function')
-            stepClass += ' cursor-pointer';
-        return (react_1.default.createElement("div", { key: step, style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: "absolute" },
-            react_1.default.createElement("span", { className: `${stepClass} font-nunitoSansRegular  text-4xs text-center`, onClick: () => {
-                    if (typeof onStepClick === 'function')
-                        onStepClick(index + 1, step);
-                } }, step)));
-    });
-    return (react_1.default.createElement("div", { className: finalClass },
-        react_1.default.createElement("div", { className: "w-full relative" },
-            react_1.default.createElement("div", { className: progressClass, style: {
-                    width: `${(currentStep / (steps.length - 1)) * 100}%`,
-                } },
-                react_1.default.createElement("div", { className: "w-3 h-3 bg-orange rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2" })),
-            react_1.default.createElement("div", { className: 'absolute h-0.5 my-4 top-1/2 left-0 transform -translate-y-1/2 bg-gray-dark-secondary transition-width ease-in-out duration-500', style: {
-                    marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
-                    width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
-                } })),
-        react_1.default.createElement("div", { className: "relative sm:block" }, Steps)));
+              " font-medium border border-gray-dark-secondary text-gray bg-background-secondary";
+          else if (currentStep === index)
+            stepClass += " font-medium bg-orange text-white";
+          if (typeof onStepClick === "function") stepClass += " cursor-pointer";
+          return react_1.default.createElement(
+            "div",
+            {
+              key: step,
+              style: { left: `${(index / (steps.length - 1)) * 100}%` },
+              className: "absolute",
+            },
+            react_1.default.createElement(
+              "span",
+              {
+                className: `${stepClass} font-nunitoSansRegular  text-4xs text-center`,
+                onClick: () => {
+                  if (typeof onStepClick === "function")
+                    onStepClick(index + 1, step);
+                },
+              },
+              step
+            )
+          );
+        });
+  return react_1.default.createElement(
+    "div",
+    { className: finalClass },
+    react_1.default.createElement(
+      "div",
+      { className: "w-full relative" },
+      react_1.default.createElement(
+        "div",
+        {
+          className: progressClass,
+          style: {
+            width: `${(currentStep / (steps.length - 1)) * 100}%`,
+          },
+        },
+        react_1.default.createElement("div", {
+          className:
+            "w-3 h-3 bg-orange rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2",
+        })
+      ),
+      react_1.default.createElement("div", {
+        className:
+          "absolute h-0.5 my-4 top-1/2 left-0 transform -translate-y-1/2 bg-gray-dark-secondary transition-width ease-in-out duration-500",
+        style: {
+          marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
+          width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
+        },
+      })
+    ),
+    react_1.default.createElement(
+      "div",
+      { className: "relative sm:block" },
+      Steps
+    )
+  );
 };
 exports.Stepper = Stepper;
-//# sourceMappingURL=stepper.component.js.map
+//# sourceMappingURL=stepper.component.js.map

package/lib/cjs/core-components/atoms/stepper/stepper.component.test.js

@@ -1,13 +1,22 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const _core_utils_1 = require("@core-utils");
 const stepper_component_1 = require("./stepper.component");
-it('render XB_Stepper correctly', () => {
-    const stepper = (0, _core_utils_1.render)(react_1.default.createElement(stepper_component_1.Stepper, { steps: ['1', '2', '3', '4'], currentStep: 3, onStepClick: () => jest.fn(), className: "mt-4" }));
-    expect(stepper).toMatchSnapshot();
+it("render XB_Stepper correctly", () => {
+  const stepper = (0, _core_utils_1.render)(
+    react_1.default.createElement(stepper_component_1.Stepper, {
+      steps: ["1", "2", "3", "4"],
+      currentStep: 3,
+      onStepClick: () => jest.fn(),
+      className: "mt-4",
+    })
+  );
+  expect(stepper).toMatchSnapshot();
 });
-//# sourceMappingURL=stepper.component.test.js.map
+//# sourceMappingURL=stepper.component.test.js.map

package/lib/cjs/core-components/atoms/stepper/stepper.stories.js

@@ -1,7 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Primary = void 0;
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -10,10 +12,16 @@ const react_1 = __importDefault(require("react"));
 const stepper_component_1 = require("./stepper.component");
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 exports.default = {
-    title: 'Atoms/Stepper',
-    component: stepper_component_1.Stepper,
+  title: "Atoms/Stepper",
+  component: stepper_component_1.Stepper,
 };
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Primary = () => (react_1.default.createElement(stepper_component_1.Stepper, { steps: ['1', '2', '3', '4'], currentStep: 2, onStepClick: (currentStep, step) => { }, className: "mt-4" }));
+const Primary = () =>
+  react_1.default.createElement(stepper_component_1.Stepper, {
+    steps: ["1", "2", "3", "4"],
+    currentStep: 2,
+    onStepClick: (currentStep, step) => {},
+    className: "mt-4",
+  });
 exports.Primary = Primary;
-//# sourceMappingURL=stepper.stories.js.map
+//# sourceMappingURL=stepper.stories.js.map

package/lib/cjs/core-components/atoms/timer/timer.component.js

@@ -1,27 +1,48 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null)
+      for (var k in mod)
+        if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+          __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
-};
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Timer = void 0;
 /* eslint-disable react/prop-types */
@@ -30,77 +51,83 @@ const react_1 = __importStar(require("react"));
 const timer_svg_1 = require("@assets/svg/timer.svg");
 // eslint-disable-next-line react/display-name
 exports.Timer = react_1.default.forwardRef(({ onClear }, ref) => {
-    const width = 15;
-    const [minute, setMinute] = (0, react_1.useState)('00');
-    const [second, setSecond] = (0, react_1.useState)('10');
-    (0, react_1.useEffect)(() => {
-        const sec = parseInt(second);
-        const min = parseInt(minute);
-        const countDown = setInterval(() => {
-            if (min === 0 && sec === 0) {
-                setMinute('00');
-                setSecond('00');
-                clearInterval(countDown);
-                onClear && onClear();
-            }
-            else {
-                let secondstTmp = (sec - 1).toString();
-                if (secondstTmp.length === 1) {
-                    secondstTmp = '0'.concat(secondstTmp);
-                }
-                setSecond(secondstTmp);
-                if (sec === 0) {
-                    setSecond('59');
-                    const m = (min - 1).toString();
-                    setMinute('0' + m);
-                }
-            }
-        }, 1000);
-        return () => {
-            clearInterval(countDown);
-        };
-    });
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        updateState() {
-            setMinute('02');
-            setSecond('00');
-        },
-        resetTimer() {
-            // eslint-disable-next-line no-console
-            const sec = parseInt(second);
-            const min = parseInt(minute === '00' ? '02' : minute);
-            const countDown = setInterval(() => {
-                // eslint-disable-next-line no-console
-                if (min === 0 && sec === 0) {
-                    setMinute('00');
-                    setSecond('00');
-                    clearInterval(countDown);
-                    onClear && onClear();
-                }
-                else {
-                    let secondstTmp = (sec - 1).toString();
-                    if (secondstTmp.length === 1) {
-                        secondstTmp = '0'.concat(secondstTmp);
-                    }
-                    setSecond(secondstTmp);
-                    if (sec === 0) {
-                        setSecond('59');
-                        const m = (min - 1).toString();
-                        setMinute('0' + m);
-                    }
-                }
-            }, 1000);
-            return () => {
-                clearInterval(countDown);
-            };
-        },
-    }));
-    return (react_1.default.createElement("div", { className: "flex flex-row items-center" },
-        react_1.default.createElement(timer_svg_1.ReactComponent, { width: width, height: width, fill: "#E7503D" }),
-        react_1.default.createElement("div", { className: "ml-2 flex flex-row" },
-            react_1.default.createElement("span", null,
-                minute,
-                ":"),
-            react_1.default.createElement("span", null, second))));
+  const width = 15;
+  const [minute, setMinute] = (0, react_1.useState)("00");
+  const [second, setSecond] = (0, react_1.useState)("10");
+  (0, react_1.useEffect)(() => {
+    const sec = parseInt(second);
+    const min = parseInt(minute);
+    const countDown = setInterval(() => {
+      if (min === 0 && sec === 0) {
+        setMinute("00");
+        setSecond("00");
+        clearInterval(countDown);
+        onClear && onClear();
+      } else {
+        let secondstTmp = (sec - 1).toString();
+        if (secondstTmp.length === 1) {
+          secondstTmp = "0".concat(secondstTmp);
+        }
+        setSecond(secondstTmp);
+        if (sec === 0) {
+          setSecond("59");
+          const m = (min - 1).toString();
+          setMinute("0" + m);
+        }
+      }
+    }, 1000);
+    return () => {
+      clearInterval(countDown);
+    };
+  });
+  (0, react_1.useImperativeHandle)(ref, () => ({
+    updateState() {
+      setMinute("02");
+      setSecond("00");
+    },
+    resetTimer() {
+      // eslint-disable-next-line no-console
+      const sec = parseInt(second);
+      const min = parseInt(minute === "00" ? "02" : minute);
+      const countDown = setInterval(() => {
+        // eslint-disable-next-line no-console
+        if (min === 0 && sec === 0) {
+          setMinute("00");
+          setSecond("00");
+          clearInterval(countDown);
+          onClear && onClear();
+        } else {
+          let secondstTmp = (sec - 1).toString();
+          if (secondstTmp.length === 1) {
+            secondstTmp = "0".concat(secondstTmp);
+          }
+          setSecond(secondstTmp);
+          if (sec === 0) {
+            setSecond("59");
+            const m = (min - 1).toString();
+            setMinute("0" + m);
+          }
+        }
+      }, 1000);
+      return () => {
+        clearInterval(countDown);
+      };
+    },
+  }));
+  return react_1.default.createElement(
+    "div",
+    { className: "flex flex-row items-center" },
+    react_1.default.createElement(timer_svg_1.ReactComponent, {
+      width: width,
+      height: width,
+      fill: "#E7503D",
+    }),
+    react_1.default.createElement(
+      "div",
+      { className: "ml-2 flex flex-row" },
+      react_1.default.createElement("span", null, minute, ":"),
+      react_1.default.createElement("span", null, second)
+    )
+  );
 });
-//# sourceMappingURL=timer.component.js.map
+//# sourceMappingURL=timer.component.js.map

package/lib/cjs/core-components/atoms/timer/timer.component.test.js

@@ -1,7 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable testing-library/await-async-query */
 /* eslint-disable testing-library/prefer-screen-queries */
@@ -9,12 +11,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const _core_utils_1 = require("@core-utils");
 const timer_component_1 = require("./timer.component");
-it('render Timer correctly', () => {
-    const time = (0, _core_utils_1.render)(react_1.default.createElement(timer_component_1.Timer, { onClear: () => { } }));
-    expect(time).toMatchSnapshot();
+it("render Timer correctly", () => {
+  const time = (0, _core_utils_1.render)(
+    react_1.default.createElement(timer_component_1.Timer, {
+      onClear: () => {},
+    })
+  );
+  expect(time).toMatchSnapshot();
 });
-it('render Timer with minute correctly', () => {
-    const time = (0, _core_utils_1.render)(react_1.default.createElement(timer_component_1.Timer, { onClear: () => { } }));
-    expect(time.findByText('minute')).toBeTruthy();
+it("render Timer with minute correctly", () => {
+  const time = (0, _core_utils_1.render)(
+    react_1.default.createElement(timer_component_1.Timer, {
+      onClear: () => {},
+    })
+  );
+  expect(time.findByText("minute")).toBeTruthy();
 });
-//# sourceMappingURL=timer.component.test.js.map
+//# sourceMappingURL=timer.component.test.js.map