refactor(ui): move dropdown to @codeimageui

.changeset/spotty-goats-applaud.md

@@ -0,0 +1,6 @@
+---
+'@codeimage/app': patch
+'@codeimage/ui': patch
+---
+
+refactor: move dropdown to @codeimage/ui

apps/codeimage/src/components/KeyboardShortcuts/KeyboardShortcuts.tsx

@@ -1,13 +1,11 @@
 import {createMemo, createSignal, For, from, JSXElement} from 'solid-js';
-import {Button, HStack} from '@codeimage/ui';
+import {Button, FadeInOutTransition, HStack, PopoverPanel} from '@codeimage/ui';
 import {HintIcon} from '../Icons/Hint';
 import {useI18n} from '@codeimage/locale';
 import {AppLocaleEntries} from '../../i18n';
 import {Popover, PopoverButton} from 'solid-headless';
-import {PopoverPanel} from '../../ui/Dropdown/DropdownMenu';
 import {useFloating} from '../../core/floating-ui/floating-ui';
 import * as styles from './KeyboardShortcuts.css';
-import {FadeInOutTransition} from '@codeimage/ui';
 import {offset} from '@floating-ui/dom';
 import {PortalHostInjector} from '../../ui/PortalHost/PortalHost';
 import * as frame from '@codeimage/store/frame';

apps/codeimage/src/components/ShadowField/ShadowField.tsx

@@ -2,8 +2,8 @@ import {Component} from 'solid-js';
 import {useFloating} from '../../core/floating-ui/floating-ui';
 import {Popover, PopoverButton} from 'solid-headless';
 import {sprinkles, textFieldStyles, themeVars} from '@codeimage/ui';
-import {DropdownMenu} from '../../ui/Dropdown/DropdownPanel';
-import {DropdownPortal} from '../../ui/Dropdown/DropdownPortal';
+import {DropdownMenu} from '@codeimage/ui';
+import {DropdownPortal} from '@codeimage/ui';
 import {ShadowForm} from './ShadowForm';
 import clsx from 'clsx';
 

apps/codeimage/src/components/Terminal/dynamic/DynamicTerminal.tsx

@@ -3,10 +3,9 @@ import {Dynamic} from 'solid-js/web';
 import {omitProps} from 'solid-use';
 import {BaseTerminalProps} from '../TerminalHost';
 import {appEnvironment} from '../../../core/configuration';
-import {Box} from '@codeimage/ui';
+import {Box, FadeInOutTransition} from '@codeimage/ui';
 import * as styles from '../terminal.css';
 import {CodeImageLogo} from '../../Icons/CodeImageLogo';
-import {FadeInOutTransition} from '../../../../../../packages/ui/src/lib/primitives/Transition/Transition';
 
 interface DynamicTerminalProps extends BaseTerminalProps {
   type: string;

apps/codeimage/src/components/Toolbar/LanguageSelectorButton.tsx

@@ -1,11 +1,14 @@
 import {Popover, PopoverButton} from 'solid-headless';
-import {Button, FadeInOutTransition} from '@codeimage/ui';
+import {
+  Button,
+  DropdownItem,
+  DropdownMenu,
+  FadeInOutTransition,
+} from '@codeimage/ui';
 import {For} from 'solid-js';
 import {useFloating} from '../../core/floating-ui/floating-ui';
 import {offset} from '@floating-ui/dom';
 import {useI18n} from '@codeimage/locale';
-import {DropdownItem} from '../../ui/Dropdown/DropdownItem';
-import {DropdownMenu} from '../../ui/Dropdown/DropdownMenu';
 import {AppLocaleEntries} from '../../i18n';
 import {SvgIcon} from '../../ui/SvgIcon/SvgIcon';
 

apps/codeimage/src/ui/Dropdown/Dropdown.css.ts → packages/ui/src/lib/primitives/Dropdown/Dropdown.css.ts

@@ -1,5 +1,6 @@
 import {style} from '@vanilla-extract/css';
-import {buttonStyles, themeVars} from '@codeimage/ui';
+import * as buttonStyles from '../Button/Button.css';
+import {themeVars} from '../../theme';
 
 export const dropdownPanel = style({
   overflow: 'hidden',

packages/ui/src/lib/primitives/Dropdown/DropdownPanel.tsx

@@ -0,0 +1,26 @@
+// type DropdownMenuPanel = PopoverPanelProps<'div'> & {
+//   title?: string;
+// };
+//
+// export const DropdownMenu: Component<DropdownMenuPanel> = props => {
+//   return (
+//     <PopoverPanel
+//       as={'div'}
+//       unmount={false}
+//       class={styles.dropdownPanel}
+//       {...props}
+//     >
+//       <Box display={'flex'} padding={'3'}>
+//         <Show when={props.title}>
+//           <Text as={'div'} weight="semibold" size={'sm'}>
+//             {props.title}
+//           </Text>
+//         </Show>
+//       </Box>
+//
+//       <Menu>
+//         <MenuItem as={'div'}>{props.children}</MenuItem>
+//       </Menu>
+//     </PopoverPanel>
+//   );
+// };

packages/ui/src/lib/primitives/Dropdown/index.ts

@@ -0,0 +1,5 @@
+export * as dropdownStyles from './Dropdown.css';
+export * from './DropdownItem';
+export * from './DropdownMenu';
+// export * from './DropdownPanel';
+export * from './DropdownPortal';

packages/ui/src/lib/primitives/index.ts

@@ -42,3 +42,11 @@ export {
   type DialogPanelProps,
   type DialogTitleProps,
 } from './Dialog';
+
+export {
+  dropdownStyles,
+  DropdownItem,
+  DropdownPortal,
+  PopoverPanel,
+  DropdownMenu,
+} from './Dropdown';