@@ -8,12 +8,12 @@ const path = require('path')
 const globby = require('globby')
 const pkg = require('../package.json')
 
-const GLOB = ['src/components/**/*.tsx']
+const GLOB = ['**/src/**/*.tsx']
 const GLOBBY_OPTIONS = {
 absolute: true,
-cwd: path.join(__dirname, '..', '..', 'coreui-react'),
+cwd: path.join(__dirname, '..', '..'),
 gitignore: true,
-ignore: ['**/__tests__/**'],
+ignore: ['**/docs/**', '**/__tests__/**'],
 }
 const EXCLUDED_FILES = []
 
@@ -27,12 +27,13 @@ async function createMdx(file, filename, name, props) {
 if (typeof props === 'undefined') return
 
 const pro = PRO_COMPONENTS.some((v) => file.includes(v))
+const relativeFilename = file.replace(GLOBBY_OPTIONS.cwd, '').replace('coreui-', '')
 
 let content = `
 \`\`\`jsx
-import { ${name} } from '@coreui/react${pro ? '-pro' : ''}'
+import { ${name} } from '@coreui/${relativeFilename.split('/')[1]}${pro ? '-pro' : ''}'
 // or
-import ${name} from '@coreui/react${pro ? '-pro' : ''}${file.replace('.tsx', '').replace(GLOBBY_OPTIONS.cwd, '')}'
+import ${name} from '@coreui${relativeFilename.replace('.tsx', '')}'
 \`\`\`\n
 `
 

@@ -0,0 +1,24 @@
+
+```jsx
+import { CChart } from '@coreui/react-chartjs'
+// or
+import CChart from '@coreui/react-chartjs/src/CChart'
+```
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| **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} | `any` | - |
+| **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: any) => void` | - |
+| **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: any) => void` | - |
+| **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: any) => 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>[]` | - |
+| **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'}` | - |
+| **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
+| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true |

@@ -0,0 +1,24 @@
+
+```jsx
+import { CChartBar } from '@coreui/react-chartjs'
+// or
+import CChartBar from '@coreui/react-chartjs/src/CCharts'
+```
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| **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} | `any` | - |
+| **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: any) => void` | - |
+| **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: any) => void` | - |
+| **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: any) => 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>[]` | - |
+| **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'}` | - |
+| **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
+| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true |