- add Storybook

.storybook/addons.js

@@ -0,0 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

components/City.js

@@ -1,14 +1,13 @@
-import { createFragmentContainer, graphql } from 'react-relay';
 import Typography from 'material-ui/Typography';
 import List, { ListItem, ListItemText } from 'material-ui/List';
 
 const styles = {
   subItem: {
-    marginLeft: '10px'
-  }
+    marginLeft: '10px',
+  },
 };
 
-const City = ({ data }) => {
+export default ({ data }) => {
   if (!data) return null;
   return (
     <List>
@@ -21,13 +20,3 @@ const City = ({ data }) => {
     </List>
   );
 };
-
-export default createFragmentContainer(
-  City,
-  graphql`
-    fragment City on LocationArea {
-      name
-      slug
-    }
-  `
-);

components/Location.js

@@ -1,10 +1,9 @@
-import { createFragmentContainer, graphql } from 'react-relay';
 import Card, { CardActions, CardContent } from 'material-ui/Card';
 import Typography from 'material-ui/Typography';
 import Button from 'material-ui/Button';
 import City from './City';
 
-const Location = ({ data }) => {
+export default ({ data }) => {
   return (
     <Card key={data.locationId}>
       <CardContent>
@@ -25,16 +24,3 @@ const Location = ({ data }) => {
     </Card>
   );
 };
-
-export default createFragmentContainer(
-  Location,
-  graphql`
-    fragment Location on Location {
-      locationId
-      name
-      city {
-        ...City
-      }
-    }
-  `
-);

components/LocationsList.js

@@ -7,18 +7,19 @@ import Location from './Location';
 const styles = {
   header: {
     textAlign: 'center',
-    padding: '10px 0 5px 0'
+    padding: '10px 0 5px 0',
   },
   container: {
     margin: '100px auto 0 auto',
-    maxWidth: 400
+    maxWidth: 400,
   },
   list: {
-    width: '100%'
-  }
+    width: '100%',
+  },
 };
 
 const LocationsList = ({ data }) => {
+  console.log(JSON.stringify(data));
   return (
     <div style={styles.container}>
       <div style={styles.header}>
@@ -34,7 +35,7 @@ const LocationsList = ({ data }) => {
       <div className={styles.list}>
         <List>
           {data.allLocations.edges.map(({ node, cursor }) =>
-            <Location data={node} key={cursor} />
+            <Location data={node} key={cursor} />,
           )}
         </List>
       </div>
@@ -50,10 +51,15 @@ export default createFragmentContainer(
         edges {
           cursor
           node {
-            ...Location
+            locationId
+            name
+            city {
+              slug
+              name
+            }
           }
         }
       }
     }
-  `
+  `,
 );

package.json

@@ -6,16 +6,20 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-jss": "^7.0.2",
-    "react-relay": "^1.1.0"
+    "react-relay": "^1.1.0",
+    "react-storybooks-relay-container": "^1.2.1"
   },
   "devDependencies": {
+    "@storybook/react": "^3.2.3",
     "babel-plugin-relay": "^1.1.0",
     "relay-compiler": "^1.1.0"
   },
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "relay": "relay-compiler --src ./components --schema ./schema.json"
+    "relay": "relay-compiler --src ./components --schema ./schema.json",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }