Merge pull request #83 from ravijar/dev

New features & bug fixes

Author: ravijar

README-DEV.md

@@ -0,0 +1 @@
+## test

README.md

@@ -184,6 +184,8 @@ The configuration file is an XML document containing <pages> as the root element
 ```
 ![hero-section-gif.gif](docs/resources/documentation/hero-section-gif.gif)  
 
+_React Code_ - [`HeoSection.jsx`](src/main/resources/templates/react/components/HeroSection.jsx) | _Default Styling_ - [`Herosection.css`](src/main/resources/templates/css/components/HeroSection.css)
+
  ii. `Button` [Root/Child]
   - A button that supports various actions triggered on a click event.
   - **Functionality:**
@@ -232,7 +234,9 @@ The configuration file is an XML document containing <pages> as the root element
           </component>
           ```
       
-      ![button-gif.gif](docs/resources/documentation/button-gif.gif)  
+      ![button-gif.gif](docs/resources/documentation/button-gif.gif)
+
+      _React Code_ - [`Button.jsx`](src/main/resources/templates/react/components/Button.jsx) | _Default Styling_ - [`Button.css`](src/main/resources/templates/css/components/Button.css)
 
  iii. `Container` [Root/Child]
   - A **data-fetching** component that retrieves and displays information from a backend API or LocalStorage
@@ -272,6 +276,7 @@ The configuration file is an XML document containing <pages> as the root element
           </result>
       </component>
       ```
+_React Code_ - [`Container.jsx`](src/main/resources/templates/react/components/Container.jsx) | _Default Styling_ - [`Container.css`](src/main/resources/templates/css/components/Container.css)
 
  iv. `Form` [Root]
   - A form based on URL parameters and schema properties defined in an OpenAPI Specification (OAS) resource.
@@ -294,6 +299,8 @@ The configuration file is an XML document containing <pages> as the root element
 ```
 ![form-gif.gif](docs/resources/documentation/form-gif.gif) 
 
+_React Code_ - [`Form.jsx`](src/main/resources/templates/react/components/Form.jsx) | _Default Styling_ - [`Form.css`](src/main/resources/templates/css/components/Form.css)
+
  v. `SearchBar` [Root/Child]
   - A search bar component that fetches data from a specified resource.
   - **Functionality:**
@@ -310,9 +317,10 @@ The configuration file is an XML document containing <pages> as the root element
         </component>
     </result>
 </component>
-
 ```
 
+_React Code_ - [`SearchBar.jsx`](src/main/resources/templates/react/components/SearchBar.jsx) | _Default Styling_ - [`SearchBar.css`](src/main/resources/templates/css/components/SearchBar.css)
+
  vi. `CardSection` [Result]
   - Displays a list of cards, where each card contains an **image**, **a title**, and **a description** related to an item.
   - **Functionality:**
@@ -329,6 +337,8 @@ The configuration file is an XML document containing <pages> as the root element
 ```
 ![card-section-gif.gif](docs/resources/documentation/card-section-gif.gif) 
 
+_React Code_ - [`CardSection.jsx`](src/main/resources/templates/react/components/CardSection.jsx) | _Default Styling_ - [`CardSection.css`](src/main/resources/templates/css/components/CardSection.css)
+
  vii. `Card` [Result]
   - Displays an image, a title, a description, and additional data in a structured format.
   - **Functionality:**
@@ -352,6 +362,8 @@ The configuration file is an XML document containing <pages> as the root element
 ```
 ![card-gif.gif](docs/resources/documentation/card-gif.gif) 
 
+_React Code_ - [`Card.jsx`](src/main/resources/templates/react/components/Card.jsx) | _Default Styling_ - [`Card.css`](src/main/resources/templates/css/components/Card.css)
+
  viii. `Alert` [Result]
   - Displays success or failure messages based on the API response.
   - **Functionality:**
@@ -365,6 +377,8 @@ The configuration file is an XML document containing <pages> as the root element
 ```
 ![alert-gif.gif](docs/resources/documentation/alert-gif.gif) 
 
+_React Code_ - [`Alert.jsx`](src/main/resources/templates/react/components/Alert.jsx) | _Default Styling_ - [`Alert.css`](src/main/resources/templates/css/components/Alert.css)
+
  ix. `Table` [Result]
   - Displays data in a structured tabular format.
   - **Functionality:**
@@ -393,6 +407,8 @@ The configuration file is an XML document containing <pages> as the root element
 ```
 ![table-gif.gif](docs/resources/documentation/table-gif.gif) 
 
+_React Code_ - [`Table.jsx`](src/main/resources/templates/react/components/Table.jsx) | _Default Styling_ - [`Table.css`](src/main/resources/templates/css/components/Table.css)
+
 4. Properties Tags
    
 i. `<resource>` : Defines an API resource to be accessed by the component.  

samples/petstore/pages.xml

@@ -24,6 +24,18 @@
         </component>
     </page>
 
+    <page name="SearchPets" route="/searchPets" navbar="false">
+        <component type="SearchBar" id="petsSearchBar">
+            <resource method="GET">/pets/{id}</resource>
+            <result>
+                <component type="CardSection" id="petsContainerCardSection">
+                    <assign key="id" title="name" description="description" image="imageURL"/>
+                    <route>/pets/{id}</route>
+                </component>
+            </result>
+        </component>
+    </page>
+
     <page name="Pet" route="/pets/{id}" navbar="false">
         <component type="Container" id="petContainer">
             <resource method="GET">/pets/{id}</resource>
@@ -35,6 +47,9 @@
                         <localStorage action="save">
                             <assign key="cart"/>
                         </localStorage>
+                        <result>
+                            <component type="Alert" id="petAddToCartButtonAlert"/>
+                        </result>
                     </component>
                 </component>
             </result>
@@ -54,6 +69,9 @@
                         <localStorage action="remove">
                             <assign key="cart"/>
                         </localStorage>
+                        <result>
+                            <component type="Alert" id="removeFromCartButtonAlert"/>
+                        </result>
                     </component>
                 </component>
             </result>
@@ -78,7 +96,7 @@
                         <text>Delete</text>
                         <resource method="DELETE">/pets/{id}</resource>
                         <result>
-                            <component type="Alert" id="deletePetFormAlert"/>
+                            <component type="Alert" id="deletePetButtonAlert"/>
                         </result>
                     </component>
                 </component>
@@ -108,14 +126,4 @@
         </component>
     </page>
 
-    <page name="DeletePet" route="/deletePet/{id}" navbar="false">
-        <component type="Form" id="deletePetForm">
-            <resource method="DELETE">/pets/{id}</resource>
-            <text>Delete Pet</text>
-            <submit>Delete Pet</submit>
-            <result>
-                <component type="Alert" id="deletePetFormAlert"/>
-            </result>
-        </component>
-    </page>
 </pages>

src/main/java/com/ravijar/core/ProjectManager.java

@@ -36,7 +36,7 @@ public class ProjectManager {
     private final String[] cssComponentTemplates = {"InputField", "KeyValuePair", "Alert", "HeroSection", "SearchBar", "Button", "CardSection", "NavBar", "Form"};
     private final String[] projectSubDirs = {"styles/components", "styles/pages", "styles/custom_styles"};
     private final String[] buildSubDirs = {"build/src/components", "build/src/pages", "build/src/custom_styles", "build/src/common"};
-    private final String[] npmPackages = {"react-router-dom", "@fortawesome/react-fontawesome", "@fortawesome/free-regular-svg-icons"};
+    private final String[] npmPackages = {"react-router-dom", "@fortawesome/react-fontawesome", "@fortawesome/free-regular-svg-icons", "@fortawesome/free-solid-svg-icons"};
     private static final String SOURCE_ROOT_PATH="templates";
 
     public ProjectManager() {

src/main/java/com/ravijar/model/freemarker/FreeMarkerSearchBar.java

@@ -8,6 +8,7 @@
 @Setter
 @ToString
 public class FreeMarkerSearchBar extends FreeMarkerComponent{
+    private String action;
     private OpenAPIResource resource;
     private FreeMarkerComponent resultComponent;
 }

src/main/java/com/ravijar/populator/ButtonPopulator.java

@@ -31,7 +31,9 @@ public void populate(Button source, FreeMarkerButton target) {
         if(source.getResource() != null) {
             target.setAction("resource");
             target.setResource(openAPIParser.getResourceData(source.getResource()));
+        }
 
+        if(source.getResult() != null) {
             FreeMarkerComponent freeMarkerComponent = new PopulatorHelper(openAPIParser).switchComponent(source.getResult().getComponent(), target);
             freeMarkerComponent.setRole("result");
             target.setResultComponent(freeMarkerComponent);

src/main/java/com/ravijar/populator/SearchBarPopulator.java

@@ -15,7 +15,11 @@ public SearchBarPopulator(OpenAPIParser openAPIParser) {
 
     public void populate(SearchBar source, FreeMarkerSearchBar target) {
         populateComponent(source, target);
-        target.setResource(openAPIParser.getResourceData(source.getResource()));
+
+        if(source.getResource() != null) {
+            target.setAction("resource");
+            target.setResource(openAPIParser.getResourceData(source.getResource()));
+        }
 
         FreeMarkerComponent freeMarkerComponent = new PopulatorHelper(openAPIParser).switchComponent(source.getResult().getComponent(), target);
         freeMarkerComponent.setRole("result");

src/main/resources/templates/css/components/SearchBar.css

@@ -1,34 +1,27 @@
 .search-bar {
     display: flex;
     align-items: center;
-    width: 100%;
-    max-width: 300px;
-    margin: 0 auto;
+    max-width: 250px;
     border-radius: 20px;
+    border: 2px solid #1A1A1A;
     overflow: hidden;
-    background-color: rgb(255, 255, 255);
+    box-sizing: border-box;
+    background-color: white;
 }
 
 .search-input {
-    flex-grow: 1;
+    padding: 12px 16px;
+    border-radius: 6px;
+    font-family: inherit;
     border: none;
-    padding: 5px 5px 5px 20px;
-    font-size: 16px;
     outline: none;
-    background-color: rgba(255, 255, 255, 0.5);
 }
 
 .search-button {
-    background-color: #007bff;
+    background-color: white;
     flex-grow: 1;
-    color: white;
     border: none;
-    padding: 5px 10px;
-    font-size: 16px;
+    padding: 11px 10px;
+    font-family: inherit;
     cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.search-button:hover {
-    background-color: #0056b3;
 }

src/main/resources/templates/css/components/Table.css

@@ -24,7 +24,7 @@
 .custom-table thead {
     position: sticky;
     top: 0;
-    z-index: 100;
+    z-index: 2;
     background-color: #f4f4f4;
 }
 

src/main/resources/templates/freemarker/css/Nest.ftl

@@ -2,9 +2,9 @@
 <#switch component.type>
     <#case "SearchBar">
     z-index: 1;
-    position: absolute;
-    top: 60px;
-    right: 30px;
+    margin: 10px 10px 0 0;
+    display: flex;
+    justify-content: flex-end;
         <#break>
     <#case "Button">
         <#switch component.role>
@@ -18,9 +18,9 @@
         <#break>
     <#case "Form">
     z-index: 1;
-    position: absolute;
-    top: 60px;
-    left:35%;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
         <#break>
     <#default>
 
@@ -32,13 +32,13 @@
     <#switch component.resultComponent.type>
         <#case "Card">
     z-index: 1;
-    position: absolute;
-    top: 100px;
-    left:25%;
+    margin-top: 50px;
+    display: flex;
+    justify-content: center;
             <#break>
         <#case "Alert">
-    z-index: 1;
-    position: absolute;
+    z-index: 10;
+    position: fixed;
     top: 75px;
     right: 5px;
             <#break>