Package Exports

jsq-ticket-type
jsq-ticket-type/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jsq-ticket-type) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

jsq-ticket-type

TypeScript type definitions for ticket system - microservices types. This package provides type definitions, interfaces, enums, and constants for consistent data structures between backend and frontend.

Struktur File

types/
├── index.ts          # Main export file
├── enums.ts          # All enums from backend
├── interfaces.ts     # Entity interfaces and common types
├── dtos.ts           # Data Transfer Objects for API calls
├── constants.ts      # Constants and configuration values
└── README.md         # This documentation

Penggunaan

Installation

npm install jsq-ticket-type

Import Types

// Import semua types
import * as TicketTypes from 'jsq-ticket-type';

// Import spesifik
import { UserRole, EventStatus, CreateEventDto } from 'jsq-ticket-type';

// Import dari file tertentu (jika diperlukan)
import { UserRole } from 'jsq-ticket-type/types/enums';
import { User, Event } from 'jsq-ticket-type/types/interfaces';
import { CreateUserDto } from 'jsq-ticket-type/types/dtos';
import { API_ENDPOINTS } from 'jsq-ticket-type/types/constants';

Contoh Penggunaan

1. Menggunakan Enums

import { UserRole, EventStatus } from 'jsq-ticket-type';

// Dalam component
const userRole = UserRole.ADMIN;
const eventStatus = EventStatus.PUBLISHED;

// Untuk dropdown options
const roleOptions = Object.values(UserRole).map(role => ({
  value: role,
  label: role.charAt(0) + role.slice(1).toLowerCase()
}));

2. Menggunakan Interfaces

import { User, Event, PaginatedResult } from './scripts/frontend/types';

// Type untuk state
interface UserState {
  currentUser: User | null;
  users: PaginatedResult<User>;
  loading: boolean;
}

// Type untuk props
interface EventCardProps {
  event: Event;
  onEdit: (event: Event) => void;
  onDelete: (id: string) => void;
}

3. Menggunakan DTOs

import { CreateEventDto, UpdateEventDto } from './scripts/frontend/types';

// Untuk form data
const createEvent = async (data: CreateEventDto) => {
  const response = await api.post('/events', data);
  return response.data;
};

// Untuk form validation
const validateEventForm = (data: Partial<CreateEventDto>) => {
  const errors: Partial<Record<keyof CreateEventDto, string>> = {};
  
  if (!data.title) {
    errors.title = 'Title is required';
  }
  
  if (!data.startDate) {
    errors.startDate = 'Start date is required';
  }
  
  return errors;
};

4. Menggunakan Constants

import { API_ENDPOINTS, STATUS_COLORS, VALIDATION } from './scripts/frontend/types';

// API calls
const fetchEvents = () => {
  return api.get(API_ENDPOINTS.EVENTS.BASE);
};

// Styling berdasarkan status
const getStatusColor = (status: string) => {
  return STATUS_COLORS[status] || STATUS_COLORS.PENDING;
};

// Form validation
const validatePassword = (password: string) => {
  return password.length >= VALIDATION.PASSWORD.MIN_LENGTH &&
         VALIDATION.PASSWORD.PATTERN.test(password);
};

File Descriptions

enums.ts

Berisi semua enum yang digunakan di backend:

UserRole - Role pengguna (admin, promotor, artist, user)
EventStatus - Status event (draft, published, cancelled, dll)
OrderStatus - Status pesanan
PaymentStatus - Status pembayaran
NotificationType - Tipe notifikasi
Dan lain-lain

interfaces.ts

Berisi interface untuk entitas dan tipe data umum:

User, Event, Ticket, Order, Payment - Entitas utama
PaginatedResult<T> - Hasil dengan pagination
ApiResponse<T> - Response API standar
JwtPayload - Payload JWT token
Dan lain-lain

dtos.ts

Berisi Data Transfer Objects untuk API calls:

CreateUserDto, UpdateUserDto - DTO untuk user operations
CreateEventDto, UpdateEventDto - DTO untuk event operations
CreateOrderDto - DTO untuk membuat pesanan
LoginDto - DTO untuk login
Dan lain-lain

constants.ts

Berisi konstanta dan konfigurasi:

API_ENDPOINTS - Endpoint API
PAGINATION - Konfigurasi pagination
VALIDATION - Aturan validasi
STATUS_COLORS - Warna untuk status
ERROR_MESSAGES - Pesan error
SUCCESS_MESSAGES - Pesan sukses
Dan lain-lain

Best Practices

1. Konsistensi Type

Selalu gunakan types yang sudah didefinisikan daripada membuat type baru:

// ✅ Good
import { User } from './scripts/frontend/types';
const user: User = { ... };

// ❌ Bad
interface MyUser {
  id: string;
  name: string;
  // ...
}

2. Validasi Form

Gunakan DTO types untuk validasi form:

import { CreateEventDto } from './scripts/frontend/types';

const validateForm = (data: Partial<CreateEventDto>): boolean => {
  // Validation logic
};

3. API Response Handling

Gunakan generic types untuk response handling:

import { ApiResponse, PaginatedResult, Event } from './scripts/frontend/types';

const fetchEvents = async (): Promise<ApiResponse<PaginatedResult<Event>>> => {
  // API call
};

4. Enum Usage

Gunakan enum values daripada string literals:

import { UserRole } from './scripts/frontend/types';

// ✅ Good
if (user.role === UserRole.ADMIN) { ... }

// ❌ Bad
if (user.role === 'admin') { ... }

Update Process

File-file ini harus diupdate setiap kali ada perubahan struktur data di backend:

Enums: Update ketika ada penambahan/perubahan enum values
Interfaces: Update ketika ada perubahan entity structure
DTOs: Update ketika ada perubahan API request/response format
Constants: Update ketika ada perubahan endpoint atau konfigurasi

Integration dengan Frontend Framework

React + TypeScript

import React from 'react';
import { Event, EventStatus } from './scripts/frontend/types';

interface EventListProps {
  events: Event[];
  onStatusChange: (id: string, status: EventStatus) => void;
}

const EventList: React.FC<EventListProps> = ({ events, onStatusChange }) => {
  // Component implementation
};

Vue 3 + TypeScript

import { defineComponent, PropType } from 'vue';
import { Event } from './scripts/frontend/types';

export default defineComponent({
  props: {
    event: {
      type: Object as PropType<Event>,
      required: true
    }
  },
  // Component implementation
});

Angular

import { Component, Input } from '@angular/core';
import { Event } from './scripts/frontend/types';

@Component({
  selector: 'app-event-card',
  templateUrl: './event-card.component.html'
})
export class EventCardComponent {
  @Input() event!: Event;
}

Troubleshooting

Common Issues

Import Errors: Pastikan path import sudah benar
Type Mismatch: Periksa apakah backend sudah update dengan struktur terbaru
Missing Types: Tambahkan type yang hilang ke file yang sesuai

Debugging

// Type checking
const user: User = {
  // TypeScript akan memberikan error jika ada field yang hilang
};

// Runtime validation (optional)
const isValidUser = (obj: any): obj is User => {
  return typeof obj.id === 'string' &&
         typeof obj.username === 'string' &&
         typeof obj.email === 'string';
};

Contributing

Ketika menambah atau mengubah types:

Pastikan konsisten dengan backend
Update dokumentasi jika diperlukan
Test dengan frontend application
Commit dengan pesan yang jelas

Version History

v1.1.0 - Updated enum values untuk konsistensi dengan database
- UserRole: Updated ke UPPERCASE values ('ADMIN', 'PROMOTOR', 'ARTIST', 'USER')
- ArtistGenre: Updated sesuai database enum (POP, ROCK, JAZZ, dll)
- Fixes enum mismatch antara TypeScript dan database
v1.0.0 - Initial export dari backend microservices
Includes: User, Event, Ticket, Order, Payment, Notification, Merchandise modules
Support untuk semua enum, interface, DTO, dan constants