KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Setup storybook for Vue components (#2139)

Browse source
This commit is contained in:
Nithin David Thomas 2021-04-29 22:12:06 +05:30 committed by GitHub
parent 979d4fe76b
commit 3afc9b5f5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 6739 additions and 2595 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
.storybook/main.js Normal file
View file

@ -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;
},
};

11
.storybook/preview.js Normal file
View file

@ -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$/,
},
},
};

26
app/javascript/dashboard/assets/scss/storybook.scss Normal file
View file

@ -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';

50
app/javascript/dashboard/components/ui/stories/Button.stories.js Normal file
View file

@ -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'),
};

87
package.json
View file

@ -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/webpacker": "^5.2.0",
"@rails/actioncable": "6.1.3",
"@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",
"core-js": "3",
"copy-text-to-clipboard": "2.2.0",
"core-js": "3.11.0",
"country-code-emoji": "^1.0.0",
"date-fns": "^2.16.1",
"dompurify": "^2.2.6",
"date-fns": "2.21.1",
"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-state": "^1.3.3",
"prosemirror-view": "^1.16.5",
"prosemirror-markdown": "1.5.1",
"prosemirror-state": "1.3.4",
"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-easytable": "^2.1.2",
"vue-i18n": "^8.22.1",
"vue-loader": "^15.7.0",
"vue-color": "2.8.1",
"vue-easytable": "2.5.1",
"vue-i18n": "8.24.3",
"vue-loader": "15.9.6",
"vue-multiselect": "~2.1.6",
"vue-router": "~2.2.0",
"vue-template-compiler": "^2.6.10",
"vue-upload-component": "^2.8.20",
"vuelidate": "~0.7.5",
"vue-template-compiler": "2.6.12",
"vue-upload-component": "2.8.22",
"vuelidate": "0.7.6",
"vuex": "~2.1.1",
"vuex-router-sync": "~4.1.2"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"@vue/test-utils": "^1.0.0-beta.29",
"@babel/core": "7.13.16",
"@babel/plugin-proposal-class-properties": "7.13.0",
"@babel/preset-env": "7.13.5",
"@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-loader": "^8.1.0",
"cypress": "^4.10.0",
"babel-jest": "25.5.1",
"babel-loader": "8.2.2",
"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-html": "^6.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-babel": "5.3.1",
"eslint-plugin-html": "6.1.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "3.4.0",
"eslint-plugin-vue": "^6.2.2",
"expect-more-jest": "^2.4.2",
"husky": ">=1",
"jest": "^26.4.2",
"husky": "6.0.0",
"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",
"webpack-dev-server": "^3.11.0"
"vue-jest": "3.0.7",
"webpack-dev-server": "3.11.2"
},
"engines": {
"node": ">=10.x",

19
stories/Sections/Introduction.stories.mdx Normal file
View file

@ -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.

9096
yarn.lock
View file

File diff suppressed because it is too large Load diff