create-magic-storefront 0.3.1 → 0.5.0

package/template/theme/index.ts

@@ -0,0 +1,53 @@
+import { defineTheme, type SectionComponents } from '@magicstoreai/hydrogen/theme';
+
+import { CollectionList, collectionList } from './sections/collection-list';
+import { FeaturedCollection, featuredCollection } from './sections/featured-collection';
+import { Hero, hero } from './sections/hero';
+import { ImageWithText, imageWithText } from './sections/image-with-text';
+import { pageContent } from './sections/page-content';
+import { PlatformHome, platformHome } from './sections/platform-home';
+import { ProductShelf, productShelf } from './sections/product-shelf';
+import { RichText, richText } from './sections/rich-text';
+import { Testimonials, testimonials } from './sections/testimonials';
+import { settings } from './settings';
+import index from './templates/index.json';
+import page from './templates/page.json';
+
+/**
+ * The storefront's theme: what `create-magic-storefront theme push` sends, so the merchant edits
+ * these sections in the admin. A new section is registered here and in `components`, then pushed
+ * (`PAGES.md`, "Creating a new section"). Bump `version` with every push of a changed theme.
+ */
+const theme = defineTheme({
+  name: 'starter',
+  version: '1.0.0',
+  sections: [
+    hero,
+    richText,
+    imageWithText,
+    featuredCollection,
+    collectionList,
+    testimonials,
+    productShelf,
+    pageContent,
+    platformHome,
+  ],
+  settings,
+  templates: { index, page },
+});
+
+export default theme;
+
+/**
+ * One component per section type. `page-content` is bound to the page by `app/pages/[handle]`.
+ */
+export const components: SectionComponents<typeof theme.sections> = {
+  hero: Hero,
+  'rich-text': RichText,
+  'image-with-text': ImageWithText,
+  'featured-collection': FeaturedCollection,
+  'collection-list': CollectionList,
+  testimonials: Testimonials,
+  'product-shelf': ProductShelf,
+  'platform-home': PlatformHome,
+};

package/template/theme/sections/collection-list.tsx

@@ -0,0 +1,64 @@
+import { MagicStoreError } from '@magicstoreai/storefront-client';
+import { defineBlock, defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+
+import { CollectionTiles } from '@/components/sections/collections';
+import { api } from '@/lib/api';
+
+import { label } from '../text';
+
+export const collectionBlock = defineBlock({
+  type: 'collection',
+  name: label('Collection', 'Коллекция', "To'plam"),
+  settings: [
+    { id: 'collection', type: 'COLLECTION', label: label('Collection', 'Коллекция', "To'plam") },
+  ],
+});
+
+export const collectionList = defineSection({
+  type: 'collection-list',
+  name: label('Collections', 'Коллекции', "To'plamlar"),
+  icon: 'COLLECTIONS',
+  category: 'COLLECTIONS',
+  maxBlocks: 8,
+  settings: [
+    { id: 'heading', type: 'TEXT', label: label('Heading', 'Заголовок', 'Sarlavha'), default: '' },
+  ],
+  blocks: [collectionBlock],
+  presets: [
+    {
+      name: label('Collections', 'Коллекции', "To'plamlar"),
+      blocks: [{ type: 'collection' }, { type: 'collection' }, { type: 'collection' }],
+    },
+  ],
+});
+
+/** Tiles of the collections the merchant picked, in their order. */
+export async function CollectionList({ settings, blocks }: SectionProps<typeof collectionList>) {
+  const handles = blocks.flatMap((block) =>
+    block.settings.collection ? [block.settings.collection.handle] : [],
+  );
+  const collections = await Promise.all(
+    handles.map((handle) =>
+      api.collectionsShow({ path: { handle } }).then(
+        ({ data }) => data,
+        (error: unknown) => {
+          // Unpublished between the template read and this one: leave the tile out.
+          if (error instanceof MagicStoreError && error.code === 'NOT_FOUND') {
+            return null;
+          }
+          throw error;
+        },
+      ),
+    ),
+  );
+  const found = collections.filter((collection) => collection !== null);
+  if (found.length === 0) {
+    return null;
+  }
+  return (
+    <section className="stack">
+      {settings.heading && <h2>{settings.heading}</h2>}
+      <CollectionTiles collections={found} />
+    </section>
+  );
+}

package/template/theme/sections/featured-collection.tsx

@@ -0,0 +1,56 @@
+import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+
+import { Shelf } from '@/components/sections/product-shelves';
+import { api } from '@/lib/api';
+
+import { label } from '../text';
+
+export const featuredCollection = defineSection({
+  type: 'featured-collection',
+  name: label('Featured collection', 'Подборка из коллекции', "To'plamdan tanlov"),
+  icon: 'PRODUCTS',
+  category: 'PRODUCTS',
+  settings: [
+    { id: 'collection', type: 'COLLECTION', label: label('Collection', 'Коллекция', "To'plam") },
+    {
+      id: 'heading',
+      type: 'TEXT',
+      label: label('Heading', 'Заголовок', 'Sarlavha'),
+      info: label(
+        'Empty: the collection title.',
+        'Пусто — название коллекции.',
+        "Bo'sh — to'plam nomi.",
+      ),
+      default: '',
+    },
+    {
+      id: 'limit',
+      type: 'RANGE',
+      label: label('Products', 'Товаров', 'Mahsulotlar'),
+      min: 2,
+      max: 24,
+      step: 1,
+      default: 8,
+    },
+  ],
+  presets: [{ name: label('Featured collection', 'Подборка из коллекции', "To'plamdan tanlov") }],
+});
+
+/** Products of the collection the merchant picked; nothing until one is picked. */
+export async function FeaturedCollection({ settings }: SectionProps<typeof featuredCollection>) {
+  const { collection } = settings;
+  if (collection === null) {
+    return null;
+  }
+  const { data } = await api.collectionsProducts({
+    path: { handle: collection.handle },
+    query: { perPage: settings.limit },
+  });
+  return (
+    <Shelf
+      title={settings.heading || collection.title}
+      href={`/collections/${collection.handle}`}
+      products={data}
+    />
+  );
+}

package/template/theme/sections/hero.tsx

@@ -0,0 +1,95 @@
+import { Image } from '@magicstoreai/hydrogen';
+import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+import Link from 'next/link';
+
+import { api } from '@/lib/api';
+
+import { label, message } from '../text';
+
+export const hero = defineSection({
+  type: 'hero',
+  name: label('Hero', 'Главный баннер', 'Asosiy banner'),
+  icon: 'IMAGE',
+  category: 'MEDIA',
+  limit: 1,
+  settings: [
+    {
+      id: 'heading',
+      type: 'TEXT',
+      label: label('Heading', 'Заголовок', 'Sarlavha'),
+      info: label('Empty: the shop name.', 'Пусто — название магазина.', "Bo'sh — do'kon nomi."),
+      maxLength: 120,
+      default: '',
+    },
+    {
+      id: 'subheading',
+      type: 'TEXTAREA',
+      label: label('Subheading', 'Подзаголовок', 'Kichik sarlavha'),
+      info: label(
+        'Empty: the shop description.',
+        'Пусто — описание магазина.',
+        "Bo'sh — do'kon tavsifi.",
+      ),
+      maxLength: 400,
+      default: '',
+    },
+    { id: 'image', type: 'IMAGE', label: label('Image', 'Изображение', 'Rasm') },
+    {
+      id: 'imageAlt',
+      type: 'TEXT',
+      label: label('Image description', 'Описание изображения', 'Rasm tavsifi'),
+      info: label(
+        'For screen readers. Empty: decorative.',
+        'Для экранных дикторов. Пусто — декоративное.',
+        "Ekran o'quvchilari uchun. Bo'sh — bezak.",
+      ),
+      default: '',
+    },
+    {
+      id: 'buttonLabel',
+      type: 'TEXT',
+      label: label('Button text', 'Текст кнопки', 'Tugma matni'),
+      info: label('Empty: no button.', 'Пусто — без кнопки.', "Bo'sh — tugmasiz."),
+      maxLength: 40,
+      default: message('shopNow'),
+    },
+    {
+      id: 'buttonLink',
+      type: 'URL',
+      label: label('Button link', 'Ссылка кнопки', 'Tugma havolasi'),
+      default: '/search',
+    },
+    {
+      id: 'alignment',
+      type: 'SELECT',
+      label: label('Alignment', 'Выравнивание', 'Tekislash'),
+      default: 'CENTER',
+      options: [
+        { value: 'LEFT', label: label('Left', 'Слева', 'Chapda') },
+        { value: 'CENTER', label: label('Center', 'По центру', 'Markazda') },
+      ],
+    },
+  ],
+  presets: [{ name: label('Hero', 'Главный баннер', 'Asosiy banner') }],
+});
+
+/** The page's opening: the merchant's heading over their image, the shop's name when left empty. */
+export async function Hero({ settings }: SectionProps<typeof hero>) {
+  const { data: shop } = await api.shop();
+  const heading = settings.heading || shop.name;
+  const subheading = settings.subheading || shop.description;
+  return (
+    <section className={`hero hero-${settings.alignment.toLowerCase()}`}>
+      {settings.image && <Image data={settings.image} alt={settings.imageAlt} loading="eager" />}
+      <div className="hero-text stack">
+        <h1>{heading}</h1>
+        {subheading && <p>{subheading}</p>}
+        {settings.buttonLabel && settings.buttonLink && (
+          <Link href={settings.buttonLink} className="button primary">
+            {settings.buttonLabel}
+          </Link>
+        )}
+      </div>
+    </section>
+  );
+}

package/template/theme/sections/image-with-text.tsx

@@ -0,0 +1,71 @@
+import { Image } from '@magicstoreai/hydrogen';
+import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+import Link from 'next/link';
+
+import { label } from '../text';
+
+export const imageWithText = defineSection({
+  type: 'image-with-text',
+  name: label('Image with text', 'Изображение с текстом', 'Rasm va matn'),
+  icon: 'IMAGE',
+  category: 'MEDIA',
+  settings: [
+    { id: 'image', type: 'IMAGE', label: label('Image', 'Изображение', 'Rasm') },
+    {
+      id: 'imageAlt',
+      type: 'TEXT',
+      label: label('Image description', 'Описание изображения', 'Rasm tavsifi'),
+      default: '',
+    },
+    { id: 'heading', type: 'TEXT', label: label('Heading', 'Заголовок', 'Sarlavha'), default: '' },
+    { id: 'body', type: 'RICHTEXT', label: label('Text', 'Текст', 'Matn'), default: '' },
+    {
+      id: 'buttonLabel',
+      type: 'TEXT',
+      label: label('Button text', 'Текст кнопки', 'Tugma matni'),
+      info: label('Empty: no button.', 'Пусто — без кнопки.', "Bo'sh — tugmasiz."),
+      default: '',
+    },
+    {
+      id: 'buttonLink',
+      type: 'URL',
+      label: label('Button link', 'Ссылка кнопки', 'Tugma havolasi'),
+    },
+    {
+      id: 'layout',
+      type: 'SELECT',
+      label: label('Image position', 'Положение изображения', 'Rasm joylashuvi'),
+      default: 'IMAGE_LEFT',
+      options: [
+        { value: 'IMAGE_LEFT', label: label('Left', 'Слева', 'Chapda') },
+        { value: 'IMAGE_RIGHT', label: label('Right', 'Справа', "O'ngda") },
+      ],
+    },
+  ],
+  presets: [{ name: label('Image with text', 'Изображение с текстом', 'Rasm va matn') }],
+});
+
+/** An image beside the merchant's text; renders nothing until the merchant fills it in. */
+export function ImageWithText({ settings }: SectionProps<typeof imageWithText>) {
+  if (!settings.image && !settings.heading && !settings.body) {
+    return null;
+  }
+  return (
+    <section
+      className={`image-with-text ${settings.layout === 'IMAGE_RIGHT' ? 'image-right' : ''}`}
+    >
+      {settings.image && <Image data={settings.image} alt={settings.imageAlt} />}
+      <div className="stack">
+        {settings.heading && <h2>{settings.heading}</h2>}
+        {settings.body && (
+          <div className="prose" dangerouslySetInnerHTML={{ __html: settings.body }} />
+        )}
+        {settings.buttonLabel && settings.buttonLink && (
+          <Link href={settings.buttonLink} className="button">
+            {settings.buttonLabel}
+          </Link>
+        )}
+      </div>
+    </section>
+  );
+}

package/template/theme/sections/page-content.tsx

@@ -0,0 +1,45 @@
+import type { Schema } from '@magicstoreai/storefront-client';
+import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
+
+import { label } from '../text';
+
+export const pageContent = defineSection({
+  type: 'page-content',
+  name: label('Page content', 'Содержимое страницы', 'Sahifa matni'),
+  icon: 'TEXT',
+  category: 'TEXT',
+  enabledOn: ['page'],
+  limit: 1,
+  settings: [
+    {
+      id: 'showTitle',
+      type: 'CHECKBOX',
+      label: label('Show the title', 'Показывать заголовок', "Sarlavhani ko'rsatish"),
+      default: true,
+    },
+  ],
+  presets: [{ name: label('Page content', 'Содержимое страницы', 'Sahifa matni') }],
+});
+
+/**
+ * The content page's own title and body (`pagesShow`). `app/pages/[handle]` binds the page; `body`
+ * is the merchant's HTML from the pages editor.
+ */
+export function PageContent({
+  page,
+  settings,
+}: SectionProps<typeof pageContent> & { page: Schema<'PageDetail'> }) {
+  return (
+    <article className="stack">
+      {settings.showTitle && <h1>{page.title}</h1>}
+      {page.body ? (
+        <div dangerouslySetInnerHTML={{ __html: page.body }} />
+      ) : (
+        <p className="muted">{messages(locale).nothingHere}</p>
+      )}
+    </article>
+  );
+}

package/template/theme/sections/platform-home.tsx

@@ -0,0 +1,37 @@
+import { defineSection } from '@magicstoreai/hydrogen/theme';
+
+import { HomeSections } from '@/components/sections';
+import { api } from '@/lib/api';
+
+import { label } from '../text';
+
+export const platformHome = defineSection({
+  type: 'platform-home',
+  name: label(
+    'Platform home sections',
+    'Секции главной из админки',
+    "Admin paneldagi bosh sahifa bo'limlari",
+  ),
+  icon: 'LAYOUT',
+  category: 'OTHER',
+  enabledOn: ['index'],
+  limit: 1,
+  presets: [
+    {
+      name: label(
+        'Platform home sections',
+        'Секции главной из админки',
+        "Admin paneldagi bosh sahifa bo'limlari",
+      ),
+    },
+  ],
+});
+
+/**
+ * The layout of the platform's home editor (`GET /home`: banners, stories, deal of the day…),
+ * rendered by `components/sections`. Optional: the default template does not include it.
+ */
+export async function PlatformHome() {
+  const { data: home } = await api.home();
+  return <HomeSections sections={home.sections} />;
+}

package/template/theme/sections/product-shelf.tsx

@@ -0,0 +1,96 @@
+import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+
+import { Shelf } from '@/components/sections/product-shelves';
+import { api, locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
+
+import { label } from '../text';
+
+export const productShelf = defineSection({
+  type: 'product-shelf',
+  name: label('Product shelf', 'Полка товаров', 'Mahsulotlar qatori'),
+  icon: 'PRODUCTS',
+  category: 'PRODUCTS',
+  settings: [
+    {
+      id: 'source',
+      type: 'SELECT',
+      label: label('Products', 'Товары', 'Mahsulotlar'),
+      default: 'NEW_ARRIVALS',
+      options: [
+        { value: 'NEW_ARRIVALS', label: label('New arrivals', 'Новинки', 'Yangi kelganlar') },
+        { value: 'ON_SALE', label: label('On sale', 'Со скидкой', 'Chegirmada') },
+        { value: 'BESTSELLERS', label: label('Bestsellers', 'Хиты продаж', "Eng ko'p sotilgan") },
+        { value: 'COLLECTION', label: label('From a collection', 'Из коллекции', "To'plamdan") },
+      ],
+    },
+    {
+      id: 'collection',
+      type: 'COLLECTION',
+      label: label('Collection', 'Коллекция', "To'plam"),
+      info: label(
+        'Used when the products come from a collection.',
+        'Для товаров из коллекции.',
+        "Mahsulotlar to'plamdan bo'lsa.",
+      ),
+    },
+    {
+      id: 'heading',
+      type: 'TEXT',
+      label: label('Heading', 'Заголовок', 'Sarlavha'),
+      info: label(
+        'Empty: named after the products.',
+        'Пусто — по типу товаров.',
+        "Bo'sh — avtomatik.",
+      ),
+      default: '',
+    },
+    {
+      id: 'limit',
+      type: 'RANGE',
+      label: label('How many', 'Сколько', 'Nechta'),
+      min: 2,
+      max: 24,
+      step: 1,
+      default: 8,
+    },
+  ],
+  presets: [{ name: label('Product shelf', 'Полка товаров', 'Mahsulotlar qatori') }],
+});
+
+/** A row of products through the catalog endpoints: no `GET /home` needed. */
+export async function ProductShelf({ settings }: SectionProps<typeof productShelf>) {
+  const t = messages(locale);
+  const perPage = settings.limit;
+  switch (settings.source) {
+    case 'NEW_ARRIVALS': {
+      const { data } = await api.productsIndex({ query: { sort: '-createdAt', perPage } });
+      return <Shelf title={settings.heading || t.newArrivals} products={data} />;
+    }
+    case 'ON_SALE': {
+      const { data } = await api.productsIndex({ query: { 'filter[onSale]': 'true', perPage } });
+      return <Shelf title={settings.heading || t.onSale} products={data} />;
+    }
+    case 'BESTSELLERS': {
+      const { data } = await api.productsIndex({ query: { sort: '-bestSellers', perPage } });
+      return <Shelf title={settings.heading || t.bestsellers} products={data} />;
+    }
+    case 'COLLECTION': {
+      const { collection } = settings;
+      if (collection === null) {
+        return null;
+      }
+      const { data } = await api.collectionsProducts({
+        path: { handle: collection.handle },
+        query: { perPage },
+      });
+      return (
+        <Shelf
+          title={settings.heading || collection.title}
+          href={`/collections/${collection.handle}`}
+          products={data}
+        />
+      );
+    }
+  }
+}

package/template/theme/sections/rich-text.tsx

@@ -0,0 +1,43 @@
+import { defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+
+import { label } from '../text';
+
+export const richText = defineSection({
+  type: 'rich-text',
+  name: label('Text', 'Текст', 'Matn'),
+  icon: 'TEXT',
+  category: 'TEXT',
+  settings: [
+    { id: 'heading', type: 'TEXT', label: label('Heading', 'Заголовок', 'Sarlavha'), default: '' },
+    { id: 'content', type: 'RICHTEXT', label: label('Text', 'Текст', 'Matn'), default: '' },
+    {
+      id: 'width',
+      type: 'SELECT',
+      label: label('Width', 'Ширина', 'Kenglik'),
+      default: 'NARROW',
+      options: [
+        { value: 'NARROW', label: label('Narrow', 'Узкая', 'Tor') },
+        { value: 'WIDE', label: label('Wide', 'Широкая', 'Keng') },
+      ],
+    },
+  ],
+  presets: [{ name: label('Text', 'Текст', 'Matn') }],
+});
+
+/**
+ * The merchant's formatted text. `content` is RICHTEXT, which the API sanitises to
+ * `p, br, strong, em, a, ul, ol, li`, so it is the one setting rendered as HTML.
+ */
+export function RichText({ settings }: SectionProps<typeof richText>) {
+  if (!settings.heading && !settings.content) {
+    return null;
+  }
+  return (
+    <section className={`stack rich-text rich-text-${settings.width.toLowerCase()}`}>
+      {settings.heading && <h2>{settings.heading}</h2>}
+      {settings.content && (
+        <div className="prose" dangerouslySetInnerHTML={{ __html: settings.content }} />
+      )}
+    </section>
+  );
+}

package/template/theme/sections/testimonials.tsx

@@ -0,0 +1,84 @@
+import { defineBlock, defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
+
+import { locale } from '@/lib/api';
+import { messages } from '@/lib/i18n';
+
+import { label } from '../text';
+
+export const quoteBlock = defineBlock({
+  type: 'quote',
+  name: label('Quote', 'Отзыв', 'Fikr'),
+  settings: [
+    {
+      id: 'text',
+      type: 'TEXTAREA',
+      label: label('Quote', 'Отзыв', 'Fikr'),
+      maxLength: 600,
+      default: '',
+    },
+    { id: 'author', type: 'TEXT', label: label('Author', 'Автор', 'Muallif'), default: '' },
+    {
+      id: 'rating',
+      type: 'RANGE',
+      label: label('Rating', 'Оценка', 'Baho'),
+      min: 1,
+      max: 5,
+      step: 1,
+      default: 5,
+    },
+  ],
+});
+
+export const testimonials = defineSection({
+  type: 'testimonials',
+  name: label('Testimonials', 'Отзывы покупателей', 'Xaridorlar fikri'),
+  icon: 'QUOTE',
+  category: 'SOCIAL_PROOF',
+  maxBlocks: 12,
+  settings: [
+    {
+      id: 'heading',
+      type: 'TEXT',
+      label: label('Heading', 'Заголовок', 'Sarlavha'),
+      info: label(
+        'Empty: "What our customers say".',
+        'Пусто — «Что говорят покупатели».',
+        "Bo'sh — standart sarlavha.",
+      ),
+      default: '',
+    },
+  ],
+  blocks: [quoteBlock],
+  presets: [
+    {
+      name: label('Testimonials', 'Отзывы покупателей', 'Xaridorlar fikri'),
+      blocks: [{ type: 'quote' }, { type: 'quote' }],
+    },
+  ],
+});
+
+/** Quotes the merchant entered from real customers; a quote without text is left out. */
+export function Testimonials({ settings, blocks }: SectionProps<typeof testimonials>) {
+  const t = messages(locale);
+  const quotes = blocks.filter((block) => block.settings.text !== '');
+  if (quotes.length === 0) {
+    return null;
+  }
+  return (
+    <section className="stack">
+      <h2>{settings.heading || t.customersSay}</h2>
+      <div className="testimonials">
+        {quotes.map(({ id, settings: quote }) => (
+          <figure key={id} className="stack">
+            <span className="rating" role="img" aria-label={t.ratedOutOf(quote.rating)}>
+              {'★'.repeat(quote.rating)}
+              {'☆'.repeat(5 - quote.rating)}
+            </span>
+            <blockquote>{quote.text}</blockquote>
+            {quote.author && <figcaption className="muted">{quote.author}</figcaption>}
+          </figure>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/theme/settings.ts

@@ -0,0 +1,19 @@
+import { defineThemeSettings } from '@magicstoreai/hydrogen/theme';
+
+import { label } from './text';
+
+/** Global settings, edited in the admin under the theme's settings. Brand colors stay in `shop.branding`. */
+export const settings = defineThemeSettings([
+  {
+    id: 'announcement',
+    type: 'TEXT',
+    label: label('Announcement', 'Объявление', "E'lon"),
+    info: label(
+      'A line above the header on every page. Empty: none.',
+      'Строка над шапкой на каждой странице. Пусто — не показывается.',
+      "Har bir sahifada sarlavha ustidagi qator. Bo'sh — ko'rsatilmaydi.",
+    ),
+    maxLength: 200,
+    default: '',
+  },
+]);

package/template/theme/templates/index.json

@@ -0,0 +1,9 @@
+{
+  "sections": {
+    "hero": { "type": "hero", "settings": {} },
+    "featured": { "type": "featured-collection", "settings": {} },
+    "new-arrivals": { "type": "product-shelf", "settings": { "source": "NEW_ARRIVALS" } },
+    "story": { "type": "image-with-text", "settings": {} }
+  },
+  "order": ["hero", "featured", "new-arrivals", "story"]
+}