chop-logic-components 0.11.0 → 0.12.1

package/dist/components/containers/form/FormContext.d.ts

@@ -3,10 +3,12 @@ import { default as React } from 'react';
 export type ChopLogicFormData = {
     [key: string]: unknown;
 };
+export type ChopLogicFormValidationState = [string, boolean][];
 export type ChopLogicFormInput = HTMLInputElement | HTMLSelectElement;
 export type ChopLogicFormInputParams = {
     name: string;
     value: unknown;
+    valid?: boolean;
 };
 export type ChopLogicFormContextProps = {
     onChangeFormInput?: (params: ChopLogicFormInputParams) => void;

package/dist/components/containers/form/controller.d.ts

@@ -0,0 +1,15 @@
+import { FormEvent } from 'react';
+import { ChopLogicFormData, ChopLogicFormInputParams } from './FormContext';
+
+export declare function useChopLogicFormController({ initialValues, onReset, onSubmit, onClickSubmit, }: {
+    initialValues?: ChopLogicFormData;
+    onReset?: React.FormEventHandler<HTMLFormElement>;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    onClickSubmit?: (data: ChopLogicFormData) => void;
+}): {
+    handleInputChange: (params: ChopLogicFormInputParams) => void;
+    handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    handleReset: (event: FormEvent<HTMLFormElement>) => void;
+    resetSignal: number;
+    valid: boolean;
+};

package/dist/components/containers/form/helpers.d.ts

@@ -1,14 +1,5 @@
-import { FormEvent } from 'react';
-import { ChopLogicFormData, ChopLogicFormInputParams } from './FormContext';
+import { ChopLogicFormData, ChopLogicFormInputParams, ChopLogicFormValidationState } from './FormContext';
 
-export declare function useChopLogicFormController({ initialValues, onReset, onSubmit, onClickSubmit, }: {
-    initialValues?: ChopLogicFormData;
-    onReset?: React.FormEventHandler<HTMLFormElement>;
-    onSubmit?: React.FormEventHandler<HTMLFormElement>;
-    onClickSubmit?: (data: ChopLogicFormData) => void;
-}): {
-    handleInputChange: (params: ChopLogicFormInputParams) => void;
-    handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    handleReset: (event: FormEvent<HTMLFormElement>) => void;
-    resetSignal: number;
-};
+export declare function getInitialValidationState(data?: ChopLogicFormData): ChopLogicFormValidationState;
+export declare function updateValidationState(state: ChopLogicFormValidationState, params: ChopLogicFormInputParams): ChopLogicFormValidationState;
+export declare function isFormDataValid(state: ChopLogicFormValidationState): boolean;

package/dist/components/{misc → inputs/_common}/error-message/ErrorMessage.d.ts

@@ -4,8 +4,8 @@ type ChopLogicErrorMessageProps = {
     errorId: string;
     visible?: boolean;
     message?: string;
-    className?: string;
     testId?: string;
+    style?: React.CSSProperties;
 };
 declare const ChopLogicErrorMessage: React.FC<ChopLogicErrorMessageProps>;
 export default ChopLogicErrorMessage;

package/dist/components/inputs/_common/input-inner-button/InputInnerButton.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { CLIcon } from '../../../../../../../../../../src/components/misc/icon/Icon';
+
+type ClearInputButtonProps = {
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    label: string;
+    icon: CLIcon;
+};
+declare const InputInnerButton: React.FC<ClearInputButtonProps>;
+export default InputInnerButton;

package/dist/components/inputs/_common/input-inner-button/InputInnerButton.styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledInputInnerButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/components/{misc → inputs/_common}/label/Label.d.ts

@@ -4,10 +4,10 @@ type ChopLogicLabelProps = {
     label: string;
     required: boolean;
     inputId: string;
-    className?: string;
     isTextHidden?: boolean;
     icon?: React.ReactElement;
     iconPosition?: 'left' | 'right';
+    style?: React.CSSProperties;
 };
 declare const ChopLogicLabel: React.FC<PropsWithChildren<ChopLogicLabelProps>>;
 export default ChopLogicLabel;

package/dist/components/inputs/numeric/NumericInput.d.ts

@@ -1,10 +1,14 @@
 import { default as React } from 'react';
 
+export type NumericValidationFunction = (input?: number) => boolean;
 export type ChopLogicNumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     name: string;
     label: string;
-    valid?: boolean;
     errorMessage?: string;
+    validator?: NumericValidationFunction;
+    onClear?: () => void;
+    hasSpinButtons?: boolean;
+    onSpinButtonClick?: (value?: number) => void;
 };
 declare const ChopLogicNumericInput: React.FC<ChopLogicNumericInputProps>;
 export default ChopLogicNumericInput;

package/dist/components/inputs/numeric/NumericInput.styled.d.ts

@@ -5,3 +5,5 @@ export declare const StyledNumericInputWrapper: import('styled-components/dist/t
     $invalid: boolean;
 }>> & string;
 export declare const StyledNumericInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledFieldWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledButtonsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/inputs/numeric/helpers.d.ts

@@ -1,20 +1,35 @@
 import { ChangeEventHandler } from 'react';
 import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/FormContext';
+import { NumericValidationFunction } from './NumericInput';
 
 export declare function getNumericInputInitialValue({ name, initialValues, defaultValue, }: {
     name: string;
     initialValues?: ChopLogicFormData;
     defaultValue?: string | number | readonly string[];
 }): number;
-export declare function useChopLogicNumericInputController({ name, defaultValue, onChange, min, max, }: {
+export declare function validateNumericInputValue({ value, required, validator, maxValue, minValue, }: {
+    value?: number;
+    required?: boolean;
+    validator?: NumericValidationFunction;
+    maxValue?: number;
+    minValue?: number;
+}): boolean;
+export declare function useChopLogicNumericInputController({ name, defaultValue, onChange, onSpinButtonClick, min, max, step, required, validator, }: {
     name: string;
     defaultValue?: string | number | readonly string[];
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    onSpinButtonClick?: (value?: number) => void;
     min?: string | number;
     max?: string | number;
+    step: number;
+    required: boolean;
+    validator?: NumericValidationFunction;
 }): {
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value: string | number;
+    value: number;
+    valid: boolean;
     minValue: number;
     maxValue: number;
+    increment: () => void;
+    decrement: () => void;
 };

package/dist/components/inputs/text/TextInput.d.ts

@@ -1,12 +1,19 @@
 import { default as React } from 'react';
 
+export type RegExpWithFlags = {
+    regexp: string;
+    flags?: string;
+};
+export type TextValidationFunction = (input: string) => boolean;
 export type ChopLogicTextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     name: string;
     label: string;
     valid?: boolean;
     errorMessage?: string;
-    hasClearButton?: boolean;
+    clearable?: boolean;
     onClear?: () => void;
+    type?: 'text' | 'email' | 'password';
+    validator?: RegExpWithFlags | TextValidationFunction;
 };
 declare const ChopLogicTextInput: React.FC<ChopLogicTextInputProps>;
 export default ChopLogicTextInput;

package/dist/components/inputs/text/TextInput.styled.d.ts

@@ -5,3 +5,5 @@ export declare const StyledTextInputWrapper: import('styled-components/dist/type
     $invalid: boolean;
 }>> & string;
 export declare const StyledTextInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledFieldWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledButtonsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/inputs/text/__docs__/TextInput.stories.d.ts

@@ -4,4 +4,6 @@ import { default as TextInputExample } from './TextInputExample';
 declare const meta: Meta<typeof TextInputExample>;
 export default meta;
 type Story = StoryObj<typeof TextInputExample>;
-export declare const Default: Story;
+export declare const DefaultTextInput: Story;
+export declare const PasswordInput: Story;
+export declare const EmailInput: Story;

package/dist/components/inputs/text/helpers.d.ts

@@ -1,17 +1,29 @@
 import { ChangeEventHandler } from 'react';
 import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/FormContext';
+import { RegExpWithFlags, TextValidationFunction } from './TextInput';
 
+export declare function validateTextInputValue({ value, required, validator, }: {
+    value: string;
+    required: boolean;
+    validator?: RegExpWithFlags | TextValidationFunction;
+}): boolean;
 export declare function getTextInputInitialValue({ name, initialValues, defaultValue, }: {
     name: string;
     initialValues?: ChopLogicFormData;
     defaultValue?: string | number | readonly string[];
 }): string;
-export declare function useChopLogicTextInputController({ name, defaultValue, onChange, }: {
+export declare function useChopLogicTextInputController({ name, defaultValue, onChange, onClear, required, validator, }: {
     name: string;
+    required: boolean;
+    validator?: RegExpWithFlags | TextValidationFunction;
     defaultValue?: string | number | readonly string[];
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    onClear?: () => void;
 }): {
     value: string;
+    valid: boolean;
+    passwordShown: boolean;
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     handleClear: () => void;
+    togglePassword: () => void;
 };

package/dist/components/misc/icon/Icon.d.ts

@@ -12,14 +12,18 @@ export declare enum CLIcon {
     Copy = "copy",
     Cut = "cut",
     Delete = "delete",
+    Down = "down",
     Download = "download",
     Error = "error",
     Forward = "forward",
     Help = "help",
+    Hide = "hide",
     Info = "info",
     Paste = "paste",
     Question = "question",
     Save = "save",
+    Show = "show",
+    Up = "up",
     Upload = "upload",
     Warning = "warning",
     Remove = "remove"

package/dist/components/misc/icon/elements/Down.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare function DownIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export default DownIcon;

package/dist/components/misc/icon/elements/Hide.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare function HideIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export default HideIcon;

package/dist/components/misc/icon/elements/Show.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare function ShowIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export default ShowIcon;

package/dist/components/misc/icon/elements/Up.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare function UpIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export default UpIcon;

package/dist/constants/style-variables.d.ts

@@ -19,7 +19,7 @@ export declare const UNITS: Readonly<{
     minElementSize: "2.75rem";
     smallIconSize: "1.6rem";
     blockBorderRadius: "0.375rem";
-    inputWrapperHeight: "3rem";
+    inputWrapperHeight: "3.5rem";
 }>;
 export declare const SHADOWS: Readonly<{
     box: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px";

package/dist/hooks/use-element-ids/__tests__/use-element-ids.test.d.ts

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