Merge branch 'main' into track-click

C-EO · Oct 1, 2024 · 20dfca3 · 20dfca3
2 parents 92ed8c8 + 9736f82
commit 20dfca3
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 10 deletions.
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/referrals/stats.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/referrals/stats.tsx
@@ -90,7 +90,7 @@ async function StatsInner({ slug }: { slug: string }) {
           label="Affiliate Earnings"
           graphic={<MiniAreaChart data={sales} />}
         >
-          <CountingNumbers prefix="$" fullNumber>
+          <CountingNumbers prefix="$" variant="full">
             {(totalSales / 100) * REFERRAL_REVENUE_SHARE}
           </CountingNumbers>
         </StatsCard>
@@ -108,7 +108,7 @@ async function StatsInner({ slug }: { slug: string }) {
             </Gauge>
           }
         >
-          <CountingNumbers fullNumber>{clicksQuotaBonus}</CountingNumbers>
+          <CountingNumbers variant="full">{clicksQuotaBonus}</CountingNumbers>
         </StatsCard>
       </>
     );

diff --git a/apps/web/ui/analytics/events/events-tabs.tsx b/apps/web/ui/analytics/events/events-tabs.tsx
@@ -106,7 +106,7 @@ export default function EventsTabs() {
                     isLoadingTotalEvents && "opacity-40",
                   )}
                   prefix={event === "sales" && "$"}
-                  {...(event === "sales" && { fullNumber: true })}
+                  {...(event === "sales" && { variant: "full" })}
                 >
                   {event === "sales"
                     ? (totalEvents?.saleAmount ?? 0) / 100

diff --git a/apps/web/ui/analytics/main.tsx b/apps/web/ui/analytics/main.tsx
@@ -131,7 +131,7 @@ export default function Main() {
                           as="h1"
                           className="text-2xl font-medium sm:text-3xl"
                           prefix={id === "sales" && "$"}
-                          {...(id === "sales" && { fullNumber: true })}
+                          {...(id === "sales" && { variant: "full" })}
                         >
                           {total}
                         </CountingNumbers>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -48,6 +48,7 @@
     "@radix-ui/react-slot": "1.0.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "@react-aria/datepicker": "^3.10.0",
     "@react-stately/datepicker": "^3.9.3",
     "@tanstack/react-table": "^8.17.3",

diff --git a/packages/ui/src/counting-numbers.tsx b/packages/ui/src/counting-numbers.tsx
@@ -15,7 +15,7 @@ interface CountingNumbersProps {
   prefix?: ReactNode;
   duration?: number;
   as?: ElementType; // Allows defining the component as 'h1', 'h2', 'p', etc.
-  fullNumber?: boolean; // If true, will not abbreviate the number
+  variant?: "full" | "compact";
 }
 
 const CountingNumbers = React.forwardRef<HTMLSpanElement, CountingNumbersProps>(
@@ -27,6 +27,7 @@ const CountingNumbers = React.forwardRef<HTMLSpanElement, CountingNumbersProps>(
       prefix,
       duration = 250,
       as: Component = "span",
+      variant = "compact",
       ...props
     },
     ref: ForwardedRef<any>,
@@ -64,7 +65,7 @@ const CountingNumbers = React.forwardRef<HTMLSpanElement, CountingNumbersProps>(
         {prefix}
         {nFormatter(
           displayValue,
-          props.fullNumber ? { full: true } : undefined,
+          variant === "full" ? { full: true } : undefined,
         )}
       </Comp>
     );

diff --git a/packages/ui/src/filter/filter-select.tsx b/packages/ui/src/filter/filter-select.tsx
@@ -2,6 +2,7 @@ import { cn, truncate } from "@dub/utils";
 import { Command, useCommandState } from "cmdk";
 import { ChevronDown, ListFilter } from "lucide-react";
 import {
+  Fragment,
   PropsWithChildren,
   ReactNode,
   forwardRef,
@@ -191,16 +192,15 @@ export function FilterSelect({
                 {!selectedFilter
                   ? // Top-level filters
                     filters.map((filter) => (
-                      <>
+                      <Fragment key={filter.key}>
                         <FilterButton
-                          key={filter.key}
                           filter={filter}
                           onSelect={() => openFilter(filter.key)}
                         />
                         {filter.separatorAfter && (
                           <Command.Separator className="-mx-1 my-1 border-b border-gray-200" />
                         )}
-                      </>
+                      </Fragment>
                     ))
                   : // Filter options
                     selectedFilter.options?.map((option) => {

diff --git a/packages/ui/src/modal.tsx b/packages/ui/src/modal.tsx
@@ -2,6 +2,7 @@
 
 import { cn } from "@dub/utils";
 import * as Dialog from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { useRouter } from "next/navigation";
 import { ComponentProps, Dispatch, SetStateAction } from "react";
 import { Drawer } from "vaul";
@@ -64,6 +65,10 @@ export function Modal({
               className,
             )}
           >
+            <VisuallyHidden.Root>
+              <Drawer.Title>Modal</Drawer.Title>
+              <Drawer.Description>This is a modal</Drawer.Description>
+            </VisuallyHidden.Root>
             <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
               <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
             </div>
@@ -98,6 +103,10 @@ export function Modal({
             className,
           )}
         >
+          <VisuallyHidden.Root>
+            <Dialog.Title>Modal</Dialog.Title>
+            <Dialog.Description>This is a modal</Dialog.Description>
+          </VisuallyHidden.Root>
           {children}
         </Dialog.Content>
       </Dialog.Portal>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml