@ukpc-lib/react 0.2.9 → 0.2.12

package/dist/theme/index.js

@@ -0,0 +1,577 @@
+import { c as b } from "../Colors-4ad88021.js";
+import { jsx as y } from "react/jsx-runtime";
+import { createTheme as x, ThemeProvider as v } from "@mui/material";
+import a from "react";
+var c = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+}, g = a.createContext && /* @__PURE__ */ a.createContext(c), O = ["attr", "size", "title"];
+function M(e, r) {
+  if (e == null)
+    return {};
+  var t = P(e, r), i, o;
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (o = 0; o < n.length; o++)
+      i = n[o], !(r.indexOf(i) >= 0) && Object.prototype.propertyIsEnumerable.call(e, i) && (t[i] = e[i]);
+  }
+  return t;
+}
+function P(e, r) {
+  if (e == null)
+    return {};
+  var t = {}, i = Object.keys(e), o, n;
+  for (n = 0; n < i.length; n++)
+    o = i[n], !(r.indexOf(o) >= 0) && (t[o] = e[o]);
+  return t;
+}
+function u() {
+  return u = Object.assign ? Object.assign.bind() : function(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = arguments[r];
+      for (var i in t)
+        Object.prototype.hasOwnProperty.call(t, i) && (e[i] = t[i]);
+    }
+    return e;
+  }, u.apply(this, arguments);
+}
+function s(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    r && (i = i.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(e, o).enumerable;
+    })), t.push.apply(t, i);
+  }
+  return t;
+}
+function p(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = arguments[r] != null ? arguments[r] : {};
+    r % 2 ? s(Object(t), !0).forEach(function(i) {
+      C(e, i, t[i]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : s(Object(t)).forEach(function(i) {
+      Object.defineProperty(e, i, Object.getOwnPropertyDescriptor(t, i));
+    });
+  }
+  return e;
+}
+function C(e, r, t) {
+  return r = w(r), r in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e;
+}
+function w(e) {
+  var r = S(e, "string");
+  return typeof r == "symbol" ? r : String(r);
+}
+function S(e, r) {
+  if (typeof e != "object" || e === null)
+    return e;
+  var t = e[Symbol.toPrimitive];
+  if (t !== void 0) {
+    var i = t.call(e, r || "default");
+    if (typeof i != "object")
+      return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (r === "string" ? String : Number)(e);
+}
+function m(e) {
+  return e && e.map((r, t) => /* @__PURE__ */ a.createElement(r.tag, p({
+    key: t
+  }, r.attr), m(r.child)));
+}
+function f(e) {
+  return (r) => /* @__PURE__ */ a.createElement(k, u({
+    attr: p({}, e.attr)
+  }, r), m(e.child));
+}
+function k(e) {
+  var r = (t) => {
+    var {
+      attr: i,
+      size: o,
+      title: n
+    } = e, h = M(e, O), l = o || t.size || "1em", d;
+    return t.className && (d = t.className), e.className && (d = (d ? d + " " : "") + e.className), /* @__PURE__ */ a.createElement("svg", u({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, t.attr, i, h, {
+      className: d,
+      style: p(p({
+        color: e.color || t.color
+      }, t.style), e.style),
+      height: l,
+      width: l,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), n && /* @__PURE__ */ a.createElement("title", null, n), e.children);
+  };
+  return g !== void 0 ? /* @__PURE__ */ a.createElement(g.Consumer, null, (t) => r(t)) : r(c);
+}
+function z(e) {
+  return f({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M689 165.1L308.2 493.5c-10.9 9.4-10.9 27.5 0 37L689 858.9c14.2 12.2 35 1.2 35-18.5V183.6c0-19.7-20.8-30.7-35-18.5z" }, child: [] }] })(e);
+}
+function j(e) {
+  return f({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z" }, child: [] }] })(e);
+}
+const T = ({ colors: e = b }) => x({
+  palette: {
+    primary: {
+      main: e.primary300
+    },
+    secondary: {
+      main: e.secondary
+    },
+    warning: {
+      main: e.warning
+    },
+    error: {
+      main: e.danger
+    }
+  },
+  typography: {
+    fontFamily: "TT Firs Neue Trl",
+    button: {
+      textTransform: "none",
+      // padding: '0.75rem 1rem',
+      fontSize: "0.875rem",
+      // lineHeight: '1rem',
+      // height: 'fit-content',
+      // // fontFamily: '',
+      // borderRadius: 5,
+      fontWeight: 400,
+      boxShadow: "none"
+    },
+    body1: {
+      fontSize: "0.875rem",
+      fontWeight: 400
+    },
+    body2: {
+      fontSize: "0.75rem"
+    },
+    h6: {
+      fontSize: "0.875rem",
+      fontWeight: 500
+    },
+    h5: {
+      fontSize: "1rem",
+      fontWeight: 500
+    },
+    h4: {
+      fontSize: "1.25rem",
+      fontWeight: 500
+    },
+    h3: {
+      fontSize: "1.5rem",
+      fontWeight: 500
+    },
+    h2: {
+      fontSize: "2rem",
+      fontWeight: 500
+    },
+    h1: {
+      fontSize: "2.5rem",
+      fontWeight: 500
+    },
+    subtitle1: {
+      fontSize: "0.75rem"
+    },
+    subtitle2: {
+      fontSize: "0.625rem"
+    }
+  },
+  components: {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {},
+        sizeSmall: {}
+      }
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          boxShadow: "none !important",
+          padding: "8px 32px",
+          borderWidth: 1,
+          borderRadius: 3,
+          fontWeight: 400
+        }
+      },
+      variants: [
+        {
+          props: { variant: "primary" },
+          style: {
+            backgroundColor: e.primary300,
+            color: e.buttonText,
+            "&:hover": {
+              backgroundColor: e.primary500,
+              color: e.white
+            },
+            "&.Mui-disabled": {
+              backgroundColor: e.grey200
+            }
+          }
+        },
+        {
+          props: { variant: "confirm" },
+          style: {
+            backgroundColor: e.danger,
+            color: e.white,
+            "&:hover": {
+              backgroundColor: e.dangerDark
+            },
+            "&.Mui-disabled": {
+              backgroundColor: e.grey200
+            }
+          }
+        },
+        {
+          props: { variant: "cancel" },
+          style: {
+            backgroundColor: e.grey300,
+            color: e.textPrimary,
+            "&:hover": {
+              backgroundColor: e.grey400
+            }
+          }
+        },
+        {
+          props: { variant: "outlined" },
+          style: {
+            color: e.primary500,
+            border: "1px solid",
+            borderColor: e.primary400,
+            "&:hover": {
+              backgroundColor: "inherit"
+            }
+          }
+        },
+        {
+          props: { variant: "outlinedPrimary" },
+          style: {
+            color: e.primary500,
+            border: "1px solid",
+            borderColor: e.primary400,
+            "&:hover": {
+              backgroundColor: "inherit"
+            }
+          }
+        },
+        {
+          props: { variant: "outLinedDanger" },
+          style: {
+            color: e.danger,
+            border: "1px solid",
+            borderColor: e.danger,
+            "&:hover": {
+              backgroundColor: "inherit"
+            }
+          }
+        }
+      ]
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: e.appBarBgColor,
+          color: e.appBarColor
+        }
+      }
+    },
+    MuiSelect: {
+      defaultProps: {
+        MenuProps: {
+          PaperProps: {
+            sx: {
+              boxShadow: "none",
+              border: 1,
+              borderStyle: "solid",
+              borderColor: e.grey300,
+              mt: "5px"
+            }
+          },
+          MenuListProps: {
+            sx: {
+              padding: "5px",
+              "& .MuiMenuItem-root": {
+                fontWeight: 400,
+                minHeight: 0,
+                borderRadius: "5px",
+                "&:hover": {
+                  backgroundColor: e.grey100
+                },
+                "&.Mui-selected": {
+                  // fontWeight: 500,
+                  // color: color.darkPrimary,
+                  backgroundColor: e.primary200
+                }
+                // [breakpoints.down('sm')]: {
+                //     padding:0
+                // },
+              }
+            }
+          }
+        }
+      },
+      styleOverrides: {
+        select: {
+          padding: "9.94px 5px 9.94px 15px"
+        }
+      }
+    },
+    MuiPaginationItem: {
+      defaultProps: {
+        components: {
+          previous: z,
+          next: j
+        }
+      },
+      styleOverrides: {
+        root: {
+          "& svg": {
+            width: "10px"
+          },
+          border: "none",
+          fontSize: "14px",
+          lineHeight: "1.5rem",
+          borderRadius: "7px",
+          "&.Mui-selected": {
+            backgroundColor: e.primary200
+          },
+          "&.MuiPaginationItem-previousNext": {
+            backgroundColor: e.grey200
+          }
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: "5px",
+          fontSize: "10px",
+          lineHeight: "12px",
+          fontWeight: 400,
+          "& .MuiChip-label": {
+            lineHeight: "normal"
+          }
+        },
+        avatar: {
+          width: "10px"
+        },
+        colorSuccess: {
+          color: e.success,
+          backgroundColor: e.successLight
+        },
+        colorWarning: {
+          color: e.warning,
+          backgroundColor: e.warningLight
+        },
+        colorError: {
+          color: e.danger,
+          backgroundColor: e.dangerLight
+        },
+        colorSecondary: {
+          color: e.linkPrimary,
+          backgroundColor: e.linkLight
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          background: e.grey200,
+          borderTopLeftRadius: "8px",
+          borderTopRightRadius: "8px",
+          marginRight: "5px",
+          minWidth: "200px",
+          flexDirection: "row",
+          alignContent: "center",
+          gap: "8px",
+          textTransform: "capitalize",
+          "& svg": {
+            mb: "0 !important"
+          },
+          padding: 0,
+          height: "32px",
+          minHeight: "auto",
+          fontSize: "12px",
+          "& .chart-icon": {
+            fill: e.grey600
+          },
+          "& .detail-icon": {
+            stroke: e.grey600
+          }
+        }
+      }
+    },
+    MuiDrawer: {
+      defaultProps: {},
+      styleOverrides: {
+        root: {
+          "&.MuiDrawer-paper": {
+            overflowY: "unset"
+          },
+          "& .MuiDrawer-paper": {
+            zIndex: 9
+          },
+          "&.MuiPaper-root": {
+            border: "none",
+            background: e.grey100,
+            pt: 12,
+            zIndex: 9
+          }
+        }
+      }
+    },
+    MuiTextField: {
+      defaultProps: {
+        InputProps: {
+          sx: {
+            "& .Mui-disabled": {
+              background: e.grey200
+            }
+          }
+        },
+        InputLabelProps: {
+          shrink: !0
+        }
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: e.white,
+          "& .MuiOutlinedInput-input": {
+            padding: "0px 16px 0px 12px",
+            fontWeight: 400,
+            height: 40,
+            fontSize: "14px",
+            border: 1,
+            borderRadius: 4,
+            "&::placeholder": {
+              color: e.grey600
+            }
+          },
+          "& .MuiFormLabel-root": {
+            color: e.textPrimary
+          },
+          "& .MuiFormLabel-asterisk": {
+            color: e.danger
+          }
+        }
+      }
+    },
+    MuiFormGroup: {
+      styleOverrides: {
+        root: {
+          // position: 'relative',
+        }
+      }
+    },
+    MuiFormHelperText: {
+      defaultProps: {
+        sx: {
+          fontSize: 12
+        }
+      },
+      styleOverrides: {}
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        sx: {
+          "& .MuiPaper-root": {
+            padding: "5px"
+          }
+        }
+      },
+      styleOverrides: {
+        root: {
+          "& .MuiSvgIcon-root": {
+            width: "20px",
+            height: "20px"
+          },
+          "& .MuiAutocomplete-tag": {
+            margin: 0
+          },
+          "& .MuiButtonBase-root": {
+            marginRight: "2px !important",
+            height: "max-content",
+            padding: "2px"
+          },
+          "& .MuiOutlinedInput-root": {
+            padding: "7.45px 55px 7.45px 10px !important"
+          },
+          "& svg": {},
+          "& #checkboxes-tags-demo": {
+            padding: "6px 4px"
+          },
+          "& .MuiAutocomplete-endAdornment": {
+            top: "calc(50% - 12px)"
+          }
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          "& th": {
+            fontSize: "14px",
+            padding: "8px 16px"
+          }
+        }
+      }
+    },
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          "& th,td": {
+            fontSize: "14px",
+            padding: "8px 16px",
+            height: "45px"
+          },
+          "& .MuiTableCell-root": {
+            borderBottom: `1px solid ${e.grey300}`
+          }
+        }
+      }
+    },
+    MuiRadio: {
+      defaultProps: {
+        sx: {
+          "&.MuiButtonBase-root": {
+            padding: "5px"
+          }
+        }
+      },
+      styleOverrides: {
+        root: {
+          "& .MuiSvgIcon-root": {
+            fontSize: 16
+          },
+          color: e.grey600,
+          "&.Mui-checked": {
+            color: e.success
+          },
+          "&.Mui-disabled": {
+            color: e.grey600
+          }
+        }
+      }
+    },
+    MuiTooltip: {
+      defaultProps: {
+        placement: "top",
+        arrow: !0
+      }
+    }
+  }
+}), R = (e) => {
+  const r = T({});
+  return /* @__PURE__ */ y(v, { theme: r, children: e.children });
+};
+export {
+  R as SaasThemeProvider,
+  b as color,
+  T as createCustomTheme
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ukpc-lib/react",
   "private": false,
-  "version": "0.2.9",
+  "version": "0.2.12",
   "type": "module",
   "main": "./dist/",
   "module": "./dist/",
@@ -15,6 +15,11 @@
       "import": "./dist/share/index.js",
       "require": "./dist/share/index.cjs",
       "types": "./dist/share/index.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.cjs",
+      "types": "./dist/theme/index.d.ts"
     }
   },
   "typesVersions": {
@@ -50,9 +55,13 @@
     "cssnano": "^6.0.3",
     "firebase": "^10.8.1",
     "framer-motion": "^10.18.0",
+    "i18n": "^0.15.1",
+    "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^7.2.0",
     "jquery": "^3.7.1",
     "moment": "^2.30.1",
     "react-bootstrap-daterangepicker": "^8.0.0",
+    "react-i18next": "^14.1.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.3",
     "react-shadow": "^20.4.0",
@@ -93,7 +102,8 @@
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.3",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "react-icons": "^5.0.1"
   },
   "author": "Thinh Phung",
   "description": "![Screenshot 2024-01-22 at 11 40 08](https://github.com/UKParkingControl/LibShareJS/assets/153060345/99004010-67a2-436b-a5b7-317992137205)",