WIP

ee/admin-server/Dockerfile

@@ -47,6 +47,8 @@ COPY ./packages/react-richtext-renderer/package.json ././packages/react-richtext
 COPY ./packages/react-routing/package.json ././packages/react-routing/package.json
 COPY ./packages/react-select/package.json ././packages/react-select/package.json
 COPY ./packages/react-slots/package.json ././packages/react-slots/package.json
+COPY ./packages/react-uploader/package.json ././packages/react-uploader/package.json
+COPY ./packages/react-uploader-dropzone/package.json ././packages/react-uploader-dropzone/package.json
 COPY ./packages/react-utils/package.json ././packages/react-utils/package.json
 COPY ./packages/ui/package.json ././packages/ui/package.json
 COPY ./packages/utilities/package.json ././packages/utilities/package.json

packages/admin-sandbox/package.json

@@ -20,9 +20,9 @@
 		"graphql": "^16.8.1"
 	},
 	"dependencies": {
-		"@contember/schema": "^1.3.6",
-		"@contember/schema-definition": "^1.3.6",
-		"@contember/schema-utils": "^1.3.6",
+		"@contember/schema": "^1.4.0-beta.1",
+		"@contember/schema-definition": "^1.4.0-beta.1",
+		"@contember/schema-utils": "^1.4.0-beta.1",
 		"lucide-react": "^0.302.0",
 		"react": "^18.2.0",
 		"react-content-loader": "^6.2.1",

packages/admin/package.json

@@ -72,14 +72,15 @@
 		"@contember/react-leaflet-fields-ui": "workspace:*",
 		"@contember/react-multipass-rendering": "workspace:*",
 		"@contember/react-routing": "workspace:*",
+		"@contember/react-uploader": "workspace:*",
 		"@contember/react-utils": "workspace:*",
 		"@contember/ui": "workspace:*",
 		"@contember/utilities": "workspace:*",
 		"blueimp-md5": "2.19.0",
 		"is-hotkey": "0.2.0",
 		"lucide-react": "^0.302.0",
 		"qrcode-generator": "^1.4.4",
-		"react-dropzone": "10.2.2",
+		"react-dropzone": "^14.2.3",
 		"react-error-boundary": "4.0.12",
 		"react-sortable-hoc": "2.0.0",
 		"slate": "0.73.1",

packages/admin/src/components/bindingFacade/upload/fileDataExtractors/FileDataExtractor.ts

@@ -1,6 +1,5 @@
-import type { EntityAccessor, Environment } from '@contember/react-binding'
+import type { EntityAccessor, Environment, ErrorAccessorHolder } from '@contember/react-binding'
 import type { ReactNode } from 'react'
-import { AccessorErrorsHolder } from '@contember/react-binding-ui'
 
 export interface FileDataExtractorPopulateFieldsOptions<
 	ExtractedData = unknown,
@@ -40,5 +39,5 @@ export interface FileDataExtractor<ExtractedData = unknown, UploadResult = unkno
 	populateFields: (
 		options: FileDataExtractorPopulateFieldsOptions<ExtractedData, UploadResult, AcceptArtifacts>,
 	) => void
-	getErrorsHolders?: (options: FileDataExtractorGetErrorsOptions) => AccessorErrorsHolder[]
+	getErrorsHolders?: (options: FileDataExtractorGetErrorsOptions) => ErrorAccessorHolder[]
 }

packages/admin/src/components/bindingFacade/upload/fileHandler/FileHandler.ts

@@ -1,6 +1,5 @@
-import { EntityAccessor, Environment } from '@contember/react-binding'
+import { EntityAccessor, Environment, ErrorAccessorHolder } from '@contember/react-binding'
 import { ReactElement } from 'react'
-import { AccessorErrorsHolder } from '@contember/react-binding-ui'
 import { AcceptFileOptions, FullFileKind } from '../fileKinds'
 
 export interface AcceptedFile<AcceptArtifacts = any> {
@@ -12,7 +11,7 @@ export type ResolvedFileEntity =
 	& {
 		parentEntity: EntityAccessor
 		destroy?: () => void
-		getErrorHolders: () => AccessorErrorsHolder[]
+		getErrorHolders: () => ErrorAccessorHolder[]
 	}
 	& (
 		| {

packages/admin/src/components/bindingFacade/upload/fileHandler/createEntityConnector.ts

@@ -0,0 +1,23 @@
+import { BindingError, EntityAccessor, Environment, QueryLanguage } from '@contember/react-binding'
+import { EntityConnectorFactory } from '../internalComponents/hooks/useConnectSelectedEntities'
+
+export const createEntityConnectorFactory = (env: Environment, ...baseEntity: (string | undefined)[]): EntityConnectorFactory => {
+	if (!baseEntity[baseEntity.length - 1]) {
+		throw new BindingError('Cannot use "fileSelectionComponent" when "baseField" prop is not set. For more information, please consult the documentation.')
+	}
+	const path = baseEntity.filter(
+		(it): it is string => it !== undefined)
+		.map(it => QueryLanguage.desugarRelativeSingleEntity(it, env))
+		.flatMap(it => it.hasOneRelationPath)
+
+	return selected => {
+		const connector = (parent: EntityAccessor) => {
+			const parentEntity = parent.getRelativeSingleEntity({
+				hasOneRelationPath: path.slice(0, -1),
+			})
+			parentEntity.connectEntityAtField(path[path.length - 1].field, selected)
+		}
+		connector.entity = selected
+		return connector
+	}
+}

packages/admin/src/components/bindingFacade/upload/internalComponents/hooks/useNormalizedUploadState.ts

@@ -131,7 +131,7 @@ export const useNormalizedUploadState = ({
 	const dropzoneState = useDropzone({
 		onDrop,
 		disabled: isMutating,
-		accept: fileHandler.acceptedMimes ?? undefined,
+		// accept: fileHandler.acceptedMimes ?? undefined, todo
 		multiple: isMultiple,
 		noKeyboard: true, // This would normally be absolutely henious but there is a keyboard-focusable button inside.
 	})

packages/admin/src/tsconfig.json

@@ -21,6 +21,7 @@
 		{ "path": "../../react-multipass-rendering/src" },
 		{ "path": "../../react-routing/src" },
 		{ "path": "../../react-utils/src" },
+		{ "path": "../../react-uploader/src" },
 		{ "path": "../../utilities/src" },
 		{ "path": "../../ui/src" }
 	]

packages/binding/src/accessors/EntityListAccessor.ts

@@ -129,6 +129,10 @@ class EntityListAccessor implements Errorable {
 	public getChildEntityById(id: EntityId): EntityAccessor {
 		return this.operations.getChildEntityById(this.state, id)
 	}
+
+	public getParent(): EntityAccessor | undefined {
+		return this.state.blueprint.parent?.getAccessor()
+	}
 }
 
 namespace EntityListAccessor {

packages/binding/src/accessors/ErrorAccessor.ts

@@ -37,3 +37,7 @@ namespace ErrorAccessor {
 	} : error
 }
 export { ErrorAccessor }
+
+export interface ErrorAccessorHolder {
+	readonly errors: ErrorAccessor | undefined
+}

packages/binding/src/accessors/FieldAccessor.ts

@@ -6,6 +6,7 @@ import type { BatchUpdatesOptions } from './BatchUpdatesOptions'
 import type { Errorable } from './Errorable'
 import { ErrorAccessor } from './ErrorAccessor'
 import type { SchemaColumn } from '../core/schema/SchemaColumn'
+import { EntityAccessor } from './EntityAccessor'
 
 class FieldAccessor<Value extends FieldValue = FieldValue> implements Errorable {
 	constructor(
@@ -69,6 +70,10 @@ class FieldAccessor<Value extends FieldValue = FieldValue> implements Errorable
 	public get asUuid(): UuidFieldHelper {
 		return new UuidFieldHelper(this.getAccessor as FieldAccessor.GetFieldAccessor<any>)
 	}
+
+	public getParent(): EntityAccessor {
+		return this.state.parent.getAccessor()
+	}
 }
 namespace FieldAccessor {
 	export const userAgent = 'user'

packages/interface/src/components/binding/DisconnectEntityTrigger.tsx

@@ -0,0 +1,53 @@
+import { ComponentType, ReactNode, useCallback } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { BindingError, EntityListAccessor, ErrorPersistResult, SuccessfulPersistResult, SugaredRelativeSingleEntity, useEntity, useMutationState, usePersist } from '@contember/react-binding'
+
+
+const SlotButton = Slot as ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>
+
+export interface DisconnectEntityTriggerProps {
+	immediatePersist?: true
+	children: ReactNode
+	onPersistSuccess?: (result: SuccessfulPersistResult) => void
+	onPersistError?: (result: ErrorPersistResult) => void
+	field?: SugaredRelativeSingleEntity['field']
+}
+
+export const DisconnectEntityTrigger = ({ immediatePersist, onPersistError, onPersistSuccess, field, ...props }: DisconnectEntityTriggerProps) => {
+	const entity = useEntity()
+	const triggerPersist = usePersist()
+	const isMutating = useMutationState()
+	const onClick = useCallback(() => {
+		if (field) {
+			entity.disconnectEntityAtField({ field })
+		} else {
+			const parent = entity.getParent()
+			if (!parent) {
+				throw new BindingError('Cannot disconnect root entity')
+			}
+			if (parent instanceof EntityListAccessor) {
+				parent.disconnectEntity(entity)
+			} else {
+				const subTreeNode = entity.environment.getSubTreeNode()
+				if (subTreeNode.type !== 'entity') {
+					throw new BindingError('Cannot disconnect root entity')
+				}
+				parent.disconnectEntityAtField({ field: subTreeNode.field.name })
+			}
+		}
+
+		if (immediatePersist) {
+			triggerPersist()
+				.then(onPersistSuccess)
+				.catch(onPersistError)
+		}
+	}, [field, immediatePersist, entity, triggerPersist, onPersistSuccess, onPersistError])
+
+	return (
+		<SlotButton
+			onClick={onClick}
+			disabled={isMutating ? true : undefined}
+			{...props}
+		/>
+	)
+}

packages/interface/src/components/binding/index.ts

@@ -1,5 +1,6 @@
 export * from './ClearFieldTrigger'
 export * from './DeleteEntityTrigger'
+export * from './DisconnectEntityTrigger'
 export * from './PersistTrigger'
 export * from './EntityBeforePersist'
 export * from './RedirectOnPersist'

packages/playground/admin/app/components/navigation.tsx

@@ -1,4 +1,4 @@
-import { ArchiveIcon, BrushIcon, FormInputIcon, GripVertical, HomeIcon, KanbanIcon, TableIcon } from 'lucide-react'
+import { ArchiveIcon, BrushIcon, FormInputIcon, GripVertical, HomeIcon, KanbanIcon, TableIcon, UploadIcon } from 'lucide-react'
 import { MenuList } from '../../lib/components/ui/menu'
 
 
@@ -107,6 +107,42 @@ export const Navigation = () => {
 							},
 						],
 					},
+					{
+						icon: <UploadIcon size={16} />,
+						label: 'Upload',
+						subItems: [
+							{
+								icon: line,
+								label: 'Image upload',
+								to: 'upload/image',
+							},
+							{
+								icon: line,
+								label: 'Image w/o meta',
+								to: 'upload/imageTrivial',
+							},
+							{
+								icon: line,
+								label: 'Audio upload',
+								to: 'upload/audio',
+							},
+							{
+								icon: line,
+								label: 'Video upload',
+								to: 'upload/video',
+							},
+							{
+								icon: line,
+								label: 'Generic file upload',
+								to: 'upload/any',
+							},
+							{
+								icon: line,
+								label: 'Image repeater',
+								to: 'upload/imageList',
+							},
+						],
+					},
 				]}
 			/>
 		</div>

packages/playground/admin/app/pages/index.tsx

@@ -1,3 +1,7 @@
-export default (<>
-	Hello!
-</>)
+import * as React from 'react'
+
+export default () => {
+	debugger
+	const foo = React.useMemo(() => 1, [])
+	return <>Hello!</>
+}

packages/playground/admin/app/pages/ui/toast.tsx

@@ -12,7 +12,7 @@ const ToastTrigger = ({ type, description, title, ...props }: {
 	const showToast = useShowToast()
 	const onClick = () => {
 		showToast(
-			<ToastContent title={title} description={description} />,
+			<ToastContent title={title} children={description} />,
 			{
 				type,
 			},