@dxos/plugin-status-bar 0.8.1-staging.391c573 → 0.8.1-staging.5be625a

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

@@ -1,3 +1,4 @@
+export * from './FeedbackForm';
 export * from './StatusBar';
 export * from './StatusBarPanel';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

package/dist/types/src/meta.d.ts

@@ -1,8 +1,4 @@
+import { type PluginMeta } from '@dxos/app-framework';
 export declare const STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
-export declare const meta: {
-    id: string;
-    name: string;
-    description: string;
-    icon: string;
-};
+export declare const meta: PluginMeta;
 //# sourceMappingURL=meta.d.ts.map

package/dist/types/src/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,eAAO,MAAM,IAAI;;;;;CAKK,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,eAAO,MAAM,IAAI,EAAE,UAKlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-status-bar",
-  "version": "0.8.1-staging.391c573",
+  "version": "0.8.1-staging.5be625a",
   "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.5be625a",
+    "@dxos/async": "0.8.1-staging.5be625a",
+    "@dxos/echo-schema": "0.8.1-staging.5be625a",
+    "@dxos/plugin-observability": "0.8.1-staging.5be625a",
+    "@dxos/react-ui-form": "0.8.1-staging.5be625a",
+    "@dxos/schema": "0.8.1-staging.5be625a",
+    "@dxos/react-client": "0.8.1-staging.5be625a"
   },
   "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.5be625a",
+    "@dxos/storybook-utils": "0.8.1-staging.5be625a",
+    "@dxos/react-ui-theme": "0.8.1-staging.5be625a"
   },
   "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-theme": "0.8.1-staging.5be625a",
+    "@dxos/react-ui": "0.8.1-staging.5be625a"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FeedbackForm.tsx

@@ -3,81 +3,77 @@
 //
 
 import { PaperPlaneTilt, X } from '@phosphor-icons/react';
-import React, { useCallback } from 'react';
+import React, { useRef } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { ObservabilityAction, UserFeedback } from '@dxos/plugin-observability/types';
+import { getSnapshot } from '@dxos/echo-schema';
+import { UserFeedback } from '@dxos/plugin-observability/types';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { useForm } from '@dxos/react-ui-form';
+import { FormProvider, useFormContext, useInputProps } 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: '' };
+const defaultValues: UserFeedback = { name: '', email: '', message: '' };
 
-export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
+const FormContent = () => {
   const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const translation = mkTranslation(t);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { handleSave, canSave } = useFormContext<UserFeedback>();
 
-  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,
-  });
+  const nameProps = useInputProps(['name']);
+  const emailProps = useInputProps(['email']);
+  const messageProps = useInputProps(['message']);
 
   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.Root validationValence={nameProps.getStatus().status}>
           <Input.Label>{translation('name label')}</Input.Label>
           <Input.TextInput
             classNames={'text-sm'}
             placeholder={translation('name placeholder')}
             autoFocus
-            {...inputProps}
+            value={nameProps.getValue() ?? ''}
+            onChange={(e) => nameProps.onValueChange('string', e.target.value)}
+            onBlur={nameProps.onBlur}
           />
           <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('name').error}</Input.Validation>
+            <Input.Validation>{nameProps.getStatus().error}</Input.Validation>
           </Input.DescriptionAndValidation>
         </Input.Root>
       </div>
 
       <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('email').status}>
+        <Input.Root validationValence={emailProps.getStatus().status}>
           <Input.Label>{translation('email input label')}</Input.Label>
           <Input.TextInput
             classNames={'text-sm'}
             placeholder={translation('email input placeholder')}
-            {...inputProps}
+            value={emailProps.getValue() ?? ''}
+            onChange={(e) => emailProps.onValueChange('string', e.target.value)}
+            onBlur={emailProps.onBlur}
           />
           <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('email').error}</Input.Validation>
+            <Input.Validation>{emailProps.getStatus().error}</Input.Validation>
           </Input.DescriptionAndValidation>
         </Input.Root>
       </div>
 
       <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('message').status}>
+        <Input.Root validationValence={messageProps.getStatus().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}
+            value={messageProps.getValue() ?? ''}
+            onChange={(e) => messageProps.onValueChange('string', e.target.value)}
+            onBlur={messageProps.onBlur}
           />
           <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('message').error}</Input.Validation>
+            <Input.Validation>{messageProps.getStatus().error}</Input.Validation>
           </Input.DescriptionAndValidation>
         </Input.Root>
       </div>
@@ -105,3 +101,17 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
     </div>
   );
 };
+
+export const FeedbackForm = ({ onSave }: { onSave: (values: UserFeedback) => void }) => {
+  const formRef = useRef<HTMLDivElement>(null);
+
+  const initialValues = getSnapshot(defaultValues);
+
+  return (
+    <FormProvider formRef={formRef} schema={UserFeedback} initialValues={initialValues} onSave={onSave}>
+      <div ref={formRef}>
+        <FormContent />
+      </div>
+    </FormProvider>
+  );
+};

package/src/components/StatusBarPanel.tsx

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { createIntent, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import { ObservabilityAction, type UserFeedback } from '@dxos/plugin-observability/types';
 import { Icon, Popover, useTranslation } from '@dxos/react-ui';
 
 import { FeedbackForm } from './FeedbackForm';
@@ -15,6 +16,16 @@ import { STATUS_BAR_PLUGIN } from '../meta';
 export const StatusBarActions = () => {
   const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const [open, setOpen] = useState(false);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  const handleSave = useCallback(
+    (values: UserFeedback) => {
+      void dispatch(createIntent(ObservabilityAction.CaptureUserFeedback, values));
+      setOpen(false);
+    },
+    [dispatch],
+  );
+
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
@@ -33,7 +44,7 @@ export const StatusBarActions = () => {
       <VersionNumber />
       <Popover.Portal>
         <Popover.Content classNames='shadow-lg'>
-          <FeedbackForm onClose={() => setOpen(false)} />
+          <FeedbackForm onSave={handleSave} />
           <Popover.Arrow />
         </Popover.Content>
       </Popover.Portal>

package/src/components/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './FeedbackForm';
 export * from './StatusBar';
 export * from './StatusBarPanel';

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;
+};