From 2f32e77cc04fc43d341a45826c77622a7fbfb3be Mon Sep 17 00:00:00 2001 From: Rafael Youakeem Date: Wed, 18 Sep 2024 10:29:26 +0200 Subject: [PATCH] Move `useHighlightAnimation` to `ui` package --- .../src/components/Combobox/Combobox.tsx | 11 ++++++-- .../DebugDialog/CopyToClipboard.tsx | 3 +- .../src/components/InputDay/InputDay.tsx | 3 +- .../src/components/InputRadio/InputRadio.tsx | 3 +- .../components/InputSelect/InputSelect.tsx | 10 +++++-- .../RadioOptionList/RadioOptionList.tsx | 3 +- .../components/StepperInput/StepperInput.tsx | 3 +- .../src/components/TextField/TextField.tsx | 11 ++++++-- .../src/components/ToggleCard/ToggleCard.tsx | 3 +- packages/ui/src/index.ts | 1 + .../ui}/src/utils/useHighlightAnimation.ts | 28 +++++++++---------- 11 files changed, 47 insertions(+), 32 deletions(-) rename {apps/store => packages/ui}/src/utils/useHighlightAnimation.ts (97%) diff --git a/apps/store/src/components/Combobox/Combobox.tsx b/apps/store/src/components/Combobox/Combobox.tsx index c9d7acd574..2081646375 100644 --- a/apps/store/src/components/Combobox/Combobox.tsx +++ b/apps/store/src/components/Combobox/Combobox.tsx @@ -1,8 +1,15 @@ import clsx from 'clsx' import { useCombobox } from 'downshift' import { useState, useMemo, useDeferredValue, useId } from 'react' -import { ChevronIcon, CrossIconSmall, Text, xStack, theme, WarningTriangleIcon } from 'ui' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' +import { + ChevronIcon, + CrossIconSmall, + Text, + xStack, + theme, + WarningTriangleIcon, + useHighlightAnimation, +} from 'ui' import { wrapper, wrapperExpanded, diff --git a/apps/store/src/components/DebugDialog/CopyToClipboard.tsx b/apps/store/src/components/DebugDialog/CopyToClipboard.tsx index 4fc6b921a3..b60e8f5f47 100644 --- a/apps/store/src/components/DebugDialog/CopyToClipboard.tsx +++ b/apps/store/src/components/DebugDialog/CopyToClipboard.tsx @@ -2,8 +2,7 @@ import styled from '@emotion/styled' import { useEffect, useState } from 'react' -import { Text, theme } from 'ui' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' +import { Text, theme, useHighlightAnimation } from 'ui' export const CopyToClipboard = (props: { label: string; children: string }) => { const { highlight, animationProps } = useHighlightAnimation() diff --git a/apps/store/src/components/InputDay/InputDay.tsx b/apps/store/src/components/InputDay/InputDay.tsx index dc15566cf2..12ec8e41ec 100644 --- a/apps/store/src/components/InputDay/InputDay.tsx +++ b/apps/store/src/components/InputDay/InputDay.tsx @@ -4,13 +4,12 @@ import { sv } from 'date-fns/locale' import { useTranslation } from 'next-i18next' import { type CSSProperties, startTransition, useId, useState } from 'react' import { useInput, DayPicker, type SelectSingleEventHandler } from 'react-day-picker' -import { ChevronIcon, Text, LockIcon, theme } from 'ui' +import { ChevronIcon, Text, LockIcon, theme, useHighlightAnimation } from 'ui' import { LoadingDots } from '@/components/LoadingDots/LoadingDots' import { convertToDate } from '@/utils/date' import { Language } from '@/utils/l10n/types' import { useCurrentLocale } from '@/utils/l10n/useCurrentLocale' import { useFormatter } from '@/utils/useFormatter' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' import { trigger, label, iconWrapper, chevronIcon, popoverContent, dayPicker } from './InputDay.css' import 'react-day-picker/dist/style.css' diff --git a/apps/store/src/components/InputRadio/InputRadio.tsx b/apps/store/src/components/InputRadio/InputRadio.tsx index 1fd9a42431..463d054186 100644 --- a/apps/store/src/components/InputRadio/InputRadio.tsx +++ b/apps/store/src/components/InputRadio/InputRadio.tsx @@ -9,9 +9,8 @@ import { type ComponentProps, type ComponentPropsWithoutRef, } from 'react' -import { Text } from 'ui' +import { Text, useHighlightAnimation } from 'ui' import { RadioIndicatorIcon } from '@/features/priceCalculator/RadioIndicatorIcon' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' import { horizontalRadioGroup, card, item, paddedItem, radioButton } from './InputRadio.css' type Option = { label: string; value: string; autoFocus?: boolean } diff --git a/apps/store/src/components/InputSelect/InputSelect.tsx b/apps/store/src/components/InputSelect/InputSelect.tsx index 63fa91775e..c4891ede0e 100644 --- a/apps/store/src/components/InputSelect/InputSelect.tsx +++ b/apps/store/src/components/InputSelect/InputSelect.tsx @@ -3,8 +3,14 @@ import { assignInlineVars } from '@vanilla-extract/dynamic' import { clsx } from 'clsx' import { type ChangeEventHandler, useId } from 'react' -import { ChevronIcon, InputBase, type InputBaseProps, type UIColorKeys, getColor } from 'ui' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' +import { + ChevronIcon, + InputBase, + type InputBaseProps, + type UIColorKeys, + getColor, + useHighlightAnimation, +} from 'ui' import { chevronIcon, inputLabel, diff --git a/apps/store/src/components/RadioOptionList/RadioOptionList.tsx b/apps/store/src/components/RadioOptionList/RadioOptionList.tsx index d5003e0515..ee96ebb5f2 100644 --- a/apps/store/src/components/RadioOptionList/RadioOptionList.tsx +++ b/apps/store/src/components/RadioOptionList/RadioOptionList.tsx @@ -2,9 +2,8 @@ import styled from '@emotion/styled' import * as RadioGroup from '@radix-ui/react-radio-group' import type { MouseEventHandler } from 'react' import { type ComponentProps } from 'react' -import { Text, theme } from 'ui' +import { Text, theme, useHighlightAnimation } from 'ui' import { Pillow } from '@/components/Pillow/Pillow' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' type RootProps = RadioGroup.RadioGroupProps diff --git a/apps/store/src/components/StepperInput/StepperInput.tsx b/apps/store/src/components/StepperInput/StepperInput.tsx index 3fce4f2181..06af550703 100644 --- a/apps/store/src/components/StepperInput/StepperInput.tsx +++ b/apps/store/src/components/StepperInput/StepperInput.tsx @@ -8,8 +8,7 @@ import { useState, useId, } from 'react' -import { MinusIcon, PlusIcon, xStack, yStack } from 'ui' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' +import { MinusIcon, PlusIcon, useHighlightAnimation, xStack, yStack } from 'ui' import { outerWrapper, select, inputLabel, stepButton } from './StepperInput.css' export type StepperInputProps = { diff --git a/apps/store/src/components/TextField/TextField.tsx b/apps/store/src/components/TextField/TextField.tsx index 888139b1ef..a77d3a6c70 100644 --- a/apps/store/src/components/TextField/TextField.tsx +++ b/apps/store/src/components/TextField/TextField.tsx @@ -4,8 +4,15 @@ import clsx from 'clsx' import type { ChangeEventHandler, InputHTMLAttributes, MouseEventHandler, ReactNode } from 'react' import { useId, useRef, useState } from 'react' import { sprinkles } from 'ui/src/theme/sprinkles.css' -import { LockIcon, Text, WarningTriangleIcon, theme, yStack, CrossIcon } from 'ui' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' +import { + LockIcon, + Text, + WarningTriangleIcon, + theme, + yStack, + CrossIcon, + useHighlightAnimation, +} from 'ui' import { deleteButton, input, diff --git a/apps/store/src/components/ToggleCard/ToggleCard.tsx b/apps/store/src/components/ToggleCard/ToggleCard.tsx index 9ae028bfee..801695b1b2 100644 --- a/apps/store/src/components/ToggleCard/ToggleCard.tsx +++ b/apps/store/src/components/ToggleCard/ToggleCard.tsx @@ -1,9 +1,8 @@ import type { ReactNode } from 'react' import { useId } from 'react' -import { Space } from 'ui' +import { Space, useHighlightAnimation } from 'ui' import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex' import { Switch, type SwitchProps } from '@/components/Switch' -import { useHighlightAnimation } from '@/utils/useHighlightAnimation' import { wrapper, checkboxHeader, labelText } from './ToggleCard.css' type Props = SwitchProps & { diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 58f606cb4f..14b47ea50f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -26,6 +26,7 @@ export * from './components/Tabs/Tabs' export { responsiveVariants } from './utils/responsiveVariants/responsiveVariants' export * from './utils/responsiveVariants/repsonsiveVariants.types' export { visuallyHidden } from './utils/visuallyHidden.css' +export { useHighlightAnimation } from './utils/useHighlightAnimation' export * from './icons' diff --git a/apps/store/src/utils/useHighlightAnimation.ts b/packages/ui/src/utils/useHighlightAnimation.ts similarity index 97% rename from apps/store/src/utils/useHighlightAnimation.ts rename to packages/ui/src/utils/useHighlightAnimation.ts index d1cc9dee76..460a50cbb3 100644 --- a/apps/store/src/utils/useHighlightAnimation.ts +++ b/packages/ui/src/utils/useHighlightAnimation.ts @@ -1,12 +1,25 @@ 'use client' import { type KeyboardEvent, useCallback, useRef, useState, useEffect } from 'react' -import { theme } from 'ui' +import { theme } from '../theme/theme' const SIGNAL_GREEN_FILL_HSLA = theme.colors.signalGreenFill .replace('hsl', 'hsla') .replace(')', ', 0.99)') +const EXCLUDE_SET = new Set([ + 'Tab', + 'Enter', + 'ArrowDown', + 'ArrowUp', + 'ArrowRight', + 'ArrowLeft', + 'Shift', + 'Alt', + 'Meta', + 'Control', +]) + export function useHighlightAnimation() { const ref = useRef(null) const [backgroundColor, setBackgroundColor] = useState(theme.colors.translucent1) @@ -44,16 +57,3 @@ export function useHighlightAnimation() { return { highlight, animationProps: { ref } } as const } - -const EXCLUDE_SET = new Set([ - 'Tab', - 'Enter', - 'ArrowDown', - 'ArrowUp', - 'ArrowRight', - 'ArrowLeft', - 'Shift', - 'Alt', - 'Meta', - 'Control', -])