@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/IconText/IconText.css

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

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

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

package/src/components/LanguageSelector/LanguageSelector.css

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

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

@@ -1,37 +0,0 @@
-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/Logo/Logo.css

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

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

@@ -1,22 +0,0 @@
-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/MetricsPanel/MetricsItem.tsx

@@ -1,128 +0,0 @@
-/* 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);