mirror of
https://github.com/penpot/penpot.git
synced 2025-06-06 20:21:42 +02:00
♻️ Remove components preview
This commit is contained in:
Eva Marco
parent
d1d3b4353a
commit
129b7afda9
4 changed files with 0 additions and 378 deletions
|
|
@ -10,7 +10,6 @@
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.context :as ctx]
|
[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.debug.icons-preview :refer [icons-preview]]
|
||||||
[app.main.ui.frame-preview :as frame-preview]
|
[app.main.ui.frame-preview :as frame-preview]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
|
|
@ -169,12 +168,6 @@
|
||||||
:layout-name layout
|
:layout-name layout
|
||||||
:key file-id}]])
|
:key file-id}]])
|
||||||
|
|
||||||
|
|
||||||
:debug-components-preview
|
|
||||||
[:div.debug-preview
|
|
||||||
[:h1 "Components preview"]
|
|
||||||
[:& cm/components-preview]]
|
|
||||||
|
|
||||||
:frame-preview
|
:frame-preview
|
||||||
[:& frame-preview/frame-preview]
|
[:& frame-preview/frame-preview]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 "----"}]]]]]]]))
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -60,8 +60,6 @@
|
||||||
(when *assert*
|
(when *assert*
|
||||||
["/debug/icons-preview" :debug-icons-preview])
|
["/debug/icons-preview" :debug-icons-preview])
|
||||||
|
|
||||||
["/debug/components-preview" :debug-components-preview]
|
|
||||||
|
|
||||||
;; Used for export
|
;; Used for export
|
||||||
["/render-sprite/:file-id" :render-sprite]
|
["/render-sprite/:file-id" :render-sprite]
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue