venice-ui 1.2.0 → 1.3.0

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -56,7 +56,6 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [open]);
-    console.log(open);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
         react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
         open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },

package/dist/cjs/components/Form/Form.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const react_1 = __importDefault(require("react"));
+const Input_1 = require("../Input");
+const File_1 = require("../File");
+const FormElements_1 = require("./FormElements");
+const Form = ({ formData, size = 'medium', read }) => {
+    const onChangeHandler = (name, value) => {
+        formData.action(name, value);
+    };
+    const onIntChangeHandler = (name, value) => {
+        let valueString = value;
+        if (valueString.length > 0) {
+            const modify = valueString
+                .replaceAll(',', '.')
+                .replace(/[^\d.-]/g, '')
+                .split('.');
+            let digit = modify.shift();
+            if (modify.length > 0) {
+                digit = digit + '.' + modify.join('');
+            }
+            valueString = digit;
+        }
+        formData.action(name, valueString);
+    };
+    const onFileHandler = (event) => {
+        const fileList = event.currentTarget.files;
+        if (!fileList)
+            return;
+        if (event.currentTarget.files) {
+        }
+        formData.action(event.currentTarget.name, event.currentTarget.files ? event.currentTarget.files[0] : null);
+    };
+    const selectType = (item) => {
+        switch (item.type) {
+            case 'text':
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler }));
+            case 'number':
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler }));
+            case 'increase':
+                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step }));
+            case 'file':
+                return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler }));
+        }
+    };
+    return (react_1.default.createElement(FormElements_1.FormWrapper, null, formData.data.map((item) => {
+        if ('row' in item) {
+            return (react_1.default.createElement(FormElements_1.FormRow, { key: `subRow-${item.row[0].name}` }, item.row.map((rowItem) => (react_1.default.createElement(FormElements_1.FormSubRow, { factor: item.row.length, key: rowItem.name }, selectType(rowItem))))));
+        }
+        else {
+            return react_1.default.createElement(FormElements_1.FormRow, { key: item.name }, selectType(item));
+        }
+    })));
+};
+exports.Form = Form;
+exports.default = exports.Form;

package/dist/cjs/components/Form/FormElements.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntputWrapperBig = exports.FormSubRow = exports.FormRow = exports.FormWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.FormWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+exports.FormRow = styled_components_1.default.div `
+  width: 100%;
+  margin-bottom: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+`;
+exports.FormSubRow = styled_components_1.default.div `
+  display: flex;
+  width: calc((100% - ((${(p) => p.factor} - 1) * 2rem)) / ${(p) => p.factor});
+`;
+exports.IntputWrapperBig = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.6rem;
+`;

package/dist/cjs/components/Form/formHelper.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateForm = void 0;
+const updateForm = (state, updateState, field, value) => {
+    updateState({ ...state, [field]: value });
+};
+exports.updateForm = updateForm;

package/dist/cjs/components/Form/formTypes.js

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

package/dist/cjs/components/Form/index.js

@@ -0,0 +1,17 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Form"), exports);

package/dist/cjs/components/Input/Input.js

@@ -31,8 +31,33 @@ const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
 const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, }) => {
+    const calculateNumberValue = (numberValue) => {
+        return isNaN(parseFloat(numberValue))
+            ? numberValue
+            : parseFloat(numberValue);
+    };
     const onChange = (e) => {
-        handleChange(name, e.target.value);
+        let returnedValue = type === 'number' || type === 'increase'
+            ? calculateNumberValue(e.target.value)
+            : e.target.value.toString();
+        handleChange(name, returnedValue);
+    };
+    const onBlurValidation = () => {
+        if (type === 'number' || type === 'increase') {
+            let validateValue = value;
+            if (isNaN(parseFloat(validateValue.toString()))) {
+                validateValue = min !== undefined ? min : 0;
+            }
+            if (typeof value === 'number') {
+                if (min !== undefined && value < min) {
+                    validateValue = min;
+                }
+                else if (max !== undefined && value > max) {
+                    validateValue = max;
+                }
+            }
+            handleChange(name, validateValue);
+        }
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
@@ -65,12 +90,12 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
         react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
-                react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
                 inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
-                    react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: 'transparent' }))),
+                    react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                 type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,
-                    react_1.default.createElement(Icons_1.Icon, { name: "add", size: 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
-                    react_1.default.createElement(Icons_1.Icon, { name: "remove", size: 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
+                    react_1.default.createElement(Icons_1.Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
+                    react_1.default.createElement(Icons_1.Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
                 error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error)))));
 };
 exports.Input = Input;

package/dist/cjs/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/ElementHeader"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
+__exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/File"), exports);
 __exportStar(require("./components/Filters"), exports);
 __exportStar(require("./components/Icons"), exports);

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -30,7 +30,6 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [open]);
-    console.log(open);
     return (React.createElement(DropdownMenuElement, null,
         React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
         open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },

package/dist/esm/components/Form/Form.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Input } from '../Input';
+import { File } from '../File';
+import { FormRow, FormSubRow, FormWrapper } from './FormElements';
+export const Form = ({ formData, size = 'medium', read }) => {
+    const onChangeHandler = (name, value) => {
+        formData.action(name, value);
+    };
+    const onIntChangeHandler = (name, value) => {
+        let valueString = value;
+        if (valueString.length > 0) {
+            const modify = valueString
+                .replaceAll(',', '.')
+                .replace(/[^\d.-]/g, '')
+                .split('.');
+            let digit = modify.shift();
+            if (modify.length > 0) {
+                digit = digit + '.' + modify.join('');
+            }
+            valueString = digit;
+        }
+        formData.action(name, valueString);
+    };
+    const onFileHandler = (event) => {
+        const fileList = event.currentTarget.files;
+        if (!fileList)
+            return;
+        if (event.currentTarget.files) {
+        }
+        formData.action(event.currentTarget.name, event.currentTarget.files ? event.currentTarget.files[0] : null);
+    };
+    const selectType = (item) => {
+        switch (item.type) {
+            case 'text':
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler }));
+            case 'number':
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler }));
+            case 'increase':
+                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step }));
+            case 'file':
+                return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler }));
+        }
+    };
+    return (React.createElement(FormWrapper, null, formData.data.map((item) => {
+        if ('row' in item) {
+            return (React.createElement(FormRow, { key: `subRow-${item.row[0].name}` }, item.row.map((rowItem) => (React.createElement(FormSubRow, { factor: item.row.length, key: rowItem.name }, selectType(rowItem))))));
+        }
+        else {
+            return React.createElement(FormRow, { key: item.name }, selectType(item));
+        }
+    })));
+};
+export default Form;

package/dist/esm/components/Form/FormElements.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+export const FormWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+export const FormRow = styled.div `
+  width: 100%;
+  margin-bottom: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+`;
+export const FormSubRow = styled.div `
+  display: flex;
+  width: calc((100% - ((${(p) => p.factor} - 1) * 2rem)) / ${(p) => p.factor});
+`;
+export const IntputWrapperBig = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.6rem;
+`;

package/dist/esm/components/Form/formHelper.js

@@ -0,0 +1,3 @@
+export const updateForm = (state, updateState, field, value) => {
+    updateState({ ...state, [field]: value });
+};

package/dist/esm/components/Form/formTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Form/index.js

@@ -0,0 +1 @@
+export * from './Form';

package/dist/esm/components/Input/Input.js

@@ -5,8 +5,33 @@ import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIc
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
 export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, }) => {
+    const calculateNumberValue = (numberValue) => {
+        return isNaN(parseFloat(numberValue))
+            ? numberValue
+            : parseFloat(numberValue);
+    };
     const onChange = (e) => {
-        handleChange(name, e.target.value);
+        let returnedValue = type === 'number' || type === 'increase'
+            ? calculateNumberValue(e.target.value)
+            : e.target.value.toString();
+        handleChange(name, returnedValue);
+    };
+    const onBlurValidation = () => {
+        if (type === 'number' || type === 'increase') {
+            let validateValue = value;
+            if (isNaN(parseFloat(validateValue.toString()))) {
+                validateValue = min !== undefined ? min : 0;
+            }
+            if (typeof value === 'number') {
+                if (min !== undefined && value < min) {
+                    validateValue = min;
+                }
+                else if (max !== undefined && value > max) {
+                    validateValue = max;
+                }
+            }
+            handleChange(name, validateValue);
+        }
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
@@ -39,11 +64,11 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
         React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             React.createElement(InputWrapper, { width: width },
-                React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
                 inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
-                    React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: 'transparent' }))),
+                    React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
                 type === 'increase' && (React.createElement(IconsWrapper, null,
-                    React.createElement(Icon, { name: "add", size: 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
-                    React.createElement(Icon, { name: "remove", size: 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
+                    React.createElement(Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
+                    React.createElement(Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
                 error && React.createElement(InputErrorMsg, null, error)))));
 };

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/ElementHeader';
 export * from './components/DropdownMenu';
+export * from './components/Form';
 export * from './components/File';
 export * from './components/Filters';
 export * from './components/Icons';

package/dist/types/components/Form/Form.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { FormSourceData } from './formTypes';
+import { InputSize } from 'types';
+export interface FormProps {
+    formData: FormSourceData;
+    size?: InputSize;
+    read?: boolean;
+}
+export declare const Form: FC<FormProps>;
+export default Form;

package/dist/types/components/Form/FormElements.d.ts

@@ -0,0 +1,8 @@
+export declare const FormWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface FormSubRowProps {
+    factor: number;
+}
+export declare const FormSubRow: import("styled-components").StyledComponent<"div", any, FormSubRowProps, never>;
+export declare const IntputWrapperBig: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/types/components/Form/formHelper.d.ts

@@ -0,0 +1 @@
+export declare const updateForm: (state: any, updateState: any, field: string, value: string | number) => void;

package/dist/types/components/Form/formTypes.d.ts

@@ -0,0 +1,23 @@
+export interface FormDataProps {
+    type: string;
+    label: string;
+    value: any;
+    name: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface FormDataParentProps {
+    row: FormDataProps[];
+}
+export type DataType = FormDataProps | FormDataParentProps;
+export interface FormSourceData {
+    data: DataType[];
+    action: any;
+}
+export interface IDetailsProps {
+    label: string;
+    value: any;
+    type: string;
+}
+export {};

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

@@ -0,0 +1 @@
+export * from './Form';

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/ElementHeader';
 export * from './components/DropdownMenu';
+export * from './components/Form';
 export * from './components/File';
 export * from './components/Filters';
 export * from './components/Icons';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",