react-unified-auth 1.0.1 → 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 = [
@@ -224,9 +225,76 @@ const { formConfig, loading, error } = useDynamicForm(formId);
 
 组件使用了Tailwind CSS的类名，你可以通过以下方式自定义样式：
 
-1. 在你的项目中配置Tailwind CSS
-2. 通过`className` prop传递自定义类名
-3. 覆盖默认样式
+### 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)，包含完整的问题解决步骤！
 
 ## 开发
 

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;
+};

package/dist/index.css

@@ -0,0 +1,438 @@
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Button component styles */
+.usa-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.usa-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.usa-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+}
+
+/* Button variants */
+.usa-button--primary {
+  background-color: #2563eb;
+  color: white;
+}
+
+.usa-button--primary:hover:not(:disabled) {
+  background-color: #1d4ed8;
+}
+
+.usa-button--secondary {
+  background-color: #6b7280;
+  color: white;
+}
+
+.usa-button--secondary:hover:not(:disabled) {
+  background-color: #4b5563;
+}
+
+.usa-button--outline {
+  border: 2px solid #2563eb;
+  background-color: transparent;
+  color: #2563eb;
+}
+
+.usa-button--outline:hover:not(:disabled) {
+  background-color: rgba(37, 99, 235, 0.1);
+}
+
+/* Button sizes */
+.usa-button--sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.usa-button--md {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+.usa-button--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+}
+
+.usa-button--full-width {
+  width: 100%;
+}
+
+/* Loading spinner */
+.usa-loading-spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 0.8s linear infinite;
+  margin-right: 0.5rem;
+}
+
+.usa-button--outline .usa-loading-spinner {
+  border-color: rgba(37, 99, 235, 0.3);
+  border-top-color: #2563eb;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* DynamicForm component styles */
+.usa-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.usa-form__field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.usa-form__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.usa-form__label--required::after {
+  content: " *";
+  color: #dc2626;
+}
+
+.usa-form__input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+}
+
+.usa-form__input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.usa-form__input--error {
+  border-color: #dc2626;
+}
+
+.usa-form__input--error:focus {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.usa-form__textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-family: inherit;
+  resize: vertical;
+  transition: all 0.2s ease;
+}
+
+.usa-form__textarea:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.usa-form__select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  background-color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.usa-form__select:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.usa-form__checkbox {
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  accent-color: #2563eb;
+  cursor: pointer;
+}
+
+.usa-form__radio {
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 50%;
+  accent-color: #2563eb;
+  cursor: pointer;
+}
+
+.usa-form__radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.usa-form__radio-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.usa-form__error {
+  font-size: 0.75rem;
+  color: #dc2626;
+}
+
+/* LoginForm component styles */
+.usa-login-form {
+  width: 100%;
+}
+
+.usa-login-form__loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.usa-login-form__error {
+  padding: 1rem;
+  background-color: #fee2e2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  color: #b91c1c;
+}
+
+/* UserInfoBox component styles */
+.usa-user-info-box {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 1.5rem;
+}
+
+.usa-user-info-box__header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.usa-user-info-box__avatar {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.usa-user-info-box__details {
+  flex: 1;
+}
+
+.usa-user-info-box__name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.usa-user-info-box__email {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+/* SocialLogin component styles */
+.usa-social-login {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.usa-social-login-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.usa-social-login-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Utility classes */
+.usa-text-center {
+  text-align: center;
+}
+
+.usa-mt-4 {
+  margin-top: 1rem;
+}
+
+.usa-mb-4 {
+  margin-bottom: 1rem;
+}
+
+.usa-mb-8 {
+  margin-bottom: 2rem;
+}
+
+.usa-w-full {
+  width: 100%;
+}
+
+.usa-flex {
+  display: flex;
+}
+
+.usa-flex-col {
+  flex-direction: column;
+}
+
+.usa-items-center {
+  align-items: center;
+}
+
+.usa-justify-center {
+  justify-content: center;
+}
+
+.usa-space-x-2 {
+  gap: 0.5rem;
+}
+
+.usa-space-y-2 {
+  gap: 0.5rem;
+}
+
+.usa-space-y-3 {
+  gap: 0.75rem;
+}
+
+.usa-space-y-4 {
+  gap: 1rem;
+}
+
+.usa-space-y-6 {
+  gap: 1.5rem;
+}
+
+.usa-space-y-8 {
+  gap: 2rem;
+}
+
+.usa-p-6 {
+  padding: 1.5rem;
+}
+
+.usa-pt-6 {
+  padding-top: 1.5rem;
+}
+
+.usa-bg-white {
+  background-color: white;
+}
+
+.usa-bg-gray-100 {
+  background-color: #f3f4f6;
+}
+
+.usa-bg-red-50 {
+  background-color: #fee2e2;
+}
+
+.usa-text-lg {
+  font-size: 1.125rem;
+}
+
+.usa-text-xl {
+  font-size: 1.25rem;
+}
+
+.usa-text-2xl {
+  font-size: 1.5rem;
+}
+
+.usa-text-3xl {
+  font-size: 1.875rem;
+}
+
+.usa-font-bold {
+  font-weight: 700;
+}
+
+.usa-font-semibold {
+  font-weight: 600;
+}
+
+.usa-text-gray-600 {
+  color: #6b7280;
+}
+
+.usa-text-gray-900 {
+  color: #111827;
+}
+
+.usa-text-red-600 {
+  color: #dc2626;
+}
+
+.usa-border-t {
+  border-top: 1px solid #e5e7eb;
+}
+
+.usa-border {
+  border: 1px solid #e5e7eb;
+}
+
+.usa-border-red-200 {
+  border-color: #fecaca;
+}
+
+.usa-rounded-lg {
+  border-radius: 8px;
+}
+
+.usa-rounded-full {
+  border-radius: 50%;
+}
+
+.usa-shadow-md {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.usa-shadow-lg {
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}