Luis-ui-lib NPM

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:

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

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

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:

Instale o Panda CSS:

yarn add -D @pandacss/dev

Inicialize o Panda CSS no projeto:

yarn panda init --postcss

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

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

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",
});