@koide-labs/ui 0.0.0

package/src/components/alert-dialog/index.tsx

@@ -0,0 +1,138 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import clsx from "clsx";
+import type { ComponentProps } from "react";
+
+import { Button, type ButtonProps } from "../button";
+import type { BaseDialogProps } from "../dialog";
+import { Surface } from "../surface";
+import { Text } from "../text";
+import { View } from "../view";
+
+import transitionStyles from "../../styles/transitions.module.css";
+import dialogStyles from "../dialog/dialog.module.css";
+import styles from "./alert-dialog.module.css";
+
+/**
+ * General guidance:
+ *
+ * Should you have nested modals? Absolutely not. It's confusing to navigate and
+ * obliterates the stacking context by putting multiple root surfaces on top of
+ * each other.
+ *
+ * Should you have payloads? Probably not... Currently unsupported but that
+ * style of generalization feels kind of anti-composition
+ */
+
+export type AlertDialogProps = ComponentProps<
+  typeof AlertDialogPrimitive.Root
+> &
+  BaseDialogProps & {
+    /**
+     *
+     * The actions to display in the alert dialog. You must have at least two
+     * actions. By default, actions will be `interactive` and the last action will
+     * have `colorway` "negative_fill".
+     *
+     */
+    actions: Array<ButtonProps>;
+  };
+
+export function AlertDialog({
+  title,
+  description,
+  children,
+  actions,
+  trigger,
+  width = "md",
+  background = "root",
+  centered = false,
+  className,
+  ...props
+}: AlertDialogProps) {
+  if (actions.length < 2) {
+    console.error("You must have at least two actions.");
+  }
+
+  return (
+    <AlertDialogPrimitive.Root {...props}>
+      {trigger ? <AlertDialogPrimitive.Trigger render={trigger} /> : null}
+      <AlertDialogPrimitive.Portal>
+        <AlertDialogPrimitive.Backdrop
+          className={clsx(
+            dialogStyles["dialog__backdrop"],
+            transitionStyles["transition_opacity"],
+          )}
+        />
+        <AlertDialogPrimitive.Popup
+          className={clsx(
+            dialogStyles["dialog__popup"],
+            centered && dialogStyles["dialog__popup_centered"],
+            transitionStyles["transition_scale"],
+          )}
+        >
+          <Surface
+            background={background}
+            className={clsx(
+              dialogStyles["dialog__content"],
+              dialogStyles[`dialog__content_width_${width}`],
+              className,
+            )}
+          >
+            {title || description ? (
+              <View className={dialogStyles["dialog__header"]}>
+                {title ? (
+                  <Text render={<AlertDialogPrimitive.Title />} size="2xl">
+                    {title}
+                  </Text>
+                ) : null}
+                {description ? (
+                  <Text
+                    multiline
+                    color="dimmer"
+                    render={<AlertDialogPrimitive.Description />}
+                  >
+                    {description}
+                  </Text>
+                ) : null}
+              </View>
+            ) : null}
+            {children}
+            <View className={styles["alert-dialog__actions"]}>
+              {actions.map(({ children, ...action }, i) => (
+                <AlertDialogClose
+                  key={i}
+                  {...getButtonProps(action, i + 1 === actions.length)}
+                >
+                  {children}
+                </AlertDialogClose>
+              ))}
+            </View>
+          </Surface>
+        </AlertDialogPrimitive.Popup>
+      </AlertDialogPrimitive.Portal>
+    </AlertDialogPrimitive.Root>
+  );
+}
+
+export function AlertDialogClose(props: ButtonProps) {
+  return <AlertDialogPrimitive.Close render={<Button {...props} />} />;
+}
+
+/**
+ * Sensible defaults for actions (buttons)
+ * @param props Action provided by AlertDialog
+ * @param isLast Is this the last action provided in the array?
+ * @returns Props with defaults
+ */
+function getButtonProps(props: ButtonProps, isLast?: boolean): ButtonProps {
+  if (isLast) {
+    return {
+      interactive: "negative_fill",
+      ...props,
+    };
+  }
+  return {
+    interactive: true,
+    ...props,
+  };
+}

package/src/components/anchor/anchor.module.css

@@ -0,0 +1,18 @@
+.anchor {
+  cursor: pointer;
+  color: var(--primary-stronger);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-default);
+  line-height: var(--line-height-default);
+  text-decoration: underline;
+
+  &:visited {
+    color: var(--blurple-stronger);
+  }
+}
+
+.anchor__icon {
+  /* you got me. a magic number in a sea of tokens. */
+  vertical-align: -5%;
+  margin-left: var(--space-2);
+}

package/src/components/anchor/anchor.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import { Anchor } from ".";
+import { Surface } from "../surface";
+import { Text } from "../text";
+
+const meta = {
+  title: "Anchor",
+  component: Anchor,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Anchor>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { href: "https://npham.dev", external: true },
+  render: (props) => (
+    <Surface elevated style={{ padding: tokens.space16 }}>
+      <Text>
+        Visit my amazing <Anchor {...props}>portfolio</Anchor> or perish.
+      </Text>
+    </Surface>
+  ),
+};

package/src/components/anchor/index.tsx

@@ -0,0 +1,45 @@
+import { mergeProps, useRender } from "@base-ui/react";
+
+import { Icon } from "../icon";
+
+import styles from "./anchor.module.css";
+
+export type AnchorProps = useRender.ComponentProps<"a"> & {
+  /**
+   * Open this link in a new tab
+   */
+  external?: boolean;
+};
+
+export function Anchor({ external, render, children, ...props }: AnchorProps) {
+  const element = useRender({
+    defaultTagName: "a",
+    render,
+    props: mergeProps(
+      {
+        className: styles["anchor"],
+        ...(external
+          ? {
+              target: "_blank",
+              rel: "noreferrer",
+            }
+          : {}),
+        children: (
+          <>
+            {children}
+            {external ? (
+              <Icon
+                name="external-link-line"
+                size="sm"
+                className={styles["anchor__icon"]}
+              />
+            ) : null}
+          </>
+        ),
+      },
+      props,
+    ),
+  });
+
+  return element;
+}

package/src/components/avatar/avatar.module.css

@@ -0,0 +1,56 @@
+.avatar {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--outline-dimmest);
+  border-radius: var(--border-radius-round);
+  background-color: var(--background-highest);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+}
+
+.avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar__fallback {
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius-round);
+  width: 100%;
+  height: 100%;
+  color: var(--foreground-dimmest);
+  font-size: calc(var(--avatar-size) / 2.5);
+}
+
+/* Avatar size variants */
+.avatar_size_sm {
+  --avatar-size: var(--space-24);
+}
+
+.avatar_size_md {
+  --avatar-size: var(--space-32);
+}
+
+.avatar_size_lg {
+  --avatar-size: var(--space-40);
+}
+
+.avatar_size_xl {
+  --avatar-size: var(--space-48);
+}
+
+.avatar_size_2xl {
+  --avatar-size: var(--space-56);
+}
+
+.avatar_size_3xl {
+  --avatar-size: var(--space-64);
+}

package/src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AllVariants } from "~/stories/components/all-variants";
+import { sizes } from "~/stories/data";
+
+import { Avatar } from ".";
+
+const meta = {
+  title: "Avatar",
+  component: Avatar,
+  parameters: { layout: "centered" },
+  argTypes: {
+    size: {
+      control: "select",
+      options: sizes,
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    image: "https://avatars.githubusercontent.com/u/146884027?v=4",
+    username: "npham-dev",
+    size: "md",
+  },
+  render: (props) => <Avatar {...props} />,
+};
+
+export const Fallback: Story = {
+  args: {
+    username: "npham-dev",
+    size: "md",
+  },
+  render: (props) => <Avatar {...props} />,
+};
+
+export const AllSizes: Story = {
+  args: {
+    image: "https://avatars.githubusercontent.com/u/146884027?v=4",
+    username: "npham-dev",
+  },
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+  render: (props) => (
+    <AllVariants
+      variantName="size"
+      variants={sizes}
+      element={<Avatar {...props} />}
+      style={{
+        flexDirection: "row",
+      }}
+    />
+  ),
+};

package/src/components/avatar/index.tsx

@@ -0,0 +1,82 @@
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import clsx from "clsx";
+
+import type { Size } from "~/styles/tokens";
+
+import styles from "./avatar.module.css";
+
+export interface AvatarProps extends AvatarPrimitive.Root.Props {
+  /**
+   * Avatar url; if not provided, uses fallback based on username or fullName.
+   */
+  image?: string | null;
+
+  /**
+   * Used for initials if avatar image is not provided.
+   */
+  username: string;
+
+  /**
+   * User's first & last name. Used for initials, takes precedence over username.
+   */
+  fullName?: string;
+
+  /**
+   * Size of the avatar, defaults to "md".
+   */
+  size?: Size;
+}
+
+export function Avatar({
+  image,
+  username,
+  fullName,
+  size = "md",
+  className,
+  ...props
+}: AvatarProps) {
+  const fallback = getAvatarFallback(username, fullName);
+  return (
+    <AvatarPrimitive.Root
+      className={clsx(
+        styles["avatar"],
+        styles[`avatar_size_${size}`],
+        className,
+      )}
+      {...props}
+    >
+      {image ? (
+        <AvatarPrimitive.Image
+          src={image}
+          className={styles["avatar__image"]}
+        />
+      ) : null}
+      <AvatarPrimitive.Fallback className={styles["avatar__fallback"]}>
+        {fallback}
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  );
+}
+
+/**
+ * Create 2 letter avatar fallback (depending on  what is provided) \
+ * Prioritizes full name over usernmae
+ * @param username user selected name
+ * @param fullName real name of the user
+ * @returns 2 letter, uppercase avatar fallback
+ */
+function getAvatarFallback(username: string, fullName?: string) {
+  let fallback = username.substring(0, 2);
+
+  if (fullName) {
+    // if full name w/ lastName is provided, use first and last initials
+    // otherwise use first two letters of the name
+    const [firstName, lastName] = fullName.split(" ");
+    fallback =
+      firstName && lastName
+        ? firstName.charAt(0) + lastName.charAt(0)
+        : fullName.substring(0, 2);
+  }
+
+  return fallback.toLocaleUpperCase();
+}

package/src/components/badge/badge.module.css

@@ -0,0 +1,35 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  cursor: default;
+  border-radius: var(--border-radius-16);
+  background-color: var(--view-colorway-dimmer);
+  padding: var(--space-4) var(--space-8);
+  height: var(--space-24);
+  color: var(--view-colorway-strongest);
+  font-size: var(--font-size-small);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.badge_shiny {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  transition: none;
+  background-image: radial-gradient(
+    circle at top left,
+    var(--view-colorway-dimmest) 34%,
+    var(--view-colorway-dimmer) 50%,
+    var(--view-colorway-dimmest) 66%
+  );
+  background-position: left;
+  background-size: 300% 100%;
+
+  &:hover {
+    transition: background-position 600ms
+      var(--transition-timing-function-chill);
+    background-position: right;
+  }
+}

package/src/components/badge/badge.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { colors } from "~/stories/data";
+import { disable } from "~/stories/utils";
+import { tokens } from "~/styles/tokens";
+
+import { Badge } from ".";
+import { View } from "../view";
+
+const meta = {
+  title: "Badge",
+  component: Badge,
+  parameters: { layout: "centered" },
+  argTypes: {
+    color: {
+      control: "select",
+      options: colors,
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    color: "orange",
+    icon: "sparkling-line",
+    name: "Pro",
+    shiny: true,
+  },
+  render: (args) => <Badge {...args} />,
+};
+
+export const ExampleBadges: Story = {
+  argTypes: {
+    ...disable(["icon", "name", "color", "shiny", "tagline"]),
+  },
+  args: {
+    name: "",
+    color: "primary",
+  },
+  render: () => (
+    <View
+      style={{
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: tokens.space8,
+        maxWidth: tokens.space256,
+      }}
+    >
+      <Badge name="Admin" color="yellow" />
+      <Badge name="Detective" color="green" />
+      <Badge icon="checkbox-circle-line" name="Verified" color="green" />
+      <Badge name="Language Jammer" color="purple" />
+      <Badge name="Community Monitor" color="teal" />
+    </View>
+  ),
+};

package/src/components/badge/index.tsx

@@ -0,0 +1,71 @@
+import { mergeProps, useRender } from "@base-ui/react";
+import { clsx } from "clsx";
+
+import { Icon } from "../icon";
+import type { IconName } from "../icon/icon-names";
+import { Text } from "../text";
+import { Tooltip } from "../tooltip";
+import { View, type Color } from "../view";
+
+import styles from "./badge.module.css";
+
+export interface BadgeProps extends Omit<
+  useRender.ComponentProps<"span">,
+  "children"
+> {
+  /** Optional icon, goes before name */
+  icon?: IconName;
+
+  /** Name of badge to be displayed, goes after icon */
+  name: string;
+
+  /** Communicate purpose with color. Defaults to "primary". */
+  color?: Color;
+
+  /** Add shiny hover effect. */
+  shiny?: boolean;
+
+  /** Tagline of badge. */
+  tagline?: string;
+}
+
+export function Badge({
+  icon,
+  name,
+  color,
+  shiny,
+  tagline,
+  render,
+  ...props
+}: BadgeProps) {
+  const element = useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps(
+      {
+        className: clsx(styles["badge"], shiny && styles["badge_shiny"]),
+        children: (
+          <>
+            {icon ? <Icon name={icon} /> : null}
+            {name}
+          </>
+        ),
+      },
+      props,
+    ),
+  });
+
+  const label = <View color={color}>{element}</View>;
+
+  if (!tagline) {
+    return label;
+  }
+
+  return (
+    <Tooltip trigger={label}>
+      <Text size="sm" multiline>
+        {tagline}
+      </Text>
+    </Tooltip>
+  );
+}

package/src/components/button/button.module.css

@@ -0,0 +1,42 @@
+.button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-8);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-default);
+  padding-inline: var(--button-padding-inline);
+  height: var(--button-height);
+  white-space: nowrap;
+}
+
+.button_height_sm {
+  --button-padding-inline: var(--space-12);
+  --button-height: var(--space-28);
+}
+
+.button_height_md {
+  --button-padding-inline: var(--space-16);
+  --button-height: var(--space-32);
+}
+
+.button_height_lg {
+  --button-padding-inline: var(--space-20);
+  --button-height: var(--space-40);
+}
+
+.button_height_xl {
+  --button-padding-inline: var(--space-24);
+  --button-height: var(--space-48);
+}
+
+.button_height_2xl {
+  --button-padding-inline: var(--space-28);
+  --button-height: var(--space-56);
+}
+
+.button_height_3xl {
+  --button-padding-inline: var(--space-32);
+  --button-height: var(--space-64);
+}