@joewinke/jatui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -1
- package/src/lib/components/EmojiPicker.svelte +157 -0
- package/src/lib/components/LinkShortener.svelte +274 -0
- package/src/lib/components/SearchDropdown.svelte +40 -32
- package/src/lib/components/pipeline/DESIGN.md +361 -0
- package/src/lib/components/pipeline/Pipeline.svelte +391 -0
- package/src/lib/components/pipeline/PipelineCard.svelte +94 -0
- package/src/lib/components/pipeline/PipelineColumn.svelte +158 -0
- package/src/lib/data/emojis.ts +1208 -0
- package/src/lib/index.ts +37 -0
- package/src/lib/types/pipeline.ts +150 -0
package/src/lib/index.ts
CHANGED
|
@@ -36,6 +36,16 @@ export { default as SpeechForm } from './components/SpeechForm.svelte';
|
|
|
36
36
|
export { default as ThemeSelector } from './components/ThemeSelector.svelte';
|
|
37
37
|
export { default as Sparkline } from './components/Sparkline.svelte';
|
|
38
38
|
|
|
39
|
+
// Components — Emoji
|
|
40
|
+
export { default as EmojiPicker } from './components/EmojiPicker.svelte';
|
|
41
|
+
|
|
42
|
+
// Emoji data
|
|
43
|
+
export { EMOJI_DATA, ALL_EMOJIS, searchEmojis } from './data/emojis';
|
|
44
|
+
export type { EmojiEntry, EmojiGroup } from './data/emojis';
|
|
45
|
+
|
|
46
|
+
// Components — from Meadow
|
|
47
|
+
export { default as LinkShortener } from './components/LinkShortener.svelte';
|
|
48
|
+
|
|
39
49
|
// Components — from Marduk
|
|
40
50
|
export { default as SignaturePad } from './components/SignaturePad.svelte';
|
|
41
51
|
export { default as TimeSlotPicker } from './components/TimeSlotPicker.svelte';
|
|
@@ -43,6 +53,9 @@ export { default as CalendarPicker } from './components/CalendarPicker.svelte';
|
|
|
43
53
|
export { default as AvailabilityModal } from './components/AvailabilityModal.svelte';
|
|
44
54
|
export { default as BookingForm } from './components/BookingForm.svelte';
|
|
45
55
|
|
|
56
|
+
// Component types — Meadow
|
|
57
|
+
export type { ShortenedLink } from './components/LinkShortener.svelte';
|
|
58
|
+
|
|
46
59
|
// Component types — JAT IDE
|
|
47
60
|
export type { SearchDropdownOption, SearchDropdownGroup } from './components/SearchDropdown.svelte';
|
|
48
61
|
export type { ChipSuggestion, SuggestionGroup, ChipInfo } from './components/ChipInput.svelte';
|
|
@@ -170,6 +183,30 @@ export {
|
|
|
170
183
|
DEFAULT_QUICK_REACTIONS
|
|
171
184
|
} from './types/messaging';
|
|
172
185
|
|
|
186
|
+
// Components — Pipeline
|
|
187
|
+
export { default as Pipeline } from './components/pipeline/Pipeline.svelte';
|
|
188
|
+
export { default as PipelineColumn } from './components/pipeline/PipelineColumn.svelte';
|
|
189
|
+
export { default as PipelineCard } from './components/pipeline/PipelineCard.svelte';
|
|
190
|
+
|
|
191
|
+
// Pipeline types
|
|
192
|
+
export type {
|
|
193
|
+
PipelineStage,
|
|
194
|
+
StageColors,
|
|
195
|
+
PipelineItem,
|
|
196
|
+
PipelineMetric,
|
|
197
|
+
StageMetrics,
|
|
198
|
+
PipelineViewMode,
|
|
199
|
+
PipelineTableColumn,
|
|
200
|
+
PipelineDragConfig,
|
|
201
|
+
PipelineConfig,
|
|
202
|
+
PipelineStageChangeEvent,
|
|
203
|
+
PipelineItemClickEvent
|
|
204
|
+
} from './types/pipeline';
|
|
205
|
+
export {
|
|
206
|
+
DEFAULT_DRAG_CONFIG,
|
|
207
|
+
DEFAULT_PIPELINE_CONFIG
|
|
208
|
+
} from './types/pipeline';
|
|
209
|
+
|
|
173
210
|
// Utilities — mention parsing
|
|
174
211
|
export {
|
|
175
212
|
parseMentions,
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
// ─── Core Stage/Column Types ───
|
|
2
|
+
|
|
3
|
+
/** A single stage (column) in the pipeline */
|
|
4
|
+
export interface PipelineStage {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
order: number;
|
|
8
|
+
/** oklch color string, e.g. "oklch(0.70 0.18 240)" */
|
|
9
|
+
color?: string;
|
|
10
|
+
/** DaisyUI semantic color fallback: "primary" | "secondary" | "success" | "warning" | "error" | "info" */
|
|
11
|
+
semantic?: string;
|
|
12
|
+
/** Optional icon (SVG path or component name) */
|
|
13
|
+
icon?: string;
|
|
14
|
+
/** Whether cards can be dragged out of this column */
|
|
15
|
+
draggableOut?: boolean;
|
|
16
|
+
/** Whether cards can be dropped into this column */
|
|
17
|
+
droppableIn?: boolean;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/** Resolved colors for a stage, computed from PipelineStage.color or .semantic */
|
|
21
|
+
export interface StageColors {
|
|
22
|
+
bg: string;
|
|
23
|
+
text: string;
|
|
24
|
+
border: string;
|
|
25
|
+
accent: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// ─── Item Types ───
|
|
29
|
+
|
|
30
|
+
/** A single item (card) in the pipeline. Generic — consumers extend with their own fields. */
|
|
31
|
+
export interface PipelineItem {
|
|
32
|
+
id: string;
|
|
33
|
+
stageId: string;
|
|
34
|
+
title: string;
|
|
35
|
+
/** Optional subtitle (e.g. client name, company) */
|
|
36
|
+
subtitle?: string;
|
|
37
|
+
/** Numeric value for metrics aggregation (e.g. deal value, session cost) */
|
|
38
|
+
value?: number;
|
|
39
|
+
/** ISO date string — when the item entered the current stage */
|
|
40
|
+
stageEnteredAt?: string;
|
|
41
|
+
/** ISO date string — expected completion/close date */
|
|
42
|
+
expectedDate?: string;
|
|
43
|
+
/** Priority: 0 = highest */
|
|
44
|
+
priority?: number;
|
|
45
|
+
/** Assignee name or ID */
|
|
46
|
+
assignee?: string;
|
|
47
|
+
/** Freeform labels/tags */
|
|
48
|
+
labels?: string[];
|
|
49
|
+
/** Arbitrary metadata for card snippets to consume */
|
|
50
|
+
meta?: Record<string, unknown>;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// ─── Metrics Types ───
|
|
54
|
+
|
|
55
|
+
/** A single metric to display in the pipeline header */
|
|
56
|
+
export interface PipelineMetric {
|
|
57
|
+
label: string;
|
|
58
|
+
value: string | number;
|
|
59
|
+
/** Optional format hint: "currency" | "percent" | "number" */
|
|
60
|
+
format?: 'currency' | 'percent' | 'number';
|
|
61
|
+
/** Change from previous period, e.g. +5 or -2.3 */
|
|
62
|
+
change?: number;
|
|
63
|
+
/** DaisyUI color for the metric card */
|
|
64
|
+
color?: string;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/** Per-stage aggregate computed by the Pipeline component */
|
|
68
|
+
export interface StageMetrics {
|
|
69
|
+
stageId: string;
|
|
70
|
+
count: number;
|
|
71
|
+
totalValue: number;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// ─── Configuration Types ───
|
|
75
|
+
|
|
76
|
+
/** View mode for the pipeline display */
|
|
77
|
+
export type PipelineViewMode = 'kanban' | 'table';
|
|
78
|
+
|
|
79
|
+
/** Table column definition for table view */
|
|
80
|
+
export interface PipelineTableColumn {
|
|
81
|
+
key: string;
|
|
82
|
+
label: string;
|
|
83
|
+
/** Width hint: "sm" (80px) | "md" (120px) | "lg" (200px) | "flex" (fill) */
|
|
84
|
+
width?: 'sm' | 'md' | 'lg' | 'flex';
|
|
85
|
+
/** Sort direction if sortable */
|
|
86
|
+
sortable?: boolean;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/** Drag-drop configuration */
|
|
90
|
+
export interface PipelineDragConfig {
|
|
91
|
+
enabled: boolean;
|
|
92
|
+
/** Duration for flip animation in ms (default: 200) */
|
|
93
|
+
flipDurationMs?: number;
|
|
94
|
+
/** CSS class applied to the drop zone during drag */
|
|
95
|
+
dropTargetClass?: string;
|
|
96
|
+
/** Stage IDs where drag is disabled (overrides per-stage draggableOut/droppableIn) */
|
|
97
|
+
disabledStages?: string[];
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/** Top-level pipeline configuration */
|
|
101
|
+
export interface PipelineConfig {
|
|
102
|
+
/** Which views are available */
|
|
103
|
+
views?: PipelineViewMode[];
|
|
104
|
+
/** Default view on mount */
|
|
105
|
+
defaultView?: PipelineViewMode;
|
|
106
|
+
/** Drag-drop settings */
|
|
107
|
+
drag?: PipelineDragConfig;
|
|
108
|
+
/** Whether columns can be collapsed */
|
|
109
|
+
collapsible?: boolean;
|
|
110
|
+
/** Column min-height in px (default: 200) */
|
|
111
|
+
columnMinHeight?: number;
|
|
112
|
+
/** Table columns for table view */
|
|
113
|
+
tableColumns?: PipelineTableColumn[];
|
|
114
|
+
/** Currency code for value formatting (default: "USD") */
|
|
115
|
+
currency?: string;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// ─── Event Types ───
|
|
119
|
+
|
|
120
|
+
/** Fired when an item is moved between stages via drag-drop */
|
|
121
|
+
export interface PipelineStageChangeEvent {
|
|
122
|
+
itemId: string;
|
|
123
|
+
fromStageId: string;
|
|
124
|
+
toStageId: string;
|
|
125
|
+
/** New index within the target stage */
|
|
126
|
+
newIndex: number;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/** Fired when an item is clicked */
|
|
130
|
+
export interface PipelineItemClickEvent {
|
|
131
|
+
item: PipelineItem;
|
|
132
|
+
stageId: string;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// ─── Defaults ───
|
|
136
|
+
|
|
137
|
+
export const DEFAULT_DRAG_CONFIG: PipelineDragConfig = {
|
|
138
|
+
enabled: true,
|
|
139
|
+
flipDurationMs: 200,
|
|
140
|
+
dropTargetClass: 'outline-dashed outline-2 outline-base-content/20'
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
export const DEFAULT_PIPELINE_CONFIG: PipelineConfig = {
|
|
144
|
+
views: ['kanban'],
|
|
145
|
+
defaultView: 'kanban',
|
|
146
|
+
drag: DEFAULT_DRAG_CONFIG,
|
|
147
|
+
collapsible: true,
|
|
148
|
+
columnMinHeight: 200,
|
|
149
|
+
currency: 'USD'
|
|
150
|
+
};
|