fix: batch of small bugs (#28)

QuiiBz · Dec 30, 2023 · b7f1245 · b7f1245
1 parent f5debba
commit b7f1245
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 34 deletions.
diff --git a/apps/dashboard/src/components/CustomLink.tsx b/apps/dashboard/src/components/CustomLink.tsx
@@ -10,7 +10,7 @@ interface CustomLinkProps {
 
 export function CustomLink({ icon, iconPosition = 'left', href, children }: CustomLinkProps) {
   return (
-    <Link className="flex gap-2 items-center px-3 py-1 rounded-full text-gray-600 hover:text-gray-900 hover:bg-gray-50" href={href}>
+    <Link className="flex gap-2 items-center px-3 py-1 rounded-full text-gray-600 hover:text-gray-900 hover:bg-gray-50 select-none" href={href}>
       {icon && iconPosition === 'left' ? icon : null}
       {children}
       {icon && iconPosition === 'right' ? icon : null}

diff --git a/apps/dashboard/src/components/EditorToolbar.tsx b/apps/dashboard/src/components/EditorToolbar.tsx
@@ -127,7 +127,7 @@ export function EditorToolbar() {
         </ToolbarButton>
         <div className="w-[1px] h-4 bg-gray-100" />
         {/* Set absolute width to make sure it doesn't change the layout */}
-        <span className="text-xs w-[46px] text-center text-gray-600">{zoom}%</span>
+        <span className="text-xs w-[46px] text-center text-gray-600 select-none">{zoom}%</span>
         <div className="w-[1px] h-4 bg-gray-100" />
         <ToolbarButton onClick={() => { zoomIn() }}>
           <ZoomInIcon />

diff --git a/apps/dashboard/src/components/LeftPanel/ElementRow.tsx b/apps/dashboard/src/components/LeftPanel/ElementRow.tsx
@@ -32,9 +32,9 @@ export function ElementRow({ element }: ElementRowProps) {
   };
 
   return (
-    <div className="flex justify-between items-center pb-2 cursor-auto" ref={setNodeRef} style={style} {...attributes} {...listeners}>
+    <div className="flex justify-between items-center cursor-auto group" ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <button
-        className={`flex gap-2 select-none text-gray-600 hover:text-gray-900 w-full ${selectedElementId === element.id ? '!text-blue-500' : ''} ${!element.visible ? '!text-gray-300' : ''}`}
+        className={`flex gap-2 select-none py-1 text-gray-600 hover:text-gray-900 w-full ${selectedElementId === element.id ? '!text-blue-500' : ''} ${!element.visible ? '!text-gray-300' : ''}`}
         onClick={() => { setSelectedElementId(element.id); }}
         type="button"
       >
@@ -61,7 +61,7 @@ export function ElementRow({ element }: ElementRowProps) {
         {element.name}
       </button>
       <button
-        className="text-gray-600 hover:text-gray-900"
+        className={`text-gray-600 hover:text-gray-900 hidden group-hover:block ${!element.visible ? '!block' : ''}`}
         onClick={() => {
           updateElement({
             ...element,

diff --git a/apps/dashboard/src/components/LeftPanel/ElementsSection.tsx b/apps/dashboard/src/components/LeftPanel/ElementsSection.tsx
@@ -39,7 +39,7 @@ export function ElementsSection() {
   return (
     <>
       <p className="text-xs text-gray-600">Elements</p>
-      <div className="flex flex-col-reverse w-full">
+      <div className="flex flex-col-reverse w-full max-h-[calc(100vh-420px)] overflow-y-scroll no-scrollbar">
         <DndContext collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis]} onDragEnd={handleDragEnd} onDragOver={handleDragEnd} sensors={sensors}>
           <SortableContext items={elements} strategy={verticalListSortingStrategy}>
             {elements.map(element => (

diff --git a/apps/dashboard/src/components/LeftPanel/index.tsx b/apps/dashboard/src/components/LeftPanel/index.tsx
@@ -5,14 +5,17 @@ import { SplashSection } from "./SplashSection";
 
 export function LeftPanel() {
   return (
-    <div className="flex flex-col items-start gap-4 p-4">
-      <SplashSection />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <ElementsSection />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <ModificationSection />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <ExportSection />
+    <div className="flex flex-col justify-between p-4 h-full">
+      <div className="flex flex-col items-start gap-4">
+        <SplashSection />
+        <div className="h-[1px] w-full bg-gray-100" />
+        <ElementsSection />
+      </div>
+      <div className="flex flex-col items-start gap-4">
+        <ModificationSection />
+        <div className="h-[1px] w-full bg-gray-100" />
+        <ExportSection />
+      </div>
     </div >
   )
 }
diff --git a/apps/dashboard/src/components/OgEditor.tsx b/apps/dashboard/src/components/OgEditor.tsx
@@ -196,7 +196,7 @@ export function OgEditor({ imageId, width, height }: OgProviderProps) {
   return (
     <OgContext.Provider value={value}>
       <div className="w-screen h-screen flex flex-row justify-between items-center bg-gray-50 overflow-hidden">
-        <div className="w-[300px] min-w-[300px] h-screen flex flex-col border-r border-gray-100 shadow-lg shadow-gray-100 bg-white z-10">
+        <div className="w-[300px] min-w-[300px] h-screen border-r border-gray-100 shadow-lg shadow-gray-100 bg-white z-10">
           <LeftPanel />
         </div>
         <div className="flex flex-col items-center gap-4 fixed transform left-1/2 -translate-x-1/2">

diff --git a/apps/dashboard/src/components/RightPanel/index.tsx b/apps/dashboard/src/components/RightPanel/index.tsx
@@ -20,20 +20,24 @@ export function RightPanel() {
   }
 
   return (
-    <div className="flex flex-col items-start gap-4 p-4">
-      <SizePositionSection selectedElement={selectedElementData} />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <FontSection selectedElement={selectedElementData} />
-      <BackgroundSection selectedElement={selectedElementData} />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <BorderSection selectedElement={selectedElementData} />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <ShadowSection selectedElement={selectedElementData} />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <MiscellanousSection selectedElement={selectedElementData} />
-      <div className="h-[1px] w-full bg-gray-100" />
-      <ModificationsSection selectedElement={selectedElementData} />
-    </div >
+    <div className="flex flex-col justify-between p-4 h-full">
+      <div className="flex flex-col items-start gap-4">
+        <SizePositionSection selectedElement={selectedElementData} />
+        <div className="h-[1px] w-full bg-gray-100" />
+        <FontSection selectedElement={selectedElementData} />
+        <BackgroundSection selectedElement={selectedElementData} />
+        <div className="h-[1px] w-full bg-gray-100" />
+        <BorderSection selectedElement={selectedElementData} />
+        <div className="h-[1px] w-full bg-gray-100" />
+        <ShadowSection selectedElement={selectedElementData} />
+        <div className="h-[1px] w-full bg-gray-100" />
+        <MiscellanousSection selectedElement={selectedElementData} />
+      </div>
+      <div className="flex flex-col items-start gap-4">
+        <div className="h-[1px] w-full bg-gray-100" />
+        <ModificationsSection selectedElement={selectedElementData} />
+      </div>
+    </div>
   )
 }
 
diff --git a/apps/dashboard/src/components/Splash/MyImagesSplash.tsx b/apps/dashboard/src/components/Splash/MyImagesSplash.tsx
@@ -19,7 +19,7 @@ export function MyImagesSplash() {
           Back
         </CustomLink>
       </div>
-      <div className="grid grid-cols-3 gap-2 max-h-[50vh] overflow-y-scroll no-scrollbar">
+      <div className="grid grid-cols-3 gap-2 max-h-[427px] overflow-y-scroll no-scrollbar">
         <OgImage onClick={() => {
           const { id } = createEmptyImage()
           router.push(`/?i=${id}`)

diff --git a/apps/dashboard/src/components/Splash/TemplatesSplash.tsx b/apps/dashboard/src/components/Splash/TemplatesSplash.tsx
@@ -13,7 +13,7 @@ export function TemplatesSplash() {
           Back
         </CustomLink>
       </div>
-      <div className="grid grid-cols-3 gap-2 max-h-[50vh] overflow-y-scroll no-scrollbar">
+      <div className="grid grid-cols-3 gap-2 max-h-[427px] overflow-y-scroll no-scrollbar">
         {TEMPLATES.map((template) => (
           <OgImage
             elements={template.elements}

diff --git a/apps/dashboard/src/components/forms/Button.tsx b/apps/dashboard/src/components/forms/Button.tsx
@@ -11,7 +11,7 @@ interface ButtonProps {
 
 export function Button({ icon, variant, onClick, isLoading, className, children }: ButtonProps) {
   return (
-    <button className={`flex gap-3 items-center px-3 py-1 border rounded ${variant === 'danger' ? 'text-red-900 bg-red-50 border-red-200 hover:border-red-300' : 'text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300'} ${isLoading ? 'cursor-not-allowed opacity-60' : ''} ${className}`} onClick={isLoading ? undefined : onClick} type="button">
+    <button className={`flex gap-3 items-center px-3 py-1 border rounded select-none ${variant === 'danger' ? 'text-red-900 bg-red-50 border-red-200 hover:border-red-300' : 'text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300'} ${isLoading ? 'cursor-not-allowed opacity-60' : ''} ${className}`} onClick={isLoading ? undefined : onClick} type="button">
       {icon}
       {children}
     </button>

diff --git a/apps/dashboard/src/lib/__tests__/__snapshots__/export.test.ts.snap b/apps/dashboard/src/lib/__tests__/__snapshots__/export.test.ts.snap
@@ -4419,4 +4419,6 @@ Uint8Array [
 ]
 `;
 
+exports[`renderToImg > should not render non-visible elements 1`] = `"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIHZpZXdCb3g9IjAgMCAxMjAwIDYzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ic2F0b3JpX29tLWlkIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIGZpbGw9IiNmZmYiLz48L21hc2s+PC9zdmc+"`;
+
 exports[`renderToImg > should render to a base64 data url 1`] = `"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIHZpZXdCb3g9IjAgMCAxMjAwIDYzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ic2F0b3JpX29tLWlkIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIGZpbGw9IiNmZmYiLz48L21hc2s+PG1hc2sgaWQ9InNhdG9yaV9vbS1pZC0wIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMSkiIGQ9Ik0xMy44IDkuM0wyLjQgOS4zTDIuNCA1LjRMMjkuNyA1LjRMMjkuNyA5LjNMMTguMyA5LjNMMTguMyA0MS44TDEzLjggNDEuOEwxMy44IDkuM1pNNDMuNCA0Mi4zTDQzLjQgNDIuM1EzOS41IDQyLjMgMzYuNiA0MC42UTMzLjggMzguOCAzMi4yIDM1LjdRMzAuNyAzMi41IDMwLjcgMjguM1EzMC43IDI0LjEgMzIuMiAyMC45UTMzLjggMTcuNyAzNi41IDE1LjlRMzkuMyAxNC4xIDQzLjAgMTQuMUw0My4wIDE0LjFRNDUuMSAxNC4xIDQ3LjIgMTQuOFE0OS4zIDE1LjYgNTEuMCAxNy4xUTUyLjcgMTguNyA1My43IDIxLjNRNTQuNyAyMy45IDU0LjcgMjcuOEw1NC43IDI3LjhMNTQuNyAyOS41TDM0LjkgMjkuNVEzNS4wIDMyLjMgMzYuMCAzNC4yTDM2LjAgMzQuMlEzNy4wIDM2LjMgMzguOSAzNy41UTQwLjkgMzguNiA0My40IDM4LjZMNDMuNCAzOC42UTQ1LjAgMzguNiA0Ni40IDM4LjFRNDcuNyAzNy42IDQ4LjcgMzYuN1E0OS43IDM1LjcgNTAuMiAzNC4zTDUwLjIgMzQuM0w1NC4zIDM1LjRRNTMuNiAzNy41IDUyLjEgMzkuMFE1MC42IDQwLjYgNDguNCA0MS41UTQ2LjIgNDIuMyA0My40IDQyLjNaTTM0LjkgMjUuOUwzNC45IDI1LjlMNTAuNCAyNS45UTUwLjQgMjMuNiA0OS41IDIxLjhRNDguNiAyMC4wIDQ2LjkgMTguOVE0NS4yIDE3LjkgNDMuMCAxNy45TDQzLjAgMTcuOVE0MC41IDE3LjkgMzguNiAxOS4xUTM2LjggMjAuNCAzNS44IDIyLjNMMzUuOCAyMi4zUTM1LjAgMjQuMCAzNC45IDI1LjlaTTU4LjcgMTQuNUw2My41IDE0LjVMNzAuMCAyNS42TDc2LjYgMTQuNUw4MS40IDE0LjVMNzIuNiAyOC4xTDgxLjQgNDEuOEw3Ni42IDQxLjhMNzAuMCAzMS4yTDYzLjUgNDEuOEw1OC43IDQxLjhMNjcuMyAyOC4xTDU4LjcgMTQuNVpNOTMuNCAxNC41TDk5LjIgMTQuNUw5OS4yIDE4LjBMOTMuNCAxOC4wTDkzLjQgMzMuOVE5My40IDM1LjcgOTMuOSAzNi42UTk0LjQgMzcuNSA5NS4zIDM3LjhROTYuMSAzOC4xIDk3LjAgMzguMUw5Ny4wIDM4LjFROTcuNyAzOC4xIDk4LjIgMzguMFE5OC42IDM3LjkgOTguOSAzNy45TDk4LjkgMzcuOUw5OS43IDQxLjZROTkuMyA0MS44IDk4LjUgNDEuOVE5Ny44IDQyLjEgOTYuNiA0Mi4xTDk2LjYgNDIuMVE5NC44IDQyLjEgOTMuMSA0MS4zUTkxLjQgNDAuNiA5MC4zIDM5LjBRODkuMiAzNy41IDg5LjIgMzUuMUw4OS4yIDM1LjFMODkuMiAxOC4wTDg1LjEgMTguMEw4NS4xIDE0LjVMODkuMiAxNC41TDg5LjIgOC4wTDkzLjQgOC4wTDkzLjQgMTQuNVogIi8+PC9zdmc+"`;
diff --git a/apps/dashboard/src/lib/__tests__/export.test.ts b/apps/dashboard/src/lib/__tests__/export.test.ts
@@ -129,8 +129,33 @@ describe('renderToImg', () => {
         letterSpacing: 0,
         fontSize: 50,
         align: 'left',
+      },
+    ])
+    expect(data).toMatchSnapshot()
+  })
 
-      }
+  it('should not render non-visible elements', async () => {
+    const data = await renderToImg([
+      {
+        tag: 'p',
+        id: createElementId(),
+        name: 'Text',
+        width: 100,
+        height: 50,
+        x: 0,
+        y: 0,
+        visible: false,
+        rotate: 0,
+        opacity: 100,
+        content: 'Text',
+        color: '#000000',
+        fontFamily: 'Inter',
+        fontWeight: 400,
+        lineHeight: 1,
+        letterSpacing: 0,
+        fontSize: 50,
+        align: 'left',
+      },
     ])
     expect(data).toMatchSnapshot()
   })

diff --git a/apps/dashboard/src/lib/export.ts b/apps/dashboard/src/lib/export.ts
@@ -150,7 +150,7 @@ export async function renderToImg(elements: OGElement[]) {
         width: '100%',
         height: '100%',
       },
-      children: elements.map(element => ({
+      children: elements.filter(element => element.visible).map(element => ({
         type: element.tag,
         props: {
           style: createElementStyle(element),

diff --git a/apps/dashboard/src/stores/imagesStore.ts b/apps/dashboard/src/stores/imagesStore.ts
@@ -45,6 +45,7 @@ export const useImagesStore = create(persist<ImagesState>(set => ({
     localStorage.setItem(image.id, JSON.stringify(template.elements))
     set(state => ({ images: [image, ...state.images] }))
 
+    toast('Template duplicated!')
     return image
   },
   copyImage: image => {

diff --git a/assets/builder.jpeg b/assets/builder.jpeg
-Original file line number
+Diff line change
@@ Expand Up / @@ -4419,4 +4419,6 @@ Uint8Array [ @@
     ]
     `;
+    exports[`renderToImg > should not render non-visible elements 1`] = `"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIHZpZXdCb3g9IjAgMCAxMjAwIDYzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ic2F0b3JpX29tLWlkIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIGZpbGw9IiNmZmYiLz48L21hc2s+PC9zdmc+"`;
     exports[`renderToImg > should render to a base64 data url 1`] = `"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIHZpZXdCb3g9IjAgMCAxMjAwIDYzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ic2F0b3JpX29tLWlkIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MzAiIGZpbGw9IiNmZmYiLz48L21hc2s+PG1hc2sgaWQ9InNhdG9yaV9vbS1pZC0wIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMSkiIGQ9Ik0xMy44IDkuM0wyLjQgOS4zTDIuNCA1LjRMMjkuNyA1LjRMMjkuNyA5LjNMMTguMyA5LjNMMTguMyA0MS44TDEzLjggNDEuOEwxMy44IDkuM1pNNDMuNCA0Mi4zTDQzLjQgNDIuM1EzOS41IDQyLjMgMzYuNiA0MC42UTMzLjggMzguOCAzMi4yIDM1LjdRMzAuNyAzMi41IDMwLjcgMjguM1EzMC43IDI0LjEgMzIuMiAyMC45UTMzLjggMTcuNyAzNi41IDE1LjlRMzkuMyAxNC4xIDQzLjAgMTQuMUw0My4wIDE0LjFRNDUuMSAxNC4xIDQ3LjIgMTQuOFE0OS4zIDE1LjYgNTEuMCAxNy4xUTUyLjcgMTguNyA1My43IDIxLjNRNTQuNyAyMy45IDU0LjcgMjcuOEw1NC43IDI3LjhMNTQuNyAyOS41TDM0LjkgMjkuNVEzNS4wIDMyLjMgMzYuMCAzNC4yTDM2LjAgMzQuMlEzNy4wIDM2LjMgMzguOSAzNy41UTQwLjkgMzguNiA0My40IDM4LjZMNDMuNCAzOC42UTQ1LjAgMzguNiA0Ni40IDM4LjFRNDcuNyAzNy42IDQ4LjcgMzYuN1E0OS43IDM1LjcgNTAuMiAzNC4zTDUwLjIgMzQuM0w1NC4zIDM1LjRRNTMuNiAzNy41IDUyLjEgMzkuMFE1MC42IDQwLjYgNDguNCA0MS41UTQ2LjIgNDIuMyA0My40IDQyLjNaTTM0LjkgMjUuOUwzNC45IDI1LjlMNTAuNCAyNS45UTUwLjQgMjMuNiA0OS41IDIxLjhRNDguNiAyMC4wIDQ2LjkgMTguOVE0NS4yIDE3LjkgNDMuMCAxNy45TDQzLjAgMTcuOVE0MC41IDE3LjkgMzguNiAxOS4xUTM2LjggMjAuNCAzNS44IDIyLjNMMzUuOCAyMi4zUTM1LjAgMjQuMCAzNC45IDI1LjlaTTU4LjcgMTQuNUw2My41IDE0LjVMNzAuMCAyNS42TDc2LjYgMTQuNUw4MS40IDE0LjVMNzIuNiAyOC4xTDgxLjQgNDEuOEw3Ni42IDQxLjhMNzAuMCAzMS4yTDYzLjUgNDEuOEw1OC43IDQxLjhMNjcuMyAyOC4xTDU4LjcgMTQuNVpNOTMuNCAxNC41TDk5LjIgMTQuNUw5OS4yIDE4LjBMOTMuNCAxOC4wTDkzLjQgMzMuOVE5My40IDM1LjcgOTMuOSAzNi42UTk0LjQgMzcuNSA5NS4zIDM3LjhROTYuMSAzOC4xIDk3LjAgMzguMUw5Ny4wIDM4LjFROTcuNyAzOC4xIDk4LjIgMzguMFE5OC42IDM3LjkgOTguOSAzNy45TDk4LjkgMzcuOUw5OS43IDQxLjZROTkuMyA0MS44IDk4LjUgNDEuOVE5Ny44IDQyLjEgOTYuNiA0Mi4xTDk2LjYgNDIuMVE5NC44IDQyLjEgOTMuMSA0MS4zUTkxLjQgNDAuNiA5MC4zIDM5LjBRODkuMiAzNy41IDg5LjIgMzUuMUw4OS4yIDM1LjFMODkuMiAxOC4wTDg1LjEgMTguMEw4NS4xIDE0LjVMODkuMiAxNC41TDg5LjIgOC4wTDkzLjQgOC4wTDkzLjQgMTQuNVogIi8+PC9zdmc+"`;