From 257d72ee9d5e87397ccb7d599c00db42631806bf Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Wed, 4 Dec 2024 13:17:39 +0100 Subject: [PATCH] :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."