@odvi/create-dtt-framework 0.1.3 → 0.1.5

package/template/src/server/db/schema/__tests__/users.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { users, type User, type NewUser } from '../users';
+
+describe('users schema', () => {
+  it('should have users table defined', () => {
+    expect(users).toBeDefined();
+  });
+
+  it('should export User type', () => {
+    const user: User = {
+      id: 'test-id',
+      email: 'test@example.com',
+      firstName: 'Test',
+      lastName: 'User',
+      imageUrl: 'https://example.com/image.jpg',
+      clerkOrgId: 'org-123',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    expect(user).toBeDefined();
+    expect(user.id).toBe('test-id');
+  });
+
+  it('should export NewUser type', () => {
+    const newUser: NewUser = {
+      id: 'test-id',
+      email: 'test@example.com',
+      firstName: 'Test',
+      lastName: 'User',
+      imageUrl: 'https://example.com/image.jpg',
+      clerkOrgId: 'org-123',
+    };
+    expect(newUser).toBeDefined();
+    expect(newUser.email).toBe('test@example.com');
+  });
+
+  it('should allow NewUser without optional fields', () => {
+    const newUser: NewUser = {
+      id: 'test-id',
+      email: 'test@example.com',
+    };
+    expect(newUser).toBeDefined();
+    expect(newUser.id).toBe('test-id');
+    expect(newUser.email).toBe('test@example.com');
+  });
+});

package/template/src/server/db/schema/health-checks.ts

@@ -0,0 +1,11 @@
+// Health checks table schema placeholder
+import { pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core'
+
+export const healthCheckTests = pgTable('health_check_tests', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  testKey: text('test_key').notNull(),
+  testValue: text('test_value'),
+  createdAt: timestamp('created_at').defaultNow().notNull(),
+})
+
+export type HealthCheckTest = typeof healthCheckTests.$inferSelect

package/template/src/server/db/schema/index.ts

@@ -0,0 +1,2 @@
+export * from './users'
+export * from './health-checks'

package/template/src/server/db/schema/users.ts

@@ -0,0 +1,16 @@
+// Users table schema placeholder
+import { pgTable, text, timestamp, varchar } from 'drizzle-orm/pg-core'
+
+export const users = pgTable('users', {
+  id: text('id').primaryKey(),
+  email: varchar('email', { length: 255 }).notNull().unique(),
+  firstName: varchar('first_name', { length: 255 }),
+  lastName: varchar('last_name', { length: 255 }),
+  imageUrl: text('image_url'),
+  clerkOrgId: text('clerk_org_id'),
+  createdAt: timestamp('created_at').defaultNow().notNull(),
+  updatedAt: timestamp('updated_at').defaultNow().notNull(),
+})
+
+export type User = typeof users.$inferSelect
+export type NewUser = typeof users.$inferInsert

package/template/src/server/db/schema.ts

@@ -0,0 +1,26 @@
+// Example model schema from the Drizzle docs
+// https://orm.drizzle.team/docs/sql-schema-declaration
+
+import { index, pgTableCreator } from "drizzle-orm/pg-core";
+
+/**
+ * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
+ * database instance for multiple projects.
+ *
+ * @see https://orm.drizzle.team/docs/goodies#multi-project-schema
+ */
+export const createTable = pgTableCreator((name) => `dtt-framework_${name}`);
+
+export const posts = createTable(
+  "post",
+  (d) => ({
+    id: d.integer().primaryKey().generatedByDefaultAsIdentity(),
+    name: d.varchar({ length: 256 }),
+    createdAt: d
+      .timestamp({ withTimezone: true })
+      .$defaultFn(() => /* @__PURE__ */ new Date())
+      .notNull(),
+    updatedAt: d.timestamp({ withTimezone: true }).$onUpdate(() => new Date()),
+  }),
+  (t) => [index("name_idx").on(t.name)],
+);

package/template/src/stores/__tests__/ui-store.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useUIStore } from '../ui-store';
+
+describe('useUIStore', () => {
+  beforeEach(() => {
+    // Reset store state before each test
+    useUIStore.setState({ sidebarOpen: false });
+  });
+
+  it('should have initial state with sidebar closed', () => {
+    const state = useUIStore.getState();
+    expect(state.sidebarOpen).toBe(false);
+  });
+
+  it('should toggle sidebar from closed to open', () => {
+    const { toggleSidebar } = useUIStore.getState();
+    toggleSidebar();
+
+    const state = useUIStore.getState();
+    expect(state.sidebarOpen).toBe(true);
+  });
+
+  it('should toggle sidebar from open to closed', () => {
+    useUIStore.setState({ sidebarOpen: true });
+    const { toggleSidebar } = useUIStore.getState();
+    toggleSidebar();
+
+    const state = useUIStore.getState();
+    expect(state.sidebarOpen).toBe(false);
+  });
+
+  it('should toggle sidebar multiple times', () => {
+    const { toggleSidebar } = useUIStore.getState();
+
+    toggleSidebar();
+    expect(useUIStore.getState().sidebarOpen).toBe(true);
+
+    toggleSidebar();
+    expect(useUIStore.getState().sidebarOpen).toBe(false);
+
+    toggleSidebar();
+    expect(useUIStore.getState().sidebarOpen).toBe(true);
+
+    toggleSidebar();
+    expect(useUIStore.getState().sidebarOpen).toBe(false);
+  });
+
+  it('should provide toggleSidebar function', () => {
+    const state = useUIStore.getState();
+    expect(state.toggleSidebar).toBeDefined();
+    expect(typeof state.toggleSidebar).toBe('function');
+  });
+
+  it('should maintain state consistency across multiple store accesses', () => {
+    const state1 = useUIStore.getState();
+    const state2 = useUIStore.getState();
+
+    expect(state1.sidebarOpen).toBe(state2.sidebarOpen);
+    expect(state1.toggleSidebar).toBe(state2.toggleSidebar);
+  });
+
+  it('should allow direct state setting', () => {
+    useUIStore.setState({ sidebarOpen: true });
+
+    const state = useUIStore.getState();
+    expect(state.sidebarOpen).toBe(true);
+  });
+
+  it('should handle rapid state changes', () => {
+    const { toggleSidebar } = useUIStore.getState();
+
+    for (let i = 0; i < 10; i++) {
+      toggleSidebar();
+    }
+
+    const state = useUIStore.getState();
+    expect(state.sidebarOpen).toBe(false); // 10 toggles from false = false
+  });
+
+  it('should reset to initial state when explicitly set', () => {
+    useUIStore.setState({ sidebarOpen: true });
+    expect(useUIStore.getState().sidebarOpen).toBe(true);
+
+    useUIStore.setState({ sidebarOpen: false });
+    expect(useUIStore.getState().sidebarOpen).toBe(false);
+  });
+});

package/template/src/stores/ui-store.ts

@@ -0,0 +1,14 @@
+// UI store placeholder
+'use client'
+
+import { create } from 'zustand'
+
+interface UIState {
+  sidebarOpen: boolean
+  toggleSidebar: () => void
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  sidebarOpen: false,
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+}))

package/template/src/styles/globals.css

@@ -0,0 +1,129 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/template/src/test/mocks/clerk.ts

@@ -0,0 +1,35 @@
+import { vi } from 'vitest';
+
+// Mock Clerk
+export const mockClerkClient = {
+  users: {
+    getUser: vi.fn(),
+    getUserList: vi.fn(),
+  },
+  organizations: {
+    getOrganizationMembershipList: vi.fn(),
+    getOrganizationList: vi.fn(),
+  },
+};
+
+vi.mock('@clerk/nextjs', () => ({
+  auth: vi.fn(),
+  currentUser: vi.fn(),
+  ClerkProvider: ({ children }: { children: React.ReactNode }) => children,
+  SignedIn: ({ children }: { children: React.ReactNode }) => children,
+  SignedOut: ({ children }: { children: React.ReactNode }) => null,
+  UserButton: vi.fn(() => null),
+  SignIn: vi.fn(() => null),
+  SignUp: vi.fn(() => null),
+  useUser: vi.fn(() => ({
+    user: null,
+    isLoaded: true,
+  })),
+  useAuth: vi.fn(() => ({
+    userId: null,
+    sessionId: null,
+    isLoaded: true,
+  })),
+}));
+
+export default mockClerkClient;

package/template/src/test/mocks/snowflake.ts

@@ -0,0 +1,28 @@
+import { vi } from 'vitest';
+
+// Mock Snowflake connection
+export const mockSnowflakeConnection = {
+  connect: vi.fn((callback) => {
+    callback(null, mockSnowflakeConnection);
+  }),
+  execute: vi.fn((options: any) => {
+    if (options.complete) {
+      options.complete(null, null, []);
+    }
+  }),
+  destroy: vi.fn((callback) => {
+    callback(null);
+  }),
+  isUp: vi.fn(() => true),
+  getId: vi.fn(() => 'test-connection-id'),
+};
+
+// Mock Snowflake SDK
+export const mockSnowflakeSDK = {
+  createConnection: vi.fn(() => mockSnowflakeConnection),
+  createConnector: vi.fn(),
+};
+
+vi.mock('snowflake-sdk', () => mockSnowflakeSDK);
+
+export default mockSnowflakeConnection;

package/template/src/test/mocks/supabase.ts

@@ -0,0 +1,37 @@
+import { vi } from 'vitest';
+
+// Mock Supabase client
+export const mockSupabaseClient = {
+  from: vi.fn(() => mockSupabaseClient),
+  select: vi.fn(() => mockSupabaseClient),
+  insert: vi.fn(() => mockSupabaseClient),
+  update: vi.fn(() => mockSupabaseClient),
+  delete: vi.fn(() => mockSupabaseClient),
+  eq: vi.fn(() => mockSupabaseClient),
+  order: vi.fn(() => mockSupabaseClient),
+  limit: vi.fn(() => mockSupabaseClient),
+  single: vi.fn(),
+  maybeSingle: vi.fn(),
+  rpc: vi.fn(),
+  auth: {
+    getUser: vi.fn(),
+    signInWithPassword: vi.fn(),
+    signOut: vi.fn(),
+    onAuthStateChange: vi.fn(),
+  },
+  storage: {
+    from: vi.fn(() => ({
+      upload: vi.fn(),
+      download: vi.fn(),
+      remove: vi.fn(),
+      list: vi.fn(),
+      getPublicUrl: vi.fn(),
+    })),
+  },
+};
+
+vi.mock('@supabase/supabase-js', () => ({
+  createClient: vi.fn(() => mockSupabaseClient),
+}));
+
+export default mockSupabaseClient;

package/template/src/test/setup.ts

@@ -0,0 +1,69 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach, vi } from 'vitest';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  takeRecords() {
+    return [];
+  }
+  unobserve() {}
+} as any;
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+} as any;
+
+// Mock requestAnimationFrame
+global.requestAnimationFrame = (callback: FrameRequestCallback) => {
+  return setTimeout(callback, 0) as unknown as number;
+};
+
+global.cancelAnimationFrame = (id: number) => {
+  clearTimeout(id);
+};
+
+// Suppress console errors in tests (optional, can be removed for debugging)
+const originalError = console.error;
+beforeAll(() => {
+  console.error = (...args: any[]) => {
+    if (
+      typeof args[0] === 'string' &&
+      args[0].includes('Warning: ReactDOM.render')
+    ) {
+      return;
+    }
+    originalError.call(console, ...args);
+  };
+});
+
+afterAll(() => {
+  console.error = originalError;
+});

package/template/src/test/utils/test-helpers.ts

@@ -0,0 +1,158 @@
+import type { RenderOptions } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import type { ReactElement } from 'react';
+import { vi, beforeEach, afterEach } from 'vitest';
+
+/**
+ * Custom render function that includes providers if needed
+ */
+export function renderWithProviders(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) {
+  return render(ui, options);
+}
+
+/**
+ * Create a mock function that returns a resolved value
+ */
+export function mockResolved<T>(value: T) {
+  return vi.fn().mockResolvedValue(value);
+}
+
+/**
+ * Create a mock function that returns a rejected value
+ */
+export function mockRejected(error: Error | string) {
+  return vi.fn().mockRejectedValue(error instanceof Error ? error : new Error(error));
+}
+
+/**
+ * Wait for a specified amount of time
+ */
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Create a mock user object
+ */
+export function createMockUser(overrides: Partial<any> = {}) {
+  return {
+    id: 'user-123',
+    email: 'test@example.com',
+    firstName: 'Test',
+    lastName: 'User',
+    imageUrl: 'https://example.com/avatar.jpg',
+    clerkOrgId: 'org-123',
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    ...overrides,
+  };
+}
+
+/**
+ * Create a mock health check result
+ */
+export function createMockHealthCheck(overrides: Partial<any> = {}) {
+  return {
+    status: 'healthy',
+    responseTimeMs: 100,
+    message: 'Service is healthy',
+    ...overrides,
+  };
+}
+
+/**
+ * Create a mock service health object
+ */
+export function createMockServiceHealth(overrides: Partial<any> = {}) {
+  return {
+    name: 'Test Service',
+    icon: 'test-icon',
+    status: 'healthy',
+    responseTimeMs: 100,
+    checks: [
+      {
+        name: 'Test Check',
+        endpoint: '/test/endpoint',
+        status: 'healthy',
+        responseTimeMs: 50,
+      },
+    ],
+    ...overrides,
+  };
+}
+
+/**
+ * Mock console methods to suppress warnings in tests
+ */
+export function suppressConsoleWarnings() {
+  const originalWarn = console.warn;
+  const originalError = console.error;
+
+  beforeEach(() => {
+    console.warn = vi.fn();
+    console.error = vi.fn();
+  });
+
+  afterEach(() => {
+    console.warn = originalWarn;
+    console.error = originalError;
+  });
+}
+
+/**
+ * Create a mock fetch response
+ */
+export function createMockResponse(
+  data: any,
+  status: number = 200,
+  ok: boolean = true
+) {
+  return {
+    ok,
+    status,
+    json: vi.fn().mockResolvedValue(data),
+    text: vi.fn().mockResolvedValue(JSON.stringify(data)),
+  };
+}
+
+/**
+ * Mock localStorage
+ */
+export function mockLocalStorage() {
+  const store: Record<string, string> = {};
+
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = value;
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      Object.keys(store).forEach((key) => delete store[key]);
+    },
+    get length() {
+      return Object.keys(store).length;
+    },
+    key: (index: number) => Object.keys(store)[index] ?? null,
+  };
+}
+
+/**
+ * Create a mock router
+ */
+export function createMockRouter() {
+  return {
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    pathname: '/',
+    query: {},
+    asPath: '/',
+  };
+}

package/template/src/types/index.ts

@@ -0,0 +1,14 @@
+// Global type definitions placeholder
+
+export interface User {
+  id: string
+  email: string
+  firstName?: string
+  lastName?: string
+  imageUrl?: string
+  clerkOrgId?: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+export type HealthStatus = 'healthy' | 'unhealthy' | 'error' | 'pending' | 'unconfigured'