cards-to-sketch.js

import React from 'react';
import PropTypes from 'prop-types';
import { render, Document, Page, Artboard, Text, View } from 'react-sketchapp';
import items from './items.json';

const groupLength = 2;
let groups = [];

for (var i = 0; i < items.length; i += groupLength) {
  groups.push(items.slice(i, i + groupLength));
}

const Side = ({ PBI, Category, Title }) => (
  <View
    name={ Title }
    style={{
      marginLeft: 25,
      marginRight: 25,
      marginTop: 25,
      width: 344
    }}
  >
    <View
      name="Metadata"
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
    <Text
      name="PBI"
      style={{
        fontFamily: 'Proxima Nova',
        fontWeight: 'light',
        fontSize: 12,
        width: 75
      }}
    >
      { PBI }
    </Text>
    <Text
      name="Category"
      style={{
        fontFamily: 'Proxima Nova',
        fontWeight: 'light',
        fontSize: 12,
        textAlign: 'right',
        width: 270
      }}
    >
      { Category }
    </Text>
    </View>
    <Text
      name="Title"
      style={{
        fontFamily: 'Proxima Nova',
        fontSize: 24,
        width: 344
      }}
    >
      { Title }
    </Text>
  </View>
);

const CardDocument = () =>
  <Document>
      <Page>
        {
          groups.map((item, i) =>
            <Artboard
              name={`${i + 1}`}
              key={i}
              style={{
                height: 612,
                left: (792 + 50) * (i - 1),
                top: 0,
                position: 'absolute',
                width: 792,
              }}>
              <View style={{
                flexDirection: 'row',
                justifyContent: 'space-between'
              }}>
                <Side PBI={item[0].PBI.toString()} Category={item[0].Category} Title={item[0].Title} />
                {
                  item[1] ? <Side PBI={item[1].PBI} Category={item[1].Category} Title={item[1].Title} /> : null
                }
              </View>
            </Artboard>
          )
        }
      </Page>
    </Document>
;

export default () => {
  render(
    <CardDocument />
  );
};

items.json

[
  {
    "PBI": 25973,
    "Title": "Partial sign-in when clicking a link from email",
    "Category": "Sign-in"
  },
  {
    "PBI": 25971,
    "Title": "Regional pricing for car wash",
    "Category": "Car wash"
  },
  {
    "PBI": 25947,
    "Title": "Testimonials and case studies",
    "Category": "Business"
  },
  {
    "PBI": 25946,
    "Title": "New customer sign-up online",
    "Category": "Business"
  },
  {
    "PBI": 25944,
    "Title": "Decision tool (which fuel solution is right for your needs)",
    "Category": "Business"
  }
]

package.json

{
  "name": "basic-setup",
  "version": "1.0.0",
  "description": "",
  "skpm": {
    "main": "basic-setup.sketchplugin",
    "manifest": "src/manifest.json"
  },
  "scripts": {
    "build": "skpm-build",
    "watch": "skpm-build --watch",
    "render": "skpm-build --watch --run",
    "render:once": "skpm-build --run",
    "postinstall": "npm run build && skpm-link"
  },
  "author": "Jon Gold <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "@skpm/builder": "^0.2.0"
  },
  "dependencies": {
    "chroma-js": "^1.2.2",
    "csvtojson": "^1.1.9",
    "prop-types": "^15.5.8",
    "react": "^15.4.2",
    "react-sketchapp": "^1.0.0",
    "react-test-renderer": "^15.4.2"
  }
}