Create pinapp React components

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+yarn-error.log

lerna.json

@@ -0,0 +1,7 @@
+{
+  "lerna": "2.9.0",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "apollo-subscriptions-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "lerna": "^2.9.0"
+  }
+}

packages/apollo-subscription-example-components/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}

packages/apollo-subscription-example-components/.gitignore

@@ -0,0 +1 @@
+lib/

packages/apollo-subscription-example-components/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

packages/apollo-subscription-example-components/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);

packages/apollo-subscription-example-components/AddPinPage.css

@@ -0,0 +1,20 @@
+.add-pin button {
+  background-color: #bd081c;
+  cursor: pointer;
+  padding: 11px 14px;
+  border-radius: 4px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.add-pin h3 {
+  margin-bottom: 30px;
+}
+
+.add-pin {
+  padding: 1rem;
+  padding-bottom: 64px;
+}

packages/apollo-subscription-example-components/AddPinPage.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { Icon, Heading } from "gestalt";
+import { Route } from "react-router-dom";
+
+import "./AddPinPage.css";
+
+class AddPinPage extends React.Component {
+  state = {
+    title: "",
+    link: "",
+    image: ""
+  };
+  render() {
+    return (
+      <div className="add-pin">
+        <Heading size="md">Add pin</Heading>
+        <form
+          style={{ display: "grid", gridGap: 20 }}
+          onSubmit={event => {
+            this.setState({
+              title: "",
+              link: "",
+              image: ""
+            });
+            this.props.addPin({
+              title: this.state.title,
+              link: this.state.link,
+              image: this.state.image
+            });
+            this.props.history.push("/");
+            event.preventDefault();
+          }}
+        >
+          <input
+            className="input"
+            value={this.state.title}
+            onChange={event => this.setState({ title: event.target.value })}
+            placeholder="Title"
+            type="text"
+            required
+            autoFocus
+          />
+          <input
+            className="input"
+            value={this.state.link}
+            onChange={event => this.setState({ link: event.target.value })}
+            placeholder="URL"
+            type="text"
+            required
+          />
+          <input
+            className="input"
+            value={this.state.image}
+            onChange={event => {
+              this.setState({
+                image: event.target.value
+              });
+            }}
+            placeholder="Image URL"
+            type="text"
+            required
+          />
+          <button type="submit">
+            <Icon
+              accessibilityLabel="Home"
+              icon="pin"
+              color="white"
+              size="20"
+            />Save
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default ({ addPin = () => {} }) => (
+  <Route
+    path="/upload-pin"
+    component={props => <AddPinPage {...props} addPin={addPin} />}
+  />
+);

packages/apollo-subscription-example-components/App.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+import Container from "./Container";
+import Nav from "./Nav";
+import PinListPage from "./PinListPage";
+import AddPinPage from "./AddPinPage";
+
+export class App extends React.Component {
+  render() {
+    return (
+      <Container noRouter={this.props.noRouter}>
+        <PinListPage pins={this.props.pins} />
+        <AddPinPage addPin={this.props.addPin} />
+        <Nav />
+      </Container>
+    );
+  }
+}

packages/apollo-subscription-example-components/Container.css

@@ -0,0 +1,19 @@
+@media (min-width: 768px) {
+  .App {
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+}
+/* Font stack: https://gist.github.com/nagelflorian/9dba284f8348358d9c0d8979aa296671 */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  color: #211922;
+  font-size: 12px;
+}
+a {
+  color: #717171;
+  font-weight: bold;
+  font-size: 14px;
+  text-decoration: none;
+}

packages/apollo-subscription-example-components/Container.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+
+import "gestalt/dist/gestalt.css";
+import "./Container.css";
+
+export default class Container extends React.Component {
+  render() {
+    const AppRouter = this.props.noRouter ? React.Fragment : Router;
+    return (
+      <AppRouter>
+        <div className="App">{this.props.children}</div>
+      </AppRouter>
+    );
+  }
+}

packages/apollo-subscription-example-components/Nav.css

@@ -0,0 +1,28 @@
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  background-color: rgba(255, 255, 255, 0.95);
+  width: 100%;
+  bottom: 0;
+  left: 0;
+}
+nav button {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  margin: 12px;
+  background-color: transparent;
+  cursor: pointer;
+}
+.input {
+  border-color: #b5b5b5;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  max-height: 40px;
+  padding: 10px 14px;
+  font-size: 16px;
+}

packages/apollo-subscription-example-components/Nav.js

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+  Link,
+  withRouter
+} from "react-router-dom";
+import { Icon } from "gestalt";
+
+import "./Nav.css";
+
+class Nav extends React.Component {
+  render() {
+    return (
+      <nav>
+        <Link to="/">
+          <button>
+            <Icon
+              accessibilityLabel="Home"
+              icon="pinterest"
+              size="40"
+              color={this.props.location.pathname === "/" ? "red" : "gray"}
+            />
+          </button>
+        </Link>
+        <Link to="/upload-pin">
+          <button>
+            <Icon
+              accessibilityLabel="Upload a pin"
+              icon="add-circle"
+              size="40"
+              color={
+                this.props.location.pathname === "/upload-pin"
+                  ? "darkGray"
+                  : "gray"
+              }
+            />
+          </button>
+        </Link>
+      </nav>
+    );
+  }
+}
+
+Nav = withRouter(Nav);
+
+export default Nav;

packages/apollo-subscription-example-components/PinListPage.css

@@ -0,0 +1,31 @@
+.pin img {
+  object-fit: cover;
+  flex: 1;
+  width: 100%;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.pin {
+  display: flex;
+}
+.pin a {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pin .title {
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 200px;
+}
+.pins {
+  display: grid;
+  list-style: none;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-gap: 2.5vmin;
+  padding: 2.5vmin;
+  grid-auto-flow: dense;
+  padding-bottom: 64px;
+}

packages/apollo-subscription-example-components/PinListPage.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import randomColor from "randomcolor";
+import { Route } from "react-router-dom";
+
+import "./PinListPage.css";
+
+function stringToColor(str) {
+  return randomColor({
+    seed: str
+  });
+}
+
+class PinListPage extends React.Component {
+  render() {
+    return (
+      <div>
+        {this.props.pins.length === 0 && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              padding: 30
+            }}
+          >
+            <div>There are no pins yet.</div>
+            <Link to="/upload-pin">Create the first one</Link>
+          </div>
+        )}
+        <ul className="pins">
+          {this.props.pins.map((pin, index) => (
+            <li className="pin" key={index}>
+              <a href={pin.link} target="_blank">
+                <img
+                  src={pin.image}
+                  alt={pin.title}
+                  onError={event => {
+                    event.target.src = `http://via.placeholder.com/200x200/${stringToColor(
+                      pin.link
+                    ).replace("#", "")}?text= +`;
+                  }}
+                />
+                <h4 className="title">{pin.title}</h4>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default ({ pins = [] }) => (
+  <Route exact path="/" render={() => <PinListPage pins={pins} />} />
+);

packages/apollo-subscription-example-components/index.js

@@ -0,0 +1,4 @@
+export { default as Container } from "./Container";
+export { default as Nav } from "./Nav";
+export { default as PinListPage } from "./PinListPage";
+export { default as AddPinPage } from "./AddPinPage";