bermudalamb
8de261538b
Seventeen components declared props the compiler was free to assume were mutable, and one antd prop had gone stale. Both mechanical, neither with any behaviour attached.
React never writes to props, and `Readonly<>` says so to the compiler rather than only to the reader. This finishes a pattern the codebase had already chosen rather than introducing one: AccountDetails and EmailTemplateEditor were already written as `type Props = Readonly<{…}>`, so the thirteen named prop interfaces are converted to that same shape and the four context providers, which annotate `{ children }` inline, get `Readonly<{ children: React.ReactNode }>`.
Cart.tsx was the last place passing `destroyOnClose`, deprecated in antd 5.20. Twelve other call sites across the admin screens, the filter drawer and four customer modals already use `destroyOnHidden`, so this one was simply stale. Deprecated props keep working until they do not, and the failure then arrives as an antd upgrade breaking something unrelated to the change being made.
Counted rather than assumed, which the issue specifically asks for, because a `Readonly<>` in the wrong position type-checks and fixes nothing: lint goes from 31 warnings to 13, a drop of exactly eighteen, and both rules disappear from the breakdown entirely rather than merely thinning out.
What that leaves is the point of doing it. The remaining thirteen are eleven `set-state-in-effect` and two `no-alphabetical-sort` — so the frontend's warnings are now only the ones that need a decision, which is what makes #99 tractable. It had grown from the eight in that issue's title to eleven, two of them added by #97's clock tick and lapsed-cart refetch.
No behaviour change intended, so the bar was the end-to-end suite. Full run: 121 passed, 8 failed; all eight pass in a 45/45 serial re-run, which is the shared-database and event-loop flakiness this suite has had throughout.
Closes #100
66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { useId } from 'react';
|
|
|
|
type Props = Readonly<{
|
|
size?: number;
|
|
className?: string;
|
|
}>;
|
|
|
|
/**
|
|
* The RD monogram, as an inline SVG rather than an `<img src="/favicon.svg">`.
|
|
*
|
|
* Two reasons it has to be inline. The tile is drawn in `currentColor`, so it
|
|
* follows the antd text token and inverts with the app's own theme switch — the
|
|
* favicon file inverts on `prefers-color-scheme`, which tracks the operating
|
|
* system and would disagree with the app whenever someone toggles the theme
|
|
* themselves. And the letters are knocked out with a mask rather than painted in
|
|
* the background colour, so the mark sits correctly on any surface instead of
|
|
* carrying a hardcoded backdrop that only matches the header.
|
|
*
|
|
* Decorative: the header already says "Redefined Designs" beside it, so it is
|
|
* hidden from assistive technology rather than read out twice.
|
|
*/
|
|
export default function BrandMark({ size = 28, className }: Props) {
|
|
// Unique per instance — two marks on one page would otherwise share a mask id
|
|
// and the second would reference the first. The id is stripped to alphanumerics
|
|
// because React's generated ids contain colons.
|
|
const maskId = `rd-knockout-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
|
|
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 64 64"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
<mask id={maskId}>
|
|
{/* White shows the tile, black punches the letters through it. */}
|
|
<rect x="2" y="2" width="60" height="60" rx="15" fill="#fff" />
|
|
<g
|
|
fill="none"
|
|
stroke="#000"
|
|
strokeWidth="6.5"
|
|
strokeLinecap="butt"
|
|
strokeLinejoin="miter"
|
|
>
|
|
<path d="M15 18 V46" />
|
|
<path d="M15 18 H20 A7 7 0 0 1 20 32 H15" />
|
|
<path d="M20 32 L27 46" />
|
|
<path d="M37 18 V46" />
|
|
<path d="M37 18 H38 A14 14 0 0 1 38 46 H37" />
|
|
</g>
|
|
</mask>
|
|
<rect
|
|
x="2"
|
|
y="2"
|
|
width="60"
|
|
height="60"
|
|
rx="15"
|
|
fill="currentColor"
|
|
mask={`url(#${maskId})`}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|