From 795379ba185fa4890d0f48d3b8ccaa947299b11d Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 23 Nov 2024 18:15:20 -0500 Subject: [PATCH] WIP shoelace integration --- package.json | 1 + pnpm-lock.yaml | 93 +++++++++++++++++++++++++++++++++++++++++ src/components/card.ts | 2 +- src/components/modal.ts | 4 +- src/layouts/app.html | 3 ++ src/pages/index.html | 6 +-- src/pages/search.html | 4 +- src/styles/main.css | 13 +----- 8 files changed, 107 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index c3622da..b9d4839 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "start": "pnpm run serve" }, "dependencies": { + "@shoelace-style/shoelace": "^2.18.0", "lit": "^3.2.1" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4fec298..db360e4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@shoelace-style/shoelace': + specifier: ^2.18.0 + version: 2.18.0(@types/react@18.3.12) lit: specifier: ^3.2.1 version: 3.2.1 @@ -30,6 +33,19 @@ importers: packages: + '@ctrl/tinycolor@4.1.0': + resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==} + engines: {node: '>=14'} + + '@floating-ui/core@1.6.8': + resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} + + '@floating-ui/dom@1.6.12': + resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} + + '@floating-ui/utils@0.2.8': + resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@greenwood/cli@0.31.0-alpha.5': resolution: {integrity: sha512-YloZF06a5C3gX/c9R1lXxV9xRxCTN4Uf+sOeEUGTyrooAAU3r9G+i8uuPaPio2PZZ20t9MCeL6mwOWBNDaU2Lw==} engines: {node: ^18.20.5 || ^20.10.0 || ^22.12.0} @@ -89,6 +105,11 @@ packages: resolution: {integrity: sha512-He5TzeNPM9ECmVpgXRYmVlz0UA5YnzHlT43kyLi2Lu6mUidskqJVonk9W5K699+2DKhoXp8Ra4EJmHR6KrcW1Q==} engines: {node: '>=13.9.0'} + '@lit/react@1.0.6': + resolution: {integrity: sha512-QIss8MPh6qUoFJmuaF4dSHts3qCsA36S3HcOLiNPShxhgYPr4XJRnCBKPipk85sR9xr6TQrOcDMfexwbNdJHYA==} + peerDependencies: + '@types/react': 17 || 18 + '@lit/reactive-element@2.0.4': resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==} @@ -230,6 +251,16 @@ packages: cpu: [x64] os: [win32] + '@shoelace-style/animations@1.2.0': + resolution: {integrity: sha512-avvo1xxkLbv2dgtabdewBbqcJfV0e0zCwFqkPMnHFGbJbBHorRFfMAHh1NG9ymmXn0jW95ibUVH03E1NYXD6Gw==} + + '@shoelace-style/localize@3.2.1': + resolution: {integrity: sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA==} + + '@shoelace-style/shoelace@2.18.0': + resolution: {integrity: sha512-uzpL0+8Qm8aE2ArcXBcKHkaPc6l7ymuVaN6xJM0yd2o3talcoXpuP+gRBsgggSZKuuJEa+JkEuLDdzzFnE/+jw==} + engines: {node: '>=14.17.0'} + '@types/accepts@1.3.7': resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==} @@ -296,12 +327,18 @@ packages: '@types/node@22.10.1': resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==} + '@types/prop-types@15.7.13': + resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} + '@types/qs@6.9.17': resolution: {integrity: sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==} '@types/range-parser@1.2.7': resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==} + '@types/react@18.3.12': + resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==} + '@types/resolve@1.20.2': resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} @@ -462,6 +499,9 @@ packages: commondir@1.0.1: resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} + composed-offset-position@0.0.4: + resolution: {integrity: sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw==} + concat-stream@1.6.2: resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==} engines: {'0': node >= 0.8} @@ -492,6 +532,9 @@ packages: resolution: {integrity: sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + csstype@3.1.3: + resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} + data-uri-to-buffer@4.0.1: resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==} engines: {node: '>= 12'} @@ -1160,6 +1203,9 @@ packages: property-information@6.5.0: resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} + qr-creator@1.0.0: + resolution: {integrity: sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==} + qs@6.13.1: resolution: {integrity: sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==} engines: {node: '>=0.6'} @@ -1481,6 +1527,19 @@ packages: snapshots: + '@ctrl/tinycolor@4.1.0': {} + + '@floating-ui/core@1.6.8': + dependencies: + '@floating-ui/utils': 0.2.8 + + '@floating-ui/dom@1.6.12': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/utils': 0.2.8 + + '@floating-ui/utils@0.2.8': {} + '@greenwood/cli@0.31.0-alpha.5': dependencies: '@rollup/plugin-commonjs': 28.0.1(rollup@4.28.0) @@ -1581,6 +1640,10 @@ snapshots: node-fetch: 3.3.2 parse5: 7.2.1 + '@lit/react@1.0.6(@types/react@18.3.12)': + dependencies: + '@types/react': 18.3.12 + '@lit/reactive-element@2.0.4': dependencies: '@lit-labs/ssr-dom-shim': 1.2.1 @@ -1688,6 +1751,23 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.28.0': optional: true + '@shoelace-style/animations@1.2.0': {} + + '@shoelace-style/localize@3.2.1': {} + + '@shoelace-style/shoelace@2.18.0(@types/react@18.3.12)': + dependencies: + '@ctrl/tinycolor': 4.1.0 + '@floating-ui/dom': 1.6.12 + '@lit/react': 1.0.6(@types/react@18.3.12) + '@shoelace-style/animations': 1.2.0 + '@shoelace-style/localize': 3.2.1 + composed-offset-position: 0.0.4 + lit: 3.2.1 + qr-creator: 1.0.0 + transitivePeerDependencies: + - '@types/react' + '@types/accepts@1.3.7': dependencies: '@types/node': 22.10.1 @@ -1778,10 +1858,17 @@ snapshots: dependencies: undici-types: 6.20.0 + '@types/prop-types@15.7.13': {} + '@types/qs@6.9.17': {} '@types/range-parser@1.2.7': {} + '@types/react@18.3.12': + dependencies: + '@types/prop-types': 15.7.13 + csstype: 3.1.3 + '@types/resolve@1.20.2': {} '@types/send@0.17.4': @@ -1926,6 +2013,8 @@ snapshots: commondir@1.0.1: {} + composed-offset-position@0.0.4: {} + concat-stream@1.6.2: dependencies: buffer-from: 1.1.2 @@ -1961,6 +2050,8 @@ snapshots: mdn-data: 2.12.1 source-map-js: 1.2.1 + csstype@3.1.3: {} + data-uri-to-buffer@4.0.1: {} debug@4.3.7: @@ -2785,6 +2876,8 @@ snapshots: property-information@6.5.0: {} + qr-creator@1.0.0: {} + qs@6.13.1: dependencies: side-channel: 1.0.6 diff --git a/src/components/card.ts b/src/components/card.ts index 943910f..1c03ea1 100644 --- a/src/components/card.ts +++ b/src/components/card.ts @@ -82,7 +82,7 @@ export class Card extends LitElement {

${title}

${title} - + View Item Details
`; } diff --git a/src/components/modal.ts b/src/components/modal.ts index 4b3b17c..31747c1 100644 --- a/src/components/modal.ts +++ b/src/components/modal.ts @@ -58,7 +58,7 @@ export class Modal extends LitElement { } firstUpdated() { - const button = this.shadowRoot.querySelector('button'); + const button = this.shadowRoot.querySelector('sl-button'); const dialog = this.shadowRoot.querySelector('dialog'); button.addEventListener("click", () => dialog.close()); @@ -70,7 +70,7 @@ export class Modal extends LitElement { return html`

${content}

- + Close `; } diff --git a/src/layouts/app.html b/src/layouts/app.html index 4879272..351cc7c 100644 --- a/src/layouts/app.html +++ b/src/layouts/app.html @@ -9,7 +9,10 @@ + + + diff --git a/src/pages/index.html b/src/pages/index.html index 538d91c..00c9d2b 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -41,9 +41,9 @@

JSON API

This is an example of a Greenwood API Route returning JSON when fetched on-submit of the form to display a message on the page. You can see it fire in the network tab as /api/greeting

- + Click me for a greeting!

@@ -51,7 +51,7 @@

Fragments API (w/ Lit+SSR)

This is an example of a Greenwood API route returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM). This same component is loaded on the client-side too, so that when you click the Product Details button, state and interactivity can still be resumed. You can see it fire in the network tab as /api/fragment

- + Load More Products diff --git a/src/pages/search.html b/src/pages/search.html index 0da0673..dd2e962 100644 --- a/src/pages/search.html +++ b/src/pages/search.html @@ -31,9 +31,9 @@

Search API (w/ Lit+SSR)

This is an example of a Greenwood API leveraging the FormData API and returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM). This same component is loaded on the client-side too, so that when you click the Item Details button, state and interactivity can still be resumed. You can see it fire in the network tab as /api/search

diff --git a/src/styles/main.css b/src/styles/main.css index 8c64506..eafddaf 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -60,20 +60,11 @@ h2 { text-decoration: underline; } -button { - background: var(--color-accent); - color: var(--color-white); - padding: 1rem 2rem; - border: 0; - font-size: 1rem; - border-radius: 5px; - cursor: pointer; -} - -input { +sl-input { padding: 1rem; margin: 0 10px; font-size: 16px; + display: inline-block; } label {