@dxos/app-framework 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/react/PluginManagerContext.stories.tsx

@@ -0,0 +1,184 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { withTheme } from '@dxos/react-ui/testing';
+import { useWebComponentContext } from '@dxos/web-context-react';
+
+import * as Common from '../common';
+import { PluginManagerContext } from '../context';
+import { Capability, Plugin } from '../core';
+
+import { useApp } from './useApp';
+
+// Define the Counter capability
+const Counter = Capability.make<{ count: number; increment: () => void }>('example/counter');
+
+const CountStatus = () => {
+  const manager = useWebComponentContext(PluginManagerContext);
+  const capabilitiesAtom = useMemo(
+    () => manager?.capabilities.atom(Counter) ?? Atom.make<{ count: number; increment: () => void }[]>([]),
+    [manager],
+  );
+  const capabilities = useAtomValue(capabilitiesAtom);
+  const counter = (capabilities as any)[0];
+  const [count, setCount] = useState(counter?.count ?? 0);
+
+  useEffect(() => {
+    if (!counter) {
+      return;
+    }
+    setCount(counter.count);
+    if ('subscribe' in counter && typeof counter.subscribe === 'function') {
+      return counter.subscribe(() => setCount(counter.count));
+    }
+  }, [counter]);
+
+  if (!manager) return null;
+
+  const isEven = count % 2 === 0;
+
+  return (
+    <div
+      className={`mt-4 px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+        isEven
+          ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400'
+          : 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400'
+      }`}
+    >
+      Status: {isEven ? 'Even' : 'Odd'}
+    </div>
+  );
+};
+
+// A component that consumes the PluginManager via web context
+const CounterComponent = () => {
+  // Use the web-context hook to get the PluginManager
+  const manager = useWebComponentContext(PluginManagerContext);
+  const capabilitiesAtom = useMemo(
+    () => manager?.capabilities.atom(Counter) ?? Atom.make<{ count: number; increment: () => void }[]>([]),
+    [manager],
+  );
+  const capabilities = useAtomValue(capabilitiesAtom);
+  const counter = (capabilities as any)[0];
+  const [count, setCount] = useState(counter?.count ?? 0);
+
+  useEffect(() => {
+    if (!counter) {
+      return;
+    }
+    setCount(counter.count);
+    if ('subscribe' in counter && typeof counter.subscribe === 'function') {
+      return counter.subscribe(() => setCount(counter.count));
+    }
+  }, [counter]);
+
+  if (!manager) {
+    return <div className='p-4 text-red-500'>Error: Context not found</div>;
+  }
+
+  return (
+    <div className='flex flex-col items-center justify-center h-screen bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-white'>
+      <div className='p-8 bg-white dark:bg-neutral-800 rounded-lg shadow-xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full'>
+        <h2 className='text-2xl font-bold mb-6 text-center text-primary-600 dark:text-primary-400'>
+          Web Context Counter
+        </h2>
+
+        <div className='flex flex-col items-center gap-6'>
+          <div className='text-6xl font-mono font-bold tabular-nums tracking-tighter'>{count}</div>
+
+          <button
+            className='px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-full transition-colors shadow-md active:transform active:scale-95'
+            onClick={() => {
+              const counter = manager.capabilities.get(Counter);
+              counter.increment();
+            }}
+          >
+            Increment
+          </button>
+
+          <CountStatus />
+        </div>
+
+        <div className='mt-8 pt-4 border-bs border-neutral-200 dark:border-neutral-700 text-center'>
+          <p className='text-sm text-neutral-500 dark:text-neutral-400'>
+            This component accesses the <code>PluginManager</code> via <code>useWebComponentContext</code>.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Plugin that provides the Counter capability and renders the UI
+const CounterPlugin = Plugin.define({
+  id: 'dxos.org/plugin/counter',
+  name: 'Counter Plugin',
+}).pipe(
+  Plugin.addModule({
+    id: 'CounterMain',
+    activatesOn: Common.ActivationEvent.Startup,
+    activate: () => {
+      const listeners = new Set<() => void>();
+      const counter = {
+        count: 0,
+        increment: () => {
+          counter.count++;
+          listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener: () => void) => {
+          listeners.add(listener);
+          return () => listeners.delete(listener);
+        },
+      };
+
+      return Effect.succeed([
+        // Contribute the state/logic
+        Capability.contributes(Counter, counter),
+
+        // Contribute the UI
+        Capability.contributes(Common.Capability.ReactRoot, {
+          id: 'dxos.org/plugin/counter/root',
+          root: CounterComponent,
+        }),
+      ]);
+    },
+  }),
+  Plugin.make,
+)();
+
+const plugins = [CounterPlugin];
+const core = ['dxos.org/plugin/counter'];
+const placeholder = () => (
+  <div className='flex h-screen items-center justify-center p-4 text-lg text-neutral-500'>
+    Initializing Application...
+  </div>
+);
+
+const DefaultStory = () => {
+  const App = useApp({
+    plugins,
+    core,
+    placeholder,
+  });
+
+  return <App />;
+};
+
+const meta = {
+  title: 'sdk/app-framework/PluginManagerContext',
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};

package/src/react/PluginManagerProvider.ts

@@ -8,12 +8,12 @@ import { raise } from '@dxos/debug';
 
 import { type PluginManager } from '../core';
 
-const PluginManagerContext = createContext<PluginManager | undefined>(undefined);
+const PluginManagerContext = createContext<PluginManager.PluginManager | undefined>(undefined);
 
 /**
  * Get the plugin manager.
  */
-export const usePluginManager = (): PluginManager =>
+export const usePluginManager = (): PluginManager.PluginManager =>
   useContext(PluginManagerContext) ?? raise(new Error('Missing PluginManagerContext'));
 
 /**

package/src/react/Surface.stories.tsx

@@ -2,98 +2,135 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { Button, List, ListItem } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { List, ListItem, Toolbar } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { type ColorStyles, getHashStyles, mx } from '@dxos/ui-theme';
 
-import { Capabilities, createSurface } from '../common';
-import { type PluginManager } from '../core';
-import { setupPluginManager } from '../testing';
+import * as Common from '../common';
+import { withPluginManager } from '../testing';
 
-import { PluginManagerProvider, usePluginManager } from './PluginManagerProvider';
+import { usePluginManager } from './PluginManagerProvider';
 import { Surface, useSurfaces } from './Surface';
 
-const randomColor = (): string => {
-  const hue = faker.number.int({ min: 0, max: 360 });
-  const saturation = faker.number.int({ min: 50, max: 90 });
-  const lightness = faker.number.int({ min: 40, max: 70 });
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+type TestComponentProps = {
+  id: string;
+  styles: ColorStyles;
 };
 
-const Component = () => {
+const TestComponent = forwardRef<HTMLDivElement, TestComponentProps>(({ styles, id }, forwardedRef) => {
+  return (
+    <div
+      className={mx('flex justify-center items-center border rounded', styles.surface, styles.border)}
+      ref={forwardedRef}
+    >
+      <span className={mx('dx-tag font-mono text-lg', styles.text)}>{id}</span>
+    </div>
+  );
+});
+
+const DefaultStory = () => {
   const manager = usePluginManager();
   const surfaces = useSurfaces();
-  const [picked, setPicked] = useState('test');
+  const [selected, setSelected] = useState<string | undefined>();
 
   const handleAdd = useCallback(() => {
-    const id = `test-${faker.number.int({ min: 0, max: 1_000_000 })}`;
-    const backgroundColor = randomColor();
-
-    manager.context.contributeCapability({
+    const id = `test-${faker.number.int({ min: 0, max: 1_000 })}`;
+    const styles = getHashStyles(id);
+    manager.capabilities.contribute({
       module: 'test',
-      interface: Capabilities.ReactSurface,
-      implementation: createSurface({
+      interface: Common.Capability.ReactSurface,
+      implementation: Common.createSurface({
         id,
-        role: id,
-        component: () => (
-          <div className='flex-1' style={{ backgroundColor }}>
-            {id}
-          </div>
-        ),
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === id,
+        component: ({ ref }) => <TestComponent id={id} styles={styles} ref={ref} />,
       }),
     });
 
-    setPicked(id);
+    setSelected(id);
   }, [manager]);
 
-  const handlePick = useCallback(() => {
-    setPicked(faker.helpers.arrayElement(surfaces).id);
+  const handleSelect = useCallback(() => {
+    setSelected(faker.helpers.arrayElement(surfaces)?.id);
   }, [surfaces]);
 
+  const handleError = useCallback(() => {
+    manager.capabilities.contribute({
+      module: 'error',
+      interface: Common.Capability.ReactSurface,
+      implementation: Common.createSurface({
+        id: 'error',
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === 'error',
+        component: () => {
+          const [count, setCount] = useState(3);
+          useEffect(() => {
+            const interval = setInterval(() => {
+              setCount((count) => {
+                if (count <= 1) {
+                  clearInterval(interval);
+                }
+
+                return count - 1;
+              });
+            }, 1_000);
+            return () => clearInterval(interval);
+          }, []);
+
+          if (count <= 0) {
+            throw new Error('BANG!');
+          }
+
+          return (
+            <div className='flex justify-center items-center border border-roseFill rounded'>
+              <span className='font-mono'>Ticking... {count}</span>
+            </div>
+          );
+        },
+      }),
+    });
+
+    setSelected('error');
+  }, [manager]);
+
+  const ref = useRef<HTMLElement>(null);
+  useEffect(() => {
+    console.log(ref.current);
+  }, [ref]);
+
   return (
-    <div className='flex flex-col gap-2'>
-      <div className='flex gap-2'>
-        <Button onClick={handleAdd}>Add</Button>
-        <Button onClick={handlePick}>Pick</Button>
-      </div>
-      <div className='flex gap-2'>
-        <div className='flex-1'>
-          <List itemSizes='one'>
+    <div className='flex flex-col bs-full overflow-hidden'>
+      <Toolbar.Root>
+        <Toolbar.Button onClick={handleAdd}>Add</Toolbar.Button>
+        <Toolbar.Button onClick={handleSelect}>Pick</Toolbar.Button>
+        <Toolbar.Button onClick={handleError}>Error</Toolbar.Button>
+      </Toolbar.Root>
+      <div className='grid grid-cols-2 bs-full gap-4 overflow-hidden'>
+        <Surface role='item' data={selected ? { id: selected } : undefined} limit={1} ref={ref} />
+        <div className='overflow-y-auto bs-full'>
+          <List>
             {surfaces.map((surface) => (
               <ListItem.Root key={surface.id} id={surface.id}>
-                <ListItem.Heading classNames='grow pbs-2'>{surface.id}</ListItem.Heading>
+                <ListItem.Heading classNames='flex items-center'>{surface.id}</ListItem.Heading>
               </ListItem.Root>
             ))}
           </List>
         </div>
-        <div className='flex-1'>
-          <Surface role={picked} limit={1} />
-        </div>
       </div>
     </div>
   );
 };
 
-const DefaultStory = (props: { manager: PluginManager }) => {
-  return (
-    <PluginManagerProvider value={props.manager}>
-      <Component />
-    </PluginManagerProvider>
-  );
-};
-
 const meta = {
   title: 'sdk/app-framework/Surface',
   render: DefaultStory,
-  // NOTE: Intentionally not using withPluginManager to try to reduce surface area of the story.
-  decorators: [withTheme, withLayout()],
-  args: {
-    manager: setupPluginManager(),
+  decorators: [withTheme, withPluginManager({ capabilities: [] })],
+  parameters: {
+    layout: 'fullscreen',
   },
 } satisfies Meta<typeof DefaultStory>;