feat!: redesign quaire for 1.0

.gitignore

@@ -105,3 +105,5 @@ dist
 
 # Webstorm
 .idea
+
+.claude/plans*

eslint.config.mjs

@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint';
 
 export default defineConfig(
   {
-    ignores: ['**/.github/**', '**/coverage/**', '**/dist/**', '**/node_modules/**', 'commitlint.config.mjs'],
+    ignores: ['**/.claude/**', '**/.github/**', '**/coverage/**', '**/dist/**', '**/node_modules/**', 'commitlint.config.mjs'],
   },
   eslint.configs.recommended,
   tseslint.configs.recommended,
@@ -26,6 +26,7 @@ export default defineConfig(
         { selector: 'typeLike', format: ['PascalCase'], custom: { regex: '^I[A-Z]', match: false } },
       ],
       '@typescript-eslint/no-require-imports': 0,
+      '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true, argsIgnorePattern: '^_' }],
       'no-async-promise-executor': 0,
       'no-prototype-builtins': 0,
     },

examples/branched-and-merged-flow/branched-and-merged-flow.spec.ts

@@ -1,128 +1,48 @@
 import { Quaire } from '../../src';
-import { items, navigationItems } from './data';
+import { navigation, questions } from './data';
 
 describe('branched-and-merged-flow', () => {
   let Q: Quaire;
 
   beforeEach(() => {
-    Q = new Quaire({ items, navigationItems });
+    Q = new Quaire({ questions, navigation });
   });
 
-  test('should go through branch A (range slider) and merge into question 4', () => {
-    let activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 1');
-
+  test('should go through branch A (range) and merge into question 4', () => {
     Q.saveAnswer('option 1');
+    expect(Q.getActiveQuestion().title).toBe('Question 2');
 
-    activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 2');
-
-    Q.saveAnswer(activeQuestion.defaultValue);
-
-    activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 4');
+    Q.saveAnswer(Q.getActiveQuestion().defaultValue);
+    expect(Q.getActiveQuestion().title).toBe('Question 4');
 
     Q.saveAnswer('option 1');
-
-    activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 4');
-
-    expect(Q.getResult()).toEqual({
-      foo: 'option 1',
-      bar: [50, 75],
-      foobarbaz: 'option 1',
-    });
-
-    expect(Q.getNavigation()).toEqual([
-      {
-        active: false,
-        componentType: 'SINGLE_SELECT',
-        hasValue: true,
-        id: 1,
-        isValid: true,
-        name: 'Category 1',
-        subNavigation: [
-          {
-            active: false,
-            componentType: 'RANGE_SLIDER',
-            hasValue: true,
-            id: 2,
-            isValid: true,
-            name: 'Subcategory 1',
-            value: [50, 75],
-          },
-        ],
-        value: 'Option 1',
-      },
-      {
-        active: true,
-        componentType: 'SINGLE_SELECT',
-        hasValue: true,
-        id: 3,
-        isValid: true,
-        name: 'Category 2',
-        subNavigation: [],
-        value: 'Option 1',
-      },
+    expect(Q.getResult()).toEqual({ foo: 'option 1', bar: [50, 75], foobarbaz: 'option 1' });
+    expect(Q.getNavigation()).toMatchObject([
+      { id: 1, value: 'Option 1', children: [{ id: 2, value: [50, 75] }] },
+      { id: 3, value: 'Option 1', active: true },
     ]);
   });
 
   test('should go through branch B (input) and merge into question 4', () => {
-    let activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 1');
-
     Q.saveAnswer('option 2');
+    expect(Q.getActiveQuestion().title).toBe('Question 3');
 
-    activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 3');
-
-    Q.saveAnswer(activeQuestion.defaultValue);
-
-    activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 4');
+    Q.saveAnswer(Q.getActiveQuestion().defaultValue);
+    expect(Q.getActiveQuestion().title).toBe('Question 4');
 
     Q.saveAnswer('option 1');
+    expect(Q.getResult()).toEqual({ foo: 'option 2', baz: 'user input', foobarbaz: 'option 1' });
+    expect(Q.getNavigation()).toMatchObject([{ id: 1, children: [{ id: 2, value: 'user input' }] }, { id: 3 }]);
+  });
 
-    activeQuestion = Q.getActiveQuestion();
-    expect(activeQuestion.question).toBe('Question 4');
-
-    expect(Q.getResult()).toEqual({
-      foo: 'option 2',
-      baz: 'user input',
-      foobarbaz: 'option 1',
-    });
+  test('should remove the answers of branch A when the user switches to branch B', () => {
+    Q.saveAnswer('option 1');
+    Q.saveAnswer([20, 30]);
+    Q.saveAnswer('option 2');
+    Q.goTo(1);
+    Q.saveAnswer('option 2');
 
-    expect(Q.getNavigation()).toEqual([
-      {
-        active: false,
-        componentType: 'SINGLE_SELECT',
-        hasValue: true,
-        id: 1,
-        isValid: true,
-        name: 'Category 1',
-        subNavigation: [
-          {
-            active: false,
-            componentType: 'INPUT',
-            hasValue: true,
-            id: 2,
-            isValid: true,
-            name: 'Subcategory 1',
-            value: 'user input',
-          },
-        ],
-        value: 'Option 2',
-      },
-      {
-        active: true,
-        componentType: 'SINGLE_SELECT',
-        hasValue: true,
-        id: 3,
-        isValid: true,
-        name: 'Category 2',
-        subNavigation: [],
-        value: 'Option 1',
-      },
-    ]);
+    expect(Q.getActiveQuestion().title).toBe('Question 3');
+    expect(Q.getResult()).toEqual({ foo: 'option 2', foobarbaz: 'option 2' });
   });
 });

examples/branched-and-merged-flow/data.ts

@@ -1,95 +1,53 @@
-import { QuaireComponentType, QuaireItem, QuaireNavigationItem } from '../../src';
+import type { QuaireNavigationDefinition, QuaireQuestionDefinition } from '../../src';
 
-export const items: Array<QuaireItem> = [
+export const questions: Array<QuaireQuestionDefinition> = [
   {
-    id: 1, // Branch A/B
-    resultProperty: 'foo',
-    navigationItemId: 1,
-    dependsOnResultProperties: [],
-    componentType: QuaireComponentType.SINGLE_SELECT,
-    question: 'Question 1',
-    description: 'Description 1',
+    id: 1,
+    type: 'SINGLE_SELECT',
+    key: 'foo',
+    title: 'Question 1',
+    navigationId: 1,
     required: true,
-    selectOptions: [
-      {
-        label: 'Option 1',
-        value: 'option 1',
-        nextItemId: 2, // branch A
-      },
-      {
-        label: 'Option 2',
-        value: 'option 2',
-        nextItemId: 3, // branch B
-      },
+    options: [
+      { label: 'Option 1', value: 'option 1', next: 2 }, // branch A
+      { label: 'Option 2', value: 'option 2', next: 3 }, // branch B
     ],
   },
   {
     id: 2, // branch A
-    resultProperty: 'bar',
-    navigationItemId: 2,
-    dependsOnResultProperties: [],
-    componentType: QuaireComponentType.RANGE_SLIDER,
-    question: 'Question 2',
-    description: 'Description 2',
-    required: false,
-    rangeOption: {
-      range: [0, 100],
-      nextItemId: 4, // Branch A/B
-    },
+    type: 'RANGE',
+    key: 'bar',
+    title: 'Question 2',
+    navigationId: 2,
+    min: 0,
+    max: 100,
     defaultValue: [50, 75],
+    next: 4,
   },
   {
     id: 3, // branch B
-    resultProperty: 'baz',
-    navigationItemId: 2,
-    dependsOnResultProperties: [],
-    componentType: QuaireComponentType.INPUT,
-    question: 'Question 3',
-    description: 'Description 3',
-    required: false,
-    inputOption: {
-      type: 'text',
-      placeholder: 'baz',
-      nextItemId: 4, // Branch A/B
-    },
+    type: 'INPUT',
+    key: 'baz',
+    title: 'Question 3',
+    navigationId: 2,
     defaultValue: 'user input',
+    next: 4,
   },
   {
-    id: 4, // Branch A/B
-    resultProperty: 'foobarbaz',
-    navigationItemId: 3,
-    dependsOnResultProperties: [],
-    componentType: QuaireComponentType.SINGLE_SELECT,
-    question: 'Question 4',
-    description: 'Description 4',
-    required: false,
-    selectOptions: [
-      {
-        label: 'Option 1',
-        value: 'option 1',
-      },
-      {
-        label: 'Option 2',
-        value: 'option 2',
-      },
+    id: 4, // both branches merge here
+    type: 'SINGLE_SELECT',
+    key: 'foobarbaz',
+    title: 'Question 4',
+    navigationId: 3,
+    options: [
+      { label: 'Option 1', value: 'option 1' },
+      { label: 'Option 2', value: 'option 2' },
     ],
   },
 ];
 
-export const navigationItems: Array<QuaireNavigationItem> = [
-  {
-    id: 1,
-    parentId: null,
-    name: 'Category 1',
-  },
-  {
-    id: 2,
-    parentId: 1,
-    name: 'Subcategory 1',
-  },
-  {
-    id: 3,
-    parentId: null,
-    name: 'Category 2',
-  },
+export const navigation: Array<QuaireNavigationDefinition> = [
+  { id: 1, title: 'Category 1' },
+  { id: 2, parentId: 1, title: 'Subcategory 1' },
+  { id: 3, title: 'Category 2' },
 ];

examples/conditional-branching/conditional-branching.spec.ts

@@ -0,0 +1,49 @@
+import { Quaire, validateDefinition } from '../../src';
+import { questions } from './data';
+
+describe('conditional-branching', () => {
+  let Q: Quaire;
+
+  beforeEach(() => {
+    Q = new Quaire({ questions });
+  });
+
+  test('should have a valid definition', () => {
+    expect(validateDefinition({ questions })).toEqual([]);
+  });
+
+  test('should end the flow for minors without consent', () => {
+    Q.saveAnswer(15);
+    expect(Q.getActiveQuestion().id).toBe('consent');
+
+    Q.saveAnswer(false);
+    expect(Q.isComplete()).toBe(true);
+    expect(Q.getState().path).toEqual(['age', 'consent']);
+  });
+
+  test('should ask minors with consent about their interests', () => {
+    Q.saveAnswer(15);
+    Q.saveAnswer(true);
+
+    expect(Q.getActiveQuestion().id).toBe('interests');
+  });
+
+  test('should ask adults about their employment and income', () => {
+    Q.saveAnswer(30);
+    Q.saveAnswer('employed');
+    Q.saveAnswer(120000);
+    Q.saveAnswer(['music', 'travel']);
+
+    expect(Q.getActiveQuestion()).toMatchObject({ id: 'destination', placeholder: 'Maldives' });
+    expect(Q.getState().path).toEqual(['age', 'employment', 'income', 'interests', 'destination']);
+  });
+
+  test('should skip the income for students', () => {
+    Q.saveAnswer(21);
+    Q.saveAnswer('student');
+    Q.saveAnswer(['sports']);
+
+    expect(Q.isComplete()).toBe(true);
+    expect(Q.getResult()).toEqual({ age: 21, employment: 'student', interests: ['sports'] });
+  });
+});