PTF UI (WIP)

PowerToFly UI kit. Includes:

• Theme engine
• UI components (low and mid. level)
• UI hooks
• Styleguide

Setup

1. Create a personal access token
2. Set URL of scoped package:

$ npm config set @ptf:registry https://gitlab.com/api/v4/projects/35502819/packages/npm/

3. Add the token for the scoped package URL. Replace <your_token> with the token generated in step1:

$ npm config set -- '//gitlab.com/api/v4/projects/35502819/packages/npm/:_authToken' "<your_token>" 

Development

1. Install deps for the lib and the styleguides:

$ yarn install

2. Run development environment for the styleguides:

$ yarn dev

3. Add your changes...

4. Run Tests:

$ cd ptf-ui
$ npm run tests

5. Commit your changes

Publishing updated version

1. From the ptf-ui directory, run the following command, replacing <update_type> with one of the semantic versioning release types (major, minor or patch):

$ cd ptf-ui
$ npm version <update_type>

2. Open a Merge Request, get a Code Review approval and after getting your changes merged to the main branch, run the following command to publish an updated version number:

$ npm publish

Deploying Storybook

1. From the ptf-ui directory, run the following command:

$ npm run chromatic --auto-accept-changes

or

$ yarn run chromatic --auto-accept-changes

Using the PowerToFly UI Library

1. Install it:

$ yarn add @ptf/ui

or

$ npm install --save @ptf/ui

2. Import needed components:

import {Button} from `@ptf/ui`

Output

Bundled CJS. Non-bundled ESM. Types.

Dependencies

Direct

• Classnames (reexported)
• Fresnel (reexported)
• Inline-Style-Prefixer (reexported)
• Kecasn

Peer

• React
• Styled-JSX or NextJS
• FontAwesome Core
• FontAwesome Brand Icons
• FontAwesome PRO Solid Icons
• React FontAwesome
• Semantic UI React

Related Resources:

• Build pipeline POC