orionplace-react 0.7.8 → 0.8.0

package/templates/stores/orionplaceScope.ts

@@ -1,104 +0,0 @@
-import type { AppLoadFailure, AppLoadResult } from '@/interfaces/orionplace';
-import {
-  createOrionplaceStore,
-  initialSnapshot,
-  selectInit,
-  selectIsAuthenticated,
-  type OrionplaceState,
-  type OrionplaceStore,
-} from '@/stores/orionplace';
-import {
-  createOrionplaceBrowseStore,
-  type OrionplaceBrowseStore,
-} from '@/stores/orionplaceBrowse';
-import {
-  createOrionplaceCatalogStore,
-  type OrionplaceCatalogStore,
-} from '@/stores/orionplaceCatalog';
-import {
-  createOrionplaceProductsStore,
-  type OrionplaceProductsStore,
-} from '@/stores/orionplaceProducts';
-import {
-  createOrionplaceSelectionsStore,
-  type OrionplaceSelectionsStore,
-} from '@/stores/orionplaceSelections';
-
-export interface OrionplaceStores {
-  store: OrionplaceStore;
-  selections: OrionplaceSelectionsStore;
-  products: OrionplaceProductsStore;
-  catalog: OrionplaceCatalogStore;
-  browse: OrionplaceBrowseStore;
-  connect: () => () => void;
-  dispose: () => void;
-}
-
-type OrionplaceDomainStores = Pick<
-  OrionplaceStores,
-  'selections' | 'products' | 'catalog' | 'browse'
->;
-
-function synchronizeDomainStores(
-  state: OrionplaceState,
-  stores: OrionplaceDomainStores,
-) {
-  if (state.status === 'success') {
-    const init = selectInit(state);
-
-    stores.selections.getState().reconcile(init);
-    stores.products.getState().reconcile(init);
-    stores.catalog.getState().reconcile(init);
-    stores.browse.getState().reconcile(init);
-    return;
-  }
-
-  if (state.status === 'idle' || state.status === 'error') {
-    stores.selections.getState().reset();
-    stores.products.getState().reset();
-    stores.catalog.getState().reset();
-    stores.browse.getState().reset();
-  }
-}
-
-/** Creates the coordinated stores before any child can start Application Load. */
-export function createOrionplaceStores(
-  result: AppLoadResult | null = null,
-  failure: AppLoadFailure | null = null,
-  locale = '',
-): OrionplaceStores {
-  const init    = failure ? null : (result?.response.page_data.init ?? null);
-  const store   = createOrionplaceStore(initialSnapshot(result, failure));
-  const domains = {
-    selections: createOrionplaceSelectionsStore(init, locale),
-    products: createOrionplaceProductsStore(init),
-    catalog: createOrionplaceCatalogStore(init),
-    browse: createOrionplaceBrowseStore(init),
-  };
-  let unsubscribe: (() => void) | undefined;
-
-  function dispose() {
-    unsubscribe?.();
-    unsubscribe = undefined;
-  }
-
-  function connect() {
-    unsubscribe ??= store.subscribe((state, previous) => {
-      synchronizeDomainStores(state, domains);
-      if (selectIsAuthenticated(previous) && !selectIsAuthenticated(state)) {
-        domains.products.getState().clearSession();
-      }
-    });
-
-    return dispose;
-  }
-
-  connect();
-
-  return {
-    store,
-    ...domains,
-    connect,
-    dispose,
-  };
-}

package/templates/stores/orionplaceSelections.ts

@@ -1,130 +0,0 @@
-import { createStore } from 'zustand/vanilla';
-import type { IAppLoadCommon } from '@/interfaces/orionplace';
-
-export interface OrionplaceSelectionsState {
-  localeCode: string;
-  currencyId: string;
-  weightId: string;
-  lengthId: string;
-  init: IAppLoadCommon | null;
-  setLocale: (code: string) => void;
-  setCurrency: (id: string) => void;
-  setUnit: (kind: 'weights' | 'lengths', id: string) => void;
-  reconcile: (init: IAppLoadCommon | null) => void;
-  reset: () => void;
-}
-
-export type OrionplaceSelectionsStore = ReturnType<
-  typeof createOrionplaceSelectionsStore
->;
-
-function findLocale(init: IAppLoadCommon, code: string) {
-  return Object.entries(init.locale).find(
-    ([key, value]) =>
-      (value.code?.trim() || key).toLowerCase() === code.trim().toLowerCase(),
-  );
-}
-
-function unitId(values: Record<string, unknown>, preferred?: number | string) {
-  const id = String(preferred ?? '');
-  return Object.hasOwn(values, id) ? id : (Object.keys(values)[0] ?? '');
-}
-
-function availableCurrency(init: IAppLoadCommon, preferred?: number | string) {
-  const id = String(preferred ?? '');
-  if (init.currencies[id]?.allowed_select) {
-    return id;
-  }
-  return Object.keys(init.currencies).find(
-    (key) => init.currencies[key]?.allowed_select,
-  ) ?? '';
-}
-
-export function initialSelections(init: IAppLoadCommon | null, locale = '') {
-  const selected = init
-    ? findLocale(init, locale) ?? Object.entries(init.locale)[0]
-    : undefined;
-  return {
-    localeCode: selected?.[1].code?.trim() || selected?.[0] || '',
-    currencyId: init ? availableCurrency(init, selected?.[1].currency) : '',
-    weightId: init ? unitId(init.weights ?? {}, selected?.[1].weight) : '',
-    lengthId: init ? unitId(init.lengths ?? {}, selected?.[1].length) : '',
-  };
-}
-
-/** One customer's choices; created per server render and browser session. */
-export function createOrionplaceSelectionsStore(
-  init: IAppLoadCommon | null = null,
-  locale = '',
-) {
-  return createStore<OrionplaceSelectionsState>()((set, get) => ({
-    ...initialSelections(init, locale),
-    init,
-
-    setLocale(code) {
-      const current = get().init;
-      const entry = current && findLocale(current, code);
-      if (!current || !entry) {
-        return;
-      }
-      set({
-        localeCode: entry[1].code?.trim() || entry[0],
-        currencyId: availableCurrency(current, entry[1].currency),
-        weightId: unitId(current.weights ?? {}, entry[1].weight),
-        lengthId: unitId(current.lengths ?? {}, entry[1].length),
-      });
-    },
-
-    setCurrency(id) {
-      if (get().init?.currencies[id]?.allowed_select) {
-        set({ currencyId: id });
-      }
-    },
-
-    setUnit(kind, id) {
-      const values = get().init?.[kind];
-      if (!values || !Object.hasOwn(values, id)) {
-        return;
-      }
-      set(kind === 'weights' ? { weightId: id } : { lengthId: id });
-    },
-
-    reconcile(next) {
-      if (!next) {
-        set({ ...initialSelections(null), init: null });
-        return;
-      }
-
-      const previous = get();
-      const selected = findLocale(next, previous.localeCode) ??
-        Object.entries(next.locale)[0];
-      const localeCode = selected?.[1].code?.trim() || selected?.[0] || '';
-      const preferredCurrency = next.currencies[previous.currencyId]
-        ?.allowed_select
-        ? previous.currencyId
-        : selected?.[1].currency;
-
-      set({
-        init: next,
-        localeCode,
-        currencyId: availableCurrency(next, preferredCurrency),
-        weightId: unitId(
-          next.weights ?? {},
-          Object.hasOwn(next.weights ?? {}, previous.weightId)
-            ? previous.weightId
-            : selected?.[1].weight,
-        ),
-        lengthId: unitId(
-          next.lengths ?? {},
-          Object.hasOwn(next.lengths ?? {}, previous.lengthId)
-            ? previous.lengthId
-            : selected?.[1].length,
-        ),
-      });
-    },
-
-    reset() {
-      set({ ...initialSelections(null), init: null });
-    },
-  }));
-}

package/templates/themes/orionplace.ts

@@ -1,106 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export interface OrionplaceThemeColors {
-  background: string;
-  surface: string;
-  mutedSurface: string;
-  text: string;
-  muted: string;
-  border: string;
-  accent: string;
-  hover: string;
-  inverseSurface: string;
-  inverseText: string;
-  inverseMuted: string;
-  success: string;
-  successSurface: string;
-  danger: string;
-  dangerSurface: string;
-  attention: string;
-  attentionSurface: string;
-}
-
-export interface OrionplaceTheme extends OrionplaceThemeColors {
-  colorScheme: 'light' | 'dark';
-}
-
-export const orionplaceThemes = {
-  light: {
-    colorScheme: 'light',
-    background: '#ffffff',
-    surface: '#ffffff',
-    mutedSurface: '#f4f4f4',
-    text: '#111111',
-    muted: '#6b6b6b',
-    border: '#e3e3e3',
-    accent: '#111111',
-    hover: '#f4f4f4',
-    inverseSurface: '#111111',
-    inverseText: '#ffffff',
-    inverseMuted: '#a3a3a3',
-    success: '#1f7a4d',
-    successSurface: '#e8f3ed',
-    danger: '#d0021b',
-    dangerSurface: '#fdecee',
-    attention: '#8a5300',
-    attentionSurface: '#fdf4e3',
-  },
-  dark: {
-    colorScheme: 'dark',
-    background: '#0f0f0f',
-    surface: '#151515',
-    mutedSurface: '#1e1e1e',
-    text: '#f2f2f2',
-    muted: '#a3a3a3',
-    border: '#2e2e2e',
-    accent: '#f2f2f2',
-    hover: '#232323',
-    inverseSurface: '#000000',
-    inverseText: '#f2f2f2',
-    inverseMuted: '#8f8f8f',
-    success: '#7fcfa3',
-    successSurface: '#17291f',
-    danger: '#ff5a5f',
-    dangerSurface: '#351a1c',
-    attention: '#e8b467',
-    attentionSurface: '#2b2112',
-  },
-} satisfies Record<string, OrionplaceTheme>;
-
-export type OrionplaceThemeMode = keyof typeof orionplaceThemes;
-export const defaultOrionplaceTheme: OrionplaceThemeMode = 'light';
-
-export function resolveOrionplaceThemeName(name: string): OrionplaceThemeMode {
-  return Object.hasOwn(orionplaceThemes, name)
-    ? name as OrionplaceThemeMode
-    : defaultOrionplaceTheme;
-}
-
-export function createOrionplaceThemeStyle(
-  mode: OrionplaceThemeMode,
-  overrides: Partial<OrionplaceThemeColors> = {},
-): CSSProperties {
-  const theme = orionplaceThemes[resolveOrionplaceThemeName(mode)];
-  const colors = { ...theme, ...overrides };
-
-  return {
-    colorScheme: theme.colorScheme,
-    '--orionplace-background': colors.background,
-    '--orionplace-surface': colors.surface,
-    '--orionplace-muted-surface': colors.mutedSurface,
-    '--orionplace-text': colors.text,
-    '--orionplace-muted': colors.muted,
-    '--orionplace-border': colors.border,
-    '--orionplace-accent': colors.accent,
-    '--orionplace-hover': colors.hover,
-    '--orionplace-inverse-surface': colors.inverseSurface,
-    '--orionplace-inverse-text': colors.inverseText,
-    '--orionplace-inverse-muted': colors.inverseMuted,
-    '--orionplace-success': colors.success,
-    '--orionplace-success-surface': colors.successSurface,
-    '--orionplace-danger': colors.danger,
-    '--orionplace-danger-surface': colors.dangerSurface,
-    '--orionplace-attention': colors.attention,
-    '--orionplace-attention-surface': colors.attentionSurface,
-  } as CSSProperties;
-}