@dxos/react-ui-form 0.7.1-staging.599df14

package/src/translations.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const translationKey = 'react-ui-form';
+
+export default [
+  {
+    'en-US': {
+      [translationKey]: {
+        'fields label': 'Fields',
+
+        // TODO(burdon): Standardize field/property.
+        'button add property': 'Add property',
+        'field property label': 'Property',
+        'field property placeholder': 'Property name',
+        'field format label': 'Type',
+        'field path label': 'Field path',
+        'add field': 'Add field',
+        'delete field': 'Delete field',
+        'field limit reached': 'Maximum number of fields reached',
+
+        // TODO(burdon): Factor out?
+        'button cancel': 'Cancel',
+        'button save': 'Save',
+
+        // FormatEnum
+        'format boolean': 'Boolean',
+        'format currency': 'Currency',
+        'format date': 'Date',
+        'format date-time': 'DateTime',
+        'format did': 'DID',
+        'format duration': 'Duration',
+        'format email': 'Email',
+        'format formula': 'Formula',
+        'format hostname': 'Hostname',
+        'format integer': 'Integer',
+        'format json': 'JSON',
+        'format latlng': 'LatLng',
+        'format markdown': 'Markdown',
+        'format percent': 'Percent',
+        'format ref': 'Reference',
+        'format regex': 'RegExp',
+        'format string': 'String',
+        'format text': 'Long text',
+        'format time': 'Time',
+        'format timestamp': 'Timestamp',
+        'format user': 'User',
+        'format number': 'Number',
+        'format uri': 'URI',
+        'format uuid': 'UUID',
+
+        // Placeholders
+        'placeholder latitude': 'Latitude',
+        'placeholder longitude': 'Longitude',
+      },
+    },
+  },
+];

package/src/util/field.ts

@@ -0,0 +1,137 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { type ValidationError } from '@dxos/schema';
+
+/**
+ * Parse value by field value type.
+ * Used by Table, Sheet, etc.
+ * Handles various data types including booleans, numbers, dates, and strings.
+ * Returns undefined for empty or null inputs.
+ */
+export type ParseProps = {
+  type?: TypeEnum;
+  format?: FormatEnum;
+  value: any;
+};
+
+export const parseValue = ({ type, format, value }: ParseProps) => {
+  if (value === undefined || value === null || value === '') {
+    return undefined;
+  }
+
+  const parseScalar = (type?: TypeEnum) => {
+    switch (type) {
+      case TypeEnum.Boolean: {
+        if (typeof value === 'string') {
+          const lowercaseValue = value.toLowerCase();
+          if (lowercaseValue === '0' || lowercaseValue === 'false') {
+            return false;
+          } else if (lowercaseValue === '1' || lowercaseValue === 'true') {
+            return true;
+          }
+        }
+        return Boolean(value);
+      }
+
+      case TypeEnum.Number: {
+        const cleaned = typeof value === 'string' ? value.replace(/[^0-9.-]+/g, '') : value;
+        const num = Number(cleaned);
+        return Number.isNaN(num) ? null : num;
+      }
+
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value);
+
+      default: {
+        return value;
+      }
+    }
+  };
+
+  if (!format) {
+    return parseScalar(type);
+  }
+
+  switch (format) {
+    case FormatEnum.Boolean:
+      return parseScalar(TypeEnum.Boolean);
+
+    case FormatEnum.Number:
+    case FormatEnum.Percent:
+    case FormatEnum.Currency:
+      return parseScalar(TypeEnum.Number);
+
+    case FormatEnum.String:
+    case FormatEnum.Markdown: {
+      return parseScalar(TypeEnum.String);
+    }
+
+    case FormatEnum.Ref:
+      throw new Error(`unexpected format: ${FormatEnum.Ref}`);
+
+    case FormatEnum.DateTime:
+    case FormatEnum.Date:
+    case FormatEnum.Time:
+    case FormatEnum.Timestamp: {
+      const date = new Date(value as string | number);
+      return isNaN(date.getTime()) ? null : date;
+    }
+
+    default: {
+      return value;
+    }
+  }
+};
+
+// TODO(burdon): Type and format.
+export type CellClassesForFieldTypeProps = {
+  type?: TypeEnum;
+  format?: FormatEnum;
+};
+
+export const cellClassesForFieldType = ({ type, format }: CellClassesForFieldTypeProps): string[] | undefined => {
+  if (!format) {
+    switch (type) {
+      case TypeEnum.Number:
+        return ['text-right', 'font-mono'];
+      case TypeEnum.Boolean:
+        return ['text-right', 'font-mono'];
+      case TypeEnum.String:
+        return undefined;
+      case TypeEnum.Ref:
+        return undefined;
+
+      default: {
+        return undefined;
+      }
+    }
+  }
+
+  switch (format) {
+    case FormatEnum.Markdown:
+      return undefined;
+    case FormatEnum.Timestamp:
+    case FormatEnum.DateTime:
+    case FormatEnum.Date:
+    case FormatEnum.Time:
+      return ['font-mono'];
+    case FormatEnum.Currency:
+      return ['text-right'];
+    case FormatEnum.JSON:
+      return ['font-mono'];
+    default:
+      return undefined;
+  }
+};
+
+export const cellClassesForRowSelection = (selected: boolean) => (selected ? ['!bg-gridCellSelected'] : undefined);
+
+// TODO(ZaymonFC): How to do this with translations?
+export const pathNotUniqueError = (path: string): ValidationError => ({
+  path: 'path',
+  message: `'${path}' is already present`,
+});

package/src/util/formatting.ts

@@ -0,0 +1,132 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+
+type ValueFormatProps = {
+  type: TypeEnum;
+  format?: FormatEnum | undefined;
+  value: any;
+  locale?: string | undefined;
+};
+
+/**
+ * Format value by type.
+ * Used by Table, Sheet, etc.
+ */
+// TODO(burdon): Move to react-ui-form.
+// TODO(burdon): Formatting is different from kind format (e.g., percent is not a data format).
+export const formatForDisplay = ({ type, format, value, locale = undefined }: ValueFormatProps): string => {
+  const formatScalar = (type: TypeEnum) => {
+    switch (type) {
+      case TypeEnum.Boolean:
+        return (value as boolean).toLocaleString().toUpperCase();
+      case TypeEnum.Number:
+        return value.toLocaleString(locale);
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value);
+
+      default: {
+        return String(value);
+      }
+    }
+  };
+
+  if (!format) {
+    return formatScalar(type);
+  }
+
+  switch (format) {
+    case FormatEnum.Boolean: {
+      return formatScalar(TypeEnum.Boolean);
+    }
+    case FormatEnum.Number: {
+      return formatScalar(TypeEnum.Number);
+    }
+    case FormatEnum.String:
+    case FormatEnum.Ref: {
+      return formatScalar(TypeEnum.String);
+    }
+    case FormatEnum.Percent: {
+      return `${(value as number) * 100}%`;
+    }
+    case FormatEnum.Currency: {
+      // TODO(burdon): Get from property annotation.
+      return (value as number).toLocaleString(locale, {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+    }
+    case FormatEnum.DateTime:
+    case FormatEnum.Date:
+    case FormatEnum.Time: {
+      const date = new Date(value as number);
+      if (format === FormatEnum.DateTime) {
+        return date.toLocaleString(locale);
+      } else if (format === FormatEnum.Date) {
+        return date.toLocaleDateString(locale);
+      } else {
+        return date.toLocaleTimeString(locale);
+      }
+    }
+    default: {
+      if (value === null || value === 'undefined') {
+        return '';
+      }
+      return String(value);
+    }
+  }
+};
+
+export const formatForEditing = ({ type, format, value, locale = undefined }: ValueFormatProps): string => {
+  const formatScalar = (type: TypeEnum) => {
+    switch (type) {
+      case TypeEnum.Boolean:
+      case TypeEnum.Number:
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value);
+
+      default:
+        return String(value);
+    }
+  };
+
+  if (!format) {
+    return formatScalar(type);
+  }
+
+  switch (format) {
+    case FormatEnum.Boolean:
+    case FormatEnum.Number:
+    case FormatEnum.String:
+    case FormatEnum.Ref: {
+      return formatScalar(type);
+    }
+    case FormatEnum.Percent: {
+      return String(value * 100);
+    }
+    case FormatEnum.Currency: {
+      return String(value);
+    }
+    case FormatEnum.DateTime: {
+      const date = new Date(value as number);
+      return date.toISOString();
+    }
+    case FormatEnum.Date: {
+      const date = new Date(value as number);
+      return date.toISOString().split('T')[0];
+    }
+    case FormatEnum.Time: {
+      const date = new Date(value as number);
+      return date.toISOString().split('T')[1].split('.')[0];
+    }
+    default: {
+      return String(value);
+    }
+  }
+};

package/src/util/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './field';
+export * from './formatting';