@app-studio/components 0.10.17

package/docs/components.md

@@ -0,0 +1,299 @@
+# App Studio Component Library
+
+This document provides an overview of the core components available in the App Studio library. Each component is designed to be composable, themeable, and consistent.
+
+For detailed rules on creating or modifying components, please refer to the [App Studio Rules](./app-studio.md).
+
+## I. Layout Components
+
+Layout components are the foundation for building consistent user interfaces. They provide powerful and simple abstractions over CSS Flexbox.
+
+### View
+
+The most fundamental layout component. It's a simple block element that can be customized with style props.
+
+**Example:**
+```tsx
+import { View, Text } from '@app-studio';
+
+const MyComponent = () => (
+  <View style={{ padding: 16, backgroundColor: '#f0f0f0', borderRadius: 8 }}>
+    <Text>This is a View component.</Text>
+  </View>
+);
+```
+
+### Horizontal
+
+A `View` component with `flexDirection: 'row'`. It arranges its children in a horizontal line.
+
+**Example:**
+```tsx
+import { Horizontal, Button, Icon } from '@app-studio';
+
+const ActionBar = () => (
+  <Horizontal gap={8} alignItems="center">
+    <Button variant="primary">Save</Button>
+    <Button>Cancel</Button>
+    <Icon name="Settings" />
+  </Horizontal>
+);
+```
+
+### Vertical
+
+A `View` component with `flexDirection: 'column'`. It stacks its children vertically.
+
+**Example:**
+```tsx
+import { Vertical, Text, TextField } from '@app-studio';
+
+const UserProfile = () => (
+  <Vertical gap={12}>
+    <Text variant="heading">User Profile</Text>
+    <TextField label="Name" />
+    <TextField label="Email" />
+  </Vertical>
+);
+```
+
+### Center
+
+A `View` component that centers its children both horizontally and vertically.
+
+**Example:**
+```tsx
+import { Center, Loader } from '@app-studio';
+
+const LoadingScreen = () => (
+  <Center style={{ height: '100vh' }}>
+    <Loader size="lg" />
+  </Center>
+);
+```
+
+## II. General Components
+
+### Button
+
+A standard button component with multiple variants, sizes, and states.
+
+**Example:**
+```tsx
+import { Button, Horizontal } from '@app-studio';
+
+const ButtonExamples = () => (
+  <Horizontal gap={8} alignItems="center">
+    <Button variant="primary" size="md">Primary</Button>
+    <Button variant="secondary" size="sm">Secondary</Button>
+    <Button isLoading>Loading</Button>
+    <Button isDisabled>Disabled</Button>
+  </Horizontal>
+);
+```
+
+### Icon
+
+Renders an SVG icon from the library's icon set. It can be customized with props for size, color, and more.
+
+**Example:**
+```tsx
+import { Icon, Horizontal, useTheme } from '@app-studio';
+
+const IconExamples = () => {
+  const { theme } = useTheme();
+  return (
+    <Horizontal gap={16} alignItems="center">
+      <Icon name="Home" size={24} />
+      <Icon name="User" size={24} color={theme-primary} />
+      <Icon name="CheckCircle" size={24} color="green" filled />
+    </Horizontal>
+  );
+};
+```
+
+### Text
+
+A component for rendering text with consistent typography based on the theme-
+
+**Example:**
+```tsx
+import { Text, Vertical } from '@app-studio';
+
+const TextExamples = () => (
+  <Vertical gap={4}>
+    <Text variant="heading">This is a Heading</Text>
+    <Text>This is standard body text.</Text>
+    <Text variant="label" color="gray">This is a label.</Text>
+  </Vertical>
+);
+```
+
+### Title
+
+A component for rendering animated and highlighted titles in hero sections and other prominent areas of the UI.
+
+**Example:**
+```tsx
+import { Title } from '@app-studio/components';
+
+const HeroTitle = () => (
+  <Title
+    size="xl"
+    highlightText="Platform"
+    highlightStyle="gradient"
+    highlightColor="theme-primary"
+    highlightSecondaryColor="theme-secondary"
+    centered
+  >
+    Welcome to Our Platform
+  </Title>
+);
+```
+
+For detailed documentation, see [Title Component](./components/Title.mdx).
+
+## III. Form Components
+
+### TextField
+
+A complete text input field component including a label, helper text, and error handling.
+
+**Example:**
+```tsx
+import { TextField } from '@app-studio';
+
+const FormExample = () => (
+  <TextField
+    label="Email Address"
+    name="email"
+    placeholder="you@example.com"
+    helperText="We'll never share your email."
+  />
+);
+```
+
+### FormikTextField
+
+A wrapper around `TextField` that integrates seamlessly with Formik. It automatically handles value, `onChange`, `onBlur`, and error display.
+
+**Example:**
+```tsx
+import { FormikTextField } from '@app-studio';
+import { Formik, Form } from 'formik';
+
+const MyForm = () => (
+  <Formik initialValues={{ email: '' }} onSubmit={() => {}}>
+    <Form>
+      <FormikTextField
+        label="Email Address"
+        name="email"
+        type="email"
+        placeholder="you@example.com"
+      />
+    </Form>
+  </Formik>
+);
+```
+
+### ChatInput
+
+A customizable chat input field with support for file uploads, prompt examples, and agent controls.
+
+**Example:**
+```tsx
+import { ChatInput } from '@app-studio/components';
+import { useState } from 'react';
+
+const ChatExample = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSubmit = (message) => {
+    console.log('Message submitted:', message);
+    setInputValue('');
+  };
+
+  return (
+    <ChatInput
+      onSubmit={handleSubmit}
+      value={inputValue}
+      onChange={setInputValue}
+      placeholder="Type your message here..."
+      hideAttachments={false}
+    />
+  );
+};
+```
+
+For detailed documentation, see [ChatInput Component](./components/ChatInput.mdx).
+
+## IV. Feedback Components
+
+### Alert
+
+A component to display important, contextual messages to the user.
+
+**Example:**
+```tsx
+import { Alert } from '@app-studio';
+
+const AlertExample = () => (
+  <Alert
+    status="warning"
+    title="Attention Required"
+    description="Your session is about to expire. Please save your work."
+  />
+);
+```
+
+### Modal
+
+A dialog window that overlays the main content.
+
+**Example:**
+```tsx
+import { Modal, Button, useModal } from '@app-studio';
+
+const MyModal = () => {
+  const { openModal } = useModal();
+  return (
+    <>
+      <Button onClick={() => openModal('my-modal-id')}>Open Modal</Button>
+      <Modal id="my-modal-id" title="My Modal">
+        <p>This is the modal content.</p>
+      </Modal>
+    </>
+  );
+};
+```
+
+### Toast
+
+A small, non-intrusive notification that appears temporarily.
+
+**Example:**
+```tsx
+import { Button, showToast } from '@app-studio';
+
+const ToastButton = () => (
+  <Button onClick={() => showToast('success', 'Success!', 'Your action was successful.')}>
+    Show Success Toast
+  </Button>
+);
+```
+
+### Tooltip
+
+A small pop-up that displays information when a user hovers over an element.
+
+**Example:**
+```tsx
+import { Tooltip, Button } from '@app-studio';
+
+const TooltipExample = () => (
+  <Tooltip label="This is a tooltip">
+    <Button>Hover me</Button>
+  </Tooltip>
+);
+```
+

package/docs/contributing/documentation.md

@@ -0,0 +1,153 @@
+# Contributing to Documentation
+
+This guide explains how to contribute to the documentation for the App Studio Components Component Library.
+
+## Documentation Structure
+
+The documentation is organized into the following sections:
+
+- **Getting Started**: Quick start guides for new users
+- **Component Development**: Guides for building components
+- **Design System**: Information about theming and styling
+- **API Reference**: Detailed API documentation for all components
+- **Tutorials**: Step-by-step tutorials for common tasks
+- **Contributing**: Guidelines for contributing to the library
+
+## Documentation Tools
+
+The documentation uses the following tools:
+
+- **Markdown**: Most documentation is written in Markdown format
+- **MDX**: Component documentation uses MDX for interactive examples
+- **bot-doc**: Automated documentation generation tool
+
+## Writing Documentation
+
+When writing documentation, follow these guidelines:
+
+### General Guidelines
+
+- Use clear, concise language
+- Use proper grammar and spelling
+- Use consistent terminology
+- Use headings to organize content
+- Include examples where appropriate
+- Link to related documentation
+
+### Markdown Formatting
+
+- Use `#` for top-level headings, `##` for second-level headings, etc.
+- Use backticks for inline code: `` `code` ``
+- Use triple backticks for code blocks:
+  ```
+  ```jsx
+  // Code here
+  ```
+  ```
+- Use `*` or `_` for emphasis: *italic* or _italic_
+- Use `**` or `__` for strong emphasis: **bold** or __bold__
+- Use `>` for blockquotes
+- Use `- ` for unordered lists
+- Use `1. ` for ordered lists
+- Use `[text](url)` for links
+- Use `![alt text](image-url)` for images
+
+### Component Documentation
+
+Component documentation should include:
+
+1. **Import** - How to import the component
+2. **Props** - Detailed list of props with types and descriptions
+3. **Examples** - Basic usage examples
+4. **Variants** - Available variants and their usage
+5. **Compound Components** - Sub-components (if applicable)
+6. **Accessibility** - Accessibility features and considerations
+7. **Best Practices** - Recommended usage patterns
+
+Example:
+
+```mdx
+# Button
+
+The Button component is used to trigger an action or event.
+
+## Import
+
+```jsx
+import { Button } from '@app-studio/components';
+```
+
+## 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 |
+| isDisabled | boolean | false | Whether the button is disabled |
+| isLoading | boolean | false | Whether the button is in a loading state |
+
+## 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>
+</>
+```
+```
+
+## Generating Component Documentation
+
+Component documentation is automatically generated using the `bot-doc` tool. To generate documentation for a component:
+
+```bash
+npm run bot-doc -- ComponentName src/components/ComponentName
+```
+
+To regenerate documentation for all components:
+
+```bash
+npm run create-docs
+```
+
+## Documentation Review Process
+
+Before submitting documentation changes, review your changes for:
+
+1. **Accuracy**: Ensure the information is correct
+2. **Completeness**: Ensure all relevant information is included
+3. **Clarity**: Ensure the information is easy to understand
+4. **Consistency**: Ensure the style and terminology are consistent
+5. **Examples**: Ensure examples are clear and work as expected
+
+## Submitting Documentation Changes
+
+To submit documentation changes:
+
+1. Create a branch for your changes
+2. Make your changes
+3. Test your changes locally
+4. Commit your changes with a clear commit message
+5. Push your changes to your branch
+6. Create a pull request
+
+## Documentation Best Practices
+
+- **Be concise**: Use clear, direct language
+- **Use examples**: Include code examples for complex concepts
+- **Be consistent**: Use consistent terminology and formatting
+- **Link related content**: Add links to related documentation
+- **Update related docs**: When changing one document, update related documents
+- **Test code examples**: Ensure all code examples work as expected
+- **Use proper grammar**: Check spelling and grammar
+- **Use proper formatting**: Use consistent Markdown formatting