Create project skeleton.

Author: Amir Tocker

.babelrc

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

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "cloudinary_react",
+  "version": "1.0.0-rc1",
+  "description": "React components that utilize Cloudinary functionality",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CloudinaryLtd/cloudinary_react.git"
+  },
+  "author": "Cloudinary",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/CloudinaryLtd/cloudinary_react/issues"
+  },
+  "homepage": "https://github.com/CloudinaryLtd/cloudinary_react#readme",
+  "devDependencies": {
+    "@kadira/storybook": "^2.5.2",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-1": "^6.13.0",
+    "react": "^15.3.1",
+    "react-dom": "^15.3.1",
+    "webpack": "^1.13.2"
+  },
+  "dependencies": {
+    "cloudinary-core": "^2.1.2"
+  },
+  "babel": {
+    "presets": [
+      "react",
+      "es2015",
+      "stage-1"
+    ]
+  }
+}

src/components/CloudinaryContext/CloudinaryContext.js

@@ -0,0 +1,48 @@
+import React, {Component, PropTypes} from 'react';
+
+export default class CloudinaryContext extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  getChildContext() {
+    return {cloud_name: "demo"};
+  }
+
+  componentWillReceiveProps(nextProps) {
+  }
+
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return true;
+  }
+
+  render() {
+    return (
+      <span>CloudinaryContext Not Implemented yet</span>
+    );
+  }
+}
+CloudinaryContext.propTypes = {initialCount: React.PropTypes.number};
+CloudinaryContext.defaultProps = {initialCount: 0};
+CloudinaryContext.contextTypes = {
+  cloud_name: PropTypes.string.isRequired
+};
+CloudinaryContext.childContextTypes = {
+  cloud_name: PropTypes.string.isRequired
+};

src/components/CloudinaryContext/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "cloudinarycontext",
+  "version": "1.0.0",
+  "main": "./CloudinaryContext.js",
+  "private": true
+}

src/components/Image/Image.js

@@ -0,0 +1,72 @@
+import React, {Component, PropTypes} from 'react';
+import cloudinary from 'cloudinary-core';
+
+export default class Image extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {bar: props.initialBar};
+    // this.foo = this.foo.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    var config = {};
+    cloudinary.Configuration.CONFIG_PARAMS.forEach((param)=> {
+      if(nextProps[param]){
+        config[param] = nextProps[param];
+      }
+    });
+
+    this.setState({
+      url: ""
+    })
+  }
+
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  componentWillUpdate(nextProps, nextState, nextContext) {
+  }
+
+  componentDidUpdate(prevProps, prevState, prevContext) {
+  }
+
+  shouldComponentUpdate(nextProps, nextState, nextContext) {
+    return true;
+  }
+
+  render() {
+    let cl = cloudinary.Cloudinary.new({cloud_name: "demo"});
+    var {publicId, transformation, ...other} = this.props;
+    var url = cl.url(publicId, transformation);
+    return (
+      <img {...other} src={url} />
+    );
+  }
+}
+
+Image.propTypes = {
+  publicId: PropTypes.string.isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.number,
+  transformation: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.arrayOf(React.PropTypes.object)
+  ]),
+  handleLoad: PropTypes.func,
+  breakpoints: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.arrayOf(React.PropTypes.number)
+  ])
+
+};
+Image.defaultProps = {};
+Image.contextTypes = {
+  config: React.PropTypes.object
+};

src/components/Image/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "image",
+  "version": "1.0.0",
+  "main": "./Image.js",
+  "private": true
+}

src/components/Video/Video.js

@@ -0,0 +1,39 @@
+import React, {Component, PropTypes} from 'react';
+
+export default class Video extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentWillReceiveProps(nextProps) {
+  }
+
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return true;
+  }
+
+  render() {
+    return (
+      <div>Video Not Implemented yet.<video></video></div>
+    );
+  }
+}
+Video.propTypes = {initialCount: React.PropTypes.number};
+Video.defaultProps = {initialCount: 0};
+Video.contextTypes = {};

src/components/Video/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "video",
+  "version": "1.0.0",
+  "main": "./Video.js",
+  "private": true
+}

stories/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Image from '../src/components/Image';
+import Video from '../src/components/Video';
+import CloudinaryContext from '../src/components/CloudinaryContext';
+
+let CLImage = Image;
+
+storiesOf('Cloudinary', module)
+  .add('image', ()=> {
+    let t = { width: 0.5, crop: "scale"};
+    return (
+    <Image publicId="sample" transformation={t}/>
+  )})
+  .add('image with alt', ()=> {
+    let t = { width: 0.5, crop: "scale"};
+    return(
+      <Image publicId="does-not-exist" alt="This image is intentionally missing" transformation={t}/>
+    )
+  })
+  .add('image with style', ()=> {
+    let t = { width: 0.5, crop: "scale"};
+    return(
+      <Image publicId="sample" style={{border: "20px solid"}} transformation={t}/>
+    )
+  })
+  .add('Video', ()=> {
+    return (
+      <Video />
+    )})
+  .add('CloudinaryContext', ()=> {
+    let t = { width: 0.5, crop: "scale"};
+    return (
+      <CloudinaryContext >
+        <div>
+          <Image publicId="sample" transformation={t}/>
+        </div>
+      </CloudinaryContext>
+    )})
+;