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

package/dist/types/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/types/src/types/stack.d.ts

@@ -0,0 +1,26 @@
+import { S } from '@dxos/echo-schema';
+export declare const SectionSchema: S.Struct<{
+    height: S.optional<typeof S.Number>;
+    custom: S.optional<S.Record$<typeof S.String, typeof S.Any>>;
+}>;
+declare const StackViewType_base: import("@dxos/echo-schema").AbstractTypedObject<{
+    sections: {
+        [x: string]: {
+            readonly height?: number | undefined;
+            readonly custom?: {
+                readonly [x: string]: any;
+            } | undefined;
+        };
+    };
+} & {
+    id: string;
+}, S.Struct.Encoded<{
+    sections: S.mutable<S.Record$<typeof S.String, S.Struct<{
+        height: S.optional<typeof S.Number>;
+        custom: S.optional<S.Record$<typeof S.String, typeof S.Any>>;
+    }>>>;
+}>>;
+export declare class StackViewType extends StackViewType_base {
+}
+export {};
+//# sourceMappingURL=stack.d.ts.map

package/dist/types/src/types/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/types/stack.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAOnD,eAAO,MAAM,aAAa;;;EAKxB,CAAC;;;;;;;;;;;;;;;;;;AAEH,qBAAa,aAAc,SAAQ,kBAEjC;CAAG"}

package/dist/types/src/types/types.d.ts

@@ -0,0 +1,34 @@
+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';
+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;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/src/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EACV,MAAM,EACN,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAI1D,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE;QACL,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAC/C,uBAAuB,GACvB,gBAAgB,CAAC,kBAAkB,CAAC,GACpC,oBAAoB,GACpB,cAAc,GAAG;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,CAAC"}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@dxos/plugin-stack",
+  "version": "0.6.8-main.046e6cf",
+  "description": "DXOS Surface plugin for Stack entities",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/index.cjs"
+      },
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./meta": {
+      "browser": "./dist/lib/browser/meta.mjs",
+      "node": {
+        "default": "./dist/lib/node/meta.cjs"
+      },
+      "types": "./dist/types/src/meta.d.ts"
+    },
+    "./types": {
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/types/index.cjs"
+      },
+      "types": "./dist/types/src/types/index.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "dist/types/src/meta.d.ts"
+      ],
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@fluentui/react-tabster": "^9.19.0",
+    "@preact/signals-core": "^1.6.0",
+    "node-fetch": "^2.6.0",
+    "react-is": "~18.2.0",
+    "@dxos/app-framework": "0.6.8-main.046e6cf",
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/local-storage": "0.6.8-main.046e6cf",
+    "@dxos/invariant": "0.6.8-main.046e6cf",
+    "@dxos/plugin-client": "0.6.8-main.046e6cf",
+    "@dxos/plugin-graph": "0.6.8-main.046e6cf",
+    "@dxos/plugin-settings": "0.6.8-main.046e6cf",
+    "@dxos/plugin-space": "0.6.8-main.046e6cf",
+    "@dxos/react-client": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-mosaic": "0.6.8-main.046e6cf",
+    "@dxos/plugin-ipfs": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-searchlist": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-stack": "0.6.8-main.046e6cf",
+    "@dxos/util": "0.6.8-main.046e6cf"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "^5.3.4",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf"
+  },
+  "optionalDependencies": {
+    "@babel/core": "^7.18.13",
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/StackPlugin.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StackSimple, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { type Plugin, type PluginDefinition } from '@dxos/app-framework';
+import { create } from '@dxos/echo-schema';
+import { type EchoReactiveObject } from '@dxos/echo-schema';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { CollectionType } from '@dxos/plugin-space/types';
+import { Main } from '@dxos/react-ui';
+import { baseSurface, topbarBlockPaddingStart, bottombarBlockPaddingEnd } from '@dxos/react-ui-theme';
+
+import { StackMain, StackSettings, AddSectionDialog, dataHasAddSectionDialogProps } from './components';
+import meta, { SECTION_IDENTIFIER, STACK_PLUGIN } from './meta';
+import translations from './translations';
+import { StackViewType } from './types';
+import { type StackPluginProvides, type StackProvides, type StackState, type StackSettingsProps } from './types';
+
+export const StackPlugin = (): PluginDefinition<StackPluginProvides> => {
+  const settings = new LocalStorageStore<StackSettingsProps>(STACK_PLUGIN, { separation: true });
+  const stackState = create<StackState>({ creators: [] });
+
+  return {
+    meta,
+    ready: async (plugins) => {
+      settings.prop({ key: 'separation', type: LocalStorageStore.bool() });
+
+      for (const plugin of plugins) {
+        if (plugin.meta.id === STACK_PLUGIN) {
+          continue;
+        }
+
+        if (Array.isArray((plugin as Plugin<StackProvides>).provides?.stack?.creators)) {
+          stackState.creators.push(...((plugin as Plugin<StackProvides>).provides.stack.creators ?? []));
+        }
+      }
+    },
+    provides: {
+      settings: settings.values,
+      metadata: {
+        records: {
+          [StackViewType.typename]: {
+            placeholder: ['stack title placeholder', { ns: STACK_PLUGIN }],
+            icon: (props: IconProps) => <StackSimple {...props} />,
+            iconSymbol: 'ph--stack-simple--regular',
+          },
+          [SECTION_IDENTIFIER]: {
+            parse: (section: { object: EchoReactiveObject<any> }, type: string) => {
+              switch (type) {
+                case 'node':
+                  // TODO(wittjosiah): Remove cast.
+                  return { id: section.object.id, label: section.object.title, data: section.object };
+                case 'object':
+                  return section.object;
+                case 'view-object':
+                  return section;
+              }
+            },
+          },
+        },
+      },
+      translations,
+      echo: {
+        schema: [StackViewType],
+      },
+      surface: {
+        component: ({ data, role }) => {
+          switch (data.component) {
+            case `${STACK_PLUGIN}/AddSectionDialog`:
+              return dataHasAddSectionDialogProps(data) ? <AddSectionDialog {...data.subject} /> : null;
+          }
+
+          const primary = data.active ?? data.object;
+          switch (role) {
+            case 'main':
+              return primary instanceof CollectionType ? (
+                <Main.Content bounce classNames={[baseSurface, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>
+                  <StackMain collection={primary} separation={settings.values.separation} />
+                </Main.Content>
+              ) : null;
+            case 'article':
+              return primary instanceof CollectionType ? (
+                <div role='none' className='row-span-2 overflow-auto'>
+                  <StackMain collection={primary} separation={settings.values.separation} />
+                </div>
+              ) : null;
+            case 'settings': {
+              return data.plugin === meta.id ? <StackSettings settings={settings.values} /> : null;
+            }
+            default:
+              return null;
+          }
+        },
+      },
+      stack: stackState,
+    },
+  };
+};

package/src/components/AddSection.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { type IconProps } from '@phosphor-icons/react';
+import React, { type FC, type KeyboardEvent, type MouseEvent, useCallback } from 'react';
+
+import { usePlugin, useIntentDispatcher } from '@dxos/app-framework';
+import { type CollectionType } from '@dxos/plugin-space/types';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { STACK_PLUGIN } from '../meta';
+import { StackViewType, type StackSectionCreator, type StackPluginProvides } from '../types';
+
+const CreatorTile = ({
+  Icon,
+  label,
+  testId,
+  handleAdd,
+}: {
+  Icon: FC<IconProps>;
+  testId: string;
+  label: string;
+  handleAdd: () => void;
+}) => {
+  const onClick = useCallback((_: MouseEvent<HTMLDivElement>) => handleAdd(), [handleAdd]);
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        handleAdd();
+      }
+    },
+    [handleAdd],
+  );
+
+  return (
+    <div
+      role='button'
+      aria-label={label}
+      tabIndex={0}
+      className={mx(
+        'flex items-center w-[10rem] h-16 overflow-hidden',
+        'border rounded-md separator-separator shadow-sm hover:surface-hover cursor-pointer',
+      )}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      data-testid={testId}
+    >
+      <div className='flex h-full w-12 items-center justify-center bg-neutral-800 shrink-0 border-r separator-separator'>
+        <Icon weight='thin' className={getSize(6)} />
+      </div>
+      <div className='overflow-hidden items-center p-2 px-3'>
+        <span className='capitalize'>{label}</span>
+      </div>
+    </div>
+  );
+};
+
+export const AddSection = ({ collection }: { collection: CollectionType }) => {
+  const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
+  const dispatch = useIntentDispatcher();
+  const { t } = useTranslation(STACK_PLUGIN);
+
+  const stackPlugin = usePlugin<StackPluginProvides>(STACK_PLUGIN);
+  const stackCreators = stackPlugin?.provides?.stack.creators ?? [];
+
+  const handleAdd = useCallback(
+    async (creator: StackSectionCreator) => {
+      const { data: section } = (await dispatch(creator.intent)) ?? {};
+      collection.objects = [section];
+      const stack = collection.views[StackViewType.typename];
+      if (stack) {
+        stack.sections[section.id] = {};
+      }
+    },
+    [collection, dispatch],
+  );
+
+  if (stackCreators.length === 0) {
+    return null;
+  }
+
+  return (
+    <div {...domAttributes} role='none' className='flex flex-wrap items-center p-8 gap-4'>
+      {stackCreators.map((creator) => {
+        const { id, type, icon, testId } = creator;
+        return (
+          <CreatorTile
+            key={id}
+            label={toLocalizedString(type, t)}
+            testId={testId}
+            Icon={icon}
+            handleAdd={() => handleAdd(creator)}
+          />
+        );
+      })}
+    </div>
+  );
+};

package/src/components/AddSectionDialog.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { FilePlus } from '@phosphor-icons/react';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { usePlugin, useIntent, LayoutAction, useResolvePlugin, parseFileManagerPlugin } from '@dxos/app-framework';
+import { type EchoReactiveObject, create } from '@dxos/echo-schema';
+import { FileType } from '@dxos/plugin-ipfs/types';
+import { type CollectionType } from '@dxos/plugin-space/types';
+import { getSpace } from '@dxos/react-client/echo';
+import { Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Path } from '@dxos/react-ui-mosaic';
+import { SearchList } from '@dxos/react-ui-searchlist';
+import { type AddSectionPosition } from '@dxos/react-ui-stack';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { nonNullable } from '@dxos/util';
+
+import { STACK_PLUGIN } from '../meta';
+import { StackViewType, type StackPluginProvides } from '../types';
+
+type AddSectionDialogProps = { path?: string; position: AddSectionPosition; collection: CollectionType };
+
+export const dataHasAddSectionDialogProps = (data: any): data is { subject: AddSectionDialogProps } => {
+  return (
+    'subject' in data &&
+    typeof data.subject === 'object' &&
+    !!data.subject &&
+    'position' in data.subject &&
+    typeof data.subject.position === 'string' &&
+    'collection' in data.subject
+  );
+};
+
+export const AddSectionDialog = ({ path, position, collection }: AddSectionDialogProps) => {
+  const { t } = useTranslation(STACK_PLUGIN);
+  const stackPlugin = usePlugin<StackPluginProvides>(STACK_PLUGIN);
+  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+  const fileRef = useRef<HTMLInputElement | null>(null);
+  const { dispatch } = useIntent();
+  const space = getSpace(collection);
+  const [pending, setPending] = useState<boolean>(false);
+  const [uploadError, setUploadError] = useState<Error | undefined>();
+
+  const handleAdd = useCallback(
+    (sectionObject: EchoReactiveObject<any>) => {
+      const index =
+        position === 'beforeAll'
+          ? 0
+          : position === 'afterAll'
+            ? collection.objects.length
+            : collection.objects.filter(nonNullable).findIndex((section) => section.id === Path.last(path!));
+
+      collection.objects.splice(index + (position === 'after' ? 1 : 0), 0, sectionObject);
+      const stack = collection.views[StackViewType.typename];
+      if (stack) {
+        stack.sections[sectionObject.id] = {};
+      }
+      setPending(false);
+      void dispatch?.({ action: LayoutAction.SET_LAYOUT, data: { element: 'dialog', state: false } });
+    },
+    [collection, path, position, dispatch],
+  );
+
+  const handleFileUpload =
+    fileManagerPlugin?.provides.file.upload && space
+      ? async (file: File) => {
+          const filename = file.name.split('.')[0];
+          try {
+            const info = await fileManagerPlugin.provides.file.upload?.(file, space);
+            if (info) {
+              const obj = create(FileType, { type: file.type, name: filename, filename, cid: info.cid });
+              handleAdd(obj);
+            }
+          } catch (err: any) {
+            setUploadError(err);
+          }
+        }
+      : undefined;
+
+  return (
+    <Dialog.Content>
+      <Dialog.Title>{t(`add section ${position} dialog title`)}</Dialog.Title>
+      <SearchList.Root label={t('add section input placeholder')}>
+        <SearchList.Input placeholder={t('add section input placeholder')} classNames='pli-3' disabled={pending} />
+        <SearchList.Content classNames='min-bs-24 bs-fit max-bs-48 overflow-auto' {...(pending && { inert: 'true' })}>
+          {stackPlugin?.provides?.stack.creators?.map(({ id, icon: Icon, label: propsLabel, testId, intent }) => {
+            const label = toLocalizedString(propsLabel, t);
+            return (
+              <SearchList.Item
+                value={label}
+                key={id}
+                onSelect={async () => {
+                  setPending(true);
+                  const { data: nextSection } = (await dispatch({ ...intent, data: { space } })) ?? {};
+                  handleAdd(nextSection);
+                }}
+                classNames='flex items-center gap-2 pli-2'
+                data-testid={testId}
+              >
+                {Icon && <Icon className={mx(getSize(4), 'shrink-0')} />}
+                <span className='grow truncate'>{label}</span>
+              </SearchList.Item>
+            );
+          })}
+          {handleFileUpload && (
+            <SearchList.Item
+              value={t('upload file label')}
+              classNames='flex items-center gap-2 pli-2'
+              onSelect={() => fileRef.current?.click()}
+            >
+              <FilePlus />
+              <span className='grow truncate'>{t('upload file label')}</span>
+            </SearchList.Item>
+          )}
+          {uploadError && <div className='text-error-500'>{uploadError.message}</div>}
+        </SearchList.Content>
+      </SearchList.Root>
+      {handleFileUpload && (
+        <input
+          type='file'
+          className='sr-only'
+          ref={fileRef}
+          onChange={({ target: { files } }) => files && handleFileUpload(files[0])}
+        />
+      )}
+    </Dialog.Content>
+  );
+};