React Website Builder Extension for Puck Editor

A powerful React library that extends the Puck editor functionality to build and render websites with ease. This library provides two main components: WebBuilder and WebRenderer that work together to create a seamless website building experience.

Installation

npm install @orgwarec/render-config

Key Components

WebBuilder

The WebBuilder component provides a drag-and-drop interface for building websites. It extends Puck editor's functionality with additional features for website construction.

Props Interface

interface WebBuilderProps {
  // Optional unique identifier for the node
  nodeId?: string;

  // Initial data configuration
  initialData?: {
    content: Array<{
      type: string;
      props: Record<string, unknown>;
    }>;
    root: {
      title: string;
    };
  };

  // Viewport configurations for responsive design
  viewports?: Array<{
    width: number;
    height: number | "auto";
    label: string;
    icon: JSX.Element;
  }>;

  // Array of plugins to extend functionality
  plugin?: Plugin[];

  // Callback function when publishing changes
  onPublish?: (data: unknown) => void;
}

WebRenderer

The WebRenderer component is responsible for rendering the website based on the configuration created using WebBuilder.

Props Interface

interface WebRendererProps {
  // Optional unique identifier for the node
  nodeId?: string;

  // Initial data configuration
  initialData?: {
    content: Array<{
      type: string;
      props: Record<string, unknown>;
    }>;
    root: {
      title: string;
    };
  };
}

Usage

import { WebBuilder, WebRenderer } from "@oarkflow/render-config";

// In your builder component
const BuilderComponent = () => {
  const handleSave = (config) => {
    // Handle saving the website configuration
    console.log("Website config:", config);
  };

  return (
    <WebBuilder
      onSave={handleSave}
      // Add your custom components and configurations
      components={{
        Hero: {
          // Your hero component configuration
        },
        // Add more components as needed
      }}
    />
  );
};

// In your viewer/renderer component
const ViewerComponent = () => {
  const config = {
    // Your website configuration
  };

  return (
    <WebRenderer
      config={config}
      // Additional props as needed
    />
  );
};

Features

• Drag-and-drop website building interface
• Component-based architecture
• Real-time preview
• Customizable components
• Responsive design support
• Easy integration with existing React applications

Contributing

If you want to contribute to this plugin, follow these steps:

0. Create a branch related to code change

   git checkout -b feature/your-feature-name

1. Update the code Make your changes and ensure they follow the project's coding standards

2. Commit and push the changes to GitHub

   git add .
   git commit -m "Your descriptive commit message"
   git push origin feature/your-feature-name

3. Update the package on npm

   npm login
   npm version patch
   npm publish

4. Enjoy using the latest version in your projects!

Version Bumping

When committing changes, use the following commit message conventions to automatically bump the package version:

• For minor version bump (e.g., 1.1.0 -> 1.2.0):

  feat: your message here

• For patch version bump (e.g., 1.1.0 -> 1.1.1):

  fix: your message here

Any other commit message format will result in a patch version bump by default.

The version bump occurs automatically when changes are pushed to the main branch through our GitHub Actions workflow.

Example Use Case

Here's a complete example of how to use the library in a React application:

import React, { useState } from "react";
import { WebBuilder, WebRenderer } from "@oarkflow/render-config";

// Define your custom components
const customComponents = {
  Hero: {
    render: ({ title, subtitle }) => (
      <div className="hero">
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    ),
    defaultProps: {
      title: "Welcome",
      subtitle: "Start building your website",
    },
  },
  // Add more components as needed
};

// Builder Page Component
const BuilderPage = () => {
  const [config, setConfig] = useState(null);

  const handleSave = (newConfig) => {
    setConfig(newConfig);
    // Save to your backend or localStorage
  };
  const plugin = {
    /* puck editor plugins get more details from puck editor 
      documentation [here](https://puckeditor.com/docs/extending-puck/plugins) */
  };
  const viewports = [
    {
      width: number,
      height: number | "auto",
      label: "string",
      icon: "icon react Node",
    },
  ];

  return (
    <WebBuilder
      components={customComponents}
      onPublish={handleSave}
      initialConfig={config}
      plugin={plugin}
      viewports={viewports}
    />
  );
};

// Viewer Page Component
const ViewerPage = ({ config }) => {
  return <WebRenderer config={config} components={customComponents} />;
};

export { BuilderPage, ViewerPage };

Support

For issues and feature requests, please create an issue on our Github repository.