@dxos/plugin-stack 0.6.8-main.046e6cf

package/src/components/StackMain.tsx

@@ -0,0 +1,216 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plus } from '@phosphor-icons/react';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import {
+  LayoutAction,
+  NavigationAction,
+  parseMetadataResolverPlugin,
+  Surface,
+  useIntentDispatcher,
+  useResolvePlugin,
+} from '@dxos/app-framework';
+import { create, getType, isReactiveObject } from '@dxos/echo-schema';
+import { useGraph } from '@dxos/plugin-graph';
+import { SpaceAction } from '@dxos/plugin-space';
+import { type CollectionType } from '@dxos/plugin-space/types';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type MosaicDataItem, type MosaicDropEvent, type MosaicMoveEvent, Path } from '@dxos/react-ui-mosaic';
+import {
+  type AddSectionPosition,
+  type CollapsedSections,
+  Stack,
+  type StackProps,
+  type StackSectionItem,
+} from '@dxos/react-ui-stack';
+import { nonNullable } from '@dxos/util';
+
+import { AddSection } from './AddSection';
+import { SECTION_IDENTIFIER, STACK_PLUGIN } from '../meta';
+import { StackViewType } from '../types';
+
+const SectionContent: StackProps['SectionContent'] = ({ data }) => {
+  // TODO(wittjosiah): Better section placeholder.
+  return <Surface role='section' data={{ object: data }} limit={1} placeholder={<></>} />;
+};
+
+type StackMainProps = {
+  collection: CollectionType;
+  separation?: boolean;
+};
+
+const StackMain = ({ collection, separation }: StackMainProps) => {
+  const dispatch = useIntentDispatcher();
+  const { graph } = useGraph();
+  const { t } = useTranslation(STACK_PLUGIN);
+  const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);
+  const defaultStack = useMemo(() => create(StackViewType, { sections: {} }), [collection]);
+  const stack = (collection.views[StackViewType.typename] as StackViewType) ?? defaultStack;
+  const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
+
+  useEffect(() => {
+    if (!collection.views[StackViewType.typename]) {
+      collection.views[StackViewType.typename] = stack;
+    }
+  }, [collection, stack]);
+
+  const id = `stack-${collection.id}`;
+  const items =
+    collection.objects
+      // TODO(wittjosiah): Should the database handle this differently?
+      // TODO(wittjosiah): Render placeholders for missing objects so they can be removed from the stack?
+      .filter(nonNullable)
+      .map((object) => {
+        const metadata = metadataPlugin?.provides.metadata.resolver(
+          getType(object)?.objectId ?? 'never',
+        ) as StackSectionItem['metadata'];
+        const view = {
+          ...stack.sections[object.id],
+          collapsed: collapsedSections[fullyQualifiedId(object)],
+          title:
+            (object as any)?.title ?? toLocalizedString(graph.findNode(fullyQualifiedId(object))?.properties.label, t),
+        } as StackSectionItem['view'];
+        return { id: fullyQualifiedId(object), object, metadata, view };
+      }) ?? [];
+
+  const handleOver = ({ active, over }: MosaicMoveEvent<number>) => {
+    // TODO(thure): Eventually Stack should handle foreign draggables.
+    if (active.type !== SECTION_IDENTIFIER) {
+      return 'reject';
+    }
+    if (Path.parent(active.path) === Path.parent(over.path)) {
+      return 'rearrange';
+    }
+
+    const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;
+    const data = parseData ? parseData(active.item, 'object') : active.item;
+
+    // TODO(wittjosiah): Prevent dropping items which don't have a section renderer?
+    //  Perhaps stack plugin should just provide a fallback section renderer.
+    if (!isReactiveObject(data)) {
+      return 'reject';
+    }
+
+    const exists = items.findIndex(({ id }) => id === active.item.id) >= 0;
+    if (!exists) {
+      return 'transfer';
+    } else {
+      return 'reject';
+    }
+  };
+
+  const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
+    if (
+      (active.path === Path.create(id, active.item.id) || active.path === id) &&
+      (operation !== 'copy' || over.path === Path.create(id, over.item.id) || over.path === id)
+    ) {
+      collection.objects.splice(active.position!, 1);
+      delete stack.sections[active.item.id];
+    }
+
+    const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;
+    const object = parseData?.(active.item, 'object');
+    if (object && over.path === Path.create(id, over.item.id)) {
+      collection.objects.splice(over.position!, 0, object);
+    } else if (object && over.path === id) {
+      collection.objects.push(object);
+    }
+
+    if (!stack.sections[object.id]) {
+      stack.sections[object.id] = {};
+    }
+  };
+
+  const handleDelete = async (path: string) => {
+    const index = collection.objects
+      .filter(nonNullable)
+      .findIndex((section) => fullyQualifiedId(section) === Path.last(path));
+    if (index >= 0) {
+      await dispatch({
+        action: SpaceAction.REMOVE_OBJECT,
+        data: { object: collection.objects[index], collection },
+      });
+
+      // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
+      // delete stack.sections[Path.last(path)];
+    }
+  };
+
+  // TODO(wittjosiah): Factor out.
+
+  const handleNavigate = async (object: MosaicDataItem) => {
+    const toId = fullyQualifiedId(object);
+    await dispatch([
+      {
+        action: NavigationAction.OPEN,
+        data: { activeParts: { main: [toId] } },
+      },
+      { action: LayoutAction.SCROLL_INTO_VIEW, data: { id: toId } },
+    ]);
+  };
+
+  const handleAddSection = (path: string, position: AddSectionPosition) => {
+    void dispatch?.({
+      action: LayoutAction.SET_LAYOUT,
+      data: {
+        element: 'dialog',
+        component: `${STACK_PLUGIN}/AddSectionDialog`,
+        subject: { path, position, collection },
+      },
+    });
+  };
+
+  const handleCollapseSection = (id: string, collapsed: boolean) => {
+    setCollapsedSections((prev) => ({ ...prev, [id]: collapsed }));
+  };
+
+  return (
+    <>
+      <Stack
+        id={id}
+        data-testid='main.stack'
+        SectionContent={SectionContent}
+        type={SECTION_IDENTIFIER}
+        items={items}
+        separation={separation}
+        emptyComponent={<span data-testid='stack.empty'></span>}
+        onDrop={handleDrop}
+        onOver={handleOver}
+        onDeleteSection={handleDelete}
+        onNavigateToSection={handleNavigate}
+        onAddSection={handleAddSection}
+        onCollapseSection={handleCollapseSection}
+      />
+
+      {items.length === 0 ? (
+        <AddSection collection={collection} />
+      ) : (
+        <div role='none' className='flex mlb-2 pli-2 justify-center'>
+          <Button
+            data-testid='stack.createSection'
+            classNames='gap-2'
+            onClick={() =>
+              dispatch?.({
+                action: LayoutAction.SET_LAYOUT,
+                data: {
+                  element: 'dialog',
+                  component: 'dxos.org/plugin/stack/AddSectionDialog',
+                  subject: { position: 'afterAll', collection },
+                },
+              })
+            }
+          >
+            <Plus />
+            <span className='sr-only'>{t('add section label')}</span>
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default StackMain;

package/src/components/StackSettings.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { SettingsValue } from '@dxos/plugin-settings';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { STACK_PLUGIN } from '../meta';
+import { type StackSettingsProps } from '../types';
+
+export const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {
+  const { t } = useTranslation(STACK_PLUGIN);
+
+  return (
+    <>
+      <SettingsValue label={t('settings separation label')}>
+        <Input.Switch checked={settings.separation} onCheckedChange={(checked) => (settings.separation = !!checked)} />
+      </SettingsValue>
+    </>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+// Lazily load components for content surfaces.
+export const StackMain = React.lazy(() => import('./StackMain'));
+
+export * from './StackSettings';
+export * from './AddSectionDialog';

package/src/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StackPlugin } from './StackPlugin';
+
+export default StackPlugin;
+
+export * from './types';
+
+export * from './StackPlugin';

package/src/meta.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps, StackSimple } from '@phosphor-icons/react';
+import React from 'react';
+
+export const STACK_PLUGIN = 'dxos.org/plugin/stack';
+export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
+
+export default {
+  id: STACK_PLUGIN,
+  // TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
+  name: 'Collections',
+  iconComponent: (props: IconProps) => <StackSimple {...props} />,
+  iconSymbol: 'ph--stack-simple--regular',
+};

package/src/translations.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { translations as stackTranslations } from '@dxos/react-ui-stack';
+
+import { STACK_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [STACK_PLUGIN]: {
+        'plugin name': 'Stacks',
+        'settings separation label': 'Separate sections',
+        'add section beforeAll dialog title': 'Add a section to the start',
+        'add section afterAll dialog title': 'Add a section to the end',
+        'add section before dialog title': 'Add a section',
+        'add section after dialog title': 'Add a section',
+        'add section input placeholder': 'Find the type of section to add',
+        'upload file label': 'Add file',
+        'add section label': 'Add section',
+      },
+    },
+  },
+  ...stackTranslations,
+];

package/src/types/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './stack';
+export * from './types';

package/src/types/stack.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { S, TypedObject } from '@dxos/echo-schema';
+
+// All section metadata needs to be optional/have defaults.
+// Any objects added to the collection will start with the section defaults.
+// If an object is removed from the collection without removing the section metadata this is fine.
+// Stack component should cleanup the superfluous data on future edits.
+
+export const SectionSchema = S.Struct({
+  height: S.optional(S.Number),
+  // Space for data that isn't stack-specific but is specific to this view instance.
+  //  e.g. cover/fill for an image
+  custom: S.optional(S.Record(S.String, S.Any)),
+});
+
+export class StackViewType extends TypedObject({ typename: 'dxos.org/type/StackView', version: '0.1.0' })({
+  sections: S.mutable(S.Record(S.String, SectionSchema)),
+}) {}

package/src/types/types.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps } from '@phosphor-icons/react';
+import { type FC } from 'react';
+
+import type {
+  Intent,
+  MetadataRecordsProvides,
+  SettingsProvides,
+  SurfaceProvides,
+  TranslationsProvides,
+} from '@dxos/app-framework';
+import { type SchemaProvides } from '@dxos/plugin-client';
+
+// TODO(wittjosiah): Creators/choosers likely aren't stack-specific.
+//   Also distinct from graph actions though, output should be inserted into current view rather than navigated to.
+type StackSectionAction = {
+  id: string;
+  testId: string;
+  type: string | [string, { ns: string }];
+  label: string | [string, { ns: string }];
+  icon: FC<IconProps>;
+};
+
+export type StackSectionCreator = StackSectionAction & {
+  intent: Intent | Intent[];
+};
+
+export type StackProvides = {
+  stack: {
+    creators?: StackSectionCreator[];
+  };
+};
+
+export type StackState = {
+  creators: StackSectionCreator[];
+};
+
+export type StackSettingsProps = { separation: boolean };
+
+export type StackPluginProvides = SurfaceProvides &
+  MetadataRecordsProvides &
+  SettingsProvides<StackSettingsProps> &
+  TranslationsProvides &
+  SchemaProvides & { stack: StackState };