diff --git a/.claude/skills/core-development-skill/SKILL.md b/.claude/skills/core-development-skill/SKILL.md new file mode 100644 index 0000000000..b5f71641be --- /dev/null +++ b/.claude/skills/core-development-skill/SKILL.md @@ -0,0 +1,1268 @@ +# Tutor LMS — Core Development Skill + +## Overview + +This skill governs all development, bug fixing, and feature work inside the **Tutor LMS** plugin codebase (`github.com/themeum/tutor`). It covers project structure, namespace conventions, coding patterns, PHPDoc standards, available helpers/utilities, security rules, and AI agent instructions. + +**Always read and apply this skill before writing, editing, or reviewing any Tutor LMS PHP code.** + +**Repository:** https://github.com/themeum/tutor +**Text Domain:** `tutor` +**PHP Namespace (core classes):** `TUTOR` +**PHP Namespace (helpers/models):** `Tutor\Helpers`, `Tutor\Models`, `Tutor\Traits`, `Tutor\Cache`, `Tutor\Ecommerce` +**Current Version:** 3.9.6 (as of April 2026) +**Min PHP:** 7.4 | **Min WP:** 5.3 + +--- + +## PART 1 — PROJECT STRUCTURE + +``` +tutor/ +├── tutor.php # Plugin header, constants, boot only +├── composer.json # PHP autoloader (PSR-4) +├── vendor/ # Composer autoload +├── classes/ # Core TUTOR\ namespace classes +│ ├── Tutor.php # Main singleton (extends Singleton) +│ ├── Tutor_Base.php # Base class for content classes +│ ├── Singleton.php # Base Singleton class +│ ├── Utils.php # Global utility methods (tutor_utils()) +│ ├── Input.php # Sanitized input helper +│ ├── Course.php # Course operations +│ ├── Lesson.php # Lesson operations +│ ├── Quiz.php # Quiz operations +│ ├── User.php # User roles & operations +│ ├── Instructor.php # Instructor registration/management +│ ├── Enrollment.php # Enrollment logic +│ ├── Assets.php # Script/style enqueue +│ ├── Post_types.php # Post type registration +│ ├── Shortcode.php # Shortcode registration +│ ├── Ajax.php # Central AJAX handler registration +│ ├── Tools.php # Admin tools +│ └── ... # Other core classes +├── models/ # Tutor\Models namespace +│ ├── CourseModel.php +│ ├── LessonModel.php +│ ├── QuizModel.php +│ ├── EnrollmentModel.php +│ ├── UserModel.php +│ ├── WithdrawModel.php +│ └── ... +├── helpers/ # Tutor\Helpers namespace +│ ├── QueryHelper.php # DB query helpers +│ ├── HttpHelper.php # HTTP status codes + response helpers +│ ├── DateTimeHelper.php # Date/time utilities +│ ├── ValidationHelper.php # Input validation +│ └── ... +├── traits/ # Tutor\Traits namespace +│ ├── JsonResponse.php # json_response() method +│ └── ... +├── restapi/ # REST API controllers +├── ecommerce/ # Tutor\Ecommerce namespace +├── migrations/ # DB migration classes +├── cache/ # Tutor\Cache namespace (TutorCache) +├── templates/ # Frontend PHP templates +│ ├── dashboard/ # Dashboard page templates +│ ├── single-course/ # Course single page templates +│ └── ... +├── views/ # Admin UI views (output only) +├── assets/ +│ ├── css/ # Compiled CSS +│ ├── js/ # Compiled JS +│ └── lib/ # Third-party libs (select2, etc.) +├── v2-library/ # React/TS frontend source (rsbuild) +├── tests/ +│ ├── Unit/ +│ └── Integration/ +└── languages/ # Translation files (.pot/.po/.mo) +``` + +--- + +## PART 2 — NAMESPACES & AUTOLOADING + +Tutor LMS uses **PSR-4 autoloading** via Composer. Always declare the correct namespace at the top of every file. + +| Location | Namespace | +| ------------- | ------------------ | +| `classes/` | `TUTOR` | +| `models/` | `Tutor\Models` | +| `helpers/` | `Tutor\Helpers` | +| `traits/` | `Tutor\Traits` | +| `cache/` | `Tutor\Cache` | +| `ecommerce/` | `Tutor\Ecommerce` | +| `restapi/` | `Tutor\RestAPI` | +| `migrations/` | `Tutor\Migrations` | + +### Standard file header (all PHP files) + +```php + + * @link https://themeum.com + * @since x.x.x + */ + +namespace TUTOR; // or Tutor\Models, Tutor\Helpers, etc. + +if ( ! defined( 'ABSPATH' ) ) { + exit; +} + +use Tutor\Helpers\HttpHelper; +use Tutor\Helpers\QueryHelper; +use Tutor\Models\CourseModel; +use Tutor\Traits\JsonResponse; +``` + +--- + +## PART 3 — CORE BOOTSTRAP & SINGLETON PATTERN + +### Main plugin bootstrap (`tutor.php`) + +The main plugin file does **only** these four things: + +```php + load_plugin_textdomain( 'tutor', false, basename( __DIR__ ) . '/languages' ) ); + +register_activation_hook( TUTOR_FILE, array( Tutor::class, 'tutor_activate' ) ); +register_deactivation_hook( TUTOR_FILE, array( Tutor::class, 'tutor_deactivation' ) ); +register_uninstall_hook( TUTOR_FILE, array( Tutor::class, 'tutor_uninstall' ) ); + +function tutor_lms() { + return Tutor::get_instance(); +} + +$GLOBALS['tutor'] = tutor_lms(); +``` + +### Accessing the main instance + +```php +// Primary access — returns Tutor singleton +tutor(); // alias of tutor_lms() +tutor_lms(); // returns Tutor::get_instance() + +// Properties available on tutor() +tutor()->path // Plugin directory path +tutor()->url // Plugin directory URL +tutor()->version // Plugin version string +tutor()->has_pro // bool — Pro version active +tutor()->course_post_type // 'courses' +tutor()->lesson_post_type // 'lesson' +tutor()->nonce_action // Nonce action string +tutor()->nonce // Nonce key string +tutor()->utils // Utils class instance (same as tutor_utils()) +``` + +### Singleton base pattern + +All main service classes that need a single instance extend `Singleton`: + +```php +namespace TUTOR; + +final class My_Service extends Singleton { + + /** + * Initialize the service. + * + * @since 1.0.0 + * @return void + */ + protected function __construct() { + parent::__construct(); + // register hooks here + } +} + +// Usage — never use `new My_Service()` directly +My_Service::get_instance(); +``` + +--- + +## PART 4 — CLASS PATTERNS + +### 4.1 Content class (extends Tutor_Base) + +Use for classes that handle AJAX, hooks, and post-type operations (Course, Lesson, Quiz, etc.): + +```php +namespace TUTOR; + +if ( ! defined( 'ABSPATH' ) ) { + exit; +} + +use Tutor\Helpers\HttpHelper; +use Tutor\Helpers\QueryHelper; +use Tutor\Models\CourseModel; +use Tutor\Traits\JsonResponse; + +/** + * Handle [Feature] operations. + * + * @package Tutor + * @author Themeum + * @link https://themeum.com + * @since 1.0.0 + */ +class My_Feature extends Tutor_Base { + + use JsonResponse; + + /** + * Register hooks. + * + * @since 1.0.0 + * + * @param bool $register_hooks Whether to register hooks. Default true. + * @return void + */ + public function __construct( $register_hooks = true ) { + parent::__construct(); + + if ( ! $register_hooks ) { + return; + } + + add_action( 'wp_ajax_tutor_my_action', array( $this, 'ajax_my_action' ) ); + add_action( 'wp_ajax_nopriv_tutor_my_public_action', array( $this, 'ajax_my_public_action' ) ); + } + + /** + * Handle my AJAX action. + * + * @since 1.0.0 + * @return void + */ + public function ajax_my_action() { + tutor_utils()->checking_nonce(); + + if ( ! current_user_can( 'edit_posts' ) ) { + $this->json_response( + tutor_utils()->error_message( 'forbidden' ), + null, + HttpHelper::STATUS_FORBIDDEN + ); + } + + // ... logic + $this->json_response( __( 'Success', 'tutor' ), $data ); + } +} +``` + +### 4.2 Model class (Tutor\Models namespace) + +Models handle only data access — no hooks, no output: + +```php +namespace Tutor\Models; + +if ( ! defined( 'ABSPATH' ) ) { + exit; +} + +use Tutor\Helpers\QueryHelper; + +/** + * My Feature Model. + * + * @package Tutor\Models + * @author Themeum + * @link https://themeum.com + * @since x.x.x + */ +class MyFeatureModel { + + /** + * Table name without prefix. + * + * @since x.x.x + * @var string + */ + const TABLE = 'tutor_my_feature'; + + /** + * Get records by user ID. + * + * @since x.x.x + * + * @param int $user_id WordPress user ID. + * @param int $limit Max rows to return. Default -1 (all). + * @return array + */ + public static function get_by_user( int $user_id, int $limit = -1 ): array { + global $wpdb; + + return QueryHelper::get_all( + $wpdb->prefix . self::TABLE, + array( 'user_id' => $user_id ), + 'id', + $limit + ); + } + + /** + * Insert a new record. + * + * @since x.x.x + * + * @param array $data Associative array of column => value pairs. + * @return int|false Inserted row ID on success, false on failure. + */ + public static function create( array $data ) { + global $wpdb; + $inserted = QueryHelper::insert( $wpdb->prefix . self::TABLE, $data ); + return $inserted ? $wpdb->insert_id : false; + } +} +``` + +### 4.3 REST API controller + +```php +namespace Tutor\RestAPI; + +if ( ! defined( 'ABSPATH' ) ) { + exit; +} + +use Tutor\Helpers\HttpHelper; +use Tutor\Traits\JsonResponse; + +/** + * My Feature REST Controller. + * + * @package Tutor\RestAPI + * @since x.x.x + */ +class MyFeatureController extends \WP_REST_Controller { + + use JsonResponse; + + /** + * Namespace. + * + * @var string + */ + protected $namespace = 'tutor/v1'; + + /** + * Rest base. + * + * @var string + */ + protected $rest_base = 'my-feature'; + + /** + * Register routes. + * + * @since x.x.x + * @return void + */ + public function register_routes() { + register_rest_route( + $this->namespace, + '/' . $this->rest_base, + array( + array( + 'methods' => \WP_REST_Server::READABLE, + 'callback' => array( $this, 'get_items' ), + 'permission_callback' => array( $this, 'get_items_permissions_check' ), + ), + ) + ); + } + + /** + * Check permissions. + * + * @since x.x.x + * + * @param \WP_REST_Request $request Full request data. + * @return bool|\WP_Error + */ + public function get_items_permissions_check( $request ) { + return current_user_can( 'manage_options' ); + } + + /** + * Get a collection of items. + * + * @since x.x.x + * + * @param \WP_REST_Request $request Full request data. + * @return \WP_REST_Response + */ + public function get_items( $request ) { + // ... logic + return rest_ensure_response( array( 'data' => $data ) ); + } +} +``` + +--- + +## PART 5 — AVAILABLE HELPERS & UTILITIES + +### 5.1 `tutor_utils()` / `tutils()` — Global Utility + +The `Utils` class is the primary utility hub. Access via `tutor_utils()` or its alias `tutils()`. + +```php +// Plugin options +tutor_utils()->get_option( 'option_key', $default ); +tutor_utils()->get_option( 'option_key', null, true, true ); // return bool + +// Nonce verification (dies on failure) +tutor_utils()->checking_nonce(); + +// Post ID resolution (uses current post if 0) +tutor_utils()->get_post_id( $post_id ); + +// User ID resolution (uses current user if 0) +tutor_utils()->get_user_id( $user_id ); + +// Enrollment checks +tutor_utils()->is_enrolled( $course_id, $user_id ); +tutor_utils()->is_instructor_of_this_course( $user_id, $course_id ); + +// Array utilities +tutor_utils()->array_get( 'key', $array, $default ); // safe array access +tutor_utils()->avalue_dot( 'parent.child', $array ); // dot notation access + +// Standardized error messages +tutor_utils()->error_message(); // Generic error +tutor_utils()->error_message( 'nonce' ); // Nonce failure message +tutor_utils()->error_message( 'forbidden' );// Permission denied message + +// Input (legacy — prefer Input:: class) +tutor_utils()->input_old( 'field_name' ); // POST/GET value with sanitization + +// Permissions +tutor_utils()->can_user_manage( 'course', $course_id ); +tutor_utils()->can_user_manage( 'topic', $topic_id ); + +// Dashboard +tutor_utils()->get_tutor_dashboard_page_permalink( $tab ); +tutor_utils()->course_edit_link( $course_id, 'frontend' ); + +// Time +tutor_time(); // current timestamp +``` + +### 5.2 `Input` class — Sanitized Input + +Always use `Input::` class to read request data. Never access `$_POST`, `$_GET`, `$_REQUEST` directly. + +```php +use TUTOR\Input; + +// GET: string (default) +$page = Input::get( 'page', '' ); + +// GET: integer +$id = Input::get( 'id', 0, Input::TYPE_INT ); + +// GET: boolean +$active = Input::get( 'active', false, Input::TYPE_BOOL ); + +// POST: string +$title = Input::post( 'title', '' ); + +// POST: integer +$count = Input::post( 'count', 0, Input::TYPE_INT ); + +// POST: sanitized array +$ids = Input::post( 'ids', array(), Input::TYPE_ARRAY ); + +// Any request method +$value = Input::sanitize_data( $raw_value ); +``` + +Available type constants: `Input::TYPE_INT`, `Input::TYPE_BOOL`, `Input::TYPE_FLOAT`, `Input::TYPE_ARRAY`, `Input::TYPE_EMAIL`, `Input::TYPE_URL`. + +### 5.3 `QueryHelper` — Database Abstraction + +```php +use Tutor\Helpers\QueryHelper; + +global $wpdb; + +// SELECT all rows matching conditions +$rows = QueryHelper::get_all( + $wpdb->prefix . 'tutor_enrollments', + array( 'course_id' => $course_id ), // WHERE conditions + 'id', // ORDER BY column + 10 // limit (-1 = all) +); + +// SELECT single row +$row = QueryHelper::get_row( + $wpdb->prefix . 'tutor_enrollments', + array( 'id' => $enrollment_id ) +); + +// INSERT +QueryHelper::insert( $wpdb->prefix . 'tutor_enrollments', $data ); + +// UPDATE +QueryHelper::update( + $wpdb->prefix . 'tutor_enrollments', + array( 'status' => 'completed' ), // data to set + array( 'id' => $enrollment_id ) // WHERE +); + +// DELETE +QueryHelper::delete( + $wpdb->prefix . 'tutor_enrollments', + array( 'id' => $enrollment_id ) +); + +// COUNT +$total = QueryHelper::get_count( + $wpdb->prefix . 'tutor_enrollments', + array( 'course_id' => $course_id ) +); + +// IN clause helper +$clause = QueryHelper::prepare_in_clause( $ids_array ); // returns %d,%d,%d +``` + +### 5.4 `HttpHelper` — HTTP Status Constants + +Always use `HttpHelper` constants for response codes — never hardcode numbers: + +```php +use Tutor\Helpers\HttpHelper; + +HttpHelper::STATUS_OK // 200 +HttpHelper::STATUS_CREATED // 201 +HttpHelper::STATUS_BAD_REQUEST // 400 +HttpHelper::STATUS_UNAUTHORIZED // 401 +HttpHelper::STATUS_FORBIDDEN // 403 +HttpHelper::STATUS_NOT_FOUND // 404 +HttpHelper::STATUS_UNPROCESSABLE_ENTITY // 422 +HttpHelper::STATUS_INTERNAL_SERVER_ERROR // 500 +``` + +### 5.5 `JsonResponse` trait + +Use in any class that sends AJAX or REST responses. Never call `wp_send_json_success/error` directly when this trait is available. + +```php +use Tutor\Traits\JsonResponse; + +class My_Class { + use JsonResponse; + + public function my_ajax_handler() { + // Success + $this->json_response( __( 'Done', 'tutor' ), $data ); + + // Success with custom status + $this->json_response( __( 'Created', 'tutor' ), $data, HttpHelper::STATUS_CREATED ); + + // Error + $this->json_response( + tutor_utils()->error_message( 'nonce' ), + null, + HttpHelper::STATUS_BAD_REQUEST + ); + } +} +``` + +Signature: `json_response( string $message, mixed $data = null, int $status_code = 200 ): void` + +### 5.6 `DateTimeHelper` — Date & Time + +```php +use Tutor\Helpers\DateTimeHelper; + +// Format constants +DateTimeHelper::FORMAT_MYSQL // 'Y-m-d H:i:s' +DateTimeHelper::FORMAT_DATE // 'Y-m-d' + +// Convert GMT datetime to user timezone +DateTimeHelper::get_gmt_to_user_timezone_date( $gmt_datetime_string ); + +// Formatting +date( DateTimeHelper::FORMAT_MYSQL, $timestamp ); +``` + +### 5.7 `ValidationHelper` + +```php +use Tutor\Helpers\ValidationHelper; + +$errors = ValidationHelper::validate( + array( + 'title' => Input::post( 'title', '' ), + 'course_id'=> Input::post( 'course_id', 0, Input::TYPE_INT ), + ), + array( + 'title' => 'required', + 'course_id' => 'required|numeric', + ) +); + +if ( count( $errors ) ) { + $this->json_response( + __( 'Invalid input', 'tutor' ), + $errors, + HttpHelper::STATUS_UNPROCESSABLE_ENTITY + ); +} +``` + +### 5.8 `TutorCache` + +```php +use Tutor\Cache\TutorCache; + +// Get cached value +$data = TutorCache::get( 'cache-key' ); + +// Set cache +TutorCache::set( 'cache-key', $data ); + +// Delete cache +TutorCache::delete( 'cache-key' ); +``` + +--- + +## PART 6 — MODEL REFERENCE + +### CourseModel + +```php +use Tutor\Models\CourseModel; + +// Post status constants +CourseModel::STATUS_PUBLISH +CourseModel::STATUS_PENDING +CourseModel::STATUS_DRAFT +CourseModel::STATUS_FUTURE +CourseModel::STATUS_PRIVATE + +// Methods +CourseModel::get_courses_by_instructor( $user_id, $status, $offset, $per_page, $count_only, $post_type ); +CourseModel::get_post_types( $post ); // check if valid course post type +``` + +### User class + +```php +use TUTOR\User; + +User::STUDENT // 'subscriber' +User::INSTRUCTOR // 'tutor_instructor' +User::ADMIN // 'administrator' + +User::is_admin(); // static — checks if current user is admin +``` + +### Post type constants (via tutor()) + +```php +tutor()->course_post_type // 'courses' +tutor()->lesson_post_type // 'lesson' +// Quiz post type: 'tutor_quiz' +// Topic post type: 'topics' +// Assignment post type: 'tutor_assignments' +``` + +--- + +## PART 7 — PHPDoc DOCUMENTATION STANDARDS + +All classes, methods, properties, constants, hooks, and filters **must** have PHPDoc blocks. + +### Class doc block + +```php +/** + * Brief one-line description. + * + * Optional longer description spanning + * multiple lines if needed. + * + * @package Tutor + * @author Themeum + * @link https://themeum.com + * @since 1.0.0 + */ +``` + +### Method doc block + +```php +/** + * Brief description of what this method does. + * + * Extended description if the method has complex behavior, + * side effects, or important notes for future developers. + * + * @since 1.0.0 + * @since 2.5.0 Added $limit param. + * + * @param int $course_id The course post ID. + * @param int $user_id Optional. WordPress user ID. Default 0 (current user). + * @param int $limit Optional. Max records to return. Default -1 (all). + * @return array|false Array of records on success, false on failure. + */ +public function get_enrollments( int $course_id, int $user_id = 0, int $limit = -1 ) { +``` + +### Property doc block + +```php +/** + * Whether bulk action is enabled on this list page. + * + * @since 1.0.0 + * @var bool + */ +public $bulk_action = true; + +/** + * Cache key for instructor list. + * + * @since 2.0.0 + * @var string + */ +const INSTRUCTOR_LIST_CACHE_KEY = 'tutor-instructors-list'; +``` + +### Hook documentation + +```php +/** + * Fires after a student successfully enrolls in a course. + * + * @since 1.0.0 + * + * @param int $course_id The course post ID. + * @param int $user_id The enrolled user ID. + * @param int $enroll_id The enrollment record ID. + */ +do_action( 'tutor_after_enroll', $course_id, $user_id, $enroll_id ); + +/** + * Filters the course archive query arguments. + * + * @since 1.0.0 + * + * @param array $args WP_Query arguments. + * @return array + */ +$args = apply_filters( 'tutor_course_archive_args', $args ); +``` + +--- + +## PART 8 — SECURITY BEST PRACTICES + +### 8.1 Nonce verification + +**Every AJAX handler must verify a nonce first.** Use the Tutor utility wrapper: + +```php +// ✅ Tutor standard — checks tutor()->nonce_action and dies on failure +tutor_utils()->checking_nonce(); + +// ✅ WP standard when you need a specific action +if ( ! wp_verify_nonce( + sanitize_text_field( wp_unslash( $_POST['_tutor_nonce'] ?? '' ) ), + tutor()->nonce_action +) ) { + $this->json_response( + tutor_utils()->error_message( 'nonce' ), + null, + HttpHelper::STATUS_BAD_REQUEST + ); +} +``` + +### 8.2 Capability checks + +**All privileged AJAX/REST handlers must check permissions before processing:** + +```php +// Admin operations +if ( ! current_user_can( 'manage_options' ) ) { + $this->json_response( + tutor_utils()->error_message( 'forbidden' ), + null, + HttpHelper::STATUS_FORBIDDEN + ); +} + +// Course management (admin or instructor of the course) +$is_instructor = tutor_utils()->is_instructor_of_this_course( get_current_user_id(), $course_id ); +if ( ! current_user_can( 'administrator' ) && ! $is_instructor ) { + $this->json_response( + tutor_utils()->error_message( 'forbidden' ), + null, + HttpHelper::STATUS_FORBIDDEN + ); +} + +// Resource management via helper +if ( ! tutor_utils()->can_user_manage( 'course', $course_id ) ) { + wp_send_json_error( array( 'message' => __( 'Access Denied', 'tutor' ) ) ); +} +``` + +### 8.3 Input — always use Input:: class + +```php +// ✅ Always use Input:: — never raw superglobals +$course_id = Input::post( 'course_id', 0, Input::TYPE_INT ); +$title = Input::post( 'title', '' ); +$page = Input::get( 'page', '' ); + +// ❌ Never do this +$course_id = $_POST['course_id']; +$title = $_POST['title']; +``` + +### 8.4 Output escaping + +Follow context-specific escaping. This is always required in templates and views: + +```php +// HTML text +echo esc_html( $title ); +echo esc_html__( 'Enroll Now', 'tutor' ); + +// HTML attributes +echo esc_attr( $class ); +echo '
'; + +// URLs +echo esc_url( get_permalink( $course_id ) ); +echo esc_url( tutor_utils()->get_tutor_dashboard_page_permalink( 'my-courses' ) ); + +// Rich HTML (trusted content only) +echo wp_kses_post( $description ); + +// In templates +?> +

post_title ); ?>

+ + post_title ); ?> + + + + +prepare()` for custom queries: + +```php +// ✅ Use QueryHelper for standard CRUD +$rows = QueryHelper::get_all( $wpdb->prefix . 'tutor_enrollments', array( 'course_id' => $course_id ) ); + +// ✅ Use $wpdb->prepare() for custom queries +$results = $wpdb->get_results( + $wpdb->prepare( + "SELECT * FROM {$wpdb->prefix}tutor_enrollments WHERE course_id = %d AND status = %s LIMIT %d", + $course_id, + 'completed', + $limit + ) +); + +// ❌ Never interpolate variables into queries +$results = $wpdb->get_results( "SELECT * FROM wp_tutor_enrollments WHERE course_id = $course_id" ); +``` + +### 8.6 Direct file access prevention + +All PHP files must have this check at the top, immediately after the namespace declaration: + +```php +if ( ! defined( 'ABSPATH' ) ) { + exit; +} +``` + +--- + +## PART 9 — AJAX HANDLER PATTERN + +The complete, correct pattern for every Tutor AJAX handler: + +```php +/** + * Handle AJAX action to save lesson progress. + * + * @since 1.0.0 + * @return void + */ +public function ajax_save_lesson_progress() { + // Step 1: Verify nonce (always first) + tutor_utils()->checking_nonce(); + + // Step 2: Verify permissions + if ( ! is_user_logged_in() ) { + $this->json_response( + tutor_utils()->error_message( 'forbidden' ), + null, + HttpHelper::STATUS_FORBIDDEN + ); + } + + // Step 3: Read and validate input via Input:: class + $lesson_id = Input::post( 'lesson_id', 0, Input::TYPE_INT ); + $course_id = Input::post( 'course_id', 0, Input::TYPE_INT ); + + if ( ! $lesson_id || ! $course_id ) { + $this->json_response( + __( 'Invalid input', 'tutor' ), + null, + HttpHelper::STATUS_BAD_REQUEST + ); + } + + // Step 4: Business logic / data operation + $result = MyModel::save_progress( $lesson_id, get_current_user_id() ); + + if ( ! $result ) { + $this->json_response( + __( 'Could not save progress', 'tutor' ), + null, + HttpHelper::STATUS_INTERNAL_SERVER_ERROR + ); + } + + // Step 5: Fire action hook for extensibility + do_action( 'tutor_lesson_progress_saved', $lesson_id, $course_id, get_current_user_id() ); + + // Step 6: Return success response + $this->json_response( __( 'Progress saved', 'tutor' ) ); +} +``` + +Register handlers in the constructor: + +```php +add_action( 'wp_ajax_tutor_save_lesson_progress', array( $this, 'ajax_save_lesson_progress' ) ); +// For logged-out users: +add_action( 'wp_ajax_nopriv_tutor_save_lesson_progress', array( $this, 'ajax_save_lesson_progress' ) ); +``` + +--- + +## PART 10 — HOOK NAMING CONVENTIONS + +All Tutor hooks are prefixed with `tutor_`. Follow this naming structure: + +| Type | Pattern | Example | +| ----------------- | --------------------------- | ------------------------------------- | +| Action (before) | `tutor_before_{event}` | `tutor_before_enroll` | +| Action (after) | `tutor_after_{event}` | `tutor_after_enroll` | +| Action (AJAX) | `tutor_action_{name}` | `tutor_action_regenerate_tutor_pages` | +| Filter (data) | `tutor_{object}_{property}` | `tutor_course_archive_args` | +| Filter (template) | `tutor_get_template_path` | — | +| Filter (localize) | `tutor_localize_data` | — | + +Dynamic hooks use **interpolation**, not concatenation: + +```php +// ✅ Correct +do_action( "{$post->post_type}_saved", $post->ID ); +apply_filters( "tutor_{$context}_data", $data ); + +// ❌ Incorrect +do_action( $post->post_type . '_saved', $post->ID ); +``` + +--- + +## PART 11 — TEMPLATE & VIEW RULES + +### Templates (`templates/`) + +Templates are rendered on the **frontend**. Strict output-only rules: + +```php +get_option( 'courses_per_page', 10 ); +$paged = Input::get( 'current_page', 1, Input::TYPE_INT ); +$results = CourseModel::get_courses_by_instructor( $current_user_id, 'publish', 0, $per_page ); +?> + +
+ +
+

post_title ); ?>

+ + + +
+ +
+``` + +**Templates must NOT contain:** + +- Database queries (use Models) +- Hook registration +- Business logic / calculations +- Nonce generation (pass via template variables from controller) + +### Views (`views/`) + +Views are rendered in the **WordPress admin**. Same rules as templates — output only. + +--- + +## PART 12 — ASSETS & ENQUEUEING + +Always enqueue via the `Assets` class hooks. Never hardcode ` + + + +``` + +### Theme Switching + +Switch themes by changing the `data-theme` attribute: + +```javascript +// Switch to dark theme +document.documentElement.setAttribute('data-theme', 'dark'); + +// Switch to light theme +document.documentElement.setAttribute('data-theme', 'light'); +``` + +### Font Scaling + +The design system supports font scaling for accessibility. All typography uses `rem` units and scales proportionally: + +```javascript +// Set font scale to 120% (larger text for better accessibility) +TutorCore.utils.setFontScale(120); + +// Set font scale to 80% (smaller text) +TutorCore.utils.setFontScale(80); + +// Reset to default size (100%) +TutorCore.utils.resetFontScale(); + +// Get current font scale percentage +const currentScale = TutorCore.utils.getFontScale(); // Returns 80, 90, 100, 110, or 120 +``` + +You can also use CSS classes directly: + +```html + + + +
+

This heading will be smaller

+

This paragraph will also be smaller

+
+ +``` + +**Available font scales:** 80%, 90%, 100% (default), 110%, 120% + +### RTL Support + +Enable RTL layout by setting the `dir` attribute: + +```html + +``` + +## Components + +### Buttons + +```html + + + + + + + + + + + + + + + + +``` + +### Cards + +```html +
+
+

Card Title

+

Card subtitle

+
+
+

Card content goes here...

+
+
+ +
+
+``` + +### Forms + +```html +
+ + +

We'll never share your email.

+
+ +
+ + +
+``` + +## Alpine.js Components + +The TutorCore class provides factory methods for creating Alpine.js component data objects with built-in RTL support, accessibility features, and TypeScript definitions. + +### Dropdown + +**Configuration Options:** + +- `placement`: Position relative to trigger ('bottom-start', 'bottom-end', 'top-start', 'top-end') +- `offset`: Distance from trigger element (default: 4) +- `closeOnClickOutside`: Close when clicking outside (default: true) + +```html +
+ +
+ Profile + Settings + Logout +
+
+``` + +### Modal + +**Configuration Options:** + +- `closable`: Allow closing with ESC key or backdrop click (default: true) +- `backdrop`: Show backdrop overlay (default: true) +- `keyboard`: Enable ESC key to close (default: true) + +```html +
+ + +
+
+
+
+

Modal Title

+ +
+
+

Modal content goes here...

+
+
+ + +
+
+
+
+``` + +### Tabs + +**Configuration Options:** + +- `defaultTab`: Initial active tab index (default: 0) + +```html +
+
+ + + +
+
+
Overview content...
+
Details content...
+
Reviews content...
+
+
+``` + +### Accordion + +**Configuration Options:** + +- `multiple`: Allow multiple panels open (default: false) +- `defaultOpen`: Array of initially open panel indices (default: []) + +```html +
+
+ +
+

Panel 1 content...

+
+
+
+ +
+

Panel 2 content...

+
+
+
+``` + +### Toast Notifications + +**Methods:** + +- `show(message, config)`: Display a toast notification +- `success(message)`: Show success toast +- `error(message)`: Show error toast +- `warning(message)`: Show warning toast +- `info(message)`: Show info toast +- `remove(id)`: Remove specific toast +- `clear()`: Remove all toasts + +```html +
+ + + + + +
+ +
+
+``` + +### Tooltip + +**Configuration Options:** + +- `placement`: Tooltip position ('top', 'bottom', 'left', 'right') +- `trigger`: Trigger event ('hover', 'focus', 'click') +- `delay`: Show/hide delay in milliseconds + +```html +
+ +
This is a helpful tooltip!
+
+``` + +### Popover + +**Configuration Options:** + +- `placement`: Popover position ('top', 'bottom', 'left', 'right') +- `trigger`: Trigger event ('click', 'hover') +- `closeOnClickOutside`: Close when clicking outside (default: true) + +```html +
+ +
+
+
+

Popover Title

+

This is popover content with more detailed information.

+ +
+
+
+``` + +### Sidebar + +**Configuration Options:** + +- `collapsed`: Initial collapsed state (default: false) +- `breakpoint`: Breakpoint for responsive behavior ('mobile', 'tablet', 'desktop') + +```html +
+ + +
+ +
+

Main content area

+
+
+
+``` + +### Form Validation + +**Configuration Options:** + +- `rules`: Validation rules object +- `messages`: Custom error messages +- `validateOnInput`: Validate on input change (default: true) + +```html +
+
+
+ + +

+
+ +
+ + +

+
+ + +
+
+``` + +## Utility Classes + +### Spacing + +```html + +
Margin on all sides
+
Margin top
+
Horizontal margin
+ + +
Padding on all sides
+
Padding top
+
Horizontal padding
+``` + +### Layout + +```html + +
Centered flex container
+
Space between flex container
+
Flex column
+ + +
Grid container
+ + +
Responsive container
+``` + +### Typography + +```html + +

Heading 1

+

Heading 2

+

Paragraph 1

+

Paragraph 2

+ + + + Small text with medium weight and primary color + + + +

Paragraph 2 with medium font weight

+ + +Large text using H3 size +Small text using P2 size + + +Regular weight (400) +Medium weight (500) +Semi bold weight (600) +Bold weight (700) +``` + +### Colors + +```html + +

Primary text

+

Secondary text

+

Disabled text

+

Brand text

+

Success text

+

Warning text

+

Error text

+ + +
Base surface
+
Level 1 surface
+
Level 2 surface
+ + +
Brand 100
+
Brand 600
+
Brand 950
+ + +
Success light
+
Warning medium
+
Error primary
+``` + +## CSS Classes Reference + +### Button Classes + +```css +/* Base button class */ +.tutor-btn + +/* Button variants */ +.tutor-btn--primary +.tutor-btn--secondary +.tutor-btn--outline +.tutor-btn--ghost + +/* Button sizes */ +.tutor-btn--small +.tutor-btn--medium +.tutor-btn--large + +/* Button states */ +.tutor-btn:disabled +.tutor-btn--loading +``` + +### Card Classes + +```css +/* Base card class */ +.tutor-card + +/* Card sections */ +.tutor-card__header +.tutor-card__body +.tutor-card__footer +.tutor-card__title +.tutor-card__subtitle + +/* Card variants */ +.tutor-card-elevated +.tutor-card-outlined +.tutor-card-interactive +``` + +### Form Classes + +```css +/* Form elements */ +.tutor-form-group +.tutor-label +.tutor-input +.tutor-textarea +.tutor-select +.tutor-checkbox +.tutor-radio + +/* Form states */ +.tutor-input--error +.tutor-input--success +.tutor-input--disabled + +/* Form text */ +.tutor-help-text +.tutor-error-text +.tutor-success-text +``` + +### Component Classes + +```css +/* Dropdown */ +.tutor-dropdown +.tutor-dropdown__menu +.tutor-dropdown__item + +/* Modal */ +.tutor-modal +.tutor-modal__backdrop +.tutor-modal__content +.tutor-modal__header +.tutor-modal__body +.tutor-modal__footer +.tutor-modal__close + +/* Tabs */ +.tutor-tabs +.tutor-tabs__nav +.tutor-tab +.tutor-tab.active +.tutor-tabs__content +.tutor-tab-panel + +/* Accordion */ +.tutor-accordion +.tutor-accordion__item +.tutor-accordion__trigger +.tutor-accordion__content + +/* Toast */ +.tutor-toast-container +.tutor-toast +.tutor-toast--success +.tutor-toast--error +.tutor-toast--warning +.tutor-toast--info +.tutor-toast__close + +/* Tooltip */ +.tutor-tooltip +.tutor-tooltip--top +.tutor-tooltip--bottom +.tutor-tooltip--left +.tutor-tooltip--right + +/* Popover */ +.tutor-popover +.tutor-popover__arrow +.tutor-popover__content + +/* Sidebar */ +.tutor-sidebar +.tutor-sidebar.collapsed +.tutor-sidebar__nav +.tutor-sidebar__item +``` + +### Spacing Classes + +```css +/* Margin classes (0-21 based on Figma tokens) */ +.tutor-m-{size} /* All sides */ +.tutor-mt-{size} /* Top */ +.tutor-me-{size} /* End (RTL-aware right/left) */ +.tutor-mb-{size} /* Bottom */ +.tutor-ms-{size} /* Start (RTL-aware left/right) */ +.tutor-mx-{size} /* Horizontal */ +.tutor-my-{size} /* Vertical */ + +/* Padding classes (0-21 based on Figma tokens) */ +.tutor-p-{size} /* All sides */ +.tutor-pt-{size} /* Top */ +.tutor-pe-{size} /* End (RTL-aware right/left) */ +.tutor-pb-{size} /* Bottom */ +.tutor-ps-{size} /* Start (RTL-aware left/right) */ +.tutor-px-{size} /* Horizontal */ +.tutor-py-{size} /* Vertical */ + +/* Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */ +/* Corresponding to: 0px, 2px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 48px, 56px, 64px, 80px, 96px, 112px, 128px, 200px */ +``` + +### Layout Classes + +```css +/* Container */ +.tutor-container + +/* Flexbox */ +.tutor-flex +.tutor-flex-center +.tutor-flex-between +.tutor-flex-around +.tutor-flex-column +.tutor-flex-wrap + +/* Grid */ +.tutor-grid + +/* Display */ +.tutor-block +.tutor-inline +.tutor-inline-block +.tutor-hidden + +/* Responsive utilities */ +.tutor-md-flex +.tutor-md-grid +.tutor-md-hidden +.tutor-lg-flex +.tutor-lg-grid +.tutor-lg-hidden +``` + +### Typography Classes + +```css +/* Headings */ +.tutor-h1 +.tutor-h2 +.tutor-h3 +.tutor-h4 +.tutor-h5 + +/* Paragraphs */ +.tutor-p1 +.tutor-p2 +.tutor-p3 + +/* Text utilities */ +.tutor-text-left +.tutor-text-center +.tutor-text-right +.tutor-text-justify + +/* Font weights */ +.tutor-font-light +.tutor-font-normal +.tutor-font-medium +.tutor-font-semibold +.tutor-font-bold +``` + +## SASS Mixins + +If you're using SASS, you can use the provided mixins for custom components. All mixins are RTL-aware and use design tokens: + +### Button Mixins + +```scss +@import 'tutor-design-system/scss/main'; + +.my-button { + @include tutor-button-base; + @include tutor-button-variant(primary); // primary, secondary, outline, ghost + @include tutor-button-size(large); // small, medium, large +} + +.my-button-group { + @include tutor-button-group(horizontal); // horizontal, vertical +} + +.loading-button { + @include tutor-button-loading; +} + +// RTL-aware button with icon +.icon-button { + @include tutor-button-base; + @include tutor-button-variant(primary); + + .icon { + @include margin-end(8px); // Automatically adapts to RTL + } +} +``` + +### Card Mixins + +```scss +.my-card { + @include tutor-card-base; + @include tutor-card-elevation(2); // 0-4 + @include tutor-card-padding(large); // small, medium, large + @include tutor-card-radius(large); // small, medium, large +} + +.interactive-card { + @include tutor-card-interactive; +} +``` + +### Form Mixins + +```scss +.my-input { + @include tutor-input-base; + @include tutor-input-size(large); // small, medium, large + @include tutor-input-validation(error); // error, success, warning +} + +.my-textarea { + @include tutor-textarea-base; + @include tutor-textarea-resize(vertical); // none, both, horizontal, vertical +} + +.my-select { + @include tutor-select-base; + @include tutor-select-arrow; +} +``` + +### Layout Mixins + +```scss +.my-container { + @include tutor-container; + @include tutor-container-size(large); // small, medium, large, full +} + +.my-flex { + @include tutor-flex; + @include tutor-flex-center; + @include tutor-flex-gap(16px); +} + +.my-grid { + @include tutor-grid; + @include tutor-grid-columns(3); // Number of columns + @include tutor-grid-gap(24px); +} +``` + +### RTL Mixins + +```scss +.my-component { + // Directional margins (automatically adapts to RTL) + @include margin-start(16px); + @include margin-end(8px); + + // Directional padding (automatically adapts to RTL) + @include padding-start(12px); + @include padding-end(12px); + + // Directional borders (automatically adapts to RTL) + @include border-start(1px solid var(--tutor-color-border-primary)); + @include border-radius-start(8px); + + // Text alignment (automatically adapts to RTL) + @include text-align-start; + + // Positioning (automatically adapts to RTL) + @include inset-inline-start(0); + + // Transform for RTL + @include rtl-transform(translateX(-100%)); + + // Icon positioning (automatically adapts to RTL) + .icon { + @include icon-start(8px); + } +} + +// RTL-aware utility mixins +.rtl-aware-component { + @include rtl-property(margin-left, margin-right, 16px); + @include rtl-value(text-align, left, right); + @include rtl-flip-horizontal; // Flips component horizontally in RTL +} +``` + +### Utility Mixins + +```scss +.visually-hidden { + @include tutor-visually-hidden; +} + +.truncate-text { + @include tutor-truncate; +} + +.focus-ring { + @include tutor-focus-ring; +} + +// Responsive mixins +.responsive-component { + @include tutor-respond-to(md) { + // Styles for tablet and up + } + + @include tutor-respond-to(lg) { + // Styles for desktop and up + } +} +``` + +### Animation Mixins + +```scss +.fade-in { + @include tutor-fade-in(0.3s); +} + +.slide-up { + @include tutor-slide-up(0.2s); +} + +.bounce { + @include tutor-bounce; +} + +.spin { + @include tutor-spin(1s); +} +``` + +## TutorCore API Reference + +### Component Factory Methods + +All component methods return Alpine.js data objects that can be used with `x-data`: + +#### `TutorCore.dropdown(config?: DropdownConfig)` + +Creates a dropdown component with RTL-aware positioning and keyboard navigation. + +**Config Options:** + +```typescript +interface DropdownConfig { + placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'; + offset?: number; + closeOnClickOutside?: boolean; +} +``` + +**Returned Methods:** + +- `toggle()`: Toggle dropdown visibility +- `open()`: Show dropdown +- `close()`: Hide dropdown +- `handleKeydown(event)`: Handle keyboard navigation + +#### `TutorCore.modal(config?: ModalConfig)` + +Creates a modal with focus management and accessibility features. + +**Config Options:** + +```typescript +interface ModalConfig { + closable?: boolean; + backdrop?: boolean; + keyboard?: boolean; +} +``` + +**Returned Methods:** + +- `show()`: Show modal +- `hide()`: Hide modal +- `handleKeydown(event)`: Handle ESC key + +#### `TutorCore.toast()` + +Creates a toast notification system with stacking and auto-dismiss. + +**Returned Methods:** + +- `show(message: string, config?: ToastConfig)`: Show toast +- `success(message: string)`: Show success toast +- `error(message: string)`: Show error toast +- `warning(message: string)`: Show warning toast +- `info(message: string)`: Show info toast +- `remove(id: number)`: Remove specific toast +- `clear()`: Remove all toasts + +#### `TutorCore.tabs(config?: TabsConfig)` + +Creates a tab component with keyboard navigation and ARIA support. + +**Config Options:** + +```typescript +interface TabsConfig { + defaultTab?: number; +} +``` + +**Returned Methods:** + +- `setTab(index: number)`: Set active tab +- `isActive(index: number)`: Check if tab is active +- `nextTab()`: Navigate to next tab +- `prevTab()`: Navigate to previous tab + +#### `TutorCore.accordion(config?: AccordionConfig)` + +Creates an accordion with single or multiple panel support. + +**Config Options:** + +```typescript +interface AccordionConfig { + multiple?: boolean; + defaultOpen?: number[]; +} +``` + +**Returned Methods:** + +- `toggle(index: number)`: Toggle panel +- `open(index: number)`: Open panel +- `close(index: number)`: Close panel +- `isOpen(index: number)`: Check if panel is open + +### Utility Methods + +#### `TutorCore.utils.isRTL(): boolean` + +Check if the current document direction is RTL. + +#### `TutorCore.utils.getDirection(): 'ltr' | 'rtl'` + +Get the current document direction. + +#### `TutorCore.utils.adaptPlacement(placement: string): string` + +Adapt placement strings for RTL layouts. + +#### `TutorCore.utils.generateId(): string` + +Generate a unique ID for components. + +#### `TutorCore.utils.debounce(func: T, wait: number): T` + +Debounce function calls. + +#### `TutorCore.utils.throttle(func: T, limit: number): T` + +Throttle function calls. + +#### `TutorCore.utils.getBreakpoint(): string` + +Get current breakpoint ('mobile', 'tablet', 'desktop'). + +#### `TutorCore.utils.isMobile(): boolean` + +Check if current viewport is mobile. + +#### `TutorCore.utils.isTablet(): boolean` + +Check if current viewport is tablet. + +#### `TutorCore.utils.isDesktop(): boolean` + +Check if current viewport is desktop. + +## TypeScript Support + +The library includes full TypeScript definitions: + +```typescript +import { TutorCore } from 'tutor-design-system'; + +// Use component methods with type safety +const dropdownData = TutorCore.dropdown({ + placement: 'bottom-start', + closeOnClickOutside: true, +}); + +const modalData = TutorCore.modal({ + keyboard: true, + backdrop: true, +}); + +// Access utility methods +const isRTL = TutorCore.utils.isRTL(); +const uniqueId = TutorCore.utils.generateId(); + +// Use with Alpine.js +document.addEventListener('alpine:init', () => { + Alpine.data('myDropdown', () => TutorCore.dropdown()); +}); +``` + +## Browser Support + +- Chrome 90+ +- Firefox 88+ +- Safari 14+ +- Edge 90+ + +## For Developers + +### Architecture Overview + +The Tutor Design System follows a hybrid approach combining the best of both SASS variables and CSS custom properties: + +- **SASS Variables**: Used for static values that don't change between themes (typography, spacing, radius) +- **CSS Custom Properties**: Used for dynamic values that change between themes (colors, surfaces) +- **RTL Mixins**: Provide directional-aware styling for international support +- **Component Patterns**: Follow BEM naming convention with design system integration + +### When to Use SASS Variables vs CSS Custom Properties + +**✅ Use SASS Variables for:** + +```scss +// Static values that don't change between themes +font-family: $tutor-font-family-body; +font-size: $tutor-font-size-p1; +line-height: $tutor-line-height-p1; +font-weight: $tutor-font-weight-medium; +padding: $tutor-spacing-4; +border-radius: $tutor-radius-md; +``` + +**✅ Use CSS Custom Properties for:** + +```scss +// Dynamic values that change between themes +color: var(--tutor-text-primary); +background-color: var(--tutor-surface-l1); +border-color: var(--tutor-border-idle); +``` + +**✅ Best Practice - Mixed Approach:** + +```scss +.my-component { + // Static properties - SASS variables + font-family: $tutor-font-family-body; + font-size: $tutor-font-size-p1; + padding: $tutor-spacing-4; + border-radius: $tutor-radius-md; + + // Dynamic properties - CSS custom properties + color: var(--tutor-text-primary); + background: var(--tutor-surface-l1); + border: 1px solid var(--tutor-border-idle); +} +``` + +### Building Custom Components + +Follow these patterns when creating custom components: + +#### 1. Component Structure Template + +```scss +.my-component { + // Layout & Structure (SASS variables) + display: flex; + padding: $tutor-spacing-4; + border-radius: $tutor-radius-lg; + font-family: $tutor-font-family-body; + font-size: $tutor-font-size-p1; + + // Appearance (CSS custom properties) + background: var(--tutor-surface-l1); + border: 1px solid var(--tutor-border-idle); + color: var(--tutor-text-primary); + + // RTL Support + @include text-align-start(); + + // States + &:hover { + border-color: var(--tutor-border-brand); + } + + // Variants + &--primary { + background: var(--tutor-actions-brand-primary); + color: var(--tutor-text-primary-inverse); + } + + // Elements + &__header { + @include margin-end($tutor-spacing-4); + } +} +``` + +#### 2. RTL-Aware Development + +Always use RTL mixins for directional properties: + +```scss +.my-component { + // ✅ Good - RTL aware + @include margin-start($tutor-spacing-4); + @include padding-end($tutor-spacing-2); + @include border-start(2px solid var(--tutor-border-brand)); + @include text-align-start(); + + // ❌ Bad - Not RTL aware + margin-left: $tutor-spacing-4; + padding-right: $tutor-spacing-2; + border-left: 2px solid var(--tutor-border-brand); + text-align: left; +} +``` + +#### 3. Component Development Best Practices + +**✅ Do's:** + +- Use BEM naming convention +- Prefix components with your namespace +- Mix SASS variables and CSS custom properties appropriately +- Use RTL mixins for directional properties +- Test in both light and dark themes +- Test in both LTR and RTL directions +- Use design system tokens instead of hardcoded values +- Include proper accessibility attributes + +**❌ Don'ts:** + +- Don't use hardcoded colors, sizes, or spacing +- Don't use left/right properties directly +- Don't override design system components directly +- Don't use CSS custom properties for static values +- Don't use SASS variables for theme-dependent colors +- Don't forget RTL testing + +### Common Patterns + +#### Alert Component Pattern + +```scss +.custom-alert { + padding: $tutor-spacing-4 $tutor-spacing-6; + border-radius: $tutor-radius-md; + font-size: $tutor-font-size-p2; + @include border-start(4px solid); + + &--success { + background: var(--tutor-actions-success-tertiary); + border-color: var(--tutor-actions-success-primary); + color: var(--tutor-text-success); + } + + &--error { + background: var(--tutor-actions-critical-secondary); + border-color: var(--tutor-actions-critical-primary); + color: var(--tutor-text-critical); + } +} +``` + +#### Card Component Pattern + +```scss +.custom-card { + background: var(--tutor-surface-l1); + border: 1px solid var(--tutor-border-idle); + border-radius: $tutor-radius-xl; + padding: $tutor-spacing-6; + transition: all 0.2s ease; + + &:hover { + border-color: var(--tutor-border-brand); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } + + &__header { + margin-bottom: $tutor-spacing-4; + @include padding-bottom($tutor-spacing-4); + border-bottom: 1px solid var(--tutor-border-idle); + } + + &__title { + font-size: $tutor-font-size-h4; + font-weight: $tutor-font-weight-semi-strong; + color: var(--tutor-text-primary); + margin: 0; + } +} +``` + +## Examples + +The library includes comprehensive example files for developers: + +- **`examples/basic-usage.html`** - Basic setup and component usage +- **`examples/alpine-components.html`** - All Alpine.js components with examples +- **`examples/rtl-support.html`** - RTL language support demonstration +- **`examples/font-scaling.html`** - Font scaling and accessibility features +- **`examples/sass-development.html`** - SASS development guide with mixins and tokens +- **`examples/design-tokens.html`** - Visual guide to all design tokens +- **`examples/custom-components.html`** - Building custom components following design system patterns +- **`examples/tutor-design-system-components.html`** - Complete TutorCore API examples + +To view the examples: + +```bash +# Serve the examples directory +npx serve examples/ + +# Or open directly in browser +open examples/basic-usage.html +``` + +## Development + +### Building from Source + +```bash +# Install dependencies +npm install + +# Build CSS and JS files +npm run build + +# Watch for changes during development +npm run dev + +# Run build script with file size summary +node build.js +``` + +### File Structure + +``` +assets/core/ +├── scss/ +│ ├── tokens/ # Design tokens based on Figma specifications +│ │ ├── _colors.scss # Complete color scales (Brand, Gray, Success, Warning, Error, Yellow, Exception) +│ │ ├── _typography.scss # Typography scale (H1-H5, P1-P3) with line heights +│ │ ├── _spacing.scss # Spacing scale (0-21: 0px to 200px) +│ │ ├── _radius.scss # Border radius scale (none to full) +│ │ └── _breakpoints.scss # Responsive breakpoints +│ ├── themes/ # Theme variants with semantic token mappings +│ │ ├── _light.scss # Light theme with Figma surface and text colors +│ │ └── _dark.scss # Dark theme with proper contrast ratios +│ ├── mixins/ # SASS mixins with RTL support +│ │ ├── _buttons.scss # Button variants and states +│ │ ├── _cards.scss # Card layouts and elevation +│ │ ├── _forms.scss # Form elements and validation +│ │ ├── _layout.scss # Flexbox, grid, and positioning +│ │ ├── _utilities.scss # Common utility patterns +│ │ └── _rtl.scss # RTL-aware directional mixins +│ ├── components/ # Component styles with RTL support +│ │ ├── _button.scss # All button variants and sizes +│ │ ├── _card.scss # Flexible card layouts +│ │ ├── _form.scss # Form styling and validation states +│ │ ├── _navigation.scss # Tabs, breadcrumbs, pagination +│ │ ├── _progress.scss # Progress bars and indicators +│ │ ├── _dropdown.scss # Dropdown with RTL positioning +│ │ ├── _modal.scss # Modal with backdrop and responsive layouts +│ │ ├── _tabs.scss # Tab component with transitions +│ │ ├── _accordion.scss # Accordion with animations +│ │ ├── _toast.scss # Toast notifications with stacking +│ │ ├── _tooltip.scss # Tooltip with RTL positioning +│ │ ├── _popover.scss # Popover with arrow positioning +│ │ └── _sidebar.scss # Sidebar with collapse states +│ ├── utilities/ # RTL-aware utility classes +│ │ ├── _colors.scss # Color utilities for all themes +│ │ ├── _layout.scss # Flexbox, grid, display utilities +│ │ ├── _spacing.scss # RTL-aware margin and padding +│ │ ├── _typography.scss # Typography and text utilities +│ │ ├── _borders.scss # Border utilities with smart defaults +│ │ └── _sizing.scss # Width, height, and sizing utilities +│ └── main.scss # Main entry point +├── ts/ +│ ├── types/ # TypeScript definitions (no 'any' types) +│ │ ├── components.ts # Component interfaces and types +│ │ └── alpine.ts # Alpine.js integration types +│ ├── components/ # Component logic with proper typing +│ │ ├── dropdown.ts # Dropdown with RTL positioning +│ │ ├── modal.ts # Modal with focus management +│ │ ├── tabs.ts # Tabs with keyboard navigation +│ │ ├── accordion.ts # Accordion with animation support +│ │ ├── toast.ts # Toast system with stacking +│ │ ├── tooltip.ts # Tooltip with RTL positioning +│ │ ├── popover.ts # Popover with collision detection +│ │ ├── sidebar.ts # Sidebar with responsive behavior +│ │ └── form-validation.ts # Form validation with custom rules +│ ├── utils/ # Utility functions +│ │ └── rtl-detection.ts # RTL detection and utilities +│ └── index.ts # Main TutorCore class export +├── examples/ # Example HTML files +│ ├── basic-usage.html +│ ├── alpine-components.html +│ ├── rtl-support.html +│ └── tutor-design-system-components.html +├── dist/ # Compiled files +│ ├── tutor-design-system.css # Single CSS file with all themes +│ ├── tutor-design-system.min.css # Minified CSS +│ ├── tutor-design-system.js # Single JS file with TutorCore +│ ├── tutor-design-system.min.js # Minified JS +│ └── tutor-design-system.d.ts # TypeScript declarations +├── package.json +├── tsconfig.json +├── rollup.config.js +├── build.js +├── CONTRIBUTING.md # Development guidelines +└── README.md +``` + +## Troubleshooting + +### Common Issues + +**CSS not loading properly:** + +- Ensure the CSS file is included before any custom styles +- Check that the `data-theme` attribute is set on the `` element +- Verify the file path is correct + +**Alpine.js components not working:** + +- Make sure Alpine.js is loaded before the design system JS +- Check that the `x-data` directive uses the correct TutorCore method +- Ensure the component is properly initialized + +**RTL layout issues:** + +- Set the `dir="rtl"` attribute on the `` element +- Check that RTL-specific CSS classes are being applied +- Verify that directional properties are working correctly + +**TypeScript errors:** + +- Ensure the TypeScript declaration file (`index.d.ts`) is included +- Check that the import path is correct +- Verify that the TypeScript version is compatible + +**Build errors:** + +- Run `npm install` to ensure all dependencies are installed +- Check that Node.js version is 16 or higher +- Clear the `dist/` directory and rebuild + +### Performance Tips + +- Use the minified versions (`*.min.css` and `*.min.js`) in production +- Enable gzip compression on your server for better file sizes +- Consider loading the CSS inline for critical above-the-fold content +- Use the `preload` link relation for faster resource loading: + +```html + + +``` + +- The design system uses CSS custom properties for theme switching, which is more performant than class-based theming +- All utility classes are RTL-aware by default, eliminating the need for separate RTL stylesheets +- Single file distribution reduces HTTP requests and improves loading performance + +### Browser Compatibility + +If you need to support older browsers: + +- Include CSS custom property polyfills for IE11 +- Use Alpine.js v2 for better IE11 support +- Consider using PostCSS autoprefixer for vendor prefixes +- Test thoroughly in your target browsers + +## License + +MIT License - see LICENSE file for details. diff --git a/assets/core/docs/README.md b/assets/core/docs/README.md new file mode 100644 index 0000000000..73780c12a7 --- /dev/null +++ b/assets/core/docs/README.md @@ -0,0 +1,291 @@ +# Tutor Design System Documentation + +A comprehensive, interactive documentation site for the Tutor Design System with live examples, design token references, and developer guides. + +## 📁 Documentation Structure + +``` +docs/ +├── index.html # Main documentation hub with navigation +├── components.html # Interactive component showcase +├── design-tokens.html # Complete design token reference +├── assets/ +│ ├── docs.css # Documentation-specific styles +│ └── docs.js # Documentation functionality +└── README.md # This file +``` + +## 🚀 Features + +### Interactive Documentation Hub + +- **Responsive Navigation**: Collapsible sidebar with search functionality +- **Theme Switching**: Live theme toggle between light and dark modes +- **RTL Support**: Real-time RTL/LTR direction switching +- **Font Scaling**: Accessibility controls for font size adjustment +- **Mobile Optimized**: Fully responsive design for all devices + +### Component Showcase + +- **Live Examples**: Interactive demonstrations of all components +- **Code Snippets**: Copy-to-clipboard code examples +- **Alpine.js Integration**: Working examples of Alpine.js components +- **State Variations**: Different component states and variants +- **Real-time Theming**: Components update with theme changes + +### Design Token Reference + +- **Complete Token System**: All design tokens with visual examples +- **Color Scales**: Interactive color palette with hex values +- **Typography System**: Font sizes, weights, and line heights +- **Spacing Scale**: Visual spacing demonstrations +- **Semantic Mappings**: CSS custom properties and their values +- **Copy Functionality**: One-click copying of token values + +## 🎨 Design System Coverage + +### Components Documented + +- **Buttons**: All variants, sizes, and states +- **Cards**: Basic, elevated, and interactive cards +- **Forms**: Input fields, textareas, validation states +- **Alpine.js Components**: Dropdown, modal, tabs, toast, accordion +- **Typography**: Complete heading and paragraph system +- **Utility Classes**: Spacing, colors, layout utilities + +### Design Tokens Covered + +- **Color System**: Brand, gray, success, warning, error scales +- **Semantic Colors**: Text, surface, action, border mappings +- **Typography**: Font sizes, line heights, weights +- **Spacing**: 22-step spacing scale (0-21) +- **Border Radius**: Complete radius scale +- **Breakpoints**: Responsive design breakpoints + +## 🛠 Technical Implementation + +### Architecture + +- **Alpine.js**: Reactive components and state management +- **CSS Custom Properties**: Theme-aware styling +- **SASS Variables**: Static design tokens +- **Responsive Design**: Mobile-first approach +- **Accessibility**: WCAG compliant with proper focus management + +### Key Features + +- **Search Functionality**: Debounced search across all documentation +- **Code Copying**: Clipboard API with fallback support +- **Theme Persistence**: LocalStorage for user preferences +- **Performance Optimized**: Lazy loading and efficient rendering +- **Cross-browser Compatible**: Modern browser support + +## 📖 Usage Guide + +### Getting Started + +1. Open `index.html` in a web browser +2. Navigate through sections using the sidebar +3. Use the header controls to test different themes and directions +4. Copy code examples directly from the documentation + +### Navigation + +- **Sidebar**: Click any section to navigate +- **Search**: Type to filter navigation items +- **Mobile**: Use hamburger menu on mobile devices +- **Breadcrumbs**: Current section shown in header + +### Interactive Features + +- **Theme Toggle**: Switch between light and dark themes +- **RTL Toggle**: Test right-to-left language support +- **Font Scaling**: Adjust font size for accessibility testing +- **Code Copying**: Click "Copy" buttons to copy code snippets + +## 🎯 Developer Benefits + +### For Component Development + +- **Visual Reference**: See all components in one place +- **Code Examples**: Ready-to-use HTML snippets +- **State Testing**: Test different component states +- **Theme Compatibility**: Verify components work in all themes + +### For Design Token Usage + +- **Token Discovery**: Find the right token for any use case +- **Visual Context**: See how tokens look in practice +- **Copy Values**: Quickly copy token names or values +- **Semantic Understanding**: Learn the token architecture + +### For Integration + +- **Setup Guide**: Complete installation instructions +- **Best Practices**: Recommended usage patterns +- **Architecture Guide**: Understanding the token system +- **Troubleshooting**: Common issues and solutions + +## 🔧 Customization + +### Adding New Components + +1. Add component examples to `components.html` +2. Include code snippets with copy functionality +3. Update navigation in `docs.js` +4. Add any component-specific styles + +### Adding New Tokens + +1. Update token data in `design-tokens.html` +2. Add visual examples and descriptions +3. Include SASS variable and CSS custom property mappings +4. Update the token architecture documentation + +### Styling Customization + +- Modify `assets/docs.css` for visual changes +- Use existing design system tokens for consistency +- Maintain responsive design principles +- Test in both light and dark themes + +## 📱 Responsive Behavior + +### Mobile (< 768px) + +- Collapsible sidebar with overlay +- Stacked navigation controls +- Touch-friendly interactions +- Optimized typography scaling + +### Tablet (768px - 1023px) + +- Persistent sidebar +- Responsive grid layouts +- Balanced content spacing +- Touch and mouse support + +### Desktop (1024px+) + +- Full sidebar navigation +- Multi-column layouts +- Hover interactions +- Keyboard navigation support + +## ♿ Accessibility Features + +### Keyboard Navigation + +- Tab navigation through all interactive elements +- Escape key to close modals and dropdowns +- Arrow keys for component navigation +- Enter/Space for activation + +### Screen Reader Support + +- Semantic HTML structure +- ARIA labels and descriptions +- Focus management +- Proper heading hierarchy + +### Visual Accessibility + +- High contrast ratios in all themes +- Font scaling support (80% - 120%) +- Clear focus indicators +- Sufficient color contrast + +## 🚀 Performance Optimizations + +### Loading Performance + +- Minimal external dependencies +- Optimized CSS and JavaScript +- Efficient Alpine.js components +- Lazy loading where appropriate + +### Runtime Performance + +- Debounced search functionality +- Efficient DOM updates +- Minimal re-renders +- Optimized animations + +### Memory Management + +- Proper event cleanup +- Efficient data structures +- Minimal memory leaks +- Garbage collection friendly + +## 🔄 Maintenance + +### Regular Updates + +- Keep component examples current +- Update design token values +- Maintain code snippet accuracy +- Test across browsers regularly + +### Content Management + +- Review documentation completeness +- Update screenshots and examples +- Verify all links and references +- Maintain consistent terminology + +### Technical Maintenance + +- Update dependencies as needed +- Monitor performance metrics +- Fix accessibility issues +- Optimize for new browsers + +## 📊 Browser Support + +### Fully Supported + +- Chrome 90+ +- Firefox 88+ +- Safari 14+ +- Edge 90+ + +### Graceful Degradation + +- Older browsers receive basic functionality +- Progressive enhancement approach +- Fallbacks for modern features +- Core content always accessible + +## 🤝 Contributing + +### Documentation Improvements + +1. Identify areas for improvement +2. Create clear, concise content +3. Include visual examples +4. Test across devices and browsers + +### Code Examples + +1. Ensure examples are complete and working +2. Include proper HTML structure +3. Use design system tokens consistently +4. Provide copy-friendly code snippets + +### Design Token Updates + +1. Maintain consistency with Figma designs +2. Update both SASS and CSS custom properties +3. Include visual examples +4. Document semantic mappings + +## 📄 License + +This documentation is part of the Tutor Design System and follows the same licensing terms as the main project. + +--- + +**Built with ❤️ for the Tutor LMS community** + +For questions, issues, or contributions, please refer to the main Tutor Design System repository. diff --git a/assets/core/docs/assets/docs.css b/assets/core/docs/assets/docs.css new file mode 100644 index 0000000000..9e1e3aba4f --- /dev/null +++ b/assets/core/docs/assets/docs.css @@ -0,0 +1,774 @@ +/* Documentation Styles */ +:root { + --docs-sidebar-width: 280px; + --docs-header-height: 64px; + --docs-font-mono: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + --docs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + font-family: var(--docs-font-sans); + margin: 0; + padding: 0; + background: var(--tutor-surface-base); + color: var(--tutor-text-primary); + line-height: 1.6; +} + +/* Layout */ +.docs-layout { + display: flex; + min-height: 100vh; + position: relative; +} + +/* Mobile Overlay */ +.docs-mobile-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + display: none; +} + +@media (max-width: 768px) { + .docs-mobile-overlay { + display: block; + } +} + +/* Sidebar */ +.docs-sidebar { + width: var(--docs-sidebar-width); + background: var(--tutor-surface-l1); + border-right: 1px solid var(--tutor-border-idle); + position: fixed; + top: 0; + left: 0; + height: 100vh; + overflow-y: auto; + z-index: 1000; + display: flex; + flex-direction: column; +} + +[dir="rtl"] .docs-sidebar { + left: auto; + right: 0; + border-right: none; + border-left: 1px solid var(--tutor-border-idle); +} + +@media (max-width: 768px) { + .docs-sidebar { + transform: translateX(-100%); + transition: transform 0.3s ease; + } + + [dir="rtl"] .docs-sidebar { + transform: translateX(100%); + } + + .docs-sidebar--open { + transform: translateX(0); + } +} + +/* Sidebar Header */ +.docs-sidebar__header { + padding: 1.5rem; + border-bottom: 1px solid var(--tutor-border-idle); + display: flex; + align-items: center; + justify-content: space-between; +} + +.docs-logo { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.docs-logo h2 { + margin: 0; + color: var(--tutor-text-primary); +} + +.docs-version { + background: var(--tutor-actions-brand-primary); + color: white; + padding: 0.125rem 0.5rem; + border-radius: 12px; + font-size: 0.75rem; + font-weight: 500; +} + +.docs-mobile-close { + display: none; +} + +@media (max-width: 768px) { + .docs-mobile-close { + display: block; + } +} + +/* Search */ +.docs-search { + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--tutor-border-idle); +} + +.docs-search__input { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--tutor-border-idle); + border-radius: 8px; + background: var(--tutor-surface-base); + color: var(--tutor-text-primary); + font-size: 0.875rem; + font-family: var(--docs-font-sans); +} + +.docs-search__input:focus { + outline: none; + border-color: var(--tutor-border-brand); + box-shadow: 0 0 0 3px var(--tutor-actions-brand-tertiary); +} + +/* Navigation */ +.docs-nav { + flex: 1; + padding: 1rem 0; + overflow-y: auto; +} + +.docs-nav__section { + margin-bottom: 2rem; +} + +.docs-nav__title { + font-size: 0.75rem; + font-weight: 600; + color: var(--tutor-text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0 0 0.75rem 0; + padding: 0 1.5rem; +} + +.docs-nav__list { + list-style: none; + margin: 0; + padding: 0; +} + +.docs-nav__item { + margin: 0; +} + +.docs-nav__link { + display: block; + padding: 0.5rem 1.5rem; + color: var(--tutor-text-secondary); + text-decoration: none; + font-size: 0.875rem; + transition: all 0.2s ease; + border-left: 3px solid transparent; +} + +[dir="rtl"] .docs-nav__link { + border-left: none; + border-right: 3px solid transparent; +} + +.docs-nav__link:hover { + background: var(--tutor-surface-l2); + color: var(--tutor-text-primary); +} + +.docs-nav__link--active { + background: var(--tutor-actions-brand-tertiary); + color: var(--tutor-text-brand); + border-left-color: var(--tutor-actions-brand-primary); + font-weight: 500; +} + +[dir="rtl"] .docs-nav__link--active { + border-left-color: transparent; + border-right-color: var(--tutor-actions-brand-primary); +} + +/* Main Content */ +.docs-main { + flex: 1; + margin-left: var(--docs-sidebar-width); + display: flex; + flex-direction: column; + min-height: 100vh; +} + +[dir="rtl"] .docs-main { + margin-left: 0; + margin-right: var(--docs-sidebar-width); +} + +@media (max-width: 768px) { + .docs-main { + margin-left: 0; + margin-right: 0; + } +} + +/* Header */ +.docs-header { + height: var(--docs-header-height); + background: var(--tutor-surface-base); + border-bottom: 1px solid var(--tutor-border-idle); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2rem; + position: sticky; + top: 0; + z-index: 100; +} + +@media (max-width: 768px) { + .docs-header { + padding: 0 1rem; + } +} + +.docs-header__left { + display: flex; + align-items: center; + gap: 1rem; +} + +.docs-header__right { + display: flex; + align-items: center; +} + +.docs-mobile-menu { + display: none; +} + +@media (max-width: 768px) { + .docs-mobile-menu { + display: block; + } +} + +.docs-breadcrumb { + font-size: 1rem; + font-weight: 500; + color: var(--tutor-text-primary); +} + +/* Controls */ +.docs-controls { + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; +} + +@media (max-width: 640px) { + .docs-controls { + gap: 0.5rem; + } +} + +.docs-control { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.docs-control__label { + font-size: 0.875rem; + color: var(--tutor-text-secondary); + white-space: nowrap; +} + +.docs-control__select { + padding: 0.25rem 0.5rem; + border: 1px solid var(--tutor-border-idle); + border-radius: 4px; + background: var(--tutor-surface-base); + color: var(--tutor-text-primary); + font-size: 0.875rem; +} + +.docs-control__btn { + white-space: nowrap; +} + +/* Content */ +.docs-content { + flex: 1; + padding: 2rem; + max-width: 100%; + overflow-x: hidden; +} + +@media (max-width: 768px) { + .docs-content { + padding: 1rem; + } +} + +.docs-section { + max-width: 1200px; + margin: 0 auto; +} + +.docs-section__title { + font-size: 2.5rem; + font-weight: 700; + color: var(--tutor-text-primary); + margin: 0 0 2rem 0; + line-height: 1.2; +} + +/* Hero Section */ +.docs-hero { + text-align: center; + padding: 4rem 0; + margin-bottom: 4rem; +} + +.docs-hero__title { + font-size: 3.5rem; + font-weight: 800; + color: var(--tutor-text-primary); + margin: 0 0 1rem 0; + line-height: 1.1; + background: linear-gradient(135deg, var(--tutor-actions-brand-primary), var(--tutor-actions-brand-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +@media (max-width: 768px) { + .docs-hero__title { + font-size: 2.5rem; + } +} + +.docs-hero__subtitle { + font-size: 1.25rem; + color: var(--tutor-text-secondary); + margin: 0 0 2rem 0; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.docs-hero__actions { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +/* Features */ +.docs-features { + margin-bottom: 4rem; +} + +.docs-feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.docs-feature-card { + background: var(--tutor-surface-l1); + border: 1px solid var(--tutor-border-idle); + border-radius: 12px; + padding: 2rem; + text-align: center; + transition: all 0.2s ease; +} + +.docs-feature-card:hover { + border-color: var(--tutor-border-brand); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +.docs-feature-card__icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.docs-feature-card__title { + font-size: 1.25rem; + font-weight: 600; + color: var(--tutor-text-primary); + margin: 0 0 0.75rem 0; +} + +.docs-feature-card__description { + color: var(--tutor-text-secondary); + margin: 0; + line-height: 1.6; +} + +/* Examples */ +.docs-example { + margin-bottom: 3rem; + background: var(--tutor-surface-l1); + border: 1px solid var(--tutor-border-idle); + border-radius: 12px; + overflow: hidden; +} + +.docs-example__title { + font-size: 1.5rem; + font-weight: 600; + color: var(--tutor-text-primary); + margin: 0 0 0.75rem 0; + padding: 1.5rem 1.5rem 0; +} + +.docs-example__description { + color: var(--tutor-text-secondary); + margin: 0 0 1.5rem 0; + padding: 0 1.5rem; + line-height: 1.6; +} + +.docs-example__demo { + padding: 1.5rem; + background: var(--tutor-surface-base); + border-top: 1px solid var(--tutor-border-idle); + border-bottom: 1px solid var(--tutor-border-idle); +} + +/* Code Blocks */ +.docs-code-block { + background: var(--tutor-surface-l2); + border-radius: 8px; + overflow: hidden; + margin: 1rem 0; +} + +.docs-code-block__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + background: var(--tutor-surface-l1); + border-bottom: 1px solid var(--tutor-border-idle); +} + +.docs-code-block__title { + font-size: 0.875rem; + font-weight: 500; + color: var(--tutor-text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.docs-code-block__copy { + background: none; + border: 1px solid var(--tutor-border-idle); + color: var(--tutor-text-secondary); + padding: 0.25rem 0.75rem; + border-radius: 4px; + font-size: 0.75rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.docs-code-block__copy:hover { + background: var(--tutor-surface-l2); + border-color: var(--tutor-border-brand); + color: var(--tutor-text-primary); +} + +.docs-code-block__content { + margin: 0; + padding: 1rem; + font-family: var(--docs-font-mono); + font-size: 0.875rem; + line-height: 1.5; + color: var(--tutor-text-primary); + background: transparent; + overflow-x: auto; +} + +.docs-code-block__content code { + font-family: inherit; + font-size: inherit; + color: inherit; + background: none; + padding: 0; +} + +/* Token Architecture */ +.docs-token-architecture { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin: 2rem 0; + padding: 0 2rem; +} + +@media (max-width: 768px) { + .docs-token-architecture { + grid-template-columns: 1fr; + } +} + +.docs-token-type { + background: var(--tutor-surface-base); + border: 1px solid var(--tutor-border-idle); + border-radius: 8px; + padding: 1.5rem; +} + +.docs-token-type__title { + font-size: 1.25rem; + font-weight: 600; + color: var(--tutor-text-primary); + margin: 0 0 0.75rem 0; +} + +.docs-token-type__description { + color: var(--tutor-text-secondary); + margin: 0 0 1rem 0; +} + +.docs-token-type__list { + list-style: none; + margin: 0; + padding: 0; +} + +.docs-token-type__list li { + padding: 0.25rem 0; + color: var(--tutor-text-secondary); + position: relative; + padding-left: 1rem; +} + +.docs-token-type__list li::before { + content: '•'; + color: var(--tutor-actions-brand-primary); + position: absolute; + left: 0; +} + +/* Color System */ +.docs-color-system { + margin: 2rem 0; + padding: 0 2rem; +} + +.docs-color-tabs { + display: flex; + gap: 0.5rem; + margin-bottom: 2rem; + flex-wrap: wrap; +} + +.docs-color-tab { + padding: 0.5rem 1rem; + border: 1px solid var(--tutor-border-idle); + background: var(--tutor-surface-base); + color: var(--tutor-text-secondary); + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; + font-size: 0.875rem; +} + +.docs-color-tab:hover { + border-color: var(--tutor-border-brand); + color: var(--tutor-text-primary); +} + +.docs-color-tab.active { + background: var(--tutor-actions-brand-primary); + border-color: var(--tutor-actions-brand-primary); + color: white; +} + +.docs-color-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; +} + +.docs-color-swatch { + background: var(--tutor-surface-base); + border: 1px solid var(--tutor-border-idle); + border-radius: 8px; + padding: 1rem; + text-align: center; + transition: all 0.2s ease; + cursor: pointer; + position: relative; +} + +.docs-color-swatch:hover { + border-color: var(--tutor-border-brand); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.docs-color-swatch:hover::after { + content: 'Click to copy'; + position: absolute; + top: -2rem; + left: 50%; + transform: translateX(-50%); + background: var(--tutor-surface-l2); + color: var(--tutor-text-primary); + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-size: 0.75rem; + white-space: nowrap; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + z-index: 10; +} + +.docs-color-swatch__color { + width: 100%; + height: 60px; + border-radius: 6px; + margin-bottom: 0.75rem; + border: 1px solid var(--tutor-border-idle); +} + +.docs-color-swatch__info { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.docs-color-swatch__name { + font-weight: 500; + color: var(--tutor-text-primary); + font-size: 0.875rem; +} + +.docs-color-swatch__value { + font-family: var(--docs-font-mono); + font-size: 0.75rem; + color: var(--tutor-text-secondary); +} + +.docs-color-swatch__token { + font-family: var(--docs-font-mono); + font-size: 0.75rem; + color: var(--tutor-text-brand); + background: var(--tutor-actions-brand-tertiary); + padding: 0.125rem 0.375rem; + border-radius: 4px; +} + +/* Component sections are now individual pages */ + +/* Responsive Utilities */ +@media (max-width: 640px) { + .docs-hero { + padding: 2rem 0; + } + + .docs-hero__title { + font-size: 2rem; + } + + .docs-hero__subtitle { + font-size: 1rem; + } + + .docs-feature-grid { + grid-template-columns: 1fr; + } + + .docs-controls { + flex-direction: column; + align-items: stretch; + gap: 0.5rem; + } + + .docs-control { + justify-content: space-between; + } +} + +/* Dark theme adjustments */ +[data-theme="dark"] .docs-hero__title { + background: linear-gradient(135deg, #4979e8, #85e13a); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* RTL adjustments */ +[dir="rtl"] .docs-token-type__list li { + padding-left: 0; + padding-right: 1rem; +} + +[dir="rtl"] .docs-token-type__list li::before { + left: auto; + right: 0; +} + +/* Animation utilities */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.docs-section { + animation: fadeIn 0.3s ease; +} + +/* Focus styles for accessibility */ +.docs-nav__link:focus, +.docs-color-tab:focus, +.docs-component-nav__item:focus, +.docs-code-block__copy:focus, +.docs-search__input:focus { + outline: 2px solid var(--tutor-actions-brand-primary); + outline-offset: 2px; +} + +/* Print styles */ +@media print { + .docs-sidebar, + .docs-header { + display: none; + } + + .docs-main { + margin-left: 0; + margin-right: 0; + } + + .docs-content { + padding: 0; + } +} \ No newline at end of file diff --git a/assets/core/docs/assets/docs.js b/assets/core/docs/assets/docs.js new file mode 100644 index 0000000000..b7435af43a --- /dev/null +++ b/assets/core/docs/assets/docs.js @@ -0,0 +1,392 @@ +// Documentation App +function docsApp() { + return { + // State + activeSection: 'overview', + searchQuery: '', + mobileMenuOpen: false, + theme: 'light', + isRTL: false, + fontScale: 100, + isMobile: window.innerWidth <= 768, + + // Navigation structure + navigation: [ + { + id: 'getting-started', + title: 'Getting Started', + items: [ + { id: 'overview', title: 'Overview' }, + { id: 'installation', title: 'Installation' }, + { id: 'basic-usage', title: 'Basic Usage' } + ] + }, + { + id: 'design-system', + title: 'Design System', + items: [ + { id: 'design-tokens', title: 'Design Tokens' }, + { id: 'typography', title: 'Typography' }, + { id: 'colors', title: 'Colors' }, + { id: 'spacing', title: 'Spacing' } + ] + }, + { + id: 'components', + title: 'Components', + items: [ + { id: 'components', title: 'Overview' }, + { id: 'buttons', title: 'Buttons' }, + { id: 'cards', title: 'Cards' }, + { id: 'forms', title: 'Forms' }, + { id: 'alpine-components', title: 'Alpine.js Components' } + ] + }, + { + id: 'development', + title: 'Development', + items: [ + { id: 'sass-development', title: 'SASS Development' }, + { id: 'custom-components', title: 'Custom Components' }, + { id: 'utility-classes', title: 'Utility Classes' } + ] + }, + { + id: 'features', + title: 'Features', + items: [ + { id: 'font-scaling', title: 'Font Scaling' }, + { id: 'rtl-support', title: 'RTL Support' }, + { id: 'theming', title: 'Theming' } + ] + } + ], + + filteredNavigation: [], + + // Initialize + init() { + this.filteredNavigation = this.navigation; + this.detectTheme(); + this.detectRTL(); + this.detectFontScale(); + this.handleResize(); + + // Listen for resize events + window.addEventListener('resize', () => { + this.handleResize(); + }); + + // Listen for hash changes + window.addEventListener('hashchange', () => { + this.handleHashChange(); + }); + + // Handle initial hash + this.handleHashChange(); + }, + + // Navigation methods + setActiveSection(sectionId) { + this.activeSection = sectionId; + this.mobileMenuOpen = false; + + // Update URL hash + window.location.hash = sectionId; + + // Scroll to top + window.scrollTo({ top: 0, behavior: 'smooth' }); + }, + + getCurrentSection() { + for (const section of this.navigation) { + for (const item of section.items) { + if (item.id === this.activeSection) { + return item; + } + } + } + return null; + }, + + filterNavigation() { + if (!this.searchQuery.trim()) { + this.filteredNavigation = this.navigation; + return; + } + + const query = this.searchQuery.toLowerCase(); + this.filteredNavigation = this.navigation.map(section => ({ + ...section, + items: section.items.filter(item => + item.title.toLowerCase().includes(query) || + item.id.toLowerCase().includes(query) + ) + })).filter(section => section.items.length > 0); + }, + + handleHashChange() { + const hash = window.location.hash.slice(1); + if (hash && this.isValidSection(hash)) { + this.activeSection = hash; + } + }, + + isValidSection(sectionId) { + for (const section of this.navigation) { + for (const item of section.items) { + if (item.id === sectionId) { + return true; + } + } + } + return false; + }, + + handleResize() { + this.isMobile = window.innerWidth <= 768; + if (!this.isMobile) { + this.mobileMenuOpen = false; + } + }, + + // Theme methods + toggleTheme() { + this.theme = this.theme === 'light' ? 'dark' : 'light'; + document.documentElement.setAttribute('data-theme', this.theme); + localStorage.setItem('docs-theme', this.theme); + }, + + detectTheme() { + const savedTheme = localStorage.getItem('docs-theme'); + const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + this.theme = savedTheme || systemTheme; + document.documentElement.setAttribute('data-theme', this.theme); + }, + + // RTL methods + toggleRTL() { + this.isRTL = !this.isRTL; + document.documentElement.setAttribute('dir', this.isRTL ? 'rtl' : 'ltr'); + localStorage.setItem('docs-rtl', this.isRTL); + }, + + detectRTL() { + const savedRTL = localStorage.getItem('docs-rtl'); + this.isRTL = savedRTL === 'true'; + document.documentElement.setAttribute('dir', this.isRTL ? 'rtl' : 'ltr'); + }, + + // Font scaling methods + setFontScale(scale) { + this.fontScale = parseInt(scale); + + // Remove existing font scale classes + document.documentElement.classList.remove( + 'tutor-font-scale-80', + 'tutor-font-scale-90', + 'tutor-font-scale-100', + 'tutor-font-scale-110', + 'tutor-font-scale-120' + ); + + // Add new font scale class + if (scale !== 100) { + document.documentElement.classList.add(`tutor-font-scale-${scale}`); + } + + localStorage.setItem('docs-font-scale', scale); + }, + + detectFontScale() { + const savedScale = localStorage.getItem('docs-font-scale'); + this.fontScale = savedScale ? parseInt(savedScale) : 100; + this.setFontScale(this.fontScale); + }, + + // Utility methods + copyToClipboard(event) { + const codeBlock = event.target.closest('.docs-code-block'); + const code = codeBlock.querySelector('.docs-code-block__content code'); + + if (code) { + const text = code.textContent; + + // Modern clipboard API + if (navigator.clipboard) { + navigator.clipboard.writeText(text).then(() => { + this.showCopyFeedback(event.target); + }); + } else { + // Fallback for older browsers + const textarea = document.createElement('textarea'); + textarea.value = text; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand('copy'); + document.body.removeChild(textarea); + this.showCopyFeedback(event.target); + } + } + }, + + showCopyFeedback(button) { + const originalText = button.textContent; + button.textContent = 'Copied!'; + button.style.background = 'var(--tutor-actions-success-primary)'; + button.style.color = 'white'; + button.style.borderColor = 'var(--tutor-actions-success-primary)'; + + setTimeout(() => { + button.textContent = originalText; + button.style.background = ''; + button.style.color = ''; + button.style.borderColor = ''; + }, 2000); + } + }; +} + +// Color system data +const colorScales = { + brand: [ + { name: 'Brand 100', value: '#f6f8fe', token: '$tutor-brand-100' }, + { name: 'Brand 200', value: '#e4ebfc', token: '$tutor-brand-200' }, + { name: 'Brand 300', value: '#dbe4fa', token: '$tutor-brand-300' }, + { name: 'Brand 400', value: '#a4bcf4', token: '$tutor-brand-400' }, + { name: 'Brand 500', value: '#4979e8', token: '$tutor-brand-500' }, + { name: 'Brand 600', value: '#3e64de', token: '$tutor-brand-600' }, + { name: 'Brand 700', value: '#2b49ca', token: '$tutor-brand-700' }, + { name: 'Brand 800', value: '#293da4', token: '$tutor-brand-800' }, + { name: 'Brand 900', value: '#263782', token: '$tutor-brand-900' }, + { name: 'Brand 950', value: '#1c234f', token: '$tutor-brand-950' } + ], + gray: [ + { name: 'Gray 25', value: '#fcfcfd', token: '$tutor-gray-25' }, + { name: 'Gray 50', value: '#f9fafb', token: '$tutor-gray-50' }, + { name: 'Gray 100', value: '#f2f4f7', token: '$tutor-gray-100' }, + { name: 'Gray 200', value: '#eaecf0', token: '$tutor-gray-200' }, + { name: 'Gray 300', value: '#d0d5dd', token: '$tutor-gray-300' }, + { name: 'Gray 400', value: '#98a2b3', token: '$tutor-gray-400' }, + { name: 'Gray 500', value: '#667085', token: '$tutor-gray-500' }, + { name: 'Gray 600', value: '#475467', token: '$tutor-gray-600' }, + { name: 'Gray 700', value: '#344054', token: '$tutor-gray-700' }, + { name: 'Gray 800', value: '#1d2939', token: '$tutor-gray-800' }, + { name: 'Gray 900', value: '#101828', token: '$tutor-gray-900' }, + { name: 'Gray 950', value: '#0c111d', token: '$tutor-gray-950' } + ], + success: [ + { name: 'Success 25', value: '#fafef5', token: '$tutor-success-25' }, + { name: 'Success 50', value: '#f3fee7', token: '$tutor-success-50' }, + { name: 'Success 100', value: '#e3fbcc', token: '$tutor-success-100' }, + { name: 'Success 200', value: '#d0f8ab', token: '$tutor-success-200' }, + { name: 'Success 300', value: '#a6ef67', token: '$tutor-success-300' }, + { name: 'Success 400', value: '#85e13a', token: '$tutor-success-400' }, + { name: 'Success 500', value: '#66c61c', token: '$tutor-success-500' }, + { name: 'Success 600', value: '#4ca30d', token: '$tutor-success-600' }, + { name: 'Success 700', value: '#3b7c0f', token: '$tutor-success-700' }, + { name: 'Success 800', value: '#326212', token: '$tutor-success-800' }, + { name: 'Success 900', value: '#2b5314', token: '$tutor-success-900' }, + { name: 'Success 950', value: '#15290a', token: '$tutor-success-950' } + ], + warning: [ + { name: 'Warning 25', value: '#fffcf5', token: '$tutor-warning-25' }, + { name: 'Warning 50', value: '#fffaeb', token: '$tutor-warning-50' }, + { name: 'Warning 100', value: '#fef0c7', token: '$tutor-warning-100' }, + { name: 'Warning 200', value: '#fedf89', token: '$tutor-warning-200' }, + { name: 'Warning 300', value: '#fec84b', token: '$tutor-warning-300' }, + { name: 'Warning 400', value: '#fdb022', token: '$tutor-warning-400' }, + { name: 'Warning 500', value: '#f79009', token: '$tutor-warning-500' }, + { name: 'Warning 600', value: '#dc6803', token: '$tutor-warning-600' }, + { name: 'Warning 700', value: '#b54708', token: '$tutor-warning-700' }, + { name: 'Warning 800', value: '#93370d', token: '$tutor-warning-800' }, + { name: 'Warning 900', value: '#7a2e0e', token: '$tutor-warning-900' }, + { name: 'Warning 950', value: '#4e1d09', token: '$tutor-warning-950' } + ], + error: [ + { name: 'Error 25', value: '#fffbfa', token: '$tutor-error-25' }, + { name: 'Error 50', value: '#fef3f2', token: '$tutor-error-50' }, + { name: 'Error 100', value: '#fee4e2', token: '$tutor-error-100' }, + { name: 'Error 200', value: '#fecdca', token: '$tutor-error-200' }, + { name: 'Error 300', value: '#fda29b', token: '$tutor-error-300' }, + { name: 'Error 400', value: '#f97066', token: '$tutor-error-400' }, + { name: 'Error 500', value: '#f04438', token: '$tutor-error-500' }, + { name: 'Error 600', value: '#d92d20', token: '$tutor-error-600' }, + { name: 'Error 700', value: '#b42318', token: '$tutor-error-700' }, + { name: 'Error 800', value: '#912018', token: '$tutor-error-800' }, + { name: 'Error 900', value: '#7a271a', token: '$tutor-error-900' }, + { name: 'Error 950', value: '#55160c', token: '$tutor-error-950' } + ] +}; + +// Initialize when Alpine is ready +document.addEventListener('alpine:init', () => { + // Register color scales data + Alpine.store('colorScales', colorScales); +}); + +// Utility functions +window.docsUtils = { + // Format code for display + formatCode(code) { + return code.trim().replace(/^\s+/gm, ''); + }, + + // Generate component examples + generateButtonExample() { + return ` + + +`; + }, + + generateCardExample() { + return `
+
+

Card Title

+

Card subtitle

+
+
+

Card content goes here...

+
+
+ +
+
`; + }, + + generateFormExample() { + return `
+ + +

We'll never share your email.

+
+ +
+ + +
`; + } +}; + +// Performance optimization: Debounce search +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// Add debounced search to the app +document.addEventListener('alpine:init', () => { + Alpine.data('docsApp', () => { + const app = docsApp(); + app.filterNavigation = debounce(app.filterNavigation.bind(app), 300); + return app; + }); +}); \ No newline at end of file diff --git a/assets/core/docs/components.html b/assets/core/docs/components.html new file mode 100644 index 0000000000..af4e7ec30f --- /dev/null +++ b/assets/core/docs/components.html @@ -0,0 +1,576 @@ + + + + + + + Components - Tutor Design System + + + + + + +
+ +
+

Component Showcase

+

Interactive examples of all Tutor Design System components

+ +
+ + + + ← Back to Docs + +
+
+ + +
+

Buttons

+ +
+
+
+

Button Variants

+
+
+
+
+ + + + +
+
+
+
+ +
+
+

Button Sizes

+
+
+
+
+ + + +
+
+
+
+ +
+
+

Button States

+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+

Cards

+ +
+
+
+

Basic Card

+
+
+
+
+
+

Card Title

+

This is a subtitle

+
+
+

This is the card content. It can contain any HTML elements.

+
+
+ + +
+
+
+
+
+ +
+
+

Elevated Card

+
+
+
+
+
+

Elevated Card

+

This card has more elevation for emphasis.

+ +
+
+
+
+
+ +
+
+

Interactive Card

+
+
+
+
+
+

Interactive Card

+

This card responds to hover and click interactions.

+
+
+
+
+
+
+
+ + +
+

Form Elements

+ +
+
+
+

Input Fields

+
+
+
+
+ + +

This field is required

+
+ +
+ + +
+ +
+ + +
+
+
+
+ +
+
+

Form States

+
+
+
+
+ + +
+ +
+ + +

This field has an error

+
+ +
+ + +

This field is valid

+
+ +
+ + +
+
+
+
+
+
+ + +
+

Alpine.js Components

+ + +
+

Dropdown Component

+

Interactive dropdown with RTL support and keyboard navigation. +

+ +
+
+ +
+ Profile + Settings +
+ Logout +
+
+
+
+ + +
+

Modal Component

+

Modal with focus management and accessibility features.

+ +
+
+ + +
+
+
+
+
+

Modal Title

+ +
+
+

This is a modal dialog. You + can close it by clicking the X button, pressing Escape, or clicking outside.

+
+
+ + +
+
+
+
+
+
+ + +
+

Tabs Component

+

Tab component with keyboard navigation and ARIA support.

+ +
+
+
+ + + +
+
+
+

Overview

+

This is the overview content. It provides a general introduction to the topic.

+
+
+

Details

+

Here are the detailed specifications and technical information.

+
+
+

Reviews

+

Customer reviews and feedback will be displayed here.

+
+
+
+
+
+ + +
+

Toast Notifications

+

Toast notification system with stacking and auto-dismiss.

+ +
+
+
+ + + + +
+ +
+ +
+
+
+
+
+ + +
+

Typography

+ +
+

Typography Scale

+

Complete typography system with consistent spacing and line + heights.

+ +
+

Heading 1 (40px)

+

Heading 2 (32px)

+

Heading 3 (24px)

+

Heading 4 (20px)

+
Heading 5 (18px)
+

Paragraph 1 (16px) - This is the default paragraph size for body text with + optimal line height for readability.

+

Paragraph 2 (14px) - This is smaller text for secondary content and supporting + information.

+

Paragraph 3 (12px) - This is the smallest text size for captions, labels, and + fine print.

+
+
+
+ + +
+

Utility Classes

+ +
+
+
+

Spacing Utilities

+
+
+
+
+
Padding 4 (8px) +
+
Padding 6 (16px) +
+
Padding 8 (24px) +
+
+
+
+
+ +
+
+

Color Utilities

+
+
+
+

Primary Text

+

Secondary Text

+

Brand Text

+

Success Text

+

Warning Text

+

Error Text

+
+
+
+ +
+
+

Layout Utilities

+
+
+
+
+ Left + Right +
+
+ Centered +
+
+
+ Grid 1
+
+ Grid 2
+
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/assets/core/docs/design-tokens.html b/assets/core/docs/design-tokens.html new file mode 100644 index 0000000000..77eff4c091 --- /dev/null +++ b/assets/core/docs/design-tokens.html @@ -0,0 +1,708 @@ + + + + + + Design Tokens - Tutor Design System + + + + + +
+ +
+

Design Tokens

+

Complete reference for all design tokens in the Tutor Design System

+ +
+ + + + ← Back to Docs + +
+
+ + +
+
+

Token Architecture

+

+ The design system uses a hybrid approach combining SASS variables and CSS custom properties for optimal performance and flexibility. +

+
+
+
+
+

SASS Variables

+

+ For static values that don't change between themes +

+
    +
  • Typography (font sizes, line heights)
    • +
  • Spacing (margins, padding)
    • +
  • Border radius
    • +
  • Breakpoints
    • +
+
+
+

CSS Custom Properties

+

+ For dynamic values that change between themes +

+
    +
  • Colors (text, background, borders)
    • +
  • Theme-dependent surfaces
    • +
  • Semantic color mappings
    • +
  • User customizable values
    • +
+
+
+
+
+ + +
+
+

Color System

+

+ Complete color scales based on Figma specifications with 10-step scales for brand, gray, and semantic colors. +

+
+
+ +
+ +
+ + + +
+
+ + +
+
+

Semantic Color Mappings

+

+ CSS custom properties that map to different colors based on the current theme. +

+
+
+
+ +
+

Text Colors

+
+
+
+
Primary Text
+
--tutor-text-primary
+
+
+
+
+
+
Secondary Text
+
--tutor-text-secondary
+
+
+
+
+
+
Disabled Text
+
--tutor-text-disabled
+
+
+
+
+
+
Brand Text
+
--tutor-text-brand
+
+
+
+ + +
+

Surface Colors

+
+
+
+
Base Surface
+
--tutor-surface-base
+
+
+
+
+
+
Level 1 Surface
+
--tutor-surface-l1
+
+
+
+
+
+
Level 2 Surface
+
--tutor-surface-l2
+
+
+
+ + +
+

Action Colors

+
+
+
+
Brand Primary
+
--tutor-actions-brand-primary
+
+
+
+
+
+
Success Primary
+
--tutor-actions-success-primary
+
+
+
+
+
+
Warning Primary
+
--tutor-actions-warning-primary
+
+
+
+
+
+
Critical Primary
+
--tutor-actions-critical-primary
+
+
+
+ + +
+

Border Colors

+
+
+
+
Idle Border
+
--tutor-border-idle
+
+
+
+
+
+
Brand Border
+
--tutor-border-brand
+
+
+
+
+
+
Critical Border
+
--tutor-border-critical
+
+
+
+
+
+
+ + +
+
+

Typography

+

+ Typography scale with consistent font sizes, line heights, and weights for optimal readability. +

+
+
+
+ +
+
+
+ + +
+
+

Spacing Scale

+

+ 22-step spacing scale (0-21) from 0px to 200px, matching Figma specifications exactly. +

+
+
+
+ +
+
+
+ + +
+
+

Border Radius

+

+ Border radius scale from none (0px) to full (1000px) with semantic naming. +

+
+
+
+ +
+
+
+ + +
+
+

Breakpoints

+

+ Responsive breakpoints for mobile-first design approach. +

+
+
+
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/assets/core/docs/index.html b/assets/core/docs/index.html new file mode 100644 index 0000000000..dbc61296a9 --- /dev/null +++ b/assets/core/docs/index.html @@ -0,0 +1,1968 @@ + + + + + + + Tutor Design System - Developer Documentation + + + + + + + + +
+ +
+ + + + + +
+ +
+
+ +
+ +
+
+ +
+
+ +
+ + +
+ + + + + + +
+
+
+ + +
+ +
+
+

Tutor Design System

+

+ A comprehensive design system providing consistent UI components, themes, and utilities for + modern web applications. +

+
+ + +
+
+ +
+
+
+
🎨
+

Multi-theme Support

+

+ Light and dark themes with CSS custom properties based on Figma design tokens. +

+
+
+
🌍
+

RTL Language Support

+

+ Built-in right-to-left language support with automatic adaptation. +

+
+
+
🧩
+

Component Library

+

+ Pre-built components with Alpine.js integration and TypeScript support. +

+
+
+
📱
+

Responsive Design

+

+ Mobile-first responsive utilities with smart defaults. +

+
+
+
⚡
+

Performance Optimized

+

+ Single CSS and JS files for easy distribution and fast loading. +

+
+
+
🔧
+

TypeScript Support

+

+ Full TypeScript definitions with proper type safety (no any types). +

+
+
+
+
+ + +
+

Installation & Setup

+ +
+

Quick Start

+

+ Include the compiled CSS and JavaScript files in your HTML: +

+ +
+
+ HTML + +
+ 
<!DOCTYPE html>
+<html lang="en" dir="ltr" data-theme="light">
+<head>
+    <!-- Include the design system CSS -->
+    <link rel="stylesheet" href="assets/css/tutor-core.min.css" />
+</head>
+<body>
+    <!-- Your content here -->
+
+    <!-- Include Alpine.js and the design system JS -->
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script src="assets/js/tutor-core.js"></script>
+</body>
+</html>
+
+
+ +
+

Theme Configuration

+

+ Set the theme and direction attributes on the HTML element: +

+ +
+
+ HTML + +
+ 
<!-- Light theme, left-to-right -->
+<html lang="en" dir="ltr" data-theme="light">
+
+<!-- Dark theme, right-to-left -->
+<html lang="ar" dir="rtl" data-theme="dark">
+
+
+ +
+

JavaScript Theme Switching

+

+ Programmatically switch themes and directions: +

+ +
+
+ JavaScript + +
+ 
// Switch to dark theme
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Switch to light theme
+document.documentElement.setAttribute('data-theme', 'light');
+
+// Toggle RTL direction
+document.documentElement.setAttribute('dir', 'rtl');
+
+// Set font scale for accessibility
+TutorCore.utils.setFontScale(120); // 120% scaling
+
+
+
+ + +
+

Design Tokens

+ +
+

Token Architecture

+

+ The design system uses a hybrid approach combining SASS variables and CSS custom properties: +

+ +
+
+

SASS Variables

+

For static values that don't change between + themes

+
    +
  • Typography (font sizes, line heights)
    • +
  • Spacing (margins, padding)
    • +
  • Border radius
    • +
  • Breakpoints
    • +
+
+
+

CSS Custom Properties

+

For dynamic values that change between themes +

+
    +
  • Colors (text, background, borders)
    • +
  • Theme-dependent surfaces
    • +
  • Semantic color mappings
    • +
  • User customizable values
    • +
+
+
+
+ + +
+

Color System

+

+ Complete color scales based on Figma specifications with semantic mappings. +

+ +
+
+ + + + + +
+ + +
+
+
+
+
Brand 100
+
#f6f8fe
+
$tutor-brand-100
+
+
+
+
+
+
Brand 200
+
#e4ebfc
+
$tutor-brand-200
+
+
+
+
+
+
Brand 300
+
#dbe4fa
+
$tutor-brand-300
+
+
+
+
+
+
Brand 400
+
#a4bcf4
+
$tutor-brand-400
+
+
+
+
+
+
Brand 500
+
#4979e8
+
$tutor-brand-500
+
+
+
+
+
+
Brand 600
+
#3e64de
+
$tutor-brand-600
+
+
+
+
+
+
Brand 700
+
#2b49ca
+
$tutor-brand-700
+
+
+
+
+
+
Brand 800
+
#293da4
+
$tutor-brand-800
+
+
+
+
+
+
Brand 900
+
#263782
+
$tutor-brand-900
+
+
+
+
+
+
Brand 950
+
#1c234f
+
$tutor-brand-950
+
+
+
+ + +
+
+
+
+
Gray 25
+
#fcfcfd
+
$tutor-gray-25
+
+
+
+
+
+
Gray 50
+
#f9fafb
+
$tutor-gray-50
+
+
+
+
+
+
Gray 100
+
#f2f4f7
+
$tutor-gray-100
+
+
+
+
+
+
Gray 200
+
#eaecf0
+
$tutor-gray-200
+
+
+
+
+
+
Gray 300
+
#d0d5dd
+
$tutor-gray-300
+
+
+
+
+
+
Gray 400
+
#98a2b3
+
$tutor-gray-400
+
+
+
+
+
+
Gray 500
+
#667085
+
$tutor-gray-500
+
+
+
+
+
+
Gray 600
+
#475467
+
$tutor-gray-600
+
+
+
+
+
+
Gray 700
+
#344054
+
$tutor-gray-700
+
+
+
+
+
+
Gray 800
+
#1d2939
+
$tutor-gray-800
+
+
+
+
+
+
Gray 900
+
#101828
+
$tutor-gray-900
+
+
+
+
+
+
Gray 950
+
#0c111d
+
$tutor-gray-950
+
+
+
+ + +
+
+
+
+
Success 25
+
#fafef5
+
$tutor-success-25
+
+
+
+
+
+
Success 50
+
#f3fee7
+
$tutor-success-50
+
+
+
+
+
+
Success 100
+
#e3fbcc
+
$tutor-success-100
+
+
+
+
+
+
Success 200
+
#d0f8ab
+
$tutor-success-200
+
+
+
+
+
+
Success 300
+
#a6ef67
+
$tutor-success-300
+
+
+
+
+
+
Success 400
+
#85e13a
+
$tutor-success-400
+
+
+
+
+
+
Success 500
+
#66c61c
+
$tutor-success-500
+
+
+
+
+
+
Success 600
+
#4ca30d
+
$tutor-success-600
+
+
+
+
+
+
Success 700
+
#3b7c0f
+
$tutor-success-700
+
+
+
+
+
+
Success 800
+
#326212
+
$tutor-success-800
+
+
+
+
+
+
Success 900
+
#2b5314
+
$tutor-success-900
+
+
+
+
+
+
Success 950
+
#15290a
+
$tutor-success-950
+
+
+
+ + +
+
+
+
+
Warning 25
+
#fffcf5
+
$tutor-warning-25
+
+
+
+
+
+
Warning 50
+
#fffaeb
+
$tutor-warning-50
+
+
+
+
+
+
Warning 100
+
#fef0c7
+
$tutor-warning-100
+
+
+
+
+
+
Warning 200
+
#fedf89
+
$tutor-warning-200
+
+
+
+
+
+
Warning 300
+
#fec84b
+
$tutor-warning-300
+
+
+
+
+
+
Warning 400
+
#fdb022
+
$tutor-warning-400
+
+
+
+
+
+
Warning 500
+
#f79009
+
$tutor-warning-500
+
+
+
+
+
+
Warning 600
+
#dc6803
+
$tutor-warning-600
+
+
+
+
+
+
Warning 700
+
#b54708
+
$tutor-warning-700
+
+
+
+
+
+
Warning 800
+
#93370d
+
$tutor-warning-800
+
+
+
+
+
+
Warning 900
+
#7a2e0e
+
$tutor-warning-900
+
+
+
+
+
+
Warning 950
+
#4e1d09
+
$tutor-warning-950
+
+
+
+ + +
+
+
+
+
Error 25
+
#fffbfa
+
$tutor-error-25
+
+
+
+
+
+
Error 50
+
#fef3f2
+
$tutor-error-50
+
+
+
+
+
+
Error 100
+
#fee4e2
+
$tutor-error-100
+
+
+
+
+
+
Error 200
+
#fecdca
+
$tutor-error-200
+
+
+
+
+
+
Error 300
+
#fda29b
+
$tutor-error-300
+
+
+
+
+
+
Error 400
+
#f97066
+
$tutor-error-400
+
+
+
+
+
+
Error 500
+
#f04438
+
$tutor-error-500
+
+
+
+
+
+
Error 600
+
#d92d20
+
$tutor-error-600
+
+
+
+
+
+
Error 700
+
#b42318
+
$tutor-error-700
+
+
+
+
+
+
Error 800
+
#912018
+
$tutor-error-800
+
+
+
+
+
+
Error 900
+
#7a271a
+
$tutor-error-900
+
+
+
+
+
+
Error 950
+
#55160c
+
$tutor-error-950
+
+
+
+
+
+
+ + +
+

Components Overview

+ +
+

Available Components

+

+ The design system includes a comprehensive set of components for building modern web + applications. Click on any component below to view detailed documentation and examples. +

+ +
+
+
🔘
+

Buttons

+

+ Primary, secondary, outline, and ghost button variants with multiple sizes and + states. +

+
+ +
+
🃏
+

Cards

+

+ Flexible card components with headers, bodies, footers, and elevation options. +

+
+ +
+
📝
+

Forms

+

+ Input fields, textareas, selects, and validation states for comprehensive form + building. +

+
+ +
+
⚡
+

Alpine.js Components

+

+ Interactive components like dropdowns, modals, tabs, and toast notifications. +

+
+
+ + +
+
+ + +
+

Buttons

+ +
+

Button Variants

+

+ Four button variants for different use cases and visual hierarchy. +

+
+
+ + + + + + + + +
+
+ + + + + + +
+
+
+
+ HTML + +
+ 
<button class="tutor-btn tutor-btn-primary">Primary</button>
+<button class="tutor-btn tutor-btn-secondary">Secondary</button>
+<button class="tutor-btn tutor-btn-outline">Outline</button>
+<button class="tutor-btn tutor-btn-ghost">Ghost</button>
+
+
+ +
+

Button Sizes

+

+ Three button sizes to fit different contexts and layouts. +

+
+
+ + + + +
+
+ + + + +
+
+
+
+ HTML + +
+ 
<button class="tutor-btn tutor-btn-primary tutor-btn-small">Small</button>
+<button class="tutor-btn tutor-btn-primary tutor-btn-medium">Medium</button>
+<button class="tutor-btn tutor-btn-primary tutor-btn-large">Large</button>
+
+
+ +
+

Button States

+

+ Different button states for various interaction scenarios. +

+
+
+ + + +
+
+
+
+ HTML + +
+ 
<button class="tutor-btn tutor-btn-primary">Normal</button>
+<button class="tutor-btn tutor-btn-primary" disabled>Disabled</button>
+<button class="tutor-btn tutor-btn-primary tutor-btn-loading">Loading</button>
+
+
+
+ + +
+

Cards

+ +
+

Basic Card

+

+ Standard card component with header, body, and footer sections. +

+
+
+
+

Card Title

+

This is a subtitle

+
+
+

This is the card content. It can contain any HTML elements including text, + images, or other components.

+
+
+ + +
+
+
+
+
+ HTML + +
+ 
<div class="tutor-card">
+  <div class="tutor-card__header">
+    <h4 class="tutor-card__title">Card Title</h4>
+    <p class="tutor-card__subtitle">This is a subtitle</p>
+  </div>
+  <div class="tutor-card__body">
+    <p>Card content goes here...</p>
+  </div>
+  <div class="tutor-card__footer">
+    <button class="tutor-btn tutor-btn--primary">Action</button>
+  </div>
+</div>
+
+
+ +
+

Card Variants

+

+ Different card styles for various use cases and visual emphasis. +

+
+
+
+
+
Default Card
+

Standard card with subtle border.

+
+
+
+
+
Elevated Card
+

Card with shadow for emphasis.

+
+
+
+
+
Interactive Card
+

Clickable card with hover effects.

+
+
+
+
+
+
+ HTML + +
+ 
<div class="tutor-card">Default Card</div>
+<div class="tutor-card tutor-card-elevated">Elevated Card</div>
+<div class="tutor-card tutor-card-interactive">Interactive Card</div>
+
+
+
+ + +
+

Forms

+ +
+

Form Elements

+

+ Complete set of form elements with consistent styling and validation states. +

+
+
+
+ + +

This field is required

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+ HTML + +
+ 
<div class="tutor-form-group">
+  <label class="tutor-label" for="name">Full Name</label>
+  <input type="text" id="name" class="tutor-input" placeholder="Enter your name">
+  <p class="tutor-help-text">This field is required</p>
+</div>
+
+<div class="tutor-form-group">
+  <label class="tutor-label" for="message">Message</label>
+  <textarea id="message" class="tutor-textarea" placeholder="Enter your message"></textarea>
+</div>
+
+
+ +
+

Form States

+

+ Different form states for validation feedback and user guidance. +

+
+
+
+ + +
+ +
+ + +

This field has an error

+
+ +
+ + +

This field is valid

+
+ +
+ + +
+
+
+
+
+ HTML + +
+ 
<input type="text" class="tutor-input" placeholder="Normal">
+<input type="text" class="tutor-input tutor-input--error" placeholder="Error">
+<input type="text" class="tutor-input tutor-input--success" placeholder="Success">
+<input type="text" class="tutor-input" placeholder="Disabled" disabled>
+
+
+
+ + +
+

Alpine.js Components

+ +
+

Interactive Components

+

+ Advanced components powered by Alpine.js for rich user interactions with built-in RTL + support and accessibility features. +

+
+ + +
+

Dropdown

+

+ Interactive dropdown with RTL-aware positioning, keyboard navigation, and + click-outside-to-close functionality. +

+
+
+ +
+ Profile + Settings +
+ Logout +
+
+
+
+
+ HTML + +
+ 
<div x-data="TutorCore.dropdown({ placement: 'bottom-start', offset: 8 })" class="tutor-dropdown">
+  <button @click="toggle()" class="tutor-btn tutor-btn--primary">
+    Options <span x-text="open ? '▲' : '▼'"></span>
+  </button>
+  <div x-show="open" @click.outside="close()" class="tutor-dropdown__menu">
+    <a href="#" class="tutor-dropdown__item">Profile</a>
+    <a href="#" class="tutor-dropdown__item">Settings</a>
+    <hr class="tutor-my-2">
+    <a href="#" class="tutor-dropdown__item tutor-text-error">Logout</a>
+  </div>
+</div>
+
+
+ + +
+

Modal

+

+ Modal dialog with focus management, backdrop click to close, ESC key support, and + accessibility features. +

+
+
+ + +
+
+
+
+

Modal Title

+ +
+
+

This is a modal dialog. You can close it by clicking the + X button, pressing Escape, or clicking outside.

+
+
+ + +
+
+
+
+
+
+
+ HTML + +
+ 
<div x-data="TutorCore.modal({ closable: true, backdrop: true, keyboard: true })">
+  <button @click="show()" class="tutor-btn tutor-btn--secondary">Open Modal</button>
+
+  <div x-show="open" class="tutor-modal" x-transition>
+    <div class="tutor-modal__backdrop" @click="hide()"></div>
+    <div class="tutor-modal__content" @keydown.escape="hide()">
+      <div class="tutor-modal__header">
+        <h3 class="tutor-h4">Modal Title</h3>
+        <button @click="hide()" class="tutor-modal__close">×</button>
+      </div>
+      <div class="tutor-modal__body">
+        <p class="tutor-p1">Modal content goes here...</p>
+      </div>
+      <div class="tutor-modal__footer">
+        <button @click="hide()" class="tutor-btn tutor-btn--secondary">Cancel</button>
+        <button @click="hide()" class="tutor-btn tutor-btn--primary">Confirm</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+ + +
+

Tabs

+

+ Tab component with keyboard navigation, ARIA support, and smooth content transitions. +

+
+
+
+ + + +
+
+
+

Overview

+

This is the overview content. It provides a general + introduction to the topic with key highlights and important information.

+
+
+

Details

+

Here are the detailed specifications and technical + information. This section contains comprehensive documentation and usage + guidelines.

+
+
+

Reviews

+

Customer reviews and feedback will be displayed here. This + includes ratings, comments, and user testimonials.

+
+
+
+
+
+
+ HTML + +
+ 
<div x-data="TutorCore.tabs({ defaultTab: 0 })" class="tutor-tabs">
+  <div class="tutor-tabs__nav">
+    <button @click="setTab(0)" :class="{'active': isActive(0)}" class="tutor-tab">Overview</button>
+    <button @click="setTab(1)" :class="{'active': isActive(1)}" class="tutor-tab">Details</button>
+    <button @click="setTab(2)" :class="{'active': isActive(2)}" class="tutor-tab">Reviews</button>
+  </div>
+  <div class="tutor-tabs__content">
+    <div x-show="isActive(0)" x-transition class="tutor-tab-panel">
+      <h4 class="tutor-h4">Overview</h4>
+      <p class="tutor-p1">Overview content...</p>
+    </div>
+    <div x-show="isActive(1)" x-transition class="tutor-tab-panel">
+      <h4 class="tutor-h4">Details</h4>
+      <p class="tutor-p1">Details content...</p>
+    </div>
+    <div x-show="isActive(2)" x-transition class="tutor-tab-panel">
+      <h4 class="tutor-h4">Reviews</h4>
+      <p class="tutor-p1">Reviews content...</p>
+    </div>
+  </div>
+</div>
+
+
+ + +
+

Toast Notifications

+

+ Toast notification system with multiple types, stacking support, auto-dismiss, and smooth + animations. +

+
+
+
+ + + + +
+ +
+ +
+
+
+
+
+ HTML + +
+ 
<div x-data="TutorCore.toast()">
+  <button @click="success('Success message!')" class="tutor-btn tutor-btn--primary">
+    Success Toast
+  </button>
+  <button @click="error('Error message!')" class="tutor-btn tutor-btn--secondary">
+    Error Toast
+  </button>
+  <button @click="warning('Warning message!')" class="tutor-btn tutor-btn--outline">
+    Warning Toast
+  </button>
+  <button @click="info('Info message!')" class="tutor-btn tutor-btn--ghost">
+    Info Toast
+  </button>
+
+  <div class="tutor-toast-container">
+    <template x-for="toast in toasts" :key="toast.id">
+      <div class="tutor-toast" :class="`tutor-toast--${toast.type}`" x-transition>
+        <span x-text="toast.message"></span>
+        <button @click="remove(toast.id)" class="tutor-toast__close">×</button>
+      </div>
+    </template>
+  </div>
+</div>
+
+
+ + +
+

Accordion

+

+ Accordion component with single or multiple panel support, smooth collapse animations, and + configurable default states. +

+
+
+
+ +
+

This panel contains information about getting started with + the design system. It includes setup instructions and basic usage examples. +

+
+
+
+ +
+

This panel covers advanced features like theming, RTL + support, and custom component development.

+
+
+
+ +
+

Learn about best practices for using the design system + effectively in your projects.

+
+
+
+
+
+
+ HTML + +
+ 
<div x-data="TutorCore.accordion({ multiple: false, defaultOpen: [0] })" class="tutor-accordion">
+  <div class="tutor-accordion__item">
+    <button @click="toggle(0)" class="tutor-accordion__trigger">
+      <span class="tutor-font-medium">Panel 1</span>
+      <span :class="{ 'tutor-rotate-180': isOpen(0) }" class="tutor-transition-transform">▼</span>
+    </button>
+    <div x-show="isOpen(0)" x-collapse class="tutor-accordion__content">
+      <p class="tutor-p1">Panel 1 content...</p>
+    </div>
+  </div>
+  <div class="tutor-accordion__item">
+    <button @click="toggle(1)" class="tutor-accordion__trigger">
+      <span class="tutor-font-medium">Panel 2</span>
+      <span :class="{ 'tutor-rotate-180': isOpen(1) }" class="tutor-transition-transform">▼</span>
+    </button>
+    <div x-show="isOpen(1)" x-collapse class="tutor-accordion__content">
+      <p class="tutor-p1">Panel 2 content...</p>
+    </div>
+  </div>
+</div>
+
+
+ + +
+

More Examples

+

+ For more comprehensive examples and advanced usage patterns, visit the dedicated components + page. +

+ +
+
+ + +
+

Basic Usage

+ +
+

Typography

+

+ The design system provides a complete typography scale with consistent spacing and line + heights. +

+
+

Heading 1 (40px)

+

Heading 2 (32px)

+

Heading 3 (24px)

+

Heading 4 (20px)

+
Heading 5 (18px)
+

Paragraph 1 (16px) - This is the default paragraph size for body text. +

+

Paragraph 2 (14px) - This is smaller text for secondary content.

+

Paragraph 3 (12px) - This is the smallest text size for captions and + labels.

+
+
+ +
+

Quick Component Examples

+

+ Get started quickly with these common component patterns. +

+
+
+ +
+

Buttons

+
+ + + +
+
+ + +
+

Card

+
+
+
Simple Card
+

This is a basic card example with minimal content.

+ +
+
+
+
+
+
+
+ HTML + +
+ 
<!-- Buttons -->
+<button class="tutor-btn tutor-btn--primary">Primary</button>
+<button class="tutor-btn tutor-btn--secondary">Secondary</button>
+
+<!-- Simple Card -->
+<div class="tutor-card">
+  <div class="tutor-card__body">
+    <h5>Card Title</h5>
+    <p>Card content goes here...</p>
+    <button class="tutor-btn tutor-btn--primary">Action</button>
+  </div>
+</div>
+
+
+
+ + +
+

Typography

+ +
+

Typography Scale

+

+ Complete typography system with consistent font sizes, line heights, and weights optimized + for readability. +

+
+
+
+

Heading 1

+
40px / 48px line-height / 700 weight +
+
+
+

Heading 2

+
32px / 40px line-height / 600 weight +
+
+
+

Heading 3

+
24px / 32px line-height / 600 weight +
+
+
+

Paragraph 1 - Primary body text

+
16px / 24px line-height / 400 weight +
+
+
+

Paragraph 2 - Secondary text

+
14px / 20px line-height / 400 weight +
+
+
+
+
+
+ + +
+

Colors

+ +
+

Text Colors

+

+ Semantic text colors that automatically adapt to light and dark themes. +

+
+
+

Primary text color - tutor-text-primary

+

Secondary text color - tutor-text-secondary

+

Disabled text color - tutor-text-disabled

+

Brand text color - tutor-text-brand

+

Success text color - tutor-text-success

+

Warning text color - tutor-text-warning

+

Error text color - tutor-text-error

+
+
+
+
+ HTML + +
+ 
<p class="tutor-text-primary">Primary text</p>
+<p class="tutor-text-secondary">Secondary text</p>
+<p class="tutor-text-brand">Brand text</p>
+<p class="tutor-text-success">Success text</p>
+<p class="tutor-text-warning">Warning text</p>
+<p class="tutor-text-error">Error text</p>
+
+
+ +
+

Background Colors

+

+ Surface and background colors for creating visual hierarchy and depth. +

+
+
+
+ Base Surface - tutor-bg-surface-base +
+
+ Level 1 Surface - tutor-bg-surface-l1 +
+
+ Level 2 Surface - tutor-bg-surface-l2 +
+
+
+
+
+ + +
+

Spacing

+ +
+

Spacing Scale

+

+ 22-step spacing scale (0-21) from 0px to 200px, matching Figma specifications exactly. +

+
+
+
+
Step 0
+
+
+ 0px +
+
+
Step 4
+
+
+ 8px +
+
+
Step 6
+
+
+ 16px +
+
+
Step 8
+
+
+ 24px +
+
+
Step 12
+
+
+ 40px +
+
+
+
+
+ HTML + +
+ 
<!-- Margin utilities -->
+<div class="tutor-m-4">Margin on all sides (8px)</div>
+<div class="tutor-mt-6">Margin top (16px)</div>
+<div class="tutor-mx-8">Horizontal margin (24px)</div>
+
+<!-- Padding utilities -->
+<div class="tutor-p-4">Padding on all sides (8px)</div>
+<div class="tutor-pt-6">Padding top (16px)</div>
+<div class="tutor-px-8">Horizontal padding (24px)</div>
+
+
+
+ + +
+

SASS Development

+
+

Coming Soon

+

+ SASS development guide with mixins and custom component creation will be available soon. +

+ +
+
+ +
+

Custom Components

+
+

Coming Soon

+

+ Guide for creating custom components using the design system will be available soon. +

+ +
+
+ +
+

Utility Classes

+
+

Coming Soon

+

+ Complete utility class reference will be available soon. +

+ +
+
+ +
+

Font Scaling

+
+

Accessibility Font Scaling

+

+ The design system supports font scaling from 80% to 120% for accessibility. Try the font + scale control in the header to see it in action. +

+
+
+
+

Sample Text

+

This text will scale when you change the font scale setting in + the header controls.

+
+
+
+
+
+ JavaScript + +
+ 
// Set font scale programmatically
+TutorCore.utils.setFontScale(120); // 120% scaling
+
+// Or add CSS class directly
+document.documentElement.classList.add('tutor-font-scale-120');
+
+
+
+ +
+

RTL Support

+
+

Right-to-Left Language Support

+

+ The design system automatically adapts to RTL layouts. Try the RTL toggle in the header to + see the layout change. +

+
+
+
+

RTL Example

+

This card will automatically flip its layout when RTL mode is enabled. Notice how + the text alignment and spacing adapt.

+ +
+
+
+
+
+ HTML + +
+ 
<!-- Enable RTL -->
+<html dir="rtl" data-theme="light">
+
+<!-- All components automatically adapt -->
+<div class="tutor-card">
+  <div class="tutor-card__body">
+    <p>This content will be right-aligned in RTL mode</p>
+  </div>
+</div>
+
+
+
+ +
+

Theming

+
+

Light and Dark Themes

+

+ The design system includes built-in light and dark themes. Try the theme toggle in the + header to switch between them. +

+
+
+
+

Theme-Aware + Content

+

This content automatically + adapts to the current theme using CSS custom properties.

+
+
+ + +
+
+
+
+
+ JavaScript + +
+ 
// Switch to dark theme
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Switch to light theme
+document.documentElement.setAttribute('data-theme', 'light');
+
+// Detect user's preferred theme
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const theme = prefersDark ? 'dark' : 'light';
+document.documentElement.setAttribute('data-theme', theme);
+
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/assets/core/docs/quick-start.html b/assets/core/docs/quick-start.html new file mode 100644 index 0000000000..0c2a7e5c2a --- /dev/null +++ b/assets/core/docs/quick-start.html @@ -0,0 +1,593 @@ + + + + + + Quick Start Guide - Tutor Design System + + + + + +
+ +
+
+ + + ← Back to Docs + +
+
+ + +
+

Quick Start Guide

+

Get up and running with the Tutor Design System in minutes

+
+ Start Building + View Components +
+
+ + +
+
1
+

Include the Design System Files

+

+ Add the compiled CSS and JavaScript files to your HTML document. The design system provides minified versions for production use. +

+ +
+ + 
<!DOCTYPE html>
+<html lang="en" dir="ltr" data-theme="light">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Tutor App</title>
+    
+    <!-- Tutor Design System CSS -->
+    <link rel="stylesheet" href="assets/css/tutor-core.min.css">
+  </head>
+  <body>
+    <!-- Your content here -->
+    
+    <!-- Alpine.js (required for interactive components) -->
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    
+    <!-- Tutor Design System JS -->
+    <script src="assets/js/tutor-core.js"></script>
+  </body>
+</html>
+
+ +
+ 💡 Tip: + Use the minified versions (.min.css and .min.js) in production for better performance. +
+
+ + +
+
2
+

Add Your First Components

+

+ Start with basic components like buttons, cards, and form elements. All components follow consistent naming conventions and work seamlessly together. +

+ +
+ + 
<!-- Buttons -->
+<button class="tutor-btn tutor-btn--primary">Primary Button</button>
+<button class="tutor-btn tutor-btn--secondary">Secondary Button</button>
+
+<!-- Card Component -->
+<div class="tutor-card">
+  <div class="tutor-card__header">
+    <h3 class="tutor-card__title">Welcome to Tutor</h3>
+    <p class="tutor-card__subtitle">Start learning today</p>
+  </div>
+  <div class="tutor-card__body">
+    <p>Discover thousands of courses and start your learning journey.</p>
+  </div>
+  <div class="tutor-card__footer">
+    <button class="tutor-btn tutor-btn--primary">Get Started</button>
+  </div>
+</div>
+
+ +
+

Live Preview:

+
+ + +
+ +
+
+

Welcome to Tutor

+

Start learning today

+
+
+

Discover thousands of courses and start your learning journey.

+
+
+ +
+
+
+
+ + +
+
3
+

Add Interactive Components

+

+ Use Alpine.js powered components for advanced interactions. The TutorCore class provides factory methods for creating component data objects. +

+ +
+ + 
<!-- Dropdown Component -->
+<div x-data="TutorCore.dropdown()" class="tutor-dropdown">
+  <button @click="toggle()" class="tutor-btn tutor-btn--primary">
+    Options <span x-text="open ? '▲' : '▼'"></span>
+  </button>
+  <div x-show="open" @click.outside="close()" class="tutor-dropdown__menu">
+    <a href="#" class="tutor-dropdown__item">Profile</a>
+    <a href="#" class="tutor-dropdown__item">Settings</a>
+    <a href="#" class="tutor-dropdown__item">Logout</a>
+  </div>
+</div>
+
+<!-- Modal Component -->
+<div x-data="TutorCore.modal()">
+  <button @click="show()" class="tutor-btn tutor-btn--secondary">Open Modal</button>
+  
+  <div x-show="open" class="tutor-modal">
+    <div class="tutor-modal__backdrop" @click="hide()"></div>
+    <div class="tutor-modal__content">
+      <div class="tutor-modal__header">
+        <h3>Modal Title</h3>
+        <button @click="hide()" class="tutor-modal__close">×</button>
+      </div>
+      <div class="tutor-modal__body">
+        <p>Modal content goes here...</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+ +
+

Live Preview:

+
+
+ + +
+ +
+ + +
+
+
+
+

Modal Title

+ +
+
+

This is a modal dialog example.

+
+
+
+
+
+
+
+ + +
+
4
+

Configure Themes and Features

+

+ Enable theme switching, RTL support, and font scaling for a complete user experience. All features work together seamlessly. +

+ +
+ + 
<script>
+// Theme switching
+function toggleTheme() {
+  const html = document.documentElement;
+  const currentTheme = html.getAttribute('data-theme');
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  html.setAttribute('data-theme', newTheme);
+}
+
+// RTL support
+function toggleRTL() {
+  const html = document.documentElement;
+  const currentDir = html.getAttribute('dir');
+  const newDir = currentDir === 'ltr' ? 'rtl' : 'ltr';
+  html.setAttribute('dir', newDir);
+}
+
+// Font scaling for accessibility
+function setFontScale(scale) {
+  // Remove existing classes
+  document.documentElement.classList.remove(
+    'tutor-font-scale-80', 'tutor-font-scale-90', 
+    'tutor-font-scale-100', 'tutor-font-scale-110', 
+    'tutor-font-scale-120'
+  );
+  
+  // Add new scale class
+  if (scale !== 100) {
+    document.documentElement.classList.add(`tutor-font-scale-${scale}`);
+  }
+}
+</script>
+
+<!-- Theme controls -->
+<div class="theme-controls">
+  <button onclick="toggleTheme()" class="tutor-btn tutor-btn--outline">
+    🌓 Toggle Theme
+  </button>
+  <button onclick="toggleRTL()" class="tutor-btn tutor-btn--outline">
+    🔄 Toggle RTL
+  </button>
+  <select onchange="setFontScale(this.value)" class="tutor-select">
+    <option value="80">80% Font Size</option>
+    <option value="90">90% Font Size</option>
+    <option value="100" selected>100% Font Size</option>
+    <option value="110">110% Font Size</option>
+    <option value="120">120% Font Size</option>
+  </select>
+</div>
+
+ +
+

Live Preview:

+
+ + + +
+
+
+ + +
+

✅ You're Ready to Build!

+
    +
  • Design system files are included in your project
    • +
  • Basic components are working correctly
    • +
  • Interactive components respond to user actions
    • +
  • Theme switching and accessibility features are enabled
    • +
  • Your app supports both LTR and RTL layouts
    • +
+
+ + +
+ +
🧩
+

Explore Components

+

Browse all available components with live examples and code snippets

+ + + +
🎨
+

Design Tokens

+

Learn about the complete design token system and color scales

+ + + +
⚙️
+

SASS Development

+

Build custom components using SASS mixins and design tokens

+ + + +
🛠️
+

Custom Components

+

Create your own components following design system patterns

+ +
+ + +
+

Need Help?

+

+ Check out these resources for additional support and advanced usage patterns. +

+
+ 📖 Full Documentation + 💡 More Examples + 🐙 GitHub Repository +
+
+
+ + + + + + + \ No newline at end of file diff --git a/assets/core/docs/semantic-tokens.md b/assets/core/docs/semantic-tokens.md new file mode 100644 index 0000000000..2944197b6b --- /dev/null +++ b/assets/core/docs/semantic-tokens.md @@ -0,0 +1,167 @@ +# Semantic Token Files + +## Overview + +Semantic tokens are organized into separate files by category, each containing CSS variables that are theme-aware. This approach eliminates the need for separate theme override variables since CSS variables automatically handle theme switching. + +## File Structure + +``` +tokens/ +├── _actions.scss # Action states (success, warning, error) +├── _borders.scss # Border colors and radius +├── _buttons.scss # Button colors and states +├── _colors.scss # Primitive color palette +├── _icons.scss # Icon colors +├── _surfaces.scss # Background/surface colors +├── _tabs.scss # Tab navigation colors +├── _text-colors.scss # Text colors +├── _typography.scss # Typography tokens +├── _spacing.scss # Spacing scale +├── _zIndex.scss # Z-index scale +└── _index.scss # Exports all tokens +``` + +## Usage Pattern + +All semantic token files follow the same pattern: + +```scss +// CSS Variable References (theme-aware) +$tutor-surface-base: var(--tutor-surface-base); +$tutor-text-primary: var(--tutor-text-primary); +$tutor-button-primary: var(--tutor-button-primary); + +// Maps for utility generation +$tutor-surfaces: ( + base: $tutor-surface-base, + l1: $tutor-surface-l1, // ... +); +``` + +## Benefits + +### ✅ **Simplified Structure** + +- No need for separate theme override variables +- CSS variables handle theme switching automatically +- Cleaner, more maintainable code + +### ✅ **Automatic Theme Support** + +- CSS variables like `var(--tutor-surface-base)` automatically switch between light/dark themes +- Theme definitions are handled in `themes/_light.scss` and `themes/_dark.scss` + +### ✅ **Better Organization** + +- Each category has its own file +- Easy to find and update specific token types +- Clear separation of concerns + +## How It Works + +1. **Theme files** (`themes/_light.scss`, `themes/_dark.scss`) define the actual color values: + + ```scss + // Light theme + :root { + --tutor-surface-base: #fafafa; + --tutor-text-primary: #0c111d; + } + + // Dark theme + [data-theme='dark'] { + --tutor-surface-base: #161b26; + --tutor-text-primary: #ffffff; + } + ``` + +2. **Semantic token files** reference these CSS variables: + + ```scss + $tutor-surface-base: var(--tutor-surface-base); + $tutor-text-primary: var(--tutor-text-primary); + ``` + +3. **Components** use the semantic tokens: + ```scss + .my-component { + background-color: $tutor-surface-base; + color: $tutor-text-primary; + } + ``` + +## Token Categories + +### **Surfaces** (`_surfaces.scss`) + +Background colors for containers, cards, and layouts. + +- `surface-base`, `surface-l1`, `surface-l2` +- `surface-brand-primary`, `surface-brand-secondary` + +### **Text Colors** (`_text-colors.scss`) + +All text content colors. + +- `text-primary`, `text-secondary`, `text-subdued` +- `text-brand`, `text-success`, `text-warning`, `text-critical` + +### **Buttons** (`_buttons.scss`) + +Interactive button element colors. + +- `button-primary`, `button-secondary`, `button-destructive` +- Includes hover, focus, and disabled states + +### **Borders** (`_borders.scss`) + +Border colors and radius values. + +- `border-idle`, `border-hover`, `border-focus` +- `border-brand`, `border-success`, `border-error` + +### **Icons** (`_icons.scss`) + +Icon-specific colors. + +- `icon-idle`, `icon-hover`, `icon-secondary` +- `icon-brand`, `icon-success`, `icon-warning` + +### **Actions** (`_actions.scss`) + +State and feedback colors. + +- `actions-success-*`, `actions-warning-*` +- `actions-brand-*`, `actions-critical-*` + +### **Tabs** (`_tabs.scss`) + +Navigation and tab component colors. + +- `tab-sidebar-*`, `tab-l3-*` +- Includes hover and active states + +## Migration from Old Approach + +### Before (with theme overrides): + +```scss +// Light theme defaults +$tutor-surface-primary: $tutor-gray-1; + +// Dark theme overrides +$tutor-surface-primary-dark: $tutor-gray-950; + +// CSS variable reference +$tutor-surface-primary-var: var(--tutor-surface-primary); +``` + +### After (simplified): + +```scss +// Direct CSS variable reference (theme-aware) +$tutor-surface-primary: var(--tutor-surface-primary); +``` + +The CSS variables automatically handle the theme switching, making the code much cleaner and easier to maintain! diff --git a/assets/core/docs/start.html b/assets/core/docs/start.html new file mode 100644 index 0000000000..aeb40968e6 --- /dev/null +++ b/assets/core/docs/start.html @@ -0,0 +1,239 @@ + + + + + + + Tutor Design System Documentation + + + + + + +
+ +
+ + +
+

Tutor Design System

+

Complete documentation with live examples and interactive components

+
+ Quick Start + Full Documentation +
+
+ +
+ +
+ +
📚
+

Complete Documentation

+

+ Interactive documentation hub with all components, design tokens, and development guides in one + place. +

+ Explore Documentation + + + +
🚀
+

Quick Start Guide

+

+ Step-by-step guide to get up and running with the Tutor Design System in minutes. +

+ Get Started + + + +
🧩
+

Component Showcase

+

+ Interactive examples of all components including buttons, cards, forms, and Alpine.js components. +

+ View Components + + + +
🎨
+

Design Tokens

+

+ Complete reference for colors, typography, spacing, and all design tokens with visual examples. +

+ Browse Tokens + +
+ + +
+

Need Help?

+

Check out these additional resources for support and advanced usage patterns.

+
+ 📖 Full README + 💡 More Examples + 🐙 GitHub +
+
+ + +
+

Key Features

+
+
+
🎨
+

Multi-theme Support

+

Light and dark themes + with CSS custom properties

+
+
+
🌍
+

RTL Language Support

+

Built-in + right-to-left language support

+
+
+
⚡
+

Alpine.js Integration

+

Interactive + components with TypeScript support

+
+
+
♿
+

Accessibility First

+

Font scaling and WCAG + compliant components

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/assets/core/docs/utility-classes.md b/assets/core/docs/utility-classes.md new file mode 100644 index 0000000000..f927cb0db7 --- /dev/null +++ b/assets/core/docs/utility-classes.md @@ -0,0 +1,1072 @@ +# Tutor CSS Utility Classes Documentation + +A comprehensive guide to all utility classes available in the Tutor design system. These utilities provide a consistent, scalable approach to styling with built-in RTL support and responsive design. + +## Table of Contents + +1. [Layout Utilities](#layout-utilities) +2. [Spacing Utilities](#spacing-utilities) +3. [Typography Utilities](#typography-utilities) +4. [Color Utilities](#color-utilities) +5. [Sizing Utilities](#sizing-utilities) +6. [Border Utilities](#border-utilities) +7. [RTL Utilities](#rtl-utilities) +8. [Z-Index Utilities](#z-index-utilities) +9. [Responsive Design](#responsive-design) +10. [Design Tokens](#design-tokens) + +--- + +## Layout Utilities + +### Display + +Control the display behavior of elements. + +```css +.tutor-block /* display: block */ +.tutor-inline-block /* display: inline-block */ +.tutor-inline /* display: inline */ +.tutor-flex /* display: flex */ +.tutor-inline-flex /* display: inline-flex */ +.tutor-grid /* display: grid */ +.tutor-inline-grid /* display: inline-grid */ +.tutor-hidden /* display: none */ +``` + +### Flexbox + +#### Direction (RTL-aware) + +```css +.tutor-flex-row /* flex-direction: row (RTL: row-reverse) */ +.tutor-flex-row-reverse /* flex-direction: row-reverse (RTL: row) */ +.tutor-flex-col /* flex-direction: column */ +.tutor-flex-col-reverse /* flex-direction: column-reverse */ +``` + +#### Wrap + +```css +.tutor-flex-wrap /* flex-wrap: wrap */ +.tutor-flex-wrap-reverse /* flex-wrap: wrap-reverse */ +.tutor-flex-nowrap /* flex-wrap: nowrap */ +``` + +#### Flex Properties + +```css +.tutor-flex-1 /* flex: 1 1 0% */ +.tutor-flex-auto /* flex: 1 1 auto */ +.tutor-flex-initial /* flex: 0 1 auto */ +.tutor-flex-none /* flex: none */ +.tutor-grow /* flex-grow: 1 */ +.tutor-grow-0 /* flex-grow: 0 */ +.tutor-shrink /* flex-shrink: 1 */ +.tutor-shrink-0 /* flex-shrink: 0 */ +``` + +#### Justify Content (RTL-aware) + +```css +.tutor-justify-start /* justify-content: flex-start (RTL: flex-end) */ +.tutor-justify-end /* justify-content: flex-end (RTL: flex-start) */ +.tutor-justify-center /* justify-content: center */ +.tutor-justify-between /* justify-content: space-between */ +.tutor-justify-around /* justify-content: space-around */ +.tutor-justify-evenly /* justify-content: space-evenly */ +``` + +#### Align Items + +```css +.tutor-items-start /* align-items: flex-start */ +.tutor-items-end /* align-items: flex-end */ +.tutor-items-center /* align-items: center */ +.tutor-items-baseline /* align-items: baseline */ +.tutor-items-stretch /* align-items: stretch */ +``` + +#### Align Content + +```css +.tutor-content-start /* align-content: flex-start */ +.tutor-content-end /* align-content: flex-end */ +.tutor-content-center /* align-content: center */ +.tutor-content-between /* align-content: space-between */ +.tutor-content-around /* align-content: space-around */ +.tutor-content-evenly /* align-content: space-evenly */ +``` + +#### Align Self + +```css +.tutor-self-auto /* align-self: auto */ +.tutor-self-start /* align-self: flex-start */ +.tutor-self-end /* align-self: flex-end */ +.tutor-self-center /* align-self: center */ +.tutor-self-stretch /* align-self: stretch */ +.tutor-self-baseline /* align-self: baseline */ +``` + +### Gap + +Control spacing between flex and grid items. + +```css +.tutor-gap-{size} /* gap: {size} */ +.tutor-gap-x-{size} /* column-gap: {size} */ +.tutor-gap-y-{size} /* row-gap: {size} */ +``` + +Available sizes: `none`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `13`, `14`, `15`, `16`, `17`, `18`, `19`, `20`, `21` + +### Grid + +#### Grid Template Columns + +```css +.tutor-grid-cols-1 /* grid-template-columns: repeat(1, minmax(0, 1fr)) */ +.tutor-grid-cols-2 /* grid-template-columns: repeat(2, minmax(0, 1fr)) */ +.tutor-grid-cols-3 /* grid-template-columns: repeat(3, minmax(0, 1fr)) */ +.tutor-grid-cols-4 /* grid-template-columns: repeat(4, minmax(0, 1fr)) */ +.tutor-grid-cols-5 /* grid-template-columns: repeat(5, minmax(0, 1fr)) */ +.tutor-grid-cols-6 /* grid-template-columns: repeat(6, minmax(0, 1fr)) */ +.tutor-grid-cols-12 /* grid-template-columns: repeat(12, minmax(0, 1fr)) */ +.tutor-grid-cols-none /* grid-template-columns: none */ +``` + +#### Grid Column Span + +```css +.tutor-col-auto /* grid-column: auto */ +.tutor-col-span-1 /* grid-column: span 1 / span 1 */ +.tutor-col-span-2 /* grid-column: span 2 / span 2 */ +.tutor-col-span-3 /* grid-column: span 3 / span 3 */ +.tutor-col-span-4 /* grid-column: span 4 / span 4 */ +.tutor-col-span-5 /* grid-column: span 5 / span 5 */ +.tutor-col-span-6 /* grid-column: span 6 / span 6 */ +.tutor-col-span-full /* grid-column: 1 / -1 */ +``` + +### Positioning + +```css +.tutor-static /* position: static */ +.tutor-fixed /* position: fixed */ +.tutor-absolute /* position: absolute */ +.tutor-relative /* position: relative */ +.tutor-sticky /* position: sticky */ +``` + +#### Position Values (RTL-aware) + +```css +.tutor-inset-0 /* top: 0; right: 0; bottom: 0; left: 0 */ +.tutor-inset-auto /* top: auto; right: auto; bottom: auto; left: auto */ +.tutor-top-0 /* top: 0 */ +.tutor-right-0 /* inset-inline-end: 0 */ +.tutor-bottom-0 /* bottom: 0 */ +.tutor-left-0 /* inset-inline-start: 0 */ +.tutor-top-auto /* top: auto */ +.tutor-right-auto /* inset-inline-end: auto */ +.tutor-bottom-auto /* bottom: auto */ +.tutor-left-auto /* inset-inline-start: auto */ +``` + +### Overflow + +```css +.tutor-overflow-auto /* overflow: auto */ +.tutor-overflow-hidden /* overflow: hidden */ +.tutor-overflow-visible /* overflow: visible */ +.tutor-overflow-scroll /* overflow: scroll */ +.tutor-overflow-x-auto /* overflow-x: auto */ +.tutor-overflow-y-auto /* overflow-y: auto */ +.tutor-overflow-x-hidden /* overflow-x: hidden */ +.tutor-overflow-y-hidden /* overflow-y: hidden */ +.tutor-overflow-x-visible /* overflow-x: visible */ +.tutor-overflow-y-visible /* overflow-y: visible */ +.tutor-overflow-x-scroll /* overflow-x: scroll */ +.tutor-overflow-y-scroll /* overflow-y: scroll */ +``` + +--- + +## Spacing Utilities + +### Margin (RTL-aware) + +```css +.tutor-m-{size} /* margin: {size} */ +.tutor-mt-{size} /* margin-top: {size} */ +.tutor-mr-{size} /* margin-inline-end: {size} */ +.tutor-mb-{size} /* margin-bottom: {size} */ +.tutor-ml-{size} /* margin-inline-start: {size} */ +.tutor-mx-{size} /* margin-inline: {size} */ +.tutor-my-{size} /* margin-top: {size}; margin-bottom: {size} */ +``` + +### Padding (RTL-aware) + +```css +.tutor-p-{size} /* padding: {size} */ +.tutor-pt-{size} /* padding-top: {size} */ +.tutor-pr-{size} /* padding-inline-end: {size} */ +.tutor-pb-{size} /* padding-bottom: {size} */ +.tutor-pl-{size} /* padding-inline-start: {size} */ +.tutor-px-{size} /* padding-left: {size}; padding-right: {size} */ +.tutor-py-{size} /* padding-top: {size}; padding-bottom: {size} */ +``` + +### Negative Margins + +```css +.-tutor-m-{size} /* margin: -{size} */ +.-tutor-mt-{size} /* margin-top: -{size} */ +.-tutor-mr-{size} /* margin-inline-end: -{size} */ +.-tutor-mb-{size} /* margin-bottom: -{size} */ +.-tutor-ml-{size} /* margin-inline-start: -{size} */ +.-tutor-mx-{size} /* margin-left: -{size}; margin-right: -{size} */ +.-tutor-my-{size} /* margin-top: -{size}; margin-bottom: -{size} */ +``` + +### Auto Margins + +```css +.tutor-m-auto /* margin: auto */ +.tutor-mt-auto /* margin-top: auto */ +.tutor-mr-auto /* margin-inline-end: auto */ +.tutor-mb-auto /* margin-bottom: auto */ +.tutor-ml-auto /* margin-inline-start: auto */ +.tutor-mx-auto /* margin-left: auto; margin-right: auto */ +.tutor-my-auto /* margin-top: auto; margin-bottom: auto */ +``` + +### Spacing Scale + +| Class | Value | Pixels | +| ------ | ----- | ------ | +| `none` | 0px | 0px | +| `1` | 2px | 2px | +| `2` | 4px | 4px | +| `3` | 6px | 6px | +| `4` | 8px | 8px | +| `5` | 12px | 12px | +| `6` | 16px | 16px | +| `7` | 20px | 20px | +| `8` | 24px | 24px | +| `9` | 32px | 32px | +| `10` | 40px | 40px | +| `11` | 48px | 48px | +| `12` | 56px | 56px | +| `13` | 64px | 64px | +| `14` | 72px | 72px | +| `15` | 80px | 80px | +| `16` | 88px | 88px | +| `17` | 96px | 96px | +| `18` | 104px | 104px | +| `19` | 112px | 112px | +| `20` | 120px | 120px | +| `21` | 200px | 200px | + +--- + +## Typography Utilities + +### Semantic Typography Classes + +```css +.tutor-h1 /* Heading 1: 40px/48px, Bold */ +.tutor-h2 /* Heading 2: 32px/40px, Bold */ +.tutor-h3 /* Heading 3: 24px/32px, Semi Bold */ +.tutor-h4 /* Heading 4: 20px/28px, Semi Bold */ +.tutor-h5 /* Heading 5: 18px/26px, Medium */ +.tutor-p1 /* Paragraph 1: 16px/22px */ +.tutor-p2 /* Paragraph 2: 14px/18px */ +.tutor-p3 /* Paragraph 3: 12px/18px */ +``` + +### Font Sizes + +```css +.tutor-text-h1 /* 2.5rem (40px) */ +.tutor-text-h2 /* 2rem (32px) */ +.tutor-text-h3 /* 1.5rem (24px) */ +.tutor-text-h4 /* 1.25rem (20px) */ +.tutor-text-h5 /* 1.125rem (18px) */ +.tutor-text-medium /* 1rem (16px) */ +.tutor-text-p1 /* 1rem (16px) */ +.tutor-text-small /* 0.875rem (14px) */ +.tutor-text-p2 /* 0.875rem (14px) */ +.tutor-text-tiny /* 0.75rem (12px) */ +.tutor-text-p3 /* 0.75rem (12px) */ +``` + +### Font Weights + +```css +.tutor-font-regular /* font-weight: 400 */ +.tutor-font-medium /* font-weight: 500 */ +.tutor-font-semi-strong /* font-weight: 600 */ +.tutor-font-strong /* font-weight: 700 */ +``` + +### Text Alignment (RTL-aware) + +```css +.tutor-text-left /* text-align: left (RTL: right) */ +.tutor-text-center /* text-align: center */ +.tutor-text-right /* text-align: right (RTL: left) */ +.tutor-text-justify /* text-align: justify */ +.tutor-text-start /* text-align: start */ +.tutor-text-end /* text-align: end */ +``` + +### Text Colors + +#### Basic Colors + +```css +.tutor-text-primary /* Primary text color */ +.tutor-text-secondary /* Secondary text color */ +.tutor-text-tertiary /* Tertiary text color */ +.tutor-text-disabled /* Disabled text color */ +.tutor-text-brand /* Brand text color */ +.tutor-text-inverse /* Inverse text color */ +.tutor-text-success /* Success text color */ +.tutor-text-warning /* Warning text color */ +.tutor-text-error /* Error text color */ +``` + +#### Brand Colors + +```css +.tutor-text-brand-100 /* Lightest brand color */ +.tutor-text-brand-200 +.tutor-text-brand-300 +.tutor-text-brand-400 +.tutor-text-brand-500 /* Default brand color */ +.tutor-text-brand-600 +.tutor-text-brand-700 +.tutor-text-brand-800 +.tutor-text-brand-900 +.tutor-text-brand-950 /* Darkest brand color */ +``` + +#### Gray Colors + +```css +.tutor-text-gray-1 /* White */ +.tutor-text-gray-10 +.tutor-text-gray-25 +.tutor-text-gray-50 +.tutor-text-gray-100 +.tutor-text-gray-200 +.tutor-text-gray-300 +.tutor-text-gray-400 +.tutor-text-gray-500 +.tutor-text-gray-600 +.tutor-text-gray-700 +.tutor-text-gray-750 +.tutor-text-gray-800 +.tutor-text-gray-900 +.tutor-text-gray-950 /* Darkest gray */ +``` + +### Text Decoration + +```css +.tutor-underline /* text-decoration: underline */ +.tutor-line-through /* text-decoration: line-through */ +.tutor-no-underline /* text-decoration: none */ +``` + +### Text Transform + +```css +.tutor-uppercase /* text-transform: uppercase */ +.tutor-lowercase /* text-transform: lowercase */ +.tutor-capitalize /* text-transform: capitalize */ +.tutor-normal-case /* text-transform: none */ +``` + +### Text Overflow + +```css +.tutor-truncate /* Truncate with ellipsis */ +.tutor-text-ellipsis /* text-overflow: ellipsis */ +.tutor-text-clip /* text-overflow: clip */ +``` + +### Line Clamp + +```css +.tutor-line-clamp-1 /* Clamp to 1 line */ +.tutor-line-clamp-2 /* Clamp to 2 lines */ +.tutor-line-clamp-3 /* Clamp to 3 lines */ +.tutor-line-clamp-4 /* Clamp to 4 lines */ +.tutor-line-clamp-5 /* Clamp to 5 lines */ +.tutor-line-clamp-6 /* Clamp to 6 lines */ +``` + +### White Space + +```css +.tutor-whitespace-normal /* white-space: normal */ +.tutor-whitespace-nowrap /* white-space: nowrap */ +.tutor-whitespace-pre /* white-space: pre */ +.tutor-whitespace-pre-line /* white-space: pre-line */ +.tutor-whitespace-pre-wrap /* white-space: pre-wrap */ +``` + +### Word Break + +```css +.tutor-break-normal /* overflow-wrap: normal; word-break: normal */ +.tutor-break-words /* overflow-wrap: break-word */ +.tutor-break-all /* word-break: break-all */ +``` + +### Letter Spacing + +```css +.tutor-tracking-tighter /* letter-spacing: -0.05em */ +.tutor-tracking-tight /* letter-spacing: -0.025em */ +.tutor-tracking-normal /* letter-spacing: 0em */ +.tutor-tracking-wide /* letter-spacing: 0.025em */ +.tutor-tracking-wider /* letter-spacing: 0.05em */ +.tutor-tracking-widest /* letter-spacing: 0.1em */ +``` + +### Line Height + +```css +.tutor-leading-none /* line-height: 1 */ +.tutor-leading-tight /* line-height: 1.25 */ +.tutor-leading-snug /* line-height: 1.375 */ +.tutor-leading-normal /* line-height: 1.5 */ +.tutor-leading-relaxed /* line-height: 1.625 */ +.tutor-leading-loose /* line-height: 2 */ +``` + +### List Styles + +```css +.tutor-list-none /* list-style-type: none */ +.tutor-list-disc /* list-style-type: disc */ +.tutor-list-decimal /* list-style-type: decimal */ +.tutor-list-inside /* list-style-position: inside */ +.tutor-list-outside /* list-style-position: outside */ +``` + +--- + +## Color Utilities + +### Background Colors + +#### Basic Backgrounds + +```css +.tutor-bg-transparent /* background-color: transparent */ +.tutor-bg-current /* background-color: currentColor */ +.tutor-bg-surface-base /* Base surface color */ +.tutor-bg-surface-l1 /* Level 1 surface color */ +.tutor-bg-surface-l2 /* Level 2 surface color */ +.tutor-bg-surface-elevated /* Elevated surface color */ +.tutor-bg-primary /* Primary button color */ +.tutor-bg-secondary /* Secondary button color */ +.tutor-bg-success /* Success color */ +.tutor-bg-success-light /* Light success color */ +.tutor-bg-warning /* Warning color */ +.tutor-bg-warning-light /* Light warning color */ +.tutor-bg-error /* Error color */ +.tutor-bg-error-light /* Light error color */ +``` + +#### Brand Backgrounds + +```css +.tutor-bg-brand-100 /* Lightest brand background */ +.tutor-bg-brand-200 +.tutor-bg-brand-300 +.tutor-bg-brand-400 +.tutor-bg-brand-500 /* Default brand background */ +.tutor-bg-brand-600 +.tutor-bg-brand-700 +.tutor-bg-brand-800 +.tutor-bg-brand-900 +.tutor-bg-brand-950 /* Darkest brand background */ +``` + +#### Gray Backgrounds + +```css +.tutor-bg-gray-1 /* White background */ +.tutor-bg-gray-10 +.tutor-bg-gray-25 +.tutor-bg-gray-50 +.tutor-bg-gray-100 +.tutor-bg-gray-200 +.tutor-bg-gray-300 +.tutor-bg-gray-400 +.tutor-bg-gray-500 +.tutor-bg-gray-600 +.tutor-bg-gray-700 +.tutor-bg-gray-750 +.tutor-bg-gray-800 +.tutor-bg-gray-900 +.tutor-bg-gray-950 /* Darkest gray background */ +``` + +### Border Colors + +```css +.tutor-border-transparent /* border-color: transparent */ +.tutor-border-current /* border-color: currentColor */ +.tutor-border-idle /* Default border color */ +.tutor-border-hover /* Hover border color */ +.tutor-border-focus /* Focus border color */ +.tutor-border-brand /* Brand border color */ +.tutor-border-success /* Success border color */ +.tutor-border-warning /* Warning border color */ +.tutor-border-error /* Error border color */ +``` + +#### Brand Border Colors + +```css +.tutor-border-brand-100 /* Lightest brand border */ +.tutor-border-brand-200 +.tutor-border-brand-300 +.tutor-border-brand-400 +.tutor-border-brand-500 /* Default brand border */ +.tutor-border-brand-600 +.tutor-border-brand-700 +.tutor-border-brand-800 +.tutor-border-brand-900 +.tutor-border-brand-950 /* Darkest brand border */ +``` + +### Shadows + +```css +.tutor-shadow-none /* box-shadow: none */ +.tutor-shadow-sm /* Small shadow */ +.tutor-shadow /* Default shadow */ +.tutor-shadow-md /* Medium shadow */ +.tutor-shadow-lg /* Large shadow */ +.tutor-shadow-xl /* Extra large shadow */ +``` + +### Opacity + +```css +.tutor-opacity-0 /* opacity: 0 */ +.tutor-opacity-25 /* opacity: 0.25 */ +.tutor-opacity-50 /* opacity: 0.5 */ +.tutor-opacity-75 /* opacity: 0.75 */ +.tutor-opacity-100 /* opacity: 1 */ +``` + +### Hover States + +```css +.tutor-hover-bg-primary:hover /* Hover primary background */ +.tutor-hover-bg-secondary:hover /* Hover secondary background */ +.tutor-hover-bg-surface-l2:hover /* Hover surface background */ +.tutor-hover-text-primary:hover /* Hover primary text */ +.tutor-hover-text-brand:hover /* Hover brand text */ +.tutor-hover-border-brand:hover /* Hover brand border */ +.tutor-hover-shadow-md:hover /* Hover medium shadow */ +.tutor-hover-shadow-lg:hover /* Hover large shadow */ +``` + +### Focus States + +```css +.tutor-focus-border-brand:focus /* Focus brand border */ +.tutor-focus-ring:focus /* Focus ring */ +.tutor-focus-outline-none:focus /* Remove focus outline */ +``` + +--- + +## Sizing Utilities + +### Width + +#### Basic Widths + +```css +.tutor-w-0 /* width: 0 */ +.tutor-w-auto /* width: auto */ +.tutor-w-full /* width: 100% */ +.tutor-w-screen /* width: 100vw */ +.tutor-w-min /* width: min-content */ +.tutor-w-max /* width: max-content */ +.tutor-w-fit /* width: fit-content */ +``` + +#### Fractional Widths + +```css +.tutor-w-1\/2 /* width: 50% */ +.tutor-w-1\/3 /* width: 33.333333% */ +.tutor-w-2\/3 /* width: 66.666667% */ +.tutor-w-1\/4 /* width: 25% */ +.tutor-w-2\/4 /* width: 50% */ +.tutor-w-3\/4 /* width: 75% */ +.tutor-w-1\/5 /* width: 20% */ +.tutor-w-2\/5 /* width: 40% */ +.tutor-w-3\/5 /* width: 60% */ +.tutor-w-4\/5 /* width: 80% */ +.tutor-w-1\/6 /* width: 16.666667% */ +.tutor-w-2\/6 /* width: 33.333333% */ +.tutor-w-3\/6 /* width: 50% */ +.tutor-w-4\/6 /* width: 66.666667% */ +.tutor-w-5\/6 /* width: 83.333333% */ +``` + +#### Fixed Widths (using spacing scale) + +```css +.tutor-w-{size} /* width: {size} */ +``` + +#### Additional Fixed Widths + +```css +.tutor-w-16 /* width: 64px */ +.tutor-w-20 /* width: 80px */ +.tutor-w-24 /* width: 96px */ +.tutor-w-32 /* width: 128px */ +.tutor-w-40 /* width: 160px */ +.tutor-w-48 /* width: 192px */ +.tutor-w-56 /* width: 224px */ +.tutor-w-64 /* width: 256px */ +.tutor-w-72 /* width: 288px */ +.tutor-w-80 /* width: 320px */ +.tutor-w-96 /* width: 384px */ +``` + +### Height + +#### Basic Heights + +```css +.tutor-h-0 /* height: 0 */ +.tutor-h-auto /* height: auto */ +.tutor-h-full /* height: 100% */ +.tutor-h-screen /* height: 100vh */ +.tutor-h-min /* height: min-content */ +.tutor-h-max /* height: max-content */ +.tutor-h-fit /* height: fit-content */ +``` + +#### Fixed Heights (using spacing scale) + +```css +.tutor-h-{size} /* height: {size} */ +``` + +### Min/Max Width + +```css +.tutor-min-w-0 /* min-width: 0 */ +.tutor-min-w-full /* min-width: 100% */ +.tutor-min-w-min /* min-width: min-content */ +.tutor-min-w-max /* min-width: max-content */ +.tutor-min-w-fit /* min-width: fit-content */ + +.tutor-max-w-0 /* max-width: 0 */ +.tutor-max-w-none /* max-width: none */ +.tutor-max-w-xs /* max-width: 320px */ +.tutor-max-w-sm /* max-width: 384px */ +.tutor-max-w-md /* max-width: 448px */ +.tutor-max-w-lg /* max-width: 512px */ +.tutor-max-w-xl /* max-width: 576px */ +.tutor-max-w-2xl /* max-width: 672px */ +.tutor-max-w-3xl /* max-width: 768px */ +.tutor-max-w-4xl /* max-width: 896px */ +.tutor-max-w-5xl /* max-width: 1024px */ +.tutor-max-w-6xl /* max-width: 1152px */ +.tutor-max-w-7xl /* max-width: 1280px */ +.tutor-max-w-full /* max-width: 100% */ +.tutor-max-w-prose /* max-width: 65ch */ +``` + +### Min/Max Height + +```css +.tutor-min-h-0 /* min-height: 0 */ +.tutor-min-h-full /* min-height: 100% */ +.tutor-min-h-screen /* min-height: 100vh */ +.tutor-min-h-min /* min-height: min-content */ +.tutor-min-h-max /* min-height: max-content */ +.tutor-min-h-fit /* min-height: fit-content */ + +.tutor-max-h-0 /* max-height: 0 */ +.tutor-max-h-full /* max-height: 100% */ +.tutor-max-h-screen /* max-height: 100vh */ +.tutor-max-h-min /* max-height: min-content */ +.tutor-max-h-max /* max-height: max-content */ +.tutor-max-h-fit /* max-height: fit-content */ +``` + +--- + +## Border Utilities + +### Border Width & Style + +#### Basic Borders (with smart defaults) + +```css +.tutor-border /* border: 1px solid var(--tutor-border-idle) */ +.tutor-border-0 /* border: none */ +.tutor-border-2 /* border: 2px solid var(--tutor-border-idle) */ +.tutor-border-4 /* border: 4px solid var(--tutor-border-idle) */ +.tutor-border-8 /* border: 8px solid var(--tutor-border-idle) */ +``` + +#### Directional Borders (RTL-aware) + +```css +.tutor-border-t /* border-top: 1px solid var(--tutor-border-idle) */ +.tutor-border-r /* border-inline-end: 1px solid var(--tutor-border-idle) */ +.tutor-border-b /* border-bottom: 1px solid var(--tutor-border-idle) */ +.tutor-border-l /* border-inline-start: 1px solid var(--tutor-border-idle) */ + +.tutor-border-t-0 /* border-top: none */ +.tutor-border-r-0 /* border-inline-end: none */ +.tutor-border-b-0 /* border-bottom: none */ +.tutor-border-l-0 /* border-inline-start: none */ + +.tutor-border-t-2 /* border-top: 2px solid var(--tutor-border-idle) */ +.tutor-border-r-2 /* border-inline-end: 2px solid var(--tutor-border-idle) */ +.tutor-border-b-2 /* border-bottom: 2px solid var(--tutor-border-idle) */ +.tutor-border-l-2 /* border-inline-start: 2px solid var(--tutor-border-idle) */ +``` + +#### Border Styles + +```css +.tutor-border-solid /* border-style: solid */ +.tutor-border-dashed /* border-style: dashed */ +.tutor-border-dotted /* border-style: dotted */ +.tutor-border-double /* border-style: double */ +.tutor-border-none /* border-style: none */ +``` + +### Border Radius (RTL-aware) + +#### All Corners + +```css +.tutor-rounded-{size} /* border-radius: {size} */ +``` + +#### Directional Radius + +```css +.tutor-rounded-t-{size} /* border-start-start-radius & border-start-end-radius */ +.tutor-rounded-b-{size} /* border-end-end-radius & border-end-start-radius */ +.tutor-rounded-r-{size} /* border-start-end-radius & border-end-end-radius */ +.tutor-rounded-l-{size} /* border-start-start-radius & border-end-start-radius */ +``` + +#### Individual Corners + +```css +.tutor-rounded-tl-{size} /* border-start-start-radius */ +.tutor-rounded-tr-{size} /* border-start-end-radius */ +.tutor-rounded-br-{size} /* border-end-end-radius */ +.tutor-rounded-bl-{size} /* border-end-start-radius */ +``` + +### Semantic Border Utilities + +```css +.tutor-border-card /* Card border with radius */ +.tutor-border-input /* Input border with focus state */ +.tutor-border-divider /* Bottom border divider */ +.tutor-border-accent /* Accent border (inline-start) */ +``` + +--- + +## RTL Utilities + +### Logical Direction Utilities + +```css +.tutor-text-start /* text-align: start */ +.tutor-text-end /* text-align: end */ +.tutor-float-start /* float: inline-start */ +.tutor-float-end /* float: inline-end */ +``` + +### Logical Spacing + +#### Margin + +```css +.tutor-ms-{size} /* margin-inline-start: {size} */ +.tutor-me-{size} /* margin-inline-end: {size} */ +``` + +#### Padding + +```css +.tutor-ps-{size} /* padding-inline-start: {size} */ +.tutor-pe-{size} /* padding-inline-end: {size} */ +``` + +### Logical Positioning + +```css +.tutor-start-0 /* inset-inline-start: 0 */ +.tutor-end-0 /* inset-inline-end: 0 */ +``` + +### Logical Borders + +```css +.tutor-border-start /* border-inline-start: 1px solid var(--tutor-border-idle) */ +.tutor-border-end /* border-inline-end: 1px solid var(--tutor-border-idle) */ +``` + +### Component Utilities + +```css +.tutor-icon-start /* Icon at start position */ +.tutor-icon-end /* Icon at end position */ +.tutor-dropdown-start /* Dropdown positioned at start */ +.tutor-dropdown-end /* Dropdown positioned at end */ +.tutor-sidebar-start /* Sidebar positioned at start */ +.tutor-sidebar-end /* Sidebar positioned at end */ +.tutor-toast-start /* Toast positioned at start */ +.tutor-toast-end /* Toast positioned at end */ +``` + +### Language-Specific Classes + +```css +.tutor-lang-ar /* Arabic: direction: rtl; text-align: right */ +.tutor-lang-he /* Hebrew: direction: rtl; text-align: right */ +.tutor-lang-fa /* Persian: direction: rtl; text-align: right */ +.tutor-lang-ur /* Urdu: direction: rtl; text-align: right */ +.tutor-lang-en /* English: direction: ltr; text-align: left */ +.tutor-lang-es /* Spanish: direction: ltr; text-align: left */ +.tutor-lang-fr /* French: direction: ltr; text-align: left */ +.tutor-lang-de /* German: direction: ltr; text-align: left */ +``` + +--- + +## Z-Index Utilities + +```css +.tutor-z-{level} /* z-index: {level} */ +``` + +Available z-index levels are defined in the design tokens. + +--- + +## Responsive Design + +All utility classes support responsive variants using breakpoint prefixes: + +### Breakpoint Prefixes + +- `tutor-sm-*` - Small screens and up +- `tutor-md-*` - Medium screens and up +- `tutor-lg-*` - Large screens and up +- `tutor-xl-*` - Extra large screens and up +- `tutor-2xl-*` - 2X large screens and up + +### Examples + +```css +.tutor-md-flex /* display: flex on medium screens and up */ +.tutor-lg-grid-cols-3 /* 3 columns on large screens and up */ +.tutor-sm-text-center /* Center text on small screens and up */ +.tutor-xl-p-8 /* Padding 8 on extra large screens and up */ +``` + +--- + +## Design Tokens + +### Spacing Scale + +The spacing system uses a consistent scale from 0px to 200px: + +| Token | Value | Usage | +| ------ | ----- | --------------------- | +| `none` | 0px | No spacing | +| `1` | 2px | Minimal spacing | +| `2` | 4px | Very small spacing | +| `3` | 6px | Small spacing | +| `4` | 8px | Small spacing | +| `5` | 12px | Medium-small spacing | +| `6` | 16px | Medium spacing (base) | +| `7` | 20px | Medium spacing | +| `8` | 24px | Medium-large spacing | +| `9` | 32px | Large spacing | +| `10` | 40px | Large spacing | +| `11` | 48px | Extra large spacing | +| `12` | 56px | Extra large spacing | +| `13` | 64px | XXL spacing | +| `14` | 72px | XXL spacing | +| `15` | 80px | XXXL spacing | +| `16` | 88px | XXXL spacing | +| `17` | 96px | XXXL spacing | +| `18` | 104px | XXXL spacing | +| `19` | 112px | XXXL spacing | +| `20` | 120px | XXXL spacing | +| `21` | 200px | Maximum spacing | + +### Typography Scale + +| Token | Size | Line Height | Usage | +| ----------- | ---- | ----------- | ------------------- | +| `h1` | 40px | 48px | Main headings | +| `h2` | 32px | 40px | Section headings | +| `h3` | 24px | 32px | Subsection headings | +| `h4` | 20px | 28px | Component headings | +| `h5` | 18px | 26px | Small headings | +| `medium/p1` | 16px | 22px | Body text | +| `small/p2` | 14px | 18px | Secondary text | +| `tiny/p3` | 12px | 18px | Caption text | + +### Color Palette + +#### Brand Colors + +- `brand-100` to `brand-950` - Primary brand colors from lightest to darkest +- `brand-500` - Default brand color + +#### Gray Colors + +- `gray-1` to `gray-950` - Neutral colors from white to near-black +- `gray-600` - Default text color + +#### Semantic Colors + +- `success-25` to `success-950` - Success states +- `warning-25` to `warning-950` - Warning states +- `error-25` to `error-950` - Error states +- `exception-1` to `exception-6` - Special accent colors + +--- + +## Best Practices + +### 1. Use Semantic Classes First + +```html + +

Main Heading

+

Body text

+ + +

Main Heading

+``` + +### 2. Leverage RTL-Aware Classes + +```html + +
Content with left margin and left-aligned text
+ + +
Content with start margin and start-aligned text
+``` + +### 3. Use Responsive Variants + +```html + +
+
Item 1
+
Item 2
+
Item 3
+
+``` + +### 4. Combine Utilities Effectively + +```html + +
+

Card Title

+

Card content

+
+``` + +### 5. Use Consistent Spacing + +```html + +
+

Article Title

+

First paragraph

+

Second paragraph

+
+``` + +--- + +## Migration Guide + +### From Custom CSS to Utilities + +#### Before + +```css +.my-component { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; + background-color: white; + border: 1px solid #e5e5e5; + border-radius: 8px; +} +``` + +#### After + +```html +
+ +
+``` + +### RTL Migration + +#### Before (Physical Properties) + +```css +.component { + margin-left: 16px; + text-align: left; + border-left: 2px solid blue; +} +``` + +#### After (Logical Properties) + +```html +
+ +
+``` + +This utility system provides a comprehensive, consistent, and maintainable approach to styling that scales with your design system and supports modern web standards including RTL languages and responsive design. diff --git a/assets/core/docs/utility-examples.html b/assets/core/docs/utility-examples.html new file mode 100644 index 0000000000..70f5f0db9d --- /dev/null +++ b/assets/core/docs/utility-examples.html @@ -0,0 +1,862 @@ + + + + + + Tutor CSS Utility Classes - Interactive Examples + + + + + +
+
+

Tutor CSS Utility Classes

+

Interactive examples of all utility classes available in the Tutor design system. Each example shows the visual result and the corresponding HTML code.

+
+ + +
+

Layout Utilities

+ +

Flexbox Layout

+
+
+
+
Item 1
+
Item 2
+
Item 3
+
+
+
+<div class="tutor-flex tutor-items-center tutor-justify-between tutor-p-4 tutor-bg-brand-100 tutor-rounded-lg"> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg">Item 1</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg">Item 2</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg">Item 3</div> +</div> +
+
+ +

Flex Direction

+
+
+
+
Item 1
+
Item 2
+
Item 3
+
+
+
+<div class="tutor-flex tutor-flex-col tutor-gap-4 tutor-p-4 tutor-bg-brand-100 tutor-rounded-lg"> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">Item 1</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">Item 2</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">Item 3</div> +</div> +
+
+ +

Grid Layout

+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+<div class="tutor-grid tutor-grid-cols-3 tutor-gap-4 tutor-p-4 tutor-bg-brand-100 tutor-rounded-lg"> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">1</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">2</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">3</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">4</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">5</div> + <div class="tutor-p-4 tutor-bg-brand-500 tutor-rounded-lg tutor-text-center">6</div> +</div> +
+
+
+ + +
+

Spacing Utilities

+ +

Padding Scale

+
+
+
+
+
tutor-p-4 (8px)
+
+
+
tutor-p-6 (16px)
+
+
+
tutor-p-8 (24px)
+
+
+
+
+<div class="tutor-p-4">Padding 8px</div> +<div class="tutor-p-6">Padding 16px</div> +<div class="tutor-p-8">Padding 24px</div> +
+
+ +

Margin Examples

+
+
+
+
tutor-m-4
+
tutor-mb-4
+
tutor-mt-6
+
+
+
+<div class="tutor-m-4">All margins 8px</div> +<div class="tutor-mb-4">Bottom margin 8px</div> +<div class="tutor-mt-6">Top margin 16px</div> +
+
+ +

Spacing Scale Reference

+
+
+
+
tutor-*-1
2px
+
tutor-*-2
4px
+
tutor-*-3
6px
+
tutor-*-4
8px
+
tutor-*-5
12px
+
tutor-*-6
16px
+
tutor-*-7
20px
+
tutor-*-8
24px
+
tutor-*-9
32px
+
tutor-*-10
40px
+
tutor-*-11
48px
+
tutor-*-12
56px
+
+
+
+/* Available spacing values */ +tutor-p-{size} /* padding */ +tutor-m-{size} /* margin */ +tutor-px-{size} /* horizontal padding */ +tutor-py-{size} /* vertical padding */ +tutor-mx-{size} /* horizontal margin */ +tutor-my-{size} /* vertical margin */ +
+
+
+ + +
+

Typography Utilities

+ +

Semantic Typography

+
+
+
+

tutor-h1 - Main Heading (40px)

+

tutor-h2 - Section Heading (32px)

+

tutor-h3 - Subsection Heading (24px)

+

tutor-h4 - Component Heading (20px)

+
tutor-h5 - Small Heading (18px)
+

tutor-p1 - Body text (16px)

+

tutor-p2 - Secondary text (14px)

+

tutor-p3 - Caption text (12px)

+
+
+
+<h1 class="tutor-h1">Main Heading</h1> +<h2 class="tutor-h2">Section Heading</h2> +<h3 class="tutor-h3">Subsection Heading</h3> +<h4 class="tutor-h4">Component Heading</h4> +<h5 class="tutor-h5">Small Heading</h5> +<p class="tutor-p1">Body text</p> +<p class="tutor-p2">Secondary text</p> +<p class="tutor-p3">Caption text</p> +
+
+ +

Font Weights

+
+
+
+

tutor-font-regular (400) - Regular text

+

tutor-font-medium (500) - Medium text

+

tutor-font-semi-strong (600) - Semi bold text

+

tutor-font-strong (700) - Bold text

+
+
+
+<p class="tutor-font-regular">Regular text</p> +<p class="tutor-font-medium">Medium text</p> +<p class="tutor-font-semi-strong">Semi bold text</p> +<p class="tutor-font-strong">Bold text</p> +
+
+ +

Text Alignment

+
+
+
+

tutor-text-left - Left aligned text

+

tutor-text-center - Center aligned text

+

tutor-text-right - Right aligned text

+
+
+
+<p class="tutor-text-left">Left aligned text</p> +<p class="tutor-text-center">Center aligned text</p> +<p class="tutor-text-right">Right aligned text</p> +
+
+
+ + +
+

Color Utilities

+ +

Brand Colors

+
+
+
+
+
+ brand-100
#f6f8fe +
+
+
+ brand-200
#e4ebfc +
+
+
+ brand-300
#dbe4fa +
+
+
+ brand-500
#4979e8 +
+
+
+ brand-600
#3e64de +
+
+
+ brand-700
#2b49ca +
+
+
+
+<div class="tutor-bg-brand-100">Light brand background</div> +<div class="tutor-bg-brand-500">Default brand background</div> +<div class="tutor-text-brand-500">Brand colored text</div> +<div class="tutor-border-brand-500">Brand colored border</div> +
+
+ +

Semantic Colors

+
+
+
+
+
+
Success
+
tutor-bg-success-100
+
+
+
+
+
Warning
+
tutor-bg-warning-100
+
+
+
+
+
Error
+
tutor-bg-error-100
+
+
+
+
+
+<div class="tutor-bg-success-100 tutor-text-success-600">Success message</div> +<div class="tutor-bg-warning-100 tutor-text-warning-600">Warning message</div> +<div class="tutor-bg-error-100 tutor-text-error-600">Error message</div> +
+
+ +

Text Colors

+
+
+
+

tutor-text-primary - Primary text color

+

tutor-text-secondary - Secondary text color

+

tutor-text-disabled - Disabled text color

+

tutor-text-brand-500 - Brand text color

+

tutor-text-success-600 - Success text color

+

tutor-text-error-600 - Error text color

+
+
+
+<p class="tutor-text-primary">Primary text</p> +<p class="tutor-text-secondary">Secondary text</p> +<p class="tutor-text-disabled">Disabled text</p> +<p class="tutor-text-brand-500">Brand text</p> +<p class="tutor-text-success-600">Success text</p> +<p class="tutor-text-error-600">Error text</p> +
+
+
+ + +
+

Sizing Utilities

+ +

Width Utilities

+
+
+
+
tutor-w-1/4 (25%)
+
tutor-w-1/2 (50%)
+
tutor-w-3/4 (75%)
+
tutor-w-full (100%)
+
+
+
+<div class="tutor-w-1/4">25% width</div> +<div class="tutor-w-1/2">50% width</div> +<div class="tutor-w-3/4">75% width</div> +<div class="tutor-w-full">100% width</div> +
+
+ +

Height Utilities

+
+
+
+
h-8
+
h-16
+
h-24
+
+
+
+<div class="tutor-h-8">32px height</div> +<div class="tutor-h-16">64px height</div> +<div class="tutor-h-24">96px height</div> +
+
+
+ + +
+

Border Utilities

+ +

Border Styles

+
+
+
+
+
tutor-border
+
+
+
tutor-border-brand-500
+
+
+
border-dashed
+
+
+
+
+<div class="tutor-border">Default border</div> +<div class="tutor-border tutor-border-brand-500">Brand colored border</div> +<div class="tutor-border-dashed">Dashed border</div> +
+
+ +

Border Radius

+
+
+
+
+
tutor-rounded-sm
+
+
+
tutor-rounded-lg
+
+
+
tutor-rounded-full
+
+
+
+
+<div class="tutor-rounded-sm">Small radius</div> +<div class="tutor-rounded-lg">Large radius</div> +<div class="tutor-rounded-full">Full radius</div> +
+
+ +

Shadows

+
+
+
+
+
tutor-shadow-sm
+
+
+
tutor-shadow-md
+
+
+
tutor-shadow-lg
+
+
+
+
+<div class="tutor-shadow-sm">Small shadow</div> +<div class="tutor-shadow-md">Medium shadow</div> +<div class="tutor-shadow-lg">Large shadow</div> +
+
+
+ + +
+

Component Examples

+ +

Card Component

+
+
+
+

Card Title

+

This is a card component built entirely with utility classes. It demonstrates how utilities can be combined to create complex components.

+ +
+
+
+<div class="tutor-bg-surface-l1 tutor-border tutor-rounded-lg tutor-p-6 tutor-shadow-sm"> + <h3 class="tutor-text-lg tutor-font-semibold tutor-mb-4">Card Title</h3> + <p class="tutor-text-sm tutor-text-secondary tutor-mb-4">Card content</p> + <button class="tutor-bg-brand-500 tutor-text-white tutor-p-4 tutor-rounded-lg">Action</button> +</div> +
+
+ +

Navigation Bar

+
+
+ +
+
+<nav class="tutor-flex tutor-items-center tutor-justify-between tutor-p-4 tutor-bg-surface-l1 tutor-border tutor-rounded-lg"> + <div class="tutor-text-lg tutor-font-semibold tutor-text-brand-500">Brand</div> + <div class="tutor-flex tutor-gap-6"> + <a href="#" class="tutor-text-sm tutor-text-secondary">Home</a> + <a href="#" class="tutor-text-sm tutor-text-secondary">About</a> + <a href="#" class="tutor-text-sm tutor-text-secondary">Contact</a> + </div> +</nav> +
+
+ +

Alert Messages

+
+
+
+
+
Success!
+
Your changes have been saved successfully.
+
+
+
Warning!
+
Please review your input before proceeding.
+
+
+
Error!
+
Something went wrong. Please try again.
+
+
+
+
+<div class="tutor-bg-success-100 tutor-border tutor-rounded-lg tutor-p-4"> + <div class="tutor-text-success-600 tutor-font-medium">Success!</div> + <div class="tutor-text-secondary">Your changes have been saved.</div> +</div> + +<div class="tutor-bg-warning-100 tutor-border tutor-rounded-lg tutor-p-4"> + <div class="tutor-text-warning-600 tutor-font-medium">Warning!</div> + <div class="tutor-text-secondary">Please review your input.</div> +</div> + +<div class="tutor-bg-error-100 tutor-border tutor-rounded-lg tutor-p-4"> + <div class="tutor-text-error-600 tutor-font-medium">Error!</div> + <div class="tutor-text-secondary">Something went wrong.</div> +</div> +
+
+
+ + +
+

Responsive Design

+ +

Responsive Grid

+
+
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
+

+ Note: This grid would be 1 column on mobile, 2 columns on tablet, and 4 columns on desktop using responsive classes. +

+
+
+<div class="tutor-grid tutor-grid-cols-1 tutor-md-grid-cols-2 tutor-lg-grid-cols-4 tutor-gap-4"> + <div class="tutor-bg-brand-100 tutor-p-4 tutor-rounded-lg">Item 1</div> + <div class="tutor-bg-brand-100 tutor-p-4 tutor-rounded-lg">Item 2</div> + <div class="tutor-bg-brand-100 tutor-p-4 tutor-rounded-lg">Item 3</div> + <div class="tutor-bg-brand-100 tutor-p-4 tutor-rounded-lg">Item 4</div> +</div> +
+
+ +

Responsive Typography

+
+
+
+

Responsive Heading

+

This heading would be smaller on mobile (tutor-text-lg) and larger on desktop (tutor-lg-text-2xl). The text size adapts to screen size for optimal readability.

+
+
+
+<h2 class="tutor-text-lg tutor-lg-text-2xl">Responsive Heading</h2> +<p class="tutor-text-sm tutor-md-text-base">Responsive paragraph text</p> +
+
+ +

Responsive Spacing

+
+
+
+
+ Responsive padding: small on mobile, large on desktop +
+
+
+
+<div class="tutor-p-4 tutor-lg-p-8"> + Responsive padding +</div> +
+
+ +

Breakpoint Reference

+
+
+
+
Default
All screen sizes
+
tutor-sm-*
≥640px (Small)
+
tutor-md-*
≥768px (Medium)
+
tutor-lg-*
≥1024px (Large)
+
tutor-xl-*
≥1280px (XL)
+
tutor-2xl-*
≥1536px (2XL)
+
+
+
+/* Mobile-first responsive design */ +tutor-p-4 /* padding on all screens */ +tutor-md-p-6 /* padding on medium screens and up */ +tutor-lg-p-8 /* padding on large screens and up */ + +tutor-grid-cols-1 /* 1 column on mobile */ +tutor-md-grid-cols-2 /* 2 columns on tablet */ +tutor-lg-grid-cols-3 /* 3 columns on desktop */ +
+
+
+ + +
+

Quick Reference

+
+
+ Layout
+ tutor-flex, tutor-grid
+ tutor-items-center
+ tutor-justify-between +
+
+ Spacing
+ tutor-p-{1-21}
+ tutor-m-{1-21}
+ tutor-gap-{1-21} +
+
+ Typography
+ tutor-h1, tutor-h2
+ tutor-p1, tutor-p2
+ tutor-text-{size} +
+
+ Colors
+ tutor-bg-brand-{100-950}
+ tutor-text-brand-{100-950}
+ tutor-border-brand-{100-950} +
+
+ Sizing
+ tutor-w-{size}
+ tutor-h-{size}
+ tutor-max-w-{size} +
+
+ Borders
+ tutor-border
+ tutor-rounded-{size}
+ tutor-shadow-{size} +
+
+ +
+

💡 Pro Tip: All utilities support responsive variants (tutor-md-*, tutor-lg-*) and are RTL-aware by default!

+
+
+
+ + + + \ No newline at end of file diff --git a/assets/core/scss/components/_accordion.scss b/assets/core/scss/components/_accordion.scss new file mode 100644 index 0000000000..b938eafa99 --- /dev/null +++ b/assets/core/scss/components/_accordion.scss @@ -0,0 +1,71 @@ +@use '../mixins' as *; +@use '../tokens' as *; + +.tutor-accordion { + overflow: visible; + background-color: transparent; + @include tutor-flex(column, stretch, start); + gap: $tutor-spacing-6; + + &-item { + background-color: $tutor-surface-l1; + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-lg; + overflow: hidden; + } + + &-header { + @include tutor-flex(row, start, space-between); + width: 100%; + padding: $tutor-spacing-5 $tutor-spacing-6; + background: none; + border: none; + text-align: left; + cursor: pointer; + @include tutor-transition(background-color); + + &:hover, + &:focus { + background-color: $tutor-surface-l2; + outline: none; + } + } + + &-title { + margin: 0; + @include tutor-typography('medium', 'medium', 'primary', 'heading'); + } + + &-icon { + @include tutor-flex-center(); + flex-shrink: 0; + color: $tutor-icon-idle; + @include tutor-transition(transform); + + .tutor-accordion-header[aria-expanded='true'] & { + transform: rotate(180deg); + color: $tutor-text-primary; + } + + // RTL support for icon rotation + [dir='rtl'] .tutor-accordion-header[aria-expanded='true'] & { + transform: rotate(180deg) scaleX(-1); + } + } + + &-content { + overflow: hidden; + } + + &-body { + padding: $tutor-spacing-2 $tutor-spacing-6 $tutor-spacing-5; + + p:first-child { + margin-top: 0; + } + + p:last-child { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/assets/core/scss/components/_alert.scss b/assets/core/scss/components/_alert.scss new file mode 100644 index 0000000000..3665780cb0 --- /dev/null +++ b/assets/core/scss/components/_alert.scss @@ -0,0 +1,56 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-alert { + @include tutor-flex(row, center, space-between); + gap: $tutor-spacing-5; + padding: $tutor-spacing-4; + border-radius: $tutor-radius-sm; + min-height: 48px; + + .tutor-alert-content { + @include tutor-flex(row, start); + gap: $tutor-spacing-3; + } + + .tutor-alert-icon { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + color: $tutor-icon-idle; + + svg { + width: 20px; + height: 20px; + } + } + + .tutor-alert-text { + @include tutor-typography('tiny', 'regular', 'secondary'); + } + + .tutor-alert-action { + flex-shrink: 0; + } + + &.tutor-alert-default { + background-color: $tutor-surface-l1-hover; + } + + &.tutor-alert-info { + background-color: $tutor-surface-brand-quaternary; + } + + &.tutor-alert-success { + background-color: $tutor-surface-success; + } + + &.tutor-alert-warning { + background-color: $tutor-surface-warning-hover; + } + + &.tutor-alert-error { + background-color: $tutor-surface-critical; + } +} diff --git a/assets/core/scss/components/_attachment-card.scss b/assets/core/scss/components/_attachment-card.scss new file mode 100644 index 0000000000..d0cb601508 --- /dev/null +++ b/assets/core/scss/components/_attachment-card.scss @@ -0,0 +1,64 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-attachment-card { + @include tutor-flex(row, center, flex-start); + width: 100%; + gap: $tutor-spacing-5; + padding: $tutor-spacing-4 $tutor-spacing-5; + @include tutor-transition(background-color); + position: relative; + + &:hover, + &:focus-within { + background-color: $tutor-surface-l1-hover; + } + + &-icon { + @include tutor-flex(row, center, center); + width: 48px; + height: 48px; + border-radius: $tutor-radius-sm; + background-color: $tutor-surface-l2; + flex-shrink: 0; + + svg { + color: $tutor-icon-idle; + } + + &-loading { + svg { + @include tutor-spin(0.9s); + } + } + } + + &-body { + @include tutor-flex(column); + gap: $tutor-spacing-1; + flex: 1 1 auto; + min-width: 0; + } + + &-title { + @include tutor-typography('small', 'medium', 'primary'); + @include tutor-text-truncate; + } + + &-meta { + @include tutor-typography('tiny', 'regular', 'secondary', 'body'); + } + + @include tutor-breakpoint-up(md) { + &-actions { + opacity: 0; + @include tutor-transition((opacity, visibility)); + } + + &:hover &-actions, + &:focus-within &-actions, + &-show-actions &-actions { + opacity: 1; + } + } +} diff --git a/assets/core/scss/components/_avatar.scss b/assets/core/scss/components/_avatar.scss new file mode 100644 index 0000000000..1a4ae42820 --- /dev/null +++ b/assets/core/scss/components/_avatar.scss @@ -0,0 +1,47 @@ +// Avatar scss +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-avatar { + @include tutor-avatar-base; + @include tutor-avatar-size(48); +} + +.tutor-avatar-image { + @include tutor-avatar-image; +} + +.tutor-avatar-initials { + @include tutor-avatar-initials; +} + +// Avatar sizes +@each $size, $config in $tutor-avatar-sizes { + .tutor-avatar-#{$size} { + @include tutor-avatar-size($size); + } +} + +// Avatar variants +.tutor-avatar-square { + @include tutor-avatar-variant(square); +} + +.tutor-avatar-icon { + @include tutor-avatar-variant(icon); +} + +.tutor-avatar-border { + @include tutor-avatar-variant(border); +} + +// Responsive Avatar sizes +@each $breakpoint, $value in $tutor-breakpoints { + @include tutor-breakpoint-down($breakpoint) { + @each $size, $config in $tutor-avatar-sizes { + .tutor-avatar-#{$breakpoint}-#{$size} { + @include tutor-avatar-size($size); + } + } + } +} diff --git a/assets/core/scss/components/_badge.scss b/assets/core/scss/components/_badge.scss new file mode 100644 index 0000000000..8a624a202a --- /dev/null +++ b/assets/core/scss/components/_badge.scss @@ -0,0 +1,38 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-badge { + @include tutor-badge-base; + + &-primary { + @include tutor-badge-variant(primary); + } + + &-info { + @include tutor-badge-variant(info); + } + + &-warning { + @include tutor-badge-variant(warning); + } + + &-success { + @include tutor-badge-variant(success); + } + + &-success-solid { + @include tutor-badge-variant(success-solid); + } + + &-error { + @include tutor-badge-variant(error); + } + + &-highlight { + @include tutor-badge-variant(highlight); + } + + &-disabled { + @include tutor-badge-variant(disabled); + } +} diff --git a/assets/core/scss/components/_button.scss b/assets/core/scss/components/_button.scss new file mode 100644 index 0000000000..5b852b49ad --- /dev/null +++ b/assets/core/scss/components/_button.scss @@ -0,0 +1,160 @@ +// Button Component +@use '../tokens' as *; +@use '../mixins' as *; + +button.tutor-btn, +a.tutor-btn, +.tutor-btn { + @include tutor-button-base; + @include tutor-button-size(medium); +} + +// Button variants +button.tutor-btn-primary, +a.tutor-btn-primary, +.tutor-btn-primary { + @include tutor-button-variant(primary); +} + +button.tutor-btn-primary-soft, +a.tutor-btn-primary-soft, +.tutor-btn-primary-soft { + @include tutor-button-variant(primary-soft); +} + +button.tutor-btn-destructive, +a.tutor-btn-destructive, +.tutor-btn-destructive { + @include tutor-button-variant(destructive); +} + +button.tutor-btn-destructive-soft, +a.tutor-btn-destructive-soft, +.tutor-btn-destructive-soft { + @include tutor-button-variant(destructive-soft); +} + +button.tutor-btn-secondary, +a.tutor-btn-secondary, +.tutor-btn-secondary { + @include tutor-button-variant(secondary); +} + +button.tutor-btn-outline, +a.tutor-btn-outline, +.tutor-btn-outline { + @include tutor-button-variant(outline); +} + +button.tutor-btn-ghost, +a.tutor-btn-ghost, +.tutor-btn-ghost { + @include tutor-button-variant(ghost); +} + +button.tutor-btn-ghost-brand, +a.tutor-btn-ghost-brand, +.tutor-btn-ghost-brand { + @include tutor-button-variant(ghost-brand); +} + +button.tutor-btn-link, +a.tutor-btn-link, +.tutor-btn-link { + @include tutor-button-variant(link); + box-shadow: none +} + +button.tutor-btn-link-gray, +a.tutor-btn-link-gray, +.tutor-btn-link-gray { + @include tutor-button-variant(link-gray); +} + +button.tutor-btn-link-destructive, +a.tutor-btn-link-destructive, +.tutor-btn-link-destructive { + @include tutor-button-variant(link-destructive); +} + +// Button sizes +button.tutor-btn-x-small, +a.tutor-btn-x-small, +.tutor-btn-x-small { + @include tutor-button-size(x-small); + + &.tutor-btn-loading::before { + width: 12px; + height: 12px; + } +} + +button.tutor-btn-small, +a.tutor-btn-small, +.tutor-btn-small { + @include tutor-button-size(small); + + &.tutor-btn-loading::before { + width: 14px; + height: 14px; + } +} + +button.tutor-btn-medium, +a.tutor-btn-medium, +.tutor-btn-medium { + @include tutor-button-size(medium); +} + +button.tutor-btn-large, +a.tutor-btn-large, +.tutor-btn-large { + @include tutor-button-size(large); + + &.tutor-btn-loading::before { + width: 20px; + height: 20px; + } +} + +// Button states +.tutor-btn-loading { + @include tutor-button-loading; +} + +// Button with full width +button.tutor-btn-block, +a.tutor-btn-block, +.tutor-btn-block { + @include tutor-button-block(); +} + +// Button group +.tutor-btn-group { + @include tutor-button-group(horizontal); +} + +// Button group vertical +.tutor-btn-group-vertical { + @include tutor-button-group(vertical); +} + +// Icon-only button +button.tutor-btn-icon, +a.tutor-btn-icon, +.tutor-btn-icon { + flex-shrink: 0; + @include tutor-button-icon-size(medium); + + &.tutor-btn-x-small { + @include tutor-button-icon-size(x-small); + } + + &.tutor-btn-small { + @include tutor-button-icon-size(small); + } + + &.tutor-btn-large { + @include tutor-button-icon-size(large); + } +} \ No newline at end of file diff --git a/assets/core/scss/components/_calendar.scss b/assets/core/scss/components/_calendar.scss new file mode 100644 index 0000000000..23d30bad70 --- /dev/null +++ b/assets/core/scss/components/_calendar.scss @@ -0,0 +1,193 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-vc-calendar { + z-index: calc($tutor-z-highest + 1); + background-color: $tutor-surface-l1 !important; + border-radius: $tutor-radius-md !important; + + [data-vc='month'], + [data-vc='year'] { + @include tutor-typography('small', 'medium', 'primary'); + + &:hover { + color: $tutor-text-primary !important; + } + } + + [data-vc-week-day] { + @include tutor-typography('tiny', 'regular', 'secondary'); + color: $tutor-text-secondary !important; + } + + .vc-months__month.vc-months__month, + .vc-years__year.vc-years__year { + @include tutor-button-base(); + @include tutor-button-variant('ghost'); + color: $tutor-text-primary; + } + + [data-vc-months-month-selected], + [data-vc-years-year-selected] { + background-color: $tutor-surface-dark !important; + color: $tutor-text-primary-inverse !important; + } + + button { + box-shadow: none; + transition: none; + @include tutor-transition((background-color, color)); + } + + button[data-vc-arrow], + button[data-vc='month'], + button[data-vc='year'] { + background-color: transparent; + color: $tutor-text-primary; + + &:hover, + &:focus { + background-color: transparent; + color: $tutor-text-primary; + } + } + + button.vc-date__btn { + background-color: transparent; + font-size: $tutor-font-size-small; + color: $tutor-text-primary; + border-radius: $tutor-radius-md; + + &:hover { + background-color: $tutor-button-ghost-hover; + } + } + + .vc-date[data-vc-date-today] .vc-date__btn { + background-color: $tutor-button-ghost-hover !important; + color: $tutor-text-primary !important; + } + + .vc-date[data-vc-date-hover] .vc-date__btn { + background-color: $tutor-button-ghost-hover !important; + } + + .vc-date[data-vc-date-hover='last'] .vc-date__btn { + background-color: $tutor-button-secondary-hover !important; + } + + .vc-date[data-vc-date-selected] .vc-date__btn, + .vc-date[data-vc-date-selected] .vc-date__btn:hover { + background-color: $tutor-surface-dark !important; + color: $tutor-text-primary-inverse !important; + } + + .vc-date[data-vc-date-selected='middle'][data-vc-date-selected] .vc-date__btn { + background-color: $tutor-surface-l1-hover !important; + color: $tutor-text-primary !important; + } +} + +.tutor-range-calendar-popover { + width: 700px; + max-width: 700px; + + @include tutor-breakpoint-down(md) { + width: 300px; + } + + [data-vc='calendar'] { + display: grid; + grid-template-columns: 150px 1fr; + grid-template-areas: + 'presets controls' + 'presets grid' + 'presets time' + 'presets footer'; + column-gap: $tutor-spacing-6; + padding: $tutor-spacing-5; + + @include tutor-breakpoint-down(md) { + grid-template-columns: 1fr; + grid-template-areas: + 'presets' + 'controls' + 'grid' + 'time' + 'footer'; + } + } + + button[data-vc-arrow] { + padding: $tutor-spacing-none; + } + + .vc-presets { + grid-area: presets; + @include tutor-flex(column); + + button { + @include tutor-button-reset(); + @include tutor-typography(tiny, medium); + @include tutor-flex(row, center, space-between); + border-radius: $tutor-radius-sm; + padding: $tutor-spacing-3 $tutor-spacing-5; + text-align: left; + + .vc-preset-icon { + opacity: 0; + transition: opacity 0.2s ease; + } + + &:hover { + background-color: $tutor-tab-sidebar-l2-hover; + } + + &[data-active] { + background-color: $tutor-tab-sidebar-l2-active; + color: $tutor-text-brand; + + .vc-preset-icon { + opacity: 1; + } + } + } + + @include tutor-breakpoint-down(md) { + flex-direction: row; + flex-wrap: wrap; + border-bottom: 1px solid $tutor-border-idle; + padding-bottom: $tutor-spacing-4; + margin-bottom: $tutor-spacing-4; + + button { + width: 50%; + } + } + } + + .vc-controls { + grid-area: controls; + padding: $tutor-spacing-2 $tutor-spacing-none $tutor-spacing-none $tutor-spacing-none; + } + + .vc-grid { + grid-area: grid; + display: flex; + gap: $tutor-spacing-6; + + @include tutor-breakpoint-down(md) { + .vc-column:nth-child(n+2) { + display: none; + } + } + } + + [data-vc='time'] { + grid-area: time; + } + + .vc-footer { + grid-area: footer; + } +} diff --git a/assets/core/scss/components/_card.scss b/assets/core/scss/components/_card.scss new file mode 100644 index 0000000000..9e8f6af6f0 --- /dev/null +++ b/assets/core/scss/components/_card.scss @@ -0,0 +1,37 @@ +// Card Component +// Base card styles using mixins + +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-card { + @include tutor-card-base; + @include tutor-card-padding(medium); + @include tutor-card-radius(lg); +} + +// Padding modifiers +.tutor-card-padding-small { + @include tutor-card-padding(small); +} + +.tutor-card-padding-medium { + @include tutor-card-padding(medium); +} + +.tutor-card-padding-large { + @include tutor-card-padding(large); +} + +// Border radius modifiers +.tutor-card-rounded-md { + @include tutor-card-radius(md); +} + +.tutor-card-rounded-lg { + @include tutor-card-radius(lg); +} + +.tutor-card-rounded-2xl { + @include tutor-card-radius(2xl); +} \ No newline at end of file diff --git a/assets/core/scss/components/_file-uploader.scss b/assets/core/scss/components/_file-uploader.scss new file mode 100644 index 0000000000..764a8feb25 --- /dev/null +++ b/assets/core/scss/components/_file-uploader.scss @@ -0,0 +1,95 @@ +@use '../tokens/' as *; +@use '../mixins/' as *; + +.tutor-file-uploader { + @include tutor-flex(column, center, center); + min-height: 228px; + background-color: $tutor-surface-brand-tertiary; + background-image: $tutor-file-uploader-background-image; + border-radius: $tutor-input-radius; + padding: $tutor-spacing-6; + cursor: pointer; + position: relative; + @include tutor-transition(); + + &.tutor-file-uploader-drag-over { + background-color: $tutor-surface-brand-secondary; + } + + &.tutor-file-uploader-disabled { + cursor: not-allowed; + pointer-events: none; + } + + &-icon { + @include tutor-flex(row, center, center); + color: $tutor-icon-hover; + margin-bottom: $tutor-spacing-6; + } + + &-content { + @include tutor-flex(column, center, center); + gap: $tutor-spacing-2; + text-align: center; + margin-bottom: $tutor-spacing-8; + } + + &-title { + @include tutor-typography(small, medium, primary); + margin: 0; + } + + &-subtitle { + @include tutor-typography(tiny, regular, subdued); + margin: 0; + } + + &-input { + position: absolute; + width: 0; + height: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + } +} + +.tutor-file-preview { + @include tutor-flex(row, center, center); + position: relative; + width: 100%; + min-height: 228px; + border-radius: $tutor-radius-md; + overflow: hidden; + background-color: $tutor-surface-brand-tertiary; + + img { + max-width: 100%; + height: auto; + object-fit: contain; + } + + &-overlay { + @include tutor-flex(row, center, center); + position: absolute; + inset: 0; + background-color: rgba($color: $tutor-surface-dark, $alpha: 0.8); + opacity: 0; + pointer-events: none; + backdrop-filter: blur(4px); + @include tutor-transition(opacity); + } + + &:hover { + .tutor-file-preview-overlay { + opacity: 1; + pointer-events: auto; + } + } + + &-actions { + @include tutor-flex(row, center, center); + gap: $tutor-spacing-3; + } +} diff --git a/assets/core/scss/components/_index.scss b/assets/core/scss/components/_index.scss new file mode 100644 index 0000000000..1cc2c9a217 --- /dev/null +++ b/assets/core/scss/components/_index.scss @@ -0,0 +1,30 @@ +@forward 'accordion'; +@forward 'alert'; +@forward 'button'; +@forward 'card'; +@forward 'input'; +@forward 'modal'; +@forward 'popover'; +@forward 'progress'; +@forward 'preview-trigger'; +@forward 'section-separator'; +@forward 'skeleton'; +@forward 'statics'; +@forward 'tabs'; +@forward 'nav'; +@forward 'toast'; +@forward 'tooltip'; +@forward 'file-uploader'; +@forward 'badge'; +@forward 'result-badge'; +@forward 'pagination'; +@forward 'file-uploader'; +@forward 'table'; +@forward 'avatar'; +@forward 'select'; +@forward 'attachment-card'; +@forward 'calendar'; +@forward 'loading-spinner'; +@forward 'time-input'; +@forward 'status-select'; +@forward 'star-rating'; diff --git a/assets/core/scss/components/_input.scss b/assets/core/scss/components/_input.scss new file mode 100644 index 0000000000..1fbfa0754d --- /dev/null +++ b/assets/core/scss/components/_input.scss @@ -0,0 +1,285 @@ +@use '../mixins' as *; +@use '../tokens' as *; + +.tutor-input-field { + position: relative; + width: 100%; + + .tutor-input-wrapper { + position: relative; + @include tutor-flex(row, center, flex-start); + gap: $tutor-spacing-3; + + .tutor-label { + margin: 0; + } + + .tutor-checkbox, + .tutor-radio, + .tutor-switch { + margin: 0; + } + } + + .tutor-input { + @include tutor-input-base; + + &.tutor-input-content { + &-left { + @include padding-start($tutor-spacing-10); + } + + &-right { + @include padding-end($tutor-spacing-10); + } + + &-clear { + @include padding-end(36px); + } + } + + &-sm { + @include tutor-input-base(sm); + } + + &-lg { + @include tutor-input-base(lg); + } + } + + .tutor-text-area { + @include tutor-textarea; + } + + .tutor-wp-editor-container { + + .wp-editor-container, + .mce-tinymce { + border-radius: $tutor-input-radius; + border-color: $tutor-border-idle; + } + + .mce-panel { + background-color: $tutor-surface-l1 !important; + border-color: $tutor-border-idle !important; + } + + .wp-editor-area { + background-color: $tutor-surface-l1; + color: $tutor-text-primary; + } + + .wp-editor-tabs { + .wp-switch-editor { + background-color: $tutor-surface-l2; + color: $tutor-text-secondary; + border-color: $tutor-border-idle; + + &:hover { + background-color: $tutor-surface-l1-hover; + } + + &.wp-switch-editor-active { + background-color: $tutor-surface-l1; + color: $tutor-text-primary; + } + } + } + + .mce-toolbar-grp, + .quicktags-toolbar { + border-top-left-radius: $tutor-input-radius; + border-top-right-radius: $tutor-input-radius; + } + + .mce-toolbar:last-of-type { + border-top: none; + } + + .mce-statusbar { + border-bottom-left-radius: $tutor-input-radius; + border-bottom-right-radius: $tutor-input-radius; + background-color: $tutor-surface-l1; + border-top-color: $tutor-border-idle; + } + + .mce-btn { + background-color: transparent !important; + + button { + color: $tutor-icon-secondary; + + .mce-ico { + color: $tutor-icon-secondary; + } + } + + &:hover, + &.mce-active { + background-color: $tutor-surface-l1-hover !important; + border-color: transparent !important; + + button { + color: $tutor-icon-hover; + + .mce-ico { + color: $tutor-icon-hover; + } + } + } + + &.mce-active { + background-color: $tutor-surface-l2-hover !important; + } + } + } + + .tutor-checkbox { + @include tutor-checkbox; + + &-md { + @include tutor-checkbox(md); + } + + &-intermediate { + @include tutor-checkbox(md, true); + } + } + + .tutor-radio { + @include tutor-radio; + + &-md { + @include tutor-radio(md); + } + } + + .tutor-switch { + @include tutor-switch; + + &-md { + @include tutor-switch(md); + } + } + + .tutor-label { + @include tutor-typography('small', 'medium'); + @include tutor-flex(row, center); + gap: $tutor-spacing-3; + margin-bottom: $tutor-spacing-3; + + &-required { + &::after { + content: '*'; + color: $tutor-text-critical; + margin-left: $tutor-spacing-1; + } + } + } + + .tutor-input-help-icon { + @include tutor-button-reset; + @include tutor-flex(row, center, center); + color: $tutor-icon-subdued; + cursor: help; + } + + .tutor-input-clear-button { + @include tutor-flex(row, center, center); + @include tutor-button-base; + @include tutor-button-variant('ghost'); + padding: $tutor-spacing-1; + border-radius: $tutor-radius-sm; + flex-shrink: 0; + position: absolute; + @include right($tutor-spacing-5); + top: 50%; + transform: translateY(-50%); + color: $tutor-icon-idle; + } + + .tutor-input-content { + position: absolute; + top: 50%; + transform: translateY(-50%); + @include tutor-flex(row, center, center); + color: $tutor-icon-secondary; + pointer-events: none; + + &.tutor-input-content-left { + @include left($tutor-spacing-5); + } + + &.tutor-input-content-right { + @include right($tutor-spacing-5); + } + + .tutor-input-password-toggle { + @include tutor-button-reset; + pointer-events: auto; + cursor: pointer; + color: inherit; + + &:hover { + color: $tutor-icon-hover; + } + } + } + + .tutor-input-wrapper:has(.tutor-input-sm) { + .tutor-input.tutor-input-content-left { + @include padding-start($tutor-spacing-9); + } + + .tutor-input.tutor-input-content-right { + @include padding-end($tutor-spacing-9); + } + + .tutor-input-content-left { + @include left($tutor-spacing-4); + } + + &.tutor-input-content-right { + @include right($tutor-spacing-4); + } + } + + .tutor-error-text { + @include tutor-typography('tiny', 'regular', 'critical'); + } + + .tutor-help-text { + @include tutor-typography('tiny', 'regular', 'subdued'); + } + + .tutor-error-text, + .tutor-help-text { + &:not(:empty) { + margin-top: $tutor-spacing-3; + } + } + + &-error { + .tutor-input { + border: 1px solid $tutor-border-error; + --tutor-input-border-shadow-current: none; + box-shadow: $tutor-shadow-xs; + + &:focus { + @include tutor-focus-ring('error'); + border-color: $tutor-border-error; + } + } + + .tutor-wp-editor-container { + outline: 1px solid $tutor-border-error; + border-radius: $tutor-input-radius; + box-shadow: $tutor-shadow-xs; + + &:focus { + @include tutor-focus-ring('error'); + border-color: $tutor-border-error; + } + } + } +} \ No newline at end of file diff --git a/assets/core/scss/components/_loading-spinner.scss b/assets/core/scss/components/_loading-spinner.scss new file mode 100644 index 0000000000..cee12773bf --- /dev/null +++ b/assets/core/scss/components/_loading-spinner.scss @@ -0,0 +1,9 @@ +@use '../tokens/' as *; +@use '../mixins/' as *; + +.tutor-loading-spinner { + @include tutor-flex(); + @include tutor-loading-spinner(); + padding: $tutor-spacing-8; + position: relative; +} diff --git a/assets/core/scss/components/_modal.scss b/assets/core/scss/components/_modal.scss new file mode 100644 index 0000000000..542ce102ad --- /dev/null +++ b/assets/core/scss/components/_modal.scss @@ -0,0 +1,122 @@ +@use '../tokens' as *; +@use '../mixins' as *; +@use '../mixins/rtl' as rtl; +@use '../components/button' as *; + +.tutor-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: $tutor-z-highest; + display: flex; + align-items: center; + justify-content: center; + + &-backdrop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #00000099; + backdrop-filter: blur(20px); + + // Transitions + &-enter { + @include tutor-transition(opacity, 150ms, ease-out); + } + + &-transition { + opacity: 0; + } + + &-transition-reset { + opacity: 1; + } + + &-leave { + @include tutor-transition(opacity, 150ms, ease-in); + } + } + + &-content { + position: relative; + width: 100%; + max-width: 500px; + max-height: calc(100dvh - 40px); + background-color: $tutor-surface-l1; + border-radius: $tutor-modal-radius; + box-shadow: $tutor-modal-shadow; + overflow-y: auto; + + // Transitions + &-enter { + @include tutor-transition((opacity, transform), 150ms, ease-out); + } + + &-transition { + opacity: 0; + transform: translateY(16px) scale(0.95); + } + + &-transition-reset { + opacity: 1; + transform: translateY(0) scale(1); + } + + &-leave { + @include tutor-transition((opacity, transform), 150ms, ease-in); + } + } + + &-header { + @include tutor-flex(column); + gap: $tutor-spacing-2; + padding: $tutor-spacing-7 $tutor-spacing-7 $tutor-spacing-none $tutor-spacing-7; + } + + &-title { + @include tutor-typography('h5', 'semibold', 'secondary', 'heading'); + margin: 0; + } + + &-subtitle { + @include tutor-typography('p3', 'regular', 'secondary', 'body'); + } + + &-body { + padding: $tutor-spacing-7; + } + + &-close { + @include tutor-button-base; + @include tutor-button-icon-size(x-small); + @include tutor-button-variant(ghost); + position: absolute; + top: $tutor-spacing-4; + right: $tutor-spacing-4; + + svg { + color: $tutor-icon-idle !important; + } + } + + &-footer { + @include tutor-flex(row, center, flex-end); + gap: $tutor-spacing-4; + padding: $tutor-spacing-5 $tutor-spacing-7; + border-top: 1px solid $tutor-border-idle; + } +} + +@include tutor-breakpoint-down(md) { + .tutor-modal { + padding: $tutor-spacing-6; + + &-content { + max-height: 95vh; + } + } +} diff --git a/assets/core/scss/components/_nav.scss b/assets/core/scss/components/_nav.scss new file mode 100644 index 0000000000..cc90542aaa --- /dev/null +++ b/assets/core/scss/components/_nav.scss @@ -0,0 +1,156 @@ +// Dashboard Page Nav Styles + +@use '@Core/scss/tokens' as *; +@use '@Core/scss/mixins' as *; + +.tutor-nav { + @include tutor-flex(row, center); + gap: $tutor-spacing-2; + overflow-x: auto; + + button.tutor-nav-item, + .tutor-nav-item { + @include tutor-button-reset(); + @include tutor-typography(small, medium, secondary); + @include tutor-flex(row, center); + border-radius: $tutor-tab-radius; + font-weight: $tutor-tab-font-weight; + box-shadow: none; + gap: $tutor-spacing-3; + padding: 10px $tutor-spacing-6; + height: $tutor-tab-height; + white-space: nowrap; + @include tutor-transition((background-color, color, box-shadow)); + + &:hover { + color: $tutor-text-brand; + background-color: $tutor-tab-l3-active; + box-shadow: $tutor-tab-active-shadow; + } + + &:focus { + color: $tutor-text-brand; + background-color: $tutor-tab-l3-active; + box-shadow: none; + outline: none; + } + + &:focus-visible { + @include tutor-focus-ring('brand', true); + outline-offset: -2px; + } + + &.active { + background-color: $tutor-tab-l3-active; + color: $tutor-text-brand; + box-shadow: $tutor-tab-active-shadow; + } + + svg { + flex-shrink: 0; + } + } + + &-dropdown { + @include tutor-flex(column); + gap: $tutor-spacing-2; + min-width: 170px; + padding: $tutor-spacing-2 0px; + + &-item { + @include tutor-button-reset(); + @include tutor-typography(small); + @include tutor-flex(row, center); + gap: $tutor-spacing-5; + padding: $tutor-spacing-4 $tutor-spacing-5; + @include tutor-transition((background-color, color)); + + &:hover { + color: $tutor-text-primary; + background-color: $tutor-tab-l3-active-hover; + } + + &:focus { + color: $tutor-text-primary; + box-shadow: none; + outline: none; + } + + &.active { + background-color: $tutor-tab-l3-active; + color: $tutor-text-brand; + + &:hover { + background-color: $tutor-tab-l3-active; + color: $tutor-text-brand; + + svg { + color: $tutor-icon-brand; + } + } + } + } + } + + // Variant styles + &.tutor-nav-secondary { + .tutor-nav-item { + border-bottom: 2px solid transparent; + @include tutor-transition((border-color, background-color)); + + &.active { + background-color: transparent; + border-bottom-color: $tutor-border-brand; + border-radius: $tutor-radius-none; + } + } + } + + // Size variants + &.tutor-nav-small { + .tutor-nav-item { + padding: 7px $tutor-spacing-5; + border-radius: $tutor-tab-radius-sm; + height: $tutor-tab-height-sm; + } + + .tutor-nav-dropdown { + min-width: 150px; + } + } + + &.tutor-nav-large { + .tutor-nav-item { + gap: $tutor-spacing-4; + padding: 11px $tutor-spacing-6; + height: $tutor-tab-height-lg; + } + + .tutor-nav-dropdown { + min-width: 200px; + + .tutor-nav-dropdown-item { + padding: $tutor-spacing-5 $tutor-spacing-6; + } + } + } + + @include tutor-breakpoint-down(sm) { + gap: 0; + + .tutor-nav-item { + flex: 1; + min-width: fit-content; + justify-content: center; + font-size: $tutor-font-size-tiny; + line-height: $tutor-line-height-medium; + padding: $tutor-spacing-4 $tutor-spacing-5; + border-radius: $tutor-tab-radius; + + svg { + width: 16px; + height: 16px; + } + } + } +} diff --git a/assets/core/scss/components/_pagination.scss b/assets/core/scss/components/_pagination.scss new file mode 100644 index 0000000000..840e7aa12f --- /dev/null +++ b/assets/core/scss/components/_pagination.scss @@ -0,0 +1,33 @@ +// Pagination scss + +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-pagination { + @include tutor-pagination-base; +} + +.tutor-pagination-info { + @include tutor-pagination-info; +} + +.tutor-pagination-list { + @include tutor-pagination-list; +} + +.tutor-pagination-item { + @include tutor-pagination-item; + + &-active { + @include tutor-pagination-item-variant(active); + } + + &-prev, + &-next { + @include tutor-pagination-item-variant(prev-next); + } +} + +.tutor-pagination-ellipsis { + @include tutor-pagination-ellipsis; +} \ No newline at end of file diff --git a/assets/core/scss/components/_popover.scss b/assets/core/scss/components/_popover.scss new file mode 100644 index 0000000000..ea11909105 --- /dev/null +++ b/assets/core/scss/components/_popover.scss @@ -0,0 +1,138 @@ +// Popover Component +// RTL-aware popover positioning and styling with collision detection + +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-popover { + position: fixed; + z-index: $tutor-z-dropdown; + max-width: 276px; + background-color: $tutor-surface-l1; + border: $tutor-popover-border; + border-radius: $tutor-popover-radius; + box-shadow: $tutor-popover-shadow; + overflow: hidden; + + &-header { + padding: $tutor-spacing-4 $tutor-spacing-4 0; + + .tutor-popover-title { + @include tutor-typography(p1, semibold, primary); + margin: 0; + } + + .tutor-popover-close { + position: absolute; + top: $tutor-spacing-2; + right: $tutor-spacing-2; + width: 24px; + height: 24px; + padding: 0; + border: none; + background: none; + border-radius: $tutor-radius-5xl; + color: $tutor-icon-idle; + cursor: pointer; + @include tutor-transition(); + + @include tutor-flex-center(); + + [dir='rtl'] & { + right: auto; + left: $tutor-spacing-2; + } + + &:hover, + &:focus { + background-color: $tutor-surface-l2; + color: $tutor-icon-hover; + outline: none; + } + } + } + + &-body { + @include tutor-typography(p2, regular, primary); + padding: $tutor-spacing-4; + } + + &-footer { + padding: $tutor-spacing-4; + border-top: 1px solid $tutor-border-idle; + margin-top: $tutor-spacing-4; + + @include tutor-flex(row, center, flex-end); + gap: $tutor-spacing-2; + + [dir='rtl'] & { + justify-content: flex-start; + flex-direction: row-reverse; + } + } + + .tutor-popover-menu { + min-width: 170px; + padding: $tutor-spacing-3 0; + + .tutor-popover-menu-item { + width: 100%; + @include tutor-button-reset(); + @include tutor-flex(row, center, flex-start); + @include tutor-typography(small); + @include tutor-text-truncate(); + gap: $tutor-spacing-5; + padding: $tutor-spacing-4 $tutor-spacing-5; + @include tutor-transition((color, background-color)); + + svg { + flex-shrink: 0; + } + + &:hover, + &:focus { + color: $tutor-text-primary; + background-color: $tutor-tab-sidebar-l2-hover; + } + + &.tutor-active { + background-color: $tutor-tab-sidebar-l2-active; + color: $tutor-text-brand; + opacity: 1; + } + } + } + + // Size variants + &-sm { + max-width: 200px; + font-size: $tutor-font-size-p3; + } + + &-lg { + max-width: 400px; + } + + &-xl { + max-width: 500px; + } + + // Hidden by default + &[x-cloak] { + display: none !important; + } +} + +// Responsive adjustments +@media (max-width: 576px) { + .tutor-popover { + max-width: calc(100vw - 56px); + + &-header, + &-body, + &-footer { + padding-left: $tutor-spacing-3; + padding-right: $tutor-spacing-3; + } + } +} \ No newline at end of file diff --git a/assets/core/scss/components/_preview-trigger.scss b/assets/core/scss/components/_preview-trigger.scss new file mode 100644 index 0000000000..5c3e0b43ab --- /dev/null +++ b/assets/core/scss/components/_preview-trigger.scss @@ -0,0 +1,130 @@ +// Preview Trigger Component +// Styles for course/lesson preview on hover + +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-preview-trigger { + display: inline-flex; + vertical-align: middle; + max-width: 100%; + min-width: 0; + width: 100%; + position: relative; + + &-text { + font-style: italic; + text-decoration: underline dashed $tutor-border-hover; + text-underline-offset: 4px; + color: $tutor-text-secondary; + cursor: pointer; + @include tutor-transition(color); + padding-inline-end: $tutor-spacing-1; + + &:focus { + outline: none; + } + + &:focus-visible { + @include tutor-focus-ring('brand', true); + outline-offset: 2px; + border-radius: $tutor-radius-sm; + } + + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + vertical-align: bottom; + } +} + +.tutor-preview-card { + background: $tutor-surface-l1; + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-2xl; + box-shadow: $tutor-shadow-lg; + padding: $tutor-spacing-4 $tutor-spacing-4 $tutor-spacing-5 $tutor-spacing-4; + width: 194px; + max-width: calc(100vw - 16px); + overflow: hidden; + animation: tutor-preview-fade-in 0.2s ease; +} + +.tutor-preview-card-content { + display: flex; + flex-direction: column; + gap: $tutor-spacing-4; +} + +.tutor-preview-card-thumbnail { + width: 100%; + height: 90px; + border-radius: $tutor-radius-md; + object-fit: cover; + display: block; +} + +.tutor-preview-card-body { + display: flex; + flex-direction: column; + gap: $tutor-spacing-1; +} + +.tutor-preview-card-title { + @include tutor-typography(p2, medium, primary, heading); + margin: 0; + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + + a { + text-decoration: none; + color: inherit; + @include tutor-transition(color); + + &:hover { + color: $tutor-text-brand; + } + + &:focus-visible { + @include tutor-focus-ring('brand', true); + outline-offset: 2px; + border-radius: $tutor-radius-sm; + } + } +} + +.tutor-preview-card-instructor { + @include tutor-typography(tiny, regular, subdued); + + a { + color: $tutor-text-secondary; + text-decoration: none; + @include tutor-transition(color); + + &:hover { + color: $tutor-text-brand; + } + + &:focus-visible { + @include tutor-focus-ring('brand', true); + outline-offset: 2px; + border-radius: $tutor-radius-sm; + } + } +} + +@keyframes tutor-preview-fade-in { + from { + opacity: 0; + transform: translateY(-8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/assets/core/scss/components/_progress.scss b/assets/core/scss/components/_progress.scss new file mode 100644 index 0000000000..01992def57 --- /dev/null +++ b/assets/core/scss/components/_progress.scss @@ -0,0 +1,94 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-progress-bar { + width: 100%; + height: $tutor-progress-height; + background-color: $tutor-actions-gray-secondary; + box-shadow: inset 0 0 1.75px rgba(0, 0, 0, 0.16); + border-radius: $tutor-radius-full; + overflow: hidden; + position: relative; + + &-fill { + --tutor-progress-width: 0%; + --tutor-progress-start: 0%; + height: 100%; + width: 100%; + transform: translateX(calc(var(--tutor-progress-width) - 100%)); + background-color: $tutor-actions-success-primary; + border-radius: inherit; + position: relative; + @include tutor-transition(transform, 0.3s); + + &::before { + content: ''; + position: absolute; + top: $tutor-progress-indicator-top; + right: $tutor-spacing-2; + height: $tutor-progress-indicator-height; + width: 8.16px; + background-color: $tutor-actions-success-secondary; + border-radius: inherit; + opacity: 0.4; + } + + &::after { + content: ''; + display: $tutor-progress-indicator-secondary-display; + position: absolute; + top: $tutor-progress-indicator-top; + left: $tutor-spacing-2; + right: calc(#{$tutor-spacing-2} + 8.16px + 1px); + height: $tutor-progress-indicator-height; + background-color: $tutor-actions-success-secondary; + border-radius: inherit; + opacity: 0.4; + } + } + + &.tutor-progress-bar-brand { + background-color: $tutor-actions-gray-secondary; + + .tutor-progress-bar-fill { + background-color: $tutor-actions-brand-primary; + + &::before { + background-color: $tutor-actions-brand-secondary; + } + + &::after { + background-color: $tutor-actions-brand-secondary; + } + } + } + + &.tutor-progress-bar-warning { + background-color: $tutor-actions-warning-tertiary; + + .tutor-progress-bar-fill { + background-color: $tutor-actions-warning-primary; + + &::before { + background-color: $tutor-actions-warning-tertiary; + } + + &::after { + background-color: $tutor-actions-warning-tertiary; + } + } + } + + &[data-tutor-animated] .tutor-progress-bar-fill { + animation: tutor-progress-fill-animate 1s ease-out forwards; + } +} + +@keyframes tutor-progress-fill-animate { + from { + transform: translateX(calc(var(--tutor-progress-start, 0%) - 100%)); + } + to { + transform: translateX(calc(var(--tutor-progress-width) - 100%)); + } +} diff --git a/assets/core/scss/components/_result-badge.scss b/assets/core/scss/components/_result-badge.scss new file mode 100644 index 0000000000..ab3ee63bb6 --- /dev/null +++ b/assets/core/scss/components/_result-badge.scss @@ -0,0 +1,41 @@ +// Result badge style for Quiz + +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-result-badge { + @include tutor-typography(medium, medium); + width: fit-content; + border: 1px solid; + border-radius: $tutor-radius-full; + padding-inline-start: $tutor-spacing-8; + padding-inline-end: $tutor-spacing-4; + margin-inline-start: $tutor-spacing-4; + position: relative; + + @include tutor-breakpoint-down(sm) { + @include tutor-text(small); + } + + svg { + position: absolute; + left: -$tutor-spacing-4; + top: 50%; + transform: translateY(-50%); + } + + &.passed { + color: $tutor-text-success; + border-color: $tutor-border-success-secondary; + } + + &.pending { + color: $tutor-text-warning; + border-color: $tutor-border-warning-secondary; + } + + &.failed { + color: $tutor-text-critical; + border-color: $tutor-border-error-secondary; + } +} diff --git a/assets/core/scss/components/_section-separator.scss b/assets/core/scss/components/_section-separator.scss new file mode 100644 index 0000000000..6a4670c0db --- /dev/null +++ b/assets/core/scss/components/_section-separator.scss @@ -0,0 +1,25 @@ +// Section Separator Component +// Simple horizontal line for visual separation between sections + +@use '../tokens' as *; + +.tutor-section-separator { + width: 100%; + height: 1px; + background-color: $tutor-border-idle; + border: none; + margin: 0; + padding: 0; + flex-shrink: 0; +} + +.tutor-section-separator-vertical { + width: 1px; + height: 1.25rem; + background-color: $tutor-border-idle; + border: none; + margin: auto 0; + padding: 0; + flex-shrink: 0; + align-self: stretch; +} \ No newline at end of file diff --git a/assets/core/scss/components/_select.scss b/assets/core/scss/components/_select.scss new file mode 100644 index 0000000000..fe077a0095 --- /dev/null +++ b/assets/core/scss/components/_select.scss @@ -0,0 +1,364 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-select { + position: relative; + width: 100%; + @include tutor-typography(small); + + // Trigger button + .tutor-select-trigger { + @include tutor-flex(row, center, space-between); + width: 100%; + min-height: 40px; + gap: $tutor-spacing-3; + padding: $tutor-spacing-4 $tutor-spacing-5; + background-color: $tutor-surface-base; + border: 1px solid $tutor-border-idle; + border-color: $tutor-input-border-color; + border-radius: $tutor-input-radius; + --tutor-input-border-shadow-current: #{$tutor-input-border-shadow}; + box-shadow: var(--tutor-input-border-shadow-current); + cursor: pointer; + text-align: left; + @include tutor-transition(); + + &:hover, + &:focus { + @include tutor-focus-ring(); + border-color: $tutor-border-brand-tertiary; + background-color: $tutor-surface-l1; + --tutor-input-border-shadow-current: none; + } + + &:has(.tutor-select-value-text):not(:has(.tutor-select-value-placeholder)) { + background-color: $tutor-surface-l1; + } + + &[disabled] { + background-color: $tutor-surface-l1-hover; + cursor: not-allowed; + --tutor-input-border-shadow-current: none; + } + + .tutor-input-field-error & { + border: 1px solid $tutor-border-error; + box-shadow: $tutor-shadow-xs; + + &:focus { + @include tutor-focus-ring('error'); + border-color: $tutor-border-error; + } + } + } + + // Trigger content + &-value { + @include tutor-flex(row, center); + gap: $tutor-spacing-2; + flex: 1; + min-width: 0; + overflow: hidden; + + &-text { + @include tutor-typography(small); + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &-placeholder { + color: $tutor-text-subdued; + } + + &-icon { + flex-shrink: 0; + @include tutor-flex(row, center, center); + color: $tutor-icon-secondary; + width: 16px; + height: 16px; + } + } + + // Multiple selected items + &-tags { + @include tutor-flex(row, center); + gap: $tutor-spacing-2; + flex-wrap: wrap; + flex: 1; + min-width: 0; + } + + &-tag { + @include tutor-flex(row, center); + gap: $tutor-spacing-2; + padding: $tutor-spacing-1 $tutor-spacing-2; + background: $tutor-surface-l2; + border-radius: $tutor-radius-sm; + font-size: 12px; + line-height: 1.4; + max-width: 150px; + + &-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &-remove { + @include tutor-button-reset; + @include tutor-flex(row, center, center); + padding: 0; + color: $tutor-icon-secondary; + cursor: pointer; + @include tutor-transition(color); + + &:hover { + color: $tutor-icon-critical; + } + } + } + + // Actions (clear, arrow) + &-actions { + @include tutor-flex(row, center); + gap: $tutor-spacing-2; + flex-shrink: 0; + } + + .tutor-select-clear { + @include tutor-button-base; + @include tutor-button-variant('ghost'); + @include tutor-flex(row, center, center); + @include margin-end($tutor-spacing-2); + padding: $tutor-spacing-1; + border-radius: $tutor-radius-sm; + color: $tutor-icon-secondary; + cursor: pointer; + @include tutor-transition(color); + } + + &-arrow { + @include tutor-flex(row, center, center); + color: $tutor-icon-secondary; + @include tutor-transition(transform); + + &[data-open='true'] { + transform: rotate(180deg); + } + + // RTL: Mirror the arrow direction + [dir='rtl'] & { + transform: scaleX(-1); + + &[data-open='true'] { + transform: scaleX(-1) rotate(180deg); + } + } + } + + // Dropdown menu + &-menu { + position: absolute; + @include left(0); + @include right(0); + z-index: $tutor-z-dropdown; + background: $tutor-surface-l1; + border: $tutor-popover-border; + border-radius: $tutor-popover-radius; + box-shadow: $tutor-popover-shadow; + overflow: hidden; + display: flex; + flex-direction: column; + + &[data-position='bottom'] { + top: calc(100% + 4px); + } + + &[data-position='top'] { + bottom: calc(100% + 4px); + } + } + + // Search input + &-search { + position: relative; + padding: $tutor-spacing-4 $tutor-spacing-5; + border-bottom: 1px solid $tutor-border-idle; + flex-shrink: 0; + + &-icon { + position: absolute; + top: 50%; + @include left($tutor-spacing-7); + transform: translateY(-50%); + color: $tutor-icon-secondary; + pointer-events: none; + @include tutor-flex(row, center, center); + } + + .tutor-select-search-input { + @include tutor-input-base(); + padding-block: $tutor-spacing-3; + padding-inline-start: $tutor-spacing-9; + } + } + + // Options list + &-options { + overflow-y: auto; + max-height: 280px; + padding: $tutor-spacing-3 0; + + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: $tutor-border-idle; + border-radius: $tutor-radius-full; + + &:hover { + background: $tutor-icon-secondary; + } + } + } + + // Option group + &-group { + &-label { + padding: $tutor-spacing-3 $tutor-spacing-5; + @include tutor-typography(tiny, semibold, subdued); + text-transform: uppercase; + letter-spacing: 0.05em; + } + + &-options { + padding-bottom: $tutor-spacing-2; + } + } + + // Single option + &-option { + @include tutor-flex(row, center); + gap: $tutor-spacing-3; + padding: $tutor-spacing-4 $tutor-spacing-5; + cursor: pointer; + position: relative; + @include tutor-transition(background-color); + + &-icon { + flex-shrink: 0; + @include tutor-flex(row, center, center); + color: $tutor-icon-secondary; + width: 16px; + height: 16px; + } + + &-content { + flex: 1; + min-width: 0; + } + + &-label { + @include tutor-typography(small); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &-description { + @include tutor-typography(tiny, regular, subdued); + margin-top: $tutor-spacing-1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + // States + &:hover:not([data-disabled='true']) { + background: $tutor-surface-l2; + } + + &[data-highlighted='true']:not([data-disabled='true']) { + background: $tutor-surface-l2; + } + + &[data-selected='true'] { + background: $tutor-surface-l2; + } + + &[data-disabled='true'] { + color: $tutor-text-subdued; + cursor: not-allowed; + opacity: 0.5; + + &:hover { + background: transparent; + } + } + } + + // Empty state + &-empty { + @include tutor-typography(small, regular, subdued); + padding: $tutor-spacing-6 $tutor-spacing-5; + text-align: center; + } + + // Loading state + &-loading { + @include tutor-typography(small, regular, subdued); + @include tutor-flex(row, center, center); + gap: $tutor-spacing-3; + padding: $tutor-spacing-6 $tutor-spacing-5; + + &-spinner { + width: 16px; + height: 16px; + border: 2px solid $tutor-border-idle; + border-top-color: $tutor-border-brand-secondary; + border-radius: $tutor-radius-full; + animation: tutor-select-spin 0.6s linear infinite; + } + } +} + +// Animations +@keyframes tutor-select-spin { + to { + transform: rotate(360deg); + } +} + +// Size variants +.tutor-select-sm { + .tutor-select-trigger { + min-height: 32px; + padding: $tutor-spacing-2 $tutor-spacing-3; + @include tutor-typography(tiny); + } + + .tutor-select-option { + padding: $tutor-spacing-2 $tutor-spacing-4; + @include tutor-typography(tiny); + } +} + +.tutor-select-lg { + .tutor-select-trigger { + min-height: 48px; + padding: $tutor-spacing-5 $tutor-spacing-6; + @include tutor-typography(medium); + } + + .tutor-select-option { + padding: $tutor-spacing-4 $tutor-spacing-6; + @include tutor-typography(medium); + } +} \ No newline at end of file diff --git a/assets/core/scss/components/_skeleton.scss b/assets/core/scss/components/_skeleton.scss new file mode 100644 index 0000000000..51d27fbcff --- /dev/null +++ b/assets/core/scss/components/_skeleton.scss @@ -0,0 +1,37 @@ +@use '../tokens' as *; + +.tutor-skeleton { + display: block; + width: 100%; + height: $tutor-spacing-6; + border-radius: $tutor-radius-md; + background-color: rgba(0, 0, 0, 0.11); + position: relative; + mask-image: radial-gradient(white, black); + -webkit-mask-image: -webkit-radial-gradient(center, white, black); + overflow: hidden; + flex-shrink: 0; + + &::after { + content: ''; + background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent); + position: absolute; + transform: translateX(-100%); + inset: 0; + animation: var(--tutor-animation-duration, 1.6s) linear 0.5s infinite normal none running wave; + } + + &-round { + border-radius: $tutor-radius-full; + } +} + +@keyframes wave { + 0% { + transform: translateX(-100%); + } + + 100% { + transform: translateX(100%); + } +} \ No newline at end of file diff --git a/assets/core/scss/components/_star-rating.scss b/assets/core/scss/components/_star-rating.scss new file mode 100644 index 0000000000..a2e7615e78 --- /dev/null +++ b/assets/core/scss/components/_star-rating.scss @@ -0,0 +1,96 @@ +@use '@Core/scss/tokens' as *; +@use '@Core/scss/mixins' as *; + +.tutor-star-rating-container { + @include tutor-flex(row, center, space-between); + + button.tutor-star-rating-icon-btn { + @include tutor-button-reset(); + min-height: unset; + } + + &.is-emoji-view { + @include tutor-flex-column; + gap: $tutor-spacing-7; + + .tutor-star-rating-emoji-btn { + @include tutor-button-reset; + width: 74px; + height: 74px; + background-color: $tutor-surface-base; + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-2xl; + @include tutor-flex-column; + align-items: center; + justify-content: center; + cursor: pointer; + @include tutor-transition(background-color); + + .tutor-rating-emoji-img { + width: 32px; + height: 32px; + object-fit: contain; + } + + .tutor-rating-label { + @include tutor-typography(p3, medium, subdued); + } + + &:hover { + background-color: $tutor-surface-l1-hover; + } + + &.is-active { + &.is-poor { + background-color: $tutor-surface-critical; + border-color: $tutor-border-error-secondary; + + .tutor-rating-label { + color: $tutor-text-critical; + } + } + + &.is-fair { + background-color: $tutor-surface-warning-hover; + border-color: $tutor-border-warning-tertiary; + + .tutor-rating-label { + color: $tutor-text-warning; + } + } + + &.is-okay { + background-color: $tutor-surface-exception6; + border-color: $tutor-border-exception6; + + .tutor-rating-label { + color: $tutor-text-exception5; + } + } + + &.is-good { + background-color: $tutor-surface-brand-quaternary; + border-color: $tutor-border-brand; + + .tutor-rating-label { + color: $tutor-text-brand; + } + } + + &.is-amazing { + background-color: $tutor-surface-success; + border-color: $tutor-border-success-secondary; + + .tutor-rating-label { + color: $tutor-text-success; + } + } + } + + @include tutor-breakpoint-down(md) { + width: 54px; + height: 54px; + } + } + } +} diff --git a/assets/core/scss/components/_statics.scss b/assets/core/scss/components/_statics.scss new file mode 100644 index 0000000000..ec97eb0039 --- /dev/null +++ b/assets/core/scss/components/_statics.scss @@ -0,0 +1,44 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-statics { + @include tutor-flex(row, center, center); + position: relative; + width: fit-content; + + &-progress { + transform: rotate(-90deg); + + &-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + @include tutor-typography('tiny', 'bold', 'primary', 'body'); + + &-large { + @include tutor-typography('h1', 'bold', 'primary', 'heading'); + } + } + } + + &-complete { + @include tutor-flex(row, center, center); + border-radius: $tutor-radius-full; + background: $tutor-actions-brand-primary; + + svg { + color: $tutor-icon-idle-inverse; + } + } + + &-locked { + @include tutor-flex(row, center, center); + border-radius: $tutor-radius-full; + background: transparent; + + svg { + color: $tutor-icon-idle; + } + } +} \ No newline at end of file diff --git a/assets/core/scss/components/_status-select.scss b/assets/core/scss/components/_status-select.scss new file mode 100644 index 0000000000..3b9026ae8d --- /dev/null +++ b/assets/core/scss/components/_status-select.scss @@ -0,0 +1,85 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-status-select { + @include tutor-typography(tiny, medium); + display: inline-flex; + align-items: center; + justify-content: space-between; + gap: $tutor-spacing-2; + width: fit-content; + max-width: max-content; + border-radius: $tutor-radius-full; + padding: $tutor-spacing-none $tutor-spacing-4; + + select { + appearance: none; + background: transparent; + border: none; + outline: none; + width: 100%; + height: 32px; + padding: $tutor-spacing-none; + cursor: pointer; + z-index: $tutor-z-positive; + color: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + + &:focus { + box-shadow: none; + } + + &:disabled { + cursor: not-allowed; + } + } + + // Icons + &-icon, + &-arrow { + @include tutor-flex(row, center, center); + pointer-events: none; + z-index: $tutor-z-positive; + } + + &-icon { + &-wrapper, + span { + @include tutor-flex(row, center, center); + } + } + + // Variants based on badge logic + &-default { + background-color: $tutor-surface-l2; + color: $tutor-text-primary; + } + + &-primary { + background-color: $tutor-actions-brand-secondary; + color: $tutor-text-brand; + } + + &-success { + background-color: $tutor-actions-success-tertiary; + color: $tutor-text-success; + } + + &-warning { + background-color: $tutor-actions-warning-secondary; + color: $tutor-text-warning; + } + + &-danger, + &-error { + background-color: $tutor-actions-critical-secondary; + color: $tutor-text-critical; + } + + &-disabled { + background-color: $tutor-actions-gray-secondary; + color: $tutor-text-subdued; + } +} diff --git a/assets/core/scss/components/_table.scss b/assets/core/scss/components/_table.scss new file mode 100644 index 0000000000..6b1035267d --- /dev/null +++ b/assets/core/scss/components/_table.scss @@ -0,0 +1,85 @@ +// Table scss + +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-table-wrapper { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + + &.tutor-table-bordered { + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-lg; + } + + &.tutor-table-column-borders { + table, + .tutor-table { + thead th, + tbody td { + @include border-end(1px solid $tutor-border-idle); + &:last-of-type, + &:last-child { + @include border-end(none); + } + } + } + } + + table { + min-width: 600px; + width: 100%; + } +} + +table.tutor-table, +.tutor-table { + @include tutor-typography('small', 'regular', 'secondary'); + width: 100%; + margin: 0px; + border: none; + border-collapse: collapse; + border-spacing: 0; + background-color: $tutor-surface-l1; + + thead { + background-color: $tutor-surface-l1-hover; + + th { + @include tutor-typography(tiny, regular, secondary); + text-align: left; + padding: $tutor-spacing-5; + border: none; + white-space: nowrap; + border-bottom: 1px solid $tutor-border-idle; + } + } + + tbody { + tr { + border-bottom: 1px solid $tutor-border-idle; + + &:last-child { + border-bottom: none; + } + + &:hover { + background-color: $tutor-surface-l1-hover; + } + + &:nth-child(odd) { + > td { + background-color: transparent; + } + } + } + + td { + background-color: transparent; + padding: $tutor-spacing-5; + vertical-align: middle; + border: none; + } + } +} diff --git a/assets/core/scss/components/_tabs.scss b/assets/core/scss/components/_tabs.scss new file mode 100644 index 0000000000..31a8b00332 --- /dev/null +++ b/assets/core/scss/components/_tabs.scss @@ -0,0 +1,144 @@ +@use '../mixins' as *; +@use '../tokens' as *; +@use '../mixins/rtl' as rtl; + +button.tutor-tabs-tab, +.tutor-tabs-tab { + @include tutor-flex(row, center, flex-start); + @include tutor-typography('small'); + border-radius: $tutor-tab-radius; + font-weight: $tutor-tab-font-weight; + background: transparent; + border: none; + padding: $tutor-spacing-4 $tutor-spacing-6; + gap: $tutor-spacing-4; + text-transform: capitalize; + white-space: nowrap; + cursor: pointer; + color: $tutor-text-primary; + height: $tutor-tab-height; + box-shadow: none; + @include tutor-transition((background-color, color, box-shadow)); + margin: $tutor-spacing-none; + + @include tutor-breakpoint-down(sm) { + @include tutor-text('tiny'); + } + + &-active { + color: $tutor-text-brand; + background-color: $tutor-tab-l3-active; + box-shadow: $tutor-tab-active-shadow; + + svg { + color: $tutor-text-brand; + } + + &:focus, + &:hover { + box-shadow: none; + color: $tutor-text-brand; + background-color: $tutor-tab-l3-active; + box-shadow: $tutor-tab-active-shadow; + outline: none; + } + } + + &-md { + height: 34px; + @include tutor-text('tiny'); + padding: 7px $tutor-spacing-5; + gap: $tutor-spacing-2; + } + + &-sm { + @include tutor-text('tiny'); + padding: 6px $tutor-spacing-5; + gap: $tutor-spacing-2; + height: $tutor-tab-height-sm; + } + + &:hover:not(:disabled):not(.tutor-tabs-tab-active), + &:focus:not(:disabled):not(.tutor-tabs-tab-active) { + color: $tutor-text-primary; + background-color: $tutor-tab-l3-active-hover; + outline: none; + + svg { + color: $tutor-text-primary; + } + } + + &:disabled { + color: $tutor-text-subdued; + cursor: not-allowed; + + &:hover { + background-color: transparent; + } + } + + &:focus-visible { + @include tutor-focus-ring(); + } +} + +.tutor-tabs { + &-nav { + @include tutor-flex(row, center, flex-start); + gap: $tutor-spacing-2; + overflow-x: auto; + overflow-y: hidden; + position: relative; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + + [dir='rtl'] & { + flex-direction: row-reverse; + } + } + + &-content { + min-height: 100px; + } + + // Vertical variant + &-vertical { + @include tutor-flex(row, flex-start, flex-start); + + [dir='rtl'] & { + flex-direction: row-reverse; + } + + .tutor-tabs-nav { + @include tutor-flex-column; + align-items: stretch; + min-width: 200px; + } + + .tutor-tabs-content { + flex: 1; + min-width: 0; + } + } +} + +@include tutor-breakpoint-down(md) { + .tutor-tabs { + &-vertical { + display: unset; + flex-direction: column; + overflow-x: auto; + overflow-y: hidden; + + .tutor-tabs-nav { + flex-direction: row; + overflow-x: auto; + } + } + } +} diff --git a/assets/core/scss/components/_time-input.scss b/assets/core/scss/components/_time-input.scss new file mode 100644 index 0000000000..81c039468a --- /dev/null +++ b/assets/core/scss/components/_time-input.scss @@ -0,0 +1,50 @@ +@use '../tokens' as *; +@use '../mixins' as *; +@use '../mixins/typography' as *; + +.tutor-time-input { + @include tutor-typography('small', 'regular', 'primary', 'body'); + + .tutor-input { + &:disabled { + cursor: not-allowed; + background: $tutor-surface-l1-hover; + } + } + + .tutor-input-content { + color: $tutor-icon-secondary; + } + + &-menu { + max-height: 380px; + overflow-y: auto; + padding: $tutor-spacing-3 0; + background: $tutor-surface-l1; + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-lg; + box-shadow: $tutor-shadow-lg; + @include tutor-scrollbar; + } + + &-option { + @include tutor-button-reset; + @include tutor-typography('small', 'regular', 'subdued'); + text-align: start; + padding: $tutor-spacing-4; + border-radius: $tutor-radius-md; + margin: 0 $tutor-spacing-3; + width: calc(100% - (#{$tutor-spacing-3} * 2)); + + &:hover, + &[data-active='true'] { + background: $tutor-surface-l1-hover; + } + + &[data-selected='true'] { + background: $tutor-surface-brand-tertiary; + color: $tutor-text-brand; + outline: 1px solid $tutor-border-brand-tertiary; + } + } +} diff --git a/assets/core/scss/components/_toast.scss b/assets/core/scss/components/_toast.scss new file mode 100644 index 0000000000..e4953bc53f --- /dev/null +++ b/assets/core/scss/components/_toast.scss @@ -0,0 +1,435 @@ +@use '../tokens' as *; +@use '../mixins' as *; + +.tutor-toast-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.tutor-toast-container { + position: fixed !important; + z-index: $tutor-toast-z; + width: min(100vw - ($tutor-toast-offset-x * 2), $tutor-toast-max-width); + min-width: min($tutor-toast-min-width, calc(100vw - ($tutor-toast-offset-x * 2))); + pointer-events: none; + list-style: none; + margin: 0; + padding: 0; + outline: none; + + &[data-position-x='left'] { + left: $tutor-toast-offset-x; + } + + &[data-position-x='right'] { + right: $tutor-toast-offset-x; + } + + &[data-position-x='center'] { + left: 50%; + transform: translateX(-50%); + } + + &[data-position-y='top'] { + top: $tutor-toast-offset-y; + } + + &[data-position-y='bottom'] { + bottom: $tutor-toast-offset-y; + } +} + +[dir='rtl'] { + .tutor-toast-container[data-position-x='left'] { + left: auto; + right: $tutor-toast-offset-x; + } + + .tutor-toast-container[data-position-x='right'] { + right: auto; + left: $tutor-toast-offset-x; + } +} + +.tutor-toast-stack { + position: relative; + width: 100%; + height: var(--tutor-toast-front-height, 88px); + pointer-events: none; + transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.tutor-toast-item { + position: absolute; + inset-inline: 0; + bottom: 0; + pointer-events: none; + transition: + transform 400ms cubic-bezier(0.4, 0, 0.2, 1), + opacity 400ms ease, + height 400ms cubic-bezier(0.4, 0, 0.2, 1); + transform: translateY(var(--tutor-toast-y, 0px)) scale(var(--tutor-toast-scale, 1)); + opacity: var(--tutor-toast-opacity, 1); + + .tutor-toast-container[data-position-y='top'] & { + top: 0; + bottom: auto; + } + + &[data-front='true'] { + pointer-events: all; + z-index: 10; + } +} + +@keyframes tutor-toast-enter-from-bottom { + from { + transform: translateY(100%) scale(1); + opacity: 0; + } + + to { + transform: translateY(0) scale(1); + opacity: 1; + } +} + +@keyframes tutor-toast-enter-from-top { + from { + transform: translateY(-100%) scale(1); + opacity: 0; + } + + to { + transform: translateY(0) scale(1); + opacity: 1; + } +} + +.tutor-toast-item[data-entering][data-position-y='bottom'] { + animation: tutor-toast-enter-from-bottom $tutor-toast-animation-enter cubic-bezier(0.34, 1.4, 0.64, 1) forwards; +} + +.tutor-toast-item[data-entering][data-position-y='top'] { + animation: tutor-toast-enter-from-top $tutor-toast-animation-enter cubic-bezier(0.34, 1.4, 0.64, 1) forwards; +} + +@keyframes tutor-toast-exit-to-bottom { + from { + opacity: 1; + } + + to { + transform: translateY(calc(100% + $tutor-toast-offset-y)); + opacity: 0; + } +} + +@keyframes tutor-toast-exit-to-top { + from { + opacity: 1; + } + + to { + transform: translateY(calc(-100% - $tutor-toast-offset-y)); + opacity: 0; + } +} + +.tutor-toast-item[data-exiting][data-position-y='bottom'] { + animation: tutor-toast-exit-to-bottom $tutor-toast-animation-exit ease forwards; + pointer-events: none; +} + +.tutor-toast-item[data-exiting][data-position-y='top'] { + animation: tutor-toast-exit-to-top $tutor-toast-animation-exit ease forwards; + pointer-events: none; +} + +@keyframes tutor-toast-swipe-right { + to { + transform: translateX(calc(100% + 40px)); + opacity: 0; + } +} + +@keyframes tutor-toast-swipe-left { + to { + transform: translateX(calc(-100% - 40px)); + opacity: 0; + } +} + +.tutor-toast-item[data-swipe-out='right'] { + animation: tutor-toast-swipe-right 240ms ease forwards; + pointer-events: none; +} + +.tutor-toast-item[data-swipe-out='left'] { + animation: tutor-toast-swipe-left 240ms ease forwards; + pointer-events: none; +} + +.tutor-toast-item[data-swiping='true'] { + transition: none; +} + +.tutor-toast-item[data-front='false']:not([data-expanded]) > .tutor-toast-card > * { + opacity: 0; + transition: opacity 400ms; +} + +.tutor-toast-item[data-front='true'] > .tutor-toast-card > *, +.tutor-toast-item[data-expanded] > .tutor-toast-card > * { + opacity: 1; + transition: opacity 400ms; +} + +.tutor-toast-card { + position: relative; + display: flex; + align-items: center; + gap: $tutor-toast-gap; + width: 100%; + padding: $tutor-toast-padding; + border: 1px solid $tutor-toast-border; + border-radius: $tutor-toast-radius; + background: $tutor-toast-background; + box-shadow: $tutor-toast-shadow; + color: $tutor-toast-text; + font-family: $tutor-toast-font; + overflow: hidden; + cursor: grab; + + &:active { + cursor: grabbing; + } + + &[data-type='default'] { + background: $tutor-toast-default-background; + border-color: $tutor-toast-default-border; + color: $tutor-toast-default-text; + } + + &[data-type='success'] { + color: $tutor-toast-success-text; + } + + &[data-type='error'] { + color: $tutor-toast-error-text; + } + + &[data-type='warning'] { + color: $tutor-toast-warning-text; + } + + &[data-type='info'] { + color: $tutor-toast-info-text; + } + + &[data-type='loading'] { + color: $tutor-toast-loading-text; + } + + &[data-rich-colors][data-type='success'] { + background: $tutor-toast-success-background; + border-color: $tutor-toast-success-border; + } + + &[data-rich-colors][data-type='error'] { + background: $tutor-toast-error-background; + border-color: $tutor-toast-error-border; + } + + &[data-rich-colors][data-type='warning'] { + background: $tutor-toast-warning-background; + border-color: $tutor-toast-warning-border; + } + + &[data-rich-colors][data-type='info'] { + background: $tutor-toast-info-background; + border-color: $tutor-toast-info-border; + } + + &[data-rich-colors][data-type='loading'] { + background: $tutor-toast-loading-background; + border-color: $tutor-toast-loading-border; + } +} + +.tutor-toast-icon { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + inline-size: $tutor-toast-icon-size; + block-size: $tutor-toast-icon-size; + border: 1px solid transparent; + border-radius: $tutor-radius-full; + background: $tutor-toast-default-background; + color: $tutor-toast-info-icon; + + .tutor-toast-card[data-type='success'] & { + color: $tutor-toast-success-icon; + border-color: $tutor-toast-success-border; + background: $tutor-toast-success-background; + } + + .tutor-toast-card[data-type='error'] & { + color: $tutor-toast-error-icon; + border-color: $tutor-toast-error-border; + background: $tutor-toast-error-background; + } + + .tutor-toast-card[data-type='warning'] & { + color: $tutor-toast-warning-icon; + border-color: $tutor-toast-warning-border; + background: $tutor-toast-warning-background; + } + + .tutor-toast-card[data-type='info'] & { + color: $tutor-toast-info-icon; + border-color: $tutor-toast-info-border; + background: $tutor-toast-info-background; + } + + .tutor-toast-card[data-type='loading'] & { + color: $tutor-toast-loading-icon; + border-color: $tutor-toast-loading-border; + background: $tutor-toast-loading-background; + } + + .tutor-toast-card[data-type='default'] & { + color: $tutor-toast-default-icon; + border-color: $tutor-toast-default-border; + background: $tutor-toast-default-background; + } +} + +.tutor-toast-content { + min-width: 0; + flex: 1; +} + +.tutor-toast-title, +.tutor-toast-description { + margin: 0; +} + +.tutor-toast-title { + @include tutor-typography('medium', 'medium'); + color: currentColor; +} + +.tutor-toast-description { + @include tutor-typography('tiny'); + color: $tutor-toast-text-muted; + + .tutor-toast-card[data-type='default'] & { + color: $tutor-toast-default-text; + } +} + +button.tutor-toast-close { + @include tutor-button-base(); + border: 0; + background: transparent; + color: $tutor-icon-idle; + cursor: pointer; +} + +button.tutor-toast-close { + display: inline-flex; + align-items: center; + justify-content: center; + inline-size: 28px; + block-size: 28px; + border-radius: $tutor-radius-full; + flex-shrink: 0; +} + +.tutor-toast-progress { + position: absolute; + inset-inline: 0; + inset-block-end: 0; + block-size: 3px; + background: color-mix(in srgb, currentColor 8%, transparent); + overflow: hidden; +} + +.tutor-toast-progress-bar { + block-size: 100%; + transform-origin: left; + + .tutor-toast-card[data-type='success'] & { + background: $tutor-toast-success-icon; + } + + .tutor-toast-card[data-type='error'] & { + background: $tutor-toast-error-icon; + } + + .tutor-toast-card[data-type='warning'] & { + background: $tutor-toast-warning-icon; + } + + .tutor-toast-card[data-type='info'] & { + background: $tutor-toast-info-icon; + } + + .tutor-toast-card[data-type='loading'] & { + background: $tutor-toast-loading-icon; + } + + .tutor-toast-card[data-type='default'] & { + background: color-mix(in srgb, $tutor-toast-default-text 30%, transparent); + } +} + +.tutor-toast-card[data-type='loading'] .tutor-toast-progress { + display: none; +} + +@keyframes tutor-toast-progress-shrink { + from { + transform: scaleX(1); + } + + to { + transform: scaleX(0); + } +} + +.tutor-toast-spinner { + inline-size: 18px; + block-size: 18px; + border: 2px solid color-mix(in srgb, currentColor 20%, transparent); + border-top-color: currentColor; + border-radius: 999px; + animation: tutor-toast-spinner-rotate 800ms linear infinite; +} + +@keyframes tutor-toast-spinner-rotate { + to { + transform: rotate(360deg); + } +} + +[data-tutor-motion='reduce'] .tutor-toast-item { + animation: none !important; + transition: opacity 120ms ease !important; +} + +@media (prefers-reduced-motion: reduce) { + .tutor-toast-item { + animation: none !important; + transition: opacity 120ms ease !important; + } +} diff --git a/assets/core/scss/components/_tooltip.scss b/assets/core/scss/components/_tooltip.scss new file mode 100644 index 0000000000..40144c1238 --- /dev/null +++ b/assets/core/scss/components/_tooltip.scss @@ -0,0 +1,133 @@ +// Tooltip Component +// RTL-aware tooltip positioning and styling + +@use '../tokens' as *; +@use '../mixins' as *; +@use '../mixins/rtl' as rtl; + +.tutor-tooltip-wrap { + position: relative; + display: inline-block; + line-height: 0; +} + +.tutor-tooltip { + @include tutor-typography('tiny', 'regular', 'primary-inverse'); + position: fixed; + z-index: 1070; + max-width: 180px; + padding: $tutor-spacing-4; + background-color: $tutor-surface-dark; + border-radius: $tutor-radius-sm; + box-shadow: $tutor-shadow-md; + word-wrap: break-word; + text-align: center; + pointer-events: none; + + &-medium { + max-width: 226px; + padding: $tutor-spacing-5; + } + + &-large { + max-width: 320px; + padding: $tutor-spacing-5; + text-align: start; + } + + &-arrow-start { + &.tutor-tooltip-top, + &.tutor-tooltip-bottom { + &::before { + @include rtl.arrow-start($tutor-spacing-5); + } + } + } + + &-arrow-center { + &.tutor-tooltip-top, + &.tutor-tooltip-bottom { + &::before { + left: 50%; + right: auto; + transform: translateX(-50%); + } + } + } + + &-arrow-end { + &.tutor-tooltip-top, + &.tutor-tooltip-bottom { + &::before { + @include rtl.arrow-end($tutor-spacing-5); + } + } + } + + &::before { + content: ''; + position: absolute; + width: 0; + height: 0; + border: 6px solid transparent; + } + + &-top { + &::before { + top: 100%; + border-top-color: $tutor-surface-dark; + border-bottom: none; + } + } + + &-bottom { + &::before { + bottom: 100%; + border-bottom-color: $tutor-surface-dark; + border-top: none; + } + } + + &-start { + &::before { + top: 50%; + inset-inline-start: 100%; + border-inline-start-color: $tutor-surface-dark; + transform: translateY(-50%); + } + } + + &-end { + &::before { + top: 50%; + inset-inline-end: 100%; + border-inline-end-color: $tutor-surface-dark; + transform: translateY(-50%); + } + } +} + +// Animation classes for Alpine.js +.tutor-tooltip { + &-enter { + opacity: 0; + transform: scale(0.8); + } + + &-enter-active { + opacity: 1; + transform: scale(1); + @include tutor-transition((opacity, transform), 0.15s); + } + + &-leave { + opacity: 1; + transform: scale(1); + } + + &-leave-active { + opacity: 0; + transform: scale(0.8); + @include tutor-transition((opacity, transform), 0.15s); + } +} diff --git a/assets/core/scss/main.scss b/assets/core/scss/main.scss new file mode 100644 index 0000000000..fb0542ac17 --- /dev/null +++ b/assets/core/scss/main.scss @@ -0,0 +1,129 @@ +// Tutor Design System - Main Entry Point +// Single CSS file with all themes and RTL support + +// Import design tokens +@use 'tokens' as *; + +// Import themes +@use 'themes'; + +// Import mixins +@use 'mixins' as *; + +// Import base components +@use 'components'; + +// Import utilities +@use 'utilities'; + +// Base styles +// CSS Reset +*, +*::before, +*::after { + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} + +html { + font-family: $tutor-font-family-body; + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; + -moz-tab-size: 4; + tab-size: 4; +} + +body { + margin: 0; + font-family: inherit; + line-height: inherit; + background-color: $tutor-surface-base; + color: $tutor-text-primary; + @include tutor-transition((background-color, color)); +} + +form { + margin: $tutor-spacing-none; +} + +.tutor-dashboard-layout, +.tutor-learning-area, +.tutor-account-page-wrapper { + min-height: 100vh; + background-color: $tutor-surface-base; + + body:has(#wpadminbar) & { + min-height: calc(100vh - 32px); + } + + a { + text-decoration: none; + + &:hover { + opacity: 1; + } + } +} + +// Alpine.js cloak utility +[x-cloak] { + display: none !important; +} + +::view-transition-new(root) { + animation: tutor-theme-fade-in 220ms ease-out both; +} + +::view-transition-old(root) { + animation: tutor-theme-fade-out 220ms ease-out both; +} + +@keyframes tutor-theme-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes tutor-theme-fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +// Reduce Motion +[data-tutor-motion='reduce'] *, +[data-tutor-motion='reduce'] *::before, +[data-tutor-motion='reduce'] *::after { + animation: none !important; + transition: none !important; + scroll-behavior: auto !important; +} + +[data-tutor-motion='reduce']::view-transition-new(root), +[data-tutor-motion='reduce']::view-transition-old(root) { + animation: none !important; +} + +@media (prefers-reduced-motion: reduce) { + [data-tutor-motion='auto'] *, + [data-tutor-motion='auto'] *::before, + [data-tutor-motion='auto'] *::after { + animation: none !important; + transition: none !important; + scroll-behavior: auto !important; + } + + [data-tutor-motion='auto']::view-transition-new(root), + [data-tutor-motion='auto']::view-transition-old(root) { + animation: none !important; + } +} diff --git a/assets/core/scss/mixins/_avatars.scss b/assets/core/scss/mixins/_avatars.scss new file mode 100644 index 0000000000..0cbd431ba8 --- /dev/null +++ b/assets/core/scss/mixins/_avatars.scss @@ -0,0 +1,122 @@ +// Avatar Mixins +@use '../tokens' as *; +@use 'typography' as *; +@use 'layout' as *; + +@mixin tutor-avatar-base { + @include tutor-flex-center; + position: relative; + border-radius: $tutor-radius-full; + overflow: hidden; + background-color: $tutor-surface-brand-quaternary; + color: $tutor-text-primary; + flex-shrink: 0; + user-select: none; +} + +@mixin tutor-avatar-image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 1/1; +} + +@mixin tutor-avatar-initials { + @include tutor-typography('small', 'medium'); + color: inherit; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +// Avatar sizes map +$tutor-avatar-sizes: ( + 20: ( + font-size: 'tiny-2', + icon-size: 12px, + ), + 24: ( + font-size: 'tiny', + icon-size: 12px, + ), + 32: ( + font-size: 'tiny', + icon-size: 16px, + ), + 40: ( + font-size: 'small', + icon-size: 20px, + ), + 48: ( + font-size: 'small', + icon-size: 24px, + ), + 56: ( + font-size: 'medium', + icon-size: 28px, + ), + 64: ( + font-size: 'medium', + icon-size: 32px, + ), + 80: ( + font-size: $tutor-font-size-h4, + icon-size: 40px, + ), + 104: ( + font-size: $tutor-font-size-h3, + icon-size: 48px, + ), +); + +@mixin tutor-avatar-size($size) { + @if map-has-key($tutor-avatar-sizes, $size) { + $config: map-get($tutor-avatar-sizes, $size); + $font-size: map-get($config, font-size); + $icon-size: map-get($config, icon-size); + + width: #{$size}px; + height: #{$size}px; + + .tutor-avatar-initials { + @if type-of($font-size) == 'string' { + @include tutor-typography($font-size, 'medium'); + } @else { + font-size: $font-size; + font-weight: $tutor-font-weight-medium; + } + } + + svg { + width: $icon-size; + height: $icon-size; + } + } +} + +// Avatar variants +@mixin tutor-avatar-variant($variant: default) { + @if $variant == square { + border-radius: $tutor-radius-md; + + svg, + .tutor-avatar-image { + border-radius: $tutor-radius-md; + } + } @else if $variant == icon { + background-color: $tutor-surface-brand-tertiary; + color: $tutor-text-secondary; + + &:hover { + background-color: $tutor-actions-brand-tertiary; + color: $tutor-actions-brand-primary; + } + } @else if $variant == border { + border: 2px solid $tutor-border-brand-secondary; + svg, + .tutor-avatar-image { + border-radius: 0px; + } + } +} diff --git a/assets/core/scss/mixins/_badges.scss b/assets/core/scss/mixins/_badges.scss new file mode 100644 index 0000000000..3f838097aa --- /dev/null +++ b/assets/core/scss/mixins/_badges.scss @@ -0,0 +1,91 @@ +@use '../tokens' as *; +@use 'typography' as *; +@use 'layout' as *; + +@mixin tutor-badge-base() { + @include tutor-typography('tiny', 'medium', 'secondary'); + border-radius: $tutor-radius-sm; + padding-inline: $tutor-spacing-4; + display: inline-flex; + align-items: center; + gap: $tutor-spacing-3; + background-color: $tutor-actions-gray-secondary; + width: fit-content; + + img, + svg { + @include tutor-flex-center; + width: 12px; + height: 12px; + object-fit: contain; + object-position: center; + } + + svg { + color: $tutor-icon-idle; + } + + &.tutor-badge-rounded { + border-radius: $tutor-radius-full; + } +} + +@mixin tutor-badge-variant($variant: primary) { + @if $variant ==primary { + background-color: $tutor-actions-brand-primary; + color: $tutor-text-primary-inverse; + + svg { + color: $tutor-icon-idle-inverse; + } + } @else if $variant ==info { + background-color: $tutor-actions-brand-tertiary; + color: $tutor-text-brand; + + svg { + color: $tutor-icon-brand; + } + } @else if $variant ==warning { + background-color: $tutor-actions-warning-secondary; + color: $tutor-text-warning; + + svg { + color: $tutor-icon-warning; + } + } @else if $variant ==success { + background-color: $tutor-actions-success-tertiary; + color: $tutor-text-success; + + svg { + color: $tutor-icon-success-primary; + } + } @else if $variant ==success-solid { + background-color: $tutor-actions-success-primary; + color: $tutor-text-primary-inverse; + + svg { + color: $tutor-icon-idle-inverse; + } + } @else if $variant ==error { + background-color: $tutor-actions-critical-secondary; + color: $tutor-text-critical; + + svg { + color: $tutor-icon-critical; + } + } @else if $variant ==highlight { + background-color: $tutor-surface-exception2-secondary; + color: $tutor-text-exception2; + + svg { + color: $tutor-icon-exception2; + } + } @else if $variant ==disabled { + background-color: $tutor-actions-gray-secondary; + color: $tutor-text-subdued; + + svg { + color: $tutor-icon-secondary; + } + } +} diff --git a/assets/core/scss/mixins/_buttons.scss b/assets/core/scss/mixins/_buttons.scss new file mode 100644 index 0000000000..e638cec7bb --- /dev/null +++ b/assets/core/scss/mixins/_buttons.scss @@ -0,0 +1,504 @@ +// Button Mixins +// Reusable button styles with variants and sizes + +@use './utilities' as *; +@use '../tokens' as *; + +@mixin tutor-button-base { + display: inline-flex; + align-items: center; + justify-content: center; + gap: $tutor-spacing-2; + border-radius: $tutor-button-radius; + font-weight: $tutor-button-font-weight; + cursor: pointer; + text-align: center; + text-decoration: none; + text-transform: none; + font-family: inherit; + background-color: transparent; + color: $tutor-text-primary; + padding: $tutor-spacing-none; + border: none; + // Inherited “kids mode” elevation + per-variant border shadow. + --tutor-button-border-shadow: none; + box-shadow: $tutor-button-border-shadow; + @include tutor-transition((color, background-color)); + + &:hover:not(:disabled):not(.disabled), + &:focus:not(:disabled):not(.disabled) { + background-color: transparent; + border: none; + outline: none; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-primary-border-shadow}; + } + + &:focus-visible:not(:disabled):not(.disabled) { + @include tutor-focus-ring; + } + + svg:not([class]) { + color: currentColor; + flex-shrink: 0; + } + + &:disabled, + &.disabled { + color: $tutor-text-subdued; + cursor: not-allowed; + pointer-events: none; + + svg:not([class]) { + color: $tutor-icon-subdued; + } + } +} + +@mixin tutor-button-variant($variant: primary) { + @if $variant == primary { + background-color: $tutor-button-primary; + color: $tutor-text-primary-inverse; + --tutor-button-border-shadow: #{$tutor-button-primary-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-idle-inverse; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-primary-hover; + color: $tutor-text-primary-inverse; + --tutor-button-border-shadow: #{$tutor-button-primary-border-shadow-hover}; + } + + &:focus:not(:disabled):not(.disabled) { + background-color: $tutor-button-primary-focused; + color: $tutor-text-primary-inverse; + --tutor-button-border-shadow: #{$tutor-button-primary-border-shadow-focused}; + } + + &:disabled, + &.disabled { + background-color: $tutor-button-primary-disabled; + color: $tutor-text-primary-inverse; + --tutor-button-border-shadow: #{$tutor-button-primary-border-shadow-disabled}; + } + } @else if $variant == primary-soft { + background-color: $tutor-button-primary-soft; + color: $tutor-text-brand; + --tutor-button-border-shadow: #{$tutor-button-primary-soft-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-brand; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-primary-soft-hover; + color: $tutor-text-brand; + --tutor-button-border-shadow: #{$tutor-button-primary-soft-border-shadow-hover}; + } + + &:focus:not(:disabled):not(.disabled) { + background-color: $tutor-button-primary-soft-focused; + color: $tutor-text-brand; + --tutor-button-border-shadow: #{$tutor-button-primary-soft-border-shadow-focused}; + } + + &:disabled, + &.disabled { + background-color: $tutor-button-disabled; + --tutor-button-border-shadow: #{$tutor-button-primary-soft-border-shadow-disabled}; + } + } @else if $variant == destructive { + background-color: $tutor-button-destructive; + color: $tutor-text-primary-inverse; + --tutor-button-border-shadow: #{$tutor-button-destructive-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-idle-inverse; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-destructive-hover; + color: $tutor-text-primary-inverse; + --tutor-button-border-shadow: #{$tutor-button-destructive-border-shadow-hover}; + } + + &:focus:not(:disabled):not(.disabled) { + background-color: $tutor-button-destructive-focused; + color: $tutor-text-primary-inverse; + --tutor-button-border-shadow: #{$tutor-button-destructive-border-shadow-focused}; + } + + &:disabled, + &.disabled { + background-color: $tutor-button-disabled; + --tutor-button-border-shadow: #{$tutor-button-destructive-border-shadow-disabled}; + } + } @else if $variant == destructive-soft { + background-color: $tutor-button-destructive-soft; + color: $tutor-text-critical; + --tutor-button-border-shadow: #{$tutor-button-destructive-soft-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-critical; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-destructive-soft-hover; + color: $tutor-text-critical; + --tutor-button-border-shadow: #{$tutor-button-destructive-soft-border-shadow-hover}; + } + + &:focus:not(:disabled):not(.disabled) { + background-color: $tutor-button-destructive-soft-focused; + color: $tutor-text-critical; + --tutor-button-border-shadow: #{$tutor-button-destructive-soft-border-shadow-focused}; + } + + &:disabled, + &.disabled { + background-color: $tutor-button-disabled; + --tutor-button-border-shadow: #{$tutor-button-destructive-soft-border-shadow-disabled}; + } + } @else if $variant == success { + background-color: $tutor-button-success; + color: $tutor-text-primary-inverse; + + svg:not([class]) { + color: $tutor-icon-idle-inverse; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-success-hover; + color: $tutor-text-primary-inverse; + } + + &:focus:not(:disabled):not(.disabled) { + background-color: $tutor-button-success-focused; + color: $tutor-text-primary-inverse; + } + } @else if $variant == secondary { + background-color: $tutor-button-secondary; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-secondary-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-idle; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-secondary-hover; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-secondary-border-shadow-hover}; + } + + &:focus:not(:disabled):not(.disabled) { + background-color: $tutor-button-secondary-focused; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-secondary-border-shadow-focused}; + } + + &:disabled, + &.disabled { + background-color: $tutor-button-disabled; + --tutor-button-border-shadow: #{$tutor-button-secondary-border-shadow-disabled}; + } + } @else if $variant == outline { + background-color: $tutor-button-outline-inverse; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-outline-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-idle; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-outline-hover; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-outline-border-shadow-hover}; + } + + &:focus:not(:disabled):not(.disabled) { + background-color: $tutor-button-outline-focused-inverse; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-outline-border-shadow-focused}; + } + + &:disabled, + &.disabled { + background-color: $tutor-button-disabled; + --tutor-button-border-shadow: #{$tutor-button-outline-border-shadow-disabled}; + } + } @else if $variant == ghost { + background-color: transparent; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-ghost-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-idle; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-ghost-hover; + color: $tutor-text-primary; + --tutor-button-border-shadow: #{$tutor-button-ghost-border-shadow-hover}; + } + + &:disabled, + &.disabled { + background-color: transparent; + --tutor-button-border-shadow: #{$tutor-button-ghost-border-shadow-disabled}; + } + } @else if $variant == ghost-brand { + background-color: transparent; + color: $tutor-text-brand; + --tutor-button-border-shadow: #{$tutor-button-ghost-brand-border-shadow}; + + svg:not([class]) { + color: $tutor-icon-brand; + } + + &:hover:not(:disabled):not(.disabled) { + background-color: $tutor-button-primary-soft; + color: $tutor-text-brand; + --tutor-button-border-shadow: #{$tutor-button-ghost-brand-border-shadow-hover}; + } + + &:disabled, + &.disabled { + background-color: transparent; + --tutor-button-border-shadow: #{$tutor-button-ghost-brand-border-shadow-disabled}; + } + } @else if $variant == link { + background-color: transparent; + color: $tutor-text-brand; + + svg:not([class]) { + color: $tutor-icon-brand; + } + + &:hover:not(:disabled):not(.disabled) { + color: $tutor-text-brand-hover; + box-shadow: none !important; + + svg:not([class]) { + color: $tutor-icon-brand-hover; + } + } + } @else if $variant == link-gray { + background-color: transparent; + color: $tutor-text-subdued; + + svg:not([class]) { + color: $tutor-icon-subdued; + } + + &:hover:not(:disabled):not(.disabled) { + color: $tutor-text-secondary; + + svg:not([class]) { + color: $tutor-icon-hover; + } + } + } @else if $variant == link-destructive { + background-color: transparent; + color: $tutor-text-critical; + + svg:not([class]) { + color: $tutor-icon-critical; + } + + &:hover:not(:disabled):not(.disabled) { + color: $tutor-text-critical-hover; + + svg:not([class]) { + color: $tutor-icon-critical-hover; + } + } + } +} + +@mixin tutor-button-size($size: medium) { + @if $size == x-small { + --tutor-button-border-shadow-base: 1px; + --tutor-button-border-shadow-bottom: 2px; + font-size: $tutor-font-size-tiny; + line-height: $tutor-line-height-tiny; + + &:not([class*='tutor-btn-link']) { + min-height: 32px; + padding: $tutor-spacing-3 $tutor-spacing-5; + } + } @else if $size == small { + --tutor-button-border-shadow-base: 1px; + --tutor-button-border-shadow-bottom: 2px; + font-size: $tutor-font-size-small; + line-height: $tutor-line-height-small; + + &:not([class*='tutor-btn-link']) { + padding: $tutor-spacing-3 $tutor-spacing-5; + min-height: 34px; + } + } @else if $size == large { + --tutor-button-border-shadow-base: 2px; + --tutor-button-border-shadow-bottom: 5px; + font-size: $tutor-font-size-small; + line-height: $tutor-line-height-small; + + &:not([class*='tutor-btn-link']) { + padding: $tutor-spacing-5 $tutor-spacing-6; + min-height: 48px; + } + } @else { + --tutor-button-border-shadow-base: 1px; + --tutor-button-border-shadow-bottom: 3px; + font-size: $tutor-font-size-small; + line-height: $tutor-line-height-small; + + &:not([class*='tutor-btn-link']) { + padding: $tutor-spacing-4 $tutor-spacing-5; + min-height: 38px; + } + } +} + +@mixin tutor-button-group($direction: horizontal) { + display: flex; + + @if $direction == horizontal { + flex-direction: row; + + .tutor-btn { + &:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } @else { + flex-direction: column; + + .tutor-btn { + &:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + &:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + } +} + +@mixin tutor-button-block() { + width: 100%; + justify-content: center; +} + +@mixin tutor-button-icon-size($size) { + @if $size == x-small { + padding: $tutor-spacing-4; + min-width: 32px; + min-height: 32px; + } @else if $size == small { + padding: 9px; + min-width: 34px; + min-height: 34px; + } @else if $size == medium { + padding: 10px; + min-width: 40px; + min-height: 40px; + } @else if $size == large { + padding: 14px; + min-width: 48px; + min-height: 48px; + } +} + +@mixin tutor-button-loading { + position: relative; + pointer-events: none; + -webkit-text-fill-color: transparent; + + & > * { + visibility: hidden; + } + + &::before { + content: ''; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + border: 2px solid currentColor; + border-radius: 50%; + border-top-color: transparent; + animation: tutor-button-spin 1s linear infinite; + + [data-tutor-motion='reduce'] & { + animation: tutor-button-pulse 1.5s ease-in-out infinite !important; + border-top-color: currentColor; + } + + @media (prefers-reduced-motion: reduce) { + [data-tutor-motion='auto'] & { + animation: tutor-button-pulse 1.5s ease-in-out infinite !important; + border-top-color: currentColor; + } + } + } +} + +// Keyframes for the standard spin +@keyframes tutor-button-spin { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } +} + +// Keyframes for the reduced motion "Pulse" +@keyframes tutor-button-pulse { + 0%, + 100% { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } + + 50% { + opacity: 0.4; + transform: translate(-50%, -50%) scale(0.9); + } +} + +@mixin tutor-button-reset { + background: none; + border: none; + padding: 0; + margin: 0; + font: inherit; + color: inherit; + text-decoration: none; + cursor: pointer; + outline: none; + box-shadow: none; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + + &:focus { + outline: none; + } +} diff --git a/assets/core/scss/mixins/_cards.scss b/assets/core/scss/mixins/_cards.scss new file mode 100644 index 0000000000..43c4101699 --- /dev/null +++ b/assets/core/scss/mixins/_cards.scss @@ -0,0 +1,70 @@ +// Card Mixins +// Reusable card styles with elevation and variants + +@use '../tokens/' as *; +@use 'layout' as *; + +@mixin tutor-card-base { + background-color: $tutor-surface-l1; + border: 1px solid $tutor-border-idle; + box-shadow: none; +} + +@mixin tutor-card-padding($size: medium) { + @if $size == small { + padding: $tutor-spacing-4; + } @else if $size == large { + padding: $tutor-spacing-8; + } @else { + padding: $tutor-spacing-6; + } +} + +@mixin tutor-card-radius($size: lg) { + @if $size == none { + border-radius: $tutor-radius-none; + } @else if $size == xs { + border-radius: $tutor-radius-xs; + } @else if $size == sm { + border-radius: $tutor-radius-sm; + } @else if $size == md { + border-radius: $tutor-radius-md; + } @else if $size == lg { + border-radius: $tutor-radius-lg; + } @else if $size == 2xl { + border-radius: $tutor-radius-2xl; + } @else if $size == 3xl { + border-radius: $tutor-radius-3xl; + } @else if $size == 4xl { + border-radius: $tutor-radius-4xl; + } @else if $size == 5xl { + border-radius: $tutor-radius-5xl; + } @else if $size == full { + border-radius: $tutor-radius-full; + } @else { + border-radius: $tutor-radius-lg; // Default fallback + } +} + +// Card variants +@mixin tutor-card-variant($variant: default) { + @if $variant == outlined { + border: 1px solid $tutor-border-idle; + box-shadow: none; + } @else if $variant == filled { + background-color: $tutor-surface-l2; + border: none; + } @else if $variant == brand { + border: 1px solid $tutor-border-brand; + background-color: $tutor-brand-100; + } @else if $variant == success { + border: 1px solid $tutor-success; + background-color: $tutor-success-light; + } @else if $variant == warning { + border: 1px solid $tutor-warning; + background-color: $tutor-warning-light; + } @else if $variant == error { + border: 1px solid $tutor-error; + background-color: $tutor-error-light; + } +} diff --git a/assets/core/scss/mixins/_index.scss b/assets/core/scss/mixins/_index.scss new file mode 100644 index 0000000000..297bf33913 --- /dev/null +++ b/assets/core/scss/mixins/_index.scss @@ -0,0 +1,10 @@ +@forward "buttons"; +@forward "cards"; +@forward "inputs"; +@forward "layout"; +@forward "rtl"; +@forward "typography"; +@forward "utilities"; +@forward "badges"; +@forward "paginations"; +@forward "avatars"; diff --git a/assets/core/scss/mixins/_inputs.scss b/assets/core/scss/mixins/_inputs.scss new file mode 100644 index 0000000000..efd464fd37 --- /dev/null +++ b/assets/core/scss/mixins/_inputs.scss @@ -0,0 +1,274 @@ +@use '../tokens' as *; +@use 'typography' as *; +@use 'rtl' as *; +@use 'utilities' as *; +@use 'buttons' as *; + +@mixin tutor-input-base($size: md) { + @include tutor-typography('small', 'regular'); + width: 100%; + padding: 7px $tutor-spacing-5; + margin: 0; + min-height: auto; + border: 1px solid $tutor-border-idle; + border-color: $tutor-input-border-color; + border-radius: $tutor-input-radius; + background-color: $tutor-surface-l1; + font-weight: $tutor-input-font-weight; + --tutor-input-border-shadow-current: #{$tutor-input-border-shadow}; + box-shadow: var(--tutor-input-border-shadow-current); + @include tutor-transition(all); + + -moz-appearance: textfield; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button, + &::-webkit-search-cancel-button, + &::-webkit-autofill-button, + &::-webkit-contacts-auto-fill-button, + &::-webkit-credentials-auto-fill-button { + -webkit-appearance: none; + display: none; + visibility: hidden; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; + margin: 0; + } + + &:placeholder-shown:not(:focus):not(:disabled) { + background-color: $tutor-surface-l3; + } + + &::placeholder { + color: $tutor-text-subdued; + } + + &:focus { + @include tutor-focus-ring(); + background-color: $tutor-surface-l1; + border-color: $tutor-border-brand-tertiary; + color: $tutor-text-primary; + --tutor-input-border-shadow-current: none; + } + + &:disabled { + background-color: $tutor-surface-l1-hover; + cursor: not-allowed; + --tutor-input-border-shadow-current: none; + } + + @if $size == sm { + padding: 5px $tutor-spacing-4; + } + + @if $size == lg { + padding: $tutor-spacing-5; + } + + // Prevent iOS Safari from auto-zooming focused fields and exposing + // horizontal overflow on mobile layouts. + @media (hover: none) and (pointer: coarse) { + font-size: $tutor-font-size-medium; + line-height: $tutor-line-height-medium; + } +} + +@mixin tutor-textarea($min-height: 92px) { + @include tutor-input-base; + min-height: $min-height; + resize: vertical; +} + +@mixin tutor-checkbox($size: sm, $intermediate: false) { + $checkbox-size: if($size ==md, 20px, 16px); + $svg-size: if($size ==md, 12px, 10px); + + appearance: none; + width: $checkbox-size; + height: $checkbox-size; + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-sm; + background-color: $tutor-surface-l1; + cursor: pointer; + position: relative; + flex-shrink: 0; + @include tutor-transition((background-color, border-color, box-shadow, color)); + + color: $tutor-icon-idle; + + &::before { + display: none !important; + } + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: $svg-size; + height: $svg-size; + transform: translate(-50%, -50%) scale(0.6); + opacity: 0; + @include tutor-transition((opacity, transform)); + + background-color: currentColor; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='M10.3 3.3a1 1 0 0 1 0 1.4L5.5 9.5a1 1 0 0 1-1.4 0L1.7 7.1a1 1 0 0 1 1.4-1.4L5 7.6l4.3-4.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") + center / contain no-repeat; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='M10.3 3.3a1 1 0 0 1 0 1.4L5.5 9.5a1 1 0 0 1-1.4 0L1.7 7.1a1 1 0 0 1 1.4-1.4L5 7.6l4.3-4.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") + center / contain no-repeat; + } + + &:checked { + background-color: $tutor-surface-brand-primary; + border-color: transparent; + color: $tutor-icon-idle-inverse; + + &::after { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } + } + + &:disabled { + background-color: $tutor-surface-l1-hover; + color: $tutor-icon-disabled; + cursor: not-allowed; + border-color: $tutor-border-idle; + } + + &:focus { + @include tutor-focus-ring; + + &:not(:checked) { + box-shadow: $tutor-ring-gray-shadow-sm; + } + } + + @if $intermediate ==true { + &::after { + mask: none; + -webkit-mask: none; + width: 7px; + height: 2.5px; + border-radius: $tutor-radius-full; + background-color: currentColor; + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } + + background-color: $tutor-surface-brand-primary; + border-color: transparent; + color: $tutor-icon-idle-inverse; + } +} + +@mixin tutor-radio($size: sm) { + $radio-size: if($size ==md, 20px, 16px); + $inner-circle: if($size ==md, 8px, 6px); + + appearance: none; + width: $radio-size; + height: $radio-size; + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-full; + background-color: $tutor-surface-l1; + cursor: pointer; + position: relative; + flex-shrink: 0; + @include tutor-transition((background-color, border-color, box-shadow)); + + &:checked { + background-color: $tutor-surface-brand-primary; + border-color: transparent; + + &::before { + display: none !important; + } + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: $inner-circle; + height: $inner-circle; + transform: translate(-50%, -50%); + border-radius: $tutor-radius-full; + background-color: $tutor-surface-l1; + } + } + + &:disabled { + background-color: $tutor-surface-l2; + cursor: not-allowed; + border-color: $tutor-border-idle; + } + + &:focus { + @include tutor-focus-ring; + + &:not(:checked) { + box-shadow: $tutor-ring-gray-shadow-sm; + } + } +} + +@mixin tutor-switch($size: sm, $intermediate: false) { + $width: if($size ==sm, 36px, 44px); + $height: if($size ==sm, 20px, 24px); + $thumb: if($size ==sm, 16px, 20px); + $gap: $tutor-spacing-1; + + appearance: none; + position: relative; + display: inline-flex; + align-items: center; + width: $width; + height: $height; + background-color: $tutor-button-secondary-hover; + border: none; + outline: none; + border-radius: $height; + cursor: pointer; + @include tutor-transition(background-color); + + &::before { + display: none !important; + } + + &::after { + content: ''; + position: absolute; + top: $gap; + left: $gap; + width: $thumb; + height: $thumb; + border-radius: 50%; + background-color: $tutor-actions-inverse; + box-shadow: $tutor-shadow-sm; + @include tutor-transition((transform, background-color)); + } + + &:focus { + @include tutor-focus-ring(); + border-color: $tutor-border-brand-tertiary; + } + + &:checked { + background-color: $tutor-button-primary; + + &::after { + transform: translateX(calc(#{$width} - #{$thumb} - #{$gap * 2})); + } + } + + &:disabled { + background-color: $tutor-button-disabled; + + &::after { + background-color: $tutor-actions-gray-empty; + } + } +} diff --git a/assets/core/scss/mixins/_layout.scss b/assets/core/scss/mixins/_layout.scss new file mode 100644 index 0000000000..9d0f63b74b --- /dev/null +++ b/assets/core/scss/mixins/_layout.scss @@ -0,0 +1,241 @@ +// Layout Mixins +// Reusable layout utilities for flexbox, grid, and positioning + +@use 'sass:map'; +@use '../tokens' as *; + +@mixin tutor-flex($direction: row, $align: stretch, $justify: flex-start, $wrap: nowrap) { + display: flex; + flex-direction: $direction; + align-items: $align; + justify-content: $justify; + flex-wrap: $wrap; +} + +@mixin tutor-flex-center { + @include tutor-flex(row, center, center); +} + +@mixin tutor-flex-between { + @include tutor-flex(row, center, space-between); +} + +@mixin tutor-flex-column { + @include tutor-flex(column, stretch, flex-start); +} + +@mixin tutor-grid($columns: 1, $gap: $tutor-spacing-6) { + display: grid; + grid-template-columns: repeat($columns, 1fr); + gap: $gap; +} + +@mixin tutor-container($max-width: 1200px) { + width: 100%; + max-width: $max-width; + margin: 0 auto; + padding: 0 $tutor-spacing-6; +} + +@mixin tutor-frontend-layout { + max-width: 760px; + margin: 0 auto; + + @include tutor-breakpoint-up(2xl) { + max-width: 860px; + } + + @include tutor-breakpoint-up(3xl) { + max-width: 944px; + } +} + +@mixin tutor-visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +@mixin tutor-clearfix { + &::after { + content: ''; + display: table; + clear: both; + } +} + +// Responsive breakpoint mixin +@mixin tutor-breakpoint-up($breakpoint) { + @if map.has-key($tutor-breakpoints, $breakpoint) { + $value: map.get($tutor-breakpoints, $breakpoint); + + @if $value >0 { + @media (min-width: $value) { + @content; + } + } @else { + @content; + } + } @else { + @warn "Unknown breakpoint: #{$breakpoint}"; + } +} + +@mixin tutor-breakpoint-down($breakpoint) { + @if map.has-key($tutor-breakpoints, $breakpoint) { + $value: map.get($tutor-breakpoints, $breakpoint); + + @if $value >0 { + @media (max-width: $value) { + @content; + } + } @else { + @content; + } + } @else { + @warn "Unknown breakpoint: #{$breakpoint}"; + } +} + +@mixin tutor-breakpoint-between($breakpoint-1, $breakpoint-2) { + @include tutor-breakpoint-down($breakpoint-1) { + @include tutor-breakpoint-up($breakpoint-2) { + @content; + } + } +} + +// Advanced grid mixins +@mixin tutor-grid-auto-fit($min-width: 250px, $gap: $tutor-spacing-6) { + display: grid; + grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr)); + gap: $gap; +} + +@mixin tutor-grid-auto-fill($min-width: 250px, $gap: $tutor-spacing-6) { + display: grid; + grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr)); + gap: $gap; +} + +@mixin tutor-grid-auto-columns($min, $max, $selector: '*') { + display: grid; + gap: $tutor-spacing-6; + + grid-template-columns: repeat($min, 1fr); + + @for $i from ($min + 1) through $max { + // Count all children to increase column count; ignore drag clones. + &:has(> #{$selector}:nth-child(#{$i})) { + grid-template-columns: repeat($i, 1fr); + } + } + + // If a drag clone/placeholder is present, keep columns based on item count minus one. + &:has(> #{$selector}[data-dnd-dragging='true']) { + @for $i from ($min + 1) through ($max + 1) { + &:has(> #{$selector}:nth-child(#{$i})) { + grid-template-columns: repeat(#{$i - 1}, 1fr); + } + } + } +} + +@mixin tutor-grid-area($row-start, $col-start, $row-end: null, $col-end: null) { + @if $row-end and $col-end { + grid-area: $row-start / $col-start / $row-end / $col-end; + } @else { + grid-column-start: $col-start; + grid-row-start: $row-start; + } +} + +// Positioning mixins +@mixin tutor-absolute-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@mixin tutor-absolute-fill { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +@mixin tutor-sticky-top($offset: 0) { + position: sticky; + top: $offset; + z-index: 10; +} + +// Flexbox gap fallback for older browsers +@mixin tutor-flex-gap($gap) { + gap: $gap; + + // Fallback for browsers without gap support + @supports not (gap: 1px) { + margin: -#{$gap / 2}; + + > * { + margin: #{$gap / 2}; + } + } +} + +// Stack layout (vertical spacing) +@mixin tutor-stack($spacing: $tutor-spacing-4) { + > * + * { + margin-top: $spacing; + } +} + +// Cluster layout (horizontal spacing with wrapping) +@mixin tutor-cluster($spacing: $tutor-spacing-4, $align: flex-start) { + display: flex; + flex-wrap: wrap; + align-items: $align; + margin: -#{$spacing / 2}; + + > * { + margin: #{$spacing / 2}; + } +} + +// Sidebar layout +@mixin tutor-sidebar($sidebar-width: 250px, $gap: $tutor-spacing-6, $side: start) { + display: flex; + gap: $gap; + + @if $side ==start { + flex-direction: row; + + [dir='rtl'] & { + flex-direction: row-reverse; + } + } @else { + flex-direction: row-reverse; + + [dir='rtl'] & { + flex-direction: row; + } + } + + .tutor-sidebar { + flex: 0 0 $sidebar-width; + } + + .tutor-main { + flex: 1; + min-width: 0; // Prevent flex item from overflowing + } +} diff --git a/assets/core/scss/mixins/_paginations.scss b/assets/core/scss/mixins/_paginations.scss new file mode 100644 index 0000000000..cd6b645440 --- /dev/null +++ b/assets/core/scss/mixins/_paginations.scss @@ -0,0 +1,96 @@ +// Pagination Mixins +// Reusable Pagination styles with variants and sizes + +@use "../tokens" as *; +@use "utilities" as *; +@use "typography" as *; +@use "layout" as *; + +@mixin tutor-pagination-base { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: $tutor-spacing-4; + margin: $tutor-spacing-none; + padding: $tutor-spacing-none; +} + +@mixin tutor-pagination-list { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: $tutor-spacing-1; + list-style: none; + margin: $tutor-spacing-none; + padding: $tutor-spacing-none; + li { + margin: $tutor-spacing-none; + padding: $tutor-spacing-none; + } +} + +@mixin tutor-pagination-info { + @include tutor-typography('small', 'regular'); + margin: 0; + .tutor-pagination-current, + .tutor-pagination-total { + font-weight: $tutor-font-weight-medium; + color: $tutor-text-primary; + } +} + +@mixin tutor-pagination-item { + @include tutor-flex-center; + padding: $tutor-spacing-3 $tutor-spacing-5; + border-radius: $tutor-radius-md; + text-decoration: none; + @include tutor-typography('tiny', 'medium'); + cursor: pointer; + min-width: 32px; + min-height: 32px; + @include tutor-transition((background-color, color)); + + // Default state + background-color: transparent; + + &.active, + &:active { + background-color: $tutor-button-primary-soft-focused; + color: $tutor-text-brand; + } + + &:hover { + background-color: $tutor-button-primary-soft-focused; + color: $tutor-text-brand; + } + + &.disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; + } +} + +@mixin tutor-pagination-item-variant($variant: default) { + @if $variant == active { + background-color: $tutor-button-primary-soft-focused; + color: $tutor-text-brand; + } @else if $variant == prev-next { + color: $tutor-icon-idle; + padding: $tutor-spacing-4; + + &:hover { + background-color: $tutor-actions-brand-tertiary; + color: $tutor-actions-brand-primary; + } + } +} + +@mixin tutor-pagination-ellipsis { + @include tutor-flex-center; + min-width: 32px; + min-height: 32px; + @include tutor-typography('tiny', 'medium'); + cursor: default; +} \ No newline at end of file diff --git a/assets/core/scss/mixins/_rtl.scss b/assets/core/scss/mixins/_rtl.scss new file mode 100644 index 0000000000..ce54601f13 --- /dev/null +++ b/assets/core/scss/mixins/_rtl.scss @@ -0,0 +1,135 @@ +// RTL (Right-to-Left) Mixins +// Provides directional-aware mixins for RTL language support + +// Directional margin mixins +@mixin margin-start($value) { + margin-inline-start: $value; +} +@mixin margin-end($value) { + margin-inline-end: $value; +} + +// Directional padding mixins +@mixin padding-start($value) { + padding-inline-start: $value; +} +@mixin padding-end($value) { + padding-inline-end: $value; +} + +// Directional border mixins +@mixin border-start($value) { + border-inline-start: $value; +} +@mixin border-end($value) { + border-inline-end: $value; +} +@mixin border-start-width($value) { + border-inline-start-width: $value; +} +@mixin border-end-width($value) { + border-inline-end-width: $value; +} +@mixin border-start-color($value) { + border-inline-start-color: $value; +} +@mixin border-end-color($value) { + border-inline-end-color: $value; +} + +// Directional border radius mixins +@mixin border-radius-start($value) { + border-start-start-radius: $value; + border-end-start-radius: $value; +} +@mixin border-radius-end($value) { + border-start-end-radius: $value; + border-end-end-radius: $value; +} +@mixin border-top-start-radius($value) { + border-start-start-radius: $value; +} +@mixin border-top-end-radius($value) { + border-start-end-radius: $value; +} +@mixin border-bottom-start-radius($value) { + border-end-start-radius: $value; +} +@mixin border-bottom-end-radius($value) { + border-end-end-radius: $value; +} + +// Directional positioning mixins +@mixin left($value) { + inset-inline-start: $value; +} +@mixin right($value) { + inset-inline-end: $value; +} + +// Text alignment mixins +@mixin text-align-start() { + text-align: start; +} +@mixin text-align-end() { + text-align: end; +} + +// Float mixins +@mixin float-start() { + float: inline-start; +} +@mixin float-end() { + float: inline-end; +} + +// Transform mixins for RTL-aware animations +@mixin transform-translate-x($value) { + transform: translateX($value); +} +@mixin transform-rotate-y($value) { + transform: rotateY($value); +} + +// Flexbox direction mixins +@mixin flex-direction-row() { + flex-direction: row; +} +@mixin flex-direction-row-reverse() { + flex-direction: row-reverse; +} + +// Background position mixins +@mixin background-position-x($value) { + background-position-inline-start: $value; +} + +// Component-specific RTL mixins +@mixin dropdown-position-start() { + inset-inline-start: 0; + inset-inline-end: auto; +} +@mixin dropdown-position-end() { + inset-inline-end: 0; + inset-inline-start: auto; +} + +// Icon positioning for buttons and inputs +@mixin icon-start($spacing: 4px) { + margin-inline-end: $spacing; + margin-inline-start: 0; +} +@mixin icon-end($spacing: 4px) { + margin-inline-start: $spacing; + margin-inline-end: 0; +} + +// Tooltip and popover arrow positioning +@mixin arrow-start($size: 8px) { + inset-inline-start: $size; + inset-inline-end: auto; +} +@mixin arrow-end($size: 8px) { + inset-inline-end: $size; + inset-inline-start: auto; +} diff --git a/assets/core/scss/mixins/_typography.scss b/assets/core/scss/mixins/_typography.scss new file mode 100644 index 0000000000..af1861b130 --- /dev/null +++ b/assets/core/scss/mixins/_typography.scss @@ -0,0 +1,47 @@ +@use 'sass:map'; +@use '../tokens' as *; + +@mixin tutor-typography($size: 'medium', $typeface: 'regular', $color: 'primary', $context: 'body') { + $font-size: if( + map.has-key($tutor-font-sizes, $size), + map.get($tutor-font-sizes, $size), + map.get($tutor-font-sizes, 'medium') + ); + $line-height: if( + map.has-key($tutor-line-heights, $size), + map.get($tutor-line-heights, $size), + map.get($tutor-line-heights, 'medium') + ); + $font-weight: if( + map.has-key($tutor-font-weights, $typeface), + map.get($tutor-font-weights, $typeface), + map.get($tutor-font-weights, 'regular') + ); + $color: if( + map.has-key($tutor-text-colors, $color), + map.get($tutor-text-colors, $color), + map.get($tutor-text-colors, 'primary') + ); + + font-family: if($context == 'heading', $tutor-font-family-heading, $tutor-font-family-body); + font-weight: $font-weight; + font-size: $font-size; + line-height: $line-height; + color: $color; +} + +@mixin tutor-text($size: 'medium') { + $font-size: if( + map.has-key($tutor-font-sizes, $size), + map.get($tutor-font-sizes, $size), + map.get($tutor-font-sizes, 'medium') + ); + $line-height: if( + map.has-key($tutor-line-heights, $size), + map.get($tutor-line-heights, $size), + map.get($tutor-line-heights, 'medium') + ); + + font-size: $font-size; + line-height: $line-height; +} diff --git a/assets/core/scss/mixins/_utilities.scss b/assets/core/scss/mixins/_utilities.scss new file mode 100644 index 0000000000..af254767e9 --- /dev/null +++ b/assets/core/scss/mixins/_utilities.scss @@ -0,0 +1,329 @@ +@use '../tokens' as *; + +@mixin tutor-reset { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + background-color: transparent; + color: inherit; + text-decoration: none; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +@mixin tutor-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@mixin tutor-text-clamp($lines: 2) { + display: -webkit-box; + -webkit-line-clamp: $lines; + -webkit-box-orient: vertical; + overflow: hidden; +} + +@mixin tutor-scrollbar( + $width: 8px, + $thumb-color: $tutor-border-idle, + $thumb-hover-color: $tutor-icon-secondary, + $track-color: transparent, + $radius: $tutor-radius-full +) { + scrollbar-width: thin; + scrollbar-color: $thumb-color $track-color; + + &::-webkit-scrollbar { + width: $width; + } + + &::-webkit-scrollbar-track { + background: $track-color; + } + + &::-webkit-scrollbar-thumb { + background: $thumb-color; + border-radius: $radius; + + &:hover { + background: $thumb-hover-color; + } + } +} + +@mixin tutor-focus-ring($color: 'brand', $use-outline: false) { + $shadow: none; + $outline-color: $color; + + @if $color == 'brand' { + $shadow: $tutor-ring-brand-shadow-xs; + $outline-color: #90a0f7; + } + + @if $color == 'error' { + $shadow: $tutor-error-shadow-xs; + $outline-color: $tutor-error-shadow-xs; + } + + @if $use-outline { + outline: 2px solid $outline-color; + outline-offset: 2px; + } @else { + outline: none; + box-shadow: $shadow; + } +} + +@mixin tutor-transition($properties: all, $duration: 0.25s, $timing: ease-in-out, $delay: 0s) { + @if $properties == all { + transition: all $duration $timing $delay; + } @else { + $transitions: (); + + @each $property in $properties { + $transitions: append($transitions, $property $duration $timing $delay, comma); + } + + transition: $transitions; + } +} + +@mixin tutor-hover-lift { + @include tutor-transition(transform); + + &:hover { + transform: translateY(-2px); + } +} + +@mixin tutor-loading-skeleton { + background: linear-gradient(90deg, tutor-surface-l2 25%, tutor-surface-l1 50%, tutor-surface-l2 75%); + background-size: 200% 100%; + animation: tutor-skeleton-loading 1.5s infinite; +} + +@keyframes tutor-skeleton-loading { + 0% { + background-position: 200% 0; + } + + 100% { + background-position: -200% 0; + } +} + +@mixin tutor-aspect-ratio($ratio: 16/9) { + aspect-ratio: $ratio; + + // Fallback for older browsers + @supports not (aspect-ratio: 1) { + position: relative; + + &::before { + content: ''; + display: block; + padding-top: percentage(1 / $ratio); + } + + > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } +} + +// Loading Spinner +@mixin tutor-loading-spinner($lineColor: #ababab, $lineBgColor: #f1f1f1, $size: 20px) { + &::before { + content: ''; + box-sizing: border-box; + position: absolute; + top: 50%; + left: 50%; + width: #{$size}; + height: #{$size}; + margin-top: calc(-1 * #{$size} / 2); + margin-left: calc(-1 * #{$size} / 2); + border-radius: 50%; + border: 2px solid $lineBgColor; + border-top-color: $lineColor; + animation: tutor-spin 0.8s linear infinite; + } +} + +// Animation and Transition Mixins for consistent motion design +@mixin tutor-fade-in($duration: 0.3s, $timing: ease-out) { + opacity: 0; + animation: tutor-fade-in $duration $timing forwards; +} + +@mixin tutor-fade-out($duration: 0.3s, $timing: ease-in) { + animation: tutor-fade-out $duration $timing forwards; +} + +@mixin tutor-slide-in-up($duration: 0.3s, $timing: ease-out, $distance: 20px) { + transform: translateY($distance); + opacity: 0; + animation: tutor-slide-in-up $duration $timing forwards; +} + +@mixin tutor-slide-in-down($duration: 0.3s, $timing: ease-out, $distance: 20px) { + transform: translateY(-$distance); + opacity: 0; + animation: tutor-slide-in-down $duration $timing forwards; +} + +@mixin tutor-slide-in-left($duration: 0.3s, $timing: ease-out, $distance: 20px) { + transform: translateX(-$distance); + opacity: 0; + animation: tutor-slide-in-left $duration $timing forwards; +} + +@mixin tutor-slide-in-right($duration: 0.3s, $timing: ease-out, $distance: 20px) { + transform: translateX($distance); + opacity: 0; + animation: tutor-slide-in-right $duration $timing forwards; +} + +@mixin tutor-scale-in($duration: 0.3s, $timing: ease-out, $scale: 0.95) { + transform: scale($scale); + opacity: 0; + animation: tutor-scale-in $duration $timing forwards; +} + +@mixin tutor-bounce-in($duration: 0.6s) { + transform: scale(0.3); + opacity: 0; + animation: tutor-bounce-in $duration cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; +} + +@mixin tutor-pulse($duration: 2s) { + animation: tutor-pulse $duration infinite; +} + +@mixin tutor-spin($duration: 1s) { + animation: tutor-spin $duration linear infinite; +} + +@mixin tutor-shake($duration: 0.5s) { + animation: tutor-shake $duration ease-in-out; +} + +// Keyframe animations +@keyframes tutor-fade-in { + to { + opacity: 1; + } +} + +@keyframes tutor-fade-out { + to { + opacity: 0; + } +} + +@keyframes tutor-slide-in-up { + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes tutor-slide-in-down { + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes tutor-slide-in-left { + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes tutor-slide-in-right { + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes tutor-scale-in { + to { + transform: scale(1); + opacity: 1; + } +} + +@keyframes tutor-bounce-in { + 0% { + transform: scale(0.3); + opacity: 0; + } + + 50% { + opacity: 1; + } + + 70% { + transform: scale(1.05); + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes tutor-pulse { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } +} + +@keyframes tutor-spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes tutor-shake { + 0%, + 100% { + transform: translateX(0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translateX(-10px); + } + + 20%, + 40%, + 60%, + 80% { + transform: translateX(10px); + } +} diff --git a/assets/core/scss/themes/_dark.scss b/assets/core/scss/themes/_dark.scss new file mode 100644 index 0000000000..79efc7a6d4 --- /dev/null +++ b/assets/core/scss/themes/_dark.scss @@ -0,0 +1,240 @@ +// Dark Theme +// Alternative theme with dark color palette + +@use '../tokens' as *; + +// Mixin containing all dark theme tokens +@mixin dark-theme-tokens { + // ============================================================================= + // SURFACE COLORS + // ============================================================================= + + --tutor-surface-base: #{$tutor-gray-900}; + --tutor-surface-l1: #{$tutor-gray-800}; + --tutor-surface-l1-hover: #{$tutor-gray-750}; + --tutor-surface-l2: #{$tutor-gray-750}; + --tutor-surface-l2-hover: #{$tutor-gray-750}; + --tutor-surface-l3: #{$tutor-exception-7}; + --tutor-surface-brand-dark: #{$tutor-brand-950}; + --tutor-surface-brand-primary: #{$tutor-brand-600}; + --tutor-surface-brand-primary-2: #{$tutor-brand-800}; + --tutor-surface-brand-secondary: #{$tutor-brand-950}; + --tutor-surface-brand-tertiary: #{$tutor-gray-750}; + --tutor-surface-brand-quaternary: #{$tutor-brand-900}; + --tutor-surface-sidebar-l1: #{$tutor-gray-950}; + --tutor-surface-exception2-secondary: #{$tutor-gray-700}; + --tutor-surface-exception3-highlight: #{$tutor-exception-3}; + --tutor-surface-exception6: #{$tutor-exception-8}; + --tutor-surface-exception7: #{$tutor-brand-900}; + --tutor-surface-dark: #{$tutor-gray-600}; + --tutor-surface-warning: #{$tutor-gray-750}; + --tutor-surface-warning-hover: #{$tutor-warning-900}; + --tutor-surface-success: #{$tutor-success-950}; + --tutor-surface-critical: #{$tutor-error-950}; + + // ============================================================================= + // TEXT COLORS + // ============================================================================= + + --tutor-text-primary: #{$tutor-gray-100}; + --tutor-text-primary-inverse: #{$tutor-gray-1}; + --tutor-text-secondary: #{$tutor-gray-300}; + --tutor-text-subdued: #{$tutor-gray-500}; + --tutor-text-disabled: #{$tutor-gray-600}; + --tutor-text-brand: #{$tutor-brand-500}; + --tutor-text-brand-hover: #{$tutor-brand-500}; + --tutor-text-brand-secondary: #{$tutor-brand-400}; + --tutor-text-light: #{$tutor-gray-25}; + --tutor-text-success: #{$tutor-success-600}; + --tutor-text-critical: #{$tutor-error-600}; + --tutor-text-critical-hover: #{$tutor-error-700}; + --tutor-text-warning: #{$tutor-warning-600}; + --tutor-text-caution: #{$tutor-yellow-600}; + --tutor-text-exception1: #{$tutor-exception-1}; + --tutor-text-exception2: #{$tutor-exception-2}; + --tutor-text-exception4: #{$tutor-warning-400}; + --tutor-text-exception5: #{$tutor-exception-5}; + --tutor-text-highlighted-hover: #{$tutor-gray-700}; + + // ============================================================================= + // ICON COLORS + // ============================================================================= + + --tutor-icon-idle: #{$tutor-gray-300}; + --tutor-icon-idle-inverse: #{$tutor-gray-1}; + --tutor-icon-hover: #{$tutor-gray-1}; + --tutor-icon-secondary: #{$tutor-gray-500}; + --tutor-icon-subdued: #{$tutor-gray-600}; + --tutor-icon-disabled: #{$tutor-gray-600}; + --tutor-icon-brand: #{$tutor-brand-500}; + --tutor-icon-brand-hover: #{$tutor-brand-700}; + --tutor-icon-brand-secondary: #{$tutor-gray-750}; + --tutor-icon-exception1: #{$tutor-exception-1}; + --tutor-icon-exception2: #{$tutor-exception-2}; + --tutor-icon-exception4: #{$tutor-warning-400}; + --tutor-icon-exception5: #{$tutor-exception-5}; + --tutor-icon-success-primary: #{$tutor-success-700}; + --tutor-icon-success-secondary: #{$tutor-success-500}; + --tutor-icon-caution: #{$tutor-yellow-400}; + --tutor-icon-critical: #{$tutor-error-600}; + --tutor-icon-critical-hover: #{$tutor-error-700}; + --tutor-icon-warning: #{$tutor-warning-600}; + --tutor-icon-warning-secondary: #{$tutor-warning-400}; + + // ============================================================================= + // BUTTON COLORS + // ============================================================================= + + --tutor-button-primary: #{$tutor-brand-600}; + --tutor-button-primary-hover: #{$tutor-brand-700}; + --tutor-button-primary-focused: #{$tutor-brand-600}; + --tutor-button-primary-disabled: #{$tutor-brand-400}; + --tutor-button-primary-soft: #{$tutor-gray-700}; + --tutor-button-primary-soft-hover: #{$tutor-brand-400}; + --tutor-button-primary-soft-focused: #{$tutor-gray-700}; + --tutor-button-disabled: #{$tutor-gray-750}; + --tutor-button-destructive: #{$tutor-error-600}; + --tutor-button-destructive-hover: #{$tutor-error-700}; + --tutor-button-destructive-focused: #{$tutor-error-600}; + --tutor-button-destructive-soft: #{$tutor-error-100}; + --tutor-button-destructive-soft-hover: #{$tutor-error-200}; + --tutor-button-destructive-soft-focused: #{$tutor-error-100}; + --tutor-button-success: #{$tutor-success-500}; + --tutor-button-success-hover: #{$tutor-success-600}; + --tutor-button-success-focused: #{$tutor-success-500}; + --tutor-button-secondary: #{$tutor-gray-700}; + --tutor-button-secondary-hover: #{$tutor-gray-600}; + --tutor-button-secondary-focused: #{$tutor-gray-700}; + --tutor-button-outline-inverse: #{$tutor-gray-800}; + --tutor-button-outline-hover: #{$tutor-gray-700}; + --tutor-button-outline-focused-inverse: #{$tutor-gray-950}; + --tutor-button-ghost-hover: #{$tutor-gray-700}; + + // ============================================================================= + // BORDER COLORS + // ============================================================================= + + --tutor-border-idle: #{$tutor-gray-750}; + --tutor-border-idle2: #{$tutor-gray-700}; + --tutor-border-hover: #{$tutor-gray-600}; + --tutor-border-tertiary: #{$tutor-gray-600}; + --tutor-border-inverse: #{$tutor-gray-700}; + --tutor-border-brand: #{$tutor-brand-600}; + --tutor-border-brand-secondary: #{$tutor-gray-700}; + --tutor-border-brand-tertiary: #{$tutor-brand-700}; + --tutor-border-dark: #{$tutor-gray-700}; + --tutor-border-success: #{$tutor-success-700}; + --tutor-border-success-secondary: #{$tutor-success-600}; + --tutor-border-warning: #{$tutor-warning-200}; + --tutor-border-warning-secondary: #{$tutor-warning-600}; + --tutor-border-warning-tertiary: #{$tutor-warning-600}; + --tutor-border-error: #{$tutor-error-700}; + --tutor-border-error-secondary: #{$tutor-error-600}; + --tutor-border-error-tertiary: #{$tutor-error-400}; + --tutor-border-exception6: #{$tutor-exception-5}; + + // ============================================================================= + // TAB COLORS + // ============================================================================= + + --tutor-tab-sidebar-l2: #{$tutor-gray-1}; + --tutor-tab-sidebar-l2-hover: #{$tutor-gray-750}; + --tutor-tab-sidebar-l2-active: #{$tutor-gray-800}; + --tutor-tab-sidebar-l4-hover: #{$tutor-gray-750}; + --tutor-tab-sidebar-l4-active: #{$tutor-gray-750}; + --tutor-tab-l3: #{$tutor-gray-750}; + --tutor-tab-l3-hover: #{$tutor-gray-700}; + --tutor-tab-l3-active: #{$tutor-gray-750}; + --tutor-tab-l3-active-hover: #{$tutor-gray-750}; + + // ============================================================================= + // ACTION COLORS + // ============================================================================= + + --tutor-actions-success-primary: #{$tutor-success-600}; + --tutor-actions-success-secondary: #{$tutor-success-200}; + --tutor-actions-success-tertiary: #{$tutor-gray-700}; + --tutor-actions-success-exception: #{$tutor-success-950}; + --tutor-actions-warning-primary: #{$tutor-warning-400}; + --tutor-actions-warning-secondary: #{$tutor-gray-700}; + --tutor-actions-warning-tertiary: #{$tutor-warning-50}; + --tutor-actions-warning-exception: #{$tutor-warning-50}; + --tutor-actions-brand-primary: #{$tutor-brand-500}; + --tutor-actions-brand-secondary: #{$tutor-brand-950}; + --tutor-actions-brand-tertiary: #{$tutor-gray-750}; + --tutor-actions-gray-empty: #{$tutor-gray-800}; + --tutor-actions-gray-secondary: #{$tutor-gray-750}; + --tutor-actions-gray-tertiary: #{$tutor-gray-800}; + --tutor-actions-critical-primary: #{$tutor-error-500}; + --tutor-actions-critical-secondary: #{$tutor-gray-700}; + --tutor-actions-exception3-highlight: #{$tutor-exception-3}; + --tutor-actions-caution: #{$tutor-yellow-400}; + --tutor-actions-caution-secondary: #{$tutor-yellow-100}; + --tutor-actions-inverse: #{$tutor-gray-1}; + --tutor-actions-exception5: #{$tutor-exception-5}; + --tutor-actions-exception6: #{$tutor-exception-6}; + + // ============================================================================= + // QUIZ TOKENS + // ============================================================================= + + --tutor-quiz-idle: #{$tutor-gray-750}; + --tutor-quiz-hover: #{$tutor-gray-700}; + + // ============================================================================= + // VISUAL TOKENS + // ============================================================================= + + --tutor-visual-gray-1: #{$tutor-gray-800}; + --tutor-visual-gray-2: #{$tutor-gray-700}; + --tutor-visual-gray-3: #{$tutor-gray-600}; + --tutor-visual-gray-4: #{$tutor-yellow-800}; + --tutor-visual-brand-1: #{$tutor-brand-600}; + --tutor-visual-brand-2: #{$tutor-brand-800}; + --tutor-visual-brand-3: #{$tutor-brand-900}; + --tutor-visual-success-1: #{$tutor-success-500}; + --tutor-visual-success-2: #{$tutor-success-500}; + --tutor-visual-critical-1: #{$tutor-error-600}; + --tutor-visual-critical-2: #{$tutor-error-900}; + --tutor-visual-caution-1: #{$tutor-yellow-600}; + --tutor-visual-caution-2: #{$tutor-yellow-700}; + --tutor-visual-caution-3: #{$tutor-yellow-900}; + --tutor-visual-orange-1: #{$tutor-orange-400}; + --tutor-visual-exception-1: #{$tutor-exception-3}; + --tutor-visual-exception-2: #{$tutor-exception-9}; + --tutor-visual-exception-3: #{$tutor-exception-2}; + + // ============================================================================= + // TYPOGRAPHY TOKENS + // ============================================================================= + + --tutor-font-weight-regular: #{$tutor-font-weight-regular}; + --tutor-font-weight-medium: #{$tutor-font-weight-medium}; + --tutor-font-weight-semibold: #{$tutor-font-weight-semibold}; + --tutor-font-weight-bold: #{$tutor-font-weight-bold}; + + // ============================================================================= + // SHADOW TOKENS + // ============================================================================= + + --tutor-shadow-xs: #{$tutor-shadow-xs}; + --tutor-shadow-sm: #{$tutor-shadow-sm}; + --tutor-shadow-md: #{$tutor-shadow-md}; + --tutor-shadow-lg: #{$tutor-shadow-lg}; + --tutor-shadow-xl: #{$tutor-shadow-xl}; + --tutor-shadow-2xl: #{$tutor-shadow-2xl}; + --tutor-shadow-3xl: #{$tutor-shadow-3xl}; +} + +// Apply dark theme when explicitly set +[data-tutor-theme='dark'] { + @include dark-theme-tokens; +} + +// Apply dark theme when system preference is dark +// This prevents flash of light theme before JS loads +@media (prefers-color-scheme: dark) { + [data-tutor-theme='system'] { + @include dark-theme-tokens; + } +} diff --git a/assets/core/scss/themes/_deuteranomaly.scss b/assets/core/scss/themes/_deuteranomaly.scss new file mode 100644 index 0000000000..2aa8d15511 --- /dev/null +++ b/assets/core/scss/themes/_deuteranomaly.scss @@ -0,0 +1,150 @@ +// Deuteranomaly Theme +// CVD variant for users with Deuteranomaly (shifted green cone cells — most common form). +// Replaces red/error tokens with Orange palette; success tokens use Cyan where needed. +// Applies on top of the active light or dark base theme via data-tutor-vision. + +@use '../tokens' as *; + +// ============================================================================= +// SHARED — identical values in both light and dark +// ============================================================================= + +[data-tutor-vision='deuteranomaly'] { + // ICON COLORS + --tutor-icon-caution: #{$tutor-yellow-500}; + --tutor-icon-critical: #{$tutor-orange-600}; + --tutor-icon-critical-hover: #{$tutor-orange-700}; + --tutor-icon-warning: #{$tutor-orange-700}; + --tutor-icon-warning-secondary: #{$tutor-yellow-500}; + + // BUTTON COLORS + --tutor-button-destructive: #{$tutor-orange-600}; + --tutor-button-destructive-hover: #{$tutor-orange-700}; + --tutor-button-destructive-focused: #{$tutor-orange-600}; + --tutor-button-destructive-soft: #{$tutor-orange-100}; + --tutor-button-destructive-soft-hover: #{$tutor-orange-200}; + --tutor-button-destructive-soft-focused: #{$tutor-orange-100}; + + // BORDER COLORS + --tutor-border-warning: #{$tutor-yellow-300}; + --tutor-border-warning-secondary: #{$tutor-orange-700}; + --tutor-border-success: #{$tutor-cyan-400}; + --tutor-border-success-secondary: #{$tutor-cyan-600}; + --tutor-border-error-secondary: #{$tutor-orange-700}; + --tutor-border-error-tertiary: #{$tutor-orange-400}; + + // ACTION COLORS + --tutor-actions-success-primary: #{$tutor-cyan-500}; + --tutor-actions-success-secondary: #{$tutor-cyan-400}; + --tutor-actions-warning-primary: #{$tutor-orange-300}; + --tutor-actions-warning-tertiary: #{$tutor-orange-50}; + --tutor-actions-critical-primary: #{$tutor-orange-600}; + --tutor-actions-caution: #{$tutor-yellow-500}; + --tutor-actions-caution-secondary: #{$tutor-yellow-100}; + + // TEXT COLORS + --tutor-text-critical: #{$tutor-orange-600}; + --tutor-text-critical-hover: #{$tutor-orange-700}; + --tutor-text-warning: #{$tutor-orange-700}; + --tutor-text-caution: #{$tutor-yellow-700}; + + // VISUAL COLORS + --tutor-visual-success-1: #{$tutor-cyan-500}; + --tutor-visual-success-2: #{$tutor-cyan-500}; + --tutor-visual-exception-1: #{$tutor-cyan-200}; +} + +// ============================================================================= +// LIGHT — overrides specific to the light base theme +// ============================================================================= + +@mixin deuteranomaly-light-tokens { + // SURFACE COLORS + --tutor-surface-warning: #{$tutor-warning-50}; + --tutor-surface-warning-hover: #{$tutor-warning-100}; + --tutor-surface-success: #{$tutor-cyan-50}; + --tutor-surface-critical: #{$tutor-orange-100}; + + // TEXT COLORS + --tutor-text-success: #{$tutor-success-700}; + + // ICON COLORS + --tutor-icon-success-primary: #{$tutor-success-600}; + --tutor-icon-success-secondary: #{$tutor-success-700}; + + // BUTTON COLORS + --tutor-button-success: #{$tutor-cyan-500}; + --tutor-button-success-hover: #{$tutor-cyan-600}; + --tutor-button-success-focused: #{$tutor-cyan-600}; + + // BORDER COLORS + --tutor-border-warning-tertiary: #{$tutor-orange-400}; + --tutor-border-error: #{$tutor-orange-300}; + + // ACTION COLORS + --tutor-actions-success-tertiary: #{$tutor-cyan-100}; + --tutor-actions-success-exception: #{$tutor-cyan-400}; + --tutor-actions-warning-secondary: #{$tutor-orange-100}; + --tutor-actions-warning-exception: #{$tutor-orange-600}; + --tutor-actions-critical-secondary: #{$tutor-orange-100}; + + // VISUAL COLORS + --tutor-visual-critical-1: #{$tutor-error-500}; + --tutor-visual-critical-2: #{$tutor-orange-100}; +} + +// ============================================================================= +// DARK — overrides specific to the dark base theme +// ============================================================================= + +@mixin deuteranomaly-dark-tokens { + // SURFACE COLORS + --tutor-surface-warning: #{$tutor-gray-750}; + --tutor-surface-warning-hover: #{$tutor-warning-900}; + --tutor-surface-success: #{$tutor-cyan-900}; + --tutor-surface-critical: #{$tutor-orange-900}; + + // TEXT COLORS + --tutor-text-success: #{$tutor-cyan-400}; + + // ICON COLORS + --tutor-icon-success-primary: #{$tutor-cyan-500}; + --tutor-icon-success-secondary: #{$tutor-cyan-600}; + --tutor-icon-exception4: #{$tutor-warning-400}; + + // BUTTON COLORS + --tutor-button-success: #{$tutor-cyan-500}; + --tutor-button-success-hover: #{$tutor-cyan-600}; + --tutor-button-success-focused: #{$tutor-cyan-500}; + + // BORDER COLORS + --tutor-border-warning-tertiary: #{$tutor-orange-300}; + --tutor-border-success: #{$tutor-cyan-300}; + --tutor-border-error: #{$tutor-orange-300}; + + // ACTION COLORS + --tutor-actions-success-tertiary: #{$tutor-gray-700}; + --tutor-actions-success-exception: #{$tutor-cyan-950}; + --tutor-actions-warning-secondary: #{$tutor-gray-700}; + --tutor-actions-warning-exception: #{$tutor-orange-50}; + --tutor-actions-critical-secondary: #{$tutor-gray-700}; + + // VISUAL COLORS + --tutor-visual-critical-1: #{$tutor-error-600}; + --tutor-visual-critical-2: #{$tutor-orange-900}; +} + +[data-tutor-theme='light'][data-tutor-vision='deuteranomaly'], +[data-tutor-theme='system'][data-tutor-vision='deuteranomaly'] { + @include deuteranomaly-light-tokens; +} + +[data-tutor-theme='dark'][data-tutor-vision='deuteranomaly'] { + @include deuteranomaly-dark-tokens; +} + +@media (prefers-color-scheme: dark) { + [data-tutor-theme='system'][data-tutor-vision='deuteranomaly'] { + @include deuteranomaly-dark-tokens; + } +} diff --git a/assets/core/scss/themes/_deuteranopia.scss b/assets/core/scss/themes/_deuteranopia.scss new file mode 100644 index 0000000000..1b0a45a409 --- /dev/null +++ b/assets/core/scss/themes/_deuteranopia.scss @@ -0,0 +1,144 @@ +// Deuteranopia Theme +// CVD variant for users with Deuteranopia (absent green cone cells). +// Replaces green/success tokens with Cyan palette and red/error tokens with Orange palette. +// Applies on top of the active light or dark base theme via data-tutor-vision. + +@use '../tokens' as *; + +// ============================================================================= +// SHARED — identical values in both light and dark +// ============================================================================= + +[data-tutor-vision='deuteranopia'] { + // ICON COLORS + --tutor-icon-success-primary: #{$tutor-cyan-600}; + --tutor-icon-success-secondary: #{$tutor-cyan-700}; + --tutor-icon-caution: #{$tutor-yellow-500}; + --tutor-icon-critical: #{$tutor-orange-500}; + --tutor-icon-critical-hover: #{$tutor-orange-600}; + --tutor-icon-warning: #{$tutor-orange-700}; + --tutor-icon-warning-secondary: #{$tutor-yellow-500}; + + // BUTTON COLORS + --tutor-button-destructive: #{$tutor-orange-600}; + --tutor-button-destructive-hover: #{$tutor-orange-700}; + --tutor-button-destructive-focused: #{$tutor-orange-600}; + --tutor-button-destructive-soft: #{$tutor-orange-100}; + --tutor-button-destructive-soft-hover: #{$tutor-orange-200}; + --tutor-button-destructive-soft-focused: #{$tutor-orange-100}; + --tutor-button-success: #{$tutor-cyan-600}; + --tutor-button-success-hover: #{$tutor-cyan-700}; + --tutor-button-success-focused: #{$tutor-cyan-600}; + + // BORDER COLORS + --tutor-border-warning-tertiary: #{$tutor-orange-300}; + --tutor-border-success: #{$tutor-cyan-400}; + --tutor-border-success-secondary: #{$tutor-cyan-600}; + --tutor-border-error: #{$tutor-orange-400}; + --tutor-border-error-secondary: #{$tutor-orange-600}; + --tutor-border-error-tertiary: #{$tutor-orange-300}; + + // ACTION COLORS + --tutor-actions-warning-primary: #{$tutor-orange-300}; + --tutor-actions-warning-tertiary: #{$tutor-orange-50}; + --tutor-actions-caution: #{$tutor-yellow-400}; + --tutor-actions-caution-secondary: #{$tutor-yellow-100}; + + // TEXT COLORS + --tutor-text-critical: #{$tutor-orange-500}; + --tutor-text-warning: #{$tutor-orange-600}; + --tutor-text-caution: #{$tutor-yellow-600}; + + // VISUAL COLORS + --tutor-visual-success-1: #{$tutor-cyan-500}; + --tutor-visual-exception-1: #{$tutor-cyan-400}; +} + +// ============================================================================= +// LIGHT — overrides specific to the light base theme +// ============================================================================= + +@mixin deuteranopia-light-tokens { + // SURFACE COLORS + --tutor-surface-warning: #{$tutor-warning-50}; + --tutor-surface-warning-hover: #{$tutor-warning-100}; + --tutor-surface-success: #{$tutor-cyan-50}; + --tutor-surface-critical: #{$tutor-orange-100}; + + // TEXT COLORS + --tutor-text-success: #{$tutor-cyan-700}; + --tutor-text-critical-hover: #{$tutor-warning-600}; + + // BORDER COLORS + --tutor-border-warning: #{$tutor-yellow-400}; + --tutor-border-warning-secondary: #{$tutor-orange-600}; + + // ACTION COLORS + --tutor-actions-success-primary: #{$tutor-cyan-600}; + --tutor-actions-success-secondary: #{$tutor-cyan-500}; + --tutor-actions-success-tertiary: #{$tutor-cyan-100}; + --tutor-actions-success-exception: #{$tutor-cyan-400}; + --tutor-actions-warning-secondary: #{$tutor-orange-100}; + --tutor-actions-warning-exception: #{$tutor-orange-500}; + --tutor-actions-critical-primary: #{$tutor-orange-500}; + --tutor-actions-critical-secondary: #{$tutor-orange-100}; + + // VISUAL COLORS + --tutor-visual-success-2: #{$tutor-cyan-500}; + --tutor-visual-critical-1: #{$tutor-orange-500}; + --tutor-visual-critical-2: #{$tutor-orange-300}; +} + +// ============================================================================= +// DARK — overrides specific to the dark base theme +// ============================================================================= + +@mixin deuteranopia-dark-tokens { + // SURFACE COLORS + --tutor-surface-warning: #{$tutor-gray-750}; + --tutor-surface-warning-hover: #{$tutor-warning-900}; + --tutor-surface-success: #{$tutor-cyan-900}; + --tutor-surface-critical: #{$tutor-orange-900}; + + // TEXT COLORS + --tutor-text-success: #{$tutor-cyan-400}; + --tutor-text-critical-hover: #{$tutor-orange-600}; + + // ICON COLORS + --tutor-icon-exception4: #{$tutor-warning-400}; + + // BORDER COLORS + --tutor-border-warning: #{$tutor-yellow-300}; + --tutor-border-warning-secondary: #{$tutor-orange-700}; + + // ACTION COLORS + --tutor-actions-success-primary: #{$tutor-cyan-500}; + --tutor-actions-success-secondary: #{$tutor-cyan-400}; + --tutor-actions-success-tertiary: #{$tutor-gray-700}; + --tutor-actions-success-exception: #{$tutor-cyan-950}; + --tutor-actions-warning-secondary: #{$tutor-gray-700}; + --tutor-actions-warning-exception: #{$tutor-orange-50}; + --tutor-actions-critical-primary: #{$tutor-orange-600}; + --tutor-actions-critical-secondary: #{$tutor-gray-700}; + --tutor-actions-caution: #{$tutor-yellow-500}; + + // VISUAL COLORS + --tutor-visual-success-2: #{$tutor-cyan-600}; + --tutor-visual-critical-1: #{$tutor-orange-600}; + --tutor-visual-critical-2: #{$tutor-orange-900}; +} + +[data-tutor-theme='light'][data-tutor-vision='deuteranopia'], +[data-tutor-theme='system'][data-tutor-vision='deuteranopia'] { + @include deuteranopia-light-tokens; +} + +[data-tutor-theme='dark'][data-tutor-vision='deuteranopia'] { + @include deuteranopia-dark-tokens; +} + +@media (prefers-color-scheme: dark) { + [data-tutor-theme='system'][data-tutor-vision='deuteranopia'] { + @include deuteranopia-dark-tokens; + } +} diff --git a/assets/core/scss/themes/_high-contrast.scss b/assets/core/scss/themes/_high-contrast.scss new file mode 100644 index 0000000000..0a9ff83b73 --- /dev/null +++ b/assets/core/scss/themes/_high-contrast.scss @@ -0,0 +1,89 @@ +// High Contrast Theme +// Accessibility variant with increased contrast ratios for users who need +// higher foreground/background differentiation. +// Applies on top of the active light or dark base theme via data-tutor-contrast. + +@use '../tokens' as *; + +// ============================================================================= +// LIGHT — overrides specific to the light base theme +// ============================================================================= + +@mixin high-contrast-light-tokens { + // TEXT COLORS + --tutor-text-primary: #{$tutor-gray-950}; + --tutor-text-secondary: #{$tutor-gray-950}; + --tutor-text-subdued: #{$tutor-gray-950}; + --tutor-text-disabled: #{$tutor-gray-500}; + + // ICON COLORS + --tutor-icon-idle: #{$tutor-gray-750}; + --tutor-icon-hover: #{$tutor-gray-900}; + --tutor-icon-secondary: #{$tutor-gray-700}; + --tutor-icon-subdued: #{$tutor-gray-700}; + --tutor-icon-disabled: #{$tutor-gray-400}; + + // BORDER COLORS + --tutor-border-idle: #{$tutor-gray-800}; + --tutor-border-hover: #{$tutor-gray-900}; + --tutor-border-tertiary: #{$tutor-gray-800}; + --tutor-border-brand: #{$tutor-brand-600}; + --tutor-border-brand-secondary: #{$tutor-brand-800}; + --tutor-border-brand-tertiary: #{$tutor-brand-800}; + + // VISUAL COLORS + --tutor-visual-success-1: #{$tutor-success-500}; + --tutor-visual-success-2: #{$tutor-success-500}; + --tutor-visual-critical-1: #{$tutor-error-500}; + --tutor-visual-critical-2: #{$tutor-error-100}; + --tutor-visual-exception-1: #{$tutor-exception-3}; +} + +// ============================================================================= +// DARK — overrides specific to the dark base theme +// ============================================================================= + +@mixin high-contrast-dark-tokens { + // TEXT COLORS + --tutor-text-primary: #{$tutor-gray-100}; + --tutor-text-secondary: #{$tutor-gray-50}; + --tutor-text-subdued: #{$tutor-gray-50}; + --tutor-text-disabled: #{$tutor-gray-300}; + + // ICON COLORS + --tutor-icon-idle: #{$tutor-gray-300}; + --tutor-icon-hover: #{$tutor-gray-1}; + --tutor-icon-secondary: #{$tutor-gray-500}; + --tutor-icon-subdued: #{$tutor-gray-600}; + --tutor-icon-disabled: #{$tutor-gray-600}; + + // BORDER COLORS + --tutor-border-idle: #{$tutor-gray-400}; + --tutor-border-hover: #{$tutor-gray-300}; + --tutor-border-tertiary: #{$tutor-gray-300}; + --tutor-border-brand: #{$tutor-brand-200}; + --tutor-border-brand-secondary: #{$tutor-brand-800}; + --tutor-border-brand-tertiary: #{$tutor-brand-700}; + + // VISUAL COLORS + --tutor-visual-success-1: #{$tutor-success-500}; + --tutor-visual-success-2: #{$tutor-success-500}; + --tutor-visual-critical-1: #{$tutor-error-600}; + --tutor-visual-critical-2: #{$tutor-error-900}; + --tutor-visual-exception-1: #{$tutor-exception-3}; +} + +[data-tutor-theme='light'][data-tutor-contrast='high'], +[data-tutor-theme='system'][data-tutor-contrast='high'] { + @include high-contrast-light-tokens; +} + +[data-tutor-theme='dark'][data-tutor-contrast='high'] { + @include high-contrast-dark-tokens; +} + +@media (prefers-color-scheme: dark) { + [data-tutor-theme='system'][data-tutor-contrast='high'] { + @include high-contrast-dark-tokens; + } +} diff --git a/assets/core/scss/themes/_index.scss b/assets/core/scss/themes/_index.scss new file mode 100644 index 0000000000..313e109e95 --- /dev/null +++ b/assets/core/scss/themes/_index.scss @@ -0,0 +1,6 @@ +@forward "light"; +@forward "dark"; +@forward "high-contrast"; +@forward "protanopia"; +@forward "deuteranopia"; +@forward "deuteranomaly"; diff --git a/assets/core/scss/themes/_light.scss b/assets/core/scss/themes/_light.scss new file mode 100644 index 0000000000..c39654bd56 --- /dev/null +++ b/assets/core/scss/themes/_light.scss @@ -0,0 +1,227 @@ +// Light Theme +// Default theme with light color palette + +@use '../tokens' as *; + +:root, +[data-tutor-theme='light'] { + // ============================================================================= + // SURFACE COLORS + // ============================================================================= + + --tutor-surface-base: #{$tutor-gray-25}; + --tutor-surface-l1: #{$tutor-gray-1}; + --tutor-surface-l1-hover: #{$tutor-gray-50}; + --tutor-surface-l2: #{$tutor-gray-200}; + --tutor-surface-l2-hover: #{$tutor-gray-300}; + --tutor-surface-l3: #{$tutor-gray-50}; + --tutor-surface-brand-dark: #{$tutor-brand-950}; + --tutor-surface-brand-primary: #{$tutor-brand-600}; + --tutor-surface-brand-primary-2: #{$tutor-brand-800}; + --tutor-surface-brand-secondary: #{$tutor-brand-300}; + --tutor-surface-brand-tertiary: #{$tutor-brand-100}; + --tutor-surface-brand-quaternary: #{$tutor-brand-200}; + --tutor-surface-sidebar-l1: #{$tutor-gray-10}; + --tutor-surface-exception2-secondary: #{$tutor-exception-2-secondary}; + --tutor-surface-exception3-highlight: #{$tutor-exception-3}; + --tutor-surface-exception6: #{$tutor-exception-6}; + --tutor-surface-exception7: #{$tutor-brand-900}; + --tutor-surface-dark: #{$tutor-gray-950}; + --tutor-surface-warning: #{$tutor-warning-50}; + --tutor-surface-warning-hover: #{$tutor-warning-100}; + --tutor-surface-success: #{$tutor-success-50}; + --tutor-surface-critical: #{$tutor-error-100}; + + // ============================================================================= + // TEXT COLORS + // ============================================================================= + + --tutor-text-primary: #{$tutor-gray-950}; + --tutor-text-primary-inverse: #{$tutor-gray-1}; + --tutor-text-secondary: #{$tutor-gray-700}; + --tutor-text-subdued: #{$tutor-gray-500}; + --tutor-text-disabled: #{$tutor-gray-300}; + --tutor-text-brand: #{$tutor-brand-600}; + --tutor-text-brand-hover: #{$tutor-brand-700}; + --tutor-text-brand-secondary: #{$tutor-brand-400}; + --tutor-text-light: #{$tutor-gray-25}; + --tutor-text-success: #{$tutor-success-700}; + --tutor-text-critical: #{$tutor-error-600}; + --tutor-text-critical-hover: #{$tutor-error-700}; + --tutor-text-warning: #{$tutor-warning-800}; + --tutor-text-caution: #{$tutor-yellow-800}; + --tutor-text-exception1: #{$tutor-exception-1}; + --tutor-text-exception2: #{$tutor-exception-2}; + --tutor-text-exception4: #{$tutor-warning-400}; + --tutor-text-exception5: #{$tutor-exception-5}; + --tutor-text-highlighted-hover: #{$tutor-gray-700}; + + // ============================================================================= + // ICON COLORS + // ============================================================================= + + --tutor-icon-idle: #{$tutor-gray-700}; + --tutor-icon-idle-inverse: #{$tutor-gray-1}; + --tutor-icon-hover: #{$tutor-gray-900}; + --tutor-icon-secondary: #{$tutor-gray-500}; + --tutor-icon-subdued: #{$tutor-gray-400}; + --tutor-icon-disabled: #{$tutor-gray-300}; + --tutor-icon-brand: #{$tutor-brand-600}; + --tutor-icon-brand-hover: #{$tutor-brand-700}; + --tutor-icon-brand-secondary: #{$tutor-brand-300}; + --tutor-icon-exception1: #{$tutor-exception-1}; + --tutor-icon-exception2: #{$tutor-exception-2}; + --tutor-icon-exception4: #{$tutor-warning-400}; + --tutor-icon-exception5: #{$tutor-exception-5}; + --tutor-icon-success-primary: #{$tutor-success-700}; + --tutor-icon-success-secondary: #{$tutor-success-600}; + --tutor-icon-caution: #{$tutor-yellow-400}; + --tutor-icon-critical: #{$tutor-error-600}; + --tutor-icon-critical-hover: #{$tutor-error-700}; + --tutor-icon-warning: #{$tutor-warning-700}; + --tutor-icon-warning-secondary: #{$tutor-warning-400}; + + // ============================================================================= + // BUTTON COLORS + // ============================================================================= + + --tutor-button-primary: #{$tutor-brand-600}; + --tutor-button-primary-hover: #{$tutor-brand-700}; + --tutor-button-primary-focused: #{$tutor-brand-600}; + --tutor-button-primary-disabled: #{$tutor-brand-400}; + --tutor-button-primary-soft: #{$tutor-brand-200}; + --tutor-button-primary-soft-hover: #{$tutor-brand-300}; + --tutor-button-primary-soft-focused: #{$tutor-brand-200}; + --tutor-button-disabled: #{$tutor-gray-100}; + --tutor-button-destructive: #{$tutor-error-600}; + --tutor-button-destructive-hover: #{$tutor-error-700}; + --tutor-button-destructive-focused: #{$tutor-error-600}; + --tutor-button-destructive-soft: #{$tutor-error-100}; + --tutor-button-destructive-soft-hover: #{$tutor-error-200}; + --tutor-button-destructive-soft-focused: #{$tutor-error-100}; + --tutor-button-success: #{$tutor-success-600}; + --tutor-button-success-hover: #{$tutor-success-700}; + --tutor-button-success-focused: #{$tutor-success-600}; + --tutor-button-secondary: #{$tutor-gray-200}; + --tutor-button-secondary-hover: #{$tutor-gray-300}; + --tutor-button-secondary-focused: #{$tutor-gray-200}; + --tutor-button-outline-inverse: #{$tutor-gray-1}; + --tutor-button-outline-hover: #{$tutor-gray-200}; + --tutor-button-outline-focused-inverse: #{$tutor-gray-1}; + --tutor-button-ghost-hover: #{$tutor-gray-200}; + + // ============================================================================= + // BORDER COLORS + // ============================================================================= + + --tutor-border-idle: #{$tutor-gray-200}; + --tutor-border-idle2: #{$tutor-gray-200}; + --tutor-border-hover: #{$tutor-gray-300}; + --tutor-border-tertiary: #{$tutor-gray-400}; + --tutor-border-inverse: #{$tutor-gray-1}; + --tutor-border-brand: #{$tutor-brand-600}; + --tutor-border-brand-secondary: #{$tutor-brand-300}; + --tutor-border-brand-tertiary: #{$tutor-brand-400}; + --tutor-border-dark: #{$tutor-gray-950}; + --tutor-border-success: #{$tutor-success-300}; + --tutor-border-success-secondary: #{$tutor-success-700}; + --tutor-border-warning: #{$tutor-warning-200}; + --tutor-border-warning-secondary: #{$tutor-warning-700}; + --tutor-border-warning-tertiary: #{$tutor-warning-400}; + --tutor-border-error: #{$tutor-error-300}; + --tutor-border-error-secondary: #{$tutor-error-700}; + --tutor-border-error-tertiary: #{$tutor-error-400}; + --tutor-border-exception6: #{$tutor-exception-5}; + + // ============================================================================= + // TAB COLORS + // ============================================================================= + + --tutor-tab-sidebar-l2: #{$tutor-gray-10}; + --tutor-tab-sidebar-l2-hover: #{$tutor-gray-200}; + --tutor-tab-sidebar-l2-active: #{$tutor-brand-200}; + --tutor-tab-sidebar-l4-hover: #{$tutor-gray-200}; + --tutor-tab-sidebar-l4-active: #{$tutor-brand-200}; + --tutor-tab-l3: #{$tutor-brand-200}; + --tutor-tab-l3-hover: #{$tutor-brand-300}; + --tutor-tab-l3-active: #{$tutor-brand-200}; + --tutor-tab-l3-active-hover: #{$tutor-gray-100}; + + // ============================================================================= + // ACTION COLORS + // ============================================================================= + + --tutor-actions-success-primary: #{$tutor-success-600}; + --tutor-actions-success-secondary: #{$tutor-success-200}; + --tutor-actions-success-tertiary: #{$tutor-success-50}; + --tutor-actions-success-exception: #{$tutor-success-500}; + --tutor-actions-warning-primary: #{$tutor-warning-400}; + --tutor-actions-warning-secondary: #{$tutor-warning-100}; + --tutor-actions-warning-tertiary: #{$tutor-warning-50}; + --tutor-actions-warning-exception: #{$tutor-warning-500}; + --tutor-actions-brand-primary: #{$tutor-brand-600}; + --tutor-actions-brand-secondary: #{$tutor-brand-300}; + --tutor-actions-brand-tertiary: #{$tutor-brand-200}; + --tutor-actions-gray-empty: #{$tutor-gray-50}; + --tutor-actions-gray-secondary: #{$tutor-gray-100}; + --tutor-actions-gray-tertiary: #{$tutor-gray-200}; + --tutor-actions-critical-primary: #{$tutor-error-500}; + --tutor-actions-critical-secondary: #{$tutor-error-100}; + --tutor-actions-exception3-highlight: #{$tutor-exception-3}; + --tutor-actions-caution: #{$tutor-yellow-400}; + --tutor-actions-caution-secondary: #{$tutor-yellow-100}; + --tutor-actions-inverse: #{$tutor-gray-1}; + --tutor-actions-exception5: #{$tutor-exception-5}; + --tutor-actions-exception6: #{$tutor-exception-6}; + + // ============================================================================= + // QUIZ TOKENS + // ============================================================================= + + --tutor-quiz-idle: #{$tutor-gray-25}; + --tutor-quiz-hover: #{$tutor-gray-100}; + + // ============================================================================= + // VISUAL TOKENS + // ============================================================================= + + --tutor-visual-gray-1: #{$tutor-gray-1}; + --tutor-visual-gray-2: #{$tutor-gray-200}; + --tutor-visual-gray-3: #{$tutor-gray-300}; + --tutor-visual-gray-4: #{$tutor-gray-750}; + --tutor-visual-brand-1: #{$tutor-brand-500}; + --tutor-visual-brand-2: #{$tutor-brand-400}; + --tutor-visual-brand-3: #{$tutor-brand-300}; + --tutor-visual-success-1: #{$tutor-success-500}; + --tutor-visual-success-2: #{$tutor-success-500}; + --tutor-visual-critical-1: #{$tutor-error-500}; + --tutor-visual-critical-2: #{$tutor-error-100}; + --tutor-visual-caution-1: #{$tutor-yellow-300}; + --tutor-visual-caution-2: #{$tutor-yellow-700}; + --tutor-visual-caution-3: #{$tutor-yellow-900}; + --tutor-visual-orange-1: #{$tutor-orange-400}; + --tutor-visual-exception-1: #{$tutor-exception-3}; + --tutor-visual-exception-2: #{$tutor-exception-9}; + --tutor-visual-exception-3: #{$tutor-exception-2}; + + // ============================================================================= + // TYPOGRAPHY TOKENS + // ============================================================================= + + --tutor-font-weight-regular: #{$tutor-font-weight-regular}; + --tutor-font-weight-medium: #{$tutor-font-weight-medium}; + --tutor-font-weight-semibold: #{$tutor-font-weight-semibold}; + --tutor-font-weight-bold: #{$tutor-font-weight-bold}; + + // ============================================================================= + // SHADOW TOKENS + // ============================================================================= + + --tutor-shadow-xs: #{$tutor-shadow-xs}; + --tutor-shadow-sm: #{$tutor-shadow-sm}; + --tutor-shadow-md: #{$tutor-shadow-md}; + --tutor-shadow-lg: #{$tutor-shadow-lg}; + --tutor-shadow-xl: #{$tutor-shadow-xl}; + --tutor-shadow-2xl: #{$tutor-shadow-2xl}; + --tutor-shadow-3xl: #{$tutor-shadow-3xl}; +} diff --git a/assets/core/scss/themes/_protanopia.scss b/assets/core/scss/themes/_protanopia.scss new file mode 100644 index 0000000000..2f310ce708 --- /dev/null +++ b/assets/core/scss/themes/_protanopia.scss @@ -0,0 +1,122 @@ +// Protanopia Theme +// CVD variant for users with Protanopia (absent red cone cells). +// Replaces green/success tokens with Cyan palette and red/error tokens with Orange palette. +// Applies on top of the active light or dark base theme via data-tutor-vision. + +@use '../tokens' as *; + +// ============================================================================= +// SHARED — identical values in both light and dark +// ============================================================================= + +[data-tutor-vision='protanopia'] { + // ICON COLORS + --tutor-icon-success-primary: #{$tutor-cyan-500}; + --tutor-icon-success-secondary: #{$tutor-cyan-600}; + --tutor-icon-caution: #{$tutor-yellow-500}; + --tutor-icon-critical: #{$tutor-orange-600}; + --tutor-icon-critical-hover: #{$tutor-orange-700}; + --tutor-icon-warning: #{$tutor-orange-700}; + --tutor-icon-warning-secondary: #{$tutor-yellow-500}; + + // BUTTON COLORS + --tutor-button-destructive: #{$tutor-orange-600}; + --tutor-button-destructive-hover: #{$tutor-orange-700}; + --tutor-button-destructive-focused: #{$tutor-orange-600}; + --tutor-button-destructive-soft: #{$tutor-orange-100}; + --tutor-button-destructive-soft-hover: #{$tutor-orange-200}; + --tutor-button-destructive-soft-focused: #{$tutor-orange-100}; + --tutor-button-success: #{$tutor-cyan-500}; + --tutor-button-success-hover: #{$tutor-cyan-600}; + --tutor-button-success-focused: #{$tutor-cyan-500}; + + // BORDER COLORS + --tutor-border-warning: #{$tutor-yellow-300}; + --tutor-border-warning-secondary: #{$tutor-orange-700}; + --tutor-border-warning-tertiary: #{$tutor-orange-300}; + --tutor-border-success: #{$tutor-cyan-300}; + --tutor-border-success-secondary: #{$tutor-cyan-600}; + --tutor-border-error: #{$tutor-orange-300}; + --tutor-border-error-secondary: #{$tutor-orange-700}; + --tutor-border-error-tertiary: #{$tutor-orange-400}; + + // ACTION COLORS + --tutor-actions-success-primary: #{$tutor-cyan-500}; + --tutor-actions-success-secondary: #{$tutor-cyan-400}; + --tutor-actions-success-exception: #{$tutor-cyan-400}; + --tutor-actions-warning-primary: #{$tutor-orange-300}; + --tutor-actions-warning-tertiary: #{$tutor-orange-50}; + --tutor-actions-critical-primary: #{$tutor-orange-600}; + --tutor-actions-caution: #{$tutor-yellow-500}; + --tutor-actions-caution-secondary: #{$tutor-yellow-100}; + + // TEXT COLORS + --tutor-text-critical: #{$tutor-orange-600}; + --tutor-text-critical-hover: #{$tutor-orange-700}; + --tutor-text-warning: #{$tutor-orange-700}; + --tutor-text-caution: #{$tutor-yellow-700}; + + // VISUAL COLORS + --tutor-visual-success-1: #{$tutor-cyan-500}; + --tutor-visual-success-2: #{$tutor-cyan-500}; + --tutor-visual-exception-1: #{$tutor-cyan-200}; +} + +// ============================================================================= +// LIGHT — overrides specific to the light base theme +// ============================================================================= + +@mixin protanopia-light-tokens { + // SURFACE COLORS + --tutor-surface-success: #{$tutor-cyan-50}; + --tutor-surface-critical: #{$tutor-orange-100}; + + // TEXT COLORS + --tutor-text-success: #{$tutor-cyan-700}; + + // ACTION COLORS + --tutor-actions-success-tertiary: #{$tutor-cyan-100}; + --tutor-actions-warning-secondary: #{$tutor-orange-100}; + --tutor-actions-warning-exception: #{$tutor-orange-600}; + --tutor-actions-critical-secondary: #{$tutor-orange-100}; + + // VISUAL COLORS + --tutor-visual-critical-1: #{$tutor-orange-500}; + --tutor-visual-critical-2: #{$tutor-orange-100}; +} + +// ============================================================================= +// DARK — overrides specific to the dark base theme +// ============================================================================= + +@mixin protanopia-dark-tokens { + // SURFACE COLORS + --tutor-surface-success: #{$tutor-cyan-900}; + --tutor-surface-critical: #{$tutor-orange-900}; + + // TEXT COLORS + --tutor-text-success: #{$tutor-cyan-400}; + + // ACTION COLORS + --tutor-actions-success-exception: #{$tutor-cyan-950}; + --tutor-actions-warning-exception: #{$tutor-orange-50}; + + // VISUAL COLORS + --tutor-visual-critical-1: #{$tutor-orange-600}; + --tutor-visual-critical-2: #{$tutor-orange-900}; +} + +[data-tutor-theme='light'][data-tutor-vision='protanopia'], +[data-tutor-theme='system'][data-tutor-vision='protanopia'] { + @include protanopia-light-tokens; +} + +[data-tutor-theme='dark'][data-tutor-vision='protanopia'] { + @include protanopia-dark-tokens; +} + +@media (prefers-color-scheme: dark) { + [data-tutor-theme='system'][data-tutor-vision='protanopia'] { + @include protanopia-dark-tokens; + } +} diff --git a/assets/core/scss/tokens/_actions.scss b/assets/core/scss/tokens/_actions.scss new file mode 100644 index 0000000000..072b014303 --- /dev/null +++ b/assets/core/scss/tokens/_actions.scss @@ -0,0 +1,58 @@ +// Design Tokens - Action Colors +// CSS variables for theme-aware action colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= + +$tutor-actions-success-primary: var(--tutor-actions-success-primary); +$tutor-actions-success-secondary: var(--tutor-actions-success-secondary); +$tutor-actions-success-tertiary: var(--tutor-actions-success-tertiary); +$tutor-actions-success-exception: var(--tutor-actions-success-exception); +$tutor-actions-warning-primary: var(--tutor-actions-warning-primary); +$tutor-actions-warning-secondary: var(--tutor-actions-warning-secondary); +$tutor-actions-warning-tertiary: var(--tutor-actions-warning-tertiary); +$tutor-actions-warning-exception: var(--tutor-actions-warning-exception); +$tutor-actions-brand-primary: var(--tutor-actions-brand-primary); +$tutor-actions-brand-secondary: var(--tutor-actions-brand-secondary); +$tutor-actions-brand-tertiary: var(--tutor-actions-brand-tertiary); +$tutor-actions-gray-empty: var(--tutor-actions-gray-empty); +$tutor-actions-gray-secondary: var(--tutor-actions-gray-secondary); +$tutor-actions-gray-tertiary: var(--tutor-actions-gray-tertiary); +$tutor-actions-critical-primary: var(--tutor-actions-critical-primary); +$tutor-actions-critical-secondary: var(--tutor-actions-critical-secondary); +$tutor-actions-caution: var(--tutor-actions-caution); +$tutor-actions-caution-secondary: var(--tutor-actions-caution-secondary); +$tutor-actions-inverse: var(--tutor-actions-inverse); +$tutor-actions-exception3-highlight: var(--tutor-actions-exception3-highlight); +$tutor-actions-exception5: var(--tutor-actions-exception5); +$tutor-actions-exception6: var(--tutor-actions-exception6); + +// ============================================================================= +// ACTION COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-actions: ( + success-primary: $tutor-actions-success-primary, + success-secondary: $tutor-actions-success-secondary, + success-tertiary: $tutor-actions-success-tertiary, + success-exception: $tutor-actions-success-exception, + warning-primary: $tutor-actions-warning-primary, + warning-secondary: $tutor-actions-warning-secondary, + warning-tertiary: $tutor-actions-warning-tertiary, + warning-exception: $tutor-actions-warning-exception, + brand-primary: $tutor-actions-brand-primary, + brand-secondary: $tutor-actions-brand-secondary, + brand-tertiary: $tutor-actions-brand-tertiary, + gray-empty: $tutor-actions-gray-empty, + gray-secondary: $tutor-actions-gray-secondary, + gray-tertiary: $tutor-actions-gray-tertiary, + critical-primary: $tutor-actions-critical-primary, + critical-secondary: $tutor-actions-critical-secondary, + caution: $tutor-actions-caution, + caution-secondary: $tutor-actions-caution-secondary, + inverse: $tutor-actions-inverse, + exception3-highlight: $tutor-actions-exception3-highlight, + exception5: $tutor-actions-exception5, + exception6: $tutor-actions-exception6, +); diff --git a/assets/core/scss/tokens/_borders.scss b/assets/core/scss/tokens/_borders.scss new file mode 100644 index 0000000000..a405bf4a9f --- /dev/null +++ b/assets/core/scss/tokens/_borders.scss @@ -0,0 +1,84 @@ +// Design Tokens - Border +// Consistent border + +// ============================================================================= +// BORDER COLORS +// ============================================================================= + +$tutor-border-idle: var(--tutor-border-idle); +$tutor-border-idle2: var(--tutor-border-idle2); +$tutor-border-hover: var(--tutor-border-hover); +$tutor-border-inverse: var(--tutor-border-inverse); +$tutor-border-brand: var(--tutor-border-brand); +$tutor-border-brand-secondary: var(--tutor-border-brand-secondary); +$tutor-border-brand-tertiary: var(--tutor-border-brand-tertiary); +$tutor-border-dark: var(--tutor-border-dark); +$tutor-border-success: var(--tutor-border-success); +$tutor-border-success-secondary: var(--tutor-border-success-secondary); +$tutor-border-warning: var(--tutor-border-warning); +$tutor-border-warning-secondary: var(--tutor-border-warning-secondary); +$tutor-border-warning-tertiary: var(--tutor-border-warning-tertiary); +$tutor-border-error: var(--tutor-border-error); +$tutor-border-error-secondary: var(--tutor-border-error-secondary); +$tutor-border-error-tertiary: var(--tutor-border-error-tertiary); +$tutor-border-exception6: var(--tutor-border-exception6); +$tutor-border-tertiary: var(--tutor-border-tertiary); + +// ============================================================================= +// RADIUS SCALE +// ============================================================================= + +$tutor-radius-none: 0px; +$tutor-radius-xs: 2px; +$tutor-radius-sm: 4px; +$tutor-radius-md: 6px; +$tutor-radius-lg: 8px; +$tutor-radius-2xl: 12px; +$tutor-radius-3xl: 16px; +$tutor-radius-4xl: 20px; +$tutor-radius-5xl: 24px; +$tutor-radius-6xl: 32px; +$tutor-radius-full: 1000px; + +// ============================================================================= +// BORDER COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-border-colors: ( + idle: $tutor-border-idle, + idle2: $tutor-border-idle2, + hover: $tutor-border-hover, + inverse: $tutor-border-inverse, + brand: $tutor-border-brand, + brand-secondary: $tutor-border-brand-secondary, + brand-tertiary: $tutor-border-brand-tertiary, + dark: $tutor-border-dark, + success: $tutor-border-success, + success-secondary: $tutor-border-success-secondary, + warning: $tutor-border-warning, + warning-secondary: $tutor-border-warning-secondary, + warning-tertiary: $tutor-border-warning-tertiary, + error: $tutor-border-error, + error-secondary: $tutor-border-error-secondary, + error-tertiary: $tutor-border-error-tertiary, + exception6: $tutor-border-exception6, + tertiary: $tutor-border-tertiary, +); + +// ============================================================================= +// RADIUS MAP (for utility generation) +// ============================================================================= + +$tutor-radius: ( + none: $tutor-radius-none, + xs: $tutor-radius-xs, + sm: $tutor-radius-sm, + md: $tutor-radius-md, + lg: $tutor-radius-lg, + 2xl: $tutor-radius-2xl, + 3xl: $tutor-radius-3xl, + 4xl: $tutor-radius-4xl, + 5xl: $tutor-radius-5xl, + 6xl: $tutor-radius-6xl, + full: $tutor-radius-full, +); diff --git a/assets/core/scss/tokens/_breakpoints.scss b/assets/core/scss/tokens/_breakpoints.scss new file mode 100644 index 0000000000..a0acf07488 --- /dev/null +++ b/assets/core/scss/tokens/_breakpoints.scss @@ -0,0 +1,21 @@ +// Design Tokens - Breakpoints +// Mobile-first responsive design breakpoints + +$tutor-breakpoint-xs: 480px; +$tutor-breakpoint-sm: 576px; +$tutor-breakpoint-md: 768px; +$tutor-breakpoint-lg: 992px; +$tutor-breakpoint-xl: 1200px; +$tutor-breakpoint-2xl: 1400px; +$tutor-breakpoint-3xl: 1920px; + +// Breakpoint map for mixins +$tutor-breakpoints: ( + 3xl: $tutor-breakpoint-3xl, + 2xl: $tutor-breakpoint-2xl, + xl: $tutor-breakpoint-xl, + lg: $tutor-breakpoint-lg, + md: $tutor-breakpoint-md, + sm: $tutor-breakpoint-sm, + xs: $tutor-breakpoint-xs, +); diff --git a/assets/core/scss/tokens/_buttons.scss b/assets/core/scss/tokens/_buttons.scss new file mode 100644 index 0000000000..c673779110 --- /dev/null +++ b/assets/core/scss/tokens/_buttons.scss @@ -0,0 +1,183 @@ +@use './borders' as *; +@use './typography' as *; + +// Design Tokens - Button Colors +// CSS variables for theme-aware button colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= + +// --- Base --- +$tutor-button-radius: var(--tutor-button-radius, $tutor-radius-md); +$tutor-button-font-weight: var(--tutor-button-font-weight, $tutor-font-weight-medium); +$tutor-button-border-shadow: var(--tutor-button-border-shadow, none); + +// --- Primary --- +$tutor-button-primary: var(--tutor-button-primary); +$tutor-button-primary-hover: var(--tutor-button-primary-hover); +$tutor-button-primary-focused: var(--tutor-button-primary-focused); +$tutor-button-primary-disabled: var(--tutor-button-primary-disabled); +$tutor-button-primary-border-shadow: var(--tutor-button-primary-border-shadow, none); +$tutor-button-primary-border-shadow-hover: var( + --tutor-button-primary-border-shadow-hover, + var(--tutor-button-primary-border-shadow, none) +); +$tutor-button-primary-border-shadow-focused: var( + --tutor-button-primary-border-shadow-focused, + var(--tutor-button-primary-border-shadow, none) +); +$tutor-button-primary-border-shadow-disabled: var( + --tutor-button-primary-border-shadow-disabled, + var(--tutor-button-primary-border-shadow, none) +); + +// --- Primary Soft --- +$tutor-button-primary-soft: var(--tutor-button-primary-soft); +$tutor-button-primary-soft-hover: var(--tutor-button-primary-soft-hover); +$tutor-button-primary-soft-focused: var(--tutor-button-primary-soft-focused); +$tutor-button-primary-soft-border-shadow: var(--tutor-button-primary-soft-border-shadow, none); +$tutor-button-primary-soft-border-shadow-hover: var( + --tutor-button-primary-soft-border-shadow-hover, + var(--tutor-button-primary-soft-border-shadow, none) +); +$tutor-button-primary-soft-border-shadow-focused: var( + --tutor-button-primary-soft-border-shadow-focused, + var(--tutor-button-primary-soft-border-shadow, none) +); +$tutor-button-primary-soft-border-shadow-disabled: var( + --tutor-button-primary-soft-border-shadow-disabled, + var(--tutor-button-primary-soft-border-shadow, none) +); + +// --- Destructive --- +$tutor-button-destructive: var(--tutor-button-destructive); +$tutor-button-destructive-hover: var(--tutor-button-destructive-hover); +$tutor-button-destructive-focused: var(--tutor-button-destructive-focused); +$tutor-button-destructive-border-shadow: var(--tutor-button-destructive-border-shadow, none); +$tutor-button-destructive-border-shadow-hover: var( + --tutor-button-destructive-border-shadow-hover, + var(--tutor-button-destructive-border-shadow, none) +); +$tutor-button-destructive-border-shadow-focused: var( + --tutor-button-destructive-border-shadow-focused, + var(--tutor-button-destructive-border-shadow, none) +); +$tutor-button-destructive-border-shadow-disabled: var( + --tutor-button-destructive-border-shadow-disabled, + var(--tutor-button-destructive-border-shadow, none) +); + +// --- Destructive Soft --- +$tutor-button-destructive-soft: var(--tutor-button-destructive-soft); +$tutor-button-destructive-soft-hover: var(--tutor-button-destructive-soft-hover); +$tutor-button-destructive-soft-focused: var(--tutor-button-destructive-soft-focused); +$tutor-button-destructive-soft-border-shadow: var(--tutor-button-destructive-soft-border-shadow, none); +$tutor-button-destructive-soft-border-shadow-hover: var( + --tutor-button-destructive-soft-border-shadow-hover, + var(--tutor-button-destructive-soft-border-shadow, none) +); +$tutor-button-destructive-soft-border-shadow-focused: var( + --tutor-button-destructive-soft-border-shadow-focused, + var(--tutor-button-destructive-soft-border-shadow, none) +); +$tutor-button-destructive-soft-border-shadow-disabled: var( + --tutor-button-destructive-soft-border-shadow-disabled, + var(--tutor-button-destructive-soft-border-shadow, none) +); + +// --- Secondary --- +$tutor-button-secondary: var(--tutor-button-secondary); +$tutor-button-secondary-hover: var(--tutor-button-secondary-hover); +$tutor-button-secondary-focused: var(--tutor-button-secondary-focused); +$tutor-button-secondary-border-shadow: var(--tutor-button-secondary-border-shadow, none); +$tutor-button-secondary-border-shadow-hover: var( + --tutor-button-secondary-border-shadow-hover, + var(--tutor-button-secondary-border-shadow, none) +); +$tutor-button-secondary-border-shadow-focused: var( + --tutor-button-secondary-border-shadow-focused, + var(--tutor-button-secondary-border-shadow, none) +); +$tutor-button-secondary-border-shadow-disabled: var( + --tutor-button-secondary-border-shadow-disabled, + var(--tutor-button-secondary-border-shadow, none) +); + +// --- Outline --- +$tutor-button-outline-inverse: var(--tutor-button-outline-inverse); +$tutor-button-outline-hover: var(--tutor-button-outline-hover); +$tutor-button-outline-focused-inverse: var(--tutor-button-outline-focused-inverse); +$tutor-button-outline-border-shadow: var(--tutor-button-outline-border-shadow, 0 0 0 1px #{$tutor-border-idle2}); +$tutor-button-outline-border-shadow-hover: var( + --tutor-button-outline-border-shadow-hover, + #{$tutor-button-outline-border-shadow} +); +$tutor-button-outline-border-shadow-focused: var( + --tutor-button-outline-border-shadow-focused, + #{$tutor-button-outline-border-shadow} +); +$tutor-button-outline-border-shadow-disabled: var( + --tutor-button-outline-border-shadow-disabled, + #{$tutor-button-outline-border-shadow} +); + +// --- Ghost --- +$tutor-button-ghost-hover: var(--tutor-button-ghost-hover); +$tutor-button-ghost-border-shadow: var(--tutor-button-ghost-border-shadow, none); +$tutor-button-ghost-border-shadow-hover: var( + --tutor-button-ghost-border-shadow-hover, + var(--tutor-button-ghost-border-shadow, none) +); +$tutor-button-ghost-border-shadow-disabled: var( + --tutor-button-ghost-border-shadow-disabled, + var(--tutor-button-ghost-border-shadow, none) +); + +// --- Ghost Brand --- +$tutor-button-ghost-brand-border-shadow: var(--tutor-button-ghost-brand-border-shadow, none); +$tutor-button-ghost-brand-border-shadow-hover: var( + --tutor-button-ghost-brand-border-shadow-hover, + var(--tutor-button-ghost-brand-border-shadow, none) +); +$tutor-button-ghost-brand-border-shadow-disabled: var( + --tutor-button-ghost-brand-border-shadow-disabled, + var(--tutor-button-ghost-brand-border-shadow, none) +); + +// --- Shared --- +$tutor-button-disabled: var(--tutor-button-disabled); +$tutor-button-success: var(--tutor-button-success); +$tutor-button-success-hover: var(--tutor-button-success-hover); +$tutor-button-success-focused: var(--tutor-button-success-focused); + +// ============================================================================= +// BUTTON COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-buttons: ( + primary: $tutor-button-primary, + primary-hover: $tutor-button-primary-hover, + primary-focused: $tutor-button-primary-focused, + primary-disabled: $tutor-button-primary-disabled, + primary-soft: $tutor-button-primary-soft, + primary-soft-hover: $tutor-button-primary-soft-hover, + primary-soft-focused: $tutor-button-primary-soft-focused, + secondary: $tutor-button-secondary, + secondary-hover: $tutor-button-secondary-hover, + secondary-focused: $tutor-button-secondary-focused, + destructive: $tutor-button-destructive, + destructive-hover: $tutor-button-destructive-hover, + destructive-focused: $tutor-button-destructive-focused, + destructive-soft: $tutor-button-destructive-soft, + destructive-soft-hover: $tutor-button-destructive-soft-hover, + destructive-soft-focused: $tutor-button-destructive-soft-focused, + disabled: $tutor-button-disabled, + outline-inverse: $tutor-button-outline-inverse, + outline-hover: $tutor-button-outline-hover, + outline-focused-inverse: $tutor-button-outline-focused-inverse, + ghost-hover: $tutor-button-ghost-hover, + success: $tutor-button-success, + success-hover: $tutor-button-success-hover, + success-focused: $tutor-button-success-focused, +); diff --git a/assets/core/scss/tokens/_colors.scss b/assets/core/scss/tokens/_colors.scss new file mode 100644 index 0000000000..b0bec1be0c --- /dev/null +++ b/assets/core/scss/tokens/_colors.scss @@ -0,0 +1,260 @@ +// Design Tokens - Colors +// Primitive color palette and semantic color maps + +// ============================================================================= +// PRIMITIVE COLORS +// ============================================================================= + +// Brand Colors +$tutor-brand-100: var(--tutor-brand-100, #f6f8fe); +$tutor-brand-200: var(--tutor-brand-200, #e4ebfc); +$tutor-brand-300: var(--tutor-brand-300, #dbe4fa); +$tutor-brand-400: var(--tutor-brand-400, #a4bcf4); +$tutor-brand-500: var(--tutor-brand-500, #4979e8); +$tutor-brand-600: var(--tutor-brand-600, #3e64de); +$tutor-brand-700: var(--tutor-brand-700, #2b49ca); +$tutor-brand-800: var(--tutor-brand-800, #293da4); +$tutor-brand-900: var(--tutor-brand-900, #263782); +$tutor-brand-950: var(--tutor-brand-950, #1c234f); + +// Gray Colors +$tutor-gray-1: #ffffff; +$tutor-gray-10: #fcfcfc; +$tutor-gray-25: #fafafa; +$tutor-gray-50: #f5f5f6; +$tutor-gray-100: #f0f1f1; +$tutor-gray-200: #ececed; +$tutor-gray-300: #cecfd2; +$tutor-gray-400: #94969c; +$tutor-gray-500: #73767D; +$tutor-gray-600: #61646c; +$tutor-gray-700: #333741; +$tutor-gray-750: #2d3039; +$tutor-gray-800: #1f242f; +$tutor-gray-900: #161b26; +$tutor-gray-950: #0c111d; + +// Success Colors +$tutor-success-25: #f4faf5; +$tutor-success-50: #eaf6ec; +$tutor-success-100: #bce4c5; +$tutor-success-200: #9cd7a9; +$tutor-success-300: #6fc482; +$tutor-success-400: #53b96a; +$tutor-success-500: #28a745; +$tutor-success-600: #24983f; +$tutor-success-700: #1c7731; +$tutor-success-800: #165c26; +$tutor-success-900: #11461d; +$tutor-success-950: #0c3114; + +// Warning Colors +$tutor-warning-25: #fffcf5; +$tutor-warning-50: #fffaeb; +$tutor-warning-100: #fef0c7; +$tutor-warning-200: #fedf89; +$tutor-warning-300: #fec84b; +$tutor-warning-400: #fdb022; +$tutor-warning-500: #f79009; +$tutor-warning-600: #dc6803; +$tutor-warning-700: #b54708; +$tutor-warning-800: #93370d; +$tutor-warning-900: #7a2e0e; +$tutor-warning-950: #4e1d09; + +// Error Colors +$tutor-error-25: #fffbfa; +$tutor-error-50: #fef3f2; +$tutor-error-100: #fee4e2; +$tutor-error-200: #fecdca; +$tutor-error-300: #fda29b; +$tutor-error-400: #f97066; +$tutor-error-500: #f04438; +$tutor-error-600: #d92d20; +$tutor-error-700: #b42318; +$tutor-error-800: #912018; +$tutor-error-900: #7a271a; +$tutor-error-950: #55160c; + +// Yellow Colors +$tutor-yellow-25: #fefdf0; +$tutor-yellow-50: #fefbe8; +$tutor-yellow-100: #fef7c3; +$tutor-yellow-200: #feee95; +$tutor-yellow-300: #fde272; +$tutor-yellow-400: #fac515; +$tutor-yellow-500: #eaaa08; +$tutor-yellow-600: #ca8504; +$tutor-yellow-700: #a15c07; +$tutor-yellow-800: #854a0e; +$tutor-yellow-900: #713b12; +$tutor-yellow-950: #542c0d; + +// Cyan Colors (CVD accessibility - replaces green/success) +$tutor-cyan-50: #ecfeff; +$tutor-cyan-100: #cefafe; +$tutor-cyan-200: #a2f4fd; +$tutor-cyan-300: #53eafd; +$tutor-cyan-400: #00d3f2; +$tutor-cyan-500: #00b8db; +$tutor-cyan-600: #0092b8; +$tutor-cyan-700: #007595; +$tutor-cyan-800: #005f78; +$tutor-cyan-900: #104e64; +$tutor-cyan-950: #053345; + +// Orange Colors (CVD accessibility - replaces red/error) +$tutor-orange-50: #fefbe8; +$tutor-orange-100: #ffedd4; +$tutor-orange-200: #ffd6a7; +$tutor-orange-300: #ffb86a; +$tutor-orange-400: #ff8904; +$tutor-orange-500: #ff6900; +$tutor-orange-600: #f54900; +$tutor-orange-700: #ca3500; +$tutor-orange-800: #9f2d00; +$tutor-orange-900: #7e2a0c; + +// Exception Colors +$tutor-exception-1: #00acc2; +$tutor-exception-2: #ee0097; +$tutor-exception-2-secondary: #fff0f9; +$tutor-exception-2-tertiary: #330020; +$tutor-exception-3: #cbfd78; +$tutor-exception-5: #9747ff; +$tutor-exception-6: #f2e8ff; +$tutor-exception-7: #242a37; +$tutor-exception-8: #2c0066; +$tutor-exception-9: #f4f433; + +// ============================================================================= +// COLOR MAPS (for utility generation) +// ============================================================================= + +$tutor-brand-colors: ( + 100: $tutor-brand-100, + 200: $tutor-brand-200, + 300: $tutor-brand-300, + 400: $tutor-brand-400, + 500: $tutor-brand-500, + 600: $tutor-brand-600, + 700: $tutor-brand-700, + 800: $tutor-brand-800, + 900: $tutor-brand-900, + 950: $tutor-brand-950, +); + +$tutor-gray-colors: ( + 1: $tutor-gray-1, + 10: $tutor-gray-10, + 25: $tutor-gray-25, + 50: $tutor-gray-50, + 100: $tutor-gray-100, + 200: $tutor-gray-200, + 300: $tutor-gray-300, + 400: $tutor-gray-400, + 500: $tutor-gray-500, + 600: $tutor-gray-600, + 700: $tutor-gray-700, + 750: $tutor-gray-750, + 800: $tutor-gray-800, + 900: $tutor-gray-900, + 950: $tutor-gray-950, +); + +$tutor-success-colors: ( + 25: $tutor-success-25, + 50: $tutor-success-50, + 100: $tutor-success-100, + 200: $tutor-success-200, + 300: $tutor-success-300, + 400: $tutor-success-400, + 500: $tutor-success-500, + 600: $tutor-success-600, + 700: $tutor-success-700, + 800: $tutor-success-800, + 900: $tutor-success-900, + 950: $tutor-success-950, +); + +$tutor-warning-colors: ( + 25: $tutor-warning-25, + 50: $tutor-warning-50, + 100: $tutor-warning-100, + 200: $tutor-warning-200, + 300: $tutor-warning-300, + 400: $tutor-warning-400, + 500: $tutor-warning-500, + 600: $tutor-warning-600, + 700: $tutor-warning-700, + 800: $tutor-warning-800, + 900: $tutor-warning-900, + 950: $tutor-warning-950, +); + +$tutor-error-colors: ( + 25: $tutor-error-25, + 50: $tutor-error-50, + 100: $tutor-error-100, + 200: $tutor-error-200, + 300: $tutor-error-300, + 400: $tutor-error-400, + 500: $tutor-error-500, + 600: $tutor-error-600, + 700: $tutor-error-700, + 800: $tutor-error-800, + 900: $tutor-error-900, + 950: $tutor-error-950, +); + +$tutor-yellow-colors: ( + 25: $tutor-yellow-25, + 50: $tutor-yellow-50, + 100: $tutor-yellow-100, + 200: $tutor-yellow-200, + 300: $tutor-yellow-300, + 400: $tutor-yellow-400, + 500: $tutor-yellow-500, + 600: $tutor-yellow-600, + 700: $tutor-yellow-700, + 800: $tutor-yellow-800, + 900: $tutor-yellow-900, + 950: $tutor-yellow-950, +); + +$tutor-exception-colors: ( + 1: $tutor-exception-1, + 2: $tutor-exception-2, + 2-secondary: $tutor-exception-2-secondary, + 2-tertiary: $tutor-exception-2-tertiary, + 3: $tutor-exception-3, + 5: $tutor-exception-5, + 6: $tutor-exception-6, +); + +$tutor-cyan-colors: ( + 50: $tutor-cyan-50, + 100: $tutor-cyan-100, + 200: $tutor-cyan-200, + 300: $tutor-cyan-300, + 400: $tutor-cyan-400, + 500: $tutor-cyan-500, + 600: $tutor-cyan-600, + 700: $tutor-cyan-700, + 800: $tutor-cyan-800, + 900: $tutor-cyan-900, + 950: $tutor-cyan-950, +); + +$tutor-orange-colors: ( + 50: $tutor-orange-50, + 100: $tutor-orange-100, + 200: $tutor-orange-200, + 300: $tutor-orange-300, + 400: $tutor-orange-400, + 500: $tutor-orange-500, + 600: $tutor-orange-600, + 700: $tutor-orange-700, + 800: $tutor-orange-800, + 900: $tutor-orange-900, +); diff --git a/assets/core/scss/tokens/_file-uploader.scss b/assets/core/scss/tokens/_file-uploader.scss new file mode 100644 index 0000000000..8566f6044d --- /dev/null +++ b/assets/core/scss/tokens/_file-uploader.scss @@ -0,0 +1,10 @@ +@use './colors' as *; + +$tutor-file-uploader-background-image: var( + --tutor-file-uploader-background-image, + url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%23A4BCF4FF' stroke-width='3' stroke-dasharray='6%2c8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") +); + +$tutor-file-uploader: ( + background-image: $tutor-file-uploader-background-image, +); diff --git a/assets/core/scss/tokens/_icons.scss b/assets/core/scss/tokens/_icons.scss new file mode 100644 index 0000000000..45967dad93 --- /dev/null +++ b/assets/core/scss/tokens/_icons.scss @@ -0,0 +1,54 @@ +// Design Tokens - Icon Colors +// CSS variables for theme-aware icon colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= + +$tutor-icon-idle: var(--tutor-icon-idle); +$tutor-icon-idle-inverse: var(--tutor-icon-idle-inverse); +$tutor-icon-hover: var(--tutor-icon-hover); +$tutor-icon-secondary: var(--tutor-icon-secondary); +$tutor-icon-subdued: var(--tutor-icon-subdued); +$tutor-icon-brand: var(--tutor-icon-brand); +$tutor-icon-brand-hover: var(--tutor-icon-brand-hover); +$tutor-icon-brand-secondary: var(--tutor-icon-brand-secondary); +$tutor-icon-success-primary: var(--tutor-icon-success-primary); +$tutor-icon-success-secondary: var(--tutor-icon-success-secondary); +$tutor-icon-critical: var(--tutor-icon-critical); +$tutor-icon-critical-hover: var(--tutor-icon-critical-hover); +$tutor-icon-warning: var(--tutor-icon-warning); +$tutor-icon-warning-secondary: var(--tutor-icon-warning-secondary); +$tutor-icon-caution: var(--tutor-icon-caution); +$tutor-icon-exception1: var(--tutor-icon-exception1); +$tutor-icon-exception2: var(--tutor-icon-exception2); +$tutor-icon-exception4: var(--tutor-icon-exception4); +$tutor-icon-exception5: var(--tutor-icon-exception5); +$tutor-icon-disabled: var(--tutor-icon-disabled); + +// ============================================================================= +// ICON COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-icons: ( + idle: $tutor-icon-idle, + idle-inverse: $tutor-icon-idle-inverse, + hover: $tutor-icon-hover, + secondary: $tutor-icon-secondary, + subdued: $tutor-icon-subdued, + brand: $tutor-icon-brand, + brand-hover: $tutor-icon-brand-hover, + brand-secondary: $tutor-icon-brand-secondary, + success-primary: $tutor-icon-success-primary, + success-secondary: $tutor-icon-success-secondary, + critical: $tutor-icon-critical, + critical-hover: $tutor-icon-critical-hover, + warning: $tutor-icon-warning, + warning-secondary: $tutor-icon-warning-secondary, + caution: $tutor-icon-caution, + exception1: $tutor-icon-exception1, + exception2: $tutor-icon-exception2, + exception4: $tutor-icon-exception4, + exception5: $tutor-icon-exception5, + disabled: $tutor-icon-disabled, +); diff --git a/assets/core/scss/tokens/_index.scss b/assets/core/scss/tokens/_index.scss new file mode 100644 index 0000000000..a075590d89 --- /dev/null +++ b/assets/core/scss/tokens/_index.scss @@ -0,0 +1,22 @@ +@forward 'utility-config'; +@forward 'actions'; +@forward 'buttons'; +@forward 'borders'; +@forward 'breakpoints'; +@forward 'colors'; +@forward 'file-uploader'; +@forward 'icons'; +@forward 'inputs'; +@forward 'shadows'; +@forward 'spacing'; +@forward 'surfaces'; +@forward 'tabs'; +@forward 'text-colors'; +@forward 'typography'; +@forward 'zIndex'; +@forward 'popover'; +@forward 'modal'; +@forward 'progress'; +@forward 'quiz'; +@forward 'visual'; +@forward 'toast'; diff --git a/assets/core/scss/tokens/_inputs.scss b/assets/core/scss/tokens/_inputs.scss new file mode 100644 index 0000000000..3b24dce6fc --- /dev/null +++ b/assets/core/scss/tokens/_inputs.scss @@ -0,0 +1,10 @@ +@use './borders' as *; +@use './typography' as *; + +// Design Tokens - Input +// CSS variables for theme-aware input styling + +$tutor-input-radius: var(--tutor-input-radius, $tutor-radius-md); +$tutor-input-font-weight: var(--tutor-input-font-weight, $tutor-font-weight-regular); +$tutor-input-border-color: var(--tutor-input-border-color, $tutor-border-idle); +$tutor-input-border-shadow: var(--tutor-input-border-shadow, none); diff --git a/assets/core/scss/tokens/_modal.scss b/assets/core/scss/tokens/_modal.scss new file mode 100644 index 0000000000..bea56ee5da --- /dev/null +++ b/assets/core/scss/tokens/_modal.scss @@ -0,0 +1,10 @@ +@use './borders' as *; +@use './shadows' as *; + +$tutor-modal-shadow: var(--tutor-modal-shadow, #{$tutor-shadow-modal}); +$tutor-modal-radius: var(--tutor-modal-radius, #{$tutor-radius-3xl}); + +$tutor-modal: ( + shadow: $tutor-modal-shadow, + radius: $tutor-modal-radius, +); diff --git a/assets/core/scss/tokens/_popover.scss b/assets/core/scss/tokens/_popover.scss new file mode 100644 index 0000000000..db16201f26 --- /dev/null +++ b/assets/core/scss/tokens/_popover.scss @@ -0,0 +1,12 @@ +@use './borders' as *; +@use './shadows' as *; + +$tutor-popover-shadow: var(--tutor-popover-shadow, #{$tutor-shadow-lg}); +$tutor-popover-border: var(--tutor-popover-border, 1px solid #{$tutor-border-idle}); +$tutor-popover-radius: var(--tutor-popover-radius, #{$tutor-radius-2xl}); + +$tutor-popover: ( + shadow: $tutor-popover-shadow, + border: $tutor-popover-border, + radius: $tutor-popover-radius, +) \ No newline at end of file diff --git a/assets/core/scss/tokens/_progress.scss b/assets/core/scss/tokens/_progress.scss new file mode 100644 index 0000000000..f443bd11af --- /dev/null +++ b/assets/core/scss/tokens/_progress.scss @@ -0,0 +1,9 @@ +@use './spacing'; + +// Design Tokens - Progress +// CSS variables for theme-aware progress geometry + +$tutor-progress-height: var(--tutor-progress-height, 8px); +$tutor-progress-indicator-top: var(--tutor-progress-indicator-top, 2px); +$tutor-progress-indicator-height: var(--tutor-progress-indicator-height, 1.5px); +$tutor-progress-indicator-secondary-display: var(--tutor-progress-indicator-secondary-display, none); diff --git a/assets/core/scss/tokens/_quiz.scss b/assets/core/scss/tokens/_quiz.scss new file mode 100644 index 0000000000..e12f91b6d5 --- /dev/null +++ b/assets/core/scss/tokens/_quiz.scss @@ -0,0 +1,18 @@ +// Design Tokens - Quiz Colors +// CSS variables for theme-aware quiz colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= + +$tutor-quiz-idle: var(--tutor-quiz-idle); +$tutor-quiz-hover: var(--tutor-quiz-hover); + +// ============================================================================= +// QUIZ COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-quiz-colors: ( + idle: $tutor-quiz-idle, + hover: $tutor-quiz-hover, +); diff --git a/assets/core/scss/tokens/_shadows.scss b/assets/core/scss/tokens/_shadows.scss new file mode 100644 index 0000000000..6ab3dbe795 --- /dev/null +++ b/assets/core/scss/tokens/_shadows.scss @@ -0,0 +1,52 @@ +// ========================================================================== +// Shadows +// ========================================================================== + +$tutor-shadow-modal: 0px 8px 8px -4px #10182808, 0px 20px 24px -4px #10182814; +$tutor-shadow-xs: 0px 1px 2px 0px #1018280D; +$tutor-shadow-sm: 0px 1px 2px 0px #1018280F, 0px 1px 3px 0px #1018281A; +$tutor-shadow-md: 0px 2px 4px -2px #1018280F, 0px 4px 8px -2px #1018281A; +$tutor-shadow-lg: 0px 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814; +$tutor-shadow-xl: 0px 8px 8px -4px #10182808, 0px 20px 24px -4px #10182814; +$tutor-shadow-2xl: 0px 24px 48px -12px #1018282E; +$tutor-shadow-3xl: 0px 32px 64px -12px #10182824; + +// ========================================================================== +// Ring Shadows +// ========================================================================== + +$tutor-ring-brand-shadow-xs: 0px 0px 0px 2px #90A0F7; +$tutor-ring-brand-shadow-sm: 0px 0px 0px 4px #3E64DE3D, 0px 1px 2px 0px #1018280F, 0px 1px 3px 0px #1018281A; +$tutor-ring-gray-shadow-md: 0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D; +$tutor-ring-gray-shadow-sm: 0px 0px 0px 2px #98A2B324, 0px 1px 2px 0px #1018280F, 0px 1px 3px 0px #1018281A; +$tutor-error-shadow-xs: 0px 0px 0px 2px #F044383D, 0px 1px 2px 0px #1018280D; + +// ========================================================================== +// Shadow Tokens +// ========================================================================== + + +$tutor-shadows: ( + 'none': none, + 'modal': $tutor-shadow-modal, + 'xs': $tutor-shadow-xs, + 'sm': $tutor-shadow-sm, + 'md': $tutor-shadow-md, + 'lg': $tutor-shadow-lg, + 'xl': $tutor-shadow-xl, + '2xl': $tutor-shadow-2xl, + '3xl': $tutor-shadow-3xl, +); + +// ========================================================================== +// Ring Shadow Tokens +// ========================================================================== + + +$tutor-ring-shadows: ( + 'brand-xs': $tutor-ring-brand-shadow-xs, + 'brand-sm': $tutor-ring-brand-shadow-sm, + 'gray-md': $tutor-ring-gray-shadow-md, + 'gray-sm': $tutor-ring-gray-shadow-sm, + 'error-xs': $tutor-error-shadow-xs, +); \ No newline at end of file diff --git a/assets/core/scss/tokens/_spacing.scss b/assets/core/scss/tokens/_spacing.scss new file mode 100644 index 0000000000..e3b0a8e3bf --- /dev/null +++ b/assets/core/scss/tokens/_spacing.scss @@ -0,0 +1,58 @@ +// Design Tokens - Spacing +// Consistent spacing scale for margins, padding, and gaps + +// ============================================================================= +// SPACING SCALE +// ============================================================================= + +$tutor-spacing-none: 0px; +$tutor-spacing-1: 2px; +$tutor-spacing-2: 4px; +$tutor-spacing-3: 6px; +$tutor-spacing-4: 8px; +$tutor-spacing-5: 12px; +$tutor-spacing-6: 16px; +$tutor-spacing-7: 20px; +$tutor-spacing-8: 24px; +$tutor-spacing-9: 32px; +$tutor-spacing-10: 40px; +$tutor-spacing-11: 48px; +$tutor-spacing-12: 56px; +$tutor-spacing-13: 64px; +$tutor-spacing-14: 72px; +$tutor-spacing-15: 80px; +$tutor-spacing-16: 88px; +$tutor-spacing-17: 96px; +$tutor-spacing-18: 104px; +$tutor-spacing-19: 112px; +$tutor-spacing-20: 120px; +$tutor-spacing-21: 200px; + +// ============================================================================= +// SPACING MAP (for utility generation) +// ============================================================================= + +$tutor-spacing: ( + none: $tutor-spacing-none, + 1: $tutor-spacing-1, + 2: $tutor-spacing-2, + 3: $tutor-spacing-3, + 4: $tutor-spacing-4, + 5: $tutor-spacing-5, + 6: $tutor-spacing-6, + 7: $tutor-spacing-7, + 8: $tutor-spacing-8, + 9: $tutor-spacing-9, + 10: $tutor-spacing-10, + 11: $tutor-spacing-11, + 12: $tutor-spacing-12, + 13: $tutor-spacing-13, + 14: $tutor-spacing-14, + 15: $tutor-spacing-15, + 16: $tutor-spacing-16, + 17: $tutor-spacing-17, + 18: $tutor-spacing-18, + 19: $tutor-spacing-19, + 20: $tutor-spacing-20, + 21: $tutor-spacing-21 +); \ No newline at end of file diff --git a/assets/core/scss/tokens/_surfaces.scss b/assets/core/scss/tokens/_surfaces.scss new file mode 100644 index 0000000000..afdbb1aa76 --- /dev/null +++ b/assets/core/scss/tokens/_surfaces.scss @@ -0,0 +1,58 @@ +// Design Tokens - Surface Colors +// CSS variables for theme-aware surface colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= + +$tutor-surface-base: var(--tutor-surface-base); +$tutor-surface-l1: var(--tutor-surface-l1); +$tutor-surface-l1-hover: var(--tutor-surface-l1-hover); +$tutor-surface-l2: var(--tutor-surface-l2); +$tutor-surface-l2-hover: var(--tutor-surface-l2-hover); +$tutor-surface-l3: var(--tutor-surface-l3); +$tutor-surface-brand-dark: var(--tutor-surface-brand-dark); +$tutor-surface-brand-primary: var(--tutor-surface-brand-primary); +$tutor-surface-brand-primary-2: var(--tutor-surface-brand-primary-2); +$tutor-surface-brand-secondary: var(--tutor-surface-brand-secondary); +$tutor-surface-brand-tertiary: var(--tutor-surface-brand-tertiary); +$tutor-surface-brand-quaternary: var(--tutor-surface-brand-quaternary); +$tutor-surface-sidebar-l1: var(--tutor-surface-sidebar-l1); +$tutor-surface-exception2-secondary: var(--tutor-surface-exception2-secondary); +$tutor-surface-exception3-highlight: var(--tutor-surface-exception3-highlight); +$tutor-surface-dark: var(--tutor-surface-dark); +$tutor-surface-exception6: var(--tutor-surface-exception6); +$tutor-surface-exception7: var(--tutor-surface-exception7); +$tutor-surface-warning: var(--tutor-surface-warning); +$tutor-surface-warning-hover: var(--tutor-surface-warning-hover); +$tutor-surface-success: var(--tutor-surface-success); +$tutor-surface-critical: var(--tutor-surface-critical); + +// ============================================================================= +// SURFACE COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-surfaces: ( + base: $tutor-surface-base, + l1: $tutor-surface-l1, + l1-hover: $tutor-surface-l1-hover, + l2: $tutor-surface-l2, + l2-hover: $tutor-surface-l2-hover, + l3: $tutor-surface-l3, + brand-dark: $tutor-surface-brand-dark, + brand-primary: $tutor-surface-brand-primary, + brand-primary-2: $tutor-surface-brand-primary-2, + brand-secondary: $tutor-surface-brand-secondary, + brand-tertiary: $tutor-surface-brand-tertiary, + brand-quaternary: $tutor-surface-brand-quaternary, + sidebar-l1: $tutor-surface-sidebar-l1, + exception2-secondary: $tutor-surface-exception2-secondary, + exception3-highlight: $tutor-surface-exception3-highlight, + dark: $tutor-surface-dark, + exception6: $tutor-surface-exception6, + exception7: $tutor-surface-exception7, + warning: $tutor-surface-warning, + warning-hover: $tutor-surface-warning-hover, + success: $tutor-surface-success, + critical: $tutor-surface-critical, +); diff --git a/assets/core/scss/tokens/_tabs.scss b/assets/core/scss/tokens/_tabs.scss new file mode 100644 index 0000000000..889bbee25a --- /dev/null +++ b/assets/core/scss/tokens/_tabs.scss @@ -0,0 +1,42 @@ +@use '../tokens/borders' as *; +@use '../tokens/typography' as *; + +// Design Tokens - Tab Colors +// CSS variables for theme-aware tab colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= +$tutor-tab-radius: var(--tutor-tab-radius, $tutor-radius-lg); +$tutor-tab-radius-sm: var(--tutor-tab-radius-sm, $tutor-radius-md); +$tutor-tab-font-weight: var(--tutor-tab-font-weight, $tutor-font-weight-medium); +$tutor-tab-active-shadow: var(--tutor-tab-active-shadow, none); +$tutor-tab-height: var(--tutor-tab-height, 40px); +$tutor-tab-height-sm: var(--tutor-tab-height-sm, 34px); +$tutor-tab-height-lg: var(--tutor-tab-height-lg, 44px); + +$tutor-tab-sidebar-l2: var(--tutor-tab-sidebar-l2); +$tutor-tab-sidebar-l2-hover: var(--tutor-tab-sidebar-l2-hover); +$tutor-tab-sidebar-l2-active: var(--tutor-tab-sidebar-l2-active); +$tutor-tab-sidebar-l4-hover: var(--tutor-tab-sidebar-l4-hover); +$tutor-tab-sidebar-l4-active: var(--tutor-tab-sidebar-l4-active); +$tutor-tab-l3: var(--tutor-tab-l3); +$tutor-tab-l3-hover: var(--tutor-tab-l3-hover); +$tutor-tab-l3-active: var(--tutor-tab-l3-active); +$tutor-tab-l3-active-hover: var(--tutor-tab-l3-active-hover); + +// ============================================================================= +// TAB COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-tabs: ( + sidebar-l2: $tutor-tab-sidebar-l2, + sidebar-l2-hover: $tutor-tab-sidebar-l2-hover, + sidebar-l2-active: $tutor-tab-sidebar-l2-active, + sidebar-l4-hover: $tutor-tab-sidebar-l4-hover, + sidebar-l4-active: $tutor-tab-sidebar-l4-active, + l3: $tutor-tab-l3, + l3-hover: $tutor-tab-l3-hover, + l3-active: $tutor-tab-l3-active, + l3-active-hover: $tutor-tab-l3-active-hover, +); diff --git a/assets/core/scss/tokens/_text-colors.scss b/assets/core/scss/tokens/_text-colors.scss new file mode 100644 index 0000000000..feaff10071 --- /dev/null +++ b/assets/core/scss/tokens/_text-colors.scss @@ -0,0 +1,52 @@ +// Design Tokens - Text Colors +// CSS variables for theme-aware text colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= + +$tutor-text-primary: var(--tutor-text-primary); +$tutor-text-primary-inverse: var(--tutor-text-primary-inverse); +$tutor-text-secondary: var(--tutor-text-secondary); +$tutor-text-subdued: var(--tutor-text-subdued); +$tutor-text-brand: var(--tutor-text-brand); +$tutor-text-brand-hover: var(--tutor-text-brand-hover); +$tutor-text-brand-secondary: var(--tutor-text-brand-secondary); +$tutor-text-light: var(--tutor-text-light); +$tutor-text-success: var(--tutor-text-success); +$tutor-text-critical: var(--tutor-text-critical); +$tutor-text-critical-hover: var(--tutor-text-critical-hover); +$tutor-text-warning: var(--tutor-text-warning); +$tutor-text-caution: var(--tutor-text-caution); +$tutor-text-exception1: var(--tutor-text-exception1); +$tutor-text-exception2: var(--tutor-text-exception2); +$tutor-text-exception4: var(--tutor-text-exception4); +$tutor-text-exception5: var(--tutor-text-exception5); +$tutor-text-highlighted-hover: var(--tutor-text-highlighted-hover); +$tutor-text-disabled: var(--tutor-text-disabled); + +// ============================================================================= +// TEXT COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-text-colors: ( + primary: $tutor-text-primary, + primary-inverse: $tutor-text-primary-inverse, + secondary: $tutor-text-secondary, + subdued: $tutor-text-subdued, + brand: $tutor-text-brand, + brand-hover: $tutor-text-brand-hover, + brand-secondary: $tutor-text-brand-secondary, + light: $tutor-text-light, + success: $tutor-text-success, + critical: $tutor-text-critical, + critical-hover: $tutor-text-critical-hover, + warning: $tutor-text-warning, + caution: $tutor-text-caution, + exception1: $tutor-text-exception1, + exception2: $tutor-text-exception2, + exception4: $tutor-text-exception4, + exception5: $tutor-text-exception5, + highlighted-hover: $tutor-text-highlighted-hover, + disabled: $tutor-text-disabled, +); \ No newline at end of file diff --git a/assets/core/scss/tokens/_toast.scss b/assets/core/scss/tokens/_toast.scss new file mode 100644 index 0000000000..6643ae411e --- /dev/null +++ b/assets/core/scss/tokens/_toast.scss @@ -0,0 +1,57 @@ +@use './typography' as *; +@use './borders' as *; +@use './shadows' as *; +@use './spacing' as *; +@use './surfaces' as *; +@use './text-colors' as *; +@use './icons' as *; +@use './zIndex' as *; + +$tutor-toast-font: var(--tutor-toast-font, #{$tutor-font-family-body}); +$tutor-toast-z: var(--tutor-toast-z, #{$tutor-z-highest + 1}); +$tutor-toast-gap: var(--tutor-toast-gap, #{$tutor-spacing-4}); +$tutor-toast-padding: var(--tutor-toast-padding, #{$tutor-spacing-5} #{$tutor-spacing-6}); +$tutor-toast-radius: var(--tutor-toast-radius, #{$tutor-radius-full}); +$tutor-toast-icon-size: var(--tutor-toast-icon-size, 36px); +$tutor-toast-min-width: var(--tutor-toast-min-width, 300px); +$tutor-toast-max-width: var(--tutor-toast-max-width, 340px); +$tutor-toast-animation-enter: var(--tutor-toast-animation-enter, 400ms); +$tutor-toast-animation-exit: var(--tutor-toast-animation-exit, 300ms); +$tutor-toast-offset-x: var(--tutor-toast-offset-x, #{$tutor-spacing-6}); +$tutor-toast-offset-y: var(--tutor-toast-offset-y, #{$tutor-spacing-6}); + +$tutor-toast-background: var(--tutor-toast-background, #{$tutor-surface-base}); +$tutor-toast-border: var(--tutor-toast-border, #{$tutor-border-idle}); +$tutor-toast-shadow: var(--tutor-toast-shadow, #{$tutor-shadow-xl}); +$tutor-toast-text: var(--tutor-toast-text, #{$tutor-text-primary}); +$tutor-toast-text-muted: var(--tutor-toast-text-muted, #{$tutor-text-secondary}); + +$tutor-toast-success-background: var(--tutor-toast-success-background, #{$tutor-surface-success}); +$tutor-toast-success-border: var(--tutor-toast-success-border, #{$tutor-border-success}); +$tutor-toast-success-icon: var(--tutor-toast-success-icon, #{$tutor-icon-success-primary}); +$tutor-toast-success-text: var(--tutor-toast-success-text, #{$tutor-text-success}); + +$tutor-toast-error-background: var(--tutor-toast-error-background, #{$tutor-surface-critical}); +$tutor-toast-error-border: var(--tutor-toast-error-border, #{$tutor-border-error}); +$tutor-toast-error-icon: var(--tutor-toast-error-icon, #{$tutor-icon-critical}); +$tutor-toast-error-text: var(--tutor-toast-error-text, #{$tutor-text-critical}); + +$tutor-toast-warning-background: var(--tutor-toast-warning-background, #{$tutor-surface-warning-hover}); +$tutor-toast-warning-border: var(--tutor-toast-warning-border, #{$tutor-border-warning-tertiary}); +$tutor-toast-warning-icon: var(--tutor-toast-warning-icon, #{$tutor-icon-warning}); +$tutor-toast-warning-text: var(--tutor-toast-warning-text, #{$tutor-text-caution}); + +$tutor-toast-info-background: var(--tutor-toast-info-background, #{$tutor-surface-brand-secondary}); +$tutor-toast-info-border: var(--tutor-toast-info-border, #{$tutor-border-brand-tertiary}); +$tutor-toast-info-icon: var(--tutor-toast-info-icon, #{$tutor-icon-brand}); +$tutor-toast-info-text: var(--tutor-toast-info-text, #{$tutor-text-brand}); + +$tutor-toast-loading-background: var(--tutor-toast-loading-background, #{$tutor-surface-l2}); +$tutor-toast-loading-border: var(--tutor-toast-loading-border, #{$tutor-border-hover}); +$tutor-toast-loading-icon: var(--tutor-toast-loading-icon, #{$tutor-icon-idle}); +$tutor-toast-loading-text: var(--tutor-toast-loading-text, #{$tutor-text-primary}); + +$tutor-toast-default-background: var(--tutor-toast-default-background, #{$tutor-surface-base}); +$tutor-toast-default-border: var(--tutor-toast-default-border, #{$tutor-border-idle}); +$tutor-toast-default-icon: var(--tutor-toast-default-icon, #{$tutor-icon-idle}); +$tutor-toast-default-text: var(--tutor-toast-default-text, #{$tutor-text-primary}); diff --git a/assets/core/scss/tokens/_typography.scss b/assets/core/scss/tokens/_typography.scss new file mode 100644 index 0000000000..fbbd525019 --- /dev/null +++ b/assets/core/scss/tokens/_typography.scss @@ -0,0 +1,111 @@ +// Design Tokens - Typography +// Font families, weights, sizes, and line heights + +// ============================================================================= +// FONT FAMILIES +// ============================================================================= + +$tutor-font-family-heading: + var(--tutor-font-family-heading, 'Inter'), + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + sans-serif; +$tutor-font-family-body: + var(--tutor-font-family-body, 'Inter'), + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + sans-serif; + +// ============================================================================= +// FONT WEIGHTS +// ============================================================================= + +$tutor-font-weight-regular: 400; // Regular +$tutor-font-weight-medium: 500; // Medium +$tutor-font-weight-semibold: 600; // Semi Bold +$tutor-font-weight-bold: 700; // Bold + +// ============================================================================= +// FONT SIZES (converted to rem for font scaling support) +// Base: 16px = 1rem +// ============================================================================= + +$tutor-font-size-d1: 4rem; // 64px ÷ 16 = 4rem +$tutor-font-size-h1: 2.5rem; // 40px ÷ 16 = 2.5rem +$tutor-font-size-h2: 2rem; // 32px ÷ 16 = 2rem +$tutor-font-size-h3: 1.5rem; // 24px ÷ 16 = 1.5rem +$tutor-font-size-h4: 1.25rem; // 20px ÷ 16 = 1.25rem +$tutor-font-size-h5: 1.125rem; // 18px ÷ 16 = 1.125rem +$tutor-font-size-medium: 1rem; // 16px ÷ 16 = 1rem +$tutor-font-size-p1: 1rem; // 16px ÷ 16 = 1rem +$tutor-font-size-small: 0.875rem; // 14px ÷ 16 = 0.875rem +$tutor-font-size-p2: 0.875rem; // 14px ÷ 16 = 0.875rem +$tutor-font-size-tiny: 0.75rem; // 12px ÷ 16 = 0.75rem +$tutor-font-size-tiny-2: 0.625rem; // 10px ÷ 16 = 0.625rem +$tutor-font-size-p3: 0.75rem; // 12px ÷ 16 = 0.75rem + +// ============================================================================= +// LINE HEIGHTS (converted to rem for proportional scaling with fonts) +// Base: 16px = 1rem +// ============================================================================= + +$tutor-line-height-d1: 4.5rem; // 72px ÷ 16 = 4.5rem +$tutor-line-height-h1: 3rem; // 48px ÷ 16 = 3rem +$tutor-line-height-h2: 2.5rem; // 40px ÷ 16 = 2.5rem +$tutor-line-height-h3: 2rem; // 32px ÷ 16 = 2rem +$tutor-line-height-h4: 1.75rem; // 28px ÷ 16 = 1.75rem +$tutor-line-height-h5: 1.625rem; // 26px ÷ 16 = 1.625rem +$tutor-line-height-medium: 1.5rem; // 24px ÷ 16 = 1.5rem +$tutor-line-height-p1: 1.375rem; // 22px ÷ 16 = 1.375rem +$tutor-line-height-small: 1.375rem; // 22px ÷ 16 = 1.375rem +$tutor-line-height-p2: 1.125rem; // 18px ÷ 16 = 1.125rem +$tutor-line-height-tiny: 1.25rem; // 20px ÷ 16 = 1.25rem +$tutor-line-height-tiny-2: 1.125rem; // 18px ÷ 16 = 1.125rem +$tutor-line-height-p3: 1.125rem; // 18px ÷ 16 = 1.125rem + +// ============================================================================= +// TYPOGRAPHY MAPS (for utility generation) +// ============================================================================= + +$tutor-font-sizes: ( + d1: $tutor-font-size-d1, + h1: $tutor-font-size-h1, + h2: $tutor-font-size-h2, + h3: $tutor-font-size-h3, + h4: $tutor-font-size-h4, + h5: $tutor-font-size-h5, + medium: $tutor-font-size-medium, + p1: $tutor-font-size-p1, + small: $tutor-font-size-small, + p2: $tutor-font-size-p2, + tiny: $tutor-font-size-tiny, + tiny-2: $tutor-font-size-tiny-2, + p3: $tutor-font-size-p3, +); + +$tutor-line-heights: ( + d1: $tutor-line-height-d1, + h1: $tutor-line-height-h1, + h2: $tutor-line-height-h2, + h3: $tutor-line-height-h3, + h4: $tutor-line-height-h4, + h5: $tutor-line-height-h5, + medium: $tutor-line-height-medium, + p1: $tutor-line-height-p1, + small: $tutor-line-height-small, + p2: $tutor-line-height-p2, + tiny: $tutor-line-height-tiny, + tiny-2: $tutor-line-height-tiny-2, + p3: $tutor-line-height-p3, +); + +$tutor-font-weights: ( + regular: $tutor-font-weight-regular, + medium: $tutor-font-weight-medium, + semibold: $tutor-font-weight-semibold, + bold: $tutor-font-weight-bold, +); diff --git a/assets/core/scss/tokens/_utility-config.scss b/assets/core/scss/tokens/_utility-config.scss new file mode 100644 index 0000000000..5e4aa8aacf --- /dev/null +++ b/assets/core/scss/tokens/_utility-config.scss @@ -0,0 +1,42 @@ +// Utility Generation Configuration +// Use these maps to limit which utilities are generated for responsive breakpoints +// to keep the build size small. + +@use 'sass:map'; +@use 'breakpoints' as b; +@use 'spacing' as s; +@use 'borders' as bor; + +// Breakpoints to include in responsive utility generation +$tutor-responsive-breakpoints: ( + xl: map.get(b.$tutor-breakpoints, xl), + lg: map.get(b.$tutor-breakpoints, lg), + md: map.get(b.$tutor-breakpoints, md), + sm: map.get(b.$tutor-breakpoints, sm), +); + +// Spacing values to include in responsive utility generation (subset of full scale) +$tutor-responsive-spacing: ( + none: map.get(s.$tutor-spacing, none), + 1: map.get(s.$tutor-spacing, 1), + 2: map.get(s.$tutor-spacing, 2), + 3: map.get(s.$tutor-spacing, 3), + 4: map.get(s.$tutor-spacing, 4), + 5: map.get(s.$tutor-spacing, 5), + 6: map.get(s.$tutor-spacing, 6), + 7: map.get(s.$tutor-spacing, 7), + 8: map.get(s.$tutor-spacing, 8), + 9: map.get(s.$tutor-spacing, 9), + 10: map.get(s.$tutor-spacing, 10), +); + +// Radius values to include in responsive utility generation +$tutor-responsive-radius: ( + none: map.get(bor.$tutor-radius, none), + sm: map.get(bor.$tutor-radius, sm), + md: map.get(bor.$tutor-radius, md), + lg: map.get(bor.$tutor-radius, lg), + 2xl: map.get(bor.$tutor-radius, 2xl), + full: map.get(bor.$tutor-radius, full), +); + diff --git a/assets/core/scss/tokens/_visual.scss b/assets/core/scss/tokens/_visual.scss new file mode 100644 index 0000000000..00cb19e703 --- /dev/null +++ b/assets/core/scss/tokens/_visual.scss @@ -0,0 +1,50 @@ +// Design Tokens - Visual Colors +// CSS variables for theme-aware visual colors + +// ============================================================================= +// CSS VARIABLE REFERENCES (theme-aware) +// ============================================================================= + +$tutor-visual-gray-1: var(--tutor-visual-gray-1); +$tutor-visual-gray-2: var(--tutor-visual-gray-2); +$tutor-visual-gray-3: var(--tutor-visual-gray-3); +$tutor-visual-gray-4: var(--tutor-visual-gray-4); +$tutor-visual-brand-1: var(--tutor-visual-brand-1); +$tutor-visual-brand-2: var(--tutor-visual-brand-2); +$tutor-visual-brand-3: var(--tutor-visual-brand-3); +$tutor-visual-success-1: var(--tutor-visual-success-1); +$tutor-visual-success-2: var(--tutor-visual-success-2); +$tutor-visual-critical-1: var(--tutor-visual-critical-1); +$tutor-visual-critical-2: var(--tutor-visual-critical-2); +$tutor-visual-caution-1: var(--tutor-visual-caution-1); +$tutor-visual-caution-2: var(--tutor-visual-caution-2); +$tutor-visual-caution-3: var(--tutor-visual-caution-3); +$tutor-visual-orange-1: var(--tutor-visual-orange-1); +$tutor-visual-exception-1: var(--tutor-visual-exception-1); +$tutor-visual-exception-2: var(--tutor-visual-exception-2); +$tutor-visual-exception-3: var(--tutor-visual-exception-3); + +// ============================================================================= +// VISUAL COLOR MAP (for utility generation) +// ============================================================================= + +$tutor-visual-colors: ( + gray-1: $tutor-visual-gray-1, + gray-2: $tutor-visual-gray-2, + gray-3: $tutor-visual-gray-3, + gray-4: $tutor-visual-gray-4, + brand-1: $tutor-visual-brand-1, + brand-2: $tutor-visual-brand-2, + brand-3: $tutor-visual-brand-3, + success-1: $tutor-visual-success-1, + success-2: $tutor-visual-success-2, + critical-1: $tutor-visual-critical-1, + critical-2: $tutor-visual-critical-2, + caution-1: $tutor-visual-caution-1, + caution-2: $tutor-visual-caution-2, + caution-3: $tutor-visual-caution-3, + orange-1: $tutor-visual-orange-1, + exception-1: $tutor-visual-exception-1, + exception-2: $tutor-visual-exception-2, + exception-3: $tutor-visual-exception-3, +); diff --git a/assets/core/scss/tokens/_zIndex.scss b/assets/core/scss/tokens/_zIndex.scss new file mode 100644 index 0000000000..5c4c8ea550 --- /dev/null +++ b/assets/core/scss/tokens/_zIndex.scss @@ -0,0 +1,32 @@ +// Design Tokens - z-index +// CSS variables for z-index + +// ============================================================================= +// CSS VARIABLE REFERENCES +// ============================================================================= + +$tutor-z-negative: -1; +$tutor-z-positive: 1; +$tutor-z-dropdown: 2; +$tutor-z-level: 0; +$tutor-z-sidebar: 20; +$tutor-z-header: 10; +$tutor-z-footer: 10; +$tutor-z-modal: 25; +$tutor-z-highest: 99999; + +// ============================================================================= +// Z-INDEX MAP (for utility generation) +// ============================================================================= + +$tutor-z: ( + negative: $tutor-z-negative, + positive: $tutor-z-positive, + dropdown: $tutor-z-dropdown, + level: $tutor-z-level, + sidebar: $tutor-z-sidebar, + header: $tutor-z-header, + footer: $tutor-z-footer, + modal: $tutor-z-modal, + highest: $tutor-z-highest, +); diff --git a/assets/core/scss/utilities/_borders.scss b/assets/core/scss/utilities/_borders.scss new file mode 100644 index 0000000000..2fb0e98a9c --- /dev/null +++ b/assets/core/scss/utilities/_borders.scss @@ -0,0 +1,205 @@ +// Border Utilities +// DRY, RTL-aware, width, style, color, radius, responsive + +@use 'sass:map'; +@use '../tokens' as *; +@use '../mixins' as *; + +// ============================================================================= +// VARIABLES +// ============================================================================= +$border-widths: ( + 2: 2px, + 4: 4px, + 8: 8px, +); + +$border-directions: ( + border: border, + border-t: border-top, + border-r: border-inline-end, + border-b: border-bottom, + border-l: border-inline-start, +); + +$border-styles: (solid, dashed, dotted, double, none); + +$radius-directions: ( + '': ( + border-radius, + ), + 't': ( + border-start-start-radius, + border-start-end-radius, + ), + 'b': ( + border-end-start-radius, + border-end-end-radius, + ), + 'r': ( + border-start-end-radius, + border-end-end-radius, + ), + 'l': ( + border-start-start-radius, + border-end-start-radius, + ), + 'tl': ( + border-start-start-radius, + ), + 'tr': ( + border-start-end-radius, + ), + 'br': ( + border-end-end-radius, + ), + 'bl': ( + border-end-start-radius, + ), +); + +// ============================================================================= +// SMART BORDER UTILITIES +// ============================================================================= +// Generate border-width utilities +@each $width-key, $width-value in $border-widths { + .tutor-border-#{$width-key} { + border: #{$width-value} solid $tutor-border-idle; + } +} + +// Directional borders (default width 1px) +@each $dir, $property in $border-directions { + .tutor-#{$dir} { + #{$property}: 1px solid $tutor-border-idle; + } + .tutor-#{$dir}-0 { + #{$property}: none; + } + + @each $width-key, $width-value in $border-widths { + .tutor-#{$dir}-#{$width-key} { + #{$property}: #{$width-value} solid $tutor-border-idle; + } + } +} + +// ============================================================================= +// BORDER STYLES +// ============================================================================= +@each $style in $border-styles { + .tutor-border-#{$style} { + border-style: $style; + } +} + +// ============================================================================= +// BORDER COLORS +// ============================================================================= +.tutor-border-transparent { + border-color: transparent; +} +.tutor-border-current { + border-color: currentColor; +} + +@each $key, $value in $tutor-border-colors { + .tutor-border-#{$key} { + border-color: $value; + } +} + +// ============================================================================= +// BORDER RADIUS (RTL-aware) +// ============================================================================= +@each $key, $value in $tutor-radius { + @each $abbr, $props in $radius-directions { + $prefix: if($abbr == '', '', $abbr + '-'); + + .tutor-rounded-#{$prefix}#{$key} { + @each $prop in $props { + #{$prop}: $value; + } + } + } +} + +// ============================================================================= +// SEMANTIC BORDERS +// ============================================================================= +.tutor-border-card { + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-lg; +} + +.tutor-border-input { + border: 1px solid $tutor-border-idle; + border-radius: $tutor-radius-md; + + &:focus { + border-color: $tutor-border-brand-tertiary; + } +} + +.tutor-border-divider { + border-bottom: 1px solid $tutor-border-idle; +} + +// ============================================================================= +// RESPONSIVE BORDER UTILITIES +// ============================================================================= +$responsive-border-dirs: ( + border: border, + border-t: border-top, + border-b: border-bottom, +); + +$responsive-radius-dirs: ( + '': ( + border-radius, + ), + 't': ( + border-start-start-radius, + border-start-end-radius, + ), + 'b': ( + border-end-start-radius, + border-end-end-radius, + ), +); + +@each $breakpoint, $min-width in $tutor-responsive-breakpoints { + @include tutor-breakpoint-down($breakpoint) { + // Border widths & directional borders (Restricted to All, Top, Bottom) + @each $dir, $property in $responsive-border-dirs { + .tutor-#{$breakpoint}-#{$dir} { + #{$property}: 1px solid $tutor-border-idle; + } + .tutor-#{$breakpoint}-#{$dir}-0 { + #{$property}: none; + } + + @each $width-key, $width-value in $border-widths { + .tutor-#{$breakpoint}-#{$dir}-#{$width-key} { + #{$property}: #{$width-value} solid $tutor-border-idle; + } + } + } + + // Border radius (Restricted to All, Top, Bottom + Subset of values) + @each $key, $value in $tutor-responsive-radius { + @each $abbr, $props in $radius-directions { + // We only generate for specific abbreviations to save space + @if map.has-key($responsive-radius-dirs, $abbr) { + $prefix: if($abbr == '', '', $abbr + '-'); + + .tutor-#{$breakpoint}-rounded-#{$prefix}#{$key} { + @each $prop in $props { + #{$prop}: $value; + } + } + } + } + } + } +} diff --git a/assets/core/scss/utilities/_colors.scss b/assets/core/scss/utilities/_colors.scss new file mode 100644 index 0000000000..e0cf3e4121 --- /dev/null +++ b/assets/core/scss/utilities/_colors.scss @@ -0,0 +1,197 @@ +// Color Utilities +// Background, border, and text color utilities with theme awareness + +@use '../tokens' as *; +@use '../mixins' as *; + +// ------------------------------------------------------------ +// Transparent / Current Color Utilities +// ------------------------------------------------------------ +.tutor-bg-transparent { + background-color: transparent; +} + +.tutor-bg-current { + background-color: currentColor; +} + +// ------------------------------------------------------------ +// Brand Colors (Background & Text) +// ------------------------------------------------------------ +@each $key, $value in $tutor-brand-colors { + .tutor-bg-brand-#{$key} { + background-color: $value; + } + .tutor-text-brand-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Gray Colors (Background & Text) +// ------------------------------------------------------------ +@each $key, $value in $tutor-gray-colors { + .tutor-bg-gray-#{$key} { + background-color: $value; + } + .tutor-text-gray-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Success Colors (Background & Text) +// ------------------------------------------------------------ +@each $key, $value in $tutor-success-colors { + .tutor-bg-success-#{$key} { + background-color: $value; + } + .tutor-text-success-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Warning Colors (Background & Text) +// ------------------------------------------------------------ +@each $key, $value in $tutor-warning-colors { + .tutor-bg-warning-#{$key} { + background-color: $value; + } + .tutor-text-warning-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Error Colors (Background & Text) +// ------------------------------------------------------------ +@each $key, $value in $tutor-error-colors { + .tutor-bg-error-#{$key} { + background-color: $value; + } + .tutor-text-error-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Exception Colors (Background & Text) +// ------------------------------------------------------------ +@each $key, $value in $tutor-exception-colors { + .tutor-bg-exception-#{$key} { + background-color: $value; + } + .tutor-text-exception-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Surface Colors +// ------------------------------------------------------------ +@each $key, $value in $tutor-surfaces { + .tutor-surface-#{$key} { + background-color: $value; + } +} + +// ------------------------------------------------------------ +// Text Colors +// ------------------------------------------------------------ +@each $key, $value in $tutor-text-colors { + .tutor-text-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Icon Colors +// ------------------------------------------------------------ +@each $key, $value in $tutor-icons { + .tutor-icon-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Actions Colors +// ------------------------------------------------------------ +@each $key, $value in $tutor-actions { + .tutor-actions-#{$key} { + color: $value; + } +} + +// ------------------------------------------------------------ +// Shadow Utilities +// ------------------------------------------------------------ +@each $key, $value in $tutor-shadows { + .tutor-shadow-#{$key} { + box-shadow: $value; + } +} + +// ------------------------------------------------------------ +// Opacity Utilities +// ------------------------------------------------------------ +$opacities: ( + 0: 0, + 25: 0.25, + 50: 0.5, + 75: 0.75, + 100: 1, +); + +// Generate classes +@each $key, $value in $opacities { + .tutor-opacity-#{$key} { + opacity: $value; + } +} + +// ------------------------------------------------------------ +// Hover State Utilities +// ------------------------------------------------------------ +.tutor-hover-surface-l1:hover { + background-color: $tutor-surface-l1-hover; +} + +.tutor-hover-surface-l2:hover { + background-color: $tutor-surface-l2-hover; +} + +.tutor-hover-text-primary:hover { + color: $tutor-text-primary; +} + +.tutor-hover-text-brand:hover { + color: $tutor-text-brand; +} + +.tutor-hover-border-brand:hover { + border-color: $tutor-border-brand; +} + +.tutor-hover-shadow-md:hover { + box-shadow: $tutor-shadow-md; +} + +.tutor-hover-shadow-lg:hover { + box-shadow: $tutor-shadow-lg; +} + +// ------------------------------------------------------------ +// Focus State Utilities +// ------------------------------------------------------------ +.tutor-focus-border-brand:focus { + border-color: $tutor-border-brand; +} + +.tutor-focus-ring:focus { + @include tutor-focus-ring; +} + +.tutor-focus-outline-none:focus { + outline: none; +} diff --git a/assets/core/scss/utilities/_index.scss b/assets/core/scss/utilities/_index.scss new file mode 100644 index 0000000000..9fc2bf76cc --- /dev/null +++ b/assets/core/scss/utilities/_index.scss @@ -0,0 +1,9 @@ +@forward 'borders'; +@forward 'typography'; +@forward 'colors'; +@forward 'layout'; +@forward 'sizing'; +@forward 'spacing'; +@forward 'transform'; +@forward 'transition'; +@forward 'zIndex'; diff --git a/assets/core/scss/utilities/_layout.scss b/assets/core/scss/utilities/_layout.scss new file mode 100644 index 0000000000..4de93bbb90 --- /dev/null +++ b/assets/core/scss/utilities/_layout.scss @@ -0,0 +1,429 @@ +// Layout Utilities +// Flexbox, grid, positioning, display, and responsive utilities + +@use '../tokens' as *; +@use '../mixins' as *; + +// ------------------------ +// Utility Maps +// ------------------------ + +$display-utils: ( + block: block, + inline-block: inline-block, + inline: inline, + flex: flex, + inline-flex: inline-flex, + grid: grid, + inline-grid: inline-grid, + hidden: none, +); + +$flex-direction-utils: ( + flex-row: row, + flex-row-reverse: row-reverse, + flex-column: column, + flex-column-reverse: column-reverse, +); + +$flex-wrap-utils: ( + wrap: wrap, + wrap-reverse: wrap-reverse, + nowrap: nowrap, +); + +$flex-grow-utils: (0, 1); +$flex-shrink-utils: (0, 1); + +$justify-utils: ( + justify-start: flex-start, + justify-end: flex-end, + justify-center: center, + justify-between: space-between, + justify-around: space-around, + justify-evenly: space-evenly, +); + +$align-items-utils: ( + items-normal: normal, + items-start: flex-start, + items-end: flex-end, + items-center: center, + items-baseline: baseline, + items-stretch: stretch, +); + +$align-content-utils: ( + start: flex-start, + end: flex-end, + center: center, + between: space-between, + around: space-around, + evenly: space-evenly, +); + +$align-self-utils: ( + auto: auto, + start: flex-start, + end: flex-end, + center: center, + stretch: stretch, + baseline: baseline, +); + +$grid-cols: (1, 2, 3, 4, 5, 6, 12); + +$grid-split-utils: ( + '1-5-1': 1.5fr 1fr, + '2-1': 2fr 1fr, + '1-2': 1fr 2fr, +); + +// ------------------------ +// Base Utilities +// ------------------------ + +// Display +@each $name, $value in $display-utils { + .tutor-#{$name} { + display: $value; + } + .tutor-force-#{$name} { + display: $value !important; + } +} + +// Flex direction +@each $name, $dir in $flex-direction-utils { + .tutor-#{$name} { + flex-direction: $dir; + } +} + +// Flex wrap +@each $name, $dir in $flex-wrap-utils { + .tutor-flex-#{$name} { + flex-wrap: $dir; + } +} + +// Flex grow +@each $value in $flex-grow-utils { + .tutor-flex-grow-#{$value} { + flex-grow: $value; + } +} + +// Flex shrink +@each $value in $flex-shrink-utils { + .tutor-flex-shrink-#{$value} { + flex-shrink: $value; + } +} + +// Flex shorthand +.tutor-flex-1 { + flex: 1 1 0%; +} +.tutor-flex-auto { + flex: 1 1 auto; +} +.tutor-flex-initial { + flex: 0 1 auto; +} +.tutor-flex-none { + flex: none; +} +.tutor-flex-center { + @include tutor-flex(row, center, center); +} +.tutor-flex-center-col { + @include tutor-flex(column, center, center); +} + +// Justify content +@each $name, $value in $justify-utils { + .tutor-#{$name} { + justify-content: $value; + } +} + +// Align items +@each $name, $value in $align-items-utils { + .tutor-#{$name} { + align-items: $value; + } +} + +// Align content +@each $name, $value in $align-content-utils { + .tutor-content-#{$name} { + align-content: $value; + } +} + +// Align self +@each $name, $value in $align-self-utils { + .tutor-self-#{$name} { + align-self: $value; + } +} + +// Gap utilities +@each $key, $value in $tutor-spacing { + .tutor-gap-#{$key} { + gap: $value; + } + .tutor-gap-x-#{$key} { + column-gap: $value; + } + .tutor-gap-y-#{$key} { + row-gap: $value; + } +} + +@each $count in $grid-cols { + .tutor-grid-cols-#{$count} { + grid-template-columns: repeat($count, minmax(0, 1fr)); + } +} + +// Custom splits +@each $name, $value in $grid-split-utils { + .tutor-grid-cols-#{$name} { + grid-template-columns: $value; + } +} + +.tutor-grid-cols-none { + grid-template-columns: none; +} + +// Grid column span +@for $i from 1 through 6 { + .tutor-col-span-#{$i} { + grid-column: span #{$i} / span #{$i}; + } +} +.tutor-col-span-full { + grid-column: 1 / -1; +} +.tutor-col-auto { + grid-column: auto; +} + +// ------------------------ +// Positioning Utilities +// ------------------------ + +$position-values: static, fixed, absolute, relative, sticky; +@each $pos in $position-values { + .tutor-#{$pos} { + position: $pos; + } +} + +// Insets +$inset-sides: top, right, bottom, left; +@each $side in $inset-sides { + .tutor-#{$side}-0 { + @if $side == 'right' { + inset-inline-end: 0; + } @else if $side == 'left' { + inset-inline-start: 0; + } @else { + #{$side}: 0; + } + } + .tutor-#{$side}-auto { + @if $side == 'right' { + inset-inline-end: auto; + } @else if $side == 'left' { + inset-inline-start: auto; + } @else { + #{$side}: auto; + } + } +} +@each $key, $value in $tutor-spacing { + @each $side in $inset-sides { + .tutor-#{$side}-#{$key} { + @if $side == 'right' { + inset-inline-end: $value; + } @else if $side == 'left' { + inset-inline-start: $value; + } @else { + #{$side}: $value; + } + } + } +} + +.tutor-inset-0 { + top: 0; + inset-inline-start: 0; + bottom: 0; + inset-inline-end: 0; +} +.tutor-inset-auto { + top: auto; + inset-inline-start: auto; + bottom: auto; + inset-inline-end: auto; +} + +// ------------------------ +// Overflow Utilities +// ------------------------ + +$overflow-types: auto, hidden, visible, scroll; +@each $type in $overflow-types { + .tutor-overflow-#{$type} { + overflow: $type; + } + .tutor-overflow-x-#{$type} { + overflow-x: $type; + } + .tutor-overflow-y-#{$type} { + overflow-y: $type; + } +} + +// ------------------------ +// Float Utilities +// ------------------------ + +.tutor-float-start { + float: inline-start; +} +.tutor-float-end { + float: inline-end; +} +.tutor-float-left { + float: left; +} +.tutor-float-right { + float: right; +} +.tutor-float-none { + float: none; +} + +// ------------------------ +// Icon utility +// ------------------------ + +.tutor-icon { + @include tutor-flex(row, center, center); + flex-shrink: 0; +} + +// ------------------------ +// Aspect ratio utility +// ------------------------ +.tutor-ratio { + content: ' '; + position: relative; + width: 100%; + display: block; + + &-16x9 { + padding-top: 56.25%; + } + + &-4x3 { + padding-top: 75%; + } + + &-3x2 { + padding-top: 66.66%; + } + + &-3x1 { + padding-top: 33.33%; + } + + &-1x1 { + padding-top: 100%; + } + + > * { + position: absolute !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + } + + > img { + object-fit: cover; + object-position: center; + } +} + +// ------------------------ +// Responsive Utilities +// ------------------------ + +@each $breakpoint, $min-width in $tutor-responsive-breakpoints { + @include tutor-breakpoint-down($breakpoint) { + // Display utilities + @each $name, $value in $display-utils { + .tutor-#{$breakpoint}-#{$name} { + display: $value; + } + .tutor-force-#{$breakpoint}-#{$name} { + display: $value !important; + } + } + + // Flex direction utilities + @each $name, $dir in $flex-direction-utils { + .tutor-#{$breakpoint}-#{$name} { + flex-direction: $dir; + } + } + + // Justify content utilities + @each $name, $value in $justify-utils { + .tutor-#{$breakpoint}-#{$name} { + justify-content: $value; + } + } + + // Align items utilities + @each $name, $value in $align-items-utils { + .tutor-#{$breakpoint}-#{$name} { + align-items: $value; + } + } + + // Gap utilities + @each $name, $value in $tutor-responsive-spacing { + .tutor-#{$breakpoint}-gap-#{$name} { + gap: $value; + } + } + + // Grid column utilities + @each $count in $grid-cols { + .tutor-#{$breakpoint}-grid-cols-#{$count} { + grid-template-columns: repeat($count, minmax(0, 1fr)); + } + } + + // Flex shorthand + .tutor-#{$breakpoint}-flex-1 { + flex: 1 1 0%; + } + .tutor-#{$breakpoint}-flex-auto { + flex: 1 1 auto; + } + .tutor-#{$breakpoint}-flex-initial { + flex: 0 1 auto; + } + .tutor-#{$breakpoint}-flex-none { + flex: none; + } + } +} diff --git a/assets/core/scss/utilities/_sizing.scss b/assets/core/scss/utilities/_sizing.scss new file mode 100644 index 0000000000..d2e6846baa --- /dev/null +++ b/assets/core/scss/utilities/_sizing.scss @@ -0,0 +1,196 @@ +// Sizing Utilities +// Width, height, and sizing utilities + +@use '../tokens' as *; +@use '../mixins' as *; + +// ------------------------ +// Width Utilities +// ------------------------ + +$fractional-widths: ( + 1\/2: 50%, + 1\/3: 33.333333%, + 2\/3: 66.666667%, + 1\/4: 25%, + 3\/4: 75%, + 1\/5: 20%, + 2\/5: 40%, + 3\/5: 60%, + 4\/5: 80%, + 1\/6: 16.666667%, + 5\/6: 83.333333% +); + +$fixed-widths: ( + 0: 0, + auto: auto, + full: 100%, + screen: 100vw, + min: min-content, + max: max-content, + fit: fit-content, +); + +// Base width utilities +@each $key, $value in $fixed-widths { + .tutor-w-#{$key} { + width: $value; + } +} + +@each $key, $value in $fractional-widths { + .tutor-w-#{$key} { + width: $value; + } +} + +// Spacing-based widths +@each $key, $value in $tutor-spacing { + .tutor-w-#{$key} { + width: $value; + } +} + +// ------------------------ +// Height Utilities +// ------------------------ + +$fixed-heights: ( + 0: 0, + auto: auto, + full: 100%, + screen: 100vh, + min: min-content, + max: max-content, + fit: fit-content, +); + +@each $key, $value in $fixed-heights { + .tutor-h-#{$key} { + height: $value; + } +} + +// Spacing-based heights +@each $key, $value in $tutor-spacing { + .tutor-h-#{$key} { + height: $value; + } +} + +// ------------------------ +// Min/Max Width & Height +// ------------------------ + +$min-widths: ( + 0: 0, + full: 100%, + min: min-content, + max: max-content, + fit: fit-content, +); + +$max-widths: ( + 0: 0, + none: none, + xs: 320px, + sm: 384px, + md: 448px, + lg: 512px, + xl: 576px, + 2xl: 672px, + 3xl: 768px, + 4xl: 896px, + 5xl: 1024px, + 6xl: 1152px, + 7xl: 1280px, + full: 100%, + min: min-content, + max: max-content, + fit: fit-content, + prose: 65ch, + screen-sm: 640px, + screen-md: 768px, + screen-lg: 1024px, + screen-xl: 1280px, + screen-2xl: 1536px, +); + +$min-heights: ( + 0: 0, + full: 100%, + screen: 100vh, + min: min-content, + max: max-content, + fit: fit-content, +); + +$max-heights: ( + 0: 0, + full: 100%, + screen: 100vh, + min: min-content, + max: max-content, + fit: fit-content, +); + +// Min-width +@each $key, $value in $min-widths { + .tutor-min-w-#{$key} { + min-width: $value; + } +} + +// Max-width +@each $key, $value in $max-widths { + .tutor-max-w-#{$key} { + max-width: $value; + } +} + +// Min-height +@each $key, $value in $min-heights { + .tutor-min-h-#{$key} { + min-height: $value; + } +} + +// Max-height +@each $key, $value in $max-heights { + .tutor-max-h-#{$key} { + max-height: $value; + } +} + +// ------------------------ +// Responsive Sizing Utilities +// ------------------------ + +$responsive-widths: map-merge($fixed-widths, $fractional-widths); +$responsive-heights: $fixed-heights; + +@each $breakpoint, $min-width in $tutor-responsive-breakpoints { + @include tutor-breakpoint-down($breakpoint) { + // Width + @each $key, $value in $responsive-widths { + .tutor-#{$breakpoint}-w-#{$key} { + width: $value; + } + } + + // Height + @each $key, $value in $responsive-heights { + .tutor-#{$breakpoint}-h-#{$key} { + height: $value; + } + } + + // Max-width + @each $key, $value in $max-widths { + .tutor-#{$breakpoint}-max-w-#{$key} { + max-width: $value; + } + } + } +} diff --git a/assets/core/scss/utilities/_spacing.scss b/assets/core/scss/utilities/_spacing.scss new file mode 100644 index 0000000000..ee986d7df1 --- /dev/null +++ b/assets/core/scss/utilities/_spacing.scss @@ -0,0 +1,199 @@ +// Spacing Utilities +// Margin, padding, and negative margin utilities + +@use '../tokens' as *; +@use '../mixins' as *; + +// Margin utilities + +@each $key, $value in $tutor-spacing { + .tutor-m-#{$key} { + margin: $value; + } + + .tutor-mt-#{$key} { + margin-top: $value; + } + + .tutor-mr-#{$key} { + margin-inline-end: $value; + } + + .tutor-mb-#{$key} { + margin-bottom: $value; + } + + .tutor-ml-#{$key} { + margin-inline-start: $value; + } + + .tutor-mx-#{$key} { + margin-inline: $value; + } + + .tutor-my-#{$key} { + margin-top: $value; + margin-bottom: $value; + } +} + +// Padding utilities +@each $key, $value in $tutor-spacing { + .tutor-p-#{$key} { + padding: $value; + } + + .tutor-pt-#{$key} { + padding-top: $value; + } + + .tutor-pr-#{$key} { + padding-inline-end: $value; + } + + .tutor-pb-#{$key} { + padding-bottom: $value; + } + + .tutor-pl-#{$key} { + padding-inline-start: $value; + } + + .tutor-px-#{$key} { + padding-inline: $value; + } + + .tutor-py-#{$key} { + padding-top: $value; + padding-bottom: $value; + } +} + +// Negative margins +@each $key, $value in $tutor-spacing { + @if $key !=0 { + .-tutor-m-#{$key} { + margin: -$value; + } + + .-tutor-mt-#{$key} { + margin-top: -$value; + } + + .-tutor-mr-#{$key} { + margin-inline-end: -$value; + } + + .-tutor-mb-#{$key} { + margin-bottom: -$value; + } + + .-tutor-ml-#{$key} { + margin-inline-start: -$value; + } + + .-tutor-mx-#{$key} { + margin-inline: -$value; + } + + .-tutor-my-#{$key} { + margin-top: -$value; + margin-bottom: -$value; + } + } +} + +// Auto margins +.tutor-m-auto { + margin: auto; +} + +.tutor-mt-auto { + margin-top: auto; +} + +.tutor-mr-auto { + margin-inline-end: auto; +} + +.tutor-mb-auto { + margin-bottom: auto; +} + +.tutor-ml-auto { + margin-inline-start: auto; +} + +.tutor-mx-auto { + margin-inline: auto; +} + +.tutor-my-auto { + margin-top: auto; + margin-bottom: auto; +} + +// Responsive spacing utilities +@each $breakpoint, $min-width in $tutor-responsive-breakpoints { + @include tutor-breakpoint-down($breakpoint) { + @each $space-key, $space-value in $tutor-responsive-spacing { + .tutor-#{$breakpoint}-m-#{$space-key} { + margin: $space-value; + } + + .tutor-#{$breakpoint}-mt-#{$space-key} { + margin-top: $space-value; + } + + .tutor-#{$breakpoint}-mr-#{$space-key} { + margin-inline-end: $space-value; + } + + .tutor-#{$breakpoint}-mb-#{$space-key} { + margin-bottom: $space-value; + } + + .tutor-#{$breakpoint}-ml-#{$space-key} { + margin-inline-start: $space-value; + } + + .tutor-#{$breakpoint}-mx-#{$space-key} { + margin-inline: $space-value; + } + + .tutor-#{$breakpoint}-my-#{$space-key} { + margin-top: $space-value; + margin-bottom: $space-value; + } + + .tutor-#{$breakpoint}-p-#{$space-key} { + padding: $space-value; + } + + .tutor-#{$breakpoint}-pt-#{$space-key} { + padding-top: $space-value; + } + + .tutor-#{$breakpoint}-pr-#{$space-key} { + padding-inline-end: $space-value; + } + + .tutor-#{$breakpoint}-pb-#{$space-key} { + padding-bottom: $space-value; + } + + .tutor-#{$breakpoint}-pl-#{$space-key} { + padding-inline-start: $space-value; + } + + .tutor-#{$breakpoint}-px-#{$space-key} { + padding-inline: $space-value; + } + + .tutor-#{$breakpoint}-py-#{$space-key} { + padding-top: $space-value; + padding-bottom: $space-value; + } + } + } +} diff --git a/assets/core/scss/utilities/_transform.scss b/assets/core/scss/utilities/_transform.scss new file mode 100644 index 0000000000..b1b7005562 --- /dev/null +++ b/assets/core/scss/utilities/_transform.scss @@ -0,0 +1,133 @@ +// Transform Utilities +// Utilities for transform properties + +@use '../tokens' as *; +@use '../mixins' as *; + +// Transform origin utilities +.tutor-origin-center { + transform-origin: center; +} + +.tutor-origin-top { + transform-origin: top; +} + +.tutor-origin-top-right { + transform-origin: top right; +} + +.tutor-origin-right { + transform-origin: right; +} + +.tutor-origin-bottom-right { + transform-origin: bottom right; +} + +.tutor-origin-bottom { + transform-origin: bottom; +} + +.tutor-origin-bottom-left { + transform-origin: bottom left; +} + +.tutor-origin-left { + transform-origin: left; +} + +.tutor-origin-top-left { + transform-origin: top left; +} + +// Scale utilities +$tutor-scale-values: ( + 0: 0, + 50: 0.5, + 75: 0.75, + 90: 0.9, + 95: 0.95, + 100: 1, + 105: 1.05, + 110: 1.1, + 125: 1.25, + 150: 1.5, +); + +@each $key, $value in $tutor-scale-values { + .tutor-scale-#{$key} { + transform: scale($value); + } + + .tutor-scale-x-#{$key} { + transform: scaleX($value); + } + + .tutor-scale-y-#{$key} { + transform: scaleY($value); + } +} + +// Rotate utilities +$tutor-rotate-values: ( + 0: 0deg, + 45: 45deg, + 90: 90deg, + 180: 180deg, + 270: 270deg, +); + +@each $key, $value in $tutor-rotate-values { + .tutor-rotate-#{$key} { + transform: rotate($value); + } +} + +@each $key, $value in $tutor-spacing { + .tutor-translate-x-#{$key} { + transform: translateX($value); + } + + .tutor-translate-y-#{$key} { + transform: translateY($value); + } +} + +// Skew utilities +$tutor-skew-values: ( + 0: 0deg, + 1: 1deg, + 2: 2deg, + 3: 3deg, + 6: 6deg, + 12: 12deg, +); + +@each $key, $value in $tutor-skew-values { + .tutor-skew-x-#{$key} { + transform: skewX($value); + } + + .tutor-skew-y-#{$key} { + transform: skewY($value); + } +} + +// Transform style utilities +.tutor-transform-flat { + transform-style: flat; +} + +.tutor-transform-3d { + transform-style: preserve-3d; +} + +// Backface visibility utilities +.tutor-backface-visible { + backface-visibility: visible; +} + +.tutor-backface-hidden { + backface-visibility: hidden; +} diff --git a/assets/core/scss/utilities/_transition.scss b/assets/core/scss/utilities/_transition.scss new file mode 100644 index 0000000000..6f211e25fd --- /dev/null +++ b/assets/core/scss/utilities/_transition.scss @@ -0,0 +1,77 @@ +// Transition Utilities +// Utilities for transition properties + +@use '../tokens' as *; +@use '../mixins' as *; + +// Transition property utilities +.tutor-transition-none { + transition-property: none; +} + +.tutor-transition-all { + @include tutor-transition(all); +} + +.tutor-transition { + @include tutor-transition((background-color, border-color, color, fill, stroke, opacity, box-shadow, transform)); +} + +.tutor-transition-colors { + @include tutor-transition((background-color, border-color, color, fill, stroke)); +} + +.tutor-transition-opacity { + @include tutor-transition(opacity); +} + +.tutor-transition-shadow { + @include tutor-transition(box-shadow); +} + +.tutor-transition-transform { + @include tutor-transition(transform); +} + +// Transition duration utilities +$tutor-transition-values: ( + 75: 75ms, + 100: 100ms, + 150: 150ms, + 200: 200ms, + 300: 300ms, + 500: 500ms, + 700: 700ms, + 1000: 1000ms, +); + +@each $key, $value in $tutor-transition-values { + .tutor-duration-#{$key} { + transition-duration: $value; + } +} + +@each $key, $value in $tutor-transition-values { + .tutor-delay-#{$key} { + transition-delay: $value; + } +} + +// Animation utilities +.tutor-animate-none { + animation: none; +} + +.tutor-animate-spin { + animation: tutor-spin 1s linear infinite; +} + +// Keyframe definitions +@keyframes tutor-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/assets/core/scss/utilities/_typography.scss b/assets/core/scss/utilities/_typography.scss new file mode 100644 index 0000000000..d47633fdd9 --- /dev/null +++ b/assets/core/scss/utilities/_typography.scss @@ -0,0 +1,235 @@ +@use 'sass:map'; +@use '../tokens' as *; +@use '../mixins' as *; + +$text-align-utils: ( + left: start, + right: end, + start: start, + end: end, + center: center, + justify: justify, +); + +.tutor-h1 { + @include tutor-typography('h1', 'bold', 'primary', 'heading'); + margin: $tutor-spacing-none; +} + +.tutor-h2 { + @include tutor-typography('h2', 'bold', 'primary', 'heading'); + margin: $tutor-spacing-none; +} + +.tutor-h3 { + @include tutor-typography('h3', 'semibold', 'primary', 'heading'); + margin: $tutor-spacing-none; +} + +.tutor-h4 { + @include tutor-typography('h4', 'semibold', 'primary', 'heading'); + margin: $tutor-spacing-none; +} + +.tutor-h5 { + @include tutor-typography('h5', 'medium', 'primary', 'heading'); + margin: $tutor-spacing-none; +} + +.tutor-p1 { + @include tutor-typography('p1'); +} + +.tutor-p2 { + @include tutor-typography('p2'); +} + +.tutor-p3 { + @include tutor-typography('p3'); +} + +.tutor-medium { + @include tutor-typography('medium'); +} + +.tutor-small { + @include tutor-typography('small'); +} + +.tutor-tiny { + @include tutor-typography('tiny'); +} + +.tutor-tiny-2 { + @include tutor-typography('tiny-2'); +} + +// Font size utilities +@each $key, $value in $tutor-font-sizes { + .tutor-text-#{$key} { + font-size: $value; + line-height: map.get($tutor-line-heights, $key); + } +} + +// Font weight utilities +@each $key, $value in $tutor-font-weights { + .tutor-font-#{$key} { + font-weight: $value; + } +} + +// Text alignment (RTL-aware) +@each $name, $value in $text-align-utils { + .tutor-text-#{$name} { + text-align: $value; + } +} + +// Text decoration +.tutor-underline { + text-decoration: underline; +} + +.tutor-line-through { + text-decoration: line-through; +} + +.tutor-no-underline { + text-decoration: none; +} + +// Text transform +.tutor-uppercase { + text-transform: uppercase; +} + +.tutor-lowercase { + text-transform: lowercase; +} + +.tutor-capitalize { + text-transform: capitalize; +} + +.tutor-normal-case { + text-transform: none; +} + +// Text overflow +.tutor-truncate { + @include tutor-text-truncate; +} + +.tutor-text-ellipsis { + text-overflow: ellipsis; +} + +.tutor-text-clip { + text-overflow: clip; +} + +// Line clamp utilities +.tutor-line-clamp-1 { + @include tutor-text-clamp(1); +} + +.tutor-line-clamp-2 { + @include tutor-text-clamp(2); +} + +.tutor-line-clamp-3 { + @include tutor-text-clamp(3); +} + +.tutor-line-clamp-4 { + @include tutor-text-clamp(4); +} + +.tutor-line-clamp-5 { + @include tutor-text-clamp(5); +} + +.tutor-line-clamp-6 { + @include tutor-text-clamp(6); +} + +// White space +.tutor-whitespace-normal { + white-space: normal; +} + +.tutor-whitespace-nowrap { + white-space: nowrap; +} + +.tutor-whitespace-pre { + white-space: pre; +} + +.tutor-whitespace-pre-line { + white-space: pre-line; +} + +.tutor-whitespace-pre-wrap { + white-space: pre-wrap; +} + +// Word break +.tutor-break-normal { + overflow-wrap: normal; + word-break: normal; +} + +.tutor-break-words { + overflow-wrap: break-word; +} + +.tutor-break-all { + word-break: break-all; +} + +// List styles +.tutor-list-none { + list-style-type: none; +} + +.tutor-list-disc { + list-style-type: disc; +} + +.tutor-list-decimal { + list-style-type: decimal; +} + +.tutor-list-inside { + list-style-position: inside; +} + +.tutor-list-outside { + list-style-position: outside; +} + +// Responsive typography utilities +@each $breakpoint, $min-width in $tutor-responsive-breakpoints { + @include tutor-breakpoint-down($breakpoint) { + @each $size-key, $size-value in $tutor-font-sizes { + .tutor-#{$breakpoint}-text-#{$size-key} { + font-size: $size-value; + line-height: map.get($tutor-line-heights, $size-key); + } + } + + @each $weight-key, $weight-value in $tutor-font-weights { + .tutor-#{$breakpoint}-font-#{$weight-key} { + font-weight: $weight-value; + } + } + + @each $name, $align-value in $text-align-utils { + .tutor-#{$breakpoint}-text-#{$name} { + text-align: $align-value; + } + } + } +} diff --git a/assets/core/scss/utilities/_zIndex.scss b/assets/core/scss/utilities/_zIndex.scss new file mode 100644 index 0000000000..aae7661281 --- /dev/null +++ b/assets/core/scss/utilities/_zIndex.scss @@ -0,0 +1,7 @@ +@use '../tokens' as *; + +@each $key, $value in $tutor-z { + .tutor-z-#{$key} { + z-index: $value; + } +} \ No newline at end of file diff --git a/assets/core/ts/ComponentRegistry.ts b/assets/core/ts/ComponentRegistry.ts new file mode 100644 index 0000000000..4425f24266 --- /dev/null +++ b/assets/core/ts/ComponentRegistry.ts @@ -0,0 +1,148 @@ +import { type Alpine } from 'alpinejs'; + +import { type AlpineComponentMeta, type LazyComponentLoader, type ServiceMeta, type TutorCore } from '@Core/ts/types'; +import { makeFirstCharacterUpperCase } from '@Core/ts/utils/string'; + +interface RegisterAllOptions { + components?: AlpineComponentMeta[]; + services?: ServiceMeta[]; +} + +type RegistryType = 'component' | 'service'; + +interface GetOptions { + name: string; + type: RegistryType; +} + +interface RegisterOptions { + type: RegistryType; + meta: AlpineComponentMeta | ServiceMeta; +} + +class Registry { + private components = new Map(); + private lazyComponents = new Map(); + private loadingComponents = new Map>(); + private services = new Map(); + + register({ type, meta }: RegisterOptions): void { + if (type === 'component') { + const componentMeta = meta as AlpineComponentMeta; + if (!this.components.has(componentMeta.name)) { + this.components.set(componentMeta.name, componentMeta); + } + } else { + const serviceMeta = meta as ServiceMeta; + if (!this.services.has(serviceMeta.name)) { + this.services.set(serviceMeta.name, serviceMeta); + this.exposeToWindow({ type: 'service', items: [serviceMeta] }); + } + } + } + + registerLazy(loaders: Record): void { + Object.entries(loaders).forEach(([name, loader]) => { + this.lazyComponents.set(name, loader); + }); + } + + registerAll({ components = [], services = [] }: RegisterAllOptions): void { + for (const component of components) { + this.register({ type: 'component', meta: component }); + } + for (const service of services) { + this.register({ type: 'service', meta: service }); + } + } + + get({ name, type }: GetOptions): AlpineComponentMeta | T | undefined { + const map = type === 'component' ? this.components : this.services; + const item = map.get(name); + return type === 'service' ? ((item as ServiceMeta)?.instance as T) : (item as AlpineComponentMeta); + } + + has({ name, type }: GetOptions): boolean { + return type === 'component' ? this.components.has(name) : this.services.has(name); + } + + async loadComponent(name: string): Promise { + // Already registered. + if (this.components.has(name)) { + return; + } + + // Already being loaded. + const existingPromise = this.loadingComponents.get(name); + if (existingPromise) { + return existingPromise; + } + + const loader = this.lazyComponents.get(name); + + if (!loader) { + return; + } + + const loadingPromise = (async () => { + try { + const meta = await loader(); + + this.register({ + type: 'component', + meta, + }); + } finally { + this.loadingComponents.delete(name); + } + })(); + + this.loadingComponents.set(name, loadingPromise); + + return loadingPromise; + } + + async loadComponents(names: string[]): Promise { + await Promise.all(names.map((name) => this.loadComponent(name))); + } + + private exposeToWindow({ type, items }: { type: RegistryType; items: (AlpineComponentMeta | ServiceMeta)[] }): void { + if (typeof window === 'undefined') return; + + const TutorCore: TutorCore = window.TutorCore || {}; + + for (const meta of items) { + if (type === 'service') { + TutorCore[meta.name] = (meta as ServiceMeta).instance; + continue; + } + + if ((meta as AlpineComponentMeta).global) { + TutorCore[meta.name] = (meta as AlpineComponentMeta).component; + } + } + + window.TutorCore = TutorCore; + } + + exposeComponents(componentNames?: string[]): void { + const components = componentNames + ? Array.from(this.components.values()).filter((m) => componentNames.includes(m.name)) + : Array.from(this.components.values()); + + this.exposeToWindow({ type: 'component', items: components }); + } + + initWithAlpine(Alpine: Alpine): void { + for (const meta of Array.from(this.components.values())) { + Alpine.data(`tutor${makeFirstCharacterUpperCase(meta.name)}`, meta.component); + } + + this.exposeToWindow({ + type: 'component', + items: Array.from(this.components.values()), + }); + } +} + +export const TutorComponentRegistry = new Registry(); diff --git a/assets/core/ts/components/accordion.ts b/assets/core/ts/components/accordion.ts new file mode 100644 index 0000000000..0d3f09612e --- /dev/null +++ b/assets/core/ts/components/accordion.ts @@ -0,0 +1,104 @@ +import { type AlpineComponentMeta } from '@Core/ts/types'; + +export interface AccordionConfig { + multiple?: boolean; + defaultOpen?: number[]; +} + +export interface AlpineAccordionData { + openItems: number[]; + multiple: boolean; + $el?: HTMLElement; + toggle: (index: number) => void; + isOpen: (index: number) => boolean; + handleKeydown: (event: KeyboardEvent, index: number) => void; + focusNext: (currentIndex: number) => void; + focusPrevious: (currentIndex: number) => void; + focusFirst: () => void; + focusLast: () => void; +} + +export function createAccordion(config: AccordionConfig = {}): AlpineAccordionData { + return { + openItems: config.defaultOpen || ([] as number[]), + multiple: config.multiple !== false, // Default to true if not specified + $el: undefined as HTMLElement | undefined, + + toggle(index: number): void { + if (this.openItems.includes(index)) { + this.openItems = this.openItems.filter((i: number) => i !== index); + } else { + if (!this.multiple) { + this.openItems = [index]; + } else { + this.openItems.push(index); + } + } + }, + + isOpen(index: number): boolean { + return this.openItems.includes(index); + }, + + handleKeydown(event: KeyboardEvent, index: number): void { + switch (event.key) { + case 'Enter': + case ' ': + event.preventDefault(); + this.toggle(index); + break; + case 'ArrowDown': + event.preventDefault(); + this.focusNext(index); + break; + case 'ArrowUp': + event.preventDefault(); + this.focusPrevious(index); + break; + case 'Home': + event.preventDefault(); + this.focusFirst(); + break; + case 'End': + event.preventDefault(); + this.focusLast(); + break; + } + }, + + focusNext(currentIndex: number): void { + const triggers = this.$el?.querySelectorAll('.tutor-accordion-trigger'); + if (triggers) { + const nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : 0; + (triggers[nextIndex] as HTMLElement).focus(); + } + }, + + focusPrevious(currentIndex: number): void { + const triggers = this.$el?.querySelectorAll('.tutor-accordion-trigger'); + if (triggers) { + const prevIndex = currentIndex > 0 ? currentIndex - 1 : triggers.length - 1; + (triggers[prevIndex] as HTMLElement).focus(); + } + }, + + focusFirst(): void { + const triggers = this.$el?.querySelectorAll('.tutor-accordion-trigger'); + if (triggers && triggers.length > 0) { + (triggers[0] as HTMLElement).focus(); + } + }, + + focusLast(): void { + const triggers = this.$el?.querySelectorAll('.tutor-accordion-trigger'); + if (triggers && triggers.length > 0) { + (triggers[triggers.length - 1] as HTMLElement).focus(); + } + }, + }; +} + +export const accordionMeta: AlpineComponentMeta = { + name: 'accordion', + component: createAccordion, +}; diff --git a/assets/core/ts/components/calendar.ts b/assets/core/ts/components/calendar.ts new file mode 100644 index 0000000000..e541a334d2 --- /dev/null +++ b/assets/core/ts/components/calendar.ts @@ -0,0 +1,609 @@ +import { __ } from '@wordpress/i18n'; +import dayjs from 'dayjs'; +import { type Calendar, Calendar as VanillaCalendar, type Options } from 'vanilla-calendar-pro'; + +import { DateFormats } from '@Core/ts/date-formats'; +import { type AlpineComponentMeta } from '@Core/ts/types'; + +import { tutorConfig } from '@TutorShared/config/config'; + +// @ts-ignore +import 'vanilla-calendar-pro/styles/index.css'; + +const PRESETS = { + ALL_TIME: 'all-time', + YESTERDAY: 'yesterday', + LAST_7: 'last-7', + LAST_14: 'last-14', + LAST_30: 'last-30', + THIS_MONTH: 'this-month', + LAST_MONTH: 'last-month', + LAST_YEAR: 'last-year', +} as const; + +type Preset = (typeof PRESETS)[keyof typeof PRESETS]; + +const PRESET_LABELS: Record = { + [PRESETS.ALL_TIME]: __('All Time', 'tutor'), + [PRESETS.YESTERDAY]: __('Yesterday', 'tutor'), + [PRESETS.LAST_7]: __('Last 7 days', 'tutor'), + [PRESETS.LAST_14]: __('Last 14 days', 'tutor'), + [PRESETS.LAST_30]: __('Last 30 days', 'tutor'), + [PRESETS.THIS_MONTH]: __('This month', 'tutor'), + [PRESETS.LAST_MONTH]: __('Last month', 'tutor'), + [PRESETS.LAST_YEAR]: __('Last year', 'tutor'), +}; + +const TUTOR_CALENDAR_SELECTORS = { + form: 'form[x-data*="tutorForm"]', + modalContent: '.tutor-modal-content', + actionButton: '[data-calendar-action]', + presetButton: '[data-preset]', +} as const; + +const VC_CALENDAR_SELECTORS = { + navigationControls: '[data-vc="controls"]', + dateCell: '[data-vc-date]', + presetButtonsContainer: '.vc-presets [data-preset]', +} as const; + +const TUTOR_CALENDAR_DATA_ATTRS = { + action: 'data-calendar-action', + preset: 'data-preset', + active: 'data-active', + modalCalendar: 'data-tutor-modal-calendar', +} as const; + +const VC_CALENDAR_DATA_ATTRS = { + date: 'data-vc-date', + calendarHidden: 'data-vc-calendar-hidden', +} as const; + +const TUTOR_CALENDAR_VALUES = { + apply: 'apply', + clear: 'clear', + calendarZIndex: '100001', + themeAttrDetect: '[data-tutor-theme]', + calendarClasses: 'vc tutor-vc-calendar', +} as const; + +const TUTOR_DOM_VALUES = { + fixed: 'fixed', + auto: 'auto', +} as const; + +const TUTOR_CALENDAR_EVENTS = { + click: 'click', + focus: 'focus', + pointerDown: 'pointerdown', + mouseDown: 'mousedown', + popstate: 'popstate', + calendarClear: 'tutor-calendar:clear', +} as const; + +const TUTOR_CALENDAR_QUERY_PARAMS = { + startDate: 'start_date', + endDate: 'end_date', + date: 'date', + currentPage: 'current_page', +} as const; + +export function calendar({ options, hidePopover }: { options: Options; hidePopover?: () => void }) { + return { + $el: undefined as HTMLElement | HTMLInputElement | undefined, + $nextTick: null as unknown as (callback: () => void) => void, + calendar: null as Calendar | null, + calendarRootElement: null as HTMLElement | null, + cleanupCalendarRootListeners: null as (() => void) | null, + calendarClearHandler: null as (() => void) | null, + popStateHandler: null as (() => void) | null, + + parseInputValue(inputValue: string): { selectedDates: string[]; selectedTime: string } { + const normalizedValue = inputValue.trim(); + + if (!normalizedValue) { + return { selectedDates: [], selectedTime: '' }; + } + + const [datePart, ...timeParts] = normalizedValue.split(' '); + const selectedDates = datePart ? [datePart] : []; + const selectedTime = timeParts.join(' ').trim(); + + return { selectedDates, selectedTime }; + }, + + syncCalendarWithInputValue(inputValue?: string): void { + if (!this.calendar || !this.calendar.context.inputElement) { + return; + } + + const value = inputValue ?? this.calendar.context.inputElement.value; + const { selectedDates, selectedTime } = this.parseInputValue(value); + + this.calendar.set({ + selectedDates, + selectedTime: selectedTime || undefined, + }); + }, + + setupFormIntegration(): void { + if (!options.inputMode || !(this.$el instanceof HTMLInputElement)) { + return; + } + + const inputElement = this.$el; + const fieldName = inputElement.name; + if (!fieldName) { + return; + } + + const formElement = inputElement.closest(TUTOR_CALENDAR_SELECTORS.form) as HTMLElement | null; + if (!formElement) { + return; + } + + try { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const alpineData = window.Alpine?.$data(formElement) as any; + if (!alpineData || typeof alpineData.setValue !== 'function') { + return; + } + + const inputValue = inputElement.value?.trim() ?? ''; + const formValue = alpineData.values?.[fieldName]; + const normalizedFormValue = formValue == null ? '' : String(formValue).trim(); + + // Keep initial input value as the form baseline default when form has no value yet. + if (!normalizedFormValue && inputValue) { + alpineData.setValue(fieldName, inputValue, { + shouldValidate: false, + shouldTouch: false, + shouldDirty: false, + }); + + if (alpineData.fields?.[fieldName]) { + alpineData.fields[fieldName].defaultValue = inputValue; + } + } else if (normalizedFormValue && normalizedFormValue !== inputValue) { + inputElement.value = normalizedFormValue; + this.syncCalendarWithInputValue(normalizedFormValue); + } + + // Watch external form updates (setValue/reset/setValues) and keep calendar state in sync. + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const component = this as unknown as { $watch?: (path: string, cb: (value: any) => void) => void }; + component.$watch?.(`values['${fieldName}']`, (newValue) => { + const normalizedValue = newValue == null ? '' : String(newValue).trim(); + if (inputElement.value !== normalizedValue) { + inputElement.value = normalizedValue; + } + + this.syncCalendarWithInputValue(normalizedValue); + }); + } catch (error) { + // eslint-disable-next-line no-console + console.warn('Failed to integrate calendar with form:', error); + } + }, + + getCalendarRootElement(): HTMLElement | null { + const calendarContext = this.calendar?.context as { mainElement?: HTMLElement } | undefined; + const mainElement = calendarContext?.mainElement ?? null; + if (!mainElement) { + return null; + } + + // In input mode, before first open, mainElement points to the input itself. + if (mainElement instanceof HTMLInputElement) { + return null; + } + + return mainElement; + }, + + setupCalendarRootListeners(): void { + const rootElement = this.getCalendarRootElement(); + if (!rootElement) { + return; + } + + this.cleanupCalendarRootListeners?.(); + + this.calendarRootElement = rootElement; + + const clickHandler = (event: Event) => { + this.handleNavigationClick(event); + this.handlePresetClick(event); + this.handleActionClick(event); + }; + + // Keep modal outside-click handlers from receiving calendar clicks. + const pointerDownHandler = (event: Event) => { + event.stopPropagation(); + }; + + rootElement.addEventListener(TUTOR_CALENDAR_EVENTS.click, clickHandler); + rootElement.addEventListener(TUTOR_CALENDAR_EVENTS.pointerDown, pointerDownHandler); + rootElement.addEventListener(TUTOR_CALENDAR_EVENTS.mouseDown, pointerDownHandler); + + this.cleanupCalendarRootListeners = () => { + rootElement.removeEventListener(TUTOR_CALENDAR_EVENTS.click, clickHandler); + rootElement.removeEventListener(TUTOR_CALENDAR_EVENTS.pointerDown, pointerDownHandler); + rootElement.removeEventListener(TUTOR_CALENDAR_EVENTS.mouseDown, pointerDownHandler); + }; + }, + + integrateWithModalContext(): void { + if (!options.inputMode || !(this.$el instanceof HTMLInputElement)) { + return; + } + + const inputElement = this.$el; + const modalContent = inputElement.closest(TUTOR_CALENDAR_SELECTORS.modalContent) as HTMLElement | null; + if (!modalContent) { + return; + } + + const rootElement = this.getCalendarRootElement(); + if (!rootElement) { + return; + } + + rootElement.setAttribute(TUTOR_CALENDAR_DATA_ATTRS.modalCalendar, 'true'); + if (!modalContent.contains(rootElement)) { + modalContent.appendChild(rootElement); + } + + // Keep viewport-based coordinates after moving into modal DOM. + rootElement.removeAttribute(VC_CALENDAR_DATA_ATTRS.calendarHidden); + rootElement.style.pointerEvents = TUTOR_DOM_VALUES.auto; + rootElement.style.position = TUTOR_DOM_VALUES.fixed; + rootElement.style.zIndex = TUTOR_CALENDAR_VALUES.calendarZIndex; + }, + + init(): void { + if (!this.$el) return; + + this.$nextTick(() => { + const el = this.$el!; + const url = new URL(window.location.href); + + const selectedDates: string[] = []; + let selectedTime = ''; + + // For input mode + if (options.inputMode && (el as HTMLInputElement).value) { + const parsedValue = this.parseInputValue((el as HTMLInputElement).value); + selectedDates.push(...parsedValue.selectedDates); + selectedTime = parsedValue.selectedTime; + } else { + // For filter mode + const startDate = url.searchParams.get(TUTOR_CALENDAR_QUERY_PARAMS.startDate); + const endDate = url.searchParams.get(TUTOR_CALENDAR_QUERY_PARAMS.endDate); + const singleDate = url.searchParams.get(TUTOR_CALENDAR_QUERY_PARAMS.date); + + if (startDate && endDate) { + selectedDates.push(startDate, endDate); + } else if (singleDate) { + selectedDates.push(singleDate); + } + } + + const userOnInit = options.onInit; + const userOnShow = options.onShow; + + this.calendar = new VanillaCalendar(el, { + ...options, + themeAttrDetect: TUTOR_CALENDAR_VALUES.themeAttrDetect, + locale: tutorConfig.local?.replace('_', '-') ?? 'en-US', + enableJumpToSelectedDate: true, + selectedWeekends: [], + displayDatesOutside: false, + ...(selectedDates.length ? { selectedDates } : {}), + ...(selectedTime ? { selectedTime } : {}), + onClickDate: (self, event) => this.handleDateClick(self, event as MouseEvent), + onInit: (self) => { + this.setupCalendarRootListeners(); + this.integrateWithModalContext(); + userOnInit?.(self); + }, + onShow: (self) => { + this.setupCalendarRootListeners(); + this.integrateWithModalContext(); + userOnShow?.(self); + }, + styles: { + calendar: TUTOR_CALENDAR_VALUES.calendarClasses, + }, + layouts: { + multiple: ` + + + + +
+ <#Multiple> +
+ +
+ <#WeekNumbers /> +
+ <#Week /> + <#Dates /> +
+
+
+ <#/Multiple> + <#DateRangeTooltip /> +
+ + <#ControlTime /> + +
+ + +
+ `, + }, + }); + + this.calendar.init(); + if (options.inputMode) { + this.syncCalendarWithInputValue((el as HTMLInputElement).value); + this.setupFormIntegration(); + } + this.updateActivePreset(); + + el.addEventListener(TUTOR_CALENDAR_EVENTS.focus, () => this.syncCalendarWithInputValue()); + el.addEventListener(TUTOR_CALENDAR_EVENTS.click, () => this.syncCalendarWithInputValue()); + + this.popStateHandler = () => this.updateActivePreset(); + this.calendarClearHandler = () => this.clear(); + window.addEventListener(TUTOR_CALENDAR_EVENTS.popstate, this.popStateHandler); + window.addEventListener(TUTOR_CALENDAR_EVENTS.calendarClear, this.calendarClearHandler); + }); + }, + + destroy() { + this.cleanupCalendarRootListeners?.(); + this.cleanupCalendarRootListeners = null; + this.calendarRootElement = null; + this.calendar?.destroy(); + this.calendar = null; + + if (this.popStateHandler) { + window.removeEventListener(TUTOR_CALENDAR_EVENTS.popstate, this.popStateHandler); + this.popStateHandler = null; + } + + if (this.calendarClearHandler) { + window.removeEventListener(TUTOR_CALENDAR_EVENTS.calendarClear, this.calendarClearHandler); + this.calendarClearHandler = null; + } + }, + + handleActionClick(e: Event) { + const target = (e.target as HTMLElement).closest(TUTOR_CALENDAR_SELECTORS.actionButton); + if (!target) return; + + const action = target.getAttribute(TUTOR_CALENDAR_DATA_ATTRS.action); + if (action === TUTOR_CALENDAR_VALUES.apply) { + this.applyRange(); + } else if (action === TUTOR_CALENDAR_VALUES.clear) { + this.clear(); + } + }, + + handleNavigationClick(e: Event) { + const target = (e.target as HTMLElement).closest(VC_CALENDAR_SELECTORS.navigationControls); + if (!target) return; + + e.stopPropagation(); + }, + + handlePresetClick(e: Event) { + const target = (e.target as HTMLElement).closest(TUTOR_CALENDAR_SELECTORS.presetButton); + if (!target) return; + + const preset = target.getAttribute(TUTOR_CALENDAR_DATA_ATTRS.preset) as Preset | null; + if (preset) { + this.applyPreset(preset); + } + }, + + handleDateClick(self: Calendar, event: MouseEvent) { + event.stopPropagation(); + if (self.context.inputElement) { + this.handleInputSelection(self); + } else if (self.selectionDatesMode === 'multiple-ranged') { + const date = (event.target as HTMLElement) + .closest(VC_CALENDAR_SELECTORS.dateCell) + ?.getAttribute(VC_CALENDAR_DATA_ATTRS.date); + + if (date && self.context.selectedDates.length === 2 && !self.context.selectedDates[0]) { + this.calendar?.set({ selectedDates: [date, date] }); + } + } else { + this.handleSingleDateSelection(self); + } + }, + + handleInputSelection(self: Calendar) { + const selectedDate = self.context.selectedDates[0] ?? ''; + const selectedTime = self.context.selectedTime ?? ''; + const inputValue = `${selectedDate}${selectedTime ? ` ${selectedTime}` : ''}`.trim(); + + if (self.context.inputElement) { + self.context.inputElement.value = inputValue; + self.context.inputElement.dispatchEvent(new Event('input', { bubbles: true })); + self.context.inputElement.dispatchEvent(new Event('change', { bubbles: true })); + self.context.inputElement.dispatchEvent(new Event('blur', { bubbles: true })); + self.hide(); + } + }, + + applyRange() { + if (!this.calendar || this.calendar.context.selectedDates.length !== 2) return; + + hidePopover?.(); + this.navigateWithParams({ + [TUTOR_CALENDAR_QUERY_PARAMS.startDate]: this.calendar.context.selectedDates[0], + [TUTOR_CALENDAR_QUERY_PARAMS.endDate]: this.calendar.context.selectedDates[1], + }); + }, + + handleSingleDateSelection(self: Calendar) { + hidePopover?.(); + this.navigateWithParams({ + [TUTOR_CALENDAR_QUERY_PARAMS.date]: self.context.selectedDates[0], + }); + }, + + navigateWithParams(params: Record) { + const url = new URL(window.location.href); + + // Always reset pagination when the date filter changes. + url.searchParams.delete(TUTOR_CALENDAR_QUERY_PARAMS.currentPage); + + // Also strip any additional caller-specified params. + if (Array.isArray((options as Record).clearParams)) { + ((options as Record).clearParams as string[]).forEach((key) => { + url.searchParams.delete(key); + }); + } + + Object.entries(params).forEach(([key, value]) => { + if (value === null) { + url.searchParams.delete(key); + } else { + url.searchParams.set(key, value); + } + }); + + window.location.href = url.toString(); + }, + + clear() { + this.navigateWithParams({ + [TUTOR_CALENDAR_QUERY_PARAMS.startDate]: null, + [TUTOR_CALENDAR_QUERY_PARAMS.endDate]: null, + [TUTOR_CALENDAR_QUERY_PARAMS.date]: null, + }); + }, + + getPresetDates(preset: Preset): string[] { + const today = dayjs().startOf('day'); + + switch (preset) { + case PRESETS.ALL_TIME: + return []; + case PRESETS.YESTERDAY: + return [ + today.subtract(1, 'day').format(DateFormats.yearMonthDay), + today.subtract(1, 'day').format(DateFormats.yearMonthDay), + ]; + case PRESETS.LAST_7: + return [today.subtract(6, 'day').format(DateFormats.yearMonthDay), today.format(DateFormats.yearMonthDay)]; + case PRESETS.LAST_14: + return [today.subtract(13, 'day').format(DateFormats.yearMonthDay), today.format(DateFormats.yearMonthDay)]; + case PRESETS.LAST_30: + return [today.subtract(29, 'day').format(DateFormats.yearMonthDay), today.format(DateFormats.yearMonthDay)]; + case PRESETS.THIS_MONTH: + return [ + today.startOf('month').format(DateFormats.yearMonthDay), + today.endOf('month').format(DateFormats.yearMonthDay), + ]; + case PRESETS.LAST_MONTH: + return [ + today.subtract(1, 'month').startOf('month').format(DateFormats.yearMonthDay), + today.subtract(1, 'month').endOf('month').format(DateFormats.yearMonthDay), + ]; + case PRESETS.LAST_YEAR: + return [ + today.subtract(1, 'year').startOf('year').format(DateFormats.yearMonthDay), + today.subtract(1, 'year').endOf('year').format(DateFormats.yearMonthDay), + ]; + default: + return []; + } + }, + + applyPreset(preset: Preset) { + if (!this.calendar) return; + + const dates = this.getPresetDates(preset); + + if (dates.length) { + this.navigateWithParams({ + [TUTOR_CALENDAR_QUERY_PARAMS.startDate]: dates[0], + [TUTOR_CALENDAR_QUERY_PARAMS.endDate]: dates[1], + }); + } else { + this.navigateWithParams({ + [TUTOR_CALENDAR_QUERY_PARAMS.startDate]: null, + [TUTOR_CALENDAR_QUERY_PARAMS.endDate]: null, + }); + } + }, + + updateActivePreset() { + if (!this.$el) return; + + const url = new URL(window.location.href); + const startDate = url.searchParams.get(TUTOR_CALENDAR_QUERY_PARAMS.startDate); + const endDate = url.searchParams.get(TUTOR_CALENDAR_QUERY_PARAMS.endDate); + + let activePreset: Preset | '' = ''; + + if (!startDate && !endDate) { + activePreset = PRESETS.ALL_TIME; + } else if (startDate && endDate) { + const presets = (Object.values(PRESETS) as Preset[]).filter((key) => key !== PRESETS.ALL_TIME); + + for (const preset of presets) { + const [start, end] = this.getPresetDates(preset); + if (start === startDate && end === endDate) { + activePreset = preset; + break; + } + } + } + + const buttons = this.$el.querySelectorAll(VC_CALENDAR_SELECTORS.presetButtonsContainer); + buttons.forEach((btn) => { + if (activePreset && btn.getAttribute(TUTOR_CALENDAR_DATA_ATTRS.preset) === activePreset) { + btn.setAttribute(TUTOR_CALENDAR_DATA_ATTRS.active, ''); + } else { + btn.removeAttribute(TUTOR_CALENDAR_DATA_ATTRS.active); + } + }); + }, + }; +} + +export const calendarMeta: AlpineComponentMeta = { + name: 'calendar', + component: calendar, +}; diff --git a/assets/core/ts/components/copy-to-clipboard.ts b/assets/core/ts/components/copy-to-clipboard.ts new file mode 100644 index 0000000000..0750ffd6b4 --- /dev/null +++ b/assets/core/ts/components/copy-to-clipboard.ts @@ -0,0 +1,61 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { type AlpineComponentMeta } from '@Core/ts/types'; + +const copyToClipboard = () => { + return { + toast: window.TutorCore.toast, + copied: false, + timer: null as number | null, + $el: null as HTMLElement | null, + + async copy(text: string) { + if (!text || !this.$el) { + return; + } + + try { + if (window.isSecureContext && navigator.clipboard) { + await navigator.clipboard.writeText(text); + } else { + throw new Error(__('Clipboard API is not available', 'tutor')); + } + } catch { + const textArea = document.createElement('textarea'); + textArea.value = text; + textArea.style.position = 'fixed'; + textArea.style.left = '-9999px'; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + try { + document.execCommand('copy'); + } catch (error) { + this.toast.error( + sprintf( + // translators: %s: error message. + __('Failed to copy to clipboard: %s', 'tutor'), + error, + ), + ); + return; + } + document.body.removeChild(textArea); + } + + this.toast.success(__('Copied to clipboard', 'tutor')); + this.copied = true; + if (this.timer) { + clearTimeout(this.timer); + } + this.timer = window.setTimeout(() => { + this.copied = false; + }, 2000); + }, + }; +}; + +export const copyToClipboardMeta: AlpineComponentMeta = { + name: 'copyToClipboard', + component: copyToClipboard, +}; diff --git a/assets/core/ts/components/file-uploader.ts b/assets/core/ts/components/file-uploader.ts new file mode 100644 index 0000000000..09a8426916 --- /dev/null +++ b/assets/core/ts/components/file-uploader.ts @@ -0,0 +1,582 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { type FormControlMethods, type SetValueOptions, type ValidationRules } from '@Core/ts/components/form'; +import { type WPMedia, type WPMediaType } from '@Core/ts/services/WPMedia'; +import { type AlpineComponentMeta } from '@Core/ts/types'; +import { formatBytes } from '@Core/ts/utils/format'; + +import { tutorConfig } from '@TutorShared/config/config'; + +type FileUploaderVariant = 'file-uploader' | 'image-uploader'; + +export interface FileUploaderProps { + multiple?: boolean; + maxFiles?: number; + accept?: string; + maxSize?: number; // in bytes + onFileSelect?: (files: (File | WPMedia | string)[]) => void; + onError?: (error: string) => void; + onFileRemove?: (file: File | WPMedia | string) => void; + disabled?: boolean; + variant?: FileUploaderVariant; + value?: File | WPMedia | string | (File | WPMedia | string)[] | null; + name?: string; + required?: boolean | string; + imagePreviewPlaceholder?: string; + useWPMedia?: boolean; + wpMediaTitle?: string; + wpMediaButtonText?: string; + wpMediaLibraryType?: WPMediaType; +} + +const defaultProps = { + multiple: false, + maxFiles: undefined, + accept: '.pdf,.doc,.docx,.jpg,.jpeg,.png', + maxSize: Number(tutorConfig.max_upload_size), + variant: 'file-uploader', + value: [], + name: '', + required: false, + imagePreviewPlaceholder: '', + useWPMedia: false, + wpMediaTitle: '', + wpMediaButtonText: '', + wpMediaLibraryType: undefined, +} satisfies FileUploaderProps; + +const normalizeValue = (value: FileUploaderProps['value']): (File | WPMedia | string)[] => { + if (!value) return []; + if (Array.isArray(value)) return value; + return [value]; +}; + +function getInitialImagePreview( + variant: FileUploaderVariant | undefined, + value: FileUploaderProps['value'], + placeholder: string, +): string { + if (variant !== 'image-uploader') { + return placeholder || ''; + } + + if (typeof value === 'string' && value) { + return value; + } + + if (value && typeof value === 'object' && !Array.isArray(value) && 'url' in value) { + return (value as WPMedia).url; + } + + if (Array.isArray(value) && value.length > 0) { + const first = value[0]; + if (typeof first === 'string') { + return first; + } + if (first && typeof first === 'object' && 'url' in first) { + return (first as WPMedia).url; + } + } + + return placeholder || ''; +} + +export const fileUploader = (props: FileUploaderProps = defaultProps) => ({ + isDragOver: false, + isDisabled: props.disabled, + multiple: !!props.multiple, + maxFiles: props.maxFiles, + accept: props.accept, + maxSize: props.maxSize || 52428800, + variant: props.variant, + imagePreview: getInitialImagePreview(props.variant, props.value, props.imagePreviewPlaceholder || ''), + selectedFiles: normalizeValue(props.value), + name: props.name || '', + required: props.required || false, + useWPMedia: props.useWPMedia || false, + wpMediaTitle: props.wpMediaTitle || __('Select File', 'tutor'), + wpMediaButtonText: props.wpMediaButtonText || __('Use this file', 'tutor'), + wpMediaLibraryType: props.wpMediaLibraryType, + formatBytes, + $refs: {} as { fileInput: HTMLInputElement }, + + init() { + this.$refs.fileInput.addEventListener('change', (event: Event) => this.handleFileSelect(event)); + this.setupFormIntegration(); + }, + + destroy() { + this.$refs.fileInput.removeEventListener('change', (event: Event) => this.handleFileSelect(event)); + }, + + handleDragOver(event: DragEvent) { + event.preventDefault(); + if (!this.isDisabled) { + this.isDragOver = true; + } + }, + + handleDragLeave(event: DragEvent) { + event.preventDefault(); + this.isDragOver = false; + }, + + handleDrop(event: DragEvent) { + event.preventDefault(); + this.isDragOver = false; + + if (this.isDisabled) return; + + const files = Array.from(event.dataTransfer?.files || []); + this.processFiles(files); + }, + + handleFileSelect(event: Event) { + event.preventDefault(); + const input = event.target as HTMLInputElement; + const files = Array.from(input.files || []); + this.processFiles(files); + + try { + input.value = ''; + } catch { + // InvalidStateError can occur in certain browser states, safe to ignore + } + }, + + openFileDialog() { + if (this.isDisabled) { + return; + } + + if (this.useWPMedia) { + this.openWPMediaLibrary(); + } else { + this.$refs.fileInput.click(); + } + }, + + openWPMediaLibrary() { + const wpMediaService = window.TutorCore?.wpMedia; + + if (!wpMediaService?.isAvailable()) { + this.showError(__('WordPress media library is not available', 'tutor')); + return; + } + + const existingIds = this.selectedFiles + .filter((file): file is WPMedia => typeof file === 'object' && 'id' in file && typeof file.id === 'number') + .map((file) => file.id); + + wpMediaService.open( + { + title: this.wpMediaTitle, + button: { text: this.wpMediaButtonText }, + multiple: this.multiple, + library: this.wpMediaLibraryType ? { type: this.wpMediaLibraryType } : undefined, + maxFileSize: this.maxSize, + maxFiles: this.maxFiles, + }, + (files: WPMedia[]) => { + this.processFiles(files); + }, + existingIds, + ); + }, + + processFiles(files: (File | WPMedia | string)[]) { + if (!files.length) { + return; + } + + const validFiles: (File | WPMedia | string)[] = []; + + for (const file of files) { + if (typeof file === 'string') { + validFiles.push(file); + continue; + } + + if (this.isWPMedia(file)) { + validFiles.push(file); + continue; + } + + if (file.size > this.maxSize) { + this.showError( + sprintf( + // translators: %1$s is the file name, %2$s is the maximum allowed size + __('File %1$s is too large. Maximum allowed size is %2$s.', 'tutor'), + file.name, + formatBytes(this.maxSize), + ), + ); + continue; + } + + if (this.accept && !this.isFileTypeAccepted(file)) { + this.showError( + sprintf( + // translators: %s is the file type + __('File type %s is not allowed', 'tutor'), + file.type, + ), + ); + continue; + } + + validFiles.push(file); + } + + if (validFiles.length > 0) { + if (!this.isFileListChanged(this.selectedFiles, validFiles)) { + return; + } + + if (this.multiple) { + const mergedFiles = this.mergeFileLists(this.selectedFiles, validFiles); + const totalFileSize = mergedFiles.reduce((total, current) => { + if (typeof current === 'string') { + return 0; + } + return total + Math.round(Number(current?.size) || 0); + }, 0); + + if (this.maxFiles && mergedFiles.length > this.maxFiles) { + this.showError( + sprintf( + // translators: %d is the maximum number of files allowed. + __('Cannot select more than %d files', 'tutor'), + this.maxFiles, + ), + ); + return; + } + + if (totalFileSize > this.maxSize) { + this.showError( + sprintf( + // translators: %1$s is the maximum allowed size. + __('Maximum allowed size is %1$s.', 'tutor'), + formatBytes(this.maxSize), + ), + ); + return; + } + + this.selectedFiles = mergedFiles; + } else { + this.selectedFiles = [validFiles[0]]; + } + + this.updateFormValue(); + this.syncFileInput(); + + if (this.variant === 'image-uploader' && this.selectedFiles.length > 0) { + const firstFile = this.selectedFiles[0]; + if (this.isWPMedia(firstFile) && firstFile.url) { + this.imagePreview = firstFile.url; + } else if (firstFile instanceof File && firstFile.type.startsWith('image/')) { + const reader = new FileReader(); + reader.onload = (e) => { + this.imagePreview = e.target?.result as string; + }; + reader.readAsDataURL(firstFile); + } + } + + if (props.onFileSelect) { + props.onFileSelect(this.selectedFiles); + } + } + }, + + removeFile(index?: number) { + if (props.onFileRemove && typeof index === 'number') { + props.onFileRemove(this.selectedFiles[index]); + } + + if (this.multiple && typeof index === 'number') { + this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index); + } else { + this.selectedFiles = []; + } + + if (this.selectedFiles.length === 0) { + this.imagePreview = ''; + } + + if (this.$refs.fileInput) { + try { + this.$refs.fileInput.value = ''; + } catch { + // Safe to ignore + } + + this.$refs.fileInput.dispatchEvent(new Event('change', { bubbles: true })); + this.$refs.fileInput.dispatchEvent(new Event('input', { bubbles: true })); + } + + this.updateFormValue(); + this.syncFileInput(); + + if (props.onFileSelect) { + props.onFileSelect(this.selectedFiles); + } + }, + + mergeFileLists( + previousList: (File | WPMedia | string)[] | null, + newList: (File | WPMedia | string)[] | null, + ): (File | WPMedia | string)[] { + const seen = new Set(); + const result: (File | WPMedia | string)[] = []; + + const add = (files: (File | WPMedia | string)[] | null) => { + if (!files) return; + for (const file of Array.from(files)) { + const key = this.getFileKey(file); + if (seen.has(key)) continue; + seen.add(key); + result.push(file); + } + }; + + add(previousList); + add(newList); + return result; + }, + + isFileListChanged( + previousList: (File | WPMedia | string)[] | null, + nextList: (File | WPMedia | string)[] | null, + ): boolean { + if (previousList === nextList) { + return false; + } + if (!previousList || !nextList) { + return true; + } + if (previousList.length !== nextList.length) { + return true; + } + + const prevKeys = new Set(Array.from(previousList, (file) => this.getFileKey(file))); + return nextList.some((file) => !prevKeys.has(this.getFileKey(file))); + }, + + getFileKey(file: File | WPMedia | string): string { + if (typeof file === 'string') { + return file; + } + if (this.isWPMedia(file)) { + return `wp:${file.id}`; + } + return `${file.name}|${file.size}|${file.lastModified}|${file.type}`; + }, + + isWPMedia(file: File | WPMedia | string): file is WPMedia { + return typeof file === 'object' && 'id' in file && typeof (file as WPMedia).id === 'number'; + }, + + isFileTypeAccepted(file: File): boolean { + if (!this.accept) return true; + + const acceptedTypes = this.accept.split(',').map((type) => type.trim().toLowerCase()); + const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase(); + const fileMimeType = file.type.toLowerCase(); + + return acceptedTypes.some((acceptedType) => { + if (acceptedType.startsWith('.')) { + return acceptedType === fileExtension; + } + return acceptedType === fileMimeType || acceptedType === fileMimeType.split('/')[0] + '/*'; + }); + }, + + getFormElement(): HTMLElement | null { + const $el = (this as unknown as { $el: HTMLElement }).$el; + return $el.closest('form[x-data*="tutorForm"], form[x-data*="form("]'); + }, + setupFormIntegration() { + if (!this.name) { + return; + } + + const formElement = this.getFormElement(); + if (!formElement) { + return; + } + + try { + const alpine = window.Alpine; + const alpineData = alpine?.$data(formElement) as FormControlMethods & { values: Record }; + + if (!alpineData || typeof alpineData.register !== 'function') { + return; + } + + this.registerFormField(alpineData); + this.syncInitialValue(alpineData); + this.watchFormChanges(); + } catch (err) { + // eslint-disable-next-line no-console + console.warn( + sprintf( + // translators: %s is the error message + __('Failed to integrate with form: %s', 'tutor'), + err, + ), + ); + } + }, + + registerFormField(alpineData: FormControlMethods & { values: Record }) { + const rules: ValidationRules = { + numberOnly: false, + }; + + if (this.required) { + rules.required = this.required; + } + + alpineData.register(this.name, rules); + }, + + syncInitialValue(alpineData: FormControlMethods & { values: Record }) { + const formValue = alpineData.values?.[this.name]; + const hasFormValue = formValue !== undefined && formValue !== null && formValue !== ''; + + if (hasFormValue) { + this.selectedFiles = Array.isArray(formValue) ? formValue : [formValue]; + this.syncFileInput(); + return; + } + + this.updateFormValue({ + shouldValidate: false, + shouldTouch: false, + shouldDirty: false, + }); + }, + + watchFormChanges() { + const component = this as unknown as { $watch: (path: string, cb: (val: unknown) => void) => void }; + + if (!component.$watch) { + return; + } + + component.$watch(`values.${this.name}`, (newVal: unknown) => { + const normalized = Array.isArray(newVal) ? newVal : ((newVal ? [newVal] : []) as (File | WPMedia | string)[]); + + if (!this.isFileListChanged(this.selectedFiles, normalized)) { + return; + } + + this.selectedFiles = normalized; + this.syncFileInput(); + + if (this.variant === 'image-uploader') { + this.updateImagePreview(); + } + }); + }, + + updateImagePreview() { + if (this.selectedFiles.length === 0) { + this.imagePreview = ''; + return; + } + + const firstFile = this.selectedFiles[0]; + + if (typeof firstFile === 'string') { + this.imagePreview = firstFile; + return; + } + + // Handle WPMedia objects + if (this.isWPMedia(firstFile) && firstFile.url) { + this.imagePreview = firstFile.url; + return; + } + + if (firstFile instanceof File && firstFile.type.startsWith('image/')) { + const reader = new FileReader(); + reader.onload = (e) => { + this.imagePreview = e.target?.result as string; + }; + reader.readAsDataURL(firstFile); + } + }, + + updateFormValue(options?: SetValueOptions) { + options = options ?? { + shouldValidate: true, + shouldTouch: true, + shouldDirty: true, + }; + + if (!this.name) { + return; + } + + const formElement = this.getFormElement(); + if (!formElement) { + return; + } + + try { + const alpineData = window.Alpine?.$data(formElement) as FormControlMethods & { values: Record }; + + if (alpineData && typeof alpineData.setValue === 'function') { + const value = this.multiple ? this.selectedFiles : this.selectedFiles[0] || null; + alpineData.setValue(this.name, value, options); + } + } catch (err) { + // eslint-disable-next-line no-console + console.warn( + sprintf( + // translators: %s is the error message + __('Failed to update form value: %s', 'tutor'), + err, + ), + ); + } + }, + + syncFileInput() { + if (this.$refs.fileInput) { + const dt = new DataTransfer(); + this.selectedFiles.forEach((file) => { + if (file instanceof File) { + dt.items.add(file); + } + }); + + try { + this.$refs.fileInput.files = dt.files; + } catch { + // Safe to ignore + } + + // Dispatch events to notify listeners (including Alpine's x-model if any) + this.$refs.fileInput.dispatchEvent(new Event('change', { bubbles: true })); + this.$refs.fileInput.dispatchEvent(new Event('input', { bubbles: true })); + } + }, + + showError(message: string) { + if (props.onError) { + props.onError(message); + } else { + window.TutorCore.toast.error(message); + } + }, +}); + +export const fileUploaderMeta: AlpineComponentMeta = { + name: 'fileUploader', + component: fileUploader, +}; diff --git a/assets/core/ts/components/form.ts b/assets/core/ts/components/form.ts new file mode 100644 index 0000000000..987747aa2b --- /dev/null +++ b/assets/core/ts/components/form.ts @@ -0,0 +1,985 @@ +import { __, sprintf } from '@wordpress/i18n'; +import dayjs from 'dayjs'; + +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; +import { type AlpineComponentMeta } from '@Core/ts/types'; +import { parseNumberOnly } from '@Core/ts/utils/number'; + +interface FormControlConfig { + mode?: 'onChange' | 'onBlur' | 'onSubmit'; + shouldFocusError?: boolean; + shouldScrollToError?: boolean; + defaultValues?: Record; +} + +interface FieldConfig { + name: string; + rules?: ValidationRules; + defaultValue?: unknown; + ref?: HTMLInputElement; + type?: string; + isCheckboxArray?: boolean; +} + +export interface ValidationRules { + required?: boolean | string; + minLength?: number | { value: number; message: string }; + maxLength?: number | { value: number; message: string }; + min?: number | { value: number; message: string }; + max?: number | { value: number; message: string }; + pattern?: RegExp | { value: RegExp; message: string }; + validTime?: boolean | string | { message: string }; + numberOnly: boolean | { allowNegative?: boolean; whole?: boolean }; + validate?: (value: unknown) => boolean | string | Promise; +} + +export interface FieldError { + type: string; + message: string; +} + +export interface SetValueOptions { + shouldValidate?: boolean; + shouldTouch?: boolean; + shouldDirty?: boolean; +} + +interface FocusOptions { + shouldSelect?: boolean; +} + +export interface FormState { + values: Record; + errors: Record; + touchedFields: Record; + dirtyFields: Record; + isValid: boolean; + isDirty: boolean; + isSubmitting: boolean; + isValidating: boolean; +} + +export interface FormControlMethods { + register(name: string, rules?: ValidationRules): Record; + watch(name?: string): unknown; + setValue(name: string, value: unknown, options?: SetValueOptions): void; + getValue(name: string): unknown; + setFocus(name: string, options?: FocusOptions): void; + trigger(name?: string | string[]): Promise; + clearErrors(name?: string | string[]): void; + setError(name: string, error: FieldError): void; + reset(values?: Record): void; + handleSubmit( + onValid: (data: Record) => void | Promise, + onInvalid?: (errors: Record) => void | Promise, + ): (event: Event) => void; + getFormState(): FormState; + isFieldVisible(element: HTMLElement): boolean; +} + +const ValidationHelpers = { + validateRequired(name: string, value: unknown, rule?: boolean | string): FieldError | null { + if (!rule) return null; + + const message = typeof rule === 'string' ? rule : __('This field is required', 'tutor'); + const isEmpty = !value || (typeof value === 'string' && value.trim() === ''); + + return isEmpty ? { type: 'required', message } : null; + }, + + validateMinLength(value: string, rule: number | { value: number; message: string }): FieldError | null { + if (!value) return null; + + const minLength = typeof rule === 'number' ? rule : rule.value; + const message = + typeof rule === 'object' + ? rule.message + : sprintf( + // translators: %s is the minimum length + __('Minimum length is %s', 'tutor'), + minLength, + ); + + return value.length < minLength ? { type: 'minLength', message } : null; + }, + + validateMaxLength(value: string, rule: number | { value: number; message: string }): FieldError | null { + if (!value) return null; + + const maxLength = typeof rule === 'number' ? rule : rule.value; + const message = + typeof rule === 'object' + ? rule.message + : sprintf( + // translators: %s is the maximum length + __('Maximum length is %s', 'tutor'), + maxLength, + ); + + return value.length > maxLength ? { type: 'maxLength', message } : null; + }, + + validateMin(value: number, rule: number | { value: number; message: string }): FieldError | null { + const min = typeof rule === 'number' ? rule : rule.value; + const message = + typeof rule === 'object' + ? rule.message + : sprintf( + // translators: %s is the minimum value + __('Minimum value is %s', 'tutor'), + min, + ); + + return value < min ? { type: 'min', message } : null; + }, + + validateMax(value: number, rule: number | { value: number; message: string }): FieldError | null { + const max = typeof rule === 'number' ? rule : rule.value; + const message = + typeof rule === 'object' + ? rule.message + : sprintf( + // translators: %s is the maximum value + __('Maximum value is %s', 'tutor'), + max, + ); + + return value > max ? { type: 'max', message } : null; + }, + + validatePattern(value: string, rule: RegExp | { value: RegExp; message: string }): FieldError | null { + const pattern = rule instanceof RegExp ? rule : rule.value; + const message = typeof rule === 'object' && 'message' in rule ? rule.message : __('Invalid format', 'tutor'); + + return !pattern.test(value) ? { type: 'pattern', message } : null; + }, + + isValidTimeValue(value: unknown): boolean { + if (typeof value !== 'string') { + return false; + } + + const trimmed = value.trim(); + if (!trimmed) { + return true; + } + + // AM/PM marker is required for this rule. + if (!/\b(?:AM|PM)\b/i.test(trimmed)) { + return false; + } + + const parsed12Hour = dayjs(trimmed, 'hh:mm A', true); + return parsed12Hour.isValid(); + }, + + validateValidTime(value: unknown, rule?: boolean | string | { message: string }): FieldError | null { + if (!rule) return null; + + const stringValue = String(value ?? '').trim(); + if (!stringValue) return null; + + const message = + typeof rule === 'string' + ? rule + : typeof rule === 'object' && 'message' in rule + ? rule.message + : __('Invalid time entered!', 'tutor'); + + return this.isValidTimeValue(value) ? null : { type: 'validTime', message }; + }, + + async validateCustom( + value: unknown, + validate: (value: unknown) => boolean | string | Promise, + ): Promise { + try { + const result = await validate(value); + if (result === true) return null; + + const message = typeof result === 'string' ? result : __('Validation failed', 'tutor'); + return { type: 'validate', message }; + } catch { + return { type: 'validate', message: __('Validation error', 'tutor') }; + } + }, +}; + +async function validateFieldValue(name: string, value: unknown, rules?: ValidationRules): Promise { + if (!rules) return null; + + // Required validation + const requiredError = ValidationHelpers.validateRequired(name, value, rules.required); + if (requiredError) return requiredError; + + const stringValue = String(value || ''); + const numericValue = typeof value === 'number' ? value : parseFloat(stringValue); + + // String length validations + if (rules.minLength) { + const error = ValidationHelpers.validateMinLength(stringValue, rules.minLength); + if (error) return error; + } + + if (rules.maxLength) { + const error = ValidationHelpers.validateMaxLength(stringValue, rules.maxLength); + if (error) return error; + } + + // Numeric validations + if (rules.min && !isNaN(numericValue)) { + const error = ValidationHelpers.validateMin(numericValue, rules.min); + if (error) return error; + } + + if (rules.max && !isNaN(numericValue)) { + const error = ValidationHelpers.validateMax(numericValue, rules.max); + if (error) return error; + } + + // Pattern validation + if (rules.pattern && stringValue) { + const error = ValidationHelpers.validatePattern(stringValue, rules.pattern); + if (error) return error; + } + + // Time validation + if (rules.validTime) { + const error = ValidationHelpers.validateValidTime(value, rules.validTime); + if (error) return error; + } + + // Custom validation + if (rules.validate) { + const error = await ValidationHelpers.validateCustom(value, rules.validate); + if (error) return error; + } + + return null; +} + +const DOMUtils = { + isElementVisible(element: HTMLElement): boolean { + const style = getComputedStyle(element); + const rect = element.getBoundingClientRect(); + + return ( + style.display !== 'none' && + style.visibility !== 'hidden' && + parseFloat(style.opacity) > 0 && + rect.width > 0 && + rect.height > 0 + ); + }, + + focusElement(element: HTMLElement, options: { shouldSelect?: boolean; shouldScroll?: boolean }): void { + const { shouldSelect = false, shouldScroll = true } = options; + + if (!this.isElementVisible(element)) return; + + element.focus(); + + if (shouldSelect && element instanceof HTMLInputElement && element.select) { + element.select(); + } + + if (shouldScroll) { + element.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }, + + updateElementValue(element: HTMLElement, value: unknown): void { + if ( + element instanceof HTMLInputElement || + element instanceof HTMLTextAreaElement || + element instanceof HTMLSelectElement + ) { + element.value = String(value ?? ''); + } + }, + + setAriaInvalid(element: HTMLElement, isInvalid: boolean): void { + if (isInvalid) { + element.setAttribute('aria-invalid', 'true'); + } else { + element.removeAttribute('aria-invalid'); + } + }, + + getFieldElement(form: HTMLElement, fieldName: string): HTMLElement | null { + return form.querySelector(`[name="${fieldName}"]`); + }, +}; + +const FormDataUtils = { + convertToFormData(values: Record, method: string = 'POST'): FormData { + const formData = new FormData(); + + Object.entries(values).forEach(([key, value]) => { + if (Array.isArray(value)) { + this.appendArrayToFormData(formData, key, value); + } else { + this.appendValueToFormData(formData, key, value); + } + }); + + formData.append('_method', method.toUpperCase()); + return formData; + }, + + serializeParams(params: Record): Record { + return Object.entries(params).reduce( + (acc, [key, value]) => ({ + ...acc, + [key]: this.serializeValue(value), + }), + {}, + ); + }, + + appendArrayToFormData(formData: FormData, key: string, array: unknown[]): void { + array.forEach((item, index) => { + const value = this.convertToFormDataValue(item); + formData.append(`${key}[${index}]`, value); + }); + }, + + appendValueToFormData(formData: FormData, key: string, value: unknown): void { + const formDataValue = this.convertToFormDataValue(value); + formData.append(key, formDataValue); + }, + + convertToFormDataValue(value: unknown): string | Blob { + if (value instanceof File || value instanceof Blob) return value; + if (typeof value === 'string') return value; + if (typeof value === 'boolean' || typeof value === 'number') return String(value); + if (typeof value === 'object' && value !== null) return JSON.stringify(value); + return String(value); + }, + + serializeValue(value: unknown): string | unknown { + if (value === null || value === undefined) return 'null'; + if (typeof value === 'boolean') return value ? 'true' : 'false'; + return value; + }, +}; + +const DEFAULT_CONFIG: FormControlConfig = { + mode: 'onBlur', + shouldFocusError: true, + shouldScrollToError: true, +}; + +interface AlpineComponent { + $el: HTMLElement; + $refs: Record void } }>; + $data: (el: HTMLElement) => Record; +} + +export const form = (config: FormControlConfig & { id?: string } = {}) => { + const { id: formId, defaultValues = {}, ...formConfig } = config; + const mergedConfig = { ...DEFAULT_CONFIG, ...formConfig }; + + const formInstance = { + config: mergedConfig, + formId, + + fields: {} as Record, + values: { ...defaultValues }, + errors: {} as Record, + touchedFields: {} as Record, + dirtyFields: {} as Record, + isValid: true, + isSubmitting: false, + isValidating: false, + isResetting: false, + cleanup: undefined as (() => void) | undefined, + lastIsDirty: false, + + init(): void { + this.isValid = true; + this.isSubmitting = false; + this.isValidating = false; + this.lastIsDirty = false; + + if (this.formId) { + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.FORM_REGISTER, { + detail: { id: this.formId, instance: this as unknown as FormControlMethods }, + }), + ); + } + + this.setupFormListeners(); + this.dispatchStateChange(); // Initial dispatch + }, + + destroy(): void { + this.cleanup?.(); + this.clearAllState(); + }, + + dispatchStateChange(): void { + if (!this.formId) { + return; + } + + const isDirty = Object.values(this.dirtyFields).some(Boolean); + + if (isDirty === this.lastIsDirty) { + return; + } + + this.lastIsDirty = isDirty; + + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.FORM_STATE_CHANGE, { + detail: { id: this.formId, isDirty }, + }), + ); + }, + + register(name: string, rules?: ValidationRules): Record { + const component = this as unknown as AlpineComponent; + const element = component.$el as HTMLInputElement; + + const type = element?.type ?? 'text'; + const isCheckbox = type === 'checkbox'; + const isFile = type === 'file'; + const existingField = this.fields[name]; + const isSameElement = existingField?.ref === element; + + // Treat as checkbox group only when a different checkbox with the same name already exists; avoids upgrading a single checkbox to an array during re-registration (e.g., after DOM reorder). + const isCheckboxArray = isCheckbox && existingField?.type === 'checkbox' && !isSameElement; + + let defaultValue: unknown; + + if (isCheckboxArray) { + // Ensure array type for checkbox groups and include any existing checked value + const currentValue = this.values[name]; + const aggregatedValues: string[] = Array.isArray(currentValue) ? [...currentValue] : []; + + const existingCheckbox = existingField?.ref; + const existingChecked = + existingCheckbox?.checked ?? + (typeof existingField?.defaultValue === 'boolean' ? existingField.defaultValue : false); + + if (existingChecked) { + const existingValue = existingCheckbox?.value ?? 'on'; + if (!aggregatedValues.includes(existingValue)) { + aggregatedValues.push(existingValue); + } + } + + if (element?.checked) { + const currentValueToAdd = element.value ?? 'on'; + if (!aggregatedValues.includes(currentValueToAdd)) { + aggregatedValues.push(currentValueToAdd); + } + } + + defaultValue = aggregatedValues; + } else if (isCheckbox) { + defaultValue = this.values[name] ?? element?.checked ?? false; + } else { + defaultValue = this.values[name] ?? ''; + } + + this.fields[name] = { + name, + rules, + defaultValue, + ref: element, + type, + isCheckboxArray, + }; + + // Force upgrade value to array if a collision is detected + if (isCheckboxArray && !Array.isArray(this.values[name])) { + this.values[name] = defaultValue; + } else { + this.values[name] ??= defaultValue; + } + + const valueExpression = isCheckboxArray + ? '$event.target.value' + : isCheckbox + ? '$event.target.checked' + : '$event.target.value'; + + const bindings: Record = { + name, + 'x-ref': name, + ':aria-invalid': `!!errors["${name}"]`, + ':class': `{ + 'tutor-input-error': errors["${name}"], + 'tutor-input-touched': touchedFields["${name}"], + 'tutor-input-dirty': dirtyFields["${name}"] + }`, + }; + + if (!isFile) { + bindings['x-model'] = `values["${name}"]`; + + bindings['@input'] = `handleFieldInput('${name}', ${valueExpression}, $event.target)`; + + bindings['@blur'] = `handleFieldBlur('${name}', ${valueExpression})`; + } + + return bindings; + }, + + handleCheckboxArrayInput(name: string, element?: HTMLInputElement): void { + const field = this.fields[name]; + const currentValue = this.values[name] as string[]; + const valueArray = Array.isArray(currentValue) ? [...currentValue] : []; + + // Use the passed element (from $event.target) or try to get from $refs + const checkbox = element || ((this as unknown as AlpineComponent).$refs[name] as HTMLInputElement); + + if (!checkbox) return; + + const checkboxValue = checkbox.value; + const isChecked = checkbox.checked; + + let newValue: string[]; + if (isChecked) { + newValue = valueArray.includes(checkboxValue) ? valueArray : [...valueArray, checkboxValue]; + } else { + newValue = valueArray.filter((v) => v !== checkboxValue); + } + + const defaultArray = Array.isArray(field.defaultValue) ? field.defaultValue : []; + // Sort to compare content regardless of order + const isActuallyChanged = JSON.stringify(newValue.sort()) !== JSON.stringify(defaultArray.sort()); + + this.values[name] = newValue; + this.dirtyFields[name] = isActuallyChanged; + + const shouldValidate = this.config.mode === 'onChange' || this.touchedFields[name]; + + if (shouldValidate) { + this.validateField(name, newValue); + } else { + this.dispatchStateChange(); + } + }, + + handleFieldInput(name: string, value: unknown, element?: HTMLInputElement): void { + const field = this.fields[name]; + + if (field?.isCheckboxArray) { + this.handleCheckboxArrayInput(name, element); + return; + } + + // Original logic for non-checkbox-array fields + const isNumber = field?.rules?.numberOnly; + const allowNegative = typeof isNumber === 'object' && isNumber.allowNegative; + const whole = typeof isNumber === 'object' && isNumber.whole; + const parsedValue = isNumber ? parseNumberOnly(value as string, allowNegative, whole) : value; + + // Only mark as dirty if the value is different from the baseline + const isActuallyChanged = String(parsedValue) !== String(field?.defaultValue ?? ''); + + this.values[name] = parsedValue; + this.dirtyFields[name] = isActuallyChanged; + this.updateFieldRef(name); + + if (isNumber) { + const component = this as unknown as AlpineComponent; + const refs = component.$refs; + if (refs[name]?._x_model) { + refs[name]._x_model?.set(parsedValue); + } + } + + const shouldValidate = this.config.mode === 'onChange'; + + if (shouldValidate) { + this.validateField(name, isNumber ? parsedValue : value); + } else { + this.dispatchStateChange(); + } + }, + + handleFieldBlur(name: string, value: unknown): void { + this.touchedFields[name] = true; + this.updateFieldRef(name); + + const shouldValidate = this.config.mode === 'onBlur' || this.config.mode === 'onChange'; + + if (shouldValidate) { + this.validateField(name, value); + } else { + this.dispatchStateChange(); + } + }, + + watch(name?: string): unknown { + return name ? this.values[name] : { ...this.values }; + }, + + setValue(name: string, value: unknown, options: SetValueOptions = {}): void { + const { shouldValidate = false, shouldTouch = false, shouldDirty = true } = options; + + this.values[name] = value; + + if (shouldTouch) this.touchedFields[name] = true; + if (shouldDirty) { + const field = this.fields[name]; + // Handle array comparison for checkbox arrays + if (Array.isArray(value) && Array.isArray(field?.defaultValue)) { + this.dirtyFields[name] = JSON.stringify(value.sort()) !== JSON.stringify(field.defaultValue.sort()); + } else { + this.dirtyFields[name] = String(value) !== String(field?.defaultValue ?? ''); + } + } + + const fieldElement = this.fields[name]?.ref; + if (fieldElement && this.fields[name].type !== 'file') { + // For checkbox arrays, we need to update all checkboxes with this name + if (Array.isArray(value) && fieldElement.type === 'checkbox') { + this.syncCheckboxArray(name, value as string[]); + } else { + DOMUtils.updateElementValue(fieldElement, value); + } + } + + if (shouldValidate) { + this.validateField(name, value); + } else { + this.dispatchStateChange(); + } + }, + + getValue(name: string): unknown { + return this.values[name]; + }, + + setFocus(name: string, options: FocusOptions = {}): void { + const field = this.fields[name]; + const fieldElement = field?.ref; + + if (fieldElement && DOMUtils.isElementVisible(fieldElement)) { + DOMUtils.focusElement(fieldElement, { + shouldSelect: options.shouldSelect, + shouldScroll: this.config.shouldScrollToError, + }); + } + }, + + async trigger(name?: string | string[]): Promise { + this.isValidating = true; + + try { + if (typeof name === 'string') { + return await this.validateSingleField(name); + } + + if (Array.isArray(name)) { + return await this.validateMultipleFields(name); + } + + return await this.validateAllFields(); + } finally { + this.isValidating = false; + this.dispatchStateChange(); + } + }, + + async validateField(name: string, value: unknown): Promise { + const fieldConfig = this.fields[name]; + const error = await validateFieldValue(name, value, fieldConfig?.rules); + + if (error) { + this.errors[name] = error; + } else { + delete this.errors[name]; + } + + this.updateAriaInvalidState(name); + this.updateFormValidState(); + this.dispatchStateChange(); + + return !error; + }, + + async validateSingleField(name: string): Promise { + this.touchedFields[name] = true; + const value = this.values[name]; + return await this.validateField(name, value); + }, + + async validateMultipleFields(names: string[]): Promise { + let isValid = true; + + for (const fieldName of names) { + this.touchedFields[fieldName] = true; + const value = this.values[fieldName]; + const fieldValid = await this.validateField(fieldName, value); + if (!fieldValid) isValid = false; + } + + return isValid; + }, + + async validateAllFields(): Promise { + let isValid = true; + + for (const name of Object.keys(this.fields)) { + const value = this.values[name]; + const fieldValid = await this.validateField(name, value); + if (!fieldValid) isValid = false; + } + + return isValid; + }, + + clearErrors(name?: string | string[]): void { + if (typeof name === 'string') { + this.clearSingleError(name); + } else if (Array.isArray(name)) { + name.forEach((fieldName) => this.clearSingleError(fieldName)); + } else { + Object.keys(this.fields).forEach((fieldName) => this.clearSingleError(fieldName)); + } + + this.updateFormValidState(); + this.dispatchStateChange(); + }, + + setError(name: string, error: FieldError): void { + this.errors[name] = error; + this.updateAriaInvalidState(name); + this.updateFormValidState(); + this.dispatchStateChange(); + }, + + reset(values?: Record): void { + this.isResetting = true; + + if (values) { + // Update reactive object props instead of replacing it to maintain bindings + Object.keys(this.values).forEach((key) => delete this.values[key]); + Object.assign(this.values, values); + + // Update baseline default values for all fields provided + Object.entries(values).forEach(([name, value]) => { + if (this.fields[name]) { + this.fields[name].defaultValue = value; + } + }); + } else { + const defaultValues = Object.keys(this.fields).reduce( + (acc, name) => { + acc[name] = this.fields[name].defaultValue; + return acc; + }, + {} as Record, + ); + Object.keys(this.values).forEach((key) => delete this.values[key]); + Object.assign(this.values, defaultValues); + } + + this.syncDOMWithState(); + this.errors = {}; + this.touchedFields = {}; + this.dirtyFields = {}; + this.isValid = true; + this.isSubmitting = false; + this.isValidating = false; + this.dispatchStateChange(); + + // Dispatch custom event for components like WPEditor to listen to + if (this.formId) { + window.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.FORM_RESET, { + detail: { + formId: this.formId, + defaultValues: + values || + Object.keys(this.fields).reduce( + (acc, name) => { + acc[name] = this.fields[name].defaultValue; + return acc; + }, + {} as Record, + ), + }, + }), + ); + } + + setTimeout(() => { + this.isResetting = false; + }, 0); + }, + + handleSubmit( + onValid: (data: Record) => void, + onInvalid?: (errors: Record) => void, + ): (event: Event) => void { + return async (event: Event) => { + event.preventDefault(); + this.isSubmitting = true; + + try { + const isValid = await this.validateAllFields(); + + if (isValid) { + await onValid({ ...this.values }); + } else { + await onInvalid?.({ ...this.errors }); + + if (this.config.shouldFocusError) { + this.focusFirstError(); + } + } + } finally { + this.isSubmitting = false; + this.dispatchStateChange(); + } + }; + }, + + getFormState(): FormState { + return { + values: { ...this.values }, + errors: { ...this.errors }, + touchedFields: { ...this.touchedFields }, + dirtyFields: { ...this.dirtyFields }, + isValid: this.isValid, + isDirty: Object.values(this.dirtyFields).some(Boolean), + isSubmitting: this.isSubmitting, + isValidating: this.isValidating, + }; + }, + + isFieldVisible(element: HTMLElement): boolean { + return DOMUtils.isElementVisible(element); + }, + + getFormBindings() { + return { + novalidate: true, + }; + }, + + convertToFormData: FormDataUtils.convertToFormData.bind(FormDataUtils), + serializeParams: FormDataUtils.serializeParams.bind(FormDataUtils), + + setupFormListeners(): void { + const component = this as unknown as AlpineComponent; + const formElement = component.$el; + + if (!formElement) { + this.cleanup = () => { + if (this.formId) { + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.FORM_UNREGISTER, { + detail: { id: this.formId }, + }), + ); + } + }; + return; + } + + const handleFormSubmit = (event: Event) => { + event.preventDefault(); + }; + + formElement.addEventListener('submit', handleFormSubmit); + + this.cleanup = () => { + formElement.removeEventListener('submit', handleFormSubmit); + if (this.formId) { + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.FORM_UNREGISTER, { + detail: { id: this.formId }, + }), + ); + } + }; + }, + + updateFieldRef(name: string): void { + const component = this as unknown as AlpineComponent; + const formElement = component.$el; + if (!formElement) return; + + const element = DOMUtils.getFieldElement(formElement, name) as HTMLInputElement; + const field = this.fields[name]; + + if (element && field) { + field.ref = element; + } + }, + + clearSingleError(name: string): void { + delete this.errors[name]; + this.updateAriaInvalidState(name); + }, + + updateAriaInvalidState(name: string): void { + const fieldRef = this.fields[name]?.ref; + if (!fieldRef) return; + + DOMUtils.setAriaInvalid(fieldRef, !!this.errors[name]); + }, + + updateFormValidState(): void { + this.isValid = Object.keys(this.errors).length === 0; + }, + + focusFirstError(): void { + const firstErrorField = Object.keys(this.errors)[0]; + if (firstErrorField) { + this.setFocus(firstErrorField); + } + }, + + syncDOMWithState(): void { + for (const [name, value] of Object.entries(this.values)) { + const fieldRef = this.fields[name]?.ref; + if (fieldRef) { + // Handle checkbox arrays specially + if (Array.isArray(value) && fieldRef.type === 'checkbox') { + this.syncCheckboxArray(name, value as string[]); + } else { + DOMUtils.updateElementValue(fieldRef, value); + } + } + } + }, + + syncCheckboxArray(name: string, values: string[]): void { + const component = this as unknown as AlpineComponent; + const formElement = component.$el.closest('form') || component.$el.parentElement; + const checkboxes = formElement?.querySelectorAll(`input[type="checkbox"][name="${name}"]`); + + if (checkboxes) { + checkboxes.forEach((checkbox) => { + const input = checkbox as HTMLInputElement; + input.checked = values.includes(input.value); + }); + } + }, + + clearAllState(): void { + this.fields = {}; + this.values = {}; + this.errors = {}; + this.touchedFields = {}; + this.dirtyFields = {}; + }, + }; + + return formInstance; +}; + +export const formMeta: AlpineComponentMeta = { + name: 'form', + component: form, +}; diff --git a/assets/core/ts/components/icon.ts b/assets/core/ts/components/icon.ts new file mode 100644 index 0000000000..0060acbb66 --- /dev/null +++ b/assets/core/ts/components/icon.ts @@ -0,0 +1,128 @@ +import { type AlpineComponentMeta } from '@Core/ts/types'; + +import { tutorConfig } from '@TutorShared/config/config'; + +interface IconCacheEntry { + svg?: string; + loading?: boolean; + promise?: Promise; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + error?: any; +} + +const iconCache: Record = {}; + +export interface IconProps { + name: string; // Use PHP Icon:: to get the name. + width?: number; + height?: number; + from: 'php' | 'ts'; + ignoreKids?: boolean; +} + +const createSvg = ({ + width, + height, + viewBox, + fill, + content = '', +}: { + width: number; + height: number; + viewBox?: string; + fill?: string; + content?: string; +}) => + `${content}`; + +function fetchSVG( + name: string, + width: number, + height: number, + from: 'php' | 'ts' = 'ts', + ignoreKids = false, +): Promise { + const fileName = from === 'php' ? name : name.trim().replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()); + const hasKidsVariant = !ignoreKids && tutorConfig.is_kids_mode && tutorConfig.kids_icons_registry?.includes(fileName); + + const basePath = hasKidsVariant ? 'assets/icons/kids/' : 'assets/icons/'; + const url = `${tutorConfig.tutor_url}${basePath}${fileName}.svg`; + const defaultViewBox = `0 0 ${width} ${height}`; + + if (iconCache[url]?.svg) { + return Promise.resolve(iconCache[url].svg!); + } + + if (iconCache[url]?.promise) { + return iconCache[url].promise!; + } + + const promise = fetch(url) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.text(); + }) + .then((svgText) => { + const parser = new DOMParser(); + const doc = parser.parseFromString(svgText, 'image/svg+xml'); + const svgEl = doc.querySelector('svg'); + const viewBox = svgEl?.getAttribute('viewBox') || defaultViewBox; + const fill = svgEl?.getAttribute('fill') || 'none'; + const content = svgEl?.innerHTML || ''; + + const svgMarkup = createSvg({ width, height, viewBox, fill, content }); + iconCache[url] = { svg: svgMarkup }; + return svgMarkup; + }) + .catch((error) => { + iconCache[url] = { error }; + // eslint-disable-next-line no-console + console.error(`Failed to load icon: ${fileName}`, error); + return createSvg({ width, height }); + }); + + iconCache[url] = { loading: true, promise }; + return promise; +} + +export const icon = (props: IconProps) => ({ + name: props.name, + width: props.width || 16, + height: props.height || 16, + from: props.from || 'php', + ignoreKids: props.ignoreKids || false, + + async init() { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const $el = (this as any).$el as HTMLElement; + $el.innerHTML = createSvg({ width: this.width, height: this.height }); + $el.classList.add('tutor-icon'); + + if (!this.name) { + return; + } + + const svg = await fetchSVG(this.name, this.width, this.height, this.from, this.ignoreKids); + + $el.innerHTML = svg; + }, + + async updateIcon(newName: string) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const $el = (this as any).$el as HTMLElement; + this.name = newName; + + $el.innerHTML = createSvg({ width: this.width, height: this.height }); + + const svg = await fetchSVG(this.name, this.width, this.height, this.from, this.ignoreKids); + $el.innerHTML = svg; + }, +}); + +export const iconMeta: AlpineComponentMeta = { + name: 'icon', + component: icon, + global: true, +}; diff --git a/assets/core/ts/components/modal.ts b/assets/core/ts/components/modal.ts new file mode 100644 index 0000000000..e2242aefd9 --- /dev/null +++ b/assets/core/ts/components/modal.ts @@ -0,0 +1,125 @@ +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; +import { type AlpineComponentMeta } from '@Core/ts/types'; + +export interface ModalConfig { + id: string; + isCloseable?: boolean; // if true, the modal can be closed by clicking outside or pressing escape + initialOpen?: boolean; // if true, the modal is shown on init (default: false) +} + +const DEFAULT_CONFIG: ModalConfig = { + id: 'tutor-modal', + isCloseable: true, +}; + +export const modal = (config: ModalConfig = { ...DEFAULT_CONFIG }) => ({ + open: config.initialOpen ?? false, + payload: null, + isCloseable: config.isCloseable ?? DEFAULT_CONFIG.isCloseable, + id: config.id, + cleanup: undefined as (() => void) | undefined, + $el: undefined as HTMLElement | undefined, + + init(): void { + const onOpen = (event: CustomEvent) => { + const targetId = event?.detail?.id as string | undefined; + if (!targetId || targetId === this.id) { + this.payload = event?.detail?.data ?? null; + + this.show(); + } + }; + + const onClose = (event: CustomEvent) => { + const targetId = event?.detail?.id as string | undefined; + if (!targetId || targetId === this.id) { + this.close(); + } + }; + + document.addEventListener(TUTOR_CUSTOM_EVENTS.MODAL_OPEN, onOpen as EventListener); + document.addEventListener(TUTOR_CUSTOM_EVENTS.MODAL_CLOSE, onClose as EventListener); + + this.cleanup = () => { + document.removeEventListener(TUTOR_CUSTOM_EVENTS.MODAL_OPEN, onOpen as EventListener); + document.removeEventListener(TUTOR_CUSTOM_EVENTS.MODAL_CLOSE, onClose as EventListener); + }; + }, + + destroy(): void { + this.cleanup?.(); + }, + + show(): void { + this.open = true; + }, + + close(): void { + this.open = false; + this.payload = null; + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.MODAL_CLOSED, { + detail: { id: this.id }, + }), + ); + }, + + getBackdropBindings() { + const backdrop = this.$el as HTMLElement; + backdrop.classList.add('tutor-modal-backdrop'); + + return { + 'x-show': 'open', + 'x-transition:enter': 'tutor-modal-backdrop-enter', + 'x-transition:enter-start': 'tutor-modal-backdrop-transition', + 'x-transition:enter-end': 'tutor-modal-backdrop-transition-reset', + 'x-transition:leave': 'tutor-modal-backdrop-leave', + 'x-transition:leave-start': 'tutor-modal-backdrop-transition-reset', + 'x-transition:leave-end': 'tutor-modal-backdrop-transition', + }; + }, + + getModalBindings() { + const modal = this.$el as HTMLElement; + modal.classList.add('tutor-modal'); + + return { + 'x-show': 'open', + '@keydown.escape.window': this.isCloseable ? 'close()' : '', + role: 'dialog', + 'aria-modal': 'true', + }; + }, + + getModalContentBindings() { + const modal = this.$el as HTMLElement; + modal.classList.add('tutor-modal-content'); + + return { + 'x-trap.noscroll.inert': 'open', + '@click.outside': this.isCloseable ? 'close()' : '', + 'x-show': 'open', + 'x-transition:enter': 'tutor-modal-content-enter', + 'x-transition:enter-start': 'tutor-modal-content-transition', + 'x-transition:enter-end': 'tutor-modal-content-transition-reset', + 'x-transition:leave': 'tutor-modal-content-leave', + 'x-transition:leave-start': 'tutor-modal-content-transition-reset', + 'x-transition:leave-end': 'tutor-modal-content-transition', + }; + }, + + getCloseButtonBindings() { + const closeButton = this.$el as HTMLElement; + closeButton.classList.add('tutor-modal-close'); + + return { + 'x-show': 'open', + '@click': 'close()', + }; + }, +}); + +export const modalMeta: AlpineComponentMeta = { + name: 'modal', + component: modal, +}; diff --git a/assets/core/ts/components/password-input.ts b/assets/core/ts/components/password-input.ts new file mode 100644 index 0000000000..d82fd27a00 --- /dev/null +++ b/assets/core/ts/components/password-input.ts @@ -0,0 +1,122 @@ +import { __ } from '@wordpress/i18n'; + +import { type AlpineComponentMeta } from '@Core/ts/types'; + +export interface PasswordInputProps { + showStrength?: boolean; + minStrength?: number; +} + +const defaultProps: PasswordInputProps = { + showStrength: false, + minStrength: 3, +}; + +type StrengthLevel = 0 | 1 | 2 | 3 | 4 | 5; + +const strengthLabels: Record = { + 0: __('Very weak', 'tutor'), + 1: __('Very weak', 'tutor'), + 2: __('Weak', 'tutor'), + 3: __('Medium', 'tutor'), + 4: __('Strong', 'tutor'), + 5: __('Very strong', 'tutor'), +}; + +const strengthColors: Record = { + 0: 'var(--tutor-text-critical)', + 1: 'var(--tutor-text-critical)', + 2: 'var(--tutor-text-critical)', + 3: 'var(--tutor-text-warning)', + 4: 'var(--tutor-text-success)', + 5: 'var(--tutor-text-success)', +}; + +export const passwordInput = (props: PasswordInputProps = defaultProps) => ({ + showPassword: false, + strength: 0 as StrengthLevel, + strengthLabel: '', + strengthColor: '', + showStrength: props.showStrength ?? false, + minStrength: props.minStrength ?? 3, + password: '', + + init() { + const input = (this as unknown as { $el: HTMLElement }).$el.querySelector('input') as HTMLInputElement; + if (input) { + input.addEventListener('input', (e) => { + this.password = (e.target as HTMLInputElement).value; + if (this.showStrength) { + this.checkStrength(); + } + }); + } + }, + + destroy() { + const input = (this as unknown as { $el: HTMLElement }).$el.querySelector('input') as HTMLInputElement; + if (input) { + input.removeEventListener('input', (e) => { + this.password = (e.target as HTMLInputElement).value; + if (this.showStrength) { + this.checkStrength(); + } + }); + } + }, + + toggleVisibility() { + this.showPassword = !this.showPassword; + const root = (this as unknown as { $root: HTMLElement }).$root; + const input = root.querySelector('input') as HTMLInputElement; + + if (input) { + input.type = this.showPassword ? 'text' : 'password'; + } + }, + + checkStrength() { + this.strength = this.calculateBasicStrength(); + + this.strengthLabel = strengthLabels[this.strength] || ''; + this.strengthColor = strengthColors[this.strength] || ''; + }, + + calculateBasicStrength(): StrengthLevel { + const pwd = this.password; + if (!pwd) { + return 0; + } + + let score = 0; + + if (pwd.length >= 8) score++; + if (pwd.length >= 12) score++; + if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++; + if (/\d/.test(pwd)) score++; + if (/[^a-zA-Z0-9]/.test(pwd)) score++; + + return Math.min(score, 5) as StrengthLevel; + }, + + getToggleBindings() { + return { + '@click': 'toggleVisibility()', + class: 'tutor-password-toggle', + type: 'button', + 'aria-label': this.showPassword ? __('Hide password', 'tutor') : __('Show password', 'tutor'), + }; + }, + + getStrengthTextBindings() { + return { + 'x-text': 'strengthLabel', + ':style': `{color: strengthColor}`, + }; + }, +}); + +export const passwordInputMeta: AlpineComponentMeta = { + name: 'passwordInput', + component: passwordInput, +}; diff --git a/assets/core/ts/components/player.ts b/assets/core/ts/components/player.ts new file mode 100644 index 0000000000..a7fd67a389 --- /dev/null +++ b/assets/core/ts/components/player.ts @@ -0,0 +1,92 @@ +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; +import { type AlpineComponentMeta } from '@Core/ts/types'; +import { isMobileDevice } from '@Core/ts/utils/util'; + +import { isVimeoPlyr } from '@FrontendTypes/index'; + +export interface PlayerProps { + config?: Plyr.Options; +} + +export interface AlpinePlayerData { + $el?: HTMLElement; + plyr: Plyr | null; + init(): void; +} + +export const player = (props: PlayerProps = {}): AlpinePlayerData => ({ + plyr: null, + $el: undefined as HTMLElement | undefined, + + init() { + if (typeof window.Plyr === 'undefined') { + // eslint-disable-next-line no-console + console.warn('Plyr is not defined. Ensure Plyr library is loaded.'); + return; + } + + if (!this.$el) { + return; + } + + this.plyr = new window.Plyr(this.$el, props.config); + + if (this.plyr) { + this.plyr.on('ready', () => { + // Remove loading spinner + this.$el?.closest('.tutor-video-player')?.querySelector('.loading-spinner')?.remove(); + + /** + * Fix: Mobile Vimeo autoplay sound issue + * Always start muted on mobile to comply with autoplay policy. + */ + if (this.plyr && isVimeoPlyr(this.plyr) && isMobileDevice()) { + try { + this.plyr.muted = true; + if (typeof this.plyr.mute === 'function') { + this.plyr.mute(); + } + } catch (err) { + // eslint-disable-next-line no-console + console.warn('Vimeo mute init failed:', err); + } + } + }); + + this.plyr.on('play', () => { + /** + * Unmute automatically after first user interaction + * Mobile browsers allow audio only after gesture. + */ + if (this.plyr && isVimeoPlyr(this.plyr) && isMobileDevice()) { + try { + this.plyr.muted = false; + if (typeof this.plyr.unmute === 'function') { + this.plyr.unmute(); + } + } catch (err) { + // eslint-disable-next-line no-console + console.warn('Vimeo unmute on play failed:', err); + } + } + }); + } + + // Dispatch custom event when player is ready + this.$el.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.TUTOR_PLAYER_READY, { + detail: { + plyr: this.plyr, + component: this, + }, + bubbles: true, + }), + ); + }, +}); + +export const playerMeta: AlpineComponentMeta = { + name: 'player', + component: player, + global: true, +}; diff --git a/assets/core/ts/components/popover.ts b/assets/core/ts/components/popover.ts new file mode 100644 index 0000000000..356ebb72ce --- /dev/null +++ b/assets/core/ts/components/popover.ts @@ -0,0 +1,437 @@ +import { type AlpineComponentMeta } from '@Core/ts/types'; +import { isRTL } from '@Core/ts/utils/util'; + +const PLACEMENTS = { + TOP: 'top', + TOP_START: 'top-start', + TOP_END: 'top-end', + BOTTOM: 'bottom', + BOTTOM_START: 'bottom-start', + BOTTOM_END: 'bottom-end', + LEFT: 'left', + LEFT_TOP: 'left-top', + LEFT_BOTTOM: 'left-bottom', + RIGHT: 'right', + RIGHT_TOP: 'right-top', + RIGHT_BOTTOM: 'right-bottom', +} as const; + +export interface PopoverProps { + placement?: (typeof PLACEMENTS)[keyof typeof PLACEMENTS]; + offset?: number; + onShow?: () => void; + onHide?: () => void; +} + +interface PopoverDimensions { + width: number; + height: number; +} + +export const popover = (props: PopoverProps = {}) => ({ + open: false, + placement: props.placement || PLACEMENTS.BOTTOM_START, + offset: props.offset ?? 4, + actualPlacement: '', + $el: undefined as HTMLElement | undefined, + $refs: {} as { trigger: HTMLElement; content: HTMLElement }, + $nextTick: undefined as ((callback: () => void) => void) | undefined, + scrollHandler: null as (() => void) | null, + resizeHandler: null as (() => void) | null, + escapeHandler: null as ((e: KeyboardEvent) => void) | null, + + init() { + this.actualPlacement = this.getActualPlacement(); + this.setupEventListeners(); + }, + + destroy() { + this.removeEventListeners(); + }, + + setupEventListeners() { + this.scrollHandler = () => { + if (this.open) { + this.updatePosition(); + } + }; + + this.resizeHandler = () => { + if (this.open) { + this.updatePosition(); + } + }; + + this.escapeHandler = (e: KeyboardEvent) => { + this.handleEscapeKeydown(e); + }; + + window.addEventListener('scroll', this.scrollHandler, true); + window.addEventListener('resize', this.resizeHandler); + document.addEventListener('keydown', this.escapeHandler); + }, + + removeEventListeners() { + if (this.scrollHandler) { + window.removeEventListener('scroll', this.scrollHandler, true); + } + + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + } + + if (this.escapeHandler) { + document.removeEventListener('keydown', this.escapeHandler); + this.escapeHandler = null; + } + }, + + getActualPlacement() { + if (!isRTL) return this.placement; + + const rtlAdaptations: Record = { + [PLACEMENTS.LEFT]: PLACEMENTS.RIGHT, + [PLACEMENTS.LEFT_TOP]: PLACEMENTS.RIGHT_TOP, + [PLACEMENTS.LEFT_BOTTOM]: PLACEMENTS.RIGHT_BOTTOM, + [PLACEMENTS.RIGHT]: PLACEMENTS.LEFT, + [PLACEMENTS.RIGHT_TOP]: PLACEMENTS.LEFT_TOP, + [PLACEMENTS.RIGHT_BOTTOM]: PLACEMENTS.LEFT_BOTTOM, + [PLACEMENTS.TOP_START]: PLACEMENTS.TOP_END, + [PLACEMENTS.TOP_END]: PLACEMENTS.TOP_START, + [PLACEMENTS.BOTTOM_START]: PLACEMENTS.BOTTOM_END, + [PLACEMENTS.BOTTOM_END]: PLACEMENTS.BOTTOM_START, + }; + + return rtlAdaptations[this.placement] || this.placement; + }, + + show(): void { + const content = this.$refs.content; + if (content) { + content.style.visibility = 'hidden'; + // Initialize with off-screen position to avoid flashes if visibility fails + content.style.left = '-9999px'; + content.style.top = '-9999px'; + } + + this.open = true; + + const afterShow = () => { + if (!this.open) return; + + const dimensions = this.getContentDimensions(content); + // If measurement failed (0 size), Safari might not have rendered it yet. Retry. + if (dimensions.width === 0 && dimensions.height === 0) { + requestAnimationFrame(afterShow); + return; + } + + this.updatePosition(); + if (content) { + content.style.visibility = 'visible'; + } + if (props.onShow) { + props.onShow(); + } + }; + + if (this.$nextTick) { + this.$nextTick(afterShow); + } else { + requestAnimationFrame(afterShow); + } + }, + + hide(): void { + this.open = false; + const content = this.$refs.content; + if (content) { + content.style.visibility = 'hidden'; + } + if (props.onHide) { + props.onHide(); + } + }, + + toggle(): void { + if (this.open) { + this.hide(); + } else { + this.show(); + } + }, + + handleClickOutside(): void { + if (this.open) { + this.hide(); + } + }, + + handleEscapeKeydown(event: KeyboardEvent): void { + if (event.key === 'Escape' && this.open) { + event.preventDefault(); + event.stopPropagation(); + this.hide(); + } + }, + + isTriggerVisible(): boolean { + const trigger = this.$refs.trigger; + if (!trigger) return false; + + const rect = trigger.getBoundingClientRect(); + const viewportHeight = window.innerHeight; + const viewportWidth = window.innerWidth; + + // Check if trigger is within viewport bounds + const isWithinViewport = + rect.bottom > 0 && rect.top < viewportHeight && rect.right > 0 && rect.left < viewportWidth; + + if (!isWithinViewport || rect.width === 0 || rect.height === 0) { + return false; + } + + // Check if trigger is obscured by elements like sticky headers + const centerX = rect.left + rect.width / 2; + const centerY = rect.top + rect.height / 2; + + const elementAtPoint = document.elementFromPoint(centerX, centerY); + + if (elementAtPoint) { + const content = this.$refs.content; + const isTriggerOrChild = trigger === elementAtPoint || trigger.contains(elementAtPoint); + const isContentOrChild = content && (content === elementAtPoint || content.contains(elementAtPoint)); + + if (!isTriggerOrChild && !isContentOrChild) { + return false; + } + } + + return true; + }, + + updatePosition(): void { + const trigger = this.$refs.trigger; + const content = this.$refs.content; + + if (!trigger || !content) return; + + if (this.open && !this.isTriggerVisible()) { + this.hide(); + return; + } + + const triggerRect = trigger.getBoundingClientRect(); + const contentDimensions = this.getContentDimensions(content); + + // If measurement failed (0 size), retry on next frame + if (this.open && contentDimensions.width === 0 && contentDimensions.height === 0) { + requestAnimationFrame(() => this.updatePosition()); + return; + } + + const viewport = { + width: window.innerWidth, + height: window.innerHeight, + }; + + const placement = this.resolvePlacement(this.actualPlacement, triggerRect, contentDimensions, viewport); + const viewportPosition = this.calculatePosition(triggerRect, contentDimensions, placement); + const { top, left } = this.convertViewportPositionToContentPosition(content, viewportPosition); + + // Apply positioning + content.style.position = 'fixed'; + content.style.top = `${top}px`; + content.style.left = `${left}px`; + content.style.zIndex = '1060'; + + // Update CSS classes for placement + this.updatePlacementClasses(content, placement); + }, + + resolvePlacement( + placement: string, + triggerRect: DOMRect, + contentDimensions: PopoverDimensions, + viewport: { width: number; height: number }, + ): string { + const space = { + top: triggerRect.top, + bottom: viewport.height - triggerRect.bottom, + left: triggerRect.left, + right: viewport.width - triggerRect.right, + }; + + const needsVerticalFlip = { + top: space.top < contentDimensions.height + this.offset && space.bottom > space.top, + bottom: space.bottom < contentDimensions.height + this.offset && space.top > space.bottom, + }; + + const needsHorizontalFlip = { + left: space.left < contentDimensions.width + this.offset && space.right > space.left, + right: space.right < contentDimensions.width + this.offset && space.left > space.right, + }; + + if (placement.startsWith('top') && needsVerticalFlip.top) { + return placement.replace('top', 'bottom'); + } + + if (placement.startsWith('bottom') && needsVerticalFlip.bottom) { + return placement.replace('bottom', 'top'); + } + + if (placement.startsWith('left') && needsHorizontalFlip.left) { + return placement.replace('left', 'right'); + } + + if (placement.startsWith('right') && needsHorizontalFlip.right) { + return placement.replace('right', 'left'); + } + + return placement; + }, + + calculatePosition(triggerRect: DOMRect, contentDimensions: PopoverDimensions, placement: string) { + let top = 0; + let left = 0; + + switch (placement) { + case PLACEMENTS.TOP: + top = triggerRect.top - contentDimensions.height - this.offset; + left = triggerRect.left + (triggerRect.width - contentDimensions.width) / 2; + break; + case PLACEMENTS.TOP_START: + top = triggerRect.top - contentDimensions.height - this.offset; + left = triggerRect.left; + break; + case PLACEMENTS.TOP_END: + top = triggerRect.top - contentDimensions.height - this.offset; + left = triggerRect.right - contentDimensions.width; + break; + case PLACEMENTS.BOTTOM: + top = triggerRect.bottom + this.offset; + left = triggerRect.left + (triggerRect.width - contentDimensions.width) / 2; + break; + case PLACEMENTS.BOTTOM_START: + top = triggerRect.bottom + this.offset; + left = triggerRect.left; + break; + case PLACEMENTS.BOTTOM_END: + top = triggerRect.bottom + this.offset; + left = triggerRect.right - contentDimensions.width; + break; + case PLACEMENTS.LEFT: + top = triggerRect.top + (triggerRect.height - contentDimensions.height) / 2; + left = triggerRect.left - contentDimensions.width - this.offset; + break; + case PLACEMENTS.LEFT_TOP: + top = triggerRect.top; + left = triggerRect.left - contentDimensions.width - this.offset; + break; + case PLACEMENTS.LEFT_BOTTOM: + top = triggerRect.bottom - contentDimensions.height; + left = triggerRect.left - contentDimensions.width - this.offset; + break; + case PLACEMENTS.RIGHT: + top = triggerRect.top + (triggerRect.height - contentDimensions.height) / 2; + left = triggerRect.right + this.offset; + break; + case PLACEMENTS.RIGHT_TOP: + top = triggerRect.top; + left = triggerRect.right + this.offset; + break; + case PLACEMENTS.RIGHT_BOTTOM: + top = triggerRect.bottom - contentDimensions.height; + left = triggerRect.right + this.offset; + break; + } + + return { top, left }; + }, + + getContentDimensions(content: HTMLElement): PopoverDimensions { + // Temporarily reset transforms/transitions for accurate measurement + const originalTransform = content.style.transform; + const originalTransition = content.style.transition; + content.style.transform = 'none'; + content.style.transition = 'none'; + + const rect = content.getBoundingClientRect(); + const dimensions = { + width: content.offsetWidth || rect.width, + height: content.offsetHeight || rect.height, + }; + + content.style.transform = originalTransform; + content.style.transition = originalTransition; + + return dimensions; + }, + + convertViewportPositionToContentPosition(content: HTMLElement, position: { top: number; left: number }) { + const containingBlock = this.getFixedContainingBlock(content); + + if (!containingBlock) { + return position; + } + + const containingBlockRect = containingBlock.getBoundingClientRect(); + const scaleX = containingBlock.offsetWidth ? containingBlockRect.width / containingBlock.offsetWidth || 1 : 1; + const scaleY = containingBlock.offsetHeight ? containingBlockRect.height / containingBlock.offsetHeight || 1 : 1; + + return { + top: (position.top - containingBlockRect.top) / scaleY - containingBlock.clientTop, + left: (position.left - containingBlockRect.left) / scaleX - containingBlock.clientLeft, + }; + }, + + getFixedContainingBlock(element: HTMLElement) { + let parent = element.parentElement; + + while (parent && parent !== document.documentElement) { + if (this.createsFixedContainingBlock(parent)) { + return parent; + } + + parent = parent.parentElement; + } + + return null; + }, + + createsFixedContainingBlock(element: HTMLElement) { + const style = window.getComputedStyle(element); + const willChangeProperties = style.willChange.split(',').map((property) => property.trim()); + const containProperties = style.contain.split(' '); + const backdropFilter = + style.getPropertyValue('backdrop-filter') || style.getPropertyValue('-webkit-backdrop-filter'); + const contentVisibility = style.getPropertyValue('content-visibility'); + const containerType = style.getPropertyValue('container-type'); + + return ( + style.transform !== 'none' || + style.perspective !== 'none' || + style.filter !== 'none' || + (backdropFilter !== '' && backdropFilter !== 'none') || + contentVisibility === 'auto' || + (containerType !== '' && containerType !== 'normal') || + willChangeProperties.some((property) => ['transform', 'perspective', 'filter'].includes(property)) || + containProperties.some((property) => ['layout', 'paint', 'strict', 'content'].includes(property)) + ); + }, + + updatePlacementClasses(content: HTMLElement, placement: string) { + // Remove all placement classes + const placementClasses = ['tutor-popover-top', 'tutor-popover-bottom', 'tutor-popover-left', 'tutor-popover-right']; + content.classList.remove(...placementClasses); + + // Add current placement class + const basePlacement = placement.split('-')[0]; + content.classList.add(`tutor-popover-${basePlacement}`); + }, +}); + +export const popoverMeta: AlpineComponentMeta = { + name: 'popover', + component: popover, +}; diff --git a/assets/core/ts/components/preview-trigger.ts b/assets/core/ts/components/preview-trigger.ts new file mode 100644 index 0000000000..4625cc8606 --- /dev/null +++ b/assets/core/ts/components/preview-trigger.ts @@ -0,0 +1,212 @@ +// Preview Trigger Component +// Shows course/lesson preview card on hover + +import { __, sprintf } from '@wordpress/i18n'; + +import { type AlpineComponentMeta } from '@Core/ts/types'; + +import { popover, type PopoverProps } from './popover'; + +export interface PreviewData { + title: string; + url: string; + thumbnail: string; + instructor: string; + instructor_url: string; +} + +export interface PreviewTriggerProps extends PopoverProps { + data?: PreviewData; + delay?: number; +} + +export const previewTrigger = (props: PreviewTriggerProps = {}) => { + const popoverInstance = popover({ + placement: props.placement || 'bottom-start', + offset: props.offset ?? 4, + onShow: props.onShow, + onHide: props.onHide, + }); + + return { + ...popoverInstance, + previewData: props.data || null, + isTouchDevice: false, + hoverTimeout: null as number | null, + hoverDelay: props.delay || 300, + $nextTick: undefined as ((callback: () => void) => void) | undefined, + + init() { + popoverInstance.init.call(this); + this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0; + this.setupPreviewTriggers(); + }, + + setupPreviewTriggers() { + const trigger = this.$refs.trigger; + if (!trigger) return; + + // Get hover delay from data attribute + if (trigger.hasAttribute('data-tutor-preview-delay')) { + this.hoverDelay = parseInt(trigger.getAttribute('data-tutor-preview-delay') || '300', 10); + } + + if (this.isTouchDevice) { + // Mobile: tap to toggle + trigger.addEventListener('click', (e: Event) => this.handleTap(e as MouseEvent)); + + // Prevent clicks inside content from bubbling to trigger on mobile + // This ensures links inside content work and tapping content doesn't toggle the popover + const content = this.$refs.content; + if (content) { + content.addEventListener('click', (e: Event) => { + e.stopPropagation(); + }); + } + } else { + // Desktop: hover to show + trigger.addEventListener('mouseenter', () => this.handleMouseEnter()); + trigger.addEventListener('mouseleave', () => this.handleMouseLeave()); + trigger.addEventListener('keydown', (e: KeyboardEvent) => this.handleKeyDown(e)); + + // Keep popover open when hovering over content + const content = this.$refs.content; + if (content) { + content.addEventListener('mouseenter', () => { + if (this.hoverTimeout) { + clearTimeout(this.hoverTimeout); + this.hoverTimeout = null; + } + }); + content.addEventListener('mouseleave', () => this.handleMouseLeave()); + } + } + }, + + handleTap(event: MouseEvent) { + const target = event.target as HTMLElement; + const content = this.$refs.content; + + // If the tap is inside the preview content, let it be handled there + // This is a fallback in case propagation wasn't stopped + if (content && content.contains(target)) { + return; + } + + event.preventDefault(); + if (this.open) { + this.hide(); + return; + } + this.showPreview(); + }, + + handleMouseEnter() { + // Clear any existing timeout + if (this.hoverTimeout) { + clearTimeout(this.hoverTimeout); + } + + // Show after delay + this.hoverTimeout = window.setTimeout(() => { + this.showPreview(); + }, this.hoverDelay); + }, + + handleMouseLeave() { + // Clear timeout if user moves away before delay + if (this.hoverTimeout) { + clearTimeout(this.hoverTimeout); + this.hoverTimeout = null; + } + + // Hide preview after a short delay + setTimeout(() => { + const content = this.$refs.content; + if (!content?.matches(':hover') && !this.$refs.trigger?.matches(':hover')) { + this.hide(); + } + }, 100); + }, + + handleKeyDown(event: KeyboardEvent) { + if (event.key === 'Escape') { + this.hide(); + } + + if (event.key === 'Enter' || event.key === ' ') { + const content = this.$refs.content; + if (content && content.contains(event.target as Node)) { + return; + } + + event.preventDefault(); + if (this.open) { + this.hide(); + } else { + this.showPreview(); + } + } + }, + + showPreview() { + if (!this.previewData) return; + + // Show popover + this.show(); + // Render content + this.renderPreview(); + + // Reposition after content is rendered + if (this.$nextTick) { + this.updatePosition(); + } else { + this.updatePosition(); + } + }, + + renderPreview() { + const content = this.$refs.content; + if (!content || !this.previewData) return; + + this.renderCoursePreview(content); + }, + + renderCoursePreview(content: HTMLElement) { + if (!this.previewData) return; + + const data = this.previewData; + const thumbnailHtml = data.thumbnail + ? `${this.escapeHtml(data.title)}` + : ''; + + content.innerHTML = ` +
+ ${data.thumbnail ? (data.url ? `${thumbnailHtml}` : thumbnailHtml) : ''} +
+

${data.url ? `${this.escapeHtml(data.title)}` : this.escapeHtml(data.title)}

+ ${data.instructor ? `
${sprintf(__(`by %s`, 'tutor'), this.escapeHtml(data.instructor))}
` : ''} +
+
+ `; + }, + + escapeHtml(text: string): string { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + }, + + destroy() { + if (this.hoverTimeout) { + clearTimeout(this.hoverTimeout); + } + popoverInstance.destroy.call(this); + }, + }; +}; + +export const previewTriggerMeta: AlpineComponentMeta = { + name: 'previewTrigger', + component: previewTrigger, +}; diff --git a/assets/core/ts/components/read-more.ts b/assets/core/ts/components/read-more.ts new file mode 100644 index 0000000000..d253fef46e --- /dev/null +++ b/assets/core/ts/components/read-more.ts @@ -0,0 +1,141 @@ +import { type AlpineComponentMeta } from '@Core/ts/types'; + +interface ReadMoreProps { + lines?: number; + expanded?: boolean; +} + +const DEFAULT_LINES = 4; + +const readMore = (props: ReadMoreProps = {}) => { + return { + expanded: props.expanded ?? false, + hasOverflow: false, + lines: props.lines ?? DEFAULT_LINES, + collapsedHeightPx: 0, + $el: null as HTMLElement | null, + $refs: {} as { content?: HTMLElement; readMore?: HTMLElement; readLess?: HTMLElement }, + $watch: null as ((key: string, callback: () => void) => void) | null, + $nextTick: null as ((callback: () => void) => void) | null, + + init() { + const content = this.$refs.content; + if (!content) { + return; + } + + // Clear the inline line-clamp styles that prevented flash of full + // content (set in the PHP template) and switch to max-height. + content.style.display = ''; + content.style.webkitLineClamp = ''; + content.style.setProperty('-webkit-box-orient', ''); + content.style.removeProperty('-webkit-line-clamp'); + content.style.removeProperty('-webkit-box-orient'); + content.style.removeProperty('display'); + + this.computeCollapsedHeight(content); + this.applyCollapsedStyles(content); + + this.$watch?.('expanded', () => this.applyState()); + + this.$nextTick?.(() => { + this.sync(); + }); + }, + + computeCollapsedHeight(content: HTMLElement) { + const computedStyle = getComputedStyle(content); + let lineHeight = parseFloat(computedStyle.lineHeight); + + // If lineHeight is 'normal', estimate from font-size × 1.2. + if (Number.isNaN(lineHeight)) { + lineHeight = parseFloat(computedStyle.fontSize) * 1.2; + } + + this.collapsedHeightPx = Math.ceil(this.lines * lineHeight); + }, + + sync() { + const content = this.$refs.content; + if (!content) { + return; + } + + this.computeCollapsedHeight(content); + + const previousMaxHeight = content.style.maxHeight; + const previousOverflow = content.style.overflow; + + content.style.maxHeight = `${this.collapsedHeightPx}px`; + content.style.overflow = 'hidden'; + + this.hasOverflow = content.scrollHeight > content.clientHeight + 1; + + content.style.maxHeight = previousMaxHeight; + content.style.overflow = previousOverflow; + + this.applyState(); + }, + + applyCollapsedStyles(content: HTMLElement) { + content.style.maxHeight = `${this.collapsedHeightPx}px`; + content.style.overflow = 'hidden'; + }, + + applyState() { + const root = this.$el; + const content = this.$refs.content; + const readMoreBtn = this.$refs.readMore; + + if (!content || !root) { + return; + } + + // Root needs relative positioning for the absolute "read more" button. + root.style.position = 'relative'; + + if (this.expanded || !this.hasOverflow) { + content.style.maxHeight = 'none'; + content.style.overflow = 'visible'; + this.styleReadMoreButton(readMoreBtn, false); + return; + } + + content.style.maxHeight = `${this.collapsedHeightPx}px`; + content.style.overflow = 'hidden'; + this.styleReadMoreButton(readMoreBtn, true); + }, + + styleReadMoreButton(btn: HTMLElement | undefined, collapsed: boolean) { + if (!btn) { + return; + } + + if (!collapsed) { + btn.style.position = ''; + btn.style.bottom = ''; + btn.style.right = ''; + btn.style.paddingLeft = ''; + return; + } + + btn.style.position = 'absolute'; + btn.style.bottom = '0'; + btn.style.right = '0'; + btn.style.paddingLeft = '4px'; + }, + + toggle() { + if (!this.hasOverflow && !this.expanded) { + return; + } + + this.expanded = !this.expanded; + }, + }; +}; + +export const readMoreMeta: AlpineComponentMeta = { + name: 'readMore', + component: readMore, +}; diff --git a/assets/core/ts/components/select.ts b/assets/core/ts/components/select.ts new file mode 100644 index 0000000000..f2d5ec5759 --- /dev/null +++ b/assets/core/ts/components/select.ts @@ -0,0 +1,704 @@ +/** + * Tutor Select Component + * + * @package Tutor\Core + * @since 4.0.0 + */ + +import { type FormControlMethods } from '@Core/ts/components/form'; +import { type AlpineComponentMeta } from '@Core/ts/types'; + +export interface SelectOption { + label: string; + value: string | number; + disabled?: boolean; + icon?: string; + description?: string; + group?: string; + display_label?: string; +} + +export interface SelectGroup { + label: string; + options: SelectOption[]; +} + +export interface SelectProps { + // Data + options?: SelectOption[]; + groups?: SelectGroup[]; + value?: string | number | (string | number)[]; + defaultValue?: string | number | (string | number)[]; + + // Multi-select + multiple?: boolean; + maxSelections?: number; + + // Behavior + searchable?: boolean; + clearable?: boolean; + disabled?: boolean; + loading?: boolean; + closeOnSelect?: boolean; + + // Display + placeholder?: string; + searchPlaceholder?: string; + emptyMessage?: string; + loadingMessage?: string; + maxHeight?: number; + + // Form integration + name?: string; + required?: boolean | string; + + // Callbacks + onChange?: (value: string | number | (string | number)[]) => void; + onSearch?: (query: string) => void | Promise; + onOpen?: () => void; + onClose?: () => void; +} + +interface SelectState { + isOpen: boolean; + searchQuery: string; + highlightedIndex: number; + selectedValues: Set; + isLoading: boolean; + asyncOptions: SelectOption[]; + dropdownPosition: 'top' | 'bottom'; + isFocused: boolean; +} + +export const select = (props: SelectProps = {}) => { + const state: SelectState = { + isOpen: false, + searchQuery: '', + highlightedIndex: -1, + selectedValues: new Set(), + isLoading: false, + asyncOptions: [], + dropdownPosition: 'bottom', + isFocused: false, + }; + + return { + // Props with defaults + options: props.options || [], + groups: props.groups || [], + multiple: props.multiple || false, + searchable: props.searchable || false, + clearable: props.clearable || false, + disabled: props.disabled || false, + loading: props.loading || false, + closeOnSelect: props.closeOnSelect ?? !props.multiple, + placeholder: props.placeholder || 'Select...', + searchPlaceholder: props.searchPlaceholder || 'Search...', + emptyMessage: props.emptyMessage || 'No options found', + loadingMessage: props.loadingMessage || 'Loading...', + maxHeight: props.maxHeight || 280, + name: props.name || '', + required: props.required || false, + maxSelections: props.maxSelections, + + // State + ...state, + _boundReposition: null as (() => void) | null, + + // Computed + get allOptions(): SelectOption[] { + if (this.groups.length > 0) { + return this.groups.flatMap((g) => g.options); + } + return [...this.options, ...this.asyncOptions]; + }, + + get filteredOptions(): SelectOption[] { + const query = this.searchQuery.toLowerCase().trim(); + if (!query) return this.allOptions; + + return this.allOptions.filter( + (opt) => opt.label.toLowerCase().includes(query) || opt.description?.toLowerCase().includes(query), + ); + }, + + get filteredGroups(): SelectGroup[] { + if (this.groups.length === 0) return []; + + const query = this.searchQuery.toLowerCase().trim(); + if (!query) return this.groups; + + return this.groups + .map((group) => ({ + ...group, + options: group.options.filter( + (opt) => opt.label.toLowerCase().includes(query) || opt.description?.toLowerCase().includes(query), + ), + })) + .filter((group) => group.options.length > 0); + }, + + get hasGroups(): boolean { + return this.groups.length > 0; + }, + + get selectedOptions(): SelectOption[] { + return this.allOptions.filter((opt) => this.selectedValues.has(opt.value)); + }, + + get displayValue(): string { + if (this.selectedValues.size === 0) return this.placeholder; + + if (this.multiple) { + const count = this.selectedValues.size; + if (count === 1) { + const opt = this.selectedOptions[0]; + return opt ? (opt.display_label ?? opt.label) : this.placeholder; + } + return `${count} selected`; + } + + const opt = this.selectedOptions[0]; + return opt ? (opt.display_label ?? opt.label) : this.placeholder; + }, + + get canClear(): boolean { + return this.clearable && this.selectedValues.size > 0 && !this.disabled; + }, + + get isMaxSelectionsReached(): boolean { + return this.multiple && this.maxSelections !== undefined && this.selectedValues.size >= this.maxSelections; + }, + + // Lifecycle + init() { + this.initializeValue(); + this.setupFormIntegration(); + this.setupKeyboardNavigation(); + this.syncHiddenInput(); + this._boundReposition = this.calculateDropdownPosition.bind(this); + }, + + destroy() { + // Cleanup + if (this._boundReposition) { + window.removeEventListener('resize', this._boundReposition); + window.removeEventListener('scroll', this._boundReposition); + } + }, + + // Initialization + initializeValue() { + const initialValue = props.value ?? props.defaultValue; + if (initialValue === undefined || initialValue === null) return; + + if (Array.isArray(initialValue)) { + this.selectedValues = new Set(initialValue); + } else { + this.selectedValues = new Set([initialValue]); + } + }, + + setupFormIntegration() { + if (!this.name) return; + + const $el = (this as unknown as { $el: HTMLElement }).$el; + const formElement = $el.closest('form[x-data*="tutorForm"], form[x-data*="form("]') as HTMLElement; + + if (formElement) { + try { + const alpine = window.Alpine; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const alpineData = alpine?.$data(formElement) as FormControlMethods & { values: Record }; + + if (alpineData && typeof alpineData.register === 'function') { + // Build validation rules + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const rules: Record = {}; + if (this.required) { + rules.required = this.required; + } + + // Register with form + // eslint-disable-next-line @typescript-eslint/no-explicit-any + alpineData.register(this.name, rules as any); + + // If form already has a value for this field (e.g. from reset() called earlier), sync it TO this component + const formValue = alpineData.values?.[this.name]; + if (formValue !== undefined && formValue !== null && formValue !== '') { + if (Array.isArray(formValue)) { + this.selectedValues = new Set(formValue); + } else { + this.selectedValues = new Set([formValue]); + } + this.syncHiddenInput(); + } else { + // Otherwise, set form value from component's initial state + const currentValue = this.getCurrentValue(); + alpineData.setValue(this.name, currentValue ?? '', { shouldValidate: false }); + } + + // Watch for external form changes + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const component = this as unknown as { $watch: (path: string, cb: (val: any) => void) => void }; + if (component.$watch) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + component.$watch(`values.${this.name}`, (newVal: any) => { + const current = this.getCurrentValue(); + const isSame = Array.isArray(newVal) + ? JSON.stringify([...newVal].sort()) === + JSON.stringify(Array.isArray(current) ? [...current].sort() : [current]) + : String(newVal) === String(current); + if (!isSame) { + if (Array.isArray(newVal)) { + this.selectedValues = new Set(newVal); + } else if (newVal === null || newVal === undefined || newVal === '') { + this.selectedValues.clear(); + } else { + this.selectedValues = new Set([newVal]); + } + this.syncHiddenInput(); + } + }); + } + } + } catch (error) { + // eslint-disable-next-line no-console + console.warn('Failed to integrate with form:', error); + } + } + }, + + setupKeyboardNavigation() { + const $el = (this as unknown as { $el: HTMLElement }).$el; + + $el.addEventListener('keydown', (e: KeyboardEvent) => { + if (this.disabled) return; + this.handleKeyDown(e); + }); + }, + + // Actions + async open() { + if (this.disabled || this.isOpen) return; + + this.isOpen = true; + this.isFocused = true; + + // Call onOpen callback + props.onOpen?.(); + + // Wait for dropdown to render, then calculate position + await this.nextTick(); + this.calculateDropdownPosition(); + + // Listen for resize/scroll to update position + if (this._boundReposition) { + window.addEventListener('resize', this._boundReposition); + window.addEventListener('scroll', this._boundReposition, { passive: true }); + } + + // Focus search input if searchable + if (this.searchable) { + this.focusSearchInput(); + } + + // Scroll to selected option + this.scrollToSelected(); + }, + + close() { + if (!this.isOpen) return; + + this.isOpen = false; + this.searchQuery = ''; + this.highlightedIndex = -1; + + props.onClose?.(); + + if (this._boundReposition) { + window.removeEventListener('resize', this._boundReposition); + window.removeEventListener('scroll', this._boundReposition); + } + }, + + toggle() { + if (this.isOpen) { + this.close(); + } else { + this.open(); + } + }, + + async selectOption(option: SelectOption) { + if (option.disabled) return; + + if (this.multiple) { + this.toggleMultipleSelection(option); + } else { + this.setSingleSelection(option); + } + + this.notifyChange(); + this.syncHiddenInput(); + this.updateFormValue(); + + if (this.closeOnSelect) { + this.close(); + } + }, + + toggleMultipleSelection(option: SelectOption) { + if (this.selectedValues.has(option.value)) { + this.selectedValues.delete(option.value); + } else { + if (this.isMaxSelectionsReached) return; + this.selectedValues.add(option.value); + } + }, + + setSingleSelection(option: SelectOption) { + this.selectedValues.clear(); + this.selectedValues.add(option.value); + }, + + deselectOption(option: SelectOption, event?: Event) { + event?.stopPropagation(); + + this.selectedValues.delete(option.value); + this.notifyChange(); + this.syncHiddenInput(); + this.updateFormValue(); + }, + + clear(event?: Event) { + event?.stopPropagation(); + + this.selectedValues.clear(); + this.notifyChange(); + this.syncHiddenInput(); + this.updateFormValue(); + }, + + async handleSearch(query: string) { + this.searchQuery = query; + this.highlightedIndex = 0; + + if (props.onSearch) { + this.isLoading = true; + try { + const result = props.onSearch(query); + if (result instanceof Promise) { + const asyncOptions = await result; + this.asyncOptions = asyncOptions || []; + } + } finally { + this.isLoading = false; + } + } + }, + + // Keyboard Navigation + handleKeyDown(event: KeyboardEvent) { + const handlers: Record void> = { + Enter: () => this.handleEnterKey(event), + ' ': () => this.handleSpaceKey(event), + Escape: () => this.close(), + ArrowDown: () => this.handleArrowDown(event), + ArrowUp: () => this.handleArrowUp(event), + Home: () => this.handleHomeKey(event), + End: () => this.handleEndKey(event), + Tab: () => this.handleTabKey(event), + Backspace: () => this.handleBackspaceKey(event), + }; + + const handler = handlers[event.key]; + if (handler) { + handler(); + } + }, + + handleEnterKey(event: Event) { + event.preventDefault(); + + if (!this.isOpen) { + this.open(); + return; + } + + if (this.highlightedIndex >= 0) { + const option = this.filteredOptions[this.highlightedIndex]; + if (option) { + this.selectOption(option); + } + } + }, + + handleSpaceKey(event: Event) { + // Only toggle if not in search input + const target = event.target as HTMLElement; + if (target.tagName === 'INPUT') return; + + event.preventDefault(); + if (!this.isOpen) { + this.open(); + } + }, + + handleArrowDown(event: Event) { + event.preventDefault(); + + if (!this.isOpen) { + this.open(); + return; + } + + this.moveHighlight(1); + }, + + handleArrowUp(event: Event) { + event.preventDefault(); + + if (!this.isOpen) { + this.open(); + return; + } + + this.moveHighlight(-1); + }, + + handleHomeKey(event: Event) { + event.preventDefault(); + this.highlightedIndex = this.findNextEnabledIndex(0, 1); + this.scrollToHighlighted(); + }, + + handleEndKey(event: Event) { + event.preventDefault(); + this.highlightedIndex = this.findNextEnabledIndex(this.filteredOptions.length - 1, -1); + this.scrollToHighlighted(); + }, + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + handleTabKey(event: Event) { + if (this.isOpen) { + this.close(); + } + }, + + handleBackspaceKey(event: Event) { + // Remove last selected item if search is empty + const target = event.target as HTMLInputElement; + if (target.tagName === 'INPUT' && target.value === '' && this.multiple) { + const lastOption = this.selectedOptions[this.selectedOptions.length - 1]; + if (lastOption) { + this.deselectOption(lastOption); + } + } + }, + + moveHighlight(direction: 1 | -1) { + const options = this.filteredOptions; + if (options.length === 0) return; + + let newIndex = this.highlightedIndex + direction; + newIndex = this.findNextEnabledIndex(newIndex, direction); + + if (newIndex >= 0 && newIndex < options.length) { + this.highlightedIndex = newIndex; + this.scrollToHighlighted(); + } + }, + + findNextEnabledIndex(startIndex: number, direction: 1 | -1): number { + const options = this.filteredOptions; + let index = startIndex; + + while (index >= 0 && index < options.length) { + if (!options[index]?.disabled) { + return index; + } + index += direction; + } + + return -1; + }, + + // Helpers + isSelected(option: SelectOption): boolean { + return this.selectedValues.has(option.value); + }, + + isHighlighted(index: number): boolean { + return this.highlightedIndex === index; + }, + + getCurrentValue(): string | number | (string | number)[] | null { + if (this.selectedValues.size === 0) return null; + + if (this.multiple) { + return Array.from(this.selectedValues); + } + + return Array.from(this.selectedValues)[0]; + }, + + notifyChange() { + const value = this.getCurrentValue(); + if (value !== null) { + props.onChange?.(value); + } + }, + + updateFormValue() { + if (!this.name) return; + + const $el = (this as unknown as { $el: HTMLElement }).$el; + const formElement = $el.closest('form[x-data*="tutorForm"], form[x-data*="form("]') as HTMLElement; + + if (formElement) { + try { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const alpineData = window.Alpine?.$data(formElement) as any; + + if (alpineData && typeof alpineData.setValue === 'function') { + const value = this.getCurrentValue(); + // Always update, even if null (for required validation) + alpineData.setValue(this.name, value ?? '', { + shouldValidate: true, + shouldTouch: true, + shouldDirty: true, + }); + } + } catch (error) { + // eslint-disable-next-line no-console + console.warn('Failed to update form value:', error); + } + } + }, + + syncHiddenInput() { + if (!this.name) return; + + // Always get the root select container (not the clicked element) + let $el = (this as unknown as { $el: HTMLElement }).$el; + + // If $el is not the root select container, find it + if (!$el.classList.contains('tutor-select')) { + const rootSelect = $el.closest('.tutor-select') as HTMLElement; + if (rootSelect) { + $el = rootSelect; + } + } + + const value = this.getCurrentValue(); + + if (this.multiple && Array.isArray(value)) { + // Remove ALL existing hidden inputs for this field + $el.querySelectorAll(`input[type="hidden"][name^="${this.name}"]`).forEach((input) => input.remove()); + + // Create hidden input for each value + value.forEach((val, index) => { + const input = document.createElement('input'); + input.type = 'hidden'; + input.name = `${this.name}[${index}]`; + input.value = String(val); + $el.appendChild(input); + }); + } else { + // Single value - remove all existing first, then create one + $el.querySelectorAll(`input[type="hidden"][name="${this.name}"]`).forEach((input) => input.remove()); + + const input = document.createElement('input'); + input.type = 'hidden'; + input.name = this.name; + input.value = value !== null ? String(value) : ''; + $el.appendChild(input); + } + }, + + calculateDropdownPosition() { + const $el = (this as unknown as { $el: HTMLElement }).$el; + + // Find the root select container + let rootEl = $el; + if (!$el.classList.contains('tutor-select')) { + const root = $el.closest('.tutor-select') as HTMLElement; + if (root) rootEl = root; + } + + const trigger = rootEl.querySelector('[data-select-trigger]') as HTMLElement; + if (!trigger) { + return; + } + + const rect = trigger.getBoundingClientRect(); + const viewportHeight = window.innerHeight; + const spaceBelow = viewportHeight - rect.bottom; + const spaceAbove = rect.top; + + // Calculate estimated dropdown height + // Account for: options + search box (if searchable) + padding + const optionHeight = 44; // Height per option + const searchBoxHeight = this.searchable ? 60 : 0; + const padding = 16; + const optionsCount = this.filteredOptions.length || this.allOptions.length; + const estimatedHeight = Math.min(this.maxHeight, optionsCount * optionHeight + searchBoxHeight + padding); + + // Add some buffer space (8px) + const buffer = 8; + + // Prefer bottom, but flip to top if not enough space below AND more space above + if (spaceBelow < estimatedHeight + buffer && spaceAbove > spaceBelow) { + this.dropdownPosition = 'top'; + } else { + this.dropdownPosition = 'bottom'; + } + }, + + async nextTick() { + return new Promise((resolve) => { + const component = this as unknown as { $nextTick?: (cb: () => void) => void }; + if (component.$nextTick) { + component.$nextTick(() => resolve(undefined)); + } else { + setTimeout(() => resolve(undefined), 0); + } + }); + }, + + focusSearchInput() { + const $el = (this as unknown as { $el: HTMLElement }).$el; + const input = $el.querySelector('[data-select-search]') as HTMLInputElement; + if (input) { + input.focus(); + } + }, + + scrollToSelected() { + const selectedIndex = this.filteredOptions.findIndex((opt) => this.isSelected(opt)); + if (selectedIndex >= 0) { + this.highlightedIndex = selectedIndex; + this.scrollToHighlighted(); + } + }, + + scrollToHighlighted() { + this.nextTick().then(() => { + const $el = (this as unknown as { $el: HTMLElement }).$el; + const menu = $el.querySelector('[data-select-menu]'); + const options = menu?.querySelectorAll('[data-select-option]'); + + if (options && this.highlightedIndex >= 0 && this.highlightedIndex < options.length) { + const option = options[this.highlightedIndex] as HTMLElement; + option?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); + } + }); + }, + }; +}; + +export const selectMeta: AlpineComponentMeta = { + name: 'select', + component: select, +}; diff --git a/assets/core/ts/components/star-rating.ts b/assets/core/ts/components/star-rating.ts new file mode 100644 index 0000000000..9f61a49799 --- /dev/null +++ b/assets/core/ts/components/star-rating.ts @@ -0,0 +1,58 @@ +import { __ } from '@wordpress/i18n'; + +interface StarRatingConfig { + initialRating?: number; + fieldName: string; +} + +const starRatingInput = (config: StarRatingConfig) => ({ + rating: config.initialRating || 1, + hoverRating: 0, + fieldName: config.fieldName, + + get effectiveRating() { + return this.hoverRating > 0 ? this.hoverRating : this.rating; + }, + + get feedback(): string { + const rating = this.effectiveRating; + if (rating === 0) { + return ''; + } + + const labels: Record = { + 1: __('Poor', 'tutor'), + 2: __('Fair', 'tutor'), + 3: __('Okay', 'tutor'), + 4: __('Good', 'tutor'), + 5: __('Amazing', 'tutor'), + }; + + if (Number.isInteger(rating)) { + return labels[rating] || ''; + } + + // Handle fractional ratings (e.g., 4.5 -> "Good / Amazing") + const lower = Math.floor(rating); + const upper = Math.ceil(rating); + + const lowerLabel = labels[lower]; + const upperLabel = labels[upper]; + + if (lowerLabel && upperLabel) { + return `${lowerLabel} / ${upperLabel}`; + } + + return lowerLabel || upperLabel || ''; + }, + + setRating(val: number, onSet: (rating: number) => void) { + this.rating = val; + onSet(this.rating); + }, +}); + +export const starRatingMeta = { + name: 'starRatingInput', + component: starRatingInput, +}; diff --git a/assets/core/ts/components/statics.ts b/assets/core/ts/components/statics.ts new file mode 100644 index 0000000000..b3f8b9d90d --- /dev/null +++ b/assets/core/ts/components/statics.ts @@ -0,0 +1,231 @@ +import { type AlpineComponentMeta } from '@Core/ts/types'; + +type StaticsType = 'progress' | 'complete' | 'locked'; +type StaticsSize = 'x-small' | 'small' | 'medium' | 'large'; + +export interface StaticsProps { + value?: number; + type?: StaticsType; + size?: StaticsSize; + background?: string; + strokeColor?: string; + progressStrokeColor?: string; + showLabel?: boolean; + label?: string; + animated?: boolean; + duration?: number; +} + +const SIZE_CONFIG = { + large: { dimension: 144, strokeWidth: 10.8, iconSizes: { check: 80, lock: 104 } }, + medium: { dimension: 56, strokeWidth: 4.3, iconSizes: { check: 24, lock: 32 } }, + small: { dimension: 44, strokeWidth: 3.3, iconSizes: { check: 24, lock: 32 } }, + 'x-small': { dimension: 16, strokeWidth: 2, iconSizes: { check: 8, lock: 12 } }, +} as const; + +const DEFAULT_CONFIG = { + value: 0, + type: 'progress' as StaticsType, + size: 'small' as StaticsSize, + background: 'none', + strokeColor: 'var(--tutor-actions-brand-secondary)', + progressStrokeColor: 'var(--tutor-actions-brand-primary)', + showLabel: true, + label: '', + animated: false, + duration: 1000, +} as const; + +const ANIMATION_EASING_POWER = 3; +const MAX_PROGRESS = 100; +const MIN_PROGRESS = 0; + +export const statics = (config: StaticsProps) => ({ + value: 0, + targetValue: config.value ?? DEFAULT_CONFIG.value, + type: config.type ?? DEFAULT_CONFIG.type, + size: config.size ?? DEFAULT_CONFIG.size, + background: config.background ?? DEFAULT_CONFIG.background, + strokeColor: config.strokeColor ?? DEFAULT_CONFIG.strokeColor, + progressStrokeColor: config.progressStrokeColor ?? DEFAULT_CONFIG.progressStrokeColor, + showLabel: config.showLabel ?? DEFAULT_CONFIG.showLabel, + label: config.label ?? DEFAULT_CONFIG.label, + animated: config.animated ?? DEFAULT_CONFIG.animated, + duration: config.duration ?? DEFAULT_CONFIG.duration, + + init() { + this.initializeValue(); + }, + + initializeValue() { + if (this.animated && this.type === 'progress') { + this.animateProgress(); + } else { + this.value = this.targetValue; + } + }, + + animateProgress() { + const startTime = Date.now(); + const startValue = this.value; + const endValue = this.targetValue; + + const animate = () => { + const elapsedTime = Date.now() - startTime; + const progress = Math.min(elapsedTime / this.duration, 1); + const easedProgress = this.easeOut(progress); + + this.value = startValue + (endValue - startValue) * easedProgress; + + if (progress < 1) { + requestAnimationFrame(animate); + } else { + this.value = endValue; + } + }; + + requestAnimationFrame(animate); + }, + + easeOut(progress: number): number { + return 1 - Math.pow(1 - progress, ANIMATION_EASING_POWER); + }, + + sizeConfig() { + const size = this.size ?? DEFAULT_CONFIG.size; + return SIZE_CONFIG[size as StaticsSize] ?? SIZE_CONFIG[DEFAULT_CONFIG.size]; + }, + + sizeValue(): number { + return this.sizeConfig().dimension; + }, + + strokeWidth(): number { + return this.sizeConfig().strokeWidth; + }, + + radius(): number { + return (this.sizeValue() - this.strokeWidth()) / 2; + }, + + center(): number { + return this.sizeValue() / 2; + }, + + viewBox(): string { + return `0 0 ${this.sizeValue()} ${this.sizeValue()}`; + }, + + circumference(): number { + return 2 * Math.PI * this.radius(); + }, + + strokeDashoffset(): number { + const clampedProgress = Math.min(Math.max(this.value, MIN_PROGRESS), MAX_PROGRESS); + return this.circumference() - (clampedProgress / MAX_PROGRESS) * this.circumference(); + }, + + displayValue(): number { + return Math.round(this.value); + }, + + displayLabel(): string { + return this.label || `${this.displayValue()}%`; + }, + + get labelText(): string { + if (!this.showLabel) return ''; + return this.displayValue() === 0 ? '0' : `${this.displayValue()}%`; + }, + + get labelClass(): string { + const baseClass = 'tutor-statics-progress-label'; + const sizeClass = this.size === 'large' ? 'tutor-statics-progress-label-large' : ''; + return `${baseClass} ${sizeClass}`.trim(); + }, + + renderProgressCircle(): string { + return ` + + ${this.renderBackgroundCircle()} + ${this.renderProgressArc()} + + ${this.renderLabel()} + `; + }, + + renderBackgroundCircle(): string { + return ` + + `; + }, + + renderProgressArc(): string { + return ` + + `; + }, + + renderLabel(): string { + if (!this.showLabel) return ''; + return `
${this.labelText}
`; + }, + + renderCompleteCircle(): string { + const iconSize = this.sizeConfig().iconSizes.check; + return this.renderIconContainer('tutor-statics-complete', 'checkStroke', iconSize); + }, + + renderLockIcon(): string { + const iconSize = this.sizeConfig().iconSizes.lock; + return this.renderIconContainer('tutor-statics-locked', 'circumLock', iconSize); + }, + + renderIconContainer(className: string, iconName: string, iconSize: number): string { + return ` +
+
+
+ `; + }, + + render(): string { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const $el = (this as any).$el as HTMLElement; + $el.classList.add('tutor-statics'); + + switch (this.type) { + case 'progress': + return this.renderProgressCircle(); + case 'complete': + return this.renderCompleteCircle(); + case 'locked': + return this.renderLockIcon(); + default: + return ''; + } + }, +}); + +export const staticsMeta: AlpineComponentMeta = { + name: 'statics', + component: statics, +}; diff --git a/assets/core/ts/components/status-select.ts b/assets/core/ts/components/status-select.ts new file mode 100644 index 0000000000..504d5cebc6 --- /dev/null +++ b/assets/core/ts/components/status-select.ts @@ -0,0 +1,88 @@ +import { __ } from '@wordpress/i18n'; + +import { type AlpineComponentMeta } from '@Core/ts/types'; +import { convertToErrorMessage } from '@Core/ts/utils/error'; + +import { tutorConfig } from '@TutorShared/config/config'; + +export interface StatusSelectProps { + selected: string; + action: string; + data: Record; + variants: Record; +} + +export const statusSelect = (props: StatusSelectProps) => { + return { + selectedValue: props.selected, + prevValue: props.selected, + isLoading: false, + variants: props.variants, + + get currentVariant() { + return this.variants[this.selectedValue] || 'default'; + }, + + get variantClasses() { + const classes: Record = {}; + Object.values(this.variants).forEach((variant) => { + classes[`tutor-status-select-${variant}`] = variant === this.currentVariant; + }); + + // Handle the default variant if not explicitly in variants list + if (!Object.values(this.variants).includes('default')) { + classes['tutor-status-select-default'] = this.currentVariant === 'default'; + } + + return classes; + }, + + async updateStatus() { + if (this.selectedValue === this.prevValue || !props.action) { + return; + } + + this.isLoading = true; + + try { + const formData = new FormData(); + + // Add basic nonce and action + formData.append(tutorConfig.nonce_key, tutorConfig._tutor_nonce); + formData.append('action', props.action); + formData.append('status', this.selectedValue); + + // Add additional data + for (const [key, value] of Object.entries(props.data)) { + formData.append(key, value); + } + + const response = await fetch(tutorConfig.ajaxurl, { + method: 'POST', + body: formData, + }); + + const result = await response.json(); + + if (result.success) { + this.prevValue = this.selectedValue; + window.TutorCore.toast.success(result.data?.message || __('Status updated successfully', 'tutor')); + } else { + this.selectedValue = this.prevValue; + window.TutorCore.toast.error(convertToErrorMessage(result)); + } + } catch (error) { + this.selectedValue = this.prevValue; + // eslint-disable-next-line no-console + console.error('Status update error:', error); + } finally { + this.isLoading = false; + } + }, + }; +}; + +export const statusSelectMeta: AlpineComponentMeta = { + name: 'statusSelect', + component: statusSelect, +}; diff --git a/assets/core/ts/components/tabs.ts b/assets/core/ts/components/tabs.ts new file mode 100644 index 0000000000..57cd1a19ba --- /dev/null +++ b/assets/core/ts/components/tabs.ts @@ -0,0 +1,107 @@ +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; + +export interface TabItem { + id: string; + label: string; + icon?: string; + disabled?: boolean; + href?: string; +} + +export interface TabsConfig { + tabs: TabItem[]; + defaultTab?: string; + orientation?: 'horizontal' | 'vertical'; + size?: 'sm' | 'md' | 'lg'; + fullWidth?: boolean; + onChange?: (tabId: string) => void; + urlParams?: { + enabled?: boolean; + paramName?: string; + }; +} + +export const tabs = (config: TabsConfig) => ({ + tabs: config.tabs, + activeTab: config.defaultTab || config.tabs[0]?.id || '', + orientation: config.orientation || 'horizontal', + size: config.size || 'lg', + urlParamsConfig: { + enabled: config.urlParams?.enabled ?? true, + paramName: config.urlParams?.paramName || 'page_tab', + }, + + async init() { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const $el = (this as any).$el as HTMLElement; + + let initialTab = this.activeTab; + + // Only read from URL if URL params are enabled + if (this.urlParamsConfig.enabled) { + const url = new URL(window.location.href); + const tabId = url.searchParams.get(this.urlParamsConfig.paramName); + if (tabId) { + initialTab = tabId; + } + } + + this.selectTab(initialTab); + $el.classList.add('tutor-tabs-' + this.orientation); + }, + + selectTab(tabId: string) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const $dispatch = (this as any).$dispatch; + const tab = this.tabs.find((t) => t.id === tabId); + + if (!tab || tab.disabled) { + return; + } + + if (tab.href) { + window.location.href = tab.href; + return; + } + + this.activeTab = tabId; + + if (this.urlParamsConfig.enabled) { + const url = new URL(window.location.href); + url.searchParams.set(this.urlParamsConfig.paramName, tabId); + window.history.replaceState({}, '', url.toString()); + } + + if (config.onChange) { + config.onChange(tabId); + } + + // Dispatch custom event + $dispatch(TUTOR_CUSTOM_EVENTS.TAB_CHANGE, { tabId, tab }); + }, + + isActive(tabId: string): boolean { + return this.activeTab === tabId; + }, + + getTabClass(tab: TabItem) { + const classes = ['tutor-tabs-tab']; + if (this.size === 'sm') { + classes.push('tutor-tabs-tab-sm'); + } + + if (this.size === 'md') { + classes.push('tutor-tabs-tab-md'); + } + + if (this.isActive(tab.id)) { + classes.push('tutor-tabs-tab-active'); + } + return classes.join(' '); + }, +}); + +export const tabsMeta = { + name: 'tabs', + component: tabs, +}; diff --git a/assets/core/ts/components/time-input.ts b/assets/core/ts/components/time-input.ts new file mode 100644 index 0000000000..468085c67d --- /dev/null +++ b/assets/core/ts/components/time-input.ts @@ -0,0 +1,447 @@ +import { __ } from '@wordpress/i18n'; +import dayjs from 'dayjs'; + +import { type FormControlMethods, type ValidationRules } from '@Core/ts/components/form'; +import { popover, type PopoverProps } from '@Core/ts/components/popover'; +import { DateFormats } from '@Core/ts/date-formats'; +import { type AlpineComponentMeta } from '@Core/ts/types'; + +export interface TimeInputProps extends PopoverProps { + value?: string; + defaultValue?: string; + interval?: number; + placeholder?: string; + disabled?: boolean; + clearable?: boolean; + name?: string; + required?: boolean | string; + onChange?: (value: string) => void; +} + +interface TimeInputState { + highlightedIndex: number; + value: string; + options: string[]; +} + +const defaultProps: Required< + Pick +> = { + interval: 30, + placeholder: __('Select time', 'tutor'), + disabled: false, + clearable: true, + name: '', + required: false, +}; + +const buildTimeOptions = (interval: number): string[] => { + const safeInterval = Number.isFinite(interval) && interval > 0 ? interval : defaultProps.interval; + const start = dayjs().hour(0).minute(0); + const end = dayjs().hour(23).minute(59); + + const options: string[] = []; + let current = start; + while (current.isBefore(end) || current.isSame(end, 'minute')) { + options.push(current.format(DateFormats.hoursMinutes)); + current = current.add(safeInterval, 'minute'); + } + return options; +}; + +const normalizeTimeValue = (value: string): string => { + const raw = String(value || '') + .replace(/\u00a0/g, ' ') + .trim(); + + const match = raw.match(/^(\d{1,2}):(\d{2})\s*([AaPp][Mm])$/); + if (match) { + const hour = String(Math.min(Math.max(parseInt(match[1], 10), 1), 12)).padStart(2, '0'); + const minute = match[2]; + const meridiem = match[3].toUpperCase(); + return `${hour}:${minute} ${meridiem}`; + } + + return raw.toUpperCase().replace(/\s+/g, ' '); +}; + +export const timeInput = (props: TimeInputProps = {}) => { + const popoverInstance = popover({ + placement: props.placement || 'bottom-start', + offset: props.offset ?? 4, + onShow: props.onShow, + onHide: props.onHide, + }); + + const state: TimeInputState = { + highlightedIndex: -1, + value: String(props.value ?? props.defaultValue ?? ''), + options: buildTimeOptions(props.interval ?? defaultProps.interval), + }; + const popoverUpdatePosition = popoverInstance.updatePosition; + const popoverInit = popoverInstance.init; + const popoverDestroy = popoverInstance.destroy; + + return { + ...popoverInstance, + ...state, + interval: props.interval ?? defaultProps.interval, + placeholder: props.placeholder ?? defaultProps.placeholder, + disabled: props.disabled ?? defaultProps.disabled, + clearable: props.clearable ?? defaultProps.clearable, + name: props.name ?? defaultProps.name, + required: props.required ?? defaultProps.required, + onChange: props.onChange, + + init() { + popoverInit.call(this); + const matchingOption = this.getMatchingOption(this.value); + if (matchingOption) { + this.value = matchingOption; + } + this.setupFormIntegration(); + this.syncHiddenInput(); + }, + + destroy() { + popoverDestroy.call(this); + }, + + show() { + this.open = true; + + const afterShow = () => { + this.updatePosition(); + if (props.onShow) { + props.onShow(); + } + }; + + const component = this as unknown as { $nextTick?: (callback: () => void) => void }; + if (component.$nextTick) { + component.$nextTick(afterShow); + } else { + requestAnimationFrame(afterShow); + } + }, + + hide() { + this.open = false; + if (props.onHide) { + props.onHide(); + } + }, + + updatePosition() { + this.syncPopoverWidth(); + popoverUpdatePosition.call(this); + }, + + get hasValue(): boolean { + return this.value !== ''; + }, + + get displayValue(): string { + return this.value || this.placeholder; + }, + + get canClear(): boolean { + return this.clearable && this.hasValue && !this.disabled; + }, + + openDropdown() { + if (this.disabled) return; + this.show(); + this.syncHighlightedIndex(); + this.scrollToHighlighted(); + }, + + closeDropdown() { + this.hide(); + this.highlightedIndex = -1; + }, + + toggleDropdown() { + if (this.disabled) return; + if (this.open) { + this.closeDropdown(); + } else { + this.openDropdown(); + } + }, + + syncHighlightedIndex() { + const selectedIndex = this.getSelectedIndex(); + this.highlightedIndex = selectedIndex >= 0 ? selectedIndex : 0; + }, + + getSelectedIndex(): number { + const matchingOption = this.getMatchingOption(this.value); + if (!matchingOption) return -1; + return this.options.findIndex((option) => option === matchingOption); + }, + + getMatchingOption(value: string): string | null { + const normalizedValue = normalizeTimeValue(value); + if (!normalizedValue) return null; + + const option = this.options.find((item) => normalizeTimeValue(item) === normalizedValue); + return option || null; + }, + + selectOption(option: string) { + this.value = option; + this.syncHiddenInput(); + this.syncFormValue(); + if (this.onChange) { + this.onChange(option); + } + this.closeDropdown(); + }, + + clearValue() { + if (!this.canClear) return; + this.value = ''; + this.syncHiddenInput(); + this.syncFormValue(); + if (this.onChange) { + this.onChange(''); + } + }, + + onInputChange(event: Event) { + if (this.disabled) return; + const target = event.target as HTMLInputElement; + this.value = target.value; + + const matchingOption = this.getMatchingOption(this.value); + if (matchingOption) { + this.value = matchingOption; + this.highlightedIndex = this.options.findIndex((option) => option === matchingOption); + } else { + this.highlightedIndex = -1; + } + + this.syncHiddenInput(); + this.syncFormValue(); + + if (this.open && this.highlightedIndex >= 0) { + this.scrollToHighlighted(); + } + + if (this.onChange) { + this.onChange(this.value); + } + }, + + onInputKeydown(event: KeyboardEvent) { + if (this.disabled) return; + + if (event.key === 'Enter') { + event.preventDefault(); + if (this.open) { + const highlightedOption = this.options[this.highlightedIndex]; + if (highlightedOption) { + this.selectOption(highlightedOption); + } else { + this.closeDropdown(); + } + } else { + this.openDropdown(); + } + return; + } + + if (event.key === 'Escape' && this.open) { + event.preventDefault(); + this.closeDropdown(); + return; + } + + if (event.key === 'Tab') { + this.closeDropdown(); + return; + } + + if (event.key === 'ArrowDown') { + event.preventDefault(); + if (!this.open) { + this.openDropdown(); + } else { + this.moveHighlight(1); + } + return; + } + + if (event.key === 'ArrowUp') { + event.preventDefault(); + if (!this.open) { + this.openDropdown(); + } else { + this.moveHighlight(-1); + } + } + }, + + onListKeydown(event: KeyboardEvent) { + if (this.disabled) return; + + if (event.key === 'ArrowDown') { + event.preventDefault(); + this.moveHighlight(1); + return; + } + + if (event.key === 'ArrowUp') { + event.preventDefault(); + this.moveHighlight(-1); + return; + } + + if (event.key === 'Enter') { + event.preventDefault(); + const highlightedOption = this.options[this.highlightedIndex]; + if (highlightedOption) { + this.selectOption(highlightedOption); + } + } + }, + + moveHighlight(direction: 1 | -1) { + if (this.options.length === 0) return; + + let nextIndex = this.highlightedIndex; + if (nextIndex < 0) { + nextIndex = direction === 1 ? 0 : this.options.length - 1; + } else { + nextIndex += direction; + } + + if (nextIndex < 0) { + nextIndex = 0; + } else if (nextIndex >= this.options.length) { + nextIndex = this.options.length - 1; + } + + this.highlightedIndex = nextIndex; + this.scrollToHighlighted(); + }, + + scrollToHighlighted() { + const component = this as unknown as { + $nextTick?: (callback: () => void) => void; + $refs: Record; + }; + const scroll = () => { + const content = component.$refs.content; + const option = content?.querySelector(`[data-option-index="${this.highlightedIndex}"]`) as HTMLElement | null; + option?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); + }; + + if (component.$nextTick) { + component.$nextTick(scroll); + } else { + setTimeout(scroll, 0); + } + }, + + syncPopoverWidth() { + const component = this as unknown as { $refs: { trigger?: HTMLElement; content?: HTMLElement } }; + const trigger = component.$refs.trigger; + const content = component.$refs.content; + if (!trigger || !content) return; + + const triggerRect = trigger.getBoundingClientRect(); + content.style.width = `${triggerRect.width}px`; + content.style.minWidth = `${triggerRect.width}px`; + }, + + syncHiddenInput() { + if (!this.name) return; + const $el = (this as unknown as { $el: HTMLElement }).$el; + let hiddenInput = $el.querySelector(`input[type="hidden"][name="${this.name}"]`) as HTMLInputElement | null; + + if (!hiddenInput) { + hiddenInput = document.createElement('input'); + hiddenInput.type = 'hidden'; + hiddenInput.name = this.name; + $el.appendChild(hiddenInput); + } + + hiddenInput.value = this.value; + }, + + syncFormValue() { + if (!this.name) return; + const $el = (this as unknown as { $el: HTMLElement }).$el; + const formElement = $el.closest('form[x-data*="tutorForm"], form[x-data*="form("]') as HTMLElement | null; + if (!formElement) return; + + const alpineData = window.Alpine?.$data(formElement) as FormControlMethods | undefined; + if (alpineData && typeof alpineData.setValue === 'function') { + alpineData.setValue(this.name, this.value, { shouldValidate: true }); + } + }, + + setupFormIntegration() { + if (!this.name) return; + const $el = (this as unknown as { $el: HTMLElement }).$el; + const formElement = $el.closest('form[x-data*="tutorForm"], form[x-data*="form("]') as HTMLElement | null; + + if (!formElement) return; + + try { + const alpineData = window.Alpine?.$data(formElement) as + | (FormControlMethods & { values: Record }) + | undefined; + if (!alpineData || typeof alpineData.register !== 'function') { + return; + } + + const rules: ValidationRules = { + numberOnly: false, + validTime: true, + }; + + if (this.required) { + rules.required = this.required; + } + + alpineData.register(this.name, rules); + + const externalValue = alpineData.values?.[this.name]; + if (externalValue !== undefined && externalValue !== null && externalValue !== '') { + const matchingOption = this.getMatchingOption(String(externalValue)); + this.value = matchingOption || String(externalValue); + this.syncHiddenInput(); + } else { + alpineData.setValue(this.name, this.value, { shouldValidate: false }); + } + + const component = this as unknown as { $watch?: (path: string, cb: (value: unknown) => void) => void }; + component.$watch?.(`values['${this.name}']`, (newValue: unknown) => { + const normalized = newValue === null || newValue === undefined ? '' : String(newValue); + const matchingOption = this.getMatchingOption(normalized); + const nextValue = matchingOption || normalized; + + if (nextValue !== this.value) { + this.value = nextValue; + this.syncHiddenInput(); + this.highlightedIndex = this.getSelectedIndex(); + if (this.open && this.highlightedIndex >= 0) { + this.scrollToHighlighted(); + } + } + }); + } catch (error) { + // eslint-disable-next-line no-console + console.warn('timeInput form integration failed', error); + } + }, + }; +}; + +export const timeInputMeta: AlpineComponentMeta = { + name: 'timeInput', + component: timeInput, +}; diff --git a/assets/core/ts/components/toast.ts b/assets/core/ts/components/toast.ts new file mode 100644 index 0000000000..1cab587266 --- /dev/null +++ b/assets/core/ts/components/toast.ts @@ -0,0 +1,44 @@ +import { toastServiceMeta } from '@Core/ts/services/toast/Toast'; +import { type AlpineComponentMeta } from '@Core/ts/types'; +import { type ToastConfig } from '@Core/ts/types/toast'; + +const toast = () => { + return { + show(message: string, config: ToastConfig = {}): string { + return toastServiceMeta.instance.show(message, config); + }, + + remove(id: string): void { + toastServiceMeta.instance.dismiss(id); + }, + + clear(): void { + toastServiceMeta.instance.clear(); + }, + + dismiss(id?: string): void { + toastServiceMeta.instance.dismiss(id); + }, + + success(message: string, duration?: number): string { + return toastServiceMeta.instance.success(message, duration); + }, + + error(message: string, duration?: number): string { + return toastServiceMeta.instance.error(message, duration); + }, + + warning(message: string, duration?: number): string { + return toastServiceMeta.instance.warning(message, duration); + }, + + info(message: string, duration?: number): string { + return toastServiceMeta.instance.info(message, duration); + }, + }; +}; + +export const toastMeta: AlpineComponentMeta = { + name: 'toast', + component: toast, +}; diff --git a/assets/core/ts/components/tooltip.ts b/assets/core/ts/components/tooltip.ts new file mode 100644 index 0000000000..cbd99abd01 --- /dev/null +++ b/assets/core/ts/components/tooltip.ts @@ -0,0 +1,351 @@ +import { type AlpineComponentMeta } from '@Core/ts/types'; +import { isRTL } from '@Core/ts/utils/util'; + +const TOOLTIP_PLACEMENTS = { + TOP: 'top', + BOTTOM: 'bottom', + START: 'start', + END: 'end', +} as const; + +const TOOLTIP_TRIGGERS = { + HOVER: 'hover', + FOCUS: 'focus', + CLICK: 'click', +} as const; + +const TOOLTIP_SIZES = { + SMALL: 'small', + MEDIUM: 'medium', + LARGE: 'large', +} as const; + +const TOOLTIP_ARROWS = { + START: 'start', + CENTER: 'center', + END: 'end', +} as const; + +const DEFAULT_TOOLTIP_OFFSET = 8; + +export interface TooltipProps { + placement?: (typeof TOOLTIP_PLACEMENTS)[keyof typeof TOOLTIP_PLACEMENTS]; + trigger?: (typeof TOOLTIP_TRIGGERS)[keyof typeof TOOLTIP_TRIGGERS]; + size?: (typeof TOOLTIP_SIZES)[keyof typeof TOOLTIP_SIZES]; + arrow?: (typeof TOOLTIP_ARROWS)[keyof typeof TOOLTIP_ARROWS]; + offset?: number; + delay?: { + show?: number; + hide?: number; + }; +} + +const defaultProps: Required = { + placement: TOOLTIP_PLACEMENTS.TOP, + trigger: TOOLTIP_TRIGGERS.HOVER, + size: TOOLTIP_SIZES.SMALL, + arrow: TOOLTIP_ARROWS.START, + offset: DEFAULT_TOOLTIP_OFFSET, + delay: { show: 0, hide: 0 }, +}; + +export const tooltip = (props: TooltipProps = {}) => { + const config = { ...defaultProps, ...props }; + + return { + open: false, + placement: config.placement, + trigger: config.trigger, + size: config.size, + arrow: config.arrow, + offset: config.offset, + delay: config.delay, + actualPlacement: '', + $nextTick: undefined as ((callback: () => void) => void) | undefined, + $el: undefined as HTMLElement | undefined, + $refs: {} as { trigger: HTMLElement; content: HTMLElement }, + + scrollHandler: null as (() => void) | null, + resizeHandler: null as (() => void) | null, + + init() { + this.actualPlacement = this.getActualPlacement(); + this.setupAccessibility(); + this.setupTriggers(); + this.setupEventListeners(); + }, + + destroy() { + this.removeEventListeners(); + }, + + setupEventListeners() { + this.scrollHandler = () => { + if (this.open) { + this.updatePosition(); + } + }; + + this.resizeHandler = () => { + if (this.open) { + this.updatePosition(); + } + }; + + window.addEventListener('scroll', this.scrollHandler, true); + window.addEventListener('resize', this.resizeHandler); + }, + + removeEventListeners() { + if (this.scrollHandler) { + window.removeEventListener('scroll', this.scrollHandler, true); + } + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + } + }, + + getActualPlacement() { + return this.placement; + }, + + setupTriggers() { + // If trigger is not explicitly defined via x-ref, use $el as trigger + const trigger = this.$refs.trigger || this.$el; + if (!trigger) return; + + if (this.trigger === TOOLTIP_TRIGGERS.HOVER) { + trigger.addEventListener('mouseenter', () => this.showWithDelay()); + trigger.addEventListener('mouseleave', () => this.hideWithDelay()); + } else if (this.trigger === TOOLTIP_TRIGGERS.FOCUS) { + trigger.addEventListener('focus', () => this.show()); + trigger.addEventListener('blur', () => this.hide()); + } else if (this.trigger === TOOLTIP_TRIGGERS.CLICK) { + trigger.addEventListener('click', () => this.toggle()); + } + + trigger.addEventListener('keydown', (e: KeyboardEvent) => { + if (e.key === 'Escape' && this.open) { + this.hide(); + } + }); + }, + + showWithDelay() { + const delay = this.delay.show || 0; + if (delay) { + setTimeout(() => { + if (!this.open) this.show(); + }, delay); + } else { + this.show(); + } + }, + + hideWithDelay() { + const delay = this.delay.hide || 0; + if (delay) { + setTimeout(() => { + if (this.open) this.hide(); + }, delay); + } else { + this.hide(); + } + }, + + show() { + const content = this.$refs.content; + if (content) { + content.style.visibility = 'hidden'; + } + + this.open = true; + + const afterShow = () => { + this.updatePosition(); + if (content) { + content.style.visibility = 'visible'; + } + requestAnimationFrame(() => this.updatePosition()); + }; + + if (this.$nextTick) { + this.$nextTick(() => { + this.updatePosition(); + afterShow(); + }); + } else { + requestAnimationFrame(afterShow); + } + }, + + hide() { + this.open = false; + const content = this.$refs.content; + if (content) { + content.style.visibility = 'hidden'; + } + }, + + toggle() { + if (this.open) { + this.hide(); + } else { + this.show(); + } + }, + + setupAccessibility() { + const trigger = this.$refs.trigger || this.$el; + const content = this.$refs.content; + + if (trigger && content) { + const tooltipId = `tooltip-${Date.now()}`; + content.setAttribute('id', tooltipId); + content.setAttribute('role', 'tooltip'); + trigger.setAttribute('aria-describedby', tooltipId); + } + }, + + updatePosition() { + const trigger = this.$refs.trigger || (this.$el as HTMLElement); + const content = this.$refs.content as HTMLElement; + + if (!trigger || !content) return; + + // Ensure fixed position before measurement to avoid container constraints + content.style.position = 'fixed'; + + // Temporarily reset transforms/transitions for accurate measurement + const originalTransform = content.style.transform; + const originalTransition = content.style.transition; + content.style.transform = 'none'; + content.style.transition = 'none'; + + // Force layout if display is none (though it should be open now) + const originalDisplay = content.style.display; + if (window.getComputedStyle(content).display === 'none') { + content.style.display = 'block'; + } + + const triggerRect = trigger.getBoundingClientRect(); + const contentWidth = content.offsetWidth; + const contentHeight = content.offsetHeight; + + // Restore styles + content.style.display = originalDisplay; + content.style.transform = originalTransform; + content.style.transition = originalTransition; + + // If measurement failed (0 size), retry on next frame + if (contentWidth === 0 && contentHeight === 0 && this.open) { + requestAnimationFrame(() => this.updatePosition()); + return; + } + + const viewport = { + width: window.innerWidth, + height: window.innerHeight, + }; + + let top = 0; + let left = 0; + let actualPlacement = this.placement; + + // Smart positioning with flipping + if (this.placement === TOOLTIP_PLACEMENTS.TOP) { + const spaceAbove = triggerRect.top; + const spaceBelow = viewport.height - triggerRect.bottom; + if (spaceAbove < contentHeight + this.offset && spaceBelow > spaceAbove) { + actualPlacement = TOOLTIP_PLACEMENTS.BOTTOM; + } + } else if (this.placement === TOOLTIP_PLACEMENTS.BOTTOM) { + const spaceBelow = viewport.height - triggerRect.bottom; + const spaceAbove = triggerRect.top; + if (spaceBelow < contentHeight + this.offset && spaceAbove > spaceBelow) { + actualPlacement = TOOLTIP_PLACEMENTS.TOP; + } + } else if (this.placement === TOOLTIP_PLACEMENTS.START) { + const spaceStart = isRTL ? viewport.width - triggerRect.right : triggerRect.left; + const spaceEnd = isRTL ? triggerRect.left : viewport.width - triggerRect.right; + if (spaceStart < contentWidth + this.offset && spaceEnd > spaceStart) { + actualPlacement = TOOLTIP_PLACEMENTS.END; + } + } else if (this.placement === TOOLTIP_PLACEMENTS.END) { + const spaceEnd = isRTL ? triggerRect.left : viewport.width - triggerRect.right; + const spaceStart = isRTL ? viewport.width - triggerRect.right : triggerRect.left; + if (spaceEnd < contentWidth + this.offset && spaceStart > spaceEnd) { + actualPlacement = TOOLTIP_PLACEMENTS.START; + } + } + + this.actualPlacement = actualPlacement; + + switch (actualPlacement) { + case TOOLTIP_PLACEMENTS.TOP: + top = triggerRect.top - contentHeight - this.offset; + left = triggerRect.left + (triggerRect.width - contentWidth) / 2; + break; + case TOOLTIP_PLACEMENTS.BOTTOM: + top = triggerRect.bottom + this.offset; + left = triggerRect.left + (triggerRect.width - contentWidth) / 2; + break; + case TOOLTIP_PLACEMENTS.START: + top = triggerRect.top + (triggerRect.height - contentHeight) / 2; + if (!isRTL) { + left = triggerRect.left - contentWidth - this.offset; + } else { + left = triggerRect.right + this.offset; + } + break; + case TOOLTIP_PLACEMENTS.END: + top = triggerRect.top + (triggerRect.height - contentHeight) / 2; + if (!isRTL) { + left = triggerRect.right + this.offset; + } else { + left = triggerRect.left - contentWidth - this.offset; + } + break; + } + + // Keep within viewport + top = Math.max(8, Math.min(top, viewport.height - contentHeight - 8)); + left = Math.max(8, Math.min(left, viewport.width - contentWidth - 8)); + + content.style.position = 'fixed'; + content.style.top = `${top}px`; + content.style.left = `${left}px`; + content.style.zIndex = '1070'; + + this.updatePlacementClasses(content, actualPlacement); + }, + + updatePlacementClasses(content: HTMLElement, placement: string) { + const placementClasses = [ + 'tutor-tooltip-top', + 'tutor-tooltip-bottom', + 'tutor-tooltip-start', + 'tutor-tooltip-end', + ]; + const sizeClasses = ['tutor-tooltip-medium', 'tutor-tooltip-large']; + const arrowClasses = ['tutor-tooltip-arrow-start', 'tutor-tooltip-arrow-center', 'tutor-tooltip-arrow-end']; + + content.classList.remove(...placementClasses, ...sizeClasses, ...arrowClasses); + + content.classList.add(`tutor-tooltip-${placement}`); + + if (this.size === TOOLTIP_SIZES.MEDIUM) { + content.classList.add('tutor-tooltip-medium'); + } else if (this.size === TOOLTIP_SIZES.LARGE) { + content.classList.add('tutor-tooltip-large'); + } + + content.classList.add(`tutor-tooltip-arrow-${this.arrow}`); + }, + }; +}; + +export const tooltipMeta: AlpineComponentMeta = { + name: 'tooltip', + component: tooltip, +}; diff --git a/assets/core/ts/components/wp-editor.ts b/assets/core/ts/components/wp-editor.ts new file mode 100644 index 0000000000..950c1ff9db --- /dev/null +++ b/assets/core/ts/components/wp-editor.ts @@ -0,0 +1,303 @@ +import { type AlpineComponentMeta } from '@Core/ts/types'; + +import { TUTOR_CUSTOM_EVENTS } from '../constant'; + +interface TinyMCEEditor { + getContent(): string; + setContent(content: string): void; + on(event: string, callback: () => void): void; + isHidden(): boolean; + settings: { + placeholder?: string; + }; +} + +interface WPEditorConfig { + name: string; + editorId: string; + placeholder?: string; +} + +interface AlpineComponent { + $el: HTMLElement; +} + +interface WPEditorComponent { + name: string; + editorId: string; + placeholder: string; + editorInstance: TinyMCEEditor | null; + isVisualMode: boolean; + initialized: boolean; + init(this: AlpineComponent & WPEditorComponent): void; + setupTinyMCE(this: AlpineComponent & WPEditorComponent): void; + setupTextarea(this: AlpineComponent & WPEditorComponent): void; + setupQuickTags(this: AlpineComponent & WPEditorComponent): void; + setupFormResetListener(this: AlpineComponent & WPEditorComponent): void; + syncEditorToForm(this: AlpineComponent & WPEditorComponent): void; + syncTextareaToForm(this: AlpineComponent & WPEditorComponent): void; + updateFormValue(this: AlpineComponent & WPEditorComponent, content: string): void; + triggerBlur(this: AlpineComponent & WPEditorComponent): void; + getContent(this: AlpineComponent & WPEditorComponent): string; + setContent(this: AlpineComponent & WPEditorComponent, content: string): void; +} + +export const wpEditor = (config: WPEditorConfig): WPEditorComponent => { + const { name, editorId, placeholder = '' } = config; + + return { + name, + editorId, + placeholder, + editorInstance: null as TinyMCEEditor | null, + isVisualMode: true, + initialized: false, + + init(this) { + if (this.initialized) { + return; + } + + // Wait for TinyMCE to be ready + if (typeof window.tinymce !== 'undefined') { + this.setupTinyMCE(); + } else { + // Fallback to textarea if TinyMCE is not available + this.setupTextarea(); + } + + // Setup QuickTags if available + if (typeof window.quicktags !== 'undefined') { + this.setupQuickTags(); + } + + // Listen for form reset events + this.setupFormResetListener(); + + this.initialized = true; + }, + + setupTinyMCE(this: AlpineComponent & WPEditorComponent) { + // TinyMCE might not be initialized immediately + const checkEditor = () => { + // Use editorId instead of name to support multiple editors + const editor = window.tinymce?.get(this.editorId); + + if (editor) { + this.editorInstance = editor; + this.isVisualMode = !editor.isHidden(); + + // Set placeholder if provided + if (this.placeholder) { + editor.settings.placeholder = this.placeholder; + } + + // Sync editor content with form value on change + editor.on('change keyup', () => { + this.syncEditorToForm(); + }); + + // Sync on blur for validation + editor.on('blur', () => { + this.syncEditorToForm(); + this.triggerBlur(); + }); + + // Sync when switching between Visual/Text modes + editor.on('hide', () => { + this.isVisualMode = false; + }); + + editor.on('show', () => { + this.isVisualMode = true; + this.syncEditorToForm(); + }); + + // Dispatch custom focus event + editor.on('focus', () => { + this.$el.dispatchEvent(new CustomEvent(TUTOR_CUSTOM_EVENTS.WP_EDITOR_FOCUS, { bubbles: true })); + }); + + // Handle Cmd/Ctrl + Enter for form submission + editor.on('keydown', (e: KeyboardEvent) => { + if ((e.metaKey || e.ctrlKey) && e.keyCode === 13) { + e.preventDefault(); + this.syncEditorToForm(); + const formEl = this.$el.closest('form'); + if (formEl) { + formEl.requestSubmit(); + } + } + }); + + // Sync theme to iframe + const setupThemeSync = () => { + const syncTheme = () => { + const iframeDoc = editor.getDoc && editor.getDoc(); + if (!iframeDoc || !iframeDoc.body) return; + + const theme = document.documentElement.getAttribute('data-tutor-theme') || 'light'; + iframeDoc.documentElement.setAttribute('data-tutor-theme', theme); + + const body = iframeDoc.body; + const computed = window.getComputedStyle(document.body); + const textColor = computed.getPropertyValue('--tutor-text-primary').trim(); + + body.style.backgroundColor = 'transparent'; + body.style.color = textColor; + }; + + syncTheme(); + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.attributeName === 'data-tutor-theme') { + syncTheme(); + } + }); + }); + observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-tutor-theme'] }); + }; + + if (editor.initialized) { + setupThemeSync(); + } else { + editor.on('init', setupThemeSync); + } + } else { + // Retry after a short delay + setTimeout(checkEditor, 100); + } + }; + + // Start checking for editor + checkEditor(); + }, + + setupTextarea(this: AlpineComponent & WPEditorComponent) { + const textarea = document.getElementById(this.editorId) as HTMLTextAreaElement; + + if (textarea) { + // Set placeholder + if (this.placeholder) { + textarea.placeholder = this.placeholder; + } + + // Sync textarea content with form value + textarea.addEventListener('input', () => { + this.syncTextareaToForm(); + }); + + textarea.addEventListener('blur', () => { + this.syncTextareaToForm(); + this.triggerBlur(); + }); + + // Dispatch custom focus event + textarea.addEventListener('focus', () => { + this.$el.dispatchEvent(new CustomEvent(TUTOR_CUSTOM_EVENTS.WP_EDITOR_FOCUS, { bubbles: true })); + }); + } + }, + + setupQuickTags(this: AlpineComponent & WPEditorComponent) { + // QuickTags buttons trigger changes in text mode + const textarea = document.getElementById(this.editorId) as HTMLTextAreaElement; + + if (textarea) { + // Monitor for QuickTags button clicks + // QuickTags toolbars usually have ID "qt_{editorId}_toolbar" + const toolbarId = `qt_${this.editorId}_toolbar`; + const toolbar = document.getElementById(toolbarId); + + if (toolbar) { + toolbar.addEventListener('click', () => { + // Small delay to allow QuickTags to update the textarea + setTimeout(() => { + if (!this.isVisualMode) { + this.syncTextareaToForm(); + } + }, 50); + }); + } + } + }, + + setupFormResetListener(this: AlpineComponent & WPEditorComponent) { + // Listen for form reset events from tutorForm + window.addEventListener(TUTOR_CUSTOM_EVENTS.FORM_RESET, (event: Event) => { + const customEvent = event as CustomEvent; + const { formId, defaultValues } = customEvent.detail || {}; + + // Check if this reset event is for our form by checking if our element is inside the form + const form = this.$el.closest('form'); + if (form && form.getAttribute('x-data')?.includes(`id: '${formId}'`)) { + // Reset editor content to default value + const defaultValue = defaultValues?.[this.name] || ''; + this.setContent(defaultValue); + } + }); + }, + + syncEditorToForm(this: AlpineComponent & WPEditorComponent) { + if (this.editorInstance) { + const content = this.editorInstance.getContent(); + this.updateFormValue(content); + } + }, + + syncTextareaToForm(this: AlpineComponent & WPEditorComponent) { + const textarea = document.getElementById(this.name) as HTMLTextAreaElement; + if (textarea) { + this.updateFormValue(textarea.value); + } + }, + + updateFormValue(this: AlpineComponent & WPEditorComponent, content: string) { + // Get the hidden input that's bound to the form + const hiddenInput = this.$el.querySelector(`input[name="${this.name}"]`) as HTMLInputElement; + + if (hiddenInput) { + // Update the hidden input value + hiddenInput.value = content; + + // Trigger input event to update form state + hiddenInput.dispatchEvent(new Event('input', { bubbles: true })); + } + }, + + triggerBlur(this: AlpineComponent & WPEditorComponent) { + const hiddenInput = this.$el.querySelector(`input[name="${this.name}"]`) as HTMLInputElement; + + if (hiddenInput) { + hiddenInput.dispatchEvent(new Event('blur', { bubbles: true })); + } + }, + + getContent(this: AlpineComponent & WPEditorComponent): string { + if (this.isVisualMode && this.editorInstance) { + return this.editorInstance.getContent(); + } + + const textarea = document.getElementById(this.name) as HTMLTextAreaElement; + return textarea ? textarea.value : ''; + }, + + setContent(this: AlpineComponent & WPEditorComponent, content: string) { + if (this.isVisualMode && this.editorInstance) { + this.editorInstance.setContent(content); + } + + const textarea = document.getElementById(this.name) as HTMLTextAreaElement; + if (textarea) { + textarea.value = content; + } + + this.updateFormValue(content); + }, + }; +}; + +export const wpEditorMeta: AlpineComponentMeta = { + name: 'WPEditor', + component: wpEditor, +}; diff --git a/assets/react/v3/shared/config/config.ts b/assets/core/ts/config/config.ts similarity index 79% rename from assets/react/v3/shared/config/config.ts rename to assets/core/ts/config/config.ts index f163e47ae7..e495944feb 100644 --- a/assets/react/v3/shared/config/config.ts +++ b/assets/core/ts/config/config.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ const defaultTutorConfig = { ID: 0, ajaxurl: '', @@ -32,12 +33,27 @@ const defaultTutorConfig = { course_list_page_url: '', course_post_type: '', local: '', - difficulty_levels: [], - supported_video_sources: [], - edd_products: [], - bp_groups: [], - timezones: {}, - addons_data: [], + tutor_pn_vapid_key: '', + tutor_pn_client_id: '', + tutor_pn_subscription_saved: '', + difficulty_levels: [] as any[], + supported_video_sources: [] as any[], + edd_products: [] as any[], + bp_groups: [] as any[], + timezones: {} as Record, + addons_data: [] as any[], + kids_icons_registry: [] as any[], + is_kids_mode: false, + user_preferences: { + auto_play_next: false, + contrast: '', + font_scale: 1, + learning_mood: 'modern', + motion_effects: 'auto', + theme: 'light', + vision: 'normal', + }, + is_legacy_learning_mode: false, current_user: { data: { id: '', @@ -51,13 +67,14 @@ const defaultTutorConfig = { user_status: '', display_name: '', }, - caps: {}, + caps: {} as Record, cap_key: '', - roles: [], - allcaps: {}, + roles: [] as any[], + allcaps: {} as Record, filter: null, }, settings: { + learning_mode: '', monetize_by: 'tutor', enable_course_marketplace: 'off', course_permalink_base: '', @@ -92,7 +109,8 @@ const defaultTutorConfig = { }, }; -export const tutorConfig = window._tutorobject || defaultTutorConfig; +export const tutorConfig = (window._tutorobject || defaultTutorConfig) as typeof defaultTutorConfig & + Record; window.ajaxurl = tutorConfig.ajaxurl; const config = { diff --git a/assets/core/ts/constant.ts b/assets/core/ts/constant.ts new file mode 100644 index 0000000000..aa728109ca --- /dev/null +++ b/assets/core/ts/constant.ts @@ -0,0 +1,20 @@ +export const TUTOR_CUSTOM_EVENTS = { + TAB_CHANGE: 'tutor-tab-change', + MODAL_OPEN: 'tutor-modal-open', + MODAL_UPDATE: 'tutor-modal-update', + MODAL_CLOSE: 'tutor-modal-close', + MODAL_CLOSED: 'tutor-modal-closed', + TOAST_SHOW: 'tutor-toast-show', + TOAST_CLEAR: 'tutor-toast-clear', + FORM_REGISTER: 'tutor-form-register', + FORM_UNREGISTER: 'tutor-form-unregister', + FORM_STATE_CHANGE: 'tutor-form-state-change', + FORM_RESET: 'tutor-form-reset', + WP_EDITOR_FOCUS: 'wp-editor-focus', + TUTOR_PLAYER_READY: 'tutor-player-ready', + COMMENT_REPLIED: 'tutor:comment:replied', + LESSON_PLAYER_READY: 'tutorLessonPlayerReady', + QUIZ_TIME_EXPIRED: 'tutor-quiz-time-expired', + QUIZ_ABANDON_REQUESTED: 'tutor-quiz-abandon-requested', + QUIZ_ATTEMPT_COMPLETED: 'tutor-quiz-attempt-completed', +}; diff --git a/assets/core/ts/date-formats.ts b/assets/core/ts/date-formats.ts new file mode 100644 index 0000000000..1572048cc5 --- /dev/null +++ b/assets/core/ts/date-formats.ts @@ -0,0 +1,19 @@ +/** + * Date format constants compatible with dayjs + * These formats replace date-fns formats for dayjs compatibility + */ +export enum DateFormats { + day = 'DD', + month = 'MMM', + year = 'YYYY', + yearMonthDay = 'YYYY-MM-DD', + monthDayYear = 'MMM DD, YYYY', + hoursMinutes = 'hh:mm A', + yearMonthDayHourMinuteSecond = 'YYYY-MM-DD hh:mm:ss', + yearMonthDayHourMinuteSecond24H = 'YYYY-MM-DD HH:mm:ss', + monthDayYearHoursMinutes = 'MMM DD, YYYY, hh:mm A', + localMonthDayYearHoursMinutes = 'MMM DD, YYYY hh:mm A', + activityDate = 'MMM DD, YYYY at hh:mm A', + validityDate = 'DD MMMM YYYY', + dayMonthYear = 'MMMM D, YYYY', +} diff --git a/assets/core/ts/declaration.d.ts b/assets/core/ts/declaration.d.ts new file mode 100644 index 0000000000..9ca49f5f06 --- /dev/null +++ b/assets/core/ts/declaration.d.ts @@ -0,0 +1,123 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { type Alpine as AlpineType } from 'alpinejs'; + +import { type TutorComponentRegistry } from '@Core/ts/ComponentRegistry'; +import { type ToastService } from '@Core/ts/services/toast/Toast'; +import { type TutorCore } from '@Core/ts/types'; +import { type ToastType } from '@Core/ts/types/toast'; + +interface WPMediaFrameOptions { + title?: string; + button?: { text?: string }; + multiple?: boolean | 'add'; + library?: { type?: string }; +} + +interface WPMediaState { + get: (key: string) => WPMediaSelection; +} + +interface WPMediaSelection { + reset: () => void; + add: (attachment: WPMediaAttachmentModel) => void; + toJSON: () => any[]; +} + +interface WPMediaAttachmentJSON { + id: number; + title: string; + filename: string; + url: string; + mime: string; + type: string; + subtype: string; + filesizeHumanReadable: string; + filesizeInBytes: number; +} + +interface WPMediaAttachmentModel { + fetch: () => void; +} + +interface WPMediaFrame { + on: (event: string, callback: () => void) => void; + off: (event: string, callback: () => void) => void; + open: () => void; + close: () => void; + state: () => WPMediaState; + $el: { + attr: (key: string, value: string) => void; + parent: () => { parent: () => { remove: () => void } }; + }; +} + +declare global { + interface Window { + Alpine: AlpineType; + TutorComponentRegistry: typeof TutorComponentRegistry; + TutorLessonPlayer?: Plyr; + TutorCore: TutorCore & { + toast?: ToastService; + security?: { + escapeHtml: (text: string) => string; + escapeAttr: (text: string) => string; + }; + nonce?: { + getNonceData: (sendKeyValue?: boolean) => Record | { key: string; value: string }; + }; + drawOnImage?: { + init: (options: { + image: HTMLImageElement | null; + canvas: HTMLCanvasElement; + hiddenInput?: HTMLInputElement | null; + brushSize?: number; + strokeStyle?: string; + initialMaskUrl?: string; + onMaskChange?: (value: string) => void; + interactionRoot?: HTMLElement | null; + activateOnHover?: boolean; + }) => { destroy: () => void }; + DEFAULT_BRUSH_SIZE?: number; + DEFAULT_STROKE_STYLE?: string; + }; + }; + + // Legacy functions (deprecated) + tutor_get_nonce_data: (sendKeyValue?: boolean) => Record | { key: string; value: string }; + tutor_toast: (title: string, description?: string, type?: ToastType, autoClose?: boolean) => void; + tutor_esc_html: (text: string) => string; + tutor_esc_attr: (text: string) => string; + defaultErrorMessage: string; + + // WordPress i18n and media + wp: { + i18n: { + __(text: string, domain?: string): string; + [key: string]: any; + }; + media: ((options: any) => WPMediaFrame) & { + attachment: (id: number) => WPMediaAttachmentModel; + [key: string]: any; + }; + [key: string]: any; + }; + + // WordPress editor (TinyMCE and QuickTags) + tinymce: { + get(id: string): any; + [key: string]: any; + }; + quicktags?: unknown; + + // Tutor object from PHP (extend existing type, don't redeclare) + _tutorobject?: Record & { + nonce_key?: string; + ajaxurl?: string; + tutor_url?: string; + wp_date_format?: string; + is_legacy_learning_mode?: boolean; + }; + } +} + +declare const __TUTOR_TEXT_DOMAIN__: string; diff --git a/assets/core/ts/index.ts b/assets/core/ts/index.ts new file mode 100644 index 0000000000..fdb3b7219a --- /dev/null +++ b/assets/core/ts/index.ts @@ -0,0 +1,177 @@ +import collapse from '@alpinejs/collapse'; +import focus from '@alpinejs/focus'; +import Alpine from 'alpinejs'; + +import { TutorComponentRegistry } from '@Core/ts/ComponentRegistry'; +import { accordionMeta } from '@Core/ts/components/accordion'; +import { copyToClipboardMeta } from '@Core/ts/components/copy-to-clipboard'; +import { iconMeta } from '@Core/ts/components/icon'; +import { modalMeta } from '@Core/ts/components/modal'; +import { passwordInputMeta } from '@Core/ts/components/password-input'; +import { playerMeta } from '@Core/ts/components/player'; +import { popoverMeta } from '@Core/ts/components/popover'; +import { previewTriggerMeta } from '@Core/ts/components/preview-trigger'; +import { readMoreMeta } from '@Core/ts/components/read-more'; +import { starRatingMeta } from '@Core/ts/components/star-rating'; +import { staticsMeta } from '@Core/ts/components/statics'; +import { statusSelectMeta } from '@Core/ts/components/status-select'; +import { tabsMeta } from '@Core/ts/components/tabs'; +import { toastMeta } from '@Core/ts/components/toast'; +import { tooltipMeta } from '@Core/ts/components/tooltip'; +import { wpEditorMeta } from '@Core/ts/components/wp-editor'; +import { tutorConfig } from '@Core/ts/config/config'; +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; +import { registerLegacyFunctions } from '@Core/ts/legacy'; +import { formServiceMeta } from '@Core/ts/services/Form'; +import { modalServiceMeta } from '@Core/ts/services/Modal'; +import { preferenceServiceMeta } from '@Core/ts/services/Preference'; +import { queryServiceMeta } from '@Core/ts/services/Query'; +import { toastServiceMeta } from '@Core/ts/services/toast/Toast'; +import { wpMediaServiceMeta } from '@Core/ts/services/WPMedia'; +import { wpGet, wpPost, wpPostForm } from '@Core/ts/utils/api'; +import { getRequiredComponents } from '@Core/ts/utils/component-discovery'; +import { createPriceFormatter, formatPrice } from '@Core/ts/utils/currency'; +import { decodeHtmlEntities } from '@Core/ts/utils/decode-html-entities'; +import endpoints from '@Core/ts/utils/endpoints'; +import { convertToErrorMessage } from '@Core/ts/utils/error'; +import { formatBytes } from '@Core/ts/utils/format'; +import { getNonceData } from '@Core/ts/utils/nonce'; +import { parseNumberOnly } from '@Core/ts/utils/number'; +import { escapeAttr, escapeHtml } from '@Core/ts/utils/security'; +import { makeFirstCharacterUpperCase } from '@Core/ts/utils/string'; +import { isMobileDevice, isRTL } from '@Core/ts/utils/util'; + +Alpine.plugin(focus); +Alpine.plugin(collapse); + +const initializePlugin = async () => { + TutorComponentRegistry.registerAll({ + components: [ + tabsMeta, + iconMeta, + modalMeta, + popoverMeta, + staticsMeta, + accordionMeta, + tooltipMeta, + previewTriggerMeta, + readMoreMeta, + starRatingMeta, + toastMeta, + playerMeta, + passwordInputMeta, + copyToClipboardMeta, + wpEditorMeta, + statusSelectMeta, + ], + services: [ + formServiceMeta, + modalServiceMeta, + queryServiceMeta, + toastServiceMeta, + wpMediaServiceMeta, + preferenceServiceMeta, + ], + }); + + TutorComponentRegistry.registerLazy({ + calendar: () => + import( + /* webpackChunkName: "tutor-calendar" */ + '@Core/ts/components/calendar' + ).then(({ calendarMeta }) => calendarMeta), + + form: () => + import( + /* webpackChunkName: "tutor-form" */ + '@Core/ts/components/form' + ).then(({ formMeta }) => formMeta), + + fileUploader: () => + import( + /* webpackChunkName: "tutor-file-uploader" */ + '@Core/ts/components/file-uploader' + ).then(({ fileUploaderMeta }) => fileUploaderMeta), + + select: () => + import( + /* webpackChunkName: "tutor-select" */ + '@Core/ts/components/select' + ).then(({ selectMeta }) => selectMeta), + + timeInput: () => + import( + /* webpackChunkName: "tutor-time-input" */ + '@Core/ts/components/time-input' + ).then(({ timeInputMeta }) => timeInputMeta), + }); + + await TutorComponentRegistry.loadComponents(getRequiredComponents()); + + TutorComponentRegistry.initWithAlpine(Alpine); + + window.TutorComponentRegistry = TutorComponentRegistry; + window.Alpine = Alpine; + + // Expose TutorCore with services and utilities + // Use Object.assign to extend existing TutorCore instead of overwriting + window.TutorCore = Object.assign(window.TutorCore || {}, { + toast: toastServiceMeta.instance, + security: { + escapeHtml, + escapeAttr, + }, + nonce: { + getNonceData, + }, + api: { + wpPost, + wpPostForm, + wpGet, + }, + error: { + convertToErrorMessage, + }, + string: { + decodeHtmlEntities, + makeFirstCharacterUpperCase, + }, + device: { + isMobileDevice, + isRTL, + }, + number: { + parseNumberOnly, + }, + format: { + formatBytes, + }, + currency: { + createPriceFormatter, + formatPrice, + }, + constants: { + TUTOR_CUSTOM_EVENTS, + }, + config: { + tutorConfig: tutorConfig, + }, + endpoints: endpoints, + }); + + // Register legacy functions for backward compatibility + // This should be called AFTER TutorCore is set up + registerLegacyFunctions(); + + Alpine.start(); +}; + +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + initializePlugin(); + }); +} else { + initializePlugin(); +} + +export { Alpine, TutorComponentRegistry }; diff --git a/assets/core/ts/legacy/index.ts b/assets/core/ts/legacy/index.ts new file mode 100644 index 0000000000..6b08b6ae6f --- /dev/null +++ b/assets/core/ts/legacy/index.ts @@ -0,0 +1,40 @@ +/** + * Legacy compatibility layer for old Tutor LMS window functions + * + * This module provides backward compatibility wrappers that translate + * old API calls to the new core system, ensuring zero breaking changes. + * + * @since 4.0.0 + */ + +import { tutor_get_nonce_data } from './nonce'; +import { tutor_esc_attr, tutor_esc_html } from './security'; +import { tutor_toast } from './toast'; + +/** + * Register legacy functions to the window object for backward compatibility + * + * This function should be called after the core system is initialized + * to ensure all services are available. + * + * @since 4.0.0 + */ +export function registerLegacyFunctions(): void { + // Nonce handling + window.tutor_get_nonce_data = tutor_get_nonce_data; + + // Toast notifications + window.tutor_toast = tutor_toast; + + // Security utilities + window.tutor_esc_html = tutor_esc_html; + window.tutor_esc_attr = tutor_esc_attr; + + // Set default error message from WordPress i18n + if (typeof wp !== 'undefined' && wp.i18n) { + window.defaultErrorMessage = wp.i18n.__('Something went wrong', 'tutor'); + } +} + +// Export all legacy functions for direct import if needed +export { tutor_esc_attr, tutor_esc_html, tutor_get_nonce_data, tutor_toast }; diff --git a/assets/core/ts/legacy/nonce.ts b/assets/core/ts/legacy/nonce.ts new file mode 100644 index 0000000000..ae0028a1b7 --- /dev/null +++ b/assets/core/ts/legacy/nonce.ts @@ -0,0 +1,21 @@ +/** + * Legacy nonce function wrapper for backward compatibility + * + * @since 4.0.0 + */ + +import { getNonceData } from '@Core/ts/utils/nonce'; + +/** + * Legacy tutor_get_nonce_data wrapper + * + * @deprecated Use getNonceData from @Core/ts/utils/nonce instead + * + * @param sendKeyValue - If true, returns {key, value}, otherwise returns {[key]: value} + * @returns Nonce data object + * + * @since 4.0.0 + */ +export function tutor_get_nonce_data(sendKeyValue?: boolean) { + return getNonceData(sendKeyValue); +} diff --git a/assets/core/ts/legacy/security.ts b/assets/core/ts/legacy/security.ts new file mode 100644 index 0000000000..5e3ab4f27d --- /dev/null +++ b/assets/core/ts/legacy/security.ts @@ -0,0 +1,35 @@ +/** + * Legacy security function wrappers for backward compatibility + * + * @since 4.0.0 + */ + +import { escapeAttr, escapeHtml } from '@Core/ts/utils/security'; + +/** + * Legacy tutor_esc_html wrapper + * + * @deprecated Use escapeHtml from @Core/ts/utils/security instead + * + * @param unsafeText - HTML string to escape + * @returns Escaped HTML string + * + * @since 4.0.0 + */ +export function tutor_esc_html(unsafeText: string): string { + return escapeHtml(unsafeText); +} + +/** + * Legacy tutor_esc_attr wrapper + * + * @deprecated Use escapeAttr from @Core/ts/utils/security instead + * + * @param str - String to escape + * @returns Escaped attribute string + * + * @since 4.0.0 + */ +export function tutor_esc_attr(str: string): string { + return escapeAttr(str); +} diff --git a/assets/core/ts/legacy/toast.ts b/assets/core/ts/legacy/toast.ts new file mode 100644 index 0000000000..c4048fa332 --- /dev/null +++ b/assets/core/ts/legacy/toast.ts @@ -0,0 +1,51 @@ +/** + * Legacy tutor_toast wrapper for backward compatibility + * + * @since 4.0.0 + */ + +import type { ToastType } from '@Core/ts/types/toast'; + +/** + * Legacy tutor_toast function that wraps the new core toast service + * + * This function maintains backward compatibility with the old API signature: + * tutor_toast(title, description, type, autoClose) + * + * @deprecated Use window.TutorCore.toast methods instead + * + * @param title - Toast title (used as message if description is empty) + * @param description - Toast description (becomes the main message) + * @param type - Toast type: 'success' | 'error' | 'warning' | 'info' + * @param autoClose - Whether to auto-dismiss (default: true) + * + * @example + * // Legacy usage (still works) + * tutor_toast('Success', 'Item saved successfully', 'success'); + * + * // Translates to new API + * TutorCore.toast.show('Item saved successfully', { type: 'success', title: 'Success' }); + * + * @since 4.0.0 + */ +export function tutor_toast(title: string, description?: string, type: ToastType = 'info', autoClose = true): void { + // Determine message and title for new API + // If description exists, use it as message and title as custom title + // If no description, use title as message with default title + const message = description || title; + const toastTitle = description ? title : undefined; + const duration = autoClose ? 5000 : 0; + + // Use the new toast service + if (window.TutorCore?.toast) { + window.TutorCore.toast.show(message, { + type, + ...(toastTitle && { title: toastTitle }), + duration, + }); + } else { + // Fallback to console if core is not loaded + // eslint-disable-next-line no-console + console.warn('[Tutor Toast] Core toast service not available:', message); + } +} diff --git a/assets/core/ts/plyr.d.ts b/assets/core/ts/plyr.d.ts new file mode 100644 index 0000000000..eb27a3ac7f --- /dev/null +++ b/assets/core/ts/plyr.d.ts @@ -0,0 +1,728 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +// Type definitions for plyr 3.5 +// Project: https://plyr.io +// Definitions by: ondratra +// TypeScript Version: 3.0 + +declare class Plyr { + /** + * Setup a new instance + */ + static setup(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options): Plyr[]; + + /** + * Check for support + * @param mediaType + * @param provider + * @param playsInline Whether the player has the playsinline attribute (only applicable to iOS 10+) + */ + static supported(mediaType?: Plyr.MediaType, provider?: Plyr.Provider, playsInline?: boolean): Plyr.Support; + + constructor(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options); + + /** + * Indicates if the current player is HTML5. + */ + readonly isHTML5: boolean; + + /** + * Indicates if the current player is an embedded player. + */ + readonly isEmbed: boolean; + + /** + * Indicates if the current player is playing. + */ + readonly playing: boolean; + + /** + * Indicates if the current player is paused. + */ + readonly paused: boolean; + + /** + * Indicates if the current player is stopped. + */ + readonly stopped: boolean; + + /** + * Indicates if the current player has finished playback. + */ + readonly ended: boolean; + + /** + * Returns a float between 0 and 1 indicating how much of the media is buffered + */ + readonly buffered: number; + + /** + * Gets or sets the currentTime for the player. The setter accepts a float in seconds. + */ + currentTime: number; + + /** + * Indicates if the current player is seeking. + */ + readonly seeking: boolean; + + /** + * Returns the duration for the current media. + */ + readonly duration: number; + + /** + * Gets or sets the volume for the player. The setter accepts a float between 0 and 1. + */ + volume: number; + + /** + * Gets or sets the muted state of the player. The setter accepts a boolean. + */ + muted: boolean; + + /** + * Indicates if the current media has an audio track. + */ + readonly hasAudio: boolean; + + /** + * Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5. + */ + speed: number; + + /** + * Gets or sets the quality for the player. The setter accepts a value from the options specified in your config. + */ + quality: number; + + /** + * Gets or sets the current loop state of the player. + */ + loop: boolean; + + /** + * Gets or sets the current source for the player. + */ + source: Plyr.SourceInfo; + + /** + * Gets or sets the current poster image URL for the player. + */ + poster: string; + + /** + * Gets or sets the autoplay state of the player. + */ + autoplay: boolean; + + /** + * Gets or sets the caption track by index. 1 means the track is missing or captions is not active + */ + currentTrack: number; + + /** + * Gets or sets the preferred captions language for the player. The setter accepts an ISO twoletter language code. Support for the languages is dependent on the captions you include. + * If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use currentTrack instead. + */ + language: string; + + /** + * Gets or sets the picture-in-picture state of the player. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+. + */ + pip: boolean; + + /** + * Gets or sets the aspect ratio for embedded players. + */ + ratio?: string; + + /** + * Access Elements cache + */ + elements: Plyr.Elements; + + /** + * Returns the current video Provider + */ + readonly provider: Plyr.Provider; + + /** + * Returns the native API for Vimeo or Youtube players + */ + readonly embed?: any; + + readonly fullscreen: Plyr.FullscreenControl; + + /** + * Start playback. + * For HTML5 players, play() will return a Promise in some browsers - WebKit and Mozilla according to MDN at time of writing. + */ + play(): Promise | void; + + /** + * Pause playback. + */ + pause(): void; + + /** + * Toggle playback, if no parameters are passed, it will toggle based on current status. + */ + togglePlay(toggle?: boolean): boolean; + + /** + * Stop playback and reset to start. + */ + stop(): void; + + /** + * Restart playback. + */ + restart(): void; + + /** + * Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used. + */ + rewind(seekTime?: number): void; + + /** + * Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used. + */ + forward(seekTime?: number): void; + + /** + * Increase volume by the specified step. If no parameter is passed, the default step will be used. + */ + increaseVolume(step?: number): void; + + /** + * Increase volume by the specified step. If no parameter is passed, the default step will be used. + */ + decreaseVolume(step?: number): void; + + /** + * Toggle captions display. If no parameter is passed, it will toggle based on current status. + */ + toggleCaptions(toggle?: boolean): void; + + /** + * Trigger the airplay dialog on supported devices. + */ + airplay(): void; + + /** + * Sets the preview thumbnails for the current source. + */ + setPreviewThumbnails(source: Plyr.PreviewThumbnailsOptions): void; + + /** + * Toggle the controls (video only). Takes optional truthy value to force it on/off. + */ + toggleControls(toggle: boolean): void; + + /** + * Add an event listener for the specified event. + */ + on(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void; + + /** + * Add an event listener for the specified event once. + */ + once(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void; + + /** + * Remove an event listener for the specified event. + */ + off(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void; + + /** + * Check support for a mime type. + */ + supports(type: string): boolean; + + /** + * Destroy lib instance + * @param {Function} callback - Callback for when destroy is complete + * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc) + */ + destroy(callback?: (...args: any[]) => void, soft?: boolean): void; +} + +declare namespace Plyr { + type MediaType = 'audio' | 'video'; + type Provider = 'html5' | 'youtube' | 'vimeo'; + type StandardEventMap = { + progress: PlyrEvent; + playing: PlyrEvent; + play: PlyrEvent; + pause: PlyrEvent; + timeupdate: PlyrEvent; + volumechange: PlyrEvent; + seeking: PlyrEvent; + seeked: PlyrEvent; + ratechange: PlyrEvent; + ended: PlyrEvent; + enterfullscreen: PlyrEvent; + exitfullscreen: PlyrEvent; + captionsenabled: PlyrEvent; + captionsdisabled: PlyrEvent; + languagechange: PlyrEvent; + controlshidden: PlyrEvent; + controlsshown: PlyrEvent; + ready: PlyrEvent; + }; + // For retrocompatibility, we keep StandardEvent + type StandardEvent = keyof Plyr.StandardEventMap; + type Html5EventMap = { + loadstart: PlyrEvent; + loadeddata: PlyrEvent; + loadedmetadata: PlyrEvent; + canplay: PlyrEvent; + canplaythrough: PlyrEvent; + stalled: PlyrEvent; + waiting: PlyrEvent; + emptied: PlyrEvent; + cuechange: PlyrEvent; + error: PlyrEvent; + }; + // For retrocompatibility, we keep Html5Event + type Html5Event = keyof Plyr.Html5EventMap; + type YoutubeEventMap = { + statechange: PlyrStateChangeEvent; + qualitychange: PlyrEvent; + qualityrequested: PlyrEvent; + }; + // For retrocompatibility, we keep YoutubeEvent + type YoutubeEvent = keyof Plyr.YoutubeEventMap; + + type PlyrEventMap = StandardEventMap & Html5EventMap & YoutubeEventMap; + + interface FullscreenControl { + /** + * Indicates if the current player is in fullscreen mode. + */ + readonly active: boolean; + + /** + * Indicates if the current player has fullscreen enabled. + */ + readonly enabled: boolean; + + /** + * Enter fullscreen. If fullscreen is not supported, a fallback ""full window/viewport"" is used instead. + */ + enter(): void; + + /** + * Exit fullscreen. + */ + exit(): void; + + /** + * Toggle fullscreen. + */ + toggle(): void; + } + + interface Options { + /** + * Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below. + */ + enabled?: boolean; + + /** + * Display debugging information in the console + */ + debug?: boolean; + + /** + * If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; + * id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured. + * Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'] + */ + controls?: string | string[] | ((id: string, seektime: number, title: string) => unknown) | Element; + + /** + * If you're using the default controls are used then you can specify which settings to show in the menu + * Defaults to ['captions', 'quality', 'speed', 'loop'] + */ + settings?: string[]; + + /** + * Used for internationalization (i18n) of the text within the UI. + */ + i18n?: any; + + /** + * Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself. + */ + loadSprite?: boolean; + + /** + * Specify a URL or path to the SVG sprite. See the SVG section for more info. + */ + iconUrl?: string; + + /** + * Specify the id prefix for the icons used in the default controls (e.g. plyr-play would be plyr). + * This is to prevent clashes if you're using your own SVG sprite but with the default controls. + * Most people can ignore this option. + */ + iconPrefix?: string; + + /** + * Specify a URL or path to a blank video file used to properly cancel network requests. + */ + blankVideo?: string; + + /** + * Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers. + * If the autoplay attribute is present on a
- } - placeholder={__('Select Prerequisite', 'tutor')} - options={ - topics.reduce((topics, topic) => { - topics.push({ - ...topic, - contents: topic.contents.filter((content) => String(content.ID) !== String(quizId)), - }); - - return topics; - }, [] as CourseTopic[]) || [] - } - isSearchable - helpText={__('Select items that should be complete before this item', 'tutor')} - /> - )} - /> - - - - - - -
- ( - - )} - /> - -
- - ( - - )} - /> - - - ( - - )} - /> -
- - - ( - - )} - /> - - ( - - )} - /> - - ( - - )} - /> - -
- - - - - ); -}; - -export default QuizSettings; - -const styles = { - settings: css` - ${styleUtils.display.flex('column')} - gap: ${spacing[24]}; - `, - formWrapper: css` - ${styleUtils.display.flex('column')} - gap: ${spacing[20]}; - `, - timeWrapper: css` - ${styleUtils.display.flex()} - align-items: flex-start; - gap: ${spacing[8]}; - `, - questionLayoutAndOrder: css` - ${styleUtils.display.flex()} - gap: ${spacing[20]}; - - ${Breakpoint.smallMobile} { - flex-direction: column; - } - `, - contentDripLabel: css` - display: flex; - align-items: center; - - svg { - margin-right: ${spacing[4]}; - color: ${colorTokens.icon.success}; - } - `, -}; diff --git a/assets/scss/admin-dashboard/_tutor-admin.scss b/assets/scss/admin-dashboard/_tutor-admin.scss deleted file mode 100644 index b4fb10526c..0000000000 --- a/assets/scss/admin-dashboard/_tutor-admin.scss +++ /dev/null @@ -1,1922 +0,0 @@ -/** -@package: Tutor LMS -@author: Themeum - */ -.tutor-admin { - &-wrap { - margin-left: -20px; - .rtl & { - margin-left: 0px; - margin-right: -20px; - } - - @include breakpoint-max(782) { - margin-left: -10px; - .rtl & { - margin-left: 0px; - margin-right: -10px; - } - } - - // reset - *, - ::after, - ::before { - box-sizing: border-box; - } - - a { - &, - &:hover, - &:active, - &:focus { - text-decoration: none; - } - } - - ul { - list-style: none; - padding: 0; - margin: 0; - - li { - margin: 0; - } - } - } - - &-body { - padding-left: 20px; - padding-right: 20px; - } - - &-container { - max-width: 1160px; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; - - &-lg { - max-width: 1380px; - } - - &-sm { - max-width: 760px; - min-width: 480px; - } - } - - &-header { - box-sizing: border-box; - background: #ffffff; - border-bottom: 1px solid #cdcfd5; - padding: 12px 24px; - - &.is-sticky { - position: sticky; - top: 32px; - z-index: 1024; - - // admin bar - @media screen and (max-width: 782px) { - top: 42px; - } - - @media screen and (max-width: 600px) { - top: 0; - } - } - } -} - -// overrides -.tutor-admin-wrap, -.tutor-admin-post-meta, -.tutor-admin-design-init { - .tutor-form { - &-control { - outline: none !important; - padding: 8px 16px !important; - font-size: 16px !important; - font-weight: 400 !important; - line-height: 1.4 !important; - height: auto !important; - min-height: initial !important; - border-radius: 6px !important; - border: 1px solid var(--tutor-border-color) !important; - - &:focus { - border-color: var(--tutor-color-primary) !important; - box-shadow: unset !important; - outline: none !important; - } - } - - // icon - &-icon { - &:not(.tutor-form-icon-reverse) ~ .tutor-form-control { - padding-left: 40px !important; - - .rtl & { - padding-left: 16px !important; - padding-right: 40px !important; - } - } - - &-reverse ~ .tutor-form-control { - padding-right: 40px !important; - - .rtl & { - padding-right: 16px !important; - padding-left: 40px !important; - } - } - } - } - - // select - select.tutor-form-control, - .tutor-form-select { - padding-right: 36px !important; - margin: 0px; - } -} - -table.tutor-table.tutor-table-with-checkbox { - .td-checkbox input[type='checkbox'] { - margin: 0; - } -} - -// Hide empty text link from dashboard menu. -#adminmenu { - & li a[href=tutor-setup] { - display: none; - } -} - -#toplevel_page_tutor { - a:has( > .tutor-admin-menu-separator){ - pointer-events: none; - margin: 8px 12px; - padding: 0!important; - height: 1px; - overflow: hidden; - background: #4A5257; - color: transparent; - } -} - -body.tutor-backend { - background-color: #f5f5f5; -} - -/*---------------------------------- - Component containers -----------------------------------*/ - -body.tutor-backend-tutor_settings #wpbody-content { - min-height: 100vh; -} - -.ui-datepicker-buttonpane.ui-widget-content { - padding-top: 6px; - background: #ffffff; - color: #222222; - display: flex; - gap: 10px; - button[class^="ui-datepicker-"] { - padding: 2px 6px; - border-radius: 3px; - display: flex; - } -} - -.ui-widget-content a { - color: #222222; -} - -.ui-widget-header { - color: #222222; - font-weight: bold; - a { - color: #222222; - } -} - -/* Interaction states - ----------------------------------*/ - -.ui-state-default, -.ui-widget-content .ui-state-default, -.ui-widget-header .ui-state-default { - border: 1px solid #d3d3d3; - background: #e6e6e6; - font-weight: normal; - color: #555555; -} - -/* Interaction Cues - ----------------------------------*/ - -.ui-state-highlight, -.ui-widget-content .ui-state-highlight, -.ui-widget-header .ui-state-highlight { - border: 1px solid #fcefa1; - background: #fbf9ee; - color: #363636; -} - -.tutor-option-nav-tabs li { - position: relative; - display: inline-block; - margin-right: -1px; - &:last-child:after { - content: ''; - } - a { - display: block; - font-weight: bold; - text-decoration: none; - background: #fff; - padding: 5px 10px; - border: 1px solid #dddddd; - &:focus { - box-shadow: none; - } - } - .current a { - color: #333333; - } -} - -/** -* Option Field -*/ - -.tutor-hide-option{ - display: none!important; -} - -.tutor-option-no-bottom-border{ - border-bottom: 0!important; - padding-bottom: 0!important; -} - -.tutor-option-field-row { - border-bottom: 1px solid #e4e4e4; - padding: 20px 0; - font-size: 14px; - line-height: 1.3; - - &.tutor-d-flex { - display: flex; - } - - &.tutor-d-block { - display: block; - } -} - -.tutor-option-field-row:last-child { - border-bottom: none; -} - -.tutor-option-field-row input[type='text'], -.tutor-option-field-row input[type='email'], -.tutor-option-field-row input[type='number'], -.tutor-option-field-row input[type='password'], -.tutor-option-field-row textarea { - &:last-child { - margin-right: 0; - } - background-color: #fff; - border: 1px solid #ddd; - border-radius: 3px; - box-shadow: none; - color: #333; - display: inline-block; - vertical-align: middle; - padding: 7px 12px; - margin: 0 10px 0 0; - width: 400px; - min-height: 35px; -} - -.tutor_lesson_modal_form .tutor-option-field-row input[type='text'], -.tutor_lesson_modal_form .tutor-option-field-row input[type='email'], -.tutor_lesson_modal_form .tutor-option-field-row input[type='number'], -.tutor_lesson_modal_form .tutor-option-field-row input[type='password'], -.tutor_lesson_modal_form .tutor-option-field-row textarea { - width: 100%; - display: block; -} - -.tutor-option-field { - display: block; - margin: 0 0 0 200px; - max-width: 800px; -} - -.rtl .tutor-option-field { - margin: 0 200px 0 0; -} - -.tutor_lesson_modal_form .tutor-option-field { - display: block; - margin: 0; - max-width: none; -} - -.tutor-option-field-label { - display: block; - float: left; - width: 200px; -} - -.rtl .tutor-option-field-label { - float: right; -} - -.tutor_lesson_modal_form .tutor-option-field-label { - display: block; - float: none; - width: 100%; - margin-bottom: 15px; -} - -.tutor-option-field-label label { - display: block; - font-weight: 600; -} - -.tutor-option-field p.desc { - font-style: italic; - color: #666; - font-size: 12px; - line-height: 1.5; -} - -.tutor-option-field-row h2 { - color: #444; - font-size: 18px; - font-weight: 700; - margin: 0; -} - -.tutor-option-field-row .option-media-wrap { - margin-bottom: 10px; -} - -.tutor-option-field-row .option-media-wrap img { - max-height: 100px; - width: auto; - padding: 5px; - border: 1px solid #cccccc; -} - -/** - Group Field Option - */ - -.tutor-option-group-field { - display: inline-block; - vertical-align: top; -} - -.tutor-option-group-field input[type='text'], -.tutor-option-group-field input[type='email'], -.tutor-option-group-field input[type='number'], -.tutor-option-group-field input[type='password'], -.tutor-option-group-field textarea, -.tutor-option-group-field select { - width: 100px; - margin-right: 5px; -} - -.option-type-radio-wrap { - margin-top: 0; -} - -/** - * Course adding page - * Course Builder - */ - -p.course-empty-content { - padding-left: 20px; -} - -.ui-sortable-placeholder { - visibility: visible; - background-color: #dddd; -} - -/** - Instructor - */ - -.tutor-required-fields { - color: #f13a3a; -} - -/** - Meta Box Heading - */ - -.tutor-status-context { - padding: 5px 10px; - margin: 5px 0; - display: inline-block; -} - -.tutor-status-pending-context, -.attempt_started { - background-color: #eeeeee; -} - -.tutor-status-approved-context, -.tutor-button.button-success, -.tutor-status-completed { - background-color: var(--tutor-color-success); - color: #ffffff; - border-radius: 2px; -} - -.tutor-status-blocked-context, -.attempt_timeout, -.tutor-button.button-danger { - background-color: #ff0000; - color: #ffffff; - border-radius: 2px; -} - -.tutor-status-approved-context, -.tutor-status-blocked-context { - display: inline-block; -} - -table.tutor_status_table td.help { - width: 1em; -} - -table.tutor_status_table td:first-child { - width: 25%; -} - -table.tutor_status_table h2 { - font-size: 16px; - margin: 0; -} - -table.tutor_status_table td mark.yes, -table.tutor_status_table th mark.yes { - color: var(--tutor-color-success); - background-color: transparent; -} - -.tutor-text-avatar { - border-radius: 50%; - width: 40px; - min-width: 40px; - height: 40px; - text-align: center; - display: block; - line-height: 40px; - color: #ffffff; - font-size: 14px; -} - -.tutor_original_question { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - margin-bottom: 5px; - padding: 20px; -} - -.tutor_original_question .question-left { - -webkit-box-flex: 0; - -ms-flex: 0 0 60px; - flex: 0 0 60px; -} - -.tutor_original_question .question-left img { - max-width: 60px; - height: auto; - margin-right: 10px; - border: 1px solid #eeee88; - padding: 3px; -} - -.question-right { - width: 100%; -} - -.tutor_admin_answers_list_wrap .tutor_original_question { - margin-left: 50px; -} - -// @todo: will be removed -.tutor-announcement { - border: 1px solid #eee; - padding: 10px; - margin-bottom: 10px; -} - -.tutor-label-success { - background-color: var(--tutor-color-success); - color: #ffffff; - padding: 3px 7px; -} - -.tutor-addons .addon-regular-price { - color: #cccccc; - padding: 3px; -} - -.tutor-addons .addon-current-price { - color: var(--tutor-color-success); - font-size: 18px; - padding: 3px; -} - -.tutor-addons-last-checked-time { - color: #6f5757 !important; -} - -.tutor-addons .wp-filter { - margin: 10px 0 0; -} - -a.addon-buynow-link { - background: var(--tutor-color-primary); - color: #fff; - padding: 5px 10px; - display: inline-block; -} - -/* RTL Style for name and desc */ - -.tutor-lms-pro_page_tutor-addons.rtl .plugin-card .desc, -.tutor-lms-pro_page_tutor-addons.rtl .plugin-card .name { - margin-right: 148px !important; -} - -.tutor-lms-pro_page_tutor-addons.rtl .plugin-card .desc { - margin-left: 0 !important; -} - -.tutor-lms-pro_page_tutor-addons.rtl .plugin-card .name { - margin-left: 53px !important; -} - -.required-plugin-cards { - background: #fff8e5; - padding: 12px 20px; -} - -.required-plugin-cards p { - margin: 0; -} - -/** - Quiz-question - */ - -.quiz-question-form-wrap { - margin-top: 20px; - margin-bottom: 20px; -} - -.quiz-question-flex-wrap, -.tutor-flex-row { - display: flex; - flex-direction: row; -} - -.tutor-flex-col { - margin: 0 20px; -} - -.tutor-flex-col:first-child { - margin-left: 0; -} - -.tutor-flex-col:last-child { - margin-right: 0; -} - -.tutor-add-question-wrap { - margin: 20px 0; - background-color: #f4f4f4; - padding: 10px; -} - -.question-actions-wrap { - padding-right: 0 !important; -} - -.question-actions-wrap a { - display: inline-block; -} - -.tutor-loading-icon-wrap.button { - vertical-align: unset; - border: none; - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} - -.tutor-info-msg, -.tutor-success-msg, -.tutor-warning-msg, -.tutor-error-msg { - margin: 10px 0; - padding: 10px; - border-radius: 3px 3px 3px 3px; -} - -.tutor-info-msg { - color: var(--tutor-color-primary); - background-color: #bef; - border: 1px solid var(--tutor-color-primary); -} - -.tutor-success-msg { - color: var(--tutor-color-success); - background-color: #dff2bf; - border: 1px solid var(--tutor-color-success); -} - -.tutor-warning-msg { - color: #9f6000; - background-color: #feefb3; - border: 1px solid #9f6000; -} - -.tutor-error-msg { - color: #d8000c; - background-color: #fbdcdc; - border: 1px solid #d8000c; -} - -.quiz-modal-btn-cancel, -.quiz-modal-btn-back { - color: #4b5981; - border: 1px solid #d4dadb; -} - -/*end notice*/ - -/* .tutor-quiz-builder-group */ - -.tutor-quiz-builder-group { - margin-bottom: 25px; -} - -.tutor-quiz-builder-group > p.warning { - color: red; - font-size: 12px; -} - -.tutor-quiz-builder-group > p.help { - color: #a4a4a4; - font-size: 12px; - margin-top: 7px; -} - -.tutor-quiz-builder-group h4 { - font-size: 14px; - color: #393c40; - font-weight: 600; - margin: 0 0 15px; -} - -.tutor-quiz-builder-row { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin-left: -10px; - margin-right: -10px; -} - -.tutor-quiz-builder-col { - padding-left: 10px; - padding-right: 10px; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.tutor-quiz-builder-col.auto-width { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} - -.tutor-quiz-builder-group textarea, -.tutor-quiz-builder-group input[type='text'], -.tutor-quiz-builder-group input[type='email'], -.tutor-quiz-builder-group input[type='number'], -.tutor-quiz-builder-group input[type='password'] { - line-height: 40px; - padding: 5px 0; - text-indent: 15px; - background: #fff; - display: inline-block; - border: 1px solid #dedede; - border-radius: 3px; - -webkit-box-shadow: none; - box-shadow: none; - height: 40px; - margin: 0; - width: 100%; - color: #393c40; - font-size: 14px; -} - -.tutor-quiz-builder-group textarea:focus, -.tutor-quiz-builder-group input[type='text']:focus, -.tutor-quiz-builder-group input[type='email']:focus, -.tutor-quiz-builder-group input[type='number']:focus, -.tutor-quiz-builder-group input[type='password']:focus { - border-color: var(--tutor-color-primary); -} - -.tutor-quiz-builder-group textarea { - height: 80px; - resize: none; - text-indent: 0; - padding: 11px 15px; - line-height: 22px; -} - -.tutor-quiz-builder-group textarea[name='quiz_description'] { - height: 150px; -} - -.tutor-quiz-builder-group select { - border: 1px solid #ccc; - -webkit-box-shadow: none; - box-shadow: none; - height: 42px !important; - line-height: 1; - padding: 0 24px 0 12px !important; - margin: 0; -} - -.question-type-pro { - color: #fff; - font-size: 9px; - right: 11px; - position: absolute; - top: 50%; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); -} - -.quiz-builder-question { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - background: #fff; - padding: 10px; - border: 1px solid #e2e2e2; - border-radius: 3px; - max-width: calc(100% - 52px); -} - -.quiz-builder-question .question-sorting { - margin-right: 10px; - line-height: 22px; -} - -.quiz-builder-question .question-sorting i { - display: block; - line-height: 24px; -} - -.quiz-builder-question .question-edit-icon { - line-height: 22px; -} - -.quiz-builder-question .question-title { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - line-height: 22px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - margin-right: 10px; -} - -.quiz-builder-question .question-icon { - -webkit-box-flex: 0; - -ms-flex: 0 0 155px; - flex: 0 0 155px; -} - -.quiz-builder-qustion-trash a { - display: block; - padding: 0 0 0 10px; - font-size: 20px; - color: rgba(57, 60, 64, 0.4); - line-height: 44px; -} - -.tutor-quiz-answer-wrap { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.tutor-quiz-answer-trash-wrap a.answer-trash-btn { - padding: 0 10px; - display: inline-block; - line-height: 44px; -} - -span.tutor-quiz-answer-title { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.tutor-quiz-answer-media .option-media-preview { - margin-bottom: 20px; -} - -.tutor-quiz-answer-media .option-media-preview img { - max-width: 80px; - height: auto; -} - -.tutor-question-answer-image { - margin-right: 10px; -} - -.tutor-question-answer-image img { - max-height: 25px; - width: auto; -} - -/** - #End Quiz Modal - */ - -.tutor-available-quizzes .added-quiz-item { - background-color: #f5f5f5; - padding: 10px; - margin-bottom: 2px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.tutor-available-quizzes .added-quiz-item .quiz-name { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.tutor-quiz-delete-btn { - color: #ff0000; -} - -p.quiz-search-suggest-text { - margin-top: 30px; - font-style: italic; - font-size: 12px; -} - -span.result-pass { - background-color: var(--tutor-color-success); - color: #fff; - padding: 3px 5px; - border-radius: 2px; -} - -span.result-fail { - color: #ff0000; -} - -span.result-review-required { - background: #f5b30d; - color: #fff; - padding: 3px 5px; - border-radius: 2px; -} - -.tutor-emails-lists-wrap { - background-color: #ffffff; - padding: 20px; -} - -.tutor-emails-lists-wrap .wp-list-table td { - padding: 10px 20px; -} - -.image-matching-item { - -webkit-box-flex: 0; - -ms-flex: 0 0 50px; - flex: 0 0 50px; - margin-right: 10px; -} - -.image-matching-item p { - margin-bottom: 5px; - margin-top: 0; - color: #878a8f; -} - -.image-matching-item img { - max-width: 80px; -} - -span.filled_dash_unser { - font-weight: bold; - text-decoration: underline; - margin: 0 5px; -} - -/** - Uninstall - */ - -.wrap.tutor-uninstall-wrap { - background: #fff; - padding: 20px; -} - -.tutor-uninstall-btn-group { - margin: 50px 0; -} - -.lesson-modal-field.tutor-lesson-modal-title-wrap { - width: 95%; -} - -.tutor-lesson-modal-title-wrap input { - width: 100%; -} - -.tutor-lesson-modal-wrap .modal-footer { - padding: 10px 20px; - background-color: #fff; - width: 100%; - position: sticky; - bottom: 0; - position: -webkit-sticky; -} - -.tutor-option-field .tutor-lesson-edit-feature-img { - width: 100px; - position: relative; -} - -.tutor-option-field .tutor-lesson-edit-feature-img img { - width: 100%; - height: auto; -} - -a:has(> span.tutor-get-pro-text ) { - background-color: orange; - font-weight: 600; - color: #000 !important; - - &:hover{ - background-color: orange!important; - color: #000 !important; - } -} - -.tutor-text-orange { - color: orange; -} - -.updating-icon:before { - font-family: 'tutor'; - margin-right: 5px; - content: '\e91d'; - -webkit-animation: spin 1s steps(8) infinite; - animation: spin 1s steps(8) infinite; - display: inline-block; -} - -.tutor-notice-warning { - background-color: #fcf8e3; - border-color: #faebcc; - padding: 20px; - margin-bottom: 10px; -} - -/** - Tutor Notice - */ - -.tnotice { - text-align: left; - padding: 10px 0; - background-color: #fff; - border-radius: 4px; - position: relative; - margin-bottom: 10px; -} - -.tnotice:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 4px; - height: 100%; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.tnotice__icon { - position: absolute; - top: 50%; - left: 22px; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - width: 14px; - height: 14px; - padding: 7px; - border-radius: 50%; - display: inline-block; - color: #fff; - text-align: center; - line-height: 11px; -} - -.tnotice__type { - color: #3e3e3e; - font-weight: 700; - margin-top: 0; - margin-bottom: 0; -} - -.tnotice__message { - font-size: 14px; - margin-top: 0; - margin-bottom: 0; - color: #878787; -} - -.tnotice__content { - padding-left: 70px; - padding-right: 60px; -} - -.tnotice__close { - position: absolute; - right: 22px; - top: 50%; - width: 14px; - cursor: pointer; - height: 14px; - fill: #878787; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); -} - -.tnotice--success .tnotice__icon { - background-color: #2bde3f; -} - -.tnotice--success:before { - background-color: #2bde3f; -} - -.tnotice--blue .tnotice__icon { - background-color: #1d72f3; -} - -.tnotice--blue:before { - background-color: #1d72f3; -} - -.tnotice--danger .tnotice__icon { - background-color: #f31e1c; -} - -.tnotice--danger:before { - background-color: #f31e1c; -} - -/*************************** - * Quiz attempts table - **************************/ - -.tutor-quiz-attempt-info-row { - .attempt-view-bottom, - .attempt-view-top { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - .attempt-info-col { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - max-width: 30%; - } - } - .attempt-view-top { - padding-bottom: 30px; - margin-bottom: 30px; - border-bottom: 1px solid #dcdfe5; - } - .attempt-view-bottom { - margin-bottom: 60px; - .attempt-info-col { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - } - } - .attempt-user-details { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - .attempt-user-avatar { - padding-right: 20px; - img { - display: block; - width: 70px; - height: 70px; - border-radius: 50%; - } - } - .attempt-info-content h4 { - font-size: 18px; - } - } - .attempt-info-content { - span { - &.result-pass, - &.result-fail { - background: #df3247; - font-size: 14px; - font-weight: 400; - color: #fff; - padding: 1px 4px; - margin-right: 13px; - border-radius: 2px; - } - &.result-pass { - background: var(--tutor-color-success); - } - } - h4, - h5 { - font-size: 14px; - line-height: 25px; - margin: 0; - color: #7a7f85; - font-weight: 400; - } - h4 { - &, - a { - font-weight: 700; - color: var(--tutor-body-color); - margin-top: 7px; - } - } - } -} - -.attempt-review-notice-wrap { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - margin-bottom: 60px; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.attempt-review-notice-wrap p { - margin: 0; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.attempt-review-notice-wrap p.attempt-review-notice i { - font-size: 16px; - color: #f5c813; - margin-right: 9px; -} - -.attempt-review-notice-wrap p.attempt-review-at > span { - color: var(--tutor-color-primary); - margin-right: 7px; - font-size: 16px; -} - -.attempt-review-notice-wrap p > strong { - font-weight: 400; - margin-right: 5px; -} - -.quiz-attempt-answers-wrap { - table { - th { - background: #fcfcfc; - font-size: 12px; - text-transform: inherit; - } - td { - background-color: #fff; - } - th, - td { - padding: 17px 20px !important; - border-top: 1px solid #eaeaea; - border-bottom: 1px solid #eaeaea; - vertical-align: middle; - text-align: left; - p { - margin: 0; - } - } - - .quiz-manual-review-action { - border: 1px solid #d4dadb; - color: #d4dadb; - height: 30px; - width: 30px; - border-radius: 2px; - font-size: 13px; - display: inline-block; - text-align: center; - line-height: 30px; - -webkit-transition: 300ms; - transition: 300ms; - text-decoration: none; - - &:first-child { - &:hover { - border: 1px solid var(--tutor-color-success); - color: var(--tutor-color-success); - } - } - - &:last-child { - &:hover { - border: 1px solid #df3247; - color: #df3247; - } - } - - &:not(:last-child) { - margin-right: 17px; - } - } - - .quiz-incorrect-answer-text, - .quiz-correct-answer-text { - i { - font-size: 12px; - height: 20px; - width: 20px; - text-align: center; - line-height: 20px; - background: var(--tutor-color-success); - color: #fff; - display: inline-block; - border-radius: 2px; - margin-right: 6px; - } - } - .quiz-incorrect-answer-text i { - background: #df3247; - font-size: 10px; - } - } -} - -/** - Upgrade Notice - */ - -#tutor-update .dummy { - display: none; -} - -#tutor-update .tutor_plugin_update_notice { - padding: 20px 0 !important; -} - -#tutor-update .tutor_plugin_update_notice { - font-weight: 400; - background: #fff8e5 !important; - border-left: 4px solid #ffb900; - border-top: 1px solid #ffb900; - padding: 9px 0 9px 12px !important; - margin: 0 -12px 0 -16px !important; -} - -#tutor-update .tutor_plugin_update_notice .version::before { - content: '\f348'; - display: inline-block; - font: 400 18px/1 dashicons; - speak: none; - margin: 0 8px 0 -2px; - vertical-align: top; -} - -.select2-dropdown.increasezindex { - z-index: 9999999999999; -} - -/*! - * jQuery UI Datepicker 1.8.10 - * http://jqueryui.com - * - * Copyright 2012 jQuery Foundation and other contributors - * Released under the MIT license. - * http://jquery.org/license - * - * http://docs.jquery.com/UI/Datepicker#theming - */ - -/** END Calender */ - -/** - * report.css - *Moved report.css from pro add to here - */ - -h2.tutor-page-heading { - background-color: #ffffff; - padding: 30px !important; - margin: 0 !important; - border-bottom: 1px solid #ecedef; -} - -.report-main-wrap h3 { - font-weight: 300; - font-size: 20px; -} - -.tutor-icon-star-full, -.tutor-icon-star-line { - color: #ffd700; -} - -.date-range-input { - position: relative; - margin-right: 10px; -} - -.date-range-input:last-child { - margin-right: 0; -} - -.date-range-input input { - border: 1px solid #d7dadf; - -webkit-box-shadow: none; - box-shadow: none; - line-height: 32px; - margin: 0; - padding-right: 30px; -} - -.date-range-input i.tutor-icon-calendar { - position: absolute; - right: 10px; - top: 13px; -} - -.date-range-input button { - background-color: #3057d5; - color: #ffffff; - border: none; - line-height: 39px; - padding: 0 15px; -} - -/** END Report.css */ - -/** - *END Alert CSS - */ - -/** - Tools Nav - */ - -.tutor-nav-tab-wrapper { - margin-bottom: 10px; -} - -.nav-tab-item { - float: left; - border: 1px solid #ccc; - border-bottom: none; - margin-left: 0.5em; - padding: 10px 14px; - font-size: 14px; - line-height: 1.33; - font-weight: 600; - background: #e5e5e5; - color: #555; - text-decoration: none; - white-space: nowrap; -} - -.nav-tab-item:first-child { - margin-left: 0; -} - -.nav-tab-item:focus, -.nav-tab-item:hover { - background-color: #fff; - color: #444; -} - -.nav-tab-item-active, -.nav-tab-item:focus:active { - -webkit-box-shadow: none; - box-shadow: none; -} - -.nav-tab-item-active { - margin-bottom: -1px; - color: #444; -} - -.nav-tab-item-active, -.nav-tab-item-active:focus, -.nav-tab-item-active:focus:active, -.nav-tab-item-active:hover { - border-bottom: 1px solid #f1f1f1; - background: #f1f1f1; - color: #000; -} - -/** - * END Tools - */ - -.tutor-quiz-feedback-option-option-title { - margin-bottom: 10px !important; -} - -.tutor-quiz-feedback-option-subtitle { - margin: 0 !important; - font-size: 12px; - line-height: 1.67; - color: #505469; -} - -.tutor-quiz-feedback-option-subtitle a { - font-weight: 500; - color: inherit; - text-decoration: underline !important; -} - -/* Fixing course builder css overlap issue */ - -#tutor-instructors h2 { - display: block; -} - -#settings-tab-general .tutor-option-field-row input[type='number'] { - width: 185px; -} - -/* Instructor list layout style */ - -.instructor-layout-templates-fields { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.instructor-layout-template { - max-width: 150px; - padding: 5px; - margin: 3px; -} - -.instructor-layout-template img { - max-width: 100%; - height: auto; - display: block; - border: 6px solid transparent; - -webkit-transition: border-color 400ms; - transition: border-color 400ms; -} - -.instructor-layout-template.selected-template img, -.instructor-layout-template:hover img { - border: 6px solid #3057d6; -} - -/*override default modal on announcement*/ - -.tutor-accouncement-update-modal .modal-header, -.tutor-announcement-create-modal .modal-header { - padding-right: 15px !important; -} - -.tutor-accouncement-update-modal .tutor-modal-content, -.tutor-announcement-create-modal .tutor-modal-content { - border-radius: 20px !important; -} - -/** - * announcement css - * @since v1.7.9 - */ - -.tutor-admin-search-box-container { - display: flex; - justify-content: space-between; - align-items: flex-end; - flex-wrap: wrap; - margin-top: 45px; -} - -.tutor-admin-search-box-container > div:nth-child(1) { - margin-right: 40px; - position: relative; -} - -.tutor-admin-search-box-container > div:nth-child(1) { - flex: 2; -} - -.tutor-admin-search-box-container > div:nth-child(2), -.tutor-admin-search-box-container > div:nth-child(3), -.tutor-admin-search-box-container > div:nth-child(4) { - flex: 1.5; -} - -.tutor-admin-search-box-container > div:not(:last-child) { - margin-right: 30px; -} - -.tutor-admin-search-box-container .tutor-report-search-btn { - position: absolute; - width: 40px; - height: 40px; - bottom: 0; - right: 0; - border: 0; - background: transparent; - color: #3e64de; - font-size: 20px; - cursor: pointer; - outline: none; -} - -.tutor-admin-search-box-container > div:nth-child(1) input { - /* height: 50px; */ - padding-right: 45px; -} - -.tutor-admin-search-box-container input[type='text'], -.tutor-admin-search-box-container select { - width: 100%; - height: 40px; - border-radius: 3px; - border: solid 1px #dcdce1; - background-color: #ffffff; - padding: 0 14px; - transition: 0.2s; -} - -.tutor-admin-search-box-container .date-range-input i.tutor-icon-calendar { - position: absolute; - width: 42px; - height: 40px; - right: 0; - top: 0; - color: #3e64de; - font-size: 18px; - text-align: center; - line-height: 40px; -} - -.tutor-admin-search-box-container .menu-label { - font-size: 14px; - font-weight: 400; - color: #737787; - margin-bottom: 7px; -} - -.tutor-admin-search-box-container > div:nth-child(4) input::-webkit-input-placeholder { - color: #3f435b; - font-size: 15px; -} - -.tutor-admin-search-box-container > div:nth-child(1) input::-webkit-input-placeholder { - font-size: 16px; - font-weight: 400; - color: #737787; -} - -.tutor-admin-search-box-container input[type='text']:hover, -.tutor-admin-search-box-container input[type='text']:focus, -.tutor-admin-search-box-container select:hover, -.tutor-admin-search-box-container select:focus, -.tutor-date-range-wrap .date-range-input input:hover, -.tutor-date-range-wrap .date-range-input input:focus { - border-color: var(--tutor-color-primary) !important; - box-shadow: none !important; - outline: none !important; -} - -@media (max-width: 767px) { - .tutor-admin-search-box-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - grid-gap: 15px; - } - .tutor-admin-search-box-container > div { - margin-right: 0 !important; - } -} - -@media (max-width: 991px) { - .tutor-list-wrap { - overflow-x: scroll; - } -} - -/** - * Quiz attempt page css - * @since 1.9.5 - */ - -.tutor-sorting-bulk-action-wrapper { - display: flex; - justify-content: space-between; - align-items: flex-end; - padding: 0px 0px 30px 0px; -} - -.tutor-sorting-bulk-action-wrapper .tutor-admin-search-box-container { - width: 70%; -} - -.tutor-admin-search-box-container .tutor-search-form-group { - flex: 18% !important; -} - -.report-course-list-wrap .detail .status span { - font-size: 14px; - font-weight: 300; - line-height: 1; - color: #737787; - margin-left: 25px; - padding-left: 14px; - position: relative; - display: inline-flex; - align-items: center; -} - -.report-course-list-wrap .detail .status span::before { - content: ''; - position: absolute; - width: 8px; - height: 8px; - background: #b9bac3; - border-radius: 50%; - left: 0; -} - -.report-course-list-wrap .detail .status span { - margin-left: 0; - padding-left: 16px; -} - -.report-course-list-wrap .detail .status span::before { - width: 6px; - height: 6px; -} - -.report-course-list-wrap .detail .status .running::before { - background-color: #3e64de; -} - -.report-course-list-wrap .detail .status .complete::before { - background-color: #7bbc30; -} - -.report-course-list-wrap .detail .heading { - font-size: 16px; - line-height: 1.75; - color: #3f435b; - margin-bottom: 10px; -} - -.report-course-list-wrap .detail { - padding: unset !important; - text-align: left !important; - font-size: 14px !important; - font-weight: 400 !important; -} - -.report-course-list .course-list-details { - display: grid; - grid-auto-flow: column; - grid-auto-columns: 1fr; - grid-gap: 20px; - grid-template-columns: repeat(3, 1fr); -} - -.tutor-list-wrap .no-data-found { - display: flex; - align-items: center; - padding: 0 0 30px 0; -} - -//a-to-z-sorting icon -.tutor-table-rows-sorting { - cursor: pointer; -} - -.a-to-z-sort-icon { - cursor: pointer; -} - -.tutor-entry-content { - > br { - display: none; - } - p:not(:last-child) { - padding-bottom: 20px; - word-wrap: break-word; - } -} - -/* .tutor-table.qna-list-table */ -.tutor-table.qna-list-table { - .tutor-form-feedback.tutor-qna-question-col { - margin-top: 0; - p { - margin: 0; - } - } - a:focus{ - outline: none; - box-shadow: none; - } -} -#tutor-quiz-question-wrapper { - .mce-branding { - display: none; - } -} - -.tutor-pro-badge{ - background: #e5803c; - color: #fff; - font-weight: 400; - border-radius: 16px; - padding: 1px 6px; - font-size: 11px; - display: inline-block; - line-height: 15px; -} - -.tutor-new-menu-badge { - display: inline-block; - font-size: 11px; - line-height: 16px; - font-weight: 400; - color: #fff; - border: 1px solid #596369; - border-radius: 11px; - padding: 0px 6px; -} - -.wp-submenu li a[href="admin.php?page=create-course"] { - display: none!important; -} - -.tutor-form-check-input.tutor-bulk-checkbox, -.tutor-form-check-input#tutor-bulk-checkbox-all { - height: 20px; - width: 20px; -} - -.tutor-text-ellipsis-2-lines { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.tutor-dashboard-list-table { - tr { - th { - border-top: 1px solid #E6E6E6; - border-bottom: 1px solid #F5F5F5; - font-weight: 400; - color: #636363; - background-color: #ffffff; - padding: 14px 12px; - - &:first-child { - border-left: 1px solid #E6E6E6; - padding: 16px; - - .rtl & { - border-left: none; - border-right: 1px solid #E6E6E6; - } - } - - &:last-child { - border-right: 1px solid #E6E6E6; - - .rtl & { - border-right: none; - border-left: 1px solid #E6E6E6; - } - } - - &:nth-child(2) { - padding-left: 0px; - } - } - - td { - border-bottom: 1px solid #F5F5F5; - padding: 16px 12px; - - &:first-child { - border-left: 1px solid #E6E6E6; - padding: 16px; - - .rtl & { - border-left: none; - border-right: 1px solid #E6E6E6; - } - } - - &:last-child { - border-right: 1px solid #E6E6E6; - - .rtl & { - border-right: none; - border-left: 1px solid #E6E6E6; - } - } - - &:nth-child(2) { - padding-left: 0px; - } - } - - &:last-child td { - border-bottom: 1px solid #E6E6E6; - } - } - - .tutor-form-check-input { - border-width: 1px; - } - - .tutor-avatar { - box-shadow: none; - } -} - -.tutor-backend .notice { - margin-left: 0px; - margin-right: 20px; -} diff --git a/assets/scss/admin-dashboard/template-import.scss b/assets/scss/admin-dashboard/template-import.scss deleted file mode 100644 index 39b54171f9..0000000000 --- a/assets/scss/admin-dashboard/template-import.scss +++ /dev/null @@ -1,509 +0,0 @@ -body.tutor-backend-tutor-templates.tutor-lms-pro_page_tutor-templates { - background-color: #f1f1f1; -} - -.tutor-template-preview-device-switcher { - li { - cursor: pointer; - - svg:nth-child(1) { - display: block; - } - - svg:nth-child(2) { - display: none; - } - - &.active { - svg:nth-child(1) { - display: none; - } - - svg:nth-child(2) { - display: block; - } - } - } -} - -.tutor-template-import-wrapper { - img { - width: 100%; - } - - .tutor-template-device-selector { - margin-bottom: 16px; - display: flex; - gap: 10px; - justify-content: center; - } - - .tutor-template-empty-state { - margin-top: 30px; - font-size: 20px; - line-height: 1.5; - } - - // color palette - .all-colors-wrapper { - flex-direction: row; - flex-wrap: wrap; - gap: 2px; - } - - .color-palette { - width: unset !important; - display: grid; - gap: 0px; - grid-template-columns: 1fr 1fr; - grid-template-areas: ". ." ". ."; - border-radius: 6px; - overflow: hidden; - cursor: pointer; - border: 2px solid rgb(0 0 0 / 5%); - box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 2px; - } - - .color-palette.active { - border: 2px solid #5641f3; - box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 2px; - } - - [data-index="0"] { - grid-row-start: span 2; - grid-row-end: span 2; - grid-column-start: span 1; - grid-column-end: span 1; - width: 17px; - height: 18px; - } - - [data-index="1"] { - width: 17px; - height: 9px; - } - - [data-index="2"] { - width: 17px; - height: 9px; - } - - // tutor template shimmer effect - .tutor-template-shimmer-effect { - position: absolute; - inset: 0; - background: #fff; - } - - .tutor-template-shimmer-effect-2 { - display: flex; - flex-direction: column; - gap: 10px; - overflow: hidden; - - >div { - background: #ddd; - border-radius: 6px; - height: 25px; - position: relative; - - &::after { - content: ''; - position: absolute; - top: 0; - left: -150px; - width: 150px; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - animation: tutorTemplateShimmerKeyframe 1.5s infinite; - } - } - - .tutor-template-shimmer-effect-2-box-2 { - width: 60%; - height: 20px; - } - - .tutor-template-shimmer-effect-2-box-3 { - width: 80%; - } - } - - .tutor-template-shimmer-box { - background-color: #e0e0e0; - border-radius: 8px; - position: relative; - overflow: hidden; - display: block; - } - - .tutor-template-shimmer-box::after { - content: ''; - position: absolute; - top: 0; - left: -150px; - width: 150px; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - animation: tutorTemplateShimmerKeyframe 1.5s infinite; - } - - .tutor-template-shimmer-box-large { - height: 50%; - margin-bottom: 10px; - } - - .tutor-template-shimmer-row { - display: flex; - gap: 10px; - height: calc(50% - 10px); - } - - .tutor-template-shimmer-box-small { - flex: 1; - height: 100%; - } - - @keyframes tutorTemplateShimmerKeyframe { - 0% { - left: -150px; - } - - 100% { - left: 100%; - } - } -} - -.tutor-text-truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.tutor-import-item-content-title { - display: flex; - gap: 10px; -} - -.tutor-template-import-area { - max-width: 1200px; - margin: 0 auto; -} - -.tutor-template-import-area-top { - .tutor-template-import-area-top-left { - .tutor-template-area-top-left-icon { - width: 40px; - } - } - - .tutor-template-top-left-heading { - line-height: 28px; - } - - .tutor-template-area-left-text { - line-height: 24px; - margin-top: 2px; - } - - .tutor-template-import-area-top-right { - .tutor-template-search-wrapper { - position: relative; - - svg.tutor-template-search-icon { - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); - } - } - - input { - width: 300px; - height: 40px; - padding: 8px 8px 8px 30px; - gap: 4px; - border-radius: 6px; - border: 1px solid #c3c5cb; - opacity: 0px; - - &::placeholder { - color: #5b616f; - font-size: 16px; - font-weight: 400; - line-height: 24px; - text-align: left; - } - } - } -} - -.tutor-template-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(374px, 1fr)); - gap: 24px; - - @media (max-width: 1370px) { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - } - - @media (max-width: 1170px) { - grid-template-columns: repeat(auto-fit, minmax(274px, 1fr)); - } - - .tutor-template-list-single-template { - border-radius: 6px; - border: 1px solid #e0e2ea; - background: white; - min-height: 350px; - position: relative; - - &:hover { - box-shadow: 0px 6px 20px 0px #1c31681a; - } - - .tutor-template-coming-soon { - font-size: 14px; - background: #efefef; - padding: 2px 8px; - border-radius: 4px; - } - - .tutor-template-list-single-template-inner { - position: relative; - - .tutor-import-template-preview-img { - img { - border-radius: 6px; - } - } - } - - .tutor-template-list-single-template-footer { - - .tutor-import-template-name { - line-height: 26px; - } - - a.tutor-template-preview { - display: flex; - - &:hover { - svg { - path { - fill: #3e64de; - } - } - } - } - } - } -} - -// template preview scss. -.tutor-template-preview-modal { - display: none; - position: fixed; - z-index: 999999; - inset: 0; - - .tutor-template-preview-modal-overlay { - width: 100%; - height: 100%; - position: absolute; - inset: 0; - background: #161616B2; - backdrop-filter: blur(20px); - } - - .tutor-template-preview-modal-back-link { - width: max-content; - cursor: pointer; - - i { - width: 22px; - height: 22px; - border: 1px solid #C3C5CB; - color: #9197A8; - border-radius: 2.25px; - display: flex; - align-items: center; - justify-content: center; - } - - &:hover { - i { - color: var(--tutor-color-primary); - border: 1px solid var(--tutor-color-primary); - } - - div { - font-weight: 500; - font-size: 14px; - line-height: 24px; - letter-spacing: -0.1px; - vertical-align: middle; - color: #000; - } - } - - div { - font-weight: 500; - font-size: 14px; - line-height: 24px; - letter-spacing: -0.1px; - vertical-align: middle; - color: #212327; - } - } -} - -.tutor-template-preview-frame { - width: 100%; - position: relative; - max-width: 1320px; - margin: auto auto; - overflow: auto; - display: flex; - flex-direction: column; - border-radius: 12px; - background: #fff; - padding: 0px 10px 10px 10px; - min-height: 400px; -} - -.tutor-template-preview-frame-header { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr; - padding: 14px 260px 14px 0px; - - .rtl & { - padding: 14px 0px 14px 260px; - } - - h3 { - margin: 0; - } - - ul { - display: flex; - gap: 15px; - margin: 0; - align-items: center; - - i { - font-size: 20px; - cursor: pointer; - color: #33333360; - } - - li { - margin: 0; - - &.active { - i { - color: #3e64de; - } - } - } - } -} - -.tutor-template-preview-close-modal { - font-size: 20px; - cursor: pointer; - color: #333; - z-index: 1000; -} - -.tutor-template-preview-iframe-wrapper { - width: 100%; - height: calc(100vh - 80px); - display: grid; - grid-template-columns: 1fr 180px; - - .tutor-preview-template-name { - font-weight: 500; - font-size: 16px; - line-height: 26px; - letter-spacing: 0px; - vertical-align: middle; - } - - .tutor-droip-color-presets-heading { - font-weight: 400; - font-size: 13px; - line-height: 18px; - letter-spacing: 0px; - vertical-align: middle; - margin: 0px 0px 5px 0px - } - - #droip-color-modes { - padding: 10px 0px 0px 0px; - display: none; - } - - .tutor-template-preview-iframe-parent { - position: relative; - background-color: #F8F8F8; - text-align: center; - border-radius: 8px; - overflow: hidden; - } - - #tutor-template-preview-iframe { - width: 1400px; - height: calc(100% / 0.8); - transform: scale(0.8); - transform-origin: left top; - } - - .tutor-template-preview-import-area { - display: flex; - justify-content: center; - padding-left: 20px; - - .rtl & { - padding-left: 0px; - padding-right: 20px; - } - } -} - -.tutor-template-import-btn-wrapper { - margin-top: 10px; - - button { - width: 100%; - position: relative; - - svg { - width: 15px; - height: 15px; - position: absolute; - right: 0; - top: 0; - transform: translateX(50%) translateY(-50%); - } - } -} - -.tutor-include-demo-courses-toggle { - margin-top: 20px; - gap: 10px; - .tutor-form-check-input { - width: 19px; - height: 19px; - margin-top: -3px; - } - label { - margin-top: -7px; - font-size: 13px; - } -} diff --git a/assets/scss/front/course/_social-share.scss b/assets/scss/front/course/_social-share.scss deleted file mode 100644 index 3266394907..0000000000 --- a/assets/scss/front/course/_social-share.scss +++ /dev/null @@ -1,33 +0,0 @@ -.tutor-social-share-wrap { - button { - margin-right: 16px; - border: none; - padding: 8px 15px; - border-radius: 6px; - color: white; - cursor: pointer; - display: inline-flex; - align-items: center; - @include breakpoint-max(mobile) { - width: 150px; - justify-content: center; - &:not(:first-child) { - margin-top: 10px; - } - } - span { - font-style: normal; - font-weight: 500; - font-size: 15px; - color: #ffffff; - position: relative; - top: 1px; - left: 2px; - } - } - .tutor_share { - &.s_linkedin i { - margin-top: -2px; - } - } -} diff --git a/assets/react/admin-dashboard/quiz-attempts.js b/assets/src/js/admin-dashboard/quiz-attempts.js similarity index 100% rename from assets/react/admin-dashboard/quiz-attempts.js rename to assets/src/js/admin-dashboard/quiz-attempts.js diff --git a/assets/react/admin-dashboard/segments/color-preset.js b/assets/src/js/admin-dashboard/segments/color-preset.js similarity index 100% rename from assets/react/admin-dashboard/segments/color-preset.js rename to assets/src/js/admin-dashboard/segments/color-preset.js diff --git a/assets/react/admin-dashboard/segments/column-filter.js b/assets/src/js/admin-dashboard/segments/column-filter.js similarity index 100% rename from assets/react/admin-dashboard/segments/column-filter.js rename to assets/src/js/admin-dashboard/segments/column-filter.js diff --git a/assets/src/js/admin-dashboard/segments/consent-logs.js b/assets/src/js/admin-dashboard/segments/consent-logs.js new file mode 100644 index 0000000000..375afd5d0b --- /dev/null +++ b/assets/src/js/admin-dashboard/segments/consent-logs.js @@ -0,0 +1,187 @@ +/** + * Consent logs modal functionality for students and instructors. + * + * @since 4.0.0 + */ +const AJAX_URL = window.ajaxurl || window._tutorobject?.ajaxurl || ''; +const AJAX_ACTION = 'tutor_user_consents'; +const NONCE_KEY = window._tutorobject?.nonce_key || '_tutor_nonce'; +const NONCE_VALUE = window._tutorobject?.[NONCE_KEY] || ''; +const overlay = document.getElementById('tutor-consent-logs-modal'); +const modalBody = overlay?.querySelector('.tutor-consent-logs-modal-body'); +const downloadBtn = overlay?.querySelector('[data-consent-logs-download]'); +const userNameEl = overlay?.querySelector('.tutor-consent-user-card-name'); +const userJoinedEl = overlay?.querySelector('.tutor-consent-user-card-joined'); +const userAvatarEl = overlay?.querySelector('.tutor-consent-user-card img'); + +// Current open state. +let currentUserId = 0; +let currentUserName = ''; +let currentUserJoined = ''; +let currentUserEmail = ''; +let currentUserLogin = ''; +let currentLogs = []; + +const { __ } = wp.i18n; + +/** + * Build a human-readable title from the consent log. + * + * @param log - The consent log object + * @param includeAccepted - Whether to prefix the title with "Accepted" + * @returns A human-readable title string + */ +const getLogTitle = (log, includeAccepted = true) => { + if (log.consent_title) { + return includeAccepted + ? `${__('Accepted', 'tutor')} ${log.consent_title}` + : log.consent_title; + } + + return includeAccepted + ? __('Accepted Consent', 'tutor') + : __('Consent', 'tutor'); +}; + +const renderTimeline = (logs) => { + const items = logs.map((log, index) => { + const title = getLogTitle(log); + const date = log.created_at_gmt || ''; + const ago = log.timeAgo || log.time_ago || ''; + const ip = log.ip_address ? `IP: ${log.ip_address}` : ''; + const source = log.source ? `Source: ${log.source}` : ''; + const agent = log.user_agent ? `Agent: ${log.user_agent}` : ''; + const metaLines = [ip, source, agent].filter(Boolean); + return ` +
+
+ +
+
+

${title}

+

${date}

+ ${metaLines.length ? `
${metaLines.join('
')}
` : ''} +
+
${ago}
+
+ `; + }); + return items.join(''); +}; + +const showLoading = () => { + if (!modalBody) return; + modalBody.innerHTML = `
${__('Loading…', 'tutor')}
`; + if (downloadBtn) downloadBtn.style.display = 'none'; +}; + +const showEmpty = () => { + if (!modalBody) return; + modalBody.innerHTML = `
${__('No consent logs found.', 'tutor')}
`; + if (downloadBtn) downloadBtn.style.display = 'none'; +}; + +const fetchAndRender = (userId, userName, userJoined, avatarSrc, userEmail, userLogin) => { + if (!overlay || !modalBody) return; + currentUserId = userId; + currentUserName = userName; + currentUserJoined = userJoined; + currentUserEmail = userEmail; + currentUserLogin = userLogin; + + // Show loading state and hide download button. + showLoading(); + + // Fill user card. + if (userNameEl) userNameEl.textContent = userName; + if (userJoinedEl) userJoinedEl.textContent = userJoined ? `${__('Joined', 'tutor')} ${userJoined}` : ''; + if (userAvatarEl && avatarSrc) userAvatarEl.src = avatarSrc; + + const body = new FormData(); + body.append('action', AJAX_ACTION); + body.append('user_action', 'all_consents_given_by_user'); + body.append('user_id', userId); + body.append(NONCE_KEY, NONCE_VALUE); + + fetch(AJAX_URL, { method: 'POST', body }) + .then((r) => r.json()) + .then((data) => { + const logs = data.data; + currentLogs = logs; + if (!logs.length) { + showEmpty(); + return; + } + const userCard = ` +
+ ${avatarSrc ? `${userName}` : ''} +
+ ${userName} + ${userJoined ? `${__('Joined', 'tutor')} ${userJoined}` : ''} +
+
+ `; + modalBody.innerHTML = ` +
${renderTimeline(logs)}
+ ${userCard} + `; + if (downloadBtn) downloadBtn.style.display = ''; + }) + .catch(() => showEmpty()); +}; + +const downloadCSV = () => { + if (!currentLogs.length) return; + + const studentInfo = [ + ['Name:', currentUserName], + ['User Name:', currentUserLogin], + ['Email:', currentUserEmail], + ['Joined At:', currentUserJoined], + [], + ]; + + const headers = ['Title', 'Date (UTC)', 'IP Address', 'Source', 'User Agent']; + + const rows = currentLogs.map((log) => [ + getLogTitle(log, false), + log.created_at_gmt || '', + log.ip_address || '', + log.source || '', + log.user_agent || '', + ]); + + const escape = (v) => `"${String(v).replace(/"/g, '""')}"`; + + const csv = [...studentInfo, headers, ...rows] + .map((row) => row.map(escape).join(',')) + .join('\n'); + + const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `consent-logs-${currentUserName}.csv`; + a.click(); + URL.revokeObjectURL(url); +}; + +const initConsentLogTriggers = () => { + document.querySelectorAll('[data-consent-logs-trigger]').forEach((btn) => { + btn.addEventListener('click', () => { + // Hide download button immediately before modal opens. + if (downloadBtn) downloadBtn.style.display = 'none'; + + const userId = btn.dataset.userId || ''; + const userName = btn.dataset.userName || ''; + const userJoined = btn.dataset.userJoined || ''; + const avatarSrc = btn.dataset.avatarSrc || ''; + const userEmail = btn.dataset.userEmail || ''; + const userLogin = btn.dataset.userLogin || ''; + fetchAndRender(userId, userName, userJoined, avatarSrc, userEmail, userLogin); + }); + }); +}; + +if (downloadBtn) downloadBtn.addEventListener('click', downloadCSV); +document.addEventListener('DOMContentLoaded', initConsentLogTriggers); diff --git a/assets/react/admin-dashboard/segments/editor_full.js b/assets/src/js/admin-dashboard/segments/editor_full.js similarity index 100% rename from assets/react/admin-dashboard/segments/editor_full.js rename to assets/src/js/admin-dashboard/segments/editor_full.js diff --git a/assets/react/admin-dashboard/segments/filter.js b/assets/src/js/admin-dashboard/segments/filter.js similarity index 100% rename from assets/react/admin-dashboard/segments/filter.js rename to assets/src/js/admin-dashboard/segments/filter.js diff --git a/assets/react/admin-dashboard/segments/image-preview.js b/assets/src/js/admin-dashboard/segments/image-preview.js similarity index 100% rename from assets/react/admin-dashboard/segments/image-preview.js rename to assets/src/js/admin-dashboard/segments/image-preview.js diff --git a/assets/react/admin-dashboard/segments/import-export.js b/assets/src/js/admin-dashboard/segments/import-export.js similarity index 98% rename from assets/react/admin-dashboard/segments/import-export.js rename to assets/src/js/admin-dashboard/segments/import-export.js index d822caeccc..41aac7d376 100644 --- a/assets/react/admin-dashboard/segments/import-export.js +++ b/assets/src/js/admin-dashboard/segments/import-export.js @@ -38,18 +38,18 @@ function tutor_option_history_load(dataset) {
  • - + ${__('Download', 'tutor')}
  • - + ${__('Delete', 'tutor')}
    • diff --git a/assets/src/js/admin-dashboard/segments/legal-consents.js b/assets/src/js/admin-dashboard/segments/legal-consents.js new file mode 100644 index 0000000000..9b1bf199df --- /dev/null +++ b/assets/src/js/admin-dashboard/segments/legal-consents.js @@ -0,0 +1,790 @@ +const { __ } = wp.i18n; + +const SELECTORS = { + legalConsentPage: 'legal_consents', + headerSaveButton: 'save_tutor_option', + tutorOptionForm: 'tutor-option-form', + tabLinks: '[tutor-option-tabs] a', + tabPages: '.tutor-option-nav-page', + nonceInput: 'input[name="_tutor_nonce"]', + legalConsentsContainer: '[data-legal-consents]', + consentList: '[data-consent-list]', + consentTemplate: '[data-consent-template]', + consentCard: '[data-consent-card]', + consentEmptyState: '[data-consent-empty-state]', + consentFooter: '[data-consent-footer]', + addConsent: '[data-add-consent]', + consentTitleDisplay: '[data-consent-title]', + consentTitleInput: '[data-consent-title-input]', + consentEnabled: '[data-consent-enabled]', + consentEnabledHidden: '[data-consent-enabled-hidden]', + consentToggleButton: '[data-consent-toggle]', + consentDeleteButton: '[data-consent-delete]', + consentCancelButton: '[data-consent-cancel]', + consentSaveButton: '[data-consent-save]', + consentMessageTextarea: 'textarea[name="consent_message"]', + consentMethodSelect: 'select[name="consent_method"]', + displayOnCheckboxes: '[name="display_on[]"]', + pageDropdownToggle: '[data-page-dropdown-toggle]', + pageDropdown: '[data-page-dropdown]', + pageButton: '[data-page-btn]', +}; + +const CSS_CLASSES = { + active: 'is-active', + collapsed: 'is-collapsed', + loading: 'is-loading', +}; + +const ARIA = { + expanded: 'aria-expanded', +}; + +const DATA_ATTRIBUTES = { + consentId: 'consentId', + nextIndex: 'nextIndex', + pageKey: 'pageKey', +}; + +const AJAX_ACTIONS = { + legalConsents: 'tutor_gdpr_legal_consents', +}; + +const CRUD_ACTIONS = { + create: 'create', + update: 'update', + delete: 'delete', +}; + +const FORM_FIELDS = { + action: 'action', + crudAction: 'crud_action', + nonce: '_tutor_nonce', + id: 'id', + title: 'consent_title', + message: 'consent_message', + displayOn: 'display_on', + method: 'consent_method', + consentMap: 'consent_map', + isActive: 'is_active', +}; + +const DEFAULT_CONSENT_TITLE = __('Consent Title', 'tutor'); +const PLACEHOLDER_PATTERN = /\{([a-zA-Z0-9_-]+)\}/g; +const TEMPLATE_INDEX_PLACEHOLDER = '__INDEX__'; +const TUTOR_OPTION_SAVED_EVENT = 'tutor_option_saved'; + +const getNonceValue = () => document.querySelector(SELECTORS.nonceInput)?.value || ''; + +const getLegalConsentPage = () => document.getElementById(SELECTORS.legalConsentPage); + +const getHeaderSaveButton = () => document.getElementById(SELECTORS.headerSaveButton); + +const showToast = (title, message, type = 'success') => { + if (typeof window.tutor_toast === 'function') { + window.tutor_toast(title, message, type); + } +}; + +const getResponseMessage = (data, fallbackMessage) => { + if (typeof data?.message === 'string' && data.message.length) { + return data.message; + } + + if (typeof data?.data === 'string' && data.data.length) { + return data.data; + } + + return fallbackMessage; +}; + +const getValidationErrors = (data) => { + const validationError = data?.data?.validation_error; + if (!validationError || typeof validationError !== 'object') { + return null; + } + + return Object.entries(validationError) + .map(([field, message]) => `${field}: ${message}`) + .join('\n'); +}; + +const isSuccessfulResponse = (data) => Boolean( + data?.success === true + || (typeof data?.status_code === 'number' && data.status_code >= 200 && data.status_code < 300) +); + +const isLegalConsentsPageActive = () => { + const page = getLegalConsentPage(); + return !!page && page.classList.contains(CSS_CLASSES.active); +}; + +const syncFooterSaveButtons = () => { + const page = getLegalConsentPage(); + const headerSaveButton = getHeaderSaveButton(); + + if (!page || !headerSaveButton) { + return; + } + + const isLoading = headerSaveButton.classList.contains(CSS_CLASSES.loading); + page.querySelectorAll(SELECTORS.consentSaveButton).forEach((button) => { + button.classList.toggle(CSS_CLASSES.loading, isLoading); + }); +}; + +const toggleHeaderSaveVisibility = () => { + const headerSaveButton = getHeaderSaveButton(); + + if (!headerSaveButton) { + return; + } + + headerSaveButton.style.display = isLegalConsentsPageActive() ? 'none' : ''; +}; + +const markSettingsAsChanged = () => { + const headerSaveButton = getHeaderSaveButton(); + + if (!headerSaveButton) { + return; + } + + headerSaveButton.removeAttribute('disabled'); + syncFooterSaveButtons(); +}; + +const updateConsentTitle = (card, value) => { + const title = card.querySelector(SELECTORS.consentTitleDisplay); + if (title) { + title.textContent = value.trim() || DEFAULT_CONSENT_TITLE; + } +}; + +const syncEmptyState = (container) => { + const list = container?.querySelector(SELECTORS.consentList); + const emptyState = container?.querySelector(SELECTORS.consentEmptyState); + const footer = container?.querySelector(SELECTORS.consentFooter); + + if (!list || !emptyState) { + return; + } + + const hasCards = list.querySelectorAll(SELECTORS.consentCard).length > 0; + + emptyState.hidden = hasCards; + + if (footer) { + footer.hidden = !hasCards; + } +}; + +const getCardFormState = (card) => ({ + title: card.querySelector(SELECTORS.consentTitleInput)?.value || '', + enabled: Boolean(card.querySelector(SELECTORS.consentEnabled)?.checked), + message: card.querySelector(SELECTORS.consentMessageTextarea)?.value || '', + method: card.querySelector(SELECTORS.consentMethodSelect)?.value || '', + displayOn: Array.from(card.querySelectorAll(SELECTORS.displayOnCheckboxes)) + .filter((checkbox) => checkbox.checked) + .map((checkbox) => checkbox.value) + .sort(), + consentMap: getSelectedPagesMap(card), +}); + +const getSelectedPagesMap = (card) => { + const messageValue = card.querySelector(SELECTORS.consentMessageTextarea)?.value || ''; + const usedPlaceholders = new Set(Array.from(messageValue.matchAll(PLACEHOLDER_PATTERN), (match) => match[1])); + const selectedPages = {}; + + card.querySelectorAll(SELECTORS.pageButton).forEach((button) => { + const pageKey = button.dataset[DATA_ATTRIBUTES.pageKey]; + if (pageKey && usedPlaceholders.has(pageKey)) { + selectedPages[pageKey] = button.value; + } + }); + + return selectedPages; +}; + +const isSameCardState = (left, right) => { + if (!left || !right) { + return false; + } + + return left.title === right.title + && left.enabled === right.enabled + && left.message === right.message + && left.method === right.method + && JSON.stringify(left.displayOn) === JSON.stringify(right.displayOn) + && JSON.stringify(left.consentMap) === JSON.stringify(right.consentMap); +}; + +const isValidConsentState = (state) => Boolean( + state.title.trim() + && state.message.trim() + && state.method + && state.displayOn.length > 0 +); + +const applyCardState = (card, state) => { + const titleInput = card.querySelector(SELECTORS.consentTitleInput); + const enabledInput = card.querySelector(SELECTORS.consentEnabled); + const enabledHiddenInput = card.querySelector(SELECTORS.consentEnabledHidden); + const messageInput = card.querySelector(SELECTORS.consentMessageTextarea); + const methodSelect = card.querySelector(SELECTORS.consentMethodSelect); + + if (titleInput) { + titleInput.value = state.title || ''; + updateConsentTitle(card, titleInput.value); + } + + if (enabledInput) { + enabledInput.checked = Boolean(state.enabled); + } + + if (enabledHiddenInput) { + enabledHiddenInput.value = state.enabled ? 'on' : 'off'; + } + + if (messageInput) { + messageInput.value = state.message || ''; + messageInput.dispatchEvent(new Event('input', { bubbles: true })); + } + + if (methodSelect) { + methodSelect.value = state.method || methodSelect.value; + } + + card.querySelectorAll(SELECTORS.displayOnCheckboxes).forEach((checkbox) => { + checkbox.checked = state.displayOn.includes(checkbox.value); + }); +}; + +const syncCardSaveButton = (card, savedState) => { + const saveButton = card.querySelector(SELECTORS.consentSaveButton); + if (!saveButton || saveButton.classList.contains(CSS_CLASSES.loading)) { + return; + } + + saveButton.disabled = isSameCardState(getCardFormState(card), savedState); +}; + +const syncCardDiscardButton = (card, savedState) => { + const discardButton = card.querySelector(SELECTORS.consentCancelButton); + if (!discardButton || discardButton.classList.contains(CSS_CLASSES.loading)) { + return; + } + + discardButton.disabled = isSameCardState(getCardFormState(card), savedState); +}; + +const toggleConsentCard = (card, collapsed) => { + if (0 === Number(card.dataset[DATA_ATTRIBUTES.consentId] || 0)) { + return; + } + + card.classList.toggle(CSS_CLASSES.collapsed, collapsed); + + const toggleButton = card.querySelector(SELECTORS.consentToggleButton); + if (toggleButton) { + toggleButton.setAttribute(ARIA.expanded, String(!collapsed)); + } +}; + +const closePageDropdown = (dropdown, toggleButton) => { + if (!dropdown) { + return; + } + + dropdown.hidden = true; + + if (toggleButton) { + toggleButton.setAttribute(ARIA.expanded, 'false'); + } +}; + +const closeAllPageDropdowns = (scope = document, exceptDropdown = null) => { + scope.querySelectorAll(SELECTORS.pageDropdown).forEach((dropdown) => { + if (dropdown === exceptDropdown) { + return; + } + + closePageDropdown(dropdown, dropdown.parentElement?.querySelector(SELECTORS.pageDropdownToggle)); + }); +}; + +const bindPageLinkControl = (card, onCardChange) => { + const fieldInput = card.querySelector(SELECTORS.pageDropdownToggle)?.closest('.tutor-option-field-input'); + const toggleButton = fieldInput?.querySelector(SELECTORS.pageDropdownToggle); + const dropdown = fieldInput?.querySelector(SELECTORS.pageDropdown); + const textarea = fieldInput?.querySelector(SELECTORS.consentMessageTextarea); + const pageButtons = fieldInput?.querySelectorAll(SELECTORS.pageButton) || []; + + if (!fieldInput || !toggleButton || !dropdown || !textarea) { + return; + } + + const syncPageButtons = () => { + pageButtons.forEach((button) => { + const pageKey = button.dataset[DATA_ATTRIBUTES.pageKey] || ''; + const placeholder = pageKey ? `{${pageKey}}` : ''; + const isSelected = Boolean(placeholder && textarea.value.includes(placeholder)); + + button.disabled = isSelected; + button.classList.toggle('is-selected', isSelected); + }); + }; + + toggleButton.addEventListener('click', (event) => { + event.stopPropagation(); + + const isOpening = dropdown.hidden; + closeAllPageDropdowns(card.closest(SELECTORS.legalConsentsContainer) || document, isOpening ? dropdown : null); + dropdown.hidden = !isOpening; + toggleButton.setAttribute(ARIA.expanded, String(isOpening)); + }); + + pageButtons.forEach((button) => { + button.addEventListener('click', () => { + const pageKey = button.dataset[DATA_ATTRIBUTES.pageKey]; + + if (!pageKey) { + return; + } + + const placeholder = `{${pageKey}}`; + const currentValue = textarea.value.trim(); + + if (!currentValue.includes(placeholder)) { + textarea.value = currentValue ? `${currentValue} ${placeholder}` : placeholder; + textarea.dispatchEvent(new Event('input', { bubbles: true })); + } + + syncPageButtons(); + closePageDropdown(dropdown, toggleButton); + }); + }); + + textarea.addEventListener('input', () => { + syncPageButtons(); + onCardChange(); + }); + + syncPageButtons(); +}; + +const buildSavePayload = ({ card, consentId, enabledInput, savedState }) => { + const currentState = getCardFormState(card); + const payload = new FormData(); + + payload.append(FORM_FIELDS.action, AJAX_ACTIONS.legalConsents); + payload.append(FORM_FIELDS.crudAction, consentId ? CRUD_ACTIONS.update : CRUD_ACTIONS.create); + payload.append(FORM_FIELDS.nonce, getNonceValue()); + + if (consentId) { + payload.append(FORM_FIELDS.id, String(consentId)); + } + + const fields = { + [FORM_FIELDS.title]: currentState.title, + [FORM_FIELDS.message]: currentState.message, + [FORM_FIELDS.displayOn]: currentState.displayOn.join(','), + [FORM_FIELDS.method]: currentState.method, + [FORM_FIELDS.consentMap]: JSON.stringify(currentState.consentMap), + [FORM_FIELDS.isActive]: enabledInput?.checked ? '1' : '0', + }; + + if (!consentId) { + Object.entries(fields).forEach(([key, value]) => { + payload.append(key, value); + }); + + return payload; + } + + const previousDisplayOn = savedState.displayOn.join(','); + const previousConsentMap = JSON.stringify(savedState.consentMap); + + if (fields[FORM_FIELDS.title] !== savedState.title) { + payload.append(FORM_FIELDS.title, fields[FORM_FIELDS.title]); + } + + if (fields[FORM_FIELDS.message] !== savedState.message) { + payload.append(FORM_FIELDS.message, fields[FORM_FIELDS.message]); + } + + if (fields[FORM_FIELDS.displayOn] !== previousDisplayOn) { + payload.append(FORM_FIELDS.displayOn, fields[FORM_FIELDS.displayOn]); + } + + if (fields[FORM_FIELDS.method] !== savedState.method) { + payload.append(FORM_FIELDS.method, fields[FORM_FIELDS.method]); + } + + if (fields[FORM_FIELDS.consentMap] !== previousConsentMap) { + payload.append(FORM_FIELDS.consentMap, fields[FORM_FIELDS.consentMap]); + } + + if (fields[FORM_FIELDS.isActive] !== (savedState.enabled ? '1' : '0')) { + payload.append(FORM_FIELDS.isActive, fields[FORM_FIELDS.isActive]); + } + + return payload; +}; + +const deleteConsent = ({ card, consentId, deleteButton, onSuccess = () => { } }) => { + const formData = new FormData(); + formData.append(FORM_FIELDS.action, AJAX_ACTIONS.legalConsents); + formData.append(FORM_FIELDS.crudAction, CRUD_ACTIONS.delete); + formData.append(FORM_FIELDS.nonce, getNonceValue()); + formData.append(FORM_FIELDS.id, String(consentId)); + + deleteButton.classList.add(CSS_CLASSES.loading); + deleteButton.disabled = true; + + fetch(ajaxurl, { method: 'POST', body: formData }) + .then((response) => response.json()) + .then((data) => { + if (isSuccessfulResponse(data)) { + card.remove(); + onSuccess(); + showToast(__('Success', 'tutor'), getResponseMessage(data, __('Legal consent deleted successfully.', 'tutor')), 'success'); + return; + } + + showToast(__('Failed', 'tutor'), getResponseMessage(data, __('Failed to delete legal consent.', 'tutor')), 'error'); + }) + .catch(() => { + showToast(__('Failed', 'tutor'), __('Failed to delete legal consent.', 'tutor'), 'error'); + }) + .finally(() => { + deleteButton.classList.remove(CSS_CLASSES.loading); + deleteButton.disabled = false; + }); +}; + +const updateConsentEnabledState = ({ consentId, enabledInput, enabledHiddenInput, onSuccess }) => { + const formData = new FormData(); + formData.append(FORM_FIELDS.action, AJAX_ACTIONS.legalConsents); + formData.append(FORM_FIELDS.crudAction, CRUD_ACTIONS.update); + formData.append(FORM_FIELDS.nonce, getNonceValue()); + formData.append(FORM_FIELDS.id, String(consentId)); + formData.append(FORM_FIELDS.isActive, enabledInput.checked ? '1' : '0'); + + enabledInput.disabled = true; + + fetch(ajaxurl, { method: 'POST', body: formData }) + .then((response) => response.json()) + .then((data) => { + if (isSuccessfulResponse(data)) { + onSuccess(); + showToast(__('Success', 'tutor'), getResponseMessage(data, __('Legal consent updated successfully.', 'tutor')), 'success'); + return; + } + + enabledInput.checked = !enabledInput.checked; + enabledHiddenInput.value = enabledInput.checked ? 'on' : 'off'; + showToast(__('Failed', 'tutor'), getResponseMessage(data, __('Failed to update legal consent.', 'tutor')), 'error'); + }) + .catch(() => { + enabledInput.checked = !enabledInput.checked; + enabledHiddenInput.value = enabledInput.checked ? 'on' : 'off'; + showToast(__('Failed', 'tutor'), __('Failed to update legal consent.', 'tutor'), 'error'); + }) + .finally(() => { + enabledInput.disabled = false; + }); +}; + +const saveConsent = ({ card, consentId, saveButton, enabledInput, savedState, onSuccess }) => { + const currentState = getCardFormState(card); + + if (!isValidConsentState(currentState)) { + showToast(__('Error', 'tutor'), __('Please fill all the required fields.', 'tutor'), 'error'); + return; + } + + const formData = buildSavePayload({ card, consentId, enabledInput, savedState }); + + saveButton.classList.add(CSS_CLASSES.loading); + saveButton.disabled = true; + + fetch(ajaxurl, { method: 'POST', body: formData }) + .then((response) => response.json()) + .then((data) => { + if (isSuccessfulResponse(data)) { + saveButton.classList.remove(CSS_CLASSES.loading); + onSuccess(Number(data?.data?.id || 0)); + showToast(__('Success', 'tutor'), getResponseMessage(data, __('Legal consent saved successfully.', 'tutor')), 'success'); + return; + } + + const validationErrors = getValidationErrors(data); + const errorMessage = validationErrors || getResponseMessage(data, __('Failed to save legal consent.', 'tutor')); + showToast(__('Failed', 'tutor'), errorMessage, 'error'); + saveButton.classList.remove(CSS_CLASSES.loading); + saveButton.disabled = false; + }) + .catch(() => { + showToast(__('Failed', 'tutor'), __('Failed to save legal consent.', 'tutor'), 'error'); + saveButton.classList.remove(CSS_CLASSES.loading); + saveButton.disabled = false; + }); +}; + +const bindCard = (card) => { + const titleInput = card.querySelector(SELECTORS.consentTitleInput); + const enabledInput = card.querySelector(SELECTORS.consentEnabled); + const enabledHiddenInput = card.querySelector(SELECTORS.consentEnabledHidden); + const toggleButton = card.querySelector(SELECTORS.consentToggleButton); + const deleteButton = card.querySelector(SELECTORS.consentDeleteButton); + const cancelButton = card.querySelector(SELECTORS.consentCancelButton); + const saveButton = card.querySelector(SELECTORS.consentSaveButton); + const container = card.closest(SELECTORS.legalConsentsContainer); + + let consentId = Number(card.dataset[DATA_ATTRIBUTES.consentId] || 0); + let savedState = getCardFormState(card); + syncCardSaveButton(card, savedState); + syncCardDiscardButton(card, savedState); + + const onCardChange = () => { + markSettingsAsChanged(); + syncCardSaveButton(card, savedState); + syncCardDiscardButton(card, savedState); + }; + + titleInput?.addEventListener('input', (event) => { + updateConsentTitle(card, event.target.value); + onCardChange(); + }); + + if (enabledInput && enabledHiddenInput) { + enabledInput.addEventListener('change', () => { + enabledHiddenInput.value = enabledInput.checked ? 'on' : 'off'; + + if (!consentId) { + onCardChange(); + return; + } + + updateConsentEnabledState({ + consentId, + enabledInput, + enabledHiddenInput, + onSuccess: () => { + savedState = getCardFormState(card); + syncCardSaveButton(card, savedState); + }, + }); + }); + } + + card.querySelectorAll(SELECTORS.displayOnCheckboxes).forEach((checkbox) => { + checkbox.addEventListener('change', onCardChange); + }); + + card.querySelector(SELECTORS.consentMethodSelect)?.addEventListener('change', onCardChange); + + toggleButton?.addEventListener('click', () => { + if (toggleButton.disabled) { + return; + } + + toggleConsentCard(card, !card.classList.contains(CSS_CLASSES.collapsed)); + }); + + deleteButton?.addEventListener('click', () => { + const modal = document.getElementById('tutor-legal-consent-delete-modal'); + const confirmBtn = document.getElementById('tutor-legal-consent-confirm-delete'); + + if (!modal || !confirmBtn) { + if (!consentId) { + card.remove(); + showToast(__('Success', 'tutor'), __('Legal consent removed.', 'tutor'), 'success'); + syncEmptyState(container); + markSettingsAsChanged(); + return; + } + + deleteConsent({ + card, + consentId, + deleteButton, + onSuccess: () => syncEmptyState(container), + }); + return; + } + + modal.classList.add('tutor-is-active'); + + const newConfirmBtn = confirmBtn.cloneNode(true); + confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn); + + newConfirmBtn.addEventListener('click', () => { + const closeBtn = modal.querySelector('[data-tutor-modal-close]'); + + if (!consentId) { + closeBtn?.click(); + card.remove(); + showToast(__('Success', 'tutor'), __('Legal consent removed.', 'tutor'), 'success'); + syncEmptyState(container); + markSettingsAsChanged(); + return; + } + + deleteConsent({ + card, + consentId, + deleteButton: newConfirmBtn, + onSuccess: () => { + closeBtn?.click(); + syncEmptyState(container); + }, + }); + }); + }); + + cancelButton?.addEventListener('click', () => { + applyCardState(card, savedState); + syncCardSaveButton(card, savedState); + syncCardDiscardButton(card, savedState); + }); + + saveButton?.addEventListener('click', () => { + saveConsent({ + card, + consentId, + saveButton, + enabledInput, + savedState, + onSuccess: (returnedId) => { + if (!consentId && returnedId) { + consentId = returnedId; + card.dataset[DATA_ATTRIBUTES.consentId] = String(returnedId); + if (toggleButton) { + toggleButton.disabled = false; + } + if (enabledInput) { + enabledInput.disabled = false; + } + } + + toggleConsentCard(card, true); + savedState = getCardFormState(card); + syncCardSaveButton(card, savedState); + syncCardDiscardButton(card, savedState); + }, + }); + }); + + bindPageLinkControl(card, onCardChange); +}; + +const appendConsentCard = (container) => { + const template = container.querySelector(SELECTORS.consentTemplate); + const list = container.querySelector(SELECTORS.consentList); + + if (!template || !list) { + return; + } + + const nextIndex = Number(container.dataset[DATA_ATTRIBUTES.nextIndex] || list.children.length || 0); + const markup = template.innerHTML.replaceAll(TEMPLATE_INDEX_PLACEHOLDER, String(nextIndex)); + const wrapper = document.createElement('div'); + wrapper.innerHTML = markup.trim(); + + const card = wrapper.firstElementChild; + if (!card) { + return; + } + + list.appendChild(card); + container.dataset[DATA_ATTRIBUTES.nextIndex] = String(nextIndex + 1); + bindCard(card); + updateConsentTitle(card, card.querySelector(SELECTORS.consentTitleInput)?.value || ''); + syncEmptyState(container); + markSettingsAsChanged(); +}; + +const initLegalConsents = () => { + const page = getLegalConsentPage(); + if (!page) { + return; + } + + const container = page.querySelector(SELECTORS.legalConsentsContainer); + if (!container) { + return; + } + + const cards = container.querySelectorAll(SELECTORS.consentCard); + container.dataset[DATA_ATTRIBUTES.nextIndex] = String(cards.length); + + cards.forEach((card) => { + bindCard(card); + updateConsentTitle(card, card.querySelector(SELECTORS.consentTitleInput)?.value || ''); + }); + + syncEmptyState(container); + + container.querySelectorAll(SELECTORS.addConsent).forEach((button) => { + button.addEventListener('click', () => { + appendConsentCard(container); + }); + }); + + document.addEventListener('click', (event) => { + const target = event.target; + if (!(target instanceof Element)) { + return; + } + + if (!target.closest(SELECTORS.pageDropdown) && !target.closest(SELECTORS.pageDropdownToggle)) { + closeAllPageDropdowns(container); + } + }); + + toggleHeaderSaveVisibility(); + syncFooterSaveButtons(); + + const headerSaveButton = getHeaderSaveButton(); + if (headerSaveButton) { + const observer = new MutationObserver(() => { + toggleHeaderSaveVisibility(); + syncFooterSaveButtons(); + }); + + observer.observe(headerSaveButton, { + attributes: true, + attributeFilter: ['disabled', 'class', 'style'], + }); + } + + document.querySelectorAll(SELECTORS.tabLinks).forEach((tab) => { + tab.addEventListener('click', () => { + window.setTimeout(() => { + toggleHeaderSaveVisibility(); + syncFooterSaveButtons(); + }, 0); + }); + }); + + const optionForm = document.getElementById(SELECTORS.tutorOptionForm); + optionForm?.addEventListener('input', syncFooterSaveButtons); + optionForm?.addEventListener('change', syncFooterSaveButtons); + window.addEventListener(TUTOR_OPTION_SAVED_EVENT, syncFooterSaveButtons); + + const tabPagesObserver = new MutationObserver(() => { + toggleHeaderSaveVisibility(); + syncFooterSaveButtons(); + }); + + document.querySelectorAll(SELECTORS.tabPages).forEach((tabPage) => { + tabPagesObserver.observe(tabPage, { + attributes: true, + attributeFilter: ['class'], + }); + }); +}; + +document.addEventListener('DOMContentLoaded', initLegalConsents); diff --git a/assets/react/admin-dashboard/segments/lib.js b/assets/src/js/admin-dashboard/segments/lib.js similarity index 100% rename from assets/react/admin-dashboard/segments/lib.js rename to assets/src/js/admin-dashboard/segments/lib.js diff --git a/assets/react/admin-dashboard/segments/manage-api-keys.js b/assets/src/js/admin-dashboard/segments/manage-api-keys.js similarity index 100% rename from assets/react/admin-dashboard/segments/manage-api-keys.js rename to assets/src/js/admin-dashboard/segments/manage-api-keys.js diff --git a/assets/react/admin-dashboard/segments/multiple_email_input.js b/assets/src/js/admin-dashboard/segments/multiple_email_input.js similarity index 100% rename from assets/react/admin-dashboard/segments/multiple_email_input.js rename to assets/src/js/admin-dashboard/segments/multiple_email_input.js diff --git a/assets/react/admin-dashboard/segments/navigation.js b/assets/src/js/admin-dashboard/segments/navigation.js similarity index 100% rename from assets/react/admin-dashboard/segments/navigation.js rename to assets/src/js/admin-dashboard/segments/navigation.js diff --git a/assets/react/admin-dashboard/segments/options.js b/assets/src/js/admin-dashboard/segments/options.js similarity index 100% rename from assets/react/admin-dashboard/segments/options.js rename to assets/src/js/admin-dashboard/segments/options.js diff --git a/assets/react/admin-dashboard/segments/popupToggle.js b/assets/src/js/admin-dashboard/segments/popupToggle.js similarity index 100% rename from assets/react/admin-dashboard/segments/popupToggle.js rename to assets/src/js/admin-dashboard/segments/popupToggle.js diff --git a/assets/react/admin-dashboard/segments/reset.js b/assets/src/js/admin-dashboard/segments/reset.js similarity index 81% rename from assets/react/admin-dashboard/segments/reset.js rename to assets/src/js/admin-dashboard/segments/reset.js index cdd8aab5ba..0ee942f629 100644 --- a/assets/react/admin-dashboard/segments/reset.js +++ b/assets/src/js/admin-dashboard/segments/reset.js @@ -47,7 +47,7 @@ const resetConfirmation = () => { if (xhttp.readyState === 4) { let pageData = JSON.parse(xhttp.response).data; pageData.forEach((item) => { - const field_types_associate = ['color_preset', 'upload_full', 'checkbox_notification', 'checkgroup', 'group_radio_full_3', 'group_radio', 'radio_vertical', 'checkbox_horizontal', 'radio_horizontal', 'radio_horizontal_full', 'checkbox_vertical', 'toggle_switch', 'toggle_switch_button', 'text', 'textarea', 'email', 'hidden', 'select', 'number']; + const field_types_associate = ['color_field', 'upload_full', 'checkbox_notification', 'checkgroup', 'group_radio_full_3', 'group_radio', 'radio_vertical', 'checkbox_horizontal', 'radio_horizontal', 'radio_horizontal_full', 'radio_horizontal_image', 'checkbox_vertical', 'toggle_switch', 'toggle_switch_button', 'text', 'textarea', 'email', 'hidden', 'select', 'number']; if (field_types_associate.includes(item.type)) { let itemName = 'tutor_option[' + item.key + ']'; @@ -60,36 +60,14 @@ const resetConfirmation = () => { elementOption.selected = typeof item.default === 'number' ? elementOption.value === item.default : item.default.includes(elementOption.value); }); - } else if (item.type == 'color_preset') { - - let presetItems = elementByName(itemName); - presetItems.forEach((presetItem) => { - let labelClasses = presetItem.parentElement.classList; - item.default.includes(presetItem.value) ? labelClasses.add('is-checked') : labelClasses.remove('is-checked'); - presetItem.checked = item.default.includes(presetItem.value) ? true : false; - }) - - item.fields.forEach((fields) => { - if (fields.key === item.default) { - fields.colors.forEach((picker) => { - let pickerName = 'tutor_option[' + picker.slug + ']'; - let pickerItem = elementByName(pickerName)[0]; - let pickerItemParent = pickerItem.parentElement; - pickerItem.value = picker.value; - pickerItem.nextElementSibling.innerText = picker.value; - - pickerItemParent.style.borderColor = picker.value; - pickerItemParent.style.boxShadow = `inset 0 0 0 1px ${picker.value}`; - - setTimeout(() => { - pickerItemParent.style.borderColor = '#cdcfd5'; - pickerItemParent.style.boxShadow = 'none'; - }, 5000); - }) - } - }) - - } else if (item.type == 'checkbox_horizontal' || item.type == 'checkbox_vertical' || item.type == 'radio_horizontal' || item.type == 'radio_horizontal_full' || item.type == 'radio_vertical' || item.type == 'group_radio' || item.type == 'group_radio_full_3') { + } else if (item.type == 'color_field') { + let pickerName = 'tutor_option[' + item.key + ']'; + let pickerItem = elementByName(pickerName)[0]; + if (pickerItem) { + pickerItem.value = item.default; + pickerItem.nextElementSibling.innerText = item.default; + } + } else if (item.type == 'checkbox_horizontal' || item.type == 'checkbox_vertical' || item.type == 'radio_horizontal' || item.type == 'radio_horizontal_full' || item.type == 'radio_horizontal_image' || item.type == 'radio_vertical' || item.type == 'group_radio' || item.type == 'group_radio_full_3') { if (item.type == 'checkbox_horizontal') { Object.keys(item.options).forEach((optionKeys) => { diff --git a/assets/src/js/admin-dashboard/segments/students.js b/assets/src/js/admin-dashboard/segments/students.js new file mode 100644 index 0000000000..5b01c1bb71 --- /dev/null +++ b/assets/src/js/admin-dashboard/segments/students.js @@ -0,0 +1,161 @@ +/** + * Student actions consent logs modal. + * + * @since 4.0.0 + */ +const AJAX_URL = window.ajaxurl || window._tutorobject?.ajaxurl || ''; +const AJAX_ACTION = 'tutor_user_consents'; +const NONCE_KEY = window._tutorobject?.nonce_key || '_tutor_nonce'; +const NONCE_VALUE = window._tutorobject?.[NONCE_KEY] || ''; +const overlay = document.getElementById('tutor-consent-logs-modal'); +const modalBody = overlay?.querySelector('.tutor-consent-logs-modal-body'); +const downloadBtn = overlay?.querySelector('[data-consent-logs-download]'); +const userNameEl = overlay?.querySelector('.tutor-consent-user-card-name'); +const userJoinedEl = overlay?.querySelector('.tutor-consent-user-card-joined'); +const userAvatarEl = overlay?.querySelector('.tutor-consent-user-card img'); +// Current open state. +let currentUserId = 0; +let currentUserName = ''; +let currentUserJoined = ''; +let currentUserEmail = ''; +let currentUserLogin = ''; +let currentLogs = []; +const { __ } = wp.i18n; +/** + * Build a human-readable title from the consent title. + * + * @param {Object} log + * @param {boolean} includeAccepted Whether to prefix with "Accepted" + * @returns {string} + */ +const getLogTitle = (log, includeAccepted = true) => { + if (log.consent_title) { + return includeAccepted ? `${__('Accepted', 'tutor')} ${log.consent_title}` : log.consent_title; + } + return includeAccepted ? __('Accepted Consent', 'tutor') : __('Consent', 'tutor'); +}; +const renderTimeline = (logs) => { + const items = logs.map((log, index) => { + const title = getLogTitle(log); + const date = log.created_at_gmt || ''; + const ago = log.timeAgo || log.time_ago || ''; + const ip = log.ip_address ? `IP: ${log.ip_address}` : ''; + const source = log.source ? `Source: ${log.source}` : ''; + const agent = log.user_agent ? `Agent: ${log.user_agent}` : ''; + const metaLines = [ip, source, agent].filter(Boolean); + return ` +
    +
    + +
    +
    +

    ${title}

    +

    ${date}

    + ${metaLines.length ? `
    ${metaLines.join('
    ')}
    ` : ''} +
    +
    ${ago}
    +
    + `; + }); + return items.join(''); +}; +const showLoading = () => { + if (!modalBody) return; + modalBody.innerHTML = `
    ${__('Loading…', 'tutor')}
    `; +}; +const showEmpty = () => { + if (!modalBody) return; + modalBody.innerHTML = `
    ${__('No consent logs found.', 'tutor')}
    `; +}; +const fetchAndRender = (userId, userName, userJoined, avatarSrc, userEmail, userLogin) => { + if (!overlay || !modalBody) return; + currentUserId = userId; + currentUserName = userName; + currentUserJoined = userJoined; + currentUserEmail = userEmail; + currentUserLogin = userLogin; + // Fill user card. + if (userNameEl) userNameEl.textContent = userName; + if (userJoinedEl) userJoinedEl.textContent = userJoined ? `${__('Joined', 'tutor')} ${userJoined}` : ''; + if (userAvatarEl && avatarSrc) userAvatarEl.src = avatarSrc; + // showLoading(); + const body = new FormData(); + body.append('action', AJAX_ACTION); + body.append('user_action', 'all_consents_given_by_user'); + body.append('user_id', userId); + body.append(NONCE_KEY, NONCE_VALUE); + fetch(AJAX_URL, { method: 'POST', body }) + .then((r) => r.json()) + .then((data) => { + const logs = data.data; + currentLogs = logs; + if (!logs.length) { + showEmpty(); + return; + } + const userCard = ` +
    + ${avatarSrc ? `${userName}` : ''} +
    + ${userName} + ${userJoined ? `${__('Joined', 'tutor')} ${userJoined}` : ''} +
    +
    + `; + modalBody.innerHTML = ` +
    ${renderTimeline(logs)}
    + ${userCard} + `; + }) + .catch(() => showEmpty()); +}; +const downloadCSV = () => { + if (!currentLogs.length) return; + + const studentInfo = [ + ['Name:', currentUserName], + ['User Name:', currentUserLogin], + ['Email:', currentUserEmail], + ['Joined At:', currentUserJoined], + [], + ]; + + const headers = ['Title', 'Date (UTC)', 'IP Address', 'Source', 'User Agent']; + + const rows = currentLogs.map((log) => [ + getLogTitle(log, false), + log.created_at_gmt || '', + log.ip_address || '', + log.source || '', + log.user_agent || '', + ]); + + const escape = (v) => `"${String(v).replace(/"/g, '""')}"`; + + const csv = [...studentInfo, headers, ...rows] + .map((row) => row.map(escape).join(',')) + .join('\n'); + + const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `consent-logs-${currentUserName}.csv`; + a.click(); + URL.revokeObjectURL(url); +}; +const initConsentLogTriggers = () => { + document.querySelectorAll('[data-consent-logs-trigger]').forEach((btn) => { + btn.addEventListener('click', () => { + const userId = btn.dataset.userId || ''; + const userName = btn.dataset.userName || ''; + const userJoined = btn.dataset.userJoined || ''; + const avatarSrc = btn.dataset.avatarSrc || ''; + const userEmail = btn.dataset.userEmail || ''; + const userLogin = btn.dataset.userLogin || ''; + fetchAndRender(userId, userName, userJoined, avatarSrc, userEmail, userLogin); + }); + }); +}; +if (downloadBtn) downloadBtn.addEventListener('click', downloadCSV); +document.addEventListener('DOMContentLoaded', initConsentLogTriggers); \ No newline at end of file diff --git a/assets/react/admin-dashboard/segments/withdraw.js b/assets/src/js/admin-dashboard/segments/withdraw.js similarity index 100% rename from assets/react/admin-dashboard/segments/withdraw.js rename to assets/src/js/admin-dashboard/segments/withdraw.js diff --git a/assets/react/admin-dashboard/tutor-admin.js b/assets/src/js/admin-dashboard/tutor-admin.js similarity index 99% rename from assets/react/admin-dashboard/tutor-admin.js rename to assets/src/js/admin-dashboard/tutor-admin.js index ba94343cbd..ae35d8f4f9 100644 --- a/assets/react/admin-dashboard/tutor-admin.js +++ b/assets/src/js/admin-dashboard/tutor-admin.js @@ -1,11 +1,14 @@ -import '../front/_select_dd_search'; -import './quiz-attempts'; +import ajaxHandler from '../helper/ajax-handler'; + + import './segments/color-preset'; import './segments/column-filter'; +import './segments/consent-logs'; import './segments/editor_full'; import './segments/filter'; import './segments/image-preview'; import './segments/import-export'; +import './segments/legal-consents'; import './segments/lib'; import './segments/manage-api-keys'; import './segments/multiple_email_input'; @@ -13,8 +16,10 @@ import './segments/navigation'; import './segments/options'; import './segments/reset'; import './segments/withdraw'; + +import '../front/_select_dd_search'; +import './quiz-attempts'; import './wp-events-subscriber'; -import ajaxHandler from '../helper/ajax-handler'; document.querySelectorAll('.tutor-control-button').forEach(function (button) { button.addEventListener('click', function (event) { diff --git a/assets/react/admin-dashboard/tutor-setup.js b/assets/src/js/admin-dashboard/tutor-setup.js similarity index 100% rename from assets/react/admin-dashboard/tutor-setup.js rename to assets/src/js/admin-dashboard/tutor-setup.js diff --git a/assets/react/admin-dashboard/wp-events-subscriber.js b/assets/src/js/admin-dashboard/wp-events-subscriber.js similarity index 100% rename from assets/react/admin-dashboard/wp-events-subscriber.js rename to assets/src/js/admin-dashboard/wp-events-subscriber.js diff --git a/assets/react/front/_select_dd_search.js b/assets/src/js/front/_select_dd_search.js similarity index 99% rename from assets/react/front/_select_dd_search.js rename to assets/src/js/front/_select_dd_search.js index c78684cb55..aa577c8135 100644 --- a/assets/react/front/_select_dd_search.js +++ b/assets/src/js/front/_select_dd_search.js @@ -163,7 +163,7 @@ window.selectSearchField = (selectElement) => {
    - +
    diff --git a/assets/react/front/course/_archive.js b/assets/src/js/front/course/_archive.js similarity index 95% rename from assets/react/front/course/_archive.js rename to assets/src/js/front/course/_archive.js index 78999d7e7f..6a7e7c5652 100644 --- a/assets/react/front/course/_archive.js +++ b/assets/src/js/front/course/_archive.js @@ -119,11 +119,17 @@ window.jQuery(document).ready($ => { filter_criteria.current_page = (use_page_num && params.current_page) ? params.current_page : 1; filter_criteria.action = 'tutor_course_filter_ajax'; + const courseCategoryIds = document.getElementById('course_filter_categories'); + const categoryIds = courseCategoryIds ? JSON.parse($(courseCategoryIds)?.val()) : []; if (push_state) { pushFilterToState(filter_criteria); } - content_container.html(''); + if ( categoryIds.length > 0 ) { + filter_criteria['tutor-course-filter-category'] = categoryIds; + } + + content_container.html(''); course_filter_container.find('[action-tutor-clear-filter]').closest('.tutor-widget-course-filter').removeClass('tutor-d-none'); if (!('category' in filter_criteria.supported_filters)) { @@ -192,7 +198,7 @@ window.jQuery(document).ready($ => { $('body').toggleClass('tutor-course-filter-open'); if ($('.tutor-course-filter-backdrop').length == 0) { - $('body').append($('
    ').hide().fadeIn(150)); + $('body').append($('').hide().fadeIn(150)); } }); diff --git a/assets/react/front/course/_lesson.js b/assets/src/js/front/course/_lesson.js similarity index 100% rename from assets/react/front/course/_lesson.js rename to assets/src/js/front/course/_lesson.js diff --git a/assets/react/front/course/_social-share.js b/assets/src/js/front/course/_social-share.js similarity index 100% rename from assets/react/front/course/_social-share.js rename to assets/src/js/front/course/_social-share.js diff --git a/assets/react/front/course/_spotlight-quiz-timing.js b/assets/src/js/front/course/_spotlight-quiz-timing.js similarity index 100% rename from assets/react/front/course/_spotlight-quiz-timing.js rename to assets/src/js/front/course/_spotlight-quiz-timing.js diff --git a/assets/react/front/course/_spotlight-quiz.js b/assets/src/js/front/course/_spotlight-quiz.js similarity index 96% rename from assets/react/front/course/_spotlight-quiz.js rename to assets/src/js/front/course/_spotlight-quiz.js index f3d17bcf83..e7b7ee7bc7 100644 --- a/assets/react/front/course/_spotlight-quiz.js +++ b/assets/src/js/front/course/_spotlight-quiz.js @@ -19,20 +19,29 @@ window.jQuery(document).ready($ => { function get_reveal_wait_time() { + const quizLevelWait = Number(quiz_options.answers_reveal_duration || 0); + if (quizLevelWait > 0) { + return quizLevelWait * 1000; + } + return Number(_tutorobject.quiz_answer_display_time) || 2000; } function is_reveal_mode() { - return 'reveal' === quiz_options.feedback_mode + return Number(quiz_options.enable_answer_reveal || 0) === 1; } function get_quiz_layout_view() { return _tutorobject.quiz_options.question_layout_view } + function has_pagination_enabled() { + return Number(_tutorobject.quiz_options.enable_pagination || 0) === 1; + } + function get_hint_markup(text) { return ` - + ${text} ` } @@ -274,7 +283,11 @@ window.jQuery(document).ready($ => { * @since 1.8.10 */ - if (is_reveal_mode() && revealModeSupportedQuestions.includes($question_wrap.data('question-type'))) { + if ( + is_reveal_mode() && + get_quiz_layout_view() === 'single_question' && + revealModeSupportedQuestions.includes($question_wrap.data('question-type')) + ) { setTimeout(() => { $('.quiz-attempt-single-question').hide(); $nextQuestion.show(); @@ -290,7 +303,7 @@ window.jQuery(document).ready($ => { * If pagination exists, set active class */ - if ($('.tutor-quiz-questions-pagination').length) { + if (has_pagination_enabled() && $('.tutor-quiz-questions-pagination').length) { $('.tutor-quiz-question-paginate-item').removeClass('active'); $('.tutor-quiz-questions-pagination a[href="' + next_question_id + '"]').addClass('active'); } @@ -478,4 +491,4 @@ window.jQuery(document).ready($ => { .find('button') .prop('disabled', true); }); -}); \ No newline at end of file +}); diff --git a/assets/react/front/course/_spotlight.js b/assets/src/js/front/course/_spotlight.js similarity index 97% rename from assets/react/front/course/_spotlight.js rename to assets/src/js/front/course/_spotlight.js index c2268d0459..8d0219cb3f 100644 --- a/assets/react/front/course/_spotlight.js +++ b/assets/src/js/front/course/_spotlight.js @@ -275,6 +275,7 @@ document.addEventListener('DOMContentLoaded', (event) => { parseInt(document.querySelector('input[name="tutor_assignment_upload_limit"]')?.value) || 0; let message = ''; const maxAllowedFiles = window._tutorobject.assignment_max_file_allowed; + const allowedFileTypes = window._tutorobject.assignment_allowed_file_types; let alreadyUploaded = document.querySelectorAll( '#tutor-student-assignment-edit-file-preview .tutor-instructor-card' ).length; @@ -315,6 +316,15 @@ document.addEventListener('DOMContentLoaded', (event) => { if (!file) { continue; } + let extension = file.name.split('.').pop().toLowerCase(); + if (!allowedFileTypes.includes(`${extension}`)) { + tutor_toast( + __('Warning', 'tutor'), + __(`File type .${extension} is not allowed.`, 'tutor'), + 'error' + ); + continue; + } let editWrapClass = assignmentEditFilePreview ? 'tutor-col-sm-5 tutor-py-16 tutor-mr-16' : ''; fileCard += `
    @@ -358,7 +368,7 @@ document.addEventListener('DOMContentLoaded', (event) => { const post = await ajaxHandler(formData); if (post.ok) { const response = await post.json(); - if (!response) { + if (response.status_code !== 200 ) { tutor_toast(__('Warning', 'tutor'), __(`Attachment remove failed`, 'tutor'), 'error'); } else { currentTarget.closest('.tutor-instructor-card').remove(); diff --git a/assets/react/front/course/_wishlist.js b/assets/src/js/front/course/_wishlist.js similarity index 91% rename from assets/react/front/course/_wishlist.js rename to assets/src/js/front/course/_wishlist.js index ea9ae62620..0ca7773840 100644 --- a/assets/react/front/course/_wishlist.js +++ b/assets/src/js/front/course/_wishlist.js @@ -30,7 +30,9 @@ window.jQuery(document).ready(($) => { $that.blur(); } } else { - tutor_toast(__('Error', 'tutor-pro'), data?.data?.message ?? 'Something went wrong!!', 'error'); + if ( data?.data?.message ) { + tutor_toast(__('Error', 'tutor-pro'), data?.data?.message, 'error'); + } $('.tutor-login-modal').addClass('tutor-is-active'); $that.blur(); } diff --git a/assets/react/front/course/_woocommerce.js b/assets/src/js/front/course/_woocommerce.js similarity index 100% rename from assets/react/front/course/_woocommerce.js rename to assets/src/js/front/course/_woocommerce.js diff --git a/assets/react/front/course/index.js b/assets/src/js/front/course/index.js similarity index 90% rename from assets/react/front/course/index.js rename to assets/src/js/front/course/index.js index ba68adca33..d0b817d706 100644 --- a/assets/react/front/course/index.js +++ b/assets/src/js/front/course/index.js @@ -60,12 +60,14 @@ window.jQuery(document).ready($ => { utcDateTimes.forEach((utcDateTime) => { try { const textContent = utcDateTime.textContent.trim(); - const localDateTime = new Date(`${textContent} UTC`); + // Safari does not support format 0000-00-00, instead it needs 0000/00/00 + const dateString = textContent.replace(/-/g,'/'); + const localDateTime = new Date(`${dateString} UTC`); if (!isNaN(localDateTime)) { utcDateTime.textContent = wp.date.dateI18n(format, localDateTime, Intl.DateTimeFormat().resolvedOptions().timeZone); } else { - console.warn(`Invalid UTC date: "${textContent}"`); + console.warn(`Invalid UTC date: "${dateString}"`); } } catch (error) { console.log(error); diff --git a/assets/react/front/dashboard.js b/assets/src/js/front/dashboard.js similarity index 100% rename from assets/react/front/dashboard.js rename to assets/src/js/front/dashboard.js diff --git a/assets/react/front/dashboard/export-csv.js b/assets/src/js/front/dashboard/export-csv.js similarity index 100% rename from assets/react/front/dashboard/export-csv.js rename to assets/src/js/front/dashboard/export-csv.js diff --git a/assets/react/front/dashboard/index.js b/assets/src/js/front/dashboard/index.js similarity index 100% rename from assets/react/front/dashboard/index.js rename to assets/src/js/front/dashboard/index.js diff --git a/assets/react/front/dashboard/mobile-nav.js b/assets/src/js/front/dashboard/mobile-nav.js similarity index 100% rename from assets/react/front/dashboard/mobile-nav.js rename to assets/src/js/front/dashboard/mobile-nav.js diff --git a/assets/react/front/dashboard/settings/billing.js b/assets/src/js/front/dashboard/settings/billing.js similarity index 100% rename from assets/react/front/dashboard/settings/billing.js rename to assets/src/js/front/dashboard/settings/billing.js diff --git a/assets/react/front/dashboard/settings/passowrd-reset.js b/assets/src/js/front/dashboard/settings/passowrd-reset.js similarity index 100% rename from assets/react/front/dashboard/settings/passowrd-reset.js rename to assets/src/js/front/dashboard/settings/passowrd-reset.js diff --git a/assets/react/front/dashboard/settings/profile.js b/assets/src/js/front/dashboard/settings/profile.js similarity index 100% rename from assets/react/front/dashboard/settings/profile.js rename to assets/src/js/front/dashboard/settings/profile.js diff --git a/assets/react/front/dashboard/withdrawal.js b/assets/src/js/front/dashboard/withdrawal.js similarity index 100% rename from assets/react/front/dashboard/withdrawal.js rename to assets/src/js/front/dashboard/withdrawal.js diff --git a/assets/react/front/pages/billing.js b/assets/src/js/front/pages/billing.js similarity index 100% rename from assets/react/front/pages/billing.js rename to assets/src/js/front/pages/billing.js diff --git a/assets/react/front/pages/cart.js b/assets/src/js/front/pages/cart.js similarity index 100% rename from assets/react/front/pages/cart.js rename to assets/src/js/front/pages/cart.js diff --git a/assets/react/front/pages/checkout.js b/assets/src/js/front/pages/checkout.js similarity index 100% rename from assets/react/front/pages/checkout.js rename to assets/src/js/front/pages/checkout.js diff --git a/assets/react/front/pages/course-landing.js b/assets/src/js/front/pages/course-landing.js similarity index 86% rename from assets/react/front/pages/course-landing.js rename to assets/src/js/front/pages/course-landing.js index ee675a434b..ea272fa9e5 100644 --- a/assets/react/front/pages/course-landing.js +++ b/assets/src/js/front/pages/course-landing.js @@ -25,17 +25,19 @@ window.jQuery(document).ready(($) => { data: { action: 'tutor_reset_course_progress', course_id: course_id, + context: 'course-landing', }, beforeSend: () => { button.prop('disabled', true).addClass('is-loading'); }, success: function (response) { - if (response.success) { + if (response.status_code === 200 ) { window.location.assign(response.data.redirect_to); - } else { - alert((response.data || {}).message || __('Something went wrong', 'tutor')); } }, + error: function(response) { + tutor_toast(__( 'Error', 'tutor' ),(response.responseJSON || {}).message ||__('Something went wrong', 'tutor'), 'error' ); + }, complete: function () { button.prop('disabled', false).removeClass('is-loading'); } diff --git a/assets/react/front/pages/instructor-list-filter.js b/assets/src/js/front/pages/instructor-list-filter.js similarity index 98% rename from assets/react/front/pages/instructor-list-filter.js rename to assets/src/js/front/pages/instructor-list-filter.js index 83ccc951d5..e4d92fbaec 100644 --- a/assets/react/front/pages/instructor-list-filter.js +++ b/assets/src/js/front/pages/instructor-list-filter.js @@ -28,7 +28,7 @@ jQuery(document).ready(function($) { filter_args.action = 'load_filtered_instructor'; // Append spinner - result_container.html(''); + result_container.html(''); $.ajax({ url: window._tutorobject.ajaxurl, diff --git a/assets/react/front/tutor-front.js b/assets/src/js/front/tutor-front.js similarity index 99% rename from assets/react/front/tutor-front.js rename to assets/src/js/front/tutor-front.js index 53f5b84d9f..a9fe934d87 100644 --- a/assets/react/front/tutor-front.js +++ b/assets/src/js/front/tutor-front.js @@ -210,7 +210,7 @@ jQuery(document).ready(function($) { detail: { player: instance } }); window.dispatchEvent(customEvent); - window.tutorLessonPlayer = player; + window.TutorLessonPlayer = player; } }); diff --git a/assets/src/js/frontend/components/quiz/retry-attempt.ts b/assets/src/js/frontend/components/quiz/retry-attempt.ts new file mode 100644 index 0000000000..ec785b65e3 --- /dev/null +++ b/assets/src/js/frontend/components/quiz/retry-attempt.ts @@ -0,0 +1,40 @@ +import { type MutationState } from '@Core/ts/services/Query'; +import type { AlpineComponentMeta } from '@Core/ts/types'; + +interface RetryAttemptPayload { + quizID: string; + redirectURL: string; +} + +const quizRetryAttempt = () => { + const { query, toast, endpoints } = window.TutorCore; + const { wpPostForm } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + retryMutation: null as MutationState | null, + + init() { + this.retryMutation = query.useMutation(this.retryAttempt, { + onSuccess: (_, payload) => { + window.location.href = payload.redirectURL; + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + retryAttempt(payload: RetryAttemptPayload) { + return wpPostForm(payload.redirectURL, { + tutor_action: endpoints.START_QUIZ, + quiz_id: payload.quizID, + }); + }, + }; +}; + +export const quizRetryAttemptMeta: AlpineComponentMeta = { + name: 'quizRetryAttempt', + component: quizRetryAttempt, +}; diff --git a/assets/src/js/frontend/components/quiz/summary-sidebar.ts b/assets/src/js/frontend/components/quiz/summary-sidebar.ts new file mode 100644 index 0000000000..b69e0c6262 --- /dev/null +++ b/assets/src/js/frontend/components/quiz/summary-sidebar.ts @@ -0,0 +1,83 @@ +import type { AlpineComponentMeta } from '@Core/ts/types'; + +interface QuizSummarySidebarConfig { + firstQuestionId?: string | number; +} + +const QUESTION_ID_PREFIX = 'question-'; +const SUMMARY_HEADER_SELECTOR = '.tutor-quiz-summary-header'; +const QUESTION_ID_FALLBACK_SELECTOR = '[data-question-id="%s"]'; +const QUESTION_ID_PREFIX_FALLBACK_SELECTOR = `[data-question-id="${QUESTION_ID_PREFIX}%s"]`; +const SIDEBAR_ITEM_SELECTOR = '[data-question-id="%s"]'; +const HASH_PATTERN = new RegExp(`^#${QUESTION_ID_PREFIX}(\\d+)$`); +const QUESTION_SCROLL_GAP = 16; + +const quizSummarySidebar = (config: QuizSummarySidebarConfig = {}) => ({ + activeQuestionId: String(config.firstQuestionId ?? ''), + $el: null as HTMLElement | null, + + init() { + const hashQuestionId = this.getQuestionIdFromHash(window.location.hash); + + if (hashQuestionId && this.hasQuestionItem(hashQuestionId)) { + this.activeQuestionId = hashQuestionId; + } + }, + + getQuestionIdFromHash(hash: string): string | null { + const hashMatch = hash.match(HASH_PATTERN); + return hashMatch ? hashMatch[1] : null; + }, + + hasQuestionItem(questionId: string): boolean { + if (!questionId || !this.$el) { + return false; + } + + return !!this.$el.querySelector(SIDEBAR_ITEM_SELECTOR.replace('%s', questionId)); + }, + + setActiveQuestion(questionId: string | number) { + const resolvedId = String(questionId || ''); + + if (!resolvedId) { + return; + } + + this.activeQuestionId = resolvedId; + history.replaceState(null, '', `#${QUESTION_ID_PREFIX}${resolvedId}`); + this.scrollToQuestionAnswer(resolvedId); + }, + + scrollToQuestionAnswer(questionId: string | number) { + const resolvedId = String(questionId || ''); + + if (!resolvedId) { + return; + } + + const answerElement = + document.getElementById(`${QUESTION_ID_PREFIX}${resolvedId}`) || + document.querySelector(QUESTION_ID_PREFIX_FALLBACK_SELECTOR.replace('%s', resolvedId)) || + document.querySelector(QUESTION_ID_FALLBACK_SELECTOR.replace('%s', resolvedId)); + + if (answerElement instanceof HTMLElement) { + const summaryHeader = document.querySelector(SUMMARY_HEADER_SELECTOR); + const headerOffset = + summaryHeader instanceof HTMLElement + ? summaryHeader.getBoundingClientRect().top + summaryHeader.offsetHeight + : 0; + const scrollTop = answerElement.getBoundingClientRect().top + window.scrollY - headerOffset - QUESTION_SCROLL_GAP; + + window.scrollTo({ + top: Math.max(0, scrollTop), + behavior: 'smooth', + }); + } + }, +}); + +export const quizSummarySidebarMeta: AlpineComponentMeta = { + name: 'quizSummarySidebar', + component: quizSummarySidebar, +}; diff --git a/assets/src/js/frontend/components/reviews.ts b/assets/src/js/frontend/components/reviews.ts new file mode 100644 index 0000000000..ad1104f65b --- /dev/null +++ b/assets/src/js/frontend/components/reviews.ts @@ -0,0 +1,205 @@ +import { __ } from '@wordpress/i18n'; + +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +interface ReviewFormProps { + comment_ID?: string; + comment_post_ID: string; + rating: string; + comment_content: string; + clear_review_popup_data?: boolean; +} + +interface ReviewPayload { + course_id: string; + review_id?: string; + tutor_rating_gen_input: string; + review: string; +} + +const reviewDeleteModal = () => { + const { query, endpoints, toast } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + + return { + query, + $el: null as HTMLElement | null, + deleteReviewMutation: null as MutationState | null, + + init() { + if (!this.$el) { + return; + } + + this.deleteReviewMutation = this.query.useMutation(this.deleteReview, { + onSuccess: (data) => { + window.location.reload(); + toast.success(data?.message ?? __('Review deleted successfully', 'tutor')); + }, + onError: (error: Error) => { + toast.error(error.message || __('Failed to delete review', 'tutor')); + }, + }); + }, + + async handleDeleteReview(reviewId: string) { + await this.deleteReviewMutation?.mutate(reviewId); + }, + + async deleteReview(reviewId: string) { + return wpPost>(endpoints.DELETE_REVIEW, { + review_id: reviewId, + }); + }, + }; +}; + +const reviewModal = () => { + const { query, modal, toast, endpoints } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + query, + saveRatingMutation: null as MutationState> | null, + clear_review_popup_data: false as boolean, + + init() { + this.saveRatingMutation = this.query.useMutation(this.saveRating, { + onSuccess: async (data, variables) => { + if (this.clear_review_popup_data) { + await this.clearReviewPopupData(variables.course_id); + } + modal.closeModal('create-review-modal'); + toast.success(data.message); + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + async handleReviewSubmit(data: ReviewFormProps) { + this.clear_review_popup_data = !!data.clear_review_popup_data; + const payload = this.convertFormDataToPayload(data); + await this.saveRatingMutation?.mutate(payload); + }, + + async saveRating(payload: ReviewPayload) { + return wpPost>(endpoints.PLACE_RATING, payload); + }, + + async clearReviewPopupData(courseId: string | number) { + return wpPost(endpoints.CLEAR_REVIEW_POPUP_DATA, { + course_id: courseId, + }); + }, + + convertFormDataToPayload(data: ReviewFormProps): ReviewPayload { + return { + ...(data.comment_ID && { comment_id: data.comment_ID }), + course_id: data.comment_post_ID, + tutor_rating_gen_input: data.rating, + review: data.comment_content, + }; + }, + }; +}; + +const reviewCard = (id: string) => { + const { query, endpoints, toast } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + query, + id, + isEditMode: false, + $el: null as HTMLElement | null, + $refs: {} as { + edit: HTMLButtonElement; + delete: HTMLButtonElement; + cancel: HTMLButtonElement; + }, + saveRatingMutation: null as MutationState> | null, + + handlers: {} as { [key: string]: EventListener }, + + init() { + if (!this.$el) { + return; + } + + // Bind handlers once to maintain stable references for cleanup + this.handlers.toggleEditMode = () => this.toggleEditMode(); + + this.$refs.edit?.addEventListener('click', this.handlers.toggleEditMode); + this.$refs.cancel?.addEventListener('click', this.handlers.toggleEditMode); + this.$refs.delete?.addEventListener('click', this.handlers.onDeleteButtonClick); + + this.saveRatingMutation = this.query.useMutation(this.saveRating, { + onSuccess: (data) => { + this.isEditMode = false; + toast.success(data.message); + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + destroy() { + this.$refs.edit?.removeEventListener('click', this.handlers.toggleEditMode); + this.$refs.cancel?.removeEventListener('click', this.handlers.toggleEditMode); + this.$refs.delete?.removeEventListener('click', this.handlers.onDeleteButtonClick); + }, + + async handleReviewSubmit(data: ReviewFormProps) { + const payload = this.convertFormDataToPayload(data); + await this.saveRatingMutation?.mutate(payload); + }, + + async saveRating(payload: ReviewPayload) { + return wpPost>(endpoints.PLACE_RATING, payload); + }, + + convertFormDataToPayload(data: ReviewFormProps): ReviewPayload { + return { + ...(data.comment_ID && { comment_id: data.comment_ID }), + course_id: data.comment_post_ID, + tutor_rating_gen_input: data.rating, + review: data.comment_content, + }; + }, + + toggleEditMode() { + this.isEditMode = !this.isEditMode; + }, + }; +}; + +const reviewServicesMeta = { + name: 'reviewDeleteModal', + component: reviewDeleteModal, +}; + +const reviewModalMeta = { + name: 'reviewModal', + component: reviewModal, +}; + +const reviewCardMeta = { + name: 'reviewCard', + component: reviewCard, +}; + +export const initializeReviews = () => { + window.TutorComponentRegistry.registerAll({ + components: [reviewCardMeta, reviewServicesMeta, reviewModalMeta], + }); + + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/header.ts b/assets/src/js/frontend/dashboard/header.ts new file mode 100644 index 0000000000..ec845a1896 --- /dev/null +++ b/assets/src/js/frontend/dashboard/header.ts @@ -0,0 +1,41 @@ +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +const header = () => { + const { query, toast } = window.TutorCore; + const { tutorConfig } = window.TutorCore.config; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + query, + profileSwitchMutation: null as MutationState | null, + init() { + this.profileSwitchMutation = this.query.useMutation( + (currentMode: string) => wpPost('tutor_switch_profile', { current_mode: currentMode }), + { + onSuccess: (res: AjaxResponse) => { + toast.success(res?.message); + setTimeout(() => { + window.location.href = tutorConfig.tutor_frontend_dashboard_url; + }, 1000); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }, + ); + }, + }; +}; + +export const initializeHeader = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'header', + component: header, + }, + }); + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/index.ts b/assets/src/js/frontend/dashboard/index.ts new file mode 100644 index 0000000000..f2c3b0a401 --- /dev/null +++ b/assets/src/js/frontend/dashboard/index.ts @@ -0,0 +1,125 @@ +// Dashboard Entry Point +// Initializes dashboard functionality based on current page + +import { initializeReviews } from '@FrontendComponents/reviews'; +import { initializeCommon } from '@FrontendServices/common'; + +import { initializeHeader } from './header'; +import { initializeAnnouncements } from './pages/announcements'; +import { initBillingCsvExport } from './pages/billing'; +import { initializeDiscussions } from './pages/discussions'; +import { initializeHome } from './pages/instructor/home'; +import { initializeMyCourses } from './pages/my-courses'; +import { initializeQuizAttempts } from './pages/quiz-attempts'; +import { initializeSettings } from './pages/settings'; +import { initializeWithdrawals } from './pages/withdrawals'; +import { initializeTour } from './tour'; + +/** + * Get current dashboard page from URL + * + * @since 4.0.0 + */ +const getCurrentPage = (): string => { + const path = window.location.pathname; + const params = new URLSearchParams(window.location.search); + + // Check for subpage parameter - if not 'dashboard', return early + const subpage = params.get('page') ? params.get('subpage') : ''; + if (subpage && subpage !== 'dashboard') { + return ''; // Not on dashboard, will be handled by early return in initializeDashboard + } + + // Check for dashboard-page parameter (highest priority when subpage=dashboard) + const dashboardPage = params.get('dashboard-page'); + if (dashboardPage) { + return dashboardPage; + } + + // Check for legacy query parameters + const pageParam = params.get('subpage'); + if (pageParam) { + return pageParam; + } + + // Check URL path patterns + if (path.includes('/my-courses') || path.includes('my-courses')) { + return 'my-courses'; + } + if (path.includes('/announcements')) { + return 'announcements'; + } + if (path.includes('/quiz-attempts') || path.includes('/my-quiz-attempts')) { + return 'quiz-attempts'; + } + if (path.includes('/discussions')) { + return 'discussions'; + } + if (path.includes('/reviews')) { + return 'reviews'; + } + if (path.includes('/account/withdrawals')) { + return 'withdrawals'; + } + if (path.includes('/account/billing')) { + return 'billing'; + } + if (path.includes('/settings')) { + return 'settings'; + } + + // Default to home when subpage=dashboard + return 'home'; +}; + +const initializeDashboard = () => { + initializeHeader(); + initializeCommon(); + initializeTour(); + + const currentPage = getCurrentPage(); + + // Initialize page-specific functionality + switch (currentPage) { + case 'home': + case 'dashboard': + initializeHome(); + break; + case 'my-courses': + initializeMyCourses(); + break; + case 'announcements': + initializeAnnouncements(); + break; + case 'quiz-attempts': + initializeQuizAttempts(); + break; + case 'discussions': + initializeDiscussions(); + break; + case 'reviews': + initializeReviews(); + break; + case 'withdrawals': + initializeWithdrawals(); + break; + case 'billing': + initBillingCsvExport(); + break; + case 'settings': + initializeSettings(); + break; + default: + // eslint-disable-next-line no-console + console.warn('Unknown dashboard page:', currentPage); + } +}; + +// Initialize when Alpine is ready +if (document.readyState === 'loading') { + document.addEventListener('alpine:init', initializeDashboard); +} else { + initializeDashboard(); +} + +export { initializeDashboard }; diff --git a/assets/src/js/frontend/dashboard/pages/announcements.ts b/assets/src/js/frontend/dashboard/pages/announcements.ts new file mode 100644 index 0000000000..5a715241c8 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/announcements.ts @@ -0,0 +1,192 @@ +import { __ } from '@wordpress/i18n'; + +import { type FormControlMethods } from '@Core/ts/components/form'; +import { type MutationState } from '@Core/ts/services/Query'; +interface AnnouncementFormData { + id: number; + course_id: string; + title: string; + summary: string; + tutor_notify_all_students?: boolean; + tutor_push_notify_students?: boolean; + action_type: 'create' | 'update'; +} + +interface AnnouncementPayload extends Record { + tutor_announcement_course: string; + tutor_announcement_title: string; + tutor_announcement_summary: string; + tutor_notify_all_students?: 'on' | 'off'; + tutor_push_notify_students?: 'on' | 'off'; + action_type: 'create' | 'update'; + announcement_id?: number; +} + +interface AnnouncementResponse { + success: boolean; + data?: { + message?: string; + }; +} + +interface AnnouncementProps { + formId: string; + deleteModalId: string; + createModalId: string; +} + +const announcementsPage = ({ formId, deleteModalId, createModalId }: AnnouncementProps) => { + const { query, modal, toast, form, endpoints } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + const ANNOUNCEMENTS_IDS = { + FORM: formId, + DELETE: deleteModalId, + CREATE: createModalId, + }; + + return { + query, + deleteMutation: null as MutationState | null, + createUpdateMutation: null as MutationState | null, + + formData: { + id: 0, + course_id: '', + title: '', + summary: '', + tutor_notify_all_students: true, + action_type: 'create', + } as AnnouncementFormData, + + get formTitle() { + return this.formData.action_type === 'create' + ? __('Create Announcement', 'tutor') + : __('Edit Announcement', 'tutor'); + }, + + get formActionText() { + return this.formData.action_type === 'create' ? __('Publish', 'tutor') : __('Update', 'tutor'); + }, + + init() { + // Setup delete mutation + this.deleteMutation = this.query.useMutation(this.deleteAnnouncement, { + onSuccess: () => { + modal.closeModal(ANNOUNCEMENTS_IDS.DELETE); + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Setup create/update mutation + this.createUpdateMutation = this.query.useMutation(this.createUpdateAnnouncement, { + onSuccess: (response) => { + modal.closeModal(ANNOUNCEMENTS_IDS.CREATE); + toast.success(response.data?.message || __('Operation successful', 'tutor')); + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + async deleteAnnouncement(announcementId: number) { + return wpPost(endpoints.DELETE_ANNOUNCEMENT, { + announcement_id: announcementId, + }); + }, + + async createUpdateAnnouncement(payload: AnnouncementPayload) { + return wpPost(endpoints.CREATE_ANNOUNCEMENT, payload); + }, + + async handleDeleteAnnouncement(announcementId: number) { + await this.deleteMutation?.mutate(announcementId); + }, + + openCreateModal() { + this.formData.action_type = 'create'; + this.formData.id = 0; + modal.showModal(ANNOUNCEMENTS_IDS.CREATE); + + if (form.hasForm(formId)) { + form.reset(formId); + } + }, + + openEditModal(data: { + id: number; + title: string; + summary: string; + course_id: number; + tutor_notify_all_students: boolean; + }) { + this.formData.id = data.id; + this.formData.course_id = data.course_id.toString(); + this.formData.title = data.title; + this.formData.summary = data.summary; + this.formData.action_type = 'update'; + + modal.showModal(ANNOUNCEMENTS_IDS.CREATE); + + const formEl = document.getElementById(ANNOUNCEMENTS_IDS.FORM); + + if (!formEl) return; + + // Manual registration fallback if auto-init hasn't fired yet + if (!form.hasForm(formId)) { + const alpineForm = window.Alpine.$data(formEl); + form.register(formId, alpineForm as unknown as FormControlMethods); + } + + if (form.hasForm(formId)) { + const values = { + tutor_announcement_course: String(data.course_id), + tutor_announcement_title: data.title, + tutor_announcement_summary: data.summary, + tutor_notify_all_students: true, + tutor_push_notify_students: true, + }; + + form.setValues(formId, values); + } + }, + + async handleFormSubmit(data: AnnouncementPayload) { + const payload: AnnouncementPayload = { + ...(data.tutor_notify_all_students && { + tutor_notify_all_students: data.tutor_notify_all_students ? 'on' : 'off', + }), + ...(data.tutor_push_notify_students && { + tutor_push_notify_students: data.tutor_push_notify_students ? 'on' : 'off', + }), + tutor_announcement_course: data.tutor_announcement_course || '', + tutor_announcement_title: data.tutor_announcement_title || '', + tutor_announcement_summary: data.tutor_announcement_summary || '', + action_type: this.formData.action_type, + }; + + if (this.formData.action_type === 'update') { + payload.announcement_id = this.formData.id; + } + + await this.createUpdateMutation?.mutate(payload); + }, + }; +}; + +export const initializeAnnouncements = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'announcements', + component: announcementsPage, + }, + }); + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/pages/billing.ts b/assets/src/js/frontend/dashboard/pages/billing.ts new file mode 100644 index 0000000000..7c68881116 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/billing.ts @@ -0,0 +1,48 @@ +type CsvRow = Record; + +function exportCSV(data: CsvRow[], filename: string): void { + if (!data.length) { + return; + } + + const headers = Object.keys(data[0]); + const rows = data.map((row) => headers.map((header) => `"${(row[header] ?? '').replace(/"/g, '""')}"`).join(',')); + + const csv = [headers.join(','), ...rows].join('\n'); + const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + + link.href = url; + link.download = filename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(url); +} + +function bindBillingCsvExport(): void { + document.querySelectorAll('.tutor-export-purchase-history').forEach((link) => { + link.addEventListener('click', (event) => { + event.preventDefault(); + + const filename = `order-${link.dataset.order ?? ''}-purchase-history.csv`; + + const data: CsvRow[] = [ + { + 'Order ID': link.dataset.order ?? '', + 'Course Name': link.dataset.courseName ?? '', + Price: link.dataset.price ?? '', + Date: link.dataset.date ?? '', + Status: link.dataset.status ?? '', + }, + ]; + + exportCSV(data, filename); + }); + }); +} + +export const initBillingCsvExport = () => { + bindBillingCsvExport(); +}; diff --git a/assets/src/js/frontend/dashboard/pages/discussions.ts b/assets/src/js/frontend/dashboard/pages/discussions.ts new file mode 100644 index 0000000000..551ad8cc02 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/discussions.ts @@ -0,0 +1,490 @@ +import { __ } from '@wordpress/i18n'; + +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +interface ReplyCommentPayload { + comment_post_ID: number; + comment_parent: number; + comment: string; + reply_context?: 'list' | 'single'; +} + +interface DeleteCommentPayload { + comment_id: number; + is_reply?: boolean; +} + +interface QnASingleActionPayload { + question_id: number; + qna_action: string; + [key: string]: string | number; +} + +interface ReplyQnAPayload { + course_id: number; + question_id: number; + answer: string; + reply_context?: 'list' | 'single'; +} +interface UpdateQnAPayload { + question_id: number; + answer: string; +} + +interface DeleteQnAPayload { + question_id: number; + context?: 'question' | 'reply'; +} + +type DiscussionCardType = 'qna' | 'comment'; + +const FORM_ID_PREFIXES = { + COMMENT_EDIT: 'lesson-comment-edit-', + COMMENT_REPLY: 'lesson-comment-reply-form-', + QNA_EDIT: 'qna-edit-', + QNA_REPLY: 'qna-reply-form-', +}; + +const MODALS = { + COMMENT_DELETE: 'tutor-comment-delete-modal', + QNA_DELETE: 'tutor-qna-delete-modal', +}; + +const ELEMENT_IDS = { + COMMENT_TEXT_PREFIX: 'tutor-lesson-comment-text-', + QNA_TEXT_PREFIX: 'tutor-qna-text-', + REPLIES_LIST_CONTAINER: 'tutor-discussion-replies-list', +}; + +const URL_PARAMS = { + TAB: 'tab', + ID: 'id', + ORDER: 'order', +}; + +const CARD_TITLE_WORD_LIMIT = 60; + +/** + * Discussions Page Component + * Handles Q&A, Lesson comments related actions + */ +const discussionsPage = () => { + const { query, form, toast, modal, endpoints } = window.TutorCore; + const { decodeHtmlEntities } = window.TutorCore.string; + const { convertToErrorMessage } = window.TutorCore.error; + const { wpPost } = window.TutorCore.api; + + return { + query, + deleteCommentMutation: null as MutationState | null, + replyCommentMutation: null as MutationState | null, + editCommentMutation: null as MutationState | null, + qnaSingleActionMutation: null as MutationState | null, + deleteQnAMutation: null as MutationState | null, + replyQnAMutation: null as MutationState | null, + updateQnAMutation: null as MutationState | null, + loadQnARepliesMutation: null as MutationState | null, + currentAction: null as string | null, + currentQuestionId: null as number | null, + isSolved: false, + isImportant: false, + isArchived: false, + editingId: null as number | null, + editingFormId: null as string | null, + replyingId: null as number | null, + replyingCommentId: null as number | null, + loadingReplies: false, + repliesOrder: 'DESC', + $nextTick: undefined as ((callback: () => void) => void) | undefined, + + init() { + // Set initial state from URL + const url = new URL(window.location.href); + this.repliesOrder = url.searchParams.get(URL_PARAMS.ORDER) || 'DESC'; + + // Lesson comment delete mutation. + this.deleteCommentMutation = this.query.useMutation(this.deleteComment, { + onSuccess: (_, payload) => { + if (payload.is_reply) { + toast.success(__('Reply deleted successfully', 'tutor')); + modal.closeModal(MODALS.COMMENT_DELETE); + this.reloadReplies(); + } else { + const url = new URL(window.location.href); + url.searchParams.delete(URL_PARAMS.ID); + window.location.href = url.toString(); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Lesson comment reply mutation + this.replyCommentMutation = this.query.useMutation(this.replyComment, { + onSuccess: (_, payload) => { + toast.success(__('Reply saved successfully', 'tutor')); + + const formId = `${FORM_ID_PREFIXES.COMMENT_REPLY}${payload.comment_parent}`; + if (form.hasForm(formId)) { + form.reset(formId); + } + + if (payload.reply_context === 'single') { + this.reloadReplies(); + } else { + this.setReplyingComment(null); + this.updateCommentReplyCount(payload.comment_parent); + this.highlightCard(payload.comment_parent, 'comment'); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Lesson comment edit mutation. + this.editCommentMutation = this.query.useMutation(this.updateComment, { + onSuccess: (_, payload) => { + toast.success(__('Comment updated successfully.', 'tutor')); + + const element = document.getElementById(`${ELEMENT_IDS.COMMENT_TEXT_PREFIX}${payload.comment_id}`); + if (element) { + element.innerHTML = payload.comment; + } + + if (this.editingFormId && form.hasForm(this.editingFormId)) { + form.reset(this.editingFormId); + this.editingFormId = null; + } + + this.editingId = null; + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Q&A single action mutation (read, unread, solved, important, archived). + this.qnaSingleActionMutation = this.query.useMutation(this.qnaSingleAction, { + onSuccess: (_, payload: QnASingleActionPayload) => { + const action = payload.qna_action; + if (action === 'solved') { + this.isSolved = !this.isSolved; + } else if (action === 'important') { + this.isImportant = !this.isImportant; + } else if (action === 'archived') { + this.isArchived = !this.isArchived; + } + + window.dispatchEvent( + new CustomEvent('tutor-qna-action-success', { + detail: { questionId: payload.question_id, action }, + }), + ); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Q&A delete mutation. + this.deleteQnAMutation = this.query.useMutation(this.deleteQnA, { + onSuccess: (_, payload) => { + if (payload.context === 'reply') { + toast.success(__('Reply deleted successfully', 'tutor')); + modal.closeModal(MODALS.QNA_DELETE); + // this.reloadReplies(); + window.location.reload(); + } else { + const url = new URL(window.location.href); + url.searchParams.delete(URL_PARAMS.ID); + window.location.href = url.toString(); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Q&A reply mutation. + this.replyQnAMutation = this.query.useMutation(this.replyQnA, { + onSuccess: (_, payload) => { + toast.success(__('Reply saved successfully', 'tutor')); + + const formId = `${FORM_ID_PREFIXES.QNA_REPLY}${payload.question_id}`; + if (form.hasForm(formId)) { + form.reset(formId); + } + + if (payload.reply_context === 'single') { + // this.reloadReplies(); + window.location.reload(); + } else { + this.setReplying(null); + this.updateReplyCount(payload.question_id); + this.highlightCard(payload.question_id); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Q&A update mutation. + this.updateQnAMutation = this.query.useMutation(this.updateQnA, { + onSuccess: (_, payload) => { + toast.success(__('Updated successfully', 'tutor')); + + // Update DOM directly for immediate feedback + const element = document.getElementById(`${ELEMENT_IDS.QNA_TEXT_PREFIX}${payload.question_id}`); + if (element) { + if (element.closest('.tutor-discussion-card')) { + const striped_answer = decodeHtmlEntities(payload.answer); + element.innerHTML = + striped_answer.length > CARD_TITLE_WORD_LIMIT + ? `${striped_answer.substring(0, 60)}...` + : striped_answer; + } else { + element.innerHTML = payload.answer; + } + + // Re-trigger syntax highlighting if Prism is available. + const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism; + if (Prism?.highlightAllUnder) { + Prism.highlightAllUnder(element); + } + } + + if (this.editingId === payload.question_id) { + this.setEditing(null); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + async reloadReplies(order?: string) { + if (order) { + this.repliesOrder = order; + } + + const url = new URL(window.location.href); + const commentId = parseInt(url.searchParams.get(URL_PARAMS.ID) || '0'); + const tab = url.searchParams.get(URL_PARAMS.TAB) || 'qna'; + + if (!commentId) return; + + this.loadingReplies = true; + try { + const endpoint = tab === 'qna' ? endpoints.LOAD_QNA_REPLIES : endpoints.LOAD_COMMENT_REPLIES; + const response = await wpPost>(endpoint, { + comment_id: commentId, + order: this.repliesOrder, + }); + + const container = document.getElementById(ELEMENT_IDS.REPLIES_LIST_CONTAINER); + if (container && typeof response.data?.html === 'string') { + container.innerHTML = response.data.html; + + // Re-trigger syntax highlighting if Prism is available. + const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism; + if (Prism?.highlightAllUnder) { + Prism.highlightAllUnder(container); + } + + // Update URL without reload + const url = new URL(window.location.href); + url.searchParams.set(URL_PARAMS.ORDER, this.repliesOrder); + window.history.pushState({}, '', url.toString()); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error('Failed to reload replies:', error); + } finally { + this.loadingReplies = false; + } + }, + + deleteComment(payload: DeleteCommentPayload) { + return wpPost(endpoints.DELETE_LESSON_COMMENT, payload); + }, + + replyComment(payload: ReplyCommentPayload) { + return wpPost(endpoints.REPLY_LESSON_COMMENT, payload); + }, + + updateComment(payload: { comment_id: number; comment: string }) { + return wpPost(endpoints.UPDATE_LESSON_COMMENT, payload); + }, + + qnaSingleAction(payload: QnASingleActionPayload) { + return wpPost(endpoints.QNA_SINGLE_ACTION, payload); + }, + + deleteQnA(payload: DeleteQnAPayload) { + return wpPost(endpoints.DELETE_DASHBOARD_QNA, payload); + }, + + replyQnA(payload: ReplyQnAPayload) { + return wpPost(endpoints.CREATE_UPDATE_QNA, payload); + }, + + updateQnA(payload: UpdateQnAPayload) { + return wpPost(endpoints.UPDATE_QNA, payload); + }, + + async handleQnASingleAction(questionId: number, action: string, extras: Record = {}) { + this.currentAction = action; + this.currentQuestionId = questionId; + try { + await this.qnaSingleActionMutation?.mutate({ + question_id: questionId, + qna_action: action, + ...extras, + }); + } finally { + this.currentAction = null; + this.currentQuestionId = null; + } + }, + + handleReplyComment( + data: { comment: string }, + commentId: number, + courseId: number, + context: ReplyCommentPayload['reply_context'] = 'single', + ) { + return this.replyCommentMutation?.mutate({ + comment: data.comment, + comment_parent: commentId, + comment_post_ID: courseId, + reply_context: context, + }); + }, + + handleEditComment(data: { comment: string }, commentId: number) { + return this.editCommentMutation?.mutate({ + comment_id: commentId, + comment: data.comment, + }); + }, + + handleKeydown(event: KeyboardEvent) { + if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { + (event.target as HTMLFormElement).closest('form')?.requestSubmit(); + } + }, + + setEditing(id: number | null, context = 'comment') { + const prefix = context === 'qna' ? FORM_ID_PREFIXES.QNA_EDIT : FORM_ID_PREFIXES.COMMENT_EDIT; + const field = context === 'qna' ? 'answer' : 'comment'; + + this.editingId = id; + const formId = id ? `${prefix}${id}` : null; + this.editingFormId = formId; + + if (id && formId) { + this.$nextTick?.(() => { + if (form.hasForm(formId)) { + form.setFocus(formId, field); + } + }); + } + }, + + setReplying(id: number | null) { + this.replyingId = id; + + if (id) { + const formId = `${FORM_ID_PREFIXES.QNA_REPLY}${id}`; + this.$nextTick?.(() => { + if (form.hasForm(formId)) { + form.setFocus(formId, 'answer'); + } + }); + } + }, + + toggleReply(id: number) { + if (this.replyingId === id) { + this.setReplying(null); + } else { + this.setReplying(id); + } + }, + + updateReplyCount(questionId: number) { + // Find the reply count element and increment it + const card = document.querySelector(`[data-question-id="${questionId}"]`); + if (card) { + const countElement = card.querySelector('.tutor-discussion-card-reply-count'); + if (countElement) { + const currentCount = parseInt(countElement.textContent || '0', 10); + countElement.textContent = String(currentCount + 1); + } + } + }, + + setReplyingComment(id: number | null) { + this.replyingCommentId = id; + + if (id) { + const formId = `${FORM_ID_PREFIXES.COMMENT_REPLY}${id}`; + this.$nextTick?.(() => { + if (form.hasForm(formId)) { + form.setFocus(formId, 'comment'); + } + }); + } + }, + + toggleCommentReply(id: number) { + if (this.replyingCommentId === id) { + this.setReplyingComment(null); + } else { + this.setReplyingComment(id); + } + }, + + updateCommentReplyCount(commentId: number) { + // Find the reply count element and increment it + const card = document.querySelector(`[data-comment-id="${commentId}"]`); + if (card) { + const countElement = card.querySelector('.tutor-discussion-card-reply-count'); + if (countElement) { + const currentCount = parseInt(countElement.textContent || '0', 10); + countElement.textContent = String(currentCount + 1); + } + } + }, + + highlightCard(id: number, type: DiscussionCardType = 'qna') { + const attr = type === 'comment' ? 'data-comment-id' : 'data-question-id'; + const el = document.querySelector(`[${attr}="${id}"]`); + const card = (el?.closest('.tutor-discussion-card') ?? el) as HTMLElement | null; + if (!card) return; + + if (window.innerWidth > 576) { + card.style.boxShadow = '0 0 0 2px var(--tutor-text-brand-secondary)'; + setTimeout(() => { + card.style.boxShadow = ''; + }, 300); + } + }, + }; +}; + +export const initializeDiscussions = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'discussions', + component: discussionsPage, + }, + }); + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/pages/instructor/home-charts.ts b/assets/src/js/frontend/dashboard/pages/instructor/home-charts.ts new file mode 100644 index 0000000000..392c3e3796 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/instructor/home-charts.ts @@ -0,0 +1,902 @@ +import type { Chart, ChartConfiguration, ChartItem, ScriptableContext, TooltipModel } from 'chart.js/auto'; + +export interface OverviewChartProps { + earnings: number[]; + enrolled: number[]; + labels: string[]; + enrollment_date: string[]; + earning_date: string[]; + currency: MonetizationData; +} + +export interface ChartColors { + line: string; + point: string; + pointBorder: string; + linearGradient?: string[]; +} + +export interface TooltipColors { + background: string; + title: string; + subtitle: string; +} + +export interface OverviewChartColors { + earnings: ChartColors & { linearGradient: string[] }; + enrolled: ChartColors & { linearGradient: string[] }; + tooltip: TooltipColors; + ticks: { color: string }; + border: string; +} + +export interface StatCardColors extends ChartColors { + tooltip: TooltipColors; +} + +export type CourseCompletionChartDataKey = 'enrolled' | 'completed' | 'in_progress' | 'inactive' | 'cancelled'; + +export type CourseCompletionChartData = { + [key in CourseCompletionChartDataKey]: { + label: string; + value: number; + }; +}; + +type MonetizationData = { + symbol: string; + position: 'left' | 'right'; + thousand_separator: string; + decimal_separator: string; + no_of_decimal: number | string; +}; + +type ChartConstructor = new (item: ChartItem, config: ChartConfiguration) => Chart; + +let chartConstructorPromise: Promise | null = null; + +const loadChartConstructor = async (): Promise => { + chartConstructorPromise ??= import(/* webpackChunkName: "tutor-chart-js" */ 'chart.js/auto').then( + ({ Chart }) => Chart, + ); + + return chartConstructorPromise; +}; + +const CHART_CONFIG = { + canvas: { + statCardHeight: '33px', + width: '100%', + overviewMaxHeight: 179, + completionMaxHeight: 118, + }, + + aspectRatio: { + overview: 3, + }, + + point: { + radius: 4, + hoverRadius: 6, + borderWidth: 2, + hoverBorderWidth: 3, + }, + + line: { + width: 1.3, + tension: 0.4, + }, + + bar: { + thickness: 118, + borderRadius: 5, + borderWidth: 3, + }, + + gradient: { + topOffset: -0.95, + opacity: 0.9, + }, + + tooltip: { + fontSize: '10px', + lineHeight: '1.6', + padding: '4px 7px', + minWidth: '70px', + borderRadius: '4px', + boxShadow: '0px 2px 4px -2px #1018280F, 0px 4px 8px -2px #1018281A', + caretSize: 6, + caretInnerSize: 5, + caretInnerOffset: 4, + barOffsetX: 6, + lineOffsetX: 12, + }, + + common: { + devicePixelRatio: () => window.devicePixelRatio || 2, + responsive: true, + hiddenLegend: { display: false }, + disabledTooltip: { enabled: false }, + hiddenAxis: { display: false, grid: { display: false } }, + }, +} as const; + +const hexToRgba = (hex: string, alpha: number): string => { + // Expand 3-digit hex (#RGB → #RRGGBB) + const normalized = hex.length === 4 ? `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex; + + const r = parseInt(normalized.slice(1, 3), 16) || 0; + const g = parseInt(normalized.slice(3, 5), 16) || 0; + const b = parseInt(normalized.slice(5, 7), 16) || 0; + + return `rgba(${r}, ${g}, ${b}, ${alpha})`; +}; + +const isEndPoint = (index: number, dataLength: number): boolean => { + return index === 0 || index === dataLength - 1; +}; + +const getCSSProperty = (element: HTMLElement, propertyName: string): string => { + return getComputedStyle(element).getPropertyValue(propertyName).trim(); +}; + +const shouldReduceMotion = (): boolean => { + const wrapper = document.querySelector('[data-tutor-theme]') || document.documentElement; + const motion = wrapper.getAttribute('data-tutor-motion'); + return ( + motion === 'reduce' || + ((!motion || motion === 'auto') && window.matchMedia('(prefers-reduced-motion: reduce)').matches) + ); +}; + +const getAnimationConfig = (): { duration: 0 } | undefined => { + if (shouldReduceMotion()) { + return { duration: 0 }; + } + return undefined; +}; + +const getCompletionChartAnimation = (): { duration: 0 } | Record => { + if (shouldReduceMotion()) { + return { duration: 0 }; + } + + return { + base: { duration: 0 }, + x: { + from: (ctx: Record) => { + const chart = ctx.chart as { + scales: { x: { getPixelForValue: (v: number) => number } }; + data: { datasets: Array<{ data: Array }> }; + }; + const dataIndex = ctx.dataIndex as number; + const datasetIndex = ctx.datasetIndex as number; + let cumulative = 0; + for (let i = 0; i < datasetIndex; i++) { + cumulative += chart.data.datasets[i].data[dataIndex] || 0; + } + return chart.scales.x.getPixelForValue(cumulative); + }, + }, + }; +}; + +const createChart = (canvas: HTMLCanvasElement, config: ChartConfiguration): void => { + requestAnimationFrame(async () => { + const Chart = await loadChartConstructor(); + new Chart(canvas, config); + }); +}; + +const initWhenVisible = (canvas: HTMLCanvasElement, callback: () => void): void => { + if (canvas.clientWidth > 0) { + callback(); + return; + } + + const observer = new ResizeObserver(() => { + if (canvas.clientWidth > 0) { + observer.disconnect(); + callback(); + } + }); + + observer.observe(canvas); +}; + +const extractStatCardColors = (element: HTMLElement, data: number[]): StatCardColors => { + const isPositiveTrend = data[data.length - 1] > data[0]; + + return { + line: getCSSProperty(element, isPositiveTrend ? '--tutor-border-success' : '--tutor-border-error'), + point: getCSSProperty(element, isPositiveTrend ? '--tutor-actions-success-primary' : '--tutor-icon-critical'), + pointBorder: getCSSProperty(element, '--tutor-surface-l2'), + tooltip: { + background: getCSSProperty(element, '--tutor-surface-l1'), + title: getCSSProperty(element, '--tutor-text-subdued'), + subtitle: getCSSProperty(element, '--tutor-text-primary'), + }, + }; +}; + +const extractOverviewChartColors = (element: HTMLElement): OverviewChartColors => { + return { + earnings: { + line: getCSSProperty(element, '--tutor-border-brand'), + point: getCSSProperty(element, '--tutor-actions-brand-primary'), + pointBorder: getCSSProperty(element, '--tutor-actions-brand-secondary'), + linearGradient: ['#5E81F4', getCSSProperty(element, '--tutor-surface-l1')], + }, + enrolled: { + line: getCSSProperty(element, '--tutor-border-success'), + point: getCSSProperty(element, '--tutor-actions-success-primary'), + pointBorder: getCSSProperty(element, '--tutor-actions-success-secondary'), + linearGradient: ['#8AF1B9', getCSSProperty(element, '--tutor-surface-l1')], + }, + tooltip: { + background: getCSSProperty(element, '--tutor-surface-l1-hover'), + title: getCSSProperty(element, '--tutor-text-subdued'), + subtitle: getCSSProperty(element, '--tutor-text-primary'), + }, + ticks: { + color: getCSSProperty(element, '--tutor-text-subdued'), + }, + border: getCSSProperty(element, '--tutor-border-idle'), + }; +}; + +const extractCompletionChartColors = (element: HTMLElement) => { + return { + enrolled: getCSSProperty(element, '--tutor-actions-exception5'), + completed: getCSSProperty(element, '--tutor-actions-success-primary'), + in_progress: getCSSProperty(element, '--tutor-actions-caution'), + inactive: getCSSProperty(element, '--tutor-surface-l2-hover'), + cancelled: getCSSProperty(element, '--tutor-actions-critical-primary'), + tooltip: { + background: getCSSProperty(element, '--tutor-surface-l1'), + title: getCSSProperty(element, '--tutor-text-subdued'), + subtitle: getCSSProperty(element, '--tutor-text-primary'), + }, + }; +}; + +const createLinearGradient = ( + ctx: CanvasRenderingContext2D, + chartArea: { top: number; bottom: number }, + colorTop: string, + colorBottom: string = getCSSProperty(document.documentElement, '--tutor-surface-l1'), +): CanvasGradient => { + const height = chartArea.bottom - chartArea.top; + const adjustedTop = chartArea.top + height * CHART_CONFIG.gradient.topOffset; + const gradient = ctx.createLinearGradient(0, adjustedTop, 0, chartArea.bottom); + + gradient.addColorStop(0, hexToRgba(colorTop, CHART_CONFIG.gradient.opacity)); + gradient.addColorStop(1, hexToRgba(colorBottom, 0)); + return gradient; +}; + +const createTooltipElement = (): HTMLDivElement => { + const tooltipEl = document.createElement('div'); + tooltipEl.setAttribute('data-chart-tooltip', ''); + Object.assign(tooltipEl.style, { + background: 'transparent', + pointerEvents: 'none', + position: 'absolute', + transform: 'translate(-50%, 0)', + transition: 'all .1s ease', + }); + + const table = document.createElement('table'); + table.style.margin = '0px'; + tooltipEl.appendChild(table); + + return tooltipEl; +}; + +const getOrCreateTooltip = (chart: Chart): HTMLDivElement => { + const container = chart.canvas.parentElement; + + if (!container) { + return createTooltipElement(); + } + + if (getComputedStyle(container).position === 'static') { + container.style.position = 'relative'; + } + + let tooltipEl = container.querySelector('div[data-chart-tooltip]') as HTMLDivElement; + + if (!tooltipEl) { + tooltipEl = createTooltipElement(); + container.appendChild(tooltipEl); + } + + return tooltipEl; +}; + +const shouldShowTooltip = (tooltip: TooltipModel<'line'> | TooltipModel<'bar'>, chartType: string): boolean => { + if (tooltip.opacity === 0 || !tooltip.dataPoints?.length) { + return false; + } + + if (chartType === 'bar') { + return true; + } + + const dataPoint = tooltip.dataPoints[0]; + const datasetLength = dataPoint.dataset.data.length; + const isEndPoint = dataPoint.dataIndex === 0 || dataPoint.dataIndex === datasetLength - 1; + + return !isEndPoint; +}; + +const createTooltipHeader = (titleLines: string[], colors: { tooltip: TooltipColors }): HTMLElement => { + const tableHead = document.createElement('thead'); + + if (titleLines.length === 0 || titleLines[0] === '') { + return tableHead; + } + + for (const title of titleLines) { + const tr = document.createElement('tr'); + tr.style.borderWidth = '0'; + + const th = document.createElement('th'); + Object.assign(th.style, { + borderWidth: '0', + fontSize: CHART_CONFIG.tooltip.fontSize, + lineHeight: CHART_CONFIG.tooltip.lineHeight, + fontWeight: 'normal', + color: colors.tooltip.title, + textAlign: 'start', + }); + + th.appendChild(document.createTextNode(title)); + tr.appendChild(th); + tableHead.appendChild(tr); + } + + return tableHead; +}; + +const createTooltipBody = (bodyLines: string[][], colors: { tooltip: TooltipColors }): HTMLElement => { + const tableBody = document.createElement('tbody'); + + for (const body of bodyLines) { + const tr = document.createElement('tr'); + Object.assign(tr.style, { + backgroundColor: 'inherit', + borderWidth: '0', + }); + + const td = document.createElement('td'); + Object.assign(td.style, { + borderWidth: '0', + fontSize: CHART_CONFIG.tooltip.fontSize, + lineHeight: CHART_CONFIG.tooltip.lineHeight, + fontWeight: 'bold', + color: colors.tooltip.subtitle, + textAlign: 'start', + }); + + td.appendChild(document.createTextNode(body[0])); + tr.appendChild(td); + tableBody.appendChild(tr); + } + + return tableBody; +}; + +const styleTooltipTable = (table: HTMLTableElement, colors: { tooltip: TooltipColors }): void => { + Object.assign(table.style, { + background: colors.tooltip.background, + borderRadius: CHART_CONFIG.tooltip.borderRadius, + padding: CHART_CONFIG.tooltip.padding, + minWidth: CHART_CONFIG.tooltip.minWidth, + boxShadow: CHART_CONFIG.tooltip.boxShadow, + position: 'relative', + direction: 'inherit', + }); +}; + +type TooltipPlacement = 'left' | 'right'; + +const addCaretToTable = ( + table: HTMLTableElement, + colors: { tooltip: TooltipColors }, + placement: TooltipPlacement, +): void => { + const carets = table.querySelectorAll('[data-caret]'); + for (const el of carets) { + el.remove(); + } + + const { caretSize, caretInnerSize } = CHART_CONFIG.tooltip; + const caretInnerOffset = CHART_CONFIG.tooltip.caretInnerOffset; + + const caret = document.createElement('div'); + caret.setAttribute('data-caret', 'outer'); + Object.assign(caret.style, { + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)', + width: '0', + height: '0', + borderTop: `${caretSize}px solid transparent`, + borderBottom: `${caretSize}px solid transparent`, + zIndex: '1', + }); + + const caretInner = document.createElement('div'); + caretInner.setAttribute('data-caret', 'inner'); + Object.assign(caretInner.style, { + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)', + width: '0', + height: '0', + borderTop: `${caretInnerSize}px solid transparent`, + borderBottom: `${caretInnerSize}px solid transparent`, + zIndex: '2', + }); + + if (placement === 'right') { + Object.assign(caret.style, { + left: `-${caretSize}px`, + borderRight: `${caretSize}px solid transparent`, + }); + + Object.assign(caretInner.style, { + left: `-${caretInnerOffset}px`, + borderRight: `${caretInnerSize}px solid ${colors.tooltip.background}`, + }); + } else { + Object.assign(caret.style, { + right: `-${caretSize}px`, + borderLeft: `${caretSize}px solid transparent`, + }); + + Object.assign(caretInner.style, { + right: `-${caretInnerOffset}px`, + borderLeft: `${caretInnerSize}px solid ${colors.tooltip.background}`, + }); + } + + table.appendChild(caret); + table.appendChild(caretInner); +}; + +const clampValue = (value: number, min: number, max: number): number => { + if (min > max) { + return min; + } + + return Math.min(Math.max(value, min), max); +}; + +const getTooltipOffsetX = (chartType: 'line' | 'bar'): number => { + return chartType === 'bar' ? CHART_CONFIG.tooltip.barOffsetX : CHART_CONFIG.tooltip.lineOffsetX; +}; + +const handleTooltip = ( + context: { chart: Chart; tooltip: TooltipModel<'line'> | TooltipModel<'bar'> }, + colors: { tooltip: TooltipColors }, + chartType: 'line' | 'bar', +): void => { + const { chart, tooltip } = context; + const tooltipEl = getOrCreateTooltip(chart); + + if (!shouldShowTooltip(tooltip, chartType)) { + tooltipEl.style.opacity = '0'; + return; + } + + const tableRoot = tooltipEl.querySelector('table'); + if (!tableRoot) { + return; + } + + while (tableRoot.firstChild) { + tableRoot.firstChild.remove(); + } + + const titleLines = tooltip.title || []; + const bodyLines = tooltip.body.map((b) => b.lines); + + const head = createTooltipHeader(titleLines, colors); + const body = createTooltipBody(bodyLines, colors); + + tableRoot.appendChild(head); + tableRoot.appendChild(body); + + styleTooltipTable(tableRoot, colors); + const container = chart.canvas.parentElement; + + if (!container) { + return; + } + + const tooltipOffsetX = getTooltipOffsetX(chartType); + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas; + const anchorX = positionX + tooltip.caretX; + const anchorY = positionY + tooltip.caretY; + const tooltipPadding = 8; + + let placement: TooltipPlacement = 'right'; + addCaretToTable(tableRoot, colors, placement); + + const tooltipWidth = tooltipEl.offsetWidth; + const containerWidth = container.clientWidth; + const containerHeight = container.clientHeight; + const defaultRight = anchorX + tooltipOffsetX; + + if (defaultRight + tooltipWidth > containerWidth - tooltipPadding) { + placement = 'left'; + addCaretToTable(tableRoot, colors, placement); + } + + const measuredTooltipWidth = tooltipEl.offsetWidth; + const measuredTooltipHeight = tooltipEl.offsetHeight; + const horizontalPosition = + placement === 'right' ? anchorX + tooltipOffsetX : anchorX - measuredTooltipWidth - tooltipOffsetX; + const left = clampValue(horizontalPosition, tooltipPadding, containerWidth - measuredTooltipWidth - tooltipPadding); + const top = clampValue( + anchorY - measuredTooltipHeight / 2, + tooltipPadding, + containerHeight - measuredTooltipHeight - tooltipPadding, + ); + + Object.assign(tooltipEl.style, { + opacity: '1', + left: `${left}px`, + top: `${top}px`, + transform: 'translate(0, 0)', + }); +}; + +export const statCard = (data: number[]) => ({ + $refs: {} as { canvas: HTMLCanvasElement }, + + init() { + if (!this.$refs?.canvas) return; + this.setupCanvas(); + initWhenVisible(this.$refs.canvas, () => { + const colors = extractStatCardColors(this.$refs.canvas, data); + createChart(this.$refs.canvas, this.createChartConfig(data, colors)); + }); + }, + + setupCanvas() { + this.$refs.canvas.setAttribute('height', CHART_CONFIG.canvas.statCardHeight); + this.$refs.canvas.setAttribute('width', CHART_CONFIG.canvas.width); + }, + + createChartConfig(data: number[], colors: StatCardColors): ChartConfiguration<'line'> { + const dataLength = data.length; + const { formatPrice } = window.TutorCore.currency; + + return { + type: 'line', + data: { + labels: Array.from({ length: dataLength }, (_, i) => i), + datasets: [ + { + type: 'line', + data, + borderWidth: 1, + tension: CHART_CONFIG.line.tension, + pointRadius: 0, + pointBackgroundColor: colors.point, + pointHoverRadius: (context: ScriptableContext<'line'>) => { + return isEndPoint(context.dataIndex, dataLength) ? 0 : 6; + }, + pointBorderWidth: CHART_CONFIG.point.borderWidth, + pointBorderColor: colors.pointBorder, + borderColor: colors.line, + backgroundColor: colors.line, + pointHoverBackgroundColor: colors.point, + pointHoverBorderColor: colors.pointBorder, + pointHoverBorderWidth: CHART_CONFIG.point.hoverBorderWidth, + pointHitRadius: 30, + }, + ], + }, + options: { + animation: getAnimationConfig(), + devicePixelRatio: CHART_CONFIG.common.devicePixelRatio(), + responsive: CHART_CONFIG.common.responsive, + maintainAspectRatio: false, + interaction: { + mode: 'nearest', + intersect: true, + }, + plugins: { + legend: CHART_CONFIG.common.hiddenLegend, + tooltip: { + enabled: false, + position: 'nearest', + filter: (tooltipItem) => !isEndPoint(tooltipItem.dataIndex, tooltipItem.dataset.data.length), + external: (context) => handleTooltip(context, colors, 'line'), + callbacks: { + label: (context) => { + const value = context.parsed.y; + if (value === null) { + return ''; + } + return context.datasetIndex === 0 ? formatPrice(value) : value.toString(); + }, + title: () => '', + }, + }, + }, + scales: { + x: CHART_CONFIG.common.hiddenAxis, + y: CHART_CONFIG.common.hiddenAxis, + }, + }, + }; + }, +}); + +export const overviewChart = (data: OverviewChartProps) => ({ + $el: null as HTMLDivElement | null, + $refs: {} as { canvas: HTMLCanvasElement }, + colors: null as OverviewChartColors | null, + + init() { + if (!this.$refs?.canvas) return; + this.setupCanvas(); + initWhenVisible(this.$refs.canvas, () => { + this.colors = extractOverviewChartColors(this.$refs.canvas); + createChart(this.$refs.canvas, this.createChartConfig(data, this.colors)); + }); + }, + + setupCanvas() { + this.$refs.canvas.style.maxHeight = `${CHART_CONFIG.canvas.overviewMaxHeight}px`; + this.$refs.canvas.setAttribute('width', CHART_CONFIG.canvas.width); + }, + + getPointRadius(context: ScriptableContext<'line'>, dataLength: number): number { + return isEndPoint(context.dataIndex, dataLength) ? 0 : CHART_CONFIG.point.hoverRadius; + }, + + getPointHoverColor( + context: ScriptableContext<'line'>, + dataLength: number, + colors: OverviewChartColors, + colorType: 'point' | 'pointBorder', + ): string { + if (isEndPoint(context.dataIndex, dataLength)) { + return 'transparent'; + } + + const dataset = context.datasetIndex === 0 ? colors.earnings : colors.enrolled; + return dataset[colorType]; + }, + + createDatasetConfig( + label: string, + data: number[], + colors: ChartColors & { linearGradient: string[] }, + allColors: OverviewChartColors, + dataLength: number, + ) { + return { + label, + data, + borderColor: colors.line, + backgroundColor: (context: ScriptableContext<'line'>) => { + const chart = context.chart; + const { ctx, chartArea } = chart; + + if (!chartArea) return colors.line; + + return createLinearGradient(ctx, chartArea, colors.linearGradient[0], colors.linearGradient[1]); + }, + borderWidth: CHART_CONFIG.line.width, + tension: CHART_CONFIG.line.tension, + fill: true, + pointRadius: (context: ScriptableContext<'line'>) => this.getPointRadius(context, dataLength), + pointBackgroundColor: 'transparent', + pointBorderColor: 'transparent', + pointBorderWidth: CHART_CONFIG.point.hoverBorderWidth, + pointHoverRadius: CHART_CONFIG.point.hoverRadius, + pointHoverBackgroundColor: (context: ScriptableContext<'line'>) => + this.getPointHoverColor(context, dataLength, allColors, 'point'), + pointHoverBorderColor: (context: ScriptableContext<'line'>) => + this.getPointHoverColor(context, dataLength, allColors, 'pointBorder'), + pointHoverBorderWidth: CHART_CONFIG.point.hoverBorderWidth, + }; + }, + + createChartConfig(data: OverviewChartProps, colors: OverviewChartColors): ChartConfiguration<'line'> { + const dataLength = data?.earnings?.length || data?.enrolled?.length; + const currency = data?.currency; + return { + type: 'line', + data: { + labels: data.labels, + datasets: [ + this.createDatasetConfig('Earnings', data.earnings, colors.earnings, colors, dataLength), + this.createDatasetConfig('Enrolled', data.enrolled, colors.enrolled, colors, dataLength), + ], + }, + options: { + animation: getAnimationConfig(), + devicePixelRatio: CHART_CONFIG.common.devicePixelRatio(), + aspectRatio: CHART_CONFIG.aspectRatio.overview, + interaction: { + mode: 'nearest', + intersect: true, + }, + plugins: { + legend: CHART_CONFIG.common.hiddenLegend, + tooltip: { + enabled: false, + position: 'nearest', + filter: (tooltipItem) => !isEndPoint(tooltipItem.dataIndex, tooltipItem.dataset.data.length), + external: (context) => handleTooltip(context, colors, 'line'), + callbacks: { + title: (items) => { + return ( + data?.earning_date?.[items[0]?.dataIndex] || + data?.enrollment_date?.[items[0]?.dataIndex] || + data.labels?.[items[0]?.dataIndex] + ); + }, + label: (context) => { + const value = context.parsed.y; + if (value === null) { + return ''; + } + return context.datasetIndex === 0 ? formatPriceByMonetization(currency, value) : value.toString(); + }, + }, + }, + }, + scales: { + x: { + display: true, + grid: { + display: true, + tickWidth: 0, + color: (context) => { + const { index } = context; + const ticksLength = context.chart.scales.x.ticks.length; + return isEndPoint(index, ticksLength) ? 'transparent' : colors.border; + }, + }, + border: { + color: colors.border, + dash: [3, 3], + }, + ticks: { + color: colors.ticks.color, + font: { size: 10 }, + }, + }, + y: { + display: false, + grace: '10%', + grid: { display: false }, + border: { display: false }, + }, + }, + }, + }; + }, +}); + +export const courseCompletionChart = (data: CourseCompletionChartData) => ({ + $el: null as HTMLDivElement | null, + $refs: {} as { canvas: HTMLCanvasElement }, + + init() { + if (!this.$refs?.canvas) return; + this.setupCanvas(); + initWhenVisible(this.$refs.canvas, () => { + createChart(this.$refs.canvas, this.createChartConfig(data)); + }); + }, + + setupCanvas() { + this.$refs.canvas.style.maxHeight = `${CHART_CONFIG.canvas.completionMaxHeight}px`; + this.$refs.canvas.setAttribute('width', CHART_CONFIG.canvas.width); + }, + + createChartConfig(data: CourseCompletionChartData): ChartConfiguration<'bar'> { + const colors = extractCompletionChartColors(this.$refs.canvas); + + const chartData = [ + data.enrolled.value, + data.completed.value, + data.in_progress.value, + data.inactive.value, + data.cancelled.value, + ]; + + const chartColors = [colors.enrolled, colors.completed, colors.in_progress, colors.inactive, colors.cancelled]; + const dataKeys: CourseCompletionChartDataKey[] = ['enrolled', 'completed', 'in_progress', 'inactive', 'cancelled']; + + const lastNonZeroIndex = chartData.reduce((last, value, i) => (value > 0 ? i : last), -1); + const firstNonZeroIndex = chartData.findIndex((value) => value > 0); + + return { + type: 'bar', + data: { + labels: [''], + datasets: chartData.map((value, index) => ({ + data: [value], + backgroundColor: chartColors[index], + barThickness: CHART_CONFIG.bar.thickness, + borderRadius: { + bottomLeft: index === (firstNonZeroIndex > -1 ? firstNonZeroIndex : 0) ? CHART_CONFIG.bar.borderRadius : 0, + topLeft: index === (firstNonZeroIndex > -1 ? firstNonZeroIndex : 0) ? CHART_CONFIG.bar.borderRadius : 0, + bottomRight: + index === (lastNonZeroIndex > -1 ? lastNonZeroIndex : chartData.length - 1) + ? CHART_CONFIG.bar.borderRadius + : 0, + topRight: + index === (lastNonZeroIndex > -1 ? lastNonZeroIndex : chartData.length - 1) + ? CHART_CONFIG.bar.borderRadius + : 0, + }, + borderSkipped: false, + borderWidth: { + right: + index === (lastNonZeroIndex > -1 ? lastNonZeroIndex : chartData.length - 1) + ? 0 + : CHART_CONFIG.bar.borderWidth, + }, + borderColor: getCSSProperty(this.$refs.canvas, '--tutor-surface-l1'), + })), + }, + options: { + animation: getCompletionChartAnimation(), + indexAxis: 'y', + responsive: CHART_CONFIG.common.responsive, + maintainAspectRatio: false, + devicePixelRatio: CHART_CONFIG.common.devicePixelRatio(), + plugins: { + legend: CHART_CONFIG.common.hiddenLegend, + tooltip: { + enabled: false, + position: 'nearest', + external: (context) => handleTooltip(context, colors, 'bar'), + callbacks: { + title: (items) => { + const item = items[0]; + return data[dataKeys[item.datasetIndex]]?.label || ''; + }, + label: (item) => { + const value = item.raw as number; + return `${value}`; + }, + }, + }, + }, + scales: { + x: { + stacked: true, + max: chartData.reduce((sum, value) => sum + value, 0), + ...CHART_CONFIG.common.hiddenAxis, + }, + y: { + stacked: true, + ...CHART_CONFIG.common.hiddenAxis, + }, + }, + }, + }; + }, +}); + +const formatPriceByMonetization = (data: MonetizationData, value: number): string => + window.TutorCore.currency.createPriceFormatter({ + symbol: data?.symbol ?? '$', + position: data?.position ?? 'left', + thousandSeparator: data?.thousand_separator ?? ',', + decimalSeparator: data?.decimal_separator ?? '.', + fraction_digits: Number(data?.no_of_decimal ?? 2), + })(value); diff --git a/assets/src/js/frontend/dashboard/pages/instructor/home.ts b/assets/src/js/frontend/dashboard/pages/instructor/home.ts new file mode 100644 index 0000000000..9bcc34f61e --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/instructor/home.ts @@ -0,0 +1,30 @@ +import { courseCompletionChart, overviewChart, statCard } from './home-charts'; +import { sortSections } from './sort-sections'; + +const sortableSectionsMeta = { + name: 'sortableSections', + component: sortSections, +}; + +const statCardMeta = { + name: 'statCard', + component: statCard, +}; + +const overviewChartMeta = { + name: 'overviewChart', + component: overviewChart, +}; + +const courseCompletionChartMeta = { + name: 'courseCompletionChart', + component: courseCompletionChart, +}; + +export const initializeHome = () => { + window.TutorComponentRegistry.registerAll({ + components: [courseCompletionChartMeta, overviewChartMeta, sortableSectionsMeta, statCardMeta], + }); + + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/pages/instructor/sort-sections.ts b/assets/src/js/frontend/dashboard/pages/instructor/sort-sections.ts new file mode 100644 index 0000000000..5a7ddb7e35 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/instructor/sort-sections.ts @@ -0,0 +1,226 @@ +import type { Sortable } from '@dnd-kit/dom/sortable'; +import { __ } from '@wordpress/i18n'; + +import { type AjaxResponse } from '@Core/ts/types'; + +const loadDndKit = async () => { + const [dom, modifiers, sortable] = await Promise.all([ + import(/* webpackChunkName: "tutor-dnd-kit" */ '@dnd-kit/dom'), + import(/* webpackChunkName: "tutor-dnd-kit" */ '@dnd-kit/dom/modifiers'), + import(/* webpackChunkName: "tutor-dnd-kit" */ '@dnd-kit/dom/sortable'), + ]); + + return { + DragDropManager: dom.DragDropManager, + KeyboardSensor: dom.KeyboardSensor, + PointerSensor: dom.PointerSensor, + RestrictToElement: modifiers.RestrictToElement, + Sortable: sortable.Sortable, + }; +}; + +export const sortSections = (sectionsIds: string[]) => { + const { toast, endpoints } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + + return { + _sortables: [] as Sortable[], + _sortableSections: [] as HTMLElement[], + initialized: false, + sectionsIds: sectionsIds, + $el: null as HTMLElement | null, + + init() { + if (!this.initialized) { + this.setupDrag(); + this.initialized = true; + } + }, + + async setupDrag() { + const container = this.$el; + if (!container) { + return; + } + + const { DragDropManager, KeyboardSensor, PointerSensor, RestrictToElement, Sortable } = await loadDndKit(); + if (!this.initialized) { + return; + } + + const manager = new DragDropManager({ + sensors: [PointerSensor, KeyboardSensor], + }); + + const items = Array.from(container.querySelectorAll('.tutor-popover-menu-item')); + + this._sortables = []; + this._sortableSections = []; + + for (const [idx, element] of items.entries()) { + const handle = element.querySelector('[data-grab]') as HTMLElement | null; + const id = element.dataset.id ?? String(idx); + + const sortable = new Sortable( + { + id, + index: idx, + element: element, + handle: handle ?? undefined, + modifiers: [ + RestrictToElement.configure({ + element: this.$el, + }), + ], + }, + manager, + ); + + this._sortables.push(sortable); + } + + manager.monitor.addEventListener('dragstart', (event) => { + const operation = event.operation; + if (!operation.source) { + return; + } + + const sourceElement = operation.source.element; + if (!sourceElement) { + return; + } + }); + + manager.monitor.addEventListener('dragend', async (event) => { + const operation = event.operation; + if (!operation.source) { + return; + } + + const sourceElement = operation.source.element; + if (!sourceElement) { + return; + } + + const order = this.getOrder(); + try { + wpPost(endpoints.SAVE_INSTRUCTOR_HOME_SECTIONS_ORDER, { order }).then((response) => { + if (!response.success) { + toast.error((response?.data as string) || __('Failed to save instructor home section order.', 'tutor')); + return; + } + }); + } catch (error) { + const message = error instanceof Error ? error.message : __('Unknown error occurred.', 'tutor'); + toast.error(message); + return; + } + + if ('startViewTransition' in document) { + setTimeout(() => { + document.startViewTransition(() => this.updateDom()); + }, 260); + } else { + this.updateDom(); + } + }); + }, + + async handleCheckboxClick() { + const items = Array.from(document.querySelectorAll('input[type="checkbox"]')).reduce( + (acc, checkbox) => { + acc[checkbox.name] = checkbox.checked; + return acc; + }, + {} as Record, + ); + + try { + wpPost(endpoints.SAVE_INSTRUCTOR_HOME_SECTIONS_VISIBILITY, { items }).then((response) => { + if (!response.success) { + toast.error( + (response?.data as string) || __('Failed to save instructor home section visibility.', 'tutor'), + ); + return; + } + }); + } catch (error) { + const message = error instanceof Error ? error.message : __('Unknown error occurred.', 'tutor'); + toast.error(message); + return; + } + }, + + updateDom() { + const newOrder = this.getOrder(); + const sectionMap = this.getSortableSections(); + + const firstSectionId = Object.keys(sectionMap)[0]; + const parentContainer = firstSectionId ? sectionMap[firstSectionId]?.parentElement : null; + + if (!parentContainer) { + return; + } + + const existingOrder = Array.from( + new Set( + Array.from(parentContainer.querySelectorAll('[data-section-id]')) + .map((el) => el.dataset.sectionId) + .filter((id): id is string => id !== undefined), + ), + ); + + if (newOrder.length === existingOrder.length && newOrder.every((id, index) => id === existingOrder[index])) { + return; + } + + const fragment = document.createDocumentFragment(); + + for (const id of newOrder) { + const section = sectionMap[id]; + if (section) { + section.remove(); + fragment.appendChild(section); + } + } + + parentContainer.appendChild(fragment); + }, + + getOrder() { + const container = this.$el; + if (!container) { + return []; + } + const ids = Array.from(container.querySelectorAll('.tutor-popover-menu-item')) + .map((el) => el.dataset.id) + .filter((id): id is string => id !== undefined); + + return Array.from(new Set(ids)); + }, + + getSortableSections() { + const sections = document.querySelectorAll('[data-section-id]'); + + return Array.from(sections).reduce( + (acc, section) => { + const sectionId = section.dataset.sectionId; + if (sectionId) { + acc[sectionId] = section; + } + return acc; + }, + {} as Record, + ); + }, + + destroy() { + for (const sortable of this._sortables) { + sortable.destroy(); + } + this._sortables = []; + + this.initialized = false; + }, + }; +}; diff --git a/assets/src/js/frontend/dashboard/pages/my-courses.ts b/assets/src/js/frontend/dashboard/pages/my-courses.ts new file mode 100644 index 0000000000..b85f0bfce0 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/my-courses.ts @@ -0,0 +1,73 @@ +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +/** + * My Courses Page Component + * Handles course deletion and creation using HTTP and Query services + */ +const myCoursesPage = () => { + const { query, toast, modal } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + + return { + query, + createMutation: null as MutationState | null, + deleteMutation: null as MutationState | null, + + init() { + // Setup create mutation + this.createMutation = this.query.useMutation(this.createCourse, { + onSuccess: (response) => { + if (response.status_code === 201 && response.data) { + window.location.href = response.data; + } + }, + onError: (error: Error) => { + toast.error(error.message || 'Failed to create course'); + }, + }); + + // Setup delete mutation + this.deleteMutation = this.query.useMutation(this.deleteCourse, { + onSuccess: () => { + modal.closeModal('tutor-course-delete-modal'); + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(error.message || 'Failed to delete course'); + }, + }); + }, + + createCourse(payload: { from_dashboard: boolean }) { + return wpPost>('tutor_create_new_draft_course', payload); + }, + + deleteCourse(courseId: number) { + return wpPost('tutor_delete_dashboard_course', { + course_id: courseId, + }); + }, + + async handleCreateCourse() { + await this.createMutation?.mutate({ + from_dashboard: true, + }); + }, + + async handleDeleteCourse(courseId: number) { + await this.deleteMutation?.mutate(courseId); + }, + }; +}; + +export const initializeMyCourses = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'myCourses', + component: myCoursesPage, + }, + }); + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/pages/quiz-attempt-feedback.ts b/assets/src/js/frontend/dashboard/pages/quiz-attempt-feedback.ts new file mode 100644 index 0000000000..752ad556a2 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/quiz-attempt-feedback.ts @@ -0,0 +1,168 @@ +import { __ } from '@wordpress/i18n'; + +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; +import { type MutationState } from '@Core/ts/services/Query'; + +const REVIEW_STATUSES = ['correct', 'incorrect'] as const; +const REVIEW_STATUS_FIELD = 'review_statuses' as const; + +type ReviewStatus = (typeof REVIEW_STATUSES)[number]; +type ReviewStatusFieldName = `${typeof REVIEW_STATUS_FIELD}[${string}]`; +type ReviewStatusMap = Record; +type ReviewStatusesAjaxPayload = Partial>; + +interface QuizAttemptFeedbackProps { + attemptId: number; + formId: string; +} + +interface QuizAttemptFeedbackPayload { + attempt_id: number; + feedback: string; + review_statuses: ReviewStatusMap; +} + +interface QuizAttemptFeedbackResponse { + success?: boolean; + message?: string; + data?: TData; +} + +interface QuizAttemptSubmitResponse { + reviewResponse: QuizAttemptFeedbackResponse | null; + feedbackResponse: QuizAttemptFeedbackResponse | null; +} + +const quizAttemptFeedback = ({ attemptId, formId }: QuizAttemptFeedbackProps) => { + const { query, toast, endpoints, form } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + const reviewStatusFieldPattern = new RegExp(`^${REVIEW_STATUS_FIELD}\\[[^\\]]+\\]$`); + let isProgrammaticReload = false; + + const getReviewStatuses = (data: Record) => { + return Object.entries(data).reduce((acc, [key, value]) => { + if (!reviewStatusFieldPattern.test(key)) { + return acc; + } + + if (typeof value !== 'string' || !REVIEW_STATUSES.includes(value as ReviewStatus)) { + return acc; + } + + const fieldName = key as ReviewStatusFieldName; + const questionId = fieldName.slice(`${REVIEW_STATUS_FIELD}[`.length, -1); + const reviewStatus = value as ReviewStatus; + + acc[questionId] = reviewStatus; + return acc; + }, {}); + }; + + const getReviewStatusesPayload = (reviewStatuses: ReviewStatusMap) => { + return Object.entries(reviewStatuses).reduce((acc, [questionId, status]) => { + const fieldName: ReviewStatusFieldName = `${REVIEW_STATUS_FIELD}[${questionId}]`; + acc[fieldName] = status; + return acc; + }, {}); + }; + + return { + formId, + attemptId, + feedbackMutation: null as MutationState | null, + _destroy: () => {}, + + init() { + this.feedbackMutation = query.useMutation(this.saveFeedback, { + onSuccess: () => { + toast.success(__('Quiz feedback updated successfully.', 'tutor')); + isProgrammaticReload = true; + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + if (this.formId) { + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.FORM_REGISTER, { + detail: { id: this.formId, instance: this }, + }), + ); + } + + const handler = (event: Event) => { + if (isProgrammaticReload) { + return false; + } + if (form.hasForm(formId) && form.getFormState(formId).isDirty) { + event.preventDefault(); + } + }; + + window.addEventListener('beforeunload', handler); + + this._destroy = () => { + isProgrammaticReload = true; + window.removeEventListener('beforeunload', handler); + }; + }, + + destroy() { + this._destroy?.(); + }, + + async saveFeedback(payload: QuizAttemptFeedbackPayload) { + let feedbackDirty = true; + let reviewStatusesDirty = true; + + if (form.hasForm(formId)) { + const formState = form.getFormState(formId); + const dirtyFields = formState.dirtyFields; + feedbackDirty = !!dirtyFields?.feedback; + reviewStatusesDirty = Object.keys(dirtyFields ?? {}).some( + (key) => key.startsWith(`${REVIEW_STATUS_FIELD}[`) && dirtyFields[key], + ); + } + + const reviewStatusesPayload = getReviewStatusesPayload(payload.review_statuses); + const reviewRequest = + reviewStatusesDirty && Object.keys(reviewStatusesPayload).length > 0 + ? wpPost(endpoints.REVIEW_QUIZ_ANSWERS, { + attempt_id: payload.attempt_id, + ...reviewStatusesPayload, + }) + : Promise.resolve(null); + + const feedbackRequest = feedbackDirty + ? wpPost(endpoints.INSTRUCTOR_FEEDBACK, { + attempt_id: payload.attempt_id, + feedback: payload.feedback, + }) + : Promise.resolve(null); + + const [reviewResponse, feedbackResponse] = await Promise.all([reviewRequest, feedbackRequest]); + + return { + reviewResponse, + feedbackResponse, + }; + }, + + async handleSaveFeedback(data: Record) { + await this.feedbackMutation?.mutate({ + attempt_id: this.attemptId, + feedback: String(data.feedback ?? ''), + review_statuses: getReviewStatuses(data), + }); + }, + }; +}; + +export const quizAttemptFeedbackMeta = { + name: 'quizAttemptFeedback', + component: quizAttemptFeedback, +}; diff --git a/assets/src/js/frontend/dashboard/pages/quiz-attempts.ts b/assets/src/js/frontend/dashboard/pages/quiz-attempts.ts new file mode 100644 index 0000000000..bfdf1733ba --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/quiz-attempts.ts @@ -0,0 +1,54 @@ +// Quiz Attempts Page +import { type MutationState } from '@Core/ts/services/Query'; +import { quizRetryAttemptMeta } from '@FrontendComponents/quiz/retry-attempt'; +import { quizSummarySidebarMeta } from '@FrontendComponents/quiz/summary-sidebar'; +import { quizAttemptFeedbackMeta } from './quiz-attempt-feedback'; + +const quizAttemptsPage = () => { + const { query, modal, toast } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + query, + deleteMutation: null as MutationState | null, + + init() { + this.deleteMutation = this.query.useMutation(this.deleteAttempt, { + onSuccess: () => { + modal.closeModal('tutor-quiz-attempt-delete-modal'); + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + deleteAttempt(attemptID: number) { + return wpPost('tutor_attempt_delete', { + id: attemptID, + }); + }, + + async handleDeleteAttempt(attemptID: number) { + await this.deleteMutation?.mutate(attemptID); + }, + }; +}; + +export const initializeQuizAttempts = () => { + window.TutorComponentRegistry.registerAll({ + components: [ + { + name: 'quizAttempts', + component: quizAttemptsPage, + }, + quizRetryAttemptMeta, + quizAttemptFeedbackMeta, + quizSummarySidebarMeta, + ], + }); + + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/pages/settings.ts b/assets/src/js/frontend/dashboard/pages/settings.ts new file mode 100644 index 0000000000..7ca3bcbfa6 --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/settings.ts @@ -0,0 +1,430 @@ +import { __ } from '@wordpress/i18n'; + +import { type MutationState } from '@Core/ts/services/Query'; +import { type WPMedia } from '@Core/ts/services/WPMedia'; +import { type AjaxResponse } from '@Core/ts/types'; + +interface UserPhotoFormProps { + photo_file: File; + photo_type: 'profile_photo' | 'cover_photo'; +} + +interface UserPhotoUploadResponse { + status?: string; +} + +interface RemoveUserPhotoProps { + photo_type: UserPhotoFormProps['photo_type']; +} + +interface AccountFormProps { + first_name: string; + last_name: string; + username: string; + phone_number: string; + timezone: string; + occupation: string; + bio: string; + display_name: string; + profile_photo: string; + cover_photo: string; + tutor_pro_custom_signature_id: WPMedia | null; +} + +interface SocialFormProps { + _tutor_profile_facebook: string; + _tutor_profile_twitter: string; + _tutor_profile_linkedin: string; + _tutor_profile_github: string; + _tutor_profile_website: string; + [key: string]: string; +} + +interface SettingsFormProps { + billing_first_name: string; + billing_last_name: string; + billing_email: string; + billing_country: string; + billing_state: string; + billing_city: string; + billing_phone: string; + billing_zip_code: string; + billing_address: string; +} + +interface WithdrawMethodFormProps { + withdraw_method: string; + [key: string]: string; +} + +interface ResetPasswordFormProps { + current_password: string; + new_password: string; + confirm_new_password: string; +} + +interface PreferencesFormProps { + auto_play_next: boolean; + theme: string; + font_scale: number; + learning_mood: 'modern' | 'kids'; + formId?: string; +} + +interface ResetPreferencesPayload { + formId: string; + modalId: string; +} + +interface UpdateNotificationProps { + [key: string]: boolean | string; +} + +interface ResetPasswordResponse { + success: boolean; + data: { + message: string; + }; +} + +const settings = () => { + const { query, form, toast, endpoints } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + $el: null as HTMLElement | null, + uploadProfilePhotoMutation: null as MutationState | null, + removeProfilePhotoMutation: null as MutationState> | null, + uploadCoverPhotoMutation: null as MutationState | null, + removeCoverPhotoMutation: null as MutationState> | null, + updateProfileMutation: null as MutationState> | null, + saveSocialProfileMutation: null as MutationState> | null, + saveBillingInfoMutation: null as MutationState> | null, + saveWithdrawMethodMutation: null as MutationState> | null, + resetPasswordMutation: null as MutationState | null, + handleUpdateNotification: null as MutationState | null, + savePreferencesMutation: null as MutationState> | null, + resetPreferencesMutation: null as MutationState> | null, + + init() { + if (!this.$el) { + return; + } + + this.handleUpdateProfile = this.handleUpdateProfile.bind(this); + this.handleUploadProfilePhoto = this.handleUploadProfilePhoto.bind(this); + this.handleRemoveProfilePhoto = this.handleRemoveProfilePhoto.bind(this); + this.handleUploadCoverPhoto = this.handleUploadCoverPhoto.bind(this); + this.handleRemoveCoverPhoto = this.handleRemoveCoverPhoto.bind(this); + this.handleSaveSocialProfile = this.handleSaveSocialProfile.bind(this); + this.handleSaveBillingInfo = this.handleSaveBillingInfo.bind(this); + this.handleSaveWithdrawMethod = this.handleSaveWithdrawMethod.bind(this); + this.handleResetPassword = this.handleResetPassword.bind(this); + this.handleResetPreferences = this.handleResetPreferences.bind(this); + + this.handleUpdateNotification = query.useMutation(this.updateNotification, { + onSuccess: (data, payload) => { + form.reset(payload?.formId as string, payload as unknown as Record); + toast.success(data?.message ?? __('Notification settings updated', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error) || __('Failed to update notification settings', 'tutor')); + }, + }); + + this.uploadProfilePhotoMutation = query.useMutation(this.uploadUserPhoto, { + onSuccess: () => { + toast.success(__('Successfully updated profile photo.', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.removeProfilePhotoMutation = query.useMutation(this.removeUserPhoto, { + onSuccess: () => { + toast.success(__('Successfully removed profile photo.', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.uploadCoverPhotoMutation = query.useMutation(this.uploadUserPhoto, { + onSuccess: () => { + toast.success(__('Successfully updated cover photo.', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.removeCoverPhotoMutation = query.useMutation(this.removeUserPhoto, { + onSuccess: () => { + toast.success(__('Successfully removed cover photo.', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.updateProfileMutation = query.useMutation(this.updateProfile, { + onSuccess: (data) => { + toast.success(data?.message ?? __('Successfully updated profile', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.saveSocialProfileMutation = query.useMutation(this.saveSocialProfile, { + onSuccess: (data) => { + toast.success(data?.message ?? __('Success successfully saved social profile', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.saveBillingInfoMutation = query.useMutation(this.saveBillingInfo, { + onSuccess: (data) => { + toast.success(data?.message ?? __('Success successfully saved billing info', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.saveWithdrawMethodMutation = query.useMutation(this.saveWithdrawMethod, { + onSuccess: (data) => { + toast.success(data?.message ?? __('Withdrawal method saved successfully', 'tutor')); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.resetPasswordMutation = query.useMutation(this.resetPassword, { + onSuccess: (response: ResetPasswordResponse) => { + if (response?.success) { + toast.success(response.data?.message ?? __('Password updated successfully', 'tutor')); + } else { + toast.error(response.data?.message ?? __('Password update failed', 'tutor')); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.savePreferencesMutation = query.useMutation(this.updatePreferences, { + onSuccess: (data: AjaxResponse, payload: PreferencesFormProps) => { + const learningMoodChanged = Boolean(form.getFormState(payload?.formId || '').dirtyFields.learning_mood); + + form.reset(payload?.formId || '', payload as unknown as Record); + toast.success(data?.message ?? __('Preferences saved successfully', 'tutor')); + + if (learningMoodChanged) { + window.location.reload(); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.resetPreferencesMutation = query.useMutation(this.resetPreferences, { + onSuccess: (data: AjaxResponse) => { + toast.success(data?.message ?? __('Preferences reset successfully', 'tutor')); + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + async updatePreferences(payload: PreferencesFormProps) { + return wpPost(endpoints.UPDATE_USER_PREFERENCES, payload) as unknown as Promise< + AjaxResponse + >; + }, + + async resetPreferences(payload: ResetPreferencesPayload) { + return wpPost(endpoints.RESET_USER_PREFERENCES, payload) as unknown as Promise< + AjaxResponse + >; + }, + + handleResetPreferences(formId: string, modalId: string) { + this.resetPreferencesMutation?.mutate({ formId, modalId }); + }, + + async updateNotification(payload: UpdateNotificationProps) { + const transformedPayload = Object.keys(payload).reduce( + (formattedPayload, key) => { + const value = payload[key]; + + if (typeof value !== 'boolean') { + formattedPayload[`${key}`] = value; + return formattedPayload; + } + + let stringValue = ''; + + // disable_all=true means turning everything OFF + if (key === 'disable_all') { + stringValue = value ? 'off' : 'on'; + } else { + stringValue = value ? 'on' : 'off'; + } + + if (!key.includes('__')) { + formattedPayload[`tutor_notification_preference[${key}]`] = stringValue; + return formattedPayload; + } + + const [firstPart, secondPart] = key.split('__'); + if (!firstPart && !secondPart) { + return formattedPayload; + } + + formattedPayload[`tutor_notification_preference[email][${firstPart}][${secondPart}]`] = stringValue; + + return formattedPayload; + }, + {} as Record, + ); + + return wpPost>(endpoints.UPDATE_PROFILE_NOTIFICATION, transformedPayload); + }, + + async uploadUserPhoto(payload: UserPhotoFormProps) { + const response = await wpPost(endpoints.UPLOAD_PROFILE_PHOTO, payload); + + if (response?.status !== 'success') { + throw new Error(__('Image upload failed. Please try again.', 'tutor')); + } + + return response; + }, + + async handleUploadProfilePhoto(files: File[]) { + if (files.length === 0) { + return; + } + const data = { + photo_file: files[0], + photo_type: 'profile_photo', + } satisfies UserPhotoFormProps; + await this.uploadProfilePhotoMutation?.mutate(data); + }, + + async handleUploadCoverPhoto(files: File[]) { + if (files.length === 0) { + return; + } + const data = { + photo_file: files[0], + photo_type: 'cover_photo', + } satisfies UserPhotoFormProps; + await this.uploadCoverPhotoMutation?.mutate(data); + }, + + async removeUserPhoto(payload: RemoveUserPhotoProps) { + return wpPost>(endpoints.REMOVE_PROFILE_PHOTO, payload); + }, + + async handleRemoveProfilePhoto() { + await this.removeProfilePhotoMutation?.mutate({ photo_type: 'profile_photo' }); + }, + + async handleRemoveCoverPhoto() { + await this.removeCoverPhotoMutation?.mutate({ photo_type: 'cover_photo' }); + }, + + async updateProfile(payload: AccountFormProps) { + return wpPost>(endpoints.UPDATE_PROFILE, payload); + }, + + async handleUpdateProfile(data: AccountFormProps, formId: string) { + const payload = { + ...data, + tutor_pro_custom_signature_id: data.tutor_pro_custom_signature_id?.id || '', + }; + await this.updateProfileMutation?.mutate(payload); + form.reset(formId, data as unknown as Record); + }, + + async saveSocialProfile(payload: SocialFormProps) { + return wpPost>(endpoints.SAVE_SOCIAL_PROFILE, payload); + }, + + async handleSaveSocialProfile(data: SocialFormProps, formId: string) { + await this.saveSocialProfileMutation?.mutate(data); + form.reset(formId, data as unknown as Record); + }, + + async saveBillingInfo(payload: SettingsFormProps) { + return wpPost>(endpoints.SAVE_BILLING_INFO, payload); + }, + + async handleSaveBillingInfo(data: SettingsFormProps, formId: string) { + await this.saveBillingInfoMutation?.mutate(data); + if (form.hasForm(formId)) { + form.reset(formId, data as unknown as Record); + } + }, + + async saveWithdrawMethod(payload: Record) { + return wpPost>(endpoints.SAVE_WITHDRAW_METHOD, payload); + }, + + async handleSaveWithdrawMethod(data: WithdrawMethodFormProps, formId: string) { + const selectedMethod = data.withdraw_method; + + const payload: Record = { + tutor_selected_withdraw_method: selectedMethod, + }; + + Object.keys(data).forEach((key) => { + if (key.startsWith(selectedMethod + '_')) { + const fieldName = key.replace(selectedMethod + '_', ''); + payload[`withdraw_method_field[${selectedMethod}][${fieldName}]`] = data[key] || ''; + } + }); + + await this.saveWithdrawMethodMutation?.mutate(payload); + form.reset(formId, data as unknown as Record); + }, + + async resetPassword(payload: ResetPasswordFormProps) { + return wpPost(endpoints.RESET_PASSWORD, payload) as unknown as Promise; + }, + + async handleResetPassword(data: ResetPasswordFormProps, formId: string) { + if (data.new_password !== data.confirm_new_password) { + toast.error(__('Passwords do not match', 'tutor')); + return; + } + + await this.resetPasswordMutation?.mutate(data); + form.reset(formId, data as unknown as Record); + window.location.reload(); + }, + }; +}; + +const settingsMeta = { + name: 'settings', + component: settings, +}; + +export const initializeSettings = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: settingsMeta, + }); + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/pages/withdrawals.ts b/assets/src/js/frontend/dashboard/pages/withdrawals.ts new file mode 100644 index 0000000000..e443134e6a --- /dev/null +++ b/assets/src/js/frontend/dashboard/pages/withdrawals.ts @@ -0,0 +1,62 @@ +import { __ } from '@wordpress/i18n'; + +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +interface WithdrawalsFormProps { + amount: string; +} + +const withdrawals = () => { + const { query, form, toast, endpoints } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + query, + form, + toast, + $el: null as HTMLElement | null, + withdrawalRequestMutation: null as MutationState> | null, + + async handleWithdrawalFormSubmit(data: WithdrawalsFormProps, formId: string) { + const payload: Record = { amount: data.amount }; + await this.withdrawalRequestMutation?.mutate(payload); + this.form.reset(formId); + }, + + init() { + if (!this.$el) { + return; + } + + this.handleWithdrawalFormSubmit = this.handleWithdrawalFormSubmit.bind(this); + + this.withdrawalRequestMutation = this.query.useMutation( + (payload: Record) => wpPost(endpoints.MAKE_AN_WITHDRAW, payload), + { + onSuccess: (data) => { + this.toast.success(data?.message ?? __('Withdrawal request submitted successfully', 'tutor')); + window.location.reload(); + }, + onError: (error: Error) => { + this.toast.error(convertToErrorMessage(error)); + }, + }, + ); + }, + }; +}; + +const withdrawalsMeta = { + name: 'withdrawals', + component: withdrawals, +}; + +export const initializeWithdrawals = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: withdrawalsMeta, + }); + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/dashboard/tour.ts b/assets/src/js/frontend/dashboard/tour.ts new file mode 100644 index 0000000000..ebdf934d0f --- /dev/null +++ b/assets/src/js/frontend/dashboard/tour.ts @@ -0,0 +1,79 @@ +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; + +interface SlideData { + title: string; + imageLarge: string; + imageSmall: string; +} + +const TOUR_LOCAL_STORAGE_KEY = 'tutor_tour_seen'; +const SLIDE_DIRECTION = { + NEXT: 'next', + BACK: 'back', +}; + +const tour = ({ slidesData, modalId }: { slidesData: SlideData[]; modalId: string }) => { + const modal = window.TutorCore.modal; + return { + currentSlide: 0, + slides: slidesData || [], + isOpen: false, + slideDirection: SLIDE_DIRECTION.NEXT, + $nextTick: undefined as ((callback: () => void) => void) | undefined, + _onModalClose: undefined as EventListener | undefined, + + init() { + this._onModalClose = ((e: CustomEvent) => { + if (e.detail?.id === modalId) { + this.isOpen = false; + } + }) as EventListener; + + document.addEventListener(TUTOR_CUSTOM_EVENTS.MODAL_CLOSE, this._onModalClose); + + if (localStorage.getItem(TOUR_LOCAL_STORAGE_KEY) !== 'true') { + this.isOpen = true; + this.$nextTick?.(() => { + modal.showModal(modalId); + }); + } + }, + + destroy() { + document.removeEventListener(TUTOR_CUSTOM_EVENTS.MODAL_CLOSE, this._onModalClose!); + }, + + next() { + this.slideDirection = SLIDE_DIRECTION.NEXT; + if (this.currentSlide < this.slides.length - 1) { + this.currentSlide++; + } else { + this.skip(); + } + }, + + back() { + this.slideDirection = SLIDE_DIRECTION.BACK; + if (this.currentSlide > 0) { + this.currentSlide--; + } + }, + + skip() { + localStorage.setItem(TOUR_LOCAL_STORAGE_KEY, 'true'); + this.isOpen = false; + modal.closeModal(modalId); + }, + }; +}; + +export const initializeTour = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'tour', + component: tour, + }, + }); + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/learning-area/common.ts b/assets/src/js/frontend/learning-area/common.ts new file mode 100644 index 0000000000..c83fabede0 --- /dev/null +++ b/assets/src/js/frontend/learning-area/common.ts @@ -0,0 +1,89 @@ +import { __ } from '@wordpress/i18n'; + +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +interface CourseCompletePayload { + course_id: number; +} +interface CourseRetakePayload { + course_id: number; + context: string; +} + +/** + * Common handlers for course completion and retake. + * These are globally registered in the learning area. + */ +export const courseCompleteHandler = () => { + const { query, toast, modal, endpoints } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + courseCompleteMutation: null as MutationState | null, + courseRetakeMutation: null as MutationState | null, + + init() { + if (this.courseCompleteMutation) { + return; + } + + this.courseCompleteMutation = query.useMutation(this.completeCourseRequest, { + onSuccess: () => { + modal.closeModal('tutor-course-complete-modal'); + window.location.reload(); + }, + onError: (error) => { + toast.error(convertToErrorMessage(error)); + if (error.message?.includes('HTTP')) { + window.location.reload(); + } + }, + }); + + this.courseRetakeMutation = query.useMutation(this.retakeCourseRequest, { + onSuccess: (res) => { + if (res.data?.redirect_to) { + window.location.href = res.data.redirect_to; + } else { + toast.error(__('Something went wrong', 'tutor')); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + // Complete + async completeCourseRequest(payload: CourseCompletePayload) { + return wpPost(endpoints.TUTOR_COMPLETE_COURSE, payload); + }, + + async handleCourseComplete(courseId: number) { + await this.courseCompleteMutation?.mutate({ course_id: courseId }); + }, + + // Retake + async retakeCourseRequest(payload: CourseRetakePayload) { + return wpPost>(endpoints.RESET_COURSE_PROGRESS, payload); + }, + + async handleCourseRetake(courseId: number) { + await this.courseRetakeMutation?.mutate({ course_id: courseId, context: 'learning-area' }); + }, + }; +}; + +export const initializeCommon = () => { + if (window.TutorComponentRegistry) { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'courseCompleteHandler', + component: courseCompleteHandler, + }, + }); + } +}; diff --git a/assets/src/js/frontend/learning-area/index.ts b/assets/src/js/frontend/learning-area/index.ts new file mode 100644 index 0000000000..b51d6c4449 --- /dev/null +++ b/assets/src/js/frontend/learning-area/index.ts @@ -0,0 +1,68 @@ +// Learning Area Entry Point +// Initializes learning area functionality based on current page + +import { initializeReviews } from '@FrontendComponents/reviews'; +import { initializeCommon } from '@FrontendServices/common'; +import { initializeCommon as initializeLearningAreaCommon } from './common'; +import { initializeLesson } from './lesson'; +import { initializeCourseCourseInfo } from './pages/course-info'; +import { initializeQna } from './pages/qna'; +import { initializeQuizInterface } from './quiz'; +import { initializeSidebar } from './sidebar'; + +const initializeLearningArea = () => { + initializeLearningAreaCommon(); + initializeCommon(); + initializeSidebar(); + initializeReviews(); + const { pathname, search } = window.location; + + // Normalize path segments + const pathSegments = pathname.split('/').filter(Boolean); + const { tutorConfig } = window.TutorCore.config; + const { lesson_slug = 'lessons', quiz_slug = 'quizzes' } = tutorConfig || {}; + + let currentPage = null; + + if (pathSegments.includes(lesson_slug)) { + currentPage = 'lesson'; + } else if (pathSegments.includes(quiz_slug)) { + currentPage = 'quiz'; + } else { + // fallback to query param (older behavior) + const params = new URLSearchParams(search); + currentPage = params.get('subpage'); + } + + switch (currentPage) { + case 'quiz': + initializeQuizInterface(); + break; + case 'lesson': + initializeLesson(); + break; + case 'qna': + initializeQna(); + break; + case 'course-info': + initializeCourseCourseInfo(); + break; + + default: + // eslint-disable-next-line no-console + console.warn('Unknown learning area page:', currentPage); + } + + // Ensure all registered components are initialized with Alpine. + if (window.TutorComponentRegistry) { + window.TutorComponentRegistry.initWithAlpine(window.Alpine); + } +}; + +if (document.readyState === 'loading') { + document.addEventListener('alpine:init', initializeLearningArea); +} else { + initializeLearningArea(); +} + +export { initializeLearningArea }; diff --git a/assets/src/js/frontend/learning-area/lesson/comments.ts b/assets/src/js/frontend/learning-area/lesson/comments.ts new file mode 100644 index 0000000000..540690be77 --- /dev/null +++ b/assets/src/js/frontend/learning-area/lesson/comments.ts @@ -0,0 +1,370 @@ +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; +import { __ } from '@wordpress/i18n'; + +const COMMENT_ID_PREFIX = 'tutor-comment-'; +const COMMENT_REPLY_ID_PREFIX = 'tutor-comment-reply-'; +const COMMENT_REPLIES_ID_PREFIX = 'tutor-comment-replies-'; +const COMMENT_REPLY_FORM_ID_PREFIX = 'lesson-comment-reply-form-'; +const COMMENT_FORM_ID = 'lesson-comment-form'; + +const CLASSES = { + COMMENT_ITEM: 'tutor-comment-item', + REPLY_ITEM: 'tutor-comment-reply-item', + REPLIES_WRAPPER: 'tutor-comment-replies', + COMMENT_CONTENT: 'tutor-comment-content', +}; + +const DELETE_COMMENT_MODAL_ID = 'delete-comment-modal'; + +/** + * Get comment or reply DOM ID + * + * @param id Comment ID + * @param isReply Whether it's a reply + */ +const getCommentElementId = (id: number | string, isReply: boolean) => { + return isReply ? `${COMMENT_REPLY_ID_PREFIX}${id}` : `${COMMENT_ID_PREFIX}${id}`; +}; + +interface ReplyCommentPayload { + comment_post_ID: number; + comment_parent: number; + comment: string; + order: string; +} + +type OrderTypes = 'ASC' | 'DESC'; + +/** + * Lesson Comments Component + */ +const lessonComments = (lessonId: number, initialCount: number = 0) => { + const { query, toast, form, modal, endpoints } = window.TutorCore; + const { convertToErrorMessage } = window.TutorCore.error; + const { wpPost } = window.TutorCore.api; + const { TUTOR_CUSTOM_EVENTS } = window.TutorCore.constants; + + return { + query, + lessonId: lessonId, + totalComments: initialCount, + currentPage: 1, + loading: false, + hasMore: true, + currentOrder: 'DESC' as OrderTypes, + isReloading: false, + isEmpty: false, + $el: null as unknown as HTMLElement, + $refs: {} as { + commentList: HTMLElement; + loadMoreTrigger: HTMLElement; + }, + editingId: null as number | null, + replyingId: null as number | null, + createCommentMutation: null as MutationState | null, + editCommentMutation: null as MutationState | null, + deleteCommentMutation: null as MutationState | null, + replyCommentMutation: null as MutationState | null, + + init() { + // Initialize order from URL. + const url = new URL(window.location.href); + const orderParam = url.searchParams.get('order'); + this.currentOrder = orderParam === 'ASC' ? 'ASC' : 'DESC'; + + const childCount = this.$refs.commentList.querySelectorAll(`:scope > .${CLASSES.COMMENT_ITEM}`).length; + this.hasMore = this.totalComments > childCount; + this.isEmpty = childCount === 0; + + this.initInfiniteScroll(); + + // Lesson comment create mutation. + this.createCommentMutation = this.query.useMutation(this.createComment, { + onSuccess: (response) => { + toast.success(__('Comment added successfully.', 'tutor')); + const data = response.data; + + if (data.html) { + if (this.currentOrder === 'DESC') { + this.$refs.commentList.insertAdjacentHTML('afterbegin', data.html); + } else if (!this.hasMore) { + this.$refs.commentList.insertAdjacentHTML('beforeend', data.html); + } + } + + if (data.count !== undefined) { + this.totalComments = data.count; + this.isEmpty = false; + } + + if (form.hasForm(COMMENT_FORM_ID)) { + form.reset(COMMENT_FORM_ID); + } + }, + onError: (error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Lesson comment edit mutation. + this.editCommentMutation = this.query.useMutation(this.updateComment, { + onSuccess: (response) => { + toast.success(__('Comment updated successfully.', 'tutor')); + const data = response.data; + const targetId = getCommentElementId(data.comment_id, data.is_reply); + const targetEl = document.getElementById(targetId); + + if (targetEl && data.html) { + targetEl.outerHTML = data.html; + } else { + this.reloadComments(); + } + + this.editingId = null; + }, + onError: (error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Lesson comment delete mutation. + this.deleteCommentMutation = this.query.useMutation(this.deleteComment, { + onSuccess: (response) => { + toast.success(__('Comment deleted successfully.', 'tutor')); + modal.closeModal(DELETE_COMMENT_MODAL_ID); + + const data = response.data; + const targetId = getCommentElementId(data.comment_id, data.is_reply); + const targetEl = document.getElementById(targetId); + + if (targetEl) { + targetEl.remove(); + } + + if (data.is_reply) { + // Check if there are any replies left. If not, remove the replies container. + const repliesContainer = document.getElementById(`${COMMENT_REPLIES_ID_PREFIX}${data.parent_id}`); + if (repliesContainer && repliesContainer.querySelectorAll(`.${CLASSES.REPLY_ITEM}`).length === 0) { + repliesContainer.remove(); + } + } + + if (data.count !== undefined) { + this.totalComments = data.count; + const mainCommentsCount = this.$refs.commentList.querySelectorAll( + `:scope > .${CLASSES.COMMENT_ITEM}`, + ).length; + this.hasMore = this.totalComments > mainCommentsCount; + + // If we deleted a main comment and there are more items on the server, + // trigger a load to fill the gap. + if (!data.is_reply && this.hasMore) { + this.loadNextPage(); + } + + this.isEmpty = this.$refs.commentList.querySelectorAll(`:scope > .${CLASSES.COMMENT_ITEM}`).length === 0; + } + }, + onError: (error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + // Lesson comment reply mutation + this.replyCommentMutation = this.query.useMutation(this.replyComment, { + onSuccess: (response, payload) => { + toast.success(__('Reply saved successfully', 'tutor')); + const data = response.data; + const parentId = payload.comment_parent; + const repliesWrapper = document.getElementById(`${COMMENT_REPLIES_ID_PREFIX}${parentId}`); + const repliesList = repliesWrapper?.querySelector(`.${CLASSES.REPLIES_WRAPPER}`); + + if (data.html) { + if (data.is_first_reply || !repliesList) { + // Append to parent flex container if replies wrapper doesn't exist yet + const parentComment = document.getElementById(`${COMMENT_ID_PREFIX}${parentId}`); + const commentContent = parentComment?.querySelector(`.${CLASSES.COMMENT_CONTENT}`); + commentContent?.insertAdjacentHTML('beforeend', data.html); + } else { + // Append item directly if wrapper exists + repliesList.insertAdjacentHTML('beforeend', data.html); + } + + // Notify Alpine to expand the replies and hide the form via custom event. + window.dispatchEvent(new CustomEvent(TUTOR_CUSTOM_EVENTS.COMMENT_REPLIED, { detail: { parentId } })); + + // Reset the specific reply form. + const replyFormId = `${COMMENT_REPLY_FORM_ID_PREFIX}${parentId}`; + if (form.hasForm(replyFormId)) { + form.reset(replyFormId); + } + } else { + // Fallback to reload if something went wrong + this.reloadComments(); + } + + if (data.count !== undefined) { + this.totalComments = data.count; + } + + this.replyingId = null; + }, + onError: (error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + createComment(payload: { comment_post_ID: number; comment_parent: number }) { + return wpPost>(endpoints.CREATE_LESSON_COMMENT, payload); + }, + + updateComment(payload: { comment_id: number; comment: string }) { + return wpPost>( + endpoints.UPDATE_LESSON_COMMENT, + payload, + ); + }, + + deleteComment(payload: { comment_id: number }) { + return wpPost< + AjaxResponse<{ html: string; comment_id: number; parent_id: number; count: number; is_reply: boolean }> + >(endpoints.DELETE_LESSON_COMMENT, payload); + }, + + replyComment(payload: ReplyCommentPayload) { + return wpPost>( + endpoints.REPLY_LESSON_COMMENT, + payload, + ); + }, + + handleReplyComment(data: { comment: string }, commentId: number) { + this.replyCommentMutation?.mutate({ + comment_post_ID: this.lessonId, + comment_parent: commentId, + comment: data.comment, + order: this.currentOrder, + }); + }, + + handleEditComment(data: { comment: string }, commentId: number) { + this.editCommentMutation?.mutate({ + comment_id: commentId, + comment: data.comment, + }); + }, + + handleChangeOrder(newOrder: OrderTypes) { + if (this.currentOrder === newOrder) return; + + this.currentOrder = newOrder; + this.updateURL(newOrder); + this.reloadComments(); + }, + + handleDeleteComment(payload: { commentId: number }) { + modal.showModal(DELETE_COMMENT_MODAL_ID, { commentId: payload.commentId }); + }, + + updateURL(order: OrderTypes) { + const url = new URL(window.location.href); + url.searchParams.set('order', order); + window.history.pushState({}, '', url); + }, + + reloadComments() { + this.isReloading = true; + this.currentPage = 1; + this.hasMore = true; + + wpPost>(endpoints.LOAD_LESSON_COMMENTS, { + lesson_id: this.lessonId, + current_page: 1, + order: this.currentOrder, + }) + .then((response) => { + // Replace entire comment list. + this.$refs.commentList.innerHTML = response.data.html; + this.hasMore = response.data.has_more; + + if (response.data.count !== undefined) { + this.totalComments = response.data.count; + } + + this.isEmpty = !response.data.html?.trim(); + }) + .catch((error) => { + toast.error(convertToErrorMessage(error)); + }) + .finally(() => { + this.isReloading = false; + }); + }, + + loadNextPage() { + if (!this.lessonId || this.loading || !this.hasMore) { + return; + } + + this.loading = true; + + // Calculate offset based on main comments in DOM. + const offset = this.$refs.commentList.querySelectorAll(`:scope > .${CLASSES.COMMENT_ITEM}`).length; + + wpPost>(endpoints.LOAD_LESSON_COMMENTS, { + lesson_id: this.lessonId, + offset, + order: this.currentOrder, + }) + .then((response) => { + if (response.data.has_more !== undefined) { + this.hasMore = response.data.has_more; + } + + if (response.data.html?.trim()) { + this.currentPage++; + this.$refs.commentList.insertAdjacentHTML('beforeend', response.data.html); + } + + this.isEmpty = this.$refs.commentList.querySelectorAll(`:scope > .${CLASSES.COMMENT_ITEM}`).length === 0; + }) + .catch((error) => { + toast.error(convertToErrorMessage(error)); + }) + .finally(() => { + this.loading = false; + }); + }, + + handleKeydown(event: KeyboardEvent) { + if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { + (event.target as HTMLFormElement).closest('form')?.requestSubmit(); + } + }, + + initInfiniteScroll() { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting && this.hasMore && !this.loading) { + this.loadNextPage(); + } + }, + { rootMargin: '200px' }, + ); + + observer.observe(this.$refs.loadMoreTrigger); + }, + }; +}; + +export const initializeLessonComments = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'lessonComments', + component: lessonComments, + }, + }); +}; diff --git a/assets/src/js/frontend/learning-area/lesson/index.ts b/assets/src/js/frontend/learning-area/lesson/index.ts new file mode 100644 index 0000000000..1c1413100d --- /dev/null +++ b/assets/src/js/frontend/learning-area/lesson/index.ts @@ -0,0 +1,10 @@ +import { initializeLessonComments } from './comments'; +import { initializeLessonPlayer } from './player'; + +/** + * Initialize all lesson related logic + */ +export const initializeLesson = () => { + initializeLessonPlayer(); + initializeLessonComments(); +}; diff --git a/assets/src/js/frontend/learning-area/lesson/player.ts b/assets/src/js/frontend/learning-area/lesson/player.ts new file mode 100644 index 0000000000..a33fc60ae5 --- /dev/null +++ b/assets/src/js/frontend/learning-area/lesson/player.ts @@ -0,0 +1,382 @@ +import { isVimeoPlyr, isYouTubePlyr } from '@FrontendTypes/index'; +import { __, sprintf } from '@wordpress/i18n'; + +interface AutoLoadResponse { + success: boolean; + data?: { + next_url: string; + }; +} + +interface PlayerData { + strict_mode?: boolean; + control_video_lesson_completion?: boolean; + lesson_completed?: boolean; + is_enrolled?: boolean; + best_watch_time?: number; + required_percentage?: number; + video_duration?: number; + post_id?: number; + autoload_next_course_content?: boolean; +} + +class LessonPlayer { + private element: HTMLElement; + private player: Plyr | null = null; + private playerData: PlayerData; + private syncInterval: ReturnType | null = null; + private maxSeekTime: number = 0; + private playedOnce: boolean = false; + + constructor(element: HTMLElement) { + this.element = element; + this.playerData = this.getPlayerData(); + this.maxSeekTime = this.playerData.best_watch_time || 0; + this.initPlyr(); + } + + /** + * Get player data from hidden input + */ + private getPlayerData(): PlayerData { + const el = document.getElementById('tutor_video_tracking_information'); + + if (!(el instanceof HTMLInputElement) || !el.value) { + return {}; + } + + try { + return JSON.parse(el.value) as PlayerData; + } catch { + return {}; + } + } + + /** + * Check if the current lesson requires a watch percentage + */ + private isRequiredPercentage(): boolean { + const { strict_mode, control_video_lesson_completion, lesson_completed, is_enrolled } = this.playerData; + const { tutorConfig } = window.TutorCore.config; + return Boolean( + tutorConfig.tutor_pro_url && is_enrolled && !lesson_completed && strict_mode && control_video_lesson_completion, + ); + } + + /** + * Calculate percentage + */ + private getPercentage(value: number, total: number): number { + if (value > 0 && total > 0) { + return Math.round((value / total) * 100); + } + return 0; + } + + /** + * UI: Enable Complete Lesson Button + */ + private enableCompleteLessonBtn() { + const btn = document.querySelector('button[name="complete_lesson_btn"]') as HTMLButtonElement; + if (!btn || !this.player) return; + + const completedPercentage = this.getPercentage(Number(this.player.currentTime), Number(this.player.duration)); + const requiredPercentage = this.playerData.required_percentage || 0; + + if (completedPercentage >= requiredPercentage) { + btn.disabled = false; + if (btn.nextElementSibling?.classList.contains('tutor-tooltip')) { + btn.nextElementSibling.remove(); + } + if (btn.parentElement?.classList.contains('tutor-tooltip-wrap')) { + btn.parentElement.replaceWith(btn); + } + } + } + + /** + * UI: Disable Complete Lesson Button + */ + private disableCompleteLessonBtn() { + const { best_watch_time = 0, video_duration = 0, required_percentage = 0 } = this.playerData; + const completedPercentage = this.getPercentage(Number(best_watch_time), Number(video_duration)); + + if (completedPercentage < required_percentage) { + const btn = document.querySelector('button[name="complete_lesson_btn"]') as HTMLButtonElement; + if (btn && !btn.disabled) { + btn.disabled = true; + if (!btn.parentElement?.classList.contains('tutor-tooltip-wrap')) { + const wrapper = document.createElement('div'); + wrapper.className = 'tutor-tooltip-wrap'; + wrapper.setAttribute('x-data', 'tutorTooltip({ placement: "top" })'); + btn.parentNode?.insertBefore(wrapper, btn); + wrapper.appendChild(btn); + btn.setAttribute('x-ref', 'trigger'); + } + + if (!btn.nextElementSibling?.classList.contains('tutor-tooltip')) { + btn.insertAdjacentHTML( + 'afterend', + `
    ${sprintf( + /* translators: %s is the required watch percentage (e.g., 80) */ + __('Watch at least %s%% to complete the lesson.', 'tutor'), + required_percentage, + )}
    `, + ); + + if (window.Alpine) { + window.Alpine.initTree(btn.parentElement as HTMLElement); + } + } + } + } + } + + /** + * Sync time with server + */ + private syncTime(options: Record = {}) { + if (!this.player || !this.playerData.post_id) return; + + if (this.isRequiredPercentage()) { + this.enableCompleteLessonBtn(); + } + + const data: Record = { + currentTime: this.player.currentTime, + duration: this.player.duration, + post_id: this.playerData.post_id, + ...options, + }; + + const { wpPost } = window.TutorCore.api; + wpPost('sync_video_playback', data); + + const currentTime = this.player.currentTime; + const bestWatchTime = this.playerData.best_watch_time || 0; + const seekTime = bestWatchTime > currentTime ? bestWatchTime : currentTime; + + if (seekTime > this.maxSeekTime) { + this.maxSeekTime = seekTime; + } + } + + /** + * Autoload next course content + */ + private autoloadContent() { + if (!this.playerData.post_id) return; + + const { wpPost } = window.TutorCore.api; + wpPost('autoload_next_course_content', { + post_id: this.playerData.post_id, + }).then((response) => { + if (response.success && response.data?.next_url) { + window.location.href = response.data.next_url; + } + }); + } + + /** + * Get target time from seek event input + */ + private getTargetTime(player: Plyr, event: Plyr.PlyrEvent): number { + const target = event.target; + if (target instanceof HTMLInputElement) { + const value = Number(target.value); + const max = Number(target.max) || 1; + return (value / max) * player.duration; + } + return Number(event); + } + + /** + * Initialize Plyr + */ + private initPlyr() { + if (typeof window.Plyr === 'undefined') return; + + const requiredPercentage = this.isRequiredPercentage(); + const config: Plyr.Options = { + keyboard: { + focused: !requiredPercentage, + global: false, + }, + listeners: { + ...(requiredPercentage && { + seek: (e) => { + if (!this.player) return true; + const newTime = this.getTargetTime(this.player, e); + const currentTime = this.player.currentTime; + const maxSeek = currentTime > this.maxSeekTime ? currentTime : this.maxSeekTime; + + if (newTime > maxSeek) { + e.preventDefault(); + window.TutorCore.toast.warning(__('Forward seeking is disabled', 'tutor')); + return false; + } + return true; + }, + }), + }, + }; + + this.player = new window.Plyr(this.element, config); + this.setupEvents(); + + if (requiredPercentage) { + this.disableCompleteLessonBtn(); + } + } + + /** + * Setup Plyr events + */ + private setupEvents() { + if (!this.player) return; + + this.player.on('ready', (event: Plyr.PlyrEvent) => { + // Remove loading spinner + document.querySelector('.tutor-video-player .loading-spinner')?.remove(); + + this.syncTime(); + + const instance = event.detail.plyr; + + /** + * Play from best watch time + */ + const { best_watch_time = 0 } = this.playerData; + const { tutorConfig } = window.TutorCore.config; + if (tutorConfig.tutor_pro_url && best_watch_time > 0) { + const previousDuration = Math.floor(best_watch_time); + setTimeout(() => { + if (instance.playing !== true && instance.currentTime !== previousDuration) { + if (isYouTubePlyr(instance)) { + instance.embed.seekTo(best_watch_time); + } else { + instance.currentTime = previousDuration; + } + } + }, 0); + } + + /** + * Fix: Mobile Vimeo autoplay sound issue + * Always start muted on mobile to comply with autoplay policy. + */ + const { isMobileDevice } = window.TutorCore.device; + if (isVimeoPlyr(instance) && isMobileDevice()) { + try { + instance.muted = true; + if (typeof instance.mute === 'function') { + instance.mute(); + } + } catch (err) { + // eslint-disable-next-line no-console + console.warn('Vimeo mute init failed:', err); + } + } + + // Dispatch custom event and set player to window + const customEvent = new CustomEvent('tutorLessonPlayerReady', { + detail: { player: instance }, + }); + window.dispatchEvent(customEvent); + window.TutorLessonPlayer = instance; + }); + + this.player.on('play', (event: Plyr.PlyrEvent) => { + if (this.syncInterval) clearInterval(this.syncInterval); + + this.playedOnce = true; + + /** + * Send to tutor backend about video playing time in this interval + */ + const intervalSeconds = 10; + const { tutorConfig } = window.TutorCore.config; + if (tutorConfig.tutor_pro_url) { + this.syncInterval = setInterval(() => { + this.syncTime(); + }, intervalSeconds * 1000); + } + + /** + * Unmute automatically after first user interaction + * Mobile browsers allow audio only after gesture. + */ + const instance = event.detail.plyr; + const { isMobileDevice } = window.TutorCore.device; + if (isVimeoPlyr(instance) && isMobileDevice()) { + try { + instance.muted = false; + if (typeof instance.unmute === 'function') { + instance.unmute(); + } + } catch (err) { + // eslint-disable-next-line no-console + console.warn('Vimeo unmute on play failed:', err); + } + } + + /** + * Fix: YouTube poster issue + */ + if (tutorConfig.tutor_pro_url && instance.provider === 'youtube') { + const poster = instance.elements.container?.querySelector('.plyr__poster') as HTMLElement; + if (poster) { + poster.style.opacity = '0'; + } + } + }); + + this.player.on('pause', () => { + if (this.syncInterval) clearInterval(this.syncInterval); + + const { tutorConfig } = window.TutorCore.config; + if (tutorConfig.tutor_pro_url) { + this.syncTime(); + } + }); + + this.player.on('ended', (event: Plyr.PlyrEvent) => { + if (this.syncInterval) clearInterval(this.syncInterval); + + const instance = event.detail.plyr; + this.syncTime({ is_ended: true }); + + const { tutorConfig } = window.TutorCore.config; + if (tutorConfig.user_preferences.auto_play_next && this.playedOnce) { + this.autoloadContent(); + } + + /** + * Fix: YouTube poster issue + */ + if (tutorConfig.tutor_pro_url && instance.provider === 'youtube') { + const poster = instance.elements.container?.querySelector('.plyr__poster') as HTMLElement; + if (poster) { + poster.style.opacity = '1'; + } + } + }); + } + + /** + * Initialize Lesson Player + */ + public static init() { + const player = document.querySelector('.tutor-lesson-video-wrapper .tutorPlayer') as HTMLElement; + if (player) { + new LessonPlayer(player); + } else { + // Remove loading spinner + document.querySelector('.tutor-video-player .loading-spinner')?.remove(); + } + } +} + +export const initializeLessonPlayer = () => { + LessonPlayer.init(); +}; diff --git a/assets/src/js/frontend/learning-area/pages/course-info.ts b/assets/src/js/frontend/learning-area/pages/course-info.ts new file mode 100644 index 0000000000..494f76a6fa --- /dev/null +++ b/assets/src/js/frontend/learning-area/pages/course-info.ts @@ -0,0 +1,14 @@ +/** + * Course Info Page logic + * + * @since 4.0.0 + */ + +/** + * Note: courseCompleteHandler has been moved to common.ts + * to be available globally (header/footer) in the learning area. + * Keeps course-info.ts for future page-specific logic. + */ +export const initializeCourseCourseInfo = () => { + // Add course-info specific logic here +}; diff --git a/assets/src/js/frontend/learning-area/pages/qna.ts b/assets/src/js/frontend/learning-area/pages/qna.ts new file mode 100644 index 0000000000..4e4b8119f3 --- /dev/null +++ b/assets/src/js/frontend/learning-area/pages/qna.ts @@ -0,0 +1,290 @@ +import { __ } from '@wordpress/i18n'; + +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +interface CreateQnaPayload { + course_id: number; + question: string; +} + +interface UpdateQnAPayload { + question_id: number; + answer: string; +} + +interface ReplyQnaPayload { + course_id: number; + question_id: number; + answer: string; + reply_context?: 'list' | 'single'; +} + +interface DeleteQnaPayload { + question_id: number; + context: string; +} + +const FORM_ID_PREFIXES = { + QNA_FORM: 'learning-area-qna-form', + QNA_EDIT: 'qna-edit-', + QNA_REPLY: 'qna-reply-form-', +}; + +const ELEMENT_IDS = { + QNA_TEXT_PREFIX: 'tutor-qna-text-', + REPLIES_LIST_CONTAINER: 'tutor-discussion-replies-list', +}; + +const MODALS = { + QNA_DELETE: 'tutor-qna-delete-modal', +}; + +const URL_PARAMS = { + QUESTION_ID: 'question_id', + ORDER: 'order', +}; + +/** + * Q&A Page Component + * Handles Q&A related action in learning area + */ +const qnaPage = () => { + const { query, form, modal, toast, endpoints } = window.TutorCore; + const { convertToErrorMessage } = window.TutorCore.error; + const { wpPost } = window.TutorCore.api; + + return { + query, + createQnAMutation: null as MutationState | null, + updateQnAMutation: null as MutationState | null, + replyQnAMutation: null as MutationState | null, + deleteQnAMutation: null as MutationState | null, + editingId: null as number | null, + editingFormId: null as string | null, + replyingId: null as number | null, + loadingReplies: false, + repliesOrder: 'DESC', + $nextTick: undefined as ((callback: () => void) => void) | undefined, + + init() { + this.createQnAMutation = this.query.useMutation(this.createQnA, { + onSuccess: () => { + toast.success(__('Question saved successfully', 'tutor')); + + const formId = FORM_ID_PREFIXES.QNA_FORM; + if (form.hasForm(formId)) { + form.reset(formId); + } + + window.location.reload(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.updateQnAMutation = this.query.useMutation(this.updateQnA, { + onSuccess: (_, payload) => { + toast.success(__('Updated successfully', 'tutor')); + + // Update DOM directly for immediate feedback + const element = document.getElementById(`${ELEMENT_IDS.QNA_TEXT_PREFIX}${payload.question_id}`); + if (element) { + element.innerHTML = payload.answer; + + // Re-trigger syntax highlighting if Prism is available. + const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism; + if (Prism?.highlightAllUnder) { + Prism.highlightAllUnder(element); + } + } + + if (this.editingId === payload.question_id) { + this.setEditing(null); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.replyQnAMutation = this.query.useMutation(this.replyQnA, { + onSuccess: (_, payload) => { + toast.success(__('Reply saved successfully', 'tutor')); + + const formId = `${FORM_ID_PREFIXES.QNA_REPLY}${payload.question_id}`; + if (form.hasForm(formId)) { + form.reset(formId); + } + + if (payload.reply_context === 'single') { + // this.reloadReplies(); + window.location.reload(); + } else { + this.setReplying(null); + this.updateReplyCount(payload.question_id); + this.highlightCard(payload.question_id); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + + this.deleteQnAMutation = this.query.useMutation(this.deleteQnA, { + onSuccess: (_, payload) => { + if (payload.context === 'reply') { + toast.success(__('Reply deleted successfully', 'tutor')); + modal.closeModal(MODALS.QNA_DELETE); + // this.reloadReplies(); + window.location.reload(); + } else { + toast.success(__('Question deleted successfully', 'tutor')); + modal.closeModal(MODALS.QNA_DELETE); + + // Reload the page. + const url = new URL(window.location.href); + url.searchParams.delete(URL_PARAMS.QUESTION_ID); + window.location.href = url.toString(); + } + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + createQnA(payload: CreateQnaPayload) { + return wpPost(endpoints.CREATE_UPDATE_QNA, payload); + }, + + updateQnA(payload: UpdateQnAPayload) { + return wpPost(endpoints.UPDATE_QNA, payload); + }, + + replyQnA(payload: ReplyQnaPayload) { + return wpPost(endpoints.CREATE_UPDATE_QNA, payload); + }, + + deleteQnA(payload: DeleteQnaPayload) { + return wpPost(endpoints.DELETE_DASHBOARD_QNA, payload); + }, + + async reloadReplies(order?: string) { + if (order) { + this.repliesOrder = order; + } + + const url = new URL(window.location.href); + const commentId = parseInt(url.searchParams.get(URL_PARAMS.QUESTION_ID) || '0'); + + if (!commentId) return; + + this.loadingReplies = true; + try { + const response = await wpPost>(endpoints.LOAD_QNA_REPLIES, { + comment_id: commentId, + order: this.repliesOrder, + context: 'learning-area', + }); + + const container = document.getElementById(ELEMENT_IDS.REPLIES_LIST_CONTAINER); + if (container && typeof response.data?.html === 'string') { + container.innerHTML = response.data.html; + + // Re-trigger syntax highlighting if Prism is available. + const Prism = (window as Window & { Prism?: { highlightAllUnder?: (root: Element) => void } }).Prism; + if (Prism?.highlightAllUnder) { + Prism.highlightAllUnder(container); + } + + // Update URL without reload + const url = new URL(window.location.href); + url.searchParams.set(URL_PARAMS.ORDER, this.repliesOrder); + window.history.pushState({}, '', url.toString()); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error('Failed to reload replies:', error); + } finally { + this.loadingReplies = false; + } + }, + + setEditing(id: number | null) { + this.editingId = id; + const formId = id ? `${FORM_ID_PREFIXES.QNA_EDIT}${id}` : null; + this.editingFormId = formId; + + if (id && formId) { + this.$nextTick?.(() => { + if (form.hasForm(formId)) { + form.setFocus(formId, 'answer'); + } + }); + } + }, + + setReplying(id: number | null) { + this.replyingId = id; + + if (id) { + const formId = `${FORM_ID_PREFIXES.QNA_REPLY}${id}`; + this.$nextTick?.(() => { + if (form.hasForm(formId)) { + form.setFocus(formId, 'answer'); + } + }); + } + }, + + toggleReply(id: number) { + if (this.replyingId === id) { + this.setReplying(null); + } else { + this.setReplying(id); + } + }, + + updateReplyCount(questionId: number) { + const card = document.querySelector(`[data-question-id="${questionId}"]`); + if (card) { + const countElement = card.querySelector('.tutor-discussion-card-reply-count'); + if (countElement) { + const currentCount = parseInt(countElement.textContent || '0', 10); + countElement.textContent = String(currentCount + 1); + } + } + }, + + highlightCard(questionId: number) { + const el = document.querySelector(`[data-question-id="${questionId}"]`); + const card = (el?.closest('.tutor-discussion-card') ?? el) as HTMLElement | null; + if (!card) return; + + if (window.innerWidth > 576) { + card.style.boxShadow = '0 0 0 2px var(--tutor-text-brand-secondary)'; + setTimeout(() => { + card.style.boxShadow = ''; + }, 300); + } + }, + + handleKeydown(event: KeyboardEvent) { + if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { + (event.target as HTMLFormElement).closest('form')?.requestSubmit(); + } + }, + }; +}; + +export const initializeQna = () => { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'QnA', + component: qnaPage, + }, + }); +}; diff --git a/assets/src/js/frontend/learning-area/quiz/auto-start.ts b/assets/src/js/frontend/learning-area/quiz/auto-start.ts new file mode 100644 index 0000000000..6a7dfbc9a1 --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/auto-start.ts @@ -0,0 +1,102 @@ +import { type MutationState } from '@Core/ts/services/Query'; +import type { AlpineComponentMeta } from '@Core/ts/types'; +import { QUIZ_EVENTS } from './constants'; + +export interface QuizAutoStartConfig { + quizID: number; + autoStart?: boolean; + autoStartModalId?: string; + countdownSeconds?: number; +} + +export interface StartQuizPayload { + quizID: number; +} + +const quizAutoStart = (config: QuizAutoStartConfig) => { + const { query, toast, modal, endpoints } = window.TutorCore; + const { convertToErrorMessage } = window.TutorCore.error; + const { wpPostForm } = window.TutorCore.api; + const { tutorConfig } = window.TutorCore.config; + const autoStartEvent = QUIZ_EVENTS.AUTO_START_COMPLETE; + + return { + quizID: config.quizID, + autoStart: + typeof config.autoStart === 'boolean' ? config.autoStart : Number(tutorConfig.quiz_options?.quiz_auto_start) > 0, + autoStartModalId: config.autoStartModalId ?? '', + countdownSeconds: Number(config.countdownSeconds) || 5, + isCountdownActive: false, + autoStartListener: null as ((event: Event) => void) | null, + startQuizMutation: null as MutationState | null, + + init() { + this.autoStartListener = () => { + if (!this.isCountdownActive) { + return; + } + this.isCountdownActive = false; + this.startQuizMutation?.mutate({ quizID: this.quizID }); + }; + + document.addEventListener(autoStartEvent, this.autoStartListener); + + this.startQuizMutation = query.useMutation(this.startQuiz, { + onSuccess: () => { + window.location.reload(); + }, + onError: (error: Error) => { + if (this.autoStartModalId) { + modal?.closeModal?.(this.autoStartModalId); + } + toast.error(convertToErrorMessage(error)); + }, + }); + + if (!this.autoStart) { + return; + } + + this.startAutoStartCountdown(); + }, + + handleStartQuiz() { + this.startQuizMutation?.mutate({ quizID: this.quizID }); + }, + + startAutoStartCountdown() { + if (!this.autoStartModalId) { + this.startQuizMutation?.mutate({ quizID: this.quizID }); + return; + } + + if (this.isCountdownActive) { + return; + } + + this.isCountdownActive = true; + + window.setTimeout(() => { + modal?.showModal?.(this.autoStartModalId); + }, 0); + }, + + startQuiz(payload: StartQuizPayload) { + return wpPostForm(window.location.href, { + tutor_action: endpoints.START_QUIZ, + quiz_id: payload.quizID, + }); + }, + + destroy() { + if (this.autoStartListener) { + document.removeEventListener(autoStartEvent, this.autoStartListener); + } + }, + }; +}; + +export const quizAutoStartMeta: AlpineComponentMeta = { + name: 'quizAutoStart', + component: quizAutoStart, +}; diff --git a/assets/src/js/frontend/learning-area/quiz/constants.ts b/assets/src/js/frontend/learning-area/quiz/constants.ts new file mode 100644 index 0000000000..a08a59d93c --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/constants.ts @@ -0,0 +1,53 @@ +export type RevealQuestionType = (typeof QUIZ_REVEAL_CONFIG.SUPPORTED_TYPES)[number]; + +export const QUIZ_REVEAL_CONFIG = { + ANSWER_CONTEXT_ID: 'tutor-quiz-context', + DEFAULT_WAIT_MS: 2000, + SUPPORTED_TYPES: ['true_false', 'single_choice', 'multiple_choice'] as const, + OPTION_SELECTOR: '.tutor-quiz-question-option', + QUESTION_SELECTOR: '.tutor-quiz-question', + EXPLANATION_SELECTOR: '[data-quiz-explanation]', + EXPLANATION_TRIGGER_SELECTOR: '[data-quiz-explanation-toggle]', + EXPLANATION_BODY_SELECTOR: '.tutor-quiz-explanation-body', + EXPLANATION_CONTENT_DATASET: 'quizExplanationContent', + DATA_OPTION_ATTR: 'data-option', + DATA_REVEALED_ATTR: 'data-revealed', + DATA_RESULT_ATTR: 'data-reveal-result', + DATA_OPTION_CORRECT: 'correct', + DATA_OPTION_INCORRECT: 'incorrect', +} as const; + +export const QUIZ_ABANDON_CONFIG = { + NAVIGATION_EVENT: 'click', + IGNORE_ANCHOR_PREFIXES: ['#', 'javascript:'], +} as const; + +export const QuestionTimeoutAction = { + AUTO_ABANDON: 'auto_abandon', + AUTO_SUBMIT: 'auto_submit', +} as const; + +export const QuizLayoutType = { + QUESTION_BELOW_EACH_OTHER: 'question_below_each_other', + QUESTION_PAGINATION: 'question_pagination', + SINGLE_QUESTION: 'single_question', +} as const; + +export const ERROR_MESSAGES = { + SUBMIT_FAILED: 'Failed to submit quiz', + ABANDON_FAILED: 'Failed to abandon quiz', + REQUIRED_QUESTIONS: 'Please answer all required questions before submitting.', +} as const; + +export const QUIZ_LAYOUT_SELECTORS = { + QUESTION_WRAPPER_ATTR: 'data-quiz-question-index', + QUESTION_WRAPPER: '.tutor-quiz-question-wrapper', +} as const; + +export const QUIZ_LAYOUT_KEYS = { + QUESTION_VALUE_PREFIX: '[quiz_question]', +} as const; + +export const QUIZ_EVENTS = { + AUTO_START_COMPLETE: 'tutor-quiz-autostart-complete', +} as const; diff --git a/assets/src/js/frontend/learning-area/quiz/helpers.ts b/assets/src/js/frontend/learning-area/quiz/helpers.ts new file mode 100644 index 0000000000..243bd312fa --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/helpers.ts @@ -0,0 +1,139 @@ +import { QUIZ_LAYOUT_KEYS, QUIZ_REVEAL_CONFIG } from './constants'; + +export const decodeHexString = (encoded: string): string | null => { + const bytes = encoded.match(/.{1,2}/g); + if (!bytes) { + return null; + } + return bytes.map((byte) => String.fromCharCode(parseInt(byte, 16))).join(''); +}; + +export const decodeExplanationContent = (encoded: string): string => { + if (!encoded) { + return ''; + } + try { + const hexDecoded = decodeHexString(encoded); + if (hexDecoded) { + return decodeURIComponent(hexDecoded); + } + } catch { + // fall through to legacy decode + } + try { + return decodeURIComponent(encoded.split('').reverse().join('')); + } catch { + return ''; + } +}; + +export const revealQuestionWithAnswers = (wrapper: HTMLElement, revealAnswerIds: number[]): void => { + const question = wrapper.querySelector(QUIZ_REVEAL_CONFIG.QUESTION_SELECTOR) as HTMLElement | null; + if (!question) { + return; + } + if (question.getAttribute(QUIZ_REVEAL_CONFIG.DATA_REVEALED_ATTR) === '1') { + return; + } + + const explanationTrigger = wrapper.querySelector(QUIZ_REVEAL_CONFIG.EXPLANATION_TRIGGER_SELECTOR); + const explanation = wrapper.querySelector(QUIZ_REVEAL_CONFIG.EXPLANATION_SELECTOR); + const explanationBody = explanation?.querySelector(QUIZ_REVEAL_CONFIG.EXPLANATION_BODY_SELECTOR) ?? null; + const encodedExplanation = explanation?.dataset?.[QUIZ_REVEAL_CONFIG.EXPLANATION_CONTENT_DATASET] ?? ''; + if (explanationBody && encodedExplanation && !explanationBody.innerHTML.trim()) { + const decoded = decodeExplanationContent(encodedExplanation); + if (decoded) { + explanationBody.innerHTML = decoded; + } + } + if (explanationTrigger && explanationTrigger.getAttribute('aria-expanded') !== 'true') { + explanationTrigger.click(); + } + + const inputs = Array.from(question.querySelectorAll('input[type="radio"], input[type="checkbox"]')); + const selectedAnswerIds = new Set(); + const correctAnswerIds = new Set(); + + inputs.forEach((input) => { + const option = input.closest(QUIZ_REVEAL_CONFIG.OPTION_SELECTOR) as HTMLElement | null; + if (!option) { + return; + } + + const answerId = Number(input.value); + if (Number.isNaN(answerId)) { + return; + } + + if (input.checked) { + selectedAnswerIds.add(answerId); + } + + const isCorrect = revealAnswerIds.includes(answerId); + if (isCorrect) { + correctAnswerIds.add(answerId); + } + + if (isCorrect) { + option.setAttribute(QUIZ_REVEAL_CONFIG.DATA_OPTION_ATTR, QUIZ_REVEAL_CONFIG.DATA_OPTION_CORRECT); + } else if (input.checked) { + option.setAttribute(QUIZ_REVEAL_CONFIG.DATA_OPTION_ATTR, QUIZ_REVEAL_CONFIG.DATA_OPTION_INCORRECT); + } + + input.disabled = true; + }); + + const hasMatchingSelection = + selectedAnswerIds.size > 0 && + selectedAnswerIds.size === correctAnswerIds.size && + Array.from(selectedAnswerIds).every((id) => correctAnswerIds.has(id)); + + question.setAttribute( + QUIZ_REVEAL_CONFIG.DATA_RESULT_ATTR, + hasMatchingSelection ? QUIZ_REVEAL_CONFIG.DATA_OPTION_CORRECT : QUIZ_REVEAL_CONFIG.DATA_OPTION_INCORRECT, + ); + question.setAttribute(QUIZ_REVEAL_CONFIG.DATA_REVEALED_ATTR, '1'); +}; + +export const getAttemptedQuestionCount = (values: Record): number => { + const questionIdsEntry = Object.entries(values).find(([key]) => key.includes('[quiz_question_ids]')); + if (!questionIdsEntry) { + return 0; + } + + const questionIds = Array.isArray(questionIdsEntry[1]) ? questionIdsEntry[1] : []; + let count = 0; + + for (const id of questionIds) { + const needle = `${QUIZ_LAYOUT_KEYS.QUESTION_VALUE_PREFIX}[${id}]`; + const hasAnswer = Object.entries(values).some(([key, val]) => { + if (!key.includes(needle)) { + return false; + } + + if (val === '' || val === null || val === undefined) { + return false; + } + if (Array.isArray(val) && val.length === 0) { + return false; + } + return true; + }); + + if (hasAnswer) { + count++; + } + } + + return count; +}; + +export const getAttemptedQuestionCountFromForm = (formId: string): number => { + const form = window.TutorCore?.form; + if (!form || !formId || !form.hasForm(formId)) { + return 0; + } + + const values = form.getFormState(formId).values ?? {}; + return getAttemptedQuestionCount(values); +}; diff --git a/assets/src/js/frontend/learning-area/quiz/index.ts b/assets/src/js/frontend/learning-area/quiz/index.ts new file mode 100644 index 0000000000..20a7dbf3ec --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/index.ts @@ -0,0 +1,28 @@ +import { quizRetryAttemptMeta } from '@FrontendComponents/quiz/retry-attempt'; +import { quizSummarySidebarMeta } from '@FrontendComponents/quiz/summary-sidebar'; + +import { quizAutoStartMeta } from './auto-start'; +import { quizLayoutMeta } from './layout'; +import { questionMatchingMeta } from './questions/matching'; +import { questionOrderingMeta } from './questions/ordering'; +import { quizRadarMeta } from './radar'; +import { quizSubmissionMeta } from './submission'; +import { quizTimerMeta } from './timer'; + +export const initializeQuizInterface = () => { + window.TutorComponentRegistry.registerAll({ + components: [ + quizTimerMeta, + questionOrderingMeta, + questionMatchingMeta, + quizSubmissionMeta, + quizAutoStartMeta, + quizRadarMeta, + quizLayoutMeta, + quizRetryAttemptMeta, + quizSummarySidebarMeta, + ], + }); + + window.TutorComponentRegistry.initWithAlpine(window.Alpine); +}; diff --git a/assets/src/js/frontend/learning-area/quiz/layout.ts b/assets/src/js/frontend/learning-area/quiz/layout.ts new file mode 100644 index 0000000000..c36f595258 --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/layout.ts @@ -0,0 +1,573 @@ +import type { AlpineComponentMeta } from '@Core/ts/types'; + +import { QUIZ_LAYOUT_KEYS, QUIZ_LAYOUT_SELECTORS, QUIZ_REVEAL_CONFIG, QuizLayoutType } from './constants'; +import { revealQuestionWithAnswers } from './helpers'; + +export interface QuizLayoutConfig { + layout: (typeof QuizLayoutType)[keyof typeof QuizLayoutType]; + formId: string; + totalQuestions: number; + enableAnswerReveal?: boolean; + revealWaitMs?: number; +} + +const quizLayout = (config: QuizLayoutConfig) => { + const { form, tutorConfig } = window.TutorCore; + let container: Element | null | undefined = null; + + let handleFirstTab: ((e: KeyboardEvent) => void) | null = null; + let handleMouseDown: (() => void) | null = null; + + return { + layout: config.layout ?? QuizLayoutType.QUESTION_BELOW_EACH_OTHER, + formId: config.formId ?? '', + + totalQuestions: Number(config.totalQuestions) || 0, + currentIndex: 1, + enableAnswerReveal: config.enableAnswerReveal ?? false, + revealWaitMs: config.revealWaitMs ?? null, + revealAnswerIds: [] as number[], + answerRequiredByIndex: {} as Record, + revealStateByIndex: {} as Record, + skippedByIndex: {} as Record, + revealFooterState: '' as '' | 'correct' | 'incorrect', + isRevealing: false, + revealTimeoutId: null as number | null, + $el: null as HTMLElement | null, + $root: null as HTMLElement | null, + + init() { + container = (this.$root ?? this.$el)?.querySelector('.tutor-quiz-questions'); + + // Keyboard vs Mouse Navigation helper for focus styles + handleFirstTab = (e: KeyboardEvent) => { + if (e.key === 'Tab') { + container?.classList.add('tutor-keyboard-nav'); + if (handleFirstTab) window.removeEventListener('keydown', handleFirstTab); + if (handleMouseDown) { + window.addEventListener('mousedown', handleMouseDown); + window.addEventListener('touchstart', handleMouseDown); + } + } + }; + + handleMouseDown = () => { + container?.classList.remove('tutor-keyboard-nav'); + if (handleMouseDown) { + window.removeEventListener('mousedown', handleMouseDown); + window.removeEventListener('touchstart', handleMouseDown); + } + if (handleFirstTab) window.addEventListener('keydown', handleFirstTab); + }; + + if (handleFirstTab) window.addEventListener('keydown', handleFirstTab); + + this.revealAnswerIds = this.getRevealAnswerIds(); + this.answerRequiredByIndex = this.getAnswerRequiredMap(); + this.revealStateByIndex = this.getRevealStateMap(); + this.skippedByIndex = this.getSkippedStateMap(); + if (this.layout === QuizLayoutType.QUESTION_BELOW_EACH_OTHER) { + return; + } + this.currentIndex = 1; + this.syncCurrentRevealFooterState(); + }, + + destroy() { + if (handleFirstTab) { + window.removeEventListener('keydown', handleFirstTab); + } + if (handleMouseDown) { + window.removeEventListener('mousedown', handleMouseDown); + window.removeEventListener('touchstart', handleMouseDown); + } + }, + + isQuestionActive(index: number) { + if (this.layout === QuizLayoutType.QUESTION_BELOW_EACH_OTHER) { + return true; + } + return index === this.currentIndex; + }, + + canSkip(index: number) { + if (this.layout === QuizLayoutType.QUESTION_BELOW_EACH_OTHER) { + return false; + } + if (index >= this.totalQuestions) { + return false; + } + + if (Object.prototype.hasOwnProperty.call(this.answerRequiredByIndex, index)) { + return !this.answerRequiredByIndex[index]; + } + + const wrapper = this.getQuestionWrapper(index); + if (!wrapper) { + return false; + } + return wrapper.dataset.answerRequired !== '1'; + }, + + hasAttemptedValue(value: unknown): boolean { + if (value === null || value === undefined) { + return false; + } + + if (typeof value === 'string') { + return value.trim().length > 0; + } + + if (Array.isArray(value)) { + return value.some((item) => this.hasAttemptedValue(item)); + } + + if (typeof value === 'object') { + return Object.values(value as Record).some((item) => this.hasAttemptedValue(item)); + } + + return true; + }, + + isQuestionAttempted(index: number): boolean { + if (!form || !this.formId || !form.hasForm(this.formId)) { + return false; + } + + const values = form.getFormState(this.formId).values ?? {}; + const fieldNames = this.getQuestionFieldNames(values, index); + + if (!fieldNames.length) { + return false; + } + + return fieldNames.some((fieldName) => this.hasAttemptedValue(values[fieldName])); + }, + + shouldDisableNextButton(): boolean { + if (this.layout !== QuizLayoutType.SINGLE_QUESTION) { + return false; + } + + return this.answerRequiredByIndex[this.currentIndex] && !this.isQuestionAttempted(this.currentIndex); + }, + + getPaginationState(index: number): 'answered' | 'correct' | 'incorrect' | 'skipped' | null { + if (this.revealStateByIndex[index]) { + return this.revealStateByIndex[index]; + } + + if (this.isQuestionAttempted(index)) { + return 'answered'; + } + + if (this.skippedByIndex[index]) { + return 'skipped'; + } + + return null; + }, + + getPaginationItemClass(index: number) { + const state = this.getPaginationState(index); + + return { + active: this.currentIndex === index, + answered: state === 'answered', + correct: state === 'correct', + incorrect: state === 'incorrect', + skipped: state === 'skipped', + upcoming: index > this.currentIndex && state === null, + }; + }, + + syncRevealFooterState(wrapper: HTMLElement) { + if (!this.isRevealMode()) { + this.revealFooterState = ''; + return; + } + + const question = this.getQuestionElement(wrapper); + if (!question || question.getAttribute(QUIZ_REVEAL_CONFIG.DATA_REVEALED_ATTR) !== '1') { + this.revealFooterState = ''; + return; + } + + const result = question.getAttribute(QUIZ_REVEAL_CONFIG.DATA_RESULT_ATTR); + if (result === QUIZ_REVEAL_CONFIG.DATA_OPTION_CORRECT) { + this.revealStateByIndex[this.currentIndex] = 'correct'; + this.revealFooterState = 'correct'; + return; + } + if (result === QUIZ_REVEAL_CONFIG.DATA_OPTION_INCORRECT) { + this.revealStateByIndex[this.currentIndex] = 'incorrect'; + this.revealFooterState = 'incorrect'; + return; + } + + this.revealFooterState = ''; + }, + + syncCurrentRevealFooterState() { + if (!this.isRevealMode()) { + this.revealFooterState = ''; + return; + } + + const wrapper = this.getQuestionWrapper(this.currentIndex); + if (!wrapper) { + this.revealFooterState = ''; + return; + } + + this.syncRevealFooterState(wrapper); + }, + + goPrev() { + if (this.layout === QuizLayoutType.QUESTION_BELOW_EACH_OTHER) { + return; + } + if (this.currentIndex > 1) { + this.clearRevealTimeout(); + this.markCurrentAsSkipped(); + this.runWithViewTransition(() => { + this.currentIndex -= 1; + this.syncCurrentRevealFooterState(); + }, 'back'); + this.scrollToQuestion(); + } + }, + + async goNext({ skipValidation = false }: { skipValidation?: boolean } = {}) { + if (this.layout === QuizLayoutType.QUESTION_BELOW_EACH_OTHER) { + return; + } + + if (!skipValidation && this.shouldDisableNextButton()) { + return; + } + + const wrapper = this.getQuestionWrapper(this.currentIndex); + if (!wrapper) { + return; + } + if (!skipValidation) { + const isValid = await this.triggerQuestionValidation(this.currentIndex); + if (!isValid) { + return; + } + } + + if (!skipValidation && this.isRevealMode() && this.shouldReveal(wrapper)) { + if (this.isQuestionRevealed(wrapper)) { + this.clearRevealTimeout(); + this.moveToNextQuestion(); + return; + } + + if (!this.isQuestionAttempted(this.currentIndex)) { + this.moveToNextQuestion(); + return; + } + + this.isRevealing = true; + this.revealQuestion(wrapper); + this.syncRevealFooterState(wrapper); + const wait = this.getRevealWaitTime(); + this.revealTimeoutId = window.setTimeout(() => { + this.isRevealing = false; + this.revealTimeoutId = null; + this.moveToNextQuestion(); + }, wait); + return; + } + + this.moveToNextQuestion(); + }, + + goTo(index: number) { + if (this.layout === QuizLayoutType.QUESTION_BELOW_EACH_OTHER) { + return; + } + if (!index || index < 1 || index > this.totalQuestions) { + return; + } + this.clearRevealTimeout(); + this.markCurrentAsSkipped(); + this.runWithViewTransition( + () => { + this.currentIndex = index; + this.syncCurrentRevealFooterState(); + }, + index < this.currentIndex ? 'back' : 'forward', + ); + this.scrollToQuestion(); + }, + + runWithViewTransition(update: () => void, direction: 'forward' | 'back' = 'forward') { + void direction; + update(); + }, + + clearRevealTimeout() { + if (this.revealTimeoutId !== null) { + window.clearTimeout(this.revealTimeoutId); + this.revealTimeoutId = null; + } + this.isRevealing = false; + }, + + moveToNextQuestion() { + if (this.currentIndex < this.totalQuestions) { + this.markCurrentAsSkipped(); + this.runWithViewTransition(() => { + this.currentIndex += 1; + this.syncCurrentRevealFooterState(); + }); + this.scrollToQuestion(); + } + }, + + getRevealWaitTime(): number { + const feedbackWaitMs = Number(this.revealWaitMs ?? ''); + if (!Number.isNaN(feedbackWaitMs) && feedbackWaitMs > 0) { + return feedbackWaitMs; + } + const configValue = Number(tutorConfig.quiz_answer_display_time ?? ''); + if (!Number.isNaN(configValue) && configValue > 0) { + return configValue; + } + return QUIZ_REVEAL_CONFIG.DEFAULT_WAIT_MS; + }, + + isRevealMode(): boolean { + return this.enableAnswerReveal; + }, + + getRevealAnswerIds(): number[] { + const script = document.getElementById(QUIZ_REVEAL_CONFIG.ANSWER_CONTEXT_ID); + if (!script?.textContent) { + return []; + } + + try { + const encoded = script.textContent.trim(); + const decoded = encoded + .match(/.{1,2}/g) + ?.map((byte) => String.fromCharCode(parseInt(byte, 16))) + .join(''); + if (!decoded) { + return []; + } + const parsed = JSON.parse(decoded); + if (!Array.isArray(parsed)) { + return []; + } + return parsed.map((value) => Number(value)).filter((value) => !Number.isNaN(value)); + } catch { + return []; + } + }, + + getQuestionElement(wrapper: HTMLElement): HTMLElement | null { + return wrapper.querySelector(QUIZ_REVEAL_CONFIG.QUESTION_SELECTOR); + }, + + isQuestionRevealed(wrapper: HTMLElement): boolean { + const question = this.getQuestionElement(wrapper); + return question?.getAttribute(QUIZ_REVEAL_CONFIG.DATA_REVEALED_ATTR) === '1'; + }, + + getQuestionType(wrapper: HTMLElement): string { + return this.getQuestionElement(wrapper)?.dataset?.question ?? ''; + }, + + shouldReveal(wrapper: HTMLElement): boolean { + if (!this.isRevealMode()) { + return false; + } + if (!this.revealAnswerIds.length) { + return false; + } + const questionType = this.getQuestionType(wrapper); + return (QUIZ_REVEAL_CONFIG.SUPPORTED_TYPES as readonly string[]).includes(questionType); + }, + + revealQuestion(wrapper: HTMLElement) { + revealQuestionWithAnswers(wrapper, this.revealAnswerIds); + }, + + revealOnSubmit(): boolean { + if (!this.isRevealMode()) { + return false; + } + + if (this.layout === QuizLayoutType.QUESTION_BELOW_EACH_OTHER) { + const wrappers = Array.from( + (this.$root ?? this.$el)?.querySelectorAll(`${QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER}`) ?? [], + ); + let revealedAny = false; + wrappers.forEach((wrapper) => { + if (this.shouldReveal(wrapper)) { + this.revealQuestion(wrapper); + revealedAny = true; + } + }); + return revealedAny; + } + + const wrapper = this.getQuestionWrapper(this.currentIndex); + if (!wrapper || !this.shouldReveal(wrapper)) { + return false; + } + this.revealQuestion(wrapper); + return true; + }, + + getQuestionWrapper(index: number) { + const root = this.$root ?? this.$el; + return root?.querySelector( + `${QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER}[${QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER_ATTR}="${index}"]`, + ) as HTMLElement | null; + }, + + getAnswerRequiredMap(): Record { + const root = this.$root ?? this.$el; + if (!root) { + return {}; + } + + const wrappers = Array.from(root.querySelectorAll(QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER)); + const map: Record = {}; + + wrappers.forEach((wrapper) => { + const index = Number(wrapper.getAttribute(QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER_ATTR)); + if (Number.isNaN(index) || index < 1) { + return; + } + map[index] = wrapper.dataset.answerRequired === '1'; + }); + + return map; + }, + + getRevealStateMap(): Record { + const root = this.$root ?? this.$el; + if (!root || !this.isRevealMode()) { + return {}; + } + + const wrappers = Array.from(root.querySelectorAll(QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER)); + const map: Record = {}; + + wrappers.forEach((wrapper) => { + const index = Number(wrapper.getAttribute(QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER_ATTR)); + if (Number.isNaN(index) || index < 1) { + return; + } + + const question = this.getQuestionElement(wrapper); + if (!question || question.getAttribute(QUIZ_REVEAL_CONFIG.DATA_REVEALED_ATTR) !== '1') { + return; + } + + const result = question.getAttribute(QUIZ_REVEAL_CONFIG.DATA_RESULT_ATTR); + if (result === QUIZ_REVEAL_CONFIG.DATA_OPTION_CORRECT) { + map[index] = 'correct'; + return; + } + if (result === QUIZ_REVEAL_CONFIG.DATA_OPTION_INCORRECT) { + map[index] = 'incorrect'; + } + }); + + return map; + }, + + getSkippedStateMap(): Record { + const root = this.$root ?? this.$el; + if (!root) { + return {}; + } + + const wrappers = Array.from(root.querySelectorAll(QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER)); + const map: Record = {}; + + wrappers.forEach((wrapper) => { + const index = Number(wrapper.getAttribute(QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER_ATTR)); + if (Number.isNaN(index) || index < 1) { + return; + } + map[index] = false; + }); + + return map; + }, + + markCurrentAsSkipped() { + const index = this.currentIndex; + if (!index || index < 1 || index > this.totalQuestions) { + return; + } + + if (this.revealStateByIndex[index]) { + this.skippedByIndex[index] = false; + return; + } + + const attempted = this.isQuestionAttempted(index); + this.skippedByIndex[index] = !attempted; + }, + + scrollToQuestion() { + const wrapper = this.getQuestionWrapper(this.currentIndex); + if (!wrapper) { + return; + } + wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }, + + getQuestionIdByIndex(values: Record, index: number) { + const entry = Object.entries(values).find(([key]) => key.includes('[quiz_question_ids]')); + if (!entry) { + return null; + } + const [, value] = entry; + const ids = Array.isArray(value) ? value : []; + + if (!ids.length) { + return null; + } + + return ids[index - 1] ?? null; + }, + + getQuestionFieldNames(values: Record, index: number) { + const questionId = this.getQuestionIdByIndex(values, index); + if (!questionId) { + return []; + } + const needle = `${QUIZ_LAYOUT_KEYS.QUESTION_VALUE_PREFIX}[${questionId}]`; + return Object.keys(values).filter((key) => key.includes(needle)); + }, + + async triggerQuestionValidation(index: number) { + if (!form || !this.formId || !form.hasForm(this.formId)) { + return true; + } + + const values = form.getFormState(this.formId).values ?? {}; + const fieldNames = this.getQuestionFieldNames(values, index); + if (!fieldNames.length) { + return true; + } + + return await form.trigger(this.formId, fieldNames); + }, + }; +}; + +export const quizLayoutMeta: AlpineComponentMeta = { + name: 'quizLayout', + component: quizLayout, +}; diff --git a/assets/src/js/frontend/learning-area/quiz/questions/matching.ts b/assets/src/js/frontend/learning-area/quiz/questions/matching.ts new file mode 100644 index 0000000000..b1da6c42dc --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/questions/matching.ts @@ -0,0 +1,300 @@ +import type { Draggable, Droppable } from '@dnd-kit/dom'; +import { __ } from '@wordpress/i18n'; + +import type { AlpineComponentMeta } from '@Core/ts/types'; + +const loadDndKit = async () => { + const dom = await import(/* webpackChunkName: "tutor-dnd-kit" */ '@dnd-kit/dom'); + + return { + DragDropManager: dom.DragDropManager, + Draggable: dom.Draggable, + Droppable: dom.Droppable, + KeyboardSensor: dom.KeyboardSensor, + PointerSensor: dom.PointerSensor, + }; +}; + +const QUESTION_MATCHING_CONSTANTS = { + CLASSES: { + QUESTION_OPTION: 'tutor-quiz-question-option', + DROP_ZONE: 'tutor-quiz-question-option-drop-zone', + TEXT_SUBDUED: 'tutor-text-subdued', + DROPPED: 'dropped', + }, + ATTRS: { + OPTION: 'data-option', + ID: 'data-id', + GRAB_HANDLE: 'data-grab-handle', + DROP_ZONE_ID: 'data-drop-zone-id', + DROP_PLACEHOLDER: 'data-drop-placeholder', + DROP_PLACEHOLDER_TEXT: 'data-drop-placeholder-text', + }, + VALUES: { + DRAGGABLE: 'draggable', + DRAGGING: 'dragging', + DROPPED: 'dropped', + }, + DATASET: { + ID: 'id', + DROP_ZONE_ID: 'dropZoneId', + DROP_PLACEHOLDER_TEXT: 'dropPlaceholderText', + }, +} as const; + +/** + * Question Matching Component + * Handles drag-and-drop matching of quiz question options to drop zones + */ +const questionMatching = ( + config: { + questionId?: string; + onDrop?: (values: string[]) => void; + onClear?: (values: string[]) => void; + } = {}, +) => ({ + _draggables: [] as Draggable[], + _dropZones: [] as Droppable[], + _matches: {} as Record, + _dropZoneOrder: [] as string[], + _questionId: config.questionId, + _callbacks: { + onDrop: config.onDrop, + onClear: config.onClear, + }, + $el: null as HTMLElement | null, + $event: null as Event | null, + initialized: false, + + _getValuesFromMatches(): string[] { + return this._dropZoneOrder.map((id) => this._matches[id] ?? ''); + }, + clearDropZone() { + const target = this.$event?.target as HTMLElement | null; + const dropZone = target?.closest(`.${QUESTION_MATCHING_CONSTANTS.CLASSES.DROP_ZONE}`) as HTMLElement | null; + if (!dropZone) { + return; + } + + const droppedOption = dropZone.querySelector( + `[${QUESTION_MATCHING_CONSTANTS.ATTRS.OPTION}="${QUESTION_MATCHING_CONSTANTS.VALUES.DROPPED}"]`, + ); + if (droppedOption) { + droppedOption.remove(); + } + + this._restoreDropPlaceholder(dropZone); + + const dropZoneId = dropZone.dataset[QUESTION_MATCHING_CONSTANTS.DATASET.DROP_ZONE_ID]; + if (dropZoneId && this._matches[dropZoneId]) { + delete this._matches[dropZoneId]; + } + + const values = this._getValuesFromMatches(); + this._callbacks.onClear?.(values); + }, + + _restoreDropPlaceholder(dropZoneEl: HTMLElement) { + const existingPlaceholder = dropZoneEl.querySelector(`[${QUESTION_MATCHING_CONSTANTS.ATTRS.DROP_PLACEHOLDER}]`); + if (existingPlaceholder) { + return; + } + + const placeholder = document.createElement('span'); + placeholder.setAttribute(QUESTION_MATCHING_CONSTANTS.ATTRS.DROP_PLACEHOLDER, ''); + placeholder.className = QUESTION_MATCHING_CONSTANTS.CLASSES.TEXT_SUBDUED; + placeholder.textContent = + dropZoneEl.dataset[QUESTION_MATCHING_CONSTANTS.DATASET.DROP_PLACEHOLDER_TEXT] || __('Drop here', 'tutor'); + dropZoneEl.prepend(placeholder); + }, + + _animateDropSnap(dropZoneEl: HTMLElement, droppedOptionEl: HTMLElement) { + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + return; + } + + dropZoneEl.animate([{ transform: 'scale(0.985)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }], { + duration: 220, + easing: 'cubic-bezier(0.2, 0.9, 0.2, 1)', + }); + + droppedOptionEl.animate( + [ + { transform: 'scale(0.94)', opacity: 0.86 }, + { transform: 'scale(1.015)', opacity: 1 }, + { transform: 'scale(1)', opacity: 1 }, + ], + { + duration: 180, + easing: 'cubic-bezier(0.22, 1, 0.36, 1)', + }, + ); + }, + + init() { + if (!this.initialized) { + this.setupDrag(); + this.initialized = true; + } + }, + + async setupDrag() { + const container = this.$el; + if (!container) { + return; + } + + const { DragDropManager, Draggable, Droppable, KeyboardSensor, PointerSensor } = await loadDndKit(); + if (!this.initialized) { + return; + } + + const manager = new DragDropManager({ + sensors: [PointerSensor, KeyboardSensor], + }); + + const draggableEls = Array.from( + container.querySelectorAll( + `.${QUESTION_MATCHING_CONSTANTS.CLASSES.QUESTION_OPTION}[${QUESTION_MATCHING_CONSTANTS.ATTRS.OPTION}="${QUESTION_MATCHING_CONSTANTS.VALUES.DRAGGABLE}"]`, + ), + ); + + draggableEls.forEach((element, idx) => { + const handle = element.querySelector(`[${QUESTION_MATCHING_CONSTANTS.ATTRS.GRAB_HANDLE}]`) as HTMLElement | null; + const id = element.dataset[QUESTION_MATCHING_CONSTANTS.DATASET.ID] ?? String(idx); + + const draggable = new Draggable( + { + id, + element: element, + handle: handle ?? undefined, + feedback: 'clone', + }, + manager, + ); + + this._draggables.push(draggable); + }); + + const dropZoneElements = Array.from( + container.querySelectorAll(`.${QUESTION_MATCHING_CONSTANTS.CLASSES.DROP_ZONE}`), + ); + + dropZoneElements.forEach((element, idx) => { + const id = element.dataset[QUESTION_MATCHING_CONSTANTS.DATASET.ID] ?? String(idx); + element.dataset[QUESTION_MATCHING_CONSTANTS.DATASET.DROP_ZONE_ID] = id; + this._dropZoneOrder.push(id); + + const droppable = new Droppable( + { + id, + element: element, + }, + manager, + ); + + this._dropZones.push(droppable); + }); + + manager.monitor.addEventListener('dragstart', (event) => { + const operation = event.operation; + if (!operation.source) { + return; + } + + const sourceElement = operation.source.element; + if (sourceElement) { + sourceElement.setAttribute( + QUESTION_MATCHING_CONSTANTS.ATTRS.OPTION, + QUESTION_MATCHING_CONSTANTS.VALUES.DRAGGING, + ); + } + }); + + manager.monitor.addEventListener('dragend', (event) => { + const operation = event.operation; + if (!operation.source) { + return; + } + + const sourceElement = operation.source.element; + const targetDropZone = operation.target; + + if (sourceElement) { + sourceElement.setAttribute( + QUESTION_MATCHING_CONSTANTS.ATTRS.OPTION, + QUESTION_MATCHING_CONSTANTS.VALUES.DRAGGABLE, + ); + } + + if (targetDropZone) { + const dropZoneEl = targetDropZone.element; + const sourceId = operation.source.id; + + if (!dropZoneEl) { + return; + } + + const clone = document.createElement('div'); + clone.setAttribute(QUESTION_MATCHING_CONSTANTS.ATTRS.OPTION, QUESTION_MATCHING_CONSTANTS.VALUES.DROPPED); + clone.setAttribute(QUESTION_MATCHING_CONSTANTS.ATTRS.ID, String(sourceId)); + clone.textContent = sourceElement?.textContent ?? ''; + + const placeholder = dropZoneEl?.querySelector(`[${QUESTION_MATCHING_CONSTANTS.ATTRS.DROP_PLACEHOLDER}]`); + const droppedOption = dropZoneEl?.querySelector( + `[${QUESTION_MATCHING_CONSTANTS.ATTRS.OPTION}="${QUESTION_MATCHING_CONSTANTS.VALUES.DROPPED}"]`, + ); + if (placeholder) { + placeholder.replaceWith(clone); + } else if (droppedOption) { + droppedOption.replaceWith(clone); + } + + this._animateDropSnap(dropZoneEl as HTMLElement, clone); + + this._matches[targetDropZone.id] = String(sourceId); + const values = this._getValuesFromMatches(); + this._callbacks.onDrop?.(values); + } + }); + }, + + // @TODO: Will be removed if not needed + reset() { + this._dropZones.forEach((zone: Droppable) => { + const dropZone = zone.element; + while (dropZone?.firstChild) { + dropZone.removeChild(dropZone.firstChild); + } + }); + + this._draggables.forEach((draggable: Draggable) => { + draggable.element?.setAttribute( + QUESTION_MATCHING_CONSTANTS.ATTRS.OPTION, + QUESTION_MATCHING_CONSTANTS.VALUES.DRAGGABLE, + ); + draggable.element?.classList.remove(QUESTION_MATCHING_CONSTANTS.CLASSES.DROPPED); + }); + + this._matches = {}; + this._dropZoneOrder = []; + }, + + destroy() { + this._draggables.forEach((draggable: Draggable) => draggable.destroy()); + this._draggables = []; + + this._dropZones.forEach((dropZone: Droppable) => dropZone.destroy()); + this._dropZones = []; + + this._matches = {}; + this._dropZoneOrder = []; + + this.initialized = false; + }, +}); + +export const questionMatchingMeta: AlpineComponentMeta = { + name: 'questionMatching', + component: questionMatching, +}; diff --git a/assets/src/js/frontend/learning-area/quiz/questions/ordering.ts b/assets/src/js/frontend/learning-area/quiz/questions/ordering.ts new file mode 100644 index 0000000000..de0f0815ff --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/questions/ordering.ts @@ -0,0 +1,170 @@ +import type { Sortable } from '@dnd-kit/dom/sortable'; + +import type { AlpineComponentMeta } from '@Core/ts/types'; + +const loadDndKit = async () => { + const [dom, sortable] = await Promise.all([ + import(/* webpackChunkName: "tutor-dnd-kit" */ '@dnd-kit/dom'), + import(/* webpackChunkName: "tutor-dnd-kit" */ '@dnd-kit/dom/sortable'), + ]); + + return { + DragDropManager: dom.DragDropManager, + KeyboardSensor: dom.KeyboardSensor, + PointerSensor: dom.PointerSensor, + Sortable: sortable.Sortable, + }; +}; + +const QUESTION_ORDERING_CONSTANTS = { + CLASSES: { + QUESTION_OPTION: 'tutor-quiz-question-option', + }, + ATTRS: { + OPTION: 'data-option', + ID: 'data-id', + GRAB_HANDLE: 'data-grab-handle', + }, + VALUES: { + DRAGGABLE: 'draggable', + DRAGGING: 'dragging', + }, + DATASET: { + ID: 'id', + }, +} as const; + +/** + * Question Ordering Component + * Handles drag-and-drop reordering of quiz question options + */ +const questionOrdering = ( + config: { + questionId?: string; + onOrder?: (values: string[]) => void; + } = {}, +) => ({ + _sortables: [] as Sortable[], + _questionId: config.questionId, + _callbacks: { + onOrder: config.onOrder, + }, + initialized: false, + $el: null as HTMLElement | null, + + init() { + if (!this.initialized) { + this.setupDrag(); + this.initialized = true; + } + }, + + async setupDrag() { + const container = this.$el; + if (!container) { + return; + } + + const { DragDropManager, KeyboardSensor, PointerSensor, Sortable } = await loadDndKit(); + if (!this.initialized) { + return; + } + + const manager = new DragDropManager({ + sensors: [PointerSensor, KeyboardSensor], + }); + + const items = Array.from( + container.querySelectorAll( + `.${QUESTION_ORDERING_CONSTANTS.CLASSES.QUESTION_OPTION}[${QUESTION_ORDERING_CONSTANTS.ATTRS.OPTION}="${QUESTION_ORDERING_CONSTANTS.VALUES.DRAGGABLE}"]`, + ), + ); + + this._sortables = []; + + items.forEach((element, idx) => { + const handle = element.querySelector(`[${QUESTION_ORDERING_CONSTANTS.ATTRS.GRAB_HANDLE}]`) as HTMLElement | null; + const id = element.dataset[QUESTION_ORDERING_CONSTANTS.DATASET.ID] ?? String(idx); + + const sortable = new Sortable( + { + id, + index: idx, + element: element, + handle: handle ?? undefined, + }, + manager, + ); + + this._sortables.push(sortable); + }); + + manager.monitor.addEventListener('dragstart', (event) => { + const operation = event.operation; + if (!operation.source) { + return; + } + + const sourceElement = operation.source.element; + if (!sourceElement) { + return; + } + + sourceElement.setAttribute(QUESTION_ORDERING_CONSTANTS.ATTRS.OPTION, QUESTION_ORDERING_CONSTANTS.VALUES.DRAGGING); + }); + + manager.monitor.addEventListener('dragend', (event) => { + const operation = event.operation; + if (!operation.source) { + return; + } + + const sourceElement = operation.source.element; + if (!sourceElement) { + return; + } + + sourceElement.setAttribute( + QUESTION_ORDERING_CONSTANTS.ATTRS.OPTION, + QUESTION_ORDERING_CONSTANTS.VALUES.DRAGGABLE, + ); + if (this.$el) { + this.$el.dataset.hasInteraction = '1'; + } + requestAnimationFrame(() => { + this._callbacks.onOrder?.(this.getOrder()); + }); + }); + }, + + getOrder(): string[] { + const container = this.$el; + if (!container) { + return []; + } + + const options = Array.from( + container.querySelectorAll(`.${QUESTION_ORDERING_CONSTANTS.CLASSES.QUESTION_OPTION}`), + ); + + return [ + ...new Set( + options + .map((option) => option.dataset[QUESTION_ORDERING_CONSTANTS.DATASET.ID]) + .filter((id): id is string => typeof id === 'string'), + ), + ]; + }, + + destroy() { + this._sortables.forEach((s: Sortable) => s.destroy()); + this._sortables = []; + + this.initialized = false; + }, +}); + +export const questionOrderingMeta: AlpineComponentMeta = { + name: 'questionOrdering', + component: questionOrdering, +}; diff --git a/assets/src/js/frontend/learning-area/quiz/radar.ts b/assets/src/js/frontend/learning-area/quiz/radar.ts new file mode 100644 index 0000000000..f5a88243f9 --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/radar.ts @@ -0,0 +1,245 @@ +import type { AlpineComponentMeta } from '@Core/ts/types'; + +import { QUIZ_EVENTS } from './constants'; + +const RADAR_DEFAULT_SECONDS = 5; +const RADAR_SELECTORS = { + BG_CANVAS: '[data-quiz-autostart-canvas="bg"]', + SWEEP_CANVAS: '[data-quiz-autostart-canvas="sweep"]', + DIGIT: '[data-quiz-autostart-digit]', +} as const; + +export interface QuizRadarConfig { + seconds: number; + eventName: string; +} + +const quizRadar = (config: QuizRadarConfig) => ({ + seconds: Number(config.seconds) || RADAR_DEFAULT_SECONDS, + eventName: config.eventName || QUIZ_EVENTS.AUTO_START_COMPLETE, + remaining: 0, + angle: -90, + lastTick: null as number | null, + animationFrame: null as number | null, + countdownTimer: null as number | null, + card: null as HTMLElement | null, + bgCanvas: null as HTMLCanvasElement | null, + sweepCanvas: null as HTMLCanvasElement | null, + resizeHandler: null as (() => void) | null, + $el: null as HTMLElement | null, + + init() { + this.remaining = this.seconds; + this.cacheElements(); + this.waitForLayout(); + }, + + destroy() { + if (this.animationFrame) { + window.cancelAnimationFrame(this.animationFrame); + this.animationFrame = null; + } + if (this.countdownTimer) { + window.clearInterval(this.countdownTimer); + this.countdownTimer = null; + } + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + this.resizeHandler = null; + } + }, + + cacheElements() { + this.card = this.$el as HTMLElement; + this.bgCanvas = this.card.querySelector(RADAR_SELECTORS.BG_CANVAS); + this.sweepCanvas = this.card.querySelector(RADAR_SELECTORS.SWEEP_CANVAS); + + if (!this.resizeHandler) { + this.resizeHandler = () => this.resize(); + window.addEventListener('resize', this.resizeHandler); + } + }, + + resize() { + if (!this.card || !this.bgCanvas || !this.sweepCanvas) { + return; + } + + const rect = this.card.getBoundingClientRect(); + const width = Math.max(0, Math.floor(rect.width)); + const height = Math.max(0, Math.floor(rect.height)); + this.bgCanvas.width = width; + this.bgCanvas.height = height; + this.sweepCanvas.width = width; + this.sweepCanvas.height = height; + this.drawBackground(); + }, + + waitForLayout(retries = 30) { + if (!this.card) { + return; + } + + const rect = this.card.getBoundingClientRect(); + if (rect.width > 0 && rect.height > 0) { + this.resize(); + this.startRadarAnimation(); + this.startCountdownTimer(); + return; + } + + if (retries <= 0) { + return; + } + + window.requestAnimationFrame(() => this.waitForLayout(retries - 1)); + }, + + drawBackground() { + if (!this.bgCanvas || !this.card) { + return; + } + + const ctx = this.bgCanvas.getContext('2d'); + if (!ctx) { + return; + } + + const width = this.card.clientWidth; + const height = this.card.clientHeight; + const centerX = width / 2; + const centerY = height / 2; + const radius = Math.sqrt(centerX * centerX + centerY * centerY); + const innerRadius = radius * 0.3; + const outerRadius = radius * 0.52; + + const isDark = document.documentElement.getAttribute('data-tutor-theme') === 'dark'; + + ctx.clearRect(0, 0, width, height); + ctx.beginPath(); + ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2); + ctx.fillStyle = isDark ? '#2c3342' : '#E7EDFC'; + ctx.fill(); + + ctx.beginPath(); + ctx.arc(centerX, centerY, outerRadius, 0, Math.PI * 2); + ctx.strokeStyle = isDark ? '#3F63DF' : '#E7EDFC'; + ctx.lineWidth = 1.5; + ctx.stroke(); + }, + + drawSweep() { + if (!this.sweepCanvas || !this.card) { + return; + } + + const ctx = this.sweepCanvas.getContext('2d'); + if (!ctx) { + return; + } + + const width = this.card.clientWidth; + const height = this.card.clientHeight; + const centerX = width / 2; + const centerY = height / 2; + const radius = Math.sqrt(centerX * centerX + centerY * centerY); + + // Fixed anchor: 12 o'clock + const START_DEG = -90; + const startRad = (START_DEG * Math.PI) / 180; + + // Moving end: goes from 0° → 360° (i.e. -90° clockwise back to -90°) over 1 s + const progress = this.angle / 360; // 0..1 + const sweepRad = startRad + progress * Math.PI * 2; + + const steps = 340; + const isDark = document.documentElement.getAttribute('data-tutor-theme') === 'dark'; + const colorStart = isDark ? [112, 133, 222] : [197, 208, 245]; + const colorEnd = isDark ? [44, 51, 66] : [241, 245, 254]; + + ctx.clearRect(0, 0, width, height); + + // Draw gradient fan from the fixed anchor to the moving arm + for (let i = steps; i >= 0; i--) { + const t = i / steps; // 1 = near moving arm, 0 = near anchor + const a = sweepRad - (sweepRad - startRad) * t; + const colorT = t < 0.3 ? 0 : (t - 0.3) / 0.7; + const rgb = [ + Math.round(colorStart[0] + (colorEnd[0] - colorStart[0]) * colorT), + Math.round(colorStart[1] + (colorEnd[1] - colorStart[1]) * colorT), + Math.round(colorStart[2] + (colorEnd[2] - colorStart[2]) * colorT), + ]; + const alpha = 0.3 + (1 - 0.3) * colorT; + + ctx.beginPath(); + ctx.moveTo(centerX, centerY); + ctx.arc(centerX, centerY, radius, a, a + 0.025); + ctx.closePath(); + ctx.fillStyle = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${(alpha * (1 - t * 0.5)).toFixed(3)})`; + ctx.fill(); + } + + // Draw moving arm + ctx.beginPath(); + ctx.moveTo(centerX, centerY); + ctx.lineTo(centerX + Math.cos(sweepRad) * radius, centerY + Math.sin(sweepRad) * radius); + ctx.strokeStyle = isDark ? 'rgba(63, 99, 223, 1)' : 'rgba(62,100,222,0.30)'; + ctx.lineWidth = 1.5; + ctx.stroke(); + }, + + startRadarAnimation() { + // this.angle tracks degrees elapsed within the current 1-second cycle (0..360) + this.angle = 0; + + const tick = (timestamp: number) => { + if (this.lastTick !== null) { + const dt = timestamp - this.lastTick; + // Complete one full revolution per second + this.angle += (360 / 1000) * dt; + + // Reset to beginning of next cycle (stays in sync with 1-s countdown) + if (this.angle >= 360) { + this.angle -= 360; + } + } + + this.drawSweep(); + this.lastTick = timestamp; + this.animationFrame = window.requestAnimationFrame(tick); + }; + + this.animationFrame = window.requestAnimationFrame(tick); + }, + + startCountdownTimer() { + const digit = this.card?.querySelector(RADAR_SELECTORS.DIGIT); + if (digit) { + digit.textContent = String(this.remaining); + } + + this.countdownTimer = window.setInterval(() => { + this.remaining = Math.max(0, this.remaining - 1); + if (digit) { + digit.textContent = String(this.remaining); + } + + if (this.remaining === 0) { + this.finishCountdown(); + } + }, 1000); + }, + + finishCountdown() { + if (this.countdownTimer) { + window.clearInterval(this.countdownTimer); + this.countdownTimer = null; + } + document.dispatchEvent(new CustomEvent(this.eventName)); + }, +}); + +export const quizRadarMeta: AlpineComponentMeta = { + name: 'radar', + component: quizRadar, +}; diff --git a/assets/src/js/frontend/learning-area/quiz/submission.ts b/assets/src/js/frontend/learning-area/quiz/submission.ts new file mode 100644 index 0000000000..4eed46465d --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/submission.ts @@ -0,0 +1,542 @@ +import { type MutationState } from '@Core/ts/services/Query'; +import type { AlpineComponentMeta } from '@Core/ts/types'; + +import { + ERROR_MESSAGES, + QuestionTimeoutAction, + QUIZ_ABANDON_CONFIG, + QUIZ_LAYOUT_SELECTORS, + QUIZ_REVEAL_CONFIG, +} from './constants'; +import { getAttemptedQuestionCountFromForm, revealQuestionWithAnswers } from './helpers'; + +export interface QuizSubmissionConfig { + formId: string; + attemptId: string; + quizId: number; + abandonModalId: string; + totalQuestions: number; + enableAnswerReveal?: boolean; + revealWaitMs?: number; + submittedModalId?: string; + timeoutModalId?: string; +} + +const quizSubmission = (config: QuizSubmissionConfig) => { + const { query, toast, form, modal, constants, endpoints } = window.TutorCore; + const { convertToErrorMessage } = window.TutorCore.error; + const { wpPostForm, wpPost } = window.TutorCore.api; + const { tutorConfig } = window.TutorCore.config; + const { TUTOR_CUSTOM_EVENTS } = constants; + + return { + formId: config.formId, + attemptId: config.attemptId, + quizId: config.quizId, + abandonModalId: config.abandonModalId, + totalQuestions: Number(config.totalQuestions) || 0, + enableAnswerReveal: config.enableAnswerReveal ?? false, + revealWaitMs: config.revealWaitMs ?? null, + submittedModalId: config.submittedModalId ?? '', + timeoutModalId: config.timeoutModalId ?? '', + + submitQuizMutation: null as MutationState> | null, + abandonQuizMutation: null as MutationState> | null, + timeoutQuizMutation: null as MutationState> | null, + + hasTimedOut: false, + isRevealSubmitting: false, + beforeUnloadTriggered: false, + isAbandoningNavigation: false, + skipBeforeUnload: false, + pendingNavigationAction: '' as 'reload' | 'navigate' | '', + pendingNavigationUrl: '', + pendingTimeoutSubmission: false, + resultModalOpenId: '', + modalCloseHandler: null as ((event: Event) => void) | null, + + beforeUnloadHandler: null as ((event: BeforeUnloadEvent) => string | void) | null, + navigationHandler: null as ((event: MouseEvent) => void) | null, + + $el: null as HTMLFormElement | null, + $root: null as HTMLElement | null, + + init() { + this.handleQuizSubmit = this.handleQuizSubmit.bind(this); + this.handleQuizError = this.handleQuizError.bind(this); + this.handleQuizTimeout = this.handleQuizTimeout.bind(this); + + document.addEventListener(TUTOR_CUSTOM_EVENTS.QUIZ_TIME_EXPIRED, ((event: Event) => { + const detail = (event as CustomEvent)?.detail ?? {}; + if (detail?.formId && detail.formId !== this.formId) { + return; + } + this.handleQuizTimeout(detail); + }) as EventListener); + + document.addEventListener(TUTOR_CUSTOM_EVENTS.QUIZ_ABANDON_REQUESTED, ((event: Event) => { + const detail = (event as CustomEvent)?.detail ?? {}; + if (detail?.formId && detail.formId !== this.formId) { + return; + } + this.handleAbandonQuiz(); + }) as EventListener); + + this.beforeUnloadHandler = this.handleBeforeUnload.bind(this); + this.navigationHandler = this.handleNavigationAttempt.bind(this); + this.modalCloseHandler = this.handleModalClose.bind(this); + + window.addEventListener('beforeunload', this.beforeUnloadHandler); + document.addEventListener(QUIZ_ABANDON_CONFIG.NAVIGATION_EVENT, this.navigationHandler, true); + document.addEventListener(TUTOR_CUSTOM_EVENTS.MODAL_CLOSED, this.modalCloseHandler); + + this.submitQuizMutation = query.useMutation(this.submitQuizAttempt, { + onSuccess: () => { + const isTimeout = this.pendingTimeoutSubmission; + this.pendingTimeoutSubmission = false; + this.handleSubmissionSuccess(isTimeout); + }, + onError: (error: Error) => { + this.pendingTimeoutSubmission = false; + toast.error(convertToErrorMessage(error)); + }, + }); + + this.abandonQuizMutation = query.useMutation(this.abandonQuizAttempt, { + onSuccess: () => { + this.isAbandoningNavigation = false; + if (this.pendingNavigationAction === 'navigate' && this.pendingNavigationUrl) { + const nextUrl = this.pendingNavigationUrl; + this.pendingNavigationAction = ''; + this.pendingNavigationUrl = ''; + this.performSafeNavigate(nextUrl); + return; + } + this.pendingNavigationAction = ''; + this.pendingNavigationUrl = ''; + this.performSafeReload(); + }, + onError: (error: Error) => { + this.isAbandoningNavigation = false; + this.skipBeforeUnload = false; + toast.error(convertToErrorMessage(error)); + }, + }); + + this.timeoutQuizMutation = query.useMutation(this.timeoutQuizAttempt, { + onSuccess: () => { + this.handleTimeoutSuccess(); + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + handleQuizSubmit(data: Record) { + if (this.isRevealSubmitting) { + return; + } + + if (this.isRevealMode()) { + const revealWait = this.getRevealWaitTime(); + const shouldDelay = this.revealOnSubmit(); + if (shouldDelay) { + this.isRevealSubmitting = true; + const payload = this.buildSubmitPayload(data); + window.setTimeout(() => { + this.submitQuizMutation?.mutate(payload); + this.isRevealSubmitting = false; + }, revealWait); + return; + } + } + + const payload = this.buildSubmitPayload(data); + this.submitQuizMutation?.mutate(payload); + }, + + getRevealWaitTime(): number { + const feedbackWaitMs = Number(this.revealWaitMs ?? ''); + if (!Number.isNaN(feedbackWaitMs) && feedbackWaitMs > 0) { + return feedbackWaitMs; + } + const configValue = Number(tutorConfig.quiz_answer_display_time ?? ''); + if (!Number.isNaN(configValue) && configValue > 0) { + return configValue; + } + return QUIZ_REVEAL_CONFIG.DEFAULT_WAIT_MS; + }, + + isRevealMode(): boolean { + return this.enableAnswerReveal; + }, + + getRevealAnswerIds(): number[] { + const script = document.getElementById(QUIZ_REVEAL_CONFIG.ANSWER_CONTEXT_ID); + if (!script?.textContent) { + return []; + } + + try { + const encoded = script.textContent.trim(); + const decoded = encoded + .match(/.{1,2}/g) + ?.map((byte) => String.fromCharCode(parseInt(byte, 16))) + .join(''); + if (!decoded) { + return []; + } + const parsed = JSON.parse(decoded); + if (!Array.isArray(parsed)) { + return []; + } + return parsed.map((value) => Number(value)).filter((value) => !Number.isNaN(value)); + } catch { + return []; + } + }, + + revealQuestion(wrapper: HTMLElement, revealAnswerIds: number[]) { + revealQuestionWithAnswers(wrapper, revealAnswerIds); + }, + + revealOnSubmit(): boolean { + const revealAnswerIds = this.getRevealAnswerIds(); + if (!revealAnswerIds.length) { + return false; + } + + const root = this.$root ?? this.$el; + if (!root) { + return false; + } + + const wrappers = Array.from(root.querySelectorAll(QUIZ_LAYOUT_SELECTORS.QUESTION_WRAPPER)); + let revealedAny = false; + + wrappers.forEach((wrapper) => { + const question = wrapper.querySelector(QUIZ_REVEAL_CONFIG.QUESTION_SELECTOR) as HTMLElement | null; + if (!question) { + return; + } + const questionType = question.dataset?.question ?? ''; + if (!(QUIZ_REVEAL_CONFIG.SUPPORTED_TYPES as readonly string[]).includes(questionType)) { + return; + } + this.revealQuestion(wrapper, revealAnswerIds); + revealedAny = true; + }); + + return revealedAny; + }, + + handleQuizError() { + toast.error(ERROR_MESSAGES.REQUIRED_QUESTIONS); + }, + + handleAbandonQuiz() { + if (!this.formId || !form.hasForm(this.formId)) { + return; + } + + const data = form.getFormState?.(this.formId)?.values ?? {}; + const payload = this.buildSubmitPayload(data); + this.abandonQuizMutation?.mutate(payload); + }, + + handleAbandonConfirm() { + this.isAbandoningNavigation = true; + this.prepareForNavigation(); + if (!this.pendingNavigationAction) { + this.pendingNavigationAction = 'reload'; + } + this.handleAbandonQuiz(); + }, + + handleAbandonCancel() { + this.pendingNavigationAction = ''; + this.pendingNavigationUrl = ''; + this.isAbandoningNavigation = false; + this.skipBeforeUnload = false; + this.beforeUnloadTriggered = false; + }, + + handleNavigationAttempt(event: MouseEvent) { + const target = event.target as HTMLElement | null; + if (!target) { + return; + } + + const link = target.closest('a'); + if (!link) { + return; + } + + if (link.hasAttribute('download')) { + return; + } + + const href = link.getAttribute('href') || ''; + if (!href || QUIZ_ABANDON_CONFIG.IGNORE_ANCHOR_PREFIXES.some((prefix) => href.startsWith(prefix))) { + return; + } + + const targetAttr = (link.getAttribute('target') || '').toLowerCase(); + if (targetAttr && targetAttr !== '_self') { + return; + } + + if (!this.shouldWarnOnUnload()) { + return; + } + + event.preventDefault(); + this.pendingNavigationAction = 'navigate'; + this.pendingNavigationUrl = link.href; + modal?.showModal?.(this.abandonModalId); + }, + + handleBeforeUnload(event: BeforeUnloadEvent) { + if (!this.shouldWarnOnUnload()) { + this.beforeUnloadTriggered = false; + return; + } + this.beforeUnloadTriggered = true; + event.preventDefault(); + event.returnValue = ''; + return ''; + }, + + shouldWarnOnUnload(): boolean { + if (!this.formId || !form?.hasForm?.(this.formId)) { + return false; + } + if (this.skipBeforeUnload) { + return false; + } + if (this.isAbandoningNavigation) { + return false; + } + if (this.hasTimedOut || this.isRevealSubmitting) { + return false; + } + if (this.submitQuizMutation?.isPending || this.abandonQuizMutation?.isPending) { + return false; + } + return true; + }, + + prepareForNavigation() { + this.skipBeforeUnload = true; + this.beforeUnloadTriggered = false; + if (this.beforeUnloadHandler) { + window.removeEventListener('beforeunload', this.beforeUnloadHandler); + } + if (this.navigationHandler) { + document.removeEventListener(QUIZ_ABANDON_CONFIG.NAVIGATION_EVENT, this.navigationHandler, true); + } + }, + + performSafeReload() { + this.prepareForNavigation(); + window.location.reload(); + }, + + performSafeNavigate(url: string) { + this.prepareForNavigation(); + window.location.assign(url); + }, + + getAttemptedCount(): number { + return getAttemptedQuestionCountFromForm(this.formId); + }, + + openResultModal(modalId: string, payload?: { attempted?: number; total?: number }) { + if (!modalId) { + this.performSafeReload(); + return; + } + this.prepareForNavigation(); + this.resultModalOpenId = modalId; + modal?.showModal?.(modalId, payload ?? null); + }, + + notifyAttemptCompleted() { + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.QUIZ_ATTEMPT_COMPLETED, { + detail: { + formId: this.formId, + attemptId: this.attemptId, + quizId: this.quizId, + }, + }), + ); + }, + + handleSubmissionSuccess(isTimeout: boolean) { + this.notifyAttemptCompleted(); + + if (isTimeout) { + this.openResultModal(this.timeoutModalId, { + attempted: this.getAttemptedCount(), + total: this.totalQuestions, + }); + return; + } + + this.openResultModal(this.submittedModalId); + }, + + handleTimeoutSuccess() { + this.notifyAttemptCompleted(); + this.openResultModal(this.timeoutModalId, { + attempted: this.getAttemptedCount(), + total: this.totalQuestions, + }); + }, + + handleModalClose(event: Event) { + const detail = (event as CustomEvent)?.detail ?? {}; + const targetId = detail?.id as string | undefined; + if (!this.resultModalOpenId) { + return; + } + if (targetId && targetId !== this.resultModalOpenId) { + return; + } + const shouldReload = + this.resultModalOpenId === this.submittedModalId || this.resultModalOpenId === this.timeoutModalId; + this.resultModalOpenId = ''; + if (shouldReload) { + this.performSafeReload(); + } + }, + + handleQuizTimeoutAbandon() { + if (!this.quizId) { + return; + } + + this.timeoutQuizMutation?.mutate({ quiz_id: this.quizId }); + }, + + handleQuizTimeout(detail: { + action?: (typeof QuestionTimeoutAction)[keyof typeof QuestionTimeoutAction]; + formId?: string; + }) { + const action = detail?.action; + if (!action || !this.formId || !form.hasForm(this.formId)) { + return; + } + + if (this.hasTimedOut) { + return; + } + + if ( + this.submitQuizMutation?.isPending || + this.abandonQuizMutation?.isPending || + this.timeoutQuizMutation?.isPending + ) { + return; + } + + const data = form.getFormState?.(this.formId)?.values ?? {}; + + if (action === QuestionTimeoutAction.AUTO_SUBMIT) { + this.hasTimedOut = true; + this.pendingTimeoutSubmission = true; + this.handleQuizSubmit(data); + return; + } + + if (action === QuestionTimeoutAction.AUTO_ABANDON) { + this.hasTimedOut = true; + this.handleQuizTimeoutAbandon(); + } + }, + + buildSubmitPayload(data: Record): Record { + const payload = this.normalizePayload(data); + payload.attempt_id = this.attemptId; + + return payload; + }, + + normalizePayload(values: Record): Record { + const counts = new Map(); + + return Object.entries(values).reduce>((acc, [key, value]) => { + const baseKey = key.replace(/\[\].*$/, ''); + const prevCount = counts.get(baseKey) ?? 0; + const nextCount = prevCount + 1; + counts.set(baseKey, nextCount); + + const appendValue = (target: unknown[], incoming: unknown) => { + if (Array.isArray(incoming)) { + incoming.forEach((item) => target.push(item)); + return; + } + target.push(incoming); + }; + + if (nextCount === 1) { + acc[baseKey] = value; + return acc; + } + + const existing = acc[baseKey]; + const nextValues: unknown[] = []; + + if (nextCount === 2) { + appendValue(nextValues, existing); + } else if (Array.isArray(existing)) { + existing.forEach((item) => nextValues.push(item)); + } + + appendValue(nextValues, value); + acc[baseKey] = nextValues; + + return acc; + }, {}); + }, + + submitQuizAttempt(payload: object) { + return wpPostForm(window.location.href, { + tutor_action: endpoints.QUIZ_ATTEMPT_SUBMIT, + ...payload, + }); + }, + + abandonQuizAttempt(payload: Record) { + return wpPost(endpoints.QUIZ_ABANDON, { + tutor_action: endpoints.QUIZ_ATTEMPT_SUBMIT, + ...payload, + }); + }, + + timeoutQuizAttempt(payload: Record) { + return wpPost(endpoints.QUIZ_TIMEOUT, { + ...payload, + }); + }, + + destroy() { + if (this.beforeUnloadHandler) { + window.removeEventListener('beforeunload', this.beforeUnloadHandler); + } + if (this.navigationHandler) { + document.removeEventListener(QUIZ_ABANDON_CONFIG.NAVIGATION_EVENT, this.navigationHandler, true); + } + if (this.modalCloseHandler) { + document.removeEventListener(TUTOR_CUSTOM_EVENTS.MODAL_CLOSED, this.modalCloseHandler); + } + }, + }; +}; + +export const quizSubmissionMeta: AlpineComponentMeta = { + name: 'quizSubmission', + component: quizSubmission, +}; diff --git a/assets/src/js/frontend/learning-area/quiz/timer.ts b/assets/src/js/frontend/learning-area/quiz/timer.ts new file mode 100644 index 0000000000..b41f1a3a7f --- /dev/null +++ b/assets/src/js/frontend/learning-area/quiz/timer.ts @@ -0,0 +1,267 @@ +import { TUTOR_CUSTOM_EVENTS } from '@Core/ts/constant'; + +import { getAttemptedQuestionCountFromForm } from './helpers'; + +const QUIZ_TIMER_CLASSES = { + PROGRESS_ANIMATE: 'tutor-quiz-progress-animate', +} as const; + +type QuizExpireAction = 'auto_submit' | 'auto_abandon' | 'autosubmit'; +type TimerState = 'initial' | 'warning' | 'critical'; +type TimerFormat = 'compact' | 'hours' | 'days'; +type TimerDisplayToken = { + key: string; + type: 'digit' | 'separator' | 'suffix' | 'spacer'; + value: string; +}; + +interface QuizTimerConfig { + duration: number; + hasLimit?: boolean; + expiresAction?: QuizExpireAction; + formId?: string; + totalQuestions?: number; +} + +/** + * Quiz Timer Component + * Manages countdown timer for quiz attempts + */ +const quizTimer = (config: QuizTimerConfig) => { + const total = Math.max(0, config.duration); + const hasLimit = typeof config.hasLimit === 'boolean' ? config.hasLimit : total > 0; + const expiresAction = config.expiresAction ?? 'auto_submit'; + + return { + total, + remaining: total, + hasLimit, + expired: false, + isReady: false, + expiresAction, + formId: config.formId ?? '', + timer: null as number | null, + shakeTimer: null as number | null, + shaking: false, + totalQuestions: Number(config.totalQuestions) || 0, + $el: null as HTMLElement | null, + + init() { + if (!this.hasLimit) { + this.isReady = true; + return; + } + + document.addEventListener(TUTOR_CUSTOM_EVENTS.QUIZ_ATTEMPT_COMPLETED, ((event: Event) => { + const detail = (event as CustomEvent)?.detail ?? {}; + if (detail?.formId && detail.formId !== this.formId) { + return; + } + + this.stop(); + }) as EventListener); + + if (this.remaining <= 0) { + this.isReady = true; + this.handleExpire(); + return; + } + + this.isReady = true; + this.start(); + }, + + start() { + this.stop(); + + this.timer = window.setInterval(() => { + if (this.remaining > 0) { + this.remaining--; + } else { + this.handleExpire(); + } + }, 1000); + + this.startShakeInterval(); + this.$el?.classList.add(QUIZ_TIMER_CLASSES.PROGRESS_ANIMATE); + }, + + stop() { + if (this.timer) { + clearInterval(this.timer); + this.timer = null; + this.$el?.classList.remove(QUIZ_TIMER_CLASSES.PROGRESS_ANIMATE); + } + this.stopShakeInterval(); + }, + + startShakeInterval() { + this.stopShakeInterval(); + this.shakeTimer = window.setInterval(() => { + if (this.timerState === 'critical') { + this.shaking = true; + window.setTimeout(() => { + this.shaking = false; + }, 500); + } + }, 2000); + }, + + stopShakeInterval() { + if (this.shakeTimer) { + clearInterval(this.shakeTimer); + this.shakeTimer = null; + } + this.shaking = false; + }, + + normalizeExpireAction(action: QuizExpireAction) { + if (action === 'autosubmit') { + return 'auto_submit'; + } + return action; + }, + + dispatchQuizEvent(action: QuizExpireAction) { + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.QUIZ_TIME_EXPIRED, { + detail: { + action: this.normalizeExpireAction(action), + formId: this.formId, + }, + }), + ); + }, + + requestAbandon() { + document.dispatchEvent( + new CustomEvent(TUTOR_CUSTOM_EVENTS.QUIZ_ABANDON_REQUESTED, { + detail: { + formId: this.formId, + }, + }), + ); + }, + + handleExpire() { + if (this.expired) { + return; + } + + this.expired = true; + this.remaining = 0; + this.stop(); + + this.dispatchQuizEvent(this.expiresAction); + }, + + get minutes() { + if (this.days > 0 || this.hours > 0) { + return Math.floor((this.remaining % 3600) / 60); + } + + return Math.floor(this.remaining / 60); + }, + + get hours() { + if (this.days > 0) { + return Math.floor((this.remaining % 86400) / 3600); + } + + return Math.floor(this.remaining / 3600); + }, + + get days() { + return Math.floor(this.remaining / 86400); + }, + + get seconds() { + return this.remaining % 60; + }, + + get timerFormat(): TimerFormat { + if (this.days > 0) { + return 'days'; + } + + if (this.hours > 0) { + return 'hours'; + } + + return 'compact'; + }, + + get displayTokens(): TimerDisplayToken[] { + const tokens: TimerDisplayToken[] = []; + const pushDigits = (prefix: string, value: string) => { + value.split('').forEach((char, index) => { + tokens.push({ + key: `${prefix}-${index}`, + type: 'digit', + value: char, + }); + }); + }; + + if (this.timerFormat === 'days') { + pushDigits('days', String(this.days)); + tokens.push({ key: 'days-suffix', type: 'suffix', value: 'd' }); + tokens.push({ key: 'days-spacer', type: 'spacer', value: ' ' }); + } + + if (this.timerFormat === 'days' || this.timerFormat === 'hours') { + pushDigits('hours', String(this.hours).padStart(2, '0')); + tokens.push({ key: 'hours-separator', type: 'separator', value: ':' }); + } + + pushDigits('minutes', String(this.minutes).padStart(2, '0')); + tokens.push({ key: 'minutes-separator', type: 'separator', value: ':' }); + pushDigits('seconds', String(this.seconds).padStart(2, '0')); + + return tokens; + }, + + get progress() { + if (!this.total) { + return 0; + } + + return ((this.total - this.remaining) / this.total) * 100; + }, + + get timerState(): TimerState { + if (!this.total || !this.hasLimit) { + return 'initial'; + } + + const remainingPercent = (this.remaining / this.total) * 100; + + if (remainingPercent <= 25) { + return 'critical'; + } + + if (remainingPercent <= 50) { + return 'warning'; + } + + return 'initial'; + }, + + get attemptedCount(): number { + return getAttemptedQuestionCountFromForm(this.formId); + }, + + get attemptedProgress(): number { + if (!this.totalQuestions) { + return 0; + } + + return (this.attemptedCount / this.totalQuestions) * 100; + }, + }; +}; + +export const quizTimerMeta = { + name: 'quizTimer', + component: quizTimer, +}; diff --git a/assets/src/js/frontend/learning-area/sidebar.ts b/assets/src/js/frontend/learning-area/sidebar.ts new file mode 100644 index 0000000000..9b64cf7088 --- /dev/null +++ b/assets/src/js/frontend/learning-area/sidebar.ts @@ -0,0 +1,119 @@ +/** + * Learning Area Sidebar logic + * + * @since 4.0.0 + */ + +import { type MutationState } from '@Core/ts/services/Query'; + +interface ResetProgressPayload { + course_id: number; + context: string; +} + +interface ResetProgressResponse { + success: boolean; + status_code?: number; + message?: string; + data?: { + redirect_to: string; + }; +} + +export const sidebarComponent = ({ courseId, resetModalId }: { courseId: number; resetModalId: string }) => { + const { query, modal, toast } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + const { endpoints } = window.TutorCore; + + return { + pagesHeight: 0, + resizing: false, + sidebarOpen: false, + courseId: courseId, + resetModalId: resetModalId, + resetProgressMutation: null as MutationState | null, + $refs: {} as Record, + $nextTick: {} as (callback: () => void) => void, + + init() { + this.$nextTick(() => { + if (this.$refs.pagesList) { + this.pagesHeight = this.$refs.pagesList.scrollHeight; + } + }); + + this.resetProgressMutation = query.useMutation((payload) => wpPost(endpoints.RESET_COURSE_PROGRESS, payload), { + onSuccess: (response) => { + if (response.status_code === 200 && response.data?.redirect_to) { + modal.closeModal(this.resetModalId); + window.location.href = response.data.redirect_to; + } + }, + onError: (error) => { + toast.error(convertToErrorMessage(error)); + if (error.message?.includes('HTTP')) { + window.location.reload(); + } + }, + }); + }, + + toggleSidebar() { + this.sidebarOpen = !this.sidebarOpen; + }, + + closeSidebar() { + this.sidebarOpen = false; + }, + + startResizing(e: MouseEvent) { + this.resizing = true; + const startY = e.clientY; + const currentHeight = this.$refs.pagesList?.offsetHeight || 0; + + const onMouseMove = (moveEvent: MouseEvent) => { + const delta = startY - moveEvent.clientY; + // Constraint height between 36px and 400px. + this.pagesHeight = Math.max(36, Math.min(400, currentHeight + delta)); + }; + + const onMouseUp = () => { + this.resizing = false; + window.removeEventListener('mousemove', onMouseMove); + window.removeEventListener('mouseup', onMouseUp); + }; + + window.addEventListener('mousemove', onMouseMove); + window.addEventListener('mouseup', onMouseUp); + }, + + togglePagesHeight() { + if (this.pagesHeight > 36) { + this.pagesHeight = 36; + } else if (this.$refs.pagesList) { + this.pagesHeight = this.$refs.pagesList.scrollHeight; + } + }, + + confirmReset() { + modal.showModal(this.resetModalId); + }, + + resetProgress() { + this.resetProgressMutation?.mutate({ course_id: this.courseId, context: 'learning-area-sidebar' }); + }, + }; +}; + +export const initializeSidebar = () => { + if (window.TutorComponentRegistry) { + window.TutorComponentRegistry.register({ + type: 'component', + meta: { + name: 'learningSidebar', + component: sidebarComponent, + }, + }); + } +}; diff --git a/assets/src/js/frontend/services/api.ts b/assets/src/js/frontend/services/api.ts new file mode 100644 index 0000000000..36f87a01d4 --- /dev/null +++ b/assets/src/js/frontend/services/api.ts @@ -0,0 +1,7 @@ +// Shared API Service +// TODO: Implement common API functionality + +export const API = { + // TODO: Add shared API methods + // Example: HTTP client, authentication, error handling +}; diff --git a/assets/src/js/frontend/services/common.ts b/assets/src/js/frontend/services/common.ts new file mode 100644 index 0000000000..4a59f9a336 --- /dev/null +++ b/assets/src/js/frontend/services/common.ts @@ -0,0 +1,57 @@ +import { type MutationState } from '@Core/ts/services/Query'; +import { type AjaxResponse } from '@Core/ts/types'; + +const createCourseHandler = () => { + const { query, toast, endpoints } = window.TutorCore; + const { wpPost } = window.TutorCore.api; + const { convertToErrorMessage } = window.TutorCore.error; + + return { + createCourseMutation: null as MutationState, unknown> | null, + + init() { + if (this.createCourseMutation) { + return; + } + + this.createCourseMutation = query.useMutation(this.createCourseRequest, { + onSuccess: (res) => { + window.location.href = res.data ?? ''; + }, + onError: (error: Error) => { + toast.error(convertToErrorMessage(error)); + }, + }); + }, + + async createCourseRequest() { + return wpPost>(endpoints.CREATE_DRAFT_COURSE, { + from_dashboard: true, + }); + }, + + async handleCreateCourse() { + await this.createCourseMutation?.mutate({}); + }, + }; +}; + +export const initializeCommon = () => { + const handler = createCourseHandler(); + handler.init(); + + const createCourseButton = document.querySelector('.tutor-create-new-course'); + createCourseButton?.addEventListener('click', async (e) => { + e.preventDefault(); + createCourseButton.classList.add('tutor-loading'); + createCourseButton.setAttribute('disabled', 'true'); + const target = e.target as HTMLElement; + target.innerHTML = 'Creating...'; + try { + await handler.handleCreateCourse(); + } finally { + createCourseButton.classList.remove('tutor-loading'); + createCourseButton.removeAttribute('disabled'); + } + }); +}; diff --git a/assets/src/js/frontend/services/utils.ts b/assets/src/js/frontend/services/utils.ts new file mode 100644 index 0000000000..245fe8431e --- /dev/null +++ b/assets/src/js/frontend/services/utils.ts @@ -0,0 +1,7 @@ +// Shared Utility Functions +// TODO: Implement common utility functions + +export const Utils = { + // TODO: Add utility functions + // Example: date formatting, validation, storage helpers +}; diff --git a/assets/src/js/frontend/types/index.ts b/assets/src/js/frontend/types/index.ts new file mode 100644 index 0000000000..eeff0a0146 --- /dev/null +++ b/assets/src/js/frontend/types/index.ts @@ -0,0 +1,18 @@ +type PlyrYouTubeInstance = Plyr & { + embed: { + seekTo(time: number): void; + }; +}; + +type PlyrVimeoInstance = Plyr & { + mute?: () => void; + unmute?: () => void; +}; + +export function isYouTubePlyr(instance: Plyr): instance is PlyrYouTubeInstance { + return instance.provider === 'youtube'; +} + +export function isVimeoPlyr(instance: Plyr): instance is PlyrVimeoInstance { + return instance.provider === 'vimeo'; +} diff --git a/assets/react/gutenberg/custom-button.js b/assets/src/js/gutenberg/custom-button.js similarity index 100% rename from assets/react/gutenberg/custom-button.js rename to assets/src/js/gutenberg/custom-button.js diff --git a/assets/react/gutenberg/index.js b/assets/src/js/gutenberg/index.js similarity index 100% rename from assets/react/gutenberg/index.js rename to assets/src/js/gutenberg/index.js diff --git a/assets/react/helper/ajax-handler.js b/assets/src/js/helper/ajax-handler.js similarity index 100% rename from assets/react/helper/ajax-handler.js rename to assets/src/js/helper/ajax-handler.js diff --git a/assets/react/helper/response.js b/assets/src/js/helper/response.js similarity index 100% rename from assets/react/helper/response.js rename to assets/src/js/helper/response.js diff --git a/assets/react/helper/tutor-formdata.js b/assets/src/js/helper/tutor-formdata.js similarity index 100% rename from assets/react/helper/tutor-formdata.js rename to assets/src/js/helper/tutor-formdata.js diff --git a/assets/react/helper/utils.js b/assets/src/js/helper/utils.js similarity index 100% rename from assets/react/helper/utils.js rename to assets/src/js/helper/utils.js diff --git a/assets/react/lib/codesample-lang.js b/assets/src/js/lib/codesample-lang.js similarity index 100% rename from assets/react/lib/codesample-lang.js rename to assets/src/js/lib/codesample-lang.js diff --git a/assets/react/lib/common.js b/assets/src/js/lib/common.js similarity index 100% rename from assets/react/lib/common.js rename to assets/src/js/lib/common.js diff --git a/assets/react/lib/media-chooser.js b/assets/src/js/lib/media-chooser.js similarity index 100% rename from assets/react/lib/media-chooser.js rename to assets/src/js/lib/media-chooser.js diff --git a/assets/react/lib/modules/announcement.js b/assets/src/js/lib/modules/announcement.js similarity index 100% rename from assets/react/lib/modules/announcement.js rename to assets/src/js/lib/modules/announcement.js diff --git a/assets/react/lib/modules/instructor-review.js b/assets/src/js/lib/modules/instructor-review.js similarity index 100% rename from assets/react/lib/modules/instructor-review.js rename to assets/src/js/lib/modules/instructor-review.js diff --git a/assets/react/lib/modules/quiz.js b/assets/src/js/lib/modules/quiz.js similarity index 94% rename from assets/react/lib/modules/quiz.js rename to assets/src/js/lib/modules/quiz.js index 6722e62dd4..e950ce1278 100644 --- a/assets/react/lib/modules/quiz.js +++ b/assets/src/js/lib/modules/quiz.js @@ -13,6 +13,7 @@ window.jQuery(document).ready(($) => { var $that = $(this); var attempt_id = $that.attr('data-attempt-id'); var attempt_answer_id = $that.attr('data-attempt-answer-id'); + var question_id = $that.attr('data-question-id'); var mark_as = $that.attr('data-mark-as'); var context = $that.attr('data-context'); var back_url = $that.attr('data-back-url'); @@ -23,6 +24,7 @@ window.jQuery(document).ready(($) => { data: { attempt_id, attempt_answer_id, + question_id, mark_as, context, back_url, diff --git a/assets/react/lib/sorting.js b/assets/src/js/lib/sorting.js similarity index 100% rename from assets/react/lib/sorting.js rename to assets/src/js/lib/sorting.js diff --git a/assets/react/lib/tinymce.js b/assets/src/js/lib/tinymce.js similarity index 100% rename from assets/react/lib/tinymce.js rename to assets/src/js/lib/tinymce.js diff --git a/assets/react/lib/tutor.js b/assets/src/js/lib/tutor.js similarity index 99% rename from assets/react/lib/tutor.js rename to assets/src/js/lib/tutor.js index de0546da10..4b22455ea0 100644 --- a/assets/react/lib/tutor.js +++ b/assets/src/js/lib/tutor.js @@ -1,4 +1,4 @@ -import '../../../v2-library/src/js/main'; +import '../../../../v2-library/src/js/main'; import ajaxHandler from '../helper/ajax-handler'; import tutorFormData from "../helper/tutor-formdata"; @@ -26,7 +26,7 @@ window.tutor_popup = function($, icon) { html += '
    '; html += '
    '; html += '
    '; - html += ''; + html += ''; html += '
    '; html += '
    '; diff --git a/assets/react/lib/utilities.js b/assets/src/js/lib/utilities.js similarity index 98% rename from assets/react/lib/utilities.js rename to assets/src/js/lib/utilities.js index 8c600e5e0e..97a022477b 100644 --- a/assets/react/lib/utilities.js +++ b/assets/src/js/lib/utilities.js @@ -51,7 +51,7 @@ window.jQuery(document).ready(function($) { .addClass('is-loading'); }, success: function(data) { - if (data.success) { + if (data.success || data.status_code === 200) { if (del) { $('#' + del).fadeOut(function() { $(this).remove(); diff --git a/assets/react/v2/common.js b/assets/src/js/v2/common.js similarity index 100% rename from assets/react/v2/common.js rename to assets/src/js/v2/common.js diff --git a/assets/react/v2/pagination.js b/assets/src/js/v2/pagination.js similarity index 98% rename from assets/react/v2/pagination.js rename to assets/src/js/v2/pagination.js index 33adf435f4..ddf3b3a004 100644 --- a/assets/react/v2/pagination.js +++ b/assets/src/js/v2/pagination.js @@ -56,7 +56,7 @@ window.jQuery(document).ready($=>{ link_el.addClass('is-loading'); } else { // Otherwise replace the content container with loading icon - content_container.html(''); + content_container.html(''); } // move to top diff --git a/assets/react/v2/qna.js b/assets/src/js/v2/qna.js similarity index 96% rename from assets/react/v2/qna.js rename to assets/src/js/v2/qna.js index d8ad8b97d7..03d8703dc9 100644 --- a/assets/react/v2/qna.js +++ b/assets/src/js/v2/qna.js @@ -202,6 +202,16 @@ window.jQuery(document).ready($=>{ } } }, + error: (xhr) => { + let message = __('Something went wrong.', 'tutor'); + + try { + const resp = JSON.parse(xhr.responseText); + message = resp.message || message; + } catch (e) {} + + tutor_toast(__('Error!', 'tutor'), message, 'error'); + }, complete: () =>{ button.removeClass('is-loading'); } diff --git a/assets/react/v2/quiz-attempt.js b/assets/src/js/v2/quiz-attempt.js similarity index 100% rename from assets/react/v2/quiz-attempt.js rename to assets/src/js/v2/quiz-attempt.js diff --git a/assets/react/v2/table-status.js b/assets/src/js/v2/table-status.js similarity index 100% rename from assets/react/v2/table-status.js rename to assets/src/js/v2/table-status.js diff --git a/assets/react/v2/tutor-date-picker.js b/assets/src/js/v2/tutor-date-picker.js similarity index 83% rename from assets/react/v2/tutor-date-picker.js rename to assets/src/js/v2/tutor-date-picker.js index 74d1788467..3fac5259ea 100644 --- a/assets/react/v2/tutor-date-picker.js +++ b/assets/src/js/v2/tutor-date-picker.js @@ -1,5 +1,5 @@ import { createRoot } from 'react-dom/client'; -import TutorDatepicker from '../../../v2-library/src/components/datapicker/TutorDatepicker'; +import TutorDatepicker from '../../../../v2-library/src/components/datapicker/TutorDatepicker'; function DatePicker() { const wrappers = document.querySelectorAll('.tutor-v2-date-picker'); diff --git a/assets/react/v2/tutor-date-range-picker.js b/assets/src/js/v2/tutor-date-range-picker.js similarity index 80% rename from assets/react/v2/tutor-date-range-picker.js rename to assets/src/js/v2/tutor-date-range-picker.js index 3a92404c6f..8d34f6fe5d 100644 --- a/assets/react/v2/tutor-date-range-picker.js +++ b/assets/src/js/v2/tutor-date-range-picker.js @@ -1,5 +1,5 @@ import { createRoot } from 'react-dom/client'; -import TutorDateRangePicker from '../../../v2-library/src/components/datapicker/TutorDateRangePicker'; +import TutorDateRangePicker from '../../../../v2-library/src/components/datapicker/TutorDateRangePicker'; function DateRangePicker() { const wrappers = document.querySelectorAll('.tutor-v2-date-range-picker'); diff --git a/assets/react/v2/tutor-date-time-picker.js b/assets/src/js/v2/tutor-date-time-picker.js similarity index 82% rename from assets/react/v2/tutor-date-time-picker.js rename to assets/src/js/v2/tutor-date-time-picker.js index 7afaf2b921..734cff5284 100644 --- a/assets/react/v2/tutor-date-time-picker.js +++ b/assets/src/js/v2/tutor-date-time-picker.js @@ -1,5 +1,5 @@ import { createRoot } from 'react-dom/client'; -import TutorDateTimePicker from '../../../v2-library/src/components/datapicker/TutorDateTimePicker'; +import TutorDateTimePicker from '../../../../v2-library/src/components/datapicker/TutorDateTimePicker'; function DateTimePicker() { const wrappers = document.querySelectorAll('.tutor-v2-date-time-picker'); diff --git a/assets/react/v3/@types/index.d.ts b/assets/src/js/v3/@types/index.d.ts similarity index 85% rename from assets/react/v3/@types/index.d.ts rename to assets/src/js/v3/@types/index.d.ts index 9a6db0451c..7861b3fc12 100644 --- a/assets/react/v3/@types/index.d.ts +++ b/assets/src/js/v3/@types/index.d.ts @@ -1,7 +1,9 @@ -import { type InjectedField } from '@CourseBuilderContexts/CourseBuilderSlotContext'; -import { type InjectionSlots } from '@TutorShared/utils/types'; import { type LocaleData } from '@wordpress/i18n'; +import { type InjectionSlots } from '@TutorShared/utils/types'; + +import { type InjectedField } from '@CourseBuilderContexts/CourseBuilderSlotContext'; + export type {}; interface Tutor { @@ -47,6 +49,7 @@ declare module '*.png'; declare module '*.svg'; declare module '*.jpeg'; declare module '*.jpg'; +declare module '*.scss?inline'; declare global { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -91,10 +94,17 @@ declare global { course_list_page_url: string; course_post_type: string; local: string; + tutor_pn_vapid_key: string; + tutor_pn_client_id: string; + tutor_pn_subscription_saved: string; coupon_main_content_locales: LocaleData; course_builder_basic_locales: LocaleData; course_builder_curriculum_locales: LocaleData; course_builder_additional_locales: LocaleData; + course_slug: string; + lesson_slug: string; + quiz_slug: string; + assignment_slug: string; difficulty_levels: { label: string; value: string; @@ -121,6 +131,18 @@ declare global { url: string; is_enabled: number; }[]; + kids_icons_registry: string[]; + is_kids_mode: boolean; + is_legacy_learning_mode: boolean; + user_preferences: { + auto_play_next: boolean; + contrast: string; + font_scale: number; + learning_mood: 'modern' | 'legacy' | 'kids'; + motion_effects: 'auto' | 'reduce' | 'standard'; + theme: 'light' | 'dark' | 'system'; + vision: 'normal' | 'protanopia' | 'deuteranopia' | 'deuteranomaly'; + }; current_user: { data: { id: string; @@ -145,6 +167,7 @@ declare global { filter: null; }; settings?: { + learning_mode: 'modern' | 'legacy' | 'kids' | ''; monetize_by: 'wc' | 'tutor' | 'edd'; enable_course_marketplace: 'on' | 'off'; course_permalink_base: string; @@ -165,7 +188,9 @@ declare global { enable_tax: boolean; enable_individual_tax_control: boolean; is_tax_included_in_price: boolean; - pagination_per_page: string; + pagination_per_page: string | number; + quiz_attempts_allowed: string | number; + has_active_membership_plans: boolean; }; tutor_currency: { symbol: string; @@ -178,6 +203,10 @@ declare global { visibility_control?: { course_builder?: Record; }; + quiz_options?: { + quiz_auto_start?: string; + feedback_mode?: string; + }; }; wpApiSettings: { nonce: string; diff --git a/assets/react/v3/declaration.d.ts b/assets/src/js/v3/declaration.d.ts similarity index 63% rename from assets/react/v3/declaration.d.ts rename to assets/src/js/v3/declaration.d.ts index 1ec60b150b..f992f336aa 100644 --- a/assets/react/v3/declaration.d.ts +++ b/assets/src/js/v3/declaration.d.ts @@ -5,7 +5,7 @@ declare module '*.gif'; declare module '*.webp'; interface Window { - tutor_get_nonce_data: (value: boolean) => { key: string; value: string }; + tutor_get_nonce_data: (sendKeyValue?: boolean) => Record | { key: string; value: string }; } declare const __TUTOR_TEXT_DOMAIN__: string; diff --git a/assets/react/v3/entries/addon-list/components/AddonCard.tsx b/assets/src/js/v3/entries/addon-list/components/AddonCard.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/AddonCard.tsx rename to assets/src/js/v3/entries/addon-list/components/AddonCard.tsx index 64e58a0d81..a94ed47989 100644 --- a/assets/react/v3/entries/addon-list/components/AddonCard.tsx +++ b/assets/src/js/v3/entries/addon-list/components/AddonCard.tsx @@ -1,6 +1,6 @@ +import { useRef, useState } from 'react'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { useRef, useState } from 'react'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import Switch from '@TutorShared/atoms/Switch'; @@ -15,7 +15,7 @@ import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; import Popover from '@TutorShared/molecules/Popover'; import { useAddonContext } from '../contexts/addon-context'; -import { useEnableDisableAddon, type Addon } from '../services/addons'; +import { type Addon, useEnableDisableAddon } from '../services/addons'; import InstallationPopover from './InstallationPopover'; import SettingsPopover from './SettingsPopover'; diff --git a/assets/react/v3/entries/addon-list/components/AddonList.tsx b/assets/src/js/v3/entries/addon-list/components/AddonList.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/AddonList.tsx rename to assets/src/js/v3/entries/addon-list/components/AddonList.tsx index 6262573670..5f5b401d85 100644 --- a/assets/react/v3/entries/addon-list/components/AddonList.tsx +++ b/assets/src/js/v3/entries/addon-list/components/AddonList.tsx @@ -1,11 +1,15 @@ -import { type Addon } from '@AddonList/services/addons'; import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; + import { tutorConfig } from '@TutorShared/config/config'; import { spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; -import { __ } from '@wordpress/i18n'; + +import { type Addon } from '@AddonList/services/addons'; + import { useAddonContext } from '../contexts/addon-context'; import AddonCard from './AddonCard'; import EmptyState from './EmptyState'; diff --git a/assets/react/v3/entries/order-details/components/App.tsx b/assets/src/js/v3/entries/addon-list/components/App.tsx similarity index 80% rename from assets/react/v3/entries/order-details/components/App.tsx rename to assets/src/js/v3/entries/addon-list/components/App.tsx index 4b7f6b4980..53087b8e0a 100644 --- a/assets/react/v3/entries/order-details/components/App.tsx +++ b/assets/src/js/v3/entries/addon-list/components/App.tsx @@ -1,13 +1,14 @@ +import { useState } from 'react'; import { Global } from '@emotion/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { useState } from 'react'; import ToastProvider from '@TutorShared/atoms/Toast'; import RTLProvider from '@TutorShared/components/RTLProvider'; -import { ModalProvider } from '@TutorShared/components/modals/Modal'; +import { SVGIconConfigProvider } from '@TutorShared/contexts/SVGIconConfigContext'; import { createGlobalCss } from '@TutorShared/utils/style-utils'; + import Main from './layout/Main'; function App() { @@ -27,15 +28,16 @@ function App() { }, }), ); + return ( - - + +
    - - + + ); diff --git a/assets/react/v3/entries/addon-list/components/EmptyState.tsx b/assets/src/js/v3/entries/addon-list/components/EmptyState.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/EmptyState.tsx rename to assets/src/js/v3/entries/addon-list/components/EmptyState.tsx index 7894ad7e2d..9e35ead54d 100644 --- a/assets/react/v3/entries/addon-list/components/EmptyState.tsx +++ b/assets/src/js/v3/entries/addon-list/components/EmptyState.tsx @@ -1,8 +1,10 @@ +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import { spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; -import { css } from '@emotion/react'; + import emptyStateBanner from '@SharedImages/addons-empty-state.webp'; -import { __ } from '@wordpress/i18n'; function EmptyState() { return ( diff --git a/assets/react/v3/entries/addon-list/components/FreeBanner.tsx b/assets/src/js/v3/entries/addon-list/components/FreeBanner.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/FreeBanner.tsx rename to assets/src/js/v3/entries/addon-list/components/FreeBanner.tsx index 9491fc9916..da69325d57 100644 --- a/assets/react/v3/entries/addon-list/components/FreeBanner.tsx +++ b/assets/src/js/v3/entries/addon-list/components/FreeBanner.tsx @@ -1,11 +1,14 @@ -import bannerImage from '@SharedImages/free-addons-banner.png'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import config from '@TutorShared/config/config'; import { colorTokens, lineHeight, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; + +import bannerImage from '@SharedImages/free-addons-banner.png'; function FreeBanner() { return ( diff --git a/assets/react/v3/entries/addon-list/components/InstallationPopover.tsx b/assets/src/js/v3/entries/addon-list/components/InstallationPopover.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/InstallationPopover.tsx rename to assets/src/js/v3/entries/addon-list/components/InstallationPopover.tsx index c520ebd730..81a692c6c1 100644 --- a/assets/react/v3/entries/addon-list/components/InstallationPopover.tsx +++ b/assets/src/js/v3/entries/addon-list/components/InstallationPopover.tsx @@ -1,13 +1,17 @@ -import woocommerceFavicon from '@SharedImages/woocommerce-favicon.webp'; +import { useEffect, useState } from 'react'; +import { css } from '@emotion/react'; +import { __, sprintf } from '@wordpress/i18n'; + import Button from '@TutorShared/atoms/Button'; + import { borderRadius, colorTokens, shadow, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import For from '@TutorShared/controls/For'; import Show from '@TutorShared/controls/Show'; -import { css } from '@emotion/react'; -import { __, sprintf } from '@wordpress/i18n'; -import { useEffect, useState } from 'react'; -import { useInstallPlugin, type Addon } from '../services/addons'; + +import woocommerceFavicon from '@SharedImages/woocommerce-favicon.webp'; + +import { type Addon, useInstallPlugin } from '../services/addons'; interface Plugin { name: string; diff --git a/assets/react/v3/entries/addon-list/components/SettingsPopover.tsx b/assets/src/js/v3/entries/addon-list/components/SettingsPopover.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/SettingsPopover.tsx rename to assets/src/js/v3/entries/addon-list/components/SettingsPopover.tsx index b45e408bc9..c6e03c4148 100644 --- a/assets/react/v3/entries/addon-list/components/SettingsPopover.tsx +++ b/assets/src/js/v3/entries/addon-list/components/SettingsPopover.tsx @@ -1,10 +1,13 @@ +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import config from '@TutorShared/config/config'; import { borderRadius, colorTokens, shadow, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; + import { type Addon } from '../services/addons'; interface SettingsPopoverProps { diff --git a/assets/react/v3/entries/addon-list/components/layout/Container.tsx b/assets/src/js/v3/entries/addon-list/components/layout/Container.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/layout/Container.tsx rename to assets/src/js/v3/entries/addon-list/components/layout/Container.tsx index dd96e9dfde..7cf2f4fe68 100644 --- a/assets/react/v3/entries/addon-list/components/layout/Container.tsx +++ b/assets/src/js/v3/entries/addon-list/components/layout/Container.tsx @@ -1,6 +1,7 @@ -import { spacing } from '@TutorShared/config/styles'; -import { css } from '@emotion/react'; import type { ReactNode } from 'react'; +import { css } from '@emotion/react'; + +import { spacing } from '@TutorShared/config/styles'; const CONTAINER_WIDTH = 1196; diff --git a/assets/react/v3/entries/addon-list/components/layout/Main.tsx b/assets/src/js/v3/entries/addon-list/components/layout/Main.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/layout/Main.tsx rename to assets/src/js/v3/entries/addon-list/components/layout/Main.tsx index 535732c64a..3f5ed7286a 100644 --- a/assets/react/v3/entries/addon-list/components/layout/Main.tsx +++ b/assets/src/js/v3/entries/addon-list/components/layout/Main.tsx @@ -1,7 +1,8 @@ -import Topbar from './Topbar'; -import { AddonProvider } from '@AddonList/contexts/addon-context'; import AddonList from '@AddonList/components/AddonList'; +import { AddonProvider } from '@AddonList/contexts/addon-context'; + import Container from './Container'; +import Topbar from './Topbar'; function Main() { return ( diff --git a/assets/react/v3/entries/addon-list/components/layout/Topbar.tsx b/assets/src/js/v3/entries/addon-list/components/layout/Topbar.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/components/layout/Topbar.tsx rename to assets/src/js/v3/entries/addon-list/components/layout/Topbar.tsx index a76127bdbc..6769045700 100644 --- a/assets/react/v3/entries/addon-list/components/layout/Topbar.tsx +++ b/assets/src/js/v3/entries/addon-list/components/layout/Topbar.tsx @@ -1,8 +1,11 @@ import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import SVGIcon from '@TutorShared/atoms/SVGIcon'; import TextInput from '@TutorShared/atoms/TextInput'; + import { Breakpoint, colorTokens, fontSize, fontWeight, lineHeight, spacing } from '@TutorShared/config/styles'; -import { __ } from '@wordpress/i18n'; + import { useAddonContext } from '../../contexts/addon-context'; import Container from './Container'; diff --git a/assets/react/v3/entries/addon-list/contexts/addon-context.tsx b/assets/src/js/v3/entries/addon-list/contexts/addon-context.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/contexts/addon-context.tsx rename to assets/src/js/v3/entries/addon-list/contexts/addon-context.tsx index 9c55e69060..e5ae82c5f3 100644 --- a/assets/react/v3/entries/addon-list/contexts/addon-context.tsx +++ b/assets/src/js/v3/entries/addon-list/contexts/addon-context.tsx @@ -1,5 +1,7 @@ -import { tutorConfig } from '@TutorShared/config/config'; import React, { useState } from 'react'; + +import { tutorConfig } from '@TutorShared/config/config'; + import { type Addon, useAddonListQuery } from '../services/addons'; interface AddonContextType { diff --git a/assets/react/v3/entries/addon-list/index.tsx b/assets/src/js/v3/entries/addon-list/index.tsx similarity index 99% rename from assets/react/v3/entries/addon-list/index.tsx rename to assets/src/js/v3/entries/addon-list/index.tsx index 421fa2a235..cc11da1759 100644 --- a/assets/react/v3/entries/addon-list/index.tsx +++ b/assets/src/js/v3/entries/addon-list/index.tsx @@ -1,9 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import App from '@AddonList/components/App'; import ErrorBoundary from '@TutorShared/components/ErrorBoundary'; +import App from '@AddonList/components/App'; + const root = ReactDOM.createRoot(document.getElementById('tutor-addon-list-wrapper') as HTMLElement); root.render( diff --git a/assets/react/v3/entries/addon-list/services/addons.ts b/assets/src/js/v3/entries/addon-list/services/addons.ts similarity index 99% rename from assets/react/v3/entries/addon-list/services/addons.ts rename to assets/src/js/v3/entries/addon-list/services/addons.ts index 54f1dbf784..216056871c 100644 --- a/assets/react/v3/entries/addon-list/services/addons.ts +++ b/assets/src/js/v3/entries/addon-list/services/addons.ts @@ -1,5 +1,7 @@ import { useMutation, useQuery } from '@tanstack/react-query'; + import { useToast } from '@TutorShared/atoms/Toast'; + import { tutorConfig } from '@TutorShared/config/config'; import { wpAjaxInstance } from '@TutorShared/utils/api'; import endpoints from '@TutorShared/utils/endpoints'; diff --git a/assets/react/v3/entries/coupon-details/components/App.tsx b/assets/src/js/v3/entries/coupon-details/components/App.tsx similarity index 72% rename from assets/react/v3/entries/coupon-details/components/App.tsx rename to assets/src/js/v3/entries/coupon-details/components/App.tsx index e84684d87a..099f1293ac 100644 --- a/assets/react/v3/entries/coupon-details/components/App.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/App.tsx @@ -1,10 +1,15 @@ +import { useState } from 'react'; import { Global } from '@emotion/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + import ToastProvider from '@TutorShared/atoms/Toast'; + import { ModalProvider } from '@TutorShared/components/modals/Modal'; import RTLProvider from '@TutorShared/components/RTLProvider'; + +import { SVGIconConfigProvider } from '@TutorShared/contexts/SVGIconConfigContext'; import { createGlobalCss } from '@TutorShared/utils/style-utils'; -import { useState } from 'react'; + import Main from './layout/Main'; function App() { @@ -27,12 +32,14 @@ function App() { return ( - - - -
    - - + + + + +
    + + + ); diff --git a/assets/react/v3/entries/coupon-details/components/coupon/CouponDiscount.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponDiscount.tsx similarity index 98% rename from assets/react/v3/entries/coupon-details/components/coupon/CouponDiscount.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/CouponDiscount.tsx index 26f127c093..f922bd2ddb 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/CouponDiscount.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponDiscount.tsx @@ -1,34 +1,38 @@ -import CouponSelectItemModal from '@CouponDetails/components/modals/CourseListModal'; +import type { ReactNode } from 'react'; +import { Controller, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, sprintf } from '@wordpress/i18n'; + import { Box, BoxTitle } from '@TutorShared/atoms/Box'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import FormInputWithContent from '@TutorShared/components/fields/FormInputWithContent'; import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; import { useModal } from '@TutorShared/components/modals/Modal'; -import { tutorConfig } from '@TutorShared/config/config'; -import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; -import Show from '@TutorShared/controls/Show'; -import type { Coupon } from '@CouponDetails/services/coupon'; -import coursePlaceholder from '@SharedImages/course-placeholder.png'; +import { tutorConfig } from '@TutorShared/config/config'; import { Addons } from '@TutorShared/config/constants'; +import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; +import Show from '@TutorShared/controls/Show'; import { formatPrice } from '@TutorShared/utils/currency'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { formatSubscriptionRepeatUnit, isAddonEnabled } from '@TutorShared/utils/util'; import { requiredRule } from '@TutorShared/utils/validation'; -import { css } from '@emotion/react'; -import { __, sprintf } from '@wordpress/i18n'; -import type { ReactNode } from 'react'; -import { Controller, useFormContext } from 'react-hook-form'; + +import CouponSelectItemModal from '@CouponDetails/components/modals/CourseListModal'; +import type { Coupon } from '@CouponDetails/services/coupon'; + +import coursePlaceholder from '@SharedImages/course-placeholder.png'; const isTutorProActive = !!tutorConfig.tutor_pro_url; const displayBundle = isTutorProActive && isAddonEnabled(Addons.COURSE_BUNDLE); const isSubscriptionActive = isTutorProActive && isAddonEnabled(Addons.SUBSCRIPTION); const discountTypeOptions = [ - { label: __('Percent', 'tutor'), value: 'percentage' }, - { label: __('Amount', 'tutor'), value: 'flat' }, + { label: __('Percentage', 'tutor'), value: 'percentage' }, + { label: __('Fixed Amount', 'tutor'), value: 'flat' }, ]; const appliesToOptions = [ diff --git a/assets/react/v3/entries/coupon-details/components/coupon/CouponInfo.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponInfo.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/coupon/CouponInfo.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/CouponInfo.tsx index 2474803dc1..ed9f027c07 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/CouponInfo.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponInfo.tsx @@ -1,18 +1,22 @@ -import type { Coupon } from '@CouponDetails/services/coupon'; +import { Controller, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, sprintf } from '@wordpress/i18n'; +import { format } from 'date-fns'; + import { Box, BoxSubtitle, BoxTitle } from '@TutorShared/atoms/Box'; import Button from '@TutorShared/atoms/Button'; + import FormInput from '@TutorShared/components/fields/FormInput'; import FormRadioGroup from '@TutorShared/components/fields/FormRadioGroup'; import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; + import { DateFormats } from '@TutorShared/config/constants'; import { colorTokens, spacing } from '@TutorShared/config/styles'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { generateCouponCode } from '@TutorShared/utils/util'; import { maxLimitRule, requiredRule } from '@TutorShared/utils/validation'; -import { css } from '@emotion/react'; -import { __, sprintf } from '@wordpress/i18n'; -import { format } from 'date-fns'; -import { Controller, useFormContext } from 'react-hook-form'; + +import type { Coupon } from '@CouponDetails/services/coupon'; const couponTypeOptions = [ { label: __('Code', 'tutor'), value: 'code' }, diff --git a/assets/react/v3/entries/coupon-details/components/coupon/CouponLimitation.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponLimitation.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/coupon/CouponLimitation.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/CouponLimitation.tsx index de2a16f99d..5ec271c994 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/CouponLimitation.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponLimitation.tsx @@ -1,14 +1,18 @@ -import type { Coupon } from '@CouponDetails/services/coupon'; +import { Controller, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import { Box, BoxTitle } from '@TutorShared/atoms/Box'; + import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; import FormInput from '@TutorShared/components/fields/FormInput'; + import { colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { requiredRule } from '@TutorShared/utils/validation'; -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; -import { Controller, useFormContext } from 'react-hook-form'; + +import type { Coupon } from '@CouponDetails/services/coupon'; function CouponLimitation() { const form = useFormContext(); diff --git a/assets/react/v3/entries/coupon-details/components/coupon/CouponPreview.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponPreview.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/coupon/CouponPreview.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/CouponPreview.tsx index f58b84ff96..f52a52d6de 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/CouponPreview.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponPreview.tsx @@ -1,13 +1,16 @@ -import type { Coupon, CouponAppliesTo } from '@CouponDetails/services/coupon'; +import { useFormContext } from 'react-hook-form'; import { css } from '@emotion/react'; +import { __, sprintf } from '@wordpress/i18n'; +import { format, isToday, isTomorrow, isValid } from 'date-fns'; + import { DateFormats } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { formatPrice } from '@TutorShared/utils/currency'; -import { __, sprintf } from '@wordpress/i18n'; -import { format, isToday, isTomorrow, isValid } from 'date-fns'; -import { useFormContext } from 'react-hook-form'; + +import type { Coupon, CouponAppliesTo } from '@CouponDetails/services/coupon'; + import EmptyPreviewDetail from './EmptyPreviewDetail'; import EmptyPreviewTop from './EmptyPreviewTop'; diff --git a/assets/react/v3/entries/coupon-details/components/coupon/CouponValidity.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponValidity.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/coupon/CouponValidity.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/CouponValidity.tsx index 352294fb93..220d59bcba 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/CouponValidity.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/CouponValidity.tsx @@ -1,16 +1,20 @@ -import type { Coupon } from '@CouponDetails/services/coupon'; +import { Controller, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import { Box, BoxSubtitle, BoxTitle } from '@TutorShared/atoms/Box'; + import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; import FormDateInput from '@TutorShared/components/fields/FormDateInput'; import FormTimeInput from '@TutorShared/components/fields/FormTimeInput'; + import { colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { requiredRule } from '@TutorShared/utils/validation'; -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; -import { Controller, useFormContext } from 'react-hook-form'; + +import type { Coupon } from '@CouponDetails/services/coupon'; function CouponValidity() { const form = useFormContext(); diff --git a/assets/react/v3/entries/coupon-details/components/coupon/EmptyPreviewDetail.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/EmptyPreviewDetail.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/coupon/EmptyPreviewDetail.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/EmptyPreviewDetail.tsx index 76dd18b870..cf2e08fe78 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/EmptyPreviewDetail.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/EmptyPreviewDetail.tsx @@ -1,6 +1,7 @@ -import { spacing } from '@TutorShared/config/styles'; import { css } from '@emotion/react'; +import { spacing } from '@TutorShared/config/styles'; + const EmptyPreviewDetail = () => { return (
    diff --git a/assets/react/v3/entries/coupon-details/components/coupon/EmptyPreviewTop.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/EmptyPreviewTop.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/coupon/EmptyPreviewTop.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/EmptyPreviewTop.tsx index 559d74810c..b2f85de5b0 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/EmptyPreviewTop.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/EmptyPreviewTop.tsx @@ -1,8 +1,10 @@ +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import { colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; const EmptyPreviewTop = () => { return ( diff --git a/assets/react/v3/entries/coupon-details/components/coupon/PurchaseRequirements.tsx b/assets/src/js/v3/entries/coupon-details/components/coupon/PurchaseRequirements.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/coupon/PurchaseRequirements.tsx rename to assets/src/js/v3/entries/coupon-details/components/coupon/PurchaseRequirements.tsx index e5fb27d3eb..264f12e2d8 100644 --- a/assets/react/v3/entries/coupon-details/components/coupon/PurchaseRequirements.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/coupon/PurchaseRequirements.tsx @@ -1,16 +1,20 @@ -import type { Coupon } from '@CouponDetails/services/coupon'; +import { Controller, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, sprintf } from '@wordpress/i18n'; + import { Box, BoxTitle } from '@TutorShared/atoms/Box'; + import FormInput from '@TutorShared/components/fields/FormInput'; import FormInputWithContent from '@TutorShared/components/fields/FormInputWithContent'; import FormRadioGroup from '@TutorShared/components/fields/FormRadioGroup'; + import { tutorConfig } from '@TutorShared/config/config'; import { spacing } from '@TutorShared/config/styles'; import Show from '@TutorShared/controls/Show'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { requiredRule } from '@TutorShared/utils/validation'; -import { css } from '@emotion/react'; -import { __, sprintf } from '@wordpress/i18n'; -import { Controller, useFormContext } from 'react-hook-form'; + +import type { Coupon } from '@CouponDetails/services/coupon'; function PurchaseRequirements() { const form = useFormContext(); diff --git a/assets/react/v3/entries/coupon-details/components/layout/Main.tsx b/assets/src/js/v3/entries/coupon-details/components/layout/Main.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/layout/Main.tsx rename to assets/src/js/v3/entries/coupon-details/components/layout/Main.tsx index 5a07334df1..c9f843aeba 100644 --- a/assets/react/v3/entries/coupon-details/components/layout/Main.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/layout/Main.tsx @@ -1,20 +1,24 @@ -import { - type Coupon, - type Course, - type CourseCategory, - couponInitialValue, - useCouponDetailsQuery, -} from '@CouponDetails/services/coupon'; +import { lazy, Suspense, useEffect } from 'react'; +import { FormProvider } from 'react-hook-form'; +import { setLocaleData } from '@wordpress/i18n'; +import { format } from 'date-fns'; + import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; + import { tutorConfig } from '@TutorShared/config/config'; import { DateFormats } from '@TutorShared/config/constants'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; import { type MembershipPlan } from '@TutorShared/utils/types'; import { convertGMTtoLocalDate } from '@TutorShared/utils/util'; -import { setLocaleData } from '@wordpress/i18n'; -import { format } from 'date-fns'; -import { lazy, Suspense, useEffect } from 'react'; -import { FormProvider } from 'react-hook-form'; + +import { + type Coupon, + couponInitialValue, + type Course, + type CourseCategory, + useCouponDetailsQuery, +} from '@CouponDetails/services/coupon'; + import Topbar from './Topbar'; let MainContent: React.FC; diff --git a/assets/react/v3/entries/coupon-details/components/layout/MainContent.tsx b/assets/src/js/v3/entries/coupon-details/components/layout/MainContent.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/layout/MainContent.tsx rename to assets/src/js/v3/entries/coupon-details/components/layout/MainContent.tsx index c582a0d99c..eeba9db114 100644 --- a/assets/react/v3/entries/coupon-details/components/layout/MainContent.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/layout/MainContent.tsx @@ -1,4 +1,7 @@ +import { css } from '@emotion/react'; + import Container from '@TutorShared/components/Container'; + import { Breakpoint, spacing } from '@TutorShared/config/styles'; import CouponDiscount from '@CouponDetails/components/coupon/CouponDiscount'; @@ -7,7 +10,7 @@ import CouponUsageLimitation from '@CouponDetails/components/coupon/CouponLimita import CouponPreview from '@CouponDetails/components/coupon/CouponPreview'; import CouponValidity from '@CouponDetails/components/coupon/CouponValidity'; import PurchaseRequirements from '@CouponDetails/components/coupon/PurchaseRequirements'; -import { css } from '@emotion/react'; + import { TOPBAR_HEIGHT } from './Topbar'; export default function MainContent() { diff --git a/assets/react/v3/entries/coupon-details/components/layout/Topbar.tsx b/assets/src/js/v3/entries/coupon-details/components/layout/Topbar.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/layout/Topbar.tsx rename to assets/src/js/v3/entries/coupon-details/components/layout/Topbar.tsx index 6622021bde..ad855b649e 100644 --- a/assets/react/v3/entries/coupon-details/components/layout/Topbar.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/layout/Topbar.tsx @@ -1,24 +1,26 @@ +import { useFormContext } from 'react-hook-form'; import { css } from '@emotion/react'; import { __, sprintf } from '@wordpress/i18n'; -import { useFormContext } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import { TutorBadge } from '@TutorShared/atoms/TutorBadge'; + import Container from '@TutorShared/components/Container'; -import { - type Coupon, - convertFormDataToPayload, - useCreateCouponMutation, - useUpdateCouponMutation, -} from '@CouponDetails/services/coupon'; import { Breakpoint, colorTokens, spacing, zIndex } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { makeFirstCharacterUpperCase } from '@TutorShared/utils/util'; +import { + convertFormDataToPayload, + type Coupon, + useCreateCouponMutation, + useUpdateCouponMutation, +} from '@CouponDetails/services/coupon'; + export const TOPBAR_HEIGHT = 96; const statusVariant = { diff --git a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/CategoryListTable.tsx b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CategoryListTable.tsx similarity index 98% rename from assets/react/v3/entries/coupon-details/components/modals/CourseListModal/CategoryListTable.tsx rename to assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CategoryListTable.tsx index 32c6630a2d..e8e2c414f6 100644 --- a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/CategoryListTable.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CategoryListTable.tsx @@ -1,21 +1,25 @@ +import type { UseFormReturn } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import Checkbox from '@TutorShared/atoms/CheckBox'; import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; + import { borderRadius, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import { usePaginatedTable } from '@TutorShared/hooks/usePaginatedTable'; import Paginator from '@TutorShared/molecules/Paginator'; import Table, { type Column } from '@TutorShared/molecules/Table'; -import { css } from '@emotion/react'; import { type Coupon, type CourseCategory, useAppliesToQuery } from '@CouponDetails/services/coupon'; + import coursePlaceholder from '@SharedImages/course-placeholder.png'; -import { __ } from '@wordpress/i18n'; -import type { UseFormReturn } from 'react-hook-form'; + import SearchField from './SearchField'; interface CategoryListTableProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any - form: UseFormReturn; + form: UseFormReturn; } const CategoryListTable = ({ form }: CategoryListTableProps) => { @@ -83,7 +87,7 @@ const CategoryListTable = ({ form }: CategoryListTableProps) => {
    ); }, - width: 720, + width: '720px', }, ]; diff --git a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/CourseListTable.tsx b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CourseListTable.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/modals/CourseListModal/CourseListTable.tsx rename to assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CourseListTable.tsx index 0ede82aa09..eff27100f9 100644 --- a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/CourseListTable.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CourseListTable.tsx @@ -1,21 +1,25 @@ +import type { UseFormReturn } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, sprintf } from '@wordpress/i18n'; + import Checkbox from '@TutorShared/atoms/CheckBox'; import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; + import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import { usePaginatedTable } from '@TutorShared/hooks/usePaginatedTable'; import Paginator from '@TutorShared/molecules/Paginator'; import Table, { type Column } from '@TutorShared/molecules/Table'; -import { css } from '@emotion/react'; import { type Coupon, type Course, useAppliesToQuery } from '@CouponDetails/services/coupon'; + import coursePlaceholder from '@SharedImages/course-placeholder.png'; -import { __, sprintf } from '@wordpress/i18n'; -import type { UseFormReturn } from 'react-hook-form'; + import SearchField from './SearchField'; interface CourseListTableProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any - form: UseFormReturn; + form: UseFormReturn; type: 'bundles' | 'courses'; } diff --git a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/MembershipPlanListTable.tsx b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/MembershipPlanListTable.tsx similarity index 98% rename from assets/react/v3/entries/coupon-details/components/modals/CourseListModal/MembershipPlanListTable.tsx rename to assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/MembershipPlanListTable.tsx index 9d408c2da8..ec49e2ac67 100644 --- a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/MembershipPlanListTable.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/MembershipPlanListTable.tsx @@ -1,28 +1,29 @@ -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from 'react'; import { type UseFormReturn } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; import Checkbox from '@TutorShared/atoms/CheckBox'; import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import Table, { type Column } from '@TutorShared/molecules/Table'; -import { type Coupon } from '@CouponDetails/services/coupon'; import { colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; +import Table, { type Column } from '@TutorShared/molecules/Table'; import { useMembershipPlansQuery } from '@TutorShared/services/subscription'; import { formatPrice } from '@TutorShared/utils/currency'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type MembershipPlan } from '@TutorShared/utils/types'; import { formatSubscriptionRepeatUnit } from '@TutorShared/utils/util'; +import { type Coupon } from '@CouponDetails/services/coupon'; + import SearchField from './SearchField'; interface MembershipPlanListTableProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any - form: UseFormReturn; + form: UseFormReturn; } const MembershipPlanListTable = ({ form }: MembershipPlanListTableProps) => { @@ -103,7 +104,7 @@ const MembershipPlanListTable = ({ form }: MembershipPlanListTableProps) => {
    {item.plan_name} - +
    diff --git a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/SearchField.tsx b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/SearchField.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/components/modals/CourseListModal/SearchField.tsx rename to assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/SearchField.tsx index 8e0b198692..0f27eaf19b 100644 --- a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/SearchField.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/SearchField.tsx @@ -1,11 +1,14 @@ +import { useEffect } from 'react'; +import { Controller } from 'react-hook-form'; +import { __ } from '@wordpress/i18n'; + import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import FormInputWithContent from '@TutorShared/components/fields/FormInputWithContent'; + import { useDebounce } from '@TutorShared/hooks/useDebounce'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; import type { Filter } from '@TutorShared/hooks/usePaginatedTable'; -import { __ } from '@wordpress/i18n'; -import { useEffect } from 'react'; -import { Controller } from 'react-hook-form'; interface FilterFormValues { search: string; diff --git a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/index.tsx b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/index.tsx similarity index 98% rename from assets/react/v3/entries/coupon-details/components/modals/CourseListModal/index.tsx rename to assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/index.tsx index 90e9afbc1c..06eb239495 100644 --- a/assets/react/v3/entries/coupon-details/components/modals/CourseListModal/index.tsx +++ b/assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/index.tsx @@ -1,12 +1,17 @@ -import type { Coupon } from '@CouponDetails/services/coupon'; +import type { UseFormReturn } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import Button from '@TutorShared/atoms/Button'; + import BasicModalWrapper from '@TutorShared/components/modals/BasicModalWrapper'; import type { ModalProps } from '@TutorShared/components/modals/Modal'; + import { spacing } from '@TutorShared/config/styles'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; -import type { UseFormReturn } from 'react-hook-form'; + +import type { Coupon } from '@CouponDetails/services/coupon'; + import CategoryListTable from './CategoryListTable'; import CourseListTable from './CourseListTable'; import MembershipPlanListTable from './MembershipPlanListTable'; @@ -14,7 +19,7 @@ import MembershipPlanListTable from './MembershipPlanListTable'; interface CouponSelectItemModalProps extends ModalProps { closeModal: (props?: { action: 'CONFIRM' | 'CLOSE' }) => void; // eslint-disable-next-line @typescript-eslint/no-explicit-any - form: UseFormReturn; + form: UseFormReturn; type: 'bundles' | 'courses' | 'categories' | 'membershipPlans'; } diff --git a/assets/react/v3/entries/coupon-details/index.tsx b/assets/src/js/v3/entries/coupon-details/index.tsx similarity index 99% rename from assets/react/v3/entries/coupon-details/index.tsx rename to assets/src/js/v3/entries/coupon-details/index.tsx index 3e6f24a3ee..32643b5925 100644 --- a/assets/react/v3/entries/coupon-details/index.tsx +++ b/assets/src/js/v3/entries/coupon-details/index.tsx @@ -1,9 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import App from '@CouponDetails/components/App'; import ErrorBoundary from '@TutorShared/components/ErrorBoundary'; +import App from '@CouponDetails/components/App'; + const root = ReactDOM.createRoot(document.getElementById('tutor-coupon-root') as HTMLElement); root.render( diff --git a/assets/react/v3/entries/coupon-details/services/coupon.ts b/assets/src/js/v3/entries/coupon-details/services/coupon.ts similarity index 99% rename from assets/react/v3/entries/coupon-details/services/coupon.ts rename to assets/src/js/v3/entries/coupon-details/services/coupon.ts index 47c8b114fd..977e16f1e9 100644 --- a/assets/react/v3/entries/coupon-details/services/coupon.ts +++ b/assets/src/js/v3/entries/coupon-details/services/coupon.ts @@ -1,4 +1,7 @@ +import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; + import { useToast } from '@TutorShared/atoms/Toast'; + import config from '@TutorShared/config/config'; import { DateFormats } from '@TutorShared/config/constants'; import { wpAjaxInstance } from '@TutorShared/utils/api'; @@ -6,7 +9,6 @@ import endpoints from '@TutorShared/utils/endpoints'; import type { ErrorResponse } from '@TutorShared/utils/form'; import type { MembershipPlan, PaginatedParams, PaginatedResult } from '@TutorShared/utils/types'; import { convertToErrorMessage, convertToGMT } from '@TutorShared/utils/util'; -import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; export type CouponType = 'code' | 'automatic'; diff --git a/assets/react/v3/entries/course-builder/components/App.tsx b/assets/src/js/v3/entries/course-builder/components/App.tsx similarity index 71% rename from assets/react/v3/entries/course-builder/components/App.tsx rename to assets/src/js/v3/entries/course-builder/components/App.tsx index 8e8469d6da..7376623bd7 100644 --- a/assets/react/v3/entries/course-builder/components/App.tsx +++ b/assets/src/js/v3/entries/course-builder/components/App.tsx @@ -1,13 +1,18 @@ -import routes from '@CourseBuilderConfig/routes'; -import { CourseBuilderSlotProvider } from '@CourseBuilderContexts/CourseBuilderSlotContext'; +import { useState } from 'react'; +import { useRoutes } from 'react-router-dom'; +import { Global } from '@emotion/react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + import ToastProvider from '@TutorShared/atoms/Toast'; -import RTLProvider from '@TutorShared/components/RTLProvider'; + import { ModalProvider } from '@TutorShared/components/modals/Modal'; +import RTLProvider from '@TutorShared/components/RTLProvider'; + +import { SVGIconConfigProvider } from '@TutorShared/contexts/SVGIconConfigContext'; import { createGlobalCss } from '@TutorShared/utils/style-utils'; -import { Global } from '@emotion/react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { useState } from 'react'; -import { useRoutes } from 'react-router-dom'; + +import routes from '@CourseBuilderConfig/routes'; +import { CourseBuilderSlotProvider } from '@CourseBuilderContexts/CourseBuilderSlotContext'; const App = () => { const [queryClient] = useState( @@ -32,14 +37,16 @@ const App = () => { return ( - - - - - {routers} - - - + + + + + + {routers} + + + + ); diff --git a/assets/react/v3/entries/course-builder/components/ContentRenderer.tsx b/assets/src/js/v3/entries/course-builder/components/ContentRenderer.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/ContentRenderer.tsx rename to assets/src/js/v3/entries/course-builder/components/ContentRenderer.tsx index ea9d454df7..e16999010e 100644 --- a/assets/react/v3/entries/course-builder/components/ContentRenderer.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ContentRenderer.tsx @@ -1,6 +1,7 @@ -import ComponentErrorBoundary from '@TutorShared/components/ComponentErrorBoundary'; import React from 'react'; +import ComponentErrorBoundary from '@TutorShared/components/ComponentErrorBoundary'; + interface ContentRendererProps { component: React.ReactNode; } diff --git a/assets/react/v3/entries/course-builder/components/CourseBuilderSlot.tsx b/assets/src/js/v3/entries/course-builder/components/CourseBuilderSlot.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/CourseBuilderSlot.tsx rename to assets/src/js/v3/entries/course-builder/components/CourseBuilderSlot.tsx index a0d8d3ed50..5edc63fa47 100644 --- a/assets/react/v3/entries/course-builder/components/CourseBuilderSlot.tsx +++ b/assets/src/js/v3/entries/course-builder/components/CourseBuilderSlot.tsx @@ -1,6 +1,9 @@ -import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; -import { type InjectedContent, type InjectedField, type SectionPath } from '@TutorShared/utils/types'; import { type UseFormReturn } from 'react-hook-form'; + +import { type InjectedContent, type InjectedField, type SectionPath } from '@TutorShared/utils/types'; + +import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; + import ContentRenderer from './ContentRenderer'; import FieldRenderer from './FieldRenderer'; diff --git a/assets/react/v3/entries/course-builder/components/FieldRenderer.tsx b/assets/src/js/v3/entries/course-builder/components/FieldRenderer.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/FieldRenderer.tsx rename to assets/src/js/v3/entries/course-builder/components/FieldRenderer.tsx index 42237ecd81..6499f706c9 100644 --- a/assets/react/v3/entries/course-builder/components/FieldRenderer.tsx +++ b/assets/src/js/v3/entries/course-builder/components/FieldRenderer.tsx @@ -1,4 +1,7 @@ +import { Controller, type RegisterOptions, type UseFormReturn } from 'react-hook-form'; + import Alert from '@TutorShared/atoms/Alert'; + import ComponentErrorBoundary from '@TutorShared/components/ComponentErrorBoundary'; import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; import FormDateInput from '@TutorShared/components/fields/FormDateInput'; @@ -12,9 +15,9 @@ import FormTextareaInput from '@TutorShared/components/fields/FormTextareaInput' import FormTimeInput from '@TutorShared/components/fields/FormTimeInput'; import FormVideoInput from '@TutorShared/components/fields/FormVideoInput'; import FormWPEditor from '@TutorShared/components/fields/FormWPEditor'; + import { type FormControllerProps } from '@TutorShared/utils/form'; import { type FieldType, type Option } from '@TutorShared/utils/types'; -import { Controller, type RegisterOptions, type UseFormReturn } from 'react-hook-form'; interface FieldRendererProps { name: string; diff --git a/assets/react/v3/entries/course-builder/components/additional/CourseCard.tsx b/assets/src/js/v3/entries/course-builder/components/additional/CourseCard.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/additional/CourseCard.tsx rename to assets/src/js/v3/entries/course-builder/components/additional/CourseCard.tsx index f32bfeb6f5..1cf5a6287c 100644 --- a/assets/react/v3/entries/course-builder/components/additional/CourseCard.tsx +++ b/assets/src/js/v3/entries/course-builder/components/additional/CourseCard.tsx @@ -4,7 +4,6 @@ import SVGIcon from '@TutorShared/atoms/SVGIcon'; import { borderRadius, Breakpoint, colorTokens, fontWeight, shadow, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; - import { styleUtils } from '@TutorShared/utils/style-utils'; interface CourseCardProps { diff --git a/assets/react/v3/entries/course-builder/components/additional/CoursePrerequisitesEmptyState.tsx b/assets/src/js/v3/entries/course-builder/components/additional/CoursePrerequisitesEmptyState.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/additional/CoursePrerequisitesEmptyState.tsx rename to assets/src/js/v3/entries/course-builder/components/additional/CoursePrerequisitesEmptyState.tsx index 808508f508..89abce5a58 100644 --- a/assets/react/v3/entries/course-builder/components/additional/CoursePrerequisitesEmptyState.tsx +++ b/assets/src/js/v3/entries/course-builder/components/additional/CoursePrerequisitesEmptyState.tsx @@ -9,8 +9,8 @@ import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { styleUtils } from '@TutorShared/utils/style-utils'; -import prerequisites2x from '@SharedImages/pro-placeholders/prerequisites-2x.webp'; import prerequisites from '@SharedImages/pro-placeholders/prerequisites.webp'; +import prerequisites2x from '@SharedImages/pro-placeholders/prerequisites-2x.webp'; const isTutorPro = !!tutorConfig.tutor_pro_url; diff --git a/assets/react/v3/entries/course-builder/components/additional/LiveClass.tsx b/assets/src/js/v3/entries/course-builder/components/additional/LiveClass.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/additional/LiveClass.tsx rename to assets/src/js/v3/entries/course-builder/components/additional/LiveClass.tsx index 65b881692e..bd9cd30136 100644 --- a/assets/react/v3/entries/course-builder/components/additional/LiveClass.tsx +++ b/assets/src/js/v3/entries/course-builder/components/additional/LiveClass.tsx @@ -1,38 +1,37 @@ +import { useRef, useState } from 'react'; import { css } from '@emotion/react'; import { useQueryClient } from '@tanstack/react-query'; import { __ } from '@wordpress/i18n'; -import { useRef, useState } from 'react'; import Button from '@TutorShared/atoms/Button'; import ProBadge from '@TutorShared/atoms/ProBadge'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import EmptyState from '@TutorShared/molecules/EmptyState'; -import Popover from '@TutorShared/molecules/Popover'; - +import config, { tutorConfig } from '@TutorShared/config/config'; +import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import For from '@TutorShared/controls/For'; import Show from '@TutorShared/controls/Show'; - -import type { CourseDetailsResponse, GoogleMeet, MeetingType, ZoomMeeting } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; -import config, { tutorConfig } from '@TutorShared/config/config'; -import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; +import { withVisibilityControl } from '@TutorShared/hoc/withVisibilityControl'; import { AnimationType } from '@TutorShared/hooks/useAnimation'; +import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; +import EmptyState from '@TutorShared/molecules/EmptyState'; +import Popover from '@TutorShared/molecules/Popover'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { isAddonEnabled, noop } from '@TutorShared/utils/util'; +import type { CourseDetailsResponse, GoogleMeet, MeetingType, ZoomMeeting } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + +import liveClassPro from '@SharedImages/pro-placeholders/live-class.webp'; +import liveClassPro2x from '@SharedImages/pro-placeholders/live-class-2x.webp'; + import GoogleMeetMeetingCard from './meeting/GoogleMeetCard'; import GoogleMeetForm from './meeting/GoogleMeetForm'; import ZoomMeetingCard from './meeting/ZoomMeetingCard'; import ZoomMeetingForm from './meeting/ZoomMeetingForm'; -import liveClassPro2x from '@SharedImages/pro-placeholders/live-class-2x.webp'; -import liveClassPro from '@SharedImages/pro-placeholders/live-class.webp'; -import { withVisibilityControl } from '@TutorShared/hoc/withVisibilityControl'; -import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; - const isTutorPro = !!tutorConfig.tutor_pro_url; const isZoomAddonEnabled = isAddonEnabled(Addons.TUTOR_ZOOM_INTEGRATION); const isGoogleMeetAddonEnabled = isAddonEnabled(Addons.TUTOR_GOOGLE_MEET_INTEGRATION); diff --git a/assets/react/v3/entries/course-builder/components/additional/meeting/GoogleMeetCard.tsx b/assets/src/js/v3/entries/course-builder/components/additional/meeting/GoogleMeetCard.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/additional/meeting/GoogleMeetCard.tsx rename to assets/src/js/v3/entries/course-builder/components/additional/meeting/GoogleMeetCard.tsx index cf14a03afd..b1dfbcd784 100644 --- a/assets/react/v3/entries/course-builder/components/additional/meeting/GoogleMeetCard.tsx +++ b/assets/src/js/v3/entries/course-builder/components/additional/meeting/GoogleMeetCard.tsx @@ -1,23 +1,23 @@ +import { useRef, useState } from 'react'; import { css } from '@emotion/react'; import { __, sprintf } from '@wordpress/i18n'; import { format } from 'date-fns'; -import { useRef, useState } from 'react'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import ConfirmationPopover from '@TutorShared/molecules/ConfirmationPopover'; -import Popover from '@TutorShared/molecules/Popover'; +import { DateFormats } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, fontWeight, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; - -import { type GoogleMeet, useDeleteGoogleMeetMutation } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; -import { DateFormats } from '@TutorShared/config/constants'; import { AnimationType } from '@TutorShared/hooks/useAnimation'; +import ConfirmationPopover from '@TutorShared/molecules/ConfirmationPopover'; +import Popover from '@TutorShared/molecules/Popover'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { noop } from '@TutorShared/utils/util'; +import { type GoogleMeet, useDeleteGoogleMeetMutation } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + import GoogleMeetForm from './GoogleMeetForm'; interface GoogleMeetMeetingCardProps { diff --git a/assets/react/v3/entries/course-builder/components/additional/meeting/GoogleMeetForm.tsx b/assets/src/js/v3/entries/course-builder/components/additional/meeting/GoogleMeetForm.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/additional/meeting/GoogleMeetForm.tsx rename to assets/src/js/v3/entries/course-builder/components/additional/meeting/GoogleMeetForm.tsx index 644fcfb1f4..3b6fe88b7d 100644 --- a/assets/react/v3/entries/course-builder/components/additional/meeting/GoogleMeetForm.tsx +++ b/assets/src/js/v3/entries/course-builder/components/additional/meeting/GoogleMeetForm.tsx @@ -1,8 +1,8 @@ +import { useEffect } from 'react'; +import { Controller } from 'react-hook-form'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; import { format } from 'date-fns'; -import { useEffect } from 'react'; -import { Controller } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import { LoadingOverlay } from '@TutorShared/atoms/LoadingSpinner'; @@ -18,9 +18,12 @@ import { tutorConfig } from '@TutorShared/config/config'; import { DateFormats } from '@TutorShared/config/constants'; import { borderRadius, colorTokens, fontSize, shadow, spacing, zIndex } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; - +import Show from '@TutorShared/controls/Show'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; import { useIsScrolling } from '@TutorShared/hooks/useIsScrolling'; +import { styleUtils } from '@TutorShared/utils/style-utils'; +import { type ID, isDefined } from '@TutorShared/utils/types'; +import { invalidDateRule, invalidTimeRule } from '@TutorShared/utils/validation'; import { type GoogleMeet, @@ -29,10 +32,6 @@ import { } from '@CourseBuilderServices/course'; import { useGoogleMeetDetailsQuery } from '@CourseBuilderServices/curriculum'; import { getCourseId } from '@CourseBuilderUtils/utils'; -import Show from '@TutorShared/controls/Show'; -import { styleUtils } from '@TutorShared/utils/style-utils'; -import { type ID, isDefined } from '@TutorShared/utils/types'; -import { invalidDateRule, invalidTimeRule } from '@TutorShared/utils/validation'; interface GoogleMeetFormProps { onCancel: () => void; @@ -74,7 +73,7 @@ const GoogleMeetForm = ({ onCancel, data, topicId, meetingId }: GoogleMeetFormPr const saveGoogleMeetMeeting = useSaveGoogleMeetMutation(); - const timezones = tutorConfig.timezones; + const timezones = tutorConfig.timezones as Record; const timeZonesOptions = Object.keys(timezones).map((key) => ({ label: timezones[key], diff --git a/assets/react/v3/entries/course-builder/components/additional/meeting/ZoomMeetingCard.tsx b/assets/src/js/v3/entries/course-builder/components/additional/meeting/ZoomMeetingCard.tsx similarity index 98% rename from assets/react/v3/entries/course-builder/components/additional/meeting/ZoomMeetingCard.tsx rename to assets/src/js/v3/entries/course-builder/components/additional/meeting/ZoomMeetingCard.tsx index fd711ed028..cf911d1414 100644 --- a/assets/react/v3/entries/course-builder/components/additional/meeting/ZoomMeetingCard.tsx +++ b/assets/src/js/v3/entries/course-builder/components/additional/meeting/ZoomMeetingCard.tsx @@ -1,24 +1,24 @@ +import { useRef, useState } from 'react'; import { css } from '@emotion/react'; import { __, sprintf } from '@wordpress/i18n'; import { format } from 'date-fns'; -import { useRef, useState } from 'react'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import ConfirmationPopover from '@TutorShared/molecules/ConfirmationPopover'; -import Popover from '@TutorShared/molecules/Popover'; +import { DateFormats } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, fontWeight, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; - -import { type ZoomMeeting, useDeleteZoomMeetingMutation } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; -import { DateFormats } from '@TutorShared/config/constants'; import { AnimationType } from '@TutorShared/hooks/useAnimation'; +import ConfirmationPopover from '@TutorShared/molecules/ConfirmationPopover'; +import Popover from '@TutorShared/molecules/Popover'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { noop } from '@TutorShared/utils/util'; +import { useDeleteZoomMeetingMutation, type ZoomMeeting } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + import ZoomMeetingForm from './ZoomMeetingForm'; interface ZoomMeetingCardProps { @@ -42,7 +42,7 @@ const ZoomMeetingCard = ({ data, meetingHost, topicId }: ZoomMeetingCardProps) = const handleZoomMeetingDelete = async () => { const response = await deleteZoomMeetingMutation.mutateAsync(ID); - if (response.success) { + if (response.status_code === 200) { setIsDeletePopoverOpen(false); } }; diff --git a/assets/react/v3/entries/course-builder/components/additional/meeting/ZoomMeetingForm.tsx b/assets/src/js/v3/entries/course-builder/components/additional/meeting/ZoomMeetingForm.tsx similarity index 98% rename from assets/react/v3/entries/course-builder/components/additional/meeting/ZoomMeetingForm.tsx rename to assets/src/js/v3/entries/course-builder/components/additional/meeting/ZoomMeetingForm.tsx index a6a86e973e..7e287a6fbc 100644 --- a/assets/react/v3/entries/course-builder/components/additional/meeting/ZoomMeetingForm.tsx +++ b/assets/src/js/v3/entries/course-builder/components/additional/meeting/ZoomMeetingForm.tsx @@ -1,33 +1,33 @@ +import { useEffect } from 'react'; +import { Controller } from 'react-hook-form'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; import { format } from 'date-fns'; -import { useEffect } from 'react'; -import { Controller } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import { LoadingOverlay } from '@TutorShared/atoms/LoadingSpinner'; import FormDateInput from '@TutorShared/components/fields/FormDateInput'; import FormInput from '@TutorShared/components/fields/FormInput'; +import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; import FormTextareaInput from '@TutorShared/components/fields/FormTextareaInput'; import FormTimeInput from '@TutorShared/components/fields/FormTimeInput'; -import { borderRadius, colorTokens, fontSize, shadow, spacing, zIndex } from '@TutorShared/config/styles'; -import { typography } from '@TutorShared/config/typography'; -import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; - -import { type ZoomMeeting, type ZoomMeetingFormData, useSaveZoomMeetingMutation } from '@CourseBuilderServices/course'; -import { useZoomMeetingDetailsQuery } from '@CourseBuilderServices/curriculum'; -import { getCourseId } from '@CourseBuilderUtils/utils'; -import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; import { tutorConfig } from '@TutorShared/config/config'; import { DateFormats } from '@TutorShared/config/constants'; +import { borderRadius, colorTokens, fontSize, shadow, spacing, zIndex } from '@TutorShared/config/styles'; +import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; +import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; import { useIsScrolling } from '@TutorShared/hooks/useIsScrolling'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type ID, isDefined } from '@TutorShared/utils/types'; import { invalidTimeRule } from '@TutorShared/utils/validation'; +import { useSaveZoomMeetingMutation, type ZoomMeeting, type ZoomMeetingFormData } from '@CourseBuilderServices/course'; +import { useZoomMeetingDetailsQuery } from '@CourseBuilderServices/curriculum'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + interface ZoomMeetingFormProps { onCancel: () => void; data: ZoomMeeting | null; @@ -66,7 +66,7 @@ const ZoomMeetingForm = ({ onCancel, data, meetingHost, topicId, meetingId }: Zo const saveZoomMeeting = useSaveZoomMeetingMutation(); - const timezones = tutorConfig.timezones; + const timezones = tutorConfig.timezones as Record; const timeZonesOptions = Object.keys(timezones).map((key) => ({ label: timezones[key], value: key, diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/BasicPrompt.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/BasicPrompt.tsx similarity index 98% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/BasicPrompt.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/BasicPrompt.tsx index 02e3b65842..3ade0aa9af 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/BasicPrompt.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/BasicPrompt.tsx @@ -1,15 +1,19 @@ +import { useEffect } from 'react'; +import { Controller } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import MagicButton from '@TutorShared/atoms/MagicButton'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import FormTextareaInput from '@TutorShared/components/fields/FormTextareaInput'; + import { modal } from '@TutorShared/config/constants'; -import { Breakpoint, borderRadius, colorTokens, shadow, spacing } from '@TutorShared/config/styles'; +import { borderRadius, Breakpoint, colorTokens, shadow, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; import { styleUtils } from '@TutorShared/utils/style-utils'; -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; -import { useEffect } from 'react'; -import { Controller } from 'react-hook-form'; + import { useGenerateCourseContent } from '../../hooks/useGenerateCourseContent'; import { useContentGenerationContext } from './ContentGenerationContext'; diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/ContentAccordion.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentAccordion.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/ContentAccordion.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentAccordion.tsx index d3a00f2224..f5722ee4f2 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/ContentAccordion.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentAccordion.tsx @@ -1,8 +1,8 @@ +import { type ReactNode, useEffect, useState } from 'react'; import { css } from '@emotion/react'; import { useSpring } from '@react-spring/web'; import { animated } from '@react-spring/web'; import { __ } from '@wordpress/i18n'; -import { type ReactNode, useEffect, useState } from 'react'; import { GradientLoadingSpinner } from '@TutorShared/atoms/LoadingSpinner'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/ContentGeneration.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentGeneration.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/ContentGeneration.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentGeneration.tsx index a7d5329e21..7b03c6ec4a 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/ContentGeneration.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentGeneration.tsx @@ -1,7 +1,7 @@ -import { css } from '@emotion/react'; -import { __, sprintf } from '@wordpress/i18n'; import { useEffect, useRef, useState } from 'react'; import { Controller } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, sprintf } from '@wordpress/i18n'; import Alert from '@TutorShared/atoms/Alert'; import Button from '@TutorShared/atoms/Button'; @@ -10,10 +10,10 @@ import MagicButton from '@TutorShared/atoms/MagicButton'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import { useToast } from '@TutorShared/atoms/Toast'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import FormTextareaInput from '@TutorShared/components/fields/FormTextareaInput'; + import { Addons, isRTL } from '@TutorShared/config/constants'; -import { Breakpoint, borderRadius, colorTokens, spacing, zIndex } from '@TutorShared/config/styles'; +import { borderRadius, Breakpoint, colorTokens, spacing, zIndex } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import For from '@TutorShared/controls/For'; import Show from '@TutorShared/controls/Show'; @@ -22,17 +22,18 @@ import { useSaveAIGeneratedCourseContentMutation } from '@TutorShared/services/m import { styleUtils } from '@TutorShared/utils/style-utils'; import { getObjectKeys, getObjectValues, isAddonEnabled } from '@TutorShared/utils/util'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + +import aiStudioError from '@SharedImages/ai-studio-error.webp'; +import aiStudioError2x from '@SharedImages/ai-studio-error-2x.webp'; + import { useGenerateCourseContent } from '../../hooks/useGenerateCourseContent'; import ContentAccordion from './ContentAccordion'; import { type Loading, useContentGenerationContext } from './ContentGenerationContext'; import ContentSkeleton from './loaders/ContentSkeleton'; import DescriptionSkeleton from './loaders/DescriptionSkeleton'; -import TitleSkeleton from './loaders/TitleSkeleton'; - -import aiStudioError2x from '@SharedImages/ai-studio-error-2x.webp'; -import aiStudioError from '@SharedImages/ai-studio-error.webp'; - import ImageSkeleton from './loaders/ImageSkeleton'; +import TitleSkeleton from './loaders/TitleSkeleton'; interface LoadingStep { loading_label: string; diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/ContentGenerationContext.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentGenerationContext.tsx similarity index 95% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/ContentGenerationContext.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentGenerationContext.tsx index 6c7ad7a4ab..62e81aed10 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/ContentGenerationContext.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/ContentGenerationContext.tsx @@ -1,18 +1,10 @@ -import React, { useCallback, useContext, useMemo, useRef, useState, type ReactNode } from 'react'; +import React, { type ReactNode, useCallback, useContext, useMemo, useRef, useState } from 'react'; -import type { QuizContent } from '@TutorShared/services/magic-ai'; -import { isDefined } from '@TutorShared/utils/types'; +import { isDefined, type TopicContent } from '@TutorShared/utils/types'; import { noop } from '@TutorShared/utils/util'; export type CourseContentStep = 'prompt' | 'generation'; -export interface TopicContent { - type: 'lesson' | 'quiz' | 'assignment'; - title: string; - description: string; - questions?: QuizContent[]; -} - export interface Topic { title: string; contents: TopicContent[]; diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/ContentSkeleton.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/ContentSkeleton.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/ContentSkeleton.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/ContentSkeleton.tsx index 1479b5ae57..8eeff53164 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/ContentSkeleton.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/ContentSkeleton.tsx @@ -1,6 +1,8 @@ +import { css } from '@emotion/react'; + import Skeleton from '@TutorShared/atoms/Skeleton'; + import { spacing } from '@TutorShared/config/styles'; -import { css } from '@emotion/react'; const ContentSkeleton = () => { return ( diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/DescriptionSkeleton.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/DescriptionSkeleton.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/DescriptionSkeleton.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/DescriptionSkeleton.tsx index 208743f6bf..cc86c83357 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/DescriptionSkeleton.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/DescriptionSkeleton.tsx @@ -1,6 +1,8 @@ +import { css } from '@emotion/react'; + import Skeleton from '@TutorShared/atoms/Skeleton'; + import { spacing } from '@TutorShared/config/styles'; -import { css } from '@emotion/react'; const DescriptionSkeleton = () => { return ( diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/ImageSkeleton.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/ImageSkeleton.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/ImageSkeleton.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/ImageSkeleton.tsx index 1f5afa7477..d4bbdeb740 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/ImageSkeleton.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/ImageSkeleton.tsx @@ -1,6 +1,8 @@ +import { css } from '@emotion/react'; + import Skeleton from '@TutorShared/atoms/Skeleton'; + import { spacing } from '@TutorShared/config/styles'; -import { css } from '@emotion/react'; const ImageSkeleton = () => { return ( diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/TitleSkeleton.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/TitleSkeleton.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/TitleSkeleton.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/TitleSkeleton.tsx index cc9f8ce05d..b22adc16f4 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/TitleSkeleton.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/TitleSkeleton.tsx @@ -1,6 +1,8 @@ +import { css } from '@emotion/react'; + import Skeleton from '@TutorShared/atoms/Skeleton'; + import { spacing } from '@TutorShared/config/styles'; -import { css } from '@emotion/react'; const TitleSkeleton = () => { return ( diff --git a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/TopicContentSkeleton.tsx b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/TopicContentSkeleton.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/TopicContentSkeleton.tsx rename to assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/TopicContentSkeleton.tsx index 92c2f57e2d..f432c873c8 100644 --- a/assets/react/v3/entries/course-builder/components/ai-course-modal/loaders/TopicContentSkeleton.tsx +++ b/assets/src/js/v3/entries/course-builder/components/ai-course-modal/loaders/TopicContentSkeleton.tsx @@ -1,6 +1,8 @@ +import { css } from '@emotion/react'; + import Skeleton from '@TutorShared/atoms/Skeleton'; + import { spacing } from '@TutorShared/config/styles'; -import { css } from '@emotion/react'; const TopicContentSkeleton = () => { return ( diff --git a/assets/react/v3/entries/course-builder/components/course-basic/ContentDripSettings.tsx b/assets/src/js/v3/entries/course-builder/components/course-basic/ContentDripSettings.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/course-basic/ContentDripSettings.tsx rename to assets/src/js/v3/entries/course-builder/components/course-basic/ContentDripSettings.tsx index 4058dec064..85ee3808d8 100644 --- a/assets/react/v3/entries/course-builder/components/course-basic/ContentDripSettings.tsx +++ b/assets/src/js/v3/entries/course-builder/components/course-basic/ContentDripSettings.tsx @@ -1,19 +1,20 @@ +import { Controller, useFormContext } from 'react-hook-form'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { Controller, useFormContext } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import FormRadioGroup from '@TutorShared/components/fields/FormRadioGroup'; -import type { CourseFormData } from '@CourseBuilderServices/course'; import config, { tutorConfig } from '@TutorShared/config/config'; import { Addons } from '@TutorShared/config/constants'; import { Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import { isAddonEnabled } from '@TutorShared/utils/util'; +import type { CourseFormData } from '@CourseBuilderServices/course'; + const ContentDripSettings = () => { const form = useFormContext(); diff --git a/assets/react/v3/entries/course-builder/components/course-basic/CourseBasicSidebar.tsx b/assets/src/js/v3/entries/course-builder/components/course-basic/CourseBasicSidebar.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/course-basic/CourseBasicSidebar.tsx rename to assets/src/js/v3/entries/course-builder/components/course-basic/CourseBasicSidebar.tsx index 4121351333..86d4fa7ed5 100644 --- a/assets/react/v3/entries/course-builder/components/course-basic/CourseBasicSidebar.tsx +++ b/assets/src/js/v3/entries/course-builder/components/course-basic/CourseBasicSidebar.tsx @@ -1,11 +1,12 @@ +import { useState } from 'react'; +import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { css } from '@emotion/react'; import { useIsFetching, useQueryClient } from '@tanstack/react-query'; import { __, sprintf } from '@wordpress/i18n'; import { format } from 'date-fns'; -import { useState } from 'react'; -import { Controller, useFormContext, useWatch } from 'react-hook-form'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import FormCategoriesInput from '@TutorShared/components/fields/FormCategoriesInput'; import FormImageInput from '@TutorShared/components/fields/FormImageInput'; import FormInput from '@TutorShared/components/fields/FormInput'; @@ -14,10 +15,6 @@ import FormSelectUser, { type UserOption } from '@TutorShared/components/fields/ import FormTagsInput from '@TutorShared/components/fields/FormTagsInput'; import FormVideoInput from '@TutorShared/components/fields/FormVideoInput'; -import ScheduleOptions from '@CourseBuilderComponents/course-basic/ScheduleOptions'; - -import type { CourseDetailsResponse, CourseFormData } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import { tutorConfig } from '@TutorShared/config/config'; import { Addons, DateFormats, TutorRoles, VisibilityControlKeys } from '@TutorShared/config/constants'; import { Breakpoint, colorTokens, headerHeight, spacing } from '@TutorShared/config/styles'; @@ -27,6 +24,10 @@ import { useInstructorListQuery, useUserListQuery } from '@TutorShared/services/ import { styleUtils } from '@TutorShared/utils/style-utils'; import { formatBytes, isAddonEnabled } from '@TutorShared/utils/util'; +import ScheduleOptions from '@CourseBuilderComponents/course-basic/ScheduleOptions'; +import type { CourseDetailsResponse, CourseFormData } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + import CoursePricing from './CoursePricing'; const courseId = getCourseId(); diff --git a/assets/react/v3/entries/course-builder/components/course-basic/CoursePricing.tsx b/assets/src/js/v3/entries/course-builder/components/course-basic/CoursePricing.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/course-basic/CoursePricing.tsx rename to assets/src/js/v3/entries/course-builder/components/course-basic/CoursePricing.tsx index 763782b43c..11c33038ea 100644 --- a/assets/react/v3/entries/course-builder/components/course-basic/CoursePricing.tsx +++ b/assets/src/js/v3/entries/course-builder/components/course-basic/CoursePricing.tsx @@ -1,9 +1,9 @@ -import { css } from '@emotion/react'; -import { useIsFetching, useQueryClient } from '@tanstack/react-query'; -import { __ } from '@wordpress/i18n'; import { useEffect } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { useLocation, useNavigate } from 'react-router-dom'; +import { css } from '@emotion/react'; +import { useIsFetching, useQueryClient } from '@tanstack/react-query'; +import { __ } from '@wordpress/i18n'; import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; import FormInputWithContent from '@TutorShared/components/fields/FormInputWithContent'; @@ -11,15 +11,6 @@ import FormRadioGroup from '@TutorShared/components/fields/FormRadioGroup'; import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; import SubscriptionPreview from '@TutorShared/components/subscription/SubscriptionPreview'; -import { CourseBuilderRouteConfigs } from '@CourseBuilderConfig/route-configs'; -import { - type CourseDetailsResponse, - type CourseFormData, - type WcProduct, - useGetWcProductsQuery, - useWcProductDetailsQuery, -} from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import { tutorConfig } from '@TutorShared/config/config'; import { Addons } from '@TutorShared/config/constants'; import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; @@ -31,6 +22,16 @@ import { isDefined } from '@TutorShared/utils/types'; import { isAddonEnabled } from '@TutorShared/utils/util'; import { requiredRule } from '@TutorShared/utils/validation'; +import { CourseBuilderRouteConfigs } from '@CourseBuilderConfig/route-configs'; +import { + type CourseDetailsResponse, + type CourseFormData, + useGetWcProductsQuery, + useWcProductDetailsQuery, + type WcProduct, +} from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + const courseId = getCourseId(); const CoursePricing = () => { @@ -66,7 +67,7 @@ const CoursePricing = () => { const isTaxEnabled = !!tutorConfig.settings?.enable_tax; const enableIndividualTaxControl = !!tutorConfig.settings?.enable_individual_tax_control; const isTaxIncludedInPrice = !!tutorConfig.settings?.is_tax_included_in_price; - const monetizeBy = tutorConfig.settings?.monetize_by; + const monetizeBy = tutorConfig.settings?.monetize_by as 'tutor' | 'wc' | 'edd' | undefined; // prettier-ignore const taxAlertMessage = __('You have unchecked the Tax Collection option. Please review your pricing, as your tax settings currently indicate that prices are inclusive of tax.', 'tutor'); diff --git a/assets/react/v3/entries/course-builder/components/course-basic/CourseSettings.tsx b/assets/src/js/v3/entries/course-builder/components/course-basic/CourseSettings.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/course-basic/CourseSettings.tsx rename to assets/src/js/v3/entries/course-builder/components/course-basic/CourseSettings.tsx index b4deaf9c87..5a04957b7c 100644 --- a/assets/react/v3/entries/course-builder/components/course-basic/CourseSettings.tsx +++ b/assets/src/js/v3/entries/course-builder/components/course-basic/CourseSettings.tsx @@ -1,30 +1,31 @@ +import { useState } from 'react'; +import { Controller, useFormContext } from 'react-hook-form'; import { css } from '@emotion/react'; import { useIsFetching } from '@tanstack/react-query'; import { __ } from '@wordpress/i18n'; -import { useState } from 'react'; -import { Controller, useFormContext } from 'react-hook-form'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import Tabs, { type TabItem } from '@TutorShared/molecules/Tabs'; import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; import FormMultiSelectInput from '@TutorShared/components/fields/FormMultiSelectInput'; import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; import FormSwitch from '@TutorShared/components/fields/FormSwitch'; -import ContentDripSettings from '@CourseBuilderComponents/course-basic/ContentDripSettings'; -import EnrollmentSettings from '@CourseBuilderComponents/course-basic/EnrollmentSettings'; -import type { CourseFormData } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import { tutorConfig } from '@TutorShared/config/config'; import { Addons, CURRENT_VIEWPORT, VisibilityControlKeys } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import useVisibilityControl from '@TutorShared/hooks/useVisibilityControl'; +import Tabs, { type TabItem } from '@TutorShared/molecules/Tabs'; import type { Option } from '@TutorShared/utils/types'; import { isAddonEnabled } from '@TutorShared/utils/util'; +import ContentDripSettings from '@CourseBuilderComponents/course-basic/ContentDripSettings'; +import EnrollmentSettings from '@CourseBuilderComponents/course-basic/EnrollmentSettings'; +import type { CourseFormData } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + const courseId = getCourseId(); const CourseSettings = () => { diff --git a/assets/react/v3/entries/course-builder/components/course-basic/EnrollmentSettings.tsx b/assets/src/js/v3/entries/course-builder/components/course-basic/EnrollmentSettings.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/course-basic/EnrollmentSettings.tsx rename to assets/src/js/v3/entries/course-builder/components/course-basic/EnrollmentSettings.tsx index bd93c556ee..4ef514f162 100644 --- a/assets/react/v3/entries/course-builder/components/course-basic/EnrollmentSettings.tsx +++ b/assets/src/js/v3/entries/course-builder/components/course-basic/EnrollmentSettings.tsx @@ -1,19 +1,18 @@ +import { useState } from 'react'; +import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { css } from '@emotion/react'; import { useIsFetching } from '@tanstack/react-query'; import { __ } from '@wordpress/i18n'; import { isBefore, startOfDay } from 'date-fns'; -import { useState } from 'react'; -import { Controller, useFormContext, useWatch } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; + import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; import FormDateInput from '@TutorShared/components/fields/FormDateInput'; import FormInput from '@TutorShared/components/fields/FormInput'; import FormSwitch from '@TutorShared/components/fields/FormSwitch'; import FormTimeInput from '@TutorShared/components/fields/FormTimeInput'; -import { type CourseFormData } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import { tutorConfig } from '@TutorShared/config/config'; import { Addons, DateFormats } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; @@ -23,6 +22,9 @@ import { styleUtils } from '@TutorShared/utils/style-utils'; import { isAddonEnabled } from '@TutorShared/utils/util'; import { invalidDateRule, invalidTimeRule, requiredRule } from '@TutorShared/utils/validation'; +import { type CourseFormData } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + const courseId = getCourseId(); const EnrollmentSettings = () => { diff --git a/assets/react/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx b/assets/src/js/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx rename to assets/src/js/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx index 4a2c8d43d2..001ee999aa 100644 --- a/assets/react/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx +++ b/assets/src/js/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx @@ -1,23 +1,21 @@ +import { useEffect, useState } from 'react'; +import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { css } from '@emotion/react'; import { useIsFetching } from '@tanstack/react-query'; import { __, sprintf } from '@wordpress/i18n'; import { addHours, format, isBefore, isSameMinute, isValid, parseISO, startOfDay } from 'date-fns'; -import { useEffect, useState } from 'react'; -import { Controller, useFormContext, useWatch } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import ImageInput from '@TutorShared/atoms/ImageInput'; +import ProBadge from '@TutorShared/atoms/ProBadge'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import ProBadge from '@TutorShared/atoms/ProBadge'; import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; import FormDateInput from '@TutorShared/components/fields/FormDateInput'; import FormImageInput from '@TutorShared/components/fields/FormImageInput'; import FormSwitch from '@TutorShared/components/fields/FormSwitch'; import FormTimeInput from '@TutorShared/components/fields/FormTimeInput'; -import type { CourseFormData } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import { tutorConfig } from '@TutorShared/config/config'; import { DateFormats } from '@TutorShared/config/constants'; import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; @@ -28,6 +26,9 @@ import { styleUtils } from '@TutorShared/utils/style-utils'; import { formatBytes, noop } from '@TutorShared/utils/util'; import { invalidDateRule, invalidTimeRule } from '@TutorShared/utils/validation'; +import type { CourseFormData } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + const isTutorPro = !!tutorConfig.tutor_pro_url; const courseId = getCourseId(); diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/FormQuizLayoutSelect.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/FormQuizLayoutSelect.tsx new file mode 100644 index 0000000000..3f96deccf8 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/FormQuizLayoutSelect.tsx @@ -0,0 +1,214 @@ +import { type KeyboardEvent, type ReactNode, useCallback, useMemo, useRef } from 'react'; +import { css } from '@emotion/react'; + +import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; +import { typography } from '@TutorShared/config/typography'; +import type { FormControllerProps } from '@TutorShared/utils/form'; +import { styleUtils } from '@TutorShared/utils/style-utils'; +import type { OptionWithImage } from '@TutorShared/utils/types'; + +type LayoutOption = Omit, 'image'> & { + image: ReactNode; +}; + +interface FormQuizLayoutSelectProps extends FormControllerProps { + label: string; + description?: string; + options: LayoutOption[]; + disabled?: boolean; +} + +const FormQuizLayoutSelect = ({ + field, + label, + description, + options = [], + disabled = false, +}: FormQuizLayoutSelectProps) => { + const buttonRefs = useRef>([]); + const selectedIndex = useMemo( + () => options.findIndex((option) => option.value === field.value), + [field.value, options], + ); + const focusableIndex = selectedIndex >= 0 ? selectedIndex : 0; + + const getNextEnabledIndex = useCallback( + (startIndex: number, direction: 1 | -1) => { + if (!options.length) { + return -1; + } + + let nextIndex = startIndex; + + for (let i = 0; i < options.length; i++) { + nextIndex = (nextIndex + direction + options.length) % options.length; + if (!options[nextIndex]?.disabled) { + return nextIndex; + } + } + + return -1; + }, + [options], + ); + + const focusAndSelect = useCallback( + (index: number) => { + if (index < 0 || options[index]?.disabled) { + return; + } + + field.onChange(options[index].value); + buttonRefs.current[index]?.focus(); + }, + [field, options], + ); + + const handleKeyDown = useCallback( + (event: KeyboardEvent, index: number) => { + if (disabled) { + return; + } + + if (event.key === ' ' || event.key === 'Enter') { + event.preventDefault(); + focusAndSelect(index); + return; + } + + if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { + event.preventDefault(); + const nextIndex = getNextEnabledIndex(index, 1); + focusAndSelect(nextIndex); + return; + } + + if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { + event.preventDefault(); + const nextIndex = getNextEnabledIndex(index, -1); + focusAndSelect(nextIndex); + return; + } + }, + [disabled, focusAndSelect, getNextEnabledIndex], + ); + + return ( +
    +
    +
    {label}
    + {description &&
    {description}
    } +
    + +
    + {options.map((option, index) => { + const isActive = field.value === option.value; + + return ( + + ); + })} +
    +
    + ); +}; + +export default FormQuizLayoutSelect; + +const styles = { + wrapper: (disabled: boolean) => css` + ${styleUtils.display.flex('row')}; + justify-content: space-between; + align-items: flex-start; + gap: ${spacing[16]}; + width: 100%; + + ${disabled && + css` + opacity: 0.5; + `} + + ${Breakpoint.smallMobile} { + flex-direction: column; + align-items: stretch; + } + `, + content: css` + max-width: 220px; + + [data-title] { + ${typography.caption('regular')}; + color: ${colorTokens.text.title}; + margin: 0; + } + + [data-subtitle] { + ${typography.small()}; + color: ${colorTokens.text.subdued}; + margin-top: ${spacing[2]}; + } + `, + options: css` + ${styleUtils.display.flex('row')}; + gap: ${spacing[12]}; + + ${Breakpoint.smallMobile} { + width: 100%; + justify-content: space-between; + } + `, + item: (isActive: boolean) => css` + ${styleUtils.resetButton}; + ${styleUtils.display.flex('column')}; + align-items: center; + gap: ${spacing[8]}; + cursor: pointer; + color: ${colorTokens.icon.default}; + transition: color 0.2s ease; + + span { + ${typography.small('regular')}; + color: ${isActive ? colorTokens.text.title : colorTokens.text.subdued}; + text-align: center; + } + + &:focus-visible { + [data-preview] { + outline: 2px solid ${colorTokens.stroke.brand}; + color: #dae3fa; + } + } + + &:hover [data-preview] { + outline: 2px solid ${isActive ? colorTokens.stroke.brand : '#DAE3FA'}; + color: #dae3fa; + } + `, + preview: (isActive: boolean) => css` + width: 72px; + height: 92px; + border-radius: ${borderRadius[8]}; + outline: 2px solid ${isActive ? colorTokens.stroke.brand : '#DAE3FA'}; + color: ${isActive ? '#DAE3FA' : colorTokens.stroke.default}; + background-color: ${colorTokens.background.white}; + overflow: hidden; + `, +}; diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/GenerateQuizWithAi.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/GenerateQuizWithAi.tsx new file mode 100644 index 0000000000..dce3924738 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/GenerateQuizWithAi.tsx @@ -0,0 +1,575 @@ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { useQueryClient } from '@tanstack/react-query'; +import { __ } from '@wordpress/i18n'; + +import Button from '@TutorShared/atoms/Button'; +import MagicButton from '@TutorShared/atoms/MagicButton'; +import SVGIcon from '@TutorShared/atoms/SVGIcon'; +import { useToast } from '@TutorShared/atoms/Toast'; + +import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; +import FormInput from '@TutorShared/components/fields/FormInput'; +import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; +import { useModal } from '@TutorShared/components/modals/Modal'; +import ProIdentifierModal from '@TutorShared/components/modals/ProIdentifierModal'; +import SetupOpenAiModal from '@TutorShared/components/modals/SetupOpenAiModal'; + +import { tutorConfig } from '@TutorShared/config/config'; +import { borderRadius, Breakpoint, colorTokens, fontSize, spacing } from '@TutorShared/config/styles'; +import { typography } from '@TutorShared/config/typography'; +import Show from '@TutorShared/controls/Show'; +import { AnimationType } from '@TutorShared/hooks/useAnimation'; +import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; +import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; +import type { IconCollection } from '@TutorShared/icons/types'; +import Popover from '@TutorShared/molecules/Popover'; +import { useGenerateAiQuizQuestionsMutation } from '@TutorShared/services/magic-ai'; +import { styleUtils } from '@TutorShared/utils/style-utils'; +import { type Option, QuizDataStatus, type QuizQuestion, type QuizQuestionType } from '@TutorShared/utils/types'; +import { nanoid } from '@TutorShared/utils/util'; + +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { CourseTopic } from '@CourseBuilderServices/curriculum'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + +import generateCourse from '@SharedImages/pro-placeholders/generate-course.webp'; +import generateCourse2x from '@SharedImages/pro-placeholders/generate-course-2x.webp'; + +const courseId = getCourseId(); +const emptyTopicIds: string[] = []; + +type AiQuestionType = Extract; + +interface GenerateQuizWithAiForm { + topic_ids: string[]; + question_types: Record; + difficulty_level: string; + question_count: number | null; +} + +interface TopicSelectForm { + selected_topic_id: string | null; +} + +const questionTypeOptions: { + label: string; + value: AiQuestionType; + icon: IconCollection; +}[] = [ + { + label: __('True/False', 'tutor'), + value: 'true_false', + icon: 'quizTrueFalse', + }, + { + label: __('Multiple Choice', 'tutor'), + value: 'multiple_choice', + icon: 'quizMultiChoice', + }, + { + label: __('Short Answer', 'tutor'), + value: 'short_answer', + icon: 'quizShortAnswer', + }, + { + label: __('Open Ended/Essay', 'tutor'), + value: 'open_ended', + icon: 'quizEssay', + }, +]; + +const difficultyOptions = [ + { label: __('Easy', 'tutor'), value: 'easy', icon: 'difficultyEasy' }, + { label: __('Medium', 'tutor'), value: 'medium', icon: 'difficultyNormal' }, + { label: __('Hard', 'tutor'), value: 'hard', icon: 'difficultyHard' }, +]; + +const GenerateQuizWithAi = () => { + const queryClient = useQueryClient(); + const { topicId } = useQuizModalContext(); + const { showModal } = useModal(); + const { showToast } = useToast(); + const [isOpen, setIsOpen] = useState(false); + const triggerRef = useRef(null); + const isTutorPro = !!tutorConfig.tutor_pro_url; + const hasOpenAiAPIKey = tutorConfig.settings?.chatgpt_key_exist; + + const quizForm = useFormContext(); + const { append: appendQuestion } = useFieldArray({ + control: quizForm.control, + name: 'questions', + }); + + const generateMutation = useGenerateAiQuizQuestionsMutation(); + + const form = useFormWithGlobalError({ + defaultValues: { + topic_ids: [String(topicId)], + question_types: { + true_false: true, + multiple_choice: true, + short_answer: true, + open_ended: true, + }, + difficulty_level: 'medium', + question_count: 10, + }, + }); + const topicSelectForm = useFormWithGlobalError({ + defaultValues: { + selected_topic_id: null, + }, + }); + + const topics = queryClient.getQueryData(['Topic', courseId]) as CourseTopic[] | undefined; + const topicOptions = useMemo(() => { + const currentTopic = topics?.find((topic) => String(topic.id) === String(topicId)); + + return topics?.length + ? topics + : [ + { + id: topicId, + title: currentTopic?.title || __('Current Topic', 'tutor'), + summary: '', + contents: [], + }, + ]; + }, [topicId, topics]); + + const selectedTopicIds = form.watch('topic_ids') ?? emptyTopicIds; + const questionTypes = form.watch('question_types'); + const questionCount = Number(form.watch('question_count')); + const difficulty_level = form.watch('difficulty_level'); + const selectedQuestionTypes = questionTypeOptions + .filter((option) => questionTypes?.[option.value]) + .map((option) => option.value); + + const selectableTopicOptions = useMemo(() => { + return topicOptions + .filter((topic) => !selectedTopicIds.includes(String(topic.id))) + .map((topic) => ({ + label: topic.title, + value: String(topic.id), + })); + }, [selectedTopicIds, topicOptions]); + + const selectedTopics = topicOptions.filter((topic) => selectedTopicIds.includes(String(topic.id))); + + const handleTopicSelect = (option: Option) => { + const updatedTopicIds = Array.from(new Set([...form.getValues('topic_ids'), String(option.value)])); + + form.setValue('topic_ids', updatedTopicIds, { shouldDirty: true }); + topicSelectForm.setValue('selected_topic_id', null); + }; + + const handleRemoveTopic = (topicId: string) => { + form.setValue( + 'topic_ids', + form.getValues('topic_ids').filter((previousTopicId) => previousTopicId !== topicId), + { shouldDirty: true }, + ); + }; + + const handleGenerate = async (data: GenerateQuizWithAiForm) => { + try { + const payload = { + topic_ids: data.topic_ids.join(','), + question_types: questionTypeOptions + .filter((option) => data.question_types[option.value]) + .map((option) => option.value) + .join(','), + difficulty_level: data.difficulty_level, + number_of_questions: Number(data.question_count), + }; + + const response = await generateMutation.mutateAsync(payload); + const generatedQuestions = Array.isArray(response.data) ? response.data : []; + + const existingCount = quizForm.getValues('questions')?.length ?? 0; + + generatedQuestions.forEach((item, index) => { + const questionId = nanoid(); + const question = { + _data_status: QuizDataStatus.NEW, + question_id: questionId, + question_title: item.title, + question_description: item.description ?? '', + question_type: item.type, + question_mark: 1, + answer_explanation: '', + question_order: existingCount + index, + question_settings: { + question_type: item.type, + answer_required: false, + randomize_question: false, + question_mark: 1, + show_question_mark: true, + has_multiple_correct_answer: false, + is_image_matching: false, + }, + question_answers: (item.options ?? []).map((opt, i) => ({ + _data_status: QuizDataStatus.NEW, + is_saved: true, + answer_id: nanoid(), + belongs_question_id: questionId, + belongs_question_type: item.type, + answer_title: opt.name, + is_correct: opt.is_correct ? '1' : '0', + answer_order: i, + answer_two_gap_match: '', + answer_view_format: 'text', + })), + } satisfies QuizQuestion; + + appendQuestion(question); + }); + + showToast({ type: 'success', message: __('Questions generated successfully', 'tutor') }); + setIsOpen(false); + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } + }; + + const handleAiButtonClick = () => { + if (!isTutorPro) { + showModal({ + component: ProIdentifierModal, + props: { + image: generateCourse, + image2x: generateCourse2x, + }, + }); + } else if (!hasOpenAiAPIKey) { + showModal({ + component: SetupOpenAiModal, + props: { + image: generateCourse, + image2x: generateCourse2x, + }, + }); + } else { + setIsOpen(true); + } + }; + + useEffect(() => { + form.setValue('topic_ids', [String(topicId)]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [topicId]); + + return ( + <> +
    + +
    +
    +
    + ( + } + hideCaret + wrapperCss={styles.selectInputStyle} + disabled={selectableTopicOptions.length === 0} + /> + )} + /> + + 0}> +
    + {selectedTopics.map((topic) => ( +
    + {topic.title} + +
    + ))} +
    +     +
    +
    +
    +
    + {__('Question Types', 'tutor')} +
    + {questionTypeOptions.map((option) => ( + ( + + + {option.label} + + } + labelCss={styles.generateQuizQuestionTypeLabel} + /> + )} + /> + ))} +
    +
    + +
    + ( + + )} + /> + + ( + + )} + /> +
    + +
    + + + {generateMutation.isPending ? __('Generating...', 'tutor') : __('Generate Now', 'tutor')} + +
    + {__('AI will generate questions based on your selected topics and types.', 'tutor')} +
    +
    +
    +
    + + + + ); +}; + +export default GenerateQuizWithAi; + +const styles = { + generateQuizHeader: css` + display: flex; + align-items: center; + justify-content: space-between; + gap: ${spacing[8]}; + padding: ${spacing[12]} ${spacing[16]}; + border-bottom: 1px solid ${colorTokens.stroke.divider}; + `, + generateQuizTitleWrapper: css` + display: flex; + align-items: center; + gap: ${spacing[8]}; + `, + generateQuizTitle: css` + ${typography.body('medium')}; + `, + generateQuizBody: css` + display: grid; + grid-template-columns: 1fr 360px; + gap: ${spacing[32]}; + padding: ${spacing[16]} ${spacing[20]}; + + ${Breakpoint.mobile} { + grid-template-columns: 1fr; + max-height: calc(100vh - 62px); + overflow: auto; + } + `, + selectInputStyle: css` + padding-left: ${spacing[32]}!important; + `, + generateQuizBodyRight: css` + position: relative; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -${spacing[16]}; + width: 1px; + height: 100%; + background-color: ${colorTokens.stroke.divider}; + + ${Breakpoint.mobile} { + display: none; + } + } + `, + generateQuizFieldGroup: css` + display: flex; + flex-direction: column; + gap: ${spacing[8]}; + `, + generateQuizFieldGroupTypes: css` + margin-bottom: ${spacing[40]}; + `, + generateQuizLabel: css` + ${typography.caption('medium')}; + color: ${colorTokens.text.title}; + `, + generateQuizCheckboxList: css` + display: flex; + flex-direction: column; + gap: ${spacing[10]}; + `, + generateQuizQuestionTypeLabelText: css` + display: inline-flex; + align-items: center; + gap: ${spacing[8]}; + min-width: 0; + + svg { + flex: 0 0 auto; + } + `, + generateQuizQuestionTypeLabel: css` + display: flex; + align-items: center; + `, + selectedTopicList: css` + display: flex; + flex-direction: column; + gap: ${spacing[4]}; + max-height: 340px; + overflow-y: auto; + `, + selectedTopic: css` + display: flex; + align-items: center; + justify-content: space-between; + gap: ${spacing[8]}; + min-height: 28px; + border-radius: ${borderRadius[4]}; + padding: ${spacing[4]} ${spacing[8]}; + color: ${colorTokens.text.title}; + background-color: ${colorTokens.action.secondary.gray}; + + span { + ${typography.small('medium')}; + font-size: ${fontSize[12]}; + ${styleUtils.text.ellipsis(1)}; + } + `, + removeTopicButton: css` + ${styleUtils.crossButton}; + background-color: transparent; + width: 12px; + height: 12px; + flex: 0 0 auto; + + svg { + color: ${colorTokens.text.primary}; + } + `, + generateQuizButtonWrapper: css` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: ${spacing[6]}; + margin-top: ${spacing[20]}; + + button { + height: 40px; + + span { + gap: ${spacing[4]}; + } + } + `, + generateQuizButtonHelperText: css` + ${typography.tiny('regular')}; + color: ${colorTokens.text.hints}; + `, +}; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/Question.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/Question.tsx similarity index 98% rename from assets/react/v3/entries/course-builder/components/curriculum/Question.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/Question.tsx index ab233c1cfc..fa52c40993 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/Question.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/Question.tsx @@ -1,27 +1,27 @@ +import { useEffect, useRef, useState } from 'react'; +import { useFormContext } from 'react-hook-form'; import { useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { useEffect, useRef, useState } from 'react'; -import { useFormContext } from 'react-hook-form'; import ProBadge from '@TutorShared/atoms/ProBadge'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import ThreeDots from '@TutorShared/molecules/ThreeDots'; - -import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; -import { type QuizForm } from '@CourseBuilderServices/quiz'; import { tutorConfig } from '@TutorShared/config/config'; import { borderRadius, Breakpoint, colorTokens, shadow, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import { AnimationType } from '@TutorShared/hooks/useAnimation'; import { type IconCollection } from '@TutorShared/icons/types'; +import ThreeDots from '@TutorShared/molecules/ThreeDots'; import { animateLayoutChanges } from '@TutorShared/utils/dndkit'; import { validateQuizQuestion } from '@TutorShared/utils/quiz'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type QuizQuestion, type QuizQuestionType } from '@TutorShared/utils/types'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import { type QuizForm } from '@CourseBuilderServices/quiz'; + interface QuestionProps { question: QuizQuestion; index: number; @@ -39,6 +39,11 @@ const questionTypeIconMap: Record { const { activeQuestionIndex, activeQuestionId, validationError, setValidationError } = useQuizModalContext(); const form = useFormContext(); + const { showModal, closeModal } = useModal(); + const activeQuestion = form.watch(`questions.${activeQuestionIndex}` as 'questions.0'); const activeQuestionType = form.watch(`questions.${activeQuestionIndex}.question_type`) as QuestionTypes; const activeDataStatus = form.watch(`questions.${activeQuestionIndex}._data_status`); + const handlePreview = useCallback(() => { + showModal({ + component: QuestionPreviewModal, + props: { + question: activeQuestion, + onClose: () => closeModal(), + }, + }); + }, [activeQuestion, showModal, closeModal]); + + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.altKey && event.code === 'KeyP') { + event.preventDefault(); + handlePreview(); + } + }; + + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [handlePreview]); + if (!activeQuestionId) { return

    {__('Create/Select a question to view details', 'tutor')}

    ; } @@ -75,17 +126,33 @@ const QuestionConditions = () => {
    {__('Question Type', 'tutor')}
    -
    - - {activeQuestionType ? questionTypes[activeQuestionType as keyof typeof questionTypes].label : ''} +
    +
    + + + {activeQuestionType ? questionTypes[activeQuestionType as keyof typeof questionTypes].label : ''} + +
    + + + +
    @@ -269,13 +336,19 @@ const styles = { padding: ${spacing[12]} ${spacing[32]} ${spacing[24]} ${spacing[24]}; ${typography.caption('medium')}; `, - questionTypeWrapper: css` ${styleUtils.display.flex('column')}; padding: ${spacing[8]} ${spacing[32]} ${spacing[24]} ${spacing[24]}; gap: ${spacing[10]}; border-bottom: 1px solid ${colorTokens.stroke.divider}; `, + questionTypeRow: css` + ${styleUtils.display.flex('row')}; + align-items: center; + gap: ${spacing[10]}; + justify-content: space-between; + width: 100%; + `, questionType: css` display: flex; align-items: center; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/QuestionForm.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/QuestionForm.tsx similarity index 93% rename from assets/react/v3/entries/course-builder/components/curriculum/QuestionForm.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/QuestionForm.tsx index a04f32f0ff..0ff7b2b880 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/QuestionForm.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/QuestionForm.tsx @@ -1,7 +1,7 @@ -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; import { useEffect, useRef } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; import Alert from '@TutorShared/atoms/Alert'; @@ -9,28 +9,32 @@ import FormAnswerExplanation from '@TutorShared/components/fields/quiz/FormAnswe import FormQuestionDescription from '@TutorShared/components/fields/quiz/FormQuestionDescription'; import FormQuestionTitle from '@TutorShared/components/fields/quiz/FormQuestionTitle'; -import FillInTheBlanks from '@CourseBuilderComponents/curriculum/question-types/FillinTheBlanks'; -import ImageAnswering from '@CourseBuilderComponents/curriculum/question-types/ImageAnswering'; -import Matching from '@CourseBuilderComponents/curriculum/question-types/Matching'; -import MultipleChoiceAndOrdering from '@CourseBuilderComponents/curriculum/question-types/MultipleChoiceAndOrdering'; -import OpenEndedAndShortAnswer from '@CourseBuilderComponents/curriculum/question-types/OpenEndedAndShortAnswer'; -import TrueFalse from '@CourseBuilderComponents/curriculum/question-types/TrueFalse'; -import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; - import { tutorConfig } from '@TutorShared/config/config'; import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { usePrevious } from '@TutorShared/hooks/usePrevious'; +import { calculateQuizDataStatus } from '@TutorShared/utils/quiz'; import { styleUtils } from '@TutorShared/utils/style-utils'; +import { QuizDataStatus, type QuizQuestionType } from '@TutorShared/utils/types'; import CourseBuilderInjectionSlot from '@CourseBuilderComponents/CourseBuilderSlot'; +import Coordinates from '@CourseBuilderComponents/curriculum/question-types/Coordinates'; +import DrawImage from '@CourseBuilderComponents/curriculum/question-types/DrawImage'; +import FillInTheBlanks from '@CourseBuilderComponents/curriculum/question-types/FillinTheBlanks'; +import ImageAnswering from '@CourseBuilderComponents/curriculum/question-types/ImageAnswering'; +import Matching from '@CourseBuilderComponents/curriculum/question-types/Matching'; +import MultipleChoiceAndOrdering from '@CourseBuilderComponents/curriculum/question-types/MultipleChoiceAndOrdering'; +import OpenEndedAndShortAnswer from '@CourseBuilderComponents/curriculum/question-types/OpenEndedAndShortAnswer'; +import PinImage from '@CourseBuilderComponents/curriculum/question-types/PinImage'; +import Puzzle from '@CourseBuilderComponents/curriculum/question-types/Puzzle'; +import Scale from '@CourseBuilderComponents/curriculum/question-types/Scale'; +import TrueFalse from '@CourseBuilderComponents/curriculum/question-types/TrueFalse'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; import { type QuizForm } from '@CourseBuilderServices/quiz'; -import { calculateQuizDataStatus } from '@TutorShared/utils/quiz'; -import { QuizDataStatus, type QuizQuestionType } from '@TutorShared/utils/types'; -import emptyStateImage2x from '@SharedImages/quiz-empty-state-2x.webp'; import emptyStateImage from '@SharedImages/quiz-empty-state.webp'; +import emptyStateImage2x from '@SharedImages/quiz-empty-state-2x.webp'; const isTutorPro = !!tutorConfig.tutor_pro_url; @@ -54,6 +58,11 @@ const QuestionForm = () => { matching: , image_answering: , ordering: , + draw_image: , + scale: , + pin_image: , + coordinates: , + puzzle: , } as const; useEffect(() => { diff --git a/assets/react/v3/entries/course-builder/components/curriculum/QuestionList.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/QuestionList.tsx similarity index 55% rename from assets/react/v3/entries/course-builder/components/curriculum/QuestionList.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/QuestionList.tsx index 1bef032468..dff0c810b5 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/QuestionList.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/QuestionList.tsx @@ -1,3 +1,6 @@ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { useFieldArray, useFormContext } from 'react-hook-form'; import { closestCenter, DndContext, @@ -13,22 +16,15 @@ import { restrictToWindowEdges } from '@dnd-kit/modifiers'; import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { css } from '@emotion/react'; import { __, sprintf } from '@wordpress/i18n'; -import { useEffect, useMemo, useRef, useState } from 'react'; -import { createPortal } from 'react-dom'; -import { useFieldArray, useFormContext } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import ProBadge from '@TutorShared/atoms/ProBadge'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import Popover from '@TutorShared/molecules/Popover'; +import Tooltip from '@TutorShared/atoms/Tooltip'; -import Question from '@CourseBuilderComponents/curriculum/Question'; import H5PContentListModal from '@TutorShared/components/modals/H5PContentListModal'; import { useModal } from '@TutorShared/components/modals/Modal'; -import CollectionListModal from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; -import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; -import { type QuizForm } from '@CourseBuilderServices/quiz'; import { tutorConfig } from '@TutorShared/config/config'; import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; @@ -38,6 +34,7 @@ import Show from '@TutorShared/controls/Show'; import { AnimationType } from '@TutorShared/hooks/useAnimation'; import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; import { type IconCollection } from '@TutorShared/icons/types'; +import Popover from '@TutorShared/molecules/Popover'; import { convertedQuestion, validateQuizQuestion } from '@TutorShared/utils/quiz'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { @@ -49,12 +46,21 @@ import { } from '@TutorShared/utils/types'; import { isAddonEnabled, nanoid, noop } from '@TutorShared/utils/util'; -const questionTypeOptions: { +import GenerateQuizWithAi from '@CourseBuilderComponents/curriculum/GenerateQuizWithAi'; +import Question from '@CourseBuilderComponents/curriculum/Question'; +import CollectionListModal from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import { type QuizForm } from '@CourseBuilderServices/quiz'; + +interface QuestionTypeOption { label: string; value: QuizQuestionType; icon: IconCollection; isPro: boolean; -}[] = [ + isLegacyDisabled?: boolean; +} + +const basicQuestionTypeOptions: QuestionTypeOption[] = [ { label: __('True/False', 'tutor'), value: 'true_false', @@ -85,6 +91,9 @@ const questionTypeOptions: { icon: 'quizShortAnswer', isPro: true, }, +]; + +const interactiveQuestionTypeOptions: QuestionTypeOption[] = [ { label: __('Matching', 'tutor'), value: 'matching', @@ -103,11 +112,52 @@ const questionTypeOptions: { icon: 'quizOrdering', isPro: true, }, + { + label: __('Mark in the image', 'tutor'), + value: 'draw_image', + icon: 'quizMarkInTheImage', + isPro: true, + }, + { + label: __('Range', 'tutor'), + value: 'scale', + icon: 'quizRange', + isPro: true, + }, + { + label: __('Pin', 'tutor'), + value: 'pin_image', + icon: 'quizPin', + isPro: true, + }, + { + label: __('Graph', 'tutor'), + value: 'coordinates', + icon: 'quizGraph', + isPro: true, + }, + { + label: __('Puzzle', 'tutor'), + value: 'puzzle', + icon: 'quizPuzzle', + isPro: true, + }, ]; const isTutorPro = !!tutorConfig.tutor_pro_url; const QuestionList = ({ isEditing }: { isEditing: boolean }) => { + const questionTypeOptionsForUi = useMemo(() => { + const legacyExcluded: QuizQuestionType[] = ['draw_image', 'pin_image', 'scale', 'coordinates', 'puzzle']; + const markLegacyDisabled = (options: QuestionTypeOption[]) => + options.map((o) => + tutorConfig.is_legacy_learning_mode && legacyExcluded.includes(o.value) ? { ...o, isLegacyDisabled: true } : o, + ); + return { + basic: markLegacyDisabled(basicQuestionTypeOptions), + interactive: markLegacyDisabled(interactiveQuestionTypeOptions), + }; + }, []); const [activeSortId, setActiveSortId] = useState(null); const [isOpen, setIsOpen] = useState(false); const questionListRef = useRef(null); @@ -208,7 +258,95 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => { is_correct: '0', }, ] - : [], + : questionType === 'draw_image' + ? [ + { + _data_status: QuizDataStatus.NEW, + is_saved: false, + answer_id: nanoid(), + answer_title: '', + belongs_question_id: questionId, + belongs_question_type: 'draw_image', + answer_two_gap_match: '', + answer_view_format: 'draw_image', + answer_order: 0, + is_correct: '1', + }, + ] + : questionType === 'coordinates' + ? [ + { + _data_status: QuizDataStatus.NEW, + is_saved: false, + answer_id: nanoid(), + answer_title: '', + belongs_question_id: questionId, + belongs_question_type: 'coordinates', + answer_two_gap_match: '', + answer_view_format: 'coordinates', + answer_order: 0, + is_correct: '1', + }, + ] + : questionType === 'pin_image' + ? [ + { + _data_status: QuizDataStatus.NEW, + is_saved: true, + answer_id: nanoid(), + answer_title: '', + belongs_question_id: questionId, + belongs_question_type: 'pin_image', + answer_two_gap_match: '', + answer_view_format: 'pin_image', + answer_order: 0, + is_correct: '1', + }, + ] + : questionType === 'scale' + ? [ + { + _data_status: QuizDataStatus.NEW, + // Keep the initial default scale config valid for immediate save flow. + is_saved: true, + answer_id: nanoid(), + answer_title: '', + belongs_question_id: questionId, + belongs_question_type: 'scale', + answer_two_gap_match: JSON.stringify({ + value: 50, + config: { + min: 0, + max: 100, + step: 1, + defaultValue: 50, + pxPerUnit: 10, + labelEvery: 10, + minorTickEvery: 5, + precision: 0, + }, + }), + answer_view_format: 'scale', + answer_order: 0, + is_correct: '1', + }, + ] + : questionType === 'puzzle' + ? [ + { + _data_status: QuizDataStatus.NEW, + is_saved: true, + answer_id: nanoid(), + answer_title: '', + belongs_question_id: questionId, + belongs_question_type: 'puzzle', + answer_two_gap_match: '', + answer_view_format: 'puzzle', + answer_order: 0, + is_correct: '1', + }, + ] + : [], answer_explanation: '', question_mark: 1, question_order: questionFields.length + 1, @@ -218,6 +356,15 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => { question_type: questionType, randomize_question: false, show_question_mark: false, + ...(questionType === 'draw_image' && { + draw_image_threshold_percent: 70, + }), + ...(questionType === 'puzzle' && { + puzzle_grid_size: 4, + }), + ...(questionType === 'coordinates' && { + coordinates_axis_range: 10, + }), }, } as QuizQuestion); setValidationError(null); @@ -285,6 +432,27 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => { }; const handleDeleteQuestion = (index: number, question: QuizQuestion) => { + if (question._data_status === QuizDataStatus.NEW) { + const isMaskQuestionType = + question.question_type === 'draw_image' || + question.question_type === 'pin_image' || + question.question_type === 'puzzle'; + + if (isMaskQuestionType) { + const tempMaskValues = (question.question_answers || []) + .flatMap((answer) => [answer.answer_two_gap_match, answer.image_url]) + .map((value) => (typeof value === 'string' ? value.trim() : '')) + .filter(Boolean); + + if (tempMaskValues.length > 0) { + form.setValue('deleted_temp_mask_values', [ + ...(form.getValues('deleted_temp_mask_values') || []), + ...tempMaskValues, + ]); + } + } + } + removeQuestion(index); if (activeQuestionIndex === index) { @@ -325,30 +493,37 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => {
    {__('Questions', 'tutor')} - + }); + } else { + setIsOpen(true); + } + }} + /> +
    @@ -408,7 +583,7 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => { { isOpen={isOpen} closePopover={() => setIsOpen(false)} animationType={AnimationType.slideUp} - arrow={true} + border={true} >
    - {__('Select Question Type', 'tutor')} - {questionTypeOptions.map((option) => ( - +
    + {__('Interactive', 'tutor')} + {questionTypeOptionsForUi.interactive.map((option) => ( + { - handleAddQuestion(option.value as QuizQuestionType); - }} + when={option.isPro && !isTutorPro} + fallback={ + + } > - - {option.label} - - } - > - - - ))} + + + ))} +
    + +
    + {__('Basic', 'tutor')} + {questionTypeOptionsForUi.basic.map((option) => ( + { + handleAddQuestion(option.value as QuizQuestionType); + }} + > + +
    + {option.label} + + + + + + + +
    + + } + > + +     + ))} +
    +
    + div { + flex-shrink: 0; + } + `, emptyQuestionText: css` ${typography.small()}; color: ${colorTokens.text.subdued}; padding: ${spacing[8]} ${spacing[16]} ${spacing[8]} ${spacing[28]}; `, + legacyInfoIcon: css` + display: inline-flex; + align-items: center; + flex-shrink: 0; + color: ${colorTokens.icon.brand}; + `, }; diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/QuizSettings.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/QuizSettings.tsx new file mode 100644 index 0000000000..0c81351c69 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/QuizSettings.tsx @@ -0,0 +1,1061 @@ +import { Controller, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { useQueryClient } from '@tanstack/react-query'; +import { __, sprintf } from '@wordpress/i18n'; + +import SVGIcon from '@TutorShared/atoms/SVGIcon'; +import Tooltip from '@TutorShared/atoms/Tooltip'; + +import FormCheckbox from '@TutorShared/components/fields/FormCheckbox'; +import FormDateInput from '@TutorShared/components/fields/FormDateInput'; +import FormInput from '@TutorShared/components/fields/FormInput'; +import FormInputWithContent from '@TutorShared/components/fields/FormInputWithContent'; +import FormInputWithPresets from '@TutorShared/components/fields/FormInputWithPresets'; +import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; +import FormSwitch from '@TutorShared/components/fields/FormSwitch'; +import FormTopicPrerequisites from '@TutorShared/components/fields/FormTopicPrerequisites'; + +import { tutorConfig } from '@TutorShared/config/config'; +import { Addons } from '@TutorShared/config/constants'; +import { borderRadius, Breakpoint, colorTokens, spacing, zIndex } from '@TutorShared/config/styles'; +import { typography } from '@TutorShared/config/typography'; +import Show from '@TutorShared/controls/Show'; +import { type IconCollection } from '@TutorShared/icons/types'; +import { styleUtils } from '@TutorShared/utils/style-utils'; +import { isAddonEnabled } from '@TutorShared/utils/util'; +import { requiredRule } from '@TutorShared/utils/validation'; + +import CourseBuilderInjectionSlot from '@CourseBuilderComponents/CourseBuilderSlot'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { ContentDripType } from '@CourseBuilderServices/course'; +import type { CourseTopic } from '@CourseBuilderServices/curriculum'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + +import QuizFullPageSvg from '@SharedImages/quiz-fullpage.svg'; +import QuizSingleLayoutSvg from '@SharedImages/quiz-single-question.svg'; + +import FormQuizLayoutSelect from './FormQuizLayoutSelect'; + +const courseId = getCourseId(); + +interface QuizSettingsProps { + contentDripType: ContentDripType; +} + +const getTimeInSeconds = (value: number, type: QuizForm['quiz_option']['time_limit']['time_type']) => { + const timeUnitMap = { + seconds: 1, + minutes: 60, + hours: 60 * 60, + days: 60 * 60 * 24, + weeks: 60 * 60 * 24 * 7, + } as const; + + return value * timeUnitMap[type]; +}; + +const formatTimePerQuestion = (valueInSeconds: number) => { + if (valueInSeconds < 60) { + return sprintf( + // translators: %s is a second count. + __('%ss per question', 'tutor'), + valueInSeconds, + ); + } + + if (valueInSeconds < 60 * 60) { + return sprintf( + // translators: %s is a minute count. + __('%sm per question', 'tutor'), + Math.round((valueInSeconds / 60) * 10) / 10, + ); + } + + return sprintf( + // translators: %s is an hour count. + __('%sh per question', 'tutor'), + Math.round((valueInSeconds / (60 * 60)) * 10) / 10, + ); +}; + +const getPaginationTypeIcon = (type: string): IconCollection => { + switch (type) { + case 'shape': + return 'quizShape'; + case 'number': + return 'quizNumber'; + case 'radio': + return 'quizRadio'; + default: + return 'quizShape'; + } +}; + +const QuizSettings = ({ contentDripType }: QuizSettingsProps) => { + const { quizId, contentType } = useQuizModalContext(); + const form = useFormContext(); + const isLegacyLearningMode = tutorConfig.settings?.learning_mode === 'legacy'; + + const questions = form.watch('questions'); + const questionsCount = questions.length; + const hasOpenEndedQuestions = questions.some((question) => question.question_type === 'open_ended'); + const hasShortAnswerQuestions = questions.some((question) => question.question_type === 'short_answer'); + const hasAttemptsLimit = form.watch('quiz_option.limit_attempts_allowed'); + const showPassRequired = + isAddonEnabled(Addons.CONTENT_DRIP) && contentDripType === 'unlock_sequentially' && hasAttemptsLimit; + const hasQuestionLimit = form.watch('quiz_option.limit_questions_to_answer'); + const hasTimeLimit = form.watch('quiz_option.enable_time_limit'); + const questionsOrder = form.watch('quiz_option.questions_order'); + const availableQuestionInPool = hasQuestionLimit + ? Math.min(Number(form.watch('quiz_option.max_questions_for_answer')), questionsCount) || questionsCount + : questionsCount; + const usedQuestionCountPercentage = (availableQuestionInPool / questionsCount) * 100; + const orderedQuestions = (() => { + if (questionsOrder === 'rand') { + return questions; + } + + if (questionsOrder === 'sorting') { + return questions; + } + + if (questionsOrder === 'asc') { + return [...questions].sort((a, b) => Number(a.question_id) - Number(b.question_id)); + } + + if (questionsOrder === 'desc') { + return [...questions].sort((a, b) => Number(b.question_id) - Number(a.question_id)); + } + + return questions; + })(); + const questionsForStats = hasQuestionLimit ? orderedQuestions.slice(0, availableQuestionInPool) : orderedQuestions; + const questionCountForStats = questionsForStats.length; + const passingGrade = Number(form.watch('quiz_option.passing_grade')); + const totalMarksForStats = questionsForStats.reduce( + (sum, question) => sum + Number(question.question_settings.question_mark || 0), + 0, + ); + const requiredPassMarks = Math.ceil((passingGrade / 100) * totalMarksForStats); + const requiredCorrectAnswers = (() => { + if (questionsOrder === 'rand') { + return '-'; + } + + if (requiredPassMarks <= 0) { + return 0; + } + + let accumulatedMarks = 0; + for (const [index, question] of questionsForStats.entries()) { + accumulatedMarks += Number(question.question_settings.question_mark || 0); + if (accumulatedMarks >= requiredPassMarks) { + return index + 1; + } + } + + return questionCountForStats; + })(); + const timeLimitValue = Number(form.watch('quiz_option.time_limit.time_value')); + const timeLimitType = form.watch('quiz_option.time_limit.time_type'); + const timePerQuestionInSeconds = + questionCountForStats > 0 ? Math.floor(getTimeInSeconds(timeLimitValue, timeLimitType) / questionCountForStats) : 0; + + const queryClient = useQueryClient(); + + const topics = queryClient.getQueryData(['Topic', courseId]) as CourseTopic[]; + + return ( +
    +
    +
    +
    {__('Quiz scope', 'tutor')}
    + +
    + { + if (value > 100) { + return __('Passing grade cannot be greater than 100', 'tutor'); + } + + if (value < 0) { + return __('Passing grade cannot be less than 0', 'tutor'); + } + + return true; + }, + }} + render={(controllerProps) => ( + + )} + /> + + ( + + )} + /> + +
    + +
    + ( + + )} + /> + + + { + if (value >= 0) { + return true; + } + return __('Allowed attempts must be greater than or equal to 0', 'tutor'); + }, + }} + render={(controllerProps) => ( + + )} + /> + +
    + + +
    + ( + + )} + /> + + + { + if (value <= 0) { + return __('Question limit must be greater than 0', 'tutor'); + } + return true; + }, + }} + control={form.control} + render={(controllerProps) => ( + + )} + /> + +
    + + + ( + + )} + /> + +     +
    + +
    {__('Timing', 'tutor')}
    + +
    + +
    + ( + + )} + /> + +
    + { + if (value <= 0) { + return __('Time limit must be greater than 0', 'tutor'); + } + return true; + }, + }} + render={(controllerProps) => ( + + )} + /> + + ( + + )} + /> +
    +     +
    + + + ( + + )} + /> + + +
    +     + +
    + ( + + )} + /> + + +
    +
    {__('After', 'tutor')}
    + ( + + )} + /> +
    +     +
    +
    +
    + +
    +
    {__('Navigation & Display', 'tutor')}
    + +
    + ( + , + }, + { + label: __('Full Page', 'tutor'), + value: 'question_below_each_other', + image: , + }, + ]} + /> + )} + /> + + +
    + +
    + ( + + )} + /> + + +
    + +
    + ( + + )} + /> +     +
    + +
    + ( + + )} + /> + + +
    +
    {__('For', 'tutor')}
    + ( + + )} + /> +
    +     +
    + +
    + + + ( + + )} + /> + + + ( + + )} + /> +     +
    +
    +     + + +
    + +
    {__('Character Limits', 'tutor')}
    + +
    + +
    + ( + + )} + /> +
    +     + + +
    + ( + + )} + /> +
    +     +
    +     + + + +
    + + {__('Unlock Date', 'tutor')} + + + +
    + +
    + ( + + )} + /> +
    +     + + +
    + + {__('Prerequisites', 'tutor')} + + + +
    + +
    + ( + { + topics.push({ + ...topic, + contents: topic.contents.filter((content) => String(content.ID) !== String(quizId)), + }); + + return topics; + }, [] as CourseTopic[]) || [] + } + isSearchable + /> + )} + /> +
    +     + + +
    + + {__('Available after days', 'tutor')} + + + +
    + +
    + ( + + )} + /> +
    +     +     +
    +     + + +
    + +
    +
    +
    +
    +
    {__('Total questions in pool', 'tutor')}
    +
    + {questions.length} + {__('Q', 'tutor')} +
    +
    + + + +
    +
    {__('Available to answer', 'tutor')}
    +
    + {availableQuestionInPool} + {__('Q', 'tutor')} +
    +
    +
    + +
    +
    +
    + {sprintf( + // translators: %1$s is the number of available questions, %2$s is the total number of questions. + __('Students will have %1$s out of %2$s questions available to answer.', 'tutor'), + availableQuestionInPool, + questionsCount, + )} +
    +
    + +
    + +
    +
    + {form.watch('quiz_option.time_limit.time_value')} {form.watch('quiz_option.time_limit.time_type')} +
    +
    {__('Time limit', 'tutor')}
    + +
    + + {timePerQuestionInSeconds > 0 ? formatTimePerQuestion(timePerQuestionInSeconds) : __('N/A', 'tutor')} +
    +
    +     + +
    +
    + {form.watch('quiz_option.passing_grade')} + {__('%', 'tutor')} +
    +
    {__('Passing grade', 'tutor')}
    + +
    + + {questionsOrder === 'rand' + ? '-' + : sprintf( + // translators: %1$s is the number of required correct answers, %2$s is total available questions. + __('%1$s of %2$s correct', 'tutor'), + requiredCorrectAnswers, + questionCountForStats, + )} +
    +
    +
    +
    +
    +
    + ); +}; + +export default QuizSettings; + +const styles = { + maxWidth: (width: string) => css` + max-width: ${width}; + `, + minWidth: (width: string) => css` + min-width: ${width}; + `, + justifyContent: (justifyContent: string) => css` + justify-content: ${justifyContent}; + `, + width: (width: string) => css` + width: ${width}; + `, + settings: css` + display: grid; + grid-template-columns: 1.5fr 1fr; + gap: ${spacing[12]}; + + ${Breakpoint.smallMobile} { + grid-template-columns: 1fr; + } + `, + left: css` + ${styleUtils.display.flex('column')}; + gap: ${spacing[8]}; + `, + overview: css` + ${styleUtils.display.flex('column')}; + gap: ${spacing[8]}; + position: sticky; + top: 0; + align-self: start; + border-radius: ${borderRadius[12]}; + border: 1px solid ${colorTokens.stroke.divider}; + padding: ${spacing[16]}; + background-color: ${colorTokens.background.white}; + + ${Breakpoint.smallMobile} { + position: static; + } + `, + questionPool: css` + ${styleUtils.display.flex()}; + align-items: center; + justify-content: space-between; + gap: ${spacing[8]}; + + svg { + margin-top: ${spacing[20]}; + color: ${colorTokens.icon.default}; + } + + [data-question-pool] { + ${styleUtils.display.flex('column')}; + gap: ${spacing[4]}; + + [data-question-pool-label] { + ${typography.tiny()}; + color: ${colorTokens.text.subdued}; + } + + [data-question-count] { + ${typography.heading5('medium')}; + color: ${colorTokens.text.subdued}; + + span:last-of-type { + ${typography.tiny()}; + margin-left: ${spacing[2]}; + color: ${colorTokens.text.hints}; + } + + &[data-available-count] { + color: ${colorTokens.text.success}; + } + } + } + `, + questionPoolBar: (width: string) => css` + ${styleUtils.display.flex('column')}; + ${typography.tiny()}; + color: ${colorTokens.text.subdued}; + gap: ${spacing[4]}; + + [data-question-pool-bar] { + position: relative; + width: 100%; + height: 5px; + background-color: ${colorTokens.action.secondary.gray}; + border-radius: ${borderRadius[50]}; + box-shadow: 0px 0px 1.75px 0px #00000029 inset; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: ${width}; + height: 100%; + background-color: ${colorTokens.action.primary.default}; + border-radius: ${borderRadius[50]}; + } + } + `, + infoCardWrapper: css` + display: grid; + grid-template-columns: 1fr 1fr; + gap: ${spacing[8]}; + `, + infoCard: css` + ${styleUtils.display.flex('column')}; + gap: ${spacing[4]}; + padding: ${spacing[8]}; + border-radius: ${borderRadius[12]}; + background-color: ${colorTokens.surface.courseBuilder}; + height: 106px; + + [data-title] { + ${typography.caption('medium')}; + color: ${colorTokens.text.title}; + } + + [data-subtitle] { + ${typography.tiny()}; + color: ${colorTokens.text.subdued}; + } + + [data-footer] { + ${styleUtils.display.flex()}; + align-items: center; + ${typography.tiny()}; + color: ${colorTokens.text.subdued}; + margin-top: auto; + + svg { + color: ${colorTokens.icon.default}; + margin-right: ${spacing[4]}; + } + } + `, + card: css` + ${styleUtils.display.flex('column')}; + gap: ${spacing[8]}; + border-radius: ${borderRadius[12]}; + border: 1px solid ${colorTokens.stroke.divider}; + padding: ${spacing[12]}; + background-color: ${colorTokens.background.white}; + + h5 { + ${typography.caption()}; + color: ${colorTokens.text.title}; + } + + hr { + width: 100%; + background-color: ${colorTokens.stroke.divider}; + } + `, + innerCard: css` + ${styleUtils.display.flex('column')}; + gap: ${spacing[8]}; + padding: ${spacing[12]}; + border-radius: ${borderRadius[8]}; + background-color: ${colorTokens.surface.courseBuilder}; + `, + inlineForm: ({ withPrefix, minHeight }: { withPrefix?: boolean; minHeight?: string } = {}) => css` + ${styleUtils.display.flex('row')}; + width: 100%; + align-items: center; + justify-content: space-between; + gap: ${spacing[8]}; + ${minHeight && + css` + min-height: ${minHeight}; + `} + + ${withPrefix && + css` + justify-content: flex-end; + + [data-prefix] { + ${typography.body('regular')}; + color: ${colorTokens.text.hints}; + } + `} + `, + paginationIcons: css` + ${styleUtils.flexCenter()}; + background-color: ${colorTokens.bg.white}; + border: 1px solid ${colorTokens.stroke.divider}; + border-radius: ${borderRadius[4]}; + `, + timeLimit: css` + display: grid; + align-items: start; + grid-template-columns: 48px 84px; + + & input { + border: 1px solid ${colorTokens.stroke.default}; + + &[data-time-limit] { + border-radius: ${borderRadius[6]} 0 0 ${borderRadius[6]}; + border-right: none; + + &:focus { + border-right: 1px solid ${colorTokens.stroke.default}; + z-index: ${zIndex.positive}; + } + } + &[data-time-limit-unit] { + border-radius: 0 ${borderRadius[6]} ${borderRadius[6]} 0; + } + } + `, + contentDripLabel: css` + ${styleUtils.display.flex()}; + align-items: center; + + svg { + margin-right: ${spacing[4]}; + color: ${colorTokens.icon.success}; + } + + * > svg { + ${styleUtils.flexCenter()}; + margin-left: ${spacing[4]}; + color: ${colorTokens.color.black[30]}; + } + `, +}; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/Topic.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/Topic.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/curriculum/Topic.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/Topic.tsx index 76c95384f1..c4a493fa6e 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/Topic.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/Topic.tsx @@ -1,19 +1,14 @@ +import { useCallback, useEffect, useRef, useState } from 'react'; import { type AnimateLayoutChanges, - SortableContext, defaultAnimateLayoutChanges, + SortableContext, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; import { css } from '@emotion/react'; import { animated, useSpring } from '@react-spring/web'; -import { useCallback, useEffect, useRef, useState } from 'react'; - -import TopicContentWrapper from '@CourseBuilderComponents/curriculum/TopicContentWrapper'; -import TopicFooter from '@CourseBuilderComponents/curriculum/TopicFooter'; -import TopicHeader from '@CourseBuilderComponents/curriculum/TopicHeader'; -import type { CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; import { borderRadius, colorTokens, shadow, spacing } from '@TutorShared/config/styles'; import For from '@TutorShared/controls/For'; @@ -22,6 +17,11 @@ import { styleUtils } from '@TutorShared/utils/style-utils'; import { type ID, isDefined } from '@TutorShared/utils/types'; import { noop } from '@TutorShared/utils/util'; +import TopicContentWrapper from '@CourseBuilderComponents/curriculum/TopicContentWrapper'; +import TopicFooter from '@CourseBuilderComponents/curriculum/TopicFooter'; +import TopicHeader from '@CourseBuilderComponents/curriculum/TopicHeader'; +import type { CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; + interface TopicProps { topic: CourseTopicWithCollapse; onDelete?: () => void; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/TopicContent.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicContent.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/curriculum/TopicContent.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/TopicContent.tsx index afc7572975..87698a40ad 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/TopicContent.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicContent.tsx @@ -1,45 +1,45 @@ +import { memo, useRef, useState } from 'react'; +import { useFormContext } from 'react-hook-form'; import { type SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'; import { css } from '@emotion/react'; import { useQueryClient } from '@tanstack/react-query'; import { __, sprintf } from '@wordpress/i18n'; -import { memo, useRef, useState } from 'react'; -import { useFormContext } from 'react-hook-form'; import LoadingSpinner from '@TutorShared/atoms/LoadingSpinner'; import ProBadge from '@TutorShared/atoms/ProBadge'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import Tooltip from '@TutorShared/atoms/Tooltip'; +import { useModal } from '@TutorShared/components/modals/Modal'; + +import { tutorConfig } from '@TutorShared/config/config'; +import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; +import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; +import { typography } from '@TutorShared/config/typography'; +import Show from '@TutorShared/controls/Show'; +import { AnimationType } from '@TutorShared/hooks/useAnimation'; +import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; +import { type IconCollection } from '@TutorShared/icons/types'; import ConfirmationPopover from '@TutorShared/molecules/ConfirmationPopover'; import Popover from '@TutorShared/molecules/Popover'; +import { styleUtils } from '@TutorShared/utils/style-utils'; +import type { ID, TopicContentType } from '@TutorShared/utils/types'; +import { isAddonEnabled, noop } from '@TutorShared/utils/util'; +import GoogleMeetForm from '@CourseBuilderComponents/additional/meeting/GoogleMeetForm'; import ZoomMeetingForm from '@CourseBuilderComponents/additional/meeting/ZoomMeetingForm'; import AssignmentModal from '@CourseBuilderComponents/modals/AssignmentModal'; import LessonModal from '@CourseBuilderComponents/modals/LessonModal'; import QuizModal from '@CourseBuilderComponents/modals/QuizModal'; +import type { CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; +import type { CourseDetailsResponse, CourseFormData } from '@CourseBuilderServices/course'; import { useDeleteContentBankContentMutation, useDeleteContentMutation, useDuplicateContentMutation, } from '@CourseBuilderServices/curriculum'; -import { useModal } from '@TutorShared/components/modals/Modal'; - -import GoogleMeetForm from '@CourseBuilderComponents/additional/meeting/GoogleMeetForm'; -import type { CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; -import type { CourseDetailsResponse, CourseFormData } from '@CourseBuilderServices/course'; import { useDeleteQuizMutation, useExportQuizMutation } from '@CourseBuilderServices/quiz'; import { getCourseId, getIdWithoutPrefix } from '@CourseBuilderUtils/utils'; -import { tutorConfig } from '@TutorShared/config/config'; -import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; -import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; -import { typography } from '@TutorShared/config/typography'; -import Show from '@TutorShared/controls/Show'; -import { AnimationType } from '@TutorShared/hooks/useAnimation'; -import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; -import { type IconCollection } from '@TutorShared/icons/types'; -import { styleUtils } from '@TutorShared/utils/style-utils'; -import type { ID, TopicContentType } from '@TutorShared/utils/types'; -import { isAddonEnabled, noop } from '@TutorShared/utils/util'; interface TopicContentProps { type: TopicContentType; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/TopicContentWrapper.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicContentWrapper.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/curriculum/TopicContentWrapper.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/TopicContentWrapper.tsx index 1d0f245209..4594d75d69 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/TopicContentWrapper.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicContentWrapper.tsx @@ -1,7 +1,9 @@ -import { type CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; -import { type Content } from '@CourseBuilderServices/curriculum'; import { type AnimateLayoutChanges, defaultAnimateLayoutChanges, useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; + +import { type CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; +import { type Content } from '@CourseBuilderServices/curriculum'; + import TopicContent from './TopicContent'; interface TopicContentWrapperProps { diff --git a/assets/react/v3/entries/course-builder/components/curriculum/TopicDragOverlay.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicDragOverlay.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/curriculum/TopicDragOverlay.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/TopicDragOverlay.tsx diff --git a/assets/react/v3/entries/course-builder/components/curriculum/TopicFooter.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicFooter.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/curriculum/TopicFooter.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/TopicFooter.tsx index 09bd29291b..9243398673 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/TopicFooter.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicFooter.tsx @@ -1,37 +1,37 @@ +import { memo, useRef, useState } from 'react'; +import { useFormContext } from 'react-hook-form'; import { css } from '@emotion/react'; import { useQueryClient } from '@tanstack/react-query'; import { __, sprintf } from '@wordpress/i18n'; -import { memo, useRef, useState } from 'react'; -import { useFormContext } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import ProBadge from '@TutorShared/atoms/ProBadge'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import { useToast } from '@TutorShared/atoms/Toast'; + import { useModal } from '@TutorShared/components/modals/Modal'; -import Show from '@TutorShared/controls/Show'; +import { tutorConfig } from '@TutorShared/config/config'; +import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; +import { Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; +import Show from '@TutorShared/controls/Show'; +import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; import { useFileUploader } from '@TutorShared/molecules/FileUploader'; import Popover from '@TutorShared/molecules/Popover'; import ThreeDots from '@TutorShared/molecules/ThreeDots'; +import { styleUtils } from '@TutorShared/utils/style-utils'; +import { isAddonEnabled, noop } from '@TutorShared/utils/util'; import GoogleMeetForm from '@CourseBuilderComponents/additional/meeting/GoogleMeetForm'; import ZoomMeetingForm from '@CourseBuilderComponents/additional/meeting/ZoomMeetingForm'; import AssignmentModal from '@CourseBuilderComponents/modals/AssignmentModal'; +import CollectionListModal from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; import LessonModal from '@CourseBuilderComponents/modals/LessonModal'; import QuizModal from '@CourseBuilderComponents/modals/QuizModal'; - -import CollectionListModal from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; import type { CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; import type { CourseDetailsResponse, CourseFormData } from '@CourseBuilderServices/course'; import { useImportQuizMutation } from '@CourseBuilderServices/quiz'; import { getCourseId, getIdWithoutPrefix } from '@CourseBuilderUtils/utils'; -import { tutorConfig } from '@TutorShared/config/config'; -import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; -import { Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; -import { POPOVER_PLACEMENTS } from '@TutorShared/hooks/usePortalPopover'; -import { styleUtils } from '@TutorShared/utils/style-utils'; -import { isAddonEnabled, noop } from '@TutorShared/utils/util'; interface TopicFooterProps { topic: CourseTopicWithCollapse; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/TopicHeader.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicHeader.tsx similarity index 95% rename from assets/react/v3/entries/course-builder/components/curriculum/TopicHeader.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/TopicHeader.tsx index ca08f6be91..31d298e815 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/TopicHeader.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/TopicHeader.tsx @@ -1,40 +1,39 @@ +import { memo, useEffect, useRef, useState } from 'react'; +import { Controller } from 'react-hook-form'; import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'; import { css } from '@emotion/react'; import { animated } from '@react-spring/web'; import { __, sprintf } from '@wordpress/i18n'; -import { memo, useEffect, useRef, useState } from 'react'; -import { Controller } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import LoadingSpinner from '@TutorShared/atoms/LoadingSpinner'; import ProBadge from '@TutorShared/atoms/ProBadge'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import Tooltip from '@TutorShared/atoms/Tooltip'; -import ConfirmationPopover from '@TutorShared/molecules/ConfirmationPopover'; import FormInput from '@TutorShared/components/fields/FormInput'; - -import type { CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; -import { - useDeleteTopicMutation, - useDuplicateContentMutation, - useSaveTopicMutation, -} from '@CourseBuilderServices/curriculum'; import FormTextareaInput from '@TutorShared/components/fields/FormTextareaInput'; + import { tutorConfig } from '@TutorShared/config/config'; import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; - import { AnimationType } from '@TutorShared/hooks/useAnimation'; import { useCollapseExpandAnimation } from '@TutorShared/hooks/useCollapseExpandAnimation'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; - -import { getCourseId, getIdWithoutPrefix } from '@CourseBuilderUtils/utils'; +import ConfirmationPopover from '@TutorShared/molecules/ConfirmationPopover'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type ID } from '@TutorShared/utils/types'; import { noop } from '@TutorShared/utils/util'; +import type { CourseTopicWithCollapse } from '@CourseBuilderPages/Curriculum'; +import { + useDeleteTopicMutation, + useDuplicateContentMutation, + useSaveTopicMutation, +} from '@CourseBuilderServices/curriculum'; +import { getCourseId, getIdWithoutPrefix } from '@CourseBuilderUtils/utils'; + interface TopicHeaderProps { topic: CourseTopicWithCollapse; isEdit: boolean; @@ -128,10 +127,19 @@ const TopicHeader = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [isEdit]); + const summaryValue = form.watch('summary') ?? ''; + const hasSummary = summaryValue.trim().length > 0; + return ( <>
    -
    +
    onCollapse(topic.id)} @@ -253,10 +261,10 @@ const TopicHeader = ({ 0}> +
    setIsEdit(true)}> - {form.watch('summary')} + {summaryValue}
    @@ -271,7 +279,7 @@ const TopicHeader = ({ {...controllerProps} placeholder={__('Add a summary', 'tutor')} isSecondary - rows={2} + rows={5} enableResize /> )} @@ -376,11 +384,6 @@ const styles = { border-bottom: 1px solid ${colorTokens.stroke.divider}; `} - ${!isEdit && - css` - padding-bottom: 0; - `} - ${!isEdit && !isDeletePopoverOpen && css` @@ -403,12 +406,20 @@ const styles = { } } `, - headerContent: ({ isSaved = true }: { isSaved: boolean }) => css` + headerContent: ({ + isSaved = true, + isCollapsed = false, + hasSummary = false, + }: { + isSaved: boolean; + isCollapsed: boolean; + hasSummary: boolean; + }) => css` display: grid; grid-template-columns: ${isSaved ? '1fr auto' : '1fr'}; gap: ${spacing[12]}; width: 100%; - padding-bottom: ${spacing[12]}; + padding-bottom: ${!isCollapsed && hasSummary ? spacing[12] : '0px'}; `, grabberInput: css` ${styleUtils.display.flex()}; @@ -455,7 +466,6 @@ const styles = { color: ${colorTokens.text.hints}; padding-inline: ${spacing[8]}; margin-left: ${spacing[24]}; - padding-bottom: ${spacing[12]}; ${!isEdit && css` @@ -464,6 +474,7 @@ const styles = { ${isEdit && css` + padding-top: ${spacing[12]}; padding-right: 0; `} `, @@ -473,6 +484,7 @@ const styles = { ${styleUtils.display.flex()}; gap: ${spacing[8]}; justify-content: end; + margin-top: ${spacing[12]}; `, actions: css` ${styleUtils.display.flex()}; diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Coordinates.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Coordinates.tsx new file mode 100644 index 0000000000..d5e1959702 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Coordinates.tsx @@ -0,0 +1,62 @@ +import { Controller, useController, useFieldArray, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; + +import FormCoordinates from '@TutorShared/components/fields/quiz/questions/FormCoordinates'; + +import { spacing } from '@TutorShared/config/styles'; +import { styleUtils } from '@TutorShared/utils/style-utils'; + +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; + +const Coordinates = () => { + const form = useFormContext(); + const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext(); + + const answersPath = `questions.${activeQuestionIndex}.question_answers` as 'questions.0.question_answers'; + const axisRangePath = + `questions.${activeQuestionIndex}.question_settings.coordinates_axis_range` as 'questions.0.question_settings.coordinates_axis_range'; + + const { fields: optionsFields } = useFieldArray({ + control: form.control, + name: answersPath, + }); + const axisRangeControllerProps = useController({ + control: form.control, + name: axisRangePath, + defaultValue: 10, + }); + + if (optionsFields.length === 0) { + return null; + } + + return ( +
    + ( + + )} + /> +
    + ); +}; + +export default Coordinates; + +const styles = { + optionWrapper: css` + ${styleUtils.display.flex('column')}; + padding-left: ${spacing[40]}; + `, +}; diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/DrawImage.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/DrawImage.tsx new file mode 100644 index 0000000000..36e34b4586 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/DrawImage.tsx @@ -0,0 +1,64 @@ +import { Controller, useController, useFieldArray, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; + +import FormDrawImage from '@TutorShared/components/fields/quiz/questions/FormDrawImage'; + +import { spacing } from '@TutorShared/config/styles'; +import { styleUtils } from '@TutorShared/utils/style-utils'; + +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; + +const DrawImage = () => { + const form = useFormContext(); + const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext(); + + const answersPath = `questions.${activeQuestionIndex}.question_answers` as 'questions.0.question_answers'; + const thresholdPath = + `questions.${activeQuestionIndex}.question_settings.draw_image_threshold_percent` as 'questions.0.question_settings.draw_image_threshold_percent'; + + const { fields: optionsFields } = useFieldArray({ + control: form.control, + name: answersPath, + }); + const thresholdControllerProps = useController({ + control: form.control, + name: thresholdPath, + defaultValue: 70, + }); + + // Only render Controller when the value exists to ensure field.value is always defined + if (optionsFields.length === 0) { + return null; + } + + return ( +
    + ( + + )} + /> +
    + ); +}; + +export default DrawImage; + +const styles = { + optionWrapper: css` + ${styleUtils.display.flex('column')}; + gap: ${spacing[16]}; + padding-left: ${spacing[40]}; + `, +}; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/question-types/FillinTheBlanks.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/FillinTheBlanks.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/curriculum/question-types/FillinTheBlanks.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/question-types/FillinTheBlanks.tsx index f93cf069c7..320c538a42 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/question-types/FillinTheBlanks.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/FillinTheBlanks.tsx @@ -1,12 +1,14 @@ -import { css } from '@emotion/react'; import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; -import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; -import type { QuizForm } from '@CourseBuilderServices/quiz'; import FormFillInTheBlanks from '@TutorShared/components/fields/quiz/questions/FormFillinTheBlanks'; + import { spacing } from '@TutorShared/config/styles'; import { styleUtils } from '@TutorShared/utils/style-utils'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; + const FillInTheBlanks = () => { const form = useFormContext(); const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext(); diff --git a/assets/react/v3/entries/course-builder/components/curriculum/question-types/ImageAnswering.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/ImageAnswering.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/curriculum/question-types/ImageAnswering.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/question-types/ImageAnswering.tsx index e235ba656f..e5e5046075 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/question-types/ImageAnswering.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/ImageAnswering.tsx @@ -1,10 +1,13 @@ +import { useMemo, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import { + closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, type UniqueIdentifier, - closestCenter, useSensor, useSensors, } from '@dnd-kit/core'; @@ -12,10 +15,8 @@ import { restrictToWindowEdges } from '@dnd-kit/modifiers'; import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { useMemo, useState } from 'react'; -import { createPortal } from 'react-dom'; -import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; +import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import FormImageAnswering from '@TutorShared/components/fields/quiz/questions/FormImageAnswering'; @@ -24,12 +25,11 @@ import { Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; import For from '@TutorShared/controls/For'; import Show from '@TutorShared/controls/Show'; import { styleUtils } from '@TutorShared/utils/style-utils'; +import { QuizDataStatus, type QuizQuestionOption } from '@TutorShared/utils/types'; import { nanoid, noop } from '@TutorShared/utils/util'; import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; import { type QuizForm } from '@CourseBuilderServices/quiz'; -import Button from '@TutorShared/atoms/Button'; -import { QuizDataStatus, type QuizQuestionOption } from '@TutorShared/utils/types'; const ImageAnswering = () => { const [activeSortId, setActiveSortId] = useState(null); diff --git a/assets/react/v3/entries/course-builder/components/curriculum/question-types/Matching.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Matching.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/curriculum/question-types/Matching.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Matching.tsx index bd9b078428..d400ce0a1f 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/question-types/Matching.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Matching.tsx @@ -1,10 +1,13 @@ +import { useMemo, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { + closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, type UniqueIdentifier, - closestCenter, useSensor, useSensors, } from '@dnd-kit/core'; @@ -12,16 +15,12 @@ import { restrictToWindowEdges } from '@dnd-kit/modifiers'; import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { useMemo, useState } from 'react'; -import { createPortal } from 'react-dom'; -import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import FormMatching from '@TutorShared/components/fields/quiz/questions/FormMatching'; -import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; -import { type QuizForm } from '@CourseBuilderServices/quiz'; import { Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; import For from '@TutorShared/controls/For'; import Show from '@TutorShared/controls/Show'; @@ -29,6 +28,9 @@ import { styleUtils } from '@TutorShared/utils/style-utils'; import { QuizDataStatus, type QuizQuestionOption } from '@TutorShared/utils/types'; import { nanoid, noop } from '@TutorShared/utils/util'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import { type QuizForm } from '@CourseBuilderServices/quiz'; + const Matching = () => { const [activeSortId, setActiveSortId] = useState(null); const form = useFormContext(); diff --git a/assets/react/v3/entries/course-builder/components/curriculum/question-types/MultipleChoiceAndOrdering.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/MultipleChoiceAndOrdering.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/curriculum/question-types/MultipleChoiceAndOrdering.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/question-types/MultipleChoiceAndOrdering.tsx index 1cbc34fba1..629215ca50 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/question-types/MultipleChoiceAndOrdering.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/MultipleChoiceAndOrdering.tsx @@ -1,10 +1,13 @@ +import { useMemo, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { + closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, type UniqueIdentifier, - closestCenter, useSensor, useSensors, } from '@dnd-kit/core'; @@ -12,17 +15,12 @@ import { restrictToWindowEdges } from '@dnd-kit/modifiers'; import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { useMemo, useState } from 'react'; -import { createPortal } from 'react-dom'; -import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; import FormMultipleChoiceAndOrdering from '@TutorShared/components/fields/quiz/questions/FormMultipleChoiceAndOrdering'; -import { type QuizForm } from '@CourseBuilderServices/quiz'; import { colorTokens, spacing } from '@TutorShared/config/styles'; import For from '@TutorShared/controls/For'; import Show from '@TutorShared/controls/Show'; @@ -31,6 +29,9 @@ import { styleUtils } from '@TutorShared/utils/style-utils'; import { QuizDataStatus, type QuizQuestionOption } from '@TutorShared/utils/types'; import { nanoid, noop } from '@TutorShared/utils/util'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import { type QuizForm } from '@CourseBuilderServices/quiz'; + const MultipleChoiceAndOrdering = () => { const [activeSortId, setActiveSortId] = useState(null); const form = useFormContext(); diff --git a/assets/react/v3/entries/course-builder/components/curriculum/question-types/OpenEndedAndShortAnswer.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/OpenEndedAndShortAnswer.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/curriculum/question-types/OpenEndedAndShortAnswer.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/question-types/OpenEndedAndShortAnswer.tsx index b699aebffb..6a4a61ca94 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/question-types/OpenEndedAndShortAnswer.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/OpenEndedAndShortAnswer.tsx @@ -2,6 +2,7 @@ import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; import Alert from '@TutorShared/atoms/Alert'; + import { Breakpoint, spacing } from '@TutorShared/config/styles'; const OpenEndedAndShortAnswer = () => { diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/PinImage.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/PinImage.tsx new file mode 100644 index 0000000000..caf7ea1483 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/PinImage.tsx @@ -0,0 +1,54 @@ +import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; + +import FormPinImage from '@TutorShared/components/fields/quiz/questions/FormPinImage'; + +import { spacing } from '@TutorShared/config/styles'; +import { styleUtils } from '@TutorShared/utils/style-utils'; + +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; + +const PinImage = () => { + const form = useFormContext(); + const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext(); + + const answersPath = `questions.${activeQuestionIndex}.question_answers` as 'questions.0.question_answers'; + + const { fields: optionsFields } = useFieldArray({ + control: form.control, + name: answersPath, + }); + + // Only render Controller when the value exists to ensure field.value is always defined + if (optionsFields.length === 0) { + return null; + } + + return ( +
    + ( + + )} + /> +
    + ); +}; + +export default PinImage; + +const styles = { + optionWrapper: css` + ${styleUtils.display.flex('column')}; + padding-left: ${spacing[40]}; + `, +}; diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Puzzle.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Puzzle.tsx new file mode 100644 index 0000000000..0e82314c26 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Puzzle.tsx @@ -0,0 +1,54 @@ +import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; + +import FormPuzzle from '@TutorShared/components/fields/quiz/questions/FormPuzzle'; + +import { spacing } from '@TutorShared/config/styles'; +import { styleUtils } from '@TutorShared/utils/style-utils'; + +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; + +const Puzzle = () => { + const form = useFormContext(); + const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext(); + + const answersPath = `questions.${activeQuestionIndex}.question_answers` as 'questions.0.question_answers'; + const { fields: optionsFields } = useFieldArray({ + control: form.control, + name: answersPath, + }); + + if (optionsFields.length === 0) { + return null; + } + + return ( +
    + ( + + )} + /> +
    + ); +}; + +export default Puzzle; + +const styles = { + optionWrapper: css` + ${styleUtils.display.flex('column')}; + gap: ${spacing[16]}; + padding-left: ${spacing[40]}; + `, +}; diff --git a/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Scale.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Scale.tsx new file mode 100644 index 0000000000..0899d98175 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/Scale.tsx @@ -0,0 +1,53 @@ +import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; + +import FormScale from '@TutorShared/components/fields/quiz/questions/FormScale'; + +import { spacing } from '@TutorShared/config/styles'; +import { styleUtils } from '@TutorShared/utils/style-utils'; + +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import type { QuizForm } from '@CourseBuilderServices/quiz'; + +const Scale = () => { + const form = useFormContext(); + const { activeQuestionId, activeQuestionIndex, validationError, setValidationError } = useQuizModalContext(); + + const answersPath = `questions.${activeQuestionIndex}.question_answers` as 'questions.0.question_answers'; + + const { fields: optionsFields } = useFieldArray({ + control: form.control, + name: answersPath, + }); + + if (optionsFields.length === 0) { + return null; + } + + return ( +
    + ( + + )} + /> +
    + ); +}; + +export default Scale; + +const styles = { + optionWrapper: css` + ${styleUtils.display.flex('column')}; + padding-left: ${spacing[40]}; + `, +}; diff --git a/assets/react/v3/entries/course-builder/components/curriculum/question-types/TrueFalse.tsx b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/TrueFalse.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/curriculum/question-types/TrueFalse.tsx rename to assets/src/js/v3/entries/course-builder/components/curriculum/question-types/TrueFalse.tsx index 7d57c254c8..631a22cd94 100644 --- a/assets/react/v3/entries/course-builder/components/curriculum/question-types/TrueFalse.tsx +++ b/assets/src/js/v3/entries/course-builder/components/curriculum/question-types/TrueFalse.tsx @@ -1,24 +1,22 @@ +import { useEffect, useMemo, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { + closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, type UniqueIdentifier, - closestCenter, useSensor, useSensors, } from '@dnd-kit/core'; import { restrictToWindowEdges } from '@dnd-kit/modifiers'; import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { css } from '@emotion/react'; -import { useEffect, useMemo, useState } from 'react'; -import { createPortal } from 'react-dom'; -import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; -import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; import FormTrueFalse from '@TutorShared/components/fields/quiz/questions/FormTrueFalse'; -import { type QuizForm } from '@CourseBuilderServices/quiz'; import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import For from '@TutorShared/controls/For'; @@ -28,6 +26,9 @@ import { styleUtils } from '@TutorShared/utils/style-utils'; import { QuizDataStatus, type QuizQuestionOption } from '@TutorShared/utils/types'; import { noop } from '@TutorShared/utils/util'; +import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext'; +import { type QuizForm } from '@CourseBuilderServices/quiz'; + const TrueFalse = () => { const [activeSortId, setActiveSortId] = useState(null); const form = useFormContext(); diff --git a/assets/react/v3/entries/course-builder/components/layouts/CanvasHead.tsx b/assets/src/js/v3/entries/course-builder/components/layouts/CanvasHead.tsx similarity index 100% rename from assets/react/v3/entries/course-builder/components/layouts/CanvasHead.tsx rename to assets/src/js/v3/entries/course-builder/components/layouts/CanvasHead.tsx index 9748084722..38a96ec41b 100644 --- a/assets/react/v3/entries/course-builder/components/layouts/CanvasHead.tsx +++ b/assets/src/js/v3/entries/course-builder/components/layouts/CanvasHead.tsx @@ -1,7 +1,7 @@ -import { css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; import type { ReactElement } from 'react'; import { useNavigate } from 'react-router-dom'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; diff --git a/assets/react/v3/entries/course-builder/components/layouts/Layout.tsx b/assets/src/js/v3/entries/course-builder/components/layouts/Layout.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/layouts/Layout.tsx rename to assets/src/js/v3/entries/course-builder/components/layouts/Layout.tsx index 44b4cb68a5..b2b908a572 100644 --- a/assets/react/v3/entries/course-builder/components/layouts/Layout.tsx +++ b/assets/src/js/v3/entries/course-builder/components/layouts/Layout.tsx @@ -1,22 +1,23 @@ -import { css } from '@emotion/react'; import { useEffect } from 'react'; import { FormProvider } from 'react-hook-form'; import { Outlet } from 'react-router-dom'; +import { css } from '@emotion/react'; + +import { Breakpoint, colorTokens, containerMaxWidth, headerHeight, spacing } from '@TutorShared/config/styles'; +import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; +import { findSlotFields } from '@TutorShared/utils/util'; import Header from '@CourseBuilderComponents/layouts/header/Header'; +import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; import { CourseNavigatorProvider } from '@CourseBuilderContexts/CourseNavigatorContext'; import { - type CourseFormData, convertCourseDataToFormData, courseDefaultData, + type CourseFormData, useCourseDetailsQuery, } from '@CourseBuilderServices/course'; import { getCourseId } from '@CourseBuilderUtils/utils'; -import { Breakpoint, colorTokens, containerMaxWidth, headerHeight, spacing } from '@TutorShared/config/styles'; -import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; -import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; -import { findSlotFields } from '@TutorShared/utils/util'; import Notebook from './Notebook'; const Layout = () => { diff --git a/assets/react/v3/entries/course-builder/components/layouts/Navigator.tsx b/assets/src/js/v3/entries/course-builder/components/layouts/Navigator.tsx similarity index 98% rename from assets/react/v3/entries/course-builder/components/layouts/Navigator.tsx rename to assets/src/js/v3/entries/course-builder/components/layouts/Navigator.tsx index eef732b993..87599078f3 100644 --- a/assets/react/v3/entries/course-builder/components/layouts/Navigator.tsx +++ b/assets/src/js/v3/entries/course-builder/components/layouts/Navigator.tsx @@ -1,16 +1,19 @@ -import routes from '@CourseBuilderConfig/routes'; -import { useCourseNavigator } from '@CourseBuilderContexts/CourseNavigatorContext'; -import type { CourseFormData } from '@CourseBuilderServices/course'; +import { useFormContext } from 'react-hook-form'; +import { useNavigate } from 'react-router-dom'; +import { css, type SerializedStyles } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import { isRTL } from '@TutorShared/config/constants'; import { colorTokens, spacing } from '@TutorShared/config/styles'; import Show from '@TutorShared/controls/Show'; import { useCurrentPath } from '@TutorShared/hooks/useCurrentPath'; -import { type SerializedStyles, css } from '@emotion/react'; -import { __ } from '@wordpress/i18n'; -import { useFormContext } from 'react-hook-form'; -import { useNavigate } from 'react-router-dom'; + +import routes from '@CourseBuilderConfig/routes'; +import { useCourseNavigator } from '@CourseBuilderContexts/CourseNavigatorContext'; +import type { CourseFormData } from '@CourseBuilderServices/course'; interface NavigatorProps { styleModifier?: SerializedStyles; diff --git a/assets/react/v3/entries/course-builder/components/layouts/Notebook.tsx b/assets/src/js/v3/entries/course-builder/components/layouts/Notebook.tsx similarity index 90% rename from assets/react/v3/entries/course-builder/components/layouts/Notebook.tsx rename to assets/src/js/v3/entries/course-builder/components/layouts/Notebook.tsx index 957284f736..35a5334bf4 100644 --- a/assets/react/v3/entries/course-builder/components/layouts/Notebook.tsx +++ b/assets/src/js/v3/entries/course-builder/components/layouts/Notebook.tsx @@ -1,22 +1,21 @@ +import { useEffect, useRef, useState } from 'react'; import { css } from '@emotion/react'; import { animated, useSpring } from '@react-spring/web'; import { __ } from '@wordpress/i18n'; -import { useEffect, useRef, useState } from 'react'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import { CURRENT_VIEWPORT, LocalStorageKeys, notebook } from '@TutorShared/config/constants'; -import { borderRadius, Breakpoint, colorTokens, shadow, spacing, zIndex } from '@TutorShared/config/styles'; +import { borderRadius, colorTokens, shadow, spacing, zIndex } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; +import { useResize } from '@TutorShared/hooks/useResize'; import { getFromLocalStorage, setToLocalStorage } from '@TutorShared/utils/localStorage'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { isDefined } from '@TutorShared/utils/types'; import { jsonParse, throttle } from '@TutorShared/utils/util'; -import { useResize } from '@TutorShared/hooks/useResize'; - interface Position { x: number; y: number; @@ -43,12 +42,8 @@ const Notebook = () => { const notebookRef = useRef(null); const expandAnimation = useSpring({ - width: !isCollapsed ? notebook.MIN_NOTEBOOK_WIDTH : notebook.NOTEBOOK_HEADER, - height: CURRENT_VIEWPORT.isAboveDesktop - ? notebook.MIN_NOTEBOOK_HEIGHT - : !isCollapsed - ? notebook.MIN_NOTEBOOK_HEIGHT - : notebook.NOTEBOOK_HEADER, + width: !isCollapsed ? notebook.MIN_NOTEBOOK_WIDTH : 0, + height: !isCollapsed ? notebook.MIN_NOTEBOOK_HEIGHT : 0, config: { duration: 300, easing: (t) => t * (2 - t), @@ -264,19 +259,14 @@ const Notebook = () => { - -
    + } >
    @@ -385,29 +375,30 @@ const styles = { border-radius: ${borderRadius.card}; `} `, - verticalTitleWrapper: css` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(-90deg); + collapsedTrigger: css` + ${styleUtils.resetButton}; + position: fixed; + bottom: ${spacing[16]}; + right: ${spacing[16]}; + width: 32px; + height: 32px; + border-radius: ${borderRadius[6]}; background-color: ${colorTokens.background.active}; - color: ${colorTokens.text.title}; + box-shadow: ${shadow.notebook}; + display: flex; + align-items: center; + justify-content: center; + color: ${colorTokens.icon.default}; + z-index: ${zIndex.notebook}; + transition: background-color 0.2s ease-in-out; - ${Breakpoint.smallTablet} { - transform: translate(-50%, -50%) rotate(0deg); - } - `, - verticalButton: css` - text-align: center; - width: ${notebook.MIN_NOTEBOOK_HEIGHT}px; - height: ${notebook.NOTEBOOK_HEADER}px; - ${typography.body('bold')}; - - &:focus, - &:active, &:hover { - background: none; - color: ${colorTokens.text.primary}; + background-color: ${colorTokens.background.hover}; + } + + &:focus-visible { + outline: 2px solid ${colorTokens.stroke.brand}; + outline-offset: 2px; } `, header: ({ isCollapsed, isFloating }: { isCollapsed: boolean; isFloating: boolean }) => css` diff --git a/assets/react/v3/entries/course-builder/components/layouts/Tracker.tsx b/assets/src/js/v3/entries/course-builder/components/layouts/Tracker.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/layouts/Tracker.tsx rename to assets/src/js/v3/entries/course-builder/components/layouts/Tracker.tsx index da98e36d10..4523319b8c 100644 --- a/assets/react/v3/entries/course-builder/components/layouts/Tracker.tsx +++ b/assets/src/js/v3/entries/course-builder/components/layouts/Tracker.tsx @@ -1,13 +1,15 @@ -import { type Step, useCourseNavigator } from '@CourseBuilderContexts/CourseNavigatorContext'; -import type { CourseFormData } from '@CourseBuilderServices/course'; +import { useFormContext } from 'react-hook-form'; +import { useNavigate } from 'react-router-dom'; +import { css } from '@emotion/react'; + import { borderRadius, Breakpoint, colorTokens, lineHeight, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import For from '@TutorShared/controls/For'; import Show from '@TutorShared/controls/Show'; import { styleUtils } from '@TutorShared/utils/style-utils'; -import { css } from '@emotion/react'; -import { useFormContext } from 'react-hook-form'; -import { useNavigate } from 'react-router-dom'; + +import { type Step, useCourseNavigator } from '@CourseBuilderContexts/CourseNavigatorContext'; +import type { CourseFormData } from '@CourseBuilderServices/course'; const Tracker = () => { const { steps } = useCourseNavigator(); diff --git a/assets/react/v3/entries/course-builder/components/layouts/header/Header.tsx b/assets/src/js/v3/entries/course-builder/components/layouts/header/Header.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/layouts/header/Header.tsx rename to assets/src/js/v3/entries/course-builder/components/layouts/header/Header.tsx index 6d853bdd46..4a412b3995 100644 --- a/assets/react/v3/entries/course-builder/components/layouts/header/Header.tsx +++ b/assets/src/js/v3/entries/course-builder/components/layouts/header/Header.tsx @@ -1,25 +1,19 @@ +import { useFormContext } from 'react-hook-form'; import { css } from '@emotion/react'; import { useQueryClient } from '@tanstack/react-query'; import { __ } from '@wordpress/i18n'; -import { useFormContext } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import MagicButton from '@TutorShared/atoms/MagicButton'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; import Tooltip from '@TutorShared/atoms/Tooltip'; -import HeaderActions from '@CourseBuilderComponents/layouts/header/HeaderActions'; -import Tracker from '@CourseBuilderComponents/layouts/Tracker'; -import AICourseBuilderModal from '@CourseBuilderComponents/modals/AICourseBuilderModal'; import Logo from '@TutorShared/components/Logo'; import ConfirmationModal from '@TutorShared/components/modals/ConfirmationModal'; import { useModal } from '@TutorShared/components/modals/Modal'; import ProIdentifierModal from '@TutorShared/components/modals/ProIdentifierModal'; import SetupOpenAiModal from '@TutorShared/components/modals/SetupOpenAiModal'; -import { useCourseNavigator } from '@CourseBuilderContexts/CourseNavigatorContext'; -import type { CourseDetailsResponse, CourseFormData } from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import { tutorConfig } from '@TutorShared/config/config'; import { CURRENT_VIEWPORT, TutorRoles, WP_ADMIN_BAR_HEIGHT } from '@TutorShared/config/constants'; import { @@ -35,8 +29,15 @@ import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { styleUtils } from '@TutorShared/utils/style-utils'; -import generateCourse2x from '@SharedImages/pro-placeholders/generate-course-2x.webp'; +import HeaderActions from '@CourseBuilderComponents/layouts/header/HeaderActions'; +import Tracker from '@CourseBuilderComponents/layouts/Tracker'; +import AICourseBuilderModal from '@CourseBuilderComponents/modals/AICourseBuilderModal'; +import { useCourseNavigator } from '@CourseBuilderContexts/CourseNavigatorContext'; +import type { CourseDetailsResponse, CourseFormData } from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + import generateCourse from '@SharedImages/pro-placeholders/generate-course.webp'; +import generateCourse2x from '@SharedImages/pro-placeholders/generate-course-2x.webp'; const courseId = getCourseId(); diff --git a/assets/react/v3/entries/course-builder/components/layouts/header/HeaderActions.tsx b/assets/src/js/v3/entries/course-builder/components/layouts/header/HeaderActions.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/layouts/header/HeaderActions.tsx rename to assets/src/js/v3/entries/course-builder/components/layouts/header/HeaderActions.tsx index 714dfe25f2..16f33da891 100644 --- a/assets/react/v3/entries/course-builder/components/layouts/header/HeaderActions.tsx +++ b/assets/src/js/v3/entries/course-builder/components/layouts/header/HeaderActions.tsx @@ -1,38 +1,39 @@ +import { useEffect, useState } from 'react'; +import { useFormContext, useWatch } from 'react-hook-form'; +import { useNavigate } from 'react-router-dom'; import { css } from '@emotion/react'; import { useQueryClient } from '@tanstack/react-query'; import { __ } from '@wordpress/i18n'; import { format, isBefore } from 'date-fns'; -import { useEffect, useState } from 'react'; -import { useFormContext, useWatch } from 'react-hook-form'; -import { useNavigate } from 'react-router-dom'; import Button from '@TutorShared/atoms/Button'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import DropdownButton from '@TutorShared/molecules/DropdownButton'; import { useModal } from '@TutorShared/components/modals/Modal'; import SuccessModal from '@TutorShared/components/modals/SuccessModal'; -import { - convertCourseDataToPayload, - useCreateCourseMutation, - useUpdateCourseMutation, - type CourseDetailsResponse, - type CourseFormData, -} from '@CourseBuilderServices/course'; -import { getCourseId } from '@CourseBuilderUtils/utils'; import config, { tutorConfig } from '@TutorShared/config/config'; import { CURRENT_VIEWPORT, DateFormats, TutorRoles } from '@TutorShared/config/constants'; import { spacing } from '@TutorShared/config/styles'; import Show from '@TutorShared/controls/Show'; +import DropdownButton from '@TutorShared/molecules/DropdownButton'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { isDefined, type WPPostStatus } from '@TutorShared/utils/types'; import { convertToGMT, determinePostStatus, findSlotFields, noop } from '@TutorShared/utils/util'; import { CourseBuilderRouteConfigs } from '@CourseBuilderConfig/route-configs'; import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; -import reviewSubmitted2x from '@SharedImages/review-submitted-2x.webp'; +import { + convertCourseDataToPayload, + type CourseDetailsResponse, + type CourseFormData, + useCreateCourseMutation, + useUpdateCourseMutation, +} from '@CourseBuilderServices/course'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + import reviewSubmitted from '@SharedImages/review-submitted.webp'; +import reviewSubmitted2x from '@SharedImages/review-submitted-2x.webp'; const courseId = getCourseId(); diff --git a/assets/react/v3/entries/course-builder/components/modals/AICourseBuilderModal.tsx b/assets/src/js/v3/entries/course-builder/components/modals/AICourseBuilderModal.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/modals/AICourseBuilderModal.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/AICourseBuilderModal.tsx index de2f74ed56..393b77234e 100644 --- a/assets/react/v3/entries/course-builder/components/modals/AICourseBuilderModal.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/AICourseBuilderModal.tsx @@ -1,11 +1,13 @@ +import { css } from '@emotion/react'; + +import FocusTrap from '@TutorShared/components/FocusTrap'; +import type { ModalProps } from '@TutorShared/components/modals/Modal'; + import BasicPrompt from '@CourseBuilderComponents/ai-course-modal/BasicPrompt'; import ContentGeneration from '@CourseBuilderComponents/ai-course-modal/ContentGeneration'; import ContentGenerationContextProvider, { useContentGenerationContext, } from '@CourseBuilderComponents/ai-course-modal/ContentGenerationContext'; -import { css } from '@emotion/react'; -import FocusTrap from '@TutorShared/components/FocusTrap'; -import type { ModalProps } from '@TutorShared/components/modals/Modal'; type AICourseBuilderModalProps = ModalProps; diff --git a/assets/react/v3/entries/course-builder/components/modals/AssignmentModal.tsx b/assets/src/js/v3/entries/course-builder/components/modals/AssignmentModal.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/modals/AssignmentModal.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/AssignmentModal.tsx index ebf4dd9f75..0e9c06998f 100644 --- a/assets/react/v3/entries/course-builder/components/modals/AssignmentModal.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/AssignmentModal.tsx @@ -1,8 +1,8 @@ +import { useEffect } from 'react'; +import { Controller } from 'react-hook-form'; import { css } from '@emotion/react'; import { useQueryClient } from '@tanstack/react-query'; import { __ } from '@wordpress/i18n'; -import { useEffect } from 'react'; -import { Controller } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import { LoadingOverlay } from '@TutorShared/atoms/LoadingSpinner'; @@ -13,23 +13,12 @@ import FormFileUploader from '@TutorShared/components/fields/FormFileUploader'; import FormInput from '@TutorShared/components/fields/FormInput'; import FormInputWithContent from '@TutorShared/components/fields/FormInputWithContent'; import FormSelectInput from '@TutorShared/components/fields/FormSelectInput'; +import FormSwitch from '@TutorShared/components/fields/FormSwitch'; import FormTopicPrerequisites from '@TutorShared/components/fields/FormTopicPrerequisites'; import FormWPEditor from '@TutorShared/components/fields/FormWPEditor'; import type { ModalProps } from '@TutorShared/components/modals/Modal'; import ModalWrapper from '@TutorShared/components/modals/ModalWrapper'; -import CourseBuilderInjectionSlot from '@CourseBuilderComponents/CourseBuilderSlot'; -import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; -import { type ContentDripType } from '@CourseBuilderServices/course'; -import { - convertAssignmentDataToPayload, - useAssignmentDetailsQuery, - useSaveAssignmentMutation, - type Assignment, - type CourseTopic, -} from '@CourseBuilderServices/curriculum'; -import { getCourseId } from '@CourseBuilderUtils/utils'; -import FormSwitch from '@TutorShared/components/fields/FormSwitch'; import { tutorConfig } from '@TutorShared/config/config'; import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, spacing, zIndex } from '@TutorShared/config/styles'; @@ -41,6 +30,18 @@ import { type ID } from '@TutorShared/utils/types'; import { findSlotFields, isAddonEnabled, normalizeLineEndings } from '@TutorShared/utils/util'; import { maxLimitRule, requiredRule } from '@TutorShared/utils/validation'; +import CourseBuilderInjectionSlot from '@CourseBuilderComponents/CourseBuilderSlot'; +import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; +import { type ContentDripType } from '@CourseBuilderServices/course'; +import { + type Assignment, + convertAssignmentDataToPayload, + type CourseTopic, + useAssignmentDetailsQuery, + useSaveAssignmentMutation, +} from '@CourseBuilderServices/curriculum'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + interface AssignmentModalProps extends ModalProps { assignmentId?: ID; topicId: ID; diff --git a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/CollectionListTable.tsx b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/CollectionListTable.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/CollectionListTable.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/CollectionListTable.tsx index c44f8b0cec..39c39db111 100644 --- a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/CollectionListTable.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/CollectionListTable.tsx @@ -1,22 +1,23 @@ -import { css } from '@emotion/react'; -import { __, _n, sprintf } from '@wordpress/i18n'; import React, { useMemo } from 'react'; import { useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, _n, sprintf } from '@wordpress/i18n'; import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; -import Paginator from '@TutorShared/molecules/Paginator'; -import Table, { type Column } from '@TutorShared/molecules/Table'; -import { type ContentSelectionForm } from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; -import SearchField from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/SearchField'; import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { usePaginatedTable } from '@TutorShared/hooks/usePaginatedTable'; +import Paginator from '@TutorShared/molecules/Paginator'; +import Table, { type Column } from '@TutorShared/molecules/Table'; import { useGetCollectionsPaginatedQuery } from '@TutorShared/services/content-bank'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type Collection, type CollectionContentType } from '@TutorShared/utils/types'; +import { type ContentSelectionForm } from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; +import SearchField from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/SearchField'; + interface CollectionListTableProps { type: 'lesson_assignment' | 'question'; } diff --git a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx similarity index 94% rename from assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx index f62243dedd..0bf15b8272 100644 --- a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx @@ -1,29 +1,30 @@ -import { css } from '@emotion/react'; -import { __, _n, sprintf } from '@wordpress/i18n'; import { useMemo, useState } from 'react'; import { useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, _n, sprintf } from '@wordpress/i18n'; -import { type ContentSelectionForm } from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; import Checkbox from '@TutorShared/atoms/CheckBox'; import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; +import Select from '@TutorShared/atoms/Select'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import Paginator from '@TutorShared/molecules/Paginator'; -import Table, { type Column } from '@TutorShared/molecules/Table'; -import FilterFields from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/FilterFields'; -import SearchField from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/SearchField'; -import { getIdWithoutPrefix } from '@CourseBuilderUtils/utils'; -import Select from '@TutorShared/atoms/Select'; import { Addons } from '@TutorShared/config/constants'; import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { usePaginatedTable } from '@TutorShared/hooks/usePaginatedTable'; +import Paginator from '@TutorShared/molecules/Paginator'; +import Table, { type Column } from '@TutorShared/molecules/Table'; import { CONTENT_BANK_POST_TYPE_MAP, useGetContentBankContents } from '@TutorShared/services/content-bank'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type CollectionContentType, type ContentBankContent, type Option } from '@TutorShared/utils/types'; import { isAddonEnabled } from '@TutorShared/utils/util'; +import { type ContentSelectionForm } from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; +import FilterFields from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/FilterFields'; +import SearchField from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/SearchField'; +import { getIdWithoutPrefix } from '@CourseBuilderUtils/utils'; + type SortDirection = 'asc' | 'desc'; const ContentListTable = () => { @@ -100,14 +101,20 @@ const ContentListTable = () => { const columns: Column[] = [ { Header: totalItems ? ( - 0 && !handleAllIsChecked() && selectedContents.length > 0} - aria-label={__('Select all contents', 'tutor')} - /> +
    event.stopPropagation()} + onMouseDown={(event) => event.stopPropagation()} + css={styles.headerCheckboxWrapper} + > + 0 && !handleAllIsChecked() && selectedContents.length > 0} + aria-label={__('Select all contents', 'tutor')} + /> +
    ) : ( __('# Title', 'tutor') ), @@ -316,6 +323,10 @@ const styles = { ${typography.small('medium')}; color: ${colorTokens.text.hints}; `, + headerCheckboxWrapper: css` + display: flex; + align-items: center; + `, checkboxLabel: css` ${typography.caption('medium')}; color: ${colorTokens.text.primary}; diff --git a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx similarity index 98% rename from assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx index 223f8c9857..a4f44b8c99 100644 --- a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx @@ -1,11 +1,10 @@ +import { useRef, useState } from 'react'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { useRef, useState } from 'react'; import Button from '@TutorShared/atoms/Button'; import Checkbox from '@TutorShared/atoms/CheckBox'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import Popover from '@TutorShared/molecules/Popover'; import { borderRadius, colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; @@ -14,6 +13,7 @@ import Show from '@TutorShared/controls/Show'; import { AnimationType } from '@TutorShared/hooks/useAnimation'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; import { type IconCollection } from '@TutorShared/icons/types'; +import Popover from '@TutorShared/molecules/Popover'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type QuizQuestionType } from '@TutorShared/utils/types'; @@ -90,6 +90,11 @@ const FilterFields = ({ onFilterChange, initialValues, type }: FilterFieldsProps value: 'ordering', icon: 'quizOrdering', }, + { + label: __('Puzzle', 'tutor'), + value: 'puzzle', + icon: 'quizPuzzle', + }, ]; return ( diff --git a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx similarity index 77% rename from assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx index 5dfff7d9ff..4bb56321a5 100644 --- a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx @@ -1,28 +1,130 @@ -import { css } from '@emotion/react'; -import { __, _n, sprintf } from '@wordpress/i18n'; import { useMemo, useState } from 'react'; import { useFormContext } from 'react-hook-form'; +import { css } from '@emotion/react'; +import { __, _n, sprintf } from '@wordpress/i18n'; -import { type ContentSelectionForm } from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; import Checkbox from '@TutorShared/atoms/CheckBox'; import { LoadingSection } from '@TutorShared/atoms/LoadingSpinner'; import SVGIcon from '@TutorShared/atoms/SVGIcon'; -import Paginator from '@TutorShared/molecules/Paginator'; -import Table, { type Column } from '@TutorShared/molecules/Table'; +import { tutorConfig } from '@TutorShared/config/config'; import { colorTokens, spacing } from '@TutorShared/config/styles'; import { typography } from '@TutorShared/config/typography'; import Show from '@TutorShared/controls/Show'; import { usePaginatedTable } from '@TutorShared/hooks/usePaginatedTable'; import { type IconCollection } from '@TutorShared/icons/types'; +import Paginator from '@TutorShared/molecules/Paginator'; +import Table, { type Column } from '@TutorShared/molecules/Table'; import { useGetContentBankContents } from '@TutorShared/services/content-bank'; import { styleUtils } from '@TutorShared/utils/style-utils'; import { type ContentBankContent, type QuizQuestionType } from '@TutorShared/utils/types'; + +import { type ContentSelectionForm } from '@CourseBuilderComponents/modals/ContentBankContentSelectModal'; + import FilterFields from './FilterFields'; import SearchField from './SearchField'; type SortDirection = 'asc' | 'desc'; +type QuestionTypeOption = { + label: string; + value: QuizQuestionType; + icon: IconCollection; + isPro: boolean; +}; + +const ALL_QUESTION_TYPE_OPTIONS: QuestionTypeOption[] = [ + { + label: __('True/False', 'tutor'), + value: 'true_false', + icon: 'quizTrueFalse', + isPro: false, + }, + { + label: __('Multiple Choice', 'tutor'), + value: 'multiple_choice', + icon: 'quizMultiChoice', + isPro: false, + }, + { + label: __('Open Ended/Essay', 'tutor'), + value: 'open_ended', + icon: 'quizEssay', + isPro: false, + }, + { + label: __('Fill in the Blanks', 'tutor'), + value: 'fill_in_the_blank', + icon: 'quizFillInTheBlanks', + isPro: false, + }, + { + label: __('Short Answer', 'tutor'), + value: 'short_answer', + icon: 'quizShortAnswer', + isPro: true, + }, + { + label: __('Matching', 'tutor'), + value: 'matching', + icon: 'quizImageMatching', + isPro: true, + }, + { + label: __('Image Answering', 'tutor'), + value: 'image_answering', + icon: 'quizImageAnswer', + isPro: true, + }, + { + label: __('Ordering', 'tutor'), + value: 'ordering', + icon: 'quizOrdering', + isPro: true, + }, + { + label: __('Mark in the image', 'tutor'), + value: 'draw_image', + icon: 'quizMarkInTheImage', + isPro: true, + }, + { + label: __('Range', 'tutor'), + value: 'scale', + icon: 'quizRange', + isPro: true, + }, + { + label: __('Pin', 'tutor'), + value: 'pin_image', + icon: 'quizPin', + isPro: true, + }, + { + label: __('Graph', 'tutor'), + value: 'coordinates', + icon: 'quizGraph', + isPro: true, + }, + { + label: __('Puzzle', 'tutor'), + value: 'puzzle', + icon: 'quizPuzzle', + isPro: true, + }, +]; + +const questionTypeOptions = tutorConfig.is_legacy_learning_mode + ? ALL_QUESTION_TYPE_OPTIONS.filter( + (option) => + option.value !== 'draw_image' && + option.value !== 'pin_image' && + option.value !== 'scale' && + option.value !== 'coordinates' && + option.value !== 'puzzle', + ) + : ALL_QUESTION_TYPE_OPTIONS; + const QuestionListTable = () => { const { pageInfo, onPageChange, itemsPerPage, onFilterItems } = usePaginatedTable(); const form = useFormContext(); @@ -82,73 +184,23 @@ const QuestionListTable = () => { }); }; - const questionTypeOptions: { - label: string; - value: QuizQuestionType; - icon: IconCollection; - isPro: boolean; - }[] = [ - { - label: __('True/False', 'tutor'), - value: 'true_false', - icon: 'quizTrueFalse', - isPro: false, - }, - { - label: __('Multiple Choice', 'tutor'), - value: 'multiple_choice', - icon: 'quizMultiChoice', - isPro: false, - }, - { - label: __('Open Ended/Essay', 'tutor'), - value: 'open_ended', - icon: 'quizEssay', - isPro: false, - }, - { - label: __('Fill in the Blanks', 'tutor'), - value: 'fill_in_the_blank', - icon: 'quizFillInTheBlanks', - isPro: false, - }, - { - label: __('Short Answer', 'tutor'), - value: 'short_answer', - icon: 'quizShortAnswer', - isPro: true, - }, - { - label: __('Matching', 'tutor'), - value: 'matching', - icon: 'quizImageMatching', - isPro: true, - }, - { - label: __('Image Answering', 'tutor'), - value: 'image_answering', - icon: 'quizImageAnswer', - isPro: true, - }, - { - label: __('Ordering', 'tutor'), - value: 'ordering', - icon: 'quizOrdering', - isPro: true, - }, - ]; - const columns: Column[] = [ { Header: totalItems ? ( - 0 && !handleAllIsChecked() && selectedContents.length > 0} - aria-label={__('Select all questions', 'tutor')} - /> +
    event.stopPropagation()} + onMouseDown={(event) => event.stopPropagation()} + css={styles.headerCheckboxWrapper} + > + 0 && !handleAllIsChecked() && selectedContents.length > 0} + aria-label={__('Select all questions', 'tutor')} + /> +
    ) : ( __('# Title', 'tutor') ), @@ -341,6 +393,10 @@ const styles = { ${typography.small('regular')}; color: ${colorTokens.text.hints}; `, + headerCheckboxWrapper: css` + display: flex; + align-items: center; + `, checkboxLabel: css` ${styleUtils.display.flex()}; align-items: center; diff --git a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/SearchField.tsx b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/SearchField.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/SearchField.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/SearchField.tsx index b0472e7dbe..aa718f1f46 100644 --- a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/SearchField.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/SearchField.tsx @@ -1,10 +1,12 @@ -import { __ } from '@wordpress/i18n'; import { useEffect } from 'react'; import { Controller } from 'react-hook-form'; - import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import FormInputWithContent from '@TutorShared/components/fields/FormInputWithContent'; + import { colorTokens } from '@TutorShared/config/styles'; import { useDebounce } from '@TutorShared/hooks/useDebounce'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; diff --git a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/index.tsx b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/index.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/index.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/index.tsx index 836720acf0..76056ddf44 100644 --- a/assets/react/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/index.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/index.tsx @@ -1,19 +1,22 @@ +import { FormProvider } from 'react-hook-form'; import { css } from '@emotion/react'; import { __ } from '@wordpress/i18n'; -import { FormProvider } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; +import SVGIcon from '@TutorShared/atoms/SVGIcon'; + import BasicModalWrapper from '@TutorShared/components/modals/BasicModalWrapper'; import type { ModalProps } from '@TutorShared/components/modals/Modal'; -import CollectionListTable from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/CollectionListTable'; -import { type Content, useAddContentBankContentToCourseMutation } from '@CourseBuilderServices/curriculum'; -import { getCourseId } from '@CourseBuilderUtils/utils'; -import SVGIcon from '@TutorShared/atoms/SVGIcon'; import { spacing } from '@TutorShared/config/styles'; import Show from '@TutorShared/controls/Show'; import { useFormWithGlobalError } from '@TutorShared/hooks/useFormWithGlobalError'; import { type Collection, type ContentBankContent, type ID, type QuizQuestion } from '@TutorShared/utils/types'; + +import CollectionListTable from '@CourseBuilderComponents/modals/ContentBankContentSelectModal/CollectionListTable'; +import { type Content, useAddContentBankContentToCourseMutation } from '@CourseBuilderServices/curriculum'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + import ContentListTable from './ContentListTable'; import QuestionListTable from './QuestionListTable'; diff --git a/assets/react/v3/entries/course-builder/components/modals/LessonModal.tsx b/assets/src/js/v3/entries/course-builder/components/modals/LessonModal.tsx similarity index 99% rename from assets/react/v3/entries/course-builder/components/modals/LessonModal.tsx rename to assets/src/js/v3/entries/course-builder/components/modals/LessonModal.tsx index 2d6d34c8f8..cdff137c62 100644 --- a/assets/react/v3/entries/course-builder/components/modals/LessonModal.tsx +++ b/assets/src/js/v3/entries/course-builder/components/modals/LessonModal.tsx @@ -1,8 +1,8 @@ +import { useEffect } from 'react'; +import { Controller } from 'react-hook-form'; import { css } from '@emotion/react'; import { useQueryClient } from '@tanstack/react-query'; import { __, sprintf } from '@wordpress/i18n'; -import { useEffect } from 'react'; -import { Controller } from 'react-hook-form'; import Button from '@TutorShared/atoms/Button'; import { LoadingOverlay } from '@TutorShared/atoms/LoadingSpinner'; @@ -19,21 +19,10 @@ import FormSwitch from '@TutorShared/components/fields/FormSwitch'; import FormTopicPrerequisites from '@TutorShared/components/fields/FormTopicPrerequisites'; import FormVideoInput, { type CourseVideo } from '@TutorShared/components/fields/FormVideoInput'; import FormWPEditor from '@TutorShared/components/fields/FormWPEditor'; +import H5PContentListModal from '@TutorShared/components/modals/H5PContentListModal'; import { type ModalProps, useModal } from '@TutorShared/components/modals/Modal'; import ModalWrapper from '@TutorShared/components/modals/ModalWrapper'; -import CourseBuilderInjectionSlot from '@CourseBuilderComponents/CourseBuilderSlot'; -import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; -import { type ContentDripType } from '@CourseBuilderServices/course'; -import { - convertLessonDataToPayload, - type CourseTopic, - type Lesson, - useLessonDetailsQuery, - useSaveLessonMutation, -} from '@CourseBuilderServices/curriculum'; -import { getCourseId } from '@CourseBuilderUtils/utils'; -import H5PContentListModal from '@TutorShared/components/modals/H5PContentListModal'; import { tutorConfig } from '@TutorShared/config/config'; import { Addons, CURRENT_VIEWPORT, TutorRoles, VisibilityControlKeys } from '@TutorShared/config/constants'; import { borderRadius, Breakpoint, colorTokens, spacing, zIndex } from '@TutorShared/config/styles'; @@ -47,6 +36,18 @@ import { type H5PContent, type ID } from '@TutorShared/utils/types'; import { findSlotFields, formatBytes, isAddonEnabled, normalizeLineEndings } from '@TutorShared/utils/util'; import { maxLimitRule } from '@TutorShared/utils/validation'; +import CourseBuilderInjectionSlot from '@CourseBuilderComponents/CourseBuilderSlot'; +import { useCourseBuilderSlot } from '@CourseBuilderContexts/CourseBuilderSlotContext'; +import { type ContentDripType } from '@CourseBuilderServices/course'; +import { + convertLessonDataToPayload, + type CourseTopic, + type Lesson, + useLessonDetailsQuery, + useSaveLessonMutation, +} from '@CourseBuilderServices/curriculum'; +import { getCourseId } from '@CourseBuilderUtils/utils'; + interface LessonModalProps extends ModalProps { lessonId?: ID; topicId: ID; @@ -143,11 +144,11 @@ const LessonModal = ({ const hasRightSidebar = Boolean( contentDripType !== '' || - isVideoPlaybackTimeVisible || - isFeaturedImageVisible || - isVideoVisible || - isExerciseFilesVisible || - (isAddonEnabled(Addons.TUTOR_COURSE_PREVIEW) && isLessonPreviewVisible), + isVideoPlaybackTimeVisible || + isFeaturedImageVisible || + isVideoVisible || + isExerciseFilesVisible || + (isAddonEnabled(Addons.TUTOR_COURSE_PREVIEW) && isLessonPreviewVisible), ); useEffect(() => { diff --git a/assets/src/js/v3/entries/course-builder/components/modals/QuestionPreviewModal.tsx b/assets/src/js/v3/entries/course-builder/components/modals/QuestionPreviewModal.tsx new file mode 100644 index 0000000000..9665333626 --- /dev/null +++ b/assets/src/js/v3/entries/course-builder/components/modals/QuestionPreviewModal.tsx @@ -0,0 +1,735 @@ +import { useEffect, useLayoutEffect, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { css } from '@emotion/react'; +import { __ } from '@wordpress/i18n'; + +import SVGIcon from '@TutorShared/atoms/SVGIcon'; +import WPEditor from '@TutorShared/atoms/WPEditor'; + +import FocusTrap from '@TutorShared/components/FocusTrap'; +import { type ModalProps } from '@TutorShared/components/modals/Modal'; + +import { tutorConfig } from '@TutorShared/config/config'; +import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles'; +import Show from '@TutorShared/controls/Show'; +import Tabs from '@TutorShared/molecules/Tabs'; +import { styleUtils } from '@TutorShared/utils/style-utils'; +import { type QuizQuestion, type QuizQuestionType } from '@TutorShared/utils/types'; + +import CoordinatesPreview from './question-previews/CoordinatesPreview'; +import DrawImagePreview from './question-previews/DrawImagePreview'; +import FillInTheBlankPreview from './question-previews/FillInTheBlankPreview'; +import ImageAnsweringPreview from './question-previews/ImageAnsweringPreview'; +import MatchingPreview from './question-previews/MatchingPreview'; +import MultipleChoicePreview from './question-previews/MultipleChoicePreview'; +import OpenEndedPreview from './question-previews/OpenEndedPreview'; +import OrderingPreview from './question-previews/OrderingPreview'; +import PinImagePreview from './question-previews/PinImagePreview'; +import PuzzlePreview from './question-previews/PuzzlePreview'; +import ScalePreview from './question-previews/ScalePreview'; +import TrueFalsePreview from './question-previews/TrueFalsePreview'; +import UnsupportedPreview from './question-previews/UnsupportedPreview'; + +interface QuestionPreviewModalProps extends ModalProps { + question: QuizQuestion; + onClose: () => void; +} + +const isTutorPro = tutorConfig.tutor_pro_url; +/** + * Tutor Pro bundles several quiz question styles in `front.css`, including puzzle + * (`tutor-pro/assets/src/scss/quiz/_quiz_puzzle.scss` → `front.css`), same pattern as the live quiz UI. + */ +const TUTOR_PRO_FRONT_STYLESHEET_PATH = '/wp-content/plugins/tutor-pro/assets/css/front.css'; +const IFRAME_SRC_DOC = + '
    '; +const PREVIEW_STYLESHEET_PATHS = [ + '/wp-content/plugins/tutor/assets/css/tutor-learning-area.min.css', + '/wp-content/plugins/tutor/assets/css/tutor-core.min.css', + '/wp-content/plugins/tutor/assets/css/tutor-kids.min.css', +]; + +if (isTutorPro) { + PREVIEW_STYLESHEET_PATHS.push(TUTOR_PRO_FRONT_STYLESHEET_PATH); +} + +// Prefetch the stylesheets automatically so they are loaded in the background +// before the user even opens the preview modal. +if (typeof document !== 'undefined') { + const siteUrl = tutorConfig.site_url.replace(/\/$/, ''); + if (siteUrl) { + PREVIEW_STYLESHEET_PATHS.forEach((path) => { + const link = document.createElement('link'); + link.rel = 'prefetch'; + link.as = 'style'; + link.href = `${siteUrl}${path}`; + document.head.appendChild(link); + }); + } +} + +const QuestionPreviewModal = ({ question, onClose }: QuestionPreviewModalProps) => { + const [activeTab, setActiveTab] = useState<'desktop' | 'mobile'>('desktop'); + const [cssLoaded, setCssLoaded] = useState(false); + const iframeRef = useRef(null); + const [iframeDocument, setIframeDocument] = useState(null); + const previewQuestionStyleType = getPreviewQuestionStyleType(question); + + useEffect(() => { + const iframe = iframeRef.current; + + if (!iframe) { + return; + } + + const handleLoad = () => { + setIframeDocument(iframe.contentDocument); + }; + + handleLoad(); + iframe.addEventListener('load', handleLoad); + + return () => { + iframe.removeEventListener('load', handleLoad); + }; + }, []); + + useEffect(() => { + if (!iframeDocument) { + return; + } + + iframeDocument.querySelectorAll('[data-preview-cloned="true"]').forEach((node) => node.remove()); + iframeDocument.querySelectorAll('[data-preview-external-style="true"]').forEach((node) => node.remove()); + + Array.from(document.querySelectorAll('style, link[rel="stylesheet"]')).forEach((node) => { + const clone = node.cloneNode(true) as HTMLElement; + clone.setAttribute('data-preview-cloned', 'true'); + iframeDocument.head.appendChild(clone); + }); + + const siteUrl = tutorConfig.site_url.replace(/\/$/, ''); + + if (!siteUrl || PREVIEW_STYLESHEET_PATHS.length === 0) { + setCssLoaded(true); + return; + } + + let loadedCount = 0; + const totalLinks = PREVIEW_STYLESHEET_PATHS.length; + + const handleLoadOrError = () => { + loadedCount++; + if (loadedCount === totalLinks) { + setCssLoaded(true); + } + }; + + PREVIEW_STYLESHEET_PATHS.forEach((path) => { + const link = iframeDocument.createElement('link'); + link.rel = 'stylesheet'; + link.href = `${siteUrl}${path}`; + link.setAttribute('data-preview-external-style', 'true'); + link.onload = handleLoadOrError; + link.onerror = handleLoadOrError; + iframeDocument.head.appendChild(link); + }); + }, [iframeDocument]); + + useEffect(() => { + if (!iframeDocument?.body) { + return; + } + + iframeDocument.body.setAttribute('data-preview-device', activeTab); + + if (tutorConfig.settings?.learning_mode === 'kids') { + iframeDocument.body.setAttribute('data-tutor-ui', 'kids'); + return; + } + + iframeDocument.body.removeAttribute('data-tutor-ui'); + }, [activeTab, iframeDocument]); + + useEffect(() => { + if (!iframeDocument) { + return; + } + + const iframeWindow = iframeDocument.defaultView; + if (!iframeWindow) { + return; + } + + const addKeyboardNav = () => { + iframeDocument.body?.classList.add('tutor-keyboard-nav'); + }; + + const removeKeyboardNav = () => { + iframeDocument.body?.classList.remove('tutor-keyboard-nav'); + }; + + const handleTab = (e: KeyboardEvent) => { + if (e.key === 'Tab') { + addKeyboardNav(); + } + }; + + // Listen on BOTH outer window and iframe window. + // When Tab moves focus from outside the page into the iframe the keydown + // fires on the outer window, not iframeWindow — so we need both to catch + // the very first Tab that lands on the first input inside the iframe. + window.addEventListener('keydown', handleTab); + iframeWindow.addEventListener('keydown', handleTab); + window.addEventListener('mousedown', removeKeyboardNav); + iframeWindow.addEventListener('mousedown', removeKeyboardNav); + window.addEventListener('touchstart', removeKeyboardNav); + iframeWindow.addEventListener('touchstart', removeKeyboardNav); + + return () => { + window.removeEventListener('keydown', handleTab); + iframeWindow.removeEventListener('keydown', handleTab); + window.removeEventListener('mousedown', removeKeyboardNav); + iframeWindow.removeEventListener('mousedown', removeKeyboardNav); + window.removeEventListener('touchstart', removeKeyboardNav); + iframeWindow.removeEventListener('touchstart', removeKeyboardNav); + }; + }, [iframeDocument]); + + useLayoutEffect(() => { + if (!iframeDocument || !iframeRef.current) { + return; + } + + const iframe = iframeRef.current; + const root = iframeDocument.getElementById('preview-root'); + + if (!root) { + return; + } + + const syncHeight = () => { + iframe.style.height = `${root.scrollHeight}px`; + }; + + syncHeight(); + + if (typeof ResizeObserver === 'undefined') { + const frame = requestAnimationFrame(syncHeight); + + return () => { + cancelAnimationFrame(frame); + }; + } + + const resizeObserver = new ResizeObserver(() => { + syncHeight(); + }); + + resizeObserver.observe(root); + + return () => { + resizeObserver.disconnect(); + }; + }, [activeTab, iframeDocument, question]); + + return ( + +
    +
    + + +
    +
    + diff --git a/templates/single/video/youtube.php b/templates/single/video/youtube.php index 6afedb54df..0c68d95732 100644 --- a/templates/single/video/youtube.php +++ b/templates/single/video/youtube.php @@ -23,7 +23,7 @@
    - +
    diff --git a/templates/template-part/form-retrieve-password.php b/templates/template-part/form-retrieve-password.php index cee67541d6..fa8c57550b 100644 --- a/templates/template-part/form-retrieve-password.php +++ b/templates/template-part/form-retrieve-password.php @@ -12,14 +12,14 @@ defined( 'ABSPATH' ) || exit; do_action( 'tutor_before_reset_password_form' ); ?> - -
    +
    + -

    +

    - - + +
    + +
    @@ -42,8 +44,10 @@
    - - + +
    + +
    @@ -55,7 +59,7 @@
    -
    @@ -63,5 +67,6 @@
    +
    diff --git a/templates/template-part/retrieve-password.php b/templates/template-part/retrieve-password.php index dc3d65897e..d89ca9bde2 100644 --- a/templates/template-part/retrieve-password.php +++ b/templates/template-part/retrieve-password.php @@ -18,41 +18,42 @@ } else { do_action( 'tutor_before_retrieve_password_form' ); ?> - -
    - - - -

    - -
    -
    -
    - - +
    + + +
    + + + +

    + +
    +
    +
    + +
    + +
    +
    -
    -
    +
    - + -
    -
    -
    - +
    +
    +
    + +
    -
    - - + +
    + * @link https://themeum.com + * @since 4.0.0 + */ + +defined( 'ABSPATH' ) || exit; + +use Tutor\Components\Avatar; +use Tutor\Components\Constants\Size; +use TUTOR\Dashboard; +use TUTOR\Icon; +use Tutor\Components\SvgIcon; +use Tutor\Helpers\UrlHelper; +use TUTOR\Input; + +$user_id = Input::get( 'student_id', get_current_user_id(), Input::TYPE_INT ); +$student_details = get_userdata( $user_id ); +$student_meta = get_user_meta( $user_id ); +$cover_photo_url = tutor_utils()->get_cover_photo_url( $user_id ); +$edit_profile_url = Dashboard::get_account_page_url( 'settings' ) . '?tab=account'; +$phone_number = $student_meta['phone_number'][0] ?? ''; + +$social_fields = tutor_utils()->tutor_user_social_icons(); +$social_links = array(); + +foreach ( $social_fields as $meta_key => $field ) { + $url = $student_meta[ $meta_key ][0] ?? ''; + $social_links[ $meta_key ] = array( + 'url' => $url, + 'icon' => $field['svg_icon'] ?? Icon::GLOBE, + 'label' => $field['label'], + ); +} +?> + +
    +
    + user( $user_id )->size( Size::SIZE_104 )->render(); ?> + is_dashboard_page( 'account/profile' ) ) : ?> + + name( Icon::EDIT_2 )->render(); ?> + + + +
    +
    +
    +
    + + + + + + +
    +
    +
    + +
    + + + + + +
    + + + +
    +
    + name( Icon::MEMBER )->render(); ?> + + user_registered, 'F j, Y' ) ); ?> +
    +
    +
    diff --git a/tests/phpunit/CourseModelTest.php b/tests/phpunit/CourseModelTest.php new file mode 100644 index 0000000000..e48462e95a --- /dev/null +++ b/tests/phpunit/CourseModelTest.php @@ -0,0 +1,144 @@ +post->create( + array( + 'post_type' => tutor()->lesson_post_type, + 'post_title' => 'Test Lesson', + 'post_status' => 'publish', + ) + ); + + $course_id = self::factory()->post->create( + array( + 'post_type' => tutor()->course_post_type, + 'post_title' => 'Test Course', + 'post_status' => 'publish', + ) + ); + + // When user is guest. + $user_id = 0; + + $args = array( + 'current_post_type' => tutor()->lesson_post_type, + 'current_post_id' => $lesson_id, + 'course_id' => $course_id, + 'is_public' => false, + 'is_enrolled' => false, + ); + + $res = CourseModel::has_course_content_access( $args ); + + $this->assertFalse( $res ); + + // Test when user is logged-in. + + $user_id = self::factory()->user->create( + array( + 'role' => 'subscriber', + ) + ); + + wp_set_current_user( $user_id ); + + $res = CourseModel::has_course_content_access( $args ); + + $this->assertFalse( $res ); + + // Test when course is public & not enrolled. + $args = array( + 'current_post_type' => tutor()->lesson_post_type, + 'current_post_id' => $lesson_id, + 'course_id' => $course_id, + 'is_public' => true, + 'is_enrolled' => false, + ); + + $res = CourseModel::has_course_content_access( $args ); + + $this->assertTrue( $res ); + + // Test when user is logged & accessing protected quiz without enrollment. + + $quiz_id = self::factory()->post->create( + array( + 'post_type' => tutor()->quiz_post_type, + 'post_title' => 'Test quiz', + 'post_status' => 'publish', + ) + ); + + $args = array( + 'current_post_type' => tutor()->quiz_post_type, + 'current_post_id' => $quiz_id, + 'course_id' => $course_id, + 'is_public' => false, + 'is_enrolled' => false, + ); + + $res = CourseModel::has_course_content_access( $args ); + $this->assertFalse( $res ); + + // When enrolled + $args = array( + 'current_post_type' => tutor()->quiz_post_type, + 'current_post_id' => $quiz_id, + 'course_id' => $course_id, + 'is_public' => false, + 'is_enrolled' => true, + ); + + $res = CourseModel::has_course_content_access( $args ); + $this->assertTrue( $res ); + + // Test google meeting. + $meet_id = self::factory()->post->create( + array( + 'post_type' => tutor()->meet_post_type, + 'post_title' => 'Test google meet', + 'post_status' => 'publish', + ) + ); + + $args = array( + 'current_post_type' => tutor()->meet_post_type, + 'current_post_id' => $meet_id, + 'course_id' => $course_id, + 'is_public' => false, + 'is_enrolled' => false, + ); + + $res = CourseModel::has_course_content_access( $args ); + $this->assertFalse( $res ); + + // When enrollment is true. + $args = array( + 'current_post_type' => tutor()->meet_post_type, + 'current_post_id' => $meet_id, + 'course_id' => $course_id, + 'is_public' => false, + 'is_enrolled' => true, + ); + + $res = CourseModel::has_course_content_access( $args ); + $this->assertTrue( $res ); + + } +} diff --git a/tests/phpunit/LessonContentInfoTest.php b/tests/phpunit/LessonContentInfoTest.php new file mode 100644 index 0000000000..d5d98b06ce --- /dev/null +++ b/tests/phpunit/LessonContentInfoTest.php @@ -0,0 +1,76 @@ +factory()->post->create( + array( + 'post_type' => tutor()->lesson_post_type, + 'post_title' => 'Test Lesson', + 'post_status' => 'publish', + ) + ); + + $this->post = get_post( $post_id ); + } + + + public function test_get_content_type_info_without_video() { + $result = Lesson::get_content_type_info( $this->post ); + $expected = 'Reading'; + $this->assertSame( $result, $expected ); + } + + public function test_get_content_type_info_with_video_time() { + // Set video meta with runtime. + $video_data = array( + 'source' => 'youtube', + 'source_youtube' => 'https://www.youtube.com/watch?v=test123', + 'playtime' => '00:10:36', + ); + update_post_meta( $this->post->ID, '_video', $video_data ); + + $result = Lesson::get_content_type_info( $this->post ); + + $this->assertSame( 'Video - 00:10:36 mins', $result ); + } + + public function test_get_content_type_info_with_video_no_time_set() { + // Set video meta without runtime + $video_data = array( + 'source' => 'youtube', + 'source_youtube' => 'https://www.youtube.com/watch?v=test123', + ); + update_post_meta( $this->post->ID, '_video', $video_data ); + + $result = Lesson::get_content_type_info( $this->post ); + + $this->assertSame( 'Video - 00:00:00 mins', $result ); + } + + public function test_get_content_type_info_with_video_false_time_set() { + // Set video meta with runtime set to zeros/empty + $video_data = array( + 'source' => 'youtube', + 'source_youtube' => 'https://www.youtube.com/watch?v=test123', + 'playtime' => '00:00:00', + ); + update_post_meta( $this->post->ID, '_video', $video_data ); + + $result = Lesson::get_content_type_info( $this->post ); + + // Should return "Reading" when playtime is "00:00:00" + $this->assertSame( 'Video - 00:00:00 mins', $result ); + } +} diff --git a/tests/phpunit/QueryHelperTest.php b/tests/phpunit/QueryHelperTest.php index 59833d87b8..bcb608f8cb 100644 --- a/tests/phpunit/QueryHelperTest.php +++ b/tests/phpunit/QueryHelperTest.php @@ -68,6 +68,53 @@ public function test_prepare_set_clause() { * * @return void */ + public function test_prepare_where_clause() { + + $test1 = array( + 'age' => 18, + 'height' => array( '>=', '5feet7inch' ), + 'hobbies' => array( 'coding', 'biking', 'swimming' ), + ); + $expect1 = "age = 18 AND height >= '5feet7inch' AND hobbies IN ('coding','biking','swimming')"; + $actual1 = QueryHelper::prepare_where_clause( $test1 ); + + $test2 = array( + 'salary' => array( 'BETWEEN', array( 10, 20 ) ), + 'name' => array( 'NOT BETWEEN', array( 'b', 'c' ) ), + ); + + $expect2 = "salary BETWEEN 10 AND 20 AND name NOT BETWEEN 'b' AND 'c'"; + $actual2 = QueryHelper::prepare_where_clause( $test2 ); + + $test3 = array( + 'name' => array( 'LIKE', 'test' ), + 'age' => array( 'NOT IN', array( 18, 19, 20 ) ), + ); + + $expect3 = "name LIKE 'test' AND age NOT IN (18,19,20)"; + $actual3 = QueryHelper::prepare_where_clause( $test3 ); + + $test4 = array( + 'name' => 'NULL', + 'age' => array( 'IS NOT', 'NULL' ), + ); + + $expect4 = 'name IS NULL AND age IS NOT NULL'; + $actual4 = QueryHelper::prepare_where_clause( $test4 ); + + $this->assertEquals( $expect1, trim( $actual1 ) ); + $this->assertEquals( $expect2, trim( $actual2 ) ); + $this->assertEquals( $expect3, trim( $actual3 ) ); + $this->assertEquals( $expect4, trim( $actual4 ) ); + } + + /** + * Test QueryHelper Raw query. + * + * @since 3.6.0 + * + * @return void + */ public function test_prepare_raw_query() { $case_1 = array( "username = '%s'" => array( @@ -88,7 +135,7 @@ public function test_prepare_raw_query() { ); $case_3 = array( - 'id' => array( + 'id' => array( 'BETWEEN', array( 10, 20 ), ), diff --git a/traits/JsonResponse.php b/traits/JsonResponse.php index ca408d8cb0..4a6fe4fd96 100644 --- a/traits/JsonResponse.php +++ b/traits/JsonResponse.php @@ -78,8 +78,9 @@ public function response_success( $message, $status_code = 200 ) { public function response_fail( $message, $status_code = 200 ) { wp_send_json( array( - 'success' => false, - 'message' => $message, + 'status_code' => $status_code, + 'success' => false, + 'message' => $message, ), $status_code ); @@ -96,8 +97,9 @@ public function response_fail( $message, $status_code = 200 ) { public function response_data( $data, $status_code = 200 ) { wp_send_json( array( - 'success' => true, - 'data' => $data, + 'status_code' => $status_code, + 'success' => true, + 'data' => $data, ), $status_code ); diff --git a/tsconfig.json b/tsconfig.json index e382701e7d..071c6ca8c4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,6 @@ { "compilerOptions": { - "target": "es5", - "downlevelIteration": true, + "target": "es2015", "lib": ["dom", "dom.iterable", "esnext", "es5", "es6"], "allowJs": true, "skipLibCheck": true, @@ -12,32 +11,39 @@ "sourceMap": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "jsxImportSource": "@emotion/react", - "baseUrl": ".", "types": ["node"], - "typeRoots": ["./node_modules/@types/", "./assets/react/@types"], + "typeRoots": ["./node_modules/@types/", "./assets/src/js/@types"], "paths": { - "@TutorShared/*": ["assets/react/v3/shared/*"], - "@SharedImages/*": ["assets/react/v3/public/images/*"], - "@CourseBuilderComponents/*": ["assets/react/v3/entries/course-builder/components/*"], - "@CourseBuilderServices/*": ["assets/react/v3/entries/course-builder/services/*"], - "@CourseBuilderConfig/*": ["assets/react/v3/entries/course-builder/config/*"], - "@CourseBuilderPages/*": ["assets/react/v3/entries/course-builder/pages/*"], - "@CourseBuilderUtils/*": ["assets/react/v3/entries/course-builder/utils/*"], - "@CourseBuilderPublic/*": ["assets/react/v3/entries/course-builder/public/*"], - "@CourseBuilderContexts/*": ["assets/react/v3/entries/course-builder/contexts/*"], - "@OrderDetails/*": ["assets/react/v3/entries/order-details/*"], - "@CouponDetails/*": ["assets/react/v3/entries/coupon-details/*"], - "@AddonList/*": ["assets/react/v3/entries/addon-list/*"], - "@ImportExport/*": ["assets/react/v3/entries/import-export/*"] + "@Core/*": ["./assets/core/*"], + "@TutorShared/*": ["./assets/src/js/v3/shared/*"], + "@SharedImages/*": ["./assets/src/js/v3/public/images/*"], + "@CourseBuilderComponents/*": ["./assets/src/js/v3/entries/course-builder/components/*"], + "@CourseBuilderServices/*": ["./assets/src/js/v3/entries/course-builder/services/*"], + "@CourseBuilderConfig/*": ["./assets/src/js/v3/entries/course-builder/config/*"], + "@CourseBuilderPages/*": ["./assets/src/js/v3/entries/course-builder/pages/*"], + "@CourseBuilderUtils/*": ["./assets/src/js/v3/entries/course-builder/utils/*"], + "@CourseBuilderPublic/*": ["./assets/src/js/v3/entries/course-builder/public/*"], + "@CourseBuilderContexts/*": ["./assets/src/js/v3/entries/course-builder/contexts/*"], + "@OrderDetails/*": ["./assets/src/js/v3/entries/order-details/*"], + "@CouponDetails/*": ["./assets/src/js/v3/entries/coupon-details/*"], + "@AddonList/*": ["./assets/src/js/v3/entries/addon-list/*"], + "@ImportExport/*": ["./assets/src/js/v3/entries/import-export/*"], + "@FrontendComponents/*": ["./assets/src/js/frontend/components/*"], + "@FrontendTypes/*": ["./assets/src/js/frontend/types/*"], + "@FrontendServices/*": ["./assets/src/js/frontend/services/*"], + "@FrontendDashboard/*": ["./assets/src/js/frontend/dashboard/*"], + "@LearningArea/*": ["./assets/src/js/frontend/learning-area/*"], + "@Cypress/*": ["./cypress/*"], + "@TutorProQuiz/*": ["../tutor-pro/assets/src/js/quiz-type/*"] } }, "include": [ - "./assets/react/v3", + "./assets/src/js/v3", "./stories/**/*.{ts,tsx}", "./stories/**/*.stories.tsx", "./.storybook/**/*.tsx", diff --git a/tutor.php b/tutor.php index e4a057a081..cabe8d9966 100644 --- a/tutor.php +++ b/tutor.php @@ -2,13 +2,13 @@ /** * Plugin Name: Tutor LMS * Plugin URI: https://tutorlms.com - * Description: Tutor is a complete solution for creating a Learning Management System in WordPress way. It can help you to create small to large scale online education site very conveniently. Power features like report, certificate, course preview, private file sharing make Tutor a robust plugin for any educational institutes. + * Description: Build and manage professional online courses with unlimited lessons, a flexible quiz engine, and a complete student learning experience. No coding needed. * Author: Themeum - * Version: 3.9.6 + * Version: 4.0.0-rc.2 * Author URI: https://themeum.com * Requires PHP: 7.4 * Requires at least: 5.3 - * Tested up to: 6.9 + * Tested up to: 7.0 * License: GPLv2 or later * Text Domain: tutor * @@ -26,8 +26,9 @@ * * @since 1.0.0 */ -define( 'TUTOR_VERSION', '3.9.6' ); +define( 'TUTOR_VERSION', '4.0.0-rc.2' ); define( 'TUTOR_FILE', __FILE__ ); +define( 'TUTOR_ENV', 'PROD' ); // DEV || PROD. /** * Load text domain for translations. diff --git a/v2-library/src/js/modal.js b/v2-library/src/js/modal.js index 38bc8f04db..579bc63d30 100644 --- a/v2-library/src/js/modal.js +++ b/v2-library/src/js/modal.js @@ -1,47 +1,199 @@ -let enterPressed = false; -document.addEventListener('keypress', function (e) { - if (e.key === 'Enter') { - enterPressed = true; +/** + * Tutor Modal – Accessible & Keyboard-friendly + * + * Features: + * - Focus trap (Tab / Shift+Tab cycle within the modal) + * - Escape key closes topmost modal + * - Focus management: prioritizes [autofocus] then first input + * - Focus restoration on close (supports stacked modals) + * - Body scroll lock + * - Auto-initialization for modals active on page load or class toggle + * + * @since 1.0.0 + */ + +(function () { + const FOCUSABLE_SELECTOR = [ + 'a[href]:not([disabled]):not([tabindex="-1"])', + 'button:not([disabled]):not([tabindex="-1"])', + 'textarea:not([disabled]):not([tabindex="-1"])', + 'input:not([disabled]):not([tabindex="-1"]):not([type="hidden"])', + 'select:not([disabled]):not([tabindex="-1"])', + '[tabindex]:not([tabindex="-1"])', + ].join(', '); + + /** @type {HTMLElement[]} Stack of elements that opened modals – for focus restoration */ + const triggerStack = []; + + /** + * Get the topmost active modal in the DOM. + * + * @returns {HTMLElement|null} + */ + function getTopmostModal() { + const activeModals = document.querySelectorAll('.tutor-modal.tutor-is-active'); + return activeModals.length ? activeModals[activeModals.length - 1] : null; } -}); -document.addEventListener('click', (e) => { - const attr = 'data-tutor-modal-target'; - const closeAttr = 'data-tutor-modal-close'; - const overlay = 'tutor-modal-overlay'; + /** + * Open a modal by element reference. + * + * @param {HTMLElement} modal The `.tutor-modal` element to activate. + * @param {HTMLElement} [trigger] The element that triggered the open (for focus restore). + */ + function openModal(modal, trigger) { + if (!modal) return; + + // Save the trigger element to the stack for focus restoration. + const triggerToSave = trigger || document.activeElement; + if (triggerToSave && !triggerStack.includes(triggerToSave)) { + triggerStack.push(triggerToSave); + } + + modal.classList.add('tutor-is-active'); + modal.setAttribute('aria-hidden', 'false'); + document.body.classList.add('tutor-modal-open'); + + // Move focus into the modal. + requestAnimationFrame(() => { + const autofocus = modal.querySelector('[autofocus]'); + const firstInput = modal.querySelector('input:not([type="hidden"]), textarea, select'); + const firstFocusable = modal.querySelector(FOCUSABLE_SELECTOR); + + const target = autofocus || firstInput || firstFocusable; - if (enterPressed !== false) { - enterPressed = false; - return false; + if (target) { + target.focus(); + } else { + const modalWindow = modal.querySelector('.tutor-modal-window'); + if (modalWindow) { + modalWindow.setAttribute('tabindex', '-1'); + modalWindow.focus(); + } + } + }); + + // Dispatch legacy custom event. + window.dispatchEvent(new CustomEvent('tutor_modal_shown', { detail: trigger })); } - if ((e.target.hasAttribute(attr) || e.target.closest(`[${attr}]`))) { - e.preventDefault(); - const id = e.target.hasAttribute(attr) - ? e.target.getAttribute(attr) - : e.target.closest(`[${attr}]`).getAttribute(attr); - const modal = document.getElementById(id); + /** + * Close a modal by element reference. + * + * @param {HTMLElement} modal The `.tutor-modal` element to deactivate. + * @param {boolean} [restoreFocus=true] Whether to restore focus to the trigger. + */ + function closeModal(modal, restoreFocus = true) { + if (!modal) return; - if (modal) { - document.querySelectorAll('.tutor-modal.tutor-is-active').forEach((item) => item.classList.remove('tutor-is-active')); - modal.classList.add('tutor-is-active'); - document.body.classList.add("tutor-modal-open"); + modal.classList.remove('tutor-is-active'); + modal.setAttribute('aria-hidden', 'true'); + + // Only remove body class when no other modals are active. + if (!document.querySelector('.tutor-modal.tutor-is-active')) { + document.body.classList.remove('tutor-modal-open'); + } - const customEvent = new CustomEvent('tutor_modal_shown', {detail: e.target}); - window.dispatchEvent(customEvent); + if (restoreFocus && triggerStack.length) { + const lastTrigger = triggerStack.pop(); + if (lastTrigger && typeof lastTrigger.focus === 'function') { + lastTrigger.focus(); + } } } - if ( - e.target.hasAttribute(closeAttr) || - e.target.classList.contains(overlay) || - e.target.closest(`[${closeAttr}]`) - ) { - e.preventDefault(); - const modal = document.querySelectorAll('.tutor-modal.tutor-is-active'); - modal.forEach((m) => { - m.classList.remove('tutor-is-active'); - }); - document.body.classList.remove("tutor-modal-open"); + /** + * Trap focus within the topmost active modal. + */ + function trapFocus(e) { + const activeModal = getTopmostModal(); + if (!activeModal) return; + + const focusableEls = activeModal.querySelectorAll(FOCUSABLE_SELECTOR); + if (!focusableEls.length) return; + + const firstEl = focusableEls[0]; + const lastEl = focusableEls[focusableEls.length - 1]; + + if (e.shiftKey) { + if (document.activeElement === firstEl) { + e.preventDefault(); + lastEl.focus(); + } + } else { + if (document.activeElement === lastEl) { + e.preventDefault(); + firstEl.focus(); + } + } } -}); + + // Keyboard Listeners + document.addEventListener('keydown', (e) => { + const activeModal = getTopmostModal(); + if (!activeModal) return; + + if (e.key === 'Escape' || e.key === 'Esc') { + e.preventDefault(); + if (!activeModal.hasAttribute('data-tutor-modal-no-dismiss')) { + closeModal(activeModal); + } + } else if (e.key === 'Tab') { + trapFocus(e); + } + }); + + // Click Listeners + document.addEventListener('click', (e) => { + const attr = 'data-tutor-modal-target'; + const closeAttr = 'data-tutor-modal-close'; + const overlay = 'tutor-modal-overlay'; + + const openTrigger = e.target.hasAttribute(attr) ? e.target : e.target.closest(`[${attr}]`); + if (openTrigger) { + e.preventDefault(); + const id = openTrigger.getAttribute(attr); + const modal = document.getElementById(id); + if (modal) openModal(modal, openTrigger); + return; + } + + if (e.target.hasAttribute(closeAttr) || e.target.classList.contains(overlay) || e.target.closest(`[${closeAttr}]`)) { + e.preventDefault(); + const modal = e.target.closest('.tutor-modal.tutor-is-active'); + if (modal && !modal.hasAttribute('data-tutor-modal-no-dismiss')) { + closeModal(modal); + } else if (modal && !e.target.classList.contains(overlay) && !e.target.closest(`.${overlay}`)) { + // Allow explicit close buttons even on no-dismiss modals + if (e.target.hasAttribute(closeAttr) || e.target.closest(`[${closeAttr}]`)) { + closeModal(modal); + } + } + } + }); + + // MutationObserver to watch for class changes – Ultimate fix for legacy script interference. + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + const modal = mutation.target; + if (modal.classList.contains('tutor-is-active') && modal.getAttribute('aria-hidden') !== 'false') { + openModal(modal); + } + } + }); + }); + + // Initial setup & start observing + document.addEventListener('DOMContentLoaded', () => { + const modals = document.querySelectorAll('.tutor-modal'); + modals.forEach(modal => { + observer.observe(modal, { attributes: true, attributeFilter: ['class'] }); + + // Initialize already-active modals. + if (modal.classList.contains('tutor-is-active')) { + openModal(modal); + } + }); + }); +})(); diff --git a/v2-library/src/scss/components/_modal.scss b/v2-library/src/scss/components/_modal.scss index 1bc48fbeed..a2cfa7b983 100644 --- a/v2-library/src/scss/components/_modal.scss +++ b/v2-library/src/scss/components/_modal.scss @@ -352,18 +352,6 @@ } } // end of /.tutor-modal-ins-approval - @include breakpoint-max(mobile) { - .tutor-btn:not(.tutor-is-icon-btn) { - padding: 6px 20px !important; - width: max-content; - max-width: max-content; - height: auto !important; - font-size: 14px; - font-weight: 400; - line-height: 2; - } - } - // .tutor-modal.tutor-login-modal {} &.tutor-login-modal { .tutor-modal-root { diff --git a/v2-library/src/scss/elements/_buttons.scss b/v2-library/src/scss/elements/_buttons.scss index 9c2835d10f..18489b86f2 100644 --- a/v2-library/src/scss/elements/_buttons.scss +++ b/v2-library/src/scss/elements/_buttons.scss @@ -440,8 +440,3 @@ $disabled-color: #e9e9ea !default; transform: rotate(360deg); } } - -// google auth button -#tutor-pro-google-authentication { - width: 400px; -} diff --git a/v2-library/src/scss/mixins/_svg-icons-static.scss b/v2-library/src/scss/mixins/_svg-icons-static.scss index 50c8c3aeaf..3bf742f387 100644 --- a/v2-library/src/scss/mixins/_svg-icons-static.scss +++ b/v2-library/src/scss/mixins/_svg-icons-static.scss @@ -3,6 +3,10 @@ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.922 5.7a.627.627 0 01-.127-.194.72.72 0 010-.5.6.6 0 01.127-.195l.905-.867a.562.562 0 01.425-.195.592.592 0 01.25.05.665.665 0 01.207.145l2.73 2.734L11.295.82a.658.658 0 01.202-.145.613.613 0 01.484.002.568.568 0 01.191.143l.905.88a.6.6 0 01.127.195.72.72 0 010 .5.628.628 0 01-.127.194l-7.2 7.163a.575.575 0 01-.195.147.655.655 0 01-.5 0 .575.575 0 01-.195-.147L.922 5.7z' fill='%23fff'/%3E%3C/svg%3E"); } +@mixin svg-check-icon-2 { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.28439 4.52415L0.748725 2.97262C0.577523 2.79965 0.298069 2.79965 0.126867 2.97262C-0.0418637 3.1431 -0.0418638 3.41765 0.126867 3.58812L2.00578 5.48644C2.15918 5.64144 2.40959 5.64144 2.563 5.48645L7.25576 0.745191C7.42449 0.574717 7.42449 0.300168 7.25576 0.129694C7.08456 -0.0432773 6.8051 -0.0432774 6.6339 0.129693L2.28439 4.52415Z' fill='%23fff'/%3E%3C/svg%3E"); +} + @mixin svg-delete-icon { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' fill='none'%3e%3cpath d='M1.36301 12.0781C1.36301 12.3889 1.48628 12.687 1.7057 12.9068C1.92512 13.1265 2.22272 13.25 2.53302 13.25H9.55307C9.86337 13.25 10.161 13.1265 10.3804 12.9068C10.5998 12.687 10.7231 12.3889 10.7231 12.0781V3.875H1.36301V12.0781ZM7.99306 5.82813C7.99306 5.72453 8.03415 5.62517 8.10729 5.55191C8.18043 5.47866 8.27962 5.4375 8.38306 5.4375C8.48649 5.4375 8.58569 5.47866 8.65883 5.55191C8.73197 5.62517 8.77306 5.72453 8.77306 5.82813V11.2969C8.77306 11.4005 8.73197 11.4998 8.65883 11.5731C8.58569 11.6463 8.48649 11.6875 8.38306 11.6875C8.27962 11.6875 8.18043 11.6463 8.10729 11.5731C8.03415 11.4998 7.99306 11.4005 7.99306 11.2969V5.82813ZM5.65304 5.82813C5.65304 5.72453 5.69413 5.62517 5.76727 5.55191C5.84041 5.47866 5.93961 5.4375 6.04304 5.4375C6.14648 5.4375 6.24568 5.47866 6.31882 5.55191C6.39196 5.62517 6.43305 5.72453 6.43305 5.82813V11.2969C6.43305 11.4005 6.39196 11.4998 6.31882 11.5731C6.24568 11.6463 6.14648 11.6875 6.04304 11.6875C5.93961 11.6875 5.84041 11.6463 5.76727 11.5731C5.69413 11.4998 5.65304 11.4005 5.65304 11.2969V5.82813ZM3.31303 5.82813C3.31303 5.72453 3.35412 5.62517 3.42726 5.55191C3.50039 5.47866 3.59959 5.4375 3.70303 5.4375C3.80646 5.4375 3.90566 5.47866 3.9788 5.55191C4.05194 5.62517 4.09303 5.72453 4.09303 5.82813V11.2969C4.09303 11.4005 4.05194 11.4998 3.9788 11.5731C3.90566 11.6463 3.80646 11.6875 3.70303 11.6875C3.59959 11.6875 3.50039 11.6463 3.42726 11.5731C3.35412 11.4998 3.31303 11.4005 3.31303 11.2969V5.82813ZM11.1131 1.53125H8.18806L7.95893 1.07471C7.9104 0.977107 7.83563 0.895005 7.74305 0.837641C7.65046 0.780276 7.54373 0.749926 7.43487 0.750004H4.64879C4.54016 0.749586 4.43362 0.779823 4.34137 0.837251C4.24911 0.894679 4.17487 0.976976 4.12716 1.07471L3.89803 1.53125H0.97301C0.869575 1.53125 0.770377 1.57241 0.697237 1.64567C0.624097 1.71892 0.583008 1.81828 0.583008 1.92188L0.583008 2.70313C0.583008 2.80673 0.624097 2.90609 0.697237 2.97934C0.770377 3.0526 0.869575 3.09375 0.97301 3.09375H11.1131C11.2165 3.09375 11.3157 3.0526 11.3889 2.97934C11.462 2.90609 11.5031 2.80673 11.5031 2.70313V1.92188C11.5031 1.81828 11.462 1.71892 11.3889 1.64567C11.3157 1.57241 11.2165 1.53125 11.1131 1.53125Z' fill='white'/%3e%3c/svg%3e"); } diff --git a/v2-library/tutor-icon/fonts/tutor-v2.woff b/v2-library/tutor-icon/fonts/tutor-v2.woff index 4c17a7cf93..7bb9e02838 100644 Binary files a/v2-library/tutor-icon/fonts/tutor-v2.woff and b/v2-library/tutor-icon/fonts/tutor-v2.woff differ diff --git a/v2-library/tutor-icon/tutor-icon.scss b/v2-library/tutor-icon/tutor-icon.scss index 609222bf6e..3616d9e133 100644 --- a/v2-library/tutor-icon/tutor-icon.scss +++ b/v2-library/tutor-icon/tutor-icon.scss @@ -32,6 +32,10 @@ /* tutor v2 new icons */ +.tutor-icon-lesson:before { + content: "\e019"; +} + .tutor-icon-privacy:before { content: '\e100'; } diff --git a/v2-library/tutor-icon/tutor-v2-icons.json b/v2-library/tutor-icon/tutor-v2-icons.json index 56049f1843..2eebdd47b2 100644 --- a/v2-library/tutor-icon/tutor-v2-icons.json +++ b/v2-library/tutor-icon/tutor-v2-icons.json @@ -1 +1 @@ -{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M512 93.091c-65.407-0.106-129.809 16.083-187.392 47.104-60.656 32.731-111.771 80.655-148.34 139.078h126.278c25.707 0 46.545 20.839 46.545 46.545v0c0 25.707-20.839 46.545-46.545 46.545h-279.273v-279.273c0-25.706 20.839-46.545 46.545-46.545v0c25.707 0 46.545 20.839 46.545 46.545v108.637c43.25-59.521 99.322-108.562 164.073-143.5 71.158-38.33 150.739-58.341 231.564-58.228 269.917 0 488.727 218.81 488.727 488.727v0c0 25.707-20.838 46.545-46.545 46.545v0c-25.707 0-46.545-20.838-46.545-46.545v0c0-104.929-41.681-205.561-115.88-279.757-74.193-74.196-174.829-115.879-279.757-115.879zM512 209.455c25.707 0 46.545 20.839 46.545 46.545v213.457l44.544 44.544c18.176 18.176 18.176 47.639 0 65.815v0c-18.176 18.176-47.639 18.176-65.815 0l-71.82-71.82v-251.997c0-25.706 20.838-46.545 46.545-46.545v0zM67.352 488.988c25.572-2.69 48.48 15.872 51.153 41.444v0c10.301 97.178 56.2 187.099 128.854 252.449s166.922 101.497 264.641 101.483v0c25.707 0 46.545 20.838 46.545 46.545v0c0 25.707-20.838 46.545-46.545 46.545v0c-252.602 0-460.335-191.535-486.074-437.341v0c-2.674-25.553 15.871-48.44 41.426-51.126v0zM861.091 582.051v53.062c24.809 7.401 47.151 20.48 65.443 37.841l46.033-26.531 46.545 80.57-46.080 26.624c5.921 24.832 5.921 50.711 0 75.543l46.080 26.577-46.545 80.617-46.173-26.624c-18.52 17.501-40.886 30.413-65.303 37.702v53.295h-93.091v-53.295c-24.432-7.28-46.815-20.191-65.35-37.702l-46.173 26.624-46.545-80.617 46.080-26.624c-5.911-24.818-5.911-50.679 0-75.497l-46.080-26.577 46.545-80.617 46.080 26.531c18.544-17.571 40.965-30.534 65.443-37.841v-53.062h93.091zM814.545 721.455c-18.516 0-36.278 7.354-49.371 20.452-13.093 13.093-20.447 30.85-20.447 49.366s7.354 36.278 20.447 49.371c13.093 13.093 30.855 20.447 49.371 20.447s36.278-7.354 49.371-20.447c13.093-13.093 20.447-30.855 20.447-49.371s-7.354-36.273-20.447-49.366c-13.093-13.098-30.855-20.452-49.371-20.452z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["Vector"],"grid":24,"defaultCode":57639},"attrs":[],"properties":{"order":160,"id":17,"name":"settings-log","prevSize":32,"code":57639},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M585.143 73.143c0-40.396-32.748-73.143-73.143-73.143s-73.143 32.747-73.143 73.143v365.714h-365.714c-40.396 0-73.143 32.748-73.143 73.143s32.747 73.143 73.143 73.143h365.714v365.714c0 40.397 32.747 73.143 73.143 73.143s73.143-32.746 73.143-73.143v-365.714h365.714c40.397 0 73.143-32.748 73.143-73.143s-32.746-73.143-73.143-73.143h-365.714v-365.714z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["Union"],"grid":24,"defaultCode":57638},"attrs":[],"properties":{"order":161,"id":18,"name":"plus-light","prevSize":32,"code":57638},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M181.106 90.718c-0.092 0.224-0.181 0.55-0.181 1.038v840.484c0 0.493 0.090 0.817 0.181 1.039 0.103 0.252 0.24 0.445 0.362 0.571 0.009 0.006 0.017 0.018 0.026 0.024h635.084c0.006-0.006 0.018-0.018 0.024-0.024 0.126-0.126 0.258-0.318 0.361-0.571 0.096-0.222 0.186-0.547 0.186-1.039v-840.484c0-0.488-0.090-0.814-0.186-1.038-0.102-0.251-0.234-0.442-0.361-0.568-0.006-0.009-0.018-0.017-0.024-0.025h-635.084c-0.008 0.008-0.017 0.016-0.025 0.025-0.123 0.126-0.259 0.317-0.362 0.568zM90.8 91.757c0-49.47 39.311-91.757 90.459-91.757h635.553c51.149 0 90.462 42.286 90.462 91.757v840.484c0 49.473-39.313 91.759-90.462 91.759h-635.553c-51.148 0-90.459-42.287-90.459-91.759z","M680.615 0c24.893 0 45.063 20.175 45.063 45.063v933.875c0 24.887-20.17 45.063-45.063 45.063-24.887 0-45.063-20.176-45.063-45.063v-933.875c0-24.888 20.176-45.063 45.063-45.063z","M-0 278.531c0-24.887 20.175-45.063 45.062-45.063h181.587c24.887 0 45.063 20.175 45.063 45.063s-20.175 45.063-45.063 45.063h-181.587c-24.887 0-45.062-20.175-45.062-45.063z","M-0 511.999c0-24.887 20.175-45.063 45.062-45.063h181.587c24.887 0 45.063 20.175 45.063 45.063s-20.175 45.063-45.063 45.063h-181.587c-24.887 0-45.062-20.175-45.062-45.063z","M-0 745.465c0-24.887 20.175-45.063 45.062-45.063h181.587c24.887 0 45.063 20.176 45.063 45.063 0 24.893-20.175 45.063-45.063 45.063h-181.587c-24.887 0-45.062-20.17-45.062-45.063z"],"width":907,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["note"],"grid":24,"defaultCode":57633},"attrs":[],"properties":{"order":162,"id":19,"name":"note","prevSize":32,"code":57633},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M707.605 0.367l-556.145 52.452c-45.579 4.293-79.659 45.239-75.57 90.837l44.055 487.663c1.379 14.252 13.296 25.304 27.794 25.304 0.888 0 1.766-0.041 2.632-0.122l-0.111 0.008c14.302-1.326 25.412-13.268 25.412-27.804 0-0.884-0.041-1.759-0.122-2.622l0.008 0.111-44.055-487.554c-1.402-15.632 9.564-28.734 25.19-30.206l556.145-52.452c15.675-1.477 28.947 9.51 30.424 25.19l4.689 49.508h-370c-45.923 0-83.749 37.827-83.749 83.749v461.164c0 15.418 12.499 27.916 27.916 27.916v0c15.418 0 27.916-12.499 27.916-27.916v0-461.164c0-15.748 12.167-27.916 27.916-27.916h558.326c15.75 0 27.916 12.167 27.916 27.916v430.521c0 15.418 12.499 27.916 27.916 27.916v0c15.418 0 27.916-12.499 27.916-27.916v0-430.521c0-45.922-37.826-83.749-83.749-83.749h-132.384l-5.125-54.742c-4.307-45.719-45.445-79.877-91.164-75.57zM433.786 298.177c-15.418 0-27.916 12.499-27.916 27.916v0c0 15.418 12.499 27.916 27.916 27.916v0h390.828c15.418 0 27.916-12.499 27.916-27.916v0c0-15.418-12.499-27.916-27.916-27.916v0zM433.786 409.842c-15.418 0-27.916 12.499-27.916 27.916l0 0c0 15.418 12.499 27.916 27.916 27.916v0h222.022c15.418 0 27.916-12.499 27.916-27.916v0c0-15.418-12.499-27.916-27.916-27.916l-0 0zM154.95 707.543c-14.212 1.422-25.217 13.318-25.217 27.785 0 0.968 0.049 1.924 0.145 2.866l-0.010-0.118 7.088 73.389c4.359 45.667 45.586 79.765 91.273 75.461l65.974-6.325v59.649c0 45.923 37.827 83.749 83.749 83.749h558.326c45.922 0 83.749-37.826 83.749-83.749v-179.602c0-15.418-12.499-27.916-27.916-27.916v0c-15.418 0-27.916 12.499-27.916 27.916v0 179.602c0 15.75-12.166 27.916-27.916 27.916h-558.326c-15.749 0-27.916-12.166-27.916-27.916v-168.043c0-15.418-12.499-27.916-27.916-27.916v0c-15.418 0-27.916 12.499-27.916 27.916v0 52.234l-71.208 6.87c-15.677 1.477-28.948-9.515-30.424-25.19l-7.088-73.498c-1.422-14.212-13.318-25.217-27.785-25.217-0.968 0-1.924 0.049-2.866 0.145l0.118-0.010z","M131.505 408.751c-36.3 11.955-66.537 26.054-89.637 43.946s-40.312 41.468-41.765 69.682c-1.754 34.049 19.358 62.99 48.526 85.821s68.667 42.237 116.899 59.322c96.464 34.171 227.753 58.338 373.817 65.865 146.063 7.524 279.149-3.077 378.615-27.153 49.733-12.038 91.1-27.178 122.461-46.891s55.387-46.319 57.141-80.368c1.436-27.853-6.387-52.859-21.81-70.445s-35.535-27.129-56.378-34.677l-18.974 52.452c16.906 6.123 27.768 12.588 33.369 18.974s8.864 13.341 7.96 30.861c-0.447 8.708-7.71 21.257-30.97 35.877s-59.922 28.895-105.886 40.021c-91.926 22.251-221.001 32.92-362.585 25.626-141.585-7.296-268.961-31.231-358.114-62.812-44.576-15.79-79.563-33.666-101.197-50.598s-27.602-30.224-27.153-38.93c0.372-7.215 4.901-16.657 20.283-28.571s40.456-24.338 72.844-35.004z"],"width":1098,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["bundle"],"grid":24,"defaultCode":57637},"attrs":[],"properties":{"order":163,"id":20,"name":"bundle","prevSize":32,"code":57637},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M149.375 42.625c-0.025-0-0.054-0-0.083-0-23.55 0-42.643 19.079-42.667 42.623l-0 0.002c0.024 23.546 19.117 42.625 42.667 42.625 0.029 0 0.059-0 0.088-0l-0.005 0h238.375l-268.625 268.5c-7.741 7.725-12.53 18.405-12.53 30.204 0 23.566 19.104 42.671 42.671 42.671 0.038 0 0.076-0 0.115-0l-0.006 0h341.25c23.532-0.024 42.601-19.093 42.625-42.623l0-0.002c0-0.025 0-0.054 0-0.083 0-23.55-19.079-42.643-42.623-42.667l-238.252-0 268.5-268.5c7.666-7.712 12.405-18.342 12.405-30.079 0-23.561-19.095-42.662-42.654-42.671l-0.001-0zM768 42.625c-23.532 0.024-42.601 19.093-42.625 42.623l-0 0.002v750.375l-97.875-97.875c-7.723-7.732-18.397-12.514-30.188-12.514s-22.465 4.783-30.187 12.514l-0 0c-7.732 7.723-12.514 18.397-12.514 30.187s4.783 22.465 12.514 30.187l0 0 170.625 170.625c3.848 1.261 8.277 1.989 12.875 1.989s9.027-0.727 13.177-2.073l-0.302 0.085c1.19 0.6 2.676 1.233 4.202 1.782l0.298 0.093c1.824-0.642 3.309-1.275 4.749-1.987l-0.249 0.112c3.83 1.249 8.237 1.969 12.812 1.969s8.983-0.72 13.114-2.053l-0.302 0.084 170.75-170.625c7.694-7.717 12.451-18.365 12.451-30.124 0-11.823-4.809-22.522-12.577-30.25l-0.002-0.002c-7.717-7.694-18.365-12.452-30.125-12.452s-22.408 4.758-30.126 12.453l0.001-0.001-97.875 97.75v-750.25c-0.024-23.53-19.092-42.599-42.619-42.625l-0.002-0zM326.5 554.625c-0.188-0.003-0.409-0.005-0.631-0.005-16.38 0-30.605 9.23-37.757 22.772l-0.112 0.232-176.625 341.375c-2.995 5.684-4.753 12.422-4.753 19.57 0 16.428 9.285 30.688 22.893 37.818l0.235 0.112c5.697 3.011 12.453 4.779 19.621 4.779 16.389 0 30.62-9.241 37.767-22.796l0.112-0.233 137.375-265.625 127.625 264.5c7.060 14.394 21.607 24.129 38.429 24.129 6.756 0 13.144-1.57 18.822-4.365l-0.25 0.111c14.394-7.060 24.129-21.607 24.129-38.429 0-6.756-1.57-13.144-4.365-18.822l0.111 0.25-164.875-341.25c-6.961-14.193-21.196-23.852-37.714-24.125l-0.036-0z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["sorting-desc"],"grid":24,"defaultCode":57625},"attrs":[],"properties":{"order":164,"id":21,"name":"sorting-desc","prevSize":32,"code":57625},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M768.125 42.875c-0.025-0-0.054-0-0.083-0-23.55 0-42.643 19.079-42.667 42.623l-0 0.002v842.625c-0 0.025-0 0.054-0 0.084 0 23.564 19.102 42.667 42.667 42.667 0.029 0 0.059-0 0.088-0l-0.005 0c23.546-0.024 42.625-19.117 42.625-42.667 0-0.029-0-0.059-0-0.088l0 0.005v-842.625c-0.024-23.532-19.093-42.601-42.623-42.625l-0.002-0z","M149.375 554.875c-23.532 0.024-42.601 19.093-42.625 42.623l-0 0.002c0.024 23.532 19.093 42.601 42.623 42.625l238.377 0-268.5 268.5c-7.741 7.725-12.529 18.405-12.529 30.204 0 23.561 19.095 42.661 42.653 42.671l341.376 0c23.532-0.024 42.601-19.093 42.625-42.623l0-0.002c0-0.025 0-0.054 0-0.083 0-23.55-19.079-42.643-42.623-42.667l-238.377-0 268.5-268.5c7.666-7.712 12.405-18.343 12.405-30.079 0-23.517-19.024-42.59-42.522-42.671l-0.008-0z","M326.5 42.875c-0.188-0.003-0.409-0.005-0.631-0.005-16.38 0-30.605 9.23-37.757 22.772l-0.112 0.232-176.5 341.375c-3.011 5.697-4.779 12.453-4.779 19.621 0 16.389 9.241 30.62 22.796 37.767l0.233 0.112c5.684 2.995 12.422 4.753 19.57 4.753 16.428 0 30.688-9.285 37.818-22.893l0.112-0.235 137.375-265.375 127.625 264.375c7.060 14.394 21.607 24.129 38.429 24.129 6.756 0 13.144-1.57 18.822-4.365l-0.25 0.111c14.394-7.060 24.129-21.607 24.129-38.429 0-6.756-1.57-13.144-4.365-18.822l0.111 0.25-164.75-341.25c-6.98-14.23-21.272-23.902-37.845-24.125l-0.030-0z","M938.75 725.625c-0.023-0-0.050-0-0.077-0-11.784 0-22.452 4.777-30.173 12.5l-140.5 140.5-140.5-140.5c-7.717-7.694-18.365-12.452-30.125-12.452s-22.408 4.758-30.126 12.453l0.001-0.001c-7.694 7.717-12.452 18.365-12.452 30.125s4.758 22.408 12.453 30.126l-0.001-0.001 170.625 170.75c7.723 7.731 18.397 12.513 30.187 12.513s22.464-4.782 30.187-12.512l170.625-170.75c7.694-7.717 12.452-18.365 12.452-30.125s-4.758-22.408-12.453-30.126l0.001 0.001c-7.71-7.712-18.359-12.486-30.122-12.5l-0.003-0z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["sorting-asc"],"grid":24,"defaultCode":57632},"attrs":[],"properties":{"order":165,"id":22,"name":"sorting-asc","prevSize":32,"code":57632},"setIdx":0,"setId":2,"iconIdx":5},{"icon":{"paths":["M144.462 0c-38.285 0-75.082 15.237-102.154 42.308-27.070 27.071-42.308 63.869-42.308 102.154v735.077c-0 21.752 17.633 39.385 39.385 39.385h-0c21.752 0 39.385-17.633 39.385-39.385v-735.077c0-17.424 6.91-34.14 19.231-46.462s29.038-19.231 46.462-19.231h695.846v656.462h-695.846c-21.752 0-39.385 17.633-39.385 39.385v0c0 21.752 17.633 39.385 39.385 39.385v0h735.231c21.752 0 39.385-17.633 39.385-39.385v0c-0.239-3.707-0.952-7.166-2.083-10.43l0.083 0.277c0.675-1.339 1.352-2.967 1.919-4.645l0.081-0.278v-688.615c0-18.801-7.494-36.877-20.769-50.154-13.28-13.284-31.368-20.769-50.154-20.769zM144.462 945.231c-21.752 0-39.385 17.633-39.385 39.385v0c0 21.752 17.633 39.385 39.385 39.385v0h735.231c21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0z","M144.462 735.077c-38.287 0-75.083 15.231-102.154 42.308-27.072 27.068-42.308 63.865-42.308 102.154 0 38.284 15.242 74.928 42.308 102 27.070 27.065 63.867 42.308 102.154 42.308 21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0c-17.422 0-34.139-6.911-46.462-19.231-12.325-12.328-19.231-28.886-19.231-46.308 0-17.432 6.912-34.145 19.231-46.462 12.321-12.324 29.039-19.231 46.462-19.231 21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0z","M302 210.154c-21.752 0-39.385 17.633-39.385 39.385v0c0 21.752 17.633 39.385 39.385 39.385v0h315.077c21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0z"],"width":919,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["topic"],"grid":24,"defaultCode":57635},"attrs":[],"properties":{"order":166,"id":23,"name":"topic","prevSize":32,"code":57635},"setIdx":0,"setId":2,"iconIdx":6},{"icon":{"paths":["M406.462 144.339c13.536 0 26.517 5.377 36.087 14.948s14.948 22.552 14.948 36.087v45.218c0 22.442 8.915 43.965 24.784 59.834s37.392 24.784 59.834 24.784h135.653c1.542 0 3.022 0.613 4.113 1.704s1.704 2.57 1.704 4.113v135.653c0 22.441 8.915 43.964 24.784 59.834s37.392 24.784 59.834 24.784h45.215c13.54 0 26.522 5.377 36.092 14.947s14.943 22.552 14.943 36.087c0 13.536-5.372 26.516-14.943 36.087s-22.552 14.948-36.092 14.948h-45.215c-22.442 0-43.965 8.915-59.834 24.784s-24.784 37.392-24.784 59.834v135.652c0 1.544-0.613 3.025-1.704 4.112-1.091 1.095-2.571 1.709-4.113 1.709h-135.653c-1.543 0-3.022-0.614-4.113-1.709-1.091-1.087-1.704-2.568-1.704-4.112v-45.214c0-34.438-13.679-67.462-38.028-91.81s-57.373-38.028-91.808-38.028c-34.434 0-67.458 13.679-91.807 38.028s-38.028 57.372-38.028 91.81v45.214c0 1.544-0.613 3.025-1.704 4.112-1.091 1.095-2.57 1.709-4.113 1.709h-135.653c-1.543 0-3.022-0.614-4.113-1.709-1.091-1.087-1.704-2.568-1.704-4.112v-135.652c0-1.543 0.613-3.022 1.704-4.113s2.57-1.705 4.113-1.705h45.217c34.435 0 67.459-13.678 91.808-38.027s38.028-57.373 38.028-91.808c0-34.435-13.679-67.459-38.028-91.807s-57.373-38.028-91.808-38.028h-45.217c-1.542 0-3.022-0.613-4.113-1.704s-1.704-2.571-1.704-4.113v-135.653c0-1.543 0.613-3.022 1.704-4.113s2.571-1.704 4.113-1.704h135.653c22.442 0 43.965-8.915 59.834-24.784s24.784-37.392 24.784-59.834v-45.218c0-13.535 5.377-26.516 14.948-36.087s22.552-14.948 36.087-14.948zM135.156 246.409c-22.442 0-43.965 8.915-59.834 24.784s-24.784 37.392-24.784 59.834v135.653c0 22.442 8.915 43.965 24.784 59.834s37.392 24.784 59.834 24.784h45.217c13.536 0 26.517 5.377 36.087 14.947s14.948 22.552 14.948 36.087c0 13.536-5.377 26.516-14.948 36.087s-22.552 14.948-36.087 14.948h-45.217c-22.442 0-43.965 8.915-59.834 24.784s-24.784 37.392-24.784 59.834v135.652c0 22.441 8.915 43.969 24.784 59.833 15.869 15.872 37.392 24.789 59.834 24.789h135.653c22.442 0 43.965-8.917 59.834-24.789 15.869-15.864 24.784-37.392 24.784-59.833v-45.214c0-13.54 5.377-26.522 14.948-36.092 9.57-9.569 22.552-14.946 36.087-14.946s26.517 5.377 36.087 14.946c9.571 9.57 14.948 22.552 14.948 36.092v45.214c0 22.441 8.915 43.969 24.784 59.833 15.869 15.872 37.392 24.789 59.834 24.789h135.653c22.441 0 43.965-8.917 59.834-24.789 15.869-15.864 24.784-37.392 24.784-59.833v-135.652c0-1.543 0.613-3.023 1.704-4.113s2.57-1.705 4.113-1.705h45.215c34.438 0 67.458-13.679 91.813-38.027 24.348-24.349 38.022-57.373 38.022-91.808s-13.674-67.459-38.022-91.807c-24.355-24.349-57.376-38.028-91.813-38.028h-45.215c-1.543 0-3.022-0.613-4.113-1.704s-1.704-2.571-1.704-4.113v-135.653c0-22.442-8.915-43.965-24.784-59.834s-37.392-24.784-59.834-24.784h-135.653c-1.543 0-3.022-0.613-4.113-1.704s-1.704-2.571-1.704-4.113v-45.218c0-34.434-13.679-67.459-38.028-91.807s-57.373-38.028-91.808-38.028c-34.434 0-67.458 13.679-91.807 38.028s-38.028 57.373-38.028 91.807v45.218c0 1.542-0.613 3.022-1.704 4.113s-2.57 1.704-4.113 1.704h-135.653z"],"width":945,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["quiz"],"grid":24,"defaultCode":57636},"attrs":[],"properties":{"order":167,"id":24,"name":"quiz-2","prevSize":32,"code":57636},"setIdx":0,"setId":2,"iconIdx":7},{"icon":{"paths":["M128 128h768v86h-768v-86zM298 298h428v86h-428v-86zM128 554v-84h768v84h-768zM128 896v-86h768v86h-768zM298 640h428v86h-428v-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_center"],"defaultCode":57607,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_center","id":25,"order":168,"prevSize":32,"code":57607,"name":"align-center"},"setIdx":0,"setId":2,"iconIdx":8},{"icon":{"paths":["M128 128h768v86h-768v-86zM128 384v-86h768v86h-768zM128 554v-84h768v84h-768zM128 726v-86h768v86h-768zM128 896v-86h768v86h-768z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_justify"],"defaultCode":57608,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_justify","id":26,"order":169,"prevSize":32,"code":57608,"name":"align-justify"},"setIdx":0,"setId":2,"iconIdx":9},{"icon":{"paths":["M128 128h768v86h-768v-86zM128 896v-86h768v86h-768zM128 554v-84h768v84h-768zM640 298v86h-512v-86h512zM640 640v86h-512v-86h512z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_left"],"defaultCode":57609,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_left","id":27,"order":170,"prevSize":32,"code":57609,"name":"align-left"},"setIdx":0,"setId":2,"iconIdx":10},{"icon":{"paths":["M128 128h768v86h-768v-86zM384 384v-86h512v86h-512zM128 554v-84h768v84h-768zM384 726v-86h512v86h-512zM128 896v-86h768v86h-768z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_right"],"defaultCode":57616,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_right","id":28,"order":171,"prevSize":32,"code":57616,"name":"align-right"},"setIdx":0,"setId":2,"iconIdx":11},{"icon":{"paths":["M132.776 81.781c-49.418 6.236-105.858 21.708-119.12 32.68-4.165 3.633-7.601 7.979-10.146 12.861l-0.116 0.243c-3.237 7.183-3.394 21.156-3.394 365.727 0 342.598 0.158 358.622 3.394 365.648 6.464 13.233 19.536 22.342 34.801 23.048l0.090 0.004c2.368 0 13.577-2.842 24.944-6.236 22.625-7.096 49.802-13.117 77.687-16.911l2.674-0.297c32.68-4.658 120.618-4.578 151.090 0.158 74.36 11.525 128.039 32.759 187.087 73.888l15.867 11.052h28.733l15.867-11.052c59.046-41.127 112.726-62.361 187.087-73.888 30.471-4.736 118.409-4.815 151.090-0.158 31.575 4.499 55.968 9.789 80.045 17.13 11.13 3.473 22.419 6.236 24.944 6.236 14.288 0 29.208-9.71 35.209-22.972 3.237-7.026 3.394-23.051 3.394-365.648 0-344.571-0.158-358.544-3.394-365.727-5.446-11.841-14.524-17.84-39.47-26.129-50.445-16.735-100.094-23.445-163.403-21.947-43.101 0.947-62.283 3.079-96.464 10.498-74.46 16.629-139.628 48.978-194.505 93.513l0.867-0.681c-4.642 4.030-9.737 7.996-15.037 11.686l-0.593 0.392c-0.473 0-7.578-5.446-15.63-12.078-63.072-51.863-139.092-84.94-228.61-99.464-25.891-4.184-106.883-5.131-134.987-1.58zM258.763 161.587c45.073 7.341 77.518 17.366 114.462 35.365 33.391 16.262 68.282 40.022 91.334 62.204l8.763 8.367v283.313c0 155.747-0.395 283.235-0.947 283.235-6.639-2.768-11.908-5.308-17.033-8.076l1.008 0.498c-95.596-48.074-231.607-63.467-355.070-40.26-5.020 1.108-12.4 2.379-19.853 3.419l-1.856 0.212c-1.816 0-2.21-62.361-1.816-308.97l0.473-308.97 12.867-3.237c18.235-4.578 43.022-8.684 64.493-10.577 27.076-2.368 77.361-0.711 103.173 3.473zM885.938 160.008c17.209 2.132 49.89 8.604 56.522 11.13l4.262 1.58v308.574c0 245.659-0.473 308.574-2.29 308.574-9.31-1.252-16.688-2.525-23.985-4.023l2.278 0.391c-123.46-23.209-259.474-7.815-355.070 40.26-4.118 2.27-9.386 4.809-14.781 7.108l-1.243 0.471c-0.553 0-0.947-127.486-0.947-283.235v-283.313l8.763-8.367c32.839-31.654 85.965-63.467 132.46-79.649 30.685-10.43 66.519-18.233 103.559-21.936l2.061-0.167c13.498-1.263 71.519 0.473 88.412 2.606z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[{}]},"tags":["book-open-line"],"defaultCode":57624,"grid":32},"attrs":[{}],"properties":{"order":172,"id":16,"name":"book-open-line","prevSize":32,"code":57624},"setIdx":0,"setId":2,"iconIdx":12},{"icon":{"paths":["M1002.665 0.001h-128c-2.796-0.034-5.571 0.518-8.141 1.62-2.575 1.102-4.884 2.73-6.789 4.78l-406.611 406.61c-68.231-31.215-145.262-37.462-217.631-17.647s-135.474 64.429-178.287 126.046c-42.813 61.619-62.612 136.325-55.937 211.062 6.675 74.732 39.4 144.748 92.456 197.801 53.056 53.059 123.068 85.78 197.804 92.457s149.439-13.123 211.058-55.936c61.617-42.813 106.232-105.917 126.047-178.289 19.814-72.366 13.568-149.396-17.644-217.631l98.985-98.557 82.345 27.733c7.188 2.592 14.935 3.208 22.441 1.782s14.49-4.841 20.224-9.888c5.519-4.705 9.748-10.74 12.288-17.533 2.534-6.793 3.302-14.121 2.222-21.293l-17.070-103.252 30.72-31.146 62.295 28.586c7.25 3.22 15.252 4.355 23.112 3.277s15.263-4.324 21.381-9.377c6.113-5.052 10.701-11.709 13.24-19.224 2.545-7.515 2.939-15.589 1.147-23.316l-21.76-77.226 55.040-55.466c2.278-2.093 4.040-4.683 5.151-7.57s1.536-5.991 1.249-9.070v-127.999c0-5.658-2.248-11.084-6.252-15.085-3.999-4.001-9.426-6.248-15.084-6.248zM298.672 789.33c0 12.657-3.753 25.032-10.786 35.553-7.032 10.527-17.028 18.729-28.722 23.572s-24.563 6.113-36.977 3.64c-12.415-2.468-23.818-8.561-32.769-17.516-8.95-8.95-15.046-20.352-17.515-32.768s-1.202-25.283 3.642-36.977c4.844-11.694 13.047-21.688 23.571-28.723 10.525-7.030 22.898-10.783 35.556-10.783 16.974 0 33.252 6.743 45.254 18.744s18.745 28.278 18.745 45.256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["key"],"colorPermutations":{}},"attrs":[],"properties":{"order":173,"id":15,"name":"key","prevSize":32,"code":57640},"setIdx":0,"setId":2,"iconIdx":13},{"icon":{"paths":["M211.554 103.619c0-23.552 19.114-42.667 42.666-42.667h286.479v213.334c0 24.248 9.631 47.503 26.775 64.649 17.149 17.146 40.405 26.779 64.652 26.779h237.714v505.904c0 11.318-4.495 22.167-12.498 30.17-7.998 8.003-18.852 12.498-30.17 12.498h-280.134c-12.771 22.086-28.161 42.555-45.837 60.95h325.972c27.481 0 53.841-10.914 73.27-30.348 19.434-19.429 30.354-45.789 30.354-73.27v-520.191c-0.011-14.541-5.788-28.484-16.071-38.766l-296.567-296.618c-10.294-10.279-24.247-16.049-38.793-16.043h-325.143c-27.481 0-53.837 10.917-73.269 30.349s-30.35 45.788-30.35 73.27v359.522c19.647-8.175 40.068-14.35 60.953-18.432v-341.090zM820.639 304.762h-188.513c-16.826 0-30.477-13.653-30.477-30.476v-188.514l218.99 218.989zM540.699 755.809c0 148.114-120.079 268.191-268.193 268.191s-268.191-120.077-268.191-268.191c0-148.114 120.076-268.19 268.191-268.19s268.193 120.076 268.193 268.19zM296.887 585.141c0-6.462-2.569-12.665-7.141-17.236-4.572-4.576-10.774-7.141-17.24-7.141s-12.668 2.565-17.24 7.141c-4.572 4.57-7.141 10.774-7.141 17.236v146.286h-146.286c-6.466 0-12.667 2.571-17.24 7.141-4.572 4.576-7.141 10.774-7.141 17.241s2.569 12.671 7.141 17.241c4.572 4.57 10.774 7.141 17.24 7.141h146.286v146.286c0 6.467 2.569 12.665 7.141 17.241 4.572 4.57 10.774 7.141 17.24 7.141s12.667-2.571 17.24-7.141c4.572-4.576 7.141-10.774 7.141-17.241v-146.286h146.285c6.466 0 12.668-2.571 17.24-7.141s7.141-10.774 7.141-17.241c0-6.467-2.569-12.665-7.141-17.241-4.572-4.57-10.774-7.141-17.24-7.141h-146.285v-146.286z"],"width":970,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["add-course"],"grid":0},"attrs":[],"properties":{"order":174,"id":0,"name":"add-document","prevSize":32,"code":57634},"setIdx":0,"setId":2,"iconIdx":14},{"icon":{"paths":["M523.653 43.944c96.179 91.077 225.93 146.868 368.788 146.868l6.82-0.048c7.613-0.096 15.053 2.239 21.243 6.664 6.195 4.425 10.813 10.71 13.189 17.941 19.645 59.844 30.275 123.741 30.275 190.022 0 283.341-193.787 521.334-456.003 588.805-5.849 1.51-11.985 1.51-17.834 0-262.216-67.471-456.006-305.464-456.006-588.805-0.066-64.547 10.155-128.692 30.28-190.022 2.382-7.222 7.004-13.496 13.195-17.913s13.629-6.744 21.233-6.645c139.578 1.971 274.389-50.742 375.61-146.868 6.644-6.299 15.45-9.81 24.605-9.81s17.959 3.511 24.605 9.81zM671.191 426.182c2.857-3.812 4.931-8.158 6.088-12.782s1.377-9.433 0.65-14.143c-0.727-4.711-2.391-9.228-4.89-13.287s-5.78-7.578-9.656-10.35c-3.881-2.771-8.274-4.74-12.923-5.79s-9.462-1.16-14.152-0.323c-4.695 0.837-9.17 2.603-13.174 5.195-3.999 2.592-7.439 5.958-10.122 9.899l-154.306 216.011-77.439-77.44c-6.779-6.318-15.746-9.759-25.011-9.595s-18.105 3.917-24.658 10.47c-6.552 6.554-10.306 15.391-10.469 24.658s3.276 18.232 9.593 25.011l107.29 107.29c3.671 3.671 8.097 6.497 12.969 8.279 4.873 1.787 10.076 2.493 15.248 2.068 5.172-0.43 10.19-1.976 14.704-4.536s8.417-6.072 11.438-10.291l178.819-250.344z"],"width":973,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["privacy"],"defaultCode":63744,"grid":0},"attrs":[],"properties":{"order":175,"name":"privacy","prevSize":32,"ligatures":"","id":1,"code":57600},"setIdx":0,"setId":2,"iconIdx":15},{"icon":{"paths":["M58.316 57.283c26.984-26.631 64.777-36.783 107.106-36.783h1000.396c42.527 0 80.374 10.128 107.325 36.818 27.013 26.747 37.596 64.676 37.596 108.105v542.090c0 43.228-10.609 81.106-37.56 107.878-26.911 26.742-64.732 37.043-107.361 37.043h-1000.396c-42.432 0-80.2-10.327-107.142-37.007-26.999-26.732-37.78-64.584-37.78-107.914v-542.090c0-43.531 10.757-81.434 37.816-108.14zM101.474 101.012c-11.091 10.946-19.534 30.144-19.534 64.411v542.090c0 33.966 8.418 53.217 19.57 64.256 11.209 11.1 30.542 19.226 63.912 19.226h1000.396c33.669 0 52.951-8.151 64.061-19.19 11.075-10.998 19.42-30.223 19.42-64.292v-542.090c0-34.369-8.371-53.541-19.384-64.446-11.069-10.961-30.326-19.037-64.097-19.037h-1000.396c-33.474 0-52.782 8.051-63.948 19.072z","M964.833 998.784c22.441 0 40.392-18.452 40.392-41.39 0-22.943-17.951-41.395-40.392-41.395h-599.94c-22.442 0-40.894 18.452-40.894 41.395 0 22.938 18.452 41.39 40.894 41.39h599.94z"],"width":1331,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["laptop"],"defaultCode":63745,"grid":0},"attrs":[],"properties":{"order":176,"name":"laptop","prevSize":32,"id":2,"code":57601},"setIdx":0,"setId":2,"iconIdx":16},{"icon":{"paths":["M104.736 83.791c-11.567 0-20.945 9.378-20.945 20.945v581.819c0 11.567 9.378 20.945 20.945 20.945h930.91c11.567 0 20.945-9.379 20.945-20.945v-581.819c0-11.567-9.379-20.945-20.945-20.945h-930.91zM9.318 104.736c0-52.698 42.72-95.418 95.418-95.418h930.91c52.699 0 95.418 42.72 95.418 95.418v581.819c0 52.699-42.719 95.418-95.418 95.418h-930.91c-52.698 0-95.418-42.719-95.418-95.418v-581.819z","M242.045 977.464c0-20.564 16.671-37.236 37.236-37.236h581.819c20.564 0 37.236 16.673 37.236 37.236s-16.673 37.236-37.236 37.236h-581.819c-20.565 0-37.236-16.673-37.236-37.236z","M395.645 707.5c20.565 0 37.236 16.668 37.236 37.236v232.727c0 20.564-16.672 37.236-37.236 37.236s-37.236-16.673-37.236-37.236v-232.727c0-20.568 16.671-37.236 37.236-37.236z","M744.737 707.5c20.564 0 37.236 16.668 37.236 37.236v232.727c0 20.564-16.673 37.236-37.236 37.236-20.568 0-37.236-16.673-37.236-37.236v-232.727c0-20.568 16.668-37.236 37.236-37.236z"],"width":1164,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["desktop"],"defaultCode":63746,"grid":0},"attrs":[],"properties":{"order":177,"name":"desktop","prevSize":32,"id":3,"code":57602},"setIdx":0,"setId":2,"iconIdx":17},{"icon":{"paths":["M37.667 889.276v-754.598c0-64.176 53.591-115.5 118.898-115.5h1013.759c65.308 0 118.898 51.323 118.898 115.5v754.598c0 64.176-53.589 115.502-118.898 115.502h-1013.759c-65.307 0-118.898-51.325-118.898-115.502zM149.502 89.982c-27.796 3.26-49.248 25.485-49.248 52.388v739.202l0.438 6.616c3.47 26.027 27.133 46.182 55.882 46.182l1020.832-0.415c27.796-3.26 49.249-25.481 49.249-52.383v-739.203l-0.438-6.62c-3.47-26.024-27.136-46.18-55.882-46.18l-1020.833 0.412zM976.321 159.981c0-17.281-14.006-31.289-31.289-31.289-17.277 0-31.289 14.008-31.289 31.289v688.358c0 17.277 14.012 31.289 31.289 31.289 17.283 0 31.289-14.012 31.289-31.289v-688.358zM1101.494 566.736c-34.606 0-62.578-28.035-62.578-62.578s27.972-62.578 62.578-62.578c34.606 0 62.578 28.035 62.578 62.578s-27.972 62.578-62.578 62.578z"],"width":1308,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["tablet"],"defaultCode":63747,"grid":0},"attrs":[],"properties":{"order":178,"name":"tablet","prevSize":32,"id":4,"code":57603},"setIdx":0,"setId":2,"iconIdx":18},{"icon":{"paths":["M89.6 0h537.6c51.754 0 89.6 45.385 89.6 97.28v829.44c0 51.894-37.846 97.28-89.6 97.28h-537.6c-51.753 0-89.6-45.386-89.6-97.28v-829.44c0-51.895 37.847-97.28 89.6-97.28zM665.321 91.514c-2.369-22.743-18.534-40.293-38.102-40.293l-542.412 0.358c-18.927 2.839-33.585 22.199-33.585 45.722v829.442l0.299 5.786c2.371 22.742 18.534 40.294 38.101 40.294l542.415-0.363c18.925-2.839 33.583-22.198 33.583-45.717v-829.442l-0.298-5.787zM435.2 204.81c14.139 0 25.6-11.461 25.6-25.6s-11.461-25.6-25.6-25.6h-153.6c-14.138 0-25.6 11.462-25.6 25.6s11.461 25.6 25.6 25.6h153.6zM307.221 819.2c0-28.314 22.938-51.2 51.2-51.2s51.2 22.886 51.2 51.2c0 28.314-22.938 51.2-51.2 51.2s-51.2-22.886-51.2-51.2z"],"width":745,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["mobile"],"defaultCode":63748,"grid":0},"attrs":[],"properties":{"order":179,"name":"mobile","prevSize":32,"id":5,"code":57604},"setIdx":0,"setId":2,"iconIdx":19},{"icon":{"paths":["M422.398 1016.542c-19.796-11.725-39.113-24.246-57.904-37.524-48.585-34.315-93.98-72.943-135.633-115.405-98.261-100.636-200.416-251.898-200.416-446.397 0-110.652 43.956-216.773 122.2-295.017s184.364-122.2 295.017-122.2c110.653 0 216.776 43.957 295.016 122.2 78.245 78.243 122.203 184.364 122.203 295.017 0 194.55-102.104 345.76-200.42 446.397-41.665 42.468-87.080 81.089-135.682 115.405-18.774 13.278-38.075 25.793-57.854 37.524l-3.59 2.071-1.416 0.762c-5.616 3.032-11.898 4.625-18.282 4.625s-12.667-1.593-18.282-4.625l-4.956-2.833zM445.661 568.929c40.238 0 78.827-15.981 107.279-44.434 28.454-28.452 44.434-67.041 44.434-107.279s-15.98-78.826-44.434-107.279c-28.452-28.452-67.041-44.436-107.279-44.436s-78.826 15.984-107.279 44.436c-28.452 28.452-44.436 67.042-44.436 107.279s15.984 78.827 44.436 107.279c28.452 28.452 67.042 44.434 107.279 44.434z"],"width":910,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["map-pin"],"defaultCode":63749,"grid":0},"attrs":[],"properties":{"order":180,"name":"map-pin","prevSize":32,"id":6,"code":57605},"setIdx":0,"setId":2,"iconIdx":20},{"icon":{"paths":["M433.238 669.539c0-14.077-7.507-27.078-19.693-34.109-12.186-7.034-27.2-7.034-39.386 0-12.182 7.030-19.693 20.035-19.693 34.109v78.768h78.771v-78.768z","M630.16 669.539c0-10.445-4.15-20.467-11.533-27.85-7.386-7.386-17.408-11.536-27.853-11.536h-39.382v78.771h39.382c10.445 0 20.467-4.15 27.853-11.536 7.382-7.382 11.533-17.405 11.533-27.85z","M0.002 964.925c0 15.667 6.224 30.701 17.301 41.776s26.111 17.299 41.775 17.299h1024c15.667 0 30.701-6.224 41.776-17.299 11.075-11.078 17.299-26.112 17.299-41.776v-728.616h-1142.154l0.002 728.616zM334.771 512h19.693c6.224-72.736 48.659-137.45 112.896-172.138 64.237-34.692 141.629-34.692 205.866 0 64.237 34.688 106.672 99.402 112.896 172.138h19.693c77.389 0 148.896 41.286 187.594 108.31 38.691 67.021 38.691 149.59 0 216.614-38.698 67.024-110.205 108.307-187.594 108.307h-471.040c-77.39 0-148.897-41.283-187.595-108.307-38.689-67.024-38.689-149.594 0-216.614 38.698-67.024 110.207-108.31 187.595-108.31h-0.003z","M1083.078 0h-1024.003c-15.666 0-30.7 6.224-41.775 17.301s-17.301 26.111-17.301 41.775v137.846h1142.154v-137.846c0-15.666-6.224-30.7-17.299-41.775-11.078-11.075-26.115-17.301-41.776-17.301zM98.46 137.846c-10.444 0-20.466-4.15-27.851-11.534s-11.534-17.407-11.534-27.851c0-10.444 4.149-20.466 11.534-27.851s17.407-11.534 27.851-11.534c10.444 0 20.466 4.149 27.851 11.534s11.534 17.406 11.534 27.851c0 10.444-4.149 20.466-11.534 27.851s-17.407 11.534-27.851 11.534zM236.307 137.846c-10.444 0-20.466-4.15-27.851-11.534s-11.534-17.407-11.534-27.851c0-10.444 4.149-20.466 11.534-27.851s17.407-11.534 27.851-11.534c10.444 0 20.466 4.149 27.851 11.534s11.534 17.406 11.534 27.851c0 10.444-4.15 20.466-11.534 27.851s-17.407 11.534-27.851 11.534zM374.154 137.846c-10.445 0-20.467-4.15-27.85-11.534-7.386-7.385-11.536-17.407-11.536-27.851s4.15-20.466 11.536-27.851c7.382-7.385 17.405-11.534 27.85-11.534s20.464 4.149 27.85 11.534c7.386 7.384 11.536 17.406 11.536 27.851s-4.15 20.466-11.536 27.851c-7.386 7.384-17.405 11.534-27.85 11.534zM886.154 137.846h-354.461c-14.077 0-27.078-7.508-34.112-19.692-7.030-12.185-7.030-27.2 0-39.385 7.034-12.184 20.035-19.692 34.112-19.692h354.461c14.074 0 27.075 7.508 34.109 19.692s7.034 27.2 0 39.385c-7.034 12.185-20.035 19.692-34.109 19.692zM1088.79 171.517l-35.059-35.050c-3.27 0.87-6.646 1.336-10.038 1.38-10.445 0-20.467-4.15-27.85-11.534-7.386-7.385-11.536-17.407-11.536-27.851s4.15-20.466 11.536-27.851c7.382-7.385 17.405-11.534 27.85-11.534s20.467 4.149 27.85 11.534c7.386 7.384 11.536 17.406 11.536 27.851-0.045 3.393-0.512 6.769-1.382 10.039l35.053 35.050-27.958 27.965z","M334.758 905.846h472.618c63.312 0 121.827-33.776 153.485-88.614 31.654-54.838 31.654-122.39 0-177.232-31.658-54.838-90.173-88.614-153.485-88.614-11.974-0.010-23.914 1.178-35.642 3.542-5.856 1.203-11.946-0.317-16.544-4.131-4.554-3.798-7.155-9.434-7.085-15.36v-2.954c0-63.322-33.786-121.827-88.618-153.485-54.838-31.664-122.4-31.664-177.229 0-54.842 31.658-88.618 90.163-88.618 153.485v3.738c0.061 5.926-2.541 11.568-7.094 15.357-4.598 3.824-10.682 5.347-16.534 4.141-11.581-2.611-23.386-4.061-35.254-4.333-63.314 0-121.829 33.776-153.485 88.614-31.656 54.842-31.656 122.394 0 177.232s90.171 88.614 153.485 88.614zM807.376 590.771v39.382h-39.386v177.232h39.386v39.386h-118.157v-39.386h39.386v-177.232h-39.386v-39.382h118.157zM571.066 393.846c36.563 0 71.622 14.525 97.469 40.378 25.856 25.846 40.378 60.906 40.378 97.469h-39.382c0-26.112-10.374-51.155-28.835-69.629-18.47-18.461-43.517-28.832-69.629-28.832v-39.386zM511.99 610.461c0-10.874 8.816-19.69 19.693-19.69h59.075c28.141 0 54.147 15.014 68.221 39.382 14.064 24.371 14.064 54.4 0 78.771-14.077 24.368-40.080 39.382-68.221 39.382h-39.382v98.464h-39.386v-236.31zM315.067 669.539c0-28.141 15.017-54.147 39.385-68.218 24.368-14.067 54.4-14.067 78.768 0 24.371 14.074 39.386 40.080 39.386 68.218v177.232h-39.386v-59.078h-78.768v59.078h-39.385v-177.232z"],"width":1152,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["Group 2879"],"grid":0},"attrs":[],"properties":{"order":181,"id":7,"name":"api","prevSize":32,"code":57606},"setIdx":0,"setId":2,"iconIdx":21},{"icon":{"paths":["M497.513 79.857c-82.306 0-163.485 4.563-243.352 13.457-64.127 7.155-110.104 60.075-110.104 120.555v699.143c0.003 5.049 1.287 10.017 3.753 14.459s6.021 8.258 10.382 11.095c4.347 2.835 9.362 4.58 14.579 5.116s10.503-0.161 15.371-2.030l148.705-57.105 148.743 57.105c7.641 2.938 16.173 2.938 23.821 0l148.743-57.105 148.698 57.105c4.887 1.871 10.157 2.569 15.373 2.030s10.233-2.295 14.576-5.116c4.347-2.835 7.911-6.629 10.379-11.095s3.753-9.423 3.753-14.459v-699.143c0-60.48-45.981-113.386-110.11-120.555-80.771-8.991-162.027-13.473-243.352-13.457zM648.753 379.365c5.678-5.855 8.775-13.581 8.613-21.573-0.138-7.993-3.523-15.626-9.411-21.273s-13.83-8.883-22.16-9.041c-8.325-0.135-16.389 2.832-22.476 8.281l-257.062 246.862c-3.159 2.832-5.697 6.237-7.443 10.017s-2.704 7.862-2.781 12.015c-0.081 4.136 0.722 8.258 2.339 12.101 1.611 3.851 4.023 7.326 7.074 10.262s6.678 5.247 10.683 6.789c4.005 1.544 8.289 2.309 12.609 2.241 4.308-0.080 8.562-0.982 12.501-2.673 3.943-1.691 7.48-4.122 10.436-7.155l257.067-246.862zM352.925 388.421c0-12.285 5.085-24.057 14.121-32.734 9.045-8.672 21.303-13.559 34.084-13.559s25.038 4.887 34.084 13.559c9.045 8.672 14.121 20.448 14.121 32.734s-5.078 24.057-14.121 32.734c-9.045 8.672-21.303 13.559-34.084 13.559s-25.033-4.887-34.084-13.559c-9.045-8.672-14.121-20.448-14.121-32.734zM593.909 527.275c-12.775 0-25.033 4.887-34.084 13.559-9.045 8.679-14.121 20.448-14.121 32.734s5.078 24.057 14.121 32.734c9.045 8.672 21.303 13.559 34.084 13.559s25.038-4.887 34.084-13.559c9.045-8.672 14.121-20.448 14.121-32.734s-5.078-24.055-14.121-32.734c-9.045-8.672-21.303-13.559-34.084-13.559z"],"width":993,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["receipt-percent"],"grid":0},"attrs":[],"properties":{"order":182,"id":8,"name":"receipt-percent","prevSize":32,"code":57617},"setIdx":0,"setId":2,"iconIdx":22},{"icon":{"paths":["M839.772 244.869h-686.578c-15.171 0-29.725 5.624-40.459 15.638s-16.758 23.597-16.758 37.763v427.202c0 14.163 6.024 27.747 16.758 37.764 10.73 10.012 25.282 15.637 40.459 15.637h686.578c15.173 0 29.725-5.624 40.459-15.637 10.73-10.016 16.758-23.601 16.758-37.764v-427.202c0-14.166-6.024-27.748-16.758-37.763s-25.282-15.638-40.459-15.638zM525.087 672.071h-57.213c-7.592 0-14.869-2.816-20.229-7.822-5.366-5.007-8.382-11.798-8.382-18.878s3.016-13.871 8.382-18.878c5.362-5.007 12.637-7.822 20.229-7.822h57.213c7.592 0 14.869 2.816 20.229 7.822 5.366 5.007 8.382 11.798 8.382 18.878s-3.016 13.871-8.382 18.878c-5.362 5.007-12.637 7.822-20.229 7.822zM753.948 672.071h-114.427c-7.588 0-14.865-2.816-20.229-7.822-5.362-5.007-8.378-11.798-8.378-18.878s3.016-13.871 8.378-18.878c5.366-5.007 12.641-7.822 20.229-7.822h114.427c7.588 0 14.865 2.816 20.229 7.822 5.362 5.007 8.378 11.798 8.378 18.878s-3.016 13.871-8.378 18.878c-5.366 5.007-12.641 7.822-20.229 7.822zM153.195 378.37v-80.101h686.578v80.101h-686.578z"],"width":993,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["credit-card"],"grid":0},"attrs":[],"properties":{"order":183,"id":9,"name":"credit-card","prevSize":32,"code":57618},"setIdx":0,"setId":2,"iconIdx":23},{"icon":{"paths":["M857.412 748.739h-85.44c-15.094-47.378-59.058-82.033-111.428-82.033-52.362 0-96.293 34.646-111.423 82.033h-413.549c-19.559 0-35.437 15.878-35.437 35.437s15.876 35.437 35.437 35.437h413.549c15.094 47.378 59.058 82.026 111.428 82.026s96.294-34.646 111.423-82.026h85.444c19.592 0 35.437-15.878 35.437-35.437s-15.839-35.437-35.437-35.437zM660.545 669.337c51.839 0 95.285 34.742 109.496 82.026h87.368c18.148 0 32.808 14.699 32.808 32.813 0 14.994-10.052 27.66-23.818 31.561 13.753-3.918 23.817-16.567 23.817-31.559 0-18.116-14.665-32.813-32.808-32.813h-87.373c-14.208-47.28-57.649-82.026-109.493-82.026-9.617 0-18.941 1.194-27.849 3.443 8.905-2.256 18.232-3.444 27.855-3.444zM551.046 751.365h-415.479c-2.763 0-5.439 0.345-8.003 0.986 2.558-0.641 5.243-0.981 8.001-0.981h415.492c0 0 0 0 0-0.005zM687.97 895.676c39.294-9.76 70.42-40.039 82.059-78.68h-0.010c-11.64 38.641-42.768 68.915-82.049 78.68zM660.545 830.766c-25.68 0-46.59-20.905-46.59-46.59s20.909-46.59 46.59-46.59c25.685 0 46.594 20.905 46.594 46.59 0 25.68-20.909 46.59-46.594 46.59zM660.545 833.396c-27.135 0-49.22-22.080-49.22-49.22 0-22.948 15.792-42.281 37.074-47.704-21.292 5.419-37.083 24.757-37.083 47.707 0 27.135 22.080 49.22 49.22 49.22 3.631 0 7.159-0.402 10.567-1.147-3.397 0.746-6.933 1.143-10.563 1.143z","M857.412 223.772h-85.44c-15.127-47.375-59.058-82.028-111.428-82.028-52.362 0-96.293 34.646-111.423 82.028h-413.549c-19.559 0-35.437 15.876-35.437 35.437s15.876 35.437 35.437 35.437h413.549c15.127 47.378 59.056 82.026 111.423 82.026 52.372 0 96.294-34.646 111.428-82.026h85.44c19.592 0 35.437-15.878 35.437-35.437 0-19.556-15.839-35.437-35.437-35.437zM660.545 144.372c51.839 0 95.248 34.742 109.496 82.028h87.368c18.148 0 32.813 14.699 32.813 32.808 0 15.283-10.44 28.14-24.605 31.78 14.154-3.643 24.591-16.502 24.591-31.774 0-18.116-14.665-32.81-32.808-32.81h-87.373c-14.24-47.28-57.649-82.028-109.493-82.028-9.469 0-18.647 1.163-27.427 3.343 8.779-2.183 17.974-3.347 27.431-3.347zM551.046 226.398h-415.474c-2.763 0-5.44 0.344-8.003 0.981 2.56-0.641 5.243-0.98 8.002-0.98h415.487c0-0.002 0-0.002 0-0.003zM688.255 370.636c39.158-9.847 70.171-40.061 81.777-78.62h-0.010c-11.612 38.552-42.616 68.774-81.767 78.62zM660.545 305.798c-25.68 0-46.59-20.905-46.59-46.59 0-25.683 20.909-46.591 46.59-46.591 25.685 0 46.594 20.908 46.594 46.591 0 25.685-20.909 46.59-46.594 46.59zM660.545 308.419c-27.135 0-49.22-22.080-49.22-49.22 0-23.057 15.934-42.457 37.372-47.774-21.443 5.313-37.381 24.72-37.381 47.779 0 27.135 22.080 49.22 49.22 49.22 3.691 0 7.291-0.405 10.757-1.189-3.46 0.779-7.056 1.185-10.757 1.185z","M857.412 486.262h-413.549c-15.127-47.378-59.058-82.033-111.428-82.033s-96.293 34.646-111.423 82.033h-85.444c-19.559 0-35.437 15.873-35.437 35.437 0 19.559 15.876 35.432 35.437 35.432h85.443c15.127 47.378 59.058 82.033 111.426 82.033s96.294-34.646 111.423-82.033h413.549c19.592 0 35.437-15.878 35.437-35.432 0-19.559-15.839-35.437-35.437-35.437zM332.434 406.861c51.839 0 95.248 34.742 109.493 82.026h415.487c18.148 0 32.813 14.699 32.808 32.813 0 14.994-10.052 27.66-23.818 31.559 13.753-3.913 23.817-16.561 23.817-31.559 0-18.116-14.665-32.808-32.808-32.808h-415.487c-14.24-47.28-57.649-82.026-109.493-82.026-9.469 0-18.647 1.162-27.427 3.342 8.779-2.185 17.969-3.347 27.431-3.347zM222.939 488.887h-87.364c-2.763 0-5.44 0.345-8.003 0.986 2.56-0.641 5.243-0.981 8.002-0.981h87.375c0 0 0 0 0.002-0.005zM359.86 633.191c39.298-9.765 70.425-40.039 82.064-78.685h-0.014c-11.634 38.641-42.768 68.919-82.049 78.685zM332.434 568.29c-25.685 0-46.594-20.909-46.594-46.59 0-25.685 20.909-46.594 46.594-46.594 25.68 0 46.59 20.909 46.59 46.594 0 25.68-20.909 46.59-46.59 46.59zM332.434 570.916c-27.14 0-49.22-22.085-49.22-49.22 0-23.057 15.934-42.46 37.367-47.774-21.443 5.309-37.381 24.72-37.381 47.774 0 27.14 22.080 49.22 49.22 49.22 4.083 0 8.050-0.499 11.85-1.446-3.789 0.939-7.76 1.446-11.838 1.446z"],"width":993,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["change"],"grid":0},"attrs":[],"properties":{"order":184,"id":10,"name":"change","prevSize":32,"code":57619},"setIdx":0,"setId":2,"iconIdx":24},{"icon":{"paths":["M370.902 300.918c13.848 0 27.372 4.104 38.866 11.784 11.5 7.691 20.472 18.61 25.765 31.408 5.304 12.792 6.688 26.856 3.984 40.432-2.708 13.564-9.366 26.040-19.15 35.832-9.778 9.782-22.248 16.44-35.832 19.15-13.568 2.705-27.638 1.32-40.432-3.984s-23.717-14.265-31.408-25.765c-7.691-11.497-11.784-25.032-11.784-38.866 0-18.552 7.368-36.36 20.494-49.466s30.924-20.494 49.466-20.494zM547.62 155.045l320.858 320.858c17.544 17.592 27.432 41.4 27.528 66.236 0.064 12.191-2.328 24.264-7.024 35.525s-11.592 21.45-20.28 29.99l0.024 0.024-261.050 261.002c-8.538 8.706-18.744 15.598-29.986 20.28s-23.339 7.080-35.529 7.024c-12.21 0.037-24.3-2.328-35.59-6.974s-21.542-11.466-30.187-20.088l-320.858-320.858c-8.742-8.665-15.672-18.984-20.394-30.36s-7.141-23.559-7.128-35.88v-260.565c0.072-24.72 9.914-48.408 27.401-65.881s41.16-27.336 65.881-27.399h260.56c12.214-0.037 24.3 2.328 35.592 6.976 11.29 4.635 21.542 11.466 30.185 20.088zM673.49 412.464l-191.162-191.162h-261.021v261.021l320.81 320.81 260.607-261.434-129.232-129.236z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["tags"],"grid":0},"attrs":[],"properties":{"order":185,"id":11,"name":"tag","prevSize":32,"code":57620},"setIdx":0,"setId":2,"iconIdx":25},{"icon":{"paths":["M0.023 195.475v113.146h745.261v-113.146c-0.022-23.454-9.137-45.992-25.412-62.873-16.286-16.873-38.481-26.789-61.921-27.645v68.786c-1.049 25.15-15.090 47.953-37.061 60.234-21.976 12.28-48.748 12.28-70.73 0-21.976-12.28-36.001-35.084-37.061-60.234v-68.912h-68.012v68.912c-1.061 25.15-15.090 47.953-37.063 60.234-21.984 12.28-48.755 12.28-70.729 0s-36.011-35.084-37.063-60.234v-68.912h-68.145v68.912c0 25.853-13.796 49.736-36.182 62.668-22.394 12.923-49.978 12.923-72.362 0-22.393-12.931-36.191-36.814-36.191-62.668v-68.786c-23.447 0.829-45.652 10.728-61.946 27.611-16.294 16.891-25.404 39.442-25.385 62.907z","M90.661 805.465h290.724c-8.427-26.711-13.493-54.373-15.080-82.341h-51.145c-5.261-0.066-9.516-4.32-9.587-9.59v-115.059c0.072-5.27 4.325-9.525 9.587-9.59h70.962c7.652-21.124 17.426-41.43 29.145-60.604h-100.231c-5.297 0-9.587-4.293-9.587-9.59v-115.061c0-5.297 4.29-9.587 9.587-9.587h115.062c5.297 0 9.596 4.289 9.596 9.587v89.494c73.118-91.955 188.833-139.23 305.427-124.783v-40.525h-745.121v387.002c0.036 24.024 9.596 47.060 26.586 64.061 16.998 16.985 40.048 26.548 64.075 26.586zM77.873 403.507c0-5.289 4.298-9.596 9.596-9.596h115.062c5.297 0 9.587 4.299 9.587 9.587v115.071c0 5.297-4.29 9.585-9.587 9.585h-115.062c-5.297 0-9.587-4.287-9.587-9.585zM77.873 598.355c0.062-5.265 4.325-9.525 9.596-9.596h115.062c5.271 0.071 9.525 4.325 9.587 9.585v115.070c-0.063 5.265-4.317 9.514-9.587 9.59h-115.062c-5.271-0.076-9.525-4.325-9.587-9.59z","M96.688 413.096h96.014v96.014h-96.014z","M324.63 413.096h96.014v96.014h-96.014z","M96.688 607.934h96.014v96.010h-96.014z","M365.79 703.955c-0.017-32.468 4.673-64.771 13.94-95.885h-55.106v96.010z","M106.527 53.188v120.566c0 18.996 10.14 36.557 26.593 46.054 16.454 9.507 36.725 9.507 53.188 0 16.454-9.498 26.586-27.059 26.586-46.054v-120.566c0-19.004-10.131-36.565-26.586-46.063-16.463-9.498-36.735-9.498-53.188 0s-26.593 27.059-26.593 46.063z","M372.575 0h0.125c29.376 0 53.188 29.376 53.188 53.188v120.566c0 29.376-23.813 53.188-53.188 53.188h-0.125c-29.377 0-53.188-29.376-53.188-53.188v-120.566c0-29.376 23.812-53.188 53.188-53.188z","M532.271 53.188v120.566c0.901 18.398 11.245 35.040 27.35 43.985 16.111 8.954 35.695 8.954 51.801 0 16.105-8.945 26.449-25.586 27.35-43.985v-120.566c-0.901-18.407-11.245-35.041-27.35-43.995s-35.69-8.954-51.801 0c-16.105 8.954-26.449 25.586-27.35 43.995z","M704.357 1024c-176.379 0-319.366-142.989-319.366-319.368 0-176.385 142.986-319.369 319.366-319.369 176.385 0 319.373 142.984 319.373 319.369 0 176.379-142.989 319.368-319.373 319.368zM697.706 893.458c2.829 2.834 6.373 4.249 10.622 4.249s7.646-1.414 10.196-4.249c2.829-2.834 4.249-6.231 4.249-10.196v-36.334c15.903-1.824 30.065-5.713 42.484-11.676 14.161-7.078 25.346-16.57 33.56-28.464 8.214-12.179 12.321-26.34 12.321-42.484 0-20.393-6.51-36.536-19.541-48.431-13.031-12.179-33.423-21.245-61.178-27.192l-42.91-9.344c-17.842-3.686-30.731-9.35-38.661-16.996-7.93-7.93-11.895-18.41-11.895-31.441 0-16.712 6.226-30.163 18.689-40.359 12.747-10.196 29.742-15.297 50.982-15.297 16.149 0 29.884 2.124 41.211 6.373 11.616 3.965 22.097 9.77 31.441 17.422 3.681 2.545 7.083 3.823 10.196 3.823 3.397-0.284 6.089-1.278 8.072-2.976 2.266-1.982 3.823-4.249 4.675-6.794 1.13-2.834 1.272-5.669 0.426-8.498-0.568-3.118-2.266-5.947-5.101-8.498-10.48-9.912-23.227-17.558-38.235-22.943-12.709-4.642-24.887-7.389-36.536-8.236v-35.948c0-3.965-1.42-7.364-4.249-10.196-2.834-2.832-6.231-4.248-10.196-4.248-4.249 0-7.793 1.416-10.622 4.248-2.55 2.832-3.823 6.231-3.823 10.196v35.997c-17.154 1.327-32.304 5.472-45.46 12.435-14.445 7.362-25.777 17.558-33.986 30.589-7.935 12.747-11.9 27.334-11.9 43.762 0 20.961 6.231 37.951 18.694 50.982 12.463 12.747 31.583 21.949 57.355 27.613l42.484 8.924c13.315 2.834 23.937 6.373 31.867 10.622s13.735 9.344 17.416 15.292c3.686 5.947 5.527 12.889 5.527 20.819 0 10.196-2.55 19.12-7.651 26.766-5.095 7.646-12.883 13.593-23.364 17.842s-23.937 6.373-40.359 6.373c-19.83 0-36.4-2.408-49.709-7.22-13.315-4.817-24.642-10.48-33.991-16.996-3.965-2.55-7.504-3.539-10.617-2.971-3.118 0.279-5.811 1.556-8.072 3.823-1.988 2.266-3.402 4.953-4.249 8.072-0.568 3.113-0.284 6.373 0.847 9.77 1.414 3.113 3.681 5.805 6.799 8.072 11.327 8.214 25.21 15.013 41.637 20.393 14.287 4.435 29.868 7.051 46.733 7.842v35.493c0 3.965 1.272 7.362 3.823 10.196z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["subscription"],"grid":0},"attrs":[],"properties":{"order":186,"id":12,"name":"subscription","prevSize":32,"code":57621},"setIdx":0,"setId":2,"iconIdx":26},{"icon":{"paths":["M407.475 767.99l-243.2-243.2 60.8-60.798 182.4 182.398 391.465-391.465 60.8 60.8-452.265 452.265z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["mark-light"],"grid":0},"attrs":[],"properties":{"order":187,"id":13,"name":"mark-light","prevSize":32,"code":57622},"setIdx":0,"setId":2,"iconIdx":27},{"icon":{"paths":["M778.4 96h141.2l-308.4 352.4 362.8 479.6h-284l-222.6-290.8-254.4 290.8h-141.4l329.8-377-347.8-455h291.2l201 265.8 232.6-265.8zM728.8 843.6h78.2l-504.8-667.6h-84l510.6 667.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[{}]},"tags":["SVG Optimize Image"],"grid":0},"attrs":[{}],"properties":{"order":188,"id":14,"name":"brand-x-twitter","prevSize":32,"code":57623},"setIdx":0,"setId":2,"iconIdx":28}],"height":1024,"metadata":{"name":"tutor"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"tutor-icon-","metadata":{"fontFamily":"tutor","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":true,"showMetadata":true,"showVersion":true,"showMetrics":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon","autoHost":false,"height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"tutor":"YzU2NDAzOWQyNjhkZDkyNDNhNjg3OTNmZDE4ZmU2ZTAjMSMxNjgwNTg5ODQ0IyMjYzM1YzNlZjU3YWU1"},"showLiga":false,"showGrid":false}} \ No newline at end of file +{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M0 137.127c-0-75.733 61.394-137.127 137.127-137.127v0h285.607c36.33 0 71.235 14.425 96.924 40.159l269.757 269.757c24.804 24.807 40.149 59.072 40.159 96.922l0 0.002v470.773c0 75.687-61.395 137.082-137.127 137.082h-555.32c-75.733-0-137.127-61.394-137.127-137.127h0zM137.127 89.043c-26.556 0-48.083 21.528-48.083 48.083v0 740.486c0 26.535 21.504 48.039 48.083 48.039h555.364c26.537-0.025 48.039-21.543 48.039-48.083 0-0-0-0-0-0l0 0v-464.54h-279.463c-24.589 0-44.522-19.933-44.522-44.522v0-279.463zM505.589 151.997l171.987 171.987h-171.987zM229.643 694.272c-24.589 0-44.522 19.933-44.522 44.522s19.933 44.522 44.522 44.522v0h323.985c24.589 0 44.522-19.933 44.522-44.522s-19.933-44.522-44.522-44.522v0zM185.121 553.628c0-24.589 19.933-44.522 44.522-44.522v0h323.985c24.589 0 44.522 19.933 44.522 44.522s-19.933 44.522-44.522 44.522v0h-323.985c-24.589 0-44.522-19.933-44.522-44.522v0zM229.643 323.985c-24.589-0-44.522 19.933-44.522 44.522s19.933 44.522 44.522 44.522h46.303c24.589 0 44.522-19.933 44.522-44.522s-19.933-44.522-44.522-44.522v0z"],"attrs":[{}],"width":846,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["image (2)"]},"attrs":[{}],"properties":{"order":104,"id":17,"name":"lesson","prevSize":32,"code":57369},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M1002.665 0.001h-128c-2.796-0.034-5.571 0.518-8.141 1.62-2.575 1.102-4.884 2.73-6.789 4.78l-406.611 406.61c-68.231-31.215-145.262-37.462-217.631-17.647s-135.474 64.429-178.287 126.046c-42.813 61.619-62.612 136.325-55.937 211.062 6.675 74.732 39.4 144.748 92.456 197.801 53.056 53.059 123.068 85.78 197.804 92.457s149.439-13.123 211.058-55.936c61.617-42.813 106.232-105.917 126.047-178.289 19.814-72.366 13.568-149.396-17.644-217.631l98.985-98.557 82.345 27.733c7.188 2.592 14.935 3.208 22.441 1.782s14.49-4.841 20.224-9.888c5.519-4.705 9.748-10.74 12.288-17.533 2.534-6.793 3.302-14.121 2.222-21.293l-17.070-103.252 30.72-31.146 62.295 28.586c7.25 3.22 15.252 4.355 23.112 3.277s15.263-4.324 21.381-9.377c6.113-5.052 10.701-11.709 13.24-19.224 2.545-7.515 2.939-15.589 1.147-23.316l-21.76-77.226 55.040-55.466c2.278-2.093 4.040-4.683 5.151-7.57s1.536-5.991 1.249-9.070v-127.999c0-5.658-2.248-11.084-6.252-15.085-3.999-4.001-9.426-6.248-15.084-6.248zM298.672 789.33c0 12.657-3.753 25.032-10.786 35.553-7.032 10.527-17.028 18.729-28.722 23.572s-24.563 6.113-36.977 3.64c-12.415-2.468-23.818-8.561-32.769-17.516-8.95-8.95-15.046-20.352-17.515-32.768s-1.202-25.283 3.642-36.977c4.844-11.694 13.047-21.688 23.571-28.723 10.525-7.030 22.898-10.783 35.556-10.783 16.974 0 33.252 6.743 45.254 18.744s18.745 28.278 18.745 45.256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["key"],"grid":0},"attrs":[],"properties":{"order":105,"id":0,"name":"key","prevSize":32,"code":57640},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M211.554 103.619c0-23.552 19.114-42.667 42.666-42.667h286.479v213.334c0 24.248 9.631 47.503 26.775 64.649 17.149 17.146 40.405 26.779 64.652 26.779h237.714v505.904c0 11.318-4.495 22.167-12.498 30.17-7.998 8.003-18.852 12.498-30.17 12.498h-280.134c-12.771 22.086-28.161 42.555-45.837 60.95h325.972c27.481 0 53.841-10.914 73.27-30.348 19.434-19.429 30.354-45.789 30.354-73.27v-520.191c-0.011-14.541-5.788-28.484-16.071-38.766l-296.567-296.618c-10.294-10.279-24.247-16.049-38.793-16.043h-325.143c-27.481 0-53.837 10.917-73.269 30.349s-30.35 45.788-30.35 73.27v359.522c19.647-8.175 40.068-14.35 60.953-18.432v-341.090zM820.639 304.762h-188.513c-16.826 0-30.477-13.653-30.477-30.476v-188.514l218.99 218.989zM540.699 755.809c0 148.114-120.079 268.191-268.193 268.191s-268.191-120.077-268.191-268.191c0-148.114 120.076-268.19 268.191-268.19s268.193 120.076 268.193 268.19zM296.887 585.141c0-6.462-2.569-12.665-7.141-17.236-4.572-4.576-10.774-7.141-17.24-7.141s-12.668 2.565-17.24 7.141c-4.572 4.57-7.141 10.774-7.141 17.236v146.286h-146.286c-6.466 0-12.667 2.571-17.24 7.141-4.572 4.576-7.141 10.774-7.141 17.241s2.569 12.671 7.141 17.241c4.572 4.57 10.774 7.141 17.24 7.141h146.286v146.286c0 6.467 2.569 12.665 7.141 17.241 4.572 4.57 10.774 7.141 17.24 7.141s12.667-2.571 17.24-7.141c4.572-4.576 7.141-10.774 7.141-17.241v-146.286h146.285c6.466 0 12.668-2.571 17.24-7.141s7.141-10.774 7.141-17.241c0-6.467-2.569-12.665-7.141-17.241-4.572-4.57-10.774-7.141-17.24-7.141h-146.285v-146.286z"],"width":970,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["add-course"],"grid":0},"attrs":[],"properties":{"order":106,"id":1,"name":"add-document","prevSize":32,"code":57634},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M523.653 43.944c96.179 91.077 225.93 146.868 368.788 146.868l6.82-0.048c7.613-0.096 15.053 2.239 21.243 6.664 6.195 4.425 10.813 10.71 13.189 17.941 19.645 59.844 30.275 123.741 30.275 190.022 0 283.341-193.787 521.334-456.003 588.805-5.849 1.51-11.985 1.51-17.834 0-262.216-67.471-456.006-305.464-456.006-588.805-0.066-64.547 10.155-128.692 30.28-190.022 2.382-7.222 7.004-13.496 13.195-17.913s13.629-6.744 21.233-6.645c139.578 1.971 274.389-50.742 375.61-146.868 6.644-6.299 15.45-9.81 24.605-9.81s17.959 3.511 24.605 9.81zM671.191 426.182c2.857-3.812 4.931-8.158 6.088-12.782s1.377-9.433 0.65-14.143c-0.727-4.711-2.391-9.228-4.89-13.287s-5.78-7.578-9.656-10.35c-3.881-2.771-8.274-4.74-12.923-5.79s-9.462-1.16-14.152-0.323c-4.695 0.837-9.17 2.603-13.174 5.195-3.999 2.592-7.439 5.958-10.122 9.899l-154.306 216.011-77.439-77.44c-6.779-6.318-15.746-9.759-25.011-9.595s-18.105 3.917-24.658 10.47c-6.552 6.554-10.306 15.391-10.469 24.658s3.276 18.232 9.593 25.011l107.29 107.29c3.671 3.671 8.097 6.497 12.969 8.279 4.873 1.787 10.076 2.493 15.248 2.068 5.172-0.43 10.19-1.976 14.704-4.536s8.417-6.072 11.438-10.291l178.819-250.344z"],"width":973,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["privacy"],"defaultCode":63744,"grid":0},"attrs":[],"properties":{"order":107,"name":"privacy","prevSize":32,"ligatures":"","id":2,"code":57600},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M58.316 57.283c26.984-26.631 64.777-36.783 107.106-36.783h1000.396c42.527 0 80.374 10.128 107.325 36.818 27.013 26.747 37.596 64.676 37.596 108.105v542.090c0 43.228-10.609 81.106-37.56 107.878-26.911 26.742-64.732 37.043-107.361 37.043h-1000.396c-42.432 0-80.2-10.327-107.142-37.007-26.999-26.732-37.78-64.584-37.78-107.914v-542.090c0-43.531 10.757-81.434 37.816-108.14zM101.474 101.012c-11.091 10.946-19.534 30.144-19.534 64.411v542.090c0 33.966 8.418 53.217 19.57 64.256 11.209 11.1 30.542 19.226 63.912 19.226h1000.396c33.669 0 52.951-8.151 64.061-19.19 11.075-10.998 19.42-30.223 19.42-64.292v-542.090c0-34.369-8.371-53.541-19.384-64.446-11.069-10.961-30.326-19.037-64.097-19.037h-1000.396c-33.474 0-52.782 8.051-63.948 19.072z","M964.833 998.784c22.441 0 40.392-18.452 40.392-41.39 0-22.943-17.951-41.395-40.392-41.395h-599.94c-22.442 0-40.894 18.452-40.894 41.395 0 22.938 18.452 41.39 40.894 41.39h599.94z"],"width":1331,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["laptop"],"defaultCode":63745,"grid":0},"attrs":[],"properties":{"order":108,"name":"laptop","prevSize":32,"id":3,"code":57601},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M104.736 83.791c-11.567 0-20.945 9.378-20.945 20.945v581.819c0 11.567 9.378 20.945 20.945 20.945h930.91c11.567 0 20.945-9.379 20.945-20.945v-581.819c0-11.567-9.379-20.945-20.945-20.945h-930.91zM9.318 104.736c0-52.698 42.72-95.418 95.418-95.418h930.91c52.699 0 95.418 42.72 95.418 95.418v581.819c0 52.699-42.719 95.418-95.418 95.418h-930.91c-52.698 0-95.418-42.719-95.418-95.418v-581.819z","M242.045 977.464c0-20.564 16.671-37.236 37.236-37.236h581.819c20.564 0 37.236 16.673 37.236 37.236s-16.673 37.236-37.236 37.236h-581.819c-20.565 0-37.236-16.673-37.236-37.236z","M395.645 707.5c20.565 0 37.236 16.668 37.236 37.236v232.727c0 20.564-16.672 37.236-37.236 37.236s-37.236-16.673-37.236-37.236v-232.727c0-20.568 16.671-37.236 37.236-37.236z","M744.737 707.5c20.564 0 37.236 16.668 37.236 37.236v232.727c0 20.564-16.673 37.236-37.236 37.236-20.568 0-37.236-16.673-37.236-37.236v-232.727c0-20.568 16.668-37.236 37.236-37.236z"],"width":1164,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["desktop"],"defaultCode":63746,"grid":0},"attrs":[],"properties":{"order":109,"name":"desktop","prevSize":32,"id":4,"code":57602},"setIdx":0,"setId":2,"iconIdx":5},{"icon":{"paths":["M37.667 889.276v-754.598c0-64.176 53.591-115.5 118.898-115.5h1013.759c65.308 0 118.898 51.323 118.898 115.5v754.598c0 64.176-53.589 115.502-118.898 115.502h-1013.759c-65.307 0-118.898-51.325-118.898-115.502zM149.502 89.982c-27.796 3.26-49.248 25.485-49.248 52.388v739.202l0.438 6.616c3.47 26.027 27.133 46.182 55.882 46.182l1020.832-0.415c27.796-3.26 49.249-25.481 49.249-52.383v-739.203l-0.438-6.62c-3.47-26.024-27.136-46.18-55.882-46.18l-1020.833 0.412zM976.321 159.981c0-17.281-14.006-31.289-31.289-31.289-17.277 0-31.289 14.008-31.289 31.289v688.358c0 17.277 14.012 31.289 31.289 31.289 17.283 0 31.289-14.012 31.289-31.289v-688.358zM1101.494 566.736c-34.606 0-62.578-28.035-62.578-62.578s27.972-62.578 62.578-62.578c34.606 0 62.578 28.035 62.578 62.578s-27.972 62.578-62.578 62.578z"],"width":1308,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["tablet"],"defaultCode":63747,"grid":0},"attrs":[],"properties":{"order":110,"name":"tablet","prevSize":32,"id":5,"code":57603},"setIdx":0,"setId":2,"iconIdx":6},{"icon":{"paths":["M89.6 0h537.6c51.754 0 89.6 45.385 89.6 97.28v829.44c0 51.894-37.846 97.28-89.6 97.28h-537.6c-51.753 0-89.6-45.386-89.6-97.28v-829.44c0-51.895 37.847-97.28 89.6-97.28zM665.321 91.514c-2.369-22.743-18.534-40.293-38.102-40.293l-542.412 0.358c-18.927 2.839-33.585 22.199-33.585 45.722v829.442l0.299 5.786c2.371 22.742 18.534 40.294 38.101 40.294l542.415-0.363c18.925-2.839 33.583-22.198 33.583-45.717v-829.442l-0.298-5.787zM435.2 204.81c14.139 0 25.6-11.461 25.6-25.6s-11.461-25.6-25.6-25.6h-153.6c-14.138 0-25.6 11.462-25.6 25.6s11.461 25.6 25.6 25.6h153.6zM307.221 819.2c0-28.314 22.938-51.2 51.2-51.2s51.2 22.886 51.2 51.2c0 28.314-22.938 51.2-51.2 51.2s-51.2-22.886-51.2-51.2z"],"width":745,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["mobile"],"defaultCode":63748,"grid":0},"attrs":[],"properties":{"order":111,"name":"mobile","prevSize":32,"id":6,"code":57604},"setIdx":0,"setId":2,"iconIdx":7},{"icon":{"paths":["M422.398 1016.542c-19.796-11.725-39.113-24.246-57.904-37.524-48.585-34.315-93.98-72.943-135.633-115.405-98.261-100.636-200.416-251.898-200.416-446.397 0-110.652 43.956-216.773 122.2-295.017s184.364-122.2 295.017-122.2c110.653 0 216.776 43.957 295.016 122.2 78.245 78.243 122.203 184.364 122.203 295.017 0 194.55-102.104 345.76-200.42 446.397-41.665 42.468-87.080 81.089-135.682 115.405-18.774 13.278-38.075 25.793-57.854 37.524l-3.59 2.071-1.416 0.762c-5.616 3.032-11.898 4.625-18.282 4.625s-12.667-1.593-18.282-4.625l-4.956-2.833zM445.661 568.929c40.238 0 78.827-15.981 107.279-44.434 28.454-28.452 44.434-67.041 44.434-107.279s-15.98-78.826-44.434-107.279c-28.452-28.452-67.041-44.436-107.279-44.436s-78.826 15.984-107.279 44.436c-28.452 28.452-44.436 67.042-44.436 107.279s15.984 78.827 44.436 107.279c28.452 28.452 67.042 44.434 107.279 44.434z"],"width":910,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["map-pin"],"defaultCode":63749,"grid":0},"attrs":[],"properties":{"order":112,"name":"map-pin","prevSize":32,"id":7,"code":57605},"setIdx":0,"setId":2,"iconIdx":8},{"icon":{"paths":["M433.238 669.539c0-14.077-7.507-27.078-19.693-34.109-12.186-7.034-27.2-7.034-39.386 0-12.182 7.030-19.693 20.035-19.693 34.109v78.768h78.771v-78.768z","M630.16 669.539c0-10.445-4.15-20.467-11.533-27.85-7.386-7.386-17.408-11.536-27.853-11.536h-39.382v78.771h39.382c10.445 0 20.467-4.15 27.853-11.536 7.382-7.382 11.533-17.405 11.533-27.85z","M0.002 964.925c0 15.667 6.224 30.701 17.301 41.776s26.111 17.299 41.775 17.299h1024c15.667 0 30.701-6.224 41.776-17.299 11.075-11.078 17.299-26.112 17.299-41.776v-728.616h-1142.154l0.002 728.616zM334.771 512h19.693c6.224-72.736 48.659-137.45 112.896-172.138 64.237-34.692 141.629-34.692 205.866 0 64.237 34.688 106.672 99.402 112.896 172.138h19.693c77.389 0 148.896 41.286 187.594 108.31 38.691 67.021 38.691 149.59 0 216.614-38.698 67.024-110.205 108.307-187.594 108.307h-471.040c-77.39 0-148.897-41.283-187.595-108.307-38.689-67.024-38.689-149.594 0-216.614 38.698-67.024 110.207-108.31 187.595-108.31h-0.003z","M1083.078 0h-1024.003c-15.666 0-30.7 6.224-41.775 17.301s-17.301 26.111-17.301 41.775v137.846h1142.154v-137.846c0-15.666-6.224-30.7-17.299-41.775-11.078-11.075-26.115-17.301-41.776-17.301zM98.46 137.846c-10.444 0-20.466-4.15-27.851-11.534s-11.534-17.407-11.534-27.851c0-10.444 4.149-20.466 11.534-27.851s17.407-11.534 27.851-11.534c10.444 0 20.466 4.149 27.851 11.534s11.534 17.406 11.534 27.851c0 10.444-4.149 20.466-11.534 27.851s-17.407 11.534-27.851 11.534zM236.307 137.846c-10.444 0-20.466-4.15-27.851-11.534s-11.534-17.407-11.534-27.851c0-10.444 4.149-20.466 11.534-27.851s17.407-11.534 27.851-11.534c10.444 0 20.466 4.149 27.851 11.534s11.534 17.406 11.534 27.851c0 10.444-4.15 20.466-11.534 27.851s-17.407 11.534-27.851 11.534zM374.154 137.846c-10.445 0-20.467-4.15-27.85-11.534-7.386-7.385-11.536-17.407-11.536-27.851s4.15-20.466 11.536-27.851c7.382-7.385 17.405-11.534 27.85-11.534s20.464 4.149 27.85 11.534c7.386 7.384 11.536 17.406 11.536 27.851s-4.15 20.466-11.536 27.851c-7.386 7.384-17.405 11.534-27.85 11.534zM886.154 137.846h-354.461c-14.077 0-27.078-7.508-34.112-19.692-7.030-12.185-7.030-27.2 0-39.385 7.034-12.184 20.035-19.692 34.112-19.692h354.461c14.074 0 27.075 7.508 34.109 19.692s7.034 27.2 0 39.385c-7.034 12.185-20.035 19.692-34.109 19.692zM1088.79 171.517l-35.059-35.050c-3.27 0.87-6.646 1.336-10.038 1.38-10.445 0-20.467-4.15-27.85-11.534-7.386-7.385-11.536-17.407-11.536-27.851s4.15-20.466 11.536-27.851c7.382-7.385 17.405-11.534 27.85-11.534s20.467 4.149 27.85 11.534c7.386 7.384 11.536 17.406 11.536 27.851-0.045 3.393-0.512 6.769-1.382 10.039l35.053 35.050-27.958 27.965z","M334.758 905.846h472.618c63.312 0 121.827-33.776 153.485-88.614 31.654-54.838 31.654-122.39 0-177.232-31.658-54.838-90.173-88.614-153.485-88.614-11.974-0.010-23.914 1.178-35.642 3.542-5.856 1.203-11.946-0.317-16.544-4.131-4.554-3.798-7.155-9.434-7.085-15.36v-2.954c0-63.322-33.786-121.827-88.618-153.485-54.838-31.664-122.4-31.664-177.229 0-54.842 31.658-88.618 90.163-88.618 153.485v3.738c0.061 5.926-2.541 11.568-7.094 15.357-4.598 3.824-10.682 5.347-16.534 4.141-11.581-2.611-23.386-4.061-35.254-4.333-63.314 0-121.829 33.776-153.485 88.614-31.656 54.842-31.656 122.394 0 177.232s90.171 88.614 153.485 88.614zM807.376 590.771v39.382h-39.386v177.232h39.386v39.386h-118.157v-39.386h39.386v-177.232h-39.386v-39.382h118.157zM571.066 393.846c36.563 0 71.622 14.525 97.469 40.378 25.856 25.846 40.378 60.906 40.378 97.469h-39.382c0-26.112-10.374-51.155-28.835-69.629-18.47-18.461-43.517-28.832-69.629-28.832v-39.386zM511.99 610.461c0-10.874 8.816-19.69 19.693-19.69h59.075c28.141 0 54.147 15.014 68.221 39.382 14.064 24.371 14.064 54.4 0 78.771-14.077 24.368-40.080 39.382-68.221 39.382h-39.382v98.464h-39.386v-236.31zM315.067 669.539c0-28.141 15.017-54.147 39.385-68.218 24.368-14.067 54.4-14.067 78.768 0 24.371 14.074 39.386 40.080 39.386 68.218v177.232h-39.386v-59.078h-78.768v59.078h-39.385v-177.232z"],"width":1152,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["Group 2879"],"grid":0},"attrs":[],"properties":{"order":113,"id":8,"name":"api","prevSize":32,"code":57606},"setIdx":0,"setId":2,"iconIdx":9},{"icon":{"paths":["M497.513 79.857c-82.306 0-163.485 4.563-243.352 13.457-64.127 7.155-110.104 60.075-110.104 120.555v699.143c0.003 5.049 1.287 10.017 3.753 14.459s6.021 8.258 10.382 11.095c4.347 2.835 9.362 4.58 14.579 5.116s10.503-0.161 15.371-2.030l148.705-57.105 148.743 57.105c7.641 2.938 16.173 2.938 23.821 0l148.743-57.105 148.698 57.105c4.887 1.871 10.157 2.569 15.373 2.030s10.233-2.295 14.576-5.116c4.347-2.835 7.911-6.629 10.379-11.095s3.753-9.423 3.753-14.459v-699.143c0-60.48-45.981-113.386-110.11-120.555-80.771-8.991-162.027-13.473-243.352-13.457zM648.753 379.365c5.678-5.855 8.775-13.581 8.613-21.573-0.138-7.993-3.523-15.626-9.411-21.273s-13.83-8.883-22.16-9.041c-8.325-0.135-16.389 2.832-22.476 8.281l-257.062 246.862c-3.159 2.832-5.697 6.237-7.443 10.017s-2.704 7.862-2.781 12.015c-0.081 4.136 0.722 8.258 2.339 12.101 1.611 3.851 4.023 7.326 7.074 10.262s6.678 5.247 10.683 6.789c4.005 1.544 8.289 2.309 12.609 2.241 4.308-0.080 8.562-0.982 12.501-2.673 3.943-1.691 7.48-4.122 10.436-7.155l257.067-246.862zM352.925 388.421c0-12.285 5.085-24.057 14.121-32.734 9.045-8.672 21.303-13.559 34.084-13.559s25.038 4.887 34.084 13.559c9.045 8.672 14.121 20.448 14.121 32.734s-5.078 24.057-14.121 32.734c-9.045 8.672-21.303 13.559-34.084 13.559s-25.033-4.887-34.084-13.559c-9.045-8.672-14.121-20.448-14.121-32.734zM593.909 527.275c-12.775 0-25.033 4.887-34.084 13.559-9.045 8.679-14.121 20.448-14.121 32.734s5.078 24.057 14.121 32.734c9.045 8.672 21.303 13.559 34.084 13.559s25.038-4.887 34.084-13.559c9.045-8.672 14.121-20.448 14.121-32.734s-5.078-24.055-14.121-32.734c-9.045-8.672-21.303-13.559-34.084-13.559z"],"width":993,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["receipt-percent"],"grid":0},"attrs":[],"properties":{"order":114,"id":9,"name":"receipt-percent","prevSize":32,"code":57617},"setIdx":0,"setId":2,"iconIdx":10},{"icon":{"paths":["M839.772 244.869h-686.578c-15.171 0-29.725 5.624-40.459 15.638s-16.758 23.597-16.758 37.763v427.202c0 14.163 6.024 27.747 16.758 37.764 10.73 10.012 25.282 15.637 40.459 15.637h686.578c15.173 0 29.725-5.624 40.459-15.637 10.73-10.016 16.758-23.601 16.758-37.764v-427.202c0-14.166-6.024-27.748-16.758-37.763s-25.282-15.638-40.459-15.638zM525.087 672.071h-57.213c-7.592 0-14.869-2.816-20.229-7.822-5.366-5.007-8.382-11.798-8.382-18.878s3.016-13.871 8.382-18.878c5.362-5.007 12.637-7.822 20.229-7.822h57.213c7.592 0 14.869 2.816 20.229 7.822 5.366 5.007 8.382 11.798 8.382 18.878s-3.016 13.871-8.382 18.878c-5.362 5.007-12.637 7.822-20.229 7.822zM753.948 672.071h-114.427c-7.588 0-14.865-2.816-20.229-7.822-5.362-5.007-8.378-11.798-8.378-18.878s3.016-13.871 8.378-18.878c5.366-5.007 12.641-7.822 20.229-7.822h114.427c7.588 0 14.865 2.816 20.229 7.822 5.362 5.007 8.378 11.798 8.378 18.878s-3.016 13.871-8.378 18.878c-5.366 5.007-12.641 7.822-20.229 7.822zM153.195 378.37v-80.101h686.578v80.101h-686.578z"],"width":993,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["credit-card"],"grid":0},"attrs":[],"properties":{"order":115,"id":10,"name":"credit-card","prevSize":32,"code":57618},"setIdx":0,"setId":2,"iconIdx":11},{"icon":{"paths":["M857.412 748.739h-85.44c-15.094-47.378-59.058-82.033-111.428-82.033-52.362 0-96.293 34.646-111.423 82.033h-413.549c-19.559 0-35.437 15.878-35.437 35.437s15.876 35.437 35.437 35.437h413.549c15.094 47.378 59.058 82.026 111.428 82.026s96.294-34.646 111.423-82.026h85.444c19.592 0 35.437-15.878 35.437-35.437s-15.839-35.437-35.437-35.437zM660.545 669.337c51.839 0 95.285 34.742 109.496 82.026h87.368c18.148 0 32.808 14.699 32.808 32.813 0 14.994-10.052 27.66-23.818 31.561 13.753-3.918 23.817-16.567 23.817-31.559 0-18.116-14.665-32.813-32.808-32.813h-87.373c-14.208-47.28-57.649-82.026-109.493-82.026-9.617 0-18.941 1.194-27.849 3.443 8.905-2.256 18.232-3.444 27.855-3.444zM551.046 751.365h-415.479c-2.763 0-5.439 0.345-8.003 0.986 2.558-0.641 5.243-0.981 8.001-0.981h415.492c0 0 0 0 0-0.005zM687.97 895.676c39.294-9.76 70.42-40.039 82.059-78.68h-0.010c-11.64 38.641-42.768 68.915-82.049 78.68zM660.545 830.766c-25.68 0-46.59-20.905-46.59-46.59s20.909-46.59 46.59-46.59c25.685 0 46.594 20.905 46.594 46.59 0 25.68-20.909 46.59-46.594 46.59zM660.545 833.396c-27.135 0-49.22-22.080-49.22-49.22 0-22.948 15.792-42.281 37.074-47.704-21.292 5.419-37.083 24.757-37.083 47.707 0 27.135 22.080 49.22 49.22 49.22 3.631 0 7.159-0.402 10.567-1.147-3.397 0.746-6.933 1.143-10.563 1.143z","M857.412 223.772h-85.44c-15.127-47.375-59.058-82.028-111.428-82.028-52.362 0-96.293 34.646-111.423 82.028h-413.549c-19.559 0-35.437 15.876-35.437 35.437s15.876 35.437 35.437 35.437h413.549c15.127 47.378 59.056 82.026 111.423 82.026 52.372 0 96.294-34.646 111.428-82.026h85.44c19.592 0 35.437-15.878 35.437-35.437 0-19.556-15.839-35.437-35.437-35.437zM660.545 144.372c51.839 0 95.248 34.742 109.496 82.028h87.368c18.148 0 32.813 14.699 32.813 32.808 0 15.283-10.44 28.14-24.605 31.78 14.154-3.643 24.591-16.502 24.591-31.774 0-18.116-14.665-32.81-32.808-32.81h-87.373c-14.24-47.28-57.649-82.028-109.493-82.028-9.469 0-18.647 1.163-27.427 3.343 8.779-2.183 17.974-3.347 27.431-3.347zM551.046 226.398h-415.474c-2.763 0-5.44 0.344-8.003 0.981 2.56-0.641 5.243-0.98 8.002-0.98h415.487c0-0.002 0-0.002 0-0.003zM688.255 370.636c39.158-9.847 70.171-40.061 81.777-78.62h-0.010c-11.612 38.552-42.616 68.774-81.767 78.62zM660.545 305.798c-25.68 0-46.59-20.905-46.59-46.59 0-25.683 20.909-46.591 46.59-46.591 25.685 0 46.594 20.908 46.594 46.591 0 25.685-20.909 46.59-46.594 46.59zM660.545 308.419c-27.135 0-49.22-22.080-49.22-49.22 0-23.057 15.934-42.457 37.372-47.774-21.443 5.313-37.381 24.72-37.381 47.779 0 27.135 22.080 49.22 49.22 49.22 3.691 0 7.291-0.405 10.757-1.189-3.46 0.779-7.056 1.185-10.757 1.185z","M857.412 486.262h-413.549c-15.127-47.378-59.058-82.033-111.428-82.033s-96.293 34.646-111.423 82.033h-85.444c-19.559 0-35.437 15.873-35.437 35.437 0 19.559 15.876 35.432 35.437 35.432h85.443c15.127 47.378 59.058 82.033 111.426 82.033s96.294-34.646 111.423-82.033h413.549c19.592 0 35.437-15.878 35.437-35.432 0-19.559-15.839-35.437-35.437-35.437zM332.434 406.861c51.839 0 95.248 34.742 109.493 82.026h415.487c18.148 0 32.813 14.699 32.808 32.813 0 14.994-10.052 27.66-23.818 31.559 13.753-3.913 23.817-16.561 23.817-31.559 0-18.116-14.665-32.808-32.808-32.808h-415.487c-14.24-47.28-57.649-82.026-109.493-82.026-9.469 0-18.647 1.162-27.427 3.342 8.779-2.185 17.969-3.347 27.431-3.347zM222.939 488.887h-87.364c-2.763 0-5.44 0.345-8.003 0.986 2.56-0.641 5.243-0.981 8.002-0.981h87.375c0 0 0 0 0.002-0.005zM359.86 633.191c39.298-9.765 70.425-40.039 82.064-78.685h-0.014c-11.634 38.641-42.768 68.919-82.049 78.685zM332.434 568.29c-25.685 0-46.594-20.909-46.594-46.59 0-25.685 20.909-46.594 46.594-46.594 25.68 0 46.59 20.909 46.59 46.594 0 25.68-20.909 46.59-46.59 46.59zM332.434 570.916c-27.14 0-49.22-22.085-49.22-49.22 0-23.057 15.934-42.46 37.367-47.774-21.443 5.309-37.381 24.72-37.381 47.774 0 27.14 22.080 49.22 49.22 49.22 4.083 0 8.050-0.499 11.85-1.446-3.789 0.939-7.76 1.446-11.838 1.446z"],"width":993,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["change"],"grid":0},"attrs":[],"properties":{"order":116,"id":11,"name":"change","prevSize":32,"code":57619},"setIdx":0,"setId":2,"iconIdx":12},{"icon":{"paths":["M370.902 300.918c13.848 0 27.372 4.104 38.866 11.784 11.5 7.691 20.472 18.61 25.765 31.408 5.304 12.792 6.688 26.856 3.984 40.432-2.708 13.564-9.366 26.040-19.15 35.832-9.778 9.782-22.248 16.44-35.832 19.15-13.568 2.705-27.638 1.32-40.432-3.984s-23.717-14.265-31.408-25.765c-7.691-11.497-11.784-25.032-11.784-38.866 0-18.552 7.368-36.36 20.494-49.466s30.924-20.494 49.466-20.494zM547.62 155.045l320.858 320.858c17.544 17.592 27.432 41.4 27.528 66.236 0.064 12.191-2.328 24.264-7.024 35.525s-11.592 21.45-20.28 29.99l0.024 0.024-261.050 261.002c-8.538 8.706-18.744 15.598-29.986 20.28s-23.339 7.080-35.529 7.024c-12.21 0.037-24.3-2.328-35.59-6.974s-21.542-11.466-30.187-20.088l-320.858-320.858c-8.742-8.665-15.672-18.984-20.394-30.36s-7.141-23.559-7.128-35.88v-260.565c0.072-24.72 9.914-48.408 27.401-65.881s41.16-27.336 65.881-27.399h260.56c12.214-0.037 24.3 2.328 35.592 6.976 11.29 4.635 21.542 11.466 30.185 20.088zM673.49 412.464l-191.162-191.162h-261.021v261.021l320.81 320.81 260.607-261.434-129.232-129.236z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1111241631124186114515116817580921":[],"2552552551681102451":[]},"tags":["tags"],"grid":0},"attrs":[],"properties":{"order":117,"id":12,"name":"tag","prevSize":32,"code":57620},"setIdx":0,"setId":2,"iconIdx":13},{"icon":{"paths":["M0.023 195.475v113.146h745.261v-113.146c-0.022-23.454-9.137-45.992-25.412-62.873-16.286-16.873-38.481-26.789-61.921-27.645v68.786c-1.049 25.15-15.090 47.953-37.061 60.234-21.976 12.28-48.748 12.28-70.73 0-21.976-12.28-36.001-35.084-37.061-60.234v-68.912h-68.012v68.912c-1.061 25.15-15.090 47.953-37.063 60.234-21.984 12.28-48.755 12.28-70.729 0s-36.011-35.084-37.063-60.234v-68.912h-68.145v68.912c0 25.853-13.796 49.736-36.182 62.668-22.394 12.923-49.978 12.923-72.362 0-22.393-12.931-36.191-36.814-36.191-62.668v-68.786c-23.447 0.829-45.652 10.728-61.946 27.611-16.294 16.891-25.404 39.442-25.385 62.907z","M90.661 805.465h290.724c-8.427-26.711-13.493-54.373-15.080-82.341h-51.145c-5.261-0.066-9.516-4.32-9.587-9.59v-115.059c0.072-5.27 4.325-9.525 9.587-9.59h70.962c7.652-21.124 17.426-41.43 29.145-60.604h-100.231c-5.297 0-9.587-4.293-9.587-9.59v-115.061c0-5.297 4.29-9.587 9.587-9.587h115.062c5.297 0 9.596 4.289 9.596 9.587v89.494c73.118-91.955 188.833-139.23 305.427-124.783v-40.525h-745.121v387.002c0.036 24.024 9.596 47.060 26.586 64.061 16.998 16.985 40.048 26.548 64.075 26.586zM77.873 403.507c0-5.289 4.298-9.596 9.596-9.596h115.062c5.297 0 9.587 4.299 9.587 9.587v115.071c0 5.297-4.29 9.585-9.587 9.585h-115.062c-5.297 0-9.587-4.287-9.587-9.585zM77.873 598.355c0.062-5.265 4.325-9.525 9.596-9.596h115.062c5.271 0.071 9.525 4.325 9.587 9.585v115.070c-0.063 5.265-4.317 9.514-9.587 9.59h-115.062c-5.271-0.076-9.525-4.325-9.587-9.59z","M96.688 413.096h96.014v96.014h-96.014z","M324.63 413.096h96.014v96.014h-96.014z","M96.688 607.934h96.014v96.010h-96.014z","M365.79 703.955c-0.017-32.468 4.673-64.771 13.94-95.885h-55.106v96.010z","M106.527 53.188v120.566c0 18.996 10.14 36.557 26.593 46.054 16.454 9.507 36.725 9.507 53.188 0 16.454-9.498 26.586-27.059 26.586-46.054v-120.566c0-19.004-10.131-36.565-26.586-46.063-16.463-9.498-36.735-9.498-53.188 0s-26.593 27.059-26.593 46.063z","M372.575 0h0.125c29.376 0 53.188 29.376 53.188 53.188v120.566c0 29.376-23.813 53.188-53.188 53.188h-0.125c-29.377 0-53.188-29.376-53.188-53.188v-120.566c0-29.376 23.812-53.188 53.188-53.188z","M532.271 53.188v120.566c0.901 18.398 11.245 35.040 27.35 43.985 16.111 8.954 35.695 8.954 51.801 0 16.105-8.945 26.449-25.586 27.35-43.985v-120.566c-0.901-18.407-11.245-35.041-27.35-43.995s-35.69-8.954-51.801 0c-16.105 8.954-26.449 25.586-27.35 43.995z","M704.357 1024c-176.379 0-319.366-142.989-319.366-319.368 0-176.385 142.986-319.369 319.366-319.369 176.385 0 319.373 142.984 319.373 319.369 0 176.379-142.989 319.368-319.373 319.368zM697.706 893.458c2.829 2.834 6.373 4.249 10.622 4.249s7.646-1.414 10.196-4.249c2.829-2.834 4.249-6.231 4.249-10.196v-36.334c15.903-1.824 30.065-5.713 42.484-11.676 14.161-7.078 25.346-16.57 33.56-28.464 8.214-12.179 12.321-26.34 12.321-42.484 0-20.393-6.51-36.536-19.541-48.431-13.031-12.179-33.423-21.245-61.178-27.192l-42.91-9.344c-17.842-3.686-30.731-9.35-38.661-16.996-7.93-7.93-11.895-18.41-11.895-31.441 0-16.712 6.226-30.163 18.689-40.359 12.747-10.196 29.742-15.297 50.982-15.297 16.149 0 29.884 2.124 41.211 6.373 11.616 3.965 22.097 9.77 31.441 17.422 3.681 2.545 7.083 3.823 10.196 3.823 3.397-0.284 6.089-1.278 8.072-2.976 2.266-1.982 3.823-4.249 4.675-6.794 1.13-2.834 1.272-5.669 0.426-8.498-0.568-3.118-2.266-5.947-5.101-8.498-10.48-9.912-23.227-17.558-38.235-22.943-12.709-4.642-24.887-7.389-36.536-8.236v-35.948c0-3.965-1.42-7.364-4.249-10.196-2.834-2.832-6.231-4.248-10.196-4.248-4.249 0-7.793 1.416-10.622 4.248-2.55 2.832-3.823 6.231-3.823 10.196v35.997c-17.154 1.327-32.304 5.472-45.46 12.435-14.445 7.362-25.777 17.558-33.986 30.589-7.935 12.747-11.9 27.334-11.9 43.762 0 20.961 6.231 37.951 18.694 50.982 12.463 12.747 31.583 21.949 57.355 27.613l42.484 8.924c13.315 2.834 23.937 6.373 31.867 10.622s13.735 9.344 17.416 15.292c3.686 5.947 5.527 12.889 5.527 20.819 0 10.196-2.55 19.12-7.651 26.766-5.095 7.646-12.883 13.593-23.364 17.842s-23.937 6.373-40.359 6.373c-19.83 0-36.4-2.408-49.709-7.22-13.315-4.817-24.642-10.48-33.991-16.996-3.965-2.55-7.504-3.539-10.617-2.971-3.118 0.279-5.811 1.556-8.072 3.823-1.988 2.266-3.402 4.953-4.249 8.072-0.568 3.113-0.284 6.373 0.847 9.77 1.414 3.113 3.681 5.805 6.799 8.072 11.327 8.214 25.21 15.013 41.637 20.393 14.287 4.435 29.868 7.051 46.733 7.842v35.493c0 3.965 1.272 7.362 3.823 10.196z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["subscription"],"grid":0},"attrs":[],"properties":{"order":118,"id":13,"name":"subscription","prevSize":32,"code":57621},"setIdx":0,"setId":2,"iconIdx":14},{"icon":{"paths":["M407.475 767.99l-243.2-243.2 60.8-60.798 182.4 182.398 391.465-391.465 60.8 60.8-452.265 452.265z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["mark-light"],"grid":0},"attrs":[],"properties":{"order":119,"id":14,"name":"mark-light","prevSize":32,"code":57622},"setIdx":0,"setId":2,"iconIdx":15},{"icon":{"paths":["M778.4 96h141.2l-308.4 352.4 362.8 479.6h-284l-222.6-290.8-254.4 290.8h-141.4l329.8-377-347.8-455h291.2l201 265.8 232.6-265.8zM728.8 843.6h78.2l-504.8-667.6h-84l510.6 667.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[{}]},"tags":["SVG Optimize Image"],"grid":0},"attrs":[{}],"properties":{"order":120,"id":15,"name":"brand-x-twitter","prevSize":32,"code":57623},"setIdx":0,"setId":2,"iconIdx":16},{"icon":{"paths":["M132.776 81.781c-49.418 6.236-105.858 21.708-119.12 32.68-4.165 3.633-7.601 7.979-10.146 12.861l-0.116 0.243c-3.237 7.183-3.394 21.156-3.394 365.727 0 342.598 0.158 358.622 3.394 365.648 6.464 13.233 19.536 22.342 34.801 23.048l0.090 0.004c2.368 0 13.577-2.842 24.944-6.236 22.625-7.096 49.802-13.117 77.687-16.911l2.674-0.297c32.68-4.658 120.618-4.578 151.090 0.158 74.36 11.525 128.039 32.759 187.087 73.888l15.867 11.052h28.733l15.867-11.052c59.046-41.127 112.726-62.361 187.087-73.888 30.471-4.736 118.409-4.815 151.090-0.158 31.575 4.499 55.968 9.789 80.045 17.13 11.13 3.473 22.419 6.236 24.944 6.236 14.288 0 29.208-9.71 35.209-22.972 3.237-7.026 3.394-23.051 3.394-365.648 0-344.571-0.158-358.544-3.394-365.727-5.446-11.841-14.524-17.84-39.47-26.129-50.445-16.735-100.094-23.445-163.403-21.947-43.101 0.947-62.283 3.079-96.464 10.498-74.46 16.629-139.628 48.978-194.505 93.513l0.867-0.681c-4.642 4.030-9.737 7.996-15.037 11.686l-0.593 0.392c-0.473 0-7.578-5.446-15.63-12.078-63.072-51.863-139.092-84.94-228.61-99.464-25.891-4.184-106.883-5.131-134.987-1.58zM258.763 161.587c45.073 7.341 77.518 17.366 114.462 35.365 33.391 16.262 68.282 40.022 91.334 62.204l8.763 8.367v283.313c0 155.747-0.395 283.235-0.947 283.235-6.639-2.768-11.908-5.308-17.033-8.076l1.008 0.498c-95.596-48.074-231.607-63.467-355.070-40.26-5.020 1.108-12.4 2.379-19.853 3.419l-1.856 0.212c-1.816 0-2.21-62.361-1.816-308.97l0.473-308.97 12.867-3.237c18.235-4.578 43.022-8.684 64.493-10.577 27.076-2.368 77.361-0.711 103.173 3.473zM885.938 160.008c17.209 2.132 49.89 8.604 56.522 11.13l4.262 1.58v308.574c0 245.659-0.473 308.574-2.29 308.574-9.31-1.252-16.688-2.525-23.985-4.023l2.278 0.391c-123.46-23.209-259.474-7.815-355.070 40.26-4.118 2.27-9.386 4.809-14.781 7.108l-1.243 0.471c-0.553 0-0.947-127.486-0.947-283.235v-283.313l8.763-8.367c32.839-31.654 85.965-63.467 132.46-79.649 30.685-10.43 66.519-18.233 103.559-21.936l2.061-0.167c13.498-1.263 71.519 0.473 88.412 2.606z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[{}]},"tags":["book-open-line"],"defaultCode":57624,"grid":32},"attrs":[{}],"properties":{"order":121,"id":0,"name":"book-open-line","prevSize":32,"code":57624},"setIdx":1,"setId":1,"iconIdx":0},{"icon":{"paths":["M512 93.091c-65.407-0.106-129.809 16.083-187.392 47.104-60.656 32.731-111.771 80.655-148.34 139.078h126.278c25.707 0 46.545 20.839 46.545 46.545v0c0 25.707-20.839 46.545-46.545 46.545h-279.273v-279.273c0-25.706 20.839-46.545 46.545-46.545v0c25.707 0 46.545 20.839 46.545 46.545v108.637c43.25-59.521 99.322-108.562 164.073-143.5 71.158-38.33 150.739-58.341 231.564-58.228 269.917 0 488.727 218.81 488.727 488.727v0c0 25.707-20.838 46.545-46.545 46.545v0c-25.707 0-46.545-20.838-46.545-46.545v0c0-104.929-41.681-205.561-115.88-279.757-74.193-74.196-174.829-115.879-279.757-115.879zM512 209.455c25.707 0 46.545 20.839 46.545 46.545v213.457l44.544 44.544c18.176 18.176 18.176 47.639 0 65.815v0c-18.176 18.176-47.639 18.176-65.815 0l-71.82-71.82v-251.997c0-25.706 20.838-46.545 46.545-46.545v0zM67.352 488.988c25.572-2.69 48.48 15.872 51.153 41.444v0c10.301 97.178 56.2 187.099 128.854 252.449s166.922 101.497 264.641 101.483v0c25.707 0 46.545 20.838 46.545 46.545v0c0 25.707-20.838 46.545-46.545 46.545v0c-252.602 0-460.335-191.535-486.074-437.341v0c-2.674-25.553 15.871-48.44 41.426-51.126v0zM861.091 582.051v53.062c24.809 7.401 47.151 20.48 65.443 37.841l46.033-26.531 46.545 80.57-46.080 26.624c5.921 24.832 5.921 50.711 0 75.543l46.080 26.577-46.545 80.617-46.173-26.624c-18.52 17.501-40.886 30.413-65.303 37.702v53.295h-93.091v-53.295c-24.432-7.28-46.815-20.191-65.35-37.702l-46.173 26.624-46.545-80.617 46.080-26.624c-5.911-24.818-5.911-50.679 0-75.497l-46.080-26.577 46.545-80.617 46.080 26.531c18.544-17.571 40.965-30.534 65.443-37.841v-53.062h93.091zM814.545 721.455c-18.516 0-36.278 7.354-49.371 20.452-13.093 13.093-20.447 30.85-20.447 49.366s7.354 36.278 20.447 49.371c13.093 13.093 30.855 20.447 49.371 20.447s36.278-7.354 49.371-20.447c13.093-13.093 20.447-30.855 20.447-49.371s-7.354-36.273-20.447-49.366c-13.093-13.098-30.855-20.452-49.371-20.452z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["Vector"],"defaultCode":57639,"grid":24},"attrs":[],"properties":{"order":122,"id":0,"name":"settings-log","prevSize":32,"code":57639},"setIdx":2,"setId":0,"iconIdx":0},{"icon":{"paths":["M585.143 73.143c0-40.396-32.748-73.143-73.143-73.143s-73.143 32.747-73.143 73.143v365.714h-365.714c-40.396 0-73.143 32.748-73.143 73.143s32.747 73.143 73.143 73.143h365.714v365.714c0 40.397 32.747 73.143 73.143 73.143s73.143-32.746 73.143-73.143v-365.714h365.714c40.397 0 73.143-32.748 73.143-73.143s-32.746-73.143-73.143-73.143h-365.714v-365.714z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["Union"],"defaultCode":57638,"grid":24},"attrs":[],"properties":{"order":123,"id":1,"name":"plus-light","prevSize":32,"code":57638},"setIdx":2,"setId":0,"iconIdx":1},{"icon":{"paths":["M181.106 90.718c-0.092 0.224-0.181 0.55-0.181 1.038v840.484c0 0.493 0.090 0.817 0.181 1.039 0.103 0.252 0.24 0.445 0.362 0.571 0.009 0.006 0.017 0.018 0.026 0.024h635.084c0.006-0.006 0.018-0.018 0.024-0.024 0.126-0.126 0.258-0.318 0.361-0.571 0.096-0.222 0.186-0.547 0.186-1.039v-840.484c0-0.488-0.090-0.814-0.186-1.038-0.102-0.251-0.234-0.442-0.361-0.568-0.006-0.009-0.018-0.017-0.024-0.025h-635.084c-0.008 0.008-0.017 0.016-0.025 0.025-0.123 0.126-0.259 0.317-0.362 0.568zM90.8 91.757c0-49.47 39.311-91.757 90.459-91.757h635.553c51.149 0 90.462 42.286 90.462 91.757v840.484c0 49.473-39.313 91.759-90.462 91.759h-635.553c-51.148 0-90.459-42.287-90.459-91.759z","M680.615 0c24.893 0 45.063 20.175 45.063 45.063v933.875c0 24.887-20.17 45.063-45.063 45.063-24.887 0-45.063-20.176-45.063-45.063v-933.875c0-24.888 20.176-45.063 45.063-45.063z","M-0 278.531c0-24.887 20.175-45.063 45.062-45.063h181.587c24.887 0 45.063 20.175 45.063 45.063s-20.175 45.063-45.063 45.063h-181.587c-24.887 0-45.062-20.175-45.062-45.063z","M-0 511.999c0-24.887 20.175-45.063 45.062-45.063h181.587c24.887 0 45.063 20.175 45.063 45.063s-20.175 45.063-45.063 45.063h-181.587c-24.887 0-45.062-20.175-45.062-45.063z","M-0 745.465c0-24.887 20.175-45.063 45.062-45.063h181.587c24.887 0 45.063 20.176 45.063 45.063 0 24.893-20.175 45.063-45.063 45.063h-181.587c-24.887 0-45.062-20.17-45.062-45.063z"],"width":907,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["note"],"defaultCode":57633,"grid":24},"attrs":[],"properties":{"order":124,"id":2,"name":"note","prevSize":32,"code":57633},"setIdx":2,"setId":0,"iconIdx":2},{"icon":{"paths":["M707.605 0.367l-556.145 52.452c-45.579 4.293-79.659 45.239-75.57 90.837l44.055 487.663c1.379 14.252 13.296 25.304 27.794 25.304 0.888 0 1.766-0.041 2.632-0.122l-0.111 0.008c14.302-1.326 25.412-13.268 25.412-27.804 0-0.884-0.041-1.759-0.122-2.622l0.008 0.111-44.055-487.554c-1.402-15.632 9.564-28.734 25.19-30.206l556.145-52.452c15.675-1.477 28.947 9.51 30.424 25.19l4.689 49.508h-370c-45.923 0-83.749 37.827-83.749 83.749v461.164c0 15.418 12.499 27.916 27.916 27.916v0c15.418 0 27.916-12.499 27.916-27.916v0-461.164c0-15.748 12.167-27.916 27.916-27.916h558.326c15.75 0 27.916 12.167 27.916 27.916v430.521c0 15.418 12.499 27.916 27.916 27.916v0c15.418 0 27.916-12.499 27.916-27.916v0-430.521c0-45.922-37.826-83.749-83.749-83.749h-132.384l-5.125-54.742c-4.307-45.719-45.445-79.877-91.164-75.57zM433.786 298.177c-15.418 0-27.916 12.499-27.916 27.916v0c0 15.418 12.499 27.916 27.916 27.916v0h390.828c15.418 0 27.916-12.499 27.916-27.916v0c0-15.418-12.499-27.916-27.916-27.916v0zM433.786 409.842c-15.418 0-27.916 12.499-27.916 27.916l0 0c0 15.418 12.499 27.916 27.916 27.916v0h222.022c15.418 0 27.916-12.499 27.916-27.916v0c0-15.418-12.499-27.916-27.916-27.916l-0 0zM154.95 707.543c-14.212 1.422-25.217 13.318-25.217 27.785 0 0.968 0.049 1.924 0.145 2.866l-0.010-0.118 7.088 73.389c4.359 45.667 45.586 79.765 91.273 75.461l65.974-6.325v59.649c0 45.923 37.827 83.749 83.749 83.749h558.326c45.922 0 83.749-37.826 83.749-83.749v-179.602c0-15.418-12.499-27.916-27.916-27.916v0c-15.418 0-27.916 12.499-27.916 27.916v0 179.602c0 15.75-12.166 27.916-27.916 27.916h-558.326c-15.749 0-27.916-12.166-27.916-27.916v-168.043c0-15.418-12.499-27.916-27.916-27.916v0c-15.418 0-27.916 12.499-27.916 27.916v0 52.234l-71.208 6.87c-15.677 1.477-28.948-9.515-30.424-25.19l-7.088-73.498c-1.422-14.212-13.318-25.217-27.785-25.217-0.968 0-1.924 0.049-2.866 0.145l0.118-0.010z","M131.505 408.751c-36.3 11.955-66.537 26.054-89.637 43.946s-40.312 41.468-41.765 69.682c-1.754 34.049 19.358 62.99 48.526 85.821s68.667 42.237 116.899 59.322c96.464 34.171 227.753 58.338 373.817 65.865 146.063 7.524 279.149-3.077 378.615-27.153 49.733-12.038 91.1-27.178 122.461-46.891s55.387-46.319 57.141-80.368c1.436-27.853-6.387-52.859-21.81-70.445s-35.535-27.129-56.378-34.677l-18.974 52.452c16.906 6.123 27.768 12.588 33.369 18.974s8.864 13.341 7.96 30.861c-0.447 8.708-7.71 21.257-30.97 35.877s-59.922 28.895-105.886 40.021c-91.926 22.251-221.001 32.92-362.585 25.626-141.585-7.296-268.961-31.231-358.114-62.812-44.576-15.79-79.563-33.666-101.197-50.598s-27.602-30.224-27.153-38.93c0.372-7.215 4.901-16.657 20.283-28.571s40.456-24.338 72.844-35.004z"],"width":1098,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["bundle"],"defaultCode":57637,"grid":24},"attrs":[],"properties":{"order":125,"id":3,"name":"bundle","prevSize":32,"code":57637},"setIdx":2,"setId":0,"iconIdx":3},{"icon":{"paths":["M149.375 42.625c-0.025-0-0.054-0-0.083-0-23.55 0-42.643 19.079-42.667 42.623l-0 0.002c0.024 23.546 19.117 42.625 42.667 42.625 0.029 0 0.059-0 0.088-0l-0.005 0h238.375l-268.625 268.5c-7.741 7.725-12.53 18.405-12.53 30.204 0 23.566 19.104 42.671 42.671 42.671 0.038 0 0.076-0 0.115-0l-0.006 0h341.25c23.532-0.024 42.601-19.093 42.625-42.623l0-0.002c0-0.025 0-0.054 0-0.083 0-23.55-19.079-42.643-42.623-42.667l-238.252-0 268.5-268.5c7.666-7.712 12.405-18.342 12.405-30.079 0-23.561-19.095-42.662-42.654-42.671l-0.001-0zM768 42.625c-23.532 0.024-42.601 19.093-42.625 42.623l-0 0.002v750.375l-97.875-97.875c-7.723-7.732-18.397-12.514-30.188-12.514s-22.465 4.783-30.187 12.514l-0 0c-7.732 7.723-12.514 18.397-12.514 30.187s4.783 22.465 12.514 30.187l0 0 170.625 170.625c3.848 1.261 8.277 1.989 12.875 1.989s9.027-0.727 13.177-2.073l-0.302 0.085c1.19 0.6 2.676 1.233 4.202 1.782l0.298 0.093c1.824-0.642 3.309-1.275 4.749-1.987l-0.249 0.112c3.83 1.249 8.237 1.969 12.812 1.969s8.983-0.72 13.114-2.053l-0.302 0.084 170.75-170.625c7.694-7.717 12.451-18.365 12.451-30.124 0-11.823-4.809-22.522-12.577-30.25l-0.002-0.002c-7.717-7.694-18.365-12.452-30.125-12.452s-22.408 4.758-30.126 12.453l0.001-0.001-97.875 97.75v-750.25c-0.024-23.53-19.092-42.599-42.619-42.625l-0.002-0zM326.5 554.625c-0.188-0.003-0.409-0.005-0.631-0.005-16.38 0-30.605 9.23-37.757 22.772l-0.112 0.232-176.625 341.375c-2.995 5.684-4.753 12.422-4.753 19.57 0 16.428 9.285 30.688 22.893 37.818l0.235 0.112c5.697 3.011 12.453 4.779 19.621 4.779 16.389 0 30.62-9.241 37.767-22.796l0.112-0.233 137.375-265.625 127.625 264.5c7.060 14.394 21.607 24.129 38.429 24.129 6.756 0 13.144-1.57 18.822-4.365l-0.25 0.111c14.394-7.060 24.129-21.607 24.129-38.429 0-6.756-1.57-13.144-4.365-18.822l0.111 0.25-164.875-341.25c-6.961-14.193-21.196-23.852-37.714-24.125l-0.036-0z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["sorting-desc"],"defaultCode":57625,"grid":24},"attrs":[],"properties":{"order":126,"id":4,"name":"sorting-desc","prevSize":32,"code":57625},"setIdx":2,"setId":0,"iconIdx":4},{"icon":{"paths":["M768.125 42.875c-0.025-0-0.054-0-0.083-0-23.55 0-42.643 19.079-42.667 42.623l-0 0.002v842.625c-0 0.025-0 0.054-0 0.084 0 23.564 19.102 42.667 42.667 42.667 0.029 0 0.059-0 0.088-0l-0.005 0c23.546-0.024 42.625-19.117 42.625-42.667 0-0.029-0-0.059-0-0.088l0 0.005v-842.625c-0.024-23.532-19.093-42.601-42.623-42.625l-0.002-0z","M149.375 554.875c-23.532 0.024-42.601 19.093-42.625 42.623l-0 0.002c0.024 23.532 19.093 42.601 42.623 42.625l238.377 0-268.5 268.5c-7.741 7.725-12.529 18.405-12.529 30.204 0 23.561 19.095 42.661 42.653 42.671l341.376 0c23.532-0.024 42.601-19.093 42.625-42.623l0-0.002c0-0.025 0-0.054 0-0.083 0-23.55-19.079-42.643-42.623-42.667l-238.377-0 268.5-268.5c7.666-7.712 12.405-18.343 12.405-30.079 0-23.517-19.024-42.59-42.522-42.671l-0.008-0z","M326.5 42.875c-0.188-0.003-0.409-0.005-0.631-0.005-16.38 0-30.605 9.23-37.757 22.772l-0.112 0.232-176.5 341.375c-3.011 5.697-4.779 12.453-4.779 19.621 0 16.389 9.241 30.62 22.796 37.767l0.233 0.112c5.684 2.995 12.422 4.753 19.57 4.753 16.428 0 30.688-9.285 37.818-22.893l0.112-0.235 137.375-265.375 127.625 264.375c7.060 14.394 21.607 24.129 38.429 24.129 6.756 0 13.144-1.57 18.822-4.365l-0.25 0.111c14.394-7.060 24.129-21.607 24.129-38.429 0-6.756-1.57-13.144-4.365-18.822l0.111 0.25-164.75-341.25c-6.98-14.23-21.272-23.902-37.845-24.125l-0.030-0z","M938.75 725.625c-0.023-0-0.050-0-0.077-0-11.784 0-22.452 4.777-30.173 12.5l-140.5 140.5-140.5-140.5c-7.717-7.694-18.365-12.452-30.125-12.452s-22.408 4.758-30.126 12.453l0.001-0.001c-7.694 7.717-12.452 18.365-12.452 30.125s4.758 22.408 12.453 30.126l-0.001-0.001 170.625 170.75c7.723 7.731 18.397 12.513 30.187 12.513s22.464-4.782 30.187-12.512l170.625-170.75c7.694-7.717 12.452-18.365 12.452-30.125s-4.758-22.408-12.453-30.126l0.001 0.001c-7.71-7.712-18.359-12.486-30.122-12.5l-0.003-0z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{},"tags":["sorting-asc"],"defaultCode":57632,"grid":24},"attrs":[],"properties":{"order":127,"id":5,"name":"sorting-asc","prevSize":32,"code":57632},"setIdx":2,"setId":0,"iconIdx":5},{"icon":{"paths":["M144.462 0c-38.285 0-75.082 15.237-102.154 42.308-27.070 27.071-42.308 63.869-42.308 102.154v735.077c-0 21.752 17.633 39.385 39.385 39.385h-0c21.752 0 39.385-17.633 39.385-39.385v-735.077c0-17.424 6.91-34.14 19.231-46.462s29.038-19.231 46.462-19.231h695.846v656.462h-695.846c-21.752 0-39.385 17.633-39.385 39.385v0c0 21.752 17.633 39.385 39.385 39.385v0h735.231c21.752 0 39.385-17.633 39.385-39.385v0c-0.239-3.707-0.952-7.166-2.083-10.43l0.083 0.277c0.675-1.339 1.352-2.967 1.919-4.645l0.081-0.278v-688.615c0-18.801-7.494-36.877-20.769-50.154-13.28-13.284-31.368-20.769-50.154-20.769zM144.462 945.231c-21.752 0-39.385 17.633-39.385 39.385v0c0 21.752 17.633 39.385 39.385 39.385v0h735.231c21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0z","M144.462 735.077c-38.287 0-75.083 15.231-102.154 42.308-27.072 27.068-42.308 63.865-42.308 102.154 0 38.284 15.242 74.928 42.308 102 27.070 27.065 63.867 42.308 102.154 42.308 21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0c-17.422 0-34.139-6.911-46.462-19.231-12.325-12.328-19.231-28.886-19.231-46.308 0-17.432 6.912-34.145 19.231-46.462 12.321-12.324 29.039-19.231 46.462-19.231 21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0z","M302 210.154c-21.752 0-39.385 17.633-39.385 39.385v0c0 21.752 17.633 39.385 39.385 39.385v0h315.077c21.752 0 39.385-17.633 39.385-39.385v0c0-21.752-17.633-39.385-39.385-39.385v0z"],"width":919,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["topic"],"defaultCode":57635,"grid":24},"attrs":[],"properties":{"order":128,"id":6,"name":"topic","prevSize":32,"code":57635},"setIdx":2,"setId":0,"iconIdx":6},{"icon":{"paths":["M406.462 144.339c13.536 0 26.517 5.377 36.087 14.948s14.948 22.552 14.948 36.087v45.218c0 22.442 8.915 43.965 24.784 59.834s37.392 24.784 59.834 24.784h135.653c1.542 0 3.022 0.613 4.113 1.704s1.704 2.57 1.704 4.113v135.653c0 22.441 8.915 43.964 24.784 59.834s37.392 24.784 59.834 24.784h45.215c13.54 0 26.522 5.377 36.092 14.947s14.943 22.552 14.943 36.087c0 13.536-5.372 26.516-14.943 36.087s-22.552 14.948-36.092 14.948h-45.215c-22.442 0-43.965 8.915-59.834 24.784s-24.784 37.392-24.784 59.834v135.652c0 1.544-0.613 3.025-1.704 4.112-1.091 1.095-2.571 1.709-4.113 1.709h-135.653c-1.543 0-3.022-0.614-4.113-1.709-1.091-1.087-1.704-2.568-1.704-4.112v-45.214c0-34.438-13.679-67.462-38.028-91.81s-57.373-38.028-91.808-38.028c-34.434 0-67.458 13.679-91.807 38.028s-38.028 57.372-38.028 91.81v45.214c0 1.544-0.613 3.025-1.704 4.112-1.091 1.095-2.57 1.709-4.113 1.709h-135.653c-1.543 0-3.022-0.614-4.113-1.709-1.091-1.087-1.704-2.568-1.704-4.112v-135.652c0-1.543 0.613-3.022 1.704-4.113s2.57-1.705 4.113-1.705h45.217c34.435 0 67.459-13.678 91.808-38.027s38.028-57.373 38.028-91.808c0-34.435-13.679-67.459-38.028-91.807s-57.373-38.028-91.808-38.028h-45.217c-1.542 0-3.022-0.613-4.113-1.704s-1.704-2.571-1.704-4.113v-135.653c0-1.543 0.613-3.022 1.704-4.113s2.571-1.704 4.113-1.704h135.653c22.442 0 43.965-8.915 59.834-24.784s24.784-37.392 24.784-59.834v-45.218c0-13.535 5.377-26.516 14.948-36.087s22.552-14.948 36.087-14.948zM135.156 246.409c-22.442 0-43.965 8.915-59.834 24.784s-24.784 37.392-24.784 59.834v135.653c0 22.442 8.915 43.965 24.784 59.834s37.392 24.784 59.834 24.784h45.217c13.536 0 26.517 5.377 36.087 14.947s14.948 22.552 14.948 36.087c0 13.536-5.377 26.516-14.948 36.087s-22.552 14.948-36.087 14.948h-45.217c-22.442 0-43.965 8.915-59.834 24.784s-24.784 37.392-24.784 59.834v135.652c0 22.441 8.915 43.969 24.784 59.833 15.869 15.872 37.392 24.789 59.834 24.789h135.653c22.442 0 43.965-8.917 59.834-24.789 15.869-15.864 24.784-37.392 24.784-59.833v-45.214c0-13.54 5.377-26.522 14.948-36.092 9.57-9.569 22.552-14.946 36.087-14.946s26.517 5.377 36.087 14.946c9.571 9.57 14.948 22.552 14.948 36.092v45.214c0 22.441 8.915 43.969 24.784 59.833 15.869 15.872 37.392 24.789 59.834 24.789h135.653c22.441 0 43.965-8.917 59.834-24.789 15.869-15.864 24.784-37.392 24.784-59.833v-135.652c0-1.543 0.613-3.023 1.704-4.113s2.57-1.705 4.113-1.705h45.215c34.438 0 67.458-13.679 91.813-38.027 24.348-24.349 38.022-57.373 38.022-91.808s-13.674-67.459-38.022-91.807c-24.355-24.349-57.376-38.028-91.813-38.028h-45.215c-1.543 0-3.022-0.613-4.113-1.704s-1.704-2.571-1.704-4.113v-135.653c0-22.442-8.915-43.965-24.784-59.834s-37.392-24.784-59.834-24.784h-135.653c-1.543 0-3.022-0.613-4.113-1.704s-1.704-2.571-1.704-4.113v-45.218c0-34.434-13.679-67.459-38.028-91.807s-57.373-38.028-91.808-38.028c-34.434 0-67.458 13.679-91.807 38.028s-38.028 57.373-38.028 91.807v45.218c0 1.542-0.613 3.022-1.704 4.113s-2.57 1.704-4.113 1.704h-135.653z"],"width":945,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["quiz"],"defaultCode":57636,"grid":24},"attrs":[],"properties":{"order":129,"id":7,"name":"quiz-2","prevSize":32,"code":57636},"setIdx":2,"setId":0,"iconIdx":7},{"icon":{"paths":["M128 128h768v86h-768v-86zM298 298h428v86h-428v-86zM128 554v-84h768v84h-768zM128 896v-86h768v86h-768zM298 640h428v86h-428v-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_center"],"defaultCode":57607,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_center","id":8,"order":130,"prevSize":32,"code":57607,"name":"align-center"},"setIdx":2,"setId":0,"iconIdx":8},{"icon":{"paths":["M128 128h768v86h-768v-86zM128 384v-86h768v86h-768zM128 554v-84h768v84h-768zM128 726v-86h768v86h-768zM128 896v-86h768v86h-768z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_justify"],"defaultCode":57608,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_justify","id":9,"order":131,"prevSize":32,"code":57608,"name":"align-justify"},"setIdx":2,"setId":0,"iconIdx":9},{"icon":{"paths":["M128 128h768v86h-768v-86zM128 896v-86h768v86h-768zM128 554v-84h768v84h-768zM640 298v86h-512v-86h512zM640 640v86h-512v-86h512z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_left"],"defaultCode":57609,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_left","id":10,"order":132,"prevSize":32,"code":57609,"name":"align-left"},"setIdx":2,"setId":0,"iconIdx":10},{"icon":{"paths":["M128 128h768v86h-768v-86zM384 384v-86h512v86h-512zM128 554v-84h768v84h-768zM384 726v-86h512v86h-512zM128 896v-86h768v86h-768z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"2552552551681102451":[]},"tags":["format_align_right"],"defaultCode":57616,"grid":24},"attrs":[],"properties":{"ligatures":"format_align_right","id":11,"order":133,"prevSize":32,"code":57616,"name":"align-right"},"setIdx":2,"setId":0,"iconIdx":11}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"tutor-icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":true,"showMetrics":true,"showMetadata":false,"showVersion":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"name":"icomoon","classSelector":".icon"},"historySize":50}} \ No newline at end of file diff --git a/views/course-share.php b/views/course-share.php index 68638525f7..b4382814c5 100644 --- a/views/course-share.php +++ b/views/course-share.php @@ -21,26 +21,26 @@ ?> - + -
    +