alfabit-ds-pkg: A TypeScript repository from NeiltonSeguins

Alfabit Design System

Biblioteca de componentes web da Alfabit

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('<nome_do_modulo>/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/<nome_do_modulo>/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.
```
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["ds-alfabit-v1"],
};

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

🎨 Quais cores foram utilizadas no padrão da biblioteca?

Toda a identidade visual da biblioteca, como os componentes, espaçamentos e cores, você pode acessar no Figma clicando aqui neste link.

Confira também a documentação da biblioteca para mais detalhes de uso Documentação.

📚 Quais dependências são usadas nesta biblioteca?

📝 Documentação

Para verificar a documentação click aqui

Para Verificar a documentação em desenvolvimento faça

npm run storybook ou yarn storybook

Desenvolvedores/Contribuintes

Esta é a equipe responsável pela criação desta biblioteca de componentes

_{Neilton Seguins}	_{Vinicius Cardozo}

Licença

The GNU General Public License (GPL)

NeiltonSeguins/alfabit-ds-pkg