create-snapify-app 0.0.0-stage → 1.1.0

package/template/apps/shared/AuthContext.tsx

@@ -0,0 +1,65 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { authApi, type PlatformUser } from './api';
+
+type AuthCtx = {
+  user: PlatformUser | null;
+  loading: boolean;
+  refresh: () => Promise<void>;
+  login: (email: string, password: string) => Promise<void>;
+  register: (email: string, password: string, displayName: string) => Promise<void>;
+  logout: () => Promise<void>;
+};
+
+const Ctx = createContext<AuthCtx | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<PlatformUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      const { user } = await authApi.me();
+      setUser(user);
+    } catch {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const value: AuthCtx = {
+    user,
+    loading,
+    refresh,
+    login: async (email, password) => {
+      const { user } = await authApi.login(email, password);
+      setUser(user);
+    },
+    register: async (email, password, displayName) => {
+      const { user } = await authApi.register(email, password, displayName);
+      setUser(user);
+    },
+    logout: async () => {
+      await authApi.logout();
+      setUser(null);
+    },
+  };
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useAuth() {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error('AuthProvider manquant');
+  return ctx;
+}

package/template/apps/shared/Logo.tsx

@@ -0,0 +1,33 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+
+export function SnapifyMark({ className = 'w-6 h-6', accent = '#00C6BA', frame = '#FFFFFF' }: { className?: string; accent?: string; frame?: string }) {
+  return (
+    <svg viewBox="0 0 40 40" className={className} aria-hidden="true">
+      <rect x="7" y="9" width="26" height="22" rx="4" fill="none" stroke={frame} strokeWidth="2.4" />
+      <path d="M7 15.5 H33" stroke={frame} strokeWidth="2.4" />
+      <circle cx="11" cy="12.3" r="1.1" fill={accent} />
+      <circle cx="14.4" cy="12.3" r="1.1" fill={accent} />
+      <path d="M20 18.2 L21.6 22 L25.4 23.6 L21.6 25.2 L20 29 L18.4 25.2 L14.6 23.6 L18.4 22 Z" fill={accent} />
+    </svg>
+  );
+}
+
+export function Brand({ subtitle, dark }: { subtitle: string; dark?: boolean }) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${dark ? 'bg-brand-600' : 'bg-[#0B1528] border border-slate-700/60'}`}>
+        <SnapifyMark className="h-6 w-6" accent={dark ? '#fff' : '#00C6BA'} frame="#fff" />
+      </div>
+      <div className="leading-tight">
+        <div className={`text-sm font-semibold tracking-tight ${dark ? 'text-white' : 'text-[#0B1528]'}`}>Snapify</div>
+        <div className={`text-xs ${dark ? 'text-white/50' : 'text-slate-500'}`}>{subtitle}</div>
+      </div>
+    </div>
+  );
+}

package/template/apps/shared/api.ts

@@ -0,0 +1,47 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+export type PlatformUser = {
+  id: string;
+  email: string;
+  displayName: string;
+  avatarUrl: string | null;
+  bio: string;
+  role: 'member' | 'publisher' | 'mod' | 'admin';
+  createdAt: string;
+};
+
+export class ApiError extends Error {
+  constructor(
+    public status: number,
+    message: string
+  ) {
+    super(message);
+  }
+}
+
+export async function api<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(path, {
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
+    ...init,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new ApiError(res.status, (data as { error?: string }).error || 'Erreur');
+  return data as T;
+}
+
+export const authApi = {
+  me: () => api<{ user: PlatformUser | null }>('/api/platform/auth/me'),
+  login: (email: string, password: string) =>
+    api<{ user: PlatformUser }>('/api/platform/auth/login', { method: 'POST', body: JSON.stringify({ email, password }) }),
+  register: (email: string, password: string, displayName: string) =>
+    api<{ user: PlatformUser }>('/api/platform/auth/register', {
+      method: 'POST',
+      body: JSON.stringify({ email, password, displayName }),
+    }),
+  logout: () => api<{ ok: boolean }>('/api/platform/auth/logout', { method: 'POST', body: '{}' }),
+};

package/template/apps/shared/ui.tsx

@@ -0,0 +1,128 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+
+export function Button({
+  children,
+  variant = 'primary',
+  className = '',
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: 'primary' | 'secondary' | 'ghost' | 'danger' }) {
+  const base =
+    'inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold transition disabled:opacity-50';
+  const styles =
+    variant === 'primary'
+      ? 'text-white shadow-md hover:opacity-95'
+      : variant === 'secondary'
+        ? 'bg-white text-[#0B1528] border border-[#E3E8EE] hover:bg-slate-50'
+        : variant === 'danger'
+          ? 'bg-red-600 text-white hover:bg-red-700'
+          : 'bg-transparent text-slate-600 hover:bg-slate-100';
+  const primaryStyle =
+    variant === 'primary' ? { background: 'linear-gradient(135deg, #00C6BA 0%, #0066EE 100%)' } : undefined;
+  return (
+    <button className={`${base} ${styles} ${className}`} style={primaryStyle} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      {...props}
+      className={`w-full rounded-xl border border-[#E3E8EE] bg-white px-4 py-2.5 text-sm outline-none focus:ring-4 focus:ring-[#00C6BA]/20 ${props.className || ''}`}
+    />
+  );
+}
+
+export function TextArea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      {...props}
+      className={`w-full rounded-xl border border-[#E3E8EE] bg-white px-4 py-2.5 text-sm outline-none focus:ring-4 focus:ring-[#00C6BA]/20 ${props.className || ''}`}
+    />
+  );
+}
+
+export function Card({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return <div className={`rounded-2xl border border-[#E3E8EE] bg-white shadow-sm ${className}`}>{children}</div>;
+}
+
+export function formatDt(millimes: number) {
+  return `${(millimes / 1000).toFixed(millimes % 1000 === 0 ? 0 : 3)} DT`;
+}
+
+/** Aligné serveur : 7 DT ≈ 1 €. Hors TN → affichage EUR. */
+const DT_PER_EUR = 7;
+
+export function snapifyCountry(): string {
+  try {
+    return String((window as unknown as { __SNAPIFY_COUNTRY__?: string }).__SNAPIFY_COUNTRY__ || '').toUpperCase();
+  } catch {
+    return '';
+  }
+}
+
+export function formatEurFromMillimes(millimes: number) {
+  const n = Math.max(0, Number(millimes) || 0);
+  const eur = n / 1000 / DT_PER_EUR;
+  const rounded = Math.round(eur * 100) / 100;
+  return `${rounded.toFixed(rounded % 1 === 0 ? 0 : 2).replace('.', ',')} €`;
+}
+
+/** Gratuit / DT (Tunisie) / € (ailleurs). */
+export function formatMoney(millimes: number, country?: string | null) {
+  const n = Math.max(0, Number(millimes) || 0);
+  if (n === 0) return 'Gratuit';
+  const c = (country ?? snapifyCountry()).toUpperCase();
+  return c === 'TN' ? formatDt(n) : formatEurFromMillimes(n);
+}
+
+const millimesToText = (m: number) => (Number.isFinite(m) ? String(Math.round(m) / 1000) : '');
+
+/** « 49 », « 12,5 » ou « 12.500 » → millimes ; null si la saisie n’est pas un montant. */
+export function parseDt(text: string): number | null {
+  const clean = text.replace(/\s/g, '').replace(',', '.');
+  const v = Number(clean);
+  return clean === '' || !Number.isFinite(v) || v < 0 ? null : Math.round(v * 1000);
+}
+
+/** Champ saisi en dinars, stocké en millimes : garde le texte tapé (« 12, ») tant qu’il n’est pas complet. */
+export function useDtField(millimes: number, onMillimes: (m: number) => void) {
+  const [text, setText] = React.useState(() => millimesToText(millimes));
+  React.useEffect(() => {
+    setText((t) => (parseDt(t) === millimes ? t : millimesToText(millimes)));
+  }, [millimes]);
+  return {
+    type: 'text',
+    inputMode: 'decimal' as const,
+    value: text,
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      setText(e.target.value);
+      const m = parseDt(e.target.value);
+      if (m !== null) onMillimes(m);
+    },
+  };
+}
+
+export function DtInput({
+  millimes,
+  onMillimes,
+  className = 'mp-input',
+  ...props
+}: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> & { millimes: number; onMillimes: (m: number) => void }) {
+  const field = useDtField(millimes, onMillimes);
+  return (
+    <span style={{ position: 'relative', display: 'block' }}>
+      <input {...props} {...field} className={className} style={{ ...props.style, paddingRight: 44 }} />
+      <span aria-hidden style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', fontSize: 13, fontWeight: 600, color: '#6c6c6c', pointerEvents: 'none' }}>
+        DT
+      </span>
+    </span>
+  );
+}