Design Sections: Customizable React UI Components for Sections

Description

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

Repository Structure

The repository is organized as follows:

.
├── dist/                 # Compiled and bundled output files
│   ├── index.cjs.js
│   ├── index.d.ts
│   ├── index.esm.js
│   └── (other build files)
├── src/                  # Source code for components and utilities
│   ├── components/
│   ├── index.ts
│   └── utils/
├── assets/               # Images and visual resources
│   ├── circle_prueba.svg
│   ├── prueba_ui1.jpg
├── .storybook/           # Storybook configuration for component development and testing
│   ├── main.ts
│   ├── preview.ts
├── package.json          # Project metadata and dependencies
├── rollup.config.js      # Rollup configuration
├── tsconfig.json         # TypeScript configuration file
└── README.md             # Project documentation

Installation

Ensure you have Node.js (v12 or higher) and a package manager like npm or yarn.

npm install design-sections

Or, if using yarn:

yarn add design-sections

Getting Started

Import the DesignManager component in your React application:

import { DesignManager } from 'design-sections';

function App() {
  return <DesignManager selectUI="UI1" propsUI={{ title: "Welcome", description: "Explore our features" }} />;
}

Configuration Options

The DesignManager component accepts two main props:

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

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

| Property | Type | Description | |----------------|---------|------------------------------------| | title | string | Main section title | | description | string | Section description text | | backgroundImage | string | URL for the background image | | buttonText | string | Call-to-action button text | | buttonAction | function | Function triggered on button click |

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

Common Use Cases

Simple Section:

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

Section with Text and Button:

<DesignManager 
  selectUI="UI1" 
  propsUI={{
    title: "Exclusive Offer",
    description: "Save up to 50%",
    buttonText: "Shop Now",
    backgroundImage: "path/to/offer.jpg",
    buttonAction: () => console.log("Button clicked")
  }}
/>

Testing & Quality

To run Storybook for development and testing:

npm run storybook

Troubleshooting

Issue: Background image not displaying

• Ensure the image URL is correct and accessible.
• Verify that the backgroundImage prop is properly passed to the component.

Issue: Button action not working

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

Issue: Responsive design issues

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

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

• Use browser developer tools to check for any CSS conflicts.

Data Flow

The Design Sections library follows a straightforward data flow:

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

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

Keywords

none