@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/Button/Button.stories.ts

@@ -1,132 +0,0 @@
-import React from 'react';
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/react';
-import Button from './Button';
-
-// Définir le type des propriétés du bouton pour plus de clarté
-type ButtonProps = React.ComponentProps<typeof Button>;
-
-const meta: Meta<ButtonProps> = {
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'accent',
-        'outline',
-        'success',
-        'danger',
-        'warning',
-        'info',
-      ],
-    },
-    size: {
-      control: { type: 'radio' },
-      options: ['sm', 'md', 'lg'],
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-  },
-  args: {
-    children: 'Button',
-  },
-};
-
-export default meta;
-type Story = StoryObj<ButtonProps>;
-
-// Stories de base pour chaque variant
-export const Primary: Story = {
-  args: {
-    variant: 'primary',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-  },
-};
-
-export const Accent: Story = {
-  args: {
-    variant: 'accent',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-  },
-};
-
-export const Success: Story = {
-  args: {
-    variant: 'success',
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: 'danger',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: 'warning',
-  },
-};
-
-export const Info: Story = {
-  args: {
-    variant: 'info',
-  },
-};
-
-// Stories pour les différentes tailles
-export const Small: Story = {
-  args: {
-    size: 'sm',
-    variant: 'primary',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    size: 'md',
-    variant: 'primary',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'lg',
-    variant: 'primary',
-  },
-};
-
-// Story pour l'état désactivé
-export const Disabled: Story = {
-  args: {
-    variant: 'primary',
-    disabled: true,
-  },
-};
-
-// Story avec un contenu personnalisé - version sans JSX
-export const WithIcon: Story = {
-  render: (args) =>
-    React.createElement(Button, args, React.createElement('span', null, '⭐'), ' Button with icon'),
-  args: {
-    variant: 'primary',
-  },
-};

package/src/components/Button/Button.tsx

@@ -1,55 +0,0 @@
-// Button.tsx
-import React from 'react';
-import styles from './Button.module.css';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'accent'
-    | 'outline'
-    | 'success'
-    | 'danger'
-    | 'warning'
-    | 'info';
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
-}
-
-const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = 'primary',
-  size = 'md',
-  className = '',
-  type = 'button',
-  ...props
-}) => {
-  const variantClasses: Record<string, string> = {
-    primary: styles.primary,
-    secondary: styles.secondary,
-    accent: styles.accent,
-    outline: styles.outline,
-    success: styles.success,
-    danger: styles.danger,
-    warning: styles.warning,
-    info: styles.info,
-  };
-
-  const sizeClasses: Record<string, string> = {
-    sm: styles.sm,
-    md: styles.md,
-    lg: styles.lg,
-  };
-
-  const classes = [styles.button, variantClasses[variant] ?? '', sizeClasses[size] ?? '', className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <button type={type} className={classes} {...props}>
-      {children}
-    </button>
-  );
-};
-
-export default Button;

package/src/components/Button/button.css

@@ -1,29 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}

package/src/components/ChartContainer/ChartContainer.css

@@ -1,116 +0,0 @@
-.chart-container {
-  border-radius: 12px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* shadows */
-.shadow-soft {
-  box-shadow: 0 6px 18px rgba(11, 20, 34, 0.06);
-}
-.shadow-strong {
-  box-shadow: 0 10px 30px rgba(11, 20, 34, 0.12);
-}
-
-.with-border {
-  border: 1px solid rgba(11, 20, 34, 0.04);
-}
-
-/* Header */
-.chart-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.chart-title-left {
-  font-weight: var(--font-bold, 500);
-  font-size: var(--text-paragraph, 1rem); /* 16px */
-  color: inherit;
-}
-.chart-title-right {
-  font-size: var(--text-small, 0.875rem); /* 14px */
-}
-
-/* Chart content area (inner card) */
-.chart-content {
-  min-height: 0;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-}
-
-/* Variant: soft blue card */
-.variant-softBlueCard .chart-content {
-  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.variant-softBlueCard .placeholder,
-.variant-softBlueCard .placeholder-node {
-  text-align: center;
-}
-.variant-softBlueCard .placeholder-icon svg {
-  stroke: rgba(59, 130, 246, 0.9);
-}
-.variant-softBlueCard .placeholder-text {
-  font-weight: var(--font-medium, 500);
-  margin-top: 8px;
-  font-size: var(--text-paragraph, 1rem); /* 16px */
-}
-.variant-softBlueCard .placeholder-subtext {
-  margin-top: 6px;
-  font-size: var(--text-small, 0.875rem); /* 14px */
-}
-
-/* Variant: large gray card */
-.variant-largeGrayCard .chart-content {
-  background: #f7f8fa;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.variant-largeGrayCard .placeholder,
-.variant-largeGrayCard .placeholder-node {
-  text-align: center;
-}
-.variant-largeGrayCard .placeholder-text {
-  font-weight: var(--font-medium, 500);
-  font-size: var(--text-paragraph, 1rem); /* 16px */
-}
-.variant-largeGrayCard .placeholder-subtext {
-  margin-top: 8px;
-  font-size: var(--text-small, 0.875rem); /* 14px */
-}
-
-/* Generic placeholder */
-.placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-.placeholder-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.placeholder-text {
-  line-height: 1.1;
-}
-.placeholder-subtext {
-  opacity: 0.8;
-}
-
-.placeholder-node {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/src/components/ChartContainer/ChartContainer.stories.tsx

@@ -1,159 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import ChartContainer from './ChartContainer';
-import { ArrowUp, Activity } from 'lucide-react';
-
-const meta: Meta<typeof ChartContainer> = {
-  title: 'Components/ChartContainer',
-  component: ChartContainer,
-  tags: ['autodocs'],
-  argTypes: {
-    width: { control: 'text', description: 'Width (string or number). Ex: 400 or "100%"' },
-    height: { control: 'text', description: 'Height (string or number). Ex: 300 or "50vh"' },
-    colors: {
-      control: 'object',
-      description: 'Colors for text, background, and content background',
-    },
-    titles: { control: 'object' },
-    placeholder: { control: 'object' },
-    padding: { control: 'text' },
-    variant: { control: { type: 'select', options: ['default', 'softBlueCard', 'largeGrayCard'] } },
-    shadow: { control: { type: 'select', options: ['none', 'soft', 'strong'] } },
-    showBorder: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ChartContainer>;
-
-export const Default: Story = {
-  args: {
-    width: 420,
-    height: 300,
-    colors: { text: '#0b1220', background: '#ffffff', contentBackground: '#efeff0' },
-    titles: { left: 'Sales', right: 'Today' },
-    placeholder: { text: 'Loading chart', subtext: 'No data yet', icon: 'ArrowUp', iconSize: 28 },
-    padding: '1rem',
-    variant: 'default',
-    shadow: 'soft',
-    showBorder: false,
-  },
-};
-
-export const SoftBlueImageLike: Story = {
-  args: {
-    width: 360,
-    height: 360,
-    colors: { text: '#0b1220', background: '#ffffff', contentBackground: undefined },
-    titles: { left: 'Tension 03.08', right: 'Mis à jour: 17:24' },
-    // structured placeholder that produces the blue-card look
-    placeholder: {
-      icon: 'ArrowUp',
-      text: 'Données historiques',
-      subtext: null,
-      iconSize: 32,
-    },
-    padding: 16,
-    variant: 'softBlueCard',
-    shadow: 'soft',
-    showBorder: false,
-  },
-};
-
-export const LargeGrayImageLike: Story = {
-  args: {
-    width: '100%',
-    height: 520,
-    colors: { text: '#0b1220', background: '#ffffff', contentBackground: undefined },
-    titles: { left: 'Admissions 18.07', right: '' },
-    placeholder: {
-      icon: 'Activity',
-      text: 'Graphique temporel',
-      subtext: 'Visualisation des données sur 24h',
-      iconSize: 32,
-    },
-    padding: '1.5rem',
-    variant: 'largeGrayCard',
-    shadow: 'strong',
-    showBorder: true,
-  },
-};
-
-export const NodePlaceholder: Story = {
-  args: {
-    width: 380,
-    height: 300,
-    colors: { text: '#0b1220', background: '#fff', contentBackground: undefined },
-    titles: { left: 'Custom', right: '' },
-    // pure React node as placeholder (full control)
-    placeholder: (
-      <div style={{ padding: 18, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <ArrowUp size={28} />
-        <div style={{ marginTop: 8, fontWeight: 600 }}>Custom placeholder</div>
-        <div style={{ marginTop: 6, fontSize: 13, color: 'rgba(11,20,34,0.6)' }}>
-          Spinner, buttons, or anything
-        </div>
-      </div>
-    ),
-    padding: 16,
-    variant: 'default',
-    shadow: 'soft',
-    showBorder: false,
-  },
-};
-
-export const WithChildren: Story = {
-  args: {
-    width: 420,
-    height: 300,
-    colors: { text: '#041022', background: '#ffffff', contentBackground: undefined },
-    titles: { left: 'Embedded', right: 'Sample' },
-    padding: 12,
-    variant: 'default',
-    shadow: 'soft',
-    showBorder: false,
-  },
-  render: (args) => (
-    <ChartContainer {...args}>
-      {/* Remplace par ton vrai composant chart (Apex/Chart.js) */}
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <div style={{ textAlign: 'center' }}>
-          <div style={{ fontSize: 14, fontWeight: 600 }}>Mock Chart</div>
-          <div style={{ marginTop: 8 }}>Replace with Apex/Chart.js/other</div>
-        </div>
-      </div>
-    </ChartContainer>
-  ),
-};
-
-export const ProgrammaticIconExample: Story = {
-  args: {
-    width: 360,
-    height: 300,
-    colors: { text: '#111827', background: '#fff', contentBackground: undefined },
-    titles: { left: 'Prog Icon', right: '' },
-    placeholder: {
-      // here we show that you can compose the text + icon as structured text (or pass node)
-      text: (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <ArrowUp size={18} />
-          <span>Programmatic icon</span>
-        </div>
-      ),
-      subtext: 'Composed placeholder text with icon',
-      iconSize: 18,
-    },
-    padding: 14,
-    variant: 'default',
-    shadow: 'soft',
-    showBorder: false,
-  },
-};

package/src/components/ChartContainer/ChartContainer.tsx

@@ -1,155 +0,0 @@
-// ChartContainer.tsx
-import React, { type CSSProperties, type ReactNode } from 'react';
-import * as Icons from 'lucide-react';
-import type { LucideProps } from 'lucide-react';
-import './ChartContainer.css';
-
-export interface StructuredPlaceholder {
-  text?: ReactNode;
-  subtext?: ReactNode;
-  icon?: string;
-  iconSize?: number | string;
-  iconColor?: string;
-}
-
-export type Placeholder = ReactNode | StructuredPlaceholder;
-
-export interface ChartContainerProps {
-  width?: number | string;
-  height?: number | string;
-  colors?: { text?: string; background?: string; contentBackground?: string };
-  titles?: { left?: ReactNode; right?: ReactNode };
-  placeholder?: Placeholder;
-  style?: CSSProperties;
-  className?: string;
-  children?: ReactNode;
-  padding?: number | string;
-
-  variant?: 'default' | 'softBlueCard' | 'largeGrayCard';
-  shadow?: 'none' | 'soft' | 'strong';
-  showBorder?: boolean;
-}
-
-export const ChartContainer: React.FC<ChartContainerProps> = ({
-  width,
-  height,
-  colors = { text: '#0b1220', background: '#fff', contentBackground: '#efeff0' },
-  titles = {},
-  placeholder = 'Loading Chart',
-  style,
-  className = '',
-  children,
-  padding = '1rem',
-  variant = 'default',
-  shadow = 'soft',
-  showBorder = false,
-}) => {
-  const widthDimension = width ? (typeof width === 'number' ? `${width}px` : width) : undefined;
-  const heightDimension = height
-    ? typeof height === 'number'
-      ? `${height}px`
-      : height
-    : undefined;
-
-  // Detect structured placeholder
-  const isStructuredPlaceholder =
-    placeholder &&
-    typeof placeholder === 'object' &&
-    !React.isValidElement(placeholder) &&
-    ('text' in (placeholder as any) ||
-      'subtext' in (placeholder as any) ||
-      'icon' in (placeholder as any) ||
-      'background' in (placeholder as any) ||
-      'iconSize' in (placeholder as any));
-
-  const structured = isStructuredPlaceholder ? (placeholder as StructuredPlaceholder) : undefined;
-
-  const LucideIcon = structured?.icon
-    ? (Icons[structured.icon as keyof typeof Icons] as React.ComponentType<LucideProps> | undefined)
-    : undefined;
-
-  const defaultIconSize = 28;
-  const resolvedIconSize = structured?.iconSize ?? defaultIconSize;
-
-  const containerClass = [
-    'chart-container',
-    `variant-${variant}`,
-    shadow !== 'none' ? `shadow-${shadow}` : '',
-    showBorder ? 'with-border' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const contentBg = colors.contentBackground ?? undefined;
-
-  // build padding value for root
-  const resolvedPadding = typeof padding === 'number' ? `${padding}px` : padding;
-
-  return (
-    <div
-      className={containerClass}
-      style={{
-        width: widthDimension,
-        height: heightDimension,
-        color: colors.text,
-        background: colors.background,
-        display: 'flex',
-        flexDirection: 'column',
-        boxSizing: 'border-box',
-        padding: resolvedPadding,
-        ...style,
-      }}
-    >
-      {/* header n'a plus besoin d'appliquer la prop padding */}
-      <div className='chart-header'>
-        <div className='chart-title-left'>{titles.left}</div>
-        <div className='chart-title-right'>{titles.right}</div>
-      </div>
-      <br />
-      <div
-        className='chart-content'
-        style={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: contentBg,
-          // pas de padding spécifique ici — le padding global de la racine gère l'espace
-        }}
-      >
-        {children ? (
-          children
-        ) : isStructuredPlaceholder && structured ? (
-          <div className='placeholder' role='status' aria-live='polite'>
-            {LucideIcon && (
-              <div
-                className='placeholder-icon'
-                style={{ width: resolvedIconSize, height: resolvedIconSize }}
-              >
-                <LucideIcon
-                  color={structured.iconColor ?? 'currentColor'}
-                  size={
-                    typeof resolvedIconSize === 'number'
-                      ? resolvedIconSize
-                      : parseInt(String(resolvedIconSize), 10) || defaultIconSize
-                  }
-                />
-              </div>
-            )}
-
-            {structured.text && <div className='placeholder-text'>{structured.text}</div>}
-            {structured.subtext && <div className='placeholder-subtext'>{structured.subtext}</div>}
-          </div>
-        ) : (
-          <div className='placeholder-node' role='status' aria-live='polite'>
-            {placeholder as ReactNode}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ChartContainer;

package/src/components/ChartContainer/index.ts

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