@m5kdev/web-ui 0.1.0

package/src/components/ui/typewriter-effect.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { motion, stagger, useAnimate, useInView } from "motion/react";
+import { useEffect } from "react";
+import { cn } from "#utils";
+
+export const TypewriterEffect = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+
+  const [scope, animate] = useAnimate();
+  const isInView = useInView(scope);
+  useEffect(() => {
+    if (isInView) {
+      animate(
+        "span",
+        {
+          display: "inline-block",
+          opacity: 1,
+          width: "fit-content",
+        },
+        {
+          duration: 0.3,
+          delay: stagger(0.1),
+          ease: "easeInOut",
+        }
+      );
+    }
+  }, [isInView]);
+
+  const renderWords = () => {
+    return (
+      <motion.div ref={scope} className="inline">
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <motion.span
+                  initial={{}}
+                  key={`char-${index}`}
+                  className={cn("dark:text-white text-black opacity-0 hidden", word.className)}
+                >
+                  {char}
+                </motion.span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </motion.div>
+    );
+  };
+  return (
+    <div
+      className={cn(
+        "text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center",
+        className
+      )}
+    >
+      {renderWords()}
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Number.POSITIVE_INFINITY,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-green-500",
+          cursorClassName
+        )}
+      />
+    </div>
+  );
+};
+
+export const TypewriterEffectSmooth = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+  const renderWords = () => {
+    return (
+      <div>
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <span
+                  key={`char-${index}`}
+                  className={cn("dark:text-white text-black ", word.className)}
+                >
+                  {char}
+                </span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("flex space-x-1 my-6", className)}>
+      <motion.div
+        className="overflow-hidden pb-2"
+        initial={{
+          width: "0%",
+        }}
+        whileInView={{
+          width: "fit-content",
+        }}
+        transition={{
+          duration: 2,
+          ease: "linear",
+          delay: 1,
+        }}
+      >
+        <div
+          className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"
+          style={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          {renderWords()}{" "}
+        </div>{" "}
+      </motion.div>
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+
+          repeat: Number.POSITIVE_INFINITY,
+          repeatType: "reverse",
+        }}
+        className={cn("block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-green-500", cursorClassName)}
+      />
+    </div>
+  );
+};

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/useDialog.ts

@@ -0,0 +1,25 @@
+import { type DialogProps, useDialog } from "#components/DialogProvider";
+
+export { useDialog };
+
+export const useConfirmDialog = () => {
+  const dialog = useDialog();
+  return (props: DialogProps) => {
+    dialog({
+      color: "danger",
+      cancelable: true,
+      ...props,
+    });
+  };
+};
+
+export const useAlertDialog = () => {
+  const dialog = useDialog();
+  return (props: DialogProps) => {
+    dialog({
+      color: "warning",
+      cancelable: false,
+      ...props,
+    });
+  };
+};

package/src/icons/GoogleIcon.tsx

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+interface GoogleIconProps extends ComponentPropsWithoutRef<"svg"> {}
+
+export function GoogleIcon(props: GoogleIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="10 10 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M29.6 20.2273C29.6 19.5182 29.5364 18.8364 29.4182 18.1818H20V22.05H25.3818C25.15 23.3 24.4455 24.3591 23.3864 25.0682V27.5773H26.6182C28.5091 25.8364 29.6 23.2727 29.6 20.2273Z"
+        fill="#4285F4"
+      />
+      <path
+        d="M20 30C22.7 30 24.9636 29.1045 26.6181 27.5773L23.3863 25.0682C22.4909 25.6682 21.3454 26.0227 20 26.0227C17.3954 26.0227 15.1909 24.2636 14.4045 21.9H11.0636V24.4909C12.7091 27.7591 16.0909 30 20 30Z"
+        fill="#34A853"
+      />
+      <path
+        d="M14.4045 21.9C14.2045 21.3 14.0909 20.6591 14.0909 20C14.0909 19.3409 14.2045 18.7 14.4045 18.1V15.5091H11.0636C10.3864 16.8591 10 18.3864 10 20C10 21.6136 10.3864 23.1409 11.0636 24.4909L14.4045 21.9Z"
+        fill="#FBBC04"
+      />
+      <path
+        d="M20 13.9773C21.4681 13.9773 22.7863 14.4818 23.8227 15.4727L26.6909 12.6045C24.9591 10.9909 22.6954 10 20 10C16.0909 10 12.7091 12.2409 11.0636 15.5091L14.4045 18.1C15.1909 15.7364 17.3954 13.9773 20 13.9773Z"
+        fill="#E94235"
+      />
+    </svg>
+  );
+}

package/src/icons/LinkedInIcon.tsx

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+interface LinkedInIconProps extends ComponentPropsWithoutRef<"svg"> {}
+
+export function LinkedInIcon(props: LinkedInIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      height="72"
+      width="72"
+      viewBox="0 0 72 72"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M8 72h56c4.418 0 8-3.582 8-8V8c0-4.418-3.582-8-8-8H8C3.582 0 0 3.582 0 8v56c0 4.418 3.582 8 8 8Z"
+          fill="#007EBB"
+        />
+        <path
+          d="M62 62H51.316V43.802c0-4.99-1.896-7.778-5.845-7.778-4.296 0-6.541 2.901-6.541 7.777V62H28.633V27.333h10.297v4.67S42.026 26.274 49.383 26.274C56.736 26.274 62 30.764 62 40.051zM16.349 22.794c-3.507 0-6.349-2.864-6.349-6.397C10 12.864 12.842 10 16.349 10c3.507 0 6.348 2.864 6.348 6.397 0 3.533-2.84 6.397-6.348 6.397zM11.033 62h10.737V27.333H11.033z"
+          fill="#FFF"
+        />
+      </g>
+    </svg>
+  );
+}
+
+

package/src/icons/MicrosoftIcon.tsx

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+interface MicrosoftIconProps extends ComponentPropsWithoutRef<"svg"> {}
+
+export function MicrosoftIcon(props: MicrosoftIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 21 21"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path fill="#F35325" d="M0 0h10v10H0z" />
+      <path fill="#81BC06" d="M11 0h10v10H11z" />
+      <path fill="#05A6F0" d="M0 11h10v10H0z" />
+      <path fill="#FFBA08" d="M11 11h10v10H11z" />
+    </svg>
+  );
+}
+
+

package/src/lib/chatwoot.ts

@@ -0,0 +1,51 @@
+export function startChatwoot(
+  {
+    baseUrl,
+    websiteToken,
+  }: {
+    baseUrl: string;
+    websiteToken: string;
+  },
+  {
+    user,
+  }: {
+    user?: {
+      id: string;
+      email: string;
+      name?: string | null;
+      image?: string | null;
+    };
+  },
+  allowAnonymous?: boolean
+) {
+  // avoid loading twice
+  if ((window as any).chatwootSDK) return;
+
+  if (!allowAnonymous && !user) {
+    throw new Error("User is required to start Chatwoot");
+  }
+
+  const script = document.createElement("script");
+  script.src = `${baseUrl}/packs/js/sdk.js`;
+  script.async = true;
+
+  script.onload = () => {
+    (window as any).chatwootSDK.run({
+      websiteToken,
+      baseUrl,
+    });
+  };
+
+  document.body.appendChild(script);
+
+  if (user) {
+    window.addEventListener("chatwoot:ready", () => {
+      // @ts-expect-error chatwoot is in global window
+      window.$chatwoot.setUser(user.id, {
+        email: user.email,
+        name: user.name,
+        avatar_url: user.image,
+      });
+    });
+  }
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/modules/app/components/AppLoader.tsx

@@ -0,0 +1,9 @@
+import { Spinner, type SpinnerProps } from "@heroui/react";
+
+export function AppLoader(props: SpinnerProps) {
+  return (
+    <div className="flex h-screen w-full justify-center align-center">
+      <Spinner size="lg" {...props} />
+    </div>
+  );
+}

package/src/modules/app/components/AppShell.tsx

@@ -0,0 +1,21 @@
+import { SidebarInset, SidebarProvider } from "@m5kdev/web-ui/components/ui/sidebar";
+import type { ReactNode } from "react";
+import { Outlet } from "react-router";
+import { AppSidebar, type AppSidebarProps } from "#modules/app/components/AppSidebar";
+
+export type AppShellProps = {
+  header?: ReactNode;
+  sidebar: AppSidebarProps;
+};
+
+export function AppShell({ header, sidebar }: AppShellProps) {
+  return (
+    <SidebarProvider>
+      {header}
+      <AppSidebar {...sidebar} />
+      <SidebarInset>
+        <Outlet />
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/src/modules/app/components/AppSidebar.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "#components/ui/sidebar";
+
+export type AppSidebarProps = {
+  header: ReactNode;
+  content?: ReactNode;
+
+  footer?: ReactNode;
+};
+
+export function AppSidebar({ header, content, footer }: AppSidebarProps) {
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>{header}</SidebarHeader>
+      <SidebarContent>{content}</SidebarContent>
+      <SidebarFooter>{footer}</SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/src/modules/app/components/AppSidebarContent.tsx

@@ -0,0 +1,73 @@
+import { Link } from "react-router";
+import { CollapsibleSidebarMenuItem } from "#components/CollapsibleSidebarMenuItem";
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "#components/ui/sidebar";
+
+type NavigationItem = {
+  label: string;
+  icon: React.ReactNode;
+  link: string;
+  badge?: React.ReactNode;
+};
+
+export type AppSidebarContentProps = {
+  navigationItems: (NavigationItem & {
+    defaultOpen?: boolean;
+    subItems?: NavigationItem[];
+  })[];
+  navigationState: Record<string, boolean>;
+  onNavigationStateChange: (state: Record<string, boolean>) => void;
+};
+
+export function AppSidebarContent({
+  navigationItems,
+  navigationState,
+  onNavigationStateChange,
+}: AppSidebarContentProps) {
+  return (
+    <SidebarGroup>
+      <SidebarMenu>
+        {navigationItems.map((item) =>
+          item.subItems ? (
+            <CollapsibleSidebarMenuItem
+              key={item.label}
+              defaultOpen={item.defaultOpen}
+              open={navigationState[item.label]}
+              label={item.label}
+              icon={item.icon}
+              link={item.link}
+              badge={item.badge}
+              onOpenChange={(open) =>
+                onNavigationStateChange({ ...navigationState, [item.label]: open })
+              }
+            >
+              {item.subItems.map((subItem) => (
+                <SidebarMenuItem key={subItem.label}>
+                  <SidebarMenuButton asChild>
+                    <Link to={subItem.link}>
+                      {subItem.icon}
+                      <span>{subItem.label}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </CollapsibleSidebarMenuItem>
+          ) : (
+            <SidebarMenuItem key={item.label}>
+              <SidebarMenuButton asChild>
+                <Link to={item.link}>
+                  {item.icon}
+                  <span>{item.label}</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          )
+        )}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}

package/src/modules/app/components/AppSidebarHeader.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@heroui/react";
+import { useSidebar } from "@m5kdev/web-ui/components/ui/sidebar";
+import { cn } from "@m5kdev/web-ui/utils";
+import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { Link } from "react-router";
+
+export function AppSidebarHeader({
+  logo,
+  title,
+  size = 30,
+}: {
+  logo: { src: string; alt: string };
+  title: string;
+  size?: number;
+}) {
+  const { open, toggleSidebar } = useSidebar();
+  return (
+    <div
+      className={cn(
+        "flex  justify-between items-center overflow-hidden gap-2",
+        open ? "w-[239px] px-2 flex-row" : "w-auto flex-col"
+      )}
+    >
+      <Link
+        to="/"
+        className={cn(
+          "flex items-center font-medium overflow-hidden gap-2",
+          open ? "w-[239px] px-2" : "w-auto"
+        )}
+        style={{ height: size }}
+      >
+        <img
+          className="shrink-0"
+          src={logo.src}
+          alt={logo.alt}
+          style={{ width: size, height: size }}
+        />
+        <span className="group-data-[collapsible=icon]:hidden font-semibold text-lg text-neutral-900">
+          {title}
+        </span>
+      </Link>
+      <Button
+        isIconOnly
+        variant="faded"
+        size="sm"
+        className="w-4 h-6"
+        onPress={() => toggleSidebar()}
+      >
+        {open ? (
+          <ChevronsLeftIcon className="w-4 h-4" />
+        ) : (
+          <ChevronsRightIcon className="w-4 h-4" />
+        )}
+      </Button>
+    </div>
+  );
+}

package/src/modules/app/components/AppSidebarInvites.tsx

@@ -0,0 +1,32 @@
+import { Badge, Button, Tooltip } from "@heroui/react";
+import { useSidebar } from "@m5kdev/web-ui/components/ui/sidebar";
+import { cn } from "@m5kdev/web-ui/utils";
+import { GiftIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+export function AppSidebarInvites({ count }: { count: number }) {
+  const { open } = useSidebar();
+  const { t } = useTranslation("web-ui");
+  return (
+    <div className={cn("flex justify-center w-auto")}>
+      <Tooltip content={t("sidebar.invites.title")} placement="right" isDisabled={open}>
+        <Badge color="primary" variant="faded" content={count} size="sm" isOneChar>
+          <Button
+            as={Link}
+            to="/invites"
+            className={cn("flex items-center gap-2")}
+            isIconOnly={!open}
+            size="sm"
+            variant="light"
+          >
+            <GiftIcon className="w-4 h-4 text-neutral-500" />
+            <span className="group-data-[collapsible=icon]:hidden text-sm text-neutral-500">
+              {t("sidebar.invites.title")}
+            </span>
+          </Button>
+        </Badge>
+      </Tooltip>
+    </div>
+  );
+}