EDSC-4327: Updates node, sass, bootstrap, and improves demo page. (#127)

* EDSC-4327: Updates node, sass, bootstrap, and improves demo page.

* EDSC-4327: Adding newlines

* EDSC-4327: Removing commented code

* EDSC-4327: Fixing issue with importing jsx files in cypress

* EDSC-4327: Add pull request template

* EDSC-4327: Running npm install

* EDSC-4327: Tweaking fallbacks

* EDSC-4327: Removing buffer

* EDSC-4327: Fixing issue with @use and separating css to its own file

* EDSC-4327: Fixing cypress env

* EDSC-4327: Update README.md

Co-authored-by: Ryan Abbott <[email protected]>

---------

Co-authored-by: Ryan Abbott <[email protected]>

.eslintrc

@@ -18,6 +18,7 @@
     }
   ],
 
+  // Use AirBnb settings as a base
   "extends": [
     "@edsc"
   ],

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+Before contributing to this project, please review [Contribution.md](https://github.com/nasa/edsc-echoforms/blob/master/CONTRIBUTING.md).
+
+### Description
+A clear and concise description of what the bug is.
+
+**Reproduction Steps**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**System Information (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+### Additional context
+Add any other context about the problem here.
+
+### Acceptance Criteria
+Steps to produce expected behavior.

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,18 @@
+---
+name: Custom issue template
+about: Template for general tasks and improvements
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+Please review [Contribution.md](https://github.com/nasa/edsc-echoforms/blob/master/CONTRIBUTING.md) before contributing to this project.
+
+### Description
+Describe the purpose of the issue
+
+### Files
+Attach any relevant images or files
+
+### Acceptance Criteria

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

@@ -0,0 +1,34 @@
+# Overview
+
+### What is the feature?
+
+Please summarize the feature or fix.
+
+### What is the Solution?
+
+Summarize what you changed.
+
+### What areas of the application does this impact?
+
+List impacted areas.
+
+# Testing
+
+### Reproduction steps
+
+1. Step 1
+2. Step 2...
+
+### Attachments
+
+Please include relevant screenshots or files that would be helpful in reviewing and verifying this change.
+
+# Checklist
+
+- [ ] I have added automated tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have bumped the version field in package.json and ran npm install

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
         matrix:
-          node-version: ['lts/hydrogen']
+          node-version: ['lts/jod']
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -40,7 +40,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['lts/hydrogen']
+        node-version: ['lts/iron', 'lts/jod']
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -69,9 +69,15 @@ jobs:
       uses: codecov/codecov-action@v4
       env:
         CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+  tests-passed:
+    needs: [tests]
+    runs-on: ubuntu-latest
+    steps:
+    - name: All Tests Have Passed
+      run: 'echo true'
   deploy:
     if: success() && github.ref == 'refs/heads/main' # only run on main success
-    needs: [tests] # only run after jest and cypress jobs complete
+    needs: [tests-passed] # only run after all test jobs complete
     runs-on: ubuntu-latest
     steps:
     - name: Checkout code
@@ -91,7 +97,7 @@ jobs:
         git push ecc $GITHUB_SHA:refs/heads/main
   deploy-gh-pages:
     if: success() && github.ref == 'refs/heads/main' # only run on main success
-    needs: [tests] # only run after jest and cypress jobs complete
+    needs: [tests-passed] # only run after all test jobs complete
     runs-on: ubuntu-latest
     steps:
     - name: Checkout code

.npmignore

@@ -1,19 +1,23 @@
+.codecov.yml
 .eslintignore
 .eslintrc
+.github
+.github/workflows/ci.yml
 .nvmrc
 .nyc_output
+.snyk
 .travis
 .travis.yml
 babel.config.js
 bin
 coverage
 cypress
+cypress.config.js
 cypress.json
+cypress.webpack.config.js
+edsc-*
 example
 source.tgz
 src
 tmp
 webpack.config.js
-.codecov.yml
-.github/workflows/ci.yml
-.snyk

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+lts/jod

README.md

@@ -18,11 +18,23 @@ For the jQuery version of this plugin see [this branch](https://github.com/nasa/
 
 ## Installation
 
-    npm install @edsc/echoforms
+```console
+npm install @edsc/echoforms
+```
 
 ## Usage
 
-After installing you can use the component in your code.
+### Import the required css
+
+The  `styles.css` file must be loaded separately from the `node_modules/@edsc-echoforms/dist` directory.
+
+```javascript
+import '@edsc/echoforms/dist/styles.css'
+```
+
+### Use the EDSCEchoform component
+
+The `EDSCEchoforms` React component is imported from the `@edsc/echoforms` module. When using the component, the `form`, `onFormModelUpdated`, and `onFormIsValidUpdated` props are required. See the Props section below for more information.
 
 ```javascript
 import EDSCEchoform from '@edsc/echoforms'
@@ -53,15 +65,21 @@ onFormIsValidUpdated | Function | true | | Callback function that returns a Bool
 
 To compile:
 
-    npm install
+```console
+npm install
+```
 
 To start the example project for local testing:
 
-    npm start
+```console
+npm start
+```
 
 To run the tests:
 
-    npm test
+```console
+npm test
+```
 
 ## Contributing
 

babel.config.js

@@ -3,23 +3,22 @@ module.exports = {
     [
       '@babel/preset-env', {
         targets: {
-          node: '8.10',
-          esmodules: true,
-          ie: '10'
+          node: '22',
+          esmodules: true
         }
       }
     ],
     '@babel/preset-react'
   ],
+  env: {
+    test: {
+      plugins: ['istanbul']
+    }
+  },
   sourceType: 'unambiguous',
   plugins: [
     '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-transform-runtime'
-  ],
-  env: {
-    test: {
-      plugins: ['istanbul']
-    }
-  }
+  ]
 }

cypress.webpack.config.js

@@ -21,12 +21,14 @@ module.exports = {
         use: [
           'style-loader',
           'css-loader',
-          'sass-loader',
           {
-            loader: 'sass-resources-loader',
+            loader: 'sass-loader',
             options: {
-              // eslint-disable-next-line import/no-dynamic-require, global-require
-              resources: require(path.join(process.cwd(), '/src/css/globalUtils.js'))
+              sassOptions: {
+                // Bootstrap is currently working on a version that does not create deprecation warnings. Once that version is released and updated,
+                // these deprecations can be removed.
+                silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
+              }
             }
           }
         ]
@@ -37,6 +39,9 @@ module.exports = {
       }
     ]
   },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
   plugins: [
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'public', 'index.html')