@dxos/react-ui-editor 0.8.3-main.672df60 → 0.8.3-main.7f5a14c

package/src/stories/CommandMenu.stories.tsx

@@ -0,0 +1,143 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type EditorView } from '@codemirror/view';
+import { type StoryObj } from '@storybook/react';
+import React, { useCallback, useRef } from 'react';
+
+import { Obj, Query } from '@dxos/echo';
+import { faker } from '@dxos/random';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory, names } from './components';
+import {
+  coreSlashCommands,
+  filterItems,
+  RefPopover,
+  type CommandMenuGroup,
+  CommandMenu,
+  type CommandMenuItem,
+  insertAtCursor,
+  insertAtLineStart,
+  linkSlashCommands,
+} from '../components';
+import { useCommandMenu, type UseCommandMenuOptions } from '../extensions';
+import { str } from '../testing';
+
+const generator: ValueGenerator = faker as any;
+
+type Args = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
+
+const Story = ({ text, ...options }: Args) => {
+  const viewRef = useRef<EditorView>();
+  const { commandMenu, groupsRef, currentItem, onSelect, ...props } = useCommandMenu({ viewRef, ...options });
+
+  return (
+    <RefPopover modal={false} {...props}>
+      <EditorStory ref={viewRef} text={text} placeholder={''} extensions={commandMenu} />
+      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
+    </RefPopover>
+  );
+};
+
+const groups: CommandMenuGroup[] = [
+  coreSlashCommands,
+  linkSlashCommands,
+  {
+    id: 'custom',
+    label: 'Custom',
+    items: [
+      {
+        id: 'custom-1',
+        label: 'Log',
+        icon: 'ph--log--regular',
+        onSelect: console.log,
+      },
+    ],
+  },
+];
+
+const meta: Meta<Args> = {
+  title: 'ui/react-ui-editor/CommandMenu',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: (args) => <Story {...args} />,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Slash: StoryObj<Args> = {
+  args: {
+    trigger: '/',
+    getGroups: (query) =>
+      filterItems(groups, (item) =>
+        query ? (item.label as string).toLowerCase().includes(query.toLowerCase()) : true,
+      ),
+    text: str('# Slash', '', names.join(' '), ''),
+  },
+};
+
+export const Link: StoryObj<Args> = {
+  render: (args) => {
+    const { space } = useClientProvider();
+    const getGroups = useCallback(
+      async (trigger: string, query?: string): Promise<CommandMenuGroup[]> => {
+        if (trigger === '/') {
+          return filterItems(groups, (item) =>
+            query ? (item.label as string).toLowerCase().includes(query.toLowerCase()) : true,
+          );
+        }
+
+        if (!space) {
+          return [];
+        }
+
+        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : query?.toLowerCase() ?? '';
+        const result = await space?.db.query(Query.type(Testing.Contact)).run();
+        const items = result.objects
+          .filter((object) => object.name.toLowerCase().includes(name))
+          .map(
+            (object): CommandMenuItem => ({
+              id: object.id,
+              label: object.name,
+              icon: 'ph--user--regular',
+              onSelect: (view, head) => {
+                const link = `[${object.name}][${Obj.getDXN(object)}]`;
+                if (query?.startsWith('@')) {
+                  insertAtLineStart(view, head, `!${link}\n`);
+                } else {
+                  insertAtCursor(view, head, `${link} `);
+                }
+              },
+            }),
+          );
+        return [{ id: 'echo', items }];
+      },
+      [space],
+    );
+
+    return <Story {...args} getGroups={getGroups} />;
+  },
+  args: {
+    trigger: ['/', '@'],
+    text: str('# Link', '', names.join(' '), ''),
+  },
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      onInitialized: async (client) => {
+        client.addTypes([Testing.Contact]);
+      },
+      onSpaceCreated: async ({ space }) => {
+        const createObjects = createObjectFactory(space.db, generator);
+        await createObjects([{ type: Testing.Contact, count: 10 }]);
+        await space.db.flush({ indexes: true });
+      },
+    }),
+  ],
+};

package/src/stories/Preview.stories.tsx

@@ -7,12 +7,13 @@ import '@dxos-theme';
 import React, { useState, useEffect, type FC } from 'react';
 
 import { faker } from '@dxos/random';
-import { IconButton, Popover } from '@dxos/react-ui';
-import { hoverableHidden } from '@dxos/react-ui-theme';
+import { Popover } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-stack';
+import { hoverableControlItem, hoverableControlItemTransition, hoverableControls } from '@dxos/react-ui-theme';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
 import { EditorStory } from './components';
-import { RefPopover, useRefPopover } from '../components';
+import { PreviewProvider, useRefPopover } from '../components';
 import {
   preview,
   image,
@@ -49,10 +50,12 @@ const PreviewCard = () => {
   const { target } = useRefPopover('PreviewCard');
   return (
     <Popover.Portal>
-      <Popover.Content classNames='popover-card-width p-2' onOpenAutoFocus={(event) => event.preventDefault()}>
+      <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <h2 className='grow truncate'>{target?.label}</h2>
-          {target && <div className='line-clamp-3'>{target.text}</div>}
+          <Card.Container role='popover'>
+            <Card.Heading>{target?.label}</Card.Heading>
+            {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
+          </Card.Container>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -64,45 +67,44 @@ const PreviewCard = () => {
 const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLookup }) => {
   const target = useRefTarget(link, onLookup);
   return (
-    <div className='group flex flex-col gap-2'>
-      <div className='flex items-center gap-4'>
-        <div className='grow truncate'>
-          {/* <span className='text-xs text-subdued mie-2'>Prompt</span> */}
-          {link.label}
-        </div>
+    <Card.Content classNames={hoverableControls}>
+      <div className='flex items-start'>
         {!readonly && (
-          <div className='flex gap-1'>
+          <Card.Toolbar classNames='is-min p-[--dx-card-spacing-inline]'>
             {(link.suggest && (
               <>
+                <Card.ToolbarIconButton
+                  label='Discard'
+                  icon={'ph--x--regular'}
+                  onClick={() => onAction({ type: 'delete', link })}
+                />
                 {target && (
-                  <IconButton
-                    classNames='text-green-500'
+                  <Card.ToolbarIconButton
+                    classNames='bg-successSurface text-successSurfaceText'
                     label='Apply'
-                    icon={'ph--check--regular'}
+                    icon='ph--check--regular'
                     onClick={() => onAction({ type: 'insert', link, target })}
                   />
                 )}
-                <IconButton
-                  classNames='text-red-500'
-                  label='Cancel'
-                  icon={'ph--x--regular'}
-                  onClick={() => onAction({ type: 'delete', link })}
-                />
               </>
             )) || (
-              <IconButton
+              <Card.ToolbarIconButton
                 iconOnly
                 label='Delete'
-                icon={'ph--x--regular'}
-                classNames={hoverableHidden}
+                icon='ph--x--regular'
+                classNames={[hoverableControlItem, hoverableControlItemTransition]}
                 onClick={() => onAction({ type: 'delete', link })}
               />
             )}
-          </div>
+          </Card.Toolbar>
         )}
+        <Card.Heading classNames='grow order-first mie-0'>
+          {/* <span className='text-xs text-subdued mie-2'>Prompt</span> */}
+          {link.label}
+        </Card.Heading>
       </div>
-      {target && <div className='line-clamp-3'>{target.text}</div>}
-    </div>
+      {target && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
+    </Card.Content>
   );
 };
 
@@ -117,7 +119,7 @@ export default meta;
 
 export const Default = {
   render: () => (
-    <RefPopover.Provider onLookup={handlePreviewLookup}>
+    <PreviewProvider onLookup={handlePreviewLookup}>
       <EditorStory
         text={str(
           '# Preview',
@@ -144,6 +146,6 @@ export const Default = {
         ]}
       />
       <PreviewCard />
-    </RefPopover.Provider>
+    </PreviewProvider>
   ),
 };