@amelharrak/eldo-ui 1.0.1

package/setup.js

@@ -0,0 +1,260 @@
+#!/usr/bin/env node
+
+/**
+ * Eldo UI Interactive Setup
+ * Interactive CLI tool to customize your Eldo UI installation
+ */
+
+const readline = require('readline');
+const { exec } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+// ANSI color codes
+const colors = {
+    reset: '\x1b[0m',
+    bright: '\x1b[1m',
+    dim: '\x1b[2m',
+    green: '\x1b[32m',
+    blue: '\x1b[34m',
+    cyan: '\x1b[36m',
+    yellow: '\x1b[33m',
+    magenta: '\x1b[35m',
+    red: '\x1b[31m',
+};
+
+// Available components
+const components = [
+    { id: 'buttons', name: 'Buttons', size: '8kb', selected: false },
+    { id: 'alerts', name: 'Alerts', size: '6kb', selected: false },
+    { id: 'cards', name: 'Cards', size: '5kb', selected: false },
+    { id: 'forms', name: 'Form Controls', size: '12kb', selected: false },
+    { id: 'modals', name: 'Modals', size: '10kb', selected: false },
+    { id: 'navbar', name: 'Navbar', size: '9kb', selected: false },
+    { id: 'badges', name: 'Badges', size: '3kb', selected: false },
+    { id: 'progress', name: 'Progress Bars', size: '4kb', selected: false },
+    { id: 'tooltips', name: 'Tooltips', size: '7kb', selected: false },
+    { id: 'dropdown', name: 'Dropdowns', size: '8kb', selected: false },
+];
+
+let currentIndex = 0;
+
+// Clear screen
+function clearScreen() {
+    console.clear();
+}
+
+// Print header
+function printHeader() {
+    console.log(`${colors.bright}${colors.cyan}
+╔═══════════════════════════════════════════════════════╗
+║                                                       ║
+║           🎨  Eldo UI Interactive Setup  🎨          ║
+║                                                       ║
+║        Select components to include in your build    ║
+║                                                       ║
+╚═══════════════════════════════════════════════════════╝
+${colors.reset}\n`);
+}
+
+// Print instructions
+function printInstructions() {
+    console.log(`${colors.dim}Instructions:${colors.reset}`);
+    console.log(`  ${colors.green}↑/↓${colors.reset}     Navigate`);
+    console.log(`  ${colors.green}Space${colors.reset}   Toggle selection`);
+    console.log(`  ${colors.green}A${colors.reset}       Select all`);
+    console.log(`  ${colors.green}D${colors.reset}       Deselect all`);
+    console.log(`  ${colors.green}Enter${colors.reset}   Confirm and continue\n`);
+}
+
+// Print component list
+function printComponents() {
+    console.log(`${colors.bright}Available Components:${colors.reset}\n`);
+
+    components.forEach((component, index) => {
+        const cursor = index === currentIndex ? '❯' : ' ';
+        const checkbox = component.selected ? '☑' : '☐';
+        const highlight = index === currentIndex ? colors.cyan : '';
+        const reset = index === currentIndex ? colors.reset : '';
+
+        console.log(`  ${highlight}${cursor} ${checkbox} ${component.name}${reset} ${colors.dim}(${component.size})${colors.reset}`);
+    });
+
+    console.log();
+}
+
+// Print summary
+function printSummary() {
+    const selectedCount = components.filter(c => c.selected).length;
+    const totalSize = components
+        .filter(c => c.selected)
+        .reduce((sum, c) => sum + parseInt(c.size), 0);
+
+    console.log(`${colors.bright}Selection Summary:${colors.reset}`);
+    console.log(`  Components: ${colors.green}${selectedCount}${colors.reset}/${components.length}`);
+    console.log(`  Total size: ${colors.green}~${totalSize}kb${colors.reset}\n`);
+}
+
+// Render UI
+function render() {
+    clearScreen();
+    printHeader();
+    printInstructions();
+    printComponents();
+    printSummary();
+}
+
+// Handle key press
+function handleKeyPress(key) {
+    if (key === '\u001B[A') { // Up arrow
+        currentIndex = Math.max(0, currentIndex - 1);
+        render();
+    } else if (key === '\u001B[B') { // Down arrow
+        currentIndex = Math.min(components.length - 1, currentIndex + 1);
+        render();
+    } else if (key === ' ') { // Space
+        components[currentIndex].selected = !components[currentIndex].selected;
+        render();
+    } else if (key.toLowerCase() === 'a') { // Select all
+        components.forEach(c => c.selected = true);
+        render();
+    } else if (key.toLowerCase() === 'd') { // Deselect all
+        components.forEach(c => c.selected = false);
+        render();
+    } else if (key === '\r' || key === '\n') { // Enter
+        return true; // Continue to next step
+    }
+    return false;
+}
+
+// Generate import code
+function generateImports() {
+    const selectedComponents = components.filter(c => c.selected);
+
+    if (selectedComponents.length === 0) {
+        return '// No components selected';
+    }
+
+    const imports = selectedComponents.map(c =>
+        `import { ${c.name.replace(/\s+/g, '')} } from 'eldo-ui/${c.id}';`
+    ).join('\n');
+
+    const scssImports = selectedComponents.map(c =>
+        `@use 'eldo-ui/scss/components/${c.id}';`
+    ).join('\n');
+
+    return { js: imports, scss: scssImports };
+}
+
+// Show progress bar
+function showProgress(message, percentage) {
+    const barLength = 40;
+    const filled = Math.round((percentage / 100) * barLength);
+    const empty = barLength - filled;
+
+    const bar = '█'.repeat(filled) + '░'.repeat(empty);
+    process.stdout.write(`\r${colors.cyan}${message}${colors.reset} [${colors.green}${bar}${colors.reset}] ${percentage}%`);
+
+    if (percentage === 100) {
+        console.log();
+    }
+}
+
+// Simulate installation
+async function install() {
+    clearScreen();
+    printHeader();
+
+    const selectedComponents = components.filter(c => c.selected);
+    console.log(`${colors.bright}Installing ${selectedComponents.length} components...${colors.reset}\n`);
+
+    // Show commands
+    console.log(`${colors.dim}Commands to execute:${colors.reset}`);
+    selectedComponents.forEach(c => {
+        console.log(`  ${colors.yellow}$${colors.reset} npm install @eldo-ui/${c.id}`);
+    });
+    console.log();
+
+    // Simulate progress
+    for (let i = 0; i <= 100; i += 10) {
+        showProgress('Installing packages', i);
+        await new Promise(resolve => setTimeout(resolve, 200));
+    }
+
+    console.log();
+
+    // Generate code
+    const code = generateImports();
+
+    console.log(`\n${colors.bright}${colors.green}✓ Installation complete!${colors.reset}\n`);
+
+    // Show generated code
+    console.log(`${colors.bright}JavaScript imports:${colors.reset}`);
+    console.log(`${colors.dim}// Add to your main.js${colors.reset}`);
+    console.log(`${colors.cyan}${code.js}${colors.reset}\n`);
+
+    console.log(`${colors.bright}SCSS imports:${colors.reset}`);
+    console.log(`${colors.dim}// Add to your styles.scss${colors.reset}`);
+    console.log(`${colors.cyan}${code.scss}${colors.reset}\n`);
+
+    // Save to file
+    const outputDir = './eldo-ui-setup';
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir);
+    }
+
+    fs.writeFileSync(
+        path.join(outputDir, 'imports.js'),
+        code.js
+    );
+
+    fs.writeFileSync(
+        path.join(outputDir, 'imports.scss'),
+        code.scss
+    );
+
+    console.log(`${colors.green}✓${colors.reset} Files saved to ${colors.cyan}./eldo-ui-setup/${colors.reset}\n`);
+
+    // Show bundle size
+    const totalSize = selectedComponents.reduce((sum, c) => sum + parseInt(c.size), 0);
+    console.log(`${colors.bright}Bundle size:${colors.reset} ${colors.green}~${totalSize}kb${colors.reset}`);
+    console.log(`${colors.dim}(93% smaller than full bundle)${colors.reset}\n`);
+}
+
+// Main function
+async function main() {
+    // Setup readline
+    readline.emitKeypressEvents(process.stdin);
+    if (process.stdin.isTTY) {
+        process.stdin.setRawMode(true);
+    }
+
+    render();
+
+    // Listen for keypress
+    return new Promise((resolve) => {
+        process.stdin.on('keypress', async (str, key) => {
+            if (key.ctrl && key.name === 'c') {
+                process.exit();
+            }
+
+            const shouldContinue = handleKeyPress(str);
+
+            if (shouldContinue) {
+                process.stdin.setRawMode(false);
+                process.stdin.pause();
+                await install();
+                resolve();
+            }
+        });
+    });
+}
+
+// Run
+main().then(() => {
+    console.log(`${colors.bright}${colors.green}Happy coding! 🚀${colors.reset}\n`);
+    process.exit(0);
+}).catch(err => {
+    console.error(`${colors.red}Error:${colors.reset}`, err);
+    process.exit(1);
+});

package/src/scss/abstracts/_functions.scss

@@ -0,0 +1,19 @@
+@use "sass:math";
+@use "sass:color";
+
+// Check if color is light or dark to determine text color
+@function color-contrast($color) {
+    $r: color.channel($color, "red", $space: rgb);
+    $g: color.channel($color, "green", $space: rgb);
+    $b: color.channel($color, "blue", $space: rgb);
+
+    $yiq: math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
+
+    @if ($yiq >=150) {
+        @return #000;
+    }
+
+    @else {
+        @return #fff;
+    }
+}

package/src/scss/abstracts/_mixins.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "variables" as *;
+
+// Breakpoint Mixin
+@mixin media-up($breakpoint) {
+    @if map.has-key($grid-breakpoints, $breakpoint) {
+        $min: map.get($grid-breakpoints, $breakpoint);
+
+        @if $min !=0 {
+            @media (min-width: $min) {
+                @content;
+            }
+        }
+
+        @else {
+            @content;
+        }
+    }
+
+    @else {
+        @warn "No value retrieved for breakpoint: #{$breakpoint}.";
+    }
+}
+
+@mixin media-down($breakpoint) {
+    @if map.has-key($grid-breakpoints, $breakpoint) {
+        $max: map.get($grid-breakpoints, $breakpoint);
+
+        @media (max-width: $max - 0.02) {
+            @content;
+        }
+    }
+}

package/src/scss/abstracts/_variables.scss

@@ -0,0 +1,119 @@
+@use "sass:color";
+// Color Palette System (HSL for easy manipulation)
+$default: hsl(240, 5%, 26%) !default; // Zinc-like
+$primary: hsl(212, 100%, 47%) !default; // HeroUI Blue
+$secondary: hsl(270, 59%, 58%) !default; // HeroUI Purple
+$success: hsl(152, 57%, 50%) !default; // HeroUI Green
+$info: hsl(190, 80%, 50%) !default;
+$warning: hsl(36, 100%, 50%) !default; // HeroUI Yellow/Orange
+$danger: hsl(338, 70%, 50%) !default; // HeroUI Red/Pinkish
+$light: hsl(210, 20%, 98%) !default;
+$dark: hsl(220, 30%, 15%) !default;
+
+// Basic Colors
+$white: #fff !default;
+$black: #000 !default;
+
+// Grays
+$gray-50: #f9fafb !default;
+$gray-100: #f4f4f5 !default; // Zinc 100
+$gray-200: #e4e4e7 !default;
+$gray-300: #d4d4d8 !default;
+$gray-400: #a1a1aa !default;
+$gray-500: #71717a !default;
+$gray-600: #52525b !default;
+$gray-700: #3f3f46 !default;
+$gray-800: #27272a !default;
+$gray-900: #18181b !default;
+
+// Body & Text
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$font-family-base: "Inter", system-ui, -apple-system, sans-serif !default; // HeroUI uses Inter often
+$font-size-base: 1rem !default;
+$font-size-sm: 0.875rem !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-bold: 700 !default;
+$font-weight-semibold: 600 !default;
+$line-height-base: 1.5 !default;
+$line-height-base: 1.5 !default;
+
+$h1-font-size: 2.5rem !default;
+$h2-font-size: 2rem !default;
+$h3-font-size: 1.75rem !default;
+$h4-font-size: 1.5rem !default;
+$h5-font-size: 1.25rem !default;
+$h6-font-size: 1rem !default;
+
+$font-family-code: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace !default;
+
+// Spacing
+$spacer: 1rem !default;
+$spacers: (
+    0: 0,
+    1: $spacer * 0.25,
+    2: $spacer * 0.5,
+    3: $spacer,
+    4: $spacer * 1.5,
+    5: $spacer * 3) !default;
+
+// Border Radius
+$border-radius: 0.5rem !default; // Base rounded-lg
+$border-radius-sm: 0.375rem !default;
+$border-radius-lg: 0.75rem !default;
+$border-radius-xl: 1rem !default;
+
+// Box Shadow
+$box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06) !default; // Tailwind/HeroUI style
+$box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
+
+// Breakpoints
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px) !default;
+
+$theme-colors: (
+    "default": $default,
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark) !default;
+
+// CSS Custom Properties Root
+:root {
+    --e-default: #{$default};
+    --e-primary: #{$primary};
+    --e-secondary: #{$secondary};
+    --e-success: #{$success};
+    --e-info: #{$info};
+    --e-warning: #{$warning};
+    --e-danger: #{$danger};
+    --e-light: #{$light};
+    --e-dark: #{$dark};
+
+    // Soft Variants (10% opacity equivalent for light mode)
+    --e-primary-soft: #{color.scale($primary, $lightness: 90%)};
+    --e-secondary-soft: #{color.scale($secondary, $lightness: 90%)};
+    --e-success-soft: #{color.scale($success, $lightness: 90%)};
+    --e-info-soft: #{color.scale($info, $lightness: 90%)};
+    --e-warning-soft: #{color.scale($warning, $lightness: 90%)};
+    --e-danger-soft: #{color.scale($danger, $lightness: 90%)};
+
+    --e-body-bg: #{$body-bg};
+    --e-body-color: #{$body-color};
+
+    --e-font-sans: #{$font-family-base};
+}

package/src/scss/base/_reset.scss

@@ -0,0 +1,24 @@
+@use "../abstracts/variables" as *;
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: var(--e-font-sans);
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--e-body-color);
+    background-color: var(--e-body-bg);
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}

package/src/scss/base/_transitions.scss

@@ -0,0 +1,10 @@
+// Transitions
+// Base classes for Bootstrap-compatible animations
+
+.fade {
+    transition: opacity .15s linear;
+
+    &:not(.show) {
+        opacity: 0;
+    }
+}

package/src/scss/base/_typography.scss

@@ -0,0 +1,50 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+    text-wrap: balance;
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.75rem;
+}
+
+h4 {
+    font-size: 1.5rem;
+}
+
+h5 {
+    font-size: 1.25rem;
+}
+
+h6 {
+    font-size: 1rem;
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+a {
+    color: var(--e-primary);
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}