@dxos/plugin-status-bar 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/StatusBarPlugin.tsx

@@ -4,19 +4,10 @@
 
 import React from 'react';
 
-import {
-  Capabilities,
-  contributes,
-  createSurface,
-  defineModule,
-  definePlugin,
-  Events,
-  Surface,
-} from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface, defineModule, definePlugin, Events } from '@dxos/app-framework';
 
-import { StatusBarActions, StatusBarPanel } from './components';
-import { VersionNumber } from './components/VersionNumber';
-import { meta, STATUS_BAR_PLUGIN } from './meta';
+import { StatusBarPanel } from './components';
+import { meta } from './meta';
 import translations from './translations';
 
 export const StatusBarPlugin = () =>
@@ -28,7 +19,7 @@ export const StatusBarPlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupSurfaces,
+      activatesOn: Events.Startup,
       activate: () =>
         contributes(Capabilities.ReactSurface, [
           createSurface({
@@ -38,18 +29,8 @@ export const StatusBarPlugin = () =>
           }),
           createSurface({
             id: meta.id,
-            role: 'status-bar--r0-footer',
-            component: () => <Surface role='status' />,
-          }),
-          createSurface({
-            id: meta.id,
-            role: 'status-bar--r1-footer',
-            component: () => <StatusBarActions />,
-          }),
-          createSurface({
-            id: `${STATUS_BAR_PLUGIN}/header-end`,
-            role: 'header-end',
-            component: () => <VersionNumber />,
+            role: 'status-bar--sidebar-footer',
+            component: () => <StatusBarPanel />,
           }),
         ]),
     }),

package/src/components/StatusBar.stories.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '@dxos/storybook-utils';
 import { StatusBar } from './StatusBar';
 
 export const DefaultStory = () => (
-  <div>
+  <StatusBar.Container>
     <StatusBar.EndContent>
       <StatusBar.Button>
         <Icon icon='ph--mailbox--regular' size={4} />
@@ -30,7 +30,7 @@ export const DefaultStory = () => (
         <StatusBar.Text>Online</StatusBar.Text>
       </StatusBar.Item>
     </StatusBar.EndContent>
-  </div>
+  </StatusBar.Container>
 );
 
 export const Default = {};

package/src/components/StatusBar.tsx

@@ -2,8 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, type ReactNode } from 'react';
+import React, { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -16,13 +17,14 @@ const StatusBarText = forwardRef<HTMLSpanElement, StatusBarTextProps>(({ classNa
   </span>
 ));
 
-type StatusBarButtonProps = ThemedClassName<ComponentPropsWithRef<'button'> & { asChild?: boolean }>;
+type StatusBarButtonProps = ThemedClassName<{ children: ReactNode; asChild?: boolean }> &
+  HTMLAttributes<HTMLButtonElement>;
 
 const StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(
   ({ classNames, children, asChild, ...props }, forwardedRef) => {
     const classes = mx(
-      'flex items-center justify-center gap-2 p-1 px-2 rounded-sm',
-      'select-none cursor-pointer dx-focus-ring text-description text-xs',
+      'flex items-center gap-2 p-1 px-2 rounded-sm',
+      'select-none cursor-pointer ch-focus-ring',
       'hover:bg-neutral-75 active:bg-neutral-150 dark:hover:bg-neutral-750 dark:active:bg-neutral-700',
       classNames,
     );
@@ -41,13 +43,13 @@ const StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(
 
 export default StatusBarButton;
 
-type StatusBarItemProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
+type StatusBarItemProps = ThemedClassName<{ children: ReactNode }> & HTMLAttributes<HTMLDivElement>;
 
 const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
   ({ classNames, children, ...props }, forwardedRef) => (
     <div
       role='menuitem'
-      className={mx('flex items-center justify-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}
+      className={mx('flex items-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}
       ref={forwardedRef}
       {...props}
     >
@@ -56,7 +58,30 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
   ),
 );
 
-type StartContentProps = ThemedClassName<PropsWithChildren<{}>>;
+type StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;
+
+// TODO(zan): tabable group with tabster.
+const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
+  ({ classNames, children }, forwardedRef) => {
+    const groupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+    return (
+      <div
+        role='menubar'
+        tabIndex={0}
+        {...groupAttrs}
+        className={mx(
+          'bs-[--statusbar-size] flex justify-end items-center gap-2 bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset',
+          classNames,
+        )}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+type StartContentProps = ThemedClassName<{ children: ReactNode }>;
 
 const StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames, children }, forwardedRef) => (
   <div role='none' className={mx('flex-grow flex items-center space-x-2', classNames)} ref={forwardedRef}>
@@ -64,7 +89,7 @@ const StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames
   </div>
 ));
 
-type EndContentProps = ThemedClassName<PropsWithChildren<{}>>;
+type EndContentProps = ThemedClassName<{ children: ReactNode }>;
 
 const EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, children }, forwardedRef) => (
   <div role='none' className={mx('flex-grow flex items-center justify-end', classNames)} ref={forwardedRef}>
@@ -73,6 +98,7 @@ const EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, ch
 ));
 
 export const StatusBar = {
+  Container: StatusBarContainer,
   Text: StatusBarText,
   Item: StatusBarItem,
   Button: StatusBarButton,

package/src/components/StatusBarPanel.tsx

@@ -5,48 +5,39 @@
 import React, { useState } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { Icon, Popover, useTranslation } from '@dxos/react-ui';
+import { Icon, Popover } from '@dxos/react-ui';
 
 import { FeedbackForm } from './FeedbackForm';
 import { StatusBar } from './StatusBar';
-import { VersionNumber } from './VersionNumber';
-import { STATUS_BAR_PLUGIN } from '../meta';
 
-export const StatusBarActions = () => {
-  const { t } = useTranslation(STATUS_BAR_PLUGIN);
+export const StatusBarPanel = () => {
   const [open, setOpen] = useState(false);
+
+  // TODO(wittjosiah): Factor out feedback and discord buttons.
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
-        <StatusBar.Button data-joyride='welcome/feedback'>
-          <Icon icon='ph--paper-plane-tilt--regular' size={4} />
-          <StatusBar.Text classNames='hidden sm:block'>{t('feedback label')}</StatusBar.Text>
-        </StatusBar.Button>
-      </Popover.Trigger>
-      {/* TODO(zan): Configure this label? */}
-      <StatusBar.Button asChild>
-        <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
-          <Icon icon='ph--discord-logo--regular' size={4} />
-          <StatusBar.Text classNames='hidden sm:block'>{t('discord label')}</StatusBar.Text>
-        </a>
-      </StatusBar.Button>
-      <VersionNumber />
-      <Popover.Portal>
-        <Popover.Content classNames='shadow-lg'>
-          <FeedbackForm onClose={() => setOpen(false)} />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
+      <StatusBar.Container>
+        <StatusBar.EndContent>
+          <Surface role='status' />
+          <Popover.Trigger asChild>
+            <StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>
+              <Icon icon='ph--paper-plane-tilt--regular' size={4} />
+              <StatusBar.Text classNames='hidden sm:block'>Feedback</StatusBar.Text>
+            </StatusBar.Button>
+          </Popover.Trigger>
+          {/* TODO(zan): Configure this label? */}
+          <StatusBar.Button aria-label='Open DXOS Discord' asChild>
+            <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
+              <Icon icon='ph--discord-logo--regular' size={4} />
+              <StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>
+            </a>
+          </StatusBar.Button>
+        </StatusBar.EndContent>
+      </StatusBar.Container>
+      <Popover.Content classNames='shadow-lg'>
+        <FeedbackForm onClose={() => setOpen(false)} />
+        <Popover.Arrow />
+      </Popover.Content>
     </Popover.Root>
   );
 };
-
-export const StatusBarPanel = () => {
-  return (
-    <>
-      <StatusBarActions />
-      <span role='separator' className='grow' />
-      <Surface role='status' />
-    </>
-  );
-};

package/src/translations.ts

@@ -14,15 +14,7 @@ type StatusBarTranslationKeys =
   | 'feedback text area placeholder'
   | 'send feedback label'
   | 'name label'
-  | 'name placeholder'
-  | 'warning title'
-  | 'technology preview message'
-  | 'learn more label'
-  | 'released message'
-  | 'see release label'
-  | 'powered by dxos message'
-  | 'discord label'
-  | 'feedback label';
+  | 'name placeholder';
 
 type RequiredTranslation = { [key in StatusBarTranslationKeys]: string };
 type TranslationEntry = { [STATUS_BAR_PLUGIN]: RequiredTranslation };
@@ -40,16 +32,8 @@ const translations: Record<Language, TranslationEntry> = {
     'email input label': 'Email',
     'email input placeholder': 'hello@example.com',
     'feedback text area label': 'Feedback',
-    'feedback text area placeholder': 'Please describe your issue or suggestion.',
+    'feedback text area placeholder': 'Found a bug? Have a suggestion? Let us know!',
     'send feedback label': 'Send Feedback',
-    '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>',
-    'discord label': 'Discord',
-    'feedback label': 'Feedback',
   }),
 };
 

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

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const VersionNumber: () => React.JSX.Element;
-//# sourceMappingURL=VersionNumber.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"VersionNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/VersionNumber.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,eAAO,MAAM,aAAa,yBAoEzB,CAAC"}

package/src/components/VersionNumber.tsx

@@ -1,86 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { formatDistance } from 'date-fns/formatDistance';
-import React from 'react';
-
-import { useConfig } from '@dxos/react-client';
-import { Link, Message, Popover, Trans, useTranslation, Icon } from '@dxos/react-ui';
-
-import { StatusBar } from './StatusBar';
-import { STATUS_BAR_PLUGIN } from '../meta';
-
-const repo = 'https://github.com/dxos/dxos';
-
-const VERSION_REGEX = /([\d.]+)/;
-
-export const VersionNumber = () => {
-  const config = useConfig();
-  const { t } = useTranslation(STATUS_BAR_PLUGIN);
-  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
-  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 (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <StatusBar.Button classNames='text-xs'>v{v}</StatusBar.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>
-              <Icon icon='ph--warning--duotone' size={6} classNames='inline mie-2' />
-              <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')}
-                <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
-              </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')}
-                  <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
-                </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>
-  );
-};