Progress on doc/draft path renaming in group

frontend/packages/app/package.json

@@ -19,6 +19,7 @@
     "@emotion/serialize": "1.1.2",
     "@emotion/utils": "1.2.1",
     "@floating-ui/react": "0.25.1",
+    "@hookform/resolvers": "^3.3.1",
     "@juggle/resize-observer": "3.4.0",
     "@mantine/core": "6.0.13",
     "@mantine/hooks": "6.0.13",
@@ -100,6 +101,7 @@
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.11",
     "react-highlight-words": "0.20.0",
+    "react-hook-form": "^7.46.1",
     "react-hot-toast": "2.4.1",
     "react-icons": "4.9.0",
     "react-native": "0.71.7",
@@ -128,7 +130,8 @@
     "vite": "4.4.9",
     "y-prosemirror": "1.2.1",
     "y-protocols": "1.0.5",
-    "yjs": "13.6.4"
+    "yjs": "13.6.4",
+    "zod": "^3.22.2"
   },
   "devDependencies": {
     "@babel/core": "7.22.10",

frontend/packages/app/src/components/dialog.tsx

@@ -64,7 +64,7 @@ export function AppDialog({
   isAlert,
 }: {
   TriggerComponent: React.FC
-  ContentComponent: React.FC<{onClose?: () => void}>
+  ContentComponent: React.FC<{onClose?: () => void; isOpen?: boolean}>
   isAlert?: boolean
 }) {
   const Component = getComponent(isAlert)
@@ -85,6 +85,7 @@ export function AppDialog({
           />
           <Component.Content backgroundColor={'$background'}>
             <ContentComponent
+              isOpen={isOpen}
               onClose={() => {
                 setIsOpen(false)
               }}

frontend/packages/app/src/components/list-item.tsx

@@ -42,6 +42,7 @@ export function ListItem({
         onPointerEnter={onPointerEnter}
         // onPointerLeave={() => setIsHovering(false)}
         chromeless
+        onPress={onPress}
       >
         <ButtonText
           onPress={onPress}
@@ -54,7 +55,16 @@ export function ListItem({
         {accessory}
         <Popover {...popoverState} placement="bottom-end">
           <Popover.Trigger asChild>
-            <Button size="$1" circular data-trigger icon={MoreHorizontal} />
+            <Button
+              size="$1"
+              circular
+              data-trigger
+              onPress={(e) => {
+                // because we are nested in the outer button, we need to stop propagation or else onPress is triggered by parent button
+                e.stopPropagation()
+              }}
+              icon={MoreHorizontal}
+            />
           </Popover.Trigger>
           <Popover.Content
             padding={0}
@@ -75,7 +85,8 @@ export function ListItem({
               {menuItems.map((item) => (
                 <YGroup.Item key={item.key}>
                   <MenuItem
-                    onPress={() => {
+                    onPress={(e) => {
+                      e.stopPropagation()
                       popoverState.onOpenChange(false)
                       item.onPress()
                     }}

frontend/packages/app/src/components/new-group.tsx

@@ -4,55 +4,91 @@ import {FilePlus2} from '@tamagui/lucide-icons'
 import {AppDialog, DialogTitle} from './dialog'
 import {toast} from 'react-hot-toast'
 import {useCreateGroup} from '../models/groups'
-import {useRef} from 'react'
-import {TextInput} from 'react-native'
 import {useNavigate} from '../utils/navigation'
+import {
+  Control,
+  FieldValues,
+  Path,
+  SubmitHandler,
+  useController,
+  useForm,
+} from 'react-hook-form'
+import {zodResolver} from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import {useEffect} from 'react'
 
-function AddGroupForm({onClose}: {onClose: () => void}) {
+const newGroupSchema = z.object({
+  title: z.string().min(1, {message: 'Group title is required'}),
+  description: z.string(),
+})
+type NewGroupFields = z.infer<typeof newGroupSchema>
+
+function FormInput<Fields extends FieldValues>({
+  control,
+  name,
+  ...props
+}: React.ComponentProps<typeof Input> & {
+  control: Control<Fields>
+  name: Path<Fields>
+}) {
+  const c = useController({control, name})
+  return <Input {...c.field} {...props} />
+}
+
+function AddGroupForm({
+  onClose,
+  isOpen,
+}: {
+  onClose: () => void
+  isOpen: boolean
+}) {
   const {mutateAsync} = useCreateGroup()
-  const titleInput = useRef<TextInput | null>(null)
-  const descriptionInput = useRef<TextInput | null>(null)
   const navigate = useNavigate()
+  const {
+    control,
+    handleSubmit,
+    setFocus,
+    formState: {errors},
+  } = useForm<NewGroupFields>({
+    resolver: zodResolver(newGroupSchema),
+  })
+
+  useEffect(() => {
+    isOpen && setFocus('title')
+  }, [isOpen, setFocus])
+
+  const onSubmit: SubmitHandler<NewGroupFields> = (data) => {
+    onClose()
+    toast.promise(
+      mutateAsync(data).then((groupId) => {
+        navigate({
+          key: 'group',
+          groupId,
+        })
+      }),
+      {
+        loading: 'Creating...',
+        success: 'Group Created!',
+        error: 'Failed to Create Group',
+      },
+    )
+  }
+  console.log(errors)
+
   return (
     <>
-      <DialogTitle>Create HyperDocs Group</DialogTitle>
-      <Form
-        onSubmit={() => {
-          // @ts-expect-error
-          const title: string = titleInput.current?.value || ''
-          // @ts-expect-error
-          const description: string = descriptionInput.current?.value || ''
-
-          onClose()
-          toast.promise(
-            mutateAsync({
-              title,
-              description,
-            }).then((groupId) => {
-              navigate({
-                key: 'group',
-                groupId,
-              })
-            }),
-            {
-              loading: 'Creating...',
-              success: 'Group Created!',
-              error: 'Failed to Create Group',
-            },
-          )
-        }}
-      >
+      <DialogTitle>Create Group</DialogTitle>
+      <Form onSubmit={handleSubmit(onSubmit)}>
         <Label htmlFor="title">Title</Label>
-        <Input ref={titleInput} placeholder={'Group Name'} id="title" />
+        <FormInput placeholder={'Group Name'} control={control} name="title" />
         <Label htmlFor="description">Description</Label>
-        <Input
+        <FormInput
           multiline
-          ref={descriptionInput}
           minHeight={60}
           placeholder={'About this group...'}
-          id="description"
+          control={control}
+          name="description"
         />
-
         <Form.Trigger asChild>
           <Button>Create Group</Button>
         </Form.Trigger>
@@ -70,7 +106,7 @@ function NewGroupButton(props: React.ComponentProps<typeof Button>) {
 }
 export function AddGroupButton() {
   return (
-    <Tooltip content="Create HyperDocs Group">
+    <Tooltip content="Create HyperMedia Group">
       <AppDialog
         TriggerComponent={NewGroupButton}
         ContentComponent={AddGroupForm}

frontend/packages/app/src/components/publication-list-item.tsx

@@ -25,6 +25,7 @@ export function PublicationListItem({
   onPointerEnter,
   label,
   openRoute,
+  onLabelPress,
 }: {
   publication: Publication
   copy?: typeof copyTextToClipboard
@@ -34,6 +35,7 @@ export function PublicationListItem({
   label?: string
   onPointerEnter?: () => void
   openRoute: NavRoute
+  onLabelPress?: () => void
 }) {
   const spawn = useNavigate('spawn')
   const title = getDocumentTitle(publication.document)
@@ -75,7 +77,23 @@ export function PublicationListItem({
             </Button>
           )}
           {label && (
-            <ButtonText size="$2" color="$color9">
+            <ButtonText
+              size="$2"
+              color="$color9"
+              onPress={(e) => {
+                if (onLabelPress) {
+                  e.stopPropagation()
+                  onLabelPress()
+                }
+              }}
+              hoverStyle={
+                onLabelPress
+                  ? {
+                      textDecorationLine: 'underline',
+                    }
+                  : undefined
+              }
+            >
               {label}
             </ButtonText>
           )}