@doenet/doenetml 0.6.0-alpha1

package/src/test/testViewer.jsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import DoenetML from "../DoenetML";
+import { plainText as doenetML } from "./testCode.doenet";
+import Button from "../uiComponents/Button";
+
+export default function TestViewer() {
+  const defaultTestSettings = {
+    requestedVariantIndex: 1,
+    showCorrectness: true,
+    readOnly: false,
+    showFeedback: true,
+    showHints: true,
+  };
+
+  const [controlsVisible, setControlsVisible] = useState(false);
+  const [testSettings, setTestSettings] = useState(defaultTestSettings);
+  const [updateNumber, setUpdateNumber] = useState(0);
+
+  let {
+    requestedVariantIndex,
+    showCorrectness,
+    readOnly,
+    showFeedback,
+    showHints,
+  } = testSettings;
+
+  let controls = null;
+  let buttonText = "show";
+  if (controlsVisible) {
+    buttonText = "hide";
+    controls = (
+      <div style={{ padding: "8px" }}>
+        <p>
+          The DoenetML is displayed is loaded from the file:{" "}
+          <code>src/test/testCode.doenet</code>.
+        </p>
+
+        <div>
+          <Button
+            onClick={() => {
+              setTestSettings(defaultTestSettings);
+              setUpdateNumber((was) => was + 1);
+            }}
+            value="Reset"
+          />
+        </div>
+        <hr />
+        <div>
+          <label>
+            {" "}
+            <input
+              type="checkbox"
+              checked={showCorrectness}
+              onChange={() => {
+                setTestSettings((was) => {
+                  let newObj = { ...was };
+                  newObj.showCorrectness = !was.showCorrectness;
+                  return newObj;
+                });
+                setUpdateNumber((was) => was + 1);
+              }}
+            />
+            Show Correctness
+          </label>
+        </div>
+        <div>
+          <label>
+            {" "}
+            <input
+              type="checkbox"
+              checked={readOnly}
+              onChange={() => {
+                setTestSettings((was) => {
+                  let newObj = { ...was };
+                  newObj.readOnly = !was.readOnly;
+                  return newObj;
+                });
+                setUpdateNumber((was) => was + 1);
+              }}
+            />
+            Read Only
+          </label>
+        </div>
+        <div>
+          <label>
+            {" "}
+            <input
+              type="checkbox"
+              checked={showFeedback}
+              onChange={() => {
+                setTestSettings((was) => {
+                  let newObj = { ...was };
+                  newObj.showFeedback = !was.showFeedback;
+                  return newObj;
+                });
+                setUpdateNumber((was) => was + 1);
+              }}
+            />
+            Show Feedback
+          </label>
+        </div>
+        <div>
+          <label>
+            {" "}
+            <input
+              type="checkbox"
+              checked={showHints}
+              onChange={() => {
+                setTestSettings((was) => {
+                  let newObj = { ...was };
+                  newObj.showHints = !was.showHints;
+                  return newObj;
+                });
+                setUpdateNumber((was) => was + 1);
+              }}
+            />
+            Show Hints
+          </label>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div
+        style={{
+          backgroundColor: "#e3e3e3",
+          marginBottom: "12px",
+          padding: "8px",
+        }}
+      >
+        <h3>
+          <div style={{ display: "flex" }}>
+            Test DoenetML
+            <Button
+              onClick={() => setControlsVisible((was) => !was)}
+              value={buttonText + " controls"}
+              style={{ marginLeft: "12px" }}
+            />
+          </div>
+        </h3>
+        {controls}
+      </div>
+      <DoenetML
+        key={"doenetml" + updateNumber}
+        doenetML={doenetML}
+        flags={{
+          showCorrectness,
+          readOnly,
+          showFeedback,
+          showHints,
+        }}
+        addVirtualKeyboard={true}
+      />
+    </div>
+  );
+}

package/src/uiComponents/ActionButton.jsx

@@ -0,0 +1,157 @@
+import React from "react";
+import styled from "styled-components";
+
+const Button = styled.button`
+  margin: ${(props) => props.theme.margin};
+  height: 24px;
+  width: ${(props) => props.width};
+  border: ${(props) => props.theme.border};
+  color: white;
+  background-color: ${(props) =>
+    props.alert ? "var(--mainRed)" : "var(--mainBlue)"};
+  border-radius: ${(props) => props.theme.borderRadius};
+  padding: ${(props) => props.theme.padding};
+  cursor: pointer;
+  font-size: 12px;
+
+  &:hover {
+    // Button color lightens on hover
+    color: black;
+    background-color: ${(props) =>
+      props.alert ? "var(--lightRed)" : "var(--lightBlue)"};
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: ${(props) => props.theme.outlineOffset};
+  }
+`;
+
+Button.defaultProps = {
+  theme: {
+    margin: "0px 4px 0px 4px",
+    borderRadius: "var(--mainBorderRadius)",
+    padding: "0px 10px 0px 10px",
+    border: "none",
+    outlineOffset: "-4px",
+  },
+};
+
+const Label = styled.p`
+  font-size: 14px;
+  display: ${(props) => props.labelVisible};
+  margin-right: 5px;
+  margin-left: 4px;
+  margin-bottom: ${(props) => (props.align == "flex" ? "none" : "2px")};
+`;
+
+const Container = styled.div`
+  display: ${(props) => props.align};
+  /* width: 100%; */
+  min-width: 0;
+  align-items: center;
+`;
+
+export default function ActionButton(props) {
+  const alert = props.alert ? props.alert : null;
+  //Assume small
+
+  var container = {};
+  var align = "flex";
+  var actionButton = {
+    value: "Action Button",
+  };
+
+  if (props.width) {
+    if (props.width === "menu") {
+      // Makes the action button group the correct width in the menu panel
+      // Does not work when 235px due to the LabelContainer div in ActionButtonGroup
+      actionButton.width = "var(--menuWidth)";
+      if (props.label) {
+        container.width = "var(--menuWidth)";
+        actionButton.width = "100%";
+      }
+    }
+  }
+
+  const labelVisible = props.label ? "static" : "none";
+  var label = "";
+  if (props.label) {
+    label = props.label;
+    if (props.vertical) {
+      align = "static";
+    }
+  }
+
+  var icon = "";
+  if (props.value || props.icon) {
+    if (props.value && props.icon) {
+      icon = props.icon;
+      actionButton.value = props.value;
+    } else if (props.value) {
+      actionButton.value = props.value;
+    } else if (props.icon) {
+      icon = props.icon;
+      actionButton.value = "";
+    }
+  }
+
+  if (props.num === "first") {
+    actionButton.borderRadius = "5px 0px 0px 5px";
+  }
+
+  if (props.num === "last") {
+    actionButton.borderRadius = "0px 5px 5px 0px";
+  }
+
+  if (props.num === "first_vert") {
+    actionButton.borderRadius = "5px 5px 0px 0px";
+  }
+
+  if (props.num === "last_vert") {
+    actionButton.borderRadius = "0px 0px 5px 5px";
+  }
+
+  if (props.disabled) {
+    actionButton.backgroundColor = "var(--mainGray)";
+    actionButton.color = "black";
+    actionButton.cursor = "not-allowed";
+  }
+
+  if (props.overflow === "no_overflow") {
+    actionButton.overflow = "hidden";
+    actionButton.textOverflow = "ellipsis";
+    actionButton.whitespace = "nowrap";
+  }
+
+  function handleClick(e) {
+    if (props.onClick) props.onClick(e);
+  }
+
+  return (
+    <>
+      <Container style={container} align={align}>
+        <Label labelVisible={labelVisible} align={align}>
+          {label}
+        </Label>
+        <Button
+          aria-labelledby={label}
+          aria-label={actionButton.value}
+          aria-disabled={props.disabled}
+          id={props.id}
+          data-test={props.dataTest}
+          style={actionButton}
+          alert={alert}
+          disabled={props.disabled}
+          onClick={(e) => {
+            if (props.disabled !== true) {
+              handleClick(e);
+            }
+          }}
+        >
+          {icon} {actionButton.value}
+        </Button>
+      </Container>
+    </>
+  );
+}

package/src/uiComponents/ActionButtonGroup.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
+
+const Container = styled.div`
+  /* margin-left: 3px; */
+  display: ${(props) => (props.vertical ? "static" : "flex")};
+  overflow: auto;
+  min-width: 0;
+  /* flex-wrap: wrap; */
+`;
+
+const LabelContainer = styled.div`
+  display: ${(props) => props.align};
+  width: ${(props) => (props.width == "menu" ? "var(--menuWidth)" : "")};
+  align-items: ${(props) => props.alignItems};
+`;
+
+const Label = styled.p`
+  font-size: 14px;
+  display: ${(props) => props.labelVisible};
+  margin-right: 5px;
+  margin-bottom: ${(props) => (props.align == "flex" ? "none" : "2px")};
+`;
+
+const actionGroup = {
+  // margin: '0px -2px 0px -2px',
+  borderRadius: "0",
+  padding: "0px 12px 0px 10px",
+  border: "1px solid var(--mainGray)", // Adds a light border around each button in the group
+  outlineOffset: "-6px",
+};
+
+const verticalActionGroup = {
+  margin: "0px 4px 0px 4px",
+  borderRadius: "0",
+  padding: "0px 10px 0px 10px",
+  border: "1px solid var(--mainGray)",
+  outlineOffset: "-6px",
+};
+
+const ActionButtonGroup = (props) => {
+  let first_prop = props.vertical ? "first_vert" : "first";
+  let last_prop = props.vertical ? "last_vert" : "last";
+  let overflow_prop = props.width ? "no_overflow" : "overflow";
+  let elem = React.Children.toArray(props.children);
+  if (elem.length > 1) {
+    elem = [
+      React.cloneElement(elem[0], { num: first_prop, overflow: overflow_prop }),
+    ]
+      .concat(
+        elem
+          .slice(1, -1)
+          .map((x) => React.cloneElement(x, { overflow: overflow_prop })),
+      )
+      .concat(
+        React.cloneElement(elem[elem.length - 1], {
+          num: last_prop,
+          overflow: overflow_prop,
+        }),
+      );
+  }
+
+  const labelVisible = props.label ? "static" : "none";
+  var label = "";
+  var align = "flex";
+  var alignItems = "center";
+
+  if (props.label) {
+    label = props.label;
+    if (props.verticalLabel) {
+      align = "static";
+    }
+  }
+
+  return (
+    <>
+      <LabelContainer align={align} alignItems={alignItems} width={props.width}>
+        <Label labelVisible={labelVisible} align={align}>
+          {label}
+        </Label>
+        <Container vertical={props.vertical}>
+          <ThemeProvider
+            theme={props.vertical ? verticalActionGroup : actionGroup}
+          >
+            {elem}
+          </ThemeProvider>
+        </Container>
+      </LabelContainer>
+    </>
+  );
+};
+
+export default ActionButtonGroup;

package/src/uiComponents/Button.jsx

@@ -0,0 +1,160 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { MathJax } from "better-react-mathjax";
+
+const ButtonStyling = styled.button`
+  margin: ${(props) => props.theme.margin};
+  height: 24px;
+  width: ${(props) => props.width};
+  border-style: hidden;
+  // border-color: var(--canvastext);
+  // border-width: 2px;
+  color: white;
+  background-color: ${(props) =>
+    props.alert ? "var(--mainRed)" : "var(--mainBlue)"};
+  border-radius: ${(props) => props.theme.borderRadius};
+  padding: ${(props) => props.theme.padding};
+  cursor: pointer;
+  font-size: 12px;
+  border-radius: 20px;
+
+  &:hover {
+    background-color: ${(props) =>
+      props.alert ? "var(--lightRed)" : "var(--lightBlue)"};
+    color: black;
+  }
+
+  &:focus {
+    outline: 2px solid
+      ${(props) =>
+        props.alert
+          ? "var(--mainRed)"
+          : props.disabled
+          ? "var(--canvastext)"
+          : "var(--mainBlue)"};
+    outline-offset: 2px;
+  }
+`;
+
+ButtonStyling.defaultProps = {
+  theme: {
+    margin: 0,
+    borderRadius: "var(--mainBorderRadius)",
+    padding: "0 10px",
+  },
+};
+
+const Label = styled.p`
+  font-size: 14px;
+  display: ${(props) => props.labelVisible};
+  margin-right: 5px;
+  margin-bottom: ${(props) => (props.align == "flex" ? "none" : "2px")};
+`;
+
+const Container = styled.div`
+  display: ${(props) => (props.align ? props.align : "inline-block")};
+  width: auto;
+  align-items: center;
+`;
+
+export default function Button(props) {
+  //Assume small
+  var container = {};
+  var align = "flex";
+  var button = {
+    value: "Button",
+  };
+  // var button = {
+  //       margin: '0px',
+  //       height: '24px',
+  //       border: `hidden`,
+  //       backgroundColor: `${doenetComponentForegroundActive}`,
+  //       fontFamily: 'Arial',
+  //       color: '#FFFFFF',
+  //       borderRadius: '20px',
+  //       value: 'Button',
+  //       padding: '0px 10px 0px 10px',
+  //       cursor: 'pointer',
+  //       fontSize: '12px'
+  //     };
+  if (props.width) {
+    if (props.width === "menu") {
+      button.width = "var(--menuWidth)";
+      if (props.label) {
+        container.width = "var(--menuWidth)";
+        button.width = "100%";
+      }
+    }
+  }
+
+  const labelVisible = props.label ? "static" : "none";
+  var label = "";
+  if (props.label) {
+    label = props.label;
+    if (props.vertical) {
+      align = "static";
+    }
+  }
+
+  var icon = "";
+  if (props.value || props.icon) {
+    if (props.value && props.icon) {
+      icon = props.icon;
+      button.value = props.value;
+    } else if (props.value) {
+      button.value = props.value;
+    } else if (props.icon) {
+      icon = props.icon;
+      button.value = "";
+    }
+    if (props.value && props.valueHasLatex) {
+      button.value = (
+        <MathJax hideUntilTypeset={"first"} inline dynamic>
+          {button.value}
+        </MathJax>
+      );
+    }
+  }
+
+  // if (props.alert) {
+  //   button.backgroundColor = 'var(--mainRed)'
+  // }
+
+  if (props.disabled) {
+    button.backgroundColor = "var(--mainGray)";
+    button.color = "var(--canvastext)";
+    button.cursor = "not-allowed";
+  }
+
+  // if (props.value) {
+  //     button.value = props.value;
+  // };
+
+  function handleClick(e) {
+    if (props.onClick) props.onClick(e);
+  }
+
+  return (
+    <>
+      <Container style={container} align={align}>
+        <Label labelVisible={labelVisible} align={align}>
+          {label}
+        </Label>
+        <ButtonStyling
+          disabled={props.disabled}
+          aria-disabled={props.disabled}
+          aria-labelledby={label}
+          aria-label={button.value}
+          data-test={props.dataTest}
+          style={button}
+          {...props}
+          onClick={(e) => {
+            handleClick(e);
+          }}
+        >
+          {icon} {button.value}
+        </ButtonStyling>
+      </Container>
+    </>
+  );
+}

package/src/uiComponents/ButtonGroup.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
+
+const Container = styled.div`
+  display: ${(props) => (props.vertical ? "static" : "flex")};
+  width: ${(props) => (props.width == "menu" ? "var(--menuWidth)" : "")};
+  /* flex-wrap: wrap; */
+  // margin: 2px 0px 2px 0px
+  /* overflow: clip; */
+`;
+
+export default function ButtonGroup(props) {
+  const buttonGroup = {
+    margin: "0px 2px 0px 2px",
+    borderRadius: "0",
+    padding: "0px 12px 0px 10px",
+  };
+
+  const verticalButtonGroup = {
+    margin: "4px 4px 4px 4px",
+    borderRadius: "0",
+    padding: "0px 10px 0px 10px",
+  };
+
+  let elem = React.Children.toArray(props.children);
+  // if (elem.length > 1) {
+  //   elem = [React.cloneElement(elem[0], {num: 'first'})]
+  //     .concat(elem.slice(1,-1))
+  //     .concat(React.cloneElement(elem[elem.length - 1], {num: 'last'}));
+  // }
+  return (
+    <Container vertical={props.vertical} width={props.width}>
+      <ThemeProvider theme={props.vertical ? verticalButtonGroup : buttonGroup}>
+        {elem}
+      </ThemeProvider>
+    </Container>
+  );
+}
+// export default function ButtonGroup(props) {
+//     const defaultValue = props.data.filter(d => d.default)[0].value;
+//     let [currentValue, setCurrentValue] = useState(defaultValue);
+//     const handleClick = function (value) {
+//         setCurrentValue(value);
+//         props.clickCallBack(value);
+//     }
+
+//     return (
+//         <div style={{ border: '1px solid grey', width: '55px', height: '23px', borderRadius: '5px', padding: '1px', display: 'flex', alignItems: 'center' }}>
+//             {props.data.map((d,i) =>
+//                 <button key={i} style={{ backroundColor: "transperant", borderRadius: '5px', border: 'none', cursor: 'pointer', outline: 'none', width: '50%', height: '18px', backgroundColor: currentValue === d.value ? '#E2E2E2' : 'white' }}>
+//                     <FontAwesomeIcon onClick={() => { handleClick(d.value) }} icon={d.icon} style={{ fontSize: '15px' }} />
+//                 </button>
+//             )}
+//         </div>
+//     );
+// }