moving files around

website/playground/Playground.js

@@ -2,12 +2,17 @@ import React from "react";
 
 import Button from "./Button";
 import EditorState from "./EditorState";
-import { Checkbox } from "./inputs";
 import { DebugPanel, InputPanel, OutputPanel } from "./panels";
 import PrettierFormat from "./PrettierFormat";
-import SidebarOptions from "./SidebarOptions";
+
+import { Sidebar, SidebarCategory } from "./sidebar/components";
+import Option from "./sidebar/options";
+import { Checkbox } from "./sidebar/inputs";
+
 import WorkerApi from "./WorkerApi";
 
+const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
+
 const ENABLED_OPTIONS = [
   "parser",
   "printWidth",
@@ -24,23 +29,6 @@ const ENABLED_OPTIONS = [
   "requirePragma"
 ].map(option => (typeof option === "string" ? { name: option } : option));
 
-function Sidebar({ visible, children }) {
-  return (
-    <div className={`options-container ${visible ? "open" : ""}`}>
-      <div className="options">{children}</div>
-    </div>
-  );
-}
-
-function SidebarCategory({ title, children }) {
-  return (
-    <details className="sub-options" open="true">
-      <summary>{title}</summary>
-      {children}
-    </details>
-  );
-}
-
 class Playground extends React.Component {
   constructor() {
     super();
@@ -98,11 +86,21 @@ class Playground extends React.Component {
           <div className="playground-container">
             <div className="editors-container">
               <Sidebar visible={editorState.showSidebar}>
-                <SidebarOptions
-                  availableOptions={availableOptions}
-                  prettierOptions={options}
-                  onOptionValueChange={this.handleOptionValueChange}
-                />
+                {categorizeOptions(
+                  availableOptions,
+                  (category, categoryOptions) => (
+                    <SidebarCategory key={category} title={category}>
+                      {categoryOptions.map(option => (
+                        <Option
+                          key={option.name}
+                          option={option}
+                          value={options[option.name]}
+                          onChange={this.handleOptionValueChange}
+                        />
+                      ))}
+                    </SidebarCategory>
+                  )
+                )}
                 <SidebarCategory title="Debug">
                   <Checkbox
                     label="show AST"
@@ -169,6 +167,19 @@ class Playground extends React.Component {
   }
 }
 
+function categorizeOptions(availableOptions, render) {
+  const optionsByCategory = availableOptions.reduce((acc, option) => {
+    let options;
+    acc[option.category] = options = acc[option.category] || [];
+    options.push(option);
+    return acc;
+  }, {});
+
+  return CATEGORIES_ORDER.filter(c => optionsByCategory[c]).map(category =>
+    render(category, optionsByCategory[category])
+  );
+}
+
 function getDefaultOptions(availableOptions) {
   return availableOptions.reduce((acc, option) => {
     acc[option.name] = option.default;

website/playground/SidebarOptions.js

@@ -1,33 +0,0 @@
-import React from "react";
-
-import Option from "./Option";
-
-const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
-
-export default function({
-  availableOptions,
-  prettierOptions,
-  onOptionValueChange
-}) {
-  const optionsByCategory = availableOptions.reduce((acc, option) => {
-    let options;
-    acc[option.category] = options = acc[option.category] || [];
-    options.push(option);
-    return acc;
-  }, {});
-
-  return CATEGORIES_ORDER.map(category => (
-    <details key={category} className="sub-options" open="true">
-      <summary>{category}</summary>
-
-      {(optionsByCategory[category] || []).map(option => (
-        <Option
-          key={option.name}
-          option={option}
-          value={prettierOptions[option.name]}
-          onChange={onOptionValueChange}
-        />
-      ))}
-    </details>
-  ));
-}

website/playground/inputs.js

@@ -1,14 +0,0 @@
-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>
-  );
-}

website/playground/sidebar/components.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export function Sidebar({ visible, children }) {
+  return (
+    <div className={`options-container ${visible ? "open" : ""}`}>
+      <div className="options">{children}</div>
+    </div>
+  );
+}
+
+export function SidebarCategory({ title, children }) {
+  return (
+    <details className="sub-options" open="true">
+      <summary>{title}</summary>
+      {children}
+    </details>
+  );
+}

website/playground/sidebar/inputs.js

@@ -0,0 +1,52 @@
+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>
+  );
+}
+
+export function Select({ label: _label, values, selected, onChange }) {
+  return (
+    <label>
+      {_label}{" "}
+      <select onChange={ev => onChange(ev.target.value)}>
+        {values.map(val => (
+          <option value={val} selected={val === selected}>
+            {val}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+export function NumberInput({
+  label: _label,
+  value,
+  min,
+  max,
+  step,
+  onChange
+}) {
+  return (
+    <label>
+      {_label}{" "}
+      <input
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={ev => onChange(parseInt(ev.target.value, 10))}
+      />
+    </label>
+  );
+}

website/playground/sidebar/options.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Checkbox } from "./inputs";
+import { Checkbox, Select, NumberInput } from "./inputs";
 
 export function BooleanOption({ option, value, onChange }) {
   function maybeInvert(value) {
@@ -17,32 +17,25 @@ export function BooleanOption({ option, value, onChange }) {
 
 export function ChoiceOption({ option, value, onChange }) {
   return (
-    <label>
-      {option.cliName}{" "}
-      <select onChange={ev => onChange(option, ev.target.value)}>
-        {option.choices.map(choice => (
-          <option value={choice.value} selected={choice.value === value}>
-            {choice.value}
-          </option>
-        ))}
-      </select>
-    </label>
+    <Select
+      label={option.cliName}
+      values={option.choices.map(choice => choice.value)}
+      selected={value}
+      onChange={val => onChange(option, val)}
+    />
   );
 }
 
 export function NumberOption({ option, value, onChange }) {
   return (
-    <label>
-      {option.cliName}{" "}
-      <input
-        type="number"
-        min={option.range.start}
-        max={option.range.end}
-        step={option.range.step}
-        value={value}
-        onChange={ev => onChange(option, parseInt(ev.target.value, 10))}
-      />
-    </label>
+    <NumberInput
+      label={option.cliName}
+      min={option.range.start}
+      max={option.range.end}
+      step={option.range.step}
+      value={value}
+      onChange={val => onChange(option, val)}
+    />
   );
 }