docs: update API documentation

mrholek · mrholek · commit 42bdddec07a3 · 2023-01-23T23:38:24.000+01:00
diff --git a/packages/coreui-react-chartjs/src/CChart.tsx b/packages/coreui-react-chartjs/src/CChart.tsx
@@ -43,8 +43,6 @@ export interface CChartProps extends HTMLAttributes<HTMLCanvasElement | HTMLDivE
   data: ChartData | ((canvas: HTMLCanvasElement) => ChartData)
   /**
    * A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
-   *
-   * {@link https://www.chartjs.org/docs/latest/general/accessibility.html More Info}
    */
   fallbackContent?: React.ReactNode
   /**
@@ -80,14 +78,10 @@ export interface CChartProps extends HTMLAttributes<HTMLCanvasElement | HTMLDivE
   id?: string
   /**
    * The options object that is passed into the Chart.js chart.
-   *
-   * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
    */
   options?: ChartOptions
   /**
    * The plugins array that is passed into the Chart.js chart (more info)
-   *
-   * {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
    */
   plugins?: Plugin[]
   /**
diff --git a/packages/coreui-react/src/components/form/CFormInput.tsx b/packages/coreui-react/src/components/form/CFormInput.tsx
@@ -26,7 +26,7 @@ export interface CFormInputProps
    */
   onChange?: ChangeEventHandler<HTMLInputElement>
   /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
+   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
    */
   plainText?: boolean
   /**
diff --git a/packages/coreui-react/src/components/form/CFormSwitch.tsx b/packages/coreui-react/src/components/form/CFormSwitch.tsx
@@ -22,7 +22,7 @@ export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElem
    */
   label?: string | ReactNode
   /**
-   * Size the component large or extra large. Works only with `switch` [docs]
+   * Size the component large or extra large. Works only with `switch`.
    */
   size?: 'lg' | 'xl'
   /**
diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx
@@ -15,19 +15,19 @@ import { CNavContext } from '../sidebar/CSidebarNav'
 export interface CNavGroupProps {
   children?: ReactNode
   /**
-   * A string of all className you want applied to the component. [docs]
+   * A string of all className you want applied to the component.
    */
   className?: string
   /**
-   * Make nav group more compact by cutting all `padding` in half. [docs]
+   * Make nav group more compact by cutting all `padding` in half.
    */
   compact?: boolean
   /**
-   * Set group toggler label. [docs]
+   * Set group toggler label.
    */
   toggler?: string | ReactNode
   /**
-   * Show nav group items. [docs]
+   * Show nav group items.
    */
   visible?: boolean
   /**
diff --git a/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx b/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx
@@ -17,7 +17,7 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    */
   className?: string
   /**
-   * Closes the offcanvas when escape key is pressed [docs]
+   * Closes the offcanvas when escape key is pressed.
    */
   keyboard?: boolean
   /**
diff --git a/packages/coreui-react/src/components/table/CTable.tsx b/packages/coreui-react/src/components/table/CTable.tsx
@@ -53,7 +53,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
    * Object: item is object with following keys available as column configuration:
    * - key (required)(String) - define column name equal to item key.
    * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
-   * - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },
+   * - _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`,
    * - _style (Object) - adds styles to the column header (useful for defining widths)
    *
    * @since 4.3.0
@@ -69,9 +69,9 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
    * Array of objects or strings, where each element represents one cell in the table footer.
    *
    * Example items:
-   * ['FooterCell', 'FooterCell', 'FooterCell']
+   * `['FooterCell', 'FooterCell', 'FooterCell']`
    * or
-   * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+   * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
    *
    * @since 4.3.0
    */
@@ -84,7 +84,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
    * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
    *
    * Example item:
-   * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
+   * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
    *
    * @since 4.3.0
    */
diff --git a/packages/docs/content/api/CChart.api.mdx b/packages/docs/content/api/CChart.api.mdx
@@ -10,14 +10,14 @@ import CChart from '@coreui/react-chartjs/src/CChart'
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **customTooltips** | Enables custom html based tooltips instead of standard tooltips. | `boolean` | true |
 | **data** | The data object that is passed into the Chart.js chart (more info). | `ChartData<keyof ChartTypeRegistry, (number` \| `ScatterDataPoint` \| `BubbleDataPoint)[], unknown>` \| `((canvas: HTMLCanvasElement) => ChartData<...>)` | - |
-| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.<br/><br/>{@link https://www.chartjs.org/docs/latest/general/accessibility.html More Info} | `React.ReactNode` | - |
+| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. | `React.ReactNode` | - |
 | **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
 | **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
 | **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
 | **height** | Height attribute applied to the rendered canvas. | `number` | 150 |
 | **id** | ID attribute applied to the rendered canvas. | `string` | - |
-| **options** | The options object that is passed into the Chart.js chart.<br/><br/>{@link https://www.chartjs.org/docs/latest/general/options.html More Info} | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
-| **plugins** | The plugins array that is passed into the Chart.js chart (more info)<br/><br/>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | [] |
+| **options** | The options object that is passed into the Chart.js chart. | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
+| **plugins** | The plugins array that is passed into the Chart.js chart (more info) | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | [] |
 | **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false |
 | **type** | Chart.js chart type. | `{'line'` \| `'bar'` \| `'radar'` \| `'doughnut'` \| `'polarArea'` \| `'bubble'` \| `'pie'` \| `'scatter'}` | bar |
 | **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx
@@ -10,14 +10,14 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **customTooltips** | Enables custom html based tooltips instead of standard tooltips. | `boolean` | true |
 | **data** | The data object that is passed into the Chart.js chart (more info). | `ChartData<keyof ChartTypeRegistry, (number` \| `ScatterDataPoint` \| `BubbleDataPoint)[], unknown>` \| `((canvas: HTMLCanvasElement) => ChartData<...>)` | - |
-| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.<br/><br/>{@link https://www.chartjs.org/docs/latest/general/accessibility.html More Info} | `React.ReactNode` | - |
+| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. | `React.ReactNode` | - |
 | **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
 | **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
 | **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
 | **height** | Height attribute applied to the rendered canvas. | `number` | 150 |
 | **id** | ID attribute applied to the rendered canvas. | `string` | - |
-| **options** | The options object that is passed into the Chart.js chart.<br/><br/>{@link https://www.chartjs.org/docs/latest/general/options.html More Info} | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
-| **plugins** | The plugins array that is passed into the Chart.js chart (more info)<br/><br/>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | - |
+| **options** | The options object that is passed into the Chart.js chart. | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
+| **plugins** | The plugins array that is passed into the Chart.js chart (more info) | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | - |
 | **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false |
 | **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
 | **wrapper** | Put the chart into the wrapper div element. | `boolean` | true |
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx
@@ -8,9 +8,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **lg** | The number of columns/offset/order on large devices (<1200px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **md** | The number of columns/offset/order on medium devices (<992px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **sm** | The number of columns/offset/order on small devices (<768px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **xl** | The number of columns/offset/order on X-Large devices (<1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **xs** | The number of columns/offset/order on extra small devices (<576px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
+| **lg** | The number of columns/offset/order on large devices (\<1200px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
+| **md** | The number of columns/offset/order on medium devices (\<992px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
+| **sm** | The number of columns/offset/order on small devices (\<768px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
+| **xl** | The number of columns/offset/order on X-Large devices (\<1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
+| **xs** | The number of columns/offset/order on extra small devices (\<576px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
 | **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx
@@ -18,7 +18,7 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
 | **invalid** | Set component validation state to invalid. | `boolean` | - |
 | **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - |
 | **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler<HTMLInputElement>` | - |
-| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` | `boolean` | - |
+| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - |
 | **readOnly** | Toggle the readonly state for the component. | `boolean` | - |
 | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
 | **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - |
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx
@@ -11,6 +11,6 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
 | **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - |
 | **invalid** | Set component validation state to invalid. | `boolean` | - |
 | **label** | The element represents a caption for a component. | `ReactNode` | - |
-| **size** | Size the component large or extra large. Works only with `switch` | `'lg'` \| `'xl'` | - |
+| **size** | Size the component large or extra large. Works only with `switch`. | `'lg'` \| `'xl'` | - |
 | **type** | Specifies the type of component. | `'checkbox'` \| `'radio'` | checkbox |
 | **valid** | Set component validation state to valid. | `boolean` | - |
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx
@@ -9,7 +9,7 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
 | --- | --- | --- | --- |
 | **backdrop** | Apply a backdrop on body while offcanvas is open. | `boolean` | true |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **keyboard** | Closes the offcanvas when escape key is pressed | `boolean` | true |
+| **keyboard** | Closes the offcanvas when escape key is pressed. | `boolean` | true |
 | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
 | **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` \| `'top'` \| `'bottom'` | - |
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx
@@ -11,10 +11,10 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
 | **className** | A string of all className you want applied to the component. | `string` | - |
 | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
 | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | - |
-| **lg** | The number of columns on large devices (<1200px). | `number` | - |
-| **md** | The number of columns on medium devices (<992px). | `number` | - |
+| **lg** | The number of columns on large devices (\<1200px). | `number` | - |
+| **md** | The number of columns on medium devices (\<992px). | `number` | - |
 | **size** | Size the component extra small, small, or large. | `'xs'` \| `'sm'` \| `'lg'` | - |
-| **sm** | The number of columns on small devices (<768px). | `number` | - |
-| **xl** | The number of columns on X-Large devices (<1400px). | `number` | - |
-| **xs** | The number of columns on extra small devices (<576px). | `number` | - |
+| **sm** | The number of columns on small devices (\<768px). | `number` | - |
+| **xl** | The number of columns on X-Large devices (\<1400px). | `number` | - |
+| **xs** | The number of columns on extra small devices (\<576px). | `number` | - |
 | **xxl** | The number of columns on XX-Large devices (≥1400px). | `number` | - |
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,`
`53`	`53`	`* Object: item is object with following keys available as column configuration:`
`54`	`54`	`* - key (required)(String) - define column name equal to item key.`
`55`	`55`	`* - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.`
`56`		`- * - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },`
	`56`	+ * - _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`,
`57`	`57`	`* - _style (Object) - adds styles to the column header (useful for defining widths)`
`58`	`58`	`*`
`59`	`59`	`* @since 4.3.0`
`@@ -69,9 +69,9 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,`
`69`	`69`	`* Array of objects or strings, where each element represents one cell in the table footer.`
`70`	`70`	`*`
`71`	`71`	`* Example items:`
`72`		`- * ['FooterCell', 'FooterCell', 'FooterCell']`
	`72`	+ * `['FooterCell', 'FooterCell', 'FooterCell']`
`73`	`73`	`* or`
`74`		`- * [{ label: 'FooterCell', _props: { color: 'success' }, ...]`
	`74`	+ * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
`75`	`75`	`*`
`76`	`76`	`* @since 4.3.0`
`77`	`77`	`*/`
`@@ -84,7 +84,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,`
`84`	`84`	`* Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.`
`85`	`85`	`*`
`86`	`86`	`* Example item:`
`87`		`- * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
	`87`	+ * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
`88`	`88`	`*`
`89`	`89`	`* @since 4.3.0`
`90`	`90`	`*/`