chore(Table): rename Table component into ChargeTable

src/components/designSystem/Table/Table.tsx → src/components/designSystem/Table/ChargeTable.tsx

@@ -13,39 +13,39 @@ const CELL_HEIGHT = 48
 
 type DataType<T> = T & { disabledDelete?: boolean }
 
-interface TableColumnMapKey<T> {
+interface ChargeTableColumnMapKey<T> {
   title?: ReactNode
   size?: number
   content: ReactNode | ((row: DataType<T>, index: number) => ReactNode)
   mapKey?: never // Use this if you only want to render the property itself
   onClick?: () => unknown // On column header click
 }
 
-interface TableColumnContent {
+interface ChargeTableColumnContent {
   title: ReactNode
   size?: number
   content?: never
   mapKey: string // Use this if you only want to render the property itself
   onClick?: () => unknown // On column header click
 }
 
-type TableColumnProps<T> = TableColumnMapKey<T> | TableColumnContent
+type ChargeTableColumnProps<T> = ChargeTableColumnMapKey<T> | ChargeTableColumnContent
 
-interface TableProps<T> {
+interface ChargeTableProps<T> {
   name: string // this is to allow to have several table on a same page (no duplicated keys)
-  columns: TableColumnProps<T>[]
+  columns: ChargeTableColumnProps<T>[]
   data: DataType<T>[]
   className?: string
   onDeleteRow?: (row: DataType<T>, index: number) => unknown
 }
 
-export const Table = <T extends Record<string, unknown>>({
+export const ChargeTable = <T extends Record<string, unknown>>({
   name,
   className,
   columns,
   data,
   onDeleteRow,
-}: TableProps<T>) => {
+}: ChargeTableProps<T>) => {
   const { translate } = useInternationalization()
 
   return (

src/components/designSystem/Table/index.ts

@@ -1,2 +1,2 @@
-export * from './Table'
+export * from './ChargeTable'
 export * from './TableDisplay'

src/components/plans/GraduatedChargeTable.tsx

@@ -4,7 +4,7 @@ import { FormikProps } from 'formik'
 import { memo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Alert, Button, Table, Tooltip, Typography } from '~/components/designSystem'
+import { Alert, Button, ChargeTable, Tooltip, Typography } from '~/components/designSystem'
 import { AmountInput, TextInput } from '~/components/form'
 import { ONE_TIER_EXAMPLE_UNITS } from '~/core/constants/form'
 import { getCurrencySymbol, intlFormatNumber } from '~/core/formats/intlFormatNumber'
@@ -67,7 +67,7 @@ export const GraduatedChargeTable = memo(
           {translate('text_62793bbb599f1c01522e91a5')}
         </AddButton>
         <TableContainer>
-          <Table
+          <ChargeTable
             name="graduated-charge-table"
             data={tableDatas}
             onDeleteRow={(_, i) => deleteRange(i)}

src/components/plans/GraduatedPercentageChargeTable.tsx

@@ -4,7 +4,7 @@ import { FormikProps } from 'formik'
 import { memo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Alert, Button, Icon, Table, Tooltip, Typography } from '~/components/designSystem'
+import { Alert, Button, ChargeTable, Icon, Tooltip, Typography } from '~/components/designSystem'
 import { AmountInput, TextInput } from '~/components/form'
 import { getCurrencySymbol, intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { CurrencyEnum } from '~/generated/graphql'
@@ -66,7 +66,7 @@ export const GraduatedPercentageChargeTable = memo(
           {translate('text_62793bbb599f1c01522e91a5')}
         </AddButton>
         <TableContainer>
-          <Table
+          <ChargeTable
             name="graduated-percentage-charge-table"
             data={tableDatas}
             onDeleteRow={(_, i) => deleteRange(i)}

src/components/plans/VolumeChargeTable.tsx

@@ -4,7 +4,7 @@ import { FormikProps } from 'formik'
 import { memo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Alert, Button, Table, Tooltip, Typography } from '~/components/designSystem'
+import { Alert, Button, ChargeTable, Tooltip, Typography } from '~/components/designSystem'
 import { AmountInput, TextInput } from '~/components/form'
 import { getCurrencySymbol, intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { CurrencyEnum } from '~/generated/graphql'
@@ -66,7 +66,7 @@ export const VolumeChargeTable = memo(
           {translate('text_6304e74aab6dbc18d615f38e')}
         </AddButton>
         <TableContainer>
-          <Table
+          <ChargeTable
             name="volume-charge-table"
             data={tableDatas}
             onDeleteRow={(_, i) => deleteRange(i)}

src/pages/__devOnly/DesignSystem.tsx

@@ -12,6 +12,7 @@ import {
   Avatar,
   Button,
   ButtonLink,
+  ChargeTable,
   Chip,
   Dialog,
   DialogRef,
@@ -25,7 +26,6 @@ import {
   Skeleton,
   Status,
   StatusType,
-  Table,
   TableDisplay,
   Tooltip,
   Typography,
@@ -527,7 +527,7 @@ const DesignSystem = () => {
               <Container>
                 <GroupTitle variant="headline">Table</GroupTitle>
                 <Block $marginBottom={theme.spacing(6)}>
-                  <Table
+                  <ChargeTable
                     name="graduated-charge-table"
                     data={tableData}
                     onDeleteRow={() => {}}