@dxos/plugin-status-bar 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-status-bar",
-  "version": "0.8.1-staging.391c573",
+  "version": "0.8.1-staging.97aedb1",
   "description": "Status bar plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,13 +30,13 @@
     "date-fns": "^3.3.1",
     "effect": "3.13.3",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.8.1-staging.391c573",
-    "@dxos/async": "0.8.1-staging.391c573",
-    "@dxos/echo-schema": "0.8.1-staging.391c573",
-    "@dxos/plugin-observability": "0.8.1-staging.391c573",
-    "@dxos/react-client": "0.8.1-staging.391c573",
-    "@dxos/react-ui-form": "0.8.1-staging.391c573",
-    "@dxos/schema": "0.8.1-staging.391c573"
+    "@dxos/app-framework": "0.8.1-staging.97aedb1",
+    "@dxos/async": "0.8.1-staging.97aedb1",
+    "@dxos/echo-schema": "0.8.1-staging.97aedb1",
+    "@dxos/plugin-observability": "0.8.1-staging.97aedb1",
+    "@dxos/react-client": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-form": "0.8.1-staging.97aedb1",
+    "@dxos/schema": "0.8.1-staging.97aedb1"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -45,16 +45,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.1-staging.391c573",
-    "@dxos/react-ui-theme": "0.8.1-staging.391c573",
-    "@dxos/storybook-utils": "0.8.1-staging.391c573"
+    "@dxos/react-ui": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-theme": "0.8.1-staging.97aedb1",
+    "@dxos/storybook-utils": "0.8.1-staging.97aedb1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1-staging.391c573",
-    "@dxos/react-ui-theme": "0.8.1-staging.391c573"
+    "@dxos/react-ui": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-theme": "0.8.1-staging.97aedb1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/StatusBarPanel.tsx

@@ -7,7 +7,6 @@ import React, { useState } from 'react';
 import { Surface } from '@dxos/app-framework';
 import { Icon, Popover, useTranslation } from '@dxos/react-ui';
 
-import { FeedbackForm } from './FeedbackForm';
 import { StatusBar } from './StatusBar';
 import { VersionNumber } from './VersionNumber';
 import { STATUS_BAR_PLUGIN } from '../meta';
@@ -15,14 +14,9 @@ import { STATUS_BAR_PLUGIN } from '../meta';
 export const StatusBarActions = () => {
   const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const [open, setOpen] = useState(false);
+
   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'>
@@ -30,13 +24,13 @@ export const StatusBarActions = () => {
           <StatusBar.Text classNames='hidden sm:block'>{t('discord label')}</StatusBar.Text>
         </a>
       </StatusBar.Button>
+      <StatusBar.Button asChild>
+        <a href='https://github.com/dxos/dxos' target='_blank' rel='noopener noreferrer'>
+          <Icon icon='ph--github-logo--regular' size={4} />
+          <StatusBar.Text classNames='hidden sm:block'>{t('github label')}</StatusBar.Text>
+        </a>
+      </StatusBar.Button>
       <VersionNumber />
-      <Popover.Portal>
-        <Popover.Content classNames='shadow-lg'>
-          <FeedbackForm onClose={() => setOpen(false)} />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
     </Popover.Root>
   );
 };

package/src/meta.ts

@@ -6,9 +6,9 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';
 
-export const meta = {
+export const meta: PluginMeta = {
   id: STATUS_BAR_PLUGIN,
   name: 'Status Bar',
   description: 'Display a bar with status and actions.',
   icon: 'ph--info--regular',
-} satisfies PluginMeta;
+};

package/src/translations.ts

@@ -6,15 +6,10 @@ import { type useTranslation } from '@dxos/react-ui';
 
 import { STATUS_BAR_PLUGIN } from './meta';
 
+// TODO(wittjosiah): There's got to be a better way to do typesafe translations, this is too much boilerplate.
+
 type StatusBarTranslationKeys =
   | 'plugin name'
-  | 'email input label'
-  | 'email input placeholder'
-  | 'feedback text area label'
-  | 'feedback text area placeholder'
-  | 'send feedback label'
-  | 'name label'
-  | 'name placeholder'
   | 'warning title'
   | 'technology preview message'
   | 'learn more label'
@@ -22,6 +17,7 @@ type StatusBarTranslationKeys =
   | 'see release label'
   | 'powered by dxos message'
   | 'discord label'
+  | 'github label'
   | 'feedback label';
 
 type RequiredTranslation = { [key in StatusBarTranslationKeys]: string };
@@ -35,13 +31,6 @@ export const mkTranslation = (t: ReturnType<typeof useTranslation>['t']) => (key
 const translations: Record<Language, TranslationEntry> = {
   'en-US': entry({
     'plugin name': 'Status Bar',
-    'name label': 'Name',
-    'name placeholder': 'Preferred name',
-    '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.',
-    'send feedback label': 'Send Feedback',
     'warning title': 'WARNING',
     'technology preview message': 'Composer is currently in beta.',
     'learn more label': 'Learn more',
@@ -49,6 +38,7 @@ const translations: Record<Language, TranslationEntry> = {
     'see release label': 'See release on GitHub',
     'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
     'discord label': 'Discord',
+    'github label': 'GitHub',
     'feedback label': 'Feedback',
   }),
 };

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const FeedbackForm: ({ onClose }: {
-    onClose: () => void;
-}) => React.JSX.Element;
-//# sourceMappingURL=FeedbackForm.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FeedbackForm.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackForm.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAa3C,eAAO,MAAM,YAAY,gBAAiB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,sBAwFhE,CAAC"}

package/src/components/FeedbackForm.tsx

@@ -1,107 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { PaperPlaneTilt, X } from '@phosphor-icons/react';
-import React, { useCallback } from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { ObservabilityAction, UserFeedback } from '@dxos/plugin-observability/types';
-import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { useForm } from '@dxos/react-ui-form';
-import { getSize } from '@dxos/react-ui-theme';
-
-import { STATUS_BAR_PLUGIN } from '../meta';
-import { mkTranslation } from '../translations';
-
-const initialValues: UserFeedback = { name: '', email: '', message: '' };
-
-export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
-  const { t } = useTranslation(STATUS_BAR_PLUGIN);
-  const translation = mkTranslation(t);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const onSave = useCallback(
-    (values: UserFeedback) => {
-      void dispatch(createIntent(ObservabilityAction.CaptureUserFeedback, values));
-      onClose();
-    },
-    [dispatch, onClose],
-  );
-
-  const { handleSave, canSave, getStatus, ...inputProps } = useForm<UserFeedback>({
-    initialValues,
-    schema: UserFeedback,
-    onSave,
-  });
-
-  return (
-    <div role='form' className='p-3 flex flex-col gap-2'>
-      <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('name').status}>
-          <Input.Label>{translation('name label')}</Input.Label>
-          <Input.TextInput
-            classNames={'text-sm'}
-            placeholder={translation('name placeholder')}
-            autoFocus
-            {...inputProps}
-          />
-          <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('name').error}</Input.Validation>
-          </Input.DescriptionAndValidation>
-        </Input.Root>
-      </div>
-
-      <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('email').status}>
-          <Input.Label>{translation('email input label')}</Input.Label>
-          <Input.TextInput
-            classNames={'text-sm'}
-            placeholder={translation('email input placeholder')}
-            {...inputProps}
-          />
-          <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('email').error}</Input.Validation>
-          </Input.DescriptionAndValidation>
-        </Input.Root>
-      </div>
-
-      <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('message').status}>
-          <Input.Label>{translation('feedback text area label')}</Input.Label>
-          <Input.TextArea
-            classNames={'text-sm'}
-            rows={5}
-            cols={30}
-            placeholder={translation('feedback text area placeholder')}
-            {...inputProps}
-          />
-          <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('message').error}</Input.Validation>
-          </Input.DescriptionAndValidation>
-        </Input.Root>
-      </div>
-
-      <div role='none' className='space-b-2'>
-        <Button
-          type='submit'
-          variant='primary'
-          classNames='is-full flex gap-2'
-          disabled={!canSave}
-          onClick={handleSave}
-        >
-          <span>{translation('send feedback label')}</span>
-          <div className='grow' />
-          <PaperPlaneTilt className={getSize(5)} />
-        </Button>
-        <Popover.Close asChild>
-          <Button classNames='is-full flex gap-2'>
-            <span>{t('cancel label', { ns: 'os' })}</span>
-            <div className='grow' />
-            <X className={getSize(5)} />
-          </Button>
-        </Popover.Close>
-      </div>
-    </div>
-  );
-};