@gustavo-valsechi/client 1.3.0

package/dist/components/types/table/styles.js

@@ -0,0 +1,268 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Container = styled_components_1.default.div `
+    .iz-table-container {
+        overflow-x: auto;
+
+        &::-webkit-scrollbar {
+            width: 0;
+            height: ${(props) => (props.notFound ? "0px" : "5px")};
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgb(255, 255, 255, 0.1);
+            border-radius: 5px;
+        }
+
+        table {
+            font-size: .8rem;
+            border: 0;
+            color: ${({ theme }) => theme.t6};
+            overflow-x: ${(props) => (props.notFound ? "auto" : "hidden")};
+            width: 100%;
+            border-spacing: 0;
+
+            .iz-table-content {
+                background: ${({ theme }) => theme.t05};
+                height: 2.7rem;
+                padding: 0.8rem 1.3rem;
+                margin-top: 0.5rem;
+                white-space: nowrap;
+                display: flex;
+                align-items: center;
+                position: relative;
+                transition: ease 0.3s;
+
+                &.iz-table-identifier {
+                    padding: .8rem .5rem !important;
+                }
+
+                &.iz-table-action {
+                    display: flex;
+                    justify-content: flex-end;
+                    padding: .8rem .5rem !important;
+                    position: relative;
+
+                    &.left {
+                        justify-content: flex-start;
+                    }
+
+                    &.center {
+                        justify-content: center;
+                    }
+
+                    .iz-table-actions {
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                        gap: .5rem;
+                    }
+
+                    .iz-table-button {
+                        min-width: 1.8rem;
+                        height: 1.8rem;
+                        border-radius: 5px;
+                        border: 1px solid ${({ theme }) => theme.t05};
+                        background: ${({ theme }) => theme.t05};
+                        color: ${({ theme }) => theme.t6};
+                        cursor: pointer;
+                        transition: ease 0.3s, width 1s, position 0s;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: .5rem;
+                        font-weight: 500;
+                        text-transform: lowercase;
+                        padding: 0 .5rem;
+                        position: relative;
+
+                        &:disabled {
+                            pointer-events: none;
+                            opacity: .6;
+                        }
+
+                        &:hover {
+                            opacity: .9;
+
+                            &.negative {
+                                color: ${({ theme }) => theme.primary};
+                                background: ${({ theme }) => theme.negative};
+                            }
+                        }
+                    }
+                }
+            }
+
+            thead {
+                tr {
+                    th {
+                        border: none;
+                        padding: 0;
+                        text-transform: uppercase;
+                        font-weight: 500;
+                        letter-spacing: 2px;
+                        position: relative;
+                        height: 2.5rem;
+
+                        @media (max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+                            .iz-table-content {
+                                font-size: .7rem;
+                            }
+                        }
+
+                        @media (max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+                            display: none;
+
+                            &:nth-child(1), &:nth-child(2), &:last-child {
+                                display: table-cell;
+                            }
+                        }
+
+                        &:first-child {
+                            .iz-table-content {
+                                border-top-left-radius: 5px;
+                                border-bottom-left-radius: 5px;
+                            }
+                        }
+
+                        &:last-child {
+                            .iz-table-content {
+                                border-top-right-radius: 5px;
+                                border-bottom-right-radius: 5px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            tbody {
+                tr {
+                    &:hover {
+                        td {
+                            .iz-table-content {
+                                background: ${({ theme }) => theme.tertiary};
+                            }
+                        }
+                    }
+
+                    td {
+                        border: none;
+                        padding: 0;
+                        font-weight: 400;
+                        position: relative;
+
+                        @media (max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+                            display: none;
+
+                            &:nth-child(1), &:nth-child(2), &:last-child {
+                                display: table-cell;
+                            }
+                        }
+
+                        &:first-child {
+                            .iz-table-content {
+                                border-top-left-radius: 5px;
+                                border-bottom-left-radius: 5px;
+                            }
+                        }
+
+                        &:last-child {
+                            .iz-table-content {
+                                border-top-right-radius: 5px;
+                                border-bottom-right-radius: 5px;
+                            }
+                        }
+
+                        .iz-table-content-elipse {
+                            position: absolute;
+                            left: 0;
+                            right: 0;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            padding: 0.8rem 1.3rem;
+                        }
+                    }
+
+                    &:first-child {
+                        td {
+                            .iz-table-content {
+                                margin-top: 1.5rem;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .iz-table-icon {
+        width: 1.8rem;
+        height: 1.8rem;
+        background: ${({ theme }) => theme.t08};
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        i {
+            font-size: .9rem;
+        }
+    }
+    
+    .iz-table-not-found {
+        border-radius: 5px;
+        background: ${({ theme }) => theme.t05};
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 1.5rem 0;
+        padding: 2.5rem;
+        width: 100%;
+
+        p {
+            color: ${({ theme }) => theme.t6};
+            text-align: center;
+        }
+
+        p:first-child {
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+
+            @media (max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+                font-size: 1rem;
+            }
+        }
+
+        p:last-child {
+            font-size: 0.8rem;
+            max-width: 50rem;
+            margin-top: 0;
+            margin-bottom: 0;
+
+            @media (max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+                font-size: 0.7rem;
+            }
+        }
+    }
+`;

package/dist/contexts/icon/assets/brands/index.d.ts

@@ -0,0 +1,2 @@
+declare const brands: Record<string, string>;
+export default brands;

package/dist/contexts/icon/assets/brands/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const req = require.context("./", false, /\.svg$/);
+const brands = {};
+req.keys().forEach((key) => {
+    const name = key.replace("./", "").replace(".svg", "");
+    brands[name] = req(key).default;
+});
+exports.default = brands;

package/dist/contexts/icon/assets/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    brands: Record<string, string>;
+    regular: Record<string, string>;
+    solid: Record<string, string>;
+};
+export default _default;

package/dist/contexts/icon/assets/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const brands_1 = __importDefault(require("./brands"));
+const regular_1 = __importDefault(require("./regular"));
+const solid_1 = __importDefault(require("./solid"));
+exports.default = {
+    brands: brands_1.default,
+    regular: regular_1.default,
+    solid: solid_1.default
+};

package/dist/contexts/icon/assets/regular/index.d.ts

@@ -0,0 +1,2 @@
+declare const regular: Record<string, string>;
+export default regular;

package/dist/contexts/icon/assets/regular/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const req = require.context("./", false, /\.svg$/);
+const regular = {};
+req.keys().forEach((key) => {
+    const name = key.replace("./", "").replace(".svg", "");
+    regular[name] = req(key).default;
+});
+exports.default = regular;

package/dist/contexts/icon/assets/solid/index.d.ts

@@ -0,0 +1,2 @@
+declare const solid: Record<string, string>;
+export default solid;

package/dist/contexts/icon/assets/solid/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const req = require.context("./", false, /\.svg$/);
+const solid = {};
+req.keys().forEach((key) => {
+    const name = key.replace("./", "").replace(".svg", "");
+    solid[name] = req(key).default;
+});
+exports.default = solid;

package/dist/contexts/icon/index.d.ts

@@ -0,0 +1,4 @@
+import { IIconProvider } from "@interfaces";
+declare const IconProviderContainer: ({ children }: IIconProvider) => import("react/jsx-runtime").JSX.Element;
+declare const useIcon: () => any;
+export { IconProviderContainer as IconProvider, useIcon };

package/dist/contexts/icon/index.js

@@ -0,0 +1,82 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIcon = exports.IconProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const theme_1 = require("../theme");
+const lodash_1 = __importDefault(require("lodash"));
+const assets_1 = __importDefault(require("./assets"));
+const IconContext = (0, react_1.createContext)({});
+const IconProviderContainer = ({ children }) => {
+    const { content } = (0, theme_1.useTheme)();
+    const [isClient, setIsClient] = (0, react_1.useState)(false);
+    const [matches, setMatches] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const firstMediaQuery = window.matchMedia(`(max-width: ${content.mobileMaxWidth})`);
+        const secoundMediaQuery = window.matchMedia(`(max-width: ${content.mobileMinWidth})`);
+        const firstHandler = (event) => setMatches(event.matches ? 1 : 0);
+        const secoundHandler = (event) => setMatches(event.matches ? 2 : 1);
+        if (firstMediaQuery.matches)
+            setMatches(1);
+        if (secoundMediaQuery.matches)
+            setMatches(2);
+        firstMediaQuery.addEventListener("change", firstHandler);
+        secoundMediaQuery.addEventListener("change", secoundHandler);
+        return () => {
+            firstMediaQuery.removeEventListener("change", firstHandler);
+            secoundMediaQuery.removeEventListener("change", secoundHandler);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!isClient)
+            return;
+        const processElement = (element) => {
+            var _a, _b, _c, _d, _e;
+            const name = element.getAttribute("class");
+            if (!name)
+                return;
+            const icon = lodash_1.default.split(lodash_1.default.replace(name, /fa-/g, ""), " ");
+            if (!icon.length)
+                return;
+            let svg = (_d = (_b = (_a = assets_1.default[icon[0]]) === null || _a === void 0 ? void 0 : _a[icon[1]]) !== null && _b !== void 0 ? _b : (_c = assets_1.default["solid"]) === null || _c === void 0 ? void 0 : _c[icon[0]]) !== null && _d !== void 0 ? _d : "";
+            if (!svg)
+                return;
+            svg = svg.replace(/fill=".*?"/g, 'fill="currentColor"');
+            const styles = window.getComputedStyle(element);
+            const size = Number((_e = lodash_1.default.split(styles.fontSize, "px")) === null || _e === void 0 ? void 0 : _e[0]) + 2;
+            element.style.width = `${size}px`;
+            element.style.height = `${size}px`;
+            element.textContent = "";
+            element.innerHTML = svg;
+        };
+        document.querySelectorAll("i").forEach((el) => processElement(el));
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === 1) {
+                        const el = node;
+                        if (el.tagName.toLowerCase() === "i")
+                            processElement(el);
+                        el.querySelectorAll("i").forEach((child) => processElement(child));
+                    }
+                });
+            });
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        return () => observer.disconnect();
+    }, [isClient, matches]);
+    return ((0, jsx_runtime_1.jsx)(IconContext.Provider, { value: {}, children: children }));
+};
+exports.IconProvider = IconProviderContainer;
+const useIcon = () => (0, react_1.useContext)(IconContext);
+exports.useIcon = useIcon;

package/dist/contexts/icon/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/contexts/icon/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Container = styled_components_1.default.div `
+  
+`;

package/dist/contexts/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./icon";
+export * from "./theme";
+export * from "./tooltip";
+export * from "./modal";

package/dist/contexts/index.js

@@ -0,0 +1,21 @@
+"use client";
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./icon"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./tooltip"), exports);
+__exportStar(require("./modal"), exports);

package/dist/contexts/modal/index.d.ts

@@ -0,0 +1,4 @@
+import { IModalProvider, IModalContext } from "@interfaces";
+declare const ModalProviderContainer: ({ children }: IModalProvider) => import("react/jsx-runtime").JSX.Element;
+declare const useModal: () => IModalContext;
+export { ModalProviderContainer as ModalProvider, useModal };

package/dist/contexts/modal/index.js

@@ -0,0 +1,53 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModal = exports.ModalProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const navigation_1 = require("next/navigation");
+const styles_1 = require("./styles");
+const lodash_1 = __importDefault(require("lodash"));
+const ModalContext = (0, react_1.createContext)({});
+const memory = [];
+const ModalProviderContainer = ({ children }) => {
+    const pathname = (0, navigation_1.usePathname)();
+    const [modals, setModals] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        setModals(lodash_1.default.filter(memory, (modal) => modal.type === "fixed"));
+    }, [pathname]);
+    const add = (modal) => {
+        if (lodash_1.default.some(memory, (data) => data.name === modal.name))
+            return;
+        memory.push(modal);
+        setModals(memory);
+    };
+    const remove = (modalName) => {
+        const index = lodash_1.default.findIndex(memory, (data) => data.name === modalName);
+        memory.slice(index, 1);
+        setModals(memory);
+    };
+    const setProps = (modalName, props) => {
+        const index = lodash_1.default.findIndex(modals, (modal) => modal.name === modalName);
+        const content = lodash_1.default.find(modals, (modal) => modal.name === modalName);
+        if (!content)
+            return;
+        let settedModals = [...modals];
+        settedModals.splice(index, 1, { ...content, props: { ...content.props, ...props } });
+        setModals(settedModals);
+    };
+    return ((0, jsx_runtime_1.jsxs)(ModalContext.Provider, { value: {
+            value: modals,
+            add,
+            remove,
+            setProps
+        }, children: [(0, jsx_runtime_1.jsx)(styles_1.Container, { children: lodash_1.default.map(modals, (modal, index) => {
+                    const ModalComponent = modal.component;
+                    return (0, jsx_runtime_1.jsx)(ModalComponent, { ...modal.props }, index);
+                }) }), children] }));
+};
+exports.ModalProvider = ModalProviderContainer;
+const useModal = () => (0, react_1.useContext)(ModalContext);
+exports.useModal = useModal;

package/dist/contexts/modal/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/contexts/modal/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Container = styled_components_1.default.div `
+  
+`;

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

@@ -0,0 +1,3 @@
+import { ICommonTheme, ITheme } from "@interfaces";
+export declare const CommonTheme: ICommonTheme;
+export declare const Themes: ITheme;

package/dist/contexts/theme/content.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Themes = exports.CommonTheme = void 0;
+exports.CommonTheme = {
+    secondary: "#5869da",
+    tertiary: "#629dfd33",
+    positive: "#65c965",
+    negative: "#FF334E",
+    mobileMaxWidth: "650px",
+    mobileMinWidth: "315px",
+};
+exports.Themes = {
+    light: {
+        primary: "#ffffff",
+        reverse: "#353535",
+        tooltip: "#f2f2f2",
+        t8: "#000000cc",
+        t7: "#000000b3",
+        t6: "#00000099",
+        t5: "#00000080",
+        t4: "#00000066",
+        t3: "#0000004d",
+        t2: "#00000033",
+        t1: "#0000001a",
+        t08: "#00000014",
+        t05: "#0000000d",
+        t03: "#00000007",
+        t02: "#00000005",
+        t01: "#00000002",
+        lgrad: `linear-gradient(
+            to right, 
+            #dadef7 0%, 
+            #dee2f8 5%, 
+            #e2e5f9 10%, 
+            #e6e9fa 20%, 
+            #eaedfb 30%, 
+            #eff0fb 60%, 
+            #f3f4fc 80%, 
+            #f7f8fd 90%, 
+            #fbfbfe 100%
+        )`,
+        maingrad: "linear-gradient(330deg, #b9c0ff7a 0%, #ffffff 100%)",
+        ...exports.CommonTheme,
+    },
+    dark: {
+        primary: "#333333",
+        reverse: "#b45252",
+        tooltip: "#3d3d3d",
+        t8: "#ffffffcc",
+        t7: "#ffffffb3",
+        t6: "#ffffff99",
+        t5: "#ffffff80",
+        t4: "#ffffff66",
+        t3: "#ffffff4d",
+        t2: "#ffffff33",
+        t1: "#ffffff1a",
+        t08: "#ffffff14",
+        t05: "#ffffff0d",
+        t03: "#ffffff07",
+        t02: "#ffffff05",
+        t01: "#ffffff02",
+        lgrad: `linear-gradient(
+            to right, 
+            #3d485c 0%, 
+            #3c4657 5%, 
+            #3b4353 10%, 
+            #3a414e 20%, 
+            #393f4a 30%, 
+            #373c45 60%, 
+            #363a41 80%, 
+            #35383c 90%, 
+            #343538 100%
+        )`,
+        maingrad: "linear-gradient(330deg, #1d1e27 0%, #333333 100%)",
+        ...exports.CommonTheme,
+    }
+};

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

@@ -0,0 +1,4 @@
+import { IThemeProvider, IThemeContext } from "@interfaces";
+declare const ThemeProviderContainer: (props: IThemeProvider) => import("react/jsx-runtime").JSX.Element;
+declare const useTheme: () => IThemeContext;
+export { ThemeProviderContainer as ThemeProvider, useTheme };

package/dist/contexts/theme/index.js

@@ -0,0 +1,32 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.ThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = require("styled-components");
+const styles_1 = require("./styles");
+const content_1 = require("./content");
+const tools_1 = require("@gustavo-valsechi/server/tools");
+const ThemeContext = (0, react_1.createContext)({});
+const ThemeProviderContainer = (props) => {
+    const [theme, setTheme] = (0, react_1.useState)("light");
+    const [defaultTheme] = (0, react_1.useState)("light");
+    (0, react_1.useEffect)(() => {
+        if (!theme)
+            return;
+        (async () => await (0, tools_1.setStorage)(process.env.NEXT_PUBLIC_STORAGE_THEME, theme))();
+    }, [theme]);
+    const SwitcherComponent = () => {
+        return ((0, jsx_runtime_1.jsxs)(styles_1.Switcher, { onClick: () => setTheme(theme === "light" ? "dark" : "light"), "data-theme": theme || defaultTheme, children: [(0, jsx_runtime_1.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-moon" }), (0, jsx_runtime_1.jsx)("div", { className: "switcher", children: (0, jsx_runtime_1.jsx)("div", {}) }), (0, jsx_runtime_1.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-sun" })] }));
+    };
+    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: {
+            theme: props.theme || defaultTheme,
+            setTheme,
+            content: content_1.Themes[props.theme || defaultTheme],
+            Switcher: SwitcherComponent
+        }, children: (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, { theme: content_1.Themes[props.theme || defaultTheme], children: props.children }) }));
+};
+exports.ThemeProvider = ThemeProviderContainer;
+const useTheme = () => (0, react_1.useContext)(ThemeContext);
+exports.useTheme = useTheme;

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

@@ -0,0 +1 @@
+export declare const Switcher: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;