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:

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('<nome_do_modulo>/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/<nome_do_modulo>/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: ["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?

• React
• Next.js
• TailwindCSS
• Storybook
• Class Variance Authority (cva)
• classnames
• HeadlessUI
• heroicons
• Chromatic

📝 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 :octocat:

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

| Neilton Seguins | Vinicius Cardozo | | :---: | :---:

Licença

The GNU General Public License (GPL)

Copyright :copyright: 2023 - Alfabit Design System