Time Tracking Integration with
Craft.js

Build powerful time tracking interfaces with Craft.js's React-based page builder and Cloc's customizable components.

Try Cloc on Craft.js

Quick Start

1. Install Dependencies

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

npm install @craftjs/core @cloc/atoms

2. Setup Craft Editor

Initialize the Craft.js editor with Cloc components.

import { Editor } from '@craftjs/core';
import { ClocProvider, ModernCloc, ClocProgress } from '@cloc/atoms';


export default function CraftEditor() {
  return (
    <ClocProvider>
      <Editor
        resolver={{
          ModernCloc,
          ClocProgress
        }}
        onRender={RenderNode}
      >
        <div className="relative h-full">
          {/* Your editor content */}
        </div>
      </Editor>
    </ClocProvider>
  );
}

3. Register Components

Define your Cloc components with Craft.js settings.

import { useNode } from '@craftjs/core';
import { ModernCloc } from '@cloc/atoms';


export const CraftModernTimer = ({...props}) => {
  const { connectors: { connect, drag } } = useNode();


  return (
    <div ref={ref => connect(drag(ref))}>
      <ModernCloc {...props} />
    </div>
  );
};


CraftModernTimer.craft = {
  displayName: 'Modern Timer',
  props: {
    variant: {
      type: 'select',
      options: ['default', 'bordered']
    },
    showProgress: {
      type: 'boolean'
    }
  }
};

API Reference

Modern Timer

Configuration options for the Modern Timer component in Craft.js.

// Modern Timer Component Configuration
const ModernTimer = {
  displayName: 'Modern Timer',
  props: {
    variant: {
      type: 'select',
      options: ['default', 'bordered'],
      defaultValue: 'default'
    },
    size: {
      type: 'select',
      options: ['default', 'sm'],
      defaultValue: 'default'
    },
    expanded: {
      type: 'boolean',
      defaultValue: false
    },
    showProgress: {
      type: 'boolean',
      defaultValue: false
    },
    onStart: {
      type: 'event'
    },
    onPause: {
      type: 'event'
    },
    onComplete: {
      type: 'event'
    }
  }
};


ModernTimer.craft = {
  related: {
    settings: TimerSettings
  }
};

Integration Guides

Basic Integration

The simplest way to integrate Cloc components with Craft.js is through component registration and user components.

import { Editor, Frame, Element } from '@craftjs/core';
import { ModernCloc, ClocProvider } from '@cloc/atoms';


// Create a User Component wrapper for ModernCloc
const CraftModernTimer = ({...props}) => {
  const { connectors: { connect, drag } } = useNode();
  
  return (
    <div ref={ref => connect(drag(ref))}>
      <ModernCloc {...props} />
    </div>
  );
};


function App() {
  return (
    <ClocProvider>
      <Editor resolver={{ CraftModernTimer }}>
        <Frame>
          <Element canvas>
            <CraftModernTimer 
              variant="default"
              showProgress={true}
            />
          </Element>
        </Frame>
      </Editor>
    </ClocProvider>
  );
}

Custom Theme Integration

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

import { ClocThemeProvider } from '@cloc/atoms';
import { Editor } from '@craftjs/core';


function App() {
  return (
    <ClocThemeProvider 
      theme={{
        colors: {
          primary: '#FF1CF7',
          secondary: '#00F0FF'
        }
      }}
    >
      <Editor>
        {/* Your Craft.js editor content */}
      </Editor>
    </ClocThemeProvider>
  );
}

Component Settings Panel

Create custom settings panels for Cloc components in your Craft.js editor.

import { useNode } from '@craftjs/core';


const TimerSettings = () => {
  const { actions: { setProp }, variant, showProgress } = useNode((node) => ({
    variant: node.data.props.variant,
    showProgress: node.data.props.showProgress
  }));


  return (
    <div className="settings-panel">
      <select
        value={variant}
        onChange={e => setProp(props => props.variant = e.target.value)}
      >
        <option value="default">Default</option>
        <option value="bordered">Bordered</option>
      </select>
      
      <label>
        <input
          type="checkbox"
          checked={showProgress}
          onChange={e => setProp(props => props.showProgress = e.target.checked)}
        />
        Show Progress
      </label>
    </div>
  );
};


// Add settings to your component
CraftModernTimer.craft = {
  related: {
    settings: TimerSettings
  }
};

Examples

Explore how to integrate and customize Cloc components within CraftJS. Each component can be easily configured through the CraftJS 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

Expanded Timer

Component

A larger format timer with additional controls and information visible by default. Suitable for applications where timer manipulation is a primary function. Shows extended controls without requiring user interaction to reveal them.

Timer

00:00:00
Powered byEver Cloc

Resizable Timer

Component

Flexible timer component that can be resized by the user. Perfect for customizable interfaces where users need control over the component's size. Maintains functionality and clarity at different dimensions while allowing for personalized workspace organization.

00:00:00

Ready to Build with CraftJS?

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

Try Cloc on CraftJS