@helpwave/hightide-native 0.0.7 → 0.0.8

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "src"
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.0.5",
+    "@helpwave/hightide-design": "0.0.6",
     "@helpwave/hightide-utils": "0.0.5"
   },
   "peerDependencies": {

package/src/components/user-interaction/Switch.tsx

@@ -0,0 +1,177 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef
+} from 'react'
+import {
+  Animated,
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+import {
+  useControlledState,
+  useEventCallbackStabilizer
+} from '@helpwave/hightide-utils/hooks'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type { SwitchState } from '../../theme/types/components/switch'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import type { Color } from '../../theme/types/color'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
+
+const TRACK_WIDTH = 48
+const TRACK_HEIGHT = 28
+const TRACK_BORDER_WIDTH = 2
+const TRACK_PADDING = 4
+const THUMB_SIZE_INACTIVE = 12
+const THUMB_SIZE_ACTIVE = 16
+const THUMB_OFFSET_INACTIVE = 2
+const ANIMATION_DURATION_MS = 250
+
+const TRACK_INNER_WIDTH = TRACK_WIDTH - (TRACK_BORDER_WIDTH * 2) - (TRACK_PADDING * 2)
+const TRACK_INNER_HEIGHT = TRACK_HEIGHT - (TRACK_BORDER_WIDTH * 2) - (TRACK_PADDING * 2)
+const THUMB_OFFSET_ACTIVE = TRACK_INNER_WIDTH - THUMB_SIZE_ACTIVE
+const THUMB_TOP_INACTIVE = (TRACK_INNER_HEIGHT - THUMB_SIZE_INACTIVE) / 2
+const THUMB_TOP_ACTIVE = (TRACK_INNER_HEIGHT - THUMB_SIZE_ACTIVE) / 2
+
+export type SwitchProps = Omit<PressableProps, 'children' | 'style' | 'disabled'>
+  & Partial<FormFieldInteractionStates>
+  & Partial<FormFieldDataHandling<boolean>>
+  & {
+    initialValue?: boolean,
+    style?: StyleProp<ViewStyle>,
+    trackColorStyle?: StyleOverwrite<SwitchState, Color>,
+    borderColorStyle?: StyleOverwrite<SwitchState, Color>,
+    thumbColorStyle?: StyleOverwrite<SwitchState, Color>,
+  }
+
+export const Switch = ({
+  value: controlledValue,
+  initialValue = false,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  onValueChange,
+  onEditComplete,
+  style,
+  trackColorStyle,
+  borderColorStyle,
+  thumbColorStyle,
+  accessibilityLabel,
+  ...props
+}: SwitchProps) => {
+  const { theme } = useTheme()
+  const interactive = !disabled && !readOnly
+
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+
+  const onChangeWrapper = useCallback((nextValue: boolean) => {
+    onValueChangeStable(nextValue)
+    onEditCompleteStable(nextValue)
+  }, [onEditCompleteStable, onValueChangeStable])
+
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange: onChangeWrapper,
+    defaultValue: initialValue,
+  })
+
+  const state = useMemo((): SwitchState => ({
+    isActive: value,
+    isInvalid: invalid,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+  }), [disabled, invalid, readOnly, value])
+
+  const trackColor = useMemo(
+    () => theme.components.switch.trackColor(state, trackColorStyle),
+    [theme, state, trackColorStyle]
+  )
+  const borderColor = useMemo(
+    () => theme.components.switch.borderColor(state, borderColorStyle),
+    [theme, state, borderColorStyle]
+  )
+  const thumbColor = useMemo(
+    () => theme.components.switch.thumbColor(state, thumbColorStyle),
+    [theme, state, thumbColorStyle]
+  )
+
+  const progress = useRef(new Animated.Value(value ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: value ? 1 : 0,
+      duration: ANIMATION_DURATION_MS,
+      useNativeDriver: false,
+    }).start()
+  }, [progress, value])
+
+  const thumbSize = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [THUMB_SIZE_INACTIVE, THUMB_SIZE_ACTIVE],
+  })
+  const thumbTranslateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [THUMB_OFFSET_INACTIVE, THUMB_OFFSET_ACTIVE],
+  })
+  const thumbTop = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [THUMB_TOP_INACTIVE, THUMB_TOP_ACTIVE],
+  })
+
+  return (
+    <Pressable
+      {...props}
+      disabled={!interactive}
+      accessibilityRole="switch"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{
+        checked: value,
+        disabled,
+      }}
+      onPress={(event) => {
+        if (interactive) {
+          setValue((previous) => !previous)
+        }
+        props.onPress?.(event)
+      }}
+      style={style}
+    >
+      <View
+        style={{
+          width: TRACK_WIDTH,
+          height: TRACK_HEIGHT,
+          borderRadius: TRACK_HEIGHT / 2,
+          borderWidth: TRACK_BORDER_WIDTH,
+          borderColor,
+          backgroundColor: trackColor,
+          padding: TRACK_PADDING,
+          opacity: disabled ? 0.6 : 1,
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Animated.View
+            style={{
+              position: 'absolute',
+              top: thumbTop,
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: THUMB_SIZE_ACTIVE / 2,
+              backgroundColor: thumbColor,
+              transform: [{ translateX: thumbTranslateX }],
+            }}
+          />
+        </View>
+      </View>
+    </Pressable>
+  )
+}

package/src/components/user-interaction/index.ts

@@ -4,3 +4,4 @@ export * from './IconButton'
 export * from './Input'
 export * from './MultiSelect'
 export * from './Select'
+export * from './Switch'

package/src/theme/resolvers/index.ts

@@ -9,3 +9,4 @@ export * from './input'
 export * from './menu'
 export * from './multiSelect'
 export * from './select'
+export * from './switch'

package/src/theme/resolvers/switch.ts

@@ -0,0 +1,65 @@
+import type {
+  ComponentColorTokens,
+  HightideThemeTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '../types/color'
+import type {
+  SwitchState,
+  SwitchTheme
+} from '../types/components/switch'
+import { createValueResolver } from '../types/resolver'
+
+export type CreateSwitchThemeOptions = {
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
+}
+
+export const createSwitchTheme = ({
+  semantic,
+  component,
+}: CreateSwitchThemeOptions): SwitchTheme => {
+  const resolveState = (state: SwitchState) => {
+    const trackInactive = state.isDisabled
+      ? semantic.disabled
+      : component.switch.track.inactive
+    const trackActive = state.isDisabled
+      ? semantic.disabled
+      : component.switch.track.active
+
+    const trackColor = state.isActive ? trackActive : trackInactive
+
+    const borderColor = state.isDisabled
+      ? semantic.disabled
+      : state.isInvalid
+        ? semantic.negative
+        : state.isActive
+          ? trackActive
+          : component.switch.borderColor
+
+    const thumbColor = state.isDisabled
+      ? semantic.onDisabled
+      : state.isActive
+        ? component.switch.thumb.active
+        : component.switch.thumb.inactive
+
+    return {
+      trackColor,
+      borderColor,
+      thumbColor,
+    }
+  }
+
+  return {
+    trackColor: createValueResolver((state) => resolveState(state).trackColor),
+    borderColor: createValueResolver((state) => resolveState(state).borderColor),
+    thumbColor: createValueResolver((state) => resolveState(state).thumbColor),
+  }
+}
+
+export const createSwitchThemeFromDesign = (theme: DesignTokensTheme): SwitchTheme => {
+  return createSwitchTheme({
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
+  })
+}

package/src/theme/themes/createHightideTheme.ts

@@ -8,6 +8,7 @@ import { createButtonThemeFromDesign } from '../resolvers/button'
 import { createChatThemeFromDesign } from '../resolvers/chat'
 import { createCheckboxThemeFromDesign } from '../resolvers/checkbox'
 import { createChipThemeFromDesign } from '../resolvers/chip'
+import { createSwitchThemeFromDesign } from '../resolvers/switch'
 import { createIconButtonThemeFromDesign } from '../resolvers/iconButton'
 import { createInputThemeFromDesign } from '../resolvers/input'
 import { createMenuThemeFromDesign } from '../resolvers/menu'
@@ -47,6 +48,7 @@ export const createHightideTheme = (tokens: HightideThemeTokens): HightideTheme
     iconButton: createIconButtonThemeFromDesign(tokens),
     chip: createChipThemeFromDesign(tokens),
     checkbox: createCheckboxThemeFromDesign(tokens),
+    switch: createSwitchThemeFromDesign(tokens),
     input: createInputThemeFromDesign(tokens),
     select: createSelectThemeFromDesign(tokens),
     multiSelect: createMultiSelectThemeFromDesign(tokens),

package/src/theme/types/components/hightide.ts

@@ -9,6 +9,7 @@ import type { InputTheme } from './input'
 import type { MenuTheme } from './menu'
 import type { MultiSelectTheme } from './multiSelect'
 import type { SelectTheme } from './select'
+import type { SwitchTheme } from './switch'
 
 export type ColoringDefinition = {
   color: Color,
@@ -35,6 +36,7 @@ export type HightideComponentThemes = {
   iconButton: IconButtonTheme,
   chip: ChipTheme,
   checkbox: CheckboxTheme,
+  switch: SwitchTheme,
   input: InputTheme,
   select: SelectTheme,
   multiSelect: MultiSelectTheme,

package/src/theme/types/components/index.ts

@@ -9,3 +9,4 @@ export * from './input'
 export * from './menu'
 export * from './multiSelect'
 export * from './select'
+export * from './switch'

package/src/theme/types/components/switch.ts

@@ -0,0 +1,15 @@
+import type { Color } from '../color'
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '../resolver'
+
+export type SwitchState = InteractionState & {
+  isActive?: boolean,
+}
+
+export type SwitchTheme = {
+  trackColor: StyleResolverFunction<SwitchState, Color>,
+  borderColor: StyleResolverFunction<SwitchState, Color>,
+  thumbColor: StyleResolverFunction<SwitchState, Color>,
+}