refactor(ui): #184 move Dropdown to @codeimage/ui

Author: riccardoperra

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/DropdownPanel.tsx

@@ -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',

…odeimage/src/ui/Dropdown/Dropdown.css.ts …/lib/primitives/Dropdown/Dropdown.css.tsapps/codeimage/src/ui/Dropdown/Dropdown.css.ts renamed to packages/ui/src/lib/primitives/Dropdown/Dropdown.css.ts apps/codeimage/src/ui/Dropdown/Dropdown.css.ts renamed to packages/ui/src/lib/primitives/Dropdown/Dropdown.css.ts

@@ -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>
+//   );
+// };