Merge pull request #5418 from penpot/palba-abtest-add-sugested-libraries

✨ Add test AB for adding a few "Suggested" libraries

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -15,7 +15,9 @@
    [app.common.types.typographies-list :as ctyl]
    [app.common.uuid :as uuid]
    [app.config :as cf]
+   [app.main.data.dashboard :as dd]
    [app.main.data.modal :as modal]
+   [app.main.data.notifications :as ntf]
    [app.main.data.users :as du]
    [app.main.data.workspace.colors :as mdc]
    [app.main.data.workspace.libraries :as dwl]
@@ -33,6 +35,7 @@
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.strings :refer [matches-search]]
+   [beicon.v2.core :as rx]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -84,8 +87,10 @@
                  (conj (tr "workspace.libraries.typography" typography-count))))
      "\u00A0")))
 
-(mf/defc describe-library-blocks
-  [{:keys [components-count graphics-count colors-count typography-count] :as props}]
+(mf/defc describe-library-blocks*
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [components-count graphics-count colors-count typography-count]}]
   [:*
    (when (pos? components-count)
      [:li {:class (stl/css :element-count)}
@@ -104,9 +109,49 @@
       (tr "workspace.libraries.typography" typography-count)])])
 
 
+(mf/defc sample-library-entry*
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [library project-id team-id importing]}]
+  (let [id         (:id library)
+        importing? (deref importing)
+
+        on-error
+        (mf/use-fn
+         (fn [_]
+           (reset! importing nil)
+           (rx/of (ntf/error (tr "dashboard.libraries-and-templates.import-error")))))
+
+        on-success
+        (mf/use-fn
+         (mf/deps team-id)
+         (fn [_]
+           (st/emit! (dwl/fetch-shared-files {:team-id team-id}))))
+
+        import-library
+        (mf/use-fn
+         (fn [_]
+           (reset! importing id)
+           (st/emit! (dd/clone-template
+                      (with-meta {:project-id project-id
+                                  :template-id id}
+                        {:on-success on-success
+                         :on-error on-error})))))]
+
+    [:div {:class (stl/css :sample-library-item)
+           :key (dm/str id)}
+     [:div {:class (stl/css :sample-library-item-name)} (:name library)]
+     [:input {:class (stl/css-case :sample-library-button true
+                                   :sample-library-add (nil? importing?)
+                                   :sample-library-adding (some? importing?))
+              :type "button"
+              :value (if (= importing? id) (tr "labels.adding") (tr "labels.add"))
+              :on-click import-library}]]))
+
+
 (mf/defc libraries-tab
   {::mf/wrap-props false}
-  [{:keys [file-id shared? linked-libraries shared-libraries]}]
+  [{:keys [file-id shared? linked-libraries shared-libraries team-id]}]
   (let [search-term*   (mf/use-state "")
         search-term    (deref search-term*)
         library-ref    (mf/with-memo [file-id]
@@ -138,6 +183,12 @@
           (->> (vals linked-libraries)
                (sort-by (comp str/lower :name))))
 
+        importing*       (mf/use-state nil)
+        project-id       (mf/deref refs/current-project-id)
+        sample-libraries [{:id "penpot-design-system", :name "Design system example"}
+                          {:id "wireframing-kit", :name "Wireframe library"}
+                          {:id "whiteboarding-kit", :name "Whiteboarding Kit"}]
+
         change-search-term
         (mf/use-fn
          (fn [event]
@@ -215,10 +266,10 @@
         [:div {:class (stl/css :item-content)}
          [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
          [:ul {:class (stl/css :item-contents)}
-          [:& describe-library-blocks {:components-count (count components)
-                                       :graphics-count (count media)
-                                       :colors-count (count colors)
-                                       :typography-count (count typographies)}]]]
+          [:> describe-library-blocks* {:components-count (count components)
+                                        :graphics-count (count media)
+                                        :colors-count (count colors)
+                                        :typography-count (count typographies)}]]]
         (if ^boolean shared?
           [:input {:class (stl/css :item-unpublish)
                    :type "button"
@@ -240,10 +291,10 @@
                   graphics-count   (count (dm/get-in library [:data :media] []))
                   colors-count     (count (dm/get-in library [:data :colors] []))
                   typography-count (count (dm/get-in library [:data :typographies] []))]
-              [:& describe-library-blocks {:components-count components-count
-                                           :graphics-count graphics-count
-                                           :colors-count colors-count
-                                           :typography-count typography-count}])]]
+              [:> describe-library-blocks* {:components-count components-count
+                                            :graphics-count graphics-count
+                                            :colors-count colors-count
+                                            :typography-count typography-count}])]]
 
           [:button {:class (stl/css :item-button)
                     :type "button"
@@ -274,10 +325,10 @@
                     graphics-count   (dm/get-in library [:library-summary :media :count] 0)
                     colors-count     (dm/get-in library [:library-summary :colors :count] 0)
                     typography-count (dm/get-in library [:library-summary :typographies :count] 0)]
-                [:& describe-library-blocks {:components-count components-count
-                                             :graphics-count graphics-count
-                                             :colors-count colors-count
-                                             :typography-count typography-count}])]]
+                [:> describe-library-blocks* {:components-count components-count
+                                              :graphics-count graphics-count
+                                              :colors-count colors-count
+                                              :typography-count typography-count}])]]
             [:button {:class (stl/css :item-button-shared)
                       :data-library-id (dm/str id)
                       :title (tr "workspace.libraries.shared-library-btn")
@@ -290,6 +341,23 @@
              (nil? shared-libraries)
              (tr "workspace.libraries.loading")
 
+             (and (str/empty? search-term) (cf/external-feature-flag "templates-03" "test"))
+             [:*
+              [:div {:class (stl/css :sample-libraries-info)}
+               (tr "workspace.libraries.empty.no-libraries")
+               [:a {:target "_blank"
+                    :class (stl/css :sample-libraries-link)
+                    :href "https://penpot.app/libraries-templates"}
+                (tr "workspace.libraries.empty.some-templates")]]
+              [:div {:class (stl/css :sample-libraries-container)}
+               (tr "workspace.libraries.empty.add-some")
+               (for [library sample-libraries]
+                 [:> sample-library-entry*
+                  {:library library
+                   :project-id project-id
+                   :team-id team-id
+                   :importing importing*}])]]
+
              (str/empty? search-term)
              [:*
               [:span {:class (stl/css :empty-state-icon)}
@@ -519,7 +587,8 @@
                   :content (mf/html [:& libraries-tab {:file-id file-id
                                                        :shared? shared?
                                                        :linked-libraries libraries
-                                                       :shared-libraries shared-libraries}])}
+                                                       :shared-libraries shared-libraries
+                                                       :team-id team-id}])}
 
              #js {:label (tr "workspace.libraries.updates")
                   :id "updates"

frontend/src/app/main/ui/workspace/libraries.scss

@@ -126,6 +126,7 @@
   @include flexCenter;
   width: $s-20;
   padding: 0 0 0 $s-8;
+
   svg {
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
@@ -231,6 +232,7 @@
   padding: $s-8 $s-24;
   margin-inline-end: $s-2;
   border-radius: $br-8;
+
   &:disabled {
     @extend .button-disabled;
   }
@@ -333,3 +335,62 @@
   text-decoration: underline;
   font-weight: $fw400;
 }
+
+.sample-libraries-info {
+  display: flex;
+  flex-direction: column;
+  font-size: $fs-12;
+  margin: $s-32;
+  color: var(--color-foreground-secondary);
+}
+
+.sample-libraries-link {
+  color: var(--color-accent-primary);
+  text-decoration: underline;
+  font-weight: $fw400;
+}
+
+.sample-libraries-container {
+  display: flex;
+  flex-direction: column;
+  font-size: $fs-12;
+  width: 100%;
+  align-items: start;
+  color: var(--color-foreground-secondary);
+}
+
+.sample-library-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: $s-8;
+}
+
+.sample-library-item-name {
+  font-size: $fs-14;
+  color: var(--color-foreground-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: $s-232;
+}
+
+.sample-library-add {
+  @extend .button-secondary;
+}
+
+.sample-library-adding {
+  @extend .button-disabled;
+}
+
+.sample-library-button {
+  @include uppercaseTitleTipography;
+  height: $s-32;
+  width: $s-80;
+  margin: 0;
+  border-radius: $br-8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/translations/en.po

@@ -1565,6 +1565,9 @@ msgstr "Active"
 msgid "labels.add"
 msgstr "Add"
 
+msgid "labels.adding"
+msgstr "Adding..."
+
 #: src/app/main/ui/dashboard/fonts.cljs:176
 msgid "labels.add-custom-font"
 msgstr "Add custom font"
@@ -4595,6 +4598,15 @@ msgstr "see all changes"
 msgid "workspace.libraries.updates"
 msgstr "UPDATES"
 
+msgid "workspace.libraries.empty.no-libraries"
+msgstr "There are no Shared Libraries at you team, you can look for"
+
+msgid "workspace.libraries.empty.some-templates"
+msgstr "some templates in here"
+
+msgid "workspace.libraries.empty.add-some"
+msgstr "Or add some of these to try:"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:745
 msgid "workspace.options.add-interaction"
 msgstr "Click the + button to add interactions."

frontend/translations/es.po

@@ -1571,6 +1571,9 @@ msgstr "Activo"
 msgid "labels.add"
 msgstr "Añadir"
 
+msgid "labels.adding"
+msgstr "Añadiendo..."
+
 #: src/app/main/ui/dashboard/fonts.cljs:176
 msgid "labels.add-custom-font"
 msgstr "Añadir fuente personalizada"
@@ -4595,6 +4598,15 @@ msgstr "ver todos los cambios"
 msgid "workspace.libraries.updates"
 msgstr "ACTUALIZACIONES"
 
+msgid "workspace.libraries.empty.no-libraries"
+msgstr "No hay Biblioteacas Compartidas en tu equipo, puedes buscar"
+
+msgid "workspace.libraries.empty.some-templates"
+msgstr "algunas plantillas aquí"
+
+msgid "workspace.libraries.empty.add-some"
+msgstr "O añadir algunas de éstas para probar:"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:745
 msgid "workspace.options.add-interaction"
 msgstr "Pulsa el botón + para añadir interacciones."