From 16cef1ec06baffd76b9308e548327ccfc9416bda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Tue, 8 Mar 2022 15:03:50 +0100 Subject: [PATCH 1/2] Base level components fixes after code review --- .../src/components/button/button.tsx | 14 +++---- .../src/components/icon/icon.stories.tsx | 12 +----- libs/ui-toolkit/src/components/icon/icon.tsx | 2 - .../ui-toolkit/src/components/input/input.tsx | 10 +++-- .../src/components/text-area/text-area.tsx | 2 +- libs/ui-toolkit/src/utils/class-names.spec.ts | 39 +++++++++++++++++++ libs/ui-toolkit/src/utils/class-names.ts | 4 ++ 7 files changed, 57 insertions(+), 26 deletions(-) create mode 100644 libs/ui-toolkit/src/utils/class-names.spec.ts create mode 100644 libs/ui-toolkit/src/utils/class-names.ts diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx index e937b49ed..a97ec985d 100644 --- a/libs/ui-toolkit/src/components/button/button.tsx +++ b/libs/ui-toolkit/src/components/button/button.tsx @@ -1,6 +1,10 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from 'react'; import classNames from 'classnames'; import { Icon, IconName } from '../icon'; +import { + paddingLeftProvided, + paddingRightProvided, +} from '../../utils/class-names'; interface CommonProps { children?: React.ReactNode; @@ -21,12 +25,6 @@ const getClassName = ( className: CommonProps['className'], variant: CommonProps['variant'] ) => { - const noPaddingLeftProvided = !( - className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline' - ); - const noPaddingRightProvided = !( - className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline' - ); return classNames( [ 'inline-flex', @@ -42,8 +40,8 @@ const getClassName = ( 'transition-all', ], { - 'pl-28': noPaddingLeftProvided, - 'pr-28': noPaddingRightProvided, + 'pl-28': !paddingLeftProvided(className) || variant === 'inline', + 'pr-28': !paddingRightProvided(className) || variant === 'inline', 'hover:border-black dark:hover:border-white': variant !== 'inline', 'active:border-black dark:active:border-white': true, diff --git a/libs/ui-toolkit/src/components/icon/icon.stories.tsx b/libs/ui-toolkit/src/components/icon/icon.stories.tsx index 8f5843757..5fe951f90 100644 --- a/libs/ui-toolkit/src/components/icon/icon.stories.tsx +++ b/libs/ui-toolkit/src/components/icon/icon.stories.tsx @@ -3,20 +3,10 @@ import { Icon } from './icon'; export default { component: Icon, - title: 'Input', + title: 'Icon', } as Meta; const Template: Story = (args) => ; export const Default = Template.bind({}); Default.args = {}; - -export const WithError = Template.bind({}); -WithError.args = { - hasError: true, -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - disabled: true, -}; diff --git a/libs/ui-toolkit/src/components/icon/icon.tsx b/libs/ui-toolkit/src/components/icon/icon.tsx index fc7e469fc..8ea0b4251 100644 --- a/libs/ui-toolkit/src/components/icon/icon.tsx +++ b/libs/ui-toolkit/src/components/icon/icon.tsx @@ -4,8 +4,6 @@ import classNames from 'classnames'; export type { IconName } from '@blueprintjs/icons'; interface IconProps { - hasError?: boolean; - disabled?: boolean; name: IconName; className?: string; size?: 16 | 20 | 24 | 32 | 48 | 64; diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx index bfa70e6b1..e6a4881f0 100644 --- a/libs/ui-toolkit/src/components/input/input.tsx +++ b/libs/ui-toolkit/src/components/input/input.tsx @@ -1,6 +1,10 @@ import { InputHTMLAttributes, forwardRef } from 'react'; import classNames from 'classnames'; import { Icon, IconName } from '../icon'; +import { + paddingLeftProvided, + paddingRightProvided, +} from '../../utils/class-names'; interface InputProps extends InputHTMLAttributes { hasError?: boolean; @@ -16,8 +20,6 @@ export const inputClassNames = ({ hasError?: boolean; className?: string; }) => { - const noPaddingLeftProvided = !className?.match(/(^| )p(l|x)-\d+( |$)/); - const noPaddingRightProvided = !className?.match(/(^| )p(r|x)-\d+( |$)/); return classNames( [ 'inline-flex', @@ -34,8 +36,8 @@ export const inputClassNames = ({ 'disabled:bg-black-10 disabled:dark:bg-white-10', ], { - 'pl-8': noPaddingLeftProvided, - 'pr-8': noPaddingRightProvided, + 'pl-8': !paddingLeftProvided(className), + 'pr-8': !paddingRightProvided(className), 'border-vega-pink dark:border-vega-pink': hasError, }, className diff --git a/libs/ui-toolkit/src/components/text-area/text-area.tsx b/libs/ui-toolkit/src/components/text-area/text-area.tsx index a58afaf01..5653941ee 100644 --- a/libs/ui-toolkit/src/components/text-area/text-area.tsx +++ b/libs/ui-toolkit/src/components/text-area/text-area.tsx @@ -3,7 +3,7 @@ import { inputClassNames } from '../input/input'; export interface TextAreaProps extends TextareaHTMLAttributes { - hassError?: boolean; + hasError?: boolean; className?: string; } diff --git a/libs/ui-toolkit/src/utils/class-names.spec.ts b/libs/ui-toolkit/src/utils/class-names.spec.ts new file mode 100644 index 000000000..1e17ef7bd --- /dev/null +++ b/libs/ui-toolkit/src/utils/class-names.spec.ts @@ -0,0 +1,39 @@ +import { paddingLeftProvided, paddingRightProvided } from './class-names'; + +test('paddingLeftProvided detects class name which affects left padding', () => { + expect(paddingLeftProvided()).toEqual(false); + expect(paddingLeftProvided('')).toEqual(false); + expect(paddingLeftProvided('pl-8')).toEqual(true); + expect(paddingLeftProvided('pl-16')).toEqual(true); + expect(paddingLeftProvided(' pl-16')).toEqual(true); + expect(paddingLeftProvided('prepend pl-8')).toEqual(true); + expect(paddingLeftProvided('pl-16 ')).toEqual(true); + expect(paddingLeftProvided('pl-16 append')).toEqual(true); + expect(paddingLeftProvided('px-8')).toEqual(true); + expect(paddingLeftProvided('px-16')).toEqual(true); + expect(paddingLeftProvided(' px-16')).toEqual(true); + expect(paddingLeftProvided('prepend px-8')).toEqual(true); + expect(paddingLeftProvided('px-16 ')).toEqual(true); + expect(paddingLeftProvided('px-16 append')).toEqual(true); + expect(paddingLeftProvided('px-16a')).toEqual(false); + expect(paddingLeftProvided('apx-16')).toEqual(false); +}); + +test('paddingRightProvided detects class name which affects right padding', () => { + expect(paddingRightProvided()).toEqual(false); + expect(paddingRightProvided('')).toEqual(false); + expect(paddingRightProvided('pr-8')).toEqual(true); + expect(paddingRightProvided('pr-16')).toEqual(true); + expect(paddingRightProvided(' pr-16')).toEqual(true); + expect(paddingRightProvided('prepend pr-8')).toEqual(true); + expect(paddingRightProvided('pr-16 ')).toEqual(true); + expect(paddingRightProvided('pr-16 append')).toEqual(true); + expect(paddingRightProvided('px-8')).toEqual(true); + expect(paddingRightProvided('px-16')).toEqual(true); + expect(paddingRightProvided(' px-16')).toEqual(true); + expect(paddingRightProvided('prepend px-8')).toEqual(true); + expect(paddingRightProvided('px-16 ')).toEqual(true); + expect(paddingRightProvided('px-16 append')).toEqual(true); + expect(paddingRightProvided('px-16a')).toEqual(false); + expect(paddingRightProvided('apx-16')).toEqual(false); +}); diff --git a/libs/ui-toolkit/src/utils/class-names.ts b/libs/ui-toolkit/src/utils/class-names.ts new file mode 100644 index 000000000..b57a8b22d --- /dev/null +++ b/libs/ui-toolkit/src/utils/class-names.ts @@ -0,0 +1,4 @@ +export const paddingLeftProvided = (className?: string) => + !!className?.match(/(^| )p(l|x)-\d+( |$)/); +export const paddingRightProvided = (className?: string) => + !!className?.match(/(^| )p(r|x)-\d+( |$)/); From 9429f337305a704eb9a58cb7561c1de556e71ba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Tue, 8 Mar 2022 15:26:42 +0100 Subject: [PATCH 2/2] Add filename-case eslint rule --- .eslintrc.json | 9 +++++- apps/trading/.eslintrc.json | 2 +- package.json | 1 + yarn.lock | 55 +++++++++++++++++++++++++++++++++++-- 4 files changed, 63 insertions(+), 4 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 6f1d4ff3c..7fa843875 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,7 +1,7 @@ { "root": true, "ignorePatterns": ["**/*"], - "plugins": ["@nrwl/nx"], + "plugins": ["@nrwl/nx", "eslint-plugin-unicorn"], "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], @@ -18,6 +18,13 @@ } ] } + ], + "unicorn/filename-case": [ + "error", + { + "case": "kebabCase", + "ignore": ["\\[[a-zA-Z]+\\]\\.page"] + } ] } }, diff --git a/apps/trading/.eslintrc.json b/apps/trading/.eslintrc.json index 2548ff963..bc7243829 100644 --- a/apps/trading/.eslintrc.json +++ b/apps/trading/.eslintrc.json @@ -5,7 +5,7 @@ "next", "next/core-web-vitals" ], - "ignorePatterns": ["!**/*"], + "ignorePatterns": ["!**/*", "__generated__"], "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], diff --git a/package.json b/package.json index 9f243c581..e69c700d5 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "eslint-plugin-jsx-a11y": "6.5.1", "eslint-plugin-react": "7.27.0", "eslint-plugin-react-hooks": "4.3.0", + "eslint-plugin-unicorn": "^41.0.0", "husky": "^7.0.4", "jest": "27.2.3", "lint-staged": "^12.3.3", diff --git a/yarn.lock b/yarn.lock index 5b5d5a65c..ae5240e19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6974,7 +6974,7 @@ buffer@~5.2.1: base64-js "^1.0.2" ieee754 "^1.1.4" -builtin-modules@^3.1.0: +builtin-modules@^3.0.0, builtin-modules@^3.1.0: version "3.2.0" resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz" integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA== @@ -7413,7 +7413,7 @@ ci-info@^2.0.0: resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz" integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ== -ci-info@^3.2.0: +ci-info@^3.2.0, ci-info@^3.3.0: version "3.3.0" resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz" integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw== @@ -7465,6 +7465,13 @@ clean-css@^5.2.2: dependencies: source-map "~0.6.0" +clean-regexp@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/clean-regexp/-/clean-regexp-1.0.0.tgz#8df7c7aae51fd36874e8f8d05b9180bc11a3fed7" + integrity sha1-jffHquUf02h06PjQW5GAvBGj/tc= + dependencies: + escape-string-regexp "^1.0.5" + clean-stack@^2.0.0: version "2.2.0" resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz" @@ -9508,6 +9515,26 @@ eslint-plugin-react@^7.27.0: semver "^6.3.0" string.prototype.matchall "^4.0.6" +eslint-plugin-unicorn@^41.0.0: + version "41.0.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-unicorn/-/eslint-plugin-unicorn-41.0.0.tgz#bf0974f8551ab4dd4aaae7d9cf53894040defbbd" + integrity sha512-xoJCaRc1uy5REg9DkVga1BkZV57jJxoqOcrU28QHZB89Lk5LdSqdVyTIt9JQVfHNKaiyJ7X+3iLlIn+VEHWEzA== + dependencies: + "@babel/helper-validator-identifier" "^7.15.7" + ci-info "^3.3.0" + clean-regexp "^1.0.0" + eslint-utils "^3.0.0" + esquery "^1.4.0" + indent-string "^4.0.0" + is-builtin-module "^3.1.0" + lodash "^4.17.21" + pluralize "^8.0.0" + read-pkg-up "^7.0.1" + regexp-tree "^0.1.24" + safe-regex "^2.1.1" + semver "^7.3.5" + strip-indent "^3.0.0" + eslint-scope@5.1.1, eslint-scope@^5.1.1: version "5.1.1" resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz" @@ -11618,6 +11645,13 @@ is-buffer@^2.0.0: resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz" integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ== +is-builtin-module@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.1.0.tgz#6fdb24313b1c03b75f8b9711c0feb8c30b903b00" + integrity sha512-OV7JjAgOTfAFJmHZLvpSTb4qi0nIILDV1gWPYDnDJUTNFM5aGlRAhk4QcT8i7TuAleeEV5Fdkqn3t4mS+Q11fg== + dependencies: + builtin-modules "^3.0.0" + is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.4: version "1.2.4" resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz" @@ -14883,6 +14917,11 @@ platform@1.3.6: resolved "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz" integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg== +pluralize@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1" + integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA== + pnp-webpack-plugin@1.6.4: version "1.6.4" resolved "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz" @@ -15995,6 +16034,11 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" +regexp-tree@^0.1.24, regexp-tree@~0.1.1: + version "0.1.24" + resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.24.tgz#3d6fa238450a4d66e5bc9c4c14bb720e2196829d" + integrity sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw== + regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.1: version "1.4.1" resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz" @@ -16421,6 +16465,13 @@ safe-regex@^1.1.0: dependencies: ret "~0.1.10" +safe-regex@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-2.1.1.tgz#f7128f00d056e2fe5c11e81a1324dd974aadced2" + integrity sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A== + dependencies: + regexp-tree "~0.1.1" + "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0: version "2.1.2" resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"