# agave-ui

Latest version **1.2.1** (published 2021-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install agave-ui
pnpm add agave-ui
yarn add agave-ui
bun add agave-ui
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2021-09-29 |
| First published | 2021-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 78 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 99minutos |
| Maintainers | jesusmb, agave-ui-99minutos |

## Links

- npm: https://www.npmjs.com/package/agave-ui
- Repository: https://github.com/99minutos/agave-ui
- Homepage: https://github.com/99minutos/agave-ui#readme
- Issues: https://github.com/99minutos/agave-ui/issues
- npm.io page: https://npm.io/package/agave-ui

## Dependencies (3)

- [styled-components](https://npm.io/package/styled-components.md) ^4.4.1
- [@storybook/addon-docs](https://npm.io/package/@storybook/addon-docs.md) ^6.3.8
- [@types/enzyme-adapter-react-16](https://npm.io/package/@types/enzyme-adapter-react-16.md) ^1.0.6

## Recent versions

- 1.2.1 (latest) — 2021-09-29
- 1.2.0 — 2021-09-28
- 1.1.4 — 2021-09-27
- 1.1.3 — 2021-09-24
- 1.1.2 — 2021-09-23
- 1.1.1 — 2021-09-22
- 1.1.0 — 2021-09-22
- 1.0.3 — 2021-09-20
- 1.0.2 — 2021-08-18
- 1.0.0 — 2021-07-10
- 0.1.0 — 2021-06-29

## README

<!-- PROJECT LOGO -->
<br />
<p align="center">
  <a href="https://github.com/99minutos/agave-ui">
    <img src="https://raw.githubusercontent.com/zuritrujillo/99MinutosUI-Style-Guide/08fb12677c658926d2666877ce196c78402d37b8/resources/99Minutos-logos/99simple-logo.svg" alt="Logo" width="80" height="80">
  </a>

  <h1 align="center">Agave UI</h1>

  <p align="center">
    99minutos Design system library
    <br />
    <a href="https://99minutosworkspace.atlassian.net/wiki/spaces/DS99/overview"><strong>Explore the docs »</strong></a>
    <br />
    <br />
    <a href="https://agave-ui.x.99minutos.tech/?path=/story/intro--page">View Demo</a>
    ·
    <a href="https://www.npmjs.com/package/agave-ui">View NPM</a>
    ·
    <a href="https://github.com/99minutos/agave-ui/issues">Report Bug</a>
    ·
    <a href="https://github.com/99minutos/agave-ui/pulls">Request Feature</a>
  </p>
</p>

<!-- TABLE OF CONTENTS -->
<details open="open">
  <summary><h2 style="display: inline-block">Table of Contents</h2></summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#deployment">Deployment</a></li>
    <li><a href="#roadmap">Roadmap</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#acknowledgements">Acknowledgements</a></li>
  </ol>
</details>

<!-- ABOUT THE PROJECT -->

## About The Project

Agave UI is a design system created by 99minutos to help teams build high-quality digital experiences clients products.
![Agave UI Screen Shot](ageve-ui-demo.png)

### Built With

- [Node.js](https://nodejs.org/en/)
- [React.js](https://reactjs.org/)
- [Storybook](https://storybook.js.org/)
- [Sass](https://sass-lang.com/)

<!-- GETTING STARTED -->

## 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](http://nodejs.org/) and download the latest recommended version and install them. The installation now include [NPM](https://npmjs.org/).

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

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

### Installation

1. Clone the repo

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

2. Go to the folder

```bash
cd agave-ui
```

3. Install NPM packages

```bash
npm install
```

<!-- USAGE EXAMPLES -->

## Usage

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

### Run storybook

Run the storybook server:

```bash
npm run dev
```

Open [http://localhost:6006/](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:

```bash
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

```bash
docker build -t my-storybook .
```

- Run

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

Open [http://localhost:3006/](http://localhost:3006/)

---

_For more examples, please refer to the [Documentation](https://99minutosworkspace.atlassian.net/wiki/spaces/DS99/overview?homepageId=735150205)_

<!-- DEPLOYMENT -->

## 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

```bash
npm run lint
```

- Test - Unit tests

```bash
npm run rest
```

- Build

```bash
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

```bash
npm login
```

- Create new version

```bash
npm version major -m "Message of new release"
```

- Publish with public access

```bash
npm publish --access public
```

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

```bash
npm run commit
```

<!-- ROADMAP -->

## Roadmap

See the [Project Road Map](https://99minutosworkspace.atlassian.net/jira/software/projects/DS99/boards/56/roadmap) for the planning of the project.

<!-- CONTACT -->

## Contact

Eduardo Carrada - [@github](https://github.com/ecarradal) - eduardo.carrada@99minutos.com

---

## Acknowledgements

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

---
_Source: https://npm.io/package/agave-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._