From 089b83482f782719950abca101c7dcc9b9c907c8 Mon Sep 17 00:00:00 2001 From: andresgutgon Date: Fri, 6 Sep 2024 17:51:04 +0200 Subject: [PATCH] Dataset preview data --- apps/web/next.config.mjs | 9 ++ apps/web/src/actions/datasets/create.ts | 75 ++++++++++++--- apps/web/src/actions/datasets/preview.ts | 21 +++++ .../_components/DatasetsTable/index.tsx | 20 ++++ .../_components/PreviewDatasetModal/index.tsx | 93 +++++++++++++++++++ .../_components/DelimiterSelector/index.tsx | 77 +++++++++++++++ .../src/app/(private)/datasets/new/page.tsx | 20 +++- apps/web/src/stores/datasetPreviews.ts | 42 +++++++++ apps/web/src/stores/datasets.ts | 26 +++--- packages/core/src/lib/readCsv.ts | 46 ++++++--- .../src/repositories/datasetsRepository.ts | 5 + packages/core/src/services/datasets/create.ts | 4 +- .../core/src/services/datasets/preview.ts | 38 ++++++++ .../web-ui/src/ds/atoms/FormField/index.tsx | 2 +- .../src/ds/atoms/FormFieldGroup/index.tsx | 44 +++++++++ packages/web-ui/src/ds/atoms/Icons/index.tsx | 5 +- .../src/ds/atoms/Select/Primitives/index.tsx | 2 +- packages/web-ui/src/ds/atoms/Table/index.tsx | 14 ++- packages/web-ui/src/ds/atoms/index.ts | 1 + .../src/ds/molecules/ErrorComponent/index.tsx | 2 +- .../src/ds/molecules/TableSkeleton/index.tsx | 51 ++++++++++ packages/web-ui/src/ds/molecules/index.ts | 1 + 22 files changed, 551 insertions(+), 47 deletions(-) create mode 100644 apps/web/src/actions/datasets/preview.ts create mode 100644 apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx create mode 100644 apps/web/src/app/(private)/datasets/new/_components/DelimiterSelector/index.tsx create mode 100644 apps/web/src/stores/datasetPreviews.ts create mode 100644 packages/core/src/services/datasets/preview.ts create mode 100644 packages/web-ui/src/ds/atoms/FormFieldGroup/index.tsx create mode 100644 packages/web-ui/src/ds/molecules/TableSkeleton/index.tsx diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index a55736764..d1452567f 100644 --- a/apps/web/next.config.mjs +++ b/apps/web/next.config.mjs @@ -17,6 +17,15 @@ const nextConfig = { // on the name of job handler functions for things to work properly. As you // can imagine, minification would break this. So we have to disable it. serverMinification: false, + // TODO: Review this decision. It would be more performant to use + // direct uploads. To implement it we need to generate a signed URL + // that's send directly to S3 and the clint upload the file to Amazon directly + // What I stopped me from implementing is that dev experience would (maybe) be + // different because in local environment we would need to upload the file to + // the nextjs server as we do now. + serverActions: { + bodySizeLimit: '15mb', + }, }, } diff --git a/apps/web/src/actions/datasets/create.ts b/apps/web/src/actions/datasets/create.ts index f52aebe49..d3af4ed55 100644 --- a/apps/web/src/actions/datasets/create.ts +++ b/apps/web/src/actions/datasets/create.ts @@ -1,32 +1,80 @@ 'use server' +import { DatasetsRepository } from '@latitude-data/core/repositories' import { createDataset } from '@latitude-data/core/services/datasets/create' import disk from '$/lib/disk' import { z } from 'zod' import { authProcedure } from '../procedures' +const DELIMITERS_KEYS = [ + 'comma', + 'semicolon', + 'tab', + 'space', + 'custom', +] as const +const DELIMITER_VALUES = { + comma: ',', + semicolon: ';', + tab: '\t', + space: ' ', +} + const MAX_SIZE = 3 const MAX_UPLOAD_SIZE_IN_MB = 3 * 1024 * 1024 - export const createDatasetAction = authProcedure .createServerAction() .input( - z.object({ - name: z.string().min(1, { message: 'Name is required' }), - dataset_file: z - .instanceof(File) - .refine((file) => { - return !file || file.size <= MAX_UPLOAD_SIZE_IN_MB - }, `Your dataset must be less than ${MAX_SIZE}MB in size`) + async ({ ctx }) => { + return z + .object({ + name: z + .string() + .min(1, { message: 'Name is required' }) + .refine( + async (name) => { + const scope = new DatasetsRepository(ctx.workspace.id) + const existing = await scope.findByName(name) + return !existing + }, + { + message: + 'This name was already used, plese use something different', + }, + ), + csvDelimiter: z.enum(DELIMITERS_KEYS, { + message: 'Choose a valid delimiter option', + }), + csvCustomDelimiter: z.string(), + dataset_file: z + .instanceof(File) + .refine((file) => { + return !file || file.size <= MAX_UPLOAD_SIZE_IN_MB + }, `Your dataset must be less than ${MAX_SIZE}MB in size`) + .refine( + (file) => file.type === 'text/csv', + 'Your dataset must be a CSV file', + ), + }) .refine( - (file) => file.type === 'text/csv', - 'Your dataset must be a CSV file', - ), - }), + (schema) => { + if (schema.csvDelimiter !== 'custom') return true + return schema.csvCustomDelimiter.length > 0 + }, + { + message: 'Custom delimiter is required', + path: ['csvCustomDelimiter'], + }, + ) + }, { type: 'formData' }, ) .handler(async ({ input, ctx }) => { + const csvDelimiter = + input.csvDelimiter === 'custom' + ? input.csvCustomDelimiter + : DELIMITER_VALUES[input.csvDelimiter] return createDataset({ workspace: ctx.workspace, author: ctx.user, @@ -34,8 +82,7 @@ export const createDatasetAction = authProcedure data: { name: input.name, file: input.dataset_file, - // TODO: Make UI radio button to pick delimiter - csvDelimiter: ';', + csvDelimiter, }, }).then((r) => r.unwrap()) }) diff --git a/apps/web/src/actions/datasets/preview.ts b/apps/web/src/actions/datasets/preview.ts new file mode 100644 index 000000000..f0cba9e97 --- /dev/null +++ b/apps/web/src/actions/datasets/preview.ts @@ -0,0 +1,21 @@ +'use server' + +import { DatasetsRepository } from '@latitude-data/core/repositories' +import { previewDataset } from '@latitude-data/core/services/datasets/preview' +import disk from '$/lib/disk' +import { z } from 'zod' + +import { authProcedure } from '../procedures' + +export const previewDatasetAction = authProcedure + .createServerAction() + .input( + z.object({ + id: z.number(), + }), + ) + .handler(async ({ ctx, input }) => { + const repo = new DatasetsRepository(ctx.workspace.id) + const dataset = await repo.find(input.id).then((r) => r.unwrap()) + return await previewDataset({ dataset, disk }).then((r) => r.unwrap()) + }) diff --git a/apps/web/src/app/(private)/datasets/_components/DatasetsTable/index.tsx b/apps/web/src/app/(private)/datasets/_components/DatasetsTable/index.tsx index 67f5d4b7c..90b732455 100644 --- a/apps/web/src/app/(private)/datasets/_components/DatasetsTable/index.tsx +++ b/apps/web/src/app/(private)/datasets/_components/DatasetsTable/index.tsx @@ -13,8 +13,10 @@ import { TableHeader, TableRow, Text, + Tooltip, } from '@latitude-data/web-ui' import DeleteDatasetModal from '$/app/(private)/datasets/_components/DeleteDatasetModal' +import PreviewDatasetModal from '$/app/(private)/datasets/_components/PreviewDatasetModal' import useDatasets from '$/stores/datasets' export function DatasetsTable({ @@ -23,12 +25,14 @@ export function DatasetsTable({ datasets: Dataset[] }) { const [deletable, setDeletable] = useState(null) + const [preview, setPreview] = useState(null) const { data: datasets } = useDatasets(undefined, { fallbackData: serverDatasets, }) return ( <> + @@ -38,6 +42,7 @@ export function DatasetsTable({ Author Created at + @@ -60,6 +65,21 @@ export function DatasetsTable({ {dateFormatter.formatDate(dataset.createdAt)} + + setPreview(dataset)} + variant='nope' + iconProps={{ name: 'eye', color: 'foregroundMuted' }} + /> + } + > + + Show file preview (first 100 rows) + + + + + } + > + {isLoading ? ( + + ) : ( +
+ + + + # + + {data.headers.map((header, i) => ( + + {header} + + ))} + + + + {rows.map((row, rowIndex) => { + return ( + + {row.map((cell, cellIndex) => ( + {cell} + ))} + + ) + })} + +
+ )} + + ) +} + +export default function PreviewDatasetModal({ + dataset, + setPreview, +}: { + dataset: Dataset | null + setPreview: ReactStateDispatch +}) { + if (!dataset) return null + + return +} diff --git a/apps/web/src/app/(private)/datasets/new/_components/DelimiterSelector/index.tsx b/apps/web/src/app/(private)/datasets/new/_components/DelimiterSelector/index.tsx new file mode 100644 index 000000000..59dac5e29 --- /dev/null +++ b/apps/web/src/app/(private)/datasets/new/_components/DelimiterSelector/index.tsx @@ -0,0 +1,77 @@ +'use client' + +import { useCallback, useRef, useState } from 'react' + +import { cn, FormFieldGroup, Input, Select } from '@latitude-data/web-ui' + +export enum DelimiterEnum { + Comma = 'comma', + Semicolon = 'semicolon', + Tab = 'tab', + Space = 'space', + Custom = 'custom', +} + +const DELIMITERS = [ + { value: DelimiterEnum.Comma, label: 'Comma (ex.: column1,column2,column3)' }, + { + value: DelimiterEnum.Semicolon, + label: 'Semicolon (ex.: column1;column2;column3)', + }, + { + value: DelimiterEnum.Tab, + label: 'Tab (ex.: column1 \\t column2 \\t column3)', + }, + { value: DelimiterEnum.Space, label: 'Space (ex.: column1 column2 column3)' }, + { value: DelimiterEnum.Custom, label: 'Custom' }, +] +export const DELIMITER_KEYS = DELIMITERS.map(({ value }) => value) + +export default function DelimiterSelector({ + delimiterInputName, + customDelimiterInputName, + delimiterErrors, + customDelimiterErrors, + delimiterValue, + customDelimiterValue, +}: { + delimiterInputName: string + delimiterValue: string | undefined + delimiterErrors: string[] | undefined + customDelimiterInputName: string + customDelimiterValue: string + customDelimiterErrors: string[] | undefined +}) { + const inputRef = useRef(null) + const [isCustom, setIsCustom] = useState(false) + const onSelectChange = useCallback((value: string) => { + const custom = value === 'custom' + setIsCustom(custom) + setTimeout(() => { + if (!custom) return + inputRef.current?.focus() + }, 0) + }, []) + return ( + + + + ) +} diff --git a/apps/web/src/app/(private)/datasets/new/page.tsx b/apps/web/src/app/(private)/datasets/new/page.tsx index 9c383e651..7cab26f69 100644 --- a/apps/web/src/app/(private)/datasets/new/page.tsx +++ b/apps/web/src/app/(private)/datasets/new/page.tsx @@ -8,6 +8,7 @@ import { Input, Modal, } from '@latitude-data/web-ui' +import DelimiterSelector from '$/app/(private)/datasets/new/_components/DelimiterSelector' import { useNavigate } from '$/hooks/useNavigate' import { ROUTES } from '$/services/routes' import useDatasets from '$/stores/datasets' @@ -15,7 +16,7 @@ import useDatasets from '$/stores/datasets' export default function NewDataset() { const data = { name: '' } const navigate = useNavigate() - const { createError, createFormAction } = useDatasets({ + const { createError, createFormAction, isCreating } = useDatasets({ onCreateSuccess: () => navigate.push(ROUTES.datasets.root), }) const errors = createError?.fieldErrors @@ -28,7 +29,12 @@ export default function NewDataset() { footer={ <> - @@ -48,6 +54,14 @@ export default function NewDataset() { defaultValue={data?.name} placeholder='Amazing dataset' /> + diff --git a/apps/web/src/stores/datasetPreviews.ts b/apps/web/src/stores/datasetPreviews.ts new file mode 100644 index 000000000..2cd0e6cc2 --- /dev/null +++ b/apps/web/src/stores/datasetPreviews.ts @@ -0,0 +1,42 @@ +import { useCallback } from 'react' + +import type { Dataset } from '@latitude-data/core/browser' +import { CsvParsedData } from '@latitude-data/core/lib/readCsv' +import { useToast } from '@latitude-data/web-ui' +import { previewDatasetAction } from '$/actions/datasets/preview' +import useCurrentWorkspace from '$/stores/currentWorkspace' +import { SWRConfiguration } from 'swr' +import useSWRImmutable from 'swr/immutable' + +export default function useDatasetPreview( + { dataset }: { dataset: Dataset }, + opts?: SWRConfiguration, +) { + const { data: workspace } = useCurrentWorkspace() + const { toast } = useToast() + const fetcher = useCallback(async () => { + const [data, error] = await previewDatasetAction({ id: dataset.id }) + if (error) { + toast({ + title: 'Error', + description: error.message, + variant: 'destructive', + }) + + return { headers: [], rows: [], rowCount: 0 } + } + + return data + }, [toast]) + + const { data = [], ...rest } = useSWRImmutable( + ['workspace', workspace.id, 'datasets_preview', dataset?.id], + fetcher, + opts, + ) + + return { + data: data as CsvParsedData, + isLoading: rest.isLoading, + } +} diff --git a/apps/web/src/stores/datasets.ts b/apps/web/src/stores/datasets.ts index c213af611..a782b00e5 100644 --- a/apps/web/src/stores/datasets.ts +++ b/apps/web/src/stores/datasets.ts @@ -34,18 +34,21 @@ export default function useDatasets( mutate, ...rest } = useSWR(['workspace', workspace.id, 'datasets'], fetcher, opts) - const { error: createError, executeFormAction: createFormAction } = - useLatitudeAction(createDatasetAction, { - onSuccess: ({ data: dataset }) => { - toast({ - title: 'Success', - description: 'Dataset uploaded successfully! 🎉', - }) + const { + isPending: isCreating, + error: createError, + executeFormAction: createFormAction, + } = useLatitudeAction(createDatasetAction, { + onSuccess: ({ data: dataset }) => { + toast({ + title: 'Success', + description: 'Dataset uploaded successfully! 🎉', + }) - mutate([...data, dataset]) - onCreateSuccess?.(dataset) - }, - }) + mutate([...data, dataset]) + onCreateSuccess?.(dataset) + }, + }) const { execute: destroy, isPending: isDestroying } = useLatitudeAction< typeof destroyDatasetAction @@ -63,6 +66,7 @@ export default function useDatasets( return { data, mutate, + isCreating, createFormAction, createError, destroy, diff --git a/packages/core/src/lib/readCsv.ts b/packages/core/src/lib/readCsv.ts index 4c2b6257c..9f7426c3e 100644 --- a/packages/core/src/lib/readCsv.ts +++ b/packages/core/src/lib/readCsv.ts @@ -1,25 +1,49 @@ -import { CsvError, parse } from 'csv-parse/sync' +import { CsvError, parse, type Options as CsvOptions } from 'csv-parse/sync' import { Result } from './Result' -type ParseCsvOptions = { delimiter?: string } +function getData(file: File | string) { + if (typeof file === 'string') { + return file + } + return file.text() +} + +type ParseCsvOptions = { + delimiter: string + // https://csv.js.org/parse/options/to_line/ + limit?: number +} +type ParseResult = { + record: Record + info: { columns: { name: string }[] } +} +export type CsvParsedData = { + headers: string[] + rows: string[][] + rowCount: number +} export async function syncReadCsv( - file: File, - { delimiter = ';' }: ParseCsvOptions = {}, + file: File | string, + { delimiter, limit = -1 }: ParseCsvOptions, ) { try { - const data = await file.text() - const records = parse(data, { + const data = await getData(file) + let opts: CsvOptions = { delimiter, relax_column_count: true, - trim: true, skip_empty_lines: true, + relax_quotes: true, columns: true, + trim: true, info: true, - }) as { - record: Record - info: { columns: { name: string }[] } - }[] // not typed + } + + if (limit > 0) { + opts = { ...opts, to_line: limit } + } + + const records = parse(data, opts) as ParseResult[] if (records.length < 1) return Result.ok({ headers: [], rowCount: 0, data: [] }) diff --git a/packages/core/src/repositories/datasetsRepository.ts b/packages/core/src/repositories/datasetsRepository.ts index 99d66f150..f727e510a 100644 --- a/packages/core/src/repositories/datasetsRepository.ts +++ b/packages/core/src/repositories/datasetsRepository.ts @@ -11,6 +11,7 @@ export const datasetColumns = { authorId: datasets.authorId, fileKey: datasets.fileKey, fileMetadata: datasets.fileMetadata, + csvDelimiter: datasets.csvDelimiter, createdAt: datasets.createdAt, updatedAt: datasets.updatedAt, author: { @@ -30,4 +31,8 @@ export class DatasetsRepository extends Repository< .where(eq(datasets.workspaceId, this.workspaceId)) .as('datasetsScope') } + + findByName(name: string) { + return this.db.select().from(this.scope).where(eq(this.scope.name, name)) + } } diff --git a/packages/core/src/services/datasets/create.ts b/packages/core/src/services/datasets/create.ts index 94470eee9..38bb8dcdf 100644 --- a/packages/core/src/services/datasets/create.ts +++ b/packages/core/src/services/datasets/create.ts @@ -36,7 +36,9 @@ export const createDataset = async ( const file = disk.file(key) const fileMetadata = await file.toSnapshot() - const readCsvResult = await syncReadCsv(data.file) + const readCsvResult = await syncReadCsv(data.file, { + delimiter: data.csvDelimiter, + }) if (readCsvResult.error) return readCsvResult diff --git a/packages/core/src/services/datasets/preview.ts b/packages/core/src/services/datasets/preview.ts new file mode 100644 index 000000000..7002fd01d --- /dev/null +++ b/packages/core/src/services/datasets/preview.ts @@ -0,0 +1,38 @@ +import { Dataset } from '../../browser' +import { Result } from '../../lib' +import { DiskWrapper } from '../../lib/disk' +import { syncReadCsv } from '../../lib/readCsv' + +/** + * This service pick the first N rows of a CSV file + */ +export async function previewDataset({ + dataset, + disk, + limit = 100, +}: { + dataset: Dataset + disk: DiskWrapper + limit?: number +}) { + const diskFile = disk.file(dataset.fileKey) + const bytes = await diskFile.getBytes() + const file = new TextDecoder().decode(bytes) + const readResult = await syncReadCsv(file, { + limit, + delimiter: dataset.csvDelimiter, + }) + if (readResult.error) readResult + + const csv = readResult.value! + const rows = csv.data.map((row, i) => { + const values = Object.values(row.record) + values.unshift(String(i + 1)) + return values + }) + return Result.ok({ + rowCount: csv.rowCount, + headers: csv.headers, + rows, + }) +} diff --git a/packages/web-ui/src/ds/atoms/FormField/index.tsx b/packages/web-ui/src/ds/atoms/FormField/index.tsx index d742cffb7..c5387404a 100644 --- a/packages/web-ui/src/ds/atoms/FormField/index.tsx +++ b/packages/web-ui/src/ds/atoms/FormField/index.tsx @@ -13,7 +13,7 @@ import { Label } from '../Label' import Text from '../Text' import { Tooltip } from '../Tooltip' -function FormDescription({ +export function FormDescription({ id, children, ...props diff --git a/packages/web-ui/src/ds/atoms/FormFieldGroup/index.tsx b/packages/web-ui/src/ds/atoms/FormFieldGroup/index.tsx new file mode 100644 index 000000000..9ac4ad069 --- /dev/null +++ b/packages/web-ui/src/ds/atoms/FormFieldGroup/index.tsx @@ -0,0 +1,44 @@ +import { ReactNode, useId } from 'react' + +import { cn } from '../../../lib/utils' +import { FormDescription } from '../FormField' +import { Label } from '../Label' + +export function FormFieldGroup({ + layout = 'horizontal', + children, + label, + description, +}: { + children: ReactNode + label?: string + description?: string + layout?: 'horizontal' | 'vertical' +}) { + const id = useId() + return ( +
+ {label ? ( + + ) : null} +
+ {children} +
+ {description ? ( + + {description} + + ) : null} +
+ ) +} diff --git a/packages/web-ui/src/ds/atoms/Icons/index.tsx b/packages/web-ui/src/ds/atoms/Icons/index.tsx index 5fc195a5c..9ac70c9be 100644 --- a/packages/web-ui/src/ds/atoms/Icons/index.tsx +++ b/packages/web-ui/src/ds/atoms/Icons/index.tsx @@ -7,6 +7,7 @@ import { Copy, Ellipsis, EllipsisVertical, + Eye, File, FilePlus, FileUpIcon, @@ -56,6 +57,7 @@ const Icons = { moon: Moon, trash: Trash, sun: Sun, + eye: Eye, } export type IconName = keyof typeof Icons @@ -70,7 +72,7 @@ export type IconProps = { className?: string } -type Size = 'normal' | 'large' | 'xlarge' +type Size = 'normal' | 'large' | 'xlarge' | 'xxxlarge' export function Icon({ name, @@ -87,6 +89,7 @@ export function Icon({ 'w-4 h-4': size === 'normal', 'w-6 h-6': size === 'large', 'w-8 h-8': size === 'xlarge', + 'w-14 h-14': size === 'xxxlarge', 'animate-spin': spin, })} /> diff --git a/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx b/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx index 005b42d3c..bbbf2bd14 100644 --- a/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx +++ b/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx @@ -91,7 +91,7 @@ const SelectTrigger = forwardRef< span]:line-clamp-1', + 'flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-[5px] text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className, { 'w-full': fullWidth, diff --git a/packages/web-ui/src/ds/atoms/Table/index.tsx b/packages/web-ui/src/ds/atoms/Table/index.tsx index 10707d47e..d1727fea4 100644 --- a/packages/web-ui/src/ds/atoms/Table/index.tsx +++ b/packages/web-ui/src/ds/atoms/Table/index.tsx @@ -8,9 +8,17 @@ import { import { cn } from '../../../lib/utils' import Text from '../Text' -const Table = forwardRef>( - ({ className, ...props }, ref) => ( -
+type TableProps = HTMLAttributes & { + maxHeight?: number +} +const Table = forwardRef( + ({ className, maxHeight, ...props }, ref) => ( +
- + {message} diff --git a/packages/web-ui/src/ds/molecules/TableSkeleton/index.tsx b/packages/web-ui/src/ds/molecules/TableSkeleton/index.tsx new file mode 100644 index 000000000..95c59cf3b --- /dev/null +++ b/packages/web-ui/src/ds/molecules/TableSkeleton/index.tsx @@ -0,0 +1,51 @@ +import { useMemo } from 'react' + +import { Skeleton } from '../../atoms' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '../../atoms/Table' +import Text from '../../atoms/Text' + +export function TableSkeleton({ rows, cols }: { rows: number; cols: number }) { + const { data, headers } = useMemo(() => { + const rowList = Array.from(Array(rows).keys()) + const headers = Array.from(Array(cols).keys()) + const data = rowList.map((_) => headers) + return { data, headers } + }, [rows, cols]) + return ( +
+ + + {headers.map((header) => ( + + +
+ {header} +
+ + + ))} + + + + {data.map((row, indexRow) => ( + + {row.map((cell) => ( + + +
{row}
+ + + ))} + + ))} + +
+ ) +} diff --git a/packages/web-ui/src/ds/molecules/index.ts b/packages/web-ui/src/ds/molecules/index.ts index eb83aa301..eb499beaf 100644 --- a/packages/web-ui/src/ds/molecules/index.ts +++ b/packages/web-ui/src/ds/molecules/index.ts @@ -6,3 +6,4 @@ export * from './TabSelector' export * from './TableBlankSlate' export * from './ListingHeader' export * from './TitleWithActions' +export * from './TableSkeleton'