@koide-labs/ui 0.0.0

package/src/components/toast/toast.tsx

@@ -0,0 +1,104 @@
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import clsx from "clsx";
+
+import { Button } from "../button";
+import { Heading } from "../heading";
+import { IconButton } from "../icon-button";
+import { Surface } from "../surface";
+import { Text } from "../text";
+import { View, type Color } from "../view";
+import { useToastManager } from "./use-toast-manager";
+
+import styles from "./toast.module.css";
+
+export const ToastProvider = ToastPrimitive.Provider;
+
+const toastTypeColor: Record<string, Color> = {
+  info: "blue",
+  error: "red",
+  warning: "yellow",
+  success: "green",
+};
+
+export function ToastViewport() {
+  return (
+    <ToastPrimitive.Portal>
+      <ToastPrimitive.Viewport className={styles["toast__viewport"]}>
+        <ToastList />
+      </ToastPrimitive.Viewport>
+    </ToastPrimitive.Portal>
+  );
+}
+
+// TODO we're not using the toast primitives here...
+// TODO specify toast background in viewport?
+
+function ToastList() {
+  const toastManager = useToastManager();
+  return toastManager.toasts.map((toast) => {
+    const color =
+      toast.type && toast.type in toastTypeColor
+        ? toastTypeColor[toast.type]
+        : undefined;
+
+    return (
+      <ToastPrimitive.Root
+        key={toast.id}
+        toast={toast}
+        className={clsx(
+          styles["toast"],
+          color
+            ? styles[`toast_variant_colorway`]
+            : styles["toast_variant_neutral"],
+        )}
+        render={<Surface background="default" color={color} />}
+      >
+        <View
+          render={<ToastPrimitive.Content />}
+          className={styles["toast__content"]}
+        >
+          <View className={styles["toast__row"]}>
+            <View className={styles["toast__header"]}>
+              {toast.title ? (
+                <Heading
+                  level={2}
+                  size="lg"
+                  color="inherit"
+                  className={styles["toast__title"]}
+                >
+                  {toast.title}
+                </Heading>
+              ) : null}
+
+              <ToastPrimitive.Description
+                render={<Text multiline color={color ? "inherit" : "dimmer"} />}
+                className={styles["toast__description"]}
+              />
+            </View>
+
+            {/* close icon will appear over content UNLESS we disable aboslute positioning */}
+            <ToastPrimitive.Close
+              render={
+                <IconButton
+                  className={toast.title ? styles["toast__close"] : undefined}
+                  interactive={color ? `${color}_no-fill` : "no-fill"}
+                  icon="close-line"
+                  size="sm"
+                  alt="Close"
+                />
+              }
+            />
+          </View>
+          {toast.action ? (
+            <Button
+              {...toast.action}
+              interactive={color ? `${color}_fill` : true}
+            >
+              {toast.action.children}
+            </Button>
+          ) : null}
+        </View>
+      </ToastPrimitive.Root>
+    );
+  });
+}

package/src/components/toast/use-toast-manager.ts

@@ -0,0 +1,63 @@
+import {
+  Toast,
+  type ToastManagerAddOptions,
+  type UseToastManagerReturnValue,
+} from "@base-ui/react/toast";
+
+import type { Override } from "~/-types";
+
+import type { ButtonProps } from "../button";
+
+/**
+ * A whole lot of useless effort
+ * Basically I want "actionProps" to be "action"
+ * And I want "action" to use ButtonProps with text
+ */
+
+type ActionProps = {
+  type?: "info" | "error" | "warning" | "success" | (string & {});
+  action?: ButtonProps;
+};
+
+type FrameworkAddOptions<Data extends object> = Omit<
+  ToastManagerAddOptions<Data>,
+  "actionProps"
+> &
+  ActionProps;
+
+type FrameworkUpdateOptions<Data extends object> = Partial<
+  FrameworkAddOptions<Data>
+>;
+
+type FrameworkPromiseOptions<Value, Data extends object> = {
+  loading: string | FrameworkUpdateOptions<Data>;
+  success:
+    | string
+    | FrameworkUpdateOptions<Data>
+    | ((result: Value) => string | FrameworkUpdateOptions<Data>);
+  error:
+    | string
+    | FrameworkUpdateOptions<Data>
+    | ((error: unknown) => string | FrameworkUpdateOptions<Data>);
+};
+
+type FrameworkToastManager = Override<
+  UseToastManagerReturnValue,
+  {
+    toasts: Array<UseToastManagerReturnValue["toasts"][number] & ActionProps>;
+    add<Data extends object>(options: FrameworkAddOptions<Data>): string;
+    update<Data extends object>(
+      id: string,
+      updates: FrameworkUpdateOptions<Data>,
+    ): void;
+    promise<Value, Data extends object>(
+      promise: Promise<Value>,
+      options: FrameworkPromiseOptions<Value, Data>,
+    ): Promise<Value>;
+  }
+>;
+
+export function useToastManager() {
+  const toastManager = Toast.useToastManager();
+  return toastManager as unknown as FrameworkToastManager;
+}

package/src/components/tooltip/index.tsx

@@ -0,0 +1,61 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import clsx from "clsx";
+import type { ReactElement, ReactNode } from "react";
+
+import { textify } from "~/-utils";
+
+import { Surface } from "../surface";
+import { TooltipArrow } from "./tooltip-arrow";
+
+import transitionStyles from "../../styles/transitions.module.css";
+import styles from "./tooltip.module.css";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+type TooltipRootProps = Omit<TooltipPrimitive.Root.Props, "children">;
+type TooltipPositionerProps = Pick<
+  TooltipPrimitive.Positioner.Props,
+  "align" | "side"
+>;
+export type TooltipProps = TooltipRootProps &
+  TooltipPositionerProps & {
+    children?: ReactNode;
+
+    /** Specify trigger to open tooltip. */
+    trigger?: ReactElement;
+
+    /** Apply className to tooltip content */
+    className?: string;
+  };
+
+export function Tooltip({
+  children,
+  trigger,
+  align,
+  side,
+  className,
+  ...props
+}: TooltipProps) {
+  return (
+    <TooltipPrimitive.Root {...props}>
+      {trigger ? <TooltipPrimitive.Trigger render={trigger} /> : null}
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Positioner align={align} side={side} sideOffset={8}>
+          <TooltipPrimitive.Popup
+            render={<Surface background="highest" />}
+            className={clsx(
+              styles["tooltip"],
+              transitionStyles["transition_scale"],
+              className,
+            )}
+          >
+            <TooltipPrimitive.Arrow className={styles["tooltip__arrow"]}>
+              <TooltipArrow />
+            </TooltipPrimitive.Arrow>
+            {textify(children)}
+          </TooltipPrimitive.Popup>
+        </TooltipPrimitive.Positioner>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+}

package/src/components/tooltip/tooltip-arrow.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+
+import styles from "./tooltip.module.css";
+
+export function TooltipArrow(props: { className?: string }) {
+  return (
+    <svg
+      width="10"
+      height="5"
+      viewBox="0 0 30 10"
+      preserveAspectRatio="none"
+      className={clsx(styles["tooltip__arrow-icon"], props.className)}
+    >
+      <polygon points="0,0 30,0 15,10"></polygon>
+    </svg>
+  );
+}

package/src/components/tooltip/tooltip.module.css

@@ -0,0 +1,44 @@
+.tooltip {
+  z-index: 50;
+  box-shadow: var(--shadow-1);
+  border: 1px solid var(--outline-dimmer);
+  border-radius: var(--border-radius-default);
+  background-color: var(--surface-background);
+  padding: var(--space-4) var(--space-8);
+}
+
+.tooltip__arrow {
+  &[data-instant] {
+    transition: none;
+  }
+
+  &[data-side="top"] {
+    bottom: -4px;
+  }
+
+  &[data-side="bottom"] {
+    top: -4px;
+    rotate: 180deg;
+  }
+
+  &[data-side="left"] {
+    right: -7px;
+    rotate: -90deg;
+  }
+
+  &[data-side="right"] {
+    left: -7px;
+    rotate: 90deg;
+  }
+}
+
+.tooltip__arrow-icon {
+  display: block;
+  position: relative;
+  fill: var(--surface-background) !important;
+  stroke: var(--outline-dimmer);
+  stroke-dasharray: 0 30 22 0 22;
+  stroke-linejoin: round;
+  stroke-width: 2;
+  border-top: 1px solid var(--surface-background);
+}

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { disable } from "~/stories/utils";
+import { tokens } from "~/styles/tokens";
+
+import { Tooltip, TooltipProvider } from ".";
+import { IconButton } from "../icon-button";
+import { View } from "../view";
+
+const meta = {
+  title: "Tooltip",
+  component: Tooltip,
+  parameters: { layout: "centered" },
+  argTypes: {
+    children: {
+      control: "text",
+    },
+    align: {
+      control: "inline-radio",
+      options: ["start", "center", "end"],
+    },
+    open: {
+      control: "boolean",
+    },
+    ...disable(["className"]),
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    trigger: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    children: "Bold",
+    align: "center",
+    open: true,
+  },
+  render: (args) => (
+    <Tooltip
+      trigger={<IconButton icon="bold" alt="Bold" interactive />}
+      {...args}
+    />
+  ),
+};
+
+export const Provider: Story = {
+  argTypes: {
+    ...disable(["message", "trigger", "open", "children"]),
+  },
+  render: () => (
+    <TooltipProvider>
+      <View style={{ flexDirection: "row", gap: tokens.space4 }}>
+        <Tooltip
+          children="Bold"
+          trigger={<IconButton icon="bold" alt="Bold" interactive />}
+        />
+        <Tooltip
+          children="Italic"
+          trigger={<IconButton icon="italic" alt="Italic" interactive />}
+        />
+        <Tooltip
+          children="Underline"
+          trigger={<IconButton icon="underline" alt="Underline" interactive />}
+        />
+      </View>
+    </TooltipProvider>
+  ),
+};

package/src/components/view/index.tsx

@@ -0,0 +1,137 @@
+import { mergeProps, useRender } from "@base-ui/react";
+import clsx from "clsx";
+import type { ElementType } from "react";
+
+import colorwayStyles from "./view_colorway.module.css";
+import interactiveStyles from "./view_interactive.module.css";
+import loadingStyles from "./view_loading.module.css";
+import styles from "./view.module.css";
+
+export type InteractiveStyle =
+  | "fill"
+  | "no-fill"
+  | "outline"
+  | "fill-outline"
+  | "list-item";
+
+export type Color =
+  | "primary"
+  | "positive"
+  | "negative"
+  | "warning"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "teal"
+  | "blue"
+  | "blurple"
+  | "purple"
+  | "magenta"
+  | "pink"
+  | "grey";
+
+export type ColorStyle =
+  | "outline"
+  | "outline-static"
+  | "mute-static"
+  | "fill"
+  | "no-fill"
+  | "fill-static"
+  | "fill-outline";
+
+export type ColorVariant = `${Color}_${ColorStyle}`;
+
+export type LoadingVariant = "background" | "foreground";
+
+export type ViewProps<T extends ElementType = "div"> = Omit<
+  useRender.ComponentProps<T>,
+  "color"
+> & {
+  /**
+   * Centralized property to define either an interactive variant or colorway.
+   * We know which is which because colorways have an underscore (Color_ColorVariant, like primary_fill).
+   *
+   * Static variants will not apply transitions or cursor effects! Do not use them for interactive elements.
+   *
+   * Setting `interactive` to true will use "fill".
+   */
+  interactive?: boolean | InteractiveStyle | ColorVariant;
+
+  /**
+   * Add CSS color variables but do nothing else.
+   * Useful for using View as a sort of "Color Provider" so children can use colors and create custom variants.
+   */
+  color?: Color;
+
+  /**
+   * Make this element look like it's loading.
+   * Setting `loading` to true will use "foreground".
+   * It'll use sensible defaults based on the colorway or interactive prop.
+   */
+  loading?: boolean | LoadingVariant;
+};
+
+export const View = <T extends ElementType = "div">({
+  interactive,
+  loading,
+  color,
+  render,
+  ...props
+}: ViewProps<T>) => {
+  const normalized = normalize({ interactive, loading });
+  const element = useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps(
+      {
+        className: clsx(
+          styles["view"],
+          color && colorwayStyles[`view_colorway_color-${color}`],
+          normalized.interactive && [
+            interactiveStyles["view_interactive"],
+            interactiveStyles[`view_interactive_${normalized.interactive}`],
+          ],
+          normalized.colorway && [
+            normalized.colorway[1].endsWith("static")
+              ? colorwayStyles["view_colorway_static"]
+              : colorwayStyles["view_colorway"],
+            colorwayStyles[`view_colorway_${normalized.colorway[1]}`],
+            colorwayStyles[`view_colorway_color-${normalized.colorway[0]}`],
+          ],
+          normalized.loading && [
+            loadingStyles["view_loading"],
+            loadingStyles[`view_loading_${normalized.loading}`],
+          ],
+        ),
+      },
+      props,
+    ),
+  });
+  return element;
+};
+
+const normalize = (props: Pick<ViewProps, "interactive" | "loading">) => {
+  let interactive: InteractiveStyle | null = null;
+  let colorway: [Color, ColorStyle] | null = null;
+
+  if (props.interactive && typeof props.interactive === "boolean") {
+    interactive = "fill";
+  } else if (typeof props.interactive === "string") {
+    if (
+      typeof props.interactive === "string" &&
+      props.interactive.includes("_")
+    ) {
+      colorway = props.interactive.split("_") as [Color, ColorStyle];
+    } else {
+      interactive = props.interactive as InteractiveStyle;
+    }
+  }
+
+  let loading: LoadingVariant | null = null;
+  if (props.loading) {
+    loading = typeof props.loading === "boolean" ? "foreground" : props.loading;
+  }
+
+  return { interactive, colorway, loading };
+};

package/src/components/view/view.module.css

@@ -0,0 +1,11 @@
+.view {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  outline: none;
+  border-style: solid;
+}

package/src/components/view/view.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  colorway,
+  interactiveStyles,
+  surfaceBackgrounds,
+} from "~/stories/data";
+
+import { View, type ViewProps } from ".";
+import { tokens } from "../../styles/tokens";
+import { Surface } from "../surface";
+import { Text } from "../text";
+
+const meta = {
+  title: "View",
+  component: View,
+  parameters: { layout: "centered" },
+  argTypes: {
+    interactive: {
+      control: "select",
+      options: [...interactiveStyles, ...colorway],
+    },
+    loading: {
+      control: "boolean",
+    },
+    "aria-disabled": {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<ViewProps & { "aria-disabled"?: boolean }>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    interactive: "fill",
+    loading: false,
+  },
+  render: (args) => (
+    <View
+      {...args}
+      style={{
+        paddingInline: tokens.space16,
+        height: tokens.space32,
+        justifyContent: "center",
+      }}
+    >
+      Hello world
+    </View>
+  ),
+};
+
+export const Colorway: Story = {
+  args: {
+    interactive: "primary_fill",
+    loading: false,
+  },
+  argTypes: {
+    interactive: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => (
+    <View
+      {...args}
+      style={{
+        paddingInline: tokens.space16,
+        height: tokens.space32,
+        justifyContent: "center",
+      }}
+    >
+      Hello world
+    </View>
+  ),
+};
+
+export const AllInteractiveStyles: Story = {
+  argTypes: {
+    interactive: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    loading: false,
+  },
+  render: (args) => (
+    <View
+      style={{
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: tokens.space8,
+      }}
+    >
+      {surfaceBackgrounds.map((background) => (
+        <Surface
+          style={{
+            border: `1px solid ${tokens.outlineDimmest}`,
+            padding: tokens.space16,
+            width: tokens.space256,
+            gap: tokens.space6,
+          }}
+          key={background}
+          background={background}
+        >
+          <p style={{ fontWeight: 500 }}>{background}</p>
+
+          {interactiveStyles.map((variant) => (
+            <View
+              key={variant}
+              interactive={variant}
+              style={{
+                paddingInline: tokens.space16,
+                height: tokens.space32,
+                justifyContent: "center",
+              }}
+              {...args}
+            >
+              <Text>{variant}</Text>
+            </View>
+          ))}
+        </Surface>
+      ))}
+    </View>
+  ),
+};