chore: add missing jsdoc for all component

tuanphung2308 · tuanphung2308 · commit 53909aaa4341 · 2025-03-15T01:44:57.000+07:00
diff --git a/packages/shadcn/src/AddButton/AddButton.tsx b/packages/shadcn/src/AddButton/AddButton.tsx
@@ -1,7 +1,19 @@
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 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 {IconButtonProps<T, S, F>} props - The component props
+ * @param {Object} props.uiSchema - The UI schema configuration
+ * @param {Object} props.registry - The registry object containing form utilities
+ * @returns {JSX.Element} A button component with a plus icon
+ */
 export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   uiSchema,
   registry,
diff --git a/packages/shadcn/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/shadcn/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -7,6 +7,10 @@ import {
   StrictRJSFSchema,
 } from '@rjsf/utils';
 
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
+ */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/shadcn/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -9,6 +9,10 @@ import {
   StrictRJSFSchema,
 } from '@rjsf/utils';
 
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
+ */
 export default function ArrayFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -1,4 +1,3 @@
-import { ChangeEvent, FocusEvent } from 'react';
 import {
   ariaDescribedByIds,
   BaseInputTemplateProps,
@@ -8,9 +7,17 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
-import { cn } from '../lib/utils';
+import { ChangeEvent, FocusEvent } from 'react';
+
 import { Input } from '../components/ui/input';
+import { cn } from '../lib/utils';
 
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
 export default function BaseInputTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/CheckboxWidget/CheckboxWidget.tsx b/packages/shadcn/src/CheckboxWidget/CheckboxWidget.tsx
@@ -1,17 +1,22 @@
 import {
   ariaDescribedByIds,
   descriptionId,
+  FormContextType,
   getTemplate,
   labelValue,
-  WidgetProps,
+  RJSFSchema,
   schemaRequiresTrueValue,
   StrictRJSFSchema,
-  RJSFSchema,
-  FormContextType,
+  WidgetProps,
 } from '@rjsf/utils';
 import { Checkbox } from '../components/ui/checkbox';
 import { Label } from '../components/ui/label';
 
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function CheckboxWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/shadcn/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -1,20 +1,26 @@
-import { FocusEvent } from 'react';
 import {
   ariaDescribedByIds,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
   enumOptionsValueForIndex,
-  optionId,
   FormContextType,
+  optionId,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
+import { FocusEvent } from 'react';
+
 import { Checkbox } from '../components/ui/checkbox';
-import { cn } from '../lib/utils';
 import { Label } from '../components/ui/label';
+import { cn } from '../lib/utils';
 
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/DescriptionField/DescriptionField.tsx b/packages/shadcn/src/DescriptionField/DescriptionField.tsx
@@ -1,5 +1,9 @@
 import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/ErrorList/ErrorList.tsx b/packages/shadcn/src/ErrorList/ErrorList.tsx
@@ -1,7 +1,12 @@
 import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 import { AlertCircle } from 'lucide-react';
+
 import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
 
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
 export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   errors,
   registry,
diff --git a/packages/shadcn/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/shadcn/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,4 +1,5 @@
 import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+
 import { cn } from '../lib/utils';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
diff --git a/packages/shadcn/src/FieldTemplate/FieldTemplate.tsx b/packages/shadcn/src/FieldTemplate/FieldTemplate.tsx
@@ -6,8 +6,14 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
+
 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.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
 export default function FieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/GridTemplate/GridTemplate.tsx b/packages/shadcn/src/GridTemplate/GridTemplate.tsx
@@ -1,7 +1,11 @@
 import { GridTemplateProps } from '@rjsf/utils';
 import { cn } from '../lib/utils';
 
-// Implementation using https://tailwindcss.com/docs/grid-auto-columns and https://tailwindcss.com/docs/grid-auto-rows
+/** Renders a `GridTemplate` for mui, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Grid2`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the mui grid positioning details
+ */
 export default function GridTemplate(props: GridTemplateProps) {
   const { children, column, ...rest } = props;
   return (
diff --git a/packages/shadcn/src/IconButton/IconButton.tsx b/packages/shadcn/src/IconButton/IconButton.tsx
@@ -1,7 +1,8 @@
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import { Button, ButtonProps } from '../components/ui/button';
 import { ChevronDown, ChevronUp, Copy, Trash2 } from 'lucide-react';
 
+import { Button, ButtonProps } from '../components/ui/button';
+
 export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: IconButtonProps<T, S, F> & ButtonProps
 ) {
diff --git a/packages/shadcn/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/shadcn/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -11,6 +11,12 @@ import {
   titleId,
 } from '@rjsf/utils';
 
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
 export default function ObjectFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/RadioWidget/RadioWidget.tsx b/packages/shadcn/src/RadioWidget/RadioWidget.tsx
@@ -1,18 +1,24 @@
-import { FocusEvent } from 'react';
 import {
   ariaDescribedByIds,
   enumOptionsIsSelected,
   enumOptionsValueForIndex,
-  optionId,
   FormContextType,
+  optionId,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
-import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group';
+import { FocusEvent } from 'react';
+
 import { Label } from '../components/ui/label';
+import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group';
 import { cn } from '../lib/utils';
 
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
   options,
diff --git a/packages/shadcn/src/RangeWidget/RangeWidget.tsx b/packages/shadcn/src/RangeWidget/RangeWidget.tsx
@@ -1,5 +1,8 @@
 import { ariaDescribedByIds, FormContextType, rangeSpec, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import _pick from 'lodash/pick';
+
 import { Slider } from '../components/ui/slider';
+
 const allowedProps = [
   'name',
   'min',
@@ -15,8 +18,23 @@ const allowedProps = [
   'inverted',
   'minStepsBetweenThumbs',
 ];
-import _pick from 'lodash/pick';
 
+/**
+ * A range widget component that renders a slider for number input
+ * @template T - The type of the form data
+ * @template S - The type of the schema, extending StrictRJSFSchema
+ * @template F - The type of the form context
+ * @param {object} props - The widget properties
+ * @param {number} props.value - The current value of the range
+ * @param {boolean} props.readonly - Whether the widget is read-only
+ * @param {boolean} props.disabled - Whether the widget is disabled
+ * @param {object} props.options - Additional options for the widget
+ * @param {S} props.schema - The JSON schema for this field
+ * @param {(value: any) => void} props.onChange - Callback for when the value changes
+ * @param {string} props.label - The label for the range input
+ * @param {string} props.id - The unique identifier for the widget
+ * @returns {JSX.Element} The rendered range widget
+ */
 export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   value,
   readonly,
diff --git a/packages/shadcn/src/SelectWidget/SelectWidget.tsx b/packages/shadcn/src/SelectWidget/SelectWidget.tsx
@@ -1,16 +1,22 @@
 import {
   ariaDescribedByIds,
-  FormContextType,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex,
+  FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
+
 import { FancyMultiSelect } from '../components/ui/fancy-multi-select';
 import { FancySelect } from '../components/ui/fancy-select';
 import { cn } from '../lib/utils';
 
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function SelectWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
@@ -69,6 +75,7 @@ export default function SelectWidget<
   ) : (
     <div className='p-0.5'>
       <FancyMultiSelect
+        id={id}
         autoFocus={autofocus}
         disabled={disabled || readonly}
         multiple
diff --git a/packages/shadcn/src/SubmitButton/SubmitButton.tsx b/packages/shadcn/src/SubmitButton/SubmitButton.tsx
@@ -1,6 +1,9 @@
-import { Button } from '../components/ui/button';
 import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
 
+import { Button } from '../components/ui/button';
+
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
 export default function SubmitButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: SubmitButtonProps<T, S, F>
 ) {
diff --git a/packages/shadcn/src/TextareaWidget/TextareaWidget.tsx b/packages/shadcn/src/TextareaWidget/TextareaWidget.tsx
@@ -1,5 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
 import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ChangeEvent, FocusEvent } from 'react';
+
 import { Textarea } from '../components/ui/textarea';
 
 type CustomWidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = WidgetProps<
@@ -10,6 +11,10 @@ type CustomWidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
   options: any;
 };
 
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function TextareaWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
diff --git a/packages/shadcn/src/TitleField/TitleField.tsx b/packages/shadcn/src/TitleField/TitleField.tsx
@@ -1,6 +1,11 @@
 import { FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+
 import { Separator } from '../components/ui/separator';
 
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
   title,
diff --git a/packages/shadcn/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/packages/shadcn/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId,
@@ -8,9 +7,16 @@ import {
   TranslatableString,
   WrapIfAdditionalTemplateProps,
 } from '@rjsf/utils';
-import { Separator } from '../components/ui/separator';
+import { FocusEvent } from 'react';
+
 import { Input } from '../components/ui/input';
+import { Separator } from '../components/ui/separator';
 
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
 export default function WrapIfAdditionalTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';`
	`2`	`+`
`2`	`3`	`import { cn } from '../lib/utils';`
`3`	`4`
`4`	`5`	/** The `FieldHelpTemplate` component renders any help desired for a field