@tsiky/components-r19 1.0.0

package/src/components/EntryControl/EntryControl.module.css

@@ -0,0 +1,218 @@
+.wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 12px 18px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.leftGroup {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.filterButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(16, 24, 40, 0.08);
+  cursor: pointer;
+  font-size: 14px;
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.03);
+  transition:
+    box-shadow 160ms ease,
+    transform 120ms ease;
+}
+
+.filterButton:focus {
+  outline: 3px solid rgba(59, 130, 246, 0.14);
+  outline-offset: 2px;
+}
+
+.filterButton.open .filterIcon,
+.filterButton.open .filterIcon path {
+  transform-origin: 50% 50%;
+}
+
+.filterButton.open .filterIcon {
+  transform: rotate(180deg);
+  transition: transform 180ms ease;
+}
+
+.filterIcon {
+  opacity: 0.8;
+  width: 14px;
+  height: 14px;
+}
+
+.infoText {
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 28ch;
+}
+
+.pickerContainer {
+  position: static;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+  z-index: 60;
+  width: auto;
+  box-sizing: border-box;
+  padding: 0;
+  background: transparent;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.pickerLabel {
+  font-size: 12px;
+  margin: 0;
+  display: block;
+  white-space: nowrap;
+}
+
+.datetime {
+  width: 220px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(16, 24, 40, 0.08);
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.rightGroup {
+  margin-left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.searchInputWrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 10px;
+  padding: 6px 10px;
+  border: 1px solid rgba(16, 24, 40, 0.06);
+  min-width: 180px;
+  max-width: 420px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.searchInput {
+  border: none;
+  outline: none;
+  font-size: 14px;
+  width: 100%;
+  background: transparent;
+  padding: 6px 0;
+  transition:
+    padding 160ms ease,
+    background-color 160ms ease;
+  box-sizing: border-box;
+}
+
+.searchInput::placeholder {
+  color: #9aa4b2;
+}
+
+.searchInput:focus,
+.searchInput:not(:placeholder-shown) {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.searchIcon {
+  opacity: 0.6;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+@media (max-width: 760px) {
+  .wrapper {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    padding: 10px;
+  }
+
+  .leftGroup {
+    width: 100%;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .infoText {
+    display: none;
+  }
+
+  .rightGroup {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-start;
+  }
+
+  .searchInputWrap {
+    max-width: 100%;
+  }
+
+  .pickerContainer {
+    position: absolute;
+    top: calc(100% + 10px);
+    left: 0;
+    right: 0;
+    width: auto;
+    max-width: 100%;
+    border: 1px solid rgba(16, 24, 40, 0.06);
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .datetime {
+    width: 100%;
+  }
+}
+
+@media (max-width: 420px) {
+  .filterButton {
+    padding: 6px 10px;
+    font-size: 13px;
+  }
+
+  .searchInputWrap {
+    padding: 6px 8px;
+    min-width: 140px;
+  }
+}

package/src/components/EntryControl/EntryControl.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import EntryControl, { type EntryControlProps } from './EntryControl';
+
+const meta: Meta<typeof EntryControl> = {
+  title: 'Components/EntryControl',
+  component: EntryControl,
+  tags: ['autodocs'],
+  args: {
+    initialDate: undefined,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EntryControl>;
+
+export const Default: Story = {
+  render: (args: EntryControlProps) => (
+    <div style={{ padding: 24, background: '#f8fafc' }}>
+      <EntryControl
+        {...args}
+        onDateChange={(d) => console.log('selected datetime:', d)}
+        onSearch={(q) => console.log('search:', q)}
+      />
+    </div>
+  ),
+};
+
+export const WithInitialDate: Story = {
+  args: {
+    initialDate: new Date().toISOString().slice(0, 16),
+  },
+  render: (args: EntryControlProps) => (
+    <div style={{ padding: 24 }}>
+      <EntryControl
+        {...args}
+        onDateChange={(d) => console.log('selected datetime:', d)}
+        onSearch={(q) => console.log('search:', q)}
+      />
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: (args: EntryControlProps) => {
+    const [value, setValue] = React.useState<string | undefined>(args.initialDate);
+    return (
+      <div style={{ padding: 24 }}>
+        <EntryControl
+          {...args}
+          initialDate={value}
+          onDateChange={(d) => {
+            setValue(d);
+            console.log('controlled selected datetime:', d);
+          }}
+          onSearch={(q) => console.log('search:', q)}
+        />
+        <div style={{ marginTop: 12, fontSize: 13, color: '#6b7280' }}>
+          Valeur contrôlée: {value ?? '—'}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/EntryControl/EntryControl.tsx

@@ -0,0 +1,117 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './EntryControl.module.css';
+
+export interface EntryControlProps {
+  onDateChange?: (isoString: string) => void;
+  onSearch?: (query: string) => void;
+  initialDate?: string;
+}
+
+export default function EntryControl({ onDateChange, onSearch, initialDate }: EntryControlProps) {
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+  const [datetime, setDatetime] = useState<string>(initialDate ?? '');
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node | null;
+      if (containerRef.current && target && !containerRef.current.contains(target)) {
+        setShowPicker(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (initialDate) setDatetime(initialDate);
+  }, [initialDate]);
+
+  const handleToggle = () => setShowPicker((v) => !v);
+
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = e.target.value;
+    setDatetime(v);
+    onDateChange?.(v);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSearch?.(e.target.value);
+  };
+
+  return (
+    <div className={styles.wrapper} ref={containerRef}>
+      <div className={styles.leftGroup}>
+        <button
+          type='button'
+          className={`${styles.filterButton} ${showPicker ? styles.open : ''}`}
+          onClick={handleToggle}
+          aria-expanded={showPicker}
+          aria-haspopup='dialog'
+          aria-controls='entry-datetime'
+        >
+          <span>Entry time</span>
+          <svg
+            className={styles.filterIcon}
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width='14'
+            height='14'
+            aria-hidden
+          >
+            <path fill='currentColor' d='M10 18h4v-2h-4v2zm-7-8v2h18V10H3zm3-6v2h12V4H6z' />
+          </svg>
+        </button>
+
+        <div className={styles.infoText}>Confidence interval: step ± 15' / exit ± 30'</div>
+
+        {/* pickerContainer est maintenant inline sur grands écrans, absolute sur petits */}
+        {showPicker && (
+          <div
+            className={styles.pickerContainer}
+            role='dialog'
+            aria-label='Choisir la date et l’heure'
+          >
+            <label className={styles.pickerLabel} htmlFor='entry-datetime'>
+              <span className={styles.srOnly}>Choisir la date et l’heure</span>
+            </label>
+            <input
+              id='entry-datetime'
+              className={styles.datetime}
+              type='datetime-local'
+              value={datetime}
+              onChange={handleDateChange}
+              aria-label='Date et heure d’entrée'
+            />
+          </div>
+        )}
+      </div>
+
+      <div className={styles.rightGroup}>
+        <div className={styles.searchInputWrap}>
+          <input
+            className={styles.searchInput}
+            placeholder='Search...'
+            onChange={handleSearch}
+            aria-label='Search'
+          />
+          <svg
+            className={styles.searchIcon}
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width='16'
+            height='16'
+            aria-hidden
+          >
+            <path
+              fill='currentColor'
+              d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79L20 20.49 21.49 19l-5.99-5zM10 15.5A5.5 5.5 0 1115.5 10 5.5 5.5 0 0110 15.5z'
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/EntryControl/index.ts

@@ -0,0 +1,2 @@
+export { default as EntryControl } from './EntryControl';
+export type { EntryControlProps } from './EntryControl';

package/src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Grid from './Grid';
+
+const meta: Meta<typeof Grid> = {
+  title: 'Components/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+/**
+ * Default example with 3 responsive blocks
+ */
+export const BasicLayout: Story = {
+  render: () => (
+    <Grid parent container spacing={2} uniqueKey={1}>
+      <Grid item xs={12} uniqueKey={2}>
+        <div style={{ background: '#90caf9', padding: '1rem', textAlign: 'center' }}>Block 1</div>
+      </Grid>
+      <Grid item xs={12} uniqueKey={3}>
+        <div style={{ background: '#f48fb1', padding: '1rem', textAlign: 'center' }}>Block 2</div>
+      </Grid>
+      <Grid item xs={12} uniqueKey={4}>
+        <div style={{ background: '#a5d6a7', padding: '1rem', textAlign: 'center' }}>Block 3</div>
+      </Grid>
+    </Grid>
+  ),
+};
+
+/**
+ * Example with 4 equal columns
+ */
+export const FourColumns: Story = {
+  render: () => (
+    <Grid parent container spacing={2} uniqueKey={1}>
+      {['#ffcc80', '#ce93d8', '#80cbc4', '#ef9a9a'].map((color, i) => (
+        <Grid key={i} item xs={12} sm={6} md={6} uniqueKey={i + 1}>
+          <div style={{ background: color, padding: '1rem', textAlign: 'center' }}>
+            Column {i + 1}
+          </div>
+        </Grid>
+      ))}
+    </Grid>
+  ),
+};
+
+/**
+ * Example with drag & drop enabled
+ */
+export const DraggableItems: Story = {
+  render: () => (
+    <Grid parent container spacing={2} uniqueKey={1}>
+      {['Drag me 1', 'Drag me 2', 'Drag me 3'].map((text, i) => (
+        <Grid key={i} item xs={12} sm={12} md={12} lg={12} xl={12} uniqueKey={i + 1}>
+          <div
+            style={{
+              background: '#ffe082',
+              padding: '1rem',
+              textAlign: 'center',
+              border: '1px solid #999',
+            }}
+          >
+            {text}
+          </div>
+        </Grid>
+      ))}
+    </Grid>
+  ),
+};
+
+/**
+ * Nested grids (grid inside a grid item)
+ */
+export const NestedGrid: Story = {
+  render: () => (
+    <Grid parent container spacing={2} uniqueKey={1}>
+      <Grid item xs={12} uniqueKey={2}>
+        <div style={{ background: '#b0bec5', padding: '1rem', textAlign: 'center' }}>
+          Parent Block
+          <Grid container spacing={1} style={{ marginTop: '1rem' }} uniqueKey={3}>
+            <Grid item xs={12} uniqueKey={4}>
+              <div style={{ background: '#ffab91', padding: '0.5rem' }}>Child 1</div>
+            </Grid>
+            <Grid item xs={12} uniqueKey={5}>
+              <div style={{ background: '#80deea', padding: '0.5rem' }}>Child 2</div>
+            </Grid>
+          </Grid>
+        </div>
+      </Grid>
+    </Grid>
+  ),
+};

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from 'react';
+import './grid.css';
+
+export interface GridProps {
+  children?: React.ReactNode;
+  container?: boolean;
+  item?: boolean;
+  parent?: boolean;
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  spacing?: number;
+  className?: string;
+  uniqueKey?: number;
+  style?: React.CSSProperties;
+  width?: number;
+  order?: number[];
+  onSwap?: (dragKey: number, dropKey: number) => void;
+  draggable?: boolean;
+}
+
+type ItemSlot = {
+  node: React.ReactNode;
+  classes: string;
+};
+
+const Grid: React.FC<GridProps> = ({
+  children,
+  container = false,
+  item = false,
+  parent = false,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  spacing = 0,
+  className = '',
+  uniqueKey = 0,
+  style = {},
+  width,
+  order,
+  onSwap,
+  draggable = false,
+}) => {
+  const [items, setItems] = useState<ItemSlot[]>([]);
+
+  useEffect(() => {
+    const flattenChildren = (children: React.ReactNode): React.ReactElement[] => {
+      const result: React.ReactElement[] = [];
+      React.Children.forEach(children, (child) => {
+        if (Array.isArray(child)) {
+          result.push(...flattenChildren(child));
+        } else if (React.isValidElement(child)) {
+          result.push(child);
+        }
+      });
+      return result;
+    };
+
+    const childrenArray = flattenChildren(children);
+
+    const mapped: ItemSlot[] = childrenArray
+      .filter((child) => React.isValidElement(child))
+      .map((child) => {
+        let classes = '';
+        const childProps = child.props as GridProps;
+        classes = [
+          childProps.xs ? `grid-xs-${childProps.xs}` : '',
+          childProps.sm ? `grid-sm-${childProps.sm}` : '',
+          childProps.md ? `grid-md-${childProps.md}` : '',
+          childProps.lg ? `grid-lg-${childProps.lg}` : '',
+          childProps.xl ? `grid-xl-${childProps.xl}` : '',
+          childProps.className ? childProps.className : '',
+        ]
+          .join(' ')
+          .trim();
+        return { node: child, classes };
+      });
+
+    let ordered = mapped;
+    if (order && order.length > 0) {
+      ordered = mapped.map((slot, idx) => ({
+        ...slot,
+        node: mapped[order[idx]]?.node ?? slot.node,
+      }));
+    }
+
+    setItems(ordered);
+  }, [children]);
+
+  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
+    e.stopPropagation();
+    e.dataTransfer.setData('dragIndex', index.toString());
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>, dropIndex: number) => {
+    e.preventDefault();
+    const dragIndex = Number(e.dataTransfer.getData('dragIndex'));
+    const updatedItems = [...items];
+
+    let dropInd = -1;
+    let dragInd = -1;
+
+    updatedItems.forEach((item, index) => {
+      if (React.isValidElement<GridProps>(item.node)) {
+        const childProps: GridProps = item.node.props;
+        if (childProps.uniqueKey === dropIndex) {
+          dropInd = index;
+        }
+        if (childProps.uniqueKey === dragIndex) {
+          dragInd = index;
+        }
+      }
+    });
+
+    if (dropInd === -1 || dragInd === -1) {
+      return;
+    }
+    const tempNode = updatedItems[dragInd].node;
+    updatedItems[dragInd] = {
+      ...updatedItems[dragInd],
+      node: updatedItems[dropInd].node,
+    };
+    updatedItems[dropInd] = {
+      ...updatedItems[dropInd],
+      node: tempNode,
+    };
+
+    setItems(updatedItems);
+
+    if (typeof onSwap === 'function') {
+      onSwap(dragInd, dropInd);
+    }
+  };
+
+  const sizeClasses = parent
+    ? [
+        xs ? `grid-xs-${xs}` : '',
+        sm ? `grid-sm-${sm}` : '',
+        md ? `grid-md-${md}` : '',
+        lg ? `grid-lg-${lg}` : '',
+        xl ? `grid-xl-${xl}` : '',
+      ].join(' ')
+    : '';
+
+  if (!parent && width) {
+    style = { ...style, width: `${width}px` };
+  } else if (!parent && !width) {
+    style = { ...style, width: '100%' };
+  }
+  style = { ...style, height: '100%' };
+
+  if (container) {
+    return (
+      <div
+        className={`${className} grid-container ${sizeClasses}`}
+        style={
+          {
+            '--gap': `${spacing}rem`,
+            ...style,
+          } as React.CSSProperties
+        }
+      >
+        {items.map((item: any) =>
+          item.node.type?.displayName === 'Grid' ? (
+            draggable ? (
+              <div
+                key={item.node?.props?.uniqueKey}
+                draggable
+                onDragStart={(e) => handleDragStart(e, item.node?.props?.uniqueKey)}
+                onDragOver={(e) => handleDragOver(e)}
+                onDrop={(e) => handleDrop(e, item.node?.props?.uniqueKey)}
+                className={`grid-item grid-item-grabbing ${item.classes}`}
+              >
+                {item.node}
+              </div>
+            ) : (
+              <div key={item.node?.props?.uniqueKey} className={`grid-item ${item.classes}`}>
+                {item.node}
+              </div>
+            )
+          ) : (
+            item.node
+          )
+        )}
+      </div>
+    );
+  }
+
+  if (item) {
+    return (
+      <div
+        className={`${className} grid-item ${sizeClasses}`}
+        style={{ gap: `${spacing}rem`, ...style }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+Grid.displayName = 'Grid';
+
+export default Grid;