@tsiky/components-r19 1.3.0 → 1.3.2

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

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

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

@@ -1,117 +0,0 @@
-'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/Grid/Grid.stories.tsx

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

@@ -1,219 +0,0 @@
-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());
-    e.dataTransfer.setData('parentKey', uniqueKey.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 dragParent = Number(e.dataTransfer.getData('parentKey'));
-    if (container && dragParent !== uniqueKey) {
-      return;
-    }
-    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;