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`