diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..02f08fb --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "es2015" + ] +} \ No newline at end of file diff --git a/package.json b/package.json index a1047ac..d0ff775 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,12 @@ { "name": "sass-colour-lover", - "version": "1.0.3-alpha", + "version": "2.0.0-alpha", "description": "Auto-magically generate Sass color variables using palettes from COLOURLovers", "main": "sass-colour-lover.js", "scripts": { - "test": "grunt test" + "build": "npm run clean && node ./node_modules/.bin/webpack", + "clean": "node ./node_modules/.bin/rimraf ./build", + "test": "node ./node_modules/.bin/mocha --opts ./test/mocha.opts ./test/**/*.spec.js" }, "repository": { "type": "git", @@ -14,28 +16,40 @@ "COLOURLovers", "Sass" ], - "author": "@magicink", + "author": "Brandon Tom ", "license": "GPLv2", "bugs": { "url": "https://github.com/magicink/sass-colour-lover/issues" }, "homepage": "https://github.com/magicink/sass-colour-lover", "devDependencies": { - "coffeelint": "^1.6.0", - "grunt": "^0.4.5", - "grunt-coffeelint": "0.0.13", - "grunt-contrib-uglify": "^0.6.0", - "mkdirp": "^0.5.0" + "babel-cli": "^6.22.2", + "babel-loader": "^6.2.10", + "babel-preset-es2015": "^6.22.0", + "chai": "^3.5.0", + "es6-promise": "^4.0.5", + "isomorphic-fetch": "^2.2.1", + "mkdirp": "^0.5.0", + "mocha": "^3.2.0", + "nock": "^9.0.2", + "rimraf": "^2.5.4", + "sinon": "^1.17.7", + "webpack": "^2.2.0" }, - "dependencies": { - "coffeelint": "^1.6.0", - "grunt": "^0.4.5", - "grunt-coffeelint": "^0.0.13", - "grunt-contrib-coffee": "^0.12.0", - "mkdirp": "^0.5.0" - }, - "preferGlobal": "true", + "preferGlobal": true, "bin": { "sass-colour-lover": "build/sass-colour-lover.js" + }, + "standard": { + "globals": [ + "after", + "afterEach", + "before", + "beforeEach", + "describe", + "expect", + "fetch", + "it" + ] } } diff --git a/src/js/Palette.js b/src/js/Palette.js new file mode 100644 index 0000000..9f0b0e0 --- /dev/null +++ b/src/js/Palette.js @@ -0,0 +1,38 @@ +import { polyfill } from 'es6-promise' +import 'isomorphic-fetch' + +polyfill() + +export default { + create (id = null) { + let url = (id) ? `http://www.colourlovers.com/api/palette/${encodeURIComponent(id)}?format=json` : null + return Object.assign({ + author: null, + colors: [], + get (callback) { + if (!callback) { + callback = (data) => { + if (data.length === 1) { + data = data[0] + this.author = data.userName + this.hexColors = data.colors + this.title = data.title + } + } + } + if (this.id && this.url) { + fetch(this.url).then((response) => { + if (response.status >= 400) { + throw new Error('Bad server response') + } + return response.json() + }).then(callback) + } + }, + hexColors: [], + id, + title: null, + url + }) + } +} diff --git a/src/js/sass-colour-lover.js b/src/js/sass-colour-lover.js new file mode 100644 index 0000000..f6a6acf --- /dev/null +++ b/src/js/sass-colour-lover.js @@ -0,0 +1 @@ +import Palette from './Palette' \ No newline at end of file diff --git a/test/js/Color.spec.js b/test/js/Color.spec.js new file mode 100644 index 0000000..e69de29 diff --git a/test/js/Palette.spec.js b/test/js/Palette.spec.js new file mode 100644 index 0000000..a4bd003 --- /dev/null +++ b/test/js/Palette.spec.js @@ -0,0 +1,70 @@ +import { expect } from 'chai' +import 'isomorphic-fetch' +import nock from 'nock' +import Palette from '../../src/js/Palette' +import { polyfill } from 'es6-promise' + +polyfill() + +describe('Palette', () => { + describe('create()', () => { + it('should properly create a palette', () => { + let palette = Palette.create() + expect(palette.author).to.equal(null) + expect(palette.colors).to.deep.equal([]) + expect(palette.id).to.equal(null) + expect(palette.hexColors).to.deep.equal([]) + expect(palette.title).to.equal(null) + expect(palette.url).to.equal(null) + expect(palette.get).to.be.a('function') + }) + it('should properly handle parameters', () => { + let palette = Palette.create('123') + expect(palette.id).to.equal('123') + expect(palette.url).to.deep.equal('http://www.colourlovers.com/api/palette/123?format=json') + palette = Palette.create('star wars') + expect(palette.url).to.deep.equal('http://www.colourlovers.com/api/palette/star%20wars?format=json') + }) + }) + describe('get()', () => { + let fakeData = [{ + 'id': 123, + 'title': 'Kurasaibo', + 'userName': 'rageforst', + 'numViews': 1516, + 'numVotes': 25, + 'numComments': 1, + 'numHearts': 0, + 'rank': 0, + 'dateCreated': '2005-06-04 23:00:34', + 'colors': ['FF0033', '000000', 'AEF504', 'EDE6EC'], + 'description': `ochi tochi morochi toshy....\r\ntakaque maseguata...wokitoki,\r\nshiro lama Kurasuraibo, nico\r\nkasuuuuu\r\n\r\nOkira yokisan karate shiro kato!!!\n\nthe Liquits, Mexican rock group`, + 'url': 'http://www.colourlovers.com/palette/123/Kurasaibo', + 'imageUrl': 'http://www.colourlovers.com/paletteImg/FF0033/000000/AEF504/EDE6EC/Kurasaibo.png', + 'badgeUrl': 'http://www.colourlovers.com/images/badges/p/0/123_Kurasaibo.png', + 'apiUrl': 'http://www.colourlovers.com/api/palette/123' + }] + before(() => { + nock('http://www.colourlovers.com').get('/api/palette/123?format=json').reply(200, fakeData) + }) + it('should properly convert GET requests into objects', (done) => { + let palette = Palette.create('123') + palette.get((data) => { + if (data.length === 1) { + data = data[0] + palette.author = data.userName + palette.title = data.title + palette.hexColors = data.colors + try { + expect(palette.author).to.be.equal(fakeData[0].userName) + expect(palette.hexColors).to.be.deep.equal(fakeData[0].colors) + expect(palette.title).to.be.equal(fakeData[0].title) + done() + } catch (error) { + done(error) + } + } + }) + }) + }) +}) diff --git a/test/mocha.opts b/test/mocha.opts new file mode 100644 index 0000000..8600088 --- /dev/null +++ b/test/mocha.opts @@ -0,0 +1,4 @@ +--compilers js:babel-core/register +--full-trace +--recursive +--watch diff --git a/webpack.config.babel.js b/webpack.config.babel.js new file mode 100644 index 0000000..80bdaff --- /dev/null +++ b/webpack.config.babel.js @@ -0,0 +1,23 @@ +import path from 'path' +import webpack from 'webpack' + +const sourcePath = path.resolve(__dirname, 'src') +const jsPath = `${sourcePath}/js` + +export default { + entry: [ + `${jsPath}/sass-colour-lover.js` + ], + module: { + loaders: [ + {test: /\.js$/, loader: 'babel-loader'} + ] + }, + output: { + filename: '[name].js', + path: `${path.resolve(__dirname, 'build')}` + }, + plugins: [ + new webpack.optimize.UglifyJsPlugin() + ] +}