@khanacademy/perseus 3.0.0 → 4.0.0

package/dist/server-item-renderer.d.ts

@@ -0,0 +1,113 @@
+/**
+ * A copy of the ItemRenderer which renders its question renderer and hints
+ * renderer normally instead of ReactDOM.render()ing them into elements in the
+ * DOM.
+ *
+ * This allows this component to be used in server-rendering of a perseus
+ * exercise.
+ */
+import * as React from "react";
+import Renderer from "./renderer";
+import type { KeypadProps } from "./mixins/provide-keypad";
+import type { APIOptions, KEScore, FocusPath, RendererInterface } from "./types";
+type OwnProps = // These props are used by the ProvideKeypad mixin.
+KeypadProps & {
+    apiOptions: APIOptions;
+    hintsVisible?: number;
+    item: {
+        hints: ReadonlyArray<any>;
+        question: any;
+    };
+    problemNum?: number;
+    reviewMode?: boolean;
+    keypadElement?: any | null | undefined;
+};
+type HOCProps = {
+    onRendered: (isRendered: boolean) => void;
+};
+type Props = OwnProps & HOCProps;
+type DefaultProps = {
+    apiOptions: Props["apiOptions"];
+    onRendered: Props["onRendered"];
+};
+type State = {
+    questionCompleted: boolean;
+    questionHighlightedWidgets: ReadonlyArray<any>;
+    assetStatuses: {
+        [assetKey: string]: boolean;
+    };
+};
+type SerializedState = {
+    question: any;
+    hints: any;
+};
+export declare class ServerItemRenderer extends React.Component<Props, State> implements RendererInterface {
+    questionRenderer: Renderer;
+    hintsRenderer: any;
+    _currentFocus: FocusPath;
+    _fullyRendered: boolean;
+    blurTimeoutID: number | null | undefined;
+    static defaultProps: DefaultProps;
+    constructor(props: Props);
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
+    _handleFocusChange: (newFocus: FocusPath, oldFocus: FocusPath) => void;
+    _setCurrentFocus(newFocus: FocusPath): void;
+    _onRendererBlur(blurPath: FocusPath): void;
+    /**
+     * Accepts a question area widgetId, or an answer area widgetId of
+     * the form "answer-input-number 1", or the string "answer-area"
+     * for the whole answer area (if the answer area is a single widget).
+     */
+    _setWidgetProps(widgetId: string, newProps: Props, callback: any): void;
+    setInputValue(path: FocusPath, newValue: any, focus: () => void): void;
+    focusPath(path: FocusPath): void;
+    blurPath(path: FocusPath): void;
+    getDOMNodeForPath(path: FocusPath): Element | Text | null | undefined;
+    getGrammarTypeForPath(path: FocusPath): string | null | undefined;
+    getInputPaths(): ReadonlyArray<FocusPath>;
+    handleInteractWithWidget: (widgetId: string) => void;
+    focus(): boolean | null | undefined;
+    blur(): void;
+    getNumHints(): number;
+    /**
+     * Grades the item.
+     */
+    scoreInput(): KEScore;
+    /**
+     * Returns an array of all widget IDs in the order they occur in
+     * the question content.
+     */
+    getWidgetIds(): ReadonlyArray<string>;
+    /**
+     * Returns an object mapping from widget ID to KE-style score.
+     * The keys of this object are the values of the array returned
+     * from `getWidgetIds`.
+     */
+    scoreWidgets(): {
+        [key: string]: KEScore;
+    };
+    /**
+     * Get a representation of the current state of the item.
+     */
+    getSerializedState(): SerializedState;
+    restoreSerializedState(state: SerializedState, callback?: () => void): void;
+    showRationalesForCurrentlySelectedChoices(): void;
+    deselectIncorrectSelectedChoices(): void;
+    setAssetStatus: (assetKey: string, status: boolean) => void;
+    render(): React.ReactNode;
+}
+declare const ref: React.ForwardRefExoticComponent<Omit<KeypadProps & {
+    apiOptions: APIOptions;
+    hintsVisible?: number | undefined;
+    item: {
+        hints: ReadonlyArray<any>;
+        question: any;
+    };
+    problemNum?: number | undefined;
+    reviewMode?: boolean | undefined;
+    keypadElement?: any | null | undefined;
+} & HOCProps, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
+export default ref;

package/dist/server-item-renderer.js.flow

@@ -0,0 +1,136 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import Renderer from "./renderer";
+import type { KeypadProps } from "./mixins/provide-keypad";
+import type {
+  APIOptions,
+  KEScore,
+  FocusPath,
+  RendererInterface,
+} from "./types";
+declare type OwnProps = {|
+  ...KeypadProps,
+  ...{|
+    apiOptions: APIOptions,
+    hintsVisible?: number,
+    item: {|
+      hints: $ReadOnlyArray<any>,
+      question: any,
+    |},
+    problemNum?: number,
+    reviewMode?: boolean,
+    keypadElement?: any | null | void,
+  |},
+|};
+declare type HOCProps = {|
+  onRendered: (isRendered: boolean) => void,
+|};
+declare type Props = {| ...OwnProps, ...HOCProps |};
+declare type DefaultProps = {|
+  apiOptions: $PropertyType<Props, "apiOptions">,
+  onRendered: $PropertyType<Props, "onRendered">,
+|};
+declare type State = {|
+  questionCompleted: boolean,
+  questionHighlightedWidgets: $ReadOnlyArray<any>,
+  assetStatuses: {
+    [assetKey: string]: boolean,
+  },
+|};
+declare type SerializedState = {|
+  question: any,
+  hints: any,
+|};
+declare export class ServerItemRenderer
+  extends React.Component<Props, State>
+  implements RendererInterface
+{
+  questionRenderer: Renderer;
+  hintsRenderer: any;
+  _currentFocus: FocusPath;
+  _fullyRendered: boolean;
+  blurTimeoutID: number | null | void;
+  static defaultProps: DefaultProps;
+  constructor(props: Props): this;
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+  componentDidUpdate(prevProps: Props, prevState: State): void;
+  componentWillUnmount(): void;
+  _handleFocusChange: (newFocus: FocusPath, oldFocus: FocusPath) => void;
+  _setCurrentFocus(newFocus: FocusPath): void;
+  _onRendererBlur(blurPath: FocusPath): void;
+
+  /**
+   * Accepts a question area widgetId, or an answer area widgetId of
+   * the form "answer-input-number 1", or the string "answer-area"
+   * for the whole answer area (if the answer area is a single widget).
+   */
+  _setWidgetProps(widgetId: string, newProps: Props, callback: any): void;
+  setInputValue(path: FocusPath, newValue: any, focus: () => void): void;
+  focusPath(path: FocusPath): void;
+  blurPath(path: FocusPath): void;
+  getDOMNodeForPath(path: FocusPath): Element | Text | null | void;
+  getGrammarTypeForPath(path: FocusPath): string | null | void;
+  getInputPaths(): $ReadOnlyArray<FocusPath>;
+  handleInteractWithWidget: (widgetId: string) => void;
+  focus(): boolean | null | void;
+  blur(): void;
+  getNumHints(): number;
+
+  /**
+   * Grades the item.
+   */
+  scoreInput(): KEScore;
+
+  /**
+   * Returns an array of all widget IDs in the order they occur in
+   * the question content.
+   */
+  getWidgetIds(): $ReadOnlyArray<string>;
+
+  /**
+   * Returns an object mapping from widget ID to KE-style score.
+   * The keys of this object are the values of the array returned
+   * from `getWidgetIds`.
+   */
+  scoreWidgets(): {
+    [key: string]: KEScore,
+  };
+
+  /**
+   * Get a representation of the current state of the item.
+   */
+  getSerializedState(): SerializedState;
+  restoreSerializedState(state: SerializedState, callback?: () => void): void;
+  showRationalesForCurrentlySelectedChoices(): void;
+  deselectIncorrectSelectedChoices(): void;
+  setAssetStatus: (assetKey: string, status: boolean) => void;
+  render(): React.Node;
+}
+declare var ref: React.ForwardRefExoticComponent<{|
+  ...$Diff<
+    {|
+      ...KeypadProps,
+      ...{|
+        apiOptions: APIOptions,
+        hintsVisible?: number | void,
+        item: {|
+          hints: $ReadOnlyArray<any>,
+          question: any,
+        |},
+        problemNum?: number | void,
+        reviewMode?: boolean | void,
+        keypadElement?: any | null | void,
+      |},
+      ...HOCProps,
+    |},
+    { onRendered: any }
+  >,
+  ...React.RefAttributes<ServerItemRenderer>,
+|}>;
+declare export default typeof ref;

package/dist/sigfigs.d.ts

@@ -0,0 +1,32 @@
+/**
+ * An object tho both scans floating points to
+ * determine the number of significant figures.
+ * and can display a floating point using any number
+ * of significant figures.
+ *
+ * @param s A string representation of a floating point.
+ */
+export declare class SignificantFigures {
+    order: number;
+    mantissa: string;
+    positive: boolean;
+    sigFigs: number;
+    sigDecs: number;
+    constructor(s: string);
+}
+/**
+ * Format a floating point for display using the specified
+ * number of significant figures and least significant decimal.
+ * Scientific notation may used by this method if this
+ * object is very small, very large, has many significant
+ * figures, or the number of significant figures would be
+ * ambiguous in the output if scientific notation were not
+ * used.
+ *
+ * @param f A floating point number that should be displayed
+ * @param sigFigs desired number of significant figures (integer).
+ * @param sigDecs the least significant decimal place (integer).
+ * @param scientific true iff scientific notation should always be used.
+ * @return a string of this object formatted correctly.
+ */
+export declare function displaySigFigs(f: number, sigFigs: number, sigDecs: number, scientific: boolean): string;

package/dist/sigfigs.js.flow

@@ -0,0 +1,41 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * An object tho both scans floating points to
+ * determine the number of significant figures.
+ * and can display a floating point using any number
+ * of significant figures.
+ * @param s A string representation of a floating point.
+ */
+declare export class SignificantFigures {
+  order: number;
+  mantissa: string;
+  positive: boolean;
+  sigFigs: number;
+  sigDecs: number;
+  constructor(s: string): this;
+}
+/**
+ * Format a floating point for display using the specified
+ * number of significant figures and least significant decimal.
+ * Scientific notation may used by this method if this
+ * object is very small, very large, has many significant
+ * figures, or the number of significant figures would be
+ * ambiguous in the output if scientific notation were not
+ * used.
+ * @param f A floating point number that should be displayed
+ * @param sigFigs desired number of significant figures (integer).
+ * @param sigDecs the least significant decimal place (integer).
+ * @param scientific true iff scientific notation should always be used.
+ * @return a string of this object formatted correctly.
+ */
+declare export function displaySigFigs(
+  f: number,
+  sigFigs: number,
+  sigDecs: number,
+  scientific: boolean
+): string;

package/dist/styles/constants.d.ts

@@ -0,0 +1,56 @@
+export declare const baseFontFamily = "'Proxima Nova',sans-serif";
+export declare const boldFontFamily = "'Proxima Nova Semibold',sans-serif";
+export declare const green = "#76A005";
+export declare const kaGreen = "#71B307";
+export declare const blue = "#1C758A";
+export declare const gray = "#AAAAAA";
+export declare const red = "#FFBABA";
+export declare const grayLight = "#AAAAAA";
+export declare const grayLighter = "#DDDDDD";
+export declare const learnstormBlue = "#4898FC";
+export declare const white = "#FFFFFF";
+export declare const gray98 = "#FAFAFA";
+export declare const gray97 = "#F6F7F7";
+export declare const gray95 = "#F0F1F2";
+export declare const gray90 = "#E3E5E6";
+export declare const gray85 = "#D6D8DA";
+export declare const gray76 = "#BABEC2";
+export declare const gray68 = "#888D93";
+export declare const gray41 = "#626569";
+export declare const gray25 = "#3B3e40";
+export declare const gray17 = "#21242c";
+export declare const black = "#000000";
+export declare const warning1 = "#F86700";
+export declare const warning3 = "#C75300";
+export declare const pureSmMin = "568px";
+export declare const pureMdMin = "768px";
+export declare const pureLgMin = "1024px";
+export declare const pureXlMin = "1280px";
+export declare const pureXsMax = "567px";
+export declare const pureSmMax = "767px";
+export declare const pureMdMax = "1023px";
+export declare const pureLgMax = "1279px";
+export declare const tableBackgroundAccent = "#F9F9F9";
+export declare const zIndexScratchPad = 1;
+export declare const zIndexAboveScratchpad = 2;
+export declare const zIndexInteractiveComponent = 3;
+export declare const zIndexCurrentlyDragging = 4;
+export declare const zIndexCalculator = 5;
+export declare const phoneMargin = 16;
+export declare const negativePhoneMargin = -16;
+export declare const hintBorderWidth = 4;
+export declare const baseUnitPx = 16;
+export declare const interactiveSizes: {
+    readonly defaultBoxSize: 400;
+    readonly defaultBoxSizeSmall: 288;
+};
+export declare const circleSize = 24;
+export declare const radioMarginWidth = 2;
+export declare const warningColor = "#f86700";
+export declare const warningColorHover = "#df5c00";
+export declare const warningColorActive = "#c75300";
+export declare const publishBlockingErrorColor = "#be2612";
+export declare const radioBorderColor = "#BABEC2";
+export declare const checkedColor = "#71B307";
+export declare const articleMaxWidthInPx = 688;
+export declare const articleMaxWidthTableInPx = 512;

package/dist/styles/constants.js.flow

@@ -0,0 +1,62 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export var baseFontFamily: "'Proxima Nova',sans-serif";
+declare export var boldFontFamily: "'Proxima Nova Semibold',sans-serif";
+declare export var green: "#76A005";
+declare export var kaGreen: "#71B307";
+declare export var blue: "#1C758A";
+declare export var gray: "#AAAAAA";
+declare export var red: "#FFBABA";
+declare export var grayLight: "#AAAAAA";
+declare export var grayLighter: "#DDDDDD";
+declare export var learnstormBlue: "#4898FC";
+declare export var white: "#FFFFFF";
+declare export var gray98: "#FAFAFA";
+declare export var gray97: "#F6F7F7";
+declare export var gray95: "#F0F1F2";
+declare export var gray90: "#E3E5E6";
+declare export var gray85: "#D6D8DA";
+declare export var gray76: "#BABEC2";
+declare export var gray68: "#888D93";
+declare export var gray41: "#626569";
+declare export var gray25: "#3B3e40";
+declare export var gray17: "#21242c";
+declare export var black: "#000000";
+declare export var warning1: "#F86700";
+declare export var warning3: "#C75300";
+declare export var pureSmMin: "568px";
+declare export var pureMdMin: "768px";
+declare export var pureLgMin: "1024px";
+declare export var pureXlMin: "1280px";
+declare export var pureXsMax: "567px";
+declare export var pureSmMax: "767px";
+declare export var pureMdMax: "1023px";
+declare export var pureLgMax: "1279px";
+declare export var tableBackgroundAccent: "#F9F9F9";
+declare export var zIndexScratchPad: 1;
+declare export var zIndexAboveScratchpad: 2;
+declare export var zIndexInteractiveComponent: 3;
+declare export var zIndexCurrentlyDragging: 4;
+declare export var zIndexCalculator: 5;
+declare export var phoneMargin: 16;
+declare export var negativePhoneMargin: -16;
+declare export var hintBorderWidth: 4;
+declare export var baseUnitPx: 16;
+declare export var interactiveSizes: {|
+  +defaultBoxSize: 400,
+  +defaultBoxSizeSmall: 288,
+|};
+declare export var circleSize: 24;
+declare export var radioMarginWidth: 2;
+declare export var warningColor: "#f86700";
+declare export var warningColorHover: "#df5c00";
+declare export var warningColorActive: "#c75300";
+declare export var publishBlockingErrorColor: "#be2612";
+declare export var radioBorderColor: "#BABEC2";
+declare export var checkedColor: "#71B307";
+declare export var articleMaxWidthInPx: 688;
+declare export var articleMaxWidthTableInPx: 512;