@redseed/redseed-ui-vue3 6.0.4 → 6.0.5

package/00-component-overview.md

@@ -0,0 +1,294 @@
+# RedSeed UI Component Library - Vue 3
+
+A comprehensive Vue 3 component library designed for building modern, accessible, and responsive user interfaces. This library provides a complete set of components organized by functionality and use case.
+
+## Component Categories
+
+### 1. [Layout Components](./01-layout-components.md)
+Structural components for organizing page content, including layouts, headers, sections, and page structure.
+
+**Key Components:** SingleColumnLayout, TwoColumnLayout, PageHeader, SectionHeader, HeroSection
+
+### 2. [Button Components](./02-button-components.md)
+Interactive elements for user actions, with various styles and grouping options.
+
+**Key Components:** ButtonPrimary, ButtonSecondary, ButtonTertiary, ButtonGroup, ButtonCard
+
+### 3. [Form Components](./03-form-components.md)
+Complete form system including wrappers, fields, and validation support.
+
+**Key Components:** FormWrapperBuild, FormWrapperLMS, FormFieldText, FormFieldEmail, FormFieldSelect
+
+### 4. [Card Components](./04-card-components.md)
+Content containers for displaying information in organized, visually appealing sections.
+
+**Key Components:** Card, CardHeader, ButtonCard, RadioCard, MetricCard, CardGroup
+
+### 5. [Text Components](./05-text-components.md)
+Typography and text formatting components for consistent content presentation.
+
+**Key Components:** BodyText, ReadMore, Badge components, MessageBox, MetaInfo
+
+### 6. [Data Display Components](./06-data-display-components.md)
+Components for presenting structured data, lists, tables, and pagination.
+
+**Key Components:** Table, List, Pagination, Sorting, ActivityFeed
+
+### 7. [Interactive Components](./07-interactive-components.md)
+Dynamic UI elements that respond to user interactions.
+
+**Key Components:** Modal, DropdownMenu, Toggle, Switcher, ProgressTracker, Loader
+
+### 8. [Media Components](./08-media-components.md)
+Components for displaying images, logos, and visual content.
+
+**Key Components:** Image variants, Logo components, responsive image handling
+
+### 9. [Social Components](./09-social-components.md)
+Social media integration and authentication components.
+
+**Key Components:** SignInWithGoogle, SignUpWithGoogle
+
+### 10. [Helper Components](./10-helper-components.md)
+Utility functions and supporting components for enhanced development experience.
+
+**Key Components:** ResponsiveWidth, Lottie integration, Lodash utilities
+
+## Getting Started
+
+### Installation
+```bash
+npm install @redseed/ui-vue3
+```
+
+### Basic Usage
+```vue
+<template>
+  <SingleColumnLayout>
+    <PageHeader title="Welcome" subtitle="Get started with our platform">
+      <template #actions>
+        <ButtonPrimary>Get Started</ButtonPrimary>
+      </template>
+    </PageHeader>
+    
+    <Card>
+      <CardHeader title="Quick Start">
+        <template #actions>
+          <ButtonSecondary>Learn More</ButtonSecondary>
+        </template>
+      </CardHeader>
+      <BodyText>
+        Welcome to our platform. This is a comprehensive guide to get you started.
+      </BodyText>
+    </Card>
+  </SingleColumnLayout>
+</template>
+
+<script setup>
+import {
+  SingleColumnLayout,
+  PageHeader,
+  ButtonPrimary,
+  ButtonSecondary,
+  Card,
+  CardHeader,
+  BodyText
+} from '@redseed/ui-vue3'
+</script>
+```
+
+## Design Principles
+
+### 1. **Consistency**
+All components follow consistent design patterns, spacing, and interaction behaviors.
+
+### 2. **Accessibility**
+Every component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and screen reader support.
+
+### 3. **Responsive Design**
+Components are designed to work seamlessly across all device sizes and screen resolutions.
+
+### 4. **Performance**
+Optimized components with minimal bundle impact and efficient rendering.
+
+### 5. **Flexibility**
+Components are highly customizable while maintaining design consistency.
+
+## Platform-Specific Components
+
+The library includes components specifically designed for different RedSeed platforms:
+
+- **Build Platform:** FormWrapperBuild, LogoRedSeedBuild
+- **LMS Platform:** FormWrapperLMS, LogoRedSeedLMS
+- **Coach Platform:** LogoRedSeedCoach
+- **Courses Platform:** LogoRedSeedCourses
+
+## Styling and Theming
+
+### Tailwind CSS Integration
+The library is built on Tailwind CSS and includes custom design tokens for consistent styling.
+
+### Custom Properties
+Components use CSS custom properties for easy theming and customization.
+
+### Responsive Breakpoints
+Consistent breakpoint system for responsive design across all components.
+
+## Best Practices
+
+### 1. **Component Selection**
+- Choose components based on functionality, not appearance
+- Use the most specific component for your use case
+- Combine components to create complex interfaces
+
+### 2. **Accessibility**
+- Always provide meaningful labels and descriptions
+- Test with keyboard navigation and screen readers
+- Ensure sufficient color contrast
+
+### 3. **Performance**
+- Use lazy loading for images and heavy components
+- Implement proper loading states
+- Optimize bundle size by importing only needed components
+
+### 4. **Responsive Design**
+- Test components on various screen sizes
+- Use responsive utilities appropriately
+- Consider mobile-first design principles
+
+### 5. **Error Handling**
+- Provide clear error messages
+- Implement proper validation
+- Handle edge cases gracefully
+
+## Common Patterns
+
+### Form Patterns
+```vue
+<template>
+  <FormWrapperBuild @submit="handleSubmit">
+    <FormFieldset legend="Personal Information">
+      <FormFieldText v-model="name" label="Name" required />
+      <FormFieldEmail v-model="email" label="Email" required />
+    </FormFieldset>
+    
+    <FormFieldset legend="Preferences">
+      <FormFieldCheckbox v-model="newsletter" label="Subscribe to newsletter" />
+      <Toggle v-model="notifications" label="Enable notifications" />
+    </FormFieldset>
+    
+    <ButtonPrimary type="submit">Save Changes</ButtonPrimary>
+  </FormWrapperBuild>
+</template>
+```
+
+### Data Display Patterns
+```vue
+<template>
+  <div class="data-section">
+    <SectionHeader title="Users" description="Manage user accounts">
+      <template #actions>
+        <ButtonPrimary>Add User</ButtonPrimary>
+      </template>
+    </SectionHeader>
+    
+    <Table>
+      <thead>
+        <tr>
+          <Th sortable @sort="handleSort">Name</Th>
+          <Th>Email</Th>
+          <Th>Status</Th>
+          <Th>Actions</Th>
+        </tr>
+      </thead>
+      <tbody>
+        <Tr v-for="user in users" :key="user.id">
+          <TdUser :user="user" />
+          <Td>{{ user.email }}</Td>
+          <Td>
+            <BadgeSuccess v-if="user.active">Active</BadgeSuccess>
+            <BadgeNeutral v-else>Inactive</BadgeNeutral>
+          </Td>
+          <Td>
+            <ButtonSecondary size="sm">Edit</ButtonSecondary>
+          </Td>
+        </Tr>
+      </tbody>
+    </Table>
+    
+    <SectionFooter>
+      <RecordCount :current="users.length" :total="totalUsers" />
+      <Pagination 
+        :currentPage="currentPage"
+        :totalPages="totalPages"
+        @pageChange="handlePageChange"
+      />
+    </SectionFooter>
+  </div>
+</template>
+```
+
+### Modal Patterns
+```vue
+<template>
+  <Modal 
+    :isOpen="showModal"
+    @close="closeModal"
+    title="Confirm Action"
+  >
+    <BodyText>
+      Are you sure you want to perform this action? This cannot be undone.
+    </BodyText>
+    
+    <template #actions>
+      <ButtonSecondary @click="closeModal">Cancel</ButtonSecondary>
+      <ButtonPrimary @click="confirmAction">Confirm</ButtonPrimary>
+    </template>
+  </Modal>
+</template>
+```
+
+## Migration and Updates
+
+### Version Compatibility
+- Check the changelog for breaking changes
+- Test components after updates
+- Follow migration guides for major version changes
+
+### Deprecation Notices
+- Monitor deprecation warnings
+- Plan migration for deprecated components
+- Use recommended alternatives
+
+## Support and Resources
+
+### Documentation
+- Each component category has detailed documentation
+- Examples and use cases provided
+- Best practices and accessibility guidelines
+
+### Storybook
+- Interactive component examples
+- Props documentation
+- Visual testing and development
+
+### Community
+- GitHub repository for issues and contributions
+- Discussion forums for questions and feedback
+- Regular updates and improvements
+
+## Contributing
+
+### Development Guidelines
+- Follow established patterns and conventions
+- Include proper documentation and examples
+- Ensure accessibility compliance
+- Add comprehensive tests
+
+### Component Development
+- Use TypeScript for type safety
+- Follow Vue 3 Composition API patterns
+- Include proper prop validation
+- Implement responsive design principles
+
+This component library is designed to accelerate development while maintaining high quality and consistency across RedSeed applications. Each component is carefully crafted to provide the best possible user experience while being easy to use and customize. 

package/01-layout-components.md

@@ -0,0 +1,103 @@
+# Layout Components
+
+Layout components provide the structural foundation for organizing content on pages. They handle page-level organization, section management, and responsive layouts.
+
+## Components
+
+### SingleColumnLayout
+**When to use:** For pages that need a simple, centered single-column layout with consistent spacing and maximum width constraints.
+**Implementation:**
+```vue
+<template>
+  <SingleColumnLayout>
+    <h1>Page Title</h1>
+    <p>Page content goes here...</p>
+  </SingleColumnLayout>
+</template>
+```
+
+### TwoColumnLayout
+**When to use:** For pages that need a sidebar and main content area, such as dashboards, documentation pages, or admin interfaces.
+**Implementation:**
+```vue
+<template>
+  <TwoColumnLayout>
+    <template #sidebar>
+      <nav>Sidebar navigation</nav>
+    </template>
+    <template #main>
+      <h1>Main Content</h1>
+      <p>Main content area...</p>
+    </template>
+  </TwoColumnLayout>
+</template>
+```
+
+### PageHeader
+**When to use:** At the top of pages to provide consistent page titles, breadcrumbs, and action buttons.
+**Implementation:**
+```vue
+<template>
+  <PageHeader title="Page Title" subtitle="Optional subtitle">
+    <template #actions>
+      <ButtonPrimary>Action Button</ButtonPrimary>
+    </template>
+  </PageHeader>
+</template>
+```
+
+### SectionHeader
+**When to use:** To introduce sections of content with titles, descriptions, and optional actions.
+**Implementation:**
+```vue
+<template>
+  <SectionHeader title="Section Title" description="Section description">
+    <template #actions>
+      <ButtonSecondary>Section Action</ButtonSecondary>
+    </template>
+  </SectionHeader>
+</template>
+```
+
+### SectionFooter
+**When to use:** At the bottom of content sections to provide pagination, action buttons, or summary information.
+**Implementation:**
+```vue
+<template>
+  <SectionFooter>
+    <Pagination />
+    <ButtonPrimary>Save Changes</ButtonPrimary>
+  </SectionFooter>
+</template>
+```
+
+### HeroSection
+**When to use:** For landing pages, marketing pages, or any page that needs a prominent introduction section with large text and call-to-action buttons.
+**Implementation:**
+```vue
+<template>
+  <HeroSection 
+    title="Welcome to Our Platform" 
+    subtitle="The best solution for your needs"
+  >
+    <template #actions>
+      <ButtonPrimary>Get Started</ButtonPrimary>
+      <ButtonSecondary>Learn More</ButtonSecondary>
+    </template>
+  </HeroSection>
+</template>
+```
+
+## Best Practices
+
+1. **Consistent Structure:** Use layout components consistently across your application to maintain visual hierarchy and user experience.
+2. **Responsive Design:** Layout components are designed to be responsive - test on different screen sizes.
+3. **Content Hierarchy:** Use PageHeader for page-level titles and SectionHeader for content section titles.
+4. **Action Placement:** Place primary actions in PageHeader or SectionHeader, secondary actions in SectionFooter.
+5. **Nesting:** Layout components can be nested - use SectionHeader/SectionFooter within layout containers for complex pages.
+
+## Accessibility
+
+- Layout components include proper semantic HTML structure
+- Screen readers can navigate through the layout hierarchy
+- Focus management is handled appropriately for keyboard navigation 

package/02-button-components.md

@@ -0,0 +1,136 @@
+# Button Components
+
+Button components provide interactive elements for user actions. They come in various styles and sizes to match different use cases and visual hierarchies.
+
+## Button Variants
+
+### ButtonPrimary
+**When to use:** For the main call-to-action on a page or form, such as "Submit", "Save", "Continue", or "Get Started".
+**Implementation:**
+```vue
+<template>
+  <ButtonPrimary @click="handleSubmit">Submit Form</ButtonPrimary>
+</template>
+```
+
+### ButtonPrimaryFull
+**When to use:** Same as ButtonPrimary but spans the full width of its container. Use when the button should be the primary focus of a section.
+**Implementation:**
+```vue
+<template>
+  <ButtonPrimaryFull @click="handleSubmit">Submit Form</ButtonPrimaryFull>
+</template>
+```
+
+### ButtonSecondary
+**When to use:** For secondary actions that support the primary action, such as "Cancel", "Back", or "Edit".
+**Implementation:**
+```vue
+<template>
+  <ButtonSecondary @click="handleCancel">Cancel</ButtonSecondary>
+</template>
+```
+
+### ButtonSecondaryFull
+**When to use:** Same as ButtonSecondary but spans the full width of its container.
+**Implementation:**
+```vue
+<template>
+  <ButtonSecondaryFull @click="handleCancel">Cancel</ButtonSecondaryFull>
+</template>
+```
+
+### ButtonSecondaryBrand
+**When to use:** For brand-specific secondary actions that need to stand out while still being secondary to the primary action.
+**Implementation:**
+```vue
+<template>
+  <ButtonSecondaryBrand @click="handleBrandAction">Brand Action</ButtonSecondaryBrand>
+</template>
+```
+
+### ButtonSecondaryBrandFull
+**When to use:** Same as ButtonSecondaryBrand but spans the full width of its container.
+**Implementation:**
+```vue
+<template>
+  <ButtonSecondaryBrandFull @click="handleBrandAction">Brand Action</ButtonSecondaryBrandFull>
+</template>
+```
+
+### ButtonTertiary
+**When to use:** For less prominent actions, such as "Learn More", "View Details", or utility actions.
+**Implementation:**
+```vue
+<template>
+  <ButtonTertiary @click="handleLearnMore">Learn More</ButtonTertiary>
+</template>
+```
+
+### ButtonTertiaryFull
+**When to use:** Same as ButtonTertiary but spans the full width of its container.
+**Implementation:**
+```vue
+<template>
+  <ButtonTertiaryFull @click="handleLearnMore">Learn More</ButtonTertiaryFull>
+</template>
+```
+
+## Button Groups
+
+### ButtonGroup
+**When to use:** When you have related actions that should be visually grouped together, such as "Save" and "Cancel" buttons.
+**Implementation:**
+```vue
+<template>
+  <ButtonGroup>
+    <ButtonGroupItem>
+      <ButtonSecondary @click="handleCancel">Cancel</ButtonSecondary>
+    </ButtonGroupItem>
+    <ButtonGroupItem>
+      <ButtonPrimary @click="handleSave">Save</ButtonPrimary>
+    </ButtonGroupItem>
+  </ButtonGroup>
+</template>
+```
+
+### ButtonGroupItem
+**When to use:** As a wrapper for individual buttons within a ButtonGroup to ensure proper spacing and styling.
+**Implementation:**
+```vue
+<template>
+  <ButtonGroupItem>
+    <ButtonPrimary>Action</ButtonPrimary>
+  </ButtonGroupItem>
+</template>
+```
+
+## Button Cards
+
+### ButtonCard
+**When to use:** When you need a clickable card that acts as a button, such as for feature selection or navigation cards.
+**Implementation:**
+```vue
+<template>
+  <ButtonCard @click="handleCardClick">
+    <h3>Card Title</h3>
+    <p>Card description</p>
+  </ButtonCard>
+</template>
+```
+
+## Best Practices
+
+1. **Visual Hierarchy:** Use ButtonPrimary for the most important action, ButtonSecondary for supporting actions, and ButtonTertiary for less important actions.
+2. **Consistent Spacing:** Use ButtonGroup when you have multiple related buttons to ensure consistent spacing.
+3. **Full Width:** Use full-width variants when the button should be the primary focus of a section or form.
+4. **Accessibility:** All buttons include proper ARIA attributes and keyboard navigation support.
+5. **Loading States:** Consider adding loading states to buttons that trigger async actions.
+6. **Icon Usage:** You can add icons to buttons using slots or by placing them before/after the button text.
+
+## Accessibility
+
+- All buttons are keyboard accessible
+- Proper ARIA labels and roles are included
+- Focus states are clearly visible
+- Screen reader support for button descriptions and states