john-okeefe
4574dfb8f1
- Replace extendTheme/ColorModeScript with createSystem Provider + Toaster shims (components/ui, provider, color-mode) and next-themes; index.tsx renders Provider, App reads useColorMode from the shim and clears both chakra and legacy theme storage keys on preference change - theme.tsx restores the v2 identity on v3 primitives: v2 gray/blue/ green/red scales, v2 solid/contrast fills, v2 text-per-size for button/input/native-select/tag, v2 input heights, v2 heading scale (xl->4xl etc), v2 switch track/thumb, brighter link underlines (currentColor/60), +1px tag top padding, 17px body base font - Default new-user theme light -> dark to match the established dark UI - App.test rewritten around Provider + MemoryRouter + Home (old CRA 'learn react' assertion no longer applies)
34 lines
999 B
TypeScript
34 lines
999 B
TypeScript
import { Field as ChakraField } from "@chakra-ui/react"
|
|
import * as React from "react"
|
|
|
|
export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
|
|
label?: React.ReactNode
|
|
helperText?: React.ReactNode
|
|
errorText?: React.ReactNode
|
|
optionalText?: React.ReactNode
|
|
}
|
|
|
|
export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
|
|
function Field(props, ref) {
|
|
const { label, children, helperText, errorText, optionalText, ...rest } =
|
|
props
|
|
return (
|
|
<ChakraField.Root ref={ref} {...rest}>
|
|
{label && (
|
|
<ChakraField.Label textStyle="md">
|
|
{label}
|
|
<ChakraField.RequiredIndicator fallback={optionalText} />
|
|
</ChakraField.Label>
|
|
)}
|
|
{children}
|
|
{helperText && (
|
|
<ChakraField.HelperText>{helperText}</ChakraField.HelperText>
|
|
)}
|
|
{errorText && (
|
|
<ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
|
|
)}
|
|
</ChakraField.Root>
|
|
)
|
|
},
|
|
)
|