docs(website): new website

src/types.ts

@@ -19,28 +19,62 @@ export interface ChartProps<
   TData = DefaultDataPoint<TType>,
   TLabel = unknown
 > extends CanvasHTMLAttributes<HTMLCanvasElement> {
+  /**
+   * Chart.js chart type
+   */
   type: TType;
   /**
+   * The data object that is passed into the Chart.js chart
+   * @see https://www.chartjs.org/docs/latest/getting-started/
    * @todo Remove function variant.
    */
   data:
     | ChartData<TType, TData, TLabel>
     | ((canvas: HTMLCanvasElement) => ChartData<TType, TData, TLabel>);
+  /**
+   * The options object that is passed into the Chart.js chart
+   * @see https://www.chartjs.org/docs/latest/general/options.html
+   * @default {}
+   */
   options?: ChartOptions<TType>;
+  /**
+   * The plugins array that is passed into the Chart.js chart
+   * @see https://www.chartjs.org/docs/latest/developers/plugins.html
+   * @default []
+   */
   plugins?: Plugin<TType>[];
+  /**
+   * Teardown and redraw chart on everu update
+   * @default false
+   */
   redraw?: boolean;
   /**
+   * A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions
+   * @see https://www.chartjs.org/docs/latest/general/accessibility.html
+   * @default null
    * @todo Replace with `children` prop.
    */
   fallbackContent?: ReactNode;
+  /**
+   * Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event
+   * @default undefined
+   */
   getDatasetAtEvent?: (
     dataset: InteractionItem[],
     event: MouseEvent<HTMLCanvasElement>
   ) => void;
+  /**
+   * Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event
+   * @default undefined
+   */
   getElementAtEvent?: (
     element: InteractionItem[],
     event: MouseEvent<HTMLCanvasElement>
   ) => void;
+  /**
+   * Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event
+   * @default undefined
+   */
   getElementsAtEvent?: (
     elements: InteractionItem[],
     event: MouseEvent<HTMLCanvasElement>

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website/docs/components/bar.mdx

@@ -0,0 +1,27 @@
+---
+description: Description of Bar component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Bar
+
+## Usage
+
+```jsx
+import { Bar } from 'react-chartjs-2';
+
+<Bar
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/bar-chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='Bar' />

website/docs/components/bubble.mdx

@@ -0,0 +1,27 @@
+---
+description: Description of Bubble component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Bubble
+
+## Usage
+
+```jsx
+import { Bubble } from 'react-chartjs-2';
+
+<Bubble
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/bubble-chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='Bubble' />

website/docs/components/chart.mdx

@@ -0,0 +1,28 @@
+---
+description: Description of Chart component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Chart
+
+## Usage
+
+```jsx
+import { Chart } from 'react-chartjs-2';
+
+<Chart
+  type={...}
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='Chart' />

website/docs/components/docs.js

@@ -0,0 +1,11 @@
+exports.docs = [
+  { title: 'Chart', slug: '/components/chart' },
+  { title: 'Bar', slug: '/components/bar' },
+  { title: 'Line', slug: '/components/line' },
+  { title: 'Pie', slug: '/components/pie' },
+  { title: 'Doughnut', slug: '/components/doughnut' },
+  { title: 'PolarArea', slug: '/components/polar-area' },
+  { title: 'Radar', slug: '/components/radar' },
+  { title: 'Scatter', slug: '/components/scatter' },
+  { title: 'Bubble', slug: '/components/bubble' },
+];

website/docs/components/doughnut.mdx

@@ -0,0 +1,27 @@
+---
+description: Description of Doughnut component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Doughnut
+
+## Usage
+
+```jsx
+import { Doughnut } from 'react-chartjs-2';
+
+<Doughnut
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/doughnut-chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='Doughnut' />

website/docs/components/index.mdx

@@ -0,0 +1,17 @@
+---
+slug: /components
+description: List of react-chartjs-2 components.
+---
+
+import Link from '@docusaurus/Link';
+import { docs } from './docs';
+
+# Components
+
+<ul>
+  {docs.map(({ title, slug }, i) => (
+    <li key={i}>
+      <Link to={slug}>{title}</Link>
+    </li>
+  ))}
+</ul>

website/docs/components/line.mdx

@@ -0,0 +1,27 @@
+---
+description: Description of Line component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Line
+
+## Usage
+
+```jsx
+import { Line } from 'react-chartjs-2';
+
+<Line
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/line-chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='Line' />

website/docs/components/pie.mdx

@@ -0,0 +1,27 @@
+---
+description: Description of Pie component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Pie
+
+## Usage
+
+```jsx
+import { Pie } from 'react-chartjs-2';
+
+<Pie
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/pie-chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='Pie' />

website/docs/components/polar-area.mdx

@@ -0,0 +1,27 @@
+---
+description: Description of PolarArea component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# PolarArea
+
+## Usage
+
+```jsx
+import { PolarArea } from 'react-chartjs-2';
+
+<PolarArea
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/polar-area-chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='PolarArea' />

website/docs/components/radar.mdx

@@ -0,0 +1,27 @@
+---
+description: Description of Radar component from react-chartjs-2.
+---
+
+import PropsTable from '../../src/components/PropsTable'
+
+# Radar
+
+## Usage
+
+```jsx
+import { Radar } from 'react-chartjs-2';
+
+<Radar
+  option={...}
+  data={...}
+  {...props}
+/>
+```
+
+[See full usage examples.](/tags/radar-chart)
+
+## Props
+
+Also supports all standard `<canvas>` props.
+
+<PropsTable component='Radar' />