Page layout (#35)

* feat: Add PageContainer and Breadcrumbs components, update theme colors

* Add font sizes to the theme, update css classes

* Update theme font size typo

* Wrapped all the react props into readonly

---------

Co-authored-by: Daniil Sloboda <[email protected]>

ui/.stylelintignore

@@ -0,0 +1 @@
+dist/**

ui/eslint.config.mjs

@@ -45,6 +45,8 @@ export default tseslint.config(
       ...reactHooks.configs.recommended.rules,
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'react/prop-types': 'off',
+      'react/prefer-read-only-props': 'error',
+      complexity: ['error', 10],
     },
     settings: {
       react: {

ui/license-checker-config.json

@@ -1,5 +1,5 @@
 {
-  "ignore": [".idea", ".husky", "README.md", ".gitignore", "**/*.svg", "FILE_LICENSE"],
+  "ignore": [".idea", ".husky", "README.md", ".gitignore", ".stylelintignore", "**/*.svg", "FILE_LICENSE"],
   "license": "FILE_LICENSE",
   "licenseFormats": {
     "js|ts|tsx|scss|cjs|mjs": {

ui/package.json

@@ -6,19 +6,22 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint src/** *.ts *.cjs *.mjs --no-warn-ignored",
-    "lint:css": "stylelint 'src/*.css' 'src/*.scss'",
+    "lint": "eslint src *.ts *.cjs *.mjs",
+    "lint:css": "stylelint '**/*.[s]css'",
     "lint:check": "prettier --check . && npm run lint && npm run lint:css",
     "preview": "vite preview",
     "prepare": "cd .. && husky ./ui/.husky",
     "add-license": "license-check-and-add add",
     "test": "vitest"
   },
   "lint-staged": {
-    "*.{ts,tsx}": [
+    "(*.ts|*.tsx|*.cjs|*.mjs)": [
       "prettier --write",
       "eslint --fix"
     ],
+    "*.[s]css": [
+      "stylelint --fix"
+    ],
     "*": [
       "license-check-and-add add"
     ]

ui/src/App.tsx

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 import { MantineProvider } from '@mantine/core';
-import { DatasetTable } from './components/DatasetTable/DatasetTable';
 import { theme } from './common/styling/theme';
+import { DatasetTable } from './components/DatasetTable/DatasetTable';
+import { PageContainer } from './common/components/PageContainer/PageContainer';
 
 export function App() {
   return (
     <MantineProvider theme={theme}>
-      <DatasetTable />
+      <PageContainer>
+        <DatasetTable />
+      </PageContainer>
     </MantineProvider>
   );
 }

ui/src/common/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  height: 40px;
+  padding: 8px 12px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.active {
+  pointer-events: none;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--color-text-primary);
+}
+
+.link {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--mantine-color-primary-0);
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.separator {
+  color: var(--color-text-secondary-1);
+}

ui/src/common/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Anchor, Breadcrumbs as MantineBreadcrumbs, ThemeIcon } from '@mantine/core';
+import { IconHome } from '@tabler/icons-react';
+import classes from './Breadcrumbs.module.scss';
+
+interface Breadcrumb {
+  title: string;
+  path: string;
+}
+
+interface BreadcrumbsProps {
+  items: Breadcrumb[];
+}
+
+export function Breadcrumbs({ items }: Readonly<BreadcrumbsProps>) {
+  return (
+    <div className={classes.container}>
+      <ThemeIcon
+        variant="white"
+        color="primary"
+      >
+        <IconHome />
+      </ThemeIcon>
+      <MantineBreadcrumbs
+        separator="/"
+        separatorMargin={6}
+        classNames={{
+          separator: classes.separator,
+        }}
+      >
+        {items.map((item, index) => {
+          const isActive = index === items.length - 1;
+          return (
+            <Anchor
+              className={isActive ? classes.active : classes.link}
+              href={item.path}
+              id={item.path}
+              key={item.path}
+            >
+              {item.title}
+            </Anchor>
+          );
+        })}
+      </MantineBreadcrumbs>
+    </div>
+  );
+}

ui/src/common/components/DataTable/DataTable.module.scss

@@ -25,17 +25,17 @@
 }
 
 .table {
-  --mrt-row-hover-background-color: #f8f8f8;
+  --mrt-row-hover-background-color: var(--color-background-main);
 }
 
 .headerCell {
   padding: 16px 6px;
   font-weight: 600;
   line-height: 16.8px;
-  color: #40474f;
+  color: var(--color-text-secondary-2);
 }
 
 .bodyCell {
   padding: 16px 6px;
-  color: #637d92;
+  color: var(--color-text-secondary-2);
 }

ui/src/common/components/PageContainer/PageContainer.module.scss

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.header {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-color: var(--color-background-gray);
+}
+
+.main {
+  padding-top: 40px;
+  padding-bottom: 48px;
+  min-width: 1280px;
+}
+
+.footer {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary-2);
+}
+
+.logo {
+  width: 54px;
+  height: 24px;
+}
+
+.userDetails {
+  color: var(--color-text-primary);
+}

ui/src/common/components/PageContainer/PageContainer.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PropsWithChildren } from 'react';
+import { AppShell, Avatar, Group } from '@mantine/core';
+import classes from './PageContainer.module.scss';
+import ORDLogo from '../../../assets/ORD_logo.png';
+import { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs';
+
+export function PageContainer({ children }: PropsWithChildren) {
+  return (
+    <AppShell
+      classNames={{
+        header: classes.header,
+        main: classes.main,
+        footer: classes.footer,
+      }}
+    >
+      <AppShell.Header>
+        <img
+          src={ORDLogo}
+          className={classes.logo}
+          alt="Open Reaction Database logo"
+        />
+
+        {/* TODO: Replace with user details component */}
+        <Group
+          gap="4px"
+          className={classes.userDetails}
+        >
+          <Avatar
+            src={null}
+            size="sm"
+          />
+          John Doe
+        </Group>
+      </AppShell.Header>
+
+      <AppShell.Main>
+        <Breadcrumbs
+          items={[
+            { title: 'Contribute', path: '/contribute' },
+            { title: 'Enumerate', path: '/contribure/enumerate' },
+          ]}
+        />
+        {children}
+      </AppShell.Main>
+
+      <AppShell.Footer withBorder={false}>© Copyright 2024 Open Reaction Database</AppShell.Footer>
+    </AppShell>
+  );
+}

ui/src/common/components/Pagination/Pagination.module.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 .controlButton {
-  color: #090a0b;
+  color: var(--color-text-primary);
 
   &:disabled {
     background-color: transparent;
@@ -23,13 +23,13 @@
 }
 
 .paginationRoot {
-  --pagination-active-bg: #e8ebed;
+  --pagination-active-bg: var(--color-background-gray);
   --pagination-control-radius: 4px;
 
   button {
     font-size: 14px;
     border: none;
-    color: #090a0b;
+    color: var(--color-text-primary);
   }
 }
 

ui/src/common/components/Pagination/Pagination.tsx

@@ -33,7 +33,7 @@ export function Pagination({
   onPageChange,
   rowsPerPage,
   onRowsPerPageChange,
-}: PaginationProps) {
+}: Readonly<PaginationProps>) {
   return (
     <Group align="center">
       <Button

ui/src/common/components/StatusChip/StatusChip.tsx

@@ -30,7 +30,7 @@ const statusToColorMapping = new Map<DATASET_STATUS, string>([
   [DATASET_STATUS.PUBLISHED, '#637D92'],
 ]);
 
-export function StatusChip({ status }: StatusChipProps) {
+export function StatusChip({ status }: Readonly<StatusChipProps>) {
   const chipColor = statusToColorMapping.get(status);
 
   return (