@zuixihuanxingnai/react-super-ui 1.0.0

package/dist/packages/components/button/Button.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type ButtonProps = React.PropsWithChildren<{
+    variant?: 'primary' | 'default' | 'danger';
+    size?: 'small' | 'middle' | 'large';
+    loading?: boolean;
+    icon?: React.ReactNode;
+    block?: boolean;
+}> & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Button: React.FC<ButtonProps>;

package/dist/packages/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/packages/components/form/Form.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type FormProps = {
+    children: React.ReactNode;
+    onFinish?: (values: any) => void;
+    initialValues?: Record<string, any>;
+};
+export declare const Form: React.FC<FormProps>;

package/dist/packages/components/form/FormItem.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Rule } from '../../form-engine';
+type FormControlProps = {
+    value?: any;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    error?: string;
+};
+type FormItemProps = {
+    name: string;
+    label?: string;
+    rules?: Rule[];
+    children: React.ReactElement<FormControlProps>;
+};
+export declare const FormItem: React.FC<FormItemProps>;
+export {};

package/dist/packages/components/form/context.d.ts

@@ -0,0 +1,14 @@
+type ValidateFunc = () => Promise<boolean>;
+export type FormContextType = {
+    values: Record<string, any>;
+    errors: Record<string, string>;
+    setFieldValue: (name: string, value: any) => void;
+    setFieldError: (name: string, error: string) => void;
+    registerField: (name: string, validate: ValidateFunc) => void;
+    unregisterField: (name: string) => void;
+    resetFields: () => void;
+    validateFields: () => Promise<boolean>;
+};
+export declare const FormContext: import('react').Context<FormContextType | undefined>;
+export declare const useFormContext: () => FormContextType;
+export {};

package/dist/packages/components/form/index.d.ts

@@ -0,0 +1,2 @@
+export { Form } from './Form';
+export { FormItem } from './FormItem';

package/dist/packages/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './button';
+export * from './input';
+export * from './form';
+export * from './modal';
+export * from './select';

package/dist/packages/components/input/Input.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export type InputProps = {
+    label?: string;
+    errorMessage?: string;
+    error?: boolean;
+    size?: 'small' | 'middle' | 'large';
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    clearable?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export declare const Input: React.FC<InputProps>;

package/dist/packages/components/input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/dist/packages/components/modal/Modal.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type ModalProps = {
+    open: boolean;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode | null;
+    closable?: boolean;
+    maskClosable?: boolean;
+    mask?: boolean;
+    keyboard?: boolean;
+    width?: number | string;
+    height?: number | string;
+    okText?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    confirmLoading?: boolean;
+    onOk?: () => void | Promise<void>;
+    onClose?: () => void;
+};
+export declare const Modal: React.FC<ModalProps>;

package/dist/packages/components/modal/confirm.d.ts

@@ -0,0 +1,6 @@
+import { ModalProps } from './Modal';
+type ConfirmProps = Omit<ModalProps, 'open' | 'onClose'>;
+export declare function confirm(props: ConfirmProps): {
+    destroy: () => void;
+};
+export {};

package/dist/packages/components/modal/index.d.ts

@@ -0,0 +1,9 @@
+import { Modal } from './Modal';
+import { confirm } from './confirm';
+type ModalType = typeof Modal & {
+    confirm: typeof confirm;
+};
+declare const ModalWithConfirm: ModalType;
+export { ModalWithConfirm as Modal };
+export type { ModalProps } from './Modal';
+export { confirm };

package/dist/packages/components/select/Select.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export type SelectOption = {
+    label: React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+};
+export type SelectProps = {
+    /**
+     * 当前值（受控）
+     */
+    value?: string | number;
+    /**
+     * 默认值（非受控）
+     */
+    defaultValue?: string | number;
+    /**
+     * 可选项
+     */
+    options: SelectOption[];
+    /**
+     * 占位文字
+     */
+    placeholder?: string;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 值变化
+     */
+    onChange?: (value: string | number, option: SelectOption) => void;
+};
+export declare const Select: React.FC<SelectProps>;

package/dist/packages/components/select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/dist/style.css

@@ -0,0 +1 @@
+.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;border:none;cursor:pointer;transition:all .2s}.ui-btn.ui-btn-block{width:100%}.ui-btn.is-disabled{cursor:not-allowed;opacity:.6}.ui-btn.is-disabled:hover{background:inherit}.ui-btn.ui-btn-loading{pointer-events:none}.ui-btn .ui-btn-spinner{width:14px;height:14px;border:2px solid #ccc;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.ui-btn-default{background:#fff;color:#333;border:1px solid #dcdfe6}.ui-btn-default:hover{background:#f5f7fa}.ui-btn-default:active{background:#e6e8eb}.ui-btn-primary{background:#1677ff;color:#fff}.ui-btn-primary:hover{background:#4096ff}.ui-btn-primary:active{background:#0958d9}.ui-btn-danger{background:#ff4d4f;color:#fff}.ui-btn-danger:hover{background:#ff7875}.ui-btn-danger:active{background:#d9363e}.ui-btn-small{height:28px;padding:0 10px;font-size:12px;width:100px}.ui-btn-middle{height:36px;padding:0 16px;font-size:14px;width:200px}.ui-btn-large{height:44px;padding:0 20px;font-size:16px;width:250px}@keyframes spin{to{transform:rotate(360deg)}}.ui-input-wrapper{margin:0 auto;display:inline-flex;align-items:center;width:100%;border:1px solid #dcdfe6;border-radius:6px;padding:0 8px;background:#fff;transition:all .2s}.ui-input-wrapper:focus-within{border-color:#1677ff}.ui-input-wrapper.is-error{border-color:#ff4d4f}.ui-input-wrapper.is-disabled{background:#f5f5f5;cursor:not-allowed}.ui-input{flex:1;border:none;outline:none;font-size:14px;background:transparent}.ui-input-prefix,.ui-input-suffix{color:#999;margin:0 4px}.ui-input-clear{cursor:pointer;margin-left:4px;color:#999}.ui-input-clear:hover{color:#333}.ui-input-small{height:28px;font-size:12px}.ui-input-middle{height:36px}.ui-input-large{height:44px;font-size:16px}.ui-form-container{margin:0 auto 16px;display:flex;flex-direction:column;gap:20px;width:800px}.ui-form-label{font-size:14px;color:#333}.ui-form-error{font-size:12px;color:#ff4d4f}.ui-form-item.is-error .ui-input-wrapper{border-color:#ff4d4f}.ui-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:#00000073;animation:ui-modal-fade-in .2s ease}.ui-modal{width:100%;max-width:1600px;height:100%;max-height:1000px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #00000026;animation:ui-modal-zoom-in .2s ease;display:flex;flex-direction:column;justify-content:space-between}.ui-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #f0f0f0}.ui-modal-title{margin:0;font-size:16px;font-weight:600;color:#1f1f1f;line-height:1.5}.ui-modal-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:6px;background:transparent;cursor:pointer;font-size:18px;color:#666;transition:all .2s}.ui-modal-close:hover{background:#f2f3f5;color:#000}.ui-modal-body{padding:24px;font-size:14px;line-height:1.6;color:#333}.ui-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px 24px;border-top:1px solid #f0f0f0}.ui-modal-btn{padding:6px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s;border:1px solid transparent}.ui-modal-btn-default{border-color:#d9d9d9;background:#fff;color:#333}.ui-modal-btn-primary{border-color:#1677ff;background:#1677ff;color:#fff}.ui-modal-btn-default:hover{border-color:#1677ff;color:#1677ff}.ui-modal-btn-primary:hover{background:#4096ff;border-color:#4096ff}@keyframes ui-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ui-modal-zoom-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ui-select{position:relative;width:220px;font-size:14px}.ui-select-selector{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border:1px solid #d9d9d9;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s}.ui-select-selector:hover{border-color:#4096ff}.ui-select.is-open .ui-select-selector{border-color:#1677ff;box-shadow:0 0 0 2px #1677ff26}.ui-select-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-select-value.is-placeholder{color:#bfbfbf}.ui-select-arrow{margin-left:8px;font-size:12px;color:#999;transition:transform .2s}.ui-select.is-open .ui-select-arrow{transform:rotate(180deg)}.ui-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #f0f0f0;border-radius:8px;box-shadow:0 6px 16px #00000014,0 12px 24px #0000001f;padding:4px;transform-origin:top;animation:ui-select-dropdown-enter .4s ease}.ui-select-option{padding:8px 12px;border-radius:6px;cursor:pointer;transition:all .4s}.ui-select-option:hover{background:#f5f5f5}.ui-select-option.is-selected{background:#e6f4ff;color:#1677ff;font-weight:500}.ui-select-option.is-disabled{color:#bfbfbf;cursor:not-allowed}.ui-select-option.is-disabled:hover{background:transparent}.ui-select.is-disabled .ui-select-selector{background:#f5f5f5;color:#bfbfbf;cursor:not-allowed}.ui-select.is-disabled .ui-select-selector:hover{border-color:#d9d9d9;box-shadow:none}@keyframes ui-select-dropdown-enter{0%{opacity:0;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(1) translateY(0)}}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@zuixihuanxingnai/react-super-ui",
+  "version": "1.0.0",
+  "description": "A React UI component library",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^5.0.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.6"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}