create-skybridge 0.0.0-dev.fd05cd0 → 0.0.0-dev.ff23e30

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

@@ -1,272 +0,0 @@
-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/utils.ts

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

@@ -1,203 +0,0 @@
-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 />);