@media-quest/builder 0.0.12 → 0.0.14

package/package.json

@@ -1,18 +1,15 @@
 {
   "name": "@media-quest/builder",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Builder library for Media-quest schemas",
-  "main": "dist/public-api.js",
-  "module": "dist/public-api.mjs",
-  "types": "dist/public-api.d.ts",
+  "main": "src/public-api.ts",
   "license": "MIT",
   "scripts": {
     "tsc:check:builder": "tsc --watch --noEmit",
     "clean": "rimraf dist",
-    "build": "npm run clean && tsup src/public-api.ts --sourcemap inline --format cjs,esm --dts",
-    "prepublishOnly": "npm run build"
+    "buildXXX": "npm run clean && tsup src/public-api.ts --sourcemap inline --format cjs,esm --dts"
   },
   "dependencies": {
-    "@media-quest/engine": "0.0.12"
+    "@media-quest/engine": "0.0.14"
   }
 }

package/src/BuilderMainVideoDto.ts

@@ -1,10 +1,10 @@
 import { VideoFile } from "./media-files";
 
 export interface BuilderMainVideoDto {
-    readonly kind: "main-video";
-    readonly file: VideoFile;
-    mode: "autoplay" | "required" | "optional";
-    preDelay: number;
-    volume: number;
-    controls: boolean;
+  readonly kind: "main-video";
+  readonly file: VideoFile;
+  mode: "autoplay" | "required" | "optional" | "gif-mode";
+  preDelay: number;
+  volume: number;
+  controls: boolean;
 }

package/src/theme/IDefaultTheme.ts

@@ -37,15 +37,21 @@ export interface IDefaultTheme {
   responseButtons: BuilderOptionTheme;
   nextButtonTheme: BuilderOptionTheme;
   // mainQuestionText: BuilderTextTheme;
-  dontKnowButtonTheme?: BuilderOptionTheme;
+  // dontKnowButtonTheme: BuilderOptionTheme;
   buttonThemes?: Array<BuilderOptionTheme>;
 }
 
 export interface BuilderOptionTheme {
   name: string;
-  div: CssTheme;
+  normal: ButtonTheme;
+  dontKnow: ButtonTheme;
+}
+
+interface ButtonTheme {
+  btn: CssTheme;
+  divider: PStyle;
   text1: PStyle;
-  text2?: CssTheme;
+  text2: PStyle;
 }
 
 namespace BuilderOptionTheme {
@@ -65,38 +71,80 @@ namespace BuilderOptionTheme {
   const FONT_WEIGHT: DStyle["fontWeight"] = 600;
   const FONT_SIZE: DCss.Px["value"] = 35;
 
-  export const blueButton = (): BuilderOptionTheme => ({
-    name: "blue-button-theme",
-    div: {
-      css: {
-        backgroundColor: BLUE,
-        borderColor: BLUE,
-        textColor: WHITE,
-        fontSize: { _unit: "px", value: FONT_SIZE },
-        borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
-        borderStyle: BTN_BORDER_STYLE,
-        borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
-        padding: { _unit: "px", value: 40 },
-        h: BTN_HEIGHT,
-        w: BTN_WIDTH,
-        x: 10,
-        y: 8,
-        textAlign: "center",
+  export const blueButton = (): BuilderOptionTheme => {
+    const optionTheme: BuilderOptionTheme = {
+      name: "blue-button-theme",
+      normal: {
+        btn: {
+          css: {
+            backgroundColor: BLUE,
+            borderColor: BLUE,
+            textColor: WHITE,
+            fontSize: { _unit: "px", value: FONT_SIZE },
+            borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+            borderStyle: BTN_BORDER_STYLE,
+            borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
+            padding: { _unit: "px", value: 40 },
+            h: BTN_HEIGHT,
+            w: BTN_WIDTH,
+            x: 10,
+            y: 8,
+            textAlign: "center",
+          },
+          cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+          cssEnabled: { opacity: 1, cursor: "pointer" },
+        },
+        divider: {},
+        text1: {
+          y: 50,
+          transform: "translate(0%, 50%)",
+          textColor: WHITE,
+          fontSize: { _unit: "px", value: FONT_SIZE },
+          w: 84,
+          x: 8,
+          fontWeight: FONT_WEIGHT,
+          textAlign: "center",
+        },
+        text2: {},
       },
-      cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
-      cssEnabled: { opacity: 1, cursor: "pointer" },
-    },
-    text1: {
-      y: 50,
-      transform: "translate(0%, 50%)",
-      textColor: WHITE,
-      fontSize: { _unit: "px", value: FONT_SIZE },
-      w: 84,
-      x: 8,
-      fontWeight: FONT_WEIGHT,
-      textAlign: "center",
-    },
-  });
+
+      dontKnow: {
+        btn: {
+          css: {
+            backgroundColor: WHITE,
+            borderColor: LIGHT_BLUE,
+            textColor: BLUE,
+            fontSize: { _unit: "px", value: FONT_SIZE },
+            borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+            borderStyle: BTN_BORDER_STYLE,
+            borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
+            padding: { _unit: "px", value: 40 },
+            h: BTN_HEIGHT,
+            w: BTN_SHORT_WIDTH,
+            x: 10,
+            y: 8,
+            textAlign: "center",
+          },
+          cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+          cssEnabled: { opacity: 1, cursor: "pointer" },
+        },
+        text1: {
+          y: 50,
+          transform: "translate(0%, 50%)",
+          textColor: BLUE,
+          fontSize: { _unit: "px", value: FONT_SIZE },
+          w: 84,
+          x: 8,
+          fontWeight: FONT_WEIGHT,
+          textAlign: "center",
+        },
+        text2: {},
+        divider: {},
+      },
+    };
+
+    return optionTheme;
+  };
 }
 
 export const DefaultTheme: IDefaultTheme = {

package/src/theme/default-theme-compiler.ts

@@ -375,7 +375,7 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
     const factsCollected: Fact[] = [];
     const { id, value, label } = buttonDto;
 
-    const { div, text1 } = DefaultTheme.responseButtons;
+    // const { div, text1, dontKnow } = DefaultTheme.responseButtons;
     if (options.kind === "response-button") {
       const fact: Fact = {
         kind: "numeric-fact",
@@ -396,6 +396,7 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
         factsCollected,
       },
     };
+    const btnStyles = value === 9 ? DefaultTheme.responseButtons.dontKnow : DefaultTheme.responseButtons.normal;
     const btn: DDivDto = {
       id,
       _tag: "div",
@@ -404,17 +405,17 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
           _tag: "p",
           id: U.randomString(30),
           text: label,
-          style: text1,
+          style: btnStyles.text1,
         },
       ],
       onStateChange: [
         {
           queryName: DStateProps._Queries.disableUserInputQuery.name,
-          whenFalse: [...ThemeUtils.enableClickCommands(id, div.cssEnabled)],
-          whenTrue: [...ThemeUtils.disableClickCommands(id, div.cssDisabled)],
+          whenFalse: [...ThemeUtils.enableClickCommands(id, btnStyles.btn.cssEnabled)],
+          whenTrue: [...ThemeUtils.disableClickCommands(id, btnStyles.btn.cssDisabled)],
         },
       ],
-      style: { ...div.css, ...div.cssEnabled },
+      style: { ...btnStyles.btn.css, ...btnStyles.btn.cssEnabled },
       onClick: [onClickHandler],
     };
     if (options.kind === "next-button") {

package/tsconfig.json

@@ -9,6 +9,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "rootDir": "./src",
+    "composite": true,
     "outDir": "./dist"
   },
 }