@koide-labs/ui 0.0.0

package/src/components/text/text.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AllVariants } from "~/stories/components/all-variants";
+import { sizes } from "~/stories/data";
+import { tokens } from "~/styles/tokens";
+
+import { Text } from ".";
+import { Surface } from "../surface";
+import { View } from "../view";
+
+const meta = {
+  title: "Typography/Text",
+  component: Text,
+  parameters: { layout: "centered" },
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["inherit", "default", "dimmer", "dimmest"],
+    },
+    size: {
+      control: "select",
+      options: sizes,
+    },
+    maxLines: {
+      control: "number",
+    },
+    multiline: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: "md",
+    color: "default",
+  },
+  render: (props) => (
+    <Surface style={{ width: "512px", padding: tokens.space16 }} elevated>
+      <Text {...props}>
+        The quick brown fox jumps over the lazy dog. Swiftly, it leaped across
+        the murmuring stream, its bushy tail a blur of motion. The old badger,
+        observing from its cozy burrow, merely yawned, accustomed to such
+        energetic displays. A curious squirrel chattered from a nearby oak,
+        dropping an acorn in surprise.
+      </Text>
+    </Surface>
+  ),
+};
+
+export const AllSizes: Story = {
+  argTypes: {
+    size: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    color: "default",
+  },
+  render: (args) => (
+    <AllVariants
+      variantName="size"
+      variants={sizes}
+      element={
+        <Text {...args}>The quick brown fox jumps over the lazy dog.</Text>
+      }
+    />
+  ),
+};
+
+export const Multiline: Story = {
+  argTypes: {
+    maxLines: {
+      table: {
+        disable: true,
+      },
+    },
+    multiline: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    color: "default",
+    size: "md",
+  },
+  render: (args) => (
+    <View style={{ maxWidth: tokens.space256 }}>
+      <Text multiline {...args}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Text>
+    </View>
+  ),
+};

package/src/components/theme-provider/index.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, type ThemeProviderProps } from "./theme-provider";
+export { useThemeContext } from "./theme-context";

package/src/components/theme-provider/theme-context.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+
+interface ThemeContextType {
+  /** Current theme  */
+  theme: string;
+
+  /** Set a new current theme */
+  setTheme: (theme: string) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: "light",
+  setTheme: () => {},
+});
+
+export function useThemeContext() {
+  return useContext(ThemeContext);
+}

package/src/components/theme-provider/theme-provider.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { disable } from "~/stories/utils";
+import { tokens } from "~/styles/tokens";
+
+import { ThemeProvider } from ".";
+import { Button } from "../button";
+import { Surface } from "../surface";
+import { Text } from "../text";
+
+const meta = {
+  title: "Theme Provider",
+  component: ThemeProvider,
+  parameters: { layout: "centered" },
+  argTypes: {
+    value: {
+      control: "inline-radio",
+      options: ["light", "dark"],
+    },
+    overrideBody: {
+      control: "boolean",
+    },
+    ...disable(["interactive", "loading"]),
+  },
+} satisfies Meta<typeof ThemeProvider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: "light",
+    defaultValue: "light",
+    overrideBody: true,
+  },
+  render: (args) => (
+    <ThemeProvider {...args}>
+      <Surface elevated style={{ padding: tokens.space16, gap: tokens.space4 }}>
+        <Text>Hello there!</Text>
+        <Button interactive="primary_fill" leftIcon="square-line">
+          A button
+        </Button>
+      </Surface>
+    </ThemeProvider>
+  ),
+};

package/src/components/theme-provider/theme-provider.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+
+import { View, type ViewProps } from "../view";
+import { ThemeContext } from "./theme-context";
+
+export type ThemeProviderProps = ViewProps & {
+  /** Override theme. */
+  value?: string;
+
+  /**
+   * Default theme if you don't want to manage it yourself.
+   * Defaults to user preferences and then light.
+   */
+  defaultValue?: string;
+
+  /**
+   * Override theme set on body.
+   * This prevents mismatched themes on overscroll.
+   * Defaults to true.
+   */
+  overrideBody?: boolean;
+};
+
+export function ThemeProvider({
+  value,
+  defaultValue,
+  overrideBody = true,
+  ...props
+}: ThemeProviderProps) {
+  const isControlled = value !== undefined;
+  const [uncontrolledTheme, setUncontrolledTheme] = useState<string>(
+    () => defaultValue || getDefaultTheme(),
+  );
+
+  const theme = isControlled ? value : uncontrolledTheme;
+  const setTheme = setUncontrolledTheme;
+
+  useEffect(() => {
+    // also set theme of the body b/c overscroll will probably show mismatched themes
+    if (overrideBody) {
+      document.body.dataset.theme = theme;
+    }
+  }, [theme, overrideBody]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <View data-theme={theme} {...props} />
+    </ThemeContext.Provider>
+  );
+}
+
+/**
+ * Try to get theme from user system preferences.
+ * Otherwise just default to "light".
+ * @returns Theme name
+ */
+function getDefaultTheme(): string {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+
+  // try & get theme from user preferences
+  try {
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      return "dark";
+    }
+
+    return "light";
+  } catch (error) {
+    console.error(error);
+  }
+
+  return "light";
+}

package/src/components/timestamp/index.tsx

@@ -0,0 +1,131 @@
+import clsx from "clsx";
+import { format } from "date-fns/format";
+import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
+import { useState } from "react";
+
+import { Text, type TextProps } from "../text";
+import { Tooltip } from "../tooltip";
+import { View } from "../view";
+
+import styles from "./timestamp.module.css";
+
+export const A_LONG_TIME_AGO_DATE = new Date(0);
+
+export interface TimestampProps {
+  date: string | number | Date;
+
+  /**
+   * By default (`'relative'`), the timestamp will show a relative
+   * date and an absolute date on hover.
+   *
+   * Passing `'absolute'` will show the absolute date instead. During server
+   * side rendering, this option is not respected, it will use relative date/time
+   * instead to avoid hydration issues.
+   *
+   * This value can also be set to `'switch'` which will show the relative
+   * date but allow the user to switch to absolute by clicking on the component
+   * by clicking on the timestamp, all "switch" timestamps are synchronized
+   * with a global boolean.
+   */
+  dateFormat?: "relative" | "absolute" | "switch";
+
+  color?: TextProps["color"];
+
+  size?: TextProps["size"];
+
+  className?: string;
+}
+
+export const Timestamp = ({
+  date,
+  dateFormat: initialDateFormat = "relative",
+  color,
+  size,
+  className,
+}: TimestampProps) => {
+  const switchable = initialDateFormat === "switch";
+  const [showAbsolute, setShowAbsolute] = useState(
+    () => initialDateFormat === "absolute",
+  );
+
+  const { triggerDate, contentDate } = getDate(date, showAbsolute);
+  const triggerText = (
+    <Text
+      color={color}
+      size={size}
+      className={clsx(styles["timestamp"], className)}
+    >
+      {triggerDate}
+    </Text>
+  );
+
+  return (
+    <Tooltip
+      trigger={
+        switchable ? (
+          <View
+            render={<button />}
+            className={styles["timestamp_interactive"]}
+            onClick={() => setShowAbsolute((absolute) => !absolute)}
+            interactive="no-fill"
+            role="switch"
+            tabIndex={0}
+            aria-checked={showAbsolute}
+            onKeyDown={(e) => {
+              if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                setShowAbsolute((absolute) => !absolute);
+              }
+            }}
+          >
+            {triggerText}
+          </View>
+        ) : (
+          <span>{triggerText}</span>
+        )
+      }
+    >
+      {contentDate}
+    </Tooltip>
+  );
+};
+
+/**
+ * Get the absolute and relative dates \
+ * Also assigns them to the correct properties (content vs trigger)
+ * @param date Timestamp
+ * @param showAbsolute Show the absolute date if true, relative if false
+ * @returns The dates of the tooltip content and tooltip trigger
+ */
+function getDate(date: TimestampProps["date"], showAbsolute: boolean) {
+  const absoluteDate = toAbsoluteDate(date);
+  const relativeDate = toRelativeDate(date);
+
+  // default is relative date
+  let contentDate = absoluteDate;
+  let triggerDate = relativeDate;
+
+  // if absolute, swap the dates
+  if (showAbsolute) {
+    contentDate = relativeDate;
+    triggerDate = absoluteDate;
+  }
+
+  return {
+    contentDate,
+    triggerDate,
+  };
+}
+
+function toAbsoluteDate(date: TimestampProps["date"]) {
+  return format(new Date(date), "h:mm bbb, MMM dd, yyyy");
+}
+
+function toRelativeDate(date: TimestampProps["date"]) {
+  const asDate = new Date(date);
+  if (asDate <= A_LONG_TIME_AGO_DATE) {
+    return "a long time ago";
+  }
+
+  return formatDistanceToNow(asDate, { addSuffix: true });
+}

package/src/components/timestamp/timestamp.module.css

@@ -0,0 +1,8 @@
+.timestamp {
+  width: fit-content;
+}
+
+.timestamp_interactive {
+  padding-right: var(--space-2);
+  padding-left: var(--space-2);
+}

package/src/components/timestamp/timestamp.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { sizes, textColors } from "~/stories/data";
+import { disable } from "~/stories/utils";
+
+import { Timestamp } from ".";
+
+const meta = {
+  title: "Timestamp",
+  component: Timestamp,
+  parameters: { layout: "centered" },
+  argTypes: {
+    color: {
+      control: "select",
+      options: textColors,
+    },
+    size: {
+      control: "select",
+      options: sizes,
+    },
+    ...disable(["className"]),
+  },
+} satisfies Meta<typeof Timestamp>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    date: new Date(),
+    dateFormat: "relative",
+    size: "md",
+    color: "default",
+  },
+  render: (args) => <Timestamp key={args.dateFormat} {...args} />,
+};

package/src/components/toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, ToastViewport } from "./toast";
+export { useToastManager } from "./use-toast-manager";

package/src/components/toast/toast.module.css

@@ -0,0 +1,163 @@
+.toast__viewport {
+  position: fixed;
+  z-index: 1;
+  margin: 0 auto;
+  inset: auto var(--space-8) var(--space-8) auto;
+  width: var(--space-256);
+
+  @media (width >= 512px) {
+    right: var(--space-16);
+    bottom: var(--space-16);
+  }
+}
+
+.toast {
+  /* we add -custom to prevent collisions with Base UI */
+  --toast-custom-gap: var(--space-12);
+  --toast-custom-peek: var(--space-12);
+  --toast-custom-scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));
+  --toast-custom-shrink: calc(1 - var(--toast-custom-scale));
+  --toast-custom-height: var(--toast-frontmost-height, var(--toast-height));
+  --toast-custom-offset-y: calc(
+    var(--toast-offset-y) * -1 +
+      (var(--toast-index) * var(--toast-custom-gap) * -1) +
+      var(--toast-swipe-movement-y)
+  );
+
+  display: flex;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-8);
+  transform: translateX(var(--toast-swipe-movement-x))
+    translateY(
+      calc(
+        var(--toast-swipe-movement-y) -
+          (var(--toast-index) * var(--toast-custom-peek)) -
+          (var(--toast-custom-shrink) * var(--toast-custom-height))
+      )
+    )
+    scale(var(--toast-custom-scale));
+  transform-origin: bottom center;
+  z-index: calc(1000 - var(--toast-index));
+  transition:
+    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 600ms,
+    height var(--transition-duration-snappy);
+  cursor: default;
+  box-sizing: border-box;
+  margin: 0 0 0 auto;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--border-radius-default);
+  background-clip: padding-box;
+  width: 100%;
+  height: var(--toast-custom-height);
+  user-select: none;
+
+  &[data-expanded] {
+    transform: translateX(var(--toast-swipe-movement-x))
+      translateY(var(--toast-custom-offset-y));
+    height: var(--toast-height);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateY(150%);
+  }
+
+  &[data-limited] {
+    opacity: 0;
+  }
+
+  &[data-ending-style] {
+    opacity: 0;
+  }
+
+  &[data-ending-style][data-swipe-direction="up"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y) - 50%));
+  }
+
+  &[data-ending-style][data-swipe-direction="left"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x) - 50%))
+      translateY(var(--toast-custom-offset-y));
+  }
+
+  &[data-ending-style][data-swipe-direction="right"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x) + 50%))
+      translateY(var(--toast-custom-offset-y));
+  }
+
+  &[data-ending-style][data-swipe-direction="down"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y) + 50%));
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: calc(var(--toast-custom-gap) + 1px);
+    content: "";
+  }
+}
+
+.toast_variant_neutral {
+  border-color: var(--surface-interactive-border);
+  background: var(--surface-background);
+  color: var(--foreground-default);
+}
+
+.toast_variant_colorway {
+  border-color: var(--view-colorway-dimmer);
+  background: var(--view-colorway-dimmest);
+  color: var(--view-colorway-strongest);
+}
+
+.toast__content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  gap: var(--space-16);
+  transition: opacity var(--transition-duration-snappy)
+    var(--transition-timing-function-snappy);
+  padding: var(--space-12);
+  overflow: hidden;
+
+  &[data-behind] {
+    opacity: 0;
+  }
+
+  &[data-expanded] {
+    opacity: 1;
+  }
+}
+
+.toast__header {
+  flex: 1 1 auto;
+  gap: var(--space-4);
+}
+
+.toast__row {
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.toast__title {
+  flex: 1 1 auto;
+}
+
+.toast__description {
+  flex: 1 1 auto;
+}
+
+.toast__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+}

package/src/components/toast/toast.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ToastProvider, ToastViewport, useToastManager } from ".";
+import { Button } from "../button";
+
+const meta = {
+  title: "Toast",
+  component: ToastProvider,
+  parameters: { layout: "centered" },
+  argTypes: {
+    limit: {
+      control: "number",
+    },
+    timeout: {
+      control: "number",
+    },
+  },
+} satisfies Meta<typeof ToastProvider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <ToastProvider {...args}>
+      <ToastButton />
+      <ToastViewport />
+    </ToastProvider>
+  ),
+};
+
+function ToastButton() {
+  const toastManager = useToastManager();
+
+  function createToast() {
+    toastManager.add({
+      title: "Toast created",
+      description:
+        "This is a toast notification. You got rid of that or something.",
+      action: {
+        leftIcon: "arrow-go-back-line",
+        children: "Undo",
+      },
+    });
+  }
+
+  return (
+    <Button interactive onClick={createToast}>
+      Create toast
+    </Button>
+  );
+}