@c-rex/components 0.0.2 → 0.0.3

package/README.md

@@ -0,0 +1,74 @@
+# C-Rex Components
+
+A collection of reusable React components built on top of @c-rex/ui for the C-Rex application.
+
+## Features
+
+- Pre-built components following C-Rex design system
+- Built with TypeScript for type safety
+- Fully customizable and extensible
+- Integration with C-Rex services and utilities
+
+## Installation
+
+This package is part of the C-Rex monorepo and comes pre-installed. If you need to install it separately:
+
+```bash
+npm install @c-rex/components
+```
+
+## Available Components
+
+### AppSidebar
+A navigation sidebar component that supports:
+- Nested menu items
+- Loading states with skeletons
+- Active state indicators
+- Collapsible functionality
+
+```tsx
+import { AppSidebar } from '@c-rex/components';
+
+<AppSidebar 
+    data={treeData}
+    loading={false}
+/>
+```
+
+## Development
+
+### Prerequisites
+- Node.js 18 or higher
+- Access to @c-rex/ui package
+- Access to @c-rex/interfaces package
+
+### Testing
+```bash
+npm run test
+```
+
+### Storybook
+View and interact with components in isolation:
+```bash
+npm run storybook
+```
+
+## Contributing
+
+1. Components should be built using @c-rex/ui as the foundation
+2. Include TypeScript types
+3. Add Storybook stories for new components
+4. Write unit tests for component logic
+5. Follow the existing component patterns
+
+## Dependencies
+
+- @c-rex/ui: Base UI components
+- @c-rex/interfaces: Type definitions
+- @c-rex/services: API services
+- React 18+
+
+## License
+
+Internal use only - C-Rex.net
+```

package/dist/components/src/result-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"result-list.d.ts","sourceRoot":"","sources":["../../../src/result-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAS1D,UAAU,eAAe;IACrB,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAE1C,CAAC"}
+{"version":3,"file":"result-list.d.ts","sourceRoot":"","sources":["../../../src/result-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,UAAU,eAAe;IACrB,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAE1C,CAAC"}

package/dist/components/src/result-list.js

@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const empty_1 = require("./empty");
-const table_1 = __importDefault(require("./result-view/table"));
 //import { CUSTOMER_CONFIG } from '@/config/customerConfig';
 //import { RESULT_VIEW_OPTIONS } from '@/constants/components';
-//import BlogView from './result-view/blog';
-const ViewComponent = table_1.default;
+const blog_1 = __importDefault(require("./result-view/blog"));
+const ViewComponent = blog_1.default;
 const ResultList = ({ items }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.length == 0 ? (0, jsx_runtime_1.jsx)(empty_1.Empty, {}) : (0, jsx_runtime_1.jsx)(ViewComponent, { items: items }) });
 };

package/dist/components/src/result-view/blog-view.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlogView from '../result-view/blog';
+declare const meta: Meta<typeof BlogView>;
+export default meta;
+type Story = StoryObj<typeof BlogView>;
+export declare const Default: Story;
+//# sourceMappingURL=blog-view.stories.d.ts.map

package/dist/components/src/result-view/blog-view.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blog-view.stories.d.ts","sourceRoot":"","sources":["../../../../src/result-view/blog-view.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAwCvC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/components/src/result-view/blog-view.stories.js

@@ -0,0 +1,58 @@
+"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 = {
+    title: 'Components/ResultView/Blog',
+    component: blog_1.default,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+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: []
+    }
+];
+exports.Default = {
+    args: {
+        items: mockItems
+    }
+};

package/dist/components/src/result-view/table-view.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TableView from '../result-view/table';
+declare const meta: Meta<typeof TableView>;
+export default meta;
+type Story = StoryObj<typeof TableView>;
+export declare const Default: Story;
+//# sourceMappingURL=table-view.stories.d.ts.map

package/dist/components/src/result-view/table-view.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-view.stories.d.ts","sourceRoot":"","sources":["../../../../src/result-view/table-view.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAOhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAqCxC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/components/src/result-view/table-view.stories.js

@@ -0,0 +1,55 @@
+"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 = {
+    title: 'Components/ResultView/Table',
+    component: table_1.default,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+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: []
+    }
+];
+exports.Default = {
+    args: {
+        items: mockItems
+    }
+};

package/dist/components/src/stories/blog-card.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Horizontal: Story;
+export declare const WithPriority: Story;
+//# sourceMappingURL=blog-card.stories.d.ts.map

package/dist/components/src/stories/blog-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blog-card.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/blog-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAYqB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAanC,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}

package/dist/components/src/stories/blog-card.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithPriority = exports.Horizontal = void 0;
+const blog_card_1 = require("../blog-card");
+const meta = {
+    title: 'Components/BlogCard',
+    component: blog_card_1.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' },
+    },
+};
+exports.default = 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',
+};
+exports.Horizontal = {
+    args: {
+        data: mockBlogData,
+        priority: false,
+        horizontal: true,
+    },
+};
+exports.WithPriority = {
+    args: {
+        data: mockBlogData,
+        priority: true,
+        horizontal: false,
+    },
+};

package/dist/components/src/stories/blur-image.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("react").ComponentProps<typeof import("next/image").default>) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        src: {
+            control: "text";
+        };
+        alt: {
+            control: "text";
+        };
+        width: {
+            control: "number";
+        };
+        height: {
+            control: "number";
+        };
+        className: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SmallImage: Story;
+export declare const RoundedImage: Story;
+//# sourceMappingURL=blur-image.stories.d.ts.map

package/dist/components/src/stories/blur-image.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur-image.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/blur-image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAcwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC"}

package/dist/components/src/stories/blur-image.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoundedImage = exports.SmallImage = exports.Default = void 0;
+const blur_image_1 = require("../blur-image");
+const meta = {
+    title: 'Components/BlurImage',
+    component: blur_image_1.BlurImage,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        src: { control: 'text' },
+        alt: { control: 'text' },
+        width: { control: 'number' },
+        height: { control: 'number' },
+        className: { control: 'text' },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    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',
+    },
+};
+exports.SmallImage = {
+    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',
+    },
+};
+exports.RoundedImage = {
+    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/dist/components/src/stories/breadcrumb.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Loading: Story;
+//# sourceMappingURL=breadcrumb.stories.d.ts.map

package/dist/components/src/stories/breadcrumb.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAOI,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA0BnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/src/stories/breadcrumb.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.Default = void 0;
+const breadcrumb_1 = require("../breadcrumb");
+const meta = {
+    title: 'Components/Breadcrumb',
+    component: breadcrumb_1.Breadcrumb,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    }
+};
+exports.default = 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: [],
+    },
+];
+exports.Default = {
+    args: {
+        items: mockItems,
+        loading: false,
+    },
+};
+exports.Loading = {
+    args: {
+        items: [],
+        loading: true,
+    },
+};

package/dist/components/src/stories/empty.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=empty.stories.d.ts.map

package/dist/components/src/stories/empty.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/empty.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;CAIoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KACrB,CAAC"}

package/dist/components/src/stories/empty.stories.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const empty_1 = require("../empty");
+const meta = {
+    title: 'Components/Empty',
+    component: empty_1.Empty,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {};

package/dist/components/src/stories/navbar.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=navbar.stories.d.ts.map

package/dist/components/src/stories/navbar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/navbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAOmB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA"}

package/dist/components/src/stories/navbar.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const navbar_1 = require("../navbar");
+const meta = {
+    title: 'Components/NavBar',
+    component: navbar_1.NavBar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+exports.default = meta;
+exports.Default = {};

package/dist/components/src/stories/sidebar.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+import { AppSidebar } from '../sidebar';
+declare const meta: {
+    title: string;
+    component: typeof AppSidebar;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        data: {
+            control: "object";
+        };
+        loading: {
+            control: "boolean";
+        };
+    };
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Loading: Story;
+//# sourceMappingURL=sidebar.stories.d.ts.map

package/dist/components/src/stories/sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/sidebar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGxC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;yBAYM,GAAG;CAagB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiDnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/src/stories/sidebar.stories.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sidebar_1 = require("../sidebar");
+const sidebar_2 = require("@c-rex/ui/sidebar");
+const meta = {
+    title: 'Components/Sidebar',
+    component: sidebar_1.AppSidebar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        data: { control: 'object' },
+        loading: { control: 'boolean' },
+    },
+    decorators: [
+        (Story) => ((0, jsx_runtime_1.jsxs)(sidebar_2.SidebarProvider, { children: [(0, jsx_runtime_1.jsx)(sidebar_2.SidebarTrigger, {}), (0, jsx_runtime_1.jsx)("div", { className: "flex", children: (0, jsx_runtime_1.jsx)(sidebar_2.SidebarInset, { children: (0, jsx_runtime_1.jsx)(Story, {}) }) })] })),
+    ]
+};
+exports.default = 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: [],
+            },
+        ],
+    },
+];
+exports.Default = {
+    args: {
+        data: mockData,
+        loading: false,
+    },
+};
+exports.Loading = {
+    args: {
+        data: [],
+        loading: true,
+    },
+};

package/dist/components/tailwind.config.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tailwind.config.d.ts.map

package/dist/components/tailwind.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../../tailwind.config.ts"],"names":[],"mappings":""}

package/dist/components/tailwind.config.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = __importDefault(require("@c-rex/config"));
+module.exports = {
+    content: [
+        './src/**/*.{js,ts,jsx,tsx}',
+        './.storybook/**/*.{js,ts,jsx,tsx}',
+        '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
+    ],
+    ...config_1.default,
+    //safelist: ['animate-pulse'],
+};

package/dist/config/src/index.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from "tailwindcss";
+declare const tailwindPreset: Omit<Config, "content">;
+export default tailwindPreset;
+//# sourceMappingURL=index.d.ts.map

package/dist/config/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../config/src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,cAAc,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CA+D3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/config/src/index.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tailwindPreset = {
+    plugins: [require("tailwindcss-animate")],
+    theme: {
+        extend: {
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+            colors: {
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                chart: {
+                    "1": "hsl(var(--chart-1))",
+                    "2": "hsl(var(--chart-2))",
+                    "3": "hsl(var(--chart-3))",
+                    "4": "hsl(var(--chart-4))",
+                    "5": "hsl(var(--chart-5))",
+                },
+                sidebar: {
+                    DEFAULT: "hsl(var(--sidebar-background))",
+                    foreground: "hsl(var(--sidebar-foreground))",
+                    primary: "hsl(var(--sidebar-primary))",
+                    "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                    accent: "hsl(var(--sidebar-accent))",
+                    "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                    border: "hsl(var(--sidebar-border))",
+                    ring: "hsl(var(--sidebar-ring))",
+                },
+            },
+        },
+    },
+};
+exports.default = tailwindPreset;

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@c-rex/components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "exports": {
     "./autocomplete": {
       "types": "./src/autocomplete.tsx",
@@ -53,26 +56,48 @@
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "tsc"
+    "build": "tsc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@c-rex/eslint-config": "*",
     "@c-rex/typescript-config": "*",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/nextjs": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@turbo/gen": "^2.4.4",
     "@types/node": "^22.13.10",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.23.0",
+    "eslint-plugin-storybook": "^0.12.0",
+    "postcss": "^8.5.3",
+    "storybook": "^8.6.12",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.17",
     "typescript": "latest"
   },
   "dependencies": {
+    "@c-rex/contexts": "*",
+    "@c-rex/interfaces": "*",
+    "@c-rex/services": "*",
+    "@c-rex/ui": "*",
+    "@c-rex/utils": "*",
+    "@c-rex/config": "*",
     "next": "^14",
     "react": "^18",
     "react-dom": "^18",
-    "@c-rex/ui": "*",
-    "@c-rex/services": "*",
-    "@c-rex/interfaces": "*",
-    "@c-rex/contexts": "*",
-    "@c-rex/utils": "*"
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }