@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

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

@@ -1,382 +0,0 @@
-/**
- * VARIANT 3 — "Focus" (production-leaning)
- *
- * The original Focus structure — three expandable boxes (Needs attention / Set /
- * Optional) — with the engine's real functionality layered in:
- *  • REQUIRED (one-of) GROUPS highlighted as a "pick one" cluster in the box,
- *  • schema GROUPS as thin Minimal-style labels INSIDE the Set / Optional boxes,
- *  • a "Descriptions" toggle (short_desc under every field),
- *  • COMPLEX fields showing their nested value inline with Show-more,
- *  • real inline editing (AutoFormField) on click.
- *
- * Attention box and the rest are EXCLUSIVE: a field needing attention sits in the
- * box until resolved, then drops into Set (or Optional) below.
- */
-import { ReqoreIcon, ReqoreP } from '@qoretechnologies/reqore';
-import { IQorusFormField, IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
-import React from 'react';
-import styled from 'styled-components';
-import { IVariantGroup, IVariantRow, TVariantStatus } from './variantModel';
-import {
-  ComplexPreview,
-  InlineEdit,
-  STATUS_COLOR,
-  StatusDot,
-  TVariantForm,
-  ValueView,
-  VariantToolbar,
-  useVariantColors,
-  useVariantForm,
-} from './variantParts';
-
-const Wrap = styled.div<{ $hover: string; $faint: string }>`
-  display: flex;
-  flex-flow: column;
-  gap: 18px;
-  font-size: 13px;
-
-  .vf-row {
-    display: grid;
-    grid-template-columns: minmax(190px, 320px) minmax(0, 1fr) auto;
-    column-gap: 16px;
-    row-gap: 2px;
-    align-items: center;
-    /* Single-line rows: centre the content within the min-height. */
-    align-content: center;
-    min-height: 38px;
-    padding: 6px 12px;
-    border-radius: 8px;
-    cursor: pointer;
-  }
-  /* Rows with a description / preview / editor below: pin the name+value to the
-     top instead of centring the whole block. */
-  .vf-row.vf-tall {
-    align-content: start;
-  }
-  .vf-row:hover,
-  .vf-row[aria-expanded='true'] {
-    background: ${({ $hover }) => $hover};
-  }
-  .vf-section {
-    border-radius: 12px;
-    padding: 6px;
-  }
-  .vf-sechead {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    user-select: none;
-  }
-  .vf-grouplabel {
-    font-size: 10px;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    padding: 10px 0 2px 12px;
-  }
-  .vf-cluster {
-    border-radius: 10px;
-    padding: 4px 4px 6px;
-    margin: 2px 0;
-  }
-  .vf-desc {
-    grid-column: 1 / -1;
-    padding: 0 0 2px;
-    font-size: 12px;
-    line-height: 1.45;
-  }
-  .vf-preview {
-    grid-column: 2 / -1;
-    padding: 2px 0 4px;
-  }
-  @media (max-width: 640px) {
-    .vf-row {
-      grid-template-columns: 1fr auto;
-      grid-template-areas: 'label dot' 'value value';
-      row-gap: 2px;
-    }
-    .vf-label {
-      grid-area: label;
-    }
-    .vf-value {
-      grid-area: value;
-    }
-    .vf-dot {
-      grid-area: dot;
-    }
-    .vf-preview {
-      grid-column: 1 / -1;
-    }
-  }
-`;
-
-const Row = ({ r, form, showDesc }: { r: IVariantRow; form: TVariantForm; showDesc: boolean }) => {
-  const c = useVariantColors();
-  const editing = form.editing === r.name;
-  const isHash = r.value.kind === 'hash';
-  // A row is "tall" (has something below the name/value line) when editing, when
-  // it's a complex preview, or when descriptions are shown for it.
-  const tall = editing || isHash || (showDesc && !!r.shortDesc);
-  return (
-    <div
-      className={tall ? 'vf-row vf-tall' : 'vf-row'}
-      role='button'
-      tabIndex={0}
-      aria-expanded={editing}
-      onClick={() => !r.readOnly && form.startEdit(r.name)}
-    >
-      <span
-        className='vf-label'
-        style={{ fontWeight: 600, color: c.text, display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}
-      >
-        {r.label}
-        {r.required ?
-          <ReqoreIcon icon='Asterisk' size='9px' style={{ color: c.danger }} />
-        : null}
-      </span>
-      <span className='vf-value' style={{ color: c.muted, minWidth: 0 }}>
-        <ValueView value={r.value} />
-        {r.reason && r.status !== 'set' ?
-          <span style={{ color: STATUS_COLOR(r.status, c), fontSize: 12, marginLeft: 8 }}>
-            {r.reason}
-          </span>
-        : null}
-      </span>
-      <span className='vf-dot' style={{ display: 'inline-flex', justifyContent: 'flex-end' }}>
-        <StatusDot status={r.status} />
-      </span>
-      {showDesc && r.shortDesc && !editing ?
-        <div className='vf-desc' style={{ color: c.faint }}>
-          {r.shortDesc}
-        </div>
-      : null}
-      {isHash && !editing ?
-        <div className='vf-preview'>
-          <ComplexPreview value={r.field?.value} onOpen={() => !r.readOnly && form.startEdit(r.name)} />
-        </div>
-      : null}
-      {editing ?
-        <>
-          {r.shortDesc ? <div className='vf-desc' style={{ color: c.faint }}>{r.shortDesc}</div> : null}
-          <InlineEdit row={r} onDone={form.stopEdit} />
-        </>
-      : null}
-    </div>
-  );
-};
-
-/** A one-of required group, highlighted: "pick one of these". */
-const RequiredCluster = ({
-  rows,
-  form,
-  showDesc,
-}: {
-  rows: IVariantRow[];
-  form: TVariantForm;
-  showDesc: boolean;
-}) => {
-  const c = useVariantColors();
-  const tint = c.warning;
-  return (
-    <div className='vf-cluster' style={{ background: `${tint}10`, border: `1px solid ${tint}33` }}>
-      {/* Matches the thin group-label style (.vf-grouplabel) for compactness. */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 0 2px 12px' }}>
-        <ReqoreIcon icon='LinkM' size='11px' style={{ color: tint }} />
-        <span style={{ fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', color: tint }}>
-          One of the below is required
-        </span>
-      </div>
-      {rows.map((r) => <Row key={r.name} r={r} form={form} showDesc={showDesc} />)}
-    </div>
-  );
-};
-
-const Section = ({
-  title,
-  intent,
-  count,
-  children,
-  defaultOpen = true,
-}: {
-  title: string;
-  intent: string;
-  count: number;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-}) => {
-  const [open, setOpen] = React.useState(defaultOpen);
-  if (!count) return null;
-  return (
-    <div className='vf-section' style={{ background: `${intent}0e`, border: `1px solid ${intent}22` }}>
-      <div className='vf-sechead' onClick={() => setOpen((o) => !o)}>
-        <ReqoreIcon icon={open ? 'ArrowDownSLine' : 'ArrowRightSLine'} size='15px' />
-        <ReqoreP effect={{ weight: 'bold' }}>{title}</ReqoreP>
-        <span
-          style={{
-            background: `${intent}22`,
-            color: intent,
-            borderRadius: 20,
-            padding: '1px 9px',
-            fontSize: 12,
-            fontWeight: 700,
-          }}
-        >
-          {count}
-        </span>
-      </div>
-      {open ? <div>{children}</div> : null}
-    </div>
-  );
-};
-
-/** Rows of a given status, grouped by schema group with thin Minimal-style
- *  labels. Used inside the Set and Optional boxes. */
-const GroupedRows = ({
-  groups,
-  status,
-  skip,
-  form,
-  showDesc,
-}: {
-  groups: IVariantGroup[];
-  status: TVariantStatus;
-  skip: Set<string>;
-  form: TVariantForm;
-  showDesc: boolean;
-}) => {
-  const c = useVariantColors();
-  const sections = groups
-    .map((g) => ({ g, rows: g.rows.filter((r) => r.status === status && !skip.has(r.name)) }))
-    .filter((s) => s.rows.length);
-  return (
-    <>
-      {sections.map(({ g, rows }) => (
-        <div key={g.name}>
-          {/* only label when there's more than one group's worth, else it's noise */}
-          {sections.length > 1 ?
-            <div className='vf-grouplabel' style={{ color: c.faint }}>
-              {g.label}
-            </div>
-          : null}
-          {rows.map((r) => <Row key={r.name} r={r} form={form} showDesc={showDesc} />)}
-        </div>
-      ))}
-    </>
-  );
-};
-
-export const VariantFocus = ({
-  options,
-  values,
-  config,
-}: {
-  options: IQorusFormSchema;
-  values: Record<string, IQorusFormField>;
-  config?: any;
-}) => {
-  const c = useVariantColors();
-  const form = useVariantForm(options, values, config);
-  const s = form.summary;
-  const showDesc = form.showDescriptions;
-
-  const allRows = form.visibleGroups.flatMap((g) => g.rows);
-  const unmetGroups = Object.values(form.requiredGroups).filter((g) => !g.satisfied);
-  const unmetMembers = new Set<string>();
-  unmetGroups.forEach((g) => g.members.forEach((m) => unmetMembers.add(m)));
-
-  // Attention = invalid + individually-required-todo (NOT one-of members, which
-  // show as their cluster) + the unmet one-of clusters.
-  const attentionRows = allRows.filter(
-    (r) => (r.status === 'invalid' || r.status === 'todo') && !unmetMembers.has(r.name)
-  );
-  const attentionCount = attentionRows.length + unmetGroups.length;
-  const skip = new Set<string>(attentionRows.map((r) => r.name));
-  unmetMembers.forEach((n) => skip.add(n));
-
-  const setCount = allRows.filter((r) => r.status === 'set' && !skip.has(r.name)).length;
-  const optionalCount = allRows.filter((r) => r.status === 'unset' && !skip.has(r.name)).length;
-
-  // Group the attention items by schema group (placing each one-of cluster under
-  // its members' group) so the attention box reads like the Set / Optional boxes.
-  const clusterGroupName = (members: string[]) =>
-    form.visibleGroups.find((g) => g.rows.some((r) => r.name === members[0]))?.name;
-  const attnGroups = form.visibleGroups
-    .map((g) => ({
-      g,
-      rows: g.rows.filter(
-        (r) => (r.status === 'invalid' || r.status === 'todo') && !unmetMembers.has(r.name)
-      ),
-      clusters: unmetGroups.filter((rg) => clusterGroupName(rg.members) === g.name),
-    }))
-    .filter((x) => x.rows.length || x.clusters.length);
-
-  return (
-    <Wrap $hover={c.hover} $faint={c.faint}>
-      {/* Cards-style header */}
-      <div style={{ display: 'flex', flexFlow: 'column', gap: 10 }}>
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
-          <ReqoreP size='big' effect={{ weight: 'bold' }}>
-            {s.pct}% complete
-          </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' ? '← show all' : `${s.attention} need attention →`}
-            </button>
-          : null}
-        </div>
-        <div style={{ height: 4, borderRadius: 2, background: c.line, overflow: 'hidden', display: 'flex' }}>
-          <div style={{ width: `${(s.set / s.total) * 100}%`, background: c.success }} />
-          <div style={{ width: `${(s.attention / s.total) * 100}%`, background: c.warning }} />
-        </div>
-      </div>
-      <VariantToolbar form={form} />
-
-      {/* The signature: Needs attention / Set / Optional expandable boxes —
-          attention items grouped by schema group, like the other boxes. */}
-      <Section title='Needs attention' intent={c.warning} count={attentionCount}>
-        {attnGroups.map(({ g, rows, clusters }) => (
-          <div key={g.name}>
-            {attnGroups.length > 1 ?
-              <div className='vf-grouplabel' style={{ color: c.faint }}>
-                {g.label}
-              </div>
-            : null}
-            {clusters.map((cl) => (
-              <RequiredCluster
-                key={cl.key}
-                rows={allRows.filter((r) => cl.members.includes(r.name))}
-                form={form}
-                showDesc={showDesc}
-              />
-            ))}
-            {rows.map((r) => <Row key={r.name} r={r} form={form} showDesc={showDesc} />)}
-          </div>
-        ))}
-      </Section>
-
-      <Section title='Set' intent={c.success} count={setCount}>
-        <GroupedRows groups={form.visibleGroups} status='set' skip={skip} form={form} showDesc={showDesc} />
-      </Section>
-
-      <Section title='Optional — not set' intent={c.muted} count={optionalCount} defaultOpen={false}>
-        <GroupedRows groups={form.visibleGroups} status='unset' skip={skip} form={form} showDesc={showDesc} />
-      </Section>
-    </Wrap>
-  );
-};

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

@@ -1,170 +0,0 @@
-/**
- * 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

@@ -1,145 +0,0 @@
-/**
- * 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',
-};