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

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

@@ -1,183 +0,0 @@
-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

@@ -1,247 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

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