@hasna/skills 0.0.3 → 0.1.1

package/src/cli/components/SearchView.tsx

@@ -1,108 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Box, Text, useInput } from "ink";
-import TextInput from "ink-text-input";
-import SelectInput from "ink-select-input";
-import { searchSkills, SkillMeta } from "../../lib/registry.js";
-
-interface SearchViewProps {
-  selected: Set<string>;
-  onToggle: (name: string) => void;
-  onConfirm: () => void;
-  onBack: () => void;
-}
-
-export function SearchView({
-  selected,
-  onToggle,
-  onConfirm,
-  onBack,
-}: SearchViewProps) {
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState<SkillMeta[]>([]);
-  const [mode, setMode] = useState<"search" | "select">("search");
-
-  useEffect(() => {
-    if (query.length >= 2) {
-      setResults(searchSkills(query));
-    } else {
-      setResults([]);
-    }
-  }, [query]);
-
-  useInput((input, key) => {
-    if (key.escape) {
-      if (mode === "select") {
-        setMode("search");
-      } else {
-        onBack();
-      }
-    }
-    if (key.downArrow && mode === "search" && results.length > 0) {
-      setMode("select");
-    }
-  });
-
-  const items = [
-    { label: "\u2190 Back", value: "__back__" },
-    ...results.map((s) => ({
-      label: `${selected.has(s.name) ? "[x]" : "[ ]"} ${s.displayName} - ${s.description}`,
-      value: s.name,
-    })),
-  ];
-
-  if (selected.size > 0) {
-    items.push({ label: "", value: "__sep__" });
-    items.push({
-      label: `\u2713 Install selected (${selected.size})`,
-      value: "__confirm__",
-    });
-  }
-
-  const handleSelect = (item: { value: string }) => {
-    if (item.value === "__back__") {
-      onBack();
-    } else if (item.value === "__confirm__") {
-      onConfirm();
-    } else if (item.value !== "__sep__") {
-      onToggle(item.value);
-    }
-  };
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text bold>Search: </Text>
-        <TextInput
-          value={query}
-          onChange={setQuery}
-          placeholder="Type to search skills..."
-        />
-      </Box>
-
-      {query.length < 2 && (
-        <Text dimColor>Type at least 2 characters to search</Text>
-      )}
-
-      {query.length >= 2 && results.length === 0 && (
-        <Text dimColor>No skills found for "{query}"</Text>
-      )}
-
-      {results.length > 0 && (
-        <Box flexDirection="column">
-          <Text dimColor marginBottom={1}>
-            Found {results.length} skill(s):
-          </Text>
-          <SelectInput items={items} onSelect={handleSelect} />
-        </Box>
-      )}
-
-      {selected.size > 0 && (
-        <Box marginTop={1}>
-          <Text dimColor>
-            Selected: {Array.from(selected).join(", ")}
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-}

package/src/cli/components/SkillSelect.tsx

@@ -1,92 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text } from "ink";
-import SelectInput from "ink-select-input";
-import { SkillMeta } from "../../lib/registry.js";
-
-interface SkillSelectProps {
-  skills: SkillMeta[];
-  selected: Set<string>;
-  onToggle: (name: string) => void;
-  onConfirm: () => void;
-  onBack: () => void;
-}
-
-export function SkillSelect({
-  skills,
-  selected,
-  onToggle,
-  onConfirm,
-  onBack,
-}: SkillSelectProps) {
-  const items = [
-    { label: "\u2190 Back to categories", value: "__back__" },
-    ...skills.map((s) => ({
-      label: `${selected.has(s.name) ? "[x]" : "[ ]"} ${s.displayName}`,
-      value: s.name,
-    })),
-    { label: "", value: "__sep__" },
-    {
-      label: `\u2713 Install selected (${selected.size})`,
-      value: "__confirm__",
-    },
-  ];
-
-  const handleSelect = (item: { value: string }) => {
-    if (item.value === "__back__") {
-      onBack();
-    } else if (item.value === "__confirm__") {
-      if (selected.size > 0) {
-        onConfirm();
-      }
-    } else if (item.value !== "__sep__") {
-      onToggle(item.value);
-    }
-  };
-
-  // Find the current skill for description
-  const [highlightedIndex, setHighlightedIndex] = useState(1);
-  const currentSkill = skills[highlightedIndex - 1];
-
-  return (
-    <Box flexDirection="column">
-      <Text bold marginBottom={1}>
-        Select skills (enter to toggle, then confirm):
-      </Text>
-
-      <Box flexDirection="row">
-        <Box flexDirection="column" width="50%">
-          <SelectInput
-            items={items}
-            onSelect={handleSelect}
-            onHighlight={(item) => {
-              const idx = skills.findIndex((s) => s.name === item.value);
-              if (idx >= 0) setHighlightedIndex(idx + 1);
-            }}
-          />
-        </Box>
-
-        <Box flexDirection="column" marginLeft={2} width="50%">
-          {currentSkill && (
-            <>
-              <Text bold color="cyan">
-                {currentSkill.displayName}
-              </Text>
-              <Text>{currentSkill.description}</Text>
-              <Text dimColor>
-                Tags: {currentSkill.tags.join(", ")}
-              </Text>
-            </>
-          )}
-        </Box>
-      </Box>
-
-      {selected.size > 0 && (
-        <Box marginTop={1}>
-          <Text dimColor>
-            Selected: {Array.from(selected).join(", ")}
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-}