Bromcom-ui-next NPM

Bromcom UI Component Library

A modern, customizable UI component library built with StencilJS and TailwindCSS.

Project Structure

bromcom-ui-next/
├── src/
│   ├── components/   # UI Components
│   ├── styles/       # Global styles and theme variables
│   ├── global/       # Global utilities and configurations
│   └── z_demos/      # Component demos and examples
└── dist/             # Built files

Development Guidelines

Component Structure

Each component should follow this structure:

components/
└── button/
    ├── button.component.tsx # Component implementation
    ├── button.types.ts      # TypeScript interfaces and types
    ├── button.css           # Component-specific styles
    ├── button.usage.md      # Usage documentation
    └── readme.md            # Auto-generated documentation

Style Guidelines

Use TailwindCSS for styling
Follow BEM-like naming convention with bcm- prefix
Use CSS variables for theming support
Follow the defined color palette and typography system

Installation

Via CDN

Add the following to your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bromcom-ui@latest/dist/bromcom-ui/bromcom-ui.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/bromcom-ui@latest/dist/bromcom-ui/bromcom-ui.esm.js"></script>

Via NPM

npm install bromcom-ui@latest

For a specific version:

npm install bromcom-ui@x.x.x

Usage

In a Standard Web Project

Include the library via CDN or local files:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="path/to/bromcom-ui.css" />
    <script type="module" src="path/to/bromcom-ui.esm.js"></script>
  </head>
  <body>
    <bcm-button>Click Me</bcm-button>
  </body>
</html>

In an Angular Project

Install the package:

npm install bromcom-ui@latest

Add the CSS to your angular.json:

{
  "styles": ["node_modules/bromcom-ui/dist/bromcom-ui/bromcom-ui.css"]
}

Configure your module:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElements } from 'bromcom-ui/loader';

defineCustomElements();

@NgModule({
  // ...other configurations
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Use components in your templates:

<bcm-button kind="primary">Click Me</bcm-button>

Component Documentation

Each component includes:

Property documentation
Usage examples
Type definitions
CSS customization options

Example usage documentation can be found in the component's .usage.md file.

Theme Customization

The library uses CSS variables for theming. Override these variables to customize the appearance:

:root {
  --bcm-ui-color-primary: #your-color;
  --bcm-ui-font-family: your-font;
}

Contributing

Fork the repository
Create a feature branch
Follow the style guidelines
Submit a pull request

Building

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

Support

For questions or issues, contact the UI team:

Murat Özkan (murat.ozkan@bromcom.com)
Ramazan Yıldırım (ramazan.yildirim@bromcom.com)

License

bromcom ui-components web-components stencil tailwind

5 months ago

5 months ago

5 months ago

5 months ago