@dxos/plugin-status-bar 0.6.8-main.046e6cf

package/src/hooks/useForm.ts

@@ -0,0 +1,119 @@
+//
+// 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>,
+  );

package/src/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StatusBarPlugin } from './StatusBarPlugin';
+
+export default StatusBarPlugin;
+
+export * from './StatusBarPlugin';
+export * from './components';

package/src/meta.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Info, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';
+
+export default pluginMeta({
+  id: STATUS_BAR_PLUGIN,
+  name: 'Status Bar',
+  description: 'Display a bar with status and actions.',
+  iconComponent: (props: IconProps) => <Info {...props} />,
+  iconSymbol: 'ph--info--regular',
+});

package/src/translations.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type useTranslation } from '@dxos/react-ui';
+
+import { STATUS_BAR_PLUGIN } from './meta';
+
+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';
+
+type RequiredTranslation = { [key in StatusBarTranslationKeys]: string };
+type TranslationEntry = { [STATUS_BAR_PLUGIN]: RequiredTranslation };
+type Language = string;
+
+// -- helpers.
+const entry = (translation: RequiredTranslation): TranslationEntry => ({ [STATUS_BAR_PLUGIN]: translation });
+export const mkTranslation = (t: ReturnType<typeof useTranslation>['t']) => (key: StatusBarTranslationKeys) => 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': 'Found a bug? Have a suggestion? Let us know!',
+    'send feedback label': 'Send Feedback',
+  }),
+};
+
+export default [translations];

package/src/util/index.ts

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

package/src/util/validation.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { ArrayFormatter } from '@effect/schema';
+import { Effect } from 'effect';
+
+import { S } from '@dxos/echo-schema';
+
+export type ValidationError = { path: string; message: string };
+
+export const validate = <T>(schema: S.Schema<T>, data: any): ValidationError[] | undefined => {
+  const validator = S.decodeUnknownEither(schema, { errors: 'all' });
+  const result = validator(data);
+
+  if (result._tag === 'Left') {
+    const errors = Effect.runSync(ArrayFormatter.formatError(result.left));
+    // TODO(Zan): Path.join is an assumption...
+    return errors.map(({ message, path }) => ({ message, path: path.join('.') }));
+  }
+
+  return undefined;
+};