Time Tracking Integration with
Plasmic Studio

Seamlessly integrate Cloc's Time Tracking system into your Plasmic projects with our pre-built components and utilities.

Try Cloc on Plasmic Now

Quick Start

1. Install Dependencies

First, install the required packages. The @cloc/atoms package contains our core components, UI and Theming.

npm install @cloc/atoms

2. Setup Theme Provider

Wrap your application with ClocProvider to enable theming and context features.

import { ClocProvider } from '@cloc/atoms';


export default function App() {
  return (
    <ClocProvider>
      {/* Your app content */}
    </ClocProvider>
  );
}

3. Register Components in Plasmic

Register the components you want to use in Plasmic. This makes them available in the Plasmic Studio interface.

import { ClocLoginForm, ModernTimer, ClocProgress } from '@cloc/atoms';
import { PLASMIC } from './plasmic-init';


// Register Authentication Form
PLASMIC.registerComponent(ClocLoginForm, {
  name: 'Cloc Login Form',
  props: {
    source: {
      type: 'choice',
      options: [
        { label: 'Storybook', value: 'storybook' },
        { label: 'Example', value: 'example' }
      ]
    },
    className: { type: 'string' }
  }
});


// Register Modern Timer
PLASMIC.registerComponent(ModernTimer, {
  name: 'Modern Timer',
  props: {
    variant: {
      type: 'choice',
      options: [
        { label: 'Basic', value: 'basic' },
        { label: 'Progress', value: 'progress' },
        { label: 'Expandable', value: 'expandable' }
      ]
    },
    showControls: { type: 'boolean', defaultValue: true }
  }
});

4. Configure Authentication (Optional)

If you're using authentication features, configure your auth settings.

import { ClocConfig } from '@cloc/atoms';


ClocConfig.init({
  authEndpoint: 'https://your-auth-endpoint.com',
  apiKey: process.env.NEXT_PUBLIC_CLOC_API_KEY
});

API Reference

Component Props

PropTypeDescription
source'storybook' | 'example'Source context for the form
classNamestringAdditional CSS classes

Integration Guides

Basic Integration

The simplest way to integrate Cloc components with Plasmic is through direct component registration.

import { ClocLoginForm, ClocProvider } from '@cloc/atoms';


function App() {
  return (
    <ClocProvider>
      <ClocLoginForm source="storybook" />
    </ClocProvider>
  );
}

Custom Theme Integration

Customize the look and feel by extending Plasmic's theme with Cloc's theme options.

import { ClocThemeProvider } from '@cloc/atoms';
import { PlasmicRootProvider } from '@plasmicapp/loader-nextjs';


function App() {
  return (
    <PlasmicRootProvider>
      <ClocThemeProvider
        theme={{
          colors: {
            primary: '#FF1CF7',
            secondary: '#00F0FF'
          }
        }}
      >
        {/* Your app content */}
      </ClocThemeProvider>
    </PlasmicRootProvider>
  );
}

Component Event Handling

Handle component events and state changes in your Plasmic projects.

PLASMIC.registerComponent(ModernTimer, {
  name: 'Modern Timer',
  props: {
    onStart: {
      type: 'eventHandler',
      argTypes: [{ name: 'time', type: 'number' }]
    },
    onPause: {
      type: 'eventHandler',
      argTypes: [{ name: 'elapsedTime', type: 'number' }]
    }
  }
});

Examples

Explore different variants of our Modern Timer component. Each variant is designed for specific use cases and can be customized further.

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 Your Custom Timer?

Jump into Plasmic's visual builder and start customizing Cloc components for your specific needs. No coding required.

Try Cloc on Plasmic Now