@qoretechnologies/reqraft 0.10.25 → 0.10.26

package/src/components/form/engine/variants/VariantMinimal.tsx

@@ -0,0 +1,170 @@
+/**
+ * VARIANT 4 — "Minimal" (Notion / Linear inspired)
+ *
+ * Direction: the lightest possible treatment. No surfaces, no boxes, no group
+ * panels — just a quiet `label · value` list with a hairline status tick on the
+ * left edge. TAP a row to reveal its description and edit it inline — NO hover
+ * dependency, so it behaves identically on phone. Densest of the four.
+ */
+import { ReqoreIcon, ReqoreP } from '@qoretechnologies/reqore';
+import { IQorusFormField, IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
+import React from 'react';
+import styled from 'styled-components';
+import {
+  InlineEdit,
+  STATUS_COLOR,
+  ValueView,
+  VariantToolbar,
+  useVariantColors,
+  useVariantForm,
+} from './variantParts';
+
+const Wrap = styled.div<{ $hover: string; $line: string; $faint: string }>`
+  display: flex;
+  flex-flow: column;
+  gap: 4px;
+  font-size: 13px;
+
+  .vm-group {
+    font-size: 11px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    padding: 16px 0 6px 14px;
+  }
+  .vm-row {
+    display: grid;
+    grid-template-columns: minmax(180px, 320px) minmax(0, 1fr);
+    gap: 14px;
+    align-items: baseline;
+    padding: 7px 12px 7px 14px;
+    border-left: 2px solid transparent;
+    cursor: pointer;
+    border-radius: 0 6px 6px 0;
+  }
+  .vm-row[aria-expanded='true'] {
+    background: ${({ $hover }) => $hover};
+  }
+  @media (hover: hover) {
+    .vm-row:hover {
+      background: ${({ $hover }) => $hover};
+    }
+  }
+  .vm-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+  .vm-detail {
+    grid-column: 1 / -1;
+    color: ${({ $faint }) => $faint};
+    padding: 4px 0 2px;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  @media (max-width: 620px) {
+    .vm-row {
+      grid-template-columns: 1fr;
+      gap: 2px;
+    }
+  }
+`;
+
+export const VariantMinimal = ({
+  options,
+  values,
+}: {
+  options: IQorusFormSchema;
+  values: Record<string, IQorusFormField>;
+}) => {
+  const c = useVariantColors();
+  const form = useVariantForm(options, values);
+  const s = form.summary;
+
+  return (
+    <Wrap $hover={c.hover} $line={c.line} $faint={c.faint}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          padding: '0 12px 10px',
+          borderBottom: `1px solid ${c.line}`,
+        }}
+      >
+        <span style={{ width: 8, height: 8, borderRadius: '50%', background: s.attention ? c.warning : c.success }} />
+        <ReqoreP effect={{ weight: 'bold' }}>{s.pct}%</ReqoreP>
+        <span style={{ color: c.muted, fontSize: 12 }}>{s.set}/{s.total} set</span>
+        {s.attention ?
+          <button
+            type='button'
+            onClick={form.toggleAttention}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: c.warning,
+              fontSize: 12,
+              textDecoration: 'underline',
+              textUnderlineOffset: 3,
+            }}
+          >
+            {form.filter === 'attention' ? '← all' : `${s.attention} to resolve →`}
+          </button>
+        : null}
+      </div>
+      <VariantToolbar form={form} />
+
+      {form.visibleGroups.map((g) => (
+        <React.Fragment key={g.name}>
+          <div className='vm-group' style={{ color: c.faint }}>
+            {g.label}
+          </div>
+          {g.rows.map((r) => {
+            const editing = form.editing === r.name;
+            const hasDetail = !!(r.shortDesc || r.longDesc);
+            return (
+              <div
+                key={r.name}
+                className='vm-row'
+                role='button'
+                tabIndex={0}
+                aria-expanded={editing}
+                style={{ borderLeftColor: r.status === 'set' || r.status === 'unset' ? 'transparent' : STATUS_COLOR(r.status, c) }}
+                onClick={() => !r.readOnly && form.startEdit(r.name)}
+              >
+                <span className='vm-label' style={{ color: c.text, fontWeight: 500 }}>
+                  {r.label}
+                  {r.required ?
+                    <ReqoreIcon icon='Asterisk' size='8px' style={{ color: c.danger }} />
+                  : null}
+                </span>
+                <span style={{ color: c.muted, minWidth: 0, display: 'inline-flex', alignItems: 'baseline', gap: 8 }}>
+                  <ValueView value={r.value} />
+                  {r.status === 'invalid' || r.status === 'todo' ?
+                    <span style={{ color: STATUS_COLOR(r.status, c), fontSize: 12 }}>· {r.reason}</span>
+                  : null}
+                </span>
+                {editing ?
+                  <>
+                    {hasDetail ?
+                      <div className='vm-detail'>
+                        {r.shortDesc ? <div>{r.shortDesc}</div> : null}
+                        {r.longDesc ?
+                          <div style={{ marginTop: r.shortDesc ? 4 : 0 }}>
+                            {r.longDesc.replace(/[#`*]/g, '')}
+                          </div>
+                        : null}
+                      </div>
+                    : null}
+                    <InlineEdit row={r} onDone={form.stopEdit} />
+                  </>
+                : null}
+              </div>
+            );
+          })}
+        </React.Fragment>
+      ))}
+    </Wrap>
+  );
+};

package/src/components/form/engine/variants/focusDemo.ts

@@ -0,0 +1,145 @@
+/**
+ * A richer, realistic demo schema for the Focus-Pro variant — exercises the
+ * features the basic fixture lacks: NAMED groups, a one-of REQUIRED GROUP,
+ * a complex nested hash (Show-more preview), allowed-values, files/lists, plus
+ * a mix of set / invalid / required-unset / optional states. Modelled loosely
+ * on a Qorus datasource connection config.
+ */
+import { IQorusFormField, IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
+
+export const getFocusDemoOptions = (): IQorusFormSchema =>
+  ({
+    // --- Connection -------------------------------------------------------
+    url: {
+      type: 'string',
+      ui_type: 'string',
+      display_name: 'Connection URL',
+      short_desc: 'The full datasource URL (driver://user@host:port/db).',
+      desc: 'Accepts any Qore datasource URL. Templates like `$config:db-url` are supported.',
+      group: 'connection',
+      required: true,
+      supports_templates: true,
+    },
+    port: {
+      type: 'int',
+      ui_type: 'number',
+      display_name: 'Port',
+      short_desc: 'TCP port of the database server.',
+      group: 'connection',
+      default_value: { type: 'int', value: 5432 },
+    },
+    database: {
+      type: 'string',
+      ui_type: 'string',
+      display_name: 'Database name',
+      short_desc: 'Name of the schema/database to connect to.',
+      group: 'connection',
+      required: true,
+    },
+    // --- Authentication (one-of required group) ---------------------------
+    token: {
+      type: 'string',
+      ui_type: 'string',
+      display_name: 'API token',
+      short_desc: 'Bearer token — use this OR a username/password.',
+      group: 'authentication',
+      required_groups: ['auth'],
+      supports_templates: true,
+    },
+    username: {
+      type: 'string',
+      ui_type: 'string',
+      display_name: 'Username',
+      short_desc: 'Database user — paired with a password.',
+      group: 'authentication',
+      required_groups: ['auth'],
+    },
+    password: {
+      type: 'string',
+      ui_type: 'string',
+      display_name: 'Password',
+      short_desc: 'Database password.',
+      group: 'authentication',
+      required_groups: ['auth'],
+      supports_templates: true,
+    },
+    // --- Advanced ---------------------------------------------------------
+    options: {
+      type: 'hash',
+      ui_type: 'hash',
+      display_name: 'Driver options',
+      short_desc: 'Extra key/value options passed to the driver.',
+      group: 'advanced',
+    },
+    poolSize: {
+      type: 'int',
+      ui_type: 'number',
+      display_name: 'Pool size',
+      short_desc: 'Max simultaneous connections.',
+      group: 'advanced',
+      default_value: { type: 'int', value: 10 },
+    },
+    timeout: {
+      type: 'int',
+      ui_type: 'number',
+      display_name: 'Timeout (s)',
+      short_desc: 'Connection timeout in seconds.',
+      group: 'advanced',
+    },
+    logLevel: {
+      type: 'string',
+      ui_type: 'string',
+      display_name: 'Log level',
+      short_desc: 'Verbosity of the connection log.',
+      group: 'advanced',
+      allowed_values: [
+        { value: 'error', display_name: 'Error' },
+        { value: 'info', display_name: 'Info' },
+        { value: 'debug', display_name: 'Debug' },
+      ],
+    },
+    // --- Optional (non-preselected — render in the Optional group) ---------
+    sslCert: {
+      type: 'file',
+      ui_type: 'file',
+      display_name: 'SSL certificate',
+      short_desc: 'Client certificate for mutual TLS.',
+    },
+    tags: {
+      type: 'list',
+      ui_type: 'list',
+      display_name: 'Tags',
+      short_desc: 'Free-form labels for this connection.',
+    },
+  }) as unknown as IQorusFormSchema;
+
+export const focusDemoValue: Record<string, IQorusFormField> = {
+  url: { type: 'string', value: 'pgsql://hq.qoretechnologies.com:5432/omq' },
+  // database: intentionally unset → required to-do
+  // auth group: intentionally none set → one-of unsatisfied → attention
+  options: {
+    type: 'hash',
+    value: {
+      sslmode: { type: 'string', value: 'require' },
+      application_name: { type: 'string', value: 'qorus-ide' },
+      connect_timeout: { type: 'int', value: 8 },
+    },
+  },
+  logLevel: { type: 'string', value: 'info' },
+  // timeout: invalid (entered 0)
+  timeout: { type: 'int', value: 0 as any },
+};
+
+// Demo-only invalid reasons (in the engine these come from the validity pass).
+export const focusDemoInvalid: Record<string, string> = {
+  timeout: 'Must be greater than 0',
+};
+
+// Display labels for the named groups.
+export const focusDemoGroupLabels: Record<string, string> = {
+  connection: 'Connection',
+  authentication: 'Authentication',
+  advanced: 'Advanced',
+  optional: 'Optional',
+  general: 'General',
+};

package/src/components/form/engine/variants/variantModel.ts

@@ -0,0 +1,216 @@
+/**
+ * Shared row model for the FormEngine compact VARIANTS playground.
+ *
+ * This is a prototyping harness: every variant renders the SAME normalized rows
+ * (derived from a real options schema + values via the real `readFirst`
+ * formatters) and differs only in layout / chrome / UX. That keeps the
+ * comparison about presentation, not data. Editing is intentionally stubbed
+ * (expand shows a placeholder) — the point is to compare the read-first view
+ * that currently feels crowded, then graft the winner onto the real engine.
+ */
+import { IQorusFormField, IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
+import {
+  colorToCss,
+  formatBytes,
+  formatOptionValue,
+  getFileSize,
+  getOptionGroup,
+  getOptionGroupLabel,
+  getValueType,
+  isOptionValueEmpty,
+} from '../readFirst';
+import { isValueTemplate } from '../../../../helpers/templates';
+
+export type TVariantStatus =
+  | 'set' // has a valid value
+  | 'unset' // empty, not required — calm, no alarm
+  | 'todo' // required (or required-group) but unset — gentle amber
+  | 'invalid'; // user-entered value fails validation — red (only when surfaced)
+
+export type TVariantValueKind =
+  | 'text'
+  | 'number'
+  | 'bool'
+  | 'color'
+  | 'file'
+  | 'template'
+  | 'richtext'
+  | 'hash'
+  | 'empty';
+
+export interface IVariantValue {
+  kind: TVariantValueKind;
+  /** Human-readable summary (already formatted by readFirst). */
+  display: string;
+  /** color: css color; file: size label; hash: field count; template: label */
+  extra?: string;
+}
+
+export interface IVariantRow {
+  name: string;
+  label: string;
+  shortDesc?: string;
+  longDesc?: string;
+  required: boolean;
+  readOnly: boolean;
+  status: TVariantStatus;
+  /** Short reason for todo/invalid, e.g. "Text value is empty". */
+  reason?: string;
+  value: IVariantValue;
+  typeLabel: string;
+  /** required_groups this field belongs to (one-of constraints). */
+  requiredGroups: string[];
+  /** True when this field is a member of an unsatisfied one-of group. */
+  inUnmetGroup: boolean;
+  /** Raw schema + value object — passed to AutoFormField for REAL editing. */
+  schema: any;
+  field: any;
+}
+
+export interface IVariantGroup {
+  name: string;
+  label: string;
+  rows: IVariantRow[];
+}
+
+/** One-of required group: members + whether any is filled. */
+export interface IRequiredGroupInfo {
+  key: string;
+  members: string[];
+  memberLabels: string[];
+  satisfied: boolean;
+}
+
+export interface IVariantConfig {
+  groupLabels?: Record<string, string>;
+  /** name → reason; in the engine this comes from the validity pass. */
+  invalidReasons?: Record<string, string>;
+}
+
+// Default (basic-fixture) invalid set — overridable via config.
+const DEFAULT_INVALID: Record<string, string> = {
+  optionWithInvalidValue: 'Text value is empty',
+  schemaOption: 'Hash arguments are invalid',
+};
+
+function buildValue(field: IQorusFormField | undefined, schema: any): IVariantValue {
+  if (!field || isOptionValueEmpty(field.value)) return { kind: 'empty', display: '' };
+
+  const valueType = getValueType(field, schema);
+  const formatted = formatOptionValue(field, schema);
+
+  if (valueType === 'rgbcolor') {
+    return { kind: 'color', display: formatted, extra: colorToCss(field.value) };
+  }
+  if (valueType === 'file') {
+    const size = getFileSize(field.value);
+    return {
+      kind: 'file',
+      display: formatted,
+      extra: size !== undefined ? formatBytes(size) : undefined,
+    };
+  }
+  if (valueType === 'bool' || valueType === 'boolean') {
+    return { kind: 'bool', display: formatted };
+  }
+  if (valueType === 'hash' || valueType === 'free-hash') {
+    return { kind: 'hash', display: formatted };
+  }
+  if (typeof field.value === 'string' && isValueTemplate(field.value)) {
+    // The real chip resolves the template's display name from the templates
+    // list; the prototype shows a friendly label of the key.
+    const label =
+      field.value.replace(/^\$[a-z]+:/i, '').replace(/[-_]/g, ' ') || field.value;
+    return { kind: 'template', display: label.replace(/\b\w/g, (c) => c.toUpperCase()), extra: 'local' };
+  }
+  if (valueType === 'richtext' && Array.isArray(field.value)) {
+    return { kind: 'richtext', display: formatted };
+  }
+  return { kind: 'text', display: formatted };
+}
+
+export function buildVariantGroups(
+  options: IQorusFormSchema,
+  values: Record<string, IQorusFormField>,
+  config: IVariantConfig = {}
+): { groups: IVariantGroup[]; requiredGroups: Record<string, IRequiredGroupInfo> } {
+  const invalidReasons = config.invalidReasons ?? DEFAULT_INVALID;
+  const groupMap = new Map<string, IVariantGroup>();
+
+  // Pass 1: collect one-of required-group membership + satisfaction.
+  const reqGroups: Record<string, IRequiredGroupInfo> = {};
+  Object.entries(options).forEach(([name, schema]: [string, any]) => {
+    (schema?.required_groups || []).forEach((key: string) => {
+      if (!reqGroups[key]) reqGroups[key] = { key, members: [], memberLabels: [], satisfied: false };
+      reqGroups[key].members.push(name);
+      reqGroups[key].memberLabels.push((schema?.display_name as string) || name);
+      if (!isOptionValueEmpty(values[name]?.value)) reqGroups[key].satisfied = true;
+    });
+  });
+
+  Object.entries(options).forEach(([name, schema]: [string, any]) => {
+    const field = values[name];
+    const empty = isOptionValueEmpty(field?.value);
+    const ownGroups: string[] = schema?.required_groups || [];
+    // Member of a one-of group that nobody has satisfied yet.
+    const inUnmetGroup = ownGroups.some((k) => reqGroups[k] && !reqGroups[k].satisfied);
+    const required = !!schema?.required;
+
+    let status: TVariantStatus;
+    let reason: string | undefined;
+    if (invalidReasons[name]) {
+      status = 'invalid';
+      reason = invalidReasons[name];
+    } else if (empty && required) {
+      status = 'todo';
+      reason = 'Needs a value';
+    } else if (empty && inUnmetGroup) {
+      status = 'todo';
+      reason = `One of ${reqGroups[ownGroups[0]].memberLabels.join(' / ')}`;
+    } else if (empty) {
+      status = 'unset';
+    } else {
+      status = 'set';
+    }
+
+    const groupName = getOptionGroup(schema);
+    const groupLabel = config.groupLabels?.[groupName] ?? getOptionGroupLabel(groupName, undefined);
+    if (!groupMap.has(groupName)) {
+      groupMap.set(groupName, { name: groupName, label: groupLabel, rows: [] });
+    }
+    groupMap.get(groupName)!.rows.push({
+      name,
+      label: (schema?.display_name as string) || name,
+      shortDesc: schema?.short_desc,
+      longDesc: schema?.desc,
+      required: required || ownGroups.length > 0,
+      readOnly: !!schema?.readonly,
+      status,
+      reason,
+      value: buildValue(field, schema),
+      typeLabel: `${(schema?.ui_type as string) || (schema?.type as string) || 'auto'}`,
+      requiredGroups: ownGroups,
+      inUnmetGroup,
+      schema,
+      field,
+    });
+  });
+
+  // Stable group order: 'general' first, then the rest, 'optional' last.
+  const groups = Array.from(groupMap.values()).sort((a, b) => {
+    const rank = (g: string) => (g === 'general' ? 0 : g === 'optional' ? 2 : 1);
+    return rank(a.name) - rank(b.name);
+  });
+  return { groups, requiredGroups: reqGroups };
+}
+
+export function summarize(groups: IVariantGroup[]) {
+  const rows = groups.flatMap((g) => g.rows);
+  const total = rows.length;
+  const set = rows.filter((r) => r.status === 'set').length;
+  const todo = rows.filter((r) => r.status === 'todo').length;
+  const invalid = rows.filter((r) => r.status === 'invalid').length;
+  const attention = todo + invalid;
+  const pct = total ? Math.round((set / total) * 100) : 0;
+  return { total, set, todo, invalid, attention, pct };
+}