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
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
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.
We're going to add a decorator which will allow us wrap all stories in the ``.
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}
! 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 | |
} |
* : 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 |
{ | |
"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" | |
}, |
{ | |
"persons": [{ | |
"id": "1", | |
"sources": [{ | |
"description": "#6" | |
}], | |
"gender": { | |
"type": "http://gedcomx.org/Male" | |
}, | |
"names": [{ |
{ | |
"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" | |
}, |
{ | |
"persons": [{ | |
"id": "1", | |
"sources": [{ | |
"description": "#7" | |
}], | |
"gender": { | |
"type": "http://gedcomx.org/Female" | |
}, | |
"names": [{ |
// 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); |