astrogators-shared-ui 0.2.3

package/README.md

@@ -0,0 +1,318 @@
+# @psytor/astrogators-shared-ui
+
+Shared UI components and utilities for Astrogator's Table applications.
+
+## Installation
+
+```bash
+npm install @psytor/astrogators-shared-ui
+```
+
+## Setup
+
+### 1. Initialize API Client
+
+In your application's entry point (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import { initializeApiClient } from '@psytor/astrogators-shared-ui';
+
+initializeApiClient({
+  baseURL: 'http://localhost:8000', // Your backend API URL
+  onUnauthorized: () => {
+    // Handle unauthorized (e.g., redirect to login)
+    window.location.href = '/login';
+  },
+});
+```
+
+### 2. Wrap Application with AuthProvider
+
+```tsx
+import { AuthProvider } from '@psytor/astrogators-shared-ui';
+
+function App() {
+  return (
+    <AuthProvider>
+      {/* Your app content */}
+    </AuthProvider>
+  );
+}
+```
+
+### 3. Import Global Styles
+
+```tsx
+import '@psytor/astrogators-shared-ui/styles';
+```
+
+## Components
+
+### Layout Components
+
+#### TopBar
+
+```tsx
+import { TopBar } from '@psytor/astrogators-shared-ui';
+
+<TopBar
+  logo={<div>Astrogator's Table</div>}
+  rightContent={<button>Login</button>}
+/>
+```
+
+#### Container
+
+```tsx
+import { Container } from '@psytor/astrogators-shared-ui';
+
+<Container maxWidth="lg" padding>
+  {/* Content */}
+</Container>
+```
+
+#### Footer
+
+```tsx
+import { Footer } from '@psytor/astrogators-shared-ui';
+
+<Footer />
+```
+
+### Form Components
+
+#### Button
+
+```tsx
+import { Button } from '@psytor/astrogators-shared-ui';
+
+<Button variant="primary" size="md" onClick={handleClick}>
+  Click Me
+</Button>
+
+<Button variant="outline" loading>
+  Loading...
+</Button>
+```
+
+#### Input
+
+```tsx
+import { Input } from '@psytor/astrogators-shared-ui';
+
+<Input
+  label="Email"
+  type="email"
+  placeholder="Enter your email"
+  required
+  error={errors.email}
+/>
+```
+
+#### Select
+
+```tsx
+import { Select } from '@psytor/astrogators-shared-ui';
+
+<Select
+  label="Choose Profile"
+  options={[
+    { value: 'standard', label: 'Standard' },
+    { value: 'speed', label: 'Speed Focus' },
+  ]}
+  placeholder="Select a profile"
+/>
+```
+
+### Display Components
+
+#### Card
+
+```tsx
+import { Card } from '@psytor/astrogators-shared-ui';
+
+<Card variant="elevated" chamfered chamferSize="md" padding="lg" hoverable>
+  <h3>The Mod Ledger</h3>
+  <p>Analyze your mods</p>
+</Card>
+```
+
+#### Badge
+
+```tsx
+import { Badge } from '@psytor/astrogators-shared-ui';
+
+<Badge variant="success">Active</Badge>
+<Badge variant="warning" size="sm">Beta</Badge>
+```
+
+#### Modal
+
+```tsx
+import { Modal } from '@psytor/astrogators-shared-ui';
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Login"
+  size="md"
+>
+  {/* Modal content */}
+</Modal>
+```
+
+### Feedback Components
+
+#### Loader
+
+```tsx
+import { Loader } from '@psytor/astrogators-shared-ui';
+
+<Loader size="md" variant="spinner" />
+<Loader size="lg" variant="dots" />
+```
+
+## Authentication
+
+### useAuth Hook
+
+```tsx
+import { useAuth } from '@psytor/astrogators-shared-ui';
+
+function MyComponent() {
+  const { user, isAuthenticated, login, logout, isLoading } = useAuth();
+
+  const handleLogin = async () => {
+    try {
+      await login({
+        email: 'user@example.com',
+        password: 'password',
+      });
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  };
+
+  if (isLoading) return <Loader />;
+
+  return (
+    <div>
+      {isAuthenticated ? (
+        <div>
+          <p>Welcome, {user?.username}!</p>
+          <button onClick={logout}>Logout</button>
+        </div>
+      ) : (
+        <button onClick={handleLogin}>Login</button>
+      )}
+    </div>
+  );
+}
+```
+
+## API Client
+
+### Using the API Client
+
+```tsx
+import { apiClient } from '@psytor/astrogators-shared-ui';
+
+// GET request
+const data = await apiClient.get('/api/v1/game-data/characters');
+
+// POST request
+const result = await apiClient.post('/api/v1/mod-ledger/evaluate/123456789', {
+  profile_name: 'standard',
+});
+```
+
+The API client automatically:
+- Injects JWT access token in Authorization header
+- Refreshes expired tokens
+- Retries failed requests after token refresh
+- Calls `onUnauthorized` callback on auth failure
+
+## TypeScript Types
+
+All TypeScript types are exported:
+
+```tsx
+import type {
+  User,
+  LoginRequest,
+  LoginResponse,
+  ParsedMod,
+  ModEvaluation,
+  ApiError,
+} from '@psytor/astrogators-shared-ui';
+```
+
+## CSS Variables
+
+Customize the design system by overriding CSS variables:
+
+```css
+:root {
+  --color-primary: #1a73e8;
+  --color-secondary: #34a853;
+  --font-primary: 'Your Font', sans-serif;
+  --spacing-md: 1rem;
+  --chamfer-size: 8px;
+}
+```
+
+## Chamfered Boxes
+
+Use the chamfered box effect on any element:
+
+```tsx
+<div className="chamfered-box">
+  {/* Content with cut corners */}
+</div>
+
+<div className="chamfered-box-lg">
+  {/* Large chamfered corners */}
+</div>
+
+<div className="chamfered-box-sm">
+  {/* Small chamfered corners */}
+</div>
+```
+
+Or use the Card component:
+
+```tsx
+<Card chamfered chamferSize="lg">
+  {/* Content */}
+</Card>
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build library
+npm run build
+
+# Type check
+npm run type-check
+```
+
+## Publishing
+
+```bash
+# Bump version
+npm version patch  # or minor, or major
+
+# Build
+npm run build
+
+# Publish to GitHub Packages
+npm publish
+```
+
+## License
+
+MIT

package/dist/components/display/Badge.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Badge component
+ * Small label for status, tags, or categories
+ */
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/display/Card.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+export interface CardProps {
+    children: React.ReactNode;
+    variant?: 'default' | 'elevated' | 'outline';
+    chamfered?: boolean;
+    chamferSize?: 'sm' | 'md' | 'lg';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+    className?: string;
+    onClick?: () => void;
+}
+/**
+ * Card component
+ * Container for content with optional chamfered corners
+ */
+export declare const Card: React.FC<CardProps>;

package/dist/components/display/Modal.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    closeOnOverlayClick?: boolean;
+    className?: string;
+}
+/**
+ * Modal component
+ * Overlay dialog for focused user interaction
+ */
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/display/index.d.ts

@@ -0,0 +1,6 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';

package/dist/components/feedback/Loader.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export interface LoaderProps {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'spinner' | 'dots';
+    className?: string;
+}
+/**
+ * Loader component
+ * Loading indicator with spinner or dots animation
+ */
+export declare const Loader: React.FC<LoaderProps>;

package/dist/components/feedback/index.d.ts

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export type { LoaderProps } from './Loader';

package/dist/components/forms/AllyCodeDropdown.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export interface AllyCodeDropdownProps {
+    onAllyCodeSelected?: (allyCode: string | null) => void;
+    className?: string;
+}
+/**
+ * AllyCodeDropdown component
+ * Dropdown for selecting and managing saved ally codes
+ * Shows all saved codes with player names, allows quick switching
+ */
+export declare const AllyCodeDropdown: React.FC<AllyCodeDropdownProps>;

package/dist/components/forms/Button.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Button component
+ * Reusable button with multiple variants and sizes
+ */
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/forms/Input.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    className?: string;
+}
+/**
+ * Input component
+ * Text input field with label, error, and helper text support
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/Select.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    options: SelectOption[];
+    placeholder?: string;
+    fullWidth?: boolean;
+    className?: string;
+}
+/**
+ * Select component
+ * Dropdown select with label, error, and helper text support
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/forms/index.d.ts

@@ -0,0 +1,8 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+export { Input } from './Input';
+export type { InputProps } from './Input';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+export { AllyCodeDropdown } from './AllyCodeDropdown';
+export type { AllyCodeDropdownProps } from './AllyCodeDropdown';

package/dist/components/layout/Container.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface ContainerProps {
+    children: React.ReactNode;
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    padding?: boolean;
+    className?: string;
+}
+/**
+ * Container component
+ * Centers content and applies max-width constraints
+ */
+export declare const Container: React.FC<ContainerProps>;

package/dist/components/layout/Footer.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface FooterProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Footer component
+ * Global footer shown across all applications
+ */
+export declare const Footer: React.FC<FooterProps>;

package/dist/components/layout/TopBar.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface TopBarProps {
+    logo?: React.ReactNode;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    className?: string;
+}
+/**
+ * TopBar component
+ * Global navigation bar shown across all applications
+ */
+export declare const TopBar: React.FC<TopBarProps>;

package/dist/components/layout/index.d.ts

@@ -0,0 +1,6 @@
+export { Container } from './Container';
+export type { ContainerProps } from './Container';
+export { TopBar } from './TopBar';
+export type { TopBarProps } from './TopBar';
+export { Footer } from './Footer';
+export type { FooterProps } from './Footer';

package/dist/contexts/AuthContext.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { User, LoginRequest, RegisterRequest, ForgotPasswordRequest, ResetPasswordRequest, ResendVerificationRequest, AllyCode, AllyCodeMigrationPrompt } from '../types';
+import { StoredAllyCode } from '../services/allyCodeStorage';
+
+export interface AuthContextValue {
+    user: User | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    login: (credentials: LoginRequest) => Promise<void>;
+    register: (data: RegisterRequest) => Promise<void>;
+    logout: () => void;
+    refreshUser: () => Promise<void>;
+    forgotPassword: (data: ForgotPasswordRequest) => Promise<string>;
+    resetPassword: (data: ResetPasswordRequest) => Promise<string>;
+    resendVerification: (data: ResendVerificationRequest) => Promise<string>;
+    allyCodes: AllyCode[] | StoredAllyCode[];
+    selectedAllyCode: string | null;
+    isLoadingAllyCodes: boolean;
+    fetchAllyCodes: () => Promise<void>;
+    addAllyCode: (allyCode: string) => Promise<void>;
+    removeAllyCode: (allyCodeId: number | string) => Promise<void>;
+    selectAllyCode: (allyCode: string | null) => void;
+    updateAllyCodeLastUsed: (allyCodeId: number | string) => Promise<void>;
+    migrationPrompt: AllyCodeMigrationPrompt;
+    dismissMigrationPrompt: () => void;
+    migrateLocalStorageCodes: () => Promise<void>;
+}
+export interface AuthProviderProps {
+    children: React.ReactNode;
+}
+/**
+ * AuthProvider
+ * Provides authentication state and methods to the entire application
+ */
+export declare const AuthProvider: React.FC<AuthProviderProps>;
+/**
+ * useAuth hook
+ * Access authentication state and methods
+ */
+export declare const useAuth: () => AuthContextValue;

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+
+export { Container, TopBar, Footer } from './components/layout';
+export type { ContainerProps, TopBarProps, FooterProps } from './components/layout';
+export { Button, Input, Select, AllyCodeDropdown } from './components/forms';
+export type { ButtonProps, InputProps, SelectProps, SelectOption, AllyCodeDropdownProps } from './components/forms';
+export { Card, Badge, Modal } from './components/display';
+export type { CardProps, BadgeProps, ModalProps } from './components/display';
+export { Loader } from './components/feedback';
+export type { LoaderProps } from './components/feedback';
+export { AuthProvider, useAuth } from './contexts/AuthContext';
+export type { AuthContextValue, AuthProviderProps } from './contexts/AuthContext';
+export { ApiClient, apiClient, initializeApiClient } from './services/api';
+export type { ApiClientConfig } from './services/api';
+export { getAccessToken, setAccessToken, removeAccessToken, getRefreshToken, setRefreshToken, removeRefreshToken, setTokens, clearTokens, isAuthenticated, } from './services/auth';
+export { getAllyCodesFromStorage, saveAllyCodeToStorage, removeAllyCodeFromStorage, updateAllyCodeLastUsed, getSelectedAllyCode, setSelectedAllyCode, clearAllyCodes, } from './services/allyCodeStorage';
+export type { StoredAllyCode } from './services/allyCodeStorage';
+export { formatAllyCode, unformatAllyCode } from './utils/formatAllyCode';
+export type { User, LoginRequest, LoginResponse, RegisterRequest, RegisterResponse, RefreshTokenRequest, RefreshTokenResponse, ForgotPasswordRequest, ForgotPasswordResponse, ResetPasswordRequest, ResetPasswordResponse, VerifyEmailRequest, VerifyEmailResponse, ResendVerificationRequest, ResendVerificationResponse, AllyCode, AllyCodeCreate, AllyCodeListResponse, AllyCodeMigrationPrompt, ApiResponse, ApiError, PaginatedResponse, ModStat, ParsedMod, ModListResponse, EvaluationScores, ModEvaluation, EvaluationRequest, EvaluationResponse, } from './types';