@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
308 lines (301 loc) • 9.37 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _excluded = ["variant", "component", "style", "children"];
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; }
import React from 'react';
/**
* Typography styles that can be used with any component or HTML element
* These can be applied to any component using the className approach or
* directly as inline styles
*/
import { jsx as _jsx } from "react/jsx-runtime";
export var typographyStyles = {
// Default base styles
base: {
fontFamily: '"Source Sans Pro", sans-serif'
},
// Define typography variant - only titleM
titleM: {
fontSize: '16px',
fontWeight: 600,
lineHeight: '1.3',
letterSpacing: '0.25px'
},
// Body text variants
bodyL: {
fontSize: '1rem',
// 16px
fontWeight: 400,
lineHeight: 1.5
},
bodyM: {
fontSize: '0.9375rem',
// 15px
fontWeight: 400,
lineHeight: 1.5
},
bodyS: {
fontSize: '0.875rem',
// 14px
fontWeight: 400,
lineHeight: 1.5
},
// Label variants for inputs, buttons, etc.
labelL: {
fontSize: '1rem',
// 16px
fontWeight: 500,
lineHeight: 1.4
},
labelM: {
fontSize: '0.9375rem',
// 15px
fontWeight: 500,
lineHeight: 1.4
},
labelS: {
fontSize: '0.875rem',
// 14px
fontWeight: 500,
lineHeight: 1.4
},
// For emphasized text
emphasisL: {
fontSize: '1rem',
// 16px
fontWeight: 600,
lineHeight: 1.5
},
emphasisM: {
fontSize: '0.9375rem',
// 15px
fontWeight: 600,
lineHeight: 1.5
},
emphasisS: {
fontSize: '0.875rem',
// 14px
fontWeight: 600,
lineHeight: 1.5
}
};
/**
* CSS classes for typography that can be used with className
* This provides a way to use the styles with regular HTML elements or any framework
*/
export var createTypographyClasses = function createTypographyClasses() {
var cssClasses = {};
Object.keys(typographyStyles).forEach(function (variant) {
if (variant !== 'base') {
var style = typographyStyles[variant];
cssClasses[variant] = _objectSpread(_objectSpread({}, typographyStyles.base), style);
}
});
return cssClasses;
};
/**
* Helper function to apply typography styles to any element
* @param {string} variant - The typography variant to apply (e.g., 'titleL')
* @param {Object} customStyles - Additional custom styles to apply
* @returns {Object} - The combined styles
*/
export var getTypographyStyle = function getTypographyStyle(variant) {
var customStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles.base), typographyStyles[variant] || {}), customStyles);
};
/**
* Typography component that can be used with any HTML element
* @param {Object} props - Component props
* @param {string} props.variant - Typography variant (e.g., 'titleL')
* @param {string} props.component - HTML tag to use (e.g., 'h1', 'p')
* @param {Object} props.style - Additional inline styles
*/
export var Typography = function Typography(_ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'bodyM' : _ref$variant,
_ref$component = _ref.component,
Component = _ref$component === void 0 ? 'p' : _ref$component,
_ref$style = _ref.style,
style = _ref$style === void 0 ? {} : _ref$style,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded);
var combinedStyles = _objectSpread(_objectSpread(_objectSpread({}, typographyStyles.base), typographyStyles[variant] || {}), style);
return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
style: combinedStyles
}, rest), {}, {
children: children
}));
};
/**
* Predefined DataGrid styles for consistent table appearance
* These styles are designed to work with MUI DataGrid but can be adapted for other table components
*/
export var dataGridStyles = {
base: {
width: "100%",
fontSize: "15px",
fontWeight: "500",
".data-grid-header": {
fontSize: "1.19rem",
fontWeight: "bold",
minHeight: "70px"
},
".data-grid-header-cell": {
fontSize: "1.19rem",
fontWeight: "bold",
height: "95px"
},
".data-grid-cell": {
fontSize: "1.16rem",
fontWeight: "500"
},
".data-grid-pagination": {
fontSize: "1.18rem"
},
".data-grid-pagination-label": {
fontSize: "1.06rem"
},
// MUI specific styles for compatibility
"& .MuiDataGrid-columnHeaders": {
fontSize: "1.19rem",
fontWeight: "bold",
minHeight: "70px !important"
},
"& .MuiDataGrid-columnHeader": {
fontSize: "1.19rem",
fontWeight: "bold",
height: "95px !important"
},
"& .MuiDataGrid-iconButtonContainer": {
visibility: "hidden !important",
display: "none !important"
},
"& .header-bold": {
fontWeight: "bold"
},
"& .MuiDataGrid-columnHeaderTitle": {
fontWeight: "bold",
paddingTop: "10px"
},
"& .MuiDataGrid-columnHeaderTitleContainer": {
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-start",
height: "100%"
},
"& .MuiDataGrid-cell": {
fontSize: "1.16rem",
fontWeight: "500"
},
"& .MuiTablePagination-root": {
fontSize: "1.18rem"
},
"& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
fontSize: "1.06rem"
}
},
scrollable: {
maxHeight: "calc(100vh - 266px)",
overflow: "auto",
".data-grid-cell": {
fontSize: "1rem",
borderRight: "1px solid #e0e0e0"
},
".data-grid-header": {
fontSize: "1rem",
borderRight: "1px solid #e0e0e0"
},
// MUI specific styles
"& .MuiDataGrid-cell": {
fontSize: "1rem",
borderRight: "1px solid #e0e0e0"
},
"& .MuiDataGrid-columnHeader": {
fontSize: "1rem",
borderRight: "1px solid #e0e0e0"
},
"& .MuiDataGrid-footer": {
fontSize: "1rem"
}
},
responsive: {
width: "100%",
// Generic responsive styles
".data-grid-header": {
"@media (max-width: 600px)": {
fontSize: "0.9rem"
},
"@media (min-width: 601px) and (max-width: 960px)": {
fontSize: "1rem"
},
"@media (min-width: 961px)": {
fontSize: "1.19rem"
}
},
".data-grid-cell": {
"@media (max-width: 600px)": {
fontSize: "0.85rem"
},
"@media (min-width: 601px) and (max-width: 960px)": {
fontSize: "0.95rem"
},
"@media (min-width: 961px)": {
fontSize: "1.16rem"
}
},
// MUI specific responsive styles
"& .MuiDataGrid-columnHeader": {
"@media (max-width: 600px)": {
fontSize: "0.9rem"
},
"@media (min-width: 601px) and (max-width: 960px)": {
fontSize: "1rem"
},
"@media (min-width: 961px)": {
fontSize: "1.19rem"
}
},
"& .MuiDataGrid-cell": {
"@media (max-width: 600px)": {
fontSize: "0.85rem"
},
"@media (min-width: 601px) and (max-width: 960px)": {
fontSize: "0.95rem"
},
"@media (min-width: 961px)": {
fontSize: "1.16rem"
}
}
}
};
/**
* Helper function to generate CSS classes for table/grid styles
* This makes it possible to use these styles with any table component or framework
*/
export var createTableClasses = function createTableClasses() {
// Implementation would generate CSS classes from dataGridStyles
// This is a simplified example - a real implementation would convert the nested objects to proper CSS class strings
return {
'table-base': dataGridStyles.base,
'table-scrollable': dataGridStyles.scrollable,
'table-responsive': dataGridStyles.responsive
};
};
/**
* Helper function to combine data grid styles
* @param {Array} styleTypes - Array of style types to combine ('base', 'scrollable', 'responsive')
* @param {Object} customStyles - Additional custom styles
* @returns {Object} - Combined styles object
*/
export var getDataGridStyles = function getDataGridStyles() {
var styleTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['base'];
var customStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var combinedStyles = {};
styleTypes.forEach(function (type) {
if (dataGridStyles[type]) {
Object.assign(combinedStyles, dataGridStyles[type]);
}
});
return _objectSpread(_objectSpread({}, combinedStyles), customStyles);
};