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

npm install

Running Storybook

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

Installation

In your React project, install the package:

npm install mcc-brick-ui

Tailwind integration

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

   // 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:

   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:

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

Tests

Not configured yet.

Publishing a new version to NPM

1. Have an NPM account

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

2. Be added by an owner of this package

Ask one of the current owners to run:

npm owner add your-npm-username package-name

Steps to publish

Login to NPM

npm login

Check which user is logged in

Useful if you have multiple NPM accounts.

npm whoami

Build the package

npm run build

Update the version

Choose the appropriate semantic version increment:

• patch → bug fixes
• minor → new features without breaking changes
• major → breaking changes (less common)

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

Token types

• 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

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

3. Publish

Once the token is configured, publish the package normally:

npm publish

Check publication

npm info package-name