Added a Styling page

derdela · May 7, 2017 · 73e98ae · 73e98ae
1 parent 77874a1
commit 73e98ae
Show file tree

Hide file tree

Showing 14 changed files with 242 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -6,11 +6,15 @@
     "react-scripts": "0.9.5"
   },
   "dependencies": {
+    "fela": "^4.3.5",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-fela": "^4.3.5",
+    "react-jss": "^6.1.1",
     "react-router": "^4.1.1",
-    "react-router-dom": "^4.1.1"
+    "react-router-dom": "^4.1.1",
+    "styled-components": "^1.4.6"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -14,6 +14,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <style id="fela-stylesheet"></style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/Router/index.js b/src/components/Router/index.js
@@ -12,6 +12,7 @@ import ManipulatingData from '../../pages/ManipulatingData'
 import About from '../../pages/About'
 import Children from '../../pages/Children'
 import Events from '../../pages/Events'
+import Styling from '../../pages/Styling'
 import './styles.css'
 
 class Navigation extends React.Component {
@@ -31,6 +32,7 @@ class Navigation extends React.Component {
             <li><Link to='/State' className='Link'>Stateful components</Link></li>
             <li><Link to='/HigherOrder' className='Link'>Higher-order functions</Link></li>
             <li><Link to='/ManipulatingData' className='Link'>Manipulating Data</Link></li>
+            <li><Link to='/Styling' className='Link'>Styling</Link></li>
             <li><Link to='/About' className='Link'>About us</Link></li>
           </ol>
         </nav>
@@ -45,6 +47,7 @@ class Navigation extends React.Component {
         <Route path='/Lifecycle' component={Lifecycle} />
         <Route path='/HigherOrder' component={HigherOrder} />
         <Route path='/ManipulatingData' component={ManipulatingData} />
+        <Route path='/Styling' component={Styling} />
         <Route path='/About' component={About} />
       </div>
     )

diff --git a/src/index.js b/src/index.js
@@ -5,14 +5,25 @@ import Main from './components/Main'
 import Router from './components/Router'
 import Page from './components/Page'
 import './index.css'
+// Fela Setup
+// http://fela.js.org/docs/guides/UsageWithReact.html
+import { createRenderer } from 'fela'
+import { Provider } from 'react-fela'
+
+const renderer = createRenderer()
+// The provider will automatically renderer the styles
+// into the mountNode on componentWillMount
+const mountNode = document.getElementById('fela-stylesheet')
 
 ReactDOM.render(
   <HashRouter>
-    <Main>
-      <Page>
-        <Router />
-      </Page>
-    </Main>
+    <Provider renderer={renderer} mountNode={mountNode}>
+      <Main>
+        <Page>
+          <Router />
+        </Page>
+      </Main>
+    </Provider>
   </HashRouter>,
   document.getElementById('root')
 )
diff --git a/src/pages/HigherOrder/index.js b/src/pages/HigherOrder/index.js
@@ -51,6 +51,10 @@ const Page = (props) => (
     <Example live>
       <ViewportWidthDisplay />
     </Example>
+
+    <p>
+      When you’re done, make sure it reacts to viewport width’ changes as well!
+    </p>
   </div>
 )
 

diff --git a/src/pages/Styling/Button/index.js b/src/pages/Styling/Button/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import './styles.css'
+
+const Button = (props) => (
+  <button type='button' className='button'>
+    {props.children}
+  </button>
+)
+
+export default Button
diff --git a/src/pages/Styling/Button/styles.css b/src/pages/Styling/Button/styles.css
@@ -0,0 +1,14 @@
+.button {
+  border: 1px solid;
+  color: rgb(52, 183, 188);
+  padding: 0.5em 1em;
+  font: inherit;
+  background-color: transparent;
+  border-radius: 0.25em;
+}
+
+.button:hover,
+.button:active {
+  background-color: rgb(52, 183, 188);
+  color: white;
+}
diff --git a/src/pages/Styling/ButtonFela/index.js b/src/pages/Styling/ButtonFela/index.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import styles from './styles'
+import { createComponent } from 'react-fela'
+const StyledButton = createComponent(styles, 'button', ['type'])
+
+const Button = (props) => (
+  <StyledButton type='button'>
+    {props.children}
+  </StyledButton>
+)
+
+export default Button
diff --git a/src/pages/Styling/ButtonFela/styles.js b/src/pages/Styling/ButtonFela/styles.js
@@ -0,0 +1,18 @@
+const active = {
+  'background-color': 'rgb(52, 183, 188)',
+  'color': 'white'
+}
+
+const button = (props) => ({
+  'border': '1px solid',
+  'color': 'rgb(52, 183, 188)',
+  'padding': '0.5em 1em',
+  'font': 'inherit',
+  'background-color': 'transparent',
+  'border-radius': '0.25em',
+
+  ':hover': active,
+  ':active': active
+})
+
+export default button
diff --git a/src/pages/Styling/ButtonJSS/index.js b/src/pages/Styling/ButtonJSS/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import injectSheet from 'react-jss'
+import styles from './styles'
+
+const Button = (props) => (
+  <button className={props.classes.button} type='button'>
+    {props.children}
+  </button>
+)
+
+export default injectSheet(styles)(Button)
diff --git a/src/pages/Styling/ButtonJSS/styles.js b/src/pages/Styling/ButtonJSS/styles.js
@@ -0,0 +1,17 @@
+const active = {
+  'background-color': 'rgb(52, 183, 188)',
+  'color': 'white'
+}
+
+const button = {
+  'border': '1px solid',
+  'color': 'rgb(52, 183, 188)',
+  'padding': '0.5em 1em',
+  'font': 'inherit',
+  'background-color': 'transparent',
+  'border-radius': '0.25em',
+  '&:hover': active,
+  '&:active': active
+}
+
+export default { button }
diff --git a/src/pages/Styling/ButtonStyled/index.js b/src/pages/Styling/ButtonStyled/index.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+import React from 'react'
+import styles from './styles'
+const StyledButton = styled.button`${styles}`
+
+const StyledButtonStyled = (props) => (
+  <StyledButton type='button'>
+    {props.children}
+  </StyledButton>
+)
+
+export default StyledButtonStyled
diff --git a/src/pages/Styling/ButtonStyled/styles.js b/src/pages/Styling/ButtonStyled/styles.js
@@ -0,0 +1,14 @@
+export default `
+  border: 1px solid;
+  color: rgb(52, 183, 188);
+  padding: 0.5em 1em;
+  font: inherit;
+  background-color: transparent;
+  border-radius: 0.25em;
+
+  &:hover,
+  &:active {
+    background-color: rgb(52, 183, 188);
+    color: white;
+  }
+`
diff --git a/src/pages/Styling/index.js b/src/pages/Styling/index.js
@@ -0,0 +1,105 @@
+import React from 'react'
+import Code from '../../components/Code'
+import PageTitle from '../../components/PageTitle'
+import SectionTitle from '../../components/SectionTitle'
+import Example from '../../components/Example'
+import Button from './Button'
+import ButtonStyled from './ButtonStyled'
+import ButtonFela from './ButtonFela'
+import ButtonJSS from './ButtonJSS'
+
+const Page = (props) => (
+  <div>
+    <PageTitle text='Styling' />
+
+    <p>
+      Styling components in React can be done in many ways, from vanilla styles
+      in a separate CSS file to CSS-in-JS solutions, and anything in between!
+      To put it simply, this is a mess. But that also means you can pick what
+      you like.
+    </p>
+
+    <p>
+      In this (create-react-app) project, we use separate CSS files that are
+      imported within components through some hidden Webpack magic. This means
+      we can author CSS based on class names and regular selectors that we apply
+      on our JSX. Under the hood, Webpack is extracting this CSS
+      into <code>style</code> blocks injected in the <code>head</code> of the
+      page.
+    </p>
+
+    <Code language='jsx'>{`/* Button/index.js */
+import React from 'react'
+import './styles.css'
+
+const Button = (props) => (
+  <button type='button' className='button'>
+    {props.children}
+  </button>
+)
+
+export default Button`}</Code>
+
+
+<Code language='css'>{`/* Button/styles.css */
+.button {
+  border: 1px solid;
+  color: rgb(52, 183, 188);
+  padding: 0.5em 1em;
+  font: inherit;
+  background-color: transparent;
+  border-radius: 0.25em;
+}
+
+.button:hover,
+.button:active {
+  background-color: rgb(52, 183, 188);
+  color: white;
+}
+`}</Code>
+
+    <Example live>
+      <Button>I’m a button</Button>
+    </Example>
+
+    <PageTitle text='CSS preprocessors' />
+
+    <p>
+      One thing about React and its componentized approach is that it makes
+      preprocessors such as LESS or Sass slightly less useful. Indeed, styles do
+      not have to operate in a single huge global namespace anymore and can be
+      scoped within components’ reach.
+    </p>
+
+    <p>
+      create-react-app provides <a href='https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc' target='_blank'>a way to use a CSS preprocessors</a> without
+      having to bring own your own full configuration.
+    </p>
+
+    <p>
+      <strong>Our opinion:</strong> Don’t do this. CSS-in-JS solutions provide
+      as many benefits (if not more) as CSS processors like LESS or Sass.
+    </p>
+
+    <PageTitle text='CSS-in-JS (Yay)' />
+
+    <p>There are many different solutions to this, we’ll quickly cover what
+    appears to be the most popular solution – 
+    <a href='https://styled-components.com/' target='_blank'>styled-components 💅
+    </a>, <a href='https://github.com/cssinjs/react-jss' target='_blank'>JSS</a>,
+    and our favourite – <a href='http://fela.js.org/' target='_blank'>Fela</a>.</p>
+
+    <Example live>
+      <ButtonStyled>I’m a button styled with styled-components 💅</ButtonStyled>
+    </Example>
+    <Example live>
+      <ButtonJSS>I’m a button styled with JSS</ButtonJSS>
+    </Example>
+    <Example live>
+      <ButtonFela>I’m a button styled with Fela</ButtonFela>
+    </Example>
+
+  </div>
+)
+
+export default Page