npm - @digilogiclabs/create-saas-app - Versions diffs - 1.1.2 → 1.3.0 - Mend

@digilogiclabs/create-saas-app 1.1.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (221) hide show

package/dist/templates/web/ui-only/template/src/app/globals.css ADDED Viewed

@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/dist/index.css';
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/templates/web/ui-only/template/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
+const inter = Inter({ subsets: ['latin'] })
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          <Header />
+          {children}
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

package/dist/templates/web/ui-only/template/src/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+'use client';
+import React, { useState } from 'react';
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    alert('Login functionality requires @digilogiclabs/saas-factory-auth package');
+    console.log('Login values:', { email, password });
+  };
+  const handleGoogleLogin = async () => {
+    alert('Google login functionality requires @digilogiclabs/saas-factory-auth package');
+  };
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+          <Button type="submit" className="w-full">
+            Sign In
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            onClick={handleGoogleLogin}
+          >
+            Sign in with Google
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}

package/dist/templates/web/ui-only/template/src/app/signup/page.tsx ADDED Viewed

@@ -0,0 +1,79 @@
+'use client';
+import React, { useState } from 'react';
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
+export default function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+    alert('Signup functionality requires @digilogiclabs/saas-factory-auth package');
+    console.log('Signup values:', { email, password });
+  };
+  const handleGoogleSignup = async () => {
+    alert('Google signup functionality requires @digilogiclabs/saas-factory-auth package');
+  };
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign Up</h1>
+        <form onSubmit={handleSignup} className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm your password"
+              required
+            />
+          </div>
+          <Button type="submit" className="w-full">
+            Sign Up
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            onClick={handleGoogleSignup}
+          >
+            Sign up with Google
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}

package/dist/templates/web/ui-only/template/src/components/providers/app-providers.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+'use client'
+import React from 'react'
+import { ThemeProvider } from 'next-themes'
+interface AppProvidersProps {
+  children: React.ReactNode
+}
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  )
+}

package/dist/templates/web/{web-ui-package → ui-only}/template/src/components/shared/header.tsx RENAMED Viewed

@@ -2,12 +2,14 @@
 import React from 'react';
 import Link from 'next/link';
-import { useAuth } from '@digilogiclabs/saas-factory-auth';
-import { Button } from '@/components/ui/button';
 import { LogOut } from 'lucide-react';
 export function Header() {
-  const { user, signOut } = useAuth();
+  const user = null; // Placeholder for auth state
+  const handleSignOut = () => {
+    alert('Sign out functionality requires @digilogiclabs/saas-factory-auth package');
+  };
   return (
     <header className="bg-white dark:bg-gray-800 shadow-md">
@@ -21,18 +23,24 @@ export function Header() {
               <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
                 Dashboard
               </Link>
-              <Button variant="ghost" size="icon" onClick={signOut}>
+              <button
+                onClick={handleSignOut}
+                className="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+              >
                 <LogOut className="h-5 w-5" />
-              </Button>
+              </button>
             </>
           ) : (
             <>
               <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
                 Login
               </Link>
-              <Button asChild>
-                <Link href="/signup">Sign Up</Link>
-              </Button>
+              <Link
+                href="/signup"
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                Sign Up
+              </Link>
             </>
           )}
         </nav>
@@ -40,3 +48,4 @@ export function Header() {
     </header>
   );
 }

package/dist/templates/web/ui-only/template/src/components/ui/badge.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+export { Badge, badgeVariants }

package/dist/templates/web/ui-only/template/src/lib/utils.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/dist/templates/web/ui-only/template/tailwind.config.js ADDED Viewed

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+    '../../node_modules/@digilogiclabs/saas-factory-ui/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [],
+}

package/dist/templates/web/ui-only/template/tsconfig.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/lib/*": ["./src/lib/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/types/*": ["./src/types/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/templates/web/ui-package-test/template/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.7.3)",
+  "description": "{{description}} (with UI Package v0.10.0)",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,7 +14,7 @@
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@digilogiclabs/saas-factory-ui": "^0.7.3",
+    "@digilogiclabs/saas-factory-ui": "^0.10.0",
     "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Create modern SaaS applications with Digi Logic Labs packages",
   "main": "dist/index.js",
   "bin": {

package/src/templates/mobile/base/template/.env.example CHANGED Viewed

@@ -1,15 +1,15 @@
-# Auth Configuration
-NEXT_PUBLIC_AUTH_PROVIDER=supabase|firebase
-# Supabase
-NEXT_PUBLIC_SUPABASE_URL=
-NEXT_PUBLIC_SUPABASE_ANON_KEY=
-# Firebase
-NEXT_PUBLIC_FIREBASE_API_KEY=
-NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
-NEXT_PUBLIC_FIREBASE_PROJECT_ID=
-# Payments
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
-STRIPE_SECRET_KEY=
+# Auth Configuration
+NEXT_PUBLIC_AUTH_PROVIDER=supabase|firebase
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+# Firebase
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+# Payments
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+STRIPE_SECRET_KEY=

package/src/templates/mobile/base/template/app/checkout.tsx CHANGED Viewed

@@ -1,20 +1,20 @@
-import React from 'react';
-import { View, Button } from 'react-native';
-import { useStripe } from '@digilogiclabs/saas-factory-payments/native';
-export default function CheckoutScreen() {
-  const { handleCheckout } = useStripe();
-  const onCheckout = async () => {
-    await handleCheckout({
-      priceId: 'price_12345', // Replace with your actual price ID
-      returnUrl: 'exp://localhost:8081/dashboard',
-    });
-  };
-  return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Button title="Proceed to Checkout" onPress={onCheckout} />
-    </View>
-  );
-}
+import React from 'react';
+import { View, Button } from 'react-native';
+import { useStripe } from '@digilogiclabs/saas-factory-payments/native';
+export default function CheckoutScreen() {
+  const { handleCheckout } = useStripe();
+  const onCheckout = async () => {
+    await handleCheckout({
+      priceId: 'price_12345', // Replace with your actual price ID
+      returnUrl: 'exp://localhost:8081/dashboard',
+    });
+  };
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Proceed to Checkout" onPress={onCheckout} />
+    </View>
+  );
+}

package/src/templates/web/base/template/src/app/checkout/page.tsx CHANGED Viewed

@@ -1,28 +1,28 @@
-'use client';
-import React from 'react';
-import { useStripe } from '@digilogiclabs/saas-factory-payments';
-import { Button } from '@/components/ui/button';
-export default function CheckoutPage() {
-  const { handleCheckout } = useStripe();
-  const onCheckout = async () => {
-    await handleCheckout({
-      priceId: 'price_12345', // Replace with your actual price ID
-      returnUrl: `${window.location.origin}/dashboard`,
-    });
-  };
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="p-8 bg-white rounded-lg shadow-md">
-        <h1 className="text-2xl font-bold mb-4">Checkout</h1>
-        <p className="mb-6">Click the button below to proceed to payment.</p>
-        <Button onClick={onCheckout}>
-          Proceed to Checkout
-        </Button>
-      </div>
-    </div>
-  );
-}
+'use client';
+import React from 'react';
+import { useStripe } from '@digilogiclabs/saas-factory-payments';
+import { Button } from '@/components/ui/button';
+export default function CheckoutPage() {
+  const { handleCheckout } = useStripe();
+  const onCheckout = async () => {
+    await handleCheckout({
+      priceId: 'price_12345', // Replace with your actual price ID
+      returnUrl: `${window.location.origin}/dashboard`,
+    });
+  };
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="p-8 bg-white rounded-lg shadow-md">
+        <h1 className="text-2xl font-bold mb-4">Checkout</h1>
+        <p className="mb-6">Click the button below to proceed to payment.</p>
+        <Button onClick={onCheckout}>
+          Proceed to Checkout
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/templates/web/ui-auth/template/README.md ADDED Viewed

@@ -0,0 +1,68 @@
+# {{titleCaseName}}
+{{description}}
+## Getting Started
+First, run the development server:
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Features
+- ⚡ **Next.js 14** - React framework with App Router
+- 🎨 **Tailwind CSS** - Utility-first CSS framework
+- 🔒 **{{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} Auth** - Authentication ready
+- 📱 **Responsive Design** - Mobile-first approach
+- 🌙 **Dark Mode** - Built-in theme switching
+- 📦 **TypeScript** - Type-safe development
+- 🎯 **ESLint & Prettier** - Code quality tools
+## Project Structure
+```
+src/
+├── app/                 # Next.js App Router
+│   ├── globals.css     # Global styles
+│   ├── layout.tsx      # Root layout
+│   └── page.tsx        # Home page
+├── components/         # React components
+│   ├── ui/            # UI components
+│   └── providers/     # Context providers
+├── lib/               # Utility functions
+├── hooks/             # Custom React hooks
+└── types/             # TypeScript definitions
+```
+## Environment Variables
+Copy `.env.example` to `.env.local` and fill in your configuration:
+```bash
+cp .env.example .env.local
+```
+## Deployment
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new).
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+## Learn More
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [{{#auth}}{{#firebase}}Firebase Documentation{{/firebase}}{{#supabase}}Supabase Documentation{{/supabase}}{{/auth}}]({{#auth}}{{#firebase}}https://firebase.google.com/docs{{/firebase}}{{#supabase}}https://supabase.com/docs{{/supabase}}{{/auth}})
+## Support
+For support, email support@digilogiclabs.com or join our Discord community.