Merge pull request #878 from buildo/fix-table-cells-type

Fix Table cells types

Author: pedrodim

packages/bento-design-system/src/Table/cells.tsx

@@ -29,7 +29,7 @@ export function ButtonCell({
   value: buttonProps,
   column: { align },
   options,
-}: CellProps<{}, Omit<ButtonProps, "size">> & {
+}: CellProps<any, Omit<ButtonProps, "size">> & {
   options: Partial<Pick<ButtonProps, "size">>;
 }) {
   const config = useBentoConfig().table;
@@ -48,7 +48,7 @@ export function ButtonLinkCell({
   value: buttonProps,
   column: { align },
   options,
-}: CellProps<{}, Omit<ButtonLinkProps, "size">> & {
+}: CellProps<any, Omit<ButtonLinkProps, "size">> & {
   options: Partial<Pick<ButtonLinkProps, "size">>;
 }) {
   const config = useBentoConfig().table;
@@ -67,7 +67,7 @@ export function TextCell({
   value,
   column: { align },
   options,
-}: CellProps<{}, LocalizedString> & {
+}: CellProps<any, LocalizedString> & {
   options: Partial<Pick<BodyProps, "size" | "weight" | "color">>;
 }) {
   const config = useBentoConfig().table;
@@ -87,7 +87,7 @@ export function TextWithIconCell({
   column: { align },
   options,
 }: CellProps<
-  {},
+  any,
   {
     icon: ((props: IconProps) => Children) | null;
     iconPosition: "left" | "right";
@@ -132,7 +132,7 @@ export function TextWithIconCell({
   );
 }
 
-export function ChipCell({ value: chipProps, column: { align } }: CellProps<{}, ChipProps>) {
+export function ChipCell({ value: chipProps, column: { align } }: CellProps<any, ChipProps>) {
   const config = useBentoConfig().table;
   const padding = config.padding.chipCell ?? config.padding.defaultCell;
   return (
@@ -148,7 +148,7 @@ export function LabelCell({
   value,
   column: { align },
   options,
-}: CellProps<{}, LocalizedString> & {
+}: CellProps<any, LocalizedString> & {
   options: Partial<Pick<LabelProps, "size" | "color">>;
 }) {
   const config = useBentoConfig().table;
@@ -167,7 +167,7 @@ export function LinkCell({
   value,
   column: { align },
   options,
-}: CellProps<{}, ComponentProps<typeof Link>> & {
+}: CellProps<any, ComponentProps<typeof Link>> & {
   options: Partial<Pick<BodyProps, "size" | "weight">>;
 }) {
   const config = useBentoConfig().table;
@@ -186,7 +186,7 @@ export function IconCell({
   value,
   column: { align },
   options,
-}: CellProps<{}, { icon: (props: IconProps) => JSX.Element; label: LocalizedString }> & {
+}: CellProps<any, { icon: (props: IconProps) => JSX.Element; label: LocalizedString }> & {
   options: Partial<Pick<IconProps, "size" | "color">>;
 }) {
   const config = useBentoConfig().table;
@@ -203,7 +203,7 @@ export function IconButtonCell({
   value: iconButtonProps,
   column: { align },
   options,
-}: CellProps<{}, Omit<IconButtonProps, "size" | "kind" | "hierarchy">> & {
+}: CellProps<any, Omit<IconButtonProps, "size" | "kind" | "hierarchy">> & {
   options: Partial<Pick<IconButtonProps, "size" | "kind" | "hierarchy">>;
 }) {
   const config = useBentoConfig().table;

packages/bento-design-system/src/Table/tableColumn.tsx

@@ -146,7 +146,7 @@ export function textWithIcon<A extends string>({
       value: _value,
       ...props
     }: CellProps<
-      {},
+      any,
       {
         icon: ((props: IconProps) => Children) | null;
         text: LocalizedString;
@@ -177,7 +177,7 @@ export function number<A extends string>({
 } & Partial<Pick<BodyProps, "size" | "weight" | "color">>) {
   return custom({
     ...options,
-    Cell: ({ value: numericValue, ...props }: CellProps<{}, number>) => {
+    Cell: ({ value: numericValue, ...props }: CellProps<any, number>) => {
       const value = valueFormatter(numericValue);
       const textCellProps = {
         ...props,
@@ -206,7 +206,7 @@ export function numberWithIcon<A extends string>({
       value: { numericValue, icon, tooltipContent },
       ...props
     }: CellProps<
-      {},
+      any,
       {
         icon: ((props: IconProps) => Children) | null;
         numericValue: number;

packages/bento-design-system/stories/Components/Table.stories.tsx

@@ -445,7 +445,7 @@ const meta = {
     data: exampleData,
   },
   parameters: { actions: { argTypesRegex: "" } },
-} satisfies Meta<TableProps<typeof exampleColumns, typeof exampleGroupedColumns>>;
+} satisfies Meta<TableProps<typeof exampleColumns>>;
 
 export default meta;
 
@@ -526,6 +526,7 @@ export const WithFilter = {
               options={statusOptions}
             />
           </FormRow>
+          {/* @ts-expect-error */}
           <Story args={{ ...ctx.args, data }} />
         </Stack>
       );
@@ -598,6 +599,7 @@ export const Grouped = {
 } satisfies Story;
 
 export const WithFillColumn = {
+  // @ts-expect-error
   args: {
     columns: [
       tableColumn.text({
@@ -664,6 +666,7 @@ function repeatToLength<T>(arr: T[], n: number): T[] {
 }
 
 export const VirtualizedRows = {
+  // @ts-expect-error
   args: {
     stickyHeaders: true,
     height: { custom: 340 },
@@ -673,6 +676,7 @@ export const VirtualizedRows = {
 } satisfies Story;
 
 export const VirtualizedRowsGroupedHeaders = {
+  // @ts-expect-error
   args: {
     columns: exampleGroupedColumns,
     stickyHeaders: true,
@@ -683,6 +687,7 @@ export const VirtualizedRowsGroupedHeaders = {
 } satisfies Story;
 
 export const VirtualizedRowsGroupedRows = {
+  // @ts-expect-error
   args: {
     columns: [
       ...exampleColumns,