Add create-error utility and update import paths for cn() (#72)

* ✨ Add create-error utility with preview and category

* ✨ Update import paths for utility functions to use cuicui package one

apps/website/src/components/coming-soon.tsx

@@ -1,5 +1,5 @@
 import GradientText from "../ui/gradient-text";
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 export default function ComingSoonCard() {
   return (

apps/website/src/components/component-wrapper/animated-tab-motion-div.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { type MotionProps, motion } from "motion/react";
 import type React from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 export default function AnimatedTabMotionDiv({
   className,
   ...props

apps/website/src/components/component-wrapper/component-tab-renderer.tsx

@@ -14,7 +14,7 @@ import {
   ScrollAreaViewport,
   ScrollBar,
 } from "#/src/ui/shadcn/scrollarea";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
 import { createElement } from "react";
 import {

apps/website/src/components/component-wrapper/component-wrapper.tsx

@@ -2,7 +2,7 @@
 import { useLayoutEffect, useState, type ReactNode } from "react";
 import { CustomIframe } from "#/src/components/custom-iframe-component";
 import type { ComponentHeightType } from "@cuicui/ui/lib/types/component";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
 import { RefreshCwIcon } from "lucide-react";
 import { ScrollArea, ScrollAreaViewport } from "#/src/ui/shadcn/scrollarea";

apps/website/src/components/component-wrapper/variant-tabs.tsx

@@ -1,7 +1,7 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import ComponentTabRenderer from "#/src/components/component-wrapper/component-tab-renderer";
 
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import type { ComponentType } from "@cuicui/ui/lib/types/component";
 
 export type TabType = "preview" | "code-component" | "code-preview";

apps/website/src/components/custom-iframe-component.tsx

@@ -3,8 +3,9 @@ import type React from "react";
 import Frame from "react-frame-component";
 
 import type { ComponentHeightType } from "@cuicui/ui/lib/types/component";
-import { cn } from "#/src/utils/cn";
+
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
+import { cn } from "@/cuicui/utils/cn";
 
 export const CustomIframe = ({
   children,

apps/website/src/components/floating-dock-navigation/floating-dock-toggle-theme.tsx

@@ -1,6 +1,5 @@
 "use client";
-import React from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import { MoonIcon, SunIcon } from "lucide-react";
 
 import { useTheme } from "next-themes";

apps/website/src/components/floating-dock-navigation/floating-dock.tsx

@@ -1,7 +1,7 @@
 import { sectionList } from "@/section-list";
 import { FloatingDock } from "#/src/components/floating-dock-navigation/floating-docks-component";
 import { ArrowUpRightIcon, GithubIcon } from "lucide-react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import Link from "next/link";
 
 import PillToggleTheme from "@/cuicui/application-ui/theme/pill-switch-theme/default.variant";

apps/website/src/components/navigation/animated-background.tsx

@@ -9,7 +9,7 @@ import {
   useId,
   useState,
 } from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 export type AnimatedBackgroundProps = {
   children:

apps/website/src/components/navigation/desktop-menu.tsx

@@ -3,7 +3,6 @@ import Link from "next/link";
 import Image from "next/image";
 
 import LogoLarge from "#/src/assets/logo/logo-large.png";
-import { cn } from "../../utils/cn";
 
 import Byline from "../../ui/byline";
 
@@ -12,6 +11,7 @@ import StarCuicuiGithubButton from "../../ui/star-github-project-button";
 import { SearchMenu } from "../search-menu/search-menu";
 import NavigationMenu from "./navigation-menu";
 import InfoMenuList from "#/src/components/navigation/info-menu-list";
+import { cn } from "@/cuicui/utils/cn";
 
 export function DesktopSideMenu({
   className,

apps/website/src/components/navigation/navigation-item.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { usePathname, useSelectedLayoutSegments } from "next/navigation";
 import type { AnchorHTMLAttributes, ReactNode } from "react";
 
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import type { SectionType } from "@cuicui/ui/lib/types/component";
 
 export function GlobalNavItem({

apps/website/src/components/navigation/navigation-menu.tsx

@@ -6,7 +6,7 @@ import {
 } from "#/src/components/navigation/navigation-item";
 import { sectionList } from "@/section-list";
 import type { CategoryType } from "@cuicui/ui/lib/types/component";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 export default function NavigationMenu({
   isMobile,

apps/website/src/components/not-found-card.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import GradientText from "../ui/gradient-text";
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 export default function NotFoundCard() {
   return (

apps/website/src/ui/badge.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 
 import type React from "react";
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const badgeVariants = cva(
   cn(

apps/website/src/ui/button.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import { type HTMLMotionProps, motion } from "motion/react";
 import type React from "react";
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import GradientContainer from "./gradient-container";
 import GradientText from "./gradient-text";
 

apps/website/src/ui/byline.tsx

@@ -1,6 +1,4 @@
 import Link from "next/link";
-import { cn } from "../utils/cn";
-import GradientContainer from "./gradient-container";
 import {
   ModernGradientContainerContent,
   ModernGradientContainerRoot,

apps/website/src/ui/code-command-container.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import CodeHighlighter from "./code-highlighter";
 
 // import { ScrollArea, ScrollBar } from "./shadcn/scrollarea";

apps/website/src/ui/code-highlighter.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "react";
 import CopyToClipboardButton from "#/src/components/component-wrapper/copy-to-clipboard-button";
 import ShikiCode from "@cuicui/ui/cuicui/application-ui/code/advanced-code-block/code-highlighter";
 
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 export default function CodeHighlighter({
   code,
   className,

apps/website/src/ui/copy-to-clipboard-code-snippet-dropdown.tsx

@@ -2,7 +2,6 @@
 
 import { CheckIcon, ClipboardIcon } from "lucide-react";
 import { toast } from "sonner";
-import { cn } from "../utils/cn";
 
 import { Button } from "./shadcn/button";
 import { ScrollArea, ScrollAreaViewport, ScrollBar } from "./shadcn/scrollarea";

apps/website/src/ui/gradient-container.tsx

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 export const GradientContainer = ({
   children,

apps/website/src/ui/gradient-text.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 export const GradientText = ({
   children,

apps/website/src/ui/navigation-menu.tsx

@@ -9,7 +9,7 @@ import {
   useEffect,
 } from "react";
 import { cloneElement, isValidElement, useId, useState } from "react";
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 interface NavigationMenuProps extends React.HTMLAttributes<HTMLDivElement> {
   children: ReactNode;

apps/website/src/ui/shadcn/button.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 
 import { type ButtonHTMLAttributes, forwardRef } from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const buttonVariants = cva(
   cn(

apps/website/src/ui/shadcn/command.tsx

@@ -11,7 +11,7 @@ import {
   forwardRef,
 } from "react";
 import { Dialog, DialogContent } from "#/src/ui/shadcn/dialog";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const Command = forwardRef<
   ElementRef<typeof CommandPrimitive>,

apps/website/src/ui/shadcn/dialog.tsx

@@ -10,7 +10,7 @@ import {
   type HTMLAttributes,
   forwardRef,
 } from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const Dialog = DialogPrimitive.Root;
 

apps/website/src/ui/shadcn/dropdown-menu.tsx

@@ -9,7 +9,7 @@ import {
   type HTMLAttributes,
   forwardRef,
 } from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

apps/website/src/ui/shadcn/resizable.tsx

@@ -4,7 +4,7 @@ import { GripVertical } from "lucide-react";
 import type { ComponentProps } from "react";
 
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const ResizablePanelGroup = ({
   className,

apps/website/src/ui/shadcn/scrollarea.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
 

apps/website/src/ui/shadcn/select.tsx

@@ -8,7 +8,7 @@ import {
   type ElementRef,
   forwardRef,
 } from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const Select = SelectPrimitive.Root;
 

apps/website/src/ui/shadcn/tabs.tsx

@@ -7,7 +7,7 @@ import {
   type ElementRef,
   forwardRef,
 } from "react";
-import { cn } from "#/src/utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 const Tabs = TabsPrimitive.Root;
 

apps/website/src/ui/stepper.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { cn } from "../utils/cn";
+import { cn } from "@/cuicui/utils/cn";
 
 export const StaticStep = ({
   step,

packages/ui/categories-previews-list.ts

@@ -8,6 +8,7 @@ import other_cursors_preview from "./cuicui/other/cursors/preview";
 import utils_catch_error_preview from "./cuicui/utils/catch-error/preview";
 import utils_sleep_preview from "./cuicui/utils/sleep/preview";
 import utils_cn_preview from "./cuicui/utils/cn/preview";
+import utils_create_error_preview from "./cuicui/utils/create-error/preview";
 import marketing_ui_statistics_preview from "./cuicui/marketing-ui/statistics/preview";
 import marketing_ui_footer_preview from "./cuicui/marketing-ui/footer/preview";
 import marketing_ui_carousels_preview from "./cuicui/marketing-ui/carousels/preview";
@@ -91,6 +92,7 @@ export const categoriesPreviewsList: Record<string, () => JSX.Element> = {
   "catch-error": utils_catch_error_preview,
   sleep: utils_sleep_preview,
   cn: utils_cn_preview,
+  "create-error": utils_create_error_preview,
   statistics: marketing_ui_statistics_preview,
   footer: marketing_ui_footer_preview,
   carousels: marketing_ui_carousels_preview,

packages/ui/cuicui/utils/create-error/category.ts

@@ -0,0 +1,11 @@
+import type { CategoryMetaType } from "@/lib/types/component";
+import { ChevronsLeftRightEllipsisIcon } from "lucide-react";
+
+export const Category: CategoryMetaType = {
+  name: "Create Error",
+  description: "Utilities to create normalized errors accross the application",
+  icon: ChevronsLeftRightEllipsisIcon,
+  latestUpdateDate: new Date("2024-12-30"),
+};
+
+export default Category;

packages/ui/cuicui/utils/create-error/create-error/component.ts

@@ -0,0 +1,8 @@
+import type { ComponentMetaType } from "@/lib/types/component";
+
+export const Component: ComponentMetaType = {
+  name: "Create Error",
+  description: "Utilities to create normalized errors accross the application",
+};
+
+export default Component;

packages/ui/cuicui/utils/create-error/create-error/create-error.variant.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { createError, type NormalizedError } from "@/cuicui/utils/create-error";
+import { useEffect, useState } from "react";
+
+export const PreviewCreateError = () => {
+  const [error, setError] = useState<NormalizedError | null>(null);
+  useEffect(() => {
+    console.log("error", error);
+  }, [error]);
+  return (
+    <div className="cuicui-default-style">
+      <button
+        type="button"
+        onClick={() => {
+          setError(createError("This is an error"));
+        }}
+      >
+        Display a simple error
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setError(
+            createError("BAD_REQUEST", {
+              message: "This is a custom error",
+              fatal: true,
+            }),
+          );
+        }}
+      >
+        Display an error with a custom message
+      </button>
+      <p>Error message: {error?.message}</p>
+      <pre>{JSON.stringify(error, null, 2)}</pre>
+    </div>
+  );
+};
+
+export default PreviewCreateError;