react-restyle-components 0.1.45 → 0.1.47

package/lib/esm/core-components/atoms/form/form.test.js

@@ -1,53 +1,35 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
-  CheckBox,
-  Input,
-  Toggle,
-  MultilineInput,
-  Label,
-  InputDate,
-  InputFile,
-  InputRadio,
-  InputWrapper,
-} from "./form.component";
-describe("Checkbox component", () => {
-  it("render checkbox correctly", () => {
-    const checkbox = render(React.createElement(CheckBox, null));
-    expect(checkbox).toMatchSnapshot();
-  });
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CheckBox, Input, Toggle, MultilineInput, Label, InputDate, InputFile, InputRadio, InputWrapper, } from './form.component';
+describe('Checkbox component', () => {
+    it('render checkbox correctly', () => {
+        const checkbox = render(React.createElement(CheckBox, null));
+        expect(checkbox).toMatchSnapshot();
+    });
 });
-describe("Input component", () => {
-  it("render input correctly", () => {
-    const inputComp = render(
-      React.createElement(Input, {
-        type: "text",
-        value: "test",
-        onChange: (val) => jest.fn(),
-        onBlur: (value) => jest.fn(),
-        onKeyDown: (val) => jest.fn(),
-      }),
-    );
-    const input = inputComp.getByTestId("INPT");
-    fireEvent.change(input, { target: { value: "check" } });
-    userEvent.type(input, "value");
-    fireEvent.blur(input);
-    fireEvent.keyDown(input, {
-      key: "Escape",
-      code: "Escape",
-      keyCode: 27,
-      charCode: 27,
+describe('Input component', () => {
+    it('render input correctly', () => {
+        const inputComp = render(React.createElement(Input, { type: "text", value: "test", onChange: (val) => jest.fn(), onBlur: (value) => jest.fn(), onKeyDown: (val) => jest.fn() }));
+        const input = inputComp.getByTestId('INPT');
+        fireEvent.change(input, { target: { value: 'check' } });
+        userEvent.type(input, 'value');
+        fireEvent.blur(input);
+        fireEvent.keyDown(input, {
+            key: 'Escape',
+            code: 'Escape',
+            keyCode: 27,
+            charCode: 27,
+        });
+        fireEvent.keyPress(input, { key: 'Enter', keyCode: 13 });
+        expect(input).toMatchSnapshot();
     });
-    fireEvent.keyPress(input, { key: "Enter", keyCode: 13 });
-    expect(input).toMatchSnapshot();
-  });
 });
-describe("Toggle component", () => {
-  it("render toggle correctly", () => {
-    const toggle = render(React.createElement(Toggle, null));
-    expect(toggle).toMatchSnapshot();
-  });
+describe('Toggle component', () => {
+    it('render toggle correctly', () => {
+        const toggle = render(React.createElement(Toggle, null));
+        expect(toggle).toMatchSnapshot();
+    });
 });
 // describe('SelectOption component', () => {
 //   it('render selectOption correctly', () => {
@@ -60,11 +42,11 @@ describe("Toggle component", () => {
 //     expect(select).toMatchSnapshot();
 //   });
 // });
-describe("MultilineInput component", () => {
-  it("render multilineInput correctly", () => {
-    const multi = render(React.createElement(MultilineInput, null));
-    expect(multi).toMatchSnapshot();
-  });
+describe('MultilineInput component', () => {
+    it('render multilineInput correctly', () => {
+        const multi = render(React.createElement(MultilineInput, null));
+        expect(multi).toMatchSnapshot();
+    });
 });
 // describe('Clock component', () => {
 //   it('render clock correctly', () => {
@@ -74,17 +56,17 @@ describe("MultilineInput component", () => {
 //     expect(clock).toMatchSnapshot();
 //   });
 // });
-describe("Label component", () => {
-  it("render label correctly", () => {
-    const label = render(React.createElement(Label, { htmlFor: "vsdvrf" }));
-    expect(label).toMatchSnapshot();
-  });
+describe('Label component', () => {
+    it('render label correctly', () => {
+        const label = render(React.createElement(Label, { htmlFor: "vsdvrf" }));
+        expect(label).toMatchSnapshot();
+    });
 });
-describe("InputDate component", () => {
-  it("render inputDate correctly", () => {
-    const inputDate = render(React.createElement(InputDate, null));
-    expect(inputDate).toMatchSnapshot();
-  });
+describe('InputDate component', () => {
+    it('render inputDate correctly', () => {
+        const inputDate = render(React.createElement(InputDate, null));
+        expect(inputDate).toMatchSnapshot();
+    });
 });
 // describe('InputDateTime component', () => {
 //   it('render inputDateTime correctly', () => {
@@ -92,22 +74,22 @@ describe("InputDate component", () => {
 //     expect(inputDateTime).toMatchSnapshot();
 //   });
 // });
-describe("InputFile component", () => {
-  it("render inputFile correctly", () => {
-    const inputFile = render(React.createElement(InputFile, null));
-    expect(inputFile).toMatchSnapshot();
-  });
+describe('InputFile component', () => {
+    it('render inputFile correctly', () => {
+        const inputFile = render(React.createElement(InputFile, null));
+        expect(inputFile).toMatchSnapshot();
+    });
 });
-describe("InputRadio component", () => {
-  it("render inputRadio correctly", () => {
-    const inputRadio = render(React.createElement(InputRadio, null));
-    expect(inputRadio).toMatchSnapshot();
-  });
+describe('InputRadio component', () => {
+    it('render inputRadio correctly', () => {
+        const inputRadio = render(React.createElement(InputRadio, null));
+        expect(inputRadio).toMatchSnapshot();
+    });
 });
-describe("InputWrapper component", () => {
-  it("render inputWrapper correctly", () => {
-    const inputWrapper = render(React.createElement(InputWrapper, null));
-    expect(inputWrapper).toMatchSnapshot();
-  });
+describe('InputWrapper component', () => {
+    it('render inputWrapper correctly', () => {
+        const inputWrapper = render(React.createElement(InputWrapper, null));
+        expect(inputWrapper).toMatchSnapshot();
+    });
 });
-//# sourceMappingURL=form.test.js.map
+//# sourceMappingURL=form.test.js.map

package/lib/esm/core-components/atoms/icons/icons.component.js

@@ -1,37 +1,33 @@
-import React from "react";
-export const Icon = ({
-  nameIcon,
-  propsIcon,
-  tooltip = "",
-  isDisable = false,
-  onClick,
-}) => {
-  try {
-    const iconProps = Object.assign(Object.assign({}, propsIcon), {
-      color: isDisable
-        ? "#808080"
-        : (propsIcon === null || propsIcon === void 0
-            ? void 0
-            : propsIcon.color) || "#ffffff",
-    });
-    const lib = nameIcon
-      .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
-      .split(" ")[0]
-      .toLocaleLowerCase();
-    // const ElementIcon: any = loadable(
-    //   () => import(`react-icons/${lib}/index.js`),
-    //   {
-    //     resolveComponent: (el) =>
-    //       el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
-    //   }
-    // );
-    return React.createElement("div", {
-      onClick: () => {
-        if (!isDisable) onClick && onClick();
-      },
-    });
-  } catch (error) {
-    return React.createElement(React.Fragment, null);
-  }
+import React, { Suspense } from 'react';
+import _ from 'lodash';
+import { Tooltip } from '../..';
+import loadable from '@loadable/component';
+let lib = 'md';
+export const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onClick, }) => {
+    try {
+        const iconProps = Object.assign(Object.assign({}, propsIcon), { color: isDisable ? '#808080' : (propsIcon === null || propsIcon === void 0 ? void 0 : propsIcon.color) || '#ffffff' });
+        const lib = nameIcon
+            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+            .split(' ')[0]
+            .toLocaleLowerCase();
+        let ElementIcon;
+        if (lib == 'md')
+            ElementIcon = loadable(() => import('react-icons/md'), {
+                resolveComponent: (el) => el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
+            });
+        else
+            ElementIcon = loadable(() => import('react-icons/fa'), {
+                resolveComponent: (el) => el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
+            });
+        return (React.createElement("div", { onClick: () => {
+                if (!isDisable)
+                    onClick && onClick();
+            } }, !_.isEmpty(tooltip) ? (React.createElement(Tooltip, { tooltipText: tooltip },
+            React.createElement(ElementIcon, Object.assign({}, iconProps)))) : (React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading...") },
+            React.createElement(ElementIcon, Object.assign({}, iconProps))))));
+    }
+    catch (error) {
+        return React.createElement(React.Fragment, null);
+    }
 };
-//# sourceMappingURL=icons.component.js.map
+//# sourceMappingURL=icons.component.js.map

package/lib/esm/core-components/atoms/icons/icons.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,KAAK,EACjB,OAAO,GACG,EAAe,EAAE;IAC3B,IAAI;QACF,MAAM,SAAS,mCACV,SAAS,KACZ,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,SAAS,GAC7D,CAAC;QACF,MAAM,GAAG,GAAG,QAAQ;aACjB,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;aACtC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aACb,iBAAiB,EAAE,CAAC;QACvB,qCAAqC;QACrC,iDAAiD;QACjD,MAAM;QACN,gCAAgC;QAChC,8EAA8E;QAC9E,MAAM;QACN,KAAK;QACL,OAAO,CACL,6BACE,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,SAAS;oBAAE,OAAO,IAAI,OAAO,EAAE,CAAC;YACvC,CAAC,GASG,CACP,CAAC;KACH;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,yCAAK,CAAC;KACd;AACH,CAAC,CAAC"}
+{"version":3,"file":"icons.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,CAAC,MAAM,QAAQ,CAAC;AACvB,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAW3C,IAAI,GAAG,GAAG,IAAI,CAAC;AACf,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,KAAK,EACjB,OAAO,GACG,EAAe,EAAE;IAC3B,IAAI;QACF,MAAM,SAAS,mCACV,SAAS,KACZ,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,KAAI,SAAS,GAC7D,CAAC;QACF,MAAM,GAAG,GAAG,QAAQ;aACjB,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;aACtC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aACb,iBAAiB,EAAE,CAAC;QAEvB,IAAI,WAAgB,CAAC;QACrB,IAAI,GAAG,IAAI,IAAI;YACb,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;gBACrD,gBAAgB,EAAE,CAAC,EAAE,EAAE,EAAE,CACvB,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;aACvE,CAAC,CAAC;;YAEH,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;gBACrD,gBAAgB,EAAE,CAAC,EAAE,EAAE,EAAE,CACvB,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;aACvE,CAAC,CAAC;QAEL,OAAO,CACL,6BACE,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,SAAS;oBAAE,OAAO,IAAI,OAAO,EAAE,CAAC;YACvC,CAAC,IAEA,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACrB,oBAAC,OAAO,IAAC,WAAW,EAAE,OAAO;YAC3B,oBAAC,WAAW,oBAAK,SAAS,EAAI,CACtB,CACX,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IAAC,QAAQ,EAAE,8CAAqB;YACvC,oBAAC,WAAW,oBAAK,SAAS,EAAI,CACrB,CACZ,CACG,CACP,CAAC;KACH;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,yCAAK,CAAC;KACd;AACH,CAAC,CAAC"}

package/lib/esm/core-components/atoms/icons/icons.stories.js

@@ -0,0 +1,20 @@
+import { Icon } from './icons.component';
+const meta = {
+    title: 'Design System/Atoms/Icon',
+    component: Icon,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { Icon } from 'react-restyle-components'`,
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        nameIcon: 'FaHistory',
+        propsIcon: {
+            color: '#000000',
+            size: 24,
+        },
+    },
+};
+//# sourceMappingURL=icons.stories.js.map

package/lib/esm/core-components/atoms/icons/icons.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.stories.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,iBAAiB,EAAE,iDAAiD;KACrE;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,WAAW;QACrB,SAAS,EAAE;YACT,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,EAAE;SACT;KACF;CACF,CAAC"}

package/lib/esm/core-components/atoms/icons/icons.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@core-utils';
+import { Icon } from './icons.component';
+it('render Icon correctly', () => {
+    const icon = render(React.createElement(Icon, { nameIcon: "FaHistory", propsIcon: {
+            color: '#000000',
+            size: 24,
+        } }));
+    expect(icon).toMatchSnapshot();
+});
+//# sourceMappingURL=icons.test.js.map

package/lib/esm/core-components/atoms/icons/icons.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.test.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AACvC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;IAC/B,MAAM,IAAI,GAAG,MAAM,CACjB,oBAAC,IAAI,IACH,QAAQ,EAAC,WAAW,EACpB,SAAS,EAAE;YACT,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,EAAE;SACT,GACD,CACH,CAAC;IACF,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}

package/lib/esm/core-components/atoms/input/input-otp.component.js

@@ -1,83 +1,62 @@
 /* eslint-disable no-console */
-import React, { useEffect, useRef } from "react";
-import "./input-otp.styles.css";
-export const InputOtp = ({ className, pin, onPinChanged }) => {
-  const pinLength = 6;
-  const Pin_Min_Value = 0;
-  const Pin_Max_Value = 9;
-  const BACKSPACE_Key = "Backspace";
-  const inputRefs = useRef([]);
-  useEffect(() => {
-    const ref = inputRefs.current[0];
-    if (ref) {
-      ref.focus();
-    }
-  }, []);
-  const changePinFocus = (pinIndex) => {
-    const ref = inputRefs.current[pinIndex];
-    if (ref) {
-      ref.focus();
-    }
-  };
-  const onChange = (event, index) => {
-    const value = event.target.value;
-    const pinNumber = Number(value.trim());
-    if (isNaN(pinNumber) || value.length === 0) {
-      return;
-    }
-    if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
-      onPinChanged(pinNumber, index);
-      if (index < pinLength - 1) {
-        changePinFocus(index + 1);
-      }
-    }
-  };
-  const onKeyDown = (event, index) => {
-    console.log({ event, index });
-    const keyboardKeyCode = event.nativeEvent.code;
-    if (keyboardKeyCode != BACKSPACE_Key) return;
-    if (pin[index] === undefined) {
-      changePinFocus(index - 1);
-    } else {
-      onPinChanged(undefined, index);
-    }
-  };
-  return React.createElement(
-    "div",
-    { className: `${className} relative` },
-    React.createElement(
-      "div",
-      {
-        className:
-          "flex space-x-1 bg-background-secondary rounded-lg outline-offset-8",
-      },
-      Array.from({ length: pinLength }, (_, index) =>
-        React.createElement("input", {
-          "data-testid": "onPinChanged",
-          className:
-            "pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none  font-nunitoSansRegular",
-          onKeyDown: (event) => onKeyDown(event, index),
-          key: index,
-          onMouseUp: () => {
-            if (pin.join("").length <= 0) {
-              changePinFocus(0);
+import React, { useEffect, useRef } from 'react';
+import './input-otp.styles.css';
+export const InputOtp = ({ className, pin, onPinChanged, }) => {
+    const pinLength = 6;
+    const Pin_Min_Value = 0;
+    const Pin_Max_Value = 9;
+    const BACKSPACE_Key = 'Backspace';
+    const inputRefs = useRef([]);
+    useEffect(() => {
+        const ref = inputRefs.current[0];
+        if (ref) {
+            ref.focus();
+        }
+    }, []);
+    const changePinFocus = (pinIndex) => {
+        const ref = inputRefs.current[pinIndex];
+        if (ref) {
+            ref.focus();
+        }
+    };
+    const onChange = (event, index) => {
+        const value = event.target.value;
+        const pinNumber = Number(value.trim());
+        if (isNaN(pinNumber) || value.length === 0) {
+            return;
+        }
+        if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
+            onPinChanged(pinNumber, index);
+            if (index < pinLength - 1) {
+                changePinFocus(index + 1);
             }
-          },
-          onClick: () => {
-            if (pin.join("").length <= 0) {
-              onPinChanged(undefined, 0);
-            }
-          },
-          ref: (el) => {
-            if (el) {
-              inputRefs.current[index] = el;
-            }
-          },
-          onChange: (event) => onChange(event, index),
-          value: pin[index] || "",
-        }),
-      ),
-    ),
-  );
+        }
+    };
+    const onKeyDown = (event, index) => {
+        console.log({ event, index });
+        const keyboardKeyCode = event.nativeEvent.code;
+        if (keyboardKeyCode != BACKSPACE_Key)
+            return;
+        if (pin[index] === undefined) {
+            changePinFocus(index - 1);
+        }
+        else {
+            onPinChanged(undefined, index);
+        }
+    };
+    return (React.createElement("div", { className: `${className} relative` },
+        React.createElement("div", { className: "flex space-x-1 bg-background-secondary rounded-lg outline-offset-8" }, Array.from({ length: pinLength }, (_, index) => (React.createElement("input", { "data-testid": "onPinChanged", className: "pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none  font-nunitoSansRegular", onKeyDown: (event) => onKeyDown(event, index), key: index, onMouseUp: () => {
+                if (pin.join('').length <= 0) {
+                    changePinFocus(0);
+                }
+            }, onClick: () => {
+                if (pin.join('').length <= 0) {
+                    onPinChanged(undefined, 0);
+                }
+            }, ref: (el) => {
+                if (el) {
+                    inputRefs.current[index] = el;
+                }
+            }, onChange: (event) => onChange(event, index), value: pin[index] || '' }))))));
 };
-//# sourceMappingURL=input-otp.component.js.map
+//# sourceMappingURL=input-otp.component.js.map