eat-js-sdk 1.4.6 → 2.0.0

package/.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

package/.prettierrc

@@ -0,0 +1,22 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 120,
+  "quoteProps": "as-needed",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,121 @@
+# 2.0.0
+
+## 1.4.0
+
+- [EAT-179](https://cambridgeorg.atlassian.net/browse/EAT-179) As a student/teacher I want to open an image stimulus within a question item in an image viewer
+
+- [EAT-350](https://cambridgeorg.atlassian.net/browse/EAT-350) As a student/teacher I want to open image answers within MCQ items in an image viewer
+
+- [EAT-353](https://cambridgeorg.atlassian.net/browse/EAT-353) As an author I want to view my MCQs with image answers using an image viewer when creating the item/As a teacher I want to preview MCQs with image answers using an image viewer before assigning
+
+- [EAT-354](https://cambridgeorg.atlassian.net/browse/EAT-354) As an author I want to view my interactions with an image stimulus using an image viewer when creating the item/As a teacher I want to preview my interactions with an image stimulus using an image viewer before assigning
+
+## 1.3.0
+
+- [EAT-221](https://cambridgeorg.atlassian.net/browse/EAT-221) Update configuration in EAT SDK for question items with inline tables
+
+## 1.2.0
+
+- [EAT-305](https://cambridgeorg.atlassian.net/browse/EAT-305) [Review Mode] Display the "incorrect" feedback for partially correct partially skipped items
+
+- [EAT-306](https://cambridgeorg.atlassian.net/browse/EAT-306) [Contentful Preview] Display the "incorrect" feedback for partially correct partially skipped items
+
+## 1.1.0
+
+- [EAT-320](https://cambridgeorg.atlassian.net/browse/EAT-320) Remove static skipped feedback alert
+
+- [EAT-324](https://cambridgeorg.atlassian.net/browse/EAT-324) Implement <p> tag for inline dropdown to fix new line display issue
+
+- [EAT-325](https://cambridgeorg.atlassian.net/browse/EAT-325) Update the logic for the correct answer that is shown for long type in questions
+
+## 1.0.10
+
+- [EAT-318](https://cambridgeorg.atlassian.net/browse/EAT-318) Implement designs for long description field for image stimulus with rich text formatting so that they appear correctly in SDK
+
+- [EAT-319](https://cambridgeorg.atlassian.net/browse/EAT-319) As an author I want to view my interactions with an image stimulus with a long description field when creating the item/As a teacher I want to preview interactions with an image stimulus with a long description field before assigning
+
+## 1.0.9
+
+- [EAT-292](https://btsservice.atlassian.net/browse/EAT-292) As an author I want to view my Categorise interactions with an image stimulus when creating the item/As a teacher I want to preview Categorise interactions with an image stimulus before assigning
+
+- [EAT-293](https://btsservice.atlassian.net/browse/EAT-293) Implement designs for Categorise interactions with image stimulus so that they appear correctly in SDK
+
+- [EAT-308](https://cambridgeorg.atlassian.net/browse/EAT-308) Add a "class" attribute in svg
+
+## 1.0.8
+
+- [EAT-274](https://btsservice.atlassian.net/browse/EAT-274) As an author I want to view my MCQ with images in answers when creating the item/As a teacher I want to preview MCQ with images in answers items before assigning
+
+## 1.0.7
+
+- [EAT-262](https://btsservice.atlassian.net/browse/EAT-262) Implement designs for images in MCQ answers so that they appear correctly in SDK
+
+## 1.0.6
+
+- [EAT-263](https://btsservice.atlassian.net/browse/EAT-263) Implement designs for MCQ feedback fields with rich text formatting (including design for interactive preview and review pages)
+
+- [EAT-264](https://btsservice.atlassian.net/browse/EAT-264) Implement designs for categorise feedback fields with rich text formatting (including design for interactive preview and review pages)
+
+- [EAT-265](https://btsservice.atlassian.net/browse/EAT-265) Implement designs for type in feedback fields with rich text formatting (including design for interactive preview and review pages)
+
+## 1.0.5
+
+- [EAT-36](https://btsservice.atlassian.net/browse/EAT-36) Implement designs for dropdown so that it appears correctly in SDK
+
+- [EAT-247](https://btsservice.atlassian.net/browse/EAT-247) As an author I want to view my inline dropdown when creating the item/As a teacher I want to preview inline dropdown items before assigning
+
+## 1.0.4
+
+- [EAT-249](https://btsservice.atlassian.net/browse/EAT-249) [MCQ Single-select] Fix Contentful preview accessibility issues
+
+- [EAT-250](https://btsservice.atlassian.net/browse/EAT-250) [MCQ Single-select] Remove the options' hover state in review mode and static preview
+
+## 1.0.3
+
+- [EAT-188](https://btsservice.atlassian.net/browse/EAT-188) Implement designs for MCQ multi select individual report pages so it appears correct for end users
+
+- [EAT-223](https://btsservice.atlassian.net/browse/EAT-223) Implement answer feedbacks for Inline Type-in
+
+- [EAT-231](https://btsservice.atlassian.net/browse/EAT-231) As an author I want to view my MCQ multi-select when creating the item/As a teacher I want to preview multi-select items before assigning
+
+- [EAT-234](https://btsservice.atlassian.net/browse/EAT-234) Update designs for MCQ single select individual report pages so it appears correctly for end users
+
+## 1.0.2
+
+- [EAT-229](https://btsservice.atlassian.net/browse/EAT-229) Implement designs for MCQ multi select so it appears correct for end users
+
+## 1.0.1
+
+- [EAT-195](https://btsservice.atlassian.net/browse/EAT-195) As an author I want to view my inline typein when creating the item/As a teacher I want to preview inline typein items before assigning
+- [EAT-220](https://btsservice.atlassian.net/browse/EAT-220) Implement designs for scoring for inline typein so that it appears correctly in SDK
+- [EAT-216](https://btsservice.atlassian.net/browse/EAT-216) Update SDK after changes to long typein item scoring for interactive preview
+
+## 1.0.0
+
+- [EAT-4](https://btsservice.atlassian.net/browse/EAT-4) As an author I want to be able to preview my activity in content: No session in SDK
+- [EAT-12](https://btsservice.atlassian.net/browse/EAT-12) Styling and layouts for categorise (drag and drop) - small screens
+- [EAT-31](https://btsservice.atlassian.net/browse/EAT-31) Build authoring tool SDK
+- [EAT-33](https://btsservice.atlassian.net/browse/EAT-33) Styling and layouts for MCQ
+- [EAT-35](https://btsservice.atlassian.net/browse/EAT-35) Styling and layouts for categorise (drag and drop) - Medium/Large screens
+- [EAT-34](https://btsservice.atlassian.net/browse/EAT-34) Styling and layouts for typein questions
+- [EAT-45](https://btsservice.atlassian.net/browse/EAT-45) As a student/teacher I want to see image stimulus in my question item
+- [EAT-70](https://btsservice.atlassian.net/browse/EAT-70) As a user, I want to view MCQ Question using EAT SDK
+- [EAT-71](https://btsservice.atlassian.net/browse/EAT-71) As a user, I want to save my answer when MCQ option is clicked
+- [EAT-73](https://btsservice.atlassian.net/browse/EAT-73) As a teacher or student I want to view typein questions using EAT SDK
+- [EAT-74](https://btsservice.atlassian.net/browse/EAT-74) As a teacher or student I want to save my answer when I type answer in to a typein field
+- [EAT-76](https://btsservice.atlassian.net/browse/EAT-76) As a user, I want to view categorise questions using EAT SDK
+- [EAT-92](https://btsservice.atlassian.net/browse/EAT-92) MCQ: Update designs with correct/incorrect answer states and feedback
+- [EAT-98](https://btsservice.atlassian.net/browse/EAT-98) As an author I want to preview my categorise item in contentful and consuming platform so I know I have authored the item the way I intended
+- [EAT-99](https://btsservice.atlassian.net/browse/EAT-99) Styling and layouts for categorise (drag and drop) - accessibility
+- [EAT-100](https://btsservice.atlassian.net/browse/EAT-100) Review and test in/correct answer and feedback designs
+- [EAT-113](https://btsservice.atlassian.net/browse/EAT-113) As a student user, I want to save my categorise answers to the SDK
+- [EAT-121](https://btsservice.atlassian.net/browse/EAT-121) As a teacher I want to see how my student has fared in a Categorise item type
+- [EAT-155](https://btsservice.atlassian.net/browse/EAT-155) Implement designs for text stimulus to include rich text formatting
+- [EAT-156](https://btsservice.atlassian.net/browse/EAT-156) Implement designs for text stimulus for static/interactive preview
+- [EAT-164](https://btsservice.atlassian.net/browse/EAT-164) Updating designs for MCQ answers with rich text formatting
+- [EAT-165](https://btsservice.atlassian.net/browse/EAT-165) Implement designs for Categorise groups and word item with rich text formatting
+- [EAT-166](https://btsservice.atlassian.net/browse/EAT-166) Implement designs for MCQ answers to include rich text formatting for static/interactive preview
+- [EAT-167](https://btsservice.atlassian.net/browse/EAT-167) Implement designs for categorise to include rich text formatting for static/interactive preview
+- [EAT-174](https://btsservice.atlassian.net/browse/EAT-174) Implement designs for Rubric/Prompt with rich text formatting(including design for static/interactive preview)
+- [EAT-193](https://btsservice.atlassian.net/browse/EAT-193) Implement designs for inline typein so that it appears correctly in SDK
+- [EAT-201](https://btsservice.atlassian.net/browse/EAT-201) Update SDK config

package/README.md

@@ -1,40 +1,129 @@
-# eat-js-sdk
+# EAT UI
 
-Education Authoring Tool SDK built with SvelteKIt
+A Svelte-based UI component library for educational assessment tools (EAT). This library provides interactive components for multiple choice questions (MCQ), type-in interactions, categorisation, and dropdown interactions.
 
-## Requirements
+## Features
 
-- NodeJs 18
+- 🎯 **Multiple Interaction Types**: MCQ, Type-in, Categorise, and Dropdown interactions
+- 📱 **Responsive Design**: Mobile-first approach with desktop optimizations
+- 🎨 **Customizable Templates**: Flexible template system with two-column and single-column layouts
+- 🖼️ **Rich Media Support**: Images, videos, and audio with captions and accessibility features
+- ♿ **Accessible**: Built with accessibility in mind
+- 🎭 **Feedback System**: Comprehensive feedback with comparison tables and result displays
+- 💅 **Styled with Tailwind CSS**: Easily customizable styling
 
 ## Installation
 
-Use the package manager [npm](https://www.npmjs.com/) to install.
+```sh
+# Install dependencies using bun
+bun install
+```
+
+## Developing
+
+Start the development server:
+
+```sh
+bun run dev
 
-```bash
-#install dependencies
-npm install
+# or start the server and open the app in a new browser tab
+bun run dev --open
 ```
 
-## Usage
+## Building
 
-```bash
-#convert tailwind css to native css and build JS app
-npm run build
+To create a production version of the library:
 
-## Test in local
+```sh
+bun run build
+```
 
-#add script
-<script src="<path/dist/eat-prompt-builder.mjs>" type="module">
+Preview the production build:
 
-#add the component
-<prompt-builder />
+```sh
+bun run preview
 ```
 
-## Publish
-```bash
-#publish app
-npm publish
+## Testing
+
+Run tests with Vitest:
+
+```sh
+bun run test
+```
+
+## Project Structure
+
+```
+src/
+├── lib/
+│   ├── components/        # Reusable UI components
+│   │   ├── common/        # Common components (Media, Modal, Skeleton, etc.)
+│   │   ├── interaction/   # Interaction-specific components (MCQ, etc.)
+│   │   └── template/      # Template components (PromptContainer, Feedback, etc.)
+│   ├── composables/       # Composition functions for shared logic
+│   ├── constants/         # Application constants and enums
+│   ├── core/             # Core functionality (factory, registry, data loading)
+│   ├── stores/           # Svelte stores for state management
+│   └── types/            # TypeScript type definitions
+```
+
+## Usage Example
+
+```svelte
+<script>
+  import { InteractionBuilder } from 'eat-ui'
+
+  const interactionData = {
+    interactionType: 'multipleChoiceInteraction',
+    rubric: 'Select the correct answer',
+    prompt: 'What is 2 + 2?',
+    // ... other interaction properties
+  }
+</script>
 
-#Package url
-https://unpkg.com/eat-js-sdk@<version>/dist/eat-prompt-builder.mjs
+<InteractionBuilder {...interactionData} />
 ```
+
+## Key Components
+
+### PromptContainer
+
+Orchestrates template sections with clean separation of concerns. Handles rubric, prompt, stimulus (text/media), and interaction layout.
+
+### InteractionBuilder
+
+Main entry point for building interactions. Automatically selects the appropriate interaction type based on configuration.
+
+### Composables
+
+- `useMCQ` - MCQ interaction logic
+- `useStimulusData` - Stimulus data processing
+- `useFeedbackData` - Feedback display logic
+- `usePrompt` - Prompt state management
+
+## TypeScript Support
+
+This project is fully typed with TypeScript. Key types include:
+
+- `InteractionType` - Supported interaction types
+- `Stimulus` - Media and text stimulus configuration
+- `FeedbackData` - Feedback structure
+- `ViewTemplate` - Template configuration
+
+## Contributing
+
+1. Follow the existing code structure and patterns
+2. Maintain type safety with TypeScript
+3. Write tests for new features
+4. Keep components focused and composable
+5. Document complex logic with comments
+
+## Tech Stack
+
+- **Framework**: SvelteKit
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS + SCSS
+- **Testing**: Vitest + Playwright
+- **Package Manager**: Bun
+- **Linting**: ESLint

package/package.json

@@ -1,85 +1,83 @@
 {
-    "name": "eat-js-sdk",
-    "version": "1.4.6",
-    "change version": "1.4.0",
-    "description": "Authoring tool frontend SDK",
-    "contributors": [
-        {
-            "name": "Michael Christopher Abrigos",
-            "email": "michael.abrigos`@cambridge.org"
-        },
-        {
-            "name": "Earl Anthony Bequillo",
-            "email": "earl.bequillo@cambridge.org"
-        },
-        {
-            "name": "Carl Lewi Godoy",
-            "email": "carl.godoy@cambridge.org"
-        },
-        {
-            "name": "Joven Ferdinand Miclat",
-            "email": "joven.miclat@cambridge.org"
-        },
-        {
-            "name": "Ramer Mellizas",
-            "email": "ramer.mellizas@cambridge.org"
-        },
-        {
-            "name": "Aimer Jay Pedrozo",
-            "email": "aimer.pedrozo@cambridge.org"
-        }
-    ],
-    "scripts": {
-        "dev": "vite dev",
-        "build": "npm run build:css && node esbuild-bundle.js",
-        "preview": "vite preview",
-        "package": "svelte-kit sync && svelte-package && publint",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-        "prepublishOnly": "npm run build",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write .",
-        "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.scss"
+  "name": "eat-js-sdk",
+  "version": "2.0.0",
+  "change version": "2.0.0",
+  "description": "Authoring tool frontend SDK",
+  "contributors": [
+    {
+      "name": "Michael Christopher Abrigos",
+      "email": "michael.abrigos@cambridge.org"
     },
-    "files": [
-        "README.md",
-        "package.json",
-        "./dist/**/*"
-    ],
-    "peerDependencies": {
-        "svelte": "4.0.0"
+    {
+      "name": "Earl Anthony Bequillo",
+      "email": "earl.bequillo@cambridge.org"
     },
-    "devDependencies": {
-        "@sveltejs/adapter-auto": "2.1.1",
-        "@sveltejs/kit": "1.27.6",
-        "@sveltejs/package": "2.2.3",
-        "@typescript-eslint/eslint-plugin": "6.12.0",
-        "@typescript-eslint/parser": "6.12.0",
-        "autoprefixer": "10.4.16",
-        "cssnano": "6.0.1",
-        "esbuild": "0.19.7",
-        "esbuild-svelte": "0.8.0",
-        "eslint": "8.54.0",
-        "eslint-config-prettier": "9.0.0",
-        "eslint-plugin-svelte": "2.35.1",
-        "postcss": "8.4.31",
-        "postcss-cli": "10.1.0",
-        "postcss-load-config": "4.0.2",
-        "prettier": "3.1.0",
-        "prettier-plugin-tailwindcss": "0.4.1",
-        "publint": "0.1.16",
-        "sass": "1.69.5",
-        "svelte": "4.2.7",
-        "svelte-check": "3.6.2",
-        "svelte-dnd-action": "0.9.43",
-        "tailwindcss": "3.3.5",
-        "tslib": "2.6.2",
-        "typescript": "5.3.2",
-        "vite": "4.5.0"
+    {
+      "name": "Carl Lewi Godoy",
+      "email": "carl.godoy@cambridge.org"
     },
-    "type": "module",
-    "dependencies": {
-        "svelte-autosize": "1.1.0",
-        "svelte-viewport-info": "1.0.1"
+    {
+      "name": "Joven Ferdinand Miclat",
+      "email": "joven.miclat@cambridge.org"
+    },
+    {
+      "name": "Ramer Mellizas",
+      "email": "ramer.mellizas@cambridge.org"
+    },
+    {
+      "name": "Aimer Jay Pedrozo",
+      "email": "aimer.pedrozo@cambridge.org"
     }
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "npm run build:css && vite build",
+    "build:css": "postcss src/lib/assets/css/app.css -o src/lib/assets/css/main.scss",
+    "watch:css": "postcss src/lib/assets/css/app.css -o src/lib/assets/css/main.scss --watch",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.36.0",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.43.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@types/node": "^22",
+    "@vitest/browser": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.1.1",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.12.4",
+    "globals": "^16.4.0",
+    "playwright": "^1.55.1",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "sass-embedded": "^1.93.2",
+    "svelte": "^5.39.5",
+    "svelte-check": "^4.3.2",
+    "tailwindcss": "3",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vitest": "^3.2.4",
+    "vitest-browser-svelte": "^1.1.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "svelte-autosize": "^1.1.5",
+    "svelte-dnd-action": "^0.9.65",
+    "svelte-viewport-info": "^1.0.3"
+  }
 }

package/svelte.config.js

@@ -0,0 +1,20 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://svelte.dev/docs/kit/integrations
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  customElement: true,
+
+  kit: {
+    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+}
+
+export default config