---

Alfabit Design System

Biblioteca de componentes web da Alfabit

Índice

1. Sobre
2. Como instalar?
3. Como usar?
4. Quais cores foram utilizadas no padrão da biblioteca?
5. Quais dependências são usadas nesta biblioteca?
6. Documentação
7. Desenvolvedores / Contribuintes
8. Licença

📑 Sobre

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 pnpm

pnpm add alfabit-ds

• Utilizando yarn

yarn add alfabit-ds

• Utilizando npm

npm install 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:

1. 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';

2. 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 ...
   };

3. 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 ...
   };

4. 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: ['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>
     );
   }

🎨 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?

• Typescript
• Next.js
• React.js
• Classnames
• Class Variance Authority (CVA)
• HeadlessUI
• TailwindCSS
• Heroicons
• Storybook
• Chromatic

Veja o arquivo package.json na íntegra.

📄 Documentação

Para verificar a documentação click aqui

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

• Utilizando pnpm

pnpm storybook

• Utilizando yarn

yarn storybook

• Utilizando npm

npm run storybook

🦸 Desenvolvedores / Contribuintes

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

Neilton Seguins

Neilton Seguins

Esse é o criador deste repositório

Felipe DR 📩

📝 Licença

The GNU General Public License (GPL)

Copyright ©️ 2023 - Alfabit Design System