venice-ui 2.0.35 → 2.1.0

package/dist/cjs/Theme/Theme.js

@@ -74,7 +74,7 @@ exports.mainTheme = {
     disabledText: exports.Theme.colors.gray_1,
     errorBackgroundColor: exports.Theme.colors.red,
     errorBackgroundColorHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.red),
-    errorBackgroundColorHoverLight: (0, polished_1.lighten)(0.5, exports.Theme.colors.red),
+    errorBackgroundColorHoverLight: (0, polished_1.lighten)(0.6, exports.Theme.colors.red),
     //icon
     iconColor: exports.Theme.colors.text,
     iconHoverColor: exports.Theme.colors.primary,
@@ -93,7 +93,7 @@ exports.mainTheme = {
     inputDisabledBackground: exports.Theme.colors.gray_4,
     inputDisabledBorder: exports.Theme.colors.gray_1,
     inputDisabledTextColor: exports.Theme.colors.gray_1,
-    inputErrorBackground: (0, polished_1.lighten)(0.5, exports.Theme.colors.red),
+    inputErrorBackground: (0, polished_1.lighten)(0.6, exports.Theme.colors.red),
     inputErrorBorder: exports.Theme.colors.red,
     inputErrorTextColor: exports.Theme.colors.red,
     // global
@@ -120,4 +120,6 @@ exports.mainTheme = {
     //toogle
     toogleBackgrund: exports.Theme.colors.gray_3,
     toogleActiveBackgorund: exports.Theme.colors.primary_40,
+    //checkobx
+    checkColor: exports.Theme.colors.white,
 };

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const react_1 = __importDefault(require("react"));
+const Theme_1 = require("../../Theme/Theme");
+const styled_components_1 = require("styled-components");
+const Aligment_1 = require("../Aligment");
+const Input_1 = require("../Input");
+const Checkbox_styles_1 = require("./Checkbox.styles");
+const Icons_1 = require("../Icons");
+const Checkbox = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
+            react_1.default.createElement(Input_1.InputWrapper, { width: width },
+                react_1.default.createElement(Checkbox_styles_1.ToogleCheckboxWrapper, { size: size },
+                    react_1.default.createElement(Checkbox_styles_1.CheckboxElement, { size: size, active: value, onClick: () => handleClick(!value) }, value && (react_1.default.createElement(Checkbox_styles_1.CheckoxIcon, null,
+                        react_1.default.createElement(Icons_1.Icon, { name: 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
+            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
+};
+exports.Checkbox = Checkbox;

package/dist/cjs/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxElement = exports.CheckoxIcon = exports.ToogleCheckboxWrapper = void 0;
+const common_1 = require("../common");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.ToogleCheckboxWrapper = styled_components_1.default.div `
+  ${(p) => (0, common_1.setToogleSize)(p.size)}
+`;
+exports.CheckoxIcon = styled_components_1.default.div `
+  display: flex;
+`;
+exports.CheckboxElement = styled_components_1.default.div `
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
+  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
+  font-family: 'Lato', sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  ${(p) => !p.active &&
+    `
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
+      inset 0 1px 2px rgba(0, 0, 0, 0.24);
+    `}
+  height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
+  width: ${(p) => (p.size === 'small' ? '20px' : '24px')};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  ${(p) => p.size === 'small' && `margin:2px 0;`}
+`;

package/dist/cjs/components/DatePicker/Calendar.js

@@ -72,6 +72,7 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex })
         });
     };
     const setNewDate = (newDate) => {
+        console.log('setNewDate', newDate);
         setSellectedDate(newDate);
     };
     const confirmDate = () => {

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -35,7 +35,7 @@ const react_dom_1 = require("react-dom");
 const Calendar_1 = require("./Calendar");
 const date_fns_1 = require("date-fns");
 const Icons_1 = require("../Icons");
-const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
+const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const sourceRef = (0, react_1.useRef)(null);
     const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -33,7 +33,7 @@ const common_1 = require("../common");
 const react_dom_1 = require("react-dom");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
+const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
@@ -87,6 +87,6 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
             open &&
                 (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
-            error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
+            (error && errorMsg) && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
 };
 exports.Dropdown = Dropdown;

package/dist/cjs/components/File/File.js

@@ -31,7 +31,7 @@ const Button_1 = require("../Button");
 const File_styles_1 = require("./File.styles");
 const Dropdown_1 = require("../Dropdown");
 const Typography_1 = require("../Typography");
-const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, subLabel }) => {
+const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, errorMsg, placeholder, fileValue, subLabel }) => {
     const fileRef = (0, react_1.useRef)(null);
     const handleSelect = (e) => {
         handleChange(e);
@@ -48,6 +48,6 @@ const File = ({ label, labelPosition = 'top', name, disabled = false, multiple =
                     react_1.default.createElement(Button_1.Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
                 subLabel && react_1.default.createElement(Typography_1.TextMicro, null, subLabel)),
             react_1.default.createElement(File_styles_1.HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
-            error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
+            (error && errorMsg) && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg))));
 };
 exports.File = File;

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

@@ -30,7 +30,7 @@ const Aligment_1 = require("../Aligment");
 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, readOnly = false, prefix, }) => {
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, prefix, }) => {
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
@@ -99,6 +99,6 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
                     type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,
                         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))))))));
+                    (error && errorMsg) && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, errorMsg))))))));
 };
 exports.Input = Input;

package/dist/esm/Theme/Theme.js

@@ -71,7 +71,7 @@ export const mainTheme = {
     disabledText: Theme.colors.gray_1,
     errorBackgroundColor: Theme.colors.red,
     errorBackgroundColorHover: lighten(0.3, Theme.colors.red),
-    errorBackgroundColorHoverLight: lighten(0.5, Theme.colors.red),
+    errorBackgroundColorHoverLight: lighten(0.6, Theme.colors.red),
     //icon
     iconColor: Theme.colors.text,
     iconHoverColor: Theme.colors.primary,
@@ -90,7 +90,7 @@ export const mainTheme = {
     inputDisabledBackground: Theme.colors.gray_4,
     inputDisabledBorder: Theme.colors.gray_1,
     inputDisabledTextColor: Theme.colors.gray_1,
-    inputErrorBackground: lighten(0.5, Theme.colors.red),
+    inputErrorBackground: lighten(0.6, Theme.colors.red),
     inputErrorBorder: Theme.colors.red,
     inputErrorTextColor: Theme.colors.red,
     // global
@@ -117,4 +117,6 @@ export const mainTheme = {
     //toogle
     toogleBackgrund: Theme.colors.gray_3,
     toogleActiveBackgorund: Theme.colors.primary_40,
+    //checkobx
+    checkColor: Theme.colors.white,
 };

package/dist/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mainTheme } from '../../Theme/Theme';
+import { ThemeProvider } from 'styled-components';
+import { Aligment } from '../Aligment';
+import { InputLabelElement, InputWrapper } from '../Input';
+import { CheckboxElement, CheckoxIcon, ToogleCheckboxWrapper, } from './Checkbox.styles';
+import { Icon } from '../Icons';
+export const Checkbox = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', handleClick, }) => {
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
+            React.createElement(InputWrapper, { width: width },
+                React.createElement(ToogleCheckboxWrapper, { size: size },
+                    React.createElement(CheckboxElement, { size: size, active: value, onClick: () => handleClick(!value) }, value && (React.createElement(CheckoxIcon, null,
+                        React.createElement(Icon, { name: 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
+            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
+};

package/dist/esm/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,33 @@
+import { setToogleSize } from '../common';
+import styled from 'styled-components';
+import { Theme } from '../../Theme';
+export const ToogleCheckboxWrapper = styled.div `
+  ${(p) => setToogleSize(p.size)}
+`;
+export const CheckoxIcon = styled.div `
+  display: flex;
+`;
+export const CheckboxElement = styled.div `
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
+  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
+  font-family: 'Lato', sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  ${(p) => !p.active &&
+    `
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
+      inset 0 1px 2px rgba(0, 0, 0, 0.24);
+    `}
+  height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
+  width: ${(p) => (p.size === 'small' ? '20px' : '24px')};
+  border-radius: ${Theme.borderRadius.m};
+  ${(p) => p.size === 'small' && `margin:2px 0;`}
+`;

package/dist/esm/components/DatePicker/Calendar.js

@@ -46,6 +46,7 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, zI
         });
     };
     const setNewDate = (newDate) => {
+        console.log('setNewDate', newDate);
         setSellectedDate(newDate);
     };
     const confirmDate = () => {

package/dist/esm/components/DatePicker/DatePicker.js

@@ -9,7 +9,7 @@ import { createPortal } from 'react-dom';
 import { Calendar } from './Calendar';
 import { format } from 'date-fns';
 import { Icon } from '../Icons';
-export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
+export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, errorMsg, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
     const [open, toogleOpen] = useState(false);
     const sourceRef = useRef(null);
     const [dropdownStyles, setDropdownStyles] = useState({

package/dist/esm/components/Dropdown/Dropdown.js

@@ -7,7 +7,7 @@ import { Panel, PanelOption } from '../common';
 import { createPortal } from 'react-dom';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
+export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const sourceRef = useRef(null);
@@ -61,5 +61,5 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
             open &&
                 createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
                     options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
-            error && React.createElement(InputErrorMsg, null, error)))));
+            (error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg)))));
 };

package/dist/esm/components/File/File.js

@@ -5,7 +5,7 @@ import { Button } from '../Button';
 import { HiddenField } from './File.styles';
 import { Field } from '../Dropdown';
 import { TextMicro } from '../Typography';
-export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, subLabel }) => {
+export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, errorMsg, placeholder, fileValue, subLabel }) => {
     const fileRef = useRef(null);
     const handleSelect = (e) => {
         handleChange(e);
@@ -22,5 +22,5 @@ export const File = ({ label, labelPosition = 'top', name, disabled = false, mul
                     React.createElement(Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
                 subLabel && React.createElement(TextMicro, null, subLabel)),
             React.createElement(HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
-            error && React.createElement(InputErrorMsg, null, error))));
+            (error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg))));
 };

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

@@ -4,7 +4,7 @@ import { Aligment } from '../Aligment';
 import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
 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, readOnly = false, prefix, }) => {
+export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, }) => {
     const calculateNumberValue = (numberValue) => {
         return isNaN(parseFloat(numberValue))
             ? numberValue
@@ -73,5 +73,5 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
                     type === 'increase' && (React.createElement(IconsWrapper, null,
                         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))))))));
+                    (error && errorMsg) && React.createElement(InputErrorMsg, null, errorMsg))))))));
 };

package/dist/types/Theme/Theme.d.ts

@@ -107,4 +107,5 @@ export declare const mainTheme: {
     chipsNeutralHoverBackground: string;
     toogleBackgrund: string;
     toogleActiveBackgorund: string;
+    checkColor: string;
 };

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { InputSize, LabelPosition } from 'types';
+interface ICheckbox {
+    theme?: any;
+    handleClick: (value: boolean) => void;
+    label?: string;
+    labelPosition?: LabelPosition;
+    size?: InputSize;
+    value: boolean;
+    readOnly?: boolean;
+    name?: string;
+    width?: string;
+}
+export declare const Checkbox: FC<ICheckbox>;
+export {};

package/dist/types/components/Checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,12 @@
+import { InputSize } from 'types';
+interface IToogleElementWrapperProps {
+    size: InputSize;
+}
+export declare const ToogleCheckboxWrapper: import("styled-components").StyledComponent<"div", any, IToogleElementWrapperProps, never>;
+export declare const CheckoxIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IToogleElementProps {
+    size: InputSize;
+    active: boolean;
+}
+export declare const CheckboxElement: import("styled-components").StyledComponent<"div", any, IToogleElementProps, never>;
+export {};

package/dist/types/components/Dropdown/DropdownElements.d.ts

@@ -2,7 +2,7 @@ import { InputSize } from "../../types";
 export interface IFieldProps {
     inputSize: InputSize;
     disabled: boolean;
-    error?: string;
+    error?: boolean;
     width?: string;
     active: boolean;
 }

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

@@ -13,7 +13,7 @@ export interface FormDataProps {
     position?: string;
     zIndex?: number;
     isDisabled?: boolean;
-    error?: string;
+    error?: boolean;
     subLabel?: string;
 }
 interface FormDataParentProps {

package/dist/types/components/Input/Input.styles.d.ts

@@ -3,7 +3,7 @@ import { InputSize, InputType } from '../../types';
 interface IInputTextElementProps extends InputHTMLAttributes<HTMLInputElement> {
     inputSize: InputSize;
     disabled: boolean;
-    error?: string;
+    error?: boolean;
     width?: string;
     type: InputType;
     theme: any;

package/dist/types/types/types.d.ts

@@ -11,7 +11,8 @@ export interface IFormElement {
     size?: InputSize;
     width?: string;
     disabled?: boolean;
-    error?: string;
+    error?: boolean;
+    errorMsg?: string;
     placeholder?: string;
     readOnly?: boolean;
 }

package/package.json

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