solara 0.3.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a886519a93f39b2e87df6f2f427fa72e6baf9d4f3520424a7c86c207cb684e56
-  data.tar.gz: e5f0f1673493a4177eaf70ba1af01ef6de900074f8c934c6b15600197f2af474
+  metadata.gz: 714797cd507e354e49c4a1981a516f6ad3e659797ba40b6040c7e7a6f30f11aa
+  data.tar.gz: 3b3d4ed6c116abea9dd15c2db4b5df308320649be4381623e3c7a3c863ef0385
 SHA512:
-  metadata.gz: cd784de6b07c8208c290f6cdb00827e0aa2e44f0f10d19e584592bca6d1aa2d7c7bb195c599286500dbacb71662956b6247f1fb7ca82daf40f0c60ab0022e4ad
-  data.tar.gz: 0e920bd5ba5938eac7933c40708df506762620bb3466ff743851361f414845d396c363e66145008b3b46a539ca3633f2117ecee6c44cc862764f3014112a8df6
+  metadata.gz: b4c46c3f893d95eddbde530e7d83fe340ce36698974880073b3517779bb8e39b31813863c13f7743e821936b814e6d7f5d42337c10b3ef37a4cd6767732f5a20
+  data.tar.gz: 750e7851fa9584bb85b00b5f01e48ea246892914f1bbfafeb7a2b18db8e138d0da5f8fd2a2253434bed1dd6b6d9b0c6911dcaec908714e96ff69c894653490b8

data/solara/lib/core/brands/brand_switcher.rb

@@ -30,6 +30,9 @@ class BrandSwitcher
   def switch
     BrandFontSwitcher.new(@brand_key).switch
     
+    ResourceManifestSwitcher.new(@brand_key).switch
+    JsonManifestSwitcher.new(@brand_key).switch
+
     case @platform
     when Platform::Flutter
       IOSBrandSwitcher.new(@brand_key).switch
@@ -42,6 +45,60 @@ class BrandSwitcher
     else
       raise ArgumentError, "Invalid platform: #{@platform}"
     end
+
+  end
+
+end
+
+class ResourceManifestSwitcher
+  def initialize(brand_key)
+    @brand_key = brand_key
+  end
+
+  def switch
+    Solara.logger.start_step("Process resource manifest: #{FilePath.resources_manifest}")
+    brand_resource_copier = ResourceManifestProcessor.new(@brand_key)
+    brand_resource_copier.copy
+    Solara.logger.debug("#{@brand_key} resources copied successfully according to the manifest: #{FilePath.resources_manifest}.")
+    Solara.logger.end_step("Process resource manifest: #{FilePath.resources_manifest}")
+  end
+
+end
+
+class JsonManifestSwitcher
+  def initialize(brand_key)
+    @brand_key = brand_key
+    @manifest_path = FilePath.brand_json_dir(brand_key)
+  end
+
+  def switch
+    Solara.logger.start_step("Process JSON manifest: #{@manifest_path}")
+
+
+    case SolaraSettingsManager.instance.platform
+    when Platform::Flutter
+      process_maifest(Language::Dart, FilePath.flutter_lib_artifacts)
+      process_maifest(Language::Dart, FilePath.brand_global_json_dir)
+    when Platform::IOS
+      process_maifest(Language::Swift, FilePath.ios_project_root_artifacts)
+      process_maifest(Language::Swift, FilePath.brand_global_json_dir)
+    when Platform::Android
+      process_maifest(Language::Kotlin, FilePath.android_project_java_artifacts )
+      process_maifest(Language::Kotlin, FilePath.brand_global_json_dir)
+    else
+      raise ArgumentError, "Invalid platform: #{@platform}"
+    end
+
+    Solara.logger.end_step("Process JSON manifest: #{@manifest_path}")
+  end
+
+  def process_maifest(language, output_path)
+    processor = JsonManifestProcessor.new(
+      @manifest_path,
+      language,
+      output_path
+    )
+    processor.process
   end
 end
 
@@ -225,7 +282,7 @@ class ThemeSwitcher
   def generate_theme(name, language, platform)
     Solara.logger.start_step("Generate #{name} for #{platform}")
 
-    theme_manager = ThemeGeneratorManager.new(FilePath.brand_theme(@brand_key))
+    theme_manager = ThemeGenerator.new(FilePath.brand_theme(@brand_key))
     theme_manager.generate(language, FilePath.generated_config(name, platform))
 
     Solara.logger.end_step("Generate #{name} for #{platform}")

data/solara/lib/core/dashboard/brand/BrandDetail.js

@@ -2,6 +2,37 @@ import BrandDetailModel from './BrandDetailModel.js';
 import BrandDetailView from './BrandDetailView.js';
 import BrandDetailController from './BrandDetailController.js';
 
+const modeToggle = document.getElementById('modeToggle');
+const body = document.body;
+const icon = modeToggle.querySelector('i');
+
+function applyMode(mode) {
+    if (mode === 'dark') {
+        body.classList.add('dark-mode');
+        icon.classList.remove('fa-sun');
+        icon.classList.add('fa-moon');
+    } else {
+        body.classList.remove('dark-mode');
+        icon.classList.remove('fa-moon');
+        icon.classList.add('fa-sun');
+    }
+}
+
+const savedMode = localStorage.getItem('mode');
+if (savedMode) {
+    applyMode(savedMode);
+} else {
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    applyMode(systemPrefersDark ? 'dark' : 'light');
+}
+
+modeToggle.addEventListener('click', () => {
+    const currentMode = body.classList.contains('dark-mode') ? 'dark' : 'light';
+    const newMode = currentMode === 'dark' ? 'light' : 'dark';
+    applyMode(newMode);
+    localStorage.setItem('mode', newMode);
+});
+
 window.onload = function () {
     document.getElementById('loadingOverlay').style.display = 'none';
 };
@@ -20,10 +51,11 @@ window.addEventListener('scroll', function () {
     }
     lastScrollTop = scrollTop;
 });
-        
+
 document.addEventListener('DOMContentLoaded', async () => {
     const model = new BrandDetailModel();
     const view = new BrandDetailView(model);
     const controller = new BrandDetailController(model, view);
     await controller.initializeApp();
-});
+});
+

data/solara/lib/core/dashboard/brand/BrandDetailController.js

@@ -1,15 +1,10 @@
 import {DataSource} from './BrandDetailModel.js';
-import InfoPlistStringCatalogManager from "./InfoPlistStringCatalogManager.js";
 
 class BrandDetailController {
     constructor(model, view) {
         this.model = model;
         this.view = view;
-        this.onSectionChanged = this.onSectionChanged.bind(this);
-        this.deleteField = this.deleteField.bind(this);
         this.initializeEventListeners();
-        this.view.setOnSectionChangedHandler(this.onSectionChanged.bind(this));
-        this.view.setOnDeleteFieldHandler(this.deleteField.bind(this));
     }
 
     async initializeApp() {
@@ -80,8 +75,7 @@ class BrandDetailController {
 
     async addNewBrand() {
         this.view.showOnboardBrandForm(async (key, name) => {
-            const configurations = await this.model.createNewBrandConfogurations()
-            console.log(configurations)
+            const configurations = await this.model.createNewBrandConfigurations()
             await this.addBrand(key, name, configurations)
         })
     }
@@ -98,10 +92,10 @@ class BrandDetailController {
             await this.onLoadSections(response.result);
             const {isCurrentBrand, contentChanged} = await this.model.fetchCurrentBrand();
 
-            if (!isCurrentBrand) {
+            if (isCurrentBrand) {
+                this.view.setupSyncBrandButton(contentChanged ? '#ff4136' : '#4A90E2');
+            } else {
                 this.view.showSwitchButton();
-            } else if (contentChanged) {
-                this.view.showApplyChangesButton();
             }
 
             await this.checkBrandHealth();
@@ -129,7 +123,12 @@ class BrandDetailController {
             window.location.href = `../brands/brands.html?source=${this.model.source}`;
         });
 
-        document.getElementById('applyChangesButton').addEventListener('click', () => this.switchToBrand());
+        document.getElementById('syncBrandButton').addEventListener(
+            'click',
+            async () => {
+                await this.switchToBrand()
+                await this.view.toast("Synced successfully")
+            });
         document.getElementById('switchButton').addEventListener('click', () => this.switchToBrand());
 
         this.view.exportBrandBtn.addEventListener('click', () => this.exportBrand());
@@ -142,155 +141,37 @@ class BrandDetailController {
 
             const sectionItems = configuraationsResult.configurations
 
-            for (let i = 0; i < sectionItems.length; i++) {
-                const sectionInfo = sectionItems[i];
-                console.log('Processing section:', i, sectionInfo);
-
-                if (sectionInfo.key === 'theme.json') {
-                    this.createThemeSections(sectionInfo)
-                } else if (sectionInfo.key === 'InfoPlist.xcstrings') {
-                    this.createSection(
-                        sectionInfo.key,
-                        sectionInfo,
-                        new InfoPlistStringCatalogManager(sectionInfo.content).extractLocalizations(),
-                        sectionInfo.name,
-                        sectionInfo.inputType)
-                } else {
-                    this.createSection(sectionInfo.key, sectionInfo, sectionInfo.content, sectionInfo.name, sectionInfo.inputType)
-                }
-            }
+            this.view.sectionsFormManager.display(
+                sectionItems,
+                (section, container) => {
+                    this.onSectionChanged(section, container)
+                })
+
         } catch (error) {
             console.error('Error loading configurations:', error);
             alert(error.message);
         }
     }
 
-    createThemeSections(sectionInfo) {
-        this.createSection(`${sectionInfo.key}_colors`,
-            sectionInfo,
-            sectionInfo.content.colors,
-            'Theme Colors',
-            'color',
-            'colors')
-        this.createSection(`${sectionInfo.key}_typography`,
-            sectionInfo,
-            sectionInfo.content.typography,
-            'Theme Typography',
-            'text',
-            'typography')
-        this.createSection(`${sectionInfo.key}_spacing`,
-            sectionInfo,
-            sectionInfo.content.spacing,
-            'Theme Spacing', 'text',
-            'spacing')
-        this.createSection(
-            `${sectionInfo.key}_borderRadius`,
-            sectionInfo,
-            sectionInfo.content.borderRadius,
-            'Theme Border Radius',
-            'text',
-            'borderRadius')
-        this.createSection(
-            `${sectionInfo.key}_elevation`,
-            sectionInfo,
-            sectionInfo.content.elevation,
-            'Theme Elevation',
-            'text',
-            'elevation')
-    }
-
-    createSection(id, sectionInfo, content, sectionName, inputType, propertiesGroupName = null) {
-        const sectionElement = this.view.createSection(sectionInfo.key, sectionName, inputType);
-        sectionElement.id = id;
-        sectionElement.dataset.propertiesGroupName = propertiesGroupName
-
-        this.view.sectionsContainer.appendChild(sectionElement);
-
-        console.log('Section element created:', sectionElement);
-
-        this.view.populateSection(sectionInfo, sectionElement, content, inputType);
-
-        const addButton = document.createElement('button');
-        addButton.textContent = 'Add Field';
-        addButton.className = 'add-field-btn';
-        addButton.onclick = () => this.addNewField(sectionInfo, sectionElement, inputType);
-        sectionElement.appendChild(addButton);
-    }
+    async onSectionChanged(section, container) {
+        if (this.model.isRemote()) return
 
-    async onSectionChanged(sectionItem, sectionElement) {
         try {
-            const configuration = await this.getSectionData(sectionElement.dataset.key)
-            await this.model.saveSection(sectionItem, configuration);
-            this.view.showApplyChangesButton();
+            await this.model.saveSection(container.dataset.key, section.content);
             await this.checkBrandHealth();
+            await this.switchToBrand(true)
         } catch (error) {
             console.error('Error saving section:', error);
             alert(error.message);
         }
     }
 
-    getSectionConfiguration(sectionElement) {
-        const configuration = {};
-        const inputs = sectionElement.querySelectorAll('input:not(.array-item-input)');
-        inputs.forEach(input => {
-            const keys = input.id.split('.');
-            let current = configuration;
-            for (let i = 0; i < keys.length - 1; i++) {
-                if (!current[keys[i]]) {
-                    current[keys[i]] = {};
-                }
-                current = current[keys[i]];
-            }
-            const lastKey = keys[keys.length - 1];
-
-            if (input.classList.contains('array-input')) {
-                const arrayItemsContainer = input.closest('.input-wrapper').querySelector('.array-items-container');
-                current[lastKey] = this.getArrayValue(arrayItemsContainer);
-            } else if (input.type === 'checkbox') {
-                current[lastKey] = input.checked;
-            } else {
-                let value = input.value;
-                if (input.type === 'color') {
-                    value = `#${value.substring(1).toUpperCase()}`;
-                } else if (!isNaN(value) && value.trim() !== '') {
-                    // Convert to number if it's a valid number string
-                    value = parseFloat(value);
-                }
-                current[lastKey] = value;
-            }
-        });
-        return configuration;
-    }
-
-    addNewField(sectionItem, sectionElement, inputType) {
-        this.view.showAddFieldForm(sectionItem, sectionElement, inputType);
-    }
-
-    deleteField(sectionItem, fieldContainer) {
-        this.view.showConfirmationDialog(
-            'Are you sure you want to delete this item?',
-            () => {
-                const sectionElement = fieldContainer.closest('.section');
-                fieldContainer.remove();
-                this.onSectionChanged(sectionItem, sectionElement);
-            }
-        );
-    }
-
-    getArrayValue(container) {
-        const arrayItems = container.querySelectorAll('.array-item-input');
-        return Array.from(arrayItems).map(item => item.value);
-    }
-
-    async switchToBrand() {
+    async switchToBrand(silentError = false) {
         try {
             await this.model.switchToBrand();
-            const applyChangesButton = document.getElementById('applyChangesButton');
-            applyChangesButton.style.display = 'none';
-            location.reload();
         } catch (error) {
             console.error('Error switching to brand:', error);
-            alert(error.message);
+            if (!silentError) alert(error.message);
         }
     }
 
@@ -318,76 +199,13 @@ class BrandDetailController {
         }
     }
 
-    async getSectionData(sectionKey) {
-        try {
-            const container = this.view.sectionsContainer;
-
-            const sectionElements = Array.from(container.querySelectorAll('.section'))
-                .filter(element => element.dataset.key === sectionKey);
-
-            if (sectionElements.length === 1) {
-                return this.getSectionConfiguration(sectionElements[0])
-            }
-
-            const configurations = sectionElements.map(sectionElement => {
-                const propertiesGroupName = sectionElement.dataset.propertiesGroupName;
-                const config = this.getSectionConfiguration(sectionElement);
-
-                if (propertiesGroupName !== "null") {
-                    return {[propertiesGroupName]: config};
-                } else {
-                    return config;
-                }
-            });
-
-            const result = configurations.reduce((acc, config) => {
-                const key = Object.keys(config)[0]; // Get the key from the configuration item
-                acc[key] = config[key]; // Assign the value to the dynamic object
-                return acc;
-            }, {});
-
-            const json = JSON.stringify(result, null, 2); // Pretty-printing JSON
-            console.log(json);
-            return result;
-
-        } catch (error) {
-            console.error('Error downloading brand:', error);
-            alert(error.message);
-        }
-    }
-
     async exportBrand() {
         try {
-            const sectionsContainer = this.view.sectionsContainer;
+            const result = this.view.sectionsFormManager.data();
 
             const brandKey = this.view.sectionsContainer.dataset.brandKey;
             const brandName = this.view.sectionsContainer.dataset.brandName;
 
-            const sectionElements = Array.from(sectionsContainer.querySelectorAll('.section'));
-
-            const uniqueSections = new Map();
-
-            // The theme section has been divided into multiple categories (e.g., colors, typography).
-            // In the getSectionData function, we merge these sections. To prevent duplication when
-            // processing the sections, we will ensure that each section key is processed only once.
-            await Promise.all(sectionElements.map(async sectionElement => {
-                const key = sectionElement.dataset.key;
-                // Check if the key already exists in the map
-                if (!uniqueSections.has(key)) {
-                    const configurations = await this.getSectionData(key);
-                    uniqueSections.set(
-                        key, {
-                            key: key,
-                            name: sectionElement.dataset.name,
-                            inputType: sectionElement.dataset.inputType,
-                            content: configurations
-                        });
-                }
-            }));
-
-            // Convert the map values to an array
-            const result = Array.from(uniqueSections.values());
-
             this.model.exportBrand(brandKey, brandName, result);
 
         } catch (error) {
@@ -399,5 +217,4 @@ class BrandDetailController {
 }
 
 
-
 export default BrandDetailController;

data/solara/lib/core/dashboard/brand/BrandDetailModel.js

@@ -17,6 +17,14 @@ class BrandDetailModel {
         this.source = sourceFromUrl === DataSource.LOCAL ? DataSource.LOCAL : DataSource.REMOTE;
     }
 
+    isLocal() {
+       return  this.source === DataSource.LOCAL
+    }
+
+    isRemote() {
+       return  this.source === DataSource.REMOTE
+    }
+
     getQueryFromUrl(name) {
         return this.localSource.getQueryFromUrl(name);
     }
@@ -29,10 +37,10 @@ class BrandDetailModel {
         return await this.localSource.fetchCurrentBrand(this.brandKey);
     }
 
-    async saveSection(sectionItem, configuration) {
+    async saveSection(key, configuration) {
         switch (this.source) {
             case DataSource.LOCAL:
-                return await this.localSource.saveSection(sectionItem, configuration, this.brandKey);
+                return await this.localSource.saveSection(key, configuration, this.brandKey);
             case DataSource.REMOTE:
                 // Saving is not supported remotely. Instead, user can export the brand.
                 return
@@ -48,7 +56,7 @@ class BrandDetailModel {
     async checkBrandHealth() {
         switch (this.source) {
             case DataSource.LOCAL:
-        return await this.localSource.checkBrandHealth(this.brandKey);
+                return await this.localSource.checkBrandHealth(this.brandKey);
             case DataSource.REMOTE:
                 // Checking health is not supported remotely yet.
                 return
@@ -57,8 +65,8 @@ class BrandDetailModel {
         }
     }
 
-    async createNewBrandConfogurations() {
-        return await this.remoteSource.createNewBrandConfogurations();
+    async createNewBrandConfigurations() {
+        return await this.remoteSource.createNewBrandConfigurations();
     }
 
     async createBrandConfigurationsFromDirectory(dirHandle) {