@qoretechnologies/reqraft 0.10.2 → 0.10.5

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

@@ -0,0 +1,119 @@
+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',
+  render: () => (
+    <Frame>
+      <VariantCalmTable options={options} values={values} />
+    </Frame>
+  ),
+};
+
+export const V2Cards: Story = {
+  name: '2 · Cards',
+  render: () => (
+    <Frame>
+      <VariantCards options={options} values={values} />
+    </Frame>
+  ),
+};
+
+export const V3Focus: Story = {
+  name: '3 · Focus',
+  render: () => (
+    <Frame>
+      <VariantFocus options={focusOptions} values={focusValues} config={focusConfig} />
+    </Frame>
+  ),
+};
+
+export const V4Minimal: Story = {
+  name: '4 · Minimal',
+  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',
+  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

@@ -0,0 +1,242 @@
+/**
+ * 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,
+          }}
+        >
+          {s.attention ? 'Draft' : '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

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