Safe Haskell	Safe-Inferred
Language	GHC2021

Web.Hyperbole.View

Synopsis

type Mod = Attributes -> Attributes
data View context a
data Align = Center
newtype HexColor = HexColor Text
class ToColor a where
- colorValue :: a -> HexColor
- colorName :: a -> Text
data Sides a
- = All a
- | TRBL a a a a
- | X a
- | Y a
- | XY a a
data Media
- = MinWidth Int
- | MaxWidth Int
data Ms
data PxRem
data Length
- = PxRem PxRem
- | Pct Float
data TransitionProperty
- = Width PxRem
- | Height PxRem
data Url = Url {
- scheme :: Text
- domain :: Text
- path :: [Segment]
- query :: Query
}
data TableColumn c dt
data TableHead a
text :: Text -> View c ()
space :: View c ()
link :: Url -> Mod -> View c () -> View c ()
even :: Mod -> Mod
truncate :: Mod
odd :: Mod -> Mod
value :: Text -> Mod
pad :: Sides Length -> Mod
style :: Text -> View c ()
layout :: Mod -> View c () -> View c ()
name :: Text -> Mod
hover :: Mod -> Mod
raw :: Text -> View c ()
row :: Mod -> View c () -> View c ()
col :: Mod -> View c () -> View c ()
table :: Mod -> [dt] -> Eff '[Writer [TableColumn c dt]] () -> View c ()
cssResetLink :: Text
width :: Length -> Mod
height :: Length -> Mod
minWidth :: Length -> Mod
minHeight :: Length -> Mod
gap :: Length -> Mod
fontSize :: Length -> Mod
flexRow :: Mod
flexCol :: Mod
shadow :: Mod
rounded :: Length -> Mod
bg :: ToColor c => c -> Mod
color :: ToColor c => c -> Mod
bold :: Mod
hide :: Mod
opacity :: Float -> Mod
border :: Sides PxRem -> Mod
borderColor :: ToColor c => c -> Mod
pointer :: Mod
transition :: Ms -> TransitionProperty -> Mod
textAlign :: Align -> Mod
active :: Mod -> Mod
media :: Media -> Mod -> Mod
parent :: Text -> Mod -> Mod
pathUrl :: [Segment] -> Url
cleanSegment :: Segment -> Segment
pathSegments :: Text -> [Segment]
url :: Text -> Url
renderUrl :: Url -> Text
context :: View context context
addContext :: context -> View context () -> View c ()
tag :: Text -> Mod -> View c () -> View c ()
att :: Name -> AttValue -> Mod
renderText :: View () () -> Text
renderLazyText :: View () () -> Text
renderLazyByteString :: View () () -> ByteString
el :: Mod -> View c () -> View c ()
el_ :: View c () -> View c ()
none :: View c ()
pre :: Mod -> Text -> View c ()
script :: Text -> View c ()
stylesheet :: Text -> View c ()
tcol :: forall dt c. View (TableHead c) () -> (dt -> View dt ()) -> Eff '[Writer [TableColumn c dt]] ()
th :: Mod -> View c () -> View (TableHead c) ()
td :: Mod -> View () () -> View dt ()
root :: Mod
grow :: Mod
collapse :: Mod
scroll :: Mod
nav :: Mod -> View c () -> View c ()

Documentation

type Mod = Attributes -> Attributes #

Element functions expect a Mod function as their first argument that adds attributes and classes.

userEmail :: User -> View c ()
userEmail user = input (fontSize 16 . active) (text user.email)
  where
    active = isActive user then bold else id

data View context a #

Views are HTML fragments that carry all CSS used by any child element.

view :: View c ()
view = col (pad 10 . gap 10) $ do
  el bold "Hello"
  el_ "World"

They can also have a context which can be used to create type-safe or context-aware elements. See table for an example

Instances

Instances details

Applicative (View context)
Instance details Defined in Web.View.View Methods pure :: a -> View context a # (<>) :: View context (a -> b) -> View context a -> View context b # liftA2 :: (a -> b -> c) -> View context a -> View context b -> View context c # (>) :: View context a -> View context b -> View context b # (<*) :: View context a -> View context b -> View context a #
Functor (View context)
Instance details Defined in Web.View.View Methods fmap :: (a -> b) -> View context a -> View context b # (<$) :: a -> View context b -> View context a #
Monad (View context)
Instance details Defined in Web.View.View Methods (>>=) :: View context a -> (a -> View context b) -> View context b # (>>) :: View context a -> View context b -> View context b # return :: a -> View context a #
IsString (View context ())
Instance details Defined in Web.View.View Methods fromString :: String -> View context () #

data Align #

Constructors

Center

Instances

Instances details

Show Align
Instance details Defined in Web.View.Types Methods showsPrec :: Int -> Align -> ShowS # show :: Align -> String # showList :: [Align] -> ShowS #
ToClassName Align
Instance details Defined in Web.View.Types Methods toClassName :: Align -> Text #
ToStyleValue Align
Instance details Defined in Web.View.Types Methods toStyleValue :: Align -> StyleValue #

newtype HexColor #

Hexidecimal Color. Can be specified with or without the leading #. Recommended to use an AppColor type instead of manually using hex colors. See ToColor

Constructors

HexColor Text

Instances

Instances details

IsString HexColor
Instance details Defined in Web.View.Types Methods fromString :: String -> HexColor #
ToColor HexColor
Instance details Defined in Web.View.Types Methods colorValue :: HexColor -> HexColor # colorName :: HexColor -> Text #
ToStyleValue HexColor
Instance details Defined in Web.View.Types Methods toStyleValue :: HexColor -> StyleValue #

class ToColor a where #

ToColor allows you to create a type containing your application's colors:

data AppColor
  = White
  | Primary
  | Dark

instance ToColor AppColor where
  colorValue White = "#FFF"
  colorValue Dark = "#333"
  colorValue Primary = "#00F"

hello :: View c ()
hello = el (bg Primary . color White) "Hello"

Minimal complete definition

colorValue

Methods

colorValue :: a -> HexColor #

colorName :: a -> Text #

Instances

Instances details

ToColor HexColor
Instance details Defined in Web.View.Types Methods colorValue :: HexColor -> HexColor # colorName :: HexColor -> Text #

data Sides a #

Options for styles that support specifying various sides. This has a "fake" Num instance to support literals

border 5
border (X 2)
border (TRBL 0 5 0 0)

Constructors

All a
TRBL a a a a
X a
Y a
XY a a

Instances

Instances details

Num a => Num (Sides a)
Instance details Defined in Web.View.Types Methods (+) :: Sides a -> Sides a -> Sides a # (-) :: Sides a -> Sides a -> Sides a # (*) :: Sides a -> Sides a -> Sides a # negate :: Sides a -> Sides a # abs :: Sides a -> Sides a # signum :: Sides a -> Sides a # fromInteger :: Integer -> Sides a #

data Media #

Media allows for responsive designs that change based on characteristics of the window. See Layout Example

Constructors

MinWidth Int
MaxWidth Int

Instances

Instances details

Eq Media
Instance details Defined in Web.View.Types Methods (==) :: Media -> Media -> Bool # (/=) :: Media -> Media -> Bool #
Ord Media
Instance details Defined in Web.View.Types Methods compare :: Media -> Media -> Ordering # (<) :: Media -> Media -> Bool # (<=) :: Media -> Media -> Bool # (>) :: Media -> Media -> Bool # (>=) :: Media -> Media -> Bool # max :: Media -> Media -> Media # min :: Media -> Media -> Media #

data Ms #

Milliseconds, used for transitions

Instances

Instances details

Num Ms
Instance details Defined in Web.View.Types Methods (+) :: Ms -> Ms -> Ms # (-) :: Ms -> Ms -> Ms # (*) :: Ms -> Ms -> Ms # negate :: Ms -> Ms # abs :: Ms -> Ms # signum :: Ms -> Ms # fromInteger :: Integer -> Ms #
Show Ms
Instance details Defined in Web.View.Types Methods showsPrec :: Int -> Ms -> ShowS # show :: Ms -> String # showList :: [Ms] -> ShowS #
ToClassName Ms
Instance details Defined in Web.View.Types Methods toClassName :: Ms -> Text #
ToStyleValue Ms
Instance details Defined in Web.View.Types Methods toStyleValue :: Ms -> StyleValue #

data PxRem #

Instances

Instances details

Enum PxRem
Instance details Defined in Web.View.Types Methods succ :: PxRem -> PxRem # pred :: PxRem -> PxRem # toEnum :: Int -> PxRem # fromEnum :: PxRem -> Int # enumFrom :: PxRem -> [PxRem] # enumFromThen :: PxRem -> PxRem -> [PxRem] # enumFromTo :: PxRem -> PxRem -> [PxRem] # enumFromThenTo :: PxRem -> PxRem -> PxRem -> [PxRem] #
Num PxRem
Instance details Defined in Web.View.Types Methods (+) :: PxRem -> PxRem -> PxRem # (-) :: PxRem -> PxRem -> PxRem # (*) :: PxRem -> PxRem -> PxRem # negate :: PxRem -> PxRem # abs :: PxRem -> PxRem # signum :: PxRem -> PxRem # fromInteger :: Integer -> PxRem #
Integral PxRem
Instance details Defined in Web.View.Types Methods quot :: PxRem -> PxRem -> PxRem # rem :: PxRem -> PxRem -> PxRem # div :: PxRem -> PxRem -> PxRem # mod :: PxRem -> PxRem -> PxRem # quotRem :: PxRem -> PxRem -> (PxRem, PxRem) # divMod :: PxRem -> PxRem -> (PxRem, PxRem) # toInteger :: PxRem -> Integer #
Real PxRem
Instance details Defined in Web.View.Types Methods toRational :: PxRem -> Rational #
Show PxRem
Instance details Defined in Web.View.Types Methods showsPrec :: Int -> PxRem -> ShowS # show :: PxRem -> String # showList :: [PxRem] -> ShowS #
Eq PxRem
Instance details Defined in Web.View.Types Methods (==) :: PxRem -> PxRem -> Bool # (/=) :: PxRem -> PxRem -> Bool #
Ord PxRem
Instance details Defined in Web.View.Types Methods compare :: PxRem -> PxRem -> Ordering # (<) :: PxRem -> PxRem -> Bool # (<=) :: PxRem -> PxRem -> Bool # (>) :: PxRem -> PxRem -> Bool # (>=) :: PxRem -> PxRem -> Bool # max :: PxRem -> PxRem -> PxRem # min :: PxRem -> PxRem -> PxRem #
ToClassName PxRem
Instance details Defined in Web.View.Types Methods toClassName :: PxRem -> Text #
ToStyleValue PxRem
Instance details Defined in Web.View.Types Methods toStyleValue :: PxRem -> StyleValue #

data Length #

Constructors

PxRem PxRem	Px, converted to Rem. Allows for the user to change the document font size and have the app scale accordingly. But allows the programmer to code in pixels to match a design
Pct Float

Instances

Instances details

Num Length
Instance details Defined in Web.View.Types Methods (+) :: Length -> Length -> Length # (-) :: Length -> Length -> Length # (*) :: Length -> Length -> Length # negate :: Length -> Length # abs :: Length -> Length # signum :: Length -> Length # fromInteger :: Integer -> Length #
Show Length
Instance details Defined in Web.View.Types Methods showsPrec :: Int -> Length -> ShowS # show :: Length -> String # showList :: [Length] -> ShowS #
ToClassName Length
Instance details Defined in Web.View.Types Methods toClassName :: Length -> Text #
ToStyleValue Length
Instance details Defined in Web.View.Types Methods toStyleValue :: Length -> StyleValue #

data TransitionProperty #

Constructors

Width PxRem
Height PxRem

Instances

Instances details

Show TransitionProperty
Instance details Defined in Web.View.Style Methods showsPrec :: Int -> TransitionProperty -> ShowS # show :: TransitionProperty -> String # showList :: [TransitionProperty] -> ShowS #

data Url #

Constructors

Url
Fields scheme :: Text domain :: Text path :: [Segment] query :: Query

Instances

Instances details

IsString Url
Instance details Defined in Web.View.Types.Url Methods fromString :: String -> Url #
Show Url
Instance details Defined in Web.View.Types.Url Methods showsPrec :: Int -> Url -> ShowS # show :: Url -> String # showList :: [Url] -> ShowS #
Eq Url
Instance details Defined in Web.View.Types.Url Methods (==) :: Url -> Url -> Bool # (/=) :: Url -> Url -> Bool #

data TableColumn c dt #

data TableHead a #

text :: Text -> View c () #

Add text to a view. Not required for string literals

el_ $ do
  "Hello: "
  text user.name

space :: View c () #

Space that fills the available space in the parent row or col.

row id $ do
 space
 el_ "Right"

This is equivalent to an empty element with grow

space = el grow none

link :: Url -> Mod -> View c () -> View c () #

A hyperlink to the given url

even :: Mod -> Mod #

Apply to even-numbered children

truncate :: Mod #

Cut off the contents of the element

odd :: Mod -> Mod #

Apply to odd-numbered children

value :: Text -> Mod #

pad :: Sides Length -> Mod #

Space surrounding the children of the element

To create even spacing around and between all elements:

col (pad 10 . gap 10) $ do
  el_ "one"
  el_ "two"
  el_ "three"

style :: Text -> View c () #

layout :: Mod -> View c () -> View c () #

We can intuitively create layouts with combindations of row, col, grow, and space

Wrap main content in layout to allow the view to consume vertical screen space

holygrail :: View c ()
holygrail = layout id $ do
  row section "Top Bar"
  row grow $ do
    col section "Left Sidebar"
    col (section . grow) "Main Content"
    col section "Right Sidebar"
  row section "Bottom Bar"
  where section = border 1

name :: Text -> Mod #

hover :: Mod -> Mod #

Apply when hovering over an element

el (bg Primary . hover (bg PrimaryLight)) "Hover"

raw :: Text -> View c () #

Embed static, unescaped HTML or SVG. Take care not to use raw with user-generated content.

spinner = raw "<svg>...</svg>"

row :: Mod -> View c () -> View c () #

Lay out children in a row

row id $ do
   el_ "Left"
   space
   el_ "Right"

col :: Mod -> View c () -> View c () #

Lay out children in a column.

col grow $ do
   el_ "Top"
   space
   el_ "Bottom"

table :: Mod -> [dt] -> Eff '[Writer [TableColumn c dt]] () -> View c () #

Create a type safe data table by specifying columns

usersTable :: [User] -> View c ()
usersTable us = do
  table id us $ do
    tcol (th hd "Name") $ \u -> td cell $ text u.name
    tcol (th hd "Email") $ \u -> td cell $ text u.email
 where
  hd = cell . bold
  cell = pad 4 . border 1

cssResetLink :: Text #

Alternatively, the reset is available on a CDN

import Data.String.Interpolate (i)

toDocument :: ByteString -> ByteString
toDocument cnt =
  [i|<html>
    <head>
      <link rel="stylesheet" href="#{cssResetLink}">
    </head>
    <body>#{cnt}</body>
  </html>|]

width :: Length -> Mod #

Set to a specific width

height :: Length -> Mod #

Set to a specific height

minWidth :: Length -> Mod #

Allow width to grow to contents but not shrink any smaller than value

minHeight :: Length -> Mod #

Allow height to grow to contents but not shrink any smaller than value

gap :: Length -> Mod #

The space between child elements. See pad

fontSize :: Length -> Mod #

flexRow :: Mod #

Set container to be a row. Favor row when possible

flexCol :: Mod #

Set container to be a column. Favor col when possible

shadow :: Mod #

Adds a basic drop shadow to an element

rounded :: Length -> Mod #

Round the corners of the element

bg :: ToColor c => c -> Mod #

Set the background color. See ToColor

color :: ToColor c => c -> Mod #

Set the text color. See ToColor

bold :: Mod #

hide :: Mod #

Hide an element. See parent and media

opacity :: Float -> Mod #

border :: Sides PxRem -> Mod #

Set a border around the element

el (border 1) "all sides"
el (border (X 1)) "only left and right"

borderColor :: ToColor c => c -> Mod #

Set a border color. See ToColor

pointer :: Mod #

Use a button-like cursor when hovering over the element

Button-like elements:

btn = pointer . bg Primary . hover (bg PrimaryLight)

options = row id $ do
  el btn "Login"
  el btn "Sign Up"

transition :: Ms -> TransitionProperty -> Mod #

Animate changes to the given property

el (transition 100 (Height 400)) "Tall"
el (transition 100 (Height 100)) "Small"

textAlign :: Align -> Mod #

active :: Mod -> Mod #

Apply when the mouse is pressed down on an element

media :: Media -> Mod -> Mod #

Apply when the Media matches the current window. This allows for responsive designs

el (width 100 . media (MinWidth 800) (width 400))
  "Big if window > 800"

parent :: Text -> Mod -> Mod #

Apply when the element is somewhere inside an anscestor.

For example, the HTMX library applies an "htmx-request" class to the body when a request is pending. We can use this to create a loading indicator

el (pad 10) $ do
  el (parent "htmx-request" flexRow . hide) "Loading..."
  el (parent "htmx-request" hide . flexRow) "Normal Content"

pathUrl :: [Segment] -> Url #

cleanSegment :: Segment -> Segment #

pathSegments :: Text -> [Segment] #

url :: Text -> Url #

renderUrl :: Url -> Text #

context :: View context context #

Get the current context

addContext :: context -> View context () -> View c () #

Run a view with a specific context in a parent View with a different context. This can be used to create type safe view functions, like table

tag :: Text -> Mod -> View c () -> View c () #

Create a new element constructor

aside :: Mod -> View c () -> View c ()
aside = tag "aside"

att :: Name -> AttValue -> Mod #

Set an attribute, replacing existing value

hlink :: Text -> View c () -> View c ()
hlink url content = tag "a" (att "href" url) content

renderText :: View () () -> Text #

Renders a View as HTML with embedded CSS class definitions

>>> renderText $ el bold "Hello"
<style type='text/css'>.bold { font-weight:bold }</style>
<div class='bold'>Hello</div>

renderLazyText :: View () () -> Text #

renderLazyByteString :: View () () -> ByteString #

el :: Mod -> View c () -> View c () #

A basic element

el (bold . pad 10) "Hello"

el_ :: View c () -> View c () #

A basic element, with no modifiers

el_ "Hello"

none :: View c () #

Do not show any content

if isVisible
 then content
 else none

pre :: Mod -> Text -> View c () #

script :: Text -> View c () #

stylesheet :: Text -> View c () #

tcol :: forall dt c. View (TableHead c) () -> (dt -> View dt ()) -> Eff '[Writer [TableColumn c dt]] () #

th :: Mod -> View c () -> View (TableHead c) () #

td :: Mod -> View () () -> View dt () #

root :: Mod #

As layout but as a Mod

holygrail = col root $ do
  ...

grow :: Mod #

Grow to fill the available space in the parent row or col

row id $ do
 el grow none
 el_ "Right"

collapse :: Mod #

Allow items to become smaller than their contents. This is not the opposite of grow!

scroll :: Mod #

Make a fixed layout by putting scroll on a child-element

document = row root $ do
  nav (width 300) "Sidebar"
  col (grow . scroll) "Main Content"

nav :: Mod -> View c () -> View c () #

A Nav element