react-unified-auth 1.0.2 → 1.0.3

package/README.md

@@ -1,19 +1,19 @@
-# React Unified Auth
-
-一个用于三方登录的统一入口React组件库，支持动态表单和可配置的认证流程。
-
-## 功能特性
-
-- 动态表单渲染：通过HTTP请求获取表单结构并动态渲染
-- 可配置的认证流程：支持自定义API端点和参数
-- 预构建的UI组件：登录表单、用户信息框、社交登录按钮等
-- TypeScript支持：完整的类型定义
-- React Hooks：提供便捷的认证和表单管理hooks
-
-## 安装
-
-```bash
-npm install react-unified-auth
+# React Unified Auth
+
+一个用于三方登录的统一入口React组件库，支持动态表单和可配置的认证流程。
+
+## 功能特性
+
+- 动态表单渲染：通过HTTP请求获取表单结构并动态渲染
+- 可配置的认证流程：支持自定义API端点和参数
+- 预构建的UI组件：登录表单、用户信息框、社交登录按钮等
+- TypeScript支持：完整的类型定义
+- React Hooks：提供便捷的认证和表单管理hooks
+
+## 安装
+
+```bash
+npm install react-unified-auth
 ```
 
 ## 使用方法
@@ -23,7 +23,8 @@ npm install react-unified-auth
 在你的应用根组件中包裹`AuthProvider`：
 
 ```tsx
-import { AuthProvider } from 'react-social-auth';
+import { AuthProvider } from 'react-unified-auth';
+import 'react-unified-auth/dist/index.css';
 
 function App() {
   const config = {
@@ -47,7 +48,7 @@ function App() {
 ### 2. 使用登录表单
 
 ```tsx
-import { LoginForm } from 'react-social-auth';
+import { LoginForm } from 'react-unified-auth';
 
 function LoginPage() {
   return (
@@ -65,7 +66,7 @@ function LoginPage() {
 ### 3. 使用用户信息框
 
 ```tsx
-import { UserInfoBox, useAuth } from 'react-social-auth';
+import { UserInfoBox, useAuth } from 'react-unified-auth';
 
 function UserProfile() {
   const { user, logout } = useAuth();
@@ -84,7 +85,7 @@ function UserProfile() {
 ### 4. 使用社交登录
 
 ```tsx
-import { SocialLogin } from 'react-social-auth';
+import { SocialLogin } from 'react-unified-auth';
 
 function SocialLoginPage() {
   const providers = [
@@ -220,77 +221,81 @@ const { formConfig, loading, error } = useDynamicForm(formId);
 - `POST /auth/logout` - 用户登出
 - `GET /auth/me` - 获取当前用户信息
 
-## 样式自定义
-
-组件使用了Tailwind CSS的类名，你可以通过以下方式自定义样式：
-
-### 1. 基本配置
-
-确保你的项目中已正确配置Tailwind CSS：
-
-```bash
-# 安装依赖
-npm install -D tailwindcss postcss autoprefixer
-
-# 初始化配置
-npx tailwindcss init -p
-```
-
-### 2. 更新tailwind.config.js
-
-在配置中包含组件库的文件路径：
-
-```js
-// tailwind.config.js
-module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/react-unified-auth/dist/**/*.{js,ts,jsx,tsx}", // 必须包含此行
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
-
-### 3. 导入Tailwind CSS
-
-在项目入口文件中导入：
-
-```css
-/* src/index.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-```jsx
-// src/index.jsx
-import './index.css';
-```
-
-### 4. 自定义样式
-
-- **通过className覆盖**：
-  ```jsx
-  <Button className="bg-red-600 hover:bg-red-700" />
-  ```
-
-- **在Tailwind配置中扩展**：
-  ```js
-  // tailwind.config.js
-  module.exports = {
-    theme: {
-      extend: {
-        colors: {
-          primary: '#1d4ed8',
-        },
-      },
-    },
-  }
-  ```
-
+## 样式自定义
+
+组件使用了Tailwind CSS的类名，你可以通过以下方式自定义样式：
+
+### 1. 基本配置
+
+确保你的项目中已正确配置Tailwind CSS：
+
+```bash
+# 安装依赖
+npm install -D tailwindcss postcss autoprefixer
+
+# 初始化配置
+npx tailwindcss init -p
+```
+
+### 2. 更新tailwind.config.js
+
+在配置中包含组件库的文件路径：
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/react-unified-auth/dist/**/*.{js,ts,jsx,tsx}", // 必须包含此行
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### 3. 导入Tailwind CSS
+
+在项目入口文件中导入：
+
+```css
+/* src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+```jsx
+// src/index.jsx
+import './index.css';
+```
+
+### 4. 自定义样式
+
+- **通过className覆盖**：
+  ```jsx
+  <Button className="bg-red-600 hover:bg-red-700" />
+  ```
+
+- **在Tailwind配置中扩展**：
+  ```js
+  // tailwind.config.js
+  module.exports = {
+    theme: {
+      extend: {
+        colors: {
+          primary: '#1d4ed8',
+        },
+      },
+    },
+  }
+  ```
+
+### 5. 样式不生效？查看详细排查指南
+
+如果样式仍然不生效，请查看我们的[Tailwind CSS样式排查指南](docs/TAILWIND_TROUBLESHOOTING.md)，包含完整的问题解决步骤！
+
 ## 开发
 
 ```bash

package/dist/components/Button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+export declare function Button({ variant, size, loading, fullWidth, children, disabled, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DynamicForm.d.ts

@@ -0,0 +1,9 @@
+import { FormField } from '../types';
+export interface DynamicFormProps {
+    fields: FormField[];
+    onSubmit: (values: Record<string, any>) => void;
+    submitText?: string;
+    submitVariant?: 'primary' | 'secondary' | 'outline';
+    loading?: boolean;
+}
+export declare function DynamicForm({ fields, onSubmit, submitText, submitVariant, loading, }: DynamicFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/LoginForm.d.ts

@@ -0,0 +1,6 @@
+export interface LoginFormProps {
+    formId: string;
+    onSuccess?: (data: any) => void;
+    onError?: (error: string) => void;
+}
+export declare function LoginForm({ formId, onSuccess, onError }: LoginFormProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SocialLogin.d.ts

@@ -0,0 +1,15 @@
+import { SocialProvider } from '../types';
+export interface SocialLoginButtonProps {
+    provider: SocialProvider;
+    onClick: (provider: SocialProvider) => void;
+    loading?: boolean;
+    className?: string;
+}
+export declare function SocialLoginButton({ provider, onClick, loading, className }: SocialLoginButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface SocialLoginProps {
+    providers: SocialProvider[];
+    onLogin: (provider: SocialProvider) => void;
+    loading?: boolean;
+    className?: string;
+}
+export declare function SocialLogin({ providers, onLogin, loading, className }: SocialLoginProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/UserInfoBox.d.ts

@@ -0,0 +1,8 @@
+import { UserInfo } from '../types';
+export interface UserInfoBoxProps {
+    user: UserInfo;
+    onLogout?: () => void;
+    loading?: boolean;
+    className?: string;
+}
+export declare function UserInfoBox({ user, onLogout, loading, className }: UserInfoBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/AuthContext.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { AuthConfig } from '../types';
+export interface AuthProviderProps {
+    config: AuthConfig;
+    children: ReactNode;
+}
+export declare function AuthProvider({ config, children }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAuthConfig(): AuthConfig;

package/dist/hooks/useAuth.d.ts

@@ -0,0 +1,10 @@
+import { AuthResponse, UserInfo } from '../types';
+export declare function useAuth(): {
+    user: UserInfo | null;
+    loading: boolean;
+    error: string | null;
+    login: (credentials: Record<string, any>) => Promise<AuthResponse>;
+    logout: () => Promise<void>;
+    getUserInfo: () => Promise<UserInfo | null>;
+    isAuthenticated: boolean;
+};

package/dist/hooks/useDynamicForm.d.ts

@@ -0,0 +1,6 @@
+import { DynamicFormConfig } from '../types';
+export declare function useDynamicForm(formId: string): {
+    formConfig: DynamicFormConfig | null;
+    loading: boolean;
+    error: string | null;
+};