moving stuff

website/playground/EditorState.js

@@ -8,15 +8,12 @@ export default class extends React.Component {
     super();
     this.state = Object.assign(
       {
-        sidebarExpanded: false,
+        showSidebar: false,
-        astPanelVisible: false,
+        showAst: false,
-        docPanelVisible: false,
+        showDoc: false,
-        toggleAstPanelVisible: () =>
+        toggleSidebar: () => this.setState(stateToggler("showSidebar")),
-          this.setState(stateToggler("astPanelVisible")),
+        toggleAst: () => this.setState(stateToggler("showAst")),
-        toggleDocPanelVisible: () =>
+        toggleDoc: () => this.setState(stateToggler("showDoc"))
-          this.setState(stateToggler("docPanelVisible")),
-        toggleSidebarExpanded: () =>
-          this.setState(stateToggler("sidebarExpanded"))
       },
       storage.get("editor_state")
     );

website/playground/Option.js

@@ -1,18 +1,17 @@
 import React from "react";
 
+import { Checkbox } from "./inputs";
+
 export function BooleanOption({ option, value, onChange }) {
   function maybeInvert(value) {
     return option.inverted ? !value : value;
   }
   return (
-    <label>
+    <Checkbox
-      <input
+      label={option.cliName}
-        type="checkbox"
+      checked={maybeInvert(value)}
-        checked={maybeInvert(value)}
+      onChange={checked => onChange(option, maybeInvert(checked))}
-        onChange={ev => onChange(option, maybeInvert(ev.target.checked))}
+    />
-      />{" "}
-      {option.cliName}
-    </label>
   );
 }
 

website/playground/Playground.js

@@ -87,7 +87,7 @@ class Playground extends React.Component {
       formatted,
       loaded,
       options,
-      sidebarExpanded
+      showSidebar
     } = this.state;
 
     if (!loaded) return "Loading...";
@@ -99,13 +99,13 @@ class Playground extends React.Component {
             <div className="editors-container">
               <div
                 className={`options-container ${
-                  editorState.sidebarExpanded ? "open" : ""
+                  editorState.showSidebar ? "open" : ""
                 }`}
               >
                 <div className="options">
                   <SidebarOptions
                     availableOptions={availableOptions}
-                    currentOptions={options}
+                    prettierOptions={options}
                     onOptionValueChange={this.handleOptionValueChange}
                   />
                 </div>
@@ -116,10 +116,10 @@ class Playground extends React.Component {
                   value={content}
                   onChange={this.setContent}
                 />
-                {editorState.astPanelVisible ? (
+                {editorState.showAst ? (
                   <DebugPanel value={"ast here"} />
                 ) : null}
-                {editorState.docPanelVisible ? (
+                {editorState.showDoc ? (
                   <DebugPanel value={"doc here"} />
                 ) : null}
                 <OutputPanel mode="jsx" value={formatted} />
@@ -127,8 +127,8 @@ class Playground extends React.Component {
             </div>
             <div className="bottom-bar">
               <div className="bottom-bar-buttons">
-                <Button onClick={editorState.toggleSidebarExpanded}>
+                <Button onClick={editorState.toggleSidebar}>
-                  {editorState.sidebarExpanded ? "Hide" : "Show"} options
+                  {editorState.showSidebar ? "Hide" : "Show"} options
                 </Button>
                 <Button onClick={this.clearContent}>Clear</Button>
               </div>

website/playground/SidebarOptions.js

@@ -6,7 +6,7 @@ const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
 
 export default function({
   availableOptions,
-  currentOptions,
+  prettierOptions,
   onOptionValueChange
 }) {
   const optionsByCategory = availableOptions.reduce((acc, option) => {
@@ -16,18 +16,22 @@ export default function({
     return acc;
   }, {});
 
-  return CATEGORIES_ORDER.map(category => (
+  return (
-    <details key={category} className="sub-options" open="true">
+    <div className="options">
-      <summary>{category}</summary>
+      {CATEGORIES_ORDER.map(category => (
+        <details key={category} className="sub-options" open="true">
+          <summary>{category}</summary>
 
-      {(optionsByCategory[category] || []).map(option => (
+          {(optionsByCategory[category] || []).map(option => (
-        <Option
+            <Option
-          key={option.name}
+              key={option.name}
-          option={option}
+              option={option}
-          value={currentOptions[option.name]}
+              value={prettierOptions[option.name]}
-          onChange={onOptionValueChange}
+              onChange={onOptionValueChange}
-        />
+            />
+          ))}
+        </details>
       ))}
-    </details>
+    </div>
-  ));
+  );
 }

website/playground/inputs.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+export function Checkbox({ label: _label, checked, onChange }) {
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={ev => onChange(ev.target.checked)}
+      />{" "}
+      {_label}
+    </label>
+  );
+}