pixelize-design-library 2.1.24 → 2.1.26

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { InputTextAreaProps } from "./InputTextAreaProps";
-export default function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, errorBorderColor, focusBorderColor, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, }: InputTextAreaProps): React.JSX.Element;
+export default function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, errorBorderColor, focusBorderColor, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete }: InputTextAreaProps): React.JSX.Element;

package/dist/Components/InputTextArea/InputTextArea.js

@@ -5,12 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var FormLabel_1 = require("../Common/FormLabel");
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function InputTextArea(_a) {
-    var label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.resize, resize = _c === void 0 ? "both" : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, isDisabled = _a.isDisabled, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, rows = _a.rows, height = _a.height;
-    return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
-        label && react_1.default.createElement(react_2.FormLabel, { mb: "0.25rem" }, label),
-        react_1.default.createElement(react_2.Textarea, { placeholder: placeholder, value: value, onChange: onChange, size: size, resize: resize, isDisabled: isDisabled, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height }),
-        error && react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage),
-        helperText && !error && (react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText))));
+    var label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.resize, resize = _c === void 0 ? "both" : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, isDisabled = _a.isDisabled, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, rows = _a.rows, height = _a.height, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, _f = _a.autoComplete, autoComplete = _f === void 0 ? "" : _f;
+    return (react_1.default.createElement(react_2.FormControl, null,
+        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }),
+        react_1.default.createElement(react_2.Textarea, { id: id, placeholder: placeholder, value: value, onChange: onChange, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.style.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Textarea: ComponentStyleConfig;

package/dist/Components/InputTextArea/InputTextArea.style.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+exports.Textarea = {
+    baseStyle: {
+        fontWeight: 500,
+        fontSize: "0.875rem",
+        letterSpacing: "0.044rem",
+        pt: "0.813rem",
+        pb: "0.813rem",
+        borderRadius: "0.25rem",
+        _placeholder: {
+            fontStyle: "italic",
+        },
+    },
+    sizes: {
+        md: {
+            fontSize: "0.875rem",
+            h: "2.75rem",
+        },
+    },
+    variants: {
+        outline: function (props) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var theme = props.theme;
+            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                border: "0.063rem solid",
+                borderColor: borderColor,
+                bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                _hover: {
+                    borderColor: primary,
+                    outline: "0",
+                },
+                _focus: {
+                    borderColor: primary,
+                    boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                    outline: "0",
+                },
+                _invalid: {
+                    borderColor: errorColor,
+                    boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                    _hover: {
+                        borderColor: errorColor,
+                        outline: "0",
+                    },
+                    _focus: {
+                        borderColor: errorColor,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        outline: "0",
+                    },
+                },
+                _readOnly: {
+                    boxShadow: 'inherit',
+                },
+                _disabled: {
+                    bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                    opacity: 1,
+                    cursor: "not-allowed",
+                    _hover: {
+                        border: "0.063rem solid",
+                        borderColor: borderColor,
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/Components/InputTextArea/InputTextAreaProps.d.ts

@@ -1,5 +1,5 @@
 import { TextareaProps } from "@chakra-ui/react";
-export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant"> & {
+export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "id" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
     label?: string;
     error?: boolean;
     errorMessage?: string;
@@ -7,4 +7,6 @@ export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "
     width?: string | number;
     rows?: number;
     height?: string | number;
+    isInformation?: boolean;
+    informationMessage?: string;
 };

package/dist/Components/ProductCard/ProductCard.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var ProductTags_1 = __importDefault(require("./ProductTags"));
-var ProductReview_1 = __importDefault(require("./ProductReview"));
+// import ProductReview from './ProductReview';
 var ProductPrice_1 = __importDefault(require("./ProductPrice"));
 var Button_1 = __importDefault(require("../Button/Button"));
 var ProductLabel_1 = __importDefault(require("./ProductLabel"));
@@ -43,8 +43,6 @@ var ProductCard = function (_a) {
         react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", mt: 3 },
             react_1.default.createElement(ProductLabel_1.default, { label: label, description: description }),
             tags && react_1.default.createElement(ProductTags_1.default, { tags: tags }),
-            rating && reviews &&
-                react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }),
             options && react_1.default.createElement(ProductPrice_1.default, { options: options }),
             onAddToCart && react_1.default.createElement(Button_1.default, { colorScheme: "orange", size: "sm", width: "100%", onClick: onAddToCart }, "Add to Cart"))));
 };

package/dist/Components/Reorder/Reorder.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { ReorderItem, ReorderListProps } from "./ReorderProps";
-declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, }: ReorderListProps<T>) => JSX.Element;
+type ExtendedReorderListProps<T extends ReorderItem> = ReorderListProps<T> & {
+    showRemoveIcon?: boolean;
+    onRemove?: (id: string) => void;
+};
+declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, showRemoveIcon, onRemove, }: ExtendedReorderListProps<T>) => JSX.Element;
 export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -20,7 +20,7 @@ var dnd_1 = require("@hello-pangea/dnd");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var ReorderList = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? "" : _b, items = _a.items, onReorder = _a.onReorder;
+    var _b = _a.label, label = _b === void 0 ? "" : _b, items = _a.items, onReorder = _a.onReorder, _c = _a.showRemoveIcon, showRemoveIcon = _c === void 0 ? false : _c, onRemove = _a.onRemove;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     var handleDragEnd = function (result) {
         if (!result.destination)
@@ -39,11 +39,12 @@ var ReorderList = function (_a) {
         react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: handleDragEnd },
             react_1.default.createElement(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal" }, function (provided) { return (react_1.default.createElement(react_2.HStack, __assign({ ref: provided.innerRef }, provided.droppableProps, { spacing: 4, overflowX: "auto" }),
                 items.map(function (item, index) { return (react_1.default.createElement(dnd_1.Draggable, { key: item.id, draggableId: item.id, index: index }, function (provided) {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { position: "relative", border: "0.063rem solid", borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[300], borderRadius: "md", overflow: "hidden" }),
                         react_1.default.createElement(react_2.Image, { src: item.previewUrl, alt: (_b = item.name) !== null && _b !== void 0 ? _b : "item-".concat(index), boxSize: "7.5rem", objectFit: "cover" }),
                         react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[500] }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }),
-                        react_1.default.createElement(react_2.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1 }, index + 1)));
+                        react_1.default.createElement(react_2.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1 }, index + 1),
+                        showRemoveIcon && (react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 16, color: (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[500] }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: function () { return onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id); } }))));
                 })); }),
                 provided.placeholder)); }))));
 };

package/dist/Pages/textArea.js

@@ -7,6 +7,9 @@ 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 })));
+        react_1.default.createElement(InputTextArea_1.default, { label: "hello", helperText: "Hello", 
+            // errorMessage="Required"
+            // error={true}
+            rows: 5 })));
 };
 exports.default = TextAreaPage;

package/dist/Theme/componentStyles.d.ts

@@ -4,4 +4,5 @@ export declare const componentStyles: {
     Button: import("@chakra-ui/theme").ComponentStyleConfig;
     Select: import("@chakra-ui/theme").ComponentStyleConfig;
     Tag: import("@chakra-ui/theme").ComponentStyleConfig;
+    Textarea: import("@chakra-ui/theme").ComponentStyleConfig;
 };

package/dist/Theme/componentStyles.js

@@ -6,10 +6,12 @@ var Checkbox_styles_1 = require("../Components/Checkbox/Checkbox.styles");
 var TextInput_styles_1 = require("../Components/Input/TextInput.styles");
 var Select_styles_1 = require("../Components/Select/Select.styles");
 var Tag_styles_1 = require("../Components/Tag/Tag.styles");
+var InputTextArea_style_1 = require("../Components/InputTextArea/InputTextArea.style");
 exports.componentStyles = {
     Checkbox: Checkbox_styles_1.Checkbox,
     Input: TextInput_styles_1.Input,
     Button: Button_styles_1.Button,
     Select: Select_styles_1.Select,
     Tag: Tag_styles_1.Tag,
+    Textarea: InputTextArea_style_1.Textarea,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.24",
+  "version": "2.1.26",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",