x-ui-design 1.0.31-gamma.1 → 1.0.33

package/lib/hooks/usePosition.ts

@@ -0,0 +1,206 @@
+import { Placement } from "../types";
+import {
+    CSSProperties,
+    RefObject,
+    useCallback,
+    useEffect,
+    useState
+} from "react";
+
+type TPosition = {
+    isOpen: boolean;
+    popupRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLDivElement | null>;
+    getPopupContainer?: HTMLElement;
+    placement?: Placement;
+    offset?: number;
+};
+
+function getScrollParent(
+    el: HTMLElement | null,
+    includeSelf = false
+): HTMLElement | null {
+    if (!el) return null;
+
+    let current: HTMLElement | null = includeSelf ? el : el.parentElement;
+
+    while (current) {
+        const style = getComputedStyle(current);
+
+        const overflowY = style.overflowY;
+        const overflowX = style.overflowX;
+
+        const canScroll =
+            overflowY === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowX === 'auto' ||
+            overflowX === 'scroll';
+
+        if (canScroll) {
+            return current;
+        }
+
+        current = current.parentElement;
+    }
+
+    return document.scrollingElement as HTMLElement;
+}
+
+const clampWithinContainer = (
+    left: number,
+    popupWidth: number,
+    containerRect: DOMRect
+) => {
+    const minLeft = containerRect.left + document.documentElement.scrollLeft;
+    const maxLeft = containerRect.right + document.documentElement.scrollLeft - popupWidth;
+
+    return {
+        minLeft,
+        maxLeft,
+        leftPosition: Math.min(Math.max(left, minLeft), maxLeft)
+    };
+};
+
+export const usePosition = ({
+    isOpen,
+    offset = 4,
+    popupRef,
+    placement,
+    triggerRef,
+    getPopupContainer
+}: TPosition): {
+    showPlacement: string;
+    dropdownPosition: CSSProperties
+} => {
+    const [showPlacement, setShowPlacement] = useState('');
+    const [_dropdownPosition, setDropdownPosition] = useState<CSSProperties>({});
+
+    const dropdownPosition = useCallback(() => {
+        if (!triggerRef.current) {
+            return {};
+        }
+
+        const inputRect = triggerRef.current?.getBoundingClientRect();
+        const dropdownHeight = popupRef.current?.offsetHeight || (popupRef.current?.offsetHeight || 0);
+        const containerRect = (getPopupContainer || getScrollParent(triggerRef.current, true) || document.body).getBoundingClientRect();
+
+        const spaceAbove = inputRect.top - containerRect.top;
+        const spaceBelow = containerRect.bottom - inputRect.bottom;
+
+        const _shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
+        const hasRight = placement?.includes('Right');
+
+        if (getPopupContainer) {
+            const { minLeft, maxLeft, leftPosition } = clampWithinContainer(
+                hasRight
+                    ? (inputRect.left || 0) + (triggerRef.current?.offsetWidth || 0) - (popupRef.current?.offsetWidth || 0)
+                    : (inputRect.left || 0) + document.documentElement.scrollLeft,
+                popupRef.current?.offsetWidth || 0,
+                containerRect
+            );
+
+            const _center = (minLeft + maxLeft) < (popupRef.current?.offsetWidth || 0) ? 'center' : ''            
+            setShowPlacement(_shouldShowAbove ? `bottom ${_center}` : `${_center}`);
+
+            const _top = (inputRect.top || 0) + document.documentElement.scrollTop;
+
+            if (_shouldShowAbove) {
+                setDropdownPosition({
+                    top: _top - (popupRef.current?.offsetHeight || 0) + 4 - (offset !== 4 ? offset * 2 : 0),
+                    left: leftPosition
+                })
+            } else {
+                setDropdownPosition({
+                    top: _top + (triggerRef.current?.offsetHeight || 0) + offset,
+                    left: leftPosition
+                })
+            }
+        } else {
+            setDropdownPosition({
+                top:
+                    (_shouldShowAbove
+                        ? triggerRef.current.offsetTop -
+                        (popupRef.current?.offsetHeight || dropdownHeight) - offset * 2
+                        : triggerRef.current.offsetTop + triggerRef.current?.offsetHeight) + offset,
+                ...(hasRight ? {
+                    left: (() => {
+                        const { minLeft, maxLeft, leftPosition } = clampWithinContainer(
+                            triggerRef.current.offsetLeft +
+                            (triggerRef.current?.offsetWidth || 0) -
+                            (popupRef.current?.offsetWidth || dropdownHeight),
+                            popupRef.current?.offsetWidth || dropdownHeight,
+                            containerRect
+                        )
+
+                        const _center = (minLeft + maxLeft) < (popupRef.current?.offsetWidth || 0) ? 'center' : ''
+                        setShowPlacement(_shouldShowAbove ? `bottom ${_center}` : `${_center}`);
+
+                        return leftPosition
+                    })()
+                } : {
+                    left: (() => {
+                        const { minLeft, maxLeft, leftPosition } = clampWithinContainer(
+                            triggerRef.current.offsetLeft,
+                            popupRef.current?.offsetWidth || dropdownHeight,
+                            containerRect
+                        );
+
+                        const _center = (minLeft + maxLeft) < (popupRef.current?.offsetWidth || 0) ? 'center' : ''
+                        setShowPlacement(_shouldShowAbove ? `bottom ${_center}` : `${_center}`);
+
+                        return leftPosition
+                    })()
+                })
+            });
+        }
+    }, [
+        offset,
+        popupRef,
+        placement,
+        triggerRef,
+        getPopupContainer
+    ]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const _dropdownPosition = () => dropdownPosition();
+
+        _dropdownPosition();
+
+        const controller = new AbortController();
+
+        const scrollableParents = getScrollParent(triggerRef.current, true);
+
+        scrollableParents?.addEventListener('scroll', _dropdownPosition, {
+            passive: true,
+            signal: controller.signal
+        });
+
+        window.addEventListener('scroll', _dropdownPosition, {
+            passive: true,
+            signal: controller.signal
+        });
+
+        window.addEventListener('resize', _dropdownPosition, {
+            signal: controller.signal
+        });
+
+        return () => {
+            controller.abort();
+        };
+    }, [
+        isOpen,
+        triggerRef,
+        getPopupContainer,
+        dropdownPosition
+    ]);
+
+    return {
+        showPlacement,
+        dropdownPosition: {
+            ..._dropdownPosition,
+            opacity: Object.keys(_dropdownPosition).length ? 1 : 0
+        }
+    }
+}

package/lib/hooks/useWatch.ts

@@ -0,0 +1,41 @@
+import { useContext, useEffect, useState } from 'react';
+import { FormContext } from '../components/Form/Form';
+import { RuleType } from '../types';
+import { FormInstance } from '../types/form';
+
+type UseWatchProps = {
+  name?: string;
+  defaultValue?: RuleType;
+  form?: FormInstance;
+};
+
+export const useWatch = ({ name, defaultValue, form }: UseWatchProps) => {
+  const formContext = useContext(FormContext);
+  const formInstance = form || formContext;
+
+  if (!formInstance) {
+    throw new Error(
+      'useWatch must be used within a Form or with a form instance.'
+    );
+  }
+
+  const [value, setValue] = useState(() => {
+    return name
+      ? formInstance.getFieldValue(name) ?? defaultValue
+      : formInstance.getFieldsValue() ?? defaultValue;
+  });
+
+  useEffect(() => {
+    if (!name) {
+      const unsubscribe = formInstance.subscribeToForm(setValue);
+
+      return () => unsubscribe();
+    }
+
+    const unsubscribe = formInstance.subscribeToField(name, setValue);
+
+    return () => unsubscribe();
+  }, [name, formInstance]);
+
+  return value;
+};

package/lib/hooks/useWatchError.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import type { FormInstance } from '../types/form';
+
+export function useWatchError(form: FormInstance, name: string): string[] | undefined {
+  const [errors, setErrors] = useState<string[] | undefined>(form.getFieldError(name));
+
+  useEffect(() => {
+    // Subscribe directly to error changes
+    const unsubscribe = form.subscribeToError?.(name, (newErrors: string[] | undefined) => {
+      setErrors(newErrors);
+    });
+
+    // Initialize on mount
+    setErrors(form.getFieldError(name));
+
+    return unsubscribe;
+  }, [form, name]);
+
+  return errors;
+}

package/lib/index.ts

@@ -0,0 +1,184 @@
+// Styles
+import dynamic from 'next/dynamic';
+import './styles/global.css';
+
+const Button = dynamic(() => import('@/components/Button/Button'), { ssr: false });
+const Checkbox = dynamic(() => import('@/components/Checkbox/Checkbox'), { ssr: false });
+const Switch = dynamic(() => import('@/components/Switch/Switch'), { ssr: false });
+const Empty = dynamic(() => import('@/components/Empty/Empty'), { ssr: false });
+const Upload = dynamic(() => import('@/components/Upload/Upload'), { ssr: false });
+
+const DatePicker = dynamic(() => import('@/components/DatePicker/DatePicker'), { ssr: false });
+const RangePicker = dynamic(() => import('@/components/DatePicker/RangePicker/RangePicker'), { ssr: false });
+const TimePicker = dynamic(() => import('@/components/DatePicker/TimePicker/TimePicker'), { ssr: false });
+
+const Form = dynamic(() => import('@/components/Form/Form'), { ssr: false });
+const FormItem = dynamic(() => import('@/components/Form/Item/Item'), { ssr: false });
+
+const Input = dynamic(() => import('@/components/Input/Input'), { ssr: false });
+const Textarea = dynamic(() => import('@/components/Input/Textarea/Textarea'), { ssr: false });
+
+const Radio = dynamic(() => import('@/components/Radio/Radio'), { ssr: false });
+const RadioButton = dynamic(() => import('@/components/Radio/Button/Button'), { ssr: false });
+const RadioGroup = dynamic(() => import('@/components/Radio/Group/Group'), { ssr: false });
+
+const Select = dynamic(() => import('@/components/Select/Select'), { ssr: false });
+const Option = dynamic(() => import('@/components/Select/Option/Option'), { ssr: false });
+const Tag = dynamic(() => import('@/components/Select/Tag/Tag'), { ssr: false });
+
+const Skeleton = dynamic(() => import('@/components/Skeleton/Skeleton'), { ssr: false });
+const SkeletonAvatar = dynamic(() => import('@/components/Skeleton/Avatar/Avatar'), { ssr: false });
+const SkeletonButton = dynamic(() => import('@/components/Skeleton/Button/Button'), { ssr: false });
+const SkeletonImage = dynamic(() => import('@/components/Skeleton/Image/Image'), { ssr: false });
+const SkeletonInput = dynamic(() => import('@/components/Skeleton/Input/Input'), { ssr: false });
+
+const Menu = dynamic(() => import('@/components/Menu/Menu'), { ssr: false });
+const MenuItem = dynamic(() => import('@/components/Menu/Item/Item'), { ssr: false });
+const MenuSubMenu = dynamic(() => import('@/components/Menu/SubMenu/SubMenu'), { ssr: false });
+
+const Dropdown = dynamic(() => import('@/components/Dropdown/Dropdown'), { ssr: false });
+
+const Popover = dynamic(() => import('@/components/Popover/Popover'), { ssr: false });
+
+const Result = dynamic(() => import('@/components/Result/Result'), { ssr: false });
+
+export {
+  Button,
+  Checkbox,
+  Empty,
+  DatePicker,
+  RangePicker,
+  TimePicker,
+  Form,
+  FormItem,
+  Input,
+  Textarea,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Select,
+  Option,
+  Tag,
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonImage,
+  SkeletonInput,
+  Upload,
+  Switch,
+  Menu,
+  MenuItem,
+  MenuSubMenu,
+  Dropdown,
+  Popover,
+  Result
+};
+
+export {
+  ClearIcon,
+  ArrowIcon,
+  LoadingIcon,
+  CheckIcon,
+  SearchIcon,
+  CalendarIcon,
+  SuccessIcon,
+  ErrorIcon,
+  DateDistanceIcon,
+  TimeIcon,
+  StampleIcon,
+  TrashIcon,
+  SpinerIcon,
+} from '@/components/Icons';
+
+// Hooks
+export { useForm } from '@/hooks/useForm';
+export { useWatch } from '@/hooks/useWatch';
+
+export type {
+  FormInstance,
+  RuleObject,
+  RuleRender,
+  FieldData,
+  FieldInstancesInputRef,
+  FieldError,
+  FormProps,
+  FormItemChildComponentProps
+} from '@/types/form';
+
+export type {
+  DefaultProps,
+  TargetProps,
+  RuleTypes,
+  RuleType,
+  MouseEventHandlerSelect,
+  SyntheticBaseEvent,
+  Placement
+} from '@/types';
+
+export type {
+  CheckboxProps
+} from '@/types/checkbox';
+
+export type {
+  InputProps,
+  TextareaProps
+} from '@/types/input';
+
+export type {
+  PopoverProps
+} from '@/types/popover';
+
+export type {
+  ButtonType,
+  ButtonProps,
+  BaseButtonProps
+} from '@/types/button';
+
+export type {
+  ItemType,
+  MenuProps,
+  SubMenuItem
+} from '@/types/menu';
+
+export type {
+  DropdownProps,
+  DropdownItemType,
+} from '@/types/dropdown';
+
+export type {
+  ResultProps,
+  ResultStatusType
+} from '@/types/result';
+
+export type {
+  RadioProps,
+  RadioGroupProps,
+  RadioButtonProps
+} from '@/types/radio';
+
+export type {
+  TDatePickerProps,
+  TRangePickerProps,
+  TimePickerProps
+} from '@/types/datepicker';
+
+export type {
+  SelectProps,
+  OptionType,
+  OptionProps,
+  CustomTagProps,
+  TagProps,
+  DisplayValueType
+} from '@/types/select';
+
+export type {
+  RcFile,
+  UploadFile,
+  UploadProps,
+  UploadChangeParam
+} from '@/types/upload';
+
+export { FormContext } from '@/components/Form/Form';
+
+export { clsx, createArray, parseValue } from '@/helpers'
+export { flattenChildren } from '@/helpers/flatten';

package/lib/styles/global.css

@@ -0,0 +1,57 @@
+:root {
+    /* MAIN */
+    --xui-color-hover: #f5f5f5;
+    --xui-color-disabled: #e6e6e6;
+
+    --xui-primary-color: #1677ff;
+    --xui-primary-color-light: #40a9ff;
+
+    --xui-text-color: rgba(0, 0, 0, 0.88);
+    --xui-text-color-light: rgba(0, 0, 0, 0.5);
+
+    --xui-error-color: #ff4d4f;
+    --xui-error-color-light: #ff6668;
+    --xui-success-color: #52c41a;
+
+    --xui-background-color: #ffffff;
+
+    /* FONTS */
+    --xui-font-size-xs: 12px;
+    --xui-font-size-sm: 14px;
+    --xui-font-size-md: 14px;
+    --xui-font-size-lg: 16px;
+
+    /* BORDERS */
+    --xui-border-radius-sm: 4px;
+    --xui-border-radius-md: 4px;
+    --xui-border-radius-lg: 6px;
+
+    --xui-border-color: #d9d9d9;
+
+    /* SELECT */
+    --xui-select-primary-color: var(--xui-primary-color);
+    --xui-select-background-color: var(--xui-background-color);
+
+    /* MENU */
+    --xui-menu-inline-bg: rgba(0, 0, 0, 0.02);
+
+    /* RESULT */
+    --xui-result-bg: #fff;
+    --xui-result-color: rgba(0, 0, 0, 0.85);
+    --xui-subtle-color: rgba(0, 0, 0, 0.45);
+    --xui-padding: 24px;
+    --xui-gap: 16px;
+    --xui-icon-size: 72px;
+    --xui-max-width: 560px;
+    --xui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+}
+
+html {
+    font-family: sans-serif;
+}
+
+.globalEllipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}

package/lib/types/button.ts

@@ -0,0 +1,83 @@
+import { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+
+export const ButtonTypes = [
+  'default',
+  'primary',
+  'dashed',
+  'link',
+  'text',
+  'ghost'
+] as const;
+export const ButtonShapes = ['default', 'circle', 'round'] as const;
+export const ButtonVariantTypes = [
+  'outlined',
+  'dashed',
+  'solid',
+  'filled',
+  'text',
+  'link'
+] as const;
+export const ButtonColorTypes = [
+  'default',
+  'primary',
+  'danger',
+  'blue',
+  'purple',
+  'cyan',
+  'green',
+  'magenta',
+  'pink',
+  'red',
+  'orange',
+  'yellow',
+  'volcano',
+  'geekblue',
+  'lime',
+  'gold'
+] as const;
+
+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;
+  prefixClsV3?: string;
+  className?: string;
+  rootClassName?: string;
+  ghost?: boolean;
+  danger?: boolean;
+  block?: boolean;
+  children?: ReactNode;
+  classNames?: {
+    icon?: string;
+  };
+  styles?: {
+    icon?: CSSProperties;
+  };
+  child?: ReactNode
+}
+
+export interface ButtonProps
+  extends BaseButtonProps,
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type'> {
+  href?: string;
+  htmlType?: ButtonHTMLType;
+}

package/lib/types/checkbox.ts

@@ -0,0 +1,32 @@
+import {
+  ForwardedRef,
+  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;
+  titleClick?: boolean;
+  ref?: ForwardedRef<HTMLDivElement>;
+  controlled?: boolean;
+};