Docusaurus: Replant Playground (#1331)

Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1331 This lifts and copies code from the Yoga Playground component of the old website, to the new one, using a live workspace version of JS Yoga. This may eventually be used if the new website is fleshed out, but this also gives us real-world validation of the Yoga bindings in a web scenario, compared to the Node test runner. There is still some cleanup here needed, but we are able to bundle, typecheck, and render the playground now. The code here is mostly the same as before, but I removed some of the cruftier bits (e.g. URL shortener that goes to some private Heroku instance), and needed to do some tweaks for the new Yoga package, and TypeScript. This is currently using `yoga-layout/sync`, the asmjs bindings. But I had previously checked bundling against the wasm ones. Reviewed By: cortinico Differential Revision: D46884439 fbshipit-source-id: f53f0855c131cd2b81975bf05f71c43713600616
2023-07-13 14:08:07 -07:00
parent 6ae890dccd
commit 45088187a7
22 changed files with 2826 additions and 11 deletions
--- a/website-next/src/components/Playground/YogaPositionEditor.tsx
+++ b/website-next/src/components/Playground/YogaPositionEditor.tsx
@@ -0,0 +1,72 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import {Input} from 'antd';
+import PositionRecord from './PositionRecord';
+import type {PositionRecordType} from './PositionRecord';
+import './YogaPositionEditor.css';
+
+type Property = 'position' | 'margin' | 'padding' | 'border';
+
+type Props = {
+  value: PositionRecordType,
+  property: Property,
+  disabled?: boolean,
+  onChange: (property: Property, value: PositionRecordType) => void,
+};
+
+export default class YogaPositionEditor extends Component<Props> {
+  static availableProperties = ['position', 'margin', 'padding', 'border'];
+
+  static defaultProps = {
+    value: PositionRecord(),
+  };
+
+  render() {
+    const {onChange, value, property, disabled} = this.props;
+    return (
+      <div className="YogaPositionEditor">
+        <Input
+          type="text"
+          value={Number.isNaN(value.top) ? '' : value.top}
+          disabled={disabled}
+          onChange={e => onChange(property, value.set('top', e.target.value))}
+        />
+        <div className="YogaPositionEditorRow">
+          <Input
+            type="text"
+            value={Number.isNaN(value.left) ? '' : value.left}
+            disabled={disabled}
+            onChange={e =>
+              onChange(property, value.set('left', e.target.value))
+            }
+          />
+          {property.toUpperCase()}
+          <Input
+            type="text"
+            value={Number.isNaN(value.right) ? '' : value.right}
+            disabled={disabled}
+            onChange={e =>
+              onChange(property, value.set('right', e.target.value))
+            }
+          />
+        </div>
+        <Input
+          type="text"
+          value={Number.isNaN(value.bottom) ? '' : value.bottom}
+          disabled={disabled}
+          onChange={e =>
+            onChange(property, value.set('bottom', e.target.value))
+          }
+        />
+      </div>
+    );
+  }
+}