Added Documentation for each component

[Type-32]

Still needs review before merge to check every sample in the component pages is correct.
No more stuff needs to be added.

[Type-32]

Added a section with sample code that documents template usage.

[Noaaan]

Might be worth superseding #11 by adding the following into the templates section: https://github.com/wisp-forest/docs/pull/11/files#diff-72a989623bbc727392a2a48635053d40cc954f43eaab0c4429a8b9d615740cb2R7-R27

[Type-32]

New documentation page added with examples and usage, as well as syncing from master branch

[Noaaan]

Is this still a draft?

[Type-32]

I did merge your templates page changes into the commit, and I don't have much to write more on the components docs, so, no

[Noaaan]

Reviewed all the code-specific examples and tested them. Sorry for taking so long, it has been a busy year all-round.

The components have changed in the meantime, and do have small differences. I have gone ahead and provided some updated examples from testing them.

[Type-32]

epic work!

[Noaaan]

Can confirm that all code components are correct. Going to give the data-driven ones a try.

[Noaaan]

Overall very good! This batch of testing did uncover some more issues, but none of them are directly caused by the documentation.

[Noaaan]

An important note for this field is that if it is true, then the component will instantly disappear.
For this example I suggest setting the default to false, with a sidenote that the component will instantly close/disappear should the value be true

[Noaaan]

Elements in a grid require to specify column and row, like so:

 <children>
    <label column="0" row="0">
        <text>Cell 1</text>
    </label>
    <label column="0" row="1">
        <text>Cell 2</text>
    </label>
    <label column="1" row="0">
        <text>Cell 3</text>
    </label>
    <label column="1" row="1">
        <text>Cell 4</text>
    </label>
</children>

This is not present in the schema

[Noaaan]

It seems like a scroll container does work correctly when created from XML at the moment. This is not an issue with the code-driven approach.

[Noaaan]

After looking further into the schema, it seems the scroll tag simply accepts any component as its single child. It is defined as so:

    <xs:complexType name="owo-ui-scroll-container">
        <xs:complexContent>
            <xs:extension base="componentType">
                <xs:sequence>
                    <!-- Any component !-->
                    <xs:group ref="anyComponent"/>
                    <!-- -->
                    <xs:choice maxOccurs="unbounded">
                        <xs:group ref="parentComponentProps"/>
                        <xs:element type="xs:unsignedInt" name="scrollbar-thiccness" minOccurs="0"/>
                        <xs:element type="xs:unsignedInt" name="fixed-scrollbar-length" minOccurs="0"/>
                        <xs:element type="owo-ui-color" name="scrollbar-color" minOccurs="0"/>
                        <xs:element type="owo-ui-scrollbar" name="scrollbar" minOccurs="0"/>
                    </xs:choice>
                </xs:sequence>
                <xs:attribute name="direction" type="owo-ui-axis-direction" use="required"/>
            </xs:extension>
        </xs:complexContent>
    </xs:complexType>

As such, a working example looks something like this:

<scroll direction="vertical">
    <!-- Any component as child. We recommend a flow layout-->
    <flow-layout direction="vertical">
        <children>
            <label>
                <text>Item 1</text>
            </label>
            <label>
                <text>Item 2</text>
            </label>
            <label>
                <text>Item 3</text>
            </label>
        </children>
        <sizing>
            <vertical method="fill">20</vertical>
            <horizontal method="fill">25</horizontal>
        </sizing>
    </flow-layout>
    <scrollbar-thiccness>10</scrollbar-thiccness>
    <scrollbar-color>#ff0000</scrollbar-color>
    <padding>
        <all>10</all>
    </padding>
    <surface>
        <panel/>
    </surface>
    <sizing>
        <vertical method="fill">50</vertical>
        <horizontal method="fill">50</horizontal>
    </sizing>
</scroll>

[Noaaan]

The Slider component should always specify sizing, as by default it is "Content" on both the horizontal and vertical axis. This is a problem, since the slider does not allow content sizing on the horizontal axis.

Example:

      <slider>
              <text>Volume</text>
              <value>0.5</value>
              <active>true</active>
              <sizing>
                  <horizontal method="fill">20</horizontal>
                  <vertical method="fixed">10</vertical>
              </sizing>

I am not sure, but hopefully this could be enforced with the schema?