May 2022 Summaries

Grommet, Next.js, and PropelAuth can be combined to create a responsive, accessible B2B application foundation with a reusable page layout, header, sidebar navigation, authentication, and organization management. The walkthrough begins by initializing a Next.js app, wrapping it in Grommet for full-page styling and theming, and building an AppBar and sidebar with navigation links, then consolidates shared page elements into a PageWrapper component. PropelAuth is added through an AuthProvider to supply hosted login, account management, user data, and multi-tenant organization support, allowing the header to display login controls, loading states, or a user avatar and enabling protected routes through the withRequiredAuthInfo wrapper. The sidebar is made collapsible with a hamburger control and adapts on small screens by using Grommet’s ResponsiveContext and Layer components to display a full-screen overlay instead of a persistent side panel. Finally, authenticated users can create organizations or select among their existing organizations in the sidebar, with the active organization stored locally and validated through PropelAuth.

Stripe’s open-source Markdoc framework extends Markdown authoring by allowing custom React components to be embedded as tags, a capability used in Stripe’s own documentation. The examples show how a React component using hooks can render dynamic content such as a continuously updated current date, then be registered in Markdoc and inserted into a Markdown page. The discussion also presents a more practical documentation use case: displaying a logged-in user’s or organization’s API key directly in code examples by fetching it from a protected Next.js API route, with authentication and login handling provided through PropelAuth. By combining Markdown’s simplicity with React’s interactivity, data fetching, and authentication support, Markdoc can enable documentation that is dynamic, personalized, and more functional than static pages.

A Next.js and TypeScript tutorial develops a reusable form system using React Hook Form, SWR, and react-toastify, beginning with a basic HTML email form and progressing toward a generic component that can support many field types. It explains how React Hook Form reduces controlled-component boilerplate by registering inputs, managing submission state, displaying loading spinners, and exposing validation errors, while JSON-based POST requests replace browser redirects. The approach distinguishes server-side validation errors, which are attached to individual fields with `setError`, from unexpected failures, which are communicated through toast messages alongside success notifications. It also uses SWR to fetch existing data and reset form defaults asynchronously, and adds a custom hook that warns users before navigating away or refreshing when unsaved changes make the form dirty. The final GenericForm abstraction centralizes data fetching, submission, error handling, loading states, notifications, and unsaved-change protection while allowing individual pages to provide their own field-rendering logic, though the tutorial notes that its behavior should be customized where product requirements differ.