@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/DynamicInput/input/assets/SelectInput.module.css

@@ -1,95 +1,95 @@
-.wrapper {
-  position: relative;
-  width: 100%;
-  border: 1px solid #d3d6db;
-  border-radius: 10px;
-  padding: 12px 44px 12px 14px;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.wrapper:focus-within {
-  border-color: #2684ff;
-}
-
-.wrapperInvalid {
-  border-color: #dc3545;
-}
-
-.nativeSelect {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-.display {
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-  user-select: none;
-}
-
-.topLabel {
-  font-size: 0.8rem;
-  color: #8b9094;
-  font-weight: 500;
-  line-height: 1;
-  margin-bottom: 6px;
-}
-
-.valueLine {
-  font-size: 1rem;
-  line-height: 1.1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.valuePlaceholder {
-  color: #99a0a6;
-}
-
-.valueActive {
-  color: var(--color-text, #222);
-}
-
-.caret {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  pointer-events: none;
-  background-image: url("data:image/svg+xml;utf8,<svg fill='%23888' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px;
-}
-
-.error {
-  display: block;
-  margin-top: 8px;
-  font-size: 0.85rem;
-  color: #dc3545;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wrapper,
-  .wrapper:focus-within {
-    transition: none;
-  }
-}
-
-.optionStyle {
-  background-color: var(--color-card-background);
-  color: var(--color-text);
-}
+.wrapper {
+  position: relative;
+  width: 100%;
+  border: 1px solid #d3d6db;
+  border-radius: 10px;
+  padding: 12px 44px 12px 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.wrapper:focus-within {
+  border-color: #2684ff;
+}
+
+.wrapperInvalid {
+  border-color: #dc3545;
+}
+
+.nativeSelect {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.display {
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  user-select: none;
+}
+
+.topLabel {
+  font-size: 0.8rem;
+  color: #8b9094;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+
+.valueLine {
+  font-size: 1rem;
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.valuePlaceholder {
+  color: #99a0a6;
+}
+
+.valueActive {
+  color: var(--color-text, #222);
+}
+
+.caret {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='%23888' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px;
+}
+
+.error {
+  display: block;
+  margin-top: 8px;
+  font-size: 0.85rem;
+  color: #dc3545;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wrapper,
+  .wrapper:focus-within {
+    transition: none;
+  }
+}
+
+.optionStyle {
+  background-color: var(--color-card-background);
+  color: var(--color-text);
+}

package/src/components/DynamicTable/TableCell.tsx

@@ -1,30 +1,38 @@
-'use client';
-
-import type { RendererProps } from './tools/tableTypes';
-import { tableConfig } from './tools/tableConfig';
-import styles from './TableauDynamique.module.css';
-
-const TableCell = <T,>({ value, row, column }: RendererProps<T>) => {
-  const getRenderer = () => {
-    if (column.component) {
-      const CustomComponent = column.component;
-      return <CustomComponent value={value} row={row} column={column} />;
-    }
-
-    if (column.render) {
-      return column.render(value, row, column);
-    }
-
-    const rendererKey = column.type || 'text';
-    const Renderer = tableConfig.renderers[rendererKey] || tableConfig.renderers.text;
-    return <Renderer value={value} row={row} column={column} />;
-  };
-
-  return (
-    <td className={styles.tableCell} style={{ textAlign: column.align || 'left' }}>
-      {getRenderer()}
-    </td>
-  );
-};
-
-export default TableCell;
+'use client';
+
+import React from 'react';
+import type { TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface TableCellProps<T = unknown> {
+  value: any;
+  row: T;
+  column: TableColumn<T>;
+}
+
+const TableCell = <T,>({ value, row, column }: TableCellProps<T>) => {
+  const alignClass =
+    column.align === 'right'
+      ? styles.alignRight
+      : column.align === 'left'
+        ? styles.alignLeft
+        : styles.alignCenter;
+
+  const content =
+    typeof (column as any).render === 'function'
+      ? (column as any).render(value, row)
+      : value === null || value === undefined
+        ? ''
+        : String(value);
+
+  return (
+    <td
+      className={`${styles.tableCell} ${alignClass}`}
+      style={{ width: column.width ?? undefined }}
+    >
+      <div className={styles.cellContent}>{content}</div>
+    </td>
+  );
+};
+
+export default TableCell;

package/src/components/DynamicTable/TableHeader.tsx

@@ -1,34 +1,39 @@
-'use client';
-
-import type { TableColumn } from './tools/tableTypes';
-import styles from './TableauDynamique.module.css';
-
-interface TableHeaderProps<T = unknown> {
-  columns: TableColumn<T>[];
-}
-
-const TableHeader = <T,>({ columns }: TableHeaderProps<T>) => {
-  return (
-    <thead className={styles.tableHeader}>
-      <tr>
-        {columns.map((column) => (
-          <th
-            key={column.id}
-            className={styles.headerCell}
-            style={{
-              width: column.width,
-              textAlign: column.align,
-              padding: '1rem',
-            }}
-          >
-            <div className={styles.headerContent}>
-              <span>{column.label}</span>
-            </div>
-          </th>
-        ))}
-      </tr>
-    </thead>
-  );
-};
-
-export default TableHeader;
+'use client';
+
+import type { TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface TableHeaderProps<T = unknown> {
+  columns: TableColumn<T>[];
+}
+
+const TableHeader = <T,>({ columns }: TableHeaderProps<T>) => {
+  return (
+    <thead className={styles.tableHeader}>
+      <tr>
+        {columns.map((column) => {
+          const alignClass =
+            column.align === 'right'
+              ? styles.alignRight
+              : column.align === 'left'
+                ? styles.alignLeft
+                : styles.alignCenter;
+
+          return (
+            <th
+              key={column.id}
+              className={`${styles.headerCell} ${alignClass}`}
+              style={{ width: column.width ?? undefined }}
+            >
+              <div className={styles.headerContent}>
+                <span>{column.label}</span>
+              </div>
+            </th>
+          );
+        })}
+      </tr>
+    </thead>
+  );
+};
+
+export default TableHeader;