@c-rex/components 0.0.9 → 0.0.10

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

package/dist/autocomplete.cjs.js

@@ -1,215 +0,0 @@
-"use strict";
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _instanceof(left, right) {
-    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-        return !!right[Symbol.hasInstance](left);
-    } else {
-        return left instanceof right;
-    }
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = function(target, all) {
-    for(var name in all)__defProp(target, name, {
-        get: all[name],
-        enumerable: true
-    });
-};
-var __copyProps = function(to, from, except, desc) {
-    if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
-        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-        try {
-            var _loop = function() {
-                var key = _step.value;
-                if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-                    get: function() {
-                        return from[key];
-                    },
-                    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-                });
-            };
-            for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
-        } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-        } finally{
-            try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                    _iterator.return();
-                }
-            } finally{
-                if (_didIteratorError) {
-                    throw _iteratorError;
-                }
-            }
-        }
-    }
-    return to;
-};
-var __toCommonJS = function(mod) {
-    return __copyProps(__defProp({}, "__esModule", {
-        value: true
-    }), mod);
-};
-// src/autocomplete.tsx
-var autocomplete_exports = {};
-__export(autocomplete_exports, {
-    AutoComplete: function() {
-        return AutoComplete;
-    }
-});
-module.exports = __toCommonJS(autocomplete_exports);
-var import_cmdk = require("cmdk");
-var import_lucide_react = require("lucide-react");
-var import_react = require("react");
-var import_input = require("@c-rex/ui/input");
-var import_command = require("@c-rex/ui/command");
-var import_popover = require("@c-rex/ui/popover");
-var import_jsx_runtime = require("react/jsx-runtime");
-var AutoComplete = function(param) {
-    var initialValue = param.initialValue, onSearch = param.onSearch, onSelect = param.onSelect;
-    var _ref = _sliced_to_array((0, import_react.useState)(initialValue), 2), query = _ref[0], setQuery = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react.useState)([]), 2), suggestions = _ref1[0], setSuggestions = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react.useState)(false), 2), open = _ref2[0], setOpen = _ref2[1];
-    (0, import_react.useEffect)(function() {
-        var debounceFetch = setTimeout(function() {
-            if (query) {
-                onSearch(query).then(setSuggestions);
-            } else {
-                setSuggestions([]);
-            }
-        }, 300);
-        return function() {
-            return clearTimeout(debounceFetch);
-        };
-    }, [
-        onSearch,
-        query
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-        className: "flex items-center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover, {
-            open: open,
-            onOpenChange: setOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.Command, {
-                shouldFilter: false,
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverAnchor, {
-                        asChild: true,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Input, {
-                            asChild: true,
-                            value: query,
-                            onValueChange: setQuery,
-                            onKeyDown: function(e) {
-                                return setOpen(e.key !== "Escape");
-                            },
-                            onMouseDown: function() {
-                                return setOpen(false);
-                            },
-                            onFocus: function() {
-                                return setOpen(true);
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input.Input, {})
-                        })
-                    }),
-                    !open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandList, {
-                        "aria-hidden": "true",
-                        className: "hidden"
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverContent, {
-                        asChild: true,
-                        onOpenAutoFocus: function(e) {
-                            return e.preventDefault();
-                        },
-                        onInteractOutside: function(e) {
-                            if (_instanceof(e.target, Element) && e.target.hasAttribute("cmdk-input")) {
-                                e.preventDefault();
-                            }
-                        },
-                        className: "w-[--radix-popover-trigger-width] p-0",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandList, {
-                            children: suggestions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, {
-                                children: suggestions.map(function(option) {
-                                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.CommandItem, {
-                                        value: option,
-                                        onMouseDown: function(e) {
-                                            return e.preventDefault();
-                                        },
-                                        onSelect: function(inputValue) {
-                                            setOpen(false);
-                                            onSelect(inputValue !== null && inputValue !== void 0 ? inputValue : "");
-                                        },
-                                        children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, {
-                                                className: "mr-2 h-4 w-4 opacity-0"
-                                            }),
-                                            option
-                                        ]
-                                    }, option);
-                                })
-                            }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandEmpty, {
-                                children: "No suggestions."
-                            })
-                        })
-                    })
-                ]
-            })
-        })
-    });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-    AutoComplete: AutoComplete
-});
-//# sourceMappingURL=autocomplete.cjs.js.map