justincy

Using next-i18next in Storybook

next-i18next is built to work server-side as well as client-side. Storybook doesn't support server-side rendering so there's nowhere to add the next-i18next middleware. The good news is that means we don't have to support server-side rendering and can just use the underlying react-i18next and i18next-instance.

Adding a Storybook Decorator

We're going to add a decorator which will allow us wrap all stories in the ``.

justincy

Focus management in React currently has one solution: refs. If you want a function component to accept a ref, you should use React.forwardRef(). For a basic Input component, it would look like this:

import React from "react";

const Input = React.forwardRef(function Input({name, type, id, disabled, ...props}, ref) {
  return (
    <input
      {...props}
 name={name}

justincy

In addition to the Storybook for React setup, you'll also need to install these packages:

npm i -D @babel/core babel-loader css-loader style-loader

justincy

! function(e) {
    function r(n) {
        if (t[n]) return t[n].exports;
        var o = t[n] = {
            i: n,
            l: !1,
            exports: {}
        };
        return e[n].call(o.exports, o, o.exports, r), o.l = !0, o.exports
    }

justincy

* : Theodore Yurkiewicz
* : Theodore York
* Fact: http://gedcomx.org/Christening  
* Fact: http://gedcomx.org/Immigration  
* Fact: http://gedcomx.org/Immigration  
* Fact: http://gedcomx.org/Emigration  
* Fact: http://gedcomx.org/Residence  
* Fact: http://gedcomx.org/Residence  
* Fact: http://gedcomx.org/Residence  
* Fact: http://gedcomx.org/Residence  

justincy

{
	"persons": [{
		"id": "K1VK-9VB",
		"sources": [{
			"id": "8cc55ba1-0509-410a-adbd-c0576bf3ade1",
			"description": "https://familysearch.org/platform/sources/descriptions/9XVK-5K8",
			"attribution": {
				"contributor": {
					"resource": "https://familysearch.org/platform/users/agents/MMJF-TLW"
				},

justincy

{
	"persons": [{
		"id": "1",
		"sources": [{
			"description": "#6"
		}],
		"gender": {
			"type": "http://gedcomx.org/Male"
		},
		"names": [{

justincy

{
	"persons": [{
		"id": "KWZP-453",
		"sources": [{
			"id": "a15d4b0a-39d6-47a6-90fb-1f4b20199eb2",
			"description": "https://familysearch.org/platform/sources/descriptions/M9XQ-7ZP",
			"attribution": {
				"contributor": {
					"resource": "https://familysearch.org/platform/users/agents/MM7L-QCH"
				},

justincy

{
	"persons": [{
		"id": "1",
		"sources": [{
			"description": "#7"
		}],
		"gender": {
			"type": "http://gedcomx.org/Female"
		},
		"names": [{

justincy

// This script generates a tab-delimeted list of households with the currently
// assigned home teachers. Copy and paste the script into the browser JS console
// (opened by hitting the F12 key on PCs) when on the Households tab of the
// Hometeaching section of Leader and Clerk Resources on lds.org.
// The output is formatted in a way that allows you to pase it into your favorite
// spreadsheet program.

// For each household...
$('.member-list-body').map(function(){
  var row = $(this);