From 19c4e28d58df77593cb129f307ecd64d555e70af Mon Sep 17 00:00:00 2001 From: codemaster115 Date: Tue, 19 Sep 2023 08:46:41 -0500 Subject: [PATCH] chore: refactor code snippet component --- src/quo2/components/code/code/style.cljs | 89 -------------- src/quo2/components/code/common/style.cljs | 1 - src/quo2/components/code/common/view.cljs | 2 +- src/quo2/components/code/snippet.cljs | 110 ------------------ src/quo2/components/code/snippet/view.cljs | 15 +++ .../code/snippet_preview/style.cljs | 39 ------- .../components/code/snippet_preview/view.cljs | 94 ++------------- src/quo2/core.cljs | 4 +- 8 files changed, 27 insertions(+), 327 deletions(-) delete mode 100644 src/quo2/components/code/code/style.cljs delete mode 100644 src/quo2/components/code/snippet.cljs create mode 100644 src/quo2/components/code/snippet/view.cljs delete mode 100644 src/quo2/components/code/snippet_preview/style.cljs diff --git a/src/quo2/components/code/code/style.cljs b/src/quo2/components/code/code/style.cljs deleted file mode 100644 index 95952bd07045..000000000000 --- a/src/quo2/components/code/code/style.cljs +++ /dev/null @@ -1,89 +0,0 @@ -(ns quo2.components.code.code.style - (:require [quo2.foundations.colors :as colors])) - -;; Example themes: -;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs -(defn theme - [theme-key] - (case theme-key - :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60) - :hljs-title (colors/custom-color-by-theme :sky 50 60) - :hljs-keyword (colors/custom-color-by-theme :green 50 60) - :hljs-string (colors/custom-color-by-theme :turquoise 50 60) - :hljs-literal (colors/custom-color-by-theme :turquoise 50 60) - :hljs-number (colors/custom-color-by-theme :turquoise 50 60) - :hljs-symbol (colors/custom-color-by-theme :orange 50 60) - :hljs-builtin-name (colors/custom-color-by-theme :pink 50 60) - :line-number colors/neutral-40 - nil)) - -(defn text-style - [class-names] - (let [text-color (->> class-names - (map keyword) - (some (fn [class-name] - (when-let [text-color (theme class-name)] - text-color))))] - (cond-> {:flex-shrink 1 - :line-height 18} - text-color (assoc :color text-color)))) - -(defn border-color - [] - (colors/theme-colors colors/neutral-20 colors/neutral-80)) - -(defn container - [] - {:overflow :hidden - :padding 8 - :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40) - :border-color (border-color) - :border-width 1 - :border-radius 16}) - -(def gradient-container - {:position :absolute - :bottom 0 - :left 0 - :right 0 - :z-index 1}) - -(def gradient {:height 48}) - -(defn line-number-container - [line-number-width] - {:position :absolute - :bottom 0 - :top 0 - :left 0 - :width (+ line-number-width 8 7) - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)}) - -(defn divider - [line-number-width] - {:position :absolute - :bottom 0 - :top 0 - :left (+ line-number-width 7 7) - :width 1 - :z-index 2 - :background-color (border-color)}) - -(def line {:flex-direction :row}) - -(defn line-number - [width] - {:margin-right 20 ; 8+12 margin - :width width}) - -(def copy-button - {:position :absolute - :bottom 8 - :right 8 - :z-index 1}) - -(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80)) - -(defn button-background-color - [] - (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5)) diff --git a/src/quo2/components/code/common/style.cljs b/src/quo2/components/code/common/style.cljs index 7e5ac0856069..0f623e717638 100644 --- a/src/quo2/components/code/common/style.cljs +++ b/src/quo2/components/code/common/style.cljs @@ -1,7 +1,6 @@ (ns quo2.components.code.common.style (:require [quo2.foundations.colors :as colors])) - ;; Example themes: ;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs (defn theme diff --git a/src/quo2/components/code/common/view.cljs b/src/quo2/components/code/common/view.cljs index bca2a3ac7bf9..8007ac950a17 100644 --- a/src/quo2/components/code/common/view.cljs +++ b/src/quo2/components/code/common/view.cljs @@ -104,7 +104,7 @@ :on-press on-copy-press} :main-icons/copy]]])])) -(defn snippet +(defn view [{:keys [language max-lines on-copy-press preview?]} children] [highlighter/highlighter {:language language diff --git a/src/quo2/components/code/snippet.cljs b/src/quo2/components/code/snippet.cljs deleted file mode 100644 index 4ebdbbf9e0ee..000000000000 --- a/src/quo2/components/code/snippet.cljs +++ /dev/null @@ -1,110 +0,0 @@ -(ns quo2.components.code.snippet - (:require [cljs-bean.core :as bean] - [clojure.string :as string] - [quo2.components.buttons.button.view :as button] - [quo2.components.code.code.style :as style] - [quo2.components.markdown.text :as text] - [react-native.core :as rn] - [react-native.linear-gradient :as linear-gradient] - [react-native.syntax-highlighter :as highlighter] - [reagent.core :as reagent])) - -(defn- render-nodes - [nodes] - (map (fn [{:keys [children value last-line?] :as node}] - (if children - (into [text/text - (cond-> {:weight :code - :size :paragraph-2 - :style (style/text-style (get-in node [:properties :className]))} - last-line? (assoc :number-of-lines 1))] - (render-nodes children)) - ;; Remove newlines as we already render each line separately. - (string/trim-newline value))) - nodes)) - -(defn- line - [{:keys [line-number line-number-width]} children] - [rn/view {:style style/line} - [rn/view {:style (style/line-number line-number-width)} - [text/text - {:style (style/text-style ["line-number"]) - :weight :code - :size :paragraph-2} - line-number]] - children]) - -(defn- code-block - [{:keys [rows line-number-width]}] - [rn/view - (->> rows - (render-nodes) - (map-indexed (fn [idx row-content] - [line - {:line-number (inc idx) - :line-number-width line-number-width} - row-content])) - (into [:<>]))]) - -(defn- mask-view - [{:keys [apply-mask?]} child] - (if apply-mask? - [:<> - [rn/view {:style style/gradient-container} - [linear-gradient/linear-gradient - {:style style/gradient - :colors [:transparent (style/gradient-color)]} - [rn/view {:style style/gradient}]]] - child] - child)) - -(defn- calc-line-number-width - [font-scale rows-to-show] - (let [max-line-digits (-> rows-to-show str count)] - (if (= 1 max-line-digits) - 18 ;; ~ 9 is char width, 18 is width used in Figma. - (* 9 max-line-digits font-scale)))) - -(defn- f-native-renderer - [{:keys [rows max-lines on-copy-press] - :or {max-lines ##Inf}}] - (let [font-scale (:font-scale (rn/get-window)) - total-rows (count rows) - number-rows-to-show (min (count rows) max-lines) - line-number-width (calc-line-number-width font-scale number-rows-to-show) - truncated? (< number-rows-to-show total-rows) - rows-to-show-coll (if truncated? - (as-> rows $ - (update $ number-rows-to-show assoc :last-line? true) - (take (inc number-rows-to-show) $)) - rows)] - [rn/view {:style (style/container)} - [rn/view {:style (style/line-number-container line-number-width)}] - [rn/view {:style (style/divider line-number-width)}] - [mask-view {:apply-mask? truncated?} - [code-block - {:rows rows-to-show-coll - :line-number-width line-number-width}]] - [rn/view {:style style/copy-button} - [button/button - {:icon-only? true - :type :grey - :background :blur - :size 24 - :on-press on-copy-press} - :main-icons/copy]]])) - -(defn snippet - [{:keys [language max-lines on-copy-press]} children] - [highlighter/highlighter - {:language language - :renderer (fn [^js/Object props] - (reagent/as-element - [:f> f-native-renderer - {:rows (-> props .-rows bean/->clj) - :on-copy-press #(when on-copy-press (on-copy-press children)) - :max-lines max-lines}])) - :show-line-numbers false - :style {} - :custom-style {:background-color nil}} - children]) diff --git a/src/quo2/components/code/snippet/view.cljs b/src/quo2/components/code/snippet/view.cljs new file mode 100644 index 000000000000..b503b2e57c47 --- /dev/null +++ b/src/quo2/components/code/snippet/view.cljs @@ -0,0 +1,15 @@ +(ns quo2.components.code.snippet.view + (:require [quo2.theme :as theme] + [quo2.components.code.common.view :as code-common])) + +(defn- view-internal + [_] + (fn [{:keys [language max-lines on-copy-press]} children] + [code-common/view + {:language language + :max-lines max-lines + :on-copy-press on-copy-press + :preview? false} + children])) + +(def view (theme/with-theme view-internal)) diff --git a/src/quo2/components/code/snippet_preview/style.cljs b/src/quo2/components/code/snippet_preview/style.cljs deleted file mode 100644 index 883117076c11..000000000000 --- a/src/quo2/components/code/snippet_preview/style.cljs +++ /dev/null @@ -1,39 +0,0 @@ -(ns quo2.components.code.snippet-preview.style - (:require [quo2.foundations.colors :as colors] - [quo2.components.code.code.style :as code-style])) - -(defn container - [theme] - {:overflow :hidden - :width 108 - :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) - :border-radius 8}) - -(defn line-number-container - [theme] - {:position :absolute - :bottom 0 - :top 0 - :left 0 - :width 20 - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme)}) - -(defn text-style - [class-names] - (let [text-color (->> class-names - (map keyword) - (some (fn [class-name] - (when-let [text-color (code-style/theme class-name)] - text-color))))] - (cond-> {:flex-shrink 1 - :line-height 18} - text-color (assoc :color text-color)))) - -(def line {:flex 1 :flex-direction :row}) - -(defn line-number - [width] - {:width width - :align-items :center - :justify-content :center}) - diff --git a/src/quo2/components/code/snippet_preview/view.cljs b/src/quo2/components/code/snippet_preview/view.cljs index 1b04073c2518..95e44626b971 100644 --- a/src/quo2/components/code/snippet_preview/view.cljs +++ b/src/quo2/components/code/snippet_preview/view.cljs @@ -1,86 +1,10 @@ (ns quo2.components.code.snippet-preview.view - (:require [react-native.core :as rn] - [react-native.syntax-highlighter :as highlighter] - [reagent.core :as reagent] - [cljs-bean.core :as bean] - [quo2.components.code.snippet-preview.style :as style] - [quo2.theme :as theme] - [quo2.components.markdown.text :as text] - [clojure.string :as string])) - -(defn- render-nodes - [nodes] - (map (fn [{:keys [children value last-line?] :as node}] - (println last-line? value) - (if children - (into [text/text - (cond-> {:weight :code - :size :paragraph-2 - :style (style/text-style (get-in node [:properties :className]))} - last-line? (assoc :number-of-lines 1))] - (render-nodes children)) - ;; Remove newlines as we already render each line separately. - (string/trim-newline value))) - nodes)) - -(defn- line - [{:keys [line-number line-number-width]} children] - [rn/view {:style style/line} - [rn/view {:style (style/line-number line-number-width)} - [text/text - {:style (style/text-style ["line-number"]) - :weight :code - :size :paragraph-2} - line-number]] - [rn/view - {:style {:flex 1 - :padding-horizontal 8 - :padding-vertical 3}} - children]]) - -(defn- code-block - [{:keys [rows line-number-width]}] - [rn/view - (->> rows - (render-nodes) - (map-indexed (fn [idx row-content] - [line - {:line-number (inc idx) - :line-number-width line-number-width} - row-content])) - (into [:<>]))]) - -(defn- f-native-renderer - [{:keys [rows max-lines theme] - :or {max-lines ##Inf}}] - (let [total-rows (count rows) - number-rows-to-show (min (count rows) max-lines) - truncated? (< number-rows-to-show total-rows) - rows-to-show-coll (if truncated? - (as-> rows $ - (update $ number-rows-to-show assoc :last-line? true) - (take (inc number-rows-to-show) $)) - rows)] - [rn/view {:style (style/container theme)} - [rn/view {:style (style/line-number-container theme)}] - [code-block - {:rows rows-to-show-coll - :line-number-width 20}]])) - -(defn- view-internal - [_] - (fn [{:keys [language theme]} children] - [highlighter/highlighter - {:language language - :renderer (fn [^js/Object props] - (reagent/as-element - [:f> f-native-renderer - {:rows (-> props .-rows bean/->clj) - :max-lines 0 - :theme theme}])) - :show-line-numbers false - :style {} - :custom-style {:background-color nil}} - children])) - -(def view (theme/with-theme view-internal)) + (:require [quo2.components.code.common.view :as code-common])) + +(defn view + [{:keys [language]} children] + [code-common/view + {:preview? true + :language language + :max-lines 0} + children]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 67afbed181ed..569ca529c1ce 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -19,7 +19,7 @@ quo2.components.calendar.calendar.view quo2.components.calendar.calendar-day.view quo2.components.calendar.calendar-year.view - quo2.components.code.snippet + quo2.components.code.snippet.view quo2.components.code.snippet-preview.view quo2.components.colors.color-picker.view quo2.components.common.notification-dot.view @@ -165,7 +165,7 @@ (def calendar-year quo2.components.calendar.calendar-year.view/view) ;;;; Code -(def snippet quo2.components.code.snippet/snippet) +(def snippet quo2.components.code.snippet.view/view) (def snippet-preview quo2.components.code.snippet-preview.view/view) ;;;; Cards