@c-rex/components 0.0.9 → 0.0.11

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/src/result-view/table-view.stories.tsx

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

@@ -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: informationUnitsItems, index: number) => (
+                        <TableRow key={index}>
+                            <TableCell>{getTitle(item.labels)}</TableCell>
+                            <TableCell>{getIcons(item.languages)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
+
+export default TableView;

package/src/sidebar.tsx

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

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

package/src/stories/blur-image.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BlurImage } from '../blur-image';
+
+const meta = {
+    title: 'Components/BlurImage',
+    component: BlurImage,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        src: { control: 'text' },
+        alt: { control: 'text' },
+        width: { control: 'number' },
+        height: { control: 'number' },
+        className: { control: 'text' },
+    },
+} satisfies Meta<typeof BlurImage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        src: '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',
+        alt: 'Sample image with blur effect',
+        width: 400,
+        height: 300,
+        className: 'rounded-lg',
+    },
+};
+
+export const SmallImage: Story = {
+    args: {
+        src: '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',
+        alt: 'Small sample image with blur effect',
+        width: 200,
+        height: 150,
+        className: 'rounded-lg',
+    },
+};
+
+export const RoundedImage: Story = {
+    args: {
+        src: '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',
+        alt: 'Rounded sample image with blur effect',
+        width: 300,
+        height: 300,
+        className: 'rounded-full',
+    },
+};

package/src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumb } from '../breadcrumb';
+
+const meta: Meta = {
+    title: 'Components/Breadcrumb',
+    component: Breadcrumb,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    }
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockItems = [
+    {
+        id: 'docs',
+        label: 'Documentation',
+        link: '/docs',
+        active: false,
+        children: [],
+    },
+    {
+        id: 'components',
+        label: 'Components',
+        link: '/docs/components',
+        active: false,
+        children: [],
+    },
+    {
+        id: 'breadcrumb',
+        label: 'Breadcrumb',
+        link: '/docs/components/breadcrumb',
+        active: true,
+        children: [],
+    },
+];
+
+export const Default: Story = {
+    args: {
+        items: mockItems,
+        loading: false,
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        items: [],
+        loading: true,
+    },
+};

package/src/stories/empty.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Empty } from '../empty';
+
+const meta = {
+    title: 'Components/Empty',
+    component: Empty,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Empty>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};

package/src/stories/navbar.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavBar } from '../navbar/navbar';
+
+const meta: Meta = {
+    title: 'Components/NavBar',
+    component: NavBar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+} satisfies Meta<typeof NavBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {}

package/src/stories/sidebar.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppSidebar } from '../sidebar';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@c-rex/ui/sidebar";
+
+const meta = {
+    title: 'Components/Sidebar',
+    component: AppSidebar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        data: { control: 'object' },
+        loading: { control: 'boolean' },
+    },
+    decorators: [
+        (Story: any) => (
+            <SidebarProvider>
+                <SidebarTrigger />
+
+                <div className="flex">
+                    <SidebarInset>
+                        <Story />
+                    </SidebarInset>
+                </div>
+            </SidebarProvider>
+
+        ),
+    ]
+} satisfies Meta<typeof AppSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockData = [
+    {
+        id: '1',
+        label: 'Getting Started',
+        link: '/docs/getting-started',
+        active: true,
+        children: [
+            {
+                id: '1-1',
+                label: 'Installation',
+                link: '/docs/getting-started/installation',
+                active: false,
+                children: [],
+            },
+            {
+                id: '1-2',
+                label: 'Configuration',
+                link: '/docs/getting-started/configuration',
+                active: false,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: '2',
+        label: 'Components',
+        link: '/docs/components',
+        active: false,
+        children: [
+            {
+                id: '2-1',
+                label: 'Sidebar',
+                link: '/docs/components/sidebar',
+                active: false,
+                children: [],
+            },
+            {
+                id: '2-2',
+                label: 'Navbar',
+                link: '/docs/components/navbar',
+                active: false,
+                children: [],
+            },
+        ],
+    },
+];
+
+export const Default: Story = {
+    args: {
+        data: mockData,
+        loading: false,
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        data: [],
+        loading: true,
+    },
+};