From aa01dead51c68751a561e17991067d83731c93b3 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Mon, 22 Jul 2024 09:58:23 +0100 Subject: [PATCH 1/4] =?UTF-8?q?feat(pie-monorepo):=20DSW-2056=20added=20pi?= =?UTF-8?q?e-webc=20integration=20to=20next=2010=20ex=E2=80=A6=20(#1617)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(pie-monorepo): DSW-2056 added pie-webc integration to next 10 example app --- .changeset/curly-tomatoes-leave.md | 5 +++++ apps/examples/wc-next10/ButtonSizes.js | 3 +-- apps/examples/wc-next10/Counter.js | 2 +- apps/examples/wc-next10/VariantSwitch.js | 3 +-- apps/examples/wc-next10/next.config.js | 1 + apps/examples/wc-next10/package.json | 3 +-- yarn.lock | 1 + 7 files changed, 11 insertions(+), 7 deletions(-) create mode 100644 .changeset/curly-tomatoes-leave.md diff --git a/.changeset/curly-tomatoes-leave.md b/.changeset/curly-tomatoes-leave.md new file mode 100644 index 0000000000..9d883f2511 --- /dev/null +++ b/.changeset/curly-tomatoes-leave.md @@ -0,0 +1,5 @@ +--- +"wc-next10": minor +--- + +[Added] pie-webc integration to next10 example app diff --git a/apps/examples/wc-next10/ButtonSizes.js b/apps/examples/wc-next10/ButtonSizes.js index 43f6dfa5d0..1a79a45ba9 100644 --- a/apps/examples/wc-next10/ButtonSizes.js +++ b/apps/examples/wc-next10/ButtonSizes.js @@ -1,6 +1,5 @@ import React from 'react'; -import { sizes } from '@justeattakeaway/pie-button'; -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton, sizes } from '@justeattakeaway/pie-webc/react/button'; export default function ButtonSizes () { return ( diff --git a/apps/examples/wc-next10/Counter.js b/apps/examples/wc-next10/Counter.js index f08cc83326..ee3a41dd07 100644 --- a/apps/examples/wc-next10/Counter.js +++ b/apps/examples/wc-next10/Counter.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton } from '@justeattakeaway/pie-webc/react/button'; export default function Counter () { const [count, setCount] = useState(0); diff --git a/apps/examples/wc-next10/VariantSwitch.js b/apps/examples/wc-next10/VariantSwitch.js index 06464d02a5..b225d83c21 100644 --- a/apps/examples/wc-next10/VariantSwitch.js +++ b/apps/examples/wc-next10/VariantSwitch.js @@ -1,6 +1,5 @@ import React, { useState, useRef } from 'react'; -import { variants } from '@justeattakeaway/pie-button'; -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton, variants } from '@justeattakeaway/pie-webc/react/button'; export default function VariantSwitch () { const variantIndex = useRef(0); diff --git a/apps/examples/wc-next10/next.config.js b/apps/examples/wc-next10/next.config.js index ed3df9e95e..b739a249e2 100644 --- a/apps/examples/wc-next10/next.config.js +++ b/apps/examples/wc-next10/next.config.js @@ -2,6 +2,7 @@ const path = require('path'); const transpileModules = [ '@justeattakeaway/pie-button', + '@justeattakeaway/pie-webc', '@justeattakeaway/pie-cookie-banner', '@lit/react', 'lit' diff --git a/apps/examples/wc-next10/package.json b/apps/examples/wc-next10/package.json index c5ac7a1fe0..551c57404c 100644 --- a/apps/examples/wc-next10/package.json +++ b/apps/examples/wc-next10/package.json @@ -10,9 +10,8 @@ "lint:examples": "eslint ." }, "dependencies": { - "@justeattakeaway/pie-button": "0.47.8", - "@justeattakeaway/pie-cookie-banner": "0.21.0", "@justeattakeaway/pie-css": "0.12.1", + "@justeattakeaway/pie-webc": "0.5.13", "@lit/react": "1.0.2", "next": "10.2.3", "next-transpile-modules": "4.1.0", diff --git a/yarn.lock b/yarn.lock index fb402876dd..fd6e7e236b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -38847,6 +38847,7 @@ __metadata: "@justeattakeaway/pie-button": 0.47.8 "@justeattakeaway/pie-cookie-banner": 0.21.0 "@justeattakeaway/pie-css": 0.12.1 + "@justeattakeaway/pie-webc": 0.5.13 "@lit/react": 1.0.2 babel-loader: 8 eslint: 8.37.0 From fb5138a7a9ddcce075dd88e75db193918bd4916d Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Mon, 22 Jul 2024 14:11:49 +0100 Subject: [PATCH 2/4] feat(pie-monorepo): DSW-2056 pie webc integration next13 (#1613) * feat(pie-monorepo): DSW-2056 adds pie-webc integration to next13 example apps * feat(pie-monorepo): DSW-2056 added back readme contents * feat(pie-monorepo): DSW-2056 pr comments --- .changeset/blue-yaks-mix.md | 5 + apps/examples/wc-next13/.eslintrc.cjs | 21 + apps/examples/wc-next13/.gitignore | 61 +-- apps/examples/wc-next13/README.md | 11 +- apps/examples/wc-next13/index.html | 13 + apps/examples/wc-next13/package.json | 25 +- apps/examples/wc-next13/pages/_app.tsx | 6 - apps/examples/wc-next13/pages/_document.tsx | 15 - apps/examples/wc-next13/pages/index.tsx | 69 --- apps/examples/wc-next13/public/favicon.ico | Bin 25931 -> 0 bytes .../{styles/styles.css => src/App.css} | 10 - apps/examples/wc-next13/src/App.jsx | 17 + apps/examples/wc-next13/src/main.jsx | 9 + apps/examples/wc-next13/tsconfig.json | 23 - apps/examples/wc-next13/vite.config.js | 9 + yarn.lock | 467 ++++++++++++++---- 16 files changed, 502 insertions(+), 259 deletions(-) create mode 100644 .changeset/blue-yaks-mix.md create mode 100644 apps/examples/wc-next13/.eslintrc.cjs create mode 100644 apps/examples/wc-next13/index.html delete mode 100644 apps/examples/wc-next13/pages/_app.tsx delete mode 100644 apps/examples/wc-next13/pages/_document.tsx delete mode 100644 apps/examples/wc-next13/pages/index.tsx delete mode 100644 apps/examples/wc-next13/public/favicon.ico rename apps/examples/wc-next13/{styles/styles.css => src/App.css} (88%) create mode 100644 apps/examples/wc-next13/src/App.jsx create mode 100644 apps/examples/wc-next13/src/main.jsx delete mode 100644 apps/examples/wc-next13/tsconfig.json create mode 100644 apps/examples/wc-next13/vite.config.js diff --git a/.changeset/blue-yaks-mix.md b/.changeset/blue-yaks-mix.md new file mode 100644 index 0000000000..ee7c2e1615 --- /dev/null +++ b/.changeset/blue-yaks-mix.md @@ -0,0 +1,5 @@ +--- +"wc-next13": minor +--- + +[Added] - pie-webc integration to next13 example apps diff --git a/apps/examples/wc-next13/.eslintrc.cjs b/apps/examples/wc-next13/.eslintrc.cjs new file mode 100644 index 0000000000..3e212e1d43 --- /dev/null +++ b/apps/examples/wc-next13/.eslintrc.cjs @@ -0,0 +1,21 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + settings: { react: { version: '18.2' } }, + plugins: ['react-refresh'], + rules: { + 'react/jsx-no-target-blank': 'off', + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/apps/examples/wc-next13/.gitignore b/apps/examples/wc-next13/.gitignore index f287176c62..a547bf36d8 100644 --- a/apps/examples/wc-next13/.gitignore +++ b/apps/examples/wc-next13/.gitignore @@ -1,43 +1,24 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -.yarn/* -!.yarn/patches -!.yarn/plugins -!.yarn/releases -!.yarn/sdks -!.yarn/versions - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* -.pnpm-debug.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/apps/examples/wc-next13/README.md b/apps/examples/wc-next13/README.md index 85d02da2f3..5ea919416d 100644 --- a/apps/examples/wc-next13/README.md +++ b/apps/examples/wc-next13/README.md @@ -1,4 +1,11 @@ -## How to use Next.js App +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh ### `yarn dev` @@ -39,4 +46,4 @@ React 18 and previous versions don't handle web components and custom elements o Therefore, in order to import the web component into your React application, please use: -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton } from '@justeattakeaway/pie-webc/react/button.js'; diff --git a/apps/examples/wc-next13/index.html b/apps/examples/wc-next13/index.html new file mode 100644 index 0000000000..0c589eccd4 --- /dev/null +++ b/apps/examples/wc-next13/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/apps/examples/wc-next13/package.json b/apps/examples/wc-next13/package.json index 601bc5c1f9..88534a1a4f 100644 --- a/apps/examples/wc-next13/package.json +++ b/apps/examples/wc-next13/package.json @@ -1,17 +1,17 @@ { "name": "wc-next13", - "version": "0.3.43", "private": true, + "version": "0.3.43", + "type": "module", "scripts": { - "dev": "NODE_OPTIONS=--conditions=development next dev", - "build:examples": "yarn build-static", - "build-static": "next build && next export -o build", - "start": "next start", - "lint:examples": "next lint" + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" }, "dependencies": { - "@justeattakeaway/pie-button": "0.47.8", "@justeattakeaway/pie-css": "0.12.1", + "@justeattakeaway/pie-webc": "0.5.13", "@lit-labs/nextjs": "0.2.0", "@lit/react": "1.0.5", "next": "13.5.5", @@ -19,11 +19,14 @@ "react-dom": "18.3.1" }, "devDependencies": { - "@types/node": "20.9.3", + "@types/react": "18.3.3", "@types/react-dom": "18.3.0", - "eslint": "8.37.0", - "eslint-config-next": "13.5.5", - "typescript": "5.4.5" + "@vitejs/plugin-react": "4.3.1", + "eslint": "8.57.0", + "eslint-plugin-react": "7.34.3", + "eslint-plugin-react-hooks": "4.6.2", + "eslint-plugin-react-refresh": "0.4.7", + "vite": "5.3.4" }, "volta": { "extends": "../../../package.json" diff --git a/apps/examples/wc-next13/pages/_app.tsx b/apps/examples/wc-next13/pages/_app.tsx deleted file mode 100644 index 50e5a5bc24..0000000000 --- a/apps/examples/wc-next13/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import type { AppProps } from 'next/app'; -import '../styles/styles.css'; - -export default function App ({ Component, pageProps }: AppProps) { - return ; -} diff --git a/apps/examples/wc-next13/pages/_document.tsx b/apps/examples/wc-next13/pages/_document.tsx deleted file mode 100644 index cadc422646..0000000000 --- a/apps/examples/wc-next13/pages/_document.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { - Html, Head, Main, NextScript, -} from 'next/document'; - -export default function Document () { - return ( - - - -
- - - - ); -} diff --git a/apps/examples/wc-next13/pages/index.tsx b/apps/examples/wc-next13/pages/index.tsx deleted file mode 100644 index e597b7b5bb..0000000000 --- a/apps/examples/wc-next13/pages/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useState, useRef } from 'react'; -import Head from 'next/head'; -import { - PieButton, ButtonProps, sizes, variants, -} from '@justeattakeaway/pie-button/dist/react'; -import '@justeattakeaway/pie-css'; - -export default function Home () { - const variantIndex = useRef(0); - const [count, setCount] = useState(0); - const [variantName, setVariantName] = useState('primary'); - - const increment = () => setCount(count + 1); - const decrement = () => setCount(count - 1); - const switchVariant = () => { - variantIndex.current += 1; - const variant: ButtonProps['variant'] = variants[variantIndex.current % variants.length]; - - setVariantName(variant); - }; - - return ( - <> - - Create Next App - - - -
-

Test click event

-
-

Counter

-
- decrement -
- Counter: { count } -
- increment -
-
-

Test props

-
-

Click the button to switch the variant

-
- - Switch variant - -
Variant: {variantName}
-
-
-
-

Button sizes

-
- { - sizes - .map((key, index) => { - const size: ButtonProps['size'] = sizes[index]; - - return ( - {key.toLowerCase()} - ); - }) - } -
-
-
- - ); -} diff --git a/apps/examples/wc-next13/public/favicon.ico b/apps/examples/wc-next13/public/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/apps/examples/wc-next13/styles/styles.css b/apps/examples/wc-next13/src/App.css similarity index 88% rename from apps/examples/wc-next13/styles/styles.css rename to apps/examples/wc-next13/src/App.css index 1c051c681e..f685d4172a 100644 --- a/apps/examples/wc-next13/styles/styles.css +++ b/apps/examples/wc-next13/src/App.css @@ -25,13 +25,3 @@ * { font-family: JETSansDigital, Arial, sans-serif; } - -.flex-wrapper { - display: flex; - justify-content: flex-start; - align-items: center; -} - -.padding { - padding: 1rem; -} diff --git a/apps/examples/wc-next13/src/App.jsx b/apps/examples/wc-next13/src/App.jsx new file mode 100644 index 0000000000..914abe6a12 --- /dev/null +++ b/apps/examples/wc-next13/src/App.jsx @@ -0,0 +1,17 @@ +import './App.css' +import { PieButton } from "@justeattakeaway/pie-webc/react/button.js"; +import '@justeattakeaway/pie-css'; + +function App() { + return ( + <> +
+ WC Button in NextJS! + WC Button in NextJS! + WC Button in NextJS! +
+ + ) +} + +export default App diff --git a/apps/examples/wc-next13/src/main.jsx b/apps/examples/wc-next13/src/main.jsx new file mode 100644 index 0000000000..51a8c58255 --- /dev/null +++ b/apps/examples/wc-next13/src/main.jsx @@ -0,0 +1,9 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/apps/examples/wc-next13/tsconfig.json b/apps/examples/wc-next13/tsconfig.json deleted file mode 100644 index 8b8e58111e..0000000000 --- a/apps/examples/wc-next13/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] -} diff --git a/apps/examples/wc-next13/vite.config.js b/apps/examples/wc-next13/vite.config.js new file mode 100644 index 0000000000..c15334f815 --- /dev/null +++ b/apps/examples/wc-next13/vite.config.js @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + resolve: { + alias: {}, + }, +}); diff --git a/yarn.lock b/yarn.lock index fd6e7e236b..e05de7ba38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -858,6 +858,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.24.5": + version: 7.24.9 + resolution: "@babel/core@npm:7.24.9" + dependencies: + "@ampproject/remapping": ^2.2.0 + "@babel/code-frame": ^7.24.7 + "@babel/generator": ^7.24.9 + "@babel/helper-compilation-targets": ^7.24.8 + "@babel/helper-module-transforms": ^7.24.9 + "@babel/helpers": ^7.24.8 + "@babel/parser": ^7.24.8 + "@babel/template": ^7.24.7 + "@babel/traverse": ^7.24.8 + "@babel/types": ^7.24.9 + convert-source-map: ^2.0.0 + debug: ^4.1.0 + gensync: ^1.0.0-beta.2 + json5: ^2.2.3 + semver: ^6.3.1 + checksum: eae273bee154d6a059e742a2bb7a58b03438a1f70d7909887a28258b29556dc99bcd5cbd41f13cd4755a20b0baf5e82731acb1d3690e02b7a9300fb6d1950e2c + languageName: node + linkType: hard + "@babel/eslint-parser@npm:7.24.7": version: 7.24.7 resolution: "@babel/eslint-parser@npm:7.24.7" @@ -909,6 +932,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.24.9": + version: 7.24.10 + resolution: "@babel/generator@npm:7.24.10" + dependencies: + "@babel/types": ^7.24.9 + "@jridgewell/gen-mapping": ^0.3.5 + "@jridgewell/trace-mapping": ^0.3.25 + jsesc: ^2.5.1 + checksum: eb13806e9eb76932ea5205502a85ea650a991c7a6f757fbe859176f6d9b34b3da5a2c1f52a2c24fdbe0045a90438fe6889077e338cdd6c727619dee925af1ba6 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.18.6": version: 7.18.6 resolution: "@babel/helper-annotate-as-pure@npm:7.18.6" @@ -1085,6 +1120,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.24.9": + version: 7.24.9 + resolution: "@babel/helper-module-transforms@npm:7.24.9" + dependencies: + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-module-imports": ^7.24.7 + "@babel/helper-simple-access": ^7.24.7 + "@babel/helper-split-export-declaration": ^7.24.7 + "@babel/helper-validator-identifier": ^7.24.7 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: ffcf11b678a8d3e6a243285cb5262c37f4d47d507653420c1f7f0bd27076e88177f2b7158850d1a470fcfe923426a2e6571c554c455a90c9755ff488ac36ac40 + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-optimise-call-expression@npm:7.24.7" @@ -2271,7 +2321,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx-self@npm:^7.18.6": +"@babel/plugin-transform-react-jsx-self@npm:^7.18.6, @babel/plugin-transform-react-jsx-self@npm:^7.24.5": version: 7.24.7 resolution: "@babel/plugin-transform-react-jsx-self@npm:7.24.7" dependencies: @@ -2282,7 +2332,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx-source@npm:^7.19.6": +"@babel/plugin-transform-react-jsx-source@npm:^7.19.6, @babel/plugin-transform-react-jsx-source@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-react-jsx-source@npm:7.24.7" dependencies: @@ -3072,6 +3122,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.24.9": + version: 7.24.9 + resolution: "@babel/types@npm:7.24.9" + dependencies: + "@babel/helper-string-parser": ^7.24.8 + "@babel/helper-validator-identifier": ^7.24.7 + to-fast-properties: ^2.0.0 + checksum: 15cb05c45be5d4c49a749575d3742bd005d0e2e850c13fb462754983a5bc1063fbc8f6566246fc064e3e8b21a5a75a37a948f1b3f27189cc90b236fee93f5e51 + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -4256,6 +4317,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/aix-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/aix-ppc64@npm:0.21.5" + conditions: os=aix & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/android-arm64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/android-arm64@npm:0.17.19" @@ -4284,6 +4352,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm64@npm:0.21.5" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/android-arm@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/android-arm@npm:0.17.19" @@ -4312,6 +4387,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm@npm:0.21.5" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@esbuild/android-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/android-x64@npm:0.17.19" @@ -4340,6 +4422,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-x64@npm:0.21.5" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + "@esbuild/darwin-arm64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/darwin-arm64@npm:0.17.19" @@ -4368,6 +4457,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-arm64@npm:0.21.5" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/darwin-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/darwin-x64@npm:0.17.19" @@ -4396,6 +4492,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-x64@npm:0.21.5" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@esbuild/freebsd-arm64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/freebsd-arm64@npm:0.17.19" @@ -4424,6 +4527,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-arm64@npm:0.21.5" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/freebsd-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/freebsd-x64@npm:0.17.19" @@ -4452,6 +4562,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-x64@npm:0.21.5" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/linux-arm64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-arm64@npm:0.17.19" @@ -4480,6 +4597,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm64@npm:0.21.5" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/linux-arm@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-arm@npm:0.17.19" @@ -4508,6 +4632,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm@npm:0.21.5" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "@esbuild/linux-ia32@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-ia32@npm:0.17.19" @@ -4536,6 +4667,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ia32@npm:0.21.5" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/linux-loong64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-loong64@npm:0.17.19" @@ -4564,6 +4702,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-loong64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-loong64@npm:0.21.5" + conditions: os=linux & cpu=loong64 + languageName: node + linkType: hard + "@esbuild/linux-mips64el@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-mips64el@npm:0.17.19" @@ -4592,6 +4737,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-mips64el@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-mips64el@npm:0.21.5" + conditions: os=linux & cpu=mips64el + languageName: node + linkType: hard + "@esbuild/linux-ppc64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-ppc64@npm:0.17.19" @@ -4620,6 +4772,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ppc64@npm:0.21.5" + conditions: os=linux & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/linux-riscv64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-riscv64@npm:0.17.19" @@ -4648,6 +4807,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-riscv64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-riscv64@npm:0.21.5" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + "@esbuild/linux-s390x@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-s390x@npm:0.17.19" @@ -4676,6 +4842,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-s390x@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-s390x@npm:0.21.5" + conditions: os=linux & cpu=s390x + languageName: node + linkType: hard + "@esbuild/linux-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/linux-x64@npm:0.17.19" @@ -4704,6 +4877,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-x64@npm:0.21.5" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + "@esbuild/netbsd-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/netbsd-x64@npm:0.17.19" @@ -4732,6 +4912,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/netbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/netbsd-x64@npm:0.21.5" + conditions: os=netbsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/openbsd-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/openbsd-x64@npm:0.17.19" @@ -4760,6 +4947,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/openbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/openbsd-x64@npm:0.21.5" + conditions: os=openbsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/sunos-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/sunos-x64@npm:0.17.19" @@ -4788,6 +4982,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/sunos-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/sunos-x64@npm:0.21.5" + conditions: os=sunos & cpu=x64 + languageName: node + linkType: hard + "@esbuild/win32-arm64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/win32-arm64@npm:0.17.19" @@ -4816,6 +5017,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-arm64@npm:0.21.5" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/win32-ia32@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/win32-ia32@npm:0.17.19" @@ -4844,6 +5052,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-ia32@npm:0.21.5" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/win32-x64@npm:0.17.19": version: 0.17.19 resolution: "@esbuild/win32-x64@npm:0.17.19" @@ -4872,6 +5087,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-x64@npm:0.21.5" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0": version: 4.4.0 resolution: "@eslint-community/eslint-utils@npm:4.4.0" @@ -6318,15 +6540,6 @@ __metadata: languageName: node linkType: hard -"@next/eslint-plugin-next@npm:13.5.5": - version: 13.5.5 - resolution: "@next/eslint-plugin-next@npm:13.5.5" - dependencies: - glob: 7.1.7 - checksum: 760747343864e9edfefbed686dba2b06319a62c327f5357c44b8f66f558f4a6696712e5ce88166cc6f637b2ed5cae3b7f8261f53c074776c778308912979db88 - languageName: node - linkType: hard - "@next/polyfill-module@npm:10.2.3": version: 10.2.3 resolution: "@next/polyfill-module@npm:10.2.3" @@ -8801,7 +9014,7 @@ __metadata: languageName: node linkType: hard -"@rushstack/eslint-patch@npm:^1.1.0, @rushstack/eslint-patch@npm:^1.1.3, @rushstack/eslint-patch@npm:^1.3.3": +"@rushstack/eslint-patch@npm:^1.1.0, @rushstack/eslint-patch@npm:^1.1.3": version: 1.10.3 resolution: "@rushstack/eslint-patch@npm:1.10.3" checksum: 1042779367ee102576a3c132f052d718d7111fee9f815758a72b21e8145620f7d3403c14fcde3b4cfa1cbc14b08b8519151ff77d0f353bf647f0a0a16eafdef5 @@ -10405,7 +10618,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14": +"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.20.5": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -11061,15 +11274,6 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:20.9.3": - version: 20.9.3 - resolution: "@types/node@npm:20.9.3" - dependencies: - undici-types: ~5.26.4 - checksum: 0cfbfd2a8bd18acc75aa4d7685c7dcf56344f48addd4041d306dc194f3132f8014d56fd49fcb26bcdf400b883f9527e5e2beaf52dfce029cef15c69b8ed2e72a - languageName: node - linkType: hard - "@types/node@npm:^12.7.1": version: 12.20.55 resolution: "@types/node@npm:12.20.55" @@ -11507,24 +11711,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0": - version: 6.21.0 - resolution: "@typescript-eslint/parser@npm:6.21.0" - dependencies: - "@typescript-eslint/scope-manager": 6.21.0 - "@typescript-eslint/types": 6.21.0 - "@typescript-eslint/typescript-estree": 6.21.0 - "@typescript-eslint/visitor-keys": 6.21.0 - debug: ^4.3.4 - peerDependencies: - eslint: ^7.0.0 || ^8.0.0 - peerDependenciesMeta: - typescript: - optional: true - checksum: 162fe3a867eeeffda7328bce32dae45b52283c68c8cb23258fb9f44971f761991af61f71b8c9fe1aa389e93dfe6386f8509c1273d870736c507d76dd40647b68 - languageName: node - linkType: hard - "@typescript-eslint/scope-manager@npm:5.62.0": version: 5.62.0 resolution: "@typescript-eslint/scope-manager@npm:5.62.0" @@ -11750,6 +11936,21 @@ __metadata: languageName: node linkType: hard +"@vitejs/plugin-react@npm:4.3.1": + version: 4.3.1 + resolution: "@vitejs/plugin-react@npm:4.3.1" + dependencies: + "@babel/core": ^7.24.5 + "@babel/plugin-transform-react-jsx-self": ^7.24.5 + "@babel/plugin-transform-react-jsx-source": ^7.24.1 + "@types/babel__core": ^7.20.5 + react-refresh: ^0.14.2 + peerDependencies: + vite: ^4.2.0 || ^5.0.0 + checksum: 57872e0193c7e545c5ef4852cbe1adf17a6b35406a2aba4b3acce06c173a9dabbf6ff4c72701abc11bb3cbe24a056f5054f39018f7034c9aa57133a3a7770237 + languageName: node + linkType: hard + "@vitejs/plugin-react@npm:^3.1.0": version: 3.1.0 resolution: "@vitejs/plugin-react@npm:3.1.0" @@ -19608,6 +19809,86 @@ __metadata: languageName: node linkType: hard +"esbuild@npm:^0.21.3": + version: 0.21.5 + resolution: "esbuild@npm:0.21.5" + dependencies: + "@esbuild/aix-ppc64": 0.21.5 + "@esbuild/android-arm": 0.21.5 + "@esbuild/android-arm64": 0.21.5 + "@esbuild/android-x64": 0.21.5 + "@esbuild/darwin-arm64": 0.21.5 + "@esbuild/darwin-x64": 0.21.5 + "@esbuild/freebsd-arm64": 0.21.5 + "@esbuild/freebsd-x64": 0.21.5 + "@esbuild/linux-arm": 0.21.5 + "@esbuild/linux-arm64": 0.21.5 + "@esbuild/linux-ia32": 0.21.5 + "@esbuild/linux-loong64": 0.21.5 + "@esbuild/linux-mips64el": 0.21.5 + "@esbuild/linux-ppc64": 0.21.5 + "@esbuild/linux-riscv64": 0.21.5 + "@esbuild/linux-s390x": 0.21.5 + "@esbuild/linux-x64": 0.21.5 + "@esbuild/netbsd-x64": 0.21.5 + "@esbuild/openbsd-x64": 0.21.5 + "@esbuild/sunos-x64": 0.21.5 + "@esbuild/win32-arm64": 0.21.5 + "@esbuild/win32-ia32": 0.21.5 + "@esbuild/win32-x64": 0.21.5 + dependenciesMeta: + "@esbuild/aix-ppc64": + optional: true + "@esbuild/android-arm": + optional: true + "@esbuild/android-arm64": + optional: true + "@esbuild/android-x64": + optional: true + "@esbuild/darwin-arm64": + optional: true + "@esbuild/darwin-x64": + optional: true + "@esbuild/freebsd-arm64": + optional: true + "@esbuild/freebsd-x64": + optional: true + "@esbuild/linux-arm": + optional: true + "@esbuild/linux-arm64": + optional: true + "@esbuild/linux-ia32": + optional: true + "@esbuild/linux-loong64": + optional: true + "@esbuild/linux-mips64el": + optional: true + "@esbuild/linux-ppc64": + optional: true + "@esbuild/linux-riscv64": + optional: true + "@esbuild/linux-s390x": + optional: true + "@esbuild/linux-x64": + optional: true + "@esbuild/netbsd-x64": + optional: true + "@esbuild/openbsd-x64": + optional: true + "@esbuild/sunos-x64": + optional: true + "@esbuild/win32-arm64": + optional: true + "@esbuild/win32-ia32": + optional: true + "@esbuild/win32-x64": + optional: true + bin: + esbuild: bin/esbuild + checksum: 2911c7b50b23a9df59a7d6d4cdd3a4f85855787f374dce751148dbb13305e0ce7e880dde1608c2ab7a927fc6cec3587b80995f7fc87a64b455f8b70b55fd8ec1 + languageName: node + linkType: hard + "escalade@npm:^3.1.1, escalade@npm:^3.1.2": version: 3.1.2 resolution: "escalade@npm:3.1.2" @@ -19725,29 +20006,6 @@ __metadata: languageName: node linkType: hard -"eslint-config-next@npm:13.5.5": - version: 13.5.5 - resolution: "eslint-config-next@npm:13.5.5" - dependencies: - "@next/eslint-plugin-next": 13.5.5 - "@rushstack/eslint-patch": ^1.3.3 - "@typescript-eslint/parser": ^5.4.2 || ^6.0.0 - eslint-import-resolver-node: ^0.3.6 - eslint-import-resolver-typescript: ^3.5.2 - eslint-plugin-import: ^2.28.1 - eslint-plugin-jsx-a11y: ^6.7.1 - eslint-plugin-react: ^7.33.2 - eslint-plugin-react-hooks: ^4.5.0 || 5.0.0-canary-7118f5dd7-20230705 - peerDependencies: - eslint: ^7.23.0 || ^8.0.0 - typescript: ">=3.3.1" - peerDependenciesMeta: - typescript: - optional: true - checksum: f108925365c43b36cf1af59078b7009b36db18ce0e077865c61049679bd264b498c838b27e568b3c45ecd52b18fd597671b31fc21344bb0ee3fa86be5798506f - languageName: node - linkType: hard - "eslint-config-react-app@npm:^7.0.1": version: 7.0.1 resolution: "eslint-config-react-app@npm:7.0.1" @@ -19871,7 +20129,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-import@npm:^2.25.3, eslint-plugin-import@npm:^2.26.0, eslint-plugin-import@npm:^2.28.1": +"eslint-plugin-import@npm:^2.25.3, eslint-plugin-import@npm:^2.26.0": version: 2.29.1 resolution: "eslint-plugin-import@npm:2.29.1" dependencies: @@ -19933,7 +20191,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-jsx-a11y@npm:^6.5.1, eslint-plugin-jsx-a11y@npm:^6.7.1": +"eslint-plugin-jsx-a11y@npm:^6.5.1": version: 6.9.0 resolution: "eslint-plugin-jsx-a11y@npm:6.9.0" dependencies: @@ -19959,7 +20217,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-react-hooks@npm:^4.3.0, eslint-plugin-react-hooks@npm:^4.5.0": +"eslint-plugin-react-hooks@npm:4.6.2, eslint-plugin-react-hooks@npm:^4.3.0, eslint-plugin-react-hooks@npm:^4.5.0": version: 4.6.2 resolution: "eslint-plugin-react-hooks@npm:4.6.2" peerDependencies: @@ -19968,16 +20226,16 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-react-hooks@npm:^4.5.0 || 5.0.0-canary-7118f5dd7-20230705": - version: 5.0.0-canary-7118f5dd7-20230705 - resolution: "eslint-plugin-react-hooks@npm:5.0.0-canary-7118f5dd7-20230705" +"eslint-plugin-react-refresh@npm:0.4.7": + version: 0.4.7 + resolution: "eslint-plugin-react-refresh@npm:0.4.7" peerDependencies: - eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 - checksum: 20e334e60bf5e56cf9f760598411847525c3ff826e6ae7757c8efdc60b33d47a97ddbe1b94ce95956ea9f7bbef37995b19c716be50bd44e6a1e789cba08b6224 + eslint: ">=7" + checksum: b2fe14d4ed158b6380ffd9831a5ebed4c79828ea806536d5db0aa8370f8a3878b198d77fc7da18bfd862cd9eb19ed4472cc9977f727f81679f80dcb48f8a3861 languageName: node linkType: hard -"eslint-plugin-react@npm:^7.27.1, eslint-plugin-react@npm:^7.31.7, eslint-plugin-react@npm:^7.33.2": +"eslint-plugin-react@npm:7.34.3, eslint-plugin-react@npm:^7.27.1, eslint-plugin-react@npm:^7.31.7": version: 7.34.3 resolution: "eslint-plugin-react@npm:7.34.3" dependencies: @@ -20168,7 +20426,7 @@ __metadata: languageName: node linkType: hard -"eslint@npm:^8.3.0": +"eslint@npm:8.57.0, eslint@npm:^8.3.0": version: 8.57.0 resolution: "eslint@npm:8.57.0" dependencies: @@ -21376,7 +21634,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:^2.3.2, fsevents@npm:~2.3.1, fsevents@npm:~2.3.2": +"fsevents@npm:^2.3.2, fsevents@npm:~2.3.1, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" dependencies: @@ -21405,7 +21663,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.1#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin": +"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.1#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin, fsevents@patch:fsevents@~2.3.3#~builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=df0bf1" dependencies: @@ -31656,7 +31914,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.0.0, postcss@npm:^8.1.10, postcss@npm:^8.2.1, postcss@npm:^8.2.14, postcss@npm:^8.2.15, postcss@npm:^8.3.5, postcss@npm:^8.3.7, postcss@npm:^8.4.14, postcss@npm:^8.4.19, postcss@npm:^8.4.23, postcss@npm:^8.4.24, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.4": +"postcss@npm:^8.0.0, postcss@npm:^8.1.10, postcss@npm:^8.2.1, postcss@npm:^8.2.14, postcss@npm:^8.2.15, postcss@npm:^8.3.5, postcss@npm:^8.3.7, postcss@npm:^8.4.14, postcss@npm:^8.4.19, postcss@npm:^8.4.23, postcss@npm:^8.4.24, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.39, postcss@npm:^8.4.4": version: 8.4.39 resolution: "postcss@npm:8.4.39" dependencies: @@ -32624,7 +32882,7 @@ __metadata: languageName: node linkType: hard -"react-refresh@npm:^0.14.0": +"react-refresh@npm:^0.14.0, react-refresh@npm:^0.14.2": version: 0.14.2 resolution: "react-refresh@npm:0.14.2" checksum: d80db4bd40a36dab79010dc8aa317a5b931f960c0d83c4f3b81f0552cbcf7f29e115b84bb7908ec6a1eb67720fff7023084eff73ece8a7ddc694882478464382 @@ -33721,7 +33979,7 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^4.18.0": +"rollup@npm:^4.13.0, rollup@npm:^4.18.0": version: 4.18.1 resolution: "rollup@npm:4.18.1" dependencies: @@ -38301,6 +38559,46 @@ __metadata: languageName: node linkType: hard +"vite@npm:5.3.4": + version: 5.3.4 + resolution: "vite@npm:5.3.4" + dependencies: + esbuild: ^0.21.3 + fsevents: ~2.3.3 + postcss: ^8.4.39 + rollup: ^4.13.0 + peerDependencies: + "@types/node": ^18.0.0 || >=20.0.0 + less: "*" + lightningcss: ^1.21.0 + sass: "*" + stylus: "*" + sugarss: "*" + terser: ^5.4.0 + dependenciesMeta: + fsevents: + optional: true + peerDependenciesMeta: + "@types/node": + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + bin: + vite: bin/vite.js + checksum: 2dfbab98daf91b86b3d3e535add1d6a982f7087df62f8f4bc219f3ae91a97f38c04683a32ba2457618e804fa93380090ddda5b0c9823a94bdcb53d6044b04732 + languageName: node + linkType: hard + "vite@npm:~4.3.3": version: 4.3.9 resolution: "vite@npm:4.3.9" @@ -38863,18 +39161,21 @@ __metadata: version: 0.0.0-use.local resolution: "wc-next13@workspace:apps/examples/wc-next13" dependencies: - "@justeattakeaway/pie-button": 0.47.8 "@justeattakeaway/pie-css": 0.12.1 + "@justeattakeaway/pie-webc": 0.5.13 "@lit-labs/nextjs": 0.2.0 "@lit/react": 1.0.5 - "@types/node": 20.9.3 + "@types/react": 18.3.3 "@types/react-dom": 18.3.0 - eslint: 8.37.0 - eslint-config-next: 13.5.5 + "@vitejs/plugin-react": 4.3.1 + eslint: 8.57.0 + eslint-plugin-react: 7.34.3 + eslint-plugin-react-hooks: 4.6.2 + eslint-plugin-react-refresh: 0.4.7 next: 13.5.5 react: 18.3.1 react-dom: 18.3.1 - typescript: 5.4.5 + vite: 5.3.4 languageName: unknown linkType: soft From 372fd39e2529cce28f74d9b5e5ece7f2bf728501 Mon Sep 17 00:00:00 2001 From: maledr5 Date: Mon, 22 Jul 2024 17:04:45 +0200 Subject: [PATCH 3/4] docs(pie-docs): DSW-2211 adding overview of web components (#1589) * docs(pie-docs): DSW-2211 add tag shortcode to pie docs This shortcode copy the web component variants. Can be removed once we are able to use our web components in pie docs. * docs(pie-docs): DSW-2211 adding overview of web components Refactors some copy and adds a guide to choose waht component library to use. * docs(pie-docs): DSW-2211 removes new lines and adds changeset file * docs(pie-docs): DSW-2211 fix formatting in headings * docs(pie-docs): DSW-2211 add missing route for testing * docs(pie-docs): DSW-2211 updates README with config for running tests locally * docs(pie-docs): DSW-2211 address PR comments * docs(pie-docs): DSW-2211 address PR comments Co-authored-by: Ashley Watson-Nolan Co-authored-by: Xander Marjoram * docs(pie-docs): DSW-2211 address PR comments * docs(pie-docs): DSW-2211 pr comments - intro section and Next 13 copy * Apply suggestions from code review docs(pie-docs): DSW-2211 address PR comments Co-authored-by: Xander Marjoram --------- Co-authored-by: Ashley Watson-Nolan Co-authored-by: Xander Marjoram --- .changeset/neat-lies-relax.md | 5 + apps/pie-docs/README.md | 15 ++- apps/pie-docs/src/_11ty/shortcodes/index.js | 4 +- apps/pie-docs/src/_11ty/shortcodes/tag.js | 13 +++ .../src/assets/styles/_dependencies.scss | 1 + .../src/assets/styles/components/_tag.scss | 85 +++++++++++++++++ .../src/engineers/getting-started/overview.md | 15 ++- .../engineers/getting-started/structure.md | 92 ++++++++++++++++++- .../src/engineers/web-components/overview.md | 49 ++++++++++ .../web-components/web-components.json | 5 + .../web-components/web-components.md | 9 ++ .../snapshots/expected-routes.snapshot.json | 1 + 12 files changed, 280 insertions(+), 14 deletions(-) create mode 100644 .changeset/neat-lies-relax.md create mode 100644 apps/pie-docs/src/_11ty/shortcodes/tag.js create mode 100644 apps/pie-docs/src/assets/styles/components/_tag.scss create mode 100644 apps/pie-docs/src/engineers/web-components/overview.md create mode 100644 apps/pie-docs/src/engineers/web-components/web-components.json create mode 100644 apps/pie-docs/src/engineers/web-components/web-components.md diff --git a/.changeset/neat-lies-relax.md b/.changeset/neat-lies-relax.md new file mode 100644 index 0000000000..86c5c54db3 --- /dev/null +++ b/.changeset/neat-lies-relax.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Changed] - Updates Engineering copy and adds new Web Components index guide to current documentation in Github Wiki. diff --git a/apps/pie-docs/README.md b/apps/pie-docs/README.md index 334b5402ec..cf947baac4 100644 --- a/apps/pie-docs/README.md +++ b/apps/pie-docs/README.md @@ -59,16 +59,23 @@ Our primary concerns are: 4. Our shortcodes return the expected HTML ### Page testing + We have route navigation tests that ensure all existing pages can be correctly navigated to. When you add new pages, these tests will fail as there are new unexpected pages (this is by design). -In order to fix the tests, you will need to register the routes to your newly added pages by running from the root of the monorepo: `yarn test:generate-routes`. This will update the JSON file named `expected-routes.snapshot.json` with the URLs to your new page. +Route tests need a production build so that they do not fail with `draft` page routes. For this, we recommend to: +1. Stop any local instance of the doc site +2. Delete your `dist` folder +3. Create a production build with `yarn build --filter=pie-docs` +Once this is done, you can run the route tests with `yarn test --filter=pie-docs`. From here, we run navigation, accessibility and visual tests against each route. -#### Running the route tests -Route tests are ran as part of `yarn test`. +#### Adding new routes + +In order to fix the tests, you will need to register the routes to your newly added pages by running the following command from the root of the monorepo: `yarn test:generate-routes`. This will update the JSON file named `expected-routes.snapshot.json` with the paths to your new pages. + +### Testing navigation responses -#### Testing navigation responses Running `yarn test:browsers` will ensure that navigating to the routes stored in `expected-routes.snapshot.json` result in Status Code `200` responses. In order to run this command you will need the site to be served to localhost by running `yarn dev --filter=pie-docs` in another terminal. diff --git a/apps/pie-docs/src/_11ty/shortcodes/index.js b/apps/pie-docs/src/_11ty/shortcodes/index.js index 5f68ddbfbd..63f19b8a47 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/index.js +++ b/apps/pie-docs/src/_11ty/shortcodes/index.js @@ -11,6 +11,7 @@ const mediaElement = require('./mediaElementList'); const notification = require('./notification'); const resourceTable = require('./resourceTable'); const simpleTable = require('./simpleTable'); +const tag = require('./tag'); const termsAndDescriptions = require('./termsAndDescriptions'); const tokensTable = require('./tokensTable'); const usage = require('./usage'); @@ -36,8 +37,9 @@ const addAllShortCodes = (eleventyConfig) => { eleventyConfig.addShortcode('notification', (shortcodeArgs) => deindentHTML(notification(shortcodeArgs))); eleventyConfig.addShortcode('resourceTable', (shortcodeArgs) => deindentHTML(resourceTable(shortcodeArgs))); eleventyConfig.addShortcode('simpleTable', (shortcodeArgs) => deindentHTML(simpleTable(shortcodeArgs))); - eleventyConfig.addShortcode('tokensTable', (shortcodeArgs) => deindentHTML(tokensTable(shortcodeArgs))); + eleventyConfig.addShortcode('tag', (shortcodeArgs) => deindentHTML(tag(shortcodeArgs))); eleventyConfig.addShortcode('termsAndDescriptions', (shortcodeArgs) => deindentHTML(termsAndDescriptions(shortcodeArgs))); + eleventyConfig.addShortcode('tokensTable', (shortcodeArgs) => deindentHTML(tokensTable(shortcodeArgs))); eleventyConfig.addShortcode('usage', (shortcodeArgs) => deindentHTML(usage(shortcodeArgs))); }; diff --git a/apps/pie-docs/src/_11ty/shortcodes/tag.js b/apps/pie-docs/src/_11ty/shortcodes/tag.js new file mode 100644 index 0000000000..52f11c96a0 --- /dev/null +++ b/apps/pie-docs/src/_11ty/shortcodes/tag.js @@ -0,0 +1,13 @@ +// @TODO DSW-2258: be replaced once web components are integrated +/** + * Generate an HTML tag component. It duplicates pie tag variants. + * Can be replaced by pie tag when we include pie web components + * @param {string} label - string that renders within the tag + * @param {string} variant - variant name: neutral, blue, green, + * yellow, red, brand, neutral-alternative, outline, ghost + * @returns {string} + */ +module.exports = ({ + label, + variant, +}) => `${label}`; diff --git a/apps/pie-docs/src/assets/styles/_dependencies.scss b/apps/pie-docs/src/assets/styles/_dependencies.scss index 2552387813..248642e5ad 100644 --- a/apps/pie-docs/src/assets/styles/_dependencies.scss +++ b/apps/pie-docs/src/assets/styles/_dependencies.scss @@ -59,6 +59,7 @@ @use 'components/simpleTable'; @use 'components/table'; @use 'components/tabs'; +@use 'components/tag'; @use 'components/termsAndDescriptions'; @use 'components/toggle'; @use 'components/tokensTable'; diff --git a/apps/pie-docs/src/assets/styles/components/_tag.scss b/apps/pie-docs/src/assets/styles/components/_tag.scss new file mode 100644 index 0000000000..2ddebad3a0 --- /dev/null +++ b/apps/pie-docs/src/assets/styles/components/_tag.scss @@ -0,0 +1,85 @@ +@use '@justeattakeaway/pie-css/scss/settings' as *; +@use '@justeattakeaway/pie-css/scss' as p; + +.c-tag { + --tag-bg-color: var(--dt-color-container-strong); + --tag-color: var(--dt-color-content-default); + --tag-border-radius: var(--dt-radius-rounded-b); + --tag-padding-block: 2px; + --tag-padding-inline: var(--dt-spacing-b); + --tag-font-family: var(--dt-font-body-s-family); + --tag-font-weight: var(--dt-font-body-s-weight); + --tag-font-size: #{p.font-size(--dt-font-body-s-size)}; + --tag-line-height: #{p.line-height(--dt-font-body-s-line-height)}; + + // transparent to variable to function properly in component tests + --tag-transparent-bg-color: transparent; + + // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot + --icon-display-override: block; + --icon-size-override: 16px; + + display: inline-flex; + vertical-align: middle; + align-items: center; + justify-content: center; + gap: var(--dt-spacing-a); + padding: var(--tag-padding-block) var(--tag-padding-inline); + border-radius: var(--tag-border-radius); + background-color: var(--tag-bg-color); + color: var(--tag-color); + font-family: var(--tag-font-family); + font-weight: var(--tag-font-weight); + font-size: var(--tag-font-size); + line-height: var(--tag-line-height); + + + &[variant='neutral'] { + // same as default styles + } + + &[variant='blue'] { + --tag-bg-color: var(--dt-color-support-info-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='green'] { + --tag-bg-color: var(--dt-color-support-positive-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='yellow'] { + --tag-bg-color: var(--dt-color-support-warning-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='red'] { + --tag-bg-color: var(--dt-color-support-error-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='brand'] { + --tag-bg-color: var(--dt-color-support-brand-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='neutral-alternative'] { + --tag-bg-color: var(--dt-color-container-default); + --tag-color: var(--dt-color-content-default); + } + + &[variant='outline'] { + --tag-bg-color: var(--tag-transparent-bg-color); + --tag-color: var(--dt-color-content-default); + + // the outline in design specs is part of the total component + // height calculation, thus, we use box-shadow to mimic borders + // and avoid the extra 2px from "border: 1px solid" as shadows are applied "internally" + box-shadow: 0 0 0 1px var(--dt-color-border-strong); + } + + &[variant='ghost'] { + --tag-bg-color: var(--tag-transparent-bg-color); + --tag-color: var(--dt-color-content-default); + } +} diff --git a/apps/pie-docs/src/engineers/getting-started/overview.md b/apps/pie-docs/src/engineers/getting-started/overview.md index bfa0e88664..77c18c007f 100644 --- a/apps/pie-docs/src/engineers/getting-started/overview.md +++ b/apps/pie-docs/src/engineers/getting-started/overview.md @@ -10,17 +10,11 @@ permalink: engineers/getting-started/ One of the core aims of the **PIE Design System** is to provide engineers with a consistent set of components and best practices for creating and maintaining UIs across JET. -If you're just starting out with PIE, here's a list of recommended resources to get you started. - ---- - -## Code and Project Structure - -All of our PIE components, tools and documentation (including this site) are maintained on the open-source [PIE Monorepo on Github](https://github.com/justeattakeaway/pie). +We develop and maintain several component libraries that implement the PIE design language. Please follow [this guide](/engineers/getting-started/structure/#which-library-should-i-use) to find out which library to use based on your tech stack. For a more detailed look at the **component systems** the PIE team maintain, the PIE monorepo and how it’s structured, see the [structure section of our engineering docs](/engineers/getting-started/structure). -We also help to maintain a number of other projects that incorporate the PIE Design Language (such as [Fozzie](https://github.com/justeattakeaway/fozzie-components) for **VueJS components**, or [Snacks](https://snacks.takeaway.com/) and [Skip PIE](https://github.com/justeat/pie-project) for **React components**). +For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/). --- @@ -30,6 +24,11 @@ If you'd like to contribute to PIE, check out our [contributing guide](/engineer We also maintain **guides** for global front-end best practices across JET. These can be found in the [engineering guidelines section of our docs](/engineers/guidelines/). +### Code and Project Structure + +PIE Web Components, tools and documentation (including this site) are maintained on the open-source [PIE Monorepo on Github](https://github.com/justeattakeaway/pie). + +We support and maintain a number of other projects that incorporate the PIE Design Language (such as [Fozzie](https://github.com/justeattakeaway/fozzie-components) for **VueJS components**, or [Snacks](https://snacks.takeaway.com/) and [Skip PIE](https://github.com/justeat/pie-project) for **React components**).