chore: use monorepo organization

packages/admin-ui/src/components/fake-table/Table.jsx

@@ -0,0 +1,145 @@
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import classnames from 'classnames'
+import React from 'react'
+
+import { Link } from 'src/components/buttons'
+import styles from './Table.module.css'
+
+const Table = ({ children, className, ...props }) => (
+  <div className={classnames(className)} {...props}>
+    {children}
+  </div>
+)
+
+const THead = ({ children, className }) => {
+  return <div className={classnames(className, styles.header)}>{children}</div>
+}
+
+const TDoubleLevelHead = ({ children, className }) => {
+  return (
+    <div className={classnames(className, styles.doubleHeader)}>{children}</div>
+  )
+}
+
+const TBody = ({ children, className }) => {
+  return <div className={classnames(className)}>{children}</div>
+}
+
+const Td = ({
+  style = {},
+  children,
+  header,
+  className,
+  width = 100,
+  size,
+  bold,
+  textAlign,
+  action
+}) => {
+  const inlineStyle = {
+    ...style,
+    width,
+    textAlign,
+    fontSize: size === 'sm' ? '14px' : size === 'lg' ? '24px' : ''
+  }
+
+  const cssClasses = {
+    [styles.td]: !header,
+    [styles.tdHeader]: header,
+    'font-bold': !header && (bold || size === 'lg'),
+    [styles.actionCol]: action
+  }
+
+  return (
+    <div
+      data-cy={`td-${header}`}
+      className={classnames(className, cssClasses)}
+      style={inlineStyle}>
+      {children}
+    </div>
+  )
+}
+
+const Th = ({ children, ...props }) => {
+  return (
+    <Td header {...props}>
+      {children}
+    </Td>
+  )
+}
+
+const ThDoubleLevel = ({ title, children, className, width }) => {
+  return (
+    <div
+      className={classnames(className, styles.thDoubleLevel)}
+      style={{ width }}>
+      <div className={styles.thDoubleLevelFirst}>{title}</div>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+const Tr = ({
+  onClick,
+  error,
+  errorMessage,
+  shouldShowError,
+  children,
+  className,
+  size,
+  newRow
+}) => {
+  const inlineStyle = {
+    minHeight: size === 'sm' ? '34px' : size === 'lg' ? '68px' : '48px'
+  }
+  const cardClasses = {
+    [styles.card]: true,
+    [styles.trError]: error,
+    [styles.trAdding]: newRow
+  }
+
+  const mainContentClasses = {
+    [styles.mainContent]: true,
+    [styles.sizeSm]: size === 'sm',
+    [styles.sizeLg]: size === 'lg'
+  }
+
+  return (
+    <>
+      <Card className={classnames(className, cardClasses)} onClick={onClick}>
+        <CardContent className={styles.cardContentRoot}>
+          <div className={classnames(mainContentClasses)} style={inlineStyle}>
+            {children}
+          </div>
+          {error && shouldShowError && (
+            <div className={styles.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
+}

packages/admin-ui/src/components/fake-table/Table.module.css

@@ -0,0 +1,106 @@
+.header {
+  composes: tl2 from '../typography/typography.module.css';
+  background-color: var(--zodiac);
+  height: 32px;
+  text-align: left;
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.doubleHeader {
+  composes: tl2 from '../typography/typography.module.css';
+  background-color: var(--zodiac);
+  height: 64px;
+  color: white;
+  display: table-row;
+}
+
+.thDoubleLevel {
+  display: table-cell;
+}
+
+.thDoubleLevelFirst {
+  composes: label1 from '../typography/typography.module.css';
+  margin: 0 10px;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--comet);
+  color: white;
+  border-radius: 0 0 8px 8px;
+  height: 28px;
+}
+
+.thDoubleLevel > :last-child {
+  padding: 0 11px;
+  display: table-cell;
+  vertical-align: middle;
+  height: 36px;
+}
+
+.cellDoubleLevel {
+  display: flex;
+  padding: 0 16px;
+}
+
+.td {
+  padding: 1px 24px 0 24px;
+}
+
+.tdHeader {
+  vertical-align: middle;
+  display: table-cell;
+  padding: 0 24px;
+}
+
+.trError {
+  background-color: var(--misty-rose);
+}
+
+.trAdding {
+  background-color: var(--spring3);
+}
+
+.mainContent {
+  display: flex;
+  align-items: center;
+}
+
+.cardContentRoot {
+  margin: 0;
+  padding: 0;
+}
+
+.cardContentRoot:last-child {
+  padding: 0;
+}
+
+.card {
+  composes: p from '../typography/typography.module.css';
+  margin: 4px 0 0 0;
+  width: 100%;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+.card:before {
+  height: 0;
+}
+
+.actionCol {
+  margin-left: auto;
+}
+
+.errorContent {
+  padding: 12px 0 12px 24px;
+  color: var(--tomato);
+}
+
+.sizeSm {
+  min-height: 34px;
+}
+
+.sizeLg {
+  min-height: 68px;
+}