airbnb / react-sketchapp Goto Github PK

Sincerest apologies that this isn't an issue, but holy god- what texteditor theme is this?? I need it. Hex codes? Something? Been looking high and low for something similar and couldn't even get close.

When I set a border radius on a rectangle it renders as expected, however when I export the element as an SVG the border radius is always 8 unless I manually change it in Sketch. See screenshots below. I'm not sure if this would be a react-sketchapp issue though…

How to reproduce:
If you use the basic-setup example included with the repository:

1. add a border radius to the Swatch:

<View
    name={`Swatch ${name}`}
    style={{
      height: 96,
      width: 96,
      margin: 4,
      backgroundColor: hex,
      padding: 8,
      borderRadius: 11,
    }}
  >

2. Choose one of the swatches and change the border radius manually.
3. Export as SVG and view the code.

Sketch version:
43.2

It's been a while since I published docs!

Currently, there's no concept of anything that can 'contain' Artboards.

A hack to get around this is to render multiple times —

Ideally we'd have a <Page> component or something that could hold and arrange multiple artboards

This is a feature request.

It seems that now react-sketchapp could only be used only when all styles are inlined in JSX. This significantly limits its applicability for existing projects that often have separate CSS/SASS/LESS/PostCSS stylesheets and/or use something like Bootstrap.

What if there will be some tool that can parse existing demo site (including ones built with Storybook), grab all actual computed styles from DOM (which means app has to be truly rendered by a headless browser or similar) and then produce a temporary react-sketchapp app which in turn can be converted to Sketch file.

Sounds monstrous but should be quite viable.

Thanks for sharing the project. It seems like an approach that makes a lot of sense when it comes to building complex design systems.

I wanted to share a bit about my workflow and a proposal for how this project could work with symbols.

I have been building a design system that uses Sketch symbols to provide various primitives, such as buttons, fields, checkboxes, containers. The users of this system make a new copy of a file containing all the symbol masters for each project they start. They use the symbols in it to compose their layouts.

Almost all of the symbol masters have 2 versions: a normal version and a "measurement" version. The measurement version has @ appended to the symbol name and contains transparent colored rectangles that represent the margins and paddings of the symbol:

When I saw what React Sketch.app can do, its purpose immediately made sense to me in the context of this type of work. Having a tool generate all permutations of a specific component instead of having to manually compose symbols and create their measurement versions would be a much better workflow.

I'm curious to discuss if the following ideas fit with your plans for this project:

• Similarly to rendering Artboards, React Sketch.app should be able to render Symbol Masters.
• With a system similar to how refs work in React, it should be possible to refer to symbol masters and place instances, e.g. <SymbolInstance master="button-active"/>
• Being able to set the resizing method on a per-element basis within masters as a prop (e.g. stretch, resize-object, etc.) would allow to programmatically define the behaviour of such symbols

Having a "style guide" that is composed out of symbol masters that are defined programmatically has a twofold advantage: designers who are not experienced in programming can directly use the generated file and symbols in it, together with simple plugins such as Auto Layout, to build their comps manually.

Designers who also have a background in programming and need to build much more complex comps can work with the same symbol instances, whose masters are still defined directly in code, and reap the benefits of Sketch's symbols implementation.

Both groups would benefit from having a library that's very flexible, always up to date, and easy to keep free of manual mistakes.

Any thoughts?

Most noticeably, if you don't have an internet connection, trying to render an image crashes Sketch

Expected behavior:

/examples/profile-cards-graphql when installed, executes correctly.

Observed behavior:

in Console.app:

How to reproduce:

cd ~/examples/profile-cards-graphql
npm i
npm run watch
skpm link .

then execute the plugin in a new document in sketch

Sketch version:
43 (38999)

reported by @ChristopherBiscardi — I can't reproduce it 🤔

Hey :)
First of all, thanks for this cool stuff!

But I faced with problem when I tried to use quickstart guide.
Actually now if we download sketch (https://www.sketchapp.com/)
default app name will be Sketch 2.app, so when we start
npm run render
we get error:
/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool ENOENT

It's not very informative, especially for designers.
Actually, I think, we must handle this error and provide information about default config and sketch.app path overriding.

Also, seems to be better provide a little information about sketch plugin manager and its config in readme.

p.s. try to create PR soon.

I lost all of the release notes. I need to add the release notes again so people know what was released.

Shouldn't be difficult but might take a while :(

I am...

| -------------------------------------------------------------------------------------------------

I am reporting a bug or issue
cannot get the example to run

Expected behavior:
app starts sketch
Observed behavior:

react-sketchapp/examples/basic-setup on master via ⬢ v7.7.1
➔ npm run render

> [email protected] render /Users/adamclark/repos/react-sketchapp/examples/basic-setup
> skpm build --watch --run

🖨  Copied src/manifest.json in 9ms
Executing post-build scripts
⛏  Built ./my-command.js in 1407ms
events.js:163
    throw er; // Unhandled 'error' event
    ^

Error: spawn /Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool ENOENT
  at exports._errnoException (util.js:1029:11)
  at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
  at onErrorNT (internal/child_process.js:367:16)
  at _combinedTickCallback (internal/process/next_tick.js:80:11)
  at process._tickCallback (internal/process/next_tick.js:104:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] render: `skpm build --watch --run`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] render script 'skpm build --watch --run'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the basic-setup package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     skpm build --watch --run
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs basic-setup
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls basic-setup
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

How to reproduce:
using sketch 43.2, node 7.7.1, and npm 4.5

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render

Sketch version:
sketch 43.2
Please attach screenshots, a zip file of your project, and/or a link to your github project
just trying to run the example

There's been some activity since 0.10.0 - time for 0.10.1

| -------------------------------------------------------------------------------------------------

I opened the basic-setup and started playing around it; I tried to change a color and typo'ed it:

Night: '#333:',

Something went wrong.

Expected behavior:

RedBox renders the correct stacktrace

Observed behavior:

The error fails to render due to supplied a propType error (?)

Warning: Failed prop type: Invalid prop `error` of type `String` supplied to `RedBox`, expected instance of `Error`.
    in RedBox

How to reproduce:

Follow the instructions above

Sketch version:

Version 43.2

Expected behavior:

Following the basic example instructions works

Observed behavior:

When I run the render task, Sketch opens, but the following error

TypeError: null is not an object (evaluating 'context.document.currentPage')
line: 9246
column: 114

How to reproduce:

cameronlittle@Chelan:~/Dev
$ curl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz --strip=2 react-sketchapp-master/examples/basic-setup
cameronlittle@Chelan:~/Dev
$ cd basic-setup
cameronlittle@Chelan:~/Dev/basic-setup
$ npm install
# for brevity, I've removed this output, since it's all normal
cameronlittle@Chelan:~/Dev/basic-setup
$ npm run render

> [email protected] render /Users/cameronlittle/Dev/basic-setup
> skpm build --watch --run

🖨  Copied src/manifest.json in 6ms
Executing post-build scripts
🛠  Built ./my-command.js in 1391ms
TypeError: null is not an object (evaluating 'context.document.currentPage')
line: 9246
column: 114

Version information:

Sketch: 43.1
node: v7.2.1
npm: 3.10.10
os: macOS Sierra 10.12.3 (16D32)

Small bug when Sketch "Welcome" screen is shown on app start.

Expected behavior:

Rendering should start normally.

Observed behavior:

• TypeError: null is not an object (evaluating 'context.document.currentPage')
• Sketch shows welcome screen, but does not render document

How to reproduce:

Install Sketch and don't check off "show on every launch" on the "Welcome" screen.

Sketch version:

43.2

Currently our components' propTypes are defined as

const propTypes = {
  style: PropTypes.shape({
    ...ViewStylePropTypes
  }),
}
// or
const propTypes = {
  style: PropTypes.shape({
    ...ViewStylePropTypes
  }),
}

This totally breaks how styles actually work —

• it fails with an array of styles
• it fails with an ID returned by StyleSheet.create

It's implemented in react-primitives here — either need to copy over the code or maybe extract it to a common package? 🤔

Getting close!

That's embarrassing but I had to install babel-loader from npm to run the example project :)
npm version 2.15.11

It's noticeable here -

Looks like Sketch defaults to 1.2 line-height whereas browsers (and Native? maybe?) default to 1.

from MDN

normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

Line height seems to be correct, I think bounding boxes are being drawn incorrectly

Check this out:

• the two titles have just been rendered with lineHeight: 22. the one on the right has had its bounding box adjusted already; the one on the left is as-it-renders.

After double-clicking on an anchor point on Four Barrel Coffee, or resizing it horizontally, the bounding box snaps up several pixels, at which point I reflow the text underneath it.

I think the bounding box is initially getting drawn too big, but I'm not sure why 🤔

SVGs are the most sane way of expressing shape-like constructs in a react paradigm — c.f. https://github.com/chengyin/react-primitives-svg

Components: https://github.com/airbnb/react-sketchapp/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20SVG%20Primitives

SVG components we need

• Circle
• Ellipse
• G
• Linear Gradient
• Radial Gradient
• Line
• Path
• Polygon
• Polyline
• Rect
• Symbol
• Text
• Use
• Defs
• Stop

Fun fact - you can only load images over https in Sketch!

We should throw an error if you try to load an image over http.

There's some complexity in this -

• Handle rotations with native Sketch rotations
• otherwise, rasterize the transform-containing layers & apply CGTransforms to them

Noob here 🙏

Is it expected that the react-sketchapp can only run when there's a sketch document open?

Expected behavior:

• Running npm run render should automatically open sketch app if it's not open yet and render the code

Observed behavior:

• If the sketch app is not opened, there will be error TypeError: null is not an object (evaluating 'context.document.currentPage').

How to reproduce:

• Running npm run render when there's no sketch document opened (or sketch app is closed)

Sketch version:

• 43.2

Hi! I am... : reporting a bug or issue

I've was testing react-sketchapp which looks pretty neat so far!
Besides rendering the default sketch elements like Text,View,Image and so on, would it be possible to render a default react component containing HTML-Markup styled with css?

Expected behavior:
It should render a default react component with html elements.

Observed behavior:
Could not find renderer for type 'span' flexToSketchJSON

How to reproduce:
Try to render following Artboard:

import React from 'react';
import { render, Artboard, Text, View } from 'react-sketchapp';

const Hello = () => (
  <View
    name={`Hello View`}
  >
    <Text name="Hello Text">
      <span>Hello World</span>
    </Text>
  </View>
);

const Document = () => (
  <Artboard
    name="Hello Board"
  >
    <Hello />
  </Artboard>
);

export default (context) => {
  render(<Document />, context.document.currentPage());
}

Sketch version: 43.2

👋 Hello! Thanks for contributing. Please use the template that matches your intention

I am running npm run render inside one of the examples folder. Every time I get an error in terminal.

Expected behavior:
I expected the command to run successfully creating a new plug-in.

Observed behavior:
I get this info:

npm run render

> profile-cards@ render /Users/sten/Documents/DEV/NODE/react-sketchapp/examples/profile-cards
> skpm build --watch --run

🖨  Copied src/manifest.json in 7ms
Executing post-build scripts
🔨  Built ./main.js in 34314ms
TypeError: null is not an object (evaluating 'context.document.currentPage')
line: 6740
column: 104

How to reproduce:

1. Enter one of the example folder
2. Run install and: npm run render

Sketch version:
43.2 (39069)

react-sketchapp is an Airbnb thing and react-with-styles is an Airbnb thing and we should show how our things work with our other things

For adding text styles like bold, italic to whole sentences, it works great. But how can I add a style to some characters in between ?

I am trying to achieve this functionality -

<Text style={myStyle}>This is a <bold>word</bold> in a sentence.</Text>

On every save the Sketch window gets active, while the editor loses focus.

Expected behavior:

Would be nice if the focus would stay in the text editor, also after saving.

Observed behavior:

On every save in the text editor, the re-rendering happens, and the Sketch window becomes active.

How to reproduce:

Save.

Sketch version:

43.2

Speaking to @jongold on Twitter he mentioned if I'd be OK sharing the example I'd been playing with. The rationale behind it was to see how easy it'd be for me to create of PoC of a (semi) working web-component and then render its various states to a sketch document.

Like I mentioned I'm no React or FP expert so I imagine there'll be a few issues with my code. I noticed in particular that the examples folder is ignored by the linter and Flow (?) so I'm not sure if this should be run for the examples at all?

For now I've just forked the main repo and created a WIP feature branch as per the documentation. Is it OK to go ahead and create a PR? I've attached a screenshot of it in action, link is here.

Thanks for releasing this, had some good fun with it already! Good excuse to improve my React skills as well.

I am reporting an issue.

I used this the Example Code from the API at
Artboard. I used the example and added a new folder in the examples folders.
Unfortunately it doesn't render a thing :(

Code:

import React from 'react';
import { render, Artboard } from 'react-sketchapp';


const Document = props =>
<Artboard
  name='My Artboard'
  style={{
    width: 480
  }}
>
  <Text>Hello world!</Text>
</Artboard>

export default (context) => {
  render(<Document />, context.document.currentPage());
}

Sketch version:
43.1
A Screenshot:

I am beginner and i have a problem :)

I do all by instruction and then run example projects it open sketch, but nothing to draw.

Can anyone help me?

Sketch 43.2
npm -v 3.10.10
node v6.9.5

👋 Hello! Thanks for contributing. Please use the template that matches your intention

I am... an engineer (backend mostly) and learned how to use Sketch

| -------------------------------------------------------------------------------------------------

• How do I use Sketch's Templates for iOS, Android, Responsive Web Design
• How to utilize Material Design Components (which we generally get from Sketch App Resources)
• The main-command.js has components like View, Artboard which are coming from react-sketchapp, which I believe I do not have to take it to my react app. The guidance needed it how to take these designs to our react application.

Thank you very much for the project, this is very promising for people who love to code to design

Sketch version:
43.2

👋 Hello! Thanks for contributing. Please use the template that matches your intention

I am...

| -------------------------------------------------------------------------------------------------

Proposal/Feature-request:

| -------------------------------------------------------------------------------------------------

Expected behavior:

Observed behavior:

How to reproduce:

Sketch version:

Please attach screenshots, a zip file of your project, and/or a link to your github project

Expected behavior: running npm run render should run the script in the currently open/focused document.

Observed behavior: running npm run render runs the script in the first document opened in the current window/session.

How to reproduce:

1. Open or create two Sketch documents
2. Focus the second document window/tab
3. Run npm run render
4. The second document is unchanged; the first, unfocused document is where the contents are rendered.

Sketch version: 43.2

Gotta make it hit Airbnb JS guidelines 🙏

I'm using the latest version of Sketch Beta...

When running npm run render

I receive the following error

`pm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “dev”
npm ERR! node v7.2.0
npm ERR! npm v3.10.9

npm ERR! missing script: dev
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:`

I am...

| -------------------------------------------------------------------------------------------------

Expected behavior:
See the Basic Setup example running in Sketch & React.

Observed behavior:
See an error Unknown command run and and Webpack related error. Here's the terminal output:

> [email protected] render /Users/zacharysmith/play/react-sketchapp/examples/basic-setup
> skpm build --watch --run

🖨  Copied src/manifest.json in 6ms
Executing post-build scripts
🔩  Built ./my-command.js in 1713ms
Unknown command ‘run’

Usage: sketchtool <command> [<args>]
                  [--formats=<string> | -f <string>]
                  [--use-id-for-name{=YES|NO} | --no-use-id-for-name | -n {<YES|NO>}]
                  [--max-size=<float> | -m <float>]
                  [--item=<string> | -i <string>]
                  [--items=<string> | -a <string>]
                  [--background=<string> | -g <string>]
                  [--compression=<float> | -c <float>]
                  [--reveal{=YES|NO} | --no-reveal | -r {<YES|NO>}]
                  [--outputJSON=<path> | -J <path>]
                  [--include-symbols{=YES|NO} | --no-include-symbols | - {<YES|NO>}]
                  [--bounds=<rectangle> | -b <rectangle>]
                  [--version | -v] [--filename=<string> | -F <string>]
                  [--scales=<path> | -s <path>]
                  [--compact{=YES|NO} | --no-compact | -k {<YES|NO>}]
                  [--overwriting{=YES|NO} | --no-overwriting | -V {<YES|NO>}]
                  [--trimmed{=YES|NO} | --no-trimmed | -t {<YES|NO>}]
                  [--group-contents-only{=YES|NO} | --no-group-contents-only | -G {<YES|NO>}]
                  [--help | -h]
                  [--include-namespaces{=YES|NO} | --no-include-namespaces | -N {<YES|NO>}]
                  [--progressive{=YES|NO} | --no-progressive | -p {<YES|NO>}]
                  [--save-for-web{=YES|NO} | --no-save-for-web | -w {<YES|NO>}]
                  [--output=<path> | -o <path>]

Commands:
	dump                 Dump out the structure of a document as JSON.

	export artboards     Export one or more artboards
	export layers        Export one or more layers
	export pages         Export an area from one or more pages
	export preview       Export a preview image for a document
	export slices        Export one or more slices

	help                 Show this help message.

	list artboards       List information on the document's artboards.
	list formats         List the supported export formats.
	list layers          List information on all of the document's layers.
	list pages           List information on the document's pages.
	list slices          List information on the document's slices.

	metadata             List the metadata for a document.
	notes                Output the release notes.
	show                 Show the location of the various sketch folders.


See ‘sketchtool help <command>’ for more information on a specific command.

/Users/zacharysmith/play/react-sketchapp/examples/basic-setup/node_modules/webpack-shell-plugin/lib/index.js:168
        throw error;
        ^
1

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/6.7.0/bin/node" "/usr/local/bin/npm" "run" "render"
npm ERR! node v6.7.0
npm ERR! npm  v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] render: `skpm build --watch --run`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] render script 'skpm build --watch --run'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the basic-setup package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     skpm build --watch --run
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs basic-setup
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls basic-setup
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/zacharysmith/play/react-sketchapp/examples/basic-setup/npm-debug.log

How to reproduce:
Follow the instructions given in the basic-setup:
https://github.com/airbnb/react-sketchapp/tree/master/examples/basic-setup.

Specifically:

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install
npm run render

Sketch version:
42

Please attach screenshots, a zip file of your project, and/or a link to your github project

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/6.7.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'render' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prerender', 'render', 'postrender' ]
5 info lifecycle [email protected]~prerender: [email protected]
6 silly lifecycle [email protected]~prerender: no script for prerender, continuing
7 info lifecycle [email protected]~render: [email protected]
8 verbose lifecycle [email protected]~render: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~render: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/zacharysmith/play/react-sketchapp/examples/basic-setup/node_modules/.bin:/usr/local/Cellar/node/6.7.0/bin:/Users/zacharysmith/.rvm/gems/ruby-2.3.0/bin:/Users/zacharysmith/.rvm/gems/ruby-2.3.0@global/bin:/Users/zacharysmith/.rvm/rubies/ruby-2.3.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Users/zacharysmith/.rvm/bin
10 verbose lifecycle [email protected]~render: CWD: /Users/zacharysmith/play/react-sketchapp/examples/basic-setup
11 silly lifecycle [email protected]~render: Args: [ '-c', 'skpm build --watch --run' ]
12 silly lifecycle [email protected]~render: Returned: code: 1  signal: null
13 info lifecycle [email protected]~render: Failed to exec render script
14 verbose stack Error: [email protected] render: `skpm build --watch --run`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/zacharysmith/play/react-sketchapp/examples/basic-setup
17 error Darwin 16.5.0
18 error argv "/usr/local/Cellar/node/6.7.0/bin/node" "/usr/local/bin/npm" "run" "render"
19 error node v6.7.0
20 error npm  v3.10.7
21 error code ELIFECYCLE
22 error [email protected] render: `skpm build --watch --run`
22 error Exit status 1
23 error Failed at the [email protected] render script 'skpm build --watch --run'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the basic-setup package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     skpm build --watch --run
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs basic-setup
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls basic-setup
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

It would be nice to have a styled-component integration...
Any ideas?

👋 Hello! Thanks for contributing. Please use the template that matches your intention

I am upgrade [email protected], running npm run render inside one of the examples folder.

Observed behavior:

npm run render

> [email protected] render /Users/huihui/project/react-sketchapp/examples/basic-setup
> skpm build --watch --run

🖨  Copied src/manifest.json in 10ms
Executing post-build scripts
🛠  Built ./my-command.js in 1920ms
(null)

Sketch version:
43 (38999)

Or at least hide it behind a flag - we shouldn't litter terminals with metrics

i run npm install ,and then run npm run render,but throw this error

npm 4.5.0
node 7.8.0
sketch 0.43.2

npm run render

> profile-cards@ render /Users/yutou/code/react-sketchapp/examples/profile-cards
> skpm build --watch --run

🖨  Copied src/manifest.json in 9ms
Executing post-build scripts
🔩  Built ./main.js in 1451ms
TypeError: null is not an object (evaluating 'context.document.currentPage')
line: 6740
column: 104

I am...

| -------------------------------------------------------------------------------------------------

Getting Started documentation should mention skpm and sketchtool as dependencies to install first. It wasn't apparent to me, that I needed to install these, as I'm a complete n00b in the sketch plugin space.

Observed behavior:

How to reproduce:
Without having skpm and sketchtool installed, try following the current quickstart instructions.

First, make sure you have installed Sketch version 43+, & a recent npm.

Open a new Sketch file, then in a terminal:

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render
Next, check out some more examples!

I am a product designer. This tool looks great .

| -------------------------------------------------------------------------------------------------

Would love ability to generate React code based on Sketch Artboard. Essentially ability to go back and fourth.

After sanitizing this repo, it's no longer building on Circle - need to follow instructions to get it to build on PRs again 🙏

Yoga now has an emscripten target and it would be good for us to move over to it instead of using css-layout. Yoga is now what React Native is using, and this will give us the highest level of consistency with those platforms.

Reporting a bug or issue
running npm run render just opens a blank sketch document.
Is there something else I need to be doing? I followed the steps in getting started to no avail.

Expected behavior:
For a demo sketch file to open that's not blank.

Observed behavior:
sketch file is blank.

How to reproduce:
npm run render

Sketch version:
43.2

Opacity change on text views are not working for me.
Anyone else experience that?

Tried to include a local image to the basic-setup example and it's failing to load it. Is this an issue with skpm or just unsupported at this stage?

Thanks!

Executing post-build scripts
error Error while building ./my-command.js
./src/pic.jpg
Module parse failed: /react-sketchapp/examples/basic-setup/src/pic.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/my-command.js 55:70-90
- reactTreeToFlexTree: 0.003
- computeLayout: 0.067
new renderer: 0.083

How to reproduce:
<Image source={require('./pic.jpg')} style={{ width: 200, height: 200 }} />

Sketch version:
43.2