@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
171 lines (156 loc) • 7.61 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styleObjectToCss = exports.insertCssToDocument = exports.generateTypographyCss = exports.generateDataGridCss = exports.applyAllStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/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) { (0, _defineProperty2.default)(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
*/
var styleObjectToCss = exports.styleObjectToCss = function styleObjectToCss(styleObject, selector) {
if (!styleObject || (0, _typeof2.default)(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 = (0, _slicedToArray2.default)(_ref, 2),
key = _ref2[0],
value = _ref2[1];
return !key.startsWith('&') && !key.startsWith('@') && !key.startsWith('.') && (0, _typeof2.default)(value) !== 'object';
}).map(function (_ref3) {
var _ref4 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_ref5, 2),
key = _ref6[0],
value = _ref6[1];
if ((0, _typeof2.default)(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 = (0, _slicedToArray2.default)(_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
*/
var generateTypographyCss = exports.generateTypographyCss = function generateTypographyCss(typographyStyles) {
var css = '';
// Generate a CSS class for each typography variant
Object.entries(typographyStyles).forEach(function (_ref9) {
var _ref0 = (0, _slicedToArray2.default)(_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
*/
var generateDataGridCss = exports.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
*/
var insertCssToDocument = exports.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
*/
var applyAllStyles = exports.applyAllStyles = function applyAllStyles(typographyStyles, dataGridStyles) {
var typographyCss = generateTypographyCss(typographyStyles);
var dataGridCss = generateDataGridCss(dataGridStyles);
insertCssToDocument(typographyCss, 'common-typography-styles');
insertCssToDocument(dataGridCss, 'common-datagrid-styles');
};