@glyphjs/components 0.1.0 → 0.2.0
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/dist/index.cjs +2347 -351
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +184 -11
- package/dist/index.d.ts +184 -11
- package/dist/index.js +2333 -353
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/index.d.cts
CHANGED
|
@@ -40,7 +40,7 @@ type DataRecord = Record<string, number | string>;
|
|
|
40
40
|
* Renders a D3-powered chart supporting line, bar, area, and OHLC types.
|
|
41
41
|
* Uses CSS variables for theming and includes accessibility features.
|
|
42
42
|
*/
|
|
43
|
-
declare function Chart({ data, container: containerCtx, }: GlyphComponentProps<ChartData>): ReactElement;
|
|
43
|
+
declare function Chart({ data, block, container: containerCtx, onInteraction, }: GlyphComponentProps<ChartData>): ReactElement;
|
|
44
44
|
|
|
45
45
|
declare const chartDefinition: GlyphComponentDefinition;
|
|
46
46
|
|
|
@@ -88,7 +88,7 @@ interface TableData {
|
|
|
88
88
|
* and aggregation. Styling is driven by `--glyph-table-*` CSS custom
|
|
89
89
|
* properties so consumers can re-theme via the Glyph theme system.
|
|
90
90
|
*/
|
|
91
|
-
declare function Table({ data, container }: GlyphComponentProps<TableData>): ReactElement;
|
|
91
|
+
declare function Table({ data, block, container, onInteraction, }: GlyphComponentProps<TableData>): ReactElement;
|
|
92
92
|
|
|
93
93
|
declare const tableDefinition: GlyphComponentDefinition<TableData>;
|
|
94
94
|
|
|
@@ -108,7 +108,7 @@ interface TabsData {
|
|
|
108
108
|
* - ARIA roles: tablist, tab, tabpanel with proper aria-selected, aria-controls,
|
|
109
109
|
* and aria-labelledby attributes.
|
|
110
110
|
*/
|
|
111
|
-
declare function Tabs({ data, block }: GlyphComponentProps<TabsData>): react_jsx_runtime.JSX.Element;
|
|
111
|
+
declare function Tabs({ data, block, onInteraction }: GlyphComponentProps<TabsData>): react_jsx_runtime.JSX.Element;
|
|
112
112
|
|
|
113
113
|
declare const tabsDefinition: GlyphComponentDefinition<TabsData>;
|
|
114
114
|
|
|
@@ -156,7 +156,7 @@ interface GraphData {
|
|
|
156
156
|
edges: GraphEdgeData[];
|
|
157
157
|
layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
|
|
158
158
|
}
|
|
159
|
-
declare function Graph({ data, outgoingRefs, onNavigate, container, }: GlyphComponentProps<GraphData>): ReactElement;
|
|
159
|
+
declare function Graph({ data, block, outgoingRefs, onNavigate, onInteraction, container, }: GlyphComponentProps<GraphData>): ReactElement;
|
|
160
160
|
|
|
161
161
|
interface PositionedNode extends GraphNode {
|
|
162
162
|
x: number;
|
|
@@ -243,7 +243,7 @@ interface AccordionData {
|
|
|
243
243
|
defaultOpen?: number[];
|
|
244
244
|
multiple?: boolean;
|
|
245
245
|
}
|
|
246
|
-
declare function Accordion({ data, block }: GlyphComponentProps<AccordionData>): ReactElement;
|
|
246
|
+
declare function Accordion({ data, block, onInteraction, }: GlyphComponentProps<AccordionData>): ReactElement;
|
|
247
247
|
|
|
248
248
|
declare const accordionDefinition: GlyphComponentDefinition<AccordionData>;
|
|
249
249
|
|
|
@@ -260,7 +260,7 @@ interface ComparisonData {
|
|
|
260
260
|
options: ComparisonOption[];
|
|
261
261
|
features: ComparisonFeature[];
|
|
262
262
|
}
|
|
263
|
-
declare function Comparison({ data, block, container, }: GlyphComponentProps<ComparisonData>): ReactElement;
|
|
263
|
+
declare function Comparison({ data, block, container, onInteraction, }: GlyphComponentProps<ComparisonData>): ReactElement;
|
|
264
264
|
|
|
265
265
|
declare const comparisonDefinition: GlyphComponentDefinition<ComparisonData>;
|
|
266
266
|
|
|
@@ -320,7 +320,7 @@ interface FileTreeData {
|
|
|
320
320
|
tree: FileNode[];
|
|
321
321
|
defaultExpanded: boolean;
|
|
322
322
|
}
|
|
323
|
-
declare function FileTree({ data }: GlyphComponentProps<FileTreeData>): ReactElement;
|
|
323
|
+
declare function FileTree({ data, block, onInteraction, }: GlyphComponentProps<FileTreeData>): ReactElement;
|
|
324
324
|
|
|
325
325
|
declare const fileTreeDefinition: GlyphComponentDefinition<FileTreeData>;
|
|
326
326
|
|
|
@@ -460,7 +460,7 @@ interface QuizData {
|
|
|
460
460
|
showScore?: boolean;
|
|
461
461
|
title?: string;
|
|
462
462
|
}
|
|
463
|
-
declare function Quiz({ data, block }: GlyphComponentProps<QuizData>): ReactElement;
|
|
463
|
+
declare function Quiz({ data, block, onInteraction }: GlyphComponentProps<QuizData>): ReactElement;
|
|
464
464
|
|
|
465
465
|
declare const quizDefinition: GlyphComponentDefinition<QuizData>;
|
|
466
466
|
|
|
@@ -523,14 +523,14 @@ interface DividerItem {
|
|
|
523
523
|
type: 'divider';
|
|
524
524
|
style?: 'solid' | 'dashed' | 'dotted';
|
|
525
525
|
}
|
|
526
|
-
interface RatingItem {
|
|
526
|
+
interface RatingItem$1 {
|
|
527
527
|
type: 'rating';
|
|
528
528
|
label: string;
|
|
529
529
|
value: number;
|
|
530
530
|
max?: number;
|
|
531
531
|
description?: string;
|
|
532
532
|
}
|
|
533
|
-
type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem;
|
|
533
|
+
type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem$1;
|
|
534
534
|
interface InfographicSection {
|
|
535
535
|
heading?: string;
|
|
536
536
|
items: InfographicItem[];
|
|
@@ -543,4 +543,177 @@ declare function Infographic({ data, block, container, }: GlyphComponentProps<In
|
|
|
543
543
|
|
|
544
544
|
declare const infographicDefinition: GlyphComponentDefinition<InfographicData>;
|
|
545
545
|
|
|
546
|
-
|
|
546
|
+
interface PollData {
|
|
547
|
+
question: string;
|
|
548
|
+
options: string[];
|
|
549
|
+
multiple?: boolean;
|
|
550
|
+
showResults?: boolean;
|
|
551
|
+
title?: string;
|
|
552
|
+
}
|
|
553
|
+
declare function Poll({ data, block, onInteraction }: GlyphComponentProps<PollData>): ReactElement;
|
|
554
|
+
|
|
555
|
+
declare const pollDefinition: GlyphComponentDefinition<PollData>;
|
|
556
|
+
|
|
557
|
+
interface RatingItem {
|
|
558
|
+
label: string;
|
|
559
|
+
description?: string;
|
|
560
|
+
}
|
|
561
|
+
interface RatingData {
|
|
562
|
+
title?: string;
|
|
563
|
+
scale?: number;
|
|
564
|
+
mode?: 'star' | 'number';
|
|
565
|
+
labels?: {
|
|
566
|
+
low: string;
|
|
567
|
+
high: string;
|
|
568
|
+
};
|
|
569
|
+
items: RatingItem[];
|
|
570
|
+
}
|
|
571
|
+
declare function Rating({ data, block, onInteraction, }: GlyphComponentProps<RatingData>): ReactElement;
|
|
572
|
+
|
|
573
|
+
declare const ratingDefinition: GlyphComponentDefinition<RatingData>;
|
|
574
|
+
|
|
575
|
+
interface RankerItemData {
|
|
576
|
+
id: string;
|
|
577
|
+
label: string;
|
|
578
|
+
description?: string;
|
|
579
|
+
}
|
|
580
|
+
interface RankerData {
|
|
581
|
+
title?: string;
|
|
582
|
+
items: RankerItemData[];
|
|
583
|
+
}
|
|
584
|
+
declare function Ranker({ data, block, onInteraction, }: GlyphComponentProps<RankerData>): ReactElement;
|
|
585
|
+
|
|
586
|
+
declare const rankerDefinition: GlyphComponentDefinition<RankerData>;
|
|
587
|
+
|
|
588
|
+
interface SliderParameter {
|
|
589
|
+
id: string;
|
|
590
|
+
label: string;
|
|
591
|
+
min?: number;
|
|
592
|
+
max?: number;
|
|
593
|
+
step?: number;
|
|
594
|
+
value?: number;
|
|
595
|
+
unit?: string;
|
|
596
|
+
}
|
|
597
|
+
interface SliderData {
|
|
598
|
+
title?: string;
|
|
599
|
+
layout?: 'vertical' | 'horizontal';
|
|
600
|
+
parameters: SliderParameter[];
|
|
601
|
+
}
|
|
602
|
+
declare function Slider({ data, block, onInteraction, }: GlyphComponentProps<SliderData>): ReactElement;
|
|
603
|
+
|
|
604
|
+
declare const sliderDefinition: GlyphComponentDefinition<SliderData>;
|
|
605
|
+
|
|
606
|
+
interface MatrixColumn {
|
|
607
|
+
id: string;
|
|
608
|
+
label: string;
|
|
609
|
+
weight?: number;
|
|
610
|
+
}
|
|
611
|
+
interface MatrixRow {
|
|
612
|
+
id: string;
|
|
613
|
+
label: string;
|
|
614
|
+
}
|
|
615
|
+
interface MatrixData {
|
|
616
|
+
title?: string;
|
|
617
|
+
scale?: number;
|
|
618
|
+
showTotals?: boolean;
|
|
619
|
+
columns: MatrixColumn[];
|
|
620
|
+
rows: MatrixRow[];
|
|
621
|
+
}
|
|
622
|
+
declare function Matrix({ data, block, onInteraction, }: GlyphComponentProps<MatrixData>): ReactElement;
|
|
623
|
+
|
|
624
|
+
declare const matrixDefinition: GlyphComponentDefinition<MatrixData>;
|
|
625
|
+
|
|
626
|
+
interface TextField {
|
|
627
|
+
type: 'text';
|
|
628
|
+
id: string;
|
|
629
|
+
label: string;
|
|
630
|
+
required?: boolean;
|
|
631
|
+
default?: string;
|
|
632
|
+
placeholder?: string;
|
|
633
|
+
}
|
|
634
|
+
interface TextareaField {
|
|
635
|
+
type: 'textarea';
|
|
636
|
+
id: string;
|
|
637
|
+
label: string;
|
|
638
|
+
required?: boolean;
|
|
639
|
+
default?: string;
|
|
640
|
+
placeholder?: string;
|
|
641
|
+
rows?: number;
|
|
642
|
+
}
|
|
643
|
+
interface SelectField {
|
|
644
|
+
type: 'select';
|
|
645
|
+
id: string;
|
|
646
|
+
label: string;
|
|
647
|
+
required?: boolean;
|
|
648
|
+
options: string[];
|
|
649
|
+
default?: string;
|
|
650
|
+
}
|
|
651
|
+
interface CheckboxField {
|
|
652
|
+
type: 'checkbox';
|
|
653
|
+
id: string;
|
|
654
|
+
label: string;
|
|
655
|
+
default?: boolean;
|
|
656
|
+
}
|
|
657
|
+
interface RangeField {
|
|
658
|
+
type: 'range';
|
|
659
|
+
id: string;
|
|
660
|
+
label: string;
|
|
661
|
+
min?: number;
|
|
662
|
+
max?: number;
|
|
663
|
+
step?: number;
|
|
664
|
+
default?: number;
|
|
665
|
+
unit?: string;
|
|
666
|
+
}
|
|
667
|
+
type FormField = TextField | TextareaField | SelectField | CheckboxField | RangeField;
|
|
668
|
+
interface FormData {
|
|
669
|
+
title?: string;
|
|
670
|
+
description?: string;
|
|
671
|
+
submitLabel?: string;
|
|
672
|
+
fields: FormField[];
|
|
673
|
+
}
|
|
674
|
+
declare function Form({ data, block, onInteraction }: GlyphComponentProps<FormData>): ReactElement;
|
|
675
|
+
|
|
676
|
+
declare const formDefinition: GlyphComponentDefinition<FormData>;
|
|
677
|
+
|
|
678
|
+
interface KanbanCard {
|
|
679
|
+
id: string;
|
|
680
|
+
title: string;
|
|
681
|
+
description?: string;
|
|
682
|
+
priority?: 'high' | 'medium' | 'low';
|
|
683
|
+
tags?: string[];
|
|
684
|
+
}
|
|
685
|
+
interface KanbanColumn {
|
|
686
|
+
id: string;
|
|
687
|
+
title: string;
|
|
688
|
+
cards: KanbanCard[];
|
|
689
|
+
limit?: number;
|
|
690
|
+
}
|
|
691
|
+
interface KanbanData {
|
|
692
|
+
title?: string;
|
|
693
|
+
columns: KanbanColumn[];
|
|
694
|
+
}
|
|
695
|
+
declare function Kanban({ data, block, onInteraction, }: GlyphComponentProps<KanbanData>): ReactElement;
|
|
696
|
+
|
|
697
|
+
declare const kanbanDefinition: GlyphComponentDefinition<KanbanData>;
|
|
698
|
+
|
|
699
|
+
interface AnnotateLabel {
|
|
700
|
+
name: string;
|
|
701
|
+
color: string;
|
|
702
|
+
}
|
|
703
|
+
interface Annotation {
|
|
704
|
+
start: number;
|
|
705
|
+
end: number;
|
|
706
|
+
label: string;
|
|
707
|
+
note?: string;
|
|
708
|
+
}
|
|
709
|
+
interface AnnotateData {
|
|
710
|
+
title?: string;
|
|
711
|
+
labels: AnnotateLabel[];
|
|
712
|
+
text: string;
|
|
713
|
+
annotations?: Annotation[];
|
|
714
|
+
}
|
|
715
|
+
declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<AnnotateData>): ReactElement;
|
|
716
|
+
|
|
717
|
+
declare const annotateDefinition: GlyphComponentDefinition<AnnotateData>;
|
|
718
|
+
|
|
719
|
+
export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
|
package/dist/index.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ type DataRecord = Record<string, number | string>;
|
|
|
40
40
|
* Renders a D3-powered chart supporting line, bar, area, and OHLC types.
|
|
41
41
|
* Uses CSS variables for theming and includes accessibility features.
|
|
42
42
|
*/
|
|
43
|
-
declare function Chart({ data, container: containerCtx, }: GlyphComponentProps<ChartData>): ReactElement;
|
|
43
|
+
declare function Chart({ data, block, container: containerCtx, onInteraction, }: GlyphComponentProps<ChartData>): ReactElement;
|
|
44
44
|
|
|
45
45
|
declare const chartDefinition: GlyphComponentDefinition;
|
|
46
46
|
|
|
@@ -88,7 +88,7 @@ interface TableData {
|
|
|
88
88
|
* and aggregation. Styling is driven by `--glyph-table-*` CSS custom
|
|
89
89
|
* properties so consumers can re-theme via the Glyph theme system.
|
|
90
90
|
*/
|
|
91
|
-
declare function Table({ data, container }: GlyphComponentProps<TableData>): ReactElement;
|
|
91
|
+
declare function Table({ data, block, container, onInteraction, }: GlyphComponentProps<TableData>): ReactElement;
|
|
92
92
|
|
|
93
93
|
declare const tableDefinition: GlyphComponentDefinition<TableData>;
|
|
94
94
|
|
|
@@ -108,7 +108,7 @@ interface TabsData {
|
|
|
108
108
|
* - ARIA roles: tablist, tab, tabpanel with proper aria-selected, aria-controls,
|
|
109
109
|
* and aria-labelledby attributes.
|
|
110
110
|
*/
|
|
111
|
-
declare function Tabs({ data, block }: GlyphComponentProps<TabsData>): react_jsx_runtime.JSX.Element;
|
|
111
|
+
declare function Tabs({ data, block, onInteraction }: GlyphComponentProps<TabsData>): react_jsx_runtime.JSX.Element;
|
|
112
112
|
|
|
113
113
|
declare const tabsDefinition: GlyphComponentDefinition<TabsData>;
|
|
114
114
|
|
|
@@ -156,7 +156,7 @@ interface GraphData {
|
|
|
156
156
|
edges: GraphEdgeData[];
|
|
157
157
|
layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
|
|
158
158
|
}
|
|
159
|
-
declare function Graph({ data, outgoingRefs, onNavigate, container, }: GlyphComponentProps<GraphData>): ReactElement;
|
|
159
|
+
declare function Graph({ data, block, outgoingRefs, onNavigate, onInteraction, container, }: GlyphComponentProps<GraphData>): ReactElement;
|
|
160
160
|
|
|
161
161
|
interface PositionedNode extends GraphNode {
|
|
162
162
|
x: number;
|
|
@@ -243,7 +243,7 @@ interface AccordionData {
|
|
|
243
243
|
defaultOpen?: number[];
|
|
244
244
|
multiple?: boolean;
|
|
245
245
|
}
|
|
246
|
-
declare function Accordion({ data, block }: GlyphComponentProps<AccordionData>): ReactElement;
|
|
246
|
+
declare function Accordion({ data, block, onInteraction, }: GlyphComponentProps<AccordionData>): ReactElement;
|
|
247
247
|
|
|
248
248
|
declare const accordionDefinition: GlyphComponentDefinition<AccordionData>;
|
|
249
249
|
|
|
@@ -260,7 +260,7 @@ interface ComparisonData {
|
|
|
260
260
|
options: ComparisonOption[];
|
|
261
261
|
features: ComparisonFeature[];
|
|
262
262
|
}
|
|
263
|
-
declare function Comparison({ data, block, container, }: GlyphComponentProps<ComparisonData>): ReactElement;
|
|
263
|
+
declare function Comparison({ data, block, container, onInteraction, }: GlyphComponentProps<ComparisonData>): ReactElement;
|
|
264
264
|
|
|
265
265
|
declare const comparisonDefinition: GlyphComponentDefinition<ComparisonData>;
|
|
266
266
|
|
|
@@ -320,7 +320,7 @@ interface FileTreeData {
|
|
|
320
320
|
tree: FileNode[];
|
|
321
321
|
defaultExpanded: boolean;
|
|
322
322
|
}
|
|
323
|
-
declare function FileTree({ data }: GlyphComponentProps<FileTreeData>): ReactElement;
|
|
323
|
+
declare function FileTree({ data, block, onInteraction, }: GlyphComponentProps<FileTreeData>): ReactElement;
|
|
324
324
|
|
|
325
325
|
declare const fileTreeDefinition: GlyphComponentDefinition<FileTreeData>;
|
|
326
326
|
|
|
@@ -460,7 +460,7 @@ interface QuizData {
|
|
|
460
460
|
showScore?: boolean;
|
|
461
461
|
title?: string;
|
|
462
462
|
}
|
|
463
|
-
declare function Quiz({ data, block }: GlyphComponentProps<QuizData>): ReactElement;
|
|
463
|
+
declare function Quiz({ data, block, onInteraction }: GlyphComponentProps<QuizData>): ReactElement;
|
|
464
464
|
|
|
465
465
|
declare const quizDefinition: GlyphComponentDefinition<QuizData>;
|
|
466
466
|
|
|
@@ -523,14 +523,14 @@ interface DividerItem {
|
|
|
523
523
|
type: 'divider';
|
|
524
524
|
style?: 'solid' | 'dashed' | 'dotted';
|
|
525
525
|
}
|
|
526
|
-
interface RatingItem {
|
|
526
|
+
interface RatingItem$1 {
|
|
527
527
|
type: 'rating';
|
|
528
528
|
label: string;
|
|
529
529
|
value: number;
|
|
530
530
|
max?: number;
|
|
531
531
|
description?: string;
|
|
532
532
|
}
|
|
533
|
-
type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem;
|
|
533
|
+
type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem$1;
|
|
534
534
|
interface InfographicSection {
|
|
535
535
|
heading?: string;
|
|
536
536
|
items: InfographicItem[];
|
|
@@ -543,4 +543,177 @@ declare function Infographic({ data, block, container, }: GlyphComponentProps<In
|
|
|
543
543
|
|
|
544
544
|
declare const infographicDefinition: GlyphComponentDefinition<InfographicData>;
|
|
545
545
|
|
|
546
|
-
|
|
546
|
+
interface PollData {
|
|
547
|
+
question: string;
|
|
548
|
+
options: string[];
|
|
549
|
+
multiple?: boolean;
|
|
550
|
+
showResults?: boolean;
|
|
551
|
+
title?: string;
|
|
552
|
+
}
|
|
553
|
+
declare function Poll({ data, block, onInteraction }: GlyphComponentProps<PollData>): ReactElement;
|
|
554
|
+
|
|
555
|
+
declare const pollDefinition: GlyphComponentDefinition<PollData>;
|
|
556
|
+
|
|
557
|
+
interface RatingItem {
|
|
558
|
+
label: string;
|
|
559
|
+
description?: string;
|
|
560
|
+
}
|
|
561
|
+
interface RatingData {
|
|
562
|
+
title?: string;
|
|
563
|
+
scale?: number;
|
|
564
|
+
mode?: 'star' | 'number';
|
|
565
|
+
labels?: {
|
|
566
|
+
low: string;
|
|
567
|
+
high: string;
|
|
568
|
+
};
|
|
569
|
+
items: RatingItem[];
|
|
570
|
+
}
|
|
571
|
+
declare function Rating({ data, block, onInteraction, }: GlyphComponentProps<RatingData>): ReactElement;
|
|
572
|
+
|
|
573
|
+
declare const ratingDefinition: GlyphComponentDefinition<RatingData>;
|
|
574
|
+
|
|
575
|
+
interface RankerItemData {
|
|
576
|
+
id: string;
|
|
577
|
+
label: string;
|
|
578
|
+
description?: string;
|
|
579
|
+
}
|
|
580
|
+
interface RankerData {
|
|
581
|
+
title?: string;
|
|
582
|
+
items: RankerItemData[];
|
|
583
|
+
}
|
|
584
|
+
declare function Ranker({ data, block, onInteraction, }: GlyphComponentProps<RankerData>): ReactElement;
|
|
585
|
+
|
|
586
|
+
declare const rankerDefinition: GlyphComponentDefinition<RankerData>;
|
|
587
|
+
|
|
588
|
+
interface SliderParameter {
|
|
589
|
+
id: string;
|
|
590
|
+
label: string;
|
|
591
|
+
min?: number;
|
|
592
|
+
max?: number;
|
|
593
|
+
step?: number;
|
|
594
|
+
value?: number;
|
|
595
|
+
unit?: string;
|
|
596
|
+
}
|
|
597
|
+
interface SliderData {
|
|
598
|
+
title?: string;
|
|
599
|
+
layout?: 'vertical' | 'horizontal';
|
|
600
|
+
parameters: SliderParameter[];
|
|
601
|
+
}
|
|
602
|
+
declare function Slider({ data, block, onInteraction, }: GlyphComponentProps<SliderData>): ReactElement;
|
|
603
|
+
|
|
604
|
+
declare const sliderDefinition: GlyphComponentDefinition<SliderData>;
|
|
605
|
+
|
|
606
|
+
interface MatrixColumn {
|
|
607
|
+
id: string;
|
|
608
|
+
label: string;
|
|
609
|
+
weight?: number;
|
|
610
|
+
}
|
|
611
|
+
interface MatrixRow {
|
|
612
|
+
id: string;
|
|
613
|
+
label: string;
|
|
614
|
+
}
|
|
615
|
+
interface MatrixData {
|
|
616
|
+
title?: string;
|
|
617
|
+
scale?: number;
|
|
618
|
+
showTotals?: boolean;
|
|
619
|
+
columns: MatrixColumn[];
|
|
620
|
+
rows: MatrixRow[];
|
|
621
|
+
}
|
|
622
|
+
declare function Matrix({ data, block, onInteraction, }: GlyphComponentProps<MatrixData>): ReactElement;
|
|
623
|
+
|
|
624
|
+
declare const matrixDefinition: GlyphComponentDefinition<MatrixData>;
|
|
625
|
+
|
|
626
|
+
interface TextField {
|
|
627
|
+
type: 'text';
|
|
628
|
+
id: string;
|
|
629
|
+
label: string;
|
|
630
|
+
required?: boolean;
|
|
631
|
+
default?: string;
|
|
632
|
+
placeholder?: string;
|
|
633
|
+
}
|
|
634
|
+
interface TextareaField {
|
|
635
|
+
type: 'textarea';
|
|
636
|
+
id: string;
|
|
637
|
+
label: string;
|
|
638
|
+
required?: boolean;
|
|
639
|
+
default?: string;
|
|
640
|
+
placeholder?: string;
|
|
641
|
+
rows?: number;
|
|
642
|
+
}
|
|
643
|
+
interface SelectField {
|
|
644
|
+
type: 'select';
|
|
645
|
+
id: string;
|
|
646
|
+
label: string;
|
|
647
|
+
required?: boolean;
|
|
648
|
+
options: string[];
|
|
649
|
+
default?: string;
|
|
650
|
+
}
|
|
651
|
+
interface CheckboxField {
|
|
652
|
+
type: 'checkbox';
|
|
653
|
+
id: string;
|
|
654
|
+
label: string;
|
|
655
|
+
default?: boolean;
|
|
656
|
+
}
|
|
657
|
+
interface RangeField {
|
|
658
|
+
type: 'range';
|
|
659
|
+
id: string;
|
|
660
|
+
label: string;
|
|
661
|
+
min?: number;
|
|
662
|
+
max?: number;
|
|
663
|
+
step?: number;
|
|
664
|
+
default?: number;
|
|
665
|
+
unit?: string;
|
|
666
|
+
}
|
|
667
|
+
type FormField = TextField | TextareaField | SelectField | CheckboxField | RangeField;
|
|
668
|
+
interface FormData {
|
|
669
|
+
title?: string;
|
|
670
|
+
description?: string;
|
|
671
|
+
submitLabel?: string;
|
|
672
|
+
fields: FormField[];
|
|
673
|
+
}
|
|
674
|
+
declare function Form({ data, block, onInteraction }: GlyphComponentProps<FormData>): ReactElement;
|
|
675
|
+
|
|
676
|
+
declare const formDefinition: GlyphComponentDefinition<FormData>;
|
|
677
|
+
|
|
678
|
+
interface KanbanCard {
|
|
679
|
+
id: string;
|
|
680
|
+
title: string;
|
|
681
|
+
description?: string;
|
|
682
|
+
priority?: 'high' | 'medium' | 'low';
|
|
683
|
+
tags?: string[];
|
|
684
|
+
}
|
|
685
|
+
interface KanbanColumn {
|
|
686
|
+
id: string;
|
|
687
|
+
title: string;
|
|
688
|
+
cards: KanbanCard[];
|
|
689
|
+
limit?: number;
|
|
690
|
+
}
|
|
691
|
+
interface KanbanData {
|
|
692
|
+
title?: string;
|
|
693
|
+
columns: KanbanColumn[];
|
|
694
|
+
}
|
|
695
|
+
declare function Kanban({ data, block, onInteraction, }: GlyphComponentProps<KanbanData>): ReactElement;
|
|
696
|
+
|
|
697
|
+
declare const kanbanDefinition: GlyphComponentDefinition<KanbanData>;
|
|
698
|
+
|
|
699
|
+
interface AnnotateLabel {
|
|
700
|
+
name: string;
|
|
701
|
+
color: string;
|
|
702
|
+
}
|
|
703
|
+
interface Annotation {
|
|
704
|
+
start: number;
|
|
705
|
+
end: number;
|
|
706
|
+
label: string;
|
|
707
|
+
note?: string;
|
|
708
|
+
}
|
|
709
|
+
interface AnnotateData {
|
|
710
|
+
title?: string;
|
|
711
|
+
labels: AnnotateLabel[];
|
|
712
|
+
text: string;
|
|
713
|
+
annotations?: Annotation[];
|
|
714
|
+
}
|
|
715
|
+
declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<AnnotateData>): ReactElement;
|
|
716
|
+
|
|
717
|
+
declare const annotateDefinition: GlyphComponentDefinition<AnnotateData>;
|
|
718
|
+
|
|
719
|
+
export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
|