@gram-ai/elements 1.27.3 → 1.27.5

package/src/components/ui/tool-ui.stories.tsx

@@ -1,31 +1,31 @@
-import React from 'react'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { ToolUI } from './tool-ui'
+import React from "react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { ToolUI } from "./tool-ui";
 
 // NOTE: this component is not used within the elements library, but keeping it around for
 // for reference and development purposes as this most closely resembles the Figma designs
 // However, to use this design variant, we'd have to add lots of metadata to the tool parts
 
 const meta: Meta<typeof ToolUI> = {
-  title: 'Components/Tool UI',
+  title: "Components/Tool UI",
   component: ToolUI,
   parameters: {
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
   decorators: [
     (Story) => (
-      <div className="bg-background text-foreground flex min-h-screen items-start justify-center p-6">
+      <div className="flex min-h-screen items-start justify-center bg-background p-6 text-foreground">
         <div className="w-[400px]">
           <Story />
         </div>
       </div>
     ),
   ],
-} satisfies Meta<typeof ToolUI>
+} satisfies Meta<typeof ToolUI>;
 
-export default meta
+export default meta;
 
-type Story = StoryFn<typeof ToolUI>
+type Story = StoryFn<typeof ToolUI>;
 
 export const Complete: Story = () => (
   <ToolUI
@@ -33,17 +33,17 @@ export const Complete: Story = () => (
     name="notion-search"
     status="complete"
     request={{
-      query: 'PRD Gram Elements',
-      query_type: 'internal',
+      query: "PRD Gram Elements",
+      query_type: "internal",
     }}
     result={{
       results: [
-        { id: 'page-1', title: 'PRD: Gram Elements v2' },
-        { id: 'page-2', title: 'PRD: Gram Elements Architecture' },
+        { id: "page-1", title: "PRD: Gram Elements v2" },
+        { id: "page-2", title: "PRD: Gram Elements Architecture" },
       ],
     }}
   />
-)
+);
 
 export const Running: Story = () => (
   <ToolUI
@@ -51,15 +51,15 @@ export const Running: Story = () => (
     name="search-repos"
     status="running"
     request={{
-      query: 'gram-elements',
-      org: 'speakeasy-api',
+      query: "gram-elements",
+      org: "speakeasy-api",
     }}
   />
-)
+);
 
 export const Pending: Story = () => (
   <ToolUI provider="Slack" name="send-message" status="pending" />
-)
+);
 
 export const Error: Story = () => (
   <ToolUI
@@ -67,15 +67,15 @@ export const Error: Story = () => (
     name="execute-query"
     status="error"
     request={{
-      sql: 'SELECT * FROM users WHERE id = ?',
+      sql: "SELECT * FROM users WHERE id = ?",
       params: [123],
     }}
     result={{
-      error: 'Connection timeout after 30s',
-      code: 'ETIMEDOUT',
+      error: "Connection timeout after 30s",
+      code: "ETIMEDOUT",
     }}
   />
-)
+);
 
 export const WithoutProvider: Story = () => (
   <ToolUI
@@ -84,7 +84,7 @@ export const WithoutProvider: Story = () => (
     request={{ items: [10, 20, 30] }}
     result={{ total: 60 }}
   />
-)
+);
 
 export const WithCustomIcon: Story = () => (
   <ToolUI
@@ -92,10 +92,10 @@ export const WithCustomIcon: Story = () => (
     icon={<span className="text-base">📝</span>}
     name="create-page"
     status="complete"
-    request={{ title: 'Meeting Notes', parent: 'Workspace' }}
-    result={{ pageId: 'abc-123', url: 'https://notion.so/abc-123' }}
+    request={{ title: "Meeting Notes", parent: "Workspace" }}
+    result={{ pageId: "abc-123", url: "https://notion.so/abc-123" }}
   />
-)
+);
 
 export const DefaultExpanded: Story = () => (
   <ToolUI
@@ -103,14 +103,14 @@ export const DefaultExpanded: Story = () => (
     name="fetch-user"
     status="complete"
     defaultExpanded
-    request={{ userId: 'user_123' }}
+    request={{ userId: "user_123" }}
     result={{
-      id: 'user_123',
-      name: 'John Doe',
-      email: 'john@example.com',
+      id: "user_123",
+      name: "John Doe",
+      email: "john@example.com",
     }}
   />
-)
+);
 
 export const LongContent: Story = () => (
   <ToolUI
@@ -118,16 +118,16 @@ export const LongContent: Story = () => (
     name="generate-embedding"
     status="complete"
     request={{
-      model: 'text-embedding-3-small',
+      model: "text-embedding-3-small",
       input:
-        'This is a very long piece of text that needs to be embedded into a vector representation for semantic search purposes.',
+        "This is a very long piece of text that needs to be embedded into a vector representation for semantic search purposes.",
     }}
     result={{
       embedding: [0.123, -0.456, 0.789, 0.012, -0.345, 0.678],
       usage: { prompt_tokens: 24, total_tokens: 24 },
     }}
   />
-)
+);
 
 export const MultipleTools: Story = () => (
   <div className="flex flex-col gap-3">
@@ -135,15 +135,15 @@ export const MultipleTools: Story = () => (
       provider="Notion"
       name="notion-search"
       status="complete"
-      request={{ query: 'meeting notes' }}
+      request={{ query: "meeting notes" }}
       result={{ results: [] }}
     />
     <ToolUI
       provider="Notion"
       name="notion-create-page"
       status="running"
-      request={{ title: 'New Page' }}
+      request={{ title: "New Page" }}
     />
     <ToolUI provider="Slack" name="slack-post" status="pending" />
   </div>
-)
+);