From aa8702b747bffd6be4aa27f77286d142a91b2274 Mon Sep 17 00:00:00 2001 From: yusixian <3450414733@qq.com> Date: Sun, 3 Sep 2023 15:33:53 +0800 Subject: [PATCH 1/4] fix: Button styles & Tab Indicator --- .changeset/brown-lobsters-cry.md | 6 + packages/components/package.json | 2 +- packages/components/src/Button/Button.tsx | 17 +- packages/components/src/Button/demo/index.tsx | 1 - .../src/FloatButtonGroup/demo/index.css | 3 - .../src/FloatButtonGroup/demo/index.tsx | 190 +++++---- packages/components/src/Loading/Loading.tsx | 4 +- packages/components/src/Tabs/Tab.tsx | 12 +- packages/components/src/Tabs/TabList.tsx | 35 +- packages/components/src/Tabs/demo/index.tsx | 128 ++++-- packages/components/src/globals.css | 7 + packages/example/src/css/custom.css | 11 + pnpm-lock.yaml | 375 ++++++++++++++---- 13 files changed, 554 insertions(+), 237 deletions(-) create mode 100644 .changeset/brown-lobsters-cry.md delete mode 100644 packages/components/src/FloatButtonGroup/demo/index.css diff --git a/.changeset/brown-lobsters-cry.md b/.changeset/brown-lobsters-cry.md new file mode 100644 index 0000000..ea83a24 --- /dev/null +++ b/.changeset/brown-lobsters-cry.md @@ -0,0 +1,6 @@ +--- +'@dance-ui/ui': patch +'@dance-ui/example': patch +--- + +fix: Button styles & Tab Indicator diff --git a/packages/components/package.json b/packages/components/package.json index add0fde..df8326a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -61,7 +61,7 @@ "jest": "^29.4.3", "jest-environment-jsdom": "^29.4.3", "postcss": "^8.4.21", - "tailwindcss": "^3.2.4", + "tailwindcss": "^3.3.3", "ts-babel": "^6.1.7", "ts-node": "^10.9.1", "vite-plugin-libcss": "^1.0.5" diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx index 53fe21d..d650f65 100644 --- a/packages/components/src/Button/Button.tsx +++ b/packages/components/src/Button/Button.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames' import { CSSProperties, forwardRef, LegacyRef, ReactNode, useMemo } from 'react' import Loading, { LoadingProps } from '../Loading' +import { twMerge } from 'tailwind-merge' export type ButtonProps = { /** 按钮类型 */ @@ -39,7 +40,7 @@ const ButtonClass = { small: 'px-1', }, typeClass: { - default: 'border-black bg-white text-black enabled:hover:border-dd-primary enabled:hover:text-dd-primary', + default: 'border-dd-primary text-dd-primary enabled:hover:opacity-80', primary: 'border-dd-primary bg-dd-primary text-white enabled:hover:opacity-80', link: 'border-transparent enabled:hover:text-dd-primary', }, @@ -85,18 +86,20 @@ const Button = forwardRef(function ButtonInner( className={ type === 'unstyle' ? className - : classNames( - 'box-border border transition focus:outline-none', - sizeClass[size ?? 'middle'], - _chooseClass[type ?? 'default'], - _disabled ? 'disabled:cursor-not-allowed disabled:opacity-60' : 'cursor-pointer', + : twMerge( + classNames( + 'box-border border transition focus:outline-none', + sizeClass[size ?? 'middle'], + _chooseClass[type ?? 'default'], + _disabled ? 'disabled:cursor-not-allowed disabled:opacity-60' : 'cursor-pointer', + ), className, ) } style={style} onClick={_disabled ? undefined : onClick} disabled={_disabled}> - + {children} ) diff --git a/packages/components/src/Button/demo/index.tsx b/packages/components/src/Button/demo/index.tsx index fdb3600..23910d8 100644 --- a/packages/components/src/Button/demo/index.tsx +++ b/packages/components/src/Button/demo/index.tsx @@ -6,7 +6,6 @@ export default () => ( type 默认为 default 按钮，primary 表示主要按钮，link 表示无边框按钮， unstyle 表示不带任何样式的按钮（方便自己定制） - diff --git a/packages/components/src/FloatButtonGroup/demo/index.css b/packages/components/src/FloatButtonGroup/demo/index.css deleted file mode 100644 index ce24468..0000000 --- a/packages/components/src/FloatButtonGroup/demo/index.css +++ /dev/null @@ -1,3 +0,0 @@ -li { - margin: 0 !important; -} \ No newline at end of file diff --git a/packages/components/src/FloatButtonGroup/demo/index.tsx b/packages/components/src/FloatButtonGroup/demo/index.tsx index b809618..d7f51a8 100644 --- a/packages/components/src/FloatButtonGroup/demo/index.tsx +++ b/packages/components/src/FloatButtonGroup/demo/index.tsx @@ -1,118 +1,136 @@ -import React from 'react'; -import FloatButtonGroup from '../../FloatButtonGroup'; -import { configItemType } from '../../FloatButtonGroup'; -import { IconType } from '../../Icon'; -import Icon from '../../Icon'; -import './index.css'; +import React from 'react' +import FloatButtonGroup from '../../FloatButtonGroup' +import { configItemType } from '../../FloatButtonGroup' +import { IconType } from '../../Icon' +import Icon from '../../Icon' + const TBconfigs: configItemType[] = [ - { - description: '淘宝', - type: "link", - action: { - href: "www.taobao.com", - target: '_blank' - } + { + description: '淘宝', + type: 'link', + action: { + href: 'www.taobao.com', + target: '_blank', }, - { - description: "按钮", - type: "button", - action: { - onClick: () => { - alert("淘宝风格"); - } - } + }, + { + description: '按钮', + type: 'button', + action: { + onClick: () => { + alert('淘宝风格') + }, }, - { - description: "电脑", - type: "elevator", - action: { - top: 1300 - } + }, + { + description: '电脑', + type: 'elevator', + action: { + top: 1300, }, - { - description: <> -
- + }, + { + description: ( + <> +
+
回到顶部
- , - type: "backTop", - action: { - visibleheight: 100, - } - } + + ), + type: 'backTop', + action: { + visibleheight: 100, + }, + }, ] const JDconfigs: configItemType[] = [ { description: '京东', - type: "link", + type: 'link', action: { - href: "www.jd.com", - target: '_blank' - } + href: 'www.jd.com', + target: '_blank', + }, }, { - description: "按钮", - type: "button", + description: '按钮', + type: 'button', action: { onClick: () => { - alert("京东风格"); - } - } + alert('京东风格') + }, + }, }, { - description: "手机", - type: "elevator", + description: '手机', + type: 'elevator', action: { - top: 1000 - } + top: 1000, + }, }, { - description: <> -
- -
回到顶部
-
- , - type: "backTop", + description: ( + <> +
+ +
回到顶部
+
+ + ), + type: 'backTop', action: { visibleheight: 300, - } - } + }, + }, ] export default () => ( -
-
+
-
- 右侧悬浮按钮可操作此滚动盒子 -
- 欢迎点击回到顶部按钮上的icon进入我们的github -
-
-
手机
-
电脑
- - + 欢迎点击回到顶部按钮上的icon进入我们的github
+
+
手机
+
电脑
+ +
-); \ No newline at end of file +
+) diff --git a/packages/components/src/Loading/Loading.tsx b/packages/components/src/Loading/Loading.tsx index 1cea8be..9d49a75 100644 --- a/packages/components/src/Loading/Loading.tsx +++ b/packages/components/src/Loading/Loading.tsx @@ -1,5 +1,5 @@ -import classNames from 'classnames' import React, { ReactNode } from 'react' +import { twMerge } from 'tailwind-merge' import Icon, { IconType } from '../Icon' export type LoadingProps = { @@ -27,7 +27,7 @@ const Loading = ({ show, iconType, renderIcon, className, style, iconClassName, return ( <> {show ? ( -
+
{_renderIcon()}
) : null} diff --git a/packages/components/src/Tabs/Tab.tsx b/packages/components/src/Tabs/Tab.tsx index acb5550..6eefcfb 100644 --- a/packages/components/src/Tabs/Tab.tsx +++ b/packages/components/src/Tabs/Tab.tsx @@ -1,10 +1,11 @@ import classNames from 'classnames' -import { MouseEventHandler, ReactNode } from 'react' +import { MouseEventHandler, ReactNode, useCallback } from 'react' import { twMerge } from 'tailwind-merge' type TabProps = { className?: string indicatorClass?: string + renderIndicator?: (selected?: boolean) => ReactNode children?: ReactNode /** Private */ @@ -12,7 +13,12 @@ type TabProps = { selected?: boolean onClick?: MouseEventHandler } -function Tab({ children, className, indicatorClass, selected, onClick }: TabProps) { +function Tab({ children, className, indicatorClass, renderIndicator, id, selected, onClick }: TabProps) { + const _renderIndicator = useCallback(() => { + if (!selected) return null + if (renderIndicator) return renderIndicator(selected) + return
+ }, [indicatorClass, renderIndicator, selected]) return (
{children} - {selected &&
} + {_renderIndicator()}
) } diff --git a/packages/components/src/Tabs/TabList.tsx b/packages/components/src/Tabs/TabList.tsx index eec8f6c..2275876 100644 --- a/packages/components/src/Tabs/TabList.tsx +++ b/packages/components/src/Tabs/TabList.tsx @@ -1,37 +1,56 @@ -import { cloneElement, useCallback, ReactElement } from 'react' +import { ReactElement, ReactNode, cloneElement, useCallback } from 'react' import { twMerge } from 'tailwind-merge' type TabListProps = { children?: ReactElement[] className?: string - beforeTabChange?: ({ event, idx }: { event: Event; idx: number }) => Promise + beforeTabChange?: ({ event, idx }: { event: Event; idx: number }) => Promise + renderIndicator?: (selected?: boolean) => ReactNode /** Private */ id?: string selected?: number setSelected?: (idx: number) => void } -function TabList({ selected, children, className, beforeTabChange, id = 'default', setSelected }: TabListProps) { +function TabList({ + selected, + children, + className, + beforeTabChange, + id = 'default', + setSelected, + renderIndicator, +}: TabListProps) { const _onClick = useCallback( - async ({ event, idx }: { event: Event; idx: number }) => { - await beforeTabChange?.({ event, idx }) - setSelected?.(idx) + ({ event, idx }: { event: Event; idx: number }) => { + if (!beforeTabChange) { + setSelected?.(idx) + return + } + beforeTabChange({ event, idx }) + .then((isOK) => { + if (isOK) setSelected?.(idx) + }) + .catch((e) => { + console.error(e) + }) }, [beforeTabChange, setSelected], ) const renderTabs = useCallback(() => { return children?.map((tab, idx) => { const onTabClick = (e: Event) => { - void _onClick({ event: e, idx }) // Call the original onClick + _onClick({ event: e, idx }) // Call the original onClick } return cloneElement(tab, { id, selected: idx === selected, onClick: onTabClick, + renderIndicator: tab?.props?.renderIndicator ?? renderIndicator, key: tab?.props?.key ?? `${id}-tab-${idx}`, }) }) - }, [children, id, selected, _onClick]) + }, [children, id, selected, renderIndicator, _onClick]) return
{renderTabs()}
} diff --git a/packages/components/src/Tabs/demo/index.tsx b/packages/components/src/Tabs/demo/index.tsx index e132947..2930d29 100644 --- a/packages/components/src/Tabs/demo/index.tsx +++ b/packages/components/src/Tabs/demo/index.tsx @@ -1,49 +1,97 @@ -import { Tabs, Space } from '@dance-ui/ui' +import { Tabs, Space, Icon, IconType } from '@dance-ui/ui' import React from 'react' const { Tab, TabPanel, TabList } = Tabs const Demo = () => { return ( - - - - Tab 1 - Tab 2 - - -
Panel 1
- - -
Panel 2
- - -

id & beforeTabChange (View Console)

- - { - console.log('toIdx', toIdx) - console.log('It will change after 2000 ms!') - await new Promise((resolve) => setTimeout(resolve, 2000)) - }}> - Tab 1 - Tab 2 - Tab 3 - Tab 4 - - -
Panel 1
- - -
Panel 2
- - -
Panel 3
- - -
Panel 4
- - + +
+

基础使用演示

+ + + Tab 1 + Tab 2 + Tab 3 + Tab 4 + + +
Panel 1
+ + +
Panel 2
+ + +
Panel 3
+ + +
Panel 4
+ + +
+
+

renderIndicator自定义指示器，可以配合framer-motion等给指示器加上动画效果

+ + { + return ( + + + + ) + }}> + Tab 1 + Tab 2 + Tab 3 + Tab 4 + + +
Panel 1
+ + +
Panel 2
+ + +
Panel 3
+ + +
Panel 4
+ + +
+
+

beforeTabChange 可在 Tab 切换时进行拦截，当返回值为 true 时可正常切换，否则不进行切换。点击后请看控制台

+ + { + console.log('beforeTabChange args', { event, idx }) + console.log('It will change after 1000 ms!') + return new Promise((resolve) => + setTimeout(() => { + console.log('resolve!') + resolve(true) + }, 1000), + ) + }}> + Tab 1 + Tab 2 + Tab 3 + Tab 4 + + +
Panel 1
+ + +
Panel 2
+ + +
Panel 3
+ + +
Panel 4
+ + +
) } diff --git a/packages/components/src/globals.css b/packages/components/src/globals.css index f50e9e7..00e6b8d 100644 --- a/packages/components/src/globals.css +++ b/packages/components/src/globals.css @@ -10,4 +10,11 @@ vertical-align: -0.15em; fill: currentColor; } + /* tailwind preset */ + *, + ::before, + ::after { + border-width: 0; + border-style: solid; + } } diff --git a/packages/example/src/css/custom.css b/packages/example/src/css/custom.css index 44a1a9c..dcbea51 100644 --- a/packages/example/src/css/custom.css +++ b/packages/example/src/css/custom.css @@ -17,6 +17,17 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } +div[class^='demo_'] { + color: black; +} + +[data-theme='dark'] div[class^='demo_'] { + color: white; + background-color: black; + border-start-start-radius: 8px; + border-start-end-radius: 8px; +} + /* reset */ button { background-color: unset; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5791d12..a1a8c92 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,7 +74,7 @@ importers: version: 0.2.1(prettier@2.8.3) tailwindcss: specifier: ^3.2.4 - version: 3.2.4(postcss@8.4.21)(ts-node@10.9.1) + version: 3.2.4(postcss@8.4.21) typescript: specifier: ^4.9.4 version: 4.9.4 @@ -135,7 +135,7 @@ importers: version: 10.4.13(postcss@8.4.21) jest: specifier: ^29.4.3 - version: 29.4.3(@types/node@18.11.18)(ts-node@10.9.1) + version: 29.4.3(@types/node@20.5.9)(ts-node@10.9.1) jest-environment-jsdom: specifier: ^29.4.3 version: 29.4.3 @@ -143,14 +143,14 @@ importers: specifier: ^8.4.21 version: 8.4.21 tailwindcss: - specifier: ^3.2.4 - version: 3.2.4(postcss@8.4.21)(ts-node@10.9.1) + specifier: ^3.3.3 + version: 3.3.3(ts-node@10.9.1) ts-babel: specifier: ^6.1.7 version: 6.1.7(typescript@3.9.10) ts-node: specifier: ^10.9.1 - version: 10.9.1(@types/node@18.11.18)(typescript@3.9.10) + version: 10.9.1(@types/node@20.5.9)(typescript@3.9.10) vite-plugin-libcss: specifier: ^1.0.5 version: 1.0.5(vite@2.9.16) @@ -381,12 +381,17 @@ packages: '@algolia/requester-common': 4.19.1 dev: false + /@alloc/quick-lru@5.2.0: + resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} + engines: {node: '>=10'} + dev: true + /@ampproject/remapping@2.2.0: resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==} engines: {node: '>=6.0.0'} dependencies: '@jridgewell/gen-mapping': 0.1.1 - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/trace-mapping': 0.3.19 /@ampproject/remapping@2.2.1: resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} @@ -436,7 +441,7 @@ packages: gensync: 1.0.0-beta.2 json5: 2.2.3 lodash: 4.17.21 - resolve: 1.22.1 + resolve: 1.22.4 semver: 5.7.1 source-map: 0.5.7 transitivePeerDependencies: @@ -493,7 +498,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.20.7 - '@jridgewell/gen-mapping': 0.3.2 + '@jridgewell/gen-mapping': 0.3.3 jsesc: 2.5.2 /@babel/generator@7.22.10: @@ -627,7 +632,7 @@ packages: '@babel/helper-plugin-utils': 7.20.2 debug: 4.3.4(supports-color@5.5.0) lodash.debounce: 4.0.8 - resolve: 1.22.1 + resolve: 1.22.4 semver: 6.3.0 transitivePeerDependencies: - supports-color @@ -643,7 +648,7 @@ packages: '@babel/helper-plugin-utils': 7.20.2 debug: 4.3.4(supports-color@5.5.0) lodash.debounce: 4.0.8 - resolve: 1.22.1 + resolve: 1.22.4 semver: 6.3.0 transitivePeerDependencies: - supports-color @@ -3664,7 +3669,7 @@ packages: infima: 0.2.0-alpha.42 lodash: 4.17.21 nprogress: 0.2.0 - postcss: 8.4.21 + postcss: 8.4.29 prism-react-renderer: 1.3.5(react@17.0.2) prismjs: 1.29.0 react: 17.0.2 @@ -4274,7 +4279,7 @@ packages: '@jest/test-result': 29.4.3 '@jest/transform': 29.4.3 '@jest/types': 29.4.3 - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/trace-mapping': 0.3.19 '@types/node': 18.11.18 chalk: 4.1.2 collect-v8-coverage: 1.0.1 @@ -4315,9 +4320,9 @@ packages: resolution: {integrity: sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/trace-mapping': 0.3.19 callsites: 3.1.0 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 dev: true /@jest/test-result@29.4.3: @@ -4335,7 +4340,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/test-result': 29.4.3 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 jest-haste-map: 29.4.3 slash: 3.0.0 dev: true @@ -4346,7 +4351,7 @@ packages: dependencies: '@babel/core': 7.20.12 '@jest/types': 29.4.3 - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/trace-mapping': 0.3.19 babel-plugin-istanbul: 6.1.1 chalk: 4.1.2 convert-source-map: 2.0.0 @@ -4356,7 +4361,7 @@ packages: jest-regex-util: 29.4.3 jest-util: 29.4.3 micromatch: 4.0.5 - pirates: 4.0.5 + pirates: 4.0.6 slash: 3.0.0 write-file-atomic: 4.0.2 transitivePeerDependencies: @@ -4401,15 +4406,7 @@ packages: engines: {node: '>=6.0.0'} dependencies: '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.14 - - /@jridgewell/gen-mapping@0.3.2: - resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.14 - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/sourcemap-codec': 1.4.15 /@jridgewell/gen-mapping@0.3.3: resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} @@ -4419,10 +4416,6 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.19 - /@jridgewell/resolve-uri@3.1.0: - resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==} - engines: {node: '>=6.0.0'} - /@jridgewell/resolve-uri@3.1.1: resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==} engines: {node: '>=6.0.0'} @@ -4434,8 +4427,8 @@ packages: /@jridgewell/source-map@0.3.2: resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==} dependencies: - '@jridgewell/gen-mapping': 0.3.2 - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.19 /@jridgewell/source-map@0.3.5: resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==} @@ -4446,16 +4439,11 @@ packages: /@jridgewell/sourcemap-codec@1.4.14: resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==} + dev: true /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} - /@jridgewell/trace-mapping@0.3.17: - resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==} - dependencies: - '@jridgewell/resolve-uri': 3.1.0 - '@jridgewell/sourcemap-codec': 1.4.14 - /@jridgewell/trace-mapping@0.3.19: resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==} dependencies: @@ -4465,8 +4453,8 @@ packages: /@jridgewell/trace-mapping@0.3.9: resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==} dependencies: - '@jridgewell/resolve-uri': 3.1.0 - '@jridgewell/sourcemap-codec': 1.4.14 + '@jridgewell/resolve-uri': 3.1.1 + '@jridgewell/sourcemap-codec': 1.4.15 dev: true /@leichtgewicht/ip-codec@2.0.4: @@ -5276,6 +5264,10 @@ packages: /@types/node@18.11.18: resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==} + /@types/node@20.5.9: + resolution: {integrity: sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==} + dev: true + /@types/normalize-package-data@2.4.1: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} dev: true @@ -6156,6 +6148,10 @@ packages: engines: {node: '>=12'} dev: false + /any-promise@1.3.0: + resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} + dev: true + /anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} @@ -6311,7 +6307,7 @@ packages: babel-plugin-istanbul: 6.1.1 babel-preset-jest: 29.4.3(@babel/core@7.20.12) chalk: 4.1.2 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 slash: 3.0.0 transitivePeerDependencies: - supports-color @@ -7050,6 +7046,11 @@ packages: /commander@2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + /commander@4.1.1: + resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} + engines: {node: '>= 6'} + dev: true + /commander@5.1.0: resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==} engines: {node: '>= 6'} @@ -7179,7 +7180,7 @@ packages: peerDependencies: webpack: ^5.1.0 dependencies: - fast-glob: 3.2.12 + fast-glob: 3.3.1 glob-parent: 6.0.2 globby: 13.1.3 normalize-path: 3.0.0 @@ -7462,7 +7463,7 @@ packages: postcss: ^8.2.15 dependencies: cssnano-preset-default: 5.2.13(postcss@8.4.21) - lilconfig: 2.0.6 + lilconfig: 2.1.0 postcss: 8.4.21 yaml: 1.10.2 dev: false @@ -7674,7 +7675,7 @@ packages: engines: {node: '>=10'} dependencies: globby: 11.1.0 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 is-glob: 4.0.3 is-path-cwd: 2.2.0 is-path-inside: 3.0.3 @@ -8829,6 +8830,17 @@ packages: glob-parent: 5.1.2 merge2: 1.4.1 micromatch: 4.0.5 + dev: true + + /fast-glob@3.3.1: + resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} + engines: {node: '>=8.6.0'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 /fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} @@ -9126,7 +9138,7 @@ packages: resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} engines: {node: '>=12'} dependencies: - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 jsonfile: 6.1.0 universalify: 2.0.0 dev: false @@ -9260,6 +9272,17 @@ packages: /glob-to-regexp@0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} + /glob@7.1.6: + resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 3.1.2 + once: 1.4.0 + path-is-absolute: 1.0.1 + dev: true + /glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} dependencies: @@ -9336,7 +9359,7 @@ packages: dependencies: array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.2.12 + fast-glob: 3.3.1 ignore: 5.2.4 merge2: 1.4.1 slash: 3.0.0 @@ -9346,7 +9369,7 @@ packages: engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dependencies: dir-glob: 3.0.1 - fast-glob: 3.2.12 + fast-glob: 3.3.1 ignore: 5.2.4 merge2: 1.4.1 slash: 4.0.0 @@ -9378,10 +9401,10 @@ packages: /graceful-fs@4.2.10: resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==} + dev: true /graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} - requiresBuild: true /grapheme-splitter@1.0.4: resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==} @@ -9998,12 +10021,12 @@ packages: resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==} dependencies: has: 1.0.3 + dev: true /is-core-module@2.13.0: resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==} dependencies: has: 1.0.3 - dev: true /is-date-object@1.0.5: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} @@ -10379,7 +10402,7 @@ packages: - supports-color dev: true - /jest-cli@29.4.3(@types/node@18.11.18)(ts-node@10.9.1): + /jest-cli@29.4.3(@types/node@20.5.9)(ts-node@10.9.1): resolution: {integrity: sha512-PiiAPuFNfWWolCE6t3ZrDXQc6OsAuM3/tVW0u27UWc1KE+n/HSn5dSE6B2juqN7WP+PP0jAcnKtGmI4u8GMYCg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -10396,7 +10419,7 @@ packages: exit: 0.1.2 graceful-fs: 4.2.10 import-local: 3.1.0 - jest-config: 29.4.3(@types/node@18.11.18)(ts-node@10.9.1) + jest-config: 29.4.3(@types/node@20.5.9)(ts-node@10.9.1) jest-util: 29.4.3 jest-validate: 29.4.3 prompts: 2.4.2 @@ -10442,7 +10465,47 @@ packages: pretty-format: 29.4.3 slash: 3.0.0 strip-json-comments: 3.1.1 - ts-node: 10.9.1(@types/node@18.11.18)(typescript@3.9.10) + ts-node: 10.9.1(@types/node@20.5.9)(typescript@3.9.10) + transitivePeerDependencies: + - supports-color + dev: true + + /jest-config@29.4.3(@types/node@20.5.9)(ts-node@10.9.1): + resolution: {integrity: sha512-eCIpqhGnIjdUCXGtLhz4gdDoxKSWXKjzNcc5r+0S1GKOp2fwOipx5mRcwa9GB/ArsxJ1jlj2lmlD9bZAsBxaWQ==} + engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} + peerDependencies: + '@types/node': '*' + ts-node: '>=9.0.0' + peerDependenciesMeta: + '@types/node': + optional: true + ts-node: + optional: true + dependencies: + '@babel/core': 7.20.12 + '@jest/test-sequencer': 29.4.3 + '@jest/types': 29.4.3 + '@types/node': 20.5.9 + babel-jest: 29.4.3(@babel/core@7.20.12) + chalk: 4.1.2 + ci-info: 3.7.1 + deepmerge: 4.2.2 + glob: 7.2.3 + graceful-fs: 4.2.10 + jest-circus: 29.4.3 + jest-environment-node: 29.4.3 + jest-get-type: 29.4.3 + jest-regex-util: 29.4.3 + jest-resolve: 29.4.3 + jest-runner: 29.4.3 + jest-util: 29.4.3 + jest-validate: 29.4.3 + micromatch: 4.0.5 + parse-json: 5.2.0 + pretty-format: 29.4.3 + slash: 3.0.0 + strip-json-comments: 3.1.1 + ts-node: 10.9.1(@types/node@20.5.9)(typescript@3.9.10) transitivePeerDependencies: - supports-color dev: true @@ -10638,7 +10701,7 @@ packages: jest-pnp-resolver: 1.2.3(jest-resolve@29.4.3) jest-util: 29.4.3 jest-validate: 29.4.3 - resolve: 1.22.1 + resolve: 1.22.4 resolve.exports: 2.0.0 slash: 3.0.0 dev: true @@ -10812,7 +10875,7 @@ packages: supports-color: 8.1.1 dev: true - /jest@29.4.3(@types/node@18.11.18)(ts-node@10.9.1): + /jest@29.4.3(@types/node@20.5.9)(ts-node@10.9.1): resolution: {integrity: sha512-XvK65feuEFGZT8OO0fB/QAQS+LGHvQpaadkH5p47/j3Ocqq3xf2pK9R+G0GzgfuhXVxEv76qCOOcMb5efLk6PA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -10825,13 +10888,18 @@ packages: '@jest/core': 29.4.3(ts-node@10.9.1) '@jest/types': 29.4.3 import-local: 3.1.0 - jest-cli: 29.4.3(@types/node@18.11.18)(ts-node@10.9.1) + jest-cli: 29.4.3(@types/node@20.5.9)(ts-node@10.9.1) transitivePeerDependencies: - '@types/node' - supports-color - ts-node dev: true + /jiti@1.19.3: + resolution: {integrity: sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==} + hasBin: true + dev: true + /jju@1.4.0: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} dev: true @@ -11034,12 +11102,17 @@ packages: is-plain-object: 5.0.0 object.map: 1.0.1 rechoir: 0.8.0 - resolve: 1.22.1 + resolve: 1.22.4 dev: true /lilconfig@2.0.6: resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==} engines: {node: '>=10'} + dev: true + + /lilconfig@2.1.0: + resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} + engines: {node: '>=10'} /lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} @@ -11048,7 +11121,7 @@ packages: resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} engines: {node: '>=6'} dependencies: - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 js-yaml: 3.14.1 pify: 4.0.1 strip-bom: 3.0.0 @@ -11453,6 +11526,14 @@ packages: resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==} dev: true + /mz@2.7.0: + resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} + dependencies: + any-promise: 1.3.0 + object-assign: 4.1.1 + thenify-all: 1.6.0 + dev: true + /nano-css@5.3.5(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==} peerDependencies: @@ -11480,7 +11561,6 @@ packages: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - dev: true /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} @@ -11544,7 +11624,7 @@ packages: lodash.get: 4.4.2 lower-case: 2.0.2 mkdirp: 1.0.4 - resolve: 1.22.1 + resolve: 1.22.4 title-case: 3.0.3 upper-case: 2.0.2 dev: true @@ -11559,7 +11639,7 @@ packages: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: hosted-git-info: 2.8.9 - resolve: 1.22.1 + resolve: 1.22.4 semver: 5.7.1 validate-npm-package-license: 3.0.4 dev: true @@ -12028,8 +12108,8 @@ packages: engines: {node: '>=6'} dev: true - /pirates@4.0.5: - resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==} + /pirates@4.0.6: + resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} dev: true @@ -12067,7 +12147,7 @@ packages: postcss: ^8.2.2 dependencies: postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 dev: false @@ -12138,7 +12218,7 @@ packages: postcss: ^8.2.15 dependencies: postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 dev: false /postcss-import@14.1.0(postcss@8.4.21): @@ -12153,6 +12233,18 @@ packages: resolve: 1.22.1 dev: true + /postcss-import@15.1.0(postcss@8.4.29): + resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} + engines: {node: '>=14.0.0'} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss: 8.4.29 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.4 + dev: true + /postcss-js@4.0.0(postcss@8.4.21): resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} engines: {node: ^12 || ^14 || >= 16} @@ -12163,7 +12255,17 @@ packages: postcss: 8.4.21 dev: true - /postcss-load-config@3.1.4(postcss@8.4.21)(ts-node@10.9.1): + /postcss-js@4.0.1(postcss@8.4.29): + resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.4.21 + dependencies: + camelcase-css: 2.0.1 + postcss: 8.4.29 + dev: true + + /postcss-load-config@3.1.4(postcss@8.4.21): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: @@ -12177,10 +12279,27 @@ packages: dependencies: lilconfig: 2.0.6 postcss: 8.4.21 - ts-node: 10.9.1(@types/node@18.11.18)(typescript@3.9.10) yaml: 1.10.2 dev: true + /postcss-load-config@4.0.1(postcss@8.4.29)(ts-node@10.9.1): + resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} + engines: {node: '>= 14'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + dependencies: + lilconfig: 2.1.0 + postcss: 8.4.29 + ts-node: 10.9.1(@types/node@20.5.9)(typescript@3.9.10) + yaml: 2.3.2 + dev: true + /postcss-loader@7.0.2(postcss@8.4.21)(webpack@5.75.0): resolution: {integrity: sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==} engines: {node: '>= 14.15.0'} @@ -12227,7 +12346,7 @@ packages: caniuse-api: 3.0.0 cssnano-utils: 3.1.0(postcss@8.4.21) postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 dev: false /postcss-minify-font-values@5.1.0(postcss@8.4.21): @@ -12271,7 +12390,7 @@ packages: postcss: ^8.2.15 dependencies: postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 dev: false /postcss-modules-extract-imports@3.0.0(postcss@8.4.21): @@ -12291,7 +12410,7 @@ packages: dependencies: icss-utils: 5.1.0(postcss@8.4.21) postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 dev: false @@ -12302,7 +12421,7 @@ packages: postcss: ^8.1.0 dependencies: postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 dev: false /postcss-modules-values@4.0.0(postcss@8.4.21): @@ -12325,6 +12444,16 @@ packages: postcss-selector-parser: 6.0.11 dev: true + /postcss-nested@6.0.1(postcss@8.4.29): + resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + dependencies: + postcss: 8.4.29 + postcss-selector-parser: 6.0.13 + dev: true + /postcss-normalize-charset@5.1.0(postcss@8.4.21): resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} @@ -12464,6 +12593,14 @@ packages: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 + dev: true + + /postcss-selector-parser@6.0.13: + resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 /postcss-sort-media-queries@4.3.0(postcss@8.4.21): resolution: {integrity: sha512-jAl8gJM2DvuIJiI9sL1CuiHtKM4s5aEIomkU8G3LFvbP+p8i7Sz8VV63uieTgoewGqKbi+hxBTiOKJlB35upCg==} @@ -12493,7 +12630,7 @@ packages: postcss: ^8.2.15 dependencies: postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 dev: false /postcss-value-parser@4.2.0: @@ -12523,7 +12660,6 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /preferred-pm@3.0.3: resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==} @@ -13086,14 +13222,14 @@ packages: resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} engines: {node: '>= 0.10'} dependencies: - resolve: 1.22.1 + resolve: 1.22.4 dev: false /rechoir@0.8.0: resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==} engines: {node: '>= 10.13.0'} dependencies: - resolve: 1.22.1 + resolve: 1.22.4 dev: true /recursive-readdir@2.2.3: @@ -13330,6 +13466,7 @@ packages: is-core-module: 2.11.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 + dev: true /resolve@1.22.4: resolution: {integrity: sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==} @@ -13338,13 +13475,12 @@ packages: is-core-module: 2.13.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: true /resolve@2.0.0-next.4: resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==} hasBin: true dependencies: - is-core-module: 2.11.0 + is-core-module: 2.13.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 dev: true @@ -13418,7 +13554,7 @@ packages: dependencies: find-up: 5.0.0 picocolors: 1.0.0 - postcss: 8.4.21 + postcss: 8.4.29 strip-json-comments: 3.1.1 dev: false @@ -14142,13 +14278,27 @@ packages: dependencies: browserslist: 4.21.4 postcss: 8.4.21 - postcss-selector-parser: 6.0.11 + postcss-selector-parser: 6.0.13 dev: false /stylis@4.3.0: resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==} dev: false + /sucrase@3.34.0: + resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==} + engines: {node: '>=8'} + hasBin: true + dependencies: + '@jridgewell/gen-mapping': 0.3.3 + commander: 4.1.1 + glob: 7.1.6 + lines-and-columns: 1.2.4 + mz: 2.7.0 + pirates: 4.0.6 + ts-interface-checker: 0.1.13 + dev: true + /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -14197,7 +14347,7 @@ packages: resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==} dev: false - /tailwindcss@3.2.4(postcss@8.4.21)(ts-node@10.9.1): + /tailwindcss@3.2.4(postcss@8.4.21): resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} engines: {node: '>=12.13.0'} hasBin: true @@ -14221,7 +14371,7 @@ packages: postcss: 8.4.21 postcss-import: 14.1.0(postcss@8.4.21) postcss-js: 4.0.0(postcss@8.4.21) - postcss-load-config: 3.1.4(postcss@8.4.21)(ts-node@10.9.1) + postcss-load-config: 3.1.4(postcss@8.4.21) postcss-nested: 6.0.0(postcss@8.4.21) postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 @@ -14231,6 +14381,37 @@ packages: - ts-node dev: true + /tailwindcss@3.3.3(ts-node@10.9.1): + resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.5.3 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.1 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.19.3 + lilconfig: 2.1.0 + micromatch: 4.0.5 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.0.0 + postcss: 8.4.29 + postcss-import: 15.1.0(postcss@8.4.29) + postcss-js: 4.0.1(postcss@8.4.29) + postcss-load-config: 4.0.1(postcss@8.4.29)(ts-node@10.9.1) + postcss-nested: 6.0.1(postcss@8.4.29) + postcss-selector-parser: 6.0.13 + resolve: 1.22.4 + sucrase: 3.34.0 + transitivePeerDependencies: + - ts-node + dev: true + /tapable@1.1.3: resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==} engines: {node: '>=6'} @@ -14261,7 +14442,7 @@ packages: uglify-js: optional: true dependencies: - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/trace-mapping': 0.3.19 jest-worker: 27.5.1 schema-utils: 3.1.1 serialize-javascript: 6.0.1 @@ -14325,6 +14506,19 @@ packages: /text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} + /thenify-all@1.6.0: + resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} + engines: {node: '>=0.8'} + dependencies: + thenify: 3.3.1 + dev: true + + /thenify@3.3.1: + resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + dependencies: + any-promise: 1.3.0 + dev: true + /throttle-debounce@2.3.0: resolution: {integrity: sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==} engines: {node: '>=8'} @@ -14450,7 +14644,11 @@ packages: resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==} dev: false - /ts-node@10.9.1(@types/node@18.11.18)(typescript@3.9.10): + /ts-interface-checker@0.1.13: + resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + dev: true + + /ts-node@10.9.1(@types/node@20.5.9)(typescript@3.9.10): resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} hasBin: true peerDependencies: @@ -14469,7 +14667,7 @@ packages: '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.3 - '@types/node': 18.11.18 + '@types/node': 20.5.9 acorn: 8.8.1 acorn-walk: 8.2.0 arg: 4.1.3 @@ -14924,7 +15122,7 @@ packages: resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==} engines: {node: '>=10.12.0'} dependencies: - '@jridgewell/trace-mapping': 0.3.17 + '@jridgewell/trace-mapping': 0.3.19 '@types/istanbul-lib-coverage': 2.0.4 convert-source-map: 1.9.0 dev: true @@ -15202,7 +15400,7 @@ packages: connect-history-api-fallback: 2.0.0 default-gateway: 6.0.3 express: 4.18.2 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 html-entities: 2.3.3 http-proxy-middleware: 2.0.6(@types/express@4.17.15) ipaddr.js: 2.0.1 @@ -15259,7 +15457,7 @@ packages: eslint-scope: 5.1.1 events: 3.3.0 glob-to-regexp: 0.4.1 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 json-parse-even-better-errors: 2.3.1 loader-runner: 4.3.0 mime-types: 2.1.35 @@ -15568,6 +15766,11 @@ packages: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} + /yaml@2.3.2: + resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==} + engines: {node: '>= 14'} + dev: true + /yargs-parser@18.1.3: resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==} engines: {node: '>=6'} From 8b4100f7add2eda0e54c20ab2da3e2bf33abfe4a Mon Sep 17 00:00:00 2001 From: yusixian <3450414733@qq.com> Date: Mon, 4 Sep 2023 01:38:06 +0800 Subject: [PATCH 2/4] feat: RadioGroup component --- .changeset/loud-carpets-pull.md | 7 + packages/components/babel.config.cjs | 2 +- .../components/src/RadioGroup/RadioGroup.tsx | 147 ++++++++++++++++++ .../components/src/RadioGroup/RadioItem.tsx | 142 +++++++++++++++++ .../components/src/RadioGroup/demo/index.tsx | 78 ++++++++++ packages/components/src/RadioGroup/index.ts | 4 + .../components/src/{ => Tag}/Table/Table.tsx | 0 .../components/src/{ => Tag}/Table/demo.tsx | 0 .../components/src/{ => Tag}/Table/index.tsx | 0 packages/components/src/index.ts | 4 +- packages/components/tailwind.config.cjs | 1 + packages/demo/package.json | 2 +- packages/demo/src/App.tsx | 122 +++++++++++---- .../example/docs/components/RadioGroup.mdx | 64 ++++++++ packages/example/docs/components/Table.mdx | 13 -- .../src/components/DemoBlock/index.tsx | 32 +++- packages/example/tailwind.config.cjs | 1 + pnpm-lock.yaml | 66 ++------ tsconfig.json | 2 +- 19 files changed, 584 insertions(+), 103 deletions(-) create mode 100644 .changeset/loud-carpets-pull.md create mode 100644 packages/components/src/RadioGroup/RadioGroup.tsx create mode 100644 packages/components/src/RadioGroup/RadioItem.tsx create mode 100644 packages/components/src/RadioGroup/demo/index.tsx create mode 100644 packages/components/src/RadioGroup/index.ts rename packages/components/src/{ => Tag}/Table/Table.tsx (100%) rename packages/components/src/{ => Tag}/Table/demo.tsx (100%) rename packages/components/src/{ => Tag}/Table/index.tsx (100%) create mode 100644 packages/example/docs/components/RadioGroup.mdx delete mode 100644 packages/example/docs/components/Table.mdx diff --git a/.changeset/loud-carpets-pull.md b/.changeset/loud-carpets-pull.md new file mode 100644 index 0000000..d03f91f --- /dev/null +++ b/.changeset/loud-carpets-pull.md @@ -0,0 +1,7 @@ +--- +'@dance-ui/ui': minor +'@dance-ui/example': minor +'@dance-ui/demo': minor +--- + +新增 RadioGroup 组件 diff --git a/packages/components/babel.config.cjs b/packages/components/babel.config.cjs index a453ec3..afdcbbe 100644 --- a/packages/components/babel.config.cjs +++ b/packages/components/babel.config.cjs @@ -14,6 +14,6 @@ module.exports = { runtime: 'automatic', }, ], - '@babel/preset-typescript', + // '@babel/preset-typescript', ], } diff --git a/packages/components/src/RadioGroup/RadioGroup.tsx b/packages/components/src/RadioGroup/RadioGroup.tsx new file mode 100644 index 0000000..ad85403 --- /dev/null +++ b/packages/components/src/RadioGroup/RadioGroup.tsx @@ -0,0 +1,147 @@ +/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */ +// TODO: Fix ts error +import { CSSProperties, Fragment, MouseEventHandler, ReactNode, Ref, forwardRef, useCallback, useState } from 'react' +import { twMerge } from 'tailwind-merge' +import { RadioItem } from './RadioItem' + +export type OptionValueType = string +export type RadioOption = { + label?: string | ReactNode + key?: string + value?: OptionValueType + suffix?: string + prefix?: string + onClick?: MouseEventHandler + beforeOnChange?: (value: string) => boolean + // input value + isInput?: boolean + defaultValue?: string + inputClass?: string + placeholder?: string + // classes + className?: string + labelClass?: string + labelStyle?: CSSProperties + dotClass?: string + dotContainerClass?: string +} + +export type RadioGroupProps = { + options: Array + name: string + onChange: (value: string, key?: string) => void + value?: OptionValueType + defaultValue?: string + className?: string + dotClass?: string + dotContainerClass?: string + labelClass?: string +} + +const RadioGroup = forwardRef( + ( + { + options, + name, + value: externalValue, + defaultValue, + onChange, + className, + dotClass, + dotContainerClass, + labelClass, + }: RadioGroupProps, + ref: Ref, + ) => { + const [selectedValue, setSelectedValue] = useState(defaultValue ?? null) + const [inputValues, setInputValues] = useState>({}) + const isControlled = externalValue !== undefined + const currentValue = isControlled ? externalValue : selectedValue ?? '' + + const handleRadioChange = useCallback( + (value?: string, key?: string) => { + if (!value) return + if (!isControlled) { + setSelectedValue(value) + } + onChange(value, key) + }, + [isControlled, onChange], + ) + + const handleInputChange = (key: string, value: string) => { + setInputValues((prev) => ({ + ...prev, + [key]: value, + })) + } + + const renderOptions = useCallback( + () => + options.map((option, idx) => { + if (!option) return null + const isArray = Array.isArray(option) + if (isArray && (option as RadioOption[]).length === 0) return null + + if (isArray) { + const opts = option as RadioOption[] + const realValues = opts.map((opt) => { + const { value = '', isInput, key, prefix = '', suffix = '' } = opt + const realValue = `${prefix}${isInput ? inputValues[key ?? 'default'] : value}${suffix}` + return realValue + }) + return ( + + {opts.map((opt, idx) => { + const isSelected = currentValue ? realValues.includes(currentValue) : false + + // const isSelected = realValues.includes(currentValue) + return ( + + ) + })} + + ) + } + const opt = option as RadioOption + + return ( + + ) + }), + [currentValue, dotClass, dotContainerClass, handleRadioChange, inputValues, labelClass, name, options], + ) + return ( +
+ {renderOptions()} +
+ ) + }, +) +RadioGroup.defaultProps = {} + +export default RadioGroup diff --git a/packages/components/src/RadioGroup/RadioItem.tsx b/packages/components/src/RadioGroup/RadioItem.tsx new file mode 100644 index 0000000..f7d903c --- /dev/null +++ b/packages/components/src/RadioGroup/RadioItem.tsx @@ -0,0 +1,142 @@ +import { RadioOption } from './RadioGroup' +import { twMerge } from 'tailwind-merge' +import classNames from 'classnames' +import { useCallback, useEffect } from 'react' + +export const RadioItem = ({ + option, + name, + currentValue, + onValueChange, + inputValues, + onInputChange, + dotContainerClass, + dotClass, + labelClass, + dotIsSelected, + showDot = true, +}: { + option: RadioOption + name: string + currentValue: string + onValueChange: (value: string, key?: string) => void + inputValues: Record + onInputChange: (key: string, value: string) => void + dotContainerClass?: string + dotClass?: string + labelClass?: string + showDot?: boolean + dotIsSelected?: boolean +}) => { + const { + label, + value = '', + labelClass: innerLabelClass, + labelStyle: innerLabelStyle, + isInput, + placeholder, + defaultValue, + key, + prefix = '', + suffix = '', + inputClass, + dotContainerClass: innerDotContainerClass, + dotClass: innerDotClass, + beforeOnChange, + onClick, + className, + } = option + const realValue = `${prefix}${isInput ? inputValues[key ?? 'default'] : value}${suffix}` + const isSelected = currentValue === realValue + const inputValue = inputValues[key ?? 'default'] || '' + const _dotIsSelected = dotIsSelected ?? isSelected + + const _onInputChange = useCallback( + (e: any) => { + if (beforeOnChange) { + const isOK = beforeOnChange?.(e.target.value) + if (!isOK) return + } + onInputChange(key ?? 'default', e.target.value ?? '') + }, + [beforeOnChange, key, onInputChange], + ) + + // When the value in an incoming option changes, the control changes together with the internal + useEffect(() => { + if (!value) return + if (beforeOnChange) { + const isOK = beforeOnChange?.(value) + if (!isOK) return + } + onInputChange(key ?? 'default', value) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [value]) + + return ( +