tmonte / fabulosa Goto Github PK

Make it work like Page Nav

• Inline Forms
• Form Sizes
• Input Groups
• Validation States

Missing tests:

• Grid
• Table
• Navbar
• Responsive

https://picturepan2.github.io/spectre/components.html#nav

http://fsprojects.github.io/FSharp.Formatting/

With props and html props

1) Record with options

Button.button {
    props = Some [Button.Size Button.Small]
    htmlProps = Some [OnClick (fun e -> e |> console.log)]
    children = None
}

• Implementation: easy
• CC: 140
• Default CC (no props, no html props, no children): 75
• Parameter clarity: high

2) Record with defaults

Button.button { Button.default with
    props = [Button.Size Button.Small]
    htmlProps = [OnClick (fun e -> e |> console.log)]
}

• Implementation: easy
• CC: 130
• Default CC (no props, no html props, no children): 28
• Parameter clarity: high

3) Record with default passed to render

{ Button.button with
    props = [Button.Size Button.Small];
    htmlProps = [OnClick (fun e -> e |> console.log)] }
    |> Button.render

• Implementation: easy
• CC: 137
• Default CC (no props, no html props, no children): 30
• Parameter clarity: high

4) Transforms for button props, keeping react signature

Button.button [OnClick (fun e -> e |> console.log)]
    |> transform
    Button.propToClass
    [Button.Size Button.Small]

• Implementation: medium
• CC: 122
• Default CC (no props, no html props, no children): 16
• Parameter clarity: low

5) Button with props, htmlProps and children as lists and default version

Button.create
    [Button.Kind Button.Default]
    [OnClick (fun e -> e |> console.log)]

Button.button "text"

• Implementation: very easy
• CC: 88
• Default CC (no props, no html props, no children): 13
• Parameter clarity: low

Specifying Props

6) Record with props including html props needed

{ Button.button with
    size = Button.Small;
    onClick = (fun e -> e |> console.log) }
    |> Button.render

• Implementation: medium-hard
• CC: 110
• Default CC (no props, no html props, no children): 30
• Parameter clarity: very high

7) Record with props without default and including html props needed

Button.button { Button.default with
    size = Button.Small;
    onClick = (fun e -> e |> console.log) }

• Implementation: medium-hard
• CC: 104
• Default CC (no props, no html props, no children): 28
• Parameter clarity: very high

Chosen implementation:

Mix of 2 and 6

Button.button {
    Button.defaults with
        Kind = Button.Default
        HTMLProps = [OnClick (fun e -> e |> console.log)] } []

Add Code Highlighter to Code examples

Bars

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 , and input range elements.

Add a container element with the bar class. And add child elements with the bar-item class. The width percentage value is needed for every bar-item.

There is the bar-sm class for thinner Bars. Also, you could use Tooltips for any bar-item.

<!-- normal bars -->
<div class="bar bar-sm">
  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- multi-bars -->
<div class="bar">
  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
</div>

Slider bars

You can add the bar-slider class to the Bars container. And add child elements with the bar-item class and bar-slider-btn inside bar-item. You need to set the bar-item width manually to have the slider point.

If there are two bar-item divs in one bar-slider, you will have a range slider.

<!-- normal slider -->
<div class="bar bar-slider">
  <div class="bar-item" role="progressbar" style="width:25%;">
    <button class="bar-slider-btn btn" role="slider"></button>
  </div>
</div>

<!-- range slider -->
<div class="bar bar-slider">
  <div class="bar-item" role="progressbar" style="width:15%;">
    <button class="bar-slider-btn btn" role="slider"></button>
  </div>
  <div class="bar-item" role="progressbar" style="width:65%;">
    <button class="bar-slider-btn btn" role="slider"></button>
  </div>
</div>

https://github.com/haf/expecto

https://picturepan2.github.io/spectre/layout.html#navbar

Create a fabuloso logo

https://docs.travis-ci.com/user/deployment/pages/#setting-the-github-token

Refactor components to use

• Typed children
• Props & Children as tuples
• Sub modules

• Bar (needs push)
• Card (needs push)
• Chip
• Empty
• Menu
• Nav
• Table
• Tag
• Breadcrumb
• Code
• Media
• Badge (change props to children)

• Icon
• Navbar
• Responsive
• Table