frogkit

Smartfrog UI Components Library

Installation

using yarn

yarn add @smartfrog/frogkit

using npm

npm i -S @smartfrog/frogkit

Usage

component are availabale under src/component folder

use a global component

import button from '@smartfrog/frogkit/src/components/button'

Vue.component(button.name, button)

use a component when it's needed

import button from '@smartfrog/frogkit/src/components/button'

export default {
    name: 'Example',
    components: { button },
  }

icons

1. place SVG files inside src/assets/icons

NOTE: make sure that the SVG file contain viewBox attribute

2. run yarn icon the script will optimise the SVG and generate an icon component for it

social icons

1. place a social icon SVG file inside src/assets/social/base

2. run yarn social-icon the script will update the social icons sprite (image and css) adding the new one

Contribution

1. Fork the repo

2. install dependencies

yarn

3. Start the storybook

yarn storybook

4. Build component

5. Add Story for it

6. Cover it with test

7. Make sure that the test is passing

yarn test

8. Open a PR!

Semantic Release

We use semantic release now to control the version and to publish to npm registry. According to the commit message we decide what the next version would be. Please check the following table:

| Commit message | Update | |----------------|:---------:| | feat | Major | | fix | Minor | | docs | Patch | | style | Patch | | refactor | Minor | | perf | Patch | | test | Patch | | build | Patch | | ci | Patch | | chore | Patch | | revert | Minor |

Happy Coding!