From 58e07fbd79095de6b00ddb3dcbdc07f28be24e55 Mon Sep 17 00:00:00 2001 From: simeng-li Date: Tue, 17 May 2022 10:26:55 +0800 Subject: [PATCH] refactor(ui): add svg transformer (#849) * refactor(ui): introduce svgr transformer use svgr transformer to translate svg files into react component direactly * fix(ui): fix stroke color fix stroke color * fix(ui): remove unused classname remove unused classname --- packages/jest-config/jest.config.ts | 2 +- packages/jest-config/package.json | 1 + packages/ui/.parcelrc | 8 + packages/ui/package.json | 11 +- packages/ui/src/__mocks__/react-i18next.jsx | 59 ------- packages/ui/src/assets/icons/arrow-down.svg | 3 + packages/ui/src/assets/icons/arrow-prev.svg | 3 + packages/ui/src/assets/icons/arrow.svg | 11 -- packages/ui/src/assets/icons/check-box.svg | 20 --- .../ui/src/assets/icons/checkbox-icon.svg | 5 + packages/ui/src/assets/icons/clear-icon.svg | 5 +- packages/ui/src/assets/icons/close-icon.svg | 5 +- .../icons/{error.svg => error-icon.svg} | 0 packages/ui/src/assets/icons/expand-icon.svg | 6 +- packages/ui/src/assets/icons/loading-icon.svg | 14 ++ packages/ui/src/assets/icons/loading.svg | 14 -- .../ui/src/assets/icons/more-social-icon.svg | 6 +- .../src/assets/icons/password-hide-icon.svg | 3 + .../src/assets/icons/password-show-icon.svg | 3 + packages/ui/src/assets/icons/privacy-icon.svg | 8 - .../ui/src/assets/icons/radio-button-icon.svg | 6 + packages/ui/src/assets/icons/radio-button.svg | 7 +- packages/ui/src/assets/index.d.ts | 6 + .../src/components/Checkbox/index.module.scss | 34 ++-- packages/ui/src/components/Checkbox/index.tsx | 9 +- .../src/components/ConfirmModal/AcModal.tsx | 2 +- .../ConfirmModal/Acmodal.module.scss | 6 + .../src/components/Drawer/index.module.scss | 8 +- packages/ui/src/components/Drawer/index.tsx | 4 +- .../ui/src/components/Icons/CheckBoxIcon.tsx | 36 ----- .../ui/src/components/Icons/ClearIcon.tsx | 11 -- .../ui/src/components/Icons/CloseIcon.tsx | 11 -- .../ui/src/components/Icons/DownArrowIcon.tsx | 13 -- .../ui/src/components/Icons/ErrorIcon.tsx | 19 --- .../src/components/Icons/ExpandMoreIcon.tsx | 11 -- .../ui/src/components/Icons/LoadingIcon.tsx | 13 -- .../src/components/Icons/MoreSocialIcon.tsx | 18 --- .../ui/src/components/Icons/NavArrowIcon.tsx | 17 -- .../ui/src/components/Icons/PrivacyIcon.tsx | 17 -- packages/ui/src/components/Icons/index.ts | 9 -- .../ui/src/components/Input/PasswordInput.tsx | 8 +- .../ui/src/components/Input/PhoneInput.tsx | 3 +- .../ui/src/components/Input/index.module.scss | 22 ++- .../ui/src/components/Input/index.test.tsx | 2 - packages/ui/src/components/Input/index.tsx | 24 +-- .../components/Input/phoneInput.module.scss | 10 +- .../components/LoadingLayer/index.module.scss | 2 +- .../ui/src/components/LoadingLayer/index.tsx | 2 +- .../src/components/NavBar/index.module.scss | 3 +- packages/ui/src/components/NavBar/index.tsx | 4 +- .../PrimarySocialSignIn.module.scss | 1 + .../SocialSignIn/PrimarySocialSignIn.tsx | 4 +- .../SecondarySocialSignIn.module.scss | 17 +- .../SocialSignIn/SecondarySocialSignIn.tsx | 10 +- .../SocialSignIn/SocialSignInDropdown.tsx | 2 +- packages/ui/src/pages/ErrorPage/index.tsx | 2 +- pnpm-lock.yaml | 148 +++++------------- 57 files changed, 209 insertions(+), 499 deletions(-) create mode 100644 packages/ui/.parcelrc delete mode 100644 packages/ui/src/__mocks__/react-i18next.jsx create mode 100644 packages/ui/src/assets/icons/arrow-down.svg create mode 100644 packages/ui/src/assets/icons/arrow-prev.svg delete mode 100644 packages/ui/src/assets/icons/arrow.svg delete mode 100644 packages/ui/src/assets/icons/check-box.svg create mode 100644 packages/ui/src/assets/icons/checkbox-icon.svg rename packages/ui/src/assets/icons/{error.svg => error-icon.svg} (100%) create mode 100644 packages/ui/src/assets/icons/loading-icon.svg delete mode 100644 packages/ui/src/assets/icons/loading.svg create mode 100644 packages/ui/src/assets/icons/password-hide-icon.svg create mode 100644 packages/ui/src/assets/icons/password-show-icon.svg delete mode 100644 packages/ui/src/assets/icons/privacy-icon.svg create mode 100644 packages/ui/src/assets/icons/radio-button-icon.svg create mode 100644 packages/ui/src/assets/index.d.ts delete mode 100644 packages/ui/src/components/Icons/CheckBoxIcon.tsx delete mode 100644 packages/ui/src/components/Icons/ClearIcon.tsx delete mode 100644 packages/ui/src/components/Icons/CloseIcon.tsx delete mode 100644 packages/ui/src/components/Icons/DownArrowIcon.tsx delete mode 100644 packages/ui/src/components/Icons/ErrorIcon.tsx delete mode 100644 packages/ui/src/components/Icons/ExpandMoreIcon.tsx delete mode 100644 packages/ui/src/components/Icons/LoadingIcon.tsx delete mode 100644 packages/ui/src/components/Icons/MoreSocialIcon.tsx delete mode 100644 packages/ui/src/components/Icons/NavArrowIcon.tsx delete mode 100644 packages/ui/src/components/Icons/PrivacyIcon.tsx delete mode 100644 packages/ui/src/components/Icons/index.ts diff --git a/packages/jest-config/jest.config.ts b/packages/jest-config/jest.config.ts index 5f55aeb1a..8a726b1b1 100644 --- a/packages/jest-config/jest.config.ts +++ b/packages/jest-config/jest.config.ts @@ -6,7 +6,7 @@ const baseConfig: Config.InitialOptions = Object.freeze({ transform: { // Enable JS/JSX transformation '\\.(t|j)sx?$': 'ts-jest', - '\\.(svg)$': 'jest-transform-stub', + '\\.(svg)$': 'jest-transformer-svg', }, transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\]((?!ky[/\\\\]).)+\\.(js|jsx|mjs|cjs|ts|tsx)$', diff --git a/packages/jest-config/package.json b/packages/jest-config/package.json index f908b9bee..d54561b1e 100644 --- a/packages/jest-config/package.json +++ b/packages/jest-config/package.json @@ -27,6 +27,7 @@ "@types/node": "16", "eslint": "^8.10.0", "jest": "^27.5.1", + "jest-transformer-svg": "^1.0.2", "lint-staged": "^12.0.0", "prettier": "^2.3.2", "ts-node": "^10.0.0", diff --git a/packages/ui/.parcelrc b/packages/ui/.parcelrc new file mode 100644 index 000000000..e2736c9c9 --- /dev/null +++ b/packages/ui/.parcelrc @@ -0,0 +1,8 @@ +{ + "extends": "@parcel/config-default", + "transformers": { + "*.svg": [ + "@parcel/transformer-svg-react" + ] + } +} diff --git a/packages/ui/package.json b/packages/ui/package.json index 2b1b4166d..a22250b1a 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -21,6 +21,7 @@ "@logto/schemas": "^0.1.0", "@parcel/core": "^2.5.0", "@parcel/transformer-sass": "^2.5.0", + "@parcel/transformer-svg-react": "^2.5.0", "@peculiar/webcrypto": "^1.3.3", "@silverhand/eslint-config": "^0.12.0", "@silverhand/eslint-config-react": "^0.11.0", @@ -56,7 +57,9 @@ "react-string-replace": "^1.0.0", "react-timer-hook": "^3.0.5", "stylelint": "^13.13.1", - "typescript": "^4.6.2" + "typescript": "^4.6.2", + "react-device-detect": "^2.2.2", + "use-debounced-loader": "^0.1.1" }, "alias": { "@/*": "./src/$1" @@ -80,9 +83,5 @@ ] } }, - "prettier": "@silverhand/eslint-config/.prettierrc", - "dependencies": { - "react-device-detect": "^2.2.2", - "use-debounced-loader": "^0.1.1" - } + "prettier": "@silverhand/eslint-config/.prettierrc" } diff --git a/packages/ui/src/__mocks__/react-i18next.jsx b/packages/ui/src/__mocks__/react-i18next.jsx deleted file mode 100644 index ec7def20b..000000000 --- a/packages/ui/src/__mocks__/react-i18next.jsx +++ /dev/null @@ -1,59 +0,0 @@ -// Copied from https://github.com/i18next/react-i18next/blob/c533ffe092470b58769586681abfc2cf4ecf0b56/example/test-jest/src/__mocks__/react-i18next.js -/* eslint-disable unicorn/prefer-module */ -const React = require('react'); -const reactI18next = require('react-i18next'); - -const hasChildren = (node) => node && (node.children || (node.props && node.props.children)); - -const getChildren = (node) => - node && node.children ? node.children : node.props && node.props.children; - -const renderNodes = (reactNodes) => { - if (typeof reactNodes === 'string') { - return reactNodes; - } - - return Object.keys(reactNodes).map((key, i) => { - const child = reactNodes[key]; - const isElement = React.isValidElement(child); - - if (typeof child === 'string') { - return child; - } - - if (hasChildren(child)) { - const inner = renderNodes(getChildren(child)); - // eslint-disable-next-line react/no-array-index-key - return React.cloneElement(child, { ...child.props, key: i }, inner); - } - - if (typeof child === 'object' && !isElement) { - return Object.keys(child).reduce((string, childKey) => `${string}${child[childKey]}`, ''); - } - - return child; - }); -}; - -const useMock = [(k) => k, {}]; -useMock.t = (k) => k; -useMock.i18n = {}; - -const withTranslation = (Component) => (props) => k} {...props} />; - -module.exports = { - // This mock makes sure any components using the translate HoC receive the t function as a prop - withTranslation: () => withTranslation, - Trans: ({ children }) => - Array.isArray(children) ? renderNodes(children) : renderNodes([children]), - Translation: ({ children }) => children((k) => k, { i18n: {} }), - useTranslation: () => useMock, - - // Mock if needed - I18nextProvider: reactI18next.I18nextProvider, - initReactI18next: reactI18next.initReactI18next, - setDefaults: reactI18next.setDefaults, - getDefaults: reactI18next.getDefaults, - setI18n: reactI18next.setI18n, - getI18n: reactI18next.getI18n, -}; diff --git a/packages/ui/src/assets/icons/arrow-down.svg b/packages/ui/src/assets/icons/arrow-down.svg new file mode 100644 index 000000000..fb8d11c43 --- /dev/null +++ b/packages/ui/src/assets/icons/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/src/assets/icons/arrow-prev.svg b/packages/ui/src/assets/icons/arrow-prev.svg new file mode 100644 index 000000000..dc57b1f77 --- /dev/null +++ b/packages/ui/src/assets/icons/arrow-prev.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/src/assets/icons/arrow.svg b/packages/ui/src/assets/icons/arrow.svg deleted file mode 100644 index ea5d8cb45..000000000 --- a/packages/ui/src/assets/icons/arrow.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/packages/ui/src/assets/icons/check-box.svg b/packages/ui/src/assets/icons/check-box.svg deleted file mode 100644 index 6eebda941..000000000 --- a/packages/ui/src/assets/icons/check-box.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - diff --git a/packages/ui/src/assets/icons/checkbox-icon.svg b/packages/ui/src/assets/icons/checkbox-icon.svg new file mode 100644 index 000000000..ecd83c616 --- /dev/null +++ b/packages/ui/src/assets/icons/checkbox-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/ui/src/assets/icons/clear-icon.svg b/packages/ui/src/assets/icons/clear-icon.svg index 5b4813411..c9463d4b5 100644 --- a/packages/ui/src/assets/icons/clear-icon.svg +++ b/packages/ui/src/assets/icons/clear-icon.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/ui/src/assets/icons/close-icon.svg b/packages/ui/src/assets/icons/close-icon.svg index d487e52bd..ece729327 100644 --- a/packages/ui/src/assets/icons/close-icon.svg +++ b/packages/ui/src/assets/icons/close-icon.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/ui/src/assets/icons/error.svg b/packages/ui/src/assets/icons/error-icon.svg similarity index 100% rename from packages/ui/src/assets/icons/error.svg rename to packages/ui/src/assets/icons/error-icon.svg diff --git a/packages/ui/src/assets/icons/expand-icon.svg b/packages/ui/src/assets/icons/expand-icon.svg index fc37b6d93..30b731997 100644 --- a/packages/ui/src/assets/icons/expand-icon.svg +++ b/packages/ui/src/assets/icons/expand-icon.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/ui/src/assets/icons/loading-icon.svg b/packages/ui/src/assets/icons/loading-icon.svg new file mode 100644 index 000000000..a3d47ef40 --- /dev/null +++ b/packages/ui/src/assets/icons/loading-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/loading.svg b/packages/ui/src/assets/icons/loading.svg deleted file mode 100644 index ffcc983da..000000000 --- a/packages/ui/src/assets/icons/loading.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/packages/ui/src/assets/icons/more-social-icon.svg b/packages/ui/src/assets/icons/more-social-icon.svg index 977653230..e2cc47bd1 100644 --- a/packages/ui/src/assets/icons/more-social-icon.svg +++ b/packages/ui/src/assets/icons/more-social-icon.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/ui/src/assets/icons/password-hide-icon.svg b/packages/ui/src/assets/icons/password-hide-icon.svg new file mode 100644 index 000000000..a3d6309d3 --- /dev/null +++ b/packages/ui/src/assets/icons/password-hide-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/src/assets/icons/password-show-icon.svg b/packages/ui/src/assets/icons/password-show-icon.svg new file mode 100644 index 000000000..389c12c4d --- /dev/null +++ b/packages/ui/src/assets/icons/password-show-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/src/assets/icons/privacy-icon.svg b/packages/ui/src/assets/icons/privacy-icon.svg deleted file mode 100644 index f2ccec4d2..000000000 --- a/packages/ui/src/assets/icons/privacy-icon.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/packages/ui/src/assets/icons/radio-button-icon.svg b/packages/ui/src/assets/icons/radio-button-icon.svg new file mode 100644 index 000000000..fdc5ef7ca --- /dev/null +++ b/packages/ui/src/assets/icons/radio-button-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/src/assets/icons/radio-button.svg b/packages/ui/src/assets/icons/radio-button.svg index d55233888..c12c97fd4 100644 --- a/packages/ui/src/assets/icons/radio-button.svg +++ b/packages/ui/src/assets/icons/radio-button.svg @@ -1,9 +1,4 @@ - - - - - + - diff --git a/packages/ui/src/assets/index.d.ts b/packages/ui/src/assets/index.d.ts new file mode 100644 index 000000000..8ee74434a --- /dev/null +++ b/packages/ui/src/assets/index.d.ts @@ -0,0 +1,6 @@ +interface SvgComponent extends React.StatelessComponent> {} + +declare module '*.svg' { + const value: SvgComponent; + export default value; +} diff --git a/packages/ui/src/components/Checkbox/index.module.scss b/packages/ui/src/components/Checkbox/index.module.scss index 3f595f2bd..d27a78654 100644 --- a/packages/ui/src/components/Checkbox/index.module.scss +++ b/packages/ui/src/components/Checkbox/index.module.scss @@ -6,15 +6,16 @@ align-items: center; .icon { - width: 20px; - height: 20px; margin-right: _.unit(2); - > svg { + > * { display: none; - color: var(--color-text-disabled); - &:first-child { + &:nth-child(1) { + color: var(--color-icon); + } + + &:nth-child(2) { color: var(--color-primary); } } @@ -22,30 +23,17 @@ input { position: absolute; - width: 20px; - height: 20px; + width: 18px; + height: 18px; left: 0; top: 0; margin: 0; opacity: 0%; } - input:checked:not(:disabled) ~ .icon > svg:nth-child(1), - input:not(:checked):not(:disabled) ~ .icon > svg:nth-child(2) { + input:not(:checked):not(:disabled) ~ .icon > *:nth-child(1), + input:checked:not(:disabled) ~ .icon > *:nth-child(2), + input:checked:not(:disabled) ~ .icon > *:nth-child(3) { display: block; } } - -:global(body.desktop) { - .checkbox { - .icon { - width: 18px; - height: 18px; - } - - input { - width: 18px; - height: 18px; - } - } -} diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx index e26f41c5e..ab00d1814 100644 --- a/packages/ui/src/components/Checkbox/index.tsx +++ b/packages/ui/src/components/Checkbox/index.tsx @@ -1,15 +1,20 @@ import React, { forwardRef, InputHTMLAttributes, Ref } from 'react'; +import { isMobile } from 'react-device-detect'; + +import CheckBox from '@/assets/icons/checkbox-icon.svg'; +import RadioButton from '@/assets/icons/radio-button-icon.svg'; -import { CheckBoxIcon } from '../Icons'; import * as styles from './index.module.scss'; type Props = Omit, 'type'>; const Checkbox = ({ disabled, ...rest }: Props, ref: Ref) => { + const Icon = isMobile ? RadioButton : CheckBox; + return (
- +
); }; diff --git a/packages/ui/src/components/ConfirmModal/AcModal.tsx b/packages/ui/src/components/ConfirmModal/AcModal.tsx index 87bb7255a..689018cd7 100644 --- a/packages/ui/src/components/ConfirmModal/AcModal.tsx +++ b/packages/ui/src/components/ConfirmModal/AcModal.tsx @@ -4,10 +4,10 @@ import { isMobile } from 'react-device-detect'; import { useTranslation } from 'react-i18next'; import ReactModal from 'react-modal'; +import CloseIcon from '@/assets/icons/close-icon.svg'; import Button from '@/components/Button'; import * as modalStyles from '../../scss/modal.module.scss'; -import { CloseIcon } from '../Icons'; import * as styles from './Acmodal.module.scss'; import { ModalProps } from './type'; diff --git a/packages/ui/src/components/ConfirmModal/Acmodal.module.scss b/packages/ui/src/components/ConfirmModal/Acmodal.module.scss index 29367569d..e66102d39 100644 --- a/packages/ui/src/components/ConfirmModal/Acmodal.module.scss +++ b/packages/ui/src/components/ConfirmModal/Acmodal.module.scss @@ -25,6 +25,12 @@ @include _.flex-row; justify-content: space-between; margin-bottom: _.unit(4); + + > svg { + color: var(--color-icon); + width: 24px; + height: 24px; + } } .content { diff --git a/packages/ui/src/components/Drawer/index.module.scss b/packages/ui/src/components/Drawer/index.module.scss index 896f546ee..29ba39dee 100644 --- a/packages/ui/src/components/Drawer/index.module.scss +++ b/packages/ui/src/components/Drawer/index.module.scss @@ -12,10 +12,12 @@ justify-content: flex-end; align-items: center; margin-bottom: _.unit(4); -} -.closeIcon { - fill: var(--color-icon); + > svg { + color: var(--color-icon); + width: 20px; + height: 20px; + } } .drawer { diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx index 31ab3a368..8df873558 100644 --- a/packages/ui/src/components/Drawer/index.tsx +++ b/packages/ui/src/components/Drawer/index.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React, { ReactNode } from 'react'; import ReactModal from 'react-modal'; -import { CloseIcon } from '@/components/Icons'; +import CloseIcon from '@/assets/icons/close-icon.svg'; import * as modalStyles from '../../scss/modal.module.scss'; import * as styles from './index.module.scss'; @@ -34,7 +34,7 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => { >
- +
{children}
diff --git a/packages/ui/src/components/Icons/CheckBoxIcon.tsx b/packages/ui/src/components/Icons/CheckBoxIcon.tsx deleted file mode 100644 index e669ab696..000000000 --- a/packages/ui/src/components/Icons/CheckBoxIcon.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { isMobile } from 'react-device-detect'; - -import _CheckBoxIcon from '@/assets/icons/check-box.svg'; -import RadioButtonIcon from '@/assets/icons/radio-button.svg'; - -type Props = { - className?: string; -}; - -const CheckBoxIcon = ({ className }: Props) => ( - - - - - - - - -); - -export default CheckBoxIcon; diff --git a/packages/ui/src/components/Icons/ClearIcon.tsx b/packages/ui/src/components/Icons/ClearIcon.tsx deleted file mode 100644 index 2ee869264..000000000 --- a/packages/ui/src/components/Icons/ClearIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { SVGProps } from 'react'; - -import IconClear from '@/assets/icons/clear-icon.svg'; - -const ClearIcon = (props: SVGProps) => ( - - - -); - -export default ClearIcon; diff --git a/packages/ui/src/components/Icons/CloseIcon.tsx b/packages/ui/src/components/Icons/CloseIcon.tsx deleted file mode 100644 index bd3c01b66..000000000 --- a/packages/ui/src/components/Icons/CloseIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { SVGProps } from 'react'; - -import IconClose from '@/assets/icons/close-icon.svg'; - -const CloseIcon = (props: SVGProps) => ( - - - -); - -export default CloseIcon; diff --git a/packages/ui/src/components/Icons/DownArrowIcon.tsx b/packages/ui/src/components/Icons/DownArrowIcon.tsx deleted file mode 100644 index 2e45883c5..000000000 --- a/packages/ui/src/components/Icons/DownArrowIcon.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { SVGProps } from 'react'; - -import Arrow from '@/assets/icons/arrow.svg'; - -const DownArrowIcon = (props: SVGProps) => { - return ( - - - - ); -}; - -export default DownArrowIcon; diff --git a/packages/ui/src/components/Icons/ErrorIcon.tsx b/packages/ui/src/components/Icons/ErrorIcon.tsx deleted file mode 100644 index 0c01ed4bb..000000000 --- a/packages/ui/src/components/Icons/ErrorIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { SVGProps } from 'react'; - -import Error from '@/assets/icons/error.svg'; - -const ErrorIcon = (props: SVGProps) => { - return ( - - - - ); -}; - -export default ErrorIcon; diff --git a/packages/ui/src/components/Icons/ExpandMoreIcon.tsx b/packages/ui/src/components/Icons/ExpandMoreIcon.tsx deleted file mode 100644 index df3092ee5..000000000 --- a/packages/ui/src/components/Icons/ExpandMoreIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { SVGProps } from 'react'; - -import ExpandMore from '@/assets/icons/expand-icon.svg'; - -const ExpandMoreIcon = (props: SVGProps) => ( - - - -); - -export default ExpandMoreIcon; diff --git a/packages/ui/src/components/Icons/LoadingIcon.tsx b/packages/ui/src/components/Icons/LoadingIcon.tsx deleted file mode 100644 index b00736323..000000000 --- a/packages/ui/src/components/Icons/LoadingIcon.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { SVGProps } from 'react'; - -import Loading from '@/assets/icons/loading.svg'; - -const LoadingIcon = (props: SVGProps) => { - return ( - - - - ); -}; - -export default LoadingIcon; diff --git a/packages/ui/src/components/Icons/MoreSocialIcon.tsx b/packages/ui/src/components/Icons/MoreSocialIcon.tsx deleted file mode 100644 index d5d851800..000000000 --- a/packages/ui/src/components/Icons/MoreSocialIcon.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { SVGProps, forwardRef, Ref } from 'react'; - -import More from '@/assets/icons/more-social-icon.svg'; - -const MoreSocialIcon = (props: SVGProps, reference?: Ref) => ( - - - -); - -export default forwardRef(MoreSocialIcon); diff --git a/packages/ui/src/components/Icons/NavArrowIcon.tsx b/packages/ui/src/components/Icons/NavArrowIcon.tsx deleted file mode 100644 index 9c4b6014c..000000000 --- a/packages/ui/src/components/Icons/NavArrowIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { SVGProps } from 'react'; - -import Arrow from '@/assets/icons/arrow.svg'; - -type Props = { - type?: 'prev' | 'next'; -} & SVGProps; - -const NavArrowIcon = ({ type = 'prev', ...rest }: Props) => { - return ( - - - - ); -}; - -export default NavArrowIcon; diff --git a/packages/ui/src/components/Icons/PrivacyIcon.tsx b/packages/ui/src/components/Icons/PrivacyIcon.tsx deleted file mode 100644 index 716ddd993..000000000 --- a/packages/ui/src/components/Icons/PrivacyIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { SVGProps } from 'react'; - -import Icon from '@/assets/icons/privacy-icon.svg'; - -type Props = { - type?: 'show' | 'hide'; -} & SVGProps; - -const PrivacyIcon = ({ type = 'show', ...rest }: Props) => { - return ( - - - - ); -}; - -export default PrivacyIcon; diff --git a/packages/ui/src/components/Icons/index.ts b/packages/ui/src/components/Icons/index.ts deleted file mode 100644 index c25bcaa65..000000000 --- a/packages/ui/src/components/Icons/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { default as CloseIcon } from './CloseIcon'; -export { default as ClearIcon } from './ClearIcon'; -export { default as PrivacyIcon } from './PrivacyIcon'; -export { default as DownArrowIcon } from './DownArrowIcon'; -export { default as LoadingIcon } from './LoadingIcon'; -export { default as NavArrowIcon } from './NavArrowIcon'; -export { default as ExpandMoreIcon } from './ExpandMoreIcon'; -export { default as ErrorIcon } from './ErrorIcon'; -export { default as CheckBoxIcon } from './CheckBoxIcon'; diff --git a/packages/ui/src/components/Input/PasswordInput.tsx b/packages/ui/src/components/Input/PasswordInput.tsx index 22920d53d..593f46b0c 100644 --- a/packages/ui/src/components/Input/PasswordInput.tsx +++ b/packages/ui/src/components/Input/PasswordInput.tsx @@ -1,8 +1,9 @@ import classNames from 'classnames'; import React, { useState, useRef, HTMLProps } from 'react'; +import PasswordHideIcon from '@/assets/icons/password-hide-icon.svg'; +import PasswordShowIcon from '@/assets/icons/password-show-icon.svg'; import ErrorMessage, { ErrorType } from '@/components/ErrorMessage'; -import { PrivacyIcon } from '@/components/Icons'; import * as styles from './index.module.scss'; @@ -16,7 +17,7 @@ const PasswordInput = ({ className, value, error, onFocus, onBlur, ...rest }: Pr const [type, setType] = useState('password'); const [onInputFocus, setOnInputFocus] = useState(false); const inputElement = useRef(null); - const iconType = type === 'password' ? 'hide' : 'show'; + const Icon = type === 'password' ? PasswordHideIcon : PasswordShowIcon; return (
@@ -36,9 +37,8 @@ const PasswordInput = ({ className, value, error, onFocus, onBlur, ...rest }: Pr {...rest} /> {value && onInputFocus && ( - { event.preventDefault(); setType(type === 'password' ? 'text' : 'password'); diff --git a/packages/ui/src/components/Input/PhoneInput.tsx b/packages/ui/src/components/Input/PhoneInput.tsx index ee6ccc656..2e21c8a93 100644 --- a/packages/ui/src/components/Input/PhoneInput.tsx +++ b/packages/ui/src/components/Input/PhoneInput.tsx @@ -1,8 +1,9 @@ import classNames from 'classnames'; import React, { useState, useMemo, useRef } from 'react'; +import DownArrowIcon from '@/assets/icons/arrow-down.svg'; +import ClearIcon from '@/assets/icons/clear-icon.svg'; import ErrorMessage, { ErrorType } from '@/components/ErrorMessage'; -import { ClearIcon, DownArrowIcon } from '@/components/Icons'; import { CountryCallingCode, CountryMetaData } from '@/hooks/use-phone-number'; import * as styles from './index.module.scss'; diff --git a/packages/ui/src/components/Input/index.module.scss b/packages/ui/src/components/Input/index.module.scss index dbefcefc6..631113e63 100644 --- a/packages/ui/src/components/Input/index.module.scss +++ b/packages/ui/src/components/Input/index.module.scss @@ -12,12 +12,21 @@ transition-timing-function: ease-in-out; transition-duration: 0.2s; + .actionButton { + display: none; + color: var(--color-icon); + } + > *:not(:first-child) { margin-left: _.unit(1); } &:focus-within { border: _.border(var(--color-primary)); + + .actionButton { + display: block; + } } &.error { @@ -49,15 +58,17 @@ margin-top: _.unit(2); } -.actionButton { - fill: var(--color-icon); -} :global(body.mobile) { .wrapper { padding: 0 _.unit(4); background: var(--color-layer); color: var(--color-text); + + .actionButton { + width: 24px; + height: 24px; + } } } @@ -69,6 +80,11 @@ border-radius: 6px; outline: 3px solid transparent; + .actionButton { + width: 22px; + height: 22px; + } + &:focus-within { border-color: var(--color-primary); outline-color: var(--color-focused-variant); diff --git a/packages/ui/src/components/Input/index.test.tsx b/packages/ui/src/components/Input/index.test.tsx index 7c0bdb7cd..8a7226e33 100644 --- a/packages/ui/src/components/Input/index.test.tsx +++ b/packages/ui/src/components/Input/index.test.tsx @@ -42,8 +42,6 @@ describe('Input Field UI Component', () => { ); const inputField = container.querySelector('input'); - expect(container.querySelector('svg')).toBeNull(); - if (inputField) { fireEvent.focus(inputField); } diff --git a/packages/ui/src/components/Input/index.tsx b/packages/ui/src/components/Input/index.tsx index 44e4f7a40..31ec06d03 100644 --- a/packages/ui/src/components/Input/index.tsx +++ b/packages/ui/src/components/Input/index.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; -import React, { useState, HTMLProps } from 'react'; +import React, { HTMLProps } from 'react'; +import ClearIcon from '@/assets/icons/clear-icon.svg'; import ErrorMessage, { ErrorType } from '@/components/ErrorMessage'; -import { ClearIcon } from '@/components/Icons'; import * as styles from './index.module.scss'; @@ -19,30 +19,14 @@ const Input = ({ value, error, errorStyling = true, - onFocus, - onBlur, onClear, ...rest }: Props) => { - const [onInputFocus, setOnInputFocus] = useState(false); - return (
- { - setOnInputFocus(true); - onFocus?.(event); - }} - onBlur={(event) => { - setOnInputFocus(false); - onBlur?.(event); - }} - {...rest} - /> - {value && onInputFocus && onClear && ( + + {value && onClear && ( { diff --git a/packages/ui/src/components/Input/phoneInput.module.scss b/packages/ui/src/components/Input/phoneInput.module.scss index 58b62d243..14d5e8a8e 100644 --- a/packages/ui/src/components/Input/phoneInput.module.scss +++ b/packages/ui/src/components/Input/phoneInput.module.scss @@ -25,7 +25,10 @@ :global(body.mobile) { .countryCodeSelector { > svg { - fill: var(--color-primary); + color: var(--color-primary); + margin-left: _.unit(1); + width: 16px; + height: 16px; } } } @@ -34,7 +37,10 @@ :global(body.desktop) { .countryCodeSelector { > svg { - fill: var(--color-icon); + color: var(--color-icon); + margin-left: _.unit(2); + width: 20px; + height: 20px; } } } diff --git a/packages/ui/src/components/LoadingLayer/index.module.scss b/packages/ui/src/components/LoadingLayer/index.module.scss index c075c9bae..7c074a8b6 100644 --- a/packages/ui/src/components/LoadingLayer/index.module.scss +++ b/packages/ui/src/components/LoadingLayer/index.module.scss @@ -19,7 +19,7 @@ } .loadingIcon { - animation: rotating 1.5s ease-in-out infinite; + animation: rotating 1s linear infinite; } @keyframes rotating { diff --git a/packages/ui/src/components/LoadingLayer/index.tsx b/packages/ui/src/components/LoadingLayer/index.tsx index ba20a86f9..e2071e039 100644 --- a/packages/ui/src/components/LoadingLayer/index.tsx +++ b/packages/ui/src/components/LoadingLayer/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { LoadingIcon } from '@/components/Icons'; +import LoadingIcon from '@/assets/icons/loading-icon.svg'; import * as styles from './index.module.scss'; diff --git a/packages/ui/src/components/NavBar/index.module.scss b/packages/ui/src/components/NavBar/index.module.scss index 1b0df9802..924eed1e8 100644 --- a/packages/ui/src/components/NavBar/index.module.scss +++ b/packages/ui/src/components/NavBar/index.module.scss @@ -19,9 +19,8 @@ cursor: pointer; } - svg { + > svg { fill: currentColor; - margin-right: _.unit(2); } .title { diff --git a/packages/ui/src/components/NavBar/index.tsx b/packages/ui/src/components/NavBar/index.tsx index 426f99dbe..bfa520303 100644 --- a/packages/ui/src/components/NavBar/index.tsx +++ b/packages/ui/src/components/NavBar/index.tsx @@ -3,7 +3,7 @@ import { isMobile } from 'react-device-detect'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import { NavArrowIcon } from '@/components/Icons'; +import ArrowPrev from '@/assets/icons/arrow-prev.svg'; import * as styles from './index.module.scss'; @@ -23,7 +23,7 @@ const NavBar = ({ title }: Props) => { navigate(-1); }} > - + {!isMobile && {t('action.nav_back')}}
diff --git a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.module.scss b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.module.scss index 25e80755e..0857b13dd 100644 --- a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.module.scss +++ b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.module.scss @@ -9,6 +9,7 @@ } .expandIcon { + color: var(--color-icon); width: 20px; height: 20px; diff --git a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx index ccc6048fc..ac4d0b779 100644 --- a/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx +++ b/packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import React, { useState, useMemo } from 'react'; +import ExpandIcon from '@/assets/icons/expand-icon.svg'; import SocialLinkButton from '@/components/Button/SocialLinkButton'; -import { ExpandMoreIcon } from '@/components/Icons'; import useSocial from '@/hooks/use-social'; import * as styles from './PrimarySocialSignIn.module.scss'; @@ -42,7 +42,7 @@ const PrimarySocialSignIn = ({ className, isPopup = false, onSocialSignInCallbac /> ))} {!fullDisplay && ( - { setShowAll(!showAll); diff --git a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.module.scss b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.module.scss index fa51206dc..ed3da6d1b 100644 --- a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.module.scss +++ b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.module.scss @@ -15,19 +15,28 @@ .moreButton { border-radius: 50%; + @include _.flex-column; + + > svg { + color: var(--color-icon); + } } :global(body.mobile) { .moreButton { - width: 48px; - height: 48px; + > svg { + width: 48px; + height: 48px; + } } } :global(body.desktop) { .moreButton { - width: 28px; - height: 28px; + > svg { + width: 28px; + height: 28px; + } } } diff --git a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.tsx b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.tsx index 2006a7c03..5854b2f2d 100644 --- a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.tsx +++ b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.tsx @@ -2,8 +2,8 @@ import classNames from 'classnames'; import React, { useMemo, useState, useRef } from 'react'; import { isMobile } from 'react-device-detect'; +import MoreSocialIcon from '@/assets/icons/more-social-icon.svg'; import SocialIconButton from '@/components/Button/SocialIconButton'; -import MoreSocialIcon from '@/components/Icons/MoreSocialIcon'; import useSocial from '@/hooks/use-social'; import * as styles from './SecondarySocialSignIn.module.scss'; @@ -20,7 +20,7 @@ const SecondarySocialSignIn = ({ className }: Props) => { const { socialConnectors, invokeSocialSignIn } = useSocial(); const isOverSize = socialConnectors.length > defaultSize; const [showModal, setShowModal] = useState(false); - const moreButtonRef = useRef(null); + const moreButtonRef = useRef(null); const displayConnectors = useMemo(() => { if (isOverSize) { @@ -44,13 +44,15 @@ const SecondarySocialSignIn = ({ className }: Props) => { /> ))} {isOverSize && ( - { setShowModal(true); }} - /> + > + + )}
{isOverSize && isMobile && ( diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown.tsx index d467ec6ec..339e32eb9 100644 --- a/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown.tsx +++ b/packages/ui/src/containers/SocialSignIn/SocialSignInDropdown.tsx @@ -9,7 +9,7 @@ import { ConnectorData } from '@/types'; import * as styles from './SocialSignInDropdown.module.scss'; type Props = { - anchorRef?: React.RefObject; + anchorRef?: React.RefObject; isOpen: boolean; onClose: () => void; connectors: ConnectorData[]; diff --git a/packages/ui/src/pages/ErrorPage/index.tsx b/packages/ui/src/pages/ErrorPage/index.tsx index 944d20c12..abf792f14 100644 --- a/packages/ui/src/pages/ErrorPage/index.tsx +++ b/packages/ui/src/pages/ErrorPage/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { TFuncKey, useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; +import ErrorIcon from '@/assets/icons/error-icon.svg'; import Button from '@/components/Button'; -import { ErrorIcon } from '@/components/Icons'; import NavBar from '@/components/NavBar'; import * as styles from './index.module.scss'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a76ff2f01..a3dded500 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -734,6 +734,7 @@ importers: jest: ^27.5.1 jest-matcher-specific-error: ^1.0.0 jest-transform-stub: ^2.0.0 + jest-transformer-svg: ^1.0.2 lint-staged: ^12.0.0 prettier: ^2.3.2 ts-jest: ^27.1.1 @@ -752,6 +753,7 @@ importers: '@types/node': 16.11.12 eslint: 8.10.0 jest: 27.5.1_ts-node@10.7.0 + jest-transformer-svg: 1.0.2_jest@27.5.1 lint-staged: 12.4.0 prettier: 2.5.1 ts-node: 10.7.0_42uktnex6oapjbpw2i7vzvmrzi @@ -842,6 +844,7 @@ importers: '@logto/schemas': ^0.1.0 '@parcel/core': ^2.5.0 '@parcel/transformer-sass': ^2.5.0 + '@parcel/transformer-svg-react': ^2.5.0 '@peculiar/webcrypto': ^1.3.3 '@silverhand/eslint-config': ^0.12.0 '@silverhand/eslint-config-react': ^0.11.0 @@ -880,15 +883,13 @@ importers: stylelint: ^13.13.1 typescript: ^4.6.2 use-debounced-loader: ^0.1.1 - dependencies: - react-device-detect: 2.2.2_sfoxds7t5ydpegc3knd667wn6m - use-debounced-loader: 0.1.1_react@17.0.2 devDependencies: '@logto/jest-config': link:../jest-config '@logto/phrases': link:../phrases '@logto/schemas': link:../schemas '@parcel/core': 2.5.0 '@parcel/transformer-sass': 2.5.0_@parcel+core@2.5.0 + '@parcel/transformer-svg-react': 2.5.0_@parcel+core@2.5.0 '@peculiar/webcrypto': 1.3.3 '@silverhand/eslint-config': 0.12.0_hjjt7jwmhwqm7bjf55k5ihcdqq '@silverhand/eslint-config-react': 0.11.0_oxzh5pb5bdzd47fiyp3dy75fai @@ -916,6 +917,7 @@ importers: postcss-modules: 4.3.0_postcss@8.4.6 prettier: 2.5.1 react: 17.0.2 + react-device-detect: 2.2.2_sfoxds7t5ydpegc3knd667wn6m react-dom: 17.0.2_react@17.0.2 react-i18next: 11.15.4_fq32mavcto3l2u7t3zyhvdh4yu react-modal: 3.14.4_sfoxds7t5ydpegc3knd667wn6m @@ -925,6 +927,7 @@ importers: react-timer-hook: 3.0.5_sfoxds7t5ydpegc3knd667wn6m stylelint: 13.13.1 typescript: 4.6.2 + use-debounced-loader: 0.1.1_react@17.0.2 packages: @@ -5560,6 +5563,20 @@ packages: - '@parcel/core' dev: true + /@parcel/transformer-svg-react/2.5.0_@parcel+core@2.5.0: + resolution: {integrity: sha512-jy+fuZ8lbAwe9nvvBd5snd7OJXeR0h8o0seZqtGF5Q80SuMZ4zm1kfhCoDfhEkNQt0fHttlUlOIbGcyaTczXcA==} + engines: {node: '>= 12.0.0', parcel: ^2.5.0} + dependencies: + '@parcel/plugin': 2.5.0_@parcel+core@2.5.0 + '@svgr/core': 6.2.1 + '@svgr/plugin-jsx': 6.2.1_@svgr+core@6.2.1 + '@svgr/plugin-svgo': 6.2.0_@svgr+core@6.2.1 + camelcase: 6.3.0 + transitivePeerDependencies: + - '@parcel/core' + - supports-color + dev: true + /@parcel/transformer-svg/2.5.0_@parcel+core@2.5.0: resolution: {integrity: sha512-zCGJcrCpICFe0Q/dgjQZfW7sYFkbJEC7NGT4zEJnMo8Cm/kq8Qh6+2ApX6c+vv5Q0WZn5Ic+N0OvxIMkvgdC/w==} engines: {node: '>= 12.0.0', parcel: ^2.5.0} @@ -5712,7 +5729,6 @@ packages: stylelint-config-xo-scss: 0.14.0_stylelint@13.13.1 transitivePeerDependencies: - eslint - - eslint-import-resolver-webpack - prettier - supports-color - typescript @@ -5736,7 +5752,7 @@ packages: eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u eslint-plugin-consistent-default-export-name: 0.0.7 eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0 - eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany + eslint-plugin-import: 2.25.4_eslint@8.10.0 eslint-plugin-no-use-extend-native: 0.5.0 eslint-plugin-node: 11.1.0_eslint@8.10.0 eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m @@ -5747,7 +5763,6 @@ packages: prettier: 2.5.1 typescript: 4.6.2 transitivePeerDependencies: - - eslint-import-resolver-webpack - supports-color dev: true @@ -5769,7 +5784,7 @@ packages: eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u eslint-plugin-consistent-default-export-name: 0.0.7 eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0 - eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany + eslint-plugin-import: 2.25.4_eslint@8.10.0 eslint-plugin-no-use-extend-native: 0.5.0 eslint-plugin-node: 11.1.0_eslint@8.10.0 eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m @@ -5780,7 +5795,6 @@ packages: prettier: 2.5.1 typescript: 4.6.2 transitivePeerDependencies: - - eslint-import-resolver-webpack - supports-color dev: true @@ -5919,7 +5933,7 @@ packages: dependencies: '@babel/core': 7.16.0 postcss: 7.0.39 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_postcss@7.0.39 transitivePeerDependencies: - supports-color dev: true @@ -5932,7 +5946,7 @@ packages: postcss-syntax: '>=0.36.2' dependencies: postcss: 7.0.39 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_postcss@7.0.39 remark: 13.0.0 unist-util-find-all-after: 3.0.2 transitivePeerDependencies: @@ -9012,22 +9026,12 @@ packages: /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true dependencies: ms: 2.0.0 dev: true /debug/3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true dependencies: ms: 2.1.3 @@ -9724,8 +9728,6 @@ packages: dependencies: debug: 3.2.7 resolve: 1.22.0 - transitivePeerDependencies: - - supports-color dev: true /eslint-import-resolver-typescript/2.5.0_rnagsyfcubvpoxo2ynj23pim7u: @@ -9737,7 +9739,7 @@ packages: dependencies: debug: 4.3.3 eslint: 8.10.0 - eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany + eslint-plugin-import: 2.25.4_eslint@8.10.0 glob: 7.2.0 is-glob: 4.0.3 resolve: 1.22.0 @@ -9754,33 +9756,6 @@ packages: find-up: 2.1.0 dev: true - /eslint-module-utils/2.7.3_l62aq42yiamaj3cnpuf6avthf4: - resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==} - engines: {node: '>=4'} - peerDependencies: - '@typescript-eslint/parser': '*' - eslint-import-resolver-node: '*' - eslint-import-resolver-typescript: '*' - eslint-import-resolver-webpack: '*' - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - eslint-import-resolver-node: - optional: true - eslint-import-resolver-typescript: - optional: true - eslint-import-resolver-webpack: - optional: true - dependencies: - '@typescript-eslint/parser': 5.14.0_pzezdwkd5bvjkx2hshexc25sxq - debug: 3.2.7 - eslint-import-resolver-node: 0.3.6 - eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u - find-up: 2.1.0 - transitivePeerDependencies: - - supports-color - dev: true - /eslint-plugin-consistent-default-export-name/0.0.7: resolution: {integrity: sha512-5gQqnXniMBCzB4TTai/XX28CLgfSk2/bb9GYD5DiuIKlEUSklLdB068nq9zwG3808pjPFlYTm0dLyRk/qDolaQ==} engines: {node: '>=0.10.0'} @@ -9835,37 +9810,6 @@ packages: tsconfig-paths: 3.13.0 dev: true - /eslint-plugin-import/2.25.4_sidoke6kqbkbdht6nlmwbfnany: - resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==} - engines: {node: '>=4'} - peerDependencies: - '@typescript-eslint/parser': '*' - eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - dependencies: - '@typescript-eslint/parser': 5.14.0_pzezdwkd5bvjkx2hshexc25sxq - array-includes: 3.1.4 - array.prototype.flat: 1.2.5 - debug: 2.6.9 - doctrine: 2.1.0 - eslint: 8.10.0 - eslint-import-resolver-node: 0.3.6 - eslint-module-utils: 2.7.3_l62aq42yiamaj3cnpuf6avthf4 - has: 1.0.3 - is-core-module: 2.8.1 - is-glob: 4.0.3 - minimatch: 3.1.2 - object.values: 1.1.5 - resolve: 1.22.0 - tsconfig-paths: 3.13.0 - transitivePeerDependencies: - - eslint-import-resolver-typescript - - eslint-import-resolver-webpack - - supports-color - dev: true - /eslint-plugin-no-use-extend-native/0.5.0: resolution: {integrity: sha512-dBNjs8hor8rJgeXLH4HTut5eD3RGWf9JUsadIfuL7UosVQ/dnvOKwxEcRrXrFxrMZ8llUVWT+hOimxJABsAUzQ==} engines: {node: '>=6.0.0'} @@ -12728,6 +12672,15 @@ packages: resolution: {integrity: sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==} dev: false + /jest-transformer-svg/1.0.2_jest@27.5.1: + resolution: {integrity: sha512-A9z5Vzs+TlPpxekwUOCyVu5sHgcCKUKyJTE1q/bUhtAILpgf3kIj6IjguQrTJG0jN0nRnuNV7ckPUE8Vdf12Jg==} + peerDependencies: + jest: ^27.0.6 + react: ^17.0.2 + dependencies: + jest: 27.5.1_ts-node@10.7.0 + dev: true + /jest-util/27.5.1: resolution: {integrity: sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} @@ -15696,7 +15649,7 @@ packages: dependencies: htmlparser2: 3.10.1 postcss: 7.0.39 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_postcss@7.0.39 dev: true /postcss-less/3.1.4: @@ -16096,31 +16049,12 @@ packages: svgo: 2.8.0 dev: true - /postcss-syntax/0.36.2_kei4jy7wdgbhc236h4oijypxom: + /postcss-syntax/0.36.2_postcss@7.0.39: resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==} peerDependencies: postcss: '>=5.0.0' - postcss-html: '*' - postcss-jsx: '*' - postcss-less: '*' - postcss-markdown: '*' - postcss-scss: '*' - peerDependenciesMeta: - postcss-html: - optional: true - postcss-jsx: - optional: true - postcss-less: - optional: true - postcss-markdown: - optional: true - postcss-scss: - optional: true dependencies: postcss: 7.0.39 - postcss-html: 0.36.0_j55xdkkcxc32kvnyvx3y7casfm - postcss-less: 3.1.4 - postcss-scss: 2.1.1 dev: true /postcss-unique-selectors/5.1.1_postcss@8.4.12: @@ -16623,7 +16557,7 @@ packages: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 ua-parser-js: 1.0.2 - dev: false + dev: true /react-dnd-html5-backend/16.0.0: resolution: {integrity: sha512-be3lKEbbT8FQcoTjFlQ4ZXG/NVrFNJu9W0INc5rm/5EFQpHCkz+xpbB2U8j9uh5Bvk7AsJyQrZznEut0hrNPIA==} @@ -18606,7 +18540,7 @@ packages: postcss-sass: 0.4.4 postcss-scss: 2.1.1 postcss-selector-parser: 6.0.9 - postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom + postcss-syntax: 0.36.2_postcss@7.0.39 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 slash: 3.0.0 @@ -18620,8 +18554,6 @@ packages: v8-compile-cache: 2.3.0 write-file-atomic: 3.0.3 transitivePeerDependencies: - - postcss-jsx - - postcss-markdown - supports-color dev: true @@ -19370,7 +19302,7 @@ packages: /ua-parser-js/1.0.2: resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==} - dev: false + dev: true /uglify-js/3.15.3: resolution: {integrity: sha512-6iCVm2omGJbsu3JWac+p6kUiOpg3wFO2f8lIXjfEb8RrmLjzog1wTPMmwKB7swfzzqxj9YM+sGUM++u1qN4qJg==} @@ -19696,7 +19628,7 @@ packages: react: '>=16' dependencies: react: 17.0.2 - dev: false + dev: true /use-isomorphic-layout-effect/1.1.2_z7w6vgz62d5pbxpnoxayoqdmly: resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}