Commit f0bfefe8 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by Renato Becker
Browse files

[CHORE] Code base maintenance (#255)

* Use light theme on Storybook

* Update Storybook

* Update dependencies

* Update ESLint rules

* Add stylelint
parent 214a323f
/build/*
/src/i18n/index.js
{
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2017,
"ecmaFeatures": {
"experimentalObjectRestSpread" : true
}
"extends": [
"@rocket.chat/eslint-config",
],
"plugins": ["react"],
"parser": "babel-eslint",
"globals": {
"I18n": true,
},
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true,
"jquery": true
"jest": true,
},
"rules": {
"no-multi-spaces": 2,
"no-eval": 2,
"no-extend-native": 2,
"no-multi-str": 2,
"no-use-before-define": 2,
"no-const-assign": 2,
"no-cond-assign": 2,
"no-constant-condition": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-delete-var": 2,
"no-dupe-keys": 2,
"no-dupe-args": 2,
"no-dupe-class-members": 2,
"no-duplicate-case": 2,
"no-empty": 2,
"no-empty-character-class": 2,
"no-ex-assign": 2,
"no-extra-boolean-cast": 2,
"no-extra-semi": 2,
"no-fallthrough": 2,
"no-func-assign": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-mixed-operators": [2, {
"groups": [
["%", "**"],
["%", "+"],
["%", "-"],
["%", "*"],
["%", "/"],
["**", "+"],
["**", "-"],
["**", "*"],
["**", "/"],
["&", "|", "^", "~", "<<", ">>", ">>>"],
["==", "!=", "===", "!==", ">", ">=", "<", "<="],
["&&", "||"],
["in", "instanceof"]
],
"allowSamePrecedence": false
}],
"no-mixed-spaces-and-tabs": 2,
"no-sparse-arrays": 2,
"no-negated-in-lhs": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-undef": 2,
"no-unreachable": 2,
"no-unused-vars": [2, {
"vars": "all",
"args": "after-used",
"varsIgnorePattern": "^h$"
}],
"no-void": 2,
"no-var": 2,
"no-multiple-empty-lines": [2, { "max": 2 }],
"no-nested-ternary": 2,
"prefer-rest-params": 2,
"array-callback-return": 2,
"prefer-destructuring": [2, {
"VariableDeclarator": {
"array": false,
"object": true
},
"AssignmentExpression": {
"array": false,
"object": false
}
}, {
"enforceForRenamedProperties": false
"import/order": ["error", {
"newlines-between": "always",
"groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
}],
"no-duplicate-imports": 2,
"arrow-parens": [2, "always"],
"quote-props": [2, "as-needed"],
"no-array-constructor": 2,
"arrow-spacing": 2,
"arrow-body-style": [2, "as-needed"],
"no-confusing-arrow": [2, { "allowParens": true }],
"dot-notation": 2,
"no-unneeded-ternary": 2,
"spaced-comment": 2,
"space-infix-ops": 2,
"array-bracket-spacing": [2, "never"],
"object-curly-spacing": [2, "always"],
"one-var": [2, "never"],
"no-lonely-if": 2,
"no-trailing-spaces": 2,
"complexity": [1, 31],
"space-in-parens": [2, "never"],
"space-before-function-paren": [2, "never"],
"space-before-blocks": [2, "always"],
"indent": [2, "tab", {"SwitchCase": 1}],
"eol-last": [2, "always"],
"comma-dangle": [2, "always-multiline"],
"keyword-spacing": 2,
"block-spacing": 2,
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
"computed-property-spacing": 2,
"comma-spacing": 2,
"comma-style": 2,
"guard-for-in": 2,
"wrap-iife": 2,
"block-scoped-var": 2,
"curly": [2, "all"],
"eqeqeq": [2, "allow-null"],
"new-cap": [2, {
"capIsNewExceptions": ["Match.Optional", "Match.Maybe", "Match.OneOf", "Match.Where", "Match.ObjectIncluding", "Push.Configure", "SHA256"]
}],
"use-isnan": 2,
"valid-typeof": 2,
"linebreak-style": [2, "unix"],
"prefer-template": 2,
"template-curly-spacing": [2, "always"],
"quotes": [2, "single"],
"semi": [2, "always"],
"prefer-const": 2,
"object-shorthand": 2
},
"globals": {
"I18n": true
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/jsx-no-undef": "error",
"react/jsx-fragments": ["error", "syntax"],
},
"extends": "eslint-config-synacor"
}
import { addDecorator, configure, addParameters } from '@storybook/react';
import { addDecorator, addParameters, configure } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { withOptions } from '@storybook/addon-options';
import { create } from '@storybook/theming';
......@@ -7,7 +7,7 @@ import { create } from '@storybook/theming';
addParameters({
options: {
theme: create({
base: 'dark',
base: 'light',
brandTitle: 'Rocket.Chat Livechat',
brandImage: 'https://rocket.chat/images/default/logo--dark.svg',
brandUrl: 'https://github.com/RocketChat/Rocket.Chat.Livechat',
......@@ -15,13 +15,6 @@ addParameters({
hierarchySeparator: /\//,
hierarchyRootSeparator: /\|/,
},
backgrounds: [
{
name: 'white',
value: 'white',
default: true,
},
],
});
addDecorator(withA11y);
......
......@@ -3,6 +3,7 @@ const webpackOverride = require('../webpackOverride.config');
module.exports = ({ config, mode }) => {
delete config.resolve.alias['core-js'];
config = webpackOverride(config, mode);
config.resolve.alias = Object.assign(
......@@ -40,6 +41,7 @@ module.exports = ({ config, mode }) => {
config.plugins.push(
new ProvidePlugin({
h: ['preact', 'h'],
Component: ['preact', 'Component'],
React: ['preact-compat'],
})
......
{
"plugins": [
"stylelint-order"
],
"rules": {
"at-rule-empty-line-before": [ "always", {
except: [
"blockless-after-same-name-blockless",
"first-nested",
],
ignore: ["after-comment"],
} ],
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always",
"at-rule-semicolon-newline-after": "always",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always",
"block-closing-brace-space-before": "never-single-line",
"block-no-empty": true,
"block-opening-brace-newline-after": "always",
"block-opening-brace-space-after": "never-single-line",
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-hex-length": "long",
"color-no-invalid-hex": true,
"comment-empty-line-before": [ "always", {
except: ["first-nested"],
ignore: ["stylelint-commands"],
} ],
"comment-no-empty": true,
"comment-whitespace-inside": "always",
"custom-property-empty-line-before": "never",
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-block-no-duplicate-properties": [ true, {
ignore: ["consecutive-duplicates-with-different-values"],
} ],
"declaration-block-no-redundant-longhand-properties": true,
"declaration-block-no-shorthand-property-overrides": true,
"declaration-block-semicolon-newline-after": "always",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-block-semicolon-space-before": "never",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-trailing-semicolon": "always",
"declaration-colon-newline-after": "always-multi-line",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"font-family-no-duplicate-names": true,
"function-comma-newline-after": "always-multi-line",
"function-comma-space-after": "always-single-line",
"function-comma-space-before": "never",
"function-linear-gradient-no-nonstandard-direction": true,
"function-max-empty-lines": 0,
"function-name-case": "lower",
"function-parentheses-newline-inside": "always-multi-line",
"function-parentheses-space-inside": "never-single-line",
"function-whitespace-after": "always",
"indentation": "tab",
"keyframe-declaration-no-important": true,
"length-zero-no-unit": true,
"max-empty-lines": 1,
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-case": "lower",
"media-feature-name-no-unknown": true,
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always",
"media-query-list-comma-newline-after": "always-multi-line",
"media-query-list-comma-space-after": "always-single-line",
"media-query-list-comma-space-before": "never",
"no-duplicate-selectors": true,
"no-empty-source": true,
"no-eol-whitespace": true,
"no-extra-semicolons": true,
"no-missing-end-of-source-newline": true,
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"property-case": "lower",
"property-no-unknown": true,
"rule-empty-line-before": [ "always", {
except: ["first-nested"],
ignore: ["after-comment"],
} ],
"selector-attribute-brackets-space-inside": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-operator-space-before": "never",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-descendant-combinator-no-non-space": true,
"selector-list-comma-newline-after": "always",
"selector-list-comma-space-before": "never",
"selector-max-empty-lines": 0,
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-no-unknown": [true, {
"ignorePseudoClasses": ["global"]
}],
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-colon-notation": "double",
"selector-pseudo-element-no-unknown": true,
"selector-type-case": "lower",
"selector-type-no-unknown": true,
"shorthand-property-no-redundant-values": true,
"string-no-newline": true,
"unit-case": "lower",
"unit-no-unknown": true,
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",
"value-list-max-empty-lines": 0,
"order/properties-order": [
[
{
"emptyLineBefore": "always",
"order": "strict",
"properties": [
"position",
"z-index",
"top",
"right",
"bottom",
"left"
]
},
{
"emptyLineBefore": "always",
"order": "strict",
"properties": [
"display",
"visibility",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"zoom",
"flex-direction",
"flex-order",
"flex-pack",
"flex-align",
"flex"
]
},
{
"emptyLineBefore": "always",
"order": "strict",
"properties": [
"box-sizing",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
{
"emptyLineBefore": "always",
"order": "strict",
"properties": [
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image"
]
},
{
"emptyLineBefore": "always",
"order": "strict",
"properties": [
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"text-align",
"text-align-last",
"vertical-align",
"white-space",
"text-decoration",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-indent",
"text-justify",
"text-transform",
"letter-spacing",
"word-spacing",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"word-wrap",
"word-break",
"tab-size",
"hyphens",
"pointer-events"
]
},
{
"emptyLineBefore": "always",
"order": "strict",
"properties": [
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"color",
"border",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-size",
"box-decoration-break",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.gradient",
"text-shadow"
]
},
{
"emptyLineBefore": "always",
"order": "strict",
"properties": [
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"line-height"
]
}
],
{ unspecified: "bottomAlphabetical" }
]
}
}
module.exports = {
presets: ['preact-cli/babel'],
};
......@@ -14,7 +14,9 @@
"build": "run-s build:app build:widget build:pack",
"serve": "preact build --no-prerender --optimize-minimize && preact serve",
"dev": "preact watch",
"lint": "eslint src",
"lint": "run-s eslint stylelint",
"eslint": "eslint src",
"stylelint": "stylelint 'src/**/*.scss'",
"test": "jest ./tests",
"coverage": "jest --coverage",
"storybook": "start-storybook -p 9001 -c .storybook",
......@@ -23,20 +25,18 @@
"bundle-analyzer": "webpack-bundle-analyzer build/stats.json",
"release": "gh-release -c master --assets build.tar.gz"
},
"eslintIgnore": [
"build/*"
],
"devDependencies": {
"@storybook/addon-a11y": "5.0.1",
"@storybook/addon-actions": "^5.0.1",
"@storybook/addon-backgrounds": "^5.0.3",
"@storybook/addon-centered": "^5.0.1",
"@storybook/addon-knobs": "^5.0.1",
"@storybook/addon-options": "^5.0.1",
"@storybook/addon-viewport": "^5.0.1",
"@storybook/react": "^5.0.1",
"@storybook/storybook-deployer": "^2.3.0",
"@storybook/theming": "^5.0.1",
"@rocket.chat/eslint-config": "^0.3.0",
"@storybook/addon-a11y": "^5.1.9",
"@storybook/addon-actions": "^5.1.9",
"@storybook/addon-backgrounds": "^5.1.9",
"@storybook/addon-centered": "^5.1.9",
"@storybook/addon-knobs": "^5.1.9",
"@storybook/addon-options": "^5.1.9",
"@storybook/addon-viewport": "^5.1.9",
"@storybook/react": "^5.1.9",
"@storybook/storybook-deployer": "^2.8.1",
"@storybook/theming": "^5.1.9",
"create-react-ref": "^0.1.0",
"css-loader": "^2.1.0",
"desvg-loader": "^0.1.0",
......@@ -57,6 +57,8 @@
"prompts": "^2.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylelint": "^10.1.0",
"stylelint-order": "^3.0.0",
"svg-loader": "0.0.2",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.2.1"
......
{
"presets": [
["preact-cli/babel", { "modules": "commonjs" }]
]
}
\ No newline at end of file
import queryString from 'query-string';
import LivechatClient from '@rocket.chat/sdk/lib/clients/Livechat';
const host = (
window.SERVER_URL ||
queryString.parse(window.location.search).serverUrl ||
(process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : null)
);
const host = window.SERVER_URL
|| queryString.parse(window.location.search).serverUrl
|| (process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : null);
const useSsl = host && host.match(/^https:/) !== null;
export const Livechat = new LivechatClient({ host, protocol: 'ddp', useSsl });
import { Component } from 'preact';
import { createClassName } from '../helpers';
import CloseIcon from '../../icons/close.svg';