Integrate Tailwind framework (#3999)

[Task link](https://www.pivotaltracker.com/story/show/183992025)

This PR moves the documentation visualization into a separate crate and sets up the Tailwind CSS framework for this new crate.

We would use Tailwind to style our HTML documentation.


https://user-images.githubusercontent.com/6566674/208719213-85f78f7e-8dc2-45d5-95a1-db4baad1bda1.mp4

.prettierignore

@@ -24,6 +24,7 @@ THIRD-PARTY
 # Generated files
 app/ide-desktop/build.json
 app/ide-desktop/lib/client/electron-builder-config.json
+app/gui/view/documentation/assets/stylesheet.css
 Cargo.lock
 
 # Engine Builds can leave these nested working copies.

app/gui/view/Cargo.toml

@@ -22,6 +22,7 @@ ensogl-text = { path = "../../../lib/rust/ensogl/component/text" }
 ensogl-text-msdf = { path = "../../../lib/rust/ensogl/component/text/src/font/msdf" }
 ensogl-hardcoded-theme = { path = "../../../lib/rust/ensogl/app/theme/hardcoded" }
 ide-view-component-browser = { path = "component-browser" }
+ide-view-documentation = { path = "documentation" }
 ide-view-graph-editor = { path = "graph-editor" }
 parser-scala = { path = "../language/parser" }
 span-tree = { path = "../language/span-tree" }

app/gui/view/documentation/Cargo.toml

@@ -0,0 +1,27 @@
+[package]
+name = "ide-view-documentation"
+version = "0.1.0"
+authors = ["Enso Team <[email protected]>"]
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+enso-frp = { path = "../../../../lib/rust/frp" }
+enso-logger = { path = "../../../../lib/rust/logger" }
+enso-prelude = { path = "../../../../lib/rust/prelude" }
+ensogl = { path = "../../../../lib/rust/ensogl" }
+ensogl-component = { path = "../../../../lib/rust/ensogl/component" }
+ensogl-hardcoded-theme = { path = "../../../../lib/rust/ensogl/app/theme/hardcoded" }
+ide-view-graph-editor = { path = "../graph-editor" }
+wasm-bindgen = { workspace = true }
+serde_json = { version = "1.0" }
+
+[dependencies.web-sys]
+version = "0.3.4"
+features = []
+
+[build-dependencies]
+ide-ci = { path = "../../../../build/ci_utils" }
+tokio = { workspace = true }

app/gui/view/documentation/assets/.gitignore

@@ -0,0 +1,2 @@
+# Automatically generated
+stylesheet.css

app/gui/view/documentation/assets/input.css

@@ -0,0 +1,10 @@
+/*
+   In this file, one can define custom CSS rules for use in the documentation panel.
+   The Tailwind CLI utility uses this file as an input file, and the content is copied to
+   the final CSS stylesheet of the documentation panel.
+   See the crate documentation to learn more.
+*/
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/gui/view/documentation/build.rs

@@ -0,0 +1,37 @@
+//! This script would run Tailwind CLI utility to generate a CSS stylesheet by scanning the
+//! source code for class names and including needed CSS rules in the output file.
+//!
+//! See crate documentation to learn more.
+
+use ide_ci::prelude::*;
+
+use ide_ci::programs::Npm;
+
+
+
+/// The path to the input file. One can define arbitrary CSS rules there and they will be copied
+/// in the output file.
+const CSS_INPUT_PATH: &str = "assets/input.css";
+/// The filename of the resulting CSS stylesheet. It will be generated inside `OUT_DIR`.
+const CSS_OUTPUT_FILENAME: &str = "stylesheet.css";
+
+#[tokio::main]
+async fn main() -> Result {
+    // We should rerun the tailwind on changes in our sources.
+    // Tailwind scans this directory to determine the used classes.
+    println!("cargo:rerun-if-changed=src");
+    // We should rerun the tailwind on changes in the input CSS file.
+    // It may contain custom CSS rules.
+    println!("cargo:rerun-if-changed={CSS_INPUT_PATH}");
+
+    install_and_run_tailwind().await?;
+    Ok(())
+}
+
+async fn install_and_run_tailwind() -> Result {
+    Npm.cmd()?.install().run_ok().await?;
+    let out_path = PathBuf::from(std::env::var("OUT_DIR").unwrap()).join(CSS_OUTPUT_FILENAME);
+    let args: &[&str] = &["--", "-i", CSS_INPUT_PATH, "-o", out_path.as_str()];
+    Npm.cmd()?.run("generate", args).run_ok().await?;
+    Ok(())
+}

app/gui/view/documentation/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "enso-tailwind-wrapper",
+  "version": "1.0.0",
+  "dependencies": {},
+  "devDependencies": {
+    "tailwindcss": "^3.2.4"
+  },
+  "scripts": {
+    "generate": "tailwindcss"
+  }
+}

app/gui/view/src/documentation.rs → app/gui/view/documentation/src/lib.rs

@@ -1,10 +1,53 @@
 //! Documentation view visualization generating and presenting Enso Documentation under
 //! the documented node.
-
-use crate::prelude::*;
+//!
+//! # Tailwind CSS
+//!
+//! This crate uses the [`Tailwind CSS`] framework to style the HTML code displayed inside the
+//! documentation panel. [`Tailwind CSS`] is a utility-first CSS framework packed with classes like
+//! `flex`, `w-1/2`, `h-32`, or `bg-gray-200`. It allows for defining any visual style by combining
+//! these classes. The `build.rs` script runs the [`Tailwind CSS`] utility to generate a
+//! CSS stylesheet by scanning the source code for class names and including needed CSS rules in the
+//! output file. It means one can set `Tailwind` classes for any DOM element, and the stylesheet
+//! will automatically update with needed CSS rules.
+//!
+//! The build script runs `npx tailwindcss`, so one should have [Node.js] installed. Installing the
+//! `Tailwind` utility is not strictly required because the `npx` would download it
+//! automatically if needed.
+//!
+//! [`Tailwind CSS`]: https://tailwindcss.com/
+
+// === Features ===
+#![feature(associated_type_bounds)]
+#![feature(associated_type_defaults)]
+#![feature(drain_filter)]
+#![feature(fn_traits)]
+#![feature(option_result_contains)]
+#![feature(specialization)]
+#![feature(trait_alias)]
+#![feature(type_alias_impl_trait)]
+#![feature(unboxed_closures)]
+// === Standard Linter Configuration ===
+#![deny(non_ascii_idents)]
+#![warn(unsafe_code)]
+#![allow(clippy::bool_to_int_with_if)]
+#![allow(clippy::let_and_return)]
+#![allow(incomplete_features)] // To be removed, see: https://github.com/enso-org/ide/issues/1559
+#![warn(missing_copy_implementations)]
+#![warn(missing_debug_implementations)]
+#![warn(missing_docs)]
+#![warn(trivial_casts)]
+#![warn(trivial_numeric_casts)]
+#![warn(unsafe_code)]
+#![warn(unused_import_braces)]
+#![warn(unused_qualifications)]
+#![recursion_limit = "1024"]
+
+use ensogl::prelude::*;
 use ensogl::system::web::traits::*;
 
-use crate::graph_editor::component::visualization;
+use graph_editor::component::visualization;
+use ide_view_graph_editor as graph_editor;
 
 use enso_frp as frp;
 use ensogl::application::Application;
@@ -39,7 +82,7 @@ pub const VIEW_WIDTH: f32 = 300.0;
 pub const VIEW_HEIGHT: f32 = 300.0;
 
 /// Content in the documentation view when there is no data available.
-const CORNER_RADIUS: f32 = crate::graph_editor::component::node::CORNER_RADIUS;
+const CORNER_RADIUS: f32 = graph_editor::component::node::CORNER_RADIUS;
 const PADDING: f32 = 15.0;
 const PADDING_TOP: f32 = 5.0;
 const CODE_BLOCK_CLASS: &str = "doc-code-container";
@@ -121,9 +164,18 @@ impl Model {
 
     fn init(self) -> Self {
         self.reload_style();
+        self.load_css_stylesheet();
         self
     }
 
+    /// Add `<style>` tag with the stylesheet to the `outer_dom`.
+    fn load_css_stylesheet(&self) {
+        let stylesheet = include_str!(concat!(env!("OUT_DIR"), "/stylesheet.css"));
+        let element = web::document.create_element_or_panic("style");
+        element.set_inner_html(stylesheet);
+        self.outer_dom.append_or_warn(&element);
+    }
+
     /// Set size of the documentation view.
     fn set_size(&self, size: Vector2) {
         self.size.set(size);
@@ -209,7 +261,7 @@ impl Model {
     /// Load an HTML file into the documentation view when user is waiting for data to be received.
     /// TODO [MM] : This should be replaced with a EnsoGL spinner in the next PR.
     fn load_waiting_screen(&self) {
-        let spinner = include_str!("documentation/spinner.html");
+        let spinner = include_str!("../assets/spinner.html");
         self.push_to_dom(String::from(spinner))
     }
 

app/gui/view/documentation/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['src/**/*.rs'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}

app/gui/view/src/lib.rs

@@ -33,14 +33,14 @@
 pub mod code_editor;
 pub mod component_browser;
 pub mod debug_mode_popup;
-pub mod documentation;
 pub mod open_dialog;
 pub mod project;
 pub mod root;
 pub mod searcher;
 pub mod status_bar;
 pub mod window_control_buttons;
 
+pub use ide_view_documentation as documentation;
 pub use ide_view_graph_editor as graph_editor;
 pub use welcome_screen;
 

build-config.yaml

@@ -1,6 +1,6 @@
 # Options intended to be common for all developers.
 
-wasm-size-limit: 15.34 MiB
+wasm-size-limit: 15.35 MiB
 
 required-versions:
   cargo-watch: ^8.1.1