GrapesJS + Cloc Integration

Integrate Cloc's powerful time tracking components with GrapesJS's open-source web builder framework. Create custom interfaces without writing code.

Try Demo

Quick Start

1. Install Dependencies

First, install the required packages for GrapesJS integration with Cloc components.

npm install @cloc/atoms grapesjs grapesjs-preset-webpage grapesjs-tailwind

2. Setup GrapesJS Editor

Initialize GrapesJS with Cloc components and configure the editor.

import { useEffect } from 'react';
import grapesjs from 'grapesjs';
import { ClocProvider, ClocModernTimer, ClocProgress } from '@cloc/atoms';

export default function Editor() {
  useEffect(() => {
    const editor = grapesjs.init({
      container: '#gjs',
      plugins: ['grapesjs-preset-webpage', 'grapesjs-tailwind'],
      canvas: {
        styles: ['@cloc/atoms/styles.css']
      }
    });

    // Register Cloc components
    editor.DomComponents.addType('modern-timer', {
      model: {
        defaults: {
          tagName: 'div',
          draggable: true,
          droppable: true,
          traits: [
            {
              type: 'checkbox',
              name: 'showProgress',
              label: 'Show Progress'
            }
          ]
        }
      }
    });
  }, []);

  return <div id="gjs" />;
}

3. Add Component Blocks

Define blocks for your Cloc components in the GrapesJS editor.

const blockComponents = [
  {
    id: 'modern-timer',
    label: 'Modern Timer',
    content: '<div data-gjs-type="modern-timer"></div>',
    category: 'Cloc Components'
  },
  {
    id: 'progress-timer',
    label: 'Progress Timer',
    content: '<div data-gjs-type="progress-timer"></div>',
    category: 'Cloc Components'
  }
];

editor.BlockManager.add(blockComponents);

API Reference

Modern Timer

Configuration options for the Modern Timer component in GrapesJS.

// Modern Timer Component Registration
editor.DomComponents.addType('modern-timer', {
  model: {
    defaults: {
      tagName: 'div',
      droppable: true,
      traits: [
        {
          type: 'select',
          name: 'variant',
          label: 'Variant',
          options: [
            { value: 'default', name: 'Default' },
            { value: 'bordered', name: 'Bordered' }
          ]
        },
        {
          type: 'select',
          name: 'size',
          label: 'Size',
          options: [
            { value: 'default', name: 'Default' },
            { value: 'sm', name: 'Small' }
          ]
        },
        {
          type: 'checkbox',
          name: 'expandable',
          label: 'Expandable'
        },
        {
          type: 'checkbox',
          name: 'showProgress',
          label: 'Show Progress'
        }
      ]
    }
  }
});

Integration Guides

Basic Integration

The simplest way to integrate Cloc components with GrapesJS is through component registration and hooks.

import { useGrapesjs } from './hooks';
import { useModernTimer, useProgressCircle } from './components';

const BLOCK_COMPONENTS = [
  {
    id: 'modern-timer',
    label: 'Modern Timer',
    content: '<div data-gjs-type="modern-timer"></div>',
    category: 'Timer',
    image: '/img/timer.png'
  },
  {
    id: 'progress-circle',
    label: 'Progress Circle',
    content: '<div data-gjs-type="progress-circle"></div>',
    category: 'Progress',
    image: '/img/progress.png'
  }
];

export default function Editor() {
  const { editor } = useGrapesjs({ 
    containerId: 'gjs',
    blockComponents: BLOCK_COMPONENTS 
  });

  // Register components using hooks
  useModernTimer({ editor });
  useProgressCircle({ editor });

  return (
    <div id="gjs" className="h-screen" />
  );
}

Custom Theme Integration

Customize the look and feel by configuring Cloc's theme options within GrapesJS.

import { ClocThemeProvider } from '@cloc/atoms';
import { useGrapesjs } from './hooks';

function Editor() {
  const { editor } = useGrapesjs({
    containerId: 'gjs',
    config: {
      canvas: {
        styles: [
          'https://cdn.jsdelivr.net/npm/@cloc/atoms/dist/styles.css'
        ]
      }
    }
  });

  return (
    <ClocThemeProvider 
      theme={{
        colors: {
          primary: '#FF1CF7',
          secondary: '#00F0FF'
        }
      }}
    >
      <div id="gjs" className="h-screen" />
    </ClocThemeProvider>
  );
}

Component Event Handling

Handle component events and state changes in your GrapesJS editor.

import { useModernTimer } from './components';

export const useModernTimer = ({ editor }) => {
  editor.DomComponents.addType('modern-timer', {
    model: {
      defaults: {
        traits: [
          {
            type: 'checkbox',
            name: 'showProgress',
            label: 'Show Progress'
          },
          {
            type: 'select',
            name: 'variant',
            label: 'Variant',
            options: [
              { value: 'default', name: 'Default' },
              { value: 'bordered', name: 'Bordered' }
            ]
          }
        ],
        script: function() {
          const component = this;
          component.addEventListener('start', () => {
            // Handle timer start
          });
          component.addEventListener('pause', () => {
            // Handle timer pause
          });
          component.addEventListener('complete', () => {
            // Handle timer complete
          });
        }
      }
    }
  });
};

Examples

Explore how to integrate and customize Cloc components within GrapesJS. Each component can be easily configured through the GrapesJS traits panel.

Default Timer

Component

A clean, minimal timer component with a modern design. Perfect for applications requiring a straightforward countdown display without additional visual elements. Supports basic timer functionality with start, pause, and reset controls.

00:00:00

Border Timer

Component

Enhanced visibility with a subtle border outline. Ideal for interfaces where the timer needs to stand out from the background while maintaining a professional appearance. The border helps define the component's boundaries clearly.

00:00:00

Expandable Timer

Component

A timer with the ability to expand and show additional controls and information. Suitable for applications where timer manipulation is a primary function. Users can expand/collapse the form with project/task selectors.

00:00:00

Ready to Build with GrapesJS?

Start creating custom time tracking interfaces with GrapesJS's visual editor and Cloc's components.

Try Cloc on GrapesJS