My personal software engineering philosophy:
Good code is understandable first. It's broken into right-sized pieces that each do one clear thing, explains why rather than how, and earns every abstraction it introduces. Because it's understandable and loosely coupled, it can be verified, changed, or deleted without fear — and it doesn't make the user pay for the author's convenience, in what it ships or in what it runs.
That is the short version. The longer version is below.
| import path from "path"; | |
| import recursiveReadSync from "recursive-readdir-sync"; | |
| type RelativeFilePath = string; | |
| type AbsoluteFilePath = string; | |
| const SRC_DIR = "../src/"; | |
| const STORIES_DIR = "../storybook/stories/"; | |
| /** |
| // machine.js | |
| import { Machine } from "xstate"; | |
| // Conditions for some of our transitions | |
| const guards = { | |
| hasJobIncome: (context) => context.has_job_income === true, | |
| }; | |
| export const routingMachine = Machine({ | |
| // Initial state is mostly useful for visualizations, for our purposes. |
| const routes = { | |
| auth: { | |
| login: "/auth/login", | |
| reset: "/auth/reset-password" | |
| }, | |
| apply: { | |
| documents: "/apply/upload-docs", | |
| income: "/apply/income", | |
| name: "/apply/name", | |
| review: "/apply/review", |
| import { getNextPathname, goTo } from "router"; | |
| import { updateApplication } from "api"; | |
| function IncomePage() { | |
| // This is within the page for example purposes, but | |
| // could be abstracted for a multi-page form. | |
| const handleFormSubmit = (event) => { | |
| event.preventDefault(); | |
| const formData = new FormData(event.target); |
| // routes.js | |
| export const routes = { | |
| apply: { | |
| documents: "/apply/upload-docs", | |
| household: "/apply/household", | |
| income: "/apply/income", | |
| name: "/apply/name", | |
| review: "/apply/review", | |
| success: "/apply/success" |
| // router.js | |
| import { routingMachine } from "machine"; | |
| export function getNextPathname(event, context) { | |
| const currentPathname = window.location.pathname; | |
| const nextPathname = routingMachine | |
| .withContext(context) // https://xstate.js.org/docs/guides/context.html | |
| .transition(currentPathname, event); // https://xstate.js.org/api/interfaces/statemachine.html#transition | |
| var names = [ | |
| "patricia", "aakhus", "atia", "abawi", "edward", "abbey", "lynn", "belle", "kendrick", "abbott", "eleanor", "hallowell", "hailey", "megan", "shana", "abé", "louise", "abeita", "robert", "abel", "aberjhani", "walter", "abish", "abiola", "abrams", "diana", "susan", "abulhawa", "kathy", "acker", "cherry", "adair", "alice", "adams", "henry", "yda", "addis", "kim", "addonizio", "george", "ade", "renata", "adler", "warren", "james", "agee", "charlotte", "agell", "kelli", "russell", "agodon", "conrad", "aiken", "hiag", "akmakjian", "mitch", "albom", "kathleen", "alcalá", "louisa", "may", "alcott", "isabella", "macdonald", "alden", "clifford", "lindsey", "alderman", "thomas", "bailey", "aldrich", "malin", "alegria", "lloyd", "alexander", "sherman", "alexie", "horatio", "nelson", "algren", "hervey", "allen", "isabel", "allende", "dorothy", "allison", "lisa", "alther", "joseph", "altsheler", "julia", "alvarez", "rudolfo", "anaya", "laurie", "halse", "anderson", "poul", "sherwood", "eliza", "frances", "a |
| InputPii | |
| Empty* | |
| onFocus -> Unmasked & Focused | |
| Unmasked & Focused | |
| onBlur -> Unmasked | |
| Submit -> Masked | |
| Unmasked | |
| onFocus -> Unmasked & Focused | |
| Masked | |
| onFocus -> Masked & Focused |
| Verify ID step states | |
| Not started | |
| Answer some questions -> In Progress | |
| In Progress | |
| Answer all questions -> Completed | |
| Completed | |
| Review and confirm -> Submitted | |
| Submitted |