pixelize-design-library 2.2.198 → 2.3.1-beta.1

package/dist/Pages/table.js

@@ -0,0 +1,174 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExample = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var Table_1 = __importDefault(require("../Components/Table/Table"));
+var Button_1 = __importDefault(require("../Components/Button/Button"));
+// ---------------------------------------------------------------------------
+// Demo data
+// ---------------------------------------------------------------------------
+var STATUSES = ["Working on it", "Done", "Stuck", "Not started"];
+var PRIORITIES = ["High", "Medium", "Low"];
+var OWNERS = ["Alex Rowe", "Jamie Soto", "Priya Nair", "Chen Wei"];
+var STATUS_COLORS = {
+    Done: "#23b85c",
+    "Working on it": "#f59e0b",
+    Stuck: "#e2483d",
+    "Not started": "#7d6ea0",
+};
+var PRIORITY_COLORS = {
+    High: "#e2483d",
+    Medium: "#f59e0b",
+    Low: "#23b85c",
+};
+var initials = function (name) {
+    return name.split(" ").map(function (p) { return p[0]; }).slice(0, 2).join("").toUpperCase();
+};
+// ~600 rows so grouped virtualization is exercised. NOTE: expandable `content`
+// is intentionally omitted here — expandable rows have variable height and
+// disable virtualization (use a smaller dataset if you want expandable rows).
+var makeData = function () {
+    return Array.from({ length: 600 }, function (_, i) { return ({
+        id: i + 1,
+        name: "Deal ".concat(i + 1),
+        status: STATUSES[i % STATUSES.length],
+        priority: PRIORITIES[i % PRIORITIES.length],
+        owner: OWNERS[i % OWNERS.length],
+        amount: 500 + ((i * 137) % 9500),
+        date: new Date(2026, i % 12, ((i * 7) % 27) + 1).toISOString().slice(0, 10),
+        // Row actions (auto-renders the kebab action column)
+        onLink: function (row) { return console.log("view", row.id); },
+        onEdit: function (row) { return console.log("edit", row.id); },
+        onDelete: function (row) { return console.log("delete", row.id); },
+    }); });
+};
+var columns = [
+    { label: "Name", id: "name", isFreeze: true, isSort: true, isSearch: true },
+    { label: "Status", id: "status", type: "status", statusColors: STATUS_COLORS },
+    { label: "Priority", id: "priority", type: "status", statusColors: PRIORITY_COLORS },
+    {
+        label: "Owner",
+        id: "owner",
+        node: function (row) { return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2 },
+            react_1.default.createElement(react_2.Box, { boxSize: "1.5rem", borderRadius: "full", bg: "primary.opacity.16", color: "primary.600", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.625rem", fontWeight: 700 }, initials(row.owner)),
+            react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem" }, row.owner))); },
+    },
+    { label: "Amount", id: "amount", isSort: true, node: function (row) { return "$".concat(row.amount.toLocaleString()); } },
+    { label: "Date", id: "date", isSort: true },
+];
+var users = [
+    { id: "1", label: "User 1" },
+    { id: "2", label: "User 2" },
+    { id: "3", label: "User 3" },
+];
+var defaultSections = [
+    {
+        id: "system",
+        label: "System Defined Filters",
+        initiallyExpanded: true,
+        items: [
+            { id: "touched", label: "Touched Records", type: "text" },
+            { id: "untouched", label: "Untouched Records", type: "select", option: users },
+            { id: "record_action", label: "Record Action", type: "user", option: users },
+            { id: "latest_email", label: "Latest Email Status", type: "date" },
+        ],
+    },
+    {
+        id: "fields",
+        label: "Filter By Fields",
+        radio: true,
+        items: [
+            { id: "status", label: "Status", type: "select", option: STATUSES.map(function (s) { return ({ id: s, label: s }); }) },
+            { id: "owner", label: "Owner" },
+        ],
+    },
+];
+var TableExample = function () {
+    var data = (0, react_1.useState)(makeData)[0];
+    var _a = (0, react_1.useState)(true), grouped = _a[0], setGrouped = _a[1];
+    var _b = (0, react_1.useState)(false), infinite = _b[0], setInfinite = _b[1];
+    var _c = (0, react_1.useState)(50), loadedCount = _c[0], setLoadedCount = _c[1];
+    var _d = (0, react_1.useState)(false), isLoadingMore = _d[0], setIsLoadingMore = _d[1];
+    var _e = (0, react_1.useState)(false), isLoading = _e[0], setIsLoading = _e[1];
+    var _f = (0, react_1.useState)(false), isFilterSidebar = _f[0], setIsFilterSidebar = _f[1];
+    var _g = (0, react_1.useState)({}), selected = _g[0], setSelected = _g[1];
+    var reload = function () {
+        setIsLoading(true);
+        setTimeout(function () { return setIsLoading(false); }, 600);
+    };
+    // Infinite-scroll simulation: reveal more rows from `data` on demand.
+    var displayData = (0, react_1.useMemo)(function () { return (infinite ? data.slice(0, loadedCount) : data); }, [infinite, data, loadedCount]);
+    var hasMore = loadedCount < data.length;
+    // Infinite scroll reuses onPagination: append the next page on "next".
+    var handlePagination = function (_page, size, _record, direction) {
+        if (!infinite || direction !== "next" || isLoadingMore || !hasMore)
+            return;
+        setIsLoadingMore(true);
+        setTimeout(function () {
+            setLoadedCount(function (c) { return Math.min(c + (size || 20), data.length); });
+            setIsLoadingMore(false);
+        }, 700);
+    };
+    var groupColors = (0, react_1.useMemo)(function () { return STATUS_COLORS; }, []);
+    return (react_1.default.createElement(react_2.Box, null,
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, mb: 3, flexWrap: "wrap" },
+            react_1.default.createElement(Button_1.default, { size: "xs", variant: grouped && !infinite ? "gradient" : "outline", colorScheme: "gray", isDisabled: infinite, onClick: function () { return setGrouped(function (g) { return !g; }); }, label: grouped ? "Grouped by status" : "Group by status" }),
+            react_1.default.createElement(Button_1.default, { size: "xs", variant: infinite ? "gradient" : "outline", colorScheme: "gray", onClick: function () { setInfinite(function (v) { return !v; }); setLoadedCount(50); }, label: infinite ? "Infinite scroll: on" : "Infinite scroll" }),
+            react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", onClick: reload, label: "Reload" })),
+        react_1.default.createElement(Table_1.default, { columns: columns, data: displayData, isCheckbox: true, density: "compact", groupBy: !infinite && grouped ? "status" : undefined, groupColors: groupColors, onAddItem: function (group) { return console.log("add item to", group); }, isLoading: isLoading, loadingSkeletonRows: 6, isPagination: true, paginationMode: infinite ? "server" : "client", totalRecords: data.length, infiniteScroll: infinite, onPagination: handlePagination, hasMore: hasMore, isLoadingMore: isLoadingMore, noOfRowsPerPage: 20, onSelection: function (sel) { return console.log("selection", sel); }, onRowClick: function (row, header) { return console.log("row click", row, header); }, onGlobalSearch: function (v) { return console.log("search", v); }, isTableSettings: true, 
+            // emptyState={{ title: "No deals yet", description: "Create your first deal to get started." }}
+            headerActions: {
+                isDelete: { enabled: true, onClick: function (s) { return console.log("delete", s); } },
+                isUpdate: { enabled: true, onClick: function (s) { return console.log("update", s); } },
+            }, filterSidebar: {
+                isFilterSidebar: isFilterSidebar,
+                filterSidebarToggle: function () { return setIsFilterSidebar(function (v) { return !v; }); },
+                sidebarOptions: defaultSections,
+                onApply: function (filters) { console.log("apply", filters); setSelected(filters); },
+                onClearAllHandler: function () { return setSelected({}); },
+                selected: selected,
+            }, tableSettings: {
+                filters: ["status", "priority", "owner"],
+                filterSelected: ["status"],
+                onFilterSelection: function (f) { return console.log("settings filters", f); },
+            } })));
+};
+exports.TableExample = TableExample;
+exports.default = exports.TableExample;

package/dist/Pages/textArea.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TextAreaPage: () => React.JSX.Element;
+export default TextAreaPage;

package/dist/Pages/textArea.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var InputTextArea_1 = __importDefault(require("../Components/InputTextArea/InputTextArea"));
+var TextAreaPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(InputTextArea_1.default, { label: "hello", helperText: "Hello", 
+            // errorMessage="Required"
+            // error={true}
+            rows: 5 })));
+};
+exports.default = TextAreaPage;

package/dist/Pages/timeline.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TimelinePage: () => React.JSX.Element;
+export default TimelinePage;

package/dist/Pages/timeline.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Timeline_1 = __importDefault(require("../Components/Timeline/Timeline"));
+var TimelinePage = function () {
+    var timeline = [
+        {
+            logs_id: 1,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723104998797,
+            changes: null,
+        },
+        {
+            logs_id: 2,
+            title: "Updated",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723105040247,
+            changes: null,
+        },
+        {
+            logs_id: 10,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: null,
+        },
+        {
+            logs_id: 3,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105099207,
+            changes: null,
+        },
+        {
+            logs_id: 7,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105603033,
+            changes: null,
+        },
+        {
+            logs_id: 8,
+            title: "Delete",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: '{"shipping_code":{"original":null,"updated":"aaa"},"shipping_country":{"original":null,"updated":"QQdd"},"description":{"original":null,"updated":"ssAA"},"profile":{"updated":"profile updated"}}',
+        },
+    ];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Timeline_1.default, { timelineEvents: timeline })));
+};
+exports.default = TimelinePage;

package/dist/Pages/tooltip.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TooltipPage: () => React.JSX.Element;
+export default TooltipPage;

package/dist/Pages/tooltip.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ToolTip_1 = __importDefault(require("../Components/ToolTip/ToolTip"));
+var TooltipPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true }, "hai")));
+};
+exports.default = TooltipPage;

package/dist/Pages/toster.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TosterPage: () => React.JSX.Element;
+export default TosterPage;

package/dist/Pages/toster.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Button_1 = __importDefault(require("../Components/Button/Button"));
+var Toaster_1 = require("../Components/Toaster/Toaster");
+var TosterPage = function () {
+    var showToast = (0, Toaster_1.useToaster)().showToast;
+    var handleOnclick = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "success",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick1 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "error",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick2 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "warning",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick3 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "info",
+        });
+        //setIsOpen(true);
+    };
+    var handleOnclick4 = function () {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "loading",
+        });
+        //setIsOpen(true);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick1, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick2, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick3, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Success", onClick: handleOnclick4, variant: "solid", size: "md", width: 100 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        " ",
+        react_1.default.createElement("br", null),
+        " ",
+        react_1.default.createElement("br", null)));
+};
+exports.default = TosterPage;

package/dist/Pages/verifyEmail.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const VerifyEmailPage: () => React.JSX.Element;
+export default VerifyEmailPage;

package/dist/Pages/verifyEmail.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var VerifyEmailOtp_1 = __importDefault(require("../Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
+var VerifyEmailPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(VerifyEmailOtp_1.default, { resendMail: function () {
+                console.log("hello");
+            }, onChange: function (val) {
+                console.log("onchange", val);
+            }, onComplete: function (val) {
+                console.log("onComplete", val);
+            }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify", styles: { width: "70%", padding: "2px" } })));
+};
+exports.default = VerifyEmailPage;