@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/PeriodRange/PeriodRange.tsx

@@ -1,130 +0,0 @@
-/* File: components/PeriodRange/PeriodRange.tsx */
-'use client';
-import { useEffect, useRef, useState } from 'react';
-import styles from './PeriodRange.module.css';
-
-export type Sampling = 'Par jour' | 'Par semaine' | 'Par mois' | 'Par heure';
-
-export interface PeriodRangeProps {
-  start?: string; // 'YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm'
-  end?: string;
-  onChange?: (range: { start: string; end: string }) => void;
-  sampling?: Sampling;
-  onSamplingChange?: (s: Sampling) => void;
-  className?: string;
-}
-
-export default function PeriodRange({
-  start = '',
-  end = '',
-  onChange,
-  sampling = 'Par jour',
-  onSamplingChange,
-  className = '',
-}: PeriodRangeProps) {
-  const [from, setFrom] = useState<string>(start);
-  const [to, setTo] = useState<string>(end);
-  const [localSampling, setLocalSampling] = useState<Sampling>(sampling);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  // keep local state in sync if parent changes props
-  useEffect(() => setFrom(start), [start]);
-  useEffect(() => setTo(end), [end]);
-  useEffect(() => setLocalSampling(sampling), [sampling]);
-
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      const t = e.target as Node | null;
-      if (containerRef.current && t && !containerRef.current.contains(t)) {
-        // keep behaviour simple: we don't show custom popovers here
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  useEffect(() => {
-    onChange?.({ start: from, end: to });
-  }, [from, to, onChange]);
-
-  const handleSamplingChange = (s: Sampling) => {
-    setLocalSampling(s);
-    onSamplingChange?.(s);
-  };
-
-  return (
-    <div className={`${styles.wrapper} ${className}`} ref={containerRef}>
-      <label className={styles.label} aria-hidden>
-        <svg
-          className={styles.calendarIcon}
-          xmlns='http://www.w3.org/2000/svg'
-          viewBox='0 0 24 24'
-          width='18'
-          height='18'
-          aria-hidden
-        >
-          <path fill='currentColor' d='M7 10h5v5H7z' opacity='0' />
-          <path
-            fill='currentColor'
-            d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zM5 20V9h14l.002 11H5z'
-          />
-        </svg>
-        <span className={styles.labelText}>Période</span>
-      </label>
-
-      <div className={styles.rangeRow}>
-        <div className={styles.dateWrap}>
-          <label className={styles.innerLabel} htmlFor='period-from'>
-            Début
-          </label>
-          <input
-            id='period-from'
-            className={styles.dateInput}
-            type='date'
-            value={from}
-            onChange={(e) => setFrom(e.target.value)}
-            aria-label='Date de début'
-          />
-        </div>
-
-        <div className={styles.sepWrap} aria-hidden>
-          <span className={styles.separator}>—</span>
-        </div>
-
-        <div className={styles.dateWrap}>
-          <label className={styles.innerLabel} htmlFor='period-to'>
-            Fin
-          </label>
-          <div className={styles.inputWithIcon}>
-            <input
-              id='period-to'
-              className={styles.dateInput}
-              type='date'
-              value={to}
-              onChange={(e) => setTo(e.target.value)}
-              aria-label='Date de fin'
-            />
-          </div>
-        </div>
-
-        <div className={styles.samplingWrap}>
-          <label className={styles.samplingLabel} htmlFor='period-sampling'>
-            Échantillonnage
-          </label>
-          <select
-            id='period-sampling'
-            className={styles.samplingSelect}
-            value={localSampling}
-            onChange={(e) => handleSamplingChange(e.target.value as Sampling)}
-            aria-label='Échantillonnage'
-          >
-            <option>Par jour</option>
-            <option>Par semaine</option>
-            <option>Par mois</option>
-            <option>Par heure</option>
-          </select>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/PeriodSelect/PeriodSelect.module.css

@@ -1,64 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: 8px;
-  height: 100%;
-}
-
-.icon {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 5px;
-}
-
-.icon p {
-  margin: 0;
-  padding: 0;
-  line-height: 1; /* évite décalage vertical dû au line-height */
-  font-size: 14px;
-}
-
-.selectWrapper {
-  display: flex;
-  align-items: center; /* centre verticalement */
-  height: 100%;
-  /* margin-top: 10px; */
-  width: 20%;
-}
-
-/* Large desktop */
-@media (max-width: 1200px) {
-  .selectWrapper {
-    width: 35%;
-  }
-}
-
-/* Tablet landscape */
-@media (max-width: 992px) {
-  .selectWrapper {
-    width: 45%;
-  }
-}
-
-/* Tablet portrait */
-@media (max-width: 768px) {
-  .selectWrapper {
-    width: 55%;
-  }
-}
-
-/* Small mobile */
-@media (max-width: 576px) {
-  .selectWrapper {
-    width: 70%;
-  }
-}
-
-/* Extra small mobile */
-@media (max-width: 400px) {
-  .selectWrapper {
-    width: 85%;
-  }
-}

package/src/components/PeriodSelect/PeriodSelect.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { PeriodSelect } from './PeriodSelect';
-
-const meta: Meta<typeof PeriodSelect> = {
-  title: 'Components/PeriodSelect',
-  component: PeriodSelect,
-  tags: ['autodocs'],
-  args: {
-    options: [
-      { label: 'Janvier 2025', value: '2025-01' },
-      { label: 'Février 2025', value: '2025-02' },
-      { label: 'Mars 2025', value: '2025-03' },
-    ],
-    defaultValue: '2025-01',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PeriodSelect>;
-
-export const Default: Story = {};
-
-export const WithCustomDefault: Story = {
-  args: {
-    defaultValue: '2025-02',
-  },
-};
-
-export const Controlled: Story = {
-  render: (args) => {
-    return (
-      <PeriodSelect
-        {...args}
-        onChange={(newVal) => {
-          console.log('Valeur sélectionnée:', newVal);
-        }}
-      />
-    );
-  },
-};

package/src/components/PeriodSelect/PeriodSelect.tsx

@@ -1,48 +0,0 @@
-import React, { useState } from 'react';
-import styles from './PeriodSelect.module.css';
-import { Calendar } from 'lucide-react';
-import { SelectInput } from '../DynamicInput';
-
-export interface Option {
-  label: string;
-  value: string;
-}
-
-interface PeriodSelectProps {
-  options: Option[];
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  label?: string;
-}
-
-export const PeriodSelect: React.FC<PeriodSelectProps> = ({
-  options,
-  defaultValue,
-  onChange,
-  label,
-}) => {
-  const [value, setValue] = useState(defaultValue || options[0]?.value || '');
-
-  const handleChange = (val: string) => {
-    setValue(val);
-    onChange?.(val);
-  };
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.icon}>
-        <Calendar size={18} />
-        <p>{label}</p>
-      </div>
-
-      <div className={styles.selectWrapper}>
-        <SelectInput
-          field={{ name: 'periode', label: '', options }}
-          value={value}
-          onChange={handleChange}
-          onBlur={() => {}}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/PeriodSelect/index.ts

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

package/src/components/ScrollableHorizontale/ScrollableHorizontale.css

@@ -1,40 +0,0 @@
-.scrollable-horizontale {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 15px 17px;
-  border-top: 1px solid #d1d5db;
-  font-size: var(--text-small);
-}
-
-/* Bloc scrollable uniquement pour les children */
-.scrollable {
-  display: flex;
-  gap: 4px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  flex: 1; /* prend toute la place disponible */
-  scrollbar-width: thin;
-  scrollbar-color: #bbb transparent;
-  -webkit-overflow-scrolling: touch;
-}
-
-.scrollable::-webkit-scrollbar {
-  height: 6px;
-}
-
-.scrollable::-webkit-scrollbar-thumb {
-  background: #bbb;
-  border-radius: 3px;
-}
-
-.scrollable::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* Le menu reste à droite et ne scroll pas */
-.scrollable-dropdown {
-  top: 0;
-  flex-shrink: 0; /* ne rétrécit jamais */
-}

package/src/components/ScrollableHorizontale/ScrollableHorizontale.stories.tsx

@@ -1,133 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ScrollableHorizontale } from './ScrollableHorizontale';
-
-const meta = {
-  title: 'Components/ScrollableHorizontale',
-  component: ScrollableHorizontale,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes',
-      table: {
-        category: 'Styling',
-      },
-    },
-    children: {
-      control: 'object',
-      description: 'Content to be displayed in the scrollable container',
-      table: {
-        category: 'Content',
-      },
-    },
-  },
-} satisfies Meta<typeof ScrollableHorizontale>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <div style={{ display: 'flex', gap: '16px', minWidth: 'max-content' }}>
-        {Array.from({ length: 10 }).map((_, i) => (
-          <div
-            key={i}
-            style={{
-              minWidth: '200px',
-              height: '100px',
-              backgroundColor: '#f0f0f0',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: '8px',
-            }}
-          >
-            Item {i + 1}
-          </div>
-        ))}
-      </div>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default horizontal scrollable container with sample content',
-      },
-    },
-  },
-};
-
-export const WithCustomClass: Story = {
-  args: {
-    className: 'custom-scrollable',
-    children: (
-      <div style={{ display: 'flex', gap: '16px', minWidth: 'max-content' }}>
-        {Array.from({ length: 5 }).map((_, i) => (
-          <div
-            key={i}
-            style={{
-              minWidth: '150px',
-              height: '80px',
-              backgroundColor: '#e0e0e0',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: '4px',
-            }}
-          >
-            Custom Item {i + 1}
-          </div>
-        ))}
-      </div>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Scrollable container with custom CSS class for additional styling',
-      },
-    },
-  },
-};
-
-export const WithCards: Story = {
-  args: {
-    children: (
-      <div style={{ display: 'flex', gap: '12px', minWidth: 'max-content' }}>
-        {[
-          { title: 'Card 1', color: '#ffebee' },
-          { title: 'Card 2', color: '#e8f5e9' },
-          { title: 'Card 3', color: '#e3f2fd' },
-          { title: 'Card 4', color: '#fff8e1' },
-          { title: 'Card 5', color: '#f3e5f5' },
-        ].map((card, i) => (
-          <div
-            key={i}
-            style={{
-              minWidth: '180px',
-              height: '120px',
-              backgroundColor: card.color,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: '8px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            }}
-          >
-            {card.title}
-          </div>
-        ))}
-      </div>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Horizontal scrollable container with card elements',
-      },
-    },
-  },
-};

package/src/components/ScrollableHorizontale/ScrollableHorizontale.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import './ScrollableHorizontale.css';
-import DropdownMenu, { type MenuCategory } from '../DropdownMenu/DropdownMenu';
-
-type ScrollableHorizontaleProps = {
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  item?: MenuCategory[];
-};
-
-export const ScrollableHorizontale: React.FC<ScrollableHorizontaleProps> = ({
-  children,
-  className = '',
-  style,
-  item,
-}) => {
-  return (
-    <div className={`scrollable-horizontale ${className}`} style={style}>
-      {/* Partie scrollable */}
-      <div className='scrollable'>{children}</div>
-
-      {/* Dropdown menu à droite (non scrollable) */}
-      <div className='scrollable-dropdown'>
-        <DropdownMenu logo='BarChart' position='right' categories={item} />
-      </div>
-    </div>
-  );
-};

package/src/components/SearchBar/SearchBar.css

@@ -1,40 +0,0 @@
-.search-container {
-  position: relative;
-  width: 100%;
-}
-
-.search-icon {
-  position: absolute;
-  left: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1.25rem;
-  height: 1.25rem;
-  color: #9ca3af;
-  pointer-events: none;
-}
-
-.search-input {
-  width: 100%;
-  padding: 1rem 1rem 1rem 3rem; /* top right bottom left */
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  outline: none;
-  background-color: white;
-  color: var(--color-text);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
-  border: 1px solid var(--color-border);
-  background-color: var(--color-card-background);
-}
-
-.search-input::placeholder {
-  color: #9ca3af;
-  font-family: var(--font-primary);
-  font-size: var(--text-paragraph);
-  font-weight: var(--font-normal);
-}
-
-.search-input:focus {
-  border-color: #d1d5db;
-}

package/src/components/SearchBar/SearchBar.stories.tsx

@@ -1,36 +0,0 @@
-// SearchBar.stories.tsx
-import type { Meta, StoryObj } from '@storybook/react';
-import { SearchBar } from './SearchBar';
-
-const meta: Meta<typeof SearchBar> = {
-  title: 'Components/SearchBar',
-  component: SearchBar,
-  tags: ['autodocs'],
-  args: {
-    placeholder: 'Rechercher une clé ou traduction...',
-    value: '',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof SearchBar>;
-
-export const Default: Story = {};
-
-export const WithValue: Story = {
-  args: {
-    value: 'bonjour',
-  },
-};
-
-export const CustomPlaceholder: Story = {
-  args: {
-    placeholder: 'Tapez votre recherche ici...',
-  },
-};
-
-export const WithOnChange: Story = {
-  args: {
-    onChange: (val: string) => alert(`Recherche: ${val}`),
-  },
-};

package/src/components/SearchBar/SearchBar.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Search } from 'lucide-react';
-import './SearchBar.css';
-
-interface SearchBarProps {
-  placeholder?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-}
-
-export const SearchBar: React.FC<SearchBarProps> = ({
-  placeholder = 'Rechercher une clé ou traduction...',
-  value = '',
-  onChange,
-}) => {
-  return (
-    <div className='search-container'>
-      <div>
-        <Search className='search-icon' />
-      </div>
-      <input
-        type='text'
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        className='search-input'
-      />
-    </div>
-  );
-};

package/src/components/SearchBar/index.ts

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

package/src/components/SectionTitle/SectionTitle.css

@@ -1,21 +0,0 @@
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 12px 0;
-}
-
-.section-title-bar {
-  width: 3px;
-  height: 30px;
-  border-radius: 2px;
-  background-color: var(--mp-accent); /* exemple d’accent coloré */
-}
-
-.section-title-text {
-  font-family: var(--font-primary);
-  font-size: var(--text-small); /* 0.875rem → 14px */
-  font-weight: var(--font-medium); /* 600 */
-  color: var(--mp-text-primary); /* texte sombre */
-  text-transform: uppercase;
-}

package/src/components/SectionTitle/SectionTitle.stories.tsx

@@ -1,39 +0,0 @@
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/react';
-import SectionTitle from './SectionTitle';
-
-const meta: Meta<typeof SectionTitle> = {
-  title: 'Components/SectionTitle',
-  component: SectionTitle,
-  tags: ['autodocs'],
-  args: {
-    text: 'Bed Management',
-    color: '#0ea5e9',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SectionTitle>;
-
-export const Default: Story = {};
-
-export const Red: Story = {
-  args: {
-    color: '#ef4444',
-    text: 'Critical Alerts',
-  },
-};
-
-export const Green: Story = {
-  args: {
-    color: '#22c55e',
-    text: 'Active Patients',
-  },
-};
-
-export const Purple: Story = {
-  args: {
-    color: '#8b5cf6',
-    text: 'Analytics',
-  },
-};

package/src/components/SectionTitle/SectionTitle.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import './SectionTitle.css';
-
-interface SectionTitleProps {
-  text: string;
-  color?: string;
-}
-
-const SectionTitle: React.FC<SectionTitleProps> = ({ text, color = '#0ea5e9' }) => {
-  return (
-    <div className='section-title'>
-      <div className='section-title-bar' style={{ backgroundColor: color }} />
-      <span className='section-title-text'>{text}</span>
-    </div>
-  );
-};
-
-export default SectionTitle;