@c-rex/components 0.0.4 → 0.0.5

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@c-rex/components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "files": [
-    "dist"
+    "src"
   ],
   "publishConfig": {
     "access": "public"

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/{dist/components/src/result-view/blog-view.stories.js → src/result-view/blog-view.stories.tsx}

@@ -1,19 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const blog_1 = __importDefault(require("../result-view/blog"));
-const meta = {
+import type { Meta, StoryObj } from '@storybook/react';
+import BlogView from '../result-view/blog';
+
+const meta: Meta<typeof BlogView> = {
     title: 'Components/ResultView/Blog',
-    component: blog_1.default,
+    component: BlogView,
     parameters: {
         layout: 'centered',
     },
     tags: ['autodocs'],
 };
-exports.default = meta;
+
+export default meta;
+type Story = StoryObj<typeof BlogView>;
+
 const mockItems = [
     {
         id: '1',
@@ -51,8 +50,9 @@ const mockItems = [
         directoryNodes: []
     }
 ];
-exports.Default = {
+
+export const Default: Story = {
     args: {
-        items: mockItems
+        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;

package/{dist/components/src/result-view/table-view.stories.js → src/result-view/table-view.stories.tsx}

@@ -1,19 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const table_1 = __importDefault(require("../result-view/table"));
-const meta = {
+import type { Meta, StoryObj } from '@storybook/react';
+import TableView from '../result-view/table';
+
+const meta: Meta<typeof TableView> = {
     title: 'Components/ResultView/Table',
-    component: table_1.default,
+    component: TableView,
     parameters: {
         layout: 'centered',
     },
     tags: ['autodocs'],
 };
-exports.default = meta;
+
+export default meta;
+type Story = StoryObj<typeof TableView>;
+
 const mockItems = [
     {
         id: '1',
@@ -48,8 +47,9 @@ const mockItems = [
         directoryNodes: []
     }
 ];
-exports.Default = {
+
+export const Default: Story = {
     args: {
-        items: mockItems
+        items: mockItems as any
     }
 };

package/src/result-view/table.tsx

@@ -0,0 +1,65 @@
+import { FC, ReactNode } from "react";
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+} from "@c-rex/ui/table";
+import { informationUnitsItems, Labels } from "@c-rex/interfaces";
+//import { getFlagIcon } from '@c-rex/utils/index';
+
+interface TableViewProps {
+    items: informationUnitsItems[];
+}
+
+const TableView: FC<TableViewProps> = ({ items }) => {
+    const getTitle = (labels: Labels[]): string => {
+        return labels.map((item) => item.value).join();
+    };
+    const getIcons = (languages: string[]): ReactNode[] => {
+        return languages.map((lang, index) => {
+            const aux = lang.split("-")[1];
+
+            /*
+                  const FlagIcon = getFlagIcon(aux);
+                  
+                  return FlagIcon && (
+                      <div key={index} style={{ width: 36 }} className="border me-3">
+                      <FlagIcon />
+                      </div>
+                  )
+                  */
+
+            return (
+                <div key={index} style={{ width: 36 }} className="border me-3">
+                    {aux}
+                </div>
+            );
+        });
+    };
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableCell>Title</TableCell>
+                        <TableCell>Country</TableCell>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {items.map((item, index) => (
+                        <TableRow key={index}>
+                            <TableCell>{getTitle(item.labels)}</TableCell>
+                            <TableCell>{getIcons(item.languages)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
+
+export default TableView;