aiq design system

Sistema de diseño AIQ

La biblioteca de componentes para los proyectos React de Aiqfome Galera.

Cómo agregar al proyecto

yarn add aiq-design-system

or

npm install aiq-design-system

los componentes

Nuestros componentes están en este libro de cuentos

Documentación oficial: Próximamente

configuración básica

Para comenzar a usar los componentes, siga estos pasos:

1-Hagamos un envoltorio disponible para que agregue a la aplicación, es ThemeProvider importado del sistema de diseño AIQ .

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

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

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

2: ahora puede salir utilizando los componentes importados del sistema de diseño AIQ

 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 >
  )
} 

Plantilla Codesandbox

¡Tenemos una plantilla configurada en CodesandBox con Lib Configurado!