@sebgroup/green-react 1.0.0-beta.4 → 1.0.0-beta.7

package/lib/form/form.d.ts

@@ -4,6 +4,7 @@ export interface FormProps extends HTMLProps<HTMLFormElement> {
     children?: ReactNode;
     direction?: FormDirection;
     formSize?: Size;
+    onFormSubmit?: (values: any) => void;
 }
-export declare function Form({ children, direction, formSize, }: FormProps): JSX.Element;
+export declare const Form: React.FC<FormProps>;
 export default Form;

package/lib/form/formContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormProps } from './form';
+interface FormContextReturnType {
+    setValues: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    setFields: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    errors?: Record<string, any>;
+    values?: Record<string, any>;
+}
+export declare const FormContext: React.Context<FormContextReturnType>;
+export declare const useFormContext: () => FormContextReturnType;
+export declare const FormProvider: ({ children, direction, formSize, onSubmit, onFormSubmit, ...props }: React.PropsWithChildren<FormProps>) => JSX.Element;
+export {};

package/lib/form/formItems.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IValidator } from './types';
+export interface FormItemsProps {
+    children: React.ReactNode;
+    validate?: IValidator;
+    name: string;
+}
+export declare const FormItems: React.FC<FormItemsProps>;
+export default FormItems;

package/lib/form/group/group.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface GroupProps {
+    children: ReactNode;
+    error?: Error | string;
+    groupBorder?: boolean;
+    invalid?: boolean;
+}
+export declare function Group({ children, error, groupBorder }: GroupProps): JSX.Element;
+export default Group;

package/lib/form/index.d.ts

@@ -1,5 +1,8 @@
 export * from './button/button';
 export * from './buttonGroup/buttonGroup';
 export * from './form';
+export * from './formItems';
+export * from './group/group';
 export * from './input/input';
 export * from './text/text';
+export * from './radioButton/radioGroup';

package/lib/form/input/input.d.ts

@@ -1,5 +1,10 @@
-import { CheckboxProps, TextInputProps } from '../types';
-export declare const TextInput: ({ label, info, onChangeText, ...props }: TextInputProps<string>) => JSX.Element;
-export declare const EmailInput: ({ label, info, onChangeText, ...props }: TextInputProps<string>) => JSX.Element;
-export declare const NumberInput: ({ label, info, onChangeText, ...props }: TextInputProps<number>) => JSX.Element;
-export declare const Checkbox: ({ label, onChecked, ...props }: CheckboxProps) => JSX.Element;
+import { InputHTMLAttributes } from 'react';
+import { CheckboxProps, IValidator, NumberInputProps, RadioButtonProps, TextInputProps } from '../types';
+import React from 'react';
+export declare type Renderer = (type: string, props: InputHTMLAttributes<HTMLInputElement>, onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChangeInput?: (value: string) => string, label?: string, info?: string, validator?: IValidator) => JSX.Element;
+export declare const RenderInput: Renderer;
+export declare const TextInput: ({ label, info, onChange, onChangeInput, validator, ...props }: TextInputProps) => JSX.Element;
+export declare const EmailInput: ({ label, info, onChange, onChangeInput, validator, ...props }: TextInputProps) => JSX.Element;
+export declare const NumberInput: ({ label, info, onChange, onChangeInput, validator, ...props }: NumberInputProps) => JSX.Element;
+export declare const Checkbox: ({ label, onChange, validator, ...props }: CheckboxProps) => JSX.Element;
+export declare const RadioButton: ({ label, validator, ...props }: RadioButtonProps) => JSX.Element;

package/lib/form/radioButton/radioGroup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IValidator } from '../types';
+export interface RadioGroupProps {
+    title?: string;
+    description?: string;
+    validator?: IValidator;
+    onChangeRadio?: (value: string) => string;
+}
+export declare const RadioGroup: ({ description, title, validator, onChangeRadio, children }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
+export default RadioGroup;

package/lib/form/types.d.ts

@@ -1,25 +1,28 @@
-import { ChangeEventHandler, FocusEventHandler } from 'react';
-export interface InputProps {
-    id?: string;
-    label?: string;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-}
-export interface TextInputProps<T> extends InputProps {
+import { IndicatorType, ValidatorRules } from '@sebgroup/extract';
+import { HTMLProps } from 'react';
+export interface TextInputProps extends HTMLProps<HTMLInputElement> {
     type?: 'text' | 'email' | 'number';
-    value?: T;
+    label?: string;
     info?: string;
-    onChangeText?: (text?: T) => unknown;
+    validator?: IValidator;
+    onChangeInput?: (value: string) => string;
 }
-export interface NumberInputProps extends TextInputProps<number> {
+export interface NumberInputProps extends TextInputProps {
     min?: number;
     max?: number;
     step?: number;
 }
-export interface CheckboxProps extends InputProps {
-    checked?: boolean;
-    value?: string;
-    onChecked?: (checked: boolean | undefined) => unknown;
+export interface CheckboxProps extends HTMLProps<HTMLInputElement> {
+    validator?: IValidator;
+}
+export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
+    label: string;
+    validator?: string;
+    value: string;
 }
 export declare type InputListener<T> = (newValue?: T) => unknown;
+export interface IValidator {
+    message: string;
+    indicator: IndicatorType;
+    rules?: ValidatorRules;
+}

package/lib/form/useInput.d.ts

@@ -1,6 +1,5 @@
-import { InputHTMLAttributes, RefObject } from 'react';
-import { InputListener } from './types';
-declare const useInput: <T>(props: InputHTMLAttributes<HTMLInputElement>, evaluator: (element: HTMLInputElement) => T | undefined, notify?: InputListener<T> | undefined) => InputHTMLAttributes<HTMLInputElement> & {
+import React, { InputHTMLAttributes, RefObject } from 'react';
+declare const useInput: (props: InputHTMLAttributes<HTMLInputElement>, onChanges?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined, onChangeInput?: ((value: string) => string) | undefined) => React.InputHTMLAttributes<HTMLInputElement> & {
     ref: RefObject<HTMLInputElement>;
 };
 export default useInput;

package/lib/form/validateInput.d.ts

@@ -0,0 +1,9 @@
+import { ValidatorRules } from '@sebgroup/extract';
+interface InputTargetType {
+    name: string;
+    value: string;
+    type?: string;
+    checked?: boolean;
+}
+export declare const validateInputValue: (target: InputTargetType, rules: ValidatorRules, setError: React.Dispatch<React.SetStateAction<Record<string, any>>>) => string;
+export {};

package/lib/layout/flexbox/flexbox.d.ts

@@ -1,9 +1,13 @@
-import { PropsWithChildren } from 'react';
-interface FlexboxProps {
-    alignContent?: 'start' | 'between' | 'center' | 'stretch' | 'around' | 'end';
-    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-    alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-    justifyContent?: 'start' | 'between' | 'center' | 'evenly' | 'around' | 'end';
+import { PropsWithChildren, HTMLProps } from 'react';
+import { AlignContentType, AlignType, FlexDirectionType, FlexWrapType, JustifyContentType } from './types';
+export interface FlexboxProps extends HTMLProps<HTMLDivElement> {
+    alignContent?: AlignContentType;
+    alignItems?: AlignType;
+    alignSelf?: AlignType;
+    justifyContent?: JustifyContentType;
+    flexDirection?: FlexDirectionType;
+    flexWrap?: FlexWrapType;
+    className?: string;
 }
-export declare const Flexbox: ({ alignContent, alignItems, alignSelf, children, justifyContent, }: PropsWithChildren<FlexboxProps>) => JSX.Element;
+export declare const Flexbox: ({ alignContent, alignItems, alignSelf, children, justifyContent, flexDirection, flexWrap, className, ...props }: PropsWithChildren<FlexboxProps>) => JSX.Element;
 export default Flexbox;

package/lib/layout/flexbox/types.d.ts

@@ -0,0 +1,5 @@
+export declare type AlignContentType = 'start' | 'between' | 'center' | 'stretch' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-stretch' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-stretch' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-stretch' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-stretch' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-stretch' | 'xxl-around' | 'xxl-end';
+export declare type AlignType = 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'sm-start' | 'sm-end' | 'sm-center' | 'sm-baseline' | 'sm-stretch' | 'md-start' | 'md-end' | 'md-center' | 'md-baseline' | 'md-stretch' | 'lg-start' | 'lg-end' | 'lg-center' | 'lg-baseline' | 'lg-stretch' | 'xl-start' | 'xl-end' | 'xl-center' | 'xl-baseline' | 'xl-stretch' | 'xxl-start' | 'xxl-end' | 'xxl-center' | 'xxl-baseline' | 'xxl-stretch';
+export declare type JustifyContentType = 'start' | 'between' | 'center' | 'evenly' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-evenly' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-evenly' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-evenly' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-evenly' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-evenly' | 'xxl-around' | 'xxl-end';
+export declare type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'sm-row' | 'sm-row-reverse' | 'sm-column' | 'sm-column-reverse' | 'md-row' | 'md-row-reverse' | 'md-column' | 'md-column-reverse' | 'lg-row' | 'lg-row-reverse' | 'lg-column' | 'lg-column-reverse' | 'xl-row' | 'xl-row-reverse' | 'xl-column' | 'xl-column-reverse' | 'xxl-row' | 'xxl-row-reverse' | 'xxl-column' | 'xxl-column-reverse';
+export declare type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse' | 'sm-nowrap' | 'sm-wrap' | 'sm-wrap-reverse' | 'md-nowrap' | 'md-wrap' | 'md-wrap-reverse' | 'lg-nowrap' | 'lg-wrap' | 'lg-wrap-reverse' | 'xl-nowrap' | 'xl-wrap' | 'xl-wrap-reverse' | 'xxl-nowrap' | 'xxl-wrap' | 'xxl-wrap-reverse';

package/lib/layout/index.d.ts

@@ -1,2 +1 @@
 export * from './flexbox/flexbox';
-export * from './group/group';

package/lib/tabs/tabs.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
-interface IList {
+export interface IList {
     text?: string;
     href?: string;
+    disabled?: boolean;
 }
 interface TabsProps {
     list?: IList[];
-    disabled?: boolean;
+    onTabChange?: (index: number) => void;
     children?: ReactNode[];
 }
-export declare const Tabs: ({ list, disabled, children, ...props }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ list, onTabChange, children }: TabsProps) => JSX.Element;
 export default Tabs;

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.7",
   "peerDependencies": {
     "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "merge": "^2.1.1",
-    "@popperjs/core": "^2.11.0",
-    "rxjs": "^6.6.7"
+    "react-dom": "^17.0.0"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.0.0-beta.4",
-    "@sebgroup/extract": "^1.0.0-beta.4"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.7",
+    "@sebgroup/extract": "^1.0.0-beta.7"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {

package/lib/layout/group/group.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-export interface GroupProps {
-    children: ReactNode;
-}
-export declare function Group({ children }: GroupProps): JSX.Element;
-export default Group;