@dxos/react-ui-form 0.8.3 → 0.8.4-main.f9ba587

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.3",
+  "version": "0.8.4-main.f9ba587",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,50 +29,48 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/debug": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/effect": "0.8.3",
-    "@dxos/echo-db": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/keys": "0.8.3",
-    "@dxos/lit-ui": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-list": "0.8.3",
-    "@dxos/react-ui-pickers": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/react-ui-tag-picker": "0.8.3",
-    "@dxos/react-ui-types": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/schema": "0.8.3"
+    "@dxos/async": "0.8.4-main.f9ba587",
+    "@dxos/debug": "0.8.4-main.f9ba587",
+    "@dxos/echo": "0.8.4-main.f9ba587",
+    "@dxos/echo-db": "0.8.4-main.f9ba587",
+    "@dxos/echo-schema": "0.8.4-main.f9ba587",
+    "@dxos/effect": "0.8.4-main.f9ba587",
+    "@dxos/invariant": "0.8.4-main.f9ba587",
+    "@dxos/keys": "0.8.4-main.f9ba587",
+    "@dxos/lit-ui": "0.8.4-main.f9ba587",
+    "@dxos/live-object": "0.8.4-main.f9ba587",
+    "@dxos/log": "0.8.4-main.f9ba587",
+    "@dxos/react-client": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-list": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-stack": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-pickers": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-types": "0.8.4-main.f9ba587",
+    "@dxos/schema": "0.8.4-main.f9ba587",
+    "@dxos/util": "0.8.4-main.f9ba587"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
     "@types/jsonpath": "^0.2.4",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.16.13",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/echo-signals": "0.8.4-main.f9ba587",
+    "@dxos/random": "0.8.4-main.f9ba587",
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
+    "@dxos/storybook-utils": "0.8.4-main.f9ba587"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "effect": "3.13.3",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -4,14 +4,14 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { StackItem } from '@dxos/react-ui-stack';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { ControlPage, ControlSection, type ControlSectionProps } from './ControlSection';
-import translations from '../../translations';
+import { translations } from '../../translations';
 
 const meta: Meta<ControlSectionProps> = {
   title: 'ui/react-ui-form/ControlSection',

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useEffect } from 'react';
 
 import { createEchoSchema } from '@dxos/live-object/testing';
@@ -14,7 +14,7 @@ import { TestSchema, testView } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { FieldEditor, type FieldEditorProps } from './FieldEditor';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { TestLayout, TestPanel, FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 // Type definition for debug objects exposed to tests.

package/src/components/Form/Form.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useCallback, useState } from 'react';
 
@@ -17,7 +17,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SelectInput } from './Defaults';
 import { Form, type FormProps } from './Form';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
 const AddressSchema = Schema.Struct({

package/src/components/Form/RefField.tsx

@@ -156,7 +156,7 @@ export const RefField = ({
             onBlur={(event) => onBlur(event as unknown as FocusEvent<HTMLElement>)}
             onUpdate={handleUpdate}
             onSearch={handleSearch}
-            classNames='rounded-sm bg-inputSurface p-1.5'
+            classNames='bg-inputSurface p-1.5 rounded-sm'
           />
         )}
       </div>

package/src/components/Form/custom/SelectOptionsInput.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useState } from 'react';
 
@@ -12,7 +12,7 @@ import { SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SelectOptionInput } from './SelectOptionsInput';
-import translations from '../../../translations';
+import { translations } from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
 import { Form } from '../Form';
 

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
 
@@ -16,7 +16,7 @@ import { ViewProjection, ViewType, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 // Type definition for debug objects exposed to tests.

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -58,7 +58,7 @@ describe('ViewEditor', () => {
 
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Wait for the changes to propagate to both UI and schema
+    // Wait for the changes to propagate to both UI and schema.
     await waitFor(() => {
       expect(screen.getByText('new_property')).toBeInTheDocument();
     });
@@ -66,18 +66,18 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains new_property
+    // Check schema contains new_property.
     const schemaProperties = debugObjects.schema.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.new_property).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();
 
-    // Check view contains new_property field
+    // Check view contains new_property field.
     const newPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'new_property');
     expect(newPropertyField).toBeDefined();
     expect(newPropertyField!.path).toBe('new_property');
 
-    // Check projection contains new_property
+    // Check projection contains new_property.
     const fieldProjections = debugObjects.projection.getFieldProjections();
     const newPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'new_property');
     expect(newPropertyProjection).toBeDefined();
@@ -88,25 +88,25 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the add property button
+    // Click the add property button.
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
-    // Fill out the property field
+    // Fill out the property field.
     const fieldInput = screen.getByPlaceholderText('Field name.');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });
 
-    // Click the format combo box and select the first option
+    // Click the format combo box and select the first option.
     const formatCombo = screen.getByRole('combobox');
     fireEvent.click(formatCombo);
 
     const firstOption = screen.getAllByRole('option')[0];
     fireEvent.click(firstOption);
 
-    // Save the changes
+    // Save the changes.
     fireEvent.click(screen.getByTestId('save-button'));
 
-    // Wait for the changes to propagate
+    // Wait for the changes to propagate.
     await waitFor(() => {
       expect(screen.getByText('added_property')).toBeInTheDocument();
     });
@@ -114,17 +114,17 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema contains added_property
+    // Check schema contains added_property.
     const schemaProperties = debugObjects.schema.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.added_property).toBeDefined();
 
-    // Check view contains added_property field
+    // Check view contains added_property field.
     const addedPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'added_property');
     expect(addedPropertyField).toBeDefined();
     expect(addedPropertyField!.path).toBe('added_property');
 
-    // Check projection contains added_property
+    // Check projection contains added_property.
     const fieldProjections = debugObjects.projection.getFieldProjections();
     const addedPropertyProjection = fieldProjections.find((proj: any) => proj.field.path === 'added_property');
     expect(addedPropertyProjection).toBeDefined();
@@ -135,7 +135,7 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Find the delete button for the 'name' property
+    // Find the delete button for the 'name' property.
     const nameProperty = screen.getByText('name');
     const propertyRow = nameProperty.closest('[role="listitem"]');
     const deleteButton = propertyRow?.querySelector('button:last-child');
@@ -144,10 +144,10 @@ describe('ViewEditor', () => {
       throw new Error('Delete button not found');
     }
 
-    // Click the delete button
+    // Click the delete button.
     fireEvent.click(deleteButton);
 
-    // Wait for the changes to propagate
+    // Wait for the changes to propagate.
     await waitFor(() => {
       expect(screen.queryByText('name')).not.toBeInTheDocument();
     });
@@ -155,16 +155,16 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check schema no longer contains the name property
+    // Check schema no longer contains the name property.
     const schemaProperties = debugObjects.schema.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();
 
-    // Check view no longer contains the name field
+    // Check view no longer contains the name field.
     const nameField = debugObjects.view.fields.find((field: any) => field.path === 'name');
     expect(nameField).toBeUndefined();
 
-    // Check projection no longer contains the name property
+    // Check projection no longer contains the name property.
     const fieldProjections = debugObjects.projection.getFieldProjections();
     const nameProjection = fieldProjections.find((proj: any) => proj.field.path === 'name');
     expect(nameProjection).toBeUndefined();
@@ -174,11 +174,11 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the first hide button
+    // Click the first hide button.
     const hideButtons = screen.getAllByTestId('hide-field-button');
     fireEvent.click(hideButtons[0]);
 
-    // Check that hiddenFields is non-empty
+    // Check that hiddenFields is non-empty.
     await waitFor(() => {
       expect(screen.getByTestId('show-field-button')).toBeInTheDocument();
     });
@@ -186,19 +186,19 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check that hiddenFields is non-empty
+    // Check that hiddenFields is non-empty.
     expect(debugObjects.view.hiddenFields).toBeDefined();
     expect(debugObjects.view.hiddenFields!.length).toBeGreaterThan(0);
 
     // Click the show button
     fireEvent.click(screen.getByTestId('show-field-button'));
 
-    // Wait for the data to update and check that hiddenFields is empty
+    // Wait for the data to update and check that hiddenFields is empty.
     await waitFor(() => {
       expect(debugObjects.view.hiddenFields!.length).toBe(0);
     });
 
-    // Also verify that the field is back in the visible fields list
+    // Also verify that the field is back in the visible fields list.
     expect(debugObjects.view.fields.length).toBeGreaterThan(0);
   });
 });

package/src/components/deprecated/Form.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { live } from '@dxos/live-object';
@@ -12,7 +12,7 @@ import { testData, TestSchema, testView, type TestType } from '@dxos/schema/test
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { DeprecatedForm, type DeprecatedFormProps } from './Form';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
 const DefaultStory = (props: DeprecatedFormProps) => (

package/src/components/testing.tsx

@@ -17,7 +17,7 @@ export const TestLayout = ({ classNames, json, children }: ThemedClassName<Props
 );
 
 export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <Card.Content classNames={[textBlockWidth, classNames]}>{children}</Card.Content>
+  <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>
 );
 
 // Symbol for accessing debug objects in tests.

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import translations from './translations';
+import { translations } from './translations';
 
 export * from './components';
 export * from './hooks';

package/src/translations.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Resource } from '@dxos/react-ui';
+
 export const translationKey = 'react-ui-form';
 
-export default [
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
@@ -75,4 +77,4 @@ export default [
       },
     },
   },
-];
+] as const satisfies Resource[];