@sito/dashboard 0.0.46 → 0.0.48

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Sito
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Sito
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,270 +1,270 @@
-# @sito/dashboard
-
-A React library for building customizable and responsive dashboards with ease.
-
-## Features
-
-- **Table Component**: A powerful table component with support for sorting, pagination, and customizable columns.
-- **Translation Support**: Built-in translation support using a `TranslationProvider`.
-- **Customizable**: Easily style and configure components to fit your needs.
-- **Lightweight**: Optimized for performance and usability.
-
-## Installation
-
-To install the library, use npm or yarn:
-
-```bash
-# Using npm
-npm install @sito/dashboard
-
-# Using yarn
-yarn add @sito/dashboard
-```
-
-## Table
-
-Here’s how you can use the Table component in your project:
-
-```bash
-import React from "react";
-import { Table } from "sito-dashboard";
-
-const App = () => {
-  const rows = [
-    { id: 1, name: "John Doe", age: 30 },
-    { id: 2, name: "Jane Smith", age: 25 },
-  ];
-
-  const columns = [
-    { key: "name", label: "Name" },
-    { key: "age", label: "Age" },
-  ];
-
-  return (
-    <Table
-      title="User Table"
-      data={rows}
-      columns={columns}
-    />
-  );
-};
-
-export default App;
-```
-
-## Translation for its components
-
-Wrap your application with the TranslationProvider to enable translations:
-
-```bash
-import React from "react";
-import { TranslationProvider } from "@sito/dashboard";
-
-const translations = {
-  en: { hello: "Hello" },
-  es: { hello: "Hola" },
-};
-
-const App = () => {
-  const t = (key) => translations["en"][key]; // Example translation function
-
-  return (
-    <TranslationProvider t={t}>
-      <h1>{t("hello")}</h1>
-    </TranslationProvider>
-  );
-};
-
-export default App;
-```
-
-## Components
-
-### Table
-
-The Table component is a flexible and feature-rich table for displaying data.
-
-#### Props
-| 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
-
-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
-
-To run the project locally:
-
-1. Clone the repository:
-
-```bash
-git clone https://github.com/your-repo/sito-dashboard.git
-
-cd sito-dashboard
-```
-
-2. Install dependencies:
-
-```bash
-npm install
-```
-
-3. Start the development server
-
-```bash
-npm start
-```
-
-Building the Library
-
-To build the library for production
-
-```bash
-npm run build
-```
-
-## Contributing
-
-Contributions are welcome! Please follow these steps:
-1. Fork the repository.
-2. Create a new branch for your feature or bugfix.
-3. Submit a pull request with a detailed description of your changes.
-
-## License
-
+# @sito/dashboard
+
+A React library for building customizable and responsive dashboards with ease.
+
+## Features
+
+- **Table Component**: A powerful table component with support for sorting, pagination, and customizable columns.
+- **Translation Support**: Built-in translation support using a `TranslationProvider`.
+- **Customizable**: Easily style and configure components to fit your needs.
+- **Lightweight**: Optimized for performance and usability.
+
+## Installation
+
+To install the library, use npm or yarn:
+
+```bash
+# Using npm
+npm install @sito/dashboard
+
+# Using yarn
+yarn add @sito/dashboard
+```
+
+## Table
+
+Here’s how you can use the Table component in your project:
+
+```bash
+import React from "react";
+import { Table } from "sito-dashboard";
+
+const App = () => {
+  const rows = [
+    { id: 1, name: "John Doe", age: 30 },
+    { id: 2, name: "Jane Smith", age: 25 },
+  ];
+
+  const columns = [
+    { key: "name", label: "Name" },
+    { key: "age", label: "Age" },
+  ];
+
+  return (
+    <Table
+      title="User Table"
+      data={rows}
+      columns={columns}
+    />
+  );
+};
+
+export default App;
+```
+
+## Translation for its components
+
+Wrap your application with the TranslationProvider to enable translations:
+
+```bash
+import React from "react";
+import { TranslationProvider } from "@sito/dashboard";
+
+const translations = {
+  en: { hello: "Hello" },
+  es: { hello: "Hola" },
+};
+
+const App = () => {
+  const t = (key) => translations["en"][key]; // Example translation function
+
+  return (
+    <TranslationProvider t={t}>
+      <h1>{t("hello")}</h1>
+    </TranslationProvider>
+  );
+};
+
+export default App;
+```
+
+## Components
+
+### Table
+
+The Table component is a flexible and feature-rich table for displaying data.
+
+#### Props
+| 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
+
+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
+
+To run the project locally:
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/your-repo/sito-dashboard.git
+
+cd sito-dashboard
+```
+
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Start the development server
+
+```bash
+npm start
+```
+
+Building the Library
+
+To build the library for production
+
+```bash
+npm run build
+```
+
+## Contributing
+
+Contributions are welcome! Please follow these steps:
+1. Fork the repository.
+2. Create a new branch for your feature or bugfix.
+3. Submit a pull request with a detailed description of your changes.
+
+## License
+
 This project is licensed under the MIT License.

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

@@ -0,0 +1,2 @@
+import { FileInputPropsType } from './types';
+export declare const FileInput: import('react').ForwardRefExoticComponent<Omit<FileInputPropsType, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,8 @@
+import { BaseInputPropsType } from 'main';
+import { HTMLProps, ReactNode } from 'react';
+export interface FileInputPropsType extends Omit<HTMLProps<HTMLInputElement>, "value" | "label">, BaseInputPropsType {
+    label: string;
+    iconClassName?: string;
+    multiple?: boolean;
+    children?: ReactNode;
+}

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

@@ -0,0 +1 @@
+export declare function truncateFileName(name: string, maxLength?: number): string;

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

@@ -2,5 +2,6 @@ export * from './SelectInput';
 export * from './TextInput';
 export * from './CheckInput';
 export * from './AutocompleteInput';
+export * from './FileInput';
 export * from './utils';
 export * from './types';

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

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

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

@@ -4,4 +4,5 @@ export * from './ChevronRight';
 export * from './ChevronLeft';
 export * from './Filters';
 export * from './Close';
+export * from './File';
 export * from './types';

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

@@ -1 +1,3 @@
 export * from './ActiveFilters';
+export * from './ArrayChip';
+export * from './RangeChip';

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

@@ -1,7 +1,7 @@
 export * from './Columns';
 export * from './Empty';
 export * from './Footer';
-export * from './Filters/FilterDropdown';
+export * from './Filters';
 export * from './TableHeader';
 export * from './Rows';
 export * from './types';

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

@@ -3,7 +3,7 @@ import { Action } from '../types';
 import { BaseDto, FilterTypes, SortOrder } from '../../../lib';
 import { Option } from '../../Form/';
 export type ColumnType<TRow extends BaseDto> = {
-    key: keyof TRow;
+    key: string;
     label?: string;
     /** if the column can be sorted */
     sortable?: boolean;