Brinca UI

Design System and React component library for Brinca

Docs and Demos

https://brinca-ui.vercel.app/

Details

The library is built with:

• React
• TypeScript
• Storybook
• Tailwind CSS
• Cypress
• Vite

Get Started

Install all the dependencies

yarn install

Start the project

yarn dev

Build

Build Component Library

yarn build

Build Docs

yarn build:docs

Tests

Regular Tests

yarn test

Headless Tests

yarn test:ci

Deployment

This project uses Github Actions to deploy the NPM Package and to build the docs.

How to use in a project

1. Install the package using the following command:

   yarn add @marceloglacial/brinca-ui

2. Import the css file using:

   /* yourmaincssfile.css */
   @import '../node_modules/@marceloglacial/brinca-ui/dist/style.css';

   Important (troubleshooting):

   This is a Tailwind project and the initial CSS is already built-in on brinca-ui css. If you are facing CSS issues, remove initial Tailwind's @ markup.

   E.g.:

   /*
   /* yourmaincssfile.css
   /* BEFORE:
   */
   
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   ...
   
   /* AFTER: */
   @import '../node_modules/@marceloglacial/brinca-ui/dist/style.css';
   
   ...

3. Update your Tailwind config file:

   // tailwind.config.js
   module.exports = {
     content: [
       ...
       './node_modules/@marceloglacial/brinca-ui/**/*.{js,ts,jsx,tsx}',
       ...
     ],
     ...
   };

References

• Build a React Component Library Using TypeScript & StoryBook
• Install Tailwind CSS with Create React App
• Build and Package an NPM Component with esbuild, React and TypeScript
• https://github.com/IgnacioNMiranda/vite-component-library-template