@gustavo-valsechi/client 1.3.0

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

@@ -0,0 +1,159 @@
+"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 `
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  display: flex !important;
+  position: fixed;
+  z-index: ${(props) => (props.toggle ? "9" : "-1")};
+  flex-direction: ${(props) => (props.position === "left" ? "row-reverse" : "row")} !important;
+  transform: ${(props) => (props.toggle ? "translateX(0%)" : "translateX(100%)")};
+  transition: ${(props) => (props.toggle ? ".0s ease .0s" : ".3s ease .3s")};
+
+  .iz-modal-back {
+    width: 100%;
+    height: 100%;
+    background: rgb(0, 0, 0, 0.3);
+    opacity: ${(props) => (props.toggle ? "1" : "0")};
+    transition: ease 0.3s;
+    position: absolute;
+  }
+
+  .iz-modal-container {
+    display: flex;
+    flex-direction: column;
+    height: ${(props) => props.position !== "center" ? "100%" : undefined};
+    width: ${(props) => props.position !== "center" ? "18rem" : undefined};
+    border-radius: ${(props) => props.position === "center" ? "10px" : undefined};
+    max-height: ${(props) => props.position === "center" ? "95%" : "100%"};
+    max-width: ${(props) => props.position === "center" ? "95%" : "100%"};
+    background: ${({ theme }) => theme.primary};
+    transform: ${(props) => props.toggle
+    ? props.position === "right" || props.position === "left"
+        ? "translateX(0rem)"
+        : "translateX(-50%) translateY(50%)"
+    : props.position === "right"
+        ? "translateX(18rem)"
+        : props.position === "left"
+            ? "translateX(-18rem)"
+            : "translateX(-50%) translateY(43%)"};
+    opacity: ${(props) => props.position === "center" && !props.toggle ? "0" : "1"};
+    transition: ease 0.3s;
+    position: absolute;
+
+    ${(props) => (props.position === "right"
+    ? "right: 0;"
+    : props.position === "left"
+        ? "left: 0;"
+        : "left: 50%; bottom: 50%;")}
+
+    @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+      border-radius: ${(props) => props.position === "center" ? "10px 10px 0 0" : undefined};
+      width: ${(props) => props.position !== "center" ? "18rem" : "100%"};
+      max-width: 100%;
+      padding-bottom: 3rem !important;
+
+      transform: ${(props) => props.toggle
+    ? props.position === "right" || props.position === "left"
+        ? "translateX(0rem)"
+        : "translateX(-50%) translateY(0)"
+    : props.position === "right"
+        ? "translateX(18rem)"
+        : props.position === "left"
+            ? "translateX(-18rem)"
+            : "translateX(-50%) translateY(50%)"};
+
+      ${(props) => (props.position === "right"
+    ? "right: 0;"
+    : props.position === "left"
+        ? "left: 0;"
+        : "left: 50%; bottom: 0;")}
+    }
+
+    .iz-modal-header {
+      padding: 1.5rem 2rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgb(0, 0, 0, 0.2);
+
+      .iz-modal-title {
+        color: ${({ theme }) => theme.t6};
+        font-size: 1rem;
+        font-weight: 500;
+
+        i {
+          margin-right: .5rem;
+        }
+
+        span {
+          word-break: break-word;
+        }
+      }
+
+      .fa-xmark {
+        color: ${({ theme }) => theme.t6};
+        margin-left: .5rem;
+        cursor: pointer;
+
+        &:hover {
+          color: ${({ theme }) => theme.t8};
+        }
+      }
+    }
+
+    .iz-modal-content {
+      overflow-x: hidden;
+      overflow-y: overlay;
+      position: relative;
+      height: ${(props) => props.position === "center" ? "initial" : "100%"};
+
+      .iz-modal-close {
+        position: absolute;
+        color: ${(props) => props.light ? "rgb(255, 255, 255, 0.6)" : "rgb(0, 0, 0, 0.6)"};
+        top: ${(props) => props.position === "center" ? "1rem" : "1.5rem"};
+        right: ${(props) => props.position === "center" ? "1rem" : "1.5rem"};
+        width: 1rem;
+        height: 1rem;
+        cursor: pointer;
+        z-index: 9;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+          
+        @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+           display: none;
+        }
+
+        &:hover {
+          color: ${(props) => props.light ? "rgb(255, 255, 255, 1)" : "rgb(0, 0, 0, 1)"};
+        }
+      }
+    }
+
+    .iz-modal-buttons {
+      padding: 1rem 2rem;
+
+      @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+        padding: 1rem 2rem 2rem;
+      }
+
+      button {
+        width: 100%;
+        margin-bottom: .5rem;
+      }
+
+      button:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+`;

package/dist/components/types/table/index.d.ts

@@ -0,0 +1,3 @@
+import { ITable } from "@interfaces";
+export * from "./paginate";
+export declare function Table(props: ITable): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,113 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = Table;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("./styles");
+const bar_1 = require("../loading/bar");
+const paginate_1 = require("./paginate");
+const _contexts_1 = require("@contexts");
+const lodash_1 = __importDefault(require("lodash"));
+const modal_1 = __importDefault(require("./modal"));
+__exportStar(require("./paginate"), exports);
+function Table(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = (0, _contexts_1.useTheme)();
+    const modal = (0, _contexts_1.useModal)();
+    const loading = ((_a = props.loading) === null || _a === void 0 ? void 0 : _a.is) || props.loading;
+    (0, react_1.useEffect)(() => {
+        modal.add({ component: modal_1.default, name: "table" });
+        return () => modal.remove("table");
+    }, []);
+    const onShowLine = (key) => {
+        if (window.innerWidth > Number(lodash_1.default.replace(theme.content.mobileMaxWidth, "px", "")))
+            return;
+        let content = {};
+        lodash_1.default.forEach(props.options, (data, index) => {
+            var _a, _b;
+            const column = ((_a = data.column) === null || _a === void 0 ? void 0 : _a.name) || data.column;
+            const columnName = !lodash_1.default.isString(column) ? props.options.length - 1 === index ? "actions" : "" : column;
+            content[columnName] = columnName === "actions" ? (_b = data.row) === null || _b === void 0 ? void 0 : _b.actions : renderRowContainer(props.content[key], data);
+        });
+        modal.setProps("table", { toggle: true, content });
+    };
+    const renderRowContainer = (data, option) => {
+        var _a, _b, _c, _d;
+        return ((0, jsx_runtime_1.jsx)("div", { className: `
+          iz-table-content 
+          ${((_a = option.row) === null || _a === void 0 ? void 0 : _a.actions) ? "iz-table-action" : ""} 
+          ${((_b = option.row) === null || _b === void 0 ? void 0 : _b.icon) ? "iz-table-identifier" : ""}
+        `, style: lodash_1.default.isFunction((_c = option.row) === null || _c === void 0 ? void 0 : _c.style)
+                ? option.row.style(data, option)
+                : (_d = option.row) === null || _d === void 0 ? void 0 : _d.style, children: renderRowContent(data, option) }));
+    };
+    const renderRowContent = (data, option) => {
+        var _a, _b, _c, _d, _e;
+        if (!!((_a = option.row) === null || _a === void 0 ? void 0 : _a.actions)) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "iz-table-actions", children: lodash_1.default.map((_b = option.row) === null || _b === void 0 ? void 0 : _b.actions, (action, index) => renderButton(action, data, index)) }));
+        }
+        if ((_c = option.row) === null || _c === void 0 ? void 0 : _c.icon) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "iz-table-icon", children: (0, jsx_runtime_1.jsx)("i", { "aria-hidden": true, className: lodash_1.default.isFunction((_d = option.row) === null || _d === void 0 ? void 0 : _d.icon)
+                        ? option.row.icon(data) || "fa-solid fa-circle-user"
+                        : ((_e = option.row) === null || _e === void 0 ? void 0 : _e.icon) || "fa-solid fa-circle-user" }) }));
+        }
+        return renderRowText(data, option);
+    };
+    const renderButton = (action, data, index) => {
+        return ((0, jsx_runtime_1.jsx)("button", { className: `iz-table-button ${lodash_1.default.includes(action.icon, "trash") ? "negative" : ""}`, onClick: () => action.function ? action.function(data) : null, disabled: action.disabled, "data-tooltip": action.tooltip, children: (0, jsx_runtime_1.jsx)("i", { "aria-hidden": true, className: action.icon || "fa-solid fa-eye" }) }, index));
+    };
+    const renderRowText = (data, option) => {
+        const row = option.row || {};
+        const content = data[row.name] || data;
+        let body;
+        while (!body) {
+            if (lodash_1.default.isString(row))
+                body = data[row];
+            if (lodash_1.default.isString(content))
+                body = content;
+            if (lodash_1.default.isFunction(row.mask))
+                body = row.mask(content);
+            if (lodash_1.default.isFunction(row.custom))
+                body = row.custom(content);
+            body = body !== null && body !== void 0 ? body : "---";
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: "iz-table-content-elipse", title: lodash_1.default.isString(body) ? body : "", children: body }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Container, { notFound: !((_b = props.content) === null || _b === void 0 ? void 0 : _b.length) && !props.loading, children: [(0, jsx_runtime_1.jsx)("div", { className: "iz-table-container", children: (0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: lodash_1.default.map(props.options, (option, index) => {
+                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                                    return (0, jsx_runtime_1.jsx)("th", { style: (_a = option.column) === null || _a === void 0 ? void 0 : _a.style, children: (0, jsx_runtime_1.jsx)("div", { className: `iz-table-content ${((_b = option.column) === null || _b === void 0 ? void 0 : _b.action)
+                                                ? `iz-table-action ${((_d = (_c = option.column) === null || _c === void 0 ? void 0 : _c.action) === null || _d === void 0 ? void 0 : _d.position)
+                                                    ? (_f = (_e = option.column) === null || _e === void 0 ? void 0 : _e.action) === null || _f === void 0 ? void 0 : _f.position
+                                                    : ""}`
+                                                : ""}`, children: !!((_g = option.column) === null || _g === void 0 ? void 0 : _g.action)
+                                                ? renderButton(option.column.action)
+                                                : lodash_1.default.isString(((_h = option.column) === null || _h === void 0 ? void 0 : _h.name) || option.column) ? ((_j = option.column) === null || _j === void 0 ? void 0 : _j.name) || option.column : "" }) }, index);
+                                }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: loading
+                                ? lodash_1.default.map(((_c = props.loading) === null || _c === void 0 ? void 0 : _c.items) || [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (data, key) => (0, jsx_runtime_1.jsx)("tr", { children: lodash_1.default.map(props.options, (data, index) => {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(bar_1.LoadingBar, { height: "2.5rem", borderRadius: index === 0
+                                                    ? "5px 0 0 5px"
+                                                    : ((_a = props.options) === null || _a === void 0 ? void 0 : _a.length) - 1 === index
+                                                        ? "0 5px 5px 0"
+                                                        : "0", margin: key === 0 ? "1.5rem 0 0" : ".5rem 0 0" }) }, index));
+                                    }) }, key))
+                                : lodash_1.default.map(props.content, (data, key) => (0, jsx_runtime_1.jsx)("tr", { children: lodash_1.default.map(props.options, (option, index) => ((0, jsx_runtime_1.jsx)("td", { onClick: () => index < 2 ? onShowLine(key) : null, children: renderRowContainer(data, option) }, index))) }, key)) })] }) }), !((_d = props.content) === null || _d === void 0 ? void 0 : _d.length) && !props.loading && ((0, jsx_runtime_1.jsxs)("div", { className: "iz-table-not-found", children: [(0, jsx_runtime_1.jsx)("p", { children: ((_e = props.notFound) === null || _e === void 0 ? void 0 : _e.title) || "Nenhuma campanha encontrado" }), (0, jsx_runtime_1.jsx)("p", { children: ((_f = props.notFound) === null || _f === void 0 ? void 0 : _f.message) || "Envie uma campanha de marketing para aparecer algum registro" })] })), !!props.paginate && (0, jsx_runtime_1.jsx)(paginate_1.Paginate, { ...props.paginate })] }));
+}

package/dist/components/types/table/modal/actions.d.ts

@@ -0,0 +1,10 @@
+declare const actionConfig: {
+    "fa-solid fa-pen-to-square": {
+        label: string;
+    };
+    "fa-solid fa-trash-can": {
+        label: string;
+        color: string;
+    };
+};
+export default actionConfig;

package/dist/components/types/table/modal/actions.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const content_1 = require("@contexts/theme/content");
+const actionConfig = {
+    "fa-solid fa-pen-to-square": { label: "editar" },
+    "fa-solid fa-trash-can": { label: "remover", color: content_1.CommonTheme.negative },
+};
+exports.default = actionConfig;

package/dist/components/types/table/modal/index.d.ts

@@ -0,0 +1,2 @@
+import { IModal } from "@interfaces";
+export default function Modal(props: IModal): import("react/jsx-runtime").JSX.Element;

package/dist/components/types/table/modal/index.js

@@ -0,0 +1,43 @@
+"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.default = Modal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const styles_2 = require("../styles");
+const __1 = require("../../..");
+const _contexts_1 = require("@contexts");
+const lodash_1 = __importDefault(require("lodash"));
+const actions_1 = __importDefault(require("./actions"));
+function Modal(props) {
+    const modal = (0, _contexts_1.useModal)();
+    const content = lodash_1.default.omit(props.content, ["actions"]);
+    const actions = Object.values(lodash_1.default.pick(props.content, ["actions"]))[0];
+    const onClose = () => {
+        modal.setProps("table", { toggle: false });
+    };
+    return ((0, jsx_runtime_1.jsx)(__1.Component, { content: [{
+                type: "Modal",
+                props: {
+                    toggle: props.toggle,
+                    onClose,
+                    children: ((0, jsx_runtime_1.jsx)(styles_2.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [(0, jsx_runtime_1.jsx)("div", { className: "iz-table-modal-title", children: "Conte\u00FAdo" }), (0, jsx_runtime_1.jsx)("div", { className: "iz-table-modal-content", children: (0, jsx_runtime_1.jsx)("ul", { children: lodash_1.default.map(content, (value, key) => (0, jsx_runtime_1.jsxs)("li", { children: [!!key && (0, jsx_runtime_1.jsx)("div", { className: "iz-table-modal-column", children: key }), (0, jsx_runtime_1.jsx)("div", { className: "iz-table-modal-row", children: value })] }, key)) }) }), (0, jsx_runtime_1.jsx)("div", { className: "iz-table-modal-actions", children: (0, jsx_runtime_1.jsx)(__1.Component, { content: lodash_1.default.concat(lodash_1.default.map(actions, (data) => ({
+                                            type: "Button",
+                                            props: {
+                                                ...actions_1.default[data.icon] || {},
+                                                onClick: data.function
+                                            }
+                                        })), {
+                                            type: "Button",
+                                            props: {
+                                                label: "fechar",
+                                                outline: true,
+                                                onClick: onClose
+                                            }
+                                        }) }) })] }) }))
+                }
+            }] }));
+}

package/dist/components/types/table/modal/styles.d.ts

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

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

@@ -0,0 +1,58 @@
+"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.Content = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Content = styled_components_1.default.div `
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    
+    .iz-table-modal-title {
+        font-size: 1.2rem;
+        font-weight: 500;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${({ theme }) => theme.t6};
+    }
+    
+    .iz-table-modal-content {
+        ul {
+            li {
+                border-bottom: solid 1px ${({ theme }) => theme.t05};
+                padding: .8rem 0;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 1rem;
+                font-size: .8rem;
+                color: ${({ theme }) => theme.t6};
+
+                &:last-child {
+                    border-bottom: none;
+                }
+                
+                .iz-table-modal-column {
+                    background: ${({ theme }) => theme.t05};
+                    padding: .5rem .8rem;
+                    font-weight: 600;
+                    border-radius: 5px;
+                }
+                
+                .iz-table-modal-row {
+                    text-align: right;
+                }
+            }
+        }
+    }
+    
+    .iz-table-modal-actions {
+        margin-top: 1rem;
+    }
+`;

package/dist/components/types/table/paginate/index.d.ts

@@ -0,0 +1,2 @@
+import { IPaginate } from "@interfaces";
+export declare function Paginate(props: IPaginate): false | import("react/jsx-runtime").JSX.Element;

package/dist/components/types/table/paginate/index.js

@@ -0,0 +1,36 @@
+"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.Paginate = Paginate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const lodash_1 = __importDefault(require("lodash"));
+function Paginate(props) {
+    const pages = () => {
+        const offset = Number(props.page.value) - 4;
+        let page = offset > 0 ? offset + 1 : 1;
+        let pages = [];
+        while (Number(props.total) >= page) {
+            pages.push(page);
+            page++;
+        }
+        pages = lodash_1.default.slice(pages, 0, 5);
+        if ((Number(props.page.value) + 1) > 5)
+            pages = lodash_1.default.concat(["1.."], pages);
+        if (Number(props.total) > 6 && (Number(props.page.value) + 1) < Number(props.total))
+            return lodash_1.default.concat(pages, `..${props.total}`);
+        return pages;
+    };
+    return Number(props.total) > 1 && ((0, jsx_runtime_1.jsxs)(styles_1.Container, { children: [(0, jsx_runtime_1.jsx)("div", { className: "paginate back", onClick: () => props.page.set
+                    ? props.page.set(props.page.value
+                        ? props.page.value - 1
+                        : props.page.value)
+                    : null, children: (0, jsx_runtime_1.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-left" }) }), lodash_1.default.map(pages(), (page, index) => (0, jsx_runtime_1.jsx)("div", { className: "paginate page", "data-current": String(props.page.value === (Number(lodash_1.default.replace(page, /\D/g, "")) - 1)), onClick: () => props.page.set ? props.page.set(Number(lodash_1.default.replace(page, /\D/g, "")) - 1) : null, children: page }, index)), (0, jsx_runtime_1.jsx)("div", { className: "paginate next", onClick: () => props.page.set
+                    ? props.page.set(props.page.value !== (props.total - 1)
+                        ? props.page.value + 1
+                        : props.page.value)
+                    : null, children: (0, jsx_runtime_1.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-right" }) })] }));
+}

package/dist/components/types/table/paginate/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: any;

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

@@ -0,0 +1,42 @@
+"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 `
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1.5rem;
+
+    .paginate {
+        font-size: .8rem;
+        font-weight: 500;
+        height: 1.5rem;
+        padding: 0 .6rem;
+        border-radius: 1rem;
+        transition: ease .3s;
+        color: ${({ theme }) => theme.t6};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &[data-current="true"] {
+            background: ${({ theme }) => theme.tertiary};
+            color: ${({ theme }) => theme.secondary};
+
+            &:hover {
+                background: ${({ theme }) => theme.tertiary};
+            }
+        }
+
+        &:hover {
+            background: ${({ theme }) => theme.t05};
+        }
+    }
+`;

package/dist/components/types/table/styles.d.ts

@@ -0,0 +1,5 @@
+interface IProps {
+    notFound?: boolean;
+}
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IProps>> & string;
+export {};