### Run Shadow CLJS Demo Development Server Source: https://github.com/nubank/workspaces/blob/master/examples/workspaces-shadow-example/README.md This command sequence installs project dependencies using npm and then starts the Shadow CLJS watch process for the 'workspaces' build. This compiles the ClojureScript code and serves the application, typically accessible via a local web server. ```Shell npm install npx shadow-cljs watch workspaces ``` -------------------------------- ### Prepare Card for Toolbar Integration (Partial Example) Source: https://github.com/nubank/workspaces/blob/master/README.adoc Describes the process of adding a toolbar to a card by providing a `::wsm/render-toolbar` function, which should return a React component. This snippet provides the context of the `react-timed-card-init` function, which would be extended to include the toolbar rendering, though the `::wsm/render-toolbar` key itself is not fully shown in this truncated example. ```Clojure (defn react-timed-card-init [card state-atom component] (let [{::wsm/keys [dispose refresh render] :as react-card} (ct.react/react-card-init card state-atom component) timer (js/setInterval #(swap! state-atom update ::ticks inc) 1000)] (assoc react-card ::wsm/dispose (fn [node] ; clean the timer on dispose (js/clearInterval timer) (dispose node)) ::wsm/refresh (fn [node] (refresh node)) ::wsm/render (fn [node] (render node)) ``` -------------------------------- ### ClojureScript Entry Point for Workspaces Source: https://github.com/nubank/workspaces/blob/master/README.adoc This ClojureScript snippet defines the main entry point for a Workspaces application. It requires the core Workspaces library (`nubank.workspaces.core`) and mounts the application using `ws/mount`, serving as the initial setup for the component development environment. ```Clojure (ns my-app.workspaces.main (:require [nubank.workspaces.core :as ws] ; require your cards namespaces here )) (defonce init (ws/mount)) ``` -------------------------------- ### Shadow-CLJS Configuration with Custom Workspaces Target Source: https://github.com/nubank/workspaces/blob/master/README.adoc This Shadow-CLJS build configuration utilizes the custom `nubank.workspaces.shadow-cljs.target` to automate Workspaces setup. It scans for cards and tests based on a supplied regex (`ns-regexp`), auto-configures the main module, and detects new files, streamlining the development workflow. ```Clojure ;; shadow-cljs configuration {:builds {:cards {:target nubank.workspaces.shadow-cljs.target :ns-regexp "-(test|cards)$" :output-dir "resources/public/js/workspaces" :asset-path "/js/workspaces" :preloads [] ; optional, list namespaces to be pre loaded }} ``` -------------------------------- ### Clojure: Define a Custom Card with Basic Static Text Rendering Source: https://github.com/nubank/workspaces/blob/master/README.adoc This Clojure code provides a simplified example of defining a custom workspace card. It uses `ws/defcard` and specifies an `::wsm/init` function that returns a map with a `::wsm/render` function. The `::wsm/render` function directly sets a static 'Hello custom card!' text within the provided HTML node, illustrating a straightforward way to render content. ```Clojure (ws/defcard custom-card {::wsm/init (fn [card] {::wsm/render (fn [node] (gdom/setTextContent node "Hello custom card!"))})}) ``` -------------------------------- ### Define Reusable Card Configuration Templates in Clojure Source: https://github.com/nubank/workspaces/blob/master/README.adoc This example shows how to define and reuse common card settings as separate Clojure maps. These maps can then be passed into `ws/defcard` along with other configuration, and they will be merged to form the final card definition, promoting reusability and cleaner code. ```Clojure (def purple-card {::wsm/node-props {:style {:background "#79649a"}}}) (def align-top {::wsm/align {:flex 1}}) (ws/defcard widget-card {::wsm/card-width 3 ::wsm/card-height 7} purple-card align-top (ct.react/react-card (dom/div "💜"))) ``` -------------------------------- ### Figwheel Build Configuration for Workspaces Source: https://github.com/nubank/workspaces/blob/master/README.adoc This Figwheel build configuration defines a development build for Workspaces. It specifies source paths, output directories, and configures the `:on-jsload` hook to call `myapp.workspaces.main/on-js-reload`. This setup ensures that changes are automatically reloaded in the browser during development. ```Clojure :cljsbuild {:builds [{:id "dev" :source-paths ["src"] :figwheel {:on-jsload "myapp.workspaces.main/on-js-reload"} :compiler {:main myapp.workspaces.main :asset-path "js/workspaces/out" :output-to "resources/public/js/workspaces/main.js" :output-dir "resources/public/js/workspaces/out" :source-map-timestamp true :preloads [devtools.preload]}}]} ``` -------------------------------- ### Add Log State Button to Workspace Toolbar Source: https://github.com/nubank/workspaces/blob/master/README.adoc Demonstrates how to add a button to the workspace toolbar that, when clicked, logs the current application state to the browser's console. This provides a basic example of extending toolbar functionality. ```Clojure ::wsm/render-toolbar (fn [] (dom/div (uc/button {:onClick #(js/console.log "State" @state-atom)} "Log app state")))))) ``` -------------------------------- ### Creating a Stateful React Card with Atom in Workspaces Source: https://github.com/nubank/workspaces/blob/master/README.adoc This example illustrates how to create a React card that manages its own state using a Clojure atom. The `react-card` macro watches the provided atom and triggers a re-render whenever its value changes, demonstrating a simple counter application. ```clojure (ws/defcard counter-example-card (let [counter (atom 0)] (ct.react/react-card counter (element "div" {} (str "Count: " @counter) (element "button" {:onClick #(swap! counter inc)} "+"))))) ``` -------------------------------- ### Set Container Node Styles in Clojure Source: https://github.com/nubank/workspaces/blob/master/README.adoc This snippet demonstrates how to apply custom styles or other properties directly to the card's container DOM node using the `::wsm/node-props` key. The example sets a red background and white text color for the card. ```Clojure (ws/defcard styles-card {::wsm/node-props {:style {:background "red" :color "white"}}} (ct.react/react-card (dom/div "I'm in red"))) ``` -------------------------------- ### Align Card Content in Clojure Source: https://github.com/nubank/workspaces/blob/master/README.adoc This example illustrates how to control the positioning of content within a card using the `::wsm/align` key. The card container is a flex element, and setting `{:flex 1}` will position the content at the top and make it occupy the full width of the container. ```Clojure (ws/defcard positioned-top {::wsm/card-width 5 ::wsm/card-height 7 ::wsm/align {:flex 1}} (ct.react/react-card (dom/div "Foo on top"))) ``` -------------------------------- ### Implement Card Disposal with ::wsm/dispose Lifecycle Hook Source: https://github.com/nubank/workspaces/blob/master/README.adoc Demonstrates how to add a `::wsm/dispose` lifecycle function to a card definition. This function is invoked when the card is removed from all active workspaces, providing an opportunity for resource cleanup. The example includes `init`, `refresh`, and `render` for a complete card definition. ```Clojure (ws/defcard custom-card {::wsm/init (fn [card] (let [counter (atom 0)] {::wsm/dispose (fn [node] ; doesn't make a real difference for resource cleaning, just a dummy example ; so you can replace the code (gdom/setTextContent node "")) ::wsm/refresh (fn [node] (gdom/setTextContent node (str "Card updated, count: " (swap! counter inc) "!"))) ::wsm/render (fn [node] (gdom/setTextContent node (str "Card rendered, count: " @counter "!")))}))}) ``` -------------------------------- ### Clojure: Define a Custom Card with Initialization and ID Rendering Source: https://github.com/nubank/workspaces/blob/master/README.adoc This Clojure code defines a custom workspace card using `ws/defcard`. It includes an `::wsm/init` function that is invoked during card initialization. This function returns a map containing a `::wsm/render` function, which is responsible for displaying the card's content. The example demonstrates how to access and render the card's unique ID within the provided HTML node. ```Clojure (ws/defcard custom-card {::wsm/init (fn [card] {::wsm/render (fn [node] (gdom/setTextContent node (str "Rendering card " (::wsm/card-id card))))})}) ``` -------------------------------- ### Clojure: Define a Shareable Workspace Layout Source: https://github.com/nubank/workspaces/blob/master/README.adoc This Clojure code defines a structured workspace layout using `ws/defworkspace`. It specifies the arrangement and properties of various UI components (cards) within a workspace. This layout can be exported as transit data, allowing it to be stored in code and shared across different users or environments, ensuring consistent workspace setups. ```Clojure (ws/defworkspace ui-block "[\"^ \",\"c10\",[[\"^ \",\"i\",\"~$fulcro.incubator.workspaces.ui.reakit-ws/reakit-base\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"minH\",2]],\"c8\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c16\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c14\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c2\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c12\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c4\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c18\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c20\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]],\"c6\",[[\"^ \",\"i\",\"^0\",\"w\",2,\"h\",4,\"x\",0,\"y\",0,\"^1\",2]]]\"")) ``` -------------------------------- ### Create Positioned Card with ::wsm/align and Utility Wrapper Source: https://github.com/nubank/workspaces/blob/master/README.adoc Shows how to integrate alignment settings into a card definition using `::wsm/align` and the `ct.util/positioned-card` wrapper. This extends the card's functionality to support layout adjustments while maintaining its lifecycle events, demonstrating how to compose card features. ```Clojure (ws/defcard custom-card {::wsm/align {:flex 1} ::wsm/init (fn [card] (let [counter (atom 0)] ; wrap our definition with positioned.card, from nubank.workspaces.card-types.util (ct.util/positioned-card card {::wsm/dispose (fn [node] ; doesn't make a real difference for resource cleaning, just a dummy example ; so you can replace the code (gdom/setTextContent node "")) ::wsm/refresh (fn [node] (gdom/setTextContent node (str "Card updated, count: " (swap! counter inc) "!"))) ::wsm/render (fn [node] (gdom/setTextContent node (str "Card rendered, count: " @counter "!")))})))}) ``` -------------------------------- ### Fulcro Card Configuration Options Source: https://github.com/nubank/workspaces/blob/master/README.adoc This section details the available configuration options for the `fulcro-card` in Nubank Workspaces. These options allow customization of how the Fulcro application is initialized and mounted, including root wrapping, app configuration, initial state, computed data, and root node properties. ```APIDOC Fulcro Card Options: * ::f.portal/wrap-root? (default: true) Description: Wraps component into a light root. * ::f.portal/app (default: {}) Description: The app configuration, same options you could send to fulcro/new-fulcro-client. * ::f.portal/initial-state (default {}) Description: Accepts a value or a function. A value will be used to call the initial state function of your root. If you provide a function, the value returned by it will be the initial state. * ::f.portal/root-state Description: This map will be merged into the app root state to be part of the initial state in the root, this is useful to set things like :ui/locale considering that a wrapped root initial state will not end up in the root (will be in :ui/root). * ::f.portal/computed Description: Add this computed data to the root factory props. * ::f.portal/root-node-props Description: Use this to send props into the root note created to mount the portal on. ``` -------------------------------- ### Defining a Simple React Card in Workspaces Source: https://github.com/nubank/workspaces/blob/master/README.adoc This snippet demonstrates how to define a basic React component and register it as a card in Nubank Workspaces. It includes the necessary namespace declarations, a helper function for creating React elements, and the `ws/defcard` macro to display a 'Hello World' message. ```clojure (ns myapp.workspaces.cards (:require [nubank.workspaces.core :as ws] [nubank.workspaces.card-types.react :as ct.react])) ; simple function to create react elemnents (defn element [name props & children] (apply js/React.createElement name (clj->js props) children)) (ws/defcard hello-card (ct.react/react-card (element "div" {} "Hello World"))) ``` -------------------------------- ### Define Basic Card with Init, Refresh, and Render Lifecycle Source: https://github.com/nubank/workspaces/blob/master/README.adoc Illustrates the fundamental structure of a Nubank Workspace card, defining `::wsm/init`, `::wsm/refresh`, and `::wsm/render` lifecycle functions. It uses an atom to maintain a counter that updates on refresh and render events, demonstrating basic card interactivity. ```Clojure {::wsm/init (fn [card] (let [counter (atom 0)] {::wsm/refresh (fn [node] (gdom/setTextContent node (str "Card updated, count: " (swap! counter inc) "!"))) ::wsm/render (fn [node] (gdom/setTextContent node (str "Card rendered, count: " counter "!")))}))} ``` -------------------------------- ### Shadow-CLJS Configuration with Browser Target Source: https://github.com/nubank/workspaces/blob/master/README.adoc This Shadow-CLJS build configuration uses the standard `:browser` target for Workspaces. It specifies output directories, asset paths, and devtools settings, including HTTP server configuration. This approach requires manually adding workspace and test namespaces to the `main.cljs` file. ```Clojure ;; shadow-cljs configuration {:builds {:workspaces {:target :browser :output-dir "resources/public/js/workspaces" :asset-path "/js/workspaces" :devtools {;:preloads [fulcro.inspect.preload ] ; include for Fulcro Inspect support :http-root "resources/public" :http-port 3689 :http-resource-root "." :preloads []} :modules {:main {:entries [my-app.workspaces.main]}}}}} ``` -------------------------------- ### Figwheel Entry Point with on-js-load Hook Source: https://github.com/nubank/workspaces/blob/master/README.adoc This ClojureScript snippet modifies the Workspaces main entry point to integrate with Figwheel's live reloading. It defines an `on-js-load` function that calls `ws/after-load`, addressing a known issue where Figwheel's `:on-jsload` hook might not work reliably with library code. ```Clojure (ns my-app.workspaces.main (:require [nubank.workspaces.core :as ws] ; require your cards namespaces here )) (defn on-js-load [] (ws/after-load)) (defonce init (ws/mount)) ``` -------------------------------- ### Defining a Test Card in Workspaces Source: https://github.com/nubank/workspaces/blob/master/README.adoc This snippet demonstrates how to define a test card using `ws/deftest` in Nubank Workspaces. This macro integrates with `cljs.test` while also creating a card that can be run directly from the Workspaces UI, making it suitable for both CI and interactive testing. ```clojure (ws/deftest sample-test (is (= 1 1))) ``` -------------------------------- ### Mounting a Fulcro Component as a Workspaces Card Source: https://github.com/nubank/workspaces/blob/master/README.adoc This snippet shows how to integrate a Fulcro component into Nubank Workspaces using the `fulcro-card` type. It defines a simple Fulcro component with an internal counter and then registers it as a card, allowing it to be displayed and interacted with within the Workspaces environment. ```clojure (ns myapp.workspaces.fulcro-demo-cards (:require [fulcro.client.primitives :as fp] [fulcro.client.localized-dom :as dom] [nubank.workspaces.core :as ws] [nubank.workspaces.card-types.fulcro :as ct.fulcro] [nubank.workspaces.lib.fulcro-portal :as f.portal] [fulcro.client.mutations :as fm])) (fp/defsc FulcroDemo [this {:keys [counter]}] {:initial-state (fn [_] {:counter 0}) :ident (fn [] [::id "singleton"]) :query [:counter]} (dom/div (str "Fulcro counter demo [" counter "]") (dom/button {:onClick #(fm/set-value! this :counter (inc counter))} "+"))) (ws/defcard fulcro-demo-card (ct.fulcro/fulcro-card {::f.portal/root FulcroDemo})) ``` -------------------------------- ### HTML Template for Workspaces Application Source: https://github.com/nubank/workspaces/blob/master/README.adoc This HTML boilerplate provides the basic structure for a Workspaces application. It includes meta tags, a link to Google Fonts, a div for the application mount point, and script/stylesheet references for the compiled ClojureScript and syntax highlighting, ensuring a functional web environment for Workspaces. ```HTML
``` -------------------------------- ### Extend React Card Type with Custom Init and Timer Integration Source: https://github.com/nubank/workspaces/blob/master/README.adoc Illustrates how to create a custom React-based card type by extending an existing `react-card-init` function. It introduces a timer that updates a state atom and ensures the timer is cleared during the `::wsm/dispose` phase, demonstrating advanced composition, state management, and resource cleanup for custom card types. ```Clojure ; it's a good pattern to have the card init function separated from the card function ; this will make easier for others to use your card as a base for extension. (defn react-timed-card-init [card state-atom component] (let [{::wsm/keys [dispose refresh render] :as react-card} (ct.react/react-card-init card state-atom component) timer (js/setInterval #(swap! state-atom update ::ticks inc) 1000)] (assoc react-card ::wsm/dispose (fn [node] ; clean the timer on dispose (js/clearInterval timer) (dispose node)) ::wsm/refresh (fn [node] (refresh node)) ::wsm/render (fn [node] (render node))))) (defn react-timed-card [state-atom component] {::wsm/init #(react-timed-card-init % state-atom component)}) (ws/defcard react-timed-card-sample (let [state (atom {})] (react-timed-card state ; note since we are not using the macro it's better to send a function to avoid ; premature rendering (fn [] (dom/div (str "Tick: " (::ticks @state))))))) ``` -------------------------------- ### Configure Card Dimensions in Clojure Source: https://github.com/nubank/workspaces/blob/master/README.adoc This snippet demonstrates how to define the initial width and height of a card in Nubank Workspaces using Clojure. The `::wsm/card-width` and `::wsm/card-height` keys specify dimensions in grid tiles within the card definition map. It uses `ct.react/react-card` to render a simple React component. ```Clojure (ns myapp.workspaces.configurated-cards (:require [nubank.workspaces.core :as ws] [nubank.workspaces.model :as wsm])) (ws/defcard sized-card {::wsm/card-width 5 ::wsm/card-height 7} (ct.react/react-card (dom/div "Foo"))) ``` -------------------------------- ### Update Workspace Toolbar to Change Card Header Style Source: https://github.com/nubank/workspaces/blob/master/README.adoc Extends the workspace toolbar functionality by adding a button that dynamically changes the card header's background color using the `::wsm/set-card-header-style` function. This snippet also retains the previously added state logging button, showcasing multiple actions from a single toolbar. ```Clojure ::wsm/render-toolbar (fn [] (dom/div (uc/button {:onClick #((::wsm/set-card-header-style card) {:background "#cc0"})} "Change header color") (uc/button {:onClick #(js/console.log "State" @state-atom)} "Log app state"))) ``` -------------------------------- ### Default Card Alignment Flexbox Properties Source: https://github.com/nubank/workspaces/blob/master/README.adoc This snippet shows the default map used for `::wsm/align` properties. It configures the card container as a flexbox, centering its items both horizontally and vertically. ```Clojure {:display "flex" :align-items "center" :justify-content "center"} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.