Remove obsolete scripts and files, update site builder configurations
- Deleted the `import_plans.py`, `run_tests.py`, and `test_run.py` scripts as they are no longer needed. - Updated the initial migration dependency in `0001_initial.py` to reflect recent changes in the `igny8_core_auth` app. - Enhanced the implementation plan documentation to include new phases and updates on the site builder project. - Updated the `vite.config.ts` and `package.json` to integrate testing configurations and dependencies for the site builder.
This commit is contained in:
IGNY8 VPS (Salman)
228
frontend/src/components/shared/README.md
Normal file
228
frontend/src/components/shared/README.md
Normal file
@@ -0,0 +1,228 @@
|
||||
# Shared Component Library
|
||||
|
||||
This directory contains reusable UI components, layouts, and templates that can be shared across multiple frontend applications in the IGNY8 platform.
|
||||
|
||||
## Overview
|
||||
|
||||
The shared component library provides:
|
||||
- **Blocks**: Reusable content blocks (hero sections, feature grids, stats panels)
|
||||
- **Layouts**: Page layout wrappers (default, minimal)
|
||||
- **Templates**: Complete page templates (marketing, landing pages)
|
||||
|
||||
These components are designed to be framework-agnostic where possible, but currently implemented in React/TypeScript.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
shared/
|
||||
├── blocks/ # Content blocks (HeroBlock, FeatureGridBlock, StatsPanel)
|
||||
├── layouts/ # Page layouts (DefaultLayout, MinimalLayout)
|
||||
├── templates/ # Full page templates (MarketingTemplate, LandingTemplate)
|
||||
└── index.ts # Barrel exports
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### In Site Builder (`site-builder/`)
|
||||
|
||||
The Site Builder application imports shared components via the `@shared` alias configured in `vite.config.ts`:
|
||||
|
||||
```typescript
|
||||
import { HeroBlock, MarketingTemplate } from '@shared';
|
||||
```
|
||||
|
||||
### In Main Frontend (`frontend/`)
|
||||
|
||||
Import directly from the shared directory:
|
||||
|
||||
```typescript
|
||||
import { HeroBlock } from '@/components/shared/blocks';
|
||||
import { DefaultLayout } from '@/components/shared/layouts';
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
### Blocks
|
||||
|
||||
#### `HeroBlock`
|
||||
Hero section component for landing pages and marketing sites.
|
||||
|
||||
**Props:**
|
||||
- `heading: string` - Main headline
|
||||
- `subheading?: string` - Supporting text
|
||||
- `ctaText?: string` - Call-to-action button text
|
||||
- `ctaLink?: string` - Call-to-action link URL
|
||||
- `imageUrl?: string` - Hero image URL
|
||||
- `variant?: 'default' | 'centered' | 'split'` - Layout variant
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
<HeroBlock
|
||||
heading="Build Your Site with AI"
|
||||
subheading="Create professional marketing sites in minutes"
|
||||
ctaText="Get Started"
|
||||
ctaLink="/signup"
|
||||
/>
|
||||
```
|
||||
|
||||
#### `FeatureGridBlock`
|
||||
Grid layout for displaying features or benefits.
|
||||
|
||||
**Props:**
|
||||
- `title?: string` - Section title
|
||||
- `features: Array<{ title: string; description: string; icon?: ReactNode }>` - Feature items
|
||||
- `columns?: 2 | 3 | 4` - Number of columns
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
<FeatureGridBlock
|
||||
title="Key Features"
|
||||
features={[
|
||||
{ title: 'AI-Powered', description: 'Generate content automatically' },
|
||||
{ title: 'Fast Setup', description: 'Launch in minutes' },
|
||||
]}
|
||||
columns={3}
|
||||
/>
|
||||
```
|
||||
|
||||
#### `StatsPanel`
|
||||
Statistics display component.
|
||||
|
||||
**Props:**
|
||||
- `stats: Array<{ label: string; value: string | number }>` - Statistics to display
|
||||
- `variant?: 'default' | 'compact'` - Display variant
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
<StatsPanel
|
||||
stats={[
|
||||
{ label: 'Sites Created', value: '1,234' },
|
||||
{ label: 'Active Users', value: '567' },
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
### Layouts
|
||||
|
||||
#### `DefaultLayout`
|
||||
Standard page layout with header, main content area, and footer.
|
||||
|
||||
**Props:**
|
||||
- `children: ReactNode` - Page content
|
||||
- `header?: ReactNode` - Custom header component
|
||||
- `footer?: ReactNode` - Custom footer component
|
||||
- `sidebar?: ReactNode` - Optional sidebar
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
<DefaultLayout>
|
||||
<YourPageContent />
|
||||
</DefaultLayout>
|
||||
```
|
||||
|
||||
#### `MinimalLayout`
|
||||
Minimal layout for focused content pages.
|
||||
|
||||
**Props:**
|
||||
- `children: ReactNode` - Page content
|
||||
- `maxWidth?: string` - Maximum content width
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
<MinimalLayout maxWidth="800px">
|
||||
<ArticleContent />
|
||||
</MinimalLayout>
|
||||
```
|
||||
|
||||
### Templates
|
||||
|
||||
#### `MarketingTemplate`
|
||||
Complete marketing page template with hero, features, and CTA sections.
|
||||
|
||||
**Props:**
|
||||
- `hero: HeroBlockProps` - Hero section configuration
|
||||
- `features?: FeatureGridBlockProps` - Features section
|
||||
- `stats?: StatsPanelProps` - Statistics section
|
||||
- `cta?: { text: string; link: string }` - Call-to-action
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
<MarketingTemplate
|
||||
hero={{
|
||||
heading: "Welcome to IGNY8",
|
||||
subheading: "AI-powered content generation",
|
||||
ctaText: "Start Free Trial",
|
||||
ctaLink: "/signup"
|
||||
}}
|
||||
features={{
|
||||
features: [
|
||||
{ title: 'AI Writer', description: 'Generate content automatically' },
|
||||
{ title: 'Site Builder', description: 'Create sites in minutes' },
|
||||
]
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
#### `LandingTemplate`
|
||||
Landing page template optimized for conversions.
|
||||
|
||||
**Props:**
|
||||
- Similar to `MarketingTemplate` with additional conversion-focused sections
|
||||
|
||||
## Styling
|
||||
|
||||
Components use CSS modules and shared CSS files:
|
||||
- `blocks/blocks.css` - Block component styles
|
||||
- `layouts/layouts.css` - Layout component styles
|
||||
|
||||
Styles are scoped to prevent conflicts. When using in different applications, ensure CSS is imported:
|
||||
|
||||
```typescript
|
||||
import '@shared/blocks/blocks.css';
|
||||
import '@shared/layouts/layouts.css';
|
||||
```
|
||||
|
||||
## TypeScript Types
|
||||
|
||||
All components are fully typed. Import types from the component files:
|
||||
|
||||
```typescript
|
||||
import type { HeroBlockProps } from '@shared/blocks/HeroBlock';
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Composition over Configuration**: Prefer composing blocks into templates rather than creating monolithic components.
|
||||
|
||||
2. **Props Validation**: All components validate required props. Use TypeScript for compile-time safety.
|
||||
|
||||
3. **Accessibility**: Components follow WCAG guidelines. Include ARIA labels where appropriate.
|
||||
|
||||
4. **Responsive Design**: All components are mobile-first and responsive.
|
||||
|
||||
5. **Performance**: Use React.memo for expensive components, lazy loading for templates.
|
||||
|
||||
## Contributing
|
||||
|
||||
When adding new shared components:
|
||||
|
||||
1. Create the component in the appropriate directory (`blocks/`, `layouts/`, or `templates/`)
|
||||
2. Export from the directory's `index.ts`
|
||||
3. Add to the main `shared/index.ts` barrel export
|
||||
4. Document props and usage in this README
|
||||
5. Add TypeScript types
|
||||
6. Include CSS in the appropriate stylesheet
|
||||
7. Write tests (if applicable)
|
||||
|
||||
## Testing
|
||||
|
||||
Shared components should be tested in the consuming applications. The Site Builder includes tests for components used in the preview canvas.
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
- [ ] Storybook integration for component documentation
|
||||
- [ ] Design tokens/theming system
|
||||
- [ ] Animation utilities
|
||||
- [ ] Form components library
|
||||
- [ ] Icon library integration
|
||||
|
||||
Reference in New Issue
Block a user