react-unified-auth 1.0.1

package/README.md

@@ -0,0 +1,252 @@
+# React Unified Auth
+
+一个用于三方登录的统一入口React组件库，支持动态表单和可配置的认证流程。
+
+## 功能特性
+
+- 动态表单渲染：通过HTTP请求获取表单结构并动态渲染
+- 可配置的认证流程：支持自定义API端点和参数
+- 预构建的UI组件：登录表单、用户信息框、社交登录按钮等
+- TypeScript支持：完整的类型定义
+- React Hooks：提供便捷的认证和表单管理hooks
+
+## 安装
+
+```bash
+npm install react-unified-auth
+```
+
+## 使用方法
+
+### 1. 配置AuthProvider
+
+在你的应用根组件中包裹`AuthProvider`：
+
+```tsx
+import { AuthProvider } from 'react-social-auth';
+
+function App() {
+  const config = {
+    apiUrl: 'https://your-api.com',
+    clientId: 'your-client-id',
+    clientSecret: 'your-client-secret',
+    redirectUri: 'https://your-app.com/callback',
+    headers: {
+      'X-Custom-Header': 'value',
+    },
+  };
+
+  return (
+    <AuthProvider config={config}>
+      <YourApp />
+    </AuthProvider>
+  );
+}
+```
+
+### 2. 使用登录表单
+
+```tsx
+import { LoginForm } from 'react-social-auth';
+
+function LoginPage() {
+  return (
+    <div>
+      <LoginForm
+        formId="login-form"
+        onSuccess={(data) => console.log('Login success:', data)}
+        onError={(error) => console.error('Login error:', error)}
+      />
+    </div>
+  );
+}
+```
+
+### 3. 使用用户信息框
+
+```tsx
+import { UserInfoBox, useAuth } from 'react-social-auth';
+
+function UserProfile() {
+  const { user, logout } = useAuth();
+
+  if (!user) return null;
+
+  return (
+    <UserInfoBox
+      user={user}
+      onLogout={logout}
+    />
+  );
+}
+```
+
+### 4. 使用社交登录
+
+```tsx
+import { SocialLogin } from 'react-social-auth';
+
+function SocialLoginPage() {
+  const providers = [
+    {
+      id: 'google',
+      name: 'Google',
+      icon: '/google-icon.png',
+      authUrl: 'https://accounts.google.com/o/oauth2/v2/auth',
+      scope: ['openid', 'email', 'profile'],
+    },
+    {
+      id: 'github',
+      name: 'GitHub',
+      icon: '/github-icon.png',
+      authUrl: 'https://github.com/login/oauth/authorize',
+      scope: ['user:email'],
+    },
+  ];
+
+  const handleSocialLogin = (provider) => {
+    window.location.href = provider.authUrl;
+  };
+
+  return (
+    <SocialLogin
+      providers={providers}
+      onLogin={handleSocialLogin}
+    />
+  );
+}
+```
+
+### 5. 使用动态表单
+
+```tsx
+import { DynamicForm } from 'react-social-auth';
+
+function CustomForm() {
+  const fields = [
+    {
+      name: 'username',
+      type: 'text',
+      label: 'Username',
+      required: true,
+      validation: {
+        minLength: 3,
+        maxLength: 20,
+      },
+    },
+    {
+      name: 'email',
+      type: 'email',
+      label: 'Email',
+      required: true,
+      validation: {
+        pattern: '^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$',
+      },
+    },
+  ];
+
+  const handleSubmit = (values) => {
+    console.log('Form submitted:', values);
+  };
+
+  return (
+    <DynamicForm
+      fields={fields}
+      onSubmit={handleSubmit}
+      submitText="Register"
+    />
+  );
+}
+```
+
+## API配置
+
+### AuthConfig
+
+```typescript
+interface AuthConfig {
+  apiUrl: string;              // API基础URL
+  clientId?: string;          // 客户端ID
+  clientSecret?: string;      // 客户端密钥
+  redirectUri?: string;       // 重定向URI
+  scope?: string[];           // 授权范围
+  headers?: Record<string, string>;  // 自定义请求头
+  timeout?: number;           // 请求超时时间（毫秒）
+}
+```
+
+### 表单字段类型
+
+```typescript
+type FormFieldType = 'text' | 'email' | 'password' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea';
+
+interface FormField {
+  name: string;
+  type: FormFieldType;
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  options?: Array<{ label: string; value: string }>;
+  validation?: {
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+  };
+}
+```
+
+## Hooks
+
+### useAuth
+
+```typescript
+const { user, loading, error, login, logout, getUserInfo, isAuthenticated } = useAuth();
+```
+
+### useDynamicForm
+
+```typescript
+const { formConfig, loading, error } = useDynamicForm(formId);
+```
+
+## API端点
+
+组件库会调用以下API端点：
+
+- `GET /forms/:formId` - 获取动态表单配置
+- `POST /auth/login` - 用户登录
+- `POST /auth/logout` - 用户登出
+- `GET /auth/me` - 获取当前用户信息
+
+## 样式自定义
+
+组件使用了Tailwind CSS的类名，你可以通过以下方式自定义样式：
+
+1. 在你的项目中配置Tailwind CSS
+2. 通过`className` prop传递自定义类名
+3. 覆盖默认样式
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+
+# 类型检查
+npm run typecheck
+
+# 代码检查
+npm run lint
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,158 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+import { AxiosRequestConfig } from 'axios';
+
+interface AuthConfig {
+    apiUrl: string;
+    clientId?: string;
+    clientSecret?: string;
+    redirectUri?: string;
+    scope?: string[];
+    headers?: Record<string, string>;
+    timeout?: number;
+}
+interface FormField {
+    name: string;
+    type: 'text' | 'email' | 'password' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea';
+    label: string;
+    placeholder?: string;
+    required?: boolean;
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+    validation?: {
+        pattern?: string;
+        minLength?: number;
+        maxLength?: number;
+        min?: number;
+        max?: number;
+    };
+}
+interface DynamicFormConfig {
+    fields: FormField[];
+    submitUrl: string;
+    method?: 'POST' | 'PUT' | 'PATCH';
+    submitButton?: {
+        text: string;
+        variant?: 'primary' | 'secondary' | 'outline';
+    };
+}
+interface UserInfo {
+    id: string;
+    name: string;
+    email?: string;
+    avatar?: string;
+    [key: string]: any;
+}
+interface AuthResponse {
+    success: boolean;
+    data?: {
+        user?: UserInfo;
+        token?: string;
+        refreshToken?: string;
+    };
+    error?: string;
+}
+interface SocialProvider {
+    id: string;
+    name: string;
+    icon?: string;
+    authUrl: string;
+    scope?: string[];
+}
+
+interface AuthProviderProps {
+    config: AuthConfig;
+    children: ReactNode;
+}
+declare function AuthProvider({ config, children }: AuthProviderProps): react_jsx_runtime.JSX.Element;
+declare function useAuthConfig(): AuthConfig;
+
+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;
+};
+
+declare function useDynamicForm(formId: string): {
+    formConfig: DynamicFormConfig | null;
+    loading: boolean;
+    error: string | null;
+};
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+declare function Button({ variant, size, loading, fullWidth, children, disabled, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface DynamicFormProps {
+    fields: FormField[];
+    onSubmit: (values: Record<string, any>) => void;
+    submitText?: string;
+    submitVariant?: 'primary' | 'secondary' | 'outline';
+    loading?: boolean;
+}
+declare function DynamicForm({ fields, onSubmit, submitText, submitVariant, loading, }: DynamicFormProps): react_jsx_runtime.JSX.Element;
+
+interface LoginFormProps {
+    formId: string;
+    onSuccess?: (data: any) => void;
+    onError?: (error: string) => void;
+}
+declare function LoginForm({ formId, onSuccess, onError }: LoginFormProps): react_jsx_runtime.JSX.Element | null;
+
+interface UserInfoBoxProps {
+    user: UserInfo;
+    onLogout?: () => void;
+    loading?: boolean;
+    className?: string;
+}
+declare function UserInfoBox({ user, onLogout, loading, className }: UserInfoBoxProps): react_jsx_runtime.JSX.Element;
+
+interface SocialLoginButtonProps {
+    provider: SocialProvider;
+    onClick: (provider: SocialProvider) => void;
+    loading?: boolean;
+    className?: string;
+}
+declare function SocialLoginButton({ provider, onClick, loading, className }: SocialLoginButtonProps): react_jsx_runtime.JSX.Element;
+interface SocialLoginProps {
+    providers: SocialProvider[];
+    onLogin: (provider: SocialProvider) => void;
+    loading?: boolean;
+    className?: string;
+}
+declare function SocialLogin({ providers, onLogin, loading, className }: SocialLoginProps): react_jsx_runtime.JSX.Element | null;
+
+declare class ApiClient {
+    private client;
+    constructor(config: {
+        baseURL: string;
+        timeout?: number;
+        headers?: Record<string, string>;
+    });
+    get<T>(url: string, config?: AxiosRequestConfig): Promise<T>;
+    post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
+    put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
+    patch<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
+    delete<T>(url: string, config?: AxiosRequestConfig): Promise<T>;
+}
+
+declare function validateField(field: FormField, value: any): {
+    valid: boolean;
+    error?: string;
+};
+declare function validateForm(fields: FormField[], values: Record<string, any>): {
+    valid: boolean;
+    errors: Record<string, string>;
+};
+
+export { ApiClient, AuthConfig, AuthProvider, AuthProviderProps, AuthResponse, Button, ButtonProps, DynamicForm, DynamicFormConfig, DynamicFormProps, FormField, LoginForm, LoginFormProps, SocialLogin, SocialLoginButton, SocialLoginButtonProps, SocialLoginProps, SocialProvider, UserInfo, UserInfoBox, UserInfoBoxProps, useAuth, useAuthConfig, useDynamicForm, validateField, validateForm };