@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/organisms/Timeline/Timeline.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { getColorClass } from '../../tokens/colors';
+import { getSpacingClass } from '../../tokens/spacing';
+import { getRadiusClass } from '../../tokens/radius';
+
+export type TimelineOrientation = 'horizontal' | 'vertical';
+
+export interface TimelineItem {
+  id: string;
+  title: string;
+  description?: string;
+  content?: ReactNode;
+  timestamp?: string;
+  icon?: ReactNode;
+  status?: 'default' | 'active' | 'completed' | 'error';
+}
+
+export interface TimelineProps {
+  items: TimelineItem[];
+  orientation?: TimelineOrientation;
+  className?: string;
+}
+
+/**
+ * Timeline Component
+ * 
+ * A timeline component for displaying events in chronological order.
+ * Supports horizontal and vertical orientations.
+ * Follows Atomic Design principles as an Organism component.
+ * 
+ * @example
+ * ```tsx
+ * <Timeline
+ *   items={[
+ *     { id: '1', title: 'Event 1', description: 'Description 1', timestamp: '2024-01-01' },
+ *     { id: '2', title: 'Event 2', description: 'Description 2', timestamp: '2024-01-02' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Timeline({
+  items,
+  orientation = 'vertical',
+  className = '',
+}: TimelineProps) {
+  if (orientation === 'horizontal') {
+    return (
+      <div className={`flex items-start ${className}`}>
+        {items.map((item, index) => {
+          const status = item.status || (index === 0 ? 'active' : index < items.findIndex(i => i.status === 'active') ? 'completed' : 'default');
+          const isLast = index === items.length - 1;
+
+          return (
+            <div key={item.id} className="flex items-start flex-1">
+              <div className="flex flex-col items-center flex-1">
+                {/* Icon/Indicator */}
+                <div className={`
+                  flex
+                  items-center
+                  justify-center
+                  w-10
+                  h-10
+                  ${getRadiusClass('full')}
+                  border-2
+                  ${status === 'completed'
+                    ? `${getColorClass('success', 'DEFAULT', 'bg')} ${getColorClass('success', 'DEFAULT', 'border')} text-white`
+                    : status === 'active'
+                    ? `${getColorClass('primary', 'DEFAULT', 'bg')} ${getColorClass('primary', 'DEFAULT', 'border')} text-white`
+                    : status === 'error'
+                    ? `${getColorClass('error', 'DEFAULT', 'bg')} ${getColorClass('error', 'DEFAULT', 'border')} text-white`
+                    : 'bg-white border-gray-300 text-gray-400'
+                  }
+                `}>
+                  {item.icon || (status === 'completed' ? '✓' : index + 1)}
+                </div>
+
+                {/* Connector Line */}
+                {!isLast && (
+                  <div
+                    className={`
+                      w-full
+                      h-0.5
+                      mt-2
+                      ${status === 'completed' ? getColorClass('success', 'DEFAULT', 'bg') : 'bg-gray-300'}
+                    `}
+                  />
+                )}
+
+                {/* Content */}
+                <div className={`mt-4 text-center ${getSpacingClass('base', 'px')}`}>
+                  {item.timestamp && (
+                    <p className="text-xs text-gray-500 mb-1">{item.timestamp}</p>
+                  )}
+                  <h3 className="text-sm font-semibold text-gray-900">{item.title}</h3>
+                  {item.description && (
+                    <p className="text-xs text-gray-600 mt-1">{item.description}</p>
+                  )}
+                  {item.content && (
+                    <div className="mt-2">{item.content}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Vertical orientation
+  return (
+    <div className={`space-y-0 ${className}`}>
+      {items.map((item, index) => {
+        const status = item.status || (index === 0 ? 'active' : index < items.findIndex(i => i.status === 'active') ? 'completed' : 'default');
+        const isLast = index === items.length - 1;
+
+        return (
+          <div key={item.id} className="flex items-start gap-4">
+            {/* Timeline Line & Icon */}
+            <div className="flex flex-col items-center">
+              <div className={`
+                flex
+                items-center
+                justify-center
+                w-10
+                h-10
+                ${getRadiusClass('full')}
+                border-2
+                ${status === 'completed'
+                  ? `${getColorClass('success', 'DEFAULT', 'bg')} ${getColorClass('success', 'DEFAULT', 'border')} text-white`
+                  : status === 'active'
+                  ? `${getColorClass('primary', 'DEFAULT', 'bg')} ${getColorClass('primary', 'DEFAULT', 'border')} text-white`
+                  : status === 'error'
+                  ? `${getColorClass('error', 'DEFAULT', 'bg')} ${getColorClass('error', 'DEFAULT', 'border')} text-white`
+                  : 'bg-white border-gray-300 text-gray-400'
+                }
+              `}>
+                {item.icon || (status === 'completed' ? '✓' : index + 1)}
+              </div>
+              {!isLast && (
+                <div
+                  className={`
+                    w-0.5
+                    flex-1
+                    min-h-[60px]
+                    mt-2
+                    ${status === 'completed' ? getColorClass('success', 'DEFAULT', 'bg') : 'bg-gray-300'}
+                  `}
+                />
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 pb-8">
+              {item.timestamp && (
+                <p className="text-xs text-gray-500 mb-1">{item.timestamp}</p>
+              )}
+              <h3 className={`
+                text-base
+                font-semibold
+                ${status === 'active' ? getColorClass('primary', 'DEFAULT', 'text') : 'text-gray-900'}
+              `}>
+                {item.title}
+              </h3>
+              {item.description && (
+                <p className="text-sm text-gray-600 mt-1">{item.description}</p>
+              )}
+              {item.content && (
+                <div className="mt-3">{item.content}</div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/organisms/Timeline/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Timeline';
+export type { TimelineProps, TimelineItem, TimelineOrientation } from './Timeline';

package/src/ui/organisms/Toast/Toast.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToastProvider, ToastContainer, useToast } from './index';
+import { Button } from '../../atoms';
+
+// Wrapper component for stories
+function ToastDemo({ position = 'top-right' as const }: { position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' }) {
+  const toast = useToast();
+
+  return (
+    <div className="space-y-4 p-8">
+      <div className="space-x-2">
+        <Button onClick={() => toast.success('Success!', 'Operation completed successfully')}>
+          Show Success
+        </Button>
+        <Button variant="error" onClick={() => toast.error('Error!', 'Something went wrong')}>
+          Show Error
+        </Button>
+        <Button variant="secondary" onClick={() => toast.warning('Warning!', 'Please be careful')}>
+          Show Warning
+        </Button>
+        <Button variant="outline" onClick={() => toast.info('Info', 'Here is some information')}>
+          Show Info
+        </Button>
+      </div>
+      <div className="space-x-2">
+        <Button
+          variant="outline"
+          onClick={() => toast.success('With Action', 'Click the action button', {
+            action: {
+              label: 'View Details',
+              onClick: () => alert('Action clicked!'),
+            },
+          })}
+        >
+          Toast with Action
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => toast.info('Persistent', 'This toast will not auto-dismiss', {
+            duration: undefined,
+          })}
+        >
+          Persistent Toast
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => toast.clearAll()}
+        >
+          Clear All
+        </Button>
+      </div>
+      <ToastContainer position={position} />
+    </div>
+  );
+}
+
+const meta: Meta<typeof ToastProvider> = {
+  title: 'Organisms/Toast',
+  component: ToastProvider,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A toast notification system with provider, hook, and container. Supports multiple variants, auto-dismiss, actions, and customizable positioning.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ToastProvider>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ToastProvider>;
+
+export const Default: Story = {
+  render: () => <ToastDemo />,
+};
+
+export const TopLeft: Story = {
+  render: () => <ToastDemo position="top-left" />,
+};
+
+export const BottomRight: Story = {
+  render: () => <ToastDemo position="bottom-right" />,
+};
+
+export const BottomLeft: Story = {
+  render: () => <ToastDemo position="bottom-left" />,
+};
+
+export const TopCenter: Story = {
+  render: () => <ToastDemo position="top-center" />,
+};
+
+export const BottomCenter: Story = {
+  render: () => <ToastDemo position="bottom-center" />,
+};
+
+export const MultipleToasts: Story = {
+  render: () => {
+    const toast = useToast();
+    return (
+      <div className="space-y-4 p-8">
+        <Button
+          onClick={() => {
+            toast.success('First Toast', 'This is the first notification');
+            setTimeout(() => toast.info('Second Toast', 'This is the second notification'), 200);
+            setTimeout(() => toast.warning('Third Toast', 'This is the third notification'), 400);
+            setTimeout(() => toast.error('Fourth Toast', 'This is the fourth notification'), 600);
+          }}
+        >
+          Show Multiple Toasts
+        </Button>
+        <ToastContainer />
+      </div>
+    );
+  },
+};
+
+export const WithActions: Story = {
+  render: () => {
+    const toast = useToast();
+    return (
+      <div className="space-y-4 p-8">
+        <Button
+          onClick={() => toast.success('File Uploaded', 'Your file has been uploaded successfully', {
+            action: {
+              label: 'View File',
+              onClick: () => alert('Opening file...'),
+            },
+          })}
+        >
+          Toast with Action
+        </Button>
+        <ToastContainer />
+      </div>
+    );
+  },
+};
+
+export const CustomDuration: Story = {
+  render: () => {
+    const toast = useToast();
+    return (
+      <div className="space-y-4 p-8">
+        <Button
+          onClick={() => toast.info('Quick Toast', 'This will disappear in 2 seconds', {
+            duration: 2000,
+          })}
+        >
+          Short Duration (2s)
+        </Button>
+        <Button
+          onClick={() => toast.info('Long Toast', 'This will disappear in 10 seconds', {
+            duration: 10000,
+          })}
+        >
+          Long Duration (10s)
+        </Button>
+        <ToastContainer />
+      </div>
+    );
+  },
+};