@nestbotics/nct_frontend_common_components/dist/utils/cssGenerator.esm.js

A collection of reusable React components with theme management and styling utilities

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * Utility functions for converting JavaScript style objects to CSS strings
 * This allows the styles to be used in plain CSS files or style tags
 */

/**
 * Converts a JavaScript style object to a CSS string
 * @param {Object} styleObject - The style object to convert
 * @param {string} selector - The CSS selector to use
 * @returns {string} - The CSS string
 */
export var styleObjectToCss = function styleObjectToCss(styleObject, selector) {
  if (!styleObject || _typeof(styleObject) !== 'object') {
    return '';
  }

  // Convert camelCase to kebab-case
  var convertCamelToKebab = function convertCamelToKebab(str) {
    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
  };

  // Process a value, handling functions if needed
  var processValue = function processValue(value) {
    // If the value is a function (e.g., for theme-dependent values), 
    // return a generic value. In a real implementation, you'd need to pass the theme
    if (typeof value === 'function') {
      return '#e0e0e0'; // Default fallback for function values
    }
    return value;
  };

  // Build CSS rules recursively
  var _buildCssRules = function buildCssRules(obj) {
    var parentSelector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
    var css = '';

    // Process regular style properties
    var mainProperties = Object.entries(obj).filter(function (_ref) {
      var _ref2 = _slicedToArray(_ref, 2),
        key = _ref2[0],
        value = _ref2[1];
      return !key.startsWith('&') && !key.startsWith('@') && !key.startsWith('.') && _typeof(value) !== 'object';
    }).map(function (_ref3) {
      var _ref4 = _slicedToArray(_ref3, 2),
        key = _ref4[0],
        value = _ref4[1];
      return "  ".concat(convertCamelToKebab(key), ": ").concat(processValue(value), ";");
    }).join('\n');
    if (mainProperties) {
      css += "".concat(parentSelector || selector, " {\n").concat(mainProperties, "\n}\n\n");
    }

    // Process nested selectors (starting with &, ., or @)
    Object.entries(obj).forEach(function (_ref5) {
      var _ref6 = _slicedToArray(_ref5, 2),
        key = _ref6[0],
        value = _ref6[1];
      if (_typeof(value) === 'object') {
        if (key.startsWith('&')) {
          // Handle parent selectors
          var nestedSelector = "".concat(parentSelector || selector).concat(key.substring(1));
          css += _buildCssRules(value, nestedSelector);
        } else if (key.startsWith('.') || key.startsWith('#')) {
          // Handle class or id selectors
          var _nestedSelector = parentSelector ? "".concat(parentSelector, " ").concat(key) : "".concat(selector, " ").concat(key);
          css += _buildCssRules(value, _nestedSelector);
        } else if (key.startsWith('@media')) {
          // Handle media queries
          css += "".concat(key, " {\n");
          css += _buildCssRules(value, parentSelector || selector);
          css += '}\n\n';
        } else if (!key.startsWith('&') && !key.startsWith('@') && !key.startsWith('.')) {
          // Handle nested objects that aren't selectors (e.g., transition, animation)
          var nestedProperties = Object.entries(value).map(function (_ref7) {
            var _ref8 = _slicedToArray(_ref7, 2),
              nestedKey = _ref8[0],
              nestedValue = _ref8[1];
            return "  ".concat(convertCamelToKebab(key), "-").concat(convertCamelToKebab(nestedKey), ": ").concat(processValue(nestedValue), ";");
          }).join('\n');
          if (nestedProperties) {
            css += "".concat(parentSelector || selector, " {\n").concat(nestedProperties, "\n}\n\n");
          }
        }
      }
    });
    return css;
  };
  return _buildCssRules(styleObject);
};

/**
 * Generates CSS for typography styles
 * @param {Object} typographyStyles - The typography style definitions
 * @returns {string} - The CSS string
 */
export var generateTypographyCss = function generateTypographyCss(typographyStyles) {
  var css = '';

  // Generate a CSS class for each typography variant
  Object.entries(typographyStyles).forEach(function (_ref9) {
    var _ref0 = _slicedToArray(_ref9, 2),
      variant = _ref0[0],
      styles = _ref0[1];
    if (variant !== 'base') {
      var combinedStyles = _objectSpread(_objectSpread({}, typographyStyles.base), styles);
      css += styleObjectToCss(combinedStyles, ".typography-".concat(variant));
    }
  });
  return css;
};

/**
 * Generates CSS for data grid styles
 * @param {Object} dataGridStyles - The data grid style definitions
 * @returns {string} - The CSS string
 */
export var generateDataGridCss = function generateDataGridCss(dataGridStyles) {
  var css = '';

  // Generate base table styles
  css += styleObjectToCss(dataGridStyles.base, '.data-grid');

  // Generate scrollable table styles
  css += styleObjectToCss(dataGridStyles.scrollable, '.data-grid-scrollable');

  // Generate responsive table styles
  css += styleObjectToCss(dataGridStyles.responsive, '.data-grid-responsive');
  return css;
};

/**
 * Creates a style tag with the given CSS and appends it to the document head
 * @param {string} css - The CSS to insert
 * @param {string} id - Optional id for the style tag
 */
export var insertCssToDocument = function insertCssToDocument(css, id) {
  if (typeof document !== 'undefined') {
    var styleTag = document.createElement('style');
    if (id) {
      styleTag.id = id;
    }
    styleTag.textContent = css;
    document.head.appendChild(styleTag);
    return styleTag;
  }
  return null;
};

/**
 * Applies all styles (typography and data grid) to the document
 * @param {Object} typographyStyles - The typography style definitions
 * @param {Object} dataGridStyles - The data grid style definitions
 */
export var applyAllStyles = function applyAllStyles(typographyStyles, dataGridStyles) {
  var typographyCss = generateTypographyCss(typographyStyles);
  var dataGridCss = generateDataGridCss(dataGridStyles);
  insertCssToDocument(typographyCss, 'common-typography-styles');
  insertCssToDocument(dataGridCss, 'common-datagrid-styles');
};