@metadiv-studio/help-guide

A React component library for creating interactive help guides with step-by-step navigation, image support, and customizable content.

📦 Installation

npm install @metadiv-studio/help-guide

🎨 Tailwind CSS Configuration

Important: To use this package's Tailwind CSS styles, add the following path to your tailwind.config.js or tailwind.config.ts file:

// tailwind.config.js
module.exports = {
  content: [
    // ... other content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}

🚀 Quick Start

import HelpGuide from '@metadiv-studio/help-guide';

const steps = [
  {
    title: "Welcome!",
    content: "This is your first step in the help guide.",
    image: "https://example.com/welcome-image.jpg"
  },
  {
    title: "Getting Started",
    content: "Here's how to get started with our application."
  }
];

function App() {
  return (
    <div>
      <HelpGuide steps={steps} />
    </div>
  );
}

📚 API Reference

HelpGuide Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | steps | HelpStep[] | ✅ | Array of help guide steps |

HelpStep Interface

| Property | Type | Required | Description | |----------|------|----------|-------------| | title | string | ✅ | Title displayed in the dialog header | | content | React.ReactNode | ✅ | Content displayed in the step body | | image | string | ❌ | Optional image URL to display in the step |

💡 Usage Examples

Basic Help Guide

import HelpGuide from '@metadiv-studio/help-guide';

const basicSteps = [
  {
    title: "Step 1",
    content: "This is the first step of your help guide."
  },
  {
    title: "Step 2", 
    content: "This is the second step with more information."
  }
];

function BasicExample() {
  return <HelpGuide steps={basicSteps} />;
}

Help Guide with Images

import HelpGuide from '@metadiv-studio/help-guide';

const imageSteps = [
  {
    title: "Dashboard Overview",
    content: "Your dashboard shows all the important metrics at a glance.",
    image: "/images/dashboard-overview.png"
  },
  {
    title: "Navigation Menu",
    content: "Use the navigation menu to access different sections of the app.",
    image: "/images/navigation-menu.png"
  },
  {
    title: "Settings Panel",
    content: "Configure your preferences in the settings panel."
  }
];

function ImageExample() {
  return <HelpGuide steps={imageSteps} />;
}

Rich Content Help Guide

import HelpGuide from '@metadiv-studio/help-guide';

const richContentSteps = [
  {
    title: "Advanced Features",
    content: (
      <div>
        <h3 className="font-semibold mb-2">Key Features:</h3>
        <ul className="list-disc list-inside space-y-1">
          <li>Real-time collaboration</li>
          <li>Advanced analytics</li>
          <li>Custom integrations</li>
        </ul>
        <p className="mt-2 text-sm text-gray-600">
          These features help you work more efficiently.
        </p>
      </div>
    )
  },
  {
    title: "Getting Support",
    content: (
      <div>
        <p>Need help? Contact our support team:</p>
        <div className="mt-2 space-y-1">
          <p>📧 Email: [email protected]</p>
          <p>💬 Chat: Available 24/7</p>
          <p>📚 Docs: help.example.com</p>
        </div>
      </div>
    )
  }
];

function RichContentExample() {
  return <HelpGuide steps={richContentSteps} />;
}

Single Step Help Guide

import HelpGuide from '@metadiv-studio/help-guide';

const singleStep = [
  {
    title: "Quick Tip",
    content: "This is a single-step help guide for quick tips or announcements."
  }
];

function SingleStepExample() {
  return <HelpGuide steps={singleStep} />;
}

🎯 Features

• Step Navigation: Navigate through multiple help steps with previous/next buttons
• Image Support: Include images in your help steps for visual guidance
• Rich Content: Support for React components and JSX in step content
• Responsive Design: Works seamlessly across different screen sizes
• Accessibility: Built with accessibility in mind with proper ARIA labels
• Customizable: Styled with Tailwind CSS for easy customization
• Skip Option: Users can skip the help guide at any time
• Progress Indicators: Visual dots show current step progress

🔧 Dependencies

This package requires the following peer dependencies:

• react (^18)
• react-dom (^18)

And uses these internal dependencies:

• @metadiv-studio/button - For navigation buttons
• @metadiv-studio/dialog - For the modal dialog
• @metadiv-studio/translation - For internationalization support
• react-icons - For the help icon
• lucide-react - For navigation icons

🌐 Internationalization

The component supports internationalization through the @metadiv-studio/translation package. The following translation keys are used:

• skip - Text for the skip button
• understood - Text for the final step completion button

Make sure to provide these translations in your translation files.

🎨 Styling

The component uses Tailwind CSS classes and can be customized by:

1. Overriding CSS classes in your global styles
2. Using Tailwind's configuration to modify the design system
3. Customizing the dialog and button components from the metadiv-studio packages

📝 License

UNLICENSED

All Rights Reserved

Copyright (c) 2025 Metadiv Studio & Lab

THE CONTENTS OF THIS PROJECT ARE PROPRIETARY AND CONFIDENTIAL. UNAUTHORIZED COPYING, TRANSFERRING OR REPRODUCTION OF THE CONTENTS OF THIS PROJECT, VIA ANY MEDIUM IS STRICTLY PROHIBITED.

The receipt or possession of the source code and/or any parts thereof does not convey or imply any right to use them for any purpose other than the purpose for which they were provided to you.

The software is provided "AS IS", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.