trussworks · jpandersen87 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024
@@ -0,0 +1,61 @@
+<html>
+  <head>
+    <title>React USWDS Playground</title>
+    <script type="module" src="./src/playground.tsx"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css"
+      integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer" />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"
+      integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+      data-manual></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"
+      integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/prettier/2.0.3/standalone.js"
+      integrity="sha512-kZgYwuJlmuFDs982ccZLP9D+TIz/FqkxFQe+G0/TY11X4WqwUZn6P263vtzyt56GThngcoOD9JFvdJsT+D52ow=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/prettier/2.0.3/parser-html.min.js"
+      integrity="sha512-DrpA7iAMX9jbdDayBwvC+lNpTJRrjb7p1YoK+R0qLmdKOSwLkg6n7cjHOfGP5gnB4RxGdUim1CeKG3UD2PYO5w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
+    <script>
+      Prism.hooks.add('before-highlight', function (env) {
+        env.code = env.element.innerText
+      })
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      async function format(str) {
+        const formatStr = await prettier.format(str, {
+          parser: 'html',
+          plugins: prettierPlugins,
+        })
+
+        return formatStr
+      }
+
+      async function showHtml(uswdsStr, reactUswdsStr) {
+        const uswdsBox = document.getElementById('uswdsBox')
+        const reactUswdsBox = document.getElementById('reactUswdsBox')
+
+        uswdsBox.innerText = await format(uswdsStr)
+        reactUswdsBox.innerText = await format(reactUswdsStr)
+
+        Prism.highlightAll()
+      }
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "node": ">= 20"
   },
   "scripts": {
+    "dev": "vite",
     "test": "vitest --run",
     "test:debug": "vitest --inspect --pool threads --poolOptions.threads.singleThread",
     "test:watch": "vitest",
@@ -51,8 +52,8 @@
     "lint:fix": "tsc && eslint 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}\"",
-    "postinstall": "husky",
     "prepack": "yarn lint && yarn test && yarn build",
+    "prepare": "husky",
     "happo": "happo --config ./.happo.cjs",
     "happo-ci": "HAPPO_CONFIG_FILE='./.happo.cjs' npx -p happo.io happo-ci-github-actions --config ./.happo.cjs",
     "contributors:add": "all-contributors add"

@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.1/css/uswds.min.css"
+      integrity="sha512-bcuUpRrTZ9QzMZIs+vutspdGnAmWU0pV2eka+7ifli70qy3AavSj0pQMBMtlXhnGpESyODLagSqxbuYm6I3DPw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer" />
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.1/js/uswds.min.js"
+      integrity="sha512-4MzzT9vhRTRLKGLdaXcBWNNS6rKzt9m76thhMVwBWKBJkvANnOyVwS6WPmteiLU1jM54c+NyY+/9PF6kQ0GIrg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+      defer></script>
+  </head>
+  <body>
+    <form class="usa-search" role="search">
+      <label class="usa-sr-only" for="search-field">Search</label>
+      <input class="usa-input" id="search-field" type="search" name="search" />
+      <button class="usa-button" type="submit">
+        <span class="usa-search__submit-text">Search </span
+        ><img
+          src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.1/img/usa-icons-bg/search--white.svg"
+          class="usa-search__submit-icon"
+          alt="Search" />
+      </button>
+    </form>
+  </body>
+</html>
@@ -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<HTMLIFrameElement>(null)
+  const reactRef = useRef<HTMLDivElement>(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 (
+    <>
+      <style>
+        {`
+      iframe {
+        width: 100%;
+        border: transparent;
+      }
+
+      body {
+        margin: 10px !important;
+      }
+
+      .row {
+        display: flex;
+        gap: 5px;
+      }
+
+      .col {
+        flex: 1;
+      }
+      `}
+      </style>
+      <h1>React USWDS Playground</h1>
+      <div className="row">
+        <div className="col">
+          <h2>USWDS</h2>
+          <iframe src={compareHtml} ref={frameRef} title="uswds" />
+        </div>
+        <div className="col">
+          <h2>React USWDS</h2>
+          <div ref={reactRef}>{children}</div>
+        </div>
+      </div>
+      <div className="row">
+        <pre className="col">
+          <code id="uswdsBox" className="language-markup"></code>
+        </pre>
+        <pre className="col">
+          <code id="reactUswdsBox" className="language-markup"></code>
+        </pre>
+      </div>
+    </>
+  )
+}
+
+const container = document.querySelector('#root')
+
+if (!container) throw new Error('Container element not found')
+
+const root = createRoot(container)
+
+root.render(
+  <Playground compareHtml="uswds.html">
+    <Search onSubmit={() => void 0} />
+  </Playground>
+)
@@ -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')