updated the documentation and fixed sizing issues with plugins

docs/intro.md

@@ -25,6 +25,11 @@ Things you can do on canvas.
 3. zoom using `+`/`-` keys
 4. Delete widgets using `del` key or right clicking on the widget
 
+## Project name
+By default all project's are named untitled project, you can change this from the header input next to export code.
+
+## Selecting a UI library
+You can select the UI library from the header dropdown. Once selected changing the UI library in between your work, will erase the canvas.
 
 ## Widgets
 
@@ -64,7 +69,9 @@ or right-click -> delete
 ### Variable names
 
 To modify variable name, change the widget name attributes, if there are duplicate names, 
-the code generation engine will automatically add a count. Every widget name will be converted
+the code generation engine will automatically add a count to the the variable name, eg: var1, var2. 
+
+Every widget name will be converted
 to snake case.
 
 ![widget name](./assets/widgetname.png)
@@ -83,6 +90,20 @@ Now under the label attributes you'll be able to see image upload option. Select
 
 ![image label](./assets/label-image.png)
 
+### Adding options to radio button
+
+To add more option to radio button click on the radio button widget then on the toolbar ->
+under radio group -> add input
+
+![radio btn](./assets/radio-btn.png)
+
+### Adding options to select dropdown.
+
+Adding more options to select dropdown is similar to radio buttons as shown above. 
+
+![select options](./assets/drop-down.png)
+
+
 ## Layouts
 
 There are 3 main layouts. The layouts are set by the parents. Once a layout is set 
@@ -110,3 +131,21 @@ Grid is a 2d layout manager, you can position each widget by clicking on widget
 You can use position absolute for specific widget by checking the absolute positing attribute
 
 ![Absolute positioning](./assets/absolute-position.png)
+
+
+## Plugins
+
+Plugins are third party UI libraries. You can drag and drop the plugins just like widgets onto the canvas. The plugin card on the sidebar contains information about the library, such as library repo and license.
+
+![plugins](./assets/plugins.png)
+
+
+## Exporting code
+Once you are happy with the UI, you can click on export code from the header.
+
+## Requirements.txt
+The requirements.txt files are auto generated, before running the code ensure you have installed the dependencies.
+
+## Saving the file
+
+Files are not saved or stored. However this is an upcoming feature for the [Premium users](https://github.com/PaulleDemon/PyUIBuilder?tab=readme-ov-file#license---fund-the-development)

src/canvas/widgets/base.js

@@ -645,8 +645,8 @@ class Widget extends React.Component {
      */
     setWidgetSize(width, height) {
 
-        const fitWidth = this.state.fitContent.width || true
-        const fitHeight = this.state.fitContent.height || true
+        const fitWidth = this.state.fitContent?.width
+        const fitHeight = this.state.fitContent?.height
 
         if (fitWidth && fitHeight){
             message.warning("both width and height are set to fit-content, unset it to start resizing")

src/frameworks/tkinter/plugins/analogTimepicker.js

@@ -39,10 +39,12 @@ class AnalogTimePicker extends TkinterBase{
 
         this.timePickerRef = React.createRef()
 
+        this.minSize = {width: 100, height: 100}
+
         this.state = {
             ...this.state,
             widgetName: "Timepicker",
-            size: { width: 'fit', height: 'fit' },
+            size: { width: 250, height: 350 },
             attrs: {
                 ...newAttrs,
                 styling: {
@@ -118,7 +120,9 @@ class AnalogTimePicker extends TkinterBase{
         super.componentDidMount()
         this.timePicker = timePicker({
                                 element: this.timePickerRef.current,
-                                mode: "12"
+                                mode: "12",
+                                width: this.state.size.width,
+                                // height: this.state.size.height
                             })
         
         // used to remove ok and cancel buttons
@@ -132,6 +136,11 @@ class AnalogTimePicker extends TkinterBase{
         this.timePicker.dispose()
     }
 
+    setResize(pos, size){
+        super.setResize(pos, size)
+        this.timePicker.setWidth(size.width)
+    }
+
     handleThemeChange(value){
         this.setAttrValue("styling.theme", value)
 
@@ -241,7 +250,7 @@ class AnalogTimePicker extends TkinterBase{
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none" 
+                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-content-start tw-pointer-events-none" 
                         style={timePickerStyling} 
                         ref={this.timePickerRef}>
                     

src/frameworks/tkinter/plugins/videoPlayer.js

@@ -31,7 +31,7 @@ class VideoPlayer extends TkinterBase{
 
         this.state = {
             ...this.state,
-            size: { width: 'fit', height: 'fit' },
+            size: { width: 350, height: 200 },
             widgetName: "Video player",
             attrs: {
                 ...newAttrs,