pageflow-react 0.1.0

data/js/src/resolvers/editor_chapter_resolver.js

@@ -0,0 +1,10 @@
+import BackboneModelResolver from './backbone_model_resolver';
+
+export default function(options, callback) {
+  return new BackboneModelResolver({
+    collection: () => pageflow.chapters,
+    attributesForProps: ['id', 'title', 'position'],
+    property: 'chapterId',
+    ...options
+  }, callback);
+};

data/js/src/resolvers/editor_file_ids_resolver.js

@@ -0,0 +1,30 @@
+import Resolver from './resolver';
+
+export default class extends Resolver {
+  constructor(options, callback) {
+    super(callback);
+    this._options = {
+      collections: () => pageflow.files,
+      ...options
+    };
+
+    Object.values(this._options.collections()).forEach((collection) =>
+      collection.on('remove', this._handleChange, this)
+    );
+  }
+
+  get() {
+    var files = this._options.collections();
+
+    return Object.keys(files).reduce((result, collectionName) => {
+      result[collectionName] = files[collectionName].map((file) => file.id);
+      return result;
+    }, {});
+  }
+
+  dispose() {
+    Object.values(this._options.collections()).forEach((collection) =>
+      collection.off('remove', this._handleChange, this)
+    );
+  }
+};

data/js/src/resolvers/editor_page_resolver.js

@@ -0,0 +1,11 @@
+import BackboneModelResolver from './backbone_model_resolver';
+
+export default function(options, callback) {
+  return new BackboneModelResolver({
+    collection: () => pageflow.pages,
+    idAttribute: 'perma_id',
+    attributesForProps: ['perma_id', ['type', 'template'], 'chapter_id'],
+    includeConfiguration: true,
+    ...options
+  }, callback);
+};

data/js/src/resolvers/i18n_resolver.js

@@ -0,0 +1,11 @@
+import Resolver from './resolver';
+
+export default class extends Resolver {
+  get(props, seed) {
+    return {
+      t: function(key, options) {
+        return I18n.t(key, {locale: seed.locale, ...options});
+      }
+    };
+  }
+};

data/js/src/resolvers/object_resolver.js

@@ -0,0 +1,58 @@
+import Resolver from './resolver';
+
+export default class ObjectResolver extends Resolver {
+  constructor(fragment, callback, propertyName) {
+    super(callback);
+    this._fragment = fragment;
+    this._resolvers = {};
+    this._propertyName = propertyName;
+  }
+
+  get(props, seed) {
+    this._updateResolvers();
+
+    if (this._propertyName) {
+      props = props[this._propertyName];
+    }
+
+    if (!props) {
+      return null;
+    }
+
+    return Object.keys(this._resolvers).reduce((result, key) => {
+      const resolver = this._resolvers[key];
+
+      result[key] = resolver.get(props, seed);
+      return result;
+    }, {...props});
+  }
+
+  dispose() {
+    Object.keys(this._resolvers).forEach((key) => {
+      this._resolvers[key].dispose();
+    });
+  }
+
+  _updateResolvers() {
+    var resolvers = this._resolvers;
+
+    Object.keys(this._fragment || {}).forEach((key) => {
+      const resolverProvider = this._fragment[key];
+
+      if (!resolvers[key]) {
+        resolvers[key] = this._createResolver(resolverProvider, key);
+      }
+    });
+  }
+
+  _createResolver(provider, key) {
+    var handleChange = this._handleChange.bind(this);
+
+    if (typeof provider === 'object') {
+      return new ObjectResolver(provider, handleChange, key);
+    }
+    else {
+      return provider(handleChange);
+    }
+  }
+}

data/js/src/resolvers/page_type_resolver.js

@@ -0,0 +1,12 @@
+import Resolver from './resolver';
+
+import camelize from '../utils/camelize';
+
+export default class extends Resolver {
+  get(props, seed) {
+    return {
+      name: props.type,
+      ...camelize.deep(seed.page_types[props.type])
+    };
+  }
+};

data/js/src/resolvers/resolver.js

@@ -0,0 +1,16 @@
+export default class Resolver {
+  constructor(callback) {
+    this._callback = callback;
+  }
+
+  get(props) {}
+
+  dispose() {}
+
+  /** @protected */
+  _handleChange() {
+    if (this._callback) {
+      this._callback();
+    }
+  }
+}

data/js/src/resolvers/seed_chapter_resolver.js

@@ -0,0 +1,10 @@
+import SeedResolver from './seed_resolver';
+
+export default function(options, callback) {
+  return new SeedResolver({
+    seedProperty: 'chapters',
+    attributesForProps: ['id', 'title'],
+    property: 'chapterId',
+    ...options
+  }, callback);
+};

data/js/src/resolvers/seed_file_ids_resolver.js

@@ -0,0 +1,11 @@
+import Resolver from './resolver';
+
+export default class extends Resolver {
+  constructor(_, callback) {
+    super(callback);
+  }
+
+  get(props, seed) {
+    return seed.file_ids;
+  }
+};

data/js/src/resolvers/seed_page_resolver.js

@@ -0,0 +1,11 @@
+import SeedResolver from './seed_resolver';
+
+export default function(options, callback) {
+  return new SeedResolver({
+    seedProperty: 'pages',
+    idAttribute: 'perma_id',
+    attributesForProps: ['perma_id', ['type', 'template'], 'chapter_id'],
+    includeConfiguration: true,
+    ...options
+  }, callback);
+};

data/js/src/resolvers/seed_resolver.js

@@ -0,0 +1,75 @@
+import Resolver from './resolver';
+import createRecursiveResolver from './create_recursive_resolver';
+
+import camelize from '../utils/camelize';
+
+/**
+ * Resolves a foreign key to an object of attributes from the seed
+ * data.
+ */
+class SeedResolver extends Resolver {
+  constructor(options, callback) {
+    super(callback);
+
+    this._options = {
+      idAttribute: 'id',
+      attributesForProps: ['id'],
+      includeConfiguration: false,
+      ...options
+    };
+  }
+
+  get(props, seed) {
+    var attributes = this._getAttributes(props, seed);
+    return this._getProps(attributes);
+  }
+
+  _getAttributes(props, seed) {
+    return this._getAttributesById(this._getModelId(props), seed);
+  }
+
+  _getAttributesById(id, seed) {
+    const collection = seed[this._options.seedProperty];
+
+    if (!collection) {
+      return null;
+    }
+
+    return collection.find((attributes) => {
+      return attributes[this._options.idAttribute] === id;
+    });
+  }
+
+  _getModelId(props) {
+    return props[this._options.property];
+  }
+
+  _getProps(attributes) {
+    var props;
+
+    if (!attributes) {
+      return null;
+    }
+
+    props = this._getPropsFromAttributes(attributes);
+
+    if (this._options.includeConfiguration) {
+      Object.assign(props, camelize.deep(attributes.configuration));
+    }
+
+    return props;
+  }
+
+  _getPropsFromAttributes(attributes) {
+    return this._options.attributesForProps.reduce((result, name) => {
+      if (typeof name === 'string') {
+        name = [camelize(name), name];
+      }
+
+      result[name[0]] = attributes[name[1]];
+      return result;
+    }, {})
+  }
+};
+
+export default createRecursiveResolver(SeedResolver);

data/js/src/utils/camelize.js

@@ -0,0 +1,29 @@
+function camelize(snakeCase) {
+  return snakeCase.replace(/_[a-z]/g, function(match) {
+    return match[1].toUpperCase();
+  });
+};
+
+camelize.keys = function(object) {
+  return Object.keys(object).reduce((result, key) => {
+    result[camelize(key)] = object[key];
+    return result;
+  }, {});
+};
+
+camelize.deep = function(object) {
+  if (Array.isArray(object)) {
+    return object.map(camelize.deep);
+  }
+  else if (typeof object === 'object' && object) {
+    return Object.keys(object).reduce((result, key) => {
+      result[camelize(key)] = camelize.deep(object[key]);
+      return result;
+    }, {});
+  }
+  else {
+    return object;
+  }
+};
+
+export default camelize;

data/js/webpack.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  context: __dirname + '/src',
+  entry: [
+    'babel-polyfill',
+    './index.js'
+  ],
+
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loaders: ['babel-loader?stage=0'],
+      }
+    ],
+  },
+
+  output: {
+    path: __dirname + '/../app/assets/javascripts/pageflow',
+    filename: 'react.js',
+
+    libraryTarget: 'assign',
+    library: ['pageflow', 'react']
+  },
+
+  externals: {
+    pageflow: 'pageflow',
+    react: 'React',
+    'react-dom': 'ReactDOM'
+  }
+};

data/lib/pageflow-react.rb

@@ -0,0 +1,13 @@
+require 'pageflow/react/engine'
+
+module Pageflow
+  module React
+    def self.create_page_type(name, component_name)
+      Pageflow::React::PageType.new(name, component_name)
+    end
+
+    def self.create_widget_type(name, role, component_name)
+      Pageflow::React::WidgetType.new(name, role, component_name)
+    end
+  end
+end

data/lib/pageflow/react/engine.rb

@@ -0,0 +1,15 @@
+require 'react-rails'
+
+module Pageflow
+  module React
+    class Engine < Rails::Engine
+      isolate_namespace Pageflow::React
+
+      config.autoload_paths << File.join(config.root, 'lib')
+
+      initializer "pageflow-react.add_watchable_files", group: :all do |app|
+        app.config.watchable_files.concat Dir["#{config.root}/app/assets/javascripts/**/*.jsx*"]
+      end
+    end
+  end
+end

data/lib/pageflow/react/page_type.rb

@@ -0,0 +1,16 @@
+module Pageflow
+  module React
+    class PageType < Pageflow::PageType
+      attr_reader :name, :component_name
+
+      def initialize(name, component_name)
+        @name = name
+        @component_name = component_name
+      end
+
+      def template_path
+        'pageflow/react/page'
+      end
+    end
+  end
+end

data/lib/pageflow/react/version.rb

@@ -0,0 +1,5 @@
+module Pageflow
+  module React
+    VERSION = "0.1.0"
+  end
+end

data/lib/pageflow/react/widget_type.rb

@@ -0,0 +1,21 @@
+module Pageflow
+  module React
+    class WidgetType < Pageflow::WidgetType
+      attr_reader :name, :role, :component_name
+
+      def initialize(name, role, component_name)
+        @name = name
+        @role = role
+        @component_name = component_name
+      end
+
+      def roles
+        [role]
+      end
+
+      def render(template, _)
+        template.render(File.join('pageflow', 'react', 'widget'), name: name)
+      end
+    end
+  end
+end

data/pageflow-react.gemspec

@@ -0,0 +1,29 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'pageflow/react/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "pageflow-react"
+  spec.version       = Pageflow::React::VERSION
+  spec.authors       = ["Tim Fischbach"]
+  spec.email         = ["mail@timfischbach.de"]
+  spec.summary       = %q{Building Pageflow page types with React.js}
+  spec.homepage      = "https://github.com/codevise/pageflow-react"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "pageflow", "~> 0.10"
+  spec.add_dependency "react-rails", "~> 1.6.0"
+  spec.add_dependency "multi_json", "~> 1.11"
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+
+  # Semantic versioning rake tasks
+  spec.add_development_dependency 'semmy', '~> 0.2'
+end