@tsiky/components-r19 1.0.0

package/src/components/IconText/IconText.css

@@ -0,0 +1,43 @@
+.icon-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  padding: 6px 12px;
+  transition:
+    color 0.25s ease,
+    transform 0.2s ease,
+    border-color 0.25s ease;
+  color: inherit;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+}
+
+.icon-text span {
+  line-height: 1.4;
+}
+
+.icon-text svg {
+  flex-shrink: 0;
+  transition:
+    transform 0.2s ease,
+    color 0.25s ease;
+}
+
+.icon-text:hover {
+  color: var(--color-primary);
+}
+
+.icon-text:hover svg {
+  transform: scale(1.1);
+  color: inherit;
+}
+
+.icon-text:active {
+  transform: scale(0.96);
+}
+
+.icon-text-active {
+  border-bottom-color: currentColor;
+}

package/src/components/IconText/IconText.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import * as Icons from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
+import './IconText.css';
+
+type IconTextProps = {
+  icon?: string;
+  text: string;
+  size?: number;
+  color?: string;
+  className?: string;
+  active?: boolean;
+  href?: string;
+};
+
+export const IconText: React.FC<IconTextProps> = ({
+  icon,
+  text,
+  size = 16,
+  color = 'currentColor',
+  className = '',
+  active = false,
+  href,
+}) => {
+  const LucideIcon = icon
+    ? (Icons[icon as keyof typeof Icons] as React.ComponentType<LucideProps>)
+    : null;
+
+  const Tag = href ? 'a' : 'div';
+
+  return (
+    <Tag
+      className={`icon-text ${active ? 'icon-text-active' : ''} ${className}`}
+      style={{ color }}
+      role='text'
+      aria-label={text}
+      {...(href ? { href } : {})}
+    >
+      {LucideIcon && <LucideIcon size={size} aria-hidden='true' />}
+      <span>{text}</span>
+    </Tag>
+  );
+};

package/src/components/IconText/index.ts

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

package/src/components/LanguageSelector/LanguageSelector.css

@@ -0,0 +1,31 @@
+.language-selector-container {
+  position: relative;
+  margin-bottom: 1rem; /* équivalent à mb-4 */
+}
+
+.language-selector {
+  width: 100%;
+  padding: 0.75rem 2.5rem 0.75rem 1rem; /* px-4 py-3 pr-10 */
+  background-color: white;
+  border: 1px solid #e5e7eb; /* gray-200 */
+  border-radius: 0.5rem; /* rounded-lg */
+  outline: none;
+  appearance: none; /* supprime la flèche native */
+  transition: all 0.2s ease-in-out;
+}
+
+.language-selector:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px #10b981; /* emerald-500 ring */
+}
+
+.language-selector-icon {
+  position: absolute;
+  right: 0.75rem; /* right-3 */
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem; /* w-4 */
+  height: 1rem; /* h-4 */
+  color: #9ca3af; /* gray-400 */
+  pointer-events: none; /* pas cliquable */
+}

package/src/components/LanguageSelector/LanguageSelector.stories.tsx

@@ -0,0 +1,38 @@
+// LanguageSelector.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { LanguageSelector } from './LanguageSelector';
+
+const meta: Meta<typeof LanguageSelector> = {
+  title: 'Components/LanguageSelector',
+  component: LanguageSelector,
+  tags: ['autodocs'], // permet à Storybook 7 de générer la doc automatiquement
+  args: {
+    languages: [
+      { code: 'fr', name: 'Français' },
+      { code: 'en', name: 'English' },
+      { code: 'es', name: 'Español' },
+    ],
+    placeholder: 'Sélectionnez une langue',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof LanguageSelector>;
+
+export const Default: Story = {
+  args: {
+    selectedLanguage: '',
+  },
+};
+
+export const WithSelectedLanguage: Story = {
+  args: {
+    selectedLanguage: 'en',
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: 'Choisissez votre langue',
+  },
+};

package/src/components/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import './LanguageSelector.css';
+
+interface LanguageSelectorProps {
+  languages: { code: string; name: string }[];
+  selectedLanguage?: string;
+  placeholder?: string;
+  onChange?: (language: string) => void;
+}
+
+export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
+  languages,
+  selectedLanguage,
+  placeholder = 'Sélectionnez la langue',
+  onChange,
+}) => {
+  return (
+    <div className='language-selector-container'>
+      <select
+        value={selectedLanguage || ''}
+        onChange={(e) => onChange?.(e.target.value)}
+        className='language-selector'
+      >
+        <option value='' disabled>
+          {placeholder}
+        </option>
+        {languages.map((lang) => (
+          <option key={lang.code} value={lang.code}>
+            {lang.name}
+          </option>
+        ))}
+      </select>
+      <ChevronDown className='language-selector-icon' />
+    </div>
+  );
+};

package/src/components/LanguageSelector/index.ts

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

package/src/components/Logo/Logo.css

@@ -0,0 +1,89 @@
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+}
+
+.logo-image {
+  height: auto;
+  object-fit: contain;
+  display: block;
+  transition: max-width 0.3s ease;
+}
+
+.logo--small .logo-image {
+  max-width: 100px;
+}
+
+.logo--medium .logo-image {
+  max-width: 140px;
+}
+
+.logo--large .logo-image {
+  max-width: 180px;
+}
+
+.logo--xlarge .logo-image {
+  max-width: 220px;
+}
+
+.logo--auto .logo-image {
+  max-width: 100%;
+}
+
+.logo--responsive .logo-image {
+  max-width: 140px;
+}
+
+@media (max-width: 1024px) {
+  .logo--responsive .logo-image {
+    max-width: 120px;
+  }
+}
+
+@media (max-width: 768px) {
+  .logo--responsive .logo-image {
+    max-width: 100px;
+  }
+}
+
+@media (max-width: 480px) {
+  .logo--responsive .logo-image {
+    max-width: 80px;
+  }
+}
+
+@media (max-width: 320px) {
+  .logo--responsive .logo-image {
+    max-width: 70px;
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .logo-image {
+    transform: translateZ(0);
+  }
+}
+
+@media (max-height: 480px) and (orientation: landscape) {
+  .logo--responsive .logo-image {
+    max-width: 70px;
+  }
+}
+
+.logo .tagline {
+  margin-left: 8px;
+  color: #666;
+}
+
+@media print {
+  .logo {
+    margin-right: 4px;
+  }
+
+  .logo-image {
+    max-width: 100px;
+    filter: contrast(1.2);
+  }
+}

package/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './Logo';
+
+const meta = {
+  title: 'Components/Logo',
+  component: Logo,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        category: 'Styling',
+      },
+    },
+    imagePath: {
+      control: 'text',
+      description: 'Path to the logo image',
+      table: {
+        category: 'Content',
+      },
+    },
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    imagePath: '/logo-default.png',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    imagePath: '/logo-default.png',
+    className: 'custom-logo',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Logo with custom CSS class for additional styling',
+      },
+    },
+  },
+};
+
+export const WithoutImage: Story = {
+  args: {
+    imagePath: undefined,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Logo component without image source (fallback content)',
+      },
+    },
+  },
+};
+
+export const Responsive: Story = {
+  args: {
+    imagePath: '/logo-default.png',
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+    docs: {
+      description: {
+        story: 'Logo with responsive behavior on mobile viewport',
+      },
+    },
+  },
+};

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './Logo.css';
+
+export type LogoProps = {
+  className?: string;
+  imagePath?: string;
+  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'auto';
+  responsive?: boolean;
+};
+
+export const Logo: React.FC<LogoProps> = ({
+  className = '',
+  imagePath,
+  size = 'auto',
+  responsive = true,
+}) => {
+  return (
+    <div className={`logo logo--${size} ${responsive ? 'logo--responsive' : ''} ${className}`}>
+      <img src={imagePath} alt='Saniia Smart Bed Management' className='logo-image' />
+    </div>
+  );
+};

package/src/components/Logo/index.ts

@@ -0,0 +1,2 @@
+export { Logo } from './Logo';
+export type { LogoProps } from './Logo';

package/src/components/MetricsPanel/MetricsItem.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useCallback } from 'react';
+import styles from './MetricsPanel.module.css';
+import { hexToRgba } from './tools/colorUtils';
+import type { MetricsItem as MetricsItemType } from './tools/MetricsPanelTypes';
+
+interface Props {
+  item: MetricsItemType;
+  shape?: 'rounded' | 'pill';
+  onItemClick?: (item: MetricsItemType) => void | null;
+  color?: string;
+  renderItem?: (item: MetricsItemType) => React.ReactNode;
+}
+
+const MetricsItem: React.FC<Props> = ({ item, shape, onItemClick, color, renderItem }) => {
+  const handleClick = useCallback(() => {
+    onItemClick?.(item);
+  }, [onItemClick, item]);
+
+  const baseClasses = [
+    styles.mpItem,
+    shape === 'pill' ? styles.mpPill : styles.mpRounded,
+    onItemClick ? styles.mpClickable : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (renderItem) {
+    return (
+      <div
+        className={baseClasses}
+        role={onItemClick ? 'button' : 'group'}
+        tabIndex={onItemClick ? 0 : -1}
+        onClick={handleClick}
+        onKeyDown={(e) => {
+          if (!onItemClick) return;
+          if (e.key === 'Enter' || e.key === ' ') {
+            onItemClick(item);
+            e.preventDefault();
+          }
+        }}
+        aria-label={onItemClick ? `Voir les détails de ${item.label}` : undefined}
+      >
+        {renderItem(item)}
+      </div>
+    );
+  }
+
+  const Wrapper: any = onItemClick ? 'button' : 'div';
+  const wrapperProps: any = onItemClick
+    ? {
+        onClick: handleClick,
+        className: baseClasses,
+        type: 'button',
+        'aria-label': `Voir les détails de ${item.label}`,
+      }
+    : {
+        className: baseClasses,
+        role: 'group',
+      };
+
+  // Icon support:
+  // - legacy: item.icon (ReactNode)
+  // - new: item.iconComponent (lucide component), item.iconSquareBg (string), item.iconColor (string)
+  const IconComponent = (item as any).iconComponent;
+  const iconSquareBg = (item as any).iconSquareBg;
+  const iconColor = (item as any).iconColor;
+
+  return (
+    <Wrapper {...wrapperProps}>
+      <div className={styles.mpLeft}>
+        {/* If iconComponent provided, render square filled; else fallback to old mpIcon */}
+        {IconComponent ? (
+          <div
+            className={styles.mpIconSquare}
+            style={{
+              background: iconSquareBg ?? hexToRgba(iconColor ?? color ?? '#7c3aed', 1),
+              border: `1px solid ${hexToRgba(iconColor ?? color ?? '#7c3aed', 0.18)}`,
+              color: iconColor ?? '#ffffff',
+            }}
+          >
+            {React.createElement(IconComponent as any, {
+              size: 20,
+              color: iconColor ?? '#fff',
+              strokeWidth: 1.8,
+            })}
+          </div>
+        ) : item.icon ? (
+          <div className={styles.mpIcon}>{item.icon}</div>
+        ) : null}
+
+        <div className={styles.mpMeta}>
+          <div className={styles.mpLabel}>{item.label}</div>
+          {item.subLabel && <div className={styles.mpDate}>{item.subLabel}</div>}
+          {item.date && <div className={styles.mpDate}>{item.date}</div>}
+        </div>
+      </div>
+
+      <div className={styles.mpRight}>
+        <div className={styles.mpValue} style={{ color: item.valueColor ?? color ?? undefined }}>
+          {item.value}
+        </div>
+
+        {item.badge ? (
+          <div
+            className={[styles.mpBadge, item.badge.small ? styles.mpBadgeSmall : ''].join(' ')}
+            style={{
+              backgroundColor:
+                item.badge.bg ?? hexToRgba(item.badge.color || color || '#7c3aed', 0.12),
+              borderColor: item.badge.bg
+                ? 'transparent'
+                : hexToRgba(item.badge.color || color || '#7c3aed', 0.18),
+              color: item.badge.color ?? item.badge.textColor ?? '#0f172a',
+              fontWeight: 600,
+            }}
+          >
+            <div className={styles.mpBadgeTop}>{item.badge.text}</div>
+            {item.badge.subText && <div className={styles.mpBadgeSub}>{item.badge.subText}</div>}
+          </div>
+        ) : item.hint ? (
+          <div className={styles.mpHint}>{item.hint}</div>
+        ) : null}
+      </div>
+    </Wrapper>
+  );
+};
+
+export default React.memo(MetricsItem);