LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request #61 from vegaprotocol/feature/base-level-components

Browse Source 
Feature/base level components
This commit is contained in:
Bartłomiej Głownia 2022-03-08 17:56:16 +01:00 committed by GitHub
commit 5cf4cafe22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 120 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc.json
View File

@ -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"]
}
]
}
},

2
apps/trading/.eslintrc.json
View File

@ -5,7 +5,7 @@
"next",
"next/core-web-vitals"
],
"ignorePatterns": ["!**/*"],
"ignorePatterns": ["!**/*", "__generated__"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

14
libs/ui-toolkit/src/components/button/button.tsx
View File

@ -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,

12
libs/ui-toolkit/src/components/icon/icon.stories.tsx
View File

@ -3,20 +3,10 @@ import { Icon } from './icon';
export default {
component: Icon,
title: 'Input',
title: 'Icon',
} as Meta;
const Template: Story = (args) => <Icon {...args} name="warning-sign" />;
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,
};

2
libs/ui-toolkit/src/components/icon/icon.tsx
View File

@ -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;

10
libs/ui-toolkit/src/components/input/input.tsx
View File

@ -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<HTMLInputElement> {
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

2
libs/ui-toolkit/src/components/text-area/text-area.tsx
View File

@ -3,7 +3,7 @@ import { inputClassNames } from '../input/input';
export interface TextAreaProps
extends TextareaHTMLAttributes<HTMLTextAreaElement> {
hassError?: boolean;
hasError?: boolean;
className?: string;
}

39
libs/ui-toolkit/src/utils/class-names.spec.ts Normal file
View File

@ -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);
});

4
libs/ui-toolkit/src/utils/class-names.ts Normal file
View File

@ -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+( |$)/);

1
package.json
View File

@ -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",

55
yarn.lock
View File

@ -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"