Add more documentation

src/components/Alert/Alert.tsx

@@ -15,6 +15,9 @@ type Props = {
 
   children: ReactNode;
 
+  /**
+   * Apply custom classname.
+   */
   className?: string;
 
   /**

src/components/AppBar/AppBar.tsx

@@ -3,8 +3,15 @@ import "./appBar.css";
 import { ReactNode } from "react";
 
 type Props = {
+  /**
+   * Event triggered when the menu is expanding, after a click on the
+   * menu button.
+   */
   onExpand: () => void;
 
+  /**
+   * React node to add to the right part of the application bar
+   */
   Right: ReactNode;
 };
 

src/components/ButtonIcon/ButtonIcon.tsx

@@ -29,6 +29,9 @@ type Props = {
    */
   style?: CustomStyleCSS;
 
+  /**
+   * Apply custom classname.
+   */
   className?: string;
 };
 

src/components/Collapse/Collapse.tsx

@@ -3,8 +3,19 @@ import "./Collapse.css";
 import { attributes } from "../utils/attributes";
 
 type Props = {
+  /**
+   * Summary always displayed
+   */
   summary: string;
+
+  /**
+   * Details to show after the component is collapsed
+   */
   details: string;
+
+  /**
+   * Apply custom classname.
+   */
   className?: string;
 };
 

src/components/Dropdown/Dropdown.tsx

@@ -39,6 +39,9 @@ type Props = {
    */
   placeholder: string;
 
+  /**
+   * List of values to be displayed in the dropdown
+   */
   options: DropdownOption[];
 
   /**
@@ -77,8 +80,6 @@ type Props = {
   label: string;
 
   id: string;
-
-  Component?: ComponentType<DropdownOption>;
 };
 
 export function Dropdown({

src/components/EmptyPlaceholder/EmptyPlaceholder.tsx

@@ -3,7 +3,14 @@ import { EmptyPlaceholderIcon } from "./EmptyPlaceholderIcon";
 
 type Props = {
   title: string;
+
   message: string;
+
+  /**
+   * If a retry function is passed to the component,
+   * a button will be displayed and the function will be called when the button
+   * is clicked.
+   */
   onRetry?: () => void | Promise<void>;
 };
 

src/components/Failure/Failure.tsx

@@ -9,10 +9,25 @@ interface CustomStyleCSS extends CSSProperties {
 }
 
 type Props = {
+  /**
+   * Error code related to the error, example: 400, 500
+   */
   code: number;
+
   message: string;
+
   title: string;
+
+  /**
+   * If an action function is passed to the component,
+   * a button will be displayed and the function will be called when the button
+   * is clicked.
+   */
   onClick?: () => void | Promise<void>;
+
+  /**
+   * The button label
+   */
   button?: string;
 
   /**

src/components/Menu/Menu.tsx

@@ -23,12 +23,18 @@ export type MenuItem =
     };
 
 type Props = {
+  /**
+   * If true, the menu will be displayed
+   */
   expanded: boolean;
 
   onClose: () => void;
 
   onOpen?: () => void;
 
+  /**
+   * The menu items to be displayed
+   */
   items: MenuItem[];
 
   className?: string;

src/components/NetworkIndicator/NetworkIndicator.tsx

@@ -3,6 +3,7 @@ import "./networkIndicator.css";
 
 type Props = {
   online: boolean;
+
   text: string;
 };
 

src/components/Placeholder/Placeholder.tsx

@@ -4,9 +4,21 @@ import "./placeholder.css";
 
 type Props = {
   title: string;
+
   message: string;
+
+  /**
+   * If a retry function is passed to the component,
+   * a button will be displayed and the function will be called when the button
+   * is clicked.
+   */
   onRetry?: () => void | Promise<void>;
+
+  /**
+   * Icon to be displayed on top of the text
+   */
   Icon: ReactNode;
+
   className?: string;
 };
 

src/components/Select/Select.tsx

@@ -11,6 +11,7 @@ interface CustomStyleCSS extends CSSProperties {
 
 type Props = {
   label: string;
+
   id: string;
 
   /**

src/components/Sheets/Sheets.tsx

@@ -5,7 +5,9 @@ import { attributes } from "../utils/attributes";
 
 type Props = {
   open: boolean;
+
   onClose: () => void;
+
   children: ReactElement;
 };
 

src/components/Spinner/Spinner.tsx

@@ -1,5 +1,6 @@
 type Props = {
   width?: string;
+
   className?: string;
 };
 

src/components/Stepper/Step.tsx

@@ -4,11 +4,34 @@ import { attributes } from "../utils/attributes";
 import { classnames } from "../utils/classnames";
 
 type StepProps = {
+  /**
+   * Step title
+   */
   title: string;
+
+  /**
+   * Step index
+   */
   step: number;
+
+  /**
+   * If true, an active css class will be added
+   */
   isActive: boolean;
+
+  /**
+   * If true, a css class will be added to draw the line between two steps
+   */
   isLast: boolean;
+
+  /**
+   * If true, a done css class will be added to color the step
+   */
   isDone: boolean;
+
+  /**
+   * Event triggered when a step number is clicked on
+   */
   onClick?: (step: number) => void;
 };
 

src/components/Table/ActionCell.tsx

@@ -2,6 +2,7 @@ import { SimpleText } from "../SimpleText/SimpleText";
 
 type Props = {
   action: string;
+
   onClick: (data: unknown) => unknown | Promise<unknown>;
 };
 

src/components/Table/Table.tsx

@@ -7,6 +7,11 @@ type Props = {
    */
   headers: string[];
 
+  /**
+   * The ReactNode cells in two dimensions array,
+   * one for the lines
+   * one for the data representation
+   */
   cells: ReactNode[][];
 
   className?: string;

src/components/Tabs/Tabs.tsx

@@ -7,7 +7,12 @@ type Props = {
     label: string;
     Icon?: ComponentType;
   }[];
+
   onTabChange: (index: number) => void | Promise<void>;
+
+  /**
+   * Current tab selected index
+   */
   tabIndex: number;
 };