@dub/ui 0.0.8 → 0.0.10

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>
-  );
-}

package/src/icons/copy.tsx

@@ -1,18 +0,0 @@
-export default function Copy({ className }: { className?: string }) {
-  return (
-    <svg
-      fill="none"
-      shapeRendering="geometricPrecision"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-      viewBox="0 0 24 24"
-      width="14"
-      height="14"
-      className={className}
-    >
-      <path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z" />
-    </svg>
-  );
-}

package/src/icons/expanding-arrow.tsx

@@ -1,39 +0,0 @@
-import { cn } from "@dub/utils";
-
-export default function ExpandingArrow({ className }: { className?: string }) {
-  return (
-    <div className="group relative flex items-center">
-      <svg
-        className={cn(
-          "absolute h-4 w-4 transition-all group-hover:translate-x-1 group-hover:opacity-0",
-          className,
-        )}
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 16"
-        width="16"
-        height="16"
-      >
-        <path
-          fillRule="evenodd"
-          d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
-        ></path>
-      </svg>
-      <svg
-        className={`${
-          className ? className : "h-4 w-4"
-        } absolute opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100`}
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 16"
-        width="16"
-        height="16"
-      >
-        <path
-          fillRule="evenodd"
-          d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
-        ></path>
-      </svg>
-    </div>
-  );
-}

package/src/icons/facebook.tsx

@@ -1,23 +0,0 @@
-export default function Facebook({
-  className,
-  fill = "#1977f3",
-}: {
-  className?: string;
-  fill?: string;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1365.12"
-      height="1365.12"
-      viewBox="0 0 14222 14222"
-      className={className}
-    >
-      <circle cx="7111" cy="7112" r="7111" fill={fill} />
-      <path
-        d="M9879 9168l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4969c362 57 733 86 1111 86s749-30 1111-86V9168z"
-        fill="#fff"
-      />
-    </svg>
-  );
-}

package/src/icons/github.tsx

@@ -1,14 +0,0 @@
-export default function Github({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      className={className}
-    >
-      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-    </svg>
-  );
-}

package/src/icons/google.tsx

@@ -1,12 +0,0 @@
-export default function Google({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 488 512"
-      fill="currentColor"
-      className={className}
-    >
-      <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
-    </svg>
-  );
-}

package/src/icons/index.tsx

@@ -1,23 +0,0 @@
-// custom icons
-export { default as Copy } from "./copy";
-export { default as ExpandingArrow } from "./expanding-arrow";
-export { default as Magic } from "./magic";
-export { default as Photo } from "./photo";
-export { default as Tick } from "./tick";
-
-// loaders
-export { default as LoadingCircle } from "./loading-circle";
-export { default as LoadingDots } from "./loading-dots";
-export { default as LoadingSpinner } from "./loading-spinner";
-
-// dub logos
-export { default as Logo } from "./logo";
-export { default as LogoType } from "./logotype";
-
-// brand logos
-export { default as Facebook } from "./facebook";
-export { default as Github } from "./github";
-export { default as Google } from "./google";
-export { default as LinkedIn } from "./linkedin";
-export { default as Twitter } from "./twitter";
-export { default as Unsplash } from "./unsplash";

package/src/icons/linkedin.tsx

@@ -1,22 +0,0 @@
-export default function LinkedIn({
-  className,
-  fill = "#027ab5",
-}: {
-  className?: string;
-  fill?: string;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      className={className}
-    >
-      <path
-        fill={fill}
-        d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
-      />
-    </svg>
-  );
-}