@keboola/design 10.1.0 → 11.0.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/AGENTS.md +2 -0
- package/dist/AIKit-Dre37SJr.js +1320 -0
- package/dist/AIKit-Dre37SJr.js.map +1 -0
- package/dist/Alert-DfZq9kGe.js +133 -0
- package/dist/Alert-DfZq9kGe.js.map +1 -0
- package/dist/AlertModal-BUC4Es8o.js +222 -0
- package/dist/AlertModal-BUC4Es8o.js.map +1 -0
- package/dist/AppShell-B5GQN6Zs.js +143 -0
- package/dist/AppShell-B5GQN6Zs.js.map +1 -0
- package/dist/AutoSaveTextarea-BeuWuszr.js +58 -0
- package/dist/AutoSaveTextarea-BeuWuszr.js.map +1 -0
- package/dist/Badge-Ch26CXoP.js +195 -0
- package/dist/Badge-Ch26CXoP.js.map +1 -0
- package/dist/BrandEditor-B8o9zdZO.js +903 -0
- package/dist/BrandEditor-B8o9zdZO.js.map +1 -0
- package/dist/BrandLogo-CJkRd0F8.js +46 -0
- package/dist/BrandLogo-CJkRd0F8.js.map +1 -0
- package/dist/Breadcrumb-DJp7WwSv.js +330 -0
- package/dist/Breadcrumb-DJp7WwSv.js.map +1 -0
- package/dist/Button-nzmDNS2q.js +391 -0
- package/dist/Button-nzmDNS2q.js.map +1 -0
- package/dist/Calendar-cG5NIJ4O.js +6768 -0
- package/dist/Calendar-cG5NIJ4O.js.map +1 -0
- package/dist/Card-BAoZ35CV.js +105 -0
- package/dist/Card-BAoZ35CV.js.map +1 -0
- package/dist/Checkbox-GJ8-srt4.js +97 -0
- package/dist/Checkbox-GJ8-srt4.js.map +1 -0
- package/dist/Clipboard-CBJZiviP.js +58 -0
- package/dist/Clipboard-CBJZiviP.js.map +1 -0
- package/dist/ClipboardButton-ez5V3fkk.js +43 -0
- package/dist/ClipboardButton-ez5V3fkk.js.map +1 -0
- package/dist/CodeEditor-BfQJfbhL.js +952 -0
- package/dist/CodeEditor-BfQJfbhL.js.map +1 -0
- package/dist/Collapsible-BQXWEOBC.js +34 -0
- package/dist/Collapsible-BQXWEOBC.js.map +1 -0
- package/dist/ColorInput-Dx8Dsv7Y.js +180 -0
- package/dist/ColorInput-Dx8Dsv7Y.js.map +1 -0
- package/dist/ColorModeSwitch-CCqj7tjE.js +77 -0
- package/dist/ColorModeSwitch-CCqj7tjE.js.map +1 -0
- package/dist/Combobox-c_xBjf0P.js +439 -0
- package/dist/Combobox-c_xBjf0P.js.map +1 -0
- package/dist/Command-CQ_bQsJp.js +102 -0
- package/dist/Command-CQ_bQsJp.js.map +1 -0
- package/dist/CopyField-BJ96zvXs.js +322 -0
- package/dist/CopyField-BJ96zvXs.js.map +1 -0
- package/dist/DateInput-CMD3dY-T.js +141 -0
- package/dist/DateInput-CMD3dY-T.js.map +1 -0
- package/dist/DatePicker-BbFbmsGl.js +24 -0
- package/dist/DatePicker-BbFbmsGl.js.map +1 -0
- package/dist/DateRangeInput-D3BhiKyk.js +139 -0
- package/dist/DateRangeInput-D3BhiKyk.js.map +1 -0
- package/dist/DateRangePicker-BiUgtt_M.js +159 -0
- package/dist/DateRangePicker-BiUgtt_M.js.map +1 -0
- package/dist/DiagramSkeleton-lwBS2YBa.js +11 -0
- package/dist/DiagramSkeleton-lwBS2YBa.js.map +1 -0
- package/dist/DiffView-ppTIzh2h.js +429 -0
- package/dist/DiffView-ppTIzh2h.js.map +1 -0
- package/dist/DropdownMenu-B6ZbYvaM.js +327 -0
- package/dist/DropdownMenu-B6ZbYvaM.js.map +1 -0
- package/dist/FieldBox-D7DYtX_m.js +70 -0
- package/dist/FieldBox-D7DYtX_m.js.map +1 -0
- package/dist/FileUpload-sXRv7JiY.js +2527 -0
- package/dist/FileUpload-sXRv7JiY.js.map +1 -0
- package/dist/Form-BDCef6O9.js +371 -0
- package/dist/Form-BDCef6O9.js.map +1 -0
- package/dist/FormGroup-S9mPNHKH.js +124 -0
- package/dist/FormGroup-S9mPNHKH.js.map +1 -0
- package/dist/FullScreenModal-CJa2VkJ2.js +96 -0
- package/dist/FullScreenModal-CJa2VkJ2.js.map +1 -0
- package/dist/HoverCard-WfDkLK1s.js +31 -0
- package/dist/HoverCard-WfDkLK1s.js.map +1 -0
- package/dist/InputGroup-BJWsI35s.js +292 -0
- package/dist/InputGroup-BJWsI35s.js.map +1 -0
- package/dist/Kbd-CxHAo1oo.js +111 -0
- package/dist/Kbd-CxHAo1oo.js.map +1 -0
- package/dist/MarkedText-Ckbft5mw.js +44 -0
- package/dist/MarkedText-Ckbft5mw.js.map +1 -0
- package/dist/MermaidDiagram-BB06gymm.js +399 -0
- package/dist/MermaidDiagram-BB06gymm.js.map +1 -0
- package/dist/Modal-BA5Wc3sx.js +185 -0
- package/dist/Modal-BA5Wc3sx.js.map +1 -0
- package/dist/ModalTitle-C76ke2eo.js +28 -0
- package/dist/ModalTitle-C76ke2eo.js.map +1 -0
- package/dist/MultiActionButtonGroup-CiBHxsSk.js +33 -0
- package/dist/MultiActionButtonGroup-CiBHxsSk.js.map +1 -0
- package/dist/Navbar-t16usFZQ.js +322 -0
- package/dist/Navbar-t16usFZQ.js.map +1 -0
- package/dist/OtpInput-CbbymqYs.js +93 -0
- package/dist/OtpInput-CbbymqYs.js.map +1 -0
- package/dist/PageHeader-Q3IpCnQd.js +177 -0
- package/dist/PageHeader-Q3IpCnQd.js.map +1 -0
- package/dist/PageLayout-DSVM-ASz.js +176 -0
- package/dist/PageLayout-DSVM-ASz.js.map +1 -0
- package/dist/PageToolbar-0_1OBzaZ.js +153 -0
- package/dist/PageToolbar-0_1OBzaZ.js.map +1 -0
- package/dist/Pagination-CM_Rszz-.js +70 -0
- package/dist/Pagination-CM_Rszz-.js.map +1 -0
- package/dist/Popconfirm-BGe1jLov.js +170 -0
- package/dist/Popconfirm-BGe1jLov.js.map +1 -0
- package/dist/Popover-Ca0V6AD1.js +92 -0
- package/dist/Popover-Ca0V6AD1.js.map +1 -0
- package/dist/RadioGroup-sIveSsNa.js +233 -0
- package/dist/RadioGroup-sIveSsNa.js.map +1 -0
- package/dist/Resizable-D3vYToZH.js +52 -0
- package/dist/Resizable-D3vYToZH.js.map +1 -0
- package/dist/Search-3UiqNZRj.js +184 -0
- package/dist/Search-3UiqNZRj.js.map +1 -0
- package/dist/SearchInput-D2fcOv7E.js +102 -0
- package/dist/SearchInput-D2fcOv7E.js.map +1 -0
- package/dist/SectionNav--7bw2b6u.js +276 -0
- package/dist/SectionNav--7bw2b6u.js.map +1 -0
- package/dist/Select-4YX38G5h.js +181 -0
- package/dist/Select-4YX38G5h.js.map +1 -0
- package/dist/Sheet-BQrX8-h5.js +169 -0
- package/dist/Sheet-BQrX8-h5.js.map +1 -0
- package/dist/Sidebar-ROaR_AqC.js +799 -0
- package/dist/Sidebar-ROaR_AqC.js.map +1 -0
- package/dist/Slider-Da_3mS5v.js +127 -0
- package/dist/Slider-Da_3mS5v.js.map +1 -0
- package/dist/Stepper-C8sm9ZFM.js +325 -0
- package/dist/Stepper-C8sm9ZFM.js.map +1 -0
- package/dist/Switch-CX2A0v50.js +201 -0
- package/dist/Switch-CX2A0v50.js.map +1 -0
- package/dist/Table-CvYuTuNU.js +104 -0
- package/dist/Table-CvYuTuNU.js.map +1 -0
- package/dist/Tabs-EAihyqCt.js +74 -0
- package/dist/Tabs-EAihyqCt.js.map +1 -0
- package/dist/TextInput-BGed-V13.js +110 -0
- package/dist/TextInput-BGed-V13.js.map +1 -0
- package/dist/ThemeProvider-QncUrfJn.js +203 -0
- package/dist/ThemeProvider-QncUrfJn.js.map +1 -0
- package/dist/TimePicker-B_NegL-7.js +98 -0
- package/dist/TimePicker-B_NegL-7.js.map +1 -0
- package/dist/Timeline-6btyJl4D.js +154 -0
- package/dist/Timeline-6btyJl4D.js.map +1 -0
- package/dist/Toast-DQSbs3oA.js +49 -0
- package/dist/Toast-DQSbs3oA.js.map +1 -0
- package/dist/ToggleGroup-Cy_10Mvu.js +47 -0
- package/dist/ToggleGroup-Cy_10Mvu.js.map +1 -0
- package/dist/Workbench-BzE-Vvd9.js +293 -0
- package/dist/Workbench-BzE-Vvd9.js.map +1 -0
- package/dist/ZoomableSvg-DG9PnAm8.js +248 -0
- package/dist/ZoomableSvg-DG9PnAm8.js.map +1 -0
- package/dist/charts.d.ts +124 -111
- package/dist/charts.js +303 -249
- package/dist/charts.js.map +1 -1
- package/dist/classNames-BzrkDnOD.js +9 -0
- package/dist/classNames-BzrkDnOD.js.map +1 -0
- package/dist/constants-D6JcsD4_.d.ts +41 -0
- package/dist/context-KxxeMHbR.js +62 -0
- package/dist/context-KxxeMHbR.js.map +1 -0
- package/dist/editors.d.ts +180 -173
- package/dist/editors.js +747 -420
- package/dist/editors.js.map +1 -1
- package/dist/escapeStringRegexp-8MxP2knR.js +6 -0
- package/dist/escapeStringRegexp-8MxP2knR.js.map +1 -0
- package/dist/icons-Cek151jC.js +640 -0
- package/dist/icons-Cek151jC.js.map +1 -0
- package/dist/icons.d.ts +2 -41
- package/dist/icons.js +2 -4
- package/dist/index-m-kQEWiY.d.ts +54 -0
- package/dist/index.d.ts +6192 -9904
- package/dist/index.js +112 -15803
- package/dist/internal/blocks/AIKit.js +2 -0
- package/dist/internal/blocks/AppShell.js +2 -0
- package/dist/internal/blocks/AutoSaveTextarea.js +2 -0
- package/dist/internal/blocks/BrandEditor.js +2 -0
- package/dist/internal/blocks/ChartPanel.js +46 -0
- package/dist/internal/blocks/ChartPanel.js.map +1 -0
- package/dist/internal/blocks/ClipboardButton.js +2 -0
- package/dist/internal/blocks/ColorInput.js +2 -0
- package/dist/internal/blocks/ColorModeSwitch.js +2 -0
- package/dist/internal/blocks/Command.js +2 -0
- package/dist/internal/blocks/CopyField.js +2 -0
- package/dist/internal/blocks/DashboardHero.js +59 -0
- package/dist/internal/blocks/DashboardHero.js.map +1 -0
- package/dist/internal/blocks/DateInput.js +2 -0
- package/dist/internal/blocks/DateRangeInput.js +2 -0
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +16 -0
- package/dist/internal/blocks/EmptyConfigurationActionCard.js.map +1 -0
- package/dist/internal/blocks/EmptyState.js +142 -0
- package/dist/internal/blocks/EmptyState.js.map +1 -0
- package/dist/internal/blocks/ErrorState.js +179 -0
- package/dist/internal/blocks/ErrorState.js.map +1 -0
- package/dist/internal/blocks/ExportMenu.js +41 -0
- package/dist/internal/blocks/ExportMenu.js.map +1 -0
- package/dist/internal/blocks/Form.js +2 -0
- package/dist/internal/blocks/FormGroup.js +2 -0
- package/dist/internal/blocks/GoogleButton.js +95 -0
- package/dist/internal/blocks/GoogleButton.js.map +1 -0
- package/dist/internal/blocks/MicrosoftButton.js +64 -0
- package/dist/internal/blocks/MicrosoftButton.js.map +1 -0
- package/dist/internal/blocks/MultiActionButtonGroup.js +2 -0
- package/dist/internal/blocks/MultiCombobox.js +188 -0
- package/dist/internal/blocks/MultiCombobox.js.map +1 -0
- package/dist/internal/blocks/NumberInput.js +44 -0
- package/dist/internal/blocks/NumberInput.js.map +1 -0
- package/dist/internal/blocks/OtpInput.js +2 -0
- package/dist/internal/blocks/PageHeader.js +2 -0
- package/dist/internal/blocks/PageLayout.js +2 -0
- package/dist/internal/blocks/PageToolbar.js +2 -0
- package/dist/internal/blocks/PasswordInput.js +97 -0
- package/dist/internal/blocks/PasswordInput.js.map +1 -0
- package/dist/internal/blocks/SearchInput.js +2 -0
- package/dist/internal/blocks/SearchInputWithNavigation.js +65 -0
- package/dist/internal/blocks/SearchInputWithNavigation.js.map +1 -0
- package/dist/internal/blocks/SectionNav.js +2 -0
- package/dist/internal/blocks/SplitButton.js +46 -0
- package/dist/internal/blocks/SplitButton.js.map +1 -0
- package/dist/internal/blocks/StatCard.js +97 -0
- package/dist/internal/blocks/StatCard.js.map +1 -0
- package/dist/internal/blocks/TextInput.js +2 -0
- package/dist/internal/blocks/Textarea.js +32 -0
- package/dist/internal/blocks/Textarea.js.map +1 -0
- package/dist/internal/blocks/TimeInput.js +77 -0
- package/dist/internal/blocks/TimeInput.js.map +1 -0
- package/dist/internal/components/Alert.js +2 -0
- package/dist/internal/components/AlertModal.js +2 -0
- package/dist/internal/components/Avatar.js +53 -0
- package/dist/internal/components/Avatar.js.map +1 -0
- package/dist/internal/components/Badge.js +2 -0
- package/dist/internal/components/BrandLogo.js +2 -0
- package/dist/internal/components/Breadcrumb.js +2 -0
- package/dist/internal/components/Button.js +2 -0
- package/dist/internal/components/ButtonGroup.js +66 -0
- package/dist/internal/components/ButtonGroup.js.map +1 -0
- package/dist/internal/components/Calendar.js +2 -0
- package/dist/internal/components/Card.js +2 -0
- package/dist/internal/components/Checkbox.js +2 -0
- package/dist/internal/components/Clipboard.js +2 -0
- package/dist/internal/components/Collapsible.js +2 -0
- package/dist/internal/components/CollapsiblePanel.js +87 -0
- package/dist/internal/components/CollapsiblePanel.js.map +1 -0
- package/dist/internal/components/Combobox.js +2 -0
- package/dist/internal/components/DatePicker.js +2 -0
- package/dist/internal/components/DateRangePicker.js +2 -0
- package/dist/internal/components/DiffView.js +2 -0
- package/dist/internal/components/DotsLoader.js +18 -0
- package/dist/internal/components/DotsLoader.js.map +1 -0
- package/dist/internal/components/DropdownMenu.js +2 -0
- package/dist/internal/components/EmptySearchContent.js +12 -0
- package/dist/internal/components/EmptySearchContent.js.map +1 -0
- package/dist/internal/components/FileUpload.js +2 -0
- package/dist/internal/components/FullScreenModal.js +2 -0
- package/dist/internal/components/HelpBlock.js +25 -0
- package/dist/internal/components/HelpBlock.js.map +1 -0
- package/dist/internal/components/HoverCard.js +2 -0
- package/dist/internal/components/InputGroup.js +2 -0
- package/dist/internal/components/Kbd.js +2 -0
- package/dist/internal/components/Label.js +39 -0
- package/dist/internal/components/Label.js.map +1 -0
- package/dist/internal/components/Link.js +22 -0
- package/dist/internal/components/Link.js.map +1 -0
- package/dist/internal/components/MarkedText.js +2 -0
- package/dist/internal/components/MergeEditor/ConflictStatus/ConflictStatusIndicator.js +20 -0
- package/dist/internal/components/MergeEditor/ConflictStatus/ConflictStatusIndicator.js.map +1 -0
- package/dist/internal/components/MergeEditor/PaneHeader.js +13 -0
- package/dist/internal/components/MergeEditor/PaneHeader.js.map +1 -0
- package/dist/internal/components/MergeEditor/constants.js +18 -0
- package/dist/internal/components/MergeEditor/constants.js.map +1 -0
- package/dist/internal/components/MergeEditor/useMergeDiff.js +2 -0
- package/dist/internal/components/Modal.js +2 -0
- package/dist/internal/components/Navbar.js +2 -0
- package/dist/internal/components/Pagination.js +2 -0
- package/dist/internal/components/PanelWithDetails.js +31 -0
- package/dist/internal/components/PanelWithDetails.js.map +1 -0
- package/dist/internal/components/Popconfirm.js +2 -0
- package/dist/internal/components/Popover.js +2 -0
- package/dist/internal/components/Progress.js +47 -0
- package/dist/internal/components/Progress.js.map +1 -0
- package/dist/internal/components/RadioGroup.js +2 -0
- package/dist/internal/components/Resizable.js +2 -0
- package/dist/internal/components/ScrollArea.js +42 -0
- package/dist/internal/components/ScrollArea.js.map +1 -0
- package/dist/internal/components/Search.js +2 -0
- package/dist/internal/components/Select.js +2 -0
- package/dist/internal/components/Separator.js +84 -0
- package/dist/internal/components/Separator.js.map +1 -0
- package/dist/internal/components/Sheet.js +2 -0
- package/dist/internal/components/Sidebar.js +2 -0
- package/dist/internal/components/Skeleton/Skeleton.js +39 -0
- package/dist/internal/components/Skeleton/Skeleton.js.map +1 -0
- package/dist/internal/components/Skeleton/SkeletonList.js +41 -0
- package/dist/internal/components/Skeleton/SkeletonList.js.map +1 -0
- package/dist/internal/components/Slider.js +2 -0
- package/dist/internal/components/SpotlightBackdrop.js +132 -0
- package/dist/internal/components/SpotlightBackdrop.js.map +1 -0
- package/dist/internal/components/Stepper.js +2 -0
- package/dist/internal/components/Switch.js +2 -0
- package/dist/internal/components/Table.js +2 -0
- package/dist/internal/components/Tabs.js +2 -0
- package/dist/internal/components/ThemeProvider.js +3 -0
- package/dist/internal/components/TimePicker.js +2 -0
- package/dist/internal/components/Timeline.js +2 -0
- package/dist/internal/components/Toast.js +3 -0
- package/dist/internal/components/Toggle.js +169 -0
- package/dist/internal/components/Toggle.js.map +1 -0
- package/dist/internal/components/ToggleGroup.js +2 -0
- package/dist/internal/components/Tooltip.js +2 -0
- package/dist/internal/components/Truncated.js +45 -0
- package/dist/internal/components/Truncated.js.map +1 -0
- package/dist/internal/components/Workbench.js +2 -0
- package/dist/internal/components/ZoomableSvg.js +2 -0
- package/dist/internal/hooks/useAutosizeInput.js +77 -0
- package/dist/internal/hooks/useAutosizeInput.js.map +1 -0
- package/dist/internal/hooks/useScrollbarPosition.js +45 -0
- package/dist/internal/hooks/useScrollbarPosition.js.map +1 -0
- package/dist/internal/hooks/useStableCallback.js +29 -0
- package/dist/internal/hooks/useStableCallback.js.map +1 -0
- package/dist/internal/utils/mergeRefs.js +20 -0
- package/dist/internal/utils/mergeRefs.js.map +1 -0
- package/dist/internal/utils.js +5 -0
- package/dist/markdown-editor.d.ts +72 -72
- package/dist/markdown-editor.js +1122 -1193
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.d.ts +12 -12
- package/dist/mermaid.js +2 -10
- package/dist/rjsf.d.ts +33 -34
- package/dist/rjsf.js +1543 -1600
- package/dist/rjsf.js.map +1 -1
- package/dist/rolldown-runtime-Bdc48AWt.js +33 -0
- package/dist/styles-DSUP_-9Z.js +158 -0
- package/dist/styles-DSUP_-9Z.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/testing.d.ts +8 -7
- package/dist/testing.js +36 -16
- package/dist/testing.js.map +1 -1
- package/dist/themeTokens-BNg98Mu9.js +85 -0
- package/dist/themeTokens-BNg98Mu9.js.map +1 -0
- package/dist/toast-CjkURw0M.js +184 -0
- package/dist/toast-CjkURw0M.js.map +1 -0
- package/dist/useColorSchemeState-CYqcUfSH.js +61 -0
- package/dist/useColorSchemeState-CYqcUfSH.js.map +1 -0
- package/dist/useControllableState-M6494mCT.js +31 -0
- package/dist/useControllableState-M6494mCT.js.map +1 -0
- package/dist/useElement-DkF6esWL.js +15 -0
- package/dist/useElement-DkF6esWL.js.map +1 -0
- package/dist/useMergeDiff-CvowEXJ1.js +465 -0
- package/dist/useMergeDiff-CvowEXJ1.js.map +1 -0
- package/dist/utils-D0c5VAyF.js +308 -0
- package/dist/utils-D0c5VAyF.js.map +1 -0
- package/package.json +10 -9
- package/src/styles.css +35 -7
- package/src/theme.css +64 -0
- package/dist/MermaidDiagram-EOKJHQQV.js +0 -10
- package/dist/MermaidDiagram-EOKJHQQV.js.map +0 -1
- package/dist/chunk-63NSN2VL.js +0 -274
- package/dist/chunk-63NSN2VL.js.map +0 -1
- package/dist/chunk-6FPEI4EM.js +0 -6683
- package/dist/chunk-6FPEI4EM.js.map +0 -1
- package/dist/chunk-7PUUHEJQ.js +0 -1313
- package/dist/chunk-7PUUHEJQ.js.map +0 -1
- package/dist/chunk-BOHNXTMM.js +0 -606
- package/dist/chunk-BOHNXTMM.js.map +0 -1
- package/dist/chunk-C3L3TBBT.js +0 -242
- package/dist/chunk-C3L3TBBT.js.map +0 -1
- package/dist/chunk-CTCFYWJC.js +0 -407
- package/dist/chunk-CTCFYWJC.js.map +0 -1
- package/dist/chunk-ESBL3IPF.js +0 -23
- package/dist/chunk-ESBL3IPF.js.map +0 -1
- package/dist/chunk-IJTHFNNJ.js +0 -261
- package/dist/chunk-IJTHFNNJ.js.map +0 -1
- package/dist/chunk-JP7PNHLH.js +0 -40
- package/dist/chunk-JP7PNHLH.js.map +0 -1
- package/dist/chunk-KPNAW5MU.js +0 -229
- package/dist/chunk-KPNAW5MU.js.map +0 -1
- package/dist/chunk-L37JJ6MR.js +0 -152
- package/dist/chunk-L37JJ6MR.js.map +0 -1
- package/dist/chunk-Q7NWXLCT.js +0 -90
- package/dist/chunk-Q7NWXLCT.js.map +0 -1
- package/dist/chunk-SYIEF644.js +0 -1016
- package/dist/chunk-SYIEF644.js.map +0 -1
- package/dist/chunk-VMFSRV5H.js +0 -16
- package/dist/chunk-VMFSRV5H.js.map +0 -1
- package/dist/chunk-VPPM7UUQ.js +0 -47
- package/dist/chunk-VPPM7UUQ.js.map +0 -1
- package/dist/chunk-XV3UUOYF.js +0 -845
- package/dist/chunk-XV3UUOYF.js.map +0 -1
- package/dist/constants-D3gaMY-W.d.ts +0 -39
- package/dist/icons.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/mermaid.js.map +0 -1
package/dist/charts.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"names":["jsx","RechartsTooltip","jsxs","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart","Legend"],"mappings":"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","file":"charts.js","sourcesContent":["import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Height as a px number or percentage string. Charts have no intrinsic\n * height, so a container needs one either here or from a sized ancestor.\n * Defaults to 300.\n */\n height?: ChartDimension;\n /** Width as a px number or percentage. Defaults to `\"100%\"` (fills parent). */\n width?: ChartDimension;\n /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */\n children: ReactElement;\n};\n\n/**\n * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'\n * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,\n * grid, cursor) through CSS so every chart inside inherits it. Sizing is\n * intrinsic: give it a `height` (default 300) and it fills the parent width.\n */\nexport const ChartContainer = ({\n height = 300,\n width = '100%',\n className,\n children,\n ...props\n}: ChartContainerProps) => (\n <div\n className={cn(\n 'tw:text-xs',\n // Axis ticks and labels follow the muted foreground token.\n 'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n 'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n 'tw:[&_.recharts-label]:fill-muted-foreground',\n 'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n // Grid lines, axis lines and the hover cursor follow the border token.\n 'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n 'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n 'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n 'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n 'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n 'tw:[&_.recharts-surface]:outline-hidden',\n className,\n )}\n {...props}\n >\n <ResponsiveContainer width={width} height={height}>\n {children}\n </ResponsiveContainer>\n </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n name?: string | number;\n value?: string | number;\n color?: string;\n dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n active?: boolean;\n label?: string | number;\n payload?: TooltipPayloadEntry[];\n /** Format a value for display (e.g. currency, percentage). */\n valueFormatter?: (value: string | number, name: string) => string;\n className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n active,\n label,\n payload,\n valueFormatter,\n className,\n}: ChartTooltipContentProps) => {\n if (!active || !payload?.length) return null;\n\n return (\n <div\n className={cn(\n 'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n className,\n )}\n >\n {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n {payload.map((entry) => {\n const name = String(entry.name ?? entry.dataKey ?? '');\n const value = entry.value;\n // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n // only well-formed numbers reach the formatter.\n const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n const display = hasNumber\n ? valueFormatter\n ? valueFormatter(Number(value), name)\n : String(Number(value))\n : (value ?? '');\n return (\n <div\n key={String(entry.dataKey ?? name)}\n className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n >\n <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n <span\n className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n style={{ backgroundColor: entry.color }}\n />\n <span className=\"tw:text-muted-foreground\">{name}</span>\n </span>\n <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n <RechartsTooltip\n cursor={{ strokeWidth: 1 }}\n content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n {...props}\n />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n value: string | number | null | undefined,\n valueFormatter?: (value: number) => string,\n): string => {\n if (value == null || value === '') return '';\n const num = Number(value);\n if (!Number.isFinite(num)) return '';\n return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nconst AXIS_PROPS = {\n tickLine: false,\n axisLine: false,\n tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n xKey,\n showGrid = true,\n showYAxis = true,\n showLegend = false,\n showTooltip = true,\n valueFormatter,\n yDomain,\n}: Pick<\n CartesianChartProps,\n 'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n> & { yDomain?: ChartAxisDomain }) => (\n <>\n {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n <XAxis dataKey={xKey} {...AXIS_PROPS} />\n {/* A domain has to reach recharts through a mounted <YAxis>, so a chart that\n hides its axis but sets one still gets the element — hidden, and taking\n no layout width. Without a domain the hidden case renders nothing, as\n before, and recharts falls back to its implicit axis. */}\n {(showYAxis || yDomain !== undefined) && (\n <YAxis\n hide={!showYAxis}\n domain={yDomain}\n width={48}\n {...AXIS_PROPS}\n tickFormatter={\n valueFormatter\n ? (value: string | number) => formatValue(value, valueFormatter)\n : undefined\n }\n />\n )}\n {showTooltip && (\n <ChartTooltip\n valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n />\n )}\n {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n </>\n);\n","/**\n * The design system ships a five-slot categorical chart palette as CSS\n * variables (`--chart-1` … `--chart-5`). Charts resolve their\n * series colors from these tokens only — never from inline hex or a primitive\n * scale — so they follow both the active color scheme (light/dark, via\n * `data-theme` in `styles.css`) and the active brand: a brand reskins charts\n * by defining `colors.chart` (and `colorsDark.chart`) in its\n * `@keboola/brand-registry` definition, which `ThemeProvider` emits as the\n * `--chart-*` variables.\n *\n * The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`\n * opacity modifiers), so they are wrapped in `rgb(...)` before handing them to\n * recharts as ordinary SVG `stroke` / `fill` strings.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/**\n * The CSS color for a chart token. `index` is 0-based (series position); it\n * wraps around the five-slot palette so any number of series stays on-brand.\n */\nexport const chartTokenColor = (index: number): string => {\n // Euclidean modulo so negative indices still land in 1..CHART_TOKEN_COUNT\n // (plain `%` would yield e.g. `--chart-0` for index -1).\n const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nexport type LineChartProps = CartesianChartProps & {\n /**\n * `[min, max]` bounds for the value (y) axis — numbers, `'auto'`, or padded\n * data extremes (`['dataMin - 500', 'dataMax + 500']`). Defaults to a zero\n * baseline.\n *\n * Only the line chart takes this. A line encodes value by POSITION, so moving\n * the baseline rescales it without misstating it; bars and areas encode by\n * length and filled area from the baseline, and truncating those makes the\n * geometry lie about the ratios. Use it to compare two series of similar\n * magnitude far from zero — not for a single series whose magnitude the\n * reader is meant to judge.\n */\n yDomain?: ChartAxisDomain;\n};\n\n/**\n * A themed multi-series line chart. Each series' color comes from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Wrap-free — mounts its own {@link ChartContainer}.\n *\n * @example\n * <LineChart\n * data={data}\n * xKey=\"month\"\n * series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}\n * />\n *\n * @example Two close-but-high series, on a baseline that shows the gap\n * <LineChart data={data} xKey=\"month\" series={series} yDomain={[7000, 9000]} />\n */\nexport const LineChart = ({\n data,\n xKey,\n series,\n height,\n width,\n className,\n ...chrome\n}: LineChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n {cartesianChrome({ xKey, ...chrome })}\n {series.map((s, index) => {\n const color = resolveSeriesColor(index, s.color);\n return (\n <Line\n key={s.dataKey}\n type=\"monotone\"\n dataKey={s.dataKey}\n name={s.name ?? s.dataKey}\n stroke={color}\n strokeWidth={2}\n dot={{ r: 3, fill: color, stroke: color }}\n activeDot={{ r: 4 }}\n isAnimationActive={false}\n />\n );\n })}\n </RechartsLineChart>\n </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n /** Stack the series into a single bar per category. Defaults to grouped. */\n stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n data,\n xKey,\n series,\n height,\n width,\n className,\n stacked = false,\n ...chrome\n}: BarChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n {cartesianChrome({ xKey, ...chrome })}\n {series.map((s, index) => (\n <Bar\n key={s.dataKey}\n dataKey={s.dataKey}\n name={s.name ?? s.dataKey}\n fill={resolveSeriesColor(index, s.color)}\n radius={stacked ? 0 : [4, 4, 0, 0]}\n stackId={stacked ? 'stack' : undefined}\n isAnimationActive={false}\n />\n ))}\n </RechartsBarChart>\n </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n /** Stack the series into a cumulative area. Defaults to overlaid. */\n stacked?: boolean;\n};\n\n/**\n * A themed multi-series area chart. Each series is stroked and softly filled\n * from the semantic `--chart-*` palette (by order, or pinned via\n * `series[].color`), which follows the active color scheme and the active\n * brand's `colors.chart` when it defines one. Pass `stacked` to stack the\n * series cumulatively.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n data,\n xKey,\n series,\n height,\n width,\n className,\n stacked = false,\n ...chrome\n}: AreaChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n {cartesianChrome({ xKey, ...chrome })}\n {series.map((s, index) => {\n const color = resolveSeriesColor(index, s.color);\n return (\n <Area\n key={s.dataKey}\n type=\"monotone\"\n dataKey={s.dataKey}\n name={s.name ?? s.dataKey}\n stroke={color}\n fill={color}\n fillOpacity={0.15}\n strokeWidth={2}\n stackId={stacked ? 'stack' : undefined}\n isAnimationActive={false}\n />\n );\n })}\n </RechartsAreaChart>\n </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n /** The rows to plot — one sector per row. */\n data: ChartDatum[];\n /** Key into each datum for the sector label. */\n nameKey: string;\n /** Key into each datum for the sector value. */\n dataKey: string;\n /** Render as a donut with a hole of this inner radius (px or %). */\n innerRadius?: ChartDimension;\n /** Height as a px number or percentage. Defaults to 300. */\n height?: ChartDimension;\n /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n width?: ChartDimension;\n /** Show a legend below the chart. Defaults to `true`. */\n showLegend?: boolean;\n /** Show the hover tooltip. Defaults to `true`. */\n showTooltip?: boolean;\n /** Format a sector value for the tooltip. */\n valueFormatter?: (value: number) => string;\n className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n data,\n nameKey,\n dataKey,\n innerRadius = 0,\n height,\n width,\n className,\n showLegend = true,\n showTooltip = true,\n valueFormatter,\n}: PieChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsPieChart>\n {showTooltip && (\n <ChartTooltip\n valueFormatter={\n valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n }\n />\n )}\n {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n <Pie\n data={data}\n nameKey={nameKey}\n dataKey={dataKey}\n innerRadius={innerRadius}\n // Separate sectors with the brand surface color rather than recharts'\n // hardcoded white default.\n stroke=\"rgb(var(--background))\"\n isAnimationActive={false}\n >\n {data.map((datum, index) => (\n <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n ))}\n </Pie>\n </RechartsPieChart>\n </ChartContainer>\n);\n"]}
|
|
1
|
+
{"version":3,"file":"charts.js","names":["RechartsTooltip","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart"],"sources":["../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Height as a px number or percentage string. Charts have no intrinsic\n * height, so a container needs one either here or from a sized ancestor.\n * Defaults to 300.\n */\n height?: ChartDimension;\n /** Width as a px number or percentage. Defaults to `\"100%\"` (fills parent). */\n width?: ChartDimension;\n /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */\n children: ReactElement;\n};\n\n/**\n * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'\n * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,\n * grid, cursor) through CSS so every chart inside inherits it. Sizing is\n * intrinsic: give it a `height` (default 300) and it fills the parent width.\n */\nexport const ChartContainer = ({\n height = 300,\n width = '100%',\n className,\n children,\n ...props\n}: ChartContainerProps) => (\n <div\n className={cn(\n 'tw:text-xs',\n // Axis ticks and labels follow the muted foreground token.\n 'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n 'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n 'tw:[&_.recharts-label]:fill-muted-foreground',\n 'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n // Grid lines, axis lines and the hover cursor follow the border token.\n 'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n 'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n 'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n 'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n 'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n 'tw:[&_.recharts-surface]:outline-hidden',\n className,\n )}\n {...props}\n >\n <ResponsiveContainer width={width} height={height}>\n {children}\n </ResponsiveContainer>\n </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n name?: string | number;\n value?: string | number;\n color?: string;\n dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n active?: boolean;\n label?: string | number;\n payload?: TooltipPayloadEntry[];\n /** Format a value for display (e.g. currency, percentage). */\n valueFormatter?: (value: string | number, name: string) => string;\n className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n active,\n label,\n payload,\n valueFormatter,\n className,\n}: ChartTooltipContentProps) => {\n if (!active || !payload?.length) return null;\n\n return (\n <div\n className={cn(\n 'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n className,\n )}\n >\n {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n {payload.map((entry) => {\n const name = String(entry.name ?? entry.dataKey ?? '');\n const value = entry.value;\n // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n // only well-formed numbers reach the formatter.\n const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n const display = hasNumber\n ? valueFormatter\n ? valueFormatter(Number(value), name)\n : String(Number(value))\n : (value ?? '');\n return (\n <div\n key={String(entry.dataKey ?? name)}\n className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n >\n <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n <span\n className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n style={{ backgroundColor: entry.color }}\n />\n <span className=\"tw:text-muted-foreground\">{name}</span>\n </span>\n <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n <RechartsTooltip\n cursor={{ strokeWidth: 1 }}\n content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n {...props}\n />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n value: string | number | null | undefined,\n valueFormatter?: (value: number) => string,\n): string => {\n if (value == null || value === '') return '';\n const num = Number(value);\n if (!Number.isFinite(num)) return '';\n return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nconst AXIS_PROPS = {\n tickLine: false,\n axisLine: false,\n tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n xKey,\n showGrid = true,\n showYAxis = true,\n showLegend = false,\n showTooltip = true,\n valueFormatter,\n yDomain,\n}: Pick<\n CartesianChartProps,\n 'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n> & { yDomain?: ChartAxisDomain }) => (\n <>\n {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n <XAxis dataKey={xKey} {...AXIS_PROPS} />\n {/* A domain has to reach recharts through a mounted <YAxis>, so a chart that\n hides its axis but sets one still gets the element — hidden, and taking\n no layout width. Without a domain the hidden case renders nothing, as\n before, and recharts falls back to its implicit axis. */}\n {(showYAxis || yDomain !== undefined) && (\n <YAxis\n hide={!showYAxis}\n domain={yDomain}\n width={48}\n {...AXIS_PROPS}\n tickFormatter={\n valueFormatter\n ? (value: string | number) => formatValue(value, valueFormatter)\n : undefined\n }\n />\n )}\n {showTooltip && (\n <ChartTooltip\n valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n />\n )}\n {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n </>\n);\n","/**\n * The design system ships a five-slot categorical chart palette as CSS\n * variables (`--chart-1` … `--chart-5`). Charts resolve their\n * series colors from these tokens only — never from inline hex or a primitive\n * scale — so they follow both the active color scheme (light/dark, via\n * `data-theme` in `styles.css`) and the active brand: a brand reskins charts\n * by defining `colors.chart` (and `colorsDark.chart`) in its\n * `@keboola/brand-registry` definition, which `ThemeProvider` emits as the\n * `--chart-*` variables.\n *\n * The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`\n * opacity modifiers), so they are wrapped in `rgb(...)` before handing them to\n * recharts as ordinary SVG `stroke` / `fill` strings.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/**\n * The CSS color for a chart token. `index` is 0-based (series position); it\n * wraps around the five-slot palette so any number of series stays on-brand.\n */\nexport const chartTokenColor = (index: number): string => {\n // Euclidean modulo so negative indices still land in 1..CHART_TOKEN_COUNT\n // (plain `%` would yield e.g. `--chart-0` for index -1).\n const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nexport type LineChartProps = CartesianChartProps & {\n /**\n * `[min, max]` bounds for the value (y) axis — numbers, `'auto'`, or padded\n * data extremes (`['dataMin - 500', 'dataMax + 500']`). Defaults to a zero\n * baseline.\n *\n * Only the line chart takes this. A line encodes value by POSITION, so moving\n * the baseline rescales it without misstating it; bars and areas encode by\n * length and filled area from the baseline, and truncating those makes the\n * geometry lie about the ratios. Use it to compare two series of similar\n * magnitude far from zero — not for a single series whose magnitude the\n * reader is meant to judge.\n */\n yDomain?: ChartAxisDomain;\n};\n\n/**\n * A themed multi-series line chart. Each series' color comes from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Wrap-free — mounts its own {@link ChartContainer}.\n *\n * @example\n * <LineChart\n * data={data}\n * xKey=\"month\"\n * series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}\n * />\n *\n * @example Two close-but-high series, on a baseline that shows the gap\n * <LineChart data={data} xKey=\"month\" series={series} yDomain={[7000, 9000]} />\n */\nexport const LineChart = ({\n data,\n xKey,\n series,\n height,\n width,\n className,\n ...chrome\n}: LineChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n {cartesianChrome({ xKey, ...chrome })}\n {series.map((s, index) => {\n const color = resolveSeriesColor(index, s.color);\n return (\n <Line\n key={s.dataKey}\n type=\"monotone\"\n dataKey={s.dataKey}\n name={s.name ?? s.dataKey}\n stroke={color}\n strokeWidth={2}\n dot={{ r: 3, fill: color, stroke: color }}\n activeDot={{ r: 4 }}\n isAnimationActive={false}\n />\n );\n })}\n </RechartsLineChart>\n </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n /** Stack the series into a single bar per category. Defaults to grouped. */\n stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n data,\n xKey,\n series,\n height,\n width,\n className,\n stacked = false,\n ...chrome\n}: BarChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n {cartesianChrome({ xKey, ...chrome })}\n {series.map((s, index) => (\n <Bar\n key={s.dataKey}\n dataKey={s.dataKey}\n name={s.name ?? s.dataKey}\n fill={resolveSeriesColor(index, s.color)}\n radius={stacked ? 0 : [4, 4, 0, 0]}\n stackId={stacked ? 'stack' : undefined}\n isAnimationActive={false}\n />\n ))}\n </RechartsBarChart>\n </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n /** Stack the series into a cumulative area. Defaults to overlaid. */\n stacked?: boolean;\n};\n\n/**\n * A themed multi-series area chart. Each series is stroked and softly filled\n * from the semantic `--chart-*` palette (by order, or pinned via\n * `series[].color`), which follows the active color scheme and the active\n * brand's `colors.chart` when it defines one. Pass `stacked` to stack the\n * series cumulatively.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n data,\n xKey,\n series,\n height,\n width,\n className,\n stacked = false,\n ...chrome\n}: AreaChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n {cartesianChrome({ xKey, ...chrome })}\n {series.map((s, index) => {\n const color = resolveSeriesColor(index, s.color);\n return (\n <Area\n key={s.dataKey}\n type=\"monotone\"\n dataKey={s.dataKey}\n name={s.name ?? s.dataKey}\n stroke={color}\n fill={color}\n fillOpacity={0.15}\n strokeWidth={2}\n stackId={stacked ? 'stack' : undefined}\n isAnimationActive={false}\n />\n );\n })}\n </RechartsAreaChart>\n </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n /** The rows to plot — one sector per row. */\n data: ChartDatum[];\n /** Key into each datum for the sector label. */\n nameKey: string;\n /** Key into each datum for the sector value. */\n dataKey: string;\n /** Render as a donut with a hole of this inner radius (px or %). */\n innerRadius?: ChartDimension;\n /** Height as a px number or percentage. Defaults to 300. */\n height?: ChartDimension;\n /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n width?: ChartDimension;\n /** Show a legend below the chart. Defaults to `true`. */\n showLegend?: boolean;\n /** Show the hover tooltip. Defaults to `true`. */\n showTooltip?: boolean;\n /** Format a sector value for the tooltip. */\n valueFormatter?: (value: number) => string;\n className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n data,\n nameKey,\n dataKey,\n innerRadius = 0,\n height,\n width,\n className,\n showLegend = true,\n showTooltip = true,\n valueFormatter,\n}: PieChartProps) => (\n <ChartContainer height={height} width={width} className={className}>\n <RechartsPieChart>\n {showTooltip && (\n <ChartTooltip\n valueFormatter={\n valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n }\n />\n )}\n {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n <Pie\n data={data}\n nameKey={nameKey}\n dataKey={dataKey}\n innerRadius={innerRadius}\n // Separate sectors with the brand surface color rather than recharts'\n // hardcoded white default.\n stroke=\"rgb(var(--background))\"\n isAnimationActive={false}\n >\n {data.map((datum, index) => (\n <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n ))}\n </Pie>\n </RechartsPieChart>\n </ChartContainer>\n);\n"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
3
|
+
//#region src/utils/classNames.ts
|
|
4
|
+
const twMerge = extendTailwindMerge({ prefix: "tw" });
|
|
5
|
+
const cn = (...classes) => twMerge(clsx(...classes));
|
|
6
|
+
//#endregion
|
|
7
|
+
export { cn };
|
|
8
|
+
|
|
9
|
+
//# sourceMappingURL=classNames-BzrkDnOD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"classNames-BzrkDnOD.js","names":[],"sources":["../src/utils/classNames.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// tailwind-merge v3 (Tailwind v4): the prefix drops the trailing separator —\n// `tw:` → `tw` (the `:` separator is implied).\nconst twMerge = extendTailwindMerge({\n prefix: 'tw',\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n"],"mappings":";;;AAKA,MAAM,UAAU,oBAAoB,EAClC,QAAQ,KACV,CAAC;AAED,MAAa,MAAM,GAAG,YAA0B,QAAQ,KAAK,GAAG,OAAO,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
//#region src/components/MergeEditor/constants.d.ts
|
|
2
|
+
declare const CHUNK_TYPE: {
|
|
3
|
+
readonly UNCHANGED: 'unchanged';
|
|
4
|
+
readonly ADDED: 'added';
|
|
5
|
+
readonly REMOVED: 'removed';
|
|
6
|
+
};
|
|
7
|
+
type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
|
|
8
|
+
type DiffChunk = {
|
|
9
|
+
type: ChunkType;
|
|
10
|
+
value: string;
|
|
11
|
+
/** 1-indexed start line in the old (left) text */
|
|
12
|
+
oldStart: number;
|
|
13
|
+
/** 1-indexed end line in the old (left) text */
|
|
14
|
+
oldEnd: number;
|
|
15
|
+
/** 1-indexed start line in the new (right) text */
|
|
16
|
+
newStart: number;
|
|
17
|
+
/** 1-indexed end line in the new (right) text */
|
|
18
|
+
newEnd: number;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
|
|
22
|
+
* representing a section that was modified. If only one side exists,
|
|
23
|
+
* the other is empty (pure insertion or deletion).
|
|
24
|
+
*/
|
|
25
|
+
type MergeConflict = {
|
|
26
|
+
id: string;
|
|
27
|
+
oldValue: string;
|
|
28
|
+
oldStartLine: number;
|
|
29
|
+
oldEndLine: number;
|
|
30
|
+
newValue: string;
|
|
31
|
+
newStartLine: number;
|
|
32
|
+
newEndLine: number;
|
|
33
|
+
};
|
|
34
|
+
declare const CHANGE_CLASS: {
|
|
35
|
+
readonly SAFE: 'safe';
|
|
36
|
+
readonly CONFLICT: 'conflict';
|
|
37
|
+
};
|
|
38
|
+
type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
|
|
39
|
+
//#endregion
|
|
40
|
+
export { ChangeClassification, DiffChunk, MergeConflict };
|
|
41
|
+
//# sourceMappingURL=constants-D6JcsD4_.d.ts.map
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { createContext, use } from "react";
|
|
2
|
+
import { keboolaLegacySidebar, keboolaLegacyTopnav } from "@keboola/brand-registry";
|
|
3
|
+
//#region src/components/ThemeProvider/utils.ts
|
|
4
|
+
const createTheme = (brand) => ({
|
|
5
|
+
id: brand.id,
|
|
6
|
+
name: brand.name,
|
|
7
|
+
shell: brand.shell,
|
|
8
|
+
logo: brand.logo
|
|
9
|
+
});
|
|
10
|
+
const createCssVars = () => {
|
|
11
|
+
const vars = {};
|
|
12
|
+
return {
|
|
13
|
+
set: (name, value) => {
|
|
14
|
+
if (value !== void 0) vars[name] = value;
|
|
15
|
+
},
|
|
16
|
+
expose: () => ({ ...vars })
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/components/ThemeProvider/defaults.ts
|
|
21
|
+
const keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
|
|
22
|
+
const DEFAULT_COLOR_SCHEME = "light";
|
|
23
|
+
const DEFAULT_BRAND_ID = "design-system";
|
|
24
|
+
const defaultBrand = {
|
|
25
|
+
id: DEFAULT_BRAND_ID,
|
|
26
|
+
name: "Design System",
|
|
27
|
+
shell: "sidebar",
|
|
28
|
+
theme: {}
|
|
29
|
+
};
|
|
30
|
+
const defaultTheme = createTheme(defaultBrand);
|
|
31
|
+
const DEFAULT_BRANDS = [];
|
|
32
|
+
//#endregion
|
|
33
|
+
//#region src/components/ThemeProvider/context.tsx
|
|
34
|
+
const noop = () => void 0;
|
|
35
|
+
const defaultContext = {
|
|
36
|
+
scheme: DEFAULT_COLOR_SCHEME,
|
|
37
|
+
resolvedScheme: DEFAULT_COLOR_SCHEME,
|
|
38
|
+
setScheme: noop,
|
|
39
|
+
brandId: defaultTheme.id,
|
|
40
|
+
setBrand: noop,
|
|
41
|
+
themes: [defaultTheme],
|
|
42
|
+
currentTheme: defaultTheme
|
|
43
|
+
};
|
|
44
|
+
const ThemeContext = createContext(defaultContext);
|
|
45
|
+
const useTheme = () => use(ThemeContext);
|
|
46
|
+
/**
|
|
47
|
+
* TEMPORARY — kbc-ui-internal only.
|
|
48
|
+
*
|
|
49
|
+
* Flags whether the subtree renders the argo design language. Defaults to argo
|
|
50
|
+
* (`true`) — the modern default; legacy chrome is the exception. It exists
|
|
51
|
+
* solely to bridge kbc-ui while its chrome is migrated off the legacy design
|
|
52
|
+
* language: kbc-ui provides `false` for legacy brands/surfaces (see its
|
|
53
|
+
* `AppThemeProvider`) and reads it via `useArgoDesign`. `ThemeProvider` does
|
|
54
|
+
* not set it — argo is decoupled from the brand. Once every kbc-ui surface has
|
|
55
|
+
* been migrated, this context and its hook can be deleted.
|
|
56
|
+
*/
|
|
57
|
+
const ArgoDesignContext = createContext(true);
|
|
58
|
+
const useArgoDesign = () => use(ArgoDesignContext);
|
|
59
|
+
//#endregion
|
|
60
|
+
export { ArgoDesignContext, DEFAULT_BRANDS, DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME, ThemeContext, createCssVars, createTheme, defaultBrand, keboolaLegacyIds, useArgoDesign, useTheme };
|
|
61
|
+
|
|
62
|
+
//# sourceMappingURL=context-KxxeMHbR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context-KxxeMHbR.js","names":[],"sources":["../src/components/ThemeProvider/utils.ts","../src/components/ThemeProvider/defaults.ts","../src/components/ThemeProvider/context.tsx"],"sourcesContent":["import type { Brand } from '@keboola/brand-registry';\n\nimport type { Theme } from './types';\n\nexport const createTheme = (brand: Brand): Theme => ({\n id: brand.id,\n name: brand.name,\n shell: brand.shell,\n logo: brand.logo,\n});\n\nexport type CssVars = {\n set: (name: string, value: string | undefined) => void;\n expose: () => Record<string, string>;\n};\n\nexport const createCssVars = (): CssVars => {\n const vars: Record<string, string> = {};\n return {\n set: (name, value) => {\n if (value !== undefined) vars[name] = value;\n },\n expose: () => ({ ...vars }),\n };\n};\n","import type { Brand } from '@keboola/brand-registry';\nimport { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createTheme } from './utils';\n\nexport const keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];\nexport const DEFAULT_COLOR_SCHEME: ResolvedColorScheme = 'light';\n\n// Sentinel active-brand id that maps to no registry brand. It resolves to\n// `defaultBrand` below, whose empty theme injects nothing — so the design-system\n// stylesheet defaults (`:root` / `[data-theme='dark']`) provide every token.\nexport const DEFAULT_BRAND_ID = 'design-system';\n\n// The \"no brand\" fallback: an empty theme → no CSS vars injected → the\n// stylesheet defaults win. Its shell/name still drive AppShell + switcher label.\nexport const defaultBrand: Brand = {\n id: DEFAULT_BRAND_ID,\n name: 'Design System',\n shell: 'sidebar',\n theme: {},\n};\nexport const defaultTheme = createTheme(defaultBrand);\n\nexport const DEFAULT_BRANDS: Brand[] = [];\n","import { createContext, use } from 'react';\n\nimport { DEFAULT_COLOR_SCHEME, defaultTheme } from './defaults';\nimport type { Theme } from './types';\nimport type { useBrandState } from './useBrandState';\nimport type { useColorSchemeState } from './useColorSchemeState';\n\nexport type ThemeContextValue = ReturnType<typeof useColorSchemeState> &\n ReturnType<typeof useBrandState> & {\n themes: Theme[];\n currentTheme: Theme;\n };\n\nconst noop = () => void 0;\n\nconst defaultContext: ThemeContextValue = {\n scheme: DEFAULT_COLOR_SCHEME,\n resolvedScheme: DEFAULT_COLOR_SCHEME,\n setScheme: noop,\n brandId: defaultTheme.id,\n setBrand: noop,\n\n themes: [defaultTheme],\n currentTheme: defaultTheme,\n};\n\nexport const ThemeContext = createContext(defaultContext);\n\nexport const useTheme = () => use(ThemeContext);\n\n/**\n * TEMPORARY — kbc-ui-internal only.\n *\n * Flags whether the subtree renders the argo design language. Defaults to argo\n * (`true`) — the modern default; legacy chrome is the exception. It exists\n * solely to bridge kbc-ui while its chrome is migrated off the legacy design\n * language: kbc-ui provides `false` for legacy brands/surfaces (see its\n * `AppThemeProvider`) and reads it via `useArgoDesign`. `ThemeProvider` does\n * not set it — argo is decoupled from the brand. Once every kbc-ui surface has\n * been migrated, this context and its hook can be deleted.\n */\nexport const ArgoDesignContext = createContext<boolean>(true);\n\nexport const useArgoDesign = () => use(ArgoDesignContext);\n"],"mappings":";;;AAIA,MAAa,eAAe,WAAyB;CACnD,IAAI,MAAM;CACV,MAAM,MAAM;CACZ,OAAO,MAAM;CACb,MAAM,MAAM;AACd;AAOA,MAAa,sBAA+B;CAC1C,MAAM,OAA+B,CAAC;CACtC,OAAO;EACL,MAAM,MAAM,UAAU;GACpB,IAAI,UAAU,KAAA,GAAW,KAAK,QAAQ;EACxC;EACA,eAAe,EAAE,GAAG,KAAK;CAC3B;AACF;;;AClBA,MAAa,mBAAmB,CAAC,qBAAqB,IAAI,oBAAoB,EAAE;AAChF,MAAa,uBAA4C;AAKzD,MAAa,mBAAmB;AAIhC,MAAa,eAAsB;CACjC,IAAI;CACJ,MAAM;CACN,OAAO;CACP,OAAO,CAAC;AACV;AACA,MAAa,eAAe,YAAY,YAAY;AAEpD,MAAa,iBAA0B,CAAC;;;ACXxC,MAAM,aAAa,KAAK;AAExB,MAAM,iBAAoC;CACxC,QAAQ;CACR,gBAAgB;CAChB,WAAW;CACX,SAAS,aAAa;CACtB,UAAU;CAEV,QAAQ,CAAC,YAAY;CACrB,cAAc;AAChB;AAEA,MAAa,eAAe,cAAc,cAAc;AAExD,MAAa,iBAAiB,IAAI,YAAY;;;;;;;;;;;;AAa9C,MAAa,oBAAoB,cAAuB,IAAI;AAE5D,MAAa,sBAAsB,IAAI,iBAAiB"}
|
package/dist/editors.d.ts
CHANGED
|
@@ -1,189 +1,196 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ReactNode } from
|
|
3
|
-
import { CompletionSource } from
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { ChangeClassification, MergeConflict } from "./constants-D6JcsD4_.js";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
import { CompletionSource } from "@codemirror/autocomplete";
|
|
4
|
+
import { EditorView } from "@codemirror/view";
|
|
5
|
+
import { EditorState, EditorView as EditorView$1 } from "@uiw/react-codemirror";
|
|
6
|
+
import { SQLNamespace } from "@codemirror/lang-sql";
|
|
7
|
+
import { StreamLanguage } from "@codemirror/language";
|
|
8
|
+
import { SqlDialectName, SqlDialectName as SqlDialectName$1 } from "@keboola/codemirror-lang-sql";
|
|
9
|
+
import "@codemirror/state";
|
|
10
|
+
//#region src/components/CodeEditor/helpers.d.ts
|
|
11
|
+
declare const LANGUAGE_MODES: readonly ['application/json', 'text/plain', 'text/x-python', 'text/x-sql', 'text/x-mysql', 'text/x-pgsql', 'text/x-mssql', 'text/x-sfsql', 'text/x-bqsql', 'text/x-plsql', 'text/x-rsrc', 'text/x-sh', 'text/x-toml', 'text/jsonnet', 'text/x-dbt', 'text/javascript', 'text/typescript'];
|
|
11
12
|
type LANGUAGE_MODE = (typeof LANGUAGE_MODES)[number];
|
|
12
13
|
declare const isLanguageMode: (mode: string) => mode is LANGUAGE_MODE;
|
|
13
|
-
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/components/CodeEditor/variableCompletion.d.ts
|
|
14
16
|
type EditorVariable = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
name: string;
|
|
18
|
+
value?: string;
|
|
17
19
|
};
|
|
18
|
-
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/components/CodeEditor/CodeEditor.d.ts
|
|
19
22
|
type Props$2 = {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
23
|
+
value: string;
|
|
24
|
+
previousValue?: string;
|
|
25
|
+
/**
|
|
26
|
+
* `'field'` draws the chrome an `InputGroup` draws — surface, border, radius,
|
|
27
|
+
* focus ring, read-only wash — for an editor that is one control among others
|
|
28
|
+
* in a form. It sizes to its content, so don't pin its height.
|
|
29
|
+
*
|
|
30
|
+
* `'plain'` (the default) is the full-bleed surface of an editor that *is* the
|
|
31
|
+
* panel: a modal body, a chat block, a fixed-height viewer already framed by
|
|
32
|
+
* whatever contains it.
|
|
33
|
+
*/
|
|
34
|
+
variant?: 'plain' | 'field';
|
|
35
|
+
mode?: LANGUAGE_MODE;
|
|
36
|
+
placeholder?: string;
|
|
37
|
+
/** Names the editable region for screen readers — the editor has no visible label of its own. */
|
|
38
|
+
ariaLabel?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Highlights every occurrence and scrolls the selected one into view. The find
|
|
41
|
+
* UI is the caller's — pass the query it holds, and omit both props entirely to
|
|
42
|
+
* leave the search extension uninstalled.
|
|
43
|
+
*/
|
|
44
|
+
searchQuery?: string;
|
|
45
|
+
searchMatchIndex?: number;
|
|
46
|
+
readOnly?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Refuses edits while leaving the editor looking and behaving as it did — for a
|
|
49
|
+
* transient lock such as an in-flight save, where a keystroke landing mid-request
|
|
50
|
+
* would be overwritten by the response. `readOnly` is the wrong prop for that:
|
|
51
|
+
* it turns the editor into a viewer, greying the surface and taking the lint
|
|
52
|
+
* marks and completions with it.
|
|
53
|
+
*/
|
|
54
|
+
inputLocked?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* A flat list of completions, offered everywhere in the document. One word per
|
|
57
|
+
* label: CodeMirror derives the pattern for the word being completed from the
|
|
58
|
+
* labels' characters, so a space in one widens it across whitespace and the
|
|
59
|
+
* editor offers nothing past the first word of a line. A phrase belongs in
|
|
60
|
+
* `completionSource`.
|
|
61
|
+
*
|
|
62
|
+
* Compared by identity, like `completionSource` — hand the editor a stable array.
|
|
63
|
+
*/
|
|
64
|
+
autocompletions?: string[];
|
|
65
|
+
/**
|
|
66
|
+
* Completions that depend on where the cursor is — a column list offered only
|
|
67
|
+
* after its table, say. Wins over both `autocompletions` and `completeAny`,
|
|
68
|
+
* which stay the right props for a list that is the same everywhere in the
|
|
69
|
+
* document and for having no list at all. Like them, it opens on typing.
|
|
70
|
+
*
|
|
71
|
+
* Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
|
|
72
|
+
* extension tree on every render.
|
|
73
|
+
*/
|
|
74
|
+
completionSource?: CompletionSource;
|
|
75
|
+
/**
|
|
76
|
+
* Configuration variables, completed into `{{name}}`. Independent of
|
|
77
|
+
* `completionSource`: both are offered, so a caller keeps its own completions and
|
|
78
|
+
* gets variables spelled the way the rest of the platform writes them.
|
|
79
|
+
*/
|
|
80
|
+
variables?: EditorVariable[];
|
|
81
|
+
extraKeys?: Record<string, () => void>;
|
|
82
|
+
withToggleCommentHint?: boolean;
|
|
83
|
+
withAutofocus?: boolean;
|
|
84
|
+
withLineNumbers?: boolean;
|
|
85
|
+
withLineWrapping?: boolean;
|
|
86
|
+
withCollapseUnchanged?: boolean;
|
|
87
|
+
withCopyButton?: boolean;
|
|
88
|
+
completeAny?: boolean;
|
|
89
|
+
help?: ReactNode;
|
|
90
|
+
helpPostfix?: ReactNode;
|
|
91
|
+
/**
|
|
92
|
+
* Extra actions for the toolbar that floats over the editor's top-right corner,
|
|
93
|
+
* beside the copy button. The toolbar is a 28px chip, so pass `size="icon-xs"`
|
|
94
|
+
* buttons — a default-sized one grows the chip and de-aligns the copy button.
|
|
95
|
+
*/
|
|
96
|
+
renderAdditionalButtons?: (value?: string) => ReactNode;
|
|
97
|
+
className?: string;
|
|
95
98
|
} & ({
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
readOnly: true;
|
|
100
|
+
onChange?: never;
|
|
98
101
|
} | {
|
|
99
|
-
|
|
100
|
-
|
|
102
|
+
readOnly?: boolean;
|
|
103
|
+
onChange: (value: string) => void;
|
|
101
104
|
});
|
|
102
|
-
declare const CodeEditor: ({ value, previousValue, onChange, variant, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className
|
|
103
|
-
|
|
105
|
+
declare const CodeEditor: ({ value, previousValue, onChange, variant, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className }: Props$2) => import("react/jsx-runtime").JSX.Element;
|
|
106
|
+
//#endregion
|
|
107
|
+
//#region src/components/CodeEditor/highlighting.d.ts
|
|
104
108
|
type HighlightedLines = {
|
|
109
|
+
from: number;
|
|
110
|
+
to: number;
|
|
111
|
+
error?: {
|
|
105
112
|
from: number;
|
|
106
113
|
to: number;
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
from: number;
|
|
113
|
-
to: number;
|
|
114
|
-
};
|
|
114
|
+
};
|
|
115
|
+
processing?: {
|
|
116
|
+
from: number;
|
|
117
|
+
to: number;
|
|
118
|
+
};
|
|
115
119
|
} | null;
|
|
116
|
-
|
|
120
|
+
//#endregion
|
|
121
|
+
//#region src/components/CodeEditor/SqlEditor.d.ts
|
|
117
122
|
type Props$1 = {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
123
|
+
value: string;
|
|
124
|
+
onChange?: (value: string) => void;
|
|
125
|
+
onSelectionChange?: (text: string) => void;
|
|
126
|
+
onCreateEditor?: (view: EditorView$1, state: EditorState) => void;
|
|
127
|
+
onDestroyEditor?: () => void;
|
|
128
|
+
onBlurEditor?: (view: EditorView$1) => void;
|
|
129
|
+
onFocusEditor?: (view: EditorView$1) => void;
|
|
130
|
+
readOnly: boolean;
|
|
131
|
+
placeholder?: string;
|
|
132
|
+
searchQuery?: string;
|
|
133
|
+
searchMatchIndex?: number;
|
|
134
|
+
queryParser?: (sql: string) => Promise<string[]>;
|
|
135
|
+
autoFocus?: boolean;
|
|
136
|
+
lineNumbers?: boolean;
|
|
137
|
+
className?: string;
|
|
138
|
+
/**
|
|
139
|
+
* A schema is too large to compare by value, so this one prop keeps the
|
|
140
|
+
* identity requirement every other prop here is now free of: hand the editor
|
|
141
|
+
* a stable object, or it rebuilds its whole extension tree on every render.
|
|
142
|
+
*/
|
|
143
|
+
schema?: SQLNamespace;
|
|
144
|
+
/**
|
|
145
|
+
* Completions the caller knows and the schema does not — a table the code writes to
|
|
146
|
+
* before it exists, say. Added to the schema, keyword and variable completions; unlike
|
|
147
|
+
* `CodeEditor`'s prop of the same name, it replaces nothing.
|
|
148
|
+
*
|
|
149
|
+
* Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
|
|
150
|
+
* extension tree on every render.
|
|
151
|
+
*/
|
|
152
|
+
completionSource?: CompletionSource;
|
|
153
|
+
variables?: EditorVariable[];
|
|
154
|
+
defaultSchema?: string;
|
|
155
|
+
defaultDatabase?: string;
|
|
156
|
+
highlightLines?: HighlightedLines;
|
|
157
|
+
dialect?: SqlDialectName$1;
|
|
153
158
|
};
|
|
154
|
-
declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect
|
|
155
|
-
|
|
159
|
+
declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect }: Props$1) => import("react/jsx-runtime").JSX.Element;
|
|
160
|
+
//#endregion
|
|
161
|
+
//#region src/components/MergeEditor/MergeEditor.d.ts
|
|
156
162
|
type Props = {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
163
|
+
mergeValue: string;
|
|
164
|
+
handleMergeChange: (value: string) => void;
|
|
165
|
+
leftText: string;
|
|
166
|
+
rightText: string;
|
|
167
|
+
leftConflicts: MergeConflict[];
|
|
168
|
+
rightConflicts: MergeConflict[];
|
|
169
|
+
leftHighlightedLines: Set<number>;
|
|
170
|
+
rightHighlightedLines: Set<number>;
|
|
171
|
+
leftClassification: Map<number, ChangeClassification>;
|
|
172
|
+
rightClassification: Map<number, ChangeClassification>;
|
|
173
|
+
mergeHighlightedLines: Set<number>;
|
|
174
|
+
mergeClassification: Map<number, ChangeClassification>;
|
|
175
|
+
acceptLeft: (conflict: MergeConflict) => void;
|
|
176
|
+
acceptRight: (conflict: MergeConflict) => void;
|
|
177
|
+
dismissLeft: (conflict: MergeConflict) => void;
|
|
178
|
+
dismissRight: (conflict: MergeConflict) => void;
|
|
179
|
+
leftHeader?: ReactNode;
|
|
180
|
+
middleHeader?: ReactNode;
|
|
181
|
+
middleHeaderClassName?: string;
|
|
182
|
+
middleClassName?: string;
|
|
183
|
+
rightHeader?: ReactNode;
|
|
184
|
+
className?: string;
|
|
185
|
+
/**
|
|
186
|
+
* Paint the corresponding read-only pane with the error palette to signal the
|
|
187
|
+
* side has been deleted upstream. The diff is still rendered so the user can
|
|
188
|
+
* see what was lost; accept/dismiss controls for that side are suppressed.
|
|
189
|
+
*/
|
|
190
|
+
leftDeleted?: boolean;
|
|
191
|
+
rightDeleted?: boolean;
|
|
186
192
|
};
|
|
187
|
-
declare const MergeEditor: ({ mergeValue, handleMergeChange, leftText, rightText, leftConflicts, rightConflicts, leftHighlightedLines, rightHighlightedLines, leftClassification, rightClassification, mergeHighlightedLines, mergeClassification, acceptLeft, acceptRight, dismissLeft, dismissRight, leftHeader, middleHeader, middleHeaderClassName, middleClassName, rightHeader, className, leftDeleted, rightDeleted
|
|
188
|
-
|
|
189
|
-
export { CodeEditor, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };
|
|
193
|
+
declare const MergeEditor: ({ mergeValue, handleMergeChange, leftText, rightText, leftConflicts, rightConflicts, leftHighlightedLines, rightHighlightedLines, leftClassification, rightClassification, mergeHighlightedLines, mergeClassification, acceptLeft, acceptRight, dismissLeft, dismissRight, leftHeader, middleHeader, middleHeaderClassName, middleClassName, rightHeader, className, leftDeleted, rightDeleted }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
194
|
+
//#endregion
|
|
195
|
+
export { CodeEditor, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, type SqlDialectName, SqlEditor, isLanguageMode };
|
|
196
|
+
//# sourceMappingURL=editors.d.ts.map
|