import { Detail } from "@raycast/api";

export default function Command() {
  return <Detail markdown="# Hello World" />;
}

import { Form, ActionPanel, Action, showToast } from "@raycast/api";

type Values = {
  textfield: string;
  textarea: string;
  datepicker: Date;
  checkbox: boolean;
  dropdown: string;
  tokeneditor: string[];
};

export default function Command() {
  function handleSubmit(values: Values) {
    console.log(values);
    showToast({ title: "Submitted form", message: "See logs for submitted values" });
  }

  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm onSubmit={handleSubmit} />
        </ActionPanel>
      }
    >
      <Form.Description text="This form showcases all available form elements." />
      <Form.TextField id="textfield" title="Text field" placeholder="Enter text" defaultValue="Raycast" />
      <Form.TextArea id="textarea" title="Text area" placeholder="Enter multi-line text" />
      <Form.Separator />
      <Form.DatePicker id="datepicker" title="Date picker" />
      <Form.Checkbox id="checkbox" title="Checkbox" label="Checkbox Label" storeValue />
      <Form.Dropdown id="dropdown" title="Dropdown">
        <Form.Dropdown.Item value="dropdown-item" title="Dropdown Item" />
      </Form.Dropdown>
      <Form.TagPicker id="tokeneditor" title="Tag picker">
        <Form.TagPicker.Item value="tagpicker-item" title="Tag Picker Item" />
      </Form.TagPicker>
    </Form>
  );
}

import { useState } from "react";
import { ActionPanel, Action, Icon, Grid, Color } from "@raycast/api";

export default function Command() {
  const [columns, setColumns] = useState(5);
  const [isLoading, setIsLoading] = useState(true);
  return (
    <Grid
      columns={columns}
      inset={Grid.Inset.Large}
      isLoading={isLoading}
      searchBarAccessory={
        <Grid.Dropdown
          tooltip="Grid Item Size"
          storeValue
          onChange={(newValue) => {
            setColumns(parseInt(newValue));
            setIsLoading(false);
          }}
        >
          <Grid.Dropdown.Item title="Large" value={"3"} />
          <Grid.Dropdown.Item title="Medium" value={"5"} />
          <Grid.Dropdown.Item title="Small" value={"8"} />
        </Grid.Dropdown>
      }
    >
      {!isLoading &&
        Object.entries(Icon).map(([name, icon]) => (
          <Grid.Item
            key={name}
            content={{ value: { source: icon, tintColor: Color.PrimaryText }, tooltip: name }}
            title={name}
            subtitle={icon}
            actions={
              <ActionPanel>
                <Action.CopyToClipboard content={icon} />
              </ActionPanel>
            }
          />
        ))}
    </Grid>
  );
}

import { ActionPanel, Detail, List, Action, Icon } from "@raycast/api";

export default function Command() {
  return (
    <List>
      <List.Item
        icon={Icon.Bird}
        title="Greeting"
        actions={
          <ActionPanel>
            <Action.Push title="Show Details" target={<Detail markdown="# Hey! 👋" />} />
          </ActionPanel>
        }
      />
    </List>
  );
}

import { useEffect, useState } from "react";
import { Icon, MenuBarExtra, open } from "@raycast/api";
import { getFavicon } from "@raycast/utils";

type Bookmark = { name: string; url: string };

const useBookmarks = () => {
  const [state, setState] = useState<{ unseen: Bookmark[]; seen: Bookmark[]; isLoading: boolean }>({
    unseen: [],
    seen: [],
    isLoading: true,
  });
  useEffect(() => {
    (async () => {
      setState({
        unseen: [{ name: "Raycast Teams", url: "https://raycast.com/teams" }],
        seen: [
          { name: "Raycast Store", url: "https://raycast.com/store" },
          { name: "Twitter", url: "https://twitter.com" },
        ],
        isLoading: false,
      });
    })();
  }, []);
  return state;
};

export default function Command() {
  const { unseen: unseenBookmarks, seen: seenBookmarks, isLoading } = useBookmarks();

  return (
    <MenuBarExtra icon={Icon.Bookmark} isLoading={isLoading}>
      <MenuBarExtra.Item title="New" />
      {unseenBookmarks.map((bookmark) => (
        <MenuBarExtra.Item
          key={bookmark.url}
          icon={getFavicon(bookmark.url)}
          title={bookmark.name}
          onAction={() => open(bookmark.url)}
        />
      ))}
      <MenuBarExtra.Separator />
      <MenuBarExtra.Item title="Seen" />
      {seenBookmarks.map((bookmark) => (
        <MenuBarExtra.Item
          key={bookmark.url}
          icon={getFavicon(bookmark.url)}
          title={bookmark.name}
          onAction={() => open(bookmark.url)}
        />
      ))}
    </MenuBarExtra>
  );
}

import { showHUD, Clipboard } from "@raycast/api";

export default async function main() {
  const now = new Date();
  await Clipboard.copy(now.toLocaleDateString());
  await showHUD("Copied date to clipboard");
}

import { ActionPanel, Action, Icon, List } from "@raycast/api";

const ITEMS = Array.from(Array(3).keys()).map((key) => {
  return {
    id: key,
    icon: Icon.Bird,
    title: "Title " + key,
    subtitle: "Subtitle",
    accessory: "Accessory",
  };
});

export default function Command() {
  return (
    <List>
      {ITEMS.map((item) => (
        <List.Item
          key={item.id}
          icon={item.icon}
          title={item.title}
          subtitle={item.subtitle}
          accessories={[{ icon: Icon.Text, text: item.accessory }]}
          actions={
            <ActionPanel>
              <Action.CopyToClipboard content={item.title} />
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
}

import { ActionPanel, Action, List } from "@raycast/api";
import { useFetch } from "@raycast/utils";
import { useState } from "react";
import { URLSearchParams } from "node:url";

export default function Command() {
  const [searchText, setSearchText] = useState("");
  const { data, isLoading } = useFetch(
    "https://api.npms.io/v2/search?" +
      // send the search query to the API
      new URLSearchParams({ q: searchText.length === 0 ? "@raycast/api" : searchText }),
    {
      parseResponse: parseFetchResponse,
    },
  );

  return (
    <List
      isLoading={isLoading}
      onSearchTextChange={setSearchText}
      searchBarPlaceholder="Search npm packages..."
      throttle
    >
      <List.Section title="Results" subtitle={data?.length + ""}>
        {data?.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}
      accessories={[{ text: searchResult.username }]}
      actions={
        <ActionPanel>
          <ActionPanel.Section>
            <Action.OpenInBrowser title="Open in Browser" url={searchResult.url} />
          </ActionPanel.Section>
          <ActionPanel.Section>
            <Action.CopyToClipboard
              title="Copy Install Command"
              content={`npm install ${searchResult.name}`}
              shortcut={{ modifiers: ["cmd"], key: "." }}
            />
          </ActionPanel.Section>
        </ActionPanel>
      }
    />
  );
}

/** Parse the response from the fetch query into something we can display */
async function parseFetchResponse(response: Response) {
  const json = (await response.json()) as
    | {
        results: {
          package: {
            name: string;
            description?: string;
            publisher?: { username: string };
            links: { npm: string };
          };
        }[];
      }
    | { code: string; message: string };

  if (!response.ok || "message" in json) {
    throw new Error("message" in json ? json.message : response.statusText);
  }

  return json.results.map((result) => {
    return {
      name: result.package.name,
      description: result.package.description,
      username: result.package.publisher?.username,
      url: result.package.links.npm,
    } as SearchResult;
  });
}

interface SearchResult {
  name: string;
  description?: string;
  username?: string;
  url: string;
}

import { useState } from "react";
import { Form, ActionPanel, Action, showToast } from "@raycast/api";
import OpenAI from 'openai';

type Values = {
  passwordfield: string;
  textfield: string;
  textarea: string;
};

export default function Command() {
  const [output, setOutput] = useState<string>('');
  const modelName='gpt-4o-mini';

  async function main(values: Values) {
    const openai = new OpenAI({
      apiKey: values.passwordfield.toString(),
    });

    try {
      const chatCompletion = await openai.chat.completions.create({
        messages: [{ role: 'user', content: values.textfield + 'を日本語で出力してください' }],
        model: modelName,
      });
      const outputContent = chatCompletion.choices[0].message.content;
      if (outputContent !== null) {
        setOutput(outputContent); 
      }
    } catch (error: any) {
      showToast({
        title: "Something went wrong",
        message: error.message,
      });
    }
  }

  function handleSubmit(values: Values) {
    console.log(values);
    main(values);
  }

  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm onSubmit={handleSubmit} />
        </ActionPanel>
      }
    >
      <Form.Description text={modelName} />
      <Form.PasswordField id="passwordfield" title="api key" placeholder="Enter api key" />
      <Form.TextField id="textfield" title="input field" placeholder="Enter text" defaultValue="Raycastランチャーについて" />
      <Form.TextArea id="textarea" title="output area" value={output} />
    </Form>
  );
}

{
  "$schema": "https://www.raycast.com/schemas/extension.json",
  "name": "test-extention",
  "title": "Test Extention",
  "description": "Extention の説明",
  "icon": "extension-icon.png",
  "author": "Your Name",
  "categories": [
    "Applications"
  ],
  "license": "MIT",
  "commands": [
    {
      "name": "command1",
      "title": "Command1",
      "subtitle": "Blank",
+      "description": "Command1 の説明の変更",
-      "description": "Command1 の説明",
      "mode": "no-view"
    },
    {
      "name": "command2",
      "title": "Command2",
      "subtitle": "Show Detail",
      "description": "Command2の説明",
      "mode": "view"
    },
    {
      "name": "command3",
      "title": "Command3",
      "subtitle": "Submit Form",
      "description": "Command3の説明",
      "mode": "view"
    },
    {
      "name": "command4",
      "title": "Command4",
      "subtitle": "Show Grid",
      "description": "Command4の説明",
      "mode": "view"
    },
    {
      "name": "command5",
      "title": "Command5",
      "subtitle": "Show List and Detail",
      "description": "Command5の説明",
      "mode": "view"
    },
    {
      "name": "command6",
      "title": "Command6",
      "subtitle": "Update Bookmarks",
      "description": "Command6 の説明",
      "mode": "menu-bar"
    },
    {
      "name": "command7",
      "title": "Command7",
      "subtitle": "Run Script",
      "description": "Command7 の説明",
      "mode": "no-view"
    },
    {
      "name": "command8",
      "title": "Command8",
      "subtitle": "Show List",
      "description": "Command8 の説明",
      "mode": "view"
    },
    {
      "name": "command9",
      "title": "Command9",
      "subtitle": "Show Typeahead Results",
      "description": "Command9 の説明",
      "mode": "view"
    }
  ],
  "dependencies": {
    "@raycast/api": "^1.81.2",
    "@raycast/utils": "^1.16.3"
  },
  "devDependencies": {
    "@raycast/eslint-config": "^1.0.8",
    "@types/node": "20.8.10",
    "@types/react": "18.3.3",
    "eslint": "^8.57.0",
    "prettier": "^3.3.3",
    "typescript": "^5.4.5"
  },
  "scripts": {
    "build": "ray build -e dist",
    "dev": "ray develop",
    "fix-lint": "ray lint --fix",
    "lint": "ray lint",
    "prepublishOnly": "echo \"\\n\\nIt seems like you are trying to publish the Raycast extension to npm.\\n\\nIf you did intend to publish it to npm, remove the \\`prepublishOnly\\` script and rerun \\`npm publish\\` again.\\nIf you wanted to publish it to the Raycast Store instead, use \\`npm run publish\\` instead.\\n\\n\" && exit 1",
    "publish": "npx @raycast/api@latest publish"
  }
}