x-ui-design 0.2.12 → 0.2.13

package/lib/components/Form/Form.client.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import {
+  Children,
+  FC,
+  Fragment,
+  isValidElement,
+  SyntheticEvent,
+  useEffect,
+  useMemo,
+  useRef
+} from 'react';
+import { useForm } from '@/hooks/useForm';
+import { FormProps } from '../../types/form';
+import { FormContext } from './Form';
+
+const FormClient: FC<FormProps> = ({
+  children,
+  form,
+  style = {},
+  prefixCls,
+  className = '',
+  onFinish,
+  onFinishFailed,
+  initialValues = {},
+  onValuesChange,
+  onFieldsChange,
+  layout = 'horizontal',
+  ...rest
+}) => {
+  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
+  const formInstance = form || internalForm;
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleSubmit = async (e: SyntheticEvent) => {
+    e.preventDefault();
+
+    if (await formInstance.validateFields()) {
+      onFinish?.(formInstance.getFieldsValue());
+    } else if (onFinishFailed) {
+      const errorFields = formInstance.getFieldsError();
+      onFinishFailed({ values: formInstance.getFieldsValue(), errorFields });
+    }
+  };
+
+  const childrenList = useMemo(
+    () => (Array.isArray(children) ? children : [children]).filter(Boolean),
+    [children]
+  );
+
+  useEffect(() => {
+    if (onFieldsChange) {
+      formInstance.onFieldsChange = onFieldsChange;
+    }
+
+    if (onValuesChange) {
+      formInstance.onValuesChange = onValuesChange;
+    }
+  }, [formInstance, onFieldsChange, onValuesChange]);
+
+  return (
+    <FormContext.Provider value={formInstance}>
+      <form
+        style={style}
+        ref={formRef}
+        onSubmit={handleSubmit}
+        className={`${prefixCls} ${className}`}
+        {...rest}
+      >
+        {Children.map(childrenList, child => {
+          if (isValidElement(child) && child.type !== Fragment) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            const { ...childProps } = child.props;
+
+            return (
+              <child.type
+                {...childProps}
+                child={child}
+                size={childProps.size || rest.size}
+                layout={childProps.layout || layout}
+              />
+            );
+          }
+
+          return child;
+        })}
+      </form>
+    </FormContext.Provider>
+  );
+};
+
+export default FormClient;

package/lib/components/Form/Form.tsx

@@ -1,98 +1,32 @@
-'use client';
-
-import {
-  Children,
-  createContext,
-  FC,
-  Fragment,
-  isValidElement,
-  SyntheticEvent,
-  useEffect,
-  useMemo,
-  useRef
-} from 'react';
-import { useForm } from '@/hooks/useForm';
 import { FormInstance, FormItemProps, FormProps } from '../../types/form';
 import { prefixClsForm } from '../../utils';
-import FormItem from './Item/Item';
+import FormItem from './Item/FormItem';
+import FormClient from './Form.client';
+import { createContext, FC } from 'react';
 
 export const FormContext = createContext<FormInstance | null>(null);
 
 const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
   children,
-  form,
   style = {},
   prefixCls = prefixClsForm,
   className = '',
-  onFinish,
-  onFinishFailed,
-  initialValues = {},
-  onValuesChange,
-  onFieldsChange,
   layout = 'horizontal',
   ...rest
 }) => {
-  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
-  const formInstance = form || internalForm;
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const handleSubmit = async (e: SyntheticEvent) => {
-    e.preventDefault();
-
-    if (await formInstance.validateFields()) {
-      onFinish?.(formInstance.getFieldsValue());
-    } else if (onFinishFailed) {
-      const errorFields = formInstance.getFieldsError();
-      onFinishFailed({ values: formInstance.getFieldsValue(), errorFields });
-    }
-  };
-
-  const childrenList = useMemo(
-    () => (Array.isArray(children) ? children : [children]).filter(Boolean),
-    [children]
-  );
-
-  useEffect(() => {
-    if (onFieldsChange) {
-      formInstance.onFieldsChange = onFieldsChange;
-    }
-
-    if (onValuesChange) {
-      formInstance.onValuesChange = onValuesChange;
-    }
-  }, [formInstance, onFieldsChange, onValuesChange]);
-
   return (
-    <FormContext.Provider value={formInstance}>
-      <form
-        style={style}
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className={`${prefixCls} ${className}`}
-      >
-        {Children.map(childrenList, child => {
-          if (isValidElement(child) && child.type !== Fragment) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            const { ...childProps } = child.props;
-
-            return (
-              <child.type
-                {...childProps}
-                child={child}
-                size={childProps.size || rest.size}
-                layout={childProps.layout || layout}
-              />
-            );
-          }
-
-          return child;
-        })}
-      </form>
-    </FormContext.Provider>
+    <FormClient
+      style={style}
+      prefixCls={prefixCls}
+      className={className}
+      layout={layout}
+      {...rest}
+    >
+      {children}
+    </FormClient>
   );
 };
 
 Form.Item = FormItem;
 
-export default Form;
+export default Form;

package/lib/components/Form/Item/{Item.tsx → FormItem.client.tsx}

@@ -23,7 +23,7 @@ import { FormContext } from '../Form';
 
 const REF_CLIENT_HEIGHT = 24;
 
-const FormItem = ({
+const FormItemClient = ({
   prefixCls = prefixClsFormItem,
   name,
   label,
@@ -39,7 +39,6 @@ const FormItem = ({
   ...props
 }: FormItemProps) => {
   const formContext = useContext(FormContext);
-
   const errorRef = useRef<HTMLSpanElement>(null);
 
   if (!formContext) {
@@ -87,10 +86,7 @@ const FormItem = ({
   }, [dependencies, name]);
 
   useEffect(() => {
-    if (
-      errorRef.current &&
-      errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT
-    ) {
+    if (errorRef.current && errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT) {
       errorRef.current.style.position = 'relative';
       errorRef.current.style.marginTop = '-16px';
     }
@@ -119,15 +115,13 @@ const FormItem = ({
         <label className={`${prefixCls}-label`} htmlFor={name}>
           {label || name}:
           {isRequired && <span className={`${prefixCls}-required`}>*</span>}
-          {/* @Todo need to add Tooltip like Ant design */}
         </label>
       )}
 
       {Children.map(childrenList, (child, key) => {
         if (isValidElement(child) && child.type !== Fragment) {
           const { value, ...childProps } = child.props;
-          const fieldValue =
-            getFieldValue(valuePropName || name) ?? initialValue;
+          const fieldValue = getFieldValue(valuePropName || name) ?? initialValue;
 
           return (
             <FormItemChildComponent
@@ -174,15 +168,11 @@ const FormItemChildComponent = ({
   ...props
 }: FormItemChildComponentProps) => {
   const formContext = useContext(FormContext);
-
   const [wasNormalize, setWasNormalize] = useState(false);
-
   const { getFieldsValue } = formContext || {};
 
   const handleChange = (e: SyntheticBaseEvent, option?: OptionProps) => {
-    let rawValue: RuleType | SyntheticBaseEvent = e?.target
-      ? e.target.value
-      : e;
+    let rawValue: RuleType | SyntheticBaseEvent = e?.target ? e.target.value : e;
 
     if (normalize) {
       const prevValue = fieldValue ?? props.value;
@@ -192,14 +182,10 @@ const FormItemChildComponent = ({
 
       if (rawValue === prevValue) {
         e.target.value = rawValue;
-
         setWasNormalize(prev => !prev);
 
         const timeout = setTimeout(() => {
-          (
-            document.querySelector(`[name='${name}']`) as HTMLInputElement
-          )?.focus();
-
+          (document.querySelector(`[name='${name}']`) as HTMLInputElement)?.focus();
           clearTimeout(timeout);
         }, 0);
 
@@ -223,6 +209,6 @@ const FormItemChildComponent = ({
   );
 };
 
-FormItem.displayName = 'FormItem';
+FormItemClient.displayName = 'FormItemClient';
 
-export default FormItem;
+export default FormItemClient;

package/lib/components/Form/Item/FormItem.tsx

@@ -0,0 +1,42 @@
+import { FormItemProps } from '../../../types/form';
+import { prefixClsFormItem } from '../../../utils';
+import FormItemClient from './FormItem.client';
+
+const FormItem = ({
+  prefixCls = prefixClsFormItem,
+  name,
+  label,
+  rules = [],
+  children,
+  className = '',
+  layout = 'vertical',
+  style = {},
+  valuePropName,
+  dependencies = [],
+  initialValue,
+  feedbackIcons,
+  ...props
+}: FormItemProps) => {
+  return (
+    <FormItemClient
+      prefixCls={prefixCls}
+      name={name}
+      label={label}
+      rules={rules}
+      className={className}
+      layout={layout}
+      style={style}
+      valuePropName={valuePropName}
+      dependencies={dependencies}
+      initialValue={initialValue}
+      feedbackIcons={feedbackIcons}
+      {...props}
+    >
+      {children}
+    </FormItemClient>
+  );
+};
+
+FormItem.displayName = 'FormItem';
+
+export default FormItem;

package/lib/components/Form/Item/index.ts

@@ -1 +1 @@
-export { default as Item } from './Item'
+export { default as Item } from './FormItem'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/tsconfig.json

@@ -7,7 +7,7 @@
     "emitDeclarationOnly": true,
     "outDir": "./dist",
     "moduleResolution": "node",
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,

package/dist/esm/types/components/Button/Button.client.d.ts

@@ -1,3 +0,0 @@
-import { ButtonProps } from '../../types/button';
-declare const ButtonClient: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default ButtonClient;

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

@@ -1,8 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { ButtonProps } from '../../types/button';
-import './style.css';
-declare const Button: ({ type, variant, color, shape, size, htmlType, className, rootClassName, classNames: customClassNames, styles, prefixCls, iconPosition, disabled, ghost, danger, block, children, href, iconNode, isLoading, ...restProps }: ButtonProps & {
-    iconNode?: ReactNode;
-    isLoading?: boolean;
-}) => ReactElement;
-export default Button;

package/dist/esm/types/components/Button/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from './Button';

package/dist/esm/types/components/Checkbox/Checkbox.client.d.ts

@@ -1,23 +0,0 @@
-import { MouseEvent } from 'react';
-import './style.css';
-declare const CheckboxClient: import("react").ForwardRefExoticComponent<import("../../types").DefaultProps & {
-    disabled?: boolean;
-    onChange?: (e: MouseEvent<HTMLInputElement> & import("../../types").TargetProps) => void;
-    onClick?: import("react").MouseEventHandler<HTMLElement>;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLElement>;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLElement>;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLElement>;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLElement>;
-    value?: boolean;
-    tabIndex?: number;
-    name?: string;
-    children?: import("react").ReactNode;
-    id?: string;
-    autoFocus?: boolean;
-    type?: string;
-    skipGroup?: boolean;
-    required?: boolean;
-    defaultChecked?: boolean;
-    checked?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default CheckboxClient;

package/dist/esm/types/components/Checkbox/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import { ReactElement } from 'react';
-import { CheckboxProps } from '../../types/checkbox';
-declare const Checkbox: {
-    ({ prefixCls, className, defaultChecked, checked, style, disabled, onChange, onClick, onMouseEnter, onMouseLeave, onKeyPress, onKeyDown, tabIndex, name, children, id, autoFocus, type, value, required, noStyle }: CheckboxProps): ReactElement;
-    displayName: string;
-};
-export default Checkbox;

package/dist/esm/types/components/Checkbox/index.d.ts

@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox';

package/dist/esm/types/components/Empty/Empty.d.ts

@@ -1,4 +0,0 @@
-import { EmptyContentProps } from '../../types/empty';
-import './style.css';
-declare const EmptyContent: ({ icon, style, className, title, description, prefixCls }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
-export default EmptyContent;

package/dist/esm/types/components/Empty/index.d.ts

@@ -1 +0,0 @@
-export { default as Empty } from '@/components/Empty/Empty';

package/dist/esm/types/components/Form/Form.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { FormInstance, FormItemProps, FormProps } from '../../types/form';
-export declare const FormContext: import("react").Context<FormInstance | null>;
-declare const Form: FC<FormProps> & {
-    Item: FC<FormItemProps>;
-};
-export default Form;

package/dist/esm/types/components/Form/Item/Item.d.ts

@@ -1,7 +0,0 @@
-import { FormItemProps } from '../../../types/form';
-import './style.css';
-declare const FormItem: {
-    ({ prefixCls, name, label, rules, children, className, layout, style, valuePropName, dependencies, initialValue, feedbackIcons, ...props }: FormItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default FormItem;

package/dist/esm/types/components/Form/Item/index.d.ts

@@ -1 +0,0 @@
-export { default as Item } from './Item';

package/dist/esm/types/components/Form/index.d.ts

@@ -1 +0,0 @@
-export { default as Form } from './Form';

package/dist/esm/types/helpers/index.d.ts

@@ -1,4 +0,0 @@
-import { RuleType } from '../types';
-export declare const parseValue: (value: RuleType) => RuleType;
-export declare function createArray(length: number): number[];
-export declare function clsx(...args: RuleType[]): string;

package/dist/esm/types/hooks/useForm.d.ts

@@ -1,4 +0,0 @@
-import { RuleTypes } from '../types';
-import type { FieldData, FormInstance } from '../types/form';
-declare const useForm: (initialValues?: Record<string, RuleTypes>, onFieldsChange?: (changedFields: FieldData[]) => void, onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void) => FormInstance;
-export { useForm };

package/dist/esm/types/hooks/useWatch.d.ts

@@ -1,9 +0,0 @@
-import { RuleType } from '../types';
-import { FormInstance } from '../types/form';
-type UseWatchProps = {
-    name?: string;
-    defaultValue?: RuleType;
-    form?: FormInstance;
-};
-export declare const useWatch: ({ name, defaultValue, form }: UseWatchProps) => any;
-export {};

package/dist/esm/types/index.d.ts

@@ -1,4 +0,0 @@
-import './styles/global.css';
-export { default as Empty } from "./components/Empty/Empty";
-export { default as Button } from "./components/Button/Button";
-export { default as Checkbox } from "./components/Checkbox/Checkbox";

package/dist/esm/types/types/button.d.ts

@@ -1,42 +0,0 @@
-import { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
-export declare const ButtonTypes: readonly ["default", "primary", "dashed", "link", "text", "ghost"];
-export declare const ButtonShapes: readonly ["default", "circle", "round"];
-export declare const ButtonVariantTypes: readonly ["outlined", "dashed", "solid", "filled", "text", "link"];
-export declare const ButtonColorTypes: readonly ["default", "primary", "danger", "blue", "purple", "cyan", "green", "magenta", "pink", "red", "orange", "yellow", "volcano", "geekblue", "lime", "gold"];
-export type ButtonType = (typeof ButtonTypes)[number];
-export type ButtonShape = (typeof ButtonShapes)[number];
-export type ButtonVariantType = (typeof ButtonVariantTypes)[number];
-export type ButtonColorType = (typeof ButtonColorTypes)[number];
-export type SizeType = 'small' | 'middle' | 'large' | undefined;
-export type ButtonHTMLType = 'button' | 'submit' | 'reset';
-export interface BaseButtonProps {
-    type?: ButtonType;
-    color?: ButtonColorType;
-    variant?: ButtonVariantType;
-    icon?: ReactNode;
-    iconPosition?: 'start' | 'end';
-    shape?: ButtonShape;
-    size?: SizeType;
-    disabled?: boolean;
-    loading?: boolean | {
-        delay?: number;
-        icon?: ReactNode;
-    };
-    prefixCls?: string;
-    className?: string;
-    rootClassName?: string;
-    ghost?: boolean;
-    danger?: boolean;
-    block?: boolean;
-    children?: ReactNode;
-    classNames?: {
-        icon?: string;
-    };
-    styles?: {
-        icon?: CSSProperties;
-    };
-}
-export interface ButtonProps extends BaseButtonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type'> {
-    href?: string;
-    htmlType?: ButtonHTMLType;
-}

package/dist/esm/types/types/checkbox.d.ts

@@ -1,22 +0,0 @@
-import { KeyboardEventHandler, MouseEvent, MouseEventHandler, ReactNode } from 'react';
-import { DefaultProps, TargetProps } from '.';
-export type CheckboxProps = DefaultProps & {
-    disabled?: boolean;
-    onChange?: (e: MouseEvent<HTMLInputElement> & TargetProps) => void;
-    onClick?: MouseEventHandler<HTMLElement>;
-    onMouseEnter?: MouseEventHandler<HTMLElement>;
-    onMouseLeave?: MouseEventHandler<HTMLElement>;
-    onKeyPress?: KeyboardEventHandler<HTMLElement>;
-    onKeyDown?: KeyboardEventHandler<HTMLElement>;
-    value?: boolean;
-    tabIndex?: number;
-    name?: string;
-    children?: ReactNode;
-    id?: string;
-    autoFocus?: boolean;
-    type?: string;
-    skipGroup?: boolean;
-    required?: boolean;
-    defaultChecked?: boolean;
-    checked?: boolean;
-};

package/dist/esm/types/types/datepicker.d.ts

@@ -1,119 +0,0 @@
-import { FocusEvent, ReactNode } from 'react';
-import { DefaultProps, RuleType, SizeType } from '.';
-export interface BaseInfo {
-    range?: 'start' | 'end';
-    source?: string;
-}
-export type CustomFormat<RuleType> = (value: RuleType) => string;
-export type FormatType<DateType = RuleType> = string | CustomFormat<DateType>;
-export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade';
-export type TDatePickerProps = DefaultProps & {
-    value?: Date;
-    disabled?: boolean;
-    placeholder?: string;
-    error?: boolean;
-    feedbackIcons?: boolean;
-    locale?: Locale;
-    placement?: string;
-    defaultOpen?: boolean;
-    allowClear?: boolean | {
-        clearIcon?: ReactNode;
-    };
-    defaultValue?: Date;
-    disabledDate?: (date: RuleType, info: {
-        to: RuleType;
-        from?: RuleType;
-    }) => boolean;
-    suffixIcon?: ReactNode;
-    prefix?: ReactNode;
-    size?: SizeType;
-    format?: FormatType<RuleType> | FormatType<RuleType>[] | {
-        format: string;
-        type?: 'mask';
-    };
-    onChange?: (date: RuleType | RuleType[], dateString: string | string[]) => void;
-    onCalendarChange?: (date: RuleType | RuleType[], dateString: string | string[], info: BaseInfo) => void;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
-    showToday?: boolean;
-    inputReadOnly?: boolean;
-    picker?: PanelMode;
-    bordered?: boolean;
-};
-export type TRangePickerProps = Omit<TDatePickerProps, 'placeholder' | 'value' | 'defaultValue'> & {
-    placeholder?: string[];
-    value?: Date[];
-    defaultValue?: Date[];
-    separator?: ReactNode;
-};
-export type Locale = {
-    locale: string;
-    dateFormat?: string;
-    dateTimeFormat?: string;
-    fieldDateTimeFormat?: string;
-    fieldDateFormat?: string;
-    fieldTimeFormat?: string;
-    fieldMonthFormat?: string;
-    fieldYearFormat?: string;
-    fieldWeekFormat?: string;
-    fieldQuarterFormat?: string;
-    monthBeforeYear?: boolean;
-    yearFormat?: string;
-    monthFormat?: string;
-    cellYearFormat?: string;
-    cellQuarterFormat?: string;
-    dayFormat?: string;
-    cellDateFormat?: string;
-    cellMeridiemFormat?: string;
-    today: string;
-    now: string;
-    backToToday: string;
-    ok: string;
-    timeSelect: string;
-    dateSelect: string;
-    weekSelect?: string;
-    clear: string;
-    week: string;
-    month: string;
-    year: string;
-    previousMonth: string;
-    nextMonth: string;
-    monthSelect: string;
-    yearSelect: string;
-    decadeSelect: string;
-    previousYear: string;
-    nextYear: string;
-    previousDecade: string;
-    nextDecade: string;
-    previousCentury: string;
-    nextCentury: string;
-    shortWeekDays?: string[];
-    shortMonths?: string[];
-};
-export interface DisabledTimes {
-    disabledHours?: () => number[];
-    disabledMinutes?: (hour: number) => number[];
-    disabledSeconds?: (hour: number, minute: number) => number[];
-}
-export type PickerFocusEventHandler = (e: FocusEvent<HTMLElement>, info: BaseInfo) => void;
-export type DisabledDate<DateType = RuleType> = (date: DateType, info: {
-    type: PanelMode;
-    from?: DateType;
-}) => boolean;
-export type TimePickerProps = DefaultProps & {
-    disabledTime?: (date: RuleType) => DisabledTimes;
-    inputReadOnly?: boolean;
-    format?: FormatType<RuleType> | FormatType<RuleType>[] | {
-        format: string;
-        type?: 'mask';
-    };
-    defaultValue?: RuleType | null;
-    value?: RuleType | null;
-    onChange?: (date: RuleType, dateString: string | string[]) => void;
-    onBlur?: PickerFocusEventHandler;
-    onSelect?: ((value: Date | null) => void) | undefined;
-    showNow?: boolean;
-    clearIcon?: ReactNode;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
-    suffixIcon?: ReactNode;
-    placeholder?: string;
-};

package/dist/esm/types/types/empty.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-import { DefaultProps } from '.';
-export type EmptyContentProps = DefaultProps & {
-    title?: string;
-    description?: string;
-    icon?: ReactNode;
-};