Merge branch 'canary' into add-telemetry-next-image-formats

examples/with-yoga/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

examples/with-yoga/README.md

@@ -0,0 +1,23 @@
+# Yoga Design System Example
+
+This example shows how to use Next.js along with [Yoga Design System](https://gympass.github.io/yoga/). This is intended to show the integration of this UI toolkit with the Framework.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-yoga)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-yoga&project-name=with-yoga&repository-name=with-yoga)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-yoga with-yoga-app
+# or
+yarn create next-app --example with-yoga with-yoga-app
+# or
+pnpm create next-app -- --example with-yoga with-yoga-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-yoga/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+}
+
+module.exports = nextConfig

examples/with-yoga/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@gympass/yoga": "^7.28.0",
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^4.4.1"
+  }
+}

examples/with-yoga/pages/_app.js

@@ -0,0 +1,22 @@
+import { ThemeProvider, FontLoader } from '@gympass/yoga'
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 20px;
+    padding: 0;
+    box-sizing: border-box;
+  }
+`
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider>
+      <GlobalStyle />
+      <FontLoader />
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}
+
+export default MyApp

examples/with-yoga/pages/_document.js

@@ -0,0 +1,30 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

examples/with-yoga/pages/index.js

@@ -0,0 +1,11 @@
+import { Box, Text, Button, Divider } from '@gympass/yoga'
+
+export default function Home() {
+  return (
+    <Box d="flex" flexDirection="column" alignItems="center">
+      <Text.H2>@gympass/yoga with Next.js</Text.H2>
+      <Divider />
+      <Button>Yoga Design System</Button>
+    </Box>
+  )
+}