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

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

@@ -1,414 +0,0 @@
-import {SyntheticEvent, useMemo, useState} from 'react';
-import {Menu} from '@headlessui/react';
-
-import {Heading, IconFilters, IconCaret, IconXMark, Text} from '~/components';
-import {
-  Link,
-  useLocation,
-  useSearchParams,
-  Location,
-  useNavigate,
-} from '@remix-run/react';
-import {useDebounce} from 'react-use';
-import {Disclosure} from '@headlessui/react';
-
-import type {
-  FilterType,
-  Filter,
-  Collection,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-import {
-  AppliedFilter,
-  SortParam,
-} from '~/routes/($lang)/collections/$collectionHandle';
-
-type Props = {
-  filters: Filter[];
-  appliedFilters?: AppliedFilter[];
-  children: React.ReactNode;
-  collections?: Collection[];
-};
-
-export function SortFilter({
-  filters,
-  appliedFilters = [],
-  children,
-  collections = [],
-}: Props) {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <>
-      <div className="flex items-center justify-between w-full">
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          className={
-            'relative flex items-center justify-center w-8 h-8 focus:ring-primary/5'
-          }
-        >
-          <IconFilters />
-        </button>
-        <SortMenu />
-      </div>
-      <div className="flex flex-wrap flex-col md:flex-row">
-        <div
-          className={`transition-all duration-200 ${
-            isOpen
-              ? 'opacity-100 min-w-full md:min-w-[240px] md:w-[240px] md:pr-8 max-h-full'
-              : 'opacity-0 md:min-w-[0px] md:w-[0px] pr-0 max-h-0 md:max-h-full'
-          }`}
-        >
-          <FiltersDrawer
-            collections={collections}
-            filters={filters}
-            appliedFilters={appliedFilters}
-          />
-        </div>
-        <div className="flex-1">{children}</div>
-      </div>
-    </>
-  );
-}
-
-export function FiltersDrawer({
-  filters = [],
-  appliedFilters = [],
-  collections = [],
-}: {
-  filters: Filter[];
-  appliedFilters: AppliedFilter[];
-  collections: Collection[];
-}) {
-  const [params] = useSearchParams();
-  const location = useLocation();
-
-  const filterMarkup = (filter: Filter, option: Filter['values'][0]) => {
-    switch (filter.type) {
-      case 'PRICE_RANGE':
-        const min =
-          params.has('minPrice') && !isNaN(Number(params.get('minPrice')))
-            ? Number(params.get('minPrice'))
-            : undefined;
-
-        const max =
-          params.has('maxPrice') && !isNaN(Number(params.get('maxPrice')))
-            ? Number(params.get('maxPrice'))
-            : undefined;
-
-        return <PriceRangeFilter min={min} max={max} />;
-
-      default:
-        const to = getFilterLink(
-          filter,
-          option.input as string,
-          params,
-          location,
-        );
-        return (
-          <Link
-            className="focus:underline hover:underline"
-            prefetch="intent"
-            to={to}
-          >
-            {option.label}
-          </Link>
-        );
-    }
-  };
-
-  const collectionsMarkup = collections.map((collection) => {
-    return (
-      <li key={collection.handle} className="pb-4">
-        <Link
-          to={`/collections/${collection.handle}`}
-          className="focus:underline hover:underline"
-          key={collection.handle}
-          prefetch="intent"
-        >
-          {collection.title}
-        </Link>
-      </li>
-    );
-  });
-
-  return (
-    <>
-      <nav className="py-8">
-        {appliedFilters.length > 0 ? (
-          <div className="pb-8">
-            <AppliedFilters filters={appliedFilters} />
-          </div>
-        ) : null}
-
-        <Disclosure as="div" className="w-full">
-          {({open}) => (
-            <>
-              <Disclosure.Button className="py-4 w-full flex justify-between">
-                <Text size="lead">Collection</Text>
-                <IconCaret direction={open ? 'up' : 'down'} />
-              </Disclosure.Button>
-              <Disclosure.Panel>
-                <ul className="py-2">{collectionsMarkup}</ul>
-              </Disclosure.Panel>
-            </>
-          )}
-        </Disclosure>
-        <Heading as="h4" size="lead" className="pb-4">
-          Filter By
-        </Heading>
-        <div className="divide-y">
-          {filters.map((filter: Filter) => (
-            <Disclosure as="div" key={filter.id} className="w-full">
-              {({open}) => (
-                <>
-                  <Disclosure.Button className="py-4 w-full flex justify-between">
-                    <Text size="lead">{filter.label}</Text>
-                    <IconCaret direction={open ? 'up' : 'down'} />
-                  </Disclosure.Button>
-                  <Disclosure.Panel key={filter.id}>
-                    <ul key={filter.id} className="py-2">
-                      {filter.values?.map((option) => {
-                        return (
-                          <li key={option.id} className="pb-4">
-                            {filterMarkup(filter, option)}
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  </Disclosure.Panel>
-                </>
-              )}
-            </Disclosure>
-          ))}
-        </div>
-      </nav>
-    </>
-  );
-}
-
-function AppliedFilters({filters = []}: {filters: AppliedFilter[]}) {
-  const [params] = useSearchParams();
-  const location = useLocation();
-  return (
-    <>
-      <Heading as="h4" size="lead" className="pb-4">
-        Applied filters
-      </Heading>
-      <div className="flex flex-wrap gap-2">
-        {filters.map((filter: AppliedFilter) => {
-          return (
-            <Link
-              to={getAppliedFilterLink(filter, params, location)}
-              className="rounded-full border px-2 flex gap"
-              key={`${filter.label}-${filter.urlParam}`}
-            >
-              <span className="flex-grow">{filter.label}</span>
-              <span>
-                <IconXMark />
-              </span>
-            </Link>
-          );
-        })}
-      </div>
-    </>
-  );
-}
-
-function getAppliedFilterLink(
-  filter: AppliedFilter,
-  params: URLSearchParams,
-  location: Location,
-) {
-  const paramsClone = new URLSearchParams(params);
-  if (filter.urlParam.key === 'variantOption') {
-    const variantOptions = paramsClone.getAll('variantOption');
-    const filteredVariantOptions = variantOptions.filter(
-      (options) => !options.includes(filter.urlParam.value),
-    );
-    paramsClone.delete(filter.urlParam.key);
-    for (const filteredVariantOption of filteredVariantOptions) {
-      paramsClone.append(filter.urlParam.key, filteredVariantOption);
-    }
-  } else {
-    paramsClone.delete(filter.urlParam.key);
-  }
-  return `${location.pathname}?${paramsClone.toString()}`;
-}
-
-function getSortLink(
-  sort: SortParam,
-  params: URLSearchParams,
-  location: Location,
-) {
-  params.set('sort', sort);
-  return `${location.pathname}?${params.toString()}`;
-}
-
-function getFilterLink(
-  filter: Filter,
-  rawInput: string | Record<string, any>,
-  params: URLSearchParams,
-  location: ReturnType<typeof useLocation>,
-) {
-  const paramsClone = new URLSearchParams(params);
-  const newParams = filterInputToParams(filter.type, rawInput, paramsClone);
-  return `${location.pathname}?${newParams.toString()}`;
-}
-
-const PRICE_RANGE_FILTER_DEBOUNCE = 500;
-
-function PriceRangeFilter({max, min}: {max?: number; min?: number}) {
-  const location = useLocation();
-  const params = useMemo(
-    () => new URLSearchParams(location.search),
-    [location.search],
-  );
-  const navigate = useNavigate();
-
-  const [minPrice, setMinPrice] = useState(min ? String(min) : '');
-  const [maxPrice, setMaxPrice] = useState(max ? String(max) : '');
-
-  useDebounce(
-    () => {
-      if (
-        (minPrice === '' || minPrice === String(min)) &&
-        (maxPrice === '' || maxPrice === String(max))
-      )
-        return;
-
-      const price: {min?: string; max?: string} = {};
-      if (minPrice !== '') price.min = minPrice;
-      if (maxPrice !== '') price.max = maxPrice;
-
-      const newParams = filterInputToParams('PRICE_RANGE', {price}, params);
-      navigate(`${location.pathname}?${newParams.toString()}`);
-    },
-    PRICE_RANGE_FILTER_DEBOUNCE,
-    [minPrice, maxPrice],
-  );
-
-  const onChangeMax = (event: SyntheticEvent) => {
-    const newMaxPrice = (event.target as HTMLInputElement).value;
-    setMaxPrice(newMaxPrice);
-  };
-
-  const onChangeMin = (event: SyntheticEvent) => {
-    const newMinPrice = (event.target as HTMLInputElement).value;
-    setMinPrice(newMinPrice);
-  };
-
-  return (
-    <div className="flex flex-col">
-      <label className="mb-4">
-        <span>from</span>
-        <input
-          name="maxPrice"
-          className="text-black"
-          type="text"
-          defaultValue={min}
-          placeholder={'$'}
-          onChange={onChangeMin}
-        />
-      </label>
-      <label>
-        <span>to</span>
-        <input
-          name="minPrice"
-          className="text-black"
-          type="number"
-          defaultValue={max}
-          placeholder={'$'}
-          onChange={onChangeMax}
-        />
-      </label>
-    </div>
-  );
-}
-
-function filterInputToParams(
-  type: FilterType,
-  rawInput: string | Record<string, any>,
-  params: URLSearchParams,
-) {
-  const input = typeof rawInput === 'string' ? JSON.parse(rawInput) : rawInput;
-  switch (type) {
-    case 'PRICE_RANGE':
-      if (input.price.min) params.set('minPrice', input.price.min);
-      if (input.price.max) params.set('maxPrice', input.price.max);
-      break;
-    case 'LIST':
-      Object.entries(input).forEach(([key, value]) => {
-        if (typeof value === 'string') {
-          params.set(key, value);
-        } else if (typeof value === 'boolean') {
-          params.set(key, value.toString());
-        } else {
-          const {name, value: val} = value as {name: string; value: string};
-          const allVariants = params.getAll(`variantOption`);
-          const newVariant = `${name}:${val}`;
-          if (!allVariants.includes(newVariant)) {
-            params.append('variantOption', newVariant);
-          }
-        }
-      });
-      break;
-  }
-
-  return params;
-}
-
-export default function SortMenu() {
-  const items: {label: string; key: SortParam}[] = [
-    {label: 'Featured', key: 'featured'},
-    {
-      label: 'Price: Low - High',
-      key: 'price-low-high',
-    },
-    {
-      label: 'Price: High - Low',
-      key: 'price-high-low',
-    },
-    {
-      label: 'Best Selling',
-      key: 'best-selling',
-    },
-    {
-      label: 'Newest',
-      key: 'newest',
-    },
-  ];
-  const [params] = useSearchParams();
-  const location = useLocation();
-  const activeItem = items.find((item) => item.key === params.get('sort'));
-
-  return (
-    <Menu as="div" className="relative z-40">
-      <Menu.Button className="flex items-center">
-        <span className="px-2">
-          <span className="px-2 font-medium">Sort by:</span>
-          <span>{(activeItem || items[0]).label}</span>
-        </span>
-        <IconCaret />
-      </Menu.Button>
-
-      <Menu.Items
-        as="nav"
-        className="rounded-sm	bg-contrast flex flex-col absolute text-right right-0 p-4"
-      >
-        {items.map((item) => (
-          <Menu.Item key={item.label}>
-            {() => (
-              <Link
-                className={`block text-sm pb-2 px-3 ${
-                  activeItem?.key === item.key ? 'font-bold' : 'font-normal'
-                }`}
-                to={getSortLink(item.key, params, location)}
-              >
-                {item.label}
-              </Link>
-            )}
-          </Menu.Item>
-        ))}
-      </Menu.Items>
-    </Menu>
-  );
-}

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

@@ -1,192 +0,0 @@
-import clsx from 'clsx';
-
-import {missingClass, formatText} from '~/lib/utils';
-
-export function Text({
-  as: Component = 'span',
-  className,
-  color = 'default',
-  format,
-  size = 'copy',
-  width = 'default',
-  children,
-  ...props
-}: {
-  as?: React.ElementType;
-  className?: string;
-  color?: 'default' | 'primary' | 'subtle' | 'notice' | 'contrast';
-  format?: boolean;
-  size?: 'lead' | 'copy' | 'fine';
-  width?: 'default' | 'narrow' | 'wide';
-  children: React.ReactNode;
-  [key: string]: any;
-}) {
-  const colors: Record<string, string> = {
-    default: 'inherit',
-    primary: 'text-primary/90',
-    subtle: 'text-primary/50',
-    notice: 'text-notice',
-    contrast: 'text-contrast/90',
-  };
-
-  const sizes: Record<string, string> = {
-    lead: 'text-lead font-medium',
-    copy: 'text-copy',
-    fine: 'text-fine subpixel-antialiased',
-  };
-
-  const widths: Record<string, string> = {
-    default: 'max-w-prose',
-    narrow: 'max-w-prose-narrow',
-    wide: 'max-w-prose-wide',
-  };
-
-  const styles = clsx(
-    missingClass(className, 'max-w-') && widths[width],
-    missingClass(className, 'whitespace-') && 'whitespace-pre-wrap',
-    missingClass(className, 'text-') && colors[color],
-    sizes[size],
-    className,
-  );
-
-  return (
-    <Component {...props} className={styles}>
-      {format ? formatText(children) : children}
-    </Component>
-  );
-}
-
-export function Heading({
-  as: Component = 'h2',
-  children,
-  className = '',
-  format,
-  size = 'heading',
-  width = 'default',
-  ...props
-}: {
-  as?: React.ElementType;
-  children: React.ReactNode;
-  format?: boolean;
-  size?: 'display' | 'heading' | 'lead' | 'copy';
-  width?: 'default' | 'narrow' | 'wide';
-} & React.HTMLAttributes<HTMLHeadingElement>) {
-  const sizes = {
-    display: 'font-bold text-display',
-    heading: 'font-bold text-heading',
-    lead: 'font-bold text-lead',
-    copy: 'font-medium text-copy',
-  };
-
-  const widths = {
-    default: 'max-w-prose',
-    narrow: 'max-w-prose-narrow',
-    wide: 'max-w-prose-wide',
-  };
-
-  const styles = clsx(
-    missingClass(className, 'whitespace-') && 'whitespace-pre-wrap',
-    missingClass(className, 'max-w-') && widths[width],
-    missingClass(className, 'font-') && sizes[size],
-    className,
-  );
-
-  return (
-    <Component {...props} className={styles}>
-      {format ? formatText(children) : children}
-    </Component>
-  );
-}
-
-export function Section({
-  as: Component = 'section',
-  children,
-  className,
-  divider = 'none',
-  display = 'grid',
-  heading,
-  padding = 'all',
-  ...props
-}: {
-  as?: React.ElementType;
-  children?: React.ReactNode;
-  className?: string;
-  divider?: 'none' | 'top' | 'bottom' | 'both';
-  display?: 'grid' | 'flex';
-  heading?: string;
-  padding?: 'x' | 'y' | 'swimlane' | 'all';
-  [key: string]: any;
-}) {
-  const paddings = {
-    x: 'px-6 md:px-8 lg:px-12',
-    y: 'py-6 md:py-8 lg:py-12',
-    swimlane: 'pt-4 md:pt-8 lg:pt-12 md:pb-4 lg:pb-8',
-    all: 'p-6 md:p-8 lg:p-12',
-  };
-
-  const dividers = {
-    none: 'border-none',
-    top: 'border-t border-primary/05',
-    bottom: 'border-b border-primary/05',
-    both: 'border-y border-primary/05',
-  };
-
-  const displays = {
-    flex: 'flex',
-    grid: 'grid',
-  };
-
-  const styles = clsx(
-    'w-full gap-4 md:gap-8',
-    displays[display],
-    missingClass(className, '\\mp[xy]?-') && paddings[padding],
-    dividers[divider],
-    className,
-  );
-
-  return (
-    <Component {...props} className={styles}>
-      {heading && (
-        <Heading size="lead" className={padding === 'y' ? paddings['x'] : ''}>
-          {heading}
-        </Heading>
-      )}
-      {children}
-    </Component>
-  );
-}
-
-export function PageHeader({
-  children,
-  className,
-  heading,
-  variant = 'default',
-  ...props
-}: {
-  children?: React.ReactNode;
-  className?: string;
-  heading?: string;
-  variant?: 'default' | 'blogPost' | 'allCollections';
-  [key: string]: any;
-}) {
-  const variants: Record<string, string> = {
-    default: 'grid w-full gap-8 p-6 py-8 md:p-8 lg:p-12 justify-items-start',
-    blogPost:
-      'grid md:text-center w-full gap-4 p-6 py-8 md:p-8 lg:p-12 md:justify-items-center',
-    allCollections:
-      'flex justify-between items-baseline gap-8 p-6 md:p-8 lg:p-12',
-  };
-
-  const styles = clsx(variants[variant], className);
-
-  return (
-    <header {...props} className={styles}>
-      {heading && (
-        <Heading as="h1" width="narrow" size="heading" className="inline-block">
-          {heading}
-        </Heading>
-      )}
-      {children}
-    </header>
-  );
-}

package/dist/templates/demo-store/app/components/index.ts

@@ -1,28 +0,0 @@
-export {Layout} from './Layout';
-export {Drawer, useDrawer} from './Drawer';
-export {Heading, Section, Text, PageHeader} from './Text';
-export {Input} from './Input';
-export {ProductGallery} from './ProductGallery';
-export {ProductCard} from './ProductCard';
-export {ProductSwimlane} from './ProductSwimlane';
-export {ProductGrid} from './ProductGrid';
-export {Skeleton} from './Skeleton';
-export {Button} from './Button';
-export {CountrySelector} from './CountrySelector';
-export {Cart} from './Cart';
-export {CartLoading} from './CartLoading';
-export {OrderCard} from './OrderCard';
-export {AccountDetails} from './AccountDetails';
-export {AccountAddressBook} from './AccountAddressBook';
-export {Modal} from './Modal';
-export {Link} from './Link';
-export {FeaturedCollections} from './FeaturedCollections';
-export {Hero} from './Hero';
-export {SortFilter} from './SortFilter';
-export {Breadcrumbs} from './Breadcrumbs';
-export {Grid} from './Grid';
-export {FeaturedProducts} from './FeaturedProducts';
-export {Pagination, getPaginationVariables, usePagination} from './Pagination';
-export {AddToCartButton} from './AddToCartButton';
-// Sue me
-export * from './Icon';