Component System Documentation

This document explains how to use the component system for building templates in the DEV Partner Portal application.

The component system allows you to:

1. Break down complex HTML templates into smaller, reusable components
2. Pass parameters to components
3. Use conditional logic within templates
4. Maintain consistent styling and behavior across the application

/views
  /components
    /layout          # Page layout components (header, footer)
    /ui              # UI elements (section cards, message boxes)
    /forms           # Form-related components
    /uploadcare      # Uploadcare-related components
  /templates         # Page templates that use components

To include a component in a template, use the following syntax:

{{> components/path/to/component param1="value1" param2="value2"}}

For example:

{{> components/layout/header title="My Page" subtitle="Welcome"}}

You can use conditional logic in your templates with the following syntax:

{{#if condition}}
  <!-- Content to show if condition is true -->
{{#else}}
  <!-- Content to show if condition is false -->
{{/if}}

You can also check for equality:

{{#if type == "success"}}
  <!-- Content for success type -->
{{#else}}
  <!-- Content for other types -->
{{/if}}

Component-specific styles are organized in the following structure:

/public/css
  /components        # Component-specific styles
    section-cards.css
    uploadcare-custom.css
    forms.css
  continue-page.css  # Page-specific styles that import component styles

To create a new component:

1. Create an HTML file in the appropriate subdirectory under /views/components/
2. Use {{paramName}} syntax for parameters that should be replaceable
3. Use {{#if condition}} for conditional content
4. Add component-specific styles to a CSS file in /public/css/components/

<!-- /views/components/ui/alert.html -->
<div class="alert alert-{{type}}">
  {{#if title}}
    <h4 class="alert-title">{{title}}</h4>
  {{/if}}
  <p class="alert-message">{{message}}</p>
</div>

Usage:

{{> components/ui/alert type="warning" title="Attention" message="This is important"}}

1. Keep components small and focused on a single responsibility
2. Use consistent naming conventions for components and parameters
3. Document component parameters at the top of the component file
4. Organize related components in subdirectories
5. Use conditional logic for variations rather than creating multiple similar components
6. Extract repeated patterns into components
7. Use CSS classes for styling rather than inline styles