@m5kdev/web-ui 0.1.4 → 0.1.5

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

@@ -1,181 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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>
-  );
-}