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

package/src/components/DeckLayout/Plank.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Plus } from '@phosphor-icons/react';
+import React, { useCallback } from 'react';
+
+import {
+  LayoutAction,
+  type LayoutCoordinate,
+  type LayoutEntry,
+  type LayoutPart,
+  type LayoutParts,
+  NavigationAction,
+  Surface,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
+import { debounce } from '@dxos/async';
+import { useGraph } from '@dxos/plugin-graph';
+import { Button, Tooltip, useTranslation, type ClassNameValue } from '@dxos/react-ui';
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { Plank as NaturalPlank } from '@dxos/react-ui-deck';
+
+import { NodePlankHeading } from './NodePlankHeading';
+import { PlankContentError, PlankError } from './PlankError';
+import { PlankLoading } from './PlankLoading';
+import { NAV_ID } from './constants';
+import { DeckAction } from '../../DeckPlugin';
+import { useNode } from '../../hooks';
+import { DECK_PLUGIN } from '../../meta';
+import { useDeckContext } from '../DeckContext';
+import { useLayout } from '../LayoutContext';
+
+export type PlankProps = {
+  entry: LayoutEntry;
+  layoutParts: LayoutParts;
+  // TODO(wittjosiah): Remove.
+  part: LayoutPart;
+  resizeable?: boolean;
+  flatDeck?: boolean;
+  searchEnabled?: boolean;
+  classNames?: ClassNameValue;
+};
+
+export const Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEnabled, classNames }: PlankProps) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+  const dispatch = useIntentDispatcher();
+  const { popoverAnchorId, scrollIntoView } = useLayout();
+  const { plankSizing } = useDeckContext();
+  const { graph } = useGraph();
+  const node = useNode(graph, entry.id);
+
+  const attendableAttrs = createAttendableAttributes(entry.id);
+
+  const size = plankSizing?.[entry.id] as number | undefined;
+  const setSize = useCallback(
+    debounce((newSize: number) => {
+      void dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: entry.id, size: newSize } });
+    }, 200),
+    [dispatch, entry.id],
+  );
+
+  const coordinate: LayoutCoordinate = { part, entryId: entry.id };
+
+  return (
+    <NaturalPlank.Root size={size} setSize={setSize}>
+      <NaturalPlank.Content
+        {...attendableAttrs}
+        classNames={[!flatDeck && 'surface-base', classNames]}
+        scrollIntoViewOnMount={entry.id === scrollIntoView}
+        suppressAutofocus={entry.id === NAV_ID || !!node?.properties?.managesAutofocus}
+      >
+        {node ? (
+          <>
+            <NodePlankHeading
+              layoutPart={coordinate.part}
+              layoutParts={layoutParts}
+              node={node}
+              id={entry.id}
+              popoverAnchorId={popoverAnchorId}
+              flatDeck={flatDeck}
+            />
+            <Surface
+              role='article'
+              data={{
+                ...(entry.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+                coordinate,
+                popoverAnchorId,
+              }}
+              limit={1}
+              fallback={PlankContentError}
+              placeholder={<PlankLoading />}
+            />
+          </>
+        ) : (
+          <PlankError layoutCoordinate={coordinate} id={entry.id} flatDeck={flatDeck} />
+        )}
+      </NaturalPlank.Content>
+      {searchEnabled && resizeable ? (
+        <div role='none' className='grid grid-rows-subgrid row-span-3'>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                data-testid='plankHeading.open'
+                variant='ghost'
+                classNames='p-1 w-fit'
+                onClick={() =>
+                  dispatch([
+                    {
+                      action: LayoutAction.SET_LAYOUT,
+                      data: {
+                        element: 'dialog',
+                        component: 'dxos.org/plugin/search/Dialog',
+                        dialogBlockAlign: 'start',
+                        subject: {
+                          action: NavigationAction.SET,
+                          position: 'add-after',
+                          coordinate,
+                        },
+                      },
+                    },
+                  ])
+                }
+              >
+                <span className='sr-only'>{t('insert plank label')}</span>
+                <Plus />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-[70]'>
+                {t('insert plank label')}
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+          <NaturalPlank.ResizeHandle classNames='row-start-[toolbar-start] row-end-[content-end]' />
+        </div>
+      ) : resizeable ? (
+        <NaturalPlank.ResizeHandle classNames='row-span-3' />
+      ) : null}
+    </NaturalPlank.Root>
+  );
+};

package/src/components/DeckLayout/PlankError.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { type LayoutCoordinate } from '@dxos/app-framework';
+import { type Node } from '@dxos/plugin-graph';
+import { useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { NodePlankHeading } from './NodePlankHeading';
+import { PlankLoading } from './PlankLoading';
+import { DECK_PLUGIN } from '../../meta';
+
+export const PlankContentError = ({ error }: { error?: Error }) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+  return (
+    <div role='none' className='grid place-items-center row-span-2'>
+      <p
+        role='alert'
+        className={mx(
+          descriptionText,
+          // TODO(burdon): Factor out common styles for all dialogs.
+          'overflow-hidden break-words',
+          'place-self-center border border-dashed border-neutral-400/50 rounded-lg text-center p-8 font-normal text-lg',
+        )}
+      >
+        {error ? error.toString() : t('error fallback message')}
+      </p>
+    </div>
+  );
+};
+
+export const PlankError = ({
+  layoutCoordinate,
+  id,
+  node,
+  error,
+  flatDeck,
+}: {
+  layoutCoordinate: LayoutCoordinate;
+  id: string;
+  node?: Node;
+  error?: Error;
+  flatDeck?: boolean;
+}) => {
+  const [timedOut, setTimedOut] = useState(false);
+  useEffect(() => {
+    setTimeout(() => setTimedOut(true), 5e3);
+  }, []);
+  return (
+    <>
+      <NodePlankHeading
+        node={node}
+        id={id}
+        layoutPart={layoutCoordinate.part}
+        pending={!timedOut}
+        flatDeck={flatDeck}
+      />
+      {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
+    </>
+  );
+};

package/src/components/DeckLayout/PlankLoading.tsx

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Status } from '@dxos/react-ui';
+
+export const PlankLoading = () => {
+  return (
+    <div role='none' className='grid bs-[100dvh] place-items-center row-span-2'>
+      <Status indeterminate aria-label='Initializing' />
+    </div>
+  );
+};

package/src/components/DeckLayout/Sidebar.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type Attention, type LayoutParts, openIds, Surface } from '@dxos/app-framework';
+import { Main } from '@dxos/react-ui';
+
+import { useLayout } from '../LayoutContext';
+
+export type SidebarProps = {
+  attention: Attention;
+  layoutParts: LayoutParts;
+};
+
+export const Sidebar = ({ attention, layoutParts }: SidebarProps) => {
+  const { layoutMode, popoverAnchorId } = useLayout();
+
+  const activeIds = useMemo(() => {
+    if (layoutMode === 'solo') {
+      return new Set<string>(layoutParts?.solo?.map((e) => e.id) ?? []);
+    } else if (layoutMode === 'deck') {
+      return new Set<string>(layoutParts?.main?.map((e) => e.id) ?? []);
+    }
+
+    return new Set<string>(openIds(layoutParts));
+  }, [layoutParts, layoutMode]);
+
+  const navigationData = useMemo(
+    () => ({
+      popoverAnchorId,
+      activeIds,
+      attended: attention.attended,
+    }),
+    [popoverAnchorId, activeIds, attention.attended],
+  );
+  return (
+    <Main.NavigationSidebar>
+      <Surface role='navigation' data={{ ...navigationData }} limit={1} />
+    </Main.NavigationSidebar>
+  );
+};

package/src/components/DeckLayout/Toast.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import type { Toast as ToastProps } from '@dxos/app-framework';
+import { Button, Toast as NaturalToast, type ToastRootProps } from '@dxos/react-ui';
+
+// TODO(wittjosiah): Render remaining duration as a progress bar within the toast.
+export const Toast = ({
+  id,
+  title,
+  description,
+  icon,
+  duration,
+  actionLabel,
+  actionAlt,
+  closeLabel,
+  onAction,
+  onOpenChange,
+}: ToastProps & Pick<ToastRootProps, 'onOpenChange'>) => {
+  return (
+    <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
+      <NaturalToast.Body>
+        <NaturalToast.Title>
+          {icon?.({ className: 'inline mr-1' })}
+          <span>{title}</span>
+        </NaturalToast.Title>
+        {description && <NaturalToast.Description>{description}</NaturalToast.Description>}
+      </NaturalToast.Body>
+      <NaturalToast.Actions>
+        {onAction && actionAlt && actionLabel && (
+          <NaturalToast.Action altText={actionAlt} asChild>
+            <Button data-testid='toast.action' variant='primary' onClick={() => onAction?.()}>
+              {actionLabel}
+            </Button>
+          </NaturalToast.Action>
+        )}
+        {closeLabel && (
+          <NaturalToast.Close asChild>
+            <Button data-testid='toast.close'>{closeLabel}</Button>
+          </NaturalToast.Close>
+        )}
+      </NaturalToast.Actions>
+    </NaturalToast.Root>
+  );
+};

package/src/components/DeckLayout/constants.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export const NAV_ID = 'NavTree';
+export const SURFACE_PREFIX = 'surface:';

package/src/components/DeckLayout/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { NAV_ID } from './constants';
+export * from './DeckLayout';

package/src/components/LayoutContext.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Context, createContext, useContext } from 'react';
+
+import type { Layout } from '@dxos/app-framework';
+import { raise } from '@dxos/debug';
+
+export const LayoutContext: Context<Layout | null> = createContext<Layout | null>(null);
+
+export const useLayout = (): Layout => useContext(LayoutContext) ?? raise(new Error('Missing LayoutContext'));

package/src/components/LayoutSettings.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { SettingsValue } from '@dxos/plugin-settings';
+import { Input, Select, useTranslation } from '@dxos/react-ui';
+
+import { DECK_PLUGIN } from '../meta';
+import {
+  type NewPlankPositioning,
+  NewPlankPositions,
+  type DeckSettingsProps,
+  type Overscroll,
+  OverscrollOptions,
+} from '../types';
+
+const isSocket = !!(globalThis as any).__args;
+
+export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+
+  return (
+    <>
+      <SettingsValue label={t('select new plank positioning label')}>
+        <Select.Root
+          value={settings.newPlankPositioning ?? 'start'}
+          onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
+        >
+          <Select.TriggerButton placeholder={t('select new plank positioning placeholder')} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {NewPlankPositions.map((position) => (
+                  <Select.Option key={position} value={position}>
+                    {t(`settings new plank position ${position} label`)}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </SettingsValue>
+      <SettingsValue label={t('settings overscroll label')}>
+        <Select.Root
+          value={settings.overscroll ?? 'none'}
+          onValueChange={(value) => (settings.overscroll = value as Overscroll)}
+        >
+          <Select.TriggerButton placeholder={t('select overscroll placeholder')} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {OverscrollOptions.map((option) => (
+                  <Select.Option key={option} value={option}>
+                    {t(`settings overscroll ${option} label`)}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </SettingsValue>
+      <SettingsValue label={t('settings show footer label')}>
+        <Input.Switch checked={settings.showFooter} onCheckedChange={(checked) => (settings.showFooter = !!checked)} />
+      </SettingsValue>
+      {!isSocket && (
+        <SettingsValue label={t('settings native redirect label')}>
+          <Input.Switch
+            checked={settings.enableNativeRedirect}
+            onCheckedChange={(checked) => (settings.enableNativeRedirect = !!checked)}
+          />
+        </SettingsValue>
+      )}
+      <SettingsValue label={t('settings custom slots')}>
+        <Input.Switch
+          checked={settings.customSlots}
+          onCheckedChange={(checked) => (settings.customSlots = !!checked)}
+        />
+      </SettingsValue>
+      <SettingsValue label={t('settings flat deck')}>
+        <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = !!checked)} />
+      </SettingsValue>
+    </>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './DeckLayout';
+export * from './DeckContext';
+export * from './LayoutContext';
+export * from './LayoutSettings';

package/src/hooks/index.ts

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

package/src/hooks/useNode.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Graph, type Node } from '@dxos/plugin-graph';
+
+/**
+ * React hook to get a node from the graph.
+ *
+ * @param graph Graph to find the node in.
+ * @param id Id of the node to find.
+ * @param timeout Optional timeout in milliseconds to wait for the node to be found.
+ * @returns Node if found, undefined otherwise.
+ */
+// TODO(wittjosiah): Factor out.
+export const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {
+  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id) : undefined);
+
+  useEffect(() => {
+    if (nodeState?.id === id || !id) {
+      return;
+    }
+
+    // Set timeout did not seem to effectively not block the UI thread.
+    const frame = requestAnimationFrame(async () => {
+      try {
+        const node = await graph.waitForNode(id, timeout);
+        if (node) {
+          setNodeState(node);
+        }
+      } catch {}
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [graph, id, timeout, nodeState?.id]);
+
+  return nodeState;
+};

package/src/hooks/useNodeActionExpander.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { ACTION_GROUP_TYPE, ACTION_TYPE, getGraph, type Node } from '@dxos/plugin-graph';
+
+const expandNodeActions = async (node: Node) => {
+  const graph = getGraph(node);
+  await graph.expand(node, 'outbound', ACTION_GROUP_TYPE);
+  await graph.expand(node, 'outbound', ACTION_TYPE);
+};
+
+export const useNodeActionExpander = (node?: Node) => {
+  useEffect(() => {
+    if (node) {
+      const frame = requestAnimationFrame(() => {
+        void expandNodeActions(node);
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [node]);
+};

package/src/index.ts

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