Port more bslib methods: accordion, sidebar, navset, and fill methods

CHANGELOG.md

@@ -12,6 +12,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Added `include_js()` and `include_css()`, for easily including JS and CSS files in an application. (#127)
 
+* Added sidebar, card, value box, and accordion methods into `shiny.experimental.ui`. (#481)
+
+* Added `fill` and `fillable` methods into `shiny.experimental.ui`. If `fill` is `True`, then the UI component is allowed to expand into the parent container. If `fillable` is `True`, then the UI component will allow its content to expand. Both `fill` on the child component and `fillable` on the parent component must be `True` for the child component to expand. (#481)
+
+* Added sidebar methods into `shiny.experimental.ui`. `shiny.experimental.ui.layout_sidebar()` does not require `ui.panel_main()` and `ui.panel_sidebar()`. These two methods have been deprecated. `x.ui.page_navbar()`, `x.ui.navset_bar()`, `x.navset_tab_card()`, and `x.navset.pill_card()` added `sidebar=` support. (#481)
+
+
 ### Bug fixes
 
 ### Other changes

examples/cpuinfo/app.py

@@ -13,7 +13,9 @@
 import numpy as np
 import pandas as pd
 
-from shiny import App, Inputs, Outputs, Session, reactive, render, ui
+from shiny import App, Inputs, Outputs, Session
+from shiny import experimental as x
+from shiny import reactive, render, ui
 
 # The agg matplotlib backend seems to be a little more efficient than the default when
 # running on macOS, and also gives more consistent results across operating systems
@@ -53,8 +55,8 @@
         % f"{ncpu*4}em"
     ),
     ui.h3("CPU Usage %", class_="mt-2"),
-    ui.layout_sidebar(
-        ui.panel_sidebar(
+    x.ui.layout_sidebar(
+        x.ui.sidebar(
             ui.input_select(
                 "cmap",
                 "Colormap",
@@ -69,33 +71,31 @@
             ui.input_switch("hold", "Freeze output", value=False),
             class_="mb-3",
         ),
-        ui.panel_main(
+        ui.div(
+            {"class": "card mb-3"},
             ui.div(
-                {"class": "card mb-3"},
-                ui.div(
-                    {"class": "card-body"},
-                    ui.h5({"class": "card-title mt-0"}, "Graphs"),
-                    ui.output_plot("plot", height=f"{ncpu * 40}px"),
-                ),
-                ui.div(
-                    {"class": "card-footer"},
-                    ui.input_numeric("sample_count", "Number of samples per graph", 50),
-                ),
+                {"class": "card-body"},
+                ui.h5({"class": "card-title mt-0"}, "Graphs"),
+                ui.output_plot("plot", height=f"{ncpu * 40}px"),
             ),
             ui.div(
-                {"class": "card"},
-                ui.div(
-                    {"class": "card-body"},
-                    ui.h5({"class": "card-title m-0"}, "Heatmap"),
-                ),
-                ui.div(
-                    {"class": "card-body overflow-auto pt-0"},
-                    ui.output_table("table"),
-                ),
-                ui.div(
-                    {"class": "card-footer"},
-                    ui.input_numeric("table_rows", "Rows to display", 5),
-                ),
+                {"class": "card-footer"},
+                ui.input_numeric("sample_count", "Number of samples per graph", 50),
+            ),
+        ),
+        ui.div(
+            {"class": "card"},
+            ui.div(
+                {"class": "card-body"},
+                ui.h5({"class": "card-title m-0"}, "Heatmap"),
+            ),
+            ui.div(
+                {"class": "card-body overflow-auto pt-0"},
+                ui.output_table("table"),
+            ),
+            ui.div(
+                {"class": "card-footer"},
+                ui.input_numeric("table_rows", "Rows to display", 5),
             ),
         ),
     ),

examples/penguins/app.py

@@ -94,10 +94,9 @@ def penguin_value_box(title: str, count: int, bgcol: str, showcase_img: str):
             return x.ui.value_box(
                 title,
                 count,
-                {"class_": "pt-1 pb-0"},
-                showcase=x.ui.bind_fill_role(
-                    ui.tags.img({"style": "object-fit:contain;"}, src=showcase_img),
-                    item=True,
+                {"class": "pt-1 pb-0"},
+                showcase=x.ui.as_fill_item(
+                    ui.tags.img({"style": "object-fit:contain;"}, src=showcase_img)
                 ),
                 theme_color=None,
                 style=f"background-color: {bgcol};",

scripts/htmlDependencies.R

@@ -2,70 +2,133 @@
 
 versions <- list()
 
-pak::pkg_install("rstudio/bslib")
-# pak::pkg_install("cran::bslib")
+# Use local lib path for installing packages so we don't pollute the user's library
+withr::local_temp_libpaths()
+
+pak::pkg_install(c("rstudio/bslib@main", "rstudio/shiny@main", "rstudio/htmltools@main"))
+# pak::pkg_install(c("cran::bslib", "cran::shiny"))
 
 versions["shiny_html_deps"] <- as.character(packageVersion("shiny"))
 versions["bslib"] <- as.character(packageVersion("bslib"))
+versions["htmltools"] <- as.character(packageVersion("htmltools"))
+
+pkg_source_version <- function(pkg_name) {
+  pkg_info <- sessioninfo::package_info(pkg_name)
+  pkg_info_list <- pkg_info[pkg_info$package == pkg_name, , drop = TRUE]
+  pkg_info_list$source
+}
+write_json <- function(file, x, ..., pretty = TRUE, auto_unbox = TRUE) {
+  jsonlite::write_json(
+    c(
+      list("note!" = "This file is auto-generated by scripts/htmlDependencies.R"),
+      x
+    ),
+    file,
+    ...,
+    pretty = pretty, auto_unbox = auto_unbox
+  )
+
+}
 
-bslib_info <- sessioninfo::package_info("bslib")
-bslib_info_list <- bslib_info[bslib_info$package == "bslib", , drop = TRUE]
+bslib_version <- pkg_source_version("bslib")
+shiny_version <- pkg_source_version("shiny")
+htmltools_version <- pkg_source_version("htmltools")
 
 library(htmltools)
 library(bslib)
 
 shiny_path <- fs::path(getwd(), "shiny")
 www <- fs::path(shiny_path, "www")
-if (fs::dir_exists(www)) fs::dir_delete(www)
-fs::dir_create(www)
+www_shared <- fs::path(www, "shared")
+x_www <- fs::path(shiny_path, "experimental", "www")
+x_www_components <- fs::path(x_www, "bslib", "components")
 
 # Copy over shiny's www/shared directory
-withr::with_tempdir({
-  cmd <- paste("git clone --depth 1 --branch main https://github.com/rstudio/shiny")
-  system(cmd)
+copy_from_pkg <- function(pkg_name, pkg_dir, local_dir) {
+  if (fs::dir_exists(local_dir)) fs::dir_delete(local_dir)
+  fs::dir_create(local_dir)
+
+  stopifnot(local_dir != ".")
+
+  # Copy other folder into local parent folder
   fs::dir_copy(
-    "shiny/inst/www/shared",
-    www
+    system.file(pkg_dir, package = pkg_name),
+    dirname(local_dir)
   )
-})
+  # Rename folder to local folder name
+  if (basename(local_dir) != basename(pkg_dir)) {
+    file.rename(
+      fs::path(dirname(local_dir), basename(pkg_dir)),
+      local_dir
+    )
+  }
+  # Save pkg version info
+  write_json(
+    fs::path(local_dir, "_versions.json"),
+    list(
+      package = pkg_name,
+      version = pkg_source_version(pkg_name)
+    )
+  )
+}
+
+
+# Copy over bslib's components directory
+copy_from_pkg("bslib", "components", x_www_components)
+# Remove unused Sass files
+fs::file_delete(
+  fs::dir_ls(x_www_components, type = "file", regexp = "\\.scss$")
+)
+# Remove unused tag require
+fs::file_delete(fs::path(x_www_components, "tag-require.js"))
+
+# Copy over htmltools's fill directory
+copy_from_pkg("htmltools", "fill", fs::path(x_www, "htmltools", "fill"))
+
+
+
+
+# Copy over shiny's www/shared directory
+copy_from_pkg("shiny", "www/shared", www_shared)
 
 # Don't need legacy (hopefully)
-fs::dir_delete(fs::path(www, "shared", "legacy"))
+fs::dir_delete(fs::path(www_shared, "legacy"))
 # Don't need dataTables (hopefully)
-fs::dir_delete(fs::path(www, "shared", "datatables"))
+fs::dir_delete(fs::path(www_shared, "datatables"))
 
 # jQuery will come in via bslib (below)
 fs::file_delete(
-  fs::dir_ls(fs::path(www, "shared"), type = "file", regexp = "jquery")
+  fs::dir_ls(www_shared, type = "file", regexp = "jquery")
 )
 
 # Upgrade to Bootstrap 5 by default
 deps <- bs_theme_dependencies(bs_theme(version = 5))
 withr::with_options(
   list(htmltools.dir.version = FALSE),
-  ignore <- lapply(deps, copyDependencyToDir, "shiny/www/shared")
+  ignore <- lapply(deps, copyDependencyToDir, www_shared)
 )
 bs_ver <- names(bslib::versions())[bslib::versions() == "5"]
 versions["bootstrap"] <- bs_ver
-jsonlite::write_json(
+write_json(
+  "shiny/www/shared/bootstrap/_version.json",
   list(
-    bslib_version = bslib_info_list$source,
+    shiny_version = shiny_version,
+    bslib_version = bslib_version,
+    htmltools_version = htmltools_version,
     bootstrap_version = bs_ver
-  ),
-  "shiny/www/shared/bootstrap/version.json",
-  pretty = TRUE, auto_unbox = TRUE
+  )
 )
 
 # This additional bs3compat HTMLDependency() only holds
 # the JS shim for tab panel logic, which we don't need
 # since we're generating BS5+ tab markup. Note, however,
 # we still do have bs3compat's CSS on the page, which
 # comes in via the bootstrap HTMLDependency()
-fs::dir_delete(fs::path(www, "shared", "bs3compat"))
+fs::dir_delete(fs::path(www_shared, "bs3compat"))
 
 requirejs_version <- "2.3.6"
 versions["requirejs"] <- requirejs_version
-requirejs <- fs::path(www, "shared", "requirejs")
+requirejs <- fs::path(www_shared, "requirejs")
 fs::dir_create(requirejs)
 download.file(
   paste0("https://cdnjs.cloudflare.com/ajax/libs/require.js/", requirejs_version, "/require.min.js"),
@@ -94,6 +157,5 @@ cat(
   version_vars,
   "\n",
   version_all,
-  # paste0("versions = ", versions_txt),
   sep = ""
 )

setup.cfg

@@ -77,7 +77,8 @@ dev =
     flake8>=6.0.0;python_version>"3.7"
     flake8-bugbear>=23.2.13
     isort>=5.10.1
-    pyright>=1.1.305
+    # pyright produces break changes rapidly. Fix to a particular version
+    pyright==1.1.308
     pre-commit>=2.15.0
     wheel
     matplotlib

shiny/__init__.py

@@ -1,6 +1,6 @@
 """A package for building reactive web applications."""
 
-__version__ = "0.3.3.9000"
+__version__ = "0.3.3.9001"
 
 from ._shinyenv import is_pyodide as _is_pyodide
 

shiny/_versions.py

@@ -1,11 +1,13 @@
-shiny_html_deps = "1.7.4"
+shiny_html_deps = "1.7.4.9002"
 bslib = "0.4.2.9000"
+htmltools = "0.5.5.9000"
 bootstrap = "5.2.2"
 requirejs = "2.3.6"
 
 __all__ = (
     "shiny_html_deps",
     "bslib",
+    "htmltools",
     "bootstrap",
     "requirejs",
 )

shiny/examples/input_file/app.py

@@ -1,15 +1,16 @@
 import pandas as pd
 
 from shiny import *
+from shiny import experimental as x
 from shiny.types import FileInfo
 
 app_ui = ui.page_fluid(
-    ui.layout_sidebar(
-        ui.panel_sidebar(
+    x.ui.layout_sidebar(
+        x.ui.sidebar(
             ui.input_file("file1", "Choose CSV File", accept=[".csv"], multiple=False),
             ui.input_checkbox("header", "Header", True),
         ),
-        ui.panel_main(ui.output_ui("contents")),
+        ui.output_ui("contents"),
     )
 )
 

shiny/examples/layout_sidebar/app.py

@@ -2,11 +2,12 @@
 import numpy as np
 
 from shiny import *
+from shiny import experimental as x
 
 app_ui = ui.page_fluid(
-    ui.layout_sidebar(
-        ui.panel_sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
-        ui.panel_main(ui.output_plot("plot")),
+    x.ui.layout_sidebar(
+        x.ui.sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+        ui.output_plot("plot"),
     ),
 )
 

shiny/examples/navset_hidden/app.py

@@ -1,19 +1,18 @@
 from shiny import *
+from shiny import experimental as x
 
 app_ui = ui.page_fluid(
-    ui.layout_sidebar(
-        ui.panel_sidebar(
+    x.ui.layout_sidebar(
+        x.ui.sidebar(
             ui.input_radio_buttons(
                 "controller", "Controller", ["1", "2", "3"], selected="1"
             )
         ),
-        ui.panel_main(
-            ui.navset_hidden(
-                ui.nav(None, "Panel 1 content", value="panel1"),
-                ui.nav(None, "Panel 2 content", value="panel2"),
-                ui.nav(None, "Panel 3 content", value="panel3"),
-                id="hidden_tabs",
-            )
+        ui.navset_hidden(
+            ui.nav(None, "Panel 1 content", value="panel1"),
+            ui.nav(None, "Panel 2 content", value="panel2"),
+            ui.nav(None, "Panel 3 content", value="panel3"),
+            id="hidden_tabs",
         ),
     )
 )

shiny/examples/page_fixed/app.py

@@ -2,11 +2,12 @@
 import numpy as np
 
 from shiny import *
+from shiny import experimental as x
 
 app_ui = ui.page_fixed(
-    ui.layout_sidebar(
-        ui.panel_sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
-        ui.panel_main(ui.output_plot("plot")),
+    x.ui.layout_sidebar(
+        x.ui.sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+        ui.output_plot("plot"),
     ),
 )
 

shiny/examples/page_fluid/app.py

@@ -2,11 +2,12 @@
 import numpy as np
 
 from shiny import *
+from shiny import experimental as x
 
 app_ui = ui.page_fluid(
-    ui.layout_sidebar(
-        ui.panel_sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
-        ui.panel_main(ui.output_plot("plot")),
+    x.ui.layout_sidebar(
+        x.ui.sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+        ui.output_plot("plot"),
     ),
 )