support rendering into wrapped object (#379)

* support rendering into wrapped object

* update some docs

* add e2e test for rendering into wrapped object

* update deps and use prettier instead of prettier-cli (#380)

* update deps and use prettier instead of prettier-cli

* remove e2e tests on ci for now

.eslintrc

@@ -3,8 +3,10 @@
   "root": true,
   "extends": [
     "airbnb",
-    "sketch"
+    "sketch",
+    "prettier"
   ],
+  "plugins": ["prettier"],
   "globals": {
     "React$Component": true,
     "React$Element": true,
@@ -19,6 +21,8 @@
     "no-duplicate-imports": [0],
     "react/prefer-stateless-function": 0,
     "react/jsx-filename-extension": 0,
+    "react/destructuring-assignment": 0,
+    "react/jsx-one-expression-per-line": 0,
     "function-paren-newline": 0,
     "react/require-default-props": 0,
     "react/default-props-match-prop-types": 0,

.travis.yml

@@ -19,7 +19,7 @@ before_script:
   - npm prune
 script:
   - npm run check
-  - npm run test:e2e -- --app=/Applications/Sketch.app
+  # - npm run test:e2e -- --app=/Applications/Sketch.app
 after_script:
   - rm "~/Library/App Support/com.bohemiancoding.sketch3/.deployment" # remove the Sketch license
 branches:

CODE_OF_CONDUCT.md

@@ -2,73 +2,45 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of experience,
-nationality, personal appearance, race, religion, or sexual identity and
-orientation.
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to creating a positive environment include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Our Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
 
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at jon.gold@airbnb.com. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at jon.gold@airbnb.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at [http://contributor-covenant.org/version/1/4][version]
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
 
 [homepage]: http://contributor-covenant.org
 [version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -19,40 +19,47 @@ On both websites, it is a good idea to structure your code and question in a way
 Please keep in mind that people spend their free time trying to help you. You can make it easier for them if you provide versions of the relevant libraries and a runnable small project reproducing your issue. You can put your code on [JSBin](http://jsbin.com) or, for bigger projects, on GitHub. Make sure all the necessary dependencies are declared in `package.json` so anyone can run `npm install && npm start` and reproduce your issue.
 
 ## Development
+
 Visit the [issue tracker](https://github.com/airbnb/react-sketchapp/issues) to find a list of open issues that need attention.
 
 Fork, then clone the repo
+
 ```bash
 git clone https://github.com/your-username/react-sketchapp.git
 ```
 
 ### Setting up your environment
 
 ### Testing, style & Linting
+
 To run tests
+
 ```bash
 npm run test
 ```
 
 To run tests continuously
+
 ```bash
 npm run test:watch
 ```
 
 This codebase adheres to the [Airbnb Styleguide](https://github.com/airbnb/javascript) and is enforced using [ESLint](http://eslint.org/).
 
-It is recommended that you install an eslint plugin for your editor of choice when working on this codebase, however you can always check to see if the source code is compliant by running:
+It is recommended that you install an ESlint plugin for your editor of choice when working on this codebase, however you can always check to see if the source code is compliant by running:
 
 ```bash
 npm run lint
 ```
 
 It is also type-checked with [Flow](https://flow.org/) - run with
+
 ```bash
 npm run flow
 ```
 
 ### Docs
+
 We always appreciate improvements to the documentation!
 
 #### Installing Gitbook
@@ -95,11 +102,11 @@ On the other hand, sometimes the best way to start a discussion _is_ to send a p
 
 In general, the contribution workflow looks like this:
 
-* Open a new issue in the [Issue tracker](https://github.com/airbnb/react-sketchapp/issues).
-* Fork the repo.
-* Create a new feature branch based off the `master` branch.
-* Make sure all tests pass and there are no linting errors.
-* Submit a pull request, referencing any issues it addresses.
+- Open a new issue in the [Issue tracker](https://github.com/airbnb/react-sketchapp/issues).
+- Fork the repo.
+- Create a new feature branch based off the `master` branch.
+- Make sure all tests pass and there are no linting errors.
+- Submit a pull request, referencing any issues it addresses.
 
 Please try to keep your pull request focused in scope and avoid including unrelated commits.
 

README.md

@@ -8,7 +8,7 @@
   <strong>render React components to Sketch; tailor-made for design systems</strong>
 </div>
 
-## Quickstart 🏃‍
+## Quick-start 🏃‍
 
 First, make sure you have installed [Sketch](http://sketchapp.com) version 43+, & a recent [npm](https://nodejs.org/en/download/).
 
@@ -25,10 +25,7 @@ Next, [check out some more examples](https://github.com/airbnb/react-sketchapp/t
 
 ![readme-intro](https://cloud.githubusercontent.com/assets/591643/24777148/e742cd0e-1ad8-11e7-8751-090f6b2db514.png)
 
-[![npm](https://img.shields.io/npm/v/react-sketchapp.svg)](https://www.npmjs.com/package/react-sketchapp)
-![Sketch.app](https://img.shields.io/badge/Sketch.app-43--50-brightgreen.svg)
-[![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://travis-ci.org/airbnb/react-sketchapp)
-[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/react-sketchapp/Lobby)
+[![npm](https://img.shields.io/npm/v/react-sketchapp.svg)](https://www.npmjs.com/package/react-sketchapp) ![Sketch.app](https://img.shields.io/badge/Sketch.app-43--50-brightgreen.svg) [![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://travis-ci.org/airbnb/react-sketchapp) [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/react-sketchapp/Lobby)
 
 ## Why?!
 
@@ -42,34 +39,32 @@ import { render, Text, Artboard } from 'react-sketchapp';
 
 const App = props => (
   <Artboard>
-    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
-      { props.message }
-    </Text>
+    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>{props.message}</Text>
   </Artboard>
 );
 
-export default (context) => {
+export default context => {
   render(<App message="Hello world!" />, context.document.currentPage());
-}
+};
 ```
 
 ## What can I do with it?
 
-* **Manage design systems—** `react-sketchapp` was built for [Airbnb’s design system](http://airbnb.design/building-a-visual-language/); this is the easiest way to manage Sketch assets in a large design system
-* **Use real components for designs—** Implement your designs in code as React components and render them into Sketch
-* **Design with real data—** Designing with data is important but challenging; `react-sketchapp` makes it simple to fetch and incorporate real data into your Sketch files
-* **Build new tools on top of Sketch—** the easiest way to use Sketch as a canvas for custom design tooling
+- **Manage design systems—** `react-sketchapp` was built for [Airbnb’s design system](http://airbnb.design/building-a-visual-language/); this is the easiest way to manage Sketch assets in a large design system
+- **Use real components for designs—** Implement your designs in code as React components and render them into Sketch
+- **Design with real data—** Designing with data is important but challenging; `react-sketchapp` makes it simple to fetch and incorporate real data into your Sketch files
+- **Build new tools on top of Sketch—** the easiest way to use Sketch as a canvas for custom design tooling
 
 Found a novel use? We'd love to hear about it!
 
 [Read more about why we built it](http://airbnb.design/painting-with-code/)
 
 ## Documentation
 
-* [Examples](http://airbnb.io/react-sketchapp/docs/examples.html)
-* [API Reference](http://airbnb.io/react-sketchapp/docs/API.html)
-* [Styling](http://airbnb.io/react-sketchapp/docs/styling.html)
-* [Universal Rendering](http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html)
-* [Data Fetching](http://airbnb.io/react-sketchapp/docs/guides/data-fetching.html)
-* [FAQ](http://airbnb.io/react-sketchapp/docs/FAQ.html)
-* [Contributing](http://airbnb.io/react-sketchapp/CONTRIBUTING.html)
+- [Examples](http://airbnb.io/react-sketchapp/docs/examples.html)
+- [API Reference](http://airbnb.io/react-sketchapp/docs/API.html)
+- [Styling](http://airbnb.io/react-sketchapp/docs/styling.html)
+- [Universal Rendering](http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html)
+- [Data Fetching](http://airbnb.io/react-sketchapp/docs/guides/data-fetching.html)
+- [FAQ](http://airbnb.io/react-sketchapp/docs/FAQ.html)
+- [Contributing](http://airbnb.io/react-sketchapp/CONTRIBUTING.html)

__tests__/jest/jsonUtils/computeYogaNode.js

@@ -27,7 +27,7 @@ const createYogaNodes = (
   containerHeight: number,
 ) => {
   const yogaNodes = [];
-  styles.forEach((style) => {
+  styles.forEach(style => {
     const treeNode = createTreeNode(style);
     const { node } = computeYogaNode(treeNode);
     node.calculateLayout(

__tests__/jest/sharedStyles/TextStyles.js

@@ -141,11 +141,11 @@ describe('create', () => {
 
       const firstStoredStyle = res[Object.keys(res)[0]].cssStyle;
 
-      whitelist.forEach((key) => {
+      whitelist.forEach(key => {
         expect(firstStoredStyle).toHaveProperty(key, true);
       });
 
-      blacklist.forEach((key) => {
+      blacklist.forEach(key => {
         expect(firstStoredStyle).not.toHaveProperty(key);
       });
     });

__tests__/skpm/basic.test.js

@@ -1,5 +1,6 @@
+/* eslint-disable import/named, import/no-unresolved */
 import * as React from 'react';
-import * as sketch from 'sketch'; // eslint-disable-line
+import * as sketch from 'sketch';
 import { render, View, Artboard, Text } from '../../src';
 
 // depending on where those tests run, we don't get the things,

__tests__/skpm/render-in-wrapped-object.test.js

@@ -0,0 +1,64 @@
+/* eslint-disable import/named, import/no-unresolved */
+import * as React from 'react';
+import * as sketch from 'sketch';
+import { render, View, Artboard, Text } from '../../src';
+
+// depending on where those tests run, we don't get the things,
+// eg. the context might be empty or there is no selected document
+// This make sure we always get something
+function getDoc(document) {
+  return sketch.getSelectedDocument() || document;
+}
+
+const colorList = {
+  Haus: '#F3F4F4',
+  Night: '#333',
+  Sur: '#96DBE4',
+  'Sur Dark': '#24828F',
+  Peach: '#EFADA0',
+  'Peach Dark': '#E37059',
+  Pear: '#93DAAB',
+  'Pear Dark': '#2E854B',
+};
+
+test('should render a Page with a rectangle', (context, document) => {
+  const { selectedPage } = getDoc(document);
+  // eslint-disable-next-line
+  const Swatch = ({ name, hex }) => (
+    <View
+      name={`Swatch ${name}`}
+      style={{
+        height: 96,
+        width: 96,
+        margin: 4,
+        backgroundColor: hex,
+        padding: 8,
+      }}
+    >
+      <Text name="Swatch Name" style={{ color: '#000', fontWeight: 'bold' }}>
+        {name}
+      </Text>
+      <Text name="Swatch Hex" style={{ color: '#000' }}>
+        {hex}
+      </Text>
+    </View>
+  );
+
+  render(
+    <Artboard
+      name="Swatches"
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        width: (96 + 8) * 4,
+      }}
+    >
+      {Object.keys(colorList).map(color => (
+        <Swatch name={color} hex={colorList[color]} key={color} />
+      ))}
+    </Artboard>,
+    selectedPage,
+  );
+
+  expect(selectedPage.layers[0].name).toBe('Swatches');
+});