@petrarca/sonnet-playground 0.8.0 → 0.9.0

package/dist/chunk-VKZ2RJFL.js

@@ -0,0 +1,647 @@
+import {
+  CWE,
+  HTTP_STATUS,
+  PLAYGROUND_TERMINOLOGY,
+  SPDX
+} from "./chunk-WR74TMW4.js";
+import {
+  DesignerControls
+} from "./chunk-QKFQI4VX.js";
+
+// src/pages/PlayQuestionnaireDesigner.tsx
+import { useState } from "react";
+import {
+  QuestionnaireDesigner,
+  SchemaDesigner
+} from "@petrarca/sonnet-schema-designer";
+import { ViewSwitch } from "@petrarca/sonnet-ui";
+import { ClipboardList, PencilRuler } from "lucide-react";
+import { TerminologyProvider } from "@petrarca/sonnet-core/terminology";
+
+// src/pages/questionnaires/examples.ts
+import {
+  CODING_TYPE_ID,
+  QUANTITY_TYPE_ID
+} from "@petrarca/sonnet-core/schema";
+import { CHOICE_WITH_TEXT_WIDGET } from "@petrarca/sonnet-schema-designer";
+var FEEDBACK = {
+  schema: {
+    title: "Event feedback",
+    description: "Tell us how the meetup went.",
+    type: "object",
+    required: ["name"],
+    properties: {
+      name: { type: "string", title: "Your name" },
+      rating: {
+        type: "string",
+        title: "How was it?",
+        enum: ["poor", "fair", "good", "excellent"]
+      },
+      again: { type: "boolean", title: "I would come again" },
+      comments: { type: "string", title: "Comments" }
+    }
+  },
+  uiSchema: {
+    rating: {
+      "x-ui-widget": "radio",
+      "x-ui-options": {
+        enumNames: {
+          poor: "Poor",
+          fair: "Fair",
+          good: "Good",
+          excellent: "Excellent"
+        }
+      }
+    },
+    comments: { "x-ui-widget": "textarea" }
+  }
+};
+var BUG_REPORT = {
+  schema: {
+    title: "Bug report",
+    type: "object",
+    properties: {
+      reporter: {
+        type: "object",
+        title: "Reporter",
+        required: ["name"],
+        properties: {
+          name: { type: "string", title: "Name" },
+          email: {
+            type: "string",
+            title: "Email",
+            pattern: "^[^@\\s]+@[^@\\s]+$"
+          }
+        }
+      },
+      issue: {
+        type: "object",
+        title: "Issue",
+        required: ["summary"],
+        properties: {
+          summary: { type: "string", title: "Summary", maxLength: 120 },
+          severity: {
+            type: "string",
+            title: "Severity",
+            enum: ["low", "medium", "high", "critical"]
+          },
+          status: {
+            $ref: CODING_TYPE_ID,
+            title: "Error response, if any",
+            "x-binding": { system: HTTP_STATUS, strength: "required" }
+          },
+          browser: {
+            type: "object",
+            title: "Browser",
+            properties: {
+              choice: {
+                type: "string",
+                enum: ["chrome", "firefox", "safari", "edge"]
+              },
+              text: { type: "string", title: "Version" }
+            }
+          },
+          steps: {
+            type: "array",
+            title: "Steps to reproduce",
+            items: { type: "string" }
+          },
+          production: { type: "boolean", title: "Happens in production" }
+        },
+        allOf: [
+          {
+            if: {
+              properties: { production: { const: true } },
+              required: ["production"]
+            },
+            then: {
+              properties: {
+                since: {
+                  type: "string",
+                  format: "date",
+                  title: "Seen in production since"
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  uiSchema: {
+    issue: {
+      "x-ui-fields": {
+        severity: {
+          "x-ui-widget": "radio",
+          "x-ui-options": {
+            enumNames: {
+              low: "Low",
+              medium: "Medium",
+              high: "High",
+              critical: "Critical"
+            }
+          }
+        },
+        browser: {
+          "x-ui-widget": CHOICE_WITH_TEXT_WIDGET,
+          "x-ui-fields": {
+            choice: {
+              "x-ui-options": {
+                enumNames: {
+                  chrome: "Chrome",
+                  firefox: "Firefox",
+                  safari: "Safari",
+                  edge: "Edge"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+var REASONS = {
+  type: "object",
+  title: "Not answered",
+  additionalProperties: {
+    type: "string",
+    enum: ["not_defined", "unknown", "none"]
+  },
+  "x-ui-widget": "absent-reasons",
+  "x-ui-options": {
+    enumNames: {
+      not_defined: "Not defined",
+      unknown: "Unknown",
+      none: "None"
+    },
+    immediate: true
+  }
+};
+var requiredUnlessReason = (key) => ({
+  if: {
+    not: {
+      properties: { absent: { required: [key] } },
+      required: ["absent"]
+    }
+  },
+  then: { required: [key] }
+});
+var ASSESSMENT_SCHEMA = {
+  title: "Product assessment",
+  description: "Facts and targets about the product that its source code cannot show. Where you have no answer, give a reason.",
+  type: "object",
+  properties: {
+    overview: {
+      type: "object",
+      title: "Product overview",
+      properties: {
+        intro: {
+          type: "null",
+          title: "About the product",
+          description: "State facts and targets, never a verdict."
+        },
+        product_type: {
+          type: "string",
+          title: "Product type",
+          description: "What is the product, in one sentence?",
+          maxLength: 200
+        },
+        industry: {
+          type: "object",
+          title: "Industry",
+          properties: {
+            choice: {
+              type: "string",
+              enum: ["finance", "logistics", "retail", "public", "other"]
+            }
+          },
+          allOf: [
+            {
+              if: {
+                properties: { choice: { const: "other" } },
+                required: ["choice"]
+              },
+              then: {
+                properties: {
+                  text: { type: "string", title: "Please describe" }
+                },
+                required: ["text"]
+              }
+            }
+          ]
+        },
+        users: {
+          type: "string",
+          title: "Users",
+          description: "Who works with the product -- the roles?"
+        },
+        user_count: {
+          type: "integer",
+          title: "People working with it, roughly",
+          minimum: 0
+        },
+        languages: {
+          type: "array",
+          title: "Languages",
+          uniqueItems: true,
+          items: { type: "string", enum: ["en", "de", "fr", "es"] }
+        },
+        license: {
+          title: "License",
+          anyOf: [{ $ref: CODING_TYPE_ID }, { type: "string" }],
+          "x-binding": { system: SPDX, strength: "extensible" }
+        },
+        absent: REASONS
+      },
+      allOf: [requiredUnlessReason("product_type")]
+    },
+    maturity: {
+      type: "object",
+      title: "Maturity",
+      properties: {
+        lifecycle: {
+          type: "string",
+          title: "Lifecycle stage",
+          enum: ["introduction", "growth", "maturity", "decline", "retired"]
+        },
+        phase: {
+          type: "object",
+          title: "Development phase",
+          properties: {
+            choice: {
+              type: "string",
+              enum: ["features", "maintenance", "modernization", "end_of_life"]
+            },
+            text: { type: "string", title: "Details" }
+          }
+        },
+        ai_tools: { type: "boolean", title: "Teams use AI coding tools" },
+        goals: {
+          type: "array",
+          title: "Key goals for the next years",
+          items: { type: "string" }
+        },
+        absent: REASONS
+      },
+      allOf: [requiredUnlessReason("lifecycle")]
+    },
+    architecture: {
+      type: "object",
+      title: "Architecture boundary",
+      properties: {
+        deployment: {
+          type: "string",
+          title: "Deployment model",
+          enum: ["cloud_native", "hosted", "on_premises"]
+        },
+        tenancy: {
+          type: "string",
+          title: "Tenancy",
+          enum: ["multi_tenant", "single_tenant"]
+        },
+        absent: REASONS
+      },
+      allOf: [
+        requiredUnlessReason("deployment"),
+        {
+          if: {
+            properties: { deployment: { not: { const: "cloud_native" } } },
+            required: ["deployment"]
+          },
+          then: {
+            properties: {
+              planned_change: {
+                type: "string",
+                format: "date",
+                title: "Planned move to the cloud, by"
+              }
+            }
+          }
+        }
+      ]
+    },
+    integrations: {
+      type: "array",
+      title: "External integrations",
+      description: "One entry per system the product must connect to.",
+      items: {
+        type: "object",
+        properties: {
+          system: { type: "string", title: "System" },
+          interface: { type: "string", title: "Interface or standard" }
+        }
+      }
+    },
+    targets: {
+      type: "object",
+      title: "Operational targets",
+      properties: {
+        users_per_customer: {
+          type: "object",
+          title: "Users per customer",
+          properties: {
+            today: { type: "integer", title: "Today" },
+            target: { type: "integer", title: "Target" }
+          },
+          "x-ui-layout": { rows: [{ fields: ["today", "target"] }] }
+        },
+        response_time: {
+          $ref: QUANTITY_TYPE_ID,
+          title: "Response time of the main actions",
+          properties: { unit: { enum: ["ms", "s"] } }
+        },
+        availability: {
+          type: "number",
+          title: "Availability, in percent",
+          minimum: 0,
+          maximum: 100
+        },
+        absent: REASONS
+      }
+    },
+    security: {
+      type: "object",
+      title: "Security",
+      properties: {
+        weakness: {
+          $ref: CODING_TYPE_ID,
+          title: "Weakness found most often",
+          "x-binding": { system: CWE, strength: "required" }
+        },
+        error_status: {
+          type: "string",
+          title: "Most frequent error response",
+          "x-binding": { system: HTTP_STATUS, strength: "required" }
+        },
+        absent: REASONS
+      },
+      allOf: [
+        {
+          if: {
+            properties: {
+              weakness: {
+                type: "object",
+                properties: {
+                  system: { const: CWE },
+                  code: { const: "CWE-89" }
+                },
+                required: ["code"]
+              }
+            },
+            required: ["weakness"]
+          },
+          then: {
+            properties: {
+              sql_prevention: {
+                type: "string",
+                title: "How is SQL injection prevented?"
+              }
+            }
+          }
+        }
+      ]
+    },
+    questions: {
+      type: "array",
+      title: "Specific questions",
+      description: "One question per entry.",
+      items: { type: "string" }
+    },
+    reviewed_by: {
+      title: "Reviewed by",
+      oneOf: [
+        { type: "string", title: "Name" },
+        {
+          type: "object",
+          title: "Team",
+          properties: { name: { type: "string" } }
+        }
+      ]
+    },
+    absent: REASONS
+  }
+};
+var ASSESSMENT_UI_SCHEMA = {
+  overview: {
+    "x-ui-fields": {
+      product_type: { "x-ui-placeholder": "A web application for ..." },
+      industry: {
+        "x-ui-widget": CHOICE_WITH_TEXT_WIDGET,
+        "x-ui-fields": {
+          choice: {
+            "x-ui-options": {
+              enumNames: {
+                finance: "Finance",
+                logistics: "Logistics",
+                retail: "Retail",
+                public: "Public sector",
+                other: "Other"
+              }
+            }
+          }
+        }
+      },
+      users: { "x-ui-widget": "textarea" },
+      languages: {
+        "x-ui-widget": "checkbox-group",
+        "x-ui-options": {
+          enumNames: {
+            en: "English",
+            de: "German",
+            fr: "French",
+            es: "Spanish"
+          }
+        }
+      }
+    }
+  },
+  maturity: {
+    "x-ui-fields": {
+      lifecycle: {
+        "x-ui-options": {
+          enumNames: {
+            introduction: "Introduction",
+            growth: "Growth",
+            maturity: "Maturity",
+            decline: "Decline",
+            retired: "Retired"
+          }
+        }
+      },
+      phase: {
+        "x-ui-widget": CHOICE_WITH_TEXT_WIDGET,
+        "x-ui-fields": {
+          choice: {
+            "x-ui-options": {
+              enumNames: {
+                features: "Feature development",
+                maintenance: "Maintenance",
+                modernization: "Modernization",
+                end_of_life: "End of life"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  architecture: {
+    "x-ui-fields": {
+      deployment: {
+        "x-ui-widget": "radio",
+        "x-ui-options": {
+          enumNames: {
+            cloud_native: "Cloud-native",
+            hosted: "Hosted",
+            on_premises: "On-premises"
+          }
+        }
+      },
+      tenancy: {
+        "x-ui-widget": "radio",
+        "x-ui-options": {
+          enumNames: {
+            multi_tenant: "Customers share one installation",
+            single_tenant: "One installation per customer"
+          }
+        }
+      }
+    }
+  },
+  targets: {
+    "x-ui-fields": {
+      response_time: {
+        "x-ui-options": {
+          units: [
+            { value: "ms", label: "ms" },
+            { value: "s", label: "s" }
+          ]
+        }
+      }
+    }
+  }
+};
+var ASSESSMENT = {
+  schema: ASSESSMENT_SCHEMA,
+  uiSchema: ASSESSMENT_UI_SCHEMA
+};
+
+// src/pages/PlayQuestionnaireDesigner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EXAMPLES = {
+  simple: { label: "Simple -- event feedback", ...FEEDBACK },
+  medium: { label: "Medium -- bug report", ...BUG_REPORT },
+  advanced: { label: "Advanced -- product assessment", ...ASSESSMENT }
+};
+var PROFILES = {
+  full: {
+    label: "Full",
+    description: "Every capability: all answer types, sections, show-if, reasons for no answer, the way to the schema designer.",
+    capabilities: { previews: ["form", "json", "capabilities"] }
+  },
+  standard: {
+    label: "Standard",
+    description: "Sections and show-if; no reasons for no answer, no way to the schema designer.",
+    capabilities: {
+      reasons: false,
+      switchToDesigner: false,
+      previews: ["form", "json", "capabilities"]
+    }
+  },
+  simple: {
+    label: "Simple",
+    description: "A few answer types; no sections, no logic, no reasons -- parts beyond it stay locked.",
+    capabilities: {
+      answerTypes: ["shortText", "longText", "yesNo", "singleChoice", "date"],
+      sections: false,
+      logic: false,
+      reasons: false,
+      previews: ["form", "capabilities"]
+    }
+  },
+  structure: {
+    label: "Structure only (no preview)",
+    description: "Question list and panel only; the centre preview is hidden.",
+    capabilities: { previews: [] }
+  }
+};
+function PlayQuestionnaireDesigner() {
+  const [exampleKey, setExampleKey] = useState("advanced");
+  const [profileKey, setProfileKey] = useState("full");
+  const [schema, setSchema] = useState(EXAMPLES.advanced.schema);
+  const [uiSchema, setUiSchema] = useState(
+    EXAMPLES.advanced.uiSchema
+  );
+  const selectExample = (key) => {
+    setExampleKey(key);
+    setSchema(EXAMPLES[key].schema);
+    setUiSchema(EXAMPLES[key].uiSchema);
+  };
+  const [designer, setDesigner] = useState("questionnaire");
+  const onChange = (nextSchema, nextUiSchema) => {
+    setSchema(nextSchema);
+    setUiSchema(nextUiSchema);
+  };
+  return /* @__PURE__ */ jsx(TerminologyProvider, { service: PLAYGROUND_TERMINOLOGY, children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-3 h-[calc(100vh-8rem)]", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Questionnaire Designer" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Author a questionnaire as sections and questions. It edits the same JSON Schema and uiSchema as the Schema Designer, and keeps every part it does not understand as it is -- switch between the two and back." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DesignerControls,
+      {
+        examples: EXAMPLES,
+        example: exampleKey,
+        onExample: selectExample,
+        profiles: PROFILES,
+        profile: profileKey,
+        onProfile: setProfileKey,
+        right: /* @__PURE__ */ jsx(
+          ViewSwitch,
+          {
+            label: "Designer",
+            value: designer,
+            onChange: setDesigner,
+            options: [
+              {
+                value: "questionnaire",
+                label: "Questionnaire designer",
+                icon: /* @__PURE__ */ jsx(ClipboardList, {})
+              },
+              {
+                value: "schema",
+                label: "Schema designer",
+                icon: /* @__PURE__ */ jsx(PencilRuler, {})
+              }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0 }, children: designer === "questionnaire" ? /* @__PURE__ */ jsx(
+      QuestionnaireDesigner,
+      {
+        schema,
+        uiSchema,
+        onChange,
+        capabilities: PROFILES[profileKey].capabilities,
+        onOpenSchemaDesigner: () => setDesigner("schema")
+      },
+      `${exampleKey}-${profileKey}`
+    ) : /* @__PURE__ */ jsx(
+      SchemaDesigner,
+      {
+        schema,
+        uiSchema,
+        onChange
+      },
+      exampleKey
+    ) })
+  ] }) });
+}
+
+export {
+  PlayQuestionnaireDesigner
+};
+//# sourceMappingURL=chunk-VKZ2RJFL.js.map