@c-rex/components 0.0.9 → 0.0.10

package/package.json

@@ -1,74 +1,57 @@
 {
   "name": "@c-rex/components",
-  "version": "0.0.9",
-  "type": "module",
+  "version": "0.0.10",
   "files": [
-    "dist"
+    "src"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
+  "sideEffects": false,
   "exports": {
     "./autocomplete": {
-      "types": "./dist/autocomplete.d.ts",
-      "import": "./dist/autocomplete.esm.js",
-      "require": "./dist/autocomplete.cjs.js"
+      "types": "./src/autocomplete.tsx",
+      "import": "./src/autocomplete.tsx"
     },
     "./blog-card": {
-      "types": "./dist/blog-card.d.ts",
-      "import": "./dist/blog-card.esm.js",
-      "require": "./dist/blog-card.cjs.js"
+      "types": "./src/blog-card.tsx",
+      "import": "./src/blog-card.tsx"
     },
     "./blur-image": {
-      "types": "./dist/blur-image.d.ts",
-      "import": "./dist/blur-image.esm.js",
-      "require": "./dist/blur-image.cjs.js"
+      "types": "./src/blur-image.tsx",
+      "import": "./src/blur-image.tsx"
     },
     "./breadcrumb": {
-      "types": "./dist/breadcrumb.d.ts",
-      "import": "./dist/breadcrumb.esm.js",
-      "require": "./dist/breadcrumb.cjs.js"
+      "types": "./src/breadcrumb.tsx",
+      "import": "./src/breadcrumb.tsx"
     },
     "./empty": {
-      "types": "./dist/empty.d.ts",
-      "import": "./dist/empty.esm.js",
-      "require": "./dist/empty.cjs.js"
+      "types": "./src/empty.tsx",
+      "import": "./src/empty.tsx"
     },
     "./navbar": {
-      "types": "./dist/navbar.d.ts",
-      "import": "./dist/navbar.esm.js",
-      "require": "./dist/navbar.cjs.js"
+      "types": "./src/navbar.tsx",
+      "import": "./src/navbar.tsx"
     },
-    "./search-wrapper": {
-      "types": "./dist/providers/search-state-wrapper.d.ts",
-      "import": "./dist/providers/search-state-wrapper.esm.js",
-      "require": "./dist/providers/search-state-wrapper.cjs.js"
+    "./providers/search-state-wrapper": {
+      "types": "./src/providers/search-state-wrapper.tsx",
+      "import": "./src/providers/search-state-wrapper.tsx"
     },
     "./result-list": {
-      "types": "./dist/result-list.d.ts",
-      "import": "./dist/result-list.esm.js",
-      "require": "./dist/result-list.cjs.js"
+      "types": "./src/result-list.tsx",
+      "import": "./src/result-list.tsx"
     },
     "./result-view/blog": {
-      "types": "./dist/result-view/blog.d.ts",
-      "import": "./dist/result-view/blog.esm.js",
-      "require": "./dist/result-view/blog.cjs.js"
+      "types": "./src/result-view/blog.tsx",
+      "import": "./src/result-view/blog.tsx"
     },
     "./result-view/table": {
-      "types": "./dist/result-view/table.d.ts",
-      "import": "./dist/result-view/table.esm.js",
-      "require": "./dist/result-view/table.cjs.js"
+      "types": "./src/result-view/table.tsx",
+      "import": "./src/result-view/table.tsx"
     },
     "./sidebar": {
-      "types": "./dist/sidebar.d.ts",
-      "import": "./dist/sidebar.esm.js",
-      "require": "./dist/sidebar.cjs.js"
-    },
-    "./package.json": "./package.json"
+      "types": "./src/sidebar.tsx",
+      "import": "./src/sidebar.tsx"
+    }
   },
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -82,7 +65,6 @@
     "@storybook/nextjs": "^8.6.12",
     "@storybook/react": "^8.6.12",
     "@storybook/test": "^8.6.12",
-    "@swc/core": "^1.11.21",
     "@turbo/gen": "^2.4.4",
     "@types/node": "^22.13.10",
     "@types/react": "19.0.10",
@@ -97,12 +79,12 @@
     "typescript": "latest"
   },
   "dependencies": {
-    "@c-rex/config": "*",
     "@c-rex/contexts": "*",
     "@c-rex/interfaces": "*",
     "@c-rex/services": "*",
     "@c-rex/ui": "*",
     "@c-rex/utils": "*",
+    "@c-rex/config": "*",
     "next": "^14",
     "react": "^18",
     "react-dom": "^18",

package/src/autocomplete.tsx

@@ -0,0 +1,113 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { Check } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Input } from "@c-rex/ui/input";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandList
+} from "@c-rex/ui/command";
+import {
+    Popover,
+    PopoverAnchor,
+    PopoverContent
+} from "@c-rex/ui/popover";
+
+type Props = {
+    initialValue: string;
+    onSelect: (value: string) => void;
+    onSearch: (value: string) => Promise<string[]>;
+};
+
+export const AutoComplete = ({
+    initialValue,
+    onSearch,
+    onSelect,
+}: Props) => {
+    const [query, setQuery] = useState(initialValue);
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        const debounceFetch = setTimeout(() => {
+            if (query) {
+                onSearch(query).then(setSuggestions);
+            } else {
+                setSuggestions([]);
+            }
+        }, 300);
+
+        return () => clearTimeout(debounceFetch);
+    }, [onSearch, query]);
+
+    return (
+        <div className="flex items-center">
+            <Popover open={open} onOpenChange={setOpen}>
+                <Command shouldFilter={false}>
+                    <PopoverAnchor asChild>
+                        <CommandPrimitive.Input
+                            asChild
+                            value={query}
+                            onValueChange={setQuery}
+                            onKeyDown={(e) => setOpen(e.key !== "Escape")}
+                            onMouseDown={() => setOpen(false)}
+                            onFocus={() => setOpen(true)}
+                        >
+                            <Input />
+                        </CommandPrimitive.Input>
+                    </PopoverAnchor>
+
+                    {!open && <CommandList aria-hidden="true" className="hidden" />}
+
+                    <PopoverContent
+                        asChild
+                        onOpenAutoFocus={(e) => e.preventDefault()}
+                        onInteractOutside={(e) => {
+                            if (
+                                e.target instanceof Element &&
+                                e.target.hasAttribute("cmdk-input")
+                            ) {
+                                e.preventDefault();
+                            }
+                        }}
+                        className="w-[--radix-popover-trigger-width] p-0"
+                    >
+                        <CommandList>
+                            {/*isLoading && (
+                                <CommandPrimitive.Loading>
+                                    <div className="p-1">
+                                        <Skeleton className="h-6 w-full" />
+                                    </div>
+                                </CommandPrimitive.Loading>
+                            )*/}
+
+                            {suggestions.length > 0 ? (
+                                <CommandGroup>
+                                    {suggestions.map((option) => (
+                                        <CommandItem
+                                            key={option}
+                                            value={option}
+                                            onMouseDown={(e) => e.preventDefault()}
+                                            onSelect={(inputValue) => {
+                                                setOpen(false);
+                                                onSelect(inputValue ?? "");
+                                            }}
+                                        >
+                                            <Check className="mr-2 h-4 w-4 opacity-0" />
+                                            {option}
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                            ) : (
+                                <CommandEmpty>No suggestions.</CommandEmpty>
+                            )}
+                        </CommandList>
+                    </PopoverContent>
+                </Command>
+            </Popover>
+        </div>
+    );
+}

package/src/blog-card.tsx

@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { cn } from "@c-rex/utils";
+import { BlurImage } from "./blur-image";
+
+//import Author from "./author";
+
+interface BlogCardProp {
+    data: {
+        title: string;
+        blurDataURL: string;
+        image: string;
+        description: string;
+        authors: string;
+        _id: string;
+        date: string;
+        slug: string;
+    };
+    priority?: boolean;
+    horizontal?: boolean;
+}
+
+export const BlogCard = ({
+    data,
+    priority,
+    horizontal = false,
+}: BlogCardProp) => {
+    return (
+        <article
+            className={cn(
+                "group relative",
+                horizontal
+                    ? "grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
+                    : "flex flex-col space-y-2",
+            )}
+        >
+            {data.image && (
+                <div className="w-full overflow-hidden rounded-xl border">
+                    <BlurImage
+                        alt={data.title}
+                        blurDataURL={data.blurDataURL}
+                        className={cn(
+                            "size-full object-cover object-center",
+                            horizontal ? "lg:h-72" : null,
+                        )}
+                        width={800}
+                        height={400}
+                        priority={priority}
+                        placeholder="blur"
+                        src={data.image}
+                        sizes="(max-width: 768px) 750px, 600px"
+                    />
+                </div>
+            )}
+            <div
+                className={cn(
+                    "flex flex-1 flex-col",
+                    horizontal ? "justify-center" : "justify-between",
+                )}
+            >
+                <div className="w-full">
+                    <h2 className="my-1.5 line-clamp-2 font-heading text-2xl">
+                        {data.title}
+                    </h2>
+                    {data.description && (
+                        <p className="line-clamp-2 text-muted-foreground">
+                            {data.description}
+                        </p>
+                    )}
+                </div>
+                <div className="mt-4 flex items-center space-x-3">
+                    <div className="flex items-center -space-x-2">
+                        {data.authors && (
+                            <p className="text-sm text-muted-foreground">{data.authors}</p>
+                        )}
+                    </div>
+
+                    {data.date && (
+                        <p className="text-sm text-muted-foreground">{data.date}</p>
+                    )}
+                </div>
+            </div>
+            <Link href={data.slug} className="absolute inset-0" target="_blank">
+                <span className="sr-only">View Article</span>
+            </Link>
+        </article>
+    );
+};

package/src/blur-image.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import type { ComponentProps } from "react";
+import Image from "next/image";
+import { cn } from "@c-rex/utils";
+
+export const BlurImage = (props: ComponentProps<typeof Image>) => {
+    const [isLoading, setLoading] = useState(true);
+
+    return (
+        <Image
+            {...props}
+            alt={props.alt}
+            className={cn(
+                props.className,
+                "duration-500 ease-in-out",
+                isLoading ? "blur-sm" : "blur-0",
+            )}
+            onLoad={() => setLoading(false)}
+        />
+    );
+}

package/src/breadcrumb.tsx

@@ -0,0 +1,81 @@
+import { FC, ReactNode } from "react";
+import {
+    Breadcrumb as BreadcrumbComponent,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator
+} from "@c-rex/ui/breadcrumb";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { TreeOfContent } from "@c-rex/interfaces";
+
+interface BreadcrumbProps {
+    items: TreeOfContent[];
+    loading?: boolean;
+}
+
+export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
+    if (!items) {
+        return null;
+    }
+
+    if (loading) {
+        return (
+            <BreadcrumbComponent>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbPage>Home</BreadcrumbPage>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <Skeleton className="w-40 h-6" />
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <Skeleton className="w-40 h-6" />
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </BreadcrumbComponent>
+        );
+    }
+
+    const homeItem: TreeOfContent = {
+        link: "/",
+        label: "Home",
+        id: "home",
+        active: false,
+        children: [],
+    };
+
+    const newItemList: TreeOfContent[] = [homeItem, ...items];
+
+    const renderLink = (showLink: boolean, item: TreeOfContent): ReactNode => {
+        if (showLink) {
+            return <BreadcrumbLink href={item.link}>{item.label}</BreadcrumbLink>;
+        }
+
+        return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
+    };
+
+    return (
+        <BreadcrumbComponent>
+            <BreadcrumbList>
+                {newItemList.map((item, index) => {
+                    const isLast = index === newItemList.length - 1;
+
+                    return (
+                        <>
+                            <BreadcrumbItem key={`${item.label}-item`}>
+                                {renderLink(!isLast, item)}
+                            </BreadcrumbItem>
+                            {!isLast && (
+                                <BreadcrumbSeparator key={`${item.label}-separator`} />
+                            )}
+                        </>
+                    );
+                })}
+            </BreadcrumbList>
+        </BreadcrumbComponent>
+    );
+};

package/src/empty.tsx

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
+
+export const Empty: FC = () => {
+    return (
+        <Alert className="my-2">
+            <AlertTitle>No results</AlertTitle>
+            <AlertDescription>
+                No data available. Please try adjusting your search or filter criteria.
+            </AlertDescription>
+        </Alert>
+    );
+};

package/src/navbar.tsx

@@ -0,0 +1,66 @@
+import { FC } from "react";
+
+import Link from "next/link";
+import { Button } from "@c-rex/ui/button";
+import Image from "next/image";
+
+interface NavBarProps {
+    scroll?: boolean;
+    large?: boolean;
+}
+
+export const NavBar: FC<NavBarProps> = () => {
+    return (
+        <header className="sticky top-0 z-40 flex w-full bg-background/60 backdrop-blur-xl transition-all bg-transparent border-b justify-center py-4">
+            <div className="container flex justify-between">
+                <div className="flex gap-6 md:gap-10">
+                    <Link href="/" className="flex items-center space-x-1.5">
+                        <Image
+                            src="/img/logo.png"
+                            alt="C-rex Logo"
+                            width={88}
+                            height={50}
+                        />
+                    </Link>
+
+                    <nav className="hidden gap-6 md:flex">
+                        {/*
+                        TODO: add map to load links
+                        TODO: add function to validate active item
+                    */}
+                        <Link
+                            href={"/blog"}
+                            prefetch={true}
+                            className={
+                                "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm"
+                            }
+                        >
+                            Blog
+                        </Link>
+
+                        <Link
+                            href={"#"}
+                            prefetch={true}
+                            className={
+                                "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm"
+                            }
+                        >
+                            Documentation
+                        </Link>
+                    </nav>
+                </div>
+
+                <div className="flex items-center space-x-3">
+                    <Button
+                        className="hidden gap-2 px-5 md:flex"
+                        variant="default"
+                        size="sm"
+                        rounded="full"
+                    >
+                        <span>Sign In</span>
+                    </Button>
+                </div>
+            </div>
+        </header>
+    );
+};

package/src/providers/search-state-wrapper.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { SearchProvider } from "@c-rex/contexts";
+import { FC, ReactNode } from "react";
+
+interface SearchStateWrapperProps {
+    children: ReactNode;
+    filters: {
+        searchValue: string;
+        page: number;
+        selectedLanguage: string[];
+        availableLanguages: string[];
+    };
+}
+
+export const SearchStateWrapper: FC<SearchStateWrapperProps> = ({
+    children,
+    filters,
+}) => {
+    return <SearchProvider value={{ ...filters }}>{children}</SearchProvider>;
+};

package/src/result-list.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { informationUnitsItems } from "@c-rex/interfaces";
+import { Empty } from "./empty";
+//import { CUSTOMER_CONFIG } from '@/config/customerConfig';
+//import { RESULT_VIEW_OPTIONS } from '@/constants/components';
+import BlogView from './result-view/blog';
+
+const ViewComponent = BlogView;
+
+interface ResultListProps {
+    items: informationUnitsItems[];
+}
+
+export const ResultList: FC<ResultListProps> = ({ items }) => {
+    return <>{items.length == 0 ? <Empty /> : <ViewComponent items={items} />}</>;
+};

package/src/result-view/blog-view.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlogView from '../result-view/blog';
+
+const meta: Meta<typeof BlogView> = {
+    title: 'Components/ResultView/Blog',
+    component: BlogView,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof BlogView>;
+
+const mockItems = [
+    {
+        id: '1',
+        shortId: 'doc-1',
+        labels: [
+            { value: 'Getting Started with C-Rex', language: 'en-US' },
+            { value: 'Começando com C-Rex', language: 'pt-BR' }
+        ],
+        languages: ['pt-BR'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    },
+    {
+        id: '2',
+        shortId: 'doc-2',
+        labels: [
+            { value: 'Advanced Configuration Guide', language: 'en-US' }
+        ],
+        languages: ['en-US'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    },
+    {
+        id: '3',
+        shortId: 'doc-3',
+        labels: [
+            { value: 'API Documentation', language: 'en-US' },
+            { value: 'Documentation API', language: 'fr-FR' }
+        ],
+        languages: ['fr-FR'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    }
+];
+
+export const Default: Story = {
+    args: {
+        items: mockItems as any
+    }
+};

package/src/result-view/blog.tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+
+import { BlogCard } from "../blog-card";
+import { informationUnitsItems, Labels } from "@c-rex/interfaces";
+
+interface BlogViewProps {
+    items: informationUnitsItems[];
+}
+
+const BlogView: FC<BlogViewProps> = ({ items }) => {
+    const getTitle = (labels: Labels[]): string => {
+        return labels.map((item) => item.value).join();
+    };
+
+    return (
+        <div className="grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3">
+            {items.map((item, index) => {
+                return (
+                    <BlogCard
+                        key={index}
+                        data={{
+                            title: getTitle(item.labels),
+                            blurDataURL: "/img/blog-post-1.webp",
+                            image: "/img/blog-post-1.webp",
+                            description: "item.shortDescription",
+                            authors: "item.authors",
+                            _id: "item._id",
+                            date: "item.date",
+                            slug: `info/${item.shortId}`,
+                        }}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default BlogView;