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

package/lib/hooks/usePosition.ts

@@ -1,206 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,184 +0,0 @@
-// 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

@@ -1,57 +0,0 @@
-: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

@@ -1,83 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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;
-};