🚀 Sellsite Section Builder

A powerful, visual React-based section builder for creating professional landing pages with full RTL (Right-to-Left) support for Arabic content.

✨ Features

• 9 Pre-built Section Types: Hero, Product, Testimonials, Features, FAQ, CTA, Gallery, Video, Custom Code
• Visual Editing: Click-to-edit text, buttons, and images
• RTL Support: Full Arabic language support with proper text direction
• Styling System: 3-layer styling (Global CSS, Section CSS, Element CSS)
• Background Customization: Colors, gradients, and images with overlays
• Page Settings: Global control over fonts, colors, and container dimensions
• History Management: Undo/Redo functionality
• Export/Import: Save and load page configurations as JSON
• Responsive Design: Mobile-first approach with custom scoped CSS (sb- prefix)
• Type-Safe: Full TypeScript support

📦 Installation

From GitHub (Private Repository)

npm install git+https://github.com/YOUR_USERNAME/section-builder.git

Optional Dependencies

If you plan to use the Testimonials Section with drag-and-drop sorting, you need to install @dnd-kit packages:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Note: These packages are optional. If you don't install them, the Testimonials section will still work, but without drag-and-drop functionality.

Or add to your package.json:

{
  "dependencies": {
    "@sellsite/section-builder": "git+https://github.com/YOUR_USERNAME/section-builder.git"
  }
}

From GitHub with specific branch/tag

npm install git+https://github.com/YOUR_USERNAME/section-builder.git#v1.0.0
npm install git+https://github.com/YOUR_USERNAME/section-builder.git#main

🔧 Usage

Basic Usage

import { SectionBuilder } from '@sellsite/section-builder';
import '@sellsite/section-builder/styles';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <SectionBuilder />
    </div>
  );
}

export default App;

With Initial Data

Option 1: Using initialData prop (Recommended)

import { SectionBuilder, PageData } from '@sellsite/section-builder';
import '@sellsite/section-builder/styles';

const initialData: PageData = {
  pageSettings: {
    containerSize: 'medium',
    fontFamily: 'Cairo, sans-serif',
  },
  sections: [
    {
      id: '1',
      type: 'hero',
      layout: 'grid',
      content: {
        heroTitle: 'مرحباً بكم',
        heroDescription: 'نقدم أفضل الخدمات',
        heroButtonText: 'ابدأ الآن',
      },
    },
  ],
};

function App() {
  return (
    <SectionBuilder
      initialData={initialData}
      onExport={(data) => {
        console.log('Exported:', data);
      }}
    />
  );
}

Option 2: Using separate props

function App() {
  return (
    <SectionBuilder
      initialSections={initialData.sections}
      initialPageSettings={initialData.pageSettings}
      onExport={(data) => {
        console.log('Exported:', data);
      }}
    />
  );
}

With Export Handler

import { SectionBuilder, PageData } from '@sellsite/section-builder';
import '@sellsite/section-builder/styles';

function App() {
  const handleExport = (pageData: PageData) => {
    // Send to your backend API
    fetch('/api/save-page', {
      method: 'POST',
      body: JSON.stringify(pageData),
      headers: { 'Content-Type': 'application/json' },
    });
  };

  return <SectionBuilder onExport={handleExport} />;
}

With Real-time Updates (onChange)

import { SectionBuilder, PageData } from '@sellsite/section-builder';
import '@sellsite/section-builder/styles';

function App() {
  const handleChange = (pageData: PageData) => {
    // This callback is triggered on every change (debounced by 300ms)
    // Perfect for real-time updates to MongoDB or other backends
    
    // Example: Save to MongoDB
    fetch('/api/update-page', {
      method: 'PUT',
      body: JSON.stringify(pageData),
      headers: { 'Content-Type': 'application/json' },
    });
    
    // Or use WebSocket for real-time sync
    // websocket.send(JSON.stringify(pageData));
  };

  return <SectionBuilder onChange={handleChange} />;
}

Rendering Landing Pages (Production)

import { SectionRenderer, PageData, generateBackgroundStyle } from '@sellsite/section-builder';
import '@sellsite/section-builder/styles';

function LandingPage({ pageData }: { pageData: PageData }) {
  const { pageSettings, sections } = pageData;

  return (
    <div dir="rtl" style={{ 
      fontFamily: pageSettings.fontFamily || "Tajawal, Cairo, sans-serif",
      ...generateBackgroundStyle(pageSettings.background)
    }}>
      {/* Inject Google Font if provided */}
      {pageSettings.googleFontUrl && (
        <link rel="stylesheet" href={pageSettings.googleFontUrl} />
      )}
      
      {/* Render all sections */}
      {sections.map((section) => (
        <SectionRenderer key={section.id} section={section} />
      ))}
    </div>
  );
}

// Usage: Fetch from MongoDB and render
import { useState, useEffect } from 'react';

function App() {
  const [pageData, setPageData] = useState<PageData | null>(null);

  useEffect(() => {
    fetch('/api/landing-pages/123')
      .then(res => res.json())
      .then(setPageData);
  }, []);

  if (!pageData) return <div>Loading...</div>;
  return <LandingPage pageData={pageData} />;
}

📚 TypeScript Types

import type {
  Section,
  SectionType,
  PageSettings,
  PageData,
  ButtonStyle,
} from '@sellsite/section-builder';

// Section Types
const sectionTypes: SectionType[] = [
  'hero',
  'product',
  'testimonials',
  'features',
  'faq',
  'cta',
  'gallery',
  'video',
  'customCode',
];

// Page Settings
const pageSettings: PageSettings = {
  background: {
    type: 'color',
    color: '#ffffff',
  },
  fontFamily: 'Cairo, sans-serif',
  baseFontSize: '16px',
  lineHeight: '1.6',
  containerMaxWidth: '1200px',
  containerPadding: '1.5rem',
  primaryColor: '#667eea',
  secondaryColor: '#764ba2',
  textColor: '#1a202c',
  linkColor: '#667eea',
  customCSS: '',
};

🎨 Styling

The package includes pre-compiled CSS with scoped utility classes (prefixed with sb-). Import it once in your app:

import '@sellsite/section-builder/styles';

Custom Styling

You can override styles using CSS variables or by wrapping the component:

/* Custom theme */
.custom-builder {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --border-radius: 8px;
}

<div className="custom-builder">
  <SectionBuilder />
</div>

🏗️ Project Structure

section-builder/
├── dist/                    # Built package
│   ├── section-builder.js   # ES Module
│   ├── section-builder.cjs  # CommonJS
│   ├── style.css            # Compiled CSS
│   └── index.d.ts           # TypeScript declarations
├── src/
│   ├── components/
│   │   ├── SectionBuilder.tsx
│   │   └── builder/
│   │       ├── sections/
│   │       ├── editors/
│   │       ├── controls/
│   │       └── types.ts
│   └── index.ts             # Package entry point
└── package.json

🔑 API Reference

SectionBuilder Props

| Prop | Type | Default | Description | | ----------------------- | ----------------------------- | ------- | ---------------------------------------- | | initialSections | Section[] | [] | Initial sections to load | | initialPageSettings | PageSettings | {} | Initial page-level settings | | initialData | PageData | - | Complete page data (overrides initialSections and initialPageSettings if provided) | | onExport | (data: PageData) => void | - | Callback when user exports | | onChange | (data: PageData) => void | - | Real-time callback on every change (debounced 300ms) | | className | string | "" | Additional CSS classes |

PageData Structure

interface PageData {
  pageSettings: PageSettings;
  sections: Section[];
}

🌐 Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

MIT © Sellsite

🤝 Contributing

This is a private package. For issues or feature requests, please contact the maintainer.

📞 Support

For support, email: [email protected]

Made with ❤️ by Sellsite