[Storybook: Editor Page] Add a working preview for the editor page in storybook #1372
Conversation
… storybook The preview iframe doesn't work in storybook, because in links to a local URL to webapp when it's in prod. It has never worked in storybook. We need to be able to see what the initial state of the questions on the editor page would look like without making any changes to the actual preview (yet). I've added a preview here that shows the question and the hints in the editor page. This works for all widgets. It's sticky, so it follows as you scroll down a long editor. You can also close it if it's taking too much space. This is a prerequisite to viewing an interactive graph with initial coordinates. Issue: https://khanacademy.atlassian.net/browse/LEMS-2051 Test plan: http://localhost:6006/?path=/story/perseuseditor-editorpage--demo
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
|
Size Change: 0 B Total Size: 846 kB ℹ️ View Unchanged
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1372 +/- ##
==========================================
+ Coverage 69.44% 70.84% +1.39%
==========================================
Files 491 496 +5
Lines 103849 103946 +97
Branches 7450 10571 +3121
==========================================
+ Hits 72123 73642 +1519
+ Misses 31546 30304 -1242
+ Partials 180 0 -180 see 153 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
|
|
||
| const onChangeAction = action("onChange"); | ||
|
|
||
| function EditorPageUtil(props: Props) { |
There was a problem hiding this comment.
The name EditorPageUtil isn't particularly intuitive / self-explanatory to me. Maybe this component could be named something like EditorPageWithStorybookPreview?
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (cf5ad6d) and published it to npm. You Example: yarn add @khanacademy/perseus@PR1372If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR1372 |
Summary:
The preview iframe doesn't work in storybook, because in links to a local URL
to webapp when it's in prod. It has never worked in storybook.
We need to be able to see what the initial state of the questions on the editor
page would look like without making any changes to the actual preview (yet).
I've added a preview here that shows the question and the hints in the editor
page. This works for all widgets. It's sticky, so it follows as you scroll
down a long editor. You can also close it if it's taking too much space.
This is a prerequisite to viewing an interactive graph with initial coordinates.
Issue: https://khanacademy.atlassian.net/browse/LEMS-2051
Test plan:
http://localhost:6006/?path=/story/perseuseditor-editorpage--demo
Interactive graph widget
Expression widget
Demo video
Screen.Recording.2024-06-21.at.2.57.00.PM.mov