@shared-cms/ui-react

v1.0.17

Published

4 months ago

Complete UI component library with all Shared CMS React components

0High
0Medium
0Low

difadev

ui components react web-components lit typescript tailwindcss bundle complete all-components shared-cms

Shared UI Components Monorepo

A monorepo for building shared UI components using Lit, React wrappers, and TailwindCSS that can be used across multiple frameworks.

Quick Start

Install Dependencies

npm install

Build All Components

npm run build-all

Update Versions

# Patch version (1.0.0 → 1.0.1)
npm run version-sync patch

# Minor version (1.0.0 → 1.1.0)
npm run version-sync minor

# Major version (1.0.0 → 2.0.0)
npm run version-sync major

Publish All Packages

npm run publish-all

Usage

In React

import { SharedButton as Button, SharedCard as Card } from '@shared-cms/ui';

function App() {
  const handleClick = () => alert('Button clicked!');

  return (
    <div>
      <Button
        label="Click me"
        variant="primary"
        onClick={handleClick}
      />
      <Card
        title="Card Title"
        onCardClick={(e) => console.log('Card clicked', e.detail)}
        footer={<Button label="Save" variant="primary" />}
      >
        <p>Card content goes here</p>
      </Card>
    </div>
  );
}

In Angular/Vue (direct web components)

<shared-button label="Click me" variant="primary"></shared-button>
<shared-card title="Card Title">
  <p>Card content goes here</p>
  <div slot="footer">
    <shared-button label="Save" variant="primary"></shared-button>
  </div>
</shared-card>

Direct HTML

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="your-built-components.js"></script>
</head>
<body>
    <shared-button label="Click me" variant="primary"></shared-button>
    <shared-card title="Card Title" show-footer="true">
        <p>Card content goes here</p>
        <div slot="footer">
            <shared-button label="Save" variant="primary"></shared-button>
        </div>
    </shared-card>

    <script>
        document.addEventListener('button-click', (e) => console.log('Button clicked!', e.detail));
        document.addEventListener('card-click', (e) => console.log('Card clicked!', e.detail));
    </script>
</body>
</html>

Architecture

shared-ui/
├── packages/
│   ├── button/     # Individual button component
│   ├── card/       # Individual card component
│   └── index/      # Bundle of all components
├── scripts/        # Build and publish automation
├── dist/          # Build outputs
└── ...            # Configuration files

Features

✅ Cross-framework compatible (React, Angular, Vue)
🎨 TailwindCSS bundled into Shadow DOM
🧩 Modular - build/publish individual components
🚀 Version synchronization across all packages
⚛️ React wrappers included
🧱 Shadow DOM isolation prevents CSS conflicts

Development

Individual Component Development

cd packages/button
npm run build

Link for Local Testing

# In this repo
cd packages/button
npm link

# In consumer project
npm link @shared-cms/button