From 129b7afda93682091c90fc49c9ed8a759365d512 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 14 Aug 2024 11:56:04 +0200 Subject: [PATCH] :recycle: Remove components preview --- frontend/src/app/main/ui.cljs | 7 - .../app/main/ui/debug/components_preview.cljs | 270 ------------------ .../app/main/ui/debug/components_preview.scss | 99 ------- frontend/src/app/main/ui/routes.cljs | 2 - 4 files changed, 378 deletions(-) delete mode 100644 frontend/src/app/main/ui/debug/components_preview.cljs delete mode 100644 frontend/src/app/main/ui/debug/components_preview.scss diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 30668501f..57e1b7372 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -10,7 +10,6 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.debug.components-preview :as cm] [app.main.ui.debug.icons-preview :refer [icons-preview]] [app.main.ui.frame-preview :as frame-preview] [app.main.ui.icons :as i] @@ -169,12 +168,6 @@ :layout-name layout :key file-id}]]) - - :debug-components-preview - [:div.debug-preview - [:h1 "Components preview"] - [:& cm/components-preview]] - :frame-preview [:& frame-preview/frame-preview] diff --git a/frontend/src/app/main/ui/debug/components_preview.cljs b/frontend/src/app/main/ui/debug/components_preview.cljs deleted file mode 100644 index 9fd0788b7..000000000 --- a/frontend/src/app/main/ui/debug/components_preview.cljs +++ /dev/null @@ -1,270 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; License, v. 2.0. If a copy of the MPL was not distributed with this -;; file, You can obtain one at http://mozilla.org/MPL/2.0/. -;; -;; Copyright (c) KALEIDOS INC - -(ns app.main.ui.debug.components-preview - (:require-macros [app.main.style :as stl]) - (:require - [app.common.data :as d] - [app.main.data.users :as du] - [app.main.refs :as refs] - [app.main.store :as st] - [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] - [app.main.ui.components.search-bar :refer [search-bar]] - [app.main.ui.components.tab-container :refer [tab-container tab-element]] - [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.icons :as i] - [app.util.dom :as dom] - [rumext.v2 :as mf])) - -(mf/defc component-wrapper - {::mf/wrap-props false} - [props] - (let [children (unchecked-get props "children") - title (unchecked-get props "title")] - [:div {:class (stl/css :component)} - [:h4 {:class (stl/css :component-name)} title] - children])) - -(mf/defc components-preview - {::mf/wrap-props false} - [] - (let [profile (mf/deref refs/profile) - initial (mf/with-memo [profile] - (update profile :lang #(or % ""))) - initial-theme (:theme initial) - on-change (fn [event] - (let [theme (dom/event->value event) - data (assoc initial :theme theme)] - (st/emit! (du/update-profile data)))) - colors ["var(--color-background-primary)" - "var(--color-background-secondary)" - "var(--color-background-tertiary)" - "var(--color-background-quaternary)" - "var(--color-foreground-primary)" - "var(--color-foreground-secondary)" - "var(--color-accent-primary)" - "var(--color-accent-primary-muted)" - "var(--color-accent-secondary)" - "var(--color-accent-tertiary)"] - - ;; COMPONENTS FNs - state* (mf/use-state {:collapsed? true - :tab-selected :first - :input-value "" - :radio-selected "first"}) - state (deref state*) - - collapsed? (:collapsed? state) - toggle-collapsed - (mf/use-fn #(swap! state* update :collapsed? not)) - - tab-selected (:tab-selected state) - set-tab (mf/use-fn #(swap! state* assoc :tab-selected %)) - - input-value (:input-value state) - radio-selected (:radio-selected state) - - set-radio-selected (mf/use-fn #(swap! state* assoc :radio-selected %)) - - update-search - (mf/use-fn - (fn [value _event] - (swap! state* assoc :input-value value))) - - - on-btn-click (mf/use-fn #(prn "eyy"))] - - [:section.debug-components-preview - [:div {:class (stl/css :themes-row)} - [:h2 "Themes"] - [:select {:label "Select theme color" - :name :theme - :default "default" - :value initial-theme - :on-change on-change} - [:option {:label "Penpot Dark (default)" :value "default"}] - [:option {:label "Penpot Light" :value "light"}]] - [:div {:class (stl/css :wrapper)} - (for [color colors] - [:div {:class (stl/css :color-wrapper)} - [:span (d/name color)] - [:div {:key color - :style {:background color} - :class (stl/css :rect)}]])]] - - [:div {:class (stl/css :components-row)} - [:h2 {:class (stl/css :title)} "Components"] - [:div {:class (stl/css :components-wrapper)} - [:div {:class (stl/css :components-group)} - [:h3 "Titles"] - [:& component-wrapper - {:title "Title"} - [:& title-bar {:collapsable false - :title "Title"}]] - [:& component-wrapper - {:title "Title and action button"} - [:& title-bar {:collapsable false - :title "Title" - :on-btn-click on-btn-click - :btn-children i/add}]] - [:& component-wrapper - {:title "Collapsed title and action button"} - [:& title-bar {:collapsable true - :collapsed collapsed? - :on-collapsed toggle-collapsed - :title "Title" - :on-btn-click on-btn-click - :btn-children i/add}]] - [:& component-wrapper - {:title "Collapsed title and children"} - [:& title-bar {:collapsable true - :collapsed collapsed? - :on-collapsed toggle-collapsed - :title "Title"} - [:& tab-container {:on-change-tab set-tab - :selected tab-selected} - [:& tab-element {:id :first - :title "A tab"}] - [:& tab-element {:id :second - :title "B tab"}]]]]] - - [:div {:class (stl/css :components-group)} - [:h3 "Tabs component"] - [:& component-wrapper - {:title "2 tab component"} - [:& tab-container {:on-change-tab set-tab - :selected tab-selected} - [:& tab-element {:id :first :title "First tab"} - [:div "This is first tab content"]] - - [:& tab-element {:id :second :title "Second tab"} - [:div "This is second tab content"]]]] - [:& component-wrapper - {:title "3 tab component"} - [:& tab-container {:on-change-tab set-tab - :selected tab-selected} - [:& tab-element {:id :first :title "First tab"} - [:div "This is first tab content"]] - - [:& tab-element {:id :second - :title "Second tab"} - [:div "This is second tab content"]] - [:& tab-element {:id :third - :title "Third tab"} - [:div "This is third tab content"]]]]] - - [:div {:class (stl/css :components-group)} - [:h3 "Search bar"] - [:& component-wrapper - {:title "Search bar only"} - [:& search-bar {:on-change update-search - :value input-value - :placeholder "Test value"}]] - [:& component-wrapper - {:title "Search and button"} - [:& search-bar {:on-change update-search - :value input-value - :placeholder "Test value"} - [:button {:class (stl/css :button-secondary) - :on-click on-btn-click} - "X"]]]] - - [:div {:class (stl/css :components-group)} - [:h3 "Radio buttons"] - [:& component-wrapper - {:title "Two radio buttons (toggle)"} - [:& radio-buttons {:selected radio-selected - :on-change set-radio-selected - :name "listing-style"} - [:& radio-button {:icon i/view-as-list - :value "first" - :id :list}] - [:& radio-button {:icon i/flex-grid - :value "second" - :id :grid}]]] - [:& component-wrapper - {:title "Three radio buttons"} - [:& radio-buttons {:selected radio-selected - :on-change set-radio-selected - :name "listing-style"} - [:& radio-button {:icon i/view-as-list - :value "first" - :id :first}] - [:& radio-button {:icon i/flex-grid - :value "second" - :id :second}] - - [:& radio-button {:icon i/add - :value "third" - :id :third}]]] - - [:& component-wrapper - {:title "Four radio buttons"} - [:& radio-buttons {:selected radio-selected - :on-change set-radio-selected - :name "listing-style"} - [:& radio-button {:icon i/view-as-list - :value "first" - :id :first}] - [:& radio-button {:icon i/flex-grid - :value "second" - :id :second}] - - [:& radio-button {:icon i/add - :value "third" - :id :third}] - - [:& radio-button {:icon i/board - :value "forth" - :id :forth}]]]] - [:div {:class (stl/css :components-group)} - [:h3 "Buttons"] - [:& component-wrapper - {:title "Button primary"} - [:button {:class (stl/css :button-primary)} - "Primary"]] - [:& component-wrapper - {:title "Button primary with icon"} - [:button {:class (stl/css :button-primary)} - i/add]] - - [:& component-wrapper - {:title "Button secondary"} - [:button {:class (stl/css :button-secondary)} - "secondary"]] - [:& component-wrapper - {:title "Button secondary with icon"} - [:button {:class (stl/css :button-secondary)} - i/add]] - - [:& component-wrapper - {:title "Button tertiary"} - [:button {:class (stl/css :button-tertiary)} - "tertiary"]] - [:& component-wrapper - {:title "Button tertiary with icon"} - [:button {:class (stl/css :button-tertiary)} - i/add]]] - [:div {:class (stl/css :components-group)} - [:h3 "Inputs"] - [:& component-wrapper - {:title "Only input"} - [:div {:class (stl/css :input-wrapper)} - [:input {:class (stl/css :basic-input) - :placeholder "----"}]]] - [:& component-wrapper - {:title "Input with label"} - [:div {:class (stl/css :input-wrapper)} - [:span {:class (stl/css :input-label)} "label"] - [:input {:class (stl/css :basic-input) - :placeholder "----"}]]] - [:& component-wrapper - {:title "Input with icon"} - [:div {:class (stl/css :input-wrapper)} - [:span {:class (stl/css :input-label)} - i/add] - [:input {:class (stl/css :basic-input) - :placeholder "----"}]]]]]]])) diff --git a/frontend/src/app/main/ui/debug/components_preview.scss b/frontend/src/app/main/ui/debug/components_preview.scss deleted file mode 100644 index 8a087c9ee..000000000 --- a/frontend/src/app/main/ui/debug/components_preview.scss +++ /dev/null @@ -1,99 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS INC - -@import "refactor/common-refactor.scss"; - -.themes-row { - width: 100%; - padding: $s-20; - color: var(--color-foreground-primary); - background: var(--color-background-secondary); - .wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: $s-40; - background-color: var(--color-background-primary); - width: 100%; - padding: $s-20; - .rect { - display: flex; - justify-content: center; - align-items: center; - border: $s-1 solid var(--color-foreground-primary); - padding: $s-20; - height: $s-96; - min-width: $s-152; - } - } -} -.color-wrapper { - display: grid; - grid-template-rows: auto $s-96; -} - -.components-row { - color: var(--color-foreground-primary); - background: var(--color-background-secondary); - height: 100%; - padding: 0 $s-20; - .title { - padding: $s-20; - } - .components-wrapper { - padding: $s-20; - display: flex; - flex-wrap: wrap; - gap: $s-20; - .components-group { - @include flexCenter; - justify-content: flex-start; - flex-direction: column; - border-radius: $s-8; - h3 { - @include bodySmallTypography; - font-size: $fs-24; - width: 100%; - } - .component { - display: flex; - flex-direction: column; - gap: $s-8; - width: $s-240; - max-height: $s-80; - margin-bottom: $s-16; - .component-name { - @include uppercaseTitleTipography; - font-weight: bold; - } - } - } - .button-primary { - @extend .button-primary; - height: $s-32; - svg { - @extend .button-icon; - } - } - .button-secondary { - @extend .button-secondary; - height: $s-32; - svg { - @extend .button-icon; - } - } - .button-tertiary { - @extend .button-tertiary; - height: $s-32; - svg { - @extend .button-icon; - } - } - .input-wrapper { - @extend .input-element; - @include bodySmallTypography; - } - } -} diff --git a/frontend/src/app/main/ui/routes.cljs b/frontend/src/app/main/ui/routes.cljs index eeb5f156c..ff943a0f7 100644 --- a/frontend/src/app/main/ui/routes.cljs +++ b/frontend/src/app/main/ui/routes.cljs @@ -60,8 +60,6 @@ (when *assert* ["/debug/icons-preview" :debug-icons-preview]) - ["/debug/components-preview" :debug-components-preview] - ;; Used for export ["/render-sprite/:file-id" :render-sprite]