@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
134 lines (131 loc) • 6.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StyledText = exports.StyleExamples = exports.DataGridStyled = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _StyleProvider = require("./StyleProvider");
var _material = require("@mui/material");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["variant", "children"];
/**
* StyledText - A wrapper component for Typography providing standardized text styles
*
* @param {object} props - Component props
* @param {'titleL'|'titleM'|'titleS'|'bodyL'|'bodyM'|'bodyS'|'labelL'|'labelM'|'labelS'|'emphasisL'|'emphasisM'|'emphasisS'} props.variant - Typography variant
* @param {string} props.component - HTML tag to render (h1, h2, p, span, etc.)
* @param {string} props.color - Text color
* @param {object} props.sx - Additional MUI SX styles
*/
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; }
var StyledText = exports.StyledText = function StyledText(_ref) {
var variant = _ref.variant,
children = _ref.children,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, _objectSpread(_objectSpread({
variant: variant
}, props), {}, {
children: children
}));
};
/**
* DataGridStyled - A component providing pre-styled DataGrid configurations
*
* @param {'base'|'scrollable'|'responsive'} type - The type of DataGrid style to use
* @param {object} additionalStyles - Additional styles to merge with the base style
* @returns {object} The complete style object for DataGrid
*/
var DataGridStyled = exports.DataGridStyled = function DataGridStyled() {
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'base';
var additionalStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var styleType = _StyleProvider.dataGridStyles[type] || _StyleProvider.dataGridStyles.base;
return _objectSpread(_objectSpread({}, styleType), additionalStyles);
};
/**
* Example usage component showing how to use StyledText and DataGridStyled
*/
var StyleExamples = exports.StyleExamples = function StyleExamples() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
p: 3
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "titleL",
component: "h1",
children: "Title Large (24px, Bold)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "titleM",
component: "h2",
children: "Title Medium (20px, Semi-Bold)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "titleS",
component: "h3",
children: "Title Small (18px, Semi-Bold)"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "bodyL",
children: "Body Large - Regular text for paragraphs and descriptions (16px)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "bodyM",
children: "Body Medium - Default text size for most content (15px)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "bodyS",
children: "Body Small - Smaller text for secondary information (14px)"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "labelL",
children: "Label Large (16px, Medium weight)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "labelM",
children: "Label Medium (15px, Medium weight)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "labelS",
children: "Label Small (14px, Medium weight)"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "emphasisL",
children: "Emphasis Large (16px, Semi-Bold)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "emphasisM",
children: "Emphasis Medium (15px, Semi-Bold)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "emphasisS",
children: "Emphasis Small (14px, Semi-Bold)"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
variant: "titleM",
component: "h2",
children: "How to use DataGridStyled"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledText, {
variant: "bodyM",
children: ["To use DataGridStyled in your DataGrid component:", /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
children: "\nimport { DataGrid } from '@mui/x-data-grid';\nimport { DataGridStyled } from './path/to/StyledComponents';\n\n// In your component:\n<DataGrid\n rows={rows}\n columns={columns}\n sx={DataGridStyled('base')}\n/>\n\n// Or with scrollable style:\n<DataGrid\n rows={rows}\n columns={columns}\n sx={DataGridStyled('scrollable')}\n/>\n\n// With additional custom styles:\n<DataGrid\n rows={rows}\n columns={columns}\n sx={DataGridStyled('responsive', { \n height: '500px',\n '& .custom-row': { backgroundColor: 'lightblue' } \n })}\n/>\n "
})]
})]
})]
});
};
var _default = exports.default = {
StyledText: StyledText,
DataGridStyled: DataGridStyled,
StyleExamples: StyleExamples
};