Merge pull request #99 from chrishutchinson/v3-main

Upgrade to v3

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ['es2015', 'react']
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12
+  },
+  "plugins": ["react", "prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

.github/workflows/test.yml

@@ -1,18 +1,22 @@
-name: Run tests
+name: Run tests and build
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
+      - v3-main
   pull_request:
-    branches: [main]
+    branches:
+      - main
+      - v3-main
 
 jobs:
-  build:
+  run:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [8.x]
+        node-version: [14.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -21,4 +25,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install
-      - run: npm test
+      - run: npm run test
+      - run: npm run build
+      - run: npm run docs
+      - run: npm run demo

.nvmrc

@@ -1 +1 @@
-v8
+v14

.prettierignore

@@ -0,0 +1,7 @@
+dist
+docs
+examples
+cardkit.js
+dom.js
+server.js
+test/coverage

LICENSE

@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2016 Times Newspapers Limited
+Copyright (c) 2016 Chris Hutchinson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,41 +1,42 @@
-# CardKit 2
-
-[![Join the chat at https://gitter.im/times/cardkit](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/times/cardkit?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+# CardKit
 
 > A simple, powerful and fully configurable image editor for web browers and servers. Optional UI included.
 
-CardKit 2 has three main parts:
+CardKit has three main parts:
 
 - [`CardKit`](#cardkit): The core library, that manages and maintains the configuration object which defines the structure and options of a card
 - [`CardKitDOM`](#cardkitdom): A DOM renderer, that takes an instance of CardKit and renders either a standalone image, or a pre-packaged UI for editing the image
 - [`CardKitServer`](#cardkitserver): A server renderer, that allows you to take an instance of CardKit and render it into an image on a Node.js server
 
 Additionally, a base class allows you to create your own renderers. See more in the [Custom Renderers](#custom-renderers) section.
 
-**For version 1, see the [`v1-master`](https://github.com/times/cardkit/tree/v1-master) branch**
-
 ## Installation
 
 `$ npm install cardkit --save`
 
-
 ## Usage
 
-CardKit 2 requires a configuration object in order to render an image. Each renderer (CardKitDOM and CardKitServer) uses this configuration and converts it into an output. Below are simple implementations for CardKit depending on your use case.
+CardKit requires a configuration object in order to render an image. Each renderer (CardKitDOM and CardKitServer) uses this configuration and converts it into an output. Below are simple implementations for CardKit depending on your use case.
+
+In addition to these, you may also want to try the [CardKit Yeoman Generator](https://www.github.com/times/generator-cardkit), which can help you scaffold an entire project in just a few moments. It brings with it the latest version of CardKit, a recommended directory structure, and a build process that helps you get your CardKit project deployed. There is also a [JSFiddle](https://jsfiddle.net/chrishutchinson/16tLs2ta/) that you can fork and edit for quick in-browser testing without touching the command line. 
 
-In addition to these, you may also want to try the [CardKit Yeoman Generator](https://www.github.com/times/generator-cardkit), which can help you scaffold an entire project in just a few moments. It brings with it the latest version of CardKit, a recommended directory structure, and a build process that helps you get your CardKit project deployed. There is also a [JSFiddle](https://jsfiddle.net/chrishutchinson/16tLs2ta/) that you can fork and edit for quick in-browser testing without touching the command line.
+### Previous versions
+
+For **version 1**, see the [`v1-main`](https://github.com/chrishutchinson/cardkit/tree/v1-main) branch.
+
+For **version 2**, see the [`v2-main`](https://github.com/chrishutchinson/cardkit/tree/v2-main) branch.
 
 #### Yeoman generator
 
     $ npm install -g yo generator-cardkit
     $ yo cardkit
 
 #### Browser with Webpack / Browserify usage
-  
+
 ```js
 // Load CardKit and CardKit DOM
-const CardKit = require('cardkit');
-const CardKitDOM = require('cardkit/dom');
+const CardKit = require("cardkit");
+const CardKitDOM = require("cardkit/dom");
 
 // Base configuration object - see `./examples/configurations` for examples
 var configuration = {};
@@ -49,33 +50,38 @@ var layouts = {};
 // Initialise CardKit
 var cardkit = new CardKit(configuration, {
   themes: themes,
-  layouts: layouts
+  layouts: layouts,
 });
 
 // Initialise Renderer
 var renderer = new CardKitDOM(cardkit);
 
 // To render the card only (with optional theme / layout overrides)
-renderer.renderCard('card', {
-  theme: 'Alt',
-  layout: 'Square'
+renderer.renderCard("card", {
+  theme: "Alt",
+  layout: "Square",
 });
 
 // OR To render the editing UI
-renderer.renderUI('card');
+renderer.renderUI("card");
 ```
 
-
 #### Browser with `<script>` tag usage
-  
+
 ```html
 <!-- Load in React from a CDN (or similar) -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
 
 <!-- Load in the CardKit and CardKitDOM Libraries -->
-<script type="text/javascript" src="https://cdn.rawgit.com/times/cardkit/v2.0.6/dist/cardkit.js"></script>
-<script type="text/javascript" src="https://cdn.rawgit.com/times/cardkit/v2.0.6/dist/dom.js"></script>
+<script
+  type="text/javascript"
+  src="https://cdn.rawgit.com/chrishutchinson/cardkit/v2.0.6/dist/cardkit.js"
+></script>
+<script
+  type="text/javascript"
+  src="https://cdn.rawgit.com/chrishutchinson/cardkit/v2.0.6/dist/dom.js"
+></script>
 
 <!-- Your container element to render into -->
 <div id="card"></div>
@@ -93,30 +99,29 @@ renderer.renderUI('card');
   // Initialise CardKit
   var cardkit = new CardKit(configuration, {
     themes: themes,
-    layouts: layouts
+    layouts: layouts,
   });
 
   // Initialise Renderer
   var renderer = new CardKitDOM(cardkit);
 
   // To render the card only (with optional theme / layout overrides)
-  renderer.renderCard('card', {
-    theme: 'Alt',
-    layout: 'Square'
+  renderer.renderCard("card", {
+    theme: "Alt",
+    layout: "Square",
   });
 
   // OR To render the editing UI
-  renderer.renderUI('card');
+  renderer.renderUI("card");
 </script>
 ```
 
-
 #### Server usage
 
 ```js
 // Require CardKit and CardKitServer
-const CardKit = require('cardkit');
-const CardKitServer = require('cardkit/server');
+const CardKit = require("cardkit");
+const CardKitServer = require("cardkit/server");
 
 // Base configuration object - see `./examples/configurations` for examples
 const configuration = {};
@@ -128,19 +133,19 @@ const cardkit = new CardKit(configuration);
 var renderer = new CardKitServer(cardkit);
 
 // Render to image
-renderer.renderToImage(2)
-       .then((image) => {
-          // Do what you want with the image here...
-          console.log('<img src="data:image/png;base64,' + image + '" />');
-          process.exit();
-       })
-       .catch((e) => {
-          console.log('[ERR]', e);
-          process.exit();
-       });
+renderer
+  .renderToImage(2)
+  .then((image) => {
+    // Do what you want with the image here...
+    console.log('<img src="data:image/png;base64,' + image + '" />');
+    process.exit();
+  })
+  .catch((e) => {
+    console.log("[ERR]", e);
+    process.exit();
+  });
 ```
 
-
 ## APIs
 
 ### CardKit
@@ -157,7 +162,6 @@ renderer.renderToImage(2)
 
 > Computes a configuaration object, optionally accepting a named template, theme and layout. These get merged into the base configuration and returned.
 
-
 ### CardKitDOM
 
 #### `new CardKitDOM(cardkit)`
@@ -180,7 +184,6 @@ renderer.renderToImage(2)
 
 > Downloads the image to your local machine. Accepts a scale (default=2), and an element to grab from. If not provided it will fall back to the existing card being rendererd (if `renderCard()` was used).
 
-
 ### CardKitServer
 
 #### `new CardKitDOM(cardkit)`
@@ -195,26 +198,24 @@ renderer.renderToImage(2)
 
 > Renders the card to an image returning a Promise containing the image as a base64 string
 
-
 ## Custom Renderers
 
 A base class `CardKitRenderer` allows you to create your own renderer for CardKit. For example, CardKitDOM currently uses SVG to create the card, and React to render the UI. You may, however, wish to render your card using HTML canvas, or build a UI using Vue.js. Creating a custom renderer is a good way to achieve this. Below is a brief example of how you might achieve this:
 
 ```js
 class CardKitCanvas extends CardKitRenderer {
-
-  renderCard () {
+  renderCard() {
     // Canvas-specific code here
   }
 
-  rerender () { // A method that `CardKit` calls if the base configuration object is updated
+  rerender() {
+    // A method that `CardKit` calls if the base configuration object is updated
     // Handle an update to the base configuration, e.g. you may want to re-render the canvas element here
   }
 
-  yourCustomMethod () {
+  yourCustomMethod() {
     // You can implement any custom methods here, for example you may wish to expose or manipulate the <canvas> element for other users to take advantage of
   }
-
 }
 
 const cardkit = new CardKit(configuration);
@@ -224,10 +225,9 @@ const renderer = new CardKitCanvas(cardkit);
 renderer.yourCustomMethod();
 ```
 
-
 ## Custom Fonts
 
-CardKit allows you to load in custom fonts for use on your cards, see the Wiki for details. These need to be encoded into base64 format. 
+CardKit allows you to load in custom fonts for use on your cards, see the Wiki for details. These need to be encoded into base64 format.
 
 _If you wish to use a Google font, you can use the [googlefontcss64](https://www.npmjs.com/package/googlefontcss64) library to generate a base64 version of any Google font. You can use [this](https://gist.github.com/chrishutchinson/4a9f7bffddfec376e9d71e8666d5955d) Node.js script to get all the details you need._
 
@@ -237,15 +237,15 @@ Once you have the base64 encoded version of your font, you can register it in yo
 var configuration = {
   // ...
   fonts: {
-    'MyCustomFontName': base64encodedFont
+    MyCustomFontName: base64encodedFont,
   },
   layers: {
     text: {
-      fontFamily: 'MyCustomFontName'
-    }
-  }
+      fontFamily: "MyCustomFontName",
+    },
+  },
   // ...
-}
+};
 ```
 
 If you need to provide a specific format for your font, you can do the following:
@@ -254,37 +254,30 @@ If you need to provide a specific format for your font, you can do the following
 var configuration = {
   // ...
   fonts: {
-    'MyCustomFontName': {
+    MyCustomFontName: {
       src: base64encodedFont,
-      format: 'woff'
-    }
+      format: "woff",
+    },
   },
   layers: {
     text: {
-      fontFamily: 'MyCustomFontName'
-    }
-  }
+      fontFamily: "MyCustomFontName",
+    },
+  },
   // ...
-}
+};
 ```
 
-
-## Upgrading from v1.x
-
-Upgrading from v1.x to v2 should be a fairly straightforward process if you haven't made any major modifications to the v1.x user interface. Your configuration object from v1.x should be compatible with v2 with a few minor tweaks. Specific variations are available in the Wiki.
-
-
 ## Running locally
 
-CardKit currently requires Node.js 8, which you can install using `nvm` and running:
+CardKit currently requires Node.js 14, which you can install using `nvm` and running:
 
     $ nvm use
 
 To run a sample UI locally, run: `$ npm start`
 
 You can optionally pass a port like so: `$ npm start -- --port=8080`
 
-
 ## Tests
 
-To trigger the test suite, run `$ npm run test`
+To trigger the test suite, run `$ npm run test`