@sito/dashboard 0.0.28 → 0.0.30

package/README.md

@@ -35,12 +35,6 @@ const App = () => {
     { id: 2, name: "Jane Smith", age: 25 },
   ];
 
-  const parseRows = (row) => ({
-    id: row.id,
-    name: row.name,
-    age: row.age,
-  });
-
   const columns = [
     { key: "name", label: "Name" },
     { key: "age", label: "Age" },
@@ -49,8 +43,7 @@ const App = () => {
   return (
     <Table
       title="User Table"
-      rows={rows}
-      parseRows={parseRows}
+      data={rows}
       columns={columns}
     />
   );
@@ -92,13 +85,19 @@ export default App;
 The Table component is a flexible and feature-rich table for displaying data.
 
 #### Props
-- `title` (string): The title of the table.
-- `rows` (array): The data to display in the table.
-- `parseRows` (function): A function to parse rows for rendering.
-- `columns` (array): Column definitions, including keys and labels.
-- `isLoading` (boolean): Whether the table is in a loading state.
-- `actions` (function): A function to render actions for each row.
-- `className` (string): Custom class for the table container.
+| Propiedad             | Tipo         | Valor por defecto      | Descripción                                                         |
+|-----------------------|--------------|-------------------------|---------------------------------------------------------------------|
+| `title`              | `string`     | `""`                    | El título de la tabla.                                              |
+| `data`               | `array`      | —                       | Los datos a mostrar en la tabla.                                   |
+| `columns`            | `array`      | `[]`                    | Definiciones de columnas, incluyendo claves (`key`) y etiquetas.   |
+| `isLoading`          | `boolean`    | `false`                 | Indica si la tabla está en estado de carga.                        |
+| `actions`            | `Action[]`   | —                       | Función para renderizar acciones por fila.                         |
+| `className`          | `string`     | `""`                    | Clase personalizada para el contenedor de la tabla.                |
+| `contentClassName`   | `string`     | `""`                    | Clase personalizada para el contenido de la tabla.                 |
+| `softDeleteProperty` | `string`     | `"deleted"`             | Propiedad usada para lógica de borrado suave.                      |
+| `toolbar`            | `ReactNode`  | `<></>`                 | Componente personalizado para la barra de herramientas.            |
+| `onSort`             | `function`   | —                       | Callback que se llama cuando se cambia el orden de la tabla.       |
+
 
 ### TranslationProvider
 
@@ -107,6 +106,124 @@ Provides translation support for your application.
 #### Props
 - `t` (function): A translation function that takes a key and returns the translated string.
 
+### Examples
+
+#### Columns definition
+
+```
+  key: string;
+  label: string;
+  sortable?: boolean;
+  sortOptions: {
+    icons: {
+      className: string;
+      asc: string;
+      desc: string;
+    };
+  };
+  className?: string;
+  display?: "visible" | "none";
+  pos?: number;
+  renderBody?: (value: any, row: any) => ReactNode;
+  renderHead?: () => void;
+  filterOptions?: ColumnFilterOptions;
+```
+
+ColumnFilterOptions
+
+```
+{
+  type: FilterTypes;
+  defaultValue: any;
+  label?: string;
+}
+```
+
+FilterTypes enum
+
+```
+text,
+number,
+select,
+autocomplete,
+date,
+check,
+```
+
+```
+import { Table } from "@sito/dashboard";
+
+const columns = [
+  {
+    key: "tagIds",
+    label: t("_entities:news.tags.label"),
+    filterOptions: {
+      type: FilterTypes.autocomplete,
+      options: tagsList,
+      defaultValue: [],
+    },
+    sortable: false,
+    renderBody: (_, news) =>
+      (
+        <div className="flex flex-wrap gap-3">
+          {news.tags?.map(({ name, id }) => (
+            <Chip key={id} label={name} spanClassName="text-xs" />
+          ))}
+        </div>
+      ) ?? " - ",
+  },
+]
+
+<Table data={...} columns={columns} />
+```
+
+#### Actions definition
+
+```
+{
+  id: string;
+  onClick: (entity: object) => void;
+  icon: any;
+  tooltip: string;
+  hidden: (entity: object) => boolean;
+}
+```
+
+```
+import { Table } from "@sito/dashboard";
+
+const addAction = {
+  id: "add",
+  hidden: false,
+  onClick: async () => {
+    // do some stuff here
+  },
+  icon: (
+    <FontAwesomeIcon
+      icon={isLoading ? faSpinner : faAdd}
+      className={`text-success ${isLoading ? "rotate" : ""}`}
+    />
+  ),
+  tooltip: t("_accessibility:buttons.add"),
+}
+
+<Table data={...} columns={...} actions={[addAction]} />
+```
+
+#### Your custom toolbar
+
+```
+import { Table } from "@sito/dashboard";
+
+const Toolbar = () => {
+  return <div>
+    <h1>My custom toolbar</h1>
+  </div>
+}
+
+<Table data={...} columns={...} toolbar={<Toolbar />} />
+```
+
 ## Development
 
 Running Locally

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,7 @@
+import { ChipPropsType } from './types';
+/**
+ * Chip component
+ * @param {object} props - component props
+ * @returns Chip component
+ */
+export declare function Chip(props: ChipPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chip';
+export * from './types';

package/dist/components/Chip/types.d.ts

@@ -0,0 +1,12 @@
+export declare enum ChipVariant {
+    empty = "empty",
+    outlined = "outlined",
+    default = "default"
+}
+export type ChipPropsType = {
+    variant?: ChipVariant;
+    label?: string;
+    onDelete?: () => void;
+    className?: string;
+    spanClassName?: string;
+};

package/dist/components/Form/AutocompleteInput/AutocompleteInput.d.ts

@@ -0,0 +1,7 @@
+import { AutocompleteInputPropsType } from './types';
+/**
+ *
+ * @param {object} props
+ * @returns
+ */
+export declare const AutocompleteInput: import('react').ForwardRefExoticComponent<Omit<AutocompleteInputPropsType, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Form/AutocompleteInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteInput';
+export * from './types';

package/dist/components/Form/AutocompleteInput/types.d.ts

@@ -0,0 +1,6 @@
+import { TextInputPropsType, Option } from '../..';
+export interface AutocompleteInputPropsType extends TextInputPropsType {
+    multiple?: boolean;
+    inputContainerClassName?: string;
+    options: Option[];
+}

package/dist/components/Form/CheckInput/CheckInput.d.ts

@@ -0,0 +1,7 @@
+import { CheckInputPropsType } from './types';
+/**
+ * CheckInput
+ * @param {object} props
+ * @returns CheckInput component
+ */
+export declare const CheckInput: import('react').ForwardRefExoticComponent<Omit<CheckInputPropsType, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Form/CheckInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CheckInput';
+export * from './types';

package/dist/components/Form/CheckInput/types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLProps } from 'react';
+import { BaseInputPropsType } from '../types';
+export interface CheckInputPropsType extends HTMLProps<HTMLInputElement>, Omit<BaseInputPropsType, "value" | "onChange"> {
+}

package/dist/components/Form/SelectInput/SelectInput.d.ts

@@ -4,5 +4,4 @@ import { SelectInputPropsType } from './types';
  * @param {object} props
  * @returns
  */
-declare const SelectInput: import('react').ForwardRefExoticComponent<Omit<SelectInputPropsType, "ref"> & import('react').RefAttributes<HTMLSelectElement>>;
-export default SelectInput;
+export declare const SelectInput: import('react').ForwardRefExoticComponent<Omit<SelectInputPropsType, "ref"> & import('react').RefAttributes<HTMLSelectElement>>;

package/dist/components/Form/SelectInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectInput';
+export * from './types';

package/dist/components/Form/SelectInput/types.d.ts

@@ -1,21 +1,9 @@
 import { HTMLProps } from 'react';
-import { State } from '../utils';
+import { BaseInputPropsType } from '../types';
 export type Option = {
     id: number | string;
     value: number | string;
 };
-export interface SelectInputPropsType extends HTMLProps<HTMLSelectElement> {
-    state?: State;
-    value: any;
-    onChange: (e: any) => void;
+export interface SelectInputPropsType extends Omit<HTMLProps<HTMLSelectElement>, "value" | "onChange">, BaseInputPropsType {
     options: Option[];
-    name?: string;
-    id?: string;
-    label?: string;
-    containerClassName?: string;
-    inputClassName?: string;
-    labelClassName?: string;
-    helperText?: string;
-    helperTextClassName?: string;
-    placeholder?: string;
 }

package/dist/components/Form/TextInput/TextInput.d.ts

@@ -0,0 +1,7 @@
+import { TextInputPropsType } from './types';
+/**
+ * TextInput
+ * @param {object} props
+ * @returns TextInput Component
+ */
+export declare const TextInput: import('react').ForwardRefExoticComponent<Omit<TextInputPropsType, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Form/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextInput';
+export * from './types';

package/dist/components/Form/TextInput/types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLProps, ReactNode } from 'react';
+import { BaseInputPropsType } from '../types';
+export interface TextInputPropsType extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange">, BaseInputPropsType {
+    children?: ReactNode;
+}

package/dist/components/Form/index.d.ts

@@ -1,4 +1,6 @@
-import { default as SelectInput } from './SelectInput/SelectInput';
-import { Option, SelectInputPropsType } from './SelectInput/types';
-export type { Option, SelectInputPropsType };
-export { SelectInput };
+export * from './SelectInput';
+export * from './TextInput';
+export * from './CheckInput';
+export * from './AutocompleteInput';
+export * from './utils';
+export * from './types';

package/dist/components/Form/types.d.ts

@@ -0,0 +1,15 @@
+import { State } from './utils';
+export type BaseInputPropsType = {
+    state?: State;
+    value: any;
+    onChange: (e: any) => void;
+    name?: string;
+    id?: string;
+    label?: string;
+    containerClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    placeholder?: string;
+};

package/dist/components/Form/utils.d.ts

@@ -8,16 +8,16 @@ export declare enum State {
  * @param {string} state - input state
  * @returns input class name by
  */
-export declare const inputStateClassName: (state: State) => "border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500" | "border-green-500 text-green-900 placeholder-green-700 focus:ring-green-500 focus:border-green-500" | "text-gray-900 border-gray-300 focus:border-blue-600";
+export declare const inputStateClassName: (state: State) => "input-error" | "input-good" | "input-normal";
 /**
  * Label State Class Name
  * @param {string} state - input state
  * @returns input class name by
  */
-export declare const labelStateClassName: (state: State) => "peer-focus:text-red-700 text-red-700" | "peer-focus:text-green-700 text-green-700" | "peer-focus:text-blue-600 text-gray-500";
+export declare const labelStateClassName: (state: State) => "input-label-error" | "input-label-good" | "input-label-normal";
 /**
  * Helper Text State Class Name
  * @param {string} state - input state
  * @returns input class name by
  */
-export declare const helperTextStateClassName: (state: State) => "text-red-600" | "text-green-600" | "text-gray-500";
+export declare const helperTextStateClassName: (state: State) => "input-helper-text-error" | "input-helper-text-good" | "input-helper-text-normal";

package/dist/components/Loading/Loading.d.ts

@@ -1,13 +1,7 @@
-import { HTMLProps } from 'react';
-interface LoadingPropsType extends HTMLProps<HTMLDivElement> {
-    color?: string;
-    loaderClass?: string;
-    strokeWidth?: string;
-}
+import { LoadingPropsType } from './types';
 /**
  * Loading
  * @param {object} props - Props
  * @returns Loading component
  */
 export declare function Loading(props: LoadingPropsType): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Loading/index.d.ts

@@ -1 +1 @@
-export { Loading } from './Loading';
+export * from './Loading';

package/dist/components/Loading/types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLProps } from 'react';
+export interface LoadingPropsType extends HTMLProps<HTMLDivElement> {
+    color?: string;
+    loaderClass?: string;
+    strokeWidth?: string;
+}

package/dist/components/SvgIcons/ChevronDown.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from './types';
+export declare function ChevronDown(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SvgIcons/ChevronLeft.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from './types';
+export declare function ChevronLeft(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SvgIcons/ChevronRight.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from './types';
+export declare function ChevronRight(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SvgIcons/ChevronUp.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from './types';
+export declare function ChevronUp(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SvgIcons/Close.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from './types';
+export declare function Close(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SvgIcons/Filters.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from './types';
+export declare const Filters: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SvgIcons/index.d.ts

@@ -0,0 +1,7 @@
+export * from './ChevronDown';
+export * from './ChevronUp';
+export * from './ChevronRight';
+export * from './ChevronLeft';
+export * from './Filters';
+export * from './Close';
+export * from './types';

package/dist/components/{Chevron → SvgIcons}/types.d.ts

@@ -1,3 +1,3 @@
 export type IconProps = {
-    className: string;
+    className?: string;
 };

package/dist/components/Table/components/Columns.d.ts

@@ -1,7 +1,7 @@
-import { ColumnPropTypes } from '../types';
+import { ColumnPropsType } from './types';
 /**
  * Columns component
  * @param {object} props properties for the columns
  * @returns Row of columns
  */
-export declare function Columns(props: ColumnPropTypes): import("react/jsx-runtime").JSX.Element;
+export declare function Columns(props: ColumnPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/FilterPopup/FilterPopup.d.ts

@@ -0,0 +1,2 @@
+import { FilterPopupPropsType } from './types';
+export declare const FilterPopup: (props: FilterPopupPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/FilterPopup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FilterPopup';
+export * from './types';
+export * from './utils';

package/dist/components/Table/components/FilterPopup/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { FilterType } from '../../../../lib';
+export type FilterPopupPropsType = {
+    align?: "right" | "left";
+    icon?: ReactNode | string;
+    filters?: FilterType[];
+};

package/dist/components/Table/components/FilterPopup/utils.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { WidgetFilterProps } from '../../../../lib';
+export declare const renderFilterComponent: (filter: WidgetFilterProps) => ReactNode;

package/dist/components/Table/components/Footer/CountOfTotal.d.ts

@@ -0,0 +1 @@
+export declare const CountOfTotal: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Footer/Footer.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @returns Footer component
+ */
+export declare function Footer(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Footer/JumpToPage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Page size component
+ * @returns Page size component
+ */
+export declare function JumpToPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Footer/Navigation.d.ts

@@ -0,0 +1 @@
+export declare const Navigation: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Footer/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Footer';
+export * from './Navigation';
+export * from './PageSize';
+export * from './CountOfTotal';

package/dist/components/Table/components/Rows.d.ts

@@ -0,0 +1,3 @@
+import { RowsPropsType } from './types';
+export declare const Rows: (props: RowsPropsType) => import("react/jsx-runtime").JSX.Element[];
+export default Rows;

package/dist/components/Table/components/Widgets/AutocompleteWidget.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteWidgetPropsType } from './types';
+export declare function AutocompleteWidget(props: AutocompleteWidgetPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Widgets/CheckWidget.d.ts

@@ -0,0 +1,2 @@
+import { CheckWidgetPropsType } from './types';
+export declare const CheckWidget: (props: CheckWidgetPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Widgets/DateWidget.d.ts

@@ -0,0 +1,2 @@
+import { DateWidgetPropsType } from './types';
+export declare const DateWidget: (props: DateWidgetPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Widgets/NumberWidget.d.ts

@@ -0,0 +1,2 @@
+import { NumberWidgetPropsType } from './types';
+export declare const NumberWidget: (props: NumberWidgetPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Widgets/SelectWidget.d.ts

@@ -0,0 +1,2 @@
+import { SelectWidgetPropsType } from './types';
+export declare function SelectWidget(props: SelectWidgetPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Widgets/TextWidget.d.ts

@@ -0,0 +1,2 @@
+import { TextWidgetPropsType } from './types';
+export declare const TextWidget: (props: TextWidgetPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Widgets/index.d.ts

@@ -0,0 +1,7 @@
+export * from './SelectWidget';
+export * from './TextWidget';
+export * from './NumberWidget';
+export * from './CheckWidget';
+export * from './AutocompleteWidget';
+export * from './DateWidget';
+export * from './types';

package/dist/components/Table/components/Widgets/types.d.ts

@@ -0,0 +1,14 @@
+import { AutocompleteFilterType, CheckFilterType, DateFilterType, NumberFilterType, SelectFilterType, TextFilterType } from '../../../../lib';
+export interface SelectWidgetPropsType extends SelectFilterType {
+}
+export interface DateWidgetPropsType extends DateFilterType {
+}
+export interface AutocompleteWidgetPropsType extends AutocompleteFilterType {
+    multiple?: boolean;
+}
+export interface CheckWidgetPropsType extends CheckFilterType {
+}
+export interface TextWidgetPropsType extends TextFilterType {
+}
+export interface NumberWidgetPropsType extends NumberFilterType {
+}

package/dist/components/Table/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Columns';
+export * from './Empty';
+export * from './Footer';
+export * from './FilterPopup';
+export * from './Rows';
+export * from './types';

package/dist/components/Table/components/types.d.ts

@@ -0,0 +1,37 @@
+import { FilterTypes, SortOrder } from '../../../lib';
+import { Action } from '../types';
+export type ColumnType = {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    sortOptions: {
+        icons: {
+            className: string;
+            asc: string;
+            desc: string;
+        };
+    };
+    className?: string;
+    display?: "visible" | "none";
+    pos?: number;
+    renderBody?: (value: any, row: any) => React.ReactNode;
+    renderHead?: () => void;
+    filterOptions?: ColumnFilterOptions;
+};
+export type ColumnPropsType = {
+    entity: string;
+    columns: ColumnType[];
+    hasAction: boolean;
+    onSortCallback: (prop: string, sortOrder: SortOrder) => void;
+};
+export type ColumnFilterOptions = {
+    type: FilterTypes;
+    defaultValue: any;
+    label?: string;
+};
+export type RowsPropsType = {
+    data: any[];
+    columns: ColumnType[];
+    softDeleteProperty: string;
+    actions: ((row: any) => Action[]) | undefined;
+};

package/dist/components/Table/index.d.ts

@@ -1,4 +1,3 @@
-export { useTableOptions, TableOptionsProvider, } from './hooks/TableOptionsProvider';
-export { Table } from './Table';
-export type { Action as TableAction } from './types';
-export type { TableOptionsContextType, TableOptionsProviderPropsType, } from './hooks/types';
+export * from './Table';
+export * from './components';
+export * from './types';

package/dist/components/Table/types.d.ts

@@ -1,3 +1,6 @@
+import { SortOrder } from '../../lib';
+import { ColumnType } from './components';
+import { ReactNode } from 'react';
 export type Action = {
     id: string;
     onClick: (entity: object) => void;
@@ -5,40 +8,17 @@ export type Action = {
     tooltip: string;
     hidden: (entity: object) => boolean;
 };
-export type ColumnsOptionsType = {
-    noSortableColumns: {
-        [key: string]: boolean;
-    };
-    columnClassNames: {
-        [key: string]: string;
-    };
-    icons: {
-        className: string;
-        asc: string;
-        desc: string;
-    };
-};
-export type ColumnType = {
-    key: string;
-    label: string;
-};
-export type ColumnPropTypes = {
-    entity: string;
-    columns: ColumnType[];
-    columnsOptions?: ColumnsOptionsType;
-    hasAction: boolean;
-};
 export type TablePropsType = {
     entity: string;
     title?: string;
     subtitle?: string;
-    rows: object[];
-    parseRows?: any;
+    data: object[];
     isLoading?: boolean;
     actions?: (row: object) => Action[];
     columns?: ColumnType[];
-    columnsOptions?: ColumnsOptionsType;
     contentClassName?: string;
     className?: string;
     softDeleteProperty?: string;
+    toolbar?: ReactNode;
+    onSort: (prop: string, sortOrder: SortOrder) => void;
 };