Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/add prompts default value #112

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feat/add prompts default value #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a7f5583
feat: add prompts default value on frontend
NinaDen Oct 1, 2021
7c79b29
feat: add prompts default value to vs code extension
NinaDen Oct 1, 2021
a3f39f4
feat: add default values to animation
NinaDen Oct 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions ...tend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}>
Expand Down
4 changes: 4 additions & 0 deletions .../components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@
color: #ccc;
}

.select-default-text {
background-color: #5a8ab4;
}

.select-options {
display: flex;
flex-direction: column;
Expand Down
17 changes: 17 additions & 0 deletions ...ates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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);

Expand Down Expand Up @@ -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-', ''))]}
Expand Down
51 changes: 29 additions & 22 deletions templates/frontend/src/components/shared/template-form/prompts/prompts-read-only.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't get the point of this huge change... indent change?

</div>
);
</div>
);

export default Prompts;
9 changes: 9 additions & 0 deletions templates/frontend/src/components/shared/template-form/prompts/prompts.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions templates/frontend/src/components/shared/template-form/template-form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
1 change: 1 addition & 0 deletions templates/vscode-extension/src/commands/run-extension.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down