@hasna/hooks 0.0.1 → 0.0.2

package/src/cli/components/App.tsx

@@ -1,191 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useApp, useInput } from "ink";
-import SelectInput from "ink-select-input";
-import { Header } from "./Header.js";
-import { CategorySelect } from "./CategorySelect.js";
-import { HookSelect } from "./HookSelect.js";
-import { SearchView } from "./SearchView.js";
-import { InstallProgress } from "./InstallProgress.js";
-import {
-  getHooksByCategory,
-  HookMeta,
-  Category,
-} from "../../lib/registry.js";
-import { InstallResult } from "../../lib/installer.js";
-
-type View = "main" | "browse" | "search" | "hooks" | "installing" | "done";
-
-interface AppProps {
-  initialHooks?: string[];
-  overwrite?: boolean;
-}
-
-export function App({ initialHooks, overwrite = false }: AppProps) {
-  const { exit } = useApp();
-  const [view, setView] = useState<View>(
-    initialHooks?.length ? "installing" : "main"
-  );
-  const [category, setCategory] = useState<Category | null>(null);
-  const [selected, setSelected] = useState<Set<string>>(
-    new Set(initialHooks || [])
-  );
-  const [results, setResults] = useState<InstallResult[]>([]);
-
-  useInput((input, key) => {
-    if (key.escape) {
-      if (view === "main") {
-        exit();
-      }
-    }
-    if (input === "q") {
-      exit();
-    }
-  });
-
-  const handleToggle = (name: string) => {
-    const newSelected = new Set(selected);
-    if (newSelected.has(name)) {
-      newSelected.delete(name);
-    } else {
-      newSelected.add(name);
-    }
-    setSelected(newSelected);
-  };
-
-  const handleConfirm = () => {
-    if (selected.size > 0) {
-      setView("installing");
-    }
-  };
-
-  const handleComplete = (installResults: InstallResult[]) => {
-    setResults(installResults);
-    setView("done");
-  };
-
-  const mainMenuItems = [
-    { label: "Browse by category", value: "browse" },
-    { label: "Search hooks", value: "search" },
-    { label: "Exit", value: "exit" },
-  ];
-
-  const handleMainSelect = (item: { value: string }) => {
-    if (item.value === "exit") {
-      exit();
-    } else {
-      setView(item.value as View);
-    }
-  };
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Header
-        title="Hooks"
-        subtitle="Install Claude Code hooks for your project"
-      />
-
-      {view === "main" && (
-        <Box flexDirection="column">
-          <Text marginBottom={1}>What would you like to do?</Text>
-          <SelectInput items={mainMenuItems} onSelect={handleMainSelect} />
-          <Box marginTop={1}>
-            <Text dimColor>Press q to quit</Text>
-          </Box>
-        </Box>
-      )}
-
-      {view === "browse" && !category && (
-        <CategorySelect
-          onSelect={(cat) => {
-            setCategory(cat as Category);
-            setView("hooks");
-          }}
-          onBack={() => setView("main")}
-        />
-      )}
-
-      {view === "hooks" && category && (
-        <HookSelect
-          hooks={getHooksByCategory(category)}
-          selected={selected}
-          onToggle={handleToggle}
-          onConfirm={handleConfirm}
-          onBack={() => {
-            setCategory(null);
-            setView("browse");
-          }}
-        />
-      )}
-
-      {view === "search" && (
-        <SearchView
-          selected={selected}
-          onToggle={handleToggle}
-          onConfirm={handleConfirm}
-          onBack={() => setView("main")}
-        />
-      )}
-
-      {view === "installing" && (
-        <InstallProgress
-          hooks={Array.from(selected)}
-          overwrite={overwrite}
-          onComplete={handleComplete}
-        />
-      )}
-
-      {view === "done" && (
-        <Box flexDirection="column">
-          <Text bold color="green" marginBottom={1}>
-            Installation complete!
-          </Text>
-
-          {results.filter((r) => r.success).length > 0 && (
-            <Box flexDirection="column" marginBottom={1}>
-              <Text bold>Installed:</Text>
-              {results
-                .filter((r) => r.success)
-                .map((r) => (
-                  <Text key={r.hook} color="green">
-                    {"\u2713"} {r.hook}
-                  </Text>
-                ))}
-            </Box>
-          )}
-
-          {results.filter((r) => !r.success).length > 0 && (
-            <Box flexDirection="column" marginBottom={1}>
-              <Text bold color="red">
-                Failed:
-              </Text>
-              {results
-                .filter((r) => !r.success)
-                .map((r) => (
-                  <Text key={r.hook} color="red">
-                    {"\u2717"} {r.hook}: {r.error}
-                  </Text>
-                ))}
-            </Box>
-          )}
-
-          <Box marginTop={1} flexDirection="column">
-            <Text bold>What happened:</Text>
-            <Text>1. Hook source copied to .hooks/</Text>
-            <Text>2. Hook registered in ~/.claude/settings.json</Text>
-            <Text>3. Ready to use in Claude Code sessions</Text>
-          </Box>
-
-          <Box marginTop={1} flexDirection="column">
-            <Text bold>Next steps:</Text>
-            <Text dimColor>  hooks list --registered  Check active hooks</Text>
-            <Text dimColor>  hooks info {"<name>"}       View hook details</Text>
-          </Box>
-
-          <Box marginTop={1}>
-            <Text dimColor>Press q to exit</Text>
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
-}

package/src/cli/components/CategorySelect.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import SelectInput from "ink-select-input";
-import { CATEGORIES, getHooksByCategory } from "../../lib/registry.js";
-
-interface CategorySelectProps {
-  onSelect: (category: string) => void;
-  onBack?: () => void;
-}
-
-export function CategorySelect({ onSelect, onBack }: CategorySelectProps) {
-  const items = CATEGORIES.map((cat) => ({
-    label: `${cat} (${getHooksByCategory(cat).length})`,
-    value: cat,
-  }));
-
-  if (onBack) {
-    items.unshift({ label: "\u2190 Back", value: "__back__" });
-  }
-
-  const handleSelect = (item: { value: string }) => {
-    if (item.value === "__back__" && onBack) {
-      onBack();
-    } else {
-      onSelect(item.value);
-    }
-  };
-
-  return (
-    <Box flexDirection="column">
-      <Text bold marginBottom={1}>
-        Select a category:
-      </Text>
-      <SelectInput items={items} onSelect={handleSelect} />
-    </Box>
-  );
-}

package/src/cli/components/DataTable.tsx

@@ -1,133 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-import { HookMeta } from "../../lib/registry.js";
-
-const COL_CHECK = 5;
-const COL_NAME = 18;
-const COL_VERSION = 9;
-const COL_EVENT = 14;
-const COL_DESC = 40;
-
-function truncate(str: string, max: number): string {
-  return str.length > max ? str.slice(0, max - 3) + "..." : str;
-}
-
-function pad(str: string, width: number): string {
-  return str.length >= width ? str.slice(0, width) : str + " ".repeat(width - str.length);
-}
-
-interface DataTableProps {
-  hooks: HookMeta[];
-  selected: Set<string>;
-  onToggle: (name: string) => void;
-  onConfirm: () => void;
-  onBack: () => void;
-}
-
-export function DataTable({
-  hooks,
-  selected,
-  onToggle,
-  onConfirm,
-  onBack,
-}: DataTableProps) {
-  const [cursor, setCursor] = useState(0);
-
-  useInput((input, key) => {
-    if (key.upArrow) {
-      setCursor((c) => Math.max(0, c - 1));
-    } else if (key.downArrow) {
-      setCursor((c) => Math.min(hooks.length - 1, c + 1));
-    } else if (key.return || input === " ") {
-      if (hooks[cursor]) {
-        onToggle(hooks[cursor].name);
-      }
-    } else if (input === "i" && selected.size > 0) {
-      onConfirm();
-    } else if (key.escape) {
-      onBack();
-    }
-  });
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text bold>
-          Select hooks (up/down to navigate, space/enter to toggle, esc to go back):
-        </Text>
-      </Box>
-
-      {/* Header */}
-      <Box>
-        <Text dimColor>
-          {pad("", COL_CHECK)}
-          {pad("Name", COL_NAME)}
-          {pad("Version", COL_VERSION)}
-          {pad("Event", COL_EVENT)}
-          {"Description"}
-        </Text>
-      </Box>
-      <Box marginBottom={0}>
-        <Text dimColor>
-          {pad("─".repeat(COL_CHECK - 1), COL_CHECK)}
-          {pad("─".repeat(COL_NAME - 1), COL_NAME)}
-          {pad("─".repeat(COL_VERSION - 1), COL_VERSION)}
-          {pad("─".repeat(COL_EVENT - 1), COL_EVENT)}
-          {"─".repeat(COL_DESC)}
-        </Text>
-      </Box>
-
-      {/* Rows */}
-      {hooks.map((hook, i) => {
-        const isHighlighted = i === cursor;
-        const isSelected = selected.has(hook.name);
-        const check = isSelected ? "[x]" : "[ ]";
-
-        return (
-          <Box key={hook.name}>
-            <Text
-              bold={isHighlighted}
-              inverse={isHighlighted}
-            >
-              {pad(` ${check}`, COL_CHECK)}
-              {pad(hook.displayName, COL_NAME)}
-              {pad(hook.version, COL_VERSION)}
-              {pad(hook.event, COL_EVENT)}
-              {truncate(hook.description, COL_DESC)}
-            </Text>
-          </Box>
-        );
-      })}
-
-      {/* Footer */}
-      <Box marginTop={1} flexDirection="row" gap={2}>
-        <Text dimColor>[esc] Back</Text>
-        {selected.size > 0 && (
-          <Text color="green" bold>
-            {selected.size} selected
-          </Text>
-        )}
-      </Box>
-
-      {selected.size > 0 && (
-        <Box marginTop={0}>
-          <Text dimColor>
-            Selected: {Array.from(selected).join(", ")}
-          </Text>
-        </Box>
-      )}
-
-      {selected.size > 0 && (
-        <Box marginTop={1}>
-          <Text>
-            Press{" "}
-            <Text bold color="cyan">
-              i
-            </Text>
-            {" "}to install selected ({selected.size})
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-}

package/src/cli/components/Header.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-
-interface HeaderProps {
-  title?: string;
-  subtitle?: string;
-}
-
-export function Header({ title = "Hooks", subtitle }: HeaderProps) {
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      <Text bold color="cyan">
-        {title}
-      </Text>
-      {subtitle && <Text dimColor>{subtitle}</Text>}
-    </Box>
-  );
-}

package/src/cli/components/HookSelect.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { HookMeta } from "../../lib/registry.js";
-import { DataTable } from "./DataTable.js";
-
-interface HookSelectProps {
-  hooks: HookMeta[];
-  selected: Set<string>;
-  onToggle: (name: string) => void;
-  onConfirm: () => void;
-  onBack: () => void;
-}
-
-export function HookSelect({
-  hooks,
-  selected,
-  onToggle,
-  onConfirm,
-  onBack,
-}: HookSelectProps) {
-  return (
-    <DataTable
-      hooks={hooks}
-      selected={selected}
-      onToggle={onToggle}
-      onConfirm={onConfirm}
-      onBack={onBack}
-    />
-  );
-}

package/src/cli/components/InstallProgress.tsx

@@ -1,105 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Box, Text } from "ink";
-import Spinner from "ink-spinner";
-import { installHook, InstallResult } from "../../lib/installer.js";
-import { getHook } from "../../lib/registry.js";
-
-interface InstallProgressProps {
-  hooks: string[];
-  overwrite?: boolean;
-  onComplete: (results: InstallResult[]) => void;
-}
-
-export function InstallProgress({
-  hooks,
-  overwrite = false,
-  onComplete,
-}: InstallProgressProps) {
-  const [results, setResults] = useState<InstallResult[]>([]);
-  const [current, setCurrent] = useState(0);
-  const [installing, setInstalling] = useState(true);
-
-  useEffect(() => {
-    const install = async () => {
-      const newResults: InstallResult[] = [];
-
-      for (let i = 0; i < hooks.length; i++) {
-        setCurrent(i);
-        await new Promise((r) => setTimeout(r, 100));
-
-        const result = installHook(hooks[i], { overwrite });
-        newResults.push(result);
-        setResults([...newResults]);
-      }
-
-      setInstalling(false);
-      onComplete(newResults);
-    };
-
-    install();
-  }, [hooks, overwrite]);
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text bold>
-          {installing
-            ? `Installing hooks (${current + 1}/${hooks.length})...`
-            : "Installation complete!"}
-        </Text>
-      </Box>
-
-      {hooks.map((name, i) => {
-        const result = results[i];
-        const isCurrent = i === current && installing;
-        const meta = getHook(name);
-
-        return (
-          <Box key={name} flexDirection="column">
-            {isCurrent && !result && (
-              <Text color="cyan">
-                <Spinner type="dots" /> {name}
-              </Text>
-            )}
-            {result?.success && (
-              <Box flexDirection="column">
-                <Text color="green">{"\u2713"} {name}</Text>
-                {meta && (
-                  <Text dimColor>
-                    {"  "}{meta.event}{meta.matcher ? ` [${meta.matcher}]` : ""}
-                  </Text>
-                )}
-              </Box>
-            )}
-            {result && !result.success && (
-              <Text color="red">
-                {"\u2717"} {name} - {result.error}
-              </Text>
-            )}
-            {!isCurrent && !result && (
-              <Text dimColor>{"\u25CB"} {name}</Text>
-            )}
-          </Box>
-        );
-      })}
-
-      {!installing && (
-        <Box marginTop={1} flexDirection="column">
-          <Text>
-            <Text color="green">
-              {results.filter((r) => r.success).length} installed
-            </Text>
-            {results.some((r) => !r.success) && (
-              <Text color="red">
-                , {results.filter((r) => !r.success).length} failed
-              </Text>
-            )}
-          </Text>
-          <Text dimColor>
-            Hooks installed to .hooks/ and registered in ~/.claude/settings.json
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-}

package/src/cli/components/SearchView.tsx

@@ -1,86 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Box, Text, useInput } from "ink";
-import TextInput from "ink-text-input";
-import { searchHooks, HookMeta } from "../../lib/registry.js";
-import { DataTable } from "./DataTable.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<HookMeta[]>([]);
-  const [mode, setMode] = useState<"search" | "select">("search");
-
-  useEffect(() => {
-    if (query.length >= 2) {
-      setResults(searchHooks(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");
-    }
-  });
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text bold>Search: </Text>
-        {mode === "search" && (
-          <TextInput
-            value={query}
-            onChange={setQuery}
-            placeholder="Type to search hooks..."
-          />
-        )}
-        {mode === "select" && (
-          <Text>{query}</Text>
-        )}
-      </Box>
-
-      {query.length < 2 && (
-        <Text dimColor>Type at least 2 characters to search</Text>
-      )}
-
-      {query.length >= 2 && results.length === 0 && (
-        <Text dimColor>No hooks found for "{query}"</Text>
-      )}
-
-      {results.length > 0 && mode === "search" && (
-        <Text dimColor>
-          Found {results.length} hook(s) — press down arrow to browse results
-        </Text>
-      )}
-
-      {results.length > 0 && mode === "select" && (
-        <DataTable
-          hooks={results}
-          selected={selected}
-          onToggle={onToggle}
-          onConfirm={onConfirm}
-          onBack={() => setMode("search")}
-        />
-      )}
-    </Box>
-  );
-}