coles-solid-library 0.1.1 → 0.2.2

package/dist/components/Button/Button.d.ts

@@ -1,13 +1,10 @@
 import { Component, JSX } from "solid-js";
-export interface MenuButton {
-    name: string;
-    condition?: () => boolean;
-    action: () => void;
-}
+import { ThemeVariables } from "../..";
+type ButtonTypes = Exclude<ThemeVariables, "header" | "subheader">;
 interface Props extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-    onClick?: (e: MouseEvent) => unknown;
     transparent?: boolean;
-    styleType?: "primary" | "accent" | "tertiary";
+    theme?: ButtonTypes;
+    borderTheme?: ButtonTypes | "none";
 }
 declare const Button: Component<Props>;
 export { Button };

package/dist/components/Chip/Chip.d.ts

@@ -5,7 +5,6 @@ interface Props {
     value: string;
     remove?: () => any;
     onClick?: (e: MouseEvent) => any;
-    styleType?: "primary" | "accent" | "tertiary";
 }
 declare const Chip: Component<Props>;
 export { Chip };

package/dist/components/Container/container.d.ts

@@ -0,0 +1,9 @@
+import { Component, JSX } from "solid-js";
+export type ThemeVariables = "primary" | "primaryVariant" | "secondary" | "secondaryVariant" | "background" | "surface" | "surfaceVariant" | "container" | "error" | "header" | "subheader";
+export type BorderThemeVariables = "borderPrimary" | "borderSecondary" | "borderError" | "borderSurface" | "borderSurfaceVariant" | "borderContainer" | "borderBackground" | "none";
+interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    theme: ThemeVariables;
+    children: JSX.Element | JSX.Element[] | undefined;
+}
+export declare const Container: Component<ContainerProps>;
+export {};

package/dist/components/Form/formGroup.d.ts

@@ -1,35 +1,61 @@
-interface ValidatorResult<T> {
-    revalidate: (val: T) => boolean;
-    errKey: string;
-}
-export type ValidatorObject<T> = {
-    [P in keyof T]?: ValidatorResult<T[P]>[];
-};
-type FormGroupData<T extends object> = {
-    [P in keyof T]: [T[P], ValidatorResult<T[P]>[]];
-};
+import { ErrorObject, FormGroupData } from "./formHelp/models";
+export { FormArray } from "./formHelp/formArray";
+export { Validators } from "./formHelp/validators";
+/**
+ * Represents a group of form controls and manages their state, validation, and errors.
+ *
+ * @template T - The shape of the form's data, where each property corresponds to a form control.
+ */
 export declare class FormGroup<T extends object> {
     data: FormGroupData<T>;
     private internalDataSignal;
     private validators;
     private errors;
+    private keys;
     constructor(data: FormGroupData<T>);
+    /**
+     * Gets the current form data or the value of a specific control.
+     *
+     * @overload
+     * @returns A cloned copy of the entire form data.
+     *
+     * @overload
+     * @param key - The key of the control to retrieve.
+     * @returns A cloned copy of the value for the specified control.
+     */
     get(): T;
     get(key: keyof T): T[keyof T];
-    hasValidator(key: keyof T, errKey: string): boolean;
+    /**
+     * Checks whether a specific validator error exists for a given control.
+     *
+     * @param key - The key of the form control.
+     * @param errKey - The error key to check for.
+     * @returns `true` if the error exists, otherwise `false`.
+     */
+    hasValidator(key: keyof T, errKey: 'required' | 'minLength' | 'maxLength' | string): boolean;
+    getErrors(key: keyof T): ErrorObject<T>[keyof T];
+    /**
+     * Determines if a specific control has any validation errors.
+     *
+     * @param key - The key of the form control.
+     * @returns `true` if any error is present, otherwise `false`.
+     */
     hasError(key: keyof T): boolean;
+    setError(key: keyof T, errKey: string, hasError: boolean): void;
+    /**
+     * Sets a new value for a specified form control.
+     *
+     * @param key - The key of the form control to update.
+     * @param value - The new value to assign to the control.
+     */
     set(key: keyof T, value: T[keyof T]): void;
+    /**
+     * Validates the form data.
+     *
+     * If a key is provided, only that control is validated. If no key is provided, the entire form is validated.
+     *
+     * @param key - (Optional) The key of the control to validate.
+     * @returns `true` if the control(s) pass all validations; otherwise, `false`.
+     */
     validate(key?: keyof T): boolean;
 }
-export declare class Validators {
-    private static required;
-    static get Required(): ValidatorResult<unknown>;
-    private static email;
-    static get Email(): ValidatorResult<string>;
-    static minLength(length: number): ValidatorResult<string | any[]>;
-    static maxLength(length: number): ValidatorResult<string | any[]>;
-    static pattern(errKey: string, pattern: RegExp): ValidatorResult<string>;
-    static custom<T>(errKey: string, validator: (value: T) => boolean): ValidatorResult<T>;
-    private static createValidatorResult;
-}
-export {};

package/dist/components/Form/formHelp/formArray.d.ts

@@ -0,0 +1,85 @@
+import { ValidationDefault, ArrayValidation } from "./models";
+/**
+ * A class that encapsulates an array of form controls along with their validation logic.
+ *
+ * @template T - An object type representing the shape of a single form control's value.
+ */
+export declare class FormArray<T extends object> {
+    /**
+     * An array of array-level validators. Each validator validates the entire array of form control values.
+     * Each element is a ValidatorResult function that returns a validation result for the entire array.
+     *
+     * @private
+     */
+    private internalArrayValidation;
+    /**
+     * An array of control-level validators. Each element is a tuple where the first value is not used
+     * in this class and the second value is an array of validators that validate a single control value.
+     *
+     * @private
+     */
+    private internalValidation;
+    /**
+     * A function to update the current state of control-level validations.
+     *
+     * @private
+     */
+    private setValidation;
+    /**
+     * An array of error arrays. Each inner array holds the errors corresponding to a single form control.
+     *
+     * @private
+     */
+    private errors;
+    /**
+     * Creates an instance of FormArray.
+     *
+     * @param arrayValidation - A tuple where the first element is an initial array of control-level validation definitions
+     * and the second element is an array of array-level validators.
+     */
+    constructor(arrayValidation: ArrayValidation<T>);
+    /**
+     * Removes a control's validation at the specified index.
+     *
+     * @param index - The index of the control to remove.
+     */
+    remove(index: number): void;
+    /**
+     * Replaces a control's validation at the specified index with a new validation.
+     *
+     * @param index - The index of the control to replace.
+     * @param controlValidation - The new validation to apply for the control.
+     */
+    replace(index: number, controlValidation: ValidationDefault<T, keyof T>): void;
+    /**
+     * Adds a new control validation to the array.
+     *
+     * @param controlValidation - The validation definition to add.
+     */
+    add(controlValidation: ValidationDefault<T, keyof T>): void;
+    /**
+     * Checks if any validation errors exist.
+     *
+     * @param index - (Optional) The index of the control to check for errors.
+     * If not provided, it checks the entire form array.
+     * @returns `true` if any errors are found, otherwise `false`.
+     */
+    hasError(index?: number): boolean;
+    /**
+     * Checks if a specific validator error exists for a control at the given index.
+     *
+     * @param index - The index of the control.
+     * @param errKey - The key identifying the specific error to check for.
+     * @returns `true` if the specific error is present, otherwise `false`.
+     */
+    hasValidator(index: number, errKey: string): boolean;
+    /**
+     * Validates the provided form control values.
+     *
+     * @param values - The array of form control values.
+     * @param index - (Optional) The index of a single control to validate.
+     * If not provided, the method validates all controls in the form array.
+     * @returns `true` if all validations pass, otherwise `false`.
+     */
+    validate(values: T[], index?: number): boolean;
+}

package/dist/components/Form/formHelp/models.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from "solid-js";
+import { FormArray } from "./formArray";
+export interface ValidatorResult<T> {
+    revalidate: (val: T) => boolean;
+    errKey: string;
+}
+export interface Error {
+    key: string;
+    hasError: boolean;
+    display?: JSX.Element;
+}
+export type ValidationDefault<T, P extends keyof T> = [T[P], ValidatorResult<T[P]>[]];
+export type ErrorObject<T> = {
+    [P in keyof T]: Error[];
+};
+export type ArrayValidation<T> = [(ValidationDefault<T, keyof T>)[], ValidatorResult<T[]>[]];
+export interface ValidatorResult<T> {
+    revalidate: (val: T) => boolean;
+    errKey: string;
+    hide?: (val: T) => boolean;
+}
+export interface Error {
+    key: string;
+    hasError: boolean;
+}
+export type ValidatorObject<T> = {
+    [P in keyof T]?: ValidatorResult<T[P]>[];
+};
+export type FormGroupData<T extends object> = {
+    [P in keyof T]: [T[P], ValidatorResult<T[P]>[]] | FormArray<T>;
+};

package/dist/components/Form/formHelp/validators.d.ts

@@ -0,0 +1,81 @@
+import { ValidatorResult } from "./models";
+/**
+ * A collection of static validator functions that return a ValidatorResult.
+ * These validators can be used to validate common conditions such as required fields,
+ * email format, minimum/maximum length, custom patterns, and more.
+ */
+export declare class Validators {
+    /**
+     * Validates that a value is present (i.e. not null or undefined).
+     * For strings, it checks that the trimmed string is not empty.
+     * For arrays, it verifies that the array is not empty.
+     *
+     * @template T - The type of the value to validate.
+     * @returns A ValidatorResult that includes the error key and a revalidation function.
+     *
+     * @private
+     */
+    private static required;
+    /**
+     * A getter that returns the required validator.
+     *
+     * @returns A ValidatorResult for validating required fields.
+     */
+    static get Required(): ValidatorResult<unknown>;
+    /**
+     * Validates that a string is in a valid email format.
+     *
+     * @returns A ValidatorResult that includes the error key and a revalidation function for email validation.
+     *
+     * @private
+     */
+    private static email;
+    /**
+     * A getter that returns the email validator.
+     *
+     * @returns A ValidatorResult for validating email format.
+     */
+    static get Email(): ValidatorResult<string>;
+    /**
+     * Creates a validator that checks if a value meets the minimum length requirement.
+     *
+     * @param length - The minimum length required.
+     * @returns A ValidatorResult that includes the error key and a revalidation function for minimum length.
+     */
+    static minLength(length: number): ValidatorResult<string | any[]>;
+    /**
+     * Creates a validator that checks if a value does not exceed the maximum length.
+     *
+     * @param length - The maximum allowed length.
+     * @returns A ValidatorResult that includes the error key and a revalidation function for maximum length.
+     */
+    static maxLength(length: number): ValidatorResult<string | any[]>;
+    /**
+     * Creates a validator that checks if a string matches the provided regular expression pattern.
+     *
+     * @param errKey - The error key to associate with this validator.
+     * @param pattern - The regular expression pattern to test the value against.
+     * @returns A ValidatorResult that includes the provided error key and a revalidation function.
+     */
+    static pattern(errKey: string, pattern: RegExp): ValidatorResult<string>;
+    /**
+     * Creates a custom validator with a provided validation function.
+     *
+     * @template T - The type of the value to validate.
+     * @param errKey - The error key to associate with this validator.
+     * @param validator - A function that receives a value of type T and returns a boolean indicating validity.
+     * @returns A ValidatorResult that includes the error key and a revalidation function.
+     */
+    static custom<T>(errKey: string, validator: (value: T) => boolean, hide?: (val: T) => boolean): ValidatorResult<T>;
+    /**
+     * A helper function that creates a ValidatorResult object.
+     *
+     * @template T - The type of the value to validate.
+     * @param errKey - The error key associated with the validator.
+     * @param revalidate - A function that revalidates a given value and returns true if valid, false otherwise.
+     * @returns A ValidatorResult containing the error key and revalidation function.
+     *
+     * @private
+     */
+    private static createValidatorResult;
+}

package/dist/components/FormField/coleError.d.ts

@@ -0,0 +1,7 @@
+import { Component, JSX } from "solid-js";
+interface Props {
+    errorName: string;
+    children?: JSX.Element;
+}
+export declare const ColeError: Component<Props>;
+export {};

package/dist/components/FormField/formField.d.ts

@@ -1,7 +1,7 @@
 import { Component, JSX } from "solid-js";
 interface Props extends JSX.FieldsetHTMLAttributes<HTMLFieldSetElement> {
     children: JSX.Element;
-    styleType?: "primary" | "accent" | "tertiary";
+    styleType?: "primary";
     name: string;
     formName?: string;
     class?: string;

package/dist/components/FormField/formProvider.d.ts

@@ -1,4 +1,5 @@
 import { Accessor, JSX, Component, Setter } from "solid-js";
+import { Error } from "../Form/formHelp/models";
 interface formFieldContext<T = string> {
     getName: Accessor<string>;
     setName: Setter<string>;
@@ -11,6 +12,14 @@ interface formFieldContext<T = string> {
     getFieldType: Accessor<string>;
     setFieldType: Setter<string>;
     formName?: string;
+    getErrors: Accessor<{
+        err: Error[];
+    }>;
+    setErrors: Setter<{
+        err: Error[];
+    }>;
+    getFormFieldRef: Accessor<HTMLFieldSetElement | undefined>;
+    setFormFieldRef: Setter<HTMLFieldSetElement | undefined>;
 }
 interface ProviderProps {
     children: JSX.Element;

package/dist/components/Header/header.d.ts

@@ -0,0 +1,7 @@
+import { Component, JSX } from "solid-js";
+interface HeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element | JSX.Element[] | undefined;
+}
+export declare const HeaderBar: Component<HeaderProps>;
+export declare const SubHeaderBar: Component<HeaderProps>;
+export {};

package/dist/components/Menu/menu.d.ts

@@ -0,0 +1,9 @@
+import { Accessor, Component, JSX, Setter } from "solid-js";
+interface MenuProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    anchorElement: Accessor<HTMLElement | undefined>;
+    children: JSX.Element;
+    position?: 'left' | 'center' | 'right';
+    show: [Accessor<boolean>, Setter<boolean>];
+}
+export declare const Menu: Component<MenuProps>;
+export {};

package/dist/components/Menu/menuitem.d.ts

@@ -0,0 +1,6 @@
+import { Component, JSX } from "solid-js";
+interface MenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {
+    children: JSX.Element;
+}
+export declare const MenuItem: Component<MenuItemProps>;
+export {};

package/dist/components/Select/select.component.d.ts

@@ -21,7 +21,6 @@ interface SelectProps<T = string, K = boolean> {
     class?: string;
     dropdownClass?: string;
     children: JSX.Element;
-    style?: "primary" | "accent" | "tertiary";
 }
 export declare function Select<T, K extends boolean = false>(props: SelectProps<(K extends true ? T[] : T), K>): JSX.Element;
 export {};

package/dist/components/TabV2/tabs.d.ts

@@ -0,0 +1,24 @@
+import { Component } from "solid-js";
+interface TabBarProps {
+    tabs: string[];
+    activeTab: number;
+    class?: string;
+    indicatorClass?: string;
+    noRail?: boolean;
+    onTabChange?: (label: string, index: number) => void;
+    tabPosition?: "start" | "center" | "end" | "stretch";
+    colors?: {
+        text?: string;
+        activeText?: string;
+        background?: string;
+        indicator?: string;
+    };
+    size?: {
+        height?: string;
+        fontSize?: string;
+        indicatorHeight?: string;
+    };
+    animationTiming?: string;
+}
+export declare const TabBar: Component<TabBarProps>;
+export {};

package/dist/components/TableV2/cell.d.ts

@@ -4,7 +4,8 @@ interface BaseCellProps<T> extends Omit<JSX.TdHTMLAttributes<HTMLTableCellElemen
     class?: string;
     header?: boolean;
     footer?: boolean;
+    rowNumber?: number;
     children: JSX.Element | ((item: T, index: number) => JSX.Element);
 }
-export declare const Cell: <T>(props: BaseCellProps<T>) => JSX.Element;
+export declare const Cell: <T = any>(props: BaseCellProps<T>) => JSX.Element;
 export {};

package/dist/components/TableV2/header.d.ts

@@ -3,6 +3,7 @@ interface HeaderProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {
     children: JSX.Element;
     style?: JSX.CSSProperties;
     class?: string;
+    rowNumber?: number;
 }
 export declare const Header: <T>(props: HeaderProps) => JSX.Element;
 export {};

package/dist/components/TableV2/table.d.ts

@@ -1,8 +1,8 @@
-import { JSX, Setter } from "solid-js";
+import { Accessor, JSX, Setter } from "solid-js";
 import { StyleContainer } from "./tableProvider";
-interface TableProps<T> {
+interface TableProps<T = any> {
     children: JSX.Element;
-    data: T[];
+    data: Accessor<T[]>;
     setData?: Setter<T[]>;
     columns: string[];
     formName?: string;

package/dist/components/TableV2/tableProvider.d.ts

@@ -49,7 +49,7 @@ export interface ColumnGroupStyle {
 }
 export interface TableContext<T> {
     getDataSource: () => T[];
-    setDataSource: (data: T[]) => void;
+    setDataSource: (data: T[]) => any;
     addHeaderCell: (name: string, index: number, header: JSX.Element) => void;
     addRowCell: (index: number, name: string, cell: (item: T, index: number) => JSX.Element) => void;
     addFooterCell: (index: number, name: string, cell: JSX.Element) => void;
@@ -69,7 +69,6 @@ export declare const TableProvider: <T>(props: TableProviderProps<T>) => JSX.Ele
 interface ColumnProps {
     children: JSX.Element;
     name: string;
-    rowNumber?: number;
 }
 export declare const ColumnProvider: (props: ColumnProps) => JSX.Element;
 export declare const useColumnContext: () => {
@@ -78,6 +77,5 @@ export declare const useColumnContext: () => {
 };
 export interface ColumnInfo {
     name: string;
-    rowNumber: number;
 }
 export {};

package/dist/components/expansion/expansion.d.ts

@@ -6,7 +6,6 @@ type Props = {
     };
     extraLogic?: () => void;
     startOpen?: boolean;
-    styleType?: "primary" | "accent" | "tertiary";
     [key: string]: any;
     arrowSize?: {
         width: string;

package/dist/components/popup/popup.component.d.ts

@@ -10,20 +10,8 @@ type Props = {
         y?: string;
     };
     styleType?: "primary" | "accent" | "tertiary";
-    setClose?: Setter<boolean>;
     ref?: Accessor<HTMLDivElement | undefined>;
 };
-/**
- *
- * @param title {string} {string} - The title of the modal.
- * @param width {string} {string} - The css width of the modal.
- * @param maxWidth {string} {string} - The optional css max-width of the modal.
- * @param height {string} {string} - The css height of the modal.
- * @param maxHeight {string} {string} - The optional css max-height of the modal.
- * @param translate {x{x: string, y: string} - Override the default x and y coordinates of the modal.
- * @param backgroundClick [Accessor <bool>, Setter <bool>] - A signal and setter for enabling the background click.
- * @returns - A Modal component.
- */
 export declare const Modal: Component<Props>;
 declare module "solid-js" {
     namespace JSX {

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export * from './components/Select/select.component';
 export * from './components/Select/option.component';
 export * from './components/Snackbar/snackbar';
 export * from './components/popup/popup.component';
-export * from './components/Tabs/tabs';
 export * from './components/TextArea/TextArea';
 export * from './components/expansion/expansion';
 export * from './components/popup/popup.component';
@@ -24,3 +23,8 @@ export { Column } from './components/TableV2/column';
 export { Cell } from './components/TableV2/cell';
 export { Header } from './components/TableV2/header';
 export { type StyleContainer } from './components/TableV2/tableProvider';
+export { TabBar } from './components/TabV2/tabs';
+export * from './components/Container/container';
+export * from './components/Menu/menu';
+export * from './components/Menu/menuitem';
+export { ColeError as FieldError } from './components/FormField/coleError';