- Add due_date column to tasks table with Supabase migration - Update database types and tasks_with_assignee view - Add DatePicker to TaskModal for setting due dates - Display due dates on KanbanTaskCard, list view, and Etapes section - Enable Roadmap tab on both Tasks page and Tablo Details page - Add RoadmapView components with timeline grouped by Etape - Highlight overdue dates in red across all views Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| src | ||
| biome.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| turbo.json | ||
@xtablo/shared-types
Shared TypeScript type definitions for the Xtablo monorepo. This package provides a centralized location for all type definitions used across all applications, including database types, domain types, and utility types.
Note
: This package has zero runtime dependencies and is purely for TypeScript types. It can be safely imported by any app in the monorepo (API, frontend, mobile) without bringing in unnecessary dependencies.
Features
- Zero dependencies: Pure TypeScript types with no runtime dependencies
- Supabase integration: Auto-generated database types from Supabase schema
- Domain types: Strongly-typed definitions for Events, Tablos, Stripe, Kanban, etc.
- Utility types: Helper types for working with database types
- Tree-shakeable: Import only what you need
Installation
This package is part of the Xtablo monorepo and is available to all apps via workspace protocol:
{
"dependencies": {
"@xtablo/shared-types": "workspace:*"
}
}
Usage
Import from main export
import type { Event, Tablo, UserSubscriptionStatus } from "@xtablo/shared-types";
Import from specific modules
import type { Event } from "@xtablo/shared-types/events";
import type { Tablo } from "@xtablo/shared-types/tablos";
import type { StripePrice } from "@xtablo/shared-types/stripe";
import type { KanbanTask } from "@xtablo/shared-types/kanban";
import type { RemoveNull } from "@xtablo/shared-types/utils";
Available Types
Database Types
Generated from Supabase schema:
import type { Database, Json } from "@xtablo/shared-types";
Utility Types
Helper types for working with database types:
import type {
Tables, // Extract table row types
TablesInsert, // Extract table insert types
TablesUpdate, // Extract table update types
RemoveNull, // Remove null from a type
RemoveNullFromObject, // Remove null from object properties
} from "@xtablo/shared-types";
// Example usage:
type EventRow = Tables<"events">;
type EventInsert = TablesInsert<"events">;
type EventUpdate = TablesUpdate<"events">;
Event Types
import type {
Event, // Event with non-null fields
EventInsert, // Type for inserting events
EventUpdate, // Type for updating events
EventInsertInTablo, // Event insert without tablo_id
EventAndTablo, // Joined event and tablo view
} from "@xtablo/shared-types";
Tablo Types
import type {
Tablo, // Tablo table type
TabloInsert, // Type for inserting tablos
TabloUpdate, // Type for updating tablos
UserTablo, // User's tablo view
CreateTablo, // Type for creating a tablo with events
} from "@xtablo/shared-types";
Stripe Types
import type {
StripeSubscription,
StripeProduct,
StripePrice,
SubscriptionStatus,
BillingInterval,
UserSubscriptionStatus,
PriceWithProduct,
SubscriptionWithDetails,
} from "@xtablo/shared-types";
Kanban Types
import type {
KanbanTask,
KanbanBoard,
KanbanColumn,
TaskStatus,
Priority,
TaskType,
KanbanTaskInsert,
KanbanTaskUpdate,
} from "@xtablo/shared-types";
Type Generation
Database types are generated from Supabase and should be updated when the schema changes:
# From the root of the monorepo
npx supabase gen types typescript --project-id YOUR_PROJECT_ID > packages/shared-types/src/database.types.ts
Structure
packages/shared-types/
├── src/
│ ├── database.types.ts # Supabase-generated types
│ ├── events.types.ts # Event-related types
│ ├── tablos.types.ts # Tablo-related types
│ ├── stripe.types.ts # Stripe integration types
│ ├── kanban.types.ts # Kanban board types
│ ├── utils.ts # Utility types
│ └── index.ts # Main export
├── package.json
├── tsconfig.json
└── README.md
Best Practices
- Import specific types: Use granular imports when possible to improve tree-shaking
- Type safety: Leverage utility types like
RemoveNullto enforce non-null values - Reusability: Define types here instead of duplicating them across apps
- Documentation: Add JSDoc comments for complex types
Scripts
# Type checking
pnpm typecheck
# Linting
pnpm lint
pnpm lint:fix
# Formatting
pnpm format
Integration with Apps
API (Node.js/Hono)
import type { Event, Tablo, Database } from "@xtablo/shared-types";
export function getEvents(): Promise<Event[]> {
// Implementation
}
Frontend (React)
import type { Event, UserTablo } from "@xtablo/shared-types";
function EventList({ events }: { events: Event[] }) {
// Component implementation
}
Expo (React Native)
import type { Event } from "@xtablo/shared-types";
const EventScreen = ({ event }: { event: Event }) => {
// Screen implementation
};
Contributing
When adding new types:
- Place them in the appropriate module file (e.g.,
events.types.ts) - Export them from
index.ts - Add documentation in this README
- Run type checking and linting before committing