;
- name?: string;
- },
-) => {
- const {
- shape,
- data,
- path,
- actions,
- name: givenName,
- controls,
- ...otherProps
- } = props;
-
- const name = givenName || camelCaseToHuman(path[path.length - 1] || "");
-
- const children = (
-
- {children}
-
- );
- }
- if (shape.type === "object") {
- return (
-
- {children}
-
- );
- }
- return (
-
- {children}
-
- );
-};
-
-type LeafContainerProps = {
- name: string;
- controls?: React.ReactNode;
- children?: React.ReactNode;
- path: Path;
- shape: Shape;
-};
-const LeafContainer = ({
- name,
- controls,
- children,
- path,
- shape,
-}: LeafContainerProps): React.ReactElement => {
- const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
- const previewHeading = hasPreviewHeading && (
-
- {/* @ts-expect-error - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}
-
-
- );
- return (
-
-
-
-
-
- {capitalize(name)}
-
- {controls}
-
-
{previewHeading}
-
- {children}
-
- {controls && (
-
- {controls}
-
- )}
-
{children}
-
-
- {/* @ts-expect-error - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}
-
- {controls}
-
- );
- const headingPreview = (name || controls) && (
-
- {/* @ts-expect-error - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}
-
-
- );
- const hasBothHeadings = headingEditor && headingPreview;
- return (
-
- {hasBothHeadings && (
-
-
- {headingEditor}
-
-
- {headingPreview}
-
-
- )}
-
0 && styles.contentIndent)}>
- {children}
-
-
= T & WithStickinessProps;
-
-/**
- * HOC that adds a "sticky" prop to the wrapped component that is true
- * when the rendered component is taller than the window. Since sticky content
- * can be somewhat distracting, we'd like to avoid it when not useful. This
- * HOC is useful for only making content sticky when useful.
- *
- * It does so by polling the height and comparing it to the window height.
- */
-const withStickiness = <
- Config extends Record,
- Component extends React.ComponentType>,
->(
- WrappedComponent: Component,
-): React.ComponentType => {
- type State = {
- sticky: boolean;
- };
- return class StickyComponent extends React.Component {
- // @ts-expect-error - TS2564 - Property 'stickynessTimer' has no initializer and is not definitely assigned in the constructor.
- stickynessTimer: number;
-
- state = {
- sticky: false,
- };
-
- componentDidMount() {
- // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
- // eslint-disable-next-line no-restricted-syntax
- // @ts-expect-error - TS2322 - Type 'Timer' is not assignable to type 'number'.
- this.stickynessTimer = setInterval(this.updateStickiness, 1000);
- this.updateStickiness();
- }
-
- componentWillUnmount() {
- // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
- // eslint-disable-next-line no-restricted-syntax
- clearInterval(this.stickynessTimer);
- }
-
- updateStickiness = () => {
- const domNode = ReactDOM.findDOMNode(this);
- // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetHeight' does not exist on type 'Element | Text'.
- const height = domNode.offsetHeight;
- const windowHeight = window.innerHeight;
- const sticky = height > windowHeight;
- if (sticky !== this.state.sticky) {
- this.setState({
- sticky,
- });
- }
- };
-
- render(): React.ReactNode {
- return (
- // @ts-expect-error - TS2322 - Type 'Readonly & { sticky: boolean; children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes>>'.
- & WithStickinessProps) => {
- const {data, path, actions, apiOptions, renderers, sticky} = props;
-
- const preview = (
- {lens(renderers).get(path)}
- );
-
- return (
-
-
-
-
- {/* TODO(CP-4852): only pass the props to Editor that it uses. */}
- {
- // @ts-expect-error - TS2769 - No overload matches this call.
-
- actions.mergeValueAtPath(path, newVal)
- }
- apiOptions={apiOptions}
- />
- }
-
-
-
-
- );
- },
-);
-
-const HintNodeContent = withStickiness(
- (props: NodePropTypes & WithStickinessProps) => {
- const {data, path, actions, apiOptions, renderers, sticky} = props;
-
- const preview = (
- {lens(renderers).get(path)}
- );
-
- return (
-
-
-
-
- actions.mergeValueAtPath(path, newVal)
- }
- apiOptions={apiOptions}
- showTitle={false}
- showRemoveButton={false}
- showMoveButtons={false}
- // no-op handler since showRemoveButton={false}
- onRemove={() => {}}
- // no-op handler since showMoveButtons={false}
- onMove={(direction: number) => {}}
- isFirst={true}
- isLast={true}
- />
-
-
-
-
) => {
- const {data, path, actions, apiOptions} = props;
- const {GroupMetadataEditor} = apiOptions;
-
- if (GroupMetadataEditor == null) {
- return null;
- }
- return (
-
-
- actions.setValueAtPath(path, newVal)}
- showTitle={false}
- />
-
-
) => {
- const {shape, data, path, actions, ...otherProps} = props;
-
- const collectionName = camelCaseToHuman(path[path.length - 1]);
- const elementName = pluralToSingular(collectionName);
-
- const elementType = shape.elementShape.type;
- const elementIsLeaf = elementType === "content" || elementType === "hint";
-
- /**
- * TODO(somewhatabstract, JIRA-XXXX):
- * The NodePropTypes generic and specifically the ItemArrayNode could
- * contain a variety of types that are not arrays. Probably need to refine
- * the type more before doing this work, or rework the `ArrayNodeContent`
- * component to be less permissive about the props it accepts.
- */
- const children = data.map((subdata, i) => {
- const subpath = path.concat(i);
- const controls = [
- i > 0 && (
-
-
actions.moveArrayElementUp(subpath)}
- >
-
-
-
-
- actions.moveArrayElementDown(subpath)}
- >
-
-
- ),
-
- actions.removeArrayElement(subpath)}
- >
-
-
,
- ];
-
- return (
-
-
- );
- });
-
- return {children}
;
-};
-
-const ObjectNodeContent = (
- props: NodePropTypes,
-) => {
- const {shape, data, path, ...otherProps} = props;
-
- // Object iteration order should automatically match the order in which the
- // keys were defined in the object literal. So, whatever order semantically
- // made sense to the shape's author is the order in which we'll iterate :)
- const children = Object.keys(shape.shape).map((subkey) => (
-
-
- ));
-
- return {children}
;
-};
-
-interface LayoutStatics {
- shape: Shape;
-}
-
-type MultiRendererEditorProps = {
- // eslint-disable-next-line no-restricted-syntax
- Layout: React.ComponentType & LayoutStatics;
- apiOptions: APIOptions;
- item: Item;
- editorMode: EditorMode;
- onChange: ChangeHandler;
-};
-
-class MultiRendererEditor extends React.Component {
- layout: React.ElementRef | null | undefined;
-
- _renderLayout: () => React.ReactElement = () => {
- const {Layout, apiOptions, item} = this.props;
-
- return (
- (this.layout = node)}
- item={item}
- apiOptions={apiOptions}
- />
- );
- };
-
- _renderJson: () => React.ReactElement> = () => {
- return (
-
- this.props.onChange({editorMode})}
- />
- this.props.onChange({item})}
- />
-
- );
- };
-
- _renderPreview: () => React.ReactElement> =
- () => {
- return (
-
-
- this.props.onChange({editorMode})
- }
- />
- {this._renderLayout()}
-
- );
- };
-
- mergeValueAtPath: (path: Path, newValue?: any) => void = (
- path: Path,
- newValue: unknown,
- ) => {
- this.props.onChange({
- item: lens(this.props.item)
- .merge(multiPath(path), newValue)
- .freeze(),
- });
- };
-
- setValueAtPath: (path: Path, newValue?: any) => void = (
- path: Path,
- newValue: unknown,
- ) => {
- this.props.onChange({
- item: lens(this.props.item).set(multiPath(path), newValue).freeze(),
- });
- };
-
- addArrayElement: (path: Path, shape: Shape) => void = (
- path: Path,
- shape: Shape,
- ) => {
- const currentLength = lens(this.props.item).get(multiPath(path)).length;
- const newElementPath = path.concat(currentLength);
- const newValue = buildEmptyItemTreeForShape(shape);
- this.props.onChange({
- item: lens(this.props.item)
- .set(multiPath(newElementPath), newValue)
- .freeze(),
- });
- };
-
- removeArrayElement: (path: Path) => void = (path: Path) => {
- this.props.onChange({
- item: lens(this.props.item).del(multiPath(path)).freeze(),
- });
- };
-
- moveArrayElementDown: (path: Path) => void = (path: Path) => {
- // Moving an element down can also be expressed as swapping it with the
- // following element.
- const index = path[path.length - 1];
- const nextElementIndex = index + 1;
- const nextElementPath = path.slice(0, -1).concat(nextElementIndex);
-
- const element = lens(this.props.item).get(multiPath(path));
- const nextElement = lens(this.props.item).get(
- multiPath(nextElementPath),
- );
-
- this.props.onChange({
- item: lens(this.props.item)
- .set(multiPath(path), nextElement)
- .set(multiPath(nextElementPath), element)
- .freeze(),
- });
- };
-
- moveArrayElementUp: (path: Path) => void = (path: Path) => {
- // Moving an element up can also be expressed as moving the previous
- // element down.
- const index = path[path.length - 1];
- const previousElementPath = path.slice(0, -1).concat(index - 1);
- this.moveArrayElementDown(previousElementPath);
- };
-
- _renderEdit: () => React.ReactElement> = () => {
- const apiOptions = {
- ...ApiOptions.defaults,
- ...this.props.apiOptions,
- } as const;
-
- const {item} = this.props;
- const itemShape: Shape = this.props.Layout.shape;
-
- return (
-
- this.props.onChange({editorMode})}
- />
-
- {}},
- useVideo: (() => {}) as any,
- }}
- >
- {({renderers}) => (
-
-
- );
- };
-
- score: () => any | undefined = () => {
- if (this.layout) {
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- return this.layout.score();
- }
- };
-
- getSerializedState: () => any | undefined = () => {
- if (this.layout) {
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- return this.layout.getSerializedState();
- }
- };
-
- restoreSerializedState: (state?: any) => void = (state: any) => {
- if (this.layout) {
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- this.layout.restoreSerializedState(state);
- }
- };
-
- _renderContent: () =>
- | React.ReactElement>
- | React.ReactNode = () => {
- switch (this.props.editorMode) {
- case "json":
- return this._renderJson();
- case "preview":
- return this._renderPreview();
- case "edit":
- return this._renderEdit();
- default:
- return (
-
- this.props.onChange({
- editorMode,
- })
- }
- />
- );
- }
- };
-
- render(): React.ReactNode {
- return {this._renderContent()}
;
- }
-}
-
-const styles = StyleSheet.create({
- // This is used in a number of places throughout this file.
- container: {},
-
- // eslint-disable-next-line react-native/no-unused-styles
- editor: {
- width: "100%",
- },
-
- // eslint-disable-next-line react-native/no-unused-styles
- treePreview: {
- position: "relative",
- },
-
- verticalFlip: {
- transform: "scaleY(-1)",
- },
-
- control: {
- marginLeft: 12,
- },
-
- containerHeader: {
- alignItems: "flex-end",
- display: "flex",
- flexDirection: "row",
- },
-
- previewCollectionHeader: {
- marginBottom: 16,
- },
-
- containerTitle: {
- flexGrow: 1,
- margin: 0,
- },
-
- contentIndent: {
- marginLeft: 8,
- },
-
- hintEditor: {
- paddingBottom: 0,
- },
-
- arrayElement: {
- marginBottom: 16,
- },
-
- // Leaf nodes are already wrapped in cute little pods, so they don't need
- // this extra border between array elements.
- arrayElementAndNotLeaf: {
- borderBottom: "1px solid #ccc",
- ":first-child": {
- borderTop: "1px solid #ccc",
- paddingTop: 16,
- },
- },
-
- objectElement: {
- marginBottom: 16,
- },
-
- tagsEditor: {
- border: "1px solid #ddd",
- padding: "5px 10px",
- },
-
- /**
- * A row contains a fixed width editor and a preview that expands as
- * needed.
- */
- row: {
- display: "flex",
- position: "relative",
- },
-
- /**
- * The editor.
- */
- columnLeft: {
- width: 360,
- marginRight: 30,
- // so that the `position: absolute` of line markers are positioned
- // relative to this.
- position: "relative",
- },
-
- /**
- * The preview.
- */
- columnRight: {
- flex: 1,
- marginLeft: 30,
- position: "relative",
- },
-
- /**
- * Sticks to just under the heading.
- */
- sticky: {
- position: "sticky",
- top: 33, // height of the cute pod for the editor
- },
-
- /**
- * Used for sticky headings.
- */
- rowHeading: {
- position: "sticky",
- backgroundColor: "white",
- width: "100%",
- // TODO(joshuan): Make this less arbitrary. It should be higher than
- // perseus content.
- zIndex: 101,
- top: -1,
- },
-});
-
-export default MultiRendererEditor;
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
index 2ae43e2008..73a1ef623e 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
@@ -159,8 +159,6 @@ class InteractiveGraphSettings extends React.Component {
}
UNSAFE_componentWillReceiveProps(nextProps) {
- // Make sure that state updates when switching
- // between different items in a multi-item editor.
if (
!_.isEqual(this.props.labels, nextProps.labels) ||
!_.isEqual(this.props.gridStep, nextProps.gridStep) ||
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx
index 056ab99f53..5f20a34d33 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx
@@ -393,7 +393,7 @@ describe("LockedEllipseSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+ "Circle with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
});
});
@@ -421,7 +421,7 @@ describe("LockedEllipseSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+ "Circle with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
});
});
@@ -448,7 +448,7 @@ describe("LockedEllipseSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Ellipse with x radius 2 and y radius 3, centered at (0, 0). Appearance solid gray border, with no fill.",
+ "Ellipse with x radius 2 and y radius 3, centered at 0 comma 0. Appearance solid gray border, with no fill.",
});
});
@@ -476,7 +476,7 @@ describe("LockedEllipseSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Ellipse with x radius 2 and y radius 3, centered at (0, 0), rotated by 90 degrees. Appearance solid gray border, with no fill.",
+ "Ellipse with x radius 2 and y radius 3, centered at 0 comma 0, rotated by 90 degrees. Appearance solid gray border, with no fill.",
});
});
@@ -508,7 +508,7 @@ describe("LockedEllipseSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Circle spoken A with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+ "Circle spoken A with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
});
});
@@ -544,7 +544,7 @@ describe("LockedEllipseSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Circle spoken A, spoken B with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+ "Circle spoken A, spoken B with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
});
});
});
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
index 48d7066586..91ec4936c4 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
@@ -79,7 +79,7 @@ const LockedEllipseSettings = (props: Props) => {
str += `Ellipse${visiblelabel} with x radius ${radius[0]} and y radius ${radius[1]}`;
}
- str += `, centered at (${center[0]}, ${center[1]})`;
+ str += `, centered at ${center[0]} comma ${center[1]}`;
if (!isCircle && angle !== 0) {
str += `, rotated by ${radianToDegree(angle)} degrees`;
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx
index 0d444b82e3..44f40c0183 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx
@@ -625,7 +625,7 @@ describe("LockedLineSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Segment from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+ "Segment from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
});
});
@@ -651,7 +651,7 @@ describe("LockedLineSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Line from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+ "Line from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
});
});
@@ -682,7 +682,7 @@ describe("LockedLineSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Line spoken A from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+ "Line spoken A from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
});
});
@@ -717,7 +717,7 @@ describe("LockedLineSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Line spoken A, spoken B from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+ "Line spoken A, spoken B from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
});
});
@@ -758,7 +758,7 @@ describe("LockedLineSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Line spoken A from point spoken C at (0, 0) to point spoken D at (2, 2). Appearance solid gray.",
+ "Line spoken A from point spoken C at 0 comma 0 to point spoken D at 2 comma 2. Appearance solid gray.",
});
});
@@ -809,7 +809,7 @@ describe("LockedLineSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Line spoken A, spoken B from point spoken C, spoken C2 at (0, 0) to point spoken D, spoken D2 at (2, 2). Appearance solid gray.",
+ "Line spoken A, spoken B from point spoken C, spoken C2 at 0 comma 0 to point spoken D, spoken D2 at 2 comma 2. Appearance solid gray.",
});
});
});
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
index 982375bd88..da368b5f42 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
@@ -83,7 +83,7 @@ const LockedLineSettings = (props: Props) => {
const point1VisibleLabel = await joinLabelsAsSpokenMath(point1.labels);
const point2VisibleLabel = await joinLabelsAsSpokenMath(point2.labels);
- let str = `${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at (${point1.coord[0]}, ${point1.coord[1]}) to point${point2VisibleLabel} at (${point2.coord[0]}, ${point2.coord[1]})`;
+ let str = `${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${point1.coord[0]} comma ${point1.coord[1]} to point${point2VisibleLabel} at ${point2.coord[0]} comma ${point2.coord[1]}`;
const lineAppearance = generateLockedFigureAppearanceDescription(
lineColor,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx
index 8f772e4ed6..026d873042 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx
@@ -422,7 +422,7 @@ describe("LockedPointSettings", () => {
// generateSpokenMathDetails is mocked to return the input string
// with "Spoken math details for " prepended.
expect(onChangeProps).toHaveBeenCalledWith({
- ariaLabel: "Point at (0, 0). Appearance solid gray.",
+ ariaLabel: "Point at 0 comma 0. Appearance solid gray.",
});
});
@@ -454,7 +454,7 @@ describe("LockedPointSettings", () => {
// generateSpokenMathDetails is mocked to return the input string
// with "Spoken math details for " prepended.
expect(onChangeProps).toHaveBeenCalledWith({
- ariaLabel: "Point spoken A at (0, 0). Appearance solid gray.",
+ ariaLabel: "Point spoken A at 0 comma 0. Appearance solid gray.",
});
});
@@ -491,7 +491,7 @@ describe("LockedPointSettings", () => {
// with "Spoken math details for " prepended.
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Point spoken A, spoken B at (0, 0). Appearance solid gray.",
+ "Point spoken A, spoken B at 0 comma 0. Appearance solid gray.",
});
});
});
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
index bceb0c2ddf..757ad272f9 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
@@ -119,7 +119,7 @@ const LockedPointSettings = (props: Props) => {
async function getPrepopulatedAriaLabel() {
const visiblelabel = await joinLabelsAsSpokenMath(labels);
- let str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`;
+ let str = `Point${visiblelabel} at ${coord[0]} comma ${coord[1]}`;
const pointAppearance =
generateLockedFigureAppearanceDescription(pointColor);
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx
index 62c3dd0a0a..35d485736a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx
@@ -608,7 +608,7 @@ describe("LockedPolygonSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Polygon with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.",
+ "Polygon with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.",
});
});
@@ -644,7 +644,7 @@ describe("LockedPolygonSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Polygon spoken A with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.",
+ "Polygon spoken A with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.",
});
});
@@ -684,7 +684,7 @@ describe("LockedPolygonSettings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Polygon spoken A, spoken B with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.",
+ "Polygon spoken A, spoken B with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.",
});
});
});
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
index e5b82f114c..5619442737 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
@@ -75,7 +75,7 @@ const LockedPolygonSettings = (props: Props) => {
let str = `Polygon${visiblelabel} with ${points.length} sides, vertices at `;
// Add the coordinates of each point to the aria label
- str += points.map(([x, y]) => `(${x}, ${y})`).join(", ");
+ str += points.map(([x, y]) => `${x} comma ${y}`).join(", ");
const polygonAppearance = generateLockedFigureAppearanceDescription(
color,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx
index 1c52f82937..fe208e4aa5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx
@@ -441,7 +441,7 @@ describe("Locked Vector Settings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Vector from (0, 0) to (2, 2). Appearance solid gray.",
+ "Vector from 0 comma 0 to 2 comma 2. Appearance solid gray.",
});
});
@@ -472,7 +472,7 @@ describe("Locked Vector Settings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Vector spoken A from (0, 0) to (2, 2). Appearance solid gray.",
+ "Vector spoken A from 0 comma 0 to 2 comma 2. Appearance solid gray.",
});
});
@@ -507,7 +507,7 @@ describe("Locked Vector Settings", () => {
// Assert
expect(onChangeProps).toHaveBeenCalledWith({
ariaLabel:
- "Vector spoken A, spoken B from (0, 0) to (2, 2). Appearance solid gray.",
+ "Vector spoken A, spoken B from 0 comma 0 to 2 comma 2. Appearance solid gray.",
});
});
});
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
index 9fee83fc04..2ae3247bc1 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
@@ -72,7 +72,7 @@ const LockedVectorSettings = (props: Props) => {
async function getPrepopulatedAriaLabel() {
const visiblelabel = await joinLabelsAsSpokenMath(labels);
- let str = `Vector${visiblelabel} from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`;
+ let str = `Vector${visiblelabel} from ${tail[0]} comma ${tail[1]} to ${tip[0]} comma ${tip[1]}`;
const vectorAppearance =
generateLockedFigureAppearanceDescription(lineColor);
diff --git a/packages/perseus/CHANGELOG.md b/packages/perseus/CHANGELOG.md
index 4b2c5b0579..6d27ebfa82 100644
--- a/packages/perseus/CHANGELOG.md
+++ b/packages/perseus/CHANGELOG.md
@@ -1,5 +1,17 @@
# @khanacademy/perseus
+## 47.0.0
+
+### Major Changes
+
+- [#1955](https://github.com/Khan/perseus/pull/1955) [`e7b4db0bf`](https://github.com/Khan/perseus/commit/e7b4db0bf193241a36508804dd6e58c729f0a3db) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove support for MultiRenderer
+
+## 46.0.1
+
+### Patch Changes
+
+- [#1966](https://github.com/Khan/perseus/pull/1966) [`e22a931d9`](https://github.com/Khan/perseus/commit/e22a931d987291258b66f2c80db3536970a4555d) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Numeric Input] - BUGFIX - Adjust color contrast of tooltip text
+
## 46.0.0
### Major Changes
diff --git a/packages/perseus/package.json b/packages/perseus/package.json
index e07e2d5110..c898f2ecb0 100644
--- a/packages/perseus/package.json
+++ b/packages/perseus/package.json
@@ -3,7 +3,7 @@
"description": "Core Perseus API (includes renderers and widgets)",
"author": "Khan Academy",
"license": "MIT",
- "version": "46.0.0",
+ "version": "47.0.0",
"publishConfig": {
"access": "public"
},
diff --git a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
index 160e3f6b89..73f63e6741 100644
--- a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
+++ b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
@@ -350,7 +350,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
>
Test visible label
@@ -370,7 +370,6 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Test ARIA label"
- aria-labelledby="uid-dropdown-widget-2-dropdown-label"
class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
id="uid-dropdown-widget-2-dropdown"
role="combobox"
@@ -429,7 +428,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
>
Test visible label
@@ -449,7 +448,6 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Test ARIA label"
- aria-labelledby="uid-dropdown-widget-4-dropdown-label"
class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
id="uid-dropdown-widget-4-dropdown"
role="combobox"
@@ -508,7 +506,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
>
Test visible label
@@ -528,7 +526,6 @@ exports[`renderer snapshots initial render: initial render 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Test ARIA label"
- aria-labelledby="uid-dropdown-widget-0-dropdown-label"
class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
id="uid-dropdown-widget-0-dropdown"
role="combobox"
diff --git a/packages/perseus/src/__tests__/a11y.test.ts b/packages/perseus/src/__tests__/a11y.test.ts
index 5a83c58828..c1c101b96d 100644
--- a/packages/perseus/src/__tests__/a11y.test.ts
+++ b/packages/perseus/src/__tests__/a11y.test.ts
@@ -275,29 +275,6 @@ describe("a11y", () => {
const result = violatingWidgets(emptyImageWithoutAltText);
expect(result).toHaveLength(0);
});
-
- it("should handle all these same cases in multi-items", () => {
- const decorateItem = (item) => ({
- __type: "content",
- ...item.question,
- });
- const result = violatingWidgets({
- _multi: {
- sharedContext: decorateItem(oneInaccessibleWidget),
- questions: [
- decorateItem(noWidgets),
- decorateItem(oneAccessibleWidget),
- decorateItem(imageWithAltText),
- decorateItem(imageWithoutAltText),
- decorateItem(emptyImageWithoutAltText),
- ],
- },
- });
- result.sort(); // don't depend on iteration order
- expect(result).toHaveLength(2);
- expect(result[0]).toBe("image");
- expect(result[1]).toBe("matrix");
- });
});
});
});
diff --git a/packages/perseus/src/__tests__/renderability.test.ts b/packages/perseus/src/__tests__/renderability.test.ts
index 7226d73d96..d1076f8a5c 100644
--- a/packages/perseus/src/__tests__/renderability.test.ts
+++ b/packages/perseus/src/__tests__/renderability.test.ts
@@ -416,65 +416,5 @@ describe("Renderability", () => {
expect(result).toBe(false);
});
});
-
- describe("Multi-items", () => {
- it("should be renderable with no items", () => {
- const result = isItemRenderableByVersion(
- {
- _multi: {
- questions: [],
- },
- },
- PerseusItemVersion,
- );
- expect(result).toBe(true);
- });
-
- it("should be renderable when all items are", () => {
- const result = isItemRenderableByVersion(
- {
- _multi: {
- sharedContext: {
- __type: "content",
- ...sampleV0InputNumberItem.question,
- },
- questions: [
- {
- __type: "content",
- ...sampleV1MeasurerItem.question,
- },
- ],
- },
- },
- PerseusItemVersion,
- );
- expect(result).toBe(true);
- });
-
- it("should not be renderable when one item is not", () => {
- const result = isItemRenderableByVersion(
- {
- _multi: {
- sharedContext: {
- __type: "content",
- ...sampleV0InputNumberItem.question,
- },
- questions: [
- {
- __type: "content",
- ...sampleImpossibleWidgetsItem.question,
- },
- {
- __type: "content",
- ...sampleV1MeasurerItem.question,
- },
- ],
- },
- },
- PerseusItemVersion,
- );
- expect(result).toBe(false);
- });
- });
});
});
diff --git a/packages/perseus/src/a11y.ts b/packages/perseus/src/a11y.ts
index 2803f6db7f..778d79689b 100644
--- a/packages/perseus/src/a11y.ts
+++ b/packages/perseus/src/a11y.ts
@@ -5,12 +5,9 @@
import _ from "underscore";
-import MultiItems from "./multi-items";
import {traverse} from "./traversal";
import * as Widgets from "./widgets";
-const {findContentNodesInItem, inferItemShape} = MultiItems;
-
// Iterate over a single Perseus renderer, mutating `widgets` by appending
// violating widget types discovered in this item.
function traverseRenderer(itemData, widgets: Array) {
@@ -31,14 +28,7 @@ export function violatingWidgets(itemData: any): any {
// TODO(jordan): Hints as well
const widgets = [];
- if (itemData._multi) {
- const shape = inferItemShape(itemData);
- findContentNodesInItem(itemData, shape, (content) =>
- traverseRenderer(content, widgets),
- );
- } else {
- traverseRenderer(itemData.question, widgets);
- }
+ traverseRenderer(itemData.question, widgets);
// Uniquify the list of widgets (by type)
return _.uniq(widgets);
diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
index 3c43155d69..9c071022e0 100644
--- a/packages/perseus/src/index.ts
+++ b/packages/perseus/src/index.ts
@@ -229,39 +229,11 @@ export type {
PerseusWidget,
PerseusWidgetsMap,
PerseusWidgetTypes,
- MultiItem,
WidgetOptions,
} from "./perseus-types";
export type {UserInputMap} from "./validation.types";
export type {Coord} from "./interactive2/types";
export type {MarkerType} from "./widgets/label-image/types";
-
-/**
- * Multi-items
- */
-export {default as MultiItems} from "./multi-items";
-export {buildEmptyItemTreeForShape, itemToTree} from "./multi-items/items";
-export {default as shapes} from "./multi-items/shapes";
-export {buildMapper} from "./multi-items/trees";
-
-export type {
- ContentNode,
- HintNode,
- Item,
- ItemTree,
- ItemObjectNode,
- ItemArrayNode,
- TagsNode,
-} from "./multi-items/item-types";
-export type {
- Shape,
- ArrayShape,
- ObjectShape,
- ContentShape,
- HintShape,
- TagsShape,
-} from "./multi-items/shape-types";
-export type {Path} from "./multi-items/trees";
export type {
RendererPromptJSON,
WidgetPromptJSON,
diff --git a/packages/perseus/src/multi-items.ts b/packages/perseus/src/multi-items.ts
deleted file mode 100644
index d347764828..0000000000
--- a/packages/perseus/src/multi-items.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * This library provides support for Perseus multi-items: structured Perseus
- * content that content creators can easily create, and that applications can
- * easily render into different parts of the layout.
- *
- * For more details about application and motivation, see:
- * https://sites.google.com/a/khanacademy.org/forge/for-developers/perseus-items-and-multi-items
- *
- * This file primarily exposes the `MultiRenderer` component, which performs
- * multi-rendering. To multi-render a question, pass in the content of the item
- * to the `MultiRenderer` component as a props. Then, pass in a function which
- * takes an object of renderers (in the same structure as the content), and
- * return a render tree. The `MultiRenderer` component will allow you to
- * combine scores, serialized state, etc. without having to manually call on
- * each of the functions. It also handles inter-widgets requests between the
- * different renderers.
- * For more details, see `multi-items/multi-renderer.jsx`.
- *
- * Example:
- *
- * item = {_multi: {
- * left: ,
- * right: [, ],
- * }}
- * shape = shapes.shape({
- * left: shapes.content,
- * right: shapes.arrayOf(shapes.content),
- * })
- *
- *
- * {({renderers}) =>
- *
- *
{renderers.left}
- *
- * {renderers.right.map(r => {r} )}
- *
- *
- *
- * This file also exposes `shapes`, which helps you construct a runtime type
- * declaration for your particular class of multi-item. This can then be used
- * to create a MultirendererEditor for your multi-item shape, and to validate
- * that a multi-item conforms to the shape via `buildPropTypeForShape`.
- * For more details, see `multi-items/shapes.js`.
- *
- * This file also exposes some utility functions for working with generic
- * multi-items, like `findContentNodesInItem`, `findHintNodesInItem`,
- * `inferItemShape`, and `buildEmptyItemForShape`.
- * For more details, see `multi-items/items.js`.
- */
-import {
- buildEmptyItemForShape,
- findContentNodesInItem,
- findHintNodesInItem,
- inferItemShape,
-} from "./multi-items/items";
-import MultiRenderer from "./multi-items/multi-renderer";
-import {buildPropTypeForShape} from "./multi-items/prop-type-builders";
-import shapes from "./multi-items/shapes";
-
-export default {
- // Tools for rendering your multi-items
- MultiRenderer,
-
- // Tools for declaring your multi-item shapes
- shapes,
- buildPropTypeForShape,
-
- // Tools for generically manipulating multi-items
- buildEmptyItemForShape,
- findContentNodesInItem,
- findHintNodesInItem,
- inferItemShape,
-};
diff --git a/packages/perseus/src/multi-items/__stories__/multi-renderer.stories.tsx b/packages/perseus/src/multi-items/__stories__/multi-renderer.stories.tsx
deleted file mode 100644
index 04921926dd..0000000000
--- a/packages/perseus/src/multi-items/__stories__/multi-renderer.stories.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import {View} from "@khanacademy/wonder-blocks-core";
-import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import {MultiItemRendererWithDebugUI} from "../../../../../testing/multi-item-renderer-with-debug-ui";
-import {question1} from "../__testdata__/multi-renderer.testdata";
-
-type StoryArgs = Record;
-
-type Story = {
- title: string;
-};
-
-export const SingleItem = (args: StoryArgs): React.ReactElement => {
- const item = {
- _multi: {
- ...question1._multi,
- blurb: {
- ...question1._multi.blurb,
- content:
- "This is a short snippet to help you understand the context of the question. We call it the 'blurb'.",
- },
- },
- } as const;
- return (
-
- {({renderers}) => {
- const {blurb, question, hints} = renderers;
- return (
-
-
-
- Blurb
-
- {blurb}
-
-
-
- Question
-
- {question}
-
-
-
- Hints
-
-
- {// @ts-expect-error [FEI-5003] - TS2339 - Property 'firstN' does not exist on type 'readonly ReactNode[]'.
- hints?.firstN(2)}
-
-
-
- );
- }}
-
- );
-};
-
-const styles = StyleSheet.create({
- section: {
- backgroundColor: "#F5F5F5",
- padding: "5px",
- borderWidth: "1px",
- marginTop: "5px",
- marginBottom: "5px",
- },
- heading: {
- backgroundColor: "#A9A9A9",
- margin: "-5px",
- padding: "5px",
- },
- hints: {
- marginLeft: "50px",
- },
-});
-
-export default {
- title: "Perseus/Renderers/Multi Renderer",
-} as Story;
diff --git a/packages/perseus/src/multi-items/__testdata__/multi-renderer.testdata.ts b/packages/perseus/src/multi-items/__testdata__/multi-renderer.testdata.ts
deleted file mode 100644
index 0bb6ab4e6b..0000000000
--- a/packages/perseus/src/multi-items/__testdata__/multi-renderer.testdata.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import shapes from "../shapes";
-
-import type {Item} from "../item-types";
-import type {Shape} from "../shape-types";
-
-export const simpleQuestionShape: Shape = shapes.shape({
- blurb: shapes.content,
- question: shapes.content,
- hints: shapes.hints,
-});
-
-// Shape: simpleQuestionShape
-export const question1: Item = {
- _multi: {
- blurb: {
- __type: "content",
- content: "",
- images: {},
- widgets: {},
- },
- hints: [
- {
- __type: "hint",
- content:
- "If two triangles are congruent, then they have the same side lengths and angle measures.",
- images: {},
- replace: false,
- widgets: {},
- },
- {
- __type: "hint",
- content:
- "A triangle congruent to triangle $ABC$ must also have side lengths of $12$, $14$ and $20$.",
- images: {},
- replace: false,
- widgets: {},
- },
- {
- __type: "hint",
- content:
- "The following triangle is congruent to triangle $ABC$:\n\n* A triangle with side lengths of $12$, $14$, and $20$",
- images: {},
- replace: false,
- widgets: {},
- },
- ],
- question: {
- __type: "content",
- content:
- "Triangle $ABC$ has side lengths of $12$, $14$, and $20$. Which of the following triangles is congruent to triangle $ABC$ ?\n\n[[☃ radio 1]]\n\nEnter the number 3 into this field: [[☃ input-number 1]]",
- widgets: {
- "radio 1": {
- alignment: "default",
- graded: true,
- options: {
- choices: [
- {
- clue: "Congruent triangles have the same side lengths.",
- content:
- "A triangle with side lengths of $3$, $4$, and $5$",
- correct: false,
- },
- {
- clue: "Congruent triangles have the same side lengths.\n\nThis choice is similar to triangle $ABC$.",
- content:
- "A triangle with side lengths of $6$, $7$, and $10$",
- correct: false,
- },
- {
- clue: "Congruent triangles have the same side lengths.",
- content:
- "A triangle with side lengths of $10$, $12$, and $18$",
- correct: false,
- isNoneOfTheAbove: false,
- },
- {
- clue: "Congruent triangles have the same side lengths.",
- content:
- "A triangle with side lengths of $12$, $14$, and $20$",
- correct: true,
- isNoneOfTheAbove: false,
- },
- {
- clue: "Congruent triangles have the same side lengths.\n\nThis choice is similar to triangle $ABC$.",
- content:
- "A triangle with side lengths of $24$, $28$, and $40$",
- correct: false,
- isNoneOfTheAbove: false,
- },
- ],
- countChoices: false,
- deselectEnabled: false,
- displayCount: null,
- hasNoneOfTheAbove: false,
- multipleSelect: false,
- randomize: false,
- },
- static: false,
- type: "radio",
- version: {
- major: 1,
- minor: 0,
- },
- },
- "input-number 1": {
- type: "input-number",
- graded: true,
- options: {
- answerType: "number",
- value: "-42",
- simplify: "required",
- size: "normal",
- inexact: false,
- maxError: 0.1,
- },
- },
- },
- },
- },
-};
-
-const definitionWidgetConfig = {
- graded: true,
- version: {major: 0, minor: 0},
- static: false,
- type: "definition",
- options: {
- togglePrompt: "word",
- definition: "",
- static: false,
- },
- alignment: "default",
-} as const;
-
-// Shape: simpleQuestionShape
-export const definitionQuestion1: Item = {
- _multi: {
- blurb: {
- __type: "content",
- content: "Here's a blurb [[☃ definition 1]]",
- images: {},
- widgets: {
- "definition 1": definitionWidgetConfig,
- },
- },
- hints: [
- {
- __type: "hint",
- content: "Hint #1 [[☃ definition 2]]",
- images: {},
- replace: false,
- widgets: {
- "definition 2": definitionWidgetConfig,
- },
- },
- {
- __type: "hint",
- content: "Hint #1 [[☃ definition 3]]",
- images: {},
- replace: false,
- widgets: {
- "definition 3": definitionWidgetConfig,
- },
- },
- ],
- question: {
- __type: "content",
- content:
- "What is the answer to this?\n\n[[☃ definition 4]]\n\n[[☃ definition 5]]",
- widgets: {
- "definition 4": definitionWidgetConfig,
- "definition 5": definitionWidgetConfig,
- },
- },
- },
-};
diff --git a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
deleted file mode 100644
index 286f99fa5e..0000000000
--- a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
+++ /dev/null
@@ -1,1181 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`multi-item renderer should snapshot: initial render 1`] = `
-
-
-
-
-
-
-
- Triangle
-
-
- ABC
-
-
- has side lengths of
-
-
- 12
-
-
- ,
-
-
- 14
-
-
- , and
-
-
- 20
-
-
- . Which of the following triangles is congruent to triangle
-
-
- ABC
-
-
- ?
-
-
-
-
-
- Enter the number 3 into this field:
-
-
-
-
-
-
-
-
-
- Hint #1
-
-
- 1 / 3
-
-
-
-
- If two triangles are congruent, then they have the same side lengths and angle measures.
-
-
-
-
-
-
-
-
= [];
- findHintNodesInItem(item, shape, (c) => hints.push(c));
- hints.sort();
- expect([hint(6), hint(7)]).toEqual(hints);
- });
-});
diff --git a/packages/perseus/src/multi-items/__tests__/multi-renderer.test.tsx b/packages/perseus/src/multi-items/__tests__/multi-renderer.test.tsx
deleted file mode 100644
index 11bd727b6c..0000000000
--- a/packages/perseus/src/multi-items/__tests__/multi-renderer.test.tsx
+++ /dev/null
@@ -1,906 +0,0 @@
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {act, render, screen} from "@testing-library/react";
-import {userEvent as userEventLib} from "@testing-library/user-event";
-import * as React from "react";
-
-import {
- testDependencies,
- testDependenciesV2,
-} from "../../../../../testing/test-dependencies";
-import * as Dependencies from "../../dependencies";
-import {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing";
-import {
- definitionQuestion1,
- question1,
- simpleQuestionShape,
-} from "../__testdata__/multi-renderer.testdata";
-import MultiRenderer from "../multi-renderer";
-import shapes from "../shapes";
-
-import type {FilterCriterion, Widget} from "../../types";
-import type {Item} from "../item-types";
-import type {Tree} from "../tree-types";
-import type {UserEvent} from "@testing-library/user-event";
-
-// A little helper used in the render callback of a MultiRenderer.
-type Props = {renderers: any};
-const SimpleLayout = ({renderers}: Props): React.ReactElement => {
- if (renderers == null) {
- throw new Error("renderers was null");
- }
-
- const {blurb, question, hints} = renderers;
- return (
-
-
{blurb}
-
{question}
-
{hints?.firstN(1)}
-
- (renderer = r)}
- dependencies={testDependenciesV2}
- >
- {({renderers}) =>
- ,
- );
- if (renderer == null) {
- throw new Error("Rendering failed.");
- }
-
- return {
- ...result,
- renderer,
- };
-};
-
-// A test helper to find widgets in a MultiRenderer.
-const _findWidgets = (
- renderer: MultiRenderer,
- filterCriterion: FilterCriterion,
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-): Tree<
- ReadonlyArray,
- ReadonlyArray,
- null
-> => {
- return renderer._mapRenderers((data) => {
- if (data.ref == null) {
- return [];
- }
-
- // Note we use findInternalWidgets() here instead of
- // _findWidgets(). Otherwise we get the same widget appearing in
- // multiple places in the result tree.
- return data.ref.findInternalWidgets(filterCriterion);
- });
-};
-
-describe("multi-item renderer", () => {
- let userEvent: UserEvent;
- beforeEach(() => {
- userEvent = userEventLib.setup({
- advanceTimers: jest.advanceTimersByTime,
- });
-
- jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
- testDependencies,
- );
- registerAllWidgetsForTesting();
- });
-
- it("should snapshot", () => {
- // Arrange and Act
- const {container} = renderSimpleQuestion(question1);
-
- // Assert
- expect(container).toMatchSnapshot("initial render");
- });
-
- it("should render the error if one occurs (item doesn't match shape)", () => {
- // Arrange
- // We mock out `console.error` because the we're explicitly
- // triggering and error, but we don't want that to fail the test.
- jest.spyOn(console, "error").mockImplementation(() => {});
-
- // Act
- render(
-
-
- {({renderers}) => {
- return
;
- }}
-
- ,
- );
-
- // Assert
- expect(screen.getByText(/Error rendering:/)).toBeInTheDocument();
- });
-
- describe("state serialization", () => {
- it("should return serialized state from all items", async () => {
- // Arrange
- const {renderer} = renderSimpleQuestion(question1);
-
- // Nudge the widget to a non-default state (ie. an item is
- // selected, a value is entered). You can see the result of this in the `choiceStates`
- // array in the captured state below where the choice at index 2 has
- // `"selected": true` (instead of false) and the input-number has a `currentValue`.
- await userEvent.click(screen.getAllByRole("radio")[2]); // Correct
- await userEvent.type(screen.getByRole("textbox"), "+42"); // Correct
-
- // Act
- // @ts-expect-error - TS2339 - Property '_getSerializedState' does not exist on type 'never'.
- const state = renderer._getSerializedState(null);
-
- // Assert
- expect(state).toMatchInlineSnapshot(`
- {
- "blurb": {},
- "hints": [
- null,
- null,
- null,
- ],
- "question": {
- "input-number 1": {
- "answerType": "number",
- "currentValue": "+42",
- "rightAlign": undefined,
- "simplify": "required",
- "size": "normal",
- },
- "radio 1": {
- "choiceStates": [
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": true,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- ],
- "choices": [
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $3$, $4$, and $5$",
- "correct": false,
- "originalIndex": 0,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $6$, $7$, and $10$",
- "correct": false,
- "originalIndex": 1,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $10$, $12$, and $18$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 2,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $12$, $14$, and $20$",
- "correct": true,
- "isNoneOfTheAbove": false,
- "originalIndex": 3,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $24$, $28$, and $40$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 4,
- },
- ],
- "countChoices": false,
- "deselectEnabled": false,
- "hasNoneOfTheAbove": false,
- "multipleSelect": false,
- "numCorrect": 1,
- "selectedChoices": [
- false,
- false,
- false,
- true,
- false,
- ],
- },
- },
- }
- `);
- });
-
- it("should return values from lastSerializedState if ref's getSerializedState returns null", async () => {
- // Arrange
- const {renderer} = renderSimpleQuestion(question1);
-
- await userEvent.click(screen.getAllByRole("radio")[2]);
- await userEvent.type(screen.getByRole("textbox"), "99");
-
- // Act
- // @ts-expect-error - TS2339 - Property '_getSerializedState' does not exist on type 'never'.
- const state = renderer._getSerializedState({
- blurb: "last blurb",
- hints: ["uno", "dos" /* intentionally not passing a third */],
- });
-
- // Assert
- expect(state).toMatchInlineSnapshot(`
- {
- "blurb": {},
- "hints": [
- "uno",
- "dos",
- undefined,
- ],
- "question": {
- "input-number 1": {
- "answerType": "number",
- "currentValue": "99",
- "rightAlign": undefined,
- "simplify": "required",
- "size": "normal",
- },
- "radio 1": {
- "choiceStates": [
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": true,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- ],
- "choices": [
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $3$, $4$, and $5$",
- "correct": false,
- "originalIndex": 0,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $6$, $7$, and $10$",
- "correct": false,
- "originalIndex": 1,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $10$, $12$, and $18$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 2,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $12$, $14$, and $20$",
- "correct": true,
- "isNoneOfTheAbove": false,
- "originalIndex": 3,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $24$, $28$, and $40$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 4,
- },
- ],
- "countChoices": false,
- "deselectEnabled": false,
- "hasNoneOfTheAbove": false,
- "multipleSelect": false,
- "numCorrect": 1,
- "selectedChoices": [
- false,
- false,
- false,
- true,
- false,
- ],
- },
- },
- }
- `);
- });
-
- it("should restore serialized state to each widget", () => {
- // Arrange
- const {renderer} = renderSimpleQuestion(question1);
-
- // This state was built by getting the renderer into this state
- // using `userEvent` calls and then calling `getSerializedState()`
- // on the renderer.
- const state = {
- blurb: {},
- hints: [null, null, null],
- question: {
- "input-number 1": {
- answerType: "number",
- currentValue: "+42",
- rightAlign: false,
- simplify: "required",
- size: "normal",
- },
- "radio 1": {
- choiceStates: [
- {
- correctnessShown: false,
- crossedOut: false,
- highlighted: false,
- previouslyAnswered: false,
- rationaleShown: false,
- readOnly: false,
- selected: false,
- },
- {
- correctnessShown: false,
- crossedOut: false,
- highlighted: false,
- previouslyAnswered: false,
- rationaleShown: false,
- readOnly: false,
- selected: false,
- },
- {
- correctnessShown: false,
- crossedOut: false,
- highlighted: false,
- previouslyAnswered: false,
- rationaleShown: false,
- readOnly: false,
- selected: true,
- },
- {
- correctnessShown: false,
- crossedOut: false,
- highlighted: false,
- previouslyAnswered: false,
- rationaleShown: false,
- readOnly: false,
- selected: false,
- },
- {
- correctnessShown: false,
- crossedOut: false,
- highlighted: false,
- previouslyAnswered: false,
- rationaleShown: false,
- readOnly: false,
- selected: false,
- },
- ],
- choices: [
- {
- clue: "Congruent triangles have the same side lengths.",
- content:
- "A triangle with side lengths of $3$, $4$, and $5$",
- correct: false,
- originalIndex: 0,
- },
- {
- clue:
- "Congruent triangles have the same side lengths.\n" +
- "\n" +
- "This choice is similar to triangle $ABC$.",
- content:
- "A triangle with side lengths of $6$, $7$, and $10$",
- correct: false,
- originalIndex: 1,
- },
- {
- clue: "Congruent triangles have the same side lengths.",
- content:
- "A triangle with side lengths of $10$, $12$, and $18$",
- correct: false,
- isNoneOfTheAbove: false,
- originalIndex: 2,
- },
- {
- clue: "Congruent triangles have the same side lengths.",
- content:
- "A triangle with side lengths of $12$, $14$, and $20$",
- correct: true,
- isNoneOfTheAbove: false,
- originalIndex: 3,
- },
- {
- clue:
- "Congruent triangles have the same side lengths.\n" +
- "\n" +
- "This choice is similar to triangle $ABC$.",
- content:
- "A triangle with side lengths of $24$, $28$, and $40$",
- correct: false,
- isNoneOfTheAbove: false,
- originalIndex: 4,
- },
- ],
- countChoices: false,
- deselectEnabled: false,
- hasNoneOfTheAbove: false,
- multipleSelect: false,
- numCorrect: 1,
- selectedChoices: [false, false, false, true, false],
- },
- },
- } as const;
-
- // Act
- // @ts-expect-error - TS2339 - Property 'restoreSerializedState' does not exist on type 'never'.
- act(() => renderer.restoreSerializedState(state));
-
- // Assert
- expect(screen.getAllByRole("radio")[0]).not.toBeChecked();
- expect(screen.getAllByRole("radio")[1]).not.toBeChecked();
- expect(screen.getAllByRole("radio")[2]).toBeChecked();
- expect(screen.getAllByRole("radio")[3]).not.toBeChecked();
- expect(screen.getAllByRole("radio")[4]).not.toBeChecked();
- expect(screen.getByRole("textbox")).toHaveValue("+42");
- });
-
- it("should call callback when restore serialized state is complete", () => {
- // Arrange
- const {renderer} = renderSimpleQuestion(definitionQuestion1);
- const callback = jest.fn();
-
- // Act
- act(() =>
- // @ts-expect-error - TS2339 - Property 'restoreSerializedState' does not exist on type 'never'.
- renderer.restoreSerializedState(
- {
- blurb: {"definition 1": 1},
- hints: [2, 3],
- question: {
- "definition 4": 4,
- "definition 5": 5,
- },
- },
- callback,
- ),
- );
- act(() => jest.runOnlyPendingTimers());
-
- // Assert
- expect(callback).toHaveBeenCalled();
- });
- });
-
- it("should find widgets in other parts of the tree", () => {
- // Arrange
- const {renderer} = renderSimpleQuestion(definitionQuestion1);
- // Grab "definition 5" out of the render tree. Note that the result
- // here is a tree of the same shape as the `mockedQuestion1`'s shape.
- // Each node in the tree is a `$ReadOnlyArray`.
- const result = _findWidgets(renderer, (id) => id === "definition 5");
-
- // Act
- // We're using the API provided to the widget we found ("definition
- // 5") to look into other parts of the render tree for another widget
- // ("definition 1"). This verifies that the MultiRenderer has
- // correctly passed down a functioning `findWidgets` prop to the
- // widgets.
- // Oh the TypeScript warnings we'll suppress. Welcome to multi items.
- const widget1 = result.question[0].props.findWidgets("definition 1");
-
- // Assert
- expect(widget1).not.toBeNull();
- });
-
- it("should return the scores in the shape of the tree", async () => {
- // Arrange
- const {renderer} = renderSimpleQuestion(question1);
-
- await userEvent.click(screen.getAllByRole("radio")[3]); // Correct
- await userEvent.type(screen.getByRole("textbox"), "-42"); // Correct
-
- // Act
- // @ts-expect-error - TS2339 - Property 'getScores' does not exist on type 'never'.
- const score = renderer.getScores();
-
- // Assert
- expect(score).toMatchInlineSnapshot(`
- {
- "blurb": {
- "correct": true,
- "empty": false,
- "guess": [],
- "message": null,
- "state": {},
- },
- "hints": [
- null,
- null,
- null,
- ],
- "question": {
- "correct": true,
- "empty": false,
- "guess": [
- {
- "choicesSelected": [
- false,
- false,
- false,
- true,
- false,
- ],
- },
- {
- "currentValue": "-42",
- },
- ],
- "message": null,
- "state": {
- "input-number 1": {
- "answerType": "number",
- "currentValue": "-42",
- "rightAlign": undefined,
- "simplify": "required",
- "size": "normal",
- },
- "radio 1": {
- "choiceStates": [
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": true,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- ],
- "choices": [
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $3$, $4$, and $5$",
- "correct": false,
- "originalIndex": 0,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $6$, $7$, and $10$",
- "correct": false,
- "originalIndex": 1,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $10$, $12$, and $18$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 2,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $12$, $14$, and $20$",
- "correct": true,
- "isNoneOfTheAbove": false,
- "originalIndex": 3,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $24$, $28$, and $40$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 4,
- },
- ],
- "countChoices": false,
- "deselectEnabled": false,
- "hasNoneOfTheAbove": false,
- "multipleSelect": false,
- "numCorrect": 1,
- "selectedChoices": [
- false,
- false,
- false,
- true,
- false,
- ],
- },
- },
- },
- }
- `);
- });
-
- it("should return the composite score for the whole tree", async () => {
- // Arrange
- const {renderer} = renderSimpleQuestion(question1);
-
- await userEvent.click(screen.getAllByRole("radio")[3]); // Correct
- await userEvent.type(screen.getByRole("textbox"), "-42"); // Correct
-
- // Act
- // @ts-expect-error - TS2339 - Property 'score' does not exist on type 'never'.
- const score = renderer.score();
-
- // Assert
- expect(score).toMatchInlineSnapshot(`
- {
- "correct": true,
- "empty": false,
- "guess": {
- "blurb": [],
- "hints": [
- null,
- null,
- null,
- ],
- "question": [
- {
- "choicesSelected": [
- false,
- false,
- false,
- true,
- false,
- ],
- },
- {
- "currentValue": "-42",
- },
- ],
- },
- "message": null,
- "state": [
- {},
- {
- "input-number 1": {
- "answerType": "number",
- "currentValue": "-42",
- "rightAlign": undefined,
- "simplify": "required",
- "size": "normal",
- },
- "radio 1": {
- "choiceStates": [
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": true,
- },
- {
- "correctnessShown": false,
- "crossedOut": false,
- "highlighted": false,
- "previouslyAnswered": false,
- "rationaleShown": false,
- "readOnly": false,
- "selected": false,
- },
- ],
- "choices": [
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $3$, $4$, and $5$",
- "correct": false,
- "originalIndex": 0,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $6$, $7$, and $10$",
- "correct": false,
- "originalIndex": 1,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $10$, $12$, and $18$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 2,
- },
- {
- "clue": "Congruent triangles have the same side lengths.",
- "content": "A triangle with side lengths of $12$, $14$, and $20$",
- "correct": true,
- "isNoneOfTheAbove": false,
- "originalIndex": 3,
- },
- {
- "clue": "Congruent triangles have the same side lengths.
-
- This choice is similar to triangle $ABC$.",
- "content": "A triangle with side lengths of $24$, $28$, and $40$",
- "correct": false,
- "isNoneOfTheAbove": false,
- "originalIndex": 4,
- },
- ],
- "countChoices": false,
- "deselectEnabled": false,
- "hasNoneOfTheAbove": false,
- "multipleSelect": false,
- "numCorrect": 1,
- "selectedChoices": [
- false,
- false,
- false,
- true,
- false,
- ],
- },
- },
- ],
- }
- `);
- });
-});
diff --git a/packages/perseus/src/multi-items/__tests__/prop-type-builders.test.ts b/packages/perseus/src/multi-items/__tests__/prop-type-builders.test.ts
deleted file mode 100644
index 921d0efa54..0000000000
--- a/packages/perseus/src/multi-items/__tests__/prop-type-builders.test.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {treeToItem} from "../items";
-import {buildPropTypeForShape} from "../prop-type-builders";
-import shapes from "../shapes";
-
-// TODO(emily): [PERSEUS_MERGE] Calling prop types as a function fails these
-// tests. Rewrite them once we're using the prop-types library.
-describe.skip("buildPropTypeForShape", () => {
- // The value we're wrapping might not be a valid ItemTree - that's the
- // point of testing this PropType - so we disable type checking by casting
- // `value` to type `any`. The current implementation of `treeToItem` can
- // handle that possibility.
- const tryPropType = (propType: any, value: any) =>
- propType({value: treeToItem(value)}, "value", "");
-
- const assertPropTypePasses = (propType, value) =>
- expect(null).toEqual(tryPropType(propType, value));
-
- const assertPropTypeFails = (propType, value) =>
- expect(tryPropType(propType, value) instanceof Error).toBeTruthy();
-
- it("validates a content node", () => {
- const propType = buildPropTypeForShape(shapes.content);
-
- // Perseus has default values for all item fields, so all except the
- // type are optional.
- assertPropTypePasses(propType, {__type: "content"});
- assertPropTypePasses(propType, {
- content: "",
- widgets: {},
- images: {},
- __type: "content",
- });
-
- // We also leave the full object optional by default, like the propType
- // primitives.
- assertPropTypePasses(propType, null);
-
- // But specifying a bad type for any field will fail the propType.
- assertPropTypeFails(propType, {content: 1, __type: "content"});
- assertPropTypeFails(propType, {widgets: 1, __type: "content"});
- assertPropTypeFails(propType, {images: 1, __type: "content"});
- });
-
- // TODO(mdr): Remove #LegacyContentNode support.
- it("validates a legacy content node", () => {
- const propType = buildPropTypeForShape(shapes.content);
-
- // Perseus has default values for all item fields, so all except the
- // type are optional.
- assertPropTypePasses(propType, {__type: "item"});
- assertPropTypePasses(propType, {
- content: "",
- widgets: {},
- images: {},
- __type: "item",
- });
-
- // We also leave the full object optional by default, like the propType
- // primitives.
- assertPropTypePasses(propType, null);
-
- // But specifying a bad type for any field will fail the propType.
- assertPropTypeFails(propType, {content: 1, __type: "item"});
- assertPropTypeFails(propType, {widgets: 1, __type: "item"});
- assertPropTypeFails(propType, {images: 1, __type: "item"});
- });
-
- it("validates a hint node", () => {
- const propType = buildPropTypeForShape(shapes.hint);
-
- // Perseus has default values for all hint fields, so all except the
- // type are optional.
- assertPropTypePasses(propType, {__type: "hint"});
- assertPropTypePasses(propType, {
- content: "",
- widgets: {},
- images: {},
- replace: false,
- __type: "hint",
- });
-
- // We also leave the full object optional by default, like the propType
- // primitives.
- assertPropTypePasses(propType, null);
-
- // But specifying a bad type for any field will fail the propType.
- assertPropTypeFails(propType, {content: 1, __type: "hint"});
- assertPropTypeFails(propType, {widgets: 1, __type: "hint"});
- assertPropTypeFails(propType, {images: 1, __type: "hint"});
- assertPropTypeFails(propType, {replace: 1, __type: "hint"});
- });
-
- it("validates an array", () => {
- const propType = buildPropTypeForShape(shapes.arrayOf(shapes.content));
- const emptyItem = {__type: "content"} as const;
-
- assertPropTypePasses(propType, []);
- assertPropTypePasses(propType, [emptyItem, emptyItem, emptyItem]);
-
- // While the array itself is optional, its elements are required.
- assertPropTypePasses(propType, null);
- assertPropTypeFails(propType, [emptyItem, null, emptyItem]);
- });
-
- it("validates tags", () => {
- const propType = buildPropTypeForShape(shapes.tags);
-
- assertPropTypePasses(propType, []);
- assertPropTypePasses(propType, ["a", "b", "c"]);
-
- assertPropTypePasses(propType, null);
- assertPropTypeFails(propType, ["a", null, "b"]);
- assertPropTypeFails(propType, [1, 2, 3]);
- });
-
- it("validates an object", () => {
- const propType = buildPropTypeForShape(
- shapes.shape({
- a: shapes.content,
- b: shapes.content,
- }),
- );
- const emptyItem = {__type: "content"} as const;
-
- assertPropTypePasses(propType, {a: emptyItem, b: emptyItem});
-
- // While the object itself is optional, its fields are required.
- assertPropTypePasses(propType, null);
- assertPropTypeFails(propType, {});
- assertPropTypeFails(propType, {a: emptyItem});
- assertPropTypeFails(propType, {b: emptyItem});
- });
-});
diff --git a/packages/perseus/src/multi-items/__tests__/shapes.test.ts b/packages/perseus/src/multi-items/__tests__/shapes.test.ts
deleted file mode 100644
index f359f45cdf..0000000000
--- a/packages/perseus/src/multi-items/__tests__/shapes.test.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import shapes from "../shapes";
-
-describe("shapes.content", () => {
- it('has type "content"', () => {
- const shape = shapes.content;
- expect("content").toEqual(shape.type);
- });
-});
-
-describe("shapes.hint", () => {
- it('has type "hint"', () => {
- const shape = shapes.hint;
- expect("hint").toEqual(shape.type);
- });
-});
-
-describe("shapes.arrayOf", () => {
- it('has type "array"', () => {
- const shape = shapes.arrayOf(shapes.content);
- expect("array").toEqual(shape.type);
- });
-
- it("has the given shape as its `elementShape` property", () => {
- const shape = shapes.arrayOf(shapes.content);
- expect(shapes.content).toEqual(shape.elementShape);
- });
-});
-
-describe("shapes.shape", () => {
- it('has type "object"', () => {
- const shape = shapes.shape({});
- expect("object").toEqual(shape.type);
- });
-
- it("has the given shapes as its `shape` property", () => {
- const shape = shapes.shape({
- foo: shapes.content,
- bar: shapes.hint,
- });
- expect(shapes.content).toEqual(shape.shape.foo);
- expect(shapes.hint).toEqual(shape.shape.bar);
- });
-});
diff --git a/packages/perseus/src/multi-items/__tests__/trees.test.ts b/packages/perseus/src/multi-items/__tests__/trees.test.ts
deleted file mode 100644
index 96b2b6dfaa..0000000000
--- a/packages/perseus/src/multi-items/__tests__/trees.test.ts
+++ /dev/null
@@ -1,317 +0,0 @@
-import shapes from "../shapes";
-import {buildMapper} from "../trees";
-
-import type {
- ItemTree,
- ContentNode,
- HintNode,
- TagsNode,
- ItemArrayNode,
-} from "../item-types";
-import type {TreeMapper} from "../trees";
-
-describe("buildMapper", () => {
- function content(n): ContentNode {
- return {
- __type: "content",
- content: `content ${n}`,
- };
- }
-
- function hint(n: number): HintNode {
- return {
- __type: "hint",
- content: `hint ${n}`,
- };
- }
-
- function tags(...elements): TagsNode {
- // This function mostly exists as a shorthand way to clarify to TypeScript
- // that this is a TagsNode, not a confused ItemArrayNode.
- return elements;
- }
-
- function array(...elements): ItemArrayNode {
- // This function mostly exists as a shorthand way to clarify to TypeScript
- // that this is an ItemArrayNode, not a confused TagsNode.
- /**
- * TODO(somewhatabstract, JIRA-XXXX):
- * The Tree types are really hard to work with properly.
- */
- return elements;
- }
-
- const shape = shapes.shape({
- a: shapes.content,
- b: shapes.arrayOf(shapes.content),
- c: shapes.shape({
- d: shapes.content,
- e: shapes.hint,
- }),
- f: shapes.hint,
- g: shapes.tags,
- });
-
- const tree: ItemTree = {
- a: content(1),
- b: array(content(2), content(3), content(4)),
- c: {
- d: content(5),
- e: hint(6),
- },
- f: hint(7),
- g: tags("foo", "bar"),
- };
-
- it("calls the content mapper for each of the content nodes", () => {
- const calledWith = [];
- buildMapper()
- // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'never'.
- .setContentMapper((c) => calledWith.push(c))
- .mapTree(tree, shape);
- calledWith.sort();
-
- expect([
- content(1),
- content(2),
- content(3),
- content(4),
- content(5),
- ]).toEqual(calledWith);
- });
-
- it("calls the hint mapper for each of the hint nodes", () => {
- const calledWith = [];
- buildMapper()
- // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'never'.
- .setHintMapper((h) => calledWith.push(h))
- .mapTree(tree, shape);
- calledWith.sort();
-
- expect([hint(6), hint(7)]).toEqual(calledWith);
- });
-
- it("calls the tags mapper for each of the tags nodes", () => {
- const calledWith: Array = [];
- buildMapper()
- .setTagsMapper((t) => calledWith.push(t))
- .mapTree(tree, shape);
- calledWith.sort();
-
- expect([["foo", "bar"]]).toEqual(calledWith);
- });
-
- it("returns a mapped tree with the correct shape", () => {
- const mapper: TreeMapper<
- ContentNode,
- string,
- HintNode,
- string,
- TagsNode,
- string
- > = buildMapper()
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setContentMapper((c) => `mapped content: ${c.content || ""}`)
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setHintMapper((h) => `mapped hint: ${h.content || ""}`)
- .setTagsMapper((t) => `mapped tags: ${t.join(", ")}`);
- const result = mapper.mapTree(tree, shape);
-
- expect({
- a: "mapped content: content 1",
- b: [
- "mapped content: content 2",
- "mapped content: content 3",
- "mapped content: content 4",
- ],
- c: {
- d: "mapped content: content 5",
- e: "mapped hint: hint 6",
- },
- f: "mapped hint: hint 7",
- g: "mapped tags: foo, bar",
- }).toEqual(result);
- });
-
- it("provides each node shape to the leaf mappers", () => {
- // Return the type of the shape of the node in place of each node.
- const result = buildMapper()
- .setContentMapper((_, s) => s.type)
- .setHintMapper((_, s) => s.type)
- .setTagsMapper((_, s) => s.type)
- .mapTree(tree, shape);
-
- expect({
- a: "content",
- b: ["content", "content", "content"],
- c: {
- d: "content",
- e: "hint",
- },
- f: "hint",
- g: "tags",
- }).toEqual(result);
- });
-
- it("provides each node path to the leaf mappers", () => {
- // Return the path to the node in place of each node.
- const result = buildMapper()
- .setContentMapper((_, __, p) => p)
- .setHintMapper((_, __, p) => p)
- .setTagsMapper((_, __, p) => p)
- .mapTree(tree, shape);
-
- expect({
- a: ["a"],
- b: [
- ["b", 0],
- ["b", 1],
- ["b", 2],
- ],
- c: {
- d: ["c", "d"],
- e: ["c", "e"],
- },
- f: ["f"],
- g: ["g"],
- }).toEqual(result);
- });
-
- it("handles recursive objects", () => {
- const shape = shapes.shape({
- a: shapes.shape({
- b: shapes.shape({
- c: shapes.content,
- }),
- }),
- });
-
- const tree = {a: {b: {c: content(1)}}} as const;
-
- // @ts-expect-error - TS2322 - Type 'TreeMapperJustForLeaves' is not assignable to type 'TreeMapper'.
- const mapper: TreeMapper<
- ContentNode,
- string | null | undefined,
- HintNode,
- HintNode,
- TagsNode,
- TagsNode
- > = buildMapper().setContentMapper((c) => c.content);
- const result = mapper.mapTree(tree, shape);
-
- expect({a: {b: {c: "content 1"}}}).toEqual(result);
- });
-
- it("handles recursive arrays", () => {
- const shape = shapes.arrayOf(
- shapes.arrayOf(shapes.arrayOf(shapes.content)),
- );
-
- const tree = array(
- array(array(content(0)), array(content(1))),
- array(array(content(2)), array(content(3), content(4))),
- );
-
- // @ts-expect-error - TS2322 - Type 'TreeMapperJustForLeaves' is not assignable to type 'TreeMapper'.
- const mapper: TreeMapper<
- ContentNode,
- string | null | undefined,
- HintNode,
- HintNode,
- TagsNode,
- TagsNode
- > = buildMapper().setContentMapper((c) => c.content);
- const result = mapper.mapTree(tree, shape);
-
- expect([
- [["content 0"], ["content 1"]],
- [["content 2"], ["content 3", "content 4"]],
- ]).toEqual(result);
- });
-
- it("handles empty arrays", () => {
- const shape = shapes.arrayOf(shapes.arrayOf(shapes.content));
-
- const tree = array(array(), array(content(1)), array());
-
- // @ts-expect-error - TS2322 - Type 'TreeMapperJustForLeaves' is not assignable to type 'TreeMapper'.
- const mapper: TreeMapper<
- ContentNode,
- string | null | undefined,
- HintNode,
- HintNode,
- TagsNode,
- TagsNode
- > = buildMapper().setContentMapper((c) => c.content);
-
- // Test the outer array being empty.
- expect([]).toEqual(mapper.mapTree(array(), shape));
-
- // Test inner arrays being empty.
- const result = mapper.mapTree(tree, shape);
- expect([[], ["content 1"], []]).toEqual(result);
- });
-
- it("calls the array mapper for arrays", () => {
- const shape = shapes.arrayOf(shapes.content);
- const tree = array(content(1), content(2), content(3));
-
- let wasCalled = false;
- let callArgs: Record = {};
- // @ts-expect-error - TS2322 - Type 'TreeMapperForLeavesAndCollections' is not assignable to type 'TreeMapper'.
- const mapper: TreeMapper<
- ContentNode,
- string | null | undefined,
- HintNode,
- HintNode,
- TagsNode,
- TagsNode
- > = buildMapper()
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setContentMapper((c) => c.content)
- .setArrayMapper((mappedArray, originalArray, shape, path) => {
- wasCalled = true;
- callArgs = {mappedArray, originalArray, shape, path};
- return mappedArray;
- });
- mapper.mapTree(tree, shape);
-
- expect(wasCalled).toBeTruthy();
-
- expect(["content 1", "content 2", "content 3"]).toEqual(
- callArgs.mappedArray,
- );
- expect(tree).toEqual(callArgs.originalArray);
- expect(shape).toEqual(callArgs.shape);
- expect([]).toEqual(callArgs.path);
- });
-
- it("uses the array mapper return value to construct the new tree", () => {
- const mapper = buildMapper()
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setContentMapper((c) => c.content)
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setHintMapper((h) => h.content)
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setTagsMapper((t) => t.join(", "))
- .setArrayMapper((mappedArray, originalArray, shape, path) => {
- return mappedArray.map((child) => `${String(child)} in array`);
- });
- const result = mapper.mapTree(tree, shape);
-
- expect({
- a: "content 1",
- b: [
- "content 2 in array",
- "content 3 in array",
- "content 4 in array",
- ],
- c: {
- d: "content 5",
- e: "hint 6",
- },
- f: "hint 7",
- g: "foo, bar",
- }).toEqual(result);
- });
-});
diff --git a/packages/perseus/src/multi-items/item-types.ts b/packages/perseus/src/multi-items/item-types.ts
deleted file mode 100644
index 3e1ba29066..0000000000
--- a/packages/perseus/src/multi-items/item-types.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Type definitions for multi-item types, including:
- *
- * - Item: A multi-item tree wrapped in a `_multi` key, to help us recognize it
- * as a multi-item in other contexts and avoid misinterpreting its
- * other properties.
- * - ItemTree: A multi-item without the `_multi` key. Conforms to the Tree
- * interface, so it's compatible with our tree traversal functions.
- * - And the various types of nodes that compose a tree.
- */
-import type {Tree, ArrayNode, ObjectNode} from "./tree-types";
-import type {PerseusWidgetsMap} from "../perseus-types";
-import type {ImageDict} from "../types";
-
-export type ContentNode = {
- // TODO(mdr): When we first drafted the multi-item feature, we named
- // content nodes "item" nodes, and later decided the term was
- // ambiguous and switched to "content". But we're temporarily keeping
- // support for the "item" string when inferring item shape, so that we
- // don't crash on multi-items we've already created - but all new
- // content nodes will be generated with the "content" string.
- //
- // Code blocks that enable this legacy support are greppable with the
- // keyword #LegacyContentNode.
- __type: "content" | "item";
- // Perseus has default values for these fields, so they're all optional.
- content?: string | null | undefined;
- images?: ImageDict | null | undefined;
- widgets?: PerseusWidgetsMap | null | undefined;
-};
-export type HintNode = {
- __type: "hint";
- // Perseus has default values for these fields, so they're all optional.
- content?: string | null | undefined;
- images?: ImageDict | null | undefined;
- widgets?: PerseusWidgetsMap | null | undefined;
- replace?: boolean | null | undefined;
-};
-export type TagsNode = ReadonlyArray;
-
-// @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
-export type ItemArrayNode = ArrayNode;
-export type ItemObjectNode = ObjectNode;
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-export type ItemTree = Tree;
-
-// TODO(jeremy): I think we could refine this root type for multi items. Right
-// now a _multi's value can be _anything_ including "primitive" node types such
-// as "type: content" or "type: hint". That doesn't seem to match the shapes
-// that are in use to date. We could also move to a strict type at that point
-// because it appears that we _never_ add other root keys to an item that
-// specifies the `_multi` key. I think we'd be safe to restrict this root
-// object type to something like the following:
-// export type Item = {|_multi: ItemArrayNode | ItemObjectNode|};
-export type Item = {
- _multi: ItemTree;
-};
diff --git a/packages/perseus/src/multi-items/items.ts b/packages/perseus/src/multi-items/items.ts
deleted file mode 100644
index 5666101a73..0000000000
--- a/packages/perseus/src/multi-items/items.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * Utility functions for constructing and manipulating multi-items.
- *
- * These functions apply *specifically* to Items and ItemTrees - things that
- * actually semantically *are* multi-items. For more general functions for
- * traversing and manipulating *anything* shaped like a multi-item (like a
- * renderer tree or a score tree or, well, a multi-item), see trees.js.
- */
-
-import {Errors, PerseusError} from "@khanacademy/perseus-core";
-
-import shapes from "./shapes";
-import {buildMapper} from "./trees";
-
-import type {
- Item,
- ItemTree,
- ContentNode,
- HintNode,
- TagsNode,
- ItemArrayNode,
- ItemObjectNode,
-} from "./item-types";
-import type {Shape} from "./shape-types";
-
-/**
- * Return a semantically empty ItemTree that conforms to the given shape.
- *
- * - An empty content node has an empty content string and no widgets/images.
- * - An empty hint node has an empty content string and no widgets/images.
- * - An empty array node has no elements.
- * - An empty object node has a semantically empty node for each of its keys.
- * (That is, we recursively call buildEmptyItemTreeForShape for each key.)
- */
-export function buildEmptyItemTreeForShape(shape: Shape): ItemTree {
- if (shape.type === "content") {
- return {
- __type: "content",
- content: "",
- images: {},
- widgets: {},
- };
- }
- if (shape.type === "hint") {
- return {
- __type: "hint",
- replace: false,
- content: "",
- images: {},
- widgets: {},
- };
- }
- if (shape.type === "tags") {
- return [] as TagsNode;
- }
- if (shape.type === "array") {
- return [] as ItemArrayNode;
- }
- if (shape.type === "object") {
- const valueShapes = shape.shape;
- const object: ItemObjectNode = {};
- Object.keys(valueShapes).forEach((key) => {
- object[key] = buildEmptyItemTreeForShape(valueShapes[key]);
- });
- return object;
- }
- throw new PerseusError(
- // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
- `unexpected shape type ${shape.type}`,
- Errors.InvalidInput,
- );
-}
-
-/**
- * Return a semantically empty Item that conforms to the given shape.
- *
- * - An empty content node has an empty content string and no widgets/images.
- * - An empty hint node has an empty content string and no widgets/images.
- * - An empty array node has no elements.
- * - An empty object node has a semantically empty node for each of its keys.
- * (That is, we recursively call buildEmptyItemTreeForShape for each key.)
- */
-export function buildEmptyItemForShape(shape: Shape): Item {
- return treeToItem(buildEmptyItemTreeForShape(shape));
-}
-
-/**
- * Given an Item and its Shape, yield all of its content nodes to the callback.
- */
-export function findContentNodesInItem(
- item: Item,
- shape: Shape,
- callback: (c: ContentNode) => any,
-) {
- const itemTree = itemToTree(item);
- buildMapper().setContentMapper(callback).mapTree(itemTree, shape);
-}
-
-/**
- * Given an Item and its Shape, yield all of its hint nodes to the callback.
- */
-export function findHintNodesInItem(
- item: Item,
- shape: Shape,
- callback: (h: HintNode) => any,
-) {
- const itemTree = itemToTree(item);
- buildMapper().setHintMapper(callback).mapTree(itemTree, shape);
-}
-
-/**
- * Given an ItemTree, return a Shape that it conforms to.
- *
- * The Shape might not be complete or correct Shape that this Item was designed
- * for. If you have access to the intended Shape, use that instead.
- */
-export function inferItemShape(item: Item): Shape {
- const itemTree = itemToTree(item);
- return inferItemTreeShape(itemTree);
-}
-
-function inferItemTreeShape(node: ItemTree): Shape {
- if (Array.isArray(node)) {
- if (node.length) {
- if (typeof node[0] === "string") {
- // There's no ItemTree that can manifest as a string.
- // So, an array of strings must be a TagsNode, not ArrayNode.
- return shapes.tags;
- }
- // Otherwise, assume that this is a valid ArrayNode, and
- // therefore the shape of the first element applies to all
- // elements in the array.
- return shapes.arrayOf(inferItemTreeShape(node[0]));
- }
- // The array is empty, so we arbitrarily guess that it's a content
- // array. As discussed in the docstring, this might be incorrect,
- // and you shouldn't depend on it.
- return shapes.arrayOf(shapes.content);
- }
- if (
- // TODO(mdr): Remove #LegacyContentNode support.
- typeof node === "object" &&
- (node.__type === "content" || node.__type === "item")
- ) {
- return shapes.content;
- }
- if (typeof node === "object" && node.__type === "hint") {
- return shapes.hint;
- }
- if (typeof node === "object") {
- const valueShapes: Record = {};
- Object.keys(node).forEach((key) => {
- valueShapes[key] = inferItemTreeShape(node[key]);
- });
- return shapes.shape(valueShapes);
- }
- throw new PerseusError(
- `unexpected multi-item node ${JSON.stringify(node)}`,
- Errors.InvalidInput,
- );
-}
-
-/**
- * Convert the given Item to an ItemTree, by unwrapping the `_multi` key.
- */
-export function itemToTree(item: Item): ItemTree {
- return item._multi;
-}
-
-/**
- * Convert the given ItemTree to an Item, by wrapping it in the `_multi` key.
- */
-export function treeToItem(node: ItemTree): Item {
- return {_multi: node};
-}
diff --git a/packages/perseus/src/multi-items/multi-renderer.tsx b/packages/perseus/src/multi-items/multi-renderer.tsx
deleted file mode 100644
index 9b01836fb0..0000000000
--- a/packages/perseus/src/multi-items/multi-renderer.tsx
+++ /dev/null
@@ -1,584 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/no-unsafe */
-// TODO(mdr): There are some TypeScript errors in this file, and they're tricky, so
-// I'm skipping TypeScript errors for now.
-/**
- * Main entry point to the MultiRenderer render portion.
- *
- * This file exposes the `MultiRenderer` component which performs
- * multi-rendering. To multi-render a question, pass in the content of the item
- * to the `MultiRenderer` component as a props. Then, pass in a function which
- * takes an object of renderers (in the same structure as the content), and
- * return a render tree. The `MultiRenderer` component will allow you to
- * combine scores, serialized state, etc. without having to manually call on
- * each of the functions. It also handles inter-widgets requests between the
- * different renderers.
- *
- * Example:
- *
- * item = {_multi: {
- * left: ,
- * right: [, ],
- * }}
- * shape = shapes.shape({
- * left: shapes.content,
- * right: shapes.arrayOf(shapes.content),
- * })
- *
- *
- * {({renderers}) =>
- *
- *
{renderers.left}
- *
- * {renderers.right.map(r => {r} )}
- *
- *
- */
-import {Errors} from "@khanacademy/perseus-core";
-import {StyleSheet, css} from "aphrodite";
-// eslint-disable-next-line import/no-extraneous-dependencies
-import lens from "hubble";
-import * as React from "react";
-
-import {PerseusI18nContext} from "../components/i18n-context";
-import {DependenciesContext} from "../dependencies";
-import HintsRenderer from "../hints-renderer";
-import {Log} from "../logging/log";
-import Renderer from "../renderer";
-import {combineScores, keScoreFromPerseusScore} from "../util/scoring";
-
-import {itemToTree} from "./items";
-import {buildMapper} from "./trees";
-
-import type {Item, ContentNode, HintNode, TagsNode} from "./item-types";
-import type {Shape, ArrayShape} from "./shape-types";
-import type {Tree} from "./tree-types";
-import type {TreeMapper, ContentMapper, HintMapper, Path} from "./trees";
-import type {
- APIOptions,
- FilterCriterion,
- PerseusDependenciesV2,
- PerseusScore,
- Widget,
-} from "../types";
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-
-type Hint = any; // TODO(mdr)
-type Score = any; // TODO(mdr)
-type SerializedState = any; // TODO(mdr)
-
-type RendererProps = PropsFor;
-
-type ContentRendererElement = React.ReactElement;
-type HintRendererElement = React.ReactElement;
-type ContentRendererData = {
- makeRenderer: () => ContentRendererElement;
- ref: Renderer | null | undefined;
-};
-type FindWidgetsFunc = (
- criterion: FilterCriterion,
-) => ReadonlyArray;
-type HintRendererData = {
- makeRenderer: () => HintRendererElement;
- findExternalWidgets: FindWidgetsFunc | null | undefined;
- ref: null;
- hint: Hint;
-};
-type RendererData = ContentRendererData | HintRendererData;
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-type RendererDataTree = Tree;
-
-/**
- * TODO(somewhatabstract, JIRA-XXXX):
- * Some usage of this type somewhere is causing TypeScript to believe that these
- * elements should be components. Don't know where that is, to fix it up
- * properly. In reality, these types are just too hard to use and aren't
- * really helping us out as I now have to suppress this rather than
- * get value from the type. :(
- */
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-type RendererTree = Tree;
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-type ScoreTree = Tree;
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-type SerializedStateTree = Tree;
-
-type Props = {
- item: Item;
- shape: Shape;
- children: (tree: {renderers: RendererTree}) => React.ReactElement;
- serializedState?: SerializedStateTree | null | undefined;
- onSerializedStateUpdated?: (state: SerializedStateTree) => void;
- onInteractWithWidget?: (id: string) => void;
- apiOptions?: APIOptions;
- reviewMode?: boolean | null | undefined;
-
- dependencies: PerseusDependenciesV2;
-};
-type State = {
- // We cache functions to generate renderers and refs in `rendererDataTree`,
- // and change them every time content changes. This isn't just a performance
- // optimization; see `_makeContentRendererData` for more discussion.
- rendererDataTree: RendererDataTree | null | undefined;
- // But, if traversing the tree fails, we store the Error in `renderError`.
- renderError: Error | null | undefined;
-};
-
-class MultiRenderer extends React.Component {
- static contextType = PerseusI18nContext;
- declare context: React.ContextType;
-
- rendererDataTreeMapper: TreeMapper<
- ContentNode,
- ContentRendererData,
- HintNode,
- HintRendererData,
- TagsNode,
- null
- >;
- getRenderersMapper: TreeMapper<
- ContentRendererData,
- ContentRendererElement,
- HintRendererData,
- HintRendererElement,
- null,
- null
- >;
-
- constructor(props: Props) {
- super(props);
-
- this.rendererDataTreeMapper = buildMapper()
- // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ContentNode'.
- .setContentMapper((c, _, p) => this._makeContentRendererData(c, p))
- // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'HintNode'.
- .setHintMapper((h) => this._makeHintRendererData(h))
- .setTagsMapper((t) => null);
-
- // @ts-expect-error - TS2322 - Type 'TreeMapperForLeavesAndCollections' is not assignable to type 'TreeMapper'.
- this.getRenderersMapper = buildMapper()
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setContentMapper((c) => c.makeRenderer())
- // @ts-expect-error - TS2571 - Object is of type 'unknown'.
- .setHintMapper((h) => h.makeRenderer())
- .setArrayMapper((renderers, data, shape) =>
- this._annotateRendererArray(
- renderers as any,
- data as any,
- shape,
- ),
- );
-
- // Keep state in sync with props.
- this.state = this._tryMakeRendererState(this.props);
- }
-
- UNSAFE_componentWillReceiveProps(nextProps: Props) {
- // Keep state in sync with props.
- if (nextProps.item !== this.props.item) {
- this.setState(this._tryMakeRendererState(nextProps));
- }
- }
-
- /**
- * Attempt to build a State that includes a renderer tree corresponding to
- * the item provided in props. On error, return a state with `renderError`
- * set instead.
- */
- _tryMakeRendererState(props: Props): State {
- try {
- return {
- rendererDataTree: this._makeRendererDataTree(
- props.item,
- props.shape,
- ),
- renderError: null,
- };
- } catch (e: any) {
- Log.error("Error building tree state", Errors.Internal, {
- cause: e,
- });
- return {
- rendererDataTree: null,
- renderError: e,
- };
- }
- }
-
- _handleSerializedStateUpdated: (path: Path, newState?: any) => void = (
- path,
- newState,
- ) => {
- const {onSerializedStateUpdated} = this.props;
-
- if (onSerializedStateUpdated) {
- const oldState = this._getSerializedState(
- this.props.serializedState,
- );
- onSerializedStateUpdated(
- lens(oldState).set(path, newState).freeze(),
- );
- }
- };
-
- /**
- * Props that aren't directly used by the MultiRenderer are delegated to
- * the underlying Renderers.
- */
- _getRendererProps(): RendererProps {
- // `item`, `children`, and others are unused. I'm
- // explicitly pulling them out of `this.props` so I don't pass them to
- // ``. I'm not sure how else to do this.
- const {
- item: _,
- children: __,
- shape: ___,
- serializedState: ____,
- onSerializedStateUpdated: _____,
- ...otherProps
- } = this.props;
- return {
- ...otherProps,
- strings: this.context.strings,
- };
- }
-
- /**
- * Construct a Renderer and a ref placeholder for the given ContentNode.
- */
- _makeContentRendererData(
- content: ContentNode,
- path: Path,
- ): ContentRendererData {
- // NOTE(emily): The `findExternalWidgets` function here is computed
- // inline and thus changes each time we run this function. If it
- // were to change every render, it would cause the Renderer to
- // re-render a lot more than is necessary. Don't re-compute this
- // element unless it is necessary!
- // HACK(mdr): TypeScript can't prove that this is a ContentRendererData,
- // because of how we awkwardly construct it in order to obtain a
- // circular reference. But it is, I promise.
- const data: any = {ref: null, makeRenderer: null};
-
- const refFunc = (e: any) => (data.ref = e);
- const findExternalWidgets = (criterion: any) =>
- this._findWidgets(data, criterion);
- const handleSerializedState = (state: any) =>
- this._handleSerializedStateUpdated(path, state);
-
- data.makeRenderer = () => (
- /**
- * TODO(somewhatabstract, JIRA-XXXX):
- * `content` contains props that Renderer doesn't have. However,
- * since the type for `content` is not exact, it's hard to know
- * if this spread is including undocumented props so mapping
- * one to one could introduce a bug. Need to work out the exact
- * type for ContentNode and then fix this.
- */ // @ts-expect-error - TS2322 - Type '{ ref: (e: any) => any; findExternalWidgets: (criterion: any) => readonly (Widget | null | undefined)[]; serializedState: any; onSerializedStateUpdated: (state: any) => void; __type: "content" | "item"; ... 9 more ...; reviewMode?: boolean | ... 1 more ... | undefined; }' is not assignable to type 'InexactPartial & Readonly<{ children?: ReactNode; }>, "content" | "images" | "onRender" | "linterContext" | "widgets" | "alwaysUpdate" | ... 6 more ... | "serializedState">>'.
- {
- const results: Array = [];
-
- this._mapRenderers((data) => {
- if (callingData !== data && data.ref) {
- results.push(...data.ref.findInternalWidgets(filterCriterion));
- }
- });
-
- return results;
- }
-
- /**
- * Copy the renderer tree, apply the given transformation to the leaf nodes
- * and the optional given transformation to the array nodes, and return the
- * result.
- *
- * Used to provide structured data to the call site (the Renderer tree on
- * `render`, the Score tree on `getScores`, etc.), and to traverse the
- * renderer tree even when we disregard the output (like in
- * `_findWidgets`).
- */
- _mapRenderers(
- // eslint-disable-next-line no-restricted-syntax
- leafMapper: ContentMapper &
- HintMapper,
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
- ): Tree | null | undefined {
- const {rendererDataTree} = this.state;
-
- if (!rendererDataTree) {
- return null;
- }
-
- const mapper = buildMapper()
- .setContentMapper(leafMapper)
- .setHintMapper(leafMapper);
- return mapper.mapTree(rendererDataTree, this.props.shape);
- }
-
- _scoreFromRef(ref?: Renderer | null): Score {
- if (!ref) {
- return null;
- }
-
- const [guess, score] = ref.guessAndScore();
- let state;
- if (ref.getSerializedState) {
- state = ref.getSerializedState();
- }
- return keScoreFromPerseusScore(score, guess, state);
- }
-
- /**
- * Return a tree in the shape of the multi-item, with scores at each of
- * the content nodes and `null` at the other leaf nodes.
- */
- getScores(): ScoreTree {
- return this._mapRenderers((data) => this._scoreFromRef(data.ref));
- }
-
- /**
- * Return a single composite score for all rendered content nodes.
- * The `guess` is a tree in the shape of the multi-item, with an individual
- * guess at each content node and `null` at the other leaf nodes.
- */
- score(): Score {
- const scores: Array = [];
- const state: Array<
- | any
- | {
- [id: string]: any;
- }
- > = [];
- const guess = this._mapRenderers((data) => {
- if (!data.ref) {
- return null;
- }
-
- if (data.ref.getSerializedState) {
- state.push(data.ref.getSerializedState());
- }
-
- scores.push(data.ref.score());
- return data.ref?.getUserInput();
- });
-
- const combinedScore = scores.reduce(combineScores);
-
- return keScoreFromPerseusScore(combinedScore, guess, state);
- }
-
- /**
- * Return a tree in the shape of the multi-item, with serialized state at
- * each of the content nodes and `null` at the other leaf nodes.
- *
- * If the lastSerializedState argument is supplied, this function will fill
- * in the state of not-currently-rendered content and hint nodes with the
- * values from the previous serialized state. If no lastSerializedState is
- * supplied, `null` will be returned for not-currently-rendered content and
- * hint nodes.
- */
- _getSerializedState(
- lastSerializedState?: SerializedStateTree,
- ): SerializedStateTree {
- return this._mapRenderers((data, _, path) => {
- if (data.ref) {
- return data.ref.getSerializedState();
- }
- if (lastSerializedState) {
- return lens(lastSerializedState).get(path);
- }
- return null;
- });
- }
-
- /**
- * Given a tree in the shape of the multi-item, with serialized state at
- * each of the content nodes, restore each state to the corresponding
- * renderer if currently mounted.
- */
- restoreSerializedState(
- serializedState: SerializedState,
- callback?: () => any,
- ) {
- // We want to call our async callback only once all of the childrens'
- // callbacks have run. We add one to this counter before we call out to
- // each renderer and decrement it when it runs our callback.
- let numCallbacks = 0;
- const countCallback = () => {
- numCallbacks--;
- if (callback && numCallbacks === 0) {
- callback();
- }
- };
-
- this._mapRenderers((data, _, path) => {
- if (!data.ref) {
- return;
- }
-
- const state = lens(serializedState).get(path);
- if (!state) {
- return;
- }
-
- numCallbacks++;
- data.ref?.restoreSerializedState(state, countCallback);
- });
- }
-
- /**
- * Given an array of renderers, if it happens to be an array of *hint*
- * renderers, then attach a `firstN` method to the array, which allows the
- * layout to render the hints together in one HintsRenderer.
- */
- _annotateRendererArray(
- renderers: ReadonlyArray,
- rendererDatas: ReadonlyArray,
- shape: ArrayShape,
- ): ReadonlyArray {
- if (shape.elementShape.type === "hint") {
- // The shape says that these are HintRendererDatas, even though
- // it's not provable at compile time, so perform a cast.
- const hintRendererDatas: ReadonlyArray =
- rendererDatas as any;
-
- renderers = [...renderers];
- (renderers as any).firstN = (n: any) => (
- d.hint)}
- hintsVisible={n}
- />
- );
- }
- return renderers;
- }
-
- /**
- * Return a tree in the shape of the multi-item, with a Renderer at each
- * content node and a HintRenderer at each hint node.
- *
- * This is generated by running each of the `makeRenderer` functions at the
- * leaf nodes.
- */
- _getRenderers(): RendererTree {
- return this.getRenderersMapper.mapTree(
- this.state.rendererDataTree,
- this.props.shape,
- );
- }
-
- render(): React.ReactNode {
- if (this.state.renderError) {
- return (
-
- {this.context.strings.errorRendering({
- error: String(this.state.renderError),
- })}
-
- );
- }
-
- // Pass the renderer tree to the `children` function, which will
- // determine the actual content of this component.
- return (
-
- {this.props.children({
- renderers: this._getRenderers(),
- })}
-
- );
- }
-}
-
-const styles = StyleSheet.create({
- error: {
- color: "red",
- },
-});
-
-export default MultiRenderer;
diff --git a/packages/perseus/src/multi-items/prop-type-builders.ts b/packages/perseus/src/multi-items/prop-type-builders.ts
deleted file mode 100644
index 397eba865c..0000000000
--- a/packages/perseus/src/multi-items/prop-type-builders.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Utility functions to build React PropTypes for multi-items and shapes.
- *
- * If you're writing new components, though, consider using the Item and Shape
- * types instead.
- */
-/* instanbul ignore file */
-
-import {Errors, PerseusError} from "@khanacademy/perseus-core";
-import PropTypes from "prop-types";
-
-import type {Shape} from "./shape-types";
-
-/**
- * Return a PropType that accepts Items of the given shape, and rejects other
- * objects.
- *
- * Usage: `propTypes: {item: buildPropTypeForShape(myShape)}`
- */
-export function buildPropTypeForShape(shape: Shape): any {
- return PropTypes.oneOfType([
- PropTypes.shape({
- _multi: buildTreePropTypeForShape(shape),
- }),
- PropTypes.oneOf([null, undefined]),
- ]);
-}
-
-/**
- * Return a PropType that accepts ItemTrees of the given shape, and rejects
- * other objects.
- */
-function buildTreePropTypeForShape(shape: Shape): any {
- if (shape.type === "content") {
- return PropTypes.shape({
- // TODO(mdr): Remove #LegacyContentNode support.
- __type: PropTypes.oneOf(["content", "item"]).isRequired,
- content: PropTypes.string,
- images: PropTypes.objectOf(PropTypes.any),
- widgets: PropTypes.objectOf(PropTypes.any),
- });
- }
- if (shape.type === "hint") {
- return PropTypes.shape({
- __type: PropTypes.oneOf(["hint"]).isRequired,
- content: PropTypes.string,
- images: PropTypes.objectOf(PropTypes.any),
- widgets: PropTypes.objectOf(PropTypes.any),
- replace: PropTypes.bool,
- });
- }
- if (shape.type === "tags") {
- return PropTypes.arrayOf(PropTypes.string.isRequired);
- }
- if (shape.type === "array") {
- const elementPropType = buildTreePropTypeForShape(shape.elementShape);
- return PropTypes.arrayOf(elementPropType.isRequired);
- }
- if (shape.type === "object") {
- const valueShapes = shape.shape;
- const propTypeShape: Record = {};
- Object.keys(valueShapes).forEach((key) => {
- propTypeShape[key] = buildTreePropTypeForShape(
- valueShapes[key],
- ).isRequired;
- });
- return PropTypes.shape(propTypeShape);
- }
- throw new PerseusError(
- // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
- `unexpected shape type ${shape.type}`,
- Errors.InvalidInput,
- );
-}
diff --git a/packages/perseus/src/multi-items/shape-types.ts b/packages/perseus/src/multi-items/shape-types.ts
deleted file mode 100644
index 4ffa67f5f3..0000000000
--- a/packages/perseus/src/multi-items/shape-types.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Type definitions for multi-item shapes.
- *
- * A shape is an object that serves as a runtime type declaration: it specifies
- * a tree structure for a particular class of multi-item.
- *
- * We use shapes instead static compile-time typing because the CMS needs to
- * understand the shape of our content library's multi-items at runtime, and
- * it's not always possible to infer the full shape from an example multi-item.
- *
- * Shapes also enable us to traverse a multi-item-shaped tree with confidence,
- * even when we can't infer the shape from the tree alone.
- *
- * We *could* go all-in on a more general library to make certain types
- * runtime-inspectable, in order to DRY some things up, but that's probably a
- * big ol' infrastructural magic mess, and the narrower scope of Shapes makes
- * it easier to be confident that we've covered all cases rather than having to
- * deal with all possible Javascript types.
- */
-export type ContentShape = {
- type: "content";
-};
-export type HintShape = {
- type: "hint";
-};
-export type TagsShape = {
- type: "tags";
-};
-export type ArrayShape = {
- type: "array";
- /**
- * Each element of an ArrayNode has the same shape, which is specified by
- * the `elementShape` property.
- */
- elementShape: Shape;
-};
-export type ObjectShape = {
- type: "object";
- /**
- * Each property of an ObjectNode has its own shape, which is specified
- * under the corresponding key in the `shape` property.
- */
- shape: {
- [k: string]: Shape;
- };
-};
-export type Shape =
- | ContentShape
- | HintShape
- | TagsShape
- | ArrayShape
- | ObjectShape;
diff --git a/packages/perseus/src/multi-items/shapes.ts b/packages/perseus/src/multi-items/shapes.ts
deleted file mode 100644
index 6f70a87b36..0000000000
--- a/packages/perseus/src/multi-items/shapes.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Utility functions for constructing and inferring multi-item shapes.
- *
- * A shape is an object that serves as a runtime type declaration: it specifies
- * a tree structure for a particular class of multi-item. See shape-types.js
- * for further discussion.
- *
- * This module allows you to construct arbitrary Shape trees, by combining
- * leaf node shapes like `content` and `hint` into composite shapes like
- * `arrayOf(shape({foo: content, bar: hint}))`.
- */
-import type {
- Shape,
- ContentShape,
- HintShape,
- TagsShape,
- ArrayShape,
- ObjectShape,
-} from "./shape-types";
-
-/**
- * These tools allow you to construct arbirtary shapes, by combining simple
- * leaf shapes like `content` and `hint` into composite shapes like
- * `arrayOf(shape({question: content, hints: arrayOf(hint)}))`.
- */
-const contentShape: ContentShape = {
- type: "content",
-};
-const hintShape: HintShape = {
- type: "hint",
-};
-const tagsShape: TagsShape = {
- type: "tags",
-};
-const buildArrayShape = (elementShape: Shape): ArrayShape => ({
- type: "array",
- elementShape,
-});
-const buildObjectShape = (shape: {[k: string]: Shape}): ObjectShape => ({
- type: "object",
- shape,
-});
-const hintsShape: ArrayShape = buildArrayShape(hintShape);
-
-export default {
- content: contentShape,
- hint: hintShape,
- hints: hintsShape,
- tags: tagsShape,
- arrayOf: buildArrayShape,
- shape: buildObjectShape,
-};
diff --git a/packages/perseus/src/multi-items/tree-types.ts b/packages/perseus/src/multi-items/tree-types.ts
deleted file mode 100644
index f4df0c6fb9..0000000000
--- a/packages/perseus/src/multi-items/tree-types.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Type definitions for generic trees that are shaped like multi-items.
- *
- * Multi-items are trees! But we also often have other trees that are shaped
- * like multi-items - for example, if we map a multi-item tree into a tree of
- * renderer info and state, and then map that again into a tree of just the
- * renderer nodes, like we do in MultiRenderer.
- *
- * Therefore, we provide the type Tree, which represents a tree that's
- * shaped like a multi-item, but the data that lives at each type of leaf could
- * be anything.
- *
- * So, in a Tree, content leaf nodes have type C, and hint leaf nodes
- * have type H. An ItemTree is a Tree.
- *
- * That is, we still preserve the distinction between node types, and thereby
- * enforce the Tree's adherence to some multi-item Shape, but we're flexible
- * about exactly what type of data the tree contains at its leaves.
- *
- * This enables us to write generic tree-traversal and tree-mapping functions,
- * as you'll see in trees.js.
- */
-
-// TODO(jeremy): We lost "arrayness" in D69450. It'd be nice to restore that
-// because right now ArrayNode doesn't add anything.
-// @ts-expect-error - TS2456 - Type alias 'ArrayNode' circularly references itself. | TS2315 - Type 'Tree' is not generic.
-export type ArrayNode = Tree;
-export type ObjectNode = {
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
- [k: string]: Tree;
-};
-
-/**
- * TODO(somewhatabstract, JIRA-XXXX):
- * We should ditch this type or create some helpers for working with it.
- * As it stands, consumers have to check each node's type before using it
- * in order to ensure that TypeScript can track its refinement and appropriate use.
- * It's messy.
- */
-// @ts-expect-error - TS2456 - Type alias 'Tree' circularly references itself. | TS2315 - Type 'ArrayNode' is not generic.
-export type Tree =
- | C
- | H
- | T
- // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
- | ArrayNode
- | ObjectNode;
diff --git a/packages/perseus/src/multi-items/trees.ts b/packages/perseus/src/multi-items/trees.ts
deleted file mode 100644
index 6ef124139c..0000000000
--- a/packages/perseus/src/multi-items/trees.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-/**
- * Utility functions for manipulating multi-item-shaped trees.
- *
- * Multi-items are trees! But we also often have other trees that are shaped
- * like multi-items - for example, if we map a multi-item tree into a tree of
- * renderer info and state, and then map that again into a tree of just the
- * renderer nodes, like we do in MultiRenderer. See tree-types.js for further
- * discussion.
- *
- * These functions enable us to manipulate generic multi-item-shaped trees,
- * regardless of what type of data they contain at their leaves. You can use
- * the mapper functions to transform a tree into another tree of the same
- * shape, or to discover all the nodes of a particular type.
- *
- * We expose two simple mapper functions (mapContentNodes and mapHintNodes),
- * and also a more complex interface for creating a mapping over all of a
- * tree's node types simultaneously:
- *
- * `buildMapper()` returns a TreeMapper object that allows you to build your
- * mapper object one node type at a time. Then, you can execute your mapping by
- * calling the `mapTree` method.
- *
- * For example:
- * const renderers = buildMapper()
- * .setContentMapper(this.renderContentNode)
- * .setHintMapper(this.renderHintNode)
- * .setTagsMapper(this.renderTagsNode)
- * .setArrayMapper(this.hideSkippedQuestions)
- * .mapTree(tree, shape);
- *
- * This will copy the given tree, apply the given transformations to the
- * content, hint, and array nodes respectively, and return the resulting tree.
- *
- * For node types whose mappers aren't specified, we default to the identity
- * function. (This builder interface enables us to implement that default
- * behavior in a provably type-safe way, while not requiring the call site to
- * be aware of all the node types. Hooray!)
- *
- * The call to `setArrayMapper` must come last, because the array mapper's
- * argument types depend on the other mappers' types. See ArrayMapper for more
- * details.
- *
- * WARNING: These functions trust that the provided tree conforms to the
- * provided shape. If not, behavior is undefined and may not respect the type
- * signatures specified here.
- */
-
-import {Errors, PerseusError} from "@khanacademy/perseus-core";
-
-import type {
- Shape,
- ContentShape,
- HintShape,
- TagsShape,
- ArrayShape,
-} from "./shape-types";
-import type {Tree, ArrayNode, ObjectNode} from "./tree-types";
-
-/**
- * The sequence of edges that lead to a particular node in a Tree.
- * Elements can be `string` to correspond to an ObjectNode key, or `number` to
- * correspond to an ArrayNode index.
- */
-export type Path = ReadonlyArray;
-
-/**
- * These are function interfaces for mapping over various types of tree nodes.
- *
- * ArrayMapper is a bit more complicated than the leaf node mappers. It's
- * executed in the context of a `mapTree` call, after we've finished mapping
- * its child nodes, so the function has access to both the resulting array
- * (with mapped elements) and the original array (with the original untouched
- * elements).
- *
- * The ArrayMapper then has the opportunity to apply a final transformation to
- * the resulting array, like filtering certain elements or (in the hacky
- * MultiRenderer case) attaching a `renderHints` method to arrays of hint
- * renderers :)
- *
- * This is why `TreeMapper#setArrayMapper` must be called last: ArrayMapper's
- * types depend on the ContentMapper and HintMapper's types. And, since you can
- * only specify one mapper at a time in this builder interface (which is
- * necessary to provide default mappers in a type-safe way), you need your
- * dependencies to already be in place by the time you call `setArrayMapper`.
- * Otherwise, we'd have to set the ArrayMapper and *hope* that you *eventually*
- * provide a compatible ContentMapper and HintMapper, which is difficult to
- * prove at compile time.
- *
- * There's no ObjectMapper here, but not for any particular reason. We just
- * don't have a use case for it yet, so we haven't built it yet.
- */
-export type ContentMapper = (
- content: CI,
- shape: ContentShape,
- path: Path,
-) => CO;
-export type HintMapper = (hint: HI, shape: HintShape, path: Path) => HO;
-export type TagsMapper = (tag: TI, shape: TagsShape, path: Path) => TO;
-export type ArrayMapper = (
- // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
- mappedArray: ArrayNode,
- // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
- originalArray: ArrayNode,
- shape: ArrayShape,
- path: Path,
- // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
-) => ArrayNode;
-
-/**
- * A TreeMapper is a collection of node mappers, which, together, compose the
- * behavior for mapping over an entire tree.
- *
- * This serves as the interface for the two TreeMapper classes, including both
- * the internal mapper properties that we care about, and the `mapTree`
- * function that the call site will use.
- */
-export interface TreeMapper {
- content: ContentMapper;
- hint: HintMapper;
- tags: TagsMapper;
- array: ArrayMapper;
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
- mapTree(tree: Tree, shape: Shape): Tree;
-}
-
-/**
- * This is a TreeMapper that only has mappers specified for its leaf nodes; its
- * array mapper is the identity function.
- *
- * This is the TreeMapper initially returned by `buildMapper`. It allows you to
- * change the types of your ContentMapper and HintMapper, which is safe because
- * none of the other mappers that depend on those types (aka ArrayMapper) have
- * been specified yet. (Or, more specifically, the ArrayMapper is currently
- * `identity`, which can trivially vary with the ContentMapper and HintMapper's
- * types.)
- *
- * Once you call `setArrayMapper`, however, we move to the other class:
- * TreeMapperForLeavesAndCollections.
- */
-class TreeMapperJustForLeaves {
- content: ContentMapper;
- hint: HintMapper;
- tags: TagsMapper;
- array: ArrayMapper;
-
- constructor(
- content: ContentMapper,
- hint: HintMapper,
- tags: TagsMapper,
- ) {
- this.content = content;
- this.hint = hint;
- this.tags = tags;
- this.array = identity;
- }
-
- setContentMapper(
- newContentMapper: ContentMapper,
- ): TreeMapperJustForLeaves {
- return new TreeMapperJustForLeaves(
- newContentMapper,
- this.hint,
- this.tags,
- );
- }
-
- setHintMapper(
- newHintMapper: HintMapper,
- ): TreeMapperJustForLeaves {
- return new TreeMapperJustForLeaves(
- this.content,
- newHintMapper,
- this.tags,
- );
- }
-
- setTagsMapper(
- newTagsMapper: TagsMapper,
- ): TreeMapperJustForLeaves {
- return new TreeMapperJustForLeaves(
- this.content,
- this.hint,
- newTagsMapper,
- );
- }
-
- setArrayMapper(
- newArrayMapper: ArrayMapper,
- ): TreeMapperForLeavesAndCollections {
- return new TreeMapperForLeavesAndCollections(
- this.content,
- this.hint,
- this.tags,
- newArrayMapper,
- );
- }
-
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
- mapTree(tree: Tree, shape: Shape): Tree {
- return mapTree(tree, shape, [], this);
- }
-}
-
-/**
- * This is a TreeMapper that already has an ArrayMapper specified, so its
- * ContentMapper and HintMapper are now locked in.
- */
-class TreeMapperForLeavesAndCollections {
- content: ContentMapper;
- hint: HintMapper;
- tags: TagsMapper;
- array: ArrayMapper;
-
- constructor(
- content: ContentMapper,
- hint: HintMapper,
- tags: TagsMapper,
- array: ArrayMapper,
- ) {
- this.content = content;
- this.hint = hint;
- this.tags = tags;
- this.array = array;
- }
-
- setArrayMapper(
- newArrayMapper: ArrayMapper,
- ): TreeMapperForLeavesAndCollections {
- return new TreeMapperForLeavesAndCollections(
- this.content,
- this.hint,
- this.tags,
- newArrayMapper,
- );
- }
-
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
- mapTree(tree: Tree, shape: Shape): Tree {
- return mapTree(tree, shape, [], this);
- }
-}
-
-function identity(x: T): T {
- return x;
-}
-
-/**
- * Return a new TreeMapper that will perform a no-op transformation on an input
- * tree. To make it useful, chain any combination of `setContentMapper`,
- * `setHintMapper`, `setTagMapper`, and `setArrayMapper` to specify
- * transformations for the individual node types.
- */
-// @ts-expect-error - TS2300 - Duplicate identifier 'C'. | TS2300 - Duplicate identifier 'H'. | TS2300 - Duplicate identifier 'T'.
-export function buildMapper(): TreeMapperJustForLeaves<
- C,
- C,
- H,
- H,
- T,
- T
-> {
- return new TreeMapperJustForLeaves(identity, identity, identity);
-}
-
-/**
- * Copy the given tree, apply the corresponding transformation specified in the
- * TreeMapper to each node, and return the resulting tree.
- */
-function mapTree(
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
- tree: Tree,
- shape: Shape,
- path: Path,
- mappers: TreeMapper,
- // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-): Tree {
- // We trust the shape of the multi-item to match the shape provided at
- // runtime. Therefore, in each shape branch, we cast the node to `any` and
- // reinterpret it as the expected node type.
- if (shape.type === "content") {
- const content: CI = tree as any;
- return mappers.content(content, shape, path);
- }
- if (shape.type === "hint") {
- const hint: HI = tree as any;
- return mappers.hint(hint, shape, path);
- }
- if (shape.type === "tags") {
- const tags: TI = tree as any;
- return mappers.tags(tags, shape, path);
- }
- if (shape.type === "array") {
- // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
- const array: ArrayNode = tree as any;
-
- if (!Array.isArray(array)) {
- throw new PerseusError(
- `Invalid object of type "${typeof array}" found at path ` +
- // @ts-expect-error - TS2769 - No overload matches this call.
- `${[""].concat(path).join(".")}. Expected array.`,
- Errors.Internal,
- );
- }
-
- const elementShape = shape.elementShape;
- // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
- const mappedElements: ArrayNode = array.map((inner, i) =>
- mapTree(inner, elementShape, path.concat(i), mappers),
- );
- return mappers.array(mappedElements, array, shape, path);
- }
- if (shape.type === "object") {
- const object: ObjectNode = tree as any;
-
- if (object && typeof object !== "object") {
- throw new PerseusError(
- `Invalid object of type "${typeof object}" found at ` +
- // @ts-expect-error - TS2769 - No overload matches this call.
- `path ${[""].concat(path).join(".")}. Expected ` +
- `"object" type.`,
- Errors.InvalidInput,
- );
- }
-
- const valueShapes = shape.shape;
- if (!valueShapes) {
- throw new PerseusError(
- `Unexpected shape ${JSON.stringify(shape)} at path ` +
- // @ts-expect-error - TS2769 - No overload matches this call.
- `${[""].concat(path).join(".")}.`,
- Errors.InvalidInput,
- );
- }
- const newObject: Record = {};
- Object.keys(valueShapes).forEach((key) => {
- if (!(key in object)) {
- throw new PerseusError(
- `Key "${key}" is missing from shape at path ` +
- // @ts-expect-error - TS2769 - No overload matches this call.
- `${[""].concat(path).join(".")}.`,
- Errors.InvalidInput,
- );
- }
-
- newObject[key] = mapTree(
- object[key],
- valueShapes[key],
- path.concat(key),
- mappers,
- );
- });
- return newObject;
- }
- throw new PerseusError(
- // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
- `unexpected shape type ${shape.type}`,
- Errors.InvalidInput,
- );
-}
diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
index d6b73bc3c3..630ef58abc 100644
--- a/packages/perseus/src/perseus-types.ts
+++ b/packages/perseus/src/perseus-types.ts
@@ -1,14 +1,40 @@
-// TODO(FEI-4010): Remove `Perseus` prefix for all types here
-// TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
+/**
+ * The Perseus "data schema" file.
+ *
+ * This file, and the types in it, represents the "data schema" that Perseus
+ * uses. The @khanacademy/perseus-editor package edits and produces objects
+ * that conform to the types in this file. Similarly, the top-level renderers
+ * in @khanacademy/perseus, consume objects that conform to these types.
+ *
+ * WARNING: This file should not import any types from elsewhere so that it is
+ * easy to reason about changes that alter the Perseus schema. This helps
+ * ensure that it is not changed accidentally when upgrading a dependant
+ * package or other part of Perseus code. Note that TypeScript does type
+ * checking via something called "structural typing". This means that as long
+ * as the shape of a type matches, the name it goes by doesn't matter. As a
+ * result, a `Coord` type that looks like this `[x: number, y: number]` is
+ * _identical_, in TypeScript's eyes, to this `Vector2` type `[x: number, y:
+ * number]`. Also, with tuples, the labels for each entry is ignored, so `[x:
+ * number, y: number]` is compatible with `[min: number, max: number]`. The
+ * labels are for humans, not TypeScript. :)
+ *
+ * If you make changes to types in this file, be very sure that:
+ *
+ * a) the changes are backwards compatible. If they are not, old data from
+ * previous versions of the "schema" could become unrenderable, or worse,
+ * introduce hard-to-diagnose bugs.
+ * b) the parsing code (`util/parse-perseus-json/`) is updated to handle
+ * the new format _as well as_ the old format.
+ */
-import type {Coord} from "./interactive2/types";
-import type {Interval, vec} from "mafs";
+// TODO(FEI-4010): Remove `Perseus` prefix for all types here
-// Range is replaced within this file with Interval, but it is used elsewhere
-// and exported from the package, so we need to keep it around.
+export type Coord = [x: number, y: number];
+export type Interval = [min: number, max: number];
+export type Vector2 = Coord; // Same name as Mafs
export type Range = Interval;
-export type Size = [number, number];
-export type CollinearTuple = [vec.Vector2, vec.Vector2];
+export type Size = [width: number, height: number];
+export type CollinearTuple = [Vector2, Vector2];
export type ShowSolutions = "all" | "selected" | "none";
/**
@@ -140,19 +166,6 @@ export type PerseusItem = {
*/
export type PerseusArticle = PerseusRenderer | ReadonlyArray;
-/**
- * A "MultiItem" is an advanced Perseus item. It is rendered by the
- * `MultiRenderer` and you can control the layout of individual parts of the
- * item.
- *
- * @deprecated MultiItem support is slated for removal in a future Perseus
- * release.
- */
-export type MultiItem = {
- // Multi-item should only show up in Test Prep content and it is a variant of a PerseusItem
- _multi: any;
-};
-
export type Version = {
// The major part of the version
major: number;
diff --git a/packages/perseus/src/renderability.ts b/packages/perseus/src/renderability.ts
index 2cda9a0b22..910eaeba22 100644
--- a/packages/perseus/src/renderability.ts
+++ b/packages/perseus/src/renderability.ts
@@ -11,14 +11,11 @@
import {Errors, PerseusError} from "@khanacademy/perseus-core";
import _ from "underscore";
-import MultiItems from "./multi-items";
import {traverse} from "./traversal";
import * as Widgets from "./widgets";
import type {PerseusWidget} from "./perseus-types";
-const {findContentNodesInItem, inferItemShape} = MultiItems;
-
const isUpgradedWidgetInfoRenderableBy = function (
widgetInfo: PerseusWidget,
widgetRendererVersion: any,
@@ -86,21 +83,6 @@ export const isItemRenderableByVersion = function (
Errors.InvalidInput,
);
}
- if (itemData._multi) {
- const shape = inferItemShape(itemData);
-
- let isRenderable = true;
- findContentNodesInItem(itemData, shape, (node) => {
- const nodeIsRenderable = isRendererContentRenderableBy(
- node,
- rendererContentVersion,
- );
- if (!nodeIsRenderable) {
- isRenderable = false;
- }
- });
- return isRenderable;
- }
return isRendererContentRenderableBy(
itemData.question,
rendererContentVersion,
diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
index 7ba9d2d385..e686ea0a00 100644
--- a/packages/perseus/src/types.ts
+++ b/packages/perseus/src/types.ts
@@ -1,5 +1,4 @@
import type {ILogger} from "./logging/log";
-import type {Item} from "./multi-items/item-types";
import type {
Hint,
PerseusAnswerArea,
@@ -138,8 +137,6 @@ export type ChangeHandler = (
question?: any;
answerArea?: PerseusAnswerArea | null;
itemDataVersion?: Version;
- // used in MutirenderEditor
- item?: Item;
editorMode?: EditorMode;
jsonMode?: boolean;
// perseus-all-package/widgets/unit.jsx
diff --git a/packages/perseus/src/util/parse-perseus-json/regression-tests/__snapshots__/parse-perseus-json-snapshot.test.ts.snap b/packages/perseus/src/util/parse-perseus-json/regression-tests/__snapshots__/parse-perseus-json-snapshot.test.ts.snap
index ec368c0e50..55689676e2 100644
--- a/packages/perseus/src/util/parse-perseus-json/regression-tests/__snapshots__/parse-perseus-json-snapshot.test.ts.snap
+++ b/packages/perseus/src/util/parse-perseus-json/regression-tests/__snapshots__/parse-perseus-json-snapshot.test.ts.snap
@@ -1608,34 +1608,6 @@ exports[`parseAndTypecheckPerseusItem correctly parses data/interactive-graph-wi
}
`;
-exports[`parseAndTypecheckPerseusItem correctly parses data/item-missing-answerArea.json 1`] = `
-{
- "_multi": {
- "blurb": {
- "__type": "content",
- "content": "",
- "images": {},
- "widgets": {},
- },
- "hints": [],
- "question": {
- "__type": "content",
- "content": "",
- "widgets": {},
- },
- },
- "answer": undefined,
- "answerArea": {},
- "hints": [],
- "itemDataVersion": undefined,
- "question": {
- "content": "",
- "images": {},
- "widgets": {},
- },
-}
-`;
-
exports[`parseAndTypecheckPerseusItem correctly parses data/matrix-missing-version.json 1`] = `
{
"answer": undefined,
diff --git a/packages/perseus/src/util/parse-perseus-json/regression-tests/data/item-missing-answerArea.json b/packages/perseus/src/util/parse-perseus-json/regression-tests/data/item-missing-answerArea.json
deleted file mode 100644
index 41e1dbc06a..0000000000
--- a/packages/perseus/src/util/parse-perseus-json/regression-tests/data/item-missing-answerArea.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "_multi": {
- "blurb": {
- "__type": "content",
- "content": "",
- "images": {},
- "widgets": {}
- },
- "hints": [],
- "question": {
- "__type": "content",
- "content": "",
- "widgets": {}
- }
- }
-}
diff --git a/packages/perseus/src/widget-type-utils.ts b/packages/perseus/src/widget-type-utils.ts
index 3cc315ab7f..6bac814b6d 100644
--- a/packages/perseus/src/widget-type-utils.ts
+++ b/packages/perseus/src/widget-type-utils.ts
@@ -116,8 +116,6 @@ export function getWidgetFromWidgetMap(
/**
* Get select widgets from a widget map.
- * Useful for multi-items that needs to split
- * one PerseusItem into several
*
* @param {ReadonlyArray} widgetIds to extract
* @param {PerseusWidgetsMap} widgetMap to extract from
diff --git a/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap b/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
index 915a4ac053..3b1723f09f 100644
--- a/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
+++ b/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
@@ -37,7 +37,6 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
aria-expanded="true"
aria-haspopup="listbox"
aria-label="Select an answer"
- aria-labelledby="uid-dropdown-widget-2-dropdown-label"
class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
id="uid-dropdown-widget-2-dropdown"
role="combobox"
@@ -110,7 +109,6 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Select an answer"
- aria-labelledby="uid-dropdown-widget-0-dropdown-label"
class="button_vr44p2-o_O-shared_u51dsh-o_O-default_3ie67y"
id="uid-dropdown-widget-0-dropdown"
role="combobox"
diff --git a/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx b/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx
index 6c994dad24..a2ff15c7c6 100644
--- a/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx
+++ b/packages/perseus/src/widgets/dropdown/dropdown.stories.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
import {
+ dropdownWithEmptyPlaceholder,
dropdownWithVisibleLabel,
inlineDropdownWithVisibleLabel,
question1,
@@ -29,3 +30,9 @@ export const InlineDropdownWithVisibleLabel = (
): React.ReactElement => {
return implements Widget {
key="placeholder"
value="0"
disabled
- label={this.props.placeholder}
+ label={this.props.placeholder || " "}
/>,
...this.props.choices.map((choice, i) => (
implements Widget {
{this.props.visibleLabel && (
{this.props.visibleLabel}
@@ -116,9 +116,9 @@ class Dropdown extends React.Component implements Widget {
disabled={this.props.apiOptions.readOnly}
aria-label={
this.props.ariaLabel ||
+ this.props.visibleLabel ||
this.context.strings.selectAnAnswer
}
- aria-labelledby={ids.get("dropdown-label")}
// This is currently necessary for SRs to read the labels properly.
// However, WB is working on a change to add the "combobox" role to
// all dropdowns.
diff --git a/testing/multi-item-renderer-with-debug-ui.tsx b/testing/multi-item-renderer-with-debug-ui.tsx
deleted file mode 100644
index 08ec0e9e42..0000000000
--- a/testing/multi-item-renderer-with-debug-ui.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Button from "@khanacademy/wonder-blocks-button";
-import {View} from "@khanacademy/wonder-blocks-core";
-import * as React from "react";
-
-import {MultiItems} from "../packages/perseus/src/index";
-import {simpleQuestionShape} from "../packages/perseus/src/multi-items/__testdata__/multi-renderer.testdata";
-
-import KEScoreUI from "./ke-score-ui";
-import SideBySide from "./side-by-side";
-import {storybookDependenciesV2} from "./test-dependencies";
-
-import type {Item as MultiItem} from "../packages/perseus/src/multi-items/item-types";
-import type {APIOptions} from "../packages/perseus/src/types";
-import type {KEScore} from "@khanacademy/perseus-core";
-
-type SimpleItemRenderTree = {
- blurb: React.ReactNode;
- question: React.ReactNode;
- hints: ReadonlyArray;
-};
-
-type Props = {
- simpleItem: MultiItem;
- children: (tree: {
- renderers: SimpleItemRenderTree;
- }) => React.ReactElement;
- apiOptions?: APIOptions;
-};
-
-// Renders an assessment item (aka {_multi: ...} that conforms to the
-// sample data simpleQuestionShape.
-export const MultiItemRendererWithDebugUI = ({
- children,
- simpleItem,
- apiOptions,
-}: Props): React.ReactElement => {
- // @ts-expect-error - TS2530 - Cannot find namespace 'MultiItems'.
- const ref = React.useRef(null);
- const [state, setState] = React.useState(null);
-
- return (
-
-
- {(renderers) => {
- return children(renderers);
- }}
-
-
-
-
- {
- if (!ref.current) {
- return;
- }
- setState(ref.current.score());
- }}
- >
- Check
-
-
-