feat: add !STARTERCONF for demo elements

ivan-dalmet · ivan-dalmet · commit f6c12aa731f0 · 2025-07-04T11:59:18.000+02:00
diff --git 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/app/env/client.ts b/app/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/app/features/auth/config.ts b/app/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/app/features/dashboard/manager/page-dashboard.tsx b/app/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/app/features/demo/demo-app-switch.tsx b/app/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/app/features/demo/demo-marketing-bento.tsx b/app/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/app/features/demo/demo-mode-drawer.tsx b/app/features/demo/demo-mode-drawer.tsx
@@ -1,3 +1,4 @@
+// !STARTERCONF [demoMode] Remove the demo folder
 import { create } from 'zustand';
 
 import {
diff --git a/app/features/demo/demo-welcome.tsx b/app/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/app/features/devtools/login-hint.tsx b/app/features/devtools/login-hint.tsx
@@ -10,16 +10,15 @@ 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;
   }
 
   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,16 +40,15 @@ 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;
   }
 
   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/app/features/home/app/page-home.tsx b/app/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/app/lib/orpc/client.ts b/app/lib/orpc/client.ts
@@ -4,14 +4,15 @@ 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';
 
 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/app/locales/ar/index.ts b/app/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/app/locales/en/index.ts b/app/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/app/locales/fr/index.ts b/app/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/app/locales/sw/index.ts b/app/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/app/providers.tsx b/app/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/app/server/auth.tsx b/app/server/auth.tsx
@@ -56,8 +56,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/app/server/email.tsx b/app/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/app/server/orpc.ts b/app/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') {

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// !STARTERCONF [demoMode] Remove the demo folder`
`1`	`2`	`import { Link, useMatchRoute } from '@tanstack/react-router';`
`2`	`3`	`import { ArrowRightIcon } from 'lucide-react';`
`3`	`4`	`import { useTranslation } from 'react-i18next';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// !STARTERCONF [demoMode] Remove the demo folder`
`1`	`2`	`export const DemoMarketingBento = () => {`
`2`	`3`	`return (`
`3`	`4`	`<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// !STARTERCONF [demoMode] Remove the demo folder`
`1`	`2`	`import { create } from 'zustand';`
`2`	`3`
`3`	`4`	`import {`