Add LightningCAD Generator

README.md

@@ -100,6 +100,10 @@ bin/rails g
 * [Tailored Select](./lib/generators/rolemodel/tailored_select)
 * [Lograge](./lib/generators/rolemodel/lograge)
 
+### LightningCAD
+
+For LightningCAD apps there are [generators](./lib/generators/lightning_cad) to add the required setup
+
 ## Development
 
 Install the versions of Node and Ruby specified in `.node-version` and `.ruby-version` on your machine. https://asdf-vm.com/ is a great tool for managing language versions. Then run `npm install -g yarn`.

lib/generators/lightning_cad/README.md

@@ -0,0 +1,31 @@
+# LightningCAD Generator
+
+Run all the generators:
+
+```
+rails g lightning_cad:all
+```
+
+Or run them individually
+```
+rails g lightning_cad:install
+rails g lightning_cad:webpack
+rails g lightning_cad:test
+```
+
+## Depends On
+
+- `rolemodel:linters:eslint`
+- `rolemodel:optics:base`
+- `rolemodel:webpack`
+- `rolemodel:react`
+
+## What you get
+
+Pulls in [LightningCAD](https://github.com/RoleModel/lightning-cad) and sets up a demo editor
+
+This will add a route for `/editor` with a blank canvas.
+
+The main entrypoint into the JavaScript code is `/app/javascript/components/App.jsx`. In this file a project is created. You can manually add components like lines or shapes to that project.
+
+After running the generators additional setup is required see [how to setup a LightningCAD app](https://github.com/RoleModel/lightning-cad?tab=readme-ov-file#app-setup) for more details.

lib/generators/lightning_cad/USAGE

@@ -0,0 +1,15 @@
+Description:
+    This generator requires JavaScript setup including webpack, react, and eslint
+
+    Install:
+        Installs required dependencies
+        Generates a demo editor
+
+    Webpack:
+        Modifies the webpack config to work better for LightningCAD apps
+
+    Test:
+        Installs jasmine and adds the test setup required for LightningCAD models
+
+Example:
+    bin/rails generate lightning-cad:all

lib/generators/lightning_cad/all_generator.rb

@@ -0,0 +1,13 @@
+require 'rails'
+
+module LightningCad
+  class AllGenerator < Rails::Generators::Base
+    source_root File.expand_path('./templates', __dir__)
+
+    def run_all_the_generators
+      generate 'lightning_cad:install'
+      generate 'lightning_cad:webpack'
+      generate 'lightning_cad:test'
+    end
+  end
+end

lib/generators/lightning_cad/install_generator.rb

@@ -0,0 +1,81 @@
+require 'rails'
+
+module LightningCad
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('./templates', __dir__)
+
+    def install_yarn_dependencies
+      say 'Adding lightning-cad dependency'
+      copy_file '.npmrc', '.npmrc'
+
+      dependencies = %w[
+        @rolemodel/lightning-cad
+        @rolemodel/lightning-cad-ui
+        mobx-react@^6.1.5
+        mobx-utils@^5.5.2
+        mobx@^5.15.2
+        glob@^10.2.2
+        import-glob@1.5.0
+        react-router-dom@^5.0.1
+        react-popper@^1.3.7
+        classnames@^2.2.5
+      ]
+
+
+      run "yarn add #{dependencies.join(" ")}"
+    end
+
+    def create_basic_app
+      say "Creating React App Component"
+      insert_into_file 'app/javascript/controllers/react_controller.js', "import App from '../components/App.jsx'\n", before: "import HelloReact from '../components/HelloReact.jsx'\n"
+      insert_into_file 'app/javascript/controllers/react_controller.js', "  App,\n", after: "const registeredComponents = {\n"
+      copy_file 'app/javascript/components/MaterialIcon.jsx', 'app/javascript/components/MaterialIcon.jsx'
+      copy_file 'app/javascript/components/LocalIconFactory.jsx', 'app/javascript/components/LocalIconFactory.jsx'
+      copy_file 'app/javascript/components/App.jsx', 'app/javascript/components/App.jsx'
+    end
+
+    def add_stylesheets
+      stylesheets = <<~CSS
+        @import '@rolemodel/lightning-cad-ui/scss/lightning-cad.scss';
+      CSS
+
+      prepend_to_file 'app/assets/stylesheets/application.scss', stylesheets
+    end
+
+    def global_configuration
+      copy_file '.eslintrc.js', '.eslintrc.js'
+    end
+
+    def create_controller
+      say "Creating Rails controller and view"
+      template 'app/views/layouts/editor.html.slim'
+      copy_file 'app/controllers/editor_controller.rb', 'app/controllers/editor_controller.rb'
+      copy_file 'app/views/editor/editor.html.slim', 'app/views/editor/editor.html.slim'
+      route "get '/editor/*all', to: 'editor#editor'"
+      route "get :editor, to: 'editor#editor'"
+    end
+
+    def add_javascript_initializers
+      say "Adding JavaScript initializers"
+      initializer_setup = <<~JS
+        import './config/initializers/**/*.js'
+      JS
+      append_to_file 'app/javascript/application.js', initializer_setup
+      copy_file 'app/javascript/config/initializers/smartJSON.js', 'app/javascript/config/initializers/smartJSON.js'
+      copy_file 'app/javascript/helpers/hooks.js', 'app/javascript/helpers/hooks.js'
+      copy_file 'app/javascript/helpers/register_hooks.js', 'app/javascript/helpers/register_hooks.js'
+      # To prevent smartJSON from throwing an error
+      run 'mkdir app/javascript/shared'
+      run 'mkdir app/javascript/shared/domain-models'
+      run 'touch app/javascript/shared/domain-models/.keep'
+    end
+
+    def setup_chrome_cad
+      chrome_cad_setup = <<~JS
+        import { ChromeCADEventEmitter } from '@rolemodel/lightning-cad/drawing-editor'
+        window.__LCAD_CHROME_CAD_EVENT_EMITTER = new ChromeCADEventEmitter()
+      JS
+      append_to_file 'app/javascript/application.js', chrome_cad_setup
+    end
+  end
+end

lib/generators/lightning_cad/templates/.eslintrc.js

@@ -0,0 +1,123 @@
+export default {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  plugins: ["react"],
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parser: "babel-eslint",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2017,
+  },
+  rules: {
+    "accessor-pairs": "warn",
+    "arrow-body-style": "warn",
+    "arrow-parens": ["warn", "as-needed"],
+    "arrow-spacing": "warn",
+    "comma-dangle": ["warn", "only-multiline"],
+    "comma-style": ["warn", "last"],
+    "computed-property-spacing": ["warn", "never"],
+    "consistent-this": "warn",
+    curly: ["warn", "multi-line"],
+    "default-case": "warn",
+    "dot-location": ["warn", "property"],
+    eqeqeq: "warn",
+    "generator-star-spacing": "warn",
+    "id-blacklist": "warn",
+    "id-match": "warn",
+    "jsx-quotes": "warn",
+    "linebreak-style": ["warn", "unix"],
+    "max-nested-callbacks": "warn",
+    "no-array-constructor": "warn",
+    "no-caller": "warn",
+    "no-catch-shadow": "warn",
+    "no-console": "off",
+    "no-continue": "warn",
+    "no-div-regex": "warn",
+    "no-duplicate-imports": "warn",
+    "no-extra-label": "warn",
+    "no-extra-semi": "warn",
+    "no-floating-decimal": "warn",
+    "no-implicit-coercion": [
+      "warn",
+      {
+        boolean: false,
+        number: false,
+        string: false,
+      },
+    ],
+    "no-implied-eval": "warn",
+    "no-inner-declarations": ["warn", "functions"],
+    "no-invalid-this": "warn",
+    "no-iterator": "warn",
+    "no-label-var": "warn",
+    "no-labels": "warn",
+    "no-lone-blocks": "warn",
+    "no-mixed-requires": "warn",
+    "no-mixed-spaces-and-tabs": "warn",
+    "no-multi-str": "warn",
+    "no-new": "warn",
+    "no-new-func": "warn",
+    "no-new-object": "warn",
+    "no-new-require": "warn",
+    "no-new-wrappers": "warn",
+    "no-octal-escape": "warn",
+    "no-process-exit": "warn",
+    "no-proto": "warn",
+    "no-redeclare": "warn",
+    "no-restricted-globals": "warn",
+    "no-restricted-imports": "warn",
+    "no-restricted-modules": "warn",
+    "no-restricted-syntax": "warn",
+    "no-script-url": "warn",
+    "no-self-compare": "warn",
+    "no-shadow-restricted-names": "warn",
+    "no-spaced-func": "warn",
+    "no-undef": "warn",
+    "no-undef-init": "warn",
+    "no-unexpected-multiline": "warn",
+    "no-unmodified-loop-condition": "warn",
+    "no-unneeded-ternary": [
+      "warn",
+      {
+        defaultAssignment: true,
+      },
+    ],
+    "no-unreachable": "warn",
+    "no-unused-vars": [
+      "warn",
+      {
+        argsIgnorePattern: "^_", // Allow unused arguments starting with an underscore
+        varsIgnorePattern: "^_", // Allow unused variables starting with an underscore
+      },
+    ],
+    "no-useless-call": "warn",
+    "no-useless-concat": "warn",
+    "no-useless-constructor": "warn",
+    "no-useless-escape": "warn",
+    "no-var": "warn",
+    "no-void": "warn",
+    "no-whitespace-before-property": "warn",
+    "no-with": "warn",
+    "prefer-arrow-callback": "warn",
+    "prefer-const": "warn",
+    "prefer-template": "warn",
+    "require-yield": "warn",
+    semi: ["warn", "never"],
+    "sort-imports": "warn",
+    "template-curly-spacing": "warn",
+    "wrap-regex": "warn",
+    "yield-star-spacing": "warn",
+    yoda: ["warn", "never"],
+  },
+  settings: {
+    react: {
+      version: "16.6.0",
+    },
+  },
+};

lib/generators/lightning_cad/templates/.npmrc

@@ -0,0 +1,2 @@
+@rolemodel:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

lib/generators/lightning_cad/templates/app/controllers/editor_controller.rb

@@ -0,0 +1,5 @@
+class EditorController < ApplicationController
+  def editor
+    render layout: 'editor'
+  end
+end

lib/generators/lightning_cad/templates/app/javascript/components/App.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { createBrowserHistory } from 'history'
+import PropTypes from 'prop-types'
+
+import {
+  Icon,
+  IconFactoryContext,
+  MultiPerspectiveProjectEditorView,
+} from '@rolemodel/lightning-cad-ui'
+import { Router } from 'react-router-dom'
+import LocalIconFactory from './LocalIconFactory.jsx'
+
+import {
+  DrawingEditor,
+  VersionedProject,
+  Project
+} from '@rolemodel/lightning-cad/drawing-editor'
+
+export default class App extends React.Component {
+  static propTypes = {
+    basePath: PropTypes.string,
+    backPath: PropTypes.string
+  }
+
+  static defaultProps = {
+    basePath: '/',
+    backPath: '/'
+  }
+
+  constructor(props) {
+    super(props)
+    this._modalRoot = document.getElementById('modal_root') || document.createElement('div')
+
+    this._project = new VersionedProject(new Project())
+
+    const top = new DrawingEditor(this._project)
+    top.toolPalette()
+    this._drawingEditors = { top }
+  }
+
+  modalRoot() { return this._modalRoot }
+
+  history() {
+    if (!this._history) {
+      this._history = createBrowserHistory({ basename: this.props.basePath })
+    }
+    return this._history
+  }
+
+  iconFactory() {
+    return this._iconFactory ??= new LocalIconFactory()
+  }
+
+  render() {
+    return (
+      <IconFactoryContext.Provider value={this.iconFactory()}>
+        <Router history={this.history()}>
+          <MultiPerspectiveProjectEditorView
+            drawingEditors={this._drawingEditors}
+            versionedProject={this._project}
+            perspectiveOptions={{
+              top: {
+                actionBarOptions: {
+                  includePerspectiveIcons: false,
+                  renderBackLink: (_drawingEditor) => (
+                    <a
+                      href={this.props.backPath}
+                      title='Back'
+                      className='action-bar__back margin-right-md'
+                    >
+                      <Icon
+                        name='KeyboardArrowLeft'
+                        className='action-bar__icon'
+                      />
+                      Back
+                    </a>
+                  ),
+                },
+              },
+            }}
+          />
+        </Router>
+      </IconFactoryContext.Provider>
+    )
+  }
+}