What is it?

Alfabit is an innovative technology company dedicated to providing creative and efficient solutions for its customers. Recognizing the importance of consistent and intuitive design across all its platforms and products, Alfabit decided to invest in a cutting-edge design system.

👨‍💻 How to install?

# Using  npm
npm i designsystem-alfabit

# Using  yarn
yarn add designsystem-alfabit

🏃How to use?

The designsystem-alfabit library was created to work in Next.js+TailwindCSS applications. Therefore, to use it, remember to create your applications with this structure. In order for you to be able to use all the library components without problems, additional configuration is necessary in your project. Let's do this step by step:

1. In the same file that you import the tailwind layers (usually the globals.css or styles.css file) import the CSS file from the Alfabit library as well

   import "./globals.css";
   import "designsystem-alfabit/styles/globals.css";

2. Inside the Tailwind configuration file, tailwind.config.js, add the Alfabit library settings as preset:

   const config = {
     presets: [require("designsystem-alfabit/tailwind.config")],
     // ... other settings...
   };

3. Add in the same configuration file the reference of the Alfabit library files to be covered by Tailwind and processed in PostCSS. To do this, simply add the path of the Alfabit library components within the content property, in the same tailwind configuration file as in the previous step:

   const config = {
     content: [
       "./pages/**/*.{js,ts,jsx,tsx,mdx}",
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
       "./node_modules/designsystem-alfabit/components/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     // ... demais configurações ...
   };

4. Configure Next.js transpile in the next.config.js file. In the new version of Next 13 we have a feature that will help transpile our library. Without this we will receive successive compilation errors because Next will not understand our library.

   /\*_ @type {import('next').NextConfig} _/
   const nextConfig = {
   transpilePackages: ["designsystem-alfabit"],
   };
   
       module.exports = nextConfig;
       ```
   
   And now you can use the library components on your pages:

"use client";
import { Typograph } from "designsystem-alfabit/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">
          Hello World!
        </Typograph>
      </div>
    </main>
  );
}

🎨 What colors were used in the library pattern?

The entire visual identity of the library, such as components, spacing and colors, can be accessed on Figma by clicking on this link.

Also check out the library documentation for more usage details Documentation.

📚 What dependencies are used in this library?

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

📝 Documentation

To check the documentation click here

• To check the documentation under development, do

npm run storybook or yarn storybook

Developers/Contributors :octocat:

This is the team responsible for creating this component library

| Kayo Ennrique | | :---:

License

The GNU General Public License (GPL)

Copyright :copyright: 2024 - Alfabit Design System