@tsiky/components-r19 1.3.0 → 1.3.1

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

@@ -1,276 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

package/src/components/TrendList/TrendList.css

@@ -1,16 +0,0 @@
-.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

@@ -1,337 +0,0 @@
-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',
-      },
-    },
-  },
-};