From 96978785b9c5aa059ae7d6b8cbdd7517b2536c47 Mon Sep 17 00:00:00 2001 From: nikec Date: Sun, 22 Jan 2023 17:54:11 +0100 Subject: [PATCH 1/5] overlay panel ctx, closable job manager --- packages/interface/src/components/jobs/JobManager.tsx | 11 +++++------ packages/ui/src/OverlayPanel.tsx | 11 ++++++++--- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx index e84105f69..e002f339b 100644 --- a/packages/interface/src/components/jobs/JobManager.tsx +++ b/packages/interface/src/components/jobs/JobManager.tsx @@ -3,11 +3,9 @@ import dayjs from 'dayjs'; import { ArrowsClockwise, Camera, - DotsThree, Eye, Fingerprint, Folder, - IconProps, LockSimple, LockSimpleOpen, Pause, @@ -16,9 +14,8 @@ import { TrashSimple, X } from 'phosphor-react'; -import { useLibraryMutation, useLibraryQuery } from '@sd/client'; -import { JobReport } from '@sd/client'; -import { Button, CategoryHeading, tw } from '@sd/ui'; +import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client'; +import { Button, CategoryHeading, tw, useOverlayPanelContext } from '@sd/ui'; import ProgressBar from '../primitive/ProgressBar'; import { Tooltip } from '../tooltip/Tooltip'; @@ -92,6 +89,8 @@ export function JobsManager() { const jobs = useLibraryQuery(['jobs.getHistory']); const clearAllJobs = useLibraryMutation(['jobs.clearAll']); + const overlayPanelContext = useOverlayPanelContext(); + return (
@@ -103,7 +102,7 @@ export function JobsManager() { -
From a90cc423858e5975520411e9eed6cd7650c7c193 Mon Sep 17 00:00:00 2001 From: nikec Date: Tue, 24 Jan 2023 22:53:57 +0100 Subject: [PATCH 2/5] Revert "overlay panel ctx, closable job manager" This reverts commit 96978785b9c5aa059ae7d6b8cbdd7517b2536c47. --- packages/interface/src/components/jobs/JobManager.tsx | 11 ++++++----- packages/ui/src/OverlayPanel.tsx | 11 +++-------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx index e002f339b..e84105f69 100644 --- a/packages/interface/src/components/jobs/JobManager.tsx +++ b/packages/interface/src/components/jobs/JobManager.tsx @@ -3,9 +3,11 @@ import dayjs from 'dayjs'; import { ArrowsClockwise, Camera, + DotsThree, Eye, Fingerprint, Folder, + IconProps, LockSimple, LockSimpleOpen, Pause, @@ -14,8 +16,9 @@ import { TrashSimple, X } from 'phosphor-react'; -import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client'; -import { Button, CategoryHeading, tw, useOverlayPanelContext } from '@sd/ui'; +import { useLibraryMutation, useLibraryQuery } from '@sd/client'; +import { JobReport } from '@sd/client'; +import { Button, CategoryHeading, tw } from '@sd/ui'; import ProgressBar from '../primitive/ProgressBar'; import { Tooltip } from '../tooltip/Tooltip'; @@ -89,8 +92,6 @@ export function JobsManager() { const jobs = useLibraryQuery(['jobs.getHistory']); const clearAllJobs = useLibraryMutation(['jobs.clearAll']); - const overlayPanelContext = useOverlayPanelContext(); - return (
@@ -102,7 +103,7 @@ export function JobsManager() { -
From cd3b95bc3d32b3b42d8baa6f3016dc172bd1c988 Mon Sep 17 00:00:00 2001 From: nikec Date: Tue, 24 Jan 2023 23:54:01 +0100 Subject: [PATCH 3/5] popover --- .../src/components/jobs/JobManager.tsx | 19 +++-- .../src/components/layout/Sidebar.tsx | 8 +- packages/ui/package.json | 1 + packages/ui/src/Popover.tsx | 31 ++++++++ packages/ui/src/index.ts | 17 +++-- pnpm-lock.yaml | 74 +++++++++++++++++-- 6 files changed, 123 insertions(+), 27 deletions(-) create mode 100644 packages/ui/src/Popover.tsx diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx index e84105f69..6f750b5ec 100644 --- a/packages/interface/src/components/jobs/JobManager.tsx +++ b/packages/interface/src/components/jobs/JobManager.tsx @@ -3,11 +3,9 @@ import dayjs from 'dayjs'; import { ArrowsClockwise, Camera, - DotsThree, Eye, Fingerprint, Folder, - IconProps, LockSimple, LockSimpleOpen, Pause, @@ -16,9 +14,8 @@ import { TrashSimple, X } from 'phosphor-react'; -import { useLibraryMutation, useLibraryQuery } from '@sd/client'; -import { JobReport } from '@sd/client'; -import { Button, CategoryHeading, tw } from '@sd/ui'; +import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client'; +import { Button, CategoryHeading, PopoverClose, tw } from '@sd/ui'; import ProgressBar from '../primitive/ProgressBar'; import { Tooltip } from '../tooltip/Tooltip'; @@ -103,11 +100,13 @@ export function JobsManager() { - + + +
diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx index 611294dbc..66f1d1676 100644 --- a/packages/interface/src/components/layout/Sidebar.tsx +++ b/packages/interface/src/components/layout/Sidebar.tsx @@ -19,6 +19,7 @@ import { Dropdown, Loader, OverlayPanel, + Popover, Select, SelectOption, Switch, @@ -132,14 +133,13 @@ export function Sidebar() { - {library && ( @@ -152,7 +152,7 @@ export function Sidebar() {
- +
{debugState.enabled && } diff --git a/packages/ui/package.json b/packages/ui/package.json index 7e0d86d48..2a62a0f29 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -25,6 +25,7 @@ "@radix-ui/react-context-menu": "^1.0.0", "@radix-ui/react-dialog": "^1.0.0", "@radix-ui/react-dropdown-menu": "^1.0.0", + "@radix-ui/react-popover": "^1.0.3", "@radix-ui/react-select": "^1.1.2", "@radix-ui/react-switch": "^1.0.1", "@radix-ui/react-tabs": "^1.0.1", diff --git a/packages/ui/src/Popover.tsx b/packages/ui/src/Popover.tsx new file mode 100644 index 000000000..e0728caa1 --- /dev/null +++ b/packages/ui/src/Popover.tsx @@ -0,0 +1,31 @@ +import * as DP from '@radix-ui/react-popover'; +import clsx from 'clsx'; +import { PropsWithChildren, ReactNode } from 'react'; + +interface Props extends PropsWithChildren, DP.PopoverContentProps { + trigger: ReactNode; +} + +export const Popover = ({ trigger, children, className, ...props }: Props) => { + return ( + + {trigger} + + + {children} + + + + ); +}; + +export * from '@radix-ui/react-popover'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 2f5f93313..aeb615325 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,16 +1,17 @@ +export { cva, cx } from 'class-variance-authority'; export * from './Button'; -export * as Dropdown from './Dropdown'; -export * from './Dialog'; -export * from './Loader'; -export * from './Layout'; +export * from './CheckBox'; export * as ContextMenu from './ContextMenu'; -export * from './OverlayPanel'; +export * from './Dialog'; +export * as Dropdown from './Dropdown'; export * from './Input'; +export * from './Layout'; +export * from './Loader'; +export * from './OverlayPanel'; +export * from './Popover'; export * from './Select'; export * from './Switch'; export * as Tabs from './Tabs'; export * from './Typography'; -export * from './utils'; -export * from './CheckBox'; export * as forms from './forms'; -export { cva, cx } from 'class-variance-authority'; +export * from './utils'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b9535daef..5bd26f605 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -527,6 +527,7 @@ importers: '@radix-ui/react-context-menu': ^1.0.0 '@radix-ui/react-dialog': ^1.0.0 '@radix-ui/react-dropdown-menu': ^1.0.0 + '@radix-ui/react-popover': ^1.0.3 '@radix-ui/react-select': ^1.1.2 '@radix-ui/react-switch': ^1.0.1 '@radix-ui/react-tabs': ^1.0.1 @@ -574,6 +575,7 @@ importers: '@radix-ui/react-context-menu': 1.0.0_5ndqzdd6t4rivxsukjv3i3ak2q '@radix-ui/react-dialog': 1.0.2_5ndqzdd6t4rivxsukjv3i3ak2q '@radix-ui/react-dropdown-menu': 1.0.0_5ndqzdd6t4rivxsukjv3i3ak2q + '@radix-ui/react-popover': 1.0.3_5ndqzdd6t4rivxsukjv3i3ak2q '@radix-ui/react-select': 1.2.0_5ndqzdd6t4rivxsukjv3i3ak2q '@radix-ui/react-switch': 1.0.1_biqbaboplfbrettd7655fr4n2y '@radix-ui/react-tabs': 1.0.2_biqbaboplfbrettd7655fr4n2y @@ -615,7 +617,7 @@ importers: storybook: 6.5.15_o4scbtliisanygemawej7x2d6i storybook-tailwind-dark-mode: 1.0.15_biqbaboplfbrettd7655fr4n2y style-loader: 3.3.1 - tailwindcss: 3.2.4 + tailwindcss: 3.2.4_postcss@8.4.21 typescript: 4.9.4 packages: @@ -4044,7 +4046,7 @@ packages: peerDependencies: tailwindcss: ^3.0 dependencies: - tailwindcss: 3.2.4 + tailwindcss: 3.2.4_postcss@8.4.21 dev: false /@hookform/resolvers/2.9.10_react-hook-form@7.42.1: @@ -4649,6 +4651,34 @@ packages: - '@types/react' dev: false + /@radix-ui/react-popover/1.0.3_5ndqzdd6t4rivxsukjv3i3ak2q: + resolution: {integrity: sha512-YwedSukfWsyJs3/yP3yXUq44k4/JBe3jqU63Z8v2i19qZZ3dsx32oma17ztgclWPNuqp3A+Xa9UiDlZHyVX8Vg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.7 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-dismissable-layer': 1.0.2_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0 + '@radix-ui/react-focus-scope': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-id': 1.0.0_react@18.2.0 + '@radix-ui/react-popper': 1.1.0_5ndqzdd6t4rivxsukjv3i3ak2q + '@radix-ui/react-portal': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-slot': 1.0.1_react@18.2.0 + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + aria-hidden: 1.2.2_3stiutgnnbnfnf3uowm5cip22i + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-remove-scroll: 2.5.5_3stiutgnnbnfnf3uowm5cip22i + transitivePeerDependencies: + - '@types/react' + dev: false + /@radix-ui/react-popper/1.0.0_5ndqzdd6t4rivxsukjv3i3ak2q: resolution: {integrity: sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg==} peerDependencies: @@ -7406,7 +7436,7 @@ packages: tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1' dependencies: mini-svg-data-uri: 1.4.4 - tailwindcss: 3.2.4 + tailwindcss: 3.2.4_postcss@8.4.21 dev: false /@tailwindcss/line-clamp/0.4.2: @@ -7420,7 +7450,7 @@ packages: peerDependencies: tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1' dependencies: - tailwindcss: 3.2.4 + tailwindcss: 3.2.4_postcss@8.4.21 dev: true /@tailwindcss/typography/0.5.9: @@ -7443,7 +7473,7 @@ packages: lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 postcss-selector-parser: 6.0.10 - tailwindcss: 3.2.4 + tailwindcss: 3.2.4_postcss@8.4.21 dev: true /@tanstack/match-sorter-utils/8.7.6: @@ -19231,6 +19261,40 @@ packages: resolve: 1.22.1 transitivePeerDependencies: - ts-node + dev: false + + /tailwindcss/3.2.4_postcss@8.4.21: + resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} + engines: {node: '>=12.13.0'} + hasBin: true + peerDependencies: + postcss: ^8.0.9 + dependencies: + arg: 5.0.2 + chokidar: 3.5.3 + color-name: 1.1.4 + detective: 5.2.1 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.2.12 + glob-parent: 6.0.2 + is-glob: 4.0.3 + lilconfig: 2.0.6 + micromatch: 4.0.5 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.0.0 + 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 + postcss-nested: 6.0.0_postcss@8.4.21 + postcss-selector-parser: 6.0.11 + postcss-value-parser: 4.2.0 + quick-lru: 5.1.1 + resolve: 1.22.1 + transitivePeerDependencies: + - ts-node /tapable/1.1.3: resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==} From b4ebe9e3e93e75580f3fbf1e8df64fa307a90849 Mon Sep 17 00:00:00 2001 From: nikec Date: Wed, 25 Jan 2023 02:02:00 +0100 Subject: [PATCH 4/5] Update Popover.tsx --- packages/ui/src/Popover.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ui/src/Popover.tsx b/packages/ui/src/Popover.tsx index e0728caa1..ae4e964aa 100644 --- a/packages/ui/src/Popover.tsx +++ b/packages/ui/src/Popover.tsx @@ -12,8 +12,7 @@ export const Popover = ({ trigger, children, className, ...props }: Props) => { {trigger} Date: Wed, 25 Jan 2023 12:24:38 +0800 Subject: [PATCH 5/5] convert overlay to popover --- .../components/explorer/ExplorerTopBar.tsx | 10 +-- .../src/components/jobs/JobManager.tsx | 2 +- .../src/components/layout/Sidebar.tsx | 5 +- packages/ui/src/OverlayPanel.tsx | 61 --------------- packages/ui/src/Popover.tsx | 77 +++++++++++++------ packages/ui/src/index.ts | 1 - 6 files changed, 63 insertions(+), 93 deletions(-) delete mode 100644 packages/ui/src/OverlayPanel.tsx diff --git a/packages/interface/src/components/explorer/ExplorerTopBar.tsx b/packages/interface/src/components/explorer/ExplorerTopBar.tsx index 52b55c630..6445788a8 100644 --- a/packages/interface/src/components/explorer/ExplorerTopBar.tsx +++ b/packages/interface/src/components/explorer/ExplorerTopBar.tsx @@ -15,7 +15,7 @@ import { import { forwardRef, useEffect, useRef } from 'react'; import { useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; -import { Button, Input, OverlayPanel, cva } from '@sd/ui'; +import { Button, Input, Popover, cva } from '@sd/ui'; import { getExplorerStore, useExplorerStore } from '../../hooks/useExplorerStore'; import { useOperatingSystem } from '../../hooks/useOperatingSystem'; import { KeybindEvent } from '../../util/keybind'; @@ -265,7 +265,7 @@ export const TopBar: React.FC = (props) => {
- @@ -278,7 +278,7 @@ export const TopBar: React.FC = (props) => {
- + = (props) => {
- @@ -318,7 +318,7 @@ export const TopBar: React.FC = (props) => {
- + )} */}
- + ); } diff --git a/packages/ui/src/OverlayPanel.tsx b/packages/ui/src/OverlayPanel.tsx deleted file mode 100644 index dfc7c703e..000000000 --- a/packages/ui/src/OverlayPanel.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; -import clsx from 'clsx'; -import { PropsWithChildren, useState } from 'react'; -import { animated, config, useTransition } from 'react-spring'; - -interface Props extends DropdownMenu.MenuContentProps { - trigger: React.ReactNode; - transformOrigin?: string; - disabled?: boolean; -} - -export const OverlayPanel = ({ - trigger, - children, - disabled, - transformOrigin, - className, - ...props -}: PropsWithChildren) => { - const [open, setOpen] = useState(false); - - // const transitions = useTransition(open, { - // from: { - // opacity: 0, - // transform: `scale(0.5)`, - // transformOrigin: transformOrigin || 'top' - // }, - // enter: { opacity: 1, transform: 'scale(1)' }, - // leave: { opacity: -0.5, transform: 'scale(0.95)' }, - // config: { mass: 0.4, tension: 170, friction: 10 } - // }); - - return ( - - - {trigger} - - {open && ( - - -
- {children} -
- - - )} - - ); -}; diff --git a/packages/ui/src/Popover.tsx b/packages/ui/src/Popover.tsx index ae4e964aa..b14e7c025 100644 --- a/packages/ui/src/Popover.tsx +++ b/packages/ui/src/Popover.tsx @@ -1,30 +1,63 @@ -import * as DP from '@radix-ui/react-popover'; +import * as Radix from '@radix-ui/react-popover'; import clsx from 'clsx'; -import { PropsWithChildren, ReactNode } from 'react'; +import { PropsWithChildren, useState } from 'react'; -interface Props extends PropsWithChildren, DP.PopoverContentProps { - trigger: ReactNode; +interface Props extends Radix.PopoverContentProps { + trigger: React.ReactNode; + transformOrigin?: string; + disabled?: boolean; + className?: string; } -export const Popover = ({ trigger, children, className, ...props }: Props) => { +export const Popover = ({ + trigger, + children, + disabled, + transformOrigin, + className, + ...props +}: PropsWithChildren) => { + const [open, setOpen] = useState(false); + + // const transitions = useTransition(open, { + // from: { + // opacity: 0, + // transform: `scale(0.5)`, + // transformOrigin: transformOrigin || 'top' + // }, + // enter: { opacity: 1, transform: 'scale(1)' }, + // leave: { opacity: -0.5, transform: 'scale(0.95)' }, + // config: { mass: 0.4, tension: 170, friction: 10 } + // }); + return ( - - {trigger} - - - {children} - - - + + + {trigger} + + {open && ( + + +
+ {children} +
+ + + )} + ); }; -export * from '@radix-ui/react-popover'; +export { Close as PopoverClose } from '@radix-ui/react-popover'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index aeb615325..388c1bc9b 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -7,7 +7,6 @@ export * as Dropdown from './Dropdown'; export * from './Input'; export * from './Layout'; export * from './Loader'; -export * from './OverlayPanel'; export * from './Popover'; export * from './Select'; export * from './Switch';