build: migrated component build script (#19)

* build: migrated component build script

Signed-off-by: Asitha de Silva <[email protected]>

* build: fix component renaming

Signed-off-by: Asitha de Silva <[email protected]>

---------

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

docs/tools.md

@@ -225,6 +225,7 @@ lfx-tools {
   --lfx-tools-button-radius: 4px;
   --lfx-tools-icon-color: #666666;
   --lfx-tools-icon-hover-color: #333;
+  --lfx-tools-menu-z-index: 1000;
   --lfx-tools-menu-bg: #ffffff;
   --lfx-tools-menu-width: 240px;
   --lfx-tools-menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
@@ -251,6 +252,7 @@ lfx-tools {
 | `--lfx-tools-button-radius`          | Button border radius        | `4px`                            |
 | `--lfx-tools-icon-color`             | Grid icon color             | `#666666`                        |
 | `--lfx-tools-icon-hover-color`       | Grid icon hover color       | `#333`                           |
+| `--lfx-tools-menu-z-index`           | Menu z-index                | `1000`                           |
 | `--lfx-tools-menu-bg`                | Menu background color       | `#ffffff`                        |
 | `--lfx-tools-menu-width`             | Menu width                  | `240px`                          |
 | `--lfx-tools-menu-shadow`            | Menu box shadow             | `0 4px 20px rgba(0, 0, 0, 0.15)` |

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@linuxfoundation/lfx-ui-core",
-  "version": "0.0.0",
+  "version": "0.0.17-alpha.2",
   "description": "LFX UI Core Configurations and Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
   "author": "The Linux Foundation",
   "scripts": {
     "build:tokens": "ts-node src/scripts/build.ts",
-    "build:browser": "browserify src/components/footer/footer.component.ts -p [ tsify ] -o dist/browser/footer.bundle.js",
+    "build:browser": "ts-node src/scripts/build-browser.ts",
     "build": "npm run build:tokens && npm run format && tsc && npm run build:browser",
     "prepare": "npm run build",
     "format": "prettier --write \"src/**/*.{ts,js,json,md}\"",

src/components/tools/tools.style.ts

@@ -65,7 +65,7 @@ export const style = `
   position: absolute;
   top: 0;
   left: 100%;
-  z-index: 1000;
+  z-index: var(--lfx-tools-menu-z-index, 1000);
   background: var(--lfx-tools-menu-bg, #ffffff);
   border: 1px solid var(--lfx-tools-menu-border, #e1e5e9);
   border-radius: var(--lfx-tools-menu-radius, 8px);

src/scripts/build-browser.ts

@@ -0,0 +1,88 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+interface ComponentInfo {
+  name: string;
+  path: string;
+  exportPath: string;
+}
+
+/**
+ * Extract component information from the components index file
+ */
+function extractComponents(): ComponentInfo[] {
+  const indexPath = join(__dirname, '../components/index.ts');
+  const content = readFileSync(indexPath, 'utf-8');
+
+  const components: ComponentInfo[] = [];
+  const exportRegex = /export \* from '\.\/([^']+)\/([^']+)'/g;
+
+  let match;
+  while ((match = exportRegex.exec(content)) !== null) {
+    const [, folder, file] = match;
+    const componentName = folder.replace(/-(.)/g, (_, letter: string) => letter.toUpperCase()); // Convert kebab-case to camelCase
+    components.push({
+      name: componentName,
+      path: join(__dirname, '../components', folder, `${file}.ts`),
+      exportPath: `./${folder}/${file}`,
+    });
+  }
+
+  return components;
+}
+
+/**
+ * Build a single component for browser
+ */
+function buildComponent(component: ComponentInfo): void {
+  const outputDir = join(__dirname, '../../dist/browser');
+  const outputFile = join(outputDir, `${component.name}.bundle.js`);
+
+  // Ensure output directory exists
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+
+  console.log(`Building ${component.name} component...`);
+
+  try {
+    const command = `browserify ${component.path} -p [ tsify ] -o ${outputFile}`;
+    execSync(command, { stdio: 'inherit' });
+    console.log(`✅ Built ${component.name} component`);
+  } catch (error) {
+    console.error(`❌ Failed to build ${component.name} component:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Main build function
+ */
+function buildBrowser(): void {
+  console.log('🚀 Starting browser build...');
+
+  try {
+    const components = extractComponents();
+    console.log(`📦 Found ${components.length} components to build:`, components.map((c) => c.name).join(', '));
+
+    for (const component of components) {
+      buildComponent(component);
+    }
+
+    console.log('✅ Browser build completed successfully!');
+  } catch (error) {
+    console.error('❌ Browser build failed:', error);
+    process.exit(1);
+  }
+}
+
+// Run the build if this script is executed directly
+if (require.main === module) {
+  buildBrowser();
+}
+
+export { buildBrowser, extractComponents };

src/scripts/build.ts

@@ -96,6 +96,8 @@ export * from './components';`;
 
 async function buildTokens() {
   try {
+    console.log('🔧 Building design tokens...');
+
     // Read tokens.json
     const tokensPath = path.resolve(__dirname, '../design/tokens/tokens.json');
     const tokens = JSON.parse(fs.readFileSync(tokensPath, 'utf8'));
@@ -122,11 +124,16 @@ async function buildTokens() {
     // Write index file
     fs.writeFileSync(path.join(mainDir, 'index.ts'), generateIndex());
 
-    console.log('Token and preset files generated successfully!');
+    console.log('✅ Token and preset files generated successfully!');
   } catch (error) {
-    console.error('Error generating files:', error);
+    console.error('❌ Error generating files:', error);
     process.exit(1);
   }
 }
 
-buildTokens();
+// Run the build if this script is executed directly
+if (require.main === module) {
+  buildTokens();
+}
+
+export { buildTokens };