diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 785d762f..00000000 --- a/.eslintignore +++ /dev/null @@ -1,11 +0,0 @@ -docs/.next/ -docs/out/ -docs/public/playroom/ - -components/dist/ -components/coverage/ -components/src/components/icons/generated/ - -node_modules -pnpm-lock.yaml -pnpm-workspace.yaml \ No newline at end of file diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index c8406a04..b1f28d33 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -49,7 +49,7 @@ jobs: node-version: ${{ matrix.node-version }} cache: 'pnpm' - - run: pnpm install --frozen-lockfile + - run: pnpm install -no-frozen-lockfile - name: build run: pnpm -F @ensdomains/thorin build @@ -79,7 +79,7 @@ jobs: node-version: ${{ matrix.node-version }} cache: 'pnpm' - - run: pnpm install --frozen-lockfile + - run: pnpm install -no-frozen-lockfile - name: Test run: pnpm run test --coverage diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 8ed66cf8..2ab62385 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -26,7 +26,7 @@ jobs: node-version: ${{ matrix.node-version }} cache: 'pnpm' - - run: pnpm install --frozen-lockfile + - run: pnpm install -no-frozen-lockfile - name: Test run: pnpm test diff --git a/.husky/pre-commit b/.husky/pre-commit index 14ace7b3..1bf51931 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -pnpm lint-staged \ No newline at end of file +pnpm lint \ No newline at end of file diff --git a/components/.eslintignore b/components/.eslintignore new file mode 100644 index 00000000..007ce46f --- /dev/null +++ b/components/.eslintignore @@ -0,0 +1,7 @@ +dist +coverage +src/components/icons/generated + +node_modules +pnpm-lock.yaml +pnpm-workspace.yaml \ No newline at end of file diff --git a/.eslintrc.js b/components/.eslintrc.js similarity index 92% rename from .eslintrc.js rename to components/.eslintrc.js index db99b8c6..c9a47813 100644 --- a/.eslintrc.js +++ b/components/.eslintrc.js @@ -73,18 +73,6 @@ module.exports = { 'react/self-closing-comp': 'warn', }, overrides: [ - { - files: ['docs/**/*'], - extends: ['plugin:@next/next/recommended', 'next/core-web-vitals'], - settings: { - next: { - rootDir: 'docs/', - }, - }, - rules: { - 'import/no-unresolved': 'off', - }, - }, { files: ['*.mdx'], extends: ['plugin:mdx/recommended'], diff --git a/components/package.json b/components/package.json index b1e7f454..5ff37fe7 100644 --- a/components/package.json +++ b/components/package.json @@ -27,6 +27,8 @@ "license": "MIT", "scripts": { "build": "vite build", + "lint": "eslint .", + "lint:fix": "eslint . --fix", "clean": "rimraf dist src/components/icons/generated/", "lint:types": "tsc --noEmit", "prepack": "pnpm build", @@ -36,7 +38,8 @@ "dependencies": { "clsx": "^1.1.1", "focus-visible": "^5.2.0", - "lodash": "^4.17.21" + "lodash": "^4.17.21", + "ts-pattern": "^4.3.0" }, "devDependencies": { "@babel/core": "^7.20.5", diff --git a/components/src/components/molecules/Dropdown/ActionSheet.tsx b/components/src/components/molecules/Dropdown/ActionSheet.tsx new file mode 100644 index 00000000..af142880 --- /dev/null +++ b/components/src/components/molecules/Dropdown/ActionSheet.tsx @@ -0,0 +1,99 @@ +import * as React from 'react' +import styled, { css } from 'styled-components' + +import { breakpoints } from '@/src/tokens' + +import { Button, Modal, Typography } from '../..' +import type { DropdownItem, DropdownItemObject } from './Dropdown' + +const ActionSheetContent = styled.div( + ({ theme }) => css` + width: 100%; + flex-direction: column; + padding: ${theme.space['2.5']}; + gap: ${theme.space['2.5']}; + display: flex; + `, +) + +const ActionSheetOptions = styled.div( + ({ theme }) => css` + border-radius: ${theme.radii['large']}; + width: ${theme.space['full']}; + text-align: center; + display: flex; + flex-direction: column; + gap: ${theme.space.px}; + `, +) + +const ActionSheetItem = styled.div( + ({ theme }) => css` + width: 100%; + padding: 20px; + position: relative; + background: ${theme.colors.backgroundPrimary}; + + &:first-child { + border-top-left-radius: ${theme.radii['large']}; + border-top-right-radius: ${theme.radii['large']}; + } + &:last-child { + border-bottom-left-radius: ${theme.radii['large']}; + border-bottom-right-radius: ${theme.radii['large']}; + } + `, +) + +type Props = { + isOpen: boolean + screenSize: number + items: DropdownItem[] + setIsOpen: React.Dispatch> + DropdownChild: React.FC<{ + setIsOpen: (isOpen: boolean) => void + item: React.ReactElement> + }> + cancelLabel?: string +} +export const ActionSheet = React.forwardRef( + ( + { isOpen, screenSize, items, setIsOpen, DropdownChild, cancelLabel }, + ref, + ) => ( + setIsOpen(false) : undefined + } + > + + + {items?.map((item) => { + if (React.isValidElement(item)) { + return DropdownChild({ item, setIsOpen }) + } + + return ( + { + ;(item as DropdownItemObject)?.onClick?.( + (item as DropdownItemObject).value, + ) + setIsOpen(false) + }} + > + {(item as DropdownItemObject).label} + + ) + })} + + + + + ), +) diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx index 32d8288a..5ed64ddd 100644 --- a/components/src/components/molecules/Dropdown/Dropdown.tsx +++ b/components/src/components/molecules/Dropdown/Dropdown.tsx @@ -1,18 +1,21 @@ import * as React from 'react' import styled, { DefaultTheme, css, useTheme } from 'styled-components' +import { P, match } from 'ts-pattern' +import { debounce } from 'lodash' import { TransitionState } from 'react-transition-state' import { Button, ButtonProps } from '@/src/components/atoms/Button' -import { Colors } from '@/src/tokens' +import { Colors, breakpoints } from '@/src/tokens' import { DownChevronSVG, DynamicPopover, ScrollBox } from '../..' +import { ActionSheet } from './ActionSheet' type Align = 'left' | 'right' type LabelAlign = 'flex-start' | 'flex-end' | 'center' type Direction = 'down' | 'up' -type DropdownItemObject = { +export type DropdownItemObject = { label: string onClick?: (value?: string) => void wrapper?: (children: React.ReactNode, key: React.Key) => JSX.Element @@ -59,6 +62,10 @@ type Props = { height?: string | number /** The colour of the indicator */ indicatorColor?: Colors + /** If true, displays an action sheet when in mobile */ + responsive?: boolean + /** The label for the cancel button when showing an action sheet */ + cancelLabel?: string } & NativeDivProps type PropsWithIsOpen = { @@ -241,13 +248,10 @@ const MenuButton = styled.button( `, ) -const DropdownChild = ({ - setIsOpen, - item, -}: { +const DropdownChild: React.FC<{ setIsOpen: (isOpen: boolean) => void item: React.ReactElement> -}) => { +}> = ({ setIsOpen, item }) => { const ref = React.useRef(null) const Item = React.cloneElement(item, { ...item.props, ref }) @@ -379,34 +383,36 @@ const Chevron = styled((props) => )<{ `, ) -export const Dropdown = ({ +interface DropdownButtonProps { + children?: React.ReactNode + buttonRef: React.RefObject + chevron: boolean + direction: Direction + isOpen: boolean + setIsOpen: React.Dispatch> + label: React.ReactNode + items: DropdownItem[] + buttonProps?: ButtonProps + indicatorColor?: Colors +} + +const DropdownButton: React.FC = ({ children, - buttonProps, - items = [], - chevron = true, - align = 'left', - menuLabelAlign, - width = 150, - mobileWidth = width, - shortThrow = false, - keepMenuOnTop = false, + buttonRef, + chevron, + direction, + isOpen, + setIsOpen, label, - direction = 'down', - isOpen: _isOpen, - setIsOpen: _setIsOpen, + items, + buttonProps, indicatorColor, - ...props -}: Props & (PropsWithIsOpen | PropsWithoutIsOpen)) => { - const dropdownRef = React.useRef() - const buttonRef = React.useRef(null) - const internalOpen = React.useState(false) +}): React.ReactElement => { const { colors } = useTheme() const hasIndicator = React.useMemo( () => items.some((item) => 'showIndicator' in item && item.showIndicator), [items], ) - const [isOpen, setIsOpen] = _setIsOpen ? [_isOpen, _setIsOpen] : internalOpen - const buttonPropsWithIndicator = React.useMemo( () => ({ ...buttonProps, @@ -422,11 +428,66 @@ export const Dropdown = ({ [buttonProps, hasIndicator, indicatorColor, colors, isOpen], ) + return ( + <> + {children ? ( + React.Children.map(children, (child) => { + if (!React.isValidElement(child)) return null + return React.cloneElement(child as any, { + ...buttonPropsWithIndicator, + zindex: '10', + pressed: isOpen ? 'true' : undefined, + onClick: () => setIsOpen((prev) => !prev), + ref: buttonRef, + }) + }) + ) : ( + + )} + + ) +} + +const useScreenSize = () => { + const [screenSize, setScreenSize] = React.useState(window.innerWidth) + React.useEffect(() => { + const debouncedHandleResize = debounce(() => { + setScreenSize(window.innerWidth) + }, 100) + const handleResize = () => { + debouncedHandleResize() + } + window.addEventListener('resize', handleResize) + return () => { + window.removeEventListener('resize', handleResize) + } + }, []) + return screenSize +} + +const useClickOutside = ( + dropdownRef: React.MutableRefObject, + buttonRef: React.MutableRefObject, + actionSheetRef: React.MutableRefObject, + setIsOpen: React.Dispatch>, + isOpen: boolean, +) => { React.useEffect(() => { const handleClickOutside = (e: any) => { if ( !dropdownRef.current?.contains(e.target) && - !buttonRef.current?.contains(e.target) + !buttonRef.current?.contains(e.target) && + !actionSheetRef.current?.contains(e.target) ) { setIsOpen(false) } @@ -440,58 +501,108 @@ export const Dropdown = ({ return () => { document.removeEventListener('mousedown', handleClickOutside) } - }, [dropdownRef, isOpen, setIsOpen]) - - const button: React.ReactNode = children ? ( - React.Children.map(children, (child) => { - if (!React.isValidElement(child)) return null - return React.cloneElement(child as any, { - ...buttonPropsWithIndicator, - zindex: '10', - pressed: isOpen ? 'true' : undefined, - onClick: () => setIsOpen((prev) => !prev), - ref: buttonRef, - }) - }) - ) : ( - - ) + }, [dropdownRef, isOpen, setIsOpen, buttonRef, actionSheetRef]) +} + +export const Dropdown = ({ + children, + buttonProps, + items = [], + chevron = true, + align = 'left', + menuLabelAlign, + width = 150, + mobileWidth = width, + shortThrow = false, + keepMenuOnTop = false, + label, + direction = 'down', + isOpen: _isOpen, + setIsOpen: _setIsOpen, + indicatorColor, + responsive = true, + cancelLabel = 'Cancel', + ...props +}: Props & (PropsWithIsOpen | PropsWithoutIsOpen)) => { + const dropdownRef = React.useRef() + const buttonRef = React.useRef(null) + const actionSheetRef = React.useRef(null) + const internalOpen = React.useState(false) + const [isOpen, setIsOpen] = _setIsOpen ? [_isOpen, _setIsOpen] : internalOpen + + useClickOutside(dropdownRef, buttonRef, actionSheetRef, setIsOpen, isOpen) + const screenSize = useScreenSize() return ( <> - {button} - - } - width={width} + + {match({ responsive, screenSize }) + .with( + { responsive: false, screenSize: P._ }, + { + responsive: true, + screenSize: P.when((screenSize) => screenSize >= breakpoints.sm), + }, + () => ( + + } + width={width} + /> + ), + ) + .with( + { + responsive: true, + screenSize: P.when((screenSize) => screenSize < breakpoints.sm), + }, + () => ( + + ), + ) + .otherwise(() => ( +
+ ))} ) } diff --git a/components/src/components/molecules/Modal/Modal.tsx b/components/src/components/molecules/Modal/Modal.tsx index ca8d8494..10a9a84e 100644 --- a/components/src/components/molecules/Modal/Modal.tsx +++ b/components/src/components/molecules/Modal/Modal.tsx @@ -7,8 +7,12 @@ import { mq } from '@/src/utils/responsiveHelpers' import { Backdrop } from '../..' -const Container = styled.div<{ $state: TransitionState; $alignTop?: boolean }>( - ({ theme, $state, $alignTop }) => css` +const Container = styled.div<{ + $state: TransitionState + $alignTop?: boolean + $mobileOnly: boolean +}>( + ({ theme, $state, $alignTop, $mobileOnly }) => css` width: 100%; position: fixed; @@ -27,12 +31,15 @@ const Container = styled.div<{ $state: TransitionState; $alignTop?: boolean }>( flex-direction: row; ${mq.sm.min(css` - width: min-content; + ${!$mobileOnly && + css` + width: min-content; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - bottom: initial; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + bottom: initial; + `} `)} transition: ${theme.transitionDuration['300']} all @@ -64,6 +71,8 @@ type Props = { alignTop?: boolean /** A callback fired on the render of children */ renderCallback?: () => void + /** if true, modal will remain centered to bottom of page */ + mobileOnly?: boolean } & NativeDivProps export const Modal = ({ @@ -73,6 +82,7 @@ export const Modal = ({ open, alignTop, renderCallback, + mobileOnly = false, ...props }: Props) => ( {({ state }) => ( - + {children} )} diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx index c9d0185d..d8ce1882 100644 --- a/components/src/components/molecules/Profile/Profile.tsx +++ b/components/src/components/molecules/Profile/Profile.tsx @@ -179,6 +179,7 @@ export const Profile = ({ isOpen, setIsOpen, align: alignDropdown, + responsive: false, }} > { type Callback = (...args: any[]) => void -/* eslint-disable @typescript-eslint/no-empty-function */ const noop = () => {} -/* eslint-enable @typescript-eslint/no-empty-function */ export const useFallbackState = ( stateKey: string | undefined, diff --git a/docs/src/types/styled-components.d.ts b/docs/src/types/styled-components.d.ts index 60624349..2d04698d 100644 --- a/docs/src/types/styled-components.d.ts +++ b/docs/src/types/styled-components.d.ts @@ -4,6 +4,5 @@ import 'styled-components' type Theme = typeof lightTheme declare module 'styled-components' { - // eslint-disable-next-line @typescript-eslint/no-empty-interface interface DefaultTheme extends Theme {} } diff --git a/package.json b/package.json index 92b34476..9b4ee1f8 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "dev": "pnpm m run dev", "gen:component": "pnpm node scripts/generateComponent.js", "gen:icons": "pnpm node scripts/generateIcons.js", - "lint": "eslint . --cache", - "lint:fix": "pnpm lint --fix", + "lint": "pnpm m-all lint", + "lint:components": "pnpm -F @ensdomains/thorin lint", + "lint:docs": "pnpm -F docs lint", + "lint:fix": "pnpm m-all lint:fix", "lint:format": "prettier --write .", "lint:types": "pnpm m-all lint:types", "lint:styles": "stylelint", @@ -24,7 +26,8 @@ }, "lint-staged": { "*.{js,mdx,ts,tsx}": [ - "pnpm lint:fix" + "pnpm lint:components", + "pnpm lint:docs" ], "*.tsx": [ "pnpm lint:styles" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f5f472eb..5b47c41e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -136,6 +136,7 @@ importers: rimraf: ^3.0.2 ts-jest: ^27.0.7 ts-node: ^10.4.0 + ts-pattern: ^4.3.0 typescript: 4.9.4 vite: ^3.2.5 vite-plugin-babel-macros: ^1.0.6 @@ -147,6 +148,7 @@ importers: clsx: 1.2.1 focus-visible: 5.2.0 lodash: 4.17.21 + ts-pattern: 4.3.0 devDependencies: '@babel/core': 7.20.5 '@honkhonk/vite-plugin-svgr': 1.1.0_vite@3.2.5 @@ -307,6 +309,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/highlight': 7.16.10 + dev: true /@babel/code-frame/7.18.6: resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} @@ -399,14 +402,6 @@ packages: jsesc: 2.5.2 dev: true - /@babel/generator/7.18.2: - resolution: {integrity: sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.20.5 - '@jridgewell/gen-mapping': 0.3.1 - jsesc: 2.5.2 - /@babel/generator/7.20.5: resolution: {integrity: sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==} engines: {node: '>=6.9.0'} @@ -579,13 +574,6 @@ packages: dependencies: '@babel/types': 7.20.5 - /@babel/helper-function-name/7.17.9: - resolution: {integrity: sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/template': 7.16.7 - '@babel/types': 7.20.5 - /@babel/helper-function-name/7.18.9: resolution: {integrity: sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==} engines: {node: '>=6.9.0'} @@ -600,12 +588,6 @@ packages: '@babel/template': 7.18.10 '@babel/types': 7.20.5 - /@babel/helper-hoist-variables/7.16.7: - resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.20.5 - /@babel/helper-hoist-variables/7.18.6: resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==} engines: {node: '>=6.9.0'} @@ -618,12 +600,6 @@ packages: dependencies: '@babel/types': 7.20.5 - /@babel/helper-module-imports/7.16.7: - resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.20.5 - /@babel/helper-module-imports/7.18.6: resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} engines: {node: '>=6.9.0'} @@ -842,6 +818,7 @@ packages: '@babel/helper-validator-identifier': 7.16.7 chalk: 2.4.2 js-tokens: 4.0.0 + dev: true /@babel/highlight/7.18.6: resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} @@ -859,13 +836,6 @@ packages: '@babel/types': 7.20.5 dev: true - /@babel/parser/7.18.4: - resolution: {integrity: sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - '@babel/types': 7.20.5 - /@babel/parser/7.20.5: resolution: {integrity: sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==} engines: {node: '>=6.0.0'} @@ -2801,7 +2771,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: core-js-pure: 3.18.1 - regenerator-runtime: 0.13.9 + regenerator-runtime: 0.13.11 dev: true /@babel/runtime/7.15.4: @@ -2817,6 +2787,13 @@ packages: dependencies: regenerator-runtime: 0.13.9 + /@babel/runtime/7.21.5: + resolution: {integrity: sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.13.11 + dev: true + /@babel/standalone/7.18.10: resolution: {integrity: sha512-0KWHiRX9TUHiWE+dKYYEOIiRJcPwGU6u8Bq/p+ldekj7Kew9PCwl4S4FTSEPpTrn3Vc+r3iRSaN1l9AcGgLx4Q==} engines: {node: '>=6.9.0'} @@ -2856,24 +2833,24 @@ packages: - supports-color dev: true - /@babel/traverse/7.18.2_supports-color@5.5.0: - resolution: {integrity: sha512-9eNwoeovJ6KH9zcCNnENY7DMFwTU9JdGCFtqNLfUAqtUHRCOsTOqWoffosP8vKmNYeSBUv3yVJXjfd8ucwOjUA==} + /@babel/traverse/7.20.5: + resolution: {integrity: sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.16.7 - '@babel/generator': 7.18.2 - '@babel/helper-environment-visitor': 7.18.2 - '@babel/helper-function-name': 7.17.9 - '@babel/helper-hoist-variables': 7.16.7 - '@babel/helper-split-export-declaration': 7.16.7 - '@babel/parser': 7.18.4 + '@babel/code-frame': 7.18.6 + '@babel/generator': 7.20.5 + '@babel/helper-environment-visitor': 7.18.9 + '@babel/helper-function-name': 7.19.0 + '@babel/helper-hoist-variables': 7.18.6 + '@babel/helper-split-export-declaration': 7.18.6 + '@babel/parser': 7.20.5 '@babel/types': 7.20.5 - debug: 4.3.4_supports-color@5.5.0 + debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: - supports-color - /@babel/traverse/7.20.5: + /@babel/traverse/7.20.5_supports-color@5.5.0: resolution: {integrity: sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==} engines: {node: '>=6.9.0'} dependencies: @@ -2885,7 +2862,7 @@ packages: '@babel/helper-split-export-declaration': 7.18.6 '@babel/parser': 7.20.5 '@babel/types': 7.20.5 - debug: 4.3.4 + debug: 4.3.4_supports-color@5.5.0 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -3269,14 +3246,6 @@ packages: chalk: 4.1.2 dev: true - /@jridgewell/gen-mapping/0.3.1: - resolution: {integrity: sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/set-array': 1.1.1 - '@jridgewell/sourcemap-codec': 1.4.11 - '@jridgewell/trace-mapping': 0.3.13 - /@jridgewell/gen-mapping/0.3.2: resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} engines: {node: '>=6.0.0'} @@ -5357,7 +5326,7 @@ packages: resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==} engines: {node: '>=6.0'} dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.21.5 '@babel/runtime-corejs3': 7.15.4 dev: true @@ -6128,6 +6097,15 @@ packages: wrap-ansi: 7.0.0 dev: true + /cliui/8.0.1: + resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} + engines: {node: '>=12'} + dependencies: + string-width: 4.2.3 + strip-ansi: 6.0.1 + wrap-ansi: 7.0.0 + dev: true + /clone-deep/4.0.1: resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==} engines: {node: '>=6'} @@ -7568,7 +7546,7 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.21.5 aria-query: 4.2.2 array-includes: 3.1.6 ast-types-flow: 0.0.7 @@ -7768,7 +7746,7 @@ packages: resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==} engines: {node: '>=0.10'} dependencies: - estraverse: 5.2.0 + estraverse: 5.3.0 dev: true /esrecurse/4.3.0: @@ -7786,7 +7764,7 @@ packages: '@sitespeed.io/tracium': 0.3.3 nanoid: 3.3.4 puppeteer-core: 10.4.0 - yargs: 17.2.1 + yargs: 17.7.2 transitivePeerDependencies: - bufferutil - supports-color @@ -7797,11 +7775,6 @@ packages: resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==} engines: {node: '>=4.0'} - /estraverse/5.2.0: - resolution: {integrity: sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==} - engines: {node: '>=4.0'} - dev: true - /estraverse/5.3.0: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} @@ -11753,6 +11726,10 @@ packages: /regenerate/1.4.2: resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==} + /regenerator-runtime/0.13.11: + resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} + dev: true + /regenerator-runtime/0.13.9: resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} @@ -12624,8 +12601,8 @@ packages: react-dom: '>= 16.8.0' react-is: '>= 16.8.0' dependencies: - '@babel/helper-module-imports': 7.16.7 - '@babel/traverse': 7.18.2_supports-color@5.5.0 + '@babel/helper-module-imports': 7.18.6 + '@babel/traverse': 7.20.5_supports-color@5.5.0 '@emotion/is-prop-valid': 0.8.8 '@emotion/stylis': 0.8.5 '@emotion/unitless': 0.7.5 @@ -13148,6 +13125,10 @@ packages: yn: 3.1.1 dev: true + /ts-pattern/4.3.0: + resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==} + dev: false + /tsconfck/2.0.1_typescript@4.9.4: resolution: {integrity: sha512-/ipap2eecmVBmBlsQLBRbUmUNFwNJV/z2E+X0FPtHNjPwroMZQ7m39RMaCywlCulBheYXgMdUlWDd9rzxwMA0Q==} engines: {node: ^14.13.1 || ^16 || >=18, pnpm: ^7.0.1} @@ -14039,6 +14020,11 @@ packages: engines: {node: '>=10'} dev: true + /yargs-parser/21.1.1: + resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} + engines: {node: '>=12'} + dev: true + /yargs/16.2.0: resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==} engines: {node: '>=10'} @@ -14052,17 +14038,17 @@ packages: yargs-parser: 20.2.9 dev: true - /yargs/17.2.1: - resolution: {integrity: sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==} + /yargs/17.7.2: + resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} engines: {node: '>=12'} dependencies: - cliui: 7.0.4 + cliui: 8.0.1 escalade: 3.1.1 get-caller-file: 2.0.5 require-directory: 2.1.1 string-width: 4.2.3 y18n: 5.0.8 - yargs-parser: 20.2.9 + yargs-parser: 21.1.1 dev: true /yauzl/2.10.0: