@misnpm/design-blog

Design Blog Manager Component Library

This project provides a flexible and customizable Design Blog Manager component for React applications. It allows developers to easily integrate and style blog post displays with various UI designs.

The Design Blog Manager is a versatile component that can render different UI layouts for blog posts. It's built with TypeScript and React, offering a type-safe and component-based approach to displaying blog content. The library is bundled using Rollup, ensuring compatibility with various module systems.

Key features include:

• Multiple UI design options for blog post displays
• Customizable styling through props
• TypeScript support for type safety
• Storybook integration for component development and testing
• Easy integration with existing React projects
• Edit mode for managing blog posts
• Color customization for various elements
• Add and delete functionality for blog posts

Repository Structure

.
├── dist
│   ├── components
│   │   ├── buttons
│   │   ├── desings
│   │   │   ├── cards
│   │   │   ├── detalle
│   │   │   └── title
│   │   ├── form
│   │   └── modals
│   ├── index.cjs.js
│   ├── index.d.ts
│   ├── index.esm.js
│   └── utils
├── src
│   ├── components
│   │   ├── buttons
│   │   ├── desings
│   │   │   ├── cards
│   │   │   ├── detalle
│   │   │   └── title
│   │   ├── form
│   │   └── modals
│   ├── index.tsx
│   └── utils
├── .storybook
├── package.json
├── README.md
├── rollup.config.js
└── tsconfig.json

Key Files:

• src/index.tsx: Entry point that exports the DesignBlogManager component
• src/components/DesignBlogManager.tsx: Main component for managing blog post UI
• src/components/desings/cards/UI1/UI1.tsx: Example UI design implementation for cards
• src/components/desings/detalle/UI1/UI1Detail.tsx: Example UI design implementation for detailed view
• src/components/form/BlogForm.tsx: Form component for adding and editing blog posts
• rollup.config.js: Rollup configuration for building the library
• tsconfig.json: TypeScript configuration file

Usage Instructions

Installation

Prerequisites:

• Node.js (version 12 or higher)
• npm or yarn

To install the package in your project, run:

npm install @misnpm/design-blog

or if you're using yarn:

yarn add @misnpm/design-blog

Getting Started

1. Import the DesignBlogManager component in your React application:

import { DesignBlogManager } from '@misnpm/design-blog';

2. Use the component in your JSX, specifying the props:

<DesignBlogManager
  propsUI={{
    titleSection: "Latest Blog Posts",
    colorTitleSection: "#333333",
    title: "My First Blog Post",
    titleTextColor: "#000000",
    image: "https://example.com/image.jpg",
    id: "1",
    shortDescription: "This is a short description of the blog post.",
    shortDescriptionTextColor: "#666666",
    tag: "Technology",
    tagTextColor: "#FFFFFF",
    tagColor: "#007BFF",
    date: "2023-04-01",
    dateTextColor: "#999999",
    buttonTextColor: "#007BFF",
    buttonText: "Read More",
    buttonAction: (id) => console.log(`Read more clicked for post ${id}`),
    editMode: false,
    onEdit: () => console.log("Edit clicked"),
    onDelete: () => console.log("Delete clicked"),
    onAdd: () => console.log("Add clicked")
  }}
/>

Configuration Options

The DesignBlogManager component accepts the following main prop:

• propsUI: An object containing the props for the UI design

The available props for the UI design include:

• titleSection: The title of the blog section
• colorTitleSection: Color of the section title
• title: Title of the blog post
• titleTextColor: Color of the blog post title
• image: URL of the blog post image
• id: Unique identifier for the blog post
• shortDescription: Brief description of the blog post
• shortDescriptionTextColor: Color of the short description text
• tag: Tag or category of the blog post
• tagTextColor: Color of the tag text
• tagColor: Background color of the tag
• date: Publication date of the blog post
• dateTextColor: Color of the date text
• buttonTextColor: Color of the "Read More" button text
• buttonText: Text for the "Read More" button
• buttonAction: Function to be called when the "Read More" button is clicked
• editMode: Boolean to enable or disable edit mode
• onEdit: Function to be called when the edit button is clicked
• onDelete: Function to be called when the delete button is clicked
• onAdd: Function to be called when the add button is clicked

Testing & Quality

To run the Storybook development environment for testing and developing components:

npm run storybook

This will start the Storybook server on port 6006. You can then view and interact with the components in your browser.

Troubleshooting

Common issues and solutions:

1. Problem: Components not rendering correctly

   • Error message: "Error: UI not found."
   • Diagnostic process:
     1. Check that all required props are provided in the propsUI object
     2. Verify that the component is being used correctly
   • Solution: Ensure you're providing all necessary props

2. Problem: TypeScript errors when using the component

   • Error message: "Property 'X' is missing in type '{ ... }' but required in type 'UI1Props'"
   • Diagnostic process:
     1. Check the prop types defined in the UI component (e.g., UI1Props interface)
     2. Ensure all required props are being passed to the DesignBlogManager
   • Solution: Provide all required props as defined in the component's interface

For debugging, you can enable more verbose console logging by setting the DEBUG environment variable:

DEBUG=design-blog:* npm start

This will output additional information to the console, which can help identify issues with prop passing or component rendering.

Data Flow

The Design Blog Manager component follows a unidirectional data flow:

1. The parent component provides props to DesignBlogManager
2. DesignBlogManager renders the appropriate UI components based on the provided props
3. The UI components (e.g., UI1, UI1Detail) receive props and render the blog post
4. User interactions (e.g., clicking "Read More", "Edit", "Delete", or "Add") trigger callbacks passed as props
5. The parent component handles these callbacks and updates the state or performs necessary actions

[Parent Component]
       |
       | (props, including editMode and callbacks)
       v
[DesignBlogManager]
       |
       | (props)
       v
  [UI Components]
       |
       | (render)
       v
 [User Interface]
       |
       | (interactions: read more, edit, delete, add)
       v
[Callback Functions]

Note: The buttonAction, onEdit, onDelete, and onAdd props allow for custom handling of user interactions, enabling integration with navigation or state management systems in the parent application.