@dxos/plugin-status-bar 0.6.13 → 0.6.14-main.1366248

package/dist/types/src/components/StatusBar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM1B,wBAME;AAEF,eAAO,MAAM,MAAM,WAAY,GAAG,sBAqBjC,CAAC"}
+{"version":3,"file":"StatusBar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAO,MAAM,YAAY,yBAmBxB,CAAC;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAQhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBarPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBarPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,eAAO,MAAM,cAAc,yBA8B1B,CAAC"}

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

@@ -1,3 +1,3 @@
 export * from './StatusBar';
-export * from './StatusBarImpl';
+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,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

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

@@ -1,15 +1,9 @@
-import { type IconProps } from '@phosphor-icons/react';
-import React from 'react';
 export declare const STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
 declare const _default: {
     id: string;
-    shortId?: string;
-    name?: string;
-    description?: string;
-    homePage?: string;
-    tags?: string[];
-    iconComponent?: React.FC<IconProps>;
-    iconSymbol?: string;
+    name: string;
+    description: string;
+    icon: string;
 };
 export default _default;
 //# 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.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;;;;;;;;;;;AAE9D,wBAMG"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;;;;;;;AAE9D,wBAKuB"}

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@dxos/plugin-status-bar",
-  "version": "0.6.13",
+  "version": "0.6.14-main.1366248",
   "description": "Status bar plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
   "exports": {
     ".": {
-      "browser": "./dist/lib/browser/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs"
     },
     "./meta": {
-      "browser": "./dist/lib/browser/meta.mjs",
-      "types": "./dist/types/src/meta.d.ts"
+      "types": "./dist/types/src/meta.d.ts",
+      "browser": "./dist/lib/browser/meta.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -29,19 +30,16 @@
     "src"
   ],
   "dependencies": {
-    "@effect/schema": "^0.67.16",
+    "@effect/schema": "^0.75.1",
     "@fluentui/react-tabster": "^9.19.0",
     "@preact/signals-core": "^1.6.0",
     "@radix-ui/react-slot": "^1.0.1",
-    "effect": "^3.2.7",
+    "effect": "^3.9.1",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.13",
-    "@dxos/async": "0.6.13",
-    "@dxos/echo-schema": "0.6.13",
-    "@dxos/plugin-space": "0.6.13",
-    "@dxos/plugin-client": "0.6.13",
-    "@dxos/plugin-stack": "0.6.13",
-    "@dxos/react-client": "0.6.13"
+    "@dxos/app-framework": "0.6.14-main.1366248",
+    "@dxos/echo-schema": "0.6.14-main.1366248",
+    "@dxos/react-ui-data": "0.6.14-main.1366248",
+    "@dxos/async": "0.6.14-main.1366248"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -49,17 +47,17 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/storybook-utils": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13"
+    "vite": "5.4.7",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248",
+    "@dxos/storybook-utils": "0.6.14-main.1366248"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248"
   },
   "publishConfig": {
     "access": "public"

package/src/StatusBarPlugin.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { type PluginDefinition, type SurfaceProvides, type TranslationsProvides } from '@dxos/app-framework';
 
-import { StatusBarImpl } from './components';
+import { StatusBarPanel } from './components';
 import meta from './meta';
 import translations from './translations';
 
@@ -21,7 +21,7 @@ export const StatusBarPlugin = (): PluginDefinition<StatusBarPluginProvides> =>
         component: ({ role }) => {
           switch (role) {
             case 'status-bar': {
-              return <StatusBarImpl />;
+              return <StatusBarPanel />;
             }
           }
 

package/src/components/FeedbackForm.tsx

@@ -2,30 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { X, PaperPlaneTilt } from '@phosphor-icons/react';
+import { Schema as S } from '@effect/schema';
+import { PaperPlaneTilt, X } from '@phosphor-icons/react';
 import React, { useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
-import { S } from '@dxos/echo-schema';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
+import { useForm } from '@dxos/react-ui-data';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { useForm } from '../hooks';
 import { STATUS_BAR_PLUGIN } from '../meta';
 import { mkTranslation } from '../translations';
-import { validate } from '../util';
 
 const Email = S.String.pipe(
-  S.nonEmpty({ message: () => 'Email is required.' }),
+  S.nonEmptyString({ message: () => 'Email is required.' }),
   S.pattern(/^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i, {
     message: () => 'Invalid email address.',
   }),
 );
 
-const nonEmpty = (field: string) => S.nonEmpty({ message: () => `${field} is required.` });
+const nonEmpty = (field: string) => S.nonEmptyString({ message: () => `${field} is required.` });
 const maxLength = (field: string, length: number) => S.maxLength(length, { message: () => `${field} is too long.` });
 
-// -- Types and validation.
+// Types and validation.
 const FeedbackFormSchema = S.Struct({
   name: S.String.pipe(nonEmpty('Name'), maxLength('Name', 256)),
   email: Email.pipe(maxLength('Email', 256)),
@@ -49,16 +48,16 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
     [dispatch, onClose],
   );
 
-  const { errors, handleSubmit, canSubmit, touched, getInputProps } = useForm<FeedbackFormState>({
+  const { handleSubmit, canSubmit, getInputProps, getErrorValence, getErrorMessage } = useForm<FeedbackFormState>({
     initialValues,
-    validate: (values) => validate(FeedbackFormSchema, values),
-    onSubmit: (values) => onSubmit(values),
+    schema: FeedbackFormSchema,
+    onSubmit,
   });
 
   return (
     <div role='form' className='p-3 flex flex-col gap-2'>
       <div role='none' className='space-b-1'>
-        <Input.Root validationValence={touched.name && errors.name ? 'error' : undefined}>
+        <Input.Root validationValence={getErrorValence('name')}>
           <Input.Label>{translation('name label')}</Input.Label>
           <Input.TextInput
             classNames={'text-sm'}
@@ -67,13 +66,13 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
             {...getInputProps('name')}
           />
           <Input.DescriptionAndValidation>
-            <Input.Validation>{touched.name && errors.name}</Input.Validation>
+            <Input.Validation>{getErrorMessage('name')}</Input.Validation>
           </Input.DescriptionAndValidation>
         </Input.Root>
       </div>
 
       <div role='none' className='space-b-1'>
-        <Input.Root validationValence={touched.email && errors.email ? 'error' : undefined}>
+        <Input.Root validationValence={getErrorValence('email')}>
           <Input.Label>{translation('email input label')}</Input.Label>
           <Input.TextInput
             classNames={'text-sm'}
@@ -81,13 +80,13 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
             {...getInputProps('email')}
           />
           <Input.DescriptionAndValidation>
-            <Input.Validation>{touched.email && errors.email}</Input.Validation>
+            <Input.Validation>{getErrorMessage('email')}</Input.Validation>
           </Input.DescriptionAndValidation>
         </Input.Root>
       </div>
 
       <div role='none' className='space-b-1'>
-        <Input.Root validationValence={touched.message && errors.message ? 'error' : undefined}>
+        <Input.Root validationValence={getErrorValence('message')}>
           <Input.Label>{translation('feedback text area label')}</Input.Label>
           <Input.TextArea
             classNames={'text-sm'}
@@ -97,7 +96,7 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
             {...getInputProps('message')}
           />
           <Input.DescriptionAndValidation>
-            <Input.Validation>{touched.message && errors.message}</Input.Validation>
+            <Input.Validation>{getErrorMessage('message')}</Input.Validation>
           </Input.DescriptionAndValidation>
         </Input.Root>
       </div>

package/src/components/StatusBar.stories.tsx

@@ -4,40 +4,45 @@
 
 import '@dxos-theme';
 
-import { Mailbox, DiscordLogo, Lightning } from '@phosphor-icons/react';
+import { type Meta } from '@storybook/react';
 import React from 'react';
 
+import { Icon } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { StatusBar } from './StatusBar';
 
-export default {
-  title: 'plugin-status/StatusBar',
-  component: StatusBar,
-  actions: { argTypesRegex: '^on.*' },
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-export const Normal = (_props: any) => (
-  <>
-    <StatusBar.Container>
-      <StatusBar.EndContent>
+export const DefaultStory = () => (
+  <StatusBar.Container>
+    <StatusBar.EndContent>
+      <StatusBar.Button>
+        <Icon icon='ph--mailbox--regular' size={4} />
+        <StatusBar.Text>Quick feedback</StatusBar.Text>
+      </StatusBar.Button>
+      <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
         <StatusBar.Button>
-          <Mailbox />
-          <StatusBar.Text>Quick feedback</StatusBar.Text>
+          <Icon icon='ph--discord-logo--regular' size={4} />
+          <StatusBar.Text>Join us on Discord</StatusBar.Text>
         </StatusBar.Button>
-        <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
-          <StatusBar.Button>
-            <DiscordLogo />
-            <StatusBar.Text>Join us on Discord</StatusBar.Text>
-          </StatusBar.Button>
-        </a>
-        <StatusBar.Item>
-          <Lightning />
-          <StatusBar.Text>Online</StatusBar.Text>
-        </StatusBar.Item>
-      </StatusBar.EndContent>
-    </StatusBar.Container>
-  </>
+      </a>
+      <StatusBar.Item>
+        <Icon icon='ph--lightning--regular' size={4} />
+        <StatusBar.Text>Online</StatusBar.Text>
+      </StatusBar.Item>
+    </StatusBar.EndContent>
+  </StatusBar.Container>
 );
+
+export const Default = {};
+
+const meta: Meta<typeof StatusBar> = {
+  title: 'plugins/plugin-status/StatusBar',
+  component: StatusBar as any,
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+};
+
+export default meta;

package/src/components/StatusBar.tsx

@@ -57,9 +57,10 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
     </div>
   ),
 );
+
 type StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;
 
-// TODO(zan): tabable group with tabster
+// TODO(zan): tabable group with tabster.
 const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
   ({ classNames, children }, forwardedRef) => {
     const groupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
@@ -69,7 +70,7 @@ const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
         tabIndex={0}
         {...groupAttrs}
         className={mx(
-          'bs-[--statusbar-size] flex justify-end items-center gap-2 border-bs border-separator bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset',
+          '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}

package/src/components/{StatusBarImpl.tsx → StatusBarPanel.tsx}

@@ -2,17 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { DiscordLogo, PaperPlaneTilt } from '@phosphor-icons/react';
 import React, { useState } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { Popover } from '@dxos/react-ui';
+import { Icon, Popover } from '@dxos/react-ui';
 
 import { FeedbackForm } from './FeedbackForm';
 import { StatusBar } from './StatusBar';
 
-// TODO(wittjosiah): Rename.
-export const StatusBarImpl = () => {
+export const StatusBarPanel = () => {
   const [open, setOpen] = useState(false);
 
   // TODO(wittjosiah): Factor out feedback and discord buttons.
@@ -20,21 +18,21 @@ export const StatusBarImpl = () => {
     <Popover.Root open={open} onOpenChange={setOpen}>
       <StatusBar.Container>
         <StatusBar.EndContent>
+          <Surface role='status' />
           <Popover.Trigger asChild>
             <StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>
-              <PaperPlaneTilt />
+              <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'>
-              <DiscordLogo />
+              <Icon icon='ph--discord-logo--regular' size={4} />
               <StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>
             </a>
           </StatusBar.Button>
         </StatusBar.EndContent>
-        <Surface role='status' />
       </StatusBar.Container>
       <Popover.Content classNames='shadow-lg'>
         <FeedbackForm onClose={() => setOpen(false)} />

package/src/components/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './StatusBar';
-export * from './StatusBarImpl';
+export * from './StatusBarPanel';

package/src/meta.ts

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

package/dist/lib/browser/chunk-PL5XPTPX.mjs

@@ -1,18 +0,0 @@
-// packages/plugins/plugin-status-bar/src/meta.tsx
-import { Info } from "@phosphor-icons/react";
-import React from "react";
-import { pluginMeta } from "@dxos/app-framework";
-var STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
-var meta_default = pluginMeta({
-  id: STATUS_BAR_PLUGIN,
-  name: "Status Bar",
-  description: "Display a bar with status and actions.",
-  iconComponent: (props) => /* @__PURE__ */ React.createElement(Info, props),
-  iconSymbol: "ph--info--regular"
-});
-
-export {
-  STATUS_BAR_PLUGIN,
-  meta_default
-};
-//# sourceMappingURL=chunk-PL5XPTPX.mjs.map

package/dist/lib/browser/chunk-PL5XPTPX.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Info, type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';\n\nexport default pluginMeta({\n  id: STATUS_BAR_PLUGIN,\n  name: 'Status Bar',\n  description: 'Display a bar with status and actions.',\n  iconComponent: (props: IconProps) => <Info {...props} />,\n  iconSymbol: 'ph--info--regular',\n});\n"],
-  "mappings": ";AAIA,SAASA,YAA4B;AACrC,OAAOC,WAAW;AAElB,SAASC,kBAAkB;AAEpB,IAAMC,oBAAoB;AAEjC,IAAA,eAAeC,WAAW;EACxBC,IAAIF;EACJG,MAAM;EACNC,aAAa;EACbC,eAAe,CAACC,UAAqB,sBAAA,cAACC,MAASD,KAAAA;EAC/CE,YAAY;AACd,CAAA;",
-  "names": ["Info", "React", "pluginMeta", "STATUS_BAR_PLUGIN", "pluginMeta", "id", "name", "description", "iconComponent", "props", "Info", "iconSymbol"]
-}

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

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

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

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

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

@@ -1,2 +0,0 @@
-export * from './useForm';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/types/src/hooks/useForm.d.ts

@@ -1,36 +0,0 @@
-import { type ChangeEvent } from 'react';
-import { type ValidationError } from '../util';
-interface FormOptions<T> {
-    initialValues: T;
-    validate: (values: any) => ValidationError[] | undefined;
-    onSubmit: (values: T) => void;
-}
-/**
- * Creates a hook for managing form state, including values, validation, and submission.
- *
- * @example
- * const { values, handleChange, handleSubmit, errors, canSubmit, getInputProps } = useForm({
- *   initialValues: { name: '', email: '' },
- *   validate: (values) => { yourValidationLogic(values); },
- *   onSubmit: (values) => { submissionLogic(values); },
- * });
- */
-export declare const useForm: <T extends object>({ initialValues, validate, onSubmit }: FormOptions<T>) => {
-    values: T;
-    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleSubmit: () => void;
-    errors: Record<keyof T, string>;
-    canSubmit: boolean;
-    touched: Record<keyof T, boolean>;
-    handleBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    onValidate: (values: T) => boolean;
-    getInputProps: (key: keyof T) => {
-        name: keyof T;
-        value: T[keyof T];
-        onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-        onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-        'aria-invalid': boolean;
-    };
-};
-export {};
-//# sourceMappingURL=useForm.d.ts.map

package/dist/types/src/hooks/useForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAyB,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,WAAW,CAAC,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,yCAAyC,WAAW,CAAC,CAAC,CAAC;;0BAkBnF,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;;;;;wBAYnD,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;yBAtBvD,CAAC;yBAiDJ,MAAM,CAAC;;;0BAvCL,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;wBAYnD,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;;;CAgDnE,CAAC"}

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

@@ -1,2 +0,0 @@
-export * from './validation';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/util/validation.d.ts

@@ -1,7 +0,0 @@
-import { S } from '@dxos/echo-schema';
-export type ValidationError = {
-    path: string;
-    message: string;
-};
-export declare const validate: <T>(schema: S.Schema<T>, data: any) => ValidationError[] | undefined;
-//# sourceMappingURL=validation.d.ts.map

package/dist/types/src/util/validation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../../src/util/validation.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAEtC,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,eAAO,MAAM,QAAQ,GAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAG,KAAG,eAAe,EAAE,GAAG,SAWhF,CAAC"}

package/src/hooks/index.ts

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

package/src/hooks/useForm.ts

@@ -1,119 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-import { type ChangeEvent, useCallback, useState } from 'react';
-
-import { type ValidationError } from '../util';
-
-// TODO(Zan): This module will be generally useful and we should factor it out after the
-// API crystallizes a bit more.
-
-interface FormOptions<T> {
-  initialValues: T;
-  validate: (values: any) => ValidationError[] | undefined;
-  onSubmit: (values: T) => void;
-}
-
-/**
- * Creates a hook for managing form state, including values, validation, and submission.
- *
- * @example
- * const { values, handleChange, handleSubmit, errors, canSubmit, getInputProps } = useForm({
- *   initialValues: { name: '', email: '' },
- *   validate: (values) => { yourValidationLogic(values); },
- *   onSubmit: (values) => { submissionLogic(values); },
- * });
- */
-export const useForm = <T extends object>({ initialValues, validate, onSubmit }: FormOptions<T>) => {
-  const [values, setValues] = useState<T>(initialValues);
-  const [errors, setErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);
-  const [touched, setTouched] = useState<Record<keyof T, boolean>>(
-    Object.keys(initialValues).reduce((acc, key) => ({ ...acc, [key]: false }), {} as Record<keyof T, boolean>),
-  );
-
-  const runValidation = useCallback(
-    (values: T) => {
-      const validationErrors = validate(values);
-      setErrors(collapseErrorArray(validationErrors ?? []));
-
-      return validationErrors === undefined;
-    },
-    [validate],
-  );
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name, value } = event.target;
-      const newValues = { ...values, [name]: value };
-      setValues(newValues);
-      runValidation(newValues);
-    },
-    [values, runValidation],
-  );
-
-  const touchAll = useCallback(() => setTouched(mkAllTouched(values)), [values, setTouched]);
-
-  const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name } = event.target;
-      setTouched((touched) => ({ ...touched, [name]: true }));
-
-      // TODO(Zan): This should be configurable behavior.
-      if (event.relatedTarget?.getAttribute('type') === 'submit') {
-        // NOTE: We do this here instead of onSubmit, because the blur event is triggered before the submit event
-        //       and results in the submit button being disabled when the form is invalid.
-        touchAll();
-      }
-
-      runValidation(values);
-    },
-    [runValidation, values, touchAll],
-  );
-
-  const handleSubmit = useCallback(() => {
-    if (runValidation(values)) {
-      onSubmit(values);
-    }
-  }, [values, runValidation, onSubmit]);
-
-  // NOTE: We can submit if there is no touched field that has an error.
-  // - Basically, if there's a validation message present in the form, submit should be disabled.
-  const canSubmit = Object.keys(values).every((key) => touched[key as keyof T] === false || !errors[key as keyof T]);
-
-  const getInputProps = useCallback(
-    (key: keyof T) => ({
-      name: key,
-      value: values[key],
-      onChange: handleChange,
-      onBlur: handleBlur,
-      'aria-invalid': errors[key] !== undefined,
-    }),
-    [values, handleChange, handleBlur, errors],
-  );
-
-  return {
-    values,
-    handleChange,
-    handleSubmit,
-    errors,
-    canSubmit,
-    touched,
-    handleBlur,
-    onValidate: runValidation,
-    getInputProps,
-  };
-};
-
-const mkAllTouched = <T extends Record<keyof T, any>>(values: T) => {
-  return Object.keys(values).reduce((acc, key) => ({ ...acc, [key]: true }), {} as Record<keyof T, boolean>);
-};
-
-const collapseErrorArray = <T>(errors: ValidationError[]) =>
-  errors.reduce(
-    (acc, { path, message }) => {
-      // TODO(Zan): This won't play well with nesting.
-      acc[path as keyof T] = message;
-      return acc;
-    },
-    {} as Record<keyof T, string>,
-  );