create tools app

.gitignore

@@ -0,0 +1 @@
+node_modules

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - '7'
+  - '8'

bin/create-tools-app

@@ -0,0 +1,38 @@
+#! /usr/bin/env node
+
+// Packages
+const chalk = require('chalk')
+const meow = require('meow')
+const updateNotifier = require('update-notifier')
+
+// Lib
+const { createToolsApp } = require('./..')
+
+const cli = meow(
+  `
+ Usage:
+   $ create-tools-app <project-directory>
+   $ create-tools-app <project-directory> <example-name>
+
+ Example:
+  $ create-tools-app new-dashboard
+  $ create-tools-app new-dashboard with-apollo
+
+ Options:
+   -h, --help            Show help options
+   -v, --version         Show version
+`,
+  {
+    alias: {
+      h: 'help',
+      v: 'version'
+    }
+  }
+)
+
+updateNotifier({ pkg: cli.pkg }).notify()
+
+const projectName = cli.input[0]
+const example = cli.input[1]
+
+createToolsApp({ projectName, example })

examples/with-apollo/components/footer.js

@@ -0,0 +1,33 @@
+'use strict'
+
+// Packages
+import React from 'react'
+
+const Header = () => {
+  return (
+    <footer>
+      <p>Made with 🖤 by squad tools 🦄</p>
+
+      <style jsx>{`
+        footer {
+          text-align: center;
+          height: 100px;
+          line-height: 100px;
+        }
+
+        p {
+          color: #b2b6bf;
+          text-transform: uppercase;
+          font-weight: 600;
+          font-size: 12px;
+          text-decoration: none;
+          letter-spacing: 4px;
+          margin-right: 10px;
+          transition: 0.25s;
+        }
+      `}</style>
+    </footer>
+  )
+}
+
+export default Header

examples/with-apollo/components/header.js

@@ -0,0 +1,70 @@
+'use strict'
+
+// Packages
+import React from 'react'
+import Link from 'next/link'
+
+const Header = () => {
+  return (
+    <header>
+      <nav>
+        <Link href="/" prefetch>
+          <a>Home</a>
+        </Link>
+
+        <Link href="/about" prefetch>
+          <a>About</a>
+        </Link>
+
+        <a href="https://idwall.atlassian.net/wiki/spaces/TOO/pages/66060413/Documenta+o+t+cnica">
+          Docs
+        </a>
+
+        <a href="https://github.com/idwall/create-tools-app">Github</a>
+      </nav>
+
+      <style jsx>{`
+        header {
+          text-align: center;
+          height: 100px;
+          line-height: 100px;
+        }
+
+        a {
+          color: #b2b6bf;
+          text-transform: uppercase;
+          font-weight: 600;
+          font-size: 12px;
+          text-decoration: none;
+          letter-spacing: 4px;
+          margin-right: 10px;
+          transition: 0.25s;
+        }
+
+        a:hover {
+          color: #23183d;
+        }
+
+        a:hover:after {
+          color: #b2b6bf;
+        }
+
+        a:last-child {
+          margin-right: 0;
+        }
+
+        a:after {
+          content: '/';
+          padding-left: 10px;
+        }
+
+        a:last-child:after {
+          content: '';
+          padding-left: 0;
+        }
+      `}</style>
+    </header>
+  )
+}
+
+export default Header

examples/with-apollo/components/pokemon.js

@@ -0,0 +1,28 @@
+'use strict'
+
+// Packages
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Pokemon = ({ src }) => {
+  return (
+    <div style={{ backgroundImage: `url(${src})` }}>
+      <style jsx>{`
+        div {
+          margin: 50px 20px;
+          border-radius: 4px;
+          display: inline-block;
+          width: 200px;
+          height: 200px;
+          background-size: cover;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+Pokemon.propTypes = {
+  src: PropTypes.string.isRequired
+}
+
+export default Pokemon

examples/with-apollo/hoc/with-data.js

@@ -0,0 +1,97 @@
+'use strict'
+
+// Packages
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ApolloProvider, getDataFromTree } from 'react-apollo'
+import Head from 'next/head'
+
+// Services
+import initApollo from './../services/init-apollo'
+
+// Gets the display name of a JSX component for dev tools
+function getComponentDisplayName(Component) {
+  return Component.displayName || Component.name || 'Unknown'
+}
+
+export default ComposedComponent => {
+  return class WithData extends React.Component {
+    static displayName = `WithData(${getComponentDisplayName(
+      ComposedComponent
+    )})`
+    static propTypes = {
+      serverState: PropTypes.object.isRequired
+    }
+
+    static async getInitialProps(ctx) {
+      // Initial serverState with apollo (empty)
+      let serverState
+
+      // Evaluate the composed component's getInitialProps()
+      let composedInitialProps = {}
+      if (ComposedComponent.getInitialProps) {
+        composedInitialProps = await ComposedComponent.getInitialProps(ctx)
+      }
+
+      // Run all GraphQL queries in the component tree
+      // and extract the resulting data
+      const apollo = initApollo()
+      try {
+        // create the url prop which is passed to every page
+        const url = {
+          query: ctx.query,
+          asPath: ctx.asPath,
+          pathname: ctx.pathname
+        }
+
+        // Run all GraphQL queries
+        await getDataFromTree(
+          <ComposedComponent ctx={ctx} url={url} {...composedInitialProps} />,
+          {
+            router: {
+              asPath: ctx.asPath,
+              pathname: ctx.pathname,
+              query: ctx.query
+            },
+            client: apollo
+          }
+        )
+      } catch (error) {
+        // Prevent Apollo Client GraphQL errors from crashing SSR.
+        // Handle them in components via the data.error prop:
+        // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
+      }
+
+      if (!process.browser) {
+        // getDataFromTree does not call componentWillUnmount
+        // head side effect therefore need to be cleared manually
+        Head.rewind()
+      }
+
+      // Extract query data from the Apollo store
+      serverState = {
+        apollo: {
+          data: apollo.cache.extract()
+        }
+      }
+
+      return {
+        serverState,
+        ...composedInitialProps
+      }
+    }
+
+    constructor(props) {
+      super(props)
+      this.apollo = initApollo(this.props.serverState.apollo.data)
+    }
+
+    render() {
+      return (
+        <ApolloProvider client={this.apollo}>
+          <ComposedComponent {...this.props} />
+        </ApolloProvider>
+      )
+    }
+  }
+}

examples/with-apollo/layouts/app.js

@@ -0,0 +1,64 @@
+'use strict'
+
+// Packages
+import React from 'react'
+import Head from 'next/head'
+import PropTypes from 'prop-types'
+
+// Components
+import Header from './../components/header'
+import Footer from './../components/footer'
+
+// UI
+import Row from './../ui/row'
+
+const App = ({ children }) => {
+  return (
+    <main>
+      <Head>
+        <title>Create Tools App 🦄</title>
+      </Head>
+
+      <Header />
+
+      <section>
+        <Row>{children}</Row>
+      </section>
+
+      <Footer />
+
+      <style jsx global>{`
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+          font-family: 'Avenir Next', 'SF UI Display', 'Helvetica Neue',
+            'Helvetica', 'Arial', 'sans-serif';
+          -moz-osx-font-smoothing: grayscale;
+          text-rendering: optimizeLegibility;
+        }
+
+        main {
+          display: flex;
+          justify-content: space-between;
+          flex-direction: column;
+        }
+
+        section {
+          display: flex;
+          align-items: center;
+          flex-direction: row;
+          text-align: center;
+          width: 100%;
+          height: calc(100vh - 200px);
+        }
+      `}</style>
+    </main>
+  )
+}
+
+App.propTypes = {
+  children: PropTypes.any.isRequired
+}
+
+export default App

examples/with-apollo/license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Bu Kinoshita <[email protected]> (https://bukinoshita.io)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.