@k3-universe/react-kit 0.0.29 → 0.0.31

package/src/kit/builder/auth/client-adapters.ts

@@ -1,398 +0,0 @@
-import type {
-  AuthAdapterConfig,
-  AuthSession,
-  GraphQLAuthClient,
-  RESTAuthClient,
-} from './types';
-
-// ============================================================================
-// GraphQL Client Adapter
-// ============================================================================
-
-export type GraphQLClientAdapterOptions<
-  TUser = unknown,
-  TRole extends string = string,
-  TPermission extends string = string,
-  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
-    TUser,
-    TRole,
-    TPermission
-  >,
-  TCredentials = unknown,
-> = {
-  client: GraphQLAuthClient<TSession, TCredentials>;
-  resolveUser?: (session: TSession | null) => TUser | null;
-  resolveRoles?: (session: TSession | null) => TRole[];
-  resolvePermissions?: (session: TSession | null) => TPermission[];
-};
-
-/**
- * Creates an auth adapter config for GraphQL clients
- * Works with Apollo Client, urql, graphql-request, etc.
- *
- * @example
- * ```tsx
- * import { ApolloClient } from '@apollo/client';
- * import { createGraphQLAuthAdapter } from '@k3mart/react-kit/auth2';
- *
- * const apolloClient = new ApolloClient({ ... });
- *
- * const authConfig = createGraphQLAuthAdapter({
- *   client: {
- *     login: async (credentials) => {
- *       const result = await apolloClient.mutate({
- *         mutation: LOGIN_MUTATION,
- *         variables: credentials,
- *       });
- *       return result.data.login;
- *     },
- *     logout: async () => {
- *       await apolloClient.mutate({ mutation: LOGOUT_MUTATION });
- *     },
- *     refresh: async (refreshToken) => {
- *       const result = await apolloClient.mutate({
- *         mutation: REFRESH_MUTATION,
- *         variables: { refreshToken },
- *       });
- *       return result.data.refresh;
- *     },
- *     getCurrentUser: async () => {
- *       const result = await apolloClient.query({
- *         query: GET_CURRENT_USER_QUERY,
- *       });
- *       return result.data.currentUser;
- *     },
- *   },
- * });
- * ```
- */
-export function createGraphQLAuthAdapter<
-  TUser = unknown,
-  TRole extends string = string,
-  TPermission extends string = string,
-  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
-    TUser,
-    TRole,
-    TPermission
-  >,
-  TCredentials = unknown,
->(
-  options: GraphQLClientAdapterOptions<
-    TUser,
-    TRole,
-    TPermission,
-    TSession,
-    TCredentials
-  >,
-): Partial<
-  AuthAdapterConfig<TUser, TRole, TPermission, TSession, TCredentials>
-> {
-  return {
-    login: options.client.login,
-    logout: options.client.logout,
-    refresh: options.client.refresh
-      ? async (session: TSession) => {
-          if (!session.refreshToken) {
-            throw new Error('No refresh token available');
-          }
-          if (!options.client.refresh) {
-            throw new Error('Refresh function not provided');
-          }
-          return await options.client.refresh(session.refreshToken);
-        }
-      : undefined,
-    loadSession: options.client.getCurrentUser,
-    resolveUser: options.resolveUser,
-    resolveRoles: options.resolveRoles,
-    resolvePermissions: options.resolvePermissions,
-  };
-}
-
-// ============================================================================
-// REST Client Adapter
-// ============================================================================
-
-export type RESTClientAdapterOptions<
-  TUser = unknown,
-  TRole extends string = string,
-  TPermission extends string = string,
-  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
-    TUser,
-    TRole,
-    TPermission
-  >,
-  TCredentials = unknown,
-> = {
-  client: RESTAuthClient<TSession, TCredentials>;
-  resolveUser?: (session: TSession | null) => TUser | null;
-  resolveRoles?: (session: TSession | null) => TRole[];
-  resolvePermissions?: (session: TSession | null) => TPermission[];
-};
-
-/**
- * Creates an auth adapter config for REST API clients
- * Works with fetch, axios, ky, etc.
- *
- * @example
- * ```tsx
- * import axios from 'axios';
- * import { createRESTAuthAdapter } from '@k3mart/react-kit/auth2';
- *
- * const api = axios.create({ baseURL: 'https://api.example.com' });
- *
- * const authConfig = createRESTAuthAdapter({
- *   client: {
- *     login: async (credentials) => {
- *       const response = await api.post('/auth/login', credentials);
- *       return response.data;
- *     },
- *     logout: async () => {
- *       await api.post('/auth/logout');
- *     },
- *     refresh: async (refreshToken) => {
- *       const response = await api.post('/auth/refresh', { refreshToken });
- *       return response.data;
- *     },
- *     getCurrentUser: async () => {
- *       const response = await api.get('/auth/me');
- *       return response.data;
- *     },
- *   },
- * });
- * ```
- */
-export function createRESTAuthAdapter<
-  TUser = unknown,
-  TRole extends string = string,
-  TPermission extends string = string,
-  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
-    TUser,
-    TRole,
-    TPermission
-  >,
-  TCredentials = unknown,
->(
-  options: RESTClientAdapterOptions<
-    TUser,
-    TRole,
-    TPermission,
-    TSession,
-    TCredentials
-  >,
-): Partial<
-  AuthAdapterConfig<TUser, TRole, TPermission, TSession, TCredentials>
-> {
-  return {
-    login: options.client.login,
-    logout: options.client.logout,
-    refresh: options.client.refresh
-      ? async (session: TSession) => {
-          if (!session.refreshToken) {
-            throw new Error('No refresh token available');
-          }
-          if (!options.client.refresh) {
-            throw new Error('Refresh function not provided');
-          }
-          return await options.client.refresh(session.refreshToken);
-        }
-      : undefined,
-    loadSession: options.client.getCurrentUser,
-    resolveUser: options.resolveUser,
-    resolveRoles: options.resolveRoles,
-    resolvePermissions: options.resolvePermissions,
-  };
-}
-
-// ============================================================================
-// HTTP Interceptor Utilities
-// ============================================================================
-
-/**
- * Helper to create an axios interceptor that automatically adds auth token
- *
- * @example
- * ```tsx
- * import axios from 'axios';
- * import { createAxiosAuthInterceptor } from '@k3mart/react-kit/auth2';
- *
- * const api = axios.create({ baseURL: 'https://api.example.com' });
- *
- * createAxiosAuthInterceptor(api, authAdapter);
- * ```
- */
-export function createAxiosAuthInterceptor(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  axiosInstance: any,
-  getToken: () => string | null,
-  options?: {
-    tokenType?: string;
-    onTokenExpired?: () => void;
-    refreshToken?: () => Promise<void>;
-  },
-) {
-  const tokenType = options?.tokenType ?? 'Bearer';
-
-  // Request interceptor
-  axiosInstance.interceptors.request.use(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async (config: any) => {
-      const token = getToken();
-      if (token) {
-        config.headers.Authorization = `${tokenType} ${token}`;
-      }
-      return config;
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (error: any) => Promise.reject(error),
-  );
-
-  // Response interceptor for token refresh
-  if (options?.refreshToken) {
-    axiosInstance.interceptors.response.use(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (response: any) => response,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      async (error: any) => {
-        const originalRequest = error.config;
-
-        // If token expired and we haven't retried yet
-        if (
-          error.response?.status === 401 &&
-          !originalRequest._retry &&
-          options.refreshToken
-        ) {
-          originalRequest._retry = true;
-
-          try {
-            await options.refreshToken();
-            const token = getToken();
-            if (token) {
-              originalRequest.headers.Authorization = `${tokenType} ${token}`;
-            }
-            return axiosInstance(originalRequest);
-          } catch (refreshError) {
-            options.onTokenExpired?.();
-            return Promise.reject(refreshError);
-          }
-        }
-
-        return Promise.reject(error);
-      },
-    );
-  }
-}
-
-/**
- * Helper to create a fetch wrapper with auth token injection
- *
- * @example
- * ```tsx
- * import { createAuthFetch } from '@k3mart/react-kit/auth2';
- *
- * const authenticatedFetch = createAuthFetch(
- *   () => authAdapter.getToken(),
- *   {
- *     onTokenExpired: () => authAdapter.logout(),
- *     refreshToken: () => authAdapter.refresh(),
- *   }
- * );
- *
- * // Use it like regular fetch
- * const response = await authenticatedFetch('/api/users');
- * ```
- */
-export function createAuthFetch(
-  getToken: () => string | null,
-  options?: {
-    tokenType?: string;
-    onTokenExpired?: () => void;
-    refreshToken?: () => Promise<void>;
-  },
-): typeof fetch {
-  const tokenType = options?.tokenType ?? 'Bearer';
-
-  return async (
-    input: RequestInfo | URL,
-    init?: RequestInit,
-  ): Promise<Response> => {
-    const token = getToken();
-    const headers = new Headers(init?.headers);
-
-    if (token) {
-      headers.set('Authorization', `${tokenType} ${token}`);
-    }
-
-    const response = await fetch(input, {
-      ...init,
-      headers,
-    });
-
-    // Handle token expiration
-    if (response.status === 401 && options?.refreshToken) {
-      try {
-        await options.refreshToken();
-        const newToken = getToken();
-
-        if (newToken) {
-          headers.set('Authorization', `${tokenType} ${newToken}`);
-          return await fetch(input, {
-            ...init,
-            headers,
-          });
-        }
-      } catch (error) {
-        options.onTokenExpired?.();
-        throw error;
-      }
-    }
-
-    return response;
-  };
-}
-
-/**
- * Helper to create Apollo Link with auth token injection
- *
- * @example
- * ```tsx
- * import { ApolloClient, InMemoryCache, from } from '@apollo/client';
- * import { createApolloAuthLink } from '@k3mart/react-kit/auth2';
- *
- * const authLink = createApolloAuthLink(() => authAdapter.getToken());
- *
- * const client = new ApolloClient({
- *   link: from([authLink, httpLink]),
- *   cache: new InMemoryCache(),
- * });
- * ```
- */
-export function createApolloAuthLink(
-  getToken: () => string | null,
-  options?: {
-    tokenType?: string;
-  },
-) {
-  const tokenType = options?.tokenType ?? 'Bearer';
-
-  // This requires @apollo/client to be installed
-  // We'll return a function that creates the link to avoid direct dependency
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (ApolloLink: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return new ApolloLink((operation: any, forward: any) => {
-      const token = getToken();
-
-      if (token) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        operation.setContext(({ headers = {} }: any) => ({
-          headers: {
-            ...headers,
-            authorization: `${tokenType} ${token}`,
-          },
-        }));
-      }
-
-      return forward(operation);
-    });
-  };
-}

package/src/kit/builder/auth/components.tsx

@@ -1,221 +0,0 @@
-import type { ComponentType } from 'react';
-import type {
-  CanProps,
-  RequireAuthProps,
-  WithPermissionOptions,
-} from './types';
-import { useAuthContext } from './AuthProvider';
-import { useCan } from './hooks';
-
-// ============================================================================
-// RequireAuth Component
-// ============================================================================
-
-/**
- * Component that requires authentication
- * Optionally checks for specific roles and permissions
- *
- * @example
- * ```tsx
- * // Basic authentication check
- * <RequireAuth fallback={<Login />}>
- *   <Dashboard />
- * </RequireAuth>
- *
- * // With role check
- * <RequireAuth
- *   roles="admin"
- *   fallback={<Forbidden />}
- *   loadingFallback={<Spinner />}
- * >
- *   <AdminPanel />
- * </RequireAuth>
- *
- * // With permission check
- * <RequireAuth
- *   permissions={['post:edit', 'post:delete']}
- *   fallback={<Forbidden />}
- * >
- *   <PostEditor />
- * </RequireAuth>
- *
- * // Complex rule
- * <RequireAuth
- *   roles={['admin', 'moderator']}
- *   permissions={{
- *     operator: 'OR',
- *     permissions: ['post:edit', 'post:delete']
- *   }}
- *   requireAll={false}
- *   fallback={<Forbidden />}
- * >
- *   <ContentManager />
- * </RequireAuth>
- * ```
- */
-export function RequireAuth<
-  TRole extends string = string,
-  TPermission extends string = string,
->({
-  children,
-  fallback = null,
-  loadingFallback = null,
-  roles,
-  permissions,
-  requireAll = true,
-}: RequireAuthProps<TRole, TPermission>) {
-  const { status, can } = useAuthContext();
-
-  if (status === 'loading' || status === 'idle') {
-    return loadingFallback;
-  }
-
-  if (status !== 'authenticated') {
-    return fallback;
-  }
-
-  // If no specific roles/permissions required, just check authentication
-  if (!roles && !permissions) {
-    return children;
-  }
-
-  // Check role/permission rules
-  const allowed = can({ roles, permissions, requireAll });
-
-  if (!allowed) {
-    return fallback;
-  }
-
-  return children;
-}
-
-// ============================================================================
-// Can Component
-// ============================================================================
-
-/**
- * Component for conditional rendering based on permissions
- * More flexible than RequireAuth - doesn't check authentication status
- *
- * @example
- * ```tsx
- * // Show button only if user can edit
- * <Can permissions="post:edit" fallback={<ReadOnlyView />}>
- *   <EditButton />
- * </Can>
- *
- * // Show admin panel if user is admin
- * <Can roles="admin">
- *   <AdminPanel />
- * </Can>
- *
- * // Complex permission check
- * <Can
- *   roles={['admin', 'moderator']}
- *   permissions={{
- *     operator: 'OR',
- *     permissions: ['post:edit', 'post:delete']
- *   }}
- *   requireAll={false}
- * >
- *   <ManageButton />
- * </Can>
- * ```
- */
-export function Can<
-  TRole extends string = string,
-  TPermission extends string = string,
->({
-  children,
-  fallback = null,
-  roles,
-  permissions,
-  requireAll = true,
-}: CanProps<TRole, TPermission>) {
-  const allowed = useCan({ roles, permissions, requireAll });
-  if (!allowed) return fallback;
-  return children;
-}
-
-// ============================================================================
-// Higher-Order Component
-// ============================================================================
-
-/**
- * Higher-order component that wraps a component with permission checks
- *
- * @example
- * ```tsx
- * const AdminButton = withPermission(Button, {
- *   roles: 'admin'
- * });
- *
- * const EditButton = withPermission(Button, {
- *   permissions: 'post:edit'
- * });
- *
- * // Use like regular component
- * <AdminButton onClick={handleAdmin}>Admin Action</AdminButton>
- * <EditButton onClick={handleEdit}>Edit Post</EditButton>
- * ```
- */
-export function withPermission<
-  TRole extends string = string,
-  TPermission extends string = string,
-  TProps extends Record<string, unknown> = Record<string, unknown>,
->(
-  Component: ComponentType<TProps>,
-  options: WithPermissionOptions<TRole, TPermission>,
-): ComponentType<TProps> {
-  const WithPermissionWrapper = (props: TProps) => {
-    const allowed = useCan(options);
-    if (!allowed) return null;
-    return <Component {...props} />;
-  };
-  WithPermissionWrapper.displayName = `WithPermission(${Component.displayName ?? Component.name ?? 'Component'})`;
-  return WithPermissionWrapper as ComponentType<TProps>;
-}
-
-// ============================================================================
-// Show/Hide Components
-// ============================================================================
-
-/**
- * Component that shows children only when authenticated
- */
-export function ShowWhenAuthenticated({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { status } = useAuthContext();
-  return status === 'authenticated' ? children : null;
-}
-
-/**
- * Component that shows children only when NOT authenticated
- */
-export function ShowWhenUnauthenticated({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { status } = useAuthContext();
-  return status === 'unauthenticated' ? children : null;
-}
-
-/**
- * Component that shows children only while loading
- */
-export function ShowWhenLoading({ children }: { children: React.ReactNode }) {
-  const { status } = useAuthContext();
-  return status === 'loading' ? children : null;
-}
-
-/**
- * Component that shows children only when there's an error
- */
-export function ShowWhenError({ children }: { children: React.ReactNode }) {
-  const { status } = useAuthContext();
-  return status === 'error' ? children : null;
-}