Add tiny abstraction over elements where low-level control doesn't make sense

[Dzoukr]

As agreed on #20, for some chosen elements like tabs we should create tiny layer of abstraction to make work with it easier.

[MangelMaxime]

The element pagination-ellipsis is also a god candidate for this.

Here is how it is implemented in Fulma:

    /// Generate <li><button class="pagination-ellipsis">&hellip;</button></li>
    /// You control the `button` element
    let ellipsis (options: GenericOption list) =
        li [ ]
           [ GenericOptions
                .Parse(options, parseOptions, "pagination-ellipsis")
                .AddProp(DangerouslySetInnerHTML { __html = "&hellip;" })
                .ToReactElement(span) ]

[MangelMaxime]

When working on #21, I am also adding some tiny abstraction over some of the elements. Only tiny ones when reading the PR we will be to review if all of them make sense of not.

Right now, I am porting everything from Fulma as most of them has been asked by the community over time.

[MangelMaxime]

In Fulma, tabs abstraction is really simple:

    /// Generate <div class="tabs"><ul></ul></div>
    let tabs (options: Option list) children =
        let parseOptions (result : GenericOptions) option =
            match option with
            | IsCentered
            | IsRight
            | IsBoxed
            | IsToggle
            | IsToggleRounded
            | IsFullWidth -> result.AddCaseName option
            | Size size -> ofSize size |> result.AddClass
            | Props props -> result.AddProps props
            | CustomClass customClass -> result.AddClass customClass
            | Modifiers modifiers -> result.AddModifiers modifiers

        GenericOptions.Parse(options, parseOptions, "tabs").ToReactElement(div, [ ul [ ] children ])

    /// Generate <li></li>
    let tab (options: Tab.Option list) children =
        let parseOptions (result : GenericOptions) option =
            match option with
            | Tab.IsActive state -> if state then result.AddCaseName option else result
            | Tab.Props props -> result.AddProps props
            | Tab.CustomClass customClass -> result.AddClass customClass
            | Tab.Modifiers modifiers -> result.AddModifiers modifiers

        GenericOptions.Parse(options, parseOptions).ToReactElement(li, children)

The idea, is that whenever the user use Tabs.tabs we directly add the ul under the div because we know it is required.

[MangelMaxime]

The button element can also be a candidate:

    module Input =
        let internal btnInput typ options =
            let hasProps =
                options
                |> List.exists (fun opts ->
                    match opts with
                    | Props _ -> true
                    | _ -> false
                )

            if hasProps then
                let newOptions =
                    options
                    |> List.map (fun opts ->
                        match opts with
                        | Props props -> Props ((Type typ :> IHTMLProp) ::props)
                        | forward -> forward
                    )
                btnView (fun options _ -> input options) newOptions [ ]

            else
                btnView (fun options _ -> input options) ((Props [ Type typ ])::options) [ ]

        /// Generate <input type="reset" class="button" />
        let reset options = btnInput "reset" options
        /// Generate <input type="submit" class="button" />
        let submit options = btnInput "submit" options

The idea is it add the correct type directly, yep I am lazy sometimes ^^

[MangelMaxime]

In fact, you already added the button reset and submit specialization

[Dzoukr]

I think we can mark this one as done as well, can't we?

[MangelMaxime]

There is still the tabs/tab abstraction to make I think. I didn't check the source code beforing saying that so can be wrong

[Dzoukr]

Ok, I assume this one is now (thanks to Maxime) done