Remove deprecated/unused support for examples in Renderer (keeping fo…

…r numeric-input though) (#1961)

## Summary:

While working on SSS, I came across the `examples()` function on the `Renderer` that was causing me issues (with threading client-side validation in). 

I checked and it is no longer used anywhere. Note that the `input-number` and `numeric-input` use their local `examples()` functions still to pass a set of examples to the `InputWithExamples` component, which we're keeping.

Implemented in [D2749](https://phabricator.khanacademy.org/D2749)

Issue: LEMS-2561

## Test plan:

`yarn test`
`yarn typecheck`
Checked in host webapp and the function is not used.

Author: jeremywiebe

Reviewers: jeremywiebe, handeyeco, Myranae, mark-fitzgerald

Required Reviewers:

Approved By: handeyeco

Checks: ⌛ Publish npm snapshot (ubuntu-latest, 20.x), ⌛ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⌛ Cypress (ubuntu-latest, 20.x), ⌛ Check builds for changes in size (ubuntu-latest, 20.x), ⌛ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⌛ gerald, ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1961

.changeset/orange-wombats-destroy.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": major
+---
+
+Remove deprecated/unused `examples()` function from `Renderer`

packages/perseus/src/__tests__/renderer.test.tsx

@@ -1793,72 +1793,4 @@ describe("renderer", () => {
             expect(Object.keys(json.widgets)).toEqual(widgetKeys);
         });
     });
-
-    describe("examples", () => {
-        it("should return examples if all widgets return the same examples (or null)", () => {
-            // Arrange
-            const {renderer} = renderQuestion({
-                content:
-                    "Input widget: [[\u2603 input-number 1]]\n\n" +
-                    "Dropdown widget: [[\u2603 dropdown 1]]\n\n" +
-                    "Image widget (won't have user input): [[\u2603 image 1]]\n\n" +
-                    "Another input widget: [[\u2603 input-number 2]]",
-                widgets: {
-                    "image 1": imageWidget,
-                    "input-number 1": inputNumberWidget,
-                    "input-number 2": inputNumberWidget,
-                    "dropdown 1": dropdownWidget,
-                },
-                images: {},
-            });
-
-            // Act
-            const examples = renderer.examples();
-
-            // Assert
-            expect(examples).toMatchInlineSnapshot(`
-                [
-                  "**Your answer should be** ",
-                  "an integer, like $6$",
-                  "a *proper* fraction, like $1/2$ or $6/10$",
-                  "an *improper* fraction, like $10/7$ or $14/8$",
-                  "a mixed number, like $1\\ 3/4$",
-                ]
-            `);
-        });
-
-        it("should return nothing if widgets return the different examples", () => {
-            // NOTE(jeremy): I'm unsure why we don't return examples if the
-            // examples aren't the same, but this is current functionality so
-            // I'm adding this test to verify the current behaviour.
-
-            // Arrange
-            const {renderer} = renderQuestion({
-                content:
-                    "Input widget: [[\u2603 input-number 1]]\n\n" +
-                    "Dropdown widget: [[\u2603 dropdown 1]]\n\n" +
-                    "Image widget (won't have user input): [[\u2603 image 1]]\n\n" +
-                    "Another input widget: [[\u2603 input-number 2]]",
-                widgets: {
-                    "image 1": imageWidget,
-                    "input-number 1": inputNumberWidget,
-                    "input-number 2": {
-                        ...inputNumberWidget,
-                        options: {
-                            ...inputNumberWidget.options,
-                            answerType: "percent",
-                        },
-                    },
-                    "dropdown 1": dropdownWidget,
-                },
-                images: {},
-            });
-
-            // Act
-            const examples = renderer.examples();
-
-            // Assert
-            expect(examples).toBeNull();
-        });
-    });
 });

packages/perseus/src/renderer.tsx

@@ -1751,35 +1751,6 @@ class Renderer
         return [totalGuess, totalScore];
     };
 
-    examples: () => ReadonlyArray<string> | null | undefined = () => {
-        const widgetIds = this.widgetIds;
-        const examples = widgetIds
-            .map((widgetId) => {
-                const widget = this.getWidgetInstance(widgetId);
-                return widget != null && widget.examples
-                    ? widget.examples()
-                    : null;
-            })
-            .filter(Boolean);
-
-        // no widgets with examples
-        if (!examples.length) {
-            return null;
-        }
-
-        const allEqual = _.all(examples, function (example) {
-            return _.isEqual(examples[0], example);
-        });
-
-        // some widgets have different examples
-        // TODO(alex): handle this better
-        if (!allEqual) {
-            return null;
-        }
-
-        return examples[0];
-    };
-
     // TranslationLinter callback
     handletranslationLintErrors: (lintErrors: ReadonlyArray<string>) => void = (
         lintErrors: ReadonlyArray<string>,

packages/perseus/src/types.ts

@@ -90,7 +90,6 @@ export interface Widget {
     getUserInput?: () => UserInputArray | UserInput | undefined;
 
     showRationalesForCurrentlySelectedChoices?: (options?: any) => void;
-    examples?: () => ReadonlyArray<string>;
     getPromptJSON?: () => WidgetPromptJSON;
 }
 

packages/perseus/src/widgets/input-number/input-number.tsx

@@ -175,7 +175,7 @@ class InputNumber extends React.Component<Props> implements Widget {
         return _getPromptJSON(this.props, this.getUserInput());
     }
 
-    examples: () => ReadonlyArray<string> = () => {
+    examples(): ReadonlyArray<string> {
         const {strings} = this.context;
         const type = this.props.answerType;
         const forms = answerTypes[type].forms.split(/\s*,\s*/);
@@ -185,7 +185,7 @@ class InputNumber extends React.Component<Props> implements Widget {
         );
 
         return [strings.yourAnswer].concat(examples);
-    };
+    }
 
     render(): React.ReactNode {
         if (this.props.apiOptions.customKeypad) {

packages/perseus/src/widgets/numeric-input/numeric-input.tsx

@@ -123,8 +123,11 @@ export class NumericInput
         isFocused: false,
     };
 
-    // TODO(Nicole, Jeremy): This is maybe never used and should be removed
-    examples: () => ReadonlyArray<string> = () => {
+    /**
+     * Generates a string that demonstrates how to input the various supported
+     * answer forms.
+     */
+    examples(): ReadonlyArray<string> {
         // if the set of specified forms are empty, allow all forms
         const forms =
             this.props.answerForms?.length !== 0
@@ -144,7 +147,7 @@ export class NumericInput
         examples = _.uniq(examples);
 
         return [this.context.strings.yourAnswer].concat(examples);
-    };
+    }
 
     shouldShowExamples: () => boolean = () => {
         const noFormsAccepted = this.props.answerForms?.length === 0;