feat(colorPicker): add new component colorPicker

src/ColorPicker.ts

@@ -0,0 +1,9 @@
+import Char from "./Char";
+
+class ColorPicker extends Char {
+  get showText(): boolean {
+    return this.parsedWidgetProps.show_text ?? true;
+  }
+}
+
+export default ColorPicker;

src/WidgetFactory.ts

@@ -42,6 +42,7 @@ import JSONField from "./JSONField";
 import Email from "./Email";
 import Spinner from "./Spinner";
 import Carousel from "./Carousel";
+import ColorPicker from "./ColorPicker";
 
 class WidgetFactory {
   /**
@@ -188,6 +189,9 @@ class WidgetFactory {
       case "carousel":
         this._widgetClass = Carousel;
         break;
+      case "colorPicker":
+        this._widgetClass = ColorPicker;
+        break;
       default:
         break;
     }

src/index.ts

@@ -54,6 +54,7 @@ import Comments from "./Comments";
 import Email from "./Email";
 import Spinner from "./Spinner";
 import Carousel from "./Carousel";
+import ColorPicker from "./ColorPicker";
 
 import {
   Graph,
@@ -144,4 +145,5 @@ export {
   Email,
   Spinner,
   Carousel,
+  ColorPicker,
 };

src/spec/ColorPicker.spec.ts

@@ -0,0 +1,64 @@
+// src/spec/ColorPicker.spec.ts
+import WidgetFactory from "../WidgetFactory";
+import ColorPicker from "../ColorPicker";
+import { it, expect, describe } from "vitest";
+
+describe("A ColorPicker", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "colorPicker",
+    };
+
+    const widget = widgetFactory.createWidget("colorPicker", props);
+    expect(widget).toBeInstanceOf(ColorPicker);
+  });
+
+  it("should properly set label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "colorPicker",
+      string: "colorPicker caption",
+    };
+    const widget = widgetFactory.createWidget("colorPicker", props);
+
+    expect(widget.label).toBe("colorPicker caption");
+  });
+
+  describe("showText property", () => {
+    it("should show text by default", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "colorPicker",
+      };
+      const widget = widgetFactory.createWidget("colorPicker", props);
+
+      expect(widget.showText).toBe(true);
+    });
+    it("should show text when widget_props.showText is true", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "colorPicker",
+        widget_props: {
+          show_text: true,
+        },
+      };
+      const widget = widgetFactory.createWidget("colorPicker", props);
+
+      expect(widget.showText).toBe(true);
+    });
+
+    it("should not show text when widget_props.showText is false", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "colorPicker",
+        widget_props: {
+          show_text: false,
+        },
+      };
+      const widget = widgetFactory.createWidget("colorPicker", props);
+
+      expect(widget.showText).toBe(false);
+    });
+  });
+});