# aiq-design-system

Latest version **0.5.145** (published 2024-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install aiq-design-system
pnpm add aiq-design-system
yarn add aiq-design-system
bun add aiq-design-system
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.145 |
| Published | 2024-09-18 |
| First published | 2020-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 25 |
| Unpacked size | 825.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Maintainers | julianosirtori, felipemaccari, felipecousin |

## Links

- npm: https://www.npmjs.com/package/aiq-design-system
- Repository: https://github.com/aiqfome/aiq-design-system
- Homepage: https://github.com/aiqfome/aiq-design-system#readme
- Issues: https://github.com/aiqfome/aiq-design-system/issues
- npm.io page: https://npm.io/package/aiq-design-system

## Dependencies (25)

- [react](https://npm.io/package/react.md) ^17.0.2
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [rc-menu](https://npm.io/package/rc-menu.md) ^9.0.11
- [ts-jest](https://npm.io/package/ts-jest.md) ^26.4.1
- [chromatic](https://npm.io/package/chromatic.md) ^6.5.1
- [downshift](https://npm.io/package/downshift.md) ^6.0.6
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [dotenv-cli](https://npm.io/package/dotenv-cli.md) ^5.0.0
- [rc-tooltip](https://npm.io/package/rc-tooltip.md) ^5.0.1
- [typescript](https://npm.io/package/typescript.md) ^5.6.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.11.6
- [rc-dropdown](https://npm.io/package/rc-dropdown.md) ^3.2.0
- [react-dates](https://npm.io/package/react-dates.md) ^21.8.0
- [react-icons](https://npm.io/package/react-icons.md) ^3.11.0
- [react-table](https://npm.io/package/react-table.md) ^7.6.0
- [react-spring](https://npm.io/package/react-spring.md) 9.6.1
- [styled-system](https://npm.io/package/styled-system.md) ^5.1.5
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.2
- [react-input-mask](https://npm.io/package/react-input-mask.md) ^2.0.4
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.5
- [react-test-renderer](https://npm.io/package/react-test-renderer.md) ^16.13.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.0.4
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [react-docgen-typescript-loader](https://npm.io/package/react-docgen-typescript-loader.md) ^3.7.2

## Recent versions

- 0.5.145 (latest) — 2024-09-18
- 0.5.144 — 2024-09-18
- 0.5.143 — 2024-09-18
- 0.5.142 — 2024-08-20
- 0.5.141 — 2024-05-03
- 0.5.140 — 2024-04-25
- 0.5.139 — 2024-04-16
- 0.5.138 — 2024-04-16
- 0.5.137 — 2024-04-11
- 0.5.136 — 2024-04-11
- 0.5.135 — 2024-03-15
- 0.5.134 — 2024-03-13
- 0.5.133 — 2024-02-27
- 0.5.132 — 2024-02-27
- 0.5.131 — 2023-12-04
- … 162 more at https://npm.io/package/aiq-design-system/versions

## README

<p align="center">
  <a href="https://aiqfome.com/" rel="noopener" target="_blank"><img width="150" src="https://www.suafranquia.com/views/sources/images/franquias/logos/271b399b0a004c781779ec805e8d7ab7.png" alt="aiqfome logo"></a></p>
</p>

<h1 align="center">aiq design system</h1>

<div align="center">

a biblioteca de componentes para projetos React da galera do [aiqfome](http://www.aiqfome.com).

<p align="center">
  <a aria-label="contributors graph" href="https://github.com/aiqfome/aiq-design-system/graphs/contributors">
    <img src="https://img.shields.io/github/contributors/aiqfome/aiq-design-system.svg">
  </a>
  
  <img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/github/aiqfome/aiq-design-system.svg?logo=lgtm&logoWidth=18"/>
  
  <a aria-label="license" href="https://github.com/aiqfome/aiq-design-system/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/aiqfome/aiq-design-system.svg" alt="">
  </a>
  
  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/aiq-design-system.svg?style=flat"/>
  
  [![npm downloads](https://img.shields.io/npm/dm/aiq-design-system.svg)](https://www.npmjs.com/package/aiq-design-system)
</p>

</div>

## como adicionar ao projeto

```sh
yarn add aiq-design-system

or

npm install aiq-design-system
```

## os componentes

nossos componentes estão nesse [storybook](https://www.chromatic.com/library?appId=621085ba70b9d2003a142b7d)

documentação oficial: **coming soon**

## configuração básica

pra começar a utilizar os componentes, segue esses passos:

1 - a gente disponibiliza um wrapper pra você adicionar na aplicação, é o `ThemeProvider` importado da **aiq-design-system**.

```jsx
import React from 'react'
import ReactDOM from 'react-dom'

import { ThemeProvider } from 'aiq-design-system'

function App({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>
}
```

2 - já pode sair utilizando os componentes importados da **aiq-design-system**

```jsx
import React from 'react'
import ReactDOM from 'react-dom'

import { Button, Flex, Input } from "aiq-design-system";

export const AiqComponent() {
  return (
    <Flex p={20} flexDirection="column">
      <Input variant="outlined" label="duas pizzas é muito?" />
      <Button variant="contained">fazer pedido!</Button>
    </Flex>
  )
}

```

## template no codesandbox

temos um template configurado no codesandbox com a lib configurada!

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/aiq-design-system-yukfc)

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