Examples

Practical examples of using degache.js in real-world applications.

Form Validation Example

This example shows how to validate a form with Tunisian-specific fields using degache.js.

import React, { useState } from 'react';
import { validateCIN, validatePhoneNumber, validateTaxID } from 'degachejs';

interface FormData {
  cin: string;
  phoneNumber: string;
  taxId: string;
}

interface FormErrors {
  cin?: string;
  phoneNumber?: string;
  taxId?: string;
}

export default function TunisianForm() {
  const [formData, setFormData] = useState<FormData>({
    cin: '',
    phoneNumber: '',
    taxId: '',
  });
  
  const [errors, setErrors] = useState<FormErrors>({});
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const validateForm = (): boolean => {
    const newErrors: FormErrors = {};
    
    // Validate CIN
    if (!validateCIN(formData.cin)) {
      newErrors.cin = 'Invalid CIN format. Must be 8 digits.';
    }
    
    // Validate phone number
    if (!validatePhoneNumber(formData.phoneNumber)) {
      newErrors.phoneNumber = 'Invalid phone number format.';
    }
    
    // Validate Tax ID
    if (!validateTaxID(formData.taxId)) {
      newErrors.taxId = 'Invalid Tax ID format.';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (validateForm()) {
      // Form is valid, proceed with submission
      console.log('Form submitted:', formData);
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label htmlFor="cin">CIN:</label>
        <input
          type="text"
          id="cin"
          name="cin"
          value={formData.cin}
          onChange={handleChange}
          className="border p-2 w-full"
        />
        {errors.cin && <p className="text-red-500">{errors.cin}</p>}
      </div>
      
      <div>
        <label htmlFor="phoneNumber">Phone Number:</label>
        <input
          type="text"
          id="phoneNumber"
          name="phoneNumber"
          value={formData.phoneNumber}
          onChange={handleChange}
          className="border p-2 w-full"
        />
        {errors.phoneNumber && <p className="text-red-500">{errors.phoneNumber}</p>}
      </div>
      
      <div>
        <label htmlFor="taxId">Tax ID:</label>
        <input
          type="text"
          id="taxId"
          name="taxId"
          value={formData.taxId}
          onChange={handleChange}
          className="border p-2 w-full"
        />
        {errors.taxId && <p className="text-red-500">{errors.taxId}</p>}
      </div>
      
      <button 
        type="submit" 
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Submit
      </button>
    </form>
  );
}

Phone Number Formatter Example

This example shows how to create a phone number input field with automatic formatting.

import React, { useState, useEffect } from 'react';
import { formatPhoneNumber, validatePhoneNumber, getCarrierInfo } from 'degachejs';

export default function PhoneNumberInput() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [formattedNumber, setFormattedNumber] = useState('');
  const [carrier, setCarrier] = useState<any>(null);
  const [isValid, setIsValid] = useState(false);
  
  useEffect(() => {
    // Only format and validate if there's input
    if (phoneNumber) {
      const cleaned = phoneNumber.replace(/D/g, '');
      setIsValid(validatePhoneNumber(cleaned));
      setFormattedNumber(formatPhoneNumber(cleaned));
      setCarrier(getCarrierInfo(cleaned));
    } else {
      setFormattedNumber('');
      setCarrier(null);
      setIsValid(false);
    }
  }, [phoneNumber]);
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // Allow only numbers and basic formatting characters
    const value = e.target.value.replace(/[^0-9+\s]/g, '');
    setPhoneNumber(value);
  };
  
  return (
    <div className="space-y-4">
      <div>
        <label htmlFor="phoneNumber" className="block mb-1">
          Phone Number:
        </label>
        <input
          type="tel"
          id="phoneNumber"
          value={phoneNumber}
          onChange={handleChange}
          placeholder="Enter phone number"
          className="border p-2 w-full rounded"
        />
      </div>
      
      {phoneNumber && (
        <div className="bg-gray-100 p-4 rounded">
          <p>
            <strong>Formatted:</strong> {formattedNumber || 'N/A'}
          </p>
          <p>
            <strong>Valid:</strong> {isValid ? '✅ Yes' : '❌ No'}
          </p>
          {carrier && (
            <p>
              <strong>Carrier:</strong> {carrier.name}
            </p>
          )}
        </div>
      )}
    </div>
  );
}

Currency Display Example

This example shows how to use the currency formatter in a product pricing component.

import React from 'react';
import { formatCurrency } from 'degachejs';

interface ProductProps {
  name: string;
  price: number;
  discountPercentage?: number;
}

export default function Product({ name, price, discountPercentage = 0 }: ProductProps) {
  const discountAmount = price * (discountPercentage / 100);
  const finalPrice = price - discountAmount;
  
  return (
    <div className="border p-4 rounded shadow-sm">
      <h3 className="text-lg font-bold">{name}</h3>
      
      <div className="mt-2">
        {discountPercentage > 0 ? (
          <>
            <p className="text-gray-500 line-through">
              {formatCurrency(price, { symbol: true })}
            </p>
            <p className="text-green-600 font-bold">
              {formatCurrency(finalPrice, { symbol: true })}
              <span className="ml-2 text-sm bg-green-100 text-green-800 px-2 py-1 rounded">
                {discountPercentage}% OFF
              </span>
            </p>
          </>
        ) : (
          <p className="font-bold">
            {formatCurrency(price, { symbol: true })}
          </p>
        )}
      </div>
      
      <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded w-full">
        Add to Cart
      </button>
    </div>
  );
}

// Usage
function ProductList() {
  const products = [
    { id: 1, name: 'Product A', price: 49.99 },
    { id: 2, name: 'Product B', price: 99.99, discountPercentage: 15 },
    { id: 3, name: 'Product C', price: 149.99, discountPercentage: 25 },
  ];
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {products.map(product => (
        <Product
          key={product.id}
          name={product.name}
          price={product.price}
          discountPercentage={product.discountPercentage}
        />
      ))}
    </div>
  );
}