solara 0.2.0 → 0.2.1

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

@@ -5,25 +5,22 @@ require 'rubygems'
 class BrandsManager
     include Singleton
 
+    # Class method to access the singleton instance
+    def self.instance
+        @instance ||= new
+    end
+    
     def initialize
         brands_list_path = FilePath.brands_list
         @brands_list = JSON.parse(File.read(brands_list_path))
     end
 
-    def first_brand
-        brands_list.first
-    end
-
     def first_brand_key
         brands_list.first["key"]
     rescue
         nil
     end
 
-    def brand_name(brand_key)
-        brand_data(brand_key)["name"]
-    end
-
     def brand_with_configurations(brand_key)
         configurations = BrandConfigurationsManager.new(brand_key).create
         {
@@ -41,17 +38,8 @@ class BrandsManager
         @brands_list["brands"]
     end
 
-    def find(brand_key)
-        brands = brands_list
-        brands.find { |b| b["key"] == brand_key }
-    end
-
-    def brands_json
-        @brands_list
-    end
-
     def exists(brand_key)
-        !brand_data(brand_key).nil?
+        !brand_data(brand_key).nil? && File.exist?(FilePath.brand(brand_key))
     end
 
     def add_brand(brand_name, brand_key)
@@ -59,11 +47,11 @@ class BrandsManager
         existing_brand = brand_data(brand_key)
         if existing_brand
             update_brand(brands_list.index(existing_brand), brand)
-            Solara.logger.debug("#{brand_name} Brand updated in the list.")
+            Solara.logger.debug("#{brand_name} Brand updated in the brands list.")
         else
             brands_list.push(brand)
             save_brands_list
-            Solara.logger.debug("#{brand_name} added to the list.")
+            Solara.logger.debug("#{brand_name} added to the brands list.")
         end
     end
 
@@ -71,13 +59,6 @@ class BrandsManager
         JSON.parse(File.read(FilePath.current_brand))
     end
 
-    def current_brand_content_changed(brand_key)
-        unless is_current_brand(brand_key)
-            return false
-        end
-        current_brand['content_changed'] == true
-    end
-
     def set_current_brand_content_changed(brand_key, changed)
         unless is_current_brand(brand_key)
             return false
@@ -85,7 +66,7 @@ class BrandsManager
         Solara.logger.debug("")
         brand = current_brand
         brand['content_changed'] = changed
-        save_current_brand_date(brand)
+        save_current_brand_data(brand)
         Solara.logger.debug("#{brand_key} changed saved to current_brand.json.")
     end
 
@@ -95,17 +76,17 @@ class BrandsManager
 
     def save_current_brand(brand_key)
         brand = brand_data(brand_key)
-        save_current_brand_date(brand)
+        save_current_brand_data(brand)
         Solara.logger.debug("#{brand_key} saved as current brand.")
     end
 
-    def save_current_brand_date(brand_data)
-        current_brand = FilePath.current_brand
+    def save_current_brand_data(brand_data)
+        path = FilePath.current_brand
 
         # Create the file if it doesn't exist
-        FileUtils.touch(current_brand) unless File.exist?(current_brand)
+        FileUtils.touch(path) unless File.exist?(path)
 
-        File.open(current_brand, 'w') do |file|
+        File.open(path, 'w') do |file|
             file.write(JSON.pretty_generate(brand_data))
         end
 
@@ -128,7 +109,7 @@ class BrandsManager
         if index
             brand_dir = FilePath.brand(brand_key)
             remove_brand(index)
-            FileUtils.rm_rf(brand_dir)
+            FileManager.delete_if_exists(brand_dir)
             save_brands_list
             Solara.logger.debug("Brand removed.")
         else
@@ -136,11 +117,6 @@ class BrandsManager
         end
     end
 
-    # Class method to access the singleton instance
-    def self.instance
-        @instance ||= new
-    end
-
     private
 
     def save_brands_list

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

@@ -3,6 +3,25 @@ import BrandDetailModel from './BrandDetailModel.js';
 import BrandDetailView from './BrandDetailView.js';
 import BrandDetailController from './BrandDetailController.js';
 
+window.onload = function () {
+    document.getElementById('loadingOverlay').style.display = 'none';
+};
+
+let lastScrollTop = 0;
+const header = document.getElementById('header');
+
+window.addEventListener('scroll', function () {
+    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    if (scrollTop > lastScrollTop) {
+        // Scrolling down
+        header.classList.add('scroll-down');
+    } else {
+        // Scrolling up
+        header.classList.remove('scroll-down');
+    }
+    lastScrollTop = scrollTop;
+});
+        
 document.addEventListener('DOMContentLoaded', async () => {
     const model = new BrandDetailModel();
     const view = new BrandDetailView(model);

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

@@ -1,4 +1,5 @@
 import {DataSource} from './BrandDetailModel.js';
+import InfoPlistStringCatalogManager from "./InfoPlistStringCatalogManager.js";
 
 class BrandDetailController {
     constructor(model, view) {
@@ -112,8 +113,11 @@ class BrandDetailController {
 
     async onLoadSections(configuraationsResult) {
         try {
+            this.view.addBrandOverlay.style.display = 'none'
+            this.view.header.style.display = 'flex';
             this.view.updateAppNameTitle(`${configuraationsResult.brand.key} (${configuraationsResult.brand.name})`);
             await this.showSections(configuraationsResult);
+            this.view.showIndex();
         } catch (error) {
             console.error('Error initializing app:', error);
             alert(error.message);
@@ -142,10 +146,17 @@ class BrandDetailController {
                 const sectionInfo = sectionItems[i];
                 console.log('Processing section:', i, sectionInfo);
 
-                if (sectionInfo.key === 'theme') {
+                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, sectionInfo.content, sectionInfo.name, sectionInfo.inputType)
+                    this.createSection(sectionInfo.key, sectionInfo, sectionInfo.content, sectionInfo.name, sectionInfo.inputType)
                 }
             }
         } catch (error) {
@@ -155,15 +166,42 @@ class BrandDetailController {
     }
 
     createThemeSections(sectionInfo) {
-        this.createSection(sectionInfo, sectionInfo.content.colors, 'Theme Colors', 'color', 'colors')
-        this.createSection(sectionInfo, sectionInfo.content.typography, 'Theme Typography', 'text', 'typography')
-        this.createSection(sectionInfo, sectionInfo.content.spacing, 'Theme Spacing', 'text', 'spacing')
-        this.createSection(sectionInfo, sectionInfo.content.borderRadius, 'Theme Border Radius', 'text', 'borderRadius')
-        this.createSection(sectionInfo, sectionInfo.content.elevation, 'Theme Elevation', 'text', 'elevation')
+        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(sectionInfo, content, sectionName, inputType, propertiesGroupName = null) {
+    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);
@@ -208,6 +246,8 @@ class BrandDetailController {
             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') {
@@ -358,4 +398,6 @@ class BrandDetailController {
 
 }
 
+
+
 export default BrandDetailController;

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

@@ -14,9 +14,7 @@ class BrandDetailModel {
         this.brandKey = this.getQueryFromUrl('brand_key');
 
         const sourceFromUrl = this.getQueryFromUrl('source');
-        // TODO: uncomment
-         this.source = sourceFromUrl === DataSource.LOCAL ? DataSource.LOCAL : DataSource.REMOTE;
-         // this.source = DataSource.REMOTE;
+        this.source = sourceFromUrl === DataSource.LOCAL ? DataSource.LOCAL : DataSource.REMOTE;
     }
 
     getQueryFromUrl(name) {
@@ -24,25 +22,11 @@ class BrandDetailModel {
     }
 
     async fetchBrandDetails() {
-        switch (this.source) {
-            case DataSource.LOCAL:
-                return await this.localSource.fetchBrandDetails(this.brandKey);
-            case DataSource.REMOTE:
-                return await this.remoteSource.fetchBrandDetails(this.brandKey);
-            default:
-                throw new Error('Unknown data source');
-        }
+        return await this.localSource.fetchBrandDetails(this.brandKey);
     }
 
     async fetchCurrentBrand() {
-        switch (this.source) {
-            case DataSource.LOCAL:
-                return await this.localSource.fetchCurrentBrand(this.brandKey);
-            case DataSource.REMOTE:
-                return await this.remoteSource.fetchCurrentBrand(this.brandKey);
-            default:
-                throw new Error('Unknown data source');
-        }
+        return await this.localSource.fetchCurrentBrand(this.brandKey);
     }
 
     async saveSection(sectionItem, configuration) {
@@ -50,29 +34,24 @@ class BrandDetailModel {
             case DataSource.LOCAL:
                 return await this.localSource.saveSection(sectionItem, configuration, this.brandKey);
             case DataSource.REMOTE:
-                return await this.remoteSource.saveSection(sectionItem, configuration, this.brandKey);
+                // Saving is not supported remotely. Instead, user can export the brand.
+                return
             default:
                 throw new Error('Unknown data source');
         }
     }
 
     async switchToBrand() {
-        switch (this.source) {
-            case DataSource.LOCAL:
-                return await this.localSource.switchToBrand(this.brandKey);
-            case DataSource.REMOTE:
-                return await this.remoteSource.switchToBrand(this.brandKey);
-            default:
-                throw new Error('Unknown data source');
-        }
+        return await this.localSource.switchToBrand(this.brandKey);
     }
 
     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:
-                return await this.remoteSource.checkBrandHealth(this.brandKey);
+                // Checking health is not supported remotely yet.
+                return
             default:
                 throw new Error('Unknown data source');
         }

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

@@ -7,7 +7,11 @@ import '../component/MessageBottomSheet.js';
 class BrandDetailView {
     constructor(model) {
         this.model = model;
+
+        this.header = document.getElementById('header');
+
         this.brandDetailsContainer = document.getElementById('brand-details-container');
+        this.addBrandOverlay = document.getElementById('add-brand-overlay');
         this.addBrandContainer = document.getElementById('add-brand-container');
 
         this.sectionsContainer = document.getElementById('sections');
@@ -38,11 +42,15 @@ class BrandDetailView {
     }
 
     async setupLocal() {
+        this.addBrandOverlay.style.display = 'none'
+        this.header.style.display = 'flex'
         this.allBrandsButton.style.display = 'block'
         this.toggleAddBrandContainer(false);
     }
 
     async setupRemote() {
+        this.addBrandOverlay.style.display = 'flex'
+        this.header.style.display = 'none'
         this.allBrandsButton.style.display = 'none'
         this.toggleAddBrandContainer(true);
     }
@@ -76,7 +84,7 @@ class BrandDetailView {
 
         const subtitleElement = document.createElement('p');
         subtitleElement.className = 'section-subtitle';
-        subtitleElement.textContent = `${key}.json`;
+        subtitleElement.textContent = key;
         titleContainer.appendChild(subtitleElement);
 
         section.appendChild(titleContainer);
@@ -90,10 +98,12 @@ class BrandDetailView {
                 sectionElement.appendChild(this.createInputField(sectionItem, key, value, 'array'));
             } else if (typeof value === 'object' && value !== null) {
                 for (const [subKey, subValue] of Object.entries(value)) {
-                    sectionElement.appendChild(this.createInputField(sectionItem, `${key}.${subKey}`, subValue, inputType));
+                    const subInputType = subValue === true || subValue === false ? 'boolean' : inputType;
+                    sectionElement.appendChild(this.createInputField(sectionItem, `${key}.${subKey}`, subValue, subInputType));
                 }
             } else {
-                sectionElement.appendChild(this.createInputField(sectionItem, key, value, inputType));
+                const fieldInputType = value === true || value === false ? 'boolean' : inputType;
+                sectionElement.appendChild(this.createInputField(sectionItem, key, value, fieldInputType));
             }
         }
     }
@@ -142,11 +152,30 @@ class BrandDetailView {
                 input.value = '';
             });
 
+        } else if (inputType === 'boolean') {
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.id = key;
+            checkbox.checked = value;
+
+            const checkboxLabel = document.createElement('label');
+            checkboxLabel.className = 'checkbox-label';
+            checkboxLabel.htmlFor = key;
+            checkboxLabel.textContent = value ? 'True' : 'False';
+
+            checkbox.addEventListener('change', () => {
+                checkboxLabel.textContent = checkbox.checked ? 'True' : 'False';
+                this.onSectionChanged(sectionItem, container.closest('.section'));
+            });
+
+            inputWrapper.appendChild(checkbox);
+            inputWrapper.appendChild(checkboxLabel);
         } else {
             const input = document.createElement('input');
             input.type = inputType;
             input.id = key;
 
+            console.log(value)
             if (inputType === 'color') {
                 input.value = value.startsWith('#') ? value : `#${value.substring(4)}`;
             } else {
@@ -236,6 +265,23 @@ class BrandDetailView {
         this.onboardSheet.show('Brand Details', 'Add Brand', onSubmit);
     }
 
+    showIndex() {
+        const sectionsContainer = this.sectionsContainer;
+        const sectionElements = Array.from(sectionsContainer.querySelectorAll('.section'));
+
+        const indexElement = document.getElementById('index');
+
+        // Clear existing items if needed
+        indexElement.innerHTML = '';
+
+        sectionElements.forEach(sectionElement => {
+            const newItem = document.createElement('li');
+            newItem.classList.add('index-item');
+            newItem.innerHTML = `<a href="#${sectionElement.id}">${sectionElement.dataset.name}</a>`;
+            indexElement.appendChild(newItem);
+        });
+    }
+
     async hideOnboardBrandForm() {
         this.onboardSheet.hide();
     }

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

@@ -0,0 +1,19 @@
+class InfoPlistStringCatalogManager {
+    constructor(jsonData) {
+        this.data = jsonData;
+        this.localizations = {};
+        this.extractLocalizations();
+    }
+
+    extractLocalizations() {
+        for (const [key, details] of Object.entries(this.data.strings)) {
+            for (const [lang, localization] of Object.entries(details.localizations)) {
+                const formattedKey = `${key}.${lang}`;
+                this.localizations[formattedKey] = localization.stringUnit.value;
+            }
+        }
+        return this.localizations
+    }
+}
+
+export default InfoPlistStringCatalogManager;