Merging form-block with aem-boilerplate-forms

Author: neerajadobe93

.circleci/config.yml

@@ -0,0 +1,61 @@
+version: 2.1
+orbs:
+  node: circleci/node@5
+  browser-tools: circleci/browser-tools@1.2.3
+jobs:
+  lint:
+    executor: node/default
+    steps:
+      - checkout
+      - node/install-packages:
+          pkg-manager: npm
+      - run:
+          name: Run lint
+          command: npm run lint
+  test-node:
+    # Install node dependencies and run tests
+    executor: node/default
+    steps:
+      - checkout
+      - node/install-packages:
+          pkg-manager: npm
+      - run:
+          name: Print node install help instructions
+          command: |-
+            echo "One cause for node package install failure is if you have private repositories that it can't reach
+            One way to fix this for private npm packages:
+              1. Use the npm CLI's \"login\" command to create a token (usually saved in your user's \"~/.npmrc\" file)
+                For more info, see https://circleci.com/blog/publishing-npm-packages-using-circleci-2-0/#:~:text=set%20the%20%24npm_token%20environment%20variable%20in%20circleci
+              2. Add a NPM_TOKEN to an org context
+                For info on how to use contexts, see https://circleci.com/docs/contexts/
+              3. Add a .circleci/config.yml to your repository or use this config.yml as a starting template
+              4. Configure the jobs to use the context that includes NPM_TOKEN
+              5. Add a step to inject your NPM_TOKEN environment variable into npm before \"install-packages\"
+                For an example, see https://circleci.com/blog/publishing-npm-packages-using-circleci-2-0/#:~:text=the%20deploy%20job%20has%20several%20steps%20that%20run%20to%20authenticate%20with%20and%20publish%20to"
+          when: on_fail
+      - run:
+          name: Run tests
+          command: npm test --passWithNoTests
+  check-coverage:
+    executor: node/default
+    steps:
+      - checkout
+      - node/install-packages:
+          pkg-manager: npm
+      - run:
+          name : check coverage
+          command: npm run coverage
+      - store_artifacts:
+          path: coverage
+workflows:
+  lint:
+    jobs:
+      - lint
+  build-and-test:
+    jobs:
+      - test-node
+  check-coverage:
+    jobs:
+      - check-coverage
+
+

.eslintignore

@@ -1,4 +1,4 @@
-helix-importer-u
-
+helix-importer-ui
+rollup/*
 blocks/form/rules/formula/*
 blocks/form/rules/model/*

.eslintrc.js .eslintrc.cjs

@@ -17,5 +17,6 @@ module.exports = {
     'import/extensions': ['error', {
       js: 'always',
     }],
+    'no-console': 'on',
   },
-};
+};

.github/workflows/cleanup-on-create.yaml

@@ -6,14 +6,15 @@ on:
   create:
     branches:
       - main
+  workflow_dispatch:
 jobs:
   cleanup:
     runs-on: ubuntu-latest
     permissions:
       contents: write
       actions: write
     # only run if commit message is "Initial commit" on main branch
-    if: ${{ github.ref == 'refs/heads/main' && github.event.head_commit.message == 'Initial commit' }}
+    if: ${{ github.event_name == 'workflow_dispatch' || ( github.ref == 'refs/heads/main' && !(contains(github.event, 'head_commit') || github.event.head_commit.message == 'Initial commit' )) }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -27,6 +28,21 @@ jobs:
             .github/workflows/cleanup-on-create.yaml \
             CHANGELOG.md
 
+      - name: Remove Form Developement Files
+        run: |
+          rm -rf \
+            .circleci .npmrc test rollup
+
+      - name: Update .eslintignore
+        run: |
+          sed -i '/^rollup/d' .eslintignore
+          sed -i '/^helix-importer-ui/d' .eslintignore 
+
+      - name: Update Package.json
+        run: |
+          rm -rf package.json package-lock.json
+          mv package-prod.json package.json
+
       - name: Initialize README
         # replace {repo} and {owner} with the actual values
         run: |
@@ -42,7 +58,7 @@ jobs:
       - name: Commit changes
         run: |
           git config --local user.email "helix@adobe.com"
-          git config --local user.name "Helix Bot"
+          git config --local user.name "AEM Bot"
           git add .
           git commit -m "chore: cleanup repository template"
-          git push
+          git push

.gitignore

@@ -7,3 +7,6 @@ helix-importer-ui
 .DS_Store
 *.bak
 .idea
+
+.env*
+.vscode

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+@aemforms:registry=https://registry.npmjs.org/

README.md

@@ -19,7 +19,7 @@ npm run lint
 
 ## Local development
 
-1. Create a new repository based on the `aem-boilerplate` template and add a mountpoint in the `fstab.yaml`
+1. Create a new repository based on the `aem-boilerplate-forms` template and add a mountpoint in the `fstab.yaml`
 1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository
 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli`
 1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)

blocks/form/components/file.js

@@ -179,10 +179,11 @@ function createFileHandler(allFiles, input) {
 
     attachFiles: (inputEl, files) => {
       const multiple = inputEl.hasAttribute('multiple');
+      let newFiles = Array.from(files);
       if (!multiple) {
         allFiles.splice(0, allFiles.length);
+        newFiles = [newFiles[0]];
       }
-      const newFiles = Array.from(files);
       const currentLength = allFiles.length;
       allFiles.push(...newFiles);
       const newFileElements = newFiles

blocks/form/components/wizard.js

@@ -148,7 +148,7 @@ export class WizardLayout {
 
     if (this.includeNextBtn && children.length) {
       this.addButton(wrapper, panel, {
-        label: { value: 'NEXT' }, fieldType: 'button', name: 'next', id: 'wizard-button-next',
+        label: { value: 'Next' }, fieldType: 'button', name: 'next', id: 'wizard-button-next',
       });
     }
 

blocks/form/constant.js

@@ -1,13 +1,18 @@
 export const fileAttachmentText = 'Attach';
 export const dragDropText = 'Drag and Drop To Upload';
 
+export const DEFAULT_THANK_YOU_MESSAGE = 'Thank you for your submission.';
+
 export const defaultErrorMessages = {
   accept: 'The specified file type not supported.',
   maxFileSize: 'File too large. Reduce size and try again.',
   maxItems: 'Specify a number of items equal to or less than $0.',
   minItems: 'Specify a number of items equal to or greater than $0.',
 };
 
+// eslint-disable-next-line no-useless-escape
+export const emailPattern = '([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(\.?[A-Za-z0-9]){2}\.([A-Za-z0-9]{2,4})?';
+
 let submitBaseUrl = '';
 
 export function setSubmitBaseUrl(url) {

blocks/form/form.css

@@ -3,9 +3,9 @@
     --label-color: #666;
     --border-color: #818a91;
     --form-error-color: #ff5f3f;
-    --button-primary-color: #035fe6;
+    --button-primary-color: #5F8DDA;
     --button-secondary-color: #666;
-    --button-primary-hover-color: #5F8DDA;
+    --button-primary-hover-color: #035fe6;
     --form-font-size-m: 22px;
     --form-font-size-s: 18px;
     --form-font-size-xs: 16px;
@@ -68,7 +68,7 @@ form output {
     font-size: 1.625rem;
 }
 
-form [data-visible="false"] {
+form:not(.edit-mode) [data-visible="false"] {
     display: none !important;
 }
 
@@ -268,9 +268,17 @@ main .form form .item-remove {
     padding-left: 10px;
 }
 
+main .form .file-description{
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-top: 5px;
+}
+
 main .form .file-description .file-description-name {
   cursor: pointer;
   text-decoration: underline;
+  flex: 1;
 }
 
 main .form form .item-remove span {
@@ -283,10 +291,23 @@ main .form form .item-remove span {
 main .file-wrapper .file-description button {
     --form-button-padding: 15px;
 
-    background: url('/icons/delete.svg') no-repeat;
-    width: unset;
-    border: unset;
+    width: 12px;
+    height: 12px;
+    border: none;
     text-align: center;
+    background: var(--border-color);
+    cursor: pointer;
+    position: relative;
+    border-radius: 3px;
+}
+
+main .file-wrapper .file-description button::after{
+    content: 'X';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: var(--background-color-primary);
+    transform: translate(-50%, -50%);
 }
 
 main .form .button-wrapper button {
@@ -516,7 +537,12 @@ main .form form .field-wrapper.col-1 {
     grid-column: span 1;
 }
 
-main .form .form-image-wrapper  img{
+main .form .form-image-wrapper  img {
   max-width: 100%;
   height: auto;
 }
+
+main form .wizard > .current-wizard-step.panel-wrapper:first-of-type ~ .wizard-button-wrapper > .wizard-button-prev,
+main form .wizard > .current-wizard-step.panel-wrapper:last-of-type ~ .wizard-button-wrapper > .wizard-button-next {
+    display: none;
+}