@tsiky/components-r19 1.0.0

package/src/components/PeriodRange/PeriodRange.tsx

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

@@ -0,0 +1,65 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  height: 100%;
+}
+
+.icon {
+  color: #6b7280; /* gris doux */
+  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

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

@@ -0,0 +1,42 @@
+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;
+}
+
+export const PeriodSelect: React.FC<PeriodSelectProps> = ({ options, defaultValue, onChange }) => {
+  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> Période: </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

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

package/src/components/ScrollableHorizontale/ScrollableHorizontale.css

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

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

@@ -0,0 +1,29 @@
+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/ScrollableHorizontale/index.ts

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

package/src/components/SearchBar/SearchBar.css

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

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

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

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

package/src/components/SectionTitle/SectionTitle.css

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

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

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