Design system
The parts of the TaxMaxi app, each on its own stage, and the blocks that put them together the way the pages do.
Components and blocks
A component is one thing the app shows, alone on a stage, with a strip of mock states under it. The strip is how a state is looked at without the data that would bring it about: a failed sync, a card that is syncing, a sheet with nothing in it.
A block is components put together the way a page puts them together. The Home block is the fan over the content sheet. The product's pages are made of blocks, so what is right on a block is right on the page.
How one is built
One struct, one template, and one small script where the browser has to do work. The struct is the view: strings and flags the template renders, nothing the template has to work out. Mocks are typed values of that struct. Real data arrives later, through the same struct.
A component that holds other components, like the sheet, takes what it holds as rendered HTML. The block renders the inner component with partial and hands the result to the outer one, so the outer one never knows what is inside it.
The strip's pills are URLs next to the handlers that answer them, in mocks.go. A pill swaps the stage; the controller morphs what changed and keeps what did not, so a card mid-motion stays mid-motion.
Rules
- Every state a component can be in has a pill. If it cannot be looked at here, it is not done.
- Check a change on its stage in both themes and at phone width before calling it done.
- Styles are Tailwind classes in the templates. After changing them, rebuild the CSS; after changing a template, restart the server.
- No abstraction until a third use asks for it. Two copies are cheaper than the wrong shared thing.
Where things live
- island/, sources/, sheet/
- the view structs and mock values, one package per component
- blocks.go
- the blocks' views, composed from the packages above
- templates/
- one file per component or block, with its stage
- static/
- the controllers, plain scripts, one per component that needs one
- mocks.go
- the strips: which pills, which URLs
- tailwind/
- the tokens and the build that writes static/island.css