Lint: enforce publy/arrow-function-components (off → error)

.oxlintrc.json

@@ -67,7 +67,7 @@
 		"publy/no-console-in-source": "error",
 		"publy/no-direct-dayjs-in-components": "error",
 		"publy/no-manual-response-message-translation": "error",
-		"publy/arrow-function-components": "off",
+		"publy/arrow-function-components": "error",
 		"publy/prefer-query-display": "off",
 		"anti-slop/no-chained-type-assertions": "off",
 		"anti-slop/no-conditional-empty-object-spread": "error",

AGENTS.md

@@ -331,8 +331,8 @@ For the complete list of custom lint rules with severity and source, see [`docs/
 - `no-direct-dayjs-in-components`: TSX files under `apps/front/src` `components/`, `_parts/`, `_components/`, or `routes/` source paths.
 - `no-raw-mui-textfield-register`, `no-native-html-in-mui-surfaces`, `no-raw-img-in-product-surfaces`: **deleted** with #1172 — their only target was the retired `apps/old-front` (MUI). The raw `<img>` policy for front above is a review rule, not a lint rule.
 
-`publy/no-op` and `publy/arrow-function-components` are off. Component declaration style is
-therefore not lint-enforced in front; both arrow components and function declarations exist.
+`publy/no-op` is off; `publy/arrow-function-components` is enforced at `error` in front
+(#1210): arrow components; class methods stay methods — `this` binding.
 
 ## JavaScript/TypeScript Conventions
 

apps/front/doctor.config.json

@@ -0,0 +1,8 @@
+{
+	"$schema": "https://react.doctor/schema/config.json",
+	"rules": {
+		"react-doctor/no-multi-component-file": "off",
+		"react-doctor/only-export-components": "off",
+		"react-doctor/no-giant-component": "off"
+	}
+}

apps/front/src/components/field/form-layout.tsx

@@ -8,11 +8,11 @@ import { cn } from '~/lib/utils';
  * in app.css (`.publy-form-page`, `.publy-form-action-bar`).
  */
 
-function FormPageLayout({
+const FormPageLayout = ({
 	width = 860,
 	className,
 	...props
-}: React.ComponentProps<'div'> & { width?: 760 | 860 | 960 }) {
+}: React.ComponentProps<'div'> & { width?: 760 | 860 | 960 }) => {
 	return (
 		<div
 			data-slot="form-page"
@@ -21,14 +21,14 @@ function FormPageLayout({
 			{...props}
 		/>
 	);
-}
+};
 
-function FormActionBar({
+const FormActionBar = ({
 	status,
 	className,
 	children,
 	...props
-}: React.ComponentProps<'div'> & { status?: React.ReactNode }) {
+}: React.ComponentProps<'div'> & { status?: React.ReactNode }) => {
 	return (
 		<div
 			data-slot="form-action-bar"
@@ -48,6 +48,6 @@ function FormActionBar({
 			<div className="flex items-center gap-2.5">{children}</div>
 		</div>
 	);
-}
+};
 
 export { FormActionBar, FormPageLayout };

apps/front/src/components/marketing/marketing-image-slot.tsx

@@ -45,14 +45,14 @@ export type MarketingImageSlotProps = {
 	className?: string;
 };
 
-export function MarketingImageSlot({
+export const MarketingImageSlot = ({
 	slot,
 	subject,
 	ratio,
 	tint = false,
 	alt,
 	className,
-}: MarketingImageSlotProps): ReactElement {
+}: MarketingImageSlotProps): ReactElement => {
 	const style: CSSProperties = {};
 	if (ratio !== undefined) {
 		style.aspectRatio = ratio;
@@ -72,4 +72,4 @@ export function MarketingImageSlot({
 			style={style}
 		/>
 	);
-}
+};

apps/front/src/components/ui/avatar.tsx

@@ -2,13 +2,13 @@ import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import * as React from 'react';
 import { cn } from '~/lib/utils';
 
-function Avatar({
+const Avatar = ({
 	className,
 	size = 'default',
 	...props
 }: AvatarPrimitive.Root.Props & {
 	size?: 'default' | 'sm' | 'lg';
-}) {
+}) => {
 	return (
 		<AvatarPrimitive.Root
 			data-slot="avatar"
@@ -20,9 +20,9 @@ function Avatar({
 			{...props}
 		/>
 	);
-}
+};
 
-function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+const AvatarImage = ({ className, ...props }: AvatarPrimitive.Image.Props) => {
 	return (
 		<AvatarPrimitive.Image
 			data-slot="avatar-image"
@@ -33,12 +33,12 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
 			{...props}
 		/>
 	);
-}
+};
 
-function AvatarFallback({
+const AvatarFallback = ({
 	className,
 	...props
-}: AvatarPrimitive.Fallback.Props) {
+}: AvatarPrimitive.Fallback.Props) => {
 	return (
 		<AvatarPrimitive.Fallback
 			data-slot="avatar-fallback"
@@ -49,9 +49,9 @@ function AvatarFallback({
 			{...props}
 		/>
 	);
-}
+};
 
-function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+const AvatarBadge = ({ className, ...props }: React.ComponentProps<'span'>) => {
 	return (
 		<span
 			data-slot="avatar-badge"
@@ -65,9 +65,9 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
 			{...props}
 		/>
 	);
-}
+};
 
-function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+const AvatarGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="avatar-group"
@@ -78,12 +78,12 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
 			{...props}
 		/>
 	);
-}
+};
 
-function AvatarGroupCount({
+const AvatarGroupCount = ({
 	className,
 	...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="avatar-group-count"
@@ -94,7 +94,7 @@ function AvatarGroupCount({
 			{...props}
 		/>
 	);
-}
+};
 
 export {
 	Avatar,

apps/front/src/components/ui/badge.tsx

@@ -26,12 +26,12 @@ const badgeVariants = cva(
 	},
 );
 
-function Badge({
+const Badge = ({
 	className,
 	variant = 'default',
 	render,
 	...props
-}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) => {
 	return useRender({
 		defaultTagName: 'span',
 		props: mergeProps<'span'>(
@@ -46,6 +46,6 @@ function Badge({
 			variant,
 		},
 	});
-}
+};
 
 export { Badge, badgeVariants };

apps/front/src/components/ui/button.tsx

@@ -39,19 +39,19 @@ const buttonVariants = cva(
 	},
 );
 
-function Button({
+const Button = ({
 	className,
 	variant = 'default',
 	size = 'default',
 	...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {
 	return (
 		<ButtonPrimitive
 			data-slot="button"
 			className={cn(buttonVariants({ variant, size, className }))}
 			{...props}
 		/>
 	);
-}
+};
 
 export { Button, buttonVariants };

apps/front/src/components/ui/card.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { cn } from '~/lib/utils';
 
-function Card({
+const Card = ({
 	className,
 	size = 'default',
 	...props
-}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) => {
 	return (
 		<div
 			data-slot="card"
@@ -17,9 +17,9 @@ function Card({
 			{...props}
 		/>
 	);
-}
+};
 
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+const CardHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="card-header"
@@ -30,29 +30,32 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
 			{...props}
 		/>
 	);
-}
+};
 
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+const CardTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="card-title"
 			className={cn('text-sm font-semibold', className)}
 			{...props}
 		/>
 	);
-}
+};
 
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+const CardDescription = ({
+	className,
+	...props
+}: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="card-description"
 			className={cn('text-sm text-muted-foreground', className)}
 			{...props}
 		/>
 	);
-}
+};
 
-function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+const CardAction = ({ className, ...props }: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="card-action"
@@ -63,19 +66,19 @@ function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
 			{...props}
 		/>
 	);
-}
+};
 
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+const CardContent = ({ className, ...props }: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="card-content"
 			className={cn('px-6 group-data-[size=sm]/card:px-4', className)}
 			{...props}
 		/>
 	);
-}
+};
 
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+const CardFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {
 	return (
 		<div
 			data-slot="card-footer"
@@ -86,7 +89,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
 			{...props}
 		/>
 	);
-}
+};
 
 export {
 	Card,

apps/front/src/components/ui/checkbox.tsx

@@ -2,7 +2,7 @@ import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import { IconCheck, IconMinus } from '@tabler/icons-react';
 import { cn } from '~/lib/utils';
 
-function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => {
 	return (
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
@@ -24,6 +24,6 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
 			</CheckboxPrimitive.Indicator>
 		</CheckboxPrimitive.Root>
 	);
-}
+};
 
 export { Checkbox };