Unverified Commit e2f1d067 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub
Browse files

chore(dev): Update Storybook, linters, bundlers and test runners

parent 6dbb6096
/node_modules
/dist
!/.eslintrc.js
!/.storybook
module.exports = {
extends: ['@rocket.chat/eslint-config'],
extends: [
'@rocket.chat/eslint-config',
],
plugins: ['react', 'react-hooks'],
parser: 'babel-eslint',
rules: {
indent: ['error', 2],
'generator-star-spacing': ['error', 'before'],
'import/order': ['error', {
'newlines-between': 'always',
groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
alphabetize: {
order: 'asc',
},
}],
indent: ['error', 2, {
SwitchCase: 1,
}],
'jsx-quotes': ['error', 'prefer-single'],
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/jsx-no-undef': 'error',
'react/jsx-fragments': ['error', 'syntax'],
'react/react-in-jsx-scope': 'error',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
},
settings: {
'import/resolver': {
node: {
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
],
},
},
react: {
version: 'detect',
},
......
const webpack = require('webpack');
module.exports = {
addons: [
'@storybook/addon-actions/register',
'@storybook/addon-backgrounds/register',
'@storybook/addon-docs/register',
'@storybook/addon-knobs/register',
'@storybook/addon-viewport/register',
'@storybook/addon-actions',
'@storybook/addon-backgrounds',
'@storybook/addon-docs',
'@storybook/addon-knobs',
'@storybook/addon-viewport',
],
stories: [
'../src/**/stories.{mdx,js}',
'../src/**/*.stories.{mdx,js}',
'../src/**/stories/index.{mdx,js}',
],
webpackFinal: (config) => {
config.plugins.push(new webpack.EnvironmentPlugin(['NODE_ENV']));
return config;
},
};
import colors from '@rocket.chat/fuselage-tokens/colors';
import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';
import manifest from '../package.json';
import logo from './logo.svg';
......
import breakpointTokens from '@rocket.chat/fuselage-tokens/breakpoints';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { addParameters } from '@storybook/react';
import 'normalize.css/normalize.css';
import '@rocket.chat/icons/dist/rocketchat.css';
import '@rocket.chat/fuselage-polyfills';
import breakpoints from '@rocket.chat/fuselage-tokens/breakpoints';
addParameters({
docs: {
......@@ -14,7 +14,7 @@ addParameters({
cellSize: 4,
},
viewport: {
viewports: Object.entries(breakpoints).reduce((obj, [name, { minViewportWidth }]) => ({
viewports: Object.entries(breakpointTokens).reduce((obj, [name, { minViewportWidth }]) => ({
...obj,
[name]: {
name,
......@@ -22,7 +22,7 @@ addParameters({
width: `${ minViewportWidth }px`,
height: '90%',
},
type: 'desktop'
type: 'desktop',
},
}), {}),
},
......
'use strict';
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
const { EnvironmentPlugin } = require('webpack');
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.mdx$/,
use: [
'babel-loader',
{
loader: '@mdx-js/loader',
options: {
compilers: [createCompiler({})],
},
},
],
});
config.module.rules.push({
test: /(stories|story)\.js$/,
loader: require.resolve('@storybook/source-loader'),
exclude: [/node_modules/],
enforce: 'pre',
});
config.plugins.push(new EnvironmentPlugin(['NODE_ENV']));
return config;
};
......@@ -24,47 +24,64 @@
"access": "public"
},
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 0",
"lint": "eslint --ext js,mdx src",
"clean": "rimraf dist",
"start": "webpack --watch --mode development",
"build:prod": "webpack --mode production",
"build:dev": "webpack --mode development",
"build": "run-s clean build:prod build:dev",
"lint": "eslint src",
"lint-staged": "lint-staged",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"build:prod": "webpack --mode production",
"build:dev": "webpack --mode development",
"build": "run-p build:prod build:dev"
"test": "echo \"Error: run tests from root\" && exit 0"
},
"peerDependencies": {
"@rocket.chat/fuselage": "^0.13.2",
"@rocket.chat/fuselage-hooks": "^0.13.2",
"@rocket.chat/icons": "^0.13.2",
"@rocket.chat/ui-kit": "^0.13.1",
"@rocket.chat/fuselage": "*",
"@rocket.chat/fuselage-hooks": "*",
"@rocket.chat/icons": "*",
"@rocket.chat/ui-kit": "*",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/core": "^7.11.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@rocket.chat/apps-engine": "^1.16.0",
"@rocket.chat/apps-engine": "^1.17.0",
"@rocket.chat/eslint-config": "^0.4.0",
"@rocket.chat/fuselage": "^0.14.1",
"@rocket.chat/fuselage-hooks": "^0.14.1",
"@rocket.chat/icons": "^0.14.1",
"@rocket.chat/ui-kit": "^0.14.1",
"@storybook/addon-actions": "^6.0.10",
"@storybook/addon-backgrounds": "^6.0.10",
"@storybook/addon-docs": "^6.0.10",
"@storybook/addon-knobs": "^6.0.10",
"@storybook/addon-viewport": "^6.0.10",
"@storybook/addons": "^6.0.10",
"@storybook/react": "^6.0.10",
"@storybook/source-loader": "^6.0.10",
"@storybook/theming": "^6.0.10",
"babel-loader": "^8.0.6",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-backgrounds": "^6.0.21",
"@storybook/addon-docs": "^6.0.21",
"@storybook/addon-knobs": "^6.0.21",
"@storybook/addon-viewport": "^6.0.21",
"@storybook/addons": "^6.0.21",
"@storybook/react": "^6.0.21",
"@storybook/source-loader": "^6.0.21",
"@storybook/theming": "^6.0.21",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"eslint": "^7.7.0",
"eslint-plugin-mdx": "^1.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-mdx": "^1.8.2",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"normalize.css": "^8.0.1",
"npm-run-all": "^4.1.5",
"react": "^16.13.1",
"react-dom": "^16.13.1"
"react-dom": "^16.13.1",
"rimraf": "^3.0.2",
"webpack": "^4.44.1",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.12"
},
"gitHead": "f8467b8ffb6f90d91b46fbcdd5dca169235916a4"
"gitHead": "f8467b8ffb6f90d91b46fbcdd5dca169235916a4",
"dependencies": {
"@rocket.chat/fuselage-polyfills": "^0.14.1"
}
}
import React, { useState } from 'react';
import {
Button,
Margins,
......@@ -8,15 +7,16 @@ import {
import {
BLOCK_CONTEXT,
} from '@rocket.chat/ui-kit';
import React, { useState } from 'react';
import { Block } from './Block';
const getStyle = ({ type }) => {
switch (type) {
case 'button':// ELEMENT_TYPES.BUTTON :
return 'auto';
default:
return '45%';
case 'button':// ELEMENT_TYPES.BUTTON :
return 'auto';
default:
return '45%';
}
};
......
import React from 'react';
import {
Margins,
} from '@rocket.chat/fuselage';
import React from 'react';
export const Block = ({ children, blockEnd = 'x16' }) => (
<Margins blockEnd={blockEnd}>{children}</Margins>
......
import React from 'react';
import {
Modal,
ButtonGroup,
Button,
AnimatedVisibility,
} from '@rocket.chat/fuselage';
import React from 'react';
const thumb = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
export const Demo = ({ children, visible }) => <AnimatedVisibility visibility={visible ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN}><Modal open={visible}>
......
import React, {
useState,
useEffect,
} from 'react';
import {
Box,
} from '@rocket.chat/fuselage';
import {
BLOCK_CONTEXT,
} from '@rocket.chat/ui-kit';
import React, {
useState,
useEffect,
} from 'react';
import { Block } from './Block';
......@@ -85,10 +85,10 @@ export const Media = ({ element }) => {
const genericImage = (element, context) => {
switch (context) {
case BLOCK_CONTEXT.SECTION:
return <Thumb element={element} />;
case BLOCK_CONTEXT.CONTEXT:
return <ThumbContext element={element}/>;
case BLOCK_CONTEXT.SECTION:
return <Thumb element={element} />;
case BLOCK_CONTEXT.CONTEXT:
return <ThumbContext element={element}/>;
}
};
......
import React from 'react';
import {
Field,
TextAreaInput,
......@@ -7,6 +6,7 @@ import {
import {
BLOCK_CONTEXT,
} from '@rocket.chat/ui-kit';
import React from 'react';
import { Block } from './Block';
import { useBlockContext } from './hooks';
......
import React, { useRef, useCallback } from 'react';
import {
Button,
PositionAnimated,
......@@ -6,6 +5,7 @@ import {
Icon,
useCursor,
} from '@rocket.chat/fuselage';
import React, { useRef, useCallback } from 'react';
import { useBlockContext } from './hooks';
......
import React from 'react';
import {
Box,
Flex,
......@@ -7,6 +6,7 @@ import {
import {
BLOCK_CONTEXT,
} from '@rocket.chat/ui-kit';
import React from 'react';
import { Block } from './Block';
......
import React from 'react';
import {
SelectFiltered,
MultiSelectFiltered,
} from '@rocket.chat/fuselage';
import React from 'react';
import { useBlockContext } from './hooks';
......
import React from 'react';
import {
Button,
Throbber,
} from '@rocket.chat/fuselage';
import React from 'react';
import { useBlockContext, getStyle } from './hooks';
......
import React, { useContext, useMemo, useState } from 'react';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import {
BLOCK_CONTEXT,
} from '@rocket.chat/ui-kit';
import React, { useContext, useMemo, useState } from 'react';
export const defaultContext = {
action: (...args) => console.log(JSON.stringify(args)),
......@@ -45,10 +45,10 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }, cont
export const getStyle = (style) => {
switch (style) {
case 'primary':
case 'danger':
return {
[style]: true,
};
case 'primary':
case 'danger':
return {
[style]: true,
};
}
};
import React from 'react';
import {
Divider,
Margins,
......@@ -14,14 +13,15 @@ import {
UiKitParserModal,
UiKitParserText,
} from '@rocket.chat/ui-kit';
import React from 'react';
import { Section as SectionLayoutBlock } from './Section';
import { Actions as ActionsLayoutBlock } from './Actions';
import { Input as InputLayoutBlock, PlainInput } from './Input';
import { MessageImage, ModalImage } from './Image';
import { StaticSelect, MultiStaticSelect } from './StaticSelect';
import { Block } from './Block';
import { MessageImage, ModalImage } from './Image';
import { Input as InputLayoutBlock, PlainInput } from './Input';
import { Overflow } from './Overflow';
import { Section as SectionLayoutBlock } from './Section';
import { StaticSelect, MultiStaticSelect } from './StaticSelect';
import { UIKitButton } from './UIKitButton';
import { useBlockContext } from './hooks';
......
module.exports = {
extends: ['@rocket.chat/eslint-config'],
extends: [
'@rocket.chat/eslint-config',
],
plugins: ['react', 'react-hooks'],
parser: 'babel-eslint',
rules: {
indent: ['error', 2],
'generator-star-spacing': ['error', 'before'],
'import/order': ['error', {
'newlines-between': 'always',
groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
alphabetize: {
order: 'asc',
},
}],
indent: ['error', 2, {
SwitchCase: 1,
}],
'jsx-quotes': ['error', 'prefer-single'],
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/jsx-no-undef': 'error',
'react/jsx-fragments': ['error', 'syntax'],
'react/react-in-jsx-scope': 'error',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
},
settings: {
'import/resolver': {
node: {
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
],
},
},
react: {
version: 'detect',
},
......@@ -24,4 +43,14 @@ module.exports = {
env: {
jest: true,
},
overrides: [
{
files: ['*.mdx'],
extends: ['plugin:mdx/overrides'],
rules: {
semi: 'off',
'new-cap': 'off',
},
},
],
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment