pageflow-react 0.1.0

data/app/assets/javascripts/pageflow/react/components.js

@@ -0,0 +1,4 @@
+//= require_self
+//= require pageflow/react
+
+var PAGEFLOW_EDITOR = false;

data/app/views/pageflow/react/_widget.html.erb

@@ -0,0 +1 @@
+<%= content_tag(:div, '', data: {widget: name}) %>

data/app/views/pageflow/react/page.html.erb

@@ -0,0 +1,7 @@
+<% if page.template.present? %>
+  <% concat React::ServerRendering.render(
+     Pageflow.config.page_types.find_by_name!(page.template).component_name, MultiJson.dump(
+     resolverSeed: @_pageflow_react_entry_seed ||= entry_seed(@entry),
+     pageId: page.perma_id
+   ), true) %>
+<% end %>

data/js/.eslintrc

@@ -0,0 +1,33 @@
+{
+  "parser": "babel-eslint",
+  "plugins": ["react"],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "blockBindings": true,
+    "classes": true,
+    "defaultParams": true,
+    "destructuring": true,
+    "forOf": true,
+    "generators": true,
+    "modules": true,
+    "spread": true,
+    "templateStrings": true,
+    "jsx": true
+  },
+  "rules": {
+    "no-undef": [2],
+    "consistent-return": [0],
+    "key-spacing": [0],
+    "quotes": [0],
+    "new-cap": [0],
+    "no-multi-spaces": [0],
+    "no-shadow": [0],
+    "no-unused-vars": [1],
+    "no-use-before-define": [2, "nofunc"]
+  }
+}

data/js/.gitignore

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

data/js/karma.conf.js

@@ -0,0 +1,61 @@
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = function (config) {
+  config.set({
+    browsers: ['PhantomJS'],
+    singleRun: false,
+    frameworks: ['mocha', 'chai', 'chai-sinon', 'phantomjs-shim'],
+    files: [
+      'node_modules/babel-polyfill/dist/polyfill.js',
+      'spec/*spec.js',
+      'spec/**/*spec.js'
+    ],
+    exclude: [
+      'flycheck_*.js',
+      '**/flycheck_*.js',
+      '*/**/flycheck_*.js',
+    ],
+    preprocessors: {
+      'spec/*spec.js': ['webpack', 'sourcemap'],
+      'spec/**/*spec.js': ['webpack', 'sourcemap']
+    },
+    reporters: ['dots'],
+    plugins: [
+      'karma-webpack',
+      'karma-sourcemap-loader',
+      'karma-mocha',
+      'karma-chai',
+      'karma-chai-sinon',
+      require('karma-phantomjs-shim'),
+      'karma-phantomjs-launcher'
+    ],
+    webpack: {
+      devtool: 'inline-source-map',
+      plugins: [
+        new webpack.DefinePlugin({
+          PAGEFLOW_EDITOR: false
+        })
+      ],
+      module: {
+        loaders: [
+          {
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader?stage=0&optional[]=runtime'
+          },
+          {
+            test: require.resolve('react'),
+            loader: 'expose?React'
+          }
+        ]
+      },
+      resolve: {
+        root: path.resolve('./src')
+      }
+    },
+    webpackServer: {
+      noInfo: true
+    }
+  });
+};

data/js/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "pageflow-react",
+  "version": "1.0.0",
+  "description": "TODO: Write a gem description",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^5.8.22",
+    "babel-loader": "^5.3.2",
+    "backbone": "^1.2.2",
+    "chai": "^3.2.0",
+    "expose-loader": "^0.7.1",
+    "imports-loader": "^0.6.4",
+    "karma": "^0.13.9",
+    "karma-chai": "^0.1.0",
+    "karma-chai-sinon": "^0.1.5",
+    "karma-es5-shim": "0.0.4",
+    "karma-mocha": "^0.2.0",
+    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-phantomjs-shim": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.2.5",
+    "phantomjs": "^1.9.18",
+    "react-addons-test-utils": "^0.14.7",
+    "sinon": "git://github.com/cjohansen/Sinon.JS#b672042043517b9f84e14ed0fb8265126168778a",
+    "sinon-chai": "^2.8.0",
+    "underscore": "^1.8.3",
+    "webpack": "^1.11.0"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.2.0",
+    "babel-runtime": "^5.8.20",
+    "classnames": "^2.1.3",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "react-draggable": "git://github.com/tf/react-draggable#on-drag-fix"
+  }
+}

data/js/spec/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true
+  }
+}

data/js/spec/components/background_image_spec.js

@@ -0,0 +1,47 @@
+import BackgroundImage from 'components/background_image.jsx';
+
+import renderComponent from '../support/render_component';
+
+describe('BackgroundImage', () => {
+  it('has image file css class', () => {
+    var backgroundImage = renderComponent(BackgroundImage, {imageFileId: 5});
+
+    expect(backgroundImage.props.className.split(' ')).to.contain('image_5');
+  });
+
+  it('has image_none css class if not imageFileId is given', () => {
+    var backgroundImage = renderComponent(BackgroundImage);
+
+    expect(backgroundImage.props.className.split(' ')).to.contain('image_none');
+  });
+
+  it('has load_image css class if loaded prop is present', () => {
+    var backgroundImage = renderComponent(BackgroundImage, {imageFileId: 5, loaded: true});
+
+    expect(backgroundImage.props.className.split(' ')).to.contain('load_image');
+  });
+
+  it('has image file css class', () => {
+    var backgroundImage = renderComponent(BackgroundImage, {imageFileId: 5});
+
+    expect(backgroundImage.props.className.split(' ')).to.contain('image_5');
+  });
+
+  it('defaults background position to center', () => {
+    var backgroundImage = renderComponent(BackgroundImage, {imageFileId: 5});
+
+    expect(backgroundImage.props.style.backgroundPosition).to.eq('50% 50%');
+  });
+
+  it('defaults background position to center', () => {
+    var backgroundImage = renderComponent(BackgroundImage, {imageFileId: 5, position: [undefined, undefined]});
+
+    expect(backgroundImage.props.style.backgroundPosition).to.eq('50% 50%');
+  });
+
+  it('sets background position inline styles', () => {
+    var backgroundImage = renderComponent(BackgroundImage, {imageFileId: 5, position: [10, 20]});
+
+    expect(backgroundImage.props.style.backgroundPosition).to.eq('10% 20%');
+  });
+});

data/js/spec/components/page_thumbnail_spec.js

@@ -0,0 +1,213 @@
+import {PageThumbnail} from 'components/page_thumbnail.jsx';
+
+import renderComponent from '../support/render_component';
+
+describe('PageThumbnail', () => {
+  it('has class names for thumbnail candidate', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: [
+          {
+            attribute: 'thumbnailFileId',
+            collectionName: 'image_files',
+            cssClassPrefix: 'pageflow_image_file'
+          }
+        ]
+      },
+      thumbnailFileId: 10
+    };
+    const fileIds = {
+      'image_files': [10]
+    };
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page, fileIds, imageStyle: 'thumbnail'});
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('pageflow_image_file_thumbnail_10');
+  });
+
+  it('supports lazy thumbnail css class', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: [
+          {
+            attribute: 'thumbnailFileId',
+            collectionName: 'image_files',
+            cssClassPrefix: 'pageflow_image_file'
+          }
+        ]
+      },
+      thumbnailFileId: 10
+    };
+    const fileIds = {
+      'image_files': [10]
+    };
+
+    const pageThumbnail = renderComponent(PageThumbnail, {
+      page,
+      fileIds,
+      imageStyle: 'thumbnail',
+      lazy: true
+    });
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('lazy_pageflow_image_file_thumbnail_10');
+  });
+
+  it('adds load_image class if loaded prop is present', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: [
+          {
+            attribute: 'thumbnailFileId',
+            collectionName: 'image_files',
+            cssClassPrefix: 'pageflow_image_file'
+          }
+        ]
+      },
+      thumbnailFileId: 10
+    };
+    const fileIds = {
+      'image_files': [10]
+    };
+
+    const pageThumbnail = renderComponent(PageThumbnail, {
+      page,
+      fileIds,
+      imageStyle: 'thumbnail',
+      lazy: true,
+      loaded: true
+    });
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('load_image');
+  });
+
+  it('skips candidates whose attributes point to non existing files', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: [
+          {
+            attribute: 'thumbnailFileId',
+            collectionName: 'image_files',
+            cssClassPrefix: 'pageflow_image_file'
+          },
+          {
+            attribute: 'videoId',
+            collectionName: 'video_files',
+            cssClassPrefix: 'pageflow_video_file'
+          }
+        ]
+      },
+      thumbnailFileId: 10,
+      videoId: 5
+    };
+    const fileIds = {
+      'image_files': [],
+      'video_files': [5, 10],
+    };
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page, fileIds, imageStyle: 'thumbnail'});
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('pageflow_video_file_thumbnail_5');
+  });
+
+  it('skips candidates whose attributes are not defined', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: [
+          {
+            attribute: 'thumbnailFileId',
+            collectionName: 'image_files',
+            cssClassPrefix: 'pageflow_image_file'},
+        ]
+      },
+    };
+    const fileIds = {};
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page, fileIds});
+    const className = pageThumbnail.props.className;
+
+    expect(className).not.to.contain('pageflow_image_file');
+  });
+
+  it('prefers custom thumbnail id', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: [
+          {
+            attribute: 'thumbnailFileId',
+            collectionName: 'image_files',
+            cssClassPrefix: 'pageflow_image_file'
+          }
+        ]
+      },
+      thumbnailFileId: 10
+    };
+    const fileIds = {
+      'image_files': [10, 11]
+    };
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page, fileIds, customThumbnailId: 11, imageStyle: 'thumbnail'});
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('pageflow_image_file_thumbnail_11');
+  });
+
+  it('skips custom thumbnail id pointing to non existent file', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: []
+      }
+    };
+    const fileIds = {
+      'image_files': []
+    };
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page, fileIds, customThumbnailId: 11, imageStyle: 'thumbnail'});
+    const className = pageThumbnail.props.className;
+
+    expect(className).not.to.contain('pageflow_image_file_thumbnail_11');
+  });
+
+  it('takes className prop', () => {
+    const page = {
+      type: {
+        thumbnailCandidates: []
+      }
+    };
+    const fileIds = {};
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page, fileIds, className: 'custom'});
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('custom');
+  });
+
+  it('sets page type modifier class name', () => {
+    const page = {
+      type: {
+        name: 'video',
+        thumbnailCandidates: []
+      }
+    };
+    const fileIds = {};
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page, fileIds});
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('is_video');
+  });
+
+  context('when page is null', function() {
+    it('sets is_dangling class name', () => {
+    const fileIds = {};
+
+    const pageThumbnail = renderComponent(PageThumbnail, {page: null, fileIds});
+    const className = pageThumbnail.props.className;
+
+    expect(className).to.contain('is_dangling');
+    });
+  });
+})

data/js/spec/create_container_spec.js

@@ -0,0 +1,82 @@
+import createContainer from 'create_container.jsx';
+import Resolver from 'resolvers/resolver';
+
+import React from 'react';
+import renderComponent from './support/render_component';
+
+import TestUtils from 'react-addons-test-utils';
+
+describe('createContainer', () => {
+  it('creates a wrapper component that passes props', () => {
+    var Component = class extends React.Component {};
+
+    var Container = createContainer(Component);
+    var result = renderComponent(Container, {some: 'prop'});
+
+    expect(result.type).to.eq(Component);
+    expect(result.props.some).to.eq('prop');
+  });
+
+  it('resolved fragments with given resolver', () => {
+    var Component = class extends React.Component {};
+    var FakeResolver = class extends Resolver {
+      get(props) {
+        return 'resolved page ' + props.targetPageId;
+      }
+    };
+
+    var Container = createContainer(Component, {
+      fragments: {
+        pageLink: {
+          targetPage: (callback) => {
+            return new FakeResolver(callback)
+          }
+        }
+      }
+    });
+    var result = renderComponent(Container, {
+      pageLink: {
+        targetPageId: 100
+      }
+    });
+
+    expect(result.props.pageLink.targetPage).to.eq('resolved page 100');
+  });
+
+  it('rerenders component when resolver invokes callback', () => {
+    var Component = class extends React.Component {};
+    var FakeResolver = class extends Resolver {
+      get(props) {
+        return `resolved page ${this.data}`;
+      }
+    };
+    var resolver;
+
+    var Container = createContainer(Component, {
+      fragments: {
+        pageLink: {
+          targetPage: (callback) => {
+            resolver = new FakeResolver(callback);
+            return resolver;
+          }
+        }
+      }
+    });
+
+    const shallowRenderer = TestUtils.createRenderer();
+    const component = React.createElement(Container, {
+      pageLink: {
+        targetPageId: 100
+      }
+    });
+
+    shallowRenderer.render(component);
+
+    resolver.data = 2;
+    resolver._handleChange();
+
+    var result = shallowRenderer.getRenderOutput();
+
+    expect(result.props.pageLink.targetPage).to.eq('resolved page 2');
+  });
+});