@planningcenter/chat-react-native 3.44.2-qa-staging.0 → 3.44.2

package/src/components/display/__tests__/toggle_button.test.tsx

@@ -1,135 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render } from '@testing-library/react-native'
-import React from 'react'
-import { buildTestQueryClient } from '../../../__utils__/query_client'
-import { ChatProvider, CreateChatThemeProps } from '../../../contexts/chat_context'
-import { ToggleButton } from '../toggle_button'
-
-let themeProps: CreateChatThemeProps
-let queryClient: QueryClient
-
-beforeEach(() => {
-  queryClient = buildTestQueryClient({
-    defaultOptions: {
-      queries: {
-        refetchInterval: false,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
-      },
-    },
-  })
-})
-
-afterEach(() => {
-  queryClient.clear()
-  queryClient.cancelQueries()
-  queryClient.removeQueries()
-})
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ChatProvider
-        value={{
-          token: {
-            access_token: '',
-            created_at: 0,
-            expires_in: 0,
-            scope: '',
-            refresh_token: '',
-            token_type: '',
-          },
-          onUnauthorizedResponse: () => {},
-          theme: themeProps,
-        }}
-      >
-        {children}
-      </ChatProvider>
-    </QueryClientProvider>
-  )
-}
-
-const renderToggleButton = (active: boolean) => {
-  const view = render(<ToggleButton active={active} accessibilityLabel="Filter" title="Filter" />, {
-    wrapper: Wrapper,
-  })
-
-  return {
-    button: view.getByLabelText('Filter'),
-    text: view.getByText('Filter'),
-  }
-}
-
-describe('ToggleButton chip colors', () => {
-  describe('backward compatibility (Services / sandbox pass only colors.interaction)', () => {
-    const distinctiveGreen = 'rgb(0, 255, 0)'
-
-    beforeEach(() => {
-      themeProps = {
-        theme: {
-          colors: {
-            interaction: distinctiveGreen,
-          },
-        },
-      }
-    })
-
-    test('active state derives border, fill, and text color from colors.interaction', () => {
-      const { button, text } = renderToggleButton(true)
-
-      expect(button).toHaveStyle({ borderColor: distinctiveGreen })
-      // The active fill is the green interaction color lightened via the
-      // chip-background hook (hsl lightness 92 in the light scheme), not
-      // the raw interaction color — pins the hook's transform in place.
-      expect(button).toHaveStyle({ backgroundColor: 'hsl(120, 100%, 92%)' })
-      expect(text).toHaveStyle({ color: distinctiveGreen })
-    })
-
-    test.each([
-      ['light', undefined, 'hsl(0, 0%, 88%)', 'hsl(0, 0%, 45%)'],
-      ['dark', 'dark' as const, 'hsl(0, 0%, 24%)', 'hsl(0, 0%, 68%)'],
-    ])(
-      'inactive state uses the static chip defaults in the %s scheme',
-      (_label, colorScheme, borderColor, color) => {
-        themeProps = {
-          theme: { colors: { interaction: distinctiveGreen } },
-          colorScheme,
-        }
-
-        const { button, text } = renderToggleButton(false)
-
-        expect(button).toHaveStyle({ borderColor })
-        expect(text).toHaveStyle({ color })
-      }
-    )
-  })
-
-  describe('explicit chip token overrides', () => {
-    const explicitBorder = 'rgb(1, 2, 3)'
-    const explicitFill = 'rgb(4, 5, 6)'
-    const explicitText = 'rgb(7, 8, 9)'
-
-    beforeEach(() => {
-      themeProps = {
-        theme: {
-          colors: {
-            interaction: 'rgb(0, 255, 0)',
-            borderColorChipSelected: explicitBorder,
-            fillColorChipSelected: explicitFill,
-            textColorChipSelected: explicitText,
-          },
-        },
-      }
-    })
-
-    test('active state prefers explicit chip tokens over colors.interaction', () => {
-      const { button, text } = renderToggleButton(true)
-
-      expect(button).toHaveStyle({ borderColor: explicitBorder })
-      // fillColorChipSelected still passes through the chip-background hook's
-      // lightness transform, so the rendered fill isn't the raw override.
-      expect(button).toHaveStyle({ backgroundColor: 'hsl(210, 20%, 92%)' })
-      expect(text).toHaveStyle({ color: explicitText })
-    })
-  })
-})

package/src/hooks/use_interaction_tinted_background_color.ts

@@ -1,20 +0,0 @@
-import colorFunction from 'color'
-import { useMemo } from 'react'
-import { useTheme } from './use_theme'
-
-/**
- * Background color for non-chip surfaces (message bubbles, the Giphy badge)
- * that are tinted from `colors.interaction`. Unaffected by chip tokens.
- */
-export function useInteractionTintedBackgroundColor() {
-  const { colors } = useTheme()
-
-  return useMemo(
-    () =>
-      colorFunction(colors.interaction)
-        .hsl()
-        .lightness(colors.name === 'dark' ? 12 : 92)
-        .string(),
-    [colors.interaction, colors.name]
-  )
-}

package/src/hooks/use_selected_chip_background_color.ts

@@ -1,21 +0,0 @@
-import colorFunction from 'color'
-import { useMemo } from 'react'
-import { useTheme } from './use_theme'
-
-/**
- * Background color for a chip surface (filter button, reaction pill) in its
- * selected state. Falls back to `colors.interaction` when a consumer hasn't
- * supplied `colors.fillColorChipSelected`.
- */
-export function useSelectedChipBackgroundColor() {
-  const { colors, chip } = useTheme()
-
-  return useMemo(
-    () =>
-      colorFunction(colors.fillColorChipSelected ?? colors.interaction)
-        .hsl()
-        .lightness(chip.hslLightnessChipSelected)
-        .string(),
-    [colors.fillColorChipSelected, colors.interaction, chip.hslLightnessChipSelected]
-  )
-}