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

package/src/components/form/engine/variants/FormEngineVariants.stories.tsx

@@ -1,159 +0,0 @@
-import { ReqoreP, ReqorePanel } from '@qoretechnologies/reqore';
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { IQorusFormField } from '@qoretechnologies/ts-toolkit';
-import { basicFormValue, getBasicFormOptions } from '../__fixtures__/basicFormOptions';
-import {
-  focusDemoGroupLabels,
-  focusDemoInvalid,
-  focusDemoValue,
-  getFocusDemoOptions,
-} from './focusDemo';
-import { VariantCalmTable } from './VariantCalmTable';
-import { VariantCards } from './VariantCards';
-import { VariantFocus } from './VariantFocus';
-import { VariantMinimal } from './VariantMinimal';
-
-/**
- * VARIANTS PLAYGROUND for the compact FormEngine read-first view.
- * All four render the SAME schema + values as `Form/Engine/FormEngine › Basic`
- * (the reference screenshot), so the comparison is purely about layout / chrome
- * / UX. Resize the Storybook viewport (or the canvas) to ~390px to check phone.
- * See design/FORM_ENGINE_COMPACT_UX_PLAN.md for the rationale behind each.
- */
-const options = getBasicFormOptions();
-
-// Merge declared default_values into the values map so "set via default" fields
-// (number=42, bool=true, the file) render as set — matching the real engine.
-const values: Record<string, IQorusFormField> = (() => {
-  const merged: Record<string, IQorusFormField> = { ...(basicFormValue as any) };
-  Object.entries(options).forEach(([name, schema]: [string, any]) => {
-    if (!merged[name] && schema?.default_value) merged[name] = schema.default_value;
-  });
-  return merged;
-})();
-
-// Fill the available width (the IDE form panel context); no artificial cap.
-// Focus uses the richer demo schema (named groups, a one-of required group,
-// complex nested fields) to show full engine parity.
-const focusOptions = getFocusDemoOptions();
-const focusValues: Record<string, IQorusFormField> = (() => {
-  const merged: Record<string, IQorusFormField> = { ...focusDemoValue };
-  Object.entries(focusOptions).forEach(([name, schema]: [string, any]) => {
-    if (!merged[name] && schema?.default_value) merged[name] = schema.default_value;
-  });
-  return merged;
-})();
-const focusConfig = { groupLabels: focusDemoGroupLabels, invalidReasons: focusDemoInvalid };
-
-const Frame = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ width: '100%', padding: '16px 32px', boxSizing: 'border-box' }}>{children}</div>
-);
-
-const meta = {
-  title: 'Form/Engine/FormEngine Variants',
-  parameters: { layout: 'fullscreen', chromatic: { viewports: [1440, 390] } },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const V1CalmTable: Story = {
-  name: '1 · Calm Table',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the "Calm Table" compact-form variant over the shared basic schema — one of four visual candidates for the read-first FormEngine view.',
-      },
-    },
-  },
-  render: () => (
-    <Frame>
-      <VariantCalmTable options={options} values={values} />
-    </Frame>
-  ),
-};
-
-export const V2Cards: Story = {
-  name: '2 · Cards',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the "Cards" compact-form variant over the shared basic schema — each field group is a card so the presentation reads as chunked panels.',
-      },
-    },
-  },
-  render: () => (
-    <Frame>
-      <VariantCards options={options} values={values} />
-    </Frame>
-  ),
-};
-
-export const V3Focus: Story = {
-  name: '3 · Focus',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the "Focus" compact-form variant over the richer focus-demo schema (named groups, required-group choices) so the variant is compared under full engine parity.',
-      },
-    },
-  },
-  render: () => (
-    <Frame>
-      <VariantFocus options={focusOptions} values={focusValues} config={focusConfig} />
-    </Frame>
-  ),
-};
-
-export const V4Minimal: Story = {
-  name: '4 · Minimal',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the "Minimal" compact-form variant over the shared basic schema — the sparest of the four candidates, only labels and values.',
-      },
-    },
-  },
-  render: () => (
-    <Frame>
-      <VariantMinimal options={options} values={values} />
-    </Frame>
-  ),
-};
-
-/** All four stacked, labelled — for a quick scroll-through comparison. */
-export const CompareAll: Story = {
-  name: '★ Compare all',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders all four compact-form variants stacked in a single scroll — the Calm Table, Cards, Focus and Minimal layouts sit under labelled panels so they can be compared side by side.',
-      },
-    },
-  },
-  render: () => {
-    const items: [string, React.ReactNode][] = [
-      ['1 · Calm Table', <VariantCalmTable key='v1' options={options} values={values} />],
-      ['2 · Cards', <VariantCards key='v2' options={options} values={values} />],
-      ['3 · Focus', <VariantFocus key='v3' options={focusOptions} values={focusValues} config={focusConfig} />],
-      ['4 · Minimal', <VariantMinimal key='v4' options={options} values={values} />],
-    ];
-    return (
-      <div style={{ maxWidth: 1100, margin: '0 auto', padding: 16, display: 'flex', flexFlow: 'column', gap: 28 }}>
-        {items.map(([label, node]) => (
-          <ReqorePanel key={label} label={label} flat minimal collapsible>
-            <div style={{ padding: 8 }}>{node}</div>
-          </ReqorePanel>
-        ))}
-        <ReqoreP size='small' effect={{ opacity: 0.5 }}>
-          Same data as “FormEngine › Basic”. Resize the viewport to ~390px to test phone layout.
-        </ReqoreP>
-      </div>
-    );
-  },
-};

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

@@ -1,244 +0,0 @@
-/**
- * VARIANT 1 — "Calm Table"
- *
- * Direction: treat it like a clean data table. One status channel (segmented
- * meter), one mark per row (a status dot), whitespace instead of borders/boxes.
- * Errors are quiet inline text, not full-width red boxes. WHOLE-ROW hover.
- * ONE unified description control (tap to reveal short+long inline). Click a row
- * to edit it inline. Responsive: collapses to stacked label/value on phone.
- */
-import { ReqoreIcon, ReqoreP } from '@qoretechnologies/reqore';
-import { IQorusFormField, IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
-import styled from 'styled-components';
-import {
-  InlineEdit,
-  StatusDot,
-  TVariantForm,
-  ValueView,
-  VariantToolbar,
-  useDisclosure,
-  useVariantColors,
-  useVariantForm,
-} from './variantParts';
-
-const Wrap = styled.div<{ $line: string; $hover: string; $muted: string; $faint: string }>`
-  display: flex;
-  flex-flow: column;
-  gap: 22px;
-  font-size: 13px;
-
-  .vct-row {
-    display: grid;
-    grid-template-columns: minmax(180px, 320px) minmax(0, 1fr) auto;
-    align-items: center;
-    gap: 18px;
-    min-height: 40px;
-    padding: 6px 10px;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background 0.12s ease;
-  }
-  /* WHOLE-row hover (fixes: hover used to only tint the label cell) */
-  .vct-row:hover,
-  .vct-row:focus-within {
-    background: ${({ $hover }) => $hover};
-  }
-  .vct-label {
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-  }
-  .vct-actions {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    opacity: 0.85;
-  }
-  .vct-desc {
-    grid-column: 1 / -1;
-    padding: 2px 2px 6px 0;
-    color: ${({ $muted }) => $muted};
-  }
-  .vct-reason {
-    font-size: 12px;
-    margin-left: 8px;
-  }
-  .vct-info {
-    background: none;
-    border: none;
-    color: ${({ $faint }) => $faint};
-    cursor: pointer;
-    padding: 4px;
-    display: inline-flex;
-    border-radius: 6px;
-  }
-  .vct-info:hover {
-    color: ${({ $muted }) => $muted};
-  }
-
-  @media (max-width: 620px) {
-    .vct-row {
-      grid-template-columns: 1fr auto;
-      grid-template-areas: 'label actions' 'value value';
-      row-gap: 2px;
-    }
-    .vct-label {
-      grid-area: label;
-    }
-    .vct-value {
-      grid-area: value;
-    }
-    .vct-actions {
-      grid-area: actions;
-    }
-  }
-`;
-
-const Meter = ({ form }: { form: TVariantForm }) => {
-  const c = useVariantColors();
-  const s = form.summary;
-  const filtering = form.filter === 'attention';
-  return (
-    <div style={{ display: 'flex', flexFlow: 'column', gap: 8 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: c.muted }}>
-        <ReqoreP
-          size='small'
-          effect={{
-            uppercase: true,
-            spaced: 1,
-            weight: 'bold',
-            color: (s.attention ? c.warning : c.success) as never,
-          }}
-        >
-          {/* What the form lacks, not whether it has unsaved changes:
-              "Draft" is the batched mode's per-row chip alone. */}
-          {s.attention ? 'Incomplete' : 'Ready'}
-        </ReqoreP>
-        <span>
-          {s.set} of {s.total} set
-        </span>
-        {s.attention ?
-          <button
-            type='button'
-            onClick={form.toggleAttention}
-            style={{
-              marginLeft: 'auto',
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              color: c.warning,
-              fontSize: 12,
-              textDecoration: 'underline',
-              textUnderlineOffset: 3,
-            }}
-          >
-            {filtering ? '← show all fields' : `${s.attention} need attention →`}
-          </button>
-        : <span style={{ color: c.success, marginLeft: 'auto' }}>All clear</span>}
-      </div>
-      <div style={{ display: 'flex', height: 6, borderRadius: 3, overflow: 'hidden', background: c.line }}>
-        <div style={{ width: `${(s.set / s.total) * 100}%`, background: c.success }} />
-        <div style={{ width: `${(s.attention / s.total) * 100}%`, background: c.warning }} />
-      </div>
-    </div>
-  );
-};
-
-export const VariantCalmTable = ({
-  options,
-  values,
-}: {
-  options: IQorusFormSchema;
-  values: Record<string, IQorusFormField>;
-}) => {
-  const c = useVariantColors();
-  const form = useVariantForm(options, values);
-  const disc = useDisclosure();
-
-  return (
-    <Wrap $line={c.line} $hover={c.hover} $muted={c.muted} $faint={c.faint}>
-      <Meter form={form} />
-      <VariantToolbar form={form} />
-      {form.visibleGroups.map((g) => (
-        <div key={g.name} style={{ display: 'flex', flexFlow: 'column', gap: 2 }}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 10,
-              padding: '0 10px 6px',
-              borderBottom: `1px solid ${c.line}`,
-              marginBottom: 4,
-            }}
-          >
-            <ReqoreP effect={{ weight: 'bold' }}>{g.label}</ReqoreP>
-            <span style={{ color: c.faint, fontSize: 12 }}>{g.rows.length}</span>
-          </div>
-          {g.rows.map((r) => {
-            const hasDesc = !!(r.shortDesc || r.longDesc);
-            const open = disc.isOpen(r.name);
-            const editing = form.editing === r.name;
-            return (
-              <div
-                key={r.name}
-                className='vct-row'
-                role='button'
-                tabIndex={0}
-                aria-label={r.label}
-                onClick={() => !r.readOnly && form.startEdit(r.name)}
-              >
-                <span className='vct-label' style={{ color: c.text }}>
-                  {r.label}
-                  {r.required ?
-                    <ReqoreIcon icon='Asterisk' size='9px' style={{ color: c.danger }} />
-                  : null}
-                </span>
-                <span className='vct-value' style={{ minWidth: 0, color: c.muted }}>
-                  <ValueView value={r.value} />
-                  {r.status === 'invalid' || r.status === 'todo' ?
-                    <span
-                      className='vct-reason'
-                      style={{ color: r.status === 'invalid' ? c.danger : c.warning }}
-                    >
-                      {r.reason}
-                    </span>
-                  : null}
-                </span>
-                <span className='vct-actions'>
-                  <StatusDot status={r.status} />
-                  {hasDesc ?
-                    <button
-                      type='button'
-                      className='vct-info'
-                      aria-label='Toggle description'
-                      aria-expanded={open}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        disc.toggle(r.name);
-                      }}
-                    >
-                      <ReqoreIcon icon={open ? 'InformationFill' : 'InformationLine'} size='14px' />
-                    </button>
-                  : null}
-                </span>
-                {hasDesc && open ?
-                  <div className='vct-desc'>
-                    {r.shortDesc ? <div>{r.shortDesc}</div> : null}
-                    {r.longDesc ?
-                      <div style={{ opacity: 0.8, marginTop: r.shortDesc ? 4 : 0 }}>
-                        {r.longDesc.replace(/[#`*]/g, '')}
-                      </div>
-                    : null}
-                  </div>
-                : null}
-                {editing ? <InlineEdit row={r} onDone={form.stopEdit} /> : null}
-              </div>
-            );
-          })}
-        </div>
-      ))}
-    </Wrap>
-  );
-};

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

@@ -1,212 +0,0 @@
-/**
- * VARIANT 2 — "Cards / Stack"
- *
- * Direction: breathing room over density. Each field is a subtle card with a
- * generous tap target (phone-friendly). Status is shown with a single left
- * accent — but ONLY for genuinely invalid (touched) fields; to-dos get a calm
- * amber label dot, unset fields stay neutral. The description control sits on
- * the LEFT under the label (where the text appears). Click a card to edit inline.
- */
-import { ReqoreIcon, ReqoreP } from '@qoretechnologies/reqore';
-import { IQorusFormField, IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
-import styled from 'styled-components';
-import {
-  InlineEdit,
-  STATUS_COLOR,
-  ValueView,
-  VariantToolbar,
-  useDisclosure,
-  useVariantColors,
-  useVariantForm,
-} from './variantParts';
-
-const Wrap = styled.div<{ $surface: string; $line: string; $hover: string }>`
-  display: flex;
-  flex-flow: column;
-  gap: 26px;
-  font-size: 13px;
-
-  .vc-card {
-    position: relative;
-    display: grid;
-    grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr);
-    gap: 18px;
-    padding: 14px 16px;
-    border-radius: 10px;
-    background: ${({ $surface }) => $surface};
-    cursor: pointer;
-    transition: background 0.12s ease;
-    overflow: hidden;
-  }
-  .vc-card:hover,
-  .vc-card:focus-within {
-    background: ${({ $hover }) => $hover};
-  }
-  .vc-accent {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-  }
-  .vc-name {
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 7px;
-  }
-  .vc-descbtn {
-    background: none;
-    border: none;
-    padding: 0;
-    margin-top: 6px;
-    color: inherit;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 12px;
-  }
-  .vc-value {
-    align-self: center;
-    min-width: 0;
-  }
-
-  @media (max-width: 620px) {
-    .vc-card {
-      grid-template-columns: 1fr;
-      gap: 8px;
-      padding: 14px;
-    }
-  }
-`;
-
-export const VariantCards = ({
-  options,
-  values,
-}: {
-  options: IQorusFormSchema;
-  values: Record<string, IQorusFormField>;
-}) => {
-  const c = useVariantColors();
-  const form = useVariantForm(options, values);
-  const s = form.summary;
-  const disc = useDisclosure();
-
-  return (
-    <Wrap $surface={c.surface} $line={c.line} $hover={c.hover}>
-      <div style={{ display: 'flex', flexFlow: 'column', gap: 10 }}>
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
-          <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' }}>
-          <div style={{ width: `${s.pct}%`, height: '100%', background: c.success }} />
-        </div>
-      </div>
-      <VariantToolbar form={form} />
-
-      {form.visibleGroups.map((g) => (
-        <div key={g.name} style={{ display: 'flex', flexFlow: 'column', gap: 10 }}>
-          <ReqoreP effect={{ weight: 'bold', uppercase: true, spaced: 1 }} size='small'>
-            {g.label}
-          </ReqoreP>
-          <div style={{ display: 'flex', flexFlow: 'column', gap: 8 }}>
-            {g.rows.map((r) => {
-              const hasDesc = !!(r.shortDesc || r.longDesc);
-              const open = disc.isOpen(r.name);
-              const editing = form.editing === r.name;
-              return (
-                <div
-                  key={r.name}
-                  className='vc-card'
-                  role='button'
-                  tabIndex={0}
-                  onClick={() => !r.readOnly && form.startEdit(r.name)}
-                >
-                  {r.status === 'invalid' ?
-                    <span className='vc-accent' style={{ background: c.danger }} />
-                  : null}
-                  <div>
-                    <span className='vc-name' style={{ color: c.text }}>
-                      {r.status === 'todo' || r.status === 'invalid' ?
-                        <span
-                          aria-hidden
-                          style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: '50%',
-                            background: STATUS_COLOR(r.status, c),
-                          }}
-                        />
-                      : null}
-                      {r.label}
-                      {r.required ?
-                        <ReqoreIcon icon='Asterisk' size='9px' style={{ color: c.danger }} />
-                      : null}
-                    </span>
-                    {hasDesc ?
-                      <button
-                        type='button'
-                        className='vc-descbtn'
-                        style={{ color: c.faint }}
-                        aria-expanded={open}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          disc.toggle(r.name);
-                        }}
-                      >
-                        <ReqoreIcon icon={open ? 'ArrowUpSLine' : 'QuestionLine'} size='12px' />
-                        {open ? 'Hide info' : 'Info'}
-                      </button>
-                    : null}
-                    {open ?
-                      <div style={{ color: c.muted, marginTop: 6, fontSize: 12, lineHeight: 1.5 }}>
-                        {r.shortDesc ? <div>{r.shortDesc}</div> : null}
-                        {r.longDesc ?
-                          <div style={{ opacity: 0.85, marginTop: r.shortDesc ? 4 : 0 }}>
-                            {r.longDesc.replace(/[#`*]/g, '')}
-                          </div>
-                        : null}
-                      </div>
-                    : null}
-                  </div>
-                  <div className='vc-value' style={{ color: c.muted }}>
-                    <ValueView value={r.value} />
-                    {r.status === 'invalid' ?
-                      <div style={{ color: c.danger, fontSize: 12, marginTop: 4 }}>{r.reason}</div>
-                    : r.status === 'todo' ?
-                      <div style={{ color: c.warning, fontSize: 12, marginTop: 4 }}>{r.reason}</div>
-                    : null}
-                  </div>
-                  {editing ? <InlineEdit row={r} onDone={form.stopEdit} /> : null}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </Wrap>
-  );
-};