@dxos/react-ui 0.1.24-next.6b1f434 → 0.1.25

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { StoryContext, StoryFn } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
-
-import { Client, Space } from '@dxos/client';
-import { TestBuilder } from '@dxos/client/testing';
-import { ClientContext } from '@dxos/react-client';
-import { Loading } from '@dxos/react-components';
-
-import { SpacePanel } from './SpacePanel';
-
-export default {
-  component: SpacePanel
-};
-
-const SpaceDecorator = (Story: StoryFn, { args }: StoryContext) => {
-  const testBuilder = new TestBuilder();
-  const [client, setClient] = useState<Client>();
-  const [space, setSpace] = useState<Space>();
-
-  useEffect(() => {
-    const timeout = setTimeout(async () => {
-      const client = new Client({ services: testBuilder.createClientServicesHost() });
-      await client.initialize();
-      setClient(client);
-
-      await client.halo.createProfile();
-      const space = await client.echo.createSpace();
-      space.properties.name = 'Q3 2022 Planning';
-
-      setSpace(space);
-    });
-
-    return () => clearTimeout(timeout);
-  }, []);
-
-  if (!client || !space) {
-    return <Loading label='Setting things up…' />;
-  }
-
-  return (
-    <ClientContext.Provider value={{ client }}>
-      <Story args={{ space, ...args }} />
-    </ClientContext.Provider>
-  );
-};
-
-export const Default = {
-  decorators: [SpaceDecorator]
-};

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -1,174 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretLeft, CaretRight, Intersect, PlusCircle, UserPlus } from 'phosphor-react';
-import React, { cloneElement, useReducer } from 'react';
-
-import { Space, SpaceMember } from '@dxos/client';
-import { useClient, useSpaceInvitations, useSpaces } from '@dxos/react-client';
-import { Button, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
-
-import { InvitationList, PanelSeparator, SpaceListItem, SpaceMemberListContainer } from '../../components';
-import { defaultSurface, subduedSurface } from '../../styles';
-
-export type SpacePanelProps = {
-  titleId?: string;
-  space?: Space;
-  initialState?: SpaceView;
-  createInvitationUrl: (invitationCode: string) => string;
-  onClickJoinSpace?: () => void;
-  onClickMember?: (member: SpaceMember) => void;
-  doneActionParent?: Parameters<typeof cloneElement>[0];
-  onDone?: (result: Space | null) => void;
-};
-
-export type SpaceView = 'current space' | 'space list';
-
-export type SpaceState = {
-  activeView: SpaceView;
-};
-
-const CurrentSpaceView = ({
-  space,
-  createInvitationUrl,
-  onClickMember,
-  onShowAll,
-  titleId
-}: { onShowAll: () => void } & SpacePanelProps) => {
-  const { t } = useTranslation('os');
-  const invitations = useSpaceInvitations(space?.key);
-  const name = space?.properties.name;
-
-  if (!space) {
-    return null;
-  }
-
-  return (
-    <div role='none' className='flex flex-col'>
-      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
-        <Tooltip content={t('show all spaces label')} zIndex='z-50'>
-          <Button compact variant='ghost' onClick={onShowAll} data-testid='show-all-spaces'>
-            <CaretLeft className={getSize(4)} weight='bold' />
-          </Button>
-        </Tooltip>
-        {/* TODO(wittjosiah): Label this as the space panel. */}
-        <h2 id={titleId} className={mx('grow font-system-medium', !name && 'font-mono')}>
-          {name ?? space.key.truncate()}
-        </h2>
-      </div>
-      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
-        <InvitationList
-          invitations={invitations}
-          onClickRemove={({ invitation }) => invitation && space?.removeInvitation(invitation.invitationId!)}
-          createInvitationUrl={createInvitationUrl}
-        />
-        <Button
-          className='is-full flex gap-2 mbs-2'
-          compact
-          onClick={() => space?.createInvitation()}
-          data-testid='create-space-invitation'
-        >
-          <span>{t('create space invitation label')}</span>
-          <UserPlus className={getSize(4)} weight='bold' />
-        </Button>
-        <PanelSeparator />
-        <SpaceMemberListContainer spaceKey={space.key} includeSelf onSelect={onClickMember} />
-      </div>
-    </div>
-  );
-};
-
-const SpaceListView = ({
-  doneActionParent,
-  onDone,
-  onClickJoinSpace,
-  onShowCurrent,
-  titleId
-}: { onShowCurrent: () => void } & SpacePanelProps) => {
-  const { t } = useTranslation('os');
-  const client = useClient();
-  const spaces = useSpaces();
-
-  const handleCreateSpace = async () => {
-    const space = await client.echo.createSpace();
-    onDone?.(space);
-  };
-
-  return (
-    <div role='none' className='flex flex-col'>
-      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
-        <h2 id={titleId} className='grow font-system-medium'>
-          {t('all spaces label')}
-        </h2>
-        <Tooltip content={t('show current space label')} zIndex='z-50'>
-          <Button compact variant='ghost' onClick={onShowCurrent} data-testid='show-current-space'>
-            <CaretRight className={getSize(4)} weight='bold' />
-          </Button>
-        </Tooltip>
-      </div>
-      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
-        <ul className='flex flex-col gap-2'>
-          {spaces.map((space) => {
-            const key = space.key.toHex();
-            const listItem = <SpaceListItem key={key} space={space} onClick={() => onDone?.(space)} />;
-            return doneActionParent ? cloneElement(doneActionParent, { key }, listItem) : listItem;
-          })}
-        </ul>
-        <Button className='is-full flex gap-2 mbs-2' compact onClick={handleCreateSpace} data-testid='create-space'>
-          <span>{t('create space label')}</span>
-          <PlusCircle className={getSize(4)} weight='bold' />
-        </Button>
-        {onClickJoinSpace && (
-          <Button
-            className='is-full flex gap-2 mbs-2'
-            compact
-            onClick={() => onClickJoinSpace?.()}
-            data-testid='join-space'
-          >
-            <span>{t('join space label')}</span>
-            <Intersect className={getSize(4)} weight='bold' />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-interface SpacePanelState {
-  activeView: SpaceView;
-}
-
-interface SpacePanelAction {
-  type: 'deselect space' | 'select space';
-}
-
-export const SpacePanel = (props: SpacePanelProps) => {
-  const reducer = (state: SpacePanelState, action: SpacePanelAction) => {
-    const nextState = { ...state };
-    switch (action.type) {
-      case 'deselect space':
-        nextState.activeView = 'space list';
-        break;
-      case 'select space':
-        nextState.activeView = 'current space';
-        break;
-    }
-    return nextState;
-  };
-
-  const [panelState, dispatch] = useReducer(reducer, {
-    activeView: props.initialState ?? 'current space'
-  });
-
-  // TODO(wittjosiah): Use ViewState or similar.
-  return (
-    <>
-      {panelState.activeView === 'current space' ? (
-        <CurrentSpaceView {...props} onShowAll={() => dispatch({ type: 'deselect space' })} />
-      ) : (
-        <SpaceListView {...props} onShowCurrent={() => dispatch({ type: 'select space' })} />
-      )}
-    </>
-  );
-};

package/src/panels/SpacePanel/index.ts

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

package/src/styles/dialogStyles.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export const defaultOverlay =
-  'fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8';
-
-export const defaultDialogContent = 'is-full min-is-[260px] max-is-[320px] rounded-md shadow-md backdrop-blur-md';