[ { "path": ".bookignore", "content": ".github/\n__tests__/\nexamples/\nlib/\nscratch/\nsrc/\n" }, { "path": ".editorconfig", "content": "# http://editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\ncharset = utf-8\ntrim_trailing_whitespace = true\nend_of_line = lf\ninsert_final_newline = true\n" }, { "path": ".github/CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn 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.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject 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.\n\nProject 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.\n\n## Scope\n\nThis 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.\n\n## Enforcement\n\nInstances 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.\n\nProject 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.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\nContributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given. By contributing, you agree to abide by the [code of conduct](https://github.com/airbnb/react-sketchapp/blob/master/.github/CODE_OF_CONDUCT.md).\n\n## Reporting Issues and Asking Questions\n\n**For support or usage questions like “how do I do X with react-sketchapp” and “my code doesn't work”, please search and ask on [StackOverflow with a react-sketchapp tag](http://stackoverflow.com/questions/tagged/react-sketchapp?sort=votes&pageSize=50) first.**\n\nWe ask you to do this because StackOverflow does a much better job at keeping popular questions visible. Unfortunately good answers get lost and outdated on GitHub.\n\nSome questions take a long time to get an answer. **If your question gets closed or you don't get a reply on StackOverflow for longer than a few days,** we encourage you to post an issue linking to your question. We will close your issue but this will give people watching the repo an opportunity to see your question and reply to it on StackOverflow if they know the answer.\n\nPlease be considerate when doing this as this is not the primary purpose of the issue tracker.\n\n### Help Us Help You\n\nOn both websites, it is a good idea to structure your code and question in a way that is easy to read to entice people to answer it. For example, we encourage you to use syntax highlighting, indentation, and split text in paragraphs.\n\nPlease 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.\n\n## Development\n\nVisit the [issue tracker](https://github.com/airbnb/react-sketchapp/issues) to find a list of open issues that need attention.\n\nFork, then clone the repo\n\n```bash\ngit clone https://github.com/your-username/react-sketchapp.git\n```\n\n### Setting up your environment\n\n### Testing, style & Linting\n\nTo run tests\n\n```bash\nnpm run test\n```\n\nTo run tests continuously\n\n```bash\nnpm run test:watch\n```\n\nThis style of the codebase is enforced by [Prettier](https://prettier.io/).\n\nIt is recommended that you install a Prettier plugin for your editor of choice when working on this codebase.\n\n### Docs\n\nWe always appreciate improvements to the documentation!\n\n#### Installing Gitbook\n\nTo install the latest version of `gitbook` and prepare to build the documentation, run the following:\n\n```\nnpm run docs:prepare\n```\n\n#### Building the Docs\n\nTo build the documentation, run the following:\n\n```\nnpm run docs:build\n```\n\nTo watch and rebuild documentation when changes occur, run the following:\n\n```\nnpm run docs:watch\n```\n\nThe docs will be served at http://localhost:4000.\n\n#### Publishing the Docs\n\nTo publish the documentation, run the following:\n\n```\nnpm run docs:publish\n```\n\n### Sending a Pull Request\n\nFor non-trivial changes, please open an issue with a proposal for a new feature or refactoring before starting work — we don't want you to waste your time on a pull request that won't be accepted.\n\nOn the other hand, sometimes the best way to start a discussion _is_ to send a pull request. Use your judgement!\n\nIn general, the contribution workflow looks like this:\n\n- Open a new issue in the [Issue tracker](https://github.com/airbnb/react-sketchapp/issues).\n- Fork the repo.\n- Create a new feature branch based off the `master` branch.\n- Make sure all tests pass.\n- Submit a pull request, referencing any issues it addresses.\n\nPlease try to keep your pull request focused in scope and avoid including unrelated commits.\n\nAfter you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.\n\nThank you for contributing!\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "👋 Hello! Thanks for contributing. Please use the template that matches your intention \n\n_I am..._\n\n| -------------------------------------------------------------------------------------------------\n| Requesting a new feature\n| -------------------------------------------------------------------------------------------------\n\n**Proposal/Feature-request:**\n\n| -------------------------------------------------------------------------------------------------\n| Reporting a bug or issue\n| -------------------------------------------------------------------------------------------------\n\n**Expected behavior:**\n\n**Observed behavior:**\n\n**How to reproduce:**\n\n**Sketch version:**\n\n**Please attach screenshots, a zip file of your project, and/or a link to your github project**\n" }, { "path": ".gitignore", "content": "# gitignore\ncoverage/\n.DS_Store\n*.log*\nnode_modules\nlib\nreact-example.sketchplugin\n_book\n.vscode\n\n# only apps should have lockfiles\nyarn.lock\npackage-lock.json\nnpm-shrinkwrap.json\n" }, { "path": ".npmignore", "content": ".DS_Store\n*.log*\nnode_modules\n_book\nexamples\ndocs\n.vscode\nyarn.lock\n__tests__\n.github\ntemplate\nbook.json\nprettier.config.js\n.editorconfig\n.bookignore\nsrc\njest.config.js\ntsconfig.json\ntsconfig.module.json\n.travis.yml\n" }, { "path": ".travis.yml", "content": "os: osx\nlanguage: node_js\ncache:\n directories:\n - node_modules\n# - $HOME/Library/Caches/Homebrew\nnotifications:\n email: false\nnode_js:\n - 'lts/*'\n# before_install:\n# - brew update\n# - brew cask install sketch # install Sketch\n# - mkdir -p \"~/Library/Application Support/com.bohemiancoding.sketch3/Plugins\" # create plugins folder\n# - echo $SKETCH_LICENSE > \"~/Library/Application Support/com.bohemiancoding.sketch3/.deployment\" # add the Sketch license\nbefore_script:\n - npm prune\nscript:\n - npm run test:ci\n # - npm run test:e2e -- --app=/Applications/Sketch.app\n# after_script:\n# - rm \"~/Library/App Support/com.bohemiancoding.sketch3/.deployment\" # remove the Sketch license\nbranches:\n except:\n - /^v\\d+\\.\\d+\\.\\d+$/\n" }, { "path": "CHANGELOG.md", "content": "# Change Log\n\nThis project adheres to [Semantic Versioning](http://semver.org/). Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/airbnb/react-sketchapp/releases) page.\n\n## Version 3.2.6\n\n- Fix the SVG component export\n\n## Version 3.2.5\n\n- Fix Skpm taking the wrong entry point when requiring react-sketchapp\n\n## Version 3.2.4\n\n- Fix the generated ES package\n\n## Version 3.2.3\n\n- Fix getting the font name (#510)\n\n## Version 3.2.2\n\n- Fix getting the default bridge on NodeJS\n\n## Version 3.2.1\n\n- `Platform.version` now reflects the Sketch version\n- Fix a bug for a broken version of `@sketch-hq/sketch-file-format-ts`\n\n## Version 3.2.0\n\n- Add a new `useWindowDimensions` hook for Artboard viewport (#501)\n\n## Version 3.1.3\n\n- Add proptypes for Text\n- Allow `fontWeigth` to be a number\n\n## Version 3.1.2\n\n- Handle passing a Sketch document more properly\n\n## Version 3.1.1\n\n- Fix for Sketch 64\n\n## Version 3.1.0\n\n- Fix acceptable text children (#474)\n- Fix parsing of SVG arc shorthand parameters (#467)\n- Change default font resolution, always falling back to the system font when the `fontFamily` is missing or not specified\n\n## Version 3.0.5\n\n- Fix missing dependency (#462)\n\n## Version 3.0.4\n\n- Fix rendering images (#458)\n\n## Version 3.0.3\n\n- Fix typo in Symbol (Thanks @antoni!)\n- Fix messed up `js-sha` import (#456)\n\n## Version 3.0.2\n\n- Fix rotation direction (#433)\n- Fix Svg renders when the shape doesn't fit the viewbox (#288)\n- Add missing strokeAlignment prop (#276)\n\n## Version 3.0.1\n\n- Allow passing a style object when making a symbol\n- Expose `getSymbolMasterByName`\n\n## Version 3.0.0\n\n- Export Svg components in the Svg/index.js file (Thanks @saschazar21!)\n- Fix setting the overflow\n- The symbol masters will try to maintain their overrides IDs so as not to reset instances that have overrides\n- Improve error messages when trying to render a broken override\n- Do not crash if there is no source for an Image, we will just show an placeholder for the image\n- Handle specifying document in injectSymbols (#388)\n- Add support for paragraph spacing (#382 - Thanks @lessthanzero!)\n- `Image` and `Text` now support multiple shadows just like `View`\n- Add support for `TextShadow`\n- Add support for `transform`\n- Add support for running `react-sketchapp` on NodeJS using `renderToJSON()`\n- Port to TypeScript and publish TypeScript definitions\n- `TextStyles.get(name)` now returns text styles that are part of the document (even if they haven't been defined with `react-sketchapp`) (#407)\n- `getSymbolComponentByName` now returns Symbols that are part of the document (even if they haven't been defined with `react-sketchapp`) (#177)\n- Switch the order of the `TextStyles.create` arguments to `TextStyles.create(styles, options)`\n\n## Version 3.0.0-beta.9\n\n- Fix setting the overflow\n- The symbol masters will try to maintain their overrides IDs so as not to reset instances that have overrides\n- Improve error messages when trying to render a broken override\n- Export Svg components in the Svg/index.js file (Thanks @saschazar21!)\n\n## Version 3.0.0-beta.8\n\n- Flatten styles in exported Svg component (Thanks @dabbott!)\n\n## Version 3.0.0-beta.7\n\n- Add Node.js SVG renderer (Thanks @dabbott!)\n\n## Version 3.0.0-beta.6\n\n- Do not crash if there is no source for an Image, we will just show an placeholder for the image\n\n## Version 3.0.0-beta.3 to 3.0.0-beta.5\n\n- Fix setting overrides (#409)\n- Fix images on NodeJS\n- Fix Border-radius clipping incorrectly calculated (#279)\n\n## Version 3.0.0-beta.1\n\n- Fix ShapeGroup on nodejs (#387)\n- Handle specifying document in injectSymbols (#388)\n- Fix support for paragraph spacing on sketch >= 49 (#390)\n\n## Version 3.0.0-beta.0\n\n- Add support for paragraph spacing (#382 - Thanks @lessthanzero!)\n- `Image` and `Text` now support multiple shadows just like `View`\n- add support for `TextShadow`\n- Experimental support for `transform`\n- Experimental support for running `react-sketchapp` on NodeJS\n\n## Version 2.1.0\n\n- Ensure `makeSymbol` does not change currentPage (#353 - Thanks @jaridmargolin!)\n- Fix Text decoration underline style (#370 - Thanks @thecalvinchan!)\n- Add possibility to add multiple shadows and shadow spread (#277 - Thanks @ludwigfrank and @thierryc!)\n- Support rendering into wrapped object (hence support the new Sketch API) (#379)\n\n## Version 2.0.0\n\n- Now throws if the \"Symbols\" page is explicitly passed in as the `container` on the `render` method. Previously if you explicitly passed in the \"Symbols\" pages as a container, it would create a new page and render onto that. (#297 - Thanks @jaridmargolin!)\n- Now throws an error if you attempt to render a Document component into a node intended to be a child of `Document`. (#297 - Thanks @jaridmargolin!)\n- Adds support for rendering a `Page` component into a container passed through the `render` method. This allows for rendering multiple `Artboard`s onto an existing page. (#297 - Thanks @jaridmargolin!)\n- More predictable rendering of `RedBox`. (#297 - Thanks @jaridmargolin!)\n- Fix Symbols overrides for Sketch >= 46 (#198 - Thanks @ianhook!)\n- Fix text overrides when the name of the Text layer is not explicitly defined (#292 - Thanks @jaridmargolin!)\n- update `yoga-node` to 1.9 (#314)\n- Add support for Sketch 50 (#290)\n- Fix shared text style matching (#290)\n- Remove n^2 rendering problem with large symbol sets (#235 - Thanks @ianhook!)\n- `Page` without a name explicitly set will be auto-incremented (\"Page 1\", \"Page 2\", etc.) just like how Sketch is doing by default (#296 - Thanks @jaridmargolin!)\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 Airbnb\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "
\n \"react-sketchapp\"\n
\n\n
\n render React components to Sketch; tailor-made for design systems\n
\n\n## Quick-start 🏃‍\n\nFirst, make sure you have installed [Sketch](http://sketch.com) version 50+, & a recent [npm](https://nodejs.org/en/download/).\n\nOpen a new Sketch file, then in a terminal:\n\n```bash\ngit clone https://github.com/airbnb/react-sketchapp.git\ncd react-sketchapp/examples/basic-setup && npm install\n\nnpm run render\n```\n\nNext, [check out some more examples](https://github.com/airbnb/react-sketchapp/tree/master/examples)!\n\n![readme-intro](https://cloud.githubusercontent.com/assets/591643/24777148/e742cd0e-1ad8-11e7-8751-090f6b2db514.png)\n\n[![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)\n\n## Why?!\n\nManaging the assets of design systems in Sketch is complex, error-prone and time consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers.\n\n## What does the code look like?\n\n```js\nimport * as React from 'react';\nimport { render, Text, Artboard } from 'react-sketchapp';\n\nconst App = props => (\n \n {props.message}\n \n);\n\nexport default context => {\n render(, context.document.currentPage());\n};\n```\n\n## What can I do with it?\n\n- **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\n- **Use real components for designs—** Implement your designs in code as React components and render them into Sketch\n- **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\n- **Build new tools on top of Sketch—** the easiest way to use Sketch as a canvas for custom design tooling\n\nFound a novel use? We'd love to hear about it!\n\n[Read more about why we built it](http://airbnb.design/painting-with-code/)\n\n## Documentation\n\n- [Examples](http://airbnb.io/react-sketchapp/docs/examples.html)\n- [API Reference](http://airbnb.io/react-sketchapp/docs/API.html)\n- [Styling](http://airbnb.io/react-sketchapp/docs/guides/styling.html)\n- [Universal Rendering](http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html)\n- [Data Fetching](http://airbnb.io/react-sketchapp/docs/guides/data-fetching.html)\n- [FAQ](http://airbnb.io/react-sketchapp/docs/FAQ.html)\n- [Contributing](https://github.com/airbnb/react-sketchapp/blob/master/.github/CONTRIBUTING.md)\n" }, { "path": "__tests__/jest/components/Artboard.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport { Artboard } from '../../../src/components/Artboard';\nimport { StyleSheet } from '../../../src/stylesheet';\n\ndescribe('', () => {\n it('renders children', () => {\n const tree = renderer.create(foo).toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it.todo('flattens its stylesheet');\n\n describe('name', () => {\n it('passes its name', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('defaults to Artboard', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n\n describe('style', () => {\n const styles = StyleSheet.create({\n view: {\n flex: 1,\n },\n });\n\n it('accepts a plain object', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts a StyleSheet ordinal', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts an array of plain objects and/or StyleSheet ordinals', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts artboard viewport preset', () => {\n const tree = renderer\n .create(\n ,\n )\n .toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "__tests__/jest/components/Document.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport { Document } from '../../../src/components/Document';\n\ndescribe('', () => {\n it('renders children', () => {\n const tree = renderer.create(foo).toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n});\n" }, { "path": "__tests__/jest/components/Image.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport { Image } from '../../../src/components/Image';\nimport { StyleSheet } from '../../../src/stylesheet';\n\ndescribe('', () => {\n it('renders children', () => {\n const tree = renderer.create(foo).toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it.todo('flattens its stylesheet');\n\n describe('name', () => {\n it('passes its name', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('defaults to Image', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n\n describe('resizeMode', () => {\n it('translates contain', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('translates cover', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('translates stretch', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('translates center', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('translates repeat', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('translates none', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('falls back to cover', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('prefers prop to style', () => {\n const tree = renderer\n .create()\n .toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('falls back to a resizeMode from style', () => {\n const tree = renderer\n .create()\n .toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n\n describe('source', () => {\n it('prefers source over defaultSource', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('falls back to defaultSource if available', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('sets height from source', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('sets width from source', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('favors style over source for height', () => {\n const tree = renderer\n .create()\n .toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('favors style over source for width', () => {\n const tree = renderer\n .create()\n .toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n\n describe('style', () => {\n const styles = StyleSheet.create({\n view: {\n flex: 1,\n },\n });\n\n it('accepts a plain object', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts a StyleSheet ordinal', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts an array of plain objects and/or StyleSheet ordinals', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "__tests__/jest/components/Page.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport { Page } from '../../../src/components/Page';\n\ndescribe('', () => {\n it('renders children', () => {\n const tree = renderer.create(foo).toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n describe('name', () => {\n it('passes its name', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('passes its name and avoids Symbol page conflict', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('passes otherProps', () => {\n // @ts-ignore\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "__tests__/jest/components/RedBox.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport { RedBox } from '../../../src/components/RedBox';\n\ndescribe('', () => {\n it('renders simple errors', () => {\n const mockedError = new Error('THIS IS AN ERROR');\n // override stack trace so that it's constant accross node versions\n mockedError.stack = `Error: awdawd\n at repl:1:13\n at Script.runInThisContext (vm.js:65:33)\n at REPLServer.defaultEval (repl.js:248:29)\n at bound (domain.js:375:14)\n at REPLServer.runBound [as eval] (domain.js:388:12)\n at REPLServer.onLine (repl.js:501:10)\n at REPLServer.emit (events.js:185:15)\n at REPLServer.emit (domain.js:421:20)\n at REPLServer.Interface._onLine (readline.js:285:10)\n at REPLServer.Interface._line (readline.js:638:8)`;\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('renders string errors', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n});\n" }, { "path": "__tests__/jest/components/Svg.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport Svg, { G, Path } from '../../../src/components/Svg';\n\ndescribe('', () => {\n it('passes its children', () => {\n const tree = renderer\n .create(\n \n \n \n \n \n \n \n \n \n ,\n )\n .toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('also works when child is directly imported', () => {\n const tree = renderer.create(\n \n \n \n \n \n \n \n \n \n ,\n );\n\n expect(tree.toJSON()).toMatchSnapshot();\n });\n});\n" }, { "path": "__tests__/jest/components/Text.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport { Text } from '../../../src/components/Text';\nimport { StyleSheet } from '../../../src/stylesheet';\n\ndescribe('', () => {\n it('passes its children', () => {\n const tree = renderer.create(foo).toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n describe('name', () => {\n it('passes its name', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('defaults to Text', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n\n describe('style', () => {\n const styles = StyleSheet.create({\n view: {\n flex: 1,\n },\n });\n\n it('accepts a plain object', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts a StyleSheet ordinal', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts an array of plain objects and/or StyleSheet ordinals', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "__tests__/jest/components/View.tsx", "content": "import * as React from 'react';\nimport * as renderer from 'react-test-renderer';\nimport { View } from '../../../src/components/View';\nimport { StyleSheet } from '../../../src/stylesheet';\n\ndescribe('', () => {\n it('passes its children', () => {\n const tree = renderer.create(foo).toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n describe('name', () => {\n it('passes its name', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('defaults to View', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n\n describe('style', () => {\n const styles = StyleSheet.create({\n view: {\n flex: 1,\n },\n });\n\n it('accepts a plain object', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts a StyleSheet ordinal', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n\n it('accepts an array of plain objects and/or StyleSheet ordinals', () => {\n const tree = renderer.create().toJSON();\n\n expect(tree).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "__tests__/jest/components/__snapshots__/Artboard.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` name defaults to Artboard 1`] = `\n\n`;\n\nexports[` name passes its name 1`] = `\n\n`;\n\nexports[` renders children 1`] = `\n\n foo\n\n`;\n\nexports[` style accepts a StyleSheet ordinal 1`] = `\n\n`;\n\nexports[` style accepts a plain object 1`] = `\n\n`;\n\nexports[` style accepts an array of plain objects and/or StyleSheet ordinals 1`] = `\n\n`;\n\nexports[` style accepts artboard viewport preset 1`] = `\n\n`;\n" }, { "path": "__tests__/jest/components/__snapshots__/Document.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` renders children 1`] = `\n\n foo\n\n`;\n" }, { "path": "__tests__/jest/components/__snapshots__/Image.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` name defaults to Image 1`] = `\n\n`;\n\nexports[` name passes its name 1`] = `\n\n`;\n\nexports[` renders children 1`] = `\n\n foo\n\n`;\n\nexports[` resizeMode falls back to a resizeMode from style 1`] = `\n\n`;\n\nexports[` resizeMode falls back to cover 1`] = `\n\n`;\n\nexports[` resizeMode prefers prop to style 1`] = `\n\n`;\n\nexports[` resizeMode translates center 1`] = `\n\n`;\n\nexports[` resizeMode translates contain 1`] = `\n\n`;\n\nexports[` resizeMode translates cover 1`] = `\n\n`;\n\nexports[` resizeMode translates none 1`] = `\n\n`;\n\nexports[` resizeMode translates repeat 1`] = `\n\n`;\n\nexports[` resizeMode translates stretch 1`] = `\n\n`;\n\nexports[` source falls back to defaultSource if available 1`] = `\n\n`;\n\nexports[` source favors style over source for height 1`] = `\n\n`;\n\nexports[` source favors style over source for width 1`] = `\n\n`;\n\nexports[` source prefers source over defaultSource 1`] = `\n\n`;\n\nexports[` source sets height from source 1`] = `\n\n`;\n\nexports[` source sets width from source 1`] = `\n\n`;\n\nexports[` style accepts a StyleSheet ordinal 1`] = `\n\n`;\n\nexports[` style accepts a plain object 1`] = `\n\n`;\n\nexports[` style accepts an array of plain objects and/or StyleSheet ordinals 1`] = `\n\n`;\n" }, { "path": "__tests__/jest/components/__snapshots__/Page.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` name passes its name 1`] = `\n\n`;\n\nexports[` name passes its name and avoids Symbol page conflict 1`] = `\n\n`;\n\nexports[` name passes otherProps 1`] = `\n\n`;\n\nexports[` renders children 1`] = `\n\n foo\n\n`;\n" }, { "path": "__tests__/jest/components/__snapshots__/RedBox.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` renders simple errors 1`] = `\n\n \n Error: THIS IS AN ERROR\n \n \n \n \n Script.runInThisContext\n \n \n REPLServer.defaultEval\n \n \n bound\n \n \n REPLServer.runBound [as eval]\n \n \n REPLServer.onLine\n \n \n REPLServer.emit\n \n \n REPLServer.emit\n \n \n REPLServer.Interface._onLine\n \n \n REPLServer.Interface._line\n \n \n\n`;\n\nexports[` renders string errors 1`] = `\n\n \n Error: String only error\n \n\n`;\n" }, { "path": "__tests__/jest/components/__snapshots__/Svg.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` also works when child is directly imported 1`] = `\n\n \n \n \n \n \n \n \n \n\n`;\n\nexports[` passes its children 1`] = `\n\n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "__tests__/jest/components/__snapshots__/Text.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` name defaults to Text 1`] = ``;\n\nexports[` name passes its name 1`] = `\n\n`;\n\nexports[` passes its children 1`] = `\n\n foo\n\n`;\n\nexports[` style accepts a StyleSheet ordinal 1`] = `\n\n`;\n\nexports[` style accepts a plain object 1`] = `\n\n`;\n\nexports[` style accepts an array of plain objects and/or StyleSheet ordinals 1`] = `\n\n`;\n" }, { "path": "__tests__/jest/components/__snapshots__/View.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` name defaults to View 1`] = `\n\n`;\n\nexports[` name passes its name 1`] = `\n\n`;\n\nexports[` passes its children 1`] = `\n\n foo\n\n`;\n\nexports[` style accepts a StyleSheet ordinal 1`] = `\n\n`;\n\nexports[` style accepts a plain object 1`] = `\n\n`;\n\nexports[` style accepts an array of plain objects and/or StyleSheet ordinals 1`] = `\n\n`;\n" }, { "path": "__tests__/jest/components/nodeImpl/Svg.tsx", "content": "import * as React from 'react';\n\nimport * as ReactSketch from '../../../../src';\nimport Svg from '../../../../src/components/Svg';\n\njest.mock('../../../../src/jsonUtils/models', () => ({\n ...require.requireActual('../../../../src/jsonUtils/models'),\n generateID: jest.fn((seed) => (seed ? `${seed}mockID` : 'mockID')),\n}));\n\ndescribe('node ', () => {\n it('generates the json for an svg', () => {\n class SVGElement extends React.Component {\n render() {\n return (\n \n \n \n \n \n \n \n \n );\n }\n }\n\n expect(ReactSketch.renderToJSON()).toMatchSnapshot();\n });\n});\n" }, { "path": "__tests__/jest/components/nodeImpl/__snapshots__/Svg.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`node generates the json for an svg 1`] = `\nObject {\n \"_class\": \"group\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 447,\n \"width\": 494,\n \"x\": 0,\n \"y\": 0,\n },\n \"hasClickThrough\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 2,\n \"layers\": Array [\n Object {\n \"_class\": \"group\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 447,\n \"width\": 494,\n \"x\": 0,\n \"y\": 0,\n },\n \"hasClickThrough\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 2,\n \"layers\": Array [\n Object {\n \"_class\": \"shapeGroup\",\n \"booleanOperation\": -1,\n \"clippingMaskMode\": 0,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 447,\n \"width\": 494,\n \"x\": 0,\n \"y\": 0,\n },\n \"hasClickThrough\": false,\n \"hasClippingMask\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"layers\": Array [\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 447,\n \"width\": 494,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.5, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.5, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.5, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0, 0.3579418344519016}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0, 0.3579418344519016}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0, 0.3579418344519016}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.2165991902834008, 0.03355704697986577}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.2165991902834008, 0.03355704697986577}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.2165991902834008, 0.03355704697986577}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.5, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.5, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.5, 0}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.7834008097165992, 0.03355704697986577}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.7834008097165992, 0.03355704697986577}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.7834008097165992, 0.03355704697986577}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{1, 0.3579418344519016}\",\n \"curveMode\": 1,\n \"curveTo\": \"{1, 0.3579418344519016}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{1, 0.3579418344519016}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n ],\n \"name\": \"ShapeGroup\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [\n Object {\n \"_class\": \"fill\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0.6823529411764706,\n \"red\": 1,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"fillType\": 0,\n \"gradient\": Object {\n \"_class\": \"gradient\",\n \"elipseLength\": 0,\n \"from\": \"{0.5, 0}\",\n \"gradientType\": 0,\n \"stops\": Array [\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 1,\n \"green\": 1,\n \"red\": 1,\n },\n \"position\": 0,\n },\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0,\n \"red\": 0,\n },\n \"position\": 1,\n },\n ],\n \"to\": \"{0.5, 1}\",\n },\n \"isEnabled\": true,\n \"noiseIndex\": 0,\n \"noiseIntensity\": 0,\n \"patternFillType\": 1,\n \"patternTileScale\": 1,\n },\n ],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n \"windingRule\": 1,\n },\n Object {\n \"_class\": \"shapeGroup\",\n \"booleanOperation\": -1,\n \"clippingMaskMode\": 0,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 287,\n \"width\": 494,\n \"x\": 0,\n \"y\": 160,\n },\n \"hasClickThrough\": false,\n \"hasClippingMask\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"layers\": Array [\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 287,\n \"width\": 494,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.5, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.5, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.5, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0, 0}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{1, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{1, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{1, 0}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n ],\n \"name\": \"ShapeGroup\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [\n Object {\n \"_class\": \"fill\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0.4235294117647059,\n \"red\": 0.9254901960784314,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"fillType\": 0,\n \"gradient\": Object {\n \"_class\": \"gradient\",\n \"elipseLength\": 0,\n \"from\": \"{0.5, 0}\",\n \"gradientType\": 0,\n \"stops\": Array [\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 1,\n \"green\": 1,\n \"red\": 1,\n },\n \"position\": 0,\n },\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0,\n \"red\": 0,\n },\n \"position\": 1,\n },\n ],\n \"to\": \"{0.5, 1}\",\n },\n \"isEnabled\": true,\n \"noiseIndex\": 0,\n \"noiseIntensity\": 0,\n \"patternFillType\": 1,\n \"patternTileScale\": 1,\n },\n ],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n \"windingRule\": 1,\n },\n Object {\n \"_class\": \"shapeGroup\",\n \"booleanOperation\": -1,\n \"clippingMaskMode\": 0,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 287,\n \"width\": 294,\n \"x\": 100,\n \"y\": 160,\n },\n \"hasClickThrough\": false,\n \"hasClippingMask\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"layers\": Array [\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 287,\n \"width\": 294,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.5, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.5, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.5, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0, 0}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{1, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{1, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{1, 0}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n ],\n \"name\": \"ShapeGroup\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [\n Object {\n \"_class\": \"fill\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0.6823529411764706,\n \"red\": 1,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"fillType\": 0,\n \"gradient\": Object {\n \"_class\": \"gradient\",\n \"elipseLength\": 0,\n \"from\": \"{0.5, 0}\",\n \"gradientType\": 0,\n \"stops\": Array [\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 1,\n \"green\": 1,\n \"red\": 1,\n },\n \"position\": 0,\n },\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0,\n \"red\": 0,\n },\n \"position\": 1,\n },\n ],\n \"to\": \"{0.5, 1}\",\n },\n \"isEnabled\": true,\n \"noiseIndex\": 0,\n \"noiseIntensity\": 0,\n \"patternFillType\": 1,\n \"patternTileScale\": 1,\n },\n ],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n \"windingRule\": 1,\n },\n Object {\n \"_class\": \"shapeGroup\",\n \"booleanOperation\": -1,\n \"clippingMaskMode\": 0,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 160,\n \"width\": 294,\n \"x\": 100,\n \"y\": 0,\n },\n \"hasClickThrough\": false,\n \"hasClippingMask\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"layers\": Array [\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 160,\n \"width\": 294,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.5, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.5, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.5, 0}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{1, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{1, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{1, 1}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n ],\n \"name\": \"ShapeGroup\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [\n Object {\n \"_class\": \"fill\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0.7058823529411765,\n \"green\": 0.9372549019607843,\n \"red\": 1,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"fillType\": 0,\n \"gradient\": Object {\n \"_class\": \"gradient\",\n \"elipseLength\": 0,\n \"from\": \"{0.5, 0}\",\n \"gradientType\": 0,\n \"stops\": Array [\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 1,\n \"green\": 1,\n \"red\": 1,\n },\n \"position\": 0,\n },\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0,\n \"red\": 0,\n },\n \"position\": 1,\n },\n ],\n \"to\": \"{0.5, 1}\",\n },\n \"isEnabled\": true,\n \"noiseIndex\": 0,\n \"noiseIntensity\": 0,\n \"patternFillType\": 1,\n \"patternTileScale\": 1,\n },\n ],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n \"windingRule\": 1,\n },\n Object {\n \"_class\": \"shapeGroup\",\n \"booleanOperation\": -1,\n \"clippingMaskMode\": 0,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 145,\n \"width\": 494,\n \"x\": 0,\n \"y\": 15,\n },\n \"hasClickThrough\": false,\n \"hasClippingMask\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"layers\": Array [\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 145,\n \"width\": 494,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.2165991902834008, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.2165991902834008, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.2165991902834008, 0}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.10526315789473684, 0.503448275862069}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.10526315789473684, 0.503448275862069}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.10526315789473684, 0.503448275862069}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.20445344129554655, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.20445344129554655, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.20445344129554655, 1}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 145,\n \"width\": 494,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.7834008097165992, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.7834008097165992, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.7834008097165992, 0}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.8947368421052632, 0.503448275862069}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.8947368421052632, 0.503448275862069}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.8947368421052632, 0.503448275862069}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{1, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{1, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{1, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.7955465587044535, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.7955465587044535, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.7955465587044535, 1}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n ],\n \"name\": \"ShapeGroup\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [\n Object {\n \"_class\": \"fill\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0.6823529411764706,\n \"red\": 1,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"fillType\": 0,\n \"gradient\": Object {\n \"_class\": \"gradient\",\n \"elipseLength\": 0,\n \"from\": \"{0.5, 0}\",\n \"gradientType\": 0,\n \"stops\": Array [\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 1,\n \"green\": 1,\n \"red\": 1,\n },\n \"position\": 0,\n },\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0,\n \"red\": 0,\n },\n \"position\": 1,\n },\n ],\n \"to\": \"{0.5, 1}\",\n },\n \"isEnabled\": true,\n \"noiseIndex\": 0,\n \"noiseIntensity\": 0,\n \"patternFillType\": 1,\n \"patternTileScale\": 1,\n },\n ],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n \"windingRule\": 1,\n },\n Object {\n \"_class\": \"shapeGroup\",\n \"booleanOperation\": -1,\n \"clippingMaskMode\": 0,\n \"do_objectID\": \"mockID\",\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 160,\n \"width\": 294,\n \"x\": 100,\n \"y\": 0,\n },\n \"hasClickThrough\": false,\n \"hasClippingMask\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"layers\": Array [\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 160,\n \"width\": 294,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.023809523809523808, 0.09375}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.023809523809523808, 0.09375}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.023809523809523808, 0.09375}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.5, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.5, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.5, 0}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n Object {\n \"_class\": \"shapePath\",\n \"booleanOperation\": -1,\n \"do_objectID\": \"mockID\",\n \"edited\": false,\n \"exportOptions\": Object {\n \"_class\": \"exportOptions\",\n \"exportFormats\": Array [],\n \"includedLayerIds\": Array [],\n \"layerOptions\": 0,\n \"shouldTrim\": false,\n },\n \"frame\": Object {\n \"_class\": \"rect\",\n \"constrainProportions\": false,\n \"height\": 160,\n \"width\": 294,\n \"x\": 0,\n \"y\": 0,\n },\n \"isClosed\": false,\n \"isFixedToViewport\": false,\n \"isFlippedHorizontal\": false,\n \"isFlippedVertical\": false,\n \"isLocked\": false,\n \"isVisible\": true,\n \"layerListExpandedType\": 0,\n \"name\": \"Path\",\n \"nameIsFixed\": false,\n \"pointRadiusBehaviour\": 1,\n \"points\": Array [\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.9761904761904762, 0.09375}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.9761904761904762, 0.09375}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.9761904761904762, 0.09375}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{1, 1}\",\n \"curveMode\": 1,\n \"curveTo\": \"{1, 1}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{1, 1}\",\n },\n Object {\n \"_class\": \"curvePoint\",\n \"cornerRadius\": 0,\n \"curveFrom\": \"{0.5, 0}\",\n \"curveMode\": 1,\n \"curveTo\": \"{0.5, 0}\",\n \"hasCurveFrom\": false,\n \"hasCurveTo\": false,\n \"point\": \"{0.5, 0}\",\n },\n ],\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n },\n ],\n \"name\": \"ShapeGroup\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [\n Object {\n \"_class\": \"fill\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0.0196078431372549,\n \"green\": 0.8274509803921568,\n \"red\": 0.996078431372549,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"fillType\": 0,\n \"gradient\": Object {\n \"_class\": \"gradient\",\n \"elipseLength\": 0,\n \"from\": \"{0.5, 0}\",\n \"gradientType\": 0,\n \"stops\": Array [\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 1,\n \"green\": 1,\n \"red\": 1,\n },\n \"position\": 0,\n },\n Object {\n \"_class\": \"gradientStop\",\n \"color\": Object {\n \"_class\": \"color\",\n \"alpha\": 1,\n \"blue\": 0,\n \"green\": 0,\n \"red\": 0,\n },\n \"position\": 1,\n },\n ],\n \"to\": \"{0.5, 1}\",\n },\n \"isEnabled\": true,\n \"noiseIndex\": 0,\n \"noiseIntensity\": 0,\n \"patternFillType\": 1,\n \"patternTileScale\": 1,\n },\n ],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n \"windingRule\": 1,\n },\n ],\n \"name\": \"Shape\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n },\n ],\n \"name\": \"Svg\",\n \"nameIsFixed\": false,\n \"resizingConstraint\": 63,\n \"resizingType\": 0,\n \"rotation\": 0,\n \"shouldBreakMaskChain\": false,\n \"style\": Object {\n \"_class\": \"style\",\n \"borderOptions\": Object {\n \"_class\": \"borderOptions\",\n \"dashPattern\": Array [],\n \"isEnabled\": false,\n \"lineCapStyle\": 0,\n \"lineJoinStyle\": 0,\n },\n \"colorControls\": Object {\n \"_class\": \"colorControls\",\n \"brightness\": 1,\n \"contrast\": 1,\n \"hue\": 1,\n \"isEnabled\": false,\n \"saturation\": 1,\n },\n \"contextSettings\": Object {\n \"_class\": \"graphicsContextSettings\",\n \"blendMode\": 0,\n \"opacity\": 1,\n },\n \"endMarkerType\": 0,\n \"fills\": Array [],\n \"innerShadows\": Array [],\n \"miterLimit\": 10,\n \"shadows\": Array [],\n \"startMarkerType\": 0,\n \"windingRule\": 1,\n },\n}\n`;\n" }, { "path": "__tests__/jest/index.ts", "content": "import * as ReactSketch from '../../src';\n\ndescribe('public API', () => {\n it('exports render', () => {\n expect(ReactSketch.render).toBeDefined();\n });\n it('exports renderToJSON', () => {\n expect(ReactSketch.renderToJSON).toBeDefined();\n });\n it('exports StyleSheet', () => {\n expect(ReactSketch.StyleSheet).toBeDefined();\n });\n it('exports Document', () => {\n expect(ReactSketch.Document).toBeDefined();\n });\n it('exports Page', () => {\n expect(ReactSketch.Page).toBeDefined();\n });\n it('exports Artboard', () => {\n expect(ReactSketch.Artboard).toBeDefined();\n });\n it('exports Image', () => {\n expect(ReactSketch.Image).toBeDefined();\n });\n it('exports RedBox', () => {\n expect(ReactSketch.RedBox).toBeDefined();\n });\n it('exports Text', () => {\n expect(ReactSketch.Text).toBeDefined();\n });\n it('exports TextStyles', () => {\n expect(ReactSketch.TextStyles).toBeDefined();\n });\n it('exports View', () => {\n expect(ReactSketch.View).toBeDefined();\n });\n it('exports Platform', () => {\n expect(ReactSketch.Platform).toBeDefined();\n });\n});\n" }, { "path": "__tests__/jest/jsonUtils/computeTextTree.ts", "content": "import { computeTextTree } from '../../../src/jsonUtils/computeTextTree';\nimport { Context } from '../../../src/utils/Context';\n\n// Example Text component tree\nconst treeStub = {\n type: 'text',\n props: {\n name: 'Swatch Hex',\n style: {\n color: '#636464',\n zIndex: 1,\n },\n },\n children: [\n '#F3F4F4',\n ' ',\n {\n type: 'text',\n props: {\n name: 'Text',\n style: {\n color: 'blue',\n },\n },\n children: ['Hello World'],\n },\n ],\n};\n\n// Correct Output\nconst treeFixture = [\n { content: '#F3F4F4', textStyles: {} },\n { content: ' ', textStyles: {} },\n { content: 'Hello World', textStyles: { color: 'blue' } },\n];\n\ndescribe('Compute Text Tree', () => {\n it('correctly handle Text nodes', () => {\n const tree = computeTextTree(treeStub, new Context());\n expect(tree).toEqual(treeFixture);\n });\n});\n" }, { "path": "__tests__/jest/jsonUtils/computeYogaNode.ts", "content": "import yoga from 'yoga-layout-prebuilt';\nimport { computeYogaNode } from '../../../src/jsonUtils/computeYogaNode';\nimport { Context } from '../../../src/utils/Context';\nimport bridge from '../../../src/platformBridges/macos';\n\nconst widthAndHeightStylesStub = {\n width: 10,\n height: 10,\n};\n\nconst widthAndHeightStylesStubFixture = {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 10,\n height: 10,\n};\n\nconst createTreeNode = (style: { [key: string]: number | string }) => ({\n type: 'foo',\n props: {\n style,\n },\n children: [],\n});\n\nconst createYogaNodes = (\n styles: Array<{ [key: string]: number | string }>,\n containerWidth?: number,\n containerHeight?: number,\n) => {\n const yogaNodes = [];\n styles.forEach((style) => {\n const treeNode = createTreeNode(style);\n const ctx = new Context();\n const { node } = computeYogaNode(bridge)(treeNode, ctx);\n node.calculateLayout(\n containerWidth || undefined,\n containerHeight || undefined,\n yoga.DIRECTION_LTR,\n );\n yogaNodes.push(node.getComputedLayout());\n });\n\n return yogaNodes;\n};\n\ndescribe('Compute Yoga Node', () => {\n it('correctly handles width: 0, auto, number', () => {\n const stylesToTest = [{ width: 100 }, { width: 0 }, { width: 'auto' }];\n const [numberNode, noneNode, autoNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.width).toEqual(100);\n expect(noneNode.width).toEqual(0);\n expect(autoNode.width).toEqual(0);\n });\n\n it('correctly handles height: 0, auto, number', () => {\n const stylesToTest = [{ height: 100 }, { height: 0 }, { height: 'auto' }];\n const [numberNode, noneNode, autoNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.height).toEqual(100);\n expect(noneNode.height).toEqual(0);\n expect(autoNode.height).toEqual(0);\n });\n\n it('correctly handles min-height: 0 & number', () => {\n const stylesToTest = [{ minHeight: 100 }, { minHeight: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.height).toEqual(100);\n expect(noneNode.height).toEqual(0);\n });\n\n it('correctly handles max-height: 0 & number', () => {\n const stylesToTest = [{ height: '100%', maxHeight: 100 }, { maxHeight: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest, 500, 500);\n\n expect(numberNode.height).toEqual(100);\n expect(noneNode.height).toEqual(0);\n });\n\n it('correctly handles min-width: 0 & number', () => {\n const stylesToTest = [{ minWidth: 100 }, { minWidth: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.width).toEqual(100);\n expect(noneNode.width).toEqual(0);\n });\n\n it('correctly handles max-width: 0 & number', () => {\n const stylesToTest = [{ width: '100%', maxWidth: 100 }, { maxWidth: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest, 500, 500);\n\n expect(numberNode.width).toEqual(100);\n expect(noneNode.width).toEqual(0);\n });\n\n it('correctly handles margin', () => {\n const stylesToTest = [{ margin: 100 }, { margin: 0 }, { margin: 'auto' }];\n const [numberNode, noneNode, autoNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode).toEqual({\n left: 100,\n right: 100,\n top: 100,\n bottom: 100,\n width: 0,\n height: 0,\n });\n expect(noneNode).toEqual({\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 0,\n height: 0,\n });\n expect(autoNode).toEqual({\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 0,\n height: 0,\n });\n });\n\n it('correctly handles padding', () => {\n const stylesToTest = [{ padding: 100 }, { padding: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode).toEqual({\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 200,\n height: 200,\n });\n expect(noneNode).toEqual({\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 0,\n height: 0,\n });\n });\n\n it('correctly handles border', () => {\n const stylesToTest = [{ borderWidth: 10 }, { borderWidth: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode).toEqual({\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 20,\n height: 20,\n });\n expect(noneNode).toEqual({\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 0,\n height: 0,\n });\n });\n\n it('correctly handles flex: 0, number', () => {\n const stylesToTest = [{ flex: 1 }, { flex: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.width).toEqual(0);\n expect(noneNode.width).toEqual(0);\n });\n\n it('correctly handles flexGrow: 0, number', () => {\n const stylesToTest = [{ flexGrow: 1 }, { flexGrow: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.width).toEqual(0);\n expect(noneNode.width).toEqual(0);\n });\n\n it('correctly handles flexShrink: 0, number', () => {\n const stylesToTest = [{ flexShrink: 1 }, { flexShrink: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.width).toEqual(0);\n expect(noneNode.width).toEqual(0);\n });\n\n it('correctly handles flexBasis: 0, number', () => {\n const stylesToTest = [{ flexBasis: 1 }, { flexBasis: 0 }];\n const [numberNode, noneNode] = createYogaNodes(stylesToTest);\n\n expect(numberNode.width).toEqual(0);\n expect(noneNode.width).toEqual(0);\n });\n\n it('correctly handles position: relative & absolute', () => {\n const stylesToTest = [\n { position: 'relative', left: 10 },\n { position: 'absolute', top: 10 },\n ];\n const [relativeNode, absoluteNode] = createYogaNodes(stylesToTest);\n\n expect(relativeNode).toEqual({\n left: 10,\n right: 10,\n top: 0,\n bottom: 0,\n width: 0,\n height: 0,\n });\n expect(absoluteNode).toEqual({\n left: 0,\n right: 0,\n top: 10,\n bottom: 10,\n width: 0,\n height: 0,\n });\n });\n\n it('correctly handles display: flex & none', () => {\n const stylesToTest = [\n { display: 'flex', ...widthAndHeightStylesStub },\n { display: 'none', width: 10, height: 10 },\n ];\n const [relativeNode, absoluteNode] = createYogaNodes(stylesToTest);\n\n expect(relativeNode).toEqual(widthAndHeightStylesStubFixture);\n expect(absoluteNode).toEqual(widthAndHeightStylesStubFixture);\n });\n\n it('correctly handles overflow: visible, scroll, hidden', () => {\n const stylesToTest = [\n { overflow: 'visible', ...widthAndHeightStylesStub },\n { overflow: 'scroll', ...widthAndHeightStylesStub },\n { overflow: 'hidden', ...widthAndHeightStylesStub },\n ];\n const [visibleNode, scrollNode, hiddenNode] = createYogaNodes(stylesToTest);\n\n expect(visibleNode).toEqual(widthAndHeightStylesStubFixture);\n expect(scrollNode).toEqual(widthAndHeightStylesStubFixture);\n expect(hiddenNode).toEqual(widthAndHeightStylesStubFixture);\n });\n\n it('correctly handles flexDirection', () => {\n const stylesToTest = [\n { flexDirection: 'row', ...widthAndHeightStylesStub },\n { flexDirection: 'column', ...widthAndHeightStylesStub },\n { flexDirection: 'row-reverse', ...widthAndHeightStylesStub },\n { flexDirection: 'column-reverse', ...widthAndHeightStylesStub },\n ];\n const [rowNode, colNode, rowReverseNode, colReverseNode] = createYogaNodes(stylesToTest);\n\n expect(rowNode).toEqual(widthAndHeightStylesStubFixture);\n expect(colNode).toEqual(widthAndHeightStylesStubFixture);\n expect(rowReverseNode).toEqual(widthAndHeightStylesStubFixture);\n expect(colReverseNode).toEqual(widthAndHeightStylesStubFixture);\n });\n\n it('correctly handles justifyContent', () => {\n const stylesToTest = [\n { justifyContent: 'flex-start', ...widthAndHeightStylesStub },\n { justifyContent: 'flex-end', ...widthAndHeightStylesStub },\n { justifyContent: 'center', ...widthAndHeightStylesStub },\n { justifyContent: 'space-between', ...widthAndHeightStylesStub },\n { justifyContent: 'space-around', ...widthAndHeightStylesStub },\n ];\n const [startNode, endNode, centerNode, spaceBetweenNode, spaceAroundNode] = createYogaNodes(\n stylesToTest,\n );\n\n expect(startNode).toEqual(widthAndHeightStylesStubFixture);\n expect(endNode).toEqual(widthAndHeightStylesStubFixture);\n expect(centerNode).toEqual(widthAndHeightStylesStubFixture);\n expect(spaceBetweenNode).toEqual(widthAndHeightStylesStubFixture);\n expect(spaceAroundNode).toEqual(widthAndHeightStylesStubFixture);\n });\n\n it('correctly handles alignContent', () => {\n const stylesToTest = [\n { alignContent: 'flex-start', ...widthAndHeightStylesStub },\n { alignContent: 'flex-end', ...widthAndHeightStylesStub },\n { alignContent: 'center', ...widthAndHeightStylesStub },\n { alignContent: 'stretch', ...widthAndHeightStylesStub },\n { alignContent: 'baseline', ...widthAndHeightStylesStub },\n { alignContent: 'space-between', ...widthAndHeightStylesStub },\n { alignContent: 'space-around', ...widthAndHeightStylesStub },\n { alignContent: 'auto', ...widthAndHeightStylesStub },\n ];\n const [\n startNode,\n endNode,\n centerNode,\n stretchNode,\n baselineNode,\n spaceBetweenNode,\n spaceAroundNode,\n autoNode,\n ] = createYogaNodes(stylesToTest);\n\n expect(startNode).toEqual(widthAndHeightStylesStubFixture);\n expect(endNode).toEqual(widthAndHeightStylesStubFixture);\n expect(centerNode).toEqual(widthAndHeightStylesStubFixture);\n expect(stretchNode).toEqual(widthAndHeightStylesStubFixture);\n expect(baselineNode).toEqual(widthAndHeightStylesStubFixture);\n expect(spaceBetweenNode).toEqual(widthAndHeightStylesStubFixture);\n expect(spaceAroundNode).toEqual(widthAndHeightStylesStubFixture);\n expect(autoNode).toEqual(widthAndHeightStylesStubFixture);\n });\n\n it('correctly handles alignItems', () => {\n const stylesToTest = [\n { alignItems: 'flex-start', ...widthAndHeightStylesStub },\n { alignItems: 'flex-end', ...widthAndHeightStylesStub },\n { alignItems: 'center', ...widthAndHeightStylesStub },\n { alignItems: 'stretch', ...widthAndHeightStylesStub },\n { alignItems: 'baseline', ...widthAndHeightStylesStub },\n ];\n const [startNode, endNode, centerNode, stretchNode, baselineNode] = createYogaNodes(\n stylesToTest,\n );\n\n expect(startNode).toEqual(widthAndHeightStylesStubFixture);\n expect(endNode).toEqual(widthAndHeightStylesStubFixture);\n expect(centerNode).toEqual(widthAndHeightStylesStubFixture);\n expect(stretchNode).toEqual(widthAndHeightStylesStubFixture);\n expect(baselineNode).toEqual(widthAndHeightStylesStubFixture);\n });\n\n it('correctly handles alignSelf', () => {\n const stylesToTest = [\n { alignSelf: 'flex-start', ...widthAndHeightStylesStub },\n { alignSelf: 'flex-end', ...widthAndHeightStylesStub },\n { alignSelf: 'center', ...widthAndHeightStylesStub },\n { alignSelf: 'stretch', ...widthAndHeightStylesStub },\n { alignSelf: 'baseline', ...widthAndHeightStylesStub },\n ];\n const [startNode, endNode, centerNode, stretchNode, baselineNode] = createYogaNodes(\n stylesToTest,\n );\n\n expect(startNode).toEqual(widthAndHeightStylesStubFixture);\n expect(endNode).toEqual(widthAndHeightStylesStubFixture);\n expect(centerNode).toEqual(widthAndHeightStylesStubFixture);\n expect(stretchNode).toEqual(widthAndHeightStylesStubFixture);\n expect(baselineNode).toEqual(widthAndHeightStylesStubFixture);\n });\n\n it('correctly handles flexWrap', () => {\n const stylesToTest = [\n { flexWrap: 'no-wrap', ...widthAndHeightStylesStub },\n { flexWrap: 'wrap', ...widthAndHeightStylesStub },\n { flexWrap: 'wrap-reverse', ...widthAndHeightStylesStub },\n ];\n const [noWrapNode, wrapNode, wrapReverseNode] = createYogaNodes(stylesToTest);\n\n expect(noWrapNode).toEqual(widthAndHeightStylesStubFixture);\n expect(wrapNode).toEqual(widthAndHeightStylesStubFixture);\n expect(wrapReverseNode).toEqual(widthAndHeightStylesStubFixture);\n });\n});\n" }, { "path": "__tests__/jest/jsonUtils/computeYogaTree.ts", "content": "import yoga from 'yoga-layout-prebuilt';\nimport { computeYogaTree } from '../../../src/jsonUtils/computeYogaTree';\nimport { Context } from '../../../src/utils/Context';\nimport bridge from '../../../src/platformBridges/macos';\n\nconst treeRootStub = {\n type: 'artboard',\n props: {\n style: {\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: 416,\n },\n name: 'Swatches',\n },\n children: [\n {\n type: 'view',\n props: {\n name: 'Swatch Haus',\n style: {\n backgroundColor: '#F3F4F4',\n height: 96,\n marginTop: 4,\n marginRight: 4,\n marginBottom: 4,\n marginLeft: 4,\n paddingTop: 8,\n paddingRight: 8,\n paddingBottom: 8,\n paddingLeft: 8,\n width: 96,\n },\n },\n children: [],\n },\n ],\n};\n\ncomputeYogaTree(bridge)(treeRootStub, new Context());\n\ndescribe('Compute Yoga Tree', () => {\n it('correctly create yoga nodes into layout tree', () => {\n const yogaTree = computeYogaTree(bridge)(treeRootStub, new Context());\n yogaTree.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR);\n expect(yogaTree.getComputedLayout()).toEqual({\n bottom: 0,\n height: 104,\n left: 0,\n right: 0,\n top: 0,\n width: 416,\n });\n\n expect(yogaTree.getChild(0).getComputedLayout()).toEqual({\n bottom: 4,\n height: 96,\n left: 4,\n right: 4,\n top: 4,\n width: 96,\n });\n });\n});\n" }, { "path": "__tests__/jest/jsonUtils/layerGroup.ts", "content": "import { layerGroup } from '../../../src/jsonUtils/layerGroup';\n\ndescribe('layer group', () => {\n it('is correctly constructed', () => {\n const group = layerGroup(100, 200, 300, 400, 0.5);\n\n expect(group).toHaveProperty('frame.x', 100);\n expect(group).toHaveProperty('frame.y', 200);\n expect(group).toHaveProperty('frame.width', 300);\n expect(group).toHaveProperty('frame.height', 400);\n expect(group).toHaveProperty('style.contextSettings.opacity', 0.5);\n });\n});\n" }, { "path": "__tests__/jest/jsonUtils/models.ts", "content": "import {\n generateID,\n makeColorFromCSS,\n makeColorFill,\n makeRect,\n makeSymbolInstance,\n makeSymbolMaster,\n} from '../../../src/jsonUtils/models';\n\ndescribe('generateID', () => {\n it('is unique', () => {\n expect(generateID()).not.toBe(generateID());\n });\n it('seed generates different ID', () => {\n expect(generateID('test')).not.toBe(generateID('test'));\n });\n it('hardcoded seed generates same ID', () => {\n expect(generateID('test', true)).toBe(generateID('test', true));\n });\n});\n\nconst BLACK = {\n _class: 'color',\n red: 0,\n green: 0,\n blue: 0,\n alpha: 1,\n};\nconst WHITE = {\n _class: 'color',\n red: 1,\n green: 1,\n blue: 1,\n alpha: 1,\n};\nconst GOLD = {\n _class: 'color',\n red: 0.8745098039215686,\n green: 0.7294117647058823,\n blue: 0.4117647058823529,\n alpha: 1,\n};\nconst PURPLE = {\n _class: 'color',\n red: 0.4,\n green: 0.2,\n blue: 0.6,\n alpha: 1,\n};\n\ndescribe('makeColorFromCSS', () => {\n it('works with hex colors', () => {\n expect(makeColorFromCSS('#000')).toEqual(BLACK);\n expect(makeColorFromCSS('#000000')).toEqual(BLACK);\n expect(makeColorFromCSS('#FFF')).toEqual(WHITE);\n expect(makeColorFromCSS('#FFFFFF')).toEqual(WHITE);\n expect(makeColorFromCSS('#DFBA69')).toEqual(GOLD);\n });\n\n it('works with named colors', () => {\n expect(makeColorFromCSS('black')).toEqual(BLACK);\n expect(makeColorFromCSS('white')).toEqual(WHITE);\n expect(makeColorFromCSS('rebeccapurple')).toEqual(PURPLE);\n });\n\n it('is case-insensitive', () => {\n expect(makeColorFromCSS('BLACK')).toEqual(BLACK);\n expect(makeColorFromCSS('wHIte')).toEqual(WHITE);\n expect(makeColorFromCSS('rebeccaPurple')).toEqual(PURPLE);\n });\n\n it('works with rgb colors', () => {\n expect(makeColorFromCSS('rgb(0, 0, 0)')).toEqual(BLACK);\n expect(makeColorFromCSS('rgb(255, 255, 255)')).toEqual(WHITE);\n expect(makeColorFromCSS('rgb(102, 51, 153)')).toEqual(PURPLE);\n });\n\n it('works with rgba colors', () => {\n expect(makeColorFromCSS('rgba(0, 0, 0, 1)')).toEqual(BLACK);\n expect(makeColorFromCSS('rgba(255, 255, 255, 1)')).toEqual(WHITE);\n expect(makeColorFromCSS('rgba(102, 51, 153, 1)')).toEqual(PURPLE);\n });\n\n it('multiplies rgba components with an alpha', () => {\n expect(makeColorFromCSS('rgba(0, 0, 0, 0.5)').alpha).toBeCloseTo(0.5);\n expect(makeColorFromCSS('rgba(0, 0, 0, 1)', 0.5).alpha).toBeCloseTo(0.5);\n expect(makeColorFromCSS('rgba(0, 0, 0, 0.5)', 0.5).alpha).toBeCloseTo(0.25);\n });\n\n it('works with hsl colors', () => {\n expect(makeColorFromCSS('hsl(0, 0%, 0%)')).toEqual(BLACK);\n expect(makeColorFromCSS('hsl(0, 0%, 100%)')).toEqual(WHITE);\n });\n\n it('works with hsla colors', () => {\n expect(makeColorFromCSS('hsla(0, 0%, 0%, 1)')).toEqual(BLACK);\n expect(makeColorFromCSS('hsla(0, 0%, 100%, 1)')).toEqual(WHITE);\n });\n});\n\ndescribe('makeColorFill', () => {\n it('sets the correct color', () => {\n expect(makeColorFill('#000')).toHaveProperty('color', BLACK);\n expect(makeColorFill('#fff')).toHaveProperty('color', WHITE);\n expect(makeColorFill('rebeccapurple')).toHaveProperty('color', PURPLE);\n expect(makeColorFill('#DFBA69')).toHaveProperty('color', GOLD);\n });\n});\n\ndescribe('makeRect', () => {\n it('is correctly constructed', () => {\n const group = makeRect(100, 200, 300, 400);\n\n expect(group).toHaveProperty('x', 100);\n expect(group).toHaveProperty('y', 200);\n expect(group).toHaveProperty('width', 300);\n expect(group).toHaveProperty('height', 400);\n });\n});\n\ndescribe('makeSymbolInstance', () => {\n it('is correctly constructed', () => {\n const instance = makeSymbolInstance(\n makeRect(0, 0, 100, 100),\n 'this is the symbol id',\n 'this is the name',\n );\n\n expect(instance).toHaveProperty('symbolID', 'this is the symbol id');\n expect(instance).toHaveProperty('name', 'this is the name');\n });\n});\n\ndescribe('makeSymbolMaster', () => {\n it('is correctly constructed', () => {\n const master = makeSymbolMaster(\n makeRect(0, 0, 100, 100),\n 'this is the symbol id',\n 'this is the name',\n );\n\n expect(master).toHaveProperty('symbolID', 'this is the symbol id');\n expect(master).toHaveProperty('name', 'this is the name');\n });\n});\n" }, { "path": "__tests__/jest/jsonUtils/shapeLayers.ts", "content": "import {\n makeRectPath,\n makeShapePath,\n makeRectShapeLayer,\n makeShapeGroup,\n} from '../../../src/jsonUtils/shapeLayers';\n\ndescribe('makeRectPath', () => {\n it('is correctly constructed', () => {\n const path = makeRectPath([10, 20, 30, 40]);\n\n expect(path.points[0]).toHaveProperty('cornerRadius', 10);\n expect(path.points[1]).toHaveProperty('cornerRadius', 20);\n expect(path.points[2]).toHaveProperty('cornerRadius', 30);\n expect(path.points[3]).toHaveProperty('cornerRadius', 40);\n });\n});\n\ndescribe('makeShapePath', () => {\n it('is correctly constructed', () => {\n const frame = { foo: 'bar' };\n const path = { baz: 'qux' };\n // @ts-ignore\n const shapePath = makeShapePath(frame, path);\n\n expect(shapePath).toHaveProperty('frame', frame);\n expect(shapePath).toHaveProperty('baz', 'qux');\n });\n});\n\ndescribe('makeRectShapeLayer', () => {\n it('is correctly constructed', () => {\n const shapeLayer = makeRectShapeLayer(100, 200, 300, 400, [10, 20, 30, 40]);\n\n expect(shapeLayer).toHaveProperty('frame.x', 100);\n expect(shapeLayer).toHaveProperty('frame.y', 200);\n expect(shapeLayer).toHaveProperty('frame.width', 300);\n expect(shapeLayer).toHaveProperty('frame.height', 400);\n expect(shapeLayer).toHaveProperty('fixedRadius', 10);\n });\n});\n\ndescribe('makeShapeGroup', () => {\n it('is correctly constructed', () => {\n const frame = { foo: 'bar' };\n const layers = [{ baz: 'qux' }];\n const fills = ['foo', 'bar'];\n\n // @ts-ignore\n const shapeGroup = makeShapeGroup(frame, layers, undefined, undefined, fills);\n\n expect(shapeGroup).toHaveProperty('frame', frame);\n expect(shapeGroup).toHaveProperty('layers', layers);\n expect(shapeGroup).toHaveProperty('style.fills', fills);\n });\n});\n" }, { "path": "__tests__/jest/jsonUtils/style.ts", "content": "import { makeBorderOptions, makeShadow } from '../../../src/jsonUtils/style';\n\ndescribe('makeBorderOptions', () => {\n it('makes solid borders', () => {\n expect(makeBorderOptions('solid', 1)).toHaveProperty('dashPattern', []);\n });\n\n it('makes dotted borders', () => {\n expect(makeBorderOptions('dotted', 1)).toHaveProperty('dashPattern', [1, 1]);\n\n expect(makeBorderOptions('dotted', 5)).toHaveProperty('dashPattern', [5, 5]);\n });\n\n it('makes dashed borders', () => {\n expect(makeBorderOptions('dashed', 1)).toHaveProperty('dashPattern', [3, 3]);\n\n expect(makeBorderOptions('dashed', 5)).toHaveProperty('dashPattern', [15, 15]);\n });\n});\n\ndescribe('makeShadow', () => {\n it('has sensible defaults', () => {\n const result = makeShadow({});\n\n expect(result).toHaveProperty('color.alpha', 1);\n expect(result).toHaveProperty('blurRadius', 1);\n expect(result).toHaveProperty('offsetX', 0);\n expect(result).toHaveProperty('offsetY', 0);\n });\n\n it('passes through props', () => {\n const result = makeShadow({\n shadowOpacity: 0.5,\n shadowColor: 'red',\n shadowRadius: 10,\n shadowOffset: {\n width: 5,\n height: 7,\n },\n });\n\n expect(result).toHaveProperty('color.alpha', 0.5);\n expect(result).toHaveProperty('blurRadius', 10);\n expect(result).toHaveProperty('offsetX', 5);\n expect(result).toHaveProperty('offsetY', 7);\n });\n\n it('combines rgba alpha & shadowOpacity', () => {\n const result = makeShadow({\n shadowOpacity: 0.5,\n shadowColor: 'rgba(0,0,0,0.5)',\n shadowRadius: 10,\n shadowOffset: {\n width: 5,\n height: 7,\n },\n });\n\n expect(result.color.alpha).toBeCloseTo(0.25);\n });\n});\n" }, { "path": "__tests__/jest/reactTreeToFlexTree.ts", "content": "import yoga from 'yoga-layout-prebuilt';\nimport { computeYogaTree } from '../../src/jsonUtils/computeYogaTree';\nimport { Context } from '../../src/utils/Context';\nimport { reactTreeToFlexTree } from '../../src/buildTree';\nimport bridge from '../../src/platformBridges/macos';\n\nconst treeRootStub = {\n type: 'artboard',\n props: {\n style: {\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: 416,\n },\n name: 'Swatches',\n },\n children: [\n {\n type: 'view',\n props: {\n name: 'Layer 1',\n style: {\n height: 100,\n position: 'absolute',\n width: 100,\n zIndex: 1,\n },\n },\n children: [],\n },\n {\n type: 'view',\n props: {\n name: 'Layer 3',\n style: {\n height: 300,\n position: 'absolute',\n width: 300,\n zIndex: 3,\n },\n },\n children: [],\n },\n {\n type: 'view',\n props: {\n name: 'Layer 2',\n style: {\n height: 200,\n position: 'absolute',\n width: 200,\n zIndex: 2,\n },\n },\n children: [],\n },\n ],\n};\n\ndescribe('Compute Flex Tree', () => {\n it('correctly creates flex tree', () => {\n const yogaNode = computeYogaTree(bridge)(treeRootStub, new Context());\n yogaNode.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR);\n const tree = reactTreeToFlexTree(treeRootStub, yogaNode, new Context());\n\n expect(tree.children).toEqual([\n {\n type: 'view',\n style: {\n height: 100,\n position: 'absolute',\n width: 100,\n zIndex: 1,\n },\n textStyle: {},\n layout: {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 100,\n height: 100,\n },\n props: {\n name: 'Layer 1',\n style: {\n height: 100,\n position: 'absolute',\n width: 100,\n zIndex: 1,\n },\n textNodes: [],\n },\n children: [],\n },\n {\n type: 'view',\n style: {\n height: 200,\n position: 'absolute',\n width: 200,\n zIndex: 2,\n },\n textStyle: {},\n layout: {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 200,\n height: 200,\n },\n props: {\n name: 'Layer 2',\n style: {\n height: 200,\n position: 'absolute',\n width: 200,\n zIndex: 2,\n },\n textNodes: [],\n },\n children: [],\n },\n {\n type: 'view',\n style: {\n height: 300,\n position: 'absolute',\n width: 300,\n zIndex: 3,\n },\n textStyle: {},\n layout: {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n width: 300,\n height: 300,\n },\n props: {\n name: 'Layer 3',\n style: {\n height: 300,\n position: 'absolute',\n width: 300,\n zIndex: 3,\n },\n textNodes: [],\n },\n children: [],\n },\n ]);\n });\n});\n" }, { "path": "__tests__/jest/sharedStyles/TextStyles.ts", "content": "import bridge from '../../../src/platformBridges/macos';\n\nlet TextStyles;\nlet doc;\nlet sharedTextStyles;\n\nbeforeEach(() => {\n jest.resetModules();\n\n jest.mock('../../../src/utils/getSketchVersion', () => ({\n getSketchVersion: jest.fn(() => 51),\n }));\n\n TextStyles = require('../../../src/sharedStyles/TextStyles').TextStyles;\n\n sharedTextStyles = require('../../../src/utils/sharedTextStyles');\n\n jest.mock('../../../src/utils/sharedTextStyles');\n\n TextStyles = TextStyles(() => bridge);\n sharedTextStyles = sharedTextStyles.sharedTextStyles;\n\n sharedTextStyles.setDocument = jest.fn((doc) => {\n if (!doc) {\n throw new Error('Please provide a sketch document reference');\n }\n });\n sharedTextStyles.addStyle = jest.fn(() => 'styleId');\n sharedTextStyles.setStyles = jest.fn(() => sharedTextStyles);\n\n doc = jest.fn();\n});\n\ndescribe('create', () => {\n describe('without a context', () => {\n it('it errors', () => {\n const styles = {};\n\n expect(() => TextStyles.create({}, styles)).toThrowError(\n /Please provide a sketch document reference/,\n );\n });\n });\n\n describe('with a context', () => {\n it('clears clearExistingStyles when true', () => {\n TextStyles.create(\n {},\n {\n clearExistingStyles: true,\n document: doc,\n },\n );\n\n expect(sharedTextStyles.setStyles).toHaveBeenCalled();\n });\n\n it('doesn’t clearExistingStyles when false', () => {\n TextStyles.create(\n {},\n {\n clearExistingStyles: false,\n document: doc,\n },\n );\n expect(sharedTextStyles.setStyles).not.toHaveBeenCalled();\n });\n\n it('stores one style', () => {\n const styles = {\n foo: {\n fontSize: 'bar',\n },\n };\n\n const res = TextStyles.create(styles, { document: doc });\n\n expect(Object.keys(res).length).toBe(1);\n });\n\n it('stores unique styles seperately', () => {\n const styles = {\n foo: {\n fontSize: 'bar',\n },\n bar: {\n fontSize: 'baz',\n },\n };\n\n const res = TextStyles.create(styles, { document: doc });\n\n expect(Object.keys(res).length).toBe(2);\n expect(sharedTextStyles.addStyle).toHaveBeenCalledTimes(2);\n });\n\n it('merges duplicate styles', () => {\n const styles = {\n foo: {\n fontSize: 'foo',\n },\n bar: {\n fontSize: 'foo',\n },\n };\n\n const res = TextStyles.create(styles, { document: doc });\n\n expect(Object.keys(res).length).toBe(1);\n expect(sharedTextStyles.addStyle).toHaveBeenCalledTimes(2);\n });\n\n it('only stores text attributes', () => {\n const whitelist = [\n 'color',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontWeight',\n 'textShadowOffset',\n 'textShadowRadius',\n 'textShadowColor',\n 'textTransform',\n 'letterSpacing',\n 'lineHeight',\n 'textAlign',\n 'writingDirection',\n ];\n\n const blacklist = ['foo', 'bar', 'baz'];\n\n const input = [...whitelist, ...blacklist].reduce(\n (acc, key) => ({\n ...acc,\n [key]: '',\n }),\n {},\n );\n\n const res = TextStyles.create({ foo: input }, { document: doc });\n\n const firstStoredStyle = res[Object.keys(res)[0]].cssStyle;\n\n whitelist.forEach((key) => {\n expect(firstStoredStyle).toHaveProperty(key, '');\n });\n\n blacklist.forEach((key) => {\n expect(firstStoredStyle).not.toHaveProperty(key);\n });\n });\n });\n});\n\ndescribe('resolve', () => {\n beforeEach(() => {\n TextStyles.create({}, { document: doc });\n });\n\n it('retrieves a matching style', () => {\n const key = 'foo';\n const styles = {\n [key]: { fontSize: 'bar' },\n };\n\n TextStyles.create(styles, { document: doc });\n\n expect(TextStyles.resolve(styles[key])).toBeDefined();\n expect(sharedTextStyles.addStyle).toHaveBeenCalledTimes(1);\n });\n\n it('returns null with no matching style', () => {\n const key = 'foo';\n const styles = {\n [key]: {\n fontSize: 'bar',\n },\n };\n const style2 = {\n fontSize: 'qux',\n };\n\n TextStyles.create(styles, { document: doc });\n\n expect(TextStyles.resolve(style2)).not.toBeDefined();\n expect(sharedTextStyles.addStyle).toHaveBeenCalledTimes(1);\n });\n});\n\ndescribe('get', () => {\n it('finds a matching registered style by name', () => {\n const styles = {\n foo: {\n fontSize: 'bar',\n },\n bar: {\n fontSize: 'baz',\n },\n };\n\n TextStyles.create(styles, { document: doc });\n\n expect(TextStyles.get('foo')).toEqual(styles.foo);\n expect(TextStyles.get('baz')).toEqual(undefined);\n });\n\n it('returns undefined when not found', () => {\n const styles = {\n foo: {\n fontSize: 'bar',\n },\n };\n\n TextStyles.create(styles, { document: doc });\n\n expect(TextStyles.get('baz')).toEqual(undefined);\n });\n});\n\ndescribe('clear', () => {\n it('clears previously registered styles', () => {\n const styles = {\n foo: {\n fontSize: 'bar',\n },\n bar: {\n fontSize: 'baz',\n },\n };\n\n TextStyles.create(styles, { document: doc });\n TextStyles.clear();\n\n expect(TextStyles.styles()).toEqual({});\n });\n});\n" }, { "path": "__tests__/jest/utils/isDefined.ts", "content": "import { isDefined } from '../../../src/utils/isDefined';\n\ndescribe('isNullOrUndefined', () => {\n it('correctly identify null', () => {\n const shouldBeNull = isDefined(null);\n\n expect(shouldBeNull).toEqual(false);\n });\n\n it('correctly identify undefined', () => {\n const shouldBeUndefined = isDefined(undefined);\n\n expect(shouldBeUndefined).toEqual(false);\n });\n\n it('correctly identify zero (0)', () => {\n const shouldBeZero = isDefined(0);\n\n expect(shouldBeZero).toEqual(true);\n });\n});\n" }, { "path": "__tests__/jest/utils/sortObjectKeys.ts", "content": "import { sortObjectKeys } from '../../../src/utils/sortObjectKeys';\n\ntest('simple example', () => {\n const a = {\n foo: true,\n bar: true,\n qux: true,\n baz: true,\n };\n\n const b = {\n bar: true,\n baz: true,\n foo: true,\n qux: true,\n };\n\n expect(sortObjectKeys(a)).toEqual(b);\n});\n" }, { "path": "__tests__/jest/utils/zIndex.ts", "content": "import { zIndex } from '../../../src/utils/zIndex';\n\nconst noZIndexNode = {\n props: {\n style: {\n zIndex: 0,\n },\n },\n};\n\nconst zIndexNode = {\n props: {\n style: {\n zIndex: 1,\n },\n },\n};\n\nconst fixureThatShouldBeSortedDifferently = [noZIndexNode, zIndexNode];\nconst fixureThatShouldNotBeSortedDifferently = [noZIndexNode, noZIndexNode];\n\ndescribe('zIndex', () => {\n it('correctly resort zIndex', () => {\n // @ts-ignore\n const shouldBeResorted = zIndex(fixureThatShouldBeSortedDifferently);\n // @ts-ignore\n expect(shouldBeResorted[0].props.style.zIndex).toEqual(0);\n });\n\n it('correctly add original index to returned objects ', () => {\n // @ts-ignore\n const shouldBeResorted = zIndex(fixureThatShouldBeSortedDifferently);\n\n // @ts-ignore\n expect(shouldBeResorted[0].oIndex).toEqual(0);\n });\n\n it('correctly resort zIndexes that are all the same', () => {\n // @ts-ignore\n const shouldNotBeResorted = zIndex(fixureThatShouldNotBeSortedDifferently);\n\n // @ts-ignore\n expect(shouldNotBeResorted[0].props.style.zIndex).toEqual(0);\n });\n});\n" }, { "path": "__tests__/skpm/basic.test.js", "content": "import * as React from 'react';\nimport * as sketch from 'sketch';\nimport { render, View, Artboard, Text } from '../../lib';\n\n// depending on where those tests run, we don't get the things,\n// eg. the context might be empty or there is no selected document\n// This make sure we always get something\nfunction getDoc(context, document) {\n return context.document || (sketch.getSelectedDocument() || document).sketchObject;\n}\n\nconst colorList = {\n Haus: '#F3F4F4',\n Night: '#333',\n Sur: '#96DBE4',\n 'Sur Dark': '#24828F',\n Peach: '#EFADA0',\n 'Peach Dark': '#E37059',\n Pear: '#93DAAB',\n 'Pear Dark': '#2E854B',\n};\n\ntest('should render a Page with a rectangle', (context, document) => {\n const nativePage = getDoc(context, document).currentPage();\n const Swatch = ({ name, hex }) => (\n \n \n {name}\n \n \n {hex}\n \n \n );\n\n render(\n \n {Object.keys(colorList).map(color => (\n \n ))}\n ,\n nativePage,\n );\n\n const page = sketch.Page.fromNative(nativePage);\n expect(page.layers[0].name).toBe('Swatches');\n});\n" }, { "path": "__tests__/skpm/render-context.test.js", "content": "import * as React from 'react';\nimport * as sketch from 'sketch';\nimport { render, View, Text } from '../../lib';\n\n// depending on where those tests run, we don't get the things,\n// eg. the context might be empty or there is no selected document\n// This make sure we always get something\nfunction getDoc(document) {\n return sketch.getSelectedDocument() || document;\n}\n\ntest('should render a Page with context events', (context, document) => {\n const { selectedPage } = getDoc(document);\n const Swatch = ({ hex }) => {\n const [count, setCount] = React.useState(0);\n\n React.useEffect(() => {\n setCount(10);\n }, [count]);\n\n return (\n \n \n Count is {count}\n \n \n );\n };\n\n render(, selectedPage);\n\n expect(selectedPage.layers[0].name).toBe('Count is 10');\n});\n" }, { "path": "__tests__/skpm/render-in-wrapped-object.test.js", "content": "import * as React from 'react';\nimport * as sketch from 'sketch';\nimport { render, View, Artboard, Text } from '../../lib';\n\n// depending on where those tests run, we don't get the things,\n// eg. the context might be empty or there is no selected document\n// This make sure we always get something\nfunction getDoc(document) {\n return sketch.getSelectedDocument() || document;\n}\n\nconst colorList = {\n Haus: '#F3F4F4',\n Night: '#333',\n Sur: '#96DBE4',\n 'Sur Dark': '#24828F',\n Peach: '#EFADA0',\n 'Peach Dark': '#E37059',\n Pear: '#93DAAB',\n 'Pear Dark': '#2E854B',\n};\n\ntest('should render a Page with a rectangle', (context, document) => {\n const { selectedPage } = getDoc(document);\n const Swatch = ({ name, hex }) => (\n \n \n {name}\n \n \n {hex}\n \n \n );\n\n render(\n \n {Object.keys(colorList).map(color => (\n \n ))}\n ,\n selectedPage,\n );\n\n expect(selectedPage.layers[0].name).toBe('Swatches');\n});\n" }, { "path": "book.json", "content": "{\n \"gitbook\": \">= 3.2.1\",\n \"title\": \"react-sketchapp\",\n \"plugins\": [\n \"edit-link\",\n \"prism\",\n \"-highlight\",\n \"github\",\n \"-search\",\n \"codeblock-disable-glossary\",\n \"anchorjs\"\n ],\n \"pluginsConfig\": {\n \"edit-link\": {\n \"base\": \"https://github.com/airbnb/react-sketchapp/tree/master\",\n \"label\": \"Edit This Page\"\n },\n \"github\": {\n \"url\": \"https://github.com/airbnb/react-sketchapp/\"\n }\n }\n}\n" }, { "path": "docs/API.md", "content": "# API Reference\n\n- [`render`](#renderelement-container)\n- [`renderToJSON`](#rendertojsonelement)\n- [Components](#components)\n - [``](#document)\n - [``](#page)\n - [``](#artboard)\n - [``](#image)\n - [``](#redbox)\n - [``](#svg)\n - [``](#text)\n - [``](#view)\n- [`Hooks`](#hooks)\n - [`useWindowDimensions`](#usewindowdimensions)\n- [`Platform`](#platform)\n - [`OS`](#os)\n - [`Version`](#version)\n - [`select`](#selectobj)\n- [`StyleSheet`](#stylesheet)\n - [`hairlineWidth`](#hairlinewidth)\n - [`absoluteFill`](#absolutefill)\n - [`create`](#createstyles)\n - [`flatten`](#flattenstyles)\n - [`resolve`](#resolvestyle)\n- [`TextStyles`](#textstyles)\n - [`create`](#createstyleoptionsstyles)\n - [`resolve`](#resolvestyle)\n- [`Symbols`](#symbols)\n - [`makeSymbol`](#makesymbolnode-props-document)\n\n### `render(element, container)`\n\nReturns the top-level rendered Sketch object or an array of Sketch objects if you use `` components.\n\n#### Parameters\n\n##### `element` (required)\n\nTop-level React component that defines your Sketch document.\n\nExample:\n\n```js\n\n \n \n \n Hello World\n \n \n \n\n```\n\n##### `container` (optional)\n\nThe element to render into - will be replaced. Should either be a Sketch [Document](https://developer.sketchapp.com/reference/api/#document), Sketch [Group](https://developer.sketchapp.com/reference/api/#group) or Sketch [Page](https://developer.sketchapp.com/reference/api/#page) Object.\n\nExample: `sketch.getSelectedDocument().selectedPage`.\n\n#### Returns\n\nThe top-most rendered native Sketch layer.\n\n#### Example\n\n```js\nimport sketch from 'sketch';\nimport { View, Text, render } from 'react-sketchapp';\n\nconst Document = props => (\n \n Hello world!\n \n);\n\nexport default () => {\n render(, sketch.getSelectedDocument().selectedPage);\n};\n```\n\n### `renderToJSON(element)`\n\nReturns a Sketch JSON object for further consumption - doesn't add to the page.\n\n#### Parameters\n\n##### `element` (required)\n\nTop-level React component that defines your Sketch document.\n\n#### Returns\n\nThe top-most Sketch layer as JSON.\n\n## Components\n\n### ``\n\nWrapper for Sketch's Documents. Must be used at the root of your application and is required if you would like to have multiple pages.\n\n#### Props\n\n| Prop | Type | Default | Note |\n| ---------- | ------ | ------- | ---------------------------------------- |\n| `children` | `Node` | | Can only be [``](#page) components |\n\n#### Example\n\n```js\n\n \n Hello world!\n \n \n Hello second world!!\n \n\n```\n\n### ``\n\nWrapper for Sketch's Pages. Requires a [``](#document) component as a parent if you would like to use multiple of these components.\n\n#### Props\n\n| Prop | Type | Default | Note |\n| ---------- | -------- | ------- | ------------------------------------------------ |\n| `name` | `String` | | The name to be displayed in the Sketch Page List |\n| `children` | `Node` | | |\n\n#### Example\n\n```js\n\n Hello world!\n\n```\n\n### ``\n\nWrapper for Sketch's Artboards. Requires a [``](#page) component as a parent if you would like to use multiple of these components.\n\n#### Props\n\n| Prop | Type | Default | Note |\n| --- | --- | --- | --- |\n| `name` | `String` | | The name to be displayed in the Sketch Layer List |\n| `children` | `Node` | | |\n| `style` | [`Style`](/docs/styling.md) | | |\n| `viewport` | `Viewport` | | Object: { name: string, width: number, height: number, scale?: number, fontScale?: number } |\n| `isHome` | `Boolean` | | Is prototype home screen if true |\n\nThe `scale` and `fontScale` attributes in the `viewport` prop are not used by Sketch, but can be used together with the [`useWindowDimensions`](#usewindowdimensions) hook for conditional styling/rendering.\n\n#### Examples\n\nHello world with width of 480px.\n\n```js\n\n Hello world!\n\n```\n\nMobile screen artboard with viewport preset (supports scrolling in prototypes).\n\n```js\n\n Hello world!\n\n```\n\n### ``\n\n#### Props\n\n| Prop | Type | Default | Note |\n| ------------ | --------------------------- | --------- | ---- |\n| `children` | `Node` | | |\n| `source` | `ImageSource` | | |\n| `style` | [`Style`](/docs/styling.md) | | |\n| `resizeMode` | `ResizeMode` | `contain` | |\n\n```js\ntype ImageSource = string | { src: string };\ntype ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat' | 'none';\n```\n\n#### Example\n\n```js\n\n```\n\n### ``\n\nA red box / 'red screen of death' error handler. Thanks to [commissure/redbox-react](https://github.com/commissure/redbox-react).\n\n#### Props\n\n| Prop | Type | Default | Note |\n| --- | --- | --- | --- |\n| `error` | [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) | **required** | A JavaScript Error object |\n\n#### Example\n\n```js\nimport sketch from 'sketch';\nimport { RedBox, render } from 'react-sketchapp';\n\nexport default () => {\n const { selectedPage } = sketch.getSelectedDocument();\n try {\n render(, selectedPage);\n } catch (err) {\n render(, selectedPage);\n }\n};\n```\n\n### ``\n\nSVG Interface to Sketch\n\nThe API is based on [`react-native-svg`](https://github.com/react-native-community/react-native-svg). See more information on [its README](https://github.com/react-native-community/react-native-svg#Usage).\n\n#### Example\n\n```js\nimport sketch from 'sketch';\nimport { Svg, render } from 'react-sketchapp';\n\nexport default () => {\n render(\n \n \n \n \n \n \n \n \n \n ,\n sketch.getSelectedDocument().selectedPage,\n );\n};\n```\n\n#### Direct imports\n\nAdditionally, to have a somewhat more compliant mode to the `react-native-svg` API, the SVG components might as well be imported directly:\n\n```js\nimport sketch from 'sketch';\nimport { render } from 'react-sketchapp';\nimport Svg, { G, Path } from 'react-sketchapp/lib/components/Svg';\n\nexport default () => {\n render(\n \n \n \n \n \n \n \n \n \n ,\n sketch.getSelectedDocument().selectedPage,\n );\n};\n```\n\n### ``\n\nText primitives\n\n#### Props\n\n| Prop | Type | Default | Note |\n| --- | --- | --- | --- |\n| `name` | `String` | | The name to be displayed in the Sketch Layer List |\n| `children` | `String` | | |\n| `style` | [`Style`](/docs/styling.md) | | |\n\n#### Example\n\n```js\n\n Hello World!\n\n```\n\n### ``\n\nView primitives\n\n#### Props\n\n| Prop | Type | Default | Note |\n| --- | --- | --- | --- |\n| `name` | `String` | | The name to be displayed in the Sketch Layer List |\n| `children` | `Node` | | |\n| `style` | [`Style`](/docs/styling.md) | | |\n| `flow` | `Flow` | | Object: { target: string, targetId: string, animationType: string } |\n\n#### Examples\n\n##### Example with children\n\n```js\n\n Hello World!\n Hello World!\n Hello World!\n\n```\n\n##### Example using `flow` prop for prototyping destination\n\n```js\n\n \n \n Open menu!\n \n \n \n id */>\n Go back!\n \n \n\n```\n\n## Hooks\n\n### `useWindowDimensions()`\n\nReturns the window dimensions of the parent ``. Returns `{ width: number, height: number, fontScale: number, scale: number }`.\n\n#### Example\n\n```js\nimport { Page, Artboard, View, Text, useWindowDimensions } from 'react-sketchapp';\n\nconst HomePage = () => {\n const { height, width } = useWindowDimensions();\n\n return (\n \n \n Hello World\n \n {(width >= 768) && (\n \n \n You can only see this text on tablet/desktop\n \n \n )}\n \n );\n};\n\nconst devices = [{\n name: 'Mobile',\n width: 360,\n height: 640,\n}, {\n name: 'Tablet',\n width: 768\n height: 1024,\n}, {\n name: 'Desktop',\n width: 1024\n height: 1280,\n}];\n\nrender(\n \n {devices.map(viewport => (\n \n \n \n ))}\n ,\n);\n```\n\n## Platform\n\n### `OS`\n\n`sketch`\n\n### `Version`\n\n`1`\n\n### `select(obj)`\n\n#### Parameters\n\n##### `obj`\n\n## StyleSheet\n\nCompared to single-use `style` objects, `StyleSheets` enable creation of re-usable, optimized style references.\n\n### `hairlineWidth`\n\nThe platform's global 'hairline width'.\n\n### `absoluteFill`\n\nA constant 'absolute fill' style.\n\n### `create(styles)`\n\nCreate an optimized `StyleSheet` reference from a style object.\n\n#### Parameters\n\n##### `styles`\n\n#### Example\n\n```js\nconst styles = StyleSheet.create({\n foo: {\n fontSize: 24,\n color: 'red',\n },\n bar: {\n fontSize: 36,\n color: 'blue',\n },\n});\n// { foo: 1, bar: 2 }\n\n\n \n \n;\n```\n\n### `flatten(styles)`\n\nFlatten an array of style objects into one aggregated object, **or** look up the definition for a registered stylesheet.\n\n#### Parameters\n\n##### `styles`\n\n#### Example\n\n```js\nconst styles = StyleSheet.create({\n foo: {\n fontSize: 24,\n color: 'red',\n },\n bar: {\n backgroundColor: 'blue',\n lineHeight: 36,\n },\n});\n\nStyleSheet.flatten([styles.foo, styles.bar]);\n// { fontSize: 24, color: 'red', backgroundColor: 'blue', lineHeight: 36 }\n\n// alternatively:\nStyleSheet.flatten(styles.foo);\n// { fontSize: 24, color: 'red' }\n```\n\n### `resolve(style)`\n\nResolve one style.\n\n#### Parameters\n\n##### `style`\n\n#### Example\n\n```js\nconst styles = StyleSheet.create({\n foo: {\n fontSize: 24,\n color: 'red',\n },\n});\n\nStyleSheet.resolve(styles.foo);\n// { fontSize: 24, color: 'red' }\n```\n\n## TextStyles\n\nAn interface to Sketch's shared text styles. Create styles with or without rendering them to the document canvas.\n\n### `create(styles, options)`\n\nThe primary interface to TextStyles. **Call this before rendering**.\n\n#### Parameters\n\n##### `styles` **(required)**\n\nAn object of JavaScript styles. The keys will be used as Sketch's Text Style names.\n\n##### `options: { document, clearExistingStyles }`\n\n###### `document`\n\nThe Sketch Document currently being rendered into.\n\n###### `clearExistingStyles`\n\nClear any styles already registered in the document.\n\n#### Example\n\n```js\nimport sketch from 'sketch';\nimport { TextStyles, View, Text, render } from 'react-sketchapp';\n\nexport default () => {\n const typeStyles = {\n Headline: {\n fontSize: 36,\n fontFamily: 'Apercu',\n lineHeight: 38,\n },\n Body: {\n fontSize: 16,\n fontFamily: 'Helvetica',\n lineHeight: 22,\n },\n };\n\n TextStyles.create(\n {\n context: context,\n clearExistingStyles: true,\n },\n typeStyles,\n );\n\n const Document = () => (\n \n Headline text\n Body text\n \n );\n\n render(, sketch.getSelectedDocument().selectedPage);\n};\n```\n\n### `resolve(style)`\n\nFind a stored native Sketch style object for a given JavaScript style object. You probably don't need to use this.\n\n#### Parameters\n\n##### `style`\n\nA JavaScript style\n\n### `styles`\n\nFind all of the registered styles. You probably don't need to use this.\n\n### `get(name)`\n\nFind a text style by _name_.\n\n#### Parameters\n\n##### `name`\n\nThe style name\n\n#### Example\n\n```js\nimport sketch from 'sketch';\nimport { TextStyles, View, Text, render } from 'react-sketchapp';\n\nexport default () => {\n const typeStyles = {\n Headline: {\n fontSize: 36,\n fontFamily: 'Apercu',\n lineHeight: 38,\n },\n Body: {\n fontSize: 16,\n fontFamily: 'Helvetica',\n lineHeight: 22,\n },\n };\n\n TextStyles.create(\n {\n context: context,\n clearExistingStyles: true,\n },\n typeStyles,\n );\n\n const Document = () => (\n \n Headline text\n Body text\n \n );\n\n render(, sketch.getSelectedDocument().selectedPage);\n};\n```\n\n### `clear`\n\nReset the registered styles.\n\n## Symbols\n\nAn interface to Sketch's symbols. Create symbols and optionally inject them into the symbols page.\n\n### `makeSymbol(node, props, document)`\n\nCreates a new symbol and injects it into the `Symbols` page. The name of the symbol can be optionally provided and will default to the display name of the component.\n\nReturns a react component which is an can be used to render instances of the symbol.\n\n#### Parameters\n\n| Parameter | Type | Default | Note |\n| --- | --- | --- | --- |\n| `node` | `Node` | | The node object that will be rendered as a symbol |\n| `props` | `Object` | The node name | Optional name for the symbol, string can include backslashes to organize these symbols with Sketch. For example `squares/blue` |\n| `props.name` | `String` | The node name | Optional name for the symbol, string can include backslashes to organize these symbols with Sketch. For example `squares/blue` |\n| `props.style` | [`Style`](/docs/styling.md) | | |\n| `document` | `Object` | The current document | The Sketch document to make the symbol in |\n\n### `getSymbolComponentByName(name)`\n\nReturns a react component which can be used to render the symbol instance that is associated with that name.\n\n### `getSymbolMasterByName(name)`\n\nReturns the JSON representation of the symbol master that is associated with that name.\n\n### Symbol example\n\n```js\nimport sketch from 'sketch';\nimport { View, makeSymbol, Artboard, render } from 'react-sketchapp';\n\nconst BlueSquare = () => (\n \n);\n\nconst BlueSquareSymbol = makeSymbol(BlueSquare);\n\nconst Document = () => (\n \n \n \n);\n\nexport default () => {\n render(, sketch.getSelectedDocument().selectedPage);\n};\n```\n\n### Text override example\n\nText overrides use the name parameter to target a specific Text primitive. When no name is given the value within the Text primitive can be used to override the value.\n\n```js\nimport sketch from 'sketch';\nimport { View, Text, makeSymbol, Artboard, render } from 'react-sketchapp';\n\nconst BlueSquare = () => (\n \n Blue Square Text\n \n);\n\nconst BlueSquareSymbol = makeSymbol(BlueSquare, 'squares/blue');\n\nconst Document = () => (\n \n \n \n);\n\nexport default () => {\n render(, sketch.getSelectedDocument().selectedPage);\n};\n```\n\n### Image override example\n\nImage overrides use the name parameter to target a specific Image primitive.\n\n```js\nimport sketch from 'sketch';\nimport { View, Image, Artboard, makeSymbol, render } from 'react-sketchapp';\n\nconst BlueSquare = () => (\n \n \n \n);\n\nconst BlueSquareSymbol = makeSymbol(BlueSquare, 'squares/blue');\n\nconst Document = () => (\n \n \n \n);\n\nexport default () => {\n render(, sketch.getSelectedDocument().selectedPage);\n};\n```\n\n#### Nested symbol + override example\n\n```js\nimport sketch from 'sketch';\nimport { View, Text, makeSymbol, Image, Artboard, render } from 'react-sketchapp';\n\nconst RedSquare = () => (\n \n Red Square\n \n);\n\nconst RedSquareSymbol = makeSymbol(RedSquare, 'squares/red');\n\nconst BlueSquare = () => (\n \n Blue Square\n \n);\n\nconst BlueSquareSymbol = makeSymbol(BlueSquare, 'squares/blue');\n\nconst Photo = () => (\n \n);\n\nconst PhotoSymbol = makeSymbol(Photo);\n\nconst Nested = () => (\n \n \n \n \n);\n\nconst NestedSymbol = makeSymbol(Nested);\n\nconst Document = () => (\n \n \n \n);\n\nexport default () => {\n render(, sketch.getSelectedDocument().selectedPage);\n};\n```\n" }, { "path": "docs/FAQ.md", "content": "# Frequently Asked Questions\n\n#### Why?!??!\n\n`react-sketchapp` evolved out of our need to generate **high-quality, consistent Sketch assets** for our design system at Airbnb. Wrapping Sketch’s imperative API is a pragmatic solution for a great developer experience and predictable rendering.\n\n#### How do I `console.log`?\n\nYou have multiple options to view the logs:\n\n- Using the [sketch-dev-tools](https://github.com/skpm/sketch-dev-tools)\n- `Console.app -> ~/Library/Logs -> com.bohemiancoding.sketch -> Plugin Output.log`\n- in the terminal\n\n ```bash\n skpm log -f\n ```\n\n- in the terminal\n\n ```bash\n tail -F ~/Library/Logs/com.bohemiancoding.sketch3/Plugin\\ Output.log\n ```\n\n Occasionally this file disappears — in that case, run this and then try `tail`ing again.\n\n ```bash\n touch ~/Library/Logs/com.bohemiancoding.sketch3/Plugin\\ Output.log\n ```\n\nFor more information, check out the [Sketch developer documentation](https://developer.sketch.com/plugins/debugging).\n\n#### I'm running a project as a plugin & Sketch isn't showing my changes\n\nSketch has a [developer mode](https://developer.sketch.com/plugins/debugging#reload-scripts) which refreshes plugins before running. If you're using `skpm` this should be set up automatically, but just in case try running\n\n```bash\ndefaults write com.bohemiancoding.sketch3.plist AlwaysReloadScript -bool YES\n```\n\n#### `` & ``? Where are the shapes? Talk to me about your API decisions!\n\nEarly versions of `react-sketchapp` mirrored Sketch's layers — ``, ``, `` etc. This was adequate for rendering simplistic designs such as grids of color palettes, but our focus is on production design systems.\n\nAt some point, we had to translate from our component codebase's primitives to Sketch's shapes. We tried translating trees of React Native elements into ``s etc, but it felt clumsy. Not every Sketch property has an analog in react-native, but **most react-native properties are translatable to Sketch**.\n\nBy aligning with react-native's API we:\n\n- think in the same primitives as we actually use in production\n- use the same layout algorithm in design & code\n- [render real components](http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html) into Sketch with `react-primitives` (a platform independent set of primitives)\n\nWhere it makes sense we're open to creating Sketch-specific components —there's no analog for `` on web or mobile—but the goal of `react-sketchapp` is to bring design & engineering closer together.\n\n#### So I can't draw arbitrary shapes?\n\nYou can use the [SVG API](/docs/API.md#svg) to draw arbitrary shapes.\n\n#### Any plans to support Sketch's constraints for layout?\n\nNot currently. FlexBox is the closest we have to a predictable, cross-platform layout specification — by using it, we can use the same styles on every platform we build for.\n\nWe currently use [`yoga`](https://github.com/facebook/yoga).\n\n#### Is there two-way binding? Can I generate React components from Sketch? 🔁\n\nNope.\n\nIsomorphisms are compelling but our focus is on tools that we can use day-to-day to improve the productivity of designers and engineers working on large-scale production applications.\n\nGetting production-ready semantics out of Sketch is more difficult than generating production-ready Sketch templates from React components 💀\n\nOur solution is to keep our [our design system](http://airbnb.design/building-a-visual-language/)’s source of truth in code, and use `react-sketchapp` to compose & consume it.\n\nTo _edit_ our design system, we are free to leverage any technology that can create React components, or be compiled to JSX, such as:\n\n- [React-centric IDEs](https://www.decosoftware.com/)\n- in-house design tools that are tailored to our workflow (whilst being backed by data, version control & semantic versioning) 🔜 👀\n- writing React components in text editors with our fingers\n\n#### Does this tie your workflow to Sketch? What about other design tools?\n\nTreating Sketch primarily as a _rendering target_ for cross-platform components pushes you to store components & style in code — you're then free to build translation layers for any other design tool that exposes an API.\n\nGiven equivalent API support it would be possible to simultaneously render to `react-sketchapp`, `react-figma`, `react-xd` & `react-quark`.\n\nRather than tying us into one design tools, reasoning about design in cross-platform primitives _frees us_ to use the tooling we want.\n\n#### Can I use [TypeScript](https://www.typescriptlang.org/)?\n\nOf course!\n\nTypeScript definitions are published with the npm package.\n" }, { "path": "docs/README.md", "content": "## Table of Contents\n\n- [Introduction](/README.md)\n- [Guides](/docs/guides/README.md)\n - [Getting Started](/docs/guides/getting-started.md)\n - [Using `skpm` as a build system](/docs/guides/using-skpm.md)\n - [Rendering](/docs/guides/rendering.md)\n - [Data Fetching](/docs/guides/data-fetching.md)\n - [Universal Rendering](/docs/guides/universal-rendering.md)\n - [Styling](/docs/guides/styling.md)\n- [API Reference](/docs/API.md)\n - [render](/docs/API.md#renderelement-container)\n - [renderToJSON](/docs/API.md#rendertojsonelement)\n - [Document](/docs/API.md#document)\n - [Page](/docs/API.md#page)\n - [Artboard](/docs/API.md#artboard)\n - [Image](/docs/API.md#image)\n - [RedBox](/docs/API.md#redbox)\n - [Svg](/docs/API.md#svg)\n - [Text](/docs/API.md#text)\n - [View](/docs/API.md#view)\n - [Platform](/docs/API.md#platform)\n - [StyleSheet](/docs/API.md#stylesheet)\n - [TextStyles](/docs/API.md#textstyles)\n - [Symbols](/docs/API.md#symbols)\n- [Examples](/docs/examples.md)\n- [Change Log](/CHANGELOG.md)\n- [FAQ](/docs/FAQ.md)\n- [Contributing](https://github.com/airbnb/react-sketchapp/blob/master/.github/CONTRIBUTING.md)\n" }, { "path": "docs/examples.md", "content": "# Examples\n\n`react-sketchapp` is bundled with lots of examples!\n\n### [Basic setup](https://github.com/airbnb/react-sketchapp/tree/master/examples/basic-setup)\n\n![Basic setup](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)\n\n### [Style guide](https://github.com/airbnb/react-sketchapp/tree/master/examples/styleguide)\n\n![Style guide](https://cloud.githubusercontent.com/assets/591643/24778196/2a4ef41a-1ade-11e7-9805-8d974bbfd708.png)\n\n### [Profile Cards](https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards)\n\n![examples-profile-cards](https://cloud.githubusercontent.com/assets/591643/24778173/0dd7c03c-1ade-11e7-8bad-1ad51fe1033e.png)\n\n### [Profile Cards on Web + Sketch w/ `react-primitives`](https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives)\n\n![examples-primitives](https://cloud.githubusercontent.com/assets/591643/24778174/0dd9d214-1ade-11e7-9372-fa8b578a0b48.png)\n\n### [Profile Cards w/ `react-with-styles`](https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-react-with-styles)\n\n![examples-primitives](https://cloud.githubusercontent.com/assets/591643/24778174/0dd9d214-1ade-11e7-9372-fa8b578a0b48.png)\n\n### [Profile Cards w/ GraphQL](https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-graphql)\n\n![Profile Cards w/ GraphQL](https://cloud.githubusercontent.com/assets/591643/24778175/0dda21d8-1ade-11e7-9545-13b472263ff6.png)\n\n### [Venue Search on Web + Sketch w/ `react-primitives`, Foursquare & Google Maps](https://github.com/airbnb/react-sketchapp/tree/master/examples/foursquare-maps)\n\n![foursquare-maps](https://cloud.githubusercontent.com/assets/591643/25052095/f666928e-2104-11e7-805c-a3c73ffcabcb.png)\n\n### [Generative Colors w/ Chroma-JS](https://github.com/airbnb/react-sketchapp/tree/master/examples/colors)\n\n![examples-colors](https://cloud.githubusercontent.com/assets/591643/24778153/efc76cdc-1add-11e7-93dd-0351f8f428c0.png)\n\n### [Timeline w/ AirTable](https://github.com/airbnb/react-sketchapp/tree/master/examples/timeline-airtable)\n\n![timeline-AirTable](https://cloud.githubusercontent.com/assets/21080/25830456/cdc67bf8-3411-11e7-8998-fdef507ab0d2.png)\n\n### [Basic setup w/ Typescript](https://github.com/airbnb/react-sketchapp/tree/master/examples/basic-setup-typescript)\n\n![typings](./assets/tooling-typings-vs-code.png) ![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)\n" }, { "path": "docs/guides/README.md", "content": "# Guides\n\nHow to use `react-sketchapp` for fun and profit.\n\n- [Getting Started](getting-started.md)\n- [Using `skpm` as a build system](using-skpm.md)\n- [Rendering](rendering.md)\n- [Data Fetching](data-fetching.md)\n- [Universal Rendering](universal-rendering.md)\n- [Styling](styling.md)\n" }, { "path": "docs/guides/data-fetching.md", "content": "# Data Fetching\n\nPull real data from an API with `fetch` or GraphQL.\n\n## Fetch\n\n[Full example](https://github.com/airbnb/react-sketchapp/tree/master/examples/foursquare-maps)\n\n`skpm` automatically provides the [Sketch `fetch` polyfill](https://github.com/skpm/sketch-polyfill-fetch) — just use `fetch` as usual.\n\n```js\nimport fetch from 'sketch-module-fetch-polyfill';\nimport { render } from 'react-sketchapp';\nimport MyApp from './MyApp';\n\nexport default context => {\n fetch('https://reqres.in/api/users')\n .then(res => res.json())\n .then(data => {\n render(, context.document.currentPage());\n });\n};\n```\n\n## GraphQL\n\n[Full example](https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-graphql)\n\n[`gql-sketch`](https://github.com/jongold/gql-sketch) provides a convenient interface for interacting with GraphQL APIs.\n\n```bash\nnpm install gql-sketch --save\n```\n\n```js\nimport Client from 'gql-sketch';\nimport { render } from 'react-sketchapp';\nimport MyApp from './MyApp';\n\nexport default context => {\n Client('http://example.com/my-graphql-endpoint')\n .query(\n `\n {\n allFilms {\n films {\n title,\n actor,\n catchphrase\n }\n }\n }\n `,\n )\n .then(({ allFilms }) => {\n render(, context.document.currentPage());\n });\n};\n```\n" }, { "path": "docs/guides/getting-started.md", "content": "# Getting Started\n\nYou can create a `react-sketchapp` project with `skpm`, by cloning a ready-made [example](../examples.md), or by manually setting up the `package.json` and `manifest.json` scripts (advanced usage).\n\n## Environment Setup\n\nYou will need npm, Node and Sketch.\n\n- Terminal (if you’re new to the command line, this [guide](https://medium.com/32pixels/the-designers-guide-to-the-osx-command-prompt-71b0016cac31) may help)\n - You need to make sure `git` is installed – type `git --version` in your Terminal to check if it's installed, if it isn’t, you should be prompted to install via “command line developer tools”.\n- Code editor e.g. [VSCode](https://code.visualstudio.com/), [Atom](https://atom.io/)\n- Node.js & `npm` – [install with Homebrew](https://nodejs.org/en/download/package-manager/#macos) (or install with [Node Version Manager](https://nodejs.org/en/download/package-manager/#nvm))\n- [Sketch](https://www.sketch.com/)\n - requires macOS\n\n## Creating a Project With Skpm\n\n**Replace** `my-app` with your desired project name:\n\n### Installation\n\n```bash\nnpm install --global skpm\nskpm create my-app --template=airbnb/react-sketchapp # template is a GitHub repo\ncd my-app\n```\n\n### Setup\n\nYou can now open `my-app` in your code editor of choice. You will see a `src` folder with a `manifest.json` file and Sketch entrypoint (e.g. `my-command.js`). If you wish to rename `my-command.js`, you can do so and update the file name in `script` in `manifest.json`\n\nExample modifications (assuming we want to rename the entrypoint file to `main.js` and don't want to have sub-commands):\n\n`src/manifest.json`\n\n```diff\n \"commands\": [\n {\n- \"name\": \"my-command\",\n+ \"name\": \"My App Name: Sketch Components\"\n- \"identifier\": \"my-command-identifier\",\n+ \"identifier\": \"main\",\n- \"script\": \"./my-command.js\"\n+ \"script\": \"./main.js\"\n }\n ],\n \"menu\": {\n- \"title\": \"my-app\",\n- \"items\": [\n- \"my-command-identifier\"\n- ]\n+ \"isRoot\": true,\n+ \"items\": [\n+ \"main\"\n+ ]\n+ }\n }\n```\n\n### Rendering to Sketch\n\nTo render your app to Sketch, open the Sketch application, create a new blank document, then go to your Terminal and run:\n\n```bash\n# Make sure you've already done `cd my-app`\nnpm run render\n```\n\nYou can pass the target Sketch container layer (i.e. document, group or page object) to the `render` function in your Sketch plugin entrypoint file, using the Sketch API: `render(, sketch.getSelectedDocument()`.\n\nFor more info on rendering to Sketch, see the [rendering](./rendering.md) page.\n" }, { "path": "docs/guides/rendering.md", "content": "# Rendering Guide\n\nYou can use the Sketch API to select Sketch containers such as documents, pages or groups, to pass through to the `render` function.\n\n### Rendering to Multiple Pages or New Documents\n\n`src/my-command.js` (or whatever file your Sketch plugin entrypoint is).\n\n```js\nimport React from 'react';\nimport { render, Document, Page } from 'react-sketchapp';\n\n// wrapper is required if you want to use multiple pages\nconst App = () => (\n \n \n \n Hello World!\n \n \n \n \n Hello World, again!\n \n \n \n);\n\nexport default () => {\n const documents = sketch.getDocuments();\n const document =\n sketch.getSelectedDocument() || new sketch.Document(); // get the current document // or create a new document\n};\n```\n\n## Rendering to Selected Document\n\nThis will render to the last active document. If there is no document open, document will be undefined and you will get an error, so you can add `|| new sketch.Document()` as a fallback to handle this.\n\n```js\nimport sketch from 'sketch';\nimport { render } from 'react-sketchapp';\n\n// const App = () => ... or import App from './App';\n\nexport default () => {\n const document = sketch.getSelectedDocument();\n\n render(, document);\n};\n```\n\n## Rendering to Document by Name\n\nWe can select a document by name, by looping through `sketch.getDocuments()` and checking `doc.path` inside the loop.\n\n```js\nimport path from 'path';\nimport sketch from 'sketch';\nimport { render } from 'react-sketchapp';\n\n// const App = () => ... or import App from './App';\n\nconst getDocumentByName = name => {\n return (sketch.getDocuments() || []).find(doc => {\n return doc.path && path.basename(doc.path, '.sketch') === name;\n });\n};\n\nexport default () => {\n const document = getDocumentByName('My App Design') || new sketch.Document(); // Fallback to new document if document not found\n\n render(, document);\n};\n```\n" }, { "path": "docs/guides/styling.md", "content": "# Styling\n\nComponents use CSS styles + FlexBox layout.\n\n## Layout Styles\n\n| property | type | supported? |\n| --- | --- | --- |\n| `width` | `number` | `percentage` | ✅ |\n| `height` | `number` | `percentage` | ✅ |\n| `top` | `number` | `percentage` | ✅ |\n| `left` | `number` | `percentage` | ✅ |\n| `right` | `number` | `percentage` | ✅ |\n| `bottom` | `number` | `percentage` | ✅ |\n| `minWidth` | `number` | `percentage` | ✅ |\n| `maxWidth` | `number` | `percentage` | ✅ |\n| `minHeight` | `number` | `percentage` | ✅ |\n| `maxHeight` | `number` | `percentage` | ✅ |\n| `margin` | `number` | `percentage` | ✅ |\n| `marginVertical` | `number` | `percentage` | ✅ |\n| `marginHorizontal` | `number` | `percentage` | ✅ |\n| `marginTop` | `number` | `percentage` | ✅ |\n| `marginBottom` | `number` | `percentage` | ✅ |\n| `marginLeft` | `number` | `percentage` | ✅ |\n| `marginRight` | `number` | `percentage` | ✅ |\n| `padding` | `number` | `percentage` | ✅ |\n| `paddingVertical` | `number` | `percentage` | ✅ |\n| `paddingHorizontal` | `number` | `percentage` | ✅ |\n| `paddingTop` | `number` | `percentage` | ✅ |\n| `paddingBottom` | `number` | `percentage` | ✅ |\n| `paddingLeft` | `number` | `percentage` | ✅ |\n| `paddingRight` | `number` | `percentage` | ✅ |\n| `borderWidth` | `number` | `percentage` | ✅ |\n| `borderTopWidth` | `number` | `percentage` | ✅ |\n| `borderRightWidth` | `number` | `percentage` | ✅ |\n| `borderBottomWidth` | `number` | `percentage` | ✅ |\n| `borderLeftWidth` | `number` | `percentage` | ✅ |\n| `position` | `absolute` | `relative` | ✅ |\n| `flexDirection` | `row` | `row-reverse` | `column` | `column-reverse` | ✅ |\n| `flexWrap` | `wrap` | `nowrap` | ✅ |\n| `justifyContent` | `flex-start` | `flex-end` | `center` | `space-between` | `space-around` | ✅ |\n| `alignItems` | `flex-start` | `flex-end` | `center` | `stretch` | ✅ |\n| `alignSelf` | `auto` | `flex-start` | `flex-end` | `center` | `stretch` | ✅ |\n| `overflow` | `visible` | `hidden` | `scroll` | ✅ |\n| `flex` | `number` | ✅ |\n| `flexGrow` | `number` | ✅ |\n| `flexShrink` | `number` | ✅ |\n| `flexBasis` | `number` | ✅ |\n| `aspectRatio` | `number` | ⛔️ |\n| `zIndex` | `number` | ✅ |\n| `backfaceVisibility` | `visible` | `hidden` | ⛔️ |\n| `backgroundColor` | `Color` | ✅ |\n| `borderColor` | `Color` | ✅ |\n| `borderTopColor` | `Color` | ✅ |\n| `borderRightColor` | `Color` | ✅ |\n| `borderBottomColor` | `Color` | ✅ |\n| `borderLeftColor` | `Color` | ✅ |\n| `borderRadius` | `number` | `percentage` | ✅ |\n| `borderTopLeftRadius` | `number` | `percentage` | ✅ |\n| `borderTopRightRadius` | `number` | `percentage` | ✅ |\n| `borderBottomLeftRadius` | `number` | `percentage` | ✅ |\n| `borderBottomRightRadius` | `number` | `percentage` | ✅ |\n| `borderStyle` | `solid` | `dotted` | `dashed` | ✅ |\n| `borderWidth` | `number` | `percentage` | ✅ |\n| `borderTopWidth` | `number` | `percentage` | ✅ |\n| `borderRightWidth` | `number` | `percentage` | ✅ |\n| `borderBottomWidth` | `number` | `percentage` | ✅ |\n| `borderLeftWidth` | `number` | `percentage` | ✅ |\n| `opacity` | `number` | ✅ |\n\n## Shadow Styles\n\n| property | type | supported? |\n| --- | --- | --- |\n| `shadowColor` | `Color` | ✅ |\n| `shadowOffset` | `{ width: number, height: number }` | ✅ |\n| `shadowOpacity` | `number` | ✅ |\n| `shadowRadius` | `number` | `percentage` | ✅ |\n\n## Type Styles\n\n| property | type | supported? |\n| --- | --- | --- |\n| `color` | `Color` | ✅ |\n| `fontFamily` | `string` | ✅ |\n| `fontSize` | `number` | ✅ |\n| `fontStyle` | `normal` | `italic` | ✅ |\n| `fontWeight` | `string` | `number` | ✅ |\n| `textDecorationLine` | `none` | `underline` | `double` | `line-through` | ✅ |\n| `textShadowOffset` | `{ width: number, height: number }` | ✅ |\n| `textShadowRadius` | `number` | ✅ |\n| `textShadowColor` | `Color` | ✅ |\n| `textTransform` | `none` | `uppercase` | `lowercase` | ✅ |\n| `letterSpacing` | `number` | ✅ |\n| `lineHeight` | `number` | ✅ |\n| `textAlign` | `auto` | `left` | `right` | `center` | `justify` | ✅ |\n| `writingDirection` | `auto` | `ltr` | `rtl` | ⛔️ |\n| `opacity` | `number` | ✅ |\n| `percentage` | `points` | `percentages` | ✅ |\n\n## Styles Specific To `react-sketchapp`\n\nSome properties are Sketch specific and won't work cross-platform but give you a better control over your components.\n\n| property | type | supported? |\n| --- | --- | --- |\n| `shadowSpread` | `number` | ✅ |\n| `shadowInner` | `boolean` | ✅ |\n\n## Examples\n\nStyles can be passed to components as plain objects, or via [`StyleSheet`](/docs/API.md).\n\n```js\nimport { View, StyleSheet } from 'react-sketchapp';\n\n// inline props\n\n\n// plain JS object\nconst style = {\n backgroundColor: 'hotPink',\n width: 300,\n}\n\n\n\n// StyleSheet\nconst styles = StyleSheet.create({\n foo: {\n backgroundColor: 'hotPink',\n width: 300,\n }\n})\n\n\n\n```\n\nYou can use variables in your styles just like a standard React application:\n\n```javascript\nconst colors = {\n Haus: '#F3F4F4',\n Night: '#333',\n Sur: '#96DBE4',\n Peach: '#EFADA0',\n Pear: '#93DAAB',\n};\n\n\n {Object.keys(colors).map(name => (\n \n ))}\n;\n```\n" }, { "path": "docs/guides/universal-rendering.md", "content": "# Universal Rendering\n\nThe `react-sketchapp` components have been architected to provide the same metaphors, layout system & interfaces as `react-native`, so there is less switching cost between platforms. However, it is also possible to render the _same code_ across multiple platforms. We call this _Universal Rendering_.\n\nThe [`react-primitives`](https://github.com/lelandrichardson/react-primitives) project provides consistent primitive interfaces across platforms, and is the simplest way to achieve Universal Rendering.\n\n## Setup\n\nReact Primitives works out-of-the-box with `react-dom` & `react-native`, and `react-sketchapp` (when using `skpm`).\n\nInstall `react-primitives` and its peer dependencies\n\n```bash\nnpm install --save react-primitives react react-dom react-native react-sketchapp\n```\n\n## Creating your components\n\nImport base primitives from `react-primitives` rather than `react-sketchapp` / `react-native` — e.g.\n\n```diff\n/**\n * components/Row.js\n * Define your component using platform-independent primitives\n */\nimport React from 'react';\n- import { View, Text, StyleSheet } from 'react-sketchapp';\n+ import { View, Text, StyleSheet } from 'react-primitives';\n\nconst Row = props =>\n \n { props.title }\n { props.subtitle }\n \n\nexport default Row;\n```\n\n## Importing existing components\n\nIf you have a large existing React Native component library, you might enjoy using a `codemod` to automatically convert `react-native` imports to `react-primitives` — [a proof-of-concept `codemod` is provided on ASTExplorer](https://astexplorer.net/#/gist/68d1b3ae3ec7b0a088452a7d38643dc4/latest).\n\n## Rendering\n\nEach platform will require an entry point with its respective `render` / registration call - e.g:\n\n```js\n/**\n * dom-entry.js\n * Standard ReactDOM setup for the browser\n */\nimport React from 'react';\nimport { render } from 'react-dom';\nimport Row from './components/Row';\n\nrender(, document.getElementById('root'));\n```\n\n```js\n/**\n * native-entry.js\n * Standard ReactNative setup\n */\nimport React from 'react';\nimport { AppRegistry } from 'react-native';\nimport Row from './components/Row';\n\nAppRegistry.registerComponent('Row', () => Row);\n```\n\n```js\n/**\n * sketch-entry.js\n * same setup as other examples\n */\nimport React from 'react';\nimport { render } from 'react-sketchapp';\nimport Row from './components/Row';\n\nexport default context => {\n render(, context.document.currentPage());\n};\n```\n\nReact Primitives only provides components that make sense on every platform, so Sketch-specific concepts like `TextStyles` and `` should be imported from the main `react-sketchapp` package. You can mix-and-match them as necessary - e.g.\n\n```js\n/**\n * sketch-entry.js\n * same setup as other examples\n */\nimport React from 'react';\nimport { Artboard, render } from 'react-sketchapp';\nimport Row from './components/Row'; // built with react-primitives\n\nexport default context => {\n render(\n \n \n ,\n context.document.currentPage(),\n );\n};\n```\n" }, { "path": "docs/guides/using-skpm.md", "content": "# Using `skpm` as a build system\n\nSketch allows arbitrary plugins written in [CocoaScript](http://developer.sketchapp.com/guides/cocoascript) to run. [`skpm`](https://github.com/skpm/skpm) is a utility to create, build and manage Sketch plugins. It takes care of transforming your JavaScript into CocoaScript and makes sure the context it is running in is as close as possible to what you are used to when writing JavaScript.\n\n## Installation\n\n> Important: Node.JS > V6.x is a minimum requirement.\n\n```bash\nnpm install -g skpm\n```\n\n## Usage\n\n### Creating a new plugin\n\n```bash\nskpm create my-plugin --template=airbnb/react-sketchapp\n```\n\n> A note on templates\n>\n> The purpose of skpm templates are to provide opinionated development tooling setups so that users can get started with actual plugin code as fast as possible.\n>\n> - [`airbnb/react-sketchapp`](https://github.com/airbnb/react-sketchapp) is a simple template to get started with `react-sketchapp`\n>\n> 💁 Tip: Any Github repo with a 'template' folder can be used as a custom template: `skpm create --template=/`\n\n### Build the plugin\n\nOnce the installation is done, you can run some commands inside the project folder:\n\n```bash\nnpm run build\n```\n\nTo watch for changes:\n\n```bash\nnpm run watch\n```\n\nAdditionally, if you wish to run the plugin every time it is built:\n\n```bash\nnpm run render\n```\n\n### View the plugin's log\n\nTo view the output of your `console.log`, you have a few different options:\n\n- Using the [sketch-dev-tools](https://github.com/skpm/sketch-dev-tools)\n- Open Console.app and look for the sketch logs\n- Look at the `~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log` file\n\nSkpm provides a convenient way to do the latter:\n\n```bash\nskpm log\n\n -f, -F The `-f` option causes tail to not stop when end of file is\n reached, but rather to wait for additional data to be appended\n to the input. [boolean] [default: \"false\"]\n --number, -n Shows `number` lines of the logs. [number]\n```\n\n## Custom Configuration\n\n### Babel\n\nTo customize Babel, you have two options:\n\n- You may create a [`.babelrc`](https://babeljs.io/docs/usage/babelrc) file in your project's root directory. Any settings you define here will overwrite matching config-keys within skpm preset. For example, if you pass a \"presets\" object, it will replace & reset all Babel presets that skpm defaults to.\n\n- If you'd like to modify or add to the existing Babel config, you must use a `webpack.skpm.config.js` file. Visit the [`webpack`](#webpack) section for more info.\n\n### `webpack`\n\nTo customize `webpack` create `webpack.skpm.config.js` file which exports function that will change `webpack`'s config.\n\n```js\n/**\n * Function that mutates original webpack config.\n * Supports asynchronous changes when promise is returned.\n *\n * @param {object} config - original webpack config.\n * @param {boolean} isPluginCommand - wether the config is for a plugin command or a resource\n **/\nmodule.exports = function(config, isPluginCommand) {\n /** you can change config here **/\n};\n```\n" }, { "path": "examples/.eslintrc", "content": "{\n \"rules\": {\n \"import/no-unresolved\": 0,\n \"import/extensions\": 0\n }\n}\n" }, { "path": "examples/.gitignore", "content": "**/*.sketchplugin\n" }, { "path": "examples/basic-setup/README.md", "content": "# Basic setup\n\n## How to use\n\nDownload the example or [clone the repo](http://github.com/airbnb/react-sketchapp):\n\n```bash\ncurl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz --strip=2 react-sketchapp-master/examples/basic-setup\ncd basic-setup\n```\n\nInstall the dependencies\n\n```bash\nnpm install\n```\n\nThen, open Sketch and navigate to `Plugins → react-sketchapp: Basic skpm Example`\n\nRun with live reloading in Sketch, need a new sketch doc open\n\n```bash\nnpm run render\n```\n\n## The idea behind the example\n\n[`skpm`](https://github.com/skpm/skpm) is the easiest way to build `react-sketchapp` projects - this is a minimal example of it in use.\n\n![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)\n" }, { "path": "examples/basic-setup/package.json", "content": "{\n \"name\": \"basic-setup\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"skpm\": {\n \"main\": \"basic-setup.sketchplugin\",\n \"manifest\": \"src/manifest.json\"\n },\n \"scripts\": {\n \"build\": \"skpm-build\",\n \"watch\": \"skpm-build --watch\",\n \"render\": \"skpm-build --watch --run\",\n \"render:once\": \"skpm-build --run\",\n \"postinstall\": \"npm run build && skpm-link\"\n },\n \"author\": \"Jon Gold \",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@skpm/builder\": \"^0.7.5\"\n },\n \"dependencies\": {\n \"chroma-js\": \"^1.2.2\",\n \"prop-types\": \"^15.5.8\",\n \"react\": \"^16.3.2\",\n \"react-sketchapp\": \"^3.0.0\",\n \"react-test-renderer\": \"^16.3.2\"\n }\n}\n" }, { "path": "examples/basic-setup/src/manifest.json", "content": "{\n\t\"compatibleVersion\": 3,\n\t\"bundleVersion\": 1,\n\t\"commands\": [\n\t\t{\n\t\t\t\"name\": \"react-sketchapp: Basic Setup\",\n\t\t\t\"identifier\": \"main\",\n\t\t\t\"script\": \"./my-command.js\"\n\t\t}\n\t],\n\t\"menu\": {\n\t\t\"isRoot\": true,\n\t\t\"items\": [\n\t\t\t\"main\"\n\t\t]\n\t}\n}\n" }, { "path": "examples/basic-setup/src/my-command.js", "content": "import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { render, Artboard, Text, View } from 'react-sketchapp';\nimport chroma from 'chroma-js';\n\n// take a hex and give us a nice text color to put over it\nconst textColor = (hex) => {\n const vsWhite = chroma.contrast(hex, 'white');\n if (vsWhite > 4) {\n return '#FFF';\n }\n return chroma(hex).darken(3).hex();\n};\n\nconst Swatch = ({ name, hex }) => (\n \n \n {name}\n \n \n {hex}\n \n \n);\n\nconst Color = {\n hex: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n};\n\nSwatch.propTypes = Color;\n\nconst Document = ({ colors }) => (\n \n {Object.keys(colors).map((color) => (\n \n ))}\n \n);\n\nDocument.propTypes = {\n colors: PropTypes.objectOf(PropTypes.string).isRequired,\n};\n\nexport default () => {\n const colorList = {\n Haus: '#F3F4F4',\n Night: '#333',\n Sur: '#96DBE4',\n 'Sur Dark': '#24828F',\n Peach: '#EFADA0',\n 'Peach Dark': '#E37059',\n Pear: '#93DAAB',\n 'Pear Dark': '#2E854B',\n };\n\n render(, context.document.currentPage());\n};\n" }, { "path": "examples/basic-setup/webpack.skpm.config.js", "content": "const path = require('path');\n\nmodule.exports = (config) => {\n if (process.env.LOCAL_DEV) {\n config.resolve = {\n ...config.resolve,\n alias: {\n ...config.resolve.alias,\n 'react-sketchapp': path.resolve(__dirname, '../../'),\n },\n };\n }\n};\n" }, { "path": "examples/basic-setup-typescript/.gitignore", "content": "node_modules\n.ts-compiled\n" }, { "path": "examples/basic-setup-typescript/README.md", "content": "# Basic setup with Typescript\n\nThis example was adapted from the [basic-setup example](../basic-setup).\n\n> **NOTE:** you may also use the typings _without_ using typescript if you editor supports it. [See here](../../docs/guides/community-provided-tooling.md).\n\n## How to use\n\nDownload the example or [clone the repo](http://github.com/airbnb/react-sketchapp):\n\n```bash\ncurl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz --strip=2 react-sketchapp-master/examples/basic-setup-typescript\ncd basic-setup-typescript\n```\n\nInstall the dependencies\n\n```bash\nnpm install\n```\n\nRun with live reloading in Sketch, need a new sketch doc open. This will put both skpm and the Typescript compiler in watch mode:\n\n```bash\nnpm run render\n```\n\nTo clean the `.ts-compiled` directory, you can run:\n\n```bash\nnpm run typescript:clean\n```\n\n## How the typescript works\n\nThis example compiles the typescript into javascript that can be used by `skpm`. The compiled typescript files get output into the `.ts-compiled` directory. The `manifest.json` of `skpm` then simply points to the compiled javascript. To get live re-loading working, use the typescript compiler in watch mode. Whenever you save a typescript file, the typescript compiler will output javascript to the `.ts-compiled` directory. Once `skpm` notices the javascript file in `.ts-compiled` changes, it will re-build and re-render.\n\nHere is a reference `tsconfig.json`:\n\n```json\n{\n \"compilerOptions\": {\n \"target\": \"es2015\",\n \"module\": \"es2015\",\n \"jsx\": \"react-native\",\n \"allowJs\": true,\n \"strict\": true,\n \"outDir\": \"./.ts-compiled\",\n \"rootDir\": \"./src\",\n \"allowSyntheticDefaultImports\": true,\n \"moduleResolution\": \"node\"\n },\n \"include\": [\n \"./src/**/*\"\n ]\n}\n```\n" }, { "path": "examples/basic-setup-typescript/manifest.json", "content": "{\n\t\"compatibleVersion\": 3,\n\t\"bundleVersion\": 1,\n\t\"commands\": [\n\t\t{\n\t\t\t\"name\": \"react-sketchapp: Basic Setup with Typescript\",\n\t\t\t\"identifier\": \"main\",\n\t\t\t\"script\": \"./.ts-compiled/my-command.js\"\n\t\t}\n\t],\n\t\"menu\": {\n\t\t\"isRoot\": true,\n\t\t\"items\": [\n\t\t\t\"main\"\n\t\t]\n\t}\n}" }, { "path": "examples/basic-setup-typescript/package.json", "content": "{\n \"name\": \"basic-setup-typescript\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"skpm\": {\n \"main\": \"basic-setup.sketchplugin\",\n \"manifest\": \"./manifest.json\"\n },\n \"scripts\": {\n \"build\": \"npm run typescript:once && skpm-build\",\n \"watch\": \"skpm-build --watch & npm run typescript\",\n \"render\": \"skpm-build --watch --run & npm run typescript\",\n \"render:once\": \"npm run typescript:once && skpm-build --run\",\n \"postinstall\": \"npm run build && skpm-link\",\n \"typescript\": \"tsc --watch\",\n \"typescript:once\": \"tsc\",\n \"typescript:clean\": \"rm -rf ./.ts-compiled\"\n },\n \"author\": \"Jon Gold \",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@skpm/builder\": \"^0.4.0\",\n \"@types/chroma-js\": \"^1.3.3\",\n \"typescript\": \"^3.7.2\"\n },\n \"dependencies\": {\n \"chroma-js\": \"^1.2.2\",\n \"prop-types\": \"^15.5.8\",\n \"react\": \"^16.3.2\",\n \"react-sketchapp\": \"^3.0.0\",\n \"react-test-renderer\": \"^16.3.2\"\n }\n}\n" }, { "path": "examples/basic-setup-typescript/src/my-command.tsx", "content": "import * as React from 'react';\nimport sketch from 'sketch';\nimport { render, Artboard, Text, View } from 'react-sketchapp';\nimport chroma from 'chroma-js';\n\n// take a hex and give us a nice text color to put over it\nconst textColor = (hex: string) => {\n const vsWhite = chroma.contrast(hex, 'white');\n if (vsWhite > 4) {\n return '#FFF';\n }\n return chroma(hex).darken(3).hex();\n};\n\ninterface SwatchProps {\n name: string;\n hex: string;\n}\n\nconst Swatch = ({ name, hex }: SwatchProps) => (\n \n \n {name}\n \n \n {hex}\n \n \n);\n\ninterface DocumentProps {\n colors: { [key: string]: string };\n}\nconst Document = ({ colors }: DocumentProps) => (\n \n {Object.keys(colors).map((color) => (\n \n ))}\n \n);\n\nexport default () => {\n const colorList = {\n Haus: '#F3F4F4',\n Night: '#333',\n Sur: '#96DBE4',\n 'Sur Dark': '#24828F',\n Peach: '#EFADA0',\n 'Peach Dark': '#E37059',\n Pear: '#93DAAB',\n 'Pear Dark': '#2E854B',\n 'TypeScript Blue': '#007ACC',\n };\n\n render(, sketch.getSelectedDocument().selectedPage);\n};\n" }, { "path": "examples/basic-setup-typescript/src/types/sketch.d.ts", "content": "declare module 'sketch';\n" }, { "path": "examples/basic-setup-typescript/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es2015\",\n \"module\": \"es2015\",\n \"jsx\": \"react-native\",\n \"allowJs\": true,\n \"strict\": true,\n \"outDir\": \"./.ts-compiled\",\n \"rootDir\": \"./src\",\n \"allowSyntheticDefaultImports\": true,\n \"moduleResolution\": \"node\"\n },\n \"include\": [\n \"./src/**/*\"\n ]\n}\n" }, { "path": "examples/basic-setup-typescript/webpack.skpm.config.js", "content": "const path = require('path');\n\nmodule.exports = (config) => {\n if (process.env.LOCAL_DEV) {\n config.resolve = {\n ...config.resolve,\n alias: {\n ...config.resolve.alias,\n 'react-sketchapp': path.resolve(__dirname, '../../'),\n },\n };\n }\n};\n" }, { "path": "examples/basic-svg/README.md", "content": "# Basic SVG example\n\n## How to use\n\nDownload the example or [clone the repo](http://github.com/airbnb/react-sketchapp):\n\n```bash\ncurl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz --strip=2 react-sketchapp-master/examples/basic-svg\ncd basic-svg\n```\n\nInstall the dependencies\n\n```bash\nnpm install\n```\n\nRun with live reloading in Sketch, need a new sketch doc open\n\n```bash\nnpm run render\n```\n\nOr, to install as a Sketch plugin:\n\n```bash\nnpm run build\nnpm run link-plugin\n```\n\nThen, open Sketch and navigate to `Plugins → react-sketchapp: Basic SVG Example`\n\n## The idea behind the example\n\n[`skpm`](https://github.com/sketch-pm/skpm) is the easiest way to build `react-sketchapp` projects - this is a minimal example of it in use.\n\n![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)\n" }, { "path": "examples/basic-svg/package.json", "content": "{\n \"name\": \"basic-svg\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"skpm\": {\n \"main\": \"basic-svg.sketchplugin\",\n \"manifest\": \"src/manifest.json\"\n },\n \"scripts\": {\n \"build\": \"skpm-build\",\n \"watch\": \"skpm-build --watch\",\n \"render\": \"skpm-build --watch --run\",\n \"render:once\": \"skpm-build --run\",\n \"postinstall\": \"npm run build && skpm-link\"\n },\n \"author\": \"Jon Gold \",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@skpm/builder\": \"^0.7.5\"\n },\n \"dependencies\": {\n \"prop-types\": \"^15.5.8\",\n \"react\": \"^16.3.2\",\n \"react-sketchapp\": \"^3.0.0\",\n \"react-test-renderer\": \"^16.3.2\"\n }\n}\n" }, { "path": "examples/basic-svg/src/manifest.json", "content": "{\n\t\"compatibleVersion\": 3,\n\t\"bundleVersion\": 1,\n\t\"commands\": [\n\t\t{\n\t\t\t\"name\": \"react-sketchapp: Basic SVG\",\n\t\t\t\"identifier\": \"main\",\n\t\t\t\"script\": \"./my-command.js\"\n\t\t}\n\t],\n\t\"menu\": {\n\t\t\"isRoot\": true,\n\t\t\"items\": [\n\t\t\t\"main\"\n\t\t]\n\t}\n}\n" }, { "path": "examples/basic-svg/src/my-command.js", "content": "import * as React from 'react';\nimport { render, Artboard, Svg } from 'react-sketchapp';\n\nconst Document = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default () => {\n render(, context.document.currentPage());\n};\n" }, { "path": "examples/basic-svg/webpack.skpm.config.js", "content": "const path = require('path');\n\nmodule.exports = (config) => {\n if (process.env.LOCAL_DEV) {\n config.resolve = {\n ...config.resolve,\n alias: {\n ...config.resolve.alias,\n 'react-sketchapp': path.resolve(__dirname, '../../'),\n },\n };\n }\n};\n" }, { "path": "examples/colors/README.md", "content": "# Generative Colors w/ chroma-js\n\n## How to use\n\nDownload the example or [clone the repo](http://github.com/airbnb/react-sketchapp):\n\n```bash\ncurl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz --strip=2 react-sketchapp-master/examples/colors\ncd colors\n```\n\nInstall the dependencies\n\n```bash\nnpm install\n```\n\nThen, open Sketch and navigate to `Plugins → react-sketchapp: Generative Colors`\n\nRun with live reloading in Sketch, need a new sketch doc open\n\n```bash\nnpm run render\n```\n\n## The idea behind the example\n\nCalculating color scales is pretty tricky in Sketch - have fun with it!\n\n![examples-colors](https://cloud.githubusercontent.com/assets/591643/24778153/efc76cdc-1add-11e7-93dd-0351f8f428c0.png)\n" }, { "path": "examples/colors/package.json", "content": "{\n \"name\": \"colors\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"skpm\": {\n \"main\": \"colors.sketchplugin\",\n \"manifest\": \"src/manifest.json\"\n },\n \"scripts\": {\n \"build\": \"skpm-build\",\n \"watch\": \"skpm-build --watch\",\n \"render\": \"skpm-build --watch --run\",\n \"render:once\": \"skpm-build --run\",\n \"postinstall\": \"npm run build && skpm-link\"\n },\n \"author\": \"Jon Gold \",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"chroma-js\": \"^1.2.2\",\n \"prop-types\": \"^15.5.8\",\n \"ramda\": \"^0.23.0\",\n \"react\": \"^16.3.2\",\n \"react-sketchapp\": \"^3.0.0\",\n \"react-test-renderer\": \"^16.3.2\",\n \"webpack-shell-plugin\": \"^0.5.0\"\n },\n \"devDependencies\": {\n \"@skpm/builder\": \"^0.4.0\"\n }\n}\n" }, { "path": "examples/colors/src/main.js", "content": "import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { render, StyleSheet, View } from 'react-sketchapp';\nimport chroma from 'chroma-js';\nimport { times } from 'ramda';\n\nconst styles = StyleSheet.create({\n container: {\n width: 480,\n height: 480,\n flexDirection: 'row',\n flexWrap: 'wrap',\n alignItems: 'center',\n },\n});\n\nconst Document = ({ colors, steps }) => {\n const color = chroma.scale(colors);\n\n return (\n \n {times((i) => color(i / steps).hex(), steps).map((val, i) => (\n \n ))}\n \n );\n};\nDocument.propTypes = {\n colors: PropTypes.arrayOf(PropTypes.string),\n steps: PropTypes.number,\n};\n\nexport default () => {\n render(\n ,\n context.document.currentPage(),\n );\n};\n" }, { "path": "examples/colors/src/manifest.json", "content": "{\n \"name\": \"colors\",\n \"author\": \"Jon Gold\",\n \"version\": 0.1,\n \"compatibleVersion\": 1,\n \"bundleVersion\": 1,\n \"disableCocoaScriptPreprocessor\": true,\n \"commands\": [\n {\n \"name\": \"react-sketchapp: Generative Colors\",\n \"identifier\": \"main\",\n \"script\": \"main.js\"\n }\n ],\n \"menu\": {\n \"isRoot\": true,\n \"items\": [\n \"main\"\n ]\n }\n}\n" }, { "path": "examples/colors/webpack.skpm.config.js", "content": "const path = require('path');\n\nmodule.exports = (config) => {\n if (process.env.LOCAL_DEV) {\n config.resolve = {\n ...config.resolve,\n alias: {\n ...config.resolve.alias,\n 'react-sketchapp': path.resolve(__dirname, '../../'),\n },\n };\n }\n};\n" }, { "path": "examples/emotion/package.json", "content": "{\n \"name\": \"emotion-example\",\n \"version\": \"1.0.0\",\n \"skpm\": {\n \"main\": \"emotion.sketchplugin\",\n \"manifest\": \"src/manifest.json\"\n },\n \"scripts\": {\n \"build\": \"skpm-build\",\n \"watch\": \"skpm-build --watch\",\n \"render\": \"skpm-build --watch --run\",\n \"render:once\": \"skpm-build --run\",\n \"postinstall\": \"npm run build && skpm-link\"\n },\n \"author\": \"Nitin Tulswani \",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@skpm/builder\": \"^0.4.3\"\n },\n \"dependencies\": {\n \"emotion-primitives\": \"^1.0.0-beta.6\",\n \"react\": \"^16.4.1\",\n \"react-primitives\": \"^0.6.0\",\n \"react-sketchapp\": \"^3.0.0\",\n \"react-test-renderer\": \"^16.3.2\"\n }\n}\n" }, { "path": "examples/emotion/src/manifest.json", "content": "{\n\t\"compatibleVersion\": 3,\n\t\"bundleVersion\": 1,\n\t\"commands\": [\n\t\t{\n\t\t\t\"name\": \"react-sketchapp: emotion\",\n\t\t\t\"identifier\": \"main\",\n\t\t\t\"script\": \"./my-command.js\"\n\t\t}\n\t],\n\t\"menu\": {\n\t\t\"isRoot\": true,\n\t\t\"items\": [\"main\"]\n\t}\n}\n" }, { "path": "examples/emotion/src/my-command.js", "content": "import React from 'react';\nimport emotion from 'emotion-primitives';\nimport { render } from 'react-sketchapp';\n\nconst Container = emotion.View`\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 50px;\n border: 5px solid red;\n background-color: ${(props) => props.theme.backgroundColor}\n`;\n\nconst Description = emotion.Text`\n color: hotpink;\n`;\n\nconst Image = emotion.Image`\n padding: 40px;\n`;\n\nconst emotionLogo = 'https://avatars3.githubusercontent.com/u/31557565?s=400&v=4';\n\nclass App extends React.Component {\n render() {\n return (\n \n \n Emotion Primitives\n \n \n \n );\n }\n}\n\nexport default () => {\n render(, context.document.currentPage());\n};\n" }, { "path": "examples/emotion/webpack.skpm.config.js", "content": "const path = require('path');\n\nmodule.exports = (config) => {\n if (process.env.LOCAL_DEV) {\n config.resolve = {\n ...config.resolve,\n alias: {\n ...config.resolve.alias,\n 'react-sketchapp': path.resolve(__dirname, '../../'),\n },\n };\n }\n};\n" }, { "path": "examples/form-validation/README.md", "content": "# Form Validation\n\n## How to use\n\nDownload the example or [clone the repo](http://github.com/airbnb/react-sketchapp):\n\n```bash\ncurl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz --strip=2 react-sketchapp-master/examples/form-validation\ncd form-validation\n```\n\nInstall the dependencies\n\n```bash\nnpm install\n```\n\nThen, open Sketch and navigate to `Plugins → react-sketchapp: Form Validation`\n\nRun with live reloading in Sketch\n\n```bash\nnpm run render\n```\n\n## The idea behind the example\n\n`react-sketchapp` makes it simple to render all potential states of a web component to sketch.\n\n![examples-form-validation](https://cloud.githubusercontent.com/assets/1606253/25585002/5cff9264-2e90-11e7-80dc-101f10ecad6d.png)\n" }, { "path": "examples/form-validation/package.json", "content": "{\n \"name\": \"form-validation\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"skpm\": {\n \"main\": \"form-validation.sketchplugin\",\n \"manifest\": \"src/manifest.json\"\n },\n \"scripts\": {\n \"build\": \"skpm-build\",\n \"watch\": \"skpm-build --watch\",\n \"render\": \"skpm-build --watch --run\",\n \"render:once\": \"skpm-build --run\",\n \"postinstall\": \"npm run build && skpm-link\",\n \"web\": \"react run src/web.js\"\n },\n \"author\": \"Lloyd Wheeler \",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"prop-types\": \"^15.5.8\",\n \"react\": \"^16.3.2\",\n \"react-dom\": \"^16.3.2\",\n \"react-native\": \"^0.42.3\",\n \"react-primitives\": \"^0.6.0\",\n \"react-sketchapp\": \"^3.0.0\",\n \"react-test-renderer\": \"^16.3.2\"\n },\n \"devDependencies\": {\n \"extract-text-webpack-plugin\": \"^2.1.0\",\n \"nwb\": \"^0.15.6\",\n \"@skpm/builder\": \"^0.4.0\"\n }\n}\n" }, { "path": "examples/form-validation/src/components/Button.js", "content": "import * as React from 'react';\nimport { Text, View } from 'react-primitives';\nimport { spacing, colors, fontFamily } from '../designSystem';\n\nconst buttonStyle = {\n borderRadius: 3,\n boxSizing: 'border-box',\n color: colors.White,\n cursor: 'pointer',\n padding: spacing.Medium,\n width: 300,\n};\n\nconst textStyle = {\n color: colors.White,\n fontFamily,\n fontWeight: 'bold',\n textAlign: 'center',\n};\n\nconst Button = ({ label, backgroundColor }) => (\n \n {label}\n \n);\n\nexport default Button;\n" }, { "path": "examples/form-validation/src/components/Register.js", "content": "import * as React from 'react';\nimport { View, Text, StyleSheet } from 'react-primitives';\nimport { spacing, colors, typeRamp, fontFamily } from '../designSystem';\nimport TextBox from './TextBox';\nimport StrengthMeter from './StrengthMeter';\nimport Button from './Button';\n\nconst styles = StyleSheet.create({\n register: {\n backgroundColor: colors.LightGrey,\n padding: spacing.Large,\n boxSizing: 'border-box',\n },\n heading: {\n color: colors.Purple,\n fontSize: typeRamp.Medium,\n fontFamily,\n fontWeight: 'bold',\n textAlign: 'center',\n marginBottom: spacing.Medium,\n width: 300,\n },\n});\n\nconst Register = ({ session }) => (\n \n Register an Account\n \n \n \n \n