View.hs

{- |
Module:      Web.View
Copyright:   (c) 2023 Sean Hess
License:     BSD3
Maintainer:  Sean Hess <seanhess@gmail.com>
Stability:   experimental
Portability: portable

Type-safe HTML and CSS with intuitive layout and composable styles. Inspired by Tailwindcss and Elm-UI
-}
module Web.View
  ( -- * How to use this library
    -- $use

    -- ** Rendering 'View's
    renderText
  , renderLazyText
  , renderLazyByteString

    -- ** Full HTML Documents
    -- $documents
  , module Web.View.Reset

    -- * Views
  , View

    -- ** Mods
  , Mod

    -- * Elements
  , el
  , el_

    -- ** Layout
  , layout
  , root
  , col
  , row
  , grow
  , space
  , collapse
  , scroll
  , nav

    -- ** Content
  , text
  , raw
  , none
  , pre

    -- ** Inputs
  , form
  , input
  , name
  , value
  , label
  , button

    -- ** Tables
  , table
  , tcol
  , th
  , td

    -- ** Document Metadata
  , script
  , style
  , stylesheet

    -- * CSS Modifiers
  , width
  , height
  , minWidth
  , minHeight
  , flexRow
  , flexCol
  , pad
  , gap
  , hide
  , shadow
  , rounded
  , fontSize
  , color
  , bg
  , bold
  , border
  , borderColor
  , pointer
  , transition
  , textAlign

    -- ** Selector States
  , hover
  , active
  , even
  , odd
  , media
  , parent

    -- * View Context
  , context
  , addContext

    -- * Creating New Elements and Modifiers
  , tag
  , att

    -- * Types
  , Sides (..)
  , Media (..)
  , PxRem
  , Url (..)
  , TransitionProperty (..)
  , Ms
  , ToColor (..)
  , HexColor (..)
  ) where

import Web.View.Element
import Web.View.Layout
import Web.View.Render
import Web.View.Reset
import Web.View.Style
import Web.View.Types
import Web.View.View
import Prelude hiding (even, head, odd)


{- $use

Create styled `View's using composable Haskell functions

> myView :: View c ()
> myView = col (gap 10) $ do
>  el (bold . fontSize 32) "My page"
>  button (border 1) "Click Me"

This represents an HTML fragment with embedded CSS definitions

> <style type='text/css'>
> .bold { font-weight:bold }
> .brd-1 { border:1px; border-style:solid }
> .col { display:flex; flex-direction:column }
> .fs-32 { font-size:2.0rem }
> .gap-10 { gap:0.625rem }
> </style>
>
> <div class='col gap-10'>
>   <div class='bold fs-32'>My page</div>
>   <button class='brd-1'>Click Me</button>
> </div>
-}


{- $documents

Create a full HTML document by embedding the view and 'cssResetEmbed'

> import Data.String.Interpolate (i)
> import Web.View
>
> toDocument :: Text -> Text
> toDocument content =
>   [i|<html>
>     <title>My Website</title>
>     <head><style type="text/css">#{cssResetEmbed}</style></head>
>     <body>#{content}</body>
>   </html>|]
>
> myDocument :: Text
> myDocument = toDocument $ renderText myView
-}