From 58d9f64557b0a6293ee8333342e9f6a306d4d9a6 Mon Sep 17 00:00:00 2001 From: Tamara Date: Tue, 18 Mar 2025 14:37:05 -0500 Subject: [PATCH 1/7] [tb/LEMS-2869/story-for-dropdown] Update renderer-with-debug-ui to handle answerless --- testing/renderer-with-debug-ui.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/testing/renderer-with-debug-ui.tsx b/testing/renderer-with-debug-ui.tsx index 1778cfa53c..8505c1264d 100644 --- a/testing/renderer-with-debug-ui.tsx +++ b/testing/renderer-with-debug-ui.tsx @@ -9,6 +9,7 @@ import deviceMobile from "@phosphor-icons/core/regular/device-mobile.svg"; import * as React from "react"; import ReactJson from "react-json-view"; +import {splitPerseusItem} from "@khanacademy/perseus-core"; import {scorePerseusItem} from "@khanacademy/perseus-score"; import {Renderer, usePerseusI18n} from "../packages/perseus/src/index"; @@ -21,6 +22,7 @@ import type {ComponentProps} from "react"; type Props = { question: PerseusRenderer; + answerless?: boolean; } & Partial< Omit< ComponentProps, @@ -32,6 +34,7 @@ export const RendererWithDebugUI = ({ question, apiOptions, reviewMode = false, + answerless = false, ...rest }: Props): React.ReactElement => { registerAllWidgetsForTesting(); @@ -46,6 +49,12 @@ export const RendererWithDebugUI = ({ customKeypad: isMobile, // Use the mobile keypad for mobile }; + const renderedQuestion: PerseusRenderer = answerless + ? splitPerseusItem(question) + : question; + + console.log(renderedQuestion); + return ( ' is not assignable to type 'LegacyRef | undefined'. ref={ref} - content={question.content} + content={renderedQuestion.content} images={question.images} widgets={question.widgets} problemNum={0} apiOptions={controlledAPIOptions} reviewMode={reviewMode} strings={strings} + answerless={answerless} {...rest} /> From 317dd0d65ab7953a740210845b09883cf80fcf13 Mon Sep 17 00:00:00 2001 From: Tamara Date: Tue, 18 Mar 2025 14:37:19 -0500 Subject: [PATCH 2/7] [tb/LEMS-2869/story-for-dropdown] Add story to show widget without answers --- packages/perseus/src/widgets/dropdown/dropdown.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx b/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx index 8a19d00eca..f127bd207a 100644 --- a/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx +++ b/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx @@ -41,3 +41,7 @@ export const DropdownWithEmptyPlaceholder = ( ): React.ReactElement => { return ; }; + +export const DropdownWithNoAnswers = (args: StoryArgs): React.ReactElement => { + return ; +}; From 921f926ef9abacc86c95ab3ac56b20049e02c768 Mon Sep 17 00:00:00 2001 From: Tamara Date: Tue, 18 Mar 2025 16:59:12 -0500 Subject: [PATCH 3/7] [tb/LEMS-2869/story-for-dropdown] docs(changeset): Add a story for Dropdown that uses answerless data --- .changeset/quiet-insects-agree.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quiet-insects-agree.md diff --git a/.changeset/quiet-insects-agree.md b/.changeset/quiet-insects-agree.md new file mode 100644 index 0000000000..cb826055c8 --- /dev/null +++ b/.changeset/quiet-insects-agree.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": minor +--- + +Add a story for Dropdown that uses answerless data From f6967dee18c4a876491a6ca82f968d007cfe8fca Mon Sep 17 00:00:00 2001 From: Tamara Date: Tue, 18 Mar 2025 16:59:27 -0500 Subject: [PATCH 4/7] [tb/LEMS-2869/story-for-dropdown] Remove console log --- testing/renderer-with-debug-ui.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/testing/renderer-with-debug-ui.tsx b/testing/renderer-with-debug-ui.tsx index 8505c1264d..31ef5dd7a3 100644 --- a/testing/renderer-with-debug-ui.tsx +++ b/testing/renderer-with-debug-ui.tsx @@ -53,8 +53,6 @@ export const RendererWithDebugUI = ({ ? splitPerseusItem(question) : question; - console.log(renderedQuestion); - return ( Date: Wed, 19 Mar 2025 10:09:43 -0500 Subject: [PATCH 5/7] [tb/LEMS-2869/story-for-dropdown] Add doc string description of splitPerseusItem --- packages/perseus-core/src/utils/split-perseus-item.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/perseus-core/src/utils/split-perseus-item.ts b/packages/perseus-core/src/utils/split-perseus-item.ts index 89bc8b0f36..3dd9ff32c5 100644 --- a/packages/perseus-core/src/utils/split-perseus-item.ts +++ b/packages/perseus-core/src/utils/split-perseus-item.ts @@ -5,6 +5,10 @@ import {getUpgradedWidgetOptions} from "../widgets/upgrade"; import type {PerseusRenderer} from "../data-schema"; +/** + * Upgrades widget options and removes answerful data for all the widgets in a + * Perseus item. + */ export default function splitPerseusItem( originalItem: PerseusRenderer, ): PerseusRenderer { From 0fb6e87ba4b46d3760330788821d1157a9307847 Mon Sep 17 00:00:00 2001 From: Tamara Date: Wed, 19 Mar 2025 10:10:40 -0500 Subject: [PATCH 6/7] [tb/LEMS-2869/story-for-dropdown] Remove extra prop Can just remove answers on the question data as it is being sent to the renderer. Extra prop not needed. --- .../perseus/src/widgets/dropdown/dropdown.stories.tsx | 3 ++- testing/renderer-with-debug-ui.tsx | 10 ++-------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx b/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx index f127bd207a..3950374d5e 100644 --- a/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx +++ b/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx @@ -1,3 +1,4 @@ +import {splitPerseusItem} from "@khanacademy/perseus-core"; import * as React from "react"; import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui"; @@ -43,5 +44,5 @@ export const DropdownWithEmptyPlaceholder = ( }; export const DropdownWithNoAnswers = (args: StoryArgs): React.ReactElement => { - return ; + return ; }; diff --git a/testing/renderer-with-debug-ui.tsx b/testing/renderer-with-debug-ui.tsx index 31ef5dd7a3..d82a7dce14 100644 --- a/testing/renderer-with-debug-ui.tsx +++ b/testing/renderer-with-debug-ui.tsx @@ -9,7 +9,6 @@ import deviceMobile from "@phosphor-icons/core/regular/device-mobile.svg"; import * as React from "react"; import ReactJson from "react-json-view"; -import {splitPerseusItem} from "@khanacademy/perseus-core"; import {scorePerseusItem} from "@khanacademy/perseus-score"; import {Renderer, usePerseusI18n} from "../packages/perseus/src/index"; @@ -22,7 +21,6 @@ import type {ComponentProps} from "react"; type Props = { question: PerseusRenderer; - answerless?: boolean; } & Partial< Omit< ComponentProps, @@ -34,7 +32,6 @@ export const RendererWithDebugUI = ({ question, apiOptions, reviewMode = false, - answerless = false, ...rest }: Props): React.ReactElement => { registerAllWidgetsForTesting(); @@ -49,9 +46,7 @@ export const RendererWithDebugUI = ({ customKeypad: isMobile, // Use the mobile keypad for mobile }; - const renderedQuestion: PerseusRenderer = answerless - ? splitPerseusItem(question) - : question; + console.log("question", question); return ( ' is not assignable to type 'LegacyRef | undefined'. ref={ref} - content={renderedQuestion.content} + content={question.content} images={question.images} widgets={question.widgets} problemNum={0} apiOptions={controlledAPIOptions} reviewMode={reviewMode} strings={strings} - answerless={answerless} {...rest} /> From 0afa2662383cff81f3b852a7d887900719c43226 Mon Sep 17 00:00:00 2001 From: Tamara Date: Wed, 19 Mar 2025 10:12:59 -0500 Subject: [PATCH 7/7] [tb/LEMS-2869/story-for-dropdown] Remove console log --- testing/renderer-with-debug-ui.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/testing/renderer-with-debug-ui.tsx b/testing/renderer-with-debug-ui.tsx index d82a7dce14..1778cfa53c 100644 --- a/testing/renderer-with-debug-ui.tsx +++ b/testing/renderer-with-debug-ui.tsx @@ -46,8 +46,6 @@ export const RendererWithDebugUI = ({ customKeypad: isMobile, // Use the mobile keypad for mobile }; - console.log("question", question); - return (