Proof of Concept: Docs folder contains generic stories #693
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
FinnWard
left a comment
FinnWard
left a comment
There was a problem hiding this comment.
Ik weet niet of je hierop zat te wachten maar ik heb me gedacahten even gedeeld over de PR :). Maar lekker bezig. ik denk inderdaad een generieke docspacakge waar je non framework specifieke docs kwijt kan heel chill is. Ook de scheiding dat je de docs wel beschikbaar stelt via een package zonder dat het in de dist van productie code komt vind ik een voordeel.
Laat maar weten als je hier nog verder over wil sparren!
There was a problem hiding this comment.
Ik denk dat het ook wel wat toe kan voegen om deze docs ook in de storybook css button te laten zien.
|
|
||
| const meta = { | ||
| title: 'CSS Components/Button', | ||
| argTypes: { |
There was a problem hiding this comment.
Ik mis de .nl-button__icon class hier nog
| @@ -0,0 +1,108 @@ | |||
| import type { Meta } from '@storybook/react-vite'; | |||
| import * as Stories from './button.stories'; | |||
There was a problem hiding this comment.
Aangezien dit niet de gebruikte story file neem ik aan dat we hier een export all kunnen doen ipv de exports onderaan de file.
De individuele exports moet wel voor de button.[css|react].stories.tsx zodat de story titles goed geformateerd worden in storybook.
| import * as Stories from './button.stories'; | |
| export * from './button.stories'; |
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: componentMarkdown, |
There was a problem hiding this comment.
deze component markdown zou ook in de button.css/react.meta.tsx geimporteerd kunnen worden toch? beide gelijk
| }, | ||
| codePanel: false, | ||
| canvas: { | ||
| sourceState: 'shown', |
| const CssButton = ({ label, children, ...props }: ButtonProps) => <Button {...props}>{children || label}</Button>; | ||
|
|
||
| export default { | ||
| ...merge({}, cssStoriesMeta, { |
There was a problem hiding this comment.
Ik denk dat je een groot deel van deze meta die gemerged word in een generieke css helper functie zou kunnen.
| @@ -1 +1 @@ | |||
| # Button | |||
| Een button wordt gebruikt om een actie mee uit te voeren | |||
There was a problem hiding this comment.
De verwoording is net wat anders dan op de website, is dat de bedoeling? Over de meeste beschrijvingen is door meerdere mensen uitgebreid nagedacht en gediscussieerd :) https://nldesignsystem.nl/button/
In de preview zitten twee
Buttonsecties.De stories zijn identiek. Door een herexport op een paar plekken gebruiken beide Documentatie pagina's de zelfde stories (en dus beschrijvingen)
De story definities zitten in de
docspackage inplaats van destorybookpackage. Hierdoor zijn de stories onderdeel geworden van de documentatie en kunnen als zodanig ook gepubliceerd worden. De React en CSS meta objecten zijn hier ook in terug te vinden. In deze meta objecten zijn de props, attributes en classes gedocumenteerd.In de storybook package zijn twee files (
button.css.stories.tsxenbutton.react.stories.tsx) toegevoegd. Deze importeren de generieke stories file en de respectievelijke meta file uit dedocsfolder. Deze twee files her-exporteren enkel de al bestaande stories. Op deze plek is er ook de mogelijkheid om hetmetaobject uit te breiden. Zo is er in debutton.css.stories.tsxfile voor gekozen om decode(onder elke story) de gerenderde HTML te laten zijn, ipv de React implementatie.Ook is het mogelijk om het daadwerkelijke component dat gebruikt wordt om te renderen iets aan te passen zodat het beter passend is bij wat er gedocumenteerd wordt.
Op deze manier is het CSS component geheel als CSS component te documenteren maar toch de zelfde stories aan te houden.