Rakan Nimer rakannimer

## access-chart-from-ref.js
import React from 'react'
import {render} from 'react-dom'
import {Chart} from 'react-google-charts'


export default class App extends React.Component {
 constructor(props) {
   super(props)
   this.state = {
     data: [],

## log-indent-based-on-depth-of-call-stack.js
const log = (...args) => {
  console.log(" ".repeat(new Error().stack.match(/\n/g).length - 2), ...args);
};

## list-all-test-ids-in-page.js
Array.from(new Set(Array.from(document.querySelectorAll('[data-testid]')).map(el => el["dataset"]["testid"])))

## react-google-charts-selection-example.js
import React from 'react'
import {render} from 'react-dom'
import {Chart} from 'react-google-charts'

class App extends React.Component{
  constructor(props) {
    super(props);
  }
  onSelectEvent(Chart) {
    console.log(Chart.chart.getSelection());

## add-jest-to-nwb.sh
yarn add -D jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer
#Edit package.json adding the jest command :
"scripts": {
  "build": "nwb build-react-component",
  "clean": "nwb clean-module && npm clean-demo",
  "start": "nwb serve-react-demo",
  "test": "nwb test",
  "test:coverage": "nwb test --coverage",
  "test:watch": "nwb test --server",
  "test:jest": "jest"

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

## add-react-jest-airbnb-linting.sh
(   export PKG=eslint-config-airbnb;   npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add -D "$PKG@latest"; )
yarn add babel-eslint
echo "{
  \"parser\": \"babel-eslint\",
  \"env\": {
    \"browser\": true,
    \"node\": true,
    \"jest\": true,
  },
  \"extends\": \"airbnb\",

## mobx-reactions-example.js
import { reaction, observable, runInAction } from 'mobx';

const myObservableMap = observable.map({});

const disposeReaction = reaction(() => myObservableMap, (newObservableValue) => {
	console.warn('Someone changed the observable map. new value : ', newObservableValue);
})

myObservableMap.set('some', {data: 'of any type'})
myObservableMap.set('someOther', 'data')

## jest-photoshoot.js
const photoshoot = (...args) => {
  args.forEach(arg =>
    expect(arg).toMatchSnapshot()
  );
};

## some atom snippets.cson
# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
	import React from 'react'
	import {render} from 'react-dom'
	import {Chart} from 'react-google-charts'


	export default class App extends React.Component {
	constructor(props) {
	super(props)
	this.state = {
	data: [],
	const log = (...args) => {
	console.log(" ".repeat(new Error().stack.match(/\n/g).length - 2), ...args);
	};
	yarn add -D jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer
	#Edit package.json adding the jest command :
	"scripts": {
	"build": "nwb build-react-component",
	"clean": "nwb clean-module && npm clean-demo",
	"start": "nwb serve-react-demo",
	"test": "nwb test",
	"test:coverage": "nwb test --coverage",
	"test:watch": "nwb test --server",
	"test:jest": "jest"
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	</head>
	( export PKG=eslint-config-airbnb; npm info "$PKG@latest" peerDependencies --json \| command sed 's/[\{\},]//g ; s/: /@/g' \| xargs yarn add -D "$PKG@latest"; )
	yarn add babel-eslint
	echo "{
	\"parser\": \"babel-eslint\",
	\"env\": {
	\"browser\": true,
	\"node\": true,
	\"jest\": true,
	},
	\"extends\": \"airbnb\",
	import { reaction, observable, runInAction } from 'mobx';

	const myObservableMap = observable.map({});

	const disposeReaction = reaction(() => myObservableMap, (newObservableValue) => {
	console.warn('Someone changed the observable map. new value : ', newObservableValue);
	})

	myObservableMap.set('some', {data: 'of any type'})
	myObservableMap.set('someOther', 'data')
	const photoshoot = (...args) => {
	args.forEach(arg =>
	expect(arg).toMatchSnapshot()
	);
	};
	# Your snippets
	#
	# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
	# expand the prefix into a larger code block with templated values.
	#
	# You can create a new snippet in this file by typing "snip" and then hitting
	# tab.
	#
	# An example CoffeeScript snippet to expand log to console.log:
	#