refactor: merge playground into webui

2025-03-07 01:50:53 +08:00
parent 383e6340ea
commit 27cdcdef58
100 changed files with 4119 additions and 3757 deletions
--- a/apps/webui/src/components/ui/context-menu.tsx
+++ b/apps/webui/src/components/ui/context-menu.tsx
@@ -1,99 +1,113 @@
-import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
-import { splitProps } from "solid-js"
+import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
+import { splitProps } from 'solid-js';

-import * as ContextMenuPrimitive from "@kobalte/core/context-menu"
-import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as ContextMenuPrimitive from '@kobalte/core/context-menu';
+import type { PolymorphicProps } from '@kobalte/core/polymorphic';

-import { cn } from "~/styles/utils"
+import { cn } from '~/utils/styles';

-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-const ContextMenuSub = ContextMenuPrimitive.Sub
-const ContextMenuGroup = ContextMenuPrimitive.Group
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;

-const ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (props) => {
-  return <ContextMenuPrimitive.Root gutter={4} {...props} />
-}
+const ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (
+  props
+) => {
+  return <ContextMenuPrimitive.Root gutter={4} {...props} />;
+};

-type ContextMenuContentProps<T extends ValidComponent = "div"> =
+type ContextMenuContentProps<T extends ValidComponent = 'div'> =
  ContextMenuPrimitive.ContextMenuContentProps<T> & {
-    class?: string | undefined
-  }
+    class?: string | undefined;
+  };

-const ContextMenuContent = <T extends ValidComponent = "div">(
+const ContextMenuContent = <T extends ValidComponent = 'div'>(
  props: PolymorphicProps<T, ContextMenuContentProps<T>>
 ) => {
-  const [local, others] = splitProps(props as ContextMenuContentProps, ["class"])
+  const [local, others] = splitProps(props as ContextMenuContentProps, [
+    'class',
+  ]);
  return (
    <ContextMenuPrimitive.Portal>
      <ContextMenuPrimitive.Content
        class={cn(
-          "z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in",
+          'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
          local.class
        )}
        {...others}
      />
    </ContextMenuPrimitive.Portal>
-  )
-}
+  );
+};

-type ContextMenuItemProps<T extends ValidComponent = "div"> =
+type ContextMenuItemProps<T extends ValidComponent = 'div'> =
  ContextMenuPrimitive.ContextMenuItemProps<T> & {
-    class?: string | undefined
-  }
+    class?: string | undefined;
+  };

-const ContextMenuItem = <T extends ValidComponent = "div">(
+const ContextMenuItem = <T extends ValidComponent = 'div'>(
  props: PolymorphicProps<T, ContextMenuItemProps<T>>
 ) => {
-  const [local, others] = splitProps(props as ContextMenuItemProps, ["class"])
+  const [local, others] = splitProps(props as ContextMenuItemProps, ['class']);
  return (
    <ContextMenuPrimitive.Item
      class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        local.class
      )}
      {...others}
    />
-  )
-}
+  );
+};

-const ContextMenuShortcut: Component<ComponentProps<"span">> = (props) => {
-  const [local, others] = splitProps(props, ["class"])
-  return <span class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)} {...others} />
-}
-
-type ContextMenuSeparatorProps<T extends ValidComponent = "hr"> =
-  ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {
-    class?: string | undefined
-  }
-
-const ContextMenuSeparator = <T extends ValidComponent = "hr">(
-  props: PolymorphicProps<T, ContextMenuSeparatorProps<T>>
-) => {
-  const [local, others] = splitProps(props as ContextMenuSeparatorProps, ["class"])
+const ContextMenuShortcut: Component<ComponentProps<'span'>> = (props) => {
+  const [local, others] = splitProps(props, ['class']);
  return (
-    <ContextMenuPrimitive.Separator
-      class={cn("-mx-1 my-1 h-px bg-muted", local.class)}
+    <span
+      class={cn('ml-auto text-xs tracking-widest opacity-60', local.class)}
      {...others}
    />
-  )
-}
+  );
+};

-type ContextMenuSubTriggerProps<T extends ValidComponent = "div"> =
+type ContextMenuSeparatorProps<T extends ValidComponent = 'hr'> =
+  ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {
+    class?: string | undefined;
+  };
+
+const ContextMenuSeparator = <T extends ValidComponent = 'hr'>(
+  props: PolymorphicProps<T, ContextMenuSeparatorProps<T>>
+) => {
+  const [local, others] = splitProps(props as ContextMenuSeparatorProps, [
+    'class',
+  ]);
+  return (
+    <ContextMenuPrimitive.Separator
+      class={cn('-mx-1 my-1 h-px bg-muted', local.class)}
+      {...others}
+    />
+  );
+};
+
+type ContextMenuSubTriggerProps<T extends ValidComponent = 'div'> =
  ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {
-    class?: string | undefined
-    children?: JSX.Element
-  }
+    class?: string | undefined;
+    children?: JSX.Element;
+  };

-const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
+const ContextMenuSubTrigger = <T extends ValidComponent = 'div'>(
  props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>
 ) => {
-  const [local, others] = splitProps(props as ContextMenuSubTriggerProps, ["class", "children"])
+  const [local, others] = splitProps(props as ContextMenuSubTriggerProps, [
+    'class',
+    'children',
+  ]);
  return (
    <ContextMenuPrimitive.SubTrigger
      class={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
        local.class
      )}
      {...others}
@@ -112,43 +126,48 @@ const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </ContextMenuPrimitive.SubTrigger>
-  )
-}
+  );
+};

-type ContextMenuSubContentProps<T extends ValidComponent = "div"> =
+type ContextMenuSubContentProps<T extends ValidComponent = 'div'> =
  ContextMenuPrimitive.ContextMenuSubContentProps<T> & {
-    class?: string | undefined
-  }
+    class?: string | undefined;
+  };

-const ContextMenuSubContent = <T extends ValidComponent = "div">(
+const ContextMenuSubContent = <T extends ValidComponent = 'div'>(
  props: PolymorphicProps<T, ContextMenuSubContentProps<T>>
 ) => {
-  const [local, others] = splitProps(props as ContextMenuSubContentProps, ["class"])
+  const [local, others] = splitProps(props as ContextMenuSubContentProps, [
+    'class',
+  ]);
  return (
    <ContextMenuPrimitive.SubContent
      class={cn(
-        "z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in",
+        'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
        local.class
      )}
      {...others}
    />
-  )
-}
+  );
+};

-type ContextMenuCheckboxItemProps<T extends ValidComponent = "div"> =
+type ContextMenuCheckboxItemProps<T extends ValidComponent = 'div'> =
  ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {
-    class?: string | undefined
-    children?: JSX.Element
-  }
+    class?: string | undefined;
+    children?: JSX.Element;
+  };

-const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
+const ContextMenuCheckboxItem = <T extends ValidComponent = 'div'>(
  props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>
 ) => {
-  const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, ["class", "children"])
+  const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, [
+    'class',
+    'children',
+  ]);
  return (
    <ContextMenuPrimitive.CheckboxItem
      class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        local.class
      )}
      {...others}
@@ -171,40 +190,45 @@ const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
      </span>
      {local.children}
    </ContextMenuPrimitive.CheckboxItem>
-  )
-}
+  );
+};

-type ContextMenuGroupLabelProps<T extends ValidComponent = "span"> =
+type ContextMenuGroupLabelProps<T extends ValidComponent = 'span'> =
  ContextMenuPrimitive.ContextMenuGroupLabelProps<T> & {
-    class?: string | undefined
-  }
+    class?: string | undefined;
+  };

-const ContextMenuGroupLabel = <T extends ValidComponent = "span">(
+const ContextMenuGroupLabel = <T extends ValidComponent = 'span'>(
  props: PolymorphicProps<T, ContextMenuGroupLabelProps<T>>
 ) => {
-  const [local, others] = splitProps(props as ContextMenuGroupLabelProps, ["class"])
+  const [local, others] = splitProps(props as ContextMenuGroupLabelProps, [
+    'class',
+  ]);
  return (
    <ContextMenuPrimitive.GroupLabel
-      class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
+      class={cn('px-2 py-1.5 font-semibold text-sm', local.class)}
      {...others}
    />
-  )
-}
+  );
+};

-type ContextMenuRadioItemProps<T extends ValidComponent = "div"> =
+type ContextMenuRadioItemProps<T extends ValidComponent = 'div'> =
  ContextMenuPrimitive.ContextMenuRadioItemProps<T> & {
-    class?: string | undefined
-    children?: JSX.Element
-  }
+    class?: string | undefined;
+    children?: JSX.Element;
+  };

-const ContextMenuRadioItem = <T extends ValidComponent = "div">(
+const ContextMenuRadioItem = <T extends ValidComponent = 'div'>(
  props: PolymorphicProps<T, ContextMenuRadioItemProps<T>>
 ) => {
-  const [local, others] = splitProps(props as ContextMenuRadioItemProps, ["class", "children"])
+  const [local, others] = splitProps(props as ContextMenuRadioItemProps, [
+    'class',
+    'children',
+  ]);
  return (
    <ContextMenuPrimitive.RadioItem
      class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        local.class
      )}
      {...others}
@@ -227,8 +251,8 @@ const ContextMenuRadioItem = <T extends ValidComponent = "div">(
      </span>
      {local.children}
    </ContextMenuPrimitive.RadioItem>
-  )
-}
+  );
+};

 export {
  ContextMenu,
@@ -245,5 +269,5 @@ export {
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuRadioGroup,
-  ContextMenuRadioItem
-}
+  ContextMenuRadioItem,
+};