@mhmo91/schmancy 0.2.193 → 0.2.195

package/ai/table.md

@@ -0,0 +1,334 @@
+# Schmancy Table - AI Reference
+
+```js
+// Basic Table
+<schmancy-table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+      <td>Admin</td>
+    </tr>
+    <tr>
+      <td>Jane Smith</td>
+      <td>jane@example.com</td>
+      <td>User</td>
+    </tr>
+  </tbody>
+</schmancy-table>
+
+// Table with custom row component
+<schmancy-table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+      <th>Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <schmancy-row
+      .data=${{ name: 'John Doe', email: 'john@example.com', role: 'Admin' }}
+      @click=${handleRowClick}>
+      <td>${data.name}</td>
+      <td>${data.email}</td>
+      <td>${data.role}</td>
+      <td>
+        <schmancy-button kind="tertiary" size="small">Edit</schmancy-button>
+        <schmancy-button kind="danger" size="small">Delete</schmancy-button>
+      </td>
+    </schmancy-row>
+    <!-- More rows -->
+  </tbody>
+</schmancy-table>
+
+// Data Table with programmatic columns and custom sorting
+<schmancy-table
+  .columns=${[
+    { 
+      name: 'Name', 
+      key: 'name', 
+      sortable: true 
+    },
+    { 
+      name: 'Date Joined', 
+      key: 'dateJoined', 
+      sortable: true,
+      // Custom sort by Unix timestamp
+      value: (item) => new Date(item.dateJoined).getTime()
+    },
+    { 
+      name: 'Profile Completion', 
+      key: 'profile',
+      sortable: true,
+      // Sort by completion percentage 
+      value: (item) => item.profile.completionPercentage,
+      // Display with custom rendering
+      render: (item) => html`${item.profile.completionPercentage}%`
+    }
+  ]}
+  .data=${users}
+  sortable>
+</schmancy-table>
+
+// Table Properties
+striped: boolean          // Apply alternating row colors
+bordered: boolean         // Add borders to cells
+compact: boolean          // Reduce cell padding
+hover: boolean            // Highlight rows on hover
+responsive: boolean       // Make table horizontally scrollable on small screens
+sortable: boolean         // Enable column sorting
+selectable: boolean       // Enable row selection
+loading: boolean          // Show loading state
+
+// Column Configuration Properties (when using programmatic columns)
+name: string              // Display name for the column header
+key?: keyof T             // Object property to access for this column
+align?: string            // Text alignment ('left', 'right', 'center')
+weight?: string           // Font weight ('normal', 'bold')
+render?: function         // Custom render function for complex content: (item) => TemplateResult
+sortable?: boolean        // Whether this column supports sorting
+value?: function          // Custom value function for sorting: (item) => any
+
+// Row Properties
+selected: boolean         // Whether the row is selected
+data: object              // Data object for the row
+
+// Table Events
+@sort      // Fires when a sortable column is clicked, with { detail: { column, direction } }
+@selection // Fires when row selection changes, with { detail: { selected } }
+
+// Examples
+// Basic responsive table
+<schmancy-table
+  responsive
+  striped
+  hover>
+  <thead>
+    <tr>
+      <th>ID</th>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Created</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>John Doe</td>
+      <td>john@example.com</td>
+      <td>2023-04-12</td>
+      <td>
+        <schmancy-badge variant="success">Active</schmancy-badge>
+      </td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jane Smith</td>
+      <td>jane@example.com</td>
+      <td>2023-04-15</td>
+      <td>
+        <schmancy-badge variant="warning">Pending</schmancy-badge>
+      </td>
+    </tr>
+  </tbody>
+</schmancy-table>
+
+// Sortable table - standard HTML structure
+<schmancy-table
+  sortable
+  @sort=${(e) => sortData(e.detail.column, e.detail.direction)}>
+  <thead>
+    <tr>
+      <th data-sort="id">ID</th>
+      <th data-sort="name">Name</th>
+      <th data-sort="email">Email</th>
+      <th data-sort="created">Created</th>
+      <th>Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${sortedData.map(item => html`
+      <tr>
+        <td>${item.id}</td>
+        <td>${item.name}</td>
+        <td>${item.email}</td>
+        <td>${formatDate(item.created)}</td>
+        <td>
+          <schmancy-icon-button
+            icon="edit"
+            variant="tertiary"
+            @click=${() => editItem(item)}>
+          </schmancy-icon-button>
+          <schmancy-icon-button
+            icon="delete"
+            variant="danger"
+            @click=${() => deleteItem(item)}>
+          </schmancy-icon-button>
+        </td>
+      </tr>
+    `)}
+  </tbody>
+</schmancy-table>
+
+// Sortable table - programmatic with custom value functions
+<schmancy-table
+  .data=${userData}
+  .columns=${[
+    {
+      name: 'ID', 
+      key: 'id', 
+      sortable: true
+    },
+    {
+      name: 'User', 
+      key: 'user', 
+      sortable: true,
+      // Sort by last name for "user" column
+      value: (item) => item.user.lastName,
+      // Custom render function for complex data
+      render: (item) => html`
+        <div class="flex items-center">
+          <schmancy-avatar src=${item.user.avatar} size="sm"></schmancy-avatar>
+          <div class="ml-2">
+            <div>${item.user.firstName} ${item.user.lastName}</div>
+            <div class="text-sm text-gray-500">${item.user.email}</div>
+          </div>
+        </div>
+      `
+    },
+    {
+      name: 'Status', 
+      key: 'status', 
+      sortable: true,
+      // Sort by status priority (numeric value) but display text
+      value: (item) => statusPriorities[item.status] || 0,
+      render: (item) => html`
+        <schmancy-badge variant=${getStatusVariant(item.status)}>
+          ${item.status}
+        </schmancy-badge>
+      `
+    },
+    {
+      name: 'Created', 
+      key: 'createdAt', 
+      sortable: true,
+      // Sort by timestamp but display formatted date
+      value: (item) => new Date(item.createdAt).getTime(),
+      render: (item) => formatDate(item.createdAt)
+    },
+    {
+      name: 'Actions',
+      render: (item) => html`
+        <div class="flex space-x-2">
+          <schmancy-icon-button icon="edit" @click=${() => editItem(item)}></schmancy-icon-button>
+          <schmancy-icon-button icon="delete" @click=${() => deleteItem(item)}></schmancy-icon-button>
+        </div>
+      `
+    }
+  ]}
+  sortable
+  @sort=${(e) => console.log('Sort changed:', e.detail)}>
+</schmancy-table>
+
+// Selectable table
+<schmancy-table
+  selectable
+  @selection=${(e) => handleSelectedRows(e.detail.selected)}>
+  <thead>
+    <tr>
+      <th>
+        <schmancy-checkbox
+          .checked=${allSelected}
+          .indeterminate=${someSelected && !allSelected}
+          @change=${toggleAllSelection}>
+        </schmancy-checkbox>
+      </th>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${data.map(item => html`
+      <schmancy-row
+        .data=${item}
+        .selected=${selectedRows.includes(item.id)}>
+        <td>
+          <schmancy-checkbox
+            .checked=${selectedRows.includes(item.id)}
+            @change=${(e) => toggleRowSelection(item.id, e.target.checked)}>
+          </schmancy-checkbox>
+        </td>
+        <td>${item.name}</td>
+        <td>${item.email}</td>
+        <td>${item.role}</td>
+      </schmancy-row>
+    `)}
+  </tbody>
+</schmancy-table>
+
+// Loading state
+<schmancy-table loading>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- Content will be dimmed and a loading indicator shown -->
+  </tbody>
+</schmancy-table>
+
+// Pagination (with external component)
+<div>
+  <schmancy-table>
+    <!-- Table content -->
+  </schmancy-table>
+  
+  <div style="display: flex; justify-content: space-between; margin-top: 16px;">
+    <div>
+      Showing ${startIndex + 1} to ${Math.min(endIndex, totalItems)} of ${totalItems} items
+    </div>
+    
+    <div>
+      <schmancy-button
+        variant="tertiary"
+        size="small"
+        ?disabled=${page === 1}
+        @click=${() => setPage(page - 1)}>
+        Previous
+      </schmancy-button>
+      
+      <!-- Page numbers -->
+      ${generatePageNumbers(page, totalPages).map(p => html`
+        <schmancy-button
+          variant=${p === page ? "primary" : "tertiary"}
+          size="small"
+          @click=${() => setPage(p)}>
+          ${p}
+        </schmancy-button>
+      `)}
+      
+      <schmancy-button
+        variant="tertiary"
+        size="small"
+        ?disabled=${page === totalPages}
+        @click=${() => setPage(page + 1)}>
+        Next
+      </schmancy-button>
+    </div>
+  </div>
+</div>
+```

package/ai/tabs.md

@@ -0,0 +1,71 @@
+# Schmancy Tabs - AI Reference
+
+```js
+// Basic Tabs
+<schmancy-tabs value="tab1">
+  <schmancy-tab value="tab1" label="Tab 1"></schmancy-tab>
+  <schmancy-tab value="tab2" label="Tab 2"></schmancy-tab>
+  <schmancy-tab value="tab3" label="Tab 3"></schmancy-tab>
+  
+  <div slot="panel" data-tab="tab1">Content for Tab 1</div>
+  <div slot="panel" data-tab="tab2">Content for Tab 2</div>
+  <div slot="panel" data-tab="tab3">Content for Tab 3</div>
+</schmancy-tabs>
+
+// Tabs with Scrolling
+<schmancy-tabs value="tab1" scrollable>
+  <!-- Tab definitions -->
+</schmancy-tabs>
+
+// Tabs Groups (for complex tab structures)
+<schmancy-tabs-group value="tab1" @change=${handleTabChange}>
+  <schmancy-tab value="tab1" label="Tab 1"></schmancy-tab>
+  <schmancy-tab value="tab2" label="Tab 2"></schmancy-tab>
+  <schmancy-tab value="tab3" label="Tab 3"></schmancy-tab>
+  
+  <div data-tab="tab1">Content for Tab 1</div>
+  <div data-tab="tab2">Content for Tab 2</div>
+  <div data-tab="tab3">Content for Tab 3</div>
+</schmancy-tabs-group>
+
+// Tabs with Icons
+<schmancy-tabs value="tab1">
+  <schmancy-tab value="tab1">
+    <schmancy-icon icon="home"></schmancy-icon>
+    <span>Home</span>
+  </schmancy-tab>
+  <schmancy-tab value="tab2">
+    <schmancy-icon icon="settings"></schmancy-icon>
+    <span>Settings</span>
+  </schmancy-tab>
+</schmancy-tabs>
+
+// Tab Attributes
+value="tab-id" // Unique identifier for the tab
+label="Tab Label" // Text label (optional if using custom content)
+disabled? // Disabled state
+icon="icon-name" // Icon to display (alternative to using schmancy-icon in content)
+
+// Tab Methods and Events
+tabs.select(value) -> void // Programmatically select a tab
+@change // Fires when tab selection changes with { detail: { value } }
+
+// Examples
+// Basic usage
+<schmancy-tabs value="tab1" @change=${(e) => console.log('Selected tab:', e.detail.value)}>
+  <schmancy-tab value="tab1" label="Info"></schmancy-tab>
+  <schmancy-tab value="tab2" label="Settings"></schmancy-tab>
+  
+  <div slot="panel" data-tab="tab1">Information content here</div>
+  <div slot="panel" data-tab="tab2">Settings content here</div>
+</schmancy-tabs>
+
+// Dynamic tabs from data
+${tabData.map(tab => html`
+  <schmancy-tab value=${tab.id} label=${tab.label}></schmancy-tab>
+`)}
+
+${tabData.map(tab => html`
+  <div slot="panel" data-tab=${tab.id}>${tab.content}</div>
+`)}
+```

package/ai/template.md

@@ -0,0 +1,144 @@
+# Schmancy AI Documentation Guidelines
+
+This document provides a template and guidelines for creating consistent AI-friendly documentation for Schmancy components.
+
+## Documentation Format
+
+Each component's documentation should follow this structure:
+
+1. **Component Title**: `# Schmancy [Component] - AI Reference`
+2. **Code Block**: Main syntax reference with component usage patterns
+3. **Related Components**: List of related components with links and relationship descriptions
+4. **Technical Details**: Interfaces, types, CSS custom properties, etc.
+5. **Common Use Cases**: Practical examples with explanations
+
+## Code Block Template
+
+```js
+// Component Tag
+<schmancy-[component]
+  [primary-attribute]="value"
+  [boolean-attribute]?
+  @[event-name]=${handler}>
+  <!-- Content/children if applicable -->
+</schmancy-[component]>
+
+// Component Variations (if applicable)
+<schmancy-[component] 
+  variant="[variant]"
+  size="small|medium|large">
+</schmancy-[component]>
+
+// Component Methods
+component.method() -> returnType
+component.property = value
+
+// Event details
+@event-name // { detail: { relevantData } }
+
+// Examples (always number examples for clarity)
+// 1. Basic example
+<schmancy-[component] [primary-attribute]="value">
+  Content
+</schmancy-[component]>
+
+// 2. Advanced example
+<schmancy-[component]
+  [attribute]="value"
+  @[event]=${() => handleEvent()}>
+  <!-- Structured content -->
+</schmancy-[component]>
+```
+
+## Related Components Section
+
+Always include a "Related Components" section that links to other relevant components:
+
+```markdown
+## Related Components
+- **[Related-1](./related-1.md)**: Brief description of relationship
+- **[Related-2](./related-2.md)**: Brief description of relationship
+- **[Related-3](./related-3.md)**: Brief description of relationship
+```
+
+## Technical Details Section
+
+Include relevant technical information:
+
+```markdown
+## Technical Details
+
+### Interfaces
+```typescript
+interface ComponentProps {
+  property: type;
+  optionalProperty?: type;
+}
+```
+
+### CSS Custom Properties (if applicable)
+```css
+--schmancy-component-color: /* Controls the component color */
+--schmancy-component-spacing: /* Controls internal spacing */
+```
+```
+
+## Common Use Cases Section
+
+Provide 2-4 practical use cases with code examples:
+
+```markdown
+### Common Use Cases
+
+1. **Use Case 1**: Brief description
+   ```html
+   <schmancy-[component] specific-attribute="value"></schmancy-[component]>
+   ```
+
+2. **Use Case 2**: Brief description
+   ```html
+   <schmancy-[component] with="specific-configuration"></schmancy-[component]>
+   ```
+```
+
+## Style Guide
+
+1. **Code Examples**:
+   - Number all examples sequentially (e.g., `// 1. Basic example`)
+   - Include descriptive comments
+   - Ensure examples are realistic and complete
+
+2. **Component Descriptions**:
+   - Focus on functionality and API usage
+   - Avoid marketing language
+   - Provide context for when and why to use the component
+
+3. **Cross-Referencing**:
+   - Always link to related components
+   - Explain the relationship (e.g., "Used within", "Alternative to", "Extends")
+
+4. **Formatting**:
+   - Use backticks for inline code references
+   - Use proper markdown headers for sections
+   - Use TypeScript for type definitions
+
+## Component Categories
+
+Organize components according to these categories for better cross-referencing:
+
+1. **Core Infrastructure**: Area, Store, Teleport, RxJS Utils
+2. **Layout Components**: Layout, Surface, Card, Divider
+3. **Navigation & Structure**: Tabs, Menu, Nav-Drawer, Content-Drawer, Sheet, Dialog
+4. **Form Controls**: Form, Input, Textarea, Select, Autocomplete, Checkbox, Radio-Group, Option
+5. **Interactive Elements**: Button, Dropdown, Chips, List, Tree, Table
+6. **Feedback & Status**: Notification, Tooltip, Badge, Busy, Avatar
+7. **Typography & Visual**: Typography, Icons, Animated-Text, Typewriter
+8. **Utilities**: Directives, Theme, Theme-Button, Utils, Types, Delay, Date-Range, Steps
+
+## Examples
+
+See these files for examples of well-formatted component documentation:
+- [area.md](./area.md): Complex service component
+- [form.md](./form.md): Container component
+- [input.md](./input.md): Form field component
+- [store.md](./store.md): State management

package/ai/textarea.md

@@ -0,0 +1,147 @@
+# Schmancy Textarea - AI Reference
+
+```js
+// Basic Textarea
+<schmancy-textarea
+  name="textarea-name"
+  label="Textarea Label"
+  value="Initial text"
+  placeholder="Enter text here..."
+  rows="4"
+  cols="50"
+  maxlength="500"
+  minlength="10"
+  required?
+  disabled?
+  readonly?
+  error="Error message"
+  resize="both|horizontal|vertical|none"
+  @input=${handleInput}
+  @change=${handleChange}>
+</schmancy-textarea>
+
+// Textarea with counter and helper text
+<schmancy-textarea
+  label="Description"
+  maxlength="200"
+  show-counter?
+  helper-text="Briefly describe your issue">
+</schmancy-textarea>
+
+// Auto-growing textarea
+<schmancy-textarea
+  auto-grow?
+  min-rows="2"
+  max-rows="10"
+  label="Comments">
+</schmancy-textarea>
+
+// Textarea Methods
+textarea.focus() -> void           // Focus the textarea
+textarea.blur() -> void            // Remove focus
+textarea.select() -> void          // Select all text
+textarea.validate() -> boolean     // Validate and show error if invalid
+textarea.reset() -> void           // Reset to initial value
+textarea.setCustomValidity(message) -> void  // Set custom validation message
+
+// Textarea Properties
+value: string         // The content of the textarea
+name: string          // The name attribute
+label: string         // Label text
+placeholder: string   // Placeholder text
+rows: number          // Number of rows to display
+cols: number          // Number of columns to display
+minlength: number     // Minimum number of characters required
+maxlength: number     // Maximum number of characters allowed
+disabled: boolean     // Whether the textarea is disabled
+readonly: boolean     // Whether the textarea is read-only
+required: boolean     // Whether the textarea is required
+error: string         // Error message to display
+resize: string        // Resize behavior: "both", "horizontal", "vertical", "none"
+autoGrow: boolean     // Whether the textarea should automatically grow with content
+minRows: number       // Minimum number of rows when auto-growing
+maxRows: number       // Maximum number of rows when auto-growing
+showCounter: boolean  // Whether to show the character counter
+
+// Textarea Events
+@input   // Fires on input with { detail: { value } }
+@change  // Fires when value changes and focus is lost with { detail: { value } }
+@focus   // Fires when textarea gains focus
+@blur    // Fires when textarea loses focus
+
+// Examples
+// Basic usage
+<schmancy-textarea
+  name="comments"
+  label="Comments"
+  placeholder="Enter your comments here"
+  rows="4"
+  required
+  @change=${(e) => console.log('Comments:', e.detail.value)}>
+</schmancy-textarea>
+
+// Textarea with character counter
+<schmancy-textarea
+  name="bio"
+  label="Biography"
+  maxlength="500"
+  show-counter
+  helper-text="Tell us about yourself">
+</schmancy-textarea>
+
+// Auto-growing textarea
+<schmancy-textarea
+  name="notes"
+  label="Meeting Notes"
+  auto-grow
+  min-rows="3"
+  max-rows="15"
+  placeholder="Type your notes here...">
+</schmancy-textarea>
+
+// Usage in a form
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input 
+    name="title" 
+    label="Title" 
+    required>
+  </schmancy-input>
+  
+  <schmancy-textarea
+    name="description"
+    label="Description"
+    rows="5"
+    required>
+  </schmancy-textarea>
+  
+  <schmancy-button type="submit">Submit</schmancy-button>
+</schmancy-form>
+
+// Textarea with error state
+<schmancy-textarea
+  name="feedback"
+  label="Feedback"
+  value=${feedback}
+  error=${feedback.length < 10 ? 'Feedback must be at least 10 characters' : ''}
+  @input=${(e) => feedback = e.detail.value}>
+</schmancy-textarea>
+
+// Textarea with prefilled markdown template
+<schmancy-textarea
+  name="issue"
+  label="Issue Description"
+  value="## Issue Description
+- 
+- 
+
+## Steps to Reproduce
+1. 
+2. 
+3. 
+
+## Expected Behavior
+
+"
+  rows="12">
+</schmancy-textarea>
+```