keys-for-all/keys-client-components/README.md

Keys for All Client Components

A React TypeScript component library for building the Keys for All web portal.

Features

• 🎨 Styled with styled-components
• 🔑 Complete key management UI components
• 🌐 Full API integration with keys-api
• 🎯 TypeScript for type safety
• 🪝 React Query for server state management
• 📝 Form handling with React Hook Form
• ✅ Runtime validation with Zod

Installation

npm install @keys-for-all/client-components

Usage

Basic Setup

import React from 'react';
import { 
  ThemeProvider,
  GlobalStyles,
  theme,
  ApiProvider,
  KeyList,
  useKeys 
} from '@keys-for-all/client-components';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <ApiProvider config={{ 
        baseURL: 'https://api.keysforall.com',
        onAuthError: () => console.log('Auth error')
      }}>
        <MyKeysPage />
      </ApiProvider>
    </ThemeProvider>
  );
}

function MyKeysPage() {
  const { data: keys, isLoading, error } = useKeys();
  
  return (
    <KeyList 
      keys={keys || []}
      loading={isLoading}
      error={error}
      onActivateKey={(key) => console.log('Activate', key)}
    />
  );
}

Available Components

Key Management

• KeyCard - Display individual key details
• KeyList - List of keys with actions
• KeyActivator - Form to activate keys
• KeyPurchase - Purchase flow (coming soon)
• KeyShare - Share keys with others (coming soon)

Common UI

• Button - Styled button with variants
• Card - Container component
• Input - Form inputs and textareas
• Badge - Status and type indicators

Hooks

• useKeys - Fetch user's keys
• useKey - Fetch single key details
• useValidateKey - Validate key before activation
• useActivateKey - Activate a key
• useShareKey - Share key with another user
• useFeatureAccess - Check feature access

Theme Customization

import { theme } from '@keys-for-all/client-components';

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: '#8B5CF6', // Change primary color
  }
};

<ThemeProvider theme={customTheme}>
  {/* Your app */}
</ThemeProvider>

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Run Storybook
npm run storybook

License

MIT