From c30e54283f845a2cc61c67f950cdf5793fccea9a Mon Sep 17 00:00:00 2001 From: Alejandro Garcia Anglada Date: Tue, 14 Jan 2020 18:18:31 +0000 Subject: [PATCH] Added with-styled-components-rtl example (#10074) * Added with-styled-components-rtl example * Add idea behing the example Co-authored-by: Joe Haddad --- examples/with-styled-components-rtl/.babelrc | 4 ++ examples/with-styled-components-rtl/README.md | 56 +++++++++++++++++++ .../with-styled-components-rtl/package.json | 20 +++++++ .../with-styled-components-rtl/pages/_app.js | 21 +++++++ .../pages/_document.js | 33 +++++++++++ .../with-styled-components-rtl/pages/index.js | 10 ++++ 6 files changed, 144 insertions(+) create mode 100644 examples/with-styled-components-rtl/.babelrc create mode 100644 examples/with-styled-components-rtl/README.md create mode 100644 examples/with-styled-components-rtl/package.json create mode 100644 examples/with-styled-components-rtl/pages/_app.js create mode 100644 examples/with-styled-components-rtl/pages/_document.js create mode 100644 examples/with-styled-components-rtl/pages/index.js diff --git a/examples/with-styled-components-rtl/.babelrc b/examples/with-styled-components-rtl/.babelrc new file mode 100644 index 000000000000..854cb73a8103 --- /dev/null +++ b/examples/with-styled-components-rtl/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["next/babel"], + "plugins": [["styled-components", { "ssr": true }]] +} diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md new file mode 100644 index 000000000000..85eca1a20bf7 --- /dev/null +++ b/examples/with-styled-components-rtl/README.md @@ -0,0 +1,56 @@ +# Example with styled-components RTL + +This example shows how to use nextjs with right to left (RTL) styles using styled-components. + +## Deploy your own + +Deploy the example using [ZEIT Now](https://zeit.co/now): + +[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-styled-components-rtl) + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: + +```bash +npx create-next-app --example with-styled-components-rtl with-styled-components-rtl-app +# or +yarn create next-app --example with-styled-components-rtl with-styled-components-rtl-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-styled-components-rtl +cd with-styled-components-rtl +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): + +```bash +now +``` + +## The idea behind the example + +Right to left allows to "flip" every element in your site to fit the needs of the cultures that are read from right to left (like arabic for example). + +This example shows how to enable right to left styles using `styled-components`. + +The good news, is there is no need of doing it manually anymore. `stylis-plugin-rtl` makes the transformation automatic. + +From `pages/index.js` you can see, styles are `text-align: left;`, but what is actually applied is `text-align: right;`. diff --git a/examples/with-styled-components-rtl/package.json b/examples/with-styled-components-rtl/package.json new file mode 100644 index 000000000000..92adec04bd32 --- /dev/null +++ b/examples/with-styled-components-rtl/package.json @@ -0,0 +1,20 @@ +{ + "name": "with-styled-components", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "16.12.0", + "react-dom": "16.12.0", + "styled-components": "5.0.0", + "stylis-plugin-rtl": "1.0.0" + }, + "devDependencies": { + "babel-plugin-styled-components": "1.10.6" + }, + "license": "ISC" +} diff --git a/examples/with-styled-components-rtl/pages/_app.js b/examples/with-styled-components-rtl/pages/_app.js new file mode 100644 index 000000000000..327914620e97 --- /dev/null +++ b/examples/with-styled-components-rtl/pages/_app.js @@ -0,0 +1,21 @@ +import App from 'next/app' +import React from 'react' +import { ThemeProvider } from 'styled-components' + +const theme = { + colors: { + primary: '#0070f3', + }, +} + +export default class MyApp extends App { + render() { + const { Component, pageProps } = this.props + + return ( + + + + ) + } +} diff --git a/examples/with-styled-components-rtl/pages/_document.js b/examples/with-styled-components-rtl/pages/_document.js new file mode 100644 index 000000000000..4aae44fc0e3d --- /dev/null +++ b/examples/with-styled-components-rtl/pages/_document.js @@ -0,0 +1,33 @@ +import React from 'react' +import Document, { Head, Main, NextScript } from 'next/document' +import { ServerStyleSheet, StyleSheetManager } from 'styled-components' +import stylisRTLPlugin from 'stylis-plugin-rtl' + +export default class MyDocument extends Document { + static getInitialProps({ renderPage }) { + const sheet = new ServerStyleSheet() + + const page = renderPage(App => props => + sheet.collectStyles( + + + + ) + ) + + const styleTags = sheet.getStyleElement() + + return { ...page, styleTags } + } + render() { + return ( + + {this.props.styleTags} + +
+ + + + ) + } +} diff --git a/examples/with-styled-components-rtl/pages/index.js b/examples/with-styled-components-rtl/pages/index.js new file mode 100644 index 000000000000..a965d2de1ad6 --- /dev/null +++ b/examples/with-styled-components-rtl/pages/index.js @@ -0,0 +1,10 @@ +import React from 'react' +import styled from 'styled-components' + +const Title = styled.h1` + font-size: 50px; + color: ${({ theme }) => theme.colors.primary}; + text-align: left; +` + +export default () => My page