@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/ui/gantt/README.md

@@ -0,0 +1,356 @@
+# Gantt Chart Component
+
+A comprehensive, interactive Gantt chart component built with Vue 3 and TypeScript using a composable architecture.
+
+## Features
+
+- 🎯 **Interactive Timeline**: Drag and drop tasks, resize bars, and navigate through time
+- 📅 **Multiple Views**: Daily, weekly, and monthly timeline views with zoom controls
+- 🎨 **Customizable**: Full control over styling, colors, and layout through composable components
+- 📱 **Responsive**: Works on desktop and mobile devices
+- ⌨️ **Keyboard Shortcuts**: F11 for fullscreen, Escape to exit
+- 🏷️ **Markers**: Add and drag timeline markers for milestones
+- 💡 **Tooltips**: Real-time date information during interactions
+- 🔍 **Infinite Scroll**: Timeline extends automatically as you scroll
+- 🧩 **Composable Architecture**: 13+ components that work together seamlessly
+
+## Architecture
+
+This component uses a **composable architecture** with multiple sub-components that give you full control over the structure and behavior:
+
+- `Gantt` - Main container that provides context
+- `GanttSidebar` - Sidebar for displaying feature list
+- `GanttSidebarGroup` / `GanttSidebarItem` - Sidebar grouping and items
+- `GanttTimeline` - Timeline container with infinite scroll
+- `GanttHeader` - Timeline header showing years/months/weeks/days
+- `GanttFeatureList` / `GanttFeatureListGroup` / `GanttFeatureItem` - Feature rendering
+- `GanttMarker` / `GanttToday` - Timeline markers
+- `GanttZoomControls` - Zoom controls
+- `useGantt` - Composable for accessing Gantt context
+
+## Basic Usage
+
+```vue
+<template>
+	<Gantt :zoom="100" range="monthly" :on-add-item="handleAddFeature">
+		<GanttSidebar title="Features">
+			<GanttSidebarGroup v-for="[groupName, groupFeatures] in Object.entries(groupedFeatures)" :key="groupName" :name="groupName">
+				<GanttSidebarItem v-for="feature in groupFeatures" :key="feature.id" :feature="feature" @select-item="handleViewFeature" />
+			</GanttSidebarGroup>
+		</GanttSidebar>
+
+		<GanttTimeline>
+			<GanttHeader />
+			<GanttFeatureList>
+				<GanttFeatureListGroup v-for="[groupName, groupFeatures] in Object.entries(groupedFeatures)" :key="`timeline-${groupName}`">
+					<div v-for="feature in groupFeatures" :key="feature.id" class="relative border-b" style="height: 48px">
+						<GanttFeatureItem v-bind="feature" @move="handleMoveFeature">
+							<p class="flex-1 truncate text-xs">{{ feature.name }}</p>
+						</GanttFeatureItem>
+					</div>
+				</GanttFeatureListGroup>
+			</GanttFeatureList>
+
+			<GanttMarker v-for="marker in markers" :key="marker.id" v-bind="marker" @move="handleMoveMarker" />
+
+			<GanttToday />
+
+			<GanttCreateMarkerTrigger :on-create-marker="handleCreateMarker" />
+		</GanttTimeline>
+
+		<GanttZoomControls />
+	</Gantt>
+</template>
+
+<script setup lang="ts">
+import Gantt from '@/components/ui/Gantt.vue';
+import GanttSidebar from '@/components/ui/GanttSidebar.vue';
+import GanttSidebarGroup from '@/components/ui/GanttSidebarGroup.vue';
+import GanttSidebarItem from '@/components/ui/GanttSidebarItem.vue';
+import GanttTimeline from '@/components/ui/GanttTimeline.vue';
+import GanttHeader from '@/components/ui/GanttHeader.vue';
+import GanttFeatureList from '@/components/ui/GanttFeatureList.vue';
+import GanttFeatureListGroup from '@/components/ui/GanttFeatureListGroup.vue';
+import GanttFeatureItem from '@/components/ui/GanttFeatureItem.vue';
+import GanttMarker from '@/components/ui/GanttMarker.vue';
+import GanttToday from '@/components/ui/GanttToday.vue';
+import GanttCreateMarkerTrigger from '@/components/ui/GanttCreateMarkerTrigger.vue';
+import GanttZoomControls from '@/components/ui/GanttZoomControls.vue';
+import type { GanttFeature } from '@/components/gantt';
+
+const features = ref<GanttFeature[]>([
+	{
+		id: '1',
+		name: 'Project Planning',
+		startAt: new Date('2024-01-01'),
+		endAt: new Date('2024-01-15'),
+		status: { id: '1', name: 'Completed', color: '#10B981' },
+		owner: { id: '1', name: 'John Doe', image: '/avatar.jpg' },
+		group: { id: '1', name: 'Planning' },
+	},
+]);
+
+const markers = ref([
+	{
+		id: '1',
+		date: new Date('2024-01-15'),
+		label: 'Planning Complete',
+		className: 'bg-blue-100 text-blue-900',
+	},
+]);
+
+const groupedFeatures = computed(() => {
+	const grouped: Record<string, GanttFeature[]> = {};
+	features.value.forEach((feature) => {
+		const groupName = feature.group?.name || 'Uncategorized';
+		if (!grouped[groupName]) grouped[groupName] = [];
+		grouped[groupName].push(feature);
+	});
+	return grouped;
+});
+
+function handleViewFeature(id: string) {
+	console.log('Selected feature:', id);
+}
+
+function handleMoveFeature(id: string, startAt: Date, endAt: Date | null) {
+	features.value = features.value.map((f) => (f.id === id ? { ...f, startAt, endAt: endAt || f.endAt } : f));
+}
+
+function handleMoveMarker(id: string, newDate: Date) {
+	markers.value = markers.value.map((m) => (m.id === id ? { ...m, date: newDate } : m));
+}
+
+function handleCreateMarker(date: Date) {
+	markers.value.push({
+		id: Date.now().toString(),
+		date,
+		label: `Marker ${markers.value.length + 1}`,
+		className: 'bg-blue-100 text-blue-900',
+	});
+}
+
+function handleAddFeature(date: Date) {
+	features.value.push({
+		id: Date.now().toString(),
+		name: 'New Feature',
+		startAt: date,
+		endAt: new Date(date.getTime() + 30 * 24 * 60 * 60 * 1000),
+		status: { id: '1', name: 'Planned', color: '#6B7280' },
+		group: { id: '1', name: 'Planning' },
+	});
+}
+</script>
+```
+
+## Component API
+
+### `<Gantt>`
+
+Main container that provides context to all child components.
+
+| Prop           | Type                               | Default     | Description                 |
+| -------------- | ---------------------------------- | ----------- | --------------------------- |
+| `zoom`         | `number`                           | `100`       | Zoom level (25-300)         |
+| `range`        | `'daily' \| 'weekly' \| 'monthly'` | `'monthly'` | Timeline view range         |
+| `headerHeight` | `number`                           | `60`        | Header height in pixels     |
+| `columnWidth`  | `number`                           | `120`       | Column width in pixels      |
+| `sidebarWidth` | `number`                           | `320`       | Sidebar width in pixels     |
+| `rowHeight`    | `number`                           | `48`        | Row height in pixels        |
+| `onAddItem`    | `(date: Date) => void`             | -           | Callback when item is added |
+| `class`        | `string`                           | -           | Additional CSS classes      |
+
+### `<GanttSidebar>`
+
+Sidebar component for displaying feature list.
+
+| Prop    | Type     | Default      | Description            |
+| ------- | -------- | ------------ | ---------------------- |
+| `title` | `string` | `'Features'` | Sidebar header text    |
+| `class` | `string` | -            | Additional CSS classes |
+
+### `<GanttSidebarGroup>`
+
+Group header in sidebar.
+
+| Prop    | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `name`  | `string` | -       | Group name             |
+| `class` | `string` | -       | Additional CSS classes |
+
+### `<GanttSidebarItem>`
+
+Individual feature item in sidebar.
+
+| Prop      | Type           | Default | Description            |
+| --------- | -------------- | ------- | ---------------------- |
+| `feature` | `GanttFeature` | -       | Feature data           |
+| `class`   | `string`       | -       | Additional CSS classes |
+
+**Events:**
+
+- `@select-item` - `(id: string)` - Fired when item is clicked
+
+**Slots:**
+
+- `owner` - Custom owner avatar rendering
+
+### `<GanttFeatureItem>`
+
+Draggable and resizable feature bar in timeline.
+
+| Prop      | Type     | Default | Description            |
+| --------- | -------- | ------- | ---------------------- |
+| `id`      | `string` | -       | Feature ID             |
+| `name`    | `string` | -       | Feature name           |
+| `startAt` | `Date`   | -       | Start date             |
+| `endAt`   | `Date`   | -       | End date               |
+| `status`  | `object` | -       | Status with color      |
+| `owner`   | `object` | -       | Owner information      |
+| `group`   | `object` | -       | Group information      |
+| `class`   | `string` | -       | Additional CSS classes |
+
+**Events:**
+
+- `@move` - `(id: string, startAt: Date, endAt: Date | null)` - Fired when feature is moved or resized
+
+### `<GanttMarker>`
+
+Draggable timeline marker.
+
+| Prop        | Type                   | Default | Description        |
+| ----------- | ---------------------- | ------- | ------------------ |
+| `id`        | `string`               | -       | Marker ID          |
+| `date`      | `Date`                 | -       | Marker date        |
+| `label`     | `string`               | -       | Marker label       |
+| `className` | `string`               | -       | Custom CSS classes |
+| `onRemove`  | `(id: string) => void` | -       | Remove callback    |
+
+**Events:**
+
+- `@move` - `(id: string, newDate: Date)` - Fired when marker is moved
+
+### `<GanttZoomControls>`
+
+Zoom controls component. No props required - uses Gantt context.
+
+## Data Types
+
+### GanttFeature
+
+```typescript
+interface GanttFeature {
+	id: string;
+	name: string;
+	startAt: Date;
+	endAt: Date;
+	status?: { id: string; name: string; color: string };
+	owner?: { id: string; name: string; image: string };
+	group?: { id: string; name: string };
+	[key: string]: any; // Additional custom properties
+}
+```
+
+### GanttMarker
+
+```typescript
+interface GanttMarker {
+	id: string;
+	date: Date;
+	label: string;
+	className?: string;
+}
+```
+
+### GanttRange
+
+```typescript
+type GanttRange = 'daily' | 'weekly' | 'monthly';
+```
+
+## Using the Composable
+
+Access Gantt context from any child component:
+
+```typescript
+import { useGantt } from '@/components/gantt';
+
+const gantt = useGantt();
+
+// Access context
+console.log(gantt.zoom.value); // Current zoom level
+console.log(gantt.range.value); // Current range (daily/weekly/monthly)
+console.log(gantt.columnWidth.value); // Column width
+console.log(gantt.rowHeight.value); // Row height
+
+// Methods
+gantt.setZoom?.(150); // Set zoom to 150%
+gantt.scrollToFeature?.(feature); // Scroll to a feature
+```
+
+## Interactions
+
+### Task Bars
+
+- **Drag**: Click and drag the center to move the entire task
+- **Resize**: Hover over left/right edges to see resize handles, drag to adjust duration
+- **Tooltips**: Hover over resize handles to see start/end dates
+- **Visual Feedback**: During drag/resize, tooltips show current dates
+
+### Markers
+
+- **Drag**: Click and drag markers to move them along the timeline
+- **Create**: Use `GanttCreateMarkerTrigger` to enable click-to-create on empty areas
+- **Remove**: Pass `onRemove` callback to show remove button on hover
+- **Tooltips**: Display date on hover and during drag
+
+### Timeline
+
+- **Infinite Scroll**: Timeline automatically extends when scrolling to edges
+- **Zoom**: Zoom in (up to 300%) or out (down to 25%) using zoom controls
+- **Synchronized Scrolling**: Sidebar and timeline scroll together vertically
+
+### Controls
+
+- **Zoom Controls**: `<GanttZoomControls />` provides zoom in/out/reset buttons
+- **Fullscreen**: Implement your own fullscreen wrapper
+- **Keyboard Shortcuts**: Customize in your implementation
+
+## Styling
+
+All components accept a `class` prop for custom styling. The components use CSS variables for theming:
+
+```css
+.gantt {
+	--gantt-zoom: 100%;
+	--gantt-header-height: 60px;
+	--gantt-column-width: 120px;
+	--gantt-sidebar-width: 320px;
+	--gantt-row-height: 48px;
+}
+```
+
+Colors are based on your Tailwind/CSS custom properties:
+
+- `--card`, `--background`, `--foreground`
+- `--muted`, `--accent`, `--border`
+- etc.
+
+## Dependencies
+
+- `vue` - ^3.0.0
+- `class-variance-authority` - Component variants
+- `clsx` - Class name utility
+- `tailwind-merge` - Tailwind class merging
+
+## Installation
+
+```bash
+npx ayze-ui@latest add gantt
+```
+
+This will install all Gantt components, the composable, and all dependencies.
+
+## License
+
+MIT

package/src/runtime/components/ui/gantt/index.ts

@@ -0,0 +1,18 @@
+// Gantt components
+export { default as Gantt } from './Gantt.vue';
+export { default as GanttSidebar } from './GanttSidebar.vue';
+export { default as GanttSidebarGroup } from './GanttSidebarGroup.vue';
+export { default as GanttSidebarItem } from './GanttSidebarItem.vue';
+export { default as GanttTimeline } from './GanttTimeline.vue';
+export { default as GanttHeader } from './GanttHeader.vue';
+export { default as GanttFeatureList } from './GanttFeatureList.vue';
+export { default as GanttFeatureListGroup } from './GanttFeatureListGroup.vue';
+export { default as GanttFeatureItem } from './GanttFeatureItem.vue';
+export { default as GanttMarker } from './GanttMarker.vue';
+export { default as GanttToday } from './GanttToday.vue';
+export { default as GanttCreateMarkerTrigger } from './GanttCreateMarkerTrigger.vue';
+export { default as GanttZoomControls } from './GanttZoomControls.vue';
+
+// Gantt composable and types
+export type { GanttFeature, GanttRange } from '@/composables/useGantt';
+export type { GanttMarkerProps } from './GanttMarker.vue';

package/src/runtime/components/ui/gantt/meta.json

@@ -0,0 +1,96 @@
+{
+	"name": "gantt",
+	"type": "ui",
+	"framework": "vue",
+	"dependencies": ["vue", "class-variance-authority", "clsx", "tailwind-merge"],
+	"description": "A comprehensive Gantt chart component with drag-and-drop functionality, resizable bars, draggable markers, and fullscreen mode",
+	"features": [
+		"Interactive timeline with zoom controls",
+		"Draggable and resizable task bars",
+		"Draggable markers with tooltips",
+		"Fullscreen mode support",
+		"Responsive design",
+		"Keyboard shortcuts (F11, Escape)",
+		"Real-time date tooltips",
+		"Customizable styling",
+		"Composable architecture with 13+ components",
+		"Infinite scroll timeline",
+		"Multiple view ranges (daily, weekly, monthly)"
+	],
+	"category": "data-visualization",
+	"tags": ["gantt", "timeline", "project-management", "charts", "interactive"],
+	"version": "1.0.0",
+	"author": "ayze-ui",
+	"files": [
+		{
+			"name": "ui/Gantt.vue",
+			"type": "component",
+			"path": "Gantt.vue"
+		},
+		{
+			"name": "ui/GanttSidebar.vue",
+			"type": "component",
+			"path": "GanttSidebar.vue"
+		},
+		{
+			"name": "ui/GanttSidebarGroup.vue",
+			"type": "component",
+			"path": "GanttSidebarGroup.vue"
+		},
+		{
+			"name": "ui/GanttSidebarItem.vue",
+			"type": "component",
+			"path": "GanttSidebarItem.vue"
+		},
+		{
+			"name": "ui/GanttTimeline.vue",
+			"type": "component",
+			"path": "GanttTimeline.vue"
+		},
+		{
+			"name": "ui/GanttHeader.vue",
+			"type": "component",
+			"path": "GanttHeader.vue"
+		},
+		{
+			"name": "ui/GanttFeatureList.vue",
+			"type": "component",
+			"path": "GanttFeatureList.vue"
+		},
+		{
+			"name": "ui/GanttFeatureListGroup.vue",
+			"type": "component",
+			"path": "GanttFeatureListGroup.vue"
+		},
+		{
+			"name": "ui/GanttFeatureItem.vue",
+			"type": "component",
+			"path": "GanttFeatureItem.vue"
+		},
+		{
+			"name": "ui/GanttMarker.vue",
+			"type": "component",
+			"path": "GanttMarker.vue"
+		},
+		{
+			"name": "ui/GanttToday.vue",
+			"type": "component",
+			"path": "GanttToday.vue"
+		},
+		{
+			"name": "ui/GanttCreateMarkerTrigger.vue",
+			"type": "component",
+			"path": "GanttCreateMarkerTrigger.vue"
+		},
+		{
+			"name": "ui/GanttZoomControls.vue",
+			"type": "component",
+			"path": "GanttZoomControls.vue"
+		},
+		{
+			"name": "composables/useGantt.ts",
+			"type": "composable",
+			"path": "useGantt.ts"
+		}
+	]
+}

package/src/runtime/components/ui/hover-card/HoverCard.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui';
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<HoverCardRootProps>();
+const emits = defineEmits<HoverCardRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<HoverCardRoot v-slot="slotProps" data-slot="hover-card" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</HoverCardRoot>
+</template>

package/src/runtime/components/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(), {
+	sideOffset: 4,
+});
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<HoverCardPortal>
+		<HoverCardContent
+			data-slot="hover-card-content"
+			v-bind="{ ...$attrs, ...forwardedProps }"
+			:class="
+				cn(
+					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</HoverCardContent>
+	</HoverCardPortal>
+</template>

package/src/runtime/components/ui/hover-card/HoverCardTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from 'reka-ui';
+import { HoverCardTrigger } from 'reka-ui';
+
+const props = defineProps<HoverCardTriggerProps>();
+</script>
+
+<template>
+	<HoverCardTrigger data-slot="hover-card-trigger" v-bind="props">
+		<slot />
+	</HoverCardTrigger>
+</template>

package/src/runtime/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue';
+export { default as HoverCardContent } from './HoverCardContent.vue';
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue';

package/src/runtime/components/ui/inline-editable-input/InlineEditableInput.vue

@@ -0,0 +1,126 @@
+<template>
+	<input
+		ref="inputRef"
+		:contenteditable="!disabled"
+		:aria-placeholder="placeholder"
+		:aria-disabled="disabled"
+		:aria-multiline="multiline"
+		:data-placeholder="placeholder"
+		:class="cn(props.class, { 'is-empty': !model })"
+		tabindex="0"
+		spellcheck="false"
+		@input="handleInput"
+		@keydown="handleKeydown"
+		@blur="handleBlur"
+		@focus="handleFocus"
+		@paste="handlePaste"
+	>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+interface Props {
+	placeholder?: string;
+	disabled?: boolean;
+	multiline?: boolean;
+	autoSave?: boolean;
+	class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	placeholder: 'Enter text...',
+	disabled: false,
+	multiline: false,
+	autoSave: false,
+	class: '',
+});
+
+const model = defineModel<string>({ default: '' });
+
+const emit = defineEmits<{
+	save: [value: string];
+	cancel: [];
+	blur: [value: string];
+	focus: [event: FocusEvent];
+}>();
+
+const inputRef = ref<HTMLDivElement | null>(null);
+const isFocused = ref(false);
+
+// Sync external value changes to the DOM
+watch(model, (newValue) => {
+	if (inputRef.value && inputRef.value.textContent !== newValue) {
+		// Only update if not focused to avoid cursor jumping,
+		// or if focused but the value is completely different (e.g. reset)
+		if (!isFocused.value) {
+			inputRef.value.textContent = newValue;
+		}
+	}
+});
+
+onMounted(() => {
+	if (inputRef.value) {
+		inputRef.value.textContent = model.value;
+	}
+});
+
+const handleInput = (event: Event) => {
+	const target = event.target as HTMLDivElement;
+	const value = target.textContent || '';
+	model.value = value;
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+	if (event.key === 'Enter') {
+		// Allow Shift+Enter for new lines in multiline mode
+		if (props.multiline && event.shiftKey) return;
+
+		event.preventDefault();
+		const value = inputRef.value?.textContent?.trim() || '';
+		inputRef.value?.blur(); // Trigger blur which handles save if autoSave is on
+		emit('save', value);
+	} else if (event.key === 'Escape') {
+		event.preventDefault();
+		// Revert to original value if needed, or just blur
+		if (inputRef.value) {
+			inputRef.value.textContent = model.value; // Revert visual
+		}
+		inputRef.value?.blur();
+		emit('cancel');
+	}
+};
+
+const handleBlur = (event: FocusEvent) => {
+	isFocused.value = false;
+	const value = inputRef.value?.textContent?.trim() || '';
+	emit('blur', value);
+
+	if (props.autoSave && value !== model.value) {
+		emit('save', value);
+	}
+};
+
+const handleFocus = (event: FocusEvent) => {
+	isFocused.value = true;
+	emit('focus', event);
+};
+
+// Strip rich text on paste
+const handlePaste = (event: ClipboardEvent) => {
+	event.preventDefault();
+	const text = event.clipboardData?.getData('text/plain') || '';
+	// deprecated but widely supported for contenteditable
+	document.execCommand('insertText', false, text);
+};
+</script>
+
+<style scoped>
+.is-empty:before {
+	content: attr(data-placeholder);
+	font-size: 14px;
+	color: var(--color-muted-foreground);
+	pointer-events: none;
+	display: block; /* For Firefox */
+}
+</style>

package/src/runtime/components/ui/inline-editable-input/index.ts

@@ -0,0 +1 @@
+export { default as InlineEditableInput } from './InlineEditableInput.vue';