dferber90

Motivation

To refresh your memory, Formik uses an error shape like so

{ name: "No name provided", "age": "You must be at least 18 years old" }

I love formik, but I think it is a design flaw that its default errors shape only allows for one error per field. You might have multiple errors

dferber90

// Usage example of useCaretPosition
// Shows a red caret when the cursor is at the end

import { useCaretPosition } from "./use-caret-position"

export function SomeComponent () {
  const [value, setValue] = React.useState<string>("");
    
  // actual usage
  const inputRef = React.useRef<HTMLInputElement>(null);

dferber90

// pages/index.tsx
import React from "react";
import { GetServerSideProps } from "next";
import {
  AuthTokens,
  useAuth,
  useAuthFunctions,
  getServerSideAuth,
} from "../auth";

dferber90

// pages/token.tsx
import React from "react";
import { useRouter } from "next/router";
import { useAuthRedirect } from "aws-cognito-next";
import queryString from "query-string";

const extractFirst = (value: string | string[]) => {
  return Array.isArray(value) ? value[0] : value;
};

dferber90

import { createGetServerSideAuth, createUseAuth } from "aws-cognito-next";
import pems from "./pems.json";

export const getServerSideAuth = createGetServerSideAuth({ pems });
export const useAuth = createUseAuth({ pems });
export * from "aws-cognito-next";

dferber90

const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");

module.exports = (phase) => {
  switch (phase) {
    case PHASE_DEVELOPMENT_SERVER:
      return {
        // environment varibales for local development
        env: {
          IDP_DOMAIN: "nextjs-example.auth.eu-central-1.amazoncognito.com",
          USER_POOL_ID: "eu-central-1_nfOfx47Q6",

dferber90

import React from "react";
import { AppProps } from "next/app";
import Amplify from "@aws-amplify/core";
import Auth from "@aws-amplify/auth";

Amplify.configure({
  Auth: {
    region: "eu-central-1", //! Konfiguration
    userPoolId: process.env.USER_POOL_ID,
    userPoolWebClientId: process.env.USER_POOL_CLIENT_ID,

dferber90

// This is a cheat for the game TENS! by @ryanflorence
// at http://ryanflorence.com/tens/
// see https://mobile.twitter.com/ryanflorence/status/1219351388775256064
//
// To use this cheat, open http://ryanflorence.com/tens/ and paste the code
// into your terminal and execute it. The game will start for you.
// The solutions will be highlighted and you just need to click them.
// Solutions with two numbers are red, solutions with three numbers are green.
//
// Have fun

dferber90

# This goes into .github/workflows/percy.yml
name: Visual Regression Tests

on:
  push:
    branches:
      - master
  pull_request:

jobs:

dferber90

// .storybook/config.js
import IntlDecorator from './decorators/intl';
import { addDecorator } from '@storybook/react';

addDecorator(IntlDecorator);