@dxos/plugin-navtree 0.7.4 → 0.7.5-labs.071a3e2

package/src/stories/StorybookNavTree.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { NavTree, NavTreeContext, type NavTreeContextValue, type NavTreeProps } from '../components';
+import { type NavTreeItemGraphNode } from '../types';
+
+export const StorybookNavTree = ({
+  getActions,
+  loadDescendents,
+  renderItemEnd,
+  popoverAnchorId,
+  getItems,
+  getProps,
+  isCurrent,
+  canDrop,
+  onSelect,
+  isOpen,
+  onOpenChange,
+  ...props
+}: NavTreeProps & NavTreeContextValue) => {
+  const [tab, setTab] = useState('never');
+
+  const contextValue = useMemo(
+    () => ({
+      tab,
+      onTabChange: (node: NavTreeItemGraphNode) => setTab(node.id),
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      onSelect,
+    }),
+    [
+      tab,
+      setTab,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      onSelect,
+    ],
+  );
+  return (
+    <NavTreeContext.Provider value={contextValue}>
+      <NavTree {...props} />
+    </NavTreeContext.Provider>
+  );
+};

package/src/translations.ts

@@ -13,14 +13,7 @@ export default [
         'commands dialog title': 'Commands',
         'command list input placeholder': 'Search for commands…',
         'node actions menu invoker label': 'More options',
-        'warning title': 'WARNING',
-        'technology preview message': 'Composer is still in technology preview.',
-        'learn more label': 'Learn more',
-        'released message': 'This version released {{released}}.',
-        'see release label': 'See release on GitHub',
-        'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
         'tree item actions label': 'More actions',
-        'tree item searchlist input placeholder': 'Search for actions…',
         'empty branch message': ' ',
       },
     },

package/src/types.ts

@@ -4,7 +4,7 @@
 
 import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
 import { type Label } from '@dxos/react-ui';
-import { type MaybePromise } from '@dxos/util';
+import { type MaybePromise, type Position } from '@dxos/util';
 
 export type NavTreeItemGraphNode = Node<
   any,
@@ -31,6 +31,7 @@ type SharedProperties = {
   label: Label;
   icon?: string;
   disabled?: boolean;
+  position?: Position;
   testId?: string;
   className?: string;
   headingClassName?: string;
@@ -47,7 +48,7 @@ export type ActionProperties = SharedProperties & {
   disposition?: string;
   hidden?: boolean;
   caller?: string;
-  menuType?: 'searchList' | 'dropdown';
+  menuType?: 'dropdown';
   keyBinding?: string | KeyBinding;
 };
 

package/src/util.ts

@@ -10,6 +10,7 @@ import {
   ACTION_TYPE,
   ACTION_GROUP_TYPE,
   isAction,
+  isActionLike,
 } from '@dxos/app-graph';
 import { nonNullable } from '@dxos/util';
 
@@ -126,3 +127,56 @@ export const expandChildren = (graph: Graph, node: Node) => {
 export const expandActions = (graph: Graph, node: Node) => {
   return Promise.all([graph.expand(node, 'outbound', ACTION_TYPE), graph.expand(node, 'outbound', ACTION_GROUP_TYPE)]);
 };
+
+export const l0ItemType = (item: Node<any>) => {
+  if (item.properties.disposition === 'collection') {
+    return 'collection';
+  } else if (isActionLike(item)) {
+    return 'action';
+  } else if (item.properties.disposition === 'navigation') {
+    return 'link';
+  } else {
+    return 'tab';
+  }
+};
+
+// Regular expression to match renderable characters
+// Excludes control characters, combining marks, and other non-renderable characters
+const renderableCharRegex =
+  /^(?![\p{Control}\p{Mark}\p{Separator}\p{Surrogate}\p{Unassigned}])[\p{L}\p{N}\p{P}\p{S}\p{Emoji}]$/u;
+
+/**
+ * Returns the first two renderable characters from a string that are separated by non-word characters.
+ * Handles Unicode characters correctly.
+ *
+ * @param {string} label - The input string to process
+ * @returns {[string, string]} Array containing the two characters, or empty strings if not found
+ */
+export const getFirstTwoRenderableChars = (label: string) => {
+  // Convert string to array of Unicode characters
+  const characters = Array.from(label);
+
+  // Keep track of found renderable characters
+  const result = ['', ''];
+  let foundFirst = false;
+
+  for (let i = 0; i < characters.length; i++) {
+    const char = characters[i];
+
+    if (renderableCharRegex.test(char)) {
+      if (!foundFirst) {
+        result[0] = char;
+        foundFirst = true;
+      } else {
+        // Check if there's at least one non-word character between the first and current char
+        const textBetween = characters.slice(result[0].length, i).join('');
+        if (/[^\p{L}\p{N}_]/u.test(textBetween)) {
+          result[1] = char;
+          break;
+        }
+      }
+    }
+  }
+
+  return result;
+};

package/dist/lib/browser/chunk-PSVCPL4T.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';\n\n// TODO(wittjosiah): Factor out.\nexport const KEY_BINDING = 'KeyBinding';\n\nexport default {\n  id: NAVTREE_PLUGIN,\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAGvB,IAAMC,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAIF;AACN;",
-  "names": ["NAVTREE_PLUGIN", "KEY_BINDING", "id"]
-}

package/dist/lib/browser/meta.mjs

@@ -1,11 +0,0 @@
-import {
-  KEY_BINDING,
-  NAVTREE_PLUGIN,
-  meta_default
-} from "./chunk-PSVCPL4T.mjs";
-export {
-  KEY_BINDING,
-  NAVTREE_PLUGIN,
-  meta_default as default
-};
-//# sourceMappingURL=meta.mjs.map

package/dist/lib/browser/meta.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import { type LayoutPart } from '@dxos/app-framework';
-export declare const NavTreeFooter: (props: {
-    layoutPart?: LayoutPart;
-}) => React.JSX.Element;
-//# sourceMappingURL=NavTreeFooter.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NavTreeFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/NavTreeFooter.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,KAAK,UAAU,EAKhB,MAAM,qBAAqB,CAAC;AAwB7B,eAAO,MAAM,aAAa,UAAW;IAAE,UAAU,CAAC,EAAE,UAAU,CAAA;CAAE,sBAuH/D,CAAC"}

package/src/components/NavTreeFooter.tsx

@@ -1,158 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { ArrowSquareOut, GearSix, Warning } from '@phosphor-icons/react';
-import { formatDistance } from 'date-fns/formatDistance';
-import React from 'react';
-
-import {
-  type LayoutPart,
-  SettingsAction,
-  parseNavigationPlugin,
-  useResolvePlugin,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { useConfig } from '@dxos/react-client';
-import {
-  Button,
-  Link,
-  Message,
-  Popover,
-  Tooltip,
-  Trans,
-  useDefaultValue,
-  useSidebars,
-  useTranslation,
-} from '@dxos/react-ui';
-import { LayoutControls } from '@dxos/react-ui-stack';
-import { getSize, mx } from '@dxos/react-ui-theme';
-
-import { NAVTREE_PLUGIN } from '../meta';
-
-const buttonStyles = 'pli-1.5 text-xs font-normal';
-
-const repo = 'https://github.com/dxos/dxos';
-
-const VERSION_REGEX = /([\d.]+)/;
-
-export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
-  const layoutPart = useDefaultValue(props.layoutPart, () => 'sidebar');
-  const config = useConfig();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
-  const dispatch = useIntentDispatcher();
-  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
-  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
-  const [_, v] = version?.match(VERSION_REGEX) ?? [];
-
-  const releaseUrl =
-    config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production'
-      ? `${repo}/releases/tag/v${version}`
-      : `${repo}/commit/${commitHash}`;
-
-  const previewUrl = 'https://docs.dxos.org/composer#technology-preview';
-
-  return (
-    <div
-      role='none'
-      className={mx(
-        'flex bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content justify-end',
-        layoutPart === 'complementary' && 'md:justify-end flex-row-reverse',
-      )}
-    >
-      <Popover.Root>
-        <Popover.Trigger asChild>
-          <Button variant='ghost' classNames={buttonStyles} {...(!navigationSidebarOpen && { tabIndex: -1 })}>
-            v{v}
-          </Button>
-        </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content
-            side='top'
-            role='message'
-            classNames='z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]'
-          >
-            <Message.Root valence='warning' className='rounded-be-none p-5'>
-              <Message.Title>
-                <Warning weight='duotone' className='inline mie-2 is-6 bs-6' />
-                <span>{t('warning title')}</span>
-              </Message.Title>
-              <Message.Body>
-                {t('technology preview message')}
-                <br />
-                <Link href={previewUrl} target='_blank' rel='noreferrer' variant='neutral'>
-                  {t('learn more label')}
-                  <ArrowSquareOut className='inline mis-1' weight='bold' />
-                </Link>
-              </Message.Body>
-            </Message.Root>
-            <div role='none' className='plb-4 pli-5 space-b-2 text-baseText'>
-              {timestamp && (
-                <p>
-                  {t('released message', {
-                    released: formatDistance(new Date(timestamp), new Date(), { addSuffix: true }),
-                  })}
-                  <br />
-                  <Link href={releaseUrl} target='_blank' rel='noreferrer' variant='neutral'>
-                    {t('see release label')}
-                    <ArrowSquareOut className='inline mis-1' weight='bold' />
-                  </Link>
-                </p>
-              )}
-              <p>
-                <Trans
-                  {...{
-                    t,
-                    i18nKey: 'powered by dxos message',
-                    components: {
-                      dxos: <Link href='https://dxos.org' target='_blank' rel='noreferrer' variant='neutral' />,
-                    },
-                  }}
-                />
-              </p>
-            </div>
-            <Popover.Arrow />
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          {/* TODO(burdon): Reconcile with action created by LayoutPlugin. */}
-          <Button
-            variant='ghost'
-            classNames={buttonStyles}
-            data-testid='treeView.openSettings'
-            data-joyride='welcome/settings'
-            {...(!navigationSidebarOpen && { tabIndex: -1 })}
-            onClick={() => dispatch({ action: SettingsAction.OPEN })}
-          >
-            <span className='sr-only'>{t('open settings label')}</span>
-            <GearSix className={mx(getSize(5), 'rotate-90')} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content classNames='z-[12]'>
-            {t('open settings label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-
-      {/* NOTE(thure): Unpinning from the NavTree’s default position in Deck is temporarily disabled. */}
-      {navigationPlugin?.meta.id === 'dxos.org/plugin/deck' && (
-        <LayoutControls
-          variant='hide-disabled'
-          capabilities={{
-            incrementStart: false,
-            incrementEnd: false,
-          }}
-          onClick={(_type) => {
-            // TODO(Zan): If we inmplement pinning again, we should dispatch here.
-          }}
-        />
-      )}
-    </div>
-  );
-};