status-desktop/ui/StatusQ/README.md

# StatusQ

> An emerging reusable QML UI component library for Status applications.

## Usage

StatusQ introduces a module namespace that semantically groups components so they can be easily imported.
These modules are:

- [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
- [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
- [StatusQ.Core.Utils](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Utils/qmldir)
- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
- [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
- [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
- [StatusQ.Platform](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Platform/qmldir)
- [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)

Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
Other than that, modules and components can be used as expected.

Example:

```
import Status.Core 0.1
import Status.Controls 0.1

StatusInput {
  ...
}
```

## Viewing and testing components

To make viewing and testing components easy, we've added a sandbox application to this repository in which StatusQ components are being build. This is the first place where components see the light of the world and can be run in a proper application environment.

### Using Qt Creator

The easiest way to run the sandbox application is to simply open the provided `CMakeLists.txt` file using Qt Creator.

### Using command line interface

To run the sandbox from within a command line interface, run the following commands:

```
$ git clone https://github.com/status-im/StatusQ
$ cd StatusQ
$ git submodule update --init
$ ./scripts/build
```

Once that is done, the sandbox can be started with the generated executable:

```
$ ./build/sandbox/Sandbox
```
chore(README): add table of components 2021-06-29 09:55:41 +00:00			`# StatusQ`
chore: let the fun begin 2021-04-30 16:23:57 +00:00
chore(README): add table of components 2021-06-29 09:55:41 +00:00			`> An emerging reusable QML UI component library for Status applications.`
chore: add usage instructions to readme file 2021-05-05 07:52:58 +00:00
			`## Usage`

			`StatusQ introduces a module namespace that semantically groups components so they can be easily imported.`
			`These modules are:`

			`- [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)`
			`- [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)`
feat(StatusChatListAndCategories): add drag and drop support for cate… (#349) * feat(StatusChatListAndCategories): add drag and drop support for categories This adds support for dragging and dropping chat list categories. To persist reorder of chat categories, the new `onChatListCategoryReordered` signal can be leveraged. Drag and drop of categories is turned off by default and needs to be turned on using `draggableCategories: true`. Closes #227 * feat(Status.Core): introduce Utils namespace This adds a new package for utility related things. 2021-08-26 19:33:45 +00:00			`- [StatusQ.Core.Utils](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Utils/qmldir)`
feat(Core.Controls): introduce StatusIconTabButton component This adds the `StatusIconTabButton` componoent to `StatusQ` with some slight adjustments: - removes `iconColor` in favour of `icon.color` - removes `disabledColor` (main reason being that we don't show disabled buttons of this type) This button handles various cases: 1. Icon tab buttons - An icon button used in Status Desktop for different sections 2. Letter identicon button - Used for community sections that don't have a profile picture 3. Image icon button - Used for community sections that do have a profile picture Which type is rendered depends on the configuration of the component as shown in the usage. Usage: ``` import StatusQ.Controls 0.1 // When `icon.name` is set, it renders a `StatusIcon` button StatusIconTabButton { icon.name: "chat" } // When `icon.source` is set, it renders a `StatusRoundedImage` button StatusIconTabButton { icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" } // When `name` is set, it renders a `StatusLetterIdenticon` button StatusIconTabButton { name: "#status" } ``` Closes #16 2021-05-06 09:20:50 +00:00			`- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)`
fix(README): fix module name in readme docs 2021-05-07 10:58:06 +00:00			`- [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)`
chore(README): add StatusQ.Layout module to readme 2021-05-20 09:23:59 +00:00			`- [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)`
chore(README): add StatusQ.Platforms to readme Also adjust executable script for sandbox 2021-06-22 09:08:29 +00:00			`- [StatusQ.Platform](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Platform/qmldir)`
feat(StatusQ.Popups): introduce StatusPopupMenu component Usage: ```qml import StatusQ.Popups 0.1 Button { onClicked: simpleMenu.popup() } StatusPopupMenu { id: simpleMenu StatusMenuItem { text: "One" } StatusMenuItem { text: "Two" } StatusMenuItem { text: "Three" } } ``` Closes #96 #74 2021-06-02 10:41:31 +00:00			`- [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)`
chore: add usage instructions to readme file 2021-05-05 07:52:58 +00:00
			`Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.`
			`Other than that, modules and components can be used as expected.`

			`Example:`

			```
			`import Status.Core 0.1`
			`import Status.Controls 0.1`

			`StatusInput {`
			`...`
			`}`
			```

chore(README): re-add sandbox app instructions Those have been accidentally removed in previous commits. 2021-06-29 11:43:31 +00:00			`## Viewing and testing components`

			`To make viewing and testing components easy, we've added a sandbox application to this repository in which StatusQ components are being build. This is the first place where components see the light of the world and can be run in a proper application environment.`

			`### Using Qt Creator`

chore: update README and build script 2022-07-21 05:43:47 +00:00			The easiest way to run the sandbox application is to simply open the provided `CMakeLists.txt` file using Qt Creator.
chore(README): re-add sandbox app instructions Those have been accidentally removed in previous commits. 2021-06-29 11:43:31 +00:00
			`### Using command line interface`

			`To run the sandbox from within a command line interface, run the following commands:`

			```
			`$ git clone https://github.com/status-im/StatusQ`
chore: update README and build script 2022-07-21 05:43:47 +00:00			`$ cd StatusQ`
			`$ git submodule update --init`
fix(StatusQ/Sandbox): move and update build script 2023-02-20 15:49:09 +00:00			`$ ./scripts/build`
chore(README): re-add sandbox app instructions Those have been accidentally removed in previous commits. 2021-06-29 11:43:31 +00:00			```

			`Once that is done, the sandbox can be started with the generated executable:`

			```
chore: update README and build script 2022-07-21 05:43:47 +00:00			`$ ./build/sandbox/Sandbox`
chore(README): re-add sandbox app instructions Those have been accidentally removed in previous commits. 2021-06-29 11:43:31 +00:00			```