Add layout direction documentation (#1599)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1599

tsia. Had to add JS api support for set/get direction

Reviewed By: yungsters

Differential Revision: D54778992

fbshipit-source-id: 346152e1d61c80aa524b515e8b30a96fe32fe7c3

website-next/src/components/FlexStyle.ts

@@ -9,6 +9,7 @@
 
 import {
   Align,
+  Direction,
   Display,
   Edge,
   FlexDirection,
@@ -59,6 +60,7 @@ export type FlexStyle = {
   borderInlineWidth?: number;
   borderBlockWidth?: number;
   bottom?: number | `${number}%`;
+  direction?: 'ltr' | 'rtl';
   display?: 'none' | 'flex';
   end?: number | `${number}%`;
   flex?: number;
@@ -152,6 +154,9 @@ export function applyStyle(node: YogaNode, style: FlexStyle = {}): void {
         case 'bottom':
           node.setPosition(Edge.Bottom, style.bottom);
           break;
+        case 'direction':
+          node.setDirection(direction(style.direction));
+          break;
         case 'display':
           node.setDisplay(display(style.display));
           break;
@@ -330,6 +335,16 @@ function alignItems(str?: AlignItems): Align {
   throw new Error(`"${str}" is not a valid value for alignItems`);
 }
 
+function direction(str?: 'ltr' | 'rtl'): Direction {
+  switch (str) {
+    case 'ltr':
+      return Direction.LTR;
+    case 'rtl':
+      return Direction.RTL;
+  }
+  throw new Error(`"${str}" is not a valid value for direction`);
+}
+
 function display(str?: 'none' | 'flex'): Display {
   switch (str) {
     case 'none':