solara 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b672162bbb4a247a016626afacc37b2deaab1dbde0c2f86e30a4ceedeb8a635d
-  data.tar.gz: a0e53ed9ce61d791a50df3c292b1c096414903e7c573164e7553089048f289cc
+  metadata.gz: 714797cd507e354e49c4a1981a516f6ad3e659797ba40b6040c7e7a6f30f11aa
+  data.tar.gz: 3b3d4ed6c116abea9dd15c2db4b5df308320649be4381623e3c7a3c863ef0385
 SHA512:
-  metadata.gz: a22345201f6d5756cc2a54702dc8a0db0806d4fd1fd47f9f85dfde81545368908d22408345dae944bc004c4fe3507ceef563e6044cf7a90daad5a157efb1295f
-  data.tar.gz: be3473d1802240cf75b4f934561e22302cbf93dee710dead6c0439b474e3b7c16ca858f3b647e480e04a493622ce9b8da488135179bca97caa808feedd1b2b18
+  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,7 +75,7 @@ class BrandDetailController {
 
     async addNewBrand() {
         this.view.showOnboardBrandForm(async (key, name) => {
-            const configurations = await this.model.createNewBrandConfogurations()
+            const configurations = await this.model.createNewBrandConfigurations()
             await this.addBrand(key, name, configurations)
         })
     }
@@ -97,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();
@@ -128,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());
@@ -141,188 +141,37 @@ class BrandDetailController {
 
             const sectionItems = configuraationsResult.configurations
 
-            for (let i = 0; i < sectionItems.length; i++) {
-                const sectionData = sectionItems[i];
-
-                if (sectionData.key === 'theme.json') {
-                    this.createThemeSections(sectionData)
-                } else if (sectionData.key === 'InfoPlist.xcstrings') {
-                    this.createSection(
-                        sectionData.key,
-                        sectionData,
-                        new InfoPlistStringCatalogManager(sectionData.content).extractLocalizations(),
-                        sectionData.name,
-                        sectionData.inputType)
-                } else {
-                    this.createSection(sectionData.key, sectionData, sectionData.content, sectionData.name, sectionData.inputType)
-                }
-            }
+            this.view.sectionsFormManager.display(
+                sectionItems,
+                (section, container) => {
+                    this.onSectionChanged(section, container)
+                })
+
         } catch (error) {
             console.error('Error loading configurations:', error);
             alert(error.message);
         }
     }
 
-    createThemeSections(sectionData) {
-        this.createSection(`${sectionData.key}_colors`,
-            sectionData,
-            sectionData.content.colors,
-            'Theme Colors',
-            'color',
-            'colors')
-        this.createSection(`${sectionData.key}_typography`,
-            sectionData,
-            sectionData.content.typography,
-            'Theme Typography',
-            'text',
-            'typography')
-        this.createSection(`${sectionData.key}_spacing`,
-            sectionData,
-            sectionData.content.spacing,
-            'Theme Spacing', 'text',
-            'spacing')
-        this.createSection(
-            `${sectionData.key}_borderRadius`,
-            sectionData,
-            sectionData.content.borderRadius,
-            'Theme Border Radius',
-            'text',
-            'borderRadius')
-        this.createSection(
-            `${sectionData.key}_elevation`,
-            sectionData,
-            sectionData.content.elevation,
-            'Theme Elevation',
-            'text',
-            'elevation')
-    }
-
-    createSection(id, sectionData, content, sectionName, inputType, propertiesGroupName = null) {
-        const sectionElement = this.view.createSection(sectionData.key, sectionName, inputType);
-        sectionElement.id = id;
-        sectionElement.dataset.propertiesGroupName = propertiesGroupName
-
-        this.view.sectionsContainer.appendChild(sectionElement);
-
-        this.view.populateJsonFields(sectionData, sectionElement, content, inputType);
+    async onSectionChanged(section, container) {
+        if (this.model.isRemote()) return
 
-        const addButton = document.createElement('button');
-        addButton.textContent = 'Add Field';
-        addButton.className = 'add-field-btn';
-        addButton.onclick = () => this.addNewField(sectionData, sectionElement, inputType);
-        sectionElement.appendChild(addButton);
-    }
-
-    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);
         }
     }
 
-    collectJsonData(container) {
-        const data = {};
-        const level = container.dataset.level
-
-        const jsonObjects = container.querySelectorAll(`.json-object-${level}`);
-        jsonObjects.forEach(jsonObject => {
-            const jsonObjectLabel = jsonObject.querySelector('label').textContent;
-            data[jsonObjectLabel] = this.collectJsonData(jsonObject);
-
-        });
-
-        const group = container.querySelectorAll(`.json-array-${level}`);
-        group.forEach(arrayItem => {
-            const label = arrayItem.querySelector('label').textContent;
-            const items = arrayItem.querySelectorAll(`.json-array-item-${level}`);
-            const indexed = arrayItem.querySelectorAll(`.json-array-item-indexed-${level}`).length !== 0;
-
-            data[label] = Array.from(items).map((item, index) => {
-                const values = this.collectJsonData(item)
-                if (indexed) {
-                    return values[index]
-                }
-                return values;
-            });
-        });
-
-        const result = this.collectJsonFields(container, level);
-
-        Object.keys(data).forEach(key => {
-            result[key] = data[key];
-        });
-        return result
-    }
-
-    collectJsonFields(container, level) {
-        const result = {};
-
-        const inputFields = container.querySelectorAll(`.json-field-${level}`);
-        inputFields.forEach(inputField => {
-            const values = this.getInputFieldsData(inputField);
-            Object.keys(values).forEach(key => {
-                result[key] = values[key];
-            });
-        })
-        return result
-    }
-
-    getInputFieldsData(container) {
-        const data = {};
-
-        const inputs = container.querySelectorAll('input');
-        inputs.forEach(input => {
-            if (input.type === 'checkbox') {
-                data[input.id] = 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);
-                }
-                data[input.id] = value;
-            }
-        });
-
-        return data;
-    }
-
-    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);
         }
     }
 
@@ -350,72 +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.collectJsonData(sectionElements[0])
-            }
-
-            const configurations = sectionElements.map(sectionElement => {
-                const propertiesGroupName = sectionElement.dataset.propertiesGroupName;
-                const config = this.collectJsonData(sectionElement);
-
-                if (propertiesGroupName !== "null") {
-                    return {[propertiesGroupName]: config};
-                } else {
-                    return config;
-                }
-            });
-
-            return 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;
-            }, {});
-
-        } 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) {

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) {