solara 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a886519a93f39b2e87df6f2f427fa72e6baf9d4f3520424a7c86c207cb684e56
-  data.tar.gz: e5f0f1673493a4177eaf70ba1af01ef6de900074f8c934c6b15600197f2af474
+  metadata.gz: b672162bbb4a247a016626afacc37b2deaab1dbde0c2f86e30a4ceedeb8a635d
+  data.tar.gz: a0e53ed9ce61d791a50df3c292b1c096414903e7c573164e7553089048f289cc
 SHA512:
-  metadata.gz: cd784de6b07c8208c290f6cdb00827e0aa2e44f0f10d19e584592bca6d1aa2d7c7bb195c599286500dbacb71662956b6247f1fb7ca82daf40f0c60ab0022e4ad
-  data.tar.gz: 0e920bd5ba5938eac7933c40708df506762620bb3466ff743851361f414845d396c363e66145008b3b46a539ca3633f2117ecee6c44cc862764f3014112a8df6
+  metadata.gz: a22345201f6d5756cc2a54702dc8a0db0806d4fd1fd47f9f85dfde81545368908d22408345dae944bc004c4fe3507ceef563e6044cf7a90daad5a157efb1295f
+  data.tar.gz: be3473d1802240cf75b4f934561e22302cbf93dee710dead6c0439b474e3b7c16ca858f3b647e480e04a493622ce9b8da488135179bca97caa808feedd1b2b18

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

@@ -81,7 +81,6 @@ class BrandDetailController {
     async addNewBrand() {
         this.view.showOnboardBrandForm(async (key, name) => {
             const configurations = await this.model.createNewBrandConfogurations()
-            console.log(configurations)
             await this.addBrand(key, name, configurations)
         })
     }
@@ -143,20 +142,19 @@ class BrandDetailController {
             const sectionItems = configuraationsResult.configurations
 
             for (let i = 0; i < sectionItems.length; i++) {
-                const sectionInfo = sectionItems[i];
-                console.log('Processing section:', i, sectionInfo);
+                const sectionData = sectionItems[i];
 
-                if (sectionInfo.key === 'theme.json') {
-                    this.createThemeSections(sectionInfo)
-                } else if (sectionInfo.key === 'InfoPlist.xcstrings') {
+                if (sectionData.key === 'theme.json') {
+                    this.createThemeSections(sectionData)
+                } else if (sectionData.key === 'InfoPlist.xcstrings') {
                     this.createSection(
-                        sectionInfo.key,
-                        sectionInfo,
-                        new InfoPlistStringCatalogManager(sectionInfo.content).extractLocalizations(),
-                        sectionInfo.name,
-                        sectionInfo.inputType)
+                        sectionData.key,
+                        sectionData,
+                        new InfoPlistStringCatalogManager(sectionData.content).extractLocalizations(),
+                        sectionData.name,
+                        sectionData.inputType)
                 } else {
-                    this.createSection(sectionInfo.key, sectionInfo, sectionInfo.content, sectionInfo.name, sectionInfo.inputType)
+                    this.createSection(sectionData.key, sectionData, sectionData.content, sectionData.name, sectionData.inputType)
                 }
             }
         } catch (error) {
@@ -165,55 +163,53 @@ class BrandDetailController {
         }
     }
 
-    createThemeSections(sectionInfo) {
-        this.createSection(`${sectionInfo.key}_colors`,
-            sectionInfo,
-            sectionInfo.content.colors,
+    createThemeSections(sectionData) {
+        this.createSection(`${sectionData.key}_colors`,
+            sectionData,
+            sectionData.content.colors,
             'Theme Colors',
             'color',
             'colors')
-        this.createSection(`${sectionInfo.key}_typography`,
-            sectionInfo,
-            sectionInfo.content.typography,
+        this.createSection(`${sectionData.key}_typography`,
+            sectionData,
+            sectionData.content.typography,
             'Theme Typography',
             'text',
             'typography')
-        this.createSection(`${sectionInfo.key}_spacing`,
-            sectionInfo,
-            sectionInfo.content.spacing,
+        this.createSection(`${sectionData.key}_spacing`,
+            sectionData,
+            sectionData.content.spacing,
             'Theme Spacing', 'text',
             'spacing')
         this.createSection(
-            `${sectionInfo.key}_borderRadius`,
-            sectionInfo,
-            sectionInfo.content.borderRadius,
+            `${sectionData.key}_borderRadius`,
+            sectionData,
+            sectionData.content.borderRadius,
             'Theme Border Radius',
             'text',
             'borderRadius')
         this.createSection(
-            `${sectionInfo.key}_elevation`,
-            sectionInfo,
-            sectionInfo.content.elevation,
+            `${sectionData.key}_elevation`,
+            sectionData,
+            sectionData.content.elevation,
             'Theme Elevation',
             'text',
             'elevation')
     }
 
-    createSection(id, sectionInfo, content, sectionName, inputType, propertiesGroupName = null) {
-        const sectionElement = this.view.createSection(sectionInfo.key, sectionName, inputType);
+    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);
 
-        console.log('Section element created:', sectionElement);
-
-        this.view.populateSection(sectionInfo, sectionElement, content, inputType);
+        this.view.populateJsonFields(sectionData, sectionElement, content, inputType);
 
         const addButton = document.createElement('button');
         addButton.textContent = 'Add Field';
         addButton.className = 'add-field-btn';
-        addButton.onclick = () => this.addNewField(sectionInfo, sectionElement, inputType);
+        addButton.onclick = () => this.addNewField(sectionData, sectionElement, inputType);
         sectionElement.appendChild(addButton);
     }
 
@@ -229,25 +225,60 @@ class BrandDetailController {
         }
     }
 
-    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]] = {};
+    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]
                 }
-                current = current[keys[i]];
-            }
-            const lastKey = keys[keys.length - 1];
+                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 = {};
 
-            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;
+        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') {
@@ -256,10 +287,11 @@ class BrandDetailController {
                     // Convert to number if it's a valid number string
                     value = parseFloat(value);
                 }
-                current[lastKey] = value;
+                data[input.id] = value;
             }
         });
-        return configuration;
+
+        return data;
     }
 
     addNewField(sectionItem, sectionElement, inputType) {
@@ -326,12 +358,12 @@ class BrandDetailController {
                 .filter(element => element.dataset.key === sectionKey);
 
             if (sectionElements.length === 1) {
-                return this.getSectionConfiguration(sectionElements[0])
+                return this.collectJsonData(sectionElements[0])
             }
 
             const configurations = sectionElements.map(sectionElement => {
                 const propertiesGroupName = sectionElement.dataset.propertiesGroupName;
-                const config = this.getSectionConfiguration(sectionElement);
+                const config = this.collectJsonData(sectionElement);
 
                 if (propertiesGroupName !== "null") {
                     return {[propertiesGroupName]: config};
@@ -340,16 +372,12 @@ class BrandDetailController {
                 }
             });
 
-            const result = configurations.reduce((acc, 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;
             }, {});
 
-            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);
@@ -399,5 +427,4 @@ class BrandDetailController {
 }
 
 
-
 export default BrandDetailController;

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

@@ -92,67 +92,111 @@ class BrandDetailView {
         return section;
     }
 
-    populateSection(sectionItem, sectionElement, content, inputType) {
+    populateJsonFields(data, container, content, inputType, level = 0) {
+        container.dataset.key = data.key
+        container.dataset.level = `${level}`
+
         for (const [key, value] of Object.entries(content)) {
             if (Array.isArray(value)) {
-                sectionElement.appendChild(this.createInputField(sectionItem, key, value, 'array'));
-            } else if (typeof value === 'object' && value !== null) {
-                for (const [subKey, subValue] of Object.entries(value)) {
-                    const subInputType = subValue === true || subValue === false ? 'boolean' : inputType;
-                    sectionElement.appendChild(this.createInputField(sectionItem, `${key}.${subKey}`, subValue, subInputType));
-                }
-            } else {
-                const fieldInputType = value === true || value === false ? 'boolean' : inputType;
-                sectionElement.appendChild(this.createInputField(sectionItem, key, value, fieldInputType));
+                this.populateJsonArray(key, value, data, container, content, inputType, level)
+                continue
             }
+
+            if (value !== null && typeof value === 'object') {
+                this.populateJsonObject(key, value, data, container, content, inputType, level)
+                continue
+            }
+
+            const fieldElement = this.createJsonField(data, key, value, inputType, level)
+            container.appendChild(fieldElement);
         }
     }
 
-    createInputField(sectionItem, key, value, inputType) {
-        const container = document.createElement('div');
-        container.className = 'input-group';
+    populateJsonArray(key, value, data, container, content, inputType, level) {
+        const arrayContainer = document.createElement('div');
+        arrayContainer.className = 'json-array';
+        arrayContainer.classList.add(`json-array-${level}`);
+
+        const labelContainer = document.createElement('div');
+        labelContainer.className = 'json-array-label-group';
         const label = document.createElement('label');
         label.textContent = key;
-        container.appendChild(label);
-
-        const inputWrapper = document.createElement('div');
-        inputWrapper.className = 'input-wrapper';
-
-        if (inputType === 'array') {
-            const arrayInputContainer = document.createElement('div');
-            arrayInputContainer.className = 'array-input-container';
-
-            const input = document.createElement('input');
-            input.type = 'text';
-            input.id = key;
-            input.className = 'array-input';
-            input.placeholder = 'Enter array value';
+        labelContainer.appendChild(label);
 
+        // TODO: to be implemented later
+        if (false) {
             const addButton = document.createElement('button');
             addButton.className = 'add-array-item';
             addButton.textContent = '+';
+            let lastItemIndex = value.length - 1
+            addButton.addEventListener('click', () => {
+                const itemContainer = document.createElement('div');
+                itemContainer.className = 'json-array-item';
 
-            arrayInputContainer.appendChild(input);
-            arrayInputContainer.appendChild(addButton);
+                lastItemIndex += 1
+                let fieldKey = `${key}[${lastItemIndex}]`
 
-            const arrayItemsContainer = document.createElement('div');
-            arrayItemsContainer.className = 'array-items-container';
+                const indexed = container.querySelectorAll(`.json-array-item-indexed-${level}`).length !== 0;
+                if (indexed) {
+                    fieldKey = lastItemIndex
+                }
+                const field = this.createJsonField(data, fieldKey, '', inputType, level + 1)
+                field.classList.add(`json-array-item-${level}`);
+                itemContainer.appendChild(field);
 
-            inputWrapper.appendChild(arrayInputContainer);
-            inputWrapper.appendChild(arrayItemsContainer);
+                arrayContainer.insertBefore(itemContainer, arrayContainer.lastElementChild);
 
-            if (Array.isArray(value)) {
-                value.forEach(item => {
-                    this.addArrayItem(sectionItem, arrayItemsContainer, item);
-                });
+                this.onSectionChanged(data, container.closest('.section'));
+            });
+        }
+        arrayContainer.appendChild(labelContainer);
+
+        value.forEach((item, index) => {
+            const itemContainer = document.createElement('div');
+            itemContainer.className = 'json-array-item';
+            itemContainer.classList.add(`json-array-item-${level}`);
+            if (typeof item === 'object' && item !== null) {
+                this.populateJsonFields(data, itemContainer, item, inputType, level + 1);
+            } else {
+                itemContainer.dataset.level = `${level + 1}`
+                const field = this.createJsonField(data, `${index}`, item, inputType, level + 1)
+                itemContainer.classList.add(`json-array-item-indexed-${level}`);
+                itemContainer.appendChild(field);
             }
+            arrayContainer.appendChild(itemContainer);
+        });
 
-            addButton.addEventListener('click', () => {
-                this.addArrayItem(sectionItem, arrayItemsContainer, input.value.trim());
-                input.value = '';
-            });
+        // TODO: to be implemented later
+        // arrayContainer.appendChild(addButton);
+        container.appendChild(arrayContainer);
+    }
+
+    populateJsonObject(key, value, data, container, content, inputType, level) {
+        const objectContainer = document.createElement('div');
+        objectContainer.className = 'json-object';
+        objectContainer.classList.add(`json-object-${level}`);
+        const objectLabel = document.createElement('label');
+        objectLabel.className = 'json-object-title';
+        objectLabel.textContent = key;
+        objectContainer.appendChild(objectLabel);
+
+        this.populateJsonFields(data, objectContainer, value, inputType, level + 1);
 
-        } else if (inputType === 'boolean') {
+        container.appendChild(objectContainer);
+    }
+
+    createJsonField(data, key, value, inputType, level) {
+        const fieldInputType = typeof value === 'boolean' ? 'boolean' : inputType;
+        const container = document.createElement('div');
+        container.className = 'input-group';
+        const label = document.createElement('label');
+        label.textContent = key;
+        container.appendChild(label);
+
+        const inputWrapper = document.createElement('div');
+        inputWrapper.className = 'input-wrapper';
+
+        if (fieldInputType === 'boolean') {
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
             checkbox.id = key;
@@ -165,18 +209,18 @@ class BrandDetailView {
 
             checkbox.addEventListener('change', () => {
                 checkboxLabel.textContent = checkbox.checked ? 'True' : 'False';
-                this.onSectionChanged(sectionItem, container.closest('.section'));
+                this.onSectionChanged(data, container.closest('.section'));
             });
 
             inputWrapper.appendChild(checkbox);
             inputWrapper.appendChild(checkboxLabel);
         } else {
             const input = document.createElement('input');
-            input.type = inputType;
+            input.type = fieldInputType;
             input.id = key;
 
             console.log(value)
-            if (inputType === 'color') {
+            if (fieldInputType === 'color') {
                 input.value = value.startsWith('#') ? value : `#${value.substring(4)}`;
             } else {
                 input.value = value;
@@ -188,45 +232,23 @@ class BrandDetailView {
         const deleteIcon = document.createElement('span');
         deleteIcon.className = 'delete-icon';
         deleteIcon.textContent = '×';
-        deleteIcon.onclick = () => this.onDeleteField(sectionItem, container);
+        deleteIcon.onclick = () => this.onDeleteField(data, container);
         inputWrapper.appendChild(deleteIcon);
 
         container.appendChild(inputWrapper);
 
-        container.addEventListener('change', () => this.onSectionChanged(sectionItem, container.closest('.section')));
+        container.addEventListener('change', () => this.onSectionChanged(data, container.closest('.section')));
 
-        return container;
-    }
-
-    addArrayItem(sectionItem, container, value) {
-        const itemContainer = document.createElement('div');
-        itemContainer.classList.add('array-item');
-
-        const itemInput = document.createElement('input');
-        itemInput.type = 'text';
-        itemInput.classList.add('array-item-input');
-        itemInput.value = value;
-
-        const deleteButton = document.createElement('button');
-        deleteButton.classList.add('delete-array-item');
-        deleteButton.textContent = '×';
-        deleteButton.addEventListener('click', () => {
-            itemContainer.remove();
-            this.onSectionChanged(sectionItem, container.closest('.section'));
-        });
+        container.classList.add(`json-field-${level}`);
 
-        itemContainer.appendChild(itemInput);
-        itemContainer.appendChild(deleteButton);
-        container.appendChild(itemContainer);
-
-        this.onSectionChanged(sectionItem, container.closest('.section'));
+        return container;
     }
 
-    showAddFieldForm(sectionItem, sectionElement, inputType) {
+    showAddFieldForm(data, sectionElement, inputType) {
         this.addFieldSheet.show(inputType, (name, value) => {
-            const newField = this.createInputField(sectionItem, name, value, inputType);
+            const newField = this.createJsonField(data, name, value, inputType, 0);
             sectionElement.insertBefore(newField, sectionElement.lastElementChild);
-            this.onSectionChanged(sectionItem, sectionElement);
+            this.onSectionChanged(data, sectionElement);
         })
     }
 

data/solara/lib/core/dashboard/brand/brand.html

@@ -118,7 +118,8 @@
                 font-size: 1.4em;
             }
             .input-group {
-                margin-bottom: 17.5px;
+                min-width: 80%;
+                margin-bottom: 10px;
                 display: flex;
                 align-items: center;
                 background-color: white;
@@ -149,7 +150,7 @@
                 display: inline-block;
                 margin-right: 7px;
                 font-weight: bold;
-                min-width: 175px;
+                min-width: 10%;
                 flex-shrink: 0;
             }
             input, select {
@@ -177,19 +178,6 @@
                 background-color: #3CC2A3;
             }
 
-            .save-section-btn {
-                background-color: #28a745;
-                margin-top: 7px;
-                margin-right: 7px;
-            }
-            .save-section-btn:hover {
-                background-color: #218838;
-            }
-            .button-group {
-                display: flex;
-                justify-content: flex-start;
-                margin-top: 14px;
-            }
             .delete-icon {
                 color: var(--delete-color);
                 cursor: pointer;
@@ -233,18 +221,6 @@
                 }
             }
 
-            .array-input-container {
-                display: flex;
-                align-items: center;
-                margin-bottom: 3.5px;
-                width: 100%;
-            }
-
-            .array-input {
-                flex-grow: 1;
-                margin-right: 5.6px;
-            }
-
             .add-array-item {
                 background-color: #4CAF50;
                 color: white;
@@ -254,30 +230,6 @@
                 cursor: pointer;
             }
 
-            .array-items-container {
-                margin-top: 3.5px;
-                width: 100%;
-            }
-
-            .array-item {
-                display: flex;
-                align-items: center;
-                margin-bottom: 3.5px;
-            }
-
-            .array-item-input {
-                flex-grow: 1;
-                margin: 11.2px;
-            }
-
-            .delete-array-item {
-                background-color: #f44336;
-                color: white;
-                border: none;
-                padding: 1.4px 4.2px;
-                border-radius: 2.8px;
-                cursor: pointer;
-            }
             .logo {
                 width: 52.5px;
                 height: 52.5px;
@@ -544,6 +496,44 @@
                 filter: drop-shadow(2.1px 2.1px 2.1px rgba(0, 0, 0, 0.3));
                 transition: transform 0.3s ease;
             }
+
+            .json-object {
+                margin-bottom: 10px;
+                border: 3px solid #1e88e5; /* Blue border */
+                padding: 10px;
+            }
+            .json-object-title {
+                font-weight: bold;
+                flex-shrink: 0;
+                color: black;
+                font-size: 16px;
+                margin-bottom: 10px;
+            }
+
+            .json-array {
+                border-left: 2px solid #ff9800; /* Orange border */
+                padding: 10px;
+            }
+
+            .json-array-item {
+                margin-left: 20px;
+            }
+
+            .json-array-label-group {
+                min-width: 80%;
+                margin-bottom: 17.5px;
+                display: flex;
+                align-items: center;
+                background-color: white;
+                border-radius: 5.6px;
+                box-shadow: var(--field-shadow);
+                padding: 7px;
+                transition: box-shadow 0.3s ease;
+            }
+            .json-array-label-group:hover {
+                box-shadow: 0 2.8px 5.6px rgba(0, 0, 0, 0.15);
+            }
+
         </style>
     </head>
     <body>
@@ -591,11 +581,11 @@
                         <img src="../solara.png" alt="Solara Logo">
                         <h2>Solara simplifies the management of your brand configurations, allowing you to access and update them anytime, anywhere.</h2>
                         <div class="button-message">You can select a JSON file containing brand configurations that were exported using Solara.</div>
-                        <button id="uploadJsonBtn" style="  animation-delay: 0.5s;">Upload JSON</button>
-                        <div class="button-message" style="  animation-delay: 0.7s;">Alternatively, upload from a folder that includes the brand's JSON files.</div>
-                        <button id="uploadBrandBtn" style="  animation-delay: 0.9s;">Upload Folder</button>
-                        <div class="button-message" style="  animation-delay: 1.1s;">You also have the option to create new brand configurations.</div>
-                        <button id="newBrandBtn" style="  animation-delay: 1.3s;">New Brand</button>
+                        <button id="uploadJsonBtn" style="           animation-delay: 0.5s;">Upload JSON</button>
+                        <div class="button-message" style="           animation-delay: 0.7s;">Alternatively, upload from a folder that includes the brand's JSON files.</div>
+                        <button id="uploadBrandBtn" style="           animation-delay: 0.9s;">Upload Folder</button>
+                        <div class="button-message" style="           animation-delay: 1.1s;">You also have the option to create new brand configurations.</div>
+                        <button id="newBrandBtn" style="           animation-delay: 1.3s;">New Brand</button>
                     </div>
 
                 </div>

data/solara/lib/solara/version.rb

@@ -1,3 +1,3 @@
 module Solara
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solara
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Malek Kamel
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-10 00:00:00.000000000 Z
+date: 2024-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor