Create raycast extension

examples/docs/app/routes/components.$name.tsx

@@ -66,7 +66,7 @@ export default function ComponentPage() {
       <h1>{data.component.name}</h1>
       <pre>{JSON.stringify(data, null, 2)}</pre>
 
-      {/* <h2>Uses</h2>
+      <h2>Uses</h2>
 
       <h3>Primitives</h3>
       <ul>
@@ -77,7 +77,7 @@ export default function ComponentPage() {
             </Link>
           </li>
         ))}
-      </ul> */}
+      </ul>
     </div>
   );
 }

examples/docs/app/routes/primitives.$name.tsx

@@ -53,7 +53,8 @@ export default function ComponentPage() {
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>{data.designToken.name}</h1>
       <pre>{JSON.stringify(data, null, 2)}</pre>
-      {/* <h2>Used by</h2>
+
+      <h2>Used by</h2>
       <ul>
         {data.designToken.usedByComponents.map(({ name }) => (
           <li key={name}>
@@ -66,7 +67,7 @@ export default function ComponentPage() {
             </Link>
           </li>
         ))}
-      </ul> */}
+      </ul>
     </div>
   );
 }

examples/raycast/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "root": true,
+  "env": {
+    "es2020": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"]
+}

examples/raycast/README.md

@@ -0,0 +1 @@
+# Primer Raycast extension

examples/raycast/package.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://www.raycast.com/schemas/extension.json",
+  "name": "raycast",
+  "title": "Primer",
+  "description": "",
+  "icon": "command-icon.png",
+  "author": "cole",
+  "categories": [
+    "Design Tools"
+  ],
+  "license": "MIT",
+  "commands": [
+    {
+      "name": "index",
+      "title": "Search components",
+      "description": "",
+      "mode": "view"
+    }
+  ],
+  "dependencies": {
+    "@raycast/api": "^1.38.2",
+    "change-case": "^4.1.2",
+    "graphql": "^16.5.0",
+    "graphql-request": "^4.3.0",
+    "node-fetch": "^3.0.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.4.3"
+  },
+  "scripts": {
+    "build": "ray build -e dist",
+    "dev": "ray develop",
+    "fix-lint": "ray lint --fix",
+    "lint": "ray lint",
+    "publish": "ray publish"
+  }
+}

examples/raycast/src/index.tsx

@@ -0,0 +1,145 @@
+import { Action, ActionPanel, List, showToast, Toast } from "@raycast/api";
+import { paramCase, pascalCase } from "change-case";
+import { gql, GraphQLClient } from "graphql-request";
+import { AbortError } from "node-fetch";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export default function Command() {
+  const { state, search } = useSearch();
+
+  return (
+    <List
+      isLoading={state.isLoading}
+      onSearchTextChange={search}
+      searchBarPlaceholder="Search components..."
+      throttle
+    >
+      <List.Section title="Results" subtitle={state.results.length + ""}>
+        {state.results.map((searchResult) => (
+          <SearchListItem key={searchResult.name} searchResult={searchResult} />
+        ))}
+      </List.Section>
+    </List>
+  );
+}
+
+function SearchListItem({ searchResult }: { searchResult: SearchResult }) {
+  return (
+    <List.Item
+      title={searchResult.name}
+      // subtitle={searchResult.description}
+      // accessoryTitle={searchResult.username}
+      actions={
+        <ActionPanel>
+          <Action.OpenInBrowser
+            title="Open documentation"
+            url={`http://localhost:3000/components/${paramCase(
+              searchResult.name
+            )}`}
+          />
+
+          <Action.CopyToClipboard
+            title="Copy name"
+            content={pascalCase(searchResult.name)}
+            shortcut={{ modifiers: ["cmd"], key: "." }}
+          />
+        </ActionPanel>
+      }
+    />
+  );
+}
+
+function useSearch() {
+  const [state, setState] = useState<SearchState>({
+    results: [],
+    isLoading: true,
+  });
+  const cancelRef = useRef<AbortController | null>(null);
+
+  const search = useCallback(
+    async function search(searchText: string) {
+      cancelRef.current?.abort();
+      cancelRef.current = new AbortController();
+      setState((oldState) => ({
+        ...oldState,
+        isLoading: true,
+      }));
+      try {
+        const results = await performSearch(
+          searchText,
+          cancelRef.current.signal
+        );
+        setState((oldState) => ({
+          ...oldState,
+          results: results,
+          isLoading: false,
+        }));
+      } catch (error) {
+        setState((oldState) => ({
+          ...oldState,
+          isLoading: false,
+        }));
+
+        if (error instanceof AbortError) {
+          return;
+        }
+
+        console.error("search error", error);
+        showToast({
+          style: Toast.Style.Failure,
+          title: "Could not perform search",
+          message: String(error),
+        });
+      }
+    },
+    [cancelRef, setState]
+  );
+
+  useEffect(() => {
+    search("");
+    return () => {
+      cancelRef.current?.abort();
+    };
+  }, []);
+
+  return {
+    state: state,
+    search: search,
+  };
+}
+
+async function performSearch(
+  searchText: string,
+  signal: AbortSignal
+): Promise<SearchResult[]> {
+  const client = new GraphQLClient("http://localhost:4000");
+  const query = gql`
+    query ($searchText: String!) {
+      components(
+        where: { name: { contains: $searchText, mode: insensitive } }
+      ) {
+        name
+      }
+    }
+  `;
+
+  const results = await client.request({
+    document: query,
+    variables: { searchText },
+    // signal,
+  });
+
+  return results.components;
+}
+
+interface SearchState {
+  results: SearchResult[];
+  isLoading: boolean;
+}
+
+interface SearchResult {
+  name: string;
+  // description?: string;
+  // username?: string;
+  // url: string;
+}

examples/raycast/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Node 16",
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "lib": ["es2021"],
+    "module": "commonjs",
+    "target": "es2021",
+    "strict": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true
+  }
+}