@dxos/react-ui 0.1.41-next.d517c89 → 0.3.3-main.3ce60d4

package/src/composites/Shell/Shell.stories.tsx

@@ -1,93 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-import { faker } from '@faker-js/faker';
-import { Intersect, Laptop, PlusCircle } from '@phosphor-icons/react';
-import React, { useState } from 'react';
-
-import { PublicKey, ShellLayout } from '@dxos/client';
-import { useClient, useSpace, useSpaces } from '@dxos/react-client';
-import { ClientDecorator } from '@dxos/react-client/testing';
-import {
-  Button,
-  ButtonGroup,
-  getSize,
-  Group,
-  TooltipRoot,
-  TooltipContent,
-  TooltipTrigger
-} from '@dxos/react-components';
-
-import { SpaceListItem } from '../../components';
-import { ShellProvider, useShell } from './ShellContext';
-
-export default {
-  component: ShellProvider
-};
-
-const ShellControls = () => {
-  const client = useClient();
-  const spaces = useSpaces();
-  const shell = useShell();
-
-  const controls = (
-    <ButtonGroup className='mbe-4'>
-      <TooltipRoot>
-        <TooltipContent>Devices</TooltipContent>
-        <TooltipTrigger asChild>
-          <Button onClick={() => shell.setLayout(ShellLayout.DEVICE_INVITATIONS)}>
-            <Laptop weight='fill' className={getSize(6)} />
-          </Button>
-        </TooltipTrigger>
-      </TooltipRoot>
-      <TooltipRoot>
-        <TooltipContent>Create Space</TooltipContent>
-        <TooltipTrigger asChild>
-          <Button onClick={() => client.createSpace({ name: faker.animal.bird() })}>
-            <PlusCircle weight='fill' className={getSize(6)} />
-          </Button>
-        </TooltipTrigger>
-      </TooltipRoot>
-      <TooltipRoot>
-        <TooltipContent>Join Space</TooltipContent>
-        <TooltipTrigger asChild>
-          <Button onClick={() => shell.setLayout(ShellLayout.JOIN_SPACE)}>
-            <Intersect weight='fill' className={getSize(6)} />
-          </Button>
-        </TooltipTrigger>
-      </TooltipRoot>
-    </ButtonGroup>
-  );
-
-  const header = <div className='flex flex-row-reverse'>{controls}</div>;
-
-  return (
-    <Group label={{ children: header }} className='flex flex-col w-96'>
-      <ul>
-        {spaces.map((space) => (
-          <SpaceListItem
-            key={space.key.toHex()}
-            space={space}
-            onClick={() => shell.setLayout(ShellLayout.SPACE_INVITATIONS, { spaceKey: space.key })}
-          />
-        ))}
-      </ul>
-    </Group>
-  );
-};
-
-export const Default = {
-  render: () => {
-    const [spaceKey, setSpaceKey] = useState<PublicKey>();
-    const space = useSpace(spaceKey);
-
-    return (
-      <ShellProvider space={space} onJoinedSpace={setSpaceKey}>
-        <ShellControls />
-      </ShellProvider>
-    );
-  },
-  decorators: [ClientDecorator()]
-};

package/src/composites/Shell/Shell.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { ShellRuntime } from '@dxos/client-services';
-import { log } from '@dxos/log';
-import { LayoutRequest, ShellDisplay, ShellLayout } from '@dxos/protocols/proto/dxos/iframe';
-import { useClient, useSpace, useSpaces } from '@dxos/react-client';
-
-import { DevicesDialog } from '../DevicesDialog';
-import { JoinDialog } from '../JoinDialog';
-import { SpaceDialog } from '../SpaceDialog';
-
-export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: string }) => {
-  const [{ layout, invitationCode, spaceKey }, setLayout] = useState<LayoutRequest>({
-    layout: runtime.layout,
-    invitationCode: runtime.invitationCode,
-    spaceKey: runtime.spaceKey
-  });
-
-  const client = useClient();
-  const spaces = useSpaces();
-  const space = useSpace(spaceKey);
-
-  useEffect(() => {
-    return runtime.layoutUpdate.on((request) => setLayout(request));
-  }, [runtime]);
-
-  useEffect(() => {
-    if (layout === ShellLayout.SPACE_INVITATIONS && !space) {
-      log.warn('No space found for shell space invitations.');
-
-      const timeout = setTimeout(async () => {
-        await runtime.setAppContext({ display: ShellDisplay.NONE });
-        runtime.setLayout(ShellLayout.DEFAULT);
-      });
-
-      return () => clearTimeout(timeout);
-    }
-  }, [runtime, layout, space]);
-
-  switch (layout) {
-    case ShellLayout.INITIALIZE_IDENTITY:
-      return (
-        <JoinDialog
-          mode='halo-only'
-          initialInvitationCode={invitationCode}
-          onDone={() => {
-            void runtime.setAppContext({ display: ShellDisplay.NONE });
-            runtime.setLayout(ShellLayout.DEFAULT);
-            // TODO(wittjosiah): Support this first-class inside client?
-            spaces.length > 0 || client.createSpace();
-          }}
-        />
-      );
-
-    case ShellLayout.DEVICE_INVITATIONS:
-      return (
-        <DevicesDialog
-          createInvitationUrl={(invitationCode) => `${origin}?haloInvitationCode=${invitationCode}`}
-          onDone={async () => {
-            await runtime.setAppContext({ display: ShellDisplay.NONE });
-            runtime.setLayout(ShellLayout.DEFAULT);
-          }}
-        />
-      );
-
-    case ShellLayout.SPACE_INVITATIONS:
-      return space ? (
-        <SpaceDialog
-          space={space}
-          createInvitationUrl={(invitationCode) => `${origin}?spaceInvitationCode=${invitationCode}`}
-          onDone={async () => {
-            await runtime.setAppContext({ display: ShellDisplay.NONE });
-            runtime.setLayout(ShellLayout.DEFAULT);
-          }}
-        />
-      ) : null;
-
-    case ShellLayout.JOIN_SPACE:
-      return (
-        <JoinDialog
-          initialInvitationCode={invitationCode}
-          onDone={async (result) => {
-            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: result?.spaceKey ?? undefined });
-            runtime.setLayout(ShellLayout.DEFAULT);
-          }}
-          onExit={async () => {
-            await runtime.setAppContext({ display: ShellDisplay.NONE });
-            runtime.setLayout(ShellLayout.DEFAULT);
-          }}
-        />
-      );
-
-    default:
-      return null;
-  }
-};

package/src/composites/Shell/ShellContext.tsx

@@ -1,178 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, {
-  Context,
-  createContext,
-  PropsWithChildren,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState
-} from 'react';
-
-import {
-  IFrameClientServicesProxy,
-  type PublicKey,
-  type ShellController,
-  ShellDisplay,
-  ShellLayout,
-  type Space
-} from '@dxos/client';
-import { MemoryShellRuntime } from '@dxos/client-services';
-import { useClient, useIdentity } from '@dxos/react-client';
-import { mx } from '@dxos/react-components';
-
-import { Shell } from './Shell';
-
-export type ShellContextProps = {
-  runtime?: MemoryShellRuntime;
-  setDisplay?: (display: ShellDisplay) => void;
-};
-
-export const ShellContext: Context<ShellContextProps> = createContext<ShellContextProps>({});
-
-export const useShell = (): {
-  setLayout: ShellController['setLayout'];
-} => {
-  const client = useClient();
-  const { runtime, setDisplay } = useContext(ShellContext);
-
-  const setLayout: ShellController['setLayout'] = async (layout, options) => {
-    if (runtime) {
-      if (layout === ShellLayout.DEFAULT) {
-        setDisplay?.(ShellDisplay.NONE);
-      } else {
-        setDisplay?.(ShellDisplay.FULLSCREEN);
-      }
-
-      runtime.setLayout(layout, options);
-    }
-
-    if (client.services instanceof IFrameClientServicesProxy) {
-      await client.services.setLayout(layout, options);
-    }
-  };
-
-  return {
-    setLayout
-  };
-};
-export type ShellProviderProps = PropsWithChildren<{
-  space?: Space;
-  // TODO(wittjosiah): `deviceInvitationCode`.
-  haloInvitationCode?: string | null;
-  spaceInvitationCode?: string | null;
-  onJoinedSpace?: (spaceKey?: PublicKey) => void;
-}>;
-
-/**
- * Renders the DXOS shell and provides a way to set the layout of the shell from the rest of the app.
- */
-export const ShellProvider = ({
-  space,
-  haloInvitationCode,
-  spaceInvitationCode,
-  onJoinedSpace,
-  children
-}: ShellProviderProps) => {
-  //
-  // IFrame Shell
-  //
-
-  useEffect(() => {
-    if (client.services instanceof IFrameClientServicesProxy && onJoinedSpace) {
-      return client.services.joinedSpace.on(onJoinedSpace);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (client.services instanceof IFrameClientServicesProxy) {
-      client.services.setSpaceProvider(() => space?.key);
-    }
-  }, [space]);
-
-  //
-  // Component Shell
-  //
-
-  const client = useClient();
-  const identity = useIdentity();
-  const [display, setDisplay] = useState(
-    !identity || spaceInvitationCode || haloInvitationCode ? ShellDisplay.FULLSCREEN : ShellDisplay.NONE
-  );
-
-  const shellRuntime = useMemo(() => {
-    if (client.config.get('runtime.app.env.DX_VAULT') !== 'false') {
-      return;
-    }
-
-    if (spaceInvitationCode) {
-      return new MemoryShellRuntime({
-        layout: ShellLayout.JOIN_SPACE,
-        invitationCode: spaceInvitationCode
-      });
-    }
-
-    if (haloInvitationCode) {
-      return new MemoryShellRuntime({
-        layout: ShellLayout.INITIALIZE_IDENTITY,
-        invitationCode: haloInvitationCode
-      });
-    }
-
-    return new MemoryShellRuntime({ layout: identity ? ShellLayout.DEFAULT : ShellLayout.INITIALIZE_IDENTITY });
-  }, [client, identity, spaceInvitationCode, haloInvitationCode]);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (!space || !shellRuntime) {
-        return;
-      }
-
-      const modifier = event.ctrlKey || event.metaKey;
-      if (event.key === '>' && event.shiftKey && modifier) {
-        shellRuntime.setLayout(ShellLayout.DEVICE_INVITATIONS);
-        setDisplay(ShellDisplay.FULLSCREEN);
-      } else if (event.key === '.' && modifier) {
-        shellRuntime.setLayout(ShellLayout.SPACE_INVITATIONS, { spaceKey: space.key });
-        setDisplay(ShellDisplay.FULLSCREEN);
-      }
-    },
-    [space, shellRuntime]
-  );
-
-  useEffect(() => {
-    if (!shellRuntime) {
-      return;
-    }
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [shellRuntime, handleKeyDown]);
-
-  useEffect(() => {
-    if (!shellRuntime) {
-      return;
-    }
-
-    return shellRuntime.contextUpdate.on(({ display, spaceKey }) => {
-      setDisplay(display);
-      onJoinedSpace?.(spaceKey);
-    });
-  }, [shellRuntime]);
-
-  return (
-    <>
-      {shellRuntime && (
-        <div className={mx(display === ShellDisplay.NONE ? 'hidden' : '')}>
-          <Shell runtime={shellRuntime} origin={window.location.origin} />
-        </div>
-      )}
-
-      <ShellContext.Provider value={{ runtime: shellRuntime, setDisplay }}>{children}</ShellContext.Provider>
-    </>
-  );
-};

package/src/composites/Shell/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Shell';
-export * from './ShellContext';

package/src/composites/SpaceDialog/SpaceDialog.tsx

@@ -1,39 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Close } from '@radix-ui/react-dialog';
-import React from 'react';
-
-import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
-
-import { PanelDialog, PanelDialogProps } from '../../layouts';
-import { SpacePanel, SpacePanelProps } from '../../panels';
-
-export interface SpaceDialogProps
-  extends Omit<PanelDialogProps, 'titleId' | 'children'>,
-    Omit<SpacePanelProps, 'doneActionParent'> {}
-
-export const SpaceDialog = ({ slots, ...spacePanelProps }: SpaceDialogProps) => {
-  const titleId = useId('spaceDialog__title');
-  const themeContextValue = useThemeContext();
-
-  return (
-    <PanelDialog
-      {...{
-        slots: { ...slots, root: { onOpenChange: (open) => open || spacePanelProps.onDone?.(), ...slots?.root } },
-        titleId
-      }}
-    >
-      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
-        <SpacePanel
-          {...{
-            ...spacePanelProps,
-            titleId,
-            doneActionParent: <Close asChild />
-          }}
-        />
-      </ThemeContext.Provider>
-    </PanelDialog>
-  );
-};

package/src/composites/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './IdentityPopover';
-export * from './JoinDialog';
-export * from './Shell';
-export * from './SpaceDialog';

package/src/layouts/PanelAlertDialog/PanelAlertDialog.tsx

@@ -1,40 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as AlertDialog from '@radix-ui/react-alert-dialog';
-import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
-
-import { mx } from '@dxos/react-components';
-
-import { defaultDialogContent, defaultOverlay } from '../../styles';
-
-export interface PanelAlertDialogSlots {
-  root: ComponentPropsWithoutRef<typeof AlertDialog.Root>;
-  overlay: ComponentPropsWithoutRef<typeof AlertDialog.Overlay>;
-  content: ComponentPropsWithoutRef<typeof AlertDialog.Content>;
-  trigger: ComponentPropsWithoutRef<typeof AlertDialog.Trigger>;
-}
-
-export type PanelAlertDialogProps = PropsWithChildren<{
-  titleId: string;
-  slots?: Partial<PanelAlertDialogSlots>;
-}>;
-
-export const PanelAlertDialog = ({ titleId, slots = {}, children }: PanelAlertDialogProps) => {
-  return (
-    <AlertDialog.Root defaultOpen {...slots.root}>
-      {slots.trigger && <AlertDialog.Trigger {...slots.trigger} />}
-      <AlertDialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
-        <AlertDialog.Content
-          onEscapeKeyDown={(event) => event.preventDefault()}
-          {...slots.content}
-          aria-labelledby={titleId}
-          className={mx(defaultDialogContent, slots.content?.className)}
-        >
-          {children}
-        </AlertDialog.Content>
-      </AlertDialog.Overlay>
-    </AlertDialog.Root>
-  );
-};

package/src/layouts/PanelAlertDialog/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './PanelAlertDialog';

package/src/layouts/PanelDialog/PanelDialog.tsx

@@ -1,41 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as Dialog from '@radix-ui/react-dialog';
-import React, { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
-
-import { mx } from '@dxos/react-components';
-
-import { defaultDialogContent, defaultOverlay } from '../../styles';
-
-export interface PanelDialogSlots {
-  root: ComponentPropsWithoutRef<typeof Dialog.Root>;
-  overlay: ComponentPropsWithoutRef<typeof Dialog.Overlay>;
-  content: ComponentPropsWithoutRef<typeof Dialog.Content>;
-  trigger: ComponentPropsWithoutRef<typeof Dialog.Trigger>;
-}
-
-export type PanelDialogProps = PropsWithChildren<{
-  titleId: string;
-  slots?: Partial<PanelDialogSlots>;
-}>;
-
-export const PanelDialog = ({ titleId, slots = {}, children }: PanelDialogProps) => {
-  return (
-    <Dialog.Root defaultOpen {...slots.root}>
-      {slots.trigger && <Dialog.Trigger {...slots.trigger} />}
-      <Dialog.Overlay {...slots.overlay} className={mx(defaultOverlay, 'z-40', slots.overlay?.className)}>
-        <Dialog.Content
-          onOpenAutoFocus={(event) => event.preventDefault()}
-          onCloseAutoFocus={(event) => event.preventDefault()}
-          {...slots.content}
-          aria-labelledby={titleId}
-          className={mx(defaultDialogContent, slots.content?.className)}
-        >
-          {children}
-        </Dialog.Content>
-      </Dialog.Overlay>
-    </Dialog.Root>
-  );
-};

package/src/layouts/PanelPopover/PanelPopover.tsx

@@ -1,40 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { ComponentProps } from 'react';
-
-import { mx, Popover } from '@dxos/react-components';
-
-import { defaultSurface, defaultArrow } from '../../styles';
-
-/**
- * This component essentially sets default styles for popovers which have panels as their content
- * @param slots
- * @param children
- * @param popoverProps
- * @constructor
- */
-export const PanelPopover = ({ slots, children, ...popoverProps }: ComponentProps<typeof Popover>) => {
-  return (
-    <Popover
-      slots={{
-        arrow: { ...slots?.arrow, className: mx(defaultArrow, slots?.arrow?.className) },
-        content: {
-          collisionPadding: 8,
-          sideOffset: 4,
-          ...slots?.content,
-          className: mx(defaultSurface, slots?.content?.className)
-        },
-        trigger: {
-          ...slots?.trigger,
-          className: mx('', slots?.trigger?.className)
-        },
-        ...slots
-      }}
-      {...popoverProps}
-    >
-      {children}
-    </Popover>
-  );
-};

package/src/layouts/PanelSidebar/PanelSidebar.tsx

@@ -1,124 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import React, {
-  ComponentProps,
-  createContext,
-  Dispatch,
-  PropsWithChildren,
-  SetStateAction,
-  useCallback,
-  useContext,
-  useState
-} from 'react';
-
-import { defaultOverlay, mx, useMediaQuery, useTranslation } from '@dxos/react-components';
-
-export type PanelSidebarState = 'show' | 'hide';
-
-export interface PanelSidebarContextValue {
-  setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
-  displayState: PanelSidebarState;
-}
-
-export const PanelSidebarContext = createContext<PanelSidebarContextValue>({
-  displayState: 'hide',
-  setDisplayState: () => {}
-});
-
-export const useTogglePanelSidebar = () => {
-  const { displayState, setDisplayState } = useContext(PanelSidebarContext);
-  return useCallback(() => {
-    setDisplayState(displayState === 'hide' ? 'show' : 'hide');
-  }, [displayState]);
-};
-
-export interface PanelSidebarProviderSlots {
-  content?: ComponentProps<typeof DialogPrimitive.Content>;
-  main?: ComponentProps<'div'>;
-}
-
-export interface PanelSidebarProviderProps {
-  inlineStart?: boolean;
-  slots?: PanelSidebarProviderSlots;
-}
-
-export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => {
-  const { t } = useTranslation('os');
-  const [isLg] = useMediaQuery('lg', { ssr: false });
-  const [displayState, setInternalDisplayState] = useState<PanelSidebarState>(isLg ? 'show' : 'hide');
-  const isOpen = displayState === 'show';
-  const [transitionShow, setTransitionShow] = useState(isOpen);
-  const [domShow, setDomShow] = useState(isOpen);
-
-  const internalHide = () => {
-    setTransitionShow(false);
-    setInternalDisplayState('hide');
-    setTimeout(() => {
-      setDomShow(false);
-    }, 200);
-  };
-
-  const internalShow = () => {
-    setDomShow(true);
-    setInternalDisplayState('show');
-    setTimeout(() => {
-      setTransitionShow(true);
-      // todo (thure): this may be a race condition in certain situations
-    }, 0);
-  };
-
-  const setDisplayState = (displayState: SetStateAction<PanelSidebarState>) =>
-    displayState === 'show' ? internalShow() : internalHide();
-
-  return (
-    <PanelSidebarContext.Provider value={{ setDisplayState, displayState }}>
-      <DialogPrimitive.Root open={domShow} modal={false}>
-        {/* todo(thure): Why does DialogPrimitive.Overlay not render any element here? */}
-        {!isLg && (
-          <div
-            role='none'
-            className={mx(
-              defaultOverlay,
-              'transition-opacity duration-200 ease-in-out',
-              transitionShow ? 'opacity-100' : 'opacity-0',
-              domShow ? 'block' : 'hidden'
-            )}
-            onClick={internalHide}
-          />
-        )}
-
-        {/* Sidebar. */}
-        <DialogPrimitive.Content
-          onOpenAutoFocus={(event) => isLg && event.preventDefault()}
-          onCloseAutoFocus={(event) => isLg && event.preventDefault()}
-          {...slots?.content}
-          className={mx(
-            'fixed block-start-0 block-end-0 is-sidebar z-30 overscroll-contain overflow-x-hidden overflow-y-auto',
-            'transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
-            transitionShow ? 'inline-start-0' : '-inline-start-sidebar',
-            slots?.content?.className
-          )}
-        >
-          <DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>
-          {slots?.content?.children}
-        </DialogPrimitive.Content>
-
-        {/* Main content. */}
-        <div
-          role='none'
-          {...slots?.main}
-          className={mx(
-            'transition-[padding-inline-start] duration-200 ease-in-out',
-            isLg && isOpen ? 'pis-sidebar' : 'pis-0',
-            slots?.main?.className
-          )}
-        >
-          {children}
-        </div>
-      </DialogPrimitive.Root>
-    </PanelSidebarContext.Provider>
-  );
-};

package/src/layouts/PanelSidebar/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './PanelSidebar';