docs(components): add missing docs from most components

packages/components/src/checkbox/checkbox-group.tsx

@@ -6,6 +6,15 @@ import { Stack } from '../stack'
 import { useId } from '@vtex/shoreline-utils'
 import { Label } from '../label'
 
+/**
+ * Checkbox groups allow users to select multiple options from a list.
+ *
+ * @example
+ * <CheckboxGroup label="Checkbox group">
+ *  <Checkbox value="1">Option 1</Checkbox>
+ *  <Checkbox value="2">Option 2</Checkbox>
+ * </CheckboxGroup>
+ */
 export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
   function CheckboxGroup(props, ref) {
     const {
@@ -46,9 +55,25 @@ export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
 )
 
 export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Whether the checkbox group is in an error state
+   */
   error?: boolean
+  /**
+   * Checkbox group description
+   */
   description?: ReactNode
+  /**
+   * Checkbox group error message
+   */
   errorText?: ReactNode
+  /**
+   * Checkbox group label
+   */
   label: ReactNode
+  /**
+   * Whether the checkbox group is horizontal or vertical
+   * @default false
+   */
   horizontal?: boolean
 }

packages/components/src/confirmation-modal/confirmation-modal.tsx

@@ -111,8 +111,17 @@ export interface ConfirmationModalProps
    * Object containing all messages to be displayed internally in the modal. They include "title", "ok" and "cancel".
    */
   messages?: {
+    /**
+     * The title of the modal.
+     */
     title?: string
+    /**
+     * The text of the confirm button.
+     */
     confirm?: string
+    /**
+     * The text of the cancel button.
+     */
     cancel?: string
   }
 }

packages/components/src/field/field-description.tsx

@@ -22,5 +22,9 @@ export const FieldDescription = forwardRef<
 })
 
 export interface FieldDescriptionProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
 }

packages/components/src/field/field-error.tsx

@@ -30,5 +30,9 @@ export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
 )
 
 export interface FieldErrorProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
 }

packages/components/src/field/field-provider.tsx

@@ -14,6 +14,12 @@ export function FieldProvider(props: FieldProviderProps) {
 }
 
 export interface FieldProviderProps {
+  /**
+   * Field store
+   */
   store: Store<FieldContextType>
+  /**
+   * Children to be rendered within the provider
+   */
   children?: React.ReactNode
 }

packages/components/src/field/field.tsx

@@ -56,7 +56,19 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
 })
 
 export interface FieldProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
+  /**
+   * Whether the field is in an error state
+   * @default false
+   */
   error?: boolean
+  /**
+   * Space between the field's children
+   * @default 'normal'
+   */
   space?: 'normal' | 'large'
 }

packages/components/src/filter/filter-popover.tsx

@@ -57,8 +57,17 @@ export const FilterPopover = forwardRef<HTMLDivElement, FilterPopoverProps>(
 )
 
 export interface FilterPopoverProps extends PopoverProps {
+  /**
+   * Filter messages
+   */
   messages?: {
+    /**
+     * Apply button text message
+     */
     apply: string
+    /**
+     * Clear button text message
+     */
     clear: string
   }
 }

packages/components/src/filter/filter-provider.tsx

@@ -80,16 +80,46 @@ export function FilterProvider(props: FilterProviderProps) {
 }
 
 export interface FilterProviderProps {
+  /**
+   * Children of FilterProvider
+   */
   children: ReactNode
+  /**
+   * Whether the filter is open
+   */
   open?: boolean
+  /**
+   * Callback to set the filter open state
+   */
   setOpen?: React.Dispatch<React.SetStateAction<boolean>>
+  /**
+   * Whether the filter is open by default
+   */
   defaultOpen?: boolean
+  /**
+   * Whether the filter is searchable
+   */
   searchValue?: string
+  /**
+   * Callback to set the filter search value
+   */
   setSearchValue?: React.Dispatch<React.SetStateAction<string>>
+  /**
+   * Whether the filter is searchable by default
+   */
   defaultSearchValue?: string
+  /**
+   * Filter value
+   */
   value?: string | string[]
+  /**
+   * Callback to set the filter value
+   */
   setValue?:
     | React.Dispatch<React.SetStateAction<string>>
     | React.Dispatch<React.SetStateAction<string[]>>
+  /**
+   * Filter default value
+   */
   defaultValue?: string | string[]
 }

packages/components/src/filter/filter.tsx

@@ -62,7 +62,16 @@ type InheritedProps = Pick<
   Pick<FilterPopoverProps, 'messages'>
 
 export interface FilterProps extends InheritedProps {
+  /**
+   * Filter label
+   */
   label: string
+  /**
+   * Filter children
+   */
   children: ReactNode
+  /**
+   * Additional className
+   */
   className?: string
 }

packages/components/src/icon-button/icon-button.tsx

@@ -29,5 +29,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 )
 
 export interface IconButtonProps extends ButtonProps {
+  /**
+   * Icon button label. Needed for accessibility.
+   */
   label: ReactNode
 }

packages/components/src/label/label.tsx

@@ -12,6 +12,12 @@ import { useFieldContext } from '../field'
 
 const useMessage = createMessageHook(messages)
 
+/**
+ * Label component
+ *
+ * @example
+ * <Label>Label</Label>
+ */
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   props,
   ref
@@ -42,6 +48,14 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
 })
 
 export interface LabelProps extends ComponentPropsWithoutRef<'label'> {
+  /**
+   * Enables component composition
+   * @default false
+   */
   asChild?: boolean
+  /**
+   * Whether the input linked to this label is optional
+   * @default false
+   */
   optional?: boolean
 }

packages/components/src/radio/radio-group.tsx

@@ -12,6 +12,15 @@ import { Field, FieldDescription, FieldError } from '../field'
 import { Stack } from '../stack'
 import { Label } from '../label'
 
+/**
+ * Radio groups allow users to select one option from a list.
+ * @example
+ * <RadioGroup label="Radio group">
+ *  <Radio value="1">Option 1</Radio>
+ *  <Radio value="2">Option 2</Radio>
+ *  <Radio value="3">Option 3</Radio>
+ * </RadioGroup>
+ */
 export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
   function Radio(props, ref) {
     const {
@@ -55,19 +64,53 @@ export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
 )
 
 export interface RadioGroupState {
+  /**
+   * The value of the active radio
+   */
   value?: string | number | null
+  /**
+   * The callback to set the active radio
+   */
   setValue?: ((value: string | number | null) => void) | undefined
+  /**
+   * The id of the active radio group item
+   */
   activeId?: string | null
+  /**
+   * Default active id of the radio group
+   */
   defaultActiveId?: string | null
+  /**
+   * Default value of the radio group
+   */
   defaultValue?: string | number | null
 }
 
 export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Whether the radio group is in an error state
+   */
   error?: boolean
+  /**
+   * Radio group description
+   */
   description?: string
+  /**
+   * Radio group error message
+   */
   errorText?: string
+  /**
+   * Radio group label
+   */
   label: ReactNode
+  /**
+   * Whether the radio group is horizontal or vertical
+   * @default false
+   */
   horizontal?: boolean
+  /**
+   * Radio group state
+   */
   state?: RadioStore
 }
 

packages/components/src/radio/radio.tsx

@@ -5,6 +5,16 @@ import { useId } from '@vtex/shoreline-utils'
 
 import { Label } from '../label'
 
+/**
+ * Radio inputs allow users to select one option from a list. It should be used inside a RadioGroup component.
+ *
+ * @example
+ * <RadioGroup label="Radio group">
+ *  <Radio value="1">Option 1</Radio>
+ *  <Radio value="2">Option 2</Radio>
+ *  <Radio value="3">Option 3</Radio>
+ * </RadioGroup>
+ */
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
   props,
   ref
@@ -40,6 +50,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
 })
 
 export interface RadioProps extends ComponentPropsWithoutRef<'input'> {
+  /**
+   * Wether is disabled
+   * @default false
+   */
   error?: boolean
+  /**
+   * The value of the radio
+   */
   value: string
 }

packages/components/src/search/search.tsx

@@ -6,6 +6,11 @@ import { useId, useMergeRef } from '@vtex/shoreline-utils'
 import { Spinner } from '../spinner'
 import { VisuallyHidden } from '@vtex/shoreline-primitives'
 
+/**
+ * Search component
+ * @example
+ * <Search placeholder="Search" />
+ */
 export const Search = forwardRef<HTMLInputElement, SearchProps>(function Search(
   props,
   forwardedRef

packages/components/src/select/select.tsx

@@ -77,7 +77,14 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
 export interface SelectProps
   extends Omit<ComponentPropsWithoutRef<'select'>, 'onChange'> {
+  /**
+   * Whether is in error state
+   */
   error?: boolean
+  /**
+   * Whether is disabled
+   * @default false
+   */
   disabled?: boolean
   /**
    * Callback for value change

packages/components/src/skeleton/skeleton.tsx

@@ -1,6 +1,11 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 
+/**
+ * Skeleton represents a loading state
+ * @example
+ * <Skeleton shape="circle" style={{ width: 200, height: 200 }} />
+ */
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
   function Skeleton(props, ref) {
     const { shape = 'rect', ...otherProps } = props

packages/components/src/tag/tag.tsx

@@ -34,7 +34,15 @@ export const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(
 })
 
 export interface TagProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Tag variant
+   * @default 'primary'
+   */
   variant?: 'primary' | 'secondary'
+  /**
+   * Tag color
+   * @default 'gray'
+   */
   color?:
     | 'gray'
     | 'red'
@@ -46,5 +54,9 @@ export interface TagProps extends ComponentPropsWithoutRef<'div'> {
     | 'blue'
     | 'orange'
     | 'yellow'
+  /**
+   * Tag size
+   * @default 'normal'
+   */
   size?: 'normal' | 'large'
 }