docs(examples): examples to open as sandbox (#820)

.lintstagedrc

@@ -1,5 +1,6 @@
 {
   "src/**/*.{ts,tsx}": ["eslint", "prettier --write"],
   "stories/**/*.{ts,tsx}": ["eslint", "prettier --write"],
+  "sandboxes/**/*.{ts,tsx}": ["eslint", "prettier --write"],
   "test/**/*.{ts,tsx}": ["eslint", "prettier --write"]
 }

.storybook/main.js

@@ -1,10 +1,14 @@
+const path = require('path');
+
 module.exports = {
-  stories: [
-    '../stories/*.tsx'
-  ],
+  stories: ['../stories/*.tsx'],
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-controls',
     '@storybook/addon-actions',
   ],
-}
+  webpackFinal(config) {
+    config.resolve.alias['react-chartjs-2'] = path.resolve(__dirname, '../src');
+    return config;
+  },
+};

.storybook/manager.js

@@ -1,8 +1,8 @@
 import { addons } from '@storybook/addons';
 
-import { theme } from './theme'
+import { theme } from './theme';
 
 addons.setConfig({
   theme,
   panelPosition: 'right',
-})
+});

.storybook/preview.js

@@ -1,5 +1,5 @@
-import { configureActions } from '@storybook/addon-actions'
+import { configureActions } from '@storybook/addon-actions';
 
 configureActions({
   depth: 5,
-})
+});

package.json

@@ -28,7 +28,7 @@
     "build": "rollup -c & yarn emitDeclarations",
     "prepublishOnly": "yarn build",
     "start:storybook": "start-storybook -p 6006 --ci",
-    "test:lint": "eslint 'src/**/*.{ts,tsx}' 'stories/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
+    "test:lint": "eslint 'src/**/*.{ts,tsx}' 'stories/**/*.{ts,tsx}' 'sandboxes/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
     "test:unit": "jest -c jest.config.json",
     "test:build": "yarn build",
     "test:size": "size-limit",
@@ -66,6 +66,7 @@
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.150",
     "@types/react": "^17.0.28",
+    "@types/react-dom": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "browserslist": "^4.17.3",
@@ -103,7 +104,12 @@
     "webpack": "^5.58.2"
   },
   "tsd": {
-    "directory": "./test"
+    "directory": "./test",
+    "compilerOptions": {
+      "paths": {
+        "react-chartjs-2": ["./src"]
+      }
+    }
   },
   "files": [
     "dist"

sandboxes/bar/grouped/App.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  plugins: {
+    title: {
+      display: true,
+      text: 'Chart.js Bar Chart - Stacked',
+    },
+  },
+  responsive: true,
+  interaction: {
+    mode: 'index' as const,
+    intersect: false,
+  },
+  scales: {
+    x: {
+      stacked: true,
+    },
+    y: {
+      stacked: true,
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(255, 99, 132)',
+      stack: 'Stack 0',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(75, 192, 192)',
+      stack: 'Stack 0',
+    },
+    {
+      label: 'Dataset 3',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(53, 162, 235)',
+      stack: 'Stack 1',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}

sandboxes/bar/grouped/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);

sandboxes/bar/grouped/package.json

@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}

sandboxes/bar/horizontal/App.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  indexAxis: 'y' as const,
+  elements: {
+    bar: {
+      borderWidth: 2,
+    },
+  },
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'right' as const,
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Horizontal Bar Chart',
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(53, 162, 235)',
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}

sandboxes/bar/horizontal/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);

sandboxes/bar/horizontal/package.json

@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}

sandboxes/bar/stacked/App.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  plugins: {
+    title: {
+      display: true,
+      text: 'Chart.js Bar Chart - Stacked',
+    },
+  },
+  responsive: true,
+  scales: {
+    x: {
+      stacked: true,
+    },
+    y: {
+      stacked: true,
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(255, 99, 132)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(75, 192, 192)',
+    },
+    {
+      label: 'Dataset 3',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      backgroundColor: 'rgb(53, 162, 235)',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}

sandboxes/bar/stacked/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);

sandboxes/bar/stacked/package.json

@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}

sandboxes/bar/vertical/App.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import faker from 'faker';
+
+export const options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top' as const,
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Bar Chart',
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+export function App() {
+  return <Bar options={options} data={data} />;
+}

sandboxes/bar/vertical/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+render(<App />, rootElement);

sandboxes/bar/vertical/package.json

@@ -0,0 +1,16 @@
+{
+  "main": "index.tsx",
+  "dependencies": {
+    "chart.js": "^3.6.0",
+    "faker": "5.5.3",
+    "react": "17.0.2",
+    "react-chartjs-2": "^3.3.0",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.2"
+  }
+}