From a7f5583ce4ce51be3000a0ac2ac408bee557dc0f Mon Sep 17 00:00:00 2001
From: Nina Denisova <ninakuz93@gmail.com>
Date: Fri, 1 Oct 2021 22:09:19 +0500
Subject: [PATCH 1/3] feat: add prompts default value on frontend

---
 .../prompts/prompts-read-only.jsx             | 51 +++++++++++--------
 .../shared/template-form/prompts/prompts.jsx  |  9 ++++
 .../shared/template-form/template-form.jsx    |  1 +
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/templates/frontend/src/components/shared/template-form/prompts/prompts-read-only.jsx b/templates/frontend/src/components/shared/template-form/prompts/prompts-read-only.jsx
index 8541c41c..6ccc7f6f 100644
--- a/templates/frontend/src/components/shared/template-form/prompts/prompts-read-only.jsx
+++ b/templates/frontend/src/components/shared/template-form/prompts/prompts-read-only.jsx
@@ -30,32 +30,39 @@ const Prompt = ({ item, index }) => (
       defaultValue={item.variableName}
       readOnly
     />
+    <Input
+      className={cx('item-input')}
+      label="Default value"
+      name={`prompts[${index}].defaultValue`}
+      defaultValue={item.defaultValue}
+      readOnly
+    />
   </li>
 );
 
 const Prompts = ({ prompts }) => (
-    <div className={cx('wrapper')}>
-      <div className={cx('head')}>
-        <h2 className={cx('title')}>Prompts</h2>
-        <Tooltip dataFor="tooltip" />
-        <ReactTooltip className={cx('tooltip')} effect="solid" place="right" id="tooltip" clickable>
-          <p>
-            Prompts represent list of questions that will be asked during template execution from
-            users as a popup.
-          </p>
-          <p>
-            Answers you can use as variables inside templates or filenames by using % myVariable %
-          </p>
-        </ReactTooltip>
-      </div>
-      <div className={cx('items-wrapper')}>
-        <ul>
-          {prompts.map((item, index) => (
-            <Prompt key={index} item={item} index={index} />
-          ))}
-        </ul>
-      </div>
+  <div className={cx('wrapper')}>
+    <div className={cx('head')}>
+      <h2 className={cx('title')}>Prompts</h2>
+      <Tooltip dataFor="tooltip" />
+      <ReactTooltip className={cx('tooltip')} effect="solid" place="right" id="tooltip" clickable>
+        <p>
+          Prompts represent list of questions that will be asked during template execution from
+          users as a popup.
+        </p>
+        <p>
+          Answers you can use as variables inside templates or filenames by using % myVariable %
+        </p>
+      </ReactTooltip>
+    </div>
+    <div className={cx('items-wrapper')}>
+      <ul>
+        {prompts.map((item, index) => (
+          <Prompt key={index} item={item} index={index} />
+        ))}
+      </ul>
     </div>
-  );
+  </div>
+);
 
 export default Prompts;
diff --git a/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx b/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx
index 9fcb9bc6..7e015e0d 100644
--- a/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx
+++ b/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx
@@ -39,6 +39,15 @@ const Prompt = React.forwardRef(({ item, trigger, index, errors, remove, readOny
       error={errors?.prompts?.[index]?.variableName?.message}
       onBlur={() => trigger('prompts')}
     />
+    <Input
+      className={cx('item-input')}
+      label="Default value"
+      name={`prompts[${index}].defaultValue`}
+      defaultValue={item.defaultValue}
+      register={ref}
+      error={errors?.prompts?.[index]?.defaultValue?.message}
+      onBlur={() => trigger('prompts')}
+    />
 
     {!readOny && (
       <span
diff --git a/templates/frontend/src/components/shared/template-form/template-form.jsx b/templates/frontend/src/components/shared/template-form/template-form.jsx
index a482f008..135907ca 100644
--- a/templates/frontend/src/components/shared/template-form/template-form.jsx
+++ b/templates/frontend/src/components/shared/template-form/template-form.jsx
@@ -31,6 +31,7 @@ const cx = classNames.bind(styles);
 const promptsSchema = {
   message: yup.string().required('Message is required'),
   variableName: yup.string().required('Variable name is required'),
+  defaultValue: yup.string(),
 };
 
 const schema = yup.object().shape({

From 7c79b295cdfa16d7710ea1c20d1136f78dc85fe2 Mon Sep 17 00:00:00 2001
From: Nina Denisova <ninakuz93@gmail.com>
Date: Fri, 1 Oct 2021 22:09:49 +0500
Subject: [PATCH 2/3] feat: add prompts default value to vs code extension

---
 templates/vscode-extension/src/commands/run-extension.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/vscode-extension/src/commands/run-extension.js b/templates/vscode-extension/src/commands/run-extension.js
index 39abd908..290e3822 100644
--- a/templates/vscode-extension/src/commands/run-extension.js
+++ b/templates/vscode-extension/src/commands/run-extension.js
@@ -119,6 +119,7 @@ async function runExtension(folderURI) {
         const prompt = prompts[i];
         const promptResult = await vscode.window.showInputBox({
           prompt: prompt.message,
+          value: prompt.defaultValue,
         });
 
         if (promptResult === undefined) {

From a3f39f465271d7ff37c8b46853709d6772f4d1c9 Mon Sep 17 00:00:00 2001
From: Nina Denisova <ninakuz93@gmail.com>
Date: Sat, 9 Oct 2021 15:57:29 +0500
Subject: [PATCH 3/3] feat: add default values to animation

---
 .../prompt-input/prompt-input.jsx               | 15 +++++++++------
 .../prompt-input/prompt-input.module.scss       |  4 ++++
 .../vscode-animation/vscode-animation.jsx       | 17 +++++++++++++++++
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx
index bf52733d..d91e1568 100644
--- a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx
+++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx
@@ -5,15 +5,18 @@ import styles from './prompt-input.module.scss';
 
 const cx = classNames.bind(styles);
 
-const PromptInput = ({ value, message, className }) => (
+const PromptInput = ({ value, message, className, defaultValue }) => (
   <div className={cx('select-wrapper', className)}>
     <div className={cx('select-input')}>
       <span className={cx('select-text')}>
-        <Typewriter
-          onInit={(typewriter) => {
-            typewriter.pauseFor(500).typeString(value).start();
-          }}
-        />
+        <span className={cx('select-default-text')}>{defaultValue}</span>
+        {value && (
+          <Typewriter
+            onInit={(typewriter) => {
+              typewriter.deleteAll().pauseFor(500).typeString(value).start();
+            }}
+          />
+        )}
       </span>
     </div>
     <div className={cx('select-options')}>
diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss
index 9a3ee456..b3e745c9 100644
--- a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss
+++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss
@@ -42,6 +42,10 @@
   color: #ccc;
 }
 
+.select-default-text {
+  background-color: #5a8ab4;
+}
+
 .select-options {
   display: flex;
   flex-direction: column;
diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx b/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx
index 18ebc7a7..285c349c 100644
--- a/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx
+++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx
@@ -45,6 +45,7 @@ const BEFORE_ANIMATION_START_MS = 700 * DEV_SPEED_COEFFICIENT;
 const RESET_TIME_MS = 100;
 const STEP_TIME_MS = 1600 * DEV_SPEED_COEFFICIENT;
 const PROMP_TIME_MS = 2800 * DEV_SPEED_COEFFICIENT;
+const DEFAULT_VALUE_TIME_MS = 1500 * DEV_SPEED_COEFFICIENT;
 
 const VscodeAnimation = ({ template }) => {
   const [animationStep, setAnimationStep] = useState('initial');
@@ -68,6 +69,10 @@ const VscodeAnimation = ({ template }) => {
 
       if (prompts.length > 0) {
         for (let i = 0; i < prompts.length; i++) {
+          if (prompts[i].defaultValue) {
+            await setAnimationStep(`default-${i}`);
+            await sleepMs(DEFAULT_VALUE_TIME_MS);
+          }
           await setAnimationStep(`prompt-${i}`);
           await sleepMs(PROMP_TIME_MS);
 
@@ -118,6 +123,18 @@ const VscodeAnimation = ({ template }) => {
       {animationStep === 'templates' && (
         <TemplateSelect templateName={template.name} className={cx('template-select')} />
       )}
+      {animationStep.startsWith('default') && (
+        <PromptInput
+          className={cx('prompt-input')}
+          message={
+            JSON.parse(template.prompts)[parseInt(animationStep.replace('default-', ''))].message
+          }
+          defaultValue={
+            JSON.parse(template.prompts)[parseInt(animationStep.replace('default-', ''))]
+              .defaultValue
+          }
+        />
+      )}
       {animationStep.startsWith('prompt') && (
         <PromptInput
           value={PROMPTS_VALUES[parseInt(animationStep.replace('prompt-', ''))]}