mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
simoleo89
a1bee1d825
Adopt React 19 idioms across the codebase. The runtime was already on
react@19.2.5 but no React 19 APIs were in use.
- forwardRef -> ref-as-prop in 7 layout/component files
(NitroInput/Button/ItemCountBadge/Card×5/InfiniteGridItem,
ToolbarItemView, AvatarEditorIcon)
- <Ctx.Provider> -> <Ctx> in 6 contexts (CatalogAdmin, FloorplanEditor,
UiSettings, GridContext, NitroCardContext, NitroCardAccordionContext)
- Native <script> hoisting for Turnstile, ExternalPluginLoader, GoogleAdsView
(React 19 dedupes by src; removes manual document.head.appendChild +
module-level promise caches)
- React Compiler enabled at build time via babel-plugin-react-compiler
in vite.config.mjs (target: '19'), plus eslint-plugin-react-compiler
in lint mode
- Global <ErrorBoundary> + <Suspense> in src/index.tsx using
react-error-boundary, with LoadingView as fallback
- BackgroundsView migrated to use(promise) as a demonstrator pattern
for Suspense-driven config loading
- ESLint react setting bumped 18.3.1 -> 19.2; legacy
@typescript-eslint/ban-types replaced with no-restricted-types
(the old rule was removed in @typescript-eslint v8)
- Refresh public/configuration/{asset-loader,bootstrap}.js to match
current write-asset-loader.mjs output
Phase 3 (login forms -> useActionState/useFormStatus) deferred:
LoginView is 1623 lines with lockout + Turnstile + heartbeat
interleaving; safer as its own PR.
https://claude.ai/code/session_01GrR87LAqnAEyKG2ZbmQt5Q
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren, Ref } from 'react';
|
|
import { classNames } from './classNames';
|
|
|
|
const classes = {
|
|
base: 'inline-flex justify-center items-center gap-2 transition-[background-color] duration-300 transform tracking-wide rounded-md',
|
|
disabled: '',
|
|
size: {
|
|
default: 'px-2 py-0.5 font-medium',
|
|
lg: 'px-5 py-3 text-base font-medium',
|
|
xl: 'px-6 py-3.5 text-base font-medium',
|
|
},
|
|
outline: {
|
|
default: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800'
|
|
},
|
|
color: {
|
|
default: 'bg-button-gradient-gray border border-gray-500',
|
|
}
|
|
};
|
|
|
|
type NitroButtonProps = PropsWithChildren<{
|
|
color?: 'default' | 'dark' | 'ghost';
|
|
size?: 'default' | 'lg' | 'xl';
|
|
outline?: boolean;
|
|
ref?: Ref<HTMLButtonElement>;
|
|
}> & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
|
|
export const NitroButton = ({ ref, color = 'default', size = 'default', outline = false, disabled = false, type = 'button', className = null, ...rest }: NitroButtonProps) =>
|
|
{
|
|
return (
|
|
<button
|
|
ref={ ref }
|
|
className={ classNames(
|
|
classes.base,
|
|
classes.size[size],
|
|
outline ? classes.outline[color] : classes.color[color],
|
|
disabled && classes.disabled,
|
|
className
|
|
) }
|
|
disabled={ disabled }
|
|
type={ type }
|
|
{ ...rest } />
|
|
);
|
|
};
|