@shopify/cli-hydrogen 4.0.0-alpha.9 → 4.0.0

package/dist/templates/demo-store/app/components/Hero.tsx

@@ -1,129 +0,0 @@
-import clsx from 'clsx';
-import type {SerializeFrom} from '@shopify/remix-oxygen';
-import {MediaFile} from '@shopify/storefront-kit-react';
-import type {
-  MediaImage,
-  Media,
-  Video as MediaVideo,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-import {Heading, Text, Link} from '~/components';
-import type {CollectionHero} from '~/routes/($lang)/index';
-
-/**
- * Hero component that renders metafields attached to collection resources
- **/
-export function Hero({
-  byline,
-  cta,
-  handle,
-  heading,
-  height,
-  loading,
-  spread,
-  spreadSecondary,
-  top,
-}: SerializeFrom<CollectionHero>) {
-  return (
-    <Link to={`/collections/${handle}`}>
-      <section
-        className={clsx(
-          'relative justify-end flex flex-col w-full',
-          top && '-mt-nav',
-          height === 'full'
-            ? 'h-screen'
-            : 'aspect-[4/5] sm:aspect-square md:aspect-[5/4] lg:aspect-[3/2] xl:aspect-[2/1]',
-        )}
-      >
-        <div className="absolute inset-0 grid flex-grow grid-flow-col pointer-events-none auto-cols-fr -z-10 content-stretch overflow-clip">
-          {spread?.reference && (
-            <div>
-              <SpreadMedia
-                scale={2}
-                sizes={
-                  spreadSecondary?.reference
-                    ? '(min-width: 80em) 700px, (min-width: 48em) 450px, 500px'
-                    : '(min-width: 80em) 1400px, (min-width: 48em) 900px, 500px'
-                }
-                widths={
-                  spreadSecondary?.reference
-                    ? [500, 450, 700]
-                    : [500, 900, 1400]
-                }
-                width={spreadSecondary?.reference ? 375 : 750}
-                data={spread.reference as Media}
-                loading={loading}
-              />
-            </div>
-          )}
-          {spreadSecondary?.reference && (
-            <div className="hidden md:block">
-              <SpreadMedia
-                sizes="(min-width: 80em) 700, (min-width: 48em) 450, 500"
-                widths={[450, 700]}
-                width={375}
-                data={spreadSecondary.reference as Media}
-              />
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col items-baseline justify-between gap-4 px-6 py-8 sm:px-8 md:px-12 bg-gradient-to-t dark:from-contrast/60 dark:text-primary from-primary/60 text-contrast">
-          {heading?.value && (
-            <Heading format as="h2" size="display" className="max-w-md">
-              {heading.value}
-            </Heading>
-          )}
-          {byline?.value && (
-            <Text format width="narrow" as="p" size="lead">
-              {byline.value}
-            </Text>
-          )}
-          {cta?.value && <Text size="lead">{cta.value}</Text>}
-        </div>
-      </section>
-    </Link>
-  );
-}
-
-interface SpreadMediaProps {
-  data: Media | MediaImage | MediaVideo;
-  loading?: HTMLImageElement['loading'];
-  scale?: 2 | 3;
-  sizes: string;
-  width: number;
-  widths: number[];
-}
-
-function SpreadMedia({
-  data,
-  loading,
-  scale,
-  sizes,
-  width,
-  widths,
-}: SpreadMediaProps) {
-  return (
-    <MediaFile
-      data={data}
-      className="block object-cover w-full h-full"
-      mediaOptions={{
-        video: {
-          controls: false,
-          muted: true,
-          loop: true,
-          playsInline: true,
-          autoPlay: true,
-          width: (scale ?? 1) * width,
-          previewImageOptions: {scale, src: data.previewImage?.url ?? ''},
-        },
-        image: {
-          loading,
-          loaderOptions: {scale, crop: 'center'},
-          widths,
-          sizes,
-          width,
-          alt: data.alt || '',
-        },
-      }}
-    />
-  );
-}

package/dist/templates/demo-store/app/components/Icon.tsx

@@ -1,253 +0,0 @@
-import clsx from 'clsx';
-
-type IconProps = JSX.IntrinsicElements['svg'] & {
-  direction?: 'up' | 'right' | 'down' | 'left';
-};
-
-function Icon({
-  children,
-  className,
-  fill = 'currentColor',
-  stroke,
-  ...props
-}: IconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      {...props}
-      fill={fill}
-      stroke={stroke}
-      className={clsx('w-5 h-5', className)}
-    >
-      {children}
-    </svg>
-  );
-}
-
-export function IconMenu(props: IconProps) {
-  return (
-    <Icon {...props} stroke={props.stroke || 'currentColor'}>
-      <title>Menu</title>
-      <line x1="3" y1="6.375" x2="17" y2="6.375" strokeWidth="1.25" />
-      <line x1="3" y1="10.375" x2="17" y2="10.375" strokeWidth="1.25" />
-      <line x1="3" y1="14.375" x2="17" y2="14.375" strokeWidth="1.25" />
-    </Icon>
-  );
-}
-
-export function IconClose(props: IconProps) {
-  return (
-    <Icon {...props} stroke={props.stroke || 'currentColor'}>
-      <title>Close</title>
-      <line
-        x1="4.44194"
-        y1="4.30806"
-        x2="15.7556"
-        y2="15.6218"
-        strokeWidth="1.25"
-      />
-      <line
-        y1="-0.625"
-        x2="16"
-        y2="-0.625"
-        transform="matrix(-0.707107 0.707107 0.707107 0.707107 16 4.75)"
-        strokeWidth="1.25"
-      />
-    </Icon>
-  );
-}
-
-export function IconArrow({direction = 'right'}: IconProps) {
-  let rotate;
-
-  switch (direction) {
-    case 'right':
-      rotate = 'rotate-0';
-      break;
-    case 'left':
-      rotate = 'rotate-180';
-      break;
-    case 'up':
-      rotate = '-rotate-90';
-      break;
-    case 'down':
-      rotate = 'rotate-90';
-      break;
-    default:
-      rotate = 'rotate-0';
-  }
-
-  return (
-    <Icon className={`w-5 h-5 ${rotate}`}>
-      <title>Arrow</title>
-      <path d="M7 3L14 10L7 17" strokeWidth="1.25" />
-    </Icon>
-  );
-}
-
-export function IconCaret({
-  direction = 'down',
-  stroke = 'currentColor',
-  ...props
-}: IconProps) {
-  let rotate;
-
-  switch (direction) {
-    case 'down':
-      rotate = 'rotate-0';
-      break;
-    case 'up':
-      rotate = 'rotate-180';
-      break;
-    case 'left':
-      rotate = '-rotate-90';
-      break;
-    case 'right':
-      rotate = 'rotate-90';
-      break;
-    default:
-      rotate = 'rotate-0';
-  }
-
-  return (
-    <Icon
-      {...props}
-      className={`w-5 h-5 transition ${rotate}`}
-      fill="transparent"
-      stroke={stroke}
-    >
-      <title>Caret</title>
-      <path d="M14 8L10 12L6 8" strokeWidth="1.25" />
-    </Icon>
-  );
-}
-
-export function IconSelect(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <title>Select</title>
-      <path d="M7 8.5L10 6.5L13 8.5" strokeWidth="1.25" />
-      <path d="M13 11.5L10 13.5L7 11.5" strokeWidth="1.25" />
-    </Icon>
-  );
-}
-
-export function IconBag(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <title>Bag</title>
-      <path
-        fillRule="evenodd"
-        d="M8.125 5a1.875 1.875 0 0 1 3.75 0v.375h-3.75V5Zm-1.25.375V5a3.125 3.125 0 1 1 6.25 0v.375h3.5V15A2.625 2.625 0 0 1 14 17.625H6A2.625 2.625 0 0 1 3.375 15V5.375h3.5ZM4.625 15V6.625h10.75V15c0 .76-.616 1.375-1.375 1.375H6c-.76 0-1.375-.616-1.375-1.375Z"
-      />
-    </Icon>
-  );
-}
-
-export function IconAccount(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <title>Account</title>
-      <path
-        fillRule="evenodd"
-        d="M9.9998 12.625c-1.9141 0-3.6628.698-5.0435 1.8611C3.895 13.2935 3.25 11.7221 3.25 10c0-3.728 3.022-6.75 6.75-6.75 3.7279 0 6.75 3.022 6.75 6.75 0 1.7222-.645 3.2937-1.7065 4.4863-1.3807-1.1632-3.1295-1.8613-5.0437-1.8613ZM10 18c-2.3556 0-4.4734-1.0181-5.9374-2.6382C2.7806 13.9431 2 12.0627 2 10c0-4.4183 3.5817-8 8-8s8 3.5817 8 8-3.5817 8-8 8Zm0-12.5c-1.567 0-2.75 1.394-2.75 3s1.183 3 2.75 3 2.75-1.394 2.75-3-1.183-3-2.75-3Z"
-      />
-    </Icon>
-  );
-}
-
-export function IconHelp(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <title>Help</title>
-      <path d="M3.375 10a6.625 6.625 0 1 1 13.25 0 6.625 6.625 0 0 1-13.25 0ZM10 2.125a7.875 7.875 0 1 0 0 15.75 7.875 7.875 0 0 0 0-15.75Zm.699 10.507H9.236V14h1.463v-1.368ZM7.675 7.576A3.256 3.256 0 0 0 7.5 8.67h1.245c0-.496.105-.89.316-1.182.218-.299.553-.448 1.005-.448a1 1 0 0 1 .327.065c.124.044.24.113.35.208.108.095.2.223.272.383.08.154.12.34.12.558a1.3 1.3 0 0 1-.076.471c-.044.131-.11.252-.197.361-.08.102-.174.197-.283.285-.102.087-.212.182-.328.284a3.157 3.157 0 0 0-.382.383c-.102.124-.19.27-.262.438a2.476 2.476 0 0 0-.164.591 6.333 6.333 0 0 0-.043.81h1.179c0-.263.021-.485.065-.668a1.65 1.65 0 0 1 .207-.47c.088-.139.19-.263.306-.372.117-.11.244-.223.382-.34l.35-.306c.116-.11.218-.23.305-.361.095-.139.168-.3.219-.482.058-.19.087-.412.087-.667 0-.35-.062-.664-.186-.942a1.881 1.881 0 0 0-.513-.689 2.07 2.07 0 0 0-.753-.427A2.721 2.721 0 0 0 10.12 6c-.4 0-.764.066-1.092.197a2.36 2.36 0 0 0-.83.536c-.225.234-.4.515-.523.843Z" />
-    </Icon>
-  );
-}
-
-export function IconSearch(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <title>Search</title>
-      <path
-        fillRule="evenodd"
-        d="M13.3 8.52a4.77 4.77 0 1 1-9.55 0 4.77 4.77 0 0 1 9.55 0Zm-.98 4.68a6.02 6.02 0 1 1 .88-.88l4.3 4.3-.89.88-4.3-4.3Z"
-      />
-    </Icon>
-  );
-}
-
-export function IconCheck({
-  stroke = 'currentColor',
-  ...props
-}: React.ComponentProps<typeof Icon>) {
-  return (
-    <Icon {...props} fill="transparent" stroke={stroke}>
-      <title>Check</title>
-      <circle cx="10" cy="10" r="7.25" strokeWidth="1.25" />
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-        d="m7.04 10.37 2.42 2.41 3.5-5.56"
-      />
-    </Icon>
-  );
-}
-
-export function IconXMark({
-  stroke = 'currentColor',
-  ...props
-}: React.ComponentProps<typeof Icon>) {
-  return (
-    <Icon {...props} fill="transparent" stroke={stroke}>
-      <title>Delete</title>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </Icon>
-  );
-}
-
-export function IconRemove(props: IconProps) {
-  return (
-    <Icon {...props} fill="transparent" stroke={props.stroke || 'currentColor'}>
-      <title>Remove</title>
-      <path
-        d="M4 6H16"
-        strokeWidth="1.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path d="M8.5 9V14" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M11.5 9V14" strokeLinecap="round" strokeLinejoin="round" />
-      <path
-        d="M5.5 6L6 17H14L14.5 6"
-        strokeWidth="1.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M8 6L8 5C8 4 8.75 3 10 3C11.25 3 12 4 12 5V6"
-        strokeWidth="1.25"
-      />
-    </Icon>
-  );
-}
-
-export function IconFilters(props: IconProps) {
-  return (
-    <Icon {...props} fill="transparent" stroke={props.stroke || 'currentColor'}>
-      <title>Filters</title>
-      <circle cx="4.5" cy="6.5" r="2" />
-      <line x1="6" y1="6.5" x2="14" y2="6.5" />
-      <line x1="4.37114e-08" y1="6.5" x2="3" y2="6.5" />
-      <line x1="4.37114e-08" y1="13.5" x2="8" y2="13.5" />
-      <line x1="11" y1="13.5" x2="14" y2="13.5" />
-      <circle cx="9.5" cy="13.5" r="2" />
-    </Icon>
-  );
-}

package/dist/templates/demo-store/app/components/Input.tsx

@@ -1,24 +0,0 @@
-import clsx from 'clsx';
-
-export function Input({
-  className = '',
-  type,
-  variant,
-  ...props
-}: {
-  className?: string;
-  type?: string;
-  variant: 'search' | 'minisearch';
-  [key: string]: any;
-}) {
-  const variants = {
-    search:
-      'bg-transparent px-0 py-2 text-heading w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-primary/10 focus:border-primary/90',
-    minisearch:
-      'bg-transparent hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit',
-  };
-
-  const styles = clsx(variants[variant], className);
-
-  return <input type={type} {...props} className={styles} />;
-}