pixelize-design-library 1.0.9 → 1.0.10

package/dist/App.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 Layout_1 = __importDefault(require("./Layout"));
+function App() {
+    return (react_1.default.createElement("div", { className: "App" },
+        react_1.default.createElement(Layout_1.default, null)));
+}
+exports.default = App;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -0,0 +1,64 @@
+"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 react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+function ApexBarChart(_a) {
+    var data = _a.data, Labels = _a.Labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, _d = _a.barColor, barColor = _d === void 0 ? ["#3182ce"] : _d, _e = _a.xAxisStyle, xAxisStyle = _e === void 0 ? {
+        color: "#ffffff",
+    } : _e, _f = _a.yAxisStyle, yAxisStyle = _f === void 0 ? {
+        color: "#ffffff",
+    } : _f, _g = _a.titleStyle, titleStyle = _g === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _g;
+    var options = {
+        chart: {
+            type: "bar",
+            height: 350,
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 4,
+                horizontal: false,
+            },
+        },
+        dataLabels: {
+            enabled: false,
+            style: {
+                fontSize: "12px",
+                colors: ["#00E396"], //data label color
+            },
+        },
+        xaxis: {
+            categories: Labels,
+            labels: {
+                style: xAxisStyle,
+            },
+        },
+        yaxis: {
+            labels: {
+                style: yAxisStyle,
+            },
+        },
+        title: {
+            text: title,
+            align: titlePosition,
+            style: titleStyle,
+        },
+        colors: barColor, //bar color
+    };
+    var series = [
+        {
+            name: "Data",
+            data: data,
+        },
+    ];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "bar", height: height, width: width })));
+}
+exports.default = ApexBarChart;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+var react_1 = __importDefault(require("react"));
+var ApexBarChart_1 = __importDefault(require("./ApexBarChart"));
+exports.default = {
+    title: 'Components/ApexCharts/ApexBarChart',
+    component: ApexBarChart_1.default,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+var Template = function (args) { return react_1.default.createElement(ApexBarChart_1.default, __assign({}, args)); };
+exports.Primary = Template.bind({});
+exports.Primary.args = {
+    data: [44, 55, 41, 64, 22, 43, 21],
+    Labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    title: 'Weekly Sales',
+    titlePosition: 'left',
+    height: 400,
+    width: 500,
+    barColor: ['#3182ce'],
+    xAxisStyle: {
+        color: '#ffffff',
+    },
+    yAxisStyle: {
+        color: '#ffffff',
+    },
+    titleStyle: {
+        color: '#3182ce',
+        fontSize: '16px',
+        fontWeight: 600,
+        fontFamily: 'Arial',
+    },
+};
+// You can add more variations of the component by adding more exports like the Primary example.

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChartProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -0,0 +1,29 @@
+"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 react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+function ApexPieChart(_a) {
+    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, chartColor = _a.chartColor, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
+        color: "#3182ce",
+    } : _d;
+    var options = {
+        chart: {
+            type: "pie",
+            height: 350,
+        },
+        labels: labels,
+        title: {
+            text: title,
+            align: titlePosition,
+            style: titleStyle,
+        },
+        colors: chartColor,
+    };
+    var series = data;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "pie", height: height, width: width })));
+}
+exports.default = ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+var react_1 = __importDefault(require("react"));
+var ApexPieChart_1 = __importDefault(require("./ApexPieChart"));
+exports.default = {
+    title: 'Components/ApexCharts/ApexPieChart',
+    component: ApexPieChart_1.default,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+var Template = function (args) { return react_1.default.createElement(ApexPieChart_1.default, __assign({}, args)); };
+exports.Primary = Template.bind({});
+exports.Primary.args = {
+    data: [44, 55, 41, 64, 22, 43, 21],
+    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    title: 'Weekly Sales',
+    titlePosition: 'left',
+    height: 400,
+    width: 500,
+    chartColor: ['#3182ce', '#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#ff6384', '#36a2eb'],
+    titleStyle: {
+        color: '#3182ce',
+        fontSize: '16px',
+        fontWeight: 600,
+        fontFamily: 'Arial',
+    },
+};
+// You can add more variations of the component by adding more exports like the Primary example.

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,17 @@
+"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 react_2 = require("@chakra-ui/react");
+function Breadcrumbs(_a) {
+    var spacing = _a.spacing, separator = _a.separator, fontWeight = _a.fontWeight, fontSize = _a.fontSize, isCurrentPage = _a.isCurrentPage, handleClick = _a.handleClick, items = _a.items;
+    return (react_1.default.createElement(react_2.ChakraProvider, null,
+        react_1.default.createElement(react_2.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize }, items.map(function (item, index) { return (react_1.default.createElement(react_2.BreadcrumbItem, { key: index, isCurrentPage: isCurrentPage && index === items.length - 1 },
+            react_1.default.createElement(react_2.BreadcrumbLink, { href: item.path, sx: { '&:hover, &:active': { textDecoration: 'none' } }, onClick: function (event) {
+                    event.preventDefault();
+                    handleClick(item.path);
+                } }, item.label))); }))));
+}
+exports.default = Breadcrumbs;

package/dist/Components/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = __importDefault(require("react"));
+var Breadcrumbs_1 = __importDefault(require("./Breadcrumbs"));
+exports.default = {
+    title: 'Components/Breadcrumbs/Breadcrumb',
+    component: Breadcrumbs_1.default,
+};
+var Template = function (args) { return react_1.default.createElement(Breadcrumbs_1.default, __assign({}, args)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    spacing: "8px",
+    separator: "/",
+    fontWeight: "normal",
+    fontSize: "1rem",
+    isCurrentPage: true,
+    handleClick: function (path) { return console.log("Clicked: ".concat(path)); },
+    items: [
+        { path: '/home', label: 'Home' },
+        { path: '/about', label: 'About' },
+        { path: '/contact', label: 'Contact' },
+    ],
+};

package/dist/Components/Breadcrumbs/BreadcrumbsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Button/Button.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 });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+function Button(_a) {
+    var label = _a.label, _b = _a.width, width = _b === void 0 ? "120px" : _b, onClick = _a.onClick, color = _a.color, variant = _a.variant, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type;
+    return (react_1.default.createElement(react_2.ChakraProvider, null,
+        react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon }, label)));
+}
+exports.default = Button;

package/dist/Components/Button/Button.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+var Button_1 = __importDefault(require("./Button"));
+var test_1 = require("@storybook/test");
+var meta = {
+    title: 'Components/Button/Button',
+    component: Button_1.default,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs']
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        label: 'Button',
+        width: '',
+        color: 'blue',
+        variant: 'solid',
+        size: 'md',
+        isDisabled: false,
+        isLoading: false,
+        loadingText: 'Loading',
+        type: 'button',
+        onClick: (0, test_1.fn)()
+    },
+};

package/dist/Components/Button/ButtonProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -0,0 +1,16 @@
+"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 react_2 = require("@chakra-ui/react");
+function ButtonGroupIcon(_a) {
+    var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color;
+    return (react_1.default.createElement(react_2.ChakraProvider, null,
+        react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color },
+            leftIcon && react_1.default.createElement(react_2.IconButton, { "aria-label": 'Left icon button', icon: leftIcon, onClick: onLeftIconClick }),
+            react_1.default.createElement(react_2.Button, { onClick: onButtonClick }, buttonText),
+            rightIcon && react_1.default.createElement(react_2.IconButton, { "aria-label": 'Right icon button', icon: rightIcon, onClick: onRightIconClick }))));
+}
+exports.default = ButtonGroupIcon;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = __importDefault(require("react"));
+var ButtonGroupIcon_1 = __importDefault(require("./ButtonGroupIcon")); // Adjust the import path and component type if needed
+var fi_1 = require("react-icons/fi");
+exports.default = {
+    title: 'Components/ButtonGroupIcon/ButtonGroupIcon',
+    component: ButtonGroupIcon_1.default,
+    argTypes: {
+        size: { control: { type: 'select', options: ['sm', 'md', 'lg'] } },
+        variant: {
+            control: { type: 'select', options: ["solid", "outline", "ghost", "link"] },
+            defaultValue: 'solid'
+        },
+        color: {
+            control: { type: 'select', options: ["gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "whiteAlpha", "blackAlpha"] },
+            defaultValue: 'blue'
+        },
+    },
+};
+var Template = function (args) { return react_1.default.createElement(ButtonGroupIcon_1.default, __assign({}, args)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    leftIcon: react_1.default.createElement(fi_1.FiHome, null),
+    rightIcon: react_1.default.createElement(fi_1.FiHome, null),
+    onLeftIconClick: function () { return console.log('Left icon clicked'); },
+    onRightIconClick: function () { return console.log('Right icon clicked'); },
+    buttonText: 'Button Text',
+    onButtonClick: function () { return console.log('Button clicked'); },
+    onButtongroupClick: function () { return console.log('Button group clicked'); },
+    size: 'md',
+    variant: 'solid',
+    color: 'blue',
+};

package/dist/Components/Checkbox/Checkbox.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 });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var CheckBox = function (_a) {
+    var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked;
+    return (react_1.default.createElement(react_2.ChakraProvider, null,
+        react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked }, label)));
+};
+exports.default = CheckBox;

package/dist/Components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Check_box = void 0;
+var react_1 = __importStar(require("react"));
+var Checkbox_1 = __importDefault(require("./Checkbox"));
+var test_1 = require("@storybook/test");
+var meta = {
+    title: 'Components/CheckBox/CheckBox',
+    component: Checkbox_1.default,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs']
+};
+exports.default = meta;
+var CheckBoxTemplate = function (args) {
+    var _a = (0, react_1.useState)(true), check = _a[0], setCheck = _a[1];
+    var handleCheck = function (e) {
+        setCheck(!check);
+    };
+    return react_1.default.createElement(Checkbox_1.default, __assign({}, args, { onChange: handleCheck, isChecked: check }));
+};
+exports.Check_box = {
+    args: {
+        label: 'Checkbox',
+        spacing: 6,
+        isInvalid: false,
+        color: 'blue',
+        iconColor: 'white',
+        iconSize: '1em',
+        isChecked: true,
+        isIndeterminate: false,
+        isDisabled: false,
+        size: 'md',
+        value: 'checkbox',
+        defaultChecked: false,
+        onChange: (0, test_1.fn)()
+    },
+    render: function (args) { return CheckBoxTemplate(args); }
+};

package/dist/Components/Checkbox/CheckboxProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Input/TextInput.js

@@ -0,0 +1,19 @@
+"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 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+function TextInput(_a) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle;
+    return (react_2.default.createElement(react_1.ChakraProvider, null,
+        react_2.default.createElement(react_1.FormControl, { isRequired: isRequired, isInvalid: error },
+            label && react_2.default.createElement(react_1.FormLabel, { mb: "0.25rem" }, label),
+            react_2.default.createElement(react_1.InputGroup, { width: width, style: inputGroupStyle },
+                react_2.default.createElement(react_1.Input, { type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, style: inputStyle }),
+                inputRightIcon && (react_2.default.createElement(react_1.InputRightElement, { children: inputRightIcon, onClick: onRightIconclick }))),
+            error && react_2.default.createElement(react_1.FormErrorMessage, { pl: 4 }, errorMessage),
+            helperText && !error && (react_2.default.createElement(react_1.FormHelperText, { pl: 4 }, helperText)))));
+}
+exports.default = TextInput;

package/dist/Components/Input/TextInput.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+var react_1 = __importDefault(require("react"));
+var test_1 = require("@storybook/test");
+var TextInput_1 = __importDefault(require("./TextInput"));
+var react_2 = require("react");
+var meta = {
+    title: 'Components/Input/TextInput',
+    component: TextInput_1.default,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+var TextInputTemplate = function (args) {
+    var _a = (0, react_2.useState)(""), value = _a[0], setValue = _a[1];
+    var handleChange = function (e) {
+        setValue(e.target.value);
+    };
+    return react_1.default.createElement(TextInput_1.default, __assign({}, args, { onChange: handleChange, value: value }));
+};
+exports.Primary = {
+    args: {
+        label: 'Button',
+        onChange: (0, test_1.fn)(),
+        onBlur: (0, test_1.fn)(),
+        onFocus: (0, test_1.fn)(),
+        isDisabled: false,
+        isReadOnly: false,
+        isRequired: false,
+        value: "",
+        placeholder: "Placeholder",
+        width: 500,
+        error: true,
+        errorMessage: "jhkjhkjh",
+        helperText: ""
+    },
+    render: function (args) { return TextInputTemplate(args); }
+};

package/dist/Components/Input/TextInputProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/InputTextArea/InputTextArea.js

@@ -0,0 +1,17 @@
+"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 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+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_2.default.createElement(react_1.ChakraProvider, null,
+        react_2.default.createElement(react_1.FormControl, { isRequired: isRequired, isInvalid: error },
+            label && react_2.default.createElement(react_1.FormLabel, { mb: "0.25rem" }, label),
+            react_2.default.createElement(react_1.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_2.default.createElement(react_1.FormErrorMessage, { pl: 4 }, errorMessage)),
+            helperText && !error && react_2.default.createElement(react_1.FormHelperText, { pl: 4 }, helperText))));
+}
+exports.default = InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+var react_1 = __importDefault(require("react"));
+var InputTextArea_1 = __importDefault(require("./InputTextArea"));
+var react_2 = require("react");
+var meta = {
+    title: "Components/InputTextArea/InputTextArea",
+    component: InputTextArea_1.default,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+exports.default = meta;
+var TextAreaTemplate = function (args) {
+    var _a = (0, react_2.useState)(""), value = _a[0], setValue = _a[1];
+    var handleOnChange = function (e) {
+        setValue(e.target.value);
+    };
+    return react_1.default.createElement(InputTextArea_1.default, __assign({}, args, { onChange: handleOnChange, value: value }));
+};
+exports.Primary = {
+    args: {
+        label: "hello",
+        helperText: 'Hello',
+        errorMessage: 'Required',
+        error: true,
+        rows: 5,
+        onChange: function () { },
+        value: "",
+        placeholder: "Placeholder",
+        width: "100%",
+        isDisabled: false,
+        isReadOnly: false,
+        isRequired: false,
+        resize: "vertical",
+        size: "md",
+        variant: "outline",
+        focusBorderColor: "blue.500",
+        errorBorderColor: "red.500",
+    }, render: function (args) { return TextAreaTemplate(args); }
+};

package/dist/Components/InputTextArea/InputTextAreaProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });