@tsiky/components-r19 1.0.0

package/src/components/TrendItem/TrendItem.stories.tsx

@@ -0,0 +1,276 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TrendItem } from './TrendItem';
+
+const meta = {
+  title: 'Components/TrendItem',
+  component: TrendItem,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A component for displaying trend information with title, subtitle, and value text.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Main title text',
+      table: {
+        category: 'Content',
+      },
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle text (optional)',
+      table: {
+        category: 'Content',
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'Value text displayed on the right side',
+      table: {
+        category: 'Content',
+      },
+    },
+    background: {
+      control: 'color',
+      description: 'Background color of the component',
+      table: {
+        category: 'Styling',
+        defaultValue: { summary: '#f9f9f9' },
+      },
+    },
+    titleStyle: {
+      control: 'object',
+      description: 'Custom styles for the title',
+      table: {
+        category: 'Styling',
+      },
+    },
+    subtitleStyle: {
+      control: 'object',
+      description: 'Custom styles for the subtitle',
+      table: {
+        category: 'Styling',
+      },
+    },
+    textStyle: {
+      control: 'object',
+      description: 'Custom styles for the value text',
+      table: {
+        category: 'Styling',
+      },
+    },
+    itemStyle: {
+      control: 'object',
+      description: 'Custom styles for the entire component container',
+      table: {
+        category: 'Styling',
+      },
+    },
+  },
+  args: {
+    title: 'Revenue Growth',
+    subtitle: 'Quarterly',
+    text: '+15.2%',
+    background: '#f9f9f9',
+  },
+} satisfies Meta<typeof TrendItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default TrendItem with title, subtitle, and value text',
+      },
+    },
+  },
+};
+
+export const WithoutSubtitle: Story = {
+  args: {
+    subtitle: undefined,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem without a subtitle',
+      },
+    },
+  },
+};
+
+export const ColoredBackground: Story = {
+  args: {
+    background: '#e8f5e9',
+    itemStyle: { borderRadius: '12px', padding: '16px' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem with custom background color and container styling',
+      },
+    },
+  },
+};
+
+export const PositiveTrend: Story = {
+  args: {
+    title: 'User Growth',
+    subtitle: 'Monthly',
+    text: '+23.5%',
+    textStyle: { color: '#4CAF50', fontWeight: 'bold' },
+    background: '#f1f8e9',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem with positive value styling and light green background',
+      },
+    },
+  },
+};
+
+export const NegativeTrend: Story = {
+  args: {
+    title: 'Bounce Rate',
+    subtitle: 'Weekly',
+    text: '-8.3%',
+    textStyle: { color: '#F44336', fontWeight: 'bold' },
+    background: '#ffebee',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem with negative value styling and light red background',
+      },
+    },
+  },
+};
+
+export const CustomStyles: Story = {
+  args: {
+    title: 'Custom Styled',
+    subtitle: 'Example',
+    text: 'Value',
+    background: '#f3e5f5',
+    itemStyle: {
+      borderRadius: '8px',
+      padding: '12px 16px',
+      border: '2px solid #9C27B0',
+    },
+    titleStyle: {
+      color: '#7B1FA2',
+      fontSize: '1.2rem',
+      fontWeight: 'bold',
+    },
+    subtitleStyle: {
+      color: '#9C27B0',
+      fontStyle: 'italic',
+    },
+    textStyle: {
+      color: '#2196F3',
+      fontSize: '1.3rem',
+      fontWeight: 'bold',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem with custom styling for all elements including background and container',
+      },
+    },
+  },
+};
+
+export const FinancialData: Story = {
+  args: {
+    title: 'Stock Price',
+    subtitle: 'AAPL',
+    text: '$175.34',
+    background: '#e3f2fd',
+    textStyle: { color: '#2E7D32', fontWeight: 'bold' },
+    itemStyle: { borderRadius: '10px' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem displaying financial data with blue background',
+      },
+    },
+  },
+};
+
+export const PerformanceMetric: Story = {
+  args: {
+    title: 'Load Time',
+    subtitle: 'Average',
+    text: '1.2s',
+    background: '#fff3e0',
+    textStyle: { color: '#FF9800', fontWeight: 'bold' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem displaying performance metrics with orange background',
+      },
+    },
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    title: 'Compact',
+    subtitle: undefined,
+    text: '42',
+    background: '#f5f5f5',
+    itemStyle: { padding: '8px' },
+    titleStyle: { fontSize: '0.9rem' },
+    textStyle: { fontSize: '0.9rem' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact version of TrendItem without subtitle and minimal padding',
+      },
+    },
+  },
+};
+
+export const WithLongText: Story = {
+  args: {
+    title: 'This is a very long title that might wrap',
+    subtitle: 'A lengthy subtitle that provides additional context',
+    text: 'An exceptionally long value that might need truncation',
+    background: '#f0f0f0',
+    itemStyle: { padding: '16px' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem with long text content to test text wrapping and truncation',
+      },
+    },
+  },
+};
+
+export const TransparentBackground: Story = {
+  args: {
+    background: 'transparent',
+    itemStyle: { border: '1px solid #e0e0e0' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendItem with transparent background and border',
+      },
+    },
+  },
+};

package/src/components/TrendItem/TrendItem.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import './TrendItem.css';
+
+export type TrendItemProps = {
+  title: string;
+  subtitle?: string;
+  text: string;
+
+  background?: string;
+  titleStyle?: React.CSSProperties;
+  subtitleStyle?: React.CSSProperties;
+  textStyle?: React.CSSProperties;
+  itemStyle?: React.CSSProperties;
+};
+
+export const TrendItem: React.FC<TrendItemProps> = ({
+  title,
+  subtitle,
+  text,
+  background = '#f9f9f9',
+  titleStyle,
+  subtitleStyle,
+  textStyle,
+  itemStyle,
+}) => {
+  const [leftPart, rightPart] = text ? text.split('/') : [];
+  return (
+    <div className='trend-item' style={{ background, ...itemStyle }}>
+      <div className='trend-texts'>
+        <span className='trend-title' style={titleStyle}>
+          {title}
+        </span>
+        {subtitle && (
+          <span className='trend-subtitle' style={subtitleStyle}>
+            {subtitle}
+          </span>
+        )}
+      </div>
+      <div className='trend-right' style={textStyle}>
+        <span className='trend-right-left'>{leftPart}</span>
+        <span className='trend-right-separator'> / </span>
+        <span className='trend-right-right'>{rightPart}</span>
+      </div>
+    </div>
+  );
+};

package/src/components/TrendItem/index.ts

@@ -0,0 +1 @@
+export * from './TrendItem';

package/src/components/TrendList/TrendList.css

@@ -0,0 +1,16 @@
+.trend-list {
+  background: #fff;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.trend-header {
+  font-family: var(--font-primary);
+  font-weight: var(--font-bold);
+  font-size: var(--text-paragraph);
+  margin-bottom: 0.5rem;
+}

package/src/components/TrendList/TrendList.stories.tsx

@@ -0,0 +1,337 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TrendList } from './TrendList';
+
+const meta = {
+  title: 'Components/TrendList',
+  component: TrendList,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A list component that displays multiple TrendItem components with an optional header, customizable width and gap between items.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of TrendItem props to display in the list',
+      table: {
+        category: 'Content',
+      },
+    },
+    header: {
+      control: 'text',
+      description: 'Header text for the list (optional)',
+      table: {
+        category: 'Content',
+      },
+    },
+    headerStyle: {
+      control: 'object',
+      description: 'Custom styles for the header',
+      table: {
+        category: 'Styling',
+      },
+    },
+    listStyle: {
+      control: 'object',
+      description: 'Custom styles for the entire list container',
+      table: {
+        category: 'Styling',
+      },
+    },
+    size: {
+      control: { type: 'number', min: 200, max: 600, step: 50 },
+      description: 'Width of the TrendList container in pixels',
+      table: {
+        category: 'Dimensions',
+      },
+    },
+    gap: {
+      control: { type: 'number', min: 0, max: 30, step: 2 },
+      description: 'Gap between TrendItems in pixels',
+      table: {
+        category: 'Dimensions',
+      },
+    },
+  },
+  args: {
+    header: 'Tendance',
+    size: 300,
+    gap: 8,
+    items: [
+      {
+        title: 'Revenue Growth',
+        subtitle: 'Quarterly',
+        text: '+15.2%',
+        background: '#f1f8e9',
+        textStyle: { color: '#4CAF50', fontWeight: 'bold' },
+      },
+      {
+        title: 'User Acquisition',
+        subtitle: 'Monthly',
+        text: '+8.7%',
+        background: '#e8f5e9',
+        textStyle: { color: '#4CAF50', fontWeight: 'bold' },
+      },
+      {
+        title: 'Bounce Rate',
+        subtitle: 'Weekly',
+        text: '-3.5%',
+        background: '#ffebee',
+        textStyle: { color: '#F44336', fontWeight: 'bold' },
+      },
+    ],
+  },
+} satisfies Meta<typeof TrendList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default TrendList with multiple TrendItems, a header, and default size and gap',
+      },
+    },
+  },
+};
+
+export const CustomSizeAndGap: Story = {
+  args: {
+    size: 400,
+    gap: 16,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList with custom width and increased gap between items',
+      },
+    },
+  },
+};
+
+export const WithoutHeader: Story = {
+  args: {
+    header: undefined,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList without a header',
+      },
+    },
+  },
+};
+
+export const CustomHeader: Story = {
+  args: {
+    header: 'Performance Metrics',
+    headerStyle: {
+      color: '#3f51b5',
+      fontSize: '1.5rem',
+      fontWeight: 'bold',
+      marginBottom: '1rem',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList with a custom styled header',
+      },
+    },
+  },
+};
+
+export const StyledList: Story = {
+  args: {
+    listStyle: {
+      backgroundColor: '#f5f5f5',
+      borderRadius: '12px',
+      padding: '20px',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList with custom container styling',
+      },
+    },
+  },
+};
+
+export const MixedTrends: Story = {
+  args: {
+    items: [
+      {
+        title: 'Revenue',
+        subtitle: 'This Month',
+        text: '+12.5%',
+        background: '#f1f8e9',
+        textStyle: { color: '#4CAF50', fontWeight: 'bold' },
+      },
+      {
+        title: 'Expenses',
+        subtitle: 'This Month',
+        text: '+5.2%',
+        background: '#ffebee',
+        textStyle: { color: '#F44336', fontWeight: 'bold' },
+      },
+      {
+        title: 'Profit',
+        subtitle: 'This Month',
+        text: '+18.3%',
+        background: '#e8f5e9',
+        textStyle: { color: '#4CAF50', fontWeight: 'bold' },
+      },
+      {
+        title: 'Customer Satisfaction',
+        text: '92%',
+        background: '#e3f2fd',
+        textStyle: { color: '#2196F3', fontWeight: 'bold' },
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList with mixed positive and negative trends',
+      },
+    },
+  },
+};
+
+export const SingleItem: Story = {
+  args: {
+    items: [
+      {
+        title: 'Overall Performance',
+        subtitle: 'Quarterly Review',
+        text: 'A+',
+        background: '#f3e5f5',
+        textStyle: { color: '#9C27B0', fontWeight: 'bold', fontSize: '1.2rem' },
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList with only one item',
+      },
+    },
+  },
+};
+
+export const FinancialDashboard: Story = {
+  args: {
+    header: 'Financial Dashboard',
+    headerStyle: {
+      color: '#2E7D32',
+      fontSize: '1.5rem',
+      fontWeight: 'bold',
+      borderBottom: '2px solid #4CAF50',
+      paddingBottom: '0.5rem',
+    },
+    listStyle: {
+      backgroundColor: '#e8f5e9',
+      borderRadius: '8px',
+      padding: '16px',
+    },
+    items: [
+      {
+        title: 'Stock Price',
+        subtitle: 'AAPL',
+        text: '$175.34',
+        background: '#ffffff',
+        textStyle: { color: '#2E7D32', fontWeight: 'bold' },
+      },
+      {
+        title: 'Market Cap',
+        subtitle: 'Current',
+        text: '$2.7T',
+        background: '#ffffff',
+        textStyle: { color: '#2E7D32', fontWeight: 'bold' },
+      },
+      {
+        title: 'Dividend Yield',
+        subtitle: 'Annual',
+        text: '0.5%',
+        background: '#ffffff',
+        textStyle: { color: '#2E7D32', fontWeight: 'bold' },
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList styled as a financial dashboard',
+      },
+    },
+  },
+};
+
+export const CompactList: Story = {
+  args: {
+    size: 250,
+    gap: 4,
+    listStyle: {
+      padding: '8px',
+    },
+    items: [
+      {
+        title: 'Metric 1',
+        text: '42',
+        background: '#f5f5f5',
+      },
+      {
+        title: 'Metric 2',
+        text: '87',
+        background: '#f5f5f5',
+      },
+      {
+        title: 'Metric 3',
+        text: '23',
+        background: '#f5f5f5',
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact TrendList with minimal width, gap and padding',
+      },
+    },
+  },
+};
+
+export const WideList: Story = {
+  args: {
+    size: 500,
+    gap: 12,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Wide TrendList with moderate gap between items',
+      },
+    },
+  },
+};
+
+export const NoGap: Story = {
+  args: {
+    gap: 0,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'TrendList with no gap between items',
+      },
+    },
+  },
+};

package/src/components/TrendList/TrendList.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import './TrendList.css';
+import { TrendItem } from '../TrendItem/TrendItem';
+import type { TrendItemProps } from '../TrendItem/TrendItem';
+
+type TrendListProps = {
+  items: TrendItemProps[];
+  header?: string;
+  headerStyle?: React.CSSProperties;
+  listStyle?: React.CSSProperties;
+  size?: number | string;
+  gap?: number;
+  className?: string;
+  background?: string; // Nouvelle prop pour le background
+};
+
+export const TrendList: React.FC<TrendListProps> = ({
+  items,
+  header = 'Tendance',
+  headerStyle,
+  listStyle,
+  size,
+  gap,
+  className = '',
+  background = 'var(--color-card-background)',
+}) => {
+  return (
+    <div
+      className={`trend-list ${className}`}
+      style={{
+        width: size,
+        gap: `${gap}px`,
+        background,
+        ...listStyle,
+      }}
+    >
+      <h3 className='trend-header' style={headerStyle}>
+        {header}
+      </h3>
+      {items.map((item, idx) => (
+        <TrendItem key={idx} {...item} />
+      ))}
+    </div>
+  );
+};