OKY UI

Component library for OKY voucher cards and UI components built with React and Material-UI.

Installation

npm install oky-ui

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-dom @mui/material @emotion/react @emotion/styled

Usage

Basic Example

import { Card, theme } from 'oky-ui';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

function App() {
  const cardData = {
    brandArea: {
      country: {
        name: 'Guatemala',
        flag: '/images/gt.png',
        currencySymbol: '$',
      },
      partner: {
        name: "McDonald's",
        image: '/images/mcdonalds.png',
      },
      termsAndConditions: null,
      whatIncludes: {
        label: 'Qué incluye',
        description: '',
      },
    },
    productArea: {
      voucher: {
        title: 'Cajita Feliz',
        type: 'PRODUCT',
        amount: 25,
        labelImage: null,
        image: '/images/voucher-image.png',
      },
      instructions: {
        instructionsLeft: {
          label: 'Mostrar al cajero',
        },
        instructionsRight: {
          label: 'Como canjear',
        },
      },
    },
    codeArea: {
      expirationDate: new Date('2025-10-10'),
      code: {
        label: 'Código',
        code: 'X0oi233dfra',
      },
      hasBarcodeCode: false,
      hasQRCode: false,
    },
  };

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Card data={cardData} />
    </ThemeProvider>
  );
}

Individual Components

You can also use individual components:

import { CardTop, CardMiddle, CardBottom, SearchInput, Categories, Partners } from 'oky-ui';

CardMiddle with Custom Borders

import { CardMiddle } from 'oky-ui';

// Hide borders when using CardMiddle standalone
<CardMiddle 
  productArea={productArea} 
  brandArea={brandArea} 
  showBorders={false} 
/>

Components

Card

Complete voucher card component with top, middle, and bottom sections.

CardTop

Top section of the card showing brand information and country flag.

CardMiddle

Middle section showing product/voucher information. Supports showBorders prop to control decorative borders.

CardBottom

Bottom section showing codes, barcodes, and QR codes.

SearchInput

Search input component with clear functionality.

Categories

Category list component.

Partners

Partners list component.

Types

All TypeScript types are exported from the package:

import type { 
  CardData, 
  CardBrandArea, 
  CardProductArea, 
  CardCodeArea,
  Voucher,
  Partner,
  Country 
} from 'oky-ui';

Utils

Utility functions are also exported:

import { formatAmount, formatCode, formatExpirationDate } from 'oky-ui';

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Run Storybook
npm run storybook

# Lint
npm run lint

# Format code
npm run format

License

MIT