Migrate Traefik Proxy dashboard UI to React

webui/src/utils/breakpoints.ts

@@ -0,0 +1,9 @@
+export default {
+  mobileS: '320px',
+  mobileM: '375px',
+  mobileL: '425px',
+  tablet: '768px',
+  laptop: '1024px',
+  laptopL: '1440px',
+  desktop: '2560px',
+}

webui/src/utils/mocks.ts

@@ -0,0 +1,11 @@
+export const useFetchWithPaginationMock = (options = {}) => ({
+  error: null,
+  isEmpty: false,
+  isLoadingMore: false,
+  isReachingEnd: true,
+  loadMore: vi.fn,
+  pageCount: 1,
+  pageSWRs: [],
+  pages: null,
+  ...options,
+})

webui/src/utils/position.ts

@@ -0,0 +1,37 @@
+export type PositionXProps = 'left' | 'center' | 'right'
+export type PositionYProps = 'top' | 'bottom'
+
+export type GetPositionType = {
+  top?: number
+  bottom?: number
+  left?: number
+  right?: number
+}
+
+export function getPositionValues(positionX: PositionXProps, positionY: PositionYProps): GetPositionType {
+  const position: GetPositionType = {}
+
+  switch (positionX) {
+    case 'left':
+      position.left = 0
+      break
+    case 'center':
+      position.left = 0
+      position.right = 0
+      break
+    case 'right':
+      position.right = 0
+      break
+  }
+
+  switch (positionY) {
+    case 'top':
+      position.top = 0
+      break
+    case 'bottom':
+      position.bottom = 0
+      break
+  }
+
+  return position
+}

webui/src/utils/string.ts

@@ -0,0 +1,5 @@
+export const capitalizeFirstLetter = (string: unknown): string | null => {
+  if (!string) return null
+
+  return string?.toString()?.charAt(0)?.toUpperCase() + string?.toString()?.slice(1)
+}

webui/src/utils/test.tsx

@@ -0,0 +1,45 @@
+import { cleanup, render } from '@testing-library/react'
+import { FaencyProvider } from '@traefiklabs/faency'
+import { HelmetProvider } from 'react-helmet-async'
+import { BrowserRouter } from 'react-router-dom'
+import { SWRConfig } from 'swr'
+import { afterEach } from 'vitest'
+
+import fetch from '../libs/fetch'
+
+afterEach(() => {
+  cleanup()
+})
+
+function customRender(ui: React.ReactElement, options = {}) {
+  return render(ui, {
+    // wrap provider(s) here if needed
+    wrapper: ({ children }) => children,
+    ...options,
+  })
+}
+
+// eslint-disable-next-line import/export
+export * from '@testing-library/react'
+export { default as userEvent } from '@testing-library/user-event'
+// override render export
+export { customRender as render } // eslint-disable-line import/export
+
+export function renderWithProviders(ui: React.ReactElement) {
+  return customRender(ui, {
+    wrapper: ({ children }) => (
+      <FaencyProvider>
+        <HelmetProvider>
+          <SWRConfig
+            value={{
+              revalidateOnFocus: false,
+              fetcher: fetch,
+            }}
+          >
+            <BrowserRouter>{children}</BrowserRouter>
+          </SWRConfig>
+        </HelmetProvider>
+      </FaencyProvider>
+    ),
+  })
+}

webui/src/utils/wait.ts

@@ -0,0 +1 @@
+export const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms))