codeforlife 2.6.1

package/src/utils/router.test.ts

@@ -0,0 +1,156 @@
+import { path as p, type Parameters, type Path } from "./router"
+
+const m = <SubMatches extends Record<string, Path>>(
+  _: string,
+  __: string | Parameters,
+  subMatches: SubMatches = {} as SubMatches,
+) => ({ _, __, ...subMatches })
+
+function testPaths({
+  name,
+  paths,
+  match,
+}: {
+  name: string
+  paths: Path
+  match: Path
+}) {
+  test(name, () => {
+    expect(paths).toMatchObject(match)
+  })
+}
+
+testPaths({
+  name: "no nested paths",
+  paths: p(""),
+  match: m("/", ""),
+})
+
+testPaths({
+  name: "nested paths",
+  paths: p("", {
+    a: p("/a", {
+      b: p("/b"),
+    }),
+  }),
+  match: m("/", "", {
+    a: m("/a", "/a"),
+  }),
+})
+
+testPaths({
+  name: "one param",
+  paths: p("", {
+    person: p("/person", {
+      name: p("/:name", {
+        sam: p({ name: "samantha" }),
+      }),
+    }),
+  }),
+  match: m("/", "", {
+    person: m("/person", "/person", {
+      name: m("/person/:name", "/:name", {
+        sam: m("/person/samantha", { name: "samantha" }),
+      }),
+    }),
+  }),
+})
+
+testPaths({
+  name: "multiple params",
+  paths: p("", {
+    hero: p("/hero", {
+      firstAndLastName: p("/:firstName/:lastName", {
+        spiderMan: p(
+          { firstName: "peter", lastName: "parker" },
+          {
+            mainVillain: p("/green-goblin"),
+          },
+        ),
+      }),
+    }),
+  }),
+  match: m("/", "", {
+    hero: m("/hero", "/hero", {
+      firstAndLastName: m(
+        "/hero/:firstName/:lastName",
+        "/:firstName/:lastName",
+        {
+          spiderMan: m(
+            "/hero/peter/parker",
+            { firstName: "peter", lastName: "parker" },
+            {
+              mainVillain: m(
+                "/hero/peter/parker/green-goblin",
+                "/green-goblin",
+              ),
+            },
+          ),
+        },
+      ),
+    }),
+  }),
+})
+
+testPaths({
+  name: "nested params",
+  paths: p("", {
+    hero: p("/hero", {
+      firstName: p("/:firstName", {
+        spiderMan: p({ firstName: "peter" }),
+        lastName: p("/:lastName?", {
+          superMan: p(
+            { firstName: "clark" },
+            {
+              superMan: p({ lastName: "kent" }),
+            },
+          ),
+        }),
+        batMan: p(
+          { firstName: "bruce" },
+          {
+            lastName: p("/:lastName", {
+              batMan: p(
+                { lastName: "wayne" },
+                {
+                  mainVillain: p("/joker"),
+                },
+              ),
+            }),
+          },
+        ),
+      }),
+    }),
+  }),
+  match: m("/", "", {
+    hero: m("/hero", "/hero", {
+      firstName: m("/hero/:firstName", "/:firstName", {
+        spiderMan: m("/hero/peter", { firstName: "peter" }),
+        lastName: m("/hero/:firstName/:lastName?", "/:lastName?", {
+          superMan: m(
+            "/hero/clark",
+            { firstName: "clark" },
+            {
+              superMan: m("/hero/clark/kent", { lastName: "kent" }),
+            },
+          ),
+        }),
+        batMan: m(
+          "/hero/bruce",
+          { firstName: "bruce" },
+          {
+            lastName: m("/hero/bruce/:lastName", "/:lastName", {
+              batMan: m(
+                "/hero/bruce/wayne",
+                { lastName: "wayne" },
+                {
+                  mainVillain: m("/hero/bruce/wayne/joker", "/joker"),
+                },
+              ),
+            }),
+          },
+        ),
+      }),
+    }),
+  }),
+})

package/src/utils/router.ts

@@ -0,0 +1,67 @@
+import {
+  generatePath,
+  type LinkProps as _LinkProps,
+  type To,
+} from "react-router-dom"
+
+import { type PageState } from "../components/page/Page"
+
+export type LinkProps<
+  Override extends "delta" | "to",
+  State extends Record<string, any> = Record<string, any>,
+> = Omit<_LinkProps, "to" | "state"> &
+  (Override extends "delta"
+    ? { to: number }
+    : { to: To; state?: State & Partial<PageState> })
+
+export type ReadOnly<T> = {
+  readonly [P in keyof T]: T[P]
+}
+
+export type Parameters = Record<string, string>
+
+export interface Path {
+  _: string
+  __: string | Parameters
+  [subpath: string]: string | Path | Parameters
+}
+
+export function path<Subpaths extends Record<string, Path>>(
+  _: string | Parameters,
+  subpaths: Subpaths = {} as Subpaths,
+): Path & Subpaths {
+  function updatePath(path: Path, root: boolean, params?: Parameters) {
+    if (typeof path.__ === "object") {
+      params = params ? { ...params, ...path.__ } : path.__
+    }
+
+    const _path = typeof _ === "string" && params ? generatePath(_, params) : _
+
+    Object.entries(path).forEach(([key, subpath]) => {
+      if (key !== "__") {
+        subpath = subpath as string | Path
+        if (typeof subpath === "string") {
+          if (typeof _path === "string" && (!root || key !== "_")) {
+            let __path = _path + subpath
+            if (__path.endsWith("/")) __path = __path.slice(0, -1)
+            path[key] = __path
+          }
+        } else {
+          updatePath(subpath, false, params)
+        }
+      }
+    })
+  }
+
+  const path = { ...subpaths, _: typeof _ === "string" ? _ : "", __: _ }
+  if (_ === "") {
+    path._ = "/"
+  } else {
+    updatePath(path, true)
+  }
+  return path
+}
+
+export function getParam(path: Path, key: string) {
+  return (path.__ as Parameters)[key]
+}

package/src/utils/schema.ts

@@ -0,0 +1,80 @@
+import {
+  ValidationError,
+  type AnyObject,
+  type DefaultFromShape,
+  type InferType,
+  type MakePartial,
+  type ObjectSchema,
+  type ObjectShape,
+  type Schema,
+  type TypeFromShape,
+  type ValidateOptions,
+} from "yup"
+
+export type _<T> = T extends {}
+  ? {
+      [k in keyof T]: T[k]
+    }
+  : T
+
+export type MakeKeysOptional<T> = T extends AnyObject ? _<MakePartial<T>> : T
+
+export type ObjectFromShape<Shape extends ObjectShape> = MakeKeysOptional<
+  _<TypeFromShape<Shape, AnyObject>>
+>
+
+export type ObjectSchemaFromShape<Shape extends ObjectShape> = ObjectSchema<
+  _<TypeFromShape<Shape, AnyObject>>,
+  AnyObject,
+  _<DefaultFromShape<Shape>>,
+  ""
+>
+
+// -----------------------------------------------------------------------------
+// Try Validate Sync
+// -----------------------------------------------------------------------------
+
+export type TryValidateSyncOnErrorRT<S extends Schema> = InferType<S> | void
+
+export type TryValidateSyncRT<
+  S extends Schema,
+  OnErrorRT extends TryValidateSyncOnErrorRT<S>,
+> = OnErrorRT extends InferType<S> ? InferType<S> : InferType<S> | undefined
+
+export type TryValidateSyncOptions<
+  S extends Schema,
+  OnErrorRT extends TryValidateSyncOnErrorRT<S>,
+> = ValidateOptions & {
+  onError?: (error: ValidationError) => OnErrorRT
+}
+
+export function tryValidateSync<S extends Schema>(
+  value: any,
+  schema: S,
+  options?: ValidateOptions,
+): InferType<S> | undefined
+
+export function tryValidateSync<
+  S extends Schema,
+  OnErrorRT extends TryValidateSyncOnErrorRT<S>,
+>(
+  value: any,
+  schema: S,
+  options?: ValidateOptions & {
+    onError: (error: ValidationError) => OnErrorRT
+  },
+): TryValidateSyncRT<S, OnErrorRT>
+
+export function tryValidateSync<
+  S extends Schema,
+  OnErrorRT extends TryValidateSyncOnErrorRT<S>,
+>(value: any, schema: S, options?: TryValidateSyncOptions<S, OnErrorRT>) {
+  const { onError, ...validateOptions } = options || {}
+
+  try {
+    return schema.validateSync(value, validateOptions)
+  } catch (error) {
+    if (!(error instanceof ValidationError)) throw error
+    else if (onError) return onError(error)
+  }
+}

package/src/utils/store.ts

@@ -0,0 +1,31 @@
+import type { Middleware, Reducer } from "@reduxjs/toolkit"
+import { configureStore } from "@reduxjs/toolkit"
+import { setupListeners } from "@reduxjs/toolkit/query"
+
+// The store setup is wrapped in `makeStore` to allow reuse
+// when setting up tests that need the same store config
+export function makeStore<R extends Reducer>({
+  reducer,
+  middlewares = [],
+  preloadedState = {},
+}: {
+  reducer: R
+  middlewares?: Middleware[]
+  preloadedState?: Partial<ReturnType<R>>
+}) {
+  const store = configureStore({
+    reducer,
+    // Adding the api middleware enables caching, invalidation, polling,
+    // and other useful features of `rtk-query`.
+    middleware: getDefaultMiddleware => {
+      return getDefaultMiddleware().concat(middlewares)
+    },
+    preloadedState,
+  })
+
+  // configure listeners using the provided defaults
+  // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors
+  setupListeners(store.dispatch)
+
+  return store
+}

package/src/utils/test.tsx

@@ -0,0 +1,82 @@
+import type { Middleware, Reducer, Store } from "@reduxjs/toolkit"
+import type { RenderOptions } from "@testing-library/react"
+import { render } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { PropsWithChildren, ReactElement } from "react"
+import { Provider } from "react-redux"
+
+import { makeStore } from "./store"
+
+export function renderWithUser(
+  ui: ReactElement,
+  renderOptions: RenderOptions = {},
+) {
+  return {
+    user: userEvent.setup(),
+    ...render(ui, renderOptions),
+  }
+}
+
+/**
+ * Renders the given React element with Redux Provider and custom store.
+ * This function is useful for testing components that are connected to the
+ * Redux store.
+ *
+ * @param ui - The React component or element to render.
+ * @param reducer - The root reducer to use for the store.
+ * @param extendedRenderOptions - Optional configuration options for rendering.
+ *  This includes `preloadedState` for initial Redux state and `store` for a
+ *  specific Redux store instance. Any additional properties are passed to React
+ *  Testing Library's render function.
+ * @returns An object containing the Redux store used in the render, User event
+ *  API for simulating user interactions in tests, and all of React Testing
+ *  Library's query functions for testing the component.
+ */
+export function renderWithStore<R extends Reducer>(
+  ui: ReactElement,
+  reducer: R,
+  extendedRenderOptions: RenderOptions & {
+    /**
+     * The middlewares used to create the Redux store.
+     */
+    middlewares?: Middleware[]
+
+    /**
+     * Defines a specific portion or the entire initial state for the Redux store.
+     * This is particularly useful for initializing the state in a
+     * controlled manner during testing, allowing components to be rendered
+     * with predetermined state conditions.
+     */
+    preloadedState?: Partial<ReturnType<R>>
+
+    /**
+     * Allows the use of a specific Redux store instance instead of a
+     * default or global store. This flexibility is beneficial when
+     * testing components with unique store requirements or when isolating
+     * tests from a global store state. The custom store should be configured
+     * to match the structure and middleware of the store used by the application.
+     *
+     * @default makeStore({reducer,middlewares,preloadedState})
+     */
+    store?: Store
+  } = {},
+) {
+  const {
+    middlewares,
+    preloadedState,
+    // Automatically create a store instance if no store was passed in
+    store = makeStore({ reducer, middlewares, preloadedState }),
+    ...renderOptions
+  } = extendedRenderOptions
+
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <Provider store={store}>{children}</Provider>
+  )
+
+  // Return an object with the store and all of RTL's query functions
+  return {
+    store,
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+  }
+}

package/src/utils/theme.tsx

@@ -0,0 +1,82 @@
+import type React from "react"
+import { Divider, type DividerProps, type ThemeOptions } from "@mui/material"
+import { type CommonProps } from "@mui/material/OverridableComponent"
+
+import _components from "../theme/components"
+
+export function insertDividerBetweenElements({
+  elements,
+  dividerProps,
+}: {
+  elements: React.ReactElement[]
+  dividerProps?: DividerProps
+}): React.ReactElement[] {
+  return elements.map((element, index) => (
+    <>
+      {element}
+      {index !== elements.length - 1 ? (
+        <Divider {...dividerProps} />
+      ) : undefined}
+    </>
+  ))
+}
+
+export function getStyleOverrides(
+  ownerState: CommonProps,
+  componentKey: keyof NonNullable<ThemeOptions["components"]>,
+  muiClassName: string = "root",
+  components: ThemeOptions["components"] = _components,
+): object {
+  if (components !== undefined) {
+    const component = components[componentKey]
+
+    if (
+      component !== undefined &&
+      "styleOverrides" in component &&
+      typeof component.styleOverrides === "object" &&
+      muiClassName in component.styleOverrides
+    ) {
+      const muiClass = (component.styleOverrides as Record<string, any>)[
+        muiClassName
+      ]
+
+      switch (typeof muiClass) {
+        case "function":
+          return muiClass({ ownerState })
+        case "object":
+          return muiClass
+      }
+    }
+  }
+
+  return {}
+}
+
+export function getClassNames(props: CommonProps): string[] {
+  return props.className?.split(" ") ?? []
+}
+
+export function includesClassNames(
+  propsOrClassNames: CommonProps | string[],
+  includes: string[],
+): boolean {
+  const classNames = Array.isArray(propsOrClassNames)
+    ? propsOrClassNames
+    : getClassNames(propsOrClassNames)
+
+  return includes.every(className => classNames.includes(className))
+}
+
+export function matchClassNames(
+  propsOrClassNames: CommonProps | string[],
+  pattern: string | RegExp,
+): RegExpMatchArray[] {
+  const classNames = Array.isArray(propsOrClassNames)
+    ? propsOrClassNames
+    : getClassNames(propsOrClassNames)
+
+  return classNames
+    .map(className => className.match(pattern))
+    .filter(match => match !== null)
+    .map(match => match as RegExpMatchArray)
+}

package/src/utils/window.ts

@@ -0,0 +1,9 @@
+export function configureFreshworksWidget(display: "open" | "hide"): void {
+  // @ts-expect-error defined in external script
+  window.FreshworksWidget(display)
+}
+
+export function toggleOneTrustInfoDisplay(): void {
+  // @ts-expect-error defined in external script
+  window.Optanon.ToggleInfoDisplay()
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": [
+      "vitest/globals",
+      "node"
+    ]
+  },
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/types/fixes.d.ts

@@ -0,0 +1,18 @@
+/*
+ * Namespace 'React' has no exported member 'StatelessComponent'
+ * in formik, react-mapbox-gl
+ */
+declare namespace React {
+  type StatelessComponent<P> = React.FunctionComponent<P>
+}
+
+declare module "*.svg" {
+  const content: string
+  export default content
+}
+
+/*
+ * Don't care about the typings of external libraries.
+ * All libraries without typings will be imported as `any`.
+ */
+declare module "*" {}

package/vite.config.ts

@@ -0,0 +1,21 @@
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vitest/config"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    open: true,
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "src/setupTests",
+    mockReset: true,
+    coverage: {
+      enabled: true,
+      provider: "istanbul",
+      reporter: ["html", "cobertura"],
+    },
+  },
+})