From c2e721f6b892203e4f4a0d63c18316a097e1465f Mon Sep 17 00:00:00 2001 From: Trevor Lang Date: Mon, 27 Jan 2025 09:07:14 -0700 Subject: [PATCH] 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 --------- Co-authored-by: Ryan Abbott --- .eslintrc | 1 + .github/ISSUE_TEMPLATE/bug_report.md | 37 + .github/ISSUE_TEMPLATE/custom.md | 18 + .github/ISSUE_TEMPLATE/feature_request.md | 20 + .github/pull_request_template.md | 34 + .github/workflows/ci.yml | 14 +- .npmignore | 10 +- .nvmrc | 2 +- README.md | 28 +- babel.config.js | 17 +- cypress.webpack.config.js | 13 +- example/src/index.js | 189 - example/src/index.jsx | 196 + example/src/styles.css | 4 - example/webpack.config.js | 20 +- package-lock.json | 22617 +++++----------- package.json | 48 +- .../Checkbox/{Checkbox.js => Checkbox.jsx} | 4 +- .../{Constraint.js => Constraint.jsx} | 0 .../DateTime/{DateTime.js => DateTime.jsx} | 0 .../{ElementWrapper.js => ElementWrapper.jsx} | 4 +- .../FormBody/{FormBody.js => FormBody.jsx} | 0 .../{FormElement.js => FormElement.jsx} | 0 src/components/Group/{Group.js => Group.jsx} | 9 +- src/components/Help/{Help.js => Help.jsx} | 2 +- .../{InputField.js => InputField.jsx} | 0 .../Number/{Number.js => Number.jsx} | 0 .../Output/{Output.js => Output.jsx} | 4 +- src/components/Range/{Range.js => Range.jsx} | 2 +- .../{SecretField.js => SecretField.jsx} | 0 .../Select/{Select.js => Select.jsx} | 2 +- .../TextArea/{TextArea.js => TextArea.jsx} | 0 .../TextField/{TextField.js => TextField.jsx} | 0 src/components/Tree/{Tree.js => Tree.jsx} | 0 src/components/Tree/Tree.scss | 6 +- .../Tree/{TreeItem.js => TreeItem.jsx} | 4 +- src/components/Tree/TreeItem.scss | 8 +- src/css/_index.scss | 2 +- src/css/globalUtils.js | 11 - src/css/variables/_index.scss | 1 + src/css/variables/_vendor.scss | 6 + src/css/vendor/_index.scss | 1 - src/css/vendor/bootstrap/_variables.scss | 4 +- webpack.config.js | 23 +- 44 files changed, 6879 insertions(+), 16482 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/custom.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md create mode 100644 .github/pull_request_template.md delete mode 100644 example/src/index.js create mode 100644 example/src/index.jsx rename src/components/Checkbox/{Checkbox.js => Checkbox.jsx} (96%) rename src/components/Constraint/{Constraint.js => Constraint.jsx} (100%) rename src/components/DateTime/{DateTime.js => DateTime.jsx} (100%) rename src/components/ElementWrapper/{ElementWrapper.js => ElementWrapper.jsx} (93%) rename src/components/FormBody/{FormBody.js => FormBody.jsx} (100%) rename src/components/FormElement/{FormElement.js => FormElement.jsx} (100%) rename src/components/Group/{Group.js => Group.jsx} (88%) rename src/components/Help/{Help.js => Help.jsx} (93%) rename src/components/InputField/{InputField.js => InputField.jsx} (100%) rename src/components/Number/{Number.js => Number.jsx} (100%) rename src/components/Output/{Output.js => Output.jsx} (91%) rename src/components/Range/{Range.js => Range.jsx} (97%) rename src/components/SecretField/{SecretField.js => SecretField.jsx} (100%) rename src/components/Select/{Select.js => Select.jsx} (97%) rename src/components/TextArea/{TextArea.js => TextArea.jsx} (100%) rename src/components/TextField/{TextField.js => TextField.jsx} (100%) rename src/components/Tree/{Tree.js => Tree.jsx} (100%) rename src/components/Tree/{TreeItem.js => TreeItem.jsx} (98%) delete mode 100644 src/css/globalUtils.js create mode 100644 src/css/variables/_index.scss create mode 100644 src/css/variables/_vendor.scss delete mode 100644 src/css/vendor/_index.scss diff --git a/.eslintrc b/.eslintrc index 9b6422fa..b36a5d67 100644 --- a/.eslintrc +++ b/.eslintrc @@ -18,6 +18,7 @@ } ], + // Use AirBnb settings as a base "extends": [ "@edsc" ], diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..602be7bd --- /dev/null +++ b/.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. diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md new file mode 100644 index 00000000..2c0c3b23 --- /dev/null +++ b/.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 diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 00000000..bbcbbe7d --- /dev/null +++ b/.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. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000..42782fa6 --- /dev/null +++ b/.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 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b304c353..82ddc286 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.npmignore b/.npmignore index ad62c867..e6599801 100644 --- a/.npmignore +++ b/.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 diff --git a/.nvmrc b/.nvmrc index a77793ec..deed13c0 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/hydrogen +lts/jod diff --git a/README.md b/README.md index eb43b0ff..51fa33da 100644 --- a/README.md +++ b/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 diff --git a/babel.config.js b/babel.config.js index 6804530e..ce1d565c 100644 --- a/babel.config.js +++ b/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'] - } - } + ] } diff --git a/cypress.webpack.config.js b/cypress.webpack.config.js index 4b9eeb2d..9975f50b 100644 --- a/cypress.webpack.config.js +++ b/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') diff --git a/example/src/index.js b/example/src/index.js deleted file mode 100644 index 1cc5d8ae..00000000 --- a/example/src/index.js +++ /dev/null @@ -1,189 +0,0 @@ -import React, { useState } from 'react' -import { createRoot } from 'react-dom/client' -import format from 'xml-formatter' -import GithubCorner from 'react-github-corner' - -import { EDSCEchoform } from '../../src/index' - -import form1 from './form1.xml' -import form2 from './form2.xml' -import form3 from './form3.xml' - -import 'bootstrap/dist/css/bootstrap.min.css' -import './styles.css' - -const App = () => { - const [form, setForm] = useState(form1) - const [prepopulateValues, setPrepopulateValues] = useState({ - PREPOP: 'I am prepopulated' - }) - const [tempForm, setTempForm] = useState(form) - const [tempPrepop, setTempPrepop] = useState(JSON.stringify(prepopulateValues)) - const [serializedModel, setSerializedModel] = useState('') - const [serializedRawModel, setSerializedRawModel] = useState('') - const [selectedModel, setSelectedModel] = useState('rawModel') - const [formIsValid, setFormIsValid] = useState(true) - const [formHasBeenUpdated, setFormHasBeenUpdated] = useState(false) - const [defaultRawModel, setDefaultRawModel] = useState(null) - - const onTextAreaChange = (e) => { - if (e.target.id === 'demo-echoforms-xml') { - setTempForm(e.target.value) - } else { - setTempPrepop(e.target.value) - } - } - - const onTextAreaBlur = (e) => { - if (e.target.id === 'demo-echoforms-xml') { - setForm(tempForm) - setDefaultRawModel(null) - } else { - setPrepopulateValues(JSON.parse(tempPrepop)) - } - } - - const onFormModelUpdated = (value) => { - const { model, rawModel, hasChanged } = value - setSerializedModel(model) - setSerializedRawModel(rawModel) - setDefaultRawModel(rawModel) - setFormHasBeenUpdated(hasChanged) - } - - const onFormIsValidUpdated = (isValid) => { - setFormIsValid(isValid) - } - - const onSelectForm = (e) => { - const { value } = e.target - setForm(value) - setTempForm(value) - setDefaultRawModel(null) - } - - const onSelectModelFormat = (e) => { - const { value } = e.target - setSelectedModel(value) - } - - let modelPreview = serializedRawModel - if (selectedModel === 'model') modelPreview = serializedModel - - return ( - <> -

- ECHO Forms React Plugin Demo -

- -

ECHO Forms XML

-

- Enter ECHO Forms XML in the box below to see it rendered, or select a predefined form -

-
-
- - -
-
- - -
-
- - -
-
-