@c-rex/components 0.0.8 → 0.0.9

package/src/blog-card.tsx

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

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

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

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

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

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

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

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

@@ -1,38 +0,0 @@
-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/src/result-view/table-view.stories.tsx

@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import TableView from '../result-view/table';
-
-const meta: Meta<typeof TableView> = {
-    title: 'Components/ResultView/Table',
-    component: TableView,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof TableView>;
-
-const mockItems = [
-    {
-        id: '1',
-        labels: [
-            { value: 'Installation Guide', language: 'en-US' },
-            { value: 'Guide d\'installation', language: 'fr-FR' }
-        ],
-        languages: ['fr-FR'],
-        type: 'document',
-        renditions: [],
-        directoryNodes: []
-    },
-    {
-        id: '2',
-        labels: [
-            { value: 'User Manual', language: 'en-US' },
-            { value: 'Manual del Usuario', language: 'es-ES' }
-        ],
-        languages: ['es-ES'],
-        type: 'document',
-        renditions: [],
-        directoryNodes: []
-    },
-    {
-        id: '3',
-        labels: [
-            { value: 'Technical Specifications', language: 'en-US' }
-        ],
-        languages: ['en-US'],
-        type: 'document',
-        renditions: [],
-        directoryNodes: []
-    }
-];
-
-export const Default: Story = {
-    args: {
-        items: mockItems as any
-    }
-};

package/src/result-view/table.tsx

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

package/src/sidebar.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { ComponentProps } from "react";
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarGroup,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    SidebarMenuSub,
-    SidebarMenuSubButton,
-    SidebarMenuSubItem,
-    SidebarRail
-} from "@c-rex/ui/sidebar";
-import { Skeleton } from "@c-rex/ui/skeleton";
-import { TreeOfContent } from "@c-rex/interfaces";
-
-interface SidebarProps extends ComponentProps<typeof Sidebar> {
-    data: TreeOfContent[];
-    loading?: boolean;
-}
-
-export function AppSidebar({ data, loading, ...props }: SidebarProps) {
-    return (
-        <Sidebar collapsible="icon" {...props} className="top-20">
-            <SidebarContent>
-                <SidebarGroup>
-                    <SidebarMenu className="pt-4">
-                        {loading ? (
-                            <>
-                                <Skeleton className="w-auto h-10 mb-2" />
-                                <Skeleton className="w-auto h-10 mb-2" />
-                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                                <Skeleton className="w-auto h-10 mb-2" />
-                            </>
-                        ) : (
-                            <>
-                                {data.map((item) => (
-                                    <SidebarMenuItem key={item.id}>
-                                        <SidebarMenuButton asChild isActive={item.active}>
-                                            <a href={item.link} title={item.label}>
-                                                {item.label}
-                                            </a>
-                                        </SidebarMenuButton>
-
-                                        {item.children?.length ? (
-                                            <SidebarMenuSub>
-                                                {item.children.map((item) => (
-                                                    <SidebarMenuSubItem key={item.label}>
-                                                        <SidebarMenuSubButton
-                                                            asChild
-                                                            isActive={item.active}
-                                                        >
-                                                            <a href={item.link} title={item.label}>
-                                                                {item.label}
-                                                            </a>
-                                                        </SidebarMenuSubButton>
-                                                    </SidebarMenuSubItem>
-                                                ))}
-                                            </SidebarMenuSub>
-                                        ) : null}
-                                    </SidebarMenuItem>
-                                ))}
-                            </>
-                        )}
-                    </SidebarMenu>
-                </SidebarGroup>
-            </SidebarContent>
-            <SidebarRail />
-        </Sidebar>
-    );
-}

package/src/stories/blog-card.stories.tsx

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BlogCard } from '../blog-card';
-
-const meta: Meta = {
-    title: 'Components/BlogCard',
-    component: BlogCard,
-    tags: ['autodocs',],
-    parameters: {
-        layout: 'centered',
-    },
-    argTypes: {
-        data: { control: 'object', description: 'The data to be displayed in the card' },
-        priority: { control: 'boolean', description: 'Whether the image should be prioritized', type: 'boolean' },
-        horizontal: { control: 'boolean' },
-    },
-} satisfies Meta<typeof BlogCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const mockBlogData = {
-    title: 'Getting Started with C-Rex Components',
-    blurDataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
-    image: 'https://images.pexels.com/photos/31712301/pexels-photo-31712301/free-photo-of-scenic-cycling-tour-in-andernach-fields.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
-    description: 'Learn how to use C-Rex components to build modern web applications with React and Next.js.',
-    authors: 'John Doe',
-    _id: '1',
-    date: '2023-05-15',
-    slug: 'getting-started-with-c-rex-components',
-};
-
-export const Horizontal: Story = {
-    args: {
-        data: mockBlogData,
-        priority: false,
-        horizontal: true,
-    },
-};
-
-export const WithPriority: Story = {
-    args: {
-        data: mockBlogData,
-        priority: true,
-        horizontal: false,
-    },
-};