Merge pull request #1993 from oasisprotocol/mz/uil

buberdds · web-flow · commit 542a5c7bb5c8 · 2025-08-04T09:49:34.000+02:00
Introduce Oasis UI Library
diff --git a/.changelog/1993.internal.md b/.changelog/1993.internal.md
@@ -0,0 +1 @@
+Introduce Oasis UI Library
diff --git a/.eslintignore b/.eslintignore
@@ -18,3 +18,4 @@ yarn-error.log*
 \#*
 .\#*
 
+ui-library
diff --git a/.github/workflows/ci-build.yml b/.github/workflows/ci-build.yml
@@ -19,6 +19,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          submodules: true
       - name: Set up Node.js 20
         uses: actions/setup-node@v4
         with:
diff --git a/.github/workflows/ci-lint.yml b/.github/workflows/ci-lint.yml
@@ -20,6 +20,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
+          submodules: true
           # Checkout pull request HEAD commit instead of merge commit.
           ref: ${{ github.event.pull_request.head.sha }}
           # Fetch all history so gitlint can check the relevant commits.
diff --git a/.github/workflows/ci-playwright.yml b/.github/workflows/ci-playwright.yml
@@ -22,6 +22,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          submodules: true
       - name: Set up Node.js 20
         uses: actions/setup-node@v4
         with:
diff --git a/.github/workflows/ci-test.yml b/.github/workflows/ci-test.yml
@@ -19,6 +19,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          submodules: true
       - name: Set up Node.js 20
         uses: actions/setup-node@v4
         with:
diff --git a/.github/workflows/cloudflare-pages.yml b/.github/workflows/cloudflare-pages.yml
@@ -43,6 +43,7 @@ jobs:
         uses: actions/checkout@v4
         # Checkout pull request HEAD commit instead of merge commit.
         with:
+          submodules: true
           ref: ${{ github.event.pull_request.head.sha }}
       - name: Set up Node.js 20
         uses: actions/setup-node@v4
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -21,6 +21,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          submodules: true
       - name: Set up Node.js 20
         uses: actions/setup-node@v4
         with:
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "ui-library"]
+	path = ui-library
+	url = https://github.com/oasisprotocol/ui-library.git
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
     <meta property="og:type" content="website" />
     <title>%REACT_APP_META_TITLE%</title>
     <meta name="description" content="%REACT_APP_META_DESC%" />
+    <link href="../src/styles/tailwind.css" type="text/css" rel="stylesheet" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@mui/material": "5.16.7",
     "@oasisprotocol/client": "1.2.0",
     "@oasisprotocol/client-rt": "1.2.0",
+    "@oasisprotocol/ui-library": "file:./ui-library",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
     "axios": "1.8.4",
@@ -77,6 +78,7 @@
     "viem": "^2.31.4"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -105,6 +107,7 @@
     "process": "0.11.10",
     "react-app-polyfill": "3.0.0",
     "stream-browserify": "3.0.0",
+    "tailwindcss": "^4.1.8",
     "typescript": "5.6.3",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
diff --git a/src/app/components/Social/index.tsx b/src/app/components/Social/index.tsx
@@ -16,6 +16,11 @@ import DocsIcon from '@mui/icons-material/MenuBook'
 import HomeIcon from '@mui/icons-material/Cottage'
 import { COLORS } from '../../../styles/theme/colors'
 import { socialMedia } from '../../utils/externalLinks'
+import { styled } from '@mui/material/styles'
+
+const StyledImage = styled('img')({
+  height: '40px',
+})
 
 type SocialLinkProps = {
   label: string
@@ -43,7 +48,7 @@ const SocialLink: FC<SocialLinkProps> = ({ label, href, isMobile, imgSrc, img })
     >
       <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
         <>
-          {imgSrc && <img src={imgSrc} alt={label} height={40} />}
+          {imgSrc && <StyledImage src={imgSrc} alt={label} />}
           {img}
         </>
       </Box>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -0,0 +1,49 @@
+@import '@oasisprotocol/ui-library/src/styles/global.css';
+
+/* Specific fixes needed during migration to Oasis UI Library */
+
+/* Override MUI styles that are applied globally */
+[class*=' text-'] {
+  font-family: var(--default-font-family);
+}
+
+/* Override Tailwind's header reset for actual HTML header elements within MUI components */
+[class*='Mui'] h1:not([class*='MuiTypography']),
+[class*='Mui'] h2:not([class*='MuiTypography']),
+[class*='Mui'] h3:not([class*='MuiTypography']),
+[class*='Mui'] h4:not([class*='MuiTypography']),
+[class*='Mui'] h5:not([class*='MuiTypography']),
+[class*='Mui'] h6:not([class*='MuiTypography']) {
+  font-size: revert;
+  font-weight: revert;
+}
+
+/* Override Tailwind's vertical-align reset for MUI SVG components */
+[class*='Mui'] img,
+[class*='Mui'] svg,
+[class*='Mui'] video,
+[class*='Mui'] canvas,
+[class*='Mui'] audio,
+[class*='Mui'] iframe,
+[class*='Mui'] embed,
+[class*='Mui'] object {
+  vertical-align: revert;
+}
+
+/* Override Tailwind's table cell padding reset for actual HTML td elements within MUI components */
+[class*='Mui'] td:not([class*='MuiTableCell']),
+[class*='Mui'] th:not([class*='MuiTableCell']) {
+  padding: 1px;
+}
+
+/* Override Tailwind's table border-collapse reset for actual HTML table elements within MUI components */
+[class*='Mui'] table:not([class*='MuiTable']),
+[class*='Mui'] tbody:not([class*='MuiTableBody']) {
+  border-collapse: revert;
+}
+
+/* Override Tailwind's image list margin */
+[class*='MuiImageList'] {
+  margin-block-start: revert;
+  margin-block-end: revert;
+}
diff --git a/ui-library b/ui-library
@@ -0,0 +1 @@
+Subproject commit 6b22d3cd757067dacc31bd035583a5920164be12
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -1,10 +1,12 @@
-import { defineConfig, UserConfig } from 'vite'
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
 
-export default defineConfig((): UserConfig => {
+/** @type {import('vite').UserConfig} */
+export default defineConfig(() => {
   return {
-    plugins: [react(), tsconfigPaths()],
+    plugins: [react(), tsconfigPaths(), tailwindcss()],
     build: {
       outDir: 'build',
       sourcemap: true,
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -18,3 +18,4 @@ yarn-error.log*`
`18`	`18`	`\#*`
`19`	`19`	`.\#*`
`20`	`20`
	`21`	`+ui-library`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+[submodule "ui-library"]`
	`2`	`+ path = ui-library`
	`3`	`+ url = https://github.com/oasisprotocol/ui-library.git`