https://github.com/skilld-labs/drupal-umami-sdc-dynamic-storybook
Rendering SDC in storybook with custom indexing
https://github.com/skilld-labs/drupal-umami-sdc-dynamic-storybook
Last synced: 3 months ago
JSON representation
Rendering SDC in storybook with custom indexing
- Host: GitHub
- URL: https://github.com/skilld-labs/drupal-umami-sdc-dynamic-storybook
- Owner: skilld-labs
- Created: 2023-08-28T09:23:45.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-28T10:04:20.000Z (almost 2 years ago)
- Last Synced: 2025-03-13T07:02:26.144Z (3 months ago)
- Language: Twig
- Size: 695 KB
- Stars: 3
- Watchers: 10
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Drupal-Umami-SDC-Dynamic-Storybook
Rendering SDC in storybook with custom indexing
## What is it?
This is umami theme from Drupal OOB demo_umami profile.
1. With recently created(not merged) Banner/Card/Title/Read-more SDC components:
https://git.drupalcode.org/project/drupal/-/merge_requests/4652
https://git.drupalcode.org/project/drupal/-/merge_requests/4651/diffs
2. With vite-html storybook + twig.js
3. With custom indexer for specific `*.dynamic-stories.js` which allows to check:
If story directory contains `*.component.yml` then its `props/slots` parsed as `args` and `argTypes` and automatically attached to stories. So minimal story will be:
```
export default {
title: 'Disclaimer',
};
export const Basic = {};
```
more info in `.storybook/addons/sdc-sb/compile.js` and
https://storybook.js.org/docs/react/configure/sidebar-and-urls#story-indexers
4. Some simple stories and styles added just to display Page and cards grid View in `./stories` directory.
## How to test?
- `yarn && yarn storybook` for dynamic testing.
- `yarn && yarn build-storybook` will generate static storybook which is presented in:
https://64eb6ad4ee3f7a70edb6fe5a--incredible-quokka-2f6254.netlify.app/?path=/story/page--basic
Or clone this theme into `/core/profiles/demo_umami/themes/` on 11.x Drupal and test on Drupal side how components work.
Spoiler warning
They work!
#### Any feedback will be much appreciated!