chore: Setup storybook for Vue components (#2139)

.storybook/main.js

@@ -0,0 +1,45 @@
+const path = require('path');
+const resolve = require('../config/webpack/resolve');
+
+// Chatwoot's webpack.config.js
+process.env.NODE_ENV = 'development';
+const custom = require('../config/webpack/environment');
+
+module.exports = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../app/javascript/dashboard/components/ui/stories/**/*.stories.@(js|jsx|ts|tsx)',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        vueDocgenOptions: {
+          alias: {
+            '@': path.resolve(__dirname, '../'),
+          },
+        },
+      },
+    },
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+  ],
+  webpackFinal: config => {
+    const newConfig = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        modules: custom.resolvedModules.map(i => i.value),
+      },
+    };
+
+    newConfig.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../app/javascript'),
+    });
+
+    return newConfig;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../app/javascript/dashboard/assets/scss/storybook.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

app/javascript/dashboard/assets/scss/storybook.scss

@@ -0,0 +1,26 @@
+@import 'shared/assets/fonts/inter';
+@import 'shared/assets/stylesheets/colors';
+@import 'shared/assets/stylesheets/spacing';
+@import 'shared/assets/stylesheets/font-size';
+@import 'shared/assets/stylesheets/font-weights';
+@import 'shared/assets/stylesheets/shadows';
+@import 'shared/assets/stylesheets/border-radius';
+@import 'variables';
+
+@import '~spinkit/scss/spinners/7-three-bounce';
+@import '~shared/assets/stylesheets/ionicons';
+
+@import 'mixins';
+@import 'foundation-settings';
+@import 'helper-classes';
+@import 'foundation-sites/scss/foundation';
+@import '~bourbon/core/bourbon';
+
+@include foundation-everything($flex: true);
+
+@import 'typography';
+@import 'layout';
+@import 'animations';
+
+@import 'foundation-custom';
+@import 'widgets/buttons';

app/javascript/dashboard/components/ui/stories/Button.stories.js

@@ -0,0 +1,50 @@
+import { action } from '@storybook/addon-actions';
+import WootButton from '../WootButton.vue';
+
+export default {
+  title: 'Components/Button',
+  component: WootButton,
+  argTypes: {
+    colorScheme: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['tiny', 'small', 'medium', 'large', 'expanded'],
+      },
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['hollow', 'clear'],
+      },
+    },
+    isLoading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    isDisabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { WootButton },
+  template:
+    '<woot-button v-bind="$props" @click="onClick">{{label}}</woot-button>',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'New message',
+  onClick: action('Hello'),
+};

package.json

@@ -9,88 +9,97 @@
     "test:watch": "jest -w 1 --watch --no-cache",
     "test:coverage": "jest -w 1 --no-cache --collectCoverage",
     "webpacker-start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
-    "start:dev": "foreman start -f ./Procfile.dev"
+    "start:dev": "foreman start -f ./Procfile.dev",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@chatwoot/prosemirror-schema": "https://github.com/chatwoot/prosemirror-schema.git#7e8acadd10d7b932c0dc0bd0a18f804434f83517",
-    "@rails/actioncable": "^6.0.0",
+    "@rails/actioncable": "6.1.3",
-    "@rails/webpacker": "^5.2.0",
+    "@rails/webpacker": "5.3.0",
     "@sentry/vue": "^5.30.0",
     "axios": "^0.21.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "bourbon": "^6.0.0",
     "chart.js": "~2.5.0",
-    "copy-text-to-clipboard": "^2.1.1",
+    "copy-text-to-clipboard": "2.2.0",
-    "core-js": "3",
+    "core-js": "3.11.0",
     "country-code-emoji": "^1.0.0",
-    "date-fns": "^2.16.1",
+    "date-fns": "2.21.1",
-    "dompurify": "^2.2.6",
+    "dompurify": "2.2.7",
     "dotenv": "^8.0.0",
     "foundation-sites": "~6.5.3",
     "highlight.js": "~10.4.1",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",
     "lodash.groupby": "^4.6.0",
-    "marked": "^2.0.0",
+    "marked": "2.0.3",
     "md5": "^2.3.0",
-    "prosemirror-markdown": "^1.5.0",
+    "prosemirror-markdown": "1.5.1",
-    "prosemirror-state": "^1.3.3",
+    "prosemirror-state": "1.3.4",
-    "prosemirror-view": "^1.16.5",
+    "prosemirror-view": "1.18.4",
     "query-string": "5",
-    "semver": "^7.3.4",
+    "semver": "7.3.5",
     "spinkit": "~1.2.5",
     "tailwindcss": "^1.9.6",
     "tween.js": "~16.6.0",
     "url-loader": "^2.0.0",
     "v-tooltip": "~2.1.3",
-    "vue": "^2.6.0",
+    "vue": "2.6.12",
     "vue-axios": "~1.2.2",
-    "vue-chartjs": "^3.4.2",
+    "vue-chartjs": "3.5.1",
     "vue-clickaway": "~2.1.0",
-    "vue-color": "^2.7.1",
+    "vue-color": "2.8.1",
-    "vue-easytable": "^2.1.2",
+    "vue-easytable": "2.5.1",
-    "vue-i18n": "^8.22.1",
+    "vue-i18n": "8.24.3",
-    "vue-loader": "^15.7.0",
+    "vue-loader": "15.9.6",
     "vue-multiselect": "~2.1.6",
     "vue-router": "~2.2.0",
-    "vue-template-compiler": "^2.6.10",
+    "vue-template-compiler": "2.6.12",
-    "vue-upload-component": "^2.8.20",
+    "vue-upload-component": "2.8.22",
-    "vuelidate": "~0.7.5",
+    "vuelidate": "0.7.6",
     "vuex": "~2.1.1",
     "vuex-router-sync": "~4.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@babel/core": "7.13.16",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-env": "7.13.5",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-docs": "^6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addons": "6.2.9",
+    "@storybook/vue": "6.2.9",
+    "@vue/test-utils": "1.1.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^25.3.0",
+    "babel-jest": "25.5.1",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "8.2.2",
-    "cypress": "^4.10.0",
+    "babel-preset-vue": "^2.0.2",
+    "cypress": "4.12.1",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-config-airbnb-base": "14.2.1",
     "eslint-config-prettier": "^4.0.0",
     "eslint-import-resolver-webpack": "^0.11.1",
-    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-babel": "5.3.1",
-    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-html": "6.1.2",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-vue": "^6.2.2",
     "expect-more-jest": "^2.4.2",
-    "husky": ">=1",
+    "husky": "6.0.0",
-    "jest": "^26.4.2",
+    "jest": "26.6.3",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
-    "lint-staged": ">=8",
+    "lint-staged": "10.5.4",
     "prettier": "^1.16.4",
     "rimraf": "^3.0.0",
-    "vue-jest": "^3.0.5",
+    "vue-jest": "3.0.7",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "3.11.2"
   },
   "engines": {
     "node": ">=10.x",

stories/Sections/Introduction.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Chatwoot/Introduction" />
+
+# Welcome to Chatwoot styleguide
+
+Chatwoot as an opensource project is growing every day. New features are getting added in every release. The number of contributors who are actively contributing to the project is also increasing. It has become a necessity to create a standard guideline to make the contribution experience easier. This style guide resides as a central repository for the best practices we follow, a set of recommended approaches and the design guidelines/components we use.
+
+Anyone willing to contribute to Chatwoot is encouraged to read this style guide. This style guide is also open source. If you feel that there are rooms for improvement, feel free to raise an issue or a pull request to the repository.
+
+Through this style guide we intent to create a document which can be used across the repositories in the organization and build a design system for the project.
+
+The document would split into 3 major sections
+
+- **Design**: This section would contain the design choices and the documentation for the components built using these design choices.
+
+- **Frontend**: Our frontend is built on [Vue.js](https://vuejs.org/). We follow [Airbnb guidelines for Javascript](https://github.com/airbnb/javascript) and there are a couple of choices we made in structuring the code. All those would be defined in this section.
+
+- **Backend**: Our backend is written on [Ruby on Rails](https://rubyonrails.org/). This section would cover the architectural patterns we have been following so far.