From 257d72ee9d5e87397ccb7d599c00db42631806bf Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Wed, 4 Dec 2024 13:17:39 +0100 Subject: [PATCH 1/3] :sparkles: Add test AB for adding a few "Suggested" libraries --- .../src/app/main/ui/workspace/libraries.cljs | 63 ++++++++++++++++++- .../src/app/main/ui/workspace/libraries.scss | 61 ++++++++++++++++++ frontend/translations/en.po | 12 ++++ frontend/translations/es.po | 12 ++++ 4 files changed, 146 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 26ae8ca01..732f70e0c 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/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])) @@ -104,9 +107,45 @@ (tr "workspace.libraries.typography" typography-count)])]) +(mf/defc sample-library-entry + [{:keys [library project-id team-id importing] :as props}] + (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 +177,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] @@ -290,6 +335,19 @@ (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 +577,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" diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 7c04d7b30..a1df227fe 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/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; +} diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 0d42a8b06..2c0b4b84a 100644 --- a/frontend/translations/en.po +++ b/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." diff --git a/frontend/translations/es.po b/frontend/translations/es.po index bce795a55..23691241e 100644 --- a/frontend/translations/es.po +++ b/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." From ce1ba3f28f9b35fc1962c8a053676ce808615b85 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 10 Dec 2024 09:21:45 +0100 Subject: [PATCH 2/3] :lipstick: Fix sample-library-entry component syntax style --- .../src/app/main/ui/workspace/libraries.cljs | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 732f70e0c..aaa42da7e 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -107,8 +107,10 @@ (tr "workspace.libraries.typography" typography-count)])]) -(mf/defc sample-library-entry - [{:keys [library project-id team-id importing] :as props}] +(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) @@ -137,7 +139,9 @@ [: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?)) + [: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}]])) @@ -346,7 +350,11 @@ [: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*}])]] + [:> sample-library-entry* + {:library library + :project-id project-id + :team-id team-id + :importing importing*}])]] (str/empty? search-term) [:* From e5d8bc91fbaf3eb455ab1bffa7b4f50f94447732 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 10 Dec 2024 09:26:07 +0100 Subject: [PATCH 3/3] :lipstick: Fix describe-library-blocks component syntax decl style --- .../src/app/main/ui/workspace/libraries.cljs | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index aaa42da7e..bd5d33232 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -87,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)} @@ -264,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" @@ -289,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" @@ -323,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")