duhkha-wave-test

Wave UI Components

A comprehensive React UI component library built with TypeScript, Tailwind CSS, and modern web standards. This library provides a collection of reusable components designed for content management systems and dynamic layouts.

Environment Setup

To configure the content URL for fetching JSON data, create a .env file in the root directory:

# Content URL for fetching JSON data
VITE_CONTENT_URL=http://localhost:3000

The app will fetch JSON content from {CONTENT_URL}/src/content/pages/adi.json and process image URLs to use {CONTENT_URL}/public/images/uploads/ as the base path.

CORS Handling

To avoid CORS issues when fetching content from a different domain, the app uses a Vite proxy configuration. Requests to /content/* are automatically proxied to your content server. This means:

• Your content server doesn't need to configure CORS headers
• The app makes requests to the same origin (localhost:5173) during development
• The proxy handles forwarding requests to your content server

Currently, two official plugins are available:

npm install bloomteq-wave

📦 Package Details

• Version: 1.0.15
• React: ^19 (peer dependency)
• TypeScript: Full TypeScript support with included type definitions
• Styling: Tailwind CSS ^4.1.8
• Build: ESM and CommonJS support

🎯 Features

• ✅ 35+ Production-ready Components - From hero banners to complex carousels
• ✅ TypeScript First - Complete type safety and IntelliSense support
• ✅ Tailwind CSS - Modern utility-first styling approach
• ✅ CMS Integration - Built for content management systems with window global access
• ✅ Layout Renderer - Dynamic component rendering from configuration
• ✅ Responsive Design - Mobile-first approach with responsive utilities
• ✅ Testing Ready - Comprehensive test suite with Jest and Playwright
• ✅ Storybook Documentation - Interactive component documentation

📖 Quick Start

Basic Usage

import { LayoutRenderer } from "bloomteq-wave";
import "bloomteq-wave/dist/index.css";

const config = [
  {
    type: "herobanner",
    props: {
      title: "Welcome to Our Platform",
      subtitle: "Build amazing experiences",
    },
  },
  {
    type: "cta",
    props: {
      text: "Get Started",
      url: "/signup",
    },
  },
];

function App() {
  return <LayoutRenderer config={config} />;
}

Individual Component Import

import { HeroBannerComponent, CTAComponent } from "bloomteq-wave";
import "bloomteq-wave/dist/index.css";

function MyPage() {
  return (
    <div>
      <HeroBannerComponent
        title="Hello World"
        subtitle="Welcome to our platform"
      />
      <CTAComponent text="Learn More" url="/about" />
    </div>
  );
}

🧩 Available Components

Layout & Navigation

• HeroBanner - Main page hero sections
• HeroWithImage - Hero sections with background images
• HeroBlurb - Compact hero components
• CTA - Call-to-action buttons and sections

Content Display

• ArticlesSection - Article listings and grids
• FeatureGrid - Feature showcase grids
• Testimonials - Customer testimonial sections
• FAQ - Frequently asked questions
• Notification - Alert and notification components

Interactive Components

• ColorfulCarousel - Image and content carousels
• FullWidthCarousel - Full-width sliding components
• PodcastCarousel - Podcast episode displays
• Filters - Content filtering interfaces
• Calculator - Interactive calculation tools

Partnership & Business

• PartnershipSpotlight - Partner showcases
• PartnershipGrid - Partner directory displays
• PartnershipAccounting - Business partnership tools
• CaseStudy - Case study presentations

Utilities

• StepByStep - Process and tutorial guides
• HtmlCssRenderer - Custom HTML/CSS rendering
• PromoComponent - Promotional content blocks

🔧 TypeScript Support

The library includes comprehensive TypeScript definitions:

import type { LayoutConfig, ComponentType, BaseConfig } from 'bloomteq-wave';

const myConfig: LayoutConfig = [
  {
    type: 'herobanner',
    props: {
      title: string;
      subtitle?: string;
    },
    className?: string;
    style_object?: string;
  }
];

🎨 Styling

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    "react-x": reactX,
    "react-dom": reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules,
  },
});

Custom Styling

Components accept className props for custom styling and styleObject for theme variants.

🌐 CMS Integration

For CMS integration, components are globally available via window.bloomteqWave:

// Access individual components
window.bloomteqWave.HeroBannerComponent;
window.bloomteqWave.CTAComponent;

// Access the layout renderer
window.bloomteqWave.LayoutRenderer;

// Access component map
window.bloomteqWave.componentMap;

📱 Responsive Design

All components are built with mobile-first responsive design principles using Tailwind CSS breakpoints:

• sm: - 640px and up
• md: - 768px and up
• lg: - 1024px and up
• xl: - 1280px and up

🧪 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Run E2E tests
npm run test:e2e

# Build library
npm run build-dist

# Run Storybook
npm run storybook

📚 Documentation

• Storybook: Interactive component documentation
• TypeScript: Full type definitions included
• Testing: Comprehensive test suite with Jest and Playwright

🤝 Dependencies

Peer Dependencies

• React ^19
• React DOM ^19

Key Dependencies

• Tailwind CSS ^4.1.8
• React Icons ^5.5.0
• Day.js ^1.11.13
• Embla Carousel React ^8.6.0
• React Markdown ^10.1.0

📄 License

This package is part of the Wave UI system.

🚀 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)