# Design Banners: Customizable React UI Components for Banners

Design Banners is a flexible React library that provides customizable UI components for creating visually appealing banners. It offers a centralized design management system with multiple pre-built UI layouts, making it easy to integrate and customize banners in your React applications.

## Repository Structure

The repository is organized as follows:

- `src/`: Contains the source code for the components and utilities.
  - `components/`: Houses the main components and individual UI designs.
  - `utils/`: Includes utility functions and default props.
- `dist/`: Contains the compiled and bundled output files.
- `rollup.config.js`: Configuration file for Rollup, the bundler used in this project.
- `tsconfig.json`: TypeScript configuration file.
- `.storybook/`: Storybook configuration for component development and testing.

Key files:
- `src/index.tsx`: Main entry point for the library.
- `src/components/DesignManager.tsx`: Central component for managing different UI designs.
- `package.json`: Project metadata and dependencies.

## Usage Instructions

### Installation

To install Design Banners in your project, run:

```bash
npm install @misnpm/design-banners

Ensure you have React 16.8+ installed in your project.

Getting Started

Import the DesignManager component in your React application:

import { DesignManager } from '@misnpm/design-banners';

Use the DesignManager component in your JSX, specifying the desired UI and props:

<DesignManager 
  selectUI="UI1" 
  propsUI={{
    title: "Welcome",
    subtitle: "To Our Website",
    description: "Explore our amazing features",
    buttonText: "Get Started",
    backgroundImage: "path/to/your/image.jpg"
  }}
/>

Configuration Options

The DesignManager component accepts two main props:

• selectUI: Specifies which UI design to use (e.g., "UI", "UI1", "UI2", "UI3").
• propsUI: An object containing the props for the selected UI design.

Each UI design has its own set of configurable props, including:

• title: Main title text
• subtitle: Subtitle text
• description: Descriptive text
• backgroundImage: URL for the background image
• buttonText: Text for the call-to-action button
• buttonColor: Background color of the button
• buttonTextColor: Text color of the button
• buttonAction: Function to be called when the button is clicked

Refer to the individual UI component files for a complete list of available props.

Common Use Cases

1. Simple Banner:

<DesignManager 
  selectUI="UI" 
  propsUI={{
    backgroundImage: "path/to/banner-image.jpg"
  }}
/>

2. Banner with Text and Button:

<DesignManager 
  selectUI="UI1" 
  propsUI={{
    title: "Summer Sale",
    description: "Get 50% off on all items",
    buttonText: "Shop Now",
    backgroundImage: "path/to/sale-image.jpg",
    buttonAction: () => console.log("Button clicked")
  }}
/>

3. Complex Banner with Multiple Elements:

<DesignManager 
  selectUI="UI3" 
  propsUI={{
    logo: "path/to/logo.png",
    title: "New Product Launch",
    subtitle: "Introducing",
    description: "Experience the future of technology",
    buttonText: "Learn More",
    backgroundImage: "path/to/product-bg.jpg",
    secondImage: "path/to/product-image.png"
  }}
/>

Testing & Quality

To run tests for the Design Banners library, use the following command:

npm test

This will execute the test suite and provide feedback on the components' functionality.

Troubleshooting

1. Issue: Background image not displaying

   • Ensure the image URL is correct and accessible.
   • Check if the image format is supported by the browser.
   • Verify that the backgroundImage prop is correctly passed to the component.

2. Issue: Button action not working

   • Confirm that the buttonAction prop is a valid function.
   • Check the browser console for any JavaScript errors.

3. Issue: Responsive design issues

   • Ensure that the viewport meta tag is set correctly in your HTML:

     <meta name="viewport" content="width=device-width, initial-scale=1" />

   • Verify that you're using the latest version of the library.

For more detailed debugging:

• Enable React Developer Tools in your browser to inspect component props and state.
• Use browser developer tools to check for any CSS conflicts or layout issues.

Data Flow

The Design Banners library follows a simple data flow:

1. The user selects a UI design and provides props through the DesignManager component.
2. DesignManager determines the appropriate UI component based on the selectUI prop.
3. The selected UI component receives the props and renders the banner accordingly.
4. User interactions (e.g., button clicks) trigger the corresponding actions defined in the props.

[User Input] -> [DesignManager] -> [Selected UI Component] -> [Rendered Banner]
     ^                                       |
     |                                       |
     +---------------------------------------+
              (User Interaction)

Note: The DesignManager acts as a central hub, allowing for easy switching between different banner designs without changing the parent component's implementation. ```