@khanacademy/perseus 2.1.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/es/index.js +18687 -18767
  3. package/dist/es/index.js.map +1 -1
  4. package/dist/index.js +18724 -18804
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/hint-renderer.jsx +4 -7
  8. package/src/perseus-api.jsx +0 -7
  9. package/src/types.js +0 -6
  10. package/src/widgets/__stories__/unit.stories.jsx +0 -16
  11. package/src/widgets/__tests__/__snapshots__/input-number_test.jsx.snap +0 -481
  12. package/src/widgets/__tests__/__snapshots__/unit_test.jsx.snap +20 -0
  13. package/src/widgets/__tests__/expression_test.jsx +0 -10
  14. package/src/widgets/__tests__/input-number_test.jsx +0 -8
  15. package/src/widgets/__tests__/numeric-input_test.jsx +0 -11
  16. package/src/widgets/__tests__/unit_test.jsx +146 -121
  17. package/src/widgets/expression.jsx +2 -25
  18. package/src/widgets/input-number.jsx +2 -12
  19. package/src/widgets/matrix.jsx +4 -20
  20. package/src/widgets/number-line.jsx +0 -3
  21. package/src/widgets/numeric-input.jsx +1 -8
  22. package/src/widgets/radio/choice.jsx +2 -11
  23. package/src/widgets/simulator.jsx +2 -6
  24. package/src/widgets/table.jsx +0 -8
  25. package/src/widgets/transformer.jsx +0 -4
  26. package/src/widgets/unit.jsx +36 -51
  27. package/src/widgets/__tests__/__snapshots__/expression_test.jsx.snap +0 -38
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Core Perseus API (includes renderers and widgets)",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "2.1.0",
6
+ "version": "3.0.0",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
package/src/hint-renderer.jsx CHANGED
@@ -73,17 +73,14 @@ class HintRenderer extends React.Component<Props> {
73
73
  className,
74
74
  );
75
75
 
76
- // TODO(charlie): Allowing `staticRender` here would require that we
77
- // extend `HintsRenderer` and `HintRenderer` to implement the full
78
- // "input' API, so that clients could access the static inputs. Allowing
79
- // `customKeypad` would require that we extend `ItemRenderer` to support
80
- // nested inputs in the `HintsRenderer`. For now, we disable these
81
- // options. Instead, clients will get standard <input/> elements, which
76
+ // TODO(charlie): Allowing `customKeypad` would require that we
77
+ // extend `ItemRenderer` to support nested inputs in the `HintsRenderer`.
78
+ // For now, we disable this option.
79
+ // Instead, clients will get standard <input/> elements, which
82
80
  // aren't nice to use on mobile, but are at least usable.
83
81
  const rendererApiOptions = {
84
82
  ...apiOptions,
85
83
  customKeypad: false,
86
- staticRender: false,
87
84
  };
88
85
 
89
86
  return (
package/src/perseus-api.jsx CHANGED
@@ -43,7 +43,6 @@ export const ApiOptions = {
43
43
 
44
44
  onInputError: PropTypes.func.isRequired,
45
45
  onFocusChange: PropTypes.func.isRequired,
46
- staticRender: PropTypes.bool.isRequired,
47
46
  GroupMetadataEditor: PropTypes.func.isRequired,
48
47
  showAlignmentOptions: PropTypes.bool.isRequired,
49
48
  readOnly: PropTypes.bool.isRequired,
@@ -89,10 +88,6 @@ export const ApiOptions = {
89
88
  // component. In this situation we use the MathInput component
90
89
  // from the math-input repo instead of the existing perseus math
91
90
  // input components.
92
- // TODO(charlie): Make this mutually exclusive with `staticRender`.
93
- // Internally, we defer to `customKeypad` over `staticRender`, but
94
- // they should really be represented as an enum or some other data
95
- // structure that forbids them both being enabled at once.
96
91
  customKeypad: PropTypes.bool,
97
92
 
98
93
  // If this is provided, it is called instead of appending an instance
@@ -169,7 +164,6 @@ export const ApiOptions = {
169
164
  readOnly: boolean,
170
165
  setDrawingAreaAvailable?: (...a: $ReadOnlyArray<any>) => mixed,
171
166
  showAlignmentOptions: boolean,
172
- staticRender: boolean,
173
167
  trackInteraction?: (...a: $ReadOnlyArray<any>) => mixed,
174
168
  useDraftEditor?: boolean,
175
169
  widgetPlaceholder?: any,
@@ -181,7 +175,6 @@ export const ApiOptions = {
181
175
  isMobile: false,
182
176
  onInputError: function () {},
183
177
  onFocusChange: function () {},
184
- staticRender: false,
185
178
  GroupMetadataEditor: StubTagEditor,
186
179
  showAlignmentOptions: false,
187
180
  readOnly: false,
package/src/types.js CHANGED
@@ -157,7 +157,6 @@ export type APIOptions = $ReadOnly<{|
157
157
  keypadElement?: HTMLElement,
158
158
  focusedElement?: HTMLElement,
159
159
  ) => mixed,
160
- staticRender?: boolean,
161
160
  GroupMetadataEditor?: React.ComponentType<StubTagEditorType>,
162
161
  showAlignmentOptions?: boolean,
163
162
  readOnly?: boolean,
@@ -206,10 +205,6 @@ export type APIOptions = $ReadOnly<{|
206
205
  // component. In this situation we use the MathInput component
207
206
  // from the math-input repo instead of the existing perseus math
208
207
  // input components.
209
- // TODO(charlie): Make this mutually exclusive with `staticRender`.
210
- // Internally, we defer to `customKeypad` over `staticRender`, but
211
- // they should really be represented as an enum or some other data
212
- // structure that forbids them both being enabled at once.
213
208
  customKeypad?: boolean,
214
209
 
215
210
  // If this is provided, it is called instead of appending an instance
@@ -389,7 +384,6 @@ export type APIOptionsWithDefaults = $ReadOnly<{|
389
384
  APIOptions["setDrawingAreaAvailable"],
390
385
  >,
391
386
  showAlignmentOptions: $NonMaybeType<APIOptions["showAlignmentOptions"]>,
392
- staticRender: $NonMaybeType<APIOptions["staticRender"]>,
393
387
  useDraftEditor: $NonMaybeType<APIOptions["useDraftEditor"]>,
394
388
  |}>;
395
389
 
package/src/widgets/__stories__/unit.stories.jsx CHANGED
@@ -14,27 +14,11 @@ export default ({
14
14
  title: "Perseus/Widgets/Unit",
15
15
  }: Story);
16
16
 
17
- export const StaticRender = (args: StoryArgs): React.Node => {
18
- return (
19
- <OldUnitInput
20
- apiOptions={{
21
- ...ApiOptions.defaults,
22
- staticRender: true,
23
- }}
24
- value="2 tbsp"
25
- onFocus={() => {}}
26
- onBlur={() => {}}
27
- onChange={({value}) => {}}
28
- />
29
- );
30
- };
31
-
32
17
  export const NonStaticRender = (args: StoryArgs): React.Node => {
33
18
  return (
34
19
  <OldUnitInput
35
20
  apiOptions={{
36
21
  ...ApiOptions.defaults,
37
- staticRender: false,
38
22
  }}
39
23
  value="2 tbsp"
40
24
  onFocus={() => {}}
package/src/widgets/__tests__/__snapshots__/input-number_test.jsx.snap CHANGED
@@ -1,486 +1,5 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`rendering static renders: static render 1`] = `
4
- <div>
5
- <span
6
- class="mock-KatexProvider"
7
- >
8
- <div
9
- class="perseus-renderer perseus-renderer-responsive"
10
- >
11
- <div
12
- class="paragraph"
13
- data-perseus-paragraph-index="0"
14
- >
15
- <div
16
- class="paragraph"
17
- >
18
- Akshat works in a hospital lab.
19
- </div>
20
- </div>
21
- <div
22
- class="paragraph"
23
- data-perseus-paragraph-index="1"
24
- >
25
- <div
26
- class="paragraph"
27
- >
28
- To project blood quantities, he wants to know the probability that more than
29
- <span
30
- style="white-space: nowrap;"
31
- >
32
- <span />
33
- <span
34
- class="mock-TeX"
35
- >
36
- 1
37
- </span>
38
- <span />
39
- </span>
40
- of the next
41
- <span
42
- style="white-space: nowrap;"
43
- >
44
- <span />
45
- <span
46
- class="mock-TeX"
47
- >
48
- 7
49
- </span>
50
- <span />
51
- </span>
52
- donors will have type-A blood. From his previous work, Sorin knows that
53
- <span
54
- style="white-space: nowrap;"
55
- >
56
- <span />
57
- <span
58
- class="mock-TeX"
59
- >
60
- \\dfrac14
61
- </span>
62
- <span />
63
- </span>
64
- of donors have type-A blood.
65
- </div>
66
- </div>
67
- <div
68
- class="paragraph"
69
- data-perseus-paragraph-index="2"
70
- >
71
- <div
72
- class="paragraph"
73
- >
74
- Akshat uses a computer to produce many samples that simulate the next
75
- <span
76
- style="white-space: nowrap;"
77
- >
78
- <span />
79
- <span
80
- class="mock-TeX"
81
- >
82
- 7
83
- </span>
84
- <span />
85
- </span>
86
- donors. The first
87
- <span
88
- style="white-space: nowrap;"
89
- >
90
- <span />
91
- <span
92
- class="mock-TeX"
93
- >
94
- 8
95
- </span>
96
- <span />
97
- </span>
98
- samples are shown in the table below where "
99
- <span
100
- style="white-space: nowrap;"
101
- >
102
- <span />
103
- <span
104
- class="mock-TeX"
105
- >
106
- \\text{\\red{A}}
107
- </span>
108
- <span />
109
- </span>
110
- " represents a donor
111
- <em>
112
- with
113
- </em>
114
- type-A blood, and "
115
- <span
116
- style="white-space: nowrap;"
117
- >
118
- <span />
119
- <span
120
- class="mock-TeX"
121
- >
122
- \\text{\\blue{Z}}
123
- </span>
124
- <span />
125
- </span>
126
- " represents a donor
127
- <em>
128
- without
129
- </em>
130
- type-A blood.
131
- </div>
132
- </div>
133
- <div
134
- class="paragraph"
135
- data-perseus-paragraph-index="3"
136
- >
137
- <div
138
- class="paragraph"
139
- >
140
- <strong>
141
- Based on the samples below, estimate the probability that more than
142
- <span
143
- style="white-space: nowrap;"
144
- >
145
- <span />
146
- <span
147
- class="mock-TeX"
148
- >
149
- 1
150
- </span>
151
- <span />
152
- </span>
153
- of the next
154
- <span
155
- style="white-space: nowrap;"
156
- >
157
- <span />
158
- <span
159
- class="mock-TeX"
160
- >
161
- 7
162
- </span>
163
- <span />
164
- </span>
165
- donors will have type-A blood.
166
- </strong>
167
- If necessary, round your answer to the nearest hundredth.
168
- <div
169
- class="perseus-widget-container widget-nohighlight widget-inline-block"
170
- >
171
- <span
172
- class="math-output perseus-input perseus-interactive"
173
- >
174
- <div
175
- style="text-align: center;"
176
- >
177
- <span
178
- class="mock-TeX"
179
- />
180
- </div>
181
- </span>
182
- </div>
183
- </div>
184
- </div>
185
- <div
186
- class="paragraph"
187
- data-perseus-paragraph-index="4"
188
- >
189
- <div
190
- class="paragraph"
191
- >
192
- <em>
193
- Note: This a small sample to practice with. A larger sample could give a much better estimate.
194
- </em>
195
- </div>
196
- </div>
197
- <div
198
- class="paragraph"
199
- data-perseus-paragraph-index="5"
200
- >
201
- <table>
202
- <thead>
203
- <tr>
204
- <th
205
- scope="col"
206
- style="text-align: center;"
207
- />
208
- <th
209
- scope="col"
210
- style="text-align: center;"
211
- >
212
- Sample
213
- </th>
214
- <th
215
- scope="col"
216
- />
217
- </tr>
218
- </thead>
219
- <tbody>
220
- <tr>
221
- <td
222
- style="text-align: center;"
223
- >
224
- <span
225
- style="white-space: nowrap;"
226
- >
227
- <span />
228
- <span
229
- class="mock-TeX"
230
- >
231
- 1
232
- </span>
233
- <span />
234
- </span>
235
- </td>
236
- <td
237
- style="text-align: center;"
238
- >
239
- <span
240
- style="white-space: nowrap;"
241
- >
242
- <span />
243
- <span
244
- class="mock-TeX"
245
- >
246
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}}
247
- </span>
248
- <span />
249
- </span>
250
- </td>
251
- </tr>
252
- <tr>
253
- <td
254
- style="text-align: center;"
255
- >
256
- <span
257
- style="white-space: nowrap;"
258
- >
259
- <span />
260
- <span
261
- class="mock-TeX"
262
- >
263
- 2
264
- </span>
265
- <span />
266
- </span>
267
- </td>
268
- <td
269
- style="text-align: center;"
270
- >
271
- <span
272
- style="white-space: nowrap;"
273
- >
274
- <span />
275
- <span
276
- class="mock-TeX"
277
- >
278
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
279
- </span>
280
- <span />
281
- </span>
282
- </td>
283
- </tr>
284
- <tr>
285
- <td
286
- style="text-align: center;"
287
- >
288
- <span
289
- style="white-space: nowrap;"
290
- >
291
- <span />
292
- <span
293
- class="mock-TeX"
294
- >
295
- 3
296
- </span>
297
- <span />
298
- </span>
299
- </td>
300
- <td
301
- style="text-align: center;"
302
- >
303
- <span
304
- style="white-space: nowrap;"
305
- >
306
- <span />
307
- <span
308
- class="mock-TeX"
309
- >
310
- \\text{\\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
311
- </span>
312
- <span />
313
- </span>
314
- </td>
315
- </tr>
316
- <tr>
317
- <td
318
- style="text-align: center;"
319
- >
320
- <span
321
- style="white-space: nowrap;"
322
- >
323
- <span />
324
- <span
325
- class="mock-TeX"
326
- >
327
- 4
328
- </span>
329
- <span />
330
- </span>
331
- </td>
332
- <td
333
- style="text-align: center;"
334
- >
335
- <span
336
- style="white-space: nowrap;"
337
- >
338
- <span />
339
- <span
340
- class="mock-TeX"
341
- >
342
- \\text{\\red{A}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
343
- </span>
344
- <span />
345
- </span>
346
- </td>
347
- </tr>
348
- <tr>
349
- <td
350
- style="text-align: center;"
351
- >
352
- <span
353
- style="white-space: nowrap;"
354
- >
355
- <span />
356
- <span
357
- class="mock-TeX"
358
- >
359
- 5
360
- </span>
361
- <span />
362
- </span>
363
- </td>
364
- <td
365
- style="text-align: center;"
366
- >
367
- <span
368
- style="white-space: nowrap;"
369
- >
370
- <span />
371
- <span
372
- class="mock-TeX"
373
- >
374
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\red{A}}
375
- </span>
376
- <span />
377
- </span>
378
- </td>
379
- </tr>
380
- <tr>
381
- <td
382
- style="text-align: center;"
383
- >
384
- <span
385
- style="white-space: nowrap;"
386
- >
387
- <span />
388
- <span
389
- class="mock-TeX"
390
- >
391
- 6
392
- </span>
393
- <span />
394
- </span>
395
- </td>
396
- <td
397
- style="text-align: center;"
398
- >
399
- <span
400
- style="white-space: nowrap;"
401
- >
402
- <span />
403
- <span
404
- class="mock-TeX"
405
- >
406
- \\text{\\blue{Z}, \\red{A}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
407
- </span>
408
- <span />
409
- </span>
410
- </td>
411
- </tr>
412
- <tr>
413
- <td
414
- style="text-align: center;"
415
- >
416
- <span
417
- style="white-space: nowrap;"
418
- >
419
- <span />
420
- <span
421
- class="mock-TeX"
422
- >
423
- 7
424
- </span>
425
- <span />
426
- </span>
427
- </td>
428
- <td
429
- style="text-align: center;"
430
- >
431
- <span
432
- style="white-space: nowrap;"
433
- >
434
- <span />
435
- <span
436
- class="mock-TeX"
437
- >
438
- \\text{\\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}}
439
- </span>
440
- <span />
441
- </span>
442
- </td>
443
- </tr>
444
- <tr>
445
- <td
446
- style="text-align: center;"
447
- >
448
- <span
449
- style="white-space: nowrap;"
450
- >
451
- <span />
452
- <span
453
- class="mock-TeX"
454
- >
455
- 8
456
- </span>
457
- <span />
458
- </span>
459
- </td>
460
- <td
461
- style="text-align: center;"
462
- >
463
- <span
464
- style="white-space: nowrap;"
465
- >
466
- <span />
467
- <span
468
- class="mock-TeX"
469
- >
470
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}}
471
- </span>
472
- <span />
473
- </span>
474
- </td>
475
- </tr>
476
- </tbody>
477
- </table>
478
- </div>
479
- </div>
480
- </span>
481
- </div>
482
- `;
483
-
484
3
  exports[`rendering supports mobile rendering: mobile render 1`] = `
485
4
  <div>
486
5
  <span
package/src/widgets/__tests__/__snapshots__/unit_test.jsx.snap ADDED
@@ -0,0 +1,20 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Unit Widget renders: initial render 1`] = `
4
+ <div>
5
+ <div
6
+ class="old-unit-input"
7
+ >
8
+ <input
9
+ class="perseus-interactive"
10
+ value=""
11
+ />
12
+ <div
13
+ class="error"
14
+ style="display: none;"
15
+ >
16
+ I don't understand that
17
+ </div>
18
+ </div>
19
+ </div>
20
+ `;
package/src/widgets/__tests__/expression_test.jsx CHANGED
@@ -288,16 +288,6 @@ describe("rendering", () => {
288
288
  const mobileInput = await screen.findByRole("textbox");
289
289
  expect(mobileInput).toBeVisible();
290
290
  });
291
-
292
- it("static renders", () => {
293
- // arrange and act
294
- const {container} = renderQuestion(expressionItem2.question, {
295
- staticRender: true,
296
- });
297
-
298
- // Assert
299
- expect(container).toMatchSnapshot("static render");
300
- });
301
291
  });
302
292
 
303
293
  describe("interaction", () => {
package/src/widgets/__tests__/input-number_test.jsx CHANGED
@@ -304,14 +304,6 @@ describe("rendering", () => {
304
304
 
305
305
  expect(container).toMatchSnapshot("mobile render");
306
306
  });
307
-
308
- it("static renders", () => {
309
- const {container} = renderQuestion(question, {
310
- staticRender: true,
311
- });
312
-
313
- expect(container).toMatchSnapshot("static render");
314
- });
315
307
  });
316
308
 
317
309
  describe("focus state", () => {
package/src/widgets/__tests__/numeric-input_test.jsx CHANGED
@@ -390,17 +390,6 @@ describe("Numeric input widget", () => {
390
390
  expect(renderer).toHaveBeenAnsweredCorrectly();
391
391
  });
392
392
 
393
- it("supports being static", () => {
394
- // Arrange
395
- renderQuestion(multipleAnswersWithDecimals, {
396
- staticRender: true,
397
- });
398
-
399
- // Assert
400
- const element = screen.queryByRole("textbox", {hidden: true});
401
- expect(element).toBeNull();
402
- });
403
-
404
393
  it("styles differently on mobile", () => {
405
394
  const {container} = renderQuestion(multipleAnswersWithDecimals, {
406
395
  // I wish this was more clear but this is how mobile