textuality-components

Textuality Components

A collection of reusable components for Textuality CMS Simplify development with pre-built UI components tailored to work seamlessly with the Textuality API and your CMS setup.

What is Textuality Components?

textuality-components provides essential, customizable components such as dateTime, image, location, and more. These components are designed to:

• Accelerate development.
• Maintain consistency across your CMS interfaces for Textuality CMS.

Features

• 📦 Ready-to-Use Components: Predefined components like title, image, and shortText.
• 🔗 Textuality API Ready: Use gatherer.tsx to integrate directly with the Textuality API for path and content management.
• 🚀 Easy Setup: Install components into your project with a single command.
• ⚙️ Customizable: Components are delivered as .tsx files, making them easy to modify for project-specific needs.

Installation

To install the components into your project, run the following command:

npx textuality-components

This command will:

• Prompt you to confirm the installation.
• Copy all Textuality components into your project's components/textuality directory.

Components Overview

Component	Description
dateTime.tsx	A date and time picker/input.
image.tsx	An image component for CMS uploads.
location.tsx	Handles location-based data (e.g., London, Buckingham Palace).
number.tsx	A numeric visualizer for CMS fields (e.g., stars, numbers).
gatherer.tsx	Enables path management and connects to the API smoothly.
richText.tsx	A rich text visualizer component.
shortText.tsx	Input for short text fields.
tags.tsx	A tagging system for categorizing content.
title.tsx	A title input field for CMS entries.

More info? Check our documentation

Usage

After running the npx textuality-components command, the components will be installed into:

your-project/
├── components/
│   └── textuality/
│       ├── dateTime.tsx
│       ├── image.tsx
│       ├── location.tsx
│       ├── pather.tsx
│       ├── title.tsx
│       └── ...

You can import and use the components like this:

import Gatherer from '@/components/textuality/gatherer';

export default function Blog({ params }: BlogProps) {
    const { _blogid } = params; 

    const [blogs, setBlogs] = useState<any | null>(null);

    useEffect(() => {
        fetch(`/api/textuality/specific?blogid=${_blogid}`)
            .then((res) => {
                if (!res.ok) {
                    throw new Error("Network response was not ok");
                }
                return res.json();
            })
            .then((data) => {
                if (data.error) {
                    console.error(data.error);
                } else {
                    setBlogs(data.blogs);
                }
            })
            .catch((err) => {
                console.error('Error:', err);
            });
    }, [_blogid]);

    return(
        <div>
            {blogs ? <Gatherer blogs={blogs} /> : <p>Loading...</p>}
        </div>
    )
};

How gatherer.tsx Works

The gatherer.tsx component is a key part of the Textuality CMS integration. By using gatherer.tsx in your project:

• It enables your CMS to connect to the Textuality API.
• Allows seamless path and content management.
• Ensures proper handling of content structures and routing.

Example Use Case: The gatherer.tsx component allows paths to be dynamically managed via the API, ensuring that all CMS content is properly routed and accessible.

Why Use Textuality Components?

• Faster Development: Reuse pre-built components instead of coding from scratch.
• API Integration: Components like gatherer.tsx directly interact with the Textuality API.
• Consistency: Maintain a uniform UI and structure across your CMS.
• Customizable: Modify the .tsx files as needed for your project requirements.

Dependencies

This package relies on the following libraries:

• inquirer: For interactive prompts during installation.
• ora: For clean and elegant loading indicators.

License

This project is licensed under the ISC License.

Author

Created and maintained by Harry Campbell & Hdev Group.

Feedback and Contributions

Contributions are welcome! If you have any issues or suggestions, feel free to:

• Open an issue on the repository.
• Submit a pull request.

Let me know if you need additional sections, such as troubleshooting or contribution guidelines! 🚀