refactor: extract ui to react-ui-lib

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

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import { memo, PropsWithChildren } from 'react'
-import { IdentityLoader } from '../../lib/components/binding/identity'
-import { Slots } from '../../lib/components/slots'
+import { IdentityLoader } from '@app/lib/binding'
+import { LayoutComponent, Slots } from '@app/lib/layout'
 import { Navigation } from './navigation'
-import { LayoutComponent } from '../../lib/components/layout'
 import { Link } from '@contember/interface'
 import { Logo } from './icon'
 

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

@@ -1,5 +1,5 @@
 import { ArchiveIcon, BrushIcon, FormInputIcon, GripVertical, HomeIcon, KanbanIcon, KeyRoundIcon, LanguagesIcon, LockKeyholeIcon, PencilIcon, TableIcon, UploadIcon, UserIcon, UsersIcon } from 'lucide-react'
-import { Menu, MenuItem } from '../../lib/components/ui/menu'
+import { Menu, MenuItem } from '@app/lib/ui/menu'
 
 
 export const Navigation = () => {

packages/playground/admin/app/index.tsx

@@ -2,13 +2,13 @@ import { ApplicationEntrypoint, PageModule, Pages } from '@contember/interface'
 import { SlotsProvider } from '@contember/react-slots'
 import { Layout } from './components/layout'
 import '../index.css'
-import { Toaster } from '../lib/components/ui/toast'
+import { Toaster } from '@app/lib/toast'
 import { createErrorHandler, DevBar, DevPanel } from '@contember/react-devbar'
 import { LogInIcon } from 'lucide-react'
-import { LoginWithEmail } from '../lib/components/dev/login-panel'
+import { LoginWithEmail } from '@app/lib/dev'
 import { createRoot } from 'react-dom/client'
 import { getConfig } from './config'
-import { OutdatedApplicationDialog } from '../lib/components/outdated-application-dialog'
+import { OutdatedApplicationDialog } from '@app/lib/outdated-application-dialog'
 
 const errorHandler = createErrorHandler((dom, react, onRecoverableError) => createRoot(dom, { onRecoverableError }).render(react))
 

packages/playground/admin/app/labels.ts

@@ -1,5 +1,5 @@
 import { BoardTaskStatus, GridArticleState } from '../../api/client'
-import { createEnumFormatter } from '../lib/utils/formatting'
+import { createEnumFormatter } from '@app/lib/formatting'
 
 export const BoardTaskStatusLabels: Record<BoardTaskStatus, string> = {
 	backlog: 'Backlog',

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

@@ -1,13 +1,13 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import * as React from 'react'
 import { EntitySubTree, EntityView, Field, HasOne, StaticRender } from '@contember/interface'
-import { DefaultBlockRepeater } from '../../lib/components/block-repeater'
-import { ImageField, InputField, RadioEnumField, TextareaField } from '../../lib/components/form'
-import { UploadedImageView } from '../../lib/components/upload'
+import { DefaultBlockRepeater } from '@app/lib/block-repeater'
+import { ImageField, InputField, RadioEnumField, TextareaField } from '@app/lib/form'
+import { UploadedImageView } from '@app/lib/upload'
 import { Block } from '@contember/react-block-repeater'
 import { AlertOctagonIcon, ColumnsIcon, ImageIcon, TextIcon } from 'lucide-react'
-import { cn } from '../../lib/utils/cn'
+import { cn } from '@app/lib/utils'
 
 export default () => <>
 	<Binding>

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

@@ -1,8 +1,8 @@
 import { Field } from '@contember/interface'
-import { Slots } from '../../lib/components/slots'
+import { Slots } from '@app/lib/layout'
 import { BoardColumnLabel } from '@contember/react-board'
-import { Binding, PersistButton, PersistOnFieldChange } from '../../lib/components/binding'
-import { DefaultBoard } from '../../lib/components/board'
+import { Binding, PersistButton, PersistOnFieldChange } from '@app/lib/binding'
+import { DefaultBoard } from '@app/lib/board/board'
 
 const statusList = [
 	{ value: 'backlog', label: 'Backlog' },

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

@@ -1,10 +1,10 @@
-import { Slots } from '../../lib/components/slots'
-import { Binding, PersistButton } from '../../lib/components/binding'
+import { Slots } from '@app/lib/layout'
+import { Binding, PersistButton } from '@app/lib/binding'
 import * as React from 'react'
-import { DimensionsSwitcher, SideDimensions } from '../../lib/components/dimensions'
+import { DimensionsSwitcher, SideDimensions } from '@app/lib/dimensions'
 import { EntitySubTree, Field, Variable } from '@contember/interface'
-import { InputField, TextareaField } from '../../lib/components/form'
-import { Card, CardContent, CardHeader, CardTitle } from '../../lib/components/ui/card'
+import { InputField, TextareaField } from '@app/lib/form'
+import { Card, CardContent, CardHeader, CardTitle } from '@app/lib/ui/card'
 
 export default () => {
 	return <>

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

@@ -1,8 +1,8 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import * as React from 'react'
 import { Component, EntitySubTree, HasOne, useEntity, useField } from '@contember/interface'
-import { Toggle } from '../../lib/components/ui/toggle'
+import { Toggle } from '@app/lib/ui/toggle'
 import {
 	AlignCenterIcon,
 	AlignJustifyIcon,
@@ -31,11 +31,14 @@ import {
 } from 'lucide-react'
 import {
 	anchorElementType,
-	BlockContent,
 	boldMark,
 	codeMark,
 	createAlignHandler,
+	EditorElementTrigger,
+	EditorGenericTrigger,
+	EditorInlineReferencePortal,
 	EditorMarkTrigger,
+	EditorReferenceTrigger,
 	EditorRenderElementProps,
 	EditorTransforms,
 	EditorWrapNodeTrigger,
@@ -51,18 +54,13 @@ import {
 	underlineMark,
 	unorderedListElementType,
 } from '@contember/react-slate-editor'
-import { ImageField, InputField } from '../../lib/components/form'
-import { Popover, PopoverContent, PopoverTrigger } from '../../lib/components/ui/popover'
-import { Button } from '../../lib/components/ui/button'
+import { ImageField, InputField } from '@app/lib/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@app/lib/ui/popover'
+import { Button } from '@app/lib/ui/button'
 import { PopoverClose } from '@radix-ui/react-popover'
-import { uic } from '../../lib/utils/uic'
-import { EditorElementTrigger, EditorGenericTrigger, EditorInlineReferencePortal, EditorReferenceTrigger } from '@contember/react-slate-editor'
+import { uic } from '@app/lib/utils'
 import { useSlateStatic } from 'slate-react'
-import { RichTextField } from '../../lib-extra/editor/new/RichTextField'
-import { InlineHoveringToolbar } from '../../lib-extra/editor/common/InlineHoveringToolbar'
-import { BlockEditorField } from '../../lib-extra/editor/new/BlockEditor'
-import { BlockToolbar } from '../../lib-extra/editor/common/BlockToolbar'
-import { EditorBlock, EditorBlockContent } from '../../lib-extra/editor/new/EditorBlock'
+import { BlockEditorField, EditorBlock, EditorBlockContent, EditorBlockToolbar, EditorInlineToolbar, RichTextField } from '@app/lib/editor'
 
 export const richtext = () => <>
 	<Binding>
@@ -72,15 +70,15 @@ export const richtext = () => <>
 		<EntitySubTree entity={'EditorTextArea(unique=unique)'} setOnCreate={'(unique=unique)'}>
 			<div className={'space-y-4'}>
 				<RichTextField field={'data'} label="Rich text field">
-					<InlineHoveringToolbar>
+					<EditorInlineToolbar>
 						<EditorMarkTrigger mark={boldMark}><Toggle><BoldIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 						<EditorMarkTrigger mark={italicMark}><Toggle><ItalicIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 						<EditorMarkTrigger mark={underlineMark}><Toggle><UnderlineIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 						<EditorElementTrigger elementType={anchorElementType}><Toggle><LinkIcon className="h-3 w-3" /></Toggle></EditorElementTrigger>
 						<EditorGenericTrigger {...createAlignHandler('start')}><Toggle><AlignLeftIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						<EditorGenericTrigger {...createAlignHandler('end')}><Toggle><AlignRightIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						<EditorGenericTrigger {...createAlignHandler('center')}><Toggle><AlignCenterIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
-					</InlineHoveringToolbar>
+					</EditorInlineToolbar>
 				</RichTextField>
 			</div>
 		</EntitySubTree>
@@ -113,14 +111,14 @@ export const blocks = () => <>
 						},
 					]}
 				>
-					<BlockToolbar>
+					<EditorBlockToolbar>
 						<EditorReferenceTrigger referenceType="quote"><BlockButton><QuoteIcon /> Quote</BlockButton></EditorReferenceTrigger>
 						<EditorReferenceTrigger referenceType="image"><BlockButton><ImageIcon /> Image</BlockButton></EditorReferenceTrigger>
 						<EditorElementTrigger elementType={tableElementType}><BlockButton><TableIcon /> Table</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={scrollTargetElementType}><BlockButton><LocateIcon /> Scroll target</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={horizontalRuleElementType}><BlockButton><MinusIcon  /> Horizontal rule</BlockButton></EditorElementTrigger>
-					</BlockToolbar>
-					<InlineHoveringToolbar>
+					</EditorBlockToolbar>
+					<EditorInlineToolbar>
 						<div>
 							<EditorMarkTrigger mark={boldMark}><Toggle><BoldIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 							<EditorMarkTrigger mark={italicMark}><Toggle><ItalicIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
@@ -154,7 +152,7 @@ export const blocks = () => <>
 							<EditorGenericTrigger {...createAlignHandler('center')}><Toggle><AlignCenterIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 							<EditorGenericTrigger {...createAlignHandler('justify')}><Toggle><AlignJustifyIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						</div>
-					</InlineHoveringToolbar>
+					</EditorInlineToolbar>
 
 					<EditorBlock name="quote" label="Quote">
 						<EditorBlockContent />

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

@@ -1,5 +1,5 @@
 import { Component, Field, HasMany, HasOne, If } from '@contember/interface'
-import { Slots } from '../../lib/components/slots'
+import { Slots } from '@app/lib/layout'
 import { DataViewEachRow, DataViewElement, DataViewLayout } from '@contember/react-dataview'
 import {
 	createDataGridDateRange,
@@ -22,23 +22,21 @@ import {
 	DataGridNumberColumn,
 	DataGridNumberFilter,
 	DataGridPagination,
-	DataGridPredefinedDateRange,
 	DataGridQueryFilter,
 	DataGridTable,
 	DataGridTextColumn,
 	DataGridTiles,
 	DataGridToolbar,
 	DataGridTooltipLabel,
-} from '../../lib/components/datagrid'
+} from '@app/lib/datagrid'
 import * as React from 'react'
-import { ReactNode } from 'react'
-import { DefaultDropdown, DropdownMenuItem, DropdownMenuSeparator } from '../../lib/components/ui/dropdown'
-import { Binding, DeleteEntityDialog } from '../../lib/components/binding'
+import { DefaultDropdown, DropdownMenuItem, DropdownMenuSeparator } from '@app/lib/ui/dropdown'
+import { Binding, DeleteEntityDialog } from '@app/lib/binding'
 import { GridArticleStateLabels } from '../labels'
-import { formatDate } from '../../lib/utils/formatting'
-import { Button } from '../../lib/components/ui/button'
+import { formatDate } from '@app/lib/formatting'
+import { Button } from '@app/lib/ui/button'
 import { EyeIcon, LockIcon, MessageSquareIcon, RowsIcon } from 'lucide-react'
-import { Popover, PopoverContent, PopoverTrigger } from '../../lib/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@app/lib/ui/popover'
 
 export const simpleGrid = () => {
 	return (

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

@@ -1,11 +1,11 @@
-import { Slots } from '../../lib/components/slots'
+import { Slots } from '@app/lib/layout'
 import { EntitySubTree, useField } from '@contember/interface'
-import { CheckboxField, InputField, RadioEnumField, TextareaField } from '../../lib/components/form'
+import { CheckboxField, InputField, RadioEnumField, TextareaField } from '@app/lib/form'
 import * as React from 'react'
-import { Button } from '../../lib/components/ui/button'
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { SelectOrTypeField } from '../../lib-extra/select-or-type-field'
-import { FieldExists } from '../../lib-extra/has-field'
+import { Button } from '@app/lib/ui/button'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { SelectOrTypeField } from '@app/lib-extra/select-or-type-field'
+import { FieldExists } from '@app/lib-extra/has-field'
 
 
 export const basic = () => <>

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

@@ -1,5 +1,5 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import * as React from 'react'
 import { Component, EntitySubTree, FieldView, HasMany, HasOne, useEntity } from '@contember/interface'
 import {
@@ -14,7 +14,7 @@ import {
 	EmbedHandlers,
 	referenceElementType,
 } from '@contember/react-slate-editor-legacy'
-import { Toggle } from '../../lib/components/ui/toggle'
+import { Toggle } from '@app/lib/ui/toggle'
 import {
 	AlignCenterIcon,
 	AlignJustifyIcon,
@@ -60,16 +60,16 @@ import {
 	underlineMark,
 	unorderedListElementType,
 } from '@contember/react-slate-editor'
-import { ImageField, InputField } from '../../lib/components/form'
-import { Popover, PopoverContent, PopoverTrigger } from '../../lib/components/ui/popover'
-import { Button } from '../../lib/components/ui/button'
+import { ImageField, InputField } from '@app/lib/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@app/lib/ui/popover'
+import { Button } from '@app/lib/ui/button'
 import { PopoverClose } from '@radix-ui/react-popover'
-import { uic } from '../../lib/utils/uic'
+import { uic } from '@app/lib/utils'
 import { useSlateStatic } from 'slate-react'
-import { baseEditorPlugins } from '../../lib-extra/editor/common/baseEditorPlugins'
-import { BlockEditorField } from '../../lib-extra/editor/legacy/BlockEditor'
-import { BlockToolbar } from '../../lib-extra/editor/common/BlockToolbar'
-import { InlineHoveringToolbar } from '../../lib-extra/editor/common/InlineHoveringToolbar'
+import { baseEditorPlugins } from '@app/lib/editor'
+import { BlockEditorField } from '../../lib-extra/legacy-editor/BlockEditor'
+import { EditorBlockToolbar } from '@app/lib/editor'
+import { EditorInlineToolbar } from '@app/lib/editor'
 
 
 const BlockButton = uic('button', {
@@ -127,14 +127,14 @@ export const blocks = () => <>
 						},
 					]}
 				>
-					<BlockToolbar>
+					<EditorBlockToolbar>
 						<EditorReferenceTrigger referenceType="quote"><BlockButton><QuoteIcon /> Quote</BlockButton></EditorReferenceTrigger>
 						<EditorReferenceTrigger referenceType="image"><BlockButton><ImageIcon /> Image</BlockButton></EditorReferenceTrigger>
 						<EditorElementTrigger elementType={tableElementType}><BlockButton><TableIcon /> Table</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={scrollTargetElementType}><BlockButton><LocateIcon /> Scroll target</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={horizontalRuleElementType}><BlockButton><MinusIcon /> Horizontal rule</BlockButton></EditorElementTrigger>
-					</BlockToolbar>
-					<InlineHoveringToolbar>
+					</EditorBlockToolbar>
+					<EditorBlockToolbar>
 						<div>
 							<EditorMarkTrigger mark={boldMark}><Toggle><BoldIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 							<EditorMarkTrigger mark={italicMark}><Toggle><ItalicIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
@@ -168,7 +168,7 @@ export const blocks = () => <>
 							<EditorGenericTrigger {...createAlignHandler('center')}><Toggle><AlignCenterIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 							<EditorGenericTrigger {...createAlignHandler('justify')}><Toggle><AlignJustifyIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						</div>
-					</InlineHoveringToolbar>
+					</EditorBlockToolbar>
 					<Block discriminateBy="quote" label="Quote">
 						<BlockEditor.ContentOutlet placeholder="Type here..." />
 					</Block>

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

@@ -1,10 +1,9 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
-import { InputField } from '../../lib/components/form'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout/slots'
 import * as React from 'react'
 import { EntitySubTree, useField } from '@contember/interface'
-import { PlateEditor } from '../../lib/components/richt-text-editor/plate-editor'
-import { Button } from '../../lib/components/ui/button'
+import { Button } from '@app/lib/ui/button'
+import { PlateEditor } from '@app/lib-extra/plate-editor/plate-editor'
 
 export default () => <>
 	<Binding>

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

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Binding, DeleteEntityDialog, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, DeleteEntityDialog, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import { Field } from '@contember/interface'
-import { DefaultRepeater, RepeaterItemActions, RepeaterRemoveItemButton } from '../../lib/components/repeater'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropDownTriggerButton } from '../../lib/components/ui/dropdown'
+import { DefaultRepeater, RepeaterItemActions, RepeaterRemoveItemButton } from '@app/lib/repeater'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropDownTriggerButton } from '@app/lib/ui/dropdown'
 
 const repeaterDropdown = (
 	<DropdownMenu>

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

@@ -1,9 +1,9 @@
-import { Slots } from '../../lib/components/slots'
-import { Binding, PersistButton } from '../../lib/components/binding'
+import { Slots } from '@app/lib/layout'
+import { Binding, PersistButton } from '@app/lib/binding'
 import { EntitySubTree } from '@contember/interface'
 import * as React from 'react'
 import { Field } from '@contember/react-binding'
-import { InputField, MultiSelectField, SelectEnumField, SelectField, SortableMultiSelectField } from '../../lib/components/form'
+import { InputField, MultiSelectField, SelectEnumField, SelectField, SortableMultiSelectField } from '@app/lib/form'
 
 
 export const hasOne = () => <>

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

@@ -1,16 +1,10 @@
 import { ChangeMyPasswordForm, CreateApiKeyForm, InviteForm } from '@contember/react-identity'
-import { Card, CardContent, CardHeader, CardTitle } from '../../lib/components/ui/card'
-import { ChangeMyPasswordFormFields } from '../../lib/components/tenant/changeMyPasswordForm'
-import { ToastContent, useShowToast } from '../../lib/components/ui/toast'
-import { OtpSetup } from '../../lib/components/tenant/otpSetup'
-import { PersonList } from '../../lib/components/tenant/personList'
-import { InviteFormFields } from '../../lib/components/tenant/inviteForm'
+import { Card, CardContent, CardHeader, CardTitle } from '@app/lib/ui/card'
+import { ApiKeyList, ChangeMyPasswordFormFields, CreateApiKeyFormFields, InviteFormFields, MemberListController, OtpSetup, PersonList } from '@app/lib/tenant'
+import { ToastContent, useShowToast } from '@app/lib/toast'
 import { useProjectSlug } from '@contember/react-client'
-import { Input } from '../../lib/components/ui/input'
-import { CreateApiKeyFormFields } from '../../lib/components/tenant/createApiKeyForm'
-import { ApiKeyList } from '../../lib/components/tenant/apiKeyList'
+import { Input } from '@app/lib/ui/input'
 import { useRef } from 'react'
-import { MemberListController } from '../../lib/components/tenant/memberList'
 
 export const Security = () => {
 	const showToast = useShowToast()

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

@@ -1,4 +1,4 @@
-import { Button } from '../../../lib/components/ui/button'
+import { Button } from '@app/lib/ui/button'
 import { HomeIcon } from 'lucide-react'
 
 export default <>

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

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import { ReactNode } from 'react'
-import { ToastContent, ToastType, useShowToast } from '../../../lib/components/ui/toast'
-import { Button } from '../../../lib/components/ui/button'
+import { ToastContent, ToastType, useShowToast } from '@app/lib/toast'
+import { Button } from '@app/lib/ui/button'
 
 const ToastTrigger = ({ type, description, title, ...props }: {
 	title: string