Create getting started docs page

[macintoshhelper]

Hopefully addresses #263 (there's overlap with the slow start PR, but decided to carry on the effort as a more general purpose getting started page, as it's been inactive).

• Adds textTransform to docs (included in "React Sketch.app only" section, as capitalize isn't supported, unlike RN and web) fixes Document textTransform support #491
• Addresses Sketch Welcome Screen #48
• Addresses Render script runs in first open document regardless of window focus #23

[mathieudutour]

Thanks! Just a few suggestions

[mathieudutour]

not to be addressed in this PR but it'd be nice to throw a better error message

[macintoshhelper]

👍 Is it not worth creating a new Sketch document by default in the render function? If no documents are found.

e.g.

react-sketchapp/src/utils/getDocument.ts

Lines 3 to 8 in 9ed5580

	export const getDocumentDataFromContext = (ctx: SketchContext): SketchDocumentData =>
	(
	ctx.document ||
	(ctx.actionContext || {}).document ||
	NSDocumentController.sharedDocumentController().currentDocument()
	).documentData();

->

 export const getDocumentDataFromContext = (ctx: SketchContext): SketchDocumentData => {
  try {
    return ( 
     ctx.document || 
     (ctx.actionContext || {}).document || 
     NSDocumentController.sharedDocumentController().currentDocument() 
   ).documentData(); 
  } catch(err) {
    if (sketch.documents.length === 0) {
      return new sketch.Document().sketchObject.documentData();
    }
  }

[mathieudutour]

No I don't think it should do something that it wasn't explicitly told not to. If we have a nice error message with some suggestion to fix the issue, it will be a lot more actionable than if we sometimes create a new doc but not always

[macintoshhelper]

Should I open up a PR for:

 export const getDocumentDataFromContext = (ctx: SketchContext): SketchDocumentData => {
  try {
    return ( 
     ctx.document || 
     (ctx.actionContext || {}).document || 
     NSDocumentController.sharedDocumentController().currentDocument() 
   ).documentData(); 
  } catch(err) {
    if (err.includes('null is not an object')) {
      throw new Error('No open document found. Please try opening/creating a document, or you could use \'render(<App />, sketch.getSelectedDocument() || new sketch.Document())\'');
    }
  }

I'd use if (sketch.getDocuments().length === 0) { throw ... }, but not sure if it's best to avoid the public Sketch API? Couldn't find any imports for it in the source.

[mathieudutour]

Let's avoid the plugin sketch API for now (because it might be a pain on nodejs and not working on sketch <49).

But I think it can be just

export const getDocumentDataFromContext = (ctx: SketchContext): SketchDocumentData => {
  let document = ctx.document || 
     (ctx.actionContext || {}).document || 
     NSDocumentController.sharedDocumentController().currentDocument()
  if (!document || !document.documentData) {
    throw new Error('No open document found.\nTry opening/creating a document before calling `render`.\n\nFor more information, check out http://airbnb.io/react-sketchapp/docs/guides/rendering.html');
  }
  return document.documentData()
}

[mathieudutour]

let's put it in Type Style and open an issue for the support of capitalize

[mathieudutour]

I think that could be in a guide of their own - maybe called Rendering or something

[macintoshhelper]

Created rendering.md

[mathieudutour]

perfect, thanks!