chore: proofreading JSDoc and improve documentation for AddButton, FancyMultiSelect, FancySelect, and FieldTemplate components

tuanphung2308 · tuanphung2308 · commit 47205875ceeb · 2025-03-18T18:10:50.000+07:00
diff --git a/packages/shadcn/README.md b/packages/shadcn/README.md
@@ -19,18 +19,17 @@
     ·
     <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>
   </p>
-</p>
 
 <!-- TABLE OF CONTENTS -->
 
 ## Table of Contents
 
 - [Table of Contents](#table-of-contents)
 - [About The Project](#about-the-project)
-  - [Built With](#built-with)
+    - [Built With](#built-with)
 - [Getting Started](#getting-started)
-  - [Prerequisites](#prerequisites)
-  - [Installation](#installation)
+    - [Prerequisites](#prerequisites)
+    - [Installation](#installation)
 - [Usage](#usage)
 - [Contributing](#contributing)
 - [Contact](#contact)
@@ -77,29 +76,36 @@ import Form from '@rjsf/shadcn';
 or
 
 ```js
-import { withTheme } from '@rjsf/core';
-import { Theme as shadcnTheme } from '@rjsf/shadcn';
+import {withTheme} from '@rjsf/core';
+import {Theme as shadcnTheme} from '@rjsf/shadcn';
 
 const Form = withTheme(shadcnTheme);
 ```
+
 <!-- THEMING -->
-## Theming
 
+## Theming
 
 ### Using Tailwind
+
 Follow shadCN installation guide [here](https://ui.shadcn.com/docs/installation) for your application
 
 The color of the RJSF will automatically apply with your shadCN config.
 
 ### Not using Tailwind
+
 #### Use the theme on demo site
+
 All shadcn's default color theme are included in the npm packages. Simply do
+
 ```
 import '@rjsf/shadcn/dist/[color].css';
 e.g:
 import '@rjsf/shadcn/dist/zinc.css';
 ```
+
 Supported colors are:
+
 - default
 - zinc
 - red
@@ -109,56 +115,77 @@ Supported colors are:
 - blue
 - yellow
 - violet
+
 #### Coloring
-- Generate a theme from [official shadCN site](https://ui.shadcn.com/themes) or  [zippy starter's shadcn/ui theme generator](https://zippystarter.com/tools/shadcn-ui-theme-generator) or [Railly](https://customizer.railly.dev/)
+
+- Generate a theme from [official shadCN site](https://ui.shadcn.com/themes)
+  or  [zippy starter's shadcn/ui theme generator](https://zippystarter.com/tools/shadcn-ui-theme-generator)
+  or [Railly](https://customizer.railly.dev/)
 - Navigate to shadcn/css, create a new file called [your-theme].css
 - Replace the base layer code with your new color
 - Follow the next section to build your CSS file
+
 #### Build your CSS file
+
 If you are not using tailwind but still wants to use this theme, you can follow these steps:
+
 - Clone the repository
+
 ```
 cd packages/shadcn
 npm i
 npm run build:css
 ```
+
 - Include the built file in /dist/rjsf-shadcn.css in your application
 
 ## Dark mode (Tailwind only)
+
 Check out this section by [shadCN](https://ui.shadcn.com/docs/dark-mode)
 
 ## RTL (Tailwind only)
+
 ### Installation
+
 ```bash
 npm install @radix-ui/react-direction --save
 ```
 
 ### Implementation
 
 1. Wrap your layout with DirectionProvider:
-```tsx
-import { DirectionProvider as RadixDirectionProvider } from '@radix-ui/react-direction;
-
-function Layout({ children, direction }) {
-  return (
-    <RadixDirectionProvider dir={direction}>
-      {children}
-    </RadixDirectionProvider>
-  );
-}
-```
+
+    ```tsx
+    import {DirectionProvider as RadixDirectionProvider} from '@radix-ui/react-direction;
+    
+    function Layout({children, direction}) {
+        return (
+            <RadixDirectionProvider dir={direction}>
+                {children}
+            </RadixDirectionProvider>
+        );
+    }
+    ```
 
 2. Set HTML direction attribute:
-```html
-<html dir="rtl">
-```
-3. You can refer to `direction-context.tsx`, `direction-provider.tsx` and `rtl-toggle.tsx` from demo repository for implementation.
+
+    ```html
+    <html dir="rtl" lang="en">
+    ```
+
+3. You can refer to `direction-context.tsx`, `direction-provider.tsx` and `rtl-toggle.tsx` from demo repository for
+   implementation.
 
 ## Updating to latest shadCN version
-- Simply copy the shadcn components into shadcn/src/components/ui and rebuilt the packages or using the shadcn CLI at the root level with the components.json
-- For RTL version, you might need component from [here](https://github.com/shadcn-ui/ui/pull/1638) by [nahasco](https://github.com/nahasco)
+
+- Simply copy the shadcn components into shadcn/src/components/ui and rebuilt the packages or using the shadcn CLI at
+  the root level with the components.json
+- For RTL version, you might need component from [here](https://github.com/shadcn-ui/ui/pull/1638)
+  by [nahasco](https://github.com/nahasco)
 - [Fancy multi-select](https://craft.mxkaske.dev/post/fancy-multi-select)
+
 <!-- CONTRIBUTING -->
+
 ## Contributing
 
 Read our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing/) to get started.
@@ -169,19 +196,30 @@ Read our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form
 
 rjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people)
 
-GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
+GitHub
+repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 
 [build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg
+
 [build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions
+
 [contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg
+
 [contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
+
 [license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
+
 [license-url]: https://choosealicense.com/licenses/apache-2.0/
+
 [npm-shield]: https://img.shields.io/npm/v/@rjsf/shadcn/latest.svg?style=flat-square
+
 [npm-url]: https://www.npmjs.com/package/@rjsf/shadcn
+
 [npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/shadcn.svg?style=flat-square
+
 [npm-dl-url]: https://www.npmjs.com/package/@rjsf/shadcn
+
 [product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/shadcn/screenshot.png
diff --git a/packages/shadcn/src/AddButton/AddButton.tsx b/packages/shadcn/src/AddButton/AddButton.tsx
@@ -4,13 +4,11 @@ import { PlusCircle } from 'lucide-react';
 import { Button } from '../components/ui/button';
 
 /**
- * AddButton component for adding new items in a form
- * @template T - The type of data being handled
- * @template S - The JSON Schema type, extending StrictRJSFSchema
- * @template F - The form context type
- * @component
- * @param props - The component props
- * @returns - A button component with a plus icon
+ * A button component for adding new items in a form
+ * @param props - The component properties
+ * @param props.uiSchema - The UI Schema for the form
+ * @param props.registry - The registry object containing shared utilities
+ * @param props.registry.translateString - Function to translate strings
  */
 export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   uiSchema,
diff --git a/packages/shadcn/src/FieldTemplate/FieldTemplate.tsx b/packages/shadcn/src/FieldTemplate/FieldTemplate.tsx
@@ -10,7 +10,7 @@ import {
 import { cn } from '../lib/utils';
 
 /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
- * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ * content, (label, description, children, errors and help) inside a `WrapIfAdditional` component.
  *
  * @param props - The `FieldTemplateProps` for this component
  */
diff --git a/packages/shadcn/src/components/ui/fancy-multi-select.tsx b/packages/shadcn/src/components/ui/fancy-multi-select.tsx
@@ -3,7 +3,16 @@
 import { Command as CommandPrimitive } from 'cmdk';
 import { isEqual } from 'lodash';
 import { X } from 'lucide-react';
-import { FocusEvent, FocusEventHandler, KeyboardEvent, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  FocusEvent,
+  FocusEventHandler,
+  KeyboardEvent,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { cn } from '../../lib/utils';
 import { Badge } from './badge';
@@ -35,7 +44,7 @@ interface FancyMultiSelectProps {
   selected: string[];
   /** Callback function when value changes */
   onValueChange?: (value: number[]) => void;
-  /** Whether the component should auto-focus */
+  /** Whether the component should autofocus */
   autoFocus?: boolean;
   /** ID of the element that describes this select */
   ariaDescribedby?: string;
@@ -71,7 +80,7 @@ export function FancyMultiSelect({
   onBlur,
   className,
   id,
-}: Readonly<FancyMultiSelectProps>): JSX.Element {
+}: Readonly<FancyMultiSelectProps>): ReactElement {
   const inputRef = useRef<HTMLInputElement>(null);
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState('');
diff --git a/packages/shadcn/src/components/ui/fancy-select.tsx b/packages/shadcn/src/components/ui/fancy-select.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Check, ChevronDown } from 'lucide-react';
-import { FocusEvent, FocusEventHandler, useEffect, useRef, useState } from 'react';
+import { FocusEvent, FocusEventHandler, ReactElement, useEffect, useRef, useState } from 'react';
 import { cn } from '../../lib/utils';
 import { Command, CommandGroup, CommandItem, CommandList } from './command';
 
@@ -29,7 +29,7 @@ interface FancySelectInterface {
   selected: string;
   /** Callback function when value changes */
   onValueChange?: (value: any) => void;
-  /** Whether the component should auto-focus */
+  /** Whether the component should autofocus */
   autoFocus?: boolean;
   /** ID of the element that describes this select */
   ariaDescribedby?: string;
@@ -67,7 +67,7 @@ export function FancySelect({
   onFocus,
   onBlur,
   className,
-}: Readonly<FancySelectInterface>): JSX.Element {
+}: Readonly<FancySelectInterface>): ReactElement {
   const [open, setOpen] = useState(false);
   const selectedItem = items?.find((item) => item.value === selected);
   const selectedRef = useRef<HTMLDivElement>(null);
diff --git a/packages/shadcn/src/components/ui/input.tsx b/packages/shadcn/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ import { cn } from '../../lib/utils';
 export type InputProps = InputHTMLAttributes<HTMLInputElement>;
 
 /**
- * A input component with styling and focus states
+ * An input component with styling and focus states
  *
  * @param props - The props for the Input component
  * @param props.className - Additional CSS classes to apply to the input

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import {`
`10`	`10`	`import { cn } from '../lib/utils';`
`11`	`11`
`12`	`12`	/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
`13`		- * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
	`13`	+ * content, (label, description, children, errors and help) inside a `WrapIfAdditional` component.
`14`	`14`	`*`
`15`	`15`	* @param props - The `FieldTemplateProps` for this component
`16`	`16`	`*/`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import { cn } from '../../lib/utils';`
`8`	`8`	`export type InputProps = InputHTMLAttributes<HTMLInputElement>;`
`9`	`9`
`10`	`10`	`/**`
`11`		`- * A input component with styling and focus states`
	`11`	`+ * An input component with styling and focus states`
`12`	`12`	`*`
`13`	`13`	`* @param props - The props for the Input component`
`14`	`14`	`* @param props.className - Additional CSS classes to apply to the input`