From cbe3e80e337ef4a20fd31e98580fd1cc8085a11f Mon Sep 17 00:00:00 2001 From: Elmar <102954831+elmar-vega@users.noreply.github.com> Date: Tue, 19 Jul 2022 00:29:52 +0100 Subject: [PATCH] =?UTF-8?q?chore(console-lite):=20add=20new=20stepper=20co?= =?UTF-8?q?mponent=20and=20change=20deal=20ticket=E2=80=A6=20(#788)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(console-lite): add new stepper component and change deal ticket steps * chore(console-lite): remove @mui/material from project * chore(console-lite): refactor stepper counter styles to make it more legible * fix(console-lite): market selector z-index overlap * fix(console-lite): failing stepper tests * fix(console-lite): fix linting errors * feat(console-lite): add selected value to stepper.tsx * chore(console-lite): change label size stepper --- .../deal-ticket/deal-ticket-container.tsx | 2 +- .../deal-ticket/deal-ticket-steps.tsx | 71 +------ .../src/app/components/nav/nav-item.tsx | 2 +- .../src/app/components/stepper/counter.tsx | 55 +++++ .../src/app/components/stepper/index.ts | 2 +- .../app/components/stepper/stepper.spec.tsx | 124 +++++++++++ .../src/app/components/stepper/stepper.tsx | 196 ++++++++++++------ apps/simple-trading-app/src/index.html | 8 + .../src/components/market-selector.tsx | 4 +- libs/tailwindcss-config/src/theme-lite.js | 9 +- package.json | 1 - yarn.lock | 120 +---------- 12 files changed, 341 insertions(+), 253 deletions(-) create mode 100644 apps/simple-trading-app/src/app/components/stepper/counter.tsx create mode 100644 apps/simple-trading-app/src/app/components/stepper/stepper.spec.tsx diff --git a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx index a1ee371a9..f66794906 100644 --- a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx +++ b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx @@ -43,7 +43,7 @@ export const DealTicketContainer = () => { return (
-
+
{marketId ? ( {(data) => ( diff --git a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx index 4eea36434..6e59b4b9c 100644 --- a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx +++ b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx @@ -1,23 +1,15 @@ import * as React from 'react'; import { useForm, Controller } from 'react-hook-form'; -import Box from '@mui/material/Box'; import { Stepper } from '../stepper'; import type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket'; import { Button, InputError } from '@vegaprotocol/ui-toolkit'; import { - ExpirySelector, SideSelector, - TimeInForceSelector, - TypeSelector, DealTicketAmount, MarketSelector, } from '@vegaprotocol/deal-ticket'; import type { Order } from '@vegaprotocol/orders'; -import { - VegaWalletOrderTimeInForce as OrderTimeInForce, - VegaWalletOrderType as OrderType, - VegaTxStatus, -} from '@vegaprotocol/wallet'; +import { VegaTxStatus } from '@vegaprotocol/wallet'; import { t, addDecimal, toDecimal } from '@vegaprotocol/react-helpers'; import { getDefaultOrder, @@ -84,7 +76,6 @@ export const DealTicketSteps = ({ market }: DealTicketMarketProps) => { const steps = [ { label: t('Select Market'), - description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`, component: ( { ItemRenderer={MarketNameRenderer} /> ), + value: market.name, }, { - label: 'Select Order Type', - description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`, - component: ( - ( - - )} - /> - ), - }, - { - label: 'Select Market Position', - description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`, + label: t('Select Direction'), component: ( { ), }, { - label: 'Select Order Size', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + label: t('Choose Position Size'), component: ( { ), }, { - label: 'Select Time In Force', - description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`, + label: t('Review Trade'), component: ( - <> - ( - - )} - /> - {orderType === OrderType.Limit && - orderTimeInForce === OrderTimeInForce.GTT && ( - ( - - )} - /> - )} - - ), - }, - { - label: 'Review & Submit Order', - description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`, - component: ( - +
{invalidText && ( {invalidText} @@ -190,7 +133,7 @@ export const DealTicketSteps = ({ market }: DealTicketMarketProps) => { ? t('Pending...') : t('Place order')} - +
), disabled: true, }, diff --git a/apps/simple-trading-app/src/app/components/nav/nav-item.tsx b/apps/simple-trading-app/src/app/components/nav/nav-item.tsx index b224fa960..a7b7e35e4 100644 --- a/apps/simple-trading-app/src/app/components/nav/nav-item.tsx +++ b/apps/simple-trading-app/src/app/components/nav/nav-item.tsx @@ -10,7 +10,7 @@ export const NavItem = ({ iconName, label }: NavItemProps) => { return (
- {label} + {label}
); }; diff --git a/apps/simple-trading-app/src/app/components/stepper/counter.tsx b/apps/simple-trading-app/src/app/components/stepper/counter.tsx new file mode 100644 index 000000000..4357dadbc --- /dev/null +++ b/apps/simple-trading-app/src/app/components/stepper/counter.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import Video from '../header/video'; + +interface CounterProps { + label: string; + className?: string; + isActive: boolean; +} + +type TStyleMap = { + [key: string]: string; +}; + +const reduceStyles = (styleMap: TStyleMap) => + Object.keys(styleMap).reduce((acc, curr) => acc + `${styleMap[curr]} `, ''); + +export const Counter = ({ label, isActive, className }: CounterProps) => { + const generalStyles: TStyleMap = { + shape: 'rounded-full relative aspect-square clip-path-rounded', + border: 'border-black dark:border-white', + colours: 'bg-white dark:bg-black text-black dark:text-white', + children: 'flex items-center justify-center text-center', + }; + + const unselected: TStyleMap = { + border: 'border', + size: 'w-[30px] md:w-40', + margin: 'mt-[5px] md:ml-[10px] md:mt-0', + }; + + const selected: TStyleMap = { + colours: 'text-xl text-white', + size: 'w-40 md:w-[60px]', + }; + + const classes = classNames( + reduceStyles(generalStyles), + isActive ? reduceStyles(selected) : reduceStyles(unselected), + className + ).replace(/ +/g, ' '); // remove double space + + return ( +
+ {isActive && ( +
+
+ )} + + {label} + +
+ ); +}; diff --git a/apps/simple-trading-app/src/app/components/stepper/index.ts b/apps/simple-trading-app/src/app/components/stepper/index.ts index 68094e791..ef1c3dd02 100644 --- a/apps/simple-trading-app/src/app/components/stepper/index.ts +++ b/apps/simple-trading-app/src/app/components/stepper/index.ts @@ -1 +1 @@ -export { default as Stepper } from './stepper'; +export * from './stepper'; diff --git a/apps/simple-trading-app/src/app/components/stepper/stepper.spec.tsx b/apps/simple-trading-app/src/app/components/stepper/stepper.spec.tsx new file mode 100644 index 000000000..75625ddf6 --- /dev/null +++ b/apps/simple-trading-app/src/app/components/stepper/stepper.spec.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import { render, waitFor, fireEvent } from '@testing-library/react'; +import { Stepper } from './index'; +import type { TStep } from './index'; + +jest.mock('@vegaprotocol/react-helpers', () => { + return { + t: (a: string) => a, + useScreenDimensions: jest.fn(() => ({ + isMobile: true, + })), + }; +}); + +// Used to disable the error you get from muted video https://github.com/testing-library/react-testing-library/issues/470 +Object.defineProperty(HTMLMediaElement.prototype, 'muted', { + // eslint-disable-next-line @typescript-eslint/no-empty-function + set: () => {}, +}); + +const steps: TStep[] = [ + { + label: 'Alpha', + component:

Alpha Content

, + }, + { + label: 'Beta', + component:

Beta Content

, + }, + { + label: 'Gamma', + component:

Gamma Content

, + }, +]; + +describe('Stepper Component', () => { + it('should render it as a list', async () => { + const { getByLabelText } = await render(); + expect(getByLabelText('Step by step to make a trade')).toBeTruthy(); + expect(getByLabelText('Step 1')).toBeTruthy(); + expect(getByLabelText('Step 2')).toBeTruthy(); + expect(getByLabelText('Step 3')).toBeTruthy(); + }); + + it('should go to the correct tab on click', async () => { + const { getByRole } = await render(); + + expect(getByRole('tab', { name: 'Alpha' })).toHaveAttribute( + 'aria-selected', + 'true' + ); + fireEvent.click(getByRole('tab', { name: 'Beta' })); + await waitFor(() => getByRole('tab', { name: 'Gamma' })); + expect(getByRole('tab', { name: 'Alpha' })).toHaveAttribute( + 'aria-selected', + 'false' + ); + expect(getByRole('tab', { name: 'Beta' })).toHaveAttribute( + 'aria-selected', + 'true' + ); + expect(getByRole('tab', { name: 'Gamma' })).toHaveAttribute( + 'aria-selected', + 'false' + ); + }); + + it('should go to the correct tab on right/left arrow press', async () => { + const { getByRole } = await render(); + + expect(getByRole('tab', { name: 'Alpha' })).toHaveAttribute( + 'aria-selected', + 'true' + ); + fireEvent.keyDown(getByRole('tab', { name: 'Beta' }), { + key: 'ArrowRight', + }); + await waitFor(() => getByRole('tab', { name: 'Beta' })); + expect(getByRole('tab', { name: 'Alpha' })).toHaveAttribute( + 'aria-selected', + 'false' + ); + expect(getByRole('tab', { name: 'Beta' })).toHaveAttribute( + 'aria-selected', + 'true' + ); + fireEvent.keyDown(getByRole('tab', { name: 'Beta' }), { key: 'ArrowLeft' }); + await waitFor(() => getByRole('tab', { name: 'Alpha' })); + expect(getByRole('tab', { name: 'Alpha' })).toHaveAttribute( + 'aria-selected', + 'true' + ); + expect(getByRole('tab', { name: 'Beta' })).toHaveAttribute( + 'aria-selected', + 'false' + ); + }); + + it('should go to next tab on next button click', async () => { + const { getByRole } = await render(); + expect(getByRole('tab', { name: 'Alpha' })).toHaveAttribute( + 'aria-selected', + 'true' + ); + fireEvent.click(getByRole('button', { name: 'Next' })); + await waitFor(() => getByRole('tab', { name: 'Gamma' })); + expect(getByRole('tab', { name: 'Alpha' })).toHaveAttribute( + 'aria-selected', + 'false' + ); + expect(getByRole('tab', { name: 'Beta' })).toHaveAttribute( + 'aria-selected', + 'true' + ); + expect(getByRole('tab', { name: 'Gamma' })).toHaveAttribute( + 'aria-selected', + 'false' + ); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); +}); diff --git a/apps/simple-trading-app/src/app/components/stepper/stepper.tsx b/apps/simple-trading-app/src/app/components/stepper/stepper.tsx index 3d099ffa5..e7080d34c 100644 --- a/apps/simple-trading-app/src/app/components/stepper/stepper.tsx +++ b/apps/simple-trading-app/src/app/components/stepper/stepper.tsx @@ -1,93 +1,157 @@ import * as React from 'react'; import type { ReactNode } from 'react'; -import Box from '@mui/material/Box'; +import classNames from 'classnames'; import { Button } from '@vegaprotocol/ui-toolkit'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; -import StepContent from '@mui/material/StepContent'; -import Paper from '@mui/material/Paper'; -import Divider from '@mui/material/Divider'; -import Typography from '@mui/material/Typography'; +import { t, useScreenDimensions } from '@vegaprotocol/react-helpers'; +import { Counter } from './counter'; -type Step = { +export type TStep = { label: string; - description: string; component: ReactNode; disabled?: boolean; + value?: string; }; -interface StepperProps { - steps: Step[]; +export interface StepperProps { + steps: TStep[]; + className?: string; } -export default ({ steps }: StepperProps) => { +export const Stepper = ({ steps }: StepperProps) => { const [activeStep, setActiveStep] = React.useState(0); + const lastStep = steps.length - 1; + const isLastStep = activeStep === lastStep; + const { isMobile } = useScreenDimensions(); const handleClick = (index: typeof activeStep) => { setActiveStep(index); }; + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === 'ArrowLeft' && activeStep > 0) { + return setActiveStep((prevActiveStep) => prevActiveStep - 1); + } else if (event.key === 'ArrowRight' && !isLastStep) { + return setActiveStep((prevActiveStep) => prevActiveStep + 1); + } + return false; + }; + const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleReset = () => { - setActiveStep(0); + if (!isLastStep) { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + } }; return ( - - - {steps.map((step, index) => ( - - Last step - ) : null - } - style={{ cursor: 'pointer' }} - onClick={() => handleClick(index)} +
+
    + {steps.map((step, index) => { + const isActive = activeStep === index; + const isFirstStep = !index; + const isLastStep = lastStep === index; + return ( +
  1. - {step.label} - - - {step.description} - {step.component} - - -
    - - + +
    + ) : undefined} + +
+ {!isMobile && ( +
+ {step.component}
- - - - ))} - - {activeStep === steps.length && ( - - All steps completed - you're finished - - + )} + + ); + })} + + {isMobile && ( +
+ {steps[activeStep].component} + {!isLastStep && ( + + )} +
)} - +
); }; diff --git a/apps/simple-trading-app/src/index.html b/apps/simple-trading-app/src/index.html index 5fac6e506..2bc7cf101 100644 --- a/apps/simple-trading-app/src/index.html +++ b/apps/simple-trading-app/src/index.html @@ -7,6 +7,14 @@ + +
diff --git a/libs/deal-ticket/src/components/market-selector.tsx b/libs/deal-ticket/src/components/market-selector.tsx index f3510f552..2c3f646b5 100644 --- a/libs/deal-ticket/src/components/market-selector.tsx +++ b/libs/deal-ticket/src/components/market-selector.tsx @@ -206,7 +206,7 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
{ role="button" tabIndex={0} key={market.id} - className="cursor-pointer focus:bg-white-95 focus:outline-0 dark:focus:bg-black-80 px-20 py-5" + className="bg-white dark:bg-black cursor-pointer focus:bg-white-95 focus:outline-0 dark:focus:bg-black-80 px-20 py-5" onClick={() => handleMarketSelect(market)} onKeyDown={(e) => handleItemKeyDown(e, market, i)} > diff --git a/libs/tailwindcss-config/src/theme-lite.js b/libs/tailwindcss-config/src/theme-lite.js index a694f61ee..7e1f996ef 100644 --- a/libs/tailwindcss-config/src/theme-lite.js +++ b/libs/tailwindcss-config/src/theme-lite.js @@ -1,4 +1,5 @@ const theme = require('./theme'); +const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { ...theme, @@ -25,7 +26,7 @@ module.exports = { }, }, fontSize: { - ...theme.fontSize, + ...defaultTheme.fontSize, capMenu: ['15px', { lineHeight: '24px', letterSpacing: '-0.01em' }], market: ['15px', { lineHeight: '24px' }], 'ui-small': ['12px', { lineHeight: '14px' }], @@ -42,4 +43,10 @@ module.exports = { 'input-focus-error': 'none', 'input-focus-error-dark': 'none', }, + extend: { + transitionProperty: { + height: 'height', + 'max-height': 'max-height', + }, + }, }; diff --git a/package.json b/package.json index 254eae5e8..45708cc1e 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "@blueprintjs/icons": "^3.32.0", "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.6.2", "@nrwl/next": "13.10.3", "@radix-ui/react-accordion": "^0.1.6", "@radix-ui/react-dialog": "^0.1.5", diff --git a/yarn.lock b/yarn.lock index c8407eef7..c655a3f86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1217,7 +1217,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.17.9" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72" integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg== @@ -2518,86 +2518,6 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" -"@mui/base@5.0.0-alpha.78": - version "5.0.0-alpha.78" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.78.tgz#9d0ee8c913969f60cd7072a6082e3c0652be0b74" - integrity sha512-5L+GNe2M9/tFjQpjK2r837+kzRg/l6D5R9SQbG1wmSWejw5Ei8P+KXIgS/NLNi9g7dUT8bnCyzz9AZKQX1Jsfg== - dependencies: - "@babel/runtime" "^7.17.2" - "@emotion/is-prop-valid" "^1.1.2" - "@mui/types" "^7.1.3" - "@mui/utils" "^5.6.1" - "@popperjs/core" "^2.11.5" - clsx "^1.1.1" - prop-types "^15.7.2" - react-is "^17.0.2" - -"@mui/material@^5.6.2": - version "5.6.3" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.6.3.tgz#a5b6cd1b0417fca67a65172530ff5573ab7bc453" - integrity sha512-2VovFsbCEhic29NYoBF7zFrpH2sEOlKXXDhGjzxmWiI9OnC3SX63hapWunjaVsiRINVnjuMHuW1MOs4UtV8Gfg== - dependencies: - "@babel/runtime" "^7.17.2" - "@mui/base" "5.0.0-alpha.78" - "@mui/system" "^5.6.3" - "@mui/types" "^7.1.3" - "@mui/utils" "^5.6.1" - "@types/react-transition-group" "^4.4.4" - clsx "^1.1.1" - csstype "^3.0.11" - hoist-non-react-statics "^3.3.2" - prop-types "^15.7.2" - react-is "^17.0.2" - react-transition-group "^4.4.2" - -"@mui/private-theming@^5.6.2": - version "5.6.2" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.6.2.tgz#c42da32f8b9481ba12885176c0168a355727c189" - integrity sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg== - dependencies: - "@babel/runtime" "^7.17.2" - "@mui/utils" "^5.6.1" - prop-types "^15.7.2" - -"@mui/styled-engine@^5.6.1": - version "5.6.1" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.6.1.tgz#e2c859a4dbdd65af89e77703a0725285aef471fd" - integrity sha512-jEhH6TBY8jc9S8yVncXmoTYTbATjEu44RMFXj6sIYfKr5NArVwTwRo3JexLL0t3BOAiYM4xsFLgfKEIvB9SAeQ== - dependencies: - "@babel/runtime" "^7.17.2" - "@emotion/cache" "^11.7.1" - prop-types "^15.7.2" - -"@mui/system@^5.6.3": - version "5.6.3" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.6.3.tgz#a03ad6d61b0b7d304a8af60374e27e71e7818ef7" - integrity sha512-4SRi52a4ttZ2S4EHEDE8arVNuKqyQLTYUTF80WAZ0tQwnG20qwlBtzcrywCGItmVAMl7RUaYopyWOx3yVPvrmQ== - dependencies: - "@babel/runtime" "^7.17.2" - "@mui/private-theming" "^5.6.2" - "@mui/styled-engine" "^5.6.1" - "@mui/types" "^7.1.3" - "@mui/utils" "^5.6.1" - clsx "^1.1.1" - csstype "^3.0.11" - prop-types "^15.7.2" - -"@mui/types@^7.1.3": - version "7.1.3" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a" - integrity sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA== - -"@mui/utils@^5.6.1": - version "5.6.1" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.6.1.tgz#4ab79a21bd481555d9a588f4b18061b3c28ea5db" - integrity sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ== - dependencies: - "@babel/runtime" "^7.17.2" - "@types/prop-types" "^15.7.4" - "@types/react-is" "^16.7.1 || ^17.0.0" - prop-types "^15.7.2" - react-is "^17.0.2" - "@napi-rs/triples@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c" @@ -3344,7 +3264,7 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@popperjs/core@^2.11.5", "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0": +"@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0": version "2.11.5" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64" integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== @@ -6316,7 +6236,7 @@ resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654" integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ== -"@types/prop-types@*", "@types/prop-types@^15.7.4": +"@types/prop-types@*": version "15.7.5" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== @@ -6364,13 +6284,6 @@ dependencies: "@types/react" "*" -"@types/react-is@^16.7.1 || ^17.0.0": - version "17.0.3" - resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" - integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== - dependencies: - "@types/react" "*" - "@types/react-router-dom@5.3.1": version "5.3.1" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.1.tgz#76700ccce6529413ec723024b71f01fc77a4a980" @@ -6402,13 +6315,6 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.4.4": - version "4.4.4" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" - integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== - dependencies: - "@types/react" "*" - "@types/react-virtualized-auto-sizer@^1.0.0", "@types/react-virtualized-auto-sizer@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4" @@ -10542,7 +10448,7 @@ csstype@^2.5.7: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda" integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA== -csstype@^3.0.11, csstype@^3.0.2, csstype@^3.0.4: +csstype@^3.0.2, csstype@^3.0.4: version "3.0.11" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== @@ -11171,14 +11077,6 @@ dom-helpers@^3.4.0: dependencies: "@babel/runtime" "^7.1.2" -dom-helpers@^5.0.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" - integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== - dependencies: - "@babel/runtime" "^7.8.7" - csstype "^3.0.2" - dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -18848,16 +18746,6 @@ react-transition-group@2.9.0: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react-transition-group@^4.4.2: - version "4.4.2" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" - integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react-use-websocket@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-3.0.0.tgz#754cb8eea76f55d31c5676d4abe3e573bc2cea04"