From f21e23cd8e500d3dc8ba0ca0eb93c662d953139f Mon Sep 17 00:00:00 2001 From: Benjamin Sehl Date: Mon, 30 May 2022 22:27:39 -0400 Subject: [PATCH 1/3] Adds basic components for Collection. Refines Product Card. Co-locates mock data. --- templates/demo-store-neue/package.json | 1 + .../blocks/CountrySelector.client.jsx | 22 ++- .../src/components/blocks/ProductCard.jsx | 79 ++++---- .../src/components/elements/Grid.jsx | 33 ++++ .../src/components/elements/Text.jsx | 11 +- .../src/components/elements/index.jsx | 1 + .../src/components/pages/NotFound.server.jsx | 10 +- .../sections/FeaturedCollections.jsx | 44 ++--- .../src/components/sections/Footer.server.jsx | 2 +- .../src/components/sections/Header.client.jsx | 2 +- .../src/components/sections/Hero.jsx | 18 +- .../src/components/sections/Locations.jsx | 11 +- .../components/sections/ProductSwimlane.jsx | 24 +-- .../sections/{PageSection.jsx => Section.jsx} | 2 +- .../src/components/sections/index.jsx | 2 +- .../demo-store-neue/src/lib/placeholders.js | 51 +++++ templates/demo-store-neue/src/lib/utils.js | 19 ++ .../src/routes/api/countries.server.jsx | 11 +- .../routes/collections/[handle].server.jsx | 146 +++++++++++++- .../demo-store-neue/src/styles/index.css | 2 +- yarn.lock | 184 +++++++++++++++++- 21 files changed, 566 insertions(+), 109 deletions(-) create mode 100644 templates/demo-store-neue/src/components/elements/Grid.jsx rename templates/demo-store-neue/src/components/sections/{PageSection.jsx => Section.jsx} (93%) create mode 100644 templates/demo-store-neue/src/lib/placeholders.js diff --git a/templates/demo-store-neue/package.json b/templates/demo-store-neue/package.json index 2413865922..d7cc0741bd 100644 --- a/templates/demo-store-neue/package.json +++ b/templates/demo-store-neue/package.json @@ -32,6 +32,7 @@ "clsx": "^1.1.1", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-use": "^17.4.0", "title": "^3.4.4", "typographic-base": "^1.0.4" } diff --git a/templates/demo-store-neue/src/components/blocks/CountrySelector.client.jsx b/templates/demo-store-neue/src/components/blocks/CountrySelector.client.jsx index 80eef52519..f19f5a6bae 100644 --- a/templates/demo-store-neue/src/components/blocks/CountrySelector.client.jsx +++ b/templates/demo-store-neue/src/components/blocks/CountrySelector.client.jsx @@ -1,4 +1,4 @@ -import {useState, Suspense} from 'react'; +import {useCallback, useState, Suspense} from 'react'; import {useCountry, fetchSync} from '@shopify/hydrogen'; import {Listbox} from '@headlessui/react'; import Icon from '~/components/elements/Icon'; @@ -8,12 +8,20 @@ import Icon from '~/components/elements/Icon'; */ export default function CountrySelector() { const [listboxOpen, setListboxOpen] = useState(false); + const [selectedCountry] = useCountry(); - const [selectedCountry, setSelectedCountry] = useCountry(); + const setCountry = useCallback(({isoCode, name}) => { + fetch(`/api/countries`, { + body: JSON.stringify({isoCode, name}), + method: 'POST', + }).then(() => { + window.location.reload(); + }); + }, []); return (
- + {({open}) => { setTimeout(() => setListboxOpen(open)); return ( @@ -28,8 +36,8 @@ export default function CountrySelector() { /> - -
+ +
Country @@ -39,8 +47,8 @@ export default function CountrySelector() { selectedCountry={selectedCountry} getClassName={(active) => { return ( - `w-36 py-2 px-3 flex justify-between items-center text-left cursor-pointer` + - `rounded ${active ? 'bg-gray-200' : null}` + `w-full cursor-pointer py-2 px-3 flex justify-between items-center text-left cursor-pointer` + + `rounded ${active ? '' : null}` ); }} /> diff --git a/templates/demo-store-neue/src/components/blocks/ProductCard.jsx b/templates/demo-store-neue/src/components/blocks/ProductCard.jsx index d126435ca8..de911c940a 100644 --- a/templates/demo-store-neue/src/components/blocks/ProductCard.jsx +++ b/templates/demo-store-neue/src/components/blocks/ProductCard.jsx @@ -1,67 +1,78 @@ -import {Image, Link} from '@shopify/hydrogen'; +import {Image, Link, Money, useMoney} from '@shopify/hydrogen'; import clsx from 'clsx'; -import {Text} from '../elements'; - -export default function ProductCard({product, className}) { - const {compareAtPrice, price, handle, label, createdAt, image, title} = - product; +import {Text} from '~/components/elements'; +import {isRangedPricing, isDiscounted, isNewArrival} from '~/lib/utils'; +import {mockProduct} from '~/lib/placeholders'; +export default function ProductCard({product = mockProduct, label, className}) { let cardLabel; - var today = new Date(); - var newArrivalDate = new Date(new Date().setDate(today.getDate() - 30)); + + const { + image, + priceV2: price, + compareAtPriceV2: compareAtPrice, + } = product.variants.nodes[0]; if (label) { cardLabel = label; - } else if (compareAtPrice.amount > price.amount) { + } else if (price.amount > compareAtPrice?.amount) { cardLabel = 'Sale'; - } else if (createdAt > newArrivalDate) { + } else if (isNewArrival(product.publishedAt)) { cardLabel = 'New'; } const styles = clsx('grid gap-6', className); return ( - +
{cardLabel} - Alt Tag + Alt Tag
-
+
- {title} + {product.title}
-
- - {price.symbol} - {price.amount} - - {compareAtPrice.amount > price.amount && ( - - {compareAtPrice.symbol} - {compareAtPrice.amount} - + + + {isDiscounted(price, compareAtPrice) && ( + )} -
- 11 Colors Available + + {/* 11 Colors Available */}
); } + +// +function CompareAtPrice({data, className}) { + const {currencyNarrowSymbol, withoutTrailingZerosAndCurrency} = useMoney( + data, + ); + + const styles = clsx('strike', className); + + return ( + + {currencyNarrowSymbol} + {withoutTrailingZerosAndCurrency} + + ); +} diff --git a/templates/demo-store-neue/src/components/elements/Grid.jsx b/templates/demo-store-neue/src/components/elements/Grid.jsx new file mode 100644 index 0000000000..dc880b42d0 --- /dev/null +++ b/templates/demo-store-neue/src/components/elements/Grid.jsx @@ -0,0 +1,33 @@ +import clsx from 'clsx'; +import {missingClass} from '~/lib/utils'; + +export default function Grid({ + as = 'div', + gap = 'default', + layout = 'default', + items = 4, + flow = 'row', + children, + className, +}) { + const Component = as; + + const layouts = { + default: `grid-cols-2 ${items >= 3 && 'md:grid-cols-3'} ${items >= 4 && + 'lg:grid-cols-4'}`, + auto: 'auto-cols-auto', + }; + + const gaps = { + default: 'grid gap-2 md:gap-4 lg:gap-6', + }; + + const flows = { + row: 'grid-flow-row', + col: 'grid-flow-col', + }; + + const styles = clsx(flow[flow], gaps[gap], layouts[layout], className); + + return {children}; +} diff --git a/templates/demo-store-neue/src/components/elements/Text.jsx b/templates/demo-store-neue/src/components/elements/Text.jsx index 2fc72477cd..e1acbef463 100644 --- a/templates/demo-store-neue/src/components/elements/Text.jsx +++ b/templates/demo-store-neue/src/components/elements/Text.jsx @@ -5,16 +5,24 @@ export default function Text({ as = 'span', size = 'copy', width = 'default', + color = 'default', className, format, children, }) { const Component = as; + const colors = { + default: 'inherit', + primary: 'text-primary/90', + notice: 'text-notice', + contrast: 'text-contrast/90', + }; + const sizes = { lead: 'text-lead font-medium', copy: 'text-copy', - fine: 'text-fine', + fine: 'text-fine subpixel-antialiased', }; const widths = { @@ -26,6 +34,7 @@ export default function Text({ const styles = clsx( missingClass(className, 'max-w-') && widths[width], missingClass(className, 'whitespace-') && 'whitespace-pre-wrap', + missingClass(className, 'text-') && colors[color], sizes[size], className, ); diff --git a/templates/demo-store-neue/src/components/elements/index.jsx b/templates/demo-store-neue/src/components/elements/index.jsx index ea8dc5073b..72b68d8ce8 100644 --- a/templates/demo-store-neue/src/components/elements/index.jsx +++ b/templates/demo-store-neue/src/components/elements/index.jsx @@ -4,3 +4,4 @@ export {default as Skeleton} from './Skeleton'; export {default as Button} from './Button'; export {default as Text} from './Text'; export {default as Heading} from './Heading'; +export {default as Grid} from './Grid'; diff --git a/templates/demo-store-neue/src/components/pages/NotFound.server.jsx b/templates/demo-store-neue/src/components/pages/NotFound.server.jsx index 475a5cdee9..4adbd06f6e 100644 --- a/templates/demo-store-neue/src/components/pages/NotFound.server.jsx +++ b/templates/demo-store-neue/src/components/pages/NotFound.server.jsx @@ -6,13 +6,15 @@ import { } from '~/components/sections'; import {Text, Button} from '~/components/elements'; -export default function NotFound() { +export default function NotFound({type = 'page'}) { + const heading = `We’ve lost this ${type}`; + const description = `We couldn’t find the ${type} you’re looking for. Try checking the URL or heading back to the home page.`; + return ( - + - We couldn’t find the page you’re looking for. Try checking the URL or - heading back to the home page. + {description} +
+
+ +
+ + {products.map((product) => ( + + ))} + +
+
{hasNextPage && }
+ + ); } + +const QUERY = gql` + query CollectionDetails( + $handle: String! + $country: CountryCode + $language: LanguageCode + $numProducts: Int! + $cursor: String + ) @inContext(country: $country, language: $language) { + collection(handle: $handle) { + title + descriptionHtml + description + seo { + description + title + } + image { + id + url + width + height + altText + } + products(first: $numProducts, after: $cursor) { + edges { + cursor + node { + id + title + publishedAt + handle + description + priceRange { + minVariantPrice { + amount + currencyCode + } + maxVariantPrice { + amount + currencyCode + } + } + options { + name + values + } + variants(first: 1) { + nodes { + id + image { + url + altText + width + height + } + priceV2 { + amount + currencyCode + } + compareAtPriceV2 { + amount + currencyCode + } + } + } + } + } + pageInfo { + hasNextPage + } + } + } + } +`; diff --git a/templates/demo-store-neue/src/styles/index.css b/templates/demo-store-neue/src/styles/index.css index dd9698221d..34de2c7170 100644 --- a/templates/demo-store-neue/src/styles/index.css +++ b/templates/demo-store-neue/src/styles/index.css @@ -45,7 +45,7 @@ } body { - @apply text-base antialiased font-sans text-primary bg-contrast border-primary; + @apply text-base antialiased font-sans text-primary/90 bg-contrast border-primary/10; } html { diff --git a/yarn.lock b/yarn.lock index 33b5133658..8b14839d96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -531,6 +531,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.1.2": + version "7.18.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" + integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.16.7", "@babel/template@^7.3.3": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" @@ -2452,6 +2459,11 @@ jest-diff "^26.0.0" pretty-format "^26.0.0" +"@types/js-cookie@^2.2.6": + version "2.2.7" + resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3" + integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA== + "@types/js-yaml@^4.0.0": version "4.0.5" resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138" @@ -2746,6 +2758,11 @@ resolved "https://registry.yarnpkg.com/@wessberg/stringutil/-/stringutil-1.0.19.tgz#baadcb6f4471fe2d46462a7d7a8294e4b45b29ad" integrity sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg== +"@xobotyi/scrollbar-width@^1.9.5": + version "1.9.5" + resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d" + integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ== + JSV@^4.0.x: version "4.0.2" resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57" @@ -4288,6 +4305,13 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= +copy-to-clipboard@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae" + integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw== + dependencies: + toggle-selection "^1.0.6" + core-js-pure@^3.19.0: version "3.19.3" resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.19.3.tgz#c69b2b36b58927317824994b532ec3f0f7e49607" @@ -4467,11 +4491,27 @@ css-has-pseudo@^3.0.4: dependencies: postcss-selector-parser "^6.0.9" +css-in-js-utils@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99" + integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA== + dependencies: + hyphenate-style-name "^1.0.2" + isobject "^3.0.1" + css-prefers-color-scheme@^6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz#ca8a22e5992c10a5b9d315155e7caee625903349" integrity sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA== +css-tree@^1.1.2: + version "1.1.3" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" + integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q== + dependencies: + mdn-data "2.0.14" + source-map "^0.6.1" + css.escape@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" @@ -4518,6 +4558,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== +csstype@^3.0.6: + version "3.1.0" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2" + integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA== + csv-generate@^3.4.3: version "3.4.3" resolved "https://registry.yarnpkg.com/csv-generate/-/csv-generate-3.4.3.tgz#bc42d943b45aea52afa896874291da4b9108ffff" @@ -5004,7 +5049,7 @@ error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" -error-stack-parser@^2.0.2, error-stack-parser@^2.0.3: +error-stack-parser@^2.0.2, error-stack-parser@^2.0.3, error-stack-parser@^2.0.6: version "2.0.7" resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.7.tgz#b0c6e2ce27d0495cf78ad98715e0cad1219abb57" integrity sha512-chLOW0ZGRf4s8raLrDxa5sdkvPec5YdvwbFnqJme4rk0rFajP8mPtrDL1+I+CwrQDCjswDA5sREX7jYQDQs9vA== @@ -5679,6 +5724,16 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= +fast-shallow-equal@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b" + integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw== + +fastest-stable-stringify@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76" + integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q== + fastq@^1.6.0: version "1.13.0" resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c" @@ -6675,6 +6730,11 @@ hyperlinker@^1.0.0: resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e" integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ== +hyphenate-style-name@^1.0.2: + version "1.0.4" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" + integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== + iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -6792,6 +6852,13 @@ ini@^1.3.5, ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== +inline-style-prefixer@^6.0.0: + version "6.0.1" + resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz#c5c0e43ba8831707afc5f5bbfd97edf45c1fa7ae" + integrity sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ== + dependencies: + css-in-js-utils "^2.0.0" + inquirer@^8.0.0, inquirer@^8.2.1: version "8.2.2" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.2.tgz#1310517a87a0814d25336c78a20b44c3d9b7629d" @@ -7814,6 +7881,11 @@ jpeg-js@0.4.3, jpeg-js@^0.4.2: resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b" integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q== +js-cookie@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8" + integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -8589,6 +8661,11 @@ mdast-util-to-nlcst@^4.0.0: unist-util-position "^3.0.0" vfile-location "^3.1.0" +mdn-data@2.0.14: + version "2.0.14" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" + integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== + media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -8895,6 +8972,20 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== +nano-css@^5.3.1: + version "5.3.5" + resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.5.tgz#3075ea29ffdeb0c7cb6d25edb21d8f7fa8e8fe8e" + integrity sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg== + dependencies: + css-tree "^1.1.2" + csstype "^3.0.6" + fastest-stable-stringify "^2.0.2" + inline-style-prefixer "^6.0.0" + rtl-css-js "^1.14.0" + sourcemap-codec "^1.4.8" + stacktrace-js "^2.0.2" + stylis "^4.0.6" + nanoid@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557" @@ -10486,6 +10577,31 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-universal-interface@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" + integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw== + +react-use@^17.4.0: + version "17.4.0" + resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.0.tgz#cefef258b0a6c534a5c8021c2528ac6e1a4cdc6d" + integrity sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q== + dependencies: + "@types/js-cookie" "^2.2.6" + "@xobotyi/scrollbar-width" "^1.9.5" + copy-to-clipboard "^3.3.1" + fast-deep-equal "^3.1.3" + fast-shallow-equal "^1.0.0" + js-cookie "^2.2.1" + nano-css "^5.3.1" + react-universal-interface "^0.6.2" + resize-observer-polyfill "^1.5.1" + screenfull "^5.1.0" + set-harmonic-interval "^1.0.1" + throttle-debounce "^3.0.1" + ts-easing "^0.2.0" + tslib "^2.1.0" + react@^18.1.0: version "18.1.0" resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890" @@ -10872,6 +10988,11 @@ reserved-words@^0.1.2: resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1" integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE= +resize-observer-polyfill@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-alpn@^1.0.0: version "1.2.1" resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9" @@ -11027,6 +11148,13 @@ rsvp@^4.8.4: resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734" integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA== +rtl-css-js@^1.14.0: + version "1.15.0" + resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.15.0.tgz#680ed816e570a9ebccba9e1cd0f202c6a8bb2dc0" + integrity sha512-99Cu4wNNIhrI10xxUaABHsdDqzalrSRTie4GeCmbGVuehm4oj+fIy8fTzB+16pmKe8Bv9rl+hxIBez6KxExTew== + dependencies: + "@babel/runtime" "^7.1.2" + run-async@^2.4.0: version "2.4.1" resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455" @@ -11137,6 +11265,11 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" +screenfull@^5.1.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba" + integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA== + scuid@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/scuid/-/scuid-1.1.0.tgz#d3f9f920956e737a60f72d0e4ad280bf324d5dab" @@ -11231,6 +11364,11 @@ set-cookie-parser@^2.4.8: resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.4.8.tgz#d0da0ed388bc8f24e706a391f9c9e252a13c58b2" integrity sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg== +set-harmonic-interval@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249" + integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g== + set-value@^2.0.0, set-value@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b" @@ -11502,6 +11640,11 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56" integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== +source-map@0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" + integrity sha1-dc449SvwczxafwwRjYEzSiu19BI= + source-map@^0.5.0, source-map@^0.5.6: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -11604,7 +11747,7 @@ sprintf-js@~1.0.2: resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= -stack-generator@^2.0.3: +stack-generator@^2.0.3, stack-generator@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36" integrity sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q== @@ -11628,6 +11771,23 @@ stackframe@^1.1.1: resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.1.tgz#1033a3473ee67f08e2f2fc8eba6aef4f845124e1" integrity sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg== +stacktrace-gps@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz#7688dc2fc09ffb3a13165ebe0dbcaf41bcf0c69a" + integrity sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg== + dependencies: + source-map "0.5.6" + stackframe "^1.1.1" + +stacktrace-js@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b" + integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg== + dependencies: + error-stack-parser "^2.0.6" + stack-generator "^2.0.5" + stacktrace-gps "^3.0.4" + stacktracey@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/stacktracey/-/stacktracey-2.1.8.tgz#bf9916020738ce3700d1323b32bd2c91ea71199d" @@ -11878,6 +12038,11 @@ strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= +stylis@^4.0.6: + version "4.1.1" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.1.tgz#e46c6a9bbf7c58db1e65bb730be157311ae1fe12" + integrity sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ== + subscriptions-transport-ws@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz#baf88f050cba51d52afe781de5e81b3c31f89883" @@ -12123,6 +12288,11 @@ throat@^5.0.0: resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b" integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA== +throttle-debounce@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb" + integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg== + through2@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.0.tgz#f41a1c31df5e129e4314446f66eca05cd6a30480" @@ -12250,6 +12420,11 @@ to-vfile@^6.0.0: is-buffer "^2.0.0" vfile "^4.0.0" +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI= + toidentifier@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" @@ -12318,6 +12493,11 @@ truncate-utf8-bytes@^1.0.0: dependencies: utf8-byte-length "^1.0.1" +ts-easing@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec" + integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ== + ts-jest@^26.5.4: version "26.5.6" resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.6.tgz#c32e0746425274e1dfe333f43cd3c800e014ec35" From 1e32fd0dd4182c590e905464a7df6ec58830e902 Mon Sep 17 00:00:00 2001 From: Benjamin Sehl Date: Mon, 30 May 2022 23:23:54 -0400 Subject: [PATCH 2/3] Adds Locations page, refines existing components --- templates/demo-store-neue/hydrogen.config.js | 2 +- .../src/components/blocks/ProductCard.jsx | 10 +- .../src/components/elements/Heading.jsx | 12 +- .../sections/FeaturedCollections.jsx | 6 +- .../src/components/sections/Locations.jsx | 6 +- .../components/sections/ProductSwimlane.jsx | 23 +--- .../demo-store-neue/src/lib/placeholders.js | 35 ++++- templates/demo-store-neue/src/lib/utils.js | 10 ++ .../src/routes/locations/[handle].server.jsx | 126 +++++++++++++++++- yarn.lock | 2 +- 10 files changed, 194 insertions(+), 38 deletions(-) diff --git a/templates/demo-store-neue/hydrogen.config.js b/templates/demo-store-neue/hydrogen.config.js index f377da9ee0..6440f5a768 100644 --- a/templates/demo-store-neue/hydrogen.config.js +++ b/templates/demo-store-neue/hydrogen.config.js @@ -9,7 +9,7 @@ export default defineConfig({ shopify: { storeDomain: 'hydrogen-preview.myshopify.com', storefrontToken: '3b580e70970c4528da70c98e097c2fa0', - storefrontApiVersion: '2022-07', + storefrontApiVersion: 'unstable', }, session: CookieSessionStorage('__session', { path: '/', diff --git a/templates/demo-store-neue/src/components/blocks/ProductCard.jsx b/templates/demo-store-neue/src/components/blocks/ProductCard.jsx index de911c940a..7e2bfc2dfe 100644 --- a/templates/demo-store-neue/src/components/blocks/ProductCard.jsx +++ b/templates/demo-store-neue/src/components/blocks/ProductCard.jsx @@ -1,8 +1,8 @@ import {Image, Link, Money, useMoney} from '@shopify/hydrogen'; import clsx from 'clsx'; import {Text} from '~/components/elements'; -import {isRangedPricing, isDiscounted, isNewArrival} from '~/lib/utils'; -import {mockProduct} from '~/lib/placeholders'; +import {isDiscounted, isNewArrival} from '~/lib/utils'; +import {product as mockProduct} from '~/lib/placeholders'; export default function ProductCard({product = mockProduct, label, className}) { let cardLabel; @@ -53,7 +53,6 @@ export default function ProductCard({product = mockProduct, label, className}) { /> )} - {/* 11 Colors Available */}
@@ -63,9 +62,8 @@ export default function ProductCard({product = mockProduct, label, className}) { // function CompareAtPrice({data, className}) { - const {currencyNarrowSymbol, withoutTrailingZerosAndCurrency} = useMoney( - data, - ); + const {currencyNarrowSymbol, withoutTrailingZerosAndCurrency} = + useMoney(data); const styles = clsx('strike', className); diff --git a/templates/demo-store-neue/src/components/elements/Heading.jsx b/templates/demo-store-neue/src/components/elements/Heading.jsx index 195afefe1e..e2d48763d3 100644 --- a/templates/demo-store-neue/src/components/elements/Heading.jsx +++ b/templates/demo-store-neue/src/components/elements/Heading.jsx @@ -3,13 +3,23 @@ import {missingClass, formatText} from '~/lib/utils'; export default function Heading({ as = 'h2', + level, size = 'heading', width = 'default', format = true, className = '', children, }) { - const Component = as; + const levels = { + 1: 'h1', + 2: 'h2', + 3: 'h3', + 4: 'h4', + 5: 'h5', + 6: 'h6', + }; + + const Component = level ? levels[level] : as; const sizes = { display: 'font-bold text-display', diff --git a/templates/demo-store-neue/src/components/sections/FeaturedCollections.jsx b/templates/demo-store-neue/src/components/sections/FeaturedCollections.jsx index 72e8b29045..fd044ec8cf 100644 --- a/templates/demo-store-neue/src/components/sections/FeaturedCollections.jsx +++ b/templates/demo-store-neue/src/components/sections/FeaturedCollections.jsx @@ -5,19 +5,19 @@ import {Heading, Grid} from '~/components/elements'; const mockCollections = [ { id: '1', - url: '/', + url: '/collections/freestyle-collection', image: 'https://picsum.photos/seed/3/912', title: 'Bath', }, { id: '2', - url: '/', + url: '/collections/freestyle-collection', image: 'https://picsum.photos/seed/4/912', title: 'Swim', }, { id: '3', - url: '/', + url: '/collections/freestyle-collection', image: 'https://picsum.photos/seed/5/912', title: 'Gifts', }, diff --git a/templates/demo-store-neue/src/components/sections/Locations.jsx b/templates/demo-store-neue/src/components/sections/Locations.jsx index ab15040880..1a2f2fc67e 100644 --- a/templates/demo-store-neue/src/components/sections/Locations.jsx +++ b/templates/demo-store-neue/src/components/sections/Locations.jsx @@ -4,21 +4,21 @@ import Section from './Section'; const mockLocations = [ { id: '1', - url: '/', + url: '/locations/toronto', image: 'https://picsum.photos/seed/31/912', title: '31 Crosby Street, NYC', subtitle: 'Open Now', }, { id: '2', - url: '/', + url: '/locations/toronto', image: 'https://picsum.photos/seed/41/912', title: '1-5-2 Aobadai, Meguro-Ku, Tokyo, Japan', subtitle: 'Opens at 11am', }, { id: '3', - url: '/', + url: '/locations/toronto', image: 'https://picsum.photos/seed/51/912', title: 'Shop 9, Albert Coates Lane, Melbourne', subtitle: 'Opens at 12am', diff --git a/templates/demo-store-neue/src/components/sections/ProductSwimlane.jsx b/templates/demo-store-neue/src/components/sections/ProductSwimlane.jsx index 0ddaa1e730..23ec5932ca 100644 --- a/templates/demo-store-neue/src/components/sections/ProductSwimlane.jsx +++ b/templates/demo-store-neue/src/components/sections/ProductSwimlane.jsx @@ -1,27 +1,14 @@ import Section from './Section'; import {ProductCard} from '~/components/blocks'; -const mockProduct = { - label: 'Limited Edition', - image: 'https://picsum.photos/seed/5/672/848', - title: 'The Mason Horse Bit Loafer, Palomino II', - createdAt: new Date(), - handle: 'handle', - price: { - amount: '345', - symbol: '$', - }, - compareAtPrice: { - amount: '425', - symbol: '$', - }, -}; - const mockProducts = new Array(12).fill(''); -export default function ProductSwimlane({title, products = mockProducts}) { +export default function ProductSwimlane({ + title = 'Featured Products', + products = mockProducts, +}) { return ( -
+
{products.map((product, i) => { return ; diff --git a/templates/demo-store-neue/src/lib/placeholders.js b/templates/demo-store-neue/src/lib/placeholders.js index e9365cfd95..27dd8c615d 100644 --- a/templates/demo-store-neue/src/lib/placeholders.js +++ b/templates/demo-store-neue/src/lib/placeholders.js @@ -1,4 +1,4 @@ -export const mockProduct = { +export const product = { label: 'Limited Edition' /* Metafield */, id: 'gid://shopify/Product/6730850828344', title: 'The Hydrogen', @@ -31,8 +31,7 @@ export const mockProduct = { { id: 'gid://shopify/ProductVariant/41007289630776', image: { - url: - 'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/hydrogen-morning.jpg?v=1636146509', + url: 'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/hydrogen-morning.jpg?v=1636146509', altText: 'The Hydrogen snowboard, color Morning', width: 1200, height: 1504, @@ -49,3 +48,33 @@ export const mockProduct = { ], }, }; + +export const location = { + metaobject: { + id: 'gid://shopify/Metaobject/7176248', + featured_image: { + reference: { + image: { + url: 'https://cdn.shopify.com/s/files/1/0551/4566/0472/files/kotn-toronto.jpg?v=1653965858', + width: 4400, + height: 2927, + }, + }, + }, + title: { + value: 'Toronto', + }, + address: { + value: '754 Queen St W\nToronto, ON\nM4M 3N8', + }, + hours: { + value: '["Monday-Saturday: 11am-6pm","Sunday: 12pm-6pm"]', + }, + email: { + value: 'toronto@snowdevil.com', + }, + phone: { + value: '416-363-5656', + }, + }, +}; diff --git a/templates/demo-store-neue/src/lib/utils.js b/templates/demo-store-neue/src/lib/utils.js index 709f7012cb..15a45aa310 100644 --- a/templates/demo-store-neue/src/lib/utils.js +++ b/templates/demo-store-neue/src/lib/utils.js @@ -24,6 +24,16 @@ export function formatText(input) { ); } +export function formatPhoneNumber(phoneNumberString) { + var cleaned = ('' + phoneNumberString).replace(/\D/g, ''); + var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/); + if (match) { + var intlCode = match[1] ? '+1 ' : ''; + return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join(''); + } + return null; +} + export function isRangedPricing(priceRange) { return priceRange.minVariantPrice.amount < priceRange.maxVariantPrice.amount; } diff --git a/templates/demo-store-neue/src/routes/locations/[handle].server.jsx b/templates/demo-store-neue/src/routes/locations/[handle].server.jsx index 5bf16f7693..596d3e1dcb 100644 --- a/templates/demo-store-neue/src/routes/locations/[handle].server.jsx +++ b/templates/demo-store-neue/src/routes/locations/[handle].server.jsx @@ -1,4 +1,126 @@ // TODO: Custom Content Model -export default function Location() { - return
Location
; +import {useShopQuery, useRouteParams, Seo, gql, Image} from '@shopify/hydrogen'; +import {DefaultLayout as Layout} from '~/components/layouts'; +import {NotFound} from '~/components/pages'; +import {Text, Button, Heading} from '~/components/elements'; +import {formatPhoneNumber} from '~/lib/utils'; +import {location as mockLocation} from '~/lib/placeholders'; + +export default function Location({params}) { + const {handle} = useRouteParams(); + + const {data} = useShopQuery({ + query: QUERY, + variables: { + handle, + }, + preload: true, + }); + + if (data?.metaobject == null) { + return ; + } + + const {featured_image, title, address, hours, email, phone} = data.metaobject; + + const directions_link = `https://www.google.com/maps/dir/?api=1&destination=${address.value.replace( + /(\r\n|\n|\r)/gm, + '', + )}`; + + return ( + +
+ +
+

{title.value}

+
+
+
+ + Address + +
'), + }} + /> + + Get directions + +
+ +
+
+ + Hours + +
    + {JSON.parse(hours.value).map((hour, i) => ( + + {hour} + + ))} +
+
+
+
+
+ + ); } + +const QUERY = gql` + query store($handle: String!) { + metaobject(byHandle: {type: "stores", handle: $handle}) { + id + featured_image: field(key: "featured_image") { + reference { + ... on MediaImage { + image { + url + width + height + } + } + } + } + title: field(key: "title") { + value + } + address: field(key: "address") { + value + } + hours: field(key: "hours") { + value + } + email: field(key: "email") { + value + } + phone: field(key: "phone") { + value + } + } + } +`; diff --git a/yarn.lock b/yarn.lock index 8b14839d96..0f0611f05e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12964,7 +12964,7 @@ unified-message-control@^3.0.0: unist-util-visit "^2.0.0" vfile-location "^3.0.0" -unified@^9.0.0: +unified@9.2.2, unified@^9.0.0: version "9.2.2" resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975" integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ== From af30da732799fc1a7de64fd3381151e593e735f7 Mon Sep 17 00:00:00 2001 From: Benjamin Sehl Date: Mon, 30 May 2022 23:24:23 -0400 Subject: [PATCH 3/3] Runs yarn format --- .../demo-store-neue/src/components/elements/Grid.jsx | 5 +++-- .../demo-store-neue/src/components/sections/Hero.jsx | 5 +++-- templates/demo-store-neue/src/styles/index.css | 12 ++++++------ 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/templates/demo-store-neue/src/components/elements/Grid.jsx b/templates/demo-store-neue/src/components/elements/Grid.jsx index dc880b42d0..f613041476 100644 --- a/templates/demo-store-neue/src/components/elements/Grid.jsx +++ b/templates/demo-store-neue/src/components/elements/Grid.jsx @@ -13,8 +13,9 @@ export default function Grid({ const Component = as; const layouts = { - default: `grid-cols-2 ${items >= 3 && 'md:grid-cols-3'} ${items >= 4 && - 'lg:grid-cols-4'}`, + default: `grid-cols-2 ${items >= 3 && 'md:grid-cols-3'} ${ + items >= 4 && 'lg:grid-cols-4' + }`, auto: 'auto-cols-auto', }; diff --git a/templates/demo-store-neue/src/components/sections/Hero.jsx b/templates/demo-store-neue/src/components/sections/Hero.jsx index 32efe9da41..8962a8f3f9 100644 --- a/templates/demo-store-neue/src/components/sections/Hero.jsx +++ b/templates/demo-store-neue/src/components/sections/Hero.jsx @@ -25,8 +25,9 @@ export default function Hero({ return (
{images.map((image, i) => ( diff --git a/templates/demo-store-neue/src/styles/index.css b/templates/demo-store-neue/src/styles/index.css index 34de2c7170..d89226a516 100644 --- a/templates/demo-store-neue/src/styles/index.css +++ b/templates/demo-store-neue/src/styles/index.css @@ -60,10 +60,10 @@ display: none; } - input[type="search"]::-webkit-search-decoration, - input[type="search"]::-webkit-search-cancel-button, - input[type="search"]::-webkit-search-results-button, - input[type="search"]::-webkit-search-results-decoration { + input[type='search']::-webkit-search-decoration, + input[type='search']::-webkit-search-cancel-button, + input[type='search']::-webkit-search-results-button, + input[type='search']::-webkit-search-results-decoration { -webkit-appearance: none; } } @@ -76,7 +76,7 @@ .strike { position: relative; &::before { - content: ""; + content: ''; display: block; position: absolute; width: 108%; @@ -92,7 +92,7 @@ .image-border { @apply relative; &::before { - content: " "; + content: ' '; @apply absolute block top-0 left-0 w-full h-full shadow-border rounded; } }