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==}