diff --git a/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts b/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts index 2a4e974c..6fc2d707 100644 --- a/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts +++ b/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts @@ -94,6 +94,7 @@ const componentsWithNoSpacingProp = [ "ui-pill", "ui-spinner", "ui-svgicon", + "ui-table", "ui-truncate", ]; diff --git a/packages/ui-table/package.json b/packages/ui-table/package.json index a93ba12a..66322499 100644 --- a/packages/ui-table/package.json +++ b/packages/ui-table/package.json @@ -14,9 +14,7 @@ "type": "module", "main": "dist/index.js", "types": "dist/index.d.ts", - "files": [ - "dist" - ], + "files": ["dist"], "scripts": { "build:check": "tsc", "build:js": "vite build", @@ -41,12 +39,9 @@ "@tailwindcss/typography": "0.5.15", "@versini/ui-button": "workspace:../ui-button", "@versini/ui-icons": "workspace:../ui-icons", - "@versini/ui-spacing": "workspace:../ui-spacing", "@versini/ui-types": "workspace:../ui-types", "clsx": "2.1.1", "tailwindcss": "3.4.17" }, - "sideEffects": [ - "**/*.css" - ] + "sideEffects": ["**/*.css"] } diff --git a/packages/ui-table/src/components/Table/Table.tsx b/packages/ui-table/src/components/Table/Table.tsx index e30f80bc..acfe2af1 100644 --- a/packages/ui-table/src/components/Table/Table.tsx +++ b/packages/ui-table/src/components/Table/Table.tsx @@ -35,7 +35,6 @@ export const Table = ({ maxHeight, stickyHeader, stickyFooter, - spacing, ...otherProps }: TableProps) => { const tableClass = getTableClasses({ @@ -44,7 +43,6 @@ export const Table = ({ wrapperClassName, stickyHeader, stickyFooter, - spacing, }); return ( ; +} & React.HTMLAttributes; export type TableRowProps = React.HTMLAttributes; export type TableBodyProps = React.HTMLAttributes; diff --git a/packages/ui-table/src/components/Table/utilities.ts b/packages/ui-table/src/components/Table/utilities.ts index 6033ed11..f709ce97 100644 --- a/packages/ui-table/src/components/Table/utilities.ts +++ b/packages/ui-table/src/components/Table/utilities.ts @@ -1,5 +1,3 @@ -import { getSpacing } from "@versini/ui-spacing"; -import type { SpacingTypes } from "@versini/ui-types"; import clsx from "clsx"; export const CELL_WRAPPER_HEAD = "thead"; @@ -17,18 +15,16 @@ export const getTableClasses = ({ wrapperClassName, stickyHeader, stickyFooter, - spacing, }: { mode: string; className?: string; stickyFooter?: boolean; stickyHeader?: boolean; wrapperClassName?: string; -} & SpacingTypes.Props) => { +}) => { return { wrapper: clsx( "not-prose relative w-full rounded-lg shadow-md", - getSpacing(spacing), { "overflow-x-auto": !stickyHeader && !stickyFooter, "overflow-y-scroll": stickyHeader || stickyFooter, @@ -65,17 +61,20 @@ export const getTableHeadClasses = ({ className?: string; stickyHeader?: boolean; }) => { - return clsx(className, { - "sticky top-0 z-10": stickyHeader, - "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": - stickyHeader && mode === "dark", - "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": - stickyHeader && mode === "system", - "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": - stickyHeader && mode === "light", - "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": - stickyHeader && mode === "alt-system", - }); + return clsx( + { + "sticky top-0 z-10": stickyHeader, + "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": + stickyHeader && mode === "dark", + "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": + stickyHeader && mode === "system", + "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": + stickyHeader && mode === "light", + "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": + stickyHeader && mode === "alt-system", + }, + className, + ); }; export const getTableFooterClasses = ({ @@ -87,17 +86,20 @@ export const getTableFooterClasses = ({ className?: string; stickyFooter?: boolean; }) => { - return clsx(className, { - "sticky bottom-0 z-10": stickyFooter, - "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": - stickyFooter && mode === "dark", - "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": - stickyFooter && mode === "system", - "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": - stickyFooter && mode === "light", - "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": - stickyFooter && mode === "alt-system", - }); + return clsx( + { + "sticky bottom-0 z-10": stickyFooter, + "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": + stickyFooter && mode === "dark", + "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": + stickyFooter && mode === "system", + "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": + stickyFooter && mode === "light", + "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": + stickyFooter && mode === "alt-system", + }, + className, + ); }; export const getTableRowClasses = ({ @@ -113,30 +115,37 @@ export const getTableRowClasses = ({ cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER ) { - return clsx({ - "bg-table-head-dark": mode === "dark", - "bg-table-head-light": mode === "light", - "bg-table-head-dark dark:bg-table-head-light": mode === "system", - "bg-table-head-light dark:bg-table-head-dark": mode === "alt-system", - }); + return clsx( + { + "bg-table-head-dark": mode === "dark", + "bg-table-head-light": mode === "light", + "bg-table-head-dark dark:bg-table-head-light": mode === "system", + "bg-table-head-light dark:bg-table-head-dark": mode === "alt-system", + }, + className, + ); } - return clsx("border-b last:border-0", className, { - "border-table-dark": mode === "dark", - "odd:bg-table-dark-odd even:bg-table-dark-even": - cellWrapper === CELL_WRAPPER_BODY && mode === "dark", + return clsx( + "border-b last:border-0", + { + "border-table-dark": mode === "dark", + "odd:bg-table-dark-odd even:bg-table-dark-even": + cellWrapper === CELL_WRAPPER_BODY && mode === "dark", - "border-table-light": mode === "light", - "odd:bg-table-light-odd even:bg-table-light-even": - cellWrapper === CELL_WRAPPER_BODY && mode === "light", + "border-table-light": mode === "light", + "odd:bg-table-light-odd even:bg-table-light-even": + cellWrapper === CELL_WRAPPER_BODY && mode === "light", - "border-table-dark dark:border-table-light": mode === "system", - "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": - cellWrapper === CELL_WRAPPER_BODY && mode === "system", + "border-table-dark dark:border-table-light": mode === "system", + "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": + cellWrapper === CELL_WRAPPER_BODY && mode === "system", - "border-table-light dark:border-table-dark": mode === "alt-system", - "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": - cellWrapper === CELL_WRAPPER_BODY && mode === "alt-system", - }); + "border-table-light dark:border-table-dark": mode === "alt-system", + "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": + cellWrapper === CELL_WRAPPER_BODY && mode === "alt-system", + }, + className, + ); }; export const getTableCellClasses = ({ @@ -150,18 +159,21 @@ export const getTableCellClasses = ({ className?: string; compact?: boolean; }) => { - return clsx(className, { - "text-copy-light": mode === "dark", - "text-copy-dark": mode === "light", - "text-copy-light dark:text-copy-dark": mode === "system", - "text-copy-dark dark:text-copy-light": mode === "alt-system", - "px-4 py-3": - !compact && - (cellWrapper === CELL_WRAPPER_HEAD || - cellWrapper === CELL_WRAPPER_FOOTER), - "p-4": !compact && cellWrapper === CELL_WRAPPER_BODY, - "px-2 py-1.5": compact, - }); + return clsx( + { + "text-copy-light": mode === "dark", + "text-copy-dark": mode === "light", + "text-copy-light dark:text-copy-dark": mode === "system", + "text-copy-dark dark:text-copy-light": mode === "alt-system", + "px-4 py-3": + !compact && + (cellWrapper === CELL_WRAPPER_HEAD || + cellWrapper === CELL_WRAPPER_FOOTER), + "p-4": !compact && cellWrapper === CELL_WRAPPER_BODY, + "px-2 py-1.5": compact, + }, + className, + ); }; export const getTableCellSortButtonClasses = ({ diff --git a/packages/ui-table/tailwind.config.js b/packages/ui-table/tailwind.config.js index 42ba260d..5b6b7b30 100644 --- a/packages/ui-table/tailwind.config.js +++ b/packages/ui-table/tailwind.config.js @@ -1,2 +1,2 @@ import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common"; -export default commonTailwindConfigForComponent(); +export default commonTailwindConfigForComponent("ui-table"); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 42af04a5..277cdb18 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -801,9 +801,6 @@ importers: '@versini/ui-icons': specifier: workspace:../ui-icons version: link:../ui-icons - '@versini/ui-spacing': - specifier: workspace:../ui-spacing - version: link:../ui-spacing '@versini/ui-types': specifier: workspace:../ui-types version: link:../ui-types