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

package/lib/types/select.ts

@@ -0,0 +1,126 @@
+import {
+  ChangeEventHandler,
+  CSSProperties,
+  FocusEventHandler,
+  ForwardedRef,
+  Key,
+  KeyboardEventHandler,
+  MouseEvent,
+  MouseEventHandler,
+  ReactElement,
+  ReactEventHandler,
+  ReactNode
+} from 'react';
+import { DefaultProps, Placement, RuleType, RuleTypes, TargetProps } from '.';
+
+export type SelectProps = DefaultProps & {
+  id?: string;
+  searchValue?: string;
+  onSearch?: (value: string) => void;
+  autoClearSearchValue?: boolean;
+  onSelect?: (value: RuleTypes, option?: OptionType) => void;
+  onDeselect?: (value: string, option?: OptionType) => void;
+  filterOption?: boolean | ((input: string, option: OptionType) => boolean);
+  optionFilterProp?: string;
+  options?: OptionType[];
+  children?: ReactNode;
+  defaultActiveFirstOption?: boolean;
+  listHeight?: number;
+  menuItemSelectedIcon?: ReactNode;
+  mode?: 'default' | 'multiple' | 'tags';
+  value?: RuleTypes;
+  defaultValue?: RuleTypes;
+  maxCount?: number;
+  onChange?: (e: RuleTypes, option?: OptionType) => void;
+  iconClick?: () => void;
+  iconClickClear?: boolean;
+  onClose?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  placeholder?: string;
+  allowClear?: boolean;
+  filterable?: boolean;
+  defaultOpen?: boolean;
+  size?: 'small' | 'middle' | 'large';
+  onClear?: () => void;
+  error?: boolean;
+  showSearch?: boolean;
+  tagRender?: ((props: CustomTagProps) => ReactElement) | undefined;
+  maxTagPlaceholder?:
+    | ReactNode
+    | ((omittedValues: DisplayValueType[]) => ReactNode);
+  dropdownClassName?: string;
+  showArrow?: boolean;
+  onBlur?: FocusEventHandler<HTMLElement> | undefined;
+  onDropdownVisibleChange?: ((open: boolean, selected: RuleType) => void) | undefined;
+  showAction?: ('click' | 'focus')[] | undefined;
+  suffixIcon?: ReactNode;
+  searchIcon?: ReactNode;
+  open?: boolean;
+  notFoundContent?: ReactNode;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  dropdownRender?: (menu: ReactNode) => ReactNode;
+  feedbackIcons?: boolean;
+  placement?: Placement;
+  removeIcon?: ReactNode;
+  maxTagCount?: number | 'responsive',
+  ref?: ForwardedRef<HTMLDivElement>,
+  closeFromParent?: boolean;
+  controlled?: boolean
+};
+
+export interface OptionType {
+  value: RuleType;
+  disabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  render?: (label: string) => ReactNode;
+  prefixCls?: string;
+  label?: RuleType;
+}
+
+export type CustomTagProps = DefaultProps & {
+  label?: ReactNode;
+  value?: string;
+  onClose?: (e: MouseEvent<HTMLSpanElement> & TargetProps) => void;
+  onMouseDown?: MouseEventHandler | undefined;
+  onLoadCapture?: ReactEventHandler | undefined;
+  closable?: boolean;
+  isMaxTag?: boolean;
+  color?: string;
+  icon?: ReactNode;
+};
+
+export type TagProps = DefaultProps & {
+  values?: string[];
+  onClose: (e: MouseEvent<HTMLSpanElement> & TargetProps) => void;
+  icon?: ReactNode;
+  closable?: boolean;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+
+export interface DisplayValueType {
+  key?: Key;
+  value?: RuleType;
+  label?: ReactNode;
+  title?: string | number;
+  disabled?: boolean;
+}
+
+export interface OptionProps {
+  value: RuleType;
+  disabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  render?: (label: string) => ReactNode;
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  prefixCls?: string;
+  prefixClsV3?: string;
+  selected?: boolean;
+  title?: string;
+}

package/lib/types/skeleton.ts

@@ -0,0 +1,62 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DefaultProps } from '.';
+
+declare type widthUnit = number | string;
+
+export interface SkeletonElementProps {
+  className?: string;
+  style?: CSSProperties;
+  size?: 'large' | 'small' | 'default' | number;
+  shape?: 'circle' | 'square' | 'round';
+  active?: boolean;
+}
+
+export type SkeletonProps = DefaultProps & {
+  active?: boolean;
+  loading?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  avatar?: SkeletonAvatarProps | boolean;
+  title?: SkeletonTitleProps | boolean;
+  paragraph?: SkeletonParagraphProps | boolean;
+  round?: boolean;
+  teamLogo?: boolean;
+};
+
+interface SkeletonTitleProps {
+  className?: string;
+  style?: CSSProperties;
+  width?: number | string;
+}
+
+interface SkeletonParagraphProps {
+  className?: string;
+  style?: CSSProperties;
+  width?: widthUnit | Array<widthUnit>;
+  rows?: number;
+}
+
+export type SkeletonAvatarProps = Omit<SkeletonElementProps, 'shape'> &
+  DefaultProps & {
+    shape?: 'circle' | 'square';
+    active?: boolean;
+    applyElementStyle?: boolean;
+    wrapperStyle?: CSSProperties;
+  };
+
+export type SkeletonImageProps = DefaultProps &
+  Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>;
+
+export type SkeletonInputProps = Omit<SkeletonElementProps, 'size' | 'shape'> &
+  DefaultProps & {
+    size?: 'large' | 'small' | 'default';
+    block?: boolean;
+  };
+
+export type SkeletonButtonProps = Omit<SkeletonElementProps, 'size'> &
+  DefaultProps & {
+    size?: 'large' | 'small' | 'default';
+    block?: boolean;
+    applyElementStyle?: boolean;
+  };

package/lib/types/switch.ts

@@ -0,0 +1,22 @@
+import {
+  ReactNode
+} from 'react';
+import { DefaultProps } from '.';
+
+export type SwitchProps = DefaultProps & {
+  disabled?: boolean;
+  onChange?:  (value: boolean) => void;
+  onClick?: (value: boolean) => void;
+  value?: boolean;
+  tabIndex?: number;
+  name?: string;
+  children?: ReactNode;
+  id?: string;
+  autoFocus?: boolean;
+  type?: string;
+  skipGroup?: boolean;
+  required?: boolean;
+  defaultChecked?: boolean;
+  checked?: boolean;
+  controlled?: boolean;
+};

package/lib/types/upload.ts

@@ -0,0 +1,67 @@
+import { DefaultProps, RuleType } from '.';
+
+export interface RcFile extends File {
+  uid: string;
+  lastModifiedDate: Date;
+  webkitRelativePath: string;
+}
+
+export type UploadFile<RcFile> = {
+  originFileObj: RcFile;
+  uid: string;
+  name: string;
+  status?: 'uploading' | 'done' | 'error' | 'removed';
+  percent?: number;
+  url?: string;
+  file?: RcFile;
+};
+
+export type UploadChangeParam = {
+  file: UploadFile<RuleType>;
+  fileList: UploadFile<RuleType>[];
+};
+
+export type UploadProps = DefaultProps & {
+  type?: string;
+  name?: string;
+  defaultFileList?: UploadFile<RuleType>[];
+  fileList?: UploadFile<RuleType>[];
+  action?:
+    | string
+    | ((file: RcFile) => string)
+    | ((file: RcFile) => PromiseLike<string>);
+  directory?: boolean;
+  data?:
+    | Record<string, unknown>
+    | ((
+        file: UploadFile<RuleType>
+      ) => Record<string, unknown> | Promise<Record<string, unknown>>);
+  method?: 'POST' | 'PUT' | 'PATCH';
+  headers?: Record<string, string>;
+  showUploadList?: boolean;
+  multiple?: boolean;
+  accept?: string;
+  beforeUpload?: (file: RcFile, fileList: File[]) => boolean | Promise<boolean>;
+  onChange?: (info: UploadChangeParam) => void;
+  onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+  listType?: string;
+  className?: string;
+  rootClassName?: string;
+  onPreview?: (file: UploadFile<RuleType>) => void;
+  onDownload?: (file: UploadFile<RuleType>) => void;
+  onRemove?: (
+    file: UploadFile<RuleType>
+  ) => void | boolean | Promise<void | boolean>;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  customRequest?: (options: {
+    file: RcFile;
+    onSuccess: (response: RuleType) => void;
+    onError: (error: RuleType) => void;
+    onProgress: (event: ProgressEvent) => void;
+  }) => void;
+  withCredentials?: boolean;
+  openFileDialogOnClick?: boolean;
+  maxCount?: number;
+  children?: React.ReactNode;
+};

package/lib/utils/index.ts

@@ -0,0 +1,37 @@
+export const prefixClsForm = 'xUi-form';
+export const prefixClsFormItem = 'xUi-form-item';
+export const prefixClsEmpty = 'xUi-empty';
+export const prefixClsInput = 'xUi-input';
+export const prefixClsSelect = 'xUi-select';
+export const prefixClsCheckbox = 'xUi-checkbox';
+export const prefixClsSwitch = 'xUi-switch';
+export const prefixClsRadio = 'xUi-radio';
+export const prefixClsTextArea = 'xUi-textarea';
+export const prefixClsUpload = 'xUi-upload';
+export const prefixClsDatePicker = 'xUi-datepicker';
+export const prefixClsRangePicker = 'xUi-rangepicker';
+export const prefixClsTimePicker = 'xUi-timepicker';
+export const prefixClsButton = 'xUi-button';
+export const prefixClsSkeleton = 'xUi-skeleton';
+export const prefixClsMenu = 'xUi-menu';
+export const prefixClsDropdown = 'xUi-dropdown';
+export const prefixClsPopover = 'xUi-popover';
+export const prefixClsResult = 'xUi-result';
+
+export const prefixClsFormV3 = 'v3-form';
+export const prefixClsFormItemV3 = 'v3-form-item';
+export const prefixClsEmptyV3 = 'v3-empty';
+export const prefixClsInputV3 = 'v3-input';
+export const prefixClsSelectV3 = 'v3-select';
+export const prefixClsCheckboxV3 = 'v3-checkbox-input';
+export const prefixClsSwitchV3 = 'v3-switch';
+export const prefixClsRadioV3 = 'v3-radio';
+export const prefixClsTextAreaV3 = 'v3-textarea';
+export const prefixClsButtonV3 = 'v3-btn';
+export const prefixClsUploadV3 = 'v3-upload';
+
+// non updates
+export const prefixClsSkeletonV3 = 'v3-skeleton';
+export const prefixClsDatePickerV3 = 'v3-datepicker';
+export const prefixClsRangePickerV3 = 'v3-rangepicker';
+export const prefixClsTimePickerV3 = 'v3-timepicker';

package/lib/utils/lazy.ts

@@ -0,0 +1,17 @@
+import { RuleType } from '../types';
+import { ComponentType, lazy as lazily } from 'react';
+
+export const lazy = <T extends {}, U extends keyof T>(
+  loader: (x?: string) => Promise<T>
+): T =>
+  new Proxy({} as unknown as T, {
+    get: (target, componentName: string | symbol) => {
+      if (typeof componentName === 'string') {
+        return lazily(() =>
+          loader(componentName).then(x => ({
+            default: x[componentName as U] as RuleType as ComponentType<RuleType>
+          }))
+        );
+      }
+    }
+  });

package/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/package.json

@@ -1,49 +1,47 @@
 {
   "name": "x-ui-design",
-  "version": "1.0.31-gamma.1",
+  "version": "1.0.33",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
-  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "dev": "vite",
-    "build": "vite build && npm run build:types",
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
     "build:types": "tsc --emitDeclarationOnly",
     "build:rollup": "rollup -c --bundleConfigAsCjs",
     "rollup": "npm run build:types && npm run build:rollup"
   },
-  "peerDependencies": {
-    "react": "^19",
-    "react-dom": "^19"
+  "dependencies": {
+    "next": "15.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/eslintrc": "^3",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^4",
-    "path": "^0.12.7",
+    "eslint": "^9",
+    "eslint-config-next": "15.2.0",
     "postcss": "^8.5.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
     "rollup": "^3.0.0",
     "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "vite": "^5"
+    "typescript": "^5.8.3"
   },
-  "dependencies": {
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5"
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   }
 }

package/rollup.config.js

@@ -0,0 +1,71 @@
+// rollup.config.js
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import babel from '@rollup/plugin-babel';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const dts = require('rollup-plugin-dts').default;
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const packageJson = require('./package.json');
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default [
+    {
+        input: 'lib/index.ts',
+        inlineDynamicImports: true,
+        external: ["react", /^react\/.*/, "react-dom", /react-dom\/.*/],
+        output: [
+            {
+                file: packageJson.main,
+                format: 'cjs',
+                sourcemap: true,
+            },
+            {
+                file: packageJson.module,
+                format: 'esm',
+                sourcemap: true
+            },
+        ],
+        plugins: [
+            peerDepsExternal(),
+            resolve({
+                extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.css'],
+            }),
+            commonjs(),
+            typescript({
+                outputToFilesystem: false,
+                tsconfig: './tsconfig.json',
+                paths: {
+                    "@/*": ["lib/*"]
+                }
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                presets: ['@babel/preset-react', '@babel/preset-typescript']
+            }),
+            postcss({
+                inject: true,
+                minimize: true,
+                modules: false
+            })
+        ]
+    },
+    {
+        // Generate .d.ts files
+        input: 'dist/esm/types/index.d.ts',
+        output: [
+            {
+                file: 'dist/index.d.ts',
+                format: 'es'
+            }
+        ],
+        plugins: [
+            dts()
+        ],
+        external: [/\.css/]
+    },
+];

package/src/app/globals.css

@@ -0,0 +1,48 @@
+:root {
+    /* MAIN */
+    --xui-color-hover: #f5f5f5;
+    --xui-color-disabled: #e6e6e6;
+
+    --xui-primary-color: #1677ff;
+    --xui-primary-color-hover: #0267ff;
+    --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);
+}
+
+html {
+    font-family: sans-serif;
+}
+
+.globalEllipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}

package/src/app/layout.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import "./globals.css";
+export default function RootLayout({ children, }: Readonly<{
+    children: ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;

package/src/app/layout.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import "./globals.css";
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<body>
+				{children}
+			</body>
+		</html>
+	);
+}

package/src/app/page.d.ts

@@ -0,0 +1 @@
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/src/app/page.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Result } from "../../lib/components/Result";
+import { Button } from '../../lib/components/Button';
+import { Popover } from '../../lib/components/Popover';
+import { Select } from "../../lib/components/Select";
+import Option from "../../lib/components/Select/Option/Option";
+import Tag from "../../lib/components/Select/Tag/Tag";
+
+export default function Home() {
+    return (
+        <Select mode="tags"
+            tagRender={(tagProps) => {
+                return <Tag {...tagProps}>{tagProps.value}</Tag>
+            }}
+            options={[{ value: 'tag_1', label: 'Tag 1' }]}
+        />
+        // {/* <Option value={'tag_1'}>tag 1</Option> */}
+        // </Select>
+    )
+}
+

package/tsconfig.json

@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist/esm/types",
+    "module": "ESNext",
+    "target": "ESNext",
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "rootDir": "lib",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./lib/*"
+      ]
+    },
+    "allowJs": true,
+    "incremental": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "plugins": [
+      {
+        "name": "next" 
+      }
+    ],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "noEmit": true
+  },
+  "include": [
+    "lib",
+    "lib/global.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/dist/components/Icons/Icons.d.ts

@@ -1,18 +0,0 @@
-import { ResultStatusType } from '../../types/result';
-declare const ClearIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const ArrowIcon: ({ isOpen }: {
-    isOpen: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-declare const LoadingIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const CheckIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const SearchIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const CalendarIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const SuccessIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const ErrorIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const DateDistanceIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const TimeIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const StampleIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const TrashIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const SpinerIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const renderDefaultIcon: (status: ResultStatusType) => import("react/jsx-runtime").JSX.Element | null;
-export { ClearIcon, ArrowIcon, LoadingIcon, CheckIcon, SearchIcon, CalendarIcon, SuccessIcon, ErrorIcon, DateDistanceIcon, TimeIcon, StampleIcon, TrashIcon, SpinerIcon, renderDefaultIcon };