@typeolymp/ui-components 1.0.1 → 1.2.0

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

@@ -5,6 +5,7 @@ export declare type PropsType = {
     size?: "small" | "medium";
     fluid?: boolean;
     disabled?: boolean;
+    type?: "button" | "submit" | "reset";
     tabIndex?: number;
     onClick?(): void;
 };

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

@@ -1,10 +1,12 @@
 import { FC } from "react";
 export declare type PropsType = {
-    initialValue?: boolean;
+    id: string;
+    name: string;
+    value: string;
     disabled?: boolean;
     autoFocus?: boolean;
-    id?: string;
-    onChange?(value: boolean): void;
+    checked?: boolean;
+    onChange?(value: string): void;
     onBlur?(): void;
 };
 declare const Checkbox: FC<PropsType>;

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { LocaleType } from "../../../lib/types";
+import { LocaleType } from "@typeolymp/utility/types";
 export declare type PropsType = {
     locale: LocaleType;
     size?: "small" | "medium" | "large";

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

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

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

@@ -1,11 +1,11 @@
 import { FC } from "react";
 export declare type PropsType = {
+    id: string;
     initialValue?: string;
     placeholder?: string;
-    autoComplete?: string;
+    autocomplete?: string;
     autoFocus?: boolean;
     disabled?: boolean;
-    id?: string;
     onChange?(value: string): void;
     onBlur?(): void;
 };

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

@@ -12,7 +12,7 @@ export declare const Playground: {
     (args: any): JSX.Element;
     args: {
         placeholder: string;
-        autoComplete: string;
+        autocomplete: string;
         id: string;
         disabled: boolean;
         password: boolean;

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

@@ -1,6 +1,7 @@
 import { FC } from "react";
+import { MedalType } from "@typeolymp/utility/types";
 export declare type PropsType = {
-    type: "gold" | "silver" | "bronze";
+    type: MedalType;
     size?: "small" | "large";
 };
 declare const Medal: FC<PropsType>;

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

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

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

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

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

@@ -0,0 +1,19 @@
+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;
+export declare const Playground: {
+    (args: any): JSX.Element;
+    args: {
+        initialValue: number;
+        min: number;
+        max: number;
+        disabled: boolean;
+        id: string;
+    };
+    argTypes: {};
+};

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

@@ -0,0 +1,2 @@
+export declare const Wrapper: any;
+export declare const StyledInputNumber: any;

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

@@ -1,10 +1,12 @@
 import { FC } from "react";
 export declare type PropsType = {
-    initialValue?: boolean;
+    id: string;
+    name: string;
+    value: string;
     disabled?: boolean;
     autoFocus?: boolean;
-    id?: string;
-    onChange?(value: boolean): void;
+    defaultChecked?: boolean;
+    onChange?(value: string): void;
     onBlur?(): void;
 };
 declare const Radio: FC<PropsType>;

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

@@ -1,2 +1 @@
 export declare const StyledRadio: any;
-export declare const CheckedDot: any;

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

@@ -1,8 +1,13 @@
 import { FC } from "react";
 export declare type PropsType = {
-    placeholder?: string;
+    id: string;
+    name: string;
     disabled?: boolean;
-    onChange?(): void;
+    initialValue?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    onChange?(value: string): void;
+    onBlur?(): void;
 };
 declare const Select: FC<PropsType>;
 export default Select;

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

@@ -0,0 +1,12 @@
+import { FC } from "react";
+export declare type PropsType = {
+    id: string;
+    name: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    defaultChecked?: boolean;
+    onChange?(value: boolean): void;
+    onBlur?(): void;
+};
+declare const Toggle: FC<PropsType>;
+export default Toggle;

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ColorType } from "../../../lib/types";
+import { ColorType } from "@typeolymp/utility/types";
 export declare type PropsType = {
     ellipse?: ColorType;
     id?: string;

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

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export declare type PropsType = {
+    name: string;
+    legend: string | null;
+    items: Array<{
+        id: string;
+        value: string;
+        label: string | JSX.Element;
+    }>;
+    initialValue?: Array<string>;
+    autoFocus?: boolean;
+    onChange?(field: string, value: Array<string>): void;
+    onBlur?(fieldName: string): void;
+};
+declare const Checkboxes: FC<PropsType>;
+export default Checkboxes;

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

@@ -0,0 +1,4 @@
+export declare const Fieldset: any;
+export declare const CheckboxContainer: any;
+export declare const CheckboxWrapper: any;
+export declare const Label: any;

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

@@ -6,7 +6,6 @@ export declare type FeedbackType = {
 };
 declare type FieldBaseType = {
     name: string;
-    label: string;
     initialValue?: ValueType;
     autocomplete?: string;
     autoFocus?: boolean;
@@ -15,19 +14,16 @@ declare type FieldBaseType = {
 };
 declare type InputFieldType = {
     type: "text" | "password";
-} & FieldBaseType;
-declare type CheckboxFieldType = {
-    type: "checkbox";
-} & FieldBaseType;
-declare type RadioFieldType = {
-    type: "radio";
+    label: string | JSX.Element;
+    placeholder?: string;
 } & FieldBaseType;
 declare type NumberFieldType = {
     type: "number";
+    label: string | JSX.Element;
     min?: number;
     max?: number;
 } & FieldBaseType;
-export declare type PropsType = InputFieldType | CheckboxFieldType | RadioFieldType | NumberFieldType;
+export declare type PropsType = InputFieldType | NumberFieldType;
 declare const FormField: FC<PropsType & {
     onChange?(field: string, value: ValueType): void;
     onBlur?(): void;

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

@@ -1,3 +1,5 @@
 export declare const FieldWrapper: any;
+export declare const RadioGroup: any;
+export declare const RadioWrapper: any;
 export declare const Label: any;
 export declare const FeedbackWrapper: any;

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

@@ -0,0 +1,15 @@
+import { FC } from "react";
+export declare type PropsType = {
+    name: string;
+    label: string | JSX.Element;
+    autocomplete?: string;
+    initialValue?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    isPassword?: boolean;
+    onChange?(fieldName: string, value: string): void;
+    onBlur?(fieldName: string): void;
+};
+declare const InputField: FC<PropsType>;
+export default InputField;

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

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

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ColorType } from "../../../lib/types";
+import { ColorType } from "@typeolymp/utility/types";
 export declare type PropsType = {
     color: ColorType;
     text?: string;

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

@@ -0,0 +1,15 @@
+import { FC } from "react";
+export declare type PropsType = {
+    name: string;
+    label: string | JSX.Element;
+    autocomplete?: string;
+    initialValue?: number;
+    autoFocus?: boolean;
+    disabled?: any;
+    min?: number;
+    max?: number;
+    onChange?(field: string, value: string): void;
+    onBlur?(fieldName: string): void;
+};
+declare const NumberField: FC<PropsType>;
+export default NumberField;

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

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

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

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export declare type PropsType = {
+    name: string;
+    legend: string | null;
+    items: Array<{
+        id: string;
+        value: string;
+        label: string | JSX.Element;
+    }>;
+    initialValue?: string;
+    autoFocus?: boolean;
+    onChange?(fieldName: string, value: string): void;
+    onBlur?(fieldName: string): void;
+};
+declare const RadioGroup: FC<PropsType>;
+export default RadioGroup;

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

@@ -0,0 +1,4 @@
+export declare const Fieldset: any;
+export declare const RadioContainer: any;
+export declare const RadioWrapper: any;
+export declare const Label: any;

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

@@ -0,0 +1,17 @@
+import { FC } from "react";
+export declare type PropsType = {
+    name: string;
+    label: string | JSX.Element;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    disabled?: boolean;
+    initialValue?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    onChange?(fieldName: string, value: string): void;
+    onBlur?(fieldName: string): void;
+};
+declare const SelectField: FC<PropsType>;
+export default SelectField;

package/build/components/molecules/SelectField/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

@@ -0,0 +1,12 @@
+import { FC } from "react";
+export declare type PropsType = {
+    name: string;
+    label: string | JSX.Element;
+    disabled?: boolean;
+    initialValue?: boolean;
+    autoFocus?: boolean;
+    onChange?(fieldName: string, value: boolean): void;
+    onBlur?(fieldName: string): void;
+};
+declare const ToggleField: FC<PropsType>;
+export default ToggleField;

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

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

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { FeedbackType } from "../";
+declare const WithValidation: FC<FeedbackType>;
+export default WithValidation;

package/build/components/organisms/Form/WithValidation/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const FieldWrapper: any;
+export declare const FeedbackWrapper: any;

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

@@ -1,12 +1,55 @@
 import { FC } from "react";
 import { PropsType as ButtonPropsType } from "../../atoms/Button";
-import { PropsType as FormFieldPropsType, ValueType } from "../../molecules/FormField";
+import { PropsType as InputFieldPropsType } from "../../molecules/InputField";
+import { PropsType as RadioGroupPropsType } from "../../molecules/RadioGroup";
+import { PropsType as NumberFieldPropsType } from "../../molecules/NumberField";
+import { PropsType as CheckboxesPropsType } from "../../molecules/Checkboxes";
+import { PropsType as SelectFieldPropsType } from "../../molecules/SelectField";
+import { PropsType as ToggleFieldPropsType } from "../../molecules/ToggleField";
+declare type ValueType = string | number | boolean | Array<string>;
+export declare type FeedbackType = {
+    message: string;
+    status: "error" | "success" | "";
+};
+declare type ValidationType = {
+    validateTrigger?: Array<"onBlur" | "onChange">;
+    validator?(value: ValueType): FeedbackType;
+    feedback?: FeedbackType;
+};
+declare type InputFieldType = {
+    type: "text" | "password";
+} & InputFieldPropsType & ValidationType;
+declare type RadioGroupFieldType = {
+    type: "radio";
+} & RadioGroupPropsType & ValidationType;
+declare type NumberFieldType = {
+    type: "number";
+} & NumberFieldPropsType & ValidationType;
+declare type CheckboxesFieldType = {
+    type: "checkbox";
+} & CheckboxesPropsType & ValidationType;
+declare type SelectFieldType = {
+    type: "select";
+} & SelectFieldPropsType & ValidationType;
+declare type ToggleFieldType = {
+    type: "toggle";
+} & ToggleFieldPropsType & ValidationType;
+export declare type FormFieldType = InputFieldType | RadioGroupFieldType | NumberFieldType | CheckboxesFieldType | SelectFieldType | ToggleFieldType;
 export declare type PropsType = {
     title?: string;
-    fields: Array<FormFieldPropsType>;
-    button: ButtonPropsType;
-    onSubmit(values: {
-        [index: string]: ValueType;
+    description?: string;
+    fields: Array<FormFieldType>;
+    button?: ButtonPropsType;
+    onChangeFields?(newValues: {
+        [key: string]: ValueType;
+    }, oldValues: {
+        [key: string]: ValueType;
+    }): void;
+    onSubmit?(values: {
+        [key: string]: ValueType;
+    }): void;
+    onError?(feedback: {
+        [key: string]: FeedbackType;
     }): void;
 };
 declare const Form: FC<PropsType>;

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

@@ -1,7 +1,16 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.FC<import(".").PropsType>;
+    component: React.FC<import("../../organisms/Form").PropsType>;
 };
 export default _default;
-export declare const Overview: () => JSX.Element;
+export declare const AllTogether: () => JSX.Element;
+export declare const Input: () => JSX.Element;
+export declare const Radio: () => JSX.Element;
+export declare const Number: () => JSX.Element;
+export declare const Checkbox: () => JSX.Element;
+export declare const Select: () => JSX.Element;
+export declare const Toggle: () => JSX.Element;
+export declare const ValidationOnSubmit: () => JSX.Element;
+export declare const ValidationOnBlur: () => JSX.Element;
+export declare const ValidationOnChange: () => JSX.Element;

package/build/index.d.ts

@@ -8,24 +8,31 @@ import Illustration from "./components/atoms/Illustration";
 import Input from "./components/atoms/Input";
 import Logo from "./components/atoms/Logo";
 import Medal from "./components/atoms/Medal";
+import Number from "./components/atoms/Number";
 import Paragraph from "./components/atoms/Paragraph";
 import Radio from "./components/atoms/Radio";
 import Select from "./components/atoms/Select";
 import Spacer from "./components/atoms/Spacer";
 import Subheading from "./components/atoms/Subheading";
+import Toggle from "./components/atoms/Toggle";
 import Trophy from "./components/atoms/Trophy";
 import Alert from "./components/molecules/Alert";
 import Card from "./components/molecules/Card";
-import FormField from "./components/molecules/FormField";
+import Checkboxes from "./components/molecules/Checkboxes";
 import IconButton from "./components/molecules/IconButton";
+import InputField from "./components/molecules/InputField";
 import Link from "./components/molecules/Link";
 import Loading from "./components/molecules/Loading";
 import Medals from "./components/molecules/Medals";
 import Notification from "./components/molecules/Notification";
+import NumberField from "./components/molecules/NumberField";
 import Popup from "./components/molecules/Popup";
 import ProgressBar from "./components/molecules/ProgressBar";
+import RadioGroup from "./components/molecules/RadioGroup";
+import SelectField from "./components/molecules/SelectField";
+import ToggleField from "./components/molecules/ToggleField";
 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, Paragraph, Radio, Select, Spacer, Subheading, Trophy, Alert, Card, FormField, IconButton, Link, Loading, Medals, Notification, Popup, ProgressBar, 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, IconButton, InputField, Link, Loading, Medals, Notification, NumberField, Popup, ProgressBar, RadioGroup, SelectField, ToggleField, Tooltip, Form, Keyboard, Modal, };