FacilisUi

FacilisUi is a small simple and clean react UI library (facilis directly translating to easy from latin to english).

Installation

To install FacilisUi, run the following in your terminal of choice:

npm install facilisui

Each Ui element has its own individual npm package that can be installed. As an example, to install the Button component, run the following command in your terminal:

npm install @facilisui/button

Local Development

Installation

It is recommended to have either NVS or NVM installed to switch to the version of node that this project depends on.

This project utilizes storybook to visualize changes as your developing components.

1. Start by cloning the repository

git clone [email protected]:Zynorthis/facilisui.git

2. Switch to the project's current version of node

# NVS
nvs install [node-version]
nvs use [node-version]

# NVM
nvm install [node-version]
nvm use [node-version]

3. Install npm packages and dependencies

npm install

4. Start local storybook server

npm run storybook

Formatting

FacilisUi utilizes prettier to keep code format uniform throughout the project. There is a pipeline job within Gitlab that has been configured to not pass unless prettier formatting rules have been met. Many IDEs can be configured to run prettier automatically when a file is saved. If you choose not to have your IDE configured in this way, you can instead manually run prettier in your terminal.

# Check prettier format against currect changes
npm run prettier-ci

# Apply prettier format rules to all files
npm run prettier

Testing

There currently is no end-to-end testing setup for this project. In the future I would like to explore storybook's test suite options.

Before committing your changes, manually test component changes through storybook locally.

Contributing Changes

All changes must be submitted through a Merge Request on Gitlab. If changes are related to a specific issue in Gitlab, make sure to tag the issue in your Merge Request. Merge Request into the main branch will require approval from an approved repo maintainer.

Coding Standards

When working with CSS in any of the component libraries, it is important to remember to use the recommended color palette for any new or existing component.

Deployment

To deploy a new version of FacilisUi update the npm package version in the package.json, and create a new pipeline on the main branch. In the new pipeline, run the plan_deploy job to do a dry-run to npm and confirm what will be deployed. Afterwards, run the apply_deploy job to push the new version to npm.

Both the plan_deploy and apply_deploy jobs authenticate to npm using an npm auth token that is saved as a repository variable.

Each individual component has its own package that can be deployed to npm. After updated the component specific npm package version in its package.json, use the component specific plan and apply jobs to deploy component changes after deploying the main facilisui package.

Roadmap

The current list of planned components to add by phase are:

Phase One:

• [x] Button
• [ ] Card
• [x] Input
• [ ] TextArea
• [ ] Text
• [x] Pill

Phase 2:

• [ ] Checkbox
• [ ] Switch
• [ ] Note
• [ ] Dropdown
• [ ] Toast