@aveonline/ui-react/README.md

Home base for Aveonline design system - ecosystem react

<div align="center">
  <img height="70" src="https://user-images.githubusercontent.com/38017835/236567288-5cc2dd3b-95f7-413b-9fd1-208d4b4d5654.png">
  <h1 align="center">ui ecosystem react</h1>
  <p>The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.</p>
  <a href="https://ui-aveonline.netlify.app/">Go Storybook</a>
</div>

<br>

<p align="center">
  <a href="https://github.com/Development-Aveonline/ui-react/actions/workflows/ci.yml">
    <img src="https://github.com/Development-Aveonline/ui-react/actions/workflows/ci.yml/badge.svg?event=pull_request" alt="UI CI">
  </a>
</p>

<br />

## Before started

For usage with tailwind config, install:

```shell
npm i @tailwindcss/forms -D
```

## Getting started

Working with all config from this library or only components availables

```shell
npm i @aveonline/ui-react
```

## Usage with tailwind

Import things into your JS app from the `@aveonline/ui-react` package.

```ts
import { Button } from '@aveonline/ui-react'
```

`tailwind.config.js`

```ts
/** @type {import('tailwindcss').Config} */

const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')

tailwindConfig.content = [
  './pages/**/*.{ts,tsx}',
  './components/**/*.{ts,tsx}',
  './node_modules/@aveonline/ui-react/dist/ui-react.mjs'
]

module.exports = tailwindConfig
```

## Usage css

Import things into your JS app from the `@aveonline/ui-react` package.

```css
/* global.css or tailwind.css local */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```ts
// import this lines at main.ts or root
import './global.css' // Reference tailwind local
import '@aveonline/ui-react/reset.css' // Only not usage tailwind
import '@aveonline/ui-react/tokens.css' // Required
import '@aveonline/ui-react/tailwind.css' // Required
import '@aveonline/ui-react/index.css' // Required
```

## Example usage class with tailwind

```html
<!-- Class from library -->
<section class="bg-letter-default">
  <p class="text-letter-subdued">Hello human</p>
</section>
```

## Resources

- [Docs](https://ui-aveonline.netlify.app/)

## Development 🚀

- See [Contributing.md](https://github.com/Development-Aveonline/ui-react/blob/develop/CONTRIBUTING.md) for more information on how to build `@aveonline/ui-react` from the source and contribute!