Add custom UI examples

Author: andreaskienle

package-lock.json

@@ -28,6 +28,7 @@
     "js-yaml": "^4.1.0",
     "oidc-client-ts": "^3.1.0",
     "react": "19.0.0",
+    "react-aria-components": "^1.7.1",
     "react-dom": "19.0.0",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.54.2",

package.json

@@ -0,0 +1,9 @@
+.avatar {
+  width: 2rem;
+  height: 2rem;
+
+  padding: 0;
+  border-radius: 50%;
+
+  font-weight: 700;
+}

src/@ui-components/Avatar/Avatar.module.css

@@ -0,0 +1,20 @@
+import { Button, ButtonProps } from '../Button/Button.tsx';
+import clsx from 'clsx';
+
+import classes from './Avatar.module.css';
+
+export interface AvatarProps extends Omit<ButtonProps, 'children'> {
+  initials?: string;
+}
+
+export function Avatar({ initials, className, ...rest }: AvatarProps) {
+  return (
+    <Button
+      design="primary"
+      className={clsx(classes.avatar, className)}
+      {...rest}
+    >
+      {initials}
+    </Button>
+  );
+}

src/@ui-components/Avatar/Avatar.tsx

@@ -0,0 +1,46 @@
+.button {
+  height: 2.25rem;
+
+  border: 1px solid;
+  border-radius: 0.375em;
+  margin: 0;
+  padding: 0.5em 0.75em;
+
+  font-size: var(--mcp-font-size);
+
+  outline: none;
+
+
+  &[data-pressed] {
+    outline: 2px solid var(--mcp-color-outline-focus);
+    outline-offset: -1px;
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--mcp-color-outline-focus);
+    outline-offset: -1px;
+  }
+
+
+  /** Design: Default */
+  &[data-mcp-button-design="default"] {
+    background-color: var(--mcp-color-default);
+    border-color: var(--mcp-color-default-border);
+    color: var(--mcp-color-text-dark);
+
+    &[data-hovered] {
+      background-color: var(--mcp-color-default-hover);
+    }
+  }
+
+  /** Design: Primary */
+  &[data-mcp-button-design="primary"] {
+    background-color: var(--mcp-color-primary);
+    border-color: var(--mcp-color-primary-border);
+    color: var(--mcp-color-white);
+
+    &[data-hovered] {
+      background-color: var(--mcp-color-primary-hover);
+    }
+  }
+}

src/@ui-components/Button/Button.module.css

@@ -0,0 +1,29 @@
+import {
+  Button as ButtonBase,
+  ButtonProps as ButtonBaseProps,
+} from 'react-aria-components';
+
+import clsx from 'clsx';
+
+import classes from './Button.module.css';
+
+export interface ButtonProps extends ButtonBaseProps {
+  design?: 'default' | 'primary';
+}
+
+export function Button({
+  design = 'default',
+  className,
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    <ButtonBase
+      className={clsx(classes.button, className)}
+      data-mcp-button-design={design}
+      {...rest}
+    >
+      {children}
+    </ButtonBase>
+  );
+}

src/@ui-components/Button/Button.tsx

@@ -0,0 +1,18 @@
+.svg {
+  width: 1rem;
+  height: 1rem;
+
+  fill: var(--mcp-color-text-dark);
+
+  &[data-mcp-icon-design="warning"] {
+    fill: var(--mcp-color-text-warning);
+  }
+
+  &[data-mcp-icon-design="negative"] {
+    fill: var(--mcp-color-text-negative);
+  }
+
+  &[data-mcp-icon-design="positive"] {
+    fill: var(--mcp-color-text-positive);
+  }
+}

src/@ui-components/Icon/Icon.module.css

@@ -0,0 +1,31 @@
+import IconPaths from './IconPaths.ts';
+
+import classes from './Icon.module.css';
+import clsx from 'clsx';
+
+export interface IconProps {
+  src: keyof typeof IconPaths;
+  design?: 'neutral' | 'positive' | 'negative' | 'warning';
+  alt?: string;
+  className?: string;
+}
+
+export function Icon({ design = 'neutral', src, alt, className }: IconProps) {
+  return (
+    <svg
+      className={clsx(classes.svg, className)}
+      viewBox="0 0 512 512"
+      role="presentation"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      data-mcp-icon-design={design}
+      aria-label={alt}
+    >
+      <g role="presentation">
+        <path d={IconPaths[src]?.path} />
+      </g>
+    </svg>
+  );
+}

src/@ui-components/Icon/Icon.tsx

@@ -0,0 +1,12 @@
+import { MenuTrigger } from 'react-aria-components';
+
+import { ReactNode } from 'react';
+
+export interface MenuProps {
+  /** Any button (e.g. `MenuButton` or `Button`) and `MenuList` */
+  children: ReactNode;
+}
+
+export function Menu({ children }: MenuProps) {
+  return <MenuTrigger>{children}</MenuTrigger>;
+}