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

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

import React from 'react';
import { StyleProvider, useStyleVariants, getVariantStyle, createSxWithVariant } from '@nestbotics/nct_frontend_common_components';
import { Typography, Button, TextField, Box, DataGrid } from '@mui/material';

// Quick example demonstrating common StyleProvider usage patterns
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function QuickStartExample() {
  // Using the hook to access style utilities
  var _useStyleVariants = useStyleVariants(),
    variants = _useStyleVariants.variants;

  // Helper function usage
  var customTitleStyle = getVariantStyle('titleL', {
    color: '#1976d2'
  });
  var boxSx = createSxWithVariant('titleM', {
    padding: 2
  });
  return /*#__PURE__*/_jsxs("div", {
    style: {
      padding: '20px'
    },
    children: [/*#__PURE__*/_jsx(Typography, {
      variant: "titleL",
      children: "Main Title (titleL)"
    }), /*#__PURE__*/_jsx(Typography, {
      variant: "titleM",
      children: "Section Title (titleM)"
    }), /*#__PURE__*/_jsx(Typography, {
      variant: "titleS",
      children: "Subsection (titleS)"
    }), /*#__PURE__*/_jsx("h1", {
      className: "titleL",
      children: "HTML H1 with titleL class"
    }), /*#__PURE__*/_jsx("h2", {
      className: "titleM",
      children: "HTML H2 with titleM class"
    }), /*#__PURE__*/_jsx("p", {
      className: "titleS",
      children: "Paragraph with titleS class"
    }), /*#__PURE__*/_jsx("div", {
      className: "title-l",
      children: "Using kebab-case: title-l"
    }), /*#__PURE__*/_jsx("div", {
      className: "title-large",
      children: "Using descriptive: title-large"
    }), /*#__PURE__*/_jsx("input", {
      className: "titleM",
      placeholder: "Input with titleM styling"
    }), /*#__PURE__*/_jsx("textarea", {
      className: "titleS",
      placeholder: "Textarea with titleS"
    }), /*#__PURE__*/_jsxs("div", {
      style: {
        margin: '20px 0',
        display: 'flex',
        gap: '10px'
      },
      children: [/*#__PURE__*/_jsx(Button, {
        variant: "primary",
        children: "Primary Button"
      }), /*#__PURE__*/_jsx(Button, {
        className: "btn-secondary",
        children: "Secondary with class"
      }), /*#__PURE__*/_jsx("button", {
        className: "btn-tertiary",
        children: "HTML Button"
      })]
    }), /*#__PURE__*/_jsx(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__*/_jsx("div", {
      className: "data-grid-titleS",
      style: {
        marginTop: '20px'
      },
      children: /*#__PURE__*/_jsxs("table", {
        style: {
          width: '100%',
          borderCollapse: 'collapse'
        },
        children: [/*#__PURE__*/_jsx("thead", {
          children: /*#__PURE__*/_jsxs("tr", {
            children: [/*#__PURE__*/_jsx("th", {
              children: "Product"
            }), /*#__PURE__*/_jsx("th", {
              children: "Price"
            })]
          })
        }), /*#__PURE__*/_jsxs("tbody", {
          children: [/*#__PURE__*/_jsxs("tr", {
            children: [/*#__PURE__*/_jsx("td", {
              children: "Widget A"
            }), /*#__PURE__*/_jsx("td", {
              children: "$19.99"
            })]
          }), /*#__PURE__*/_jsxs("tr", {
            children: [/*#__PURE__*/_jsx("td", {
              children: "Widget B"
            }), /*#__PURE__*/_jsx("td", {
              children: "$29.99"
            })]
          })]
        })]
      })
    }), /*#__PURE__*/_jsx("div", {
      style: customTitleStyle,
      children: "Custom styled with getVariantStyle()"
    }), /*#__PURE__*/_jsx(Box, {
      sx: boxSx,
      children: "Material-UI Box with createSxWithVariant()"
    })]
  });
}

// Main App with StyleProvider wrapper
function App() {
  return /*#__PURE__*/_jsx(StyleProvider, {
    children: /*#__PURE__*/_jsx(QuickStartExample, {})
  });
}
export default App;