Questionnaire

const questionnaireFixture = {
  id: "questionnaire",
  shortcuts: "letters",
  items: [
    {
      name: "working-style",
      prompt: "How should this agent work?",
      description: "Choose the level of autonomy that fits this project.",
      required: true,
      multiple: false,
      choices: [
        {
          value: "guided",
          label: "Ask before acting",
          description: "Confirm each material change before continuing.",
        },
        {
          value: "routine",
          label: "Run routine steps",
          description: "Proceed independently for safe, reversible work.",
        },
        {
          value: "draft",
          label: "Draft only",
          description: "Prepare changes without applying them.",
        },
      ],
    },
    {
      name: "safeguards",
      prompt: "Which safeguards should it apply?",
      description: "Choose any that matter, or skip this step.",
      required: false,
      multiple: true,
      skippable: true,
      choices: [
        {
          value: "tests",
          label: "Run focused tests",
          description: "Verify changed behavior before handoff.",
        },
        {
          value: "docs",
          label: "Update documentation",
          description: "Keep usage guidance aligned with the change.",
        },
        {
          value: "review",
          label: "Request a review",
          description: "Pause for another person to inspect the result.",
        },
      ],
    },
    {
      name: "context",
      prompt: "What context should it know?",
      description: "Add one constraint, convention, or goal before submitting.",
      required: true,
      input: {
        label: "Project context",
        placeholder: "Constraints, conventions, or goals",
        type: "text",
      },
    },
  ],
} as const;
 
import { Questionnaire } from "@grassroot/ui-react";
 
export default function QuestionnaireDemo() {
  return (
    <div className="w-full max-w-xl">
      <Questionnaire items={questionnaireFixture.items} shortcuts={questionnaireFixture.shortcuts} />
    </div>
  );
}

<script setup lang="ts">
const questionnaireFixture = {
  id: "questionnaire",
  shortcuts: "letters",
  items: [
    {
      name: "working-style",
      prompt: "How should this agent work?",
      description: "Choose the level of autonomy that fits this project.",
      required: true,
      multiple: false,
      choices: [
        {
          value: "guided",
          label: "Ask before acting",
          description: "Confirm each material change before continuing.",
        },
        {
          value: "routine",
          label: "Run routine steps",
          description: "Proceed independently for safe, reversible work.",
        },
        {
          value: "draft",
          label: "Draft only",
          description: "Prepare changes without applying them.",
        },
      ],
    },
    {
      name: "safeguards",
      prompt: "Which safeguards should it apply?",
      description: "Choose any that matter, or skip this step.",
      required: false,
      multiple: true,
      skippable: true,
      choices: [
        {
          value: "tests",
          label: "Run focused tests",
          description: "Verify changed behavior before handoff.",
        },
        {
          value: "docs",
          label: "Update documentation",
          description: "Keep usage guidance aligned with the change.",
        },
        {
          value: "review",
          label: "Request a review",
          description: "Pause for another person to inspect the result.",
        },
      ],
    },
    {
      name: "context",
      prompt: "What context should it know?",
      description: "Add one constraint, convention, or goal before submitting.",
      required: true,
      input: {
        label: "Project context",
        placeholder: "Constraints, conventions, or goals",
        type: "text",
      },
    },
  ],
} as const;
 
import { Questionnaire } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="w-full max-w-xl">
    <Questionnaire
      :items="questionnaireFixture.items"
      :shortcuts="questionnaireFixture.shortcuts"
    />
  </div>
</template>

import { Component } from "@angular/core";
const questionnaireFixture = {
  id: "questionnaire",
  shortcuts: "letters",
  items: [
    {
      name: "working-style",
      prompt: "How should this agent work?",
      description: "Choose the level of autonomy that fits this project.",
      required: true,
      multiple: false,
      choices: [
        {
          value: "guided",
          label: "Ask before acting",
          description: "Confirm each material change before continuing.",
        },
        {
          value: "routine",
          label: "Run routine steps",
          description: "Proceed independently for safe, reversible work.",
        },
        {
          value: "draft",
          label: "Draft only",
          description: "Prepare changes without applying them.",
        },
      ],
    },
    {
      name: "safeguards",
      prompt: "Which safeguards should it apply?",
      description: "Choose any that matter, or skip this step.",
      required: false,
      multiple: true,
      skippable: true,
      choices: [
        {
          value: "tests",
          label: "Run focused tests",
          description: "Verify changed behavior before handoff.",
        },
        {
          value: "docs",
          label: "Update documentation",
          description: "Keep usage guidance aligned with the change.",
        },
        {
          value: "review",
          label: "Request a review",
          description: "Pause for another person to inspect the result.",
        },
      ],
    },
    {
      name: "context",
      prompt: "What context should it know?",
      description: "Add one constraint, convention, or goal before submitting.",
      required: true,
      input: {
        label: "Project context",
        placeholder: "Constraints, conventions, or goals",
        type: "text",
      },
    },
  ],
} as const;
 
import { GrassrootQuestionnaire } from "@grassroot/ui-angular/questionnaire";
 
@Component({
  selector: "app-questionnaire-demo",
  standalone: true,
  imports: [GrassrootQuestionnaire],
  host: { style: "display: contents" },
  template: `
    <div class="w-full max-w-xl">
      <grassroot-questionnaire [items]="fixture.items" [shortcuts]="fixture.shortcuts" />
    </div>
  `,
})
export class QuestionnaireDemoComponent {
  protected readonly fixture = questionnaireFixture;
}
 
export default QuestionnaireDemoComponent;

<script lang="ts">
  const questionnaireFixture = {
    id: "questionnaire",
    shortcuts: "letters",
    items: [
      {
        name: "working-style",
        prompt: "How should this agent work?",
        description: "Choose the level of autonomy that fits this project.",
        required: true,
        multiple: false,
        choices: [
          {
            value: "guided",
            label: "Ask before acting",
            description: "Confirm each material change before continuing.",
          },
          {
            value: "routine",
            label: "Run routine steps",
            description: "Proceed independently for safe, reversible work.",
          },
          {
            value: "draft",
            label: "Draft only",
            description: "Prepare changes without applying them.",
          },
        ],
      },
      {
        name: "safeguards",
        prompt: "Which safeguards should it apply?",
        description: "Choose any that matter, or skip this step.",
        required: false,
        multiple: true,
        skippable: true,
        choices: [
          {
            value: "tests",
            label: "Run focused tests",
            description: "Verify changed behavior before handoff.",
          },
          {
            value: "docs",
            label: "Update documentation",
            description: "Keep usage guidance aligned with the change.",
          },
          {
            value: "review",
            label: "Request a review",
            description: "Pause for another person to inspect the result.",
          },
        ],
      },
      {
        name: "context",
        prompt: "What context should it know?",
        description: "Add one constraint, convention, or goal before submitting.",
        required: true,
        input: {
          label: "Project context",
          placeholder: "Constraints, conventions, or goals",
          type: "text",
        },
      },
    ],
  } as const;
 
  import { Questionnaire } from "@grassroot/ui-svelte";
</script>
 
<div class="w-full max-w-xl">
  <Questionnaire items={questionnaireFixture.items} shortcuts={questionnaireFixture.shortcuts} />
</div>

/** @jsxImportSource solid-js */
const questionnaireFixture = {
  id: "questionnaire",
  shortcuts: "letters",
  items: [
    {
      name: "working-style",
      prompt: "How should this agent work?",
      description: "Choose the level of autonomy that fits this project.",
      required: true,
      multiple: false,
      choices: [
        {
          value: "guided",
          label: "Ask before acting",
          description: "Confirm each material change before continuing.",
        },
        {
          value: "routine",
          label: "Run routine steps",
          description: "Proceed independently for safe, reversible work.",
        },
        {
          value: "draft",
          label: "Draft only",
          description: "Prepare changes without applying them.",
        },
      ],
    },
    {
      name: "safeguards",
      prompt: "Which safeguards should it apply?",
      description: "Choose any that matter, or skip this step.",
      required: false,
      multiple: true,
      skippable: true,
      choices: [
        {
          value: "tests",
          label: "Run focused tests",
          description: "Verify changed behavior before handoff.",
        },
        {
          value: "docs",
          label: "Update documentation",
          description: "Keep usage guidance aligned with the change.",
        },
        {
          value: "review",
          label: "Request a review",
          description: "Pause for another person to inspect the result.",
        },
      ],
    },
    {
      name: "context",
      prompt: "What context should it know?",
      description: "Add one constraint, convention, or goal before submitting.",
      required: true,
      input: {
        label: "Project context",
        placeholder: "Constraints, conventions, or goals",
        type: "text",
      },
    },
  ],
} as const;
 
import { Questionnaire } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
 
export default function QuestionnaireDemo(): JSX.Element {
  return (
    <div class="w-full max-w-xl">
      <Questionnaire
        items={questionnaireFixture.items}
        shortcuts={questionnaireFixture.shortcuts}
      />
    </div>
  );
}