@marimo-team/frontend 0.14.18-dev9 → 0.15.0

package/src/components/forms/options.ts

@@ -0,0 +1,59 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+export interface FieldOptions {
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  direction?: "row" | "column" | "two-columns";
+  /**
+   * Only valid for string fields
+   */
+  inputType?:
+    | "password"
+    | "text"
+    | "number"
+    | "checkbox"
+    | "select"
+    | "textarea";
+  special?:
+    | "column_id"
+    | "random_number_button"
+    | "column_type"
+    | "radio_group"
+    | "column_filter"
+    | "text_area_multiline"
+    | "column_values"
+    | "date"
+    | "datetime"
+    | "time"
+    | "tabs";
+  /**
+   * Only show options that match the regex
+   */
+  optionRegex?: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const FieldOptions = {
+  of(options: FieldOptions): string {
+    return JSON.stringify(options);
+  },
+  parse(options: string | undefined): FieldOptions {
+    if (!options) {
+      return {};
+    }
+    try {
+      return JSON.parse(options) as FieldOptions;
+    } catch {
+      return {
+        label: options,
+      };
+    }
+  },
+};
+
+// Random number between 0 and 100_000
+export function randomNumber(): number {
+  return Math.floor(Math.random() * 100_000);
+}

package/src/components/forms/switchable-multi-select.tsx

@@ -0,0 +1,134 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { EditIcon } from "lucide-react";
+import React, { useState } from "react";
+import { cn } from "@/utils/cn";
+import { Combobox, ComboboxItem } from "../ui/combobox";
+import { Textarea } from "../ui/textarea";
+import { Toggle } from "../ui/toggle";
+import { Tooltip } from "../ui/tooltip";
+
+interface Props {
+  options: string[];
+  value: string[];
+  className?: string;
+  placeholder?: string;
+  comboBoxClassName?: string;
+  textAreaClassName?: string;
+  onChange: (value: string[] | null) => void;
+}
+
+// new-line separated
+const DELIMINATOR = "\n";
+
+/**
+ * Switch between multi-select options or using a textarea.
+ */
+export const SwitchableMultiSelect: React.FC<Props> = ({
+  value,
+  options,
+  onChange,
+  className,
+  placeholder,
+  textAreaClassName,
+  comboBoxClassName,
+}) => {
+  const [showTextArea, setShowTextArea] = useState(false);
+  const valueAsArray = ensureStringArray(value);
+
+  const renderInput = () => {
+    if (showTextArea) {
+      return (
+        <TextAreaMultiSelect
+          value={valueAsArray}
+          className={textAreaClassName}
+          onChange={onChange}
+          placeholder={
+            placeholder ? `${placeholder}: one per line` : "One value per line"
+          }
+        />
+      );
+    }
+
+    return (
+      <Combobox
+        placeholder={placeholder}
+        displayValue={(option: string) => option}
+        className={cn("w-full max-w-[400px]", comboBoxClassName)}
+        multiple={true}
+        value={valueAsArray}
+        onValueChange={onChange}
+        keepPopoverOpenOnSelect={true}
+        chips={true}
+        chipsClassName="flex-row flex-wrap min-w-[210px]"
+      >
+        {options.map((option) => (
+          <ComboboxItem key={option} value={option}>
+            {option}
+          </ComboboxItem>
+        ))}
+      </Combobox>
+    );
+  };
+
+  return (
+    <div className={cn("flex gap-1", className)}>
+      {renderInput()}
+      <Tooltip
+        content={showTextArea ? "Switch to multi-select" : "Switch to textarea"}
+      >
+        <Toggle
+          size="xs"
+          onPressedChange={setShowTextArea}
+          pressed={showTextArea}
+        >
+          <EditIcon className="w-3 h-3" />
+        </Toggle>
+      </Tooltip>
+    </div>
+  );
+};
+
+/**
+ * Treat a textarea as a multi-select,
+ * where each line is a value.
+ */
+export const TextAreaMultiSelect: React.FC<{
+  value: string[];
+  onChange: (value: string[]) => void;
+  className?: string;
+  placeholder?: string;
+}> = (props) => {
+  const { className, value, onChange, placeholder } = props;
+  const valueAsArray = ensureStringArray(value);
+  return (
+    <Textarea
+      value={valueAsArray.join(DELIMINATOR)}
+      className={className}
+      rows={4}
+      onChange={(e) => {
+        if (e.target.value === "") {
+          onChange([]);
+          return;
+        }
+        onChange(e.target.value.split(DELIMINATOR));
+      }}
+      placeholder={
+        placeholder ? `${placeholder}: one per line` : "One value per line"
+      }
+    />
+  );
+};
+
+export function ensureStringArray<T extends string>(
+  value: T | T[] | null | undefined,
+): T[] {
+  if (value == null) {
+    return [];
+  }
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return [value].filter((v) => v != null || v !== "");
+}

package/src/components/home/components.tsx

@@ -0,0 +1,189 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import {
+  ActivityIcon,
+  BarChart2Icon,
+  BookMarkedIcon,
+  BookOpenIcon,
+  DatabaseIcon,
+  FileIcon,
+  FileTextIcon,
+  GithubIcon,
+  GraduationCapIcon,
+  GridIcon,
+  LayoutIcon,
+  LinkIcon,
+  MessagesSquareIcon,
+  OrbitIcon,
+  YoutubeIcon,
+} from "lucide-react";
+import type React from "react";
+import { MarkdownIcon } from "@/components/editor/cell/code/icons";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Constants } from "@/core/constants";
+import { useRequestClient } from "@/core/network/requests";
+import type { TutorialId } from "@/core/network/types";
+import { openNotebook } from "@/utils/links";
+import { Objects } from "@/utils/objects";
+
+const TUTORIALS: Record<
+  TutorialId,
+  [string, React.FC<React.SVGProps<SVGSVGElement>>, string]
+> = {
+  intro: ["Introduction", BookOpenIcon, "Get started with marimo basics"],
+  dataflow: [
+    "Dataflow",
+    ActivityIcon,
+    "Learn how cells interact with each other",
+  ],
+  ui: ["UI Elements", LayoutIcon, "Create interactive UI components"],
+  markdown: [
+    "Markdown",
+    FileTextIcon,
+    "Format text with parameterized markdown",
+  ],
+  plots: ["Plots", BarChart2Icon, "Create interactive visualizations"],
+  sql: ["SQL", DatabaseIcon, "Query databases directly in marimo"],
+  layout: ["Layout", GridIcon, "Customize the layout of your cells' output"],
+  fileformat: [
+    "File format",
+    FileIcon,
+    "Understand marimo's pure-Python file format",
+  ],
+  "for-jupyter-users": [
+    "For Jupyter users",
+    OrbitIcon,
+    "Transiting from Jupyter to marimo",
+  ],
+  "markdown-format": [
+    "Markdown format",
+    MarkdownIcon,
+    "Using marimo to edit markdown files",
+  ],
+};
+
+export const OpenTutorialDropDown: React.FC = () => {
+  const { openTutorial } = useRequestClient();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild={true}>
+        <Button data-testid="open-tutorial-button" size="xs" variant="outline">
+          <GraduationCapIcon className="w-4 h-4 mr-2" />
+          Tutorials
+          <CaretDownIcon className="w-3 h-3 ml-1" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" align="end" className="no-print">
+        {Objects.entries(TUTORIALS).map(
+          ([tutorialId, [label, Icon, description]]) => (
+            <DropdownMenuItem
+              key={tutorialId}
+              onSelect={async () => {
+                const file = await openTutorial({ tutorialId });
+                if (!file) {
+                  return;
+                }
+                openNotebook(file.path);
+              }}
+            >
+              <Icon
+                strokeWidth={1.5}
+                className="w-4 h-4 mr-3 self-start mt-1.5 text-muted-foreground"
+              />
+              <div className="flex items-center">
+                <div className="flex flex-col">
+                  <span>{label}</span>
+                  <span className="text-xs text-muted-foreground pr-1">
+                    {description}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuItem>
+          ),
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const RESOURCES = [
+  {
+    title: "Documentation",
+    description: "Official marimo documentation and API reference",
+    icon: BookMarkedIcon,
+    url: Constants.docsPage,
+  },
+  {
+    title: "GitHub",
+    description: "View source code, report issues, or contribute",
+    icon: GithubIcon,
+    url: Constants.githubPage,
+  },
+  {
+    title: "Community",
+    description: "Join the marimo Discord community",
+    icon: MessagesSquareIcon,
+    url: Constants.discordLink,
+  },
+  {
+    title: "YouTube",
+    description: "Watch tutorials and demos",
+    icon: YoutubeIcon,
+    url: Constants.youtube,
+  },
+  {
+    title: "Changelog",
+    description: "See what's new in marimo",
+    icon: FileTextIcon,
+    url: Constants.releasesPage,
+  },
+];
+
+export const ResourceLinks: React.FC = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Header Icon={LinkIcon}>Resources</Header>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {RESOURCES.map((resource) => (
+          <a
+            key={resource.title}
+            href={resource.url}
+            target="_blank"
+            className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
+          >
+            <resource.icon className="w-5 h-5 mt-1.5 text-primary" />
+            <div>
+              <h3 className="font-medium">{resource.title}</h3>
+              <p className="text-sm text-muted-foreground">
+                {resource.description}
+              </p>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const Header: React.FC<{
+  Icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  control?: React.ReactNode;
+  children: React.ReactNode;
+}> = ({ Icon, control, children }) => {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <h2 className="flex items-center gap-2 text-xl font-semibold text-muted-foreground select-none">
+        <Icon className="h-5 w-5" />
+        {children}
+      </h2>
+      {control}
+    </div>
+  );
+};

package/src/components/home/state.ts

@@ -0,0 +1,30 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { atomWithStorage } from "jotai/utils";
+import React from "react";
+import type { MarimoFile } from "@/core/network/types";
+import { Functions } from "@/utils/functions";
+
+export type RunningNotebooksMap = Map<string, MarimoFile>;
+
+export const RunningNotebooksContext = React.createContext<{
+  runningNotebooks: RunningNotebooksMap;
+  setRunningNotebooks: (data: RunningNotebooksMap) => void;
+}>({
+  runningNotebooks: new Map(),
+  setRunningNotebooks: Functions.NOOP,
+});
+export const WorkspaceRootContext = React.createContext<string>("");
+
+export const includeMarkdownAtom = atomWithStorage<boolean>(
+  "marimo:home:include-markdown",
+  false,
+  undefined,
+  { getOnInit: true },
+);
+export const expandedFoldersAtom = atomWithStorage<Record<string, boolean>>(
+  "marimo:home:expanded-folders",
+  {},
+  undefined,
+  { getOnInit: true },
+);

package/src/components/icons/copy-icon.tsx

@@ -0,0 +1,59 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { CheckIcon, Copy } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import { cn } from "@/utils/cn";
+import { copyToClipboard } from "@/utils/copy";
+import { Events } from "@/utils/events";
+import { Tooltip } from "../ui/tooltip";
+import { toast } from "../ui/use-toast";
+
+interface Props {
+  value: string | (() => string);
+  className?: string;
+  tooltip?: string | false;
+  toastTitle?: string;
+}
+
+export const CopyClipboardIcon: React.FC<Props> = ({
+  value,
+  className,
+  tooltip,
+  toastTitle,
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = Events.stopPropagation(async () => {
+    const valueToCopy = typeof value === "function" ? value() : value;
+    await copyToClipboard(valueToCopy).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+      if (toastTitle) {
+        toast({ title: toastTitle });
+      }
+    });
+  });
+
+  const button = (
+    <button type="button" onClick={handleCopy} aria-label="Copy to clipboard">
+      {isCopied ? (
+        <CheckIcon className={cn(className, "text-(--grass-11)")} />
+      ) : (
+        <Copy className={className} />
+      )}
+    </button>
+  );
+
+  if (tooltip === false) {
+    return button;
+  }
+
+  return (
+    <Tooltip
+      content={isCopied ? "Copied!" : (tooltip ?? "Copy to clipboard")}
+      delayDuration={400}
+    >
+      {button}
+    </Tooltip>
+  );
+};

package/src/components/icons/github-copilot.tsx

@@ -0,0 +1,17 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { SVGProps } from "react";
+
+export const GitHubCopilotIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.24em"
+      height="1em"
+      viewBox="0 0 256 208"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M205.28 31.36c14.096 14.88 20.016 35.2 22.512 63.68c6.626 0 12.805 1.47 16.976 7.152l7.792 10.56A17.55 17.55 0 0 1 256 123.2v28.688c-.008 3.704-1.843 7.315-4.832 9.504C215.885 187.222 172.35 208 128 208c-49.066 0-98.19-28.273-123.168-46.608c-2.989-2.189-4.825-5.8-4.832-9.504V123.2c0-3.776 1.2-7.424 3.424-10.464l7.792-10.544c4.173-5.657 10.38-7.152 16.992-7.152c2.496-28.48 8.4-48.8 22.512-63.68C77.331 3.165 112.567.06 127.552 0H128c14.72 0 50.4 2.88 77.28 31.36m-77.264 47.376c-3.04 0-6.544.176-10.272.544c-1.312 4.896-3.248 9.312-6.08 12.128c-11.2 11.2-24.704 12.928-31.936 12.928c-6.802 0-13.927-1.42-19.744-5.088c-5.502 1.808-10.786 4.415-11.136 10.912c-.586 12.28-.637 24.55-.688 36.824c-.026 6.16-.05 12.322-.144 18.488c.024 3.579 2.182 6.903 5.44 8.384C79.936 185.92 104.976 192 128.016 192c23.008 0 48.048-6.08 74.512-18.144c3.258-1.48 5.415-4.805 5.44-8.384c.317-18.418.062-36.912-.816-55.312h.016c-.342-6.534-5.648-9.098-11.168-10.912c-5.82 3.652-12.927 5.088-19.728 5.088c-7.232 0-20.72-1.728-31.936-12.928c-2.832-2.816-4.768-7.232-6.08-12.128a106 106 0 0 0-10.24-.544m-26.941 43.93c5.748 0 10.408 4.66 10.408 10.409v19.183c0 5.749-4.66 10.409-10.408 10.409s-10.408-4.66-10.408-10.409v-19.183c0-5.748 4.66-10.408 10.408-10.408m53.333 0c5.749 0 10.409 4.66 10.409 10.409v19.183c0 5.749-4.66 10.409-10.409 10.409c-5.748 0-10.408-4.66-10.408-10.409v-19.183c0-5.748 4.66-10.408 10.408-10.408M81.44 28.32c-11.2 1.12-20.64 4.8-25.44 9.92c-10.4 11.36-8.16 40.16-2.24 46.24c4.32 4.32 12.48 7.2 21.28 7.2c6.72 0 19.52-1.44 30.08-12.16c4.64-4.48 7.52-15.68 7.2-27.04c-.32-9.12-2.88-16.64-6.72-19.84c-4.16-3.68-13.6-5.28-24.16-4.32m68.96 4.32c-3.84 3.2-6.4 10.72-6.72 19.84c-.32 11.36 2.56 22.56 7.2 27.04c10.56 10.72 23.36 12.16 30.08 12.16c8.8 0 16.96-2.88 21.28-7.2c5.92-6.08 8.16-34.88-2.24-46.24c-4.8-5.12-14.24-8.8-25.44-9.92c-10.56-.96-20 .64-24.16 4.32M128 56c-2.56 0-5.6.16-8.96.48c.32 1.76.48 3.68.64 5.76c0 1.44 0 2.88-.16 4.48c3.2-.32 5.92-.32 8.48-.32s5.28 0 8.48.32c-.16-1.6-.16-3.04-.16-4.48c.16-2.08.32-4 .64-5.76c-3.36-.32-6.4-.48-8.96-.48" />
+    </svg>
+  );
+};

package/src/components/icons/large-spinner.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { Loader2Icon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "@/utils/cn";
+
+export const LargeSpinner = ({ title }: { title?: string }) => {
+  const [currentTitle, setCurrentTitle] = useState(title);
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    if (title !== currentTitle) {
+      setIsVisible(false);
+      const timer = setTimeout(() => {
+        setCurrentTitle(title);
+        setIsVisible(true);
+      }, 300); // Wait for fade out animation to complete
+      return () => clearTimeout(timer);
+    }
+  }, [title, currentTitle]);
+
+  return (
+    <div className="flex flex-col h-full flex-1 items-center justify-center p-4">
+      <Loader2Icon
+        className="size-20 animate-spin text-primary"
+        data-testid="large-spinner"
+        strokeWidth={1}
+      />
+      <div
+        className={cn(
+          "mt-2 text-muted-foreground font-semibold text-lg transition-opacity duration-300",
+          isVisible ? "opacity-100" : "opacity-0",
+        )}
+      >
+        {currentTitle}
+      </div>
+    </div>
+  );
+};

package/src/components/icons/loading-ellipsis.tsx

@@ -0,0 +1,46 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import clsx from "clsx";
+import { Circle } from "lucide-react";
+import React from "react";
+
+interface LoadingEllipsisProps {
+  /** Extra Tailwind classes */
+  className?: string;
+  /** Diameter of each dot in pixels */
+  size?: number;
+  /** Tailwind gap utility between dots (e.g. "gap-1" or "gap-2") */
+  gap?: string;
+  /** Pulse cycle length in milliseconds */
+  durationMs?: number;
+}
+
+const LoadingEllipsis: React.FC<LoadingEllipsisProps> = ({
+  className,
+  size = 8,
+  gap = "gap-1",
+  durationMs = 1200,
+}) => {
+  const baseStyle: React.CSSProperties = {
+    animationDuration: `${durationMs}ms`,
+  };
+
+  return (
+    <div className={clsx("flex", gap, className)} aria-label="Loading">
+      {[0, 1, 2].map((i) => (
+        <Circle
+          key={i}
+          width={size}
+          height={size}
+          className="fill-current text-current animate-ellipsis-dot"
+          style={{
+            ...baseStyle,
+            animationDelay: `${(durationMs / 3) * i}ms`,
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export { LoadingEllipsis };

package/src/components/icons/multi-icon.css

@@ -0,0 +1,9 @@
+@reference "../../css/globals.css";
+
+.multi-icon .second-icon {
+  @apply bg-background;
+}
+
+.menu-item:hover .multi-icon .second-icon {
+  @apply bg-accent;
+}

package/src/components/icons/multi-icon.tsx

@@ -0,0 +1,30 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React, { type PropsWithChildren } from "react";
+
+import "./multi-icon.css";
+
+interface MultiIconProps {
+  layerTop?: boolean;
+}
+
+/**
+ * By default, first icon is left untouched, and second icon is layered to the
+ * bottom right. When `layerTop`, second icon is layered to the top left.
+ */
+export const MultiIcon = ({
+  children,
+  layerTop = false,
+}: PropsWithChildren<MultiIconProps>) => {
+  const [first, second] = React.Children.toArray(children);
+  const positioning = layerTop
+    ? "top-[-2px] left-[-2px]"
+    : "bottom-[-2px] right-[-2px]";
+  return (
+    <div className="multi-icon relative w-fit">
+      {first}
+      <div className={`second-icon absolute ${positioning} rounded-full`}>
+        {second}
+      </div>
+    </div>
+  );
+};

package/src/components/icons/spinner.tsx

@@ -0,0 +1,38 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2Icon } from "lucide-react";
+import React from "react";
+import { cn } from "@/utils/cn";
+
+const spinnerVariants = cva("animate-spin", {
+  variants: {
+    centered: {
+      true: "m-auto",
+    },
+    size: {
+      small: "size-4",
+      medium: "size-12",
+      large: "size-20",
+      xlarge: "size-20",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+const Spinner = React.forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement> & VariantProps<typeof spinnerVariants>
+>(({ className, children, centered, size, ...props }, ref) => (
+  <Loader2Icon
+    ref={ref}
+    className={cn(spinnerVariants({ centered, size }), className)}
+    strokeWidth={1.5}
+    {...props}
+  />
+));
+Spinner.displayName = "Spinner";
+
+export { Spinner };

package/src/components/layout/toolbar.tsx

@@ -0,0 +1,26 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React from "react";
+
+interface Props {
+  left?: React.ReactNode;
+  center?: React.ReactNode;
+  right?: React.ReactNode;
+}
+
+/**
+ * Layout elements for toolbar.
+ * This is better than justify-between since it handles adding/removing items.
+ */
+export const Toolbar: React.FC<Props> = (props) => {
+  return (
+    <div className="flex items-center gap-2 w-full px-3">
+      <div className="flex-1 flex item-center gap-2">{props.left}</div>
+      <div className="flex-1 flex item-center gap-2 justify-center">
+        {props.center}
+      </div>
+      <div className="flex-1 flex item-center gap-2 justify-end">
+        {props.right}
+      </div>
+    </div>
+  );
+};