Template for docs pages

Summary:
- Dynamic loading of documentation pages
- code highlighting for markdown files
- editing playground from sidebar

Reviewed By: emilsjolander

Differential Revision: D6964951

fbshipit-source-id: 1c7f36afa8d23215471d5b9a9c01bd2241c2008e

website/src/components/Playground/YogaEnumSelect.js

@@ -17,18 +17,32 @@ import './YogaEnumSelect.css';
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
+const PROPERTY_LOOKUP = {
+  flexDirection: 'FLEX_DIRECTION',
+  direction: 'DIRECTION',
+  justifyContent: 'JUSTIFY',
+  alignSelf: 'ALIGN',
+  alignContent: 'ALIGN',
+  alignItems: 'ALIGN',
+  positionType: 'POSITION_TYPE',
+  flexWrap: 'WRAP',
+};
+
 type Props = {
-  property: string,
+  property: $Keys<typeof PROPERTY_LOOKUP>,
   disabled?: boolean,
   value: string | number,
   onChange: (value: number) => void,
 };
 
 export default class YogaEnumSelect extends Component<Props> {
+  static availableProperties = Object.keys(PROPERTY_LOOKUP);
+
   values: Array<{key: string, value: number}>;
 
   constructor({property}: Props) {
     super();
+    property = PROPERTY_LOOKUP[property];
     // $FlowFixMe
     this.values = Object.keys(yoga)
       .map(key => ({key, value: yoga[key]}))
@@ -42,29 +56,32 @@ export default class YogaEnumSelect extends Component<Props> {
   };
 
   render() {
-    const {property, ...props} = this.props;
+    let {property, ...props} = this.props;
+    property = PROPERTY_LOOKUP[property];
     const selected = this.values.find(
       ({key, value}) => value === this.props.value,
     );
     const replacer = new RegExp(`^${property}_`);
 
     return this.values.length > 3 ? (
-      <Dropdown
-        disabled={props.disabled}
-        overlay={
-          <Menu onClick={this.handleMenuClick}>
-            {this.values.map(({key, value}) => (
-              <Menu.Item key={key} value={value}>
-                {key.replace(replacer, '')}
-              </Menu.Item>
-            ))}
-          </Menu>
-        }>
-        <Button>
-          {selected ? selected.key.replace(replacer, '') : 'undefiend'}{' '}
-          <Icon type="down" />
-        </Button>
-      </Dropdown>
+      <div className="YogaEnumSelect">
+        <Dropdown
+          disabled={props.disabled}
+          overlay={
+            <Menu onClick={this.handleMenuClick}>
+              {this.values.map(({key, value}) => (
+                <Menu.Item key={key} value={value}>
+                  {key.replace(replacer, '')}
+                </Menu.Item>
+              ))}
+            </Menu>
+          }>
+          <Button>
+            {selected ? selected.key.replace(replacer, '') : ''}
+            <Icon type="down" />
+          </Button>
+        </Dropdown>
+      </div>
     ) : (
       <RadioGroup
         {...props}