diff --git a/.github/actions/setup-website/action.yml b/.github/actions/setup-website/action.yml deleted file mode 100644 index b255d06b..00000000 --- a/.github/actions/setup-website/action.yml +++ /dev/null @@ -1,23 +0,0 @@ -name: Setup Website envirionment - -runs: - using: "composite" - steps: - # TODO: Update to latest when website is moved to the workspace version of - # yoga-layout - - name: Setup Node environment - uses: actions/setup-node@v3 - with: - node-version: 12.x - cache: yarn - cache-dependency-path: website/yarn.lock - env: - # https://github.com/actions/setup-node/issues/317 - FORCE_COLOR: 0 - - # TODO: the website should be in a yarn workspace with the library, but the - # current version of gatsby is incompatible with hoisting. - - name: yarn install - shell: bash - run: yarn install --frozen-lockfile --network-timeout 1000000 - working-directory: website diff --git a/.github/workflows/publish-website.yml b/.github/workflows/publish-website.yml deleted file mode 100644 index 95932b55..00000000 --- a/.github/workflows/publish-website.yml +++ /dev/null @@ -1,35 +0,0 @@ -name: Publish Website - -on: - push: - branches: - - main - workflow_dispatch: - -concurrency: - group: ${{ github.workflow }} - -jobs: - publish: - name: Publish to GitHub Pages - runs-on: ubuntu-20.04 - - steps: - - uses: actions/checkout@v3 - - - name: Setup - uses: ./.github/actions/setup-website - - - name: yarn build - run: yarn build - working-directory: website - - - uses: peaceiris/actions-gh-pages@v3 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - publish_branch: gh-pages - publish_dir: website/public - cname: yogalayout.dev - keep_files: true - user_name: 'Yoga-bot' - user_email: 'yogabot@fb.com' diff --git a/.github/workflows/validate-website.yml b/.github/workflows/validate-website.yml index 8a542b36..359a4184 100644 --- a/.github/workflows/validate-website.yml +++ b/.github/workflows/validate-website.yml @@ -10,22 +10,8 @@ on: workflow_dispatch: jobs: - build: - name: Build [Gatsby] - runs-on: ubuntu-20.04 - - steps: - - uses: actions/checkout@v3 - - - name: Setup - uses: ./.github/actions/setup-website - - - name: yarn build - run: yarn build - working-directory: website - build_next: - name: Build [Docusaurus] + name: Build runs-on: ubuntu-latest steps: diff --git a/website/.flowconfig b/website/.flowconfig deleted file mode 100644 index 6bd402f8..00000000 --- a/website/.flowconfig +++ /dev/null @@ -1,15 +0,0 @@ -[ignore] - -[include] - -[libs] - -[lints] - -[options] -types_first=false - -[strict] - -[version] -^0.140.0 diff --git a/website/.gitignore b/website/.gitignore deleted file mode 100644 index e4a5ddf7..00000000 --- a/website/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -# Project dependencies -.cache/ -# Build directory -public/ -.DS_Store -yarn-error.log -src/components/Playground/dist diff --git a/website/README.md b/website/README.md deleted file mode 100644 index a7cab9d7..00000000 --- a/website/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# Yoga documentation and playground - -This site uses [gatsby.js](https://www.gatsbyjs.org/) as static site generator. Which transforms all markdown and react code to static HTML and JS files. - -## Development -``` -yarn install -yarn develop -``` - -### Structure -Documentation pages are generated from the Markdown files in `contents/`. The files are organized in 4 sections/folders (getting-started, properties, examples, contributing) which are dynamically listed on the docs overview page. The Markdown files can have some header files containing metadata. - -``` ---- -path: "docs/flexDirection" -title: "Flex Direction" -hasPlayground: true -editableProperties: ['flexDirection'] ---- -``` - -The `path` can be any URL this page should be available at. The `title` is used as the page's HTML-title and when referencing the file from the documentation overview. There are two kinds of templates for a page: with and without playground. `hasPlayground` selects the corresponding template (`src/templates/{with|without}Playground.js`). When using `hasPlayground: true`, `editableProperties` can list all Yoga properties which are editable in the playground. - -### Design -We are using [antd](https://ant.design) for various UI elements. See their documentation for the components available. `gatsby-config.js` can be used to overwrite LESS-variables from antd. - -For styling react components we create a CSS-file with the same name next to each component and import it in the component. E.g. there is `index.js` and `index.css`. In the react-component we import the stylesheet: `import './index.css'`. - -## Build -To generate the static files run: -``` -yarn build -``` -The output will be in `public/` and can be published on GitHub pages. diff --git a/website/contents/contributing/opening-a-pull-request.md b/website/contents/contributing/opening-a-pull-request.md deleted file mode 100644 index ec549bcf..00000000 --- a/website/contents/contributing/opening-a-pull-request.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -path: "/contributing/opening-a-pull-request" -title: "Opening a Pull Request" -hasPlayground: false ---- - -# Opening a Pull Request - -Before opening your first pull request to Yoga you have to know how to get the code, -install build time dependencies, and test the code locally. - -### Clone - -``` -$> git clone https://github.com/facebook/yoga.git -$> cd yoga -``` - -### Install dependencies - -``` -$> git submodule init -$> git submodule update -$> brew install buck -``` - -### Build and Test - -``` -$> buck build //:yoga -$> buck test //:yoga -``` - -## Making a Change - -Now all you need to do is make your change and test it before submitting a pull request for review. -Below is the general structure of the repo and where you may want to make your change. One you have -made your change see the [testing documentation](/contributing/testing) for more on how to test your change. - -``` bash -/yoga -|-- yoga # Home to the main Yoga codebase written in C++. Any algorithmic changes should be made here -|-- lib # Yoga external dependencies. Be thoughtful adding any new ones -|-- tests # Yoga's C++ test suite. Both manaul and generated tests -|-- gentest -| |-- fixtures # html fixtures for generated tests -|-- java -| |-- com/facebook/yoga # Java binding code -| |-- jni # JNI binding code -|-- javascript # emscripten / javascript bindings -``` diff --git a/website/contents/contributing/testing.md b/website/contents/contributing/testing.md deleted file mode 100644 index a1808920..00000000 --- a/website/contents/contributing/testing.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -path: "/contributing/testing" -title: "Testing" -hasPlayground: false ---- - -# Testing - -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 -C++ test which asserts that Yoga will produce matching outputs for that layout. - -## Running the Test Suite - -1. Yoga builds with [buck](https://buckbuild.com). Follow their documentation to get up and running. -2. For testing Yoga relies on [gtest](https://github.com/google/googletest) as a submodule. After cloning Yoga run `git submodule init` followed by `git submodule update`. -3. In a terminal from the root of your Yoga checkout run `buck test //:yoga`. - -## Adding a Test - -Instead of manually writing a test which ensures parity with web implementations -of Flexbox we make use of a generated test suite. We use `gentest/gentest.rb` to -generate this test suite. Write the html which you want to verify in Yoga and put -it in the `gentest/fixtures` folder, such as the following. - -```html -
-
-
-``` - -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 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. diff --git a/website/contents/contributing/writing-documentation.md b/website/contents/contributing/writing-documentation.md deleted file mode 100644 index 305626f1..00000000 --- a/website/contents/contributing/writing-documentation.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -path: "/contributing/writing-documentation" -title: "Writing Documentation" -hasPlayground: false ---- - -## Writing Documentation - -Documentation pages are generated from Markdown files in `contents/`. -The files are organized in 4 sections/folders (getting-started, properties, -examples, contributing) which are dynamically listed on the docs overview page. -The Markdown files should contain a header with metadata. - -```markdown ---- -path: "docs/flexDirection" -title: "Flex Direction" -hasPlayground: true -initialPlayground: eyJ3aWR0aCI6IjYwMCIsImhlaWdodCI6NTAwLCJjaGlsZHJlbiI6W3t9LHt9LHt9XX0= ---- -``` - -- The `path` indicates the URL path this page will be available at. -- The `title` is used as the page's HTML-title and when referencing - the file from the documentation overview. -- The `hasPlayground` property indicates whether this documentation - has an associated playground to test out the documented feature. -- The `initialPlayground` property is only relevant for documentation - pages with playgrounds and contains the initial playground state. - This base64 string is a reference to the hash (content after #) - of a [playground](/playground) url. - - The `redirect` property allows to redirect to the other page, the path of which is mentioned in the property `path`. - - -Within the markdown of a documentation page which has an associated -playground you can add controls to let the user play around with the feature -directly from the documenation page. - -```markdown - -``` - -If you would like to redirect to another page (potentially an external link) the header would look something like this. - -```markdown ---- -path: "/playground?eyJ3aWR0aCI6IjYwMCIsImhlaWdodCI6NTAwLCJjaGlsZHJlbiI6W3t9LHt9LHt9XX0=" -title: "Flex Direction" -redirect: true ---- - -``` diff --git a/website/contents/examples/flexible-text.md b/website/contents/examples/flexible-text.md deleted file mode 100644 index cb017448..00000000 --- a/website/contents/examples/flexible-text.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -path: "/playground?eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7IndpZHRoIjoiNjAiLCJoZWlnaHQiOiI2MCIsIm1hcmdpbiI6eyJ0b3AiOiIyMCIsInJpZ2h0IjoiMjAiLCJib3R0b20iOiIyMCIsImxlZnQiOiIyMCJ9fSx7ImhlaWdodCI6IjYwIiwibWFyZ2luIjp7InRvcCI6IjIwIiwicmlnaHQiOiIyMCIsImJvdHRvbSI6IjIwIiwibGVmdCI6IjIwIn0sImZsZXhHcm93IjoiMSJ9LHsid2lkdGgiOiI0MCIsImhlaWdodCI6IjQwIiwibWFyZ2luIjp7InRvcCI6IjIwIiwicmlnaHQiOiIyMCIsImJvdHRvbSI6IjIwIiwibGVmdCI6IjIwIn19XX0=" -title: "Flexible Text" -redirect: true ---- diff --git a/website/contents/examples/floating-buttons.md b/website/contents/examples/floating-buttons.md deleted file mode 100644 index e3d20b31..00000000 --- a/website/contents/examples/floating-buttons.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -path: "/playground?eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJwb3NpdGlvbiI6eyJ0b3AiOiJhdXRvIiwicmlnaHQiOiIxMCIsImJvdHRvbSI6IjEwIiwibGVmdCI6ImF1dG8ifSwicG9zaXRpb25UeXBlIjoxLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfV0sIm1pbldpZHRoIjpudWxsLCJtYXhXaWR0aCI6bnVsbCwibWluSGVpZ2h0IjpudWxsLCJtYXhIZWlnaHQiOm51bGx9" -title: "Floating Buttons" -redirect: true ---- diff --git a/website/contents/examples/overlays.md b/website/contents/examples/overlays.md deleted file mode 100644 index 0b9cf3a2..00000000 --- a/website/contents/examples/overlays.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -path: "/playground?eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoiMTAwJSIsImhlaWdodCI6IjEwMCUiLCJwb3NpdGlvblR5cGUiOjEsIm1pbldpZHRoIjpudWxsLCJtYXhXaWR0aCI6bnVsbCwibWluSGVpZ2h0IjpudWxsLCJtYXhIZWlnaHQiOm51bGx9XSwibWluV2lkdGgiOm51bGwsIm1heFdpZHRoIjpudWxsLCJtaW5IZWlnaHQiOm51bGwsIm1heEhlaWdodCI6bnVsbH0=" -title: "Overlays" -redirect: true ---- diff --git a/website/contents/getting-started/component-kit.md b/website/contents/getting-started/component-kit.md deleted file mode 100644 index 206b6043..00000000 --- a/website/contents/getting-started/component-kit.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -path: "https://componentkit.org/docs/getting-started/" -title: "ComponentKit" -redirect: true ---- diff --git a/website/contents/getting-started/litho.md b/website/contents/getting-started/litho.md deleted file mode 100644 index 3f037874..00000000 --- a/website/contents/getting-started/litho.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -path: "https://fblitho.com/docs/getting-started" -title: "Litho" -redirect: true ---- diff --git a/website/contents/getting-started/react-native.md b/website/contents/getting-started/react-native.md deleted file mode 100644 index 11710038..00000000 --- a/website/contents/getting-started/react-native.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -path: "https://reactnative.dev/docs/getting-started" -title: "React Native" -redirect: true ---- diff --git a/website/contents/getting-started/standalone.md b/website/contents/getting-started/standalone.md deleted file mode 100644 index 25210fcb..00000000 --- a/website/contents/getting-started/standalone.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -path: "/getting-started/standalone" -title: "Standalone" -hasPlayground: false ---- - -# Standalone - -Adding Yoga to a project is as simple as adding the dependency to your package manager of choice. - -### Android - -```groovy -dependencies { - implementation 'com.facebook.yoga.android:yoga-layout:x.x.x' -} -``` - -### Javascript - -The JavaScript bindings for Yoga can be used from node.js and within the browser. -When using Yoga from node.js the native library is used, in browsers a pure JS -version is used (cross-compiled using [emscripten](https://emscripten.org/)). - -``` -$> 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 [TypeScript type definitions](https://github.com/facebook/yoga/blob/main/javascript/src/wrapAssembly.ts). - -```js -import {loadYoga} from 'yoga-layout'; - -const Yoga = await loadYoga(); -const root = Yoga.Node.create(); -root.setWidth(500); -root.setHeight(300); -root.setJustifyContent(Yoga.JUSTIFY_CENTER); -root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW); - -const node1 = Yoga.Node.create(); -node1.setWidth(100); -node1.setHeight(100); - -const node2 = Yoga.Node.create(); -node2.setWidth(100); -node2.setHeight(100); - -root.insertChild(node1, 0); -root.insertChild(node2, 1); - -root.calculateLayout(500, 300, Yoga.DIRECTION_LTR); -console.log(root.getComputedLayout()); -// {left: 0, top: 0, width: 500, height: 300} -console.log(node1.getComputedLayout()); -// {left: 150, top: 0, width: 100, height: 100} -console.log(node2.getComputedLayout()); -// {left: 250, top: 0, width: 100, height: 100} -``` - -### iOS - -``` -pod 'YogaKit', '~> 1.7' -``` - -## Including Yoga From Source - -If you plan to include Yoga from Source in a C++ project then all you have to do is inlude -the top level `yoga` folder. Make sure to look at the top level `BUCK` file to ensure you build -using the same compiler flags. diff --git a/website/contents/properties/absolute-layout.md b/website/contents/properties/absolute-layout.md deleted file mode 100644 index 432046f7..00000000 --- a/website/contents/properties/absolute-layout.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -path: "/docs/absolute-relative-layout" -title: "Absolute/Relative Layout" -hasPlayground: true ---- -## Absolute/Relative Layout - -The `position type` of an element defines how it is -positioned within its parent. - -**RELATIVE (DEFAULT)** By default an element is positioned -relatively. This means an element is positioned according to the -normal flow of the layout, and then offset relative to that position -based on the values of `top`, `right`, `bottom`, and `left`. -The offset does not affect the position of any sibling or parent elements. - -**ABSOLUTE** When positioned absolutely an element doesn't take -part in the normal layout flow. It is instead laid out independent -of its siblings. The position is determined based on the -`top`, `right`, `bottom`, and `left` values. - - - -The position values `top`, `right`, `bottom`, and `left` behave -differently depending on the `position type` of the element. For -a `relative` element they offset the position of the element in the -direction specified. For `absolute` element though these properties -specify the offset of the element's side from the same side on the parent. - - diff --git a/website/contents/properties/align-content.md b/website/contents/properties/align-content.md deleted file mode 100644 index f229b549..00000000 --- a/website/contents/properties/align-content.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -path: "/docs/align-content" -title: "Align Content" -hasPlayground: true -initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiYWxpZ25Db250ZW50IjoxLCJmbGV4V3JhcCI6MSwiY2hpbGRyZW4iOlt7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJhbGlnbkNvbnRlbnQiOjIsIm1pbldpZHRoIjpudWxsLCJtYXhXaWR0aCI6bnVsbCwibWluSGVpZ2h0IjpudWxsLCJtYXhIZWlnaHQiOm51bGx9XSwibWluV2lkdGgiOm51bGwsIm1heFdpZHRoIjpudWxsLCJtaW5IZWlnaHQiOm51bGwsIm1heEhlaWdodCI6bnVsbH0= ---- - -## Align Content - -Align content defines the distribution of lines along the cross-axis. This only -has effect when items are wrapped to multiple lines using [`flex wrap`](/docs/flex-wrap). - -**FLEX START (DEFAULT)** Align wrapped lines to the start of the container's cross axis. - -**FLEX END** Align wrapped lines to the end of the container's cross axis. - -**STRETCH** Stretch wrapped lines to match the `height` of the container's cross axis. - -**CENTER** Align wrapped lines in the center of the container's cross axis. - -**SPACE BETWEEN** Evenly space wrapped lines across the container's main axis, distributing -remaining space between the lines. - -**SPACE AROUND** Evenly space wrapped lines across the container's main axis, distributing -remaining space around the lines. Compared to `space between` using -`space around` will result in space being distributed to the begining of -the first lines and end of the last line. - - diff --git a/website/contents/properties/align-items.md b/website/contents/properties/align-items.md deleted file mode 100644 index 955b89f4..00000000 --- a/website/contents/properties/align-items.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -path: "/docs/align-items" -title: "Align Items / Self" -hasPlayground: true ---- - -## Align Items - -Align items describes how to align children along the cross axis of their container. -Align items is very similar to [`justify content`](/docs/justify-content) but instead of -applying to the main axis, `align items` applies to the cross axis. - -**STRETCH (DEFAULT)** Stretch children of a container to match the `height` of the container's cross axis. - -**FLEX START** Align children of a container to the start of the container's cross axis. - -**FLEX END** Align children of a container to the end of the container's cross axis. - -**CENTER** Align children of a container in the center of the container's cross axis. - -**BASELINE** Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents. - - - -## Align Self - -Align self has the same options and effect as `align items` but instead of -affecting the children within a container, you can apply this property to -a single child to change its alignment within its parent. `align self` -overrides any option set by the parent with `align items`. - - diff --git a/website/contents/properties/aspect-ratio.md b/website/contents/properties/aspect-ratio.md deleted file mode 100644 index 8a553df0..00000000 --- a/website/contents/properties/aspect-ratio.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -path: "/docs/aspect-ratio" -title: "Aspect Ratio" -hasPlayground: true ---- - -## Aspect Ratio - -AspectRatio is a property introduced by Yoga and is not present as a settable -property in the css flexbox specification. Flexbox does have the notion of -aspect ratio though for things with intrinsic aspect ratio such as images. - -The `aspect ratio` property in Yoga has the following properties: - -- Accepts any floating point value > 0, the default is undefined. -- Defined as the ratio between the `width` and the `height` of a node e.g. if a node has an aspect ratio of 2 then its `width` is twice the size of its `height`. -- Respects the `min` and `max` dimensions of an item. -- Has higher priority than `flex grow` -- If `aspect ratio`, `width`, and `height` are set then the cross axis dimension is overridden. - - diff --git a/website/contents/properties/flex-direction.md b/website/contents/properties/flex-direction.md deleted file mode 100644 index 95fbf6ca..00000000 --- a/website/contents/properties/flex-direction.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -path: "/docs/flex-direction" -title: "Flex Direction" -hasPlayground: true ---- - -## Flex Direction - -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 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 -the next line will start under the first item on the left of the container. - -**COLUMN** Align children from top to bottom. If [wrapping](/docs/flex-wrap) is enabled then -the next line will start to the left first item on the top of the container. - -**ROW REVERSE** Align children from right to left. If [wrapping](/docs/flex-wrap) is enabled then -the next line will start under the first item on the right of the container. - -**COLUMN REVERSE** Align children from bottom to top. If [wrapping](/docs/flex-wrap) is enabled then -the next line will start to the left first item on the bottom of the container. - - diff --git a/website/contents/properties/flex-wrap.md b/website/contents/properties/flex-wrap.md deleted file mode 100644 index b910847a..00000000 --- a/website/contents/properties/flex-wrap.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -path: "/docs/flex-wrap" -title: "Flex Wrap" -hasPlayground: true -initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiYWxpZ25Db250ZW50IjoxLCJmbGV4V3JhcCI6MSwiY2hpbGRyZW4iOlt7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfSx7IndpZHRoIjoxMDAsImhlaWdodCI6MTAwLCJtaW5XaWR0aCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4SGVpZ2h0IjpudWxsfV0sIm1pbldpZHRoIjpudWxsLCJtYXhXaWR0aCI6bnVsbCwibWluSGVpZ2h0IjpudWxsLCJtYXhIZWlnaHQiOm51bGx9 ---- - -## Flex Wrap - -The `flex wrap` property is set on containers and controls what happens when -children overflow the size of the container along the main axis. By default -children are forced into a single line (which can shrink elements). - -If wrapping is allowed items are wrapped into multiple lines along the main -axis if needed. `wrap reverse` behaves the same, but the order of the lines is -reversed. - - - -When wrapping lines [`align content`](/docs/align-content) can be used to specify how the -lines are placed in the container. diff --git a/website/contents/properties/flex.md b/website/contents/properties/flex.md deleted file mode 100644 index 764d84bd..00000000 --- a/website/contents/properties/flex.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -path: "/docs/flex" -title: "Flex Basis, Grow, and Shrink" -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. - - - -**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. - -Flex grow accepts any floating point value >= 0, with 0 being the default value. -A container will distribute any remaining space among its children weighted by the child’s flex grow value. - - - -**FLEX SHRINK** describes how to shrink children along the main axis in the -case that the total size of the children overflow the size of the container on the main axis. -flex shrink is very similar to flex grow and can be thought of in the same way if -any overflowing size is considered to be negative remaining space. -These two properties also work well together by allowing children to grow and shrink as needed. - -Flex shrink accepts any floating point value >= 0, with 1 being the default value. -A container will shrink its children weighted by the child’s flex shrink value. - - diff --git a/website/contents/properties/justify-content.md b/website/contents/properties/justify-content.md deleted file mode 100644 index 346d3f81..00000000 --- a/website/contents/properties/justify-content.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -path: "/docs/justify-content" -title: "Justify Content" -hasPlayground: true ---- - -## Justify Content - -Justify content describes how to align children within the main axis of their container. -For example, you can use this property to center a child horizontally within a container -with `flex direction` set to `row` or vertically within a container with `flex direction` -set to `column`. - -**FLEX START (DEFAULT)** Align children of a container to the start of the container's main axis. - -**FLEX END** Align children of a container to the end of the container's main axis. - -**CENTER** Align children of a container in the center of the container's main axis. - -**SPACE BETWEEN** Evenly space of children across the container's main axis, distributing -remaining space between the children. - -**SPACE AROUND** Evenly space of children across the container's main axis, distributing -remaining space around the children. Compared to `space between` using -`space around` will result in space being distributed to the beginning of -the first child and end of the last child. - -**SPACE EVENLY** Evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. - - diff --git a/website/contents/properties/layout-direction.md b/website/contents/properties/layout-direction.md deleted file mode 100644 index 76c43fd2..00000000 --- a/website/contents/properties/layout-direction.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -path: "/docs/layout-direction" -title: "Layout Direction" -hasPlayground: false ---- - -## Layout Direction - -Layout direction specifies the direction in which children and text -in a hierarchy should be laid out. Layout direction also effects what -edge `start` and `end` refer to. By default Yoga lays out with `LTR` -layout direction. In this mode `start` refers to `left` and `end` -refers to `right`. When localizing your apps for markets with RTL languages -you should customize this by either by passing a direction -to the `CalculateLayout` call or by setting the direction on the root node. - -**LTR (DEFAULT)** Text and children and laid out from left to right. Margin and -padding applied the start of an element are applied on the left side. - -**RTL** Text and children and laid out from right to left. Margin and -padding applied the start of an element are applied on the right side. - - diff --git a/website/contents/properties/margins-paddings-borders.md b/website/contents/properties/margins-paddings-borders.md deleted file mode 100644 index af5276d1..00000000 --- a/website/contents/properties/margins-paddings-borders.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -path: "/docs/margins-paddings-borders" -title: "Margins, Paddings, and Borders" -hasPlayground: true ---- - -## Margins, Paddings, and Borders - -**MARGIN** effects the spacing around the outside of a node. A node with margin -will offset itself from the bounds of its parent but also offset the -location of any siblings. The margin of a node contributes to the total size -of its parent if the parent is auto sized. - - - -**PADDING** affects the size of the node it is applied to. Padding in Yoga acts as if -`box-sizing: border-box;` was set. That is padding will not add to the total size -of an element if it has an explicit size set. For auto sized nodes padding will increase -the size of the node as well as offset the location of any children. - - - -**BORDER** in Yoga acts exactly like padding and only exists as a seperate property so -that higher level frameworks get a hint as to how thick to draw a border. Yoga however -does not do any drawing so just uses this information during layout where border -acts exactly like padding. - - diff --git a/website/contents/properties/min-max.md b/website/contents/properties/min-max.md deleted file mode 100644 index 2237d9bf..00000000 --- a/website/contents/properties/min-max.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -path: "/docs/min-max" -title: "Max / Min Width and Height" -hasPlayground: true ---- - -## Max / Min Width and Height - -All the following properties set the maximum and minimum size constraints of an element. -These properties have higher priority than all other properties and will always be respected. -Constraints can be specified as either absolute pixel values or as percentages of their -parent's size. By default all these constraints are `undefined`. - -### Max Width - - - -### Min Width - - - -### Max Height - - - -### Min Height - - diff --git a/website/contents/properties/width-height.md b/website/contents/properties/width-height.md deleted file mode 100644 index 71f58e2b..00000000 --- a/website/contents/properties/width-height.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -path: "/docs/width-height" -title: "Width and Height" -hasPlayground: true ---- - -## Width and Height - -The `width` property in Yoga specifies the width of the element's content area. -Similarly `height` property specifies the height of the element's content area. - -Both `width` and `height` can take following values: - -**AUTO** Is the default Value, Yoga calculates the width/height for the element based -on its content, whether that is other children, text, or an image. - -**PIXELS** Defines the width/height in absolute pixels. Depending on other properties set on -the Yoga node this may or may not be the final dimension of the node. - -**PERCENTAGE** Defines the width or height in percentage of its parent's width or height respectively. - -### Width - - -### Height - diff --git a/website/gatsby-config.js b/website/gatsby-config.js deleted file mode 100644 index 0069dd5d..00000000 --- a/website/gatsby-config.js +++ /dev/null @@ -1,67 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -module.exports = { - siteMetadata: { - title: 'Yoga Layout', - }, - plugins: [ - // using latest react version - 'gatsby-plugin-react-next', - // setting head data like title from within components - 'gatsby-plugin-react-helmet', - { - resolve: `gatsby-plugin-less`, - options: { - theme: { - 'primary-color': '#6BCEBB', - }, - }, - }, - // plugin for importing antd components - { - resolve: 'gatsby-plugin-antd', - options: { - style: true, - }, - }, - // reading files from the file-system (used for markdown files) - { - resolve: `gatsby-source-filesystem`, - options: { - path: `${__dirname}/contents`, - name: 'markdown-pages', - }, - }, - // parse markdown files, used for content files - { - resolve: `gatsby-transformer-remark`, - options: { - // code-highlighting in markdown files - plugins: [ - { - resolve: `gatsby-remark-prismjs`, - options: { - classPrefix: 'language-', - }, - }, - ], - }, - }, - { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: 'UA-44373548-24', - head: false, - anonymize: true, - }, - }, - ], -}; diff --git a/website/gatsby-node.js b/website/gatsby-node.js deleted file mode 100644 index 67679da9..00000000 --- a/website/gatsby-node.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -const path = require('path'); - -exports.createPages = ({boundActionCreators, graphql}) => { - const {createPage} = boundActionCreators; - const withPlayground = path.resolve(`src/templates/withPlayground.js`); - const withoutPlayground = path.resolve(`src/templates/withoutPlayground.js`); - - return graphql(` - { - allMarkdownRemark { - edges { - node { - frontmatter { - path - title - hasPlayground - initialPlayground - redirect - } - html - } - } - } - } - `).then(result => { - if (result.errors) { - return Promise.reject(result.errors); - } - - result.data.allMarkdownRemark.edges.forEach(({node}) => { - if (!node.frontmatter.redirect) { - createPage({ - path: node.frontmatter.path, - component: node.frontmatter.hasPlayground - ? withPlayground - : withoutPlayground, - context: node, - }); - } - }); - }); -}; diff --git a/website/package.json b/website/package.json deleted file mode 100644 index b936c89a..00000000 --- a/website/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "gatsby-starter-default", - "description": "Gatsby default starter", - "version": "1.0.0", - "author": "Kyle Mathews ", - "dependencies": { - "antd": "^3.6.5", - "atob": "^2.1.1", - "btoa": "^1.2.1", - "gatsby": "^1.9.273", - "gatsby-link": "^1.6.45", - "gatsby-plugin-antd": "^1.0.12", - "gatsby-plugin-google-analytics": "^1.0.31", - "gatsby-plugin-less": "^1.1.8", - "gatsby-plugin-react-helmet": "^2.0.11", - "gatsby-plugin-react-next": "^1.0.11", - "gatsby-remark-prismjs": "^2.0.4", - "gatsby-source-filesystem": "^1.5.39", - "gatsby-transformer-remark": "^1.7.44", - "immutable": "^4.0.0-rc.9", - "react-helmet": "^5.2.0", - "react-syntax-highlighter": "^8.0.0", - "yoga-layout": "^1.9.3" - }, - "keywords": [ - "gatsby" - ], - "license": "MIT", - "main": "n/a", - "scripts": { - "build": "gatsby build", - "develop": "gatsby develop" - }, - "devDependencies": { - "prettier": "1.19.1" - }, - "resolutions": { - "nbind": "https://github.com/charto/nbind.git#fe3abe0" - } -} diff --git a/website/src/components/DocsSidebar.css b/website/src/components/DocsSidebar.css deleted file mode 100644 index bbed66ae..00000000 --- a/website/src/components/DocsSidebar.css +++ /dev/null @@ -1,33 +0,0 @@ -/** - * 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. - */ - -.DocsSidebar { - height: 100%; - width: 450px; - padding: 36px; - padding-top: 0px; - border-right: 1px solid #dddfe2; - overflow: auto; -} - -.DocsSidebar h3 { - margin-bottom: 0; -} - -.DocsSidebar h4 { - margin-top: 10px; - margin-bottom: 5px; -} - -@media only screen and (max-width: 992px) { - .DocsSidebar { - width: 100%; - padding: 20px; - padding-top: 0px; - border: none; - } -} diff --git a/website/src/components/DocsSidebar.js b/website/src/components/DocsSidebar.js deleted file mode 100644 index 08be6dd0..00000000 --- a/website/src/components/DocsSidebar.js +++ /dev/null @@ -1,84 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -import React, {Component} from 'react'; -import ReactDOM from 'react-dom'; -import EditValue from '../components/Playground/src/EditValue'; -import Link from 'gatsby-link'; -import './DocsSidebar.css'; -import type {LayoutRecordT} from './Playground/src/LayoutRecord'; - -const TAG_PATTERN = /<\/controls>/gi; - -type Props = { - markdown: string, - onChange: (property: string, value: any) => void, - layout: LayoutRecordT, -}; - -export default class DocsSidebar extends Component { - componentDidMount() { - this.renderControls(this.props); - } - - componentWillReceiveProps(nextProps: Props) { - this.renderControls(nextProps); - } - - renderControls = (props: Props) => { - let match; - while ((match = TAG_PATTERN.exec(props.markdown))) { - const prop = match[1]; - const element = window.document.querySelector( - `controls[prop="${match[1]}"]`, - ); - - if (element) { - if (element.childNodes.length !== 0) { - console.warn( - `The element is not empty. It's content will be replaced by the react-component mounted in this element.`, - ); - } - ReactDOM.render( - { - if (window.ga) { - window.ga('send', { - hitType: 'event', - eventCategory: 'DocsSidebar', - eventAction: 'valueChanged', - eventLabel: prop, - }); - } - props.onChange(property, value); - }} - />, - element, - ); - } - } - }; - - render() { - return ( -
-
- - BACK TO OVERVIEW - -
- ); - } -} diff --git a/website/src/components/FacebookOSSLogo.js b/website/src/components/FacebookOSSLogo.js deleted file mode 100644 index 9907e453..00000000 --- a/website/src/components/FacebookOSSLogo.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -import React, {Component} from 'react'; - -export default () => ( - - - - - - - -); diff --git a/website/src/components/Footer.css b/website/src/components/Footer.css deleted file mode 100644 index cee53cc9..00000000 --- a/website/src/components/Footer.css +++ /dev/null @@ -1,63 +0,0 @@ -/** - * 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. - */ - -.Footer { - display: flex; - padding: 20px 15px; - z-index: 4; - align-items: center; - background-color: white; -} - -.Footer svg { - width: 30px; - height: 30px; -} - -.Footer svg path { - fill: #606770; -} - -.Footer .logoOSS { - display: flex; - align-items: center; - color: #606770; -} - -.Footer .logoOSS svg { - margin-right: 20px; -} - -.Footer a { - margin: 0 15px; - color: #606770; - font-weight: 700; -} - -.Footer a:hover { - color: #6BCEBB; -} - -.Footer .SocialNetwork { - display: flex; - margin-left: auto; -} - -@media only screen and (max-width: 576px) { - .Footer { - padding: 10px 5px; - } - - .Footer .logoOSS svg { - margin-right: 10px; - } - - .Footer a { - margin: 0 10px; - font-size: 12px; - } -} diff --git a/website/src/components/Footer.js b/website/src/components/Footer.js deleted file mode 100644 index 25d39183..00000000 --- a/website/src/components/Footer.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -import React, {Component} from 'react'; -import Link from 'gatsby-link'; -import {Icon} from 'antd'; -import './Footer.css'; -import FacebookOSSLogo from './FacebookOSSLogo'; - -export default class Footer extends Component<{}> { - render() { - return ( - - ); - } -} diff --git a/website/src/components/Padded.css b/website/src/components/Padded.css deleted file mode 100644 index e2d2a4a0..00000000 --- a/website/src/components/Padded.css +++ /dev/null @@ -1,20 +0,0 @@ -/** - * 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. - */ - -.Padded { - width: 100%; - max-width: 1200px; - padding: 0 50px; - margin-left: auto; - margin-right: auto; -} - -@media only screen and (max-width: 576px) { - .Padded { - padding: 0 20px; - } -} diff --git a/website/src/components/Padded.js b/website/src/components/Padded.js deleted file mode 100644 index 0ed49f97..00000000 --- a/website/src/components/Padded.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -import React from 'react'; -import './Padded.css'; - -type Props = { - children: any, - className?: string, -}; - -export default (props: Props) => ( -
{props.children}
-); diff --git a/website/src/components/Page.css b/website/src/components/Page.css deleted file mode 100644 index dd6f4178..00000000 --- a/website/src/components/Page.css +++ /dev/null @@ -1,62 +0,0 @@ -/** - * 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. - */ - -@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro'); - -html, -body { - margin: 0; - padding: 0; - font-family: 'Open Sans', sans-serif; - color: #303845; - font-size: 16px; -} - -code, -pre { - font-family: 'Source Code Pro', monospace; -} - -h1, -h2 { - font-weight: 500; -} - -.gatsby-highlight pre[class*="language-"] { - background: none; - padding: 0; - font-size: 14px; - margin-bottom: 15px; -} - -.Page { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.PageContent { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.PageContent.withSpacing { - padding-top: 35px; -} - -.Page .ant-dropdown-trigger { - display: flex; - align-items: center; - justify-content: space-between; - padding-left: 11px; - padding-right: 11px; -} - -.Page .ant-dropdown-trigger .anticon { - margin-top: 3px; -} diff --git a/website/src/components/Page.js b/website/src/components/Page.js deleted file mode 100644 index 6872de9c..00000000 --- a/website/src/components/Page.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -import React from 'react'; -import Toolbar from './Toolbar'; -import Footer from './Footer'; -import Helmet from 'react-helmet'; -import favicon from '../pages/logos/favicon.png'; -import './Page.css'; -require('prismjs/themes/prism.css'); - -type Props = {| - children: any, - title?: string, - className?: string, - withSpacing?: boolean, - shouldShowFooter?: boolean, -|}; - -export default (props: Props) => ( -
- - {`Yoga Layout${props.title ? ` | ${props.title}` : ''}`} - - - -
- {props.children} -
- {props.shouldShowFooter &&
} -
-); diff --git a/website/src/components/Playground/src/CodeComponentKit.js b/website/src/components/Playground/src/CodeComponentKit.js deleted file mode 100644 index a03c9d90..00000000 --- a/website/src/components/Playground/src/CodeComponentKit.js +++ /dev/null @@ -1,201 +0,0 @@ -/** - * 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. - */ - -// @flow -import yoga from 'yoga-layout/dist/entry-browser'; -import LayoutRecord from './LayoutRecord'; -import PositionRecord from './PositionRecord'; -import type {LayoutRecordT} from './LayoutRecord'; -import type {Yoga$Direction, Yoga$Node} from 'yoga-layout'; - -const enumLookup = { - flexDirection: { - [yoga.FLEX_DIRECTION_COLUMN]: 'CKFlexboxDirectionVertical', - [yoga.FLEX_DIRECTION_ROW]: 'CKFlexboxDirectionHorizontal', - [yoga.FLEX_DIRECTION_COLUMN_REVERSE]: 'CKFlexboxDirectionVerticalReverse', - [yoga.FLEX_DIRECTION_ROW_REVERSE]: 'CKFlexboxDirectionHorizontalReverse', - }, - alignItems: { - [yoga.ALIGN_FLEX_START]: 'CKFlexboxAlignItemsStart', - [yoga.ALIGN_FLEX_END]: 'CKFlexboxAlignItemsEnd', - [yoga.ALIGN_CENTER]: 'CKFlexboxAlignItemsCenter', - [yoga.ALIGN_BASELINE]: 'CKFlexboxAlignItemsBaseline', - [yoga.ALIGN_STRETCH]: 'CKFlexboxAlignItemsStretch', - }, - alignSelf: { - [yoga.ALIGN_AUTO]: 'CKFlexboxAlignSelfAuto', - [yoga.ALIGN_FLEX_START]: 'CKFlexboxAlignSelfStart', - [yoga.ALIGN_FLEX_END]: 'CKFlexboxAlignSelfEnd', - [yoga.ALIGN_CENTER]: 'CKFlexboxAlignSelfCenter', - [yoga.ALIGN_BASELINE]: 'CKFlexboxAlignSelfBaseline', - [yoga.ALIGN_STRETCH]: 'CKFlexboxAlignSelfStretch', - }, - alignContent: { - [yoga.ALIGN_FLEX_START]: 'CKFlexboxAlignContentStart', - [yoga.ALIGN_FLEX_END]: 'CKFlexboxAlignContentEnd', - [yoga.ALIGN_CENTER]: 'CKFlexboxAlignContentCenter', - [yoga.ALIGN_SPACE_BETWEEN]: 'CKFlexboxAlignContentSpaceBetween', - [yoga.ALIGN_SPACE_AROUND]: 'CKFlexboxAlignContentSpaceAround', - [yoga.ALIGN_STRETCH]: 'CKFlexboxAlignContentStretch', - }, - justifyContent: { - [yoga.JUSTIFY_FLEX_START]: 'CKFlexboxJustifyContentStart', - [yoga.JUSTIFY_CENTER]: 'CKFlexboxJustifyContentCenter', - [yoga.JUSTIFY_FLEX_END]: 'CKFlexboxJustifyContentEnd', - [yoga.JUSTIFY_SPACE_BETWEEN]: 'CKFlexboxJustifyContentSpaceBetween', - [yoga.JUSTIFY_SPACE_AROUND]: 'CKFlexboxJustifyContentSpaceAround', - }, - flexWrap: { - [yoga.WRAP_NO_WRAP]: 'CKFlexboxWrapNoWrap', - [yoga.WRAP_WRAP]: 'CKFlexboxWrapWrap', - [yoga.WRAP_WRAP_REVERSE]: 'CKFlexboxWrapWrapReverse', - }, - positionType: { - [yoga.POSITION_TYPE_RELATIVE]: 'CKFlexboxPositionTypeRelative', - [yoga.POSITION_TYPE_ABSOLUTE]: 'CKFlexboxPositionTypeAbsolute', - }, -}; - -const untouchedLayout = LayoutRecord({}); -const untouchedPosition = PositionRecord({}); - -function keyLookup(key: string): string { - const keyLookup = { - flexWrap: 'wrap', - flexDirection: 'direction', - }; - return keyLookup[key] || key; -} - -function getValue(value) { - if (typeof value === 'string' && /%$/.test(value)) { - return `RCRelativeDimension::Percent(${parseFloat(value)})`; - } else if (value === 'auto') { - return 'RCRelativeDimension::Auto()'; - } else { - return String(parseFloat(value)); - } -} - -function getLayoutCode( - node: LayoutRecordT, - indent: string = '', - isRoot?: boolean, -): string { - const lines = []; - const isFlexbox = node.children.size > 0; - - lines.push( - indent + - `${isRoot ? '' : `.component = \n${indent}`}[${ - isFlexbox ? 'CKFlexboxComponent' : 'CKComponent' - }`, - ); - lines.push(indent + ` newWithView:{}`); - lines.push( - indent + ` size:{${getValue(node.width)},${getValue(node.height)}}`, - ); - - const CKFlexboxComponentStyle = [ - 'direction', - 'margin', - 'justifyContent', - 'alignItems', - 'alignContent', - 'wrap', - 'padding', - 'border', - ]; - const CKFlexboxComponentChild = [ - 'margin', - 'padding', - 'flexGrow', - 'flexShrink', - 'flexBasis', - 'alignSelf', - 'position', - ]; - - if (isFlexbox) { - // render styles - lines.push(indent + ` style:{`); - indent += '\t'; - CKFlexboxComponentStyle.forEach(key => { - let line = renderKey(node, key, indent); - if (line) { - lines.push(line); - } - }); - indent = indent.substr(-1); - lines.push(indent + ` }`); - - // render children - lines.push(indent + ' children:{'); - lines.push( - ...node.children - .toJSON() - .map( - child => - `${indent}\t{\n${getLayoutCode( - child, - indent + '\t\t', - )}\n${indent}\t},`, - ), - ); - lines.push(indent + `}]${isRoot ? ';' : ','}`); - } else { - lines[lines.length - 1] += '],'; - CKFlexboxComponentChild.forEach(key => { - let line = renderKey(node, key, indent); - if (line) { - lines.push(line); - } - }); - } - - return lines.join('\n'); -} - -function renderKey(node: Yoga$Node, key: string, indent: string): ?string { - if ( - node[key] instanceof PositionRecord && - !node[key].equals(untouchedPosition) - ) { - const lines = []; - lines.push(indent + `.${key} = {`); - - if (key === 'position') { - lines.push( - indent + `\t.type = ${enumLookup.positionType[node.positionType]},`, - ); - } - - ['top', 'start', 'end', 'bottom'].forEach(pKey => { - if (node[key][pKey]) { - lines.push(indent + `\t.${pKey} = ${getValue(node[key][pKey])},`); - } - }); - - lines.push(indent + `},`); - return lines.join('\n'); - } else if (node[key] !== untouchedLayout[key]) { - if (enumLookup[key]) { - return indent + `.${keyLookup(key)} = ${enumLookup[key][node[key]]},`; - } else { - console.error(`Unknown property ${key}`); - } - } -} - -export default function generateCode( - root: LayoutRecordT, - direction: Yoga$Direction, -): string { - return ['CKFlexboxComponent *c =', getLayoutCode(root, '\t', true)].join( - '\n', - ); -} diff --git a/website/src/components/Playground/src/CodeGenerators.css b/website/src/components/Playground/src/CodeGenerators.css deleted file mode 100644 index 4ac41e81..00000000 --- a/website/src/components/Playground/src/CodeGenerators.css +++ /dev/null @@ -1,27 +0,0 @@ -/** - * 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. - */ - -.CodeGeneratorsTitle { - display: flex; - justify-content: space-between; -} - - -.CodeGeneratorsTitle a { - font-size: 13px; - font-weight: normal; - margin-right: 20px; -} - -.CodeGeneratorsCopyText { - position: absolute; - top: -9999em; - left: -9999em; - pointer-events: none; - width: 0; - height: 0; -} diff --git a/website/src/components/Playground/src/CodeGenerators.js b/website/src/components/Playground/src/CodeGenerators.js deleted file mode 100644 index 858b080a..00000000 --- a/website/src/components/Playground/src/CodeGenerators.js +++ /dev/null @@ -1,158 +0,0 @@ -/** - * 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. - * - * @flow - * @format - */ - -import React, {Component} from 'react'; -import {Menu, Button, Row, Col, Dropdown, Icon, Modal, Tooltip} from 'antd'; -import SyntaxHighlighter, { - registerLanguage, -} from 'react-syntax-highlighter/prism-light'; -import styles from 'react-syntax-highlighter/styles/prism/prism'; -import CodeJavaScript from './CodeJavaScript'; -import CodeLitho from './CodeLitho'; -import CodeReactNative from './CodeReactNative'; -import CodeComponentKit from './CodeComponentKit'; -import jsx from 'react-syntax-highlighter/languages/prism/jsx'; -//import javascript from 'react-syntax-highlighter/languages/prism/javascript'; -import java from 'react-syntax-highlighter/languages/prism/java'; -import objectivec from 'react-syntax-highlighter/languages/prism/objectivec'; -registerLanguage('jsx', jsx); -//registerLanguage('javascript', javascript); -registerLanguage('java', java); -registerLanguage('objectivec', objectivec); - -import './CodeGenerators.css'; - -import type {LayoutRecordT} from './LayoutRecord'; -import type {Yoga$Direction} from 'yoga-layout'; - -type Props = { - layoutDefinition: LayoutRecordT, - direction: Yoga$Direction, -}; -type State = { - showModal: ?string, - copied: boolean, -}; - -const LANGUAGES = { - litho: { - title: 'Litho', - generator: CodeLitho, - syntax: 'java', - }, - componentKit: { - title: 'ComponentKit', - generator: CodeComponentKit, - syntax: 'objectivec', - }, - reactNative: { - title: 'React Native', - generator: CodeReactNative, - syntax: 'jsx', - }, -}; -['Litho', 'ComponentKit', 'React Native']; - -export default class CodeGenerators extends Component { - state = { - showModal: null, - copied: false, - }; - - _ref: ?HTMLTextAreaElement; - - onClick = ({key}: {key: string}) => { - this.setState({showModal: key}); - if (window.ga) { - window.ga('send', { - hitType: 'event', - eventCategory: 'CodeGenerators', - eventAction: 'show', - eventLabel: key, - }); - } - }; - - onCopy = () => { - if (this._ref) { - this._ref.select(); - document.execCommand('Copy'); - this.setState({copied: true}); - } - }; - - render() { - const {showModal} = this.state; - - const menu = ( - - {Object.keys(LANGUAGES).map(key => ( - {LANGUAGES[key].title} - ))} - - ); - - const code = showModal - ? LANGUAGES[showModal].generator( - this.props.layoutDefinition, - this.props.direction, - ) - : ''; - - return [ - - {LANGUAGES[showModal].title} - this.setState({copied: false})}> - copy to clipboard - -
- ) : ( - '' - ) - } - visible={Boolean(showModal)} - footer={null} - bodyStyle={{padding: 0}} - onCancel={() => this.setState({showModal: null})}> - {showModal && ( -
-