bromcom-ui-next 0.1.0

package/dist/types/styles/theme-variables.d.ts

@@ -0,0 +1,384 @@
+export declare const themeVariables: {
+    fontSize: {
+        'size-1': (string | {
+            lineHeight: string;
+        })[];
+        'size-2': (string | {
+            lineHeight: string;
+        })[];
+        'size-3': (string | {
+            lineHeight: string;
+        })[];
+        'size-4': (string | {
+            lineHeight: string;
+        })[];
+        'size-5': (string | {
+            lineHeight: string;
+        })[];
+        'size-6': (string | {
+            lineHeight: string;
+        })[];
+        'size-7': (string | {
+            lineHeight: string;
+        })[];
+        'size-8': (string | {
+            lineHeight: string;
+        })[];
+        'size-9': (string | {
+            lineHeight: string;
+        })[];
+        'size-10': (string | {
+            lineHeight: string;
+        })[];
+        'size-11': (string | {
+            lineHeight: string;
+        })[];
+        'size-12': (string | {
+            lineHeight: string;
+        })[];
+        'size-13': (string | {
+            lineHeight: string;
+        })[];
+        'size-14': (string | {
+            lineHeight: string;
+        })[];
+        'size-inherit': (string | {
+            lineHeight: string;
+        })[];
+    };
+    textColor: {
+        DEFAULT: string;
+        base: string;
+        header: string;
+        label: string;
+        helper: string;
+        placeholder: string;
+        caption: string;
+        iconDefault: string;
+        iconDark: string;
+        primary: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+        disabled: string;
+        visited: string;
+        palette: {
+            slate: string;
+            gray: string;
+            zinc: string;
+            neutral: string;
+            stone: string;
+            red: string;
+            orange: string;
+            amber: string;
+            yellow: string;
+            lime: string;
+            green: string;
+            emerald: string;
+            teal: string;
+            cyan: string;
+            sky: string;
+            blue: string;
+            indigo: string;
+            violet: string;
+            purple: string;
+            fuchsia: string;
+            pink: string;
+            rose: string;
+        };
+    };
+    v4ColorPalette: {
+        inherit: string;
+        current: string;
+        transparent: string;
+        black: string;
+        white: string;
+        slate: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        gray: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        zinc: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        neutral: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        stone: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        red: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        orange: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        amber: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        yellow: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        lime: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        green: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        emerald: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        teal: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        cyan: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        sky: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        blue: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        indigo: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        violet: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        purple: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        fuchsia: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        pink: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+        rose: {
+            '50': string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+            '950': string;
+        };
+    };
+};

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "bromcom-ui-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "bromcom-ui-next",
+  "version": "0.1.0",
+  "description": "A modern UI component library built with StencilJS and Tailwind CSS for Bromcom applications",
+  "private": false,
+  "author": "Bromcom Computers Plc",
+  "keywords": [
+    "bromcom",
+    "ui-components",
+    "web-components",
+    "stencil",
+    "tailwind"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/bromcom-ui/bromcom-ui.esm.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muratpolatozkan/bromcom-ui-next.git"
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/core": "^4.7.0",
+    "@stencil/sass": "^3.0.12",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^16.18.11",
+    "classnames": "^2.5.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "puppeteer": "^21.9.0",
+    "stencil-tailwind-plugin": "^1.8.0",
+    "tailwind-variants": "^0.3.1",
+    "tailwindcss": "^3.4.17"
+  },
+  "license": "MIT"
+}

package/readme.md

@@ -0,0 +1,170 @@
+# 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:
+
+```html
+<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
+
+```bash
+npm install bromcom-ui@latest
+```
+
+For a specific version:
+
+```bash
+npm install bromcom-ui@x.x.x
+```
+
+## Usage
+
+### In a Standard Web Project
+
+1. Include the library via CDN or local files:
+
+```html
+<!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
+
+1. Install the package:
+
+```bash
+npm install bromcom-ui@latest
+```
+
+2. Add the CSS to your `angular.json`:
+
+```json
+{
+  "styles": ["node_modules/bromcom-ui/dist/bromcom-ui/bromcom-ui.css"]
+}
+```
+
+3. Configure your module:
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineCustomElements } from 'bromcom-ui/loader';
+
+defineCustomElements();
+
+@NgModule({
+  // ...other configurations
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+
+4. Use components in your templates:
+
+```html
+<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:
+
+```css
+:root {
+  --bcm-ui-color-primary: #your-color;
+  --bcm-ui-font-family: your-font;
+}
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Follow the style guidelines
+4. Submit a pull request
+
+## Building
+
+```bash
+# 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
+
+Copyright © 2025 Bromcom Computers Plc