work

src/components/Form/Form.tsx

@@ -13,6 +13,7 @@ import { SelectInputProps } from '../SelectInput/index.js'
 import { FormValues } from './types.js'
 import { FormFields as FormFieldsComponent } from './FormFields.js'
 import { FormTabs } from './FormTabs.js'
+import { ReferencesInputProps } from '../ReferencesInput/index.js'
 
 const FormContext = createContext<{
   fields: FormFieldsType
@@ -33,6 +34,10 @@ type SelectFormField = {
   type: 'select'
 } & Pick<SelectInputProps, 'options' | 'filterable'>
 type RichTextFormField = { type: 'richtext' }
+type ReferencesField = {
+  type: 'references'
+  referencesType: ReferencesInputProps['type']
+}
 type FormFieldType = (
   | TextFormField
   | TextAreaFormField
@@ -43,6 +48,7 @@ type FormFieldType = (
   | DateTimeFormField
   | SelectFormField
   | RichTextFormField
+  | ReferencesField
 ) &
   Pick<FormFieldProps, 'label' | 'description' | 'note'>
 type FormFieldsType = {

src/components/Form/FormFields.tsx

@@ -16,6 +16,7 @@ import { DateInput } from '../DateInput/index.js'
 import { SelectInput } from '../SelectInput/index.js'
 import { RichTextEditor } from '../RichTextEditor/index.js'
 import { getByPath, Path } from '@saulx/utils'
+import { ReferencesInput } from '../ReferencesInput/index.js'
 
 type FormFieldsProps = {}
 
@@ -123,6 +124,14 @@ function FormFields(_: FormFieldsProps) {
                   // TODO missing disabled and error
                 />
               )
+            case 'references':
+              return (
+                <ReferencesInput
+                  value={getByPath(form.values, path) as string[] | undefined}
+                  onChange={(value) => form.setValue(path, value)}
+                  type={field.referencesType}
+                />
+              )
 
             default:
               throw new Error('Form.Fields: unknown field type')

src/components/Form/useForm.ts

@@ -95,7 +95,7 @@ function useForm({
   }, [validate])
 
   const setValue = useCallback(
-    (path: Path, value: string | boolean | number) => {
+    (path: Path, value: string | boolean | number | string[]) => {
       if (state.current.isSubmitting) return
 
       setByPath(state.current.changes, path, value)

src/components/Grid/index.tsx

@@ -154,6 +154,7 @@ function GridItem({
             <Menu.Items>
               {itemActions.map((action) => (
                 <Menu.Item
+                  key={action.label}
                   leadIcon={action.icon}
                   onClick={() => {
                     action?.onClick(data)

src/components/ReferencesInput/ReferencesInput.stories.tsx

@@ -0,0 +1,11 @@
+import React, { useState } from 'react'
+import { ReferencesInput } from './index.js'
+export default {
+  title: 'ReferencesInput (WIP)',
+  component: ReferencesInput,
+}
+
+export const Default = () => {
+  const [value, setValue] = useState<string[]>([])
+  return <ReferencesInput value={value} onChange={setValue} type="file" />
+}

src/components/ReferenceInput/index.tsx → src/components/ReferencesInput/index.tsx

@@ -18,6 +18,7 @@ import { Icon } from '../Icon/index.js'
 import { Text } from '../Text/index.js'
 import { radius } from '../../utils/radius.js'
 import { Menu } from '../Menu/index.js'
+import { deepEqual } from '@saulx/utils'
 
 function generateFinderFieldFromBasedSchemaField(
   key: string,
@@ -122,19 +123,20 @@ function getBasicFinderPropsForType(
   }
 }
 
+// TODO single vs multiple version of this same component. do we handle that internally or create 2 seoarate components? separate ones work better for types.
 // TODO somehow integrate the progress into a loader for when files are uploading
 // this means we might be able to remove the createObjectURL previews. look into figma + list component's rendering
 
-type ReferenceInputProps = {
+type ReferencesInputProps = {
   type: string
   value?: string[]
   onChange: (value: string[]) => void
 }
 
-function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
+function ReferencesInput({ type, value = [], onChange }: ReferencesInputProps) {
   const client = useClient()
   const { data } = useQuery('db:schema')
-  const [select, setSelect] = useState<Select>(value)
+  const [select, setSelect] = useState<Select>([])
   const [open, setOpen] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>()
   const [dragOver, setDragOver] = useState(false)
@@ -158,10 +160,6 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
     return convertOldToNew(data)
   }, [data])
 
-  useEffect(() => {
-    setSelect(value)
-  }, [value])
-
   async function uploadFiles(files: File[]) {
     const createdIds: string[] = []
     await Promise.allSettled(
@@ -180,14 +178,15 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
         })
       }),
     )
-    onChange([...select, ...createdIds])
+    onChange([...value, ...createdIds])
     fileInputRef.current.value = ''
   }
 
   return (
     <>
       <div
         style={{
+          width: '100%',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'start',
@@ -307,6 +306,7 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
                   leadIcon="image"
                   onClick={() => {
                     setOpen(true)
+                    setSelect(value)
                   }}
                 >
                   Select from uploaded
@@ -319,6 +319,7 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
               leadIcon="add"
               onClick={() => {
                 setOpen(true)
+                setSelect(value)
               }}
             >
               Add
@@ -350,7 +351,7 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
                 style={{
                   width: '100%',
                   height: 385,
-                  borderRadius: 8,
+                  borderRadius: 12,
                   overflow: 'hidden',
                   border: `1px solid ${colors.neutral20Adjusted}`,
                 }}
@@ -374,14 +375,22 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
           <Modal.Actions>
             {({ close }) => (
               <>
-                <Button variant="border" onClick={close} keyHint="Esc">
+                <Button
+                  variant="border"
+                  onClick={() => {
+                    setSelect([])
+                    close()
+                  }}
+                  keyHint="Esc"
+                >
                   Cancel
                 </Button>
                 <Button
                   variant="fill"
                   keyHint="Enter"
                   onClick={() => {
                     onChange(select)
+                    setSelect([])
                     close()
                   }}
                 >
@@ -420,5 +429,5 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
   )
 }
 
-export { ReferenceInput }
-export type { ReferenceInputProps }
+export { ReferencesInput }
+export type { ReferencesInputProps }

src/index.ts

@@ -36,7 +36,7 @@ export * from './components/Finder/index.js'
 export * from './components/Note/index.js'
 export * from './components/Calendar/index.js'
 export * from './components/List/index.js'
-export * from './components/ReferenceInput/index.js'
+export * from './components/ReferencesInput/index.js'
 export * from './components/Tabs/index.js'
 export * from './hooks/useTheme.js'
 export * from './hooks/useRerender.js'