solara 0.1.0

data/solara/lib/core/dashboard/brand/source/BrandRemoteSource.js

@@ -0,0 +1,260 @@
+import Ajv from 'https://cdn.skypack.dev/ajv@8.11.0';
+
+class BrandRemoteSource {
+    constructor() {
+    }
+
+    async fetchBrandDetails(brandKey) {
+
+    }
+
+    async fetchCurrentBrand(brandKey) {
+        // Empty for now
+    }
+
+    async saveSection(sectionItem, configuration, brandKey) {
+        // Empty for now
+    }
+
+    async switchToBrand(brandKey) {
+        // Empty for now
+    }
+
+    async checkBrandHealth(brandKey) {
+        // Empty for now
+    }
+
+    async createNewBrandConfogurations() {
+        const configurations_template = `
+        [
+  {
+    "key": "theme",
+    "name": "Theme Configuration",
+    "inputType": "color",
+    "content": {
+      "colors": {
+        "primary": "#CAAC16",
+        "secondary": "#5AC8FA",
+        "background": "#FFFFFF",
+        "surface": "#F2F2F7",
+        "error": "#FF3B30",
+        "onPrimary": "#FFFFFF",
+        "onSecondary": "#000000",
+        "onBackground": "#000000",
+        "onSurface": "#000000",
+        "onError": "#FFFFFF"
+      },
+      "typography": {
+        "fontFamily": {
+          "regular": "Roboto",
+          "medium": "Roboto-Medium",
+          "bold": "Roboto-Bold"
+        },
+        "fontSize": {
+          "small": 12,
+          "medium": 16,
+          "large": 20,
+          "extraLarge": 24
+        }
+      },
+      "spacing": {
+        "small": 8,
+        "medium": 16,
+        "large": 24,
+        "extraLarge": 32
+      },
+      "borderRadius": {
+        "small": 4,
+        "medium": 8,
+        "large": 12
+      },
+      "elevation": {
+        "none": 0,
+        "low": 2,
+        "medium": 4,
+        "high": 8
+      }
+    }
+  },
+  {
+    "key": "brand_config",
+    "name": "Brand Configuration",
+    "inputType": "text",
+    "content": {}
+  },
+  {
+    "key": "android_config",
+    "name": "Android Platform Configuration",
+    "inputType": "text",
+    "content": {
+      "brandName": "",
+      "applicationId": "",
+      "versionName": "1.0.0",
+      "versionCode": 1,
+      "sourceSets": []
+    }
+  },
+  {
+    "key": "android_signing",
+    "name": "Android Signing",
+    "inputType": "text",
+    "content": {
+      "storeFile": "",
+      "keyAlias": "",
+      "storePassword": "",
+      "keyPassword": ""
+    }
+  },
+  {
+    "key": "ios_config",
+    "name": "iOS Platform Configuration",
+    "inputType": "text",
+    "content": {
+      "PRODUCT_NAME": "",
+      "PRODUCT_BUNDLE_IDENTIFIER": "",
+      "MARKETING_VERSION": "1.0.0",
+      "BUNDLE_VERSION": "1",
+      "APL_MRCH_ID": ""
+    }
+  },
+  {
+    "key": "ios_signing",
+    "name": "iOS Signing",
+    "inputType": "text",
+    "content": {
+      "CODE_SIGN_IDENTITY": "",
+      "DEVELOPMENT_TEAM": "",
+      "PROVISIONING_PROFILE_SPECIFIER": "",
+      "CODE_SIGN_STYLE": "Automatic",
+      "CODE_SIGN_ENTITLEMENTS": ""
+    }
+  }
+]`;
+        return JSON.parse(configurations_template);
+    }
+
+    async getBrandConfigurationsJsonFromDirectory(dirHandle) {
+        const schema = await this.fetchBrandConfigurationsSchema();
+
+        const ajv = new Ajv();
+        const validate = ajv.compile(schema);
+
+        const text = await dirHandle.text();
+        let json;
+
+        try {
+            json = JSON.parse(text);
+        } catch (e) {
+            console.error("Invalid JSON:", e);
+            return null;
+        }
+
+        const valid = validate(json);
+
+        if (valid) {
+            return json;
+        } else {
+            console.error("Schema validation failed:", validate.errors);
+            const errorMessages = validate.errors.map(error => `${error.instancePath}: ${error.message}`).join(', ');
+            alert(`The selected JSON file is not a valid configuration for Solara brands. Errors: ${errorMessages}`);
+        }
+
+        return null;
+    }
+
+    async fetchBrandConfigurationsSchema() {
+        const url = "https://raw.githubusercontent.com/Solara-Kit/Solara/main/solara/lib/core/doctor/schema/brand_configurations.json";
+
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error('Network response was not ok: ' + response.statusText);
+            }
+            const data = await response.json();
+            console.log(data);
+            return data; // Return the data instead of null
+        } catch (error) {
+            console.error('There was a problem with the fetch operation:', error);
+            return null; // Return null in case of error
+        }
+    }
+
+    async createBrandConfigurationsFromDirectory(dirHandle) {
+        const configList = [];
+        const expectedFiles = [
+            {
+                key: 'theme',
+                name: 'Theme Configuration',
+                input_type: 'color',
+                filename: 'theme.json'
+            },
+            {
+                key: 'brand_config',
+                name: 'Brand Configuration',
+                input_type: 'text',
+                filename: 'brand_config.json'
+            },
+            {
+                key: 'android_config',
+                name: 'Android Platform Configuration',
+                input_type: 'text',
+                filename: 'android_config.json'
+            },
+            {
+                key: 'android_signing',
+                name: 'Android Signing',
+                input_type: 'text',
+                filename: 'android_signing.json'
+            },
+            {
+                key: 'ios_config',
+                name: 'iOS Platform Configuration',
+                input_type: 'text',
+                filename: 'ios_config.json'
+            },
+            {
+                key: 'ios_signing',
+                name: 'iOS Signing',
+                input_type: 'text',
+                filename: 'ios_signing.json'
+            }
+        ];
+
+        for (const file of expectedFiles) {
+            try {
+                const fileContent = await this.findAndReadFile(dirHandle, file.filename);
+                if (fileContent) {
+                    configList.push({
+                        key: file.key,
+                        name: file.name,
+                        inputType: file.input_type,
+                        content: JSON.parse(fileContent)
+                    });
+                }
+            } catch (error) {
+                console.warn(`File not found or invalid JSON: ${file.filename}`);
+            }
+        }
+
+        return configList;
+    }
+
+    async findAndReadFile(dirHandle, filename) {
+        const queue = [dirHandle];
+        while (queue.length > 0) {
+            const currentHandle = queue.shift();
+            for await (const entry of currentHandle.values()) {
+                if (entry.kind === 'file' && entry.name === filename) {
+                    const file = await entry.getFile();
+                    return await file.text();
+                } else if (entry.kind === 'directory') {
+                    queue.push(entry);
+                }
+            }
+        }
+        return null;
+    }
+
+}
+
+export default BrandRemoteSource;

data/solara/lib/core/dashboard/brands/Brands.js

@@ -0,0 +1,10 @@
+import BrandsModel from './BrandsModel.js';
+import BrandsView from './BrandsView.js';
+import BrandsController from './BrandsController.js';
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const model = new BrandsModel();
+    const view = new BrandsView(model.source);
+    const controller = new BrandsController(model, view);
+    await controller.init();
+});

data/solara/lib/core/dashboard/brands/BrandsController.js

@@ -0,0 +1,155 @@
+class BrandsController {
+    constructor(model, view) {
+        this.model = model;
+        this.view = view;
+        this.view.setOnSwitch(this.switchToBrand.bind(this));
+    }
+
+    async init() {
+        await this.model.fetchCurrentBrand();
+        await this.renderBrands();
+        await this.checkBrandsHealth();
+        this.attachEventListeners();
+    }
+
+    async renderBrands() {
+        const brands = await this.model.fetchBrands();
+        this.view.renderBrands(brands, this.model.currentBrand);
+    }
+
+    attachEventListeners() {
+        document.querySelector('.onboard-brand-button')
+            .addEventListener('click', () => this.showOnboardBrandForm());
+        document.getElementById('brandSearch')
+            .addEventListener('input', (e) => this.filterBrands(e.target.value));
+
+        this.view.brandOptionsSheet.addEventListener('clone', (event) => {
+            console.log('Clone', event.detail);
+            this.handleCloneOption(event)
+        });
+
+        this.view.brandOptionsSheet.addEventListener('offboard', (event) => {
+            console.log('Offboard', event.detail);
+            this.handleOffboardOption(event)
+        });
+
+        this.view.brandOptionsSheet.addEventListener('doctor', (event) => {
+            console.log('Doctor', event.detail);
+            this.handleDoctorOption(event)
+        });
+
+        this.view.brandOptionsSheet.addEventListener('aliases', (event) => {
+            console.log('Aliases', event.detail);
+            this.handleAliasesOption(event)
+        });
+
+        this.view.brandOptionsSheet.addEventListener('settings', (event) => {
+            console.log('Settings', event.detail);
+            this.handleSettingsOption(event)
+        });
+    }
+
+    showOnboardBrandForm() {
+        this.view.showOnboardBrandForm();
+        this.view.onboardSheet.addEventListener('onboard', async (event) => {
+            event.preventDefault();
+            const {brandKey, brandName} = event.detail;
+            await this.handleOnboardBrandSubmit(brandKey, brandName);
+        });
+    }
+
+    async handleOnboardBrandSubmit(brandKey, brandName) {
+        try {
+            await this.model.onboardBrand(brandName, brandKey);
+            await this.view.hideOnboardBrandForm();
+            location.reload();
+        } catch (error) {
+            console.error('Error during submission:', error);
+            alert(error);
+        }
+    }
+
+    filterBrands(searchTerm) {
+        const filteredBrands = this.model.filterBrands(searchTerm);
+        this.view.renderBrands(filteredBrands, this.model.currentBrand);
+    }
+
+    async checkBrandsHealth() {
+        const result = await this.model.runDoctor("");
+        const errorButton = document.getElementById('error-button');
+
+        if (!result.passed) {
+            this.view.showErrorButton();
+            this.view.updateErrorCount(result.errors.length);
+
+            errorButton.addEventListener('click', () => {
+                const errors = result.errors
+                    .map((error, index) => `${index + 1}. ${error}`)
+                    .join('\n');
+                this.view.showMessage(`Health check for all brands completed with errors: \n\n${errors}`);
+            });
+        } else {
+            this.view.hideErrorButton();
+        }
+    }
+
+    handleCloneOption(event) {
+        event.stopPropagation();
+        this.showOnboardBrandForm();
+    }
+
+    handleOffboardOption(event) {
+        event.stopPropagation();
+        const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
+        const brandName = this.view.brandOptionsSheet.dataset.brandName;
+        this.view.showConfirmationDialog(`Are you sure you need to offboard ${brandKey} (${brandName}) and delete all its configurations?`,
+            async () => {
+                await this.model.offboardBrand(brandKey);
+                location.reload();
+            });
+    }
+
+    async handleDoctorOption(event) {
+        event.stopPropagation();
+
+        const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
+        const result = await this.model.runDoctor(brandKey);
+        if (!result.passed) {
+            const errors = result.errors
+                .map((error, index) => `${index + 1}. ${error}`)
+                .join('\n');
+            this.view.showMessage(`Health check for ${brandKey} completed with errors:\n${errors}`);
+        } else {
+            this.view.showMessage(`Health check for ${brandKey}. All systems operational.`);
+        }
+    }
+
+    async handleAliasesOption(event) {
+        event.stopPropagation();
+
+        const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
+        const aliases = await this.model.fetchAliases(brandKey);
+        if (aliases) {
+            this.view.showAliasesBottomSheet(aliases, brandKey);
+        }
+    }
+
+    handleSettingsOption(event) {
+        event.stopPropagation();
+
+        const brandKey = this.view.brandOptionsSheet.dataset.brandKey;
+        window.location.href = this.view.brandUrl(brandKey);
+    }
+
+    async switchToBrand(brandKey) {
+        try {
+            await this.model.switchToBrand(brandKey);
+            location.reload();
+        } catch (error) {
+            console.error('Error switching to brand:', error);
+            alert(error.message);
+        }
+    }
+}
+
+export default BrandsController;

data/solara/lib/core/dashboard/brands/BrandsModel.js

@@ -0,0 +1,136 @@
+class BrandsModel {
+    constructor() {
+        this.allBrands = [];
+        this.currentBrand = null;
+        this.source = this.getQueryFromUrl('source') || 'remote';
+    }
+
+    getQueryFromUrl(name) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(name);
+    }
+
+    async fetchCurrentBrand() {
+        try {
+            const response = await fetch('/brand/current');
+            let result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            this.currentBrand = result;
+            return result;
+        } catch (error) {
+            console.error('Error fetching current brand:', error);
+            return null;
+        }
+    }
+
+    async fetchBrands() {
+        try {
+            const response = await fetch('/brands.json');
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            this.allBrands = result.sort((a, b) => a.key.localeCompare(b.key));
+            return this.allBrands;
+        } catch (error) {
+            console.error('Error fetching brands:', error);
+            throw error;
+        }
+    }
+
+    async fetchAliases(brand) {
+        try {
+            const response = await fetch(`/brand/aliases?brand_key=${brand.key}`);
+            let result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            return result;
+        } catch (error) {
+            console.error('Error fetching aliases:', error);
+            return null;
+        }
+    }
+
+    async switchToBrand(brandKey) {
+        try {
+            const response = await fetch('/switch', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({brand_key: brandKey}),
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            return result;
+        } catch (error) {
+            console.error('Error switching to brand:', error);
+            throw error;
+        }
+    }
+
+    async onboardBrand(brandName, brandKey, cloneBrandKey = null) {
+        try {
+            const response = await fetch('/brand/onboard', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({brand_name: brandName, brand_key: brandKey, clone_brand_key: cloneBrandKey}),
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            return result;
+        } catch (error) {
+            console.error('Error onboarding brand:', error);
+            throw error;
+        }
+    }
+
+    async offboardBrand(brandKey) {
+        try {
+            const response = await fetch(`/brand/offboard?brand_key=${encodeURIComponent(brandKey)}`, {
+                method: 'GET',
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            return result;
+        } catch (error) {
+            console.error('Error offboarding brand:', error);
+            throw error;
+        }
+    }
+
+    async runDoctor(brandKey) {
+        try {
+            const response = await fetch(`/brand/doctor?brand_key=${encodeURIComponent(brandKey)}`);
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.error);
+            }
+            return result.result;
+        } catch (error) {
+            console.error('Error calling doctor API:', error);
+            throw error;
+        }
+    }
+
+    filterBrands(searchTerm) {
+        return this.allBrands.filter(brand =>
+            brand.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            brand.key.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+    }
+
+}
+
+export default BrandsModel;

data/solara/lib/core/dashboard/brands/BrandsView.js

@@ -0,0 +1,136 @@
+import '../component/OnboardBrandBottomSheet.js';
+import '../component/ConfirmationDialog.js';
+import '../component/MessageBottomSheet.js';
+import '../component/BrandOptionsBottomSheet.js';
+import '../component/AliasesBottomSheet.js';
+
+class BrandsView {
+    constructor(source) {
+        this.source = source
+        this.brandList = document.getElementById('brandList');
+        this.currentBrandSection = document.getElementById('currentBrandSection');
+        this.currentBrandItem = document.getElementById('currentBrandItem');
+        this.brandOptionsSheet = document.getElementById('bottomSheet');
+        this.confirmationDialog = document.getElementById('confirmationDialog');
+        this.messageBottomSheet = document.getElementById('messageBottomSheet');
+        this.onboardSheet = document.getElementById('onboardBottomSheet');
+    }
+
+    createBrandItem(brand, isCurrent = false) {
+        const brandItem = document.createElement('div');
+        brandItem.className = 'brand-item';
+        brandItem.innerHTML = `
+            <div class="brand-image">
+                <img src="../brand/icon?brand_key=${brand.key}" alt="${brand.name} icon">
+            </div>
+            <div class="brand-info">
+                <div class="brand-name">${brand.name}</div>
+                <div class="brand-key">${brand.key}</div>
+            </div>
+            <div class="brand-actions">
+                <button class="switch-button">Switch</button>
+                <div class="overflow-menu">
+                    <i class="fas fa-ellipsis-v"></i>
+                </div>
+            </div>
+        `;
+
+        brandItem.addEventListener('click', () => {
+            window.location.href = this.brandUrl(brand.key);
+        });
+
+        const switchButton = brandItem.querySelector('.switch-button');
+        if (isCurrent && brand.content_changed) {
+            switchButton.textContent = "Apply Changes";
+            switchButton.style.display = "block";
+        } else if (isCurrent && !brand.content_changed) {
+            switchButton.style.display = "none";
+        } else {
+            switchButton.style.display = "block";
+        }
+
+        switchButton.addEventListener('click', async (event) => {
+            event.stopPropagation(); // Prevent the click from bubbling up to the parent
+            await this.onSwitch(brand.key);
+        });
+
+        // Add click event for the overflow menu
+        const overflowMenu = brandItem.querySelector('.overflow-menu');
+        overflowMenu.addEventListener('click', (event) => {
+            event.stopPropagation();
+            this.showBrandOptionsSheet(brand);
+        });
+
+        brandItem.dataset.brand = brand.key;
+        return brandItem;
+    }
+
+    renderBrands(brands, currentBrand) {
+        this.brandList.innerHTML = '';
+        this.currentBrandItem.innerHTML = '';
+
+        if (currentBrand) {
+            this.currentBrandSection.style.display = 'block';
+            this.currentBrandItem.appendChild(this.createBrandItem(currentBrand, true));
+        }
+
+        brands.forEach(brand => {
+            if (!currentBrand || brand.key !== currentBrand.key) {
+                const brandItem = this.createBrandItem(brand);
+                this.brandList.appendChild(brandItem);
+            }
+        });
+    }
+
+    showOnboardBrandForm() {
+        this.onboardSheet.show();
+    }
+
+    async hideOnboardBrandForm() {
+        this.onboardSheet.hide();
+    }
+
+    showAliasesBottomSheet(aliases, brand) {
+        const aliasesSheet = document.getElementById('aliasesSheet');
+        aliasesSheet.show(aliases, brand);
+    }
+
+    showBrandOptionsSheet(brand) {
+        this.brandOptionsSheet.dataset.brandName = brand.name;
+        this.brandOptionsSheet.dataset.brandKey = brand.key;
+        this.brandOptionsSheet.show();
+    }
+
+    showConfirmationDialog(message, onConfirm) {
+        this.confirmationDialog.showDialog(message, onConfirm);
+    }
+
+    showMessage(message) {
+        this.messageBottomSheet.showMessage(message);
+    }
+
+    updateErrorCount(count) {
+        const countElement = document.querySelector('.count');
+        countElement.textContent = count;
+    }
+
+    showErrorButton() {
+        const errorButton = document.getElementById('error-button');
+        errorButton.style.display = "flex";
+    }
+
+    hideErrorButton() {
+        const errorButton = document.getElementById('error-button');
+        errorButton.style.display = "none";
+    }
+
+    setOnSwitch(handler) {
+        this.onSwitch = handler;
+    }
+
+    brandUrl(brandKey) {
+        return `../brand/brand.html?brand_key=${encodeURIComponent(brandKey)}&source=${this.source}`;
+    }
+}
+
+export default BrandsView;