init commit for iPAL-kit plugin

This commit is contained in:
2026-07-18 20:30:23 +02:00
parent 10638127a9
commit 5733a9c8bf
119 changed files with 6892 additions and 411 deletions
+63
View File
@@ -0,0 +1,63 @@
# blocks
`RenderBlocks` — generyczny, serwerowy silnik renderowania bloków. Plugin nie
zna Twoich bloków: iteruje po danych, mapuje `blockType` → komponent przez
registry (prop), obsługuje zagnieżdżanie i rozszerzenia per-blok. Bloki
(schemat + komponenty) definiujesz u siebie.
## Config
Brak opcji w payload.config — bloki definiujesz w swoich kolekcjach
(pole typu `blocks`). Plugin dostarcza tylko silnik renderujący.
## Front — RenderBlocks
Import z `ipal-kit/rsc` (to komponent serwerowy):
```tsx
import { RenderBlocks } from 'ipal-kit/rsc'
// Twój registry: blockType → komponent (komponenty są Twoje)
import { Hero } from '@/blocks/Hero'
import { FormBlock } from '@/blocks/FormBlock'
const registry = { hero: Hero, formBlock: FormBlock }
export default async function Page() {
const page = await payload.findByID({ collection: 'pages', id })
return <RenderBlocks blocks={page.layout} components={registry} />
}
```
- nieznany `blockType` → pomijany (null), nie crashuje
- każdy blok dostaje `_components` (mapę) — do rekursji zagnieżdżonych bloków
bez React Context (wymóg RSC)
## enhanceProps — logika per-blok bez wiedzy pluginu
Gdy blok potrzebuje danych z innych bloków (np. nawigacja zbierająca kotwice
z sekcji), podaj `enhanceProps`. Plugin go wywołuje, nie znając Twoich bloków:
```tsx
const enhanceProps = ({ block, allBlocks }) => {
if (block.blockType !== 'sectionNav') return {}
const sections = allBlocks
.filter((b) => b.blockType === 'anchoredSection')
.map((b) => ({ anchor: b.anchor, label: b.navLabel }))
return { _sections: sections }
}
<RenderBlocks blocks={page.layout} components={registry} enhanceProps={enhanceProps} />
```
## Komponent bloku
Każdy komponent dostaje dane bloku jako propsy (plus `_components`, plus to co
zwróci `enhanceProps`). Spacing/layout należą do Ciebie — silnik nie owija
bloków żadnym markupem.
```tsx
export function Hero(props) {
return <section className="py-16">{/* ... */}</section>
}
```