LUIS (Lean User Interface System)

LUIS (Lean User Interface System) é um design system desenvolvido para fornecer uma biblioteca de componentes React.js flexí­vel e eficiente, garantindo consistência visual e facilidade de uso em diferentes projetos.

Instalação

Você pode instalar a biblioteca utilizando npm, yarn ou pnpm:

Usando npm

npm install luis-ui-lib

Usando yarn

yarn add luis-ui-lib

Usando pnpm

pnpm add luis-ui-lib

Configuração

Para utilizar os componentes da biblioteca, adicione as seguintes configurações ao seu projeto:

1. No seu arquivo global.css, importe os estilos do design system:

@layer reset, base, tokens, recipes, utilities;
@import url('@luis-ui/styles.css');/lib

2. Importe e utilize um componente em seu projeto:

import { Button } from "@luis-ui";/lib

function App() {
  return (
    <Button style="gradient" spacing="noSpacing" fullWidth>
      Entrar
    </Button>
  );
}

Estilização e Extensibilidade

Se você deseja estender os estilos e criar novos componentes utilizando o Panda CSS, siga os passos abaixo:

1. Instale o Panda CSS:

yarn add -D @pandacss/dev

2. Inicialize o Panda CSS no projeto:

yarn panda init --postcss

3. Adicione o seguinte script no package.json para gerar os estilos:

"scripts": {
  "prepare": "panda codegen"
}

4. Configure o arquivo panda.config.ts para incluir os componentes da biblioteca:

import { defineConfig } from "@pandacss/dev";
import { auroraPreset } from "@luis-ui";/lib

export default defineConfig({
  preflight: true,
  jsxFramework: "react",
  presets: [auroraPreset],
  include: [
    "./src/components/**/*.{ts,tsx,js,jsx}",
    "./src/pages/**/*.{ts,tsx,js,jsx}",
    "./node_modules/@luis-ui/dist/panda.buildinfo.json"/lib
  ],
  outExtension: "js",
  outdir: "styled-system",
});

Documentação Adicional

Para mais detalhes sobre a configuração do Panda CSS em diferentes frameworks, consulte:

• Configuração para Vite
• Configuração para Next.js (App Router)
• Configuração para Next.js (Pages Router)

Com isso, seu projeto estará pronto para utilizar os componentes do LUIS com total flexibilidade e performance!