@tsiky/components-r19 1.0.0

package/src/components/ChartContainer/ChartContainer.css

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

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

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

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

package/src/components/Charts/area-chart-admission/AreaChartAdmission.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Area from './AreaChartAdmission';
+import rawAdmissionData from './AreaChartAdmission.json';
+
+// Typage du JSON
+type AdmissionData = {
+  categories: string[];
+  series: { name: string; data: number[] }[];
+};
+
+const admissionData = rawAdmissionData as AdmissionData;
+
+const meta: Meta<typeof Area> = {
+  title: 'Charts/AreaChartAdmission',
+  component: Area,
+  args: {
+    categories: admissionData.categories,
+    series: admissionData.series,
+    height: 360,
+    title: 'Admissions',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Area>;
+
+//  Version par défaut (grand écran / desktop)
+export const Desktop: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'responsive', // Storybook ajuste automatiquement
+    },
+  },
+};
+
+//  Version tablette
+export const Tablet: Story = {
+  args: { height: 300 },
+  parameters: {
+    viewport: {
+      defaultViewport: 'ipad',
+    },
+  },
+};
+
+//  Version mobile portrait
+export const MobilePortrait: Story = {
+  args: { height: 250 },
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+//  Version mobile paysage
+export const MobileLandscape: Story = {
+  args: { height: 200 },
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphone6p', // iPhone 6 Plus (paysage)
+    },
+  },
+};

package/src/components/Charts/area-chart-admission/AreaChartAdmission.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+export type SeriesItem = { name: string; data: number[] };
+
+interface ChartProps {
+  categories: string[];
+  series: SeriesItem[];
+  height?: number;
+  title?: string;
+}
+
+const defaultColors = ['#e24b33', '#e2b23a', '#6feff0', '#2f5be8'];
+
+const Area: React.FC<ChartProps> = ({ categories, series, height = 350, title = 'Admissions' }) => {
+  const maxStack = Math.max(
+    ...categories.map((_, i) => series.reduce((s, ser) => s + (ser.data[i] ?? 0), 0))
+  );
+  const yMax = Math.max(100, Math.ceil(maxStack / 50) * 50);
+
+  const apexOptions: ApexOptions = {
+    chart: {
+      foreColor: 'var(--color-text)',
+      type: 'area',
+      stacked: true,
+      stackType: 'normal',
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      animations: { enabled: true },
+      fontFamily: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+    },
+    title: {
+      text: title,
+      align: 'center',
+      style: { fontSize: '36px', fontWeight: 700, color: '#555' },
+    },
+    colors: defaultColors,
+    dataLabels: { enabled: false },
+    stroke: { curve: 'smooth', width: 1.5 },
+    fill: { type: 'solid', opacity: 0.95 },
+    markers: { size: 0 },
+    legend: {
+      show: true,
+      position: 'top',
+      horizontalAlign: 'center',
+      itemMargin: { horizontal: 8, vertical: 0 },
+    },
+    xaxis: {
+      categories,
+      labels: { rotate: -45, rotateAlways: true, style: { fontSize: '12px' } },
+      tickPlacement: 'on',
+    },
+    yaxis: {
+      min: 0,
+      max: yMax,
+      tickAmount: 7,
+      labels: { formatter: (val) => String(Math.round(Number(val))) },
+    },
+    grid: { borderColor: '#e9e9e9', strokeDashArray: 0 },
+    tooltip: {
+      shared: true,
+      intersect: false,
+      y: { formatter: (val: number) => String(val) },
+    },
+    responsive: [
+      {
+        breakpoint: 768,
+        options: {
+          chart: { height: Math.max(240, Math.round(height * 0.7)) },
+          legend: { position: 'top' },
+          xaxis: { labels: { rotate: -45 } },
+        },
+      },
+    ],
+  };
+
+  const apexSeries = series.map((s) => ({
+    name: s.name,
+    type: 'area' as const,
+    data: s.data,
+  }));
+
+  return (
+    <Chart options={apexOptions} series={apexSeries} type='area' height={height} width='100%' />
+  );
+};
+
+export default Area;

package/src/components/Charts/area-chart-admission/content.json

@@ -0,0 +1,48 @@
+{
+  "categories": [
+    "feb. 21",
+    "mr. 2",
+    "mr. 11",
+    "mr. 20",
+    "mr. 29",
+    "apr. 7",
+    "apr. 16",
+    "apr. 25",
+    "mai. 4",
+    "mai. 13",
+    "mai. 22",
+    "mai. 31",
+    "jun. 9",
+    "jun. 18",
+    "jun. 27",
+    "jul. 6",
+    "jul. 15",
+    "jul. 24",
+    "aug. 2",
+    "aug. 11"
+  ],
+  "series": [
+    {
+      "name": "0h-6h",
+      "data": [12, 14, 13, 11, 10, 12, 14, 16, 15, 17, 16, 15, 17, 18, 20, 22, 20, 19, 21, 23]
+    },
+    {
+      "name": "6h-12h",
+      "data": [60, 58, 55, 52, 50, 56, 58, 60, 62, 63, 64, 62, 66, 68, 67, 64, 66, 65, 63, 61]
+    },
+    {
+      "name": "12h-18h",
+      "data": [
+        120, 135, 130, 125, 131, 140, 135, 138, 132, 130, 133, 132, 135, 140, 142, 130, 135, 140,
+        138, 144
+      ]
+    },
+    {
+      "name": "18h-0h",
+      "data": [
+        110, 120, 118, 115, 120, 125, 121, 128, 135, 140, 138, 140, 145, 150, 155, 152, 148, 142,
+        138, 136
+      ]
+    }
+  ]
+}