close #98

nandorojo · Oct 22, 2024 · d8d23c9 · d8d23c9
1 parent 877b795
commit d8d23c9
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 31 deletions.
diff --git a/docs/docs/usage.md b/docs/docs/usage.md
@@ -4,8 +4,6 @@ title: Usage
 
 Here we'll look at a quick overview of what it looks like to use Zeego.
 
-The examples will use [Dripsy](https://dripsy.xyz) for styling, but you can use any styling solution you want.
-
 For a full overview of using custom styles and components, see the [styling guide](/style).
 
 ## 1. Create your primitives
@@ -16,19 +14,21 @@ Here, you can add custom styles and interactions.
 
 > If you've used [Radix UI](https://www.radix-ui.com/docs/primitives/overview/getting-started#2-style-each-part) before, this will look familiar.
 
+It's useful to have all of your primitives created once in a single file.
+
 ```tsx
 // design-system/dropdown-menu.tsx
 import * as DropdownMenu from 'zeego/dropdown-menu'
-import { styled } from 'dripsy'
 
 export const DropdownMenuRoot = DropdownMenu.Root
 export const DropdownMenuTrigger = DropdownMenu.Trigger
 export const DropdownMenuContent = DropdownMenu.Content
 
+// notice that we're using the `create()` function
 export const DropdownMenuItem = DropdownMenu.create(
-  styled(DropdownMenu.Item)({
-    height: 34,
-  }),
+  (props: React.ComponentProps<typeof DropdownMenu.Item>) => (
+    <DropdownMenu.Item {...props} style={{ height: 34 }} />
+  ),
   'Item'
 )
 

diff --git a/packages/zeego/package.json b/packages/zeego/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zeego",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Logical UI primitives, made for screens.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/packages/zeego/src/context-menu/context-menu.tsx b/packages/zeego/src/context-menu/context-menu.tsx
@@ -17,16 +17,16 @@ const Root = create(ContextMenu.Root, 'Root')
 
 const Trigger = create(ContextMenu.Trigger, 'Trigger')
 
-const Content = create(
-  (props: ContextMenuContentProps) => (
+const Content = create<ContextMenuContentProps>(
+  (props) => (
     <ContextMenu.Portal>
       <ContextMenu.Content {...props} />
     </ContextMenu.Portal>
   ),
   'Content'
 )
 
-const Item = create((props: MenuItemProps) => {
+const Item = create<MenuItemProps>((props) => {
   return (
     <ContextMenu.Item
       {...props}
@@ -41,21 +41,16 @@ const Item = create((props: MenuItemProps) => {
 }, 'Item')
 
 const SubTrigger = create<MenuSubTriggerProps>(
-  (props: MenuSubTriggerProps) => <ContextMenu.SubTrigger {...props} />,
+  (props) => <ContextMenu.SubTrigger {...props} />,
   'SubTrigger'
 )
 
 const Group = create(ContextMenu.Group, 'Group')
 
 const Separator = create(ContextMenu.Separator, 'Separator')
 
-const CheckboxItem = create(
-  ({
-    shouldDismissMenuOnSelect,
-    onValueChange,
-    value,
-    ...props
-  }: MenuCheckboxItemProps) => {
+const CheckboxItem = create<MenuCheckboxItemProps>(
+  ({ shouldDismissMenuOnSelect, onValueChange, value, ...props }) => {
     return (
       <ContextMenu.CheckboxItem
         {...props}
@@ -92,21 +87,21 @@ const Preview = create(() => null, 'Preview')
 
 const Arrow = create(ContextMenu.Arrow, 'Arrow')
 
-const Sub = create(
-  (props: MenuSubProps) => <ContextMenu.Sub {...props} />,
+const Sub = create<MenuSubProps>(
+  (props) => <ContextMenu.Sub {...props} />,
   'Sub'
 )
 
-const SubContent = create(
-  ({ ...props }: ContextMenuSubContentProps) => (
+const SubContent = create<ContextMenuSubContentProps>(
+  (props) => (
     <ContextMenu.Portal>
       <ContextMenu.SubContent {...props} />
     </ContextMenu.Portal>
   ),
   'SubContent'
 )
 
-const Auxiliary = create((_: ContextMenuAuxliliaryProps) => null, 'Auxiliary')
+const Auxiliary = create<ContextMenuAuxliliaryProps>((_) => null, 'Auxiliary')
 
 export {
   Root,

diff --git a/packages/zeego/src/dropdown-menu/dropdown-menu.tsx b/packages/zeego/src/dropdown-menu/dropdown-menu.tsx
@@ -16,15 +16,15 @@ const Root = create(DropdownMenu.Root, 'Root')
 
 const Trigger = create(DropdownMenu.Trigger, 'Trigger')
 
-const Content = create((props: MenuContentProps) => {
+const Content = create<MenuContentProps>((props) => {
   return (
     <DropdownMenu.Portal>
       <DropdownMenu.Content {...props} />
     </DropdownMenu.Portal>
   )
 }, 'Content')
 
-const Item = create((props: MenuItemProps) => {
+const Item = create<MenuItemProps>((props) => {
   return (
     <DropdownMenu.Item
       {...props}
@@ -39,7 +39,7 @@ const Item = create((props: MenuItemProps) => {
 }, 'Item')
 
 const SubTrigger = create<MenuSubTriggerProps>(
-  (props: MenuSubTriggerProps) => <DropdownMenu.SubTrigger {...props} />,
+  (props) => <DropdownMenu.SubTrigger {...props} />,
   'SubTrigger'
 )
 
@@ -90,8 +90,8 @@ const Arrow = create(DropdownMenu.Arrow, 'Arrow')
 
 const Sub = create(DropdownMenu.Sub, 'Sub')
 
-const SubContent = create(
-  (props: MenuSubContentProps) => (
+const SubContent = create<MenuSubContentProps>(
+  (props) => (
     <DropdownMenu.Portal>
       <DropdownMenu.SubContent {...props} />
     </DropdownMenu.Portal>

diff --git a/packages/zeego/src/menu/types.ts b/packages/zeego/src/menu/types.ts
@@ -1,5 +1,5 @@
+/* eslint-disable import/no-duplicates */
 import type { ImageProps } from 'react-native'
-import type { MenuContentProps as RadixContentProps } from '@radix-ui/react-dropdown-menu'
 import type * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu'
 import type {
   ContextMenuView,
@@ -59,8 +59,7 @@ export type MenuTriggerProps = RadixDropdownMenu.DropdownMenuTriggerProps & {
 
 export type MenuContentProps = RadixDropdownMenu.MenuContentProps & {
   children: React.ReactNode
-  style?: ViewStyle
-} & RadixContentProps
+}
 
 export type ContextMenuContentProps = Not<
   MenuContentProps,