Alfabit-ds NPM

O que é?

A Alfabit é uma empresa de tecnologia inovadora dedicada a fornecer soluções criativas e eficientes para seus clientes. Reconhecendo a importância do design consistente e intuitivo em todas as suas plataformas e produtos, a Alfabit decidiu investir em um design system de ponta.

👨‍💻 Como instalar?

# Utilizando npm
npm i alfabit-ds

# Utilizando yarn
yarn add alfabit-ds

🏃 Como usar?

A biblioteca Alfabit-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 Alfabit também
```
import './globals.css'
import 'alfabit-ds/styles/globals.css'
```
Dentro do arquivo de configuração do Tailwind, o tailwind.config.js, adicione as configurações da biblioteca Alfabit como preset:
```
const config = {
	presets: [
		require('alfabit-ds/tailwind.config')
	]
	// ... demais configurações ...
}
```
Adicione no mesmo arquivo de configuração a referência dos arquivos da biblioteca Alfabit para serem cobertas pelo Tailwind e processadas no PostCSS. Para isso, basta adicionar o caminho dos componentes da biblioteca Alfabit 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/alfabit-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: ["alfabit-ds"],
};

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

"use client";
import { Typograph } from "alfabit-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">
        <Typograph element="h3" size="title3" className="font-black text-white">
          Olá mundo!
        </Typograph>
      </div>
    </main>
  );
}