Packages Overview

Applications

The monorepo contains two production applications:

Console

Main Openlane Console application

Storybook

Component documentation and testing

Console (`apps/console`)

The primary web application for Openlane users.

Package Details

Name: console
Version: 1.0.0
Port: 3001
Framework: Next.js 16.1.6Key Dependencies:

[email protected] - Application framework
[email protected] - UI library
@tanstack/react-query@^5.66.9 - Data fetching and caching
next-auth@beta - Authentication
stripe@^18.5.0 - Payment processing
@repo/ui - Shared component library
@repo/codegen - GraphQL API client
@repo/dally - Data access layer

Features:

Authentication with GitHub and Google OAuth
Stripe billing integration
AI-powered features using Amazon Bedrock and Google Vertex AI
Real-time notifications with Novu
WebAuthn passkey support
Survey creation with SurveyJS
Interactive force-directed graphs
PDF generation and viewing

Scripts

Command	Description
`dev`	Start development server on port 3001
`build`	Build production bundle
`debug`	Build with memory debugging
`start`	Start production server on port 3001
`lint`	Lint codebase
`test`	Run Jest tests

Storybook (`apps/storybook`)

Component library documentation and visual testing environment.

Package Details

Name: openlane-storybook
Version: 0.0.0
Port: 6006
Framework: Storybook 10.2.13Key Dependencies:

[email protected] - Component development environment
@repo/ui - Component library being documented
@tanstack/react-query@^5.90.11 - Data fetching examples
@storybook/[email protected] - Vite integration
vite@^7.0.0 - Build tool

Addons:

@storybook/addon-a11y - Accessibility testing
@storybook/addon-docs - Auto-generated documentation
@storybook/addon-themes - Theme switching
@chromatic-com/storybook - Visual regression testing

Scripts

Command	Description
`dev`	Start Storybook dev server on port 6006
`build`	Build static Storybook site
`storybook`	Alias for dev command
`lint`	Lint Storybook files

Shared Packages

Five internal packages provide shared functionality:

@repo/ui (`packages/ui`)

Comprehensive React component library built with Radix UI and Tailwind CSS.

Package Details

Version: 0.0.0 (private)
Exports: 70+ components and utilitiesCore Technologies:

[email protected] - UI framework
[email protected] - Framework integration
tailwindcss@^4.1.13 - Styling (v4)
@radix-ui/* - Accessible component primitives
platejs@^49.1.5 - Rich text editor
recharts@^3.2.0 - Data visualization

Component Categories:

Forms: Input, Textarea, Select, Checkbox, Switch, Radio, Calendar, Tag Input
Data Display: Table, Data Table, Charts (Line, Donut), Badge, Avatar
Feedback: Alert, Toast, Dialog, Confirmation Dialog, Progress
Navigation: Breadcrumb, Tabs, Pagination, Command Menu
Layout: Grid, Panel, Card, Sheet, Separator
Rich Text: Plate.js editor with 30+ plugins
Advanced: Global Search, Infinite Scroll, Country Dropdown

Key Features

Accessibility: Built on Radix UI primitives
Type Safety: Full TypeScript support
Styling: Tailwind CSS v4 with custom design system
Form Handling: React Hook Form integration
AI Integration: AI SDK for suggestions and autocomplete
Rich Text: Advanced markdown editor with Plate.js
Internationalization: Country flags and localization support

Sample Exports

import { Button } from '@repo/ui/button'
import { DataTable } from '@repo/ui/data-table'
import { useToast } from '@repo/ui/use-toast'
import { LineChart } from '@repo/ui/line-chart'
import { Calendar } from '@repo/ui/calendar'

@repo/codegen (`packages/codegen`)

GraphQL code generator for type-safe API interactions.

Package Details

Version: 0.0.0
Purpose: Generate TypeScript types and hooks from GraphQL schemaDependencies:

[email protected] - GraphQL implementation
[email protected] - GraphQL client
@graphql-codegen/[email protected] - Code generation CLI
@graphql-codegen/[email protected] - TypeScript plugin
@graphql-codegen/[email protected] - Operations plugin
@graphql-codegen/typescript-react-query@^6.1.0 - React Query integration

How It Works

Define Queries: Create .graphql files in /query directory
Generate Code: Run bun run codegen to generate TypeScript
Use Hooks: Import generated hooks in your components

# query/organization.graphql
query GetOrganization($id: ID!) {
  organization(id: $id) {
    id
    name
    createdAt
  }
}

// Generated hook usage
import { useGetOrganizationQuery } from '@repo/codegen/src/schema'

const { data, loading } = useGetOrganizationQuery({ id: 'org-123' })

Configuration

Configured via graphql-codegen.yml to:

Introspect the Openlane GraphQL API
Generate TypeScript types
Create React Query hooks
Include proper error handling

@repo/dally (`packages/dally`)

Data Access Layer (DAL) for common patterns and functionality.

Package Details

Version: 0.0.0 (private)
Language: TypeScriptExports:

./auth - Authentication utilities
./user - User management functions
./chat - Chat functionality
./ai - AI integration helpers

Build Process:

Compiled with TypeScript
Supports watch mode for development
Type checking enabled

Scripts

Command	Description
`build`	Compile TypeScript to JavaScript
`dev`	Watch mode compilation
`type-check`	Verify types without emitting
`lint`	Lint source files

@repo/eslint-config (`packages/eslint-config`)

Shared ESLint configurations for consistent code quality.

Package Details

Version: 0.0.0 (private)
Type: ES ModuleExports:

./base - Base ESLint configuration
./next-js - Next.js-specific rules
./react-internal - React component rules

Included Plugins:

@next/eslint-plugin-next@^16.1.6 - Next.js best practices
eslint-plugin-react@^7.37.5 - React rules
eslint-plugin-react-hooks@^7.0.1 - Hooks rules
eslint-plugin-turbo@^2.8.9 - Turborepo rules
eslint-config-prettier@^10.1.1 - Prettier integration
typescript-eslint@^8.30.1 - TypeScript rules

@repo/typescript-config (`packages/config-typescript`)

Shared TypeScript configurations for consistent type checking.

Package Details

Version: 0.0.0 (private)
License: MITPurpose:

Provides base tsconfig.json files
Ensures consistent compiler options
Shared across all packages and apps

Package Dependency Graph

Cross-Package Usage

Console Dependencies

The Console app depends on:

@repo/ui - All UI components
@repo/codegen - GraphQL API client
@repo/dally - Authentication and data utilities
@repo/typescript-config - TypeScript configuration
@repo/eslint-config - Linting rules

Storybook Dependencies

Storybook depends on:

@repo/ui - Components being documented
@repo/typescript-config - TypeScript configuration
@repo/eslint-config - Linting rules

Development Workflow

Install Dependencies

Run bun install at the root to install all workspace dependencies

Build Packages

Run bun run build to build all packages in dependency order

Start Development

Run bun run dev to start all apps in parallel with hot reload

Make Changes

Edit files in any package - Turborepo will automatically rebuild dependents

Version Management

All packages use "version": "0.0.0" because they are private and not published to npm. Version management is handled at the monorepo level.

Monorepo Structure

Learn about the Turborepo architecture

Tech Stack

Explore the complete technology stack

Getting Started

Console

Component Library

Architecture

Development

Applications

Console

Storybook

Console (`apps/console`)

Storybook (`apps/storybook`)

Shared Packages

@repo/ui (`packages/ui`)

@repo/codegen (`packages/codegen`)

@repo/dally (`packages/dally`)

@repo/eslint-config (`packages/eslint-config`)

@repo/typescript-config (`packages/config-typescript`)

Package Dependency Graph

Cross-Package Usage

Development Workflow

Version Management

Monorepo Structure

Tech Stack

Build docs developers (and LLMs) love

Getting Started

Console

Component Library

Architecture

Development

​Applications

Console

Storybook

​Console (apps/console)

​Storybook (apps/storybook)

​Shared Packages

​@repo/ui (packages/ui)

​@repo/codegen (packages/codegen)

​@repo/dally (packages/dally)

​@repo/eslint-config (packages/eslint-config)

​@repo/typescript-config (packages/config-typescript)

​Package Dependency Graph

​Cross-Package Usage

​Development Workflow

​Version Management

​Related Resources

Monorepo Structure

Tech Stack

Build docs developers (and LLMs) love

Applications

Console (`apps/console`)

Storybook (`apps/storybook`)

Shared Packages

@repo/ui (`packages/ui`)

@repo/codegen (`packages/codegen`)

@repo/dally (`packages/dally`)

@repo/eslint-config (`packages/eslint-config`)

@repo/typescript-config (`packages/config-typescript`)

Package Dependency Graph

Cross-Package Usage

Development Workflow

Version Management

Related Resources