Add FrontendExercisePage (exercism#7844)

* Add back deleted files

* Render page

* Add bunch of stuff, remove bunch of stuff

* Capture js parsing and runtime errors

* FrontendTraining -> FrontendExercise

* Rename component in index haml

* Rename more things from FrontendTraining -> FrontendExercise, sort out localStorage, readonly ranges

* Only run JS code on "Run code"

* Parse JS

* Underline error location

* Show error using editor's internal state

* Make range-error more robust

* Sort out runtime errors

* Inject loop guard

* Add ruby scaffolding, Sort out header, add context data and more

* Miniature tweaks

* Add scaffolding for expected output

* Start bouncy ball exercise

* Add to config

* Add exercise

* Fix config

* Get stuff working

* Add diff button, expected tab

* Fix mising else if

* Fix pointer-events on Output

* Sort out instructions and overflowing

* Add diff

* Add expected iframe container

* run code on demand, add css normalisation and default css

* Add aspect-ratio to iframe body

* Try again sizing outputs

* Move RHS tab setting logic to store, Set tab to Output on diff mode: on

* Add some better styling

* Add logger

* Move logs to store

* Cap logs at 100

* Add overlay mode

* Fix cursor moving on paste

* Remove infinite loop guarding for now

* Add linter + prevent autoclosing tags

* Level 15 exercises (exercism#7843)

* Add breakout css exercise

* WIP

* Add portgual

* Add trinidad and tobago

* Add nambia

* Tweak text

* Move to output on RunCode if RHS active tab is Instructions

* Tweak breakout

* Add improved ball

* Tweak more

* Adjust styles a bit

* Add pl to page-body-lhs

* Validate HTML then inject JS (exercism#7851)

* Adjust activating output tab

* Inject JS on RunCode

* Slightly refactor

* Add css + html theme

* Add lint tooltip styles

* Add defaultCodes

* Add snake game

* Dynamically apply pointerEvents changes to iframe containers

* Fix lhs control-buttons' style

* Add Breakout Instructions

* Add border-radius

* Fix starting position

* Tweak everything

* Don't break on logging document out

---------

Co-authored-by: Jeremy Walker <[email protected]>

Author: dem4ron

app/css/bootcamp/components/codemirror.css

@@ -1,6 +1,8 @@
 #bootcamp-solve-exercise-page,
 #bootcamp-custom-function-editor-page,
-#bootcamp-frontend-training-page {
+/* this is the CSSExercise page - change it to bootcamp-css-exercise-page ASAP! */
+#bootcamp-frontend-training-page ,
+#bootcamp-frontend-exercise-page {
     .cm-breakpoint-gutter .cm-gutterElement {
         @apply flex;
     }

app/css/bootcamp/components/frontend-exercise-page.css

@@ -0,0 +1,27 @@
+#bootcamp-frontend-exercise-page {
+    .page-body-lhs {
+        @apply p-0 pl-8;
+    }
+
+    .control-buttons-container {
+        @apply flex items-center justify-between h-full p-8 gap-8;
+        @apply bg-bootcamp-very-light-purple;
+    }
+
+    .editor-wrapper {
+        border: none;
+        border-radius: 8px;
+    }
+    .c-iteration-pane {
+        .tabs {
+            @apply bg-bootcamp-light-purple;
+            .c-tab {
+                @apply bg-bootcamp-light-purple;
+                &.selected {
+                    @apply bg-backgroundColorA;
+                    @apply text-textColor1;
+                }
+            }
+        }
+    }
+}

app/css/bootcamp/components/frontend-training-page.css

@@ -1,4 +1,5 @@
-#bootcamp-frontend-training-page {
+#bootcamp-frontend-training-page,
+#bootcamp-frontend-exercise-page {
     .page-body-rhs {
         @apply bg-white;
         @apply flex-grow;
@@ -44,4 +45,12 @@
     .css-render-expected {
         pointer-events: none;
     }
+    .fe-render-expected,
+    .fe-render-actual {
+        @apply border-textColor1 border-1;
+        @apply shadow-base;
+
+        @apply w-full h-full relative overflow-hidden;
+        /* max-height: calc(90vh - 80px); */
+    }
 }

app/css/bootcamp/components/logger.css

@@ -6,7 +6,7 @@
     background: aliceblue;
 
     @apply overflow-hidden;
-    @apply p-12 p-16;
+    @apply p-16;
     @apply border-t-1 border-borderColor4;
     @apply relative;
 

app/css/bootcamp/components/scenario.css

@@ -1,6 +1,7 @@
 #bootcamp-solve-exercise-page,
 #bootcamp-custom-function-editor-page,
-#bootcamp-frontend-training-page {
+#bootcamp-frontend-training-page,
+#bootcamp-frontend-exercise-page {
     .c-scenario {
         @apply border-2 rounded-5;
         @apply overflow-hidden;

app/css/bootcamp/components/solve-exercise-page.css

@@ -1,6 +1,7 @@
 #bootcamp-solve-exercise-page,
 #bootcamp-custom-function-editor-page,
-#bootcamp-frontend-training-page {
+#bootcamp-frontend-training-page,
+#bootcamp-frontend-exercise-page {
     @apply flex flex-col w-full h-screen;
 
     .page-header {

app/css/packs/bootcamp.css

@@ -9,6 +9,7 @@
 
 @import "../bootcamp/components/solve-exercise-page";
 @import "../bootcamp/components/frontend-training-page";
+@import "../bootcamp/components/frontend-exercise-page";
 @import "../bootcamp/components/custom-function-selector";
 @import "../bootcamp/components/rhs-list";
 @import "../bootcamp/components/breadcrumbs";

app/helpers/react_components/bootcamp/frontend_exercise_page.rb

@@ -0,0 +1,107 @@
+module ReactComponents
+  class Bootcamp::FrontendExercisePage < ReactComponent
+    initialize_with :solution
+
+    def to_s
+      super(id, data)
+    end
+
+    def id = "bootcamp-frontend-exercise-page"
+
+    def data
+      {
+        project: { slug: project&.slug },
+        exercise: {
+          id: exercise&.id,
+          slug: exercise&.slug,
+          title: exercise&.title,
+          introduction_html: exercise&.introduction_html,
+          css_checks: config[:checks] || [],
+          html_checks: config[:html_checks] || [],
+          config: {
+            title: config[:title],
+            description: config[:description],
+            allowed_properties: config[:allowed_properties],
+            disallowed_properties: config[:disallowed_properties],
+            expected:
+          }
+        },
+        solution: solution_data,
+        code: {
+          normalize_css:,
+          default: {
+            css: exercise&.default("css")
+          },
+          stub: {
+            css: exercise.stub("css"),
+            html: exercise.stub("html"),
+            js: exercise.stub("js")
+          },
+          aspect_ratio: editor_config[:aspect_ratio] || 1,
+          code: solution&.code,
+          stored_at: submission&.created_at
+        },
+        links: solution_links
+      }
+    end
+
+    def config
+      exercise&.config || {}
+    end
+
+    def editor_config
+      exercise&.editor_config || {}
+    end
+
+    def solution_data
+      return nil unless solution
+
+      {
+        uuid: solution.uuid,
+        status: solution.status,
+        passed_basic_tests: solution.passed_basic_tests?
+      }
+    end
+
+    def solution_links
+      return {} unless solution
+
+      {
+        post_submission: Exercism::Routes.api_bootcamp_solution_submissions_url(solution_uuid: solution.uuid, only_path: true),
+        complete_solution: Exercism::Routes.complete_api_bootcamp_solution_url(solution.uuid, only_path: true),
+        projects_index: Exercism::Routes.bootcamp_projects_url(only_path: true),
+        dashboard_index: Exercism::Routes.bootcamp_dashboard_url(only_path: true),
+        bootcamp_level_url: Exercism::Routes.bootcamp_level_url("idx"),
+        custom_fns_dashboard: Exercism::Routes.bootcamp_custom_functions_url
+      }
+    end
+
+    def expected
+      return {} unless exercise
+
+      {
+        html: exercise.example("html"),
+        css: exercise.example("css"),
+        js: exercise.example("js")
+      }
+    end
+
+    def readonly_ranges
+      submission&.readonly_ranges || exercise&.readonly_ranges
+    end
+
+    # rubocop:disable Layout/LineLength
+    def normalize_css = "
+      button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
+      h1,h2,h3,h4,h5,h6,ul,ol,li,p { margin: 0; padding: 0; }
+      body { font-size: 14px; line-height: 1.3 }
+      "
+    # rubocop:enable Layout/LineLength
+
+    memoize
+    def submission = solution&.submissions&.last
+
+    delegate :exercise, to: :solution, allow_nil: true
+    delegate :project, to: :exercise, allow_nil: true
+  end
+end

app/helpers/react_components/bootcamp/frontend_training_page.rb

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import Modal from 'react-modal'
 import { FinishLessonModalContext } from './FinishLessonModalContext'
 import { useContext } from 'react'