feat(useAntTheme): exposed generated ant theme (#475)

* feat(useTheme): exposed generated ant theme

* Use themeWithFallback to generate ant theme

* Added useAntTheme hook

* code review

* Removed eslint disable from tests

---------

Co-authored-by: Federico Maggi <7142570+fredmaggiowski@users.noreply.github.com>

Author: epessina

src/hooks/index.ts

@@ -16,6 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { useAntTheme } from './useAntTheme'
 import { useFeedbackMessage } from './useFeedbackMessage'
 import { useModal } from './useModal'
 import { useTheme } from './useTheme'
@@ -24,4 +25,5 @@ export default {
   useFeedbackMessage,
   useModal,
   useTheme,
+  useAntTheme,
 }

src/hooks/useAntTheme/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2024 Mia srl
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { useAntTheme } from './useAntTheme'

src/hooks/useAntTheme/useAntTheme.test.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2024 Mia srl
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Theme from '../../themes/schema'
+import { ThemeProvider } from '../../components/ThemeProvider'
+import { ThemeProviderProps } from '../../components/ThemeProvider/ThemeProvider.props'
+import { generateAntTheme } from '../../components/ThemeProvider/Ant'
+import { renderHook } from '../../test-utils'
+import themes from '../../themes'
+import { useAntTheme } from './useAntTheme'
+
+const { lightTheme } = themes
+
+describe('useAntTheme', () => {
+  const themeProvider = (defaultTheme: Theme) => function component({ theme, children }: ThemeProviderProps) {
+    return (
+      <ThemeProvider theme={theme ?? defaultTheme}>
+        {children}
+      </ThemeProvider>
+    )
+  }
+
+  test('correctly generates ant theme from default theme', () => {
+    const antTheme = generateAntTheme(lightTheme)
+
+    const { result } = renderHook(() => useAntTheme(), { wrapper: ThemeProvider })
+
+    expect(result.current).toEqual(antTheme)
+  })
+
+  for (const [themeName, theme] of Object.entries(themes)) {
+    test(`correctly generates ant theme from ${themeName} theme`, () => {
+      const antTheme = generateAntTheme(theme)
+
+      const { result } = renderHook(() => useAntTheme(), { wrapper: themeProvider(theme) })
+
+      expect(result.current).toEqual(antTheme)
+    })
+  }
+})

src/hooks/useAntTheme/useAntTheme.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2024 Mia srl
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ThemeConfig } from 'antd'
+import { useMemo } from 'react'
+
+import { generateAntTheme } from '../../components/ThemeProvider/Ant'
+import { useTheme } from '../useTheme'
+
+/**
+ * A hook to compute the Ant Design theme from the current theme.
+ *
+ * @link https://ant.design/docs/react/customize-theme#api
+ *
+ * @returns {ThemeConfig} The Ant Design theme.
+ */
+export const useAntTheme = (): ThemeConfig => {
+  const theme = useTheme()
+
+  return useMemo(() => generateAntTheme(theme), [theme])
+}

src/hooks/useTheme/useTheme.test.tsx

@@ -16,9 +16,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/* eslint-disable func-names */
-/* eslint-disable react/display-name */
-
 import Theme from '../../themes/schema'
 import { ThemeProvider } from '../../components/ThemeProvider'
 import { ThemeProviderProps } from '../../components/ThemeProvider/ThemeProvider.props'
@@ -29,7 +26,7 @@ import { useTheme } from './useTheme'
 const { lightTheme } = themes
 
 describe('useTheme', () => {
-  const themeProvider = (defaultTheme: Theme) => function({ theme, children }: ThemeProviderProps) {
+  const themeProvider = (defaultTheme: Theme) => function component({ theme, children }: ThemeProviderProps) {
     return (
       <ThemeProvider theme={theme ?? defaultTheme}>
         {children}