[forest] Sidebar issues

* #379

src/Gargantext/Components/Bootstrap/Abstract/Cloak.purs

@@ -5,9 +5,11 @@ module Gargantext.Components.Bootstrap.Cloak
 import Gargantext.Prelude
 
 import Data.Foldable (elem)
-import Data.Maybe (Maybe, fromMaybe)
+import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Tuple.Nested ((/\))
+import Effect (Effect)
 import Effect.Timer (setTimeout)
+import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Toestand as T
@@ -17,10 +19,20 @@ type Props =
   ( defaultSlot             :: R.Element
   , cloakSlot               :: R.Element
   , isDisplayed             :: Boolean
-  , idlingPhaseDuration     :: Maybe Int -- Milliseconds
+  | Options
+  )
+
+type Options =
+  ( idlingPhaseDuration     :: Maybe Int -- Milliseconds
   , sustainingPhaseDuration :: Maybe Int -- Milliseconds
   )
 
+options :: Record Options
+options =
+  { idlingPhaseDuration     : Nothing
+  , sustainingPhaseDuration : Nothing
+  }
+
 -- |  Abstract component type easing the transition display between a content
 -- |  component and transitional (or cloak) component
 -- |
@@ -94,8 +106,8 @@ type Props =
 -- |      , sustainingPhaseDuration  : Just 400
 -- |      }
 -- |    ```
-cloak :: R2.Leaf Props
-cloak = R2.leaf component
+cloak :: forall r. R2.OptLeaf Options Props r
+cloak = R2.optLeaf component options
 
 cname :: String
 cname = "b-cloak"
@@ -107,47 +119,50 @@ component = R.hooksComponent cname cpt where
     phase /\ phaseBox <- R2.useBox' (Idle :: Phase)
 
     -- Computed
-    canCloakBeDisplayed   <- pure $ elem phase [ Sustain, Wait ]
-    canContentBeDisplayed <- pure $ elem phase [ Display ]
+    let
+      canCloakBeDisplayed   = elem phase [ Sustain, Wait ]
+      canContentBeDisplayed = elem phase [ Display ]
+
+    -- Behaviors
+    let
+
+      execDisplayingPhaseOr :: (Unit -> Effect Unit) -> Effect Unit
+      execDisplayingPhaseOr thunk =
+
+        if props.isDisplayed
+        then T.write_ Display phaseBox
+        else thunk unit
 
-    -- @executeDisplayingPhase
-    execDisplayingPhase <- pure $ const $
-      T.write_ Display phaseBox
+      execWaitingPhase :: Unit -> Effect Unit
+      execWaitingPhase _ = execDisplayingPhaseOr $ const $
 
-    -- Helpers
-    execDisplayingPhaseOr <- pure $ \fn ->
+            T.write_ Wait phaseBox
 
-      if props.isDisplayed
-      then execDisplayingPhase unit
-      else fn
+      execSustainingPhase :: Unit -> Effect Unit
+      execSustainingPhase _ = execDisplayingPhaseOr $ const $
 
-    -- @executeWaitingPhase
-    execWaitingPhase <- pure $ const $ execDisplayingPhaseOr $
-          T.write_ Wait phaseBox
+            T.write_ Sustain phaseBox
 
-    -- @executeSustainingPhase
-    execSustainingPhase <- pure $ const $ execDisplayingPhaseOr $
-          T.write_ Sustain phaseBox
+        <*  setTimeout
+              (fromMaybe 0 props.sustainingPhaseDuration)
+              (execWaitingPhase unit)
 
-      <*  setTimeout
-            (fromMaybe 0 props.sustainingPhaseDuration)
-            (execWaitingPhase unit)
+      execIdlingPhase :: Unit -> Effect Unit
+      execIdlingPhase _ = execDisplayingPhaseOr $ const $
 
-    -- @executeIdlingPhase
-    execIdlingPhase <- pure $ const $ execDisplayingPhaseOr $
-          T.write_ Idle phaseBox
+            T.write_ Idle phaseBox
 
-      <*  setTimeout
-            (fromMaybe 0 props.idlingPhaseDuration)
-            (execSustainingPhase unit)
+        <*  setTimeout
+              (fromMaybe 0 props.idlingPhaseDuration)
+              (execSustainingPhase unit)
 
     -- Effects
-    R.useEffectOnce' $ execIdlingPhase unit
+    useFirstEffect' $ execIdlingPhase unit
 
-    R.useEffect1' props.isDisplayed $
+    R.useEffect2' props.isDisplayed phase $
 
       if (props.isDisplayed && phase == Wait)
-      then execDisplayingPhase unit
+      then T.write_ Display phaseBox
       else pure unit
 
     -- Render

src/Gargantext/Components/Bootstrap/Block/Caveat.purs

@@ -37,15 +37,16 @@ component :: R.Component Props
 component = R.hooksComponent componentName cpt where
   cpt props children = do
     -- Computed
-    className <- pure $ intercalate " "
-      -- provided custom className
-      [ props.className
-      -- BEM classNames
-      , componentName
-      -- Bootstrap specific classNames
-      , bootstrapName
-      , bootstrapName <> "-" <> show props.variant
-      ]
+    let
+      className = intercalate " "
+        -- provided custom className
+        [ props.className
+        -- BEM classNames
+        , componentName
+        -- Bootstrap specific classNames
+        , bootstrapName
+        , bootstrapName <> "-" <> show props.variant
+        ]
     -- Render
     pure $
 

src/Gargantext/Components/Bootstrap/Block/Div.purs

-module Gargantext.Components.Bootstrap.Div (div', div_) where
-
-import Reactix as R
-import Reactix.DOM.HTML as H
-
--- | Shorthand for using HTML <div> without writing its text node
-div' :: forall r. Record r -> String -> R.Element
-div' props content = H.div props [ H.text content ]
-
--- | Shorthand for using HTML <div> without writing its text node nor props
-div_ :: String -> R.Element
-div_ content = H.div {} [ H.text content ]

src/Gargantext/Components/Bootstrap/Block/ProgressBar.purs

+module Gargantext.Components.Bootstrap.ProgressBar(progressBar) where
+
+import Gargantext.Prelude
+
+import Data.Foldable (intercalate)
+import Gargantext.Components.Bootstrap.Types (Variant(..))
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+type Props   =
+  ( value     :: Number
+  | Options
+  )
+
+type Options =
+  ( className :: String
+  , variant   :: Variant
+  )
+
+options :: Record Options
+options =
+  { className : ""
+  , variant   : Primary
+  }
+
+-- | Structural Component for the Bootsrap "Progress Bar"
+-- |
+-- | https://getbootstrap.com/docs/4.6/components/progress/
+progressBar :: forall r. R2.OptLeaf Options Props r
+progressBar = R2.optLeaf component options
+
+componentName :: String
+componentName = "b-progress-bar"
+
+bootstrapName :: String
+bootstrapName = "progress"
+
+component :: R.Component Props
+component = R.hooksComponent componentName cpt where
+  cpt props _ = do
+    -- Computed
+    let
+      className = intercalate " "
+        -- provided custom className
+        [ props.className
+        -- BEM classNames
+        , componentName
+        -- Bootstrap specific classNames
+        , bootstrapName
+        ]
+    -- Render
+    pure $
+
+      H.div
+      { className }
+      [
+        H.div
+        { className: intercalate " "
+            [ "progress-bar"
+            , "bg-" <> show props.variant
+            ]
+        , style: { width: (show props.value) <> "%" }
+        , role: "progress-bar"
+        , "aria-valuenow": show $ props.value
+        , "aria-valuemin": "0"
+        , "aria-valuemax": "100"
+        }
+        []
+      ]

src/Gargantext/Components/Bootstrap/Bootstrap.purs

@@ -5,12 +5,28 @@ module Gargantext.Components.Bootstrap
 import Gargantext.Components.Bootstrap.BaseModal(baseModal) as Exports
 import Gargantext.Components.Bootstrap.Button(button) as Exports
 import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
-import Gargantext.Components.Bootstrap.Cloak(cloak) as Exports
-import Gargantext.Components.Bootstrap.Div(div', div_) as Exports
+import Gargantext.Components.Bootstrap.Cloak (cloak) as Exports
 import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
 import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
 import Gargantext.Components.Bootstrap.FormSelect(formSelect, formSelect') as Exports
 import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports
 import Gargantext.Components.Bootstrap.Icon(icon) as Exports
-import Gargantext.Components.Bootstrap.Label(label', label_) as Exports
+import Gargantext.Components.Bootstrap.IconButton(iconButton) as Exports
+import Gargantext.Components.Bootstrap.ProgressBar(progressBar) as Exports
 import Gargantext.Components.Bootstrap.Spinner(spinner) as Exports
+import Gargantext.Components.Bootstrap.Tooltip(tooltip, tooltipBind, tooltipContainer) as Exports
+
+import Gargantext.Components.Bootstrap.Shortcut(
+    div', div_
+  , h1', h1_
+  , h2', h2_
+  , h3', h3_
+  , h4', h4_
+  , h5', h5_
+  , h6', h6_
+  , span', span_
+  , li', li_
+  , b', b_
+  , code', code_
+  , label', label_
+  ) as Exports

src/Gargantext/Components/Bootstrap/Inline/Button.purs

@@ -71,8 +71,9 @@ component = R.hooksComponent componentName cpt where
           bootstrapName <> "-block" $
           mempty
       ]
-    -- @click
-    click <- pure $ \event -> onClick status callback event
+    -- Behaviors
+    let
+      click = onClick status callback
     -- Render
     pure $
 

src/Gargantext/Components/Bootstrap/Inline/Label.purs

-module Gargantext.Components.Bootstrap.Label
-  ( label'
-  , label_
-  ) where
-
-import Reactix as R
-import Reactix.DOM.HTML as H
-
--- | Shorthand for using HTML <label> without writing its text node
-label' :: forall r. Record r -> String -> R.Element
-label' props content = H.label props [ H.text content ]
-
--- | Shorthand for using HTML <label> without writing its text node nor props
-label_ :: String -> R.Element
-label_ content = H.label {} [ H.text content ]

src/Gargantext/Components/DocsTable.purs

@@ -185,7 +185,7 @@ docViewCpt = here.component "docView" cpt where
 
       R.fragment
       [
-        H.div { className: "doc-table-doc-view container1" }
+        H.div { className: "doc-table-doc-view" }
         [ R2.row
           [ chart
           , if showSearch then searchBar { query } [] else H.div {} []

src/Gargantext/Components/Forest/Tree/Node/Action/Upload.purs

@@ -432,7 +432,7 @@ fileTypeViewCpt = here.component "fileTypeView" cpt
       droppedFile' <- T.useLive T.unequal droppedFile
 
       case droppedFile' of
-        Nothing -> pure $ H.div {} []
+        Nothing -> pure $ mempty
         Just df ->
           pure $ H.div tooltipProps [ H.div { className: "card"}
                                       [ panelHeading