@qoretechnologies/reqraft 0.10.25 → 0.10.26

package/src/components/supportTicket/TicketHeader.stories.tsx

@@ -0,0 +1,183 @@
+import { ReqoreButton, ReqoreDropdown } from '@qoretechnologies/reqore';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import { StoryMeta } from '../../types';
+import { TicketMetaTags } from './TicketMetaTags';
+import {
+  TicketAvatar,
+  TicketHeader,
+  TicketHeaderText,
+  TicketPersonValue,
+  ticketInitials,
+} from './TicketHeader';
+
+const meta = {
+  component: TicketHeader,
+  title: 'Components/TicketHeader',
+  args: {
+    subject: 'Workflow deploy fails at the mapper step',
+    reference: '#1001',
+  },
+} as StoryMeta<typeof TicketHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const person = (name: string) => (
+  <TicketPersonValue>
+    <TicketAvatar>{ticketInitials(name)}</TicketAvatar>
+    <TicketHeaderText>{name}</TicketHeaderText>
+  </TicketPersonValue>
+);
+
+/**
+ * What a customer sees: the same rail, every value read-only. The properties are the
+ * caller's — this is the shorter of the two lists a real surface passes.
+ */
+export const Customer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the customer's header rail — subject, reference, and a short list of read-only property rows, with the status shown from the customer's viewpoint as 'Awaiting your reply'.",
+      },
+    },
+  },
+  args: {
+    properties: [
+      {
+        label: 'Status',
+        value: (
+          <TicketMetaTags
+            ticket={{ status: 'awaiting_customer', priority: 'high', category: 'bug' }}
+            viewerRole='customer'
+          />
+        ),
+      },
+      { label: 'Opened by', value: person('ide-demo@local.dev') },
+      { label: 'References', value: <TicketHeaderText muted>None</TicketHeaderText> },
+    ],
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Workflow deploy fails at the mapper step')).toBeInTheDocument();
+    await expect(canvas.getByText('#1001')).toBeInTheDocument();
+    await expect(canvas.getByText('Awaiting your reply')).toBeInTheDocument();
+  },
+};
+
+/**
+ * What staff see: the same frame with pressable values. The row is as tall as a
+ * control whether or not it holds one, so a rail that mixes text and dropdowns still
+ * reads as a table — that invariant is what the alignment test below pins.
+ */
+export const Staff: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the staff header rail — the same frame with pressable values (a status dropdown, assignee and customer people, a references button) alongside plain text.',
+      },
+    },
+  },
+  args: {
+    properties: [
+      {
+        label: 'Status',
+        value: (
+          <ReqoreDropdown
+            size='small'
+            minimal
+            flat
+            label='Open'
+            showCaret={false}
+            rightIcon='ArrowDownSLine'
+            items={[{ label: 'Open', selected: true }, { label: 'Resolved' }]}
+          />
+        ),
+      },
+      { label: 'Assignee', value: person('nick.m@acme.io') },
+      { label: 'Customer', value: person('ide-demo@local.dev') },
+      {
+        label: 'References',
+        value: (
+          <ReqoreButton size='small' minimal flat icon='GitBranchLine'>
+            5 references
+          </ReqoreButton>
+        ),
+      },
+    ],
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('nick.m@acme.io')).toBeInTheDocument();
+    await expect(canvas.getByText('NM')).toBeInTheDocument();
+  },
+};
+
+/**
+ * The rail's two layout invariants, measured rather than eyeballed — both have
+ * regressed by hand more than once.
+ *
+ * 1. Every value starts on the same vertical edge, whether it is a control (which
+ *    insets its own content by its horizontal padding) or bare text (which does not).
+ * 2. Every row is the same height, whether it holds a 32px control or a line of text.
+ */
+export const RowsAlign: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the staff rail again to measure its two layout invariants — every value's content starts on the same vertical edge, and every row is the same height, whether the row holds a control or bare text.",
+      },
+    },
+  },
+  args: Staff.args,
+  async play({ canvasElement }) {
+    const rows = Array.from(
+      canvasElement.querySelectorAll<HTMLElement>('.reqore-description-list-row')
+    );
+    await expect(rows.length).toBe(4);
+
+    /* Where the value's CONTENT starts, not where its box does. The inset is padding
+       and it lands on the value itself — the button on a control row, the person span
+       on a text row — so measure that child's padded edge. */
+    const contentLeft = (row: HTMLElement) => {
+      const column = row.querySelector<HTMLElement>('.reqore-description-list-content')!;
+      const value = (column.firstElementChild as HTMLElement | null) ?? column;
+      return Math.round(
+        value.getBoundingClientRect().left + parseFloat(getComputedStyle(value).paddingLeft)
+      );
+    };
+
+    const lefts = rows.map(contentLeft);
+    await expect(new Set(lefts).size, `value content starts at: ${lefts.join(', ')}`).toBe(1);
+
+    const heights = rows.map((row) => Math.round(row.getBoundingClientRect().height));
+    await expect(new Set(heights).size, `row heights: ${heights.join(', ')}`).toBe(1);
+  },
+};
+
+/** `when: false` drops a row, so one list can serve both viewer roles. */
+export const HiddenRow: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a property list where one row is flagged when: false, showing that the flagged Assignee row drops out so a single list can serve both viewer roles.',
+      },
+    },
+  },
+  args: {
+    properties: [
+      { label: 'Status', value: <TicketHeaderText>Open</TicketHeaderText> },
+      { label: 'Assignee', value: <TicketHeaderText>nick.m@acme.io</TicketHeaderText>, when: false },
+      { label: 'Customer', value: <TicketHeaderText>ide-demo@local.dev</TicketHeaderText> },
+    ],
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByText('Assignee')).not.toBeInTheDocument();
+    await expect(canvas.getByText('Customer')).toBeInTheDocument();
+  },
+};

package/src/components/supportTicket/TicketHeader.tsx

@@ -0,0 +1,247 @@
+import {
+  ReqoreControlGroup,
+  ReqoreDescriptionList,
+  ReqoreSpan,
+} from '@qoretechnologies/reqore';
+import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
+import { TReqoreEffectColor } from '@qoretechnologies/reqore/dist/components/Effect';
+import { SIZE_TO_PX } from '@qoretechnologies/reqore/dist/constants/sizes';
+import { ReactNode } from 'react';
+import styled from 'styled-components';
+
+/*
+ * The header every ticket surface puts above its tabs: the subject, the ticket's
+ * number, and a rail of labelled properties.
+ *
+ * Shared because it had already drifted. The staff drawer's header was redesigned
+ * into this definition-list rail while the customer's kept a heading, a tag row and
+ * a muted meta line — the same information, two layouts, and no way to change one
+ * without hand-copying it into the other. What each surface shows differs (staff
+ * edit the assignee; a customer reads who opened the ticket), so the rows are the
+ * caller's; the frame, the rhythm and the alignment rules are not.
+ */
+
+/** How wide the label column is. Fits "References" — the longest label in use. */
+const LABEL_WIDTH = '84px';
+/** Everything in the rail runs at one scale. */
+const RAIL_SIZE = 'small' as const;
+/** Breathing room above and below each row's control — the rail's vertical rhythm. */
+const ROW_PADDING = 4;
+
+/**
+ * The height a tab item needs to sit on the rail's rhythm.
+ *
+ * Exported because the tab strip below the header has to match it and there is no
+ * Reqore prop for a tab's height: `size` sets it, and `padded` governs the items'
+ * horizontal edges, not the strip's. The height must go on the ITEM, never on the
+ * list — both of a tab's own surfaces are keyed to the item's box (the active marker
+ * is an inset shadow on its bottom edge, the hover wash fills it), so padding the
+ * list leaves the item floating in a taller strip: the marker lifts off the hairline
+ * and reads as a doubled line, and the wash reads as a floating box.
+ *
+ * This belongs in Reqore as a tab-height option rather than as a CSS rule each
+ * consumer re-applies. Until it exists, `TicketTabsFrame` is the single copy.
+ */
+export const TICKET_RAIL_ROW_HEIGHT = SIZE_TO_PX[RAIL_SIZE] + ROW_PADDING * 2;
+
+/** The ticket number, set in mono so it reads as an identifier, not a heading. Exported
+ *  so the staff drawer (which puts the number in the drawer's own title, not the rail)
+ *  renders it identically rather than re-declaring the same span. */
+export const TicketMonoId = styled.span`
+  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
+  font-size: 11.5px;
+  color: rgba(255, 255, 255, 0.45);
+`;
+
+/**
+ * A person: initials disc, then the name, on one baseline.
+ *
+ * One wrapper for every person in the rail — the assignee, the customer, the author.
+ * They were visibly different before: one went through a nested control group inside
+ * a button (its own gap and alignment) while another used a plain flex row, so the
+ * two drifted apart every time either was touched. The only difference left is that
+ * some of them are pressable.
+ */
+export const TicketPersonValue = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+
+  /* the name yields before the disc does */
+  > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+/** Initials disc for a person. */
+export const TicketAvatar = styled.span`
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
+  font-weight: 650;
+  color: #fff;
+  background: linear-gradient(150deg, #8a4fe6, #2c1140);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+`;
+
+/**
+ * Up to two initials from a handle ("nick.m@acme.io" → "NM"). Falls back to "?" so a
+ * handle made entirely of separators still renders a disc rather than an empty circle.
+ */
+export const ticketInitials = (name: string): string =>
+  name
+    .split(/[\s._@-]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('') || '?';
+
+/**
+ * Wraps a ticket surface's tab strip so it joins the header rail's rhythm.
+ *
+ * See `TICKET_RAIL_ROW_HEIGHT` for why the height goes on the item and not the list.
+ */
+export const TicketTabsFrame = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  .reqore-tabs-list {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .reqore-tabs-list-item {
+    min-height: ${TICKET_RAIL_ROW_HEIGHT}px;
+  }
+`;
+
+/*
+ * Centre each tab's icon + label + count.
+ *
+ * With `fill`, every tab is far wider than its content, and ReqoreButton defaults
+ * `textAlign` to 'left' for non-square buttons — which also hands the leading icon a
+ * `margin-right: auto`, pinning the group against the left edge of its tab. Setting
+ * both alignments centres the group as a unit, so the strip reads as evenly spaced
+ * segments rather than left-huddled labels.
+ */
+export const TICKET_TAB_ALIGN = {
+  textAlign: 'center',
+  iconsAlign: 'center',
+} as const;
+
+/**
+ * A tab's count pill. The active tab's carries the accent; the rest stay neutral, so
+ * the strip reads as one selected item rather than several competing chips. Returns
+ * `undefined` for an empty count — a tab with nothing in it shows no badge at all.
+ */
+export const ticketTabBadge = (
+  count: number,
+  isActive: boolean,
+  accent?: { color: TReqoreEffectColor; glow: TReqoreEffectColor }
+): TReqoreBadge | undefined => {
+  if (!count) {
+    return undefined;
+  }
+  if (!isActive || !accent) {
+    return count;
+  }
+  return { label: count, color: accent.glow, effect: { color: accent.color } };
+};
+
+export interface ITicketHeaderProperty {
+  label: string;
+  /** plain text, a chip row, or a control — the row aligns all three the same way */
+  value: ReactNode;
+  /** Drop the row. Lets a caller keep one list and vary it by viewer role, rather
+   *  than building a different array per branch. Defaults to shown. */
+  when?: boolean;
+}
+
+export interface ITicketHeaderProps {
+  /** Omit when the surrounding dialog already carries the subject — the staff drawer
+   *  puts it in the drawer's own label, the customer's modal puts it here. */
+  subject?: string;
+  /** the ticket's number, e.g. `#1001` */
+  reference?: string;
+  properties: ITicketHeaderProperty[];
+  /** padding around the rail, matching the surface's own pane padding */
+  padding?: number;
+  className?: string;
+}
+
+export const TicketHeader = ({
+  subject,
+  reference,
+  properties,
+  padding = 14,
+  className,
+}: ITicketHeaderProps) => (
+  <ReqoreDescriptionList
+    /* The rail IS a description list — Reqore's, not a private copy. `contentSize`
+       is what makes it tabular with controls in it: it reserves a control's height on
+       every row and insets the values that aren't controls, so a dropdown row and a
+       plain-text row share both a height and a left edge. */
+    contentSize={RAIL_SIZE}
+    size={RAIL_SIZE}
+    /* Labels are reference furniture, quieter and smaller than the values they name —
+       and "References" has to fit LABEL_WIDTH on one line at this scale. */
+    labelTextSize='tiny'
+    /* The rail's rhythm, which the tab strip below is measured against — see
+       TICKET_RAIL_ROW_HEIGHT. Reqore's comfortable default would make the rows 52px
+       and the strip would no longer line up with them. */
+    rowPadding='tiny'
+    labelWidth={LABEL_WIDTH}
+    uppercaseLabels
+    flat
+    transparent
+    padded={false}
+    contentStyle={{ padding: `${padding - 4}px ${padding}px ${padding - 6}px` }}
+    className={`${className || ''} ticket-header`}
+    label={
+      subject ? (
+        /* The label is the panel's heading, which `padded={false}` leaves flush against
+           the edge — `contentStyle` only pads the rows. Pad the subject here so it lines
+           up with the values below it, using the same horizontal `padding` as the rows. */
+        <div style={{ padding: `${padding}px ${padding}px ${padding - 8}px`, minWidth: 0 }}>
+          <ReqoreControlGroup verticalAlign='center' gapSize='small'>
+            <span>{subject}</span>
+            {reference ? <TicketMonoId>{reference}</TicketMonoId> : null}
+          </ReqoreControlGroup>
+        </div>
+      ) : undefined
+    }
+    items={properties
+      .filter((property) => property.when !== false)
+      .map((property) => ({
+        key: property.label,
+        label: property.label,
+        content: property.value,
+      }))}
+  />
+);
+
+/** A rail value that is plain text rather than a control — sized to match the rest. */
+export const TicketHeaderText = ({
+  children,
+  muted,
+  tooltip,
+}: {
+  children: ReactNode;
+  /** for an absent value ("Unassigned", "None") */
+  muted?: boolean;
+  tooltip?: string;
+}) => (
+  <ReqoreSpan size={RAIL_SIZE} tooltip={tooltip} effect={muted ? { opacity: 0.5 } : undefined}>
+    {children}
+  </ReqoreSpan>
+);

package/src/components/supportTicket/TicketMetaTags.stories.tsx

@@ -0,0 +1,103 @@
+import { StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import { StoryMeta } from '../../types';
+import { TTicketCategory, TTicketPriority, TTicketStatus } from './meta';
+import { TicketMetaTags } from './TicketMetaTags';
+
+const ticket = (
+  status: TTicketStatus,
+  priority: TTicketPriority,
+  category: TTicketCategory
+): { status: TTicketStatus; priority: TTicketPriority; category: TTicketCategory } => ({
+  status,
+  priority,
+  category,
+});
+
+const meta = {
+  component: TicketMetaTags,
+  title: 'Components/TicketMetaTags',
+  args: {
+    ticket: ticket('open', 'high', 'bug'),
+  },
+} as StoryMeta<typeof TicketMetaTags>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The status / priority / category badge row — each value's label, intent and
+ *  icon come from the shared `supportTicket/meta` vocabularies. */
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the status, priority, and category badge row, each tag's label, intent, and icon drawn from the shared supportTicket/meta vocabularies.",
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Open')).toBeInTheDocument();
+    await expect(canvas.getByText('High')).toBeInTheDocument();
+    await expect(canvas.getByText('Bug')).toBeInTheDocument();
+  },
+};
+
+/**
+ * The `awaiting_customer` status is the one value whose label is audience-specific.
+ * With no `viewerRole` (the staff / neutral default) it reads "Awaiting customer".
+ */
+export const StaffAwaitingLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the awaiting_customer status with no viewerRole (the staff / neutral default), where it reads 'Awaiting customer'.",
+      },
+    },
+  },
+  args: { ticket: ticket('awaiting_customer', 'normal', 'question') },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Awaiting customer')).toBeInTheDocument();
+    await expect(canvas.queryByText('Awaiting your reply')).not.toBeInTheDocument();
+  },
+};
+
+/** The customer viewpoint re-labels the same status as "Awaiting your reply". */
+export const CustomerAwaitingLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the same awaiting_customer status from the customer viewpoint, where it is re-labelled 'Awaiting your reply'.",
+      },
+    },
+  },
+  args: { viewerRole: 'customer', ticket: ticket('awaiting_customer', 'normal', 'question') },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Awaiting your reply')).toBeInTheDocument();
+    await expect(canvas.queryByText('Awaiting customer')).not.toBeInTheDocument();
+  },
+};
+
+/** `hideCategory` drops the category tag — for dense list rows. */
+export const HideCategory: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the badge row with hideCategory set, dropping the category tag for dense list rows while status and priority remain.',
+      },
+    },
+  },
+  args: { hideCategory: true },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Open')).toBeInTheDocument();
+    await expect(canvas.getByText('High')).toBeInTheDocument();
+    await expect(canvas.queryByText('Bug')).not.toBeInTheDocument();
+  },
+};

package/src/components/supportTicket/TicketMetaTags.tsx

@@ -0,0 +1,85 @@
+import { ReqoreControlGroup, ReqoreTag } from '@qoretechnologies/reqore';
+import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
+import {
+  TICKET_CATEGORY_META,
+  TICKET_PRIORITY_META,
+  TICKET_STATUS_META,
+  ticketStatusLabel,
+  TTicketCategory,
+  TTicketPriority,
+  TTicketStatus,
+  TTicketViewerRole,
+} from './meta';
+
+export interface ITicketMetaTagsProps {
+  /** The three enum values to badge — a full ticket satisfies this structurally. */
+  ticket: {
+    status: TTicketStatus;
+    priority: TTicketPriority;
+    category: TTicketCategory;
+  };
+  /** Picks audience-specific labels (e.g. "Awaiting your reply" vs "Awaiting
+   *  customer"). Omit for the staff / neutral wording. */
+  viewerRole?: TTicketViewerRole;
+  size?: TSizes;
+  /** Hide the category tag (e.g. in a dense list row). */
+  hideCategory?: boolean;
+  /** Reqore's subtle tag style — the intent colour as text on a faint wash,
+   *  instead of a solid intent fill. Defaults to `true`; pass `false` for the
+   *  old solid chips. */
+  minimal?: boolean;
+  /** Whether the tags are borderless (Reqore's `flat`). Defaults to `false` here,
+   *  so tags carry a border — a shade lighter than the fill — which keeps the
+   *  `minimal` tags legible. Pass `true` for no border. */
+  flat?: boolean;
+}
+
+/**
+ * The status / priority / category badge row for a ticket — the single place the
+ * three enum vocabularies (`../supportTicket/meta`) turn into Reqore tags, so the
+ * customer list, the staff queue, the detail header and the Qonsole card all read
+ * identically. Each tag's label, intent and icon come from the shared meta maps.
+ */
+export const TicketMetaTags = ({
+  ticket,
+  viewerRole,
+  size = 'small',
+  hideCategory,
+  minimal = true,
+  flat = false,
+}: ITicketMetaTagsProps) => {
+  const status = TICKET_STATUS_META[ticket.status];
+  const priority = TICKET_PRIORITY_META[ticket.priority];
+  const category = TICKET_CATEGORY_META[ticket.category];
+
+  return (
+    <ReqoreControlGroup size={size} wrap>
+      <ReqoreTag
+        icon={status.icon}
+        intent={status.intent}
+        label={ticketStatusLabel(ticket.status, viewerRole)}
+        size={size}
+        minimal={minimal}
+        flat={flat}
+        effect={{ weight: 'bold' }}
+      />
+      <ReqoreTag
+        icon={priority.icon}
+        intent={priority.intent}
+        label={priority.label}
+        size={size}
+        minimal={minimal}
+        flat={flat}
+      />
+      {!hideCategory && (
+        <ReqoreTag
+          icon={category.icon}
+          label={category.label}
+          size={size}
+          minimal={minimal}
+          flat={flat}
+        />
+      )}
+    </ReqoreControlGroup>
+  );
+};