Implement Reusable Component Structure for Leptos SSR Apps

[harsh-mahajan-yral]

• Need to create reusable component and asset structure for icpump and yral for now but should be modular for future accommodation of new apps.
• The goal is to ensure components and assets are dynamically served based on the app making the request.
• This will allow us to share code between the apps while maintaining app-specific customisation.
  cc @harshita-srivastava-yral

Icons mapping
Icpump: https://drive.google.com/file/d/1koFbT_jLb1EPuTAT7mi3oQhjbTrW-WMk/view
PND: https://drive.google.com/file/d/1HEjbZn7UN8ZtRqYBNYQGgsgCVi1T_Dyr/view
HON: https://drive.google.com/file/d/1Z-vHCSVwnfWtrP81ENsyCcmNCVT8v2qq/view

[siyara-m-yral]

• Need list to map domain to App Name - @siyara-m-yral to send

[harshita-srivastava-yral]

@siyara-m-yral to share the images and branding of all the app

• Lookup of different domain (Type safety around the way it has been done. Currently, it uses if-else and looks up string. This is not scalable)
• Assignment of different branding to PWAs installed on the device

[siyara-m-yral]

Icons mapping
Icpump: https://drive.google.com/file/d/1koFbT_jLb1EPuTAT7mi3oQhjbTrW-WMk/view
PND: https://drive.google.com/file/d/1HEjbZn7UN8ZtRqYBNYQGgsgCVi1T_Dyr/view
HON: https://drive.google.com/file/d/1Z-vHCSVwnfWtrP81ENsyCcmNCVT8v2qq/view

[siyara-m-yral]

• Draft PR with type safe structure today

[harsh-mahajan-yral]

approach

ssr/
├── src/
│   ├── apps/
│   │   ├── common/
│   │   │   └── types.rs       # Shared types and enums
│   │   ├── icpump/
│   │   │   ├── mod.rs
│   │   │   ├── components/    # ICPump-specific components
│   │   │   ├── pages/
│   │   │   └── config.rs      # ICPump-specific configuration
│   │   └── yral/
│   │       ├── mod.rs
│   │       ├── components/    # Yral-specific components
│   │       ├── pages/
│   │       └── config.rs      # Yral-specific configuration
│   │
│   ├── shared/
│   │   ├── components/
│   │   │   ├── auth/         # Shared authentication components
│   │   │   │   ├── mod.rs
│   │   │   │   ├── login.rs
│   │   │   │   └── providers/
│   │   │   ├── layout/       # Shared layout components
│   │   │   │   ├── mod.rs
│   │   │   │   └── nav.rs
│   │   │   └── ui/           # Shared UI components
│   │   │       ├── mod.rs
│   │   │       ├── buttons.rs
│   │   │       └── modal.rs
│   │   │
│   │   ├── styles/           # Shared styles
│   │   │   ├── mod.rs
│   │   │   └── theme.rs
│   │   │
│   │   └── utils/            # Shared utilities
│   │       ├── mod.rs
│   │       └── ab_testing.rs
│   │
│   ├── app.rs                # Main app component with routing
│   └── lib.rs                # Library root

// src/apps/common/types.rs
#[derive(Clone, Copy, PartialEq, Eq)]
pub enum AppType {
    IcPump,
    Yral,
}

// src/shared/components/ui/button.rs
#[component]
pub fn Button(
    #[prop(into)] text: String,
    #[prop(optional)] variant: Option<String>,
    #[prop(optional)] on_click: Option<Callback<MouseEvent>>,
) -> impl IntoView {
    // Shared button implementation
}

// src/apps/icpump/components/custom_button.rs
use crate::shared::components::ui::Button;

#[component]
pub fn IcPumpButton(
    #[prop(into)] text: String,
    #[prop(optional)] on_click: Option<Callback<MouseEvent>>,
) -> impl IntoView {
    view! {
        <Button
            text=text
            variant="icpump-primary"
            on_click=on_click
        />
    }
}

// src/apps/yral/components/custom_button.rs
use crate::shared::components::ui::Button;

#[component]
pub fn YralButton(
    #[prop(into)] text: String,
    #[prop(optional)] on_click: Option<Callback<MouseEvent>>,
) -> impl IntoView {
    view! {
        <Button
            text=text
            variant="yral-primary"
            on_click=on_click
        />
    }
}

// src/app.rs
use crate::apps::common::types::AppType;
use crate::shared::utils::determine_app_from_host;

#[component]
pub fn App() -> impl IntoView {
    let app_type = determine_app_from_host();

    view! {
        <Router>
            <AppContextProvider app_type=app_type>
                <SharedLayout>
                    <Routes>
                        {match app_type {
                            AppType::IcPump => view! { <IcPumpRoutes/> },
                            AppType::Yral => view! { <YralRoutes/> },
                        }}
                    </Routes>
                </SharedLayout>
            </AppContextProvider>
        </Router>
    }
}

[harshita-srivastava-yral]

• Instead of making high level component, make path level components - Like Nav bar then default is navbar.yral then navbar.icpump
• Shared component will be same and app specific changes can be done file based

[siyara-m-yral]

• Working on refactoring today and get it reviewed

[siyara-m-yral]

• Draft PR to be ready by tomorrow

[siyara-m-yral]

• to reach out to Tushar for PnD pwa icon
• to create 2 PRs for restructuring and pwa icons
• In restructuring - create Host component with enums specific to different domains

[siyara-m-yral]

• @harsh-mahajan-yral to test PWA icons for different domains
• PnD icon to be added by Tushar