element-book v23.4.2
element-book
An element-vir
drop-in element for building, testing, and demonstrating a collection of elements (or, in other words, a design system).
Installation
npm i element-book
Terminology
- Page: a group of pages and / or element examples. Pages can be infinitely nested.
- Element Example: an individual element example with independent state, styles, title, etc.
Usage
Define element-book pages with
defineBookPage
:import {defineBookPage} from '../data/book-entry/book-page/define-book-page.js'; export const myPage = defineBookPage({ /** Use `undefined` if your page is at the top level. */ parent: undefined, title: 'My Page', });
Inside of a page definition, define an element example:
import {html} from 'element-vir'; import {defineBookPage} from '../data/book-entry/book-page/define-book-page.js'; export const myPage = defineBookPage({ /** Use `undefined` if your page is at the top level. */ parent: undefined, title: 'My Page', defineExamples({defineExample}) { defineExample({ title: 'My Example', render() { return html` <p>Render your element here.</p> `; }, }); }, });
Instantiate an instance of the element book app into your app and pass in all your pages:
import {defineElementNoInputs, html} from 'element-vir'; import {ElementBookApp} from '../ui/elements/element-book-app/element-book-app.element.js'; import {myPage} from './define-page.example.js'; export const MyApp = defineElementNoInputs({ tagName: 'my-app', render() { return html` <${ElementBookApp.assign({ pages: [ myPage, ], })}></${ElementBookApp}> `; }, });
Why not Storybook?
Because Storybook is un-composable, impossible to debug, and full of behind-the-scenes *magic* that you can't backtrack without already understanding the inner workings of Storybook itself. With element-book
, it's all just imports that you can directly follow with the TypeScript compiler.
16 days ago
15 days ago
16 days ago
23 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
3 months ago
3 months ago
4 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago