WIP: WebGen Bump

deno.jsonc

@@ -1,6 +1,6 @@
 {
     "imports": {
-        "webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/b6fafd3/",
+        "webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/200f637/",
         // "webgen/": "../WebGen/",
         "std/": "https://deno.land/std@0.209.0/",
         "shared/": "./pages/shared/"

pages/_legacy/helper.ts

@@ -1,7 +1,7 @@
 // This code Will be ported to webgen
 
 import { API, fileCache, Permission, stupidErrorAlert } from "shared/mod.ts";
-import { Box, Button, Cache, Component, Custom, Dialog, DropDownInput, Horizontal, Image, Label, Page, Spacer, State, StateHandler, Style, SupportedThemes, Table, TextInput, Vertical } from "webgen/mod.ts";
+import { Box, Button, Cache, Component, Custom, DropDownInput, Horizontal, Image, Label, Page, Spacer, State, StateHandler, Style, SupportedThemes, Table, TextInput, Vertical } from "webgen/mod.ts";
 import artwork from "../../assets/img/template-artwork.png";
 import { loginRequired } from "../../components/pages.ts";
 import { Artist, ArtistTypes, Drop } from "../../spec/music.ts";

pages/_legacy/music/changeDrop.ts

@@ -65,7 +65,7 @@ export function ChangeDrop(drop: Drop) {
                             });
                         }),
                 ],
-                [ { width: 2, heigth: 2 }, Spacer() ],
+                [ { width: 2, height: 2 }, Spacer() ],
                 [
                     { width: 2 },
                     Grid(

pages/_legacy/music/edit.ts

@@ -1,5 +1,5 @@
 import { API, LoadingSpinner, Navigation, createActionList, createBreadcrumb, createTagList, stupidErrorAlert } from "shared/mod.ts";
-import { Box, Grid, Horizontal, Label, Spacer, State, Vertical, View, WebGen, isMobile } from "webgen/mod.ts";
+import { Body, Box, Grid, Horizontal, Label, Spacer, State, Vertical, WebGen, isMobile } from "webgen/mod.ts";
 import '../../../assets/css/main.css';
 import '../../../assets/css/music.css';
 import { DynaNavigation } from "../../../components/nav.ts";
@@ -28,14 +28,14 @@ const state = State({
     drop: <Drop | undefined>undefined,
 });
 
-View(() => Vertical(
+Body(Vertical(
     DynaNavigation("Music"),
     state.$drop.map(drop => drop ? Navigation({
         title: drop.title,
         children: [
             Horizontal(
                 //TODO: Make this look better
-                Label(DropTypeToText(drop.type)).setFont(1.5),
+                Label(DropTypeToText(drop.type)).setTextSize("2xl"),
                 Spacer()
             ),
             {
@@ -118,8 +118,7 @@ View(() => Vertical(
         }).asRefComponent())
         : LoadingSpinner()
     ).asRefComponent(),
-))
-    .appendOn(document.body);
+));
 
 const Permissions = {
     canTakedown: (drop: Drop) => drop.type == "PUBLISHED",

pages/_legacy/music/table.ts

@@ -1,13 +1,13 @@
 import { Progress } from "shared/mod.ts";
-import { Box, ButtonStyle, Checkbox, Color, DropDownInput, IconButton, Image, InlineTextInput, Label, MIcon, State, StateHandler, Table, View } from "webgen/mod.ts";
+import { Box, ButtonStyle, Checkbox, Color, Content, DropDownInput, IconButton, Image, InlineTextInput, Label, MIcon, State, StateHandler, Table } from "webgen/mod.ts";
 import language from "../../../data/language.json" with { type: "json" };
 import primary from "../../../data/primary.json" with { type: "json" };
 import secondary from "../../../data/secondary.json" with { type: "json" };
 import { Drop } from "../../../spec/music.ts";
 import { EditArtists, ProfilePicture, getSecondary, getYearList } from "../helper.ts";
 
 export function ManageSongs(state: StateHandler<{ songs: Drop[ "songs" ]; }>) {
-    const tableView = View(() =>
+    const tableView = Content(
         Table([
             [ "Title", "auto", ({ progress, title }, index) => progress !== undefined ? Progress(progress) : InlineTextInput("text", "blur").addClass("low-level").setValue(title).onChange(x => update(state, index, "title", x)) ],
             [ "Artists", "max-content", ({ artists }, index) =>
@@ -73,10 +73,10 @@ export function ManageSongs(state: StateHandler<{ songs: Drop[ "songs" ]; }>) {
             state.songs = state.songs?.filter((_, index) => index != i) as typeof state.songs;
         }).addClass("inverted-class", "light-mode")
     );
-    state.$on("songs", () => {
-        tableView.viewOptions().update({});
-    });
-    return tableView.asComponent().addClass("inverted-class");
+    // state.$on("songs", () => {
+    //     tableView.viewOptions().update({});
+    // });
+    return tableView.addClass("inverted-class");
 }
 
 // deno-lint-ignore no-explicit-any

pages/_legacy/newDrop.ts

@@ -1,5 +1,5 @@
 import { API, LoadingSpinner, stupidErrorAlert, uploadFilesDialog } from "shared/mod.ts";
-import { AdvancedImage, Button, ButtonStyle, Center, CenterV, Color, DropAreaInput, DropDownInput, Grid, Horizontal, Image, Label, MediaQuery, Page, Spacer, State, SupportedThemes, TextInput, Vertical, View, WebGen, Wizard } from "webgen/mod.ts";
+import { AdvancedImage, Body, Button, ButtonStyle, Center, CenterV, Color, DropAreaInput, DropDownInput, Grid, Horizontal, Image, Label, MediaQuery, Page, Spacer, State, SupportedThemes, TextInput, Vertical, WebGen, Wizard } from "webgen/mod.ts";
 import '../../assets/css/main.css';
 import { DynaNavigation } from "../../components/nav.ts";
 import language from "../../data/language.json" with { type: "json" };
@@ -26,29 +26,27 @@ const dropId = params.get("id")!;
 const gapSize = "15px";
 const inputWidth = "436px";
 
+API.music.id(dropId).get().then(stupidErrorAlert)
+    .then(restoreData => {
+        state.restoreData = restoreData;
+    })
+    .catch((e) => {
+        alert(e);
+        setTimeout(() => location.reload(), 1000);
+    });
+
 const state = State({
     restoreData: <Drop | undefined>undefined
 });
 
-View(() => Vertical(
+Body(Vertical(
     DynaNavigation("Music"),
     state.$restoreData.map(restoreData => restoreData ?
         wizard(restoreData).addClass("wizard-box")
         : LoadingSpinner()
     ).asRefComponent().removeFromLayout()
 ))
-    .change(() => {
-        API.music.id(dropId).get().then(stupidErrorAlert)
-            .then(restoreData => {
-                state.restoreData = restoreData;
-            })
-            .catch((e) => {
-                alert(e);
-                setTimeout(() => location.reload(), 1000);
-            });
-    })
-    .addClass("fullscreen")
-    .appendOn(document.body);
+    .addClass("fullscreen");
 
 const wizard = (restore?: Drop) => Wizard({
     cancelAction: "/music",
@@ -86,7 +84,8 @@ const wizard = (restore?: Drop) => Wizard({
             (small) =>
                 Label("Lets make your Drop hit!")
                     .setWidth(small ? "max(1rem, 15rem)" : "max(1rem, 25rem)")
-                    .setFont(small ? 2 : 3.448125, 800),
+                    .setFontWeight("extrabold")
+                    .setTextSize(small ? "3xl" : "6xl"),
         ),
         Spacer(),
         Horizontal(

pages/admin/admin.ts

@@ -1,4 +1,4 @@
-import { Vertical, View, WebGen } from "webgen/mod.ts";
+import { Body, Vertical, WebGen } from "webgen/mod.ts";
 import '../../assets/css/main.css';
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh, changeThemeColor, permCheck, renewAccessTokenIfNeeded } from "../_legacy/helper.ts";
@@ -21,7 +21,7 @@ WebGen({
     }
 });
 
-View(() => Vertical(DynaNavigation("Admin"), adminMenu)).appendOn(document.body);
+Body(Vertical(DynaNavigation("Admin"), adminMenu));
 
 renewAccessTokenIfNeeded()
     .then(() => refreshState());

pages/admin/dialog.ts

@@ -1,5 +1,5 @@
 import { API } from "shared/mod.ts";
-import { Box, Checkbox, Custom, Dialog, Horizontal, Image, Label, Page, Spacer, State, Wizard, createElement } from "webgen/mod.ts";
+import { Box, Checkbox, Custom, Horizontal, Image, Label, Page, Spacer, State, Wizard, createElement } from "webgen/mod.ts";
 import reviewTexts from "../../data/reviewTexts.json" with { type: "json" };
 import { Drop, ReviewResponse } from "../../spec/music.ts";
 import { clientRender, dropPatternMatching, rawTemplate, render } from "./email.ts";

pages/admin/review.ts

@@ -1,5 +1,5 @@
 import { API, LoadingSpinner, Navigation, createActionList, createBreadcrumb, createTagList, stupidErrorAlert } from "shared/mod.ts";
-import { Box, Button, ButtonStyle, Color, Entry, Grid, Horizontal, Label, Spacer, Vertical, View, WebGen, isMobile } from "webgen/mod.ts";
+import { Body, Box, Button, ButtonStyle, Color, Entry, Grid, Horizontal, Label, Spacer, Vertical, WebGen, isMobile } from "webgen/mod.ts";
 import '../../assets/css/main.css';
 import '../../assets/css/music.css';
 import { DynaNavigation } from "../../components/nav.ts";
@@ -33,7 +33,7 @@ if (!data.id) {
     location.href = "/admin";
 }
 
-View(() => Vertical(
+Body(Vertical(
     DynaNavigation("Admin"),
     Grid(
         Vertical(
@@ -150,8 +150,7 @@ View(() => Vertical(
     )
         .setGap("var(--gap)")
         .setRawColumns("1fr 3fr 1fr"),
-))
-    .appendOn(document.body);
+));
 
 renewAccessTokenIfNeeded()
     .then(() => refreshReviewState());

pages/admin/views/entryReview.ts

@@ -1,5 +1,5 @@
 import { API } from "shared/mod.ts";
-import { Button, ButtonStyle, Color, Dialog, DropDownInput, Entry, State, Vertical } from "webgen/mod.ts";
+import { Button, ButtonStyle, Color, DropDownInput, Entry, State, Vertical } from "webgen/mod.ts";
 import { Drop, DropType } from "../../../spec/music.ts";
 import { showPreviewImage } from "../../_legacy/helper.ts";
 

pages/admin/views/list.ts

@@ -1,5 +1,5 @@
 import { API, External, fileCache, RenderItem, stupidErrorAlert } from "shared/mod.ts";
-import { Box, Button, Cache, Color, Dialog, Entry, Grid, IconButton, Image, MIcon, ref, TextInput } from "webgen/mod.ts";
+import { Box, Button, Cache, Color, Entry, Grid, IconButton, Image, MIcon, ref, TextInput } from "webgen/mod.ts";
 import { templateArtwork } from "../../../assets/imports.ts";
 import { File, OAuthApp, Transcript, Wallet } from "../../../spec/music.ts";
 import { saveBlob } from "../../_legacy/helper.ts";

pages/admin/views/menu.ts

@@ -1,6 +1,6 @@
 import { API, count, HeavyList, loadMore, Navigation, placeholder } from "shared/mod.ts";
 import { sumOf } from "std/collections/sum_of.ts";
-import { Box, Button, Color, Dialog, Entry, Grid, Horizontal, isMobile, Label, ref, Spacer, State, Table, TextInput, Vertical } from "webgen/mod.ts";
+import { Box, Button, Color, Entry, Grid, Horizontal, isMobile, Label, ref, Spacer, State, Table, TextInput, Vertical } from "webgen/mod.ts";
 import { DropType } from "../../../spec/music.ts";
 import { activeUser } from "../../_legacy/helper.ts";
 import { upload } from "../loading.ts";

pages/holding/distributionAgreement.ts

@@ -1,12 +1,12 @@
 import { Footer } from "shared/footer.ts";
-import { Box, Label, View, WebGen } from "webgen/mod.ts";
+import { Body, Box, Label, WebGen } from "webgen/mod.ts";
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh } from "../_legacy/helper.ts";
 import './flowText.css';
 WebGen();
 await RegisterAuthRefresh();
 
-View(() => Box(
+Body(Box(
     DynaNavigation("Home"),
     Box(
         Label("BBN Music Distribution Agreement", "h2"),
@@ -70,4 +70,4 @@ View(() => Box(
         Label(`h. This Agreement shall be construed and enforced exclusively in accordance with the laws of the State of New York, without regard to its conflict of laws principles. Any action or proceeding brought by either party against the other arising out of or related to this Agreement shall be brought only in a state or federal court of competent jurisdiction located in New York County, New York, and the parties irrevocably consent to the in personam jurisdiction and venue of said courts. You agree that service of process by us to you by one of the methods designated above for the giving of notices will be deemed effective as personal service within New York County, and hereby consent to service of process by such methods.`).addClass("block"),
     ).addClass("flow-text"),
     Footer()
-)).appendOn(document.body);
+));

pages/holding/imprint.ts

@@ -1,16 +1,16 @@
 import { Footer } from "shared/footer.ts";
-import { Box, Button, ButtonStyle, Horizontal, Label, Spacer, View, WebGen } from "webgen/mod.ts";
+import { Body, Box, Button, ButtonStyle, Horizontal, Label, Spacer, WebGen } from "webgen/mod.ts";
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh } from "../_legacy/helper.ts";
 import './flowText.css';
 WebGen();
 await RegisterAuthRefresh();
 
-View(() => Box(
+Body(Box(
     DynaNavigation("Home"),
     Box(
         Label("Imprint", "h2"),
-        Label(`BBN Holding Inc.`).setFont(1, 600).addClass("block"),
+        Label(`BBN Holding Inc.`).setTextSize("base").setFontWeight("semibold").addClass("block"),
         Label(`270 Trace Colony Park Dr, Suite B`).addClass("block"),
         Box(Label(`Ridgeland - MS 39157`)),
         Box(Label(`Email: support@bbn.one`)),
@@ -31,4 +31,4 @@ View(() => Box(
         Label(`All rights to the texts, photos, graphics, video files and other objects on these Internet pages are protected by copyright.Their download, reproduction or use in other media or publications requires our written consent.All rights to all of the trademarks on this page belong exclusively to the owners of these trademark`).addClass("block")
     ).addClass("flow-text"),
     Footer()
-)).appendOn(document.body);
+));

pages/holding/index.ts

@@ -1,4 +1,4 @@
-import { Box, Button, Grid, Image, Label, Vertical, View, WebGen } from "webgen/mod.ts";
+import { Body, Box, Button, Grid, Image, Label, Vertical, WebGen } from "webgen/mod.ts";
 import '../../assets/css/main.css';
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh } from "../_legacy/helper.ts";
@@ -22,7 +22,7 @@ import bbnPublishing from "./resources/bbnPublishing.svg";
 WebGen();
 await RegisterAuthRefresh();
 
-View(() => Box(
+Body(Box(
     DynaNavigation("Home"),
     Vertical(
         Box(
@@ -104,8 +104,7 @@ View(() => Box(
         .setAlign("center"),
 
     Footer()
-))
-    .appendOn(document.body);
+));
 
 
 import("https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js");

pages/holding/loading.ts

@@ -1,5 +1,5 @@
+import { API } from "shared/restSpec.ts";
 import { lazyInit, State } from "webgen/mod.ts";
-import { API } from "../shared/restSpec.ts";
 import { createStableWebSocket } from "webgen/network.ts";
 
 export const data = State({
@@ -15,8 +15,8 @@ export const streamingPool = lazyInit(async () => {
         url: API.WS_URL.replace("/ws", "/api/@bbn/public/stats")
     }, {
         onMessage: (msg) => {
-            if(typeof msg !== "string") return;
-            const json = JSON.parse(msg)
+            if (typeof msg !== "string") return;
+            const json = JSON.parse(msg);
             data.stats = State(json as typeof data.stats);
         }
     });

pages/holding/privacyPolicy.ts

@@ -1,12 +1,12 @@
-import { Box, Label, View, WebGen } from "webgen/mod.ts";
+import { Footer } from "shared/footer.ts";
+import { Body, Box, Label, WebGen } from "webgen/mod.ts";
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh } from "../_legacy/helper.ts";
-import { Footer } from "../shared/footer.ts";
 import './flowText.css';
 WebGen();
 await RegisterAuthRefresh();
 
-View(() => Box(
+Body(Box(
     DynaNavigation("Home"),
     Box(
         Label("Privacy Policy", "h2"),
@@ -88,4 +88,4 @@ View(() => Box(
 
     ).addClass("flow-text"),
     Footer()
-)).appendOn(document.body);
+));

pages/holding/termsOfUse.ts

@@ -1,12 +1,12 @@
-import { Box, Label, View, WebGen } from "webgen/mod.ts";
+import { Body, Box, Label, WebGen } from "webgen/mod.ts";
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh } from "../_legacy/helper.ts";
 import { Footer } from "../shared/footer.ts";
 import './flowText.css';
 WebGen();
 await RegisterAuthRefresh();
 
-View(() => Box(
+Body(Box(
     DynaNavigation("Home"),
     Box(
         Label("Terms of Use", "h2"),
@@ -31,4 +31,4 @@ View(() => Box(
 
     ).addClass("flow-text"),
     Footer()
-)).appendOn(document.body);
+));

pages/hosting/main.ts

@@ -1,4 +1,4 @@
-import { State, Vertical, View, WebGen } from "webgen/mod.ts";
+import { Body, State, Vertical, WebGen } from "webgen/mod.ts";
 import '../../assets/css/main.css';
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh, changeThemeColor, renewAccessTokenIfNeeded } from "../_legacy/helper.ts";
@@ -22,7 +22,7 @@ WebGen({
     }
 });
 
-View(() => Vertical(DynaNavigation("Hosting"), state.$loaded.map(loaded => loaded ? hostingMenu : LoadingSpinner()).asRefComponent())).appendOn(document.body);
+Body(Vertical(DynaNavigation("Hosting"), state.$loaded.map(loaded => loaded ? hostingMenu : LoadingSpinner()).asRefComponent()));
 
 renewAccessTokenIfNeeded()
     .then(() => refreshState())

pages/hosting/views/FileBrowser.ts

@@ -1,10 +1,10 @@
 import { fileTypeName } from "shared/fileTypeName.ts";
 import { createDownloadStream } from "shared/libs/streamSaver.ts";
+import { Progress } from "shared/Progress.ts";
+import { ProgressTracker } from "shared/upload.ts";
 import { format } from "std/fmt/bytes.ts";
-import { asPointer, BasicLabel, BIcon, Box, Button, ButtonStyle, Color, Dialog, Entry, Grid, IconButton, Label, MIcon, ref, refMerge } from "webgen/mod.ts";
+import { asPointer, BasicLabel, BIcon, Box, Button, ButtonStyle, Color, Entry, Grid, IconButton, Label, MIcon, ref, refMerge } from "webgen/mod.ts";
 import { SidecarResponse } from "../../../spec/music.ts";
-import { Progress } from "../../shared/Progress.ts";
-import { ProgressTracker } from "../../shared/upload.ts";
 import { mapFiletoIcon } from "../constants.ts";
 import { downloadFile, listFiles, messageQueueSidecar } from "../loading.ts";
 import { deleteFileDialog } from "./dialogs/deleteFileDialog.ts";