https://github.com/t4y3/fig
library for gallery of Riot tag
https://github.com/t4y3/fig
hyperapp javascript riot riotjs storybook styleguide styleguidist
Last synced: 6 months ago
JSON representation
library for gallery of Riot tag
- Host: GitHub
- URL: https://github.com/t4y3/fig
- Owner: t4y3
- License: mit
- Created: 2017-11-29T12:37:58.000Z (almost 8 years ago)
- Default Branch: develop
- Last Pushed: 2023-01-04T21:37:25.000Z (almost 3 years ago)
- Last Synced: 2025-04-12T23:09:55.310Z (6 months ago)
- Topics: hyperapp, javascript, riot, riotjs, storybook, styleguide, styleguidist
- Language: JavaScript
- Homepage: https://fig-example.netlify.com/
- Size: 3.11 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fig
[](https://github.com/t4y3/fig/blob/master/LICENSE)
[](https://www.npmjs.com/package/@t4y3/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
```bash
npm i @t4y3/fig
```
## Usage
### In local environment
```bash
# Server start
fig-start
```
Access `localhost: 8080`
### Hosting a style guide
- Please build and generate a static file
```bash
# Generate static file
fig-build
# or Specify the dist directory(default: dist)
fig-build docs
```
## Configuration
```sh
.fig/config.js
.fig/head.html
path/to/fig.js
```
### .fig/config.js
Set the following rule in `.fig/config.js`.
```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
```html
```
- Add resources other than bundle files.
- It will be added in the head tag.
### `fig.js`.
```js
const InFig = require('@t4y3/fig');
InFig.set('Button')
.add('red', () => {
return ``
}, {
type: 'red'
})
.add('blue', () => {
return ``
}, {
type: 'blue'
});
```
## Development
#### Installing
```sh
# Install npm packages
npm i
```
### Running
```sh
# build & watch
npm run watch
# example start
npm start
```
### Before commitment
```sh
# bundle
npm run build
```
#### Library
- [Hyperapp](https://github.com/jorgebucaran/hyperapp) - View
## Deployment(git-flow)
```sh
# 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`
```