diff --git a/index.html b/index.html
new file mode 100644
index 0000000000..517da32e26
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+
+
+ React USWDS Playground
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index 755808a6bc..0245d9cd77 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"node": ">= 18"
},
"scripts": {
+ "dev": "vite",
"test": "vitest --run",
"test:debug": "vitest --inspect --pool threads --poolOptions.threads.singleThread",
"test:watch": "vitest",
@@ -53,8 +54,8 @@
"lint:fix": "tsc && eslint --ext js,jsx,ts,tsx src --fix && stylelint \"src/**/*.{css,scss}\" --fix",
"format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
"format:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
- "prepare": "husky && yarn build",
- "prepublishOnly": "yarn test && yarn lint",
+ "prepack": "yarn lint && yarn test && yarn build",
+ "prepare": "husky",
"happo": "happo --config ./.happo.cjs",
"happo-ci": "HAPPO_CONFIG_FILE='./.happo.cjs' happo-ci-github-actions --config ./.happo.cjs",
"contributors:add": "all-contributors add"
diff --git a/public/uswds.html b/public/uswds.html
new file mode 100644
index 0000000000..75476a56fb
--- /dev/null
+++ b/public/uswds.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/playground.tsx b/src/playground.tsx
new file mode 100644
index 0000000000..736bb52228
--- /dev/null
+++ b/src/playground.tsx
@@ -0,0 +1,83 @@
+import { createRoot } from 'react-dom/client'
+import React, { useEffect, useRef } from 'react'
+import { Search } from './components/Search/Search/Search'
+
+import '@uswds/uswds/css/uswds.css'
+import './styles/index.scss'
+
+function Playground({
+ compareHtml,
+ children,
+}: React.PropsWithChildren<{ compareHtml: string }>) {
+ const frameRef = useRef(null)
+ const reactRef = useRef(null)
+
+ useEffect(() => {
+ if (frameRef.current && reactRef.current) {
+ frameRef.current.addEventListener('load', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ ;(window as any).showHtml(
+ frameRef.current?.contentDocument?.body.innerHTML,
+ reactRef.current?.innerHTML
+ )
+ })
+ }
+ }, [frameRef.current, reactRef.current])
+
+ return (
+ <>
+
+ React USWDS Playground
+
+
+
USWDS
+
+
+
+
React USWDS
+
{children}
+
+
+
+ >
+ )
+}
+
+const container = document.querySelector('#root')
+
+if (!container) throw new Error('Container element not found')
+
+const root = createRoot(container)
+
+root.render(
+
+ void 0} />
+
+)
diff --git a/src/serverSideTest.js b/src/serverSideTest.js
index 3bf7ea37e4..8216529451 100644
--- a/src/serverSideTest.js
+++ b/src/serverSideTest.js
@@ -5,6 +5,7 @@
* and takes place after a webpack build.
*/
+// eslint-disable-next-line import/no-unresolved
import library from '../lib/index.cjs'
console.log('server-side test running')