orionplace-react 0.1.0 → 0.2.0

package/templates/app/storefront.module.css

@@ -0,0 +1,406 @@
+.shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--orionplace-background);
+  color: var(--orionplace-text);
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Page frames as in Nuxt and Svelte: px-4 py-8 sm:px-6 sm:py-10 lg:px-8. */
+.page {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 32px 16px;
+}
+
+/* Product and plan pages: py-6 sm:py-10. */
+.page.compactPage {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+/* Cart and the plan list: py-10 sm:py-14. */
+.page.roomyPage {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+@media (min-width: 640px) {
+  .page,
+  .page.compactPage {
+    padding: 40px 24px;
+  }
+
+  .page.roomyPage {
+    padding: 56px 24px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .page,
+  .page.compactPage,
+  .page.roomyPage {
+    padding-right: 32px;
+    padding-left: 32px;
+  }
+}
+
+.searchPage {
+  display: grid;
+  min-width: 0;
+  gap: 32px;
+  padding: 32px 16px;
+  color: var(--orionplace-text);
+}
+
+.searchBreadcrumbs {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.searchCrumb {
+  display: contents;
+}
+
+.searchBreadcrumbs a,
+.searchBreadcrumbs span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.searchBreadcrumbs a {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.searchBreadcrumbs a:focus-visible,
+.searchCrumbCurrent {
+  color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .searchBreadcrumbs a:hover {
+    color: var(--orionplace-text);
+  }
+}
+
+.searchHeader {
+  display: grid;
+  gap: 8px;
+}
+
+.searchTitle {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.searchCaption,
+.searchQuery,
+.searchDescription {
+  margin: 0;
+  color: var(--orionplace-muted);
+}
+
+.searchCaption {
+  font-size: 12px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.searchQuery {
+  overflow-wrap: anywhere;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.searchDescription {
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.featuredGuest {
+  display: grid;
+  min-height: 24rem;
+}
+
+.notice {
+  position: fixed;
+  z-index: 80;
+  right: 24px;
+  bottom: 24px;
+  max-width: min(420px, calc(100vw - 48px));
+  padding: 12px 16px;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  box-shadow: 0 12px 36px rgb(0 0 0 / 12%);
+}
+
+.noticeError {
+  border-color: var(--orionplace-danger);
+  color: var(--orionplace-danger);
+}
+
+/* A seller page section sizes its heading by its own width, from 592px: the
+   width the full-width page of the Nuxt reference gives it on a 640px
+   screen. */
+.sellerPage {
+  display: grid;
+  min-width: 0;
+  gap: 48px;
+}
+
+/* Products and reviews links under the seller profile. */
+.sellerSections {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 8px 32px;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.sellerSection {
+  display: inline-flex;
+  box-sizing: content-box;
+  min-height: 44px;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: -1px;
+  border-bottom: 1px solid transparent;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  text-transform: uppercase;
+  outline: none;
+  transition: color 150ms, border-color 150ms;
+}
+
+.sellerSection span {
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+.sellerSection:focus-visible {
+  border-color: var(--orionplace-text);
+  color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .sellerSection:hover {
+    border-color: var(--orionplace-text);
+    color: var(--orionplace-text);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sellerSection {
+    transition: none;
+  }
+}
+
+.section {
+  display: grid;
+  min-width: 0;
+  gap: 24px;
+  scroll-margin-top: 24px;
+  container: seller-section / inline-size;
+}
+
+.reviewsSection {
+  gap: 0;
+  padding-top: 40px;
+  border-top: 1px solid var(--orionplace-border);
+}
+
+.section > h2 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+@container seller-section (min-width: 592px) {
+  .section > h2 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .searchPage {
+    padding: 32px 16px;
+  }
+
+  .notice {
+    right: 16px;
+    bottom: 16px;
+    max-width: calc(100vw - 32px);
+  }
+}
+
+@media (min-width: 640px) {
+  .searchPage {
+    padding: 40px 24px;
+  }
+
+  .searchTitle {
+    font-size: 30px;
+    line-height: 36px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .searchPage {
+    padding-right: 32px;
+    padding-left: 32px;
+  }
+}
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.searchStoreInfo {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1.25rem;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0.25rem;
+}
+
+.searchStoreInfo p,
+.searchStoreInfo dd {
+  margin: 0;
+}
+
+.searchStoreInfo a {
+  width: fit-content;
+  color: inherit;
+  text-decoration: none;
+}
+
+.searchStoreInfo dl > div {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: space-between;
+  max-width: 20rem;
+  margin-block: 0.5rem;
+}
+
+.homeNotice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 16px;
+  color: var(--orionplace-muted);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.homeNoticeButton {
+  display: inline-flex;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  border: 1px solid var(--orionplace-text);
+  border-radius: 0;
+  background: transparent;
+  color: var(--orionplace-text);
+  font: inherit;
+  font-size: 12px;
+  line-height: calc(16 / 12);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  outline: none;
+}
+
+.homeNoticeButton:focus-visible {
+  background: var(--orionplace-hover);
+}
+
+@media (hover: hover) {
+  .homeNoticeButton:hover {
+    background: var(--orionplace-hover);
+  }
+}
+
+@media (min-width: 640px) {
+  .homeNotice {
+    padding: 0 24px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .homeNotice {
+    padding: 0 32px;
+  }
+}
+
+.profileSignInPage {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 40px 16px;
+  color: var(--orionplace-text);
+  font-size: 14px;
+  line-height: 24px;
+}
+@media (min-width: 640px) {
+  .profileSignInPage {
+    padding: 56px 24px;
+  }
+}
+@media (min-width: 1024px) {
+  .profileSignInPage {
+    padding-inline: 32px;
+  }
+}
+.profileDeleted {
+  box-sizing: border-box;
+  max-width: 420px;
+  margin: 0 auto 24px;
+  padding: 12px 16px;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+}

package/templates/app/stores/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/stores', props);
+}

package/templates/app/subscriptions/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/subscriptions', props);
+}

package/templates/app/tariffs/[slug]/[id]/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/tariffs/[slug]/[id]', props);
+}

package/templates/app/tariffs/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/tariffs', props);
+}

package/templates/app/tickets/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/tickets', props);
+}

package/templates/app/unsubscribe/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/unsubscribe', props);
+}

package/templates/app/wallet/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/wallet', props);
+}

package/templates/app/wishlist/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/wishlist', props);
+}

package/templates/components/orionplace/account/AccountActivity.README.md

@@ -0,0 +1,70 @@
+# AccountActivity
+
+## English
+
+`AccountActivity` switches between the signed-in customer's promo codes,
+reviews and sign-in history. `tab="promocodes"`, `tab="reviews"` or
+`tab="logs"` selects the initial section and follows later route changes. A
+missing or unknown value opens promo codes. `onTabChange` lets the route owner
+keep the address in sync with a visitor's tab choice.
+
+Only the active child is mounted, so only that child reports its initial load
+request. `promocodes`, `reviews` and `logs` pass the documented props and
+callbacks to `AccountPromocodes`, `ProductReviews` in own-review mode and
+`SignInHistory`. Render the composition inside `AccountSection` after sign-in.
+`useAccountActivity()` (`hooks/useAccountActivity.ts`) returns all three
+with their requests, as the starter's activity page uses them:
+
+```tsx
+const activity = useAccountActivity();
+
+<AccountActivity tab={tab} {...activity} />;
+```
+
+Pass `{ api }` to use another client than the storefront's own.
+
+### Props
+
+| Prop                                              | Meaning                                                                                         |
+| ------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `tab?: string`                                    | Account activity section currently displayed.                                                   |
+| `promocodes?: AccountPromocodesProps`             | Props passed to the promotion-code account section.                                             |
+| `reviews?: Omit<ProductReviewsProps, "own">`      | Reviews rendered by the component or passed to the account section.                             |
+| `logs?: SignInHistoryProps`                       | Sign-in history data used by the account activity section.                                      |
+| `onTabChange?: (tab: AccountActivityTab) => void` | Passes the section name after changing the active account tab. |
+
+## Русский
+
+`AccountActivity` переключает промокоды, отзывы и историю входов вошедшего
+покупателя. Начальный раздел и последующие изменения маршрута задаются через
+`tab="promocodes"`, `tab="reviews"` или `tab="logs"`. При отсутствии значения
+или неизвестном значении открываются промокоды. `onTabChange` позволяет
+владельцу маршрута обновить адрес после выбора вкладки посетителем.
+
+В DOM находится только активный дочерний компонент, поэтому начальный запрос
+сообщает только он. Значения `promocodes`, `reviews` и `logs` передают
+описанные параметры и обработчики в `AccountPromocodes`, `ProductReviews` в
+режиме собственных отзывов и `SignInHistory`. Композиция выводится внутри
+`AccountSection` после входа.
+`useAccountActivity()` (`hooks/useAccountActivity.ts`) возвращает все три
+значения вместе с их запросами, как их использует страница активности
+стартового шаблона:
+
+```tsx
+const activity = useAccountActivity();
+
+<AccountActivity tab={tab} {...activity} />;
+```
+
+Чтобы использовать другой клиент вместо клиента витрины, передайте
+`{ api }`.
+
+### Свойства
+
+| Свойство                                          | Назначение                                                                                            |
+| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `tab?: string`                                    | Текущий раздел активности аккаунта.                                                                   |
+| `promocodes?: AccountPromocodesProps`             | Свойства блока промокодов аккаунта.                                                                   |
+| `reviews?: Omit<ProductReviewsProps, "own">`      | Отзывы компонента или блока аккаунта.                                                                 |
+| `logs?: SignInHistoryProps`                       | Данные истории входов для раздела активности аккаунта.                                                |
+| `onTabChange?: (tab: AccountActivityTab) => void` | Передаёт название раздела после переключения активной вкладки аккаунта. |

package/templates/components/orionplace/account/AccountActivity.module.css

@@ -0,0 +1,16 @@
+.section {
+  composes: feature featureStack account from './account.module.css';
+  container-type: inline-size;
+}
+
+.title {
+  composes: featureTitle from './account.module.css';
+}
+
+.tabs {
+  composes: featureActions accountTabs from './account.module.css';
+}
+
+.button {
+  composes: featureButton from './account.module.css';
+}

package/templates/components/orionplace/account/AccountActivity.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { activityLabels } from '@/lib/orionplace/activityLabels';
+import {
+  AccountPromocodes,
+  type AccountPromocodesProps,
+} from './AccountPromocodes';
+import { SignInHistory, type SignInHistoryProps } from './SignInHistory';
+import {
+  ProductReviews,
+  type ProductReviewsProps,
+} from '@/components/orionplace/products/ProductReviews';
+import styles from './AccountActivity.module.css';
+
+export type AccountActivityTab = 'promocodes' | 'reviews' | 'logs';
+
+export interface AccountActivityProps {
+  tab?: string | null;
+  promocodes?: AccountPromocodesProps;
+  reviews?: Omit<ProductReviewsProps, 'own'>;
+  logs?: SignInHistoryProps;
+  onTabChange?: (tab: AccountActivityTab) => void;
+}
+
+function validTab(value?: string | null): AccountActivityTab {
+  return value === 'reviews' || value === 'logs' ? value : 'promocodes';
+}
+
+export function AccountActivity({
+  tab,
+  promocodes,
+  reviews,
+  logs,
+  onTabChange,
+}: AccountActivityProps) {
+  const locale                                   =
+    useOrionplaceSelections((state) => state.localeCode);
+  const labels                                   = activityLabels(locale);
+  const [active, setActive]                      =
+    useState<AccountActivityTab>(() => validTab(tab));
+  const tabs: Record<AccountActivityTab, string> = {
+    promocodes: labels.promocodesTab,
+    reviews: labels.reviewsTab,
+    logs: labels.logsTab,
+  };
+
+  useEffect(() => {
+    setActive(validTab(tab));
+  }, [tab]);
+
+  function select(next: AccountActivityTab) {
+    setActive(next);
+    onTabChange?.(next);
+  }
+
+  return (
+    <section
+      className={styles.section}
+      data-feature-part="AccountActivity"
+    >
+      <h1 className={styles.title}>{labels.title}</h1>
+      <div className={styles.tabs}>
+        {(Object.entries(tabs) as [AccountActivityTab, string][]).map(
+          ([key, title]) => (
+            <button
+              key={key}
+              type="button"
+              className={styles.button}
+              data-activity-tab={key}
+              aria-pressed={active === key}
+              onClick={() => select(key)}
+            >
+              {title}
+            </button>
+          ),
+        )}
+      </div>
+      <>
+        {active === 'promocodes' ? (
+          <AccountPromocodes {...promocodes} />
+        ) : active === 'reviews' ? (
+          <ProductReviews
+            {...reviews}
+            own
+          />
+        ) : (
+          <SignInHistory {...logs} />
+        )}
+      </>
+    </section>
+  );
+}