Fig

Fig - library for gallery of Riot tag
You can check each component like a React Styleguidist by list.
It is also possible to check only specific component information.
https://www.npmjs.com/package/@t4y3/fig

Demo

• https://fig-example.netlify.com/

Capture

Index Page

Other pages

Component	Types of Component	Full

Description

Mount the custom tag specified in tags in the iframe.
It is for displaying and confirming the custom tag created.
Use it like a style guide.

Install

npm i @t4y3/fig

Usage

In local environment

# Server start
fig-start

Access localhost: 8080

Hosting a style guide

• Please build and generate a static file

# Generate static file
fig-build
# or Specify the dist directory(default: dist)
fig-build docs

Configuration

.fig/config.js
.fig/head.html
path/to/fig.js

.fig/config.js

Set the following rule in .fig/config.js.

module.exports = {
  'title': 'Your project name',
  'bundle': 'dist/bundle.js',
  'figures': [
    'path/to/components1/fig.js',
    'path/to/components2/fig.js',
    'path/to/components3/fig.js'
  ]
};

• title - Title of the Styleguide
  • default: Fig
• bundle - files required to display custom tags

.fig/head.html

<link rel="stylesheet" href="path/to/style.css">
<script type="text/javascript" src="path/to/script.js"></script>

• Add resources other than bundle files.
• It will be added in the head tag.

fig.js.

const InFig = require('@t4y3/fig');

InFig.set('Button')
  .add('red', () => {
      return `<my-button type="{ type }" text="click"></my-button>`
    }, {
      type: 'red'
    })
  .add('blue', () => {
      return `<my-button type="{ type }" text="click"></my-button>`
    }, {
      type: 'blue'
    });

Development

Installing

# Install npm packages
npm i

Running

# build & watch
npm run watch

# example start
npm start

Before commitment

# bundle
npm run build

Library

• Hyperapp - View

Deployment(git-flow)

# Checkout Release branch from `develop`
git checkout -b release/x.x.x

# Version Up
npm version major|minor|patch

# Publishes a package to the registry
npm publish

# Update master branch
git push origin release/x.x.x

# Push git tags
git push origin --tags

# Merge `release/x.x.x` into `master`

# Merge `release/x.x.x` into `develop`