Agave UI

99minutos Design system library
Explore the docs »

View Demo · View NPM · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Deployment
5. Roadmap
6. Contact
7. Acknowledgements

About The Project

Agave UI is a design system created by 99minutos to help teams build high-quality digital experiences clients products.

Built With

• Node.js
• React.js
• Storybook
• Sass

Getting Started

To run a development server follow these steps.

Prerequisites

For development, you will only need Node.js installed on your environement.

Node

Go the following link following link Node and download the latest recommended version and install them. The installation now include NPM.

You should be able to run the following command after the installation procedure below.

$ node --version
  v14.17.3
$ npm --version
  v6.14.13

Installation

1. Clone the repo

https://github.com/99minutos/agave-ui

2. Go to the folder

cd agave-ui

3. Install NPM packages

npm install

Usage

Agave UI runs with storybook & uses SASS for a more maintainable and scalable styles

Run storybook

Run the storybook server:

npm run dev

Open http://localhost:6006/ with your browser to see the result.

Changes in atomics

In case to edit atomic styles src/sass run the following command:

npm run watchSass

This command converts your sass styles to a css in file styles/index.css to be used for a development.

Run with Docker

• Build docker

docker build -t my-storybook .

• Run

docker run -d -p 3006:80 my-storybook

Open http://localhost:3006/

---

For more examples, please refer to the Documentation

DEPLOYMENT

Demo environment

For deployments in the demo environment the project has CI/CD configured, The trigger actives every time that a change in Main branch is detected.

To ensure the quality of the code the deployments only is performed when the following pipes are passed correctly

• Lint
• Test
• Build
• Works right with all Node versions >= to 10.x

You can test mostly of the pipes in your local running the following commands

• Link

npm run lint

• Test - Unit tests

npm run rest

• Build

npm run build

NPM

The publish of NPM is only executed when all the improvements they were approved by the committee

• Login with organization or npm agave-ui account

npm login

• Create new version

npm version major -m "Message of new release"

• Publish with public access

npm publish --access public

• Commit For all commits after changes added on the stage is required this command

npm run commit

Roadmap

See the Project Road Map for the planning of the project.

Contact

Eduardo Carrada - @github - [e-mail]

---

Acknowledgements

The greatest thanks to the design system committee, without their participation this project would not be possible.