@khanacademy/perseus 0.2.0 → 0.2.3

package/package.json

@@ -1,10 +1,19 @@
 {
+    "name": "@khanacademy/perseus",
+    "description": "Core Perseus API (includes renderers and widgets)",
+    "author": "Khan Academy",
+    "license": "MIT",
+    "version": "0.2.3",
     "publishConfig": {
         "access": "public"
     },
-    "name": "@khanacademy/perseus",
-    "version": "0.2.0",
-    "description": "Core Perseus API (includes renderers and widgets)",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Khan/perseus.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Khan/perseus/issues"
+    },
     "module": "dist/es/index.js",
     "main": "dist/index.js",
     "source": "src/index.js",
@@ -13,21 +22,25 @@
     },
     "dependencies": {
         "@khanacademy/kmath": "0.0.5",
-        "@khanacademy/math-input": "^0.5.0",
+        "@khanacademy/math-input": "^0.5.1",
         "@khanacademy/kas": "^0.2.3",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
-        "simple-markdown": "^0.3.1"
+        "@khanacademy/simple-markdown": "^0.8.1",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
+        "@khanacademy/wonder-blocks-button": "2.11.5",
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
         "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "@khanacademy/wonder-blocks-layout": "1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
         "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-typography": "1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
@@ -36,6 +49,7 @@
         "eslint-plugin-import": "^2.26.0",
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
+        "lodash.debounce": "^4.0.8",
         "perseus-build-settings": "^0.0.1",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
@@ -43,26 +57,30 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
+        "@khanacademy/wonder-blocks-button": "2.11.5",
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
         "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "@khanacademy/wonder-blocks-layout": "1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
         "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-typography": "1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
+        "lodash.debounce": "^4.0.8",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
         "underscore": "^1.4.4"
     },
-    "author": "",
-    "license": "MIT"
+    "keywords": []
 }

package/src/README.md

@@ -1,7 +1,35 @@
-Widgets from the Perseus (exercise) editor.
+# Perseus
 
-TODO(benkraft): Figure out the distinction between this and the various other
-Perseus packages.
+<p align="center"><img src="logo.png" alt="perseus logo" width="150px"/></p>
 
-Code-Owner: Learning Platform
-Crowdin-Category: content.chrome
+<p align="center">Perseus Exercise Renderer</p>
+
+Perseus is Khan Academy's exercise system. This repo contains the code needed to take a problem in the perseus format and present it, allow interaction, and grade the result of a learner's work.
+
+<p align="center"><img src="sample.png" alt="sample of perseus in use" height="150px"/></p>
+
+This repo is a constellation of sub-repos for showing exercise content. Please see individual projects in in the `packages/` folder for more information about each sub-project.
+
+## Getting started
+
+### Prerequisites
+
+- [Node.JS v12](https://nodejs.org/download/release/v10.18.1/)
+- [Yarn](https://yarnpkg.com/lang/en/docs/install/)
+
+### Installation
+
+To install perseus, you need to run the following commands:
+
+#### `yarn install`
+
+Installs project dependencies
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for a walkthrough of how some
+of the Perseus code works and how to extend it.
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)

package/src/index.js

@@ -114,6 +114,7 @@ export type {
     PerseusScore,
     RendererInterface,
     Version,
+    VideoData,
     WidgetDict,
     WidgetExports,
     WidgetInfo,

package/src/jipt-paragraphs.js

@@ -3,21 +3,21 @@
  * Paragraph parsing/splitting for article jipt i18n
  */
 
-import SimpleMarkdown from "simple-markdown";
+import SimpleMarkdown from "@khanacademy/simple-markdown";
 
-const arrayRules = {
+import type {ParserRules} from "@khanacademy/simple-markdown";
+
+const arrayRules: ParserRules = {
     fence: {
-        // $FlowFixMe[prop-missing]
-        // $FlowFixMe[incompatible-use]
         match: SimpleMarkdown.defaultRules.fence.match,
         order: 1,
+        // $FlowFixMe[incompatible-type]
         parse: (capture, state, parse) => capture[3],
     },
     paragraph: {
-        // $FlowFixMe[prop-missing]
-        // $FlowFixMe[incompatible-use]
         match: SimpleMarkdown.defaultRules.paragraph.match,
         order: 2,
+        // $FlowFixMe[incompatible-type]
         parse: (capture, state, parse) => capture[1],
     },
 };

package/src/mixins/provide-keypad.jsx

@@ -16,12 +16,14 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
+import type {CSSProperties} from "aphrodite";
+
 export type KeypadProps = {|
     // An Aphrodite style object, to be applied to the keypad container.
     // Note that, given our awkward structure of injecting the keypad, this
     // style won't be applied or updated dynamically. Rather, it will only
     // be applied in `componentDidMount`.
-    keypadStyle?: any,
+    keypadStyle?: CSSProperties,
 |};
 
 export type KeypadApiOptions = {|

package/src/multi-items/multi-renderer.jsx

@@ -38,6 +38,7 @@
  */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import lens from "hubble";
 import * as React from "react";
 

package/src/perseus-markdown.jsx

@@ -1,9 +1,9 @@
-/* eslint-disable no-useless-escape */
+/* eslint-disable no-useless-escape, no-prototype-builtins */
 // @flow
 // TODO(FEI-4465): move this into it's own package called perseus-markdown
+import SimpleMarkdown from "@khanacademy/simple-markdown";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import * as React from "react";
-import SimpleMarkdown from "simple-markdown";
 import _ from "underscore";
 
 import Lint from "./components/lint.jsx";
@@ -320,6 +320,7 @@ const inlineNodeTypes = {
 };
 
 // $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-call]
 const builtParser = SimpleMarkdown.parserFor(rules);
 const parse = (source: string, state: $FlowFixMe): $FlowFixMe => {
     const paragraphedSource = source + "\n\n";
@@ -421,15 +422,12 @@ export default {
     traverseContent: traverseContent,
     parse: parse,
     parseInline: inlineParser,
-    // $FlowFixMe[prop-missing]
     reactFor: SimpleMarkdown.reactFor,
-    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
     ruleOutput: (SimpleMarkdown.ruleOutput(rules, "react"): $FlowFixMe),
-    // $FlowFixMe[prop-missing]
     basicOutput: (SimpleMarkdown.reactFor(
-        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
         SimpleMarkdown.ruleOutput(rules, "react"),
     ): $FlowFixMe),
-    // $FlowFixMe[prop-missing]
     sanitizeUrl: SimpleMarkdown.sanitizeUrl,
 };

package/src/pure-markdown.js

@@ -3,7 +3,7 @@
  * Contains markdown related functions in pure javascript,
  * extracted from perseus-markdown.jsx
  */
-import SimpleMarkdown from "simple-markdown";
+import SimpleMarkdown from "@khanacademy/simple-markdown";
 
 import Util from "./util.js";
 
@@ -334,6 +334,7 @@ export const pureMarkdownRules = {
 };
 
 // $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-call]
 const builtParser = SimpleMarkdown.parserFor(pureMarkdownRules);
 
 export const parse = (source: string, state: $FlowFixMe): $FlowFixMe => {

package/src/renderer.jsx

@@ -1275,6 +1275,7 @@ class Renderer extends React.Component<Props, State> {
                         {({setAssetStatus}) => (
                             <SvgImage
                                 setAssetStatus={setAssetStatus}
+                                /* $FlowFixMe[incompatible-type]: sanitizeUrl() can return null */
                                 src={PerseusMarkdown.sanitizeUrl(node.target)}
                                 alt={node.alt}
                                 title={node.title}

package/src/types.js

@@ -333,7 +333,7 @@ export type JiptTranslationComponents = {|
     removeComponentAtIndex: (index: number) => void,
 |};
 
-type VideoData = {|
+export type VideoData = {|
     __typename: "Video",
     id: string,
     title: ?string,

package/src/util/graphie.js

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

package/src/util/interactive.js

@@ -15,6 +15,7 @@ import {
     line as kline,
 } from "@khanacademy/kmath";
 import $ from "jquery";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Raphael from "raphael";
 import _ from "underscore";
 

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/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/unit.jsx

@@ -6,6 +6,7 @@
 // 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 * as React from "react";
@@ -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/README.md

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