ui/ux/dx, fixed animations, fixed what changed calculations

aidenybai · Jan 12, 2025 · babf156 · babf156
1 parent 24e429b
commit babf156
Show file tree

Hide file tree

Showing 17 changed files with 849 additions and 406 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,6 +5,7 @@
     "source.organizeImports.biome": "always",
     "quickfix.biome": "always"
   },
+  "css.lint.unknownAtRules": "ignore",
   "[typescript]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
@@ -20,5 +21,8 @@
   "[html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
 }
diff --git a/packages/scan/src/core/index.ts b/packages/scan/src/core/index.ts
@@ -790,7 +790,7 @@ export const ignoredProps = new WeakSet<
 >();
 
 export const ignoreScan = (node: ReactNode) => {
-  if (typeof node === 'object' && node !== null) {
+  if (node && typeof node === 'object') {
     ignoredProps.add(node);
   }
 };
diff --git a/packages/scan/src/web/assets/css/styles.tailwind.css b/packages/scan/src/web/assets/css/styles.tailwind.css
@@ -111,7 +111,7 @@ svg {
 .resize-line {
   @apply absolute inset-0;
   @apply overflow-hidden;
-  @apply bg-black/90;
+  @apply bg-black;
   @apply transition-all duration-150;
 
   svg {
@@ -205,7 +205,6 @@ svg {
   }
 }
 
-/* HEADER */
 .react-scan-header {
   @apply flex items-center gap-x-2;
   @apply pl-3 pr-2;
@@ -220,7 +219,7 @@ svg {
   @apply p-1;
   @apply min-w-fit;
   @apply rounded;
-  @apply transition-colors duration-150;
+  @apply transition-all duration-300;
 }
 
 .react-scan-replay-button {
@@ -264,16 +263,10 @@ svg {
   }
 }
 
-.react-scan-inspector {
-  font-size: 13px;
-  color: #fff;
-  width: 100%;
-}
-
 .react-scan-section {
-  @apply flex flex-col py-1;
+  @apply flex flex-col;
   @apply py-2 px-4;
-  @apply bg-black text-[#888];
+  @apply text-[#888];
   @apply before:content-[attr(data-section)] before:text-gray-500;
 
   > .react-scan-property {
@@ -340,14 +333,12 @@ svg {
   @apply transition-all duration-150;
 
   &.react-scan-expanded {
-    @apply pt-2;
     @apply grid-rows-[1fr];
   }
 }
 
 .react-scan-nested {
   @apply relative;
-  /* @apply border-l-1 border-gray-500/30; */
   @apply overflow-hidden;
 
   &:before {
@@ -358,16 +349,15 @@ svg {
   }
 }
 
-.react-scan-hidden {
-  display: none;
-}
+.react-scan-settings {
+  @apply flex flex-col gap-6;
+  @apply py-2 px-4;
+  @apply text-[#888];
 
-.react-scan-array-container {
-  overflow-y: auto;
-  @apply ml-5;
-  margin-top: 8px;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
-  padding-left: 8px;
+  >div {
+    @apply flex items-center justify-between;
+    @apply transition-colors duration-300;
+  }
 }
 
 .react-scan-preview-line {
@@ -376,14 +366,56 @@ svg {
 }
 
 .react-scan-flash-overlay {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  z-index: 999999;
-  mix-blend-mode: multiply;
-  background: rgba(142, 97, 227, 0.9);
-  transition: opacity 150ms ease-in;
-  pointer-events: none;
+  @apply absolute inset-0;
+  @apply opacity-0;
+  @apply z-[999999];
+  @apply pointer-events-none;
+  @apply transition-opacity duration-150;
+  @apply mix-blend-multiply;
+  @apply bg-purple-500/90;
+}
+
+.react-scan-toggle {
+  @apply relative;
+
+  input {
+    @apply absolute inset-0;
+    @apply opacity-0 z-20;
+    @apply cursor-pointer;
+  }
+
+  input:checked {
+    +div {
+      @apply bg-neutral-600;
+
+      &::before {
+        @apply translate-x-full;
+        @apply left-auto;
+        @apply bg-[#8e61e3];
+        @apply border-neutral-600;
+      }
+    }
+  }
+
+  >div {
+    @apply relative;
+    @apply w-8 h-4;
+    @apply bg-neutral-700;
+    @apply rounded-full;
+    @apply pointer-events-none;
+    @apply transition-colors duration-300;
+    &:before {
+      @apply content-[''];
+      @apply absolute top-1/2 left-0;
+      @apply -translate-y-1/2;
+      @apply w-4 h-4;
+      @apply bg-neutral-500;
+      @apply border-2 border-neutral-700;
+      @apply rounded-full;
+      @apply shadow-sm;
+      @apply transition-all duration-300;
+    }
+  }
 }
 
 .react-scan-flash-active {
@@ -403,3 +435,17 @@ svg {
     opacity: 1;
   }
 }
+
+.react-scan-what-changed {
+  ul {
+    @apply list-disc;
+    @apply pl-4;
+  }
+
+  li {
+    @apply whitespace-nowrap;
+    > div {
+      @apply flex items-center justify-between gap-x-2;
+    }
+  }
+}
diff --git a/packages/scan/src/web/assets/svgs/svgs.ts b/packages/scan/src/web/assets/svgs/svgs.ts
@@ -98,5 +98,24 @@ export const ICONS = `
   <symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
     <path d="m9 18 6-6-6-6"/>
   </symbol>
+
+  <symbol id="icon-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3" />
+  </symbol>
+
+  <symbol id="icon-flame" viewBox="0 0 24 24">
+    <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
+  </symbol>
+
+  <symbol id="icon-shield-check" viewBox="0 0 24 24">
+    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
+  </symbol>
+
+  <symbol id="icon-bell-ring" viewBox="0 0 24 24">
+    <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
+    <path d="M22 8c0-2.3-.8-4.3-2-6"/>
+    <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>
+    <path d="M4 2C2.8 3.7 2 5.7 2 8"/>
+  </symbol>
 </svg>
 `;