unisonweb · yoching · Mar 26, 2024 · Mar 26, 2024
diff --git a/storybook/static/long.json b/storybook/static/long.json
@@ -0,0 +1,81 @@
+{
+  "missingDefinitions": [],
+  "termDefinitions": {
+    "#3tgadjo2kff3r8b0sfitdumiak0aoqkpkj87ueh41fudv2d079ek89bq7qog7dij99f7aqhug1271j5h5vuuf6ohk2u2m6eg374g6ag": {
+      "bestTermName": "assets.indexHtml",
+      "defnTermTag": "Plain",
+      "signature": [
+        {
+          "annotation": {
+            "contents": "##Text",
+            "tag": "TypeReference"
+          },
+          "segment": "Text"
+        }
+      ],
+      "termDefinition": {
+        "contents": [
+          {
+            "annotation": {
+              "contents": "assets.indexHtml",
+              "tag": "HashQualifier"
+            },
+            "segment": "assets.indexHtml"
+          },
+          {
+            "annotation": {
+              "tag": "TypeAscriptionColon"
+            },
+            "segment": " :"
+          },
+          {
+            "annotation": null,
+            "segment": " "
+          },
+          {
+            "annotation": {
+              "contents": "##Text",
+              "tag": "TypeReference"
+            },
+            "segment": "Text"
+          },
+          {
+            "annotation": null,
+            "segment": "\n"
+          },
+          {
+            "annotation": {
+              "contents": "assets.indexHtml",
+              "tag": "HashQualifier"
+            },
+            "segment": "assets.indexHtml"
+          },
+          {
+            "annotation": {
+              "tag": "BindingEquals"
+            },
+            "segment": " ="
+          },
+          {
+            "annotation": null,
+            "segment": "\n"
+          },
+          {
+            "annotation": null,
+            "segment": "  "
+          },
+          {
+            "annotation": {
+              "tag": "TextLiteral"
+            },
+            "segment": "\"<!DOCTYPE html>\\n  <html lang=\\\"en\\\">\\n  <head>\\n      <meta charset=\\\"UTF-8\\\">\\n      <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n      <title>Unison Doodles</title>\\n      <link rel=\\\"stylesheet\\\" href=\\\"styles.css\\\">\\n  </head>\\n  <body>\\n    <div class=\\\"container\\\">\\n      <div class =\\\"row bg-primary text-white text-center py-5\\\">\\n        <h1 class=\\\"display-1\\\">🎨</h1>\\n        <h1 class=\\\"display-4 fw-bold\\\">Unison Doodles</h1>\\n        <p class=\\\"lead\\\">This test app was written with the Unison Cloud</p>\\n      </div>\\n\\n      <div class=\\\"row\\\">\\n        <div class=\\\"col pt-5\\\">\\n          <h2>🧑\\8205🎨 Draw something</h2>\\n        </div>\\n      </div>\\n\\n      <div class=\\\"row row-cols-2 g-1\\\">\\n\\n        <div class=\\\"col col-sm pt-2\\\">\\n          <canvas id =\\\"doodle-canvas-primary\\\" class=\\\"workspace doodle-canvas\\\"></canvas>\\n          <div id=\\\"canvas-palette\\\" class=\\\"palette\\\">\\n            <div class=\\\"inkwell p-2\\\" data-color=\\\"black\\\"></div>\\n            <div class=\\\"inkwell p-2\\\" data-color=\\\"red\\\"></div>\\n            <div class=\\\"inkwell p-2\\\" data-color=\\\"orange\\\"></div>\\n            <div class=\\\"inkwell p-2\\\" data-color=\\\"yellow\\\"></div>\\n            <div class=\\\"inkwell p-2\\\" data-color=\\\"green\\\"></div>\\n            <div class=\\\"inkwell p-2\\\" data-color=\\\"blue\\\"></div>\\n            <div class=\\\"inkwell p-2\\\" data-color=\\\"purple\\\"></div>\\n          </div>\\n        </div>\\n\\n        <div class=\\\"col col-sm px-3\\\">\\n          <form id=\\\"doodle-form\\\" onsubmit=\\\"return false\\\">\\n            <div class=\\\"form-group pb-3\\\">\\n              <label for =\\\"title\\\">Title</label>\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"title\\\" name=\\\"title\\\" placeholder=\\\"Enter title\\\">\\n              <small id=\\\"titleHelp\\\" class=\\\"form-text text-muted\\\">Give your drawing a title</small>\\n            </div>\\n            <div class=\\\"form-group pb-3\\\">\\n              <label for=\\\"author\\\">Author</label>\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"author\\\" name=\\\"author\\\" placeholder=\\\"Enter name\\\">\\n              <small id=\\\"authorHelp\\\" class=\\\"form-text text-muted\\\">Who made this work of art?</small>\\n              <div class=\\\"button-group py-3\\\">\\n                <button id=\\\"save-doodle\\\" type=\\\"submit\\\" class=\\\"btn btn-info\\\">Save</button>\\n                <button id=\\\"clear-doodle\\\" type=\\\"reset\\\" class=\\\"btn btn-warning\\\">Clear</button>\\n              </div>\\n            </div>\\n          </form>\\n        </div>\\n\\n      </div>\\n\\n    <div class=\\\"container pt-5\\\">\\n      <div id=\\\"doodle-log-holder\\\" class=\\\"row row-cols-1\\\">\\n            <h2>🖼 Gallery</h2>\\n            <h3>Everyone's work is here for now!</h3>\\n            <div class=\\\"album py-5 px-5 bg-light\\\">\\n              <div id=\\\"doodle-log\\\" class=\\\"row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3\\\"></div>\\n            </div>\\n      </div>\\n    </div>\\n    <script src=\\\"./script.js\\\"></script>\\n    <link href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\\\" crossorigin=\\\"anonymous\\\">\\n    </div>\\n  </body>\\n</html>\""
+          }
+        ],
+        "tag": "UserObject"
+      },
+      "termDocs": [],
+      "termNames": ["assets.indexHtml"]
+    }
+  },
+  "typeDefinitions": {}
+}
diff --git a/storybook/stories/Stories/Code/PageContent.elm b/storybook/stories/Stories/Code/PageContent.elm
@@ -0,0 +1,129 @@
+module Stories.Code.PageContent exposing (..)
+
+import Browser
+import Code.Config exposing (Config)
+import Code.Definition.Reference as Reference
+import Code.FullyQualifiedName as FQN
+import Code.HashQualified exposing (HashQualified(..))
+import Code.Perspective as Perspective
+import Code.Syntax exposing (..)
+import Code.Workspace as Workspace
+import Code.Workspace.WorkspaceItem exposing (Item, WorkspaceItem(..), decodeItem, fromItem)
+import Code.Workspace.WorkspaceItems as WorkspaceItems
+import Html exposing (Html)
+import Http
+import Lib.HttpApi as HttpApi exposing (ApiUrl(..), Endpoint(..))
+import Lib.OperatingSystem as OperatingSystem
+import UI.KeyboardShortcut as KeyboardShortcut exposing (KeyboardShortcut(..))
+import UI.PageContent as PageContent
+import UI.ViewMode
+
+
+type alias Model =
+    Workspace.Model
+
+
+type Msg
+    = WorkspaceMsg Workspace.Msg
+    | GotItem Int Reference.Reference (Result Http.Error Item)
+
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = \_ -> Sub.none
+        }
+
+
+init : () -> ( Model, Cmd Msg )
+init _ =
+    ( { workspaceItems = WorkspaceItems.empty
+      , keyboardShortcut = KeyboardShortcut.init OperatingSystem.MacOS
+      , workspaceItemViewState = Code.Workspace.WorkspaceItem.viewState
+      , isMinimapToggled = False
+      }
+    , Cmd.batch
+        [ 
+        getSampleResponse 0 "/long.json" "assets.indexHtml"
+        , getSampleResponse 1 "/increment_term_def.json" "increment"
+        , getSampleResponse 2 "/nat_gt_term_def.json" "nat_gt"
+        , getSampleResponse 3 "/base_readme.json" "base_readme"
+        ]
+    )
+
+
+getSampleResponse : Int -> String -> String -> Cmd Msg
+getSampleResponse index url termName =
+    let
+        reference =
+            termName
+                |> FQN.fromString
+                |> NameOnly
+                |> Reference.TypeReference
+
+        decoder =
+            reference
+                |> decodeItem
+    in
+    Http.get
+        { url = url
+        , expect = Http.expectJson (GotItem index reference) decoder
+        }
+
+
+codebaseHash : Endpoint
+codebaseHash =
+    GET { path = [ "list" ], queryParams = [] }
+
+
+api : HttpApi.HttpApi
+api =
+    { url = SameOrigin []
+    , headers = []
+    }
+
+
+config : Config
+config =
+    { operatingSystem = OperatingSystem.MacOS
+    , perspective = Perspective.relativeRootPerspective
+    , toApiEndpoint = \_ -> codebaseHash
+    , api = api
+    }
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update message model =
+    case message of
+        WorkspaceMsg _ ->
+            ( model, Cmd.none )
+
+        GotItem _ reference (Err error) ->
+            ( model, Cmd.none )
+
+        GotItem _ reference (Ok item) ->
+            let
+                newWorkspaceItems =
+                    item
+                        |> fromItem reference
+                        |> WorkspaceItems.prependWithFocus model.workspaceItems
+
+                newModel =
+                    { model | workspaceItems = newWorkspaceItems }
+            in
+            ( newModel, Cmd.none )
+
+
+view : Model -> Html Msg
+view model =
+    let
+        workspaceView =
+            Workspace.view
+                UI.ViewMode.Regular
+                model
+    in
+    PageContent.view <|
+        PageContent.oneColumn [ workspaceView |> Html.map WorkspaceMsg ]
diff --git a/storybook/stories/Stories/Code/Workspace.elm b/storybook/stories/Stories/Code/Workspace.elm
@@ -44,6 +44,7 @@ init _ =
         [ getSampleResponse 0 "/increment_term_def.json" "increment"
         , getSampleResponse 1 "/nat_gt_term_def.json" "nat_gt"
         , getSampleResponse 2 "/base_readme.json" "base_readme"
+        , getSampleResponse 3 "/long.json" "assets.indexHtml"
         ]
     )
 

diff --git a/storybook/stories/Stories/Code/code.stories.js b/storybook/stories/Stories/Code/code.stories.js
@@ -4,6 +4,7 @@ import { initElmStory } from "../../initElmStory.js";
 import WorkspaceItem from "./WorkspaceItem.elm";
 import Workspace from "./Workspace.elm";
 import WorkspaceMinimap from "./WorkspaceMinimap.elm";
+import PageContent from "./PageContent.elm";
 
 export const workspace = () => {
   return initElmStory(Workspace.Elm.Stories.Code.Workspace);
@@ -16,3 +17,7 @@ export const workspaceItem = () => {
 export const workspaceMinimap = () => {
   return initElmStory(WorkspaceMinimap.Elm.Stories.Code.WorkspaceMinimap);
 };
+
+export const pageContent = () => {
+  return initElmStory(PageContent.Elm.Stories.Code.PageContent);
+};