pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Pages/productCaard.js

@@ -0,0 +1,306 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ProductCard from "../Components/ProductCard/ProductCard";
+import { SimpleGrid } from "@chakra-ui/react";
+const productCaard = () => {
+    const Products = [
+        {
+            "productId": 12,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [],
+            "rating": 1,
+            "reviews": 0,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 9,
+                    "order": 4,
+                    "isImage": true
+                },
+                // {
+                //   "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                //   "imageId": 10,
+                //   "order": 5
+                // }
+            ],
+            "options": [
+                {
+                    "var_id": 6,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 800,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 2
+                },
+                // {
+                //   "var_id": 7,
+                //   "unit": 2,
+                //   "label": "hho",
+                //   "offer": 5,
+                //   "price": 600,
+                //   "weight": 200,
+                //   "offerPrice": "475",
+                //   "stocks": 5
+                // },
+                // {
+                //   "var_id": 8,
+                //   "unit": 2,
+                //   "label": "hho",
+                //   "offer": 5,
+                //   "price": 400,
+                //   "weight": 200,
+                //   "offerPrice": "475",
+                //   "stocks": 5
+                // },
+            ]
+        },
+        {
+            "productId": 13,
+            "label": "hellovideo",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hwnjncdsncidjncsdncsjncjnvjnvjsnvjnsdvkjnsdvkjnsdvkjnsdvkjn", "jbjkbjbj"
+            ],
+            "rating": 2,
+            "reviews": 0,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 9,
+                    "order": 4,
+                    "isImage": true
+                }, {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 10,
+                    "order": 5,
+                    "isImage": false
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 6,
+                    "unit": 2,
+                    "label": "hhhgbjhbjhbjhbkjbkjnkjnkjbkjbkjbkjbjhvjhvbjhvjhvjhvjhvo",
+                    "offer": 5,
+                    "price": 800,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 2
+                },
+                {
+                    "var_id": 7,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 600,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 8,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 400,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+            ]
+        },
+        {
+            "productId": 14,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hw", "new"
+            ],
+            "rating": 3,
+            "reviews": 0,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 9,
+                    "order": 4,
+                    "isImage": true
+                }, {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 10,
+                    "order": 5,
+                    "isImage": true
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 6,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 800,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 2
+                },
+                {
+                    "var_id": 7,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 600,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 8,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 400,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+            ]
+        },
+        {
+            "productId": 15,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hw", "new", "featured"
+            ],
+            "rating": 4.5,
+            "reviews": 120,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 11,
+                    "order": 4,
+                    "isImage": true
+                },
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 12,
+                    "order": 5,
+                    "isImage": true
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 9,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 900,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 10,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 700,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 4
+                },
+                {
+                    "var_id": 11,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 200,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 0
+                },
+            ]
+        },
+        {
+            "productId": 16,
+            "label": "hello",
+            "description": "hh",
+            "batch": {
+                "color": "red",
+                "label": "nh"
+            },
+            "tags": [
+                "hw", "new", "featured", "popular"
+            ],
+            "rating": 4,
+            "reviews": 120,
+            "images": [
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376124/main_sweets/1763376123548-Mothichoor%20%281%29.jpg",
+                    "imageId": 11,
+                    "order": 4,
+                    "isImage": true
+                },
+                {
+                    "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                    "imageId": 12,
+                    "order": 5,
+                    "isImage": true
+                }
+            ],
+            "options": [
+                {
+                    "var_id": 9,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 900,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 5
+                },
+                {
+                    "var_id": 10,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 700,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 4
+                },
+                {
+                    "var_id": 11,
+                    "unit": 2,
+                    "label": "hho",
+                    "offer": 5,
+                    "price": 200,
+                    "weight": 200,
+                    "offerPrice": "475",
+                    "stocks": 0
+                },
+            ]
+        }
+    ];
+    return (_jsx(SimpleGrid, { columns: { base: 2, md: 3, lg: 4 }, spacing: 6, children: Products.map((product) => (_jsx(ProductCard, { id: product.productId, label: product.label, productImage: product.images, description: product.description, options: product.options, batch: product.batch, tags: product.tags, rating: product.rating, reviews: product.reviews, addToCart: true, 
+            // isQtyEditable={true}
+            displayRating: false, onAddToCart: (id, var_id, qty) => console.log('Add to cart:', id, var_id, qty), onNotifyMe: (id, var_id) => console.log('notify', id, var_id) }, product.productId))) }));
+};
+export default productCaard;

package/dist/esm/Pages/productDetailCard.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ProductDetails from '../Components/ProductDetails/ProductDetails';
+const ProductDetailCard = () => {
+    const Product = {
+        "productId": 12,
+        "label": "hello",
+        "description": "Prepared using time-honored recipes, our Traditional Laddu – Special is made with carefully selected ingredients, slow-roasted to perfection and blended with pure ghee. Each laddu is hand-crafted to deliver rich aroma, authentic taste, and melt-in-the-mouth texture. Free from artificial colors and preservatives, this special laddu reflects the true essence of traditional Indian sweets, perfect for festivals, celebrations, and gifting.",
+        "category": "sweets",
+        "batch": {
+            "color": "red",
+            "label": "normal"
+        },
+        "tags": [
+            "hw"
+        ],
+        "images": [
+            {
+                "imageUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg",
+                "imageId": 9,
+                "order": 4,
+                "isImage": true
+            },
+            {
+                "imageUrl": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4",
+                "imageId": 10,
+                "order": 5,
+                "isImage": false,
+                "thumb": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg"
+            },
+            {
+                "imageUrl": "https://www.youtube.com/watch?v=xp2by5790OE",
+                "imageId": 11,
+                "order": 52,
+                "isImage": false,
+                // "thumb": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1763376123/main_sweets/1763376123173-Motichoorladdu.jpg"
+            }
+        ],
+        "options": [
+            {
+                "var_id": 6,
+                "unit": 2,
+                "label": "hho",
+                "offer": 5,
+                "price": 800,
+                "weight": 200,
+                "offerPrice": "475",
+                "stocks": 2
+            },
+            {
+                "var_id": 7,
+                "unit": 2,
+                "label": "hho",
+                "offer": 5,
+                "price": 600,
+                "weight": 200,
+                "offerPrice": "475",
+                "stocks": 5
+            },
+            {
+                "var_id": 8,
+                "unit": 2,
+                "label": "hho",
+                "offer": 5,
+                "price": 400,
+                "weight": 200,
+                "offerPrice": "475",
+                "stocks": 0
+            },
+        ]
+    };
+    return (_jsx(ProductDetails, { id: Product.productId, price: Product === null || Product === void 0 ? void 0 : Product.options, label: Product === null || Product === void 0 ? void 0 : Product.label, shortdesc: Product === null || Product === void 0 ? void 0 : Product.description, tags: Product === null || Product === void 0 ? void 0 : Product.tags, rating: 4.5, reviews: 120, displayRating: false, images: Product === null || Product === void 0 ? void 0 : Product.images, batch: Product === null || Product === void 0 ? void 0 : Product.batch, addToCart: true, notifyMe: true, onAddToCart: (id, var_id, qty) => console.log('detail add', id, var_id, qty), onNotifyMe: (id, var_id) => console.log('detail notify', id, var_id) }));
+};
+export default ProductDetailCard;

package/dist/esm/Pages/productFilter.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Flex, SimpleGrid, Text } from "@chakra-ui/react";
+import ProductCard from "../Components/ProductCard/ProductCard";
+import FilterSidebar from "../Components/FilterSidebar/FilterSidebar";
+import Button from "../Components/Button/Button";
+import { X } from "lucide-react";
+const ProductFilterPage = () => {
+    const [filters, setFilters] = useState({});
+    const sections = [
+        {
+            id: "features",
+            label: "Features bjhgjgkjgkjkjkj",
+            initiallyExpanded: true,
+            options: [
+                { id: "eggless", label: "Eggless" },
+                { id: "sugar_free", label: "Sugar Free" },
+                { id: "freshly_made", label: "Freshly Made" },
+                { id: "gift_pack", label: "Gift Pack" },
+            ],
+        },
+        {
+            id: "brand",
+            label: "Category",
+            searchable: true,
+            checkboxes: true,
+            initiallyExpanded: true,
+            options: [
+                { id: "sweets", label: "Sweets" },
+                { id: "cakes", label: "Cakes" },
+                { id: "bakery", label: "Bakery" },
+            ],
+        },
+        {
+            id: "hairType",
+            label: "Type of Sweet",
+            radio: true,
+            initiallyExpanded: true,
+            options: [
+                { id: "milk_based", label: "Milk Based" },
+                { id: "ghee", label: "Ghee" },
+                { id: "dry_fruits", label: "Dry Fruits" },
+            ],
+        },
+        {
+            id: "availability",
+            label: "Availability",
+            initiallyExpanded: true,
+            options: [
+                { id: "in_stock", label: "In Stock" },
+                { id: "out_of_stock", label: "Out of Stock" },
+            ],
+        },
+        {
+            id: "price",
+            label: "Price",
+            range: { min: 0, max: 1000, step: 100, values: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000], unit: "₹" },
+            initiallyExpanded: true,
+        },
+        {
+            id: "rating",
+            label: "Customer Reviews",
+            radio: true,
+            initiallyExpanded: true,
+            options: [
+                { id: "4", label: "4" },
+                { id: "3", label: "3" },
+                { id: "2", label: "2" },
+                { id: "1", label: "1" },
+            ],
+        },
+    ];
+    // eslint-disable-next-line
+    const products = [
+        {
+            id: 1,
+            label: "Mysore Pak",
+            description: "Classic ghee-rich sweet",
+            productImage: [{ imageUrl: "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1768976723/main_sweets/1768976723212-4J7A2875.jpg", imageId: 1, order: 1 }],
+            tags: ["ghee", "sweets", "freshly_made", "muthu_kavitha"],
+            rating: 4.7,
+            reviews: 1200,
+            options: [{ var_id: 11, label: "Default", price: 250, offer: 10, weight: 200, stocks: 12 }],
+            avalabilitys: true,
+            addToCart: true,
+            batch: { color: "red", label: "Classic " }
+        },
+        {
+            id: 2,
+            label: "Laddu Assortment",
+            description: "Dry fruit laddus",
+            productImage: [{ imageUrl: "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1768976340/main_sweets/1768976340242-4J7A3163%20%281%29.webp", imageId: 2, order: 1 }],
+            tags: ["dry_fruits", "sweets", "gift_pack", "signature"],
+            rating: 4.5,
+            reviews: 800,
+            options: [{ var_id: 21, label: "Default", price: 450, offer: 5, weight: 300, stocks: 5 }],
+            avalabilitys: true,
+            addToCart: true,
+            batch: { color: "red", label: "Classic " }
+        },
+        {
+            id: 3,
+            label: "Eggless Black Forest Cake",
+            description: "Chocolate sponge with cherries",
+            productImage: [{ imageUrl: "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1768987701/main_sweets/1768987700430-Ellu-laddu.jpg", imageId: 3, order: 1 }],
+            tags: ["eggless", "milk_based", "cakes", "chef_special"],
+            rating: 4.6,
+            reviews: 1500,
+            options: [{ var_id: 31, label: "Default", price: 699, offer: 0, weight: 500, stocks: 3 }],
+            avalabilitys: true,
+            addToCart: true,
+            batch: { color: "red", label: "Classic " }
+        },
+    ];
+    const asArray = (v) => Array.isArray(v) ? v : v ? [String(v)] : [];
+    const filteredProducts = useMemo(() => {
+        return products.filter((p) => {
+            var _a;
+            const availOk = asArray(filters.availability).length === 0 ||
+                asArray(filters.availability).includes(p.avalabilitys ? "in_stock" : "out_of_stock");
+            const featureOk = asArray(filters.features).length === 0 || (p.tags || []).some((t) => asArray(filters.features).includes(t));
+            const hairOk = asArray(filters.hairType).length === 0 || (p.tags || []).some((t) => asArray(filters.hairType).includes(t));
+            const brandOk = asArray(filters.brand).length === 0 || (p.tags || []).some((t) => asArray(filters.brand).includes(t));
+            const minRatingStr = asArray(filters.rating)[0];
+            const minRating = minRatingStr ? Number(minRatingStr) : undefined;
+            const numericRating = typeof p.rating === "number" ? p.rating : Number((_a = p.rating) !== null && _a !== void 0 ? _a : 0);
+            const ratingOk = minRating === undefined ? true : numericRating >= minRating;
+            const priceRange = filters.price;
+            const priceOk = !priceRange || priceRange.length !== 2
+                ? true
+                : (p.options && p.options.length ? p.options[0].price >= priceRange[0] && p.options[0].price <= priceRange[1] : true);
+            return availOk && featureOk && hairOk && brandOk && ratingOk && priceOk;
+        });
+    }, [filters, products]);
+    const handleFilterChange = (newFilters) => {
+        console.log(newFilters);
+        setFilters(newFilters);
+    };
+    return (_jsx(Box, { p: 4, children: _jsxs(Flex, { gap: 6, align: "start", children: [_jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: () => setFilters({}), children: "Clear All" }), _jsx(Box, { flexShrink: 0, children: _jsx(FilterSidebar, { sidebarOptions: sections, selected: filters, onChange: handleFilterChange, width: 180, containerPadding: 4, panelPadding: 2, 
+                        // variant="cards"
+                        clearAllButton: true, onClearAllHandler: () => setFilters({}) }) }), _jsxs(Box, { flex: "1", children: [_jsxs(Text, { fontSize: "xl", fontWeight: "bold", mb: 4, children: ["Products (", filteredProducts.length, ")"] }), filteredProducts.length > 0 ? (_jsx(SimpleGrid, { columns: { base: 1, md: 2, lg: 3 }, spacing: 6, children: filteredProducts.map((product) => (_jsx(ProductCard, { ...product, onAddToCart: (id, var_id, qty) => console.log('Add to cart:', id, var_id, qty) }, product.id))) })) : (_jsx(Box, { p: 8, textAlign: "center", border: "1px dashed", borderColor: "gray.300", borderRadius: "md", children: _jsx(Text, { color: "gray.500", children: "No products match your selection." }) }))] })] }) }));
+};
+export default ProductFilterPage;

package/dist/esm/Pages/progressbar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ProgressBar from "../Components/ProgressBar/ProgressBar";
+const ProgressbarPage = () => {
+    return (_jsx("div", { children: _jsx(ProgressBar, { min: 10, max: 0, isIndeterminate: true, size: "xs" }) }));
+};
+export default ProgressbarPage;

package/dist/esm/Pages/radioButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RadioButton, RadioButtonGroup, } from "../Components/RadioButton/RadioButton";
+const RadioButtonPage = () => {
+    const [selectedValue, setSelectedValue] = useState("1");
+    const radioOptions = [
+        { label: "Option 1", id: "1" },
+        { label: "Option 2", id: "2" },
+        { label: "Option 3", id: "3" },
+    ];
+    const handleChange = (value) => {
+        setSelectedValue(value);
+    };
+    return (_jsxs("div", { children: [_jsx(RadioButton, { label: "dinesh" }), _jsx("br", {}), _jsx("br", {}), _jsx(RadioButtonGroup, { options: radioOptions, value: selectedValue, onChange: handleChange, colorScheme: "blue", size: "md" })] }));
+};
+export default RadioButtonPage;