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
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
- default:
-
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`