docs(jsdoc): add comments for components

Add JSDoc comments for all of the components

re #61

Signed-off-by: Niloy Sikdar <[email protected]>

src/components/Button/Button.tsx

@@ -5,10 +5,28 @@ import { sx } from '../../utils/sx';
 
 type ButtonStyles = 'root' | 'primary' | 'secondary';
 
+/**
+ * Interface for PropTypes for the `Button` component.
+ */
 export interface ButtonProps extends BaseStyleProp<ButtonStyles> {
+  /**
+   * The content of the component.
+   */
   children?: ReactNode;
+  /**
+   * Applies the theme button styles.
+   * @default 'primary'
+   */
   variant?: 'primary' | 'secondary';
+  /**
+   * The URL to link to when the button is clicked.
+   * An `a` element will be used as the root node.
+   */
   href: string;
+  /**
+   * The target of the link.
+   * @default '_blank'
+   */
   target?: HTMLAttributeAnchorTarget;
 }
 

src/components/Column/Column.tsx

@@ -5,9 +5,23 @@ import { BaseStyleProp } from '../types';
 
 type ColumnStyles = 'root';
 
+/**
+ * Interface for PropTypes for the `Column` component.
+ */
 export interface ColumnProps extends BaseStyleProp<ColumnStyles> {
+  /**
+   * The content of the component.
+   */
   children?: ReactNode;
+  /**
+   * The alignment of the children.
+   * @default 'center'
+   */
   align?: 'left' | 'center' | 'right';
+  /**
+   * The vertical alignment of the children.
+   * @default 'top'
+   */
   verticalAlign?: CSSProperties['verticalAlign'];
 }
 

src/components/Divider/Divider.tsx

@@ -5,11 +5,33 @@ import { BaseStyleProp } from '../types';
 
 type DividerStyles = 'root';
 
+/**
+ * Interface for PropTypes for the `Divider` component.
+ */
 export interface DividerProps extends BaseStyleProp<DividerStyles> {
+  /**
+   * The alignment of the divider.
+   * @default 'left'
+   */
   align?: 'left' | 'center' | 'right';
+  /**
+   * The color of the divider.
+   */
   color?: CSSProperties['borderColor'];
+  /**
+   * The type of the divider.
+   * @default 'solid'
+   */
   type?: CSSProperties['borderStyle'];
+  /**
+   * The thickness of the divider.
+   * @default '1px'
+   */
   size?: CSSProperties['borderWidth'];
+  /**
+   * The width of the divider.
+   * @default '100%'
+   */
   width?: CSSProperties['width'];
 }
 

src/components/Email/Email.tsx

@@ -4,7 +4,13 @@ import { makeStyles } from '../../utils/makeStyles';
 
 type EmailStyles = 'root';
 
+/**
+ * Interface for PropTypes for the `Email` component.
+ */
 export interface EmailProps extends BaseStyleProp<EmailStyles> {
+  /**
+   * The content of the component.
+   */
   children?: ReactNode;
 }
 

src/components/Image/Image.tsx

@@ -13,12 +13,35 @@ type ImageStyles =
   | 'captionSection'
   | 'imageColumn';
 
+/**
+ * Interface for PropTypes for the `Image` component.
+ */
 export interface ImageProps extends BaseStyleProp<ImageStyles> {
+  /**
+   * The URL or filepath of the image.
+   */
   src: string;
+  /**
+   * The alt text for the image.
+   */
   alt: string;
+  /**
+   * The caption for the image.
+   */
   caption?: string;
+  /**
+   * The width of the image.
+   */
   width: CSSProperties['width'];
+  /**
+   * The height of the image.
+   * @default 'auto'
+   */
   height?: CSSProperties['height'];
+  /**
+   * The alignment of the caption.
+   * @default 'center'
+   */
   captionAlign?: 'left' | 'center' | 'right';
 }
 

src/components/Link/Link.tsx

@@ -4,9 +4,22 @@ import { makeStyles } from '../../utils/makeStyles';
 
 type LinkStyles = 'root';
 
+/**
+ * Interface for PropTypes for the `Link` component.
+ */
 export interface LinkProps extends BaseStyleProp<LinkStyles> {
+  /**
+   * The content of the component.
+   */
   children?: ReactNode;
+  /**
+   * The URL to link to.
+   */
   href: string;
+  /**
+   * The target of the link.
+   * @default '_blank'
+   */
   target?: HTMLAttributeAnchorTarget;
 }
 

src/components/Preheader/Preheader.tsx

@@ -3,7 +3,13 @@ import { BaseStyleProp } from '../types';
 
 type PreheaderStyles = 'root';
 
+/**
+ * Interface for PropTypes for the `Preheader` component.
+ */
 export interface PreheaderProps extends BaseStyleProp<PreheaderStyles> {
+  /**
+   * The text for the preheader.
+   */
   text: string;
 }
 

src/components/Quote/Quote.tsx

@@ -4,7 +4,13 @@ import { BaseStyleProp } from '../types';
 
 type QuoteStyles = 'root';
 
+/**
+ * Interface for PropTypes for the `Quote` component.
+ */
 export interface QuoteProps extends BaseStyleProp<QuoteStyles> {
+  /**
+   * The content of the component.
+   */
   children?: ReactNode;
 }
 

src/components/Section/Section.tsx

@@ -5,8 +5,18 @@ import { BaseStyleProp } from '../types';
 
 type SectionStyles = 'root' | 'body' | 'row';
 
+/**
+ * Interface for PropTypes for the `Section` component.
+ */
 export interface SectionProps extends BaseStyleProp<SectionStyles> {
+  /**
+   * The content of the component.
+   */
   children?: ReactNode;
+  /**
+   * If `true`, the `section` will take up the full width of its container.
+   * @default true
+   */
   fullWidth?: boolean;
 }