Aspprev-ds NPM

O que é?

A ASPPrev é uma empresa voltada para o fornecimento de soluções integradas em TI e assessoria previdenciária / atuarial para o segmento de RPPS (Previdência Pública) e EFPC (Previdência Complementar).

👨‍💻 Como instalar?

# Utilizando npm
npm i aspprev-ds

# Utilizando yarn
yarn add aspprev-ds

🏃 Como usar?

A biblioteca ASPPrev-ds foi criada para funcionar em aplicações Next.js+TailwindCSS. Portanto, para usá-la lembre-se de criar suas aplicações com essa estrutura. Para que você consiga usar todos os componentes da biblioteca sem problemas é necessário uma configuração adicional no seu projeto. Vamos fazer isso passo a passo:

No mesmo arquivo que você importa as camadas do tailwind (geralmente o arquivo globals.css ou styles.css ) importe o arquivo CSS da biblioteca ASPPrev também
```
import './globals.css'
import 'aspprev-ds/styles/globals.css'
```
Dentro do arquivo de configuração do Tailwind, o tailwind.config.js, adicione as configurações da biblioteca ASPPrev como preset:
```
const config = {
	presets: [
		require('aspprev-ds/tailwind.config')
	]
	// ... demais configurações ...
}
```
Adicione no mesmo arquivo de configuração a referência dos arquivos da biblioteca ASPPrev para serem cobertas pelo Tailwind e processadas no PostCSS. Para isso, basta adicionar o caminho dos componentes da biblioteca ASPPrev dentro da propriedade content, no mesmo arquivo de configuração do tailwind do passo anterior:
```
const config = {
	content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/aspprev-ds/components/**/*.{js,ts,jsx,tsx,mdx}'
  ]
	// ... demais configurações ...
}
```
Configure o transpile do Next.js no arquivo next.config.js. Na nova versão do Next 13 temos um recurso que vai ajudar a transpilar a nossa biblioteca. Sem isso vamos ficar recebendo sucessivos erros de compilação porque o Next não vai entender nossa biblioteca.
```
```jsx
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["aspprev-ds"],
};

module.exports = nextConfig;
```
```
E agora você pode usar os componentes da biblioteca em suas páginas:

"use client";
import { Typography } from "aspprev-ds/components";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 gap-5">
      <div className="px-8 py-5 rounded-md flex flex-col gap-3 text-center text-gray-950 bg-gray-800">
        <Typography element="h3" size="title3" className="font-black text-white">
          Olá mundo!
        </Typography>
      </div>
    </main>
  );
}