@inwink-mcp/backoffice-extension-helpers 1.0.0 → 1.0.2

package/templates/vite-extension/src/pages/HomePage.tsx.tpl

@@ -1,26 +1,30 @@
-import { FiLogIn, FiLogOut } from 'react-icons/fi';
 import { useAuth } from '../hooks/useAuth';
+import { useInwinkContext } from '../hooks/useInwinkContext';
 
 export default function HomePage() {
-  const { isAuthenticated, isLoading, login, logout, user } = useAuth();
+  const { isAuthenticated, user } = useAuth();
+  const { scope, eventId, communityId, tenantId } = useInwinkContext();
+
+  if (!isAuthenticated) {
+    return (
+      <section>
+        <h1>__DISPLAY_NAME__</h1>
+        <p>Connectez-vous via le bouton « Se connecter » en haut à droite.</p>
+      </section>
+    );
+  }
 
   return (
-    <main>
+    <section>
       <h1>__DISPLAY_NAME__</h1>
-      {!isAuthenticated ? (
-        <button disabled={isLoading} onClick={() => void login()}>
-          <FiLogIn aria-hidden />
-          {isLoading ? 'Initialisation...' : 'Se connecter'}
-        </button>
-      ) : (
-        <>
-          <p>Connecté en tant que : {user?.profile.email ?? 'Inconnu'}</p>
-          <button onClick={() => void logout()}>
-            <FiLogOut aria-hidden />
-            Se déconnecter
-          </button>
-        </>
-      )}
-    </main>
+      <p>Connecté en tant que : {user?.profile.email ?? 'Inconnu'}</p>
+      <p>
+        Contexte courant : {scope ?? 'aucun'}
+        {eventId ? ` — événement ${eventId}` : ''}
+        {communityId ? ` — communauté ${communityId}` : ''}
+        {tenantId ? ` — audience ${tenantId}` : ''}
+      </p>
+      {/* Ajoutez ici la logique métier de l'extension. */}
+    </section>
   );
 }

package/templates/vite-extension/src/styles.css

@@ -1,32 +1,91 @@
+/* Polices inwink : Lato (texte) + Poppins (titres) via Google Fonts.
+   Nécessite que fonts.googleapis.com / fonts.gstatic.com soient déclarés
+   dans extension.manifest.json > permissions.externalHosts. */
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@500;600;700&display=swap');
+
+/* Design tokens — inspirés de l'identité inwink. */
 :root {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  /* Polices */
+  --font-base: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-title: 'Poppins', var(--font-base);
+
+  /* Couleur d'accentuation */
+  --color-accent: #e94c1e;
+  --color-accent-hover: #cf3f15;
+  --color-accent-contrast: #ffffff;
+
+  /* Neutres */
+  --color-bg: #ffffff;
+  --color-surface: #f7f7f8;
+  --color-border: #e2e2e6;
+  --color-text: #1d1d1f;
+  --color-text-muted: #6b6b73;
+
+  /* Rayons & ombres */
+  --radius: 8px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+
+  font-family: var(--font-base);
   line-height: 1.5;
-  color-scheme: light dark;
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+* {
+  box-sizing: border-box;
 }
 
 body {
   margin: 0;
-  padding: 2rem;
+  font-family: var(--font-base);
+  background: var(--color-bg);
+  color: var(--color-text);
 }
 
-main {
-  max-width: 720px;
-  margin: 0 auto;
+h1,
+h2,
+h3 {
+  font-family: var(--font-title);
+  font-weight: 600;
+  line-height: 1.2;
 }
 
+a {
+  color: var(--color-accent);
+}
+
+/* Boutons — base générique réutilisable.
+   .btn-primary = action principale (accent), sinon variante neutre. */
 button {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  border-radius: 6px;
-  border: 1px solid currentColor;
-  background: transparent;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
   font: inherit;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+button:hover:not(:disabled) {
+  border-color: var(--color-accent);
 }
 
 button:disabled {
   cursor: default;
   opacity: 0.6;
 }
+
+button.btn-primary {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-accent-contrast);
+}
+
+button.btn-primary:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}