orionplace-react 0.1.0 → 0.2.0

package/templates/stores/orionplaceSelections.ts

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,106 @@
+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;
+}