@ludo.ninja/components 2.0.9 → 2.0.11

package/build/system/Forms/DatePicker/index.js

@@ -1,35 +1,30 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("react-calendar/dist/Calendar.css");
-const react_date_picker_1 = __importDefault(require("react-date-picker"));
-require("react-date-picker/dist/DatePicker.css");
-const react_hook_form_1 = require("react-hook-form");
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_2 = require("../../../styles/colors");
-const typography_1 = require("../../../styles/typography");
-const vars_1 = require("../../../fonts/vars");
-const calendar_svg_1 = __importDefault(require("../../../public/calendar"));
-const close20_svg_1 = __importDefault(require("../../../public/close20"));
-const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import 'react-calendar/dist/Calendar.css';
+import ReactDatePicker from 'react-date-picker';
+import 'react-date-picker/dist/DatePicker.css';
+import { Controller } from 'react-hook-form';
+import styled from 'styled-components';
+import { AccentColor, InactiveButtonColor, ProgressColorMedium, TextDarkGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
+import BoxShadow from '@ludo.ninja/ui/build/styles/mixins/boxShadow';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from "../../../styles/colors";
+import { MainText } from "../../../styles/typography";
+import { dmsansFontVarCss } from "../../../fonts/vars";
+import CalendarIcon from "../../../public/calendar";
+import CloseIcon from "../../../public/close20";
+import BasicErrorLabel from '../ErrorLabel';
 // Styles
-const StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker_1.default) `
-  font-family: ${vars_1.dmsansFontVarCss.css};
-  ${typography_1.MainText};
+const StyledReactDatePicker = styled(ReactDatePicker) `
+  font-family: ${dmsansFontVarCss.css};
+  ${MainText};
   width: 100%;
   height: 46px;
   border-radius: 6px;
   border: 1px solid
-    ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
-  background: ${colors_2.WhiteColor};
-  color: ${colors_2.BlackColor};
+    ${(props) => (props.status ? ProgressColorMinimum : BorderColorLight)};
+  background: ${WhiteColor};
+  color: ${BlackColor};
   outline: none;
   padding: 8px 12px;
 
@@ -49,13 +44,13 @@ const StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker
       border-radius: 50%;
 
       &:hover {
-        background: ${colors_1.InactiveButtonColor};
+        background: ${InactiveButtonColor};
       }
     }
 
     .react-date-picker__clear-button {
       svg path {
-        stroke: ${colors_1.TextDarkGrayColor};
+        stroke: ${TextDarkGrayColor};
       }
     }
   }
@@ -64,9 +59,9 @@ const StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker
     padding: 4px;
     width: 280px;
     border-radius: 6px;
-    border: 1px solid ${colors_2.BorderColorLight};
+    border: 1px solid ${BorderColorLight};
     box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);
-    font-family: ${vars_1.dmsansFontVarCss.css};
+    font-family: ${dmsansFontVarCss.css};
 
     button {
       border-radius: 30px;
@@ -78,23 +73,23 @@ const StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker
     }
 
     .react-calendar__tile--now {
-      ${boxShadow_1.default};
-      background: ${colors_1.ProgressColorMedium};
+      ${BoxShadow};
+      background: ${ProgressColorMedium};
 
       &:hover {
-        background: ${colors_1.ProgressColorMedium};
+        background: ${ProgressColorMedium};
       }
     }
 
     .react-calendar__tile--active,
     .react-calendar__tile--hasActive {
-      ${boxShadow_1.default};
-      background: ${colors_1.AccentColor};
-      color: ${colors_2.WhiteColor};
+      ${BoxShadow};
+      background: ${AccentColor};
+      color: ${WhiteColor};
 
       &:hover {
-        background: ${colors_1.AccentColor};
-        color: ${colors_2.WhiteColor};
+        background: ${AccentColor};
+        color: ${WhiteColor};
       }
     }
 
@@ -106,32 +101,32 @@ const StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker
   }
 
   ::placeholder {
-    color: ${colors_2.TextGrayColor};
+    color: ${TextGrayColor};
     opacity: 1;
   }
 
   :-ms-input-placeholder {
-    color: ${colors_2.TextGrayColor};
+    color: ${TextGrayColor};
   }
 
   ::-ms-input-placeholder {
-    color: ${colors_2.TextGrayColor};
+    color: ${TextGrayColor};
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(46)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
-      ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(12)};
+  ${mediaQuery.minWidthFourK} {
+    height: ${adaptiveValueCalc(46)};
+    border-radius: ${adaptiveValueCalc(6)};
+    border: ${adaptiveValueCalc(1)} solid
+      ${(props) => (props.status ? ProgressColorMinimum : BorderColorLight)};
+    padding: ${adaptiveValueCalc(12)};
   }
 `;
 const DatePicker = ({ name, control, error }) => {
     const renderError = () => {
         if (error.isNeedShowError) {
-            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
+            return _jsx(BasicErrorLabel, { children: error.message });
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledReactDatePicker, { onChange: field.onChange, onBlur: field.onBlur, value: field.value, disableCalendar: field.disabled, name: field.name, status: error.isNeedShowError, dayPlaceholder: 'dd', monthPlaceholder: 'mm', yearPlaceholder: 'yy', format: 'dd.MM.yyyy', locale: 'en', clearIcon: field.value ? (0, jsx_runtime_1.jsx)(close20_svg_1.default, {}) : null, calendarIcon: (0, jsx_runtime_1.jsx)(calendar_svg_1.default, {}) }), renderError()] })) }));
+    return (_jsx(Controller, { name: name, control: control, render: ({ field }) => (_jsxs(_Fragment, { children: [_jsx(StyledReactDatePicker, { onChange: field.onChange, onBlur: field.onBlur, value: field.value, disableCalendar: field.disabled, name: field.name, status: error.isNeedShowError, dayPlaceholder: 'dd', monthPlaceholder: 'mm', yearPlaceholder: 'yy', format: 'dd.MM.yyyy', locale: 'en', clearIcon: field.value ? _jsx(CloseIcon, {}) : null, calendarIcon: _jsx(CalendarIcon, {}) }), renderError()] })) }));
 };
-exports.default = DatePicker;
+export default DatePicker;

package/build/system/Forms/ErrorLabel/ErrorLabel.test.js

@@ -1,27 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-require("@testing-library/jest-dom");
-const react_2 = require("@testing-library/react");
-const index_1 = __importDefault(require("./index"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ErrorLabel from "./index";
 describe('ErrorLabel Component', () => {
     test('renders correctly with given children and id', () => {
-        react_1.default.act(() => {
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(index_1.default, { id: "test-id", children: "Test Label" }));
+        React.act(() => {
+            render(_jsx(ErrorLabel, { id: "test-id", children: "Test Label" }));
         });
-        const labelElement = react_2.screen.getByText('Test Label');
+        const labelElement = screen.getByText('Test Label');
         expect(labelElement).toBeInTheDocument();
         expect(labelElement).toHaveAttribute('for', 'test-id');
     });
     test('renders correctly without id', () => {
-        react_1.default.act(() => {
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(index_1.default, { children: "Test Label Without ID" }));
+        React.act(() => {
+            render(_jsx(ErrorLabel, { children: "Test Label Without ID" }));
         });
-        const labelElement = react_2.screen.getByText('Test Label Without ID');
+        const labelElement = screen.getByText('Test Label Without ID');
         expect(labelElement).toBeInTheDocument();
         expect(labelElement).not.toHaveAttribute('for');
     });

package/build/system/Forms/ErrorLabel/index.js

@@ -1,25 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const StyledLabel = styled_components_1.default.div `
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+const StyledLabel = styled.div `
   user-select: none;
   padding-top: 8px;
   color: #f4205f;
   font-size: 13px;
   font-weight: 400;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+  ${mediaQuery.minWidthFourK} {
+    padding-top: ${adaptiveValueCalc(8)};
+    font-size: ${adaptiveValueCalc(13)};
   }
 `;
 const BasicErrorLabel = ({ children, id }) => {
-    return (0, jsx_runtime_1.jsx)(StyledLabel, { htmlFor: id, children: children });
+    return _jsx(StyledLabel, { htmlFor: id, children: children });
 };
-exports.default = BasicErrorLabel;
+export default BasicErrorLabel;

package/build/system/Forms/Input/Input.test.js

@@ -1,16 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom");
-const react_1 = require("@testing-library/react");
-const colors_1 = require("../../../styles/colors");
-const index_1 = __importDefault(require("./index"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ProgressColorMinimum } from "../../../styles/colors";
+import Input from "./index";
 jest.mock('../ErrorLabel', () => ({
     __esModule: true,
-    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+    default: ({ children }) => (_jsx("div", { "data-testid": "error-label", children: children })),
 }));
 const mockRegister = {
     name: 'test-input',
@@ -24,30 +19,30 @@ const mockData = {
     labelText: 'Test Input',
 };
 const renderComponent = (error) => {
-    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { data: mockData, register: mockRegister, error: error }));
+    return render(_jsx(Input, { data: mockData, register: mockRegister, error: error }));
 };
 describe('Input Component', () => {
     test('renders input element with correct attributes', () => {
         renderComponent({ isNeedShowError: false, message: undefined });
-        const inputElement = react_1.screen.getByPlaceholderText('Enter text...');
+        const inputElement = screen.getByPlaceholderText('Enter text...');
         expect(inputElement).toBeInTheDocument();
         expect(inputElement.name).toBe('test-input');
         expect(inputElement.id).toBe('test-input');
     });
     test('applies error styles when there is an error', () => {
         renderComponent({ isNeedShowError: true, message: 'Error message' });
-        const inputElement = react_1.screen.getByPlaceholderText('Enter text...');
-        expect(inputElement).toHaveStyle(`border-color: ${colors_1.ProgressColorMinimum}`);
-        expect(react_1.screen.getByTestId('error-label')).toHaveTextContent('Error message');
+        const inputElement = screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toHaveStyle(`border-color: ${ProgressColorMinimum}`);
+        expect(screen.getByTestId('error-label')).toHaveTextContent('Error message');
     });
     test('does not render error label when there is no error', () => {
         renderComponent({ isNeedShowError: false, message: undefined });
-        const errorLabel = react_1.screen.queryByTestId('error-label');
+        const errorLabel = screen.queryByTestId('error-label');
         expect(errorLabel).toBeNull();
     });
     test('renders error label when there is an error', () => {
         renderComponent({ isNeedShowError: true, message: 'Error message' });
-        const errorLabel = react_1.screen.getByTestId('error-label');
+        const errorLabel = screen.getByTestId('error-label');
         expect(errorLabel).toBeInTheDocument();
         expect(errorLabel).toHaveTextContent('Error message');
     });

package/build/system/Forms/Input/index.js

@@ -1,48 +1,42 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_2 = require("../../../styles/colors");
-const typography_1 = require("../../../styles/typography");
-const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
-const vars_1 = require("../../../fonts/vars");
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { DisabledGrayColor, DisabledLightGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from "../../../styles/colors";
+import { MainText } from "../../../styles/typography";
+import BasicErrorLabel from "../ErrorLabel";
+import { dmsansFontVarCss } from "../../../fonts/vars";
 // Styles
-exports.StyledInput = styled_components_1.default.input `
-  font-family: ${vars_1.dmsansFontVarCss.css};
-  ${typography_1.MainText};
+export const StyledInput = styled.input `
+  font-family: ${dmsansFontVarCss.css};
+  ${MainText};
   width: 100%;
   height: 46px;
   border-radius: 6px;
   border: 1px solid
-    ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
-  background: ${colors_2.WhiteColor};
-  color: ${colors_2.BlackColor};
+    ${(props) => (props.status ? ProgressColorMinimum : BorderColorLight)};
+  background: ${WhiteColor};
+  color: ${BlackColor};
   outline: none;
   padding: 12px;
 
   ::placeholder {
-    color: ${colors_2.TextGrayColor};
+    color: ${TextGrayColor};
     opacity: 1;
   }
 
   :-ms-input-placeholder {
-    color: ${colors_2.TextGrayColor};
+    color: ${TextGrayColor};
   }
 
   ::-ms-input-placeholder {
-    color: ${colors_2.TextGrayColor};
+    color: ${TextGrayColor};
   }
 
   :disabled {
-    background: ${colors_1.DisabledLightGrayColor};
-    color: ${colors_1.DisabledGrayColor};
+    background: ${DisabledLightGrayColor};
+    color: ${DisabledGrayColor};
   }
 
   // :focus {
@@ -53,20 +47,20 @@ exports.StyledInput = styled_components_1.default.input `
   //   transition: border-color 0.3s ease-in-out;
   //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
   // }
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(46)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
-      ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(12)};
+  ${mediaQuery.minWidthFourK} {
+    height: ${adaptiveValueCalc(46)};
+    border-radius: ${adaptiveValueCalc(6)};
+    border: ${adaptiveValueCalc(1)} solid
+      ${(props) => (props.status ? ProgressColorMinimum : BorderColorLight)};
+    padding: ${adaptiveValueCalc(12)};
   }
 `;
 const Input = ({ data, register, error }) => {
     const renderError = () => {
         if (error.isNeedShowError) {
-            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
+            return _jsx(BasicErrorLabel, { children: error.message });
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.StyledInput, { ...register, status: error.isNeedShowError, id: data.name, name: data.name, autoComplete: 'off', placeholder: data.placeHolder }), renderError()] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledInput, { ...register, status: error.isNeedShowError, id: data.name, name: data.name, autoComplete: 'off', placeholder: data.placeHolder }), renderError()] }));
 };
-exports.default = Input;
+export default Input;

package/build/system/Forms/Input/type.js

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

package/build/system/Forms/Messages/index.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const messages = {
     galleryName: {
         maxLength: {
@@ -66,4 +64,4 @@ const messages = {
         },
     },
 };
-exports.default = messages;
+export default messages;

package/build/system/Forms/RadioInput/index.js

@@ -1,19 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const colors_2 = require("../../../styles/colors");
-const Input_1 = require("../Input");
-const StyledLabel = styled_components_1.default.label `
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { BorderColorLight } from '@ludo.ninja/ui/build/styles/colors';
+import { AccentColor, BlackColor, WhiteColor } from "../../../styles/colors";
+import { StyledInput } from "../Input";
+const StyledLabel = styled.label `
   position: relative;
   padding: 8px 0 8px 27px;
   cursor: pointer;
   font-size: 1.4em;
-  color: ${colors_2.BlackColor};
+  color: ${BlackColor};
   font-weight: 500;
   user-select: none;
 
@@ -32,7 +27,7 @@ const StyledLabel = styled_components_1.default.label `
     left: 0;
     height: 18px;
     width: 18px;
-    background-color: ${colors_1.BorderColorLight};
+    background-color: ${BorderColorLight};
     border-radius: 50%;
     transition: background-color 200ms;
   }
@@ -46,13 +41,13 @@ const StyledLabel = styled_components_1.default.label `
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: ${colors_2.WhiteColor};
+    background: ${WhiteColor};
     transition: width 200ms, height 200ms;
   }
 
   input:checked ~ .checkmark,
   .checked {
-    background-color: ${colors_2.AccentColor};
+    background-color: ${AccentColor};
   }
 
   input:checked ~ .checkmark:after,
@@ -68,6 +63,6 @@ const BasicRadioInput = ({ radioLabel, radioValue, radioChecked, handleChange, c
         }
         handleChange(e.target.value);
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledLabel, { className: className, children: [radioLabel, (0, jsx_runtime_1.jsx)("input", { type: "radio", checked: radioChecked, value: radioValue, id: `${radioValue}_${radioLabel}`, onChange: (e) => handleChangeRadioInput(e) }), withInput && ((0, jsx_runtime_1.jsx)(Input_1.StyledInput, { status: false, ...innerTextInputRef, disabled: !radioChecked })), (0, jsx_runtime_1.jsx)("span", { className: `checkmark` })] }));
+    return (_jsxs(StyledLabel, { className: className, children: [radioLabel, _jsx("input", { type: "radio", checked: radioChecked, value: radioValue, id: `${radioValue}_${radioLabel}`, onChange: (e) => handleChangeRadioInput(e) }), withInput && (_jsx(StyledInput, { status: false, ...innerTextInputRef, disabled: !radioChecked })), _jsx("span", { className: `checkmark` })] }));
 };
-exports.default = BasicRadioInput;
+export default BasicRadioInput;