@rakun-kit/manager-react 1.4.8 → 1.4.10

package/README.md

@@ -1,196 +1,196 @@
-# @rakun-kit/manager-react
-
-React manager UI and client utilities for Rakun.
-
-Most apps use this package through framework adapters such as
-`@rakun-kit/next/manager`, but the runtime components and clients are also
-published for custom integrations.
-
-## Browser App
-
-Render the manager with a manager client and navigation implementation:
-
-```tsx
-import {
-  ManagerBrowserApp,
-  createHttpManagerClient,
-} from "@rakun-kit/manager-react";
-import "@rakun-kit/manager-react/styles.css";
-
-const client = createHttpManagerClient({
-  baseUrl: "/api/rakun",
-});
-
-export function ManagerPage() {
-  return (
-    <ManagerBrowserApp
-      client={client}
-      pathname={window.location.pathname}
-      basePath="/backend"
-    />
-  );
-}
-```
-
-`ManagerBrowserApp` creates browser path navigation by default. Use
-`ManagerRuntimeApp` when you need to provide custom navigation.
-
-## Clients
-
-HTTP client:
-
-```ts
-import { createHttpManagerClient } from "@rakun-kit/manager-react/client/http";
-
-const client = createHttpManagerClient({
-  baseUrl: "/api/rakun",
-});
-
-const contentTypes = await client.request("manager.contentTypes");
-```
-
-tRPC client adapter:
-
-```ts
-import { createTrpcManagerClient } from "@rakun-kit/manager-react/client/trpc";
-
-const managerClient = createTrpcManagerClient(trpcProxyClient);
-```
-
-Custom client:
-
-```ts
-import { createManagerClient } from "@rakun-kit/manager-react/client/request";
-
-const client = createManagerClient(async (name, input, options) => {
-  // call your transport here
-});
-```
-
-## Navigation
-
-Use `createPathManagerNavigation` for router integrations:
-
-```ts
-import { createPathManagerNavigation } from "@rakun-kit/manager-react/state/navigation";
-
-const navigation = createPathManagerNavigation({
-  basePath: "/backend",
-  push: (href) => router.push(href),
-  replace: (href) => router.replace(href),
-});
-```
-
-## Styles
-
-Import the package stylesheet once:
-
-```ts
-import "@rakun-kit/manager-react/styles.css";
-```
-
-## Manager Plugins
-
-Manager plugins run inside the normal providers and can add dashboard routes,
-sidebar items, and custom field editors:
-
-```tsx
-import {
-  defineRakunManagerPlugin,
-  ManagerBrowserApp,
-} from '@rakun-kit/manager-react'
-
-const analyticsManagerPlugin = defineRakunManagerPlugin({
-  id: '@acme/rakun-analytics',
-  routes: [{
-    id: 'dashboard',
-    path: '/analytics',
-    component: AnalyticsScreen,
-    permissions: ['plugin.analytics.view'],
-  }],
-  sidebar: [{
-    id: 'analytics',
-    title: 'Analytics',
-    routeId: 'dashboard',
-    position: 'primary',
-    group: 'Plugins',
-  }],
-  fieldEditors: {
-    '@acme/rakun-analytics.query': QueryEditor,
-  },
-})
-
-<ManagerBrowserApp plugins={[analyticsManagerPlugin]} {...props} />
-```
-
-Use `ManagerFieldEditorProps`, `ManagerFieldEditorRef`, and
-`useManagerFieldValue` from `@rakun-kit/manager-react/plugins` when implementing
-field editors. Next.js applications should import plugin objects inside a
-`'use client'` wrapper around `RakunManagerClientPage`; `RakunManagerPage` accepts
-that wrapper through `managerComponent`.
-
-### Extending the RichText editor
-
-Manager plugins can register Lexical nodes and React plugins for every
-`RichText` field, including fields rendered inside relations, blocks, and
-modules:
-
-```tsx
-'use client'
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import {
-  defineRakunManagerPlugin,
-  type ManagerRichTextPluginProps,
-} from '@rakun-kit/manager-react/plugins'
-import { MentionNode } from './MentionNode'
-
-const MentionsPlugin = ({ id }: ManagerRichTextPluginProps) => {
-  const [editor] = useLexicalComposerContext()
-
-  // Register commands and listeners on `editor` here.
-  return null
-}
-
-export const mentionsManagerPlugin = defineRakunManagerPlugin({
-  id: '@acme/rakun-mentions',
-  richText: {
-    nodes: [MentionNode],
-    plugins: [
-      {
-        id: '@acme/rakun-mentions.plugin',
-        component: MentionsPlugin,
-        placement: 'editor',
-      },
-    ],
-  },
-})
-```
-
-Lexical plugin components receive `ManagerRichTextPluginProps` (the field id,
-configuration, current content type, and related field metadata) and render
-inside `LexicalComposer`, so they can use the normal Lexical React hooks.
-Supported placements are `toolbar`, `block-format`, `editor` (the default),
-`actions-start`, and `actions-end`. `block-format` components render inside the
-manager's block selector and can use `ManagerRichTextBlockFormatItem` from
-`@rakun-kit/manager-react/rich-text`. Contributions keep declaration order
-unless an explicit `order` is provided. Node types and plugin ids must be unique;
-conflicts report both plugin owners. Node replacements use Lexical's standard
-`LexicalNodeReplacement` configuration.
-
-## Exports
-
-- `@rakun-kit/manager-react`: manager app, providers, clients, navigation, router, layout, media, and state helpers.
-- `@rakun-kit/manager-react/client/http`: HTTP manager client.
-- `@rakun-kit/manager-react/client/request`: transport-agnostic manager client.
-- `@rakun-kit/manager-react/client/trpc`: tRPC proxy client adapter.
-- `@rakun-kit/manager-react/app/runtime-app`: `ManagerRuntimeApp`, `ManagerBrowserApp`.
-- `@rakun-kit/manager-react/state/navigation`: navigation helpers and provider.
-- `@rakun-kit/manager-react/link`: link component provider.
-- `@rakun-kit/manager-react/styles.css`: bundled manager styles.
-
-## Build
-
-```sh
-bun run build --workspace @rakun-kit/manager-react
-```
+# @rakun-kit/manager-react
+
+React manager UI and client utilities for Rakun.
+
+Most apps use this package through framework adapters such as
+`@rakun-kit/next/manager`, but the runtime components and clients are also
+published for custom integrations.
+
+## Browser App
+
+Render the manager with a manager client and navigation implementation:
+
+```tsx
+import {
+  ManagerBrowserApp,
+  createHttpManagerClient,
+} from "@rakun-kit/manager-react";
+import "@rakun-kit/manager-react/styles.css";
+
+const client = createHttpManagerClient({
+  baseUrl: "/api/rakun",
+});
+
+export function ManagerPage() {
+  return (
+    <ManagerBrowserApp
+      client={client}
+      pathname={window.location.pathname}
+      basePath="/backend"
+    />
+  );
+}
+```
+
+`ManagerBrowserApp` creates browser path navigation by default. Use
+`ManagerRuntimeApp` when you need to provide custom navigation.
+
+## Clients
+
+HTTP client:
+
+```ts
+import { createHttpManagerClient } from "@rakun-kit/manager-react/client/http";
+
+const client = createHttpManagerClient({
+  baseUrl: "/api/rakun",
+});
+
+const contentTypes = await client.request("manager.contentTypes");
+```
+
+tRPC client adapter:
+
+```ts
+import { createTrpcManagerClient } from "@rakun-kit/manager-react/client/trpc";
+
+const managerClient = createTrpcManagerClient(trpcProxyClient);
+```
+
+Custom client:
+
+```ts
+import { createManagerClient } from "@rakun-kit/manager-react/client/request";
+
+const client = createManagerClient(async (name, input, options) => {
+  // call your transport here
+});
+```
+
+## Navigation
+
+Use `createPathManagerNavigation` for router integrations:
+
+```ts
+import { createPathManagerNavigation } from "@rakun-kit/manager-react/state/navigation";
+
+const navigation = createPathManagerNavigation({
+  basePath: "/backend",
+  push: (href) => router.push(href),
+  replace: (href) => router.replace(href),
+});
+```
+
+## Styles
+
+Import the package stylesheet once:
+
+```ts
+import "@rakun-kit/manager-react/styles.css";
+```
+
+## Manager Plugins
+
+Manager plugins run inside the normal providers and can add dashboard routes,
+sidebar items, and custom field editors:
+
+```tsx
+import {
+  defineRakunManagerPlugin,
+  ManagerBrowserApp,
+} from '@rakun-kit/manager-react'
+
+const analyticsManagerPlugin = defineRakunManagerPlugin({
+  id: '@acme/rakun-analytics',
+  routes: [{
+    id: 'dashboard',
+    path: '/analytics',
+    component: AnalyticsScreen,
+    permissions: ['plugin.analytics.view'],
+  }],
+  sidebar: [{
+    id: 'analytics',
+    title: 'Analytics',
+    routeId: 'dashboard',
+    position: 'primary',
+    group: 'Plugins',
+  }],
+  fieldEditors: {
+    '@acme/rakun-analytics.query': QueryEditor,
+  },
+})
+
+<ManagerBrowserApp plugins={[analyticsManagerPlugin]} {...props} />
+```
+
+Use `ManagerFieldEditorProps`, `ManagerFieldEditorRef`, and
+`useManagerFieldValue` from `@rakun-kit/manager-react/plugins` when implementing
+field editors. Next.js applications should import plugin objects inside a
+`'use client'` wrapper around `RakunManagerClientPage`; `RakunManagerPage` accepts
+that wrapper through `managerComponent`.
+
+### Extending the RichText editor
+
+Manager plugins can register Lexical nodes and React plugins for every
+`RichText` field, including fields rendered inside relations, blocks, and
+modules:
+
+```tsx
+'use client'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import {
+  defineRakunManagerPlugin,
+  type ManagerRichTextPluginProps,
+} from '@rakun-kit/manager-react/plugins'
+import { MentionNode } from './MentionNode'
+
+const MentionsPlugin = ({ id }: ManagerRichTextPluginProps) => {
+  const [editor] = useLexicalComposerContext()
+
+  // Register commands and listeners on `editor` here.
+  return null
+}
+
+export const mentionsManagerPlugin = defineRakunManagerPlugin({
+  id: '@acme/rakun-mentions',
+  richText: {
+    nodes: [MentionNode],
+    plugins: [
+      {
+        id: '@acme/rakun-mentions.plugin',
+        component: MentionsPlugin,
+        placement: 'editor',
+      },
+    ],
+  },
+})
+```
+
+Lexical plugin components receive `ManagerRichTextPluginProps` (the field id,
+configuration, current content type, and related field metadata) and render
+inside `LexicalComposer`, so they can use the normal Lexical React hooks.
+Supported placements are `toolbar`, `block-format`, `editor` (the default),
+`actions-start`, and `actions-end`. `block-format` components render inside the
+manager's block selector and can use `ManagerRichTextBlockFormatItem` from
+`@rakun-kit/manager-react/rich-text`. Contributions keep declaration order
+unless an explicit `order` is provided. Node types and plugin ids must be unique;
+conflicts report both plugin owners. Node replacements use Lexical's standard
+`LexicalNodeReplacement` configuration.
+
+## Exports
+
+- `@rakun-kit/manager-react`: manager app, providers, clients, navigation, router, layout, media, and state helpers.
+- `@rakun-kit/manager-react/client/http`: HTTP manager client.
+- `@rakun-kit/manager-react/client/request`: transport-agnostic manager client.
+- `@rakun-kit/manager-react/client/trpc`: tRPC proxy client adapter.
+- `@rakun-kit/manager-react/app/runtime-app`: `ManagerRuntimeApp`, `ManagerBrowserApp`.
+- `@rakun-kit/manager-react/state/navigation`: navigation helpers and provider.
+- `@rakun-kit/manager-react/link`: link component provider.
+- `@rakun-kit/manager-react/styles.css`: bundled manager styles.
+
+## Build
+
+```sh
+bun run build --workspace @rakun-kit/manager-react
+```

package/dist/cjs/components/editor/themes/editor-theme.css

@@ -1,91 +1,91 @@
-.EditorTheme__code {
-  background-color: transparent;
-  font-family: Menlo, Consolas, Monaco, monospace;
-  display: block;
-  padding: 8px 8px 8px 52px;
-  line-height: 1.53;
-  font-size: 13px;
-  margin: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  overflow-x: auto;
-  border: 1px solid #ccc;
-  position: relative;
-  border-radius: 8px;
-  tab-size: 2;
-}
-.EditorTheme__code:before {
-  content: attr(data-gutter);
-  position: absolute;
-  background-color: transparent;
-  border-right: 1px solid #ccc;
-  left: 0;
-  top: 0;
-  padding: 8px;
-  color: #777;
-  white-space: pre-wrap;
-  text-align: right;
-  min-width: 25px;
-}
-.EditorTheme__table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow-y: scroll;
-  overflow-x: scroll;
-  table-layout: fixed;
-  width: fit-content;
-  width: 100%;
-  margin: 0px 0px 30px 0px;
-}
-.EditorTheme__tokenComment {
-  color: slategray;
-}
-.EditorTheme__tokenPunctuation {
-  color: #999;
-}
-.EditorTheme__tokenProperty {
-  color: #905;
-}
-.EditorTheme__tokenSelector {
-  color: #690;
-}
-.EditorTheme__tokenOperator {
-  color: #9a6e3a;
-}
-.EditorTheme__tokenAttr {
-  color: #07a;
-}
-.EditorTheme__tokenVariable {
-  color: #e90;
-}
-.EditorTheme__tokenFunction {
-  color: #dd4a68;
-}
-
-.Collapsible__container {
-  background-color: var(--background);
-  border: 1px solid #ccc;
-  border-radius: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.Collapsible__title{
-  padding: 0.25rem;
-  padding-left: 1rem;
-  position: relative;
-  font-weight: bold;
-  outline: none;
-  cursor: pointer;
-  list-style-type: disclosure-closed;
-  list-style-position: inside;
-}
-
-.Collapsible__title p{
-  display: inline-flex;
-}
-.Collapsible__title::marker{
-  color: lightgray;
-}
-.Collapsible__container[open] >.Collapsible__title {
-  list-style-type: disclosure-open;
-}
+.EditorTheme__code {
+  background-color: transparent;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+  border: 1px solid #ccc;
+  position: relative;
+  border-radius: 8px;
+  tab-size: 2;
+}
+.EditorTheme__code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: transparent;
+  border-right: 1px solid #ccc;
+  left: 0;
+  top: 0;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.EditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: fit-content;
+  width: 100%;
+  margin: 0px 0px 30px 0px;
+}
+.EditorTheme__tokenComment {
+  color: slategray;
+}
+.EditorTheme__tokenPunctuation {
+  color: #999;
+}
+.EditorTheme__tokenProperty {
+  color: #905;
+}
+.EditorTheme__tokenSelector {
+  color: #690;
+}
+.EditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.EditorTheme__tokenAttr {
+  color: #07a;
+}
+.EditorTheme__tokenVariable {
+  color: #e90;
+}
+.EditorTheme__tokenFunction {
+  color: #dd4a68;
+}
+
+.Collapsible__container {
+  background-color: var(--background);
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.Collapsible__title{
+  padding: 0.25rem;
+  padding-left: 1rem;
+  position: relative;
+  font-weight: bold;
+  outline: none;
+  cursor: pointer;
+  list-style-type: disclosure-closed;
+  list-style-position: inside;
+}
+
+.Collapsible__title p{
+  display: inline-flex;
+}
+.Collapsible__title::marker{
+  color: lightgray;
+}
+.Collapsible__container[open] >.Collapsible__title {
+  list-style-type: disclosure-open;
+}

package/dist/cjs/components/ui/sortable.js

@@ -167,10 +167,10 @@ function Sortable(props) {
         },
     }), [value]);
     const screenReaderInstructions = React.useMemo(() => ({
-        draggable: `
-        To pick up a sortable item, press space or enter.
-        While dragging, use the ${orientation === "vertical" ? "up and down" : orientation === "horizontal" ? "left and right" : "arrow"} keys to move the item.
-        Press space or enter again to drop the item in its new position, or press escape to cancel.
+        draggable: `
+        To pick up a sortable item, press space or enter.
+        While dragging, use the ${orientation === "vertical" ? "up and down" : orientation === "horizontal" ? "left and right" : "arrow"} keys to move the item.
+        Press space or enter again to drop the item in its new position, or press escape to cancel.
       `,
     }), [orientation]);
     const contextValue = React.useMemo(() => ({

package/dist/cjs/router/dashboard/[contentType]/[edit]/ContentTypeEdit.js

@@ -97,11 +97,13 @@ const ContentTypeEdit = (0, react_1.forwardRef)((props, ref) => {
     const { refs, setRef } = useArrayRefs();
     const errors = (0, app_store_1.useEditErrorStore)((state) => state.errors);
     const addError = (0, app_store_1.useEditErrorStore)((state) => state.addError);
+    const removeRelatedErrors = (0, app_store_1.useEditErrorStore)((state) => state.removeRelatedErrors);
     const formStateInitialValue = (0, react_1.useMemo)(() => Object.fromEntries(Object.keys(contentType.fields).map((fieldName) => [
         fieldName,
         defaultDataExtractor(fieldName, props.defaultData),
     ])), [contentType.fields, props.defaultData]);
     const [formState, setFormState] = (0, react_1.useState)(formStateInitialValue);
+    const conditionFieldState = (0, react_1.useMemo)(() => (0, condition_state_1.mergeConditionFieldState)(props.defaultData, formState), [formState, props.defaultData]);
     const [dynamicBindings, setDynamicBindings] = (0, react_1.useState)(getDefaultBindings(props.defaultData));
     const [dynamicEditorOpen, setDynamicEditorOpen] = (0, react_1.useState)(null);
     const allItems = (0, react_1.useMemo)(() => Object.entries(contentType.fields).filter(([_, fieldValue]) => !(fieldValue.visibility === 'api')), [contentType.fields]);
@@ -154,7 +156,10 @@ const ContentTypeEdit = (0, react_1.forwardRef)((props, ref) => {
             return bindings ? { ...states, _bindings: bindings } : states;
         },
     }), [addError, allItems, contentType.name, dynamicBindings, formState, id, visibleFieldNames]);
-    return ((0, jsx_runtime_1.jsx)(condition_state_1.ConditionFieldStateProvider, { value: { onFieldStateChange: handleFieldStateChange }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-8 mx-auto w-full h-full", children: allItems.map(([fieldName, fieldValue], i) => {
+    return ((0, jsx_runtime_1.jsx)(condition_state_1.ConditionFieldStateProvider, { value: {
+            fieldState: conditionFieldState,
+            onFieldStateChange: handleFieldStateChange,
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-8 mx-auto w-full h-full", children: allItems.map(([fieldName, fieldValue], i) => {
                 const isVisible = visibleFieldNames.has(fieldName);
                 const description = getFieldDescription(fieldValue);
                 if (!isVisible) {
@@ -170,11 +175,17 @@ const ContentTypeEdit = (0, react_1.forwardRef)((props, ref) => {
                     ? dynamicBindings?.lists?.[fieldName]
                     : dynamicBindings?.fields?.[fieldName];
                 const dynamicFallbackPlaceholder = showDynamicData && dynamicBinding ? 'Fallback value' : undefined;
-                const field = FieldComponent ? ((0, jsx_runtime_1.jsx)(FieldComponent, { id: id + '.' + fieldName, ref: setRef(i), ...fieldValue, defaultData: defaultDataExtractor(fieldName, props.defaultData), dynamicFallbackPlaceholder: dynamicFallbackPlaceholder, parentContentType: dynamicSourceContentType })) : ((0, jsx_runtime_1.jsx)(Missing_1.default, { field: fieldValue.config }));
+                const field = FieldComponent ? ((0, jsx_runtime_1.jsx)(FieldComponent, { id: id + '.' + fieldName, ref: setRef(i), ...fieldValue, isRequired: (0, DynamicDataControl_1.isDynamicFallbackRequired)(fieldValue, dynamicBinding), defaultData: defaultDataExtractor(fieldName, props.defaultData), dynamicFallbackPlaceholder: dynamicFallbackPlaceholder, parentContentType: dynamicSourceContentType })) : ((0, jsx_runtime_1.jsx)(Missing_1.default, { field: fieldValue.config }));
                 const dynamicOpen = dynamicEditorOpen === fieldName;
                 const setDynamicOpen = (open) => setDynamicEditorOpen(open ? fieldName : null);
-                const dynamicTrigger = showDynamicData ? ((0, jsx_runtime_1.jsx)(DynamicDataControl_1.DynamicDataControl, { contentType: contentType, documentContentType: dynamicSourceContentType, fieldName: fieldName, field: fieldValue, contentTypes: (contentTypesData ?? []), bindings: dynamicBindings, onChange: setDynamicBindings, open: dynamicOpen, onOpenChange: setDynamicOpen, mode: "trigger" })) : null;
-                const dynamicDialog = showDynamicData ? ((0, jsx_runtime_1.jsx)(DynamicDataControl_1.DynamicDataControl, { contentType: contentType, documentContentType: dynamicSourceContentType, fieldName: fieldName, field: fieldValue, contentTypes: (contentTypesData ?? []), bindings: dynamicBindings, onChange: setDynamicBindings, open: dynamicOpen, onOpenChange: setDynamicOpen, mode: "dialog" })) : null;
+                const dynamicTrigger = showDynamicData ? ((0, jsx_runtime_1.jsx)(DynamicDataControl_1.DynamicDataControl, { contentType: contentType, documentContentType: dynamicSourceContentType, fieldName: fieldName, field: fieldValue, contentTypes: (contentTypesData ?? []), bindings: dynamicBindings, onChange: (bindings) => {
+                        setDynamicBindings(bindings);
+                        removeRelatedErrors(`${id}.${fieldName}`);
+                    }, open: dynamicOpen, onOpenChange: setDynamicOpen, mode: "trigger" })) : null;
+                const dynamicDialog = showDynamicData ? ((0, jsx_runtime_1.jsx)(DynamicDataControl_1.DynamicDataControl, { contentType: contentType, documentContentType: dynamicSourceContentType, fieldName: fieldName, field: fieldValue, contentTypes: (contentTypesData ?? []), bindings: dynamicBindings, onChange: (bindings) => {
+                        setDynamicBindings(bindings);
+                        removeRelatedErrors(`${id}.${fieldName}`);
+                    }, open: dynamicOpen, onOpenChange: setDynamicOpen, mode: "dialog" })) : null;
                 const Tags = ({ children }) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: [children, fieldValue.isTranslatable ? ((0, jsx_runtime_1.jsx)(FieldMetaIcon, { label: "Translatable field", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Languages, { "aria-hidden": "true", size: 16 }) })) : null, fieldValue.isRequired ? ((0, jsx_runtime_1.jsx)(FieldMetaIcon, { label: "Required field", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { "aria-hidden": "true", size: 16 }) })) : null] }));
                 const canCollapse = fieldValue.config.ui === 'ContentType' &&
                     fieldValue.only === 'new' &&