chore: use proper name convention for build tools

new-lamassu-admin/src/components/fake-table/Table.jsx

@@ -0,0 +1,133 @@
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
+import React from 'react'
+
+import { Link } from 'src/components/buttons'
+
+import styles from './Table.styles'
+
+const useStyles = makeStyles(styles)
+
+const Table = ({ children, className, ...props }) => (
+  <div className={classnames(className)} {...props}>
+    {children}
+  </div>
+)
+
+const THead = ({ children, className }) => {
+  const classes = useStyles()
+  return <div className={classnames(className, classes.header)}>{children}</div>
+}
+
+const TDoubleLevelHead = ({ children, className }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classnames(className, classes.doubleHeader)}>
+      {children}
+    </div>
+  )
+}
+
+const TBody = ({ children, className }) => {
+  return <div className={classnames(className)}>{children}</div>
+}
+
+const Td = ({
+  children,
+  header,
+  className,
+  width = 100,
+  size,
+  bold,
+  textAlign,
+  action
+}) => {
+  const classes = useStyles({ textAlign, width, size })
+  const classNames = {
+    [classes.td]: true,
+    [classes.tdHeader]: header,
+    [classes.actionCol]: action,
+    [classes.size]: !header,
+    [classes.bold]: !header && bold
+  }
+  return <div className={classnames(className, classNames)}>{children}</div>
+}
+
+const Th = ({ children, ...props }) => {
+  return (
+    <Td header {...props}>
+      {children}
+    </Td>
+  )
+}
+
+const ThDoubleLevel = ({ title, children, className, width }) => {
+  const classes = useStyles({ width })
+
+  return (
+    <div className={classnames(className, classes.thDoubleLevel)}>
+      <div>{title}</div>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+const Tr = ({
+  onClick,
+  error,
+  errorMessage,
+  shouldShowError,
+  children,
+  className,
+  size,
+  newRow
+}) => {
+  const classes = useStyles({ size })
+  const cardClasses = { root: classes.cardContentRoot }
+  const classNames = {
+    [classes.tr]: true,
+    [classes.trError]: error,
+    [classes.card]: true,
+    [classes.trAdding]: newRow,
+    className
+  }
+
+  return (
+    <>
+      <Card className={classnames(classNames, className)} onClick={onClick}>
+        <CardContent classes={cardClasses}>
+          <div className={classes.mainContent}>{children}</div>
+          {error && shouldShowError && (
+            <div className={classes.errorContent}>{errorMessage}</div>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  )
+}
+
+const EditCell = ({ save, cancel }) => (
+  <Td>
+    <Link style={{ marginRight: '20px' }} color="secondary" onClick={cancel}>
+      Cancel
+    </Link>
+    <Link color="primary" onClick={save}>
+      Save
+    </Link>
+  </Td>
+)
+
+export {
+  Table,
+  THead,
+  TDoubleLevelHead,
+  TBody,
+  Tr,
+  Td,
+  Th,
+  ThDoubleLevel,
+  EditCell
+}