diff --git a/packages/components/src/components/Excel.tsx b/packages/components/src/components/Excel.tsx index f49c320d..0878fc85 100644 --- a/packages/components/src/components/Excel.tsx +++ b/packages/components/src/components/Excel.tsx @@ -4,12 +4,14 @@ import { read, utils } from 'xlsx'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; +import { Data } from '../types/properties'; export type ExcelProps = { - url: string; + data: Pick; }; -export function Excel({ url }: ExcelProps) { +export function Excel({ data }: ExcelProps) { + const url = data.url; const [isLoading, setIsLoading] = useState(false); const [activeSheetName, setActiveSheetName] = useState(); const [workbook, setWorkbook] = useState(); diff --git a/packages/components/stories/Excel.stories.ts b/packages/components/stories/Excel.stories.ts index c242b502..c5c6c809 100644 --- a/packages/components/stories/Excel.stories.ts +++ b/packages/components/stories/Excel.stories.ts @@ -8,9 +8,9 @@ const meta: Meta = { component: Excel, tags: ['autodocs'], argTypes: { - url: { + data: { description: - 'Url of the file to be displayed e.g.: "https://url.to/data.csv"', + 'Object with a `url` property pointing to the Excel file to be displayed, e.g.: `{ url: "https://url.to/data.csv" }`', }, }, }; @@ -22,13 +22,17 @@ type Story = StoryObj; export const SingleSheet: Story = { name: 'Excel file with just one sheet', args: { - url: 'https://sheetjs.com/pres.xlsx', + data: { + url: 'https://sheetjs.com/pres.xlsx', + }, }, }; export const MultipleSheet: Story = { name: 'Excel file with multiple sheets', args: { - url: 'https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx', + data: { + url: 'https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx', + }, }, };