@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
128 lines (125 loc) • 5.76 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["variant", "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';
import { Typography, dataGridStyles } from './StyleProvider';
import { Box } from '@mui/material';
/**
* 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
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var StyledText = function StyledText(_ref) {
var variant = _ref.variant,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/_jsx(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
*/
export var 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 = dataGridStyles[type] || dataGridStyles.base;
return _objectSpread(_objectSpread({}, styleType), additionalStyles);
};
/**
* Example usage component showing how to use StyledText and DataGridStyled
*/
export var StyleExamples = function StyleExamples() {
return /*#__PURE__*/_jsxs(Box, {
sx: {
p: 3
},
children: [/*#__PURE__*/_jsx(StyledText, {
variant: "titleL",
component: "h1",
children: "Title Large (24px, Bold)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "titleM",
component: "h2",
children: "Title Medium (20px, Semi-Bold)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "titleS",
component: "h3",
children: "Title Small (18px, Semi-Bold)"
}), /*#__PURE__*/_jsxs(Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/_jsx(StyledText, {
variant: "bodyL",
children: "Body Large - Regular text for paragraphs and descriptions (16px)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "bodyM",
children: "Body Medium - Default text size for most content (15px)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "bodyS",
children: "Body Small - Smaller text for secondary information (14px)"
})]
}), /*#__PURE__*/_jsxs(Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/_jsx(StyledText, {
variant: "labelL",
children: "Label Large (16px, Medium weight)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "labelM",
children: "Label Medium (15px, Medium weight)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "labelS",
children: "Label Small (14px, Medium weight)"
})]
}), /*#__PURE__*/_jsxs(Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/_jsx(StyledText, {
variant: "emphasisL",
children: "Emphasis Large (16px, Semi-Bold)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "emphasisM",
children: "Emphasis Medium (15px, Semi-Bold)"
}), /*#__PURE__*/_jsx(StyledText, {
variant: "emphasisS",
children: "Emphasis Small (14px, Semi-Bold)"
})]
}), /*#__PURE__*/_jsxs(Box, {
sx: {
mt: 3
},
children: [/*#__PURE__*/_jsx(StyledText, {
variant: "titleM",
component: "h2",
children: "How to use DataGridStyled"
}), /*#__PURE__*/_jsxs(StyledText, {
variant: "bodyM",
children: ["To use DataGridStyled in your DataGrid component:", /*#__PURE__*/_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 "
})]
})]
})]
});
};
export default {
StyledText: StyledText,
DataGridStyled: DataGridStyled,
StyleExamples: StyleExamples
};