mirror of
https://github.com/penpot/penpot.git
synced 2026-05-25 01:43:40 +00:00
250 lines
9.4 KiB
Clojure
250 lines
9.4 KiB
Clojure
;; 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 [:bg-primary
|
|
:bg-secondary
|
|
:bg-tertiary
|
|
:bg-cuaternary
|
|
:fg-primary
|
|
:fg-secondary
|
|
:acc
|
|
:acc-muted
|
|
:acc-secondary
|
|
:acc-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)}
|
|
(let [css (stl/styles)]
|
|
(for [color colors]
|
|
[:div {:key color
|
|
:class (dom/classnames (get css color) true
|
|
(get css :rect) true)}
|
|
(d/name color)]))]]
|
|
|
|
[: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-refactor}]]
|
|
[:& 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-refactor}]]
|
|
[:& 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 :test-button)
|
|
: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-refactor
|
|
:value "first"
|
|
:id :list}]
|
|
[:& radio-button {:icon i/flex-grid-refactor
|
|
: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-refactor
|
|
:value "first"
|
|
:id :first}]
|
|
[:& radio-button {:icon i/flex-grid-refactor
|
|
:value "second"
|
|
:id :second}]
|
|
|
|
[:& radio-button {:icon i/add-refactor
|
|
: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-refactor
|
|
:value "first"
|
|
:id :first}]
|
|
[:& radio-button {:icon i/flex-grid-refactor
|
|
:value "second"
|
|
:id :second}]
|
|
|
|
[:& radio-button {:icon i/add-refactor
|
|
:value "third"
|
|
:id :third}]
|
|
|
|
[:& radio-button {:icon i/board-refactor
|
|
: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-refactor]]
|
|
|
|
[:& 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-refactor]]
|
|
|
|
[:& 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-refactor]]]]]]))
|