Merge branch 'main' into docs/updateDocs

website/.flowconfig

@@ -7,5 +7,9 @@
 [lints]
 
 [options]
+types_first=false
 
 [strict]
+
+[version]
+^0.140.0

website/contents/contributing/testing.md

@@ -8,7 +8,7 @@ hasPlayground: false
 
 Yoga tries to be as close as possible to chrome in its flexbox behaviour.
 To ensure this most of Yoga's test suite is automatically generateded from
-running the corresponding layout in chrome using a webdriver which then generates 
+running the corresponding layout in chrome using a webdriver which then generates
 C++ test which asserts that Yoga will produce matching outputs for that layout.
 
 ## Running the Test Suite
@@ -34,12 +34,10 @@ Run `gentest/gentest.rb` to generate test code and re-run `buck test //:yoga`
 to validate the behavior. One test case will be generated for every root `div`
 in the input html with the string in the `id` corresponding to the test name.
 
-You may need to install the latest watir gem (`gem install watir`) and
-[ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) to
-run `gentest/gentest.rb` Ruby script.
+You should run `bundle install` in the `gentest` directory to install dependencies for the `gentest/gentest.rb` Ruby script.
 
 ## Manual test
 
 For some aspects of Yoga we cannot generate a test using the test generation
-infrastructure described earlier. For these cases we manually write a test in 
-the `/tests` directory.	
+infrastructure described earlier. For these cases we manually write a test in
+the `/tests` directory.

website/contents/getting-started/react-native.md

@@ -1,5 +1,5 @@
 ---
-path: "https://reactnative.dev/docs/getting-started.html"
+path: "https://reactnative.dev/docs/getting-started"
 title: "React Native"
 redirect: true
 ---

website/contents/getting-started/standalone.md

@@ -27,7 +27,7 @@ $> yarn add yoga-layout
 ```
 
 This is an example on how to use Yoga in JavaScript, for a full API reference,
-have a look at the [flow-type definitions](https://github.com/facebook/yoga/blob/master/javascript/sources/entry-common.js#L123).
+have a look at the [flow-type definitions](https://github.com/facebook/yoga/blob/main/javascript/sources/entry-common.js#L123).
 
 ```js
 import yoga, {Node} from 'yoga-layout';
@@ -36,6 +36,7 @@ const root = Node.create();
 root.setWidth(500);
 root.setHeight(300);
 root.setJustifyContent(yoga.JUSTIFY_CENTER);
+root.setFlexDirection(yoga.FLEX_DIRECTION_ROW);
 
 const node1 = Node.create();
 node1.setWidth(100);

website/contents/properties/flex-direction.md

@@ -8,7 +8,7 @@ hasPlayground: true
 
 Flex direction controls the direction in which children of a node are laid out.
 This is also referred to as the main axis. The main axis is the direction in
-which children are laid out. The cross axis the the axis perpendicular to the
+which children are laid out. The cross axis is the axis perpendicular to the
 main axis, or the axis which wrapping lines are laid out in.
 
 **ROW (DEFAULT)** Align children from left to right. If [wrapping](/docs/flex-wrap) is enabled then

website/contents/properties/flex.md

@@ -6,6 +6,15 @@ hasPlayground: true
 
 ## Flex Basis, Grow, and Shrink
 
+**FLEX BASIS** is an axis-independent way of providing the default size of an item
+along the main axis. Setting the flex basis of a child is similar to setting the `width` of that
+child if its parent is a container with `flex direction: row` or setting the `height` of a child
+if its parent is a container with `flex direction: column`. The flex basis of an item is the
+default size of that item, the size of the item before any flex grow and flex shrink
+calculations are performed.
+
+<controls prop="flexBasis"></controls>
+
 **FLEX GROW** describes how any space within a container should be distributed
 among its children along the main axis. After laying out its children, a container will
 distribute any remaining space according to the flex grow values specified by its children.
@@ -25,12 +34,3 @@ Flex shrink accepts any floating point value >= 0, with 1 being the default valu
 A container will shrink its children weighted by the child’s flex shrink value.
 
 <controls prop="flexShrink"></controls>
-
-**FLEX BASIS** is an axis-independent way of providing the default size of an item
-along the main axis. Setting the flex basis of a child is similar to setting the `width` of that
-child if its parent is a container with `flex direction: row` or setting the `height` of a child
-if its parent is a container with `flex direction: column`. The flex basis of an item is the
-default size of that item, the size of the item before any flex grow and flex shrink
-calculations are performed.
-
-<controls prop="flexBasis"></controls>

website/package.json

@@ -32,6 +32,9 @@
     "develop": "gatsby develop"
   },
   "devDependencies": {
-    "prettier": "1.17.0"
+    "prettier": "1.19.1"
+  },
+  "resolutions": {
+    "nbind": "https://github.com/charto/nbind.git#fe3abe0"
   }
 }

website/src/components/Playground/src/CodeComponentKit.js

@@ -73,9 +73,9 @@ function keyLookup(key: string): string {
 
 function getValue(value) {
   if (typeof value === 'string' && /%$/.test(value)) {
-    return `CKRelativeDimension::Percent(${parseFloat(value)})`;
+    return `RCRelativeDimension::Percent(${parseFloat(value)})`;
   } else if (value === 'auto') {
-    return 'CKRelativeDimension::Auto()';
+    return 'RCRelativeDimension::Auto()';
   } else {
     return String(parseFloat(value));
   }

website/src/components/Playground/src/CodeLitho.js

@@ -24,7 +24,7 @@ function getEnum(yogaEnum: string, value: string | number): string {
     position: 'Position',
     flexWrap: 'Wrap',
     positionType: 'PositionType',
-    direction: 'Driection',
+    direction: 'Direction',
   };
 
   if (!enumLookup[yogaEnum]) {
@@ -47,8 +47,8 @@ function dipOrPercent(value) {
   return value === 'auto'
     ? 'Auto'
     : typeof value === 'string' && /%$/.test(value)
-      ? 'Percent'
-      : 'Dip';
+    ? 'Percent'
+    : 'Dip';
 }
 
 function getValue(value) {

website/src/components/Playground/src/LayoutRecord.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,6 +8,7 @@
  * @format
  */
 
+
 import {Record, List} from 'immutable';
 import type {RecordOf} from 'immutable';
 import PositionRecord from './PositionRecord';
@@ -16,9 +17,9 @@ import yoga from 'yoga-layout/dist/entry-browser';
 
 import type {
   Yoga$Align,
-  Yoga$JustifyContent,
+  Yoga$Justify,
   Yoga$FlexDirection,
-  Yoga$FlexWrap,
+  Yoga$Wrap,
   Yoga$PositionType,
 } from 'yoga-layout';
 
@@ -29,7 +30,7 @@ export type LayoutRecordT = RecordOf<{
   minHeight?: ?number,
   maxWidth?: ?number,
   maxHeight?: ?number,
-  justifyContent?: Yoga$JustifyContent,
+  justifyContent?: Yoga$Justify,
   padding: PositionRecordT,
   border: PositionRecordT,
   margin: PositionRecordT,
@@ -43,7 +44,7 @@ export type LayoutRecordT = RecordOf<{
   flexGrow?: number,
   flexShrink?: number,
   padding?: number,
-  flexWrap?: Yoga$FlexWrap,
+  flexWrap?: Yoga$Wrap,
   aspectRatio?: number,
   children?: List<LayoutRecordT>,
   minWidth?: number,

website/src/components/Playground/src/URLShortener.js

@@ -52,9 +52,7 @@ export default class URLShortener extends Component<{}, State> {
         }
 
         fetch(
-          `https://cors-anywhere.herokuapp.com/tinyurl.com/api-create.php?url=${
-            window.location.href
-          }`,
+          `https://cors-anywhere.herokuapp.com/tinyurl.com/api-create.php?url=${window.location.href}`,
         )
           .then(res => res.text())
           .then(shortURL => this.setState({shortURL, loading: false}))

website/src/pages/docs/index.js

@@ -33,7 +33,7 @@ export default ({data}) => (
             documentation covering all the features of the library. Each page
             comes with an interactive playground for you to explore that
             feature. The examples section showcases some of the most common
-            layouts and how to build them. This is a community projects and
+            layouts and how to build them. This is a community project and
             contributions within documentation, code, and tests are more than
             welcome. The contributing section below covers how to get started.
           </p>
@@ -49,17 +49,16 @@ export default ({data}) => (
                   ({node}) =>
                     node.fileAbsolutePath.indexOf(`/${category}/`) > -1,
                 )
-                .map(
-                  ({node}) =>
-                    node.frontmatter.redirect ? (
-                      <a key={node.id} href={node.frontmatter.path}>
-                        {node.frontmatter.title}
-                      </a>
-                    ) : (
-                      <Link key={node.id} to={node.frontmatter.path}>
-                        {node.frontmatter.title}
-                      </Link>
-                    ),
+                .map(({node}) =>
+                  node.frontmatter.redirect ? (
+                    <a key={node.id} href={node.frontmatter.path}>
+                      {node.frontmatter.title}
+                    </a>
+                  ) : (
+                    <Link key={node.id} to={node.frontmatter.path}>
+                      {node.frontmatter.title}
+                    </Link>
+                  ),
                 )}
             </Col>
           ),