Arnaud Tanielian Danetag

## useMyAwesomeHook.specs.tsx
import React from 'react';
import { renderHook } from '@testing-library/react-hooks';
import stateFactory from 'jest/stateFactory';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { Store, AnyAction } from 'redux';

import { initialState as initialPaginationState } from '../../store/pagination/reducer';
import { useMyAwesomeHook } from '../useMyAwesomeHook';

## next.config.js
// Example: Forward env variables to the app (client-side)
module.exports = {
  env: {
    AN_ENV_VARIABLE: process.env.AN_ENV_VARIABLE,
  },
};

## web-component-data.js
/* In a web component */

// Private function to get the data from the "<script>" element
selectData = () => {
  const options = this.slotContainerRef.querySelector('script');
  const optionsJSON = !!options && JSON.parse(options.innerHTML);

  if (optionsJSON) {
    return optionsJSON;
  }

## web-component-data.html
<my-navigation>
  <script type="application/json" name="data">
    {
      "items": [
        { "id": "home", "href": "/", "label": "Home" },
        { "id": "about", "href": "/about", "label": "About" },
      ]
    }
  </script>
</my-navigation>

## web-components-in-scss.scss
@import 'my-component-library/constants/_constants';
@import 'my-component-library/constants/_mixins';

.background {
  background-color: $blue; // imported constant color

  // imported mixin
  @for-size($medium) {
    background-color: $dark-blue;
  }

## web-components-constants.js
import { ICONS } from "my-component-library/constants";

// ...

render() {
  return (
    <div>
      <my-icon name={ICONS.ACCOUNT}></my-icon>
    </div>
  )

## web-component-reset.html
<body>
  <my-global-component reset></my-global-component>

  <!-- rest of the page -->
</body>

## web-components-render.html
<!-- Writing this -->
<my-button theme="secondary">A button</my-button>

<!-- Actually renders this -->
<my-button theme="secondary">
  <button class="my-button my-button--secondary">
    <span class="label">A button</span>
  </button>
</my-button>

## basic-stencil-component.js
import { Component, h, Prop, State, Watch } from '@stencil/core';

const Constants = {
 baseClassname: 'my-button',
}

@Component({
  tag: 'my-button',
  styleUrl: 'button.scss'
})

## web-components.html
<!-- Template definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div class="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>
	import React from 'react';
	import { renderHook } from '@testing-library/react-hooks';
	import stateFactory from 'jest/stateFactory';
	import configureMockStore from 'redux-mock-store';
	import { Provider } from 'react-redux';
	import { Store, AnyAction } from 'redux';

	import { initialState as initialPaginationState } from '../../store/pagination/reducer';
	import { useMyAwesomeHook } from '../useMyAwesomeHook';
	// Example: Forward env variables to the app (client-side)
	module.exports = {
	env: {
	AN_ENV_VARIABLE: process.env.AN_ENV_VARIABLE,
	},
	};
	/* In a web component */

	// Private function to get the data from the "<script>" element
	selectData = () => {
	const options = this.slotContainerRef.querySelector('script');
	const optionsJSON = !!options && JSON.parse(options.innerHTML);

	if (optionsJSON) {
	return optionsJSON;
	}
	<my-navigation>
	<script type="application/json" name="data">
	{
	"items": [
	{ "id": "home", "href": "/", "label": "Home" },
	{ "id": "about", "href": "/about", "label": "About" },
	]
	}
	</script>
	</my-navigation>
	@import 'my-component-library/constants/_constants';
	@import 'my-component-library/constants/_mixins';

	.background {
	background-color: $blue; // imported constant color

	// imported mixin
	@for-size($medium) {
	background-color: $dark-blue;
	}
	import { ICONS } from "my-component-library/constants";

	// ...

	render() {
	return (
	<div>
	<my-icon name={ICONS.ACCOUNT}></my-icon>
	</div>
	)
	<body>
	<my-global-component reset></my-global-component>

	<!-- rest of the page -->
	</body>
	<!-- Writing this -->
	<my-button theme="secondary">A button</my-button>

	<!-- Actually renders this -->
	<my-button theme="secondary">
	<button class="my-button my-button--secondary">
	<span class="label">A button</span>
	</button>
	</my-button>
	import { Component, h, Prop, State, Watch } from '@stencil/core';

	const Constants = {
	baseClassname: 'my-button',
	}

	@Component({
	tag: 'my-button',
	styleUrl: 'button.scss'
	})
	<!-- Template definition -->
	<template id="fancy-element-template">
	<style>
	...
	</style>
	<div class="container">
	<p>Some fancy markup goes here...</p>
	</div>
	</template>