@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/flex/flex.tsx

@@ -0,0 +1,79 @@
+import clsx from "clsx";
+import {
+  ITFlexProps,
+  FlexDirection,
+  FlexAlign,
+  FlexJustify,
+  FlexWrap,
+} from "./flex.props";
+
+const directionMap: Record<FlexDirection, string> = {
+  row: "flex-row",
+  column: "flex-col",
+  "row-reverse": "flex-row-reverse",
+  "column-reverse": "flex-col-reverse",
+};
+
+const alignMap: Record<FlexAlign, string> = {
+  start: "items-start",
+  end: "items-end",
+  center: "items-center",
+  stretch: "items-stretch",
+  baseline: "items-baseline",
+};
+
+const justifyMap: Record<FlexJustify, string> = {
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly",
+};
+
+const wrapMap: Record<FlexWrap, string> = {
+  nowrap: "flex-nowrap",
+  wrap: "flex-wrap",
+  "wrap-reverse": "flex-wrap-reverse",
+};
+
+export default function ITFlex({
+  children,
+  direction = "row",
+  align,
+  justify,
+  wrap,
+  gap = 0,
+  grow,
+  shrink,
+  basis,
+  className,
+  style,
+  as: Component = "div",
+  onClick,
+}: ITFlexProps) {
+  const resolvedStyle: React.CSSProperties = {
+    gap: gap > 0 ? `${gap * 0.25}rem` : undefined,
+    flexGrow: typeof grow === "boolean" ? (grow ? 1 : 0) : grow,
+    flexShrink: typeof shrink === "boolean" ? (shrink ? 1 : 0) : shrink,
+    flexBasis: typeof basis === "number" ? `${basis * 0.25}rem` : basis,
+    ...style,
+  };
+
+  return (
+    <Component
+      className={clsx(
+        "flex",
+        directionMap[direction],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && wrapMap[wrap],
+        className
+      )}
+      style={resolvedStyle}
+      onClick={onClick}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/form-builder/fieldRenderer.tsx

@@ -0,0 +1,218 @@
+import React, { memo, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import { FieldConfigV2 } from "@/types/field.types";
+import { useITFormBuilderContext } from "./formBuilder.context";
+import ITInput from "../input/input";
+import ITSelect from "../select/select";
+import ITDatePicker from "../date-picker/datePicker";
+import ITTimePicker from "../time-picker/timePicker";
+import { useFieldRules } from "./useFormBuilder";
+import { getColSpanClass, getGridColsClass } from "@/utils/styles";
+import ITText from "@/components/text/text";
+
+
+
+interface ITFieldRendererProps {
+  config: FieldConfigV2;
+  columns?: number;
+  value?: any;
+  error?: string;
+  touched?: boolean;
+  dependentValues?: Record<string, any>;
+}
+
+const ITFieldRenderer = ({
+  config,
+  columns = 12,
+  value,
+  error,
+  touched,
+  dependentValues = {},
+}: ITFieldRendererProps) => {
+  const context = useITFormBuilderContext();
+  const { isVisible, isRequired, isDisabled, dynamicProps } = useFieldRules(
+    config,
+    dependentValues,
+  );
+
+  useEffect(() => {
+    context.registerField(config.name, config);
+    return () => {
+      context.unregisterField(config.name);
+    };
+  }, [config.name]);
+
+  if (!isVisible) return null;
+
+  const activeConfig = {
+    ...config,
+    ...dynamicProps,
+    required: isRequired,
+    disabled: isDisabled,
+  };
+
+  const {
+    name,
+    label,
+    type,
+    placeholder,
+    options,
+    valueField,
+    labelField,
+    formatNumber,
+    showHintLength,
+    leftIcon,
+    rightIcon,
+  } = activeConfig;
+
+  const handleChangeWrapper = useCallback(
+    async (val: any) => {
+      const finalValue = val?.target ? val.target.value : val;
+      await context.setFieldValue(name, finalValue);
+      if (activeConfig.onChangeAction) {
+        await activeConfig.onChangeAction(finalValue, context);
+      }
+    },
+    [name, context]
+  );
+
+  const renderField = () => {
+    switch (type) {
+      case "text":
+      case "password":
+      case "number":
+      case "email":
+        return (
+          <ITInput
+            type={type === "email" ? "text" : type}
+            name={name}
+            label={label || ""}
+            placeholder={placeholder}
+            disabled={isDisabled as boolean}
+            value={value !== undefined ? value : activeConfig.defaultValue || ""}
+            onChange={handleChangeWrapper}
+            onBlur={context.handleBlur}
+            currencyFormat={activeConfig.currencyFormat}
+            touched={touched}
+            error={error}
+            required={isRequired as boolean}
+            iconRight={rightIcon}
+            iconLeft={leftIcon}
+            showHintLength={showHintLength}
+            maxLength={activeConfig.maxLength}
+            minLength={activeConfig.minLength}
+            rows={activeConfig.rows}
+            formatNumber={formatNumber}
+          />
+        );
+
+      case "select":
+        return (
+          <ITSelect
+            options={(Array.isArray(options) ? options : []) as any}
+            name={name}
+            disabled={isDisabled as boolean}
+            label={label || ""}
+            placeholder={placeholder}
+            value={value !== undefined ? value : activeConfig.defaultValue || ""}
+            valueField={valueField}
+            labelField={labelField}
+            onChange={handleChangeWrapper}
+            onBlur={context.handleBlur}
+            touched={touched}
+            error={error}
+            required={isRequired as boolean}
+          />
+        );
+
+      case "date":
+        return (
+          <ITDatePicker
+            name={name}
+            disabled={isDisabled as boolean}
+            label={label || ""}
+            value={value}
+            onChange={handleChangeWrapper}
+            placeholder={placeholder}
+            onBlur={context.handleBlur}
+            touched={touched}
+            error={error}
+            required={isRequired as boolean}
+          />
+        );
+
+      case "time":
+        return (
+          <ITTimePicker
+            name={name}
+            disabled={isDisabled as boolean}
+            label={label || ""}
+            value={value}
+            onChange={handleChangeWrapper}
+            placeholder={placeholder}
+            onBlur={context.handleBlur}
+            touched={touched}
+            error={error}
+            required={isRequired as boolean}
+          />
+        );
+
+      case "custom":
+        if (activeConfig.component) {
+          const CustomComponent = activeConfig.component;
+          return (
+            <CustomComponent
+              {...activeConfig}
+              value={value}
+              onChange={handleChangeWrapper}
+              onBlur={context.handleBlur}
+              error={error}
+              touched={touched}
+              context={context}
+            />
+          );
+        }
+        return null;
+
+      case "section":
+        return (
+          <div className={clsx("w-full col-span-full", activeConfig.className)}>
+            {label && (
+              <ITText as="h4" className="text-lg font-semibold text-gray-800 mb-4">
+                {label}
+              </ITText>
+            )}
+            <div className={clsx("grid gap-y-6 gap-x-5", getGridColsClass(columns as any))}>
+              {activeConfig.fields?.map((childConfig) => (
+                <ITFieldRenderer
+                  key={childConfig.name}
+                  config={childConfig}
+                  columns={columns}
+                />
+              ))}
+            </div>
+          </div>
+        );
+
+      case "array":
+        return (
+          <div className="p-4 border-2 border-dashed border-gray-200 rounded-xl">
+            <ITText as="p" className="text-sm text-gray-500 text-center">
+              Array Field: {label}
+            </ITText>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={clsx(getColSpanClass(activeConfig.column, columns), activeConfig.className)}>
+      {renderField()}
+    </div>
+  );
+};
+
+export default memo(ITFieldRenderer);

package/src/components/form-builder/formBuilder.context.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { FieldConfigV2, FieldContextV2 } from '@/types/field.types';
+import * as Yup from 'yup';
+
+interface ITFormBuilderContextType extends FieldContextV2 {
+  config: FieldConfigV2[];
+  isSubmitting: boolean;
+  isValidating: boolean;
+  submitCount: number;
+  initialValues: Record<string, any>;
+  errors: Record<string, string>;
+  touched: Record<string, boolean>;
+  handleBlur: (e: any) => void;
+  handleChange: (e: any) => void;
+  registerField: (name: string, config: FieldConfigV2) => void;
+  unregisterField: (name: string) => void;
+  getFieldConfig: (name: string) => FieldConfigV2 | undefined;
+}
+
+const ITFormBuilderContext = createContext<ITFormBuilderContextType | undefined>(undefined);
+
+export const ITFormBuilderProvider = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: Omit<ITFormBuilderContextType, 'registerField' | 'unregisterField' | 'getFieldConfig'>;
+}) => {
+  const [fieldRegistry, setFieldRegistry] = useState<Record<string, FieldConfigV2>>({});
+
+  const registerField = React.useCallback((name: string, config: FieldConfigV2) => {
+    setFieldRegistry((prev) => ({ ...prev, [name]: config }));
+  }, []);
+
+  const unregisterField = React.useCallback((name: string) => {
+    setFieldRegistry((prev) => {
+      const newRegistry = { ...prev };
+      delete newRegistry[name];
+      return newRegistry;
+    });
+  }, []);
+
+  const getFieldConfig = React.useCallback((name: string) => {
+    return fieldRegistry[name];
+  }, [fieldRegistry]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      ...value,
+      registerField,
+      unregisterField,
+      getFieldConfig,
+    }),
+    [value, registerField, unregisterField, getFieldConfig]
+  );
+
+  return (
+    <ITFormBuilderContext.Provider value={contextValue}>
+      {children}
+    </ITFormBuilderContext.Provider>
+  );
+};
+
+export const useITFormBuilderContext = () => {
+  const context = useContext(ITFormBuilderContext);
+  if (!context) {
+    throw new Error('useITFormBuilderContext must be used within an ITFormBuilderProvider');
+  }
+  return context;
+};

package/src/components/form-builder/formBuilder.props.ts

@@ -0,0 +1,43 @@
+import { FieldConfig, FieldConfigV2 } from "@/types/field.types";
+
+export interface ITFormBuilderProps {
+  // Legacy
+  fields?: FieldConfig[];
+  
+  // V2 Architecture
+  config?: FieldConfigV2[];
+  
+  columns?: number;
+  values: any;
+  handleChange: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.FocusEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLSelectElement>
+      | { target: { name: string; value: any } }
+  ) => void;
+  handleBlur: (
+    event:
+      | React.FocusEvent<HTMLInputElement>
+      | React.FocusEvent<HTMLSelectElement, Element>
+      | React.FocusEvent<HTMLTextAreaElement, Element>
+      | { target: { name: string; value: any } }
+  ) => void;
+  touched: any;
+  errors: any;
+  setFieldValue?: (
+    field: string,
+    value: any,
+    shouldValidate?: boolean
+  ) => Promise<void | any>;
+  setFieldTouched?: (
+    field: string,
+    touched?: boolean,
+    shouldValidate?: boolean
+  ) => Promise<void | any>;
+  setFieldError?: (
+    field: string,
+    message: string | undefined
+  ) => void;
+  isSubmitting?: boolean;
+}