@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/PeriodRange/PeriodRange.module.css

@@ -1,158 +1,158 @@
-.wrapper {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  background: var(--color-card-background);
-  border-radius: 10px;
-  border: 1px solid rgba(16, 24, 40, 0.06);
-  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
-  width: 100%;
-}
-
-.label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--color-text);
-  font-size: 14px;
-  flex: 0 0 auto;
-}
-
-.labelText {
-  display: inline-block;
-  color: var(--color-text);
-}
-
-.calendarIcon {
-  opacity: 0.75;
-  display: block;
-}
-
-.rangeRow {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  flex-wrap: nowrap;
-}
-
-.dateWrap {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.innerLabel {
-  font-size: 12px;
-  color: #6b7280;
-  display: block;
-}
-
-.dateInput {
-  -webkit-appearance: none;
-  appearance: none;
-  border: 1px solid;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border-color: var(--color-border);
-  font-size: 14px;
-  background: transparent;
-  width: 100%;
-  box-sizing: border-box;
-  color: var(--color-text);
-}
-
-.sepWrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
-}
-
-.separator {
-  color: #9ca3af;
-  font-weight: 600;
-  user-select: none;
-}
-
-.samplingWrap {
-  display: flex;
-  /* position: absolute; */
-  flex-direction: column;
-  gap: 6px;
-  min-width: 160px;
-  flex: 0 0 auto;
-}
-
-.samplingLabel {
-  font-size: 12px;
-  color: #374151;
-}
-
-.samplingSelect {
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid rgba(16, 24, 40, 0.06);
-  background: var(--color-background);
-  font-size: 14px;
-  box-sizing: border-box;
-  width: 100%;
-  border-color: var(--color-border);
-  color: var(--color-text);
-  cursor: pointer;
-}
-
-/* Responsive: stack on smaller screens */
-@media (max-width: 720px) {
-  .wrapper {
-    padding: 10px;
-  }
-  .rangeRow {
-    gap: 8px;
-  }
-  .label {
-    font-size: 13px;
-  }
-  .samplingWrap {
-    min-width: 140px;
-  }
-}
-
-@media (max-width: 520px) {
-  .wrapper {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-  }
-
-  .label {
-    order: 0;
-  }
-  .rangeRow {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-  }
-
-  .dateWrap {
-    flex: 1 1 48%;
-  }
-  .sepWrap {
-    display: none;
-  }
-
-  .samplingWrap {
-    flex: 1 1 100%;
-    min-width: 0;
-  }
-}
-
-@media (max-width: 360px) {
-  .dateWrap {
-    flex: 1 1 100%;
-  }
-}
+.wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--color-card-background);
+  border-radius: 10px;
+  border: 1px solid rgba(16, 24, 40, 0.06);
+  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
+  width: 100%;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-text);
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+
+.labelText {
+  display: inline-block;
+  color: var(--color-text);
+}
+
+.calendarIcon {
+  opacity: 0.75;
+  display: block;
+}
+
+.rangeRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.dateWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.innerLabel {
+  font-size: 12px;
+  color: #6b7280;
+  display: block;
+}
+
+.dateInput {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 1px solid;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border-color: var(--color-border);
+  font-size: 14px;
+  background: transparent;
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--color-text);
+}
+
+.sepWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+}
+
+.separator {
+  color: #9ca3af;
+  font-weight: 600;
+  user-select: none;
+}
+
+.samplingWrap {
+  display: flex;
+  /* position: absolute; */
+  flex-direction: column;
+  gap: 6px;
+  min-width: 160px;
+  flex: 0 0 auto;
+}
+
+.samplingLabel {
+  font-size: 12px;
+  color: #374151;
+}
+
+.samplingSelect {
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(16, 24, 40, 0.06);
+  background: var(--color-background);
+  font-size: 14px;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: var(--color-border);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+/* Responsive: stack on smaller screens */
+@media (max-width: 720px) {
+  .wrapper {
+    padding: 10px;
+  }
+  .rangeRow {
+    gap: 8px;
+  }
+  .label {
+    font-size: 13px;
+  }
+  .samplingWrap {
+    min-width: 140px;
+  }
+}
+
+@media (max-width: 520px) {
+  .wrapper {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .label {
+    order: 0;
+  }
+  .rangeRow {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .dateWrap {
+    flex: 1 1 48%;
+  }
+  .sepWrap {
+    display: none;
+  }
+
+  .samplingWrap {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 360px) {
+  .dateWrap {
+    flex: 1 1 100%;
+  }
+}

package/src/components/PeriodRange/PeriodRange.tsx

@@ -1,130 +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>
-  );
-}
+/* 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/SearchBar/SearchBar.css

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