create-skybridge 0.15.2 → 0.15.3

package/template/web/src/components/ui/shadcn-io/spinner/index.tsx

@@ -0,0 +1,272 @@
+import {
+  LoaderCircleIcon,
+  LoaderIcon,
+  LoaderPinwheelIcon,
+  type LucideProps,
+} from "lucide-react";
+import { cn } from "../../../../utils";
+
+type SpinnerVariantProps = Omit<SpinnerProps, "variant">;
+
+const Default = ({ className, ...props }: SpinnerVariantProps) => (
+  <LoaderIcon className={cn("animate-spin", className)} {...props} />
+);
+
+const Circle = ({ className, ...props }: SpinnerVariantProps) => (
+  <LoaderCircleIcon className={cn("animate-spin", className)} {...props} />
+);
+
+const Pinwheel = ({ className, ...props }: SpinnerVariantProps) => (
+  <LoaderPinwheelIcon className={cn("animate-spin", className)} {...props} />
+);
+
+const CircleFilled = ({
+  className,
+  size = 24,
+  ...props
+}: SpinnerVariantProps) => (
+  <div className="relative" style={{ width: size, height: size }}>
+    <div className="absolute inset-0 rotate-180">
+      <LoaderCircleIcon
+        className={cn("animate-spin", className, "text-foreground opacity-20")}
+        size={size}
+        {...props}
+      />
+    </div>
+    <LoaderCircleIcon
+      className={cn("relative animate-spin", className)}
+      size={size}
+      {...props}
+    />
+  </div>
+);
+
+const Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {
+  return (
+    <svg
+      height={size}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>Loading...</title>
+      <circle cx="4" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="0;ellipsis3.end+0.25s"
+          calcMode="spline"
+          dur="0.6s"
+          id="ellipsis1"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+      <circle cx="12" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="ellipsis1.begin+0.1s"
+          calcMode="spline"
+          dur="0.6s"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+      <circle cx="20" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="ellipsis1.begin+0.2s"
+          calcMode="spline"
+          dur="0.6s"
+          id="ellipsis3"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+    </svg>
+  );
+};
+
+const Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (
+  <svg
+    height={size}
+    stroke="currentColor"
+    viewBox="0 0 44 44"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>Loading...</title>
+    <g fill="none" fillRule="evenodd" strokeWidth="2">
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+    </g>
+  </svg>
+);
+
+const Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (
+  <svg
+    height={size}
+    viewBox="0 0 24 24"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>Loading...</title>
+    <style>{`
+      .spinner-bar {
+        animation: spinner-bars-animation .8s linear infinite;
+        animation-delay: -.8s;
+      }
+      .spinner-bars-2 {
+        animation-delay: -.65s;
+      }
+      .spinner-bars-3 {
+        animation-delay: -0.5s;
+      }
+      @keyframes spinner-bars-animation {
+        0% {
+          y: 1px;
+          height: 22px;
+        }
+        93.75% {
+          y: 5px;
+          height: 14px;
+          opacity: 0.2;
+        }
+      }
+    `}</style>
+    <rect
+      className="spinner-bar"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="1"
+      y="1"
+    />
+    <rect
+      className="spinner-bar spinner-bars-2"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="9"
+      y="1"
+    />
+    <rect
+      className="spinner-bar spinner-bars-3"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="17"
+      y="1"
+    />
+  </svg>
+);
+
+const Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (
+  <svg
+    height={size}
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 100 100"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>Loading...</title>
+    <path
+      d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
+      fill="none"
+      stroke="currentColor"
+      strokeDasharray="205.271142578125 51.317785644531256"
+      strokeLinecap="round"
+      strokeWidth="10"
+      style={{
+        transform: "scale(0.8)",
+        transformOrigin: "50px 50px",
+      }}
+    >
+      <animate
+        attributeName="stroke-dashoffset"
+        dur="2s"
+        keyTimes="0;1"
+        repeatCount="indefinite"
+        values="0;256.58892822265625"
+      />
+    </path>
+  </svg>
+);
+
+export type SpinnerProps = LucideProps & {
+  variant?:
+    | "default"
+    | "circle"
+    | "pinwheel"
+    | "circle-filled"
+    | "ellipsis"
+    | "ring"
+    | "bars"
+    | "infinite";
+};
+
+export const Spinner = ({ variant, ...props }: SpinnerProps) => {
+  switch (variant) {
+    case "circle":
+      return <Circle {...props} />;
+    case "pinwheel":
+      return <Pinwheel {...props} />;
+    case "circle-filled":
+      return <CircleFilled {...props} />;
+    case "ellipsis":
+      return <Ellipsis {...props} />;
+    case "ring":
+      return <Ring {...props} />;
+    case "bars":
+      return <Bars {...props} />;
+    case "infinite":
+      return <Infinite {...props} />;
+    default:
+      return <Default {...props} />;
+  }
+};

package/template/web/src/helpers.ts

@@ -0,0 +1,4 @@
+import { generateHelpers } from "skybridge/web";
+import type { AppType } from "../../server/src/server";
+
+export const { useCallTool, useToolInfo } = generateHelpers<AppType>();

package/template/web/src/index.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/template/web/src/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template/web/src/widgets/pokemon.tsx

@@ -0,0 +1,203 @@
+import { Spinner } from "@/components/ui/shadcn-io/spinner";
+import "@/index.css";
+
+import { mountWidget } from "skybridge/web";
+import { useCallTool, useToolInfo } from "../helpers";
+
+const typesSvgs = {
+  bug: "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/bug.svg",
+  dark: "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/dark.svg",
+  dragon:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/dragon.svg",
+  electric:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/electric.svg",
+  fairy:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/fairy.svg",
+  fighting:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/fighting.svg",
+  fire: "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/fire.svg",
+  flying:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/flying.svg",
+  ghost:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/ghost.svg",
+  grass:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/grass.svg",
+  ground:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/ground.svg",
+  ice: "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/ice.svg",
+  normal:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/normal.svg",
+  poison:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/poison.svg",
+  psychic:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/psychic.svg",
+  rock: "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/rock.svg",
+  steel:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/steel.svg",
+  water:
+    "https://raw.githubusercontent.com/partywhale/pokemon-type-icons/refs/heads/main/icons/water.svg",
+};
+
+const typesToClassnames: Record<
+  string,
+  {
+    background: {
+      widget: string;
+      tiles: string;
+    };
+    text: string;
+  }
+> = {
+  bug: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  dark: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  dragon: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  electric: {
+    background: { widget: "bg-yellow-100", tiles: "bg-yellow-50" },
+    text: "text-yellow-600",
+  },
+  fairy: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  fighting: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  fire: {
+    background: { widget: "bg-orange-100", tiles: "bg-orange-50" },
+    text: "text-orange-600",
+  },
+  flying: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  ghost: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  grass: {
+    background: { widget: "bg-green-100", tiles: "bg-green-50" },
+    text: "text-green-600",
+  },
+  ground: {
+    background: { widget: "bg-[#D7CCC8]", tiles: "bg-[#EFEBE9]" },
+    text: "text-[#6D4C41]",
+  },
+  ice: {
+    background: { widget: "bg-blue-100", tiles: "bg-blue-50" },
+    text: "text-blue-600",
+  },
+  normal: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  poison: {
+    background: { widget: "bg-purple-100", tiles: "bg-purple-50" },
+    text: "text-purple-600",
+  },
+  psychic: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  rock: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  steel: {
+    background: { widget: "bg-gray-100", tiles: "bg-gray-50" },
+    text: "black",
+  },
+  water: {
+    background: { widget: "bg-blue-100", tiles: "bg-blue-50" },
+    text: "text-blue-600",
+  },
+};
+
+function Pokemon() {
+  const toolInfo = useToolInfo<"pokemon">();
+
+  const pokemon = toolInfo.output ?? null;
+
+  const { callTool: captureTool } = useCallTool("capture");
+
+  if (!pokemon) {
+    return (
+      <div className="flex justify-center items-center h-50">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`p-4 rounded-xl flex flex-row gap-4 ${typesToClassnames[pokemon.types[0].id].background.widget}`}
+    >
+      <img
+        src={pokemon.imageUrl}
+        alt={pokemon.name}
+        className="object-contain drop-shadow-2xl"
+      />
+      <div className="flex flex-col gap-2">
+        <Tile color={pokemon.types[0].id}>
+          <div className="flex flex-row justify-between items-center">
+            <div>
+              <h2 className="text-lg font-bold uppercase">{pokemon.name}</h2>
+              <h2
+                className={`text-md font-bold ${typesToClassnames[pokemon.types[0].id].text}`}
+              >
+                {String(pokemon.order).padStart(3, "0")}
+              </h2>
+            </div>
+            <div className="flex flex-row gap-2">
+              {pokemon.types.map(({ id, name }) => (
+                <img
+                  key={id}
+                  src={typesSvgs[id as keyof typeof typesSvgs]}
+                  alt={name}
+                  className="w-6 h-6"
+                />
+              ))}
+            </div>
+          </div>
+          <p className="text-gray-500">{pokemon.description}</p>
+          <button
+            type="button"
+            onClick={() => captureTool({})}
+            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+          >
+            Capture Pokemon
+          </button>
+        </Tile>
+      </div>
+    </div>
+  );
+}
+
+const Tile = ({
+  children,
+  color,
+}: {
+  children: React.ReactNode;
+  color: string;
+}) => {
+  return (
+    <div
+      className={`p-4 rounded-xl ${typesToClassnames[color].background.tiles}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Pokemon;
+
+mountWidget(<Pokemon />);

package/template/web/tsconfig.app.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Shadcn Config */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/template/web/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/web/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/web/vite.config.ts

@@ -0,0 +1,16 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { skybridge } from "skybridge/web";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [skybridge(), react(), tailwindcss()],
+
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});