@c-rex/components 0.0.6 → 0.0.9

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,
-    },
-};

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

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

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

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

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NavBar } from '../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

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