style: react component prop readonly

Author: ReaJason

web/src/components/code-viewer.tsx

@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from "@/components/ui/button.tsx";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Check, Copy } from "lucide-react";
 import { type HTMLProps, type ReactNode, useCallback, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -12,7 +12,7 @@ interface CopyButtonProps extends ButtonProps {
   src?: string;
 }
 
-export function CopyButton({ value }: CopyButtonProps) {
+export function CopyButton({ value }: Readonly<CopyButtonProps>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 

web/src/components/copyable-field.tsx

@@ -12,7 +12,7 @@ interface CopyableFieldProps {
   text?: string;
 }
 
-export function CopyableField({ label, value, text }: CopyableFieldProps) {
+export function CopyableField({ label, value, text }: Readonly<CopyableFieldProps>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 

web/src/components/shell-result.tsx

@@ -16,12 +16,12 @@ export function ShellResult({
   allPackResults,
   packMethod,
   generateResult,
-}: {
+}: Readonly<{
   packResult: string | undefined;
   allPackResults: Map<string, string> | undefined;
   packMethod: string;
   generateResult?: GenerateResult;
-}) {
+}>) {
   const { t } = useTranslation();
   if (!generateResult) {
     return <QuickUsage />;

web/src/components/tools/antsword-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function AntSwordTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/behinder-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function BehinderTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/classname-field.tsx

@@ -4,7 +4,7 @@ import { FormSchema } from "@/types/schema.ts";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-export function OptionalClassFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<FormSchema> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/command-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function CommandTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/godzilla-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function GodzillaTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/neoreg-tab.tsx

@@ -9,7 +9,10 @@ import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
 
-export function NeoRegTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+export function NeoRegTabContent({
+  form,
+  shellTypes,
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/shelltype-field.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 export function ShellTypeFormField({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
@@ -24,8 +24,8 @@ export function ShellTypeFormField({
                   <SelectValue placeholder={t("placeholders.select")} />
                 </SelectTrigger>
               </FormControl>
-              <SelectContent key={shellTypes.join(",")}>
-                {shellTypes.length ? (
+              <SelectContent key={shellTypes?.join(",")}>
+                {shellTypes?.length ? (
                   shellTypes.map((v) => (
                     <SelectItem key={v} value={v}>
                       {v}