From 5cabd051d697b02db9b5a40ccd28d8505a6daee4 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 16:37:23 -0500 Subject: [PATCH 01/12] default playground --- index.html | 9 +++++++++ package.json | 2 +- public/uswds.svg | 9 +++++++++ src/playground.tsx | 11 +++++++++++ 4 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 index.html create mode 100644 public/uswds.svg create mode 100644 src/playground.tsx diff --git a/index.html b/index.html new file mode 100644 index 0000000000..d8ad6e0837 --- /dev/null +++ b/index.html @@ -0,0 +1,9 @@ + + + React USWDS Playground + + + +
+ + diff --git a/package.json b/package.json index 755808a6bc..cdb2950e26 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "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", + "prepare": "yarn build", "prepublishOnly": "yarn test && yarn lint", "happo": "happo --config ./.happo.cjs", "happo-ci": "HAPPO_CONFIG_FILE='./.happo.cjs' happo-ci-github-actions --config ./.happo.cjs", diff --git a/public/uswds.svg b/public/uswds.svg new file mode 100644 index 0000000000..27ecd4bac1 --- /dev/null +++ b/public/uswds.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/playground.tsx b/src/playground.tsx new file mode 100644 index 0000000000..fd7bdeaaf3 --- /dev/null +++ b/src/playground.tsx @@ -0,0 +1,11 @@ +import { createRoot } from 'react-dom/client' +import React from 'react' +import { LandingPage } from './stories/templates/landing.stories.js' + +const container = document.querySelector('#root') + +if (!container) throw new Error('Container element not found') + +const root = createRoot(container) + +root.render() From 2dde39b4cf674074f3b5185a899650f3704baefe Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 16:43:49 -0500 Subject: [PATCH 02/12] test --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cdb2950e26..ac903f002d 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "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": "yarn build", + "prepare": "yarn vite build", "prepublishOnly": "yarn test && yarn lint", "happo": "happo --config ./.happo.cjs", "happo-ci": "HAPPO_CONFIG_FILE='./.happo.cjs' happo-ci-github-actions --config ./.happo.cjs", From 24116bbbf2023116783ff255628814326341dfee Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 16:46:29 -0500 Subject: [PATCH 03/12] troubleshooting --- vite.config.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 82782cf49f..f00c3fa487 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -19,7 +19,7 @@ const uswdsIncludePaths = [ /** * Pass `--mode uswds` to build uswds assets */ -export default defineConfig(({ mode: _mode }) => { +export const lib = defineConfig(({ mode: _mode }) => { const isUswds = _mode === 'uswds' const isBundles = _mode === 'bundles' const mode = isUswds ? 'production' : isBundles ? 'test' : _mode @@ -150,3 +150,7 @@ export default defineConfig(({ mode: _mode }) => { }, } }) + +export default defineConfig({ + plugins: [react()], +}) From b7c0295011488801c373c4a1c0360bcd6c1a1558 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 16:47:51 -0500 Subject: [PATCH 04/12] troubleshooting --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ac903f002d..5deef82392 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "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": "yarn vite build", + "prepare": "echo 'PREPARE STEP HERE'", "prepublishOnly": "yarn test && yarn lint", "happo": "happo --config ./.happo.cjs", "happo-ci": "HAPPO_CONFIG_FILE='./.happo.cjs' happo-ci-github-actions --config ./.happo.cjs", From 5bf6f98e67b97086efe15901b5aecf01446a3391 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 17:24:07 -0500 Subject: [PATCH 05/12] dev mode --- index.html | 2 +- package.json | 1 + src/playground.tsx | 3 +++ vite.config.ts | 6 +----- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d8ad6e0837..03d50c6aca 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ React USWDS Playground - +
diff --git a/package.json b/package.json index 5deef82392..0331c0a6dd 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", diff --git a/src/playground.tsx b/src/playground.tsx index fd7bdeaaf3..8e6c84b417 100644 --- a/src/playground.tsx +++ b/src/playground.tsx @@ -2,6 +2,9 @@ import { createRoot } from 'react-dom/client' import React from 'react' import { LandingPage } from './stories/templates/landing.stories.js' +import '@uswds/uswds/css/uswds.css' +import './styles/index.scss' + const container = document.querySelector('#root') if (!container) throw new Error('Container element not found') diff --git a/vite.config.ts b/vite.config.ts index f00c3fa487..82782cf49f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -19,7 +19,7 @@ const uswdsIncludePaths = [ /** * Pass `--mode uswds` to build uswds assets */ -export const lib = defineConfig(({ mode: _mode }) => { +export default defineConfig(({ mode: _mode }) => { const isUswds = _mode === 'uswds' const isBundles = _mode === 'bundles' const mode = isUswds ? 'production' : isBundles ? 'test' : _mode @@ -150,7 +150,3 @@ export const lib = defineConfig(({ mode: _mode }) => { }, } }) - -export default defineConfig({ - plugins: [react()], -}) From 67f0293f51cee29db1d73daf4917bbd0cc56aa35 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 17:44:04 -0500 Subject: [PATCH 06/12] adjust lifecycle --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0331c0a6dd..6c34a82a80 100644 --- a/package.json +++ b/package.json @@ -54,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": "echo 'PREPARE STEP HERE'", - "prepublishOnly": "yarn test && yarn lint", + "prepack": "husky && yarn build", + "prepublish": "yarn test && yarn lint", "happo": "happo --config ./.happo.cjs", "happo-ci": "HAPPO_CONFIG_FILE='./.happo.cjs' happo-ci-github-actions --config ./.happo.cjs", "contributors:add": "all-contributors add" From c7f8217c9bf21aaf0533d0ef39e96e11a4510031 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 17:47:56 -0500 Subject: [PATCH 07/12] lifecycle fixes --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6c34a82a80..aa2905448f 100644 --- a/package.json +++ b/package.json @@ -54,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}\"", - "prepack": "husky && yarn build", - "prepublish": "yarn test && yarn lint", + "prepack": "yarn test && yarn lint && yarn build", + "prepublish": "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" From abe4a5766587ae22ae26298ebab1c208bdf99d7d Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 18:01:57 -0500 Subject: [PATCH 08/12] lifecycle fixes --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index aa2905448f..0245d9cd77 100644 --- a/package.json +++ b/package.json @@ -54,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}\"", - "prepack": "yarn test && yarn lint && yarn build", - "prepublish": "husky", + "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" From 0931e5c7fdd98e2c344f4851feea279ddfe12530 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 18:07:53 -0500 Subject: [PATCH 09/12] not needed --- public/uswds.svg | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 public/uswds.svg diff --git a/public/uswds.svg b/public/uswds.svg deleted file mode 100644 index 27ecd4bac1..0000000000 --- a/public/uswds.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - From 9678b4e96332253e0f6f9d15b3d039412f23e6a8 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Fri, 22 Mar 2024 18:43:48 -0500 Subject: [PATCH 10/12] fix eslint error --- src/serverSideTest.js | 1 + 1 file changed, 1 insertion(+) 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') From 0d6b5bad9647c0f7be413dcb9024e3305ba8a607 Mon Sep 17 00:00:00 2001 From: Joseph Andersen <12385932+jpandersen87@users.noreply.github.com> Date: Mon, 25 Mar 2024 18:57:24 -0500 Subject: [PATCH 11/12] issue comparison template --- index.html | 52 ++++++++++++++++++++++++++++++++ public/uswds.html | 30 +++++++++++++++++++ src/playground.tsx | 75 ++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 public/uswds.html diff --git a/index.html b/index.html index 03d50c6aca..517da32e26 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,60 @@ React USWDS Playground + + + + + +
+ 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 index 8e6c84b417..736bb52228 100644 --- a/src/playground.tsx +++ b/src/playground.tsx @@ -1,14 +1,83 @@ import { createRoot } from 'react-dom/client' -import React from 'react' -import { LandingPage } from './stories/templates/landing.stories.js' +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

+