@datum-cloud/datum-ui 0.4.0 → 0.6.0-alpha.3e04d8c
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/README.md +81 -39
- package/dist/adapter-context-rWveHhDd.mjs +25 -0
- package/dist/alert/index.mjs +2 -3
- package/dist/{alert-BC2Mccfo.mjs → alert-BDj6od5I.mjs} +2 -4
- package/dist/app-navigation/index.mjs +4 -12
- package/dist/{app-navigation-DsCKgfPe.mjs → app-navigation-84ro28PU.mjs} +5 -8
- package/dist/autocomplete/index.mjs +2 -7
- package/dist/{autocomplete-DRB_kSVx.mjs → autocomplete-CkYJueBL.mjs} +7 -9
- package/dist/autosearch/index.mjs +195 -0
- package/dist/avatar/index.mjs +2 -4
- package/dist/{avatar-DyLq0xkt.mjs → avatar-BtKVcvO4.mjs} +2 -4
- package/dist/avatar-stack/index.mjs +2 -6
- package/dist/{avatar-stack-BT0dBswq.mjs → avatar-stack-oVr8tsU7.mjs} +4 -6
- package/dist/badge/index.mjs +2 -3
- package/dist/{badge-BgFj4Nsc.mjs → badge-DJR33ftJ.mjs} +2 -4
- package/dist/breadcrumb/index.mjs +2 -4
- package/dist/{breadcrumb-CJNaYyk1.mjs → breadcrumb-B-9G347O.mjs} +2 -4
- package/dist/button/index.mjs +3 -4
- package/dist/{button-0N61fmAR.mjs → button-BllvE9Lm.mjs} +3 -5
- package/dist/{button-D6AORsOz.mjs → button-D3RrsMfQ.mjs} +2 -4
- package/dist/{link-button-Cby0p4LW.mjs → button-fO8nazJE.mjs} +3 -5
- package/dist/button-group/index.mjs +2 -5
- package/dist/{button-group-BDk8btAy.mjs → button-group-CYPka2zz.mjs} +3 -5
- package/dist/calendar/index.mjs +2 -5
- package/dist/{calendar-BtfraIvX.mjs → calendar-DEkCw7I1.mjs} +4 -6
- package/dist/{calendar-date-picker-B9mxJM7f.mjs → calendar-date-picker-CDT-8Ha8.mjs} +8 -9
- package/dist/card/index.mjs +2 -4
- package/dist/{card-BiHXFt4s.mjs → card-DKG1Cwlj.mjs} +3 -6
- package/dist/chart/index.mjs +2 -4
- package/dist/{chart-CL0i-xIt.mjs → chart-CUa21ynK.mjs} +2 -4
- package/dist/checkbox/index.mjs +2 -4
- package/dist/{checkbox-CQrjygFt.mjs → checkbox-I5BvrMPe.mjs} +3 -6
- package/dist/{close.icon-D2r5q3bj.mjs → close.icon-HCfS4Y-N.mjs} +2 -4
- package/dist/{cn-DWCc1QRE.mjs → cn-D2KYQ917.mjs} +1 -3
- package/dist/code-editor/index.mjs +2 -0
- package/dist/{col-C9PDhvm5.mjs → col-1T0Q3SlH.mjs} +2 -7
- package/dist/collapsible/index.mjs +2 -3
- package/dist/{collapsible-Dw71o2um.mjs → collapsible-CUphkSBt.mjs} +1 -3
- package/dist/combobox/index.mjs +2 -0
- package/dist/combobox-B-C9lJeD.mjs +97 -0
- package/dist/command/index.mjs +2 -5
- package/dist/{command-DVroicgn.mjs → command-DqHWukGK.mjs} +3 -5
- package/dist/components/features/autocomplete/autocomplete.d.ts +1 -1
- package/dist/components/features/autocomplete/autocomplete.d.ts.map +1 -1
- package/dist/components/features/autocomplete/autocomplete.types.d.ts +2 -0
- package/dist/components/features/autocomplete/autocomplete.types.d.ts.map +1 -1
- package/dist/components/features/autosearch/autosearch.d.ts +35 -0
- package/dist/components/features/autosearch/autosearch.d.ts.map +1 -0
- package/dist/components/features/autosearch/autosearch.types.d.ts +51 -0
- package/dist/components/features/autosearch/autosearch.types.d.ts.map +1 -0
- package/dist/components/features/autosearch/index.d.ts +3 -0
- package/dist/components/features/autosearch/index.d.ts.map +1 -0
- package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts +2 -1
- package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts.map +1 -1
- package/dist/components/features/code-editor/code-editor-tabs.d.ts +63 -0
- package/dist/components/features/code-editor/code-editor-tabs.d.ts.map +1 -0
- package/dist/components/features/code-editor/code-editor.d.ts +58 -0
- package/dist/components/features/code-editor/code-editor.d.ts.map +1 -0
- package/dist/components/features/code-editor/index.d.ts +6 -0
- package/dist/components/features/code-editor/index.d.ts.map +1 -0
- package/dist/components/features/code-editor/lib/editor.d.ts +7 -0
- package/dist/components/features/code-editor/lib/editor.d.ts.map +1 -0
- package/dist/components/features/code-editor/types.d.ts +98 -0
- package/dist/components/features/code-editor/types.d.ts.map +1 -0
- package/dist/components/features/combobox/combobox.d.ts +27 -0
- package/dist/components/features/combobox/combobox.d.ts.map +1 -0
- package/dist/components/features/combobox/index.d.ts +3 -0
- package/dist/components/features/combobox/index.d.ts.map +1 -0
- package/dist/components/features/combobox/types.d.ts +84 -0
- package/dist/components/features/combobox/types.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/date-time-picker.d.ts +9 -0
- package/dist/components/features/date-time-picker/date-time-picker.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/index.d.ts +3 -0
- package/dist/components/features/date-time-picker/index.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/types.d.ts +59 -0
- package/dist/components/features/date-time-picker/types.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/utils/format.d.ts +13 -0
- package/dist/components/features/date-time-picker/utils/format.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/utils/index.d.ts +3 -0
- package/dist/components/features/date-time-picker/utils/index.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/utils/timezone.d.ts +23 -0
- package/dist/components/features/date-time-picker/utils/timezone.d.ts.map +1 -0
- package/dist/components/features/form/adapter-context.d.ts +17 -0
- package/dist/components/features/form/adapter-context.d.ts.map +1 -0
- package/dist/components/features/form/adapter-types.d.ts +120 -0
- package/dist/components/features/form/adapter-types.d.ts.map +1 -0
- package/dist/components/features/form/adapters/conform/conform-adapter.d.ts +9 -0
- package/dist/components/features/form/adapters/conform/conform-adapter.d.ts.map +1 -0
- package/dist/components/features/form/adapters/conform/conform-provider.d.ts +22 -0
- package/dist/components/features/form/adapters/conform/conform-provider.d.ts.map +1 -0
- package/dist/components/features/form/adapters/conform/index.d.ts +3 -0
- package/dist/components/features/form/adapters/conform/index.d.ts.map +1 -0
- package/dist/components/features/form/adapters/rhf/index.d.ts +3 -0
- package/dist/components/features/form/adapters/rhf/index.d.ts.map +1 -0
- package/dist/components/features/form/adapters/rhf/rhf-adapter.d.ts +10 -0
- package/dist/components/features/form/adapters/rhf/rhf-adapter.d.ts.map +1 -0
- package/dist/components/features/form/adapters/rhf/rhf-provider.d.ts +22 -0
- package/dist/components/features/form/adapters/rhf/rhf-provider.d.ts.map +1 -0
- package/dist/components/features/form/components/form-autocomplete.d.ts.map +1 -1
- package/dist/components/features/form/components/form-autosearch.d.ts +37 -0
- package/dist/components/features/form/components/form-autosearch.d.ts.map +1 -0
- package/dist/components/features/form/components/form-checkbox.d.ts.map +1 -1
- package/dist/components/features/form/components/form-combobox.d.ts +80 -0
- package/dist/components/features/form/components/form-combobox.d.ts.map +1 -0
- package/dist/components/features/form/components/form-copy-box.d.ts +3 -0
- package/dist/components/features/form/components/form-copy-box.d.ts.map +1 -1
- package/dist/components/features/form/components/form-custom.d.ts.map +1 -1
- package/dist/components/features/form/components/form-date-picker.d.ts +40 -0
- package/dist/components/features/form/components/form-date-picker.d.ts.map +1 -0
- package/dist/components/features/form/components/form-date-time-picker.d.ts +39 -0
- package/dist/components/features/form/components/form-date-time-picker.d.ts.map +1 -0
- package/dist/components/features/form/components/form-dialog.d.ts.map +1 -1
- package/dist/components/features/form/components/form-field-array.d.ts +5 -17
- package/dist/components/features/form/components/form-field-array.d.ts.map +1 -1
- package/dist/components/features/form/components/form-field.d.ts +7 -21
- package/dist/components/features/form/components/form-field.d.ts.map +1 -1
- package/dist/components/features/form/components/form-input-group.d.ts +4 -4
- package/dist/components/features/form/components/form-input-group.d.ts.map +1 -1
- package/dist/components/features/form/components/form-input.d.ts.map +1 -1
- package/dist/components/features/form/components/form-radio-group.d.ts.map +1 -1
- package/dist/components/features/form/components/form-root.d.ts +5 -25
- package/dist/components/features/form/components/form-root.d.ts.map +1 -1
- package/dist/components/features/form/components/form-select.d.ts.map +1 -1
- package/dist/components/features/form/components/form-switch.d.ts.map +1 -1
- package/dist/components/features/form/components/form-textarea.d.ts.map +1 -1
- package/dist/components/features/form/components/form-time-picker.d.ts +21 -0
- package/dist/components/features/form/components/form-time-picker.d.ts.map +1 -0
- package/dist/components/features/form/components/form-transfer.d.ts +37 -0
- package/dist/components/features/form/components/form-transfer.d.ts.map +1 -0
- package/dist/components/features/form/components/index.d.ts +7 -1
- package/dist/components/features/form/components/index.d.ts.map +1 -1
- package/dist/components/features/form/components/stepper/form-stepper.d.ts.map +1 -1
- package/dist/components/features/form/context/form-context.d.ts +2 -2
- package/dist/components/features/form/context/form-context.d.ts.map +1 -1
- package/dist/components/features/form/hooks/index.d.ts +1 -1
- package/dist/components/features/form/hooks/index.d.ts.map +1 -1
- package/dist/components/features/form/hooks/use-field.d.ts +12 -18
- package/dist/components/features/form/hooks/use-field.d.ts.map +1 -1
- package/dist/components/features/form/hooks/use-form-state.d.ts +36 -0
- package/dist/components/features/form/hooks/use-form-state.d.ts.map +1 -0
- package/dist/components/features/form/hooks/use-watch.d.ts +9 -20
- package/dist/components/features/form/hooks/use-watch.d.ts.map +1 -1
- package/dist/components/features/form/index.d.ts +69 -45
- package/dist/components/features/form/index.d.ts.map +1 -1
- package/dist/components/features/form/stepper/index.d.ts +17 -0
- package/dist/components/features/form/stepper/index.d.ts.map +1 -0
- package/dist/components/features/form/types/index.d.ts +68 -32
- package/dist/components/features/form/types/index.d.ts.map +1 -1
- package/dist/components/features/form/utils/get-field-constraints.d.ts +33 -0
- package/dist/components/features/form/utils/get-field-constraints.d.ts.map +1 -0
- package/dist/components/features/form/utils/get-schema-defaults.d.ts +24 -0
- package/dist/components/features/form/utils/get-schema-defaults.d.ts.map +1 -0
- package/dist/components/features/form/utils/zod-helpers.d.ts +12 -0
- package/dist/components/features/form/utils/zod-helpers.d.ts.map +1 -0
- package/dist/components/features/index.d.ts +1 -0
- package/dist/components/features/index.d.ts.map +1 -1
- package/dist/components/features/time-picker/index.d.ts +3 -0
- package/dist/components/features/time-picker/index.d.ts.map +1 -0
- package/dist/components/features/time-picker/time-picker.d.ts +22 -0
- package/dist/components/features/time-picker/time-picker.d.ts.map +1 -0
- package/dist/components/features/time-picker/types.d.ts +31 -0
- package/dist/components/features/time-picker/types.d.ts.map +1 -0
- package/dist/components/features/transfer/components/index.d.ts +9 -0
- package/dist/components/features/transfer/components/index.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-group.d.ts +7 -0
- package/dist/components/features/transfer/components/transfer-group.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-item.d.ts +10 -0
- package/dist/components/features/transfer/components/transfer-item.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-panel.d.ts +18 -0
- package/dist/components/features/transfer/components/transfer-panel.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-search.d.ts +9 -0
- package/dist/components/features/transfer/components/transfer-search.d.ts.map +1 -0
- package/dist/components/features/transfer/hooks/use-transfer-dnd.d.ts +26 -0
- package/dist/components/features/transfer/hooks/use-transfer-dnd.d.ts.map +1 -0
- package/dist/components/features/transfer/hooks/use-transfer-state.d.ts +20 -0
- package/dist/components/features/transfer/hooks/use-transfer-state.d.ts.map +1 -0
- package/dist/components/features/transfer/index.d.ts +3 -0
- package/dist/components/features/transfer/index.d.ts.map +1 -0
- package/dist/components/features/transfer/transfer.d.ts +6 -0
- package/dist/components/features/transfer/transfer.d.ts.map +1 -0
- package/dist/components/features/transfer/types.d.ts +69 -0
- package/dist/components/features/transfer/types.d.ts.map +1 -0
- package/dist/components/toast.d.ts +2 -0
- package/dist/components/toast.d.ts.map +1 -0
- package/dist/data-table/index.mjs +21 -51
- package/dist/date-picker/index.mjs +3 -10
- package/dist/date-time-picker/index.mjs +2 -0
- package/dist/date-time-picker-BomrW07W.mjs +178 -0
- package/dist/dialog/index.mjs +2 -5
- package/dist/{dialog-B0B3Kbfk.mjs → dialog-Bm2H9lrx.mjs} +4 -6
- package/dist/{dialog-DdrHeboM.mjs → dialog-DASRaFxD.mjs} +2 -4
- package/dist/dropdown/index.mjs +2 -3
- package/dist/{dropdown-Cdx7rOKv.mjs → dropdown-DZiAt-jS.mjs} +3 -5
- package/dist/{dropdown-menu-CdShrDz_.mjs → dropdown-menu-lALvDnab.mjs} +5 -7
- package/dist/dropzone/index.mjs +2 -5
- package/dist/{dropzone-B6kSN3DY.mjs → dropzone-ogtpQ4fy.mjs} +5 -8
- package/dist/empty-content/index.mjs +2 -3
- package/dist/{empty-content-B1lwLr40.mjs → empty-content-C63GPJ5d.mjs} +3 -9
- package/dist/form/adapters/conform/index.mjs +327 -0
- package/dist/form/adapters/rhf/index.mjs +267 -0
- package/dist/form/index.mjs +3 -146
- package/dist/form/stepper/index.mjs +541 -0
- package/dist/form-D8OnRHdd.mjs +1653 -0
- package/dist/form-context-Ccxm-wqL.mjs +17 -0
- package/dist/get-field-constraints-BicgDkfH.mjs +51 -0
- package/dist/grid/index.mjs +2 -3
- package/dist/hooks/index.mjs +3 -4
- package/dist/{use-debounce-MnfjH51L.mjs → hooks-D8r2M2U6.mjs} +1 -3
- package/dist/hover-card/index.mjs +2 -4
- package/dist/{hover-card-CEIauuie.mjs → hover-card-DDWWD5Hx.mjs} +2 -4
- package/dist/{icon-wrapper-BBK4z4tj.mjs → icon-wrapper-DuLp3RM1.mjs} +1 -3
- package/dist/icons/index.mjs +4 -5
- package/dist/index.mjs +66 -71
- package/dist/input/index.mjs +2 -5
- package/dist/{input-DEMoi_8F.mjs → input-DOmNpcQJ.mjs} +2 -4
- package/dist/{input-CYFN0Ap2.mjs → input-FKGqZypx.mjs} +3 -5
- package/dist/input-group/index.mjs +2 -7
- package/dist/{input-group-DJgYpOlq.mjs → input-group-DDtz-RT7.mjs} +5 -7
- package/dist/input-number/index.mjs +2 -6
- package/dist/{input-number-Cuy9CCg_.mjs → input-number-a7uydAsw.mjs} +4 -6
- package/dist/input-with-addons/index.mjs +28 -3
- package/dist/label/index.mjs +2 -4
- package/dist/{label-mOg07fuQ.mjs → label-cnAhY-ej.mjs} +3 -6
- package/dist/loader-overlay/index.mjs +2 -3
- package/dist/{loader-overlay-8IWX_1Ga.mjs → loader-overlay-BTFdkp7W.mjs} +3 -5
- package/dist/map/index.mjs +2 -14
- package/dist/{map-CaI1EshG.mjs → map-CWIQ-eql.mjs} +10 -14
- package/dist/{map-leaflet-imports-J7w1V7mh.mjs → map-leaflet-imports-CRSKA79m.mjs} +1 -2
- package/dist/more-actions/index.mjs +2 -5
- package/dist/{more-actions-BO5ikUxY.mjs → more-actions-ILnEZq_E.mjs} +5 -7
- package/dist/nprogress/index.mjs +1 -3
- package/dist/page-title/index.mjs +2 -3
- package/dist/{page-title-DWteBy1E.mjs → page-title-ChsnpBiH.mjs} +2 -4
- package/dist/popover/index.mjs +2 -4
- package/dist/{popover-ugw5MpuT.mjs → popover-FJAcbYoH.mjs} +2 -4
- package/dist/radio-group/index.mjs +2 -4
- package/dist/{radio-group-_gMymwnb.mjs → radio-group-CiITR0LO.mjs} +3 -6
- package/dist/select/index.mjs +2 -4
- package/dist/{select-BZOKWjlH.mjs → select-CiLR_DiQ.mjs} +3 -6
- package/dist/separator/index.mjs +2 -4
- package/dist/{separator-BzyALya2.mjs → separator-DXVTncCK.mjs} +2 -4
- package/dist/sheet/index.mjs +3 -5
- package/dist/{sheet-BX6lae56.mjs → sheet-BzXksqYY.mjs} +4 -6
- package/dist/{sheet-DAcFjaGw.mjs → sheet-Di3b-oPu.mjs} +2 -4
- package/dist/sidebar/index.mjs +2 -10
- package/dist/{sidebar-B3EV33mG.mjs → sidebar-BnhnjvfO.mjs} +10 -14
- package/dist/skeleton/index.mjs +2 -5
- package/dist/{skeleton-2vQ0vFQk.mjs → skeleton-BKl4mfJt.mjs} +2 -4
- package/dist/{skeleton-BgOwIgE0.mjs → skeleton-D1MUhAVo.mjs} +3 -5
- package/dist/spinner/index.mjs +2 -4
- package/dist/{spinner-osyXAlhr.mjs → spinner-OyOf9-Yu.mjs} +2 -4
- package/dist/{spinner.icon-C0MbtgqX.mjs → spinner.icon-C-vjSM6o.mjs} +2 -4
- package/dist/stepper/index.mjs +2 -5
- package/dist/{stepper-BMsn7I78.mjs → stepper-DvIOp0hh.mjs} +3 -5
- package/dist/switch/index.mjs +2 -4
- package/dist/{switch-C60FpEal.mjs → switch-DQJQhPIQ.mjs} +3 -6
- package/dist/table/index.mjs +2 -4
- package/dist/{table-Cl3UzIhI.mjs → table-Cdsh-39-.mjs} +2 -4
- package/dist/tabs/index.mjs +50 -3
- package/dist/tag-input/index.mjs +2 -5
- package/dist/{tag-input-DR2gukhL.mjs → tag-input-T9cUX9-G.mjs} +5 -7
- package/dist/task-queue/index.mjs +2 -7
- package/dist/{task-queue-dropdown-C9KHKbGh.mjs → task-queue-dropdown-Wcbj-f0V.mjs} +10 -30
- package/dist/textarea/index.mjs +2 -5
- package/dist/{textarea-CVo38n3S.mjs → textarea-94vq_G_S.mjs} +2 -4
- package/dist/{textarea-CZF5n57i.mjs → textarea-BwD-MmTV.mjs} +3 -5
- package/dist/theme/index.mjs +2 -3
- package/dist/{theme.provider-TUHlMsjM.mjs → themes-DG1md8FI.mjs} +1 -6
- package/dist/time-picker/index.mjs +2 -0
- package/dist/time-picker-BoF7pZZ2.mjs +43 -0
- package/dist/{to-api-format-naIpF-NI.mjs → to-api-format-Bh3c01gr.mjs} +9 -18
- package/dist/toast/index.mjs +3 -3
- package/dist/{use-toast-By9HuFwP.mjs → toast-BWnN5fax.mjs} +5 -42
- package/dist/toast-DpxlFNNx.mjs +37 -0
- package/dist/tooltip/index.mjs +2 -4
- package/dist/{tooltip-CuX2jQA9.mjs → tooltip-Cruvl5F6.mjs} +3 -6
- package/dist/transfer/index.mjs +2 -0
- package/dist/transfer-B2n8pgEQ.mjs +260 -0
- package/dist/types-BZNk3q65.mjs +357 -0
- package/dist/typography/index.mjs +2 -3
- package/dist/{typography-Iap9fU5P.mjs → typography-ClB8k55E.mjs} +2 -4
- package/dist/{use-copy-to-clipboard-n29wJwvW.mjs → use-copy-to-clipboard-uNeeVHC4.mjs} +2 -4
- package/dist/utils/index.mjs +2 -3
- package/dist/{utils-DJboNGQM.mjs → utils-C8KwMfT_.mjs} +1 -3
- package/dist/visually-hidden/index.mjs +2 -3
- package/dist/{visuallyhidden-BJsQCmg-.mjs → visuallyhidden-BLUsJpYH.mjs} +1 -3
- package/package.json +85 -3
- package/dist/input-with-addons-B8rzNhpq.mjs +0 -30
- package/dist/tabs-DJU7JA3h.mjs +0 -52
- package/dist/use-stepper-DigoyHhX.mjs +0 -2017
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import { t as cn } from "./cn-D2KYQ917.mjs";
|
|
2
|
+
import { t as Button } from "./button-BllvE9Lm.mjs";
|
|
3
|
+
import { Search, X } from "lucide-react";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/features/transfer/components/transfer-group.tsx
|
|
8
|
+
const TransferGroup = ({ title, children }) => {
|
|
9
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
10
|
+
className: "space-y-1",
|
|
11
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
12
|
+
className: "text-xs font-semibold text-muted-foreground px-2 py-1",
|
|
13
|
+
children: title
|
|
14
|
+
}), children]
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region src/components/features/transfer/components/transfer-item.tsx
|
|
19
|
+
const TransferItem = ({ label, onClick, disabled = false, panelType }) => {
|
|
20
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
21
|
+
className: cn("group flex items-center gap-2 rounded p-2", "hover:bg-accent transition-colors", panelType === "source" && "cursor-pointer", disabled && "opacity-50 cursor-not-allowed"),
|
|
22
|
+
role: panelType === "source" && !disabled ? "button" : void 0,
|
|
23
|
+
tabIndex: panelType === "source" && !disabled ? 0 : void 0,
|
|
24
|
+
onClick: panelType === "source" && !disabled ? onClick : void 0,
|
|
25
|
+
onKeyDown: (e) => {
|
|
26
|
+
if (!disabled && panelType === "source" && (e.key === "Enter" || e.key === " ")) {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
onClick();
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
32
|
+
className: "min-w-0 flex-1",
|
|
33
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
34
|
+
className: "text-sm font-medium",
|
|
35
|
+
children: label
|
|
36
|
+
})
|
|
37
|
+
}), panelType === "target" && /* @__PURE__ */ jsx("button", {
|
|
38
|
+
type: "button",
|
|
39
|
+
"aria-label": `Remove ${label}`,
|
|
40
|
+
className: "h-6 w-6 p-0 rounded opacity-0 group-hover:opacity-100 hover:bg-muted transition-opacity inline-flex items-center justify-center",
|
|
41
|
+
onClick,
|
|
42
|
+
disabled,
|
|
43
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
44
|
+
})]
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
//#endregion
|
|
48
|
+
//#region src/components/features/transfer/components/transfer-search.tsx
|
|
49
|
+
const TransferSearch = ({ value, onChange, placeholder = "Search...", disabled = false }) => {
|
|
50
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
51
|
+
className: "relative",
|
|
52
|
+
children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ jsx("input", {
|
|
53
|
+
type: "text",
|
|
54
|
+
value,
|
|
55
|
+
onChange: (e) => onChange(e.target.value),
|
|
56
|
+
placeholder,
|
|
57
|
+
disabled,
|
|
58
|
+
"aria-label": placeholder,
|
|
59
|
+
className: cn("flex h-9 w-full rounded-md border border-input bg-transparent pl-8 pr-3 py-1", "text-sm shadow-sm transition-colors", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50")
|
|
60
|
+
})]
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
//#endregion
|
|
64
|
+
//#region src/components/features/transfer/components/transfer-panel.tsx
|
|
65
|
+
const TransferPanel = ({ title, items, groups, searchable, searchValue, onSearchChange, searchPlaceholder, onItemClick, onSelectAll, enableSelectAll, disabled = false, panelType }) => {
|
|
66
|
+
const groupedItems = React$1.useMemo(() => {
|
|
67
|
+
if (groups.length === 0) return { "": items };
|
|
68
|
+
const grouped = {};
|
|
69
|
+
groups.forEach((group) => {
|
|
70
|
+
grouped[group] = items.filter((item) => item.group === group);
|
|
71
|
+
});
|
|
72
|
+
return grouped;
|
|
73
|
+
}, [items, groups]);
|
|
74
|
+
const renderItems = (groupItems) => {
|
|
75
|
+
return groupItems.map((item) => /* @__PURE__ */ jsx(TransferItem, {
|
|
76
|
+
itemKey: item.key,
|
|
77
|
+
label: item.label,
|
|
78
|
+
onClick: () => onItemClick(item.key),
|
|
79
|
+
disabled,
|
|
80
|
+
panelType
|
|
81
|
+
}, item.key));
|
|
82
|
+
};
|
|
83
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
84
|
+
className: "flex flex-col h-full bg-background",
|
|
85
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
86
|
+
className: "border-b p-3",
|
|
87
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
88
|
+
className: "flex min-h-[2.25rem] items-center justify-between mb-2",
|
|
89
|
+
children: [/* @__PURE__ */ jsxs("span", {
|
|
90
|
+
className: "text-sm font-medium",
|
|
91
|
+
children: [
|
|
92
|
+
title,
|
|
93
|
+
" ",
|
|
94
|
+
"(",
|
|
95
|
+
items.length,
|
|
96
|
+
")"
|
|
97
|
+
]
|
|
98
|
+
}), enableSelectAll && items.length > 0 && /* @__PURE__ */ jsx(Button, {
|
|
99
|
+
htmlType: "button",
|
|
100
|
+
type: "quaternary",
|
|
101
|
+
theme: "borderless",
|
|
102
|
+
size: "small",
|
|
103
|
+
onClick: onSelectAll,
|
|
104
|
+
disabled,
|
|
105
|
+
children: panelType === "source" ? "Select All" : "Clear All"
|
|
106
|
+
})]
|
|
107
|
+
}), searchable && /* @__PURE__ */ jsx(TransferSearch, {
|
|
108
|
+
value: searchValue,
|
|
109
|
+
onChange: onSearchChange,
|
|
110
|
+
placeholder: searchPlaceholder,
|
|
111
|
+
disabled
|
|
112
|
+
})]
|
|
113
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
114
|
+
className: "flex-1 overflow-y-auto p-2",
|
|
115
|
+
children: items.length === 0 ? /* @__PURE__ */ jsx("div", {
|
|
116
|
+
className: "text-sm text-muted-foreground text-center py-8",
|
|
117
|
+
children: panelType === "source" ? "No items" : "No items selected"
|
|
118
|
+
}) : groups.length === 0 ? /* @__PURE__ */ jsx("div", {
|
|
119
|
+
className: "space-y-1",
|
|
120
|
+
children: renderItems(items)
|
|
121
|
+
}) : Object.entries(groupedItems).map(([group, groupItems]) => groupItems.length > 0 && /* @__PURE__ */ jsx(TransferGroup, {
|
|
122
|
+
title: group,
|
|
123
|
+
children: renderItems(groupItems)
|
|
124
|
+
}, group))
|
|
125
|
+
})]
|
|
126
|
+
});
|
|
127
|
+
};
|
|
128
|
+
//#endregion
|
|
129
|
+
//#region src/components/features/transfer/hooks/use-transfer-state.ts
|
|
130
|
+
function useTransferState({ items, value, itemKey, itemLabel, itemGroup }) {
|
|
131
|
+
const [sourceSearch, setSourceSearch] = useState("");
|
|
132
|
+
const [debouncedSourceSearch, setDebouncedSourceSearch] = useState("");
|
|
133
|
+
useEffect(() => {
|
|
134
|
+
const timer = setTimeout(() => {
|
|
135
|
+
setDebouncedSourceSearch(sourceSearch);
|
|
136
|
+
}, 300);
|
|
137
|
+
return () => clearTimeout(timer);
|
|
138
|
+
}, [sourceSearch]);
|
|
139
|
+
const getKey = useCallback((item) => {
|
|
140
|
+
return typeof itemKey === "function" ? itemKey(item) : String(item[itemKey]);
|
|
141
|
+
}, [itemKey]);
|
|
142
|
+
const getLabel = useCallback((item) => {
|
|
143
|
+
return typeof itemLabel === "function" ? itemLabel(item) : String(item[itemLabel]);
|
|
144
|
+
}, [itemLabel]);
|
|
145
|
+
const getGroup = useCallback((item) => {
|
|
146
|
+
if (!itemGroup) return void 0;
|
|
147
|
+
return typeof itemGroup === "function" ? itemGroup(item) : String(item[itemGroup]);
|
|
148
|
+
}, [itemGroup]);
|
|
149
|
+
const transferItems = useMemo(() => {
|
|
150
|
+
return items.map((item) => ({
|
|
151
|
+
key: getKey(item),
|
|
152
|
+
label: getLabel(item),
|
|
153
|
+
group: getGroup(item),
|
|
154
|
+
data: item
|
|
155
|
+
}));
|
|
156
|
+
}, [
|
|
157
|
+
items,
|
|
158
|
+
getKey,
|
|
159
|
+
getLabel,
|
|
160
|
+
getGroup
|
|
161
|
+
]);
|
|
162
|
+
const { sourceItems, targetItems } = useMemo(() => {
|
|
163
|
+
const valueSet = new Set(value);
|
|
164
|
+
return {
|
|
165
|
+
sourceItems: transferItems.filter((item) => !valueSet.has(item.key)),
|
|
166
|
+
targetItems: transferItems.filter((item) => valueSet.has(item.key))
|
|
167
|
+
};
|
|
168
|
+
}, [transferItems, value]);
|
|
169
|
+
const filterItems = useCallback((items, search) => {
|
|
170
|
+
if (!search) return items;
|
|
171
|
+
const searchLower = search.toLowerCase();
|
|
172
|
+
return items.filter((item) => item.label.toLowerCase().includes(searchLower) || item.group?.toLowerCase().includes(searchLower) || item.key.toLowerCase().includes(searchLower));
|
|
173
|
+
}, []);
|
|
174
|
+
const filteredSourceItems = useMemo(() => filterItems(sourceItems, debouncedSourceSearch), [
|
|
175
|
+
sourceItems,
|
|
176
|
+
debouncedSourceSearch,
|
|
177
|
+
filterItems
|
|
178
|
+
]);
|
|
179
|
+
const getGroups = useCallback((items) => {
|
|
180
|
+
const groups = /* @__PURE__ */ new Set();
|
|
181
|
+
items.forEach((item) => {
|
|
182
|
+
if (item.group) groups.add(item.group);
|
|
183
|
+
});
|
|
184
|
+
return Array.from(groups).sort();
|
|
185
|
+
}, []);
|
|
186
|
+
return {
|
|
187
|
+
sourceItems,
|
|
188
|
+
targetItems,
|
|
189
|
+
filteredSourceItems,
|
|
190
|
+
sourceGroups: useMemo(() => getGroups(filteredSourceItems), [filteredSourceItems, getGroups]),
|
|
191
|
+
targetGroups: useMemo(() => getGroups(targetItems), [targetItems, getGroups]),
|
|
192
|
+
sourceSearch,
|
|
193
|
+
setSourceSearch
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
//#endregion
|
|
197
|
+
//#region src/components/features/transfer/transfer.tsx
|
|
198
|
+
function Transfer({ items, value, onChange, itemKey, itemLabel, itemGroup, searchable = true, searchPlaceholder = "Search...", sourceTitle = "Available", targetTitle = "Selected", enableSelectAll = true, disabled = false, className }) {
|
|
199
|
+
const state = useTransferState({
|
|
200
|
+
items,
|
|
201
|
+
value,
|
|
202
|
+
itemKey,
|
|
203
|
+
itemLabel,
|
|
204
|
+
itemGroup
|
|
205
|
+
});
|
|
206
|
+
const handleSelect = (key) => {
|
|
207
|
+
if (value.includes(key)) return;
|
|
208
|
+
onChange([...value, key]);
|
|
209
|
+
};
|
|
210
|
+
const handleDeselect = (key) => {
|
|
211
|
+
onChange(value.filter((k) => k !== key));
|
|
212
|
+
};
|
|
213
|
+
const handleSelectAll = () => {
|
|
214
|
+
const sourceKeys = state.filteredSourceItems.map((item) => item.key);
|
|
215
|
+
const existing = new Set(value);
|
|
216
|
+
const newKeys = sourceKeys.filter((k) => !existing.has(k));
|
|
217
|
+
onChange([...value, ...newKeys]);
|
|
218
|
+
};
|
|
219
|
+
const handleClearAll = () => {
|
|
220
|
+
onChange([]);
|
|
221
|
+
};
|
|
222
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
223
|
+
className: cn("flex h-[400px]", className),
|
|
224
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
225
|
+
className: "flex-1 border-r",
|
|
226
|
+
children: /* @__PURE__ */ jsx(TransferPanel, {
|
|
227
|
+
title: sourceTitle,
|
|
228
|
+
items: state.filteredSourceItems,
|
|
229
|
+
groups: state.sourceGroups,
|
|
230
|
+
searchable,
|
|
231
|
+
searchValue: state.sourceSearch,
|
|
232
|
+
onSearchChange: state.setSourceSearch,
|
|
233
|
+
searchPlaceholder,
|
|
234
|
+
onItemClick: handleSelect,
|
|
235
|
+
onSelectAll: handleSelectAll,
|
|
236
|
+
enableSelectAll,
|
|
237
|
+
disabled,
|
|
238
|
+
panelType: "source"
|
|
239
|
+
})
|
|
240
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
241
|
+
className: "flex-1",
|
|
242
|
+
children: /* @__PURE__ */ jsx(TransferPanel, {
|
|
243
|
+
title: targetTitle,
|
|
244
|
+
items: state.targetItems,
|
|
245
|
+
groups: state.targetGroups,
|
|
246
|
+
searchable: false,
|
|
247
|
+
searchValue: "",
|
|
248
|
+
onSearchChange: () => {},
|
|
249
|
+
onItemClick: handleDeselect,
|
|
250
|
+
onSelectAll: handleClearAll,
|
|
251
|
+
enableSelectAll,
|
|
252
|
+
disabled,
|
|
253
|
+
panelType: "target"
|
|
254
|
+
})
|
|
255
|
+
})]
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
Transfer.displayName = "Transfer";
|
|
259
|
+
//#endregion
|
|
260
|
+
export { Transfer as t };
|
|
@@ -0,0 +1,357 @@
|
|
|
1
|
+
import { t as cn } from "./cn-D2KYQ917.mjs";
|
|
2
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs/index.mjs";
|
|
3
|
+
import { n as useTheme } from "./themes-DG1md8FI.mjs";
|
|
4
|
+
import { t as toast } from "./toast-BWnN5fax.mjs";
|
|
5
|
+
import { useEffect, useRef, useState } from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import Editor from "@monaco-editor/react";
|
|
8
|
+
import yaml from "js-yaml";
|
|
9
|
+
import { z } from "zod";
|
|
10
|
+
//#region src/components/features/code-editor/code-editor.tsx
|
|
11
|
+
/**
|
|
12
|
+
* CodeEditor - Monaco-based code editor component
|
|
13
|
+
*
|
|
14
|
+
* A Monaco Editor wrapper with single language support, theme integration,
|
|
15
|
+
* and form compatibility. Provides a VS Code-like editing experience with
|
|
16
|
+
* automatic formatting, responsive layout, and error state handling.
|
|
17
|
+
*
|
|
18
|
+
* Features:
|
|
19
|
+
* - Monaco Editor with VS Code experience
|
|
20
|
+
* - Theme-aware (automatic light/dark mode)
|
|
21
|
+
* - Form-compatible (hidden input for React Hook Form)
|
|
22
|
+
* - Responsive layout with automatic resizing
|
|
23
|
+
* - Read-only mode support
|
|
24
|
+
* - Custom error state styling
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* import { CodeEditor } from '@datum-cloud/datum-ui/code-editor'
|
|
29
|
+
*
|
|
30
|
+
* // Basic usage
|
|
31
|
+
* <CodeEditor
|
|
32
|
+
* value={code}
|
|
33
|
+
* onChange={(newValue) => setCode(newValue)}
|
|
34
|
+
* language="yaml"
|
|
35
|
+
* minHeight="400px"
|
|
36
|
+
* />
|
|
37
|
+
*
|
|
38
|
+
* // With error state
|
|
39
|
+
* <CodeEditor
|
|
40
|
+
* value={invalidJson}
|
|
41
|
+
* onChange={handleChange}
|
|
42
|
+
* language="json"
|
|
43
|
+
* error="Invalid JSON format"
|
|
44
|
+
* />
|
|
45
|
+
*
|
|
46
|
+
* // Read-only mode
|
|
47
|
+
* <CodeEditor
|
|
48
|
+
* value={config}
|
|
49
|
+
* language="yaml"
|
|
50
|
+
* readOnly={true}
|
|
51
|
+
* />
|
|
52
|
+
* ```
|
|
53
|
+
*
|
|
54
|
+
* @param props - Component props
|
|
55
|
+
* @param props.value - Editor content
|
|
56
|
+
* @param props.onChange - Content change callback
|
|
57
|
+
* @param props.language - Syntax highlighting language
|
|
58
|
+
* @param props.id - Input element ID for form integration
|
|
59
|
+
* @param props.name - Input element name for form submission (default: 'code-editor')
|
|
60
|
+
* @param props.error - Error message to display below the editor
|
|
61
|
+
* @param props.className - Additional CSS classes
|
|
62
|
+
* @param props.readOnly - Read-only mode (default: false)
|
|
63
|
+
* @param props.minHeight - Minimum editor height (default: '200px')
|
|
64
|
+
* @returns Rendered Monaco editor with form integration
|
|
65
|
+
*/
|
|
66
|
+
function CodeEditor({ value, onChange, language, id, name = "code-editor", error, className, readOnly = false, minHeight = "200px" }) {
|
|
67
|
+
const { theme } = useTheme();
|
|
68
|
+
const editorRef = useRef(null);
|
|
69
|
+
const [mounted, setMounted] = useState(false);
|
|
70
|
+
const monacoTheme = theme === "dark" ? "vs-dark" : "light";
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (editorRef.current && !mounted) {
|
|
73
|
+
setTimeout(() => {
|
|
74
|
+
editorRef.current?.getAction("editor.action.formatDocument")?.run();
|
|
75
|
+
}, 300);
|
|
76
|
+
setMounted(true);
|
|
77
|
+
}
|
|
78
|
+
}, [mounted]);
|
|
79
|
+
const handleEditorChange = (newValue) => {
|
|
80
|
+
onChange?.(newValue || "");
|
|
81
|
+
};
|
|
82
|
+
const handleEditorDidMount = (editor) => {
|
|
83
|
+
editorRef.current = editor;
|
|
84
|
+
};
|
|
85
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
86
|
+
className: cn("relative", className),
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ jsx(Editor, {
|
|
89
|
+
height: minHeight,
|
|
90
|
+
language,
|
|
91
|
+
value,
|
|
92
|
+
theme: monacoTheme,
|
|
93
|
+
onChange: handleEditorChange,
|
|
94
|
+
onMount: handleEditorDidMount,
|
|
95
|
+
options: {
|
|
96
|
+
readOnly,
|
|
97
|
+
minimap: { enabled: false },
|
|
98
|
+
fontSize: 14,
|
|
99
|
+
tabSize: 2,
|
|
100
|
+
wordWrap: "on",
|
|
101
|
+
lineNumbers: "on",
|
|
102
|
+
folding: true,
|
|
103
|
+
automaticLayout: true
|
|
104
|
+
},
|
|
105
|
+
className: cn(error && "border border-destructive rounded-md")
|
|
106
|
+
}),
|
|
107
|
+
/* @__PURE__ */ jsx("input", {
|
|
108
|
+
type: "hidden",
|
|
109
|
+
id,
|
|
110
|
+
name,
|
|
111
|
+
value
|
|
112
|
+
}),
|
|
113
|
+
error && /* @__PURE__ */ jsx("p", {
|
|
114
|
+
className: "text-sm text-destructive mt-1",
|
|
115
|
+
children: error
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
//#endregion
|
|
121
|
+
//#region src/components/features/code-editor/lib/editor.ts
|
|
122
|
+
function isValidJson(jsonStr) {
|
|
123
|
+
try {
|
|
124
|
+
JSON.parse(jsonStr);
|
|
125
|
+
return true;
|
|
126
|
+
} catch {
|
|
127
|
+
return false;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
function isValidYaml(yamlStr) {
|
|
131
|
+
try {
|
|
132
|
+
yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
|
|
133
|
+
return true;
|
|
134
|
+
} catch {
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
function formatJson(jsonStr) {
|
|
139
|
+
try {
|
|
140
|
+
const parsed = JSON.parse(jsonStr);
|
|
141
|
+
return JSON.stringify(parsed, null, 2);
|
|
142
|
+
} catch (error) {
|
|
143
|
+
throw new Error(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
function formatYaml(yamlStr) {
|
|
147
|
+
try {
|
|
148
|
+
const parsed = yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
|
|
149
|
+
return yaml.dump(parsed, {
|
|
150
|
+
indent: 2,
|
|
151
|
+
lineWidth: -1,
|
|
152
|
+
noRefs: true
|
|
153
|
+
});
|
|
154
|
+
} catch (error) {
|
|
155
|
+
throw new Error(`Invalid YAML format: ${error instanceof Error ? error.message : String(error)}`);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
function jsonToYaml(jsonStr) {
|
|
159
|
+
try {
|
|
160
|
+
const parsed = JSON.parse(jsonStr);
|
|
161
|
+
return yaml.dump(parsed, {
|
|
162
|
+
indent: 2,
|
|
163
|
+
lineWidth: -1,
|
|
164
|
+
noRefs: true
|
|
165
|
+
});
|
|
166
|
+
} catch (error) {
|
|
167
|
+
throw new Error(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
function yamlToJson(yamlStr) {
|
|
171
|
+
try {
|
|
172
|
+
const parsed = yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
|
|
173
|
+
return JSON.stringify(parsed, null, 2);
|
|
174
|
+
} catch (error) {
|
|
175
|
+
throw new Error(`Invalid YAML format: ${error instanceof Error ? error.message : String(error)}`);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
//#endregion
|
|
179
|
+
//#region src/components/features/code-editor/code-editor-tabs.tsx
|
|
180
|
+
/**
|
|
181
|
+
* CodeEditorTabs - Dual-format code editor with JSON ↔ YAML conversion
|
|
182
|
+
*
|
|
183
|
+
* A tabbed interface that provides JSON and YAML editing with automatic
|
|
184
|
+
* bidirectional conversion and validation. Prevents tab switching when
|
|
185
|
+
* content has syntax errors and shows error toasts for conversion failures.
|
|
186
|
+
*
|
|
187
|
+
* Features:
|
|
188
|
+
* - Dual-format editing (JSON ↔ YAML)
|
|
189
|
+
* - Automatic bidirectional conversion
|
|
190
|
+
* - Real-time validation before conversion
|
|
191
|
+
* - Error toasts for conversion failures
|
|
192
|
+
* - Maintains sync between both formats
|
|
193
|
+
* - Hidden format field for form submission
|
|
194
|
+
*
|
|
195
|
+
* @example
|
|
196
|
+
* ```tsx
|
|
197
|
+
* import { CodeEditorTabs } from '@datum-cloud/datum-ui/code-editor'
|
|
198
|
+
*
|
|
199
|
+
* // Basic usage
|
|
200
|
+
* <CodeEditorTabs
|
|
201
|
+
* value={config}
|
|
202
|
+
* format="yaml"
|
|
203
|
+
* onChange={(value, format) => {
|
|
204
|
+
* setConfig(value)
|
|
205
|
+
* setFormat(format)
|
|
206
|
+
* }}
|
|
207
|
+
* name="configuration"
|
|
208
|
+
* minHeight="500px"
|
|
209
|
+
* />
|
|
210
|
+
*
|
|
211
|
+
* // With React Hook Form
|
|
212
|
+
* const { watch, setValue } = useForm()
|
|
213
|
+
*
|
|
214
|
+
* <CodeEditorTabs
|
|
215
|
+
* value={watch('config')}
|
|
216
|
+
* onChange={(value) => setValue('config', value)}
|
|
217
|
+
* name="config"
|
|
218
|
+
* />
|
|
219
|
+
*
|
|
220
|
+
* // With format change handler
|
|
221
|
+
* <CodeEditorTabs
|
|
222
|
+
* value={data}
|
|
223
|
+
* format={currentFormat}
|
|
224
|
+
* onChange={(value, format) => console.log({ value, format })}
|
|
225
|
+
* onFormatChange={(format) => setCurrentFormat(format)}
|
|
226
|
+
* />
|
|
227
|
+
* ```
|
|
228
|
+
*
|
|
229
|
+
* @param props - Component props
|
|
230
|
+
* @param props.value - Editor content
|
|
231
|
+
* @param props.onChange - Content and format change callback
|
|
232
|
+
* @param props.format - Active format ('json' or 'yaml', default: 'yaml')
|
|
233
|
+
* @param props.onFormatChange - Format change callback
|
|
234
|
+
* @param props.error - Error message to display below the editor
|
|
235
|
+
* @param props.id - Input element ID for form integration
|
|
236
|
+
* @param props.name - Input element name for form submission (default: 'code-editor')
|
|
237
|
+
* @param props.minHeight - Minimum editor height (default: '300px')
|
|
238
|
+
* @returns Rendered tabbed editor with JSON/YAML conversion
|
|
239
|
+
*/
|
|
240
|
+
function CodeEditorTabs({ value, onChange, format = "yaml", onFormatChange, error, id, name = "code-editor", minHeight = "300px" }) {
|
|
241
|
+
const [jsonContent, setJsonContent] = useState("");
|
|
242
|
+
const [yamlContent, setYamlContent] = useState("");
|
|
243
|
+
const [activeTab, setActiveTab] = useState(format);
|
|
244
|
+
useEffect(() => {
|
|
245
|
+
if (format === "json") {
|
|
246
|
+
setJsonContent(value);
|
|
247
|
+
try {
|
|
248
|
+
setYamlContent(jsonToYaml(value));
|
|
249
|
+
} catch {}
|
|
250
|
+
} else {
|
|
251
|
+
setYamlContent(value);
|
|
252
|
+
try {
|
|
253
|
+
setJsonContent(yamlToJson(value));
|
|
254
|
+
} catch {}
|
|
255
|
+
}
|
|
256
|
+
}, [value, format]);
|
|
257
|
+
const handleJsonChange = (newValue) => {
|
|
258
|
+
setJsonContent(newValue);
|
|
259
|
+
try {
|
|
260
|
+
setYamlContent(jsonToYaml(newValue));
|
|
261
|
+
if (activeTab === "json") onChange?.(newValue, "json");
|
|
262
|
+
} catch (error) {
|
|
263
|
+
console.error("Failed to convert JSON to YAML:", error);
|
|
264
|
+
}
|
|
265
|
+
};
|
|
266
|
+
const handleYamlChange = (newValue) => {
|
|
267
|
+
setYamlContent(newValue);
|
|
268
|
+
try {
|
|
269
|
+
setJsonContent(yamlToJson(newValue));
|
|
270
|
+
if (activeTab === "yaml") onChange?.(newValue, "yaml");
|
|
271
|
+
} catch (error) {
|
|
272
|
+
console.error("Failed to convert YAML to JSON:", error);
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
const handleTabChange = (newTab) => {
|
|
276
|
+
const newFormat = newTab;
|
|
277
|
+
const currentContent = activeTab === "json" ? jsonContent : yamlContent;
|
|
278
|
+
try {
|
|
279
|
+
if (activeTab === "json") jsonToYaml(currentContent);
|
|
280
|
+
else yamlToJson(currentContent);
|
|
281
|
+
setActiveTab(newFormat);
|
|
282
|
+
onFormatChange?.(newFormat);
|
|
283
|
+
onChange?.(newFormat === "json" ? jsonContent : yamlContent, newFormat);
|
|
284
|
+
} catch {
|
|
285
|
+
const errorMsg = activeTab === "json" ? "Invalid JSON format. Please fix errors before switching tabs." : "Invalid YAML format. Please fix errors before switching tabs.";
|
|
286
|
+
toast.error(errorMsg, { id: `${activeTab}-to-${newFormat}-error` });
|
|
287
|
+
}
|
|
288
|
+
};
|
|
289
|
+
return /* @__PURE__ */ jsxs(Tabs, {
|
|
290
|
+
value: activeTab,
|
|
291
|
+
onValueChange: handleTabChange,
|
|
292
|
+
children: [
|
|
293
|
+
/* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTrigger, {
|
|
294
|
+
value: "yaml",
|
|
295
|
+
children: "YAML"
|
|
296
|
+
}), /* @__PURE__ */ jsx(TabsTrigger, {
|
|
297
|
+
value: "json",
|
|
298
|
+
children: "JSON"
|
|
299
|
+
})] }),
|
|
300
|
+
/* @__PURE__ */ jsx(TabsContent, {
|
|
301
|
+
value: "yaml",
|
|
302
|
+
children: /* @__PURE__ */ jsx(CodeEditor, {
|
|
303
|
+
value: yamlContent,
|
|
304
|
+
onChange: handleYamlChange,
|
|
305
|
+
language: "yaml",
|
|
306
|
+
minHeight,
|
|
307
|
+
error
|
|
308
|
+
})
|
|
309
|
+
}),
|
|
310
|
+
/* @__PURE__ */ jsx(TabsContent, {
|
|
311
|
+
value: "json",
|
|
312
|
+
children: /* @__PURE__ */ jsx(CodeEditor, {
|
|
313
|
+
value: jsonContent,
|
|
314
|
+
onChange: handleJsonChange,
|
|
315
|
+
language: "json",
|
|
316
|
+
minHeight,
|
|
317
|
+
error
|
|
318
|
+
})
|
|
319
|
+
}),
|
|
320
|
+
/* @__PURE__ */ jsx("input", {
|
|
321
|
+
type: "hidden",
|
|
322
|
+
id,
|
|
323
|
+
name,
|
|
324
|
+
value: activeTab === "json" ? jsonContent : yamlContent
|
|
325
|
+
}),
|
|
326
|
+
/* @__PURE__ */ jsx("input", {
|
|
327
|
+
type: "hidden",
|
|
328
|
+
name: `${name}-format`,
|
|
329
|
+
value: activeTab
|
|
330
|
+
})
|
|
331
|
+
]
|
|
332
|
+
});
|
|
333
|
+
}
|
|
334
|
+
//#endregion
|
|
335
|
+
//#region src/components/features/code-editor/types.ts
|
|
336
|
+
const jsonSchema = z.object({ jsonContent: z.string().min(1, "JSON content is required").refine(isValidJson, { message: "Invalid JSON format" }) });
|
|
337
|
+
const yamlSchema = z.object({ yamlContent: z.string().min(1, "YAML content is required").refine(isValidYaml, { message: "Invalid YAML format" }) });
|
|
338
|
+
function createCodeEditorSchema(name = "code-editor") {
|
|
339
|
+
return z.object({
|
|
340
|
+
[name]: z.string().min(1, `${name} content is required`),
|
|
341
|
+
format: z.enum(["json", "yaml"])
|
|
342
|
+
}).superRefine((data, ctx) => {
|
|
343
|
+
const content = data[name];
|
|
344
|
+
if (data.format === "json" && !isValidJson(content)) ctx.addIssue({
|
|
345
|
+
code: z.ZodIssueCode.custom,
|
|
346
|
+
message: "Invalid JSON format",
|
|
347
|
+
path: [name]
|
|
348
|
+
});
|
|
349
|
+
else if (data.format === "yaml" && !isValidYaml(content)) ctx.addIssue({
|
|
350
|
+
code: z.ZodIssueCode.custom,
|
|
351
|
+
message: "Invalid YAML format",
|
|
352
|
+
path: [name]
|
|
353
|
+
});
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
//#endregion
|
|
357
|
+
export { formatJson as a, isValidYaml as c, CodeEditor as d, CodeEditorTabs as i, jsonToYaml as l, jsonSchema as n, formatYaml as o, yamlSchema as r, isValidJson as s, createCodeEditorSchema as t, yamlToJson as u };
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-
|
|
2
|
-
|
|
3
|
-
export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };
|
|
1
|
+
import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-ClB8k55E.mjs";
|
|
2
|
+
export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { t as cn } from "./cn-
|
|
1
|
+
import { t as cn } from "./cn-D2KYQ917.mjs";
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
3
|
import { CopyIcon } from "lucide-react";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
5
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
|
|
7
6
|
//#region src/components/base/typography/typography.tsx
|
|
8
7
|
const titleVariants = cva("font-semibold leading-tight tracking-tight", {
|
|
9
8
|
variants: {
|
|
@@ -195,6 +194,5 @@ function Code({ className, as = "code", children, ...props }) {
|
|
|
195
194
|
children
|
|
196
195
|
});
|
|
197
196
|
}
|
|
198
|
-
|
|
199
197
|
//#endregion
|
|
200
|
-
export { ListItem as a, Title as c, titleVariants as d, List as i, paragraphVariants as l, Code as n, Paragraph as o, Link as r, Text as s, Blockquote as t, textVariants as u };
|
|
198
|
+
export { ListItem as a, Title as c, titleVariants as d, List as i, paragraphVariants as l, Code as n, Paragraph as o, Link as r, Text as s, Blockquote as t, textVariants as u };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { t as toast } from "./toast-BWnN5fax.mjs";
|
|
2
2
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
-
|
|
4
3
|
//#region src/hooks/use-copy-to-clipboard.ts
|
|
5
4
|
function useCopyToClipboard() {
|
|
6
5
|
const [isCopied, setIsCopied] = useState(false);
|
|
@@ -26,6 +25,5 @@ function useCopyToClipboard() {
|
|
|
26
25
|
}
|
|
27
26
|
}, [])];
|
|
28
27
|
}
|
|
29
|
-
|
|
30
28
|
//#endregion
|
|
31
|
-
export { useCopyToClipboard as t };
|
|
29
|
+
export { useCopyToClipboard as t };
|
package/dist/utils/index.mjs
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { t as cn } from "../cn-
|
|
2
|
-
|
|
3
|
-
export { cn };
|
|
1
|
+
import { t as cn } from "../cn-D2KYQ917.mjs";
|
|
2
|
+
export { cn };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { clsx } from "clsx";
|
|
2
2
|
import { twMerge } from "tailwind-merge";
|
|
3
|
-
|
|
4
3
|
//#region ../shadcn/lib/utils.ts
|
|
5
4
|
/**
|
|
6
5
|
* shadcn/ui Utilities
|
|
@@ -15,6 +14,5 @@ import { twMerge } from "tailwind-merge";
|
|
|
15
14
|
function cn(...inputs) {
|
|
16
15
|
return twMerge(clsx(inputs));
|
|
17
16
|
}
|
|
18
|
-
|
|
19
17
|
//#endregion
|
|
20
|
-
export { cn as t };
|
|
18
|
+
export { cn as t };
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { t as VisuallyHidden } from "../visuallyhidden-
|
|
2
|
-
|
|
3
|
-
export { VisuallyHidden };
|
|
1
|
+
import { t as VisuallyHidden } from "../visuallyhidden-BLUsJpYH.mjs";
|
|
2
|
+
export { VisuallyHidden };
|