@3rdshot/shared-packages

Comprehensive shared package containing constants, components, utilities, hooks, and types for all 3rdshot tournament applications.

Installation

npm install @3rdshot/shared-packages

Package Structure

@3rdshot/shared-packages/
├── src/
│   ├── utils/           # Constants, enums, utilities
│   ├── components/      # Shared React components
│   ├── hooks/          # Custom React hooks
│   ├── types.ts        # TypeScript interfaces
│   └── index.ts        # Main exports

Usage

🔧 Constants & Utilities

import { countries, getCountryByCode, Roles, MatchesStatus } from '@3rdshot/shared-packages';

// Countries for phone input
const CountrySelect = () => (
  <select>
    {countries.map((country) => (
      <option key={country.code} value={country.dial_code}>
        {country.flag} {country.dial_code}
      </option>
    ))}
  </select>
);

// Enums
if (user.role === Roles.Admin) {
  // Admin logic
}

const match = {
  status: MatchesStatus.InProgress,
  sport: SportsType.Pickleball
};

📦 Modular Imports

// Import specific modules
import { Constants, Types } from '@3rdshot/shared-packages';

// Or import directly from modules
import { countries } from '@3rdshot/shared-packages/utils';
import { Country } from '@3rdshot/shared-packages/types';

🧩 Components (Future)

// Will be available in future versions
import {
  PhoneLogin,
  OtpVerification,
  Layout,
  CountrySelect
} from '@3rdshot/shared-packages';

🎣 Hooks (Future)

// Will be available in future versions
import {
  useAuth,
  useCountries,
  useDebounce
} from '@3rdshot/shared-packages';

Available Exports

Current (v1.0.0)

Constants & Utilities

• countries - Array of country objects with ISO codes, dial codes, and flags
• getCountryByCode(code) - Get country by ISO code
• getCountryByDialCode(dialCode) - Get country by dial code
• getCountriesByName() - Get countries sorted alphabetically

Enums

• Roles - User role enum (Player, Admin, Organizer)
• MatchesStatus - Match status enum (Pending, InProgress, Completed)
• SportsType - Sports type enum (Pickleball, Paddle, Tennis, etc.)
• TournamentStatus - Tournament status enum (Draft, Active, Completed, Cancelled)

Types

• Country - Country object interface
• SelectOption - Generic select option interface

Future Additions

Components (Planned)

• PhoneLogin - Phone number input with country selection
• OtpVerification - OTP verification component
• Layout - Common application layout
• CountrySelect - Standalone country selector

Hooks (Planned)

• useAuth - Authentication state management
• useCountries - Country data management
• useDebounce - Input debouncing
• useLocalStorage - Local storage state

Utilities (Planned)

• Date formatting functions
• Validation helpers
• API utilities
• Format helpers

TypeScript Support

Full TypeScript support with comprehensive type definitions.

import { Country, Roles, MatchesStatus } from '@3rdshot/shared-packages';

const myCountry: Country = {
  code: 'IN',
  name: 'India',
  dial_code: '+91',
  flag: '🇮🇳'
};

const user: { role: Roles } = {
  role: Roles.Admin
};

Usage Across Applications

Tournament Management

import { countries, Roles } from '@3rdshot/shared-packages';
// Use in admin panels, user management

Match Management (DUPR Draw Master)

import { countries, SportsType } from '@3rdshot/shared-packages';
// Use in match creation, player management

Auction Management

import { countries, TournamentStatus } from '@3rdshot/shared-packages';
// Use in auction setup, bidding interface

Development Workflow

Adding New Utilities

1. Add to src/utils/ directory
2. Export from src/utils/index.ts
3. Update version and rebuild

Adding New Components

1. Add to src/components/ directory
2. Export from src/components/index.ts
3. Uncomment export in main src/index.ts

Adding New Hooks

1. Add to src/hooks/ directory
2. Export from src/hooks/index.ts
3. Uncomment export in main src/index.ts

Version Management

• Patch: Bug fixes, small updates (1.0.1)
• Minor: New features, new exports (1.1.0)
• Major: Breaking changes (2.0.0)

Repository Structure

This package is maintained within the tournament-management workspace at:

tournament_management/
├── shared-packages/
│   └── 3rdshot-shared-packages/
├── src/                    # Main tournament app
├── dupr-draw-master/      # Match management app
└── auction_management/    # Auction app