From 417d71c8445453a2133f22edecebe8043dbe8340 Mon Sep 17 00:00:00 2001 From: Matheus Martins Date: Mon, 18 Apr 2022 17:55:02 -0300 Subject: [PATCH 1/8] docs: add yoga to examples --- examples/with-yoga/.gitignore | 32 +++++++++++++++++++++++++++++++ examples/with-yoga/README.md | 21 ++++++++++++++++++++ examples/with-yoga/next.config.js | 6 ++++++ examples/with-yoga/package.json | 20 +++++++++++++++++++ examples/with-yoga/pages/_app.js | 12 ++++++++++++ examples/with-yoga/pages/index.js | 11 +++++++++++ 6 files changed, 102 insertions(+) create mode 100644 examples/with-yoga/.gitignore create mode 100644 examples/with-yoga/README.md create mode 100644 examples/with-yoga/next.config.js create mode 100644 examples/with-yoga/package.json create mode 100644 examples/with-yoga/pages/_app.js create mode 100644 examples/with-yoga/pages/index.js diff --git a/examples/with-yoga/.gitignore b/examples/with-yoga/.gitignore new file mode 100644 index 000000000000..55175ef867e0 --- /dev/null +++ b/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 diff --git a/examples/with-yoga/README.md b/examples/with-yoga/README.md new file mode 100644 index 000000000000..32fe326d3856 --- /dev/null +++ b/examples/with-yoga/README.md @@ -0,0 +1,21 @@ +# 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 + +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)). +``` diff --git a/examples/with-yoga/next.config.js b/examples/with-yoga/next.config.js new file mode 100644 index 000000000000..a843cbee09af --- /dev/null +++ b/examples/with-yoga/next.config.js @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +} + +module.exports = nextConfig diff --git a/examples/with-yoga/package.json b/examples/with-yoga/package.json new file mode 100644 index 000000000000..11d85d4e04c6 --- /dev/null +++ b/examples/with-yoga/package.json @@ -0,0 +1,20 @@ +{ + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@gympass/yoga": "latest", + "next": "latest", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "styled-components": "latest" + }, + "devDependencies": { + "eslint": "latest", + "eslint-config-next": "latest" + } +} diff --git a/examples/with-yoga/pages/_app.js b/examples/with-yoga/pages/_app.js new file mode 100644 index 000000000000..acb70d03966e --- /dev/null +++ b/examples/with-yoga/pages/_app.js @@ -0,0 +1,12 @@ +import { ThemeProvider, FontLoader } from '@gympass/yoga' + +function MyApp({ Component, pageProps }) { + return ( + + + + + ) +} + +export default MyApp diff --git a/examples/with-yoga/pages/index.js b/examples/with-yoga/pages/index.js new file mode 100644 index 000000000000..7e245a3c38b3 --- /dev/null +++ b/examples/with-yoga/pages/index.js @@ -0,0 +1,11 @@ +import { Box, Text, Button, Divider } from '@gympass/yoga' + +export default function Home() { + return ( + + @gympass/yoga with Next.js + + + + ) +} From 279142b5d9f06aa447b65a6d624ea31f094ce3cd Mon Sep 17 00:00:00 2001 From: Matheus Martins Date: Tue, 19 Apr 2022 08:18:09 -0300 Subject: [PATCH 2/8] fix: add config to styled-components --- examples/with-yoga/next.config.js | 3 +++ examples/with-yoga/pages/_app.js | 10 +++++++++ examples/with-yoga/pages/_document.js | 30 +++++++++++++++++++++++++++ 3 files changed, 43 insertions(+) create mode 100644 examples/with-yoga/pages/_document.js diff --git a/examples/with-yoga/next.config.js b/examples/with-yoga/next.config.js index a843cbee09af..0c1f043c8a0d 100644 --- a/examples/with-yoga/next.config.js +++ b/examples/with-yoga/next.config.js @@ -1,6 +1,9 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + compiler: { + styledComponents: true, + }, } module.exports = nextConfig diff --git a/examples/with-yoga/pages/_app.js b/examples/with-yoga/pages/_app.js index acb70d03966e..9a948c8c2576 100644 --- a/examples/with-yoga/pages/_app.js +++ b/examples/with-yoga/pages/_app.js @@ -1,8 +1,18 @@ import { ThemeProvider, FontLoader } from '@gympass/yoga' +import { createGlobalStyle } from 'styled-components' + +const GlobalStyle = createGlobalStyle` + body { + margin: 0; + padding: 0; + box-sizing: border-box; + } +` function MyApp({ Component, pageProps }) { return ( + diff --git a/examples/with-yoga/pages/_document.js b/examples/with-yoga/pages/_document.js new file mode 100644 index 000000000000..2a59afeb93c1 --- /dev/null +++ b/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(), + }) + + const initialProps = await Document.getInitialProps(ctx) + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {sheet.getStyleElement()} + + ), + } + } finally { + sheet.seal() + } + } +} From 055af51fb0351a96b9fad2afd71c9a2720952f30 Mon Sep 17 00:00:00 2001 From: Matheus Martins Date: Tue, 19 Apr 2022 18:32:16 -0300 Subject: [PATCH 3/8] doc: fix review --- examples/with-yoga/README.md | 8 +++++--- examples/with-yoga/package.json | 2 +- examples/with-yoga/pages/_app.js | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/with-yoga/README.md b/examples/with-yoga/README.md index 32fe326d3856..cc9ada49782d 100644 --- a/examples/with-yoga/README.md +++ b/examples/with-yoga/README.md @@ -13,9 +13,11 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu 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 +npx create-next-app --example with-chakra-ui with-chakra-ui-app # or -yarn create next-app --example with-yoga with-yoga-app +yarn create next-app --example with-chakra-ui with-chakra-ui-app +# or +pnpm create next-app -- --example with-chakra-ui with-chakra-ui-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)). -``` diff --git a/examples/with-yoga/package.json b/examples/with-yoga/package.json index 11d85d4e04c6..8402951b81b7 100644 --- a/examples/with-yoga/package.json +++ b/examples/with-yoga/package.json @@ -7,7 +7,7 @@ "lint": "next lint" }, "dependencies": { - "@gympass/yoga": "latest", + "@gympass/yoga": "^7.28.0", "next": "latest", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/examples/with-yoga/pages/_app.js b/examples/with-yoga/pages/_app.js index 9a948c8c2576..e31c2adc8c91 100644 --- a/examples/with-yoga/pages/_app.js +++ b/examples/with-yoga/pages/_app.js @@ -3,7 +3,7 @@ import { createGlobalStyle } from 'styled-components' const GlobalStyle = createGlobalStyle` body { - margin: 0; + margin: 20px; padding: 0; box-sizing: border-box; } From 3ce1453f3a745f08ded0cbb1c2585705e006752c Mon Sep 17 00:00:00 2001 From: Matheus Martins Date: Tue, 19 Apr 2022 18:37:09 -0300 Subject: [PATCH 4/8] chore: add version to styled-components --- examples/with-yoga/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-yoga/package.json b/examples/with-yoga/package.json index 8402951b81b7..b4885658e494 100644 --- a/examples/with-yoga/package.json +++ b/examples/with-yoga/package.json @@ -11,7 +11,7 @@ "next": "latest", "react": "^17.0.2", "react-dom": "^17.0.2", - "styled-components": "latest" + "styled-components": "^4.4.1" }, "devDependencies": { "eslint": "latest", From 2a1898482c945294cb0eaadf96a94766630c2efb Mon Sep 17 00:00:00 2001 From: Matheus Martins Date: Tue, 19 Apr 2022 18:41:06 -0300 Subject: [PATCH 5/8] fix: update example --- examples/with-yoga/README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/with-yoga/README.md b/examples/with-yoga/README.md index cc9ada49782d..e0b1c116ba6c 100644 --- a/examples/with-yoga/README.md +++ b/examples/with-yoga/README.md @@ -13,11 +13,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu 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-chakra-ui with-chakra-ui-app +npx create-next-app --example with-yoga with-yoga-app # or -yarn create next-app --example with-chakra-ui with-chakra-ui-app -# or -pnpm create next-app -- --example with-chakra-ui with-chakra-ui-app +yarn 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)). From 195c5d8f795026f507f3a936f9d79361f4d0edbf Mon Sep 17 00:00:00 2001 From: Matheus Martins Date: Tue, 19 Apr 2022 18:46:48 -0300 Subject: [PATCH 6/8] doc: fix review --- examples/with-yoga/README.md | 2 ++ examples/with-yoga/package.json | 4 ---- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/with-yoga/README.md b/examples/with-yoga/README.md index e0b1c116ba6c..74d5e35d7ef3 100644 --- a/examples/with-yoga/README.md +++ b/examples/with-yoga/README.md @@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag 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)). diff --git a/examples/with-yoga/package.json b/examples/with-yoga/package.json index b4885658e494..ccbe28b66788 100644 --- a/examples/with-yoga/package.json +++ b/examples/with-yoga/package.json @@ -12,9 +12,5 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "styled-components": "^4.4.1" - }, - "devDependencies": { - "eslint": "latest", - "eslint-config-next": "latest" } } From 62b94cc6c8e631d6c4ce4392e9a7e017f09ea8f4 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Tue, 19 Apr 2022 16:59:54 -0500 Subject: [PATCH 7/8] Apply suggestions from code review --- examples/with-yoga/pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-yoga/pages/index.js b/examples/with-yoga/pages/index.js index 7e245a3c38b3..01cea812240f 100644 --- a/examples/with-yoga/pages/index.js +++ b/examples/with-yoga/pages/index.js @@ -3,9 +3,9 @@ import { Box, Text, Button, Divider } from '@gympass/yoga' export default function Home() { return ( - @gympass/yoga with Next.js + @gympass/yoga with Next.js - + ) } From 312ebec5ee8ca4d2a9312ed657a9ad827bdb8875 Mon Sep 17 00:00:00 2001 From: Matheus Martins Date: Tue, 19 Apr 2022 19:01:25 -0300 Subject: [PATCH 8/8] doc: fix review --- examples/with-yoga/pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-yoga/pages/index.js b/examples/with-yoga/pages/index.js index 7e245a3c38b3..01cea812240f 100644 --- a/examples/with-yoga/pages/index.js +++ b/examples/with-yoga/pages/index.js @@ -3,9 +3,9 @@ import { Box, Text, Button, Divider } from '@gympass/yoga' export default function Home() { return ( - @gympass/yoga with Next.js + @gympass/yoga with Next.js - + ) }