@koide-labs/ui 0.0.0 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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