@khanacademy/perseus 0.1.0 → 0.2.2

package/src/util/answer-types.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-useless-escape */
 // @flow
+import * as KAS from "@khanacademy/kas";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import $ from "jquery";
-import KAS from "kas";
 import _ from "underscore";
 
 import {Errors} from "../logging/log.js";

package/src/util/graphie.js

@@ -1,7 +1,8 @@
 /* eslint-disable @babel/no-invalid-this */
 // @flow
+import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
 import $ from "jquery";
-import {point as kpoint, vector as kvector} from "kmath";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Raphael from "raphael";
 import _ from "underscore";
 

package/src/util/interactive.js

@@ -9,8 +9,13 @@
 
 // TODO(emily): This file breaks our line length limits like nobody's business.
 // Figure out how to fix that.
+import {
+    vector as kvector,
+    point as kpoint,
+    line as kline,
+} from "@khanacademy/kmath";
 import $ from "jquery";
-import {vector as kvector, point as kpoint, line as kline} from "kmath";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Raphael from "raphael";
 import _ from "underscore";
 
@@ -1299,7 +1304,7 @@ _.extend(GraphUtils.Graphie.prototype, {
 
                 const distance = xExtent + yExtent;
                 const angleVec = graph.unscaleVector(
-                    kvector.cartFromPolarDeg([1, angle]),
+                    kvector.cartFromPolarDeg(1, angle),
                 );
                 const distVec = kvector.scale(
                     kvector.normalize(angleVec),
@@ -2711,10 +2716,10 @@ _.extend(GraphUtils.Graphie.prototype, {
             ) {
                 const distFromRotationCenter =
                     radius + distanceFromArrowMidline;
-                const vec = kvector.cartFromPolarDeg([
+                const vec = kvector.cartFromPolarDeg(
                     distFromRotationCenter,
                     angle + offset,
-                ]);
+                );
                 const absolute = kvector.add(center, vec);
                 const pixels = graphie.scalePoint(absolute);
                 return pixels[0] + "," + pixels[1];
@@ -2886,13 +2891,15 @@ _.extend(GraphUtils.Graphie.prototype, {
                     const oldAngle = oldPolar[1];
                     const newAngle = newPolar[1];
                     let result = options.onMove(newAngle, oldAngle);
+                    // $FlowFixMe[incompatible-type] add proper onMove param type
                     if (result != null && result !== true) {
+                        // $FlowFixMe[incompatible-type] add proper onMove param type
                         if (result === false) {
                             result = oldAngle;
                         }
                         coord = kvector.add(
                             rotatePoint.coord,
-                            kvector.cartFromPolarDeg([oldPolar[0], result]),
+                            kvector.cartFromPolarDeg(oldPolar[0], result),
                         );
                     }
                 }

package/src/util/math.js

@@ -1,7 +1,7 @@
 // @flow
 
+import {number as knumber} from "@khanacademy/kmath";
 import $ from "jquery";
-import {number as knumber} from "kmath";
 import _ from "underscore";
 
 export type Format =

package/src/widgets/__stories__/unit.stories.jsx

@@ -0,0 +1,45 @@
+// @flow
+import * as React from "react";
+
+import {ApiOptions} from "../../perseus-api.jsx";
+import {OldUnitInput} from "../unit.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Widgets/Unit",
+}: Story);
+
+export const StaticRender = (args: StoryArgs): React.Node => {
+    return (
+        <OldUnitInput
+            apiOptions={{
+                ...ApiOptions.defaults,
+                staticRender: true,
+            }}
+            value="2 tbsp"
+            onFocus={() => {}}
+            onBlur={() => {}}
+            onChange={({value}) => {}}
+        />
+    );
+};
+
+export const NonStaticRender = (args: StoryArgs): React.Node => {
+    return (
+        <OldUnitInput
+            apiOptions={{
+                ...ApiOptions.defaults,
+                staticRender: false,
+            }}
+            value="2 tbsp"
+            onFocus={() => {}}
+            onBlur={() => {}}
+            onChange={({value}) => {}}
+        />
+    );
+};

package/src/widgets/__stories__/video-transcript-link.stories.jsx

@@ -0,0 +1,24 @@
+// @flow
+import * as React from "react";
+
+import VideoTranscriptLink from "../video-transcript-link.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Video Transcript Link",
+}: Story);
+
+export const YoutubeVideoLink = (args: StoryArgs): React.Node => {
+    return (
+        <VideoTranscriptLink location="https://www.youtube.com/watch?v=YoutubeId" />
+    );
+};
+
+export const SlugVideoLink = (args: StoryArgs): React.Node => {
+    return <VideoTranscriptLink location="slug-video-id" />;
+};

package/src/widgets/__tests__/renderQuestion.jsx

@@ -1,5 +1,6 @@
 // @flow
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {render} from "@testing-library/react";
 import * as React from "react";
 

package/src/widgets/cs-program.jsx

@@ -30,7 +30,6 @@ function getUrlFromProgramID(programID) {
     // as a `file://` URL. In this case, we want to reference `ka.org` instead
     // of defaulting to what we get from `toAbsoluteUrl`.
     if (isFileProtocol(InitialRequestUrl.protocol)) {
-        // eslint-disable-next-line static-service/require-safe-link-to
         return `https://khanacademy.org${path}`;
     }
 

package/src/widgets/expression.jsx

@@ -1,8 +1,9 @@
+/* eslint-disable react/prop-types */
 // @flow
-import {components, consts} from "@khanacademy/math-input";
+import * as KAS from "@khanacademy/kas";
+import {KeypadInput, KeypadTypes} from "@khanacademy/math-input";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
-import KAS from "kas";
 import * as React from "react";
 import _ from "underscore";
 
@@ -20,9 +21,6 @@ import KhanAnswerTypes from "../util/answer-types.js";
 import type {PerseusExpressionWidgetOptions} from "../perseus-types.js";
 import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
 
-const {KeypadInput} = components;
-const {KeypadTypes} = consts;
-
 type InputPath = $ReadOnlyArray<string>;
 
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");

package/src/widgets/grapher/util.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable one-var */
 // @flow
-import {point as kpoint} from "kmath";
+import {point as kpoint} from "@khanacademy/kmath";
 import * as React from "react";
 import _ from "underscore";
 
@@ -105,9 +105,7 @@ const PlotDefaults = {
 };
 
 const Linear = _.extend({}, PlotDefaults, {
-    url:
-        // eslint-disable-next-line static-service/require-safe-link-to
-        "https://ka-perseus-graphie.s3.amazonaws.com/67aaf581e6d9ef9038c10558a1f70ac21c11c9f8.png",
+    url: "https://ka-perseus-graphie.s3.amazonaws.com/67aaf581e6d9ef9038c10558a1f70ac21c11c9f8.png",
 
     defaultCoords: [
         [0.25, 0.75],
@@ -145,9 +143,7 @@ const Linear = _.extend({}, PlotDefaults, {
 });
 
 const Quadratic = _.extend({}, PlotDefaults, {
-    url:
-        // eslint-disable-next-line static-service/require-safe-link-to
-        "https://ka-perseus-graphie.s3.amazonaws.com/e23d36e6fc29ee37174e92c9daba2a66677128ab.png",
+    url: "https://ka-perseus-graphie.s3.amazonaws.com/e23d36e6fc29ee37174e92c9daba2a66677128ab.png",
 
     defaultCoords: [
         [0.5, 0.5],
@@ -205,9 +201,7 @@ const Quadratic = _.extend({}, PlotDefaults, {
 });
 
 const Sinusoid = _.extend({}, PlotDefaults, {
-    url:
-        // eslint-disable-next-line static-service/require-safe-link-to
-        "https://ka-perseus-graphie.s3.amazonaws.com/3d68e7718498475f53b206c2ab285626baf8857e.png",
+    url: "https://ka-perseus-graphie.s3.amazonaws.com/3d68e7718498475f53b206c2ab285626baf8857e.png",
 
     defaultCoords: [
         [0.5, 0.5],
@@ -273,9 +267,7 @@ const Sinusoid = _.extend({}, PlotDefaults, {
 });
 
 const Tangent = _.extend({}, PlotDefaults, {
-    url:
-        // eslint-disable-next-line static-service/require-safe-link-to
-        "https://ka-perseus-graphie.s3.amazonaws.com/7db80d23c35214f98659fe1cf0765811c1bbfbba.png",
+    url: "https://ka-perseus-graphie.s3.amazonaws.com/7db80d23c35214f98659fe1cf0765811c1bbfbba.png",
 
     defaultCoords: [
         [0.5, 0.5],
@@ -329,9 +321,7 @@ const Tangent = _.extend({}, PlotDefaults, {
 });
 
 const Exponential = _.extend({}, PlotDefaults, {
-    url:
-        // eslint-disable-next-line static-service/require-safe-link-to
-        "https://ka-perseus-graphie.s3.amazonaws.com/9cbfad55525e3ce755a31a631b074670a5dad611.png",
+    url: "https://ka-perseus-graphie.s3.amazonaws.com/9cbfad55525e3ce755a31a631b074670a5dad611.png",
 
     defaultCoords: [
         [0.5, 0.55],
@@ -437,9 +427,7 @@ const Exponential = _.extend({}, PlotDefaults, {
 });
 
 const Logarithm = _.extend({}, PlotDefaults, {
-    url:
-        // eslint-disable-next-line static-service/require-safe-link-to
-        "https://ka-perseus-graphie.s3.amazonaws.com/f6491e99d34af34d924bfe0231728ad912068dc3.png",
+    url: "https://ka-perseus-graphie.s3.amazonaws.com/f6491e99d34af34d924bfe0231728ad912068dc3.png",
 
     defaultCoords: [
         [0.55, 0.5],
@@ -537,9 +525,7 @@ const Logarithm = _.extend({}, PlotDefaults, {
 });
 
 const AbsoluteValue = _.extend({}, PlotDefaults, {
-    url:
-        // eslint-disable-next-line static-service/require-safe-link-to
-        "https://ka-perseus-graphie.s3.amazonaws.com/8256a630175a0cb1d11de223d6de0266daf98721.png",
+    url: "https://ka-perseus-graphie.s3.amazonaws.com/8256a630175a0cb1d11de223d6de0266daf98721.png",
 
     defaultCoords: [
         [0.5, 0.5],
@@ -695,6 +681,7 @@ export const pointsFromNormalized = (
         // on the Graphie to handle snapping. Here, we need the points
         // returned to already be snapped so that the plot that goes
         // through them is correct.
+        // $FlowFixMe[invalid-tuple-arity] improve unsnappedPoint type so it knows arity
         return kpoint.roundTo(unsnappedPoint, snapStep);
     });
 };

package/src/widgets/grapher.jsx

@@ -1,6 +1,11 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable react/sort-comp */
 // @flow
-import {number as knumber, vector as kvector, point as kpoint} from "kmath";
+import {
+    number as knumber,
+    vector as kvector,
+    point as kpoint,
+} from "@khanacademy/kmath";
 import * as React from "react";
 import _ from "underscore";
 

package/src/widgets/iframe.jsx

@@ -101,7 +101,6 @@ class Iframe extends React.Component<$FlowFixMe> {
         // If the URL doesnt start with http, it must be a program ID
         if (url && url.length && url.indexOf("http") !== 0) {
             url =
-                // eslint-disable-next-line static-service/require-safe-link-to
                 "https://www.khanacademy.org/computer-programming/program/" +
                 url +
                 "/embedded?buttons=no&embed=yes&editor=no&author=no";

package/src/widgets/image.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable react/sort-comp */
 // @flow
 import {StyleSheet, css} from "aphrodite";

package/src/widgets/input-number.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable react/sort-comp */
 // @flow
 import * as i18n from "@khanacademy/wonder-blocks-i18n";

package/src/widgets/interaction.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
 // @flow
-import KAS from "kas";
-import {vector as kvector} from "kmath";
+import * as KAS from "@khanacademy/kas";
+import {vector as kvector} from "@khanacademy/kmath";
 import * as React from "react";
 import _ from "underscore";
 

package/src/widgets/interactive-graph.jsx

@@ -1,8 +1,8 @@
 /* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
 // @flow
+import {number as knumber, point as kpoint} from "@khanacademy/kmath";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import $ from "jquery";
-import kmath from "kmath";
 import debounce from "lodash.debounce";
 import * as React from "react";
 import _ from "underscore";
@@ -37,7 +37,6 @@ type SineCoefficient = [
 ];
 type QuadraticCoefficient = [/* a */ number, /* b */ number, /* c */ number];
 
-const {number: knumber, point: kpoint} = kmath;
 const {DeprecationMixin} = Util;
 
 const TRASH_ICON_URI =

package/src/widgets/matrix.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable react/sort-comp */
 // @flow
 import * as i18n from "@khanacademy/wonder-blocks-i18n";

package/src/widgets/number-line.jsx

@@ -1,6 +1,6 @@
 // @flow
+import {number as knumber} from "@khanacademy/kmath";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {number as knumber} from "kmath";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";

package/src/widgets/numeric-input.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 // @flow
 
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
@@ -9,8 +10,7 @@ import InputWithExamples from "../components/input-with-examples.jsx";
 import PossibleAnswers from "../components/possible-answers.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import {linterContextDefault} from "../gorgon/proptypes.js";
-import {ClassNames as ApiClassNames} from "../perseus-api.jsx";
-import {ApiOptions} from "../perseus-api.jsx";
+import {ApiOptions, ClassNames as ApiClassNames} from "../perseus-api.jsx";
 import TexWrangler from "../tex-wrangler.js";
 import KhanAnswerTypes from "../util/answer-types.js";
 import KhanMath from "../util/math.js";

package/src/widgets/passage/passage-markdown.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/sort-comp */
 // @flow
+import SimpleMarkdown from "@khanacademy/simple-markdown";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import PropTypes from "prop-types";
 import * as React from "react";
-import SimpleMarkdown from "simple-markdown";
 import _ from "underscore";
 
 const START_REF_PREFIX = "start-ref-";

package/src/widgets/radio/cross-out-menu-wrapper.jsx

@@ -10,7 +10,7 @@
  * to uncover a cross-out button underneath. (This is why we need to wrap the
  * content!)
  */
-import colors from "@khanacademy/wonder-blocks-color";
+import Color from "@khanacademy/wonder-blocks-color";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
@@ -248,9 +248,9 @@ export default class CrossOutMenuWrapper extends React.PureComponent<
             return this.props.primaryProductColor;
         }
         if (this.state.hovered) {
-            return colors.offBlack;
+            return Color.offBlack;
         }
-        return colors.offBlack50;
+        return Color.offBlack50;
     }
 
     _renderMenu(): React.Element<"div"> {
@@ -396,7 +396,7 @@ const styles = StyleSheet.create({
         // to being closed, rather than awkwardly _sliding_ closed.
         [mediaQueries.smOrSmaller]: {
             transition: "transform 0.2s ease-out",
-            backgroundColor: colors.white,
+            backgroundColor: Color.white,
         },
     },
 
@@ -471,7 +471,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
 
-        background: colors.offBlack50,
+        background: Color.offBlack50,
         cursor: "pointer",
 
         [mediaQueries.mdOrLarger]: {

package/src/widgets/reaction-diagram.jsx

@@ -67,6 +67,7 @@ class ReactionDiagramWidget extends React.Component<$FlowFixMe> {
         // we're limited to a single reaction step.  At some point, add support
         // for more steps in the reaction.
         rotationAngle: PropTypes.arrayOf(PropTypes.number),
+        // eslint-disable-next-line react/forbid-prop-types
         separators: PropTypes.arrayOf(PropTypes.object),
         smiles: PropTypes.arrayOf(PropTypes.string),
         widgetId: PropTypes.string,

package/src/widgets/simulator.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars, react/no-unsafe, react/sort-comp */
 // @flow
+import {number as knumber} from "@khanacademy/kmath";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {number as knumber} from "kmath";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";

package/src/widgets/table.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/sort-comp */
 // @flow
-import {propTypes} from "@khanacademy/math-input";
+import {keypadElementPropType} from "@khanacademy/math-input";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -18,7 +18,6 @@ import KhanAnswerTypes from "../util/answer-types.js";
 import type {WidgetExports} from "../types.js";
 
 const {assert} = InteractiveUtil;
-const {keypadElementPropType} = propTypes;
 
 /* Input handling: Maps a (row, column) pair to a unique ref used by React,
  * and extracts (row, column) pairs from input paths, used to allow outsiders

package/src/widgets/transformer.jsx

@@ -1,4 +1,8 @@
-/* eslint-disable @babel/no-invalid-this, camelcase, react/no-did-update-set-state, react/sort-comp */
+/* eslint-disable react/prop-types */
+/* eslint-disable @babel/no-invalid-this */
+/* eslint-disable camelcase */
+/* eslint-disable react/no-did-update-set-state */
+/* eslint-disable react/sort-comp */
 /*
 NOTE(Pereus stabilize project): This widget is no-longer-used as of January
 2022. It's not present in US content but is still present in some
@@ -10,16 +14,16 @@ ref: https://khanacademy.slack.com/archives/CJDRXTGQ7/p1641857400011600
 ref: https://khanacademy.slack.com/archives/C2RFQGYKU/p1596160975061500?thread_ts=1596129758.040000&cid=C2RFQGYKU
 */
 // @flow
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import createReactClass from "create-react-class";
-import $ from "jquery";
 import {
     number as knumber,
     vector as kvector,
     point as kpoint,
     ray as kray,
     line as kline,
-} from "kmath";
+} from "@khanacademy/kmath";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import createReactClass from "create-react-class";
+import $ from "jquery";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -823,6 +827,7 @@ const Transformations = {
             transform1: ReflectionTransformation,
             transform2: ReflectionTransformation,
         ) {
+            // $FlowFixMe[incompatible-call]
             if (!kline.equal(transform1.line, transform2.line)) {
                 return false;
             }
@@ -2151,15 +2156,16 @@ class Transformer extends React.Component<Props> {
     normalizeReflectionCoords: ([Coord, Coord]) => [Coord, Coord] = (
         messyCoords,
     ) => {
+        // $FlowFixMe[incompatible-call]
         const midpoint = this.snapCoord(kline.midpoint(messyCoords));
         const origDirectionPolar = kvector.polarDegFromCart(
             kvector.subtract(messyCoords[0], messyCoords[1]),
         );
-        const directionPolar = [
+
+        const direction = kvector.cartFromPolarDeg(
             1,
             KhanMath.roundToNearest(45, origDirectionPolar[1]),
-        ];
-        const direction = kvector.cartFromPolarDeg(directionPolar);
+        );
         const coords = _.map(
             [-1, 1],
             function (directionCoefficient) {

package/src/widgets/unit.jsx

@@ -4,10 +4,11 @@
 // terms of a certain type.
 // TODO(joel): Allow sigfigs within a range rather than an exact expected
 // value?
+import * as KAS from "@khanacademy/kas";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import lens from "hubble";
 import $ from "jquery";
-import KAS from "kas";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -81,7 +82,7 @@ type DefaultProps = {|
  * shows and hides an error buddy. The error message is only shown after a
  * rolling two second delay, but hidden immediately on further typing.
  */
-class OldUnitInput extends React.Component<Props> {
+export class OldUnitInput extends React.Component<Props> {
     _errorTimeout: ?TimeoutID;
 
     static defaultProps: DefaultProps = {

package/src/widgets/video.jsx

@@ -16,11 +16,7 @@ import a11y from "../util/a11y.js";
 import VideoTranscriptLink from "./video-transcript-link.jsx";
 
 import type {PerseusVideoWidgetOptions} from "../perseus-types.js";
-import type {
-    PerseusScore,
-    WidgetExports,
-    WidgetProps,
-} from "../types.js";
+import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
 
 // Current default is 720p, based on the typical videos we upload currently
 const DEFAULT_WIDTH = 1280;
@@ -83,7 +79,6 @@ class Video extends React.Component<Props> {
             url = location;
         } else {
             url = KA_EMBED.replace("{slug}", location);
-            // eslint-disable-next-line static-service/require-safe-link-to
             let embedHostname = "https://www.khanacademy.org";
             if (IS_KA_SITE.test(InitialRequestUrl.host)) {
                 embedHostname = InitialRequestUrl.origin;

package/README.md

@@ -1,3 +0,0 @@
-# @khanacademy/perseus
-
-TODO(FEI-4467): write README for perseus