From 7573ae709ee1a0b92701956c5dc2cfeecdfd3e60 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Tue, 1 Nov 2022 10:26:52 +0200
Subject: [PATCH] styles: run prettier

---
 .../ContextBar/contextBarActionFactory.tsx    | 19 +++++++-
 .../src/components/inputs/ColorInput.tsx      | 47 ++++++++++---------
 tldraw/apps/tldraw-logseq/src/lib/color.ts    |  2 +-
 .../tldraw-logseq/src/lib/shapes/BoxShape.tsx |  4 +-
 .../src/lib/shapes/EllipseShape.tsx           |  8 ++--
 .../src/lib/shapes/HighlighterShape.tsx       |  2 +-
 .../src/lib/shapes/LineShape.tsx              |  8 ++--
 .../src/lib/shapes/LogseqPortalShape.tsx      | 23 +++++++--
 .../tldraw-logseq/src/lib/shapes/PenShape.tsx |  4 +-
 .../src/lib/shapes/PencilShape.tsx            |  4 +-
 .../src/lib/shapes/PolygonShape.tsx           |  8 ++--
 .../src/lib/shapes/TextShape.tsx              |  4 +-
 12 files changed, 83 insertions(+), 50 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index 4cde1ee84f..4f23b6b2ac 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -57,7 +57,14 @@ const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 type ShapeType = Shape['props']['type']
 
 export const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
-  'logseq-portal': ['Swatch', 'Edit', 'LogseqPortalViewMode', 'ScaleLevel', 'OpenPage', 'AutoResizing'],
+  'logseq-portal': [
+    'Swatch',
+    'Edit',
+    'LogseqPortalViewMode',
+    'ScaleLevel',
+    'OpenPage',
+    'AutoResizing',
+  ],
   youtube: ['YoutubeLink'],
   iframe: ['IFrameSource'],
   box: ['Swatch', 'NoFill', 'StrokeType'],
@@ -346,7 +353,15 @@ const SwatchAction = observer(() => {
   }, [])
 
   const color = shapes[0].props.noFill ? shapes[0].props.stroke : shapes[0].props.fill
-  return <ColorInput title="Color Picker" color={color} opacity={shapes[0].props.opacity} setOpacity={handleSetOpacity} setColor={handleSetColor} />
+  return (
+    <ColorInput
+      title="Color Picker"
+      color={color}
+      opacity={shapes[0].props.opacity}
+      setOpacity={handleSetOpacity}
+      setColor={handleSetColor}
+    />
+  )
 })
 
 const StrokeTypeAction = observer(() => {
diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
index 87d178253d..fbfa61204f 100644
--- a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import * as Popover from '@radix-ui/react-popover';
-import * as Slider from '@radix-ui/react-slider';
+import * as Popover from '@radix-ui/react-popover'
+import * as Slider from '@radix-ui/react-slider'
 import { TablerIcon } from '../icons'
 import { Color } from '@tldraw/core'
 interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
@@ -14,41 +14,45 @@ export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: Co
   const ref = React.useRef<HTMLDivElement>(null)
 
   function renderColor(color: string) {
-    return color ?
-      <div className="tl-color-bg" style={{backgroundColor: color}}>
+    return color ? (
+      <div className="tl-color-bg" style={{ backgroundColor: color }}>
         <div className={`w-full h-full bg-${color}-500`}></div>
-      </div> :
-      <div className={"tl-color-bg"}><TablerIcon name="color-swatch" /></div>
+      </div>
+    ) : (
+      <div className={'tl-color-bg'}>
+        <TablerIcon name="color-swatch" />
+      </div>
+    )
   }
 
   return (
     <Popover.Root>
-
       <Popover.Trigger>
-        <button className="tl-color-drip mx-1">
-          {renderColor(color)}
-        </button>
+        <button className="tl-color-drip mx-1">{renderColor(color)}</button>
       </Popover.Trigger>
 
       <Popover.Portal>
-        <Popover.Content
-          className="tl-popover-content"
-          side="top"
-          sideOffset={15}
-        >
-          <div className={"tl-color-palette"}>
-            {Object.values(Color).map(value =>
+        <Popover.Content className="tl-popover-content" side="top" sideOffset={15}>
+          <div className={'tl-color-palette'}>
+            {Object.values(Color).map(value => (
               <button
-                className={`tl-color-drip m-1${value === color ? " active" : ""}`}
-                onClick={()=>setColor(value)}
+                className={`tl-color-drip m-1${value === color ? ' active' : ''}`}
+                onClick={() => setColor(value)}
               >
                 {renderColor(value)}
               </button>
-            )}
+            ))}
           </div>
 
           <div className="m-1">
-            <Slider.Root defaultValue={[opacity]} onValueCommit={(value)=>setOpacity(value[0])} max={1} step={0.1} aria-label="Opacity" className="tl-slider-root">
+            <Slider.Root
+              defaultValue={[opacity]}
+              onValueCommit={value => setOpacity(value[0])}
+              max={1}
+              step={0.1}
+              aria-label="Opacity"
+              className="tl-slider-root"
+            >
               <Slider.Track className="tl-slider-track">
                 <Slider.Range className="tl-slider-range" />
               </Slider.Track>
@@ -57,7 +61,6 @@ export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: Co
           </div>
 
           <Popover.Arrow className="tl-popover-arrow" />
-
         </Popover.Content>
       </Popover.Portal>
     </Popover.Root>
diff --git a/tldraw/apps/tldraw-logseq/src/lib/color.ts b/tldraw/apps/tldraw-logseq/src/lib/color.ts
index cde6a32e23..04d76e8536 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/color.ts
+++ b/tldraw/apps/tldraw-logseq/src/lib/color.ts
@@ -16,7 +16,7 @@ function getMeasurementDiv() {
 
 export function getComputedColor(color: string, type: string): string {
   if (Object.values(Color).includes(color)) {
-    return `var(--ls-wb-${type}-color-${color ? color : "default"})`;
+    return `var(--ls-wb-${type}-color-${color ? color : 'default'})`
   }
 
   return color
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
index bbb5d83880..1d1a4bfe7a 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
@@ -64,9 +64,9 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
           width={Math.max(0.01, w - strokeWidth)}
           height={Math.max(0.01, h - strokeWidth)}
           strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
           strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
         />
       </SVGContainer>
     )
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
index de1dc14640..33c1a99b89 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
@@ -52,9 +52,9 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
           rx={Math.max(0.01, (w - strokeWidth) / 2)}
           ry={Math.max(0.01, (h - strokeWidth) / 2)}
           strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
           strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
         />
       </SVGContainer>
     )
@@ -106,9 +106,9 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
           rx={Math.max(0.01, (w - strokeWidth) / 2)}
           ry={Math.max(0.01, (h - strokeWidth) / 2)}
           strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
           strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
         />
       </g>
     )
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
index 4cc5a6e48c..7e488cf706 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
@@ -49,7 +49,7 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
         <path
           d={pointsPath}
           strokeWidth={strokeWidth * 16}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
           fill="none"
           pointerEvents="all"
           strokeLinejoin="round"
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
index f32512406a..0bff983fe0 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
@@ -77,7 +77,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
         <TextLabel
           font={font}
           text={label}
-          color={getComputedColor(stroke, "text")}
+          color={getComputedColor(stroke, 'text')}
           offsetX={offset[0]}
           offsetY={offset[1]}
           scale={scale}
@@ -162,7 +162,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       <>
         <Arrow
           style={{
-            stroke: getComputedColor(stroke, "stroke"),
+            stroke: getComputedColor(stroke, 'stroke'),
             fill,
             strokeWidth,
             strokeType,
@@ -182,8 +182,8 @@ export class LineShape extends TLLineShape<LineShapeProps> {
               fontSize={20}
               transform={`translate(${midPoint[0]}, ${midPoint[1]})`}
               textAnchor="middle"
-              fill={getComputedColor(stroke, "text")}
-              stroke={getComputedColor(stroke, "text")}
+              fill={getComputedColor(stroke, 'text')}
+              stroke={getComputedColor(stroke, 'text')}
             >
               {label}
             </text>
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
index 15cc4c958d..27e0bb5d1d 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
@@ -73,10 +73,25 @@ const LogseqTypeTag = ({
 
 const LogseqPortalShapeHeader = observer(
   ({ type, fill, children }: { type: 'P' | 'B'; fill: string; children: React.ReactNode }) => {
-    const bgColor = getComputedColor(fill, "background");
+    const bgColor = getComputedColor(fill, 'background')
 
-    return <div className={`tl-logseq-portal-header tl-logseq-portal-header-${type === "P" ? "page" : "block"}`}
-      style={{background: type === "P" ? bgColor : `linear-gradient(0deg, var(--ls-highlight-color-${fill ? fill : "default"}), ${bgColor}`}}>{children}</div>
+    return (
+      <div
+        className={`tl-logseq-portal-header tl-logseq-portal-header-${
+          type === 'P' ? 'page' : 'block'
+        }`}
+        style={{
+          background:
+            type === 'P'
+              ? bgColor
+              : `linear-gradient(0deg, var(--ls-highlight-color-${
+                  fill ? fill : 'default'
+                }), ${bgColor}`,
+        }}
+      >
+        {children}
+      </div>
+    )
   }
 )
 
@@ -711,7 +726,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
         ref={cpRefContainer}
         className="tl-logseq-cp-container"
         style={{
-          background: fill ? `var(--ls-highlight-color-${fill})` : "transparent",
+          background: fill ? `var(--ls-highlight-color-${fill})` : 'transparent',
           overflow: this.props.isAutoResizing ? 'visible' : 'auto',
         }}
       >
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx
index bf0f86428d..adebd84e6f 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx
@@ -57,8 +57,8 @@ export class PenShape extends TLDrawShape<PenShapeProps> {
         <path
           d={pointsPath}
           strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
-          fill={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
+          fill={getComputedColor(stroke, 'stroke')}
           pointerEvents="all"
         />
       </SVGContainer>
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
index a6d86adc62..29cc9aaa0d 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
@@ -132,8 +132,8 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
         strokeWidth={strokeWidth / 2}
         strokeLinejoin="round"
         strokeLinecap="round"
-        stroke={getComputedColor(stroke, "stroke")}
-        fill={getComputedColor(stroke, "stroke")}
+        stroke={getComputedColor(stroke, 'stroke')}
+        fill={getComputedColor(stroke, 'stroke')}
         strokeDasharray={strokeType === 'dashed' ? '12 4' : undefined}
       />
     )
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
index 8a303f4cf8..ab9dc1d734 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
@@ -44,8 +44,8 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
           />
           <polygon
             points={path}
-            stroke={getComputedColor(stroke, "stroke")}
-            fill={noFill ? 'none' : getComputedColor(fill, "background")}
+            stroke={getComputedColor(stroke, 'stroke')}
+            fill={noFill ? 'none' : getComputedColor(fill, 'background')}
             strokeWidth={strokeWidth}
             rx={2}
             ry={2}
@@ -92,8 +92,8 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
         <polygon className={!noFill ? 'tl-hitarea-fill' : 'tl-hitarea-stroke'} points={path} />
         <polygon
           points={path}
-          stroke={getComputedColor(stroke, "stroke")}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          stroke={getComputedColor(stroke, 'stroke')}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
           strokeWidth={strokeWidth}
           rx={2}
           ry={2}
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx
index cdee5cf665..e21629998f 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx
@@ -193,7 +193,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
             fontWeight,
             padding,
             lineHeight,
-            color: getComputedColor(stroke, "text"),
+            color: getComputedColor(stroke, 'text'),
           }}
         >
           {isEditing ? (
@@ -320,7 +320,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
       <foreignObject width={bounds.width} height={bounds.height}>
         <div
           style={{
-            color: getComputedColor(stroke, "text"),
+            color: getComputedColor(stroke, 'text'),
             fontSize,
             fontFamily,
           }}