From 97620aea36af7f43dddeb5818ba60757b0c5be3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jon=C3=A1=C5=A1=20Nobile?= <jonas.nobile@icloud.com>
Date: Tue, 11 Jun 2024 10:26:59 +0200
Subject: [PATCH] feat(playground): add example of simple custom component with
 hooks and static render

---
 .../admin/app/components/navigation.tsx       |  3 ++
 .../playground/admin/app/pages/custom.tsx     | 41 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 packages/playground/admin/app/pages/custom.tsx

diff --git a/packages/playground/admin/app/components/navigation.tsx b/packages/playground/admin/app/components/navigation.tsx
index 39080ce63..ad3658645 100644
--- a/packages/playground/admin/app/components/navigation.tsx
+++ b/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>
 	)
diff --git a/packages/playground/admin/app/pages/custom.tsx b/packages/playground/admin/app/pages/custom.tsx
new file mode 100644
index 000000000..90b342239
--- /dev/null
+++ b/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}/>
+	),
+)