@gustavo-valsechi/client 1.3.49 → 1.3.50

package/dist/components/types/avatar/index.js

@@ -35,10 +35,23 @@ module.exports = __toCommonJS(avatar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_styles = require("./styles");
+var import_server = require("@gustavo-valsechi/server");
+var import_randomcolor = __toESM(require("randomcolor"));
 var import_lodash = __toESM(require("lodash"));
 function Avatar(props) {
   const containerRef = (0, import_react.useRef)({});
   const [color, setColor] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (color) return;
+    (async () => {
+      const storageKey = process.env.NEXT_PUBLIC_STORAGE_AVATAR;
+      const storageColor = await (0, import_server.getStorage)(storageKey);
+      if (storageColor) return setColor(storageColor);
+      const random = (0, import_randomcolor.default)({ luminosity: "light" });
+      await (0, import_server.setStorage)(storageKey, random);
+      setColor(random);
+    })();
+  }, [color]);
   const name = () => {
     const [first, secound] = import_lodash.default.split(props.name, " ") || [];
     if (first && secound) return `${first} ${secound}`;

package/dist/components/types/avatar/index.mjs

@@ -1,11 +1,24 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Container } from "./styles";
+import { getStorage, setStorage } from "@gustavo-valsechi/server";
+import randomColor from "randomcolor";
 import _ from "lodash";
 function Avatar(props) {
   const containerRef = useRef({});
   const [color, setColor] = useState("");
+  useEffect(() => {
+    if (color) return;
+    (async () => {
+      const storageKey = process.env.NEXT_PUBLIC_STORAGE_AVATAR;
+      const storageColor = await getStorage(storageKey);
+      if (storageColor) return setColor(storageColor);
+      const random = randomColor({ luminosity: "light" });
+      await setStorage(storageKey, random);
+      setColor(random);
+    })();
+  }, [color]);
   const name = () => {
     const [first, secound] = _.split(props.name, " ") || [];
     if (first && secound) return `${first} ${secound}`;

package/dist/contexts/theme/global.styles.d.ts

@@ -0,0 +1,2 @@
+declare const GlobalStyle: import("react").NamedExoticComponent<any>;
+export default GlobalStyle;

package/dist/contexts/theme/global.styles.js

@@ -0,0 +1,70 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var global_styles_exports = {};
+__export(global_styles_exports, {
+  default: () => global_styles_default
+});
+module.exports = __toCommonJS(global_styles_exports);
+var import_styled_components = require("styled-components");
+const GlobalStyle = import_styled_components.createGlobalStyle`
+    html, body, input, select, textarea, div, button {
+        font-family: "Poppins", sans-serif !important;
+        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
+    } 
+
+    html, body {
+        padding: 0;
+        margin: 0;
+        background: ${({ theme }) => theme.primary};
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    div {
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar {
+            width: 6px;
+            border-radius: 1rem;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: rgb(0, 0, 0, 0.08);
+            width: 6px;
+            border-radius: 1rem;
+        }
+    }
+    
+    ul {
+        list-style: none outside none;
+        margin: 0;
+        padding: 0;
+    }
+`;
+var global_styles_default = GlobalStyle;

package/dist/contexts/theme/global.styles.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { createGlobalStyle } from "styled-components";
+const GlobalStyle = createGlobalStyle`
+    html, body, input, select, textarea, div, button {
+        font-family: "Poppins", sans-serif !important;
+        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
+    } 
+
+    html, body {
+        padding: 0;
+        margin: 0;
+        background: ${({ theme }) => theme.primary};
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    div {
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar {
+            width: 6px;
+            border-radius: 1rem;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: rgb(0, 0, 0, 0.08);
+            width: 6px;
+            border-radius: 1rem;
+        }
+    }
+    
+    ul {
+        list-style: none outside none;
+        margin: 0;
+        padding: 0;
+    }
+`;
+var global_styles_default = GlobalStyle;
+export {
+  global_styles_default as default
+};

package/dist/contexts/theme/index.js

@@ -1,8 +1,10 @@
 "use strict";
 "use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var theme_exports = {};
 __export(theme_exports, {
@@ -28,10 +38,17 @@ var import_react = require("react");
 var import_styled_components = require("styled-components");
 var import_styles = require("./styles");
 var import_content = require("./content");
+var import_server = require("@gustavo-valsechi/server");
+var import_registry = __toESM(require("../../contexts/theme/registry"));
+var import_global = __toESM(require("./global.styles"));
 const ThemeContext = (0, import_react.createContext)({});
 const ThemeProviderContainer = (props) => {
   const [theme, setTheme] = (0, import_react.useState)("light");
   const [defaultTheme] = (0, import_react.useState)("light");
+  (0, import_react.useEffect)(() => {
+    if (!theme) return;
+    (async () => await (0, import_server.setStorage)(process.env.NEXT_PUBLIC_STORAGE_THEME, theme))();
+  }, [theme]);
   const SwitcherComponent = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_styles.Switcher,
@@ -55,7 +72,10 @@ const ThemeProviderContainer = (props) => {
         content: import_content.Themes[props.theme || defaultTheme],
         Switcher: SwitcherComponent
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { theme: import_content.Themes[props.theme || defaultTheme], children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_registry.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled_components.ThemeProvider, { theme: import_content.Themes[props.theme || defaultTheme], children: [
+        props.children,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global.default, {})
+      ] }) })
     }
   );
 };

package/dist/contexts/theme/index.mjs

@@ -1,13 +1,20 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
 import { Switcher } from "./styles";
 import { Themes } from "./content";
+import { setStorage } from "@gustavo-valsechi/server";
+import StyledComponentsRegistry from "../../contexts/theme/registry";
+import GlobalStyles from "./global.styles";
 const ThemeContext = createContext({});
 const ThemeProviderContainer = (props) => {
   const [theme, setTheme] = useState("light");
   const [defaultTheme] = useState("light");
+  useEffect(() => {
+    if (!theme) return;
+    (async () => await setStorage(process.env.NEXT_PUBLIC_STORAGE_THEME, theme))();
+  }, [theme]);
   const SwitcherComponent = () => {
     return /* @__PURE__ */ jsxs(
       Switcher,
@@ -31,7 +38,10 @@ const ThemeProviderContainer = (props) => {
         content: Themes[props.theme || defaultTheme],
         Switcher: SwitcherComponent
       },
-      children: /* @__PURE__ */ jsx(ThemeProvider, { theme: Themes[props.theme || defaultTheme], children: props.children })
+      children: /* @__PURE__ */ jsx(StyledComponentsRegistry, { children: /* @__PURE__ */ jsxs(ThemeProvider, { theme: Themes[props.theme || defaultTheme], children: [
+        props.children,
+        /* @__PURE__ */ jsx(GlobalStyles, {})
+      ] }) })
     }
   );
 };

package/dist/contexts/theme/registry.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export default function StyledComponentsRegistry({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/contexts/theme/registry.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var registry_exports = {};
+__export(registry_exports, {
+  default: () => StyledComponentsRegistry
+});
+module.exports = __toCommonJS(registry_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_navigation = require("next/navigation");
+var import_styled_components = require("styled-components");
+var import_is_prop_valid = __toESM(require("@emotion/is-prop-valid"));
+function StyledComponentsRegistry({ children }) {
+  const [styledComponentsStyleSheet] = (0, import_react.useState)(() => new import_styled_components.ServerStyleSheet());
+  (0, import_navigation.useServerInsertedHTML)(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: styles });
+  });
+  const menager = (sheet) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled_components.StyleSheetManager,
+      {
+        sheet,
+        enableVendorPrefixes: true,
+        shouldForwardProp: (propName, elementToBeRendered) => {
+          return typeof elementToBeRendered === "string" ? (0, import_is_prop_valid.default)(propName) && !["height", "width"].includes(propName) : true;
+        },
+        children
+      }
+    );
+  };
+  if (typeof window !== "undefined") return menager();
+  return menager(styledComponentsStyleSheet.instance);
+}

package/dist/contexts/theme/registry.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+import isPropValid from "@emotion/is-prop-valid";
+function StyledComponentsRegistry({ children }) {
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return /* @__PURE__ */ jsx(Fragment, { children: styles });
+  });
+  const menager = (sheet) => {
+    return /* @__PURE__ */ jsx(
+      StyleSheetManager,
+      {
+        sheet,
+        enableVendorPrefixes: true,
+        shouldForwardProp: (propName, elementToBeRendered) => {
+          return typeof elementToBeRendered === "string" ? isPropValid(propName) && !["height", "width"].includes(propName) : true;
+        },
+        children
+      }
+    );
+  };
+  if (typeof window !== "undefined") return menager();
+  return menager(styledComponentsStyleSheet.instance);
+}
+export {
+  StyledComponentsRegistry as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gustavo-valsechi/client",
-  "version": "1.3.49",
+  "version": "1.3.50",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.3.0",
+    "@gustavo-valsechi/server": "1.0.5",
     "@hookform/resolvers": "5.2.2",
     "apexcharts": "3.51.0",
     "lodash": "4.17.21",
@@ -53,7 +54,7 @@
     "react-dom": "18.3.1",
     "rimraf": "6.1.0",
     "styled-components": "6.1.12",
-    "tsc-alias": "^1.8.16",
+    "tsc-alias": "1.8.16",
     "typescript": "5.5.4"
   },
   "publishConfig": {