chore/implement eslint prettier pattern

.eslintrc.js

@@ -0,0 +1,196 @@
+const rulesReact = {
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    'react/no-unescaped-entities': 'off',
+    'react-perf/jsx-no-new-function-as-prop': 'off',
+
+    'react/jsx-key': 'warn',
+    'react/jsx-pascal-case': 'warn',
+    'react/self-closing-comp': 'warn',
+    'react/no-unstable-nested-components': 'warn',
+    'react-perf/jsx-no-new-array-as-prop': 'warn',
+    'react-perf/jsx-no-new-object-as-prop': 'warn',
+    'react/jsx-sort-props': [
+        'warn',
+        {
+            callbacksLast: true,
+            shorthandFirst: true,
+            shorthandLast: false,
+            ignoreCase: true,
+            noSortAlphabetically: true,
+            reservedFirst: false
+        }
+    ],
+
+    'react/no-danger': 'error',
+    'react/jsx-boolean-value': 'error',
+    'react/boolean-prop-naming': 'error'
+}
+
+const rulesEslint = {
+    'no-redeclare': 'off',
+    'default-param-last': 'off',
+    'no-duplicate-imports': 'off',
+    'no-use-before-define': 'off',
+    'no-unused-expressions': 'off',
+
+    radix: 'warn',
+    'no-nested-ternary': 'warn',
+    'no-else-return': ['warn', { allowElseIf: false }],
+
+    'no-var': 'error',
+    'no-sequences': 'error',
+    'no-console': ['error', { allow: ['error'] }],
+    'prefer-const': ['error', { destructuring: 'all' }],
+
+    '@stylistic/max-len': ['error', { code: 85 }],
+    '@stylistic/key-spacing': [
+        'error',
+        { beforeColon: false, afterColon: true }
+    ],
+    '@stylistic/padding-line-between-statements': [
+        'error',
+        { blankLine: 'always', prev: '*', next: 'return' },
+        { blankLine: 'always', prev: ['const', 'let'], next: '*' },
+        {
+            blankLine: 'any',
+            prev: ['const', 'let'],
+            next: ['const', 'let']
+        },
+        {
+            blankLine: 'always',
+            prev: ['if', 'function', 'for'],
+            next: ['if', 'function', 'for']
+        }
+    ]
+}
+
+const rulesImport = {
+    'import/no-duplicates': 'error',
+    'import/order': [
+        'error',
+        {
+            groups: [
+                'external',
+                'builtin',
+                'type',
+                'internal',
+                'parent',
+                'sibling',
+                'index'
+            ],
+            pathGroups: [
+                {
+                    pattern: 'react',
+                    group: 'external',
+                    position: 'before'
+                },
+                {
+                    pattern: 'react-**',
+                    group: 'external',
+                    position: 'before'
+                },
+                {
+                    pattern: 'react-dom/**',
+                    group: 'external',
+                    position: 'before'
+                },
+                {
+                    pattern: 'echarts-for-react',
+                    group: 'external',
+                    position: 'before'
+                },
+                {
+                    pattern: 'echarts',
+                    group: 'type',
+                    position: 'before'
+                },
+                {
+                    pattern: '../../commonStyles',
+                    group: 'index',
+                    position: 'after'
+                },
+            ],
+            pathGroupsExcludedImportTypes: ['react', 'react-dom'],
+            'newlines-between': 'never',
+            alphabetize: {
+                order: 'asc',
+                caseInsensitive: true
+            }
+        }
+    ]
+}
+
+const rulesTypescript = {
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-confusing-void-expression': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+    '@typescript-eslint/ban-types': 'warn',
+    '@typescript-eslint/no-var-requires': 'warn',
+    '@typescript-eslint/no-unsafe-argument': 'warn',
+    '@typescript-eslint/no-non-null-assertion': 'warn',
+    '@typescript-eslint/no-unused-expressions': 'warn',
+    '@typescript-eslint/prefer-optional-chain': 'warn',
+    '@typescript-eslint/restrict-plus-operands': 'warn',
+    '@typescript-eslint/no-unnecessary-condition': 'warn',
+    '@typescript-eslint/switch-exhaustiveness-check': 'warn',
+    '@typescript-eslint/prefer-reduce-type-parameter': 'warn',
+    '@typescript-eslint/no-unnecessary-type-constraint': 'warn',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
+
+    '@typescript-eslint/no-redeclare': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/default-param-last': 'error',
+    '@typescript-eslint/no-use-before-define': 'error',
+    '@typescript-eslint/consistent-type-imports': 'error'
+}
+
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        },
+        sourceType: 'module',
+        project: ['./tsconfig.json']
+    },
+    settings: {
+        react: {
+            version: 'detect'
+        },
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx']
+        },
+        'import/resolver': {
+            typescript: true
+        }
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+        'plugin:prettier/recommended',
+        'prettier'
+    ],
+    rules: {
+        'prettier/prettier': 'error',
+        ...rulesReact,
+        ...rulesEslint,
+        ...rulesImport,
+        ...rulesTypescript
+    },
+    plugins: [
+        'react-hooks',
+        'react-perf',
+        '@typescript-eslint',
+        'import',
+        '@stylistic'
+    ],
+    ignorePatterns: ['.eslintrc.js']
+}

.prettierrc.yaml

@@ -1,11 +1,11 @@
-singleQuote:          true
-semi:                 false
-trailingComma:        none
-jsxBracketSameLine:   true
-jsxSingleQuote:       true
-tabWidth:             4
-arrowParens:          avoid
-printWidth:           80
-parser:               typescript
-bracketSpacing:       true
-useTabs:              false
+singleQuote:        true
+semi:               false
+trailingComma:      none
+bracketSameLine:    true
+jsxSingleQuote:     true
+tabWidth:           4
+arrowParens:        avoid
+printWidth:         80
+parser:             typescript
+bracketSpacing:     true
+useTabs:            false

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amazing-react-charts",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An amazing react charts package based in echarts",
   "license": "MIT",
   "main": "dist/index.js",
@@ -25,9 +25,9 @@
     "build:babel": "babel src --out-dir dist --extensions '.ts,.tsx' --ignore '**/*.stories.tsx'",
     "type-check": "tsc --noEmit",
     "format": "prettier -w 'src/**/*.{ts,tsx}'",
-    "lint": "eslint -c .eslintrc.yaml 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint -c .eslintrc.yaml --fix 'src/**/*.{ts,tsx}'",
-    "lint:quiet": "eslint --quiet .eslintrc.yaml 'src/**/*.{ts,tsx}'",
+    "lint": "eslint -c .eslintrc.js 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint -c .eslintrc.js --fix 'src/**/*.{ts,tsx}'",
+    "lint:quiet": "eslint --quiet .eslintrc.js 'src/**/*.{ts,tsx}'",
     "predeploy": "yarn build && yarn storybook:build",
     "docs:build": "storybook build -o docs",
     "pre-publish": "yarn lint --fix && yarn type-check",
@@ -41,39 +41,44 @@
     "ramda": "0.29.1"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.6",
-    "@babel/plugin-transform-runtime": "7.23.6",
-    "@babel/preset-env": "7.23.6",
+    "@babel/cli": "7.23.9",
+    "@babel/core": "7.23.9",
+    "@babel/plugin-transform-runtime": "7.23.9",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.6",
-    "@storybook/addon-styling-webpack": "0.0.5",
-    "@storybook/blocks": "7.6.6",
-    "@storybook/react": "7.6.6",
-    "@storybook/react-webpack5": "7.6.6",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-styling-webpack": "0.0.6",
+    "@storybook/blocks": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@storybook/react-webpack5": "7.6.10",
     "@storybook/testing-library": "0.2.2",
-    "@types/ramda": "0.29.9",
-    "@types/react": "18.2.45",
-    "@typescript-eslint/eslint-plugin": "6.16.0",
-    "@typescript-eslint/parser": "6.16.0",
+    "@stylistic/eslint-plugin": "1.5.4",
+    "@types/ramda": "0.29.10",
+    "@types/react": "18.2.48",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/parser": "6.19.1",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-imports": "2.0.0",
     "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-storybook": "0.6.15",
-    "prettier": "3.1.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-perf": "3.3.2",
+    "prettier": "3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.6.6",
-    "styled-components": "6.1.3",
+    "storybook": "7.6.10",
+    "styled-components": "6.1.8",
     "typescript": "5.3.3",
-    "webpack": "5.89.0"
+    "webpack": "5.90.0"
   },
   "peerDependencies": {
-    "react": "17.0.1",
-    "styled-components": "5.0.0"
+    "react": "16.x || 17.x || 18.x",
+    "styled-components": "5.x || 6.x"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

src/commonStyles.ts

@@ -1,4 +1,4 @@
 import styled from 'styled-components'
 
 export const STRAIGHT_LINE_ICON = 'path://M0 0H25H50V2H25H0V0Z'
 
@@ -85,5 +85,5 @@
         text-align: center;
         display: flex;
         align-items: center;
-  }
-`
+    }
+`

src/core/area-chart/AreaChart.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import type { IDefaultChartProps } from '../types'
 import type { Meta, StoryObj } from '@storybook/react'
-import { IDefaultChartProps } from '../types'
-import AreaChart from './AreaChart'
 import { argTypesDisableArea } from '../disableControls'
+import AreaChart from './AreaChart'
 
 const meta: Meta<typeof AreaChart> = {
     title: 'Charts/Area Chart',