Brick UI

MCC's Design System for building consistent and reusable interfaces with React + Tailwind CSS.

Structure

Components follow an architecture based on Atomic Design. Typical structure:

``



src/

  ├── index.ts             # Main entry point of the library

  └── components/

        ├── atoms/

        └── molecules/

              └── component-name/

                  ├── index.tsx

                  └── component-name.stories.tsx





> Note: Always use kebab-case naming convention for folders and files.



---



Installing the project locally

bash

npm install





---



Running Storybook

bash

npm run storybook





---



Creating new components



1. Create the component inside the

src/components

 folder

2. Create the corresponding

.stories.tsx

 file

3. Export it in

src/index.ts





---



Using Brick UI in another React project



$3



In your React project, install the package:

bash

npm install mcc-brick-ui





$3



1. Import the plugin and safelist from the package inside your Tailwind

   configuration file.

ts

   // tailwind.config.ts

   import { brickPlugin, safelist } from 'mcc-brick-ui';



   export default {

     content: ['./src/*/.{js,ts,jsx,tsx}'],

     safelist,

     plugins: [brickPlugin],

   };





2. Build your CSS using Tailwind so the plugin theme is applied. A typical

   command looks like:

bash

   npx tailwindcss -i ./src/index.css -o ./dist/index.css \

     --config ./tailwind.config.ts --minify





3. If you prefer, you can import the precompiled styles directly in your global

   stylesheet:

css

   @import 'mcc-brick-ui/dist/styles.css';





---



Tests



> Not configured yet.



Publishing a new version to NPM



$3



If you don't have one yet, create it at: https://www.npmjs.com/signup



$3



Ask one of the current owners to run:

bash

npm owner add your-npm-username package-name





Steps to publish



$3

bash

npm login





$3



Useful if you have multiple NPM accounts.

bash

npm whoami

$3

bash

npm run build





$3



Choose the appropriate semantic version increment:



- patch → bug fixes

- minor → new features without breaking changes

- major → breaking changes (less common)

bash

npm version patch

or

npm version minor

or

npm version major





Publish to NPM

1. Generate an Access Token



If you already have a token, you can skip this step.



1. Go to https://www.npmjs.com/

2. Log in to your account

3. Click on your profile picture → Account

4. Go to Access Tokens

5. Click Generate New Token



$3



- Publish → Recommended for local development

- Automation → Recommended for CI/CD pipelines

- Read-only → Cannot publish packages



For local usage, use

Publish

.



6. Confirm the action using 2FA

7. Copy the generated token (it will not be shown again)



---



2. Configure the Token Locally

bash

npm config set //registry.npmjs.org/:_authToken=YOUR_TOKEN_HERE





3. Publish

Once the token is configured, publish the package normally:

bash

npm publish



Check publication

bash

npm info package-name