@dub/ui 0.0.7 → 0.0.9

package/src/badge.tsx

@@ -1,33 +0,0 @@
-import { cn } from "@dub/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-
-const badgeVariants = cva(
-  "max-w-fit rounded-full border px-2 py-px text-xs font-medium capitalize",
-  {
-    variants: {
-      variant: {
-        default: "border-gray-400 text-gray-500",
-        violet: "border-violet-600 bg-violet-600 text-white",
-        blue: "border-blue-500 bg-blue-500 text-white",
-        black: "border-black bg-black text-white",
-        gray: "border-gray-400 bg-gray-400 text-white",
-        neutral: "border-gray-400 text-gray-500",
-      },
-    },
-    defaultVariants: {
-      variant: "neutral",
-    },
-  },
-);
-
-interface BadgeProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <span className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

package/src/button.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { cn } from "@dub/utils";
-import { ReactNode } from "react";
-import { LoadingSpinner } from "./icons";
-import { Tooltip } from "./tooltip";
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  text: string;
-  variant?: "primary" | "secondary" | "success" | "danger";
-  loading?: boolean;
-  icon?: ReactNode;
-  disabledTooltip?: string | ReactNode;
-}
-
-export function Button({
-  text,
-  variant = "primary",
-  loading,
-  icon,
-  disabledTooltip,
-  ...props
-}: ButtonProps) {
-  if (disabledTooltip) {
-    return (
-      <Tooltip content={disabledTooltip} fullWidth>
-        <div className="flex h-10 w-full cursor-not-allowed items-center justify-center rounded-md border border-gray-200 bg-gray-100 px-4 text-sm text-gray-400 transition-all focus:outline-none">
-          <p>{text}</p>
-        </div>
-      </Tooltip>
-    );
-  }
-  return (
-    <button
-      // if onClick is passed, it's a "button" type, otherwise it's being used in a form, hence "submit"
-      type={props.onClick ? "button" : "submit"}
-      className={cn(
-        "flex h-10 w-full items-center justify-center space-x-2 rounded-md border px-4 text-sm transition-all focus:outline-none",
-        props.disabled || loading
-          ? "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400"
-          : {
-              "border-black bg-black text-white hover:bg-white hover:text-black":
-                variant === "primary",
-              "border-gray-200 bg-white text-gray-500 hover:border-black hover:text-black":
-                variant === "secondary",
-              "border-blue-500 bg-blue-500 text-white hover:bg-white hover:text-blue-500":
-                variant === "success",
-              "border-red-500 bg-red-500 text-white hover:bg-white hover:text-red-500":
-                variant === "danger",
-            },
-        props.className,
-      )}
-      disabled={props.disabled || loading}
-      {...props}
-    >
-      {loading ? <LoadingSpinner /> : icon ? icon : null}
-      <p>{text}</p>
-    </button>
-  );
-}

package/src/content.ts

@@ -1,34 +0,0 @@
-import { Airplay, BarChart, Link2, QrCode, Users } from "lucide-react";
-
-export const FEATURES_LIST = [
-  {
-    title: "Powerful Analytics For The Modern Marketer",
-    shortTitle: "Advanced Analytics",
-    icon: BarChart,
-    slug: "analytics",
-  },
-  {
-    title: "Branded Links That Stand Out",
-    shortTitle: "Branded Links",
-    icon: Airplay,
-    slug: "branded-links",
-  },
-  {
-    title: "Free QR Code Generator",
-    shortTitle: "QR Codes",
-    icon: QrCode,
-    slug: "qr-codes",
-  },
-  {
-    title: "Personalize Your Short Links",
-    shortTitle: "Personalization",
-    icon: Link2,
-    slug: "personalization",
-  },
-  {
-    title: "Collaborate With Your Team",
-    shortTitle: "Team Collaboration",
-    icon: Users,
-    slug: "collaboration",
-  },
-];

package/src/copy-button.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { cn } from "@dub/utils";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Copy, Tick } from "./icons";
-
-export function CopyButton({
-  value,
-  className,
-}: {
-  value: string;
-  className?: string;
-}) {
-  const [copied, setCopied] = useState(false);
-  return (
-    <button
-      onClick={(e) => {
-        e.stopPropagation();
-        setCopied(true);
-        navigator.clipboard.writeText(value).then(() => {
-          toast.success("Copied to clipboard!");
-        });
-        setTimeout(() => setCopied(false), 3000);
-      }}
-      className={cn(
-        "group rounded-full bg-gray-100 p-1.5 transition-all duration-75 hover:scale-105 hover:bg-blue-100 active:scale-95",
-        className,
-      )}
-    >
-      <span className="sr-only">Copy</span>
-      {copied ? (
-        <Tick className="text-gray-700 transition-all group-hover:text-blue-800" />
-      ) : (
-        <Copy className="text-gray-700 transition-all group-hover:text-blue-800" />
-      )}
-    </button>
-  );
-}

package/src/footer.tsx

@@ -1,204 +0,0 @@
-"use client";
-
-import { ALL_TOOLS } from "@dub/utils";
-import va from "@vercel/analytics";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { FEATURES_LIST } from "./content";
-import { Github, LinkedIn, LogoType, Twitter } from "./icons";
-import { MaxWidthWrapper } from "./max-width-wrapper";
-
-const navigation = {
-  features: FEATURES_LIST.map(({ shortTitle, slug }) => ({
-    name: shortTitle,
-    href: `/features/${slug}`,
-  })),
-  product: [
-    { name: "Blog", href: "/blog" },
-    { name: "Changelog", href: "/changelog" },
-    { name: "Customer Stories", href: "/customers" },
-    { name: "Help Center", href: "/help" },
-    { name: "Pricing", href: "/pricing" },
-  ],
-  tools: ALL_TOOLS.map(({ name, slug }) => ({
-    name,
-    href: `/tools/${slug}`,
-  })),
-  legal: [
-    { name: "Privacy", href: "/privacy" },
-    { name: "Terms", href: "/terms" },
-    { name: "Abuse", href: "/abuse" },
-  ],
-};
-
-export function Footer() {
-  const { domain = "dub.co" } = useParams() as { domain: string };
-
-  const createHref = (href: string) =>
-    domain === "dub.co" ? href : `https://dub.co${href}`;
-
-  return (
-    <footer className="z-10 border-t border-gray-200 bg-white/50 py-8 backdrop-blur-lg">
-      <MaxWidthWrapper className="pt-10">
-        <div className="xl:grid xl:grid-cols-5 xl:gap-8">
-          <div className="space-y-8 xl:col-span-2">
-            <Link
-              href={createHref("/")}
-              {...(domain !== "dub.co" && {
-                onClick: () => {
-                  va.track("Referred from custom domain", {
-                    domain,
-                    medium: `footer item (logo)`,
-                  });
-                },
-              })}
-            >
-              <span className="sr-only">Dub.co Logo</span>
-              <LogoType className="h-7 text-gray-600" />
-            </Link>
-            <p className="max-w-xs text-sm text-gray-500">
-              Giving modern marketing teams superpowers with short links that
-              stand out.
-            </p>
-            <div className="flex items-center space-x-2">
-              <a
-                href="https://twitter.com/dubdotco"
-                target="_blank"
-                rel="noreferrer"
-                className="group rounded-md p-2 transition-colors hover:bg-gray-100 active:bg-gray-200"
-              >
-                <span className="sr-only">Twitter</span>
-                <Twitter className="h-5 w-5 text-gray-600" />
-              </a>
-              <div className="h-8 border-l border-gray-200" />
-              <a
-                href="https://github.com/steven-tey/dub"
-                target="_blank"
-                rel="noreferrer"
-                className="rounded-md p-2 transition-colors hover:bg-gray-100 active:bg-gray-200"
-              >
-                <span className="sr-only">Github</span>
-                <Github className="h-5 w-5 text-gray-600" />
-              </a>
-              <div className="h-8 border-l border-gray-200" />
-              <a
-                href="https://www.linkedin.com/company/dubhq/"
-                target="_blank"
-                rel="noreferrer"
-                className="rounded-md p-2 transition-colors hover:bg-gray-100 active:bg-gray-200"
-              >
-                <span className="sr-only">LinkedIn</span>
-                <LinkedIn className="h-5 w-5" fill="#52525B" />
-              </a>
-            </div>
-          </div>
-          <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-3 xl:mt-0">
-            <div className="md:grid md:grid-cols-2 md:gap-8">
-              <div>
-                <h3 className="text-sm font-semibold text-gray-900">
-                  Features
-                </h3>
-                <ul role="list" className="mt-4 space-y-4">
-                  {navigation.features.map((item) => (
-                    <li key={item.name}>
-                      <Link
-                        href={createHref(item.href)}
-                        {...(domain !== "dub.co" && {
-                          onClick: () => {
-                            va.track("Referred from custom domain", {
-                              domain,
-                              medium: `footer item (${item.name})`,
-                            });
-                          },
-                        })}
-                        className="text-sm text-gray-500 hover:text-gray-900"
-                      >
-                        {item.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <div className="mt-10 md:mt-0">
-                <h3 className="text-sm font-semibold text-gray-600">Product</h3>
-                <ul role="list" className="mt-4 space-y-4">
-                  {navigation.product.map((item) => (
-                    <li key={item.name}>
-                      <Link
-                        href={createHref(item.href)}
-                        {...(domain !== "dub.co" && {
-                          onClick: () => {
-                            va.track("Referred from custom domain", {
-                              domain,
-                              medium: `footer item (${item.name})`,
-                            });
-                          },
-                        })}
-                        className="text-sm text-gray-500 hover:text-gray-900"
-                      >
-                        {item.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-            <div className="md:grid md:grid-cols-2 md:gap-8">
-              <div>
-                <h3 className="text-sm font-semibold text-gray-600">Tools</h3>
-                <ul role="list" className="mt-4 space-y-4">
-                  {navigation.tools.map((item) => (
-                    <li key={item.name}>
-                      <Link
-                        href={createHref(item.href)}
-                        {...(domain !== "dub.co" && {
-                          onClick: () => {
-                            va.track("Referred from custom domain", {
-                              domain,
-                              medium: `footer item (${item.name})`,
-                            });
-                          },
-                        })}
-                        className="text-sm text-gray-500 hover:text-gray-900"
-                      >
-                        {item.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <div className="mt-10 md:mt-0">
-                <h3 className="text-sm font-semibold text-gray-600">Legal</h3>
-                <ul role="list" className="mt-4 space-y-4">
-                  {navigation.legal.map((item) => (
-                    <li key={item.name}>
-                      <Link
-                        href={createHref(item.href)}
-                        {...(domain !== "dub.co" && {
-                          onClick: () => {
-                            va.track("Referred from custom domain", {
-                              domain,
-                              medium: `footer item (${item.name})`,
-                            });
-                          },
-                        })}
-                        className="text-sm text-gray-500 hover:text-gray-900"
-                      >
-                        {item.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
-          <p className="text-sm leading-5 text-gray-500">
-            © {new Date().getFullYear()} Dub.co
-          </p>
-        </div>
-      </MaxWidthWrapper>
-    </footer>
-  );
-}

package/src/form.tsx

@@ -1,77 +0,0 @@
-import { cn } from "@dub/utils";
-import { InputHTMLAttributes, ReactNode, useMemo, useState } from "react";
-import { Button } from "./button";
-
-export function Form({
-  title,
-  description,
-  inputData,
-  helpText,
-  buttonText = "Save Changes",
-  disabledTooltip,
-  handleSubmit,
-}: {
-  title: string;
-  description: string;
-  inputData: InputHTMLAttributes<HTMLInputElement>;
-  helpText?: string;
-  buttonText?: string;
-  disabledTooltip?: string | ReactNode;
-  handleSubmit: (data: any) => Promise<any>;
-}) {
-  const [value, setValue] = useState(inputData.defaultValue);
-  const [saving, setSaving] = useState(false);
-  const saveDisabled = useMemo(() => {
-    return saving || !value || value === inputData.defaultValue;
-  }, [saving, value, inputData.defaultValue]);
-
-  return (
-    <form
-      onSubmit={async (e) => {
-        e.preventDefault();
-        setSaving(true);
-        await handleSubmit({
-          [inputData.name as string]: value,
-        });
-        setSaving(false);
-      }}
-      className="rounded-lg border border-gray-200 bg-white"
-    >
-      <div className="relative flex flex-col space-y-6 p-5 sm:p-10">
-        <div className="flex flex-col space-y-3">
-          <h2 className="text-xl font-medium">{title}</h2>
-          <p className="text-sm text-gray-500">{description}</p>
-        </div>
-        {typeof inputData.defaultValue === "string" ? (
-          <input
-            {...inputData}
-            type="text"
-            required
-            disabled={disabledTooltip ? true : false}
-            onChange={(e) => setValue(e.target.value)}
-            className={cn(
-              "w-full max-w-md rounded-md border border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm",
-              {
-                "cursor-not-allowed bg-gray-100 text-gray-400": disabledTooltip,
-              },
-            )}
-          />
-        ) : (
-          <div className="h-[2.35rem] w-full max-w-md animate-pulse rounded-md bg-gray-200" />
-        )}
-      </div>
-
-      <div className="flex items-center justify-between rounded-b-lg border-t border-gray-200 bg-gray-50 p-3 sm:px-10">
-        <p className="text-sm text-gray-500">{helpText}</p>
-        <div>
-          <Button
-            text={buttonText}
-            loading={saving}
-            disabled={saveDisabled}
-            disabledTooltip={disabledTooltip}
-          />
-        </div>
-      </div>
-    </form>
-  );
-}

package/src/hooks/index.ts

@@ -1,5 +0,0 @@
-export { default as useCurrentAnchor } from "./use-current-anchor";
-export { default as useIntersectionObserver } from "./use-intersection-observer";
-export { default as useLocalStorage } from "./use-local-storage";
-export { default as useMediaQuery } from "./use-media-query";
-export { default as useScroll } from "./use-scroll";

package/src/hooks/use-current-anchor.ts

@@ -1,65 +0,0 @@
-import { useEffect, useState } from "react";
-
-export default function useCurrentAnchor() {
-  const [currentAnchor, setCurrentAnchor] = useState<string | null>(null);
-
-  useEffect(() => {
-    const mdxContainer: HTMLElement | null = document.querySelector(
-      "[data-mdx-container]",
-    );
-    if (!mdxContainer) return;
-
-    const offsetTop = mdxContainer.offsetTop - 1;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        let currentEntry = entries[0];
-        if (!currentEntry) return;
-
-        const offsetBottom =
-          (currentEntry.rootBounds?.height || 0) * 0.3 + offsetTop;
-
-        for (let i = 1; i < entries.length; i++) {
-          const entry = entries[i];
-          if (!entry) break;
-
-          if (
-            entry.boundingClientRect.top <
-              currentEntry.boundingClientRect.top ||
-            currentEntry.boundingClientRect.bottom < offsetTop
-          ) {
-            currentEntry = entry;
-          }
-        }
-
-        let target: Element | undefined = currentEntry.target;
-
-        // if the target is too high up, we need to find the next sibling
-        while (target && target.getBoundingClientRect().bottom < offsetTop) {
-          target = siblings.get(target)?.next;
-        }
-
-        // if the target is too low, we need to find the previous sibling
-        while (target && target.getBoundingClientRect().top > offsetBottom) {
-          target = siblings.get(target)?.prev;
-        }
-        if (target) setCurrentAnchor(target.getAttribute("href"));
-      },
-      {
-        threshold: 1,
-        rootMargin: `-${offsetTop}px 0px 0px 0px`,
-      },
-    );
-
-    const siblings = new Map();
-
-    const anchors = mdxContainer?.querySelectorAll("[data-mdx-heading]");
-    anchors.forEach((anchor) => observer.observe(anchor));
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return currentAnchor?.replace("#", "");
-}

package/src/hooks/use-intersection-observer.ts

@@ -1,41 +0,0 @@
-import { RefObject, useEffect, useState } from "react";
-
-interface Args extends IntersectionObserverInit {
-  freezeOnceVisible?: boolean;
-}
-
-export default function useIntersectionObserver(
-  elementRef: RefObject<Element>,
-  {
-    threshold = 0,
-    root = null,
-    rootMargin = "0%",
-    freezeOnceVisible = false,
-  }: Args,
-): IntersectionObserverEntry | undefined {
-  const [entry, setEntry] = useState<IntersectionObserverEntry>();
-
-  const frozen = entry?.isIntersecting && freezeOnceVisible;
-
-  const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
-    setEntry(entry);
-  };
-
-  useEffect(() => {
-    const node = elementRef?.current; // DOM Ref
-    const hasIOSupport = !!window.IntersectionObserver;
-
-    if (!hasIOSupport || frozen || !node) return;
-
-    const observerParams = { threshold, root, rootMargin };
-    const observer = new IntersectionObserver(updateEntry, observerParams);
-
-    observer.observe(node);
-
-    return () => observer.disconnect();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);
-
-  return entry;
-}

package/src/hooks/use-local-storage.ts

@@ -1,24 +0,0 @@
-import { useEffect, useState } from "react";
-
-export default function useLocalStorage<T>(
-  key: string,
-  initialValue: T,
-): [T, (value: T) => void] {
-  const [storedValue, setStoredValue] = useState(initialValue);
-
-  useEffect(() => {
-    // Retrieve from localStorage
-    const item = window.localStorage.getItem(key);
-    if (item) {
-      setStoredValue(JSON.parse(item));
-    }
-  }, [key]);
-
-  const setValue = (value: T) => {
-    // Save state
-    setStoredValue(value);
-    // Save to localStorage
-    window.localStorage.setItem(key, JSON.stringify(value));
-  };
-  return [storedValue, setValue];
-}

package/src/hooks/use-media-query.ts

@@ -1,46 +0,0 @@
-import { useEffect, useState } from "react";
-
-export default function useMediaQuery() {
-  const [device, setDevice] = useState<"mobile" | "tablet" | "desktop" | null>(
-    null,
-  );
-  const [dimensions, setDimensions] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  useEffect(() => {
-    const checkDevice = () => {
-      if (window.matchMedia("(max-width: 640px)").matches) {
-        setDevice("mobile");
-      } else if (
-        window.matchMedia("(min-width: 641px) and (max-width: 1024px)").matches
-      ) {
-        setDevice("tablet");
-      } else {
-        setDevice("desktop");
-      }
-      setDimensions({ width: window.innerWidth, height: window.innerHeight });
-    };
-
-    // Initial detection
-    checkDevice();
-
-    // Listener for windows resize
-    window.addEventListener("resize", checkDevice);
-
-    // Cleanup listener
-    return () => {
-      window.removeEventListener("resize", checkDevice);
-    };
-  }, []);
-
-  return {
-    device,
-    width: dimensions?.width,
-    height: dimensions?.height,
-    isMobile: device === "mobile",
-    isTablet: device === "tablet",
-    isDesktop: device === "desktop",
-  };
-}

package/src/hooks/use-scroll.ts

@@ -1,21 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-export default function useScroll(threshold: number) {
-  const [scrolled, setScrolled] = useState(false);
-
-  const onScroll = useCallback(() => {
-    setScrolled(window.scrollY > threshold);
-  }, [threshold]);
-
-  useEffect(() => {
-    window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
-  }, [onScroll]);
-
-  // also check on first load
-  useEffect(() => {
-    onScroll();
-  }, [onScroll]);
-
-  return scrolled;
-}

package/src/icon-menu.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-
-interface MenuIconProps {
-  icon: ReactNode;
-  text: string;
-}
-
-export function IconMenu({ icon, text }: MenuIconProps) {
-  return (
-    <div className="flex items-center justify-start space-x-2">
-      {icon}
-      <p className="text-sm">{text}</p>
-    </div>
-  );
-}