@koide-labs/ui 0.0.0 → 0.0.2

package/src/components/toast/toast.tsx

@@ -1,104 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,44 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,11 +0,0 @@
-.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

@@ -1,131 +0,0 @@
-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>
-  ),
-};