Fix: Component definition is missing display name. (#14255)

### What problem does this PR solve?

Fix: Component definition is missing display name.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/children-delimiter-form.tsx

@@ -18,7 +18,10 @@ interface IProps {
 }
 
 export const DelimiterInput = forwardRef<HTMLInputElement, InputProps & IProps>(
-  ({ value, onChange, maxLength, defaultValue, ...props }, ref) => {
+  function DelimiterInput(
+    { value, onChange, maxLength, defaultValue, ...props },
+    ref,
+  ) {
     const nextValue = value
       ?.replaceAll('\n', '\\n')
       .replaceAll('\t', '\\t')

web/src/components/delimiter-form-field.tsx

@@ -17,7 +17,10 @@ interface IProps {
 }
 
 export const DelimiterInput = forwardRef<HTMLInputElement, InputProps & IProps>(
-  ({ value, onChange, maxLength, defaultValue, ...props }, ref) => {
+  function DelimiterInput(
+    { value, onChange, maxLength, defaultValue, ...props },
+    ref,
+  ) {
     const nextValue = value
       ?.replaceAll('\n', '\\n')
       .replaceAll('\t', '\\t')

web/src/components/document-preview/document-header.tsx

@@ -9,7 +9,12 @@ type Props = {
   className?: string;
 };
 
-export default ({ size, name, create_date, className }: Props) => {
+export default function DocumentHeader({
+  size,
+  name,
+  create_date,
+  className,
+}: Props) {
   const sizeName = formatBytes(size);
   const dateStr = formatDate(create_date);
 
@@ -32,4 +37,4 @@ export default ({ size, name, create_date, className }: Props) => {
       </dl>
     </header>
   );
-};
+}

web/src/components/theme-switch.tsx

@@ -8,7 +8,7 @@ import { forwardRef } from 'react';
 const ThemeSwitch = forwardRef<
   React.ElementRef<typeof Root>,
   React.ComponentPropsWithoutRef<typeof Root>
->(({ className, ...props }, ref) => {
+>(function ThemeSwitch({ className, ...props }, ref) {
   const { setTheme } = useTheme();
   const isDark = useIsDarkTheme();
 

web/src/components/ui/dual-range-slider.tsx

@@ -80,4 +80,6 @@ const SingleFormSlider = React.forwardRef<
   );
 });
 
+SingleFormSlider.displayName = 'SingleFormSlider';
+
 export { DualRangeSlider, SingleFormSlider };

web/src/components/ui/textarea.tsx

@@ -10,8 +10,10 @@ import {
   useRef,
   useState,
 } from 'react';
-interface TextareaProps
-  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'autoSize'> {
+interface TextareaProps extends Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'autoSize'
+> {
   autoSize?: {
     minRows?: number;
     maxRows?: number;
@@ -95,9 +97,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         rows={autoSize?.minRows ?? props.rows ?? undefined}
         style={{
-          maxHeight: autoSize?.maxRows && !resizable
-            ? `${autoSize.maxRows * 20}px`
-            : undefined,
+          maxHeight:
+            autoSize?.maxRows && !resizable
+              ? `${autoSize.maxRows * 20}px`
+              : undefined,
           resize,
         }}
         ref={textareaRef}
@@ -118,7 +121,7 @@ export const BlurTextarea = forwardRef<
     value: Value;
     onChange(value: Value): void;
   }
->(({ value, onChange, ...props }, ref) => {
+>(function BlurTextarea({ value, onChange, ...props }, ref) {
   const [val, setVal] = useState<Value>();
 
   const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(