@khanacademy/perseus-editor 0.3.8 → 0.4.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "0.3.8",
+    "version": "0.4.0",
     "publishConfig": {
         "access": "public"
     },
@@ -21,8 +21,8 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kmath": "^0.0.5",
-        "@khanacademy/perseus": "^0.3.3"
+        "@khanacademy/kmath": "^0.0.6",
+        "@khanacademy/perseus": "^0.4.0"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^2.11.5",
@@ -33,7 +33,7 @@
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
         "jquery": "^2.1.1",
-        "perseus-build-settings": "^0.0.2",
+        "perseus-build-settings": "^0.0.3",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",

package/src/diffs/structured-item-diff.jsx

@@ -86,11 +86,11 @@ class StructuredItemDiff extends React.Component<Props> {
      * from buildMapper(), is the same order they appear in in the shape.
      */
     static generateCompletePathsList(
-        // eslint-disable-next-line flowtype/no-mutable-array
+        // eslint-disable-next-line ft-flow/no-mutable-array
         beforeList: Array<ItemList>,
-        // eslint-disable-next-line flowtype/no-mutable-array
+        // eslint-disable-next-line ft-flow/no-mutable-array
         afterList: Array<ItemList>,
-        // eslint-disable-next-line flowtype/no-mutable-array
+        // eslint-disable-next-line ft-flow/no-mutable-array
         result: Array<Path>,
         shape: Shape,
         path: $ReadOnlyArray<any>,

package/src/widgets/__stories__/radio-editor.stories.jsx

@@ -0,0 +1,117 @@
+// @flow
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import RadioEditor from "../radio/editor.jsx";
+
+import type {
+    PerseusRadioWidgetOptions,
+    PerseusRenderer,
+    APIOptions,
+} from "@khanacademy/perseus";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Editor/Widgets/Radio Editor",
+}: Story);
+
+const styles = StyleSheet.create({
+    wrapper: {
+        // The maximum width of a widget in the editor.
+        width: 338,
+    },
+});
+
+const question: PerseusRenderer = {
+    content:
+        "Which of the following values of $x$ satisfies the equation $\\sqrt{64}=x$ ?\n\n[[\u2603 radio 1]]\n\n",
+    images: {},
+    widgets: {
+        "radio 1": {
+            graded: true,
+            version: {
+                major: 1,
+                minor: 0,
+            },
+            static: false,
+            type: "radio",
+            options: {
+                displayCount: null,
+                onePerLine: false,
+                choices: [
+                    {
+                        content: "$-8$ and $8$",
+                        correct: false,
+                        clue: "The square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number, so $x$ is equal to *only* $8$.",
+                    },
+                    {
+                        content: "$-8$",
+                        correct: false,
+                        clue: "While $(-8)^2=64$, the square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number.",
+                    },
+                    {
+                        content: "$8$",
+                        correct: true,
+                        isNoneOfTheAbove: false,
+                        clue: "$8$ is the positive square root of $64$.",
+                    },
+                    {
+                        content: "No value of $x$ satisfies the equation.",
+                        correct: false,
+                        isNoneOfTheAbove: false,
+                        clue: "$8$ satisfies the equation.",
+                    },
+                ],
+                countChoices: false,
+                hasNoneOfTheAbove: false,
+                multipleSelect: false,
+                randomize: false,
+                deselectEnabled: false,
+            },
+            alignment: "default",
+        },
+    },
+};
+
+class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
+    _widget: RadioEditor;
+
+    //$FlowIgnore
+    state = question.widgets["radio 1"];
+
+    apiOptions: APIOptions = {
+        satStyling: false,
+        styling: {
+            radioStyleVersion: "final",
+            primaryProductColor: "red",
+        },
+    };
+
+    render(): React.Node {
+        return (
+            <div className={css(styles.wrapper)}>
+                <RadioEditor
+                    {...this.state}
+                    apiOptions={this.apiOptions}
+                    onChange={(props) =>
+                        this.setState({
+                            ...this._widget.serialize(),
+                            ...props,
+                        })
+                    }
+                    // $FlowFixMe[incompatible-type] - can be null
+                    ref={(widget) => (this._widget = widget)}
+                />
+            </div>
+        );
+    }
+}
+
+export const Default = (args: StoryArgs): React.Node => {
+    return <WithState />;
+};

package/src/widgets/graded-group-set-editor.jsx

@@ -10,7 +10,7 @@ import GradedGroupEditor from "./graded-group-editor.jsx";
 type Props = $FlowFixMe;
 
 class GradedGroupSetEditor extends React.Component<Props> {
-    // eslint-disable-next-line flowtype/no-mutable-array
+    // eslint-disable-next-line ft-flow/no-mutable-array
     _editors: Array<$FlowFixMe>;
 
     static propTypes = {

package/src/widgets/label-image/question-markers.jsx

@@ -31,7 +31,7 @@ type QuestionMarkersProps = {|
 |};
 
 export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
-    // eslint-disable-next-line flowtype/no-mutable-array
+    // eslint-disable-next-line ft-flow/no-mutable-array
     _markers: Array<?Marker> = [];
 
     openDropdownForMarkerIndices(indices: $ReadOnlyArray<number>) {

package/src/widgets/reaction-diagram-editor.jsx

@@ -28,8 +28,8 @@ class ReactionDiagramWidgetEditor extends React.Component<Props> {
         return Changeable.change.apply(this, args);
     };
 
-    updateMolecule: (number) => ($FlowFixMe) => void = (idx) => {
-        return function (newValue) {
+    updateMolecule: (number) => (string) => void = (idx) => {
+        return function (newValue: string) {
             const newSmiles = [...this.props.smiles];
             newSmiles[idx] = newValue;
             this.change({smiles: newSmiles});
@@ -44,7 +44,7 @@ class ReactionDiagramWidgetEditor extends React.Component<Props> {
         }.bind(this);
     };
 
-    updateSeparators: (number, string) => ($FlowFixMe) => void = (
+    updateSeparators: (number, string) => (string) => void = (
         idx,
         propName,
     ) => {