Improve documentation and fix tests.

README.md

@@ -1,42 +1,38 @@
 # Napkin
 
-## What It Is
+## Summary
 
-A rapid web prototyping tool to create a functional wireframe.
+Napkin is a rapid web prototyping tool meant for users who want to make functional, revisionable mockups that can easily be shared and exported to baseline front and back-end code.
 
-## High-Level Documentation
+## High-Level Overview
 
 [Overview](https://github.com/mozilla/napkin/blob/master/docs/overview.md)
 
 ## Installation Instructions
 
 Clone the repository
 
-> git clone git://github.com/mozilla/napkin.git
+    $ git clone git://github.com/mozilla/napkin.git
 
-Install Brew and redis
+Install brew; instructions: https://github.com/mxcl/homebrew/wiki/installation.
+Next, use brew to get redis:
 
-Brew instructions: https://github.com/mxcl/homebrew/wiki/installation
-
-> brew install redis
+    $ brew install redis
 
 Run redis in the background
 
-> redis-server &
+    $ redis-server &
 
 Install node by using brew or through the website http://nodejs.org/#download
 
-> cd napkin
-
-> cp local.json-dist local.json
-
-> npm install
-
-Run the site
+    $ cd napkin
+    $ cp local.json-dist local.json
+    $ npm install
 
-> node app.js
+Run napkin on http://localhost:3000:
 
-## Run Tests
+    $ node app.js
 
-> make test
+Run tests (optional):
 
+    $ make test

docs/data_structure.md

@@ -1,43 +1,50 @@
 # Data Structure - version 0.1
 
-## Key Format
+## Key/Value Format
 
-### Projects (Sitemaps)
+### Projects
 
-    String 
+    Key: <userEmail>:projects
 
-    project:test@test.org:<project_id>
+    Value: Hash of <projectId> => <projectObject> (JSON)
 
-    Properties
-
-    title, author, created (default = current time)
+    Properties:
+      title - title of this project
+      author - who, identified by email, was this created by
+      created - what time was this created; defaults to current time
 
 ### Screens
 
-    String
-
-    project:<project_id>:screen:<screen_id>
+    Key: <userEmail>:projects:<projectId>:screens
 
-    Properties
+    Value: Hash of <screenId> => <screenObject> (JSON)
 
-    name, is_start (default = false), layout
+    Properties:
+      title - title of this screen
+      isStart - whether this screen is the first to be viewed; defaults to false
+      layout - what layout this screen is using
 
 ### Components
 
-    String
+    Key: <userEmail>:projects:<projectId>:screens:<screenId>:components
 
-    project:<project_id>:screen:<screen_id>:component:<component_id>
+    Value: Hash of <componentId> => <componentObject> (JSON)
 
-    Properties
-
-    type, layout, action (optional)
+    Properties: type, layout (has integer properties row and col), action (optional; for type = 'form')
+      type - the type of this component
+      layout - object with integer properties row and column that represent the location of this component in the grid
+      action - for forms to identify which screen they should submit to
 
 ### Elements
 
-    String
-
-    project:<project_id>:component:<component_id>:element:<element_id>
+    Key: <userEmail>:projects:<projectId>:screens:<screenId>:components:<componentId>:elements
 
-    Properties
+    Value: Hash of <elementId> => <elementObject> (JSON)
 
-    type, name, identifier, layout, required, src (optional)
+    Properties:
+      head - true if this element is the head of the linked list, meaning that it is at the top of its parent component
+      nextId - the element that comes after this one in the linked list; along with head, this determines the order of elements
+      name - for input fields, determines label and name attribute
+      required - for input fields, true if they are required; defaults to false
+      text - for heading/paragraph fields, inner text content
+      level - for heading fields, the level of the heading; an integer from 1 to 6, representing h1 to h6

docs/overview.md

@@ -1,16 +1,12 @@
 # Overview - version 0.1
 
-## What It Is
-
-Napkin is a rapid web prototyping tool meant for users who either are not necessarily developers but are primarily involved in product/UX/UI for a site/application.
-
 ## How It Works
 
-A project (sitemap) is created and contains screens which are wireframes containing HTML elements and basic web components.
+Users create a project for each potential application/site they have in mind. Each project contains multiple screens, which represent pages or different views. After selecting a layout for a screen, users can add components—articles, forms, navigation, etc.— and their corresponding elements—headings, paragraphs, input boxes, links—as a means of wireframing the pages they would eventually like to create.
 
-Once wireframes are completed at the screen level, the screens can be linked at the sitemap level - e.g. a form element is linked to another screen after a successful POSt request is submitted.
+But wireframes are not limited to interaction at the inter-screen level. Through links and form submissions, they can also have intra-screen connections. For example, a contact form on one screen could submit to a thank you page represented by another screen. In this way, users are able to create a more complete mockup that not only mimics the final product's aesthetics, but also its interactions.
 
-Once the site is complete, the project can be compiled and run as a demo or exported as a standalone Node/Express application.
+Once the site is complete, the project can be run as a demo or exported to a standalone node.js express application.
 
 ## Technical Code Generation Process
 

lib/components.js

@@ -42,12 +42,13 @@ function getDefaultComponent(req) {
 function validateComponent(req, beingCreated) {
   var body = req.body;
   var type = body.type;
+  var layout = body.layout;
   var action = body.action;
 
-  if (!body.layout) {
+  if (!layout) {
     return 'Component must have a layout.';
-  } else if (typeof body.layout.row !== 'number' ||
-             typeof body.layout.col !== 'number') {
+  } else if (typeof layout.row !== 'number' ||
+             typeof layout.col !== 'number') {
     return 'Component must have a numeric row and column.';
   } else if (typeof type !== 'string') {
     return 'Component must have a type.';

lib/screens.js

@@ -1,7 +1,7 @@
 /*globals exports:true*/
 const ALLOWED_FIELDS = {
   title: undefined,
-  is_start: undefined,
+  isStart: undefined,
   layout: undefined
 };
 
@@ -14,7 +14,7 @@ var scaffold = require('./scaffold');
 function getDefaultScreen(req) {
   return {
     title: req.body.title,
-    is_start: req.body.is_start,
+    isStart: req.body.isStart,
     layout: req.body.layout
   };
 }
@@ -30,7 +30,7 @@ function getDefaultScreen(req) {
 function validateScreen(req, beingCreated) {
   var title = req.body.title;
 
-  // TODO: validate is_start and layout
+  // TODO: validate isStart and layout
   if (!title) {
     return 'Screen must have a title.';
   } else if (title.length < 1 || title.length > 20) {

public/javascripts/main.js

@@ -107,7 +107,7 @@ function NapkinClient(window, document, $, data, undefined) {
     name: 'Screen',
 
     defaults: function() {
-      // TODO: implement is_start, layout
+      // TODO: implement isStart, layout
       return {
         title: 'Screen name'
       };

test/test.components.js

@@ -31,11 +31,11 @@ var screenReq = {
   },
   body: {
     title: 'My Screen',
-    is_start: true,
+    isStart: true,
     layout: 'col1'
   },
   params: {
-    project_id: 1
+    projectId: 1
   }
 };
 
@@ -52,8 +52,8 @@ var componentReq = {
     action: '/'
   },
   params: {
-    project_id: 1,
-    screen_id: 1
+    projectId: 1,
+    screenId: 1
   }
 };
 
@@ -70,8 +70,8 @@ var otherComponentReq = {
     action: '/auth'
   },
   params: {
-    project_id: 1,
-    screen_id: 1
+    projectId: 1,
+    screenId: 1
   }
 };
 
@@ -86,9 +86,9 @@ var elementReq = {
     src: ''
   },
   params: {
-    project_id: 1,
-    screen_id: 1,
-    component_id: 1
+    projectId: 1,
+    screenId: 1,
+    componentId: 1
   }
 };
 
@@ -106,7 +106,7 @@ describe('component', function() {
     console.log('cleared test components database');
   });
 
-  describe('POST /projects/:project_id/screens/:screen_id/components',
+  describe('POST /projects/:projectId/screens/:screenId/components',
     function() {
       it('adds a new component', function(done) {
         var req = componentReq;
@@ -135,7 +135,7 @@ describe('component', function() {
       });
     });
 
-  describe('GET /projects/:project_id/screens/:screen_id/components',
+  describe('GET /projects/:projectId/screens/:screenId/components',
     function() {
       it('returns a list of available components for the screen', function(done) {
         var req = componentReq;
@@ -154,7 +154,7 @@ describe('component', function() {
       });
     });
 
-  describe('GET /projects/:project_id/screens/:screen_id/components/:id',
+  describe('GET /projects/:projectId/screens/:screenId/components/:id',
     function() {
       var req = componentReq;
 
@@ -175,7 +175,7 @@ describe('component', function() {
       });
     });
 
-  describe('PUT /projects/:project_id/screens/:screen_id/components/:id',
+  describe('PUT /projects/:projectId/screens/:screenId/components/:id',
     function() {
       var req = componentReq;
 
@@ -207,7 +207,7 @@ describe('component', function() {
       });
     });
 
-  describe('DELETE /projects/:project_id/screens/:screen_id/components/:id',
+  describe('DELETE /projects/:projectId/screens/:screenId/components/:id',
     function() {
       var req = componentReq;