repomix-output.txt

This file is a merged representation of the entire codebase, combining all repository files into a single document.
Generated by Repomix on: 2024-12-09T01:18:41.673Z

================================================================
File Summary
================================================================

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This summary section
2. Repository information
3. Repository structure
4. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repomix's
  configuration.
- Binary files are not included in this packed representation. Please refer to
  the Repository Structure section for a complete list of file paths, including
  binary files.

Additional Info:
----------------

For more information about Repomix, visit: https://github.com/yamadashy/repomix

================================================================
Repository Structure
================================================================
api/
  src/
    database/
      DatabaseModels.ts
      index.ts
    migrations/
      001_init.ts
    repositories/
      UserRepository.ts
    services/
      UserService.ts
    app.ts
    index.ts
  tests/
    Globals.ts
    ping.test.ts
    setup.ts
    user.test.ts
  package.json
  tsconfig.json
  vitest.config.ts
common/
  src/
    clients/
      BaseClient.ts
      HttpClient.ts
      SupertestClient.ts
    models/
      PingModel.ts
      UserModel.ts
    responses/
      index.ts
    http.ts
    models.ts
    supertest.ts
  package.json
  tsconfig.json
web/
  public/
    vite.svg
  src/
    assets/
      react.svg
    components/
      ui/
        alert.tsx
        button.tsx
    lib/
      utils.ts
    API.ts
    App.tsx
    index.css
    main.tsx
    vite-env.d.ts
  .gitignore
  components.json
  index.html
  package.json
  postcss.config.js
  README.md
  tailwind.config.js
  tsconfig.app.json
  tsconfig.json
  tsconfig.node.json
  vite.config.ts
.gitignore
.prettierrc
eslint.config.js
package.json
README.md
tsconfig.json

================================================================
Repository Files
================================================================

================
File: api/src/database/DatabaseModels.ts
================
import { Generated } from 'kysely'

export interface DB {
  users: Users
}

export interface Users {
  user_id: Generated<number>
  user_full_name: string | null
  user_email: string | null
  user_created_at: Generated<string>
  user_updated_at: Generated<string>
}

================
File: api/src/database/index.ts
================
import { promises as fs } from 'fs'
import { FileMigrationProvider, Kysely, Migrator, PostgresDialect } from 'kysely'
import path from 'path'
import pg from 'pg'
import { fileURLToPath } from 'url'
import { DB } from './DatabaseModels.js'
const { Pool } = pg

const NODE_ENV: string | undefined = process.env.NODE_ENV
let DATABASE_HOST: string | undefined = process.env.DATABASE_HOST
let DATABASE_PORT: string | undefined = process.env.DATABASE_PORT
let DATABASE_USER: string | undefined = process.env.DATABASE_USER
let DATABASE_PASSWORD: string | undefined = process.env.DATABASE_PASSWORD
let DATABASE_NAME: string | undefined = process.env.DATABASE_NAME

// Explicitly use local lumber_test database for testing, make sure we don't use production database by accident
// Just need to make sure that NODE_ENV is set to 'test' when running tests
if (NODE_ENV === 'test') {
  DATABASE_HOST = 'localhost'
  DATABASE_PORT = '5432'
  DATABASE_USER = 'postgres'
  DATABASE_PASSWORD = undefined
  DATABASE_NAME = 'lumber_test'
}

// Password is optional because it's not required for local development
if (!DATABASE_HOST || !DATABASE_PORT || !DATABASE_USER || !DATABASE_NAME) {
  throw new Error('DATABASE_HOST, DATABASE_PORT, DATABASE_USER, and DATABASE_NAME must be set')
}

export const config = {
  database: DATABASE_NAME,
  host: DATABASE_HOST,
  port: parseInt(DATABASE_PORT),
  user: DATABASE_USER,
  password: DATABASE_PASSWORD
}

export const dialect = new PostgresDialect({
  pool: new Pool(config)
})

export const db = new Kysely<DB>({ dialect })

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const migrationFolder = path.resolve(__dirname, '../migrations')
console.log(`Migration folder: ${migrationFolder}`)

export const migrator = new Migrator({
  db,
  provider: new FileMigrationProvider({
    fs,
    path,
    migrationFolder
  })
})

================
File: api/src/migrations/001_init.ts
================
import { Kysely, sql } from 'kysely'

export async function up(db: Kysely<any>): Promise<void> {
  await db.schema
    .createTable('users')
    .addColumn('user_id', 'integer', (col) => col.generatedByDefaultAsIdentity().primaryKey())
    .addColumn('user_full_name', 'text')
    .addColumn('user_email', 'text')
    .addColumn('user_encrypted_password', 'text')
    .addColumn('user_created_at', 'timestamp', (col) => col.defaultTo(sql`CURRENT_TIMESTAMP`))
    .addColumn('user_updated_at', 'timestamp', (col) => col.defaultTo(sql`CURRENT_TIMESTAMP`))
    .execute()
}

export async function down(db: Kysely<any>): Promise<void> {
  await db.schema.dropTable('users').execute()
}

================
File: api/src/repositories/UserRepository.ts
================
import { User, UserSchema } from '@lumber/common/models'
import { db } from '../database'

export const UserRepository = {
  getUser: async (id: number): Promise<User | null> => {
    const result = await db.selectFrom('users').selectAll().where('user_id', '=', id).executeTakeFirst()
    if (!result) {
      return null
    }
    return UserSchema.parse({
      userId: result.user_id,
      userFullName: result.user_full_name,
      userEmail: result.user_email
    })
  },
  getUsers: async (): Promise<User[]> => {
    const result = await db.selectFrom('users').selectAll().execute()
    return result.map((user) =>
      UserSchema.parse({
        userId: user.user_id,
        userFullName: user.user_full_name,
        userEmail: user.user_email
      })
    )
  }
}

================
File: api/src/services/UserService.ts
================
import { User } from '@lumber/common/models'
import { UserRepository } from '../repositories/UserRepository'

export const UserService = {
  getUser: async (id: number): Promise<User | null> => {
    const user = await UserRepository.getUser(id)
    return user
  },

  getUsers: async (): Promise<User[]> => {
    const users = await UserRepository.getUsers()
    return users
  }
}

================
File: api/src/app.ts
================
import { AdminUserResponse, AdminUsersResponse, PingResponse } from '@lumber/common/http'
import bodyParser from 'body-parser'
import cors from 'cors'
import express, { NextFunction, Request, Response } from 'express'
import createHttpError from 'http-errors'
import { UserService } from './services/UserService'

export const app = express()

app.use(cors())
app.use(bodyParser.json())

app.get('/', (req: Request, res: Response) => {
  res.send('Hello World')
})

app.get('/api/v1/ping', async (req: Request, res: Response<PingResponse>, next: NextFunction) => {
  try {
    res.send({ timestamp: new Date().toISOString() })
  } catch (error) {
    next(error)
  }
})

app.get('/api/v1/admin/users', async (req: Request, res: Response<AdminUsersResponse>, next: NextFunction) => {
  try {
    const users = await UserService.getUsers()
    res.send({ data: users, total: users.length })
  } catch (error) {
    next(error)
  }
})

app.get('/api/v1/admin/users/:id', async (req: Request, res: Response<AdminUserResponse>, next: NextFunction) => {
  try {
    const id = Number(req.params.id)
    const user = await UserService.getUser(id)
    if (!user) {
      throw createHttpError(404, 'User not found')
    }
    res.send(user)
  } catch (error) {
    next(error)
  }
})

app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  if (createHttpError.isHttpError(err)) {
    res.status(err.statusCode || 500).send({ message: err.message })
  } else {
    res.status(500).send({ message: 'Internal server error' })
  }
})

================
File: api/src/index.ts
================
import { app } from './app'

console.log(`NODE_ENV: ${process.env.NODE_ENV}`)
const port = process.env.PORT || 3000

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`)
})

================
File: api/tests/Globals.ts
================
import { SupertestAPIClient } from '@lumber/common/supertest'
import { app } from '../src/app'

export const apiClient = new SupertestAPIClient(app)

export const Globals = {
  supertest: new SupertestAPIClient(app)
}

================
File: api/tests/ping.test.ts
================
import { PingSchema } from '@lumber/common/models'
import { describe, expect, it } from 'vitest'
import { Globals } from './Globals'

describe('Ping', () => {
  it('Returns a timestamp', async () => {
    const response = await Globals.supertest.ping()
    expect(PingSchema.safeParse(response).success).toBe(true)
  })
})

================
File: api/tests/setup.ts
================
import { sql } from 'kysely'
import { beforeAll } from 'vitest'
import { config, db, migrator } from '../src/database'

beforeAll(async () => {
  console.log(`Current NODE_ENV: ${process.env.NODE_ENV}`)

  // Make sure we're running the tests with the test environment
  if (process.env.NODE_ENV !== 'test') {
    throw new Error('Tests must be run with the test environment')
  }

  // Confirm that the database name is lumber_test to make sure we're not accidentally using the production database
  if (config.database !== 'lumber_test') {
    throw new Error('Tests must be run with the lumber_test database')
  } else {
    console.log('Tests are correctly running with the lumber_test database')
  }

  // Clear the test database
  console.log('Clearing public schema')
  await sql`DROP SCHEMA IF EXISTS public CASCADE`.execute(db)
  console.log('Creating public schema')
  await sql`CREATE SCHEMA public`.execute(db)

  // Run migrations
  console.log('Running migrations')
  const { error, results } = await migrator.migrateToLatest()
  console.log(results)
  if (error) {
    console.error(error)
    throw error
  }

  // Insert mock user data
  console.log('Inserting mock user data')

  await db
    .insertInto('users')
    .values([
      {
        user_id: 1,
        user_full_name: 'User 1',
        user_email: 'user1@test.com'
      },
      {
        user_id: 2,
        user_full_name: 'User 2',
        user_email: 'user2@test.com'
      },
      {
        user_id: 3,
        user_full_name: 'User 3',
        user_email: 'user3@test.com'
      }
    ])
    .execute()

  console.log('Mock user data inserted')
  console.log('Setup complete')
})

================
File: api/tests/user.test.ts
================
import { UserSchema } from '@lumber/common/models'
import { describe, expect, it } from 'vitest'
import { Globals } from './Globals'

describe('UserService', () => {
  it('Admin can get all users', async () => {
    const usersResponse = await Globals.supertest.getAdminUsers()
    expect(usersResponse.data).toBeInstanceOf(Array)
    expect(usersResponse.data.every((user) => UserSchema.safeParse(user).success)).toBe(true)
  })
  it('Returns a user by id', async () => {
    const userResponse = await Globals.supertest.getAdminUser(1)
    expect(userResponse.userId).toBe(1)
  })
  it('Returns a 404 if the user is not found', async () => {
    try {
      await Globals.supertest.getAdminUser(999)
    } catch (error: any) {
      expect(error.statusCode).toBe(404)
    }
  })
})

================
File: api/package.json
================
{
  "name": "@lumber/api",
  "version": "0.0.1",
  "private": true,
  "license": "UNLICENSED",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "start": "tsx --env-file=.env src/index.ts",
    "test": "NODE_ENV=test vitest run --coverage"
  },
  "dependencies": {
    "@lumber/common": "*",
    "@types/body-parser": "^1.19.5",
    "@types/cors": "^2.8.17",
    "@types/dotenv": "^8.2.3",
    "@types/express": "^5.0.0",
    "@types/http-errors": "^2.0.4",
    "@types/pg": "^8.11.10",
    "body-parser": "^1.20.3",
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.21.2",
    "http-errors": "^2.0.0",
    "kysely": "^0.27.5",
    "pg": "^8.13.1",
    "supertest": "^7.0.0"
  },
  "devDependencies": {
    "@vitest/coverage-v8": "2.1.8",
    "vitest": "^2.1.8"
  }
}

================
File: api/tsconfig.json
================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "outDir": "./dist",
    "rootDir": "."
  },
  "include": ["src/**/*", "tests/**/*"],
  "exclude": ["node_modules", "dist", "test"],
  "references": [{ "path": "../common" }]
}

================
File: api/vitest.config.ts
================
import path from 'path'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
    include: ['**/*.test.ts'],
    setupFiles: './tests/setup.ts',
    fileParallelism: false,
    maxConcurrency: 1,
    isolate: false,
    coverage: {
      reporter: ['text-summary'] // Compact summary output
    },
    server: {
      deps: {
        inline: [/.*/] // This lets us run the database migrations in the setup file
      }
    }
  },
  resolve: {
    alias: {
      '@lumber/common': path.resolve(__dirname, '../common/src')
    },
    extensions: ['.ts', '.js']
  }
})

================
File: common/src/clients/BaseClient.ts
================
import { AdminUserResponse, AdminUsersResponse, PingResponse } from '../responses'

export type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete'

export interface APIError {
  statusCode: number
  message: string
  data?: any
}

export abstract class APIClientBase {
  protected abstract request<T>(
    method: HttpMethod,
    url: string,
    data?: any,
    queryParams?: Record<string, string>
  ): Promise<T>

  abstract setAuthToken(token: string | null): void
  abstract clearAuthToken(): void

  async ping(): Promise<PingResponse> {
    return this.request<PingResponse>('get', '/api/v1/ping')
  }

  async getAdminUsers(): Promise<AdminUsersResponse> {
    return this.request<AdminUsersResponse>('get', '/api/v1/admin/users')
  }

  async getAdminUser(id: number): Promise<AdminUserResponse> {
    return this.request<AdminUserResponse>('get', `/api/v1/admin/users/${id}`)
  }
}

================
File: common/src/clients/HttpClient.ts
================
import axios, { AxiosInstance, AxiosResponse } from 'axios'
import { APIClientBase, APIError, HttpMethod } from './BaseClient'

export class HttpAPIClient extends APIClientBase {
  client: AxiosInstance

  constructor(baseURL: string) {
    super()
    this.client = axios.create({ baseURL })
  }

  protected async request(
    method: HttpMethod,
    url: string,
    data?: any,
    queryParams?: Record<string, string>
  ): Promise<any> {
    try {
      const response: AxiosResponse = await this.client.request({
        method,
        url,
        params: queryParams,
        data
      })
      return response.data
    } catch (error) {
      if (axios.isAxiosError(error)) {
        const axiosError: APIError = {
          statusCode: error.response?.status || 500,
          message: error.response?.data?.message || 'An unexpected error occurred',
          data: error.response?.data
        }
        throw axiosError
      }
      throw error
    }
  }

  setAuthToken(token: string | null): void {
    this.client.defaults.headers.common['Authorization'] = `Bearer ${token}`
  }

  clearAuthToken(): void {
    delete this.client.defaults.headers.common['Authorization']
  }
}

================
File: common/src/clients/SupertestClient.ts
================
import { Express } from 'express'
import supertest from 'supertest'
import TestAgent from 'supertest/lib/agent'
import { APIClientBase, APIError, HttpMethod } from './BaseClient'

export class SupertestAPIClient extends APIClientBase {
  private client: TestAgent<supertest.Test>
  private authToken: string | null = null
  private sparkAuthToken: string | null = null

  constructor(app: Express) {
    super()
    this.client = supertest(app)
  }

  protected async request(
    method: HttpMethod,
    url: string,
    data?: any,
    queryParams?: Record<string, string>
  ): Promise<any> {
    let request = this.client[method](url)

    // Add query parameters
    if (queryParams) {
      request = request.query(queryParams)
    }

    if (this.sparkAuthToken) {
      request = request.set('X-Spark-Auth-Token', this.sparkAuthToken)
    } else if (this.authToken) {
      request = request.set('Authorization', `Bearer ${this.authToken}`)
    }

    if (data) {
      request = request.send(data)
    }

    const response = await request

    if (response.status < 200 || response.status >= 300) {
      const error: APIError = {
        statusCode: response.status,
        message: response.body.message,
        data: response.body
      }
      throw error
    }

    return response.body
  }

  setAuthToken(token: string | null): void {
    this.authToken = token
  }

  clearAuthToken(): void {
    this.authToken = null
  }

  setSparkAuthToken(token: string | null): void {
    this.sparkAuthToken = token
  }

  clearSparkAuthToken(): void {
    this.sparkAuthToken = null
  }
}

================
File: common/src/models/PingModel.ts
================
import { z } from 'zod'

export const PingSchema = z.object({
  timestamp: z.string()
})

export type Ping = z.infer<typeof PingSchema>

================
File: common/src/models/UserModel.ts
================
import { z } from 'zod'

export const UserSchema = z
  .object({
    userId: z.number(),
    userFullName: z.string().nullable(),
    userEmail: z.string().email().nullable()
  })
  .strict()

export type User = z.infer<typeof UserSchema>

================
File: common/src/responses/index.ts
================
import { Ping } from '../models/PingModel'
import { User } from '../models/UserModel'

export type PingResponse = Ping

export type AdminUsersResponse = {
  data: User[]
  total: number
}

export type AdminUserResponse = User

================
File: common/src/http.ts
================
export * from './clients/HttpClient'
export * from './models'

================
File: common/src/models.ts
================
export * from './models/PingModel.js'
export * from './models/UserModel.js'
export * from './responses/index.js'

================
File: common/src/supertest.ts
================
export * from './clients/SupertestClient'
export * from './models'

================
File: common/package.json
================
{
  "name": "@lumber/common",
  "version": "1.0.0",
  "private": true,
  "license": "UNLICENSED",
  "type": "module",
  "exports": {
    "./http": {
      "import": "./dist/http.js",
      "require": "./dist/http.js",
      "default": "./src/http.ts"
    },
    "./supertest": {
      "import": "./dist/supertest.js",
      "require": "./dist/supertest.js",
      "default": "./src/supertest.ts"
    },
    "./models": {
      "import": "./dist/models.js",
      "require": "./dist/models.js",
      "default": "./src/models.ts"
    }
  },
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    "axios": "^1.7.9",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/supertest": "^6.0.2"
  },
  "peerDependencies": {
    "axios": "^1.7.9",
    "supertest": "^7.0.0"
  }
}

================
File: common/tsconfig.json
================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

================
File: web/public/vite.svg
================
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

================
File: web/src/assets/react.svg
================
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

================
File: web/src/components/ui/alert.tsx
================
import { cva, type VariantProps } from 'class-variance-authority'
import * as React from 'react'

import { cn } from '@/lib/utils'

const alertVariants = cva(
  'relative w-full rounded-lg border border-slate-200 px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 [&>svg~*]:pl-7 dark:border-slate-800 dark:[&>svg]:text-slate-50',
  {
    variants: {
      variant: {
        default: 'bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
        destructive:
          'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900'
      }
    },
    defaultVariants: {
      variant: 'default'
    }
  }
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
))
Alert.displayName = 'Alert'

const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
  )
)
AlertTitle.displayName = 'AlertTitle'

const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
  )
)
AlertDescription.displayName = 'AlertDescription'

export { Alert, AlertDescription, AlertTitle }

================
File: web/src/components/ui/button.tsx
================
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'
import * as React from 'react'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-slate-300',
  {
    variants: {
      variant: {
        default:
          'bg-slate-900 text-slate-50 shadow hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90',
        destructive:
          'bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90',
        outline:
          'border border-slate-200 bg-white shadow-sm hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50',
        secondary:
          'bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80',
        ghost: 'hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50',
        link: 'text-slate-900 underline-offset-4 hover:underline dark:text-slate-50'
      },
      size: {
        default: 'h-9 px-4 py-2',
        sm: 'h-8 rounded-md px-3 text-xs',
        lg: 'h-10 rounded-md px-8',
        icon: 'h-9 w-9'
      }
    },
    defaultVariants: {
      variant: 'default',
      size: 'default'
    }
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
  }
)
Button.displayName = 'Button'

export { Button, buttonVariants }

================
File: web/src/lib/utils.ts
================
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

================
File: web/src/API.ts
================
import { HttpAPIClient } from '@lumber/common/http'

export const apiClient = new HttpAPIClient(import.meta.env.VITE_API_URL)

================
File: web/src/App.tsx
================
import { useEffect } from 'react'
import { apiClient } from './API'
import { Alert, AlertDescription, AlertTitle } from './components/ui/alert'
import { Button } from './components/ui/button'

export function App() {
  useEffect(() => {
    apiClient.ping().then((ping) => {
      console.log(ping)
    })
  }, [])

  return (
    <div className="px-4 py-4">
      <Alert>
        <AlertTitle>Hello world</AlertTitle>
        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
      </Alert>
      <br />
      <Button>Click me</Button>
    </div>
  )
}

================
File: web/src/index.css
================
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --radius: 0.5rem
  }
}

================
File: web/src/main.tsx
================
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
)

================
File: web/src/vite-env.d.ts
================
/// <reference types="vite/client" />

================
File: web/.gitignore
================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

================
File: web/components.json
================
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

================
File: web/index.html
================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

================
File: web/package.json
================
{
  "name": "@lumber/web",
  "version": "0.0.0",
  "private": true,
  "license": "UNLICENSED",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "start": "vite"
  },
  "dependencies": {
    "@lumber/common": "*",
    "@radix-ui/react-slot": "^1.1.0",
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.468.0",
    "postcss": "^8.4.49",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss": "^3.4.16",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "globals": "^15.12.0",
    "typescript-eslint": "^8.15.0",
    "vite": "^6.0.1"
  }
}

================
File: web/postcss.config.js
================
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

================
File: web/README.md
================
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```

================
File: web/tailwind.config.js
================
/** @type {import('tailwindcss').Config} */
export default {
    darkMode: ['class'],
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
  	extend: {
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		colors: {}
  	}
  },
  plugins: [require("tailwindcss-animate")]
}

================
File: web/tsconfig.app.json
================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "../common" }]
}

================
File: web/tsconfig.json
================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "references": [{ "path": "../common" }]
}

================
File: web/tsconfig.node.json
================
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"],
  "references": [
    { "path": "../common" }
  ]
}

================
File: web/vite.config.ts
================
import react from '@vitejs/plugin-react-swc'
import path from 'path'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: process.env.VITE_PORT ? parseInt(process.env.VITE_PORT) : 3000,
    open: true
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

================
File: .gitignore
================
node_modules/
**/node_modules/

dist/
**/dist/
build/
**/build/

.env
.env.*

*.tsbuildinfo
.DS_Store
**/.DS_Store

================
File: .prettierrc
================
{
  "plugins": ["prettier-plugin-organize-imports"],
  "singleQuote": true,
  "semi": false,
  "printWidth": 120,
  "trailingComma": "none",
  "endOfLine": "auto"
}

================
File: eslint.config.js
================
import js from '@eslint/js'
import prettier from 'eslint-plugin-prettier'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import globals from 'globals'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
      'plugin:prettier/recommended' // Enables Prettier and eslint-config-prettier
    ],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser
    },
    plugins: {
      'eslint-recommended': js.configs.recommended,
      'typescript-eslint': tseslint,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier // Add Prettier as a plugin
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
      'prettier/prettier': 'error' // Make Prettier errors show up as ESLint errors
    }
  }
)

================
File: package.json
================
{
  "name": "lumber",
  "version": "1.0.0",
  "private": true,
  "license": "UNLICENSED",
  "type": "module",
  "devDependencies": {
    "@eslint/js": "^9.16.0",
    "@types/node": "^22.10.1",
    "@typescript-eslint/eslint-plugin": "^8.17.0",
    "eslint": "^9.16.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.4.2",
    "prettier-plugin-organize-imports": "^4.1.0",
    "tsx": "^4.19.2",
    "typescript": "^5.7.2"
  },
  "workspaces": {
    "packages": [
      "api",
      "web",
      "common"
    ]
  },
  "scripts": {
    "build": "yarn workspace @lumber/common build && yarn workspace @lumber/api build && yarn workspace @lumber/web build",
    "start": "npm-run-all -p build start:*",
    "start:api": "yarn workspace @lumber/api start",
    "start:web": "yarn workspace @lumber/web start",
    "test": "yarn workspace @lumber/api test",
    "repomix": "repomix"
  },
  "dependencies": {
    "repomix": "^0.2.5"
  }
}

================
File: README.md
================
# Typescript monorepo boilerplace

My preferred stack is Typescript, with a Node.js based back-end and a React based front-end.

Typically, I have a repository for each one. But I find that there aren't a lot of benefits especially in new projects or small engineering teams of < 20 people.

Challenges:

- Most features likely require some front-end and back-end work
- We want to share Typescript types and other shared code between the two projects
- We want similar project configurations between them (ex. Typescript versions, linting, etc.)
- The feedback loops is slow when you have to build/test/commit for each project instead of working on them together

However, this does not mean that I want to move to a full-stack framework. There are clear and tangible benefits to having separated API and web codebases and architectures. Thus, this project was born.

This repository is meant to be a boilerplate starting point for any full-stack application project I want to pursue.

# Folder structure

```
lumber/
├── package.json
├── eslint.config.js
├── tsconfig.json
├── ... other global configuration files
├── api/
│   ├── package.json
│   ├── tsconfig.json
│   └── src/
│       └── index.ts
│       └── ... rest of the API application
├── common/
│   ├── package.json
│   ├── tsconfig.json
│   └── src/
│       └── index.ts
│       └── ... rest of the common shared code
├── web/
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.app.json
│   ├── tsconfig.node.json
│   ├── vite.config.ts
│   ├── index.html
│   └── src/
│       └── index.tsx
│       └── ... rest of the web application
```

# How it is set up

The project is a yarn workplace (should work the same whether it's an npm or pnpm workspace) that consists of 3 projects:

1. API
2. Web
3. Common

It was challenging to set up all the right configurations for each of these projects. It would be simpler if it was just a JS project, but with a TS transpilation step, I ran into many gotchas. I was also learning about the concept of yarn workspaces for the first time.

- The root directory has a package.json and any globally applicable configuration files such as eslint and prettier. This package.json contains packages that should be globally available, such as Typescript and any packages associated with the configurations.
- Each project has their own package.json and tsconfig.json.
- Each package.json needs:
  - A name (in my case, @lumber/api, @lumber/web, @lumber/common - I chose lumber because it's related to a project I may work on next)
  - In my case I made each package.json of "type": "module" - while not strictly necessary, I find it helps especially with Vite web projects that expect it by default
  - A "main" entry point, which is typically the /dist/index.js file
  - In any common/shared packages, it is useful to put an "exports" property that defaults to the index.ts file so that types can be referenced during local development without having to build (requires more testing)
- Each tsconfig.json needs:
  - To extend from the root tsconfig.json for some global consistency
  - In my case, I decided I wanted each project to have the "module" type be "ESNext". This works well for new projects, but if you have an existing project with many dependencies that may have funny module resolution behaviours, you may need to keep things CommonJS.
  - For projects that need to import code from other projects, a "references": [] entry that points to those imports.

All dependencies are up to date as of Dec 2024.

# How to run

1. Git clone
2. At the root level, run `yarn install`
3. `yarn build` to build, or
4. `yarn start` to start the API and web server concurrently with `npm-run-all` (the `concurrently` package didn't play well with modules)

# What's next

I may continue to add to this project over time to customize to my general use cases. Others may find it useful to clone if they have a similar project structure coming up and want a working starting point, but I recommend anyone starting a new project to give the setup a crack on their own. Depending on your familiarity with these tools, it may take upwards of a day to truly get right, as it was the case for me.

================
File: tsconfig.json
================
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "NodeNext",
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "paths": {
      "@lumber/*": ["./*/src"]
    },
    "baseUrl": "."
  }
}