@marketingauto/shared-ui

A shared UI library containing reusable React components, icons, and Tailwind CSS styles for MarketingAuto applications.

Installation

npm install @marketingauto/shared-ui

Package Contents

Components

• Sidebar - A customizable sidebar navigation component with items, collapsible support, and flexible rendering

Icons

70+ SVG icons exported as React components, including:

• Navigation icons (arrows, chevrons, expand/collapse)
• UI icons (close, dots, filter, grid, table)
• Feature icons (calendar, chat, mail, phone, SMS)
• Action icons (upload, download, copy, modify, trash)
• Brand icons (Google, Microsoft, logos)
• Status icons (checkmark, warning, notification, spinner)

All icons are prefixed with Svg (e.g., SvgArrowDown, SvgCalendar, SvgUser)

Styles

• CSS Variables - Theme colors and design tokens in variables.css
• Component Styles - Pre-built component styles in components.css
• Tailwind Preset - Shared Tailwind configuration with custom colors, animations, and utilities

Usage

Importing Components

import { Sidebar } from '@marketingauto/shared-ui';
import type { SidebarProps, SidebarItem } from '@marketingauto/shared-ui';

Importing Icons

import { SvgArrowDown, SvgCalendar, SvgUser } from '@marketingauto/shared-ui/icons';

function MyComponent() {
  return (
    <div>
      <SvgUser className="w-6 h-6" />
      <SvgCalendar className="w-5 h-5 text-primary" />
    </div>
  );
}

Importing Styles

// In your main CSS file or component
import '@marketingauto/shared-ui/variables.css';
import '@marketingauto/shared-ui/components.css';

Using the Tailwind Preset

In your tailwind.config.js:

import sharedPreset from '@marketingauto/shared-ui/tailwind-preset';

export default {
  presets: [sharedPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@marketingauto/shared-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Your custom overrides here
    },
  },
};

Local Development

For developing the shared-ui package alongside your application (e.g., conecrm-frontend):

Method 1: Using npm link (Recommended)

1. Build and link the package:

   cd /path/to/shared-ui
   npm run build        # Build the TypeScript
   npm link             # Create global symlink

2. Link in your project:

   cd /path/to/conecrm-frontend
   npm link @marketingauto/shared-ui

3. Watch mode for development: In the shared-ui directory, run:

   npm run build:watch  # Auto-rebuild on changes

4. Restart your dev server in conecrm-frontend to pick up changes.

Method 2: Using file path (Alternative)

In your project's package.json, temporarily use a file reference:

{
  "dependencies": {
    "@marketingauto/shared-ui": "file:../shared-ui"
  }
}

Then run:

npm install

Unlinking after development

cd /path/to/conecrm-frontend
npm unlink @marketingauto/shared-ui
npm install @marketingauto/shared-ui  # Reinstall from npm

Publishing

Publishing is fully automated via CI/CD. To publish a new version:

1. Commit your changes:

   git add .
   git commit -m "feat: add new component/feature"

2. Push to the main branch:

   git push origin main

The CI/CD pipeline will automatically:

• Bump the package version
• Build the package
• Publish to the npm registry as @marketingauto/shared-ui

Testing the Published Package

After publishing, test the new version in your consuming application:

1. Unlink the local package (if using npm link):

   cd /path/to/conecrm-frontend
   npm unlink @marketingauto/shared-ui

2. Update to the new version:

   npm install @marketingauto/shared-ui@latest
   # or specify the exact version
   npm install @marketingauto/[email protected]

3. Verify the installation:

   npm list @marketingauto/shared-ui

4. Test your application to ensure the new package version works correctly.

5. Update package.json if needed to lock to a specific version:

   {
     "dependencies": {
       "@marketingauto/shared-ui": "0.1.24"
     }
   }

Pre-publish Checklist

• [ ] All changes are committed
• [ ] TypeScript builds without errors (npm run build)
• [ ] Type checking passes (npm run typecheck)
• [ ] Changes have been tested locally in a consuming application (using npm link)
• [ ] Ready to push to main branch

Development Workflow

Full Development Cycle

1. Make changes to components, icons, or styles in src/
2. Export new components/icons in src/index.ts or src/icons/index.ts
3. Test locally:
   • Build: npm run build:watch
   • Link to consuming app: npm link
   • Test in conecrm-frontend using npm link @marketingauto/shared-ui
4. Publish: Commit and push to main branch
5. Test published version:
   • Unlink local package in consuming app
   • Install new version: npm install @marketingauto/shared-ui@latest
   • Verify functionality in consuming app

Peer Dependencies

This package requires:

• react ^18.3.1
• react-dom ^18.3.1

Ensure your consuming application has these installed.

Repository

• GitHub: MarketingAuto/shared-ui
• npm: @marketingauto/shared-ui