Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Storybook: Editor Page] Add a working preview for the editor page in storybook #1372

Merged
merged 2 commits into from
Jun 21, 2024
Merged

[Storybook: Editor Page] Add a working preview for the editor page in storybook #1372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8966083
[Storybook: Editor Page] Add a working preview for the editor page in…
nishasy Jun 21, 2024
cf5ad6d
rename EditorPageUtil to EditorPageWithStorybookPreview
nishasy Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sweet-zebras-impress.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus-editor": patch
---

[Storybook: Editor Page] Add a storybook-only preview for the questions and hints in the EditorPage component
168 changes: 168 additions & 0 deletions packages/perseus-editor/src/__stories__/editor-page-with-storybook-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import {
Renderer,
type APIOptions,
type DeviceType,
type Hint,
type PerseusAnswerArea,
type PerseusRenderer,
} from "@khanacademy/perseus";
import Button from "@khanacademy/wonder-blocks-button";
import {View} from "@khanacademy/wonder-blocks-core";
import IconButton from "@khanacademy/wonder-blocks-icon-button";
import {Strut} from "@khanacademy/wonder-blocks-layout";
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
import xIcon from "@phosphor-icons/core/regular/x.svg";
import {action} from "@storybook/addon-actions";
import {StyleSheet} from "aphrodite";
import * as React from "react";

// eslint-disable-next-line import/no-relative-packages
import {mockStrings} from "../../../perseus/src/strings";
import EditorPage from "../editor-page";

import {flags} from "./flags-for-api-options";

type Props = {
apiOptions?: APIOptions;
question?: PerseusRenderer;
hints?: ReadonlyArray<Hint>;
};

const onChangeAction = action("onChange");

function EditorPageWithStorybookPreview(props: Props) {
const [previewDevice, setPreviewDevice] =
React.useState<DeviceType>("phone");
const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
const [answerArea, setAnswerArea] = React.useState<
PerseusAnswerArea | undefined | null
>();
const [question, setQuestion] = React.useState<PerseusRenderer | undefined>(
props.question,
);
const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>(
props.hints,
);

const [panelOpen, setPanelOpen] = React.useState<boolean>(true);

const apiOptions = props.apiOptions ?? {
isMobile: false,
flags,
};

return (
<View>
<EditorPage
apiOptions={apiOptions}
previewDevice={previewDevice}
onPreviewDeviceChange={(newDevice) =>
setPreviewDevice(newDevice)
}
developerMode={true}
jsonMode={jsonMode}
answerArea={answerArea}
question={question}
hints={hints}
frameSource="about:blank"
previewURL="about:blank"
itemId="1"
onChange={(props) => {
onChangeAction(props);

if ("jsonMode" in props) {
setJsonMode(props.jsonMode);
}
if ("answerArea" in props) {
setAnswerArea(props.answerArea);
}
if ("question" in props) {
setQuestion(props.question);
}
if ("hints" in props) {
setHints(props.hints);
}
}}
/>

{/* Button to open panel */}
{!panelOpen && (
<Button
onClick={() => setPanelOpen(!panelOpen)}
style={styles.openPanelButton}
>
Open preview (storybook only)
</Button>
)}

{/* Panel to show the question/hint previews */}
{panelOpen && (
<View style={styles.panel}>
{/* Close button */}
<IconButton
icon={xIcon}
onClick={() => setPanelOpen(!panelOpen)}
style={styles.closeButton}
/>

<View style={styles.panelInner}>
{/* Question preview */}
<Renderer
strings={mockStrings}
apiOptions={apiOptions}
{...question}
/>
</View>

{/* Hints preview */}
{hints?.map((hint, index) => (
<View key={index} style={styles.panelInner}>
<Strut size={spacing.medium_16} />
<LabelLarge>{`Hint ${index + 1}`}</LabelLarge>
<Renderer
strings={mockStrings}
apiOptions={apiOptions}
{...hint}
/>
</View>
))}
</View>
)}
</View>
);
}

const styles = StyleSheet.create({
panel: {
position: "fixed",
right: 0,
height: "90vh",
overflow: "auto",
flex: "none",
backgroundColor: color.fadedBlue16,
padding: spacing.medium_16,
borderRadius: spacing.small_12,
alignItems: "end",
},
panelInner: {
flex: "none",
backgroundColor: color.white,
borderRadius: spacing.xSmall_8,
marginTop: spacing.medium_16,
width: "100%",
padding: spacing.xSmall_8,
},
closeButton: {
margin: 0,
},
openPanelButton: {
position: "fixed",
right: spacing.medium_16,
// Extra space so it doesn't get covered up by storybook's
// "Style warnings" button.
bottom: spacing.xxxLarge_64,
},
});

export default EditorPageWithStorybookPreview;
171 changes: 7 additions & 164 deletions packages/perseus-editor/src/__stories__/editor-page.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {EditorPage} from "..";
import {segmentWithLockedFigures} from "../../../perseus/src/widgets/__testdata__/interactive-graph.testdata";
import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";

import EditorPageWithStorybookPreview from "./editor-page-with-storybook-preview";
import {flags} from "./flags-for-api-options";

import type {
Expand All @@ -28,67 +29,12 @@ export default {
const onChangeAction = action("onChange");

export const Demo = (): React.ReactElement => {
const [previewDevice, setPreviewDevice] =
React.useState<DeviceType>("phone");
const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
const [answerArea, setAnswerArea] = React.useState<
PerseusAnswerArea | undefined | null
>();
const [question, setQuestion] = React.useState<
PerseusRenderer | undefined
>();
const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();

return (
<EditorPage
apiOptions={{
isMobile: false,
flags,
}}
previewDevice={previewDevice}
onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
developerMode={true}
jsonMode={jsonMode}
answerArea={answerArea}
question={question}
hints={hints}
frameSource="about:blank"
previewURL="about:blank"
itemId="1"
onChange={(props) => {
onChangeAction(props);

if ("jsonMode" in props) {
setJsonMode(props.jsonMode);
}
if ("answerArea" in props) {
setAnswerArea(props.answerArea);
}
if ("question" in props) {
setQuestion(props.question);
}
if ("hints" in props) {
setHints(props.hints);
}
}}
/>
);
return <EditorPageWithStorybookPreview />;
};

export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
const [previewDevice, setPreviewDevice] =
React.useState<DeviceType>("phone");
const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
const [answerArea, setAnswerArea] = React.useState<
PerseusAnswerArea | undefined | null
>();
const [question, setQuestion] = React.useState<PerseusRenderer | undefined>(
segmentWithLockedFigures,
);
const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();

return (
<EditorPage
<EditorPageWithStorybookPreview
apiOptions={{
isMobile: false,
flags: {
Expand All @@ -99,32 +45,7 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
},
},
}}
previewDevice={previewDevice}
onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
developerMode={true}
jsonMode={jsonMode}
answerArea={answerArea}
question={question}
hints={hints}
frameSource="about:blank"
previewURL="about:blank"
itemId="1"
onChange={(props) => {
onChangeAction(props);

if ("jsonMode" in props) {
setJsonMode(props.jsonMode);
}
if ("answerArea" in props) {
setAnswerArea(props.answerArea);
}
if ("question" in props) {
setQuestion(props.question);
}
if ("hints" in props) {
setHints(props.hints);
}
}}
question={segmentWithLockedFigures}
/>
);
};
Expand All @@ -138,19 +59,8 @@ MafsWithLockedFiguresCurrent.parameters = {
};

export const MafsWithLockedFiguresM2Flag = (): React.ReactElement => {
const [previewDevice, setPreviewDevice] =
React.useState<DeviceType>("phone");
const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
const [answerArea, setAnswerArea] = React.useState<
PerseusAnswerArea | undefined | null
>();
const [question, setQuestion] = React.useState<PerseusRenderer | undefined>(
segmentWithLockedFigures,
);
const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();

return (
<EditorPage
<EditorPageWithStorybookPreview
apiOptions={{
isMobile: false,
flags: {
Expand All @@ -161,32 +71,7 @@ export const MafsWithLockedFiguresM2Flag = (): React.ReactElement => {
},
},
}}
previewDevice={previewDevice}
onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
developerMode={true}
jsonMode={jsonMode}
answerArea={answerArea}
question={question}
hints={hints}
frameSource="about:blank"
previewURL="about:blank"
itemId="1"
onChange={(props) => {
onChangeAction(props);

if ("jsonMode" in props) {
setJsonMode(props.jsonMode);
}
if ("answerArea" in props) {
setAnswerArea(props.answerArea);
}
if ("question" in props) {
setQuestion(props.question);
}
if ("hints" in props) {
setHints(props.hints);
}
}}
question={segmentWithLockedFigures}
/>
);
};
Expand All @@ -200,50 +85,8 @@ MafsWithLockedFiguresM2Flag.parameters = {
};

export const MafsWithLockedFiguresM2bFlag = (): React.ReactElement => {
const [previewDevice, setPreviewDevice] =
React.useState<DeviceType>("phone");
const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
const [answerArea, setAnswerArea] = React.useState<
PerseusAnswerArea | undefined | null
>();
const [question, setQuestion] = React.useState<PerseusRenderer | undefined>(
segmentWithLockedFigures,
);
const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();

return (
<EditorPage
apiOptions={{
isMobile: false,
flags,
}}
previewDevice={previewDevice}
onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
developerMode={true}
jsonMode={jsonMode}
answerArea={answerArea}
question={question}
hints={hints}
frameSource="about:blank"
previewURL="about:blank"
itemId="1"
onChange={(props) => {
onChangeAction(props);

if ("jsonMode" in props) {
setJsonMode(props.jsonMode);
}
if ("answerArea" in props) {
setAnswerArea(props.answerArea);
}
if ("question" in props) {
setQuestion(props.question);
}
if ("hints" in props) {
setHints(props.hints);
}
}}
/>
<EditorPageWithStorybookPreview question={segmentWithLockedFigures} />
);
};

Expand Down