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, ClocModernTimer, ClocProgress } from '@cloc/atoms';


export default function CraftEditor() {
  return (
    <ClocProvider>
      <Editor
        resolver={{
          ClocModernTimer,
          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 { ClocModernTimer } from '@cloc/atoms';


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


  return (
    <div ref={ref => connect(drag(ref))}>
      <ClocModernTimer {...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'
    },
    expandable: {
      type: 'boolean',
      defaultValue: true
    },
    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 { ClocModernTimer, ClocProvider } from '@cloc/atoms';


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


  return (
    <div ref={ref => connect(drag(ref))}>
      <ClocModernTimer {...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

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 CraftJS?

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

Try Cloc on CraftJS