bernova 0.0.2

package/src/lib/generateCss/helpers/attribute/attributeHandler.utils.js

@@ -0,0 +1,47 @@
+const { separateStyles } = require('../utils/separateStyles.utils.js');
+
+/**
+ * Handles custom attributes and processes nested objects.
+ *
+ * @param {Object} attributes - The custom attributes to process.
+ * @param {string} ruleName - The base rule name to be used.
+ * @param {Function} processSource - A function to process nested objects.
+ * @param {string} [carry] - An optional carry attribute for nested processing.
+ */
+const attributeHandler = ({
+  attributes,
+  ruleName,
+  processSource,
+  carry = undefined,
+}) => {
+  for (const [attr, properties] of Object.entries(attributes)) {
+    //* lower case the attribute name for consistency
+    const attrLower = attr.toLowerCase();
+    //* build the complete attribute selector
+    const attrName = carry
+      ? `${ruleName}[${carry}="${attrLower}"]`
+      : `${ruleName}[${attrLower}="true"]`;
+    //* separate properties into special and regular
+    const { styles, lib, other } = separateStyles(properties);
+    //* check if existe styles
+    const hasStyles = Object.entries(styles).length > 0;
+    const hasLib = Object.entries(lib).length > 0;
+    const hasOther = Object.entries(other).length > 0;
+    //* Process styles and lib if they exist
+    if (hasStyles || hasLib) {
+      const mergeStyles = { ...styles, ...lib };
+      processSource({ source: mergeStyles, theRule: attrName });
+    }
+    //* Process nested attributes if they exist
+    if (hasOther) {
+      attributeHandler({
+        attributes: other,
+        ruleName,
+        processSource,
+        carry: attrLower,
+      });
+    }
+  }
+};
+
+module.exports = { attributeHandler };

package/src/lib/generateCss/helpers/classnames/formatClassName.utils.js

@@ -0,0 +1,28 @@
+/**
+ * CSS Class Name Formatter for Bernova
+ *
+ * Ensures consistent CSS class naming by converting JavaScript naming conventions
+ * to CSS-friendly format. Follows CSS naming best practices.
+ */
+
+/**
+ * Formats JavaScript property names into valid CSS class names
+ * Converts to lowercase and replaces underscores with hyphens for CSS compatibility
+ *
+ * @param {string} className - The class name to format (JavaScript property name)
+ * @returns {string} CSS-formatted class name (lowercase with hyphens)
+ *
+ * @example
+ * formatClassName('primaryButton') // returns 'primarybutton'
+ * formatClassName('nav_item_active') // returns 'nav-item-active'
+ * formatClassName('HEADER_TITLE') // returns 'header-title'
+ */
+const formatClassName = (className) => {
+  if (!className || typeof className !== 'string') {
+    return '';
+  }
+
+  return className.toLowerCase().replace(/_/g, '-');
+};
+
+module.exports = { formatClassName };

package/src/lib/generateCss/helpers/classnames/handlerRegister.utils.js

@@ -0,0 +1,124 @@
+/**
+ * CSS Register Handler for Bernova
+ *
+ * Processes the CSS class register to generate provider utilities and tools.
+ * Creates structured exports for components, class mappings, and TypeScript types.
+ */
+
+const { simplifyName } = require('../../../simplifyName/simplifyName.utils');
+
+/**
+ * Handles the CSS register to generate provider documentation and tools
+ * Recursively processes nested component structures and creates exports
+ *
+ * @param {Object} params - Handler parameters
+ * @param {Object} params.register - CSS class register with component mappings
+ * @param {string} params.prefix - CSS class prefix to remove from names
+ * @returns {Object} Processed documentation for providers and tools
+ */
+const handlerRegister = ({ register, prefix }) => {
+  // Track registered components to avoid duplicates
+  const componentsRegistered = new Set();
+
+  /**
+   * Recursively processes the register object to generate structured documentation
+   * @param {Object} rg - Current register level to process
+   * @param {number} space - Indentation spacing for formatting
+   * @param {number} lv - Current nesting level (1 = top level)
+   */
+  const processRegister = ({ rg, space = 2, lv = 1 }) => {
+    const currentSpace = ' '.repeat(space);
+    return Object.entries(rg).reduce(
+      (acc, [comp, value]) => {
+        // Clean component name by removing CSS prefix
+        const component = comp.replace(`${prefix}-`, '');
+
+        if (typeof value === 'object') {
+          // Handle nested component structures
+          const isFirstLevel = lv === 1;
+          const UC = isFirstLevel ? component.toUpperCase() : component;
+
+          // Generate provider documentation (opening braces)
+          acc.prov.doc += `${currentSpace}${UC}: {\n`;
+          acc.prov.declare += `${currentSpace}${UC}: {\n`;
+
+          // Add to components list (union types and object mapping)
+          acc.comp.simple += acc.comp.simple.length ? ` | '${UC}'` : `'${UC}'`;
+          acc.comp.object += isFirstLevel
+            ? `${currentSpace}${UC}: '${UC}',\n`
+            : '';
+          // Recursively process nested structures with increased indentation
+          const nextSpace = space + 2;
+          const nextLv = lv + 1;
+          const {
+            prov: { doc, declare: declareType },
+            tools: { doc: toolsDoc, declare: toolsDeclare },
+          } = processRegister({
+            rg: value,
+            space: nextSpace,
+            lv: nextLv,
+          });
+
+          // Close provider documentation (closing braces)
+          acc.prov.doc += doc;
+          acc.prov.declare += declareType;
+          acc.prov.doc += `${currentSpace}},\n`;
+          acc.prov.declare += `${currentSpace}},\n`;
+
+          // Append tools documentation from nested processing
+          acc.tools.doc += toolsDoc;
+          acc.tools.declare += toolsDeclare;
+        } else if (typeof value === 'boolean' && value) {
+          // Handle leaf nodes (actual CSS class mappings)
+
+          // Generate tools documentation (simplified component names)
+          const componentTools = simplifyName(component);
+          if (!componentsRegistered.has(componentTools)) {
+            componentsRegistered.add(componentTools);
+            acc.tools.doc += `  ${componentTools}: '${component}',\n`;
+            acc.tools.declare += `  ${component}: string,\n`;
+          }
+
+          // Generate provider documentation (use last part after __ as key)
+          const provKey = component.split('__').at(-1);
+          acc.prov.doc += `${currentSpace}${provKey}: '${component}',\n`;
+          acc.prov.declare += `${currentSpace}${provKey}: string,\n`;
+        } else if (typeof value === 'string') {
+          // Handle string mappings (class name aliases)
+
+          // Generate tools documentation from string value
+          const compFromValue = simplifyName(value).replace(`${prefix}_`, '');
+          if (!componentsRegistered.has(compFromValue)) {
+            componentsRegistered.add(compFromValue);
+            acc.tools.doc += `  ${compFromValue}: '${value}',\n`;
+            acc.tools.declare += `  ${compFromValue}: string,\n`;
+          }
+
+          // Generate provider documentation with string value
+          const provKey = component.split('__').at(-1);
+          acc.prov.doc += `${currentSpace}${provKey}: '${value}',\n`;
+          acc.prov.declare += `${currentSpace}${provKey}: string,\n`;
+        } else if (typeof value === 'function') {
+          // Handle dynamic value functions (special cases for type generation)
+          if (component === 'dynamic_values') {
+            acc.prov.doc += `${currentSpace}${component}: ${value.toString()},\n`;
+          } else if (component === 'dynamic_values_type') {
+            acc.prov.declare += `${currentSpace}dynamic_values: ${value()},\n`;
+          }
+        }
+        return acc;
+      },
+      // Initialize accumulator with empty documentation structures
+      {
+        comp: { simple: '', object: '' }, // Component type definitions
+        prov: { doc: '', declare: '' }, // Provider documentation and types
+        tools: { doc: '', declare: '' }, // Tools utilities and types
+      }
+    );
+  };
+
+  // Start processing from the root register
+  return processRegister({ rg: register });
+};
+
+module.exports = { handlerRegister };

package/src/lib/generateCss/helpers/cssVars/generateVars.utils.js

@@ -0,0 +1,73 @@
+/**
+ * CSS Variables Generator for Bernova
+ *
+ * Converts JavaScript objects into CSS custom properties (CSS variables).
+ * Handles nested objects recursively and generates corresponding TypeScript types.
+ */
+
+const { simplifyName } = require('../../../simplifyName/simplifyName.utils');
+const { formatClassName } = require('../classnames/formatClassName.utils');
+
+/**
+ * Recursively generates CSS variables from a JavaScript object structure
+ * Creates CSS custom properties with proper naming and generates documentation
+ *
+ * @param {Object} params - Generation parameters
+ * @param {Object} params.source - Source object with variable definitions
+ * @param {string} params.varName - CSS variable prefix (defaults to '-')
+ * @param {string} params.prefix - Theme prefix for variable naming
+ * @returns {Object} Generated CSS variables and TypeScript documentation
+ *
+ * @example
+ * const source = { colors: { primary: '#007bff', secondary: '#6c757d' } };
+ * const { root, rootDocs } = generateVars({ source, varName: '--theme', prefix: 'app' });
+ * // Generates: --theme-colors-primary: #007bff; --theme-colors-secondary: #6c757d;
+ */
+
+const generateVars = ({ source, varName = '-', prefix }) => {
+  const sourceEntries = Object.entries(source);
+
+  // Process each key-value pair in the source object
+  const { root, rootDocs } = sourceEntries.reduce(
+    (acc, [key, value]) => {
+      // Create CSS variable name with proper formatting
+      const varKey = `${varName}-${formatClassName(key)}`;
+
+      if (typeof value === 'object' && value !== null) {
+        // Recursively process nested objects
+        const { root: nestedRoot, rootDocs: nestedDocs } = generateVars({
+          source: value,
+          varName: varKey,
+          prefix,
+        });
+
+        // Accumulate nested CSS variables and documentation
+        acc.root += nestedRoot;
+        acc.rootDocs.doc += nestedDocs.doc;
+        acc.rootDocs.declare += nestedDocs.declare;
+      } else {
+        // Generate CSS variable for primitive values
+        const rootRegisterKey = simplifyName(varKey).replace(`${prefix}_`, '');
+
+        // Add CSS custom property declaration
+        acc.root += `${varKey}: ${value};\n`;
+
+        // Add JavaScript object property for provider
+        acc.rootDocs.doc += `  ${rootRegisterKey}: 'var(${varKey})',\n`;
+
+        // Add TypeScript declaration
+        acc.rootDocs.declare += `  ${rootRegisterKey}: string;\n`;
+      }
+
+      return acc;
+    },
+    { root: '', rootDocs: { doc: '', declare: '' } }
+  );
+
+  return {
+    root,
+    rootDocs,
+  };
+};
+
+module.exports = { generateVars };

package/src/lib/generateCss/helpers/dynamicValues/dynamicValues.utils.js

@@ -0,0 +1,72 @@
+/**
+ * Dynamic Values Processor for Bernova CSS Framework
+ *
+ * Handles runtime CSS variable generation and type definitions.
+ * Processes dynamic values that can be updated at runtime via JavaScript.
+ */
+
+/**
+ * Converts dynamic style objects to CSS custom properties
+ * Generates both string format (for CSS injection) and object format (for JS access)
+ *
+ * @param {Object} styles - Dynamic styles object with $ prefixed keys
+ * @returns {Object} CSS variables in string and object format
+ * @example
+ * dynamic_values({ $primaryColor: '#ff0000' })
+ * // Returns: { string: '--primarycolor: #ff0000; ', object: { '--primarycolor': '#ff0000' } }
+ */
+const dynamic_values = (styles) => {
+  return Object.entries(styles).reduce(
+    (acc, [key, value]) => {
+      // Generate CSS custom property name (lowercase, remove $)
+      const varName = '--' + key.toLocaleLowerCase().replace('$', '');
+      acc.string += varName + ': ' + value + '; ';
+      acc.object[varName] = value;
+      return acc;
+    },
+    {
+      string: '', // CSS string format: '--var: value; '
+      object: {}, // Object format: { '--var': 'value' }
+    }
+  );
+};
+
+/**
+ * Generates TypeScript type definitions for dynamic values function
+ * Creates type-safe interfaces for runtime CSS variable manipulation
+ *
+ * @param {Object} dynamicValues - Dynamic values object to generate types for
+ * @returns {string} TypeScript function signature
+ */
+const dynamic_values_type = (dynamicValues) => {
+  const types = Object.keys(dynamicValues).reduce(
+    (acc, key) => (acc += `'${key}': string; `),
+    ''
+  );
+  return `(styles: { ${types}}) => { string: string; object: object } `;
+};
+
+/**
+ * Registers dynamic values in the component register system
+ * Associates dynamic values with their parent components for provider generation
+ *
+ * @param {Object} params - Registration parameters
+ * @param {Object} params.dynamicValues - Dynamic values to register
+ * @param {Object} params.register - Component register to update
+ * @param {string} params.ruleName - CSS rule name to extract component from
+ * @param {string} params.prefix - CSS prefix to remove from component name
+ */
+const setDynamicRegister = ({ dynamicValues, register, ruleName, prefix }) => {
+  const relatedComponent = ruleName
+    .split('--')[0]
+    .split('__')[0]
+    .replace(prefix, '');
+  if (!(relatedComponent in register)) {
+    register[relatedComponent] = {};
+  }
+  register[relatedComponent].dynamic_values = dynamic_values;
+  register[relatedComponent].dynamic_values_type = () =>
+    dynamic_values_type(dynamicValues);
+};
+
+module.exports = { setDynamicRegister };

package/src/lib/generateCss/helpers/dynamicValues/processDynamic.utils.js

@@ -0,0 +1,10 @@
+const processDynamicProps = (dynamic) => {
+  if (Array.isArray(dynamic)) {
+    return dynamic.reduce((acc, curr) => {
+      acc[curr] = `var(--${curr.toLocaleLowerCase().replace('$', '')})`;
+      return acc;
+    }, {});
+  }
+};
+
+module.exports = { processDynamicProps };

package/src/lib/generateCss/helpers/filterGenerateCss.utils.js

@@ -0,0 +1,73 @@
+const { compilerTypeValid } = require('../../../constants');
+const { generateVars } = require('./cssVars/generateVars.utils');
+const { generateCssStyles } = require('./generateCssStyles.utils');
+const { generateGlobalStyles } = require('./other/generateGlobalStyles.utils');
+
+/**
+ * Filters and generates CSS content based on compiler type and source configuration
+ * This function determines what CSS should be generated based on the compilation mode
+ *
+ * @param {Object} params - The parameters object
+ * @param {Object} params.source - Source configuration containing foundations, theme, global, and media
+ * @param {string} params.compilerType - Type of compilation: 'full', 'foundationOnly', or 'componentOnly'
+ * @param {string} params.baseCss - Base CSS content to include in foundations
+ * @param {string} params.prefix - CSS variable prefix for namespacing
+ * @returns {Object} Object containing generated CSS parts and documentation
+ */
+const filterGenerateCss = ({ source, compilerType, baseCss, prefix }) => {
+  const { foundations, theme, global, media } = source;
+
+  // Determine what content to generate based on compiler type
+  const hasFoundations =
+    compilerType === compilerTypeValid.full ||
+    compilerType === compilerTypeValid.foundationOnly;
+  const hasTheme =
+    compilerType === compilerTypeValid.full ||
+    compilerType === compilerTypeValid.componentOnly;
+
+  // Generate foundation CSS (CSS variables, base styles, global styles)
+  const { foundationsCss, rootDocs, globalDocs } = (() => {
+    if (!hasFoundations) {
+      return {
+        foundationsCss: '',
+        rootDocs: { doc: '', declare: '' },
+        globalDocs: { doc: '', declare: '' },
+      };
+    }
+    // Generate CSS custom properties (variables) from foundations
+    const { root, rootDocs } = foundations
+      ? generateVars({
+          source: foundations,
+          varName: prefix ? `--${prefix}` : '-',
+          prefix,
+        })
+      : { root: '', rootDocs: { doc: '', declare: '' } };
+
+    // Generate global styles that apply to all elements
+    const { globalStyles, globalDocs } = global
+      ? generateGlobalStyles(global)
+      : { globalStyles: '', globalDocs: { doc: '', declare: '' } };
+
+    // Combine base CSS, root variables, and global styles
+    const foundationsCss = `${baseCss}:root{\n${root}}\n${globalStyles}`;
+    return { foundationsCss, rootDocs, globalDocs };
+  })();
+
+  // Generate component theme styles (classes, utilities, etc.)
+  const { stylesCss, stylesDocs } = (() => {
+    if (!hasTheme || !theme) {
+      return { stylesCss: '', stylesDocs: {} };
+    }
+    const { styles, stylesDocs } = generateCssStyles({
+      source: theme,
+      mediaConfig: media,
+      prefix,
+    });
+    return { stylesCss: styles, stylesDocs };
+  })();
+
+  // Return separated CSS parts for further processing
+  return { stylesCss, foundationsCss, stylesDocs, rootDocs, globalDocs };
+};
+
+module.exports = { filterGenerateCss };

package/src/lib/generateCss/helpers/foreign/foreignHandler.utils.js

@@ -0,0 +1,85 @@
+/**
+ * Foreign Theme Handler for Bernova CSS Framework
+ *
+ * Processes external/foreign theme components and integrates them
+ * into the main CSS generation system. Handles variant mapping
+ * and component structure transformation.
+ */
+
+const { cssProps } = require('../../../../constants/cssProps');
+
+/**
+ * Handles integration of foreign theme components into Bernova system
+ * Transforms external component structures into compatible CSS class mappings
+ *
+ * @param {Object} foreign - Foreign theme components to integrate
+ * @param {string} prefix - CSS class prefix for generated classes
+ * @returns {Object} Transformed component structure with register data
+ */
+const foreignHandler = ({ foreign, prefix }) => {
+  return Object.entries(foreign).reduce(
+    (acc, [foreignName, { component, variant, name = '' }]) => {
+      if (!component) {
+        return acc;
+      }
+      let isMainSet = false;
+      let structure = {};
+      const lowerName = name.toLocaleLowerCase();
+      const componentVariant = variant && component[variant];
+      if (componentVariant) {
+        const lowerVariant = variant.toLocaleLowerCase();
+        Object.entries(componentVariant).forEach(([key, value]) => {
+          if (key in cssProps && !(key in structure)) {
+            structure[lowerName] = `${prefix}${lowerName}--${lowerVariant}`;
+          }
+          if (key.startsWith('_')) {
+            const subComponent = key.toLocaleLowerCase().substring(1);
+            structure[
+              subComponent
+            ] = `${prefix}${lowerName}__${subComponent}--${lowerVariant}`;
+          }
+          if (key === '$foreign') {
+            const v = `$_${lowerVariant}`;
+            if (!(v in structure)) {
+              structure[v] = {};
+            }
+            structure[v] = {
+              ...structure[v],
+              ...foreignHandler({ foreign: value, prefix }),
+            };
+          }
+        });
+      }
+      Object.entries(component).forEach(([key, value]) => {
+        if (key in cssProps && !isMainSet) {
+          const cssClass =
+            lowerName in structure
+              ? `${prefix}${lowerName} ${structure[lowerName]}`
+              : `${prefix}${lowerName}`;
+          structure[lowerName] = cssClass;
+          isMainSet = true;
+        }
+        if (key.startsWith('_')) {
+          const subComponent = key.toLocaleLowerCase().substring(1);
+          const compoundedComponent = `${lowerName}__${subComponent}`;
+          const cssClass =
+            subComponent in structure
+              ? `${prefix}${compoundedComponent} ${structure[subComponent]}`
+              : `${prefix}${compoundedComponent}`;
+          structure[subComponent] = cssClass;
+        }
+        if (key === '$foreign') {
+          structure = {
+            ...structure,
+            ...foreignHandler({ foreign: value, prefix }),
+          };
+        }
+      });
+      acc[foreignName] = structure;
+      return acc;
+    },
+    {}
+  );
+};
+
+module.exports = { foreignHandler };