@marimo-team/islands 0.23.17-dev1 → 0.23.17-dev13

package/src/components/editor/actions/export-dialog/format-options.tsx

@@ -0,0 +1,531 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  CodeIcon,
+  FileIcon,
+  FileTextIcon,
+  GlobeIcon,
+  ImageIcon,
+  type LucideIcon,
+  NotebookIcon,
+} from "lucide-react";
+import { type ComponentType, type PropsWithChildren, useId } from "react";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  IPYNB_SORT_MODES,
+  MARKDOWN_FLAVORS,
+  PDF_PRESETS,
+  SCRIPT_TYPES,
+  type ExportFormat,
+  type ExportOptions,
+  type MarkdownFlavor,
+} from "./state";
+
+export interface FormatOptionsProps {
+  options: ExportOptions;
+  updateOptions: UpdateExportOptions;
+  disabled: boolean;
+}
+
+export type UpdateExportOptions = <Format extends keyof ExportOptions>(
+  format: Format,
+  options: Partial<ExportOptions[Format]>,
+) => void;
+
+interface Choice<Value extends string> {
+  value: Value;
+  label: string;
+  description: string;
+}
+
+type ChoiceDetails = Omit<Choice<string>, "value">;
+
+function defineChoices<Value extends string>(
+  values: readonly Value[],
+  details: Record<Value, ChoiceDetails>,
+): readonly Choice<Value>[] {
+  return values.map((value) => ({ value, ...details[value] }));
+}
+
+type MarkdownFormat = MarkdownFlavor | "automatic";
+const MARKDOWN_FORMATS: readonly MarkdownFormat[] = [
+  "automatic",
+  ...MARKDOWN_FLAVORS,
+];
+const MARKDOWN_FLAVOR_OPTIONS = defineChoices(MARKDOWN_FORMATS, {
+  automatic: {
+    label: "Automatic",
+    description:
+      "Chooses a format from the notebook filename. Defaults to Markdown (.md).",
+  },
+  pymdown: {
+    label: "Markdown (.md)",
+    description: "Creates a .md file with Python code blocks.",
+  },
+  qmd: {
+    label: "Quarto (.qmd)",
+    description: "Creates a .qmd file for Quarto.",
+  },
+  mystmd: {
+    label: "MyST (.myst.md)",
+    description: "Creates a .myst.md file for MyST.",
+  },
+  mdx: {
+    label: "MDX (.mdx)",
+    description: "Creates a .mdx file for MDX.",
+  },
+});
+
+const IPYNB_SORT_OPTIONS = defineChoices(IPYNB_SORT_MODES, {
+  "top-down": {
+    label: "Top to bottom",
+    description: "Keeps cells in the same order as this notebook.",
+  },
+  topological: {
+    label: "Dependency order",
+    description:
+      "Reorders cells so each cell appears after the cells it depends on.",
+  },
+});
+
+const PDF_PRESET_OPTIONS = defineChoices(PDF_PRESETS, {
+  document: {
+    label: "Document",
+    description: "Creates pages for reading or printing.",
+  },
+  slides: {
+    label: "Slides",
+    description: "Creates presentation slides from the notebook.",
+  },
+});
+
+const PDF_RENDERERS = ["browser", "latex"] as const;
+const PDF_RENDERER_OPTIONS = defineChoices(PDF_RENDERERS, {
+  browser: {
+    label: "Browser",
+    description:
+      "Uses browser rendering to preserve the notebook's visual output.",
+  },
+  latex: {
+    label: "LaTeX first",
+    description:
+      "Uses Pandoc and TeX when available, then falls back to browser rendering.",
+  },
+});
+
+const SCRIPT_TYPE_OPTIONS = defineChoices(SCRIPT_TYPES, {
+  source: {
+    label: "Notebook source",
+    description:
+      "Downloads the saved notebook source for continued editing in marimo.",
+  },
+  flat: {
+    label: "Flat script",
+    description: "Reorders cells so the Python script runs from top to bottom.",
+  },
+});
+
+interface FormatDefinition {
+  label: string;
+  actionLabel: string;
+  description: string;
+  Icon: LucideIcon;
+  Options: ComponentType<FormatOptionsProps>;
+}
+
+export const FORMAT_DEFINITIONS: Record<ExportFormat, FormatDefinition> = {
+  html: {
+    label: "HTML",
+    actionLabel: "Export HTML",
+    description: "Save the current notebook as an HTML page.",
+    Icon: GlobeIcon,
+    Options: HTMLFormatOptions,
+  },
+  markdown: {
+    label: "Markdown",
+    actionLabel: "Export Markdown",
+    description:
+      "Save code and text in a Markdown-based file. Cell outputs are not included.",
+    Icon: FileTextIcon,
+    Options: MarkdownFormatOptions,
+  },
+  ipynb: {
+    label: "Jupyter",
+    actionLabel: "Export Jupyter notebook",
+    description: "Open the notebook in Jupyter and other compatible tools.",
+    Icon: NotebookIcon,
+    Options: IPYNBFormatOptions,
+  },
+  pdf: {
+    label: "PDF",
+    actionLabel: "Export PDF",
+    description: "Save the notebook as a PDF for printing or sharing.",
+    Icon: FileIcon,
+    Options: PDFFormatOptions,
+  },
+  script: {
+    label: "Python",
+    actionLabel: "Export flat script",
+    description: "Save the notebook as a Python file.",
+    Icon: CodeIcon,
+    Options: ScriptFormatOptions,
+  },
+  png: {
+    label: "PNG",
+    actionLabel: "Export PNG",
+    description: "Capture the current app view as an image.",
+    Icon: ImageIcon,
+    Options: NoFormatOptions,
+  },
+};
+
+function HTMLFormatOptions({
+  options,
+  updateOptions,
+  disabled,
+}: FormatOptionsProps) {
+  return (
+    <OptionsGroup>
+      <SwitchOption
+        label="Include code"
+        descriptions={{
+          checked: "Includes code cells in the webpage.",
+          unchecked: "Leaves code cells out of the webpage.",
+        }}
+        checked={options.html.includeCode}
+        disabled={disabled}
+        onCheckedChange={(includeCode) =>
+          updateOptions("html", { includeCode })
+        }
+      />
+    </OptionsGroup>
+  );
+}
+
+function MarkdownFormatOptions({
+  options,
+  updateOptions,
+  disabled,
+}: FormatOptionsProps) {
+  return (
+    <OptionsGroup>
+      <SelectOption
+        label="Format"
+        value={options.markdown.flavor ?? "automatic"}
+        disabled={disabled}
+        onValueChange={(value) =>
+          updateOptions("markdown", {
+            flavor: value === "automatic" ? null : value,
+          })
+        }
+        options={MARKDOWN_FLAVOR_OPTIONS}
+      />
+    </OptionsGroup>
+  );
+}
+
+function IPYNBFormatOptions({
+  options,
+  updateOptions,
+  disabled,
+}: FormatOptionsProps) {
+  return (
+    <OptionsGroup>
+      <RadioOption
+        label="Cell order"
+        value={options.ipynb.sortMode}
+        disabled={disabled}
+        onValueChange={(sortMode) => updateOptions("ipynb", { sortMode })}
+        options={IPYNB_SORT_OPTIONS}
+      />
+      <SwitchOption
+        label="Include outputs"
+        descriptions={{
+          checked: "Keeps the outputs currently shown in the notebook.",
+          unchecked: "Leaves cell outputs out of the Jupyter notebook.",
+        }}
+        checked={options.ipynb.includeOutputs}
+        disabled={disabled}
+        onCheckedChange={(includeOutputs) =>
+          updateOptions("ipynb", { includeOutputs })
+        }
+      />
+    </OptionsGroup>
+  );
+}
+
+function PDFFormatOptions({
+  options,
+  updateOptions,
+  disabled,
+}: FormatOptionsProps) {
+  return (
+    <OptionsGroup>
+      <RadioOption
+        label="Layout"
+        value={options.pdf.preset}
+        disabled={disabled}
+        onValueChange={(preset) => updateOptions("pdf", { preset })}
+        options={PDF_PRESET_OPTIONS}
+      />
+      <SwitchOption
+        label="Include code"
+        descriptions={{
+          checked: "Includes code cells in the PDF.",
+          unchecked: "Leaves code cells out of the PDF.",
+        }}
+        checked={options.pdf.includeInputs}
+        disabled={disabled}
+        onCheckedChange={(includeInputs) =>
+          updateOptions("pdf", { includeInputs })
+        }
+      />
+      <SwitchOption
+        label="Include outputs"
+        descriptions={{
+          checked: "Keeps the outputs currently shown in the notebook.",
+          unchecked: "Leaves cell outputs out of the PDF.",
+        }}
+        checked={options.pdf.includeOutputs}
+        disabled={disabled}
+        onCheckedChange={(includeOutputs) =>
+          updateOptions("pdf", { includeOutputs })
+        }
+      />
+      {options.pdf.preset === "document" ? (
+        <RadioOption
+          label="Method"
+          value={options.pdf.webpdf ? "browser" : "latex"}
+          disabled={disabled}
+          onValueChange={(renderer) =>
+            updateOptions("pdf", { webpdf: renderer === "browser" })
+          }
+          options={PDF_RENDERER_OPTIONS}
+        />
+      ) : null}
+    </OptionsGroup>
+  );
+}
+
+function ScriptFormatOptions({
+  options,
+  updateOptions,
+  disabled,
+}: FormatOptionsProps) {
+  return (
+    <OptionsGroup>
+      <RadioOption
+        label="Format"
+        value={options.script.type}
+        disabled={disabled}
+        onValueChange={(type) => updateOptions("script", { type })}
+        options={SCRIPT_TYPE_OPTIONS}
+      />
+    </OptionsGroup>
+  );
+}
+
+function NoFormatOptions() {
+  return null;
+}
+
+function OptionsGroup({ children }: PropsWithChildren) {
+  return <div className="divide-y rounded-md border">{children}</div>;
+}
+
+function SwitchOption({
+  label,
+  descriptions,
+  descriptionOverride,
+  checked,
+  disabled,
+  onCheckedChange,
+}: {
+  label: string;
+  descriptions: {
+    checked: string;
+    unchecked: string;
+  };
+  descriptionOverride?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  const id = useId();
+  const descriptionId = `${id}-description`;
+  const description =
+    descriptionOverride ??
+    (checked ? descriptions.checked : descriptions.unchecked);
+  const possibleDescriptions = [
+    descriptions.checked,
+    descriptions.unchecked,
+    ...(descriptionOverride ? [descriptionOverride] : []),
+  ];
+  return (
+    <div className="flex min-h-14 items-center justify-between gap-4 px-3 py-2">
+      <div className="min-w-0">
+        <label htmlFor={id} className="text-sm font-medium leading-5">
+          {label}
+        </label>
+        <OptionDescription
+          id={descriptionId}
+          description={description}
+          possibleDescriptions={possibleDescriptions}
+        />
+      </div>
+      <Switch
+        id={id}
+        size="sm"
+        checked={checked}
+        disabled={disabled}
+        onCheckedChange={onCheckedChange}
+        aria-label={label}
+        aria-describedby={descriptionId}
+      />
+    </div>
+  );
+}
+
+function RadioOption<Value extends string>({
+  label,
+  value,
+  disabled,
+  onValueChange,
+  options,
+}: {
+  label: string;
+  value: Value;
+  disabled?: boolean;
+  onValueChange: (value: Value) => void;
+  options: readonly Choice<Value>[];
+}) {
+  const id = useId();
+  const descriptionId = `${id}-description`;
+  const selectedDescription = options.find(
+    (option) => option.value === value,
+  )?.description;
+  return (
+    <div className="flex min-h-14 flex-col items-stretch gap-2 px-3 py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+      <div className="min-w-0">
+        <div className="text-sm font-medium leading-5">{label}</div>
+        <OptionDescription
+          id={descriptionId}
+          description={selectedDescription ?? ""}
+          possibleDescriptions={options.map((option) => option.description)}
+        />
+      </div>
+      <RadioGroup
+        value={value}
+        onValueChange={(nextValue) => onValueChange(nextValue as Value)}
+        className="flex shrink-0 flex-wrap gap-x-5 gap-y-2 sm:justify-end"
+        aria-label={label}
+        aria-describedby={descriptionId}
+        disabled={disabled}
+      >
+        {options.map((option, index) => {
+          const optionId = `${id}-${index}`;
+          return (
+            <div key={option.value} className="flex items-center gap-2">
+              <RadioGroupItem id={optionId} value={option.value} />
+              <label htmlFor={optionId} className="text-sm">
+                {option.label}
+              </label>
+            </div>
+          );
+        })}
+      </RadioGroup>
+    </div>
+  );
+}
+
+function SelectOption<Value extends string>({
+  label,
+  value,
+  disabled,
+  onValueChange,
+  options,
+}: {
+  label: string;
+  value: Value;
+  disabled?: boolean;
+  onValueChange: (value: Value) => void;
+  options: readonly Choice<Value>[];
+}) {
+  const id = useId();
+  const descriptionId = `${id}-description`;
+  const selectedDescription = options.find(
+    (option) => option.value === value,
+  )?.description;
+  return (
+    <div className="flex min-h-14 flex-col items-stretch gap-2 px-3 py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+      <div className="min-w-0">
+        <label htmlFor={id} className="text-sm font-medium leading-5">
+          {label}
+        </label>
+        <OptionDescription
+          id={descriptionId}
+          description={selectedDescription ?? ""}
+          possibleDescriptions={options.map((option) => option.description)}
+        />
+      </div>
+      <Select
+        value={value}
+        disabled={disabled}
+        onValueChange={(nextValue) => onValueChange(nextValue as Value)}
+      >
+        <SelectTrigger
+          id={id}
+          aria-describedby={descriptionId}
+          className="h-8 w-full shrink-0 sm:w-44"
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function OptionDescription({
+  id,
+  description,
+  possibleDescriptions,
+}: {
+  id: string;
+  description: string;
+  possibleDescriptions: readonly string[];
+}) {
+  const sizingDescriptions = [...new Set(possibleDescriptions)].filter(
+    (candidate) => candidate !== description,
+  );
+  return (
+    <div className="mt-0.5 grid text-xs leading-4 text-muted-foreground">
+      <p id={id} aria-live="polite" className="col-start-1 row-start-1">
+        {description}
+      </p>
+      {sizingDescriptions.map((candidate) => (
+        <p
+          key={candidate}
+          aria-hidden={true}
+          className="invisible col-start-1 row-start-1"
+        >
+          {candidate}
+        </p>
+      ))}
+    </div>
+  );
+}