noredink-ui/styleguide-app/EllieLink.elm

module EllieLink exposing (Config, SectionExample, view)

import Dict exposing (Dict)
import Html.Styled exposing (..)
import Http
import Nri.Ui.ClickableText.V3 as ClickableText
import Url.Builder


type alias Config =
    { packageDependencies : Result Http.Error (Dict String String)
    }


type alias SectionExample =
    { name : String
    , fullModuleName : String
    , sectionName : String
    , mainType : String
    , extraImports : List String
    , code : String
    }


view : Config -> SectionExample -> Html msg
view config example =
    ClickableText.link ("View " ++ example.sectionName ++ " example on Ellie")
        [ ClickableText.linkExternal (generateEllieLink config example)
        , ClickableText.small
        ]


generateEllieLink : Config -> SectionExample -> String
generateEllieLink config example =
    let
        packageDependencies =
            config.packageDependencies
                |> Result.map Dict.toList
                |> Result.withDefault []
                |> List.map toPackageDependencyQueryString

        toPackageDependencyQueryString ( name, version ) =
            Url.Builder.string "packages" (name ++ "@" ++ version)
    in
    Url.Builder.crossOrigin "https://ellie-app.com/a/example/v1"
        []
        ([ Url.Builder.string "title" (example.name ++ " | " ++ example.sectionName)
         , Url.Builder.string "elmcode" (generateElmExampleModule config example)
         , Url.Builder.string "htmlcode" ellieHtmlSetup
         , Url.Builder.string "elmversion" "0.19.1"
         ]
            ++ packageDependencies
        )


generateElmExampleModule : Config -> SectionExample -> String
generateElmExampleModule config example =
    let
        maybeErrorMessages =
            case config.packageDependencies of
                Err httpError ->
                    [ "{- "
                    , "Something went wrong fetching the package dependencies!"
                    , "You will need to install the packages by hand for this code to compile."
                    , ""
                    , "Error: "
                    , Debug.toString httpError
                    , "-}"
                    ]

                Ok _ ->
                    []
    in
    [ "module Main exposing (main)"
    , ""
    , "import Css exposing (Style)"
    , "import Html as RootHtml"
    , "import Html.Styled exposing (..)"
    , "import Nri.Ui.Colors.V1 as Colors"
    , "import Nri.Ui.UiIcon.V1 as UiIcon"
    , "import Nri.Ui.Svg.V1 as Svg"
    , "import " ++ example.fullModuleName ++ " as " ++ example.name
    , String.join "\n" example.extraImports
    , ""
    , ""
    ]
        ++ maybeErrorMessages
        ++ [ "main : " ++ example.mainType
           , "main ="
           , "    " ++ example.code
           , "    |> toUnstyled"
           ]
        |> String.join "\n"
        |> String.replace "\t" "    "


ellieHtmlSetup : String
ellieHtmlSetup =
    """
    <html> <head></head>
    <body>
      <main></main>
      <script>
        var app = Elm.Main.init({ node: document.querySelector('main') })
      </script>
    </body>
    </html>
    """
Thread the ellie package dependencies through 2022-03-29 20:19:32 +03:00			`module EllieLink exposing (Config, SectionExample, view)`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00
Adds error handling 2022-03-29 19:33:00 +03:00			`import Dict exposing (Dict)`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`import Html.Styled exposing (..)`
Adds error handling 2022-03-29 19:33:00 +03:00			`import Http`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`import Nri.Ui.ClickableText.V3 as ClickableText`
			`import Url.Builder`


Adds error handling 2022-03-29 19:33:00 +03:00			`type alias Config =`
			`{ packageDependencies : Result Http.Error (Dict String String)`
			`}`


Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`type alias SectionExample =`
			`{ name : String`
Thread the ellie package dependencies through 2022-03-29 20:19:32 +03:00			`, fullModuleName : String`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`, sectionName : String`
Make a compilable code example for Accordion 2022-04-13 03:08:59 +03:00			`, mainType : String`
Adds extra import to fix compilation 2022-04-13 03:32:46 +03:00			`, extraImports : List String`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`, code : String`
			`}`


Adds error handling 2022-03-29 19:33:00 +03:00			`view : Config -> SectionExample -> Html msg`
			`view config example =`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`ClickableText.link ("View " ++ example.sectionName ++ " example on Ellie")`
Adds error handling 2022-03-29 19:33:00 +03:00			`[ ClickableText.linkExternal (generateEllieLink config example)`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`, ClickableText.small`
			`]`


Adds error handling 2022-03-29 19:33:00 +03:00			`generateEllieLink : Config -> SectionExample -> String`
			`generateEllieLink config example =`
			`let`
			`packageDependencies =`
			`config.packageDependencies`
			`\|> Result.map Dict.toList`
			`\|> Result.withDefault []`
			`\|> List.map toPackageDependencyQueryString`

			`toPackageDependencyQueryString ( name, version ) =`
			`Url.Builder.string "packages" (name ++ "@" ++ version)`
			`in`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`Url.Builder.crossOrigin "https://ellie-app.com/a/example/v1"`
			`[]`
Adds error handling 2022-03-29 19:33:00 +03:00			`([ Url.Builder.string "title" (example.name ++ " \| " ++ example.sectionName)`
			`, Url.Builder.string "elmcode" (generateElmExampleModule config example)`
			`, Url.Builder.string "htmlcode" ellieHtmlSetup`
			`, Url.Builder.string "elmversion" "0.19.1"`
			`]`
			`++ packageDependencies`
			`)`

Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00
Adds error handling 2022-03-29 19:33:00 +03:00			`generateElmExampleModule : Config -> SectionExample -> String`
			`generateElmExampleModule config example =`
			`let`
			`maybeErrorMessages =`
			`case config.packageDependencies of`
			`Err httpError ->`
			`[ "{- "`
			`, "Something went wrong fetching the package dependencies!"`
			`, "You will need to install the packages by hand for this code to compile."`
			`, ""`
Update styleguide-app/EllieLink.elm Co-authored-by: Brian Hicks <brian@brianthicks.com> 2022-03-29 21:43:56 +03:00			`, "Error: "`
Adds error handling 2022-03-29 19:33:00 +03:00			`, Debug.toString httpError`
			`, "-}"`
			`]`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00
Adds error handling 2022-03-29 19:33:00 +03:00			`Ok _ ->`
			`[]`
			`in`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`[ "module Main exposing (main)"`
			`, ""`
			`, "import Css exposing (Style)"`
			`, "import Html as RootHtml"`
			`, "import Html.Styled exposing (..)"`
			`, "import Nri.Ui.Colors.V1 as Colors"`
			`, "import Nri.Ui.UiIcon.V1 as UiIcon"`
Make a compilable code example for Accordion 2022-04-13 03:08:59 +03:00			`, "import Nri.Ui.Svg.V1 as Svg"`
Thread the ellie package dependencies through 2022-03-29 20:19:32 +03:00			`, "import " ++ example.fullModuleName ++ " as " ++ example.name`
Adds extra import to fix compilation 2022-04-13 03:32:46 +03:00			`, String.join "\n" example.extraImports`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`, ""`
Adds error handling 2022-03-29 19:33:00 +03:00			`, ""`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`]`
Adds error handling 2022-03-29 19:33:00 +03:00			`++ maybeErrorMessages`
Make a compilable code example for Accordion 2022-04-13 03:08:59 +03:00			`++ [ "main : " ++ example.mainType`
Adds error handling 2022-03-29 19:33:00 +03:00			`, "main ="`
			`, " " ++ example.code`
			`, " \|> toUnstyled"`
			`]`
Pull the Ellie code into its own module 2022-03-29 18:52:58 +03:00			`\|> String.join "\n"`
			`\|> String.replace "\t" " "`


			`ellieHtmlSetup : String`
			`ellieHtmlSetup =`
			`"""`
			`<html> <head></head>`
			`<body>`
			`<main></main>`
			`<script>`
			`var app = Elm.Main.init({ node: document.querySelector('main') })`
			`</script>`
			`</body>`
			`</html>`
			`"""`