feat: complete rewrite of course (#622)
* theming improvements * border style improvements * refactor: migrate org routes to server-side data fetching Move client-side API calls to server-side load functions for better performance, security, and SEO. Implement permission-based course filtering * refactor: clean up course and community components This commit removes unused components and files related to courses and community features, streamlining the codebase. It also updates various routes to enhance performance and maintainability. Additionally, it introduces new types and constants for better type safety and organization. * refactor: fix video formatting on website and other styles * refactor: update course and dashboard components for improved styling and functionality * more icon improvements * refactor: streamline course and dashboard components This commit updates various course and dashboard components for improved styling and functionality. It includes the removal of unused files, updates to imports and exports, and enhancements to type safety. Additionally, it introduces new routes and optimizes existing ones for better performance and maintainability. * refactor: enhance lesson completion logic * chore: delete all emails on dashboard and move other api routes to backend. move all emails to the backend and * feat: Refactor API and database queries for courses, quizzes, and lessons, migrating Supabase functions and schema management. * get app loading * fix ui and build error of cio/api * refactor: move direct database queries to query layer - Create query functions: getCourseWithOrgData, getOrganizationByCourseId, updateCourseVersion, updateLessonsSectionId, getProfileByGroupMemberId, getQuestionTypesByIds - Refactor services to use query functions instead of direct db queries - Add transaction support to updateCourseVersion and updateLessonsSectionId - Fix getProfileByGroupMemberId to return profile directly (not nested) - Fix updateLessonsSectionId to use .returning() instead of rowCount This aligns services with architecture pattern where services orchestrate queries rather than executing them directly. * exercise saving improvements * fix and optimise exercise creation * refactor: update dialog components for improved styling and functionality - Adjusted dialog content width and maximum constraints for better responsiveness. - Changed heading font size for consistency in the new exercise modal. - Replaced CloseIcon with CrossIcon for a more modern appearance in dialog close button. * refactor: enhance course and exercise management components - Introduced new components for exercise creation, editing, and viewing, improving user experience. - Refactored existing lesson and exercise components for better organization and maintainability. - Updated routing for exercises and lessons to streamline navigation within the course structure. - Added new utility functions and constants to support content management across the application. * feat: implement course content management API and UI components - Added new API routes for updating and deleting course content, enhancing content management capabilities. - Introduced new Svelte components for displaying and managing course content, including content lists and action handlers. - Updated existing course routing to integrate new content management features. - Refactored content-related utility functions for improved organization and maintainability. * refactor: remove Supabase references and implement course section management - Removed Supabase-related environment variables and Dockerfile arguments to streamline configuration. - Introduced a new section management API with routes for creating, updating, deleting, and reordering course sections. - Updated course services to handle section operations, ensuring consistency in course content management. - Refactored existing lesson section logic to align with the new course section structure, enhancing maintainability. * chore: update .prettierignore to exclude additional file types - Added exclusions for SQL and environment files to the Prettier ignore list. - Included Dockerfile and .prettierignore itself to prevent formatting issues. * feat: enhance course content management with translation support and UI improvements - Added translation keys for user-facing text in course-related components, ensuring all UI copy is sourced from translation files. - Updated lesson and exercise creation components to utilize translation keys for success and error messages, improving localization. - Refactored course content management components to streamline the creation and editing process, enhancing user experience. - Introduced new constants for content options and stepper states to standardize component behavior and improve maintainability. - Improved styling and functionality of course content modals and steppers for better user interaction. * feat: enhance course content management and UI components - Updated .prettierignore to exclude storybook-static directory. - Improved exercise creation logic by refining option handling and adding UUID support for option values. - Enhanced navigation component with debugging output for custom links. - Introduced a new method in CourseApi to update content items locally, improving state management during navigation. - Added caching for exercise templates by tag in ExerciseTemplateApi to optimize performance. - Refactored lesson and exercise components for better organization and maintainability, including updates to modal styling and functionality. - Implemented local patching for lesson and exercise list items to ensure UI consistency after updates. * student + teacher invite (not fully tested) * refactor: streamline course team member middleware - Removed unnecessary console logging and timing for checking user permissions. - Simplified the logic for determining if a user is a course team member or organization admin. * reorder course sidebar to move content to its own page. * feat: implement unified course enrollment route and API - Introduced a new enrollment route `/course/:slug/enroll` to replace the previous invite system. - Unified enrollment logic for free and paid courses, allowing direct enrollment for free courses and invite token validation for paid courses. - Updated course landing page to redirect to the new enrollment route for free courses. - Removed obsolete invite routes and related logic, streamlining the enrollment process. - Enhanced API with a new `POST /course/:courseId/enroll` endpoint for handling enrollments. - Added rate limiting for enrollment requests to prevent abuse. - Updated UI components to reflect changes in enrollment flow and messaging. * chore: update docker stack, docs, and auth token automation * chore: make prettier check ignore unknown file types * fix: avoid using authClient on server file and keep authClient client focused * chore: always get the server on demand depending on the environment * chore: update dashboard configuration and Docker setup for environment variables - Modified the Svelte configuration to directly use the PUBLIC_SERVER_URL environment variable. - Enhanced the Docker Compose file to include health check formatting and added environment variable arguments for the dashboard build. - Updated the Dockerfile to echo environment variable values during the build process, ensuring clarity on the configuration being used. * chore: enhance Docker setup and documentation for production deployment - Added a new production Docker Compose file and example environment file for published images. - Updated README and usage documentation to include instructions for deploying with production images. - Modified Svelte configuration to standardize the use of the posthog domain. - Removed unnecessary console logs from the API client and layout server files for cleaner output. - Improved overall clarity in Docker documentation regarding self-hosting and image publishing. * chore(db): log function name in query catch blocks (console.error 'funcName error:', error) Co-authored-by: Cursor <[email protected]> * fix: multiple refresh issue * fix: server key not passed to api * fix: clarify usage of PRIVATE_SERVER_KEY and AUTH_BEARER_TOKEN in documentation - Updated documentation to specify that PRIVATE_SERVER_KEY is used for server-to-server API key authentication and is validated by API key middleware. - Clarified that AUTH_BEARER_TOKEN is a separate token not utilized by apiKeyMiddleware. - Adjusted examples in Docker setup and self-hosting documentation to reflect these changes. * fix migration script * fix: improve language handling and add database reset script - Updated language extraction to handle potential undefined values, defaulting to 'en' if necessary. - Added a new script for resetting the database, including functionality to truncate public tables and run setup with optional seeding. * feat: add promote ungrouped section functionality and enhance document handling in dashboard - Implemented a new API endpoint to promote synthetic "Ungrouped" content into a real persisted section, allowing for better organization of course materials. - Updated the dashboard to include a new component for displaying content count badges for lessons and exercises. - Enhanced document management features, including a new document card component with dropdown actions for viewing, downloading, and removing documents. - Improved file upload handling with a dedicated file drop zone and error handling for file type and size restrictions. - Refactored existing components for better readability and maintainability, including updates to lesson and document lists. * chore: use root env file for docker compose * docs: document docker no-build startup flow * chore: add no-build option to docker full stack script * fix(email): handle SMTP TLS mode by port * feat(auth): add configurable cookie domain env and docs * apps/dashboard/src/lib/utils/services/auth/session.ts * fix(email): make sender configurable via SMTP_SENDER * chore(i18n): regenerate locale translations and support language targeting * chore(config): switch api to PUBLIC_SERVER_URL * fix(i18n): persist selected locale across navigation * feat(assets): implement organization asset management routes and services - Added new routes for managing organization assets, including listing, creating, updating, deleting, and exporting assets. - Introduced asset-related services for handling asset operations such as creation, retrieval, and deletion. - Integrated YouTube metadata resolution and asset attachment/detachment functionalities. - Updated organization routes to include the new asset management routes. - Enhanced error handling for asset-related operations. * fix(document-list): update conditional rendering for edit mode in document list * debug self hosted layout setup * refactor(sidebar): simplify lms sidebar footer and improve navigation item rendering * feat: tags * chore: tags roadmap + translations * fix(api): add authMiddleware to exercise, invites, and content routers - exerciseRouter: apply authMiddleware before courseMemberMiddleware on all 10 routes - invitesRouter: apply authMiddleware before courseTeamMemberMiddleware on all 4 routes - contentRouter: add authMiddleware to PUT route (DELETE already had it) Both courseMemberMiddleware and courseTeamMemberMiddleware document requiring authMiddleware to be applied first. This aligns with lessonRouter pattern and ensures explicit middleware contract regardless of global session middleware. Co-authored-by: Rotimi Best <[email protected]> * fix(course): use courseTeamMemberMiddleware for PUT, DELETE, and analytics routes These routes require admin/tutor role per JSDoc but were using courseMemberMiddleware which allows any course member including students. Switch to courseTeamMemberMiddleware to restrict access to ADMIN/TUTOR group members and org admins. Co-authored-by: Rotimi Best <[email protected]> * chore: unify pricing component between dashboard and website (#630) * feat: modularize pricing card * feat: initia implementation of pricing togge * fix: minor amendment * refactor: update pricing components for improved layout and styling - Adjusted spacing in the pricing card layout for better visual consistency. - Modified button styles and sizes for enhanced usability. - Cleaned up the pricing toggle component by removing unnecessary console logs and restructuring the button rendering logic. * add handle click * chore(css): update Tailwind CSS output with new utility classes and theme variables * fix(api): enable orgMemberMiddleware for stats route This change ensures that the stats route is protected by orgMemberMiddleware, aligning access control with other routes. Additionally, removed unnecessary console log from the layout server file to clean up the code. --------- Co-authored-by: Rotimi Best <[email protected]> * pass query parameter to signup from pricing page * ui updates to pricing cards * commit all PRDs * add open api spec to api prd * make blue default theme * more prds * sync option id sequence on question update * docs: more classroomio features * chore: more ui improvements * docs: new component docs * chore: CSP Configuration (#638) * feat(validation): add GitHub repository name validation - Add ZRepositoryName schema for validating GitHub repo names - Add ZRepositoryOwner for owner/username validation - Add ZRepositoryIdentifier for owner/repo format - Follow GitHub rules: A-Za-z0-9_.-, 1-100 chars, reserved names - Add translation keys for validation messages Fixes #637 Co-authored-by: Rotimi Best <[email protected]> * Revert "feat(validation): add GitHub repository name validation" This reverts commit 3436536bb17a0f05b3a9fe8dd7682cde64dd1dce. * feat(dashboard): make CSP external domains configurable via env Move hardcoded external domains from svelte.config.js to .env configuration for on-premise deployments with strict security policies, data residency constraints, or CISO-driven allowlists. - ALLOWED_EXTERNAL_DOMAINS: single list for all CSP directives - CSP_SCRIPT_SRC_DOMAINS, CSP_STYLE_SRC_DOMAINS, CSP_CONNECT_SRC_DOMAINS, CSP_FRAME_SRC_DOMAINS, CSP_FONT_SRC_DOMAINS: per-directive override - When unset, defaults retain current SaaS behavior (backward compatible) Fixes #637 Co-authored-by: Rotimi Best <[email protected]> * fix(dashboard): self-hosted CSP uses only env vars, no defaults Co-authored-by: Rotimi Best <[email protected]> * fix(dashboard): add all classroomio.com domains to CSP defaults Co-authored-by: Rotimi Best <[email protected]> * docs: add CSP ALLOWED_EXTERNAL_DOMAINS to self-hosting guides Co-authored-by: Rotimi Best <[email protected]> * feat(docker): pass CSP domain env vars as build args to dashboard Co-authored-by: Rotimi Best <[email protected]> --------- Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: Rotimi Best <[email protected]> * feat: add SSO and token authentication routes and services - Introduced new routes for SSO and token authentication under the organization namespace. - Implemented SSO connection management including creation, update, activation, and deletion. - Added token authentication configuration with support for secret rotation and status retrieval. - Enhanced error handling for SSO and token authentication processes. - Updated existing routes and services to integrate new functionalities. - Improved gradebook service to fetch student marks and exercises. - Refactored API structure for better organization and maintainability. * update translations * fix: add PUBLIC_SERVER_URL to .env.example to prevent localhost fallback in production (#641) Co-authored-by: Cursor Agent <[email protected]> * feat: new exercise question types * MinIO S3 storage backend (#639) * feat(storage): add MinIO/S3-compatible object storage backend - Add OBJECT_STORAGE_* env vars for generic S3-compatible backends (MinIO, AWS S3) - Create storage config module with Cloudflare R2 fallback for backward compatibility - Refactor s3.ts to use configurable client and bucket names from config - Update media.ts to use provider-neutral public URL (OBJECT_STORAGE_MEDIA_PUBLIC_BASE_URL or CLOUDFLARE_IMAGE_BUCKET_DOMAIN) - Add MinIO service and init to docker-compose (profile: minio) with videos/documents/media buckets - Add localhost:9000 to dashboard CSP for local MinIO presigned URL uploads - Update self-hosting and Cloudflare docs with MinIO option - Update .env examples and docker USAGE.md Fixes #635 Co-authored-by: Rotimi Best <[email protected]> * docs: add MINIO_ROOT_USER and MINIO_ROOT_PASSWORD to self-hosting guides Co-authored-by: Rotimi Best <[email protected]> * feat(media): refactor media management and integrate MinIO support - Updated media API to use a new `mediaApi` module, replacing `mediaManagerApi` references across components. - Added MinIO configuration options to the Docker setup, allowing for optional object storage exclusion. - Enhanced environment variable management for MinIO in the `.env.example` file. - Updated Content Security Policy (CSP) to allow local MinIO access in the dashboard. - Introduced new media components for asset management, including asset cards and usage dialogs. This refactor improves the modularity of the media handling system and provides better support for S3-compatible storage solutions. * feat(dashboard): enhance logging and refactor auth session handling - Added console logging for event and environment variables in hooks.server.ts to aid debugging. - Refactored auth session handling to use authServerClient instead of authClient in session.ts for improved consistency. - Updated Dockerfile to ensure the dashboard build output is present before starting the application. - Expanded self-hosting documentation to include troubleshooting steps for disk space issues in PostgreSQL and Docker. These changes improve the observability of the application and streamline the authentication process. * refactor(dashboard): remove debug logging and enhance Postgres healthcheck - Removed console logging for event and environment variables in hooks.server.ts to clean up the code. - Updated Postgres healthcheck in docker-compose.yaml to require a successful `SELECT 1` query, ensuring dependent services only start once the database is ready. - Expanded self-hosting documentation to include troubleshooting steps for database recovery issues. These changes improve code clarity and reliability in service startup sequences. --------- Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: Rotimi Best <[email protected]> * feat: add Plyr media player icons and PDF.js integration - Introduced new Plyr SVG icons for media player controls in both course and dashboard applications. - Updated Plyr player configuration to use local icon assets. - Integrated PDF.js for document viewing, replacing external CDN links with local paths for improved performance and reliability. - Enhanced PDF viewer modal z-index for better visibility. This update improves the media player experience and ensures consistent access to necessary resources. * feat: enhance account and organization services with type definitions and promise return types - Updated `getAccountData` to return a structured result type including profile and organizations. - Modified `getOrganizationsWithFilters` to specify a promise return type for better type safety. - Added new type imports for organization-related data structures to improve clarity and maintainability. These changes improve type safety and enhance the overall structure of the account and organization services. * feat: implement Redis caching for presigned URLs and refactor API interactions - Added Redis caching for presigned download URLs in the API to reduce redundant S3 calls, improving performance. - Introduced a new `PresignApi` class in the frontend to centralize presigned URL requests, enhancing code maintainability. - Updated various components to utilize the new `presignApi` methods for document and video upload/download operations. - Enhanced error handling for Redis operations to ensure graceful degradation in case of cache failures. These changes optimize the presigned URL generation process and streamline API interactions across the application. * fix: add better-auth dependency to dashboard (#645) * chore: unify exercise answer data format * feat: make selfhosting run under one org for simplicity (#647) * feat: implement self-hosting PRD + license key system Self-hosting single-org: - Add PUBLIC_IS_SELFHOSTED to API env, block org creation when org exists - Auto-add non-members as students in GET /account bootstrap - getOrgSiteInfo: root domain returns single org for self-hosted - App init: route to /lms when self-hosted + no orgs - Hide org switcher and Add Org modal when self-hosted Invite-only signup: - Add settings.signup.inviteOnly via ZUpdateOrganization - Allow public signups toggle in org auth settings - Signup page: hide form when invite-only and no invite context - Landing page nav: respect inviteOnly for signup link First signup auto-verify: - Self-hosted first signup (no orgs) auto-verifies email in createProfileHook License key system: - LICENSE_KEY, LICENSE_VERIFICATION_URL for external verification API - Feature gates: SSO, token-auth, no-tracking (PostHog/Senja) - requireLicense middleware for API routes - Dashboard: license store, gate PostHog/Senja/SSO/token-auth UI - docs/LICENSE_API_CONTRACT.md for external API spec Co-authored-by: Rotimi Best <[email protected]> * feat: get rid of carbon completely * chore: license verification happens only for selfhosted instance * fix: in self hosted instance, orgSite is the default * docs: how to write math in cio editor * Update packages/db/src/queries/organization/organization.ts Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * Update apps/api/src/services/license.ts Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * fix: translations, cursor pr reviews, simplify license fetching and check * refactor: update analytics setup for cloud and self-hosted deployments; enhance settings merge logic * refactor: update license fetching URL for development environment; optimize organization query to prevent plan row loss * more selfhosting improvements * feat: enhance signup guard for self-hosted instances by requiring organization context when no org ID is provided * pr reviews * fix: correct query parameter handling in course navigation * pr reviews --------- Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: Rotimi Best <[email protected]> Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --------- Co-authored-by: Cursor <[email protected]> Co-authored-by: Rotimi Best <[email protected]> Co-authored-by: Abdulmuizz Hamzat <[email protected]> Co-authored-by: Adeyemi Adetunji <[email protected]> Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
This commit is contained in:
Rotimi Best
co-authored by
Rotimi Best
greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Cursor Agent
Abdulmuizz Hamzat
Adeyemi Adetunji
Rotimi Best
greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Cursor Agent
Abdulmuizz Hamzat
Adeyemi Adetunji
parent
a42565ad82
commit
1e9a82e912
@@ -0,0 +1 @@
|
||||
storybook-static
|
||||
@@ -1,464 +0,0 @@
|
||||
# How to Create Storybook Stories
|
||||
|
||||
This guide documents the patterns and conventions for creating Storybook stories in the ClassroomIO UI component library.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [File Structure](#file-structure)
|
||||
- [Basic Story Structure](#basic-story-structure)
|
||||
- [Import Patterns](#import-patterns)
|
||||
- [Story Definition](#story-definition)
|
||||
- [Template Snippets](#template-snippets)
|
||||
- [Fields File](#fields-file)
|
||||
- [Component Categorization](#component-categorization)
|
||||
- [CSS Class Conventions](#css-class-conventions)
|
||||
- [LMS Content Guidelines](#lms-content-guidelines)
|
||||
- [Examples](#examples)
|
||||
|
||||
## File Structure
|
||||
|
||||
### Directory Organization
|
||||
|
||||
Stories are organized into two main categories:
|
||||
|
||||
- **Atoms** (`src/atoms/`): Basic, indivisible UI components (Button, Input, Badge, etc.)
|
||||
- **Molecules** (`src/molecules/`): Composite components made of multiple atoms (Card, Field, ButtonGroup, etc.)
|
||||
|
||||
### File Naming
|
||||
|
||||
1. Create a directory matching the component name (kebab-case)
|
||||
2. Create a story file: `{component-name}.stories.svelte`
|
||||
3. Optionally create a fields file: `fields.ts` (for controls configuration)
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
src/molecules/hover-card/
|
||||
├── hover-card.stories.svelte
|
||||
└── fields.ts
|
||||
```
|
||||
|
||||
## Basic Story Structure
|
||||
|
||||
Every story file follows this structure:
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// Component imports
|
||||
import * as ComponentName from '@cio/ui/base/component-name';
|
||||
|
||||
// Other imports (icons, utilities, etc.)
|
||||
import IconName from '@lucide/svelte/icons/icon-name';
|
||||
|
||||
// Fields import (if using controls)
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
// Story definition
|
||||
const { Story } = defineMeta({
|
||||
title: 'Category/ComponentName',
|
||||
component: ComponentName.Root, // or ComponentName for single components
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
// State variables (if needed)
|
||||
let someState = $state('');
|
||||
</script>
|
||||
|
||||
<Story name="StoryName">
|
||||
{#snippet template()}
|
||||
<!-- Component usage -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
## Import Patterns
|
||||
|
||||
### Component Imports
|
||||
|
||||
- **Namespace imports** for multi-part components:
|
||||
|
||||
```svelte
|
||||
import * as HoverCard from '@cio/ui/base/hover-card'; import * as Card from '@cio/ui/base/card'; import * as Field
|
||||
from '@cio/ui/base/field';
|
||||
```
|
||||
|
||||
- **Named imports** for single components:
|
||||
```svelte
|
||||
import {Button} from '@cio/ui/base/button'; import {Input} from '@cio/ui/base/input'; import {Avatar} from '@cio/ui/base/avatar';
|
||||
```
|
||||
|
||||
### Icon Imports
|
||||
|
||||
Use Lucide Svelte icons:
|
||||
|
||||
```svelte
|
||||
import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days'; import UsersIcon from '@lucide/svelte/icons/users';
|
||||
import BookOpenIcon from '@lucide/svelte/icons/book-open';
|
||||
```
|
||||
|
||||
## Story Definition
|
||||
|
||||
### Title Format
|
||||
|
||||
- **Atoms**: `'Atom/ComponentName'` (e.g., `'Atom/Button'`)
|
||||
- **Molecules**: `'Molecules/ComponentName'` (e.g., `'Molecules/HoverCard'`)
|
||||
|
||||
### Component Reference
|
||||
|
||||
- For multi-part components, reference the `Root` component:
|
||||
|
||||
```svelte
|
||||
component: HoverCard.Root component: Card.Root
|
||||
```
|
||||
|
||||
- For single components, reference directly:
|
||||
```svelte
|
||||
component: Button component: Input
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
Standard parameters configuration:
|
||||
|
||||
```svelte
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS // Only if using fields.ts
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Tags
|
||||
|
||||
Always include `tags: ['autodocs']` for automatic documentation generation.
|
||||
|
||||
## Template Snippets
|
||||
|
||||
### Basic Template
|
||||
|
||||
```svelte
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<ComponentName.Root>
|
||||
<!-- Component content -->
|
||||
</ComponentName.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
### Template with Args (for controls)
|
||||
|
||||
For atoms that need to pass args to controls:
|
||||
|
||||
```svelte
|
||||
<Story name="Default">
|
||||
{#snippet template(args)}
|
||||
<Button {...args}>Button Text</Button>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
### Multiple Stories
|
||||
|
||||
Create multiple stories to showcase different use cases:
|
||||
|
||||
```svelte
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<!-- Basic usage -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Avatar">
|
||||
{#snippet template()}
|
||||
<!-- Avatar variant -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom Content">
|
||||
{#snippet template()}
|
||||
<!-- Custom content variant -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
## Fields File
|
||||
|
||||
Create a `fields.ts` file to control which props appear in Storybook controls:
|
||||
|
||||
```typescript
|
||||
export const FIELDS = ['class'] as string[];
|
||||
```
|
||||
|
||||
Common fields:
|
||||
|
||||
- `'class'` - CSS classes
|
||||
- `'variant'` - Component variants
|
||||
- `'size'` - Component sizes
|
||||
- `'disabled'` - Disabled state
|
||||
- Add more as needed based on component props
|
||||
|
||||
## Component Categorization
|
||||
|
||||
### Atoms
|
||||
|
||||
Basic, indivisible components:
|
||||
|
||||
- Button, Input, Badge, Avatar, Label, Checkbox, Switch, etc.
|
||||
- Single-purpose components
|
||||
- Usually don't compose other components
|
||||
|
||||
### Molecules
|
||||
|
||||
Composite components:
|
||||
|
||||
- Card, Field, ButtonGroup, HoverCard, Empty, etc.
|
||||
- Made of multiple atoms or other components
|
||||
- More complex functionality
|
||||
|
||||
**Guideline**: If a component uses multiple other components together, it's likely a molecule.
|
||||
|
||||
## CSS Class Conventions
|
||||
|
||||
### UI Prefix
|
||||
|
||||
Use the `ui:` prefix for utility classes to scope them properly:
|
||||
|
||||
```svelte
|
||||
<!-- ✅ Correct -->
|
||||
<div class="ui:flex ui:flex-col ui:gap-6">
|
||||
<Button class="ui:w-full">
|
||||
|
||||
<!-- ❌ Incorrect -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<Button class="w-full">
|
||||
```
|
||||
|
||||
### When to Use UI Prefix
|
||||
|
||||
- **Always use** for utility classes (flex, grid, gap, padding, margin, etc.)
|
||||
- **Don't use** for component-specific classes or data attributes
|
||||
- **Don't use** for Tailwind classes that are part of component styling
|
||||
|
||||
### Examples
|
||||
|
||||
```svelte
|
||||
<!-- Utility classes - use ui: prefix -->
|
||||
<div class="ui:flex ui:items-center ui:gap-2">
|
||||
<div class="ui:space-y-2">
|
||||
<div class="ui:text-muted-foreground ui:text-sm">
|
||||
|
||||
<!-- Component classes - no prefix needed -->
|
||||
<Card.Root class="w-full max-w-sm">
|
||||
<HoverCard.Content class="w-80">
|
||||
```
|
||||
|
||||
## LMS Content Guidelines
|
||||
|
||||
Since ClassroomIO is an LMS platform, all story content should be **LMS-related**:
|
||||
|
||||
### ✅ Good Examples
|
||||
|
||||
- **Courses**: "Introduction to Web Development", "Advanced React Patterns"
|
||||
- **Users**: "Sarah Johnson (Instructor)", "Alex Martinez (Student)"
|
||||
- **Content**: Course descriptions, assignment types, enrollment information
|
||||
- **Actions**: "Create Course", "Enroll Student", "Submit Assignment"
|
||||
- **States**: "No courses yet", "Student enrolled", "Assignment submitted"
|
||||
|
||||
### ❌ Avoid
|
||||
|
||||
- Generic examples (Svelte, GitHub profiles, etc.)
|
||||
- Non-educational content
|
||||
- Examples that don't relate to learning/teaching
|
||||
|
||||
### Content Patterns
|
||||
|
||||
**Instructor Profiles:**
|
||||
|
||||
```svelte
|
||||
<h4 class="text-sm font-semibold">Sarah Johnson</h4>
|
||||
<p class="text-sm">Senior Full-Stack Developer & Instructor</p>
|
||||
<span class="text-muted-foreground text-xs">Teaching since January 2020</span>
|
||||
```
|
||||
|
||||
**Course Information:**
|
||||
|
||||
```svelte
|
||||
<h4 class="text-sm font-semibold">Advanced React Patterns</h4>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Master advanced React concepts including hooks, context, performance optimization...
|
||||
</p>
|
||||
```
|
||||
|
||||
**Student Information:**
|
||||
|
||||
```svelte
|
||||
<h4 class="text-sm font-semibold">Alex Martinez</h4>
|
||||
<p class="text-muted-foreground text-xs">5 courses enrolled</p>
|
||||
<p class="text-muted-foreground text-xs">Active since March 2024</p>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Simple Atom (Button)
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Atom/Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template(args)}
|
||||
<Button {...args}>Create Course</Button>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
### Example 2: Multi-Part Molecule (HoverCard)
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days';
|
||||
import * as HoverCard from '@cio/ui/base/hover-card';
|
||||
import * as Avatar from '@cio/ui/base/avatar';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/HoverCard',
|
||||
component: HoverCard.Root,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Instructor Profile">
|
||||
{#snippet template()}
|
||||
<HoverCard.Root>
|
||||
<HoverCard.Trigger
|
||||
href="/instructors/sarah-johnson"
|
||||
class="ui:rounded-sm ui:underline-offset-4 ui:hover:underline"
|
||||
>
|
||||
Sarah Johnson
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Content class="w-80">
|
||||
<div class="flex justify-between space-x-4">
|
||||
<Avatar.Root>
|
||||
<Avatar.Image src="https://github.com/shadcn.png" />
|
||||
<Avatar.Fallback>SJ</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div class="space-y-1">
|
||||
<h4 class="text-sm font-semibold">Sarah Johnson</h4>
|
||||
<p class="text-sm">Senior Full-Stack Developer & Instructor</p>
|
||||
<div class="flex items-center pt-2">
|
||||
<CalendarDaysIcon class="me-2 size-4 opacity-70" />
|
||||
<span class="text-muted-foreground text-xs">Teaching since January 2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Content>
|
||||
</HoverCard.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
### Example 3: Complex Molecule with State (Field)
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/Field',
|
||||
component: Field.Field,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
let email = $state('');
|
||||
</script>
|
||||
|
||||
<Story name="Course Enrollment">
|
||||
{#snippet template()}
|
||||
<div class="w-lg">
|
||||
<Field.Set>
|
||||
<Field.Legend>Enroll Student</Field.Legend>
|
||||
<Field.Description>Add a new student to your course</Field.Description>
|
||||
<Field.Group>
|
||||
<Field.Field>
|
||||
<Field.Label for="student-email">Student Email</Field.Label>
|
||||
<Input id="student-email" type="email" bind:value={email} placeholder="[email protected]" />
|
||||
</Field.Field>
|
||||
</Field.Group>
|
||||
</Field.Set>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
## Checklist
|
||||
|
||||
When creating a new story, ensure:
|
||||
|
||||
- [ ] File is in the correct directory (`atoms/` or `molecules/`)
|
||||
- [ ] File is named `{component-name}.stories.svelte`
|
||||
- [ ] Imports use `@cio/ui/base/{component-name}` pattern
|
||||
- [ ] Title follows `'Category/ComponentName'` format
|
||||
- [ ] Component reference is correct (Root for multi-part, direct for single)
|
||||
- [ ] `tags: ['autodocs']` is included
|
||||
- [ ] All utility classes use `ui:` prefix
|
||||
- [ ] Content is LMS-related (courses, students, instructors, etc.)
|
||||
- [ ] Multiple stories showcase different use cases
|
||||
- [ ] `fields.ts` is created if controls are needed
|
||||
- [ ] State variables use `$state()` for reactivity
|
||||
- [ ] Icons are imported from `@lucide/svelte/icons/`
|
||||
|
||||
## Additional Notes
|
||||
|
||||
- **State Management**: Use Svelte 5 runes (`$state()`, `$derived()`) for reactive state
|
||||
- **Layout**: Most stories use `layout: 'centered'` in parameters
|
||||
- **Styling**: Prefer Tailwind utility classes with `ui:` prefix
|
||||
- **Accessibility**: Include proper ARIA labels and semantic HTML
|
||||
- **Documentation**: Story names should be descriptive and reflect the use case
|
||||
|
||||
## Resources
|
||||
|
||||
- [Storybook Svelte CSF Addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf)
|
||||
- [Bits UI Documentation](https://bits-ui.com/docs/components)
|
||||
- [Lucide Icons](https://lucide.dev/icons/)
|
||||
@@ -45,7 +45,474 @@ pnpm upload:storybook
|
||||
To build and upload the Storybook in one command:
|
||||
|
||||
```bash
|
||||
pnpm publish:storybook
|
||||
pnpm storybook:publish
|
||||
```
|
||||
|
||||
This will build the Storybook and then upload it to R2.
|
||||
|
||||
## How to Create Storybook Stories
|
||||
|
||||
This guide documents the patterns and conventions for creating Storybook stories in the ClassroomIO UI component library.
|
||||
|
||||
### Table of Contents
|
||||
|
||||
- [File Structure](#file-structure)
|
||||
- [Basic Story Structure](#basic-story-structure)
|
||||
- [Import Patterns](#import-patterns)
|
||||
- [Story Definition](#story-definition)
|
||||
- [Template Snippets](#template-snippets)
|
||||
- [Fields File](#fields-file)
|
||||
- [Component Categorization](#component-categorization)
|
||||
- [CSS Class Conventions](#css-class-conventions)
|
||||
- [LMS Content Guidelines](#lms-content-guidelines)
|
||||
- [Examples](#examples)
|
||||
|
||||
### File Structure
|
||||
|
||||
#### Directory Organization
|
||||
|
||||
Stories are organized into two main categories:
|
||||
|
||||
- **Atoms** (`src/atoms/`): Basic, indivisible UI components (Button, Input, Badge, etc.)
|
||||
- **Molecules** (`src/molecules/`): Composite components made of multiple atoms (Card, Field, ButtonGroup, etc.)
|
||||
|
||||
#### File Naming
|
||||
|
||||
1. Create a directory matching the component name (kebab-case)
|
||||
2. Create a story file: `{component-name}.stories.svelte`
|
||||
3. Optionally create a fields file: `fields.ts` (for controls configuration)
|
||||
|
||||
**Example:**
|
||||
|
||||
```bash
|
||||
src/molecules/hover-card/
|
||||
├── hover-card.stories.svelte
|
||||
└── fields.ts
|
||||
```
|
||||
|
||||
### Basic Story Structure
|
||||
|
||||
Every story file follows this structure:
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// Component imports
|
||||
import * as ComponentName from '@cio/ui/base/component-name';
|
||||
|
||||
// Other imports (icons, utilities, etc.)
|
||||
import IconName from '@lucide/svelte/icons/icon-name';
|
||||
|
||||
// Fields import (if using controls)
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
// Story definition
|
||||
const { Story } = defineMeta({
|
||||
title: 'Category/ComponentName',
|
||||
component: ComponentName.Root, // or ComponentName for single components
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
// State variables (if needed)
|
||||
let someState = $state('');
|
||||
</script>
|
||||
|
||||
<Story name="StoryName">
|
||||
{#snippet template()}
|
||||
<!-- Component usage -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
### Import Patterns
|
||||
|
||||
#### Component Imports
|
||||
|
||||
- **Namespace imports** for multi-part components:
|
||||
|
||||
```svelte
|
||||
import * as HoverCard from '@cio/ui/base/hover-card'; import * as Card from '@cio/ui/base/card'; import * as Field
|
||||
from '@cio/ui/base/field';
|
||||
```
|
||||
|
||||
- **Named imports** for single components:
|
||||
|
||||
```svelte
|
||||
import {Button} from '@cio/ui/base/button'; import {Input} from '@cio/ui/base/input'; import {Avatar} from '@cio/ui/base/avatar';
|
||||
```
|
||||
|
||||
#### Icon Imports
|
||||
|
||||
Use Lucide Svelte icons:
|
||||
|
||||
```svelte
|
||||
import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days'; import UsersIcon from '@lucide/svelte/icons/users';
|
||||
import BookOpenIcon from '@lucide/svelte/icons/book-open';
|
||||
```
|
||||
|
||||
### Story Definition
|
||||
|
||||
#### Title Format
|
||||
|
||||
- **Atoms**: `'Atom/ComponentName'` (e.g., `'Atom/Button'`)
|
||||
- **Molecules**: `'Molecules/ComponentName'` (e.g., `'Molecules/HoverCard'`)
|
||||
|
||||
#### Component Reference
|
||||
|
||||
- For multi-part components, reference the `Root` component:
|
||||
|
||||
```svelte
|
||||
component: HoverCard.Root component: Card.Root
|
||||
```
|
||||
|
||||
- For single components, reference directly:
|
||||
|
||||
```svelte
|
||||
component: Button component: Input
|
||||
```
|
||||
|
||||
#### Parameters
|
||||
|
||||
Standard parameters configuration:
|
||||
|
||||
```svelte
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS // Only if using fields.ts
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Tags
|
||||
|
||||
Always include `tags: ['autodocs']` for automatic documentation generation.
|
||||
|
||||
### Template Snippets
|
||||
|
||||
#### Basic Template
|
||||
|
||||
```svelte
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<ComponentName.Root>
|
||||
<!-- Component content -->
|
||||
</ComponentName.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
#### Template with Args (for controls)
|
||||
|
||||
For atoms that need to pass args to controls:
|
||||
|
||||
```svelte
|
||||
<Story name="Default">
|
||||
{#snippet template(args)}
|
||||
<Button {...args}>Button Text</Button>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
#### Multiple Stories
|
||||
|
||||
Create multiple stories to showcase different use cases:
|
||||
|
||||
```svelte
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<!-- Basic usage -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Avatar">
|
||||
{#snippet template()}
|
||||
<!-- Avatar variant -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom Content">
|
||||
{#snippet template()}
|
||||
<!-- Custom content variant -->
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
### Fields File
|
||||
|
||||
Create a `fields.ts` file to control which props appear in Storybook controls:
|
||||
|
||||
```typescript
|
||||
export const FIELDS = ['class'] as string[];
|
||||
```
|
||||
|
||||
Common fields:
|
||||
|
||||
- `'class'` - CSS classes
|
||||
- `'variant'` - Component variants
|
||||
- `'size'` - Component sizes
|
||||
- `'disabled'` - Disabled state
|
||||
- Add more as needed based on component props
|
||||
|
||||
### Component Categorization
|
||||
|
||||
#### Atoms
|
||||
|
||||
Basic, indivisible components:
|
||||
|
||||
- Button, Input, Badge, Avatar, Label, Checkbox, Switch, etc.
|
||||
- Single-purpose components
|
||||
- Usually don't compose other components
|
||||
|
||||
#### Molecules
|
||||
|
||||
Composite components:
|
||||
|
||||
- Card, Field, ButtonGroup, HoverCard, Empty, etc.
|
||||
- Made of multiple atoms or other components
|
||||
- More complex functionality
|
||||
|
||||
**Guideline**: If a component uses multiple other components together, it's likely a molecule.
|
||||
|
||||
### CSS Class Conventions
|
||||
|
||||
#### UI Prefix
|
||||
|
||||
Use the `ui:` prefix for utility classes to scope them properly:
|
||||
|
||||
```svelte
|
||||
<!-- ✅ Correct -->
|
||||
<div class="ui:flex ui:flex-col ui:gap-6">
|
||||
<Button class="ui:w-full">
|
||||
|
||||
<!-- ❌ Incorrect -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<Button class="w-full">
|
||||
```
|
||||
|
||||
#### When to Use UI Prefix
|
||||
|
||||
- **Always use** for utility classes (flex, grid, gap, padding, margin, etc.)
|
||||
- **Don't use** for component-specific classes or data attributes
|
||||
- **Don't use** for Tailwind classes that are part of component styling
|
||||
|
||||
#### Examples
|
||||
|
||||
```svelte
|
||||
<!-- Utility classes - use ui: prefix -->
|
||||
<div class="ui:flex ui:items-center ui:gap-2">
|
||||
<div class="ui:space-y-2">
|
||||
<div class="ui:text-muted-foreground ui:text-sm">
|
||||
|
||||
<!-- Component classes - no prefix needed -->
|
||||
<Card.Root class="w-full max-w-sm">
|
||||
<HoverCard.Content class="w-80">
|
||||
```
|
||||
|
||||
### LMS Content Guidelines
|
||||
|
||||
Since ClassroomIO is an LMS platform, all story content should be **LMS-related**:
|
||||
|
||||
#### ✅ Good Examples
|
||||
|
||||
- **Courses**: "Introduction to Web Development", "Advanced React Patterns"
|
||||
- **Users**: "Sarah Johnson (Instructor)", "Alex Martinez (Student)"
|
||||
- **Content**: Course descriptions, assignment types, enrollment information
|
||||
- **Actions**: "Create Course", "Enroll Student", "Submit Assignment"
|
||||
- **States**: "No courses yet", "Student enrolled", "Assignment submitted"
|
||||
|
||||
#### ❌ Avoid
|
||||
|
||||
- Generic examples (Svelte, GitHub profiles, etc.)
|
||||
- Non-educational content
|
||||
- Examples that don't relate to learning/teaching
|
||||
|
||||
#### Content Patterns
|
||||
|
||||
**Instructor Profiles:**
|
||||
|
||||
```svelte
|
||||
<h4 class="text-sm font-semibold">Sarah Johnson</h4>
|
||||
<p class="text-sm">Senior Full-Stack Developer & Instructor</p>
|
||||
<span class="text-muted-foreground text-xs">Teaching since January 2020</span>
|
||||
```
|
||||
|
||||
**Course Information:**
|
||||
|
||||
```svelte
|
||||
<h4 class="text-sm font-semibold">Advanced React Patterns</h4>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Master advanced React concepts including hooks, context, performance optimization...
|
||||
</p>
|
||||
```
|
||||
|
||||
**Student Information:**
|
||||
|
||||
```svelte
|
||||
<h4 class="text-sm font-semibold">Alex Martinez</h4>
|
||||
<p class="text-muted-foreground text-xs">5 courses enrolled</p>
|
||||
<p class="text-muted-foreground text-xs">Active since March 2024</p>
|
||||
```
|
||||
|
||||
### Examples
|
||||
|
||||
#### Example 1: Simple Atom (Button)
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Atom/Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template(args)}
|
||||
<Button {...args}>Create Course</Button>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
#### Example 2: Multi-Part Molecule (HoverCard)
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days';
|
||||
import * as HoverCard from '@cio/ui/base/hover-card';
|
||||
import * as Avatar from '@cio/ui/base/avatar';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/HoverCard',
|
||||
component: HoverCard.Root,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Instructor Profile">
|
||||
{#snippet template()}
|
||||
<HoverCard.Root>
|
||||
<HoverCard.Trigger
|
||||
href="/instructors/sarah-johnson"
|
||||
class="ui:rounded-sm ui:underline-offset-4 ui:hover:underline"
|
||||
>
|
||||
Sarah Johnson
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Content class="w-80">
|
||||
<div class="flex justify-between space-x-4">
|
||||
<Avatar.Root>
|
||||
<Avatar.Image src="https://github.com/shadcn.png" />
|
||||
<Avatar.Fallback>SJ</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div class="space-y-1">
|
||||
<h4 class="text-sm font-semibold">Sarah Johnson</h4>
|
||||
<p class="text-sm">Senior Full-Stack Developer & Instructor</p>
|
||||
<div class="flex items-center pt-2">
|
||||
<CalendarDaysIcon class="me-2 size-4 opacity-70" />
|
||||
<span class="text-muted-foreground text-xs">Teaching since January 2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Content>
|
||||
</HoverCard.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
#### Example 3: Complex Molecule with State (Field)
|
||||
|
||||
```svelte
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/Field',
|
||||
component: Field.Field,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
let email = $state('');
|
||||
</script>
|
||||
|
||||
<Story name="Course Enrollment">
|
||||
{#snippet template()}
|
||||
<div class="w-lg">
|
||||
<Field.Set>
|
||||
<Field.Legend>Enroll Student</Field.Legend>
|
||||
<Field.Description>Add a new student to your course</Field.Description>
|
||||
<Field.Group>
|
||||
<Field.Field>
|
||||
<Field.Label for="student-email">Student Email</Field.Label>
|
||||
<Input id="student-email" type="email" bind:value={email} placeholder="[email protected]" />
|
||||
</Field.Field>
|
||||
</Field.Group>
|
||||
</Field.Set>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
```
|
||||
|
||||
### Checklist
|
||||
|
||||
When creating a new story, ensure:
|
||||
|
||||
- [ ] File is in the correct directory (`atoms/` or `molecules/`)
|
||||
- [ ] File is named `{component-name}.stories.svelte`
|
||||
- [ ] Imports use `@cio/ui/base/{component-name}` pattern
|
||||
- [ ] Title follows `'Category/ComponentName'` format
|
||||
- [ ] Component reference is correct (Root for multi-part, direct for single)
|
||||
- [ ] `tags: ['autodocs']` is included
|
||||
- [ ] All utility classes use `ui:` prefix
|
||||
- [ ] Content is LMS-related (courses, students, instructors, etc.)
|
||||
- [ ] Multiple stories showcase different use cases
|
||||
- [ ] `fields.ts` is created if controls are needed
|
||||
- [ ] State variables use `$state()` for reactivity
|
||||
- [ ] Icons are imported from `@lucide/svelte/icons/`
|
||||
|
||||
### Additional Notes
|
||||
|
||||
- **State Management**: Use Svelte 5 runes (`$state()`, `$derived()`) for reactive state
|
||||
- **Layout**: Most stories use `layout: 'centered'` in parameters
|
||||
- **Styling**: Prefer Tailwind utility classes with `ui:` prefix
|
||||
- **Accessibility**: Include proper ARIA labels and semantic HTML
|
||||
- **Documentation**: Story names should be descriptive and reflect the use case
|
||||
|
||||
### Resources
|
||||
|
||||
- [Storybook Svelte CSF Addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf)
|
||||
- [Bits UI Documentation](https://bits-ui.com/docs/components)
|
||||
- [Lucide Icons](https://lucide.dev/icons/)
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
"preview": "storybook preview",
|
||||
"format": "prettier --write .",
|
||||
"build-storybook": "storybook build",
|
||||
"upload:storybook": "tsx scripts/upload-storybook.ts",
|
||||
"publish:storybook": "pnpm build-storybook && pnpm upload:storybook"
|
||||
"storybook:upload": "tsx scripts/upload-storybook.ts",
|
||||
"storybook:publish": "pnpm build-storybook && pnpm storybook:upload"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cio/ui": "workspace:*"
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import * as Alert from '@cio/ui/base/alert';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import SparklesIcon from '@lucide/svelte/icons/sparkles';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Atom/Alert',
|
||||
component: Alert.Root,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<Alert.Callout
|
||||
variant="default"
|
||||
title="Heads up!"
|
||||
description="You can add components to your app using the cli."
|
||||
/>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Information">
|
||||
{#snippet template()}
|
||||
<Alert.Callout
|
||||
variant="information"
|
||||
title="Note"
|
||||
description="Here’s some helpful information you might want to know."
|
||||
/>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Destructive">
|
||||
{#snippet template()}
|
||||
<Alert.Callout variant="destructive" title="Error" description="Your session has expired. Please log in again." />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Warning">
|
||||
{#snippet template()}
|
||||
<Alert.Callout
|
||||
variant="warning"
|
||||
title="Warning"
|
||||
description="This action may have unintended consequences. Please review before continuing."
|
||||
/>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom composition">
|
||||
{#snippet template()}
|
||||
<Alert.Root variant="default" class="max-w-md">
|
||||
<SparklesIcon />
|
||||
<Alert.Title>Custom alert</Alert.Title>
|
||||
<Alert.Description>
|
||||
For full control you can compose Alert.Root, Alert.Title, and Alert.Description with any icon or extra content
|
||||
(e.g. buttons or links).
|
||||
</Alert.Description>
|
||||
<div class="col-start-2 mt-2 flex gap-2">
|
||||
<Button variant="outline" size="sm">Dismiss</Button>
|
||||
<Button size="sm">Learn more</Button>
|
||||
</div>
|
||||
</Alert.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -30,6 +30,18 @@
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Warning">
|
||||
{#snippet template()}
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Success">
|
||||
{#snippet template()}
|
||||
<Badge variant="success">Success</Badge>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Outline">
|
||||
{#snippet template()}
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
@@ -42,6 +54,8 @@
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<Popover.Content class="w-80">
|
||||
<div class="grid gap-4">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-medium leading-none">Dimensions</h4>
|
||||
<h4 class="leading-none font-medium">Dimensions</h4>
|
||||
<p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
@@ -70,7 +70,7 @@
|
||||
<Popover.Content class="w-80">
|
||||
<div class="grid gap-4">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-medium leading-none">Settings</h4>
|
||||
<h4 class="leading-none font-medium">Settings</h4>
|
||||
<p class="text-muted-foreground text-sm">Manage your account settings.</p>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import * as ToggleGroup from '@cio/ui/base/toggle-group';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Atom/ToggleGroup',
|
||||
component: ToggleGroup.Root,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Single Select">
|
||||
{#snippet template()}
|
||||
<ToggleGroup.Root type="single" value="true" variant="outline">
|
||||
<ToggleGroup.Item value="true">True</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="false">False</ToggleGroup.Item>
|
||||
</ToggleGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Multiple Select">
|
||||
{#snippet template()}
|
||||
<ToggleGroup.Root type="multiple" value={['email']} variant="outline" size="sm" spacing={2}>
|
||||
<ToggleGroup.Item value="email">Email</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="sms">SMS</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="push">Push</ToggleGroup.Item>
|
||||
</ToggleGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -385,7 +385,7 @@
|
||||
<div class="text-sm font-medium">Agent Tasks</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="*:[p:not(:last-child)]:mb-2 p-4 text-sm">
|
||||
<div class="p-4 text-sm *:[p:not(:last-child)]:mb-2">
|
||||
<Textarea placeholder="Describe your task in natural language." class="mb-4 resize-none" />
|
||||
<p class="font-medium">Start a new task with Copilot</p>
|
||||
<p class="text-muted-foreground">
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
|
||||
import * as Code from '@cio/ui/custom/code';
|
||||
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/Code',
|
||||
component: Code.Root,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
const sampleTypeScript = `function greet(name: string) {
|
||||
return \`Hello, \${name}!\`;
|
||||
}
|
||||
|
||||
const message = greet("World");
|
||||
console.log(message);`;
|
||||
|
||||
const sampleBash = `# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Run development server
|
||||
pnpm dev`;
|
||||
|
||||
const sampleJson = `{
|
||||
"name": "@cio/ui",
|
||||
"version": "0.0.1",
|
||||
"type": "module"
|
||||
}`;
|
||||
|
||||
const sampleSvelte = [
|
||||
'<script lang="ts">',
|
||||
' let { count = 0 }: { count?: number } = $props();',
|
||||
'</' + 'script>',
|
||||
'',
|
||||
'<button onclick={() => count++}>',
|
||||
' Count: {count}',
|
||||
'</button>'
|
||||
].join('\n');
|
||||
|
||||
const longCode = `// Example: Long code block for overflow demo
|
||||
export function useCode(props: CodeRootStateProps) {
|
||||
return ctx.set(new CodeRootState(props, overflowCtx.getOr(undefined)));
|
||||
}
|
||||
|
||||
export function useCodeCopyButton() {
|
||||
return new CodeCopyButtonState(ctx.get());
|
||||
}
|
||||
|
||||
const overflowCtx = new Context<CodeOverflowState>('code-overflow-state');
|
||||
const ctx = new Context<CodeRootState>('code-root-state');
|
||||
|
||||
class CodeRootState {
|
||||
highlighter: HighlighterCore | null = $state(null);
|
||||
|
||||
constructor(
|
||||
readonly opts: CodeRootStateProps,
|
||||
readonly overflow?: CodeOverflowState
|
||||
) {
|
||||
highlighter.then((hl) => (this.highlighter = hl));
|
||||
}
|
||||
|
||||
highlight(code: string) {
|
||||
return this.highlighter?.codeToHtml(code, {
|
||||
lang: this.opts.lang.current,
|
||||
themes: { light: 'github-light-default', dark: 'github-dark-default' }
|
||||
});
|
||||
}
|
||||
}`;
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-3xl">
|
||||
<Code.Root code={sampleTypeScript} lang="typescript" />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Copy Button">
|
||||
{#snippet template()}
|
||||
<div class="ui:relative ui:w-full ui:max-w-3xl">
|
||||
<Code.Root code={sampleTypeScript} lang="typescript">
|
||||
<Code.CopyButton />
|
||||
</Code.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Variants">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-6 ui:w-full ui:max-w-3xl">
|
||||
<div>
|
||||
<p class="ui:mb-2 ui:text-sm ui:font-medium ui:text-muted-foreground">Default variant</p>
|
||||
<Code.Root code={sampleTypeScript} lang="typescript" variant="default">
|
||||
<Code.CopyButton />
|
||||
</Code.Root>
|
||||
</div>
|
||||
<div>
|
||||
<p class="ui:mb-2 ui:text-sm ui:font-medium ui:text-muted-foreground">Secondary variant</p>
|
||||
<Code.Root code={sampleTypeScript} lang="typescript" variant="secondary">
|
||||
<Code.CopyButton />
|
||||
</Code.Root>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Languages">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-6 ui:w-full ui:max-w-3xl">
|
||||
<Code.Block filename="example.ts" code={sampleTypeScript} />
|
||||
<Code.Block filename="script.sh" code={sampleBash} />
|
||||
<Code.Block filename="package.json" code={sampleJson} />
|
||||
<Code.Block filename="Component.svelte" code={sampleSvelte} />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Line Highlighting">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-2xl">
|
||||
<Code.Root code={sampleTypeScript} lang="typescript" highlight={[2, [4, 5]]} />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Hide Line Numbers">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-2xl">
|
||||
<Code.Root code={sampleTypeScript} lang="typescript" hideLines={true} />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Overflow">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-2xl">
|
||||
<Code.Overflow>
|
||||
<Code.Root code={longCode} lang="typescript">
|
||||
<Code.CopyButton />
|
||||
</Code.Root>
|
||||
</Code.Overflow>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Overflow Expanded">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-2xl">
|
||||
<Code.Overflow collapsed={false}>
|
||||
<Code.Root code={longCode} lang="typescript">
|
||||
<Code.CopyButton />
|
||||
</Code.Root>
|
||||
</Code.Overflow>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1 @@
|
||||
export const FIELDS = ['ref', 'variant', 'lang', 'code', 'class', 'hideLines', 'highlight'] as string[];
|
||||
@@ -0,0 +1,46 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { DocumentCard } from '@cio/ui';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/DocumentCard',
|
||||
component: DocumentCard,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="WithViewAndDownload">
|
||||
<DocumentCard
|
||||
title="report.pdf"
|
||||
subtitle="PDF · 2.4 MB"
|
||||
fileUrl="https://example.com/report.pdf"
|
||||
viewLabel="View"
|
||||
downloadLabel="Download"
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="WithoutUrl">
|
||||
<DocumentCard title="draft.docx" subtitle="DOCX · 156 KB" />
|
||||
</Story>
|
||||
|
||||
<Story name="WithCustomActions">
|
||||
<DocumentCard title="lesson-doc.pdf" subtitle="PDF · 1.2 MB">
|
||||
{#snippet actions()}
|
||||
<button
|
||||
type="button"
|
||||
class="ui:border-input ui:bg-background ui:text-foreground hover:ui:bg-accent hover:ui:text-accent-foreground ui:shrink ui:inline-flex ui:items-center ui:gap-1.5 ui:rounded-md ui:border ui:px-3 ui:py-1.5 ui:text-sm ui:font-medium"
|
||||
>
|
||||
View PDF
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ui:border-input ui:bg-background ui:text-foreground hover:ui:bg-accent hover:ui:text-accent-foreground ui:shrink ui:inline-flex ui:items-center ui:gap-1.5 ui:rounded-md ui:border ui:px-3 ui:py-1.5 ui:text-sm ui:font-medium"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
{/snippet}
|
||||
</DocumentCard>
|
||||
</Story>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { ExerciseQuestion } from '@cio/ui';
|
||||
import QuestionTypeModes from './question-type-modes.svelte';
|
||||
import {
|
||||
CHECKBOX_FIXTURE,
|
||||
FILE_UPLOAD_FIXTURE,
|
||||
FILL_BLANK_FIXTURE,
|
||||
HOTSPOT_FIXTURE,
|
||||
LINK_FIXTURE,
|
||||
MATCHING_FIXTURE,
|
||||
NUMERIC_FIXTURE,
|
||||
ORDERING_FIXTURE,
|
||||
RADIO_FIXTURE,
|
||||
SHORT_ANSWER_FIXTURE,
|
||||
TEXTAREA_FIXTURE,
|
||||
TRUE_FALSE_FIXTURE
|
||||
} from './question-fixtures';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/ExerciseQuestion',
|
||||
component: ExerciseQuestion.QuestionRenderer,
|
||||
parameters: {
|
||||
layout: 'padded'
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Checkbox">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={CHECKBOX_FIXTURE.question} answer={CHECKBOX_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="FileUpload">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={FILE_UPLOAD_FIXTURE.question} answer={FILE_UPLOAD_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="FillBlank">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={FILL_BLANK_FIXTURE.question} answer={FILL_BLANK_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Hotspot"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'**Hidden in the app** – This question type is not shown in the exercise editor dropdown. Still in development.'
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#snippet template()}
|
||||
<div
|
||||
class="ui:mb-4 ui:rounded-md ui:border ui:border-amber-500/50 ui:bg-amber-500/10 ui:px-4 ui:py-3 ui:text-sm ui:text-amber-800 ui:dark:text-amber-200"
|
||||
>
|
||||
<strong>Hidden – still in development.</strong> Not available in the exercise editor.
|
||||
</div>
|
||||
<QuestionTypeModes question={HOTSPOT_FIXTURE.question} answer={HOTSPOT_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Link">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={LINK_FIXTURE.question} answer={LINK_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Matching"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'**Hidden in the app** – This question type is not shown in the exercise editor dropdown. Still in development.'
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#snippet template()}
|
||||
<div
|
||||
class="ui:mb-4 ui:rounded-md ui:border ui:border-amber-500/50 ui:bg-amber-500/10 ui:px-4 ui:py-3 ui:text-sm ui:text-amber-800 ui:dark:text-amber-200"
|
||||
>
|
||||
<strong>Hidden – still in development.</strong> Not available in the exercise editor.
|
||||
</div>
|
||||
<QuestionTypeModes question={MATCHING_FIXTURE.question} answer={MATCHING_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Numeric">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={NUMERIC_FIXTURE.question} answer={NUMERIC_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Ordering">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={ORDERING_FIXTURE.question} answer={ORDERING_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Radio">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={RADIO_FIXTURE.question} answer={RADIO_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="ShortAnswer">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={SHORT_ANSWER_FIXTURE.question} answer={SHORT_ANSWER_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Textarea">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={TEXTAREA_FIXTURE.question} answer={TEXTAREA_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="TrueFalse">
|
||||
{#snippet template()}
|
||||
<QuestionTypeModes question={TRUE_FALSE_FIXTURE.question} answer={TRUE_FALSE_FIXTURE.answer} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,210 @@
|
||||
export interface QuestionStoryFixture {
|
||||
question: Record<string, unknown>;
|
||||
answer?: unknown;
|
||||
}
|
||||
|
||||
const OPTION_IMAGE_A = 'https://brand.cdn.clsrio.com/classroomio-lms-courses.png';
|
||||
const OPTION_IMAGE_B = 'https://assets.cdn.clsrio.com/www/futuristic-classroom.jpg';
|
||||
|
||||
export const RADIO_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-radio',
|
||||
key: 'q-radio',
|
||||
title: 'Which runtime powers most ClassroomIO backend APIs? [RADIO]',
|
||||
questionType: 'RADIO',
|
||||
settings: {
|
||||
description: 'Choose one option.',
|
||||
imageUrls: ['https://brand.cdn.clsrio.com/classroomio-courses.png']
|
||||
},
|
||||
options: [
|
||||
{
|
||||
id: 1001,
|
||||
label: 'Node.js',
|
||||
value: 'nodejs',
|
||||
isCorrect: true,
|
||||
settings: { imageUrl: OPTION_IMAGE_A }
|
||||
},
|
||||
{
|
||||
id: 1002,
|
||||
label: 'PHP',
|
||||
value: 'php',
|
||||
settings: { imageUrl: OPTION_IMAGE_B }
|
||||
},
|
||||
{ id: 1003, label: 'Ruby', value: 'ruby' }
|
||||
]
|
||||
},
|
||||
answer: 1001
|
||||
};
|
||||
|
||||
export const CHECKBOX_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-checkbox',
|
||||
key: 'q-checkbox',
|
||||
title: 'Select benefits of TypeScript for an LMS product. [CHECKBOX]',
|
||||
questionType: 'CHECKBOX',
|
||||
settings: {
|
||||
description: 'Select one or more options.'
|
||||
},
|
||||
options: [
|
||||
{
|
||||
id: 2001,
|
||||
label: 'Better editor autocompletion',
|
||||
value: 'autocomplete',
|
||||
isCorrect: true,
|
||||
settings: { imageUrl: OPTION_IMAGE_A }
|
||||
},
|
||||
{ id: 2002, label: 'No build tools needed', value: 'no-build-tools' },
|
||||
{
|
||||
id: 2003,
|
||||
label: 'Safer refactoring',
|
||||
value: 'safer-refactor',
|
||||
isCorrect: true,
|
||||
settings: { imageUrl: OPTION_IMAGE_B }
|
||||
}
|
||||
]
|
||||
},
|
||||
answer: ['2001', '2003']
|
||||
};
|
||||
|
||||
export const TEXTAREA_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-textarea',
|
||||
key: 'q-textarea',
|
||||
title: 'Explain why exercise feedback should be specific. [TEXTAREA]',
|
||||
questionType: 'TEXTAREA',
|
||||
settings: {
|
||||
description: 'Provide a detailed response.'
|
||||
}
|
||||
},
|
||||
answer: '<p>Specific feedback helps students improve on the next attempt quickly.</p>'
|
||||
};
|
||||
|
||||
export const TRUE_FALSE_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-true-false',
|
||||
key: 'q-true-false',
|
||||
title: 'True or False: Multiple-choice questions can be auto-graded. [TRUE_FALSE]',
|
||||
questionType: 'TRUE_FALSE',
|
||||
options: [
|
||||
{ id: 4001, label: 'True', value: 'true' },
|
||||
{ id: 4002, label: 'False', value: 'false', isCorrect: false }
|
||||
],
|
||||
settings: {
|
||||
correctValue: true
|
||||
}
|
||||
},
|
||||
answer: true
|
||||
};
|
||||
|
||||
export const SHORT_ANSWER_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-short-answer',
|
||||
key: 'q-short-answer',
|
||||
title: 'Name one strategy for reducing flaky frontend tests. [SHORT_ANSWER]',
|
||||
questionType: 'SHORT_ANSWER',
|
||||
settings: {
|
||||
instructions: 'Answer in one sentence.'
|
||||
}
|
||||
},
|
||||
answer: 'Use deterministic test fixtures'
|
||||
};
|
||||
|
||||
export const NUMERIC_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-numeric',
|
||||
key: 'q-numeric',
|
||||
title: 'How many minutes are in a 1.5 hour workshop? [NUMERIC]',
|
||||
questionType: 'NUMERIC',
|
||||
settings: { correctValue: 90, tolerance: 0 }
|
||||
},
|
||||
answer: 90
|
||||
};
|
||||
|
||||
export const FILL_BLANK_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-fill-blank',
|
||||
key: 'q-fill-blank',
|
||||
title: 'An ___ endpoint should be idempotent when using PUT. [FILL_BLANK]',
|
||||
questionType: 'FILL_BLANK',
|
||||
settings: { acceptedAnswers: 'API,endpoint' }
|
||||
},
|
||||
answer: ['API']
|
||||
};
|
||||
|
||||
export const FILE_UPLOAD_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-file-upload',
|
||||
key: 'q-file-upload',
|
||||
title: 'Upload your lesson plan document. [FILE_UPLOAD]',
|
||||
questionType: 'FILE_UPLOAD',
|
||||
settings: {
|
||||
acceptedTypes: [
|
||||
'application/pdf',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/msword'
|
||||
],
|
||||
maxSizeMb: 2
|
||||
}
|
||||
},
|
||||
answer: 'lesson-plan-week-03.pdf'
|
||||
};
|
||||
|
||||
export const MATCHING_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-matching',
|
||||
key: 'q-matching',
|
||||
title: 'Match each layer to the ClassroomIO responsibility. [MATCHING]',
|
||||
questionType: 'MATCHING',
|
||||
settings: {
|
||||
pairs: [
|
||||
{ left: 'API', right: 'request validation' },
|
||||
{ left: 'DB', right: 'persistent storage' }
|
||||
]
|
||||
}
|
||||
},
|
||||
answer: { API: 'request validation', DB: 'persistent storage' }
|
||||
};
|
||||
|
||||
export const ORDERING_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-ordering',
|
||||
key: 'q-ordering',
|
||||
title: 'Order these release steps for a new exercise type. [ORDERING]',
|
||||
questionType: 'ORDERING',
|
||||
options: [
|
||||
{ id: 'order-1', label: 'Design schema', value: 'Design schema' },
|
||||
{ id: 'order-2', label: 'Implement renderer', value: 'Implement renderer' },
|
||||
{ id: 'order-3', label: 'Ship to production', value: 'Ship to production' }
|
||||
],
|
||||
settings: {
|
||||
items: ['Design schema', 'Implement renderer', 'Ship to production']
|
||||
}
|
||||
},
|
||||
answer: ['order-1', 'order-2', 'order-3']
|
||||
};
|
||||
|
||||
export const HOTSPOT_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-hotspot',
|
||||
key: 'q-hotspot',
|
||||
title: 'Mark where the submit button should appear in the layout. [HOTSPOT]',
|
||||
questionType: 'HOTSPOT',
|
||||
settings: {
|
||||
hotspots: [{ x: 46, y: 68 }]
|
||||
}
|
||||
},
|
||||
answer: { points: [{ x: 46, y: 68 }] }
|
||||
};
|
||||
|
||||
export const LINK_FIXTURE: QuestionStoryFixture = {
|
||||
question: {
|
||||
id: 'q-link',
|
||||
key: 'q-link',
|
||||
title: 'Share the resources you used while solving this exercise. [LINK]',
|
||||
questionType: 'LINK',
|
||||
settings: {
|
||||
instructions: 'Add one or more relevant links.'
|
||||
}
|
||||
},
|
||||
answer: ['https://classroomio.com/docs', 'https://www.svelte.dev']
|
||||
};
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Hardcoded English labels for ExerciseQuestion Storybook demos.
|
||||
*
|
||||
* These keys must stay in sync with apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts,
|
||||
* which provides translated values via getExerciseQuestionLabels(). When adding or changing labels for a question type,
|
||||
* update both files.
|
||||
*/
|
||||
export const QUESTION_LABELS = {
|
||||
'common.option_prefix': 'Option',
|
||||
'common.remove': 'Remove',
|
||||
'common.add_option': 'Add option',
|
||||
'common.correct_badge': '(Correct)',
|
||||
'common.not_set': 'Not set',
|
||||
'navigation.previous': 'Previous',
|
||||
'navigation.next': 'Next',
|
||||
'navigation.finish': 'Finish',
|
||||
'question.edit.title_label': 'Title',
|
||||
'question.edit.title_placeholder': 'Question prompt',
|
||||
'question.edit.description_label': 'Description (optional)',
|
||||
'question.edit.description_placeholder': 'Add additional context for this question',
|
||||
'question.edit.add_description': 'Add description',
|
||||
'question.edit.remove_description': 'Remove description',
|
||||
'question.edit.media_menu_sr': 'Question extras menu',
|
||||
'question.edit.add_image': 'Add image',
|
||||
'question.edit.add_video': 'Add video',
|
||||
'question.edit.remove_image_tooltip': 'Remove image',
|
||||
'question.edit.remove_image_sr': 'Remove image',
|
||||
'question.edit.remove_video_tooltip': 'Remove video',
|
||||
'question.edit.remove_video_sr': 'Remove video',
|
||||
'question.edit.image_alt': 'Question context',
|
||||
'question.edit.video_modal_title': 'Add YouTube video',
|
||||
'question.edit.video_link_label': 'YouTube link',
|
||||
'question.edit.video_link_placeholder': 'https://www.youtube.com/watch?v=',
|
||||
'question.edit.video_add_button': 'Add video',
|
||||
'question.edit.video_invalid_link': 'Please enter a valid YouTube link.',
|
||||
'question.edit.upload_error_only_images': 'Only image files are supported.',
|
||||
'question.edit.upload_error_skipped': 'Some files were skipped because they are not images.',
|
||||
'question.edit.upload_error_failed': 'Failed to upload image. Try again.',
|
||||
'radio.edit.helper': 'Select exactly one correct option.',
|
||||
'radio.edit.correct_selected_tooltip': 'Correct answer selected',
|
||||
'radio.edit.mark_correct_tooltip': 'Mark as correct answer',
|
||||
'radio.edit.mark_correct_sr': 'Mark option as correct',
|
||||
'checkbox.edit.helper': 'Mark one or more options as correct.',
|
||||
'checkbox.edit.correct_selected_tooltip': 'Correct answer selected',
|
||||
'checkbox.edit.toggle_correct_tooltip': 'Toggle correct answer',
|
||||
'checkbox.edit.toggle_correct_sr': 'Toggle option as correct',
|
||||
'true_false.true_label': 'True',
|
||||
'true_false.false_label': 'False',
|
||||
'true_false.edit.correct_answer_label': 'Correct answer',
|
||||
'true_false.preview.correct_value_label': 'Correct value',
|
||||
'short_answer.edit.instructions_placeholder': 'Optional instructions',
|
||||
'short_answer.take.placeholder': 'Type your answer',
|
||||
'short_answer.preview.helper': 'Free-text answer question.',
|
||||
'numeric.edit.correct_value_label': 'Correct value',
|
||||
'numeric.edit.correct_value_info': 'Expected numeric answer to mark as correct.',
|
||||
'numeric.edit.tolerance_label': 'Tolerance',
|
||||
'numeric.edit.tolerance_info': 'Allowed +/- range from the correct value.',
|
||||
'numeric.edit.correct_value_placeholder': 'Correct value',
|
||||
'numeric.edit.tolerance_placeholder': 'Tolerance',
|
||||
'numeric.take.placeholder': 'Enter a number',
|
||||
'numeric.preview.correct_value_label': 'Correct value',
|
||||
'numeric.preview.tolerance_label': 'Tolerance',
|
||||
'fill_blank.edit.accepted_answers_placeholder': 'Accepted answers (comma separated)',
|
||||
'fill_blank.take.placeholder': 'Enter answers separated by commas',
|
||||
'fill_blank.preview.accepted_answers_label': 'Accepted answers',
|
||||
'file_upload.edit.accepted_types_placeholder': 'Select accepted file formats',
|
||||
'file_upload.edit.max_size_placeholder': 'Max size (MB)',
|
||||
'file_upload.take.selected_file_label': 'Selected file',
|
||||
'file_upload.take.upload_button': 'Upload',
|
||||
'file_upload.take.upload_progress': 'Uploading...',
|
||||
'file_upload.take.upload_error': 'Upload failed',
|
||||
'file_upload.take.view': 'View',
|
||||
'file_upload.take.download': 'Download',
|
||||
'file_upload.preview.accepted_types_label': 'Accepted types',
|
||||
'file_upload.preview.max_size_label': 'Max size (MB)',
|
||||
'link.edit.instructions_placeholder': 'Optional instructions for learners',
|
||||
'link.edit.helper': 'Learners can submit one or more valid URLs (http/https).',
|
||||
'link.take.helper': 'Add one or more links. Only valid http/https URLs are accepted.',
|
||||
'link.take.placeholder': 'https://example.com/resource-{index}',
|
||||
'link.take.remove_tooltip': 'Remove link',
|
||||
'link.take.remove_sr': 'Remove link',
|
||||
'link.take.invalid_url_error': 'Please enter a valid URL (http/https).',
|
||||
'link.take.add_button': 'Add link',
|
||||
'link.preview.empty': 'No links submitted.',
|
||||
'link.preview.item_label': 'Link {index}',
|
||||
'matching.edit.helper': 'Configure pairs in question settings via host app controls.',
|
||||
'matching.take.placeholder': 'Provide matching pairs as JSON',
|
||||
'matching.preview.helper': 'Matching pairs preview is provided by host app settings.',
|
||||
'ordering.fallback_step_prefix': 'Step',
|
||||
'ordering.edit.helper': 'Drag items to define the correct order.',
|
||||
'ordering.edit.add_step': 'Add step',
|
||||
'ordering.edit.empty': 'Add steps, then drag to set the expected order.',
|
||||
'ordering.edit.step_placeholder': 'Step {index}',
|
||||
'ordering.edit.remove_step_tooltip': 'Remove step',
|
||||
'ordering.take.helper': 'Drag and drop to arrange the items in the correct order.',
|
||||
'ordering.take.empty': 'No ordering items are configured for this question yet.',
|
||||
'ordering.preview.submitted_label': 'Submitted order',
|
||||
'ordering.preview.expected_label': 'Expected order',
|
||||
'ordering.preview.matches': 'Submitted order matches expected order.',
|
||||
'ordering.preview.differs': 'Submitted order differs from expected order.',
|
||||
'hotspot.edit.helper': 'Configure hotspot image and zones in question settings via host app controls.',
|
||||
'hotspot.take.placeholder': 'Provide hotspot coordinates as JSON',
|
||||
'hotspot.preview.helper': 'Hotspot preview is provided by host app image and hotspot settings.',
|
||||
'textarea.edit.placeholder': 'Learners will answer with long-form text',
|
||||
'textarea.take.placeholder': 'Write your answer',
|
||||
'submission.common.no_answer': 'No answer',
|
||||
'submission.common.other': 'Other',
|
||||
'submission.chart.responses': 'Responses',
|
||||
'submission.chart.no_data': 'No responses yet',
|
||||
'submission.list.responses': 'Responses',
|
||||
'submission.list.no_responses': 'No responses yet'
|
||||
} as const;
|
||||
@@ -0,0 +1,194 @@
|
||||
<script lang="ts">
|
||||
import { ExerciseQuestion } from '@cio/ui';
|
||||
import { QUESTION_LABELS } from './question-labels';
|
||||
|
||||
interface Props {
|
||||
question: Record;
|
||||
answer?: unknown;
|
||||
}
|
||||
|
||||
type StoryQuestion = {
|
||||
id?: string | number;
|
||||
key?: string;
|
||||
questionType?: string;
|
||||
options?: Array<{ id?: string | number; label?: string; value?: string }>;
|
||||
settings?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
let { question, answer = null }: Props = $props();
|
||||
|
||||
function cloneQuestion(source: Record) {
|
||||
return JSON.parse(JSON.stringify(source));
|
||||
}
|
||||
|
||||
function toStringArray(value: unknown): string[] {
|
||||
if (!Array.isArray(value)) return [];
|
||||
return value.map((item) => String(item || '').trim()).filter(Boolean);
|
||||
}
|
||||
|
||||
function buildSubmissionAnswerData(storyQuestion: StoryQuestion, index: number): Record<string, unknown> | null {
|
||||
const questionType = String(storyQuestion.questionType || 'SHORT_ANSWER');
|
||||
const options = storyQuestion.options || [];
|
||||
const optionIds = options
|
||||
.map((option) => option.id)
|
||||
.filter((id): id is string | number => id !== undefined && id !== null);
|
||||
|
||||
switch (questionType) {
|
||||
case 'RADIO':
|
||||
return {
|
||||
type: 'RADIO',
|
||||
optionId: Number(optionIds[index % Math.max(optionIds.length, 1)] ?? 1)
|
||||
};
|
||||
case 'CHECKBOX':
|
||||
return {
|
||||
type: 'CHECKBOX',
|
||||
optionIds:
|
||||
optionIds.length > 1 ? [Number(optionIds[0]), Number(optionIds[(index + 1) % optionIds.length])] : [1]
|
||||
};
|
||||
case 'TRUE_FALSE':
|
||||
return { type: 'TRUE_FALSE', value: index % 3 !== 0 };
|
||||
case 'TEXTAREA':
|
||||
return {
|
||||
type: 'TEXTAREA',
|
||||
text:
|
||||
index % 3 === 0
|
||||
? '<p><strong>Specific feedback</strong> helps learners understand what to improve next.</p>'
|
||||
: index % 3 === 1
|
||||
? '<p>Break the task into <em>small measurable steps</em> and review each milestone.</p>'
|
||||
: '<p>Use the rubric as a checklist before submission.</p>'
|
||||
};
|
||||
case 'SHORT_ANSWER':
|
||||
return { type: 'SHORT_ANSWER', text: 'Use deterministic fixtures' };
|
||||
case 'NUMERIC':
|
||||
return { type: 'NUMERIC', value: 88 + (index % 6) };
|
||||
case 'FILL_BLANK':
|
||||
return {
|
||||
type: 'FILL_BLANK',
|
||||
values: index % 2 === 0 ? ['API'] : ['endpoint']
|
||||
};
|
||||
case 'FILE_UPLOAD':
|
||||
return {
|
||||
type: 'FILE_UPLOAD',
|
||||
fileKey: `uploads/story-${index + 1}.pdf`,
|
||||
fileName: `lesson-plan-${index + 1}.pdf`,
|
||||
mimeType: 'application/pdf'
|
||||
};
|
||||
case 'MATCHING': {
|
||||
const pairs = Array.isArray(storyQuestion.settings?.pairs)
|
||||
? (storyQuestion.settings?.pairs as Array<{ left: string; right: string }>)
|
||||
: [
|
||||
{ left: 'API', right: 'request validation' },
|
||||
{ left: 'DB', right: 'persistent storage' }
|
||||
];
|
||||
|
||||
return { type: 'MATCHING', pairs };
|
||||
}
|
||||
case 'ORDERING': {
|
||||
const settingsItems = toStringArray(storyQuestion.settings?.items);
|
||||
const optionValues = options.map((option) => String(option.value || option.label || '').trim()).filter(Boolean);
|
||||
const orderedValues = settingsItems.length > 0 ? settingsItems : optionValues;
|
||||
return { type: 'ORDERING', orderedValues: orderedValues.length > 0 ? orderedValues : ['Step 1', 'Step 2'] };
|
||||
}
|
||||
case 'HOTSPOT':
|
||||
return {
|
||||
type: 'HOTSPOT',
|
||||
coordinates: [{ x: 40 + (index % 4) * 10, y: 50 + (index % 3) * 8 }]
|
||||
};
|
||||
case 'LINK':
|
||||
return {
|
||||
type: 'LINK',
|
||||
urls: [`https://example.com/resource-${index + 1}`]
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function buildSubmissionResponses(storyQuestion: StoryQuestion) {
|
||||
const questionId = storyQuestion.id ?? storyQuestion.key ?? 'story-question';
|
||||
|
||||
return Array.from({ length: 12 }, (_, index) => {
|
||||
const answerData = buildSubmissionAnswerData(storyQuestion, index);
|
||||
|
||||
return {
|
||||
id: `submission-${index + 1}`,
|
||||
studentName: `Student ${index + 1}`,
|
||||
answers: answerData
|
||||
? [
|
||||
{
|
||||
questionId,
|
||||
answerData
|
||||
}
|
||||
]
|
||||
: []
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
let editQuestion = $state<Record<string, unknown>>({});
|
||||
let viewAnswer = $state<unknown>(null);
|
||||
|
||||
const submissionResponses = $derived(buildSubmissionResponses(question as StoryQuestion));
|
||||
|
||||
$effect(() => {
|
||||
editQuestion = cloneQuestion(question);
|
||||
viewAnswer = answer;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ui:mb-5 ui:space-y-4">
|
||||
<div class="ui:rounded-md ui:border ui:p-4 ui:space-y-3">
|
||||
<p class="ui:text-sm ui:font-semibold">View Mode</p>
|
||||
<ExerciseQuestion.QuestionRenderer
|
||||
showContainer={false}
|
||||
contract={{
|
||||
mode: 'view',
|
||||
question,
|
||||
answer: viewAnswer,
|
||||
labels: QUESTION_LABELS
|
||||
}}
|
||||
onAnswerChange={(nextAnswer) => (viewAnswer = nextAnswer)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ui:rounded-md ui:border ui:p-4 ui:space-y-3">
|
||||
<p class="ui:text-sm ui:font-semibold">Edit Mode</p>
|
||||
<ExerciseQuestion.QuestionRenderer
|
||||
showContainer={false}
|
||||
contract={{
|
||||
mode: 'edit',
|
||||
question: editQuestion,
|
||||
labels: QUESTION_LABELS
|
||||
}}
|
||||
onQuestionChange={(nextQuestion) => (editQuestion = nextQuestion)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ui:rounded-md ui:border ui:p-4 ui:space-y-3">
|
||||
<p class="ui:text-sm ui:font-semibold">Preview Mode</p>
|
||||
<ExerciseQuestion.QuestionRenderer
|
||||
showContainer={false}
|
||||
contract={{
|
||||
mode: 'preview',
|
||||
question,
|
||||
answer: viewAnswer,
|
||||
labels: QUESTION_LABELS,
|
||||
disabled: true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ui:rounded-md ui:border ui:p-4 ui:space-y-3">
|
||||
<p class="ui:text-sm ui:font-semibold">Submission Mode (12 respondents)</p>
|
||||
<ExerciseQuestion.QuestionRenderer
|
||||
showContainer={false}
|
||||
contract={{
|
||||
mode: 'submission',
|
||||
question,
|
||||
submissions: submissionResponses,
|
||||
labels: QUESTION_LABELS,
|
||||
disabled: true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,7 +25,6 @@
|
||||
});
|
||||
|
||||
let courseType = $state();
|
||||
let courseVersion = $state();
|
||||
let assignmentType = $state();
|
||||
let notificationPreference = $state('email');
|
||||
let deliveryMethod = $state('live-class');
|
||||
@@ -36,12 +35,6 @@
|
||||
{ value: 'hybrid', label: 'Hybrid' }
|
||||
];
|
||||
|
||||
const courseVersions = [
|
||||
{ value: 'v1', label: 'Version 1' },
|
||||
{ value: 'v2', label: 'Version 2' },
|
||||
{ value: 'v3', label: 'Version 3' }
|
||||
];
|
||||
|
||||
const assignmentTypes = [
|
||||
{ value: 'essay', label: 'Essay' },
|
||||
{ value: 'quiz', label: 'Quiz' },
|
||||
@@ -88,19 +81,6 @@
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Field.Field>
|
||||
<Field.Field>
|
||||
<Field.Label for="course-version">Version</Field.Label>
|
||||
<Select.Root type="single" bind:value={courseVersion}>
|
||||
<Select.Trigger id="course-version">
|
||||
<span>{courseVersion || 'Select version'}</span>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each courseVersions as version (version.value)}
|
||||
<Select.Item value={version.value}>{version.label}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Field.Field>
|
||||
</div>
|
||||
</Field.Group>
|
||||
</Field.Set>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export const FIELDS = ['class'] as string[];
|
||||
@@ -0,0 +1,113 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import * as FileDropZone from '@cio/ui/custom/file-drop-zone';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const MEGABYTE = FileDropZone.MEGABYTE;
|
||||
const ACCEPT_IMAGE = FileDropZone.ACCEPT_IMAGE;
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/FileDropZone',
|
||||
component: FileDropZone.Root,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
argTypes: {
|
||||
onUpload: {
|
||||
control: false,
|
||||
description: 'Called with the uploaded files when the user drops or selects files',
|
||||
table: {
|
||||
type: { summary: '(files: File[]) => Promise<void>' },
|
||||
defaultValue: { summary: 'undefined' }
|
||||
}
|
||||
},
|
||||
onFileRejected: {
|
||||
control: false,
|
||||
description: 'Called when a file does not meet the upload criteria',
|
||||
table: {
|
||||
type: { summary: '(opts: { reason: FileRejectedReason; file: File }) => void' },
|
||||
defaultValue: { summary: 'undefined' }
|
||||
}
|
||||
},
|
||||
maxFiles: {
|
||||
control: 'number',
|
||||
description: 'The maximum number of files allowed',
|
||||
table: { defaultValue: { summary: 'undefined' } }
|
||||
},
|
||||
maxFileSize: {
|
||||
control: 'number',
|
||||
description: 'The maximum file size in bytes',
|
||||
table: { defaultValue: { summary: 'undefined' } }
|
||||
},
|
||||
accept: {
|
||||
control: 'text',
|
||||
description: 'Comma-separated list of accepted file types',
|
||||
table: { defaultValue: { summary: 'undefined' } }
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
async function handleUpload(files) {
|
||||
console.log(
|
||||
'Uploaded files:',
|
||||
files.map((f) => f.name)
|
||||
);
|
||||
}
|
||||
|
||||
function handleFileRejected(opts) {
|
||||
console.warn('File rejected:', opts.reason, opts.file.name);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-md">
|
||||
<FileDropZone.Root onUpload={handleUpload} onFileRejected={handleFileRejected}>
|
||||
<FileDropZone.Trigger />
|
||||
</FileDropZone.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Limits">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-md">
|
||||
<FileDropZone.Root
|
||||
maxFiles={3}
|
||||
fileCount={0}
|
||||
maxFileSize={MEGABYTE * 5}
|
||||
onUpload={handleUpload}
|
||||
onFileRejected={handleFileRejected}
|
||||
>
|
||||
<FileDropZone.Trigger />
|
||||
</FileDropZone.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Images Only">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-md">
|
||||
<FileDropZone.Root accept={ACCEPT_IMAGE} onUpload={handleUpload} onFileRejected={handleFileRejected}>
|
||||
<FileDropZone.Trigger />
|
||||
</FileDropZone.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Textarea">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-md">
|
||||
<FileDropZone.Root onUpload={handleUpload} onFileRejected={handleFileRejected}>
|
||||
<FileDropZone.Textarea
|
||||
placeholder="Paste or drag and drop files here to attach to your submission..."
|
||||
class="ui:min-h-24 ui:w-full ui:resize-none ui:rounded-md ui:border ui:border-input ui:bg-background ui:px-3 ui:py-2 ui:text-sm ui:ring-offset-background placeholder:ui:text-muted-foreground focus-visible:ui:outline-none focus-visible:ui:ring-2 focus-visible:ui:ring-ring focus-visible:ui:ring-offset-2"
|
||||
/>
|
||||
</FileDropZone.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -8,7 +8,6 @@
|
||||
import UserIcon from '@lucide/svelte/icons/user';
|
||||
import MessageSquareIcon from '@lucide/svelte/icons/message-square';
|
||||
import GlobeIcon from '@lucide/svelte/icons/globe';
|
||||
import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
|
||||
import EyeIcon from '@lucide/svelte/icons/eye';
|
||||
import EyeOffIcon from '@lucide/svelte/icons/eye-off';
|
||||
import KeyIcon from '@lucide/svelte/icons/key';
|
||||
@@ -395,11 +394,11 @@
|
||||
|
||||
<Story name="Custom Input">
|
||||
{#snippet template()}
|
||||
<div class="w-lg grid gap-6">
|
||||
<div class="grid w-lg gap-6">
|
||||
<InputGroup.Root>
|
||||
<textarea
|
||||
data-slot="input-group-control"
|
||||
class="field-sizing-content flex min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base outline-none transition-[color,box-shadow] md:text-sm"
|
||||
class="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
|
||||
placeholder="Autoresize textarea..."
|
||||
></textarea>
|
||||
<InputGroup.Addon align="block-end">
|
||||
|
||||
@@ -1 +1 @@
|
||||
export const FIELDS = ['class'] as string[];
|
||||
export const FIELDS = ['class', 'isSticky'] as string[];
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<Page.Root class="w-4xl h-4xl">
|
||||
<Page.Root class="h-4xl w-4xl">
|
||||
<Page.Header>
|
||||
<Page.HeaderContent>
|
||||
<Page.Title>Courses</Page.Title>
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export const FIELDS = [
|
||||
'plan',
|
||||
'planName',
|
||||
'isPopular',
|
||||
'isYearlyPlan',
|
||||
'isLoadingPlan',
|
||||
'handleClick',
|
||||
'popularLabel',
|
||||
'perOrgLabel',
|
||||
'ctaLabel',
|
||||
'isDisabled'
|
||||
] as string[];
|
||||
@@ -0,0 +1,322 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { PricingCard } from '@cio/ui/custom/pricing-card';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/PricingCard',
|
||||
component: PricingCard,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
// Sample plan data
|
||||
const BASIC_PLAN = {
|
||||
NAME: 'Basic',
|
||||
DESCRIPTION: 'Free tier plan for personal use, no credit card required.',
|
||||
PRICE: {
|
||||
CURRENCY: '$',
|
||||
MONTHLY: '0',
|
||||
YEARLY: '0',
|
||||
IS_PREMIUM: false
|
||||
},
|
||||
FEATURES: [
|
||||
'Unlimited Courses',
|
||||
'Unlimited Q/A',
|
||||
'20 Students',
|
||||
'AI Course Builder (no video upload)',
|
||||
'ClassroomIO branding'
|
||||
],
|
||||
CTA: {
|
||||
LABEL: 'Signup Now',
|
||||
LINK: '/signup?plan=free',
|
||||
DASHBOARD_LABEL: 'Current Plan',
|
||||
DASHBOARD_LINK: '#disabled',
|
||||
IS_DISABLED: true
|
||||
}
|
||||
};
|
||||
|
||||
const EARLY_ADOPTER_PLAN = {
|
||||
NAME: 'Early Adopters',
|
||||
DESCRIPTION: 'For fast growing teaching businesses that aim to scale.',
|
||||
PRICE: {
|
||||
CURRENCY: '$',
|
||||
MONTHLY: '35',
|
||||
YEARLY: '350',
|
||||
IS_PREMIUM: false
|
||||
},
|
||||
FEATURES: [
|
||||
'Everything in Basic',
|
||||
'Unlimited Collaborators',
|
||||
'10K Students',
|
||||
'Advanced AI Course Builder (Video upload & Certificate)',
|
||||
'Custom Branding',
|
||||
'Slack Invite',
|
||||
'Includes all upcoming features'
|
||||
],
|
||||
CTA: {
|
||||
LABEL: 'I want in 😍',
|
||||
LINK: '/signup?plan=early-adopter',
|
||||
DASHBOARD_LABEL: 'Upgrade now',
|
||||
DASHBOARD_LINK: '',
|
||||
IS_DISABLED: false,
|
||||
PRODUCT_ID: '1e11ad75-c422-41c1-a541-0e989281276c',
|
||||
PRODUCT_ID_YEARLY: 'a84d3a82-3259-4300-b2bf-dccb7bd7814c'
|
||||
}
|
||||
};
|
||||
|
||||
const ENTERPRISE_PLAN = {
|
||||
NAME: 'Enterprise',
|
||||
DESCRIPTION: 'Best suited for larger businesses that need more control',
|
||||
PRICE: {
|
||||
CURRENCY: '',
|
||||
MONTHLY: 'Request Pricing',
|
||||
YEARLY: 'Request Pricing',
|
||||
IS_PREMIUM: true
|
||||
},
|
||||
FEATURES: ['Everything in Early Adopters plus:', 'Unlimited students', 'Custom Domain', '24/7 Support'],
|
||||
CTA: {
|
||||
LABEL: 'Contact Us',
|
||||
LINK: 'https://cal.com/classroomio/enterprise',
|
||||
DASHBOARD_LABEL: 'Contact Us',
|
||||
DASHBOARD_LINK: 'https://cal.com/classroomio/enterprise',
|
||||
IS_DISABLED: false
|
||||
}
|
||||
};
|
||||
|
||||
let isLoadingPlan = $state(null);
|
||||
|
||||
function handleClick(plan, planName) {
|
||||
console.log('Clicked plan:', planName, plan);
|
||||
isLoadingPlan = planName;
|
||||
setTimeout(() => {
|
||||
isLoadingPlan = null;
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Story name="Basic Plan">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={BASIC_PLAN}
|
||||
planName="BASIC"
|
||||
isPopular={false}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Early Adopter Plan (Popular)">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={EARLY_ADOPTER_PLAN}
|
||||
planName="EARLY_ADOPTER"
|
||||
isPopular={true}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Enterprise Plan">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={ENTERPRISE_PLAN}
|
||||
planName="ENTERPRISE"
|
||||
isPopular={false}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Monthly Pricing">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={EARLY_ADOPTER_PLAN}
|
||||
planName="EARLY_ADOPTER"
|
||||
isPopular={true}
|
||||
isYearlyPlan={false}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Yearly Pricing">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={EARLY_ADOPTER_PLAN}
|
||||
planName="EARLY_ADOPTER"
|
||||
isPopular={true}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Loading State">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={EARLY_ADOPTER_PLAN}
|
||||
planName="EARLY_ADOPTER"
|
||||
isPopular={true}
|
||||
isYearlyPlan={true}
|
||||
isLoadingPlan="EARLY_ADOPTER"
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom Labels">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={EARLY_ADOPTER_PLAN}
|
||||
planName="EARLY_ADOPTER"
|
||||
isPopular={true}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
popularLabel="Most Popular"
|
||||
perOrgLabel="Per Month"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="All Plans Comparison">
|
||||
{#snippet template()}
|
||||
<div class="ui:grid ui:grid-cols-1 ui:gap-6 md:ui:grid-cols-3 ui:p-4">
|
||||
<PricingCard
|
||||
plan={BASIC_PLAN}
|
||||
planName="BASIC"
|
||||
isPopular={false}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
<PricingCard
|
||||
plan={EARLY_ADOPTER_PLAN}
|
||||
planName="EARLY_ADOPTER"
|
||||
isPopular={true}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
<PricingCard
|
||||
plan={ENTERPRISE_PLAN}
|
||||
planName="ENTERPRISE"
|
||||
isPopular={false}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Monthly vs Yearly Toggle">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-6 ui:p-4">
|
||||
<div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
|
||||
<button
|
||||
class="ui:rounded-md ui:bg-primary ui:px-4 ui:py-2 ui:text-primary-foreground ui:hover:bg-primary/90"
|
||||
onclick={() => {
|
||||
const isYearly = $state.snapshot(isYearlyPlan);
|
||||
isYearlyPlan = !isYearly;
|
||||
}}
|
||||
>
|
||||
Toggle to {isYearlyPlan ? 'Monthly' : 'Yearly'}
|
||||
</button>
|
||||
<span class="ui:text-sm ui:text-muted-foreground">
|
||||
Current: {isYearlyPlan ? 'Yearly' : 'Monthly'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui:grid ui:grid-cols-1 ui:gap-6 md:ui:grid-cols-3">
|
||||
<PricingCard
|
||||
plan={BASIC_PLAN}
|
||||
planName="BASIC"
|
||||
isPopular={false}
|
||||
{isYearlyPlan}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
<PricingCard
|
||||
plan={EARLY_ADOPTER_PLAN}
|
||||
planName="EARLY_ADOPTER"
|
||||
isPopular={true}
|
||||
{isYearlyPlan}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
<PricingCard
|
||||
plan={ENTERPRISE_PLAN}
|
||||
planName="ENTERPRISE"
|
||||
isPopular={false}
|
||||
{isYearlyPlan}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Website Version">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={BASIC_PLAN}
|
||||
planName="BASIC"
|
||||
isPopular={false}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
ctaLabel="Signup Now"
|
||||
isDisabled={false}
|
||||
/>
|
||||
<p class="ui:text-sm ui:text-muted-foreground ui:text-center">
|
||||
Website version uses "Signup Now" and is enabled.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Disabled CTA">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<PricingCard
|
||||
plan={BASIC_PLAN}
|
||||
planName="BASIC"
|
||||
isPopular={false}
|
||||
isYearlyPlan={true}
|
||||
{isLoadingPlan}
|
||||
{handleClick}
|
||||
/>
|
||||
<p class="ui:text-sm ui:text-muted-foreground ui:text-center">The CTA button is disabled (current plan)</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { PricingToggle } from '@cio/ui/custom/pricing-toggle';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/PricingToggle',
|
||||
component: PricingToggle,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<PricingToggle />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Yearly Active">
|
||||
{#snippet template()}
|
||||
<PricingToggle isYearly={true} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom Labels">
|
||||
{#snippet template()}
|
||||
<PricingToggle monthlyLabel="Pay Monthly" yearlyLabel="Pay Yearly" saveLabel="Get 20% Off" />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="No Save Badge">
|
||||
{#snippet template()}
|
||||
<PricingToggle saveLabel="" />
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,2 @@
|
||||
/** Props shown in Storybook controls (class overrides layout/columns per card) */
|
||||
export const FIELDS = ['class'] as string[];
|
||||
@@ -0,0 +1,167 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import * as RadioGroup from '@cio/ui/base/radio-group';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { RadioOptionCard, RadioOptionCardGroup } from '@cio/ui/custom/radio-option-card';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/RadioOptionCard',
|
||||
component: RadioOptionCard,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
let courseType = $state('live-class');
|
||||
let contentType = $state('lesson');
|
||||
let exerciseCreateType = $state('from-scratch');
|
||||
let deliveryMethod = $state('live');
|
||||
|
||||
const courseTypeOptions = [
|
||||
{
|
||||
id: 'live-class',
|
||||
title: 'Live Class',
|
||||
description: 'Schedule live sessions with your students. Best for real-time instruction and Q&A.',
|
||||
value: 'live-class'
|
||||
},
|
||||
{
|
||||
id: 'self-paced',
|
||||
title: 'Self-Paced',
|
||||
description: 'Students progress at their own speed. Add lessons, exercises, and deadlines as needed.',
|
||||
value: 'self-paced'
|
||||
}
|
||||
];
|
||||
|
||||
const contentTypeOptions = [
|
||||
{ id: 'section', title: 'Section', description: 'Group lessons and exercises together.', value: 'section' },
|
||||
{ id: 'lesson', title: 'Lesson', description: 'Teach with notes, slides, and videos.', value: 'lesson' },
|
||||
{ id: 'exercise', title: 'Exercise', description: 'Assess students with quizzes and tasks.', value: 'exercise' }
|
||||
];
|
||||
|
||||
const exerciseCreateOptions = [
|
||||
{
|
||||
id: 'from-scratch',
|
||||
title: 'From scratch',
|
||||
description: 'Create a new exercise with your own questions and settings.',
|
||||
value: 'from-scratch'
|
||||
},
|
||||
{
|
||||
id: 'use-template',
|
||||
title: 'Use template',
|
||||
description: 'Start from a pre-built exercise template.',
|
||||
value: 'use-template',
|
||||
disabled: true
|
||||
}
|
||||
];
|
||||
|
||||
const deliveryOptions = [
|
||||
{ id: 'live', title: 'Live', description: 'Real-time sessions with your students.', value: 'live' },
|
||||
{ id: 'async', title: 'Async', description: 'Pre-recorded lessons and self-paced work.', value: 'async' },
|
||||
{ id: 'hybrid', title: 'Hybrid', description: 'Mix of live and async activities.', value: 'hybrid' },
|
||||
{
|
||||
id: 'ondemand',
|
||||
title: 'On-demand',
|
||||
description: 'Fully self-paced, no fixed schedule.',
|
||||
value: 'ondemand'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<Story name="Course Type Selector (Group)">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-xl">
|
||||
<Field.Description class="ui:mb-4 ui:block">
|
||||
Choose how your course will be delivered to students.
|
||||
</Field.Description>
|
||||
<RadioOptionCardGroup options={courseTypeOptions} bind:value={courseType} />
|
||||
<p class="ui:mt-3 ui:text-muted-foreground ui:text-sm">Selected: {courseType}</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Add Content Type (Group, 3 columns)">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-2xl">
|
||||
<Field.Description class="ui:mb-4 ui:block">
|
||||
Add a new item to your course. Sections group lessons and exercises.
|
||||
</Field.Description>
|
||||
<RadioOptionCardGroup options={contentTypeOptions} bind:value={contentType} class="ui:md:grid-cols-3" />
|
||||
<p class="ui:mt-3 ui:text-muted-foreground ui:text-sm">Selected: {contentType}</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Disabled Option and Title Suffix (Group)">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-xl">
|
||||
<Field.Description class="ui:mb-4 ui:block">
|
||||
How would you like to create your exercise? Use the <code>titleSuffix(option)</code> snippet to render per-option
|
||||
content (e.g. Coming soon for disabled).
|
||||
</Field.Description>
|
||||
<RadioOptionCardGroup options={exerciseCreateOptions} bind:value={exerciseCreateType}>
|
||||
{#snippet titleSuffix(option)}
|
||||
{#if option.disabled}
|
||||
<Badge variant="secondary" class="ui:text-xs">Coming soon</Badge>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</RadioOptionCardGroup>
|
||||
<p class="ui:mt-3 ui:text-muted-foreground ui:text-sm">Selected: {exerciseCreateType}</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom Columns (Group class override)">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-3xl">
|
||||
<Field.Description class="ui:mb-4 ui:block">
|
||||
Override grid with the <code>class</code> prop on <code>RadioOptionCardGroup</code> (uses <code>cn</code> so your
|
||||
classes win).
|
||||
</Field.Description>
|
||||
<RadioOptionCardGroup
|
||||
options={deliveryOptions}
|
||||
bind:value={deliveryMethod}
|
||||
class="ui:grid-cols-1 ui:sm:grid-cols-2 ui:lg:grid-cols-4"
|
||||
/>
|
||||
<p class="ui:mt-3 ui:text-muted-foreground ui:text-sm">Selected: {deliveryMethod}</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Individual cards (card class prop)">
|
||||
{#snippet template()}
|
||||
<div class="ui:w-full ui:max-w-3xl">
|
||||
<Field.Description class="ui:mb-4 ui:block">
|
||||
When using <code>RadioOptionCard</code> inside <code>RadioGroup.Root</code>, override per card with the card
|
||||
<code>class</code>
|
||||
prop (e.g. <code>ui:lg:col-span-2</code>).
|
||||
</Field.Description>
|
||||
<RadioGroup.Root
|
||||
bind:value={deliveryMethod}
|
||||
class="ui:grid ui:gap-3 ui:grid-cols-1 ui:sm:grid-cols-2 ui:lg:grid-cols-4"
|
||||
>
|
||||
<RadioOptionCard id="live" title="Live" description="Real-time sessions with your students." value="live" />
|
||||
<RadioOptionCard
|
||||
id="async"
|
||||
title="Async"
|
||||
description="Pre-recorded lessons and self-paced work."
|
||||
value="async"
|
||||
/>
|
||||
<RadioOptionCard id="hybrid" title="Hybrid" description="Mix of live and async activities." value="hybrid" />
|
||||
<RadioOptionCard
|
||||
id="ondemand"
|
||||
title="On-demand"
|
||||
description="Fully self-paced, no fixed schedule."
|
||||
value="ondemand"
|
||||
class="ui:lg:col-span-2"
|
||||
/>
|
||||
</RadioGroup.Root>
|
||||
<p class="ui:mt-3 ui:text-muted-foreground ui:text-sm">Selected: {deliveryMethod}</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
Reference in New Issue
Block a user