style: format frontend, docs and skills with prettier; add .prettierignore
One-time prettier --write so the new format:check CI gate starts green. .prettierignore excludes generated (api-client.ts, documentation.json), vendored (public/cibg-huisstijl), and backend (dotnet format owns it). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,14 +14,42 @@ atoms — that is the whole point: fewer things to understand, nothing bespoke p
|
||||
|
||||
<div style={{ display: 'grid', gap: '0.5rem', maxWidth: '32rem', margin: '1.5rem 0' }}>
|
||||
{[
|
||||
['Templates', 'shared/layout', 'shell, page-shell, wizard-shell — the page skeleton', '#1e3a5f'],
|
||||
['Organisms', 'shared/ui/upload/document-upload …', 'self-contained sections that own a bit of behaviour', '#2a5a8a'],
|
||||
[
|
||||
'Templates',
|
||||
'shared/layout',
|
||||
'shell, page-shell, wizard-shell — the page skeleton',
|
||||
'#1e3a5f',
|
||||
],
|
||||
[
|
||||
'Organisms',
|
||||
'shared/ui/upload/document-upload …',
|
||||
'self-contained sections that own a bit of behaviour',
|
||||
'#2a5a8a',
|
||||
],
|
||||
['Molecules', 'shared/ui/form-field, async …', 'a label + control + error, grouped', '#3f7cb5'],
|
||||
['Atoms', 'shared/ui/button, text-input …', 'thin wrappers over CIBG Huisstijl (Bootstrap) CSS classes', '#6aa6d8'],
|
||||
[
|
||||
'Atoms',
|
||||
'shared/ui/button, text-input …',
|
||||
'thin wrappers over CIBG Huisstijl (Bootstrap) CSS classes',
|
||||
'#6aa6d8',
|
||||
],
|
||||
].map(([name, where, why, bg], i) => (
|
||||
<div key={name} style={{ background: bg, color: '#fff', padding: '0.75rem 1rem', borderRadius: '6px', marginLeft: `${i * 1.5}rem` }}>
|
||||
<div
|
||||
key={name}
|
||||
style={{
|
||||
background: bg,
|
||||
color: '#fff',
|
||||
padding: '0.75rem 1rem',
|
||||
borderRadius: '6px',
|
||||
marginLeft: `${i * 1.5}rem`,
|
||||
}}
|
||||
>
|
||||
<strong>{name}</strong> <span style={{ opacity: 0.85 }}>— {why}</span>
|
||||
<div style={{ fontFamily: 'monospace', fontSize: '0.75rem', opacity: 0.8, marginTop: '0.2rem' }}>{where}</div>
|
||||
<div
|
||||
style={{ fontFamily: 'monospace', fontSize: '0.75rem', opacity: 0.8, marginTop: '0.2rem' }}
|
||||
>
|
||||
{where}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ We do not hand-write colours or spacing. `src/styles.scss` defines a semantic `-
|
||||
vocabulary and redefines every one of those tokens onto the vendored **CIBG Huisstijl**
|
||||
(Bootstrap 5.2) values — `--bs-*`/`--ro-*` custom properties where one exists, CIBG palette hex
|
||||
otherwise (that one file is exempt from `npm run check:tokens`, which fails the build on any
|
||||
*other* hardcoded hex colour in atoms/molecules/chrome). The `--rhc-*` names are an internal
|
||||
_other_ hardcoded hex colour in atoms/molecules/chrome). The `--rhc-*` names are an internal
|
||||
alias set now; the values are CIBG's.
|
||||
|
||||
**Prefer a CIBG class over a token where one exists** — `.btn`, `.form-control`, `.card`,
|
||||
@@ -27,7 +27,11 @@ export const Resolved = ({ token }) => {
|
||||
useLayoutEffect(() => {
|
||||
if (ref.current) setVal(getComputedStyle(ref.current).getPropertyValue(token).trim());
|
||||
}, [token]);
|
||||
return <span ref={ref} style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#666' }}>{val || '…'}</span>;
|
||||
return (
|
||||
<span ref={ref} style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#666' }}>
|
||||
{val || '…'}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
## When to use which token
|
||||
@@ -43,12 +47,19 @@ export const Resolved = ({ token }) => {
|
||||
## Spacing scale — `--rhc-space-max-*`
|
||||
|
||||
<div style={{ display: 'grid', gap: '0.4rem', margin: '1rem 0' }}>
|
||||
{['xs','sm','md','lg','xl','2xl','3xl','4xl','5xl'].map((step) => {
|
||||
{['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((step) => {
|
||||
const token = `--rhc-space-max-${step}`;
|
||||
return (
|
||||
<div key={step} style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<code style={{ width: '12rem', fontSize: '0.78rem' }}>{token}</code>
|
||||
<div style={{ height: '1rem', width: `var(${token})`, background: 'var(--rhc-color-lintblauw-500)', borderRadius: '2px' }} />
|
||||
<div
|
||||
style={{
|
||||
height: '1rem',
|
||||
width: `var(${token})`,
|
||||
background: 'var(--rhc-color-lintblauw-500)',
|
||||
borderRadius: '2px',
|
||||
}}
|
||||
/>
|
||||
<Resolved token={token} />
|
||||
</div>
|
||||
);
|
||||
@@ -57,7 +68,14 @@ export const Resolved = ({ token }) => {
|
||||
|
||||
## Semantic colours
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr))', gap: '0.75rem', margin: '1rem 0' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr))',
|
||||
gap: '0.75rem',
|
||||
margin: '1rem 0',
|
||||
}}
|
||||
>
|
||||
{[
|
||||
'--rhc-color-foreground-default',
|
||||
'--rhc-color-foreground-subtle',
|
||||
@@ -72,7 +90,9 @@ export const Resolved = ({ token }) => {
|
||||
<div key={token} style={{ border: '1px solid #ddd', borderRadius: '6px', overflow: 'hidden' }}>
|
||||
<div style={{ height: '3rem', background: `var(${token})` }} />
|
||||
<div style={{ padding: '0.4rem 0.5rem' }}>
|
||||
<div style={{ fontFamily: 'monospace', fontSize: '0.72rem', wordBreak: 'break-all' }}>{token}</div>
|
||||
<div style={{ fontFamily: 'monospace', fontSize: '0.72rem', wordBreak: 'break-all' }}>
|
||||
{token}
|
||||
</div>
|
||||
<Resolved token={token} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import * as AsyncStories from '../app/shared/ui/async/async.stories';
|
||||
|
||||
# Functional programming in the UI
|
||||
|
||||
The components in this library are the *view*. Behind them, three small functional tools do
|
||||
The components in this library are the _view_. Behind them, three small functional tools do
|
||||
the heavy lifting — all so that **illegal states can't be represented**. This page is the
|
||||
Storybook front door; the full narrative lives in `docs/fp-tea-atomic-design.md`, and a
|
||||
side-by-side "before/after" runs at the app's **`/concepts`** route.
|
||||
@@ -25,7 +25,7 @@ construction:
|
||||
|
||||
`src/app/shared/application/store.ts` + the `*.machine.ts` files. State is one tagged-union
|
||||
value; the template never mutates it, it `dispatch`es a message and a **pure**
|
||||
`reduce(model, msg)` returns the next state. Side effects live in a *command*, never in the
|
||||
`reduce(model, msg)` returns the next state. Side effects live in a _command_, never in the
|
||||
reducer:
|
||||
|
||||
```ts
|
||||
@@ -45,7 +45,7 @@ Because state is one value, the whole thing is inspectable and every transition
|
||||
|
||||
`src/app/registratie/domain/value-objects/`. A `Postcode` is a distinct type from `string`,
|
||||
mintable only through `parsePostcode`, which returns a `Result`. Once you hold the type, you
|
||||
never re-check it — the type *is* the proof. Compose the parse pipeline with the `Result`
|
||||
never re-check it — the type _is_ the proof. Compose the parse pipeline with the `Result`
|
||||
combinators in `src/app/shared/kernel/fp.ts` (`map`, `mapErr`, `andThen`, `fold`) rather than
|
||||
hand-branching `r.ok ? … : …` at every step.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user