@akad/design-system 0.1.0-beta.1 → 0.1.0-beta.10

package/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@akad/design-system",
-  "version": "0.1.0-beta.1",
-  "main": "react/react.js",
-  "types": "react/main.d.ts",
-  "author": "Gabriel Mule <gabemule@gmail.com>",
-  "license": "MIT",
-  "devDependencies": {
-    "concurrently": "^8.2.2"
-  }
-}
+	"name": "@akad/design-system",
+	"version": "0.1.0-beta.10",
+	"main": "react/react.js",
+	"types": "react/main.d.ts",
+	"author": "Gabriel Mule <gabemule@gmail.com>",
+	"license": "MIT",
+	"devDependencies": {
+		"concurrently": "^8.2.2"
+	}
+}

package/react/components/atoms/Button/Button.config.d.ts

@@ -67,6 +67,7 @@ export interface IdProps {
 }
 export interface TestIdProps {
     type: StringConstructor;
+    default: string;
 }
 export interface FullSizeProps {
     type: BooleanConstructor;

package/react/components/atoms/Card/Card.config.d.ts

@@ -53,6 +53,14 @@ export interface ElevationProps {
     default: number;
     options: number[];
 }
+export interface IdProps {
+    type: StringConstructor;
+    default: string;
+}
+export interface TestIdProps {
+    type: StringConstructor;
+    default: string;
+}
 export interface CardConfig {
     name: string;
     class: string;
@@ -60,6 +68,8 @@ export interface CardConfig {
         backgroundColor: BackgroundColorProps;
         borderColor: BorderColorProps;
         elevation: ElevationProps;
+        id: IdProps;
+        testId: TestIdProps;
     };
 }
 declare const CardConfig: CardConfig;

package/react/components/atoms/Card/Card.d.ts

@@ -1,6 +1,8 @@
 import { default as PropTypes } from 'prop-types';
 
 export interface DsCardProps {
+    id?: string;
+    testId?: string;
     children?: string | JSX.Element | JSX.Element[];
     className?: string;
     elevation?: number;
@@ -8,8 +10,10 @@ export interface DsCardProps {
     borderColor?: string;
 }
 declare const DsCard: {
-    ({ children, className, elevation, backgroundColor, borderColor, }: DsCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, testId, children, className, elevation, backgroundColor, borderColor, }: DsCardProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
+        id: PropTypes.Requireable<string>;
+        testId: PropTypes.Requireable<string>;
         backgroundColor: PropTypes.Requireable<import('./Card.config').Color>;
         borderColor: PropTypes.Requireable<import('./Card.config').Color>;
         elevation: PropTypes.Requireable<number>;

package/react/components/atoms/Checkbox/Checkbox.config.d.ts

@@ -1,6 +1,6 @@
 export interface NameProps {
     type: StringConstructor;
-    required: true;
+    required: false;
 }
 export interface TestIdProps {
     type: StringConstructor;
@@ -18,6 +18,10 @@ export interface CheckedProps {
     type: BooleanConstructor;
     default: boolean;
 }
+export interface ChangeByCheckedProps {
+    type: BooleanConstructor;
+    default: boolean;
+}
 export interface DisabledProps {
     type: BooleanConstructor;
     default: boolean;
@@ -36,6 +40,7 @@ export interface CheckboxConfig {
         description: DescriptionProps;
         checked: CheckedProps;
         disabled: DisabledProps;
+        changeByChecked: ChangeByCheckedProps;
         onChangeHandler: OnChangeHandlerProps;
     };
 }

package/react/components/atoms/Checkbox/Checkbox.d.ts

@@ -3,12 +3,13 @@ import { default as React, ReactNode } from 'react';
 export interface DsCheckboxProps {
     id?: string;
     className?: string;
-    name: string;
+    name?: string;
     testId?: string;
     label?: string | ReactNode;
     description?: string | ReactNode;
     checked?: boolean;
     disabled?: boolean;
+    changeByChecked?: boolean;
     onChangeHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 declare const DsCheckbox: React.ForwardRefExoticComponent<DsCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/react/components/atoms/Icon/Icon.config.d.ts

@@ -102,6 +102,10 @@ export interface WeightProps {
     default: Weight;
     options: Weight[];
 }
+export interface TestIdProps {
+    type: StringConstructor;
+    default: string;
+}
 export interface OnClickProps {
     type: FunctionConstructor;
     default: () => void;
@@ -117,6 +121,7 @@ export interface IconConfig {
         fontVariationSettings: FontVariationSettingsProps;
         fill: FillProps;
         weight: WeightProps;
+        testId: TestIdProps;
         onClick: OnClickProps;
     };
 }

package/react/components/atoms/Input/mask.d.ts

@@ -1,3 +1,9 @@
+import { MaskedOptions } from 'imask';
+
+interface MaskedDynamic {
+    value: string;
+    compiledMasks: MaskedOptions[];
+}
 declare const maskConfig: {
     currency: {
         mask: string;
@@ -26,5 +32,11 @@ declare const maskConfig: {
             maxLength: number;
         }[];
     };
+    'phone-br': {
+        mask: {
+            mask: string;
+        }[];
+        dispatch: (appended: string, dynamicMasked: MaskedDynamic) => Partial<Pick<import('imask').Masked<any>, "mask" | "parent" | "prepare" | "prepareChar" | "validate" | "commit" | "format" | "parse" | "overwrite" | "eager" | "skipInvalid" | "autofix">>;
+    };
 };
 export default maskConfig;

package/react/components/atoms/Loading/Loading.config.d.ts

@@ -30,10 +30,20 @@ export interface BackgroundColorProps {
     default: BackgroundColor;
     options: BackgroundColor[];
 }
+export interface IdProps {
+    type: StringConstructor;
+    default: string;
+}
+export interface TestIdProps {
+    type: StringConstructor;
+    default: string;
+}
 export interface LoadingConfig {
     name: string;
     class: string;
     props: {
+        id: IdProps;
+        testId: TestIdProps;
         size: SizeProps;
         opacity: OpacityProps;
         fullscreen: FullscreenProps;

package/react/components/atoms/Loading/Loading.d.ts

@@ -1,6 +1,8 @@
 import { default as PropTypes } from 'prop-types';
 
 export interface DsLoadingProps {
+    id?: string;
+    testId?: string;
     className?: string;
     size?: string;
     opacity?: boolean;
@@ -8,8 +10,10 @@ export interface DsLoadingProps {
     backgroundColor?: string;
 }
 declare const DsLoading: {
-    ({ className, size, opacity, fullscreen, backgroundColor, }: DsLoadingProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, testId, className, size, opacity, fullscreen, backgroundColor, }: DsLoadingProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
+        id: PropTypes.Requireable<string>;
+        testId: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<import('./Loading.config').Size>;
         opacity: PropTypes.Requireable<boolean>;
         fullscreen: PropTypes.Requireable<boolean>;

package/react/components/atoms/Select/Select.config.d.ts

@@ -89,6 +89,15 @@ export interface FeedbackProps {
     type: StringConstructor;
     default: string;
 }
+interface Option {
+    label?: string;
+    value?: string | number | readonly string[];
+}
+interface GroupedOption {
+    label?: string;
+    options: Option[];
+}
+export type SelectOptions = (Option | GroupedOption)[];
 export interface SelectConfig {
     name: string;
     class: string;
@@ -99,6 +108,7 @@ export interface SelectConfig {
         disabled: DisabledProps;
         multiple: MultipleProps;
         name: NameProps;
+        options: SelectOptions;
         testId: TestIdProps;
         placeholder: PlaceholderProps;
         onChange: OnChangeProps;

package/react/components/atoms/Select/Select.d.ts

@@ -1,10 +1,6 @@
+import { SelectOptions } from './Select.config';
 import { default as React } from 'react';
 
-export interface SelectItem {
-    label: string;
-    value: string | number | readonly string[] | undefined;
-    options?: SelectItem[];
-}
 export interface DsSelectProps {
     label: string;
     className?: string;
@@ -13,7 +9,7 @@ export interface DsSelectProps {
     multiple?: boolean;
     name?: string;
     testId?: string;
-    options: Array<SelectItem> | undefined;
+    options: SelectOptions;
     value?: string | number;
     placeholder?: string;
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string | number) => void;

package/react/components/molecules/EditableSelect/EditableSelect.config.d.ts

@@ -1,24 +1,34 @@
+export declare const Size: {
+    readonly Small: "small";
+    readonly Medium: "medium";
+    readonly Large: "large";
+};
+export type Size = (typeof Size)[keyof typeof Size];
 export interface Option {
-    label?: string;
-    value?: string;
+    label: string;
+    value?: string | number;
     name?: string;
+    id?: string | number;
 }
 export interface LabelProps {
     type: StringConstructor;
     default: string;
 }
-export interface CheckedProps {
+export interface DisabledProps {
     type: BooleanConstructor;
     default: boolean;
 }
-export interface DescriptionProps {
-    type: StringConstructor;
-    default: string;
+export interface LoadingProps {
+    type: BooleanConstructor;
 }
-export interface DisabledProps {
+export interface AnimatedProps {
     type: BooleanConstructor;
     default: boolean;
 }
+export interface PlaceholderProps {
+    type: StringConstructor;
+    default: string;
+}
 export interface IconProps {
     type: StringConstructor;
     default: undefined;
@@ -43,6 +53,11 @@ export interface ValueProps {
     type: StringConstructor;
     default: string;
 }
+export interface SizeProps {
+    type: StringConstructor;
+    options: Size[];
+    default: Size;
+}
 export interface OnChangeHandlerProps {
     type: FunctionConstructor;
     default: () => void;
@@ -59,17 +74,13 @@ export interface OnSelectHandlerProps {
     type: FunctionConstructor;
     default: () => void;
 }
-export interface GetOptionLabelProps {
-    type: FunctionConstructor;
-    default: (option: Option) => string;
-}
 export interface EditableSelectConfig {
     name: string;
     class: string;
     props: {
         label: LabelProps;
-        checked: CheckedProps;
-        description: DescriptionProps;
+        animated: AnimatedProps;
+        loading: LoadingProps;
         disabled: DisabledProps;
         icon: IconProps;
         name: NameProps;
@@ -77,11 +88,12 @@ export interface EditableSelectConfig {
         options: OptionsProps;
         status: StatusProps;
         value: ValueProps;
+        size: SizeProps;
         onChangeHandler: OnChangeHandlerProps;
         onBlurHandler: OnBlurHandlerProps;
         onFocusHandler: OnFocusHandlerProps;
         onSelectHandler: OnSelectHandlerProps;
-        getOptionLabel: GetOptionLabelProps;
+        placeholder: PlaceholderProps;
     };
 }
 declare const EditableSelectConfig: EditableSelectConfig;

package/react/components/molecules/EditableSelect/EditableSelect.d.ts

@@ -1,41 +1,25 @@
-import { default as PropTypes } from 'prop-types';
+import { Option } from './EditableSelect.config';
 
-export interface iSingleOption {
-    id?: number;
-    label?: string;
-}
 export interface DsEditableSelectProps {
     label?: string;
     name?: string;
     value?: string;
-    options?: iSingleOption[];
-    getOptionLabel?: (option: object) => string;
+    size?: string;
+    options?: Option[];
     onChangeHandler?: (event: React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement>) => void;
     onSelectHandler?: (selectedOption: object) => void;
     icon?: string;
     noOptionsMessage?: string;
     disabled?: boolean;
     status?: string;
+    placeholder?: string;
+    loading?: boolean;
+    animated?: boolean;
     onBlurHandler?: () => void;
     onFocusHandler?: () => void;
 }
 declare const DsEditableSelect: {
-    ({ label, name, value, options, getOptionLabel, onChangeHandler, onSelectHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        label: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        options: PropTypes.Requireable<(object | null | undefined)[]>;
-        getOptionLabel: PropTypes.Requireable<(...args: any[]) => any>;
-        onChangeHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        onSelectHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        icon: PropTypes.Requireable<string>;
-        noOptionsMessage: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        status: PropTypes.Requireable<string>;
-        onBlurHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        onFocusHandler: PropTypes.Requireable<(...args: any[]) => any>;
-    };
+    ({ label, name, value, options, size, onChangeHandler, onSelectHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, placeholder, loading, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DsEditableSelect;

package/react/components/molecules/EditableSelect/EditableSelect.stories.d.ts

@@ -8,6 +8,10 @@ export declare const Default: {
     args: {
         label: string;
         name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
     };
 };
 export declare const Disabled: {

package/react/helpers/utils.d.ts

@@ -55,3 +55,26 @@ export declare const getSchemaProperties: (schemaId: string, formSchema: JSONSch
  * @returns return input type, i.e password or email. If it's not defined, returns text as default.
  */
 export declare const getInputTypeByFormat: (definition: object) => string;
+/**
+ * Performs a deep equality comparison between two values.
+ *
+ * @template T - The type of the values being compared.
+ * @param {T} value - The first value to compare.
+ * @param {T} other - The second value to compare.
+ * @param {WeakSet} [visited=new WeakSet()] - A WeakSet to keep track of visited objects to handle circular references.
+ * @returns {boolean} Returns `true` if the values are deeply equal, `false` otherwise.
+ *
+ * @description
+ * The `isEqual` function performs a deep equality comparison between two values of any type.
+ * It handles primitive types, `null`, arrays, and objects.
+ *
+ * - If both values are primitives, it uses `Object.is()` for comparison.
+ * - If both values are `null`, it returns `true`.
+ * - If the values have different types, it returns `false`.
+ * - If the values are the same reference, it returns `true`.
+ * - If the values are arrays, it compares their lengths and recursively compares each element.
+ * - If the values are objects, it compares the number of keys and recursively compares each key-value pair.
+ * - It handles circular references by keeping track of visited objects using a `WeakSet`.
+ *
+ */
+export declare function isEqual<T>(value: T, other: T, visited?: WeakSet<object>): boolean;

package/react/helpers/validator.d.ts

@@ -1,3 +1,5 @@
 import { default as Ajv } from 'ajv';
 
 export declare const createAjvInstance: () => Ajv;
+export declare function emailValidator(email: string): boolean;
+export declare function phoneBrValidator(phone: string): boolean;

package/react/helpers/validator.test.d.ts

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

package/react/hooks/useStepper.d.ts

@@ -27,5 +27,5 @@ export declare const useStepper: (initialState?: DsStepProps[], selectedState?:
     isStep: (stepParam: number | string | DsStepProps) => boolean;
     isLastStep: boolean;
     disableSteps: (stepNameParam: string | Array<string>) => DsStepProps[];
-    disableStepsAfter: (stepNameParam: string) => DsStepProps[];
+    disableStepsAfter: (stepNameParam: string) => void;
 }[];