@nestbotics/nct_frontend_common_components/dist/examples/QuickStartExample.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _nct_frontend_common_components = require("@nestbotics/nct_frontend_common_components");
var _material = require("@mui/material");
var _jsxRuntime = require("react/jsx-runtime");
// Quick example demonstrating common StyleProvider usage patterns
function QuickStartExample() {
  // Using the hook to access style utilities
  var _useStyleVariants = (0, _nct_frontend_common_components.useStyleVariants)(),
    variants = _useStyleVariants.variants;

  // Helper function usage
  var customTitleStyle = (0, _nct_frontend_common_components.getVariantStyle)('titleL', {
    color: '#1976d2'
  });
  var boxSx = (0, _nct_frontend_common_components.createSxWithVariant)('titleM', {
    padding: 2
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      padding: '20px'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
      variant: "titleL",
      children: "Main Title (titleL)"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
      variant: "titleM",
      children: "Section Title (titleM)"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
      variant: "titleS",
      children: "Subsection (titleS)"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
      className: "titleL",
      children: "HTML H1 with titleL class"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
      className: "titleM",
      children: "HTML H2 with titleM class"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      className: "titleS",
      children: "Paragraph with titleS class"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "title-l",
      children: "Using kebab-case: title-l"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "title-large",
      children: "Using descriptive: title-large"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      className: "titleM",
      placeholder: "Input with titleM styling"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
      className: "titleS",
      placeholder: "Textarea with titleS"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        margin: '20px 0',
        display: 'flex',
        gap: '10px'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
        variant: "primary",
        children: "Primary Button"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
        className: "btn-secondary",
        children: "Secondary with class"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        className: "btn-tertiary",
        children: "HTML Button"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DataGrid, {
      className: "titleM",
      rows: [{
        id: 1,
        name: 'John',
        email: 'john@example.com'
      }, {
        id: 2,
        name: 'Jane',
        email: 'jane@example.com'
      }],
      columns: [{
        field: 'id',
        headerName: 'ID',
        width: 90
      }, {
        field: 'name',
        headerName: 'Name',
        width: 150
      }, {
        field: 'email',
        headerName: 'Email',
        width: 200
      }],
      autoHeight: true
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "data-grid-titleS",
      style: {
        marginTop: '20px'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
        style: {
          width: '100%',
          borderCollapse: 'collapse'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
              children: "Product"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
              children: "Price"
            })]
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
              children: "Widget A"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
              children: "$19.99"
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
              children: "Widget B"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
              children: "$29.99"
            })]
          })]
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: customTitleStyle,
      children: "Custom styled with getVariantStyle()"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
      sx: boxSx,
      children: "Material-UI Box with createSxWithVariant()"
    })]
  });
}

// Main App with StyleProvider wrapper
function App() {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_nct_frontend_common_components.StyleProvider, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(QuickStartExample, {})
  });
}
var _default = exports.default = App;