Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mkosir/story-tab
⚡ Create demo components in a zap
https://github.com/mkosir/story-tab
cli code-generator demo documentation documentation-tool react
Last synced: 21 days ago
JSON representation
⚡ Create demo components in a zap
- Host: GitHub
- URL: https://github.com/mkosir/story-tab
- Owner: demozap
- License: mit
- Created: 2019-12-10T20:58:13.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-12-04T20:35:17.000Z (about 1 month ago)
- Last Synced: 2024-12-15T04:34:11.578Z (29 days ago)
- Topics: cli, code-generator, demo, documentation, documentation-tool, react
- Language: TypeScript
- Homepage: https://demozap.github.io/demozap/
- Size: 9.83 MB
- Stars: 56
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - story-tab - [demo](https://mkosir.github.io/story-tab) - CLI tool for generating component code as documentation in Storybook tab. (Dev Tools / Miscellaneous)
README
# DemoZap ⚡
[![npm version][npm-badge]][npm-url]
[![CI][build-badge]][build-url]
[![semantic-release][semantic-badge]][semantic-url]
[![TypeScript][typescript-badge]][typescript-url]
_Create demo components in a zap_
Maintaining example code and demo separately makes it painful, it's easy to get them out of sync 🙅
Code can't lie, documentation can 💥
DemoZap CLI keeps your code up to date with demo 💪
[](https://demozap.github.io/demozap/?path=/story/examples--button-green)
## Usage
- Name component files as `[component_name].demozap.jsx`
- Run `npx demozap generate`
**Use created demos 🎉**
## [Demo 💥](https://demozap.github.io/demozap)
## Install
```bash
# React
npm install -D react-demo-tab
# Svelte
npm install -D svelte-demo-tab
# Vue
npm install -D vue-demo-tab
```
## Generated Demos
- Generated demo files are prefixed with `_`:
`MyComponent.demozap.jsx` → `_MyComponent.jsx`
- or set custom prefix:
`npx demozap generate --prefix=CustomPrefix`
## Built with DemoZap
- [React Tilt](https://github.com/mkosir/react-parallax-tilt) - [DemoZap](https://mkosir.github.io/react-parallax-tilt)
- [Mighty Mouse](https://github.com/mkosir/react-hook-mighty-mouse) - [DemoZap](https://mkosir.github.io/react-hook-mighty-mouse)
- [Magnetic Board](https://github.com/mkosir/react-magnetic-board) - [DemoZap](https://mkosir.github.io/react-magnetic-board)
## Manually create demos
To manually create demos use [DemoTab](https://github.com/demozap/react-demo-tab) component.
## Contributing
All contributions are welcome!
[npm-url]: https://www.npmjs.com/package/demozap
[npm-badge]: https://img.shields.io/npm/v/demozap.svg
[build-badge]: https://github.com/demozap/demozap/actions/workflows/main.yml/badge.svg
[build-url]: https://github.com/demozap/demozap/actions/workflows/main.yml
[semantic-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-url]: https://github.com/semantic-release/semantic-release
[typescript-badge]: https://badges.frapsoft.com/typescript/code/typescript.svg?v=101
[typescript-url]: https://github.com/microsoft/TypeScript