@pie-element/number-line 0.1.0

package/src/author/number-text-field.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/number-text-field.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import { NumberTextField as NTF } from '@pie-lib/config-ui';
+import { styled } from '@mui/material/styles';
+
+const StyledNumberTextField: any = styled(NTF)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+}));
+
+const MiniField: any = styled(NTF)({
+  maxWidth: '100px',
+});
+
+const NumberTextField = (props) => {
+  return <StyledNumberTextField {...props} variant="outlined" />;
+};
+
+export { MiniField };
+export default NumberTextField;

package/src/author/point-config.tsx

@@ -0,0 +1,93 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/point-config.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import Button from '@mui/material/Button';
+import React from 'react';
+import { pointChooser  } from '../delivery/index.js';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+const { Point } = pointChooser;
+
+const DisplayToggles: any = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(2.5),
+  '& > :first-child': {
+    marginRight: theme.spacing(1),
+  },
+}));
+
+class PointConfig extends React.Component {
+  static propTypes = {
+    onSelectionChange: PropTypes.func,
+    selection: PropTypes.object,
+    availableTools: PropTypes.array,
+    hideButtons: PropTypes.bool,
+  };
+  constructor(props) {
+    super(props);
+  }
+
+  toggle(point) {
+    const update = { ...this.props.selection };
+    update[point] = !update[point];
+    this._propsUpdate(update);
+  }
+
+  toggleAll(value) {
+    const display = [...PointConfig.types].reduce((acc, point) => {
+      acc[point] = value;
+
+      return acc;
+    }, {});
+
+    this._propsUpdate(display);
+  }
+
+  _propsUpdate(selection) {
+    this.props.onSelectionChange(selection);
+  }
+
+  active(point) {
+    return this.props.selection[point] === true; // ? 'active' : '';
+  }
+
+  render() {
+    // Setting default value if not passed in configuration properties.
+    const { availableTools, hideButtons = false } = this.props;
+
+    const icons = (availableTools || []).map((point) => {
+      return (
+        <Point
+          iconKey={point.toLowerCase()}
+          key={point.toLowerCase()}
+          onClick={this.toggle.bind(this, point)}
+          active={this.active(point)}
+        />
+      );
+    });
+
+    return (
+      <div>
+        <div>{icons}</div>
+        <DisplayToggles hidden={hideButtons}>
+          <Button variant="outlined" size="small" onClick={this.toggleAll.bind(this, true)}>
+            Select All
+          </Button>
+          <Button variant="outlined" size="small" onClick={this.toggleAll.bind(this, false)}>
+            None
+          </Button>
+        </DisplayToggles>
+      </div>
+    );
+  }
+}
+
+PointConfig.types = ['PF', 'LFF', 'LEF', 'LFE', 'LEE', 'RFN', 'RFP', 'REN', 'REP'];
+
+export default PointConfig;

package/src/author/size.tsx

@@ -0,0 +1,74 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/size.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { NumberTextFieldCustom } from '@pie-lib/config-ui';
+
+const FlexRow: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+});
+
+const FlexCol: any = styled('div')({
+  display: 'flex',
+  flexFlow: 'column',
+});
+
+const MinMaxLabel: any = styled('label')({
+  fontSize: 'small',
+  color: 'gray',
+});
+
+const StyledNumberTextFieldCustom: any = styled(NumberTextFieldCustom)({
+  '& input': {
+    cursor: 'default',
+  },
+});
+
+const Size = (props) => {
+  // Setting default value if not passed in configuration properties.
+  const { size = { width: 500 }, min = 150, max = 800, step = 20, onChange } = props;
+  const changeWidth = (e, width) => onChange({ ...props.size, width });
+  return (
+    <FlexRow>
+      <FlexCol>
+        <label>Width (px)</label>
+        <MinMaxLabel>
+          Min {min}, Max {max}
+        </MinMaxLabel>
+      </FlexCol>
+      <StyledNumberTextFieldCustom
+        value={size.width}
+        min={min}
+        max={max}
+        step={step}
+        onlyIntegersAllowed={true}
+        onChange={changeWidth}
+        variant={'outlined'}
+      />
+    </FlexRow>
+  );
+};
+
+Size.propTypes = {
+  size: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number,
+  }),
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Size;

package/src/author/ticks.tsx

@@ -0,0 +1,272 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/ticks.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { NumberTextFieldCustom } from '@pie-lib/config-ui';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import * as math from 'mathjs';
+import { color } from '@pie-lib/render-ui';
+
+const DisplayFlex: any = styled('div')({
+  display: 'flex',
+});
+
+const FlexCol1: any = styled('div')({
+  display: 'flex',
+  flexFlow: 'column',
+  gap: '10px',
+  width: '65%',
+});
+
+const FlexCol2: any = styled('div')({
+  display: 'flex',
+  flexFlow: 'column',
+  gap: '10px',
+});
+
+const RadioInputs: any = styled('tr')({
+  display: 'flex',
+  alignItems: 'center',
+  paddingTop: '5px',
+  paddingBottom: '5px',
+});
+
+const TableFixed: any = styled('table')({
+  tableLayout: 'fixed',
+  width: '100%',
+});
+
+const LabelWidth: any = styled('td')({
+  width: '35%',
+});
+
+const CustomColorRadio: any = styled(Radio)({
+  color: `${color.tertiary()} !important`,
+});
+
+const StyledNumberTextFieldCustom: any = styled(NumberTextFieldCustom)({
+  '& input': {
+    maxWidth: '145px',
+    cursor: 'default',
+  },
+});
+
+// This const will store available tick interval types.
+export const TickIntervals = ['Integer', 'Fraction', 'Decimal'];
+
+export const Ticks = (props) => {
+  const { ticks, onChange, minorLimits, minorValues, majorValues } = props;
+
+  //Format decimal value of label interval to fraction
+  const fractionMajor = math.fraction(math.number(ticks.major));
+  const fractionMajorString =
+    fractionMajor.d === 1 ? fractionMajor.n.toString() : fractionMajor.n + '/' + fractionMajor.d;
+
+  /*
+   * Function to handle tick interval type radio group change
+   * @param e change event object
+   * @param tickIntervalType string value for changed tick interval type
+   * */
+  const changeTickIntervalType = (e, tickIntervalType) => {
+    if (!TickIntervals.includes(tickIntervalType)) {
+      return;
+    }
+    if (tickIntervalType === 'Integer') {
+      ticks.minor = ticks.integerTick;
+    } else if (tickIntervalType === 'Decimal') {
+      ticks.minor = ticks.decimalTick;
+    } else if (tickIntervalType === 'Fraction') {
+      ticks.minor = math.number(math.fraction(ticks.fractionTick));
+    }
+    ticks.tickIntervalType = tickIntervalType;
+    onChange({ ticks });
+  };
+
+  /*
+   * Function to handle change in integer tick interval
+   * @param e change event object
+   * @param integerTick number value for changed tick
+   * */
+  const changeIntegerTick = (e, integerTick) => {
+    if (ticks.tickIntervalType === 'Integer') {
+      ticks.integerTick = integerTick;
+      ticks.minor = integerTick;
+      onChange({ ticks });
+    }
+  };
+
+  /*
+   * Function to handle change in fraction tick interval
+   * @param e change event object
+   * @param fractionTick string value for changed tick
+   * */
+  const changeFractionTick = (e, fractionTick) => {
+    if (ticks.tickIntervalType === 'Fraction') {
+      ticks.fractionTick = fractionTick;
+      ticks.minor = math.number(math.fraction(fractionTick));
+      onChange({ ticks });
+    }
+  };
+
+  /*
+   * Function to handle change in decimal tick interval
+   * @param e change event object
+   * @param decimalTick number value for changed tick
+   * */
+  const changeDecimalTick = (e, decimalTick) => {
+    if (ticks.tickIntervalType === 'Decimal') {
+      ticks.decimalTick = decimalTick;
+      ticks.minor = decimalTick;
+      onChange({ ticks });
+    }
+  };
+
+  /*
+   * Function to handle change in fraction label interval value
+   * @param e change event object
+   * @param fractionLabel string value for changed label interval
+   * */
+  const changeFractionLabel = (e, fractionLabel) => {
+    if (ticks.tickIntervalType === 'Fraction') {
+      ticks.major = math.number(math.fraction(fractionLabel));
+      onChange({ ticks });
+    }
+  };
+
+  /*
+   * Function to handle change in decimal label interval value
+   * @param e change event object
+   * @param decimalLabel number value for changed label interval
+   * */
+  const changeDecimalLabel = (e, decimalLabel) => {
+    if (ticks.tickIntervalType === 'Decimal' || ticks.tickIntervalType === 'Integer') {
+      ticks.major = decimalLabel;
+      onChange({ ticks });
+    }
+  };
+
+  return (
+    <DisplayFlex>
+      <FlexCol1>
+        <label>Tick Interval</label>
+        <RadioGroup
+          aria-label="tick-interval-type"
+          name="tickIntervalType"
+          value={ticks.tickIntervalType}
+          onChange={changeTickIntervalType}
+        >
+          <TableFixed>
+            <tbody>
+              <RadioInputs>
+                <LabelWidth>
+                  <FormControlLabel
+                    value="Integer"
+                    control={<CustomColorRadio checked={ticks.tickIntervalType === 'Integer'} />}
+                    label="Integer"
+                    disabled={minorLimits.max < 1}
+                  />
+                </LabelWidth>
+                <td>
+                  <StyledNumberTextFieldCustom
+                    value={ticks.integerTick}
+                    min={math.number(math.ceil(minorLimits.min))}
+                    max={math.number(math.floor(minorLimits.max))}
+                    step={1}
+                    onlyIntegersAllowed={true}
+                    onChange={changeIntegerTick}
+                    variant={'outlined'}
+                    type={'number'}
+                    disabled={ticks.tickIntervalType !== 'Integer' || minorLimits.max < 1}
+                    key={
+                      ticks.tickIntervalType !== 'Integer' || minorLimits.max < 1 ? 'integerDisabled' : 'integerEnabled'
+                    }
+                  />
+                </td>
+              </RadioInputs>
+              <RadioInputs>
+                <LabelWidth>
+                  <FormControlLabel
+                    value="Fraction"
+                    control={<CustomColorRadio checked={ticks.tickIntervalType === 'Fraction'} />}
+                    label="Unit Fraction"
+                    disabled={minorValues.fraction.length === 0}
+                  />
+                </LabelWidth>
+                <td>
+                  <StyledNumberTextFieldCustom
+                    value={ticks.fractionTick}
+                    customValues={minorValues.fraction}
+                    onChange={changeFractionTick}
+                    variant={'outlined'}
+                    type={'text'}
+                    disabled={ticks.tickIntervalType !== 'Fraction' || minorValues.fraction.length === 0}
+                    key={
+                      ticks.tickIntervalType !== 'Fraction' || minorValues.fraction.length === 0
+                        ? 'fractionDisabled'
+                        : 'fractionEnabled'
+                    }
+                  />
+                </td>
+              </RadioInputs>
+              <RadioInputs>
+                <LabelWidth>
+                  <FormControlLabel
+                    value="Decimal"
+                    control={<CustomColorRadio checked={ticks.tickIntervalType === 'Decimal'} />}
+                    label="Decimal"
+                    disabled={minorValues.decimal.length === 0}
+                  />
+                </LabelWidth>
+                <td>
+                  <StyledNumberTextFieldCustom
+                    value={ticks.decimalTick}
+                    customValues={minorValues.decimal}
+                    onChange={changeDecimalTick}
+                    variant={'outlined'}
+                    type={'number'}
+                    disabled={ticks.tickIntervalType !== 'Decimal' || minorValues.decimal.length === 0}
+                    key={
+                      ticks.tickIntervalType !== 'Decimal' || minorValues.decimal.length === 0
+                        ? 'decimalDisabled'
+                        : 'decimalEnabled'
+                    }
+                  />
+                </td>
+              </RadioInputs>
+            </tbody>
+          </TableFixed>
+        </RadioGroup>
+      </FlexCol1>
+      <FlexCol2>
+        <label>Label Interval</label>
+        <StyledNumberTextFieldCustom
+          value={ticks.tickIntervalType === 'Fraction' ? fractionMajorString : ticks.major}
+          variant={'outlined'}
+          customValues={ticks.tickIntervalType === 'Fraction' ? majorValues.fraction : majorValues.decimal}
+          type={ticks.tickIntervalType === 'Fraction' ? 'text' : 'number'}
+          onChange={ticks.tickIntervalType === 'Fraction' ? changeFractionLabel : changeDecimalLabel}
+        />
+      </FlexCol2>
+    </DisplayFlex>
+  );
+};
+Ticks.propTypes = {
+  onChange: PropTypes.func,
+  ticks: PropTypes.object,
+  minorLimits: PropTypes.object,
+  minorValues: PropTypes.object,
+  majorValues: PropTypes.object,
+};
+
+export default Ticks;

package/src/author/utils.ts

@@ -0,0 +1,16 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export const generateValidationMessage = () => {
+  const baselineValidationMessage =
+    '\nThe correct answer should include at least one number line object.';
+
+  return 'Validation requirements:' + baselineValidationMessage;
+};

package/src/controller/defaults.ts

@@ -0,0 +1,40 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/controller/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export default {
+  correctResponse: [],
+  feedback: {
+    correct: { default: 'Correct', type: 'none' },
+    incorrect: { default: 'Incorrect', type: 'none' },
+    partial: { default: 'Nearly', type: 'none' },
+  },
+  graph: {
+    arrows: { left: true, right: true },
+    availableTypes: {
+      PF: true,
+    },
+    domain: { min: -1, max: 1 },
+    exhibitOnly: false,
+    initialElements: [],
+    initialType: 'PF',
+    maxNumberOfPoints: 1,
+    ticks: { minor: 0.125, major: 0.5, tickIntervalType: 'Decimal' },
+    title: '',
+    width: 500,
+  },
+  prompt: '',
+  promptEnabled: true,
+  rationale: '',
+  rationaleEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+  toolbarEditorPosition: 'bottom',
+  widthEnabled: true,
+};