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: 'Expanded', value: 'expanded' }
      ]
    },
    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

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