@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/datasink/ExportDataSinkDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExportDataSinkDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/ExportDataSinkDialog.tsx"],"sourcesContent":["/**\n * ExportDataSinkDialog Component\n *\n * Modal dialog for exporting a DataSink to JSON.\n * Uses inline styles for consistent styling across environments.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect } from 'react';\nimport { Dialog, DialogContent, DialogTitle, DialogDescription } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Download, FileJson, Check } from 'lucide-react';\nimport { useExportDataSink, type ExportDataSinkOptions } from '../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ExportDataSinkDialogProps {\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** DataSink ID to export */\n  dataSinkId: string | null;\n  /** DataSink name for filename */\n  dataSinkName?: string;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when export succeeds */\n  onSuccess?: () => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  dialogContent: {\n    maxWidth: '450px',\n    width: '95vw',\n    padding: 0,\n    borderRadius: '12px',\n    overflow: 'hidden',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12px',\n    padding: '20px 24px',\n    borderBottom: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  iconWrapper: {\n    width: '44px',\n    height: '44px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '10px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    flexShrink: 0,\n  } as React.CSSProperties,\n  headerText: {\n    flex: 1,\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  description: {\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  content: {\n    padding: '20px 24px',\n  } as React.CSSProperties,\n  dataSinkInfo: {\n    padding: '12px 16px',\n    backgroundColor: 'var(--color-bg-muted)',\n    borderRadius: '8px',\n    marginBottom: '20px',\n  } as React.CSSProperties,\n  dataSinkLabel: {\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n    margin: 0,\n  } as React.CSSProperties,\n  dataSinkName: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    margin: '4px 0 0 0',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  } as React.CSSProperties,\n  optionsTitle: {\n    fontSize: '13px',\n    fontWeight: 600,\n    color: 'var(--color-text-secondary)',\n    marginBottom: '16px',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n  } as React.CSSProperties,\n  optionItem: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '12px',\n    padding: '12px',\n    borderRadius: '8px',\n    marginBottom: '8px',\n    backgroundColor: 'var(--color-bg-sunken)',\n    border: '1px solid var(--color-border)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  optionItemActive: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  checkbox: {\n    width: '20px',\n    height: '20px',\n    borderRadius: '4px',\n    border: '2px solid var(--color-border)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    marginTop: '2px',\n    transition: 'all 0.15s ease',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  checkboxChecked: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  optionText: {\n    flex: 1,\n  } as React.CSSProperties,\n  optionLabel: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  optionDescription: {\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  error: {\n    padding: '12px 16px',\n    backgroundColor: 'var(--color-status-error-bgSubtle)',\n    border: '1px solid var(--color-status-error-border)',\n    borderRadius: '8px',\n    marginTop: '16px',\n  } as React.CSSProperties,\n  errorText: {\n    fontSize: '13px',\n    color: 'var(--color-status-error-text)',\n    margin: 0,\n  } as React.CSSProperties,\n  footer: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    gap: '12px',\n    padding: '16px 24px',\n    borderTop: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  cancelButton: {\n    padding: '10px 20px',\n    fontSize: '14px',\n    fontWeight: 500,\n    borderRadius: '8px',\n    border: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-surface)',\n    color: 'var(--color-text-secondary)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  exportButton: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n    padding: '10px 20px',\n    fontSize: '14px',\n    fontWeight: 500,\n    borderRadius: '8px',\n    border: 'none',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  exportButtonDisabled: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Custom Checkbox Component\n// ============================================================================\n\ninterface CustomCheckboxProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  disabled?: boolean;\n  label: string;\n  description: string;\n}\n\nconst CustomCheckbox: FC<CustomCheckboxProps> = memo(function CustomCheckbox({\n  checked,\n  onChange,\n  disabled,\n  label,\n  description,\n}) {\n  return (\n    <div\n      style={{\n        ...styles.optionItem,\n        ...(checked ? styles.optionItemActive : {}),\n        opacity: disabled ? 0.6 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      }}\n      onClick={() => !disabled && onChange(!checked)}\n    >\n      <div\n        style={{\n          ...styles.checkbox,\n          ...(checked ? styles.checkboxChecked : {}),\n        }}\n      >\n        {checked && <Check style={{ width: '14px', height: '14px', color: 'var(--color-action-primary-text)' }} />}\n      </div>\n      <div style={styles.optionText}>\n        <p style={styles.optionLabel}>{label}</p>\n        <p style={styles.optionDescription}>{description}</p>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ExportDataSinkDialog: FC<ExportDataSinkDialogProps> = memo(function ExportDataSinkDialog({\n  isOpen,\n  dataSinkId,\n  dataSinkName,\n  onClose,\n  onSuccess,\n}) {\n  const [prettyPrint, setPrettyPrint] = useState(true);\n\n  const { loading, error, downloadDataSink, clearError } = useExportDataSink();\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (isOpen) {\n      setPrettyPrint(true);\n      clearError();\n    }\n  }, [isOpen, clearError]);\n\n  // Handle export\n  const handleExport = useCallback(async () => {\n    if (!dataSinkId) return;\n\n    const options: ExportDataSinkOptions = {\n      prettyPrint,\n    };\n\n    const success = await downloadDataSink(dataSinkId, dataSinkName, options);\n\n    if (success) {\n      onSuccess?.();\n      onClose();\n    }\n  }, [dataSinkId, dataSinkName, prettyPrint, downloadDataSink, onSuccess, onClose]);\n\n  // Don't render if no DataSink\n  if (!dataSinkId) return null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !loading && onClose()}>\n      <DialogContent style={styles.dialogContent}>\n        {/* Header */}\n        <div style={styles.header}>\n          <div style={styles.iconWrapper}>\n            <FileJson style={{ width: '22px', height: '22px' }} />\n          </div>\n          <div style={styles.headerText}>\n            <DialogTitle asChild>\n              <h2 style={styles.title}>Export DataSink</h2>\n            </DialogTitle>\n            <DialogDescription asChild>\n              <p style={styles.description}>Export your DataSink configuration to a JSON file.</p>\n            </DialogDescription>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={styles.content}>\n          {/* DataSink Info */}\n          {dataSinkName && (\n            <div style={styles.dataSinkInfo}>\n              <p style={styles.dataSinkLabel}>Exporting:</p>\n              <p style={styles.dataSinkName}>{dataSinkName}</p>\n            </div>\n          )}\n\n          {/* Options */}\n          <p style={styles.optionsTitle}>Export Options</p>\n\n          <CustomCheckbox\n            checked={prettyPrint}\n            onChange={setPrettyPrint}\n            disabled={loading}\n            label=\"Format JSON (Pretty Print)\"\n            description=\"Makes the export file human-readable (larger file size)\"\n          />\n\n          {/* Error */}\n          {error && (\n            <div style={styles.error}>\n              <p style={styles.errorText}>{error.message}</p>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div style={styles.footer}>\n          <button\n            style={styles.cancelButton}\n            onClick={onClose}\n            disabled={loading}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--color-bg-muted)';\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--color-bg-surface)';\n            }}\n          >\n            Cancel\n          </button>\n          <button\n            style={{\n              ...styles.exportButton,\n              ...(loading ? styles.exportButtonDisabled : {}),\n            }}\n            onClick={handleExport}\n            disabled={loading}\n            onMouseEnter={(e) => {\n              if (!loading) e.currentTarget.style.opacity = '0.9';\n            }}\n            onMouseLeave={(e) => {\n              if (!loading) e.currentTarget.style.opacity = '1';\n            }}\n          >\n            {loading ? (\n              <>\n                <Spinner style={{ width: '16px', height: '16px' }} />\n                Exporting...\n              </>\n            ) : (\n              <>\n                <Download style={{ width: '16px', height: '16px' }} />\n                Download Export\n              </>\n            )}\n          </button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ExportDataSinkDialog;\n"],"mappings":"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"}
+{"version":3,"file":"ExportDataSinkDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/ExportDataSinkDialog.tsx"],"sourcesContent":["/**\n * ExportDataSinkDialog Component\n *\n * Modal dialog for exporting a DataSink to JSON.\n * Uses inline styles for consistent styling across environments.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect } from 'react';\nimport { Dialog, DialogContent, DialogTitle, DialogDescription } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Download, FileJson, Check } from 'lucide-react';\nimport { useExportDataSink, type ExportDataSinkOptions } from '../../hooks';\nimport { Section, SECTION_FOCUS_RING } from '../common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ExportDataSinkDialogProps {\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** DataSink ID to export */\n  dataSinkId: string | null;\n  /** DataSink name for filename */\n  dataSinkName?: string;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when export succeeds */\n  onSuccess?: () => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  dialogContent: {\n    maxWidth: '450px',\n    width: '95vw',\n    padding: 0,\n    borderRadius: '12px',\n    overflow: 'hidden',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12px',\n    padding: '20px 24px',\n    borderBottom: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  iconWrapper: {\n    width: '44px',\n    height: '44px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '10px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    flexShrink: 0,\n  } as React.CSSProperties,\n  headerText: {\n    flex: 1,\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  description: {\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  content: {\n    padding: '20px 24px',\n  } as React.CSSProperties,\n  dataSinkName: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  } as React.CSSProperties,\n  optionItem: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '12px',\n    width: '100%',\n    textAlign: 'left',\n    padding: '12px',\n    borderRadius: 'var(--radius-card)',\n    marginBottom: '8px',\n    backgroundColor: 'var(--color-bg-sunken)',\n    border: '1px solid var(--color-border)',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  // The selected row used to paint its whole background with the primary action\n  // colour, making it by far the loudest selected state in the module. A subtle\n  // accent wash plus an accent border reads as \"chosen\" without shouting.\n  optionItemActive: {\n    backgroundColor: 'var(--color-bg-accentSubtle)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  checkbox: {\n    width: '20px',\n    height: '20px',\n    borderRadius: '4px',\n    border: '2px solid var(--color-border)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    marginTop: '2px',\n    transition: 'all 0.15s ease',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  checkboxChecked: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  optionText: {\n    flex: 1,\n  } as React.CSSProperties,\n  optionLabel: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  optionDescription: {\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  errorText: {\n    fontSize: '13px',\n    color: 'var(--color-status-error-text)',\n    margin: 0,\n  } as React.CSSProperties,\n  footer: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n    gap: '12px',\n    padding: '16px 24px',\n    borderTop: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n};\n\n/**\n * Footer buttons. Hover used to be JS-driven (`onMouseEnter` mutating inline\n * style), which sticks after a tap on touch devices and cannot express a focus\n * ring; these are CSS classes instead.\n */\nconst FOOTER_BUTTON =\n  `inline-flex min-h-[var(--size-controlHeight-md)] items-center gap-2 rounded-button px-5 py-2 text-sm font-medium motion-safe:transition-colors ${SECTION_FOCUS_RING}` as const;\n\n// ============================================================================\n// Custom Checkbox Component\n// ============================================================================\n\ninterface CustomCheckboxProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  disabled?: boolean;\n  label: string;\n  description: string;\n}\n\nconst CustomCheckbox: FC<CustomCheckboxProps> = memo(function CustomCheckbox({\n  checked,\n  onChange,\n  disabled,\n  label,\n  description,\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={checked}\n      disabled={disabled}\n      className={SECTION_FOCUS_RING}\n      style={{\n        ...styles.optionItem,\n        ...(checked ? styles.optionItemActive : {}),\n        opacity: disabled ? 0.6 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      }}\n      onClick={() => !disabled && onChange(!checked)}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          ...styles.checkbox,\n          ...(checked ? styles.checkboxChecked : {}),\n        }}\n      >\n        {checked && <Check style={{ width: '14px', height: '14px', color: 'var(--color-action-primary-text)' }} />}\n      </span>\n      <span style={styles.optionText}>\n        <span style={{ ...styles.optionLabel, display: 'block' }}>{label}</span>\n        <span style={{ ...styles.optionDescription, display: 'block' }}>{description}</span>\n      </span>\n    </button>\n  );\n});\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ExportDataSinkDialog: FC<ExportDataSinkDialogProps> = memo(function ExportDataSinkDialog({\n  isOpen,\n  dataSinkId,\n  dataSinkName,\n  onClose,\n  onSuccess,\n}) {\n  const [prettyPrint, setPrettyPrint] = useState(true);\n\n  const { loading, error, downloadDataSink, clearError } = useExportDataSink();\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (isOpen) {\n      setPrettyPrint(true);\n      clearError();\n    }\n  }, [isOpen, clearError]);\n\n  // Handle export\n  const handleExport = useCallback(async () => {\n    if (!dataSinkId) return;\n\n    const options: ExportDataSinkOptions = {\n      prettyPrint,\n    };\n\n    const success = await downloadDataSink(dataSinkId, dataSinkName, options);\n\n    if (success) {\n      onSuccess?.();\n      onClose();\n    }\n  }, [dataSinkId, dataSinkName, prettyPrint, downloadDataSink, onSuccess, onClose]);\n\n  // Don't render if no DataSink\n  if (!dataSinkId) return null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !loading && onClose()}>\n      <DialogContent style={styles.dialogContent}>\n        {/* Header */}\n        <div style={styles.header}>\n          <div style={styles.iconWrapper}>\n            <FileJson style={{ width: '22px', height: '22px' }} />\n          </div>\n          <div style={styles.headerText}>\n            <DialogTitle asChild>\n              <h2 style={styles.title}>Export DataSink</h2>\n            </DialogTitle>\n            <DialogDescription asChild>\n              <p style={styles.description}>Export your DataSink configuration to a JSON file.</p>\n            </DialogDescription>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={styles.content} className=\"space-y-form-gap\">\n          {/* What is being exported — supporting detail. */}\n          {dataSinkName && (\n            <Section\n              emphasis=\"muted\"\n              padding=\"compact\"\n              headingLevel={3}\n              title=\"Exporting\"\n              headerClassName=\"mb-control-gap\"\n            >\n              <p style={styles.dataSinkName}>{dataSinkName}</p>\n            </Section>\n          )}\n\n          {/* Options */}\n          <Section\n            emphasis=\"bare\"\n            padding=\"none\"\n            headingLevel={3}\n            title=\"Export options\"\n            headerClassName=\"mb-control-gap\"\n          >\n            <CustomCheckbox\n              checked={prettyPrint}\n              onChange={setPrettyPrint}\n              disabled={loading}\n              label=\"Format JSON (pretty print)\"\n              description=\"Makes the export file human-readable (larger file size)\"\n            />\n          </Section>\n\n          {/* Error */}\n          {error && (\n            <Section tone=\"danger\" padding=\"compact\" headingLevel={3} title=\"Export failed\">\n              <p style={styles.errorText}>{error.message}</p>\n            </Section>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div style={styles.footer}>\n          <button\n            type=\"button\"\n            className={`${FOOTER_BUTTON} border border-[var(--color-border-default)] bg-bg-surface text-text-secondary hover:bg-bg-sunken`}\n            onClick={onClose}\n            disabled={loading}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className={`${FOOTER_BUTTON} bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover disabled:cursor-not-allowed disabled:opacity-50`}\n            onClick={handleExport}\n            disabled={loading}\n          >\n            {loading ? (\n              <>\n                <Spinner style={{ width: '16px', height: '16px' }} />\n                Exporting...\n              </>\n            ) : (\n              <>\n                <Download style={{ width: '16px', height: '16px' }} />\n                Download export\n              </>\n            )}\n          </button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ExportDataSinkDialog;\n"],"mappings":"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"}