test: add storybook (#746)

Author: thabarbados

Diff for: .storybook/main.js

@@ -0,0 +1,14 @@
+const path = require('path')
+
+module.exports = {
+  stories: ['../stories/*.stories.(js|ts)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: '@storybook/vue',
+  webpackFinal: async config => {
+    config.resolve.alias['vue-chartjs'] = path.resolve(
+      __dirname,
+      '../src/index.js'
+    )
+    return config
+  }
+}

Diff for: .storybook/manager.js

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

Diff for: .storybook/preview.js

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

Diff for: .storybook/theme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming'
+
+export const theme = create({
+  base: 'light',
+  brandTitle: 'vue-chartjs',
+  brandUrl: 'https://github.com/apertureless/vue-chartjs'
+})

Diff for: package.json

@@ -59,7 +59,8 @@
     "prepublishOnly": "yarn run lint && yarn run test && yarn run build",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
-    "commit": "cz"
+    "commit": "cz",
+    "start:storybook": "start-storybook -p 6006"
   },
   "peerDependencies": {
     "chart.js": ">= 2.5"
@@ -73,6 +74,9 @@
     "@babel/preset-env": "^7.16.5",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
+    "@storybook/addon-actions": "^6.4.12",
+    "@storybook/addon-essentials": "^6.4.13",
+    "@storybook/vue": "^6.4.12",
     "@swc/core": "^1.2.120",
     "@swc/jest": "^0.2.15",
     "@types/chart.js": "^2.7.55",
@@ -123,7 +127,7 @@
     "vue": "2.6.14",
     "vue-hot-reload-api": "2.3.1",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^14.2.1",
+    "vue-loader": "^15.9.8",
     "vue-style-loader": "4.1.2",
     "vue-template-compiler": "2.6.14",
     "vuepress": "^0.14.4",

Diff for: stories/bar.stories.js

@@ -0,0 +1,24 @@
+import BarChart from '../sandboxes/bar/src/components/barChart.vue'
+
+export default {
+  title: 'BarChart',
+  component: BarChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BarChart },
+  template: '<BarChart />'
+})
+
+export const DefaultBar = Template.bind({})
+
+DefaultBar.args = {
+  chartId: 'bar-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/bubble.stories.js

@@ -0,0 +1,24 @@
+import BubbleChart from '../sandboxes/bubble/src/components/bubbleChart.vue'
+
+export default {
+  title: 'BubbleChart',
+  component: BubbleChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BubbleChart },
+  template: '<BubbleChart />'
+})
+
+export const DefaultBubble = Template.bind({})
+
+DefaultBubble.args = {
+  chartId: 'bubble-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/custom.stories.js

@@ -0,0 +1,24 @@
+import CustomChart from '../sandboxes/custom/src/components/customChart.vue'
+
+export default {
+  title: 'CustomChart',
+  component: CustomChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CustomChart },
+  template: '<CustomChart />'
+})
+
+export const DefaultCustom = Template.bind({})
+
+DefaultCustom.args = {
+  chartId: 'custom-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/doughnut.stories.js

@@ -0,0 +1,24 @@
+import DoughnutChart from '../sandboxes/doughnut/src/components/doughnutChart.vue'
+
+export default {
+  title: 'DoughnutChart',
+  component: DoughnutChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { DoughnutChart },
+  template: '<DoughnutChart />'
+})
+
+export const DefaultDoughnut = Template.bind({})
+
+DefaultDoughnut.args = {
+  chartId: 'doughnut-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/horizontalBar.stories.js

@@ -0,0 +1,24 @@
+import HorizontalBarChart from '../sandboxes/horizontal-bar/src/components/horizontalBarChart.vue'
+
+export default {
+  title: 'HorizontalBarChart',
+  component: HorizontalBarChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { HorizontalBarChart },
+  template: '<HorizontalBarChart />'
+})
+
+export const DefaultHorizontalBar = Template.bind({})
+
+DefaultHorizontalBar.args = {
+  chartId: 'horizontal-bar-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/line.stories.js

@@ -0,0 +1,24 @@
+import LineChart from '../sandboxes/line/src/components/lineChart.vue'
+
+export default {
+  title: 'LineChart',
+  component: LineChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LineChart },
+  template: '<LineChart />'
+})
+
+export const DefaultLine = Template.bind({})
+
+DefaultLine.args = {
+  chartId: 'line-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/pie.stories.js

@@ -0,0 +1,24 @@
+import PieChart from '../sandboxes/pie/src/components/pieChart.vue'
+
+export default {
+  title: 'PieChart',
+  component: PieChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PieChart },
+  template: '<PieChart />'
+})
+
+export const DefaultPie = Template.bind({})
+
+DefaultPie.args = {
+  chartId: 'pie-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/polarArea.stories.js

@@ -0,0 +1,24 @@
+import PolarAreaChart from '../sandboxes/polar-area/src/components/polarAreaChart.vue'
+
+export default {
+  title: 'PolarAreaChart',
+  component: PolarAreaChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PolarAreaChart },
+  template: '<PolarAreaChart />'
+})
+
+export const DefaultPolarArea = Template.bind({})
+
+DefaultPolarArea.args = {
+  chartId: 'polar-area-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/radar.stories.js

@@ -0,0 +1,24 @@
+import RadarChart from '../sandboxes/radar/src/components/radarChart.vue'
+
+export default {
+  title: 'RadarChart',
+  component: RadarChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { RadarChart },
+  template: '<RadarChart />'
+})
+
+export const DefaultRadar = Template.bind({})
+
+DefaultRadar.args = {
+  chartId: 'radar-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/reactive.stories.js

@@ -0,0 +1,24 @@
+import ReactiveChart from '../sandboxes/reactive/src/components/reactiveChart.vue'
+
+export default {
+  title: 'ReactiveChart',
+  component: ReactiveChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ReactiveChart },
+  template: '<ReactiveChart />'
+})
+
+export const DefaultReactive = Template.bind({})
+
+DefaultReactive.args = {
+  chartId: 'reactive-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}

Diff for: stories/reactiveProp.stories.js

@@ -0,0 +1,77 @@
+import ReactivePropChart from '../sandboxes/reactive-prop/src/components/reactivePropChart.vue'
+
+export default {
+  title: 'ReactivePropChart',
+  component: ReactivePropChart,
+  parameters: {
+    layout: 'centered'
+  }
+}
+
+const Template = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ReactivePropChart },
+  template: '<ReactivePropChart :chart-data="dataPoints" />',
+  data() {
+    return {
+      dataPoints: {}
+    }
+  },
+  mounted() {
+    setInterval(() => {
+      this.fillData()
+    }, 2000)
+  },
+  methods: {
+    getRandomInt() {
+      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+    },
+    fillData() {
+      this.dataPoints = {
+        labels: [
+          'January' + this.getRandomInt(),
+          'February',
+          'March',
+          'April',
+          'May',
+          'June',
+          'July',
+          'August',
+          'September',
+          'October',
+          'November',
+          'December'
+        ],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt(),
+              this.getRandomInt()
+            ]
+          }
+        ]
+      }
+    }
+  }
+})
+
+export const DefaultReactiveProp = Template.bind({})
+
+DefaultReactiveProp.args = {
+  chartId: 'reactive-prop-chart',
+  width: 400,
+  height: 400,
+  plugins: []
+}