@dxos/plugin-space 0.8.4-main.70d3990 → 0.8.4-main.74a063c4e0

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,76 +2,66 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Option from 'effect/Option';
 import type * as Schema from 'effect/Schema';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { type AnyProperties, type TypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { type Database, Obj } from '@dxos/echo';
+import { type Collection } from '@dxos/echo';
+import { type AnyProperties } from '@dxos/echo/internal';
 import { type Space, type SpaceId } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
-import { type Collection, ViewAnnotation } from '@dxos/schema';
-import { type MaybePromise, isNonNullable } from '@dxos/util';
-
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { type CreateObjectIntent } from '../../types';
+import { toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
+import { Form, omitId } from '@dxos/react-ui-form';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
+import { type MaybePromise } from '@dxos/util';
+
+import { useInputSurfaceLookup } from '#hooks';
+import { meta } from '#meta';
+import { type CreateObject } from '#types';
+
 import { getSpaceDisplayName } from '../../util';
 
+/** Display-ready option for the create object search list. */
+export type CreateObjectOption = {
+  id: string;
+  label: string;
+  icon?: string;
+};
+
 export type Metadata = {
-  createObjectIntent: CreateObjectIntent;
+  createObject: CreateObject;
   inputSchema?: Schema.Schema.AnyNoContext;
-  addToCollectionOnCreate?: boolean;
   icon?: string;
 };
 
 export type CreateObjectPanelProps = {
-  schemas: Schema.Schema.AnyNoContext[];
+  options: CreateObjectOption[];
   spaces: Space[];
   typename?: string;
-  target?: Space | Collection.Collection;
-  views?: boolean;
+  target?: Database.Database | Collection.Collection;
   initialFormValues?: Partial<AnyProperties>;
   defaultSpaceId?: SpaceId;
   resolve?: (typename: string) => Metadata | undefined;
-  onTargetChange?: (target: Space) => void;
+  onTargetChange?: (target: Database.Database) => void;
   onTypenameChange?: (typename: string) => void;
   onCreateObject?: (params: { metadata: Metadata; data?: Record<string, any> }) => MaybePromise<void>;
 };
 
 export const CreateObjectPanel = ({
-  schemas,
+  options,
   spaces,
   typename,
   target,
-  views,
-  initialFormValues: _initialFormValues,
+  initialFormValues: initialFormValuesProp,
   defaultSpaceId,
   resolve,
   onTargetChange,
   onTypenameChange,
   onCreateObject,
 }: CreateObjectPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
+  const initialFormValues = useDefaultValue(initialFormValuesProp, () => ({}));
   const metadata = typename && resolve?.(typename);
-  const options: TypeAnnotation[] = schemas
-    .filter((schema) => {
-      if (views == null) {
-        return true;
-      } else {
-        return views === ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false));
-      }
-    })
-    .map((schema) => getTypeAnnotation(schema))
-    .filter(isNonNullable)
-    .sort((a, b) => {
-      const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
-      const nameB = t('typename label', { ns: b.typename, defaultValue: b.typename });
-      return nameA.localeCompare(nameB);
-    });
+
+  const sortedOptions = useMemo(() => [...options].sort((a, b) => a.label.localeCompare(b.label)), [options]);
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
@@ -83,109 +73,154 @@ export const CreateObjectPanel = ({
     [onCreateObject, metadata],
   );
 
-  const handleSetTypename = useCallback(
-    async (typename: string) => {
-      const metadata = resolve?.(typename);
+  const handleSelectOption = useCallback(
+    async (id: string) => {
+      const metadata = resolve?.(id);
       if (metadata && !metadata.inputSchema) {
         await onCreateObject?.({ metadata });
       } else {
-        onTypenameChange?.(typename);
+        onTypenameChange?.(id);
       }
     },
     [resolve, onCreateObject],
   );
 
+  const inputSchema = useMemo(
+    () => (metadata && typeof metadata === 'object' && metadata.inputSchema ? omitId(metadata.inputSchema) : undefined),
+    [metadata],
+  );
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
   // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  return !metadata ? (
-    <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
-  ) : !target ? (
-    <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
-  ) : metadata.inputSchema ? (
-    <div role='none' className={cardDialogOverflow}>
-      <Form
+  if (!metadata) {
+    return <SelectType options={sortedOptions} onChange={handleSelectOption} />;
+  }
+
+  // TODO(burdon): Remove.
+  if (!target) {
+    return <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />;
+  }
+
+  if (metadata.inputSchema) {
+    return (
+      <Form.Root
         autoFocus
-        values={initialFormValues}
-        schema={metadata.inputSchema}
-        testId='create-object-form'
+        schema={inputSchema}
+        defaultValues={initialFormValues}
+        fieldProvider={inputSurfaceLookup}
+        db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
         onSave={handleCreateObject}
-        lookupComponent={inputSurfaceLookup}
-        outerSpacing='blockStart-0'
-      />
-    </div>
-  ) : null;
+        testId='create-object-form'
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    );
+  }
+
+  return null;
 };
 
-const SelectSpace = ({
-  spaces,
-  defaultSpaceId,
-  onChange,
-}: { onChange?: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+CreateObjectPanel.displayName = 'CreateObjectPanel';
+
+type SelectTypeProps = Pick<CreateObjectPanelProps, 'options'> & {
+  onChange: (id: string) => void;
+};
+
+const SelectType = ({ options, onChange }: SelectTypeProps) => {
   const { t } = useTranslation(meta.id);
 
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) => option.label,
+  });
+
   return (
-    <SearchList.Root label={t('space input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.space-input'
-        placeholder={t('space input placeholder')}
-      />
-      <SearchList.Content classNames={[cardDialogOverflow, 'plb-cardSpacingBlock']}>
-        {spaces
-          .sort((a, b) => {
-            const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
-            const bName = toLocalizedString(getSpaceDisplayName(b, { personal: b.id === defaultSpaceId }), t);
-            return aName.localeCompare(bName);
-          })
-          .map((space) => (
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Content classNames='gap-form-gap'>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.schema-input'
+          placeholder={t('schema-input.placeholder')}
+        />
+        <SearchList.Viewport>
+          {results.map((option) => (
             <SearchList.Item
-              key={space.id}
-              value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              onSelect={() => onChange?.(space)}
-              classNames='flex items-center gap-2'
-            >
-              <span className='grow truncate'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              </span>
-            </SearchList.Item>
+              key={option.id}
+              value={option.id}
+              label={option.label}
+              icon={option.icon ?? 'ph--placeholder--regular'}
+              onSelect={() => onChange(option.id)}
+            />
           ))}
+        </SearchList.Viewport>
       </SearchList.Content>
     </SearchList.Root>
   );
 };
 
-const SelectSchema = ({
-  options,
-  resolve,
-  onChange,
-}: {
-  options: TypeAnnotation[];
-  onChange: (type: string) => void;
-} & Pick<CreateObjectPanelProps, 'resolve'>) => {
+type SelectSpaceProps = Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'> & {
+  onChange?: (db: Database.Database) => void;
+};
+
+const SelectSpace = ({ spaces, defaultSpaceId, onChange }: SelectSpaceProps) => {
   const { t } = useTranslation(meta.id);
 
+  const sortedSpaces = useMemo(
+    () =>
+      [...spaces].sort((a, b) => {
+        const labelA = toLocalizedString(
+          getSpaceDisplayName(a, {
+            personal: a.id === defaultSpaceId,
+          }),
+          t,
+        );
+        const labelB = toLocalizedString(
+          getSpaceDisplayName(b, {
+            personal: b.id === defaultSpaceId,
+          }),
+          t,
+        );
+        return labelA.localeCompare(labelB);
+      }),
+    [spaces, defaultSpaceId, t],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedSpaces,
+    extract: (space) =>
+      toLocalizedString(
+        getSpaceDisplayName(space, {
+          personal: space.id === defaultSpaceId,
+        }),
+        t,
+      ),
+  });
+
   return (
-    <SearchList.Root label={t('schema input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.schema-input'
-        placeholder={t('schema input placeholder')}
-      />
-      <SearchList.Content classNames={cardDialogPaddedOverflow}>
-        {options.map((option) => (
-          <SearchList.Item
-            key={option.typename}
-            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            onSelect={() => onChange(option.typename)}
-            classNames='flex items-center gap-2'
-          >
-            <span className='flex gap-2 items-center grow truncate'>
-              <Icon icon={resolve?.(option.typename)?.icon ?? 'ph--placeholder--regular'} size={5} />
-              {t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            </span>
-          </SearchList.Item>
-        ))}
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Content>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.space-input'
+          placeholder={t('space-input.placeholder')}
+        />
+        <SearchList.Viewport>
+          {results.map((space) => {
+            return (
+              <SearchList.Item
+                key={space.id}
+                value={space.id}
+                label={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+                onSelect={() => onChange?.(space.db)}
+              />
+            );
+          })}
+        </SearchList.Viewport>
       </SearchList.Content>
     </SearchList.Root>
   );

package/src/components/CreateDialog/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './CreateObjectDialog';
-export * from './CreateSpaceDialog';
+export * from './CreateObjectPanel';

package/src/components/{ObjectSettings → ObjectDetails}/BaseObjectSettings.stories.tsx

@@ -6,43 +6,48 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
 import { type Obj, Tag } from '@dxos/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { render } from '@dxos/storybook-utils';
-import { Project } from '@dxos/types';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Panel } from '@dxos/react-ui';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Pipeline } from '@dxos/types';
 
 import { translations } from '../../translations';
-
 import { BaseObjectSettings } from './BaseObjectSettings';
 
 const DefaultStory = () => {
-  const { space } = useClientProvider();
-  const [object, setObject] = useState<Obj.Any>();
-
+  const { space } = useClientStory();
+  const [object, setObject] = useState<Obj.Unknown>();
   useEffect(() => {
     if (space && !object) {
-      const object = space.db.add(Project.make());
-      setObject(object as Obj.Any);
+      const object = space.db.add(Pipeline.make());
+      setObject(object);
     }
   }, [space, object]);
 
   if (!object) {
-    return null;
+    return <Loading />;
   }
 
-  return <BaseObjectSettings object={object} classNames='is-[20rem]' />;
+  return (
+    <Panel.Root>
+      <Panel.Content asChild>
+        <BaseObjectSettings object={object} />
+      </Panel.Content>
+    </Panel.Root>
+  );
 };
 
 const meta = {
-  title: 'plugins/plugin-space/BaseObjectSettings',
+  title: 'plugins/plugin-space/components/BaseObjectSettings',
   component: BaseObjectSettings as any,
-  render: render(DefaultStory),
+  render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [Project.Project, Tag.Tag],
+      types: [Pipeline.Pipeline, Tag.Tag],
       onCreateSpace: async ({ space }) => {
         space.db.add(Tag.make({ label: 'Tag 1' }));
         space.db.add(Tag.make({ label: 'Tag 2' }));
@@ -51,7 +56,7 @@ const meta = {
     }),
   ],
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;

package/src/components/ObjectDetails/BaseObjectSettings.tsx

@@ -0,0 +1,138 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+
+import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { meta as pluginMeta } from '#meta';
+
+export type BaseObjectSettingsProps = PropsWithChildren<{
+  object: Obj.Unknown;
+}>;
+
+// TODO(wittjosiah): Reconcile w/ ObjectForm.
+export const BaseObjectSettings = composable<HTMLDivElement, BaseObjectSettingsProps>(
+  ({ children, object, ...props }, forwardedRef) => {
+    const db = Obj.getDatabase(object);
+
+    const formSchema = useMemo(() => {
+      return Function.pipe(
+        Obj.getSchema(object),
+        Option.fromNullable,
+        Option.map((schema) => omitId(BaseSchema.pipe(Schema.extend(schema)))),
+        Option.getOrUndefined,
+      );
+    }, [object]);
+
+    const meta = Obj.getMeta(object);
+    const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
+    const values = useMemo(
+      () => ({
+        tags,
+        ...object,
+      }),
+      [object, tags],
+    );
+
+    const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
+      invariant(db);
+      invariant(Type.isObjectSchema(schema));
+      const newObject = db.add(Obj.make(schema, values));
+      if (Obj.instanceOf(Tag.Tag, newObject)) {
+        Obj.change(object, (obj) => {
+          Obj.getMeta(obj).tags = [...(Obj.getMeta(obj).tags ?? []), Obj.getDXN(newObject).toString()];
+        });
+      }
+    }, []);
+
+    // TODO(wittjosiah): Use FormRootProps type.
+    const handleChange = useCallback(
+      (
+        { tags, ...values }: Schema.Schema.Type<typeof formSchema>,
+        { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> },
+      ) => {
+        if (!isValid) {
+          return;
+        }
+
+        const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+
+        // Handle tags separately using Obj.change.
+        const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
+        if (hasTagsChange) {
+          Obj.change(object, (obj) => {
+            Obj.getMeta(obj).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+          });
+        }
+
+        // Handle other property changes.
+        const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
+        if (nonTagPaths.length > 0) {
+          Obj.change(object, () => {
+            for (const path of nonTagPaths) {
+              const parts = splitJsonPath(path);
+              const value = Obj.getValue(values as any, parts);
+              Obj.setValue(object, parts, value);
+            }
+          });
+        }
+      },
+      [object],
+    );
+
+    if (!formSchema) {
+      return null;
+    }
+
+    return (
+      <Form.Root
+        schema={formSchema}
+        defaultValues={values as any}
+        createTypename={Type.getTypename(Tag.Tag)}
+        createOptionIcon='ph--plus--regular'
+        createOptionLabel={['add-tag.label', { ns: pluginMeta.id }]}
+        createInitialValuePath='label'
+        createFieldMap={createFieldMap}
+        db={db}
+        onValuesChanged={handleChange}
+        onCreate={handleCreate}
+      >
+        <Form.Viewport {...composableProps(props)}>
+          <Form.Content>
+            <Form.FieldSet />
+            {children}
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    );
+  },
+);
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
+
+// TODO(wittjosiah): Would be nice to control order when extending so this isn't always first/last.
+const BaseSchema = Schema.Struct({
+  tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
+});

package/src/components/{ObjectSettings → ObjectDetails}/ForeignKeys.tsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import { type Key } from '@dxos/echo';
 import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type ForeignKeysProps = {
   keys: Key.ForeignKey[];
@@ -38,13 +38,19 @@ const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
   }, [forignKey, onDelete]);
 
   return (
-    <ListItem.Root classNames='pli-2'>
+    <ListItem.Root classNames='px-2'>
       <ListItem.Heading classNames='flex flex-col grow truncate'>
         <div>{forignKey.source}</div>
         <div className='text-description text-sm truncate'>{forignKey.id}</div>
       </ListItem.Heading>
       <ListItem.Endcap>
-        <IconButton iconOnly icon='ph--x--regular' variant='ghost' label={t('delete key')} onClick={handleDelete} />
+        <IconButton
+          iconOnly
+          icon='ph--x--regular'
+          variant='ghost'
+          label={t('delete-key.button')}
+          onClick={handleDelete}
+        />
       </ListItem.Endcap>
     </ListItem.Root>
   );

package/src/components/ObjectDetails/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './BaseObjectSettings';
+export * from './ForeignKeys';