acsi-core 0.1.2 → 0.1.3

package/dist/components/CoreButton/index.d.ts

@@ -2,9 +2,11 @@ import React from "react";
 interface IProps {
     type?: "primary" | "secondary" | "text";
     children: string | JSX.Element;
-    onClick?: () => void;
+    onClick?: any;
     icon?: JSX.Element | string;
     disabled?: boolean;
+    background?: string;
+    color?: string;
 }
 declare const CoreButton: (props: IProps) => React.JSX.Element;
 export default CoreButton;

package/dist/components/CoreInput/index.d.ts

@@ -2,12 +2,18 @@ import React from "react";
 interface IProps {
     name: string;
     value: string;
+    type?: "no-outline" | "outline";
     onChange: (name: string, value: string) => void;
     disabled?: boolean;
     label?: string;
     width?: number;
     placeholder?: string;
     error?: boolean;
+    errorMessage?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    onKeyDown?: (e: any) => void;
+    ref?: any;
 }
 declare const CoreInput: (props: IProps) => React.JSX.Element;
 export default CoreInput;

package/dist/components/CoreModal/index.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     onClose: () => void;
     children: JSX.Element;
     title: string;
+    footer?: JSX.Element;
 }
 declare const CoreModal: (props: IProps) => React.JSX.Element;
 export default CoreModal;

package/dist/components/CoreRange/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface IProps {
+    name: string;
+    value: number;
+    onChange: (name: string, value: number) => void;
+    disabled?: boolean;
+    label?: string;
+    width?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare const CoreRange: (props: IProps) => React.JSX.Element;
+export default CoreRange;

package/dist/components/CoreSelect/index.d.ts

@@ -13,6 +13,7 @@ interface IProps {
     width?: number;
     placeholder?: string;
     error?: boolean;
+    errorMessage?: string;
 }
 declare const CoreSelect: (props: IProps) => React.JSX.Element;
 export default CoreSelect;

package/dist/components/CoreTextArea/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface IProps {
+    name: string;
+    value: string;
+    onChange: (name: string, value: string) => void;
+    placeholder?: string;
+    label?: string;
+    cols?: number;
+    rows?: number;
+    width?: number;
+}
+declare const CoreTextArea: (props: IProps) => React.JSX.Element;
+export default CoreTextArea;

package/dist/components/index.d.ts

@@ -5,3 +5,5 @@ export { default as CoreCheckbox } from "./CoreCheckbox";
 export { default as CoreRadio } from "./CoreRadio";
 export { default as CoreError } from "./CoreError";
 export { default as CoreModal } from "./CoreModal";
+export { default as CoreRange } from "./CoreRange";
+export { default as CoreTextArea } from "./CoreTextArea";

package/dist/index.css

@@ -1,13 +1,12 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Nunito+Sans:wght@400;700&display=swap");
 ._1KLz9 {
-  margin: 40px 40px 0 40px;
+  margin: 40px;
   height: 90vh;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  font-family: 'Nunito', sans-serif; }
+  font-family: "Nunito", sans-serif; }
   ._1KLz9 ._2Jo1o {
     width: 324px;
     text-align: center; }
@@ -38,7 +37,7 @@
       margin-bottom: 19px; }
     ._1KLz9 ._2Jo1o ._2e9xO {
       font-size: 13px;
-      color: #C6C6CC;
+      color: #c6c6cc;
       height: 18px;
       width: 100%;
       position: relative;
@@ -48,7 +47,7 @@
       gap: 8px; }
     ._1KLz9 ._2Jo1o ._2e9xO::before,
     ._1KLz9 ._2Jo1o ._2e9xO::after {
-      content: '';
+      content: "";
       display: block;
       width: 144px;
       height: 1px;
@@ -72,7 +71,7 @@
         height: 48px;
         padding: 15px 16px; }
     ._1KLz9 ._2Jo1o ._21FPk {
-      background-color: #E5F9FF;
+      background-color: #e5f9ff;
       font-size: 16px;
       font-weight: 600;
       border-radius: 12px;
@@ -103,7 +102,7 @@
     left: 0; }
   ._1KLz9 ._3qndF {
     border-radius: 40px;
-    background-repeat: 'no-repeat';
+    background-repeat: "no-repeat";
     background-position: center;
     background-size: cover;
     position: relative;
@@ -111,6 +110,9 @@
     ._1KLz9 ._3qndF ._JzdCr {
       padding-top: 64px;
       padding-left: 56px; }
+      @media (min-width: 1024px) {
+        ._1KLz9 ._3qndF ._JzdCr {
+          padding-right: 21px; } }
     ._1KLz9 ._3qndF ._19aCA {
       display: flex;
       position: absolute;
@@ -125,20 +127,27 @@
   border: none;
   line-height: 18px;
   font-weight: 600;
-  padding: 7px 12px; }
+  padding: 7px 12px;
+  display: flex;
+  align-items: center;
+  transition: all .3s; }
+  ._xvNBN svg {
+    margin-right: 4px; }
   ._xvNBN:disabled {
-    pointer-events: none;
-    background-color: #F5F9FA;
-    color: #585869; }
+    pointer-events: none; }
+    ._xvNBN:disabled path {
+      fill: #585869; }
 
 ._U9Qyp {
   background-color: #025675;
   color: #FFFFFF; }
+  ._U9Qyp path {
+    fill: #FFFFFF; }
   ._U9Qyp:hover {
     background-color: #007A99; }
 
 ._1VzMy {
-  background-color: #A6A6AD;
+  background-color: #F5F9FA;
   color: #101129; }
   ._1VzMy:hover {
     background-color: #E6E6EB; }
@@ -154,31 +163,51 @@
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 4px; }
-  ._1WdX2 input {
-    border-radius: 8px;
-    border: 1px solid #E6E6EB;
-    height: 32px;
-    font-size: 14px;
-    font-weight: 400;
-    padding: 7px 12px; }
-    ._1WdX2 input:disabled {
-      pointer-events: none;
-      background-color: #F5F9FA; }
-    ._1WdX2 input:focus-visible {
-      border: 2px solid #00AFDA;
-      outline: none; }
-    ._1WdX2 input::-moz-placeholder {
-      color: #A6A6AD; }
-    ._1WdX2 input::placeholder {
-      color: #A6A6AD; }
-    ._1WdX2 input:hover {
-      background-color: #F5F9FA; }
+
+._3X2RJ input {
+  border-radius: 8px;
+  border: 1px solid #E6E6EB;
+  height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 7px 12px; }
+  ._3X2RJ input:disabled {
+    pointer-events: none;
+    background-color: #F5F9FA; }
+  ._3X2RJ input:focus-visible {
+    border: 2px solid #00AFDA;
+    outline: none; }
+  ._3X2RJ input::-moz-placeholder {
+    color: #A6A6AD; }
+  ._3X2RJ input::placeholder {
+    color: #A6A6AD; }
+  ._3X2RJ input:hover {
+    background-color: #F5F9FA; }
+
+._bVYtv input {
+  border: none;
+  outline: none;
+  color: #A6A6AD; }
+  ._bVYtv input::-moz-placeholder {
+    color: #A6A6AD; }
+  ._bVYtv input::placeholder {
+    color: #A6A6AD; }
 
 ._n7n3Q input {
   border-color: #CE3636; }
   ._n7n3Q input:focus-visible {
     border-color: #CE3636; }
 
+._1Mmxr {
+  display: flex;
+  color: #CE3636;
+  margin-top: 2px; }
+  ._1Mmxr p {
+    font-size: 13px;
+    font-weight: 400;
+    margin: 0;
+    margin-left: 4px; }
+
 ._2sg12 {
   display: flex;
   flex-direction: column; }
@@ -197,7 +226,8 @@
     width: 16px;
     height: 16px;
     border-radius: 4px !important;
-    border: 1px solid #A6A6AD; }
+    border: 1px solid #A6A6AD;
+    transition: all .3s; }
     ._3HY4f input:focus {
       box-shadow: none; }
     ._3HY4f input:checked {
@@ -220,7 +250,8 @@
     width: 16px;
     height: 16px;
     border-radius: 4px;
-    border: 1px solid #A6A6AD; }
+    border: 1px solid #A6A6AD;
+    transition: all .3s; }
     ._kvUpe input:focus {
       box-shadow: none; }
     ._kvUpe input:checked {
@@ -232,18 +263,26 @@
     ._kvUpe input:not(:checked):not(:disabled):hover {
       background-color: #E6E6EB; }
 
-._1Mmxr {
-  display: flex;
-  color: #CE3636;
-  margin-top: 2px; }
-  ._1Mmxr p {
-    font-size: 13px;
-    font-weight: 400;
-    margin: 0;
-    margin-left: 4px; }
-
 ._2y5ln {
   padding: 16px 24px !important; }
   ._2y5ln h5 {
     font-size: 18px;
     font-weight: 700; }
+
+._1dzD7 {
+  display: flex;
+  flex-direction: column; }
+  ._1dzD7 label {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 4px; }
+
+._1b_C3 textarea {
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  border: 1px solid #E6E6EB;
+  padding: 8px 12px;
+  color: #a6a6ad;
+  font-size: 14px;
+  font-weight: 400; }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 declare const historyCore: import("history").History<unknown>;
-import { setLoading, setAlert, setUser } from "./redux/commons/action";
+import { setLoading, setAlert, setUser, setMenuCollapse } from "./redux/commons/action";
 import { BASE_URL, ACCESS_TOKEN } from "./utils/constants";
 import Login from "./containers/Login/views/Login";
 import store from "./store";
@@ -13,10 +13,10 @@ import { ToastContainer, toast } from "react-toastify";
 import { Role } from "./containers/Login/configs/constants";
 import CustomPagination from "./components/Paginations/CustomPagination";
 import useGoogleSignOut from "./utils/hooks/useGoogleSignOut";
-import { CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal } from "./components";
+import { CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea } from "./components";
 import { getErrorMessage } from "./utils/getErrorMessage";
 import CustomSelect from "./components/Selects/CustomSelect";
 import CustomAsyncSelect from "./components/Selects/CustomAsyncSelect";
 import CustomCreatable from "./components/Selects/CustomCreatable";
 import CustomSelectOption from "./components/Selects/CustomSelectOption";
-export { setLoading, BASE_URL, ACCESS_TOKEN, Login, store, historyCore, setAlert, setUser, Loading, NotFound, LayoutContext, api, apiUpload, ConfirmDialog, CommonDialog, ToastContainer, toast, Role, CustomPagination, useGoogleSignOut, CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, getErrorMessage, CustomSelect, CustomAsyncSelect, CustomCreatable, CustomSelectOption };
+export { setLoading, BASE_URL, ACCESS_TOKEN, Login, store, historyCore, setAlert, setUser, setMenuCollapse, Loading, NotFound, LayoutContext, api, apiUpload, ConfirmDialog, CommonDialog, ToastContainer, toast, Role, CustomPagination, useGoogleSignOut, CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, getErrorMessage, CustomSelect, CustomAsyncSelect, CustomCreatable, CustomSelectOption };

package/dist/index.js

@@ -24,6 +24,7 @@ var setAlert = toolkit.createAction("common/setAlert");
 var setUser = toolkit.createAction("common/setUser");
 var setLanguage = toolkit.createAction("common/setLanguage");
 var reset = toolkit.createAction("common/reset");
+var setMenuCollapse = toolkit.createAction("common/setMenuCollapse");
 
 var GOOGLE_RECAPTCHA_KEY = process.env.REACT_APP_GOOGLE_RECAPTCHA_KEY || "";
 var GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID || "";
@@ -529,7 +530,8 @@ var initialState = {
     message: ""
   },
   user: null,
-  academy: null
+  academy: null,
+  menuCollapse: false
 };
 var commonReducer = toolkit.createReducer(initialState, function (builder) {
   builder.addCase(setLoading, function (state, action) {
@@ -542,6 +544,8 @@ var commonReducer = toolkit.createReducer(initialState, function (builder) {
     state.language = action.payload;
   }).addCase(reset, function (_state, _action) {
     return initialState;
+  }).addCase(setMenuCollapse, function (state, action) {
+    state.menuCollapse = action.payload;
   });
 });
 
@@ -950,40 +954,81 @@ var CoreButton = function CoreButton(props) {
     onClick = props.onClick,
     icon = props.icon,
     _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled;
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$background = props.background,
+    background = _props$background === void 0 ? "#F5F9FA" : _props$background,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "#585869" : _props$color;
   return React__default.createElement("button", {
     className: styles["core-button"] + " " + styles[type],
+    style: {
+      "background": background,
+      "color": color
+    },
     onClick: onClick,
     disabled: disabled
   }, icon && icon, children);
 };
 
-var styles$1 = {"core-input":"_1WdX2","error":"_n7n3Q"};
+var styles$1 = {"core-input":"_1WdX2","outline":"_3X2RJ","no-outline":"_bVYtv","error":"_n7n3Q"};
+
+var styles$2 = {"core-error":"_1Mmxr"};
+
+var icons = {
+  ErrorRedIcon: "/images/icons/error_red.svg"
+};
+
+var CoreError = function CoreError(props) {
+  var message = props.message;
+  return React__default.createElement("div", {
+    className: "" + styles$2["core-error"]
+  }, React__default.createElement("img", {
+    src: icons.ErrorRedIcon,
+    alt: "error-icon"
+  }), React__default.createElement("p", null, message));
+};
 
 var CoreInput = function CoreInput(props) {
   var name = props.name,
     value = props.value,
     _onChange = props.onChange,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "outline" : _props$type,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     label = props.label,
     width = props.width,
     _props$placeholder = props.placeholder,
     placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
-    error = props.error;
+    error = props.error,
+    _props$errorMessage = props.errorMessage,
+    errorMessage = _props$errorMessage === void 0 ? "" : _props$errorMessage,
+    fontSize = props.fontSize,
+    fontWeight = props.fontWeight,
+    _onKeyDown = props.onKeyDown,
+    ref = props.ref;
   return React__default.createElement("div", {
-    className: styles$1["core-input"] + " " + (error ? styles$1["error"] : ""),
+    className: styles$1["core-input"] + "  " + styles$1[type] + " " + (error ? styles$1["error"] : ""),
     style: {
       width: width != null ? width : "100%"
     }
-  }, label && React__default.createElement("label", null, label), React__default.createElement("input", {
+  }, label && React__default.createElement("label", null, label), React__default.createElement("input", Object.assign({
+    style: {
+      fontSize: fontSize,
+      fontWeight: fontWeight
+    },
     name: name,
     value: value,
     onChange: function onChange(e) {
       return _onChange(name, e.target.value);
     },
     disabled: disabled,
-    placeholder: placeholder
+    placeholder: placeholder,
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
+    }
+  }, ref)), error && React__default.createElement(CoreError, {
+    message: errorMessage
   }));
 };
 
@@ -1006,7 +1051,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var styles$2 = {"core-select":"_2sg12"};
+var styles$3 = {"core-select":"_2sg12"};
 
 var CoreSelect = function CoreSelect(props) {
   var _options$find;
@@ -1020,9 +1065,11 @@ var CoreSelect = function CoreSelect(props) {
     width = props.width,
     _props$placeholder = props.placeholder,
     placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
-    error = props.error;
+    error = props.error,
+    _props$errorMessage = props.errorMessage,
+    errorMessage = _props$errorMessage === void 0 ? "" : _props$errorMessage;
   return React__default.createElement("div", {
-    className: "" + styles$2["core-select"],
+    className: "" + styles$3["core-select"],
     style: {
       width: width != null ? width : "100%"
     }
@@ -1051,7 +1098,9 @@ var CoreSelect = function CoreSelect(props) {
           boxShadow: "none",
           "&:hover": {
             backgroundColor: "#F5F9FA"
-          }
+          },
+          transition: "all .3s",
+          overflow: "hidden"
         });
       },
       input: function input(base) {
@@ -1071,7 +1120,8 @@ var CoreSelect = function CoreSelect(props) {
       dropdownIndicator: function dropdownIndicator(base) {
         return _extends({}, base, {
           position: "relative",
-          top: "-4px"
+          top: "-4px",
+          padding: "8px 0"
         });
       },
       indicatorSeparator: function indicatorSeparator() {
@@ -1091,10 +1141,12 @@ var CoreSelect = function CoreSelect(props) {
         });
       }
     }
+  }), error && React__default.createElement(CoreError, {
+    message: errorMessage
   }));
 };
 
-var styles$3 = {"core-checkbox":"_3HY4f"};
+var styles$4 = {"core-checkbox":"_3HY4f"};
 
 var CoreInput$1 = function CoreInput(props) {
   var name = props.name,
@@ -1104,7 +1156,7 @@ var CoreInput$1 = function CoreInput(props) {
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     label = props.label;
   return React__default.createElement("div", {
-    className: "" + styles$3["core-checkbox"]
+    className: "" + styles$4["core-checkbox"]
   }, React__default.createElement(reactstrap.FormGroup, {
     check: true,
     inline: true
@@ -1123,7 +1175,7 @@ var CoreInput$1 = function CoreInput(props) {
   }, label)));
 };
 
-var styles$4 = {"core-radio":"_kvUpe","form-check":"_3ToPe"};
+var styles$5 = {"core-radio":"_kvUpe","form-check":"_3ToPe"};
 
 var CoreRadio = function CoreRadio(props) {
   var name = props.name,
@@ -1133,7 +1185,7 @@ var CoreRadio = function CoreRadio(props) {
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled;
   return React__default.createElement("div", {
-    className: "" + styles$4["core-radio"]
+    className: "" + styles$5["core-radio"]
   }, React__default.createElement(reactstrap.FormGroup, {
     check: true
   }, options.map(function (i) {
@@ -1156,29 +1208,14 @@ var CoreRadio = function CoreRadio(props) {
   })));
 };
 
-var styles$5 = {"core-error":"_1Mmxr"};
-
-var icons = {
-  ErrorRedIcon: "/images/icons/error_red.svg"
-};
-
-var CoreError = function CoreError(props) {
-  var message = props.message;
-  return React__default.createElement("div", {
-    className: "" + styles$5["core-error"]
-  }, React__default.createElement("img", {
-    src: icons.ErrorRedIcon,
-    alt: "error-icon"
-  }), React__default.createElement("p", null, message));
-};
-
 var styles$6 = {"core-modal-header":"_2y5ln"};
 
 var CoreModal = function CoreModal(props) {
   var open = props.open,
     onClose = props.onClose,
     children = props.children,
-    title = props.title;
+    title = props.title,
+    footer = props.footer;
   return React__default.createElement(reactstrap.Modal, {
     isOpen: open,
     toggle: onClose,
@@ -1187,7 +1224,66 @@ var CoreModal = function CoreModal(props) {
   }, React__default.createElement(reactstrap.ModalHeader, {
     toggle: onClose,
     className: styles$6["core-modal-header"]
-  }, title), React__default.createElement(reactstrap.ModalBody, null, children));
+  }, title), React__default.createElement(reactstrap.ModalBody, null, children), footer && React__default.createElement(reactstrap.ModalFooter, null, footer));
+};
+
+var styles$7 = {"core-range":"_1dzD7"};
+
+var CoreRange = function CoreRange(props) {
+  var name = props.name,
+    value = props.value,
+    _onChange = props.onChange,
+    label = props.label,
+    width = props.width,
+    min = props.min,
+    max = props.max,
+    step = props.step;
+  return React__default.createElement("div", {
+    className: "" + styles$7["core-range"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React__default.createElement("label", null, label), React__default.createElement("input", {
+    type: "range",
+    name: name,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, +e.target.value);
+    },
+    min: min,
+    max: max,
+    step: step
+  }));
+};
+
+var styles$8 = {"core-text-area":"_1b_C3"};
+
+var CoreTextArea = function CoreTextArea(props) {
+  var name = props.name,
+    _onChange = props.onChange,
+    value = props.value,
+    _props$cols = props.cols,
+    cols = _props$cols === void 0 ? 0 : _props$cols,
+    label = props.label,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 2 : _props$rows,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
+    width = props.width;
+  return React__default.createElement("div", {
+    className: styles$8["core-text-area"]
+  }, label && React__default.createElement("label", null, label), React__default.createElement("textarea", {
+    placeholder: placeholder,
+    value: value,
+    cols: cols,
+    rows: rows,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
+    },
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }));
 };
 
 var getErrorMessage = function getErrorMessage(error, defaultErrorMessage) {
@@ -1414,7 +1510,9 @@ exports.CoreError = CoreError;
 exports.CoreInput = CoreInput;
 exports.CoreModal = CoreModal;
 exports.CoreRadio = CoreRadio;
+exports.CoreRange = CoreRange;
 exports.CoreSelect = CoreSelect;
+exports.CoreTextArea = CoreTextArea;
 exports.CustomAsyncSelect = CustomAsyncSelect;
 exports.CustomCreatable = CustomCreatable;
 exports.CustomPagination = CustomPagination;
@@ -1430,6 +1528,7 @@ exports.getErrorMessage = getErrorMessage;
 exports.historyCore = historyCore;
 exports.setAlert = setAlert;
 exports.setLoading = setLoading;
+exports.setMenuCollapse = setMenuCollapse;
 exports.setUser = setUser;
 exports.store = store;
 exports.useGoogleSignOut = useGoogleSignOut;