From a8867a18893c17cb5973737833bf68b2a454f28d Mon Sep 17 00:00:00 2001
From: Ivan Dalmet <ivan@dalmet.fr>
Date: Fri, 4 Jul 2025 11:54:51 +0200
Subject: [PATCH] feat: add !STARTERCONF for demo elements

---
 .github/workflows/e2e-tests.yml                   |  2 +-
 src/env/client.ts                                 |  1 +
 src/features/auth/config.ts                       |  2 +-
 src/features/dashboard/manager/page-dashboard.tsx |  7 ++++---
 src/features/demo/demo-app-switch.tsx             |  1 +
 src/features/demo/demo-marketing-bento.tsx        |  1 +
 src/features/demo/demo-mode-drawer.tsx            |  1 +
 src/features/demo/demo-welcome.tsx                |  1 +
 src/features/devtools/login-hint.tsx              | 10 ++++------
 src/features/home/app/page-home.tsx               |  7 ++++---
 src/lib/orpc/client.ts                            |  3 ++-
 src/locales/ar/index.ts                           |  4 ++--
 src/locales/en/index.ts                           |  4 ++--
 src/locales/fr/index.ts                           |  4 ++--
 src/locales/sw/index.ts                           |  4 ++--
 src/providers.tsx                                 |  9 ++++++---
 src/server/auth.tsx                               |  4 ++--
 src/server/email.tsx                              |  1 +
 src/server/orpc.ts                                |  1 +
 19 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
index 7dcfc9a0d..2808e2c5d 100644
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -21,7 +21,7 @@ jobs:
       VITE_IS_DEMO: false
       BETTER_AUTH_SECRET: fyXjLxjXJowjicI2BAjxOaUsQd1QafdegZDciJE/xM8=
       EMAIL_SERVER: smtp://username:password@localhost:1025
-      EMAIL_FROM: Start UI <noreply@example.com>
+      EMAIL_FROM: Example <noreply@example.com>
     services:
       postgres:
         image: postgres
diff --git a/src/env/client.ts b/src/env/client.ts
index 2b32ffe79..5eafb4a01 100644
--- a/src/env/client.ts
+++ b/src/env/client.ts
@@ -25,6 +25,7 @@ export const envClient = createEnv({
   clientPrefix: 'VITE_',
   client: {
     VITE_BASE_URL: z.string().url(),
+    // !STARTERCONF [demoMode] Remove this VITE_IS_DEMO env var
     VITE_IS_DEMO: z
       .enum(['true', 'false'])
       .optional()
diff --git a/src/features/auth/config.ts b/src/features/auth/config.ts
index a88bb310f..5510067d2 100644
--- a/src/features/auth/config.ts
+++ b/src/features/auth/config.ts
@@ -1,5 +1,5 @@
 import { envClient } from '@/env/client';
 
-export const AUTH_SIGNUP_ENABLED = envClient.VITE_IS_DEMO ? false : true;
+export const AUTH_SIGNUP_ENABLED = envClient.VITE_IS_DEMO ? false : true; // !STARTERCONF [demoMode] Remove the envClient.VITE_IS_DEMO condition. You can
 export const AUTH_EMAIL_OTP_MOCKED = '000000';
 export const AUTH_EMAIL_OTP_EXPIRATION_IN_MINUTES = 5;
diff --git a/src/features/dashboard/manager/page-dashboard.tsx b/src/features/dashboard/manager/page-dashboard.tsx
index cd0a05cef..2dc992178 100644
--- a/src/features/dashboard/manager/page-dashboard.tsx
+++ b/src/features/dashboard/manager/page-dashboard.tsx
@@ -1,6 +1,6 @@
-import { DemoAppSwitch } from '@/features/demo/demo-app-switch';
-import { DemoMarketingBento } from '@/features/demo/demo-marketing-bento';
-import { DemoWelcome } from '@/features/demo/demo-welcome';
+import { DemoAppSwitch } from '@/features/demo/demo-app-switch'; // !STARTERCONF [demoMode] Remove this import
+import { DemoMarketingBento } from '@/features/demo/demo-marketing-bento'; // !STARTERCONF [demoMode] Remove this import
+import { DemoWelcome } from '@/features/demo/demo-welcome'; // !STARTERCONF [demoMode] Remove this import
 import {
   PageLayout,
   PageLayoutContent,
@@ -16,6 +16,7 @@ export const PageDashboard = () => {
       </PageLayoutTopBar>
       <PageLayoutContent containerClassName="max-w-4xl">
         <div className="flex flex-col gap-4">
+          {/* !STARTERCONF [demoMode] Update with your content */}
           <DemoWelcome />
           <DemoAppSwitch />
           <DemoMarketingBento />
diff --git a/src/features/demo/demo-app-switch.tsx b/src/features/demo/demo-app-switch.tsx
index d24e11535..6f0b28eb8 100644
--- a/src/features/demo/demo-app-switch.tsx
+++ b/src/features/demo/demo-app-switch.tsx
@@ -1,3 +1,4 @@
+// !STARTERCONF [demoMode] Remove the demo folder
 import { Link, useMatchRoute } from '@tanstack/react-router';
 import { ArrowRightIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
diff --git a/src/features/demo/demo-marketing-bento.tsx b/src/features/demo/demo-marketing-bento.tsx
index a3ba14433..e4174ac3d 100644
--- a/src/features/demo/demo-marketing-bento.tsx
+++ b/src/features/demo/demo-marketing-bento.tsx
@@ -1,3 +1,4 @@
+// !STARTERCONF [demoMode] Remove the demo folder
 export const DemoMarketingBento = () => {
   return (
     <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
diff --git a/src/features/demo/demo-mode-drawer.tsx b/src/features/demo/demo-mode-drawer.tsx
index aa858cdf1..881e502c4 100644
--- a/src/features/demo/demo-mode-drawer.tsx
+++ b/src/features/demo/demo-mode-drawer.tsx
@@ -1,3 +1,4 @@
+// !STARTERCONF [demoMode] Remove the demo folder
 import { create } from 'zustand';
 
 import {
diff --git a/src/features/demo/demo-welcome.tsx b/src/features/demo/demo-welcome.tsx
index 5cd372199..459ce9f9d 100644
--- a/src/features/demo/demo-welcome.tsx
+++ b/src/features/demo/demo-welcome.tsx
@@ -1,3 +1,4 @@
+// !STARTERCONF [demoMode] Remove the demo folder
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '@/components/ui/button';
diff --git a/src/features/devtools/login-hint.tsx b/src/features/devtools/login-hint.tsx
index ddd5a7a11..2ac3e137c 100644
--- a/src/features/devtools/login-hint.tsx
+++ b/src/features/devtools/login-hint.tsx
@@ -10,6 +10,7 @@ export const LoginEmailHint = () => {
   const form = useFormContext();
   const mockedEmail = 'admin@admin.com';
 
+  // !STARTERCONF [demoMode] Remove the `&& !envClient.VITE_IS_DEMO` condition
   if (import.meta.env.PROD && !envClient.VITE_IS_DEMO) {
     return null;
   }
@@ -17,9 +18,7 @@ export const LoginEmailHint = () => {
   return (
     <Alert dir="ltr">
       <TerminalIcon className="size-4" />
-      <AlertTitle>
-        {envClient.VITE_IS_DEMO ? 'Demo mode' : 'Dev mode'}
-      </AlertTitle>
+      <AlertTitle>Dev mode</AlertTitle>
       <AlertDescription className="flex flex-wrap text-sm leading-4">
         You can login with{' '}
         <button
@@ -41,6 +40,7 @@ export const LoginEmailHint = () => {
 export const LoginEmailOtpHint = () => {
   const form = useFormContext();
 
+  // !STARTERCONF [demoMode] Remove the `&& !envClient.VITE_IS_DEMO` condition
   if (import.meta.env.PROD && !envClient.VITE_IS_DEMO) {
     return null;
   }
@@ -48,9 +48,7 @@ export const LoginEmailOtpHint = () => {
   return (
     <Alert dir="ltr">
       <TerminalIcon className="size-4" />
-      <AlertTitle>
-        {envClient.VITE_IS_DEMO ? 'Demo mode' : 'Dev mode'}
-      </AlertTitle>
+      <AlertTitle>Dev mode</AlertTitle>
       <AlertDescription className="flex text-sm leading-4">
         Use the code{' '}
         <button
diff --git a/src/features/home/app/page-home.tsx b/src/features/home/app/page-home.tsx
index b81761c84..17a6793ab 100644
--- a/src/features/home/app/page-home.tsx
+++ b/src/features/home/app/page-home.tsx
@@ -1,8 +1,8 @@
 import { Logo } from '@/components/brand/logo';
 
-import { DemoAppSwitch } from '@/features/demo/demo-app-switch';
-import { DemoMarketingBento } from '@/features/demo/demo-marketing-bento';
-import { DemoWelcome } from '@/features/demo/demo-welcome';
+import { DemoAppSwitch } from '@/features/demo/demo-app-switch'; // !STARTERCONF [demoMode] Remove this import
+import { DemoMarketingBento } from '@/features/demo/demo-marketing-bento'; // !STARTERCONF [demoMode] Remove this import
+import { DemoWelcome } from '@/features/demo/demo-welcome'; // !STARTERCONF [demoMode] Remove this import
 import {
   PageLayout,
   PageLayoutContent,
@@ -17,6 +17,7 @@ export const PageHome = () => {
       </PageLayoutTopBar>
       <PageLayoutContent>
         <div className="flex flex-1 flex-col gap-4">
+          {/* !STARTERCONF [demoMode] Update with your content */}
           <DemoWelcome />
           <DemoAppSwitch />
           <DemoMarketingBento />
diff --git a/src/lib/orpc/client.ts b/src/lib/orpc/client.ts
index 079689be0..182c0d776 100644
--- a/src/lib/orpc/client.ts
+++ b/src/lib/orpc/client.ts
@@ -4,7 +4,7 @@ import { createORPCReactQueryUtils } from '@orpc/react-query';
 import type { RouterClient } from '@orpc/server';
 
 import { envClient } from '@/env/client';
-import { openDemoModeDrawer } from '@/features/demo/demo-mode-drawer';
+import { openDemoModeDrawer } from '@/features/demo/demo-mode-drawer'; // !STARTERCONF [demoMode] Remove this import
 
 import type { Router } from './types';
 
@@ -12,6 +12,7 @@ const link = new RPCLink({
   url: `${envClient.VITE_BASE_URL}/api/rpc`,
   interceptors: [
     onError((error) => {
+      // !STARTERCONF [demoMode] Remove this condition
       if (error instanceof ORPCError && error.message === 'DEMO_MODE_ENABLED') {
         openDemoModeDrawer();
       }
diff --git a/src/locales/ar/index.ts b/src/locales/ar/index.ts
index b89589a9d..70e4da8ff 100644
--- a/src/locales/ar/index.ts
+++ b/src/locales/ar/index.ts
@@ -7,7 +7,7 @@ import book from './book.json' assert { type: 'json' };
 import buildInfo from './build-info.json' assert { type: 'json' };
 import common from './common.json' assert { type: 'json' };
 import components from './components.json' assert { type: 'json' };
-import demo from './demo.json' assert { type: 'json' };
+import demo from './demo.json' assert { type: 'json' }; // !STARTERCONF [demoMode] Remove this import and the file
 import emails from './emails.json' assert { type: 'json' };
 import genre from './genre.json' assert { type: 'json' };
 import layout from './layout.json' assert { type: 'json' };
@@ -20,7 +20,7 @@ export default {
   buildInfo,
   common,
   components,
-  demo,
+  demo, // !STARTERCONF [demoMode] Remove this export
   emails,
   genre,
   layout,
diff --git a/src/locales/en/index.ts b/src/locales/en/index.ts
index 69886bde0..33e7bdeae 100644
--- a/src/locales/en/index.ts
+++ b/src/locales/en/index.ts
@@ -7,7 +7,7 @@ import book from './book.json' assert { type: 'json' };
 import buildInfo from './build-info.json' assert { type: 'json' };
 import common from './common.json' assert { type: 'json' };
 import components from './components.json' assert { type: 'json' };
-import demo from './demo.json' assert { type: 'json' };
+import demo from './demo.json' assert { type: 'json' }; // !STARTERCONF [demoMode] Remove this import and the file
 import emails from './emails.json' assert { type: 'json' };
 import genre from './genre.json' assert { type: 'json' };
 import layout from './layout.json' assert { type: 'json' };
@@ -20,7 +20,7 @@ export default {
   buildInfo,
   common,
   components,
-  demo,
+  demo, // !STARTERCONF [demoMode] Remove this export
   emails,
   genre,
   layout,
diff --git a/src/locales/fr/index.ts b/src/locales/fr/index.ts
index ace10fcb8..48e0f35af 100644
--- a/src/locales/fr/index.ts
+++ b/src/locales/fr/index.ts
@@ -7,7 +7,7 @@ import book from './book.json' assert { type: 'json' };
 import buildInfo from './build-info.json' assert { type: 'json' };
 import common from './common.json' assert { type: 'json' };
 import components from './components.json' assert { type: 'json' };
-import demo from './demo.json' assert { type: 'json' };
+import demo from './demo.json' assert { type: 'json' }; // !STARTERCONF [demoMode] Remove this import and the file
 import emails from './emails.json' assert { type: 'json' };
 import genre from './genre.json' assert { type: 'json' };
 import layout from './layout.json' assert { type: 'json' };
@@ -20,7 +20,7 @@ export default {
   buildInfo,
   common,
   components,
-  demo,
+  demo, // !STARTERCONF [demoMode] Remove this export
   emails,
   genre,
   layout,
diff --git a/src/locales/sw/index.ts b/src/locales/sw/index.ts
index d9ad4d1d8..92f79bd52 100644
--- a/src/locales/sw/index.ts
+++ b/src/locales/sw/index.ts
@@ -7,7 +7,7 @@ import book from './book.json' assert { type: 'json' };
 import buildInfo from './build-info.json' assert { type: 'json' };
 import common from './common.json' assert { type: 'json' };
 import components from './components.json' assert { type: 'json' };
-import demo from './demo.json' assert { type: 'json' };
+import demo from './demo.json' assert { type: 'json' }; // !STARTERCONF [demoMode] Remove this import and the file
 import emails from './emails.json' assert { type: 'json' };
 import genre from './genre.json' assert { type: 'json' };
 import layout from './layout.json' assert { type: 'json' };
@@ -20,7 +20,7 @@ export default {
   buildInfo,
   common,
   components,
-  demo,
+  demo, // !STARTERCONF [demoMode] Remove this export
   emails,
   genre,
   layout,
diff --git a/src/providers.tsx b/src/providers.tsx
index 15c2e5b86..44b5ab9ad 100644
--- a/src/providers.tsx
+++ b/src/providers.tsx
@@ -9,12 +9,12 @@ import { Sonner } from '@/components/ui/sonner';
 
 import { envClient } from '@/env/client';
 import {
-  DemoModeDrawer,
-  useIsDemoModeDrawerVisible,
+  DemoModeDrawer, // !STARTERCONF [demoMode] Remove this import
+  useIsDemoModeDrawerVisible, // !STARTERCONF [demoMode] Remove this import
 } from '@/features/demo/demo-mode-drawer';
 
 export const Providers = (props: { children: ReactNode }) => {
-  const isDemoModeDrawerVisible = useIsDemoModeDrawerVisible();
+  const isDemoModeDrawerVisible = useIsDemoModeDrawerVisible(); // !STARTERCONF [demoMode] Remove this line
   return (
     <ThemeProvider
       attribute="class"
@@ -23,7 +23,10 @@ export const Providers = (props: { children: ReactNode }) => {
     >
       <QueryClientProvider>
         {props.children}
+        {/* !STARTERCONF [demoMode] Remove the `!isDemoModeDrawerVisible` condition (keep the <Sonner /> component) */}
         {!isDemoModeDrawerVisible && <Sonner />}
+
+        {/* !STARTERCONF [demoMode] Remove the <DemoModeDrawer /> */}
         {envClient.VITE_IS_DEMO && <DemoModeDrawer />}
       </QueryClientProvider>
     </ThemeProvider>
diff --git a/src/server/auth.tsx b/src/server/auth.tsx
index 2155c1897..8ebe2b305 100644
--- a/src/server/auth.tsx
+++ b/src/server/auth.tsx
@@ -63,8 +63,8 @@ export const auth = betterAuth({
     emailOTP({
       disableSignUp: !AUTH_SIGNUP_ENABLED,
       expiresIn: AUTH_EMAIL_OTP_EXPIRATION_IN_MINUTES * 60,
-      // Use predictable mocked code in dev and demo
-      ...(import.meta.env.DEV || envClient.VITE_IS_DEMO
+      // Use predictable mocked code in dev
+      ...(import.meta.env.DEV || envClient.VITE_IS_DEMO // !STARTERCONF [demoMode] Remove the `|| envClient.VITE_IS_DEMO` condition
         ? { generateOTP: () => AUTH_EMAIL_OTP_MOCKED }
         : undefined),
       async sendVerificationOTP({ email, otp, type }) {
diff --git a/src/server/email.tsx b/src/server/email.tsx
index 38d112d24..62ede5ad4 100644
--- a/src/server/email.tsx
+++ b/src/server/email.tsx
@@ -16,6 +16,7 @@ export const sendEmail = async ({
   ...options
 }: Omit<MailOptions, 'html'> &
   Required<Pick<MailOptions, 'subject'>> & { template: ReactElement }) => {
+  // !STARTERCONF [demoMode] Remove this condition
   if (envClient.VITE_IS_DEMO) {
     return;
   }
diff --git a/src/server/orpc.ts b/src/server/orpc.ts
index f79892553..1c4b47dea 100644
--- a/src/server/orpc.ts
+++ b/src/server/orpc.ts
@@ -98,6 +98,7 @@ const base = os
       return result;
     });
   })
+  // !STARTERCONF [demoMode] Remove this middleware (the .use(...))
   // Demo Mode
   .use(async ({ next, procedure }) => {
     if (envClient.VITE_IS_DEMO && procedure['~orpc'].route.method !== 'GET') {