feat: updated to latest version

Author: marcinkrasowski

packages/ui/src/components/ActionList/ActionList.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+import { Button } from '@dxp/ui/elements/button';
+
+import { ActionList } from './ActionList';
+
+const meta = {
+    title: 'Components/ActionList',
+    component: ActionList,
+    tags: ['autodocs'],
+} satisfies Meta<typeof ActionList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        triggerVariant: 'outline',
+        actions: [
+            <Button key="primary" variant="primary">
+                Primary Action
+            </Button>,
+            <Button key="secondary" variant="secondary">
+                Secondary Action
+            </Button>,
+            <Button key="tertiary1" variant="outline">
+                Tertiary Action 1
+            </Button>,
+            <Button key="tertiary2" variant="ghost">
+                Tertiary Action 2
+            </Button>,
+        ],
+    },
+};
+
+export const SingleAction: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        actions: [
+            <Button key="primary" variant="primary">
+                Single Action
+            </Button>,
+        ],
+    },
+};
+
+export const TwoActions: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        actions: [
+            <Button key="primary" variant="primary">
+                Primary Action
+            </Button>,
+            <Button key="secondary" variant="secondary">
+                Secondary Action
+            </Button>,
+        ],
+    },
+};
+
+export const WithDifferentVariant: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        triggerVariant: 'destructive',
+        actions: [
+            <Button key="primary" variant="primary">
+                Primary Action
+            </Button>,
+            <Button key="secondary" variant="secondary">
+                Secondary Action
+            </Button>,
+            <Button key="tertiary1" variant="outline">
+                Tertiary Action 1
+            </Button>,
+            <Button key="tertiary2" variant="ghost">
+                Tertiary Action 2
+            </Button>,
+        ],
+    },
+};

packages/ui/src/components/AppSpinner/AppSpinner.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import React, { useEffect } from 'react';
+
+import { useGlobalContext } from '@dxp/ui/providers/GlobalProvider';
+
+import { AppSpinner } from './AppSpinner';
+
+// Wrapper component to control the spinner visibility through props
+const AppSpinnerWrapper: React.FC<{ isVisible: boolean }> = ({ isVisible }) => {
+    const { spinner } = useGlobalContext();
+
+    useEffect(() => {
+        spinner.toggle(isVisible);
+    }, [isVisible, spinner]);
+
+    return (
+        <div className="h-screen w-screen space-y-4">
+            <div className="p-4 bg-gray-100">Content behind the spinner</div>
+            <div className="p-4 bg-gray-100">Content behind the spinner</div>
+            <div className="p-4 bg-gray-100">Content behind the spinner</div>
+            <div className="p-4 bg-gray-100">Content behind the spinner</div>
+            <div className="p-4 bg-gray-100">Content behind the spinner</div>
+            <div className="p-4 bg-gray-100">Content behind the spinner</div>
+            <AppSpinner />
+        </div>
+    );
+};
+
+const meta = {
+    title: 'Components/AppSpinner',
+    component: AppSpinnerWrapper,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+} satisfies Meta<typeof AppSpinnerWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        isVisible: true,
+    },
+};

packages/ui/src/components/Author/Author.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+import { Author } from './Author';
+
+const meta = {
+    title: 'Components/Author',
+    component: Author,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Author>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        name: 'John Doe',
+        avatar: 'https://github.com/shadcn.png',
+        position: 'Software Engineer',
+    },
+};
+
+export const WithoutAvatar: Story = {
+    args: {
+        name: 'Jane Smith',
+        position: 'Product Manager',
+    },
+};
+
+export const WithoutPosition: Story = {
+    args: {
+        name: 'Alex Johnson',
+        avatar: 'https://github.com/shadcn.png',
+    },
+};
+
+export const NameOnly: Story = {
+    args: {
+        name: 'Sam Wilson',
+    },
+};
+
+export const LongName: Story = {
+    args: {
+        name: 'Alexandra Johnson-Williams',
+        avatar: 'https://github.com/shadcn.png',
+        position: 'Senior Software Engineer',
+    },
+};

packages/ui/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+import { Autocomplete } from './Autocomplete';
+
+// Define a sample suggestion type
+type SampleSuggestion = {
+    id: string;
+    name: string;
+    description?: string;
+};
+
+// Sample data
+const sampleSuggestions: SampleSuggestion[] = [
+    { id: '1', name: 'Apple', description: 'A fruit' },
+    { id: '2', name: 'Banana', description: 'A yellow fruit' },
+    { id: '3', name: 'Cherry', description: 'A red fruit' },
+    { id: '4', name: 'Date', description: 'A sweet fruit' },
+    { id: '5', name: 'Elderberry', description: 'A purple berry' },
+    { id: '6', name: 'Fig', description: 'A sweet fruit' },
+    { id: '7', name: 'Grape', description: 'A small fruit' },
+    { id: '8', name: 'Honeydew', description: 'A melon' },
+];
+
+const meta = {
+    title: 'Components/Autocomplete',
+    component: Autocomplete<SampleSuggestion>,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+} satisfies Meta<typeof Autocomplete<SampleSuggestion>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+    args: {
+        label: 'Fruit',
+        placeholder: 'Search for a fruit...',
+        emptyMessage: 'No fruits found',
+        suggestions: sampleSuggestions,
+        getSuggestionValue: (suggestion: SampleSuggestion) => suggestion.name,
+        onRenderSuggestion: (suggestion: SampleSuggestion) => (
+            <div>
+                <div className="font-medium">{suggestion.name}</div>
+                {suggestion.description && (
+                    <div className="text-sm text-muted-foreground">{suggestion.description}</div>
+                )}
+            </div>
+        ),
+    },
+};
+
+// Loading state
+export const Loading: Story = {
+    args: {
+        ...Default.args,
+        isLoading: true,
+        suggestions: [],
+    },
+};
+
+// Empty state
+export const Empty: Story = {
+    args: {
+        ...Default.args,
+        suggestions: [],
+    },
+};
+
+// Disabled state
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+};
+
+// With hidden label
+export const HiddenLabel: Story = {
+    args: {
+        ...Default.args,
+        labelHidden: true,
+    },
+};
+
+// With pre-selected value
+export const WithValue: Story = {
+    args: {
+        ...Default.args,
+        value: sampleSuggestions[0],
+    },
+};
+
+// With custom minimum length
+export const CustomMinLength: Story = {
+    args: {
+        ...Default.args,
+        minLength: 1,
+    },
+};

packages/ui/src/components/Autocomplete/Autocomplete.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Command as CommandPrimitive } from 'cmdk';
-import { type KeyboardEvent, useCallback, useRef, useState } from 'react';
+import React, { type KeyboardEvent, useCallback, useRef, useState } from 'react';
 
 import { cn } from '@dxp/ui/lib/utils';
 

packages/ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,59 @@
+import { Models as FrontendModels } from '@dxp/utils.frontend';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import React from 'react';
+
+import { Breadcrumbs } from './Breadcrumbs';
+import { BreadcrumbItem } from './Breadcrumbs.types';
+
+// Mock LinkComponent for stories
+const MockLinkComponent: FrontendModels.Link.LinkComponent = ({ href, className, children }) => (
+    <a href={href} className={className}>
+        {children}
+    </a>
+);
+
+const meta = {
+    title: 'Components/Breadcrumbs',
+    component: Breadcrumbs,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Sample breadcrumb items
+const sampleBreadcrumbs: BreadcrumbItem[] = [
+    { label: 'Home', slug: '/' },
+    { label: 'Products', slug: '/products' },
+    { label: 'Categories', slug: '/products/categories' },
+    { label: 'Current Page' },
+];
+
+export const Default: Story = {
+    args: {
+        breadcrumbs: sampleBreadcrumbs,
+        LinkComponent: MockLinkComponent,
+    },
+};
+
+export const SingleItem: Story = {
+    args: {
+        breadcrumbs: [{ label: 'Current Page' }],
+        LinkComponent: MockLinkComponent,
+    },
+};
+
+export const TwoItems: Story = {
+    args: {
+        breadcrumbs: [{ label: 'Home', slug: '/' }, { label: 'Current Page' }],
+        LinkComponent: MockLinkComponent,
+    },
+};
+
+export const WithoutSlugs: Story = {
+    args: {
+        breadcrumbs: [{ label: 'Home' }, { label: 'Products' }, { label: 'Current Page' }],
+        LinkComponent: MockLinkComponent,
+    },
+};