{"id":20441139,"url":"https://github.com/t4y3/fig","last_synced_at":"2025-04-12T23:10:00.836Z","repository":{"id":44177155,"uuid":"112473667","full_name":"t4y3/fig","owner":"t4y3","description":"library for gallery of Riot tag","archived":false,"fork":false,"pushed_at":"2023-01-04T21:37:25.000Z","size":3259,"stargazers_count":6,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-04-12T23:09:55.310Z","etag":null,"topics":["hyperapp","javascript","riot","riotjs","storybook","styleguide","styleguidist"],"latest_commit_sha":null,"homepage":"https://fig-example.netlify.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t4y3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-29T12:37:58.000Z","updated_at":"2021-05-12T02:01:24.000Z","dependencies_parsed_at":"2023-02-02T20:45:16.897Z","dependency_job_id":null,"html_url":"https://github.com/t4y3/fig","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ffig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ffig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ffig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4y3%2Ffig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t4y3","download_url":"https://codeload.github.com/t4y3/fig/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643004,"owners_count":21138355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hyperapp","javascript","riot","riotjs","storybook","styleguide","styleguidist"],"created_at":"2024-11-15T09:30:11.990Z","updated_at":"2025-04-12T23:10:00.809Z","avatar_url":"https://github.com/t4y3.png","language":"JavaScript","readme":"# Fig\n\n[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/t4y3/fig/blob/master/LICENSE)\n[![Version](https://img.shields.io/badge/dynamic/json.svg?label=version\u0026colorB=5f9ea0\u0026query=$.version\u0026uri=https:%2F%2Fraw.githubusercontent.com%2Ft4y3%2Ffig%2Fmaster%2Fpackage.json\u0026prefix=v)](https://www.npmjs.com/package/@t4y3/fig)\n\nFig - library for gallery of Riot tag  \nYou can check each component like a React Styleguidist by list.  \nIt is also possible to check only specific component information.  \nhttps://www.npmjs.com/package/@t4y3/fig\n\n## Demo\n- https://fig-example.netlify.com/\n\n## Capture\n### Index Page\n![index](https://user-images.githubusercontent.com/9010553/44952242-babc0d00-aeb5-11e8-8198-b4a7b388d970.png)\n\n### Other pages\nComponent|Types of Component|Full\n:--:|:--:|:--:\n![components](https://user-images.githubusercontent.com/9010553/44952239-b98ae000-aeb5-11e8-99c9-fe12a5292f80.png)|![components type](https://user-images.githubusercontent.com/9010553/44952240-ba237680-aeb5-11e8-86eb-6c258e8c93aa.png)|![full](https://user-images.githubusercontent.com/9010553/44952241-ba237680-aeb5-11e8-9c59-5cefed0b17b6.png)\n\n\n\n## Description\nMount the custom tag specified in tags in the iframe.  \nIt is for displaying and confirming the custom tag created.  \nUse it like a style guide.\n\n## Install\n```bash\nnpm i @t4y3/fig\n```\n\n## Usage\n### In local environment\n```bash\n# Server start\nfig-start\n```\n\nAccess `localhost: 8080`\n\n### Hosting a style guide\n- Please build and generate a static file\n\n```bash\n# Generate static file\nfig-build\n# or Specify the dist directory(default: dist)\nfig-build docs\n```\n\n\n\n## Configuration\n```sh\n.fig/config.js\n.fig/head.html\npath/to/fig.js\n```\n\n### .fig/config.js\nSet the following rule in `.fig/config.js`.\n\n```js\nmodule.exports = {\n  'title': 'Your project name',\n  'bundle': 'dist/bundle.js',\n  'figures': [\n    'path/to/components1/fig.js',\n    'path/to/components2/fig.js',\n    'path/to/components3/fig.js'\n  ]\n};\n\n\n```\n- `title` - Title of the Styleguide\n  - default: `Fig`\n- `bundle` - files required to display custom tags\n\n### .fig/head.html\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/style.css\"\u003e\n\u003cscript type=\"text/javascript\" src=\"path/to/script.js\"\u003e\u003c/script\u003e\n```\n- Add resources other than bundle files.\n- It will be added in the head tag.\n\n### `fig.js`.\n\n```js\nconst InFig = require('@t4y3/fig');\n\nInFig.set('Button')\n  .add('red', () =\u003e {\n      return `\u003cmy-button type=\"{ type }\" text=\"click\"\u003e\u003c/my-button\u003e`\n    }, {\n      type: 'red'\n    })\n  .add('blue', () =\u003e {\n      return `\u003cmy-button type=\"{ type }\" text=\"click\"\u003e\u003c/my-button\u003e`\n    }, {\n      type: 'blue'\n    });\n\n```\n\n## Development\n\n#### Installing\n```sh\n# Install npm packages\nnpm i\n```\n\n### Running\n```sh\n# build \u0026 watch\nnpm run watch\n\n# example start\nnpm start\n```\n\n### Before commitment\n\n```sh\n# bundle\nnpm run build\n```\n\n#### Library\n- [Hyperapp](https://github.com/jorgebucaran/hyperapp) - View\n\n## Deployment(git-flow)\n```sh\n# Checkout Release branch from `develop`\ngit checkout -b release/x.x.x\n\n# Version Up\nnpm version major|minor|patch\n\n# Publishes a package to the registry\nnpm publish\n\n# Update master branch\ngit push origin release/x.x.x\n\n# Push git tags\ngit push origin --tags\n\n# Merge `release/x.x.x` into `master`\n\n# Merge `release/x.x.x` into `develop`\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4y3%2Ffig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft4y3%2Ffig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4y3%2Ffig/lists"}