@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.145.g32331ea

package/src/components/form/engine/CompactToolbar.tsx

@@ -11,9 +11,10 @@ import {
 } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
 import { useReqoreTheme } from '@qoretechnologies/reqore/dist/hooks/useTheme';
 import React, { memo } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useContext } from 'use-context-selector';
 import { CompactToolbarContext, TCompactSort } from './compactToolbarContext';
+import { useIsCalmForm } from './formAppearance';
 
 // Field sort modes, listed in the Fields menu's "Sort by" submenu. 'schema' is
 // the default (the schema's declared order); the rest reorder within each group.
@@ -28,11 +29,21 @@ const SORT_MODES: { value: TCompactSort; label: string; tooltip: string }[] = [
 // "Focus" header: a summary line ({pct}% complete · {set}/{total} set ·
 // {attention} need attention →) above a SEGMENTED meter — a green run (set) then
 // an amber run (needs attention) then the empty remainder.
-const StyledCompletion = styled.div`
+const StyledCompletion = styled.div<{ $calm?: boolean }>`
   display: flex;
   flex-flow: column;
   gap: 8px;
   padding: 0 2px;
+  /* Calm: one line — the summary, then a short meter beside it — that wraps
+     the meter under the words where there is no room for both. */
+  ${({ $calm }) =>
+    $calm ?
+      css`
+        flex-flow: row wrap;
+        align-items: center;
+        gap: 6px 14px;
+      `
+    : ''}
 `;
 const StyledCompletionLine = styled.div`
   display: flex;
@@ -46,11 +57,20 @@ const StyledMeter = styled.div<{
   $track: string;
   $set_c: string;
   $att_c: string;
+  /** Calm: a short meter beside the summary instead of a full-width bar. */
+  $calm?: boolean;
 }>`
   position: relative;
   height: 4px;
-  border-radius: 3px;
+  border-radius: ${({ $calm }) => ($calm ? 2 : 3)}px;
   width: 100%;
+  ${({ $calm }) =>
+    $calm ?
+      css`
+        flex: 1 1 160px;
+        max-width: 360px;
+      `
+    : ''}
   overflow: hidden;
   background: ${({ $track }) => $track};
   /* No per-segment radius — the container's overflow:hidden + radius rounds only
@@ -113,7 +133,9 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
     readOnly,
     invalidCount,
     attentionCount,
+    attentionFaultCount,
     completion,
+    showInvalidOnly,
     onToggleInvalidOnly,
     hasMultipleOptions,
     compactQuery,
@@ -135,16 +157,40 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
   } = useContext(CompactToolbarContext);
 
   const theme = useReqoreTheme();
+  const calm = useIsCalmForm();
   const intents = (theme.intents || {}) as Record<string, string>;
+  /* "N need attention →" / "N to fill in →" is a toggle (show only those fields), so it
+     is one: a button a keyboard reaches, which says whether it is on. A host that turns
+     it on for a person (a blocked submit) reads `aria-pressed` rather than guessing,
+     since the toolbar draws a different link once something becomes a fault. */
+  const attentionToggleProps = {
+    className: 'options-readfirst-attention-link',
+    role: 'button',
+    tabIndex: 0,
+    'aria-pressed': !!showInvalidOnly,
+    onClick: onToggleInvalidOnly,
+    onKeyDown: (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onToggleInvalidOnly?.();
+      }
+    },
+  };
   const cSuccess = intents.success || '#4a7110';
   const cWarning = intents.warning || '#d17c29';
   const cText = (theme.text?.color as string) || '#e8e8e8';
   const cTrack = `${cText}1f`;
+  // Calm: what is done is grey — finished work needs nobody — and only the
+  // outstanding part (the amber run, the "need attention" link) is coloured.
+  const cDone = calm ? `${cText}8c` : cSuccess;
+  const cQuiet = `${cText}a6`;
   // The GREEN run is what is done, not merely what has a value: a field that is
   // set but flagged belongs to the amber run, and counting it twice pushed that
   // run off the end of the track.
   const setPct = completion.total ? (completion.done / completion.total) * 100 : 0;
-  const attentionPct = completion.total ? (attentionCount / completion.total) * 100 : 0;
+  // The amber run is what is WRONG. On a new form the required fields are only still
+  // to fill in, so the track shows them as not done yet, without amber.
+  const attentionPct = completion.total ? (attentionFaultCount / completion.total) * 100 : 0;
 
   return (
     <ReqoreControlGroup
@@ -161,11 +207,19 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
           work. The read view lists what is set, and that is the whole
           answer. */}
       {parts.completion && completion.total && !readOnly ?
-        <StyledCompletion className='options-readfirst-completion'>
+        <StyledCompletion className='options-readfirst-completion' $calm={calm}>
           <StyledCompletionLine>
             <StyledSummary
               className='options-readfirst-status'
-              $color={invalidCount || attentionCount ? cWarning : cSuccess}
+              // Calm: the word in the text colour. "Ready" is not a healthy
+              // figure to celebrate in green, and "Incomplete" is said in amber
+              // by the link beside it — only the outstanding part is coloured.
+              $color={
+                calm ? cText
+                : invalidCount || attentionFaultCount ? cWarning
+                : attentionCount ? cText
+                : cSuccess
+              }
               style={{ fontWeight: 600 }}
             >
               {/* "Ready" is a claim about the whole form, so anything the form
@@ -179,28 +233,43 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
                   batched mode's per-row chip alone. */}
               {invalidCount || attentionCount ? 'Incomplete' : 'Ready'}
             </StyledSummary>
-            <StyledSummary style={{ opacity: 0.5 }}>
+            <StyledSummary style={calm ? { color: cQuiet } : { opacity: 0.5 }}>
               · {completion.set}/{completion.total} set
               {attentionCount ? ' ·' : ''}
             </StyledSummary>
-            {attentionCount ?
-              <StyledAttentionLink
-                $color={cWarning}
-                className='options-readfirst-attention-link'
-                onClick={onToggleInvalidOnly}
-              >
-                {attentionCount} need attention →
+            {/* Amber only for what is a fault. A new form's required fields are still to
+                fill in, which is the next step, not a warning: they are counted apart,
+                in the quiet colour. */}
+            {attentionFaultCount ?
+              <StyledAttentionLink $color={cWarning} {...attentionToggleProps}>
+                {attentionFaultCount} need attention →
               </StyledAttentionLink>
             : null}
-            <StyledPct>{completion.pct}%</StyledPct>
+            {attentionCount > attentionFaultCount ?
+              attentionFaultCount ?
+                <StyledSummary style={{ color: cQuiet }}>
+                  · {attentionCount - attentionFaultCount} to fill in
+                </StyledSummary>
+              : <StyledAttentionLink $color={cQuiet} {...attentionToggleProps}>
+                  {attentionCount} to fill in →
+                </StyledAttentionLink>
+            : null}
+            {/* Calm: the percentage is one more quiet figure on the line, not
+                a large bold number pinned to the far edge. */}
+            {calm ?
+              <StyledSummary className='options-readfirst-pct' style={{ color: cQuiet }}>
+                · {completion.pct}%
+              </StyledSummary>
+            : <StyledPct className='options-readfirst-pct'>{completion.pct}%</StyledPct>}
           </StyledCompletionLine>
           <StyledMeter
             className='options-readfirst-completion-bar'
             $set={setPct}
             $attention={attentionPct}
             $track={cTrack}
-            $set_c={cSuccess}
+            $set_c={cDone}
             $att_c={cWarning}
+            $calm={calm}
           />
         </StyledCompletion>
       : null}

package/src/components/form/engine/FormEngine.stories.tsx

@@ -41,6 +41,12 @@ import {
 import { basicFormValue, getBasicFormOptions as getOptions } from './__fixtures__/basicFormOptions';
 import { chromeFieldBases, metaFieldBases } from './__fixtures__/fieldChromeOptions';
 
+/** The first status box: "To fill in" while nothing in it is a fault (a new form),
+ *  "Needs attention" once something is. Stories about which box a field lands in find
+ *  it under either name. */
+const FIRST_BOX = /^(Needs attention|To fill in)$/;
+const FIRST_BOX_PREFIX = /^(Needs attention|To fill in)/;
+
 // schema data
 
 const TestOptionsWithRequiredGroups: IOptionsSchema = {
@@ -2243,6 +2249,7 @@ export const CompactLockedRequiredNeedsNoAttention: Story = {
     await expect(document.querySelector('[data-field="min"]')).toBeTruthy();
     await expect(document.querySelector('[data-field="max"]')).toBeTruthy();
     await _testsWaitForTextToNotExist('Needs attention');
+    await _testsWaitForTextToNotExist('To fill in');
     // Nothing the author can fill in is missing, so the form is Ready — the
     // locked fields do not apply until a kind is picked.
     await _testsWaitForText('Ready');
@@ -2266,11 +2273,11 @@ export const CompactUnlockedRequiredNeedsAttention: Story = {
     value: { kind: { type: 'string', value: 'between' } } as IOptions,
   },
   play: async () => {
-    await _testsWaitForText('Needs attention');
+    await _testsWaitForText(FIRST_BOX);
     await _testsWaitForText('Incomplete');
     await _testsWaitForTextToNotExist('Draft');
     const attention = [...document.querySelectorAll('.options-readfirst-group')].find((group) =>
-      (group.textContent || '').startsWith('Needs attention')
+      FIRST_BOX_PREFIX.test(group.textContent || '')
     );
     await expect(attention).toBeTruthy();
     for (const field of ['expected', 'min', 'max']) {
@@ -3070,6 +3077,7 @@ export const CompactReadOnly: Story = {
     await _testsWaitForTextToNotExist('Incomplete');
     await _testsWaitForTextToNotExist('Draft');
     await _testsWaitForTextToNotExist('Needs attention');
+    await _testsWaitForTextToNotExist('To fill in');
     await _testsWaitForTextToNotExist('Optional');
     // A required field nobody set is listed, unset, with no amber dot.
     await _testsWaitForText('Description');
@@ -3551,6 +3559,7 @@ export const CompactReadOnlyValues: Story = {
     expect(document.querySelector('.options-readfirst-completion')).toBeNull();
     expect(document.querySelector('.options-readfirst-group')).toBeNull();
     await _testsWaitForTextToNotExist('Needs attention');
+    await _testsWaitForTextToNotExist('To fill in');
     await _testsWaitForTextToNotExist('Optional');
     // An optional field nobody set is not listed at all…
     await _testsWaitForTextToNotExist('Notes');
@@ -3932,7 +3941,7 @@ export const CompactValidIdentifierRule: Story = {
     // The rules-driven validation marks the form as needing attention — the
     // dedicated "Needs attention" box (and the header link) signal it.
     await _testsWaitForText('Incomplete');
-    await _testsWaitForText('Needs attention');
+    await _testsWaitForText(FIRST_BOX);
   },
 };
 
@@ -6764,7 +6773,7 @@ export const CompactShowcase: Story = {
     // Optional box's fold, which scrolls, so the frame is put back afterwards:
     // this story's snapshot is the form's top.
     const attentionBox = Array.from(document.querySelectorAll('.options-readfirst-group')).find(
-      (group) => (group.textContent || '').startsWith('Needs attention')
+      (group) => FIRST_BOX_PREFIX.test(group.textContent || '')
     );
     await expect(
       attentionBox?.querySelector('[data-field="optionWithShortDescription"]')
@@ -8092,9 +8101,11 @@ export const CompactExpressionWithoutCatalogue: Story = {
  *  A collapsed ReqorePanel unmounts its content, so "has no
  *  `.reqore-panel-content`" IS the collapsed assertion. */
 const findStatusBox = (title: string) =>
-  Array.from(document.querySelectorAll('.options-readfirst-group')).find((panel) =>
-    panel.querySelector('.reqore-panel-title')?.textContent?.includes(title)
-  );
+  Array.from(document.querySelectorAll('.options-readfirst-group')).find((panel) => {
+    const heading = panel.querySelector('.reqore-panel-title')?.textContent ?? '';
+    // The first box is "To fill in" until something in it is a fault.
+    return title === 'Needs attention' ? FIRST_BOX_PREFIX.test(heading) : heading.includes(title);
+  });
 
 const expectBoxCollapsed = async (title: string) => {
   await waitFor(
@@ -9417,7 +9428,7 @@ export const ANewFormSaysWhatIsRequired: Story = {
     docs: {
       description: {
         story:
-          'A brand-new form with two empty required fields. Each says "This field is required" from the start, including the first one, which opens for editing, without waiting for the author to visit it.',
+          'A brand-new form with two empty required fields. Each says "This field is required" from the start, including the first one, which opens for editing, without waiting for the author to visit it. Saying what is required is not saying something is wrong: the first box reads "To fill in", in the quiet colour, until a field has been visited and left empty.',
       },
     },
   },
@@ -9429,7 +9440,8 @@ export const ANewFormSaysWhatIsRequired: Story = {
     expandFirstRequired: true,
   },
   play: async ({ canvasElement }) => {
-    await _testsWaitForText('Needs attention');
+    await _testsWaitForText('To fill in');
+    await _testsWaitForTextToNotExist('Needs attention');
     await waitFor(() => {
       const title = canvasElement.querySelector('[data-field="title"]');
       const owner = canvasElement.querySelector('[data-field="owner"]');
@@ -9551,7 +9563,7 @@ export const AMovedRowInViewIsNotScrolled: Story = {
     options: MovedRowSchema,
   },
   play: async () => {
-    await _testsWaitForText('Needs attention');
+    await _testsWaitForText(FIRST_BOX);
     const watch = watchRowScrolls();
     try {
       const scroller = movedRowScroller();
@@ -9610,7 +9622,7 @@ export const AMovedRowLandsClearOfThePinnedHeader: Story = {
       await scrolled;
       const row = document.querySelector<HTMLElement>('.readfirst-row[data-field="owner"]')!;
       const attention = [...document.querySelectorAll<HTMLElement>('.options-readfirst-group')].find(
-        (group) => (group.textContent || '').startsWith('Needs attention')
+        (group) => FIRST_BOX_PREFIX.test(group.textContent || '')
       )!;
       const header = attention.querySelector<HTMLElement>(':scope > .reqore-panel-title')!;
       const rowRect = row.getBoundingClientRect();
@@ -9634,12 +9646,12 @@ export const AMovedRowLandsClearOfThePinnedHeader: Story = {
  * slide UNDER the toolbar, never over it. Each step waits on `scrollend`.
  */
 const assertBoxHeaderSlidesUnderToolbar = async (scroller: HTMLElement) => {
-  await _testsWaitForText('Needs attention');
+  await _testsWaitForText(FIRST_BOX);
   const toolbar = document.querySelector<HTMLElement>(
     '.options-readfirst-scroll > .reqore-panel > .reqore-panel-title'
   )!;
   const box = [...document.querySelectorAll<HTMLElement>('.options-readfirst-group')].find(
-    (group) => (group.textContent || '').startsWith('Needs attention')
+    (group) => FIRST_BOX_PREFIX.test(group.textContent || '')
   )!;
   const header = box.querySelector<HTMLElement>(':scope > .reqore-panel-title')!;
   const scrollBy = async (delta: number) => {