Drawer component demo overhaul

src/main/java/com/webforj/samples/views/drawer/DrawerAutoFocusView.java

@@ -1,27 +1,56 @@
 package com.webforj.samples.views.drawer;
 
-import com.webforj.annotation.InlineStyleSheet;
 import com.webforj.component.Composite;
+import com.webforj.component.button.Button;
+import com.webforj.component.button.ButtonTheme;
 import com.webforj.component.drawer.Drawer;
+import com.webforj.component.html.elements.Div;
 import com.webforj.component.layout.flexlayout.FlexLayout;
 import com.webforj.component.optioninput.CheckBox;
 import com.webforj.router.annotation.FrameTitle;
 import com.webforj.router.annotation.Route;
 
-@InlineStyleSheet("context://css/drawer/drawerDemo.css")
 @Route
-@FrameTitle("Drawer Auto-Focus")
+@FrameTitle("Drawer Demo")
 public class DrawerAutoFocusView extends Composite<FlexLayout> {
 
   Drawer drawer = new Drawer();
-  CheckBox checkbox = new CheckBox("Checkbox auto-focused");
 
   public DrawerAutoFocusView() {
+    getBoundComponent()
+        .setMargin("20px");
+
+    drawer.setAutofocus(true); //Setting AutoFocus
 
-    getBoundComponent().add(drawer);
+    CheckBox emailNotifications = new CheckBox("Email Notifications");
+    CheckBox smsNotifications = new CheckBox("SMS Notifications");
+    CheckBox pushNotifications = new CheckBox("Push Notifications");
+
+    Div checkBoxContainer = new Div();
+    checkBoxContainer.add(emailNotifications, smsNotifications, pushNotifications);
+    checkBoxContainer.setStyle("display", "flex")
+        .setStyle("flex-direction", "column")
+        .setStyle("gap", "10px");
+
+    Button saveButton = new Button("Save Preferences")
+        .setTheme(ButtonTheme.PRIMARY)
+        .setWidth("100%");
+
+    Div drawerContent = new Div();
+    drawerContent.setStyle("display", "flex")
+        .setStyle("flex-direction", "column")
+        .setStyle("justify-content", "space-between")
+        .setStyle("height", "100%");
+
+    drawerContent.add(checkBoxContainer, saveButton);
+    drawer.add(drawerContent);
+
+    Button openDrawerButton = new Button("Open Preferences");
+    openDrawerButton.onClick(e -> drawer.open());
+
+    getBoundComponent().add(openDrawerButton, drawer);
+
+    drawer.setLabel("Notification Preferences");
     drawer.open();
-    drawer.add(checkbox);
-    drawer.addClassName("drawer");
-    drawer.setAutofocus(true);
-  }
 }
+}

src/main/java/com/webforj/samples/views/drawer/DrawerPlacementView.java

@@ -1,33 +1,65 @@
 package com.webforj.samples.views.drawer;
 
-import com.webforj.annotation.InlineStyleSheet;
-import com.webforj.component.list.ComboBox;
 import com.webforj.component.Composite;
 import com.webforj.component.drawer.Drawer;
 import com.webforj.component.drawer.Drawer.Placement;
+import com.webforj.component.layout.flexlayout.FlexDirection;
 import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.component.optioninput.RadioButton;
+import com.webforj.component.optioninput.RadioButtonGroup;
 import com.webforj.router.annotation.FrameTitle;
 import com.webforj.router.annotation.Route;
 
-@InlineStyleSheet("context://css/drawer/drawerDemo.css")
 @Route
 @FrameTitle("Drawer Placement")
 public class DrawerPlacementView extends Composite<FlexLayout> {
 
   Drawer drawer = new Drawer();
-  ComboBox placements = new ComboBox();
 
   public DrawerPlacementView() {
-    getBoundComponent().add(drawer);
-    drawer.add(placements);
-    drawer.open();
+    getBoundComponent()
+        .setDirection(FlexDirection.COLUMN)
+        .setSpacing("20px")
+        .setMargin("20px");
+
+    drawer.setLabel("Drawer Placement Options");
     drawer.addClassName("drawer");
+    drawer.open();
+
+    RadioButton topOption = new RadioButton("Top");
+    RadioButton bottomOption = new RadioButton("Bottom");
+    RadioButton leftOption = new RadioButton("Left", true);
+    RadioButton rightOption = new RadioButton("Right");
 
-    for (Placement placement : Drawer.Placement.values()) {
-      placements.add(placement,
-          placement.toString().substring(0, 1).toUpperCase() + placement.toString().substring(1).toLowerCase());
-    }
-    placements.selectIndex(4);
-    placements.onSelect(e -> drawer.setPlacement((Placement) placements.getSelectedItem().getKey()));
+    RadioButtonGroup placementGroup = new RadioButtonGroup("Placement Options", topOption, bottomOption, leftOption, rightOption);
+
+    FlexLayout groupLayout = new FlexLayout();
+    groupLayout.setDirection(FlexDirection.COLUMN);
+    groupLayout.setSpacing("10px");
+    groupLayout.add(placementGroup, topOption, bottomOption, leftOption, rightOption);
+
+    placementGroup.onValueChange(event -> {
+      RadioButton selected = placementGroup.getChecked();
+      if (selected != null) {
+        switch (selected.getText()) {
+          case "Top":
+            drawer.setPlacement(Placement.TOP);
+            break;
+          case "Bottom":
+            drawer.setPlacement(Placement.BOTTOM);
+            break;
+          case "Right":
+            drawer.setPlacement(Placement.RIGHT);
+            break;
+          default:
+            drawer.setPlacement(Placement.LEFT);
+            break;
+        }
+      }
+    });
+
+    drawer.add(groupLayout);
+
+    getBoundComponent().add(drawer);
   }
 }

src/main/java/com/webforj/samples/views/drawer/DrawerView.java

@@ -0,0 +1,90 @@
+package com.webforj.samples.views.drawer;
+
+import com.webforj.annotation.InlineStyleSheet;
+import com.webforj.component.Composite;
+import com.webforj.component.button.Button;
+import com.webforj.component.button.ButtonTheme;
+import com.webforj.component.drawer.Drawer;
+import com.webforj.component.field.TextField;
+import com.webforj.component.html.elements.Div;
+import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.component.optioninput.CheckBox;
+import com.webforj.router.annotation.FrameTitle;
+import com.webforj.router.annotation.Route;
+import java.util.ArrayList;
+import java.util.Iterator;
+import java.util.List;
+
+@InlineStyleSheet("context://css/drawer/drawer.css")
+@Route
+@FrameTitle("Task Manager Drawer")
+public class DrawerView extends Composite<FlexLayout> {
+
+  Drawer drawer = new Drawer();
+  List<CheckBox> taskList = new ArrayList<>();
+  Div taskContainer = new Div();
+
+  public DrawerView() {
+    getBoundComponent().addClassName("drawer-view");
+
+    drawer.setLabel("Task Manager");
+    drawer.addClassName("drawer");
+    drawer.open();
+
+    taskContainer.addClassName("task-container");
+
+    addTask("Finish project documentation");
+    addTask("Call John about the meeting");
+    addTask("Prepare slides for tomorrow");
+
+    TextField newTaskField = new TextField("New Task", "");
+    newTaskField.addClassName("new-task-field");
+
+    Button addTaskButton = new Button("Add Task", ButtonTheme.PRIMARY);
+    addTaskButton.addClassName("add-task-button");
+    addTaskButton.onClick(e -> {
+      String taskText = newTaskField.getValue();
+      if (taskText != null && !taskText.trim().isEmpty()) {
+        addTask(taskText);
+        newTaskField.setValue("");
+      }
+    });
+
+    Button clearTasksButton = new Button("Clear Completed", ButtonTheme.DANGER);
+    clearTasksButton.addClassName("clear-tasks-button");
+    clearTasksButton.onClick(e -> clearCompletedTasks());
+
+    Div footerContainer = new Div();
+    footerContainer.addClassName("footer-container");
+    footerContainer.add(newTaskField, addTaskButton, clearTasksButton);
+
+    Div drawerContent = new Div();
+    drawerContent.addClassName("drawer-content");
+    drawerContent.add(taskContainer, footerContainer);
+
+    drawer.add(drawerContent);
+
+    Button openDrawerButton = new Button("Open Task Manager");
+    openDrawerButton.addClassName("open-drawer-button");
+    openDrawerButton.onClick(e -> drawer.open());
+
+    getBoundComponent().add(openDrawerButton, drawer);
+  }
+
+  private void addTask(String taskText) {
+    CheckBox task = new CheckBox(taskText);
+    taskList.add(task);
+    taskContainer.add(task);
+  }
+
+  private void clearCompletedTasks() {
+    Iterator<CheckBox> iterator = taskList.iterator();
+    while (iterator.hasNext()) {
+      CheckBox task = iterator.next();
+      if (task.isChecked()) {
+        iterator.remove();
+        taskContainer.remove(task);
+      }
+    }
+  }
+}