@dxos/react-ui-form 0.9.1-main.c7dcc2e112 → 0.10.0

package/src/components/Settings/SettingsItem.tsx

@@ -1,58 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { Input, type Label, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { translationKey } from '#translations';
-
-const SETTINGS_PANEL_NAME = 'Settings.Panel';
-const SETTINGS_ITEM_NAME = 'Settings.Item';
-
-//
-// Panel (bordered card container).
-//
-
-type SettingsPanelProps = ThemedClassName<PropsWithChildren>;
-
-export const SettingsPanel = ({ classNames, children }: SettingsPanelProps) => {
-  return (
-    <div className={mx('flex flex-col gap-3 p-trim-md border border-separator rounded-sm', classNames)}>{children}</div>
-  );
-};
-
-SettingsPanel.displayName = SETTINGS_PANEL_NAME;
-
-//
-// Item (label + optional description + control, proper label semantics).
-//
-
-type SettingsItemProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root>
-      <SettingsPanel classNames='grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0'>
-        <Input.Label classNames='pb-trim-md text-base-fg text-lg md:col-span-2'>
-          {toLocalizedString(title, t)}
-        </Input.Label>
-        <Input.DescriptionAndValidation>
-          <Input.Description classNames='text-base text-description'>
-            {toLocalizedString(description, t)}
-          </Input.Description>
-        </Input.DescriptionAndValidation>
-        <div className='text-end py-1'>{children}</div>
-      </SettingsPanel>
-    </Input.Root>
-  );
-};
-
-SettingsItem.displayName = SETTINGS_ITEM_NAME;

package/src/components/Settings/SettingsSelectField.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Select } from '@dxos/react-ui';
-
-import { type SettingsFieldProps } from './SettingsFieldSet';
-
-export type SelectFieldOption = {
-  value: string;
-  label?: string;
-};
-
-export type CreateSelectFieldOptions = {
-  /** Options to display. Strings are used as both value and label. */
-  options: ReadonlyArray<string | SelectFieldOption>;
-  /** Label for the sentinel option that maps to `undefined`. Defaults to `'Default'`. Pass `null` to omit. */
-  defaultLabel?: string | null;
-};
-
-/**
- * Factory for a `SettingsFieldSet` `fieldMap` entry that renders a Select control
- * over a fixed list of options, with an optional sentinel for `undefined`.
- */
-export const createSelectField = ({
-  options,
-  defaultLabel = 'Default',
-}: CreateSelectFieldOptions): React.FC<SettingsFieldProps<string | undefined>> => {
-  const normalized = options.map((option) => (typeof option === 'string' ? { value: option, label: option } : option));
-  const hasDefault = defaultLabel !== null;
-  // Per-instance sentinel avoids collisions with real option values; empty string when the
-  // sentinel is omitted so `undefined` maps to a value Select.Root treats as "no selection".
-  const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : '';
-
-  return ({ value, onChange, readonly }) => (
-    <Select.Root
-      disabled={readonly}
-      value={value ?? sentinel}
-      onValueChange={(next) => onChange(hasDefault && next === sentinel ? undefined : next)}
-    >
-      <Select.TriggerButton disabled={readonly} />
-      <Select.Portal>
-        <Select.Content>
-          <Select.Viewport>
-            {hasDefault && <Select.Option value={sentinel}>{defaultLabel}</Select.Option>}
-            {normalized.map((option) => (
-              <Select.Option key={option.value} value={option.value}>
-                {option.label ?? option.value}
-              </Select.Option>
-            ))}
-          </Select.Viewport>
-          <Select.Arrow />
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-  );
-};

package/src/components/Settings/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Settings';
-export { type SettingsFieldMap, type SettingsFieldProps, type SettingsFieldSetProps } from './SettingsFieldSet';
-export { createSelectField, type CreateSelectFieldOptions, type SelectFieldOption } from './SettingsSelectField';

package/src/util/field-type.ts

@@ -1,60 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as SchemaAST from 'effect/SchemaAST';
-
-import { SchemaEx } from '@dxos/effect';
-
-/**
- * Detected field type for a schema property.
- */
-export type SettingsFieldType = 'boolean' | 'string' | 'number' | 'select' | 'struct';
-
-export type SelectOption = {
-  value: string | number;
-  label?: string;
-};
-
-/**
- * Detect the field type from an Effect Schema AST node.
- */
-export const detectFieldType = (ast: SchemaAST.AST): SettingsFieldType | undefined => {
-  if (SchemaEx.isLiteralUnion(ast)) {
-    return 'select';
-  }
-  if (SchemaAST.isTypeLiteral(ast)) {
-    return 'struct';
-  }
-
-  switch (ast._tag) {
-    case 'BooleanKeyword':
-      return 'boolean';
-    case 'StringKeyword':
-      return 'string';
-    case 'NumberKeyword':
-      return 'number';
-  }
-
-  return undefined;
-};
-
-/**
- * Extract select options from a literal union AST node.
- * Reads title annotations from individual literals for labels.
- */
-export const getSelectOptionsFromAst = (ast: SchemaAST.AST): SelectOption[] | undefined => {
-  if (!SchemaEx.isLiteralUnion(ast)) {
-    return undefined;
-  }
-
-  return (ast as SchemaAST.Union<SchemaAST.Literal>).types.flatMap((literalNode) => {
-    const value = literalNode.literal;
-    if (typeof value !== 'string' && typeof value !== 'number') {
-      return [];
-    }
-    const title = SchemaEx.getAnnotation<string>(SchemaAST.TitleAnnotationId, false)(literalNode);
-    const label = title ?? (typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : String(value));
-    return [{ value, label }];
-  });
-};