Ryth Azhur
27c30d7e50
allauth/ (44 files) is a django-allauth React UI — a separate concern from the Mizan protocol. Moved to legacy/ pending extraction into a standalone mizan-django-allauth package. Also moved to legacy/: - client/AuthContext.tsx — generic auth state from /me endpoint - client/RouterContext.tsx — framework-agnostic router adapter - client/routing.tsx — UserRoute/StaffRoute/AnonymousRoute guards - client/nextjs.tsx — Next.js router adapter for auth These are auth UI infrastructure, not Mizan protocol. The Mizan core only needs JWT for auth header selection (jwt/ stays — MizanProvider depends on useJWT() to decide between Bearer and session auth). Cleaned up re-exports in client/react.ts and vitest aliases. 33 React tests pass. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { createContext, useContext, ReactNode } from 'react'
|
|
import { AuthClassNames, emptyClassNames } from '../styles/types'
|
|
|
|
const Context = createContext<AuthClassNames>(emptyClassNames)
|
|
|
|
interface StylesContextProps {
|
|
children: ReactNode
|
|
classNames?: AuthClassNames
|
|
}
|
|
|
|
export function StylesContext({ children, classNames }: StylesContextProps) {
|
|
return (
|
|
<Context value={classNames ?? emptyClassNames}>
|
|
{children}
|
|
</Context>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Hook to access auth component class names.
|
|
*
|
|
* Returns the class names provided to AllauthProvider, or empty strings if none provided.
|
|
* Use this to style custom components consistently with the auth UI.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* function MyAuthComponent() {
|
|
* const styles = useStyles()
|
|
* return (
|
|
* <div className={styles.card}>
|
|
* <h1 className={styles.title}>Custom Auth View</h1>
|
|
* </div>
|
|
* )
|
|
* }
|
|
* ```
|
|
*/
|
|
export function useStyles(): AuthClassNames {
|
|
return useContext(Context)
|
|
}
|
|
|
|
/**
|
|
* Utility to get a class name, returning empty string if undefined.
|
|
* Useful for conditional class application.
|
|
*/
|
|
export function cx(...classNames: (string | undefined | false | null)[]): string {
|
|
return classNames.filter(Boolean).join(' ')
|
|
}
|