@dxos/react-ui-form 0.8.0 → 0.8.1-main.a06ad20

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

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE9C,wBA4DE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE9C,wBA6DE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.0",
+  "version": "0.8.1-main.a06ad20",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,51 +25,49 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@effect/schema": "^0.75.5",
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.0",
-    "@dxos/echo-schema": "0.8.0",
-    "@dxos/debug": "0.8.0",
-    "@dxos/echo-db": "0.8.0",
-    "@dxos/invariant": "0.8.0",
-    "@dxos/keys": "0.8.0",
-    "@dxos/live-object": "0.8.0",
-    "@dxos/log": "0.8.0",
-    "@dxos/effect": "0.8.0",
-    "@dxos/react-ui-list": "0.8.0",
-    "@dxos/react-client": "0.8.0",
-    "@dxos/react-ui-pickers": "0.8.0",
-    "@dxos/react-ui-types": "0.8.0",
-    "@dxos/schema": "0.8.0",
-    "@dxos/util": "0.8.0"
+    "@dxos/async": "0.8.1-main.a06ad20",
+    "@dxos/debug": "0.8.1-main.a06ad20",
+    "@dxos/echo-db": "0.8.1-main.a06ad20",
+    "@dxos/echo-schema": "0.8.1-main.a06ad20",
+    "@dxos/invariant": "0.8.1-main.a06ad20",
+    "@dxos/keys": "0.8.1-main.a06ad20",
+    "@dxos/effect": "0.8.1-main.a06ad20",
+    "@dxos/live-object": "0.8.1-main.a06ad20",
+    "@dxos/log": "0.8.1-main.a06ad20",
+    "@dxos/react-client": "0.8.1-main.a06ad20",
+    "@dxos/react-ui-list": "0.8.1-main.a06ad20",
+    "@dxos/react-ui-pickers": "0.8.1-main.a06ad20",
+    "@dxos/schema": "0.8.1-main.a06ad20",
+    "@dxos/util": "0.8.1-main.a06ad20",
+    "@dxos/react-ui-types": "0.8.1-main.a06ad20"
   },
   "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.12.3",
+    "effect": "3.13.3",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.0",
-    "@dxos/random": "0.8.0",
-    "@dxos/react-ui-syntax-highlighter": "0.8.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/storybook-utils": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0"
+    "@dxos/echo-signals": "0.8.1-main.a06ad20",
+    "@dxos/random": "0.8.1-main.a06ad20",
+    "@dxos/react-ui": "0.8.1-main.a06ad20",
+    "@dxos/react-ui-syntax-highlighter": "0.8.1-main.a06ad20",
+    "@dxos/react-ui-theme": "0.8.1-main.a06ad20",
+    "@dxos/storybook-utils": "0.8.1-main.a06ad20"
   },
   "peerDependencies": {
-    "@effect/schema": "^0.75.5",
     "@phosphor-icons/react": "^2.1.5",
-    "effect": "^3.12.3",
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0"
+    "@dxos/react-ui": "0.8.1-main.a06ad20",
+    "@dxos/react-ui-theme": "0.8.1-main.a06ad20"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ViewEditor/ViewEditor.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { AST, Format, type EchoSchema, S } from '@dxos/echo-schema';
+import { AST, Format, type EchoSchema, S, type JsonProp } from '@dxos/echo-schema';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
@@ -88,6 +88,16 @@ export const ViewEditor = ({
     setField(field);
   }, [view]);
 
+  const handleDelete = useCallback(
+    (fieldId: string) => {
+      if (fieldId === field?.id) {
+        setField(undefined);
+      }
+      onDelete(fieldId);
+    },
+    [onDelete, field],
+  );
+
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
@@ -101,6 +111,24 @@ export const ViewEditor = ({
 
   const handleClose = useCallback(() => setField(undefined), []);
 
+  const hiddenProperties = projection.getHiddenProperties();
+
+  const handleHide = useCallback(
+    (fieldId: string) => {
+      setField(undefined);
+      projection.hideFieldProjection(fieldId);
+    },
+    [projection],
+  );
+
+  const handleShow = useCallback(
+    (property: string) => {
+      setField(undefined);
+      projection.showFieldProjection(property as JsonProp);
+    },
+    [projection],
+  );
+
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
       <Form<ViewMetaType> autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
@@ -131,13 +159,54 @@ export const ViewEditor = ({
                   <List.Item<FieldType> key={field.id} item={field} classNames={mx(grid, ghostHover, 'cursor-pointer')}>
                     <List.ItemDragHandle />
                     <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
-                    <List.ItemDeleteButton disabled={view.fields.length <= 1} onClick={() => onDelete(field.id)} />
+                    <div className='flex items-center gap-2 -ml-4'>
+                      <List.ItemButton
+                        icon='ph--eye-slash--regular'
+                        disabled={view.fields.length <= 1}
+                        onClick={() => handleHide(field.id)}
+                      />
+                      <List.ItemDeleteButton
+                        icon='ph--trash--regular'
+                        disabled={view.fields.length <= 1}
+                        onClick={() => handleDelete(field.id)}
+                      />
+                    </div>
                   </List.Item>
                 ))}
               </div>
             </>
           )}
         </List.Root>
+
+        {hiddenProperties.length > 0 && (
+          <div>
+            <div role='none' className='p-2'>
+              <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
+            </div>
+
+            <List.Root<string>
+              items={hiddenProperties}
+              isItem={(item): item is string => typeof item === 'string'}
+              getId={(property) => property}
+            >
+              {({ items: properties }) => (
+                <div role='list' className='flex flex-col w-full'>
+                  {properties?.map((property) => (
+                    <List.Item<string>
+                      key={property}
+                      item={property}
+                      classNames={mx(grid, ghostHover, 'cursor-pointer')}
+                    >
+                      <div />
+                      <List.ItemTitle>{property}</List.ItemTitle>
+                      <List.ItemButton icon='ph--eye--regular' onClick={() => handleShow(property)} />
+                    </List.Item>
+                  ))}
+                </div>
+              )}
+            </List.Root>
+          </div>
+        )}
       </div>
 
       {field && (

package/src/components/deprecated/Form.tsx

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option, pipe } from 'effect';
+import { SchemaAST as AST, type Schema as S, Option, pipe } from 'effect';
 import React, { useState } from 'react';
 
-import { AST, type S, findProperty } from '@dxos/effect';
+import { findProperty } from '@dxos/effect';
 import { Input, type ThemedClassName, type TextInputProps as NativeTextInputProps } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { type ViewType, getFieldValue, setFieldValue } from '@dxos/schema';

package/src/hooks/useForm.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
+import { SchemaAST as AST, type Schema as S } from 'effect';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
-import { AST, type S, type SimpleType, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
+import { type SimpleType, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { validateSchema, type ValidationError } from '@dxos/schema';

package/src/translations.ts

@@ -9,6 +9,7 @@ export default [
     'en-US': {
       [translationKey]: {
         'fields label': 'Fields',
+        'hidden fields label': 'Hidden Fields',
 
         // TODO(burdon): Standardize field/property.
         'button add property': 'Add property',