feat(ui): introduce FieldType.Boolean - WF-165

This new field is just an alias for `FieldType.Text` but it will
make `useEvaluator` parse the value and accept `"yes"` or `True`
and return the boolean value.

This unlock the usage of boolean value in the state like:

```py
wf.init_state({
  "string": "yes",
  "true": True,
})
```

This is also the first step to introduce a new field setting UX for
boolean value (like a checkbox or something).

src/ui/src/builder/settings/BuilderSettingsProperties.vue

@@ -50,7 +50,10 @@
 					></BuilderFieldsKeyValue>
 
 					<BuilderFieldsText
-						v-if="fieldValue.type == FieldType.Text"
+						v-if="
+							fieldValue.type == FieldType.Text ||
+							fieldValue.type == FieldType.Boolean
+						"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsText>

src/ui/src/components/core/content/CoreAnnotatedText.spec.ts

@@ -33,10 +33,10 @@ describe("CoreAnnotatedText", async () => {
 					[injectionKeys.evaluatedFields as symbol]: {
 						text: ref(text),
 						seed: ref(1),
-						useMarkdown: ref("no"),
-						rotateHue: ref("yes"),
+						useMarkdown: ref(false),
+						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
-						copyButtons: ref("yes"),
+						copyButtons: ref(true),
 					},
 				},
 			},
@@ -73,10 +73,10 @@ describe("CoreAnnotatedText", async () => {
 					[injectionKeys.evaluatedFields as symbol]: {
 						text: ref(text),
 						seed: ref(1),
-						useMarkdown: ref("yes"),
-						rotateHue: ref("yes"),
+						useMarkdown: ref(true),
+						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
-						copyButtons: ref("yes"),
+						copyButtons: ref(true),
 					},
 				},
 			},

src/ui/src/components/core/content/CoreAnnotatedText.vue

@@ -27,7 +27,7 @@
 			</span>
 		</template>
 		<SharedControlBar
-			v-if="fields.copyButtons.value === 'yes'"
+			v-if="fields.copyButtons.value"
 			:copy-raw-content="copyRawContent"
 			:copy-structured-content="copyStructuredContent"
 		/>
@@ -36,6 +36,7 @@
 
 <script lang="ts">
 import {
+	baseYesNoField,
 	buttonColor,
 	buttonTextColor,
 	cssClasses,
@@ -70,34 +71,22 @@ export default {
 				category: FieldCategory.Style,
 			},
 			rotateHue: {
+				...baseYesNoField,
 				name: "Rotate hue",
 				desc: "If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "yes",
 				category: FieldCategory.Style,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			copyButtons: {
+				...baseYesNoField,
 				name: "Copy buttons",
 				desc: "If active, adds a control bar with both copy text and JSON buttons.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 				category: FieldCategory.Style,
 			},
@@ -115,7 +104,6 @@ import { FieldCategory, FieldType } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
 import { computed, inject, readonly, ref, watch } from "vue";
 import chroma, { Color } from "chroma-js";
-import { useFieldValueAsYesNo } from "@/composables/useFieldValue";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdownRaw from "../base/BaseMarkdownRaw.vue";
 
@@ -130,7 +118,7 @@ const isBeingEdited = inject(injectionKeys.isBeingEdited);
 const componentId = inject(injectionKeys.componentId);
 const isEmpty = computed(() => !fields.text.value);
 const shouldDisplay = computed(() => !isEmpty.value || isBeingEdited.value);
-const useMarkdown = useFieldValueAsYesNo(fields, "useMarkdown");
+const useMarkdown = computed(() => Boolean(fields.useMarkdown.value));
 
 const COLOR_STEPS = [
 	{ h: -78, s: -34, l: 16 },
@@ -227,7 +215,7 @@ function getAnnotationBgColor(content: AnnotatedTextElementArray) {
 }
 
 function generateColor(s: string) {
-	if (fields.rotateHue.value == "no") {
+	if (!fields.rotateHue.value) {
 		return fields.referenceColor.value;
 	}
 

src/ui/src/components/core/content/CoreChatbot.vue

@@ -13,7 +13,7 @@ See the stubs for more details.
 					v-for="(message, messageId) in messages"
 					:key="messageId"
 					:message="message"
-					:use-markdown="fields.useMarkdown.value == 'yes'"
+					:use-markdown="fields.useMarkdown.value"
 					:assistant-role-color="fields.assistantRoleColor.value"
 					:initials="
 						message.role === 'assistant'
@@ -99,6 +99,7 @@ See the stubs for more details.
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
+	baseYesNoField,
 	buttonColor,
 	buttonTextColor,
 	containerBackgroundColor,
@@ -210,14 +211,10 @@ export default {
 				type: FieldType.Text,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			enableFileUpload: {
 				name: "Enable file upload",

src/ui/src/components/core/content/CoreDataframe.vue

@@ -10,7 +10,7 @@
 				/>
 			</div>
 			<WdsControl
-				v-if="fields.enableDownload.value === 'yes'"
+				v-if="fields.enableDownload.value"
 				title="Download"
 				class="download"
 				@click="download"
@@ -24,7 +24,7 @@
 				:style="gridStyle"
 				:class="{
 					scrolled: rowOffset > 0,
-					wrapText: fields.wrapText.value === 'yes',
+					wrapText: fields.wrapText.value,
 				}"
 			>
 				<div
@@ -119,6 +119,7 @@ import {
 	secondaryTextColor,
 	accentColor,
 	separatorColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
@@ -193,51 +194,31 @@ export default {
 				default: DEFAULT_DATA_FRAME,
 			},
 			showIndex: {
+				...baseYesNoField,
 				name: "Show index",
 				desc: "Shows the dataframe's index. If an Arrow table is used, shows the zero-based integer index.",
-				type: FieldType.Text,
 				default: "yes",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableSearch: {
+				...baseYesNoField,
 				name: "Enable search",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableRecordAdd: {
+				...baseYesNoField,
 				name: "Enable adding a record",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableRecordUpdate: {
+				...baseYesNoField,
 				name: "Enable updating a record",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableDownload: {
+				...baseYesNoField,
 				name: "Enable download",
 				desc: "Allows the user to download the data as CSV.",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			actions: {
 				name: "Actions",
@@ -246,13 +227,9 @@ export default {
 				default: JSON.stringify({ remove: "Remove", open: "Open" }),
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
-				type: FieldType.Text,
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			displayRowCount: {
@@ -263,14 +240,10 @@ export default {
 				default: "10",
 			},
 			wrapText: {
+				...baseYesNoField,
 				name: "Wrap text",
-				type: FieldType.Text,
 				category: FieldCategory.Style,
 				desc: "Not wrapping text allows for an uniform grid, but may be inconvenient if your data contains longer text fields.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			primaryTextColor,
@@ -377,15 +350,15 @@ const displayRowCount = computed(() =>
 const hasActions = computed(
 	() => Object.keys(fields.actions.value || {}).length > 0,
 );
-const useMarkdown = computed(() => fields.useMarkdown.value == "yes");
-const enableRecordUpdate = computed(
-	() => fields.enableRecordUpdate.value == "yes",
+const useMarkdown = computed(() => Boolean(fields.useMarkdown.value));
+const enableRecordUpdate = computed(() =>
+	Boolean(fields.enableRecordUpdate.value),
 );
-const enableRecordAdd = computed(() => fields.enableRecordAdd.value == "yes");
+const enableRecordAdd = computed(() => Boolean(fields.enableRecordAdd.value));
 
 const rowOffset = computed(() => {
 	let maxOffset: number;
-	if (fields.wrapText.value == "yes") {
+	if (fields.wrapText.value) {
 		maxOffset = rowCount.value - 1;
 	} else {
 		maxOffset = rowCount.value - displayRowCount.value;