Additional documentation and code examples (#339)

* additional documentation and code examples

* Update QTabWidget.ts

* Update QTableWidget.ts

* Update QTableWidgetItem.ts

* Update QTreeWidget.ts

* Update QTreeWidgetItem.ts

* Update QTreeWidget.ts

* Fixup doc comments

* fix nodedialog

* fix abstract class docs

* lint fix

* Adds QFileDialog

* Adds QGroupBox

* Adds qmessagebox, qpainter and qgroupbox

* adds link to advanced qpainter example

* Adds qtablewidget qstackedwidget and qtoolbutton

* Adds Qtreewidget docs

Co-authored-by: Atul R <atulanand94@gmail.com>

src/cpp/include/nodegui/QtWidgets/QFileDialog/qfiledialog_wrap.h

@@ -26,4 +26,6 @@ class QFileDialogWrap : public Napi::ObjectWrap<QFileDialogWrap> {
   Napi::Value labelText(const Napi::CallbackInfo& info);
   Napi::Value setLabelText(const Napi::CallbackInfo& info);
   Napi::Value setOption(const Napi::CallbackInfo& info);
+  Napi::Value setNameFilter(const Napi::CallbackInfo& info);
+  Napi::Value selectedFiles(const Napi::CallbackInfo& info);
 };

src/cpp/lib/QtWidgets/QFileDialog/qfiledialog_wrap.cpp

@@ -18,6 +18,9 @@ Napi::Object QFileDialogWrap::init(Napi::Env env, Napi::Object exports) {
        InstanceMethod("labelText", &QFileDialogWrap::labelText),
        InstanceMethod("setLabelText", &QFileDialogWrap::setLabelText),
        InstanceMethod("setOption", &QFileDialogWrap::setOption),
+       InstanceMethod("setNameFilter", &QFileDialogWrap::setNameFilter),
+       InstanceMethod("selectedFiles", &QFileDialogWrap::selectedFiles),
+
        QDIALOG_WRAPPED_METHODS_EXPORT_DEFINE(QFileDialogWrap)});
   constructor = Napi::Persistent(func);
   exports.Set(CLASSNAME, func);
@@ -122,3 +125,25 @@ Napi::Value QFileDialogWrap::setOption(const Napi::CallbackInfo& info) {
   this->instance->setOption(option, on);
   return env.Null();
 }
+
+Napi::Value QFileDialogWrap::setNameFilter(const Napi::CallbackInfo& info) {
+  Napi::Env env = info.Env();
+  Napi::HandleScope scope(env);
+
+  std::string filter = info[0].As<Napi::String>().Utf8Value();
+
+  this->instance->setNameFilter(QString::fromStdString(filter));
+  return env.Null();
+}
+
+Napi::Value QFileDialogWrap::selectedFiles(const Napi::CallbackInfo& info) {
+  Napi::Env env = info.Env();
+  Napi::HandleScope scope(env);
+
+  QStringList files = this->instance->selectedFiles();
+  Napi::Array fileList = Napi::Array::New(env, files.size());
+  for (int i = 0; i < files.size(); i++) {
+    fileList[i] = Napi::String::New(env, files[i].toStdString());
+  }
+  return fileList;
+}

src/lib/QtGui/QFont.ts

@@ -3,37 +3,6 @@ import addon from '../utils/addon';
 import { QVariant } from '../QtCore/QVariant';
 import { checkIfNativeElement } from '../utils/helpers';
 
-export enum QFontStretch {
-    AnyStretch = 0,
-    UltraCondensed = 50,
-    ExtraCondensed = 62,
-    Condensed = 75,
-    SemiCondensed = 87,
-    Unstretched = 100,
-    SemiExpanded = 112,
-    Expanded = 125,
-    ExtraExpanded = 150,
-    UltraExpanded = 200,
-}
-export enum QFontCapitalization {
-    MixedCase = 0,
-    AllUppercase = 1,
-    AllLowercase = 2,
-    SmallCaps = 3,
-    Capitalize = 4,
-}
-export enum QFontWeight {
-    Thin = 0,
-    ExtraLight = 12,
-    Light = 25,
-    Normal = 50,
-    Medium = 57,
-    DemiBold = 63,
-    Bold = 75,
-    ExtraBold = 81,
-    Black = 87,
-}
-
 export class QFont extends Component {
     native: NativeElement;
     constructor();
@@ -95,3 +64,34 @@ export class QFont extends Component {
         return new QFont(addon.QFont.fromQVariant(variant.native));
     }
 }
+
+export enum QFontStretch {
+    AnyStretch = 0,
+    UltraCondensed = 50,
+    ExtraCondensed = 62,
+    Condensed = 75,
+    SemiCondensed = 87,
+    Unstretched = 100,
+    SemiExpanded = 112,
+    Expanded = 125,
+    ExtraExpanded = 150,
+    UltraExpanded = 200,
+}
+export enum QFontCapitalization {
+    MixedCase = 0,
+    AllUppercase = 1,
+    AllLowercase = 2,
+    SmallCaps = 3,
+    Capitalize = 4,
+}
+export enum QFontWeight {
+    Thin = 0,
+    ExtraLight = 12,
+    Light = 25,
+    Normal = 50,
+    Medium = 57,
+    DemiBold = 63,
+    Bold = 75,
+    ExtraBold = 81,
+    Black = 87,
+}

src/lib/QtGui/QIcon.ts

@@ -4,17 +4,6 @@ import { QPixmap } from './QPixmap';
 import { QVariant } from '../QtCore/QVariant';
 import { checkIfNativeElement } from '../utils/helpers';
 
-export enum QIconMode {
-    Normal,
-    Disabled,
-    Active,
-    Selected,
-}
-export enum QIconState {
-    Off,
-    On,
-}
-
 /**
  
 > The QIcon class provides scalable icons in different modes and states.
@@ -70,3 +59,14 @@ export class QIcon extends Component {
         return new QIcon(addon.QIcon.fromQVariant(variant.native));
     }
 }
+
+export enum QIconMode {
+    Normal,
+    Disabled,
+    Active,
+    Selected,
+}
+export enum QIconState {
+    Off,
+    On,
+}

src/lib/QtGui/QMovie.ts

@@ -5,15 +5,6 @@ import { NodeObject, QObjectSignals } from '../QtCore/QObject';
 import { QSize } from '../QtCore/QSize';
 import { QPixmap } from './QPixmap';
 
-export interface QMovieSignals extends QObjectSignals {
-    error: (error: ImageReaderError) => void;
-    finished: () => void;
-    frameChanged: (frameNumber?: number) => void;
-    resized: (qSizeNative?: NativeElement) => void;
-    started: () => void;
-    stateChanged: (state: MovieState) => void;
-    updated: (qRectNative: NativeElement) => void;
-}
 export class QMovie extends NodeObject<QMovieSignals> {
     native: NativeElement;
     constructor();
@@ -105,3 +96,13 @@ export enum ImageReaderError {
 }
 
 type SupportedFormats = 'gif' | 'webp';
+
+export interface QMovieSignals extends QObjectSignals {
+    error: (error: ImageReaderError) => void;
+    finished: () => void;
+    frameChanged: (frameNumber?: number) => void;
+    resized: (qSizeNative?: NativeElement) => void;
+    started: () => void;
+    stateChanged: (state: MovieState) => void;
+    updated: (qRectNative: NativeElement) => void;
+}

src/lib/QtGui/QPixmap.ts

@@ -4,8 +4,6 @@ import { AspectRatioMode, TransformationMode } from '../QtEnums';
 import { checkIfNativeElement } from '../utils/helpers';
 import { QVariant } from '../QtCore/QVariant';
 
-export type ImageFormats = 'BMP' | 'GIF' | 'JPG' | 'JPEG' | 'PNG' | 'PBM' | 'PGM' | 'PPM' | 'XBM' | 'XPM' | 'SVG';
-
 /**
  
 > The QPixmap class helps hold an image in the form of off-screen image representation.
@@ -74,3 +72,5 @@ export class QPixmap extends Component {
         return new QPixmap(addon.QPixmap.fromQVariant(variant.native));
     }
 }
+
+export type ImageFormats = 'BMP' | 'GIF' | 'JPG' | 'JPEG' | 'PNG' | 'PBM' | 'PGM' | 'PPM' | 'XBM' | 'XPM' | 'SVG';

src/lib/QtWidgets/QAbstractButton.ts

@@ -2,6 +2,16 @@ import { NodeWidget, QWidgetSignals } from './QWidget';
 import { QIcon } from '../QtGui/QIcon';
 import { QSize } from '../QtCore/QSize';
 
+/**
+ 
+> This is the abstract base class of button widgets, providing their functionality.
+
+* **This class is a JS wrapper around Qt's [QAbstractButton class](https://doc.qt.io/qt-5/qabstractbutton.html)**
+
+The QAbstractButton class is an abstract class and therefore, technically, no further instances actually have to be created.
+It is inherited by QCheckBox, QPushButton, QRadioButton, and QToolButton.
+
+ */
 export abstract class QAbstractButton<Signals extends QAbstractButtonSignals> extends NodeWidget<Signals> {
     setText(text: string): void {
         this.native.setText(text);

src/lib/QtWidgets/QAbstractItemView.ts

@@ -5,46 +5,16 @@ import { QSize } from '../QtCore/QSize';
 import { DropAction } from '../QtEnums/DropAction';
 import { TextElideMode } from '../QtEnums/TextElideMode';
 
-export enum DragDropMode {
-    NoDragDrop,
-    DragOnly,
-    DropOnly,
-    DragDrop,
-    InternalMove,
-}
+/**
+ 
+> This is the abstract base class of button widgets, providing their functionality.
 
-export enum EditTrigger {
-    NoEditTriggers = 0,
-    CurrentChanged = 1,
-    DoubleClicked = 2,
-    SelectedClicked = 4,
-    EditKeyPressed = 8,
-    AnyKeyPressed = 16,
-    AllEditTriggers = 31,
-}
+* **This class is a JS wrapper around Qt's [QAbstractItemView class](https://doc.qt.io/qt-5/qabstractitemview.html)**
 
-export enum ScrollMode {
-    ScrollPerItem,
-    ScrollPerPixel,
-}
+The QAbstractItemView class is an abstract class and therefore, technically, no further instances actually have to be created.
+It is inherited by QListWidget. (n/a QColumnView, QHeaderView, QListView, QTableView, and QTreeView)
 
-export enum SelectionBehavior {
-    SelectItems,
-    SelectRows,
-    SelectColumns,
-}
-
-export enum SelectionMode {
-    NoSelection,
-    SingleSelection,
-    MultiSelection,
-    ExtendedSelection,
-    ContiguousSelection,
-}
-
-export interface QAbstractItemViewSignals extends QAbstractScrollAreaSignals {
-    viewportEntered: () => void;
-}
+*/
 
 export abstract class QAbstractItemView<Signals extends QAbstractItemViewSignals> extends QAbstractScrollArea<Signals> {
     setCurrentIndex(index: QModelIndex): void {
@@ -169,3 +139,44 @@ export abstract class QAbstractItemView<Signals extends QAbstractItemViewSignals
         this.native.resetVerticalScrollMode();
     }
 }
+
+export enum DragDropMode {
+    NoDragDrop,
+    DragOnly,
+    DropOnly,
+    DragDrop,
+    InternalMove,
+}
+
+export enum EditTrigger {
+    NoEditTriggers = 0,
+    CurrentChanged = 1,
+    DoubleClicked = 2,
+    SelectedClicked = 4,
+    EditKeyPressed = 8,
+    AnyKeyPressed = 16,
+    AllEditTriggers = 31,
+}
+
+export enum ScrollMode {
+    ScrollPerItem,
+    ScrollPerPixel,
+}
+
+export enum SelectionBehavior {
+    SelectItems,
+    SelectRows,
+    SelectColumns,
+}
+
+export enum SelectionMode {
+    NoSelection,
+    SingleSelection,
+    MultiSelection,
+    ExtendedSelection,
+    ContiguousSelection,
+}
+
+export interface QAbstractItemViewSignals extends QAbstractScrollAreaSignals {
+    viewportEntered: () => void;
+}

src/lib/QtWidgets/QAbstractScrollArea.ts

@@ -1,8 +1,6 @@
 import { NodeWidget, QWidget, QWidgetSignals } from './QWidget';
 import { ScrollBarPolicy } from '../QtEnums/ScrollBarPolicy';
 
-export type QAbstractScrollAreaSignals = QWidgetSignals;
-
 /**
  
 > Abstract class to add functionalities common to all scrollarea based widgets.
@@ -16,6 +14,7 @@ export type QAbstractScrollAreaSignals = QWidgetSignals;
 QAbstractScrollArea will list all methods and properties that are common to all scrollable widgets in the NodeGui world.
 
  */
+
 export abstract class QAbstractScrollArea<Signals extends QAbstractScrollAreaSignals> extends NodeWidget<Signals> {
     viewportWidget?: NodeWidget<any>;
     setViewport(widget: NodeWidget<any>): void {
@@ -35,3 +34,5 @@ export abstract class QAbstractScrollArea<Signals extends QAbstractScrollAreaSig
         this.native.setProperty('verticalScrollBarPolicy', policy);
     }
 }
+
+export type QAbstractScrollAreaSignals = QWidgetSignals;

src/lib/QtWidgets/QAbstractSlider.ts

@@ -1,15 +1,6 @@
 import { NodeWidget, QWidgetSignals } from './QWidget';
 import { Orientation } from '../QtEnums';
 
-export interface QAbstractSliderSignals extends QWidgetSignals {
-    actionTriggered: (action: number) => void;
-    rangeChanged: (min: number, max: number) => void;
-    sliderMoved: (value: number) => void;
-    sliderPressed: () => void;
-    sliderReleased: () => void;
-    valueChanged: (value: number) => void;
-}
-
 /**
  
 > Abstract class to add functionalities common to all slider based widgets.
@@ -23,6 +14,7 @@ export interface QAbstractSliderSignals extends QWidgetSignals {
 QAbstractSlider will list all methods and properties that are common to all slider widgets in the NodeGui world.
 
  */
+
 export abstract class QAbstractSlider<Signals extends QAbstractSliderSignals> extends NodeWidget<Signals> {
     setSingleStep(step: number): void {
         this.native.setSingleStep(step);
@@ -49,3 +41,12 @@ export abstract class QAbstractSlider<Signals extends QAbstractSliderSignals> ex
         this.native.setOrientation(orientation);
     }
 }
+
+export interface QAbstractSliderSignals extends QWidgetSignals {
+    actionTriggered: (action: number) => void;
+    rangeChanged: (min: number, max: number) => void;
+    sliderMoved: (value: number) => void;
+    sliderPressed: () => void;
+    sliderReleased: () => void;
+    valueChanged: (value: number) => void;
+}

src/lib/QtWidgets/QAbstractSpinBox.ts

@@ -1,20 +1,16 @@
 import { NodeWidget, QWidgetSignals } from './QWidget';
 import { AlignmentFlag } from '../QtEnums';
 
-export enum ButtonSymbols {
-    UpDownArrows,
-    PlusMinus,
-    NoButtons,
-}
+/**
+ 
+> This is the abstract base class of button widgets, providing their functionality.
 
-export enum CorrectionMode {
-    CorrectToPreviousValue,
-    CorrectToNearestValue,
-}
+* **This class is a JS wrapper around Qt's [QAbstractSpinBox class](https://doc.qt.io/qt-5/qabstractspinbox.html)**
 
-export interface QAbstractSpinBoxSignals extends QWidgetSignals {
-    editingFinished: () => void;
-}
+The QAbstractSpinBox class is an abstract class and therefore, technically, no further instances actually have to be created.
+It is inherited by QDateTimeEdit and QSpinBox. (n/a QDoubleSpinBox)
+
+ */
 
 export abstract class QAbstractSpinBox<Signals extends QAbstractSpinBoxSignals> extends NodeWidget<Signals> {
     selectAll(): void {
@@ -93,3 +89,18 @@ export abstract class QAbstractSpinBox<Signals extends QAbstractSpinBoxSignals>
         return this.property('wrapping').toBool();
     }
 }
+
+export enum ButtonSymbols {
+    UpDownArrows,
+    PlusMinus,
+    NoButtons,
+}
+
+export enum CorrectionMode {
+    CorrectToPreviousValue,
+    CorrectToNearestValue,
+}
+
+export interface QAbstractSpinBoxSignals extends QWidgetSignals {
+    editingFinished: () => void;
+}

src/lib/QtWidgets/QAction.ts

@@ -9,13 +9,6 @@ import { ShortcutContext } from '../QtEnums';
 import { NodeObject, QObjectSignals } from '../QtCore/QObject';
 import { checkIfNativeElement } from '../utils/helpers';
 
-export interface QActionSignals extends QObjectSignals {
-    triggered: (checked: boolean) => void;
-    changed: () => void;
-    hovered: () => void;
-    toggled: (checked: boolean) => void;
-}
-
 /**
  
 > The QAction class provides an abstract user interface action that can be inserted into widgets.
@@ -36,6 +29,7 @@ menuAction.addEventListener("triggered", () => {
 menu.addAction(menuAction);
 ```
  */
+
 export class QAction extends NodeObject<QActionSignals> {
     native: NativeElement;
     icon?: QIcon;
@@ -100,3 +94,10 @@ export class QAction extends NodeObject<QActionSignals> {
         return QFont.fromQVariant(this.property('font'));
     }
 }
+
+export interface QActionSignals extends QObjectSignals {
+    triggered: (checked: boolean) => void;
+    changed: () => void;
+    hovered: () => void;
+    toggled: (checked: boolean) => void;
+}

src/lib/QtWidgets/QBoxLayout.ts

@@ -4,7 +4,27 @@ import { NodeLayout, QLayoutSignals } from './QLayout';
 import { NativeElement } from '../core/Component';
 import { Direction } from '../QtEnums';
 
-export type QBoxLayoutSignals = QLayoutSignals;
+/**
+ 
+> Lines up child widgets horizontally or vertically.
+
+* **This class is a JS wrapper around Qt's [QBoxLayout class](https://doc.qt.io/qt-5/qboxlayout.html)**
+
+### Example
+
+```javascript
+// This example arranges two calendars horizontally.
+
+const { QBoxLayout, QCalendarWidget } = require("@nodegui/nodegui");
+
+const centralWidget = new QWidget();
+const boxLayout = new QBoxLayout(0);
+
+boxLayout.addWidget(new QCalendarWidget());
+boxLayout.addWidget(new QCalendarWidget());
+centralWidget.setLayout(boxLayout);
+```
+ */
 export class QBoxLayout extends NodeLayout<QBoxLayoutSignals> {
     native: NativeElement;
     childLayouts: Set<NodeLayout<any>>;
@@ -58,3 +78,5 @@ export class QBoxLayout extends NodeLayout<QBoxLayoutSignals> {
         this.native.setDirection(dir);
     }
 }
+
+export type QBoxLayoutSignals = QLayoutSignals;

src/lib/QtWidgets/QCalendarWidget.ts

@@ -4,29 +4,23 @@ import { NativeElement } from '../core/Component';
 import { QDate } from '../QtCore/QDate';
 import { DayOfWeek } from '../QtEnums';
 
-export enum HorizontalHeaderFormat {
-    NoHorizontalHeader,
-    SingleLetterDayNames,
-    ShortDayNames,
-    LongDayNames,
-}
+/**
+ 
+> Create and control a selectable monthly calendar.
 
-export enum VerticalHeaderFormat {
-    NoVerticalHeader,
-    ISOWeekNumbers,
-}
+* **This class is a JS wrapper around Qt's [QCalendarWidget class](https://doc.qt.io/qt-5/qcalendarwidget.html)**
 
-export enum SelectionMode {
-    NoSelection,
-    SingleSelection,
-}
+A `QCalendarWidget` provides a monthly based calendar widget allowing the user to select a date.
 
-export interface QCalendarWidgetSignals extends QWidgetSignals {
-    activated: (date: QDate) => void;
-    clicked: (date: QDate) => void;
-    currentPageChanged: (year: number, month: number) => void;
-    selectionChanged: () => void;
-}
+### Example
+
+```javascript
+const { QCalendarWidget } = require("@nodegui/nodegui");
+
+const calendarWidget = new QCalendarWidget();
+// more will follow when .selectedDate() et cetera are implemented
+```
+ */
 
 export class QCalendarWidget extends NodeWidget<QCalendarWidgetSignals> {
     native: NativeElement;
@@ -92,3 +86,27 @@ export class QCalendarWidget extends NodeWidget<QCalendarWidgetSignals> {
         return this.property('verticalHeaderFormat').toInt();
     }
 }
+
+export enum HorizontalHeaderFormat {
+    NoHorizontalHeader,
+    SingleLetterDayNames,
+    ShortDayNames,
+    LongDayNames,
+}
+
+export enum VerticalHeaderFormat {
+    NoVerticalHeader,
+    ISOWeekNumbers,
+}
+
+export enum SelectionMode {
+    NoSelection,
+    SingleSelection,
+}
+
+export interface QCalendarWidgetSignals extends QWidgetSignals {
+    activated: (date: QDate) => void;
+    clicked: (date: QDate) => void;
+    currentPageChanged: (year: number, month: number) => void;
+    selectionChanged: () => void;
+}

src/lib/QtWidgets/QCheckBox.ts

@@ -4,8 +4,6 @@ import { NativeElement, NativeRawPointer, Component } from '../core/Component';
 import { QAbstractButton, QAbstractButtonSignals } from './QAbstractButton';
 import { checkIfNativeElement, checkIfNapiExternal } from '../utils/helpers';
 
-export type QCheckBoxSignals = QAbstractButtonSignals;
-
 /**
  
 > Create and control checkbox.
@@ -23,6 +21,7 @@ const checkbox = new QCheckBox();
 checkbox.setText("Hello");
 ```
  */
+
 export class QCheckBox extends QAbstractButton<QCheckBoxSignals> {
     native: NativeElement;
     constructor();
@@ -53,3 +52,5 @@ export class QCheckBox extends QAbstractButton<QCheckBoxSignals> {
         return this.native.isChecked();
     }
 }
+
+export type QCheckBoxSignals = QAbstractButtonSignals;

src/lib/QtWidgets/QComboBox.ts

@@ -5,12 +5,35 @@ import { SizeAdjustPolicy } from '../QtEnums';
 import { QIcon } from '../QtGui/QIcon';
 import { QVariant } from '../QtCore/QVariant';
 
-export interface QComboBoxSignals extends QWidgetSignals {
-    //List all Signals below
-    currentIndexChanged: (index: number) => void;
-    currentTextChanged: (text: string) => void;
-    editTextChanged: (text: string) => void;
-}
+/**
+ 
+> Create and control a selectable drop down menu.
+
+* **This class is a JS wrapper around Qt's [QComboBox class](https://doc.qt.io/qt-5/qcombobox.html)**
+
+A `QComboBox` provides a means of presenting a list of options to the user.
+
+### Example
+
+```javascript
+const { QComboBox } = require("@nodegui/nodegui");
+
+const comboBox = new QComboBox();
+comboBox.addItem(undefined, 'comboBox item 0');
+comboBox.addItem(undefined, 'comboBox item 1');
+comboBox.addItem(undefined, 'comboBox item 2');
+comboBox.addItem(undefined, 'comboBox item 3');
+
+comboBox.addEventListener('currentTextChanged', (text) => {
+    console.log('currentTextChanged: ' + text);
+});
+
+comboBox.addEventListener('currentIndexChanged', (index) => {
+    console.log('currentIndexChanged: ' + index);
+});
+```
+ */
+
 export class QComboBox extends NodeWidget<QComboBoxSignals> {
     native: NativeElement;
     constructor();
@@ -102,3 +125,10 @@ export enum InsertPolicy {
     InsertBeforeCurrent,
     InsertAlphabetically,
 }
+
+export interface QComboBoxSignals extends QWidgetSignals {
+    //List all Signals below
+    currentIndexChanged: (index: number) => void;
+    currentTextChanged: (text: string) => void;
+    editTextChanged: (text: string) => void;
+}

src/lib/QtWidgets/QDateEdit.ts

@@ -3,6 +3,23 @@ import { NodeWidget } from './QWidget';
 import { NativeElement } from '../core/Component';
 import { QDateTimeEdit } from './QDateTimeEdit';
 
+/**
+ 
+> Creates a widget to edit dates with spin box layout. WIP!
+
+* **This class is a JS wrapper around Qt's [QDateEdit class](https://doc.qt.io/qt-5/qdateedit.html)**
+
+A `QDateEdit` provides a widget for editing dates based on the QDateTimeEdit widget.
+
+### Example
+
+```javascript
+const { QDateEdit } = require("@nodegui/nodegui");
+
+const comboBox = new QDateEdit();
+// must be implemented
+```
+ */
 export class QDateEdit extends QDateTimeEdit {
     native: NativeElement;
     constructor();

src/lib/QtWidgets/QDateTimeEdit.ts

@@ -8,11 +8,29 @@ import { QDateTime } from '../QtCore/QDateTime';
 import { QTime } from '../QtCore/QTime';
 import { TimeSpec } from '../QtEnums';
 
-export interface QDateTimeEditSignals extends QAbstractSpinBoxSignals {
-    dateChanged: (date: QDate) => void;
-    dateTimeChanged: (datetime: QDateTime) => void;
-    timeChanged: (time: QTime) => void;
-}
+/**
+ 
+> Creates and controls a widget for editing dates and times with spin box layout.
+
+* **This class is a JS wrapper around Qt's [QDateTimeEdit class](https://doc.qt.io/qt-5/qdatetimeedit.html)**
+
+### Example
+
+```javascript
+const { QDateTimeEdit, QDate, QTime } = require("@nodegui/nodegui");
+
+const dateTimeEdit = new QDateTimeEdit();
+
+let date = new QDate();
+date.setDate(2020, 1, 1);
+
+let time = new QTime();
+time.setHMS(16, 30, 0);
+
+dateTimeEdit.setDate(date);
+dateTimeEdit.setTime(time);
+```
+ */
 
 export class QDateTimeEdit extends QAbstractSpinBox<QDateTimeEditSignals> {
     native: NativeElement;
@@ -81,3 +99,9 @@ export class QDateTimeEdit extends QAbstractSpinBox<QDateTimeEditSignals> {
         return this.property('timeSpec').toInt();
     }
 }
+
+export interface QDateTimeEditSignals extends QAbstractSpinBoxSignals {
+    dateChanged: (date: QDate) => void;
+    dateTimeChanged: (datetime: QDateTime) => void;
+    timeChanged: (time: QTime) => void;
+}

src/lib/QtWidgets/QDial.ts

@@ -3,8 +3,6 @@ import { NodeWidget } from './QWidget';
 import { NativeElement } from '../core/Component';
 import { QAbstractSlider, QAbstractSliderSignals } from './QAbstractSlider';
 
-export type QDialSignals = QAbstractSliderSignals;
-
 /**
  
 > Create and control dial slider widgets.
@@ -21,6 +19,7 @@ const { QDial } = require("@nodegui/nodegui");
 const dial = new QDial();
 ```
  */
+
 export class QDial extends QAbstractSlider<QDialSignals> {
     native: NativeElement;
     constructor();
@@ -55,3 +54,5 @@ export class QDial extends QAbstractSlider<QDialSignals> {
         return this.native.notchTarget();
     }
 }
+
+export type QDialSignals = QAbstractSliderSignals;

src/lib/QtWidgets/QDialog.ts

@@ -3,6 +3,7 @@ import { NativeElement } from '../core/Component';
 
 import { checkIfNativeElement } from '../utils/helpers';
 import { NodeWidget, QWidgetSignals } from './QWidget';
+
 // All Dialogs should extend from NodeDialog
 // Implement all native QDialog methods here so that all dialogs get access to those aswell
 export abstract class NodeDialog<Signals extends QDialogSignals> extends NodeWidget<Signals> {
@@ -32,11 +33,14 @@ export abstract class NodeDialog<Signals extends QDialogSignals> extends NodeWid
     }
 }
 
-export interface QDialogSignals extends QWidgetSignals {
-    accepted: () => void;
-    finished: (result: number) => void;
-    rejected: () => void;
-}
+/**
+ 
+> This is the base class of dialog windows.
+
+* **This class is a JS wrapper around Qt's [QDialog class](https://doc.qt.io/qt-5/qdialog.html)**
+
+It is inherited by QFileDialog and QMessageBox (n/a QColorDialog, QErrorMessage, QFontDialog, QInputDialog, QMessageBox, QProgressDialog, and QWizard)
+ */
 
 export class QDialog extends NodeDialog<QDialogSignals> {
     native: NativeElement;
@@ -56,3 +60,9 @@ export class QDialog extends NodeDialog<QDialogSignals> {
         this.native = native;
     }
 }
+
+export interface QDialogSignals extends QWidgetSignals {
+    accepted: () => void;
+    finished: (result: number) => void;
+    rejected: () => void;
+}

src/lib/QtWidgets/QFileDialog.ts

@@ -4,18 +4,29 @@ import { NativeElement } from '../core/Component';
 import { AcceptMode, DialogLabel, FileMode, Option, ViewMode } from '../QtEnums';
 import { NodeDialog, QDialogSignals } from './QDialog';
 
-export interface QFileDialogSignals extends QDialogSignals {
-    currentChanged: (path: string) => void;
-    currentUrlChanged: (url: string) => void;
-    directoryEntered: (directory: string) => void;
-    directoryUrlEntered: (url: string) => void;
-    fileSelected: (file: string) => void;
-    filesSelected: (selected: string[]) => void;
-    filterSelected: (filter: string) => void;
-    urlSelected: (url: string) => void;
-    urlsSelected: (urls: string[]) => void;
-}
+/**
+ 
+> Create and control file dialogs.
 
+* **This class is a JS wrapper around Qt's [QFileDialog class](https://doc.qt.io/qt-5/qfiledialog.html)**
+
+A `QFileDialog` class provides a dialog that allow users to select files or directories.
+
+### Example
+
+```javascript
+const { QFileDialog } = require("@nodegui/nodegui");
+
+const fileDialog = new QFileDialog();
+fileDialog.setFileMode(FileMode.AnyFile);
+fileDialog.setNameFilter('Images (*.png *.xpm *.jpg)');
+fileDialog.exec();
+
+const selectedFiles = fileDialog.selectedFiles();
+console.log(selectedFiles);
+
+```
+ */
 export class QFileDialog extends NodeDialog<QFileDialogSignals> {
     native: NativeElement;
     constructor();
@@ -37,6 +48,12 @@ export class QFileDialog extends NodeDialog<QFileDialogSignals> {
     setSupportedSchemes(schemes: string[]): void {
         this.native.setSupportedSchemes(schemes);
     }
+    setNameFilter(filter: string): void {
+        this.native.setNameFilter(filter);
+    }
+    selectedFiles(): string[] {
+        return this.native.selectedFiles();
+    }
     labelText(label: DialogLabel): string {
         return this.native.labelText(label);
     }
@@ -74,3 +91,15 @@ export class QFileDialog extends NodeDialog<QFileDialogSignals> {
         this.setProperty('options', options);
     }
 }
+
+export interface QFileDialogSignals extends QDialogSignals {
+    currentChanged: (path: string) => void;
+    currentUrlChanged: (url: string) => void;
+    directoryEntered: (directory: string) => void;
+    directoryUrlEntered: (url: string) => void;
+    fileSelected: (file: string) => void;
+    filesSelected: (selected: string[]) => void;
+    filterSelected: (filter: string) => void;
+    urlSelected: (url: string) => void;
+    urlsSelected: (urls: string[]) => void;
+}

src/lib/QtWidgets/QGridLayout.ts

@@ -3,8 +3,6 @@ import { NodeWidget } from './QWidget';
 import { NodeLayout, QLayoutSignals } from './QLayout';
 import { NativeElement } from '../core/Component';
 
-export type QGridLayoutSignals = QLayoutSignals;
-
 /**
  
 > The QGridLayout class lays out widgets in a grid.
@@ -30,6 +28,7 @@ layout.addWidget(label2);
 ```
 
  */
+
 export class QGridLayout extends NodeLayout<QGridLayoutSignals> {
     native: NativeElement;
     constructor();
@@ -54,3 +53,5 @@ export class QGridLayout extends NodeLayout<QGridLayoutSignals> {
         this.nodeChildren.delete(widget);
     }
 }
+
+export type QGridLayoutSignals = QLayoutSignals;

src/lib/QtWidgets/QGroupBox.ts

@@ -3,10 +3,42 @@ import { NodeWidget, QWidgetSignals } from './QWidget';
 import { NativeElement } from '../core/Component';
 import { AlignmentFlag } from '../QtEnums/AlignmentFlag';
 
-export interface QGroupBoxSignals extends QWidgetSignals {
-    clicked: (checked: boolean) => void;
-    toggled: (on: boolean) => void;
-}
+/**
+ 
+> Create and control a group of checkboxes including a title.
+
+* **This class is a JS wrapper around Qt's [QGroupBox class](https://doc.qt.io/qt-5/qgroupbox.html)**
+
+A `QGroupBox` widget provides a group box frame with a title.
+
+### Example
+
+```javascript
+import { FlexLayout, QGroupBox, QRadioButton, QMainWindow } from '@nodegui/nodegui';
+
+const win = new QMainWindow();
+
+const r1 = new QRadioButton();
+r1.setText('R1');
+const r2 = new QRadioButton();
+r2.setText('R2');
+const r3 = new QRadioButton();
+r3.setText('R3');
+
+const groupBoxLayout = new FlexLayout();
+const groupBox = new QGroupBox();
+groupBox.setLayout(groupBoxLayout);
+groupBoxLayout.addWidget(r1);
+groupBoxLayout.addWidget(r2);
+groupBoxLayout.addWidget(r3);
+
+win.setCentralWidget(groupBox);
+win.resize(400, 400);
+
+win.show();
+(global as any).win = win;```
+ */
+
 export class QGroupBox extends NodeWidget<QGroupBoxSignals> {
     native: NativeElement;
     constructor();
@@ -53,3 +85,8 @@ export class QGroupBox extends NodeWidget<QGroupBoxSignals> {
         this.native.setChecked(checked);
     }
 }
+
+export interface QGroupBoxSignals extends QWidgetSignals {
+    clicked: (checked: boolean) => void;
+    toggled: (on: boolean) => void;
+}

src/lib/QtWidgets/QLabel.ts

@@ -6,7 +6,6 @@ import { QMovie } from '../QtGui/QMovie';
 import { AlignmentFlag } from '../QtEnums/AlignmentFlag';
 import { TextFormat } from '../QtEnums/TextFormat';
 
-export type QLabelSignals = QWidgetSignals;
 /**
  
 > Create and control text.
@@ -25,6 +24,7 @@ label.setText("Hello");
 ```
 
  */
+
 export class QLabel extends NodeWidget<QLabelSignals> {
     native: NativeElement;
     private _pixmap?: QPixmap;
@@ -102,3 +102,5 @@ export class QLabel extends NodeWidget<QLabelSignals> {
         this.native.clear();
     }
 }
+
+export type QLabelSignals = QWidgetSignals;

src/lib/QtWidgets/QLayout.ts

@@ -2,7 +2,6 @@ import { NodeWidget } from './QWidget';
 import { NodeObject, QObjectSignals } from '../QtCore/QObject';
 
 // All Layouts should extend this abstract class.
-export type QLayoutSignals = QObjectSignals;
 
 /**
  
@@ -33,6 +32,7 @@ addChildToLayout(new FlexLayout(), new QPushButton());
 addChildToLayout(new GridLayout(), new QWidget());
 ```
  */
+
 export abstract class NodeLayout<Signals extends QLayoutSignals> extends NodeObject<Signals> {
     type = 'layout';
     abstract addWidget(childWidget: NodeWidget<any>, ...args: any[]): void;
@@ -51,3 +51,5 @@ export abstract class NodeLayout<Signals extends QLayoutSignals> extends NodeObj
 // export class QLayout extends NodeLayout { //Dont need QLayout for now
 //   native: any;
 // }
+
+export type QLayoutSignals = QObjectSignals;

src/lib/QtWidgets/QLineEdit.ts

@@ -2,21 +2,6 @@ import addon from '../utils/addon';
 import { NodeWidget, QWidgetSignals } from './QWidget';
 import { NativeElement } from '../core/Component';
 
-export enum EchoMode {
-    Normal,
-    NoEcho,
-    Password,
-    PasswordEchoOnEdit,
-}
-export interface QLineEditSignals extends QWidgetSignals {
-    cursorPositionChanged: (oldPos: number, newPos: number) => void;
-    editingFinished: () => void;
-    inputRejected: () => void;
-    returnPressed: () => void;
-    selectionChanged: () => void;
-    textChanged: (text: string) => void;
-    textEdited: (text: string) => void;
-}
 /**
  
 > Create and control editable text field.
@@ -34,6 +19,7 @@ const lineEdit = new QLineEdit();
 ```
 
  */
+
 export class QLineEdit extends NodeWidget<QLineEditSignals> {
     native: NativeElement;
     constructor();
@@ -74,3 +60,19 @@ export class QLineEdit extends NodeWidget<QLineEditSignals> {
         this.native.setEchoMode(mode);
     }
 }
+
+export enum EchoMode {
+    Normal,
+    NoEcho,
+    Password,
+    PasswordEchoOnEdit,
+}
+export interface QLineEditSignals extends QWidgetSignals {
+    cursorPositionChanged: (oldPos: number, newPos: number) => void;
+    editingFinished: () => void;
+    inputRejected: () => void;
+    returnPressed: () => void;
+    selectionChanged: () => void;
+    textChanged: (text: string) => void;
+    textEdited: (text: string) => void;
+}

src/lib/QtWidgets/QListWidget.ts

@@ -7,37 +7,31 @@ import { QSize } from '../QtCore/QSize';
 import { QRect } from '../QtCore/QRect';
 import { SortOrder, ScrollHint, AlignmentFlag } from '../QtEnums';
 
-export enum Flow {
-    LeftToRight,
-    TopToBottom,
-}
+/**
+ 
+> Create and control a item-based list.
 
-export enum LayoutMode {
-    SinglePass,
-    Batched,
-}
+* **This class is a JS wrapper around Qt's [QListWidget class](https://doc.qt.io/qt-5/qlistwidget.html)**
 
-export enum Movement {
-    Static,
-    Free,
-    Snap,
-}
+### Example
 
-export enum ResizeMode {
-    Fixed,
-    Adjust,
-}
+```javascript
+const { QListWidget, QListWidgetItem } = require("@nodegui/nodegui");
 
-export enum ViewMode {
-    ListMode,
-    IconMode,
-}
+const listWidget = new QListWidget();
 
-export interface QListWidgetSignals extends QAbstractItemViewSignals {
-    currentRowChanged: (currentRow: number) => void;
-    currentTextChanged: (currentText: string) => void;
-    itemSelectionChanged: () => void;
+for (let i = 0; i < 30; i++) {
+  let listWidgetItem = new QListWidgetItem();
+  listWidgetItem.setText('listWidgetItem ' + i);
+  if (i===3) {
+    listWidgetItem.setCheckState(2);
+  } else {
+    listWidgetItem.setCheckState(0);
+  }
+  listWidget.addItem(listWidgetItem);
 }
+```
+ */
 
 export class QListWidget extends QAbstractItemView<QListWidgetSignals> {
     native: NativeElement;
@@ -231,3 +225,35 @@ export class QListWidget extends QAbstractItemView<QListWidgetSignals> {
         return this.property('wordWrap').toBool();
     }
 }
+
+export enum Flow {
+    LeftToRight,
+    TopToBottom,
+}
+
+export enum LayoutMode {
+    SinglePass,
+    Batched,
+}
+
+export enum Movement {
+    Static,
+    Free,
+    Snap,
+}
+
+export enum ResizeMode {
+    Fixed,
+    Adjust,
+}
+
+export enum ViewMode {
+    ListMode,
+    IconMode,
+}
+
+export interface QListWidgetSignals extends QAbstractItemViewSignals {
+    currentRowChanged: (currentRow: number) => void;
+    currentTextChanged: (currentText: string) => void;
+    itemSelectionChanged: () => void;
+}

src/lib/QtWidgets/QListWidgetItem.ts

@@ -7,7 +7,31 @@ import { checkIfNativeElement } from '../utils/helpers';
 import { CheckState } from '../QtEnums';
 import { ItemFlag } from '../QtEnums/ItemFlag';
 
-type arg = string | NativeElement;
+/**
+ 
+> Creates an item for QListWidget.
+
+* **This class is a JS wrapper around Qt's [QListWidgetItem class](https://doc.qt.io/qt-5/qlistwidgetitem.html)**
+
+### Example
+
+```javascript
+const { QListWidget, QListWidgetItem } = require("@nodegui/nodegui");
+
+const listWidget = new QListWidget();
+
+for (let i = 0; i < 30; i++) {
+  let listWidgetItem = new QListWidgetItem();
+  listWidgetItem.setText('listWidgetItem ' + i);
+  if (i===3) {
+    listWidgetItem.setCheckState(2);
+  } else {
+    listWidgetItem.setCheckState(0);
+  }
+  listWidget.addItem(listWidgetItem);
+}
+```
+ */
 export class QListWidgetItem extends Component {
     native: NativeElement;
     constructor(arg?: arg) {
@@ -92,3 +116,5 @@ export class QListWidgetItem extends Component {
         return this.native.whatsThis();
     }
 }
+
+type arg = string | NativeElement;

src/lib/QtWidgets/QMainWindow.ts

@@ -4,8 +4,6 @@ import { NativeElement } from '../core/Component';
 import { NodeLayout } from './QLayout';
 import { QMenuBar } from './QMenuBar';
 
-export type QMainWindowSignals = QWidgetSignals;
-
 /**
  
 > Create and control windows.
@@ -32,6 +30,7 @@ global.win = win; // prevent's gc of win
 QMainWindow needs to have a central widget set before other widgets can be added as a children/nested children.
 Once a central widget is set you can add children/layout to the central widget.
  */
+
 export class QMainWindow extends NodeWidget<QMainWindowSignals> {
     native: NativeElement;
     public centralWidget?: NodeWidget<any> | null;
@@ -92,3 +91,5 @@ export class QMainWindow extends NodeWidget<QMainWindowSignals> {
         this.native.center();
     }
 }
+
+export type QMainWindowSignals = QWidgetSignals;

src/lib/QtWidgets/QMenu.ts

@@ -3,8 +3,6 @@ import { NodeWidget, QWidgetSignals } from './QWidget';
 import addon from '../utils/addon';
 import { QAction } from './QAction';
 
-export type QMenuSignals = QWidgetSignals;
-
 /**
  
 > The QMenu class provides a menu widget for use in menu bars, context menus, and other popup menus.
@@ -19,6 +17,7 @@ const { QMenu } = require("@nodegui/nodegui");
 const menu = new QMenu();
 ```
  */
+
 export class QMenu extends NodeWidget<QMenuSignals> {
     native: NativeElement;
     actions: Set<QAction>;
@@ -45,3 +44,5 @@ export class QMenu extends NodeWidget<QMenuSignals> {
         return action;
     }
 }
+
+export type QMenuSignals = QWidgetSignals;

src/lib/QtWidgets/QMenuBar.ts

@@ -4,8 +4,6 @@ import { NodeWidget, QWidgetSignals } from './QWidget';
 import addon from '../utils/addon';
 import { checkIfNativeElement } from '../utils/helpers';
 
-export type QMenuBarSignals = QWidgetSignals;
-
 /**
  
 > The QMenuBar class provides a menu widget for use in menu bars, context menus, and other popup menus.
@@ -24,6 +22,7 @@ win.show();
 global.win = win;
 ```
  */
+
 export class QMenuBar extends NodeWidget<QMenuBarSignals> {
     native: NativeElement;
     constructor();
@@ -52,3 +51,5 @@ export class QMenuBar extends NodeWidget<QMenuBarSignals> {
         this.native.setNativeMenuBar(nativeMenuBar);
     }
 }
+
+export type QMenuBarSignals = QWidgetSignals;

src/lib/QtWidgets/QMessageBox.ts

@@ -5,39 +5,6 @@ import { NodeDialog, QDialogSignals } from './QDialog';
 import { QAbstractButton, QAbstractButtonSignals } from './QAbstractButton';
 import { QPushButton } from './QPushButton';
 
-export interface QMessageBoxSignals extends QDialogSignals {
-    buttonClicked: (buttonRawPointer: NativeRawPointer<'QAbstractButton*'>) => void;
-}
-
-export enum StandardButton {
-    Ok = 0x00000400,
-    Open = 0x00002000,
-    Save = 0x00000800,
-    Cancel = 0x00400000,
-    Close = 0x00200000,
-    Discard = 0x00800000,
-    Apply = 0x02000000,
-    Reset = 0x04000000,
-    RestoreDefaults = 0x08000000,
-    Help = 0x01000000,
-    SaveAll = 0x00001000,
-    Yes = 0x00004000,
-    YesToAll = 0x00008000,
-    No = 0x00010000,
-    NoToAll = 0x00020000,
-    Abort = 0x00040000,
-    Retry = 0x00080000,
-    Ignore = 0x00100000,
-    NoButton = 0x00000000,
-}
-export enum Icon {
-    NoIcon = 0,
-    Question = 4,
-    Information = 1,
-    Warning = 2,
-    Critical = 3,
-}
-
 export enum ButtonRole {
     InvalidRole,
     AcceptRole,
@@ -50,6 +17,28 @@ export enum ButtonRole {
     ApplyRole,
     ResetRole,
 }
+
+/**
+ 
+> Create and control classic modal dialogs.
+
+* **This class is a JS wrapper around Qt's [QMessageBox class](https://doc.qt.io/qt-5/qmessagebox.html)**
+
+### Example
+
+```javascript
+
+import { QMessageBox, ButtonRole, QPushButton } from '@nodegui/nodegui';
+
+const messageBox = new QMessageBox();
+messageBox.setText('Alert! This is a message');
+const accept = new QPushButton();
+accept.setText('Accept');
+messageBox.addButton(accept, ButtonRole.AcceptRole);
+messageBox.exec();
+
+```
+ */
 export class QMessageBox extends NodeDialog<QMessageBoxSignals> {
     native: NativeElement;
     constructor();
@@ -109,3 +98,36 @@ export class QMessageBox extends NodeDialog<QMessageBoxSignals> {
         addon.QMessageBox.aboutQt(parent.native, title);
     }
 }
+
+export interface QMessageBoxSignals extends QDialogSignals {
+    buttonClicked: (buttonRawPointer: NativeRawPointer<'QAbstractButton*'>) => void;
+}
+
+export enum StandardButton {
+    Ok = 0x00000400,
+    Open = 0x00002000,
+    Save = 0x00000800,
+    Cancel = 0x00400000,
+    Close = 0x00200000,
+    Discard = 0x00800000,
+    Apply = 0x02000000,
+    Reset = 0x04000000,
+    RestoreDefaults = 0x08000000,
+    Help = 0x01000000,
+    SaveAll = 0x00001000,
+    Yes = 0x00004000,
+    YesToAll = 0x00008000,
+    No = 0x00010000,
+    NoToAll = 0x00020000,
+    Abort = 0x00040000,
+    Retry = 0x00080000,
+    Ignore = 0x00100000,
+    NoButton = 0x00000000,
+}
+export enum Icon {
+    NoIcon = 0,
+    Question = 4,
+    Information = 1,
+    Warning = 2,
+    Critical = 3,
+}

src/lib/QtWidgets/QPainter.ts

@@ -4,15 +4,40 @@ import { PenStyle } from '../QtEnums';
 import { QColor } from '../QtGui/QColor';
 import { QPoint } from '../QtCore/QPoint';
 
-export enum RenderHint {
-    Antialiasing = 0x01,
-    TextAntialiasing = 0x02,
-    SmoothPixmapTransform = 0x04,
-    HighQualityAntialiasing = 0x08,
-    NonCosmeticDefaultPen = 0x10,
-    Qt4CompatiblePainting = 0x20,
-    LosslessImageRendering = 0x40,
-}
+/**
+ 
+> Lets you paint on widgets.
+
+* **This class is a JS wrapper around Qt's [QPainter class](https://doc.qt.io/qt-5/qpainter.html)**
+
+Note: QPainter works only inside the paint event.
+
+### Example
+
+```javascript
+
+import { FlexLayout, WidgetEventTypes, QMainWindow, QPainter, QWidget } from '@nodegui/nodegui';
+
+const win = new QMainWindow();
+const center = new QWidget();
+const layout = new FlexLayout();
+center.setLayout(layout);
+win.resize(200, 200);
+
+win.addEventListener(WidgetEventTypes.Paint, () => {
+    const painter = new QPainter(win);
+    painter.drawText(20, 20, 'Hello');
+    painter.end();
+});
+win.show();
+(global as any).win = win;
+
+```
+
+## Advanced example:
+
+https://github.com/nodegui/examples/blob/master/nodegui/custom-native-widget-qpainter
+*/
 
 export class QPainter extends Component {
     native: NativeElement;
@@ -86,3 +111,13 @@ export class QPainter extends Component {
         this.native.setBrush(color.native);
     }
 }
+
+export enum RenderHint {
+    Antialiasing = 0x01,
+    TextAntialiasing = 0x02,
+    SmoothPixmapTransform = 0x04,
+    HighQualityAntialiasing = 0x08,
+    NonCosmeticDefaultPen = 0x10,
+    Qt4CompatiblePainting = 0x20,
+    LosslessImageRendering = 0x40,
+}

src/lib/QtWidgets/QPlainTextEdit.ts

@@ -15,11 +15,6 @@ export interface QPlainTextEditSignals extends QAbstractScrollAreaSignals {
     undoAvailable: (available: boolean) => void;
 }
 
-export enum LineWrapMode {
-    NoWrap,
-    WidgetWidth,
-}
-
 /**
  
 > Used to edit and display plain text.
@@ -36,6 +31,7 @@ const { QPlainTextEdit } = require("@nodegui/nodegui");
 const plainTextEdit = new QPlainTextEdit();
 ```
  */
+
 export class QPlainTextEdit extends QAbstractScrollArea<QPlainTextEditSignals> {
     native: NativeElement;
     placeholderText?: string;
@@ -89,3 +85,8 @@ export class QPlainTextEdit extends QAbstractScrollArea<QPlainTextEditSignals> {
         this.native.insertPlainText(`${text}`);
     }
 }
+
+export enum LineWrapMode {
+    NoWrap,
+    WidgetWidth,
+}

src/lib/QtWidgets/QProgressBar.ts

@@ -3,9 +3,6 @@ import { NodeWidget, QWidgetSignals } from './QWidget';
 import { NativeElement } from '../core/Component';
 import { Orientation } from '../QtEnums';
 
-export interface QProgressBarSignals extends QWidgetSignals {
-    valueChanged: (value: number) => void;
-}
 /**
  
 > Create and control progress bar widgets.
@@ -22,6 +19,7 @@ const { QProgressBar } = require("@nodegui/nodegui");
 const progressBar = new QProgressBar();
 ```
  */
+
 export class QProgressBar extends NodeWidget<QProgressBarSignals> {
     native: NativeElement;
     constructor();
@@ -58,3 +56,7 @@ export class QProgressBar extends NodeWidget<QProgressBarSignals> {
         this.native.setOrientation(orientation);
     }
 }
+
+export interface QProgressBarSignals extends QWidgetSignals {
+    valueChanged: (value: number) => void;
+}

src/lib/QtWidgets/QPushButton.ts

@@ -4,7 +4,6 @@ import { NativeElement, NativeRawPointer, Component } from '../core/Component';
 import { QAbstractButton, QAbstractButtonSignals } from './QAbstractButton';
 import { checkIfNativeElement, checkIfNapiExternal } from '../utils/helpers';
 
-export type QPushButtonSignals = QAbstractButtonSignals;
 /**
  
 > Create and control buttons.
@@ -22,6 +21,7 @@ const button = new QPushButton();
 button.setText("Hello");
 ```
  */
+
 export class QPushButton extends QAbstractButton<QPushButtonSignals> {
     native: NativeElement;
     constructor();
@@ -50,3 +50,5 @@ export class QPushButton extends QAbstractButton<QPushButtonSignals> {
         this.native.setFlat(isFlat);
     }
 }
+
+export type QPushButtonSignals = QAbstractButtonSignals;

src/lib/QtWidgets/QRadioButton.ts

@@ -4,8 +4,6 @@ import { NativeElement, NativeRawPointer, Component } from '../core/Component';
 import { QAbstractButton, QAbstractButtonSignals } from './QAbstractButton';
 import { checkIfNativeElement, checkIfNapiExternal } from '../utils/helpers';
 
-export type QRadioButtonSignals = QAbstractButtonSignals;
-
 /**
  
 > Create and control radio button.
@@ -24,6 +22,7 @@ radioButton.setText("Hello");
 ```
 
  */
+
 export class QRadioButton extends QAbstractButton<QRadioButtonSignals> {
     native: NativeElement;
     constructor();
@@ -48,3 +47,5 @@ export class QRadioButton extends QAbstractButton<QRadioButtonSignals> {
         parent && this.setNodeParent(parent);
     }
 }
+
+export type QRadioButtonSignals = QAbstractButtonSignals;

src/lib/QtWidgets/QScrollArea.ts

@@ -3,8 +3,6 @@ import { NodeWidget } from './QWidget';
 import { NativeElement } from '../core/Component';
 import { QAbstractScrollArea, QAbstractScrollAreaSignals } from './QAbstractScrollArea';
 
-export type QScrollAreaSignals = QAbstractScrollAreaSignals;
-
 /**
  
 > A `QScrollArea` provides a scrolling view onto another widget.
@@ -28,6 +26,7 @@ imageLabel.setPixmap(pixmap);
 scrollArea.setWidget(imageLabel);
 ```
  */
+
 export class QScrollArea extends QAbstractScrollArea<QScrollAreaSignals> {
     native: NativeElement;
     contentWidget?: NodeWidget<any> | null;
@@ -71,3 +70,5 @@ export class QScrollArea extends QAbstractScrollArea<QScrollAreaSignals> {
         return this.native.widgetResizable();
     }
 }
+
+export type QScrollAreaSignals = QAbstractScrollAreaSignals;

src/lib/QtWidgets/QShortcut.ts

@@ -5,11 +5,6 @@ import { QKeySequence } from '../QtGui/QKeySequence';
 import { ShortcutContext } from '../QtEnums';
 import { NodeObject, QObjectSignals } from '../QtCore/QObject';
 
-export interface QShortcutSignals extends QObjectSignals {
-    activated: () => void;
-    activatedAmbiguously: () => void;
-}
-
 /**
  
 > The QShortcut class is used to create keyboard shortcuts.
@@ -34,6 +29,7 @@ global.win = win;
 global.shortcut = shortcut;
 ```
  */
+
 export class QShortcut extends NodeObject<QShortcutSignals> {
     native: NativeElement;
     constructor(parent: NodeWidget<any>) {
@@ -54,3 +50,8 @@ export class QShortcut extends NodeObject<QShortcutSignals> {
         this.native.setContext(shortcutContext);
     }
 }
+
+export interface QShortcutSignals extends QObjectSignals {
+    activated: () => void;
+    activatedAmbiguously: () => void;
+}

src/lib/QtWidgets/QSpinBox.ts

@@ -2,10 +2,6 @@ import addon from '../utils/addon';
 import { NodeWidget, QWidgetSignals } from './QWidget';
 import { NativeElement } from '../core/Component';
 
-export interface QSpinBoxSignals extends QWidgetSignals {
-    valueChanged: (value: number) => void;
-}
-
 /**
  
 > Create and control spin box widgets.
@@ -22,6 +18,7 @@ const { QSpinBox } = require("@nodegui/nodegui");
 const spinBox = new QSpinBox();
 ```
  */
+
 export class QSpinBox extends NodeWidget<QSpinBoxSignals> {
     native: NativeElement;
     constructor();
@@ -74,3 +71,7 @@ export class QSpinBox extends NodeWidget<QSpinBoxSignals> {
         return this.native.value();
     }
 }
+
+export interface QSpinBoxSignals extends QWidgetSignals {
+    valueChanged: (value: number) => void;
+}

src/lib/QtWidgets/QStackedWidget.ts

@@ -2,9 +2,47 @@ import addon from '../utils/addon';
 import { NodeWidget, QWidgetSignals } from './QWidget';
 import { NativeElement } from '../core/Component';
 
-export interface QStackedWidgetSignals extends QWidgetSignals {
-    currentChanged: (index: number) => void;
-}
+/**
+ 
+> Create and control stacked widgets where only one is visible at a time.
+
+* **This class is a JS wrapper around Qt's [QStackedWidget class](https://doc.qt.io/qt-5/qstackedwidget.html)**
+
+### Example
+
+```javascript
+
+const { QMainWindow, QLabel, QStackedWidget } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+const stacked = new QStackedWidget();
+
+const first = new QLabel();
+first.setText('First');
+
+const second = new QLabel();
+second.setText('Second');
+
+const third = new QLabel();
+third.setText('Third');
+
+stacked.addWidget(first);
+stacked.addWidget(second);
+stacked.addWidget(third);
+
+stacked.setCurrentWidget(second);
+//or
+// stacked.setCurrentIndex(1);
+
+win.setCentralWidget(stacked);
+win.resize(200, 200);
+
+win.show();
+(global as any).win = win;
+
+
+```
+ */
 
 export class QStackedWidget extends NodeWidget<QStackedWidgetSignals> {
     native: NativeElement;
@@ -45,3 +83,7 @@ export class QStackedWidget extends NodeWidget<QStackedWidgetSignals> {
         this.native.setCurrentWidget(widget.native);
     }
 }
+
+export interface QStackedWidgetSignals extends QWidgetSignals {
+    currentChanged: (index: number) => void;
+}

src/lib/QtWidgets/QSystemTrayIcon.ts

@@ -5,11 +5,6 @@ import { QIcon } from '../QtGui/QIcon';
 import { QMenu } from './QMenu';
 import { NodeObject, QObjectSignals } from '../QtCore/QObject';
 
-export interface QSystemTrayIconSignals extends QObjectSignals {
-    activated: (reason: QSystemTrayIconActivationReason) => void;
-    messageClicked: () => void;
-}
-
 /**
  
 > Create and control system tray icon.
@@ -32,6 +27,7 @@ tray.show();
 global.tray = tray; // prevents garbage collection of tray
 ```
  */
+
 export class QSystemTrayIcon extends NodeObject<QSystemTrayIconSignals> {
     native: NativeElement;
     contextMenu?: QMenu;
@@ -78,3 +74,8 @@ export enum QSystemTrayIconActivationReason {
     Trigger = 3,
     MiddleClick = 4,
 }
+
+export interface QSystemTrayIconSignals extends QObjectSignals {
+    activated: (reason: QSystemTrayIconActivationReason) => void;
+    messageClicked: () => void;
+}

src/lib/QtWidgets/QTabWidget.ts

@@ -4,12 +4,26 @@ import { NativeElement } from '../core/Component';
 import { QIcon } from '../QtGui/QIcon';
 import { TabPosition } from '../QtEnums';
 
-export interface QTabWidgetSignals extends QWidgetSignals {
-    currentChanged: (index: number) => void;
-    tabBarClicked: (index: number) => void;
-    tabBarDoubleClicked: (index: number) => void;
-    tabCloseRequested: (index: number) => void;
-}
+/**
+ 
+> Create and control a stack of tabbed widgets.
+
+* **This class is a JS wrapper around Qt's [QTabWidget class](https://doc.qt.io/qt-5/qtabwidget.html)**
+
+A 'QTabWidget' provides a tab bar and a "page area" that is used to display pages related to each tab. 
+
+### Example
+
+```javascript
+// This example creates two tabs, each holding a separate calendar.
+const { QTabWidget, QCalendarWidget, QIcon } = require("@nodegui/nodegui");
+
+const tabWidget = new QTabWidget();
+
+tabWidget.addTab(new QCalendarWidget(), new QIcon(), 'Tab 1');
+tabWidget.addTab(new QCalendarWidget(), new QIcon(), 'Tab 2');
+```
+ */
 
 export class QTabWidget extends NodeWidget<QTabWidgetSignals> {
     native: NativeElement;
@@ -58,3 +72,10 @@ export class QTabWidget extends NodeWidget<QTabWidgetSignals> {
         this.native.setTabsClosable(closeable);
     }
 }
+
+export interface QTabWidgetSignals extends QWidgetSignals {
+    currentChanged: (index: number) => void;
+    tabBarClicked: (index: number) => void;
+    tabBarDoubleClicked: (index: number) => void;
+    tabCloseRequested: (index: number) => void;
+}

src/lib/QtWidgets/QTableWidget.ts

@@ -5,20 +5,37 @@ import { ScrollHint, SortOrder } from '../QtEnums';
 import { QTableWidgetItem } from './QTableWidgetItem';
 import { QAbstractScrollArea, QAbstractScrollAreaSignals } from './QAbstractScrollArea';
 
-export interface QTableWidgetSignals extends QAbstractScrollAreaSignals {
-    cellActivated: (row: number, col: number) => void;
-    cellChanged: (row: number, col: number) => void;
-    cellClicked: (row: number, col: number) => void;
-    cellDoubleClicked: (row: number, col: number) => void;
-    cellEntered: (row: number, col: number) => void;
-    cellPressed: (row: number, col: number) => void;
-    currentCellChanged: (
-        currentRow: number,
-        currentColumn: number,
-        previousRow: number,
-        previousColumn: number,
-    ) => void;
-}
+/**
+ 
+> Creates and item-based table view.
+
+* **This class is a JS wrapper around Qt's [QTableWidget class](https://doc.qt.io/qt-5/qtablewidget.html)**
+
+### Example
+
+```javascript
+const { QTableWidget, QMainWindow, QTableWidgetItem } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+const table = new QTableWidget(2, 3);
+table.setHorizontalHeaderLabels(['first', 'second', 'third']);
+
+const cell00 = new QTableWidgetItem('C00');
+const cell01 = new QTableWidgetItem('C01');
+const cell10 = new QTableWidgetItem('C10');
+const cell11 = new QTableWidgetItem('C11');
+
+table.setItem(0, 0, cell00);
+table.setItem(0, 1, cell01);
+table.setItem(1, 0, cell10);
+table.setItem(1, 1, cell11);
+
+win.setCentralWidget(table);
+win.show();
+(global as any).win = win;
+
+```
+ */
 
 export class QTableWidget extends QAbstractScrollArea<QTableWidgetSignals> {
     native: NativeElement;
@@ -153,3 +170,18 @@ interface Range {
     columnCount: number;
     rowCount: number;
 }
+
+export interface QTableWidgetSignals extends QAbstractScrollAreaSignals {
+    cellActivated: (row: number, col: number) => void;
+    cellChanged: (row: number, col: number) => void;
+    cellClicked: (row: number, col: number) => void;
+    cellDoubleClicked: (row: number, col: number) => void;
+    cellEntered: (row: number, col: number) => void;
+    cellPressed: (row: number, col: number) => void;
+    currentCellChanged: (
+        currentRow: number,
+        currentColumn: number,
+        previousRow: number,
+        previousColumn: number,
+    ) => void;
+}

src/lib/QtWidgets/QTableWidgetItem.ts

@@ -2,6 +2,38 @@ import addon from '../utils/addon';
 import { NativeElement, Component } from '../core/Component';
 import { AlignmentFlag } from '../QtEnums';
 
+/**
+ 
+> Creates an item for QTableWidget.
+
+* **This class is a JS wrapper around Qt's [QTableWidgetItem class](https://doc.qt.io/qt-5/qtablewidgetitem.html)**
+
+### Example
+
+```javascript
+const { QTableWidget, QMainWindow, QTableWidgetItem } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+const table = new QTableWidget(2, 3);
+table.setHorizontalHeaderLabels(['first', 'second', 'third']);
+
+const cell00 = new QTableWidgetItem('C00');
+const cell01 = new QTableWidgetItem('C01');
+const cell10 = new QTableWidgetItem('C10');
+const cell11 = new QTableWidgetItem('C11');
+
+table.setItem(0, 0, cell00);
+table.setItem(0, 1, cell01);
+table.setItem(1, 0, cell10);
+table.setItem(1, 1, cell11);
+
+win.setCentralWidget(table);
+win.show();
+(global as any).win = win;
+
+```
+
+ */
 export class QTableWidgetItem extends Component {
     native: NativeElement;
     constructor();

src/lib/QtWidgets/QTimeEdit.ts

@@ -3,6 +3,23 @@ import { NodeWidget } from './QWidget';
 import { NativeElement } from '../core/Component';
 import { QDateTimeEdit } from './QDateTimeEdit';
 
+/**
+ 
+> Creates a widget to edit dates with spin box layout. WIP!
+
+* **This class is a JS wrapper around Qt's [QTimeEdit class](https://doc.qt.io/qt-5/qtimeedit.html)**
+
+A `QTimeEdit` a widget for editing times based on the QDateTimeEdit widget
+
+### Example
+
+```javascript
+const { QTimeEdit } = require("@nodegui/nodegui");
+
+const comboBox = new QTimeEdit();
+// must be implemented
+```
+ */
 export class QTimeEdit extends QDateTimeEdit {
     native: NativeElement;
     constructor();

src/lib/QtWidgets/QToolButton.ts

@@ -8,15 +8,23 @@ import { QAction } from '../QtWidgets/QAction';
 import { QMenu } from './QMenu';
 import { checkIfNativeElement, checkIfNapiExternal } from '../utils/helpers';
 
-export enum ToolButtonPopupMode {
-    DelayedPopup,
-    MenuButtonPopup,
-    InstantPopup,
-}
+/**
+ 
+> Create and control buttons to use inside a QToolBar.
 
-export interface QToolButtonSignals extends QAbstractButtonSignals {
-    triggered: (nativeAction: NativeElement) => void;
-}
+* **This class is a JS wrapper around Qt's [QToolButton class](https://doc.qt.io/qt-5/qtoolbutton.html)**
+
+A QToolButton is a special button that provides quick-access to specific commands or options.
+
+### Example
+
+```javascript
+const { QToolButton } = require("@nodegui/nodegui");
+
+const tool = new QToolButton();
+tool.setText('Help');
+```
+ */
 export class QToolButton extends QAbstractButton<QToolButtonSignals> {
     native: NativeElement;
     constructor();
@@ -73,3 +81,13 @@ export class QToolButton extends QAbstractButton<QToolButtonSignals> {
         this.native.showMenu();
     }
 }
+
+export enum ToolButtonPopupMode {
+    DelayedPopup,
+    MenuButtonPopup,
+    InstantPopup,
+}
+
+export interface QToolButtonSignals extends QAbstractButtonSignals {
+    triggered: (nativeAction: NativeElement) => void;
+}

src/lib/QtWidgets/QTreeWidget.ts

@@ -4,9 +4,44 @@ import { NativeElement } from '../core/Component';
 import { QAbstractScrollArea, QAbstractScrollAreaSignals } from './QAbstractScrollArea';
 import { QTreeWidgetItem } from './QTreeWidgetItem';
 
-export interface QTreeWidgetSignals extends QAbstractScrollAreaSignals {
-    itemSelectionChanged: () => void;
-}
+/**
+ 
+> Creates a tree view that uses a predefined tree model. 
+
+* **This class is a JS wrapper around Qt's [QTreeWidget class](https://doc.qt.io/qt-5/qtreewidget.html)**
+
+### Example
+
+```javascript
+const { QTreeWidget, QTreeWidgetItem } = require("@nodegui/nodegui");
+
+const { QMainWindow, QTreeWidgetItem, QTreeWidget } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+const tree = new QTreeWidget();
+
+const item1 = new QTreeWidgetItem();
+item1.setText(0, `item-1`);
+const item2 = new QTreeWidgetItem();
+item2.setText(0, `item-2`);
+const item3 = new QTreeWidgetItem();
+item3.setText(0, `item-3`);
+
+tree.addTopLevelItem(item1);
+tree.addTopLevelItem(item2);
+tree.addTopLevelItem(item3);
+
+// Add children to item1
+const c1item1 = new QTreeWidgetItem(item1);
+c1item1.setText(0, `c1item1`);
+const c1item2 = new QTreeWidgetItem(item1);
+c1item2.setText(0, `c1item1`);
+
+win.setCentralWidget(tree);
+win.show();
+(global as any).win = win;
+```
+ */
 
 export class QTreeWidget extends QAbstractScrollArea<QTreeWidgetSignals> {
     native: NativeElement;
@@ -30,7 +65,6 @@ export class QTreeWidget extends QAbstractScrollArea<QTreeWidgetSignals> {
         this.topLevelItems.add(item);
         this.native.addTopLevelItem(item.native);
     }
-
     setHeaderHidden(hide: boolean): void {
         this.native.setProperty('headerHidden', hide);
     }
@@ -42,3 +76,7 @@ export class QTreeWidget extends QAbstractScrollArea<QTreeWidgetSignals> {
         });
     }
 }
+
+export interface QTreeWidgetSignals extends QAbstractScrollAreaSignals {
+    itemSelectionChanged: () => void;
+}

src/lib/QtWidgets/QTreeWidgetItem.ts

@@ -3,6 +3,44 @@ import { Component, NativeElement } from '../core/Component';
 import { checkIfNativeElement } from '../utils/helpers';
 import { QTreeWidget } from './QTreeWidget';
 
+/**
+ 
+> Creates an item for QTreeWidget.
+
+* **This class is a JS wrapper around Qt's [QTreeWidgetItem class](https://doc.qt.io/qt-5/qtreewidgetitem.html)**
+
+### Example
+
+```javascript
+
+const { QMainWindow, QTreeWidgetItem, QTreeWidget } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+const tree = new QTreeWidget();
+
+const item1 = new QTreeWidgetItem();
+item1.setText(0, `item-1`);
+const item2 = new QTreeWidgetItem();
+item2.setText(0, `item-2`);
+const item3 = new QTreeWidgetItem();
+item3.setText(0, `item-3`);
+
+tree.addTopLevelItem(item1);
+tree.addTopLevelItem(item2);
+tree.addTopLevelItem(item3);
+
+// Add children to item1
+const c1item1 = new QTreeWidgetItem(item1);
+c1item1.setText(0, `c1item1`);
+const c1item2 = new QTreeWidgetItem(item1);
+c1item2.setText(0, `c1item1`);
+
+win.setCentralWidget(tree);
+win.show();
+(global as any).win = win;
+
+```
+ */
 export class QTreeWidgetItem extends Component {
     native: NativeElement;
     constructor();