diff --git a/package.json b/package.json index 9fa9999..cda99db 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 a8be27c..4b4e798 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,6 +13,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 @@ -32,6 +35,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.0': resolution: {integrity: sha512-wDhUGqCxc29l1jlGRcV3TCCgP255Qg3hQGFnTyTD7m2bLKMni8NN76YeqK8SevoS5DcmLMbu05NzXixJISMRrQ==} engines: {node: '>=18.20.0'} @@ -86,6 +102,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==} @@ -227,6 +248,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==} @@ -290,12 +321,18 @@ packages: '@types/parse5@5.0.3': resolution: {integrity: sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==} + '@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==} @@ -456,6 +493,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} @@ -486,6 +526,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'} @@ -1099,6 +1142,9 @@ packages: property-information@5.6.0: resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==} + 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'} @@ -1437,6 +1483,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.0(patch_hash=sidnbo6ceotdfjxkxr3z3wfv2y)': dependencies: '@rollup/plugin-commonjs': 28.0.1(rollup@4.28.0) @@ -1532,6 +1591,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 @@ -1639,6 +1702,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 @@ -1725,10 +1805,17 @@ snapshots: '@types/parse5@5.0.3': {} + '@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': @@ -1873,6 +1960,8 @@ snapshots: commondir@1.0.1: {} + composed-offset-position@0.0.4: {} + concat-stream@1.6.2: dependencies: buffer-from: 1.1.2 @@ -1908,6 +1997,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: @@ -2567,6 +2658,8 @@ snapshots: dependencies: xtend: 4.0.2 + qr-creator@1.0.0: {} + qs@6.13.1: dependencies: side-channel: 1.0.6 diff --git a/src/components/card.js b/src/components/card.js index 7cadbe6..9080d04 100644 --- a/src/components/card.js +++ b/src/components/card.js @@ -76,7 +76,7 @@ export class Card extends LitElement {

${title}

${title} - + View Item Details
`; } diff --git a/src/components/modal.js b/src/components/modal.js index d30d74d..72de076 100644 --- a/src/components/modal.js +++ b/src/components/modal.js @@ -56,7 +56,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()); @@ -68,7 +68,7 @@ export class Modal extends LitElement { return html`

${content}

- + Close `; } diff --git a/src/layouts/app.html b/src/layouts/app.html index 6842426..bf39857 100644 --- a/src/layouts/app.html +++ b/src/layouts/app.html @@ -8,8 +8,11 @@ - - + + + + + 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 {