foxit-component 0.0.1 → 0.0.2

package/README.md

@@ -1,2 +1,45 @@
 # Foxit Component
-组件库 
+组件库 
+
+# 发包原则问题
+在 npm 和软件版本管理中，版本号（Versioning）遵循 语义化版本控制（Semantic Versioning，简称 SemVer）的规则。版本号通常采用三位数的格式：MAJOR.MINOR.PATCH。
+
+除了常见的正式版本，还有一些用于标识开发阶段的版本号标签，通常包括 alpha、beta 这些标签帮助开发者和使用者理解软件处于哪个发布阶段。
+
+## Alpha 版本 (alpha)
+描述：alpha 版本通常是开发中的早期版本，功能未完全实现，可能有大量的 bug 或不稳定的特性，适合开发者和早期测试者使用。
+命名规则：通常以 MAJOR.MINOR.PATCH-alpha.N 的格式表示，其中 N 是从 1 开始的递增数字。
+例子：
+1.0.0-alpha.1
+1.0.0-alpha.2
+1.0.0-alpha.3
+
+## Beta 版本 (beta)
+描述：beta 版本通常是开发中的后期版本，功能已经基本完成，可能已经解决了一些 bug，但仍可能存在问题。它是给开发者、测试人员或对新功能感兴趣的用户使用的版本。
+命名规则：MAJOR.MINOR.PATCH-beta.N，N 是递增的数字。
+例子：
+1.0.0-beta.1
+1.0.0-beta.2
+1.0.0-beta.3
+
+
+## 正式版本 (stable, final)
+描述：正式版本是经过充分测试，功能和 API 已经稳定，适合最终用户使用。它没有附加的标签，直接用 MAJOR.MINOR.PATCH 格式发布。
+命名规则：MAJOR.MINOR.PATCH
+例子：
+1.0.0
+2.0.0
+1.1.0
+
+## 发包示例
+```jsx
+alpha:
+npm version 1.0.0-alpha.1
+npm publish --tag alpha
+beta:
+npm version 1.0.0-beta.1
+npm publish --tag beta
+正式:
+npm version 1.0.0
+npm publish
+```

package/es/Alert/Alert.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @name Alert
+ */
+import React from 'react';
+import './alert.css';
+interface AlertProps {
+    message: string | React.ReactNode;
+    showIcon?: boolean;
+    type?: 'success' | 'warning' | 'error' | 'gradient';
+}
+declare const Alert: React.FC<AlertProps>;
+export { Alert };

package/es/Alert/Alert.js

@@ -0,0 +1,24 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/index.js';
+
+var Alert = function (_a) {
+    var message = _a.message, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.type, type = _c === void 0 ? 'success' : _c;
+    var getIconName = function (type) {
+        switch (type) {
+            case 'success':
+                return 'SuccessColoursOutlined';
+            case 'error':
+                return 'ErrorColoursOutlined';
+            case 'warning':
+                return 'WarningColoursOutlined';
+            case 'loading':
+                return 'LoadingOutlined';
+            default:
+                return 'WarningColoursOutlined';
+        }
+    };
+    return (jsxs("div", __assign({ className: "foxit-alert foxit-alert-".concat(type) }, { children: [showIcon && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
+};
+
+export { Alert };

package/es/Button/Button.d.ts

@@ -1,15 +1,13 @@
-import "./button.css";
+import './button.css';
+import React from 'react';
 export interface ButtonProps {
-    /** Is this the principal call to action on the page? */
     primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
-    size?: "small" | "medium" | "large";
-    /** Button contents */
-    label: string;
-    /** Optional click handler */
+    size?: 'small' | 'medium' | 'large';
+    children?: React.ReactNode;
     onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: unknown;
+    loading?: boolean;
 }
-/** Primary UI component for user interaction */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ primary, size, children, className, style, loading, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/es/Button/Button.js

@@ -1,14 +1,12 @@
 import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
-import { jsx } from 'react/jsx-runtime';
-import './button.css.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { Icon } from '../Icon/index.js';
 
-/** Primary UI component for user interaction */
 var Button = function (_a) {
-    var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, backgroundColor = _a.backgroundColor, label = _a.label, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
-    var mode = primary
-        ? "storybook-button--primary"
-        : "storybook-button--secondary";
-    return (jsx("button", __assign({ type: "button", className: ["storybook-button", "storybook-button--".concat(size), mode].join(" "), style: { backgroundColor: backgroundColor } }, props, { children: label })));
+    var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.children, children = _d === void 0 ? '' : _d, className = _a.className, style = _a.style, loading = _a.loading, props = __rest(_a, ["primary", "size", "children", "className", "style", "loading"]);
+    var mode = primary ? 'foxit-button-primary' : 'foxit-button-secondary';
+    return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', "foxit-button-".concat(size), mode, className, loading && 'foxit-button-prevent-click'), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
 };
 
 export { Button };

package/es/Checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import './checkbox.css';
+interface CheckboxProps {
+    onChange?: (checked: boolean) => void;
+    checked?: boolean;
+    disabled?: boolean;
+    value?: string;
+    children: React.ReactNode;
+}
+interface CheckboxGroupProps {
+    value?: string[];
+    onChange?: (checkedValues: string[]) => void;
+    children: React.ReactNode;
+}
+declare const Checkbox: React.FC<CheckboxProps> & {
+    Group: FC<CheckboxGroupProps>;
+};
+export default Checkbox;

package/es/Checkbox/Checkbox.js

@@ -0,0 +1,49 @@
+import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect } from 'react';
+
+var CheckboxGroupContext = createContext(null);
+var Checkbox = function (_a) {
+    var onChange = _a.onChange, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, children = _a.children;
+    var groupContext = useContext(CheckboxGroupContext);
+    var _c = useState(checked || false), internalChecked = _c[0], setInternalChecked = _c[1];
+    useEffect(function () {
+        if (checked !== undefined) {
+            setInternalChecked(checked);
+        }
+    }, [checked]);
+    var handleChange = function (e) {
+        var newChecked = e.target.checked;
+        setInternalChecked(newChecked);
+        if (onChange) {
+            onChange(newChecked);
+        }
+        if (groupContext && value) {
+            groupContext.onChange(value, newChecked);
+        }
+    };
+    var isChecked = groupContext ? groupContext.value.includes(value || '') : internalChecked;
+    return (jsxs("label", __assign({ className: "foxit-checkbox-container ".concat(disabled ? 'disabled' : '') }, { children: [jsx("input", { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange }), jsx("span", { className: "foxit-checkbox-checkmark ".concat(disabled ? 'disabled' : '') }), jsx("span", __assign({ className: "foxit-checkbox-content" }, { children: children }))] })));
+};
+var CheckboxGroup = function (_a) {
+    var value = _a.value, onChange = _a.onChange, children = _a.children;
+    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+    useEffect(function () {
+        if (value !== undefined) {
+            setCheckedValues(value);
+        }
+    }, [value]);
+    var handleCheckboxChange = function (checkboxValue, checked) {
+        var newCheckedValues = checked
+            ? __spreadArray(__spreadArray([], checkedValues, true), [checkboxValue], false) : checkedValues.filter(function (v) { return v !== checkboxValue; });
+        setCheckedValues(newCheckedValues);
+        if (onChange) {
+            onChange(newCheckedValues);
+        }
+    };
+    var currentValue = value !== undefined ? value : checkedValues;
+    return (jsx(CheckboxGroupContext.Provider, __assign({ value: { value: currentValue, onChange: handleCheckboxChange } }, { children: jsx("div", __assign({ className: "foxit-checkbox-group" }, { children: children })) })));
+};
+Checkbox.Group = CheckboxGroup;
+
+export { Checkbox as default };

package/es/Drawer/Drawer.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import './drawer.css';
+interface DrawerProps {
+    open?: boolean;
+    width?: number | string;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+declare const Drawer: React.FC<DrawerProps>;
+export { Drawer };

package/es/Drawer/Drawer.js

@@ -0,0 +1,14 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+var Drawer = function (_a) {
+    var open = _a.open, _b = _a.width, width = _b === void 0 ? 375 : _b, onClose = _a.onClose, children = _a.children;
+    return (jsxs(Fragment, { children: [jsx("div", { className: classNames('foxit-drawer-mask', {
+                    'foxit-drawer-mask-open': open
+                }), onClick: onClose, style: { display: open ? 'block' : 'none' } }), jsx("div", __assign({ className: classNames('foxit-drawer', {
+                    'foxit-drawer-open': open
+                }), style: { width: width, right: open ? 0 : -width } }, { children: jsx("div", __assign({ className: "foxit-drawer-content" }, { children: children })) }))] }));
+};
+
+export { Drawer };

package/es/Empty/Empty.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './empty.css';
+interface EmptyProps {
+    description?: React.ReactNode;
+}
+declare const Empty: React.FC<EmptyProps>;
+export default Empty;

package/es/Empty/Empty.js

@@ -0,0 +1,10 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/index.js';
+
+var Empty = function (_a) {
+    var description = _a.description;
+    return (jsxs("div", __assign({ className: "foxit-empty" }, { children: [jsx("div", __assign({ className: "foxit-empty-image" }, { children: jsx(Icon, { name: "EmptyColoursOutlined" }) })), jsx("div", __assign({ className: "foxit-empty-description" }, { children: description }))] })));
+};
+
+export { Empty as default };

package/es/Form/Form.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { FormRefInstance } from './Form.types';
+import FormItem from './FormItem';
+import { useFormWatch } from './useFormWatch';
+export type { FormRefInstance } from './Form.types';
+interface FormProps {
+    children: ReactNode;
+    onFinish?: (values: unknown) => void;
+    initialValues?: {
+        [key: string]: unknown;
+    };
+}
+export { FormItem, useFormWatch };
+declare const _default: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormRefInstance>>;
+export default _default;

package/es/Form/Form.js

@@ -0,0 +1,38 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
+import FormProvider from './FormProvider.js';
+import './FormContext.js';
+
+var Form = function (_a, ref) {
+    var children = _a.children, onFinish = _a.onFinish, initialValues = _a.initialValues;
+    var formRef = useRef(null);
+    var handleSubmit = useCallback(function (e) {
+        var _a;
+        e.preventDefault();
+        if (onFinish) {
+            if (onFinish && formRef.current) {
+                (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.validateFields().then(function (values) {
+                    onFinish(values);
+                }).catch(function (errors) {
+                    console.error('Validation errors:', errors);
+                });
+            }
+        }
+    }, [onFinish]);
+    useImperativeHandle(ref, function () {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            setFieldsValue: (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue,
+            getFieldsValue: (_b = formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue,
+            resetFields: (_c = formRef.current) === null || _c === void 0 ? void 0 : _c.resetFields,
+            validateFields: (_d = formRef.current) === null || _d === void 0 ? void 0 : _d.validateFields,
+            setFieldsStatus: (_e = formRef.current) === null || _e === void 0 ? void 0 : _e.setFieldsStatus,
+            subscribe: (_f = formRef.current) === null || _f === void 0 ? void 0 : _f.subscribe
+        });
+    });
+    return (jsx(FormProvider, __assign({ initialValues: initialValues, ref: formRef }, { children: jsx("form", __assign({ onSubmit: handleSubmit }, { children: children })) })));
+};
+var Form$1 = forwardRef(Form);
+
+export { Form$1 as default };

package/es/Form/Form.types.d.ts

@@ -0,0 +1,48 @@
+export interface FormField {
+    value: unknown;
+    error?: string;
+    warning?: string;
+    rules?: ValidationRule[];
+}
+export interface ValidationRule {
+    required?: boolean;
+    message?: string;
+    type?: 'email' | 'number' | 'string' | 'min' | 'max';
+    min?: number;
+    max?: number;
+}
+export interface FieldSubscriber {
+    fieldNames: string[];
+    callback: (values: {
+        [key: string]: unknown;
+    }) => void;
+}
+export interface FormInstance {
+    setFieldsValue: (values: {
+        [key: string]: unknown;
+    }) => void;
+    getFieldsValue: (names?: string[]) => {
+        [key: string]: unknown;
+    };
+    resetFields: (names?: string[]) => void;
+    validateFields: (names?: string[]) => Promise<{
+        [key: string]: unknown;
+    }>;
+    setFieldsStatus: (status: {
+        type: 'error' | 'warning';
+        name: string | string[];
+        message: string;
+    }[]) => void;
+    registerField: (name: string, rules: ValidationRule[]) => void;
+    unregisterField: (name: string) => void;
+    subscribe: (fieldNames: string[], callback: (values: {
+        [key: string]: unknown;
+    }) => void) => () => void;
+}
+export type FormRefInstance = Omit<FormInstance, 'registerField' | 'unregisterField'>;
+export interface FormContextProps {
+    form: FormInstance;
+    formFields: {
+        [key: string]: FormField;
+    };
+}

package/es/Form/FormContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FormContextProps } from './Form.types';
+export declare const FormContext: import("react").Context<FormContextProps | null>;

package/es/Form/FormContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+var FormContext = createContext(null);
+
+export { FormContext };

package/es/Form/FormItem.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import './form.css';
+interface FormItemProps {
+    name: string;
+    label?: string | ReactNode;
+    extra?: string | ReactNode;
+    rules?: {
+        required?: boolean;
+        message?: string;
+        type?: 'email' | 'number' | 'string' | 'min' | 'max';
+        min?: number;
+        max?: number;
+    }[];
+    children: ReactNode;
+}
+declare const FormItem: React.FC<FormItemProps>;
+export default FormItem;

package/es/Form/FormItem.js

@@ -0,0 +1,34 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useContext, useEffect, useCallback } from 'react';
+import { FormContext } from './FormContext.js';
+
+var FormItem = function (_a) {
+    var _b, _c, _d;
+    var name = _a.name, label = _a.label, extra = _a.extra, _e = _a.rules, rules = _e === void 0 ? [] : _e, children = _a.children;
+    var _f = useContext(FormContext), form = _f.form, formFields = _f.formFields;
+    // Register field when component mounts
+    useEffect(function () {
+        form.registerField(name, rules);
+        return function () {
+            form.unregisterField(name);
+        };
+    }, []);
+    var error = (_b = formFields[name]) === null || _b === void 0 ? void 0 : _b.error;
+    var warning = (_c = formFields[name]) === null || _c === void 0 ? void 0 : _c.warning;
+    var value = (_d = formFields[name]) === null || _d === void 0 ? void 0 : _d.value;
+    var handleChange = useCallback(function (e) {
+        var _a;
+        var _b;
+        var newValue = ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value) !== undefined ? e.target.value : e;
+        form.setFieldsValue((_a = {}, _a[name] = newValue, _a));
+    }, [form, name]);
+    return (jsxs("div", __assign({ className: "foxit-form-item", style: error || warning ? { marginBottom: 0 } : {} }, { children: [label && (jsxs("label", { children: [label, rules.some(function (rule) { return rule.required; }) && jsx("span", __assign({ className: "foxit-form-required" }, { children: "*" })), extra && jsx(Fragment, { children: extra })] })), jsx("span", __assign({ className: "".concat(error ? 'foxit-form-error-component' : warning ? 'foxit-form-warning-component' : '') }, { children: React.Children.map(children, function (child) {
+                    return React.cloneElement(child, {
+                        value: value,
+                        onChange: handleChange
+                    });
+                }) })), error && jsx("div", __assign({ className: "foxit-form-error-text" }, { children: error })), warning && jsx("div", __assign({ className: "foxit-form-warning-text" }, { children: warning }))] })));
+};
+
+export { FormItem as default };

package/es/Form/FormProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FormInstance } from './Form.types';
+interface FormProviderProps {
+    children: React.ReactNode;
+    initialValues?: {
+        [key: string]: unknown;
+    };
+}
+declare const _default: React.ForwardRefExoticComponent<FormProviderProps & React.RefAttributes<FormInstance>>;
+export default _default;