👨‍💻 How to install?

# npm
npm i ds-design-system@latest

# yarn
yarn add ds-design-system@latest

🏃 How to use?

The ds-design-system 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 required 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 ds-design-system library as well

   import './globals.css'
   import 'ds-design-system/styles/globals.css'

2. Inside the Tailwind configuration file, tailwind.config.js, add the ds-design-system library settings as preset:

   const config = {
   	presets: [
   		require('ds-design-system/tailwind.config')
   	]
   	// ... demais configurações ...
   }

3. Add in the same configuration file the reference of the ds-design-system library files to be covered by Tailwind and processed in PostCSS. To do this, simply add the path of the ds-design-system 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/ds-design-system/components/**/*.{js,ts,jsx,tsx,mdx}'
     ]
   	// ...  more  ...
   }

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: ["ds-design-system"],
   };
      
   module.exports = nextConfig;

And now you can use the library components on your pages:

"use client";
import { Typograph } from "ds-design-system/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!
        </Typograph>
      </div>
    </main>
  );
}

📚 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 ou yarn storybook

Developers/Contributors :octocat:

Matheus

License

The GNU General Public License (GPL)

Copyright :copyright: 2024 - DS Base Design System