https://github.com/egoist/demoboard

Demonstrating your UI components with ease, a Storybook alternative.
https://github.com/egoist/demoboard

Last synced: 4 months ago
JSON representation

Demonstrating your UI components with ease, a Storybook alternative.

• Host: GitHub
• URL: https://github.com/egoist/demoboard
• Owner: egoist
• License: mit
• Created: 2019-07-04T14:07:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T21:32:43.000Z (about 2 years ago)
• Last Synced: 2024-10-23T11:37:28.716Z (4 months ago)
• Language: JavaScript
• Homepage: https://demoboard.org
• Size: 1.38 MB
• Stars: 82
• Watchers: 2
• Forks: 9
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - demoboard

README

        
# Demoboard

[![NPM version](https://badgen.net/npm/v/demoboard)](https://npmjs.com/package/demoboard) [![NPM downloads](https://badgen.net/npm/dm/demoboard)](https://npmjs.com/package/demoboard) [![CircleCI](https://badgen.net/circleci/github/egoist/demoboard/master)](https://circleci.com/gh/egoist/demoboard/tree/master) [![donate](https://badgen.net/badge/support%20me/donate/ff69b4)](https://patreon.com/egoist) [![chat](https://badgen.net/badge/chat%20on/discord/7289DA)](https://chat.egoist.moe)

## Table of Contents

- [Install](#install)

- [Basic Usage](#basic-usage)

- [Guide](#guide)

  - [React Components](#react-components)

  - [Vue Components](#vue-components)

  - [Customize Homepage](#customize-homepage)

  - [Customize Site Title](#customize-site-title)

  - [Display Source Code](#display-source-code)

  - [Display README for Each Demo](#display-readme-for-each-demo)

- [Contributing](#contributing)

- [Author](#author)

## Install

```bash

yarn add demoboard

```

## Basic Usage

[![Edit Demoboard Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/demoboard-example-eplue?fontsize=14)

```js

import React from 'react'

import { create, mount } from 'demoboard'

// A component that you want to demonstrate

import Button from './Button'

// Create a demoboard instance

const demoboard = create()

// Add a section to demonstrate the `Button` component

demoboard

  .section('Buttons')

  .add('Primary Button', {

    // `component` should be a React component

    component: () => Primary Button

  })

  .add('Success Button', {

    component: () => Success Button

  })

// Mount the demoboard to given selector

mount(demoboard, '#app')

```

## Guide

### React Components

It just works™.

### Vue Components

Just convert your Vue component into React component with [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):

```js

import toReact from '@egoist/vue-to-react'

import Button from './Button.vue'

demoboard.addDecorator(item => {

  const Component = item.options.component

  item.options.component = toReact(Component)

})

demoboard.section('Buttons').add('Primary Button', {

  component: Button

})

```

### Customize Homepage

```js

import { create, mount } from 'demoboard'

const demoboard = create()

const readme = `
Hello
`

// Or

// const readme = () => 
Hello


mount(demoboard, '#app', {

  readme

})

```

`readme` should be a Markdown string.

### Customize Site Title

```js

import { create, mount } from 'demoboard'

const demoboard = create()

mount(demoboard, '#app', {

  title: 'My Demo'

})

```

Then `title` defaults to `Demoboard`.

### Display Source Code

```js

demoboard.section('Buttons')

  .add('Primary Button', {

    component: () => Primary Button,

    code: `Primary Button,`

    // Optional, default to `js`

    codeLang: 'js'

  })

```

### Display README for Each Demo

```js

demoboard.section('Buttons').add('Danger Button', {

  component: () => Danger Button,

  readme: `Used to trigger a dangerous operation.`

})

```

`readme` should be a Markdown string.

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :D

## Author

**demoboard** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.


Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/demoboard/contributors)).

> [github.com/egoist](https://github.com/egoist) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)