feat(playground): add example of simple custom component with hooks a…

…nd static render

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

@@ -61,6 +61,9 @@ export const Navigation = () => {
 					<MenuItem icon={line} label={'Plate editor'} to={'plateEditor'} />
 					<MenuItem icon={line} label={'Legacy block editor'} to={'legacyEditor/blocks'} />
 				</MenuItem>
+				<MenuItem icon={<PencilIcon size={16} />} label={'Custom components'}>
+					<MenuItem icon={line} label={'Input'} to={'custom/input'} />
+				</MenuItem>
 			</Menu>
 		</div>
 	)

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

@@ -0,0 +1,41 @@
+import { Component, EntitySubTree, Field, SugaredRelativeSingleField, useField } from '@contember/interface'
+import { Binding, PersistButton } from '../../lib/components/binding'
+import * as React from 'react'
+import { Slots } from '../../lib/components/slots'
+import { Button } from '../../lib/components/ui/button'
+
+export const input = () => (
+	<Binding>
+		<Slots.Actions><PersistButton/></Slots.Actions>
+		<EntitySubTree entity={'InputRoot(unique=unique)'} setOnCreate={'(unique=unique)'}>
+			<UseFieldComponent field={'intValue'}/>
+		</EntitySubTree>
+	</Binding>
+)
+
+type MyComponentProps = {
+	field: SugaredRelativeSingleField['field']
+}
+
+const UseFieldComponent = Component<MyComponentProps>(
+	({ field }) => {
+		// The `useField` hook is used to get and update the field value from data-binding.
+		const { value, updateValue } = useField<number>(field)
+		const increment = () => updateValue((value ?? 0) + 1)
+		const decrement = () => updateValue((value ?? 0) - 1)
+
+		return (
+			<div className={'flex gap-4 items-center'}>
+				<Button onClick={decrement}>Decrement</Button>
+				<div className={'w-8 h-8 border flex justify-center items-center'}>
+					<div>{value}</div>
+				</div>
+				<Button onClick={increment}>Increment</Button>
+			</div>
+		)
+	},
+	// When using hooks in the render function above, specify `staticRender` as the second argument to `Component` to ensure all data is properly registered.
+	({ field }) => (
+		<Field field={field}/>
+	),
+)