reso-ui 2.44.0 → 3.0.0-alpha.2

package/dist/src/library/forms/Controls/Text-Area/__test__/Text-Area.test.d.ts

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

package/dist/src/library/forms/Controls/Text-Area/index.d.ts

@@ -0,0 +1,2 @@
+import "../../../styles/global.scss";
+export * from "./Text-Area";

package/dist/src/library/forms/Controls/Text-Area/stories/Text-Area.stories.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: ({ id, value, onChange, onBlur, onFocus, onKeyDown, useHTMLErrorMessage, noShadowOnFocus, validateOnLoad, error, setError, disabled, required, readonly, autofocus, wrap, placeholder, cols, rows, formId, minLength, maxLength, name, rootClassName, rootStyles, inputClassName, inputStyles, customValidators, ...spacingsProps }: import("../Text-Area").ITextAreaProps) => React.JSX.Element;
+    argTypes: {};
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const NoBorderExample: () => React.JSX.Element;

package/dist/src/library/forms/Controls/Text-Input/Text-Input.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import IComponent from "../../../interfaces/IComponent";
+import { IMarginProps } from "../../../interfaces/ISpacingsProps";
+import { IFormInputProps } from "../../../interfaces/Form";
+import "../sharedStyles.scss";
+import "./styles/Text-Input.layout.scss";
+import "./styles/Text-Input.theme.scss";
+export interface ITextInputProps extends IComponent, IFormInputProps<string>, IMarginProps {
+    type?: "text" | "email" | "password" | "tel";
+    placeholder?: string;
+    pattern?: RegExp | string;
+    minLength?: number;
+    maxLength?: number;
+    size?: number;
+}
+export declare const TextInput: ({ id, value, onChange, onBlur, onFocus, useHTMLErrorMessage, noShadowOnFocus, validateOnLoad, revalidateOnDeps, error, setError, disabled, required, readonly, autofocus, type, autocomplete, placeholder, pattern, minLength, maxLength, size, rootClassName, rootStyles, inputClassName, inputStyles, customValidators, ...spacingsProps }: ITextInputProps) => React.JSX.Element;

package/dist/src/library/forms/Controls/Text-Input/__test__/Text-Input.test.d.ts

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

package/dist/src/library/forms/Controls/Text-Input/index.d.ts

@@ -0,0 +1,2 @@
+import "../../../styles/global.scss";
+export * from "./Text-Input";

package/dist/src/library/forms/Controls/Text-Input/stories/Text-Input.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: ({ id, value, onChange, onBlur, onFocus, useHTMLErrorMessage, noShadowOnFocus, validateOnLoad, revalidateOnDeps, error, setError, disabled, required, readonly, autofocus, type, autocomplete, placeholder, pattern, minLength, maxLength, size, rootClassName, rootStyles, inputClassName, inputStyles, customValidators, ...spacingsProps }: import("../Text-Input").ITextInputProps) => React.JSX.Element;
+    argTypes: {};
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/src/library/forms/Controls/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./Date-Selector";
+export * from "./Dropdown";
+export * from "./File-Input";
+export * from "./Label";
+export * from "./Submit-Button";
+export * from "./Text-Input";
+export * from "./Text-Area";
+export * from "./Number-Input";
+export * from "./Checkbox";
+export * from "./Radio-Select";

package/dist/src/library/forms/Hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./Controls";

package/dist/src/library/forms/Hooks/useDisableNumberInputScroll.d.ts

@@ -0,0 +1,2 @@
+declare const useDisableNumberInputScroll: () => void;
+export { useDisableNumberInputScroll };

package/dist/src/library/forms/Hooks/useInputValidatorsMemo.d.ts

@@ -0,0 +1,15 @@
+import { CustomValidators, FormInputValidator } from "../../interfaces/Form";
+interface IInputValidationProps {
+    required?: boolean;
+    min?: number;
+    max?: number;
+    pattern?: string | RegExp;
+    minLength?: number;
+    maxLength?: number;
+    isEmail?: boolean;
+    isTel?: boolean;
+    accept?: string;
+}
+type InputPrimitiveType = "string" | "boolean" | "number" | "file";
+declare const _default: <T>(type: InputPrimitiveType, validationProps: IInputValidationProps, customValidators?: CustomValidators<T>) => FormInputValidator<T>[];
+export default _default;

package/dist/src/library/forms/Hooks/utils/index.d.ts

@@ -0,0 +1,13 @@
+import { AnyObject } from "../../../interfaces";
+import { CustomValidators, FormInputValidator, ISelectableOption } from "../../../interfaces/Form";
+export declare const composeInputValidators: <T>(defaultValidators: FormInputValidator<T>[], customValidators?: CustomValidators<T>) => FormInputValidator<T>[];
+export type OptionsConfig = {
+    keyProp?: string;
+    valueProp?: string;
+    initObject?: ISelectableOption;
+};
+export declare const defaultOptionsConfig: OptionsConfig;
+export declare const dataArrayToSelectableOptions: (arr: AnyObject[], config?: OptionsConfig) => ISelectableOption[];
+export declare const optionsArrayToMap: (arr: ISelectableOption[]) => {
+    [key: string]: string;
+};

package/dist/src/library/forms/Modular/Form-Contexts-Repository.d.ts

@@ -0,0 +1,7 @@
+import { Context } from "react";
+import { IFormDataContext } from "../../interfaces/Form";
+declare const _default: {
+    registerFormContext: (formName: string, formDataContext: Context<IFormDataContext>) => Context<IFormDataContext>;
+    getFormContext: (formName: string) => Context<IFormDataContext> | undefined;
+};
+export default _default;

package/dist/src/library/forms/Modular/Form-Data-Context.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IFormDataContext } from "../../interfaces/Form";
+export declare const createParentFormDataContext: () => React.Context<IFormDataContext>;

package/dist/src/library/forms/Modular/Hooks.d.ts

@@ -0,0 +1,89 @@
+export declare const useFormData: () => {
+    formData: {};
+    setFormData: (key: string, value?: string | null | undefined) => void;
+};
+export declare const useModularFormContext: (formName: string) => import("../..").IFormDataContext;
+export declare const useModularSubForm: (parentFormName: string, subFormDataKey: string) => {
+    subFormData: any;
+    setSubFormData: (key: string, value: string) => void;
+};
+/**
+ * Example Form Data Model:
+ *
+ * {
+ *    batch: 2020,
+ *    student: {
+ *      name: 'john',
+ *      age: 21,
+ *      contact: {
+ *        home: '1234',
+ *        mobile: '5678'
+ *      }
+ *    }
+ * }
+ *
+ * A. For top level data (eg. batch):
+ * ---------------------------------
+ *
+ * const {formData, setFormData} = useFormData()
+ * const onInputChange = (e) => {
+ *    const value = e.target.value;
+ *    setFormData('batch', value)
+ * }
+ *
+ *
+ *
+ * B. For modular approach (creating another subform component):
+ *  ----------------------------------------------------------
+ *
+ * 1. Create form name, context and register parent form context
+ *  const formName = "studentForm"
+ *  const ParentFormContext = registerFormContext(formName, createParentFormDataContext())
+ *
+ * 2. In render: (
+ *    <ParentFormContextProvider parentFormContext={ParentFormContext}>
+ *        <SubForm1 parentFormName={formName}/>
+ *        <SubForm2 parentFormName={formName}/>
+ *    </ParentFormContextProvider>
+ *  )
+ *
+ * 3. In your subform:
+ *
+ *  props extends ISubForm - parentFormName
+ *
+ *  const {subFromData: studentData, setSubFormData: setStudentData} = useModularSubForm(parentFormName, 'student')
+ *
+ * onNameInputChange((e) => {
+ *    const value = e.target.value;
+ *    setStudentData('name', value) - this will call parent's setFormData
+ * })
+ *
+ * C. For modular approach with multiple levels (a subform component which has another subform):
+ *  -----------------------------------------------------------------------
+ *
+ * 1. In your SubForm, creat a form name, context and register
+ *
+ *  const subFormName = "studentContactForm"
+ *  const ParentFormContext = registerFormContext(subFormName, createParentFormDataContext())
+ *
+ * 2. Create Provider
+ *  const SubSubFormProvider = createFormDataContextProvider(ParentFormContext)
+ *
+ * 3. In render: (
+ *    <ParentFormContextProvider parentFormContext={ParentFormContext}>
+ *        <SubSubForm1 parentFormName={subFormName}/>
+ *    </ParentFormContextProvider>
+ *  )
+ *
+ *  * 4. In your subsubform:
+ *
+ *  props extends ISubForm - parentFormName
+ *
+ *  const {subFromData: studentContactData, setSubFormData: setStudentContactData} = useModularSubForm(parentFormNamr, 'contact')
+ *
+ *  onMobileInputChange((e) => {
+ *    const value = e.target.value;
+ *    setStudentContactData('mobile', value) - this will call parent's setStudentData, which calls it's parent's setFormData
+ *  })
+ *
+ */

package/dist/src/library/forms/Modular/Parent-Form-Context-Provider.d.ts

@@ -0,0 +1,8 @@
+import React, { Context } from "react";
+import { IFormDataContext } from "../../interfaces/Form";
+export interface IParentFormContextProviderProps {
+    children: React.ReactNode;
+    parentFormContext: Context<IFormDataContext>;
+}
+export declare const ParentFormContextProvider: <T>({ children, parentFormContext, }: IParentFormContextProviderProps) => React.JSX.Element;
+export default ParentFormContextProvider;

package/dist/src/library/forms/Modular/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Parent-Form-Context-Provider";
+export * from "./Hooks";
+export * from "./Form-Data-Context";
+export * from "./Form-Contexts-Repository";

package/dist/src/library/forms/Validators/Boolean.d.ts

@@ -0,0 +1,5 @@
+import { FormInputValidator } from "../../interfaces/Form";
+/**
+ * String validators
+ */
+export declare const booleanIsRequired: FormInputValidator<boolean>;

package/dist/src/library/forms/Validators/File.d.ts

@@ -0,0 +1,6 @@
+import { FormInputValidator } from "../../interfaces";
+/**
+ * File validators
+ */
+export declare const fileIsRequired: FormInputValidator<File>;
+export declare const fileMatchesAccept: (acceptStr: string) => FormInputValidator<File>;

package/dist/src/library/forms/Validators/Number.d.ts

@@ -0,0 +1,9 @@
+import { FormInputValidator } from "../../interfaces/Form";
+/**
+ * Number validators: should work even if number is passed as string
+ */
+export declare const numberIsRequired: FormInputValidator<number | string>;
+export declare const valueIsNumber: FormInputValidator<number | string>;
+export declare const numberIsPositiveInteger: FormInputValidator<number | string>;
+export declare const numberIsMoreThanOrEqualsTo: (min: number) => FormInputValidator<number | string>;
+export declare const numberIsLessThan: (max: number) => FormInputValidator<number | string>;

package/dist/src/library/forms/Validators/String.d.ts

@@ -0,0 +1,10 @@
+import { FormInputValidator } from "../../interfaces/Form";
+/**
+ * String validators
+ */
+export declare const stringIsRequired: FormInputValidator<string>;
+export declare const stringIsEmail: FormInputValidator<string>;
+export declare const stringIsPhoneDefault: FormInputValidator<string>;
+export declare const stringHasMinLength: (min: number) => FormInputValidator<string>;
+export declare const stringHasMaxLength: (max: number) => FormInputValidator<string>;
+export declare const stringMatchesRegex: (regex: string | RegExp) => FormInputValidator<string>;

package/dist/src/library/forms/Validators/__test__/File.test.d.ts

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

package/dist/src/library/forms/Validators/index.d.ts

@@ -0,0 +1,4 @@
+import { FormInputValidator } from "../../interfaces/Form";
+export * from "./Number";
+export * from "./String";
+export declare const validate: <T = string>(value: any, validators: FormInputValidator<T>[], setError?: React.Dispatch<React.SetStateAction<string>>) => boolean;

package/dist/src/library/forms/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Containers";
+export * from "./Controls";
+export * from "./Hooks";
+export * from "./Validators";

package/dist/src/library/hooks/__test__/useClickOutside.test.d.ts

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

package/dist/src/library/hooks/__test__/useComponentWidthHeight.test.d.ts

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

package/dist/src/library/hooks/__test__/useDisableBodyScroll.test.d.ts

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

package/dist/src/library/hooks/__test__/useDynamicBodyHeight.test.d.ts

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

package/dist/src/library/hooks/__test__/useReducedMotion.test.d.ts

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

package/dist/src/library/hooks/__test__/useWindowSize.test.d.ts

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

package/dist/src/library/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./useClickOutside";
+export * from "./useDisableBodyScroll";
+export * from "./useWindowSize";
+export * from "./useDynamicBodyHeight";
+export * from "./useComponentWidthHeight";
+export * from "./useReducedMotion";
+export * from "./useTheme";

package/dist/src/library/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const useClickOutside: <T extends HTMLElement>(ref: React.MutableRefObject<T>, cb: () => void) => void;

package/dist/src/library/hooks/useComponentWidthHeight.d.ts

@@ -0,0 +1,4 @@
+export declare const useComponentWidthHeight: (ref?: React.MutableRefObject<HTMLDivElement>) => {
+    width: number;
+    height: number;
+};

package/dist/src/library/hooks/useDisableBodyScroll.d.ts

@@ -0,0 +1 @@
+export declare const useDisableBodyScroll: (isOpen: boolean) => void;

package/dist/src/library/hooks/useDynamicBodyHeight.d.ts

@@ -0,0 +1 @@
+export declare const useDynamicBodyHeight: () => void;

package/dist/src/library/hooks/useReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare const useReducedMotion: () => boolean;

package/dist/src/library/hooks/useTheme.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => import("../context/ThemeContext").IThemeContext;

package/dist/src/library/hooks/useWindowSize.d.ts

@@ -0,0 +1 @@
+export declare const useWindowSize: () => number[];

package/dist/src/library/icons/index.d.ts

@@ -0,0 +1,26 @@
+import AboutIcon from "./svg/about.svg";
+import ChevronSingleLeft from "./svg/ChevronSingleLeft.svg";
+import ChevronSingleRight from "./svg/ChevronSingleRight.svg";
+import ChevronDoubleLeft from "./svg/ChevronDoubleLeft.svg";
+import ChevronDoubleRight from "./svg/ChevronDoubleRight.svg";
+import DashboardIcon from "./svg/dashboard.svg";
+import ErrorIcon from "./svg/error.svg";
+import HomeIcon from "./svg/home.svg";
+import LogoutIcon from "./svg/logout.svg";
+import ProductsIcon from "./svg/products.svg";
+import ProfileIcon from "./svg/profile.svg";
+import SettingsIcon from "./svg/settings.svg";
+import UploadIcon from "./svg/upload.svg";
+import UsersIcon from "./svg/users.svg";
+import LoaderIcon from "./svg/loader.svg";
+import StarFullIcon from "./svg/star-full.svg";
+import StarHalf from "./svg/star-half.svg";
+import StarEmptyIcon from "./svg/star-empty.svg";
+import SuccessIcon from "./svg/success.svg";
+import DropdownUp from "./svg/dropdown_up.svg";
+import DropdownDown from "./svg/dropdown_down.svg";
+import EditIcon from "./svg/edit.svg";
+import DeleteIcon from "./svg/delete.svg";
+import OrdersIcon from "./svg/orders.svg";
+import CartIcon from "./svg/cart.svg";
+export { HomeIcon, AboutIcon, ChevronSingleLeft, ChevronSingleRight, ChevronDoubleLeft, ChevronDoubleRight, DashboardIcon, ErrorIcon, LogoutIcon, ProductsIcon, ProfileIcon, SettingsIcon, UploadIcon, UsersIcon, LoaderIcon, StarFullIcon, StarEmptyIcon, StarHalf, SuccessIcon, DropdownDown, DropdownUp, EditIcon, DeleteIcon, OrdersIcon, CartIcon, };

package/dist/src/library/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./components";
+export * from "./forms";
+export * from "./hooks";
+export * from "./icons";
+export * from "./interfaces";
+export * from "./context";
+export * from "./providers";
+export * from "./themes";

package/dist/src/library/interfaces/Form.d.ts

@@ -0,0 +1,50 @@
+import { Dispatch, SetStateAction } from "react";
+export type FormInputValidator<T> = {
+    validationFn: (value?: T) => boolean;
+    errorMessage: string;
+};
+export type FormInputHookReturnObj<T> = {
+    value: T;
+    setValue: Dispatch<SetStateAction<T>>;
+    error?: string;
+    setError?: Dispatch<SetStateAction<string>>;
+};
+export type SelectableHookReturnObj = {
+    value?: string;
+    options: ISelectableOption[];
+    selectedKey?: string;
+    setSelectedKey: Dispatch<SetStateAction<string | undefined>>;
+    error?: string;
+    setError?: Dispatch<SetStateAction<string>>;
+};
+export interface ISelectableOption {
+    key: string;
+    value: string;
+}
+export type CustomValidators<T> = FormInputValidator<T> | FormInputValidator<T>[];
+export interface IFormInputProps<T> {
+    id: string;
+    inputClassName?: string;
+    inputStyles?: React.CSSProperties;
+    value?: string | number | boolean;
+    onChange: (value: T) => void;
+    error?: string;
+    setError?: Dispatch<SetStateAction<string>>;
+    useHTMLErrorMessage?: boolean;
+    noShadowOnFocus?: boolean;
+    validateOnLoad?: boolean;
+    revalidateOnDeps?: React.DependencyList;
+    onBlur?: () => void;
+    onFocus?: (e?: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement, Element>) => void;
+    onKeyDown?: (e?: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    autofocus?: boolean;
+    autocomplete?: "on" | "off";
+    customValidators?: CustomValidators<T>;
+}
+export interface IFormDataContext {
+    formData: object;
+    setFormData: Dispatch<SetStateAction<unknown>>;
+}

package/dist/src/library/interfaces/IComponent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IComponent {
+    rootClassName?: string;
+    rootStyles?: React.CSSProperties;
+}
+export default IComponent;

package/dist/src/library/interfaces/IImageObject.d.ts

@@ -0,0 +1,4 @@
+export interface IImageObject {
+    path: string;
+    alt?: string;
+}

package/dist/src/library/interfaces/ILink.d.ts

@@ -0,0 +1,4 @@
+export interface ILink {
+    link: string;
+    text: string;
+}

package/dist/src/library/interfaces/IProduct.d.ts

@@ -0,0 +1,5 @@
+interface IProduct {
+    isLowStock: boolean;
+    countInStock: number;
+}
+export default IProduct;

package/dist/src/library/interfaces/ISpacingsProps.d.ts

@@ -0,0 +1,23 @@
+type spacingsRange = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type spacingsRangeWithAuto = spacingsRange | "auto";
+type spacingsRangeWithCenter = spacingsRange | "center";
+export interface IMarginProps {
+    ma?: spacingsRangeWithAuto;
+    mv?: spacingsRange;
+    mh?: spacingsRangeWithCenter;
+    mt?: spacingsRange;
+    mb?: spacingsRange;
+    mr?: spacingsRange;
+    ml?: spacingsRange;
+}
+export interface IPaddingProps {
+    pa?: spacingsRange;
+    pv?: spacingsRange;
+    ph?: spacingsRange;
+    pt?: spacingsRange;
+    pb?: spacingsRange;
+    pr?: spacingsRange;
+    pl?: spacingsRange;
+}
+export type ISpacingsProps = IMarginProps & IPaddingProps;
+export default ISpacingsProps;

package/dist/src/library/interfaces/ImageClickable.d.ts

@@ -0,0 +1,2 @@
+type ImageClickable = "zoomIn" | "zoomOut" | "pointer";
+export default ImageClickable;

package/dist/src/library/interfaces/Theme.d.ts

@@ -0,0 +1,9 @@
+/** @deprecated Theme is now handled via ResoUiProvider mode prop. Remove theme prop from components. */
+export type Theme = "light" | "dark";
+/** @deprecated Extend IComponent instead. Theme is now context-driven via ResoUiProvider. */
+export interface IThemeProps {
+    theme?: Theme;
+}
+/** @deprecated */
+export declare const DefaultTheme: Theme;
+export default IThemeProps;

package/dist/src/library/interfaces/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./IComponent";
+export * from "./IImageObject";
+export * from "./ILink";
+export * from "./ISpacingsProps";
+export * from "./Theme";
+export * from "./Form";
+export type AnyObject = {
+    [key: string]: string;
+};

package/dist/src/library/providers/ResoUiProvider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "../styles/global.scss";
+import { ResoThemeConfig, ThemeMode } from "../types/theme";
+export interface IResoUiProviderProps {
+    children: React.ReactNode;
+    theme?: ResoThemeConfig;
+    mode?: ThemeMode;
+}
+export declare const ResoUiProvider: ({ children, theme, mode }: IResoUiProviderProps) => React.JSX.Element;

package/dist/src/library/providers/ResponsiveProvider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ResponsiveProvider: ({ children }: {
+    children: any;
+}) => React.JSX.Element;

package/dist/src/library/providers/ThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ResoThemeConfig, ThemeMode } from "../types/theme";
+export interface IThemeProviderProps {
+    children: React.ReactNode;
+    theme?: ResoThemeConfig;
+    mode?: ThemeMode;
+}
+export declare const ThemeProvider: ({ children, theme, mode: modeProp }: IThemeProviderProps) => React.JSX.Element;

package/dist/src/library/providers/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ResoUiProvider";
+export * from "./ResponsiveProvider";
+export * from "./ThemeProvider";

package/dist/src/library/themes/darkTheme.d.ts

@@ -0,0 +1,2 @@
+import { ResoThemeConfig } from "../types/theme";
+export declare const darkTheme: ResoThemeConfig;

package/dist/src/library/themes/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import { ResoThemeConfig } from "../types/theme";
+export declare const defaultTheme: ResoThemeConfig;

package/dist/src/library/themes/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./defaultTheme";
+export * from "./darkTheme";