V0.3.4 (#58)

* 🔧 update biome configuration to include noUndeclaredDependencies and format ignore list

* ✨ add trigger-on-scroll component with animated number functionality

* 📝 update changelog for the trigger on scroll component

apps/website/src/changelogs/2024-11-23.mdx

@@ -0,0 +1,8 @@
+---
+title: Animated numbers triggered on scroll
+---
+
+#### New component
+
+- A new component has been added to the website that animates numbers when they come into view.
+> This component was requested for displaying statistics or other numerical data in a marketing section.

apps/website/src/lib/generated-package-check-list-to-install.ts

@@ -115,10 +115,6 @@ export const packageCheckListToInstall: PackageToInstallType[] = [
     find: [`from "zustand"`],
     packageName: "zustand",
   },
-  {
-    find: [`from "@biomejs/biome"`],
-    packageName: "@biomejs/biome",
-  },
   {
     find: [`from "@tailwindcss/forms"`],
     packageName: "@tailwindcss/forms",

biome.json

@@ -25,7 +25,8 @@
       "correctness": {
         "all": true,
         "noNodejsModules": "off",
-        "useImportExtensions": "off"
+        "useImportExtensions": "off",
+        "noUndeclaredDependencies": "off"
       },
       "nursery": {
         "useSortedClasses": "off"
@@ -54,10 +55,15 @@
     "enabled": true
   },
   "files": {
-    "ignore": ["node_modules", "dist", "build", ".next"]
+    "ignore": [
+      "node_modules",
+      "dist",
+      "build",
+      ".next"
+    ]
   },
   "vcs": {
     "clientKind": "git",
     "enabled": true
   }
-}
+}

packages/ui/cuicui/marketing-ui/statistics/category.statistics.tsx

@@ -1,6 +1,7 @@
 import AnimatedCounterPreview from "@/cuicui/marketing-ui/statistics/animated-counter/animated-counter-preview";
 import { AnimatedNumberVariant1 } from "@/cuicui/marketing-ui/statistics/animated-on-scroll/variant1";
 import IncreaseToValueVariant1 from "@/cuicui/marketing-ui/statistics/increase-to-value/variant1";
+import { triggerOnScrollComponent } from "@/cuicui/marketing-ui/statistics/trigger-on-scroll/component";
 import type { CategoryType } from "@/lib/types/component";
 import { BarChart2Icon } from "lucide-react";
 
@@ -30,6 +31,7 @@ export const statisticsCategory: CategoryType = {
         },
       ],
     },
+    triggerOnScrollComponent,
     {
       sizePreview: "sm",
       slug: "increase-to-value",

packages/ui/cuicui/marketing-ui/statistics/trigger-on-scroll/component.ts

@@ -0,0 +1,18 @@
+import PreviewTriggerOnScroll from "@/cuicui/marketing-ui/statistics/trigger-on-scroll/preview";
+import type { ComponentType } from "@/lib/types/component";
+
+export const triggerOnScrollComponent: ComponentType = {
+  sizePreview: "sm",
+  slug: "trigger-on-scroll",
+  // isIframed: true,
+  rerenderButton: true,
+  name: "Number trigger on scroll",
+  description: "Show numbers that animate when they appear on the screen.",
+  variantList: [
+    {
+      name: "Animated Number",
+      component: PreviewTriggerOnScroll,
+      slugPreviewFile: "preview",
+    },
+  ],
+};

packages/ui/cuicui/marketing-ui/statistics/trigger-on-scroll/preview.tsx

@@ -0,0 +1,13 @@
+import { TriggerOnScroll } from "@/cuicui/marketing-ui/statistics/trigger-on-scroll/trigger-on-scroll";
+
+export default function PreviewTriggerOnScroll() {
+  return (
+    <div className="h-[200dvh] flex flex-col items-center justify-evenly">
+      <p className="text-neutral-500">Scroll to see the number reveal</p>
+      <TriggerOnScroll>{252}</TriggerOnScroll>
+      <TriggerOnScroll>{5120}</TriggerOnScroll>
+      <TriggerOnScroll>{12300}</TriggerOnScroll>
+      <TriggerOnScroll>{14}</TriggerOnScroll>
+    </div>
+  );
+}

packages/ui/cuicui/marketing-ui/statistics/trigger-on-scroll/trigger-on-scroll.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { cn } from "@/cuicui/utils/cn/cn";
+import NumberFlow from "@number-flow/react";
+import { useState, useRef, useEffect } from "react";
+import { useInView } from "framer-motion";
+
+type NumberProps = number | `${number}`;
+
+export function TriggerOnScroll({
+  className,
+  children,
+  delayInMs = 100,
+}: { className?: string; children: NumberProps; delayInMs?: number }) {
+  const [number, setNumber] = useState<NumberProps>(0);
+  const ref = useRef(null);
+  const isInView = useInView(ref, { margin: "0px 0px -100px 0px" });
+
+  useEffect(() => {
+    if (isInView) {
+      setTimeout(() => setNumber(children), delayInMs);
+    } else {
+      setNumber(0);
+    }
+  }, [isInView, children, delayInMs]);
+
+  return (
+    <NumberFlow
+      ref={ref}
+      value={Number(number)}
+      isolate={true}
+      spinTiming={{ duration: 1200, easing: "ease-in-out" }}
+      className={cn(
+        "z-20 dark:text-neutral-300 text-neutral-700 text-4xl font-medium tracking-tighter",
+        className,
+      )}
+    />
+  );
+}