add more validation

madeindjs · Jan 2, 2025 · cfb301e · cfb301e
1 parent 834d446
commit cfb301e
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 5 deletions.
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -135,6 +135,10 @@ import {
 } from "./CoreDataframe/constants";
 import WdsButton from "@/wds/WdsButton.vue";
 import { WdsColor } from "@/wds/tokens";
+import {
+	validatorObjectRecordNotNested,
+	validatorPositiveNumber,
+} from "@/constants/validators";
 
 const description = "A component to display Pandas DataFrames.";
 
@@ -243,6 +247,7 @@ export default {
 				desc: "Define rows actions",
 				type: FieldType.KeyValue,
 				default: JSON.stringify({ remove: "Remove", open: "Open" }),
+				validator: validatorObjectRecordNotNested,
 			},
 			useMarkdown: {
 				name: "Use Markdown",
@@ -260,6 +265,7 @@ export default {
 				type: FieldType.Number,
 				category: FieldCategory.Style,
 				default: "10",
+				validator: validatorPositiveNumber,
 			},
 			wrapText: {
 				name: "Wrap text",

diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
@@ -126,6 +126,7 @@ import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 import { WdsColor } from "@/wds/tokens";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description = "A component to display Pandas DataFrames.";
 const defaultDataframe = `data:application/vnd.apache.arrow.file;base64,QVJST1cxAAD/////iAMAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAAlAIAAAQAAAABAAAADAAAAAgADAAEAAgACAAAAGwCAAAEAAAAXwIAAHsiaW5kZXhfY29sdW1ucyI6IFsiX19pbmRleF9sZXZlbF8wX18iXSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogImNvbF9hIiwgImZpZWxkX25hbWUiOiAiY29sX2EiLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiY29sX2IiLCAiZmllbGRfbmFtZSI6ICJjb2xfYiIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogIl9faW5kZXhfbGV2ZWxfMF9fIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfV0sICJjcmVhdG9yIjogeyJsaWJyYXJ5IjogInB5YXJyb3ciLCAidmVyc2lvbiI6ICIxMi4wLjAifSwgInBhbmRhc192ZXJzaW9uIjogIjEuNS4zIn0ABgAAAHBhbmRhcwAAAwAAAIgAAABEAAAABAAAAJT///8AAAECEAAAACQAAAAEAAAAAAAAABEAAABfX2luZGV4X2xldmVsXzBfXwAAAJD///8AAAABQAAAAND///8AAAECEAAAABgAAAAEAAAAAAAAAAUAAABjb2xfYgAAAMD///8AAAABQAAAABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAhAAAAAgAAAABAAAAAAAAAAFAAAAY29sX2EAAAAIAAwACAAHAAgAAAAAAAABQAAAAAAAAAD/////6AAAABQAAAAAAAAADAAWAAYABQAIAAwADAAAAAADBAAYAAAAMAAAAAAAAAAAAAoAGAAMAAQACAAKAAAAfAAAABAAAAACAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAABAAAAAAAAAAAAAAAAMAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAIAAAAAAAAAAwAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAD/////AAAAABAAAAAMABQABgAIAAwAEAAMAAAAAAAEADwAAAAoAAAABAAAAAEAAACYAwAAAAAAAPAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAACgAMAAAABAAIAAoAAACUAgAABAAAAAEAAAAMAAAACAAMAAQACAAIAAAAbAIAAAQAAABfAgAAeyJpbmRleF9jb2x1bW5zIjogWyJfX2luZGV4X2xldmVsXzBfXyJdLCAiY29sdW1uX2luZGV4ZXMiOiBbeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiBudWxsLCAicGFuZGFzX3R5cGUiOiAidW5pY29kZSIsICJudW1weV90eXBlIjogIm9iamVjdCIsICJtZXRhZGF0YSI6IHsiZW5jb2RpbmciOiAiVVRGLTgifX1dLCAiY29sdW1ucyI6IFt7Im5hbWUiOiAiY29sX2EiLCAiZmllbGRfbmFtZSI6ICJjb2xfYSIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJjb2xfYiIsICJmaWVsZF9uYW1lIjogImNvbF9iIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiAiX19pbmRleF9sZXZlbF8wX18iLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjEyLjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMS41LjMifQAGAAAAcGFuZGFzAAADAAAAiAAAAEQAAAAEAAAAlP///wAAAQIQAAAAJAAAAAQAAAAAAAAAEQAAAF9faW5kZXhfbGV2ZWxfMF9fAAAAkP///wAAAAFAAAAA0P///wAAAQIQAAAAGAAAAAQAAAAAAAAABQAAAGNvbF9iAAAAwP///wAAAAFAAAAAEAAUAAgABgAHAAwAAAAQABAAAAAAAAECEAAAACAAAAAEAAAAAAAAAAUAAABjb2xfYQAAAAgADAAIAAcACAAAAAAAAAFAAAAAsAMAAEFSUk9XMQ==`;
@@ -187,6 +188,7 @@ export default {
 				type: FieldType.Number,
 				category: FieldCategory.Style,
 				default: "10",
+				validator: validatorPositiveNumber,
 			},
 			wrapText: {
 				name: "Wrap text",

diff --git a/src/ui/src/components/core/content/CoreIcon.vue b/src/ui/src/components/core/content/CoreIcon.vue
@@ -19,6 +19,7 @@
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 export default {
 	writer: {
@@ -39,6 +40,7 @@ export default {
 				desc: `Icon size in px`,
 				category: FieldCategory.Style,
 				default: "14",
+				validator: validatorPositiveNumber,
 			},
 			color: {
 				name: "Icon color",

diff --git a/src/ui/src/components/core/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -21,7 +21,10 @@ import {
 	FieldType,
 	WriterComponentDefinition,
 } from "@/writerTypes";
-import { validatorCssSize } from "@/constants/validators";
+import {
+	validatorCssSize,
+	validatorPositiveNumber,
+} from "@/constants/validators";
 
 const description = "A component to explore JSON data as a hierarchy.";
 
@@ -55,10 +58,7 @@ const definition: WriterComponentDefinition = {
 			desc: "Sets the initial viewing depth of the JSON tree hierarchy. Use -1 to display the full hierarchy.",
 			type: FieldType.Number,
 			init: "0",
-			validator: {
-				type: "number",
-				minimum: 0,
-			},
+			validator: validatorPositiveNumber,
 		},
 		hideRoot: {
 			name: "Hide root",

diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
@@ -40,6 +40,7 @@ export default {
 		description,
 		category: "Content",
 		fields: {
+			// TODO: validate
 			tags: {
 				name: "Tags",
 				desc: "Key-value object with tags. Must be a JSON string or a state reference to a dictionary.",

diff --git a/src/ui/src/components/core/content/CoreVideoPlayer.vue b/src/ui/src/components/core/content/CoreVideoPlayer.vue
@@ -26,6 +26,7 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { validatorUri } from "@/constants/validators";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -41,6 +42,7 @@ export default {
 				desc: "The URL of the video file. Alternatively, you can pass a file via state.",
 				default: "",
 				type: FieldType.Text,
+				validator: validatorUri,
 			},
 			controls: {
 				name: "Controls",

diff --git a/src/ui/src/components/core/embed/CoreIFrame.vue b/src/ui/src/components/core/embed/CoreIFrame.vue
@@ -16,6 +16,7 @@
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses, separatorColor } from "@/renderer/sharedStyleFields";
+import { validatorUri } from "@/constants/validators";
 
 const description = "A component to embed an external resource in an iframe.";
 
@@ -37,6 +38,7 @@ export default {
 				default: "",
 				desc: "A valid URL",
 				type: FieldType.Text,
+				validator: validatorUri,
 			},
 			separatorColor,
 			cssClasses,

diff --git a/src/ui/src/components/core/input/CoreDropdownInput.vue b/src/ui/src/components/core/input/CoreDropdownInput.vue
@@ -33,6 +33,7 @@ import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
 import { ComponentPublicInstance } from "vue";
+import { validatorObjectRecordNotNested } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select a single value from a list of options using a dropdown menu.";
@@ -60,6 +61,7 @@ export default {
 				desc: "Key-value object with options. Must be a JSON string or a state reference to a dictionary.",
 				type: FieldType.KeyValue,
 				default: JSON.stringify(defaultOptions, null, 2),
+				validator: validatorObjectRecordNotNested,
 			},
 			cssClasses,
 		},

diff --git a/src/ui/src/components/core/input/CoreRatingInput.vue b/src/ui/src/components/core/input/CoreRatingInput.vue
@@ -57,6 +57,7 @@ import {
 	primaryTextColor,
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to provide a rating.";
@@ -94,18 +95,33 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are 0 and 1.",
+				validator: {
+					type: "number",
+					minimum: 0,
+					maximum: 1,
+				},
 			},
 			maxValue: {
 				name: "Max value",
 				type: FieldType.Number,
 				default: "5",
 				desc: "Valid values are between 2 and 11.",
+				validator: {
+					type: "number",
+					minimum: 2,
+					maximum: 11,
+				},
 			},
 			valueStep: {
 				name: "Step",
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are between 0.25 and 1.",
+				validator: {
+					type: "number",
+					minimum: 0.25,
+					maximum: 1,
+				},
 			},
 			accentColor,
 			primaryTextColor,

diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -32,6 +32,7 @@ import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 import { WdsColor } from "@/wds/tokens";
 import { validatorObjectRecordNotNested } from "@/constants/validators";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select a single value from a searchable list of options.";
@@ -71,6 +72,7 @@ export default {
 				desc: "The maximum allowable number of selected options. Set to zero for unlimited.",
 				type: FieldType.Number,
 				default: "0",
+				validator: validatorPositiveNumber,
 			},
 			accentColor,
 			chipTextColor: {

diff --git a/src/ui/src/components/core/input/CoreSliderInput.vue b/src/ui/src/components/core/input/CoreSliderInput.vue
@@ -20,6 +20,7 @@ import { ComponentPublicInstance } from "vue";
 import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select numeric values using a slider with optional constraints like min, max, and step.";
@@ -59,6 +60,7 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				init: "1",
+				validator: validatorPositiveNumber,
 			},
 			accentColor,
 			popoverColor: {

diff --git a/src/ui/src/components/core/input/CoreSliderRangeInput.vue b/src/ui/src/components/core/input/CoreSliderRangeInput.vue
@@ -20,6 +20,7 @@ import { ComponentPublicInstance } from "vue";
 import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { validatorPositiveNumber } from "../../../constants/validators";
 
 const description =
 	"A user input component that allows users to select numeric values range using a range slider with optional constraints like min, max, and step.";
@@ -59,6 +60,7 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				init: "1",
+				validator: validatorPositiveNumber,
 			},
 			accentColor,
 			popoverColor: {

diff --git a/src/ui/src/components/core/input/CoreTextareaInput.vue b/src/ui/src/components/core/input/CoreTextareaInput.vue
@@ -31,6 +31,7 @@ import { FieldControl, FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to enter multi-line text values.";
@@ -63,6 +64,7 @@ export default {
 				type: FieldType.Number,
 				init: "5",
 				default: "5",
+				validator: validatorPositiveNumber,
 			},
 			cssClasses,
 		},

diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -48,6 +48,7 @@ import {
 	startCollapsed,
 	isCollapsible as isCollapsibleField,
 } from "@/renderer/sharedStyleFields";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A layout component that organizes its child components in columns. Must be inside a Column Container component.";
@@ -71,6 +72,7 @@ export default {
 				type: FieldType.Number,
 				desc: "Relative size when compared to other columns in the same container. A column of width 2 will be double the width of one with width 1.",
 				category: FieldCategory.Style,
+				validator: validatorPositiveNumber,
 			},
 			isSticky: {
 				name: "Sticky",

diff --git a/src/ui/src/components/core/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
@@ -73,6 +73,7 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
+import { validatorPositiveNumber } from "../../../constants/validators";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -106,18 +107,21 @@ export default {
 				default: "1",
 				type: FieldType.Number,
 				desc: "The current page number.",
+				validator: validatorPositiveNumber,
 			},
 			pageSize: {
 				name: "Page Size",
 				default: "10",
 				type: FieldType.Number,
 				desc: "The number of items per page.",
+				validator: validatorPositiveNumber,
 			},
 			totalItems: {
 				name: "Total Items",
 				default: "10",
 				type: FieldType.Number,
 				desc: "The total number of items",
+				validator: validatorPositiveNumber,
 			},
 			pageSizeOptions: {
 				name: "Page Size Options",

diff --git a/src/ui/src/components/core/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
@@ -10,6 +10,7 @@
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
+import { validatorPositiveNumber } from "@/constants/validators";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -31,6 +32,7 @@ export default {
 				desc: "How much time to wait between ticks. A tick is considered finished when its event is handled.",
 				default: "200",
 				type: FieldType.Number,
+				validator: validatorPositiveNumber,
 			},
 			isActive: {
 				name: "Active",

diff --git a/src/ui/src/components/core/other/CoreWebcamCapture.vue b/src/ui/src/components/core/other/CoreWebcamCapture.vue
@@ -38,6 +38,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to capture images using their webcam.";
@@ -69,6 +70,7 @@ export default {
 				default: "200",
 				desc: "Set to 0 for manual capture.",
 				type: FieldType.Number,
+				validator: validatorPositiveNumber,
 			},
 			buttonColor,
 			buttonTextColor,

diff --git a/src/ui/src/constants/validators.ts b/src/ui/src/constants/validators.ts
@@ -109,3 +109,8 @@ export const validatorPositiveNumber: SchemaObject = {
 	type: "number",
 	minimum: 0,
 };
+
+export const validatorUri = {
+	type: "string",
+	format: "uri",
+};