bernova 0.0.2

package/src/lib/generateTools/generateTools.utils.js

@@ -0,0 +1,181 @@
+/**
+ * Tools Generator for Bernova CSS Framework
+ *
+ * Generates JavaScript utility files for CSS class names, variables, and components.
+ * Creates developer tools for accessing generated CSS classes and custom properties.
+ */
+
+const path = require('path');
+const { compilerTypeValid } = require('../../constants');
+const { writeDoc } = require('../writeDoc/writeDoc.utils');
+
+/**
+ * Generates developer tools and utility files for the compiled CSS theme
+ * Creates JavaScript exports for class names, variables, and component mappings
+ *
+ * @param {Object} params - Generation parameters
+ * @param {string} params.dir - Output directory for tools
+ * @param {Object} params.bvTools - Tools configuration and paths
+ * @param {string} params.compilerType - Compilation type (full, foundation-only, component-only)
+ * @param {string} params.name - Theme name
+ * @param {Object} params.stylesDocs - Styles documentation data
+ * @param {Object} params.rootDocs - Root/variables documentation
+ * @param {Object} params.globalDocs - Global styles documentation
+ * @param {Object} params.mediaDocs - Media queries documentation
+ */
+const generateTools = async ({
+  dir,
+  bvTools,
+  compilerType,
+  name,
+  stylesDocs,
+  rootDocs,
+  globalDocs,
+  mediaDocs,
+}) => {
+  const {
+    path: bvToolsPath,
+    cssClassNames,
+    cssVariables,
+    availableComponents,
+    cssMediaQueries,
+    cssGlobalStyles,
+    declarationHelp,
+  } = bvTools;
+
+  const hasClassNames = compilerType !== compilerTypeValid.foundationOnly;
+  const hasFoundations = compilerType !== compilerTypeValid.componentOnly;
+
+  //* Generate tools for classNames
+  if (!!cssClassNames && hasClassNames) {
+    // Generate CSS class names utility file
+    const {
+      tools: { doc, declare },
+    } = stylesDocs;
+    const classNamePath = path.resolve(dir, bvToolsPath, 'cssClasses.js');
+    const docClassNames = `export const cssClasses = {\n${doc}}`;
+    await writeDoc(classNamePath, docClassNames, 'cssClasses.js');
+    if (declarationHelp) {
+      const classNameDeclarePath = path.resolve(
+        dir,
+        bvToolsPath,
+        'cssClasses.d.ts'
+      );
+      const docClassNamesDeclare = `export declare const cssClasses: {\n${declare}}`;
+      await writeDoc(
+        classNameDeclarePath,
+        docClassNamesDeclare,
+        'cssClasses.d.ts'
+      );
+    }
+    // CSS class names tools generated successfully
+  }
+  //* Generate tools for cssVariables
+  if (!!cssVariables && hasFoundations) {
+    // Generate CSS variables utility file
+    const { doc, declare } = rootDocs;
+    const cssVariablesPath = path.resolve(dir, bvToolsPath, 'cssVars.js');
+    const docCssVariables = `export const cssVars = {\n${doc}}`;
+    await writeDoc(cssVariablesPath, docCssVariables, 'cssVars.js');
+    if (declarationHelp) {
+      const cssVariablesDeclarePath = path.resolve(
+        dir,
+        bvToolsPath,
+        'cssVars.d.ts'
+      );
+      const docCssVariablesDeclare = `export declare const cssVars: {\n${declare}}`;
+      await writeDoc(
+        cssVariablesDeclarePath,
+        docCssVariablesDeclare,
+        'cssVars.d.ts'
+      );
+    }
+    // CSS variables tools generated successfully
+  }
+  //* Generate tools for cssMediaQueries
+  if (!!availableComponents && hasClassNames) {
+    // spinner.start(
+    //   `Generating Available Components Tools for theme: ${name}...`
+    // );
+    const { comp } = stylesDocs;
+    const availableComponentsPath = path.resolve(
+      dir,
+      bvToolsPath,
+      'cssAvailableComponents.js'
+    );
+    const docAvailableComponents = `export const cssAvailableComponents = {\n${comp.object}}`;
+    await writeDoc(
+      availableComponentsPath,
+      docAvailableComponents,
+      'cssAvailableComponents.js'
+    );
+    if (declarationHelp) {
+      const availableComponentsDeclarePath = path.resolve(
+        dir,
+        bvToolsPath,
+        'cssAvailableComponents.d.ts'
+      );
+      const declareAvailableComponents = `export declare const cssAvailableComponents: {\n${comp.object}}`;
+      await writeDoc(
+        availableComponentsDeclarePath,
+        declareAvailableComponents,
+        'cssAvailableComponents.d.ts'
+      );
+    }
+    // spinner.succeed(
+    //   `Available Components Tools generated for theme: ${name}.`
+    // );
+  }
+  //* Generate tools for cssMediaQueries
+  if (hasFoundations && !!cssMediaQueries) {
+    const mediaQueriesPath = path.resolve(
+      dir,
+      bvToolsPath,
+      'cssMediaQueries.js'
+    );
+    const docMediaQueries = `export const cssMediaQueries = {\n${mediaDocs}}`;
+    await writeDoc(mediaQueriesPath, docMediaQueries, 'cssMediaQueries.js');
+    if (declarationHelp) {
+      const mediaQueriesDeclarePath = path.resolve(
+        dir,
+        bvToolsPath,
+        'cssMediaQueries.d.ts'
+      );
+      const docMediaQueriesDeclare = `export declare const cssMediaQueries: {\n${mediaDocs}}`;
+      await writeDoc(
+        mediaQueriesDeclarePath,
+        docMediaQueriesDeclare,
+        'cssMediaQueries.d.ts'
+      );
+    }
+  }
+
+  //* Generate tools for cssGlobalStyles
+  if (hasFoundations && !!cssGlobalStyles) {
+    const { doc, declare } = globalDocs;
+    const globalStylesPath = path.resolve(
+      dir,
+      bvToolsPath,
+      'cssGlobalStyles.js'
+    );
+    const docGlobalStyles = `export const cssGlobalStyles = {\n${doc}}`;
+    await writeDoc(globalStylesPath, docGlobalStyles, 'cssGlobalStyles.js');
+    if (declarationHelp) {
+      const globalStylesDeclarePath = path.resolve(
+        dir,
+        bvToolsPath,
+        'cssGlobalStyles.d.ts'
+      );
+      const docGlobalStylesDeclare = `export declare const cssGlobalStyles: {\n${declare}}`;
+      await writeDoc(
+        globalStylesDeclarePath,
+        docGlobalStylesDeclare,
+        'cssGlobalStyles.d.ts'
+      );
+    }
+  }
+
+  return true;
+};
+
+module.exports = { generateTools };

package/src/lib/generateTypesTools/generateTypesTools.utils.js

@@ -0,0 +1,59 @@
+/**
+ * TypeScript Types Generator for Bernova CSS Framework
+ *
+ * Generates TypeScript definition files for CSS classes, components, and media queries.
+ * Provides type safety and autocomplete support for generated CSS utilities.
+ */
+
+const path = require('path');
+const { typingStyles } = require('../typingStyles');
+const { writeDoc } = require('../writeDoc/writeDoc.utils');
+
+/**
+ * Generates TypeScript definition files for the compiled CSS theme
+ * Creates type-safe interfaces for CSS classes, components, and media queries
+ *
+ * @param {Object} params - Generation parameters
+ * @param {string} params.dir - Output directory for type files
+ * @param {Object} params.typesTools - TypeScript generation configuration
+ * @param {Object} params.mediaConfig - Media queries configuration for type generation
+ * @param {Object} params.stylesDocs - Component styles documentation for type extraction
+ */
+const generateTypesTools = async ({
+  dir,
+  typesTools,
+  mediaConfig,
+  stylesDocs,
+}) => {
+  const { stylesTypes, componentsTypes } = typesTools;
+
+  if (!!stylesTypes) {
+    const { name: styleName, path: stylesPath } = stylesTypes;
+    const stylesTypesPath = path.resolve(dir, stylesPath, `${styleName}.ts`);
+    const stylesTyping = typingStyles({ mediaConfig });
+    await writeDoc(stylesTypesPath, stylesTyping, `${styleName}.ts`);
+  }
+  if (!!componentsTypes && Object.keys(stylesDocs).length > 0) {
+    const { name: componentsName, path: componentPath } = componentsTypes;
+    const componentsTypesPath = path.resolve(
+      dir,
+      componentPath,
+      `${componentsName}.ts`
+    );
+    const { comp, prov } = stylesDocs;
+    const typeName =
+      componentsName.charAt(0).toUpperCase() + componentsName.slice(1);
+    const libAvailableComponents = `export type ${typeName}AvailableComponents = ${comp.simple}\n`;
+    const libComponents = `export type ${typeName}Components = {\n${prov.declare}}`;
+    const filteredKeys = `
+type NonVariablesKeys<T> = {
+  [K in keyof T]: K extends \`$\${string}\` ? never : K;
+}[keyof T];
+export type ComponentSelected<T> = Pick<T, NonVariablesKeys<T>>;
+    `;
+    const docComponents = `${libAvailableComponents}${filteredKeys}\n${libComponents}`;
+    await writeDoc(componentsTypesPath, docComponents, `${componentsName}.ts`);
+  }
+};
+
+module.exports = { generateTypesTools };

package/src/lib/handlerForeignThemes/handlerForeignThemes.utils.js

@@ -0,0 +1,96 @@
+/**
+ * Foreign Themes Handler for Bernova CSS Framework
+ *
+ * Processes external CSS theme files and extracts variables and class names.
+ * Integrates foreign themes into the main compilation process by analyzing
+ * their CSS content and generating appropriate documentation.
+ */
+
+const fs = require('fs').promises;
+const path = require('path');
+const { fileExists } = require('../fileExists/fileExists.utils');
+const { simplifyName } = require('../simplifyName/simplifyName.utils');
+
+/**
+ * Processes and integrates foreign CSS theme files into Bernova compilation
+ * Extracts CSS variables and class names from external stylesheets
+ *
+ * @param {string} dir - Base directory for resolving theme file paths
+ * @param {Array} foreignThemes - Array of foreign theme configurations
+ * @param {string} foreignThemes[].path - Relative path to the theme CSS file
+ * @param {string} foreignThemes[].position - Where to include ('before' or 'after')
+ * @param {string} foreignThemes[].name - Theme identifier name
+ * @returns {Object} Processed theme data with variables, classes, and file paths
+ */
+const handlerForeignThemes = async ({ dir, foreignThemes }) => {
+  // Initialize data structures for organizing theme content
+  const themeByPosition = { after: '', before: '' }; // File paths by position
+  const classesExtracted = { doc: '', declare: '' }; // CSS class documentation
+  const variablesExtracted = { doc: '', declare: '' }; // CSS variables documentation
+  const variablesRegistered = new Set(); // Track processed variables
+
+  if (!!foreignThemes && foreignThemes.length > 0) {
+    // Process each foreign theme configuration
+    for (const { path: themePath, position, name } of foreignThemes) {
+      if (!fileExists(dir, themePath)) continue;
+
+      // Generate normalized theme name
+      const themeName = simplifyName(name).toLocaleUpperCase();
+
+      // Resolve absolute path to theme file
+      const themeRoute = path.resolve(dir, themePath);
+
+      // Read and parse theme CSS content
+      const data = await fs.readFile(themeRoute, 'utf-8');
+      //* save the route of the file read;
+      // themeByPosition[position] +=
+      //   idx === 0 ? `'${themeRoute}'` : `, '${themeRoute}'`;
+      themeByPosition[position] +=
+        themeByPosition[position].length === 0
+          ? `'${themeRoute}'`
+          : `, '${themeRoute}'`;
+      //* get the css variables
+      const variableMatches = data.match(/--[a-zA-Z0-9-_]+:\s*[^;]+;/g);
+      if (variableMatches) {
+        [...new Set(variableMatches)].forEach((variable) => {
+          const [varName] = variable.split(':').map((s) => s.trim()); //? <-- recorver only the name
+          const keyVarName = simplifyName(varName);
+          //* avoid duplicate variables
+          if (variablesRegistered.has(keyVarName)) return;
+          variablesRegistered.add(keyVarName);
+          //* set register by theme name
+          variablesExtracted.doc += `  ${keyVarName}: 'var(${varName})',\n`;
+          variablesExtracted.declare += `  ${keyVarName}: string; \n`;
+        });
+      }
+      //* get the css classes
+      const classMatches = data.match(/\.[a-zA-Z0-9_-]+/g);
+      if (classMatches) {
+        const { doc, declare } = [...new Set(classMatches)].reduce(
+          (acc, cls) => {
+            const className = cls.slice(1); //? <-- Remove the dot
+            const keyClassName = simplifyName(className);
+            acc.doc += `    ${keyClassName}: '${className}',\n`;
+            acc.declare += `    ${keyClassName}: string; \n`;
+            return acc;
+          },
+          { doc: '', declare: '' }
+        );
+        //* set register by theme name
+        classesExtracted.doc += `  ${themeName}: {\n${doc}  },\n`;
+        classesExtracted.declare += `  ${themeName}: {\n${declare}  },\n`;
+      }
+    }
+  }
+
+  return {
+    themeByPosition: {
+      after: `[${themeByPosition.after}]`,
+      before: `[${themeByPosition.before}]`,
+    },
+    variablesExtracted,
+    classesExtracted,
+  };
+};
+
+module.exports = { handlerForeignThemes };

package/src/lib/index.js

@@ -0,0 +1,61 @@
+const { generateCSS } = require('./generateCss/generateCSS.utils.js');
+const {
+  readConfigData,
+  readThemeData,
+} = require('./readFile/readFile.utils.js');
+const { writeDoc } = require('./writeDoc/writeDoc.utils.js');
+const {
+  generateBaseCss,
+} = require('./generateBaseCss/generateBaseCss.utils.js');
+const { copyLocalFonts } = require('./copyLocalFonts/copyLocalFonts.utils.js');
+const {
+  generateCssFonts,
+} = require('./copyLocalFonts/generateCssFonts.utils.js');
+const {
+  generateProvider,
+} = require('./generateProvider/generateProvider.utils.js');
+//* compilers
+const { compileThemes } = require('./compileThemes.js');
+const { compileConfig } = require('./compileConfig.js');
+//* typing
+const { typingStyles } = require('./typingStyles');
+//* doc handlers
+const {
+  extractDocFragment,
+} = require('./extractDocFragment/extractDocFragment.utils.js');
+const { fileExists } = require('./fileExists/fileExists.utils.js');
+const {
+  handlerForeignThemes,
+} = require('./handlerForeignThemes/handlerForeignThemes.utils.js');
+//* helpers
+const { simplifyName } = require('./simplifyName/simplifyName.utils.js');
+const {
+  processMediaConfig,
+} = require('./processMediaConfig/processMediaConfig.util.js');
+//* register
+const {
+  generateThemeRegister,
+} = require('./generateThemeRegister/generateThemeRegister.utils.js');
+//* generate css string doc
+const { generateCssDoc } = require('./generateCssDoc/generateCssDoc.util.js');
+
+module.exports = {
+  generateCSS,
+  readConfigData,
+  readThemeData,
+  writeDoc,
+  generateBaseCss,
+  copyLocalFonts,
+  generateCssFonts,
+  generateProvider,
+  compileThemes,
+  compileConfig,
+  typingStyles,
+  extractDocFragment,
+  handlerForeignThemes,
+  fileExists,
+  simplifyName,
+  processMediaConfig,
+  generateThemeRegister,
+  generateCssDoc,
+};

package/src/lib/processMediaConfig/processMediaConfig.util.js

@@ -0,0 +1,32 @@
+/**
+ * Media Configuration Processor for Bernova CSS Framework
+ *
+ * Processes media query configurations and generates documentation strings
+ * for provider and tool generation systems.
+ */
+
+const { simplifyName } = require('../simplifyName/simplifyName.utils.js');
+
+/**
+ * Processes media configuration array and generates object property strings
+ * Creates key-value pairs for media query name mappings
+ *
+ * @param {Object} params - Processing parameters
+ * @param {Array} params.mediaConfig - Array of media query configurations
+ * @param {string} params.mediaConfig[].name - Media query breakpoint name
+ * @returns {string} Formatted object properties for media queries
+ * @example
+ * processMediaConfig({
+ *   mediaConfig: [{ name: 'mobile' }, { name: 'tablet' }]
+ * })
+ * // Returns: '  mobile: \'mobile\',\n  tablet: \'tablet\',\n'
+ */
+const processMediaConfig = ({ mediaConfig }) => {
+  return mediaConfig.reduce((acc, { name }) => {
+    // Generate simplified property name and original value mapping
+    acc += `  ${simplifyName(name)}: '${name}',\n`;
+    return acc;
+  }, '');
+};
+
+module.exports = { processMediaConfig };

package/src/lib/readFile/readFile.utils.js

@@ -0,0 +1,110 @@
+/**
+ * File Reading Utilities for Bernova
+ *
+ * Provides utilities for reading and parsing configuration files and theme data.
+ * Includes TypeScript support via ts-node for importing .ts configuration files.
+ */
+
+const fs = require('fs').promises;
+const path = require('path');
+const { register } = require('ts-node');
+
+// Configure ts-node for TypeScript file imports
+register({
+  compilerOptions: {
+    module: 'commonjs',
+    target: 'es6',
+    moduleResolution: 'node',
+    esModuleInterop: true,
+    allowJs: true,
+    skipLibCheck: true, // Skip type checking for faster compilation
+  },
+});
+
+/**
+ * Reads and parses JSON configuration data from a file
+ * Supports both .json and .js configuration files
+ *
+ * @param {string} filePath - The absolute path to the configuration file
+ * @returns {Promise<Object>} The parsed configuration data
+ * @throws {Error} When file cannot be read or parsed
+ */
+const readConfigData = async (filePath) => {
+  try {
+    const data = await fs.readFile(filePath, 'utf8');
+    const parsedData = JSON.parse(data);
+
+    // Validate basic structure
+    if (!parsedData || typeof parsedData !== 'object') {
+      throw new Error('Configuration file must contain a valid JSON object');
+    }
+
+    return parsedData;
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      throw new Error(`Configuration file not found: ${filePath}`);
+    } else if (error instanceof SyntaxError) {
+      throw new Error(`Invalid JSON in configuration file: ${error.message}`);
+    }
+
+    console.error(`Error reading config file at ${filePath}:`, error.message);
+    throw error;
+  }
+};
+
+/**
+ * Reads and loads theme data from TypeScript/JavaScript modules
+ * Dynamically requires modules and extracts named exports
+ *
+ * @param {Object} paths - Object containing path and export name configurations
+ * @param {string} paths[].path - Relative or absolute path to the module file
+ * @param {string} paths[].name - Named export to extract from the module
+ * @returns {Object} Object with loaded theme data keyed by the original path keys
+ * @throws {Error} When module cannot be loaded or export is not found
+ *
+ * @example
+ * const paths = {
+ *   foundations: { path: './design/foundations.ts', name: 'FOUNDATIONS' },
+ *   theme: { path: './design/theme.ts', name: 'THEME' }
+ * };
+ * const data = readThemeData(paths);
+ * // Returns: { foundations: {...}, theme: {...} }
+ */
+const readThemeData = (paths) => {
+  const data = {};
+
+  Object.entries(paths).forEach(([key, config]) => {
+    try {
+      const { path: modulePath, name } = config;
+
+      if (!modulePath || !name) {
+        throw new Error(
+          `Invalid configuration for ${key}: missing path or name`
+        );
+      }
+
+      // Resolve the module path
+      const resolvedPath = path.resolve(modulePath);
+
+      // Clear require cache to ensure fresh imports
+      delete require.cache[resolvedPath];
+
+      // Load the module
+      const module = require(resolvedPath);
+
+      // Extract the named export
+      if (!(name in module)) {
+        throw new Error(`Export "${name}" not found in module ${modulePath}`);
+      }
+
+      data[key] = module[name];
+    } catch (error) {
+      console.error(`Failed to load theme data for ${key}:`, error.message);
+      throw new Error(`Cannot load theme data for "${key}": ${error.message}`);
+    }
+  });
+
+  return data;
+};
+
+module.exports = { readConfigData, readThemeData };

package/src/lib/simplifyName/__tests__/simplifyName.utils.test.js

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { simplifyName } from '../simplifyName.utils.js';
+
+describe('simplifyName', () => {
+  it('should simplify basic hyphenated names', () => {
+    expect(simplifyName('my-button-large')).toBe('my_button_large');
+  });
+
+  it('should simplify dot-separated names', () => {
+    expect(simplifyName('header.nav.item')).toBe('header_nav_item');
+  });
+
+  it('should remove duplicate parts', () => {
+    expect(simplifyName('duplicate-duplicate-word')).toBe('duplicate_word');
+  });
+
+  it('should handle mixed separators', () => {
+    expect(simplifyName('mixed-name.with_different-separators')).toBe(
+      'mixed_name_with_different_separators'
+    );
+  });
+
+  it('should handle names with numbers', () => {
+    expect(simplifyName('button-v2-large')).toBe('button_v2_large');
+  });
+
+  it('should handle camelCase names', () => {
+    expect(simplifyName('myButtonComponent')).toBe('myButtonComponent');
+  });
+
+  it('should handle names with special characters', () => {
+    expect(simplifyName('button--modifier__variant')).toBe(
+      'button_modifier_variant'
+    );
+  });
+
+  it('should handle empty string', () => {
+    expect(simplifyName('')).toBe('');
+  });
+
+  it('should handle null input', () => {
+    expect(simplifyName(null)).toBe('');
+  });
+
+  it('should handle undefined input', () => {
+    expect(simplifyName(undefined)).toBe('');
+  });
+
+  it('should handle non-string input', () => {
+    expect(simplifyName(123)).toBe('');
+    expect(simplifyName({})).toBe('');
+    expect(simplifyName([])).toBe('');
+  });
+
+  it('should handle names with only special characters', () => {
+    expect(simplifyName('---___...')).toBe('');
+  });
+
+  it('should handle single word names', () => {
+    expect(simplifyName('button')).toBe('button');
+  });
+
+  it('should preserve alphanumeric order when no duplicates', () => {
+    expect(simplifyName('a1-b2-c3')).toBe('a1_b2_c3');
+  });
+
+  it('should handle names with spaces', () => {
+    expect(simplifyName('my button component')).toBe('my_button_component');
+  });
+
+  it('should handle BEM-style class names', () => {
+    expect(simplifyName('block__element--modifier')).toBe(
+      'block_element_modifier'
+    );
+  });
+
+  it('should handle file-like names', () => {
+    expect(simplifyName('my-component.styles.css')).toBe(
+      'my_component_styles_css'
+    );
+  });
+
+  it('should remove duplicates regardless of case', () => {
+    // Note: Since we're using Set, case sensitivity is preserved
+    expect(simplifyName('Button-button-BUTTON')).toBe('Button_button_BUTTON');
+  });
+});

package/src/lib/simplifyName/simplifyName.utils.js

@@ -0,0 +1,28 @@
+/**
+ * Simplifies a name by extracting alphanumeric parts, removing duplicates, and joining with underscores
+ * Useful for creating clean CSS class names or identifiers from complex strings
+ *
+ * @param {string} name - The original name to simplify
+ * @returns {string} Simplified name with alphanumeric parts joined by underscores
+ *
+ * @example
+ * simplifyName('my-button--large') // returns 'my_button_large'
+ * simplifyName('header.nav.item') // returns 'header_nav_item'
+ * simplifyName('duplicate-duplicate-word') // returns 'duplicate_word'
+ */
+const simplifyName = (name) => {
+  if (!name || typeof name !== 'string') {
+    return '';
+  }
+
+  // Extract alphanumeric sequences from the string
+  const alphanumericParts = name.match(/[a-zA-Z0-9]+/g) || [];
+
+  // Remove duplicate parts while preserving order
+  const uniqueParts = new Set(alphanumericParts);
+
+  // Join unique parts with underscores
+  return [...uniqueParts].join('_');
+};
+
+module.exports = { simplifyName };

package/src/lib/typingStyles/index.js

@@ -0,0 +1,3 @@
+const { typingStyles } = require('./typingStyles.utils');
+
+module.exports = { typingStyles };