lkb-fields-document 1.0.0

package/dist/layouts-6412fa2a.esm.js

@@ -0,0 +1,189 @@
+'use client';
+import { createContext, useContext, useMemo } from 'react';
+import { Transforms } from 'slate';
+import { useSlateStatic, ReactEditor } from 'slate-react';
+import { Icon } from '@keystar/ui/icon';
+import { columnsIcon } from '@keystar/ui/icon/icons/columnsIcon';
+import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
+import { j as isElementActive } from './utils-bc6a0b82.esm.js';
+import { j as blockElementSpacing, B as BlockPopoverTrigger, c as BlockPopover, d as useToolbarState } from './toolbar-state-bc8fe661.esm.js';
+import { i as insertLayout } from './shared-aaba5901.esm.js';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { ActionGroup } from '@keystar/ui/action-group';
+import { ActionButton } from '@keystar/ui/button';
+import { Flex } from '@keystar/ui/layout';
+import { Item } from '@keystar/ui/tag';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { EditorToolbarButton } from '@keystar/ui/editor';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@keystar/ui/typography';
+import './api-2f524611.esm.js';
+import 'lkb-core';
+import '@keystar/ui/drag-and-drop';
+import './index-67d52357.esm.js';
+import '@braintree/sanitize-url';
+import '@react-aria/i18n';
+import '@keystar/ui/number-field';
+import '@keystar/ui/picker';
+import '@keystar/ui/combobox';
+import '@keystar/ui/text-field';
+import '@keystar/ui/checkbox';
+import './form-from-preview-b3a66f37.esm.js';
+import 'lkb-core/admin-ui/context';
+import 'lkb-core/fields/types/relationship/views';
+import 'lkb-core/admin-ui/utils';
+import '@keystar/ui/dialog';
+import '@keystar/ui/field';
+import '@keystar/ui/list-view';
+import '@keystar/ui/slots';
+import '@keystar/ui/icon/icons/trashIcon';
+import '@react-aria/overlays';
+import '@react-aria/utils';
+import '@react-stately/overlays';
+import '@keystar/ui/overlays';
+import '@emotion/weak-memoize';
+import './layouts-6412fa2a.esm.js';
+
+const LayoutOptionsContext = /*#__PURE__*/createContext([]);
+const LayoutOptionsProvider = LayoutOptionsContext.Provider;
+
+// UI Components
+const LayoutContainer = ({
+  attributes,
+  children,
+  element
+}) => {
+  const editor = useSlateStatic();
+  const layout = element.layout;
+  const layoutOptions = useContext(LayoutOptionsContext);
+  const currentLayoutIndex = layoutOptions.findIndex(x => x.toString() === layout.toString());
+  return /*#__PURE__*/jsx("div", {
+    className: blockElementSpacing,
+    ...attributes,
+    children: /*#__PURE__*/jsxs(BlockPopoverTrigger, {
+      element: element,
+      children: [/*#__PURE__*/jsx("div", {
+        className: css({
+          columnGap: tokenSchema.size.space.regular,
+          display: 'grid'
+        }),
+        style: {
+          gridTemplateColumns: layout.map(x => `${x}fr`).join(' ')
+        },
+        children: children
+      }), /*#__PURE__*/jsx(BlockPopover, {
+        children: /*#__PURE__*/jsxs(Flex, {
+          padding: "regular",
+          gap: "regular",
+          children: [/*#__PURE__*/jsx(ActionGroup, {
+            selectionMode: "single",
+            prominence: "low",
+            density: "compact",
+            onAction: key => {
+              const path = ReactEditor.findPath(editor, element);
+              const layoutOption = layoutOptions[key];
+              Transforms.setNodes(editor, {
+                type: 'layout',
+                layout: layoutOption
+              }, {
+                at: path
+              });
+              ReactEditor.focus(editor);
+            },
+            selectedKeys: currentLayoutIndex !== -1 ? [currentLayoutIndex.toString()] : [],
+            children: layoutOptions.map((layoutOption, i) => /*#__PURE__*/jsx(Item, {
+              children: makeLayoutIcon(layoutOption)
+            }, i))
+          }), /*#__PURE__*/jsxs(TooltipTrigger, {
+            children: [/*#__PURE__*/jsx(ActionButton, {
+              prominence: "low",
+              onPress: () => {
+                const path = ReactEditor.findPath(editor, element);
+                Transforms.removeNodes(editor, {
+                  at: path
+                });
+              },
+              children: /*#__PURE__*/jsx(Icon, {
+                src: trash2Icon
+              })
+            }), /*#__PURE__*/jsx(Tooltip, {
+              tone: "critical",
+              children: "\u5220\u9664"
+            })]
+          })]
+        })
+      })]
+    })
+  });
+};
+const LayoutArea = ({
+  attributes,
+  children
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      borderColor: tokenSchema.color.border.neutral,
+      borderRadius: tokenSchema.size.radius.regular,
+      borderStyle: 'dashed',
+      borderWidth: tokenSchema.size.border.regular,
+      padding: tokenSchema.size.space.medium
+    }),
+    ...attributes,
+    children: children
+  });
+};
+function makeLayoutIcon(ratios) {
+  const size = 16;
+  const element = /*#__PURE__*/jsx("div", {
+    role: "img",
+    className: css({
+      display: 'grid',
+      gridTemplateColumns: ratios.map(r => `${r}fr`).join(' '),
+      gap: 2,
+      width: size,
+      height: size
+    }),
+    children: ratios.map((_, i) => {
+      return /*#__PURE__*/jsx("div", {
+        className: css({
+          backgroundColor: 'currentcolor',
+          borderRadius: 1
+        })
+      }, i);
+    })
+  });
+  return element;
+}
+const layoutsIcon = /*#__PURE__*/jsx(Icon, {
+  src: columnsIcon
+});
+const LayoutsButton = ({
+  layouts
+}) => {
+  const {
+    editor,
+    layouts: {
+      isSelected
+    }
+  } = useToolbarState();
+  return useMemo(() => /*#__PURE__*/jsxs(TooltipTrigger, {
+    children: [/*#__PURE__*/jsx(EditorToolbarButton, {
+      isSelected: isSelected,
+      onPress: () => {
+        if (isElementActive(editor, 'layout')) {
+          Transforms.unwrapNodes(editor, {
+            match: node => node.type === 'layout'
+          });
+        } else {
+          insertLayout(editor, layouts[0]);
+        }
+        ReactEditor.focus(editor);
+      },
+      children: layoutsIcon
+    }), /*#__PURE__*/jsx(Tooltip, {
+      children: "\u5E03\u5C40"
+    })]
+  }), [editor, isSelected, layouts]);
+};
+
+export { LayoutArea, LayoutContainer, LayoutOptionsProvider, LayoutsButton };

package/dist/layouts-a4a3cf0b.node.cjs.js

@@ -0,0 +1,196 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var slate = require('slate');
+var slateReact = require('slate-react');
+var icon = require('@keystar/ui/icon');
+var columnsIcon = require('@keystar/ui/icon/icons/columnsIcon');
+var trash2Icon = require('@keystar/ui/icon/icons/trash2Icon');
+var utils = require('./utils-06bcddc4.node.cjs.js');
+var toolbarState = require('./toolbar-state-9611743f.node.cjs.js');
+var shared = require('./shared-4684cc24.node.cjs.js');
+var style = require('@keystar/ui/style');
+var actionGroup = require('@keystar/ui/action-group');
+var button = require('@keystar/ui/button');
+var layout = require('@keystar/ui/layout');
+var tag = require('@keystar/ui/tag');
+var tooltip = require('@keystar/ui/tooltip');
+var editor = require('@keystar/ui/editor');
+var jsxRuntime = require('react/jsx-runtime');
+require('@keystar/ui/typography');
+require('./api-8e2b20b8.node.cjs.js');
+require('lkb-core');
+require('@keystar/ui/drag-and-drop');
+require('./index-c3223fdc.node.cjs.js');
+require('@braintree/sanitize-url');
+require('@react-aria/i18n');
+require('@keystar/ui/number-field');
+require('@keystar/ui/picker');
+require('@keystar/ui/combobox');
+require('@keystar/ui/text-field');
+require('@keystar/ui/checkbox');
+require('./form-from-preview-9e501058.node.cjs.js');
+require('lkb-core/admin-ui/context');
+require('lkb-core/fields/types/relationship/views');
+require('lkb-core/admin-ui/utils');
+require('@keystar/ui/dialog');
+require('@keystar/ui/field');
+require('@keystar/ui/list-view');
+require('@keystar/ui/slots');
+require('@keystar/ui/icon/icons/trashIcon');
+require('@react-aria/overlays');
+require('@react-aria/utils');
+require('@react-stately/overlays');
+require('@keystar/ui/overlays');
+require('@emotion/weak-memoize');
+require('./layouts-a4a3cf0b.node.cjs.js');
+
+const LayoutOptionsContext = /*#__PURE__*/React.createContext([]);
+const LayoutOptionsProvider = LayoutOptionsContext.Provider;
+
+// UI Components
+const LayoutContainer = ({
+  attributes,
+  children,
+  element
+}) => {
+  const editor = slateReact.useSlateStatic();
+  const layout$1 = element.layout;
+  const layoutOptions = React.useContext(LayoutOptionsContext);
+  const currentLayoutIndex = layoutOptions.findIndex(x => x.toString() === layout$1.toString());
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: toolbarState.blockElementSpacing,
+    ...attributes,
+    children: /*#__PURE__*/jsxRuntime.jsxs(toolbarState.BlockPopoverTrigger, {
+      element: element,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style.css({
+          columnGap: style.tokenSchema.size.space.regular,
+          display: 'grid'
+        }),
+        style: {
+          gridTemplateColumns: layout$1.map(x => `${x}fr`).join(' ')
+        },
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(toolbarState.BlockPopover, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(layout.Flex, {
+          padding: "regular",
+          gap: "regular",
+          children: [/*#__PURE__*/jsxRuntime.jsx(actionGroup.ActionGroup, {
+            selectionMode: "single",
+            prominence: "low",
+            density: "compact",
+            onAction: key => {
+              const path = slateReact.ReactEditor.findPath(editor, element);
+              const layoutOption = layoutOptions[key];
+              slate.Transforms.setNodes(editor, {
+                type: 'layout',
+                layout: layoutOption
+              }, {
+                at: path
+              });
+              slateReact.ReactEditor.focus(editor);
+            },
+            selectedKeys: currentLayoutIndex !== -1 ? [currentLayoutIndex.toString()] : [],
+            children: layoutOptions.map((layoutOption, i) => /*#__PURE__*/jsxRuntime.jsx(tag.Item, {
+              children: makeLayoutIcon(layoutOption)
+            }, i))
+          }), /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+              prominence: "low",
+              onPress: () => {
+                const path = slateReact.ReactEditor.findPath(editor, element);
+                slate.Transforms.removeNodes(editor, {
+                  at: path
+                });
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+                src: trash2Icon.trash2Icon
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+              tone: "critical",
+              children: "\u5220\u9664"
+            })]
+          })]
+        })
+      })]
+    })
+  });
+};
+const LayoutArea = ({
+  attributes,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: style.css({
+      borderColor: style.tokenSchema.color.border.neutral,
+      borderRadius: style.tokenSchema.size.radius.regular,
+      borderStyle: 'dashed',
+      borderWidth: style.tokenSchema.size.border.regular,
+      padding: style.tokenSchema.size.space.medium
+    }),
+    ...attributes,
+    children: children
+  });
+};
+function makeLayoutIcon(ratios) {
+  const size = 16;
+  const element = /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: "img",
+    className: style.css({
+      display: 'grid',
+      gridTemplateColumns: ratios.map(r => `${r}fr`).join(' '),
+      gap: 2,
+      width: size,
+      height: size
+    }),
+    children: ratios.map((_, i) => {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style.css({
+          backgroundColor: 'currentcolor',
+          borderRadius: 1
+        })
+      }, i);
+    })
+  });
+  return element;
+}
+const layoutsIcon = /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+  src: columnsIcon.columnsIcon
+});
+const LayoutsButton = ({
+  layouts
+}) => {
+  const {
+    editor: editor$1,
+    layouts: {
+      isSelected
+    }
+  } = toolbarState.useToolbarState();
+  return React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(editor.EditorToolbarButton, {
+      isSelected: isSelected,
+      onPress: () => {
+        if (utils.isElementActive(editor$1, 'layout')) {
+          slate.Transforms.unwrapNodes(editor$1, {
+            match: node => node.type === 'layout'
+          });
+        } else {
+          shared.insertLayout(editor$1, layouts[0]);
+        }
+        slateReact.ReactEditor.focus(editor$1);
+      },
+      children: layoutsIcon
+    }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+      children: "\u5E03\u5C40"
+    })]
+  }), [editor$1, isSelected, layouts]);
+};
+
+exports.LayoutArea = LayoutArea;
+exports.LayoutContainer = LayoutContainer;
+exports.LayoutOptionsProvider = LayoutOptionsProvider;
+exports.LayoutsButton = LayoutsButton;

package/dist/layouts-ba9a558b.cjs.js

@@ -0,0 +1,196 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var slate = require('slate');
+var slateReact = require('slate-react');
+var icon = require('@keystar/ui/icon');
+var columnsIcon = require('@keystar/ui/icon/icons/columnsIcon');
+var trash2Icon = require('@keystar/ui/icon/icons/trash2Icon');
+var utils = require('./utils-6409f730.cjs.js');
+var toolbarState = require('./toolbar-state-3359e2f3.cjs.js');
+var shared = require('./shared-0533009e.cjs.js');
+var style = require('@keystar/ui/style');
+var actionGroup = require('@keystar/ui/action-group');
+var button = require('@keystar/ui/button');
+var layout = require('@keystar/ui/layout');
+var tag = require('@keystar/ui/tag');
+var tooltip = require('@keystar/ui/tooltip');
+var editor = require('@keystar/ui/editor');
+var jsxRuntime = require('react/jsx-runtime');
+require('@keystar/ui/typography');
+require('./api-73636987.cjs.js');
+require('lkb-core');
+require('@keystar/ui/drag-and-drop');
+require('./index-06c36775.cjs.js');
+require('@braintree/sanitize-url');
+require('@react-aria/i18n');
+require('@keystar/ui/number-field');
+require('@keystar/ui/picker');
+require('@keystar/ui/combobox');
+require('@keystar/ui/text-field');
+require('@keystar/ui/checkbox');
+require('./form-from-preview-2042b9ef.cjs.js');
+require('lkb-core/admin-ui/context');
+require('lkb-core/fields/types/relationship/views');
+require('lkb-core/admin-ui/utils');
+require('@keystar/ui/dialog');
+require('@keystar/ui/field');
+require('@keystar/ui/list-view');
+require('@keystar/ui/slots');
+require('@keystar/ui/icon/icons/trashIcon');
+require('@react-aria/overlays');
+require('@react-aria/utils');
+require('@react-stately/overlays');
+require('@keystar/ui/overlays');
+require('@emotion/weak-memoize');
+require('./layouts-ba9a558b.cjs.js');
+
+const LayoutOptionsContext = /*#__PURE__*/React.createContext([]);
+const LayoutOptionsProvider = LayoutOptionsContext.Provider;
+
+// UI Components
+const LayoutContainer = ({
+  attributes,
+  children,
+  element
+}) => {
+  const editor = slateReact.useSlateStatic();
+  const layout$1 = element.layout;
+  const layoutOptions = React.useContext(LayoutOptionsContext);
+  const currentLayoutIndex = layoutOptions.findIndex(x => x.toString() === layout$1.toString());
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: toolbarState.blockElementSpacing,
+    ...attributes,
+    children: /*#__PURE__*/jsxRuntime.jsxs(toolbarState.BlockPopoverTrigger, {
+      element: element,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style.css({
+          columnGap: style.tokenSchema.size.space.regular,
+          display: 'grid'
+        }),
+        style: {
+          gridTemplateColumns: layout$1.map(x => `${x}fr`).join(' ')
+        },
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(toolbarState.BlockPopover, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(layout.Flex, {
+          padding: "regular",
+          gap: "regular",
+          children: [/*#__PURE__*/jsxRuntime.jsx(actionGroup.ActionGroup, {
+            selectionMode: "single",
+            prominence: "low",
+            density: "compact",
+            onAction: key => {
+              const path = slateReact.ReactEditor.findPath(editor, element);
+              const layoutOption = layoutOptions[key];
+              slate.Transforms.setNodes(editor, {
+                type: 'layout',
+                layout: layoutOption
+              }, {
+                at: path
+              });
+              slateReact.ReactEditor.focus(editor);
+            },
+            selectedKeys: currentLayoutIndex !== -1 ? [currentLayoutIndex.toString()] : [],
+            children: layoutOptions.map((layoutOption, i) => /*#__PURE__*/jsxRuntime.jsx(tag.Item, {
+              children: makeLayoutIcon(layoutOption)
+            }, i))
+          }), /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+              prominence: "low",
+              onPress: () => {
+                const path = slateReact.ReactEditor.findPath(editor, element);
+                slate.Transforms.removeNodes(editor, {
+                  at: path
+                });
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+                src: trash2Icon.trash2Icon
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+              tone: "critical",
+              children: "\u5220\u9664"
+            })]
+          })]
+        })
+      })]
+    })
+  });
+};
+const LayoutArea = ({
+  attributes,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: style.css({
+      borderColor: style.tokenSchema.color.border.neutral,
+      borderRadius: style.tokenSchema.size.radius.regular,
+      borderStyle: 'dashed',
+      borderWidth: style.tokenSchema.size.border.regular,
+      padding: style.tokenSchema.size.space.medium
+    }),
+    ...attributes,
+    children: children
+  });
+};
+function makeLayoutIcon(ratios) {
+  const size = 16;
+  const element = /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: "img",
+    className: style.css({
+      display: 'grid',
+      gridTemplateColumns: ratios.map(r => `${r}fr`).join(' '),
+      gap: 2,
+      width: size,
+      height: size
+    }),
+    children: ratios.map((_, i) => {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style.css({
+          backgroundColor: 'currentcolor',
+          borderRadius: 1
+        })
+      }, i);
+    })
+  });
+  return element;
+}
+const layoutsIcon = /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+  src: columnsIcon.columnsIcon
+});
+const LayoutsButton = ({
+  layouts
+}) => {
+  const {
+    editor: editor$1,
+    layouts: {
+      isSelected
+    }
+  } = toolbarState.useToolbarState();
+  return React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(editor.EditorToolbarButton, {
+      isSelected: isSelected,
+      onPress: () => {
+        if (utils.isElementActive(editor$1, 'layout')) {
+          slate.Transforms.unwrapNodes(editor$1, {
+            match: node => node.type === 'layout'
+          });
+        } else {
+          shared.insertLayout(editor$1, layouts[0]);
+        }
+        slateReact.ReactEditor.focus(editor$1);
+      },
+      children: layoutsIcon
+    }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+      children: "\u5E03\u5C40"
+    })]
+  }), [editor$1, isSelected, layouts]);
+};
+
+exports.LayoutArea = LayoutArea;
+exports.LayoutContainer = LayoutContainer;
+exports.LayoutOptionsProvider = LayoutOptionsProvider;
+exports.LayoutsButton = LayoutsButton;