@app-studio/web 0.9.35 → 0.9.37

package/docs/api-reference/data-display/tree.md

@@ -1,210 +0,0 @@
-# Tree
-
-The Tree component is used for displaying hierarchical data with expandable/collapsible nodes. It supports both a compound component pattern and a data-driven approach.
-
-## Import
-
-```jsx
-import { Tree } from '@app-studio/web';
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| children | React.ReactNode | undefined | Child elements for compound component pattern (e.g., `<Tree.Item />`) |
-| items | TreeNode[] | undefined | Data-driven approach: array of tree nodes |
-| size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the tree items |
-| variant | 'default' \| 'outline' \| 'filled' | 'default' | Visual variant of the tree items |
-| defaultExpandedItems | string[] | [] | IDs of initially expanded items (uncontrolled mode) |
-| expandedItems | string[] | undefined | IDs of expanded items (controlled mode) |
-| onExpandedItemsChange | (expandedItems: string[]) => void | undefined | Callback when expanded items change |
-| onItemSelect | (itemId: string, item?: TreeNode) => void | undefined | Callback when an item is selected |
-| selectedItem | string | undefined | ID of the currently selected item (controlled mode) |
-| defaultSelectedItem | string | undefined | ID of the initially selected item (uncontrolled mode) |
-| multiSelect | boolean | false | Whether to allow multiple selection |
-| allowDragAndDrop | boolean | false | Whether to enable drag and drop functionality |
-| dragHandleIcon | React.ReactNode | undefined | Custom icon to use for the drag handle |
-| onItemsReorder | (items: TreeNode[]) => void | undefined | Callback when items are reordered via drag and drop |
-| onDragStart | (itemId: string, event: React.DragEvent) => void | undefined | Callback when drag starts on an item |
-| onDragEnd | (itemId: string) => void | undefined | Callback when drag ends |
-| views | object | {} | Custom styling for different parts of the component |
-
-## TreeNode Structure
-
-The `TreeNode` interface defines the structure of nodes in the data-driven approach:
-
-```tsx
-interface TreeNode {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  children?: TreeNode[];
-  disabled?: boolean;
-  data?: any;
-  style?: ViewProps;
-  isDragging?: boolean;
-  draggable?: boolean;
-}
-```
-
-## Examples
-
-### Compound Component Pattern
-
-```jsx
-import React from 'react';
-import { Tree } from '@app-studio/web';
-import { FolderIcon, FileIcon } from '@app-studio/web';
-
-export const CompoundTree = () => {
-  return (
-    <Tree defaultExpandedItems={['parent-1']}>
-      <Tree.Item value="parent-1" icon={<FolderIcon />}>
-        <Tree.ItemLabel>Parent Item 1</Tree.ItemLabel>
-        <Tree.ItemContent>
-          <Tree.Item value="child-1-1" icon={<FileIcon />}>
-            <Tree.ItemLabel>Child Item 1.1</Tree.ItemLabel>
-          </Tree.Item>
-          <Tree.Item value="child-1-2" icon={<FileIcon />}>
-            <Tree.ItemLabel>Child Item 1.2</Tree.ItemLabel>
-          </Tree.Item>
-        </Tree.ItemContent>
-      </Tree.Item>
-      <Tree.Item value="parent-2" icon={<FolderIcon />}>
-        <Tree.ItemLabel>Parent Item 2</Tree.ItemLabel>
-        <Tree.ItemContent>
-          <Tree.Item value="child-2-1" icon={<FileIcon />}>
-            <Tree.ItemLabel>Child Item 2.1</Tree.ItemLabel>
-          </Tree.Item>
-        </Tree.ItemContent>
-      </Tree.Item>
-    </Tree>
-  );
-};
-```
-
-### Data-Driven Approach
-
-```jsx
-import React from 'react';
-import { Tree } from '@app-studio/web';
-import { FolderIcon, FileIcon } from '@app-studio/web';
-
-export const DataDrivenTree = () => {
-  const treeNodes = [
-    {
-      id: 'parent-1',
-      label: 'Parent Item 1',
-      icon: <FolderIcon />,
-      children: [
-        { id: 'child-1-1', label: 'Child Item 1.1', icon: <FileIcon /> },
-        { id: 'child-1-2', label: 'Child Item 1.2', icon: <FileIcon /> }
-      ]
-    },
-    {
-      id: 'parent-2',
-      label: 'Parent Item 2',
-      icon: <FolderIcon />,
-      children: [
-        { id: 'child-2-1', label: 'Child Item 2.1', icon: <FileIcon /> }
-      ]
-    }
-  ];
-
-  return (
-    <Tree 
-      items={treeNodes} 
-      defaultExpandedItems={['parent-1']} 
-      onItemSelect={(itemId, item) => console.log(`Selected: ${itemId}`, item)}
-    />
-  );
-};
-```
-
-### With Drag and Drop
-
-```jsx
-import React, { useState } from 'react';
-import { Tree } from '@app-studio/web';
-import { FolderIcon, FileIcon } from '@app-studio/web';
-
-export const DraggableTree = () => {
-  const [menuItems, setMenuItems] = useState([
-    {
-      id: 'menu-1',
-      label: 'Menu Item 1',
-      icon: <FolderIcon />,
-      children: [
-        { id: 'submenu-1-1', label: 'Submenu Item 1.1', icon: <FileIcon /> }
-      ]
-    },
-    {
-      id: 'menu-2',
-      label: 'Menu Item 2',
-      icon: <FolderIcon />,
-      children: [
-        { id: 'submenu-2-1', label: 'Submenu Item 2.1', icon: <FileIcon /> }
-      ]
-    }
-  ]);
-
-  return (
-    <Tree
-      items={menuItems}
-      allowDragAndDrop={true}
-      onItemsReorder={setMenuItems}
-      onDragStart={(itemId) => console.log(`Started dragging: ${itemId}`)}
-      onDragEnd={(itemId) => console.log(`Finished dragging: ${itemId}`)}
-    />
-  );
-};
-```
-
-## Compound Components
-
-The Tree component uses a compound component pattern with the following sub-components:
-
-```jsx
-Tree.Item       // Represents a tree node
-Tree.ItemLabel  // The clickable label part of a tree node
-Tree.ItemContent // Container for child nodes
-```
-
-## Customization
-
-The Tree component can be customized using the `views` prop:
-
-```jsx
-<Tree
-  // ...other props
-  views={{
-    container: { /* styles for the root container */ },
-    item: { /* styles for each tree item */ },
-    itemLabel: { /* styles for the clickable label part */ },
-    itemContent: { /* styles for the children wrapper */ },
-    icon: { /* styles for the item's main icon */ },
-    expandIcon: { /* styles for the expand/collapse chevron icon */ },
-    draggedItem: { /* styles for the item being dragged */ },
-    dragHandle: { /* styles for the drag handle icon */ },
-  }}
-/>
-```
-
-## Accessibility
-
-The Tree component implements the following accessibility features:
-
-- Keyboard navigation for expanding/collapsing nodes
-- ARIA attributes for tree structure
-- Focus management for interactive elements
-- Proper contrast for selected and hovered states
-
-## Best Practices
-
-- Use consistent icons for similar node types
-- Provide clear labels for all nodes
-- Implement proper error handling for drag and drop operations
-- Consider the depth of your tree structure (avoid deeply nested trees)
-- Use the `onItemSelect` callback to handle item selection
-- Implement undo/redo functionality for drag and drop operations when needed

package/docs/api-reference/form/chat-input.md

@@ -1,206 +0,0 @@
-# ChatInput
-
-The ChatInput component is a customizable chat input field with support for file uploads and prompt examples.
-
-## Import
-
-```jsx
-import { ChatInput } from '@app-studio/web';
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| onSubmit | (message: string, options?: { model_name?: string; enable_thinking?: boolean }) => void | required | Callback function when the form is submitted |
-| placeholder | string | 'Say what you want and Kimmy will surprise you' | Placeholder text for the input |
-| loading | boolean | false | Whether the input is in a loading state |
-| disabled | boolean | false | Whether the input is disabled |
-| isAgentRunning | boolean | false | Whether an agent is currently running |
-| onStopAgent | () => void | undefined | Callback function to stop the agent |
-| autoFocus | boolean | true | Whether to auto focus the input |
-| value | string | undefined | Controlled value for the input |
-| onChange | (value: string) => void | undefined | Callback function when the input value changes |
-| onFileBrowse | () => void | undefined | Callback function when the file browser is opened |
-| sandboxId | string | undefined | ID of the sandbox |
-| hideAttachments | boolean | false | Whether to hide the attachment button |
-| title | string | undefined | Title for the chat input |
-| showGuideTip | boolean | false | Whether to show the guide tip |
-| guideVideoUrl | string | undefined | URL for the guide video |
-| onGuideClose | () => void | undefined | Callback function when the guide tip is closed |
-| promptExamples | PromptExample[] | [] | List of prompt examples |
-| onPromptExampleSelect | (example: PromptExample) => void | undefined | Callback function when a prompt example is selected |
-| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Size of the chat input |
-| shape | 'default' \| 'sharp' \| 'rounded' \| 'pillShaped' | 'rounded' | Shape of the chat input |
-| variant | 'default' \| 'outline' \| 'none' | 'default' | Visual variant of the chat input |
-| views | object | {} | Custom styling for different parts of the component |
-
-## Interfaces
-
-### PromptExample
-
-```tsx
-interface PromptExample {
-  id: string;
-  text: string;
-}
-```
-
-### UploadedFile
-
-```tsx
-interface UploadedFile {
-  name: string;
-  path: string;
-  size: number;
-  type: string;
-  localUrl?: string;
-}
-```
-
-### ChatInputHandles
-
-```tsx
-interface ChatInputHandles {
-  getPendingFiles: () => File[];
-  clearPendingFiles: () => void;
-}
-```
-
-## Examples
-
-### Basic Usage
-
-```jsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
-
-export const BasicChatInput = () => {
-  const [inputValue, setInputValue] = useState('');
-
-  const handleSubmit = (message) => {
-    console.log('Message submitted:', message);
-    setInputValue('');
-  };
-
-  return (
-    <View width="100%">
-      <ChatInput
-        onSubmit={handleSubmit}
-        value={inputValue}
-        onChange={setInputValue}
-        placeholder="Type your message here..."
-      />
-    </View>
-  );
-};
-```
-
-### With Prompt Examples
-
-```jsx
-import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
-
-export const ChatInputWithPromptExamples = () => {
-  const [inputValue, setInputValue] = useState('');
-
-  // Example prompt suggestions
-  const promptExamples = [
-    { id: '1', text: 'Tell me a joke' },
-    { id: '2', text: 'What is the weather today?' },
-    { id: '3', text: 'How do I create a React component?' },
-  ];
-
-  const handleSubmit = (message) => {
-    console.log('Message submitted:', message);
-    setInputValue('');
-  };
-
-  return (
-    <View width="100%">
-      <ChatInput
-        onSubmit={handleSubmit}
-        value={inputValue}
-        onChange={setInputValue}
-        promptExamples={promptExamples}
-      />
-    </View>
-  );
-};
-```
-
-### With File Uploads
-
-```jsx
-import React, { useRef } from 'react';
-import { ChatInput, ChatInputHandles } from '@app-studio/web';
-import { View } from 'app-studio';
-
-export const ChatInputWithFileUploads = () => {
-  const chatInputRef = useRef<ChatInputHandles>(null);
-
-  const handleSubmit = (message) => {
-    // Get any pending files
-    const pendingFiles = chatInputRef.current?.getPendingFiles() || [];
-    console.log('Message submitted:', message);
-    console.log('Pending files:', pendingFiles);
-    
-    // Clear pending files after submission
-    chatInputRef.current?.clearPendingFiles();
-  };
-
-  return (
-    <View width="100%">
-      <ChatInput
-        ref={chatInputRef}
-        onSubmit={handleSubmit}
-        hideAttachments={false}
-      />
-    </View>
-  );
-};
-```
-
-## Customization
-
-The ChatInput component can be customized using the `views` prop:
-
-```jsx
-<ChatInput
-  // ...other props
-  views={{
-    container: { /* styles for the main container */ },
-    content: { /* styles for the content wrapper */ },
-    editableInput: { /* styles for the editable input */ },
-    header: { /* styles for the header */ },
-    title: { /* styles for the title */ },
-    guideTip: { /* styles for the guide tip */ },
-    promptExamples: { /* styles for the prompt examples container */ },
-    promptExampleItem: { /* styles for each prompt example item */ },
-    attachments: { /* styles for the attachments container */ },
-    attachmentItem: { /* styles for each attachment item */ },
-    submitButton: { /* styles for the submit button */ },
-    fileButton: { /* styles for the file button */ },
-  }}
-/>
-```
-
-## Accessibility
-
-The ChatInput component implements the following accessibility features:
-
-- Keyboard navigation for submitting messages (Enter key)
-- ARIA attributes for interactive elements
-- Focus management for the input field
-- Proper contrast for text and buttons
-
-## Best Practices
-
-- Provide clear placeholder text to guide users
-- Handle file uploads appropriately on the server side
-- Implement proper error handling for message submission
-- Use the `loading` state to indicate when a message is being processed
-- Provide feedback to users when messages are sent successfully

package/docs/api-reference/utility/button.md

@@ -1,145 +0,0 @@
-# Button
-
-The Button component is used to trigger an action or event.
-
-## Import
-
-```jsx
-import { Button } from '@app-studio/web';
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| variant | 'filled' \| 'outline' \| 'ghost' \| 'link' | 'filled' | The visual style of the button |
-| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | The size of the button |
-| shape | 'sharp' \| 'rounded' \| 'pillShaped' | 'rounded' | The shape of the button |
-| iconPosition | 'left' \| 'right' \| 'top' \| 'bottom' | 'left' | The position of the icon relative to the button text |
-| loaderPosition | 'left' \| 'right' | 'left' | The position of the loader relative to the button text |
-| backgroundColor | string | - | The background color of the button |
-| color | string | - | The color of the button text |
-| isAuto | boolean | false | Whether the button should automatically adjust its width |
-| isFilled | boolean | false | Whether the button should fill its container width |
-| isDisabled | boolean | false | Whether the button is disabled |
-| isLoading | boolean | false | Whether the button is in a loading state |
-| isIconRounded | boolean | false | Whether the icon should have rounded corners |
-| icon | React.ReactNode | - | The icon to display in the button |
-| children | React.ReactNode | - | The content of the button |
-| to | string | - | The URL to navigate to when the button is clicked (turns the button into a link) |
-| isExternal | boolean | false | Whether the link should open in a new tab |
-| shadow | Shadow | - | The shadow style of the button |
-| onClick | () => void | - | The function to call when the button is clicked |
-| views | ButtonStyles | {} | Custom styles for different parts of the button |
-| themeMode | 'light' \| 'dark' | - | Optional theme mode override |
-
-## Examples
-
-### Basic Button
-
-```jsx
-<Button onClick={() => alert('Button clicked!')}>Click Me</Button>
-```
-
-### Button Variants
-
-```jsx
-<>
-  <Button variant="filled">Filled</Button>
-  <Button variant="outline">Outline</Button>
-  <Button variant="ghost">Ghost</Button>
-  <Button variant="link">Link</Button>
-</>
-```
-
-### Button Sizes
-
-```jsx
-<>
-  <Button size="xs">Extra Small</Button>
-  <Button size="sm">Small</Button>
-  <Button size="md">Medium</Button>
-  <Button size="lg">Large</Button>
-  <Button size="xl">Extra Large</Button>
-</>
-```
-
-### Button with Icon
-
-```jsx
-import { DustBinIcon } from '@app-studio/web';
-
-<Button icon={<DustBinIcon widthHeight={16} />}>Delete</Button>
-```
-
-### Button with Icon Position
-
-```jsx
-import { DustBinIcon } from '@app-studio/web';
-
-<>
-  <Button icon={<DustBinIcon widthHeight={16} />} iconPosition="left">Left Icon</Button>
-  <Button icon={<DustBinIcon widthHeight={16} />} iconPosition="right">Right Icon</Button>
-  <Button icon={<DustBinIcon widthHeight={16} />} iconPosition="top">Top Icon</Button>
-  <Button icon={<DustBinIcon widthHeight={16} />} iconPosition="bottom">Bottom Icon</Button>
-</>
-```
-
-### Loading Button
-
-```jsx
-<Button isLoading>Loading</Button>
-```
-
-### Disabled Button
-
-```jsx
-<Button isDisabled>Disabled</Button>
-```
-
-### Link Button
-
-```jsx
-<Button to="/dashboard" variant="link">Go to Dashboard</Button>
-```
-
-### External Link Button
-
-```jsx
-<Button to="https://example.com" isExternal variant="link">External Link</Button>
-```
-
-### Custom Styled Button
-
-```jsx
-<Button
-  views={{
-    container: {
-      backgroundColor: '#6200ee',
-      borderRadius: 8,
-      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-    },
-  }}
->
-  Custom Styled Button
-</Button>
-```
-
-## Accessibility
-
-The Button component:
-
-- Uses the native `<button>` element for proper keyboard navigation and screen reader support
-- Supports the `aria-disabled` attribute when disabled
-- Maintains proper focus states for keyboard users
-- Uses appropriate color contrast for text and background
-
-## Best Practices
-
-- Use clear, concise text that describes the action
-- Use the appropriate variant for the context (primary actions should use 'filled')
-- Include an icon only when it adds meaning or clarity
-- Avoid using too many buttons in close proximity
-- Use consistent button styles throughout your application
-- Consider the visual hierarchy of multiple buttons (primary, secondary actions)
-- Use the `isLoading` state for actions that take time to complete