leumas-private-shared/src/SchemaBuilder/SchemaBuilder.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState } from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import mongooseSyntax from './mongooseSyntax.json';
import { Box, Button, Typography, Grid } from '@mui/material';

const initialSchema = `const mongoose = require('mongoose');

const schema = new mongoose.Schema({
  // Add your fields here
});

module.exports = mongoose.model('ModelName', schema);`;

const SchemaBuilder = () => {
  const [schema, setSchema] = useState(initialSchema);

  const addField = (type) => {
    const newField = `\n  fieldName: { type: ${type} },`;
    setSchema((prevSchema) => prevSchema.replace('// Add your fields here', `// Add your fields here${newField}`));
  };

  return (
    <Box sx={{ display: 'flex', height: '100vh' }}>
      <Box
        component="aside"
        sx={{
          width: 300,
          p: 2,
          borderRight: 1,
          borderColor: 'divider',
          overflow: 'auto',
        }}
      >
        <Typography variant="h6" gutterBottom>
          Schema Types
        </Typography>
        <Grid container spacing={1}>
          {mongooseSyntax.types.map((type) => (
            <Grid item xs={6} key={type}>
              <Button variant="contained" onClick={() => addField(type)} fullWidth>
                {type}
              </Button>
            </Grid>
          ))}
        </Grid>
        <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
          Validators
        </Typography>
        <Grid container spacing={1}>
          {mongooseSyntax.validators.map((validator) => (
            <Grid item xs={6} key={validator}>
              <Button variant="contained" fullWidth>
                {validator}
              </Button>
            </Grid>
          ))}
        </Grid>
        <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
          Options
        </Typography>
        <Grid container spacing={1}>
          {mongooseSyntax.options.map((option) => (
            <Grid item xs={6} key={option}>
              <Button variant="contained" fullWidth>
                {option}
              </Button>
            </Grid>
          ))}
        </Grid>
      </Box>
      <Box component="main" sx={{ flex: 1, p: 2 }}>
        <AceEditor
          mode="javascript"
          theme="github"
          onChange={setSchema}
          name="mongoose-schema-editor"
          editorProps={{ $blockScrolling: true }}
          value={schema}
          width="100%"
          height="100%"
        />
      </Box>
    </Box>
  );
};

export default SchemaBuilder;