@typeolymp/ui-components 1.5.8 → 1.7.0

package/build/components/atoms/Button/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React from "react";
 export declare type PropsType = {
     label: string | JSX.Element;
     color?: "blue" | "green" | "white";
@@ -7,7 +7,9 @@ export declare type PropsType = {
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     tabIndex?: number;
+    href?: string;
+    asAnchor?: boolean;
     onClick?(): void;
 };
-declare const Button: FC<PropsType>;
+declare const Button: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default Button;

package/build/components/atoms/Button/stories.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { PropsType } from ".";
 declare const _default: {
     title: string;
-    component: React.FC<PropsType>;
+    component: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 };
 export default _default;
 export declare const Overview: () => JSX.Element;

package/build/components/atoms/Icon/index.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 export declare type PropsType = {
-    type: "check" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "eye" | "eyeInvisible" | "warning" | "questionCircle" | "play" | "lock" | "cross" | "bulb" | "star" | "setting" | "reload" | "expand" | "calendar";
+    type: "check" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "eye" | "eyeInvisible" | "warning" | "questionCircle" | "play" | "lock" | "cross" | "bulb" | "star" | "setting" | "reload" | "expand" | "calendar" | "menuAlt";
     size?: "tiny" | "small" | "medium" | "large";
     color?: "blue" | "green" | "orange" | "red" | "purple" | "gray" | "darkGray" | "lightGray" | "white";
     onClick?(e?: MouseEvent): void;

package/build/components/atoms/Input/Date.d.ts

@@ -1,7 +1,6 @@
 import { FC } from "react";
 import { PropsType as InputPropsType } from ".";
 export declare type PropsType = InputPropsType & {
-    value?: string;
     min?: string;
     max?: string;
 };

package/build/components/atoms/Input/index.d.ts

@@ -3,7 +3,7 @@ import { PropsType as PasswordInputPropsType } from "./Password";
 import { PropsType as DateInputPropsType } from "./Date";
 export declare type PropsType = {
     id: string;
-    initialValue?: string;
+    defaultValue?: string;
     placeholder?: string;
     autoComplete?: string;
     autoFocus?: boolean;

package/build/components/atoms/Number/index.d.ts

@@ -1,13 +1,13 @@
 import { FC } from "react";
 export declare type PropsType = {
-    initialValue?: number;
+    defaultValue?: number;
     autoComplete?: string;
     autoFocus?: boolean;
     min?: number;
     max?: number;
     disabled?: boolean;
     id?: string;
-    onChange?(value: string): void;
+    onChange?(value: number): void;
     onBlur?(): void;
 };
 declare const Number: FC<PropsType>;

package/build/components/atoms/Number/stories.d.ts

@@ -9,7 +9,7 @@ export declare const Overview: () => JSX.Element;
 export declare const Playground: {
     (args: any): JSX.Element;
     args: {
-        initialValue: number;
+        defaultValue: number;
         min: number;
         max: number;
         disabled: boolean;

package/build/components/atoms/Radio/index.d.ts

@@ -5,7 +5,8 @@ export declare type PropsType = {
     value: string;
     disabled?: boolean;
     autoFocus?: boolean;
-    defaultChecked?: boolean;
+    checked?: boolean;
+    defaultValue?: boolean;
     onChange?(value: string): void;
     onBlur?(): void;
 };

package/build/components/atoms/Select/index.d.ts

@@ -3,7 +3,7 @@ export declare type PropsType = {
     id: string;
     name: string;
     disabled?: boolean;
-    initialValue?: string;
+    defaultValue?: string;
     placeholder?: string;
     autoFocus?: boolean;
     onChange?(value: string): void;

package/build/components/atoms/Textarea/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+export declare type PropsType = {
+    id: string;
+    defaultValue?: string;
+    placeholder?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    rows?: number;
+    onChange?(value: string): void;
+    onBlur?(): void;
+};
+declare const Textarea: FC<PropsType>;
+export default Textarea;

package/build/components/atoms/Textarea/stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { PropsType } from ".";
+declare const _default: {
+    title: string;
+    component: React.FC<PropsType>;
+};
+export default _default;
+export declare const Overview: () => JSX.Element;

package/build/components/atoms/Textarea/styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledTextarea: any;

package/build/components/atoms/Toggle/index.d.ts

@@ -4,7 +4,7 @@ export declare type PropsType = {
     name: string;
     disabled?: boolean;
     autoFocus?: boolean;
-    defaultChecked?: boolean;
+    defaultValue?: boolean;
     onChange?(value: boolean): void;
     onBlur?(): void;
 };

package/build/components/molecules/Checkboxes/index.d.ts

@@ -5,11 +5,11 @@ export declare type PropsType = {
     items: Array<{
         id: string;
         value: string;
-        label: string | JSX.Element;
+        label: string | JSX.Element | JSX.Element[];
     }>;
-    initialValue?: Array<string>;
+    defaultValue?: string[];
     autoFocus?: boolean;
-    onChange?(field: string, value: Array<string>): void;
+    onChange?(field: string, value: string[]): void;
     onBlur?(fieldName: string): void;
 };
 declare const Checkboxes: FC<PropsType>;

package/build/components/molecules/Collapse/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+export declare type PropsType = {
+    items: Array<{
+        title: string;
+        content: string;
+    }>;
+};
+declare const Collapse: FC<PropsType>;
+export default Collapse;

package/build/components/molecules/Collapse/stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { PropsType } from ".";
+declare const _default: {
+    title: string;
+    component: React.FC<PropsType>;
+};
+export default _default;
+export declare const Overview: {
+    (): JSX.Element;
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+};

package/build/components/molecules/Collapse/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Container: any;
+export declare const Item: any;

package/build/components/molecules/DateInputField/index.d.ts

@@ -3,7 +3,7 @@ export declare type PropsType = {
     name: string;
     label: string | JSX.Element;
     autoComplete?: string;
-    initialValue?: string;
+    defaultValue?: string;
     min?: string;
     max?: string;
     autoFocus?: boolean;

package/build/components/molecules/InputField/index.d.ts

@@ -2,8 +2,9 @@ import { FC } from "react";
 export declare type PropsType = {
     name: string;
     label: string | JSX.Element;
+    tips?: string[];
     autoComplete?: string;
-    initialValue?: string;
+    defaultValue?: string;
     autoFocus?: boolean;
     disabled?: boolean;
     placeholder?: string;

package/build/components/molecules/LocaleSelect/index.d.ts

@@ -2,8 +2,8 @@ import { FC } from "react";
 import { LocaleType } from "@typeolymp/utility/build/types";
 export declare type PropsType = {
     color?: "light" | "dark";
-    locales: Array<LocaleType>;
-    initialValue: LocaleType;
+    locales: LocaleType[];
+    defaultValue: LocaleType;
     onChange(locale: LocaleType): void;
 };
 declare const LocaleSelect: FC<PropsType>;

package/build/components/molecules/NumberField/index.d.ts

@@ -3,12 +3,12 @@ export declare type PropsType = {
     name: string;
     label: string | JSX.Element;
     autoComplete?: string;
-    initialValue?: number;
+    defaultValue?: number;
     autoFocus?: boolean;
     disabled?: any;
     min?: number;
     max?: number;
-    onChange?(field: string, value: string): void;
+    onChange?(field: string, value: number): void;
     onBlur?(fieldName: string): void;
 };
 declare const NumberField: FC<PropsType>;

package/build/components/molecules/PasswordInputField/index.d.ts

@@ -1,12 +1,14 @@
 import { FC } from "react";
+import { LocaleType } from "@typeolymp/utility/build/types";
 export declare type PropsType = {
     name: string;
     label: string | JSX.Element;
     autoComplete?: string;
-    initialValue?: string;
+    defaultValue?: string;
     autoFocus?: boolean;
     disabled?: boolean;
     placeholder?: string;
+    helper?: LocaleType;
     onChange?(fieldName: string, value: string): void;
     onKeyPress?(e: KeyboardEvent): void;
     onBlur?(fieldName: string): void;

package/build/components/molecules/PasswordInputField/styles.d.ts

@@ -1,2 +1,4 @@
 export declare const Container: any;
 export declare const Label: any;
+export declare const HelperContainer: any;
+export declare const Helper: any;

package/build/components/molecules/PasswordInputField/translations.d.ts

@@ -0,0 +1,11 @@
+import { LocaleType } from "@typeolymp/utility/build/types";
+declare type TranslationsType = {
+    capitalLetter: string;
+    number: string;
+    specialCharacter: string;
+    length: string;
+};
+declare const translations: {
+    [key in LocaleType]: TranslationsType;
+};
+export default translations;

package/build/components/molecules/RadioGroup/index.d.ts

@@ -7,7 +7,7 @@ export declare type PropsType = {
         value: string;
         label: string | JSX.Element;
     }>;
-    initialValue?: string;
+    defaultValue?: string;
     autoFocus?: boolean;
     onChange?(fieldName: string, value: string): void;
     onBlur?(fieldName: string): void;

package/build/components/molecules/SelectField/index.d.ts

@@ -7,7 +7,7 @@ export declare type PropsType = {
         label: string;
     }>;
     disabled?: boolean;
-    initialValue?: string;
+    defaultValue?: string;
     placeholder?: string;
     autoFocus?: boolean;
     onChange?(fieldName: string, value: string): void;

package/build/components/molecules/Steps/index.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 declare type StepType = {
-    title: string;
+    title?: string;
     onClick?(step: number): void;
 };
 export declare type PropsType = {

package/build/components/molecules/TextareaField/index.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export declare type PropsType = {
+    name: string;
+    label: string | JSX.Element;
+    tips?: string[];
+    autoComplete?: string;
+    defaultValue?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    rows?: number;
+    onChange?(fieldName: string, value: string): void;
+    onBlur?(fieldName: string): void;
+};
+declare const TextareaField: FC<PropsType>;
+export default TextareaField;

package/build/components/molecules/TextareaField/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Container: any;
+export declare const Label: any;

package/build/components/molecules/ToggleField/index.d.ts

@@ -3,7 +3,7 @@ export declare type PropsType = {
     name: string;
     label: string | JSX.Element;
     disabled?: boolean;
-    initialValue?: boolean;
+    defaultValue?: boolean;
     autoFocus?: boolean;
     onChange?(fieldName: string, value: boolean): void;
     onBlur?(fieldName: string): void;

package/build/components/organisms/Form/index.d.ts

@@ -1,8 +1,9 @@
-import { FC } from "react";
+import React from "react";
 import { PropsType as ButtonPropsType } from "../../atoms/Button";
 import { PropsType as InputFieldPropsType } from "../../molecules/InputField";
 import { PropsType as PasswordInputFieldPropsType } from "../../molecules/PasswordInputField";
 import { PropsType as DateInputFieldPropsType } from "../../molecules/DateInputField";
+import { PropsType as TextareaFieldPropsType } from "../../molecules/TextareaField";
 import { PropsType as RadioGroupPropsType } from "../../molecules/RadioGroup";
 import { PropsType as NumberFieldPropsType } from "../../molecules/NumberField";
 import { PropsType as CheckboxesPropsType } from "../../molecules/Checkboxes";
@@ -28,6 +29,9 @@ declare type PasswordInputFieldType = {
 declare type DateInputFieldType = {
     type: "date";
 } & DateInputFieldPropsType & ValidationType;
+declare type TextareaFieldType = {
+    type: "textarea";
+} & TextareaFieldPropsType & ValidationType;
 declare type RadioGroupFieldType = {
     type: "radio";
 } & RadioGroupPropsType & ValidationType;
@@ -43,11 +47,11 @@ declare type SelectFieldType = {
 declare type ToggleFieldType = {
     type: "toggle";
 } & ToggleFieldPropsType & ValidationType;
-export declare type FormFieldType = InputFieldType | PasswordInputFieldType | DateInputFieldType | RadioGroupFieldType | NumberFieldType | CheckboxesFieldType | SelectFieldType | ToggleFieldType;
+export declare type FormFieldType = InputFieldType | PasswordInputFieldType | DateInputFieldType | TextareaFieldType | RadioGroupFieldType | NumberFieldType | CheckboxesFieldType | SelectFieldType | ToggleFieldType;
 export declare type PropsType = {
     title?: string;
     description?: string;
-    fields: Array<FormFieldType>;
+    fields: FormFieldType[];
     button?: ButtonPropsType;
     onChangeFields?(newValues: {
         [key: string]: ValueType;
@@ -61,5 +65,8 @@ export declare type PropsType = {
         [key: string]: FeedbackType;
     }): void;
 };
-declare const Form: FC<PropsType>;
+export declare type FormType = {
+    resetForm(): void;
+};
+declare const Form: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<FormType>>;
 export default Form;

package/build/components/organisms/Form/stories.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
+import { FormType } from "../../organisms/Form";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../organisms/Form").PropsType>;
+    component: React.ForwardRefExoticComponent<import("../../organisms/Form").PropsType & React.RefAttributes<FormType>>;
 };
 export default _default;
 export declare const AllTogether: () => JSX.Element;
+export declare const ResetForm: () => JSX.Element;
 export declare const Input: () => JSX.Element;
 export declare const Date: () => JSX.Element;
 export declare const Radio: () => JSX.Element;

package/build/components/organisms/Keyboard/keys.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    _id: {
+        $oid: string;
+    };
+    key: string;
+    keyboardLayout: string;
+    index: number;
+    hand: string;
+    finger: string;
+    color: string;
+    isShiftKey: boolean;
+    __v: number;
+}[];
+export default _default;

package/build/components/organisms/Keyboard/stories.d.ts

@@ -13,7 +13,7 @@ export declare const Playground: {
     };
     argTypes: {
         layout: {
-            options: string[];
+            options: import("@typeolymp/utility/build/types/KeyboardLayout").default[];
             control: {
                 type: string;
             };

package/build/index.d.ts

@@ -19,6 +19,7 @@ import Trophy from "./components/atoms/Trophy";
 import Alert from "./components/molecules/Alert";
 import Card from "./components/molecules/Card";
 import Checkboxes from "./components/molecules/Checkboxes";
+import Collapse from "./components/molecules/Collapse";
 import DateInputField from "./components/molecules/DateInputField";
 import IconButton from "./components/molecules/IconButton";
 import InputField from "./components/molecules/InputField";
@@ -39,4 +40,4 @@ import Tooltip from "./components/molecules/Tooltip";
 import Form from "./components/organisms/Form";
 import Keyboard from "./components/organisms/Keyboard";
 import Modal from "./components/organisms/Modal";
-export { theme, Button, Checkbox, Flag, Heading, Icon, Illustration, Input, Logo, Medal, Number, Paragraph, Radio, Select, Spacer, Subheading, Toggle, Trophy, Alert, Card, Checkboxes, DateInputField, IconButton, InputField, Link, Loading, LocaleSelect, Medals, Notification, NumberField, PasswordInputField, Popup, ProgressBar, Steps, RadioGroup, SelectField, ToggleField, Tooltip, Form, Keyboard, Modal, };
+export { theme, Button, Checkbox, Flag, Heading, Icon, Illustration, Input, Logo, Medal, Number, Paragraph, Radio, Select, Spacer, Subheading, Toggle, Trophy, Alert, Card, Checkboxes, Collapse, DateInputField, IconButton, InputField, Link, Loading, LocaleSelect, Medals, Notification, NumberField, PasswordInputField, Popup, ProgressBar, Steps, RadioGroup, SelectField, ToggleField, Tooltip, Form, Keyboard, Modal, };