Unverified Commit 65454520 authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files

Add TypeScript support

parent 7ccce9c7
module.exports = {
extends: [
'@rocket.chat/eslint-config',
'prettier',
],
extends: ['@rocket.chat/eslint-config', 'prettier'],
plugins: ['react', 'react-hooks', 'prettier'],
parser: '@babel/eslint-parser',
rules: {
'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,
}],
'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',
......@@ -30,15 +39,10 @@ module.exports = {
settings: {
'import/resolver': {
node: {
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
react: {
'react': {
version: 'detect',
},
},
......@@ -53,9 +57,87 @@ module.exports = {
parser: '@babel/eslint-parser',
},
rules: {
semi: 'off',
'semi': 'off',
'new-cap': 'off',
},
},
{
files: ['**/*.ts', '**/*.tsx'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'@rocket.chat/eslint-config',
],
parser: '@typescript-eslint/parser',
parserOptions: {
sourceType: 'module',
ecmaVersion: 2018,
warnOnUnsupportedTypeScriptVersion: false,
ecmaFeatures: {
experimentalObjectRestSpread: true,
legacyDecorators: true,
},
},
plugins: ['react', 'react-hooks', 'prettier', '@typescript-eslint'],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/func-call-spacing': 'error',
'@typescript-eslint/indent': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-extra-parens': 'off',
'@typescript-eslint/no-redeclare': ['error'],
'@typescript-eslint/no-use-before-define': ['error'],
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': [
'warn',
{
allowExpressions: true,
},
],
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars-experimental': 'warn',
'func-call-spacing': 'off',
'indent': 'off',
'import/order': [
'error',
{
'newlines-between': 'always',
'groups': [
'builtin',
'external',
'internal',
['parent', 'sibling', 'index'],
],
'alphabetize': {
order: 'asc',
},
},
],
'no-empty-function': 'off',
'no-extra-parens': 'off',
'no-redeclare': 'off',
'no-spaced-func': 'off',
'no-undef': 'off',
'no-unused-vars': 'off',
'no-useless-constructor': 'off',
'no-use-before-define': 'off',
'operator-linebreak': 'off',
'prettier/prettier': 2,
'template-curly-spacing': 'off',
},
env: {
jest: true,
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ts', '.tsx'],
},
},
'react': {
version: 'detect',
},
},
},
],
};
......@@ -2,28 +2,53 @@ import React from 'react';
import { Box } from '../src';
export function PropsVariationSection({ component: Component, common = {}, xAxis = {}, yAxis = {} }) {
return <Box is='table' marginBlock='x16' marginInline='auto' style={{ borderCollapse: 'collapse' }}>
<Box is='thead'>
<Box is='tr'>
<Box is='th' />
{Object.keys(xAxis).map((xVariation, key) =>
<Box key={key} is='th' color='hint' fontScale='c1'>{xVariation}</Box>)}
</Box>
</Box>
<Box is='tbody'>
{Object.entries(yAxis).map(([yVariation, yProps], y) => (
<Box key={y} is='tr'>
<Box is='th' color='hint' fontScale='c1'>{yVariation}</Box>
{Object.values(xAxis).map((xProps, x) => <Box key={x} is='td' margin='none' paddingBlock='x8' paddingInline='x16'>
<Box display='flex' alignItems='center' justifyContent='center'>
<Component {...common} {...xProps} {...yProps} />
export function PropsVariationSection({
component: Component,
common = {},
xAxis = {},
yAxis = {},
}) {
return (
<Box
is='table'
marginBlock='x16'
marginInline='auto'
style={{ borderCollapse: 'collapse' }}
>
<Box is='thead'>
<Box is='tr'>
<Box is='th' />
{Object.keys(xAxis).map((xVariation, key) => (
<Box key={key} is='th' color='hint' fontScale='c1'>
{xVariation}
</Box>
</Box>)}
))}
</Box>
))}
</Box>
<Box is='tbody'>
{Object.entries(yAxis).map(([yVariation, yProps], y) => (
<Box key={y} is='tr'>
<Box is='th' color='hint' fontScale='c1'>
{yVariation}
</Box>
{Object.values(xAxis).map((xProps, x) => (
<Box
key={x}
is='td'
margin='none'
paddingBlock='x8'
paddingInline='x16'
>
<Box display='flex' alignItems='center' justifyContent='center'>
<Component {...common} {...xProps} {...yProps} />
</Box>
</Box>
))}
</Box>
))}
</Box>
</Box>
</Box>;
);
}
export const exampleAvatar = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA
......
......@@ -7,11 +7,9 @@ module.exports = {
'@storybook/addon-docs',
'@storybook/addon-knobs',
'@storybook/addon-viewport',
...process.env.NODE_ENV === 'production' ? ['@storybook/addon-jest'] : [],
],
stories: [
'../src/**/*.stories.{mdx,js}',
...(process.env.NODE_ENV === 'production' ? ['@storybook/addon-jest'] : []),
],
stories: ['../src/**/*.stories.{mdx,js,tsx}'],
webpackFinal: (config) => {
config.module.rules.push({
test: /\.scss$/,
......
<style>
body {
margin: 0;
padding: 16px;
}
body {
margin: 0;
padding: 16px;
}
</style>
......@@ -16,21 +16,23 @@ addParameters({
},
options: {
showRoots: true,
storySort: ([, a], [, b]) =>
a.kind.localeCompare(b.kind),
storySort: ([, a], [, b]) => a.kind.localeCompare(b.kind),
},
viewport: {
viewports: Object.entries(breakpointTokens).reduce((obj, [name, { minViewportWidth }]) => ({
...obj,
[name]: {
name,
styles: {
width: `${ minViewportWidth }px`,
height: '90%',
viewports: Object.entries(breakpointTokens).reduce(
(obj, [name, { minViewportWidth }]) => ({
...obj,
[name]: {
name,
styles: {
width: `${minViewportWidth}px`,
height: '90%',
},
type: 'desktop',
},
type: 'desktop',
},
}), {}),
}),
{}
),
},
});
......
module.exports = (api) => ({
presets: [
['@babel/preset-env', {
targets: {
browsers: [
'Chrome >= 59',
'FireFox >= 44',
'Safari >= 7',
'Explorer 11',
'last 4 Edge versions',
],
[
'@babel/preset-env',
{
targets: {
browsers: [
'Chrome >= 59',
'FireFox >= 44',
'Safari >= 7',
'Explorer 11',
'last 4 Edge versions',
],
},
},
}],
['@babel/preset-react', {
useBuiltIns: true,
development: api.env() !== 'production',
}],
],
[
'@babel/preset-react',
{
useBuiltIns: true,
development: api.env() !== 'production',
},
],
],
plugins: [
['@babel/plugin-proposal-class-properties', { loose: true }],
......
module.exports = {
preset: 'ts-jest/presets/js-with-babel',
testMatch: [
'<rootDir>/src/**/*.(spec|test).{js,ts,tsx}',
'<rootDir>/src/**/(spec|test).{js,ts,tsx}',
],
moduleNameMapper: {
'\\.(css|scss)$': '<rootDir>/.jest/styleMock.js',
},
setupFiles: ['<rootDir>/.jest/setup.js'],
globals: {
'ts-jest': {
tsconfig: {
noUnusedLocals: false,
noUnusedParameters: false,
},
},
},
};
......@@ -24,7 +24,7 @@
"start": "webpack --watch --mode development",
"build:prod": "webpack --mode production",
"build:dev": "webpack --mode development",
"build": "run-s clean build:prod build:dev",
"build": "run-s clean build:dev build:prod",
"eslint": "eslint src",
"stylelint": "stylelint 'src/**/*.scss'",
"fix": "stylelint --fix 'src/**/*.scss'",
......@@ -74,6 +74,10 @@
"@storybook/react": "^6.0.21",
"@storybook/source-loader": "^6.0.21",
"@storybook/theming": "^6.0.21",
"@types/jest": "^26.0.16",
"@types/react": "^16.9.53",
"@typescript-eslint/eslint-plugin": "^4.9.0",
"@typescript-eslint/parser": "^4.9.0",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"caniuse-lite": "^1.0.30001151",
......@@ -109,18 +113,13 @@
"stylelint": "^13.7.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"ts-jest": "^26.4.4",
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^5.2.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^4.1.0"
},
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/.jest/styleMock.js"
},
"setupFiles": [
"<rootDir>/.jest/setup.js"
]
},
"loki": {
"configurations": {
"chrome.laptop": {
......
......@@ -3,10 +3,11 @@ import {
escapeName,
transpile,
attachRules,
css,
} from '@rocket.chat/css-in-js';
import { useDebugValue, useLayoutEffect, useMemo } from 'react';
export const useStyle = (cssFn, arg) => {
export const useStyle = (cssFn: ReturnType<typeof css>, arg: unknown) => {
const content = useMemo(() => (cssFn ? cssFn(arg) : undefined), [arg, cssFn]);
const className = useMemo(() => {
......
{
"compilerOptions": {
"rootDir": "./src",
"module": "ESNext",
"target": "ES5",
"lib": ["dom", "ES2015"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"declaration": true,
"declarationDir": "./dist",
"outDir": "./dist",
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"resolveJsonModule": true
},
"include": ["src"],
"exclude": ["dist", "node_modules", "src/*.spec.ts"]
}
......@@ -2,11 +2,12 @@
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = (env, { mode = 'production' }) => ({
entry: {
fuselage: path.resolve(__dirname, 'src/index.js'),
fuselage: path.resolve(__dirname, 'src/index.ts'),
},
output: {
filename: `[name].${mode}.js`,
......@@ -32,6 +33,11 @@ module.exports = (env, { mode = 'production' }) => ({
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: 'ts-loader',
},
{
test: /\.scss$/,
use: [
......@@ -91,4 +97,15 @@ module.exports = (env, { mode = 'production' }) => ({
openAnalyzer: false,
}),
],
resolve: {
extensions: ['.js', '.ts', '.tsx'],
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: false,
}),
],
},
});
This diff is collapsed.
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