icreon-component-accelerator-test

v0.1.27

Published

20 days ago

A comprehensive React component library that works with both React.js and Next.js

0High
0Medium
0Low

kaushik.radadiya

react nextjs reactjs components typescript ui-library component-library

Icreon Component Accelerator

A comprehensive React component library that works with both React.js and Next.js, providing production-ready UI components for modern web applications. This library includes a collection of reusable, customizable components designed for building scalable and maintainable user interfaces.

📦 Installation

npm install @icreon/component-accelerator
# or
yarn add @icreon/component-accelerator
# or
pnpm add @icreon/component-accelerator

🎯 Features

✅ TypeScript Support - Full TypeScript definitions included
✅ Fully Customizable - Extensive prop options for styling and behavior
✅ Accessible - Built with accessibility best practices, 100% WCAG 2.1 compliant
✅ Responsive - Mobile-first design approach
✅ Theme Support - Light and dark theme variants
✅ Universal Compatibility - Works with both React.js and Next.js projects
✅ Next.js Optimized - Optional Next.js Image and Link component support

♿ Accessibility

This component library is 100% accessible and fully compliant with WCAG 2.1 Level AA standards. All components have been tested and verified using BrowserStack Accessibility Scanner.

📊 View Detailed Accessibility Report on BrowserStack

The report includes:

Detailed issue breakdown by severity
WCAG guideline references
Component-level accessibility analysis
Recommendations and best practices

Accessibility Fixes Applied

The following accessibility improvements have been implemented:

Select Element Labels - Added aria-label attributes to all select elements
List Structure - Fixed navigation lists to use proper <li> elements
Skip to Main Content - Implemented keyboard-accessible skip link
Navigation Landmarks - Wrapped navigation menus in proper <nav> landmarks
Color Contrast - Ensured all text elements have sufficient contrast ratios
Semantic HTML - Improved semantic structure throughout components

📚 Documentation

For interactive documentation, live examples, and detailed component usage, visit our Storybook documentation: Storybook Documentation

⚙️ Setup & Configuration

React.js vs Next.js Compatibility

This library is designed to work with both React.js and Next.js projects:

React.js projects: Components use standard HTML elements (<img>, <a>) by default
Next.js projects: You can optionally pass Next.js components (next/image, next/link) for optimized performance

Next.js Configuration (Optional)

If you're using this library in a Next.js project and want to use Next.js optimized components, add this to your next.config.js or next.config.ts:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@icreon/component-accelerator'],
};

module.exports = nextConfig;

Or in TypeScript:

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  transpilePackages: ['@icreon/component-accelerator'],
};

export default nextConfig;

Note: This configuration is only needed if you want to use Next.js optimized components. The library works without it using standard HTML elements.

CSS Modules

This library includes pre-compiled CSS modules. All styles are compiled during the build process, so no additional configuration is required. The CSS files are self-contained and work with any React.js or Next.js project without requiring Tailwind CSS or Sass to be installed in your project.

Required CSS Imports

When using components that include Swiper functionality, you must import Swiper CSS in your app's root layout. The following components use Swiper internally:

HeroHeaderCarousel - Hero header with carousel/slider functionality
Slider - Slider component with navigation and pagination
ImageSwiper - Direct Swiper component (if used standalone)

// app/layout.tsx (Next.js 13+ App Router)
import 'swiper/swiper-bundle.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Or for Pages Router:

// pages/_app.tsx
import 'swiper/swiper-bundle.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

🧩 Core Components

Layout Components

HeroHeader

Hero header component with customizable image alignment, CTA buttons, and spacing options.

import { HeroHeader } from '@icreon/component-accelerator';
import { BUTTON_CTA_TYPE, HERO_IMAGE_ALIGNMENT } from '@icreon/component-accelerator';

<HeroHeader
  eyebrow="At the Forefront"
  title="Strategies for value, resilience, and performance"
  description="Your description here"
  links={[...]}
  image={{ src: "...", alt: "...", width: 1920, height: 1080 }}
  imageAlignment={HERO_IMAGE_ALIGNMENT.RIGHT}
/>

HeroHeaderCarousel

Hero header with carousel/slider functionality supporting multiple slides with customizable alignment.

import { HeroHeaderCarousel } from '@icreon/component-accelerator';

<HeroHeaderCarousel
  eyebrow="Tagline"
  title="Main Title"
  description="Description text"
  slides={[...]}
  sliderAlignment={SLIDER_HERO_IMAGE_ALIGNMENT.RIGHT}
/>

Header

Comprehensive navigation header with mega menu, dropdown navigation, trending content, and mobile responsive design.

import { Header } from '@icreon/component-accelerator';

<Header
  logo={{ src: "...", alt: "Logo" }}
  navigationLinks={[...]}
  ctaButtons={[...]}
/>

Footer

Footer component with company information, navigation links, social media links, and copyright text.

import { Footer } from '@icreon/component-accelerator';

<Footer
  logo={{ src: "...", alt: "Logo" }}
  primaryLinks={[...]}
  secondaryLinks={[...]}
  socialMediaLinks={[...]}
  contact="..."
  address="..."
  copyrightText="..."
/>

Sidebar

Mobile sidebar component with hamburger menu toggle, navigation links, contact information, and social media links.

import { Sidebar } from '@icreon/component-accelerator';

<Sidebar
  logo={{ src: "...", alt: "Logo" }}
  links={[...]}
  socialMediaLinks={[...]}
  contact="..."
  address="..."
/>

Content Components

Accordion

Collapsible content sections with customizable styling and alignment options.

import { Accordion } from '@icreon/component-accelerator';

<Accordion
  eyebrow="FAQs"
  title="Frequently asked questions"
  description="Ask us if you have any query"
  accordionItems={[...]}
  leftAligned={true}
/>

Tabs

Content displayed in tabbed sections with customizable alignment, borders, and styling options.

import { Tabs } from '@icreon/component-accelerator';

<Tabs
  eyebrow="Business"
  title="The right lineup"
  description="Description text"
  tabItems={[...]}
  mainLinks={[...]}
  showBorder={true}
  alignLeft={true}
/>

GridList

Grid layout component displaying a collection of grid items with customizable layout, borders, and styling options.

import { GridList } from '@icreon/component-accelerator';

<GridList
  eyebrow="Why Choose us"
  title="Compare it all"
  description="Description text"
  gridItems={[...]}
  showIcons={true}
  showBorder={true}
/>

ContentLists

Content lists component with search, sort functionality, and customizable styling options.

import { ContentLists } from '@icreon/component-accelerator';

<ContentLists
  eyebrow="Tagline"
  title="Content List Heading"
  description="Description text"
  tiles={[...]}
  sortOptions={[...]}
  showBorder={true}
/>

Media Components

FeaturedMedia

Featured media component displaying content with media (image or video) and text, with customizable alignment.

import { FeaturedMedia } from '@icreon/component-accelerator';

<FeaturedMedia
  eyebrow="Digital Commerce"
  title="Optimizing Retail"
  shortDescription="Description text"
  mediaType="Video"
  mediaAlignment="Media Right"
  videoType="Wistia"
  wistiaEmbedCode="..."
/>

Media

Media component for displaying images or videos with optional captions, supporting Wistia and YouTube.

import { Media } from '@icreon/component-accelerator';

<Media
  caption="Image caption"
  mediaType="Image"
  image={{ src: "...", alt: "...", width: 800, height: 600 }}
/>

Slider

Slider component with two variants (Default and DateCard), supporting images, Wistia videos, and YouTube videos.

import { Slider } from '@icreon/component-accelerator';

<Slider
  eyebrow="Tagline"
  title="Events"
  description="Description text"
  items={[...]}
  variant="default"
  showBorder={false}
/>

CTA Components

CTALinkList

CTA link list component displaying a title, description, and call-to-action buttons with customizable alignment.

import { CTALinkList } from '@icreon/component-accelerator';

<CTALinkList
  title="How we do it"
  description="Experience the transformation"
  ctaLinks={[...]}
  leftAligned={true}
/>

🔧 Shareable Components

Button & ButtonGroup

Versatile button component with multiple variants and sizes. ButtonGroup handles multiple buttons/links.

import { Button, ButtonGroup } from '@icreon/component-accelerator';

<Button variant="primary" size="md">Click me</Button>

<ButtonGroup
  links={[...]}
  justifyContent="flex-start"
  darkTheme={false}
/>

Image

Universal image component that works with both React.js and Next.js. Uses standard HTML <img> by default, or accepts a custom Image component (e.g., Next.js Image).

Default usage (works in any React app):

import { Image } from '@icreon/component-accelerator';

<Image
  src="/image.jpg"
  alt="Description"
  width={800}
  height={600}
  priority={false}
/>

With Next.js Image component (for optimized images):

import { Image } from '@icreon/component-accelerator';
import NextImage from 'next/image';

<Image
  component={NextImage}
  src="/image.jpg"
  alt="Description"
  width={800}
  height={600}
  priority={true}
/>

Link

Universal link component that works with both React.js and Next.js. Uses standard HTML <a> by default, or accepts a custom Link component (e.g., Next.js Link).

Default usage (works in any React app):

import { Link } from '@icreon/component-accelerator';

<Link href="/about" target="_self">
  About Us
</Link>

With Next.js Link component (for client-side routing):

import { Link } from '@icreon/component-accelerator';
import NextLink from 'next/link';

<Link component={NextLink} href="/about">
  About Us
</Link>

Note: External links (starting with http, mailto:, or tel:) always use HTML anchor tags regardless of the component prop.

RichText / Text

Flexible text component for rendering plain text, React children, or HTML content.

import { Text, RichText } from '@icreon/component-accelerator';

<Text tag="h1">Heading Text</Text>

<RichText
  content="<p>HTML content</p>"
  asHtml={true}
  tag="div"
/>

ImageSwiper (SwiperSlider)

Swiper slider component built on Swiper.js with navigation, pagination, autoplay, and various effects.

Note: This component is used internally by HeroHeaderCarousel and Slider components. If you're using those components, you don't need to use ImageSwiper directly, but you still need to import Swiper CSS.

Important: You must import Swiper CSS in your app's root layout. See Required CSS Imports in the Setup & Configuration section.

import { ImageSwiper } from '@icreon/component-accelerator';
import { SwiperSlide } from 'swiper/react';

<ImageSwiper
  slideContext={
    <>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
    </>
  }
  slidesPerView={1}
  navigation={true}
  pagination={true}
/>

📋 Requirements

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

Note: next is optional. The library works with both React.js and Next.js projects. If you're using Next.js and want to use Next.js optimized components (next/image, next/link), you can pass them as props to the Image and Link components.

Additional Dependencies

For full functionality, you may need:

swiper - For SwiperSlider component (automatically installed)

🔨 Usage

Basic Example

import { Accordion } from '@icreon/component-accelerator';
import { BUTTON_CTA_TYPE } from '@icreon/component-accelerator';

function App() {
  const accordionItems = [
    {
      id: "item-1",
      title: "What we do",
      description: "Description text here"
    }
  ];

  return (
    <Accordion
      title="Frequently asked questions"
      accordionItems={accordionItems}
      ctaLink={{
        href: "/contact",
        text: "Contact Us",
        ctaType: BUTTON_CTA_TYPE.BUTTON_CTA
      }}
    />
  );
}

TypeScript Support

All components are fully typed with TypeScript. Types are exported from the main package:

import type { 
  AccordionProps, 
  AccordionItem,
  HeroHeaderProps,
  GridListProps
} from '@icreon/component-accelerator';

📁 Component Structure

src/
├── components/          # Core components
│   ├── Accordion/
│   ├── ContentLists/
│   ├── CTALinkList/
│   ├── FeaturedMedia/
│   ├── Footer/
│   ├── GridList/
│   ├── Header/
│   ├── HeroHeader/
│   ├── HeroHeaderCarousel/
│   ├── Media/
│   ├── Sidebar/
│   ├── Slider/
│   └── Tabs/
└── shareable/           # Reusable utility components
    ├── Button/
    ├── Image/
    ├── Link/
    ├── RichText/
    └── SwiperSlider/

🎨 Styling

Components use:

SCSS Modules for component-specific styles
Tailwind CSS for utility classes
CSS Custom Properties for theme customization

🔗 Enums & Utilities

The package exports helpful enums and utilities:

// Button types
BUTTON_CTA_TYPE.BUTTON_CTA
BUTTON_CTA_TYPE.LINK

// Image alignments
HERO_IMAGE_ALIGNMENT.LEFT
HERO_IMAGE_ALIGNMENT.RIGHT
HERO_IMAGE_ALIGNMENT.BACKGROUND

// Slider alignments
SLIDER_HERO_IMAGE_ALIGNMENT.LEFT
SLIDER_HERO_IMAGE_ALIGNMENT.RIGHT
SLIDER_HERO_IMAGE_ALIGNMENT.BACKGROUND

// Utility function
import { cn } from '@icreon/component-accelerator';
// Merges classNames utility

📖 Storybook

Comprehensive Storybook documentation is available for all components, including:

Interactive examples
Prop documentation
Usage guidelines
Visual testing

Visit the Storybook documentation to explore all components in detail.

🤝 Contributing

This is a private package maintained by Icreon. For issues, questions, or contributions, please contact the maintainers.

📝 License

[Your License Here]

🔄 Version

Current version: 0.1.0

📧 Support

For support and questions, please contact the Icreon development team.

Built with ❤️ by Icreon