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

+