✨ feat(Configurator): add title setting to configurator

README.md

@@ -73,7 +73,7 @@ You can define dynamic content by using _{_ & _}_ in doc, I called it a variable
 
 When triggering this extension, a value for each variable is prompt.
 
-### **Use select or text for each variables** (`vscodeGitCommit.messageTemplate`)
+### **Use select or text for each variables** (`vscodeGitCommit.variables`)
 
 ```json
 {
@@ -133,6 +133,34 @@ For each variables defined in the template above, you can define the content:
 
 'branch': Show you a select with the choice between short and long name for current branch
 
+### **Define some default values for free input variables** (`vscodeGitCommit.defaultVariablesValues`)
+
+```json
+{
+  "vscodeGitCommit.defaultVariablesValues": {
+    "author": "@RIOU Kevin"
+  }
+}
+```
+
+For each variables defined in the template not used in `variables` setting, you can define a default value pretyped in the input
+
+In the upside example, for the variable `author`, the input is prefill with `@RIOU Kevin`.
+
+### **Define titles display on the input** (`vscodeGitCommit.variablesDisplayTitles`)
+
+```json
+{
+  "vscodeGitCommit.variablesDisplayTitles": {
+    "author": "Fill the pseudo of the person commiting with an @"
+  }
+}
+```
+
+For each variables prompt, you can define a default value pretyped in the input
+
+In the upside example, for the variable `author`, the input will show the title `Fill the pseudo of the person commiting with an @`.
+
 # Contributing to the extension
 
 #### Share configs

SETTINGS.md

@@ -33,7 +33,7 @@ You can define dynamic content by using _{_ & _}_ in doc, I called it a variable
 
 When triggering this extension, a value for each variable is prompt.
 
-### **Use select or text for each variables** (`vscodeGitCommit.messageTemplate`)
+### **Use select or text for each variables** (`vscodeGitCommit.variables`)
 
 ```json
 {
@@ -92,3 +92,31 @@ For each variables defined in the template above, you can define the content:
 #### If you want to add branch name in commit, you can use this
 
 'branch': Show you a select with the choice between short and long name for current branch
+
+### **Define some default values for free input variables** (`vscodeGitCommit.defaultVariablesValues`)
+
+```json
+{
+  "vscodeGitCommit.defaultVariablesValues": {
+    "author": "@RIOU Kevin"
+  }
+}
+```
+
+For each variables defined in the template not used in `variables` setting, you can define a default value pretyped in the input
+
+In the upside example, for the variable `author`, the input is prefill with `@RIOU Kevin`.
+
+### **Define titles display on the input** (`vscodeGitCommit.variablesDisplayTitles`)
+
+```json
+{
+  "vscodeGitCommit.variablesDisplayTitles": {
+    "author": "Fill the pseudo of the person commiting with an @"
+  }
+}
+```
+
+For each variables prompt, you can define a default value pretyped in the input
+
+In the upside example, for the variable `author`, the input will show the title `Fill the pseudo of the person commiting with an @`.

sandbox/components/VariablesDisplayTitlesInput.tsx

@@ -0,0 +1,36 @@
+import React, { FC, useContext } from 'react';
+import { LineElement } from '../typings/Editor';
+import { IStoreDefaultVariableValue } from '../typings/Store';
+import { Store } from '../utils/store';
+import { parseVariableFromTemplate } from '../utils/template';
+import VariableDisplayTitleInput from './core/VariableDisplayTitleInput';
+
+interface IProps {}
+
+const VariablesDisplayTitlesInput: FC<IProps> = (props) => {
+  const { variablesDisplayTitles, setVariableDisplayTitle, template } =
+    useContext(Store);
+
+  const templateVariables =
+    parseVariableFromTemplate(template as LineElement[]) ?? [];
+
+  const availableVariables = [...templateVariables];
+
+  return (
+    <div style={{ width: '100%' }}>
+      {availableVariables.map((av, i) => (
+        <VariableDisplayTitleInput
+          key={i}
+          name={av}
+          value={variablesDisplayTitles[av]}
+          onChange={(value: IStoreDefaultVariableValue) =>
+            setVariableDisplayTitle(av, value)
+          }
+          onDelete={() => setVariableDisplayTitle(av, undefined)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default VariablesDisplayTitlesInput;

sandbox/components/VariablesDisplayTitlesRenderer.tsx

@@ -0,0 +1,20 @@
+import React, { FC, useContext } from 'react';
+import { Store } from '../utils/store';
+import Pre from './core/Pre';
+
+interface IProps {}
+
+const VariablesDisplayTitlesRenderer: FC<IProps> = (props) => {
+  const { variablesDisplayTitles } = useContext(Store);
+  return (
+    <Pre>
+      {`"vscodeGitCommit.variablesDisplayTitles": ${JSON.stringify(
+        { ...variablesDisplayTitles },
+        null,
+        2
+      )}`}
+    </Pre>
+  );
+};
+
+export default VariablesDisplayTitlesRenderer;

sandbox/components/core/VariableDisplayTitleInput.tsx

@@ -0,0 +1,62 @@
+import { IconButton, Input } from '@chakra-ui/react';
+import React, { FC, useEffect, useState } from 'react';
+import styles from '../../styles/DefaultVariablesValuesInput.module.css';
+import { DeleteIcon } from '@chakra-ui/icons';
+import { IStoreVariableDisplayTitle } from '../../typings/Store';
+
+interface IProps {
+  name: string;
+  value: IStoreVariableDisplayTitle;
+  onChange: (value: IStoreVariableDisplayTitle) => IStoreVariableDisplayTitle;
+  onDelete: () => void;
+}
+
+const VariableDisplayTitleInput: FC<IProps> = (props) => {
+  const { name, value, onChange, onDelete } = props;
+
+  const [internalValue, setInternalValue] =
+    useState<IStoreVariableDisplayTitle>(value);
+
+  const handleChangeValue = (e: any) => {
+    const newValue = e.target.value.length === 0 ? undefined : e.target.value;
+    onChange(newValue);
+    setInternalValue(newValue);
+  };
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  return (
+    <>
+      <h3 className={styles.name} key={name}>
+        {name}
+      </h3>
+      <div className={styles.container}>
+        <div className={styles.input}>
+          <Input
+            size="sm"
+            placeholder="default value..."
+            value={internalValue ?? ''}
+            onChange={handleChangeValue}
+            className={styles.label}
+            variant="filled"
+          />
+        </div>
+        <IconButton
+          disabled={!internalValue}
+          className={styles.deleteIcon}
+          aria-label="copy"
+          icon={<DeleteIcon />}
+          color="#000000"
+          backgroundColor="#EEF2F6"
+          _hover={{ backgroundColor: '#db4437', color: '#FBFFFF' }}
+          size="sm"
+          onClick={onDelete}
+        />
+      </div>
+    </>
+  );
+};
+
+export default VariableDisplayTitleInput;

sandbox/generated/doc.md.ts

@@ -74,7 +74,7 @@ You can define dynamic content by using _{_ & _}_ in doc, I called it a variable
 
 When triggering this extension, a value for each variable is prompt.
 
-### **Use select or text for each variables** (\`vscodeGitCommit.messageTemplate\`)
+### **Use select or text for each variables** (\`vscodeGitCommit.variables\`)
 
 \`\`\`json
 {
@@ -134,6 +134,34 @@ For each variables defined in the template above, you can define the content:
 
 'branch': Show you a select with the choice between short and long name for current branch
 
+### **Define some default values for free input variables** (\`vscodeGitCommit.defaultVariablesValues\`)
+
+\`\`\`json
+{
+  "vscodeGitCommit.defaultVariablesValues": {
+    "author": "@RIOU Kevin"
+  }
+}
+\`\`\`
+
+For each variables defined in the template not used in \`variables\` setting, you can define a default value pretyped in the input
+
+In the upside example, for the variable \`author\`, the input is prefill with \`@RIOU Kevin\`.
+
+### **Define titles display on the input** (\`vscodeGitCommit.variablesDisplayTitles\`)
+
+\`\`\`json
+{
+  "vscodeGitCommit.variablesDisplayTitles": {
+    "author": "Fill the pseudo of the person commiting with an @"
+  }
+}
+\`\`\`
+
+For each variables prompt, you can define a default value pretyped in the input
+
+In the upside example, for the variable \`author\`, the input will show the title \`Fill the pseudo of the person commiting with an @\`.
+
 # Contributing to the extension
 
 #### Share configs

sandbox/pages/configurator.tsx

@@ -13,6 +13,8 @@ import InsertionModeInput from '../components/InsertionModeInput';
 import InsertionModeRenderer from '../components/InsertionModeRenderer';
 import TemplateInput from '../components/TemplateInput';
 import TemplateRenderer from '../components/TemplateRenderer';
+import VariablesDisplayTitlesInput from '../components/VariablesDisplayTitlesInput';
+import VariablesDisplayTitlesRenderer from '../components/VariablesDisplayTitlesRenderer';
 import VariableInput from '../components/VariablesInput';
 import VariablesRenderer from '../components/VariablesRenderer';
 import styles from '../styles/Configurator.module.css';
@@ -129,6 +131,17 @@ const Configurator: NextPage = () => {
             <DefaultVariablesValuesRenderer />
           </div>
         </div>
+        <div className={styles.line}>
+          <div className={styles.left}>
+            <CanvasTitle title="Variables display titles" />
+            <p className={styles.default}>DEFAULT: {'{}'}</p>
+            <VariablesDisplayTitlesInput />
+          </div>
+          <div className={styles.right}>
+            <CodeTitle title="Variables display titles" />
+            <VariablesDisplayTitlesRenderer />
+          </div>
+        </div>
       </main>
     </div>
   );

sandbox/typings/Store.d.ts

@@ -9,6 +9,7 @@ export type IStoreVariableCustom = IStoreVariable[];
 export type IStoreVariableMerge = string[];
 export type IStoreVariablePredefined = string;
 export type IStoreDefaultVariableValue = string | undefined;
+export type IStoreVariableDisplayTitle = string | undefined;
 
 type IStoreVariableValue =
   | IStoreVariableCustom
@@ -24,12 +25,17 @@ export interface IStoreDefaultVariablesValues {
   [key: string]: IStoreDefaultVariableValue;
 }
 
+export interface IStoreVariablesDisplayTitles {
+  [key: string]: IStoreVariableDisplayTitle;
+}
+
 export type IStoreTemplate = Descendant[];
 
 export interface IStoreData {
   template: IStoreTemplate;
   variables: IStoreVariables;
   defaultVariablesValues: IStoreDefaultVariablesValues;
+  variablesDisplayTitles: IStoreVariablesDisplayTitles;
   insertionMode: boolean;
 }
 
@@ -43,5 +49,9 @@ export interface IStore extends IStoreData {
     name: string,
     value: IStoreDefaultVariableValue
   ) => IStoreDefaultVariableValue;
+  setVariableDisplayTitle: (
+    name: string,
+    value: IStoreVariableDisplayTitle
+  ) => IStoreVariableDisplayTitle;
   setInsertionMode: (value: boolean) => boolean;
 }

sandbox/utils/store.tsx

@@ -21,10 +21,12 @@ export const DEFAULT_VALUE: IStore = {
   template: DEFAULT_TEMPLATE,
   variables: {},
   defaultVariablesValues: {},
+  variablesDisplayTitles: {},
   insertionMode: false,
   setVariable: () => [],
   setTemplate: () => [],
   setDefaultVariableValue: () => '',
+  setVariableDisplayTitle: () => '',
   setInsertionMode: () => false,
 };
 
@@ -39,6 +41,9 @@ export const StoreProvider: FC<any> = (props) => {
   const [defaultVariablesValues, setDefaultVariablesValuesState] = useState<
     IStore['defaultVariablesValues']
   >({});
+  const [variablesDisplayTitles, setVariablesDisplayTitlesState] = useState<
+    IStore['variablesDisplayTitles']
+  >({});
 
   const setTemplate: IStore['setTemplate'] = (value) => {
     updateVariablesNames(value);
@@ -68,6 +73,17 @@ export const StoreProvider: FC<any> = (props) => {
     return value;
   };
 
+  const setVariableDisplayTitle: IStore['setVariableDisplayTitle'] = (
+    name,
+    value
+  ) => {
+    setVariablesDisplayTitlesState((oldValue) => ({
+      ...oldValue,
+      [name]: value,
+    }));
+    return value;
+  };
+
   // Utils
   const updateVariableName = (oldName?: string, newName?: string) => {
     if (oldName && newName) {
@@ -106,10 +122,12 @@ export const StoreProvider: FC<any> = (props) => {
         template,
         variables,
         insertionMode,
+        variablesDisplayTitles,
         defaultVariablesValues,
         setTemplate,
         setVariable,
         setDefaultVariableValue,
+        setVariableDisplayTitle,
         setInsertionMode,
       }}
     >