Migrate to @bsky.app/alf package (#9030)

* Add storybook shortcut in dev

* Migrate to alg pkg

* Migrate font_bold to new font_semi_bold

* Migrate font_heavy to font_bold

* Fix old theme refs

* Remove leading util

* Bump

* Revert "Add storybook shortcut in dev"

This reverts commit 7a86195c77fb5d449c7782e64ebabb6addfab919.

* Remove alf script

* Adjust font scale

* Bump

* Bump pkg

* Migrate values from conflicts

* Create default themes outside react

* Use built-in alf utils

* Migrate old font styles

* Remove unused tokens

* Move theme creation to more appropriate file

* Update button colors

* Adjust TextField colors, line heights

src/alf/util/__tests__/colors.test.ts

@@ -1,12 +1,7 @@
 import {jest} from '@jest/globals'
 
-import {logger} from '#/logger'
 import {transparentifyColor} from '../colorGeneration'
 
-jest.mock('#/logger', () => ({
-  logger: {warn: jest.fn()},
-}))
-
 describe('transparentifyColor', () => {
   beforeEach(() => {
     jest.clearAllMocks()
@@ -41,8 +36,5 @@ describe('transparentifyColor', () => {
     const unsupported = 'blue'
     const result = transparentifyColor(unsupported, 0.5)
     expect(result).toBe(unsupported)
-    expect(logger.warn).toHaveBeenCalledWith(
-      `Could not make '${unsupported}' transparent`,
-    )
   })
 })

src/alf/util/colorGeneration.ts

@@ -1,49 +1,8 @@
-import {logger} from '#/logger'
+import {utils} from '@bsky.app/alf'
 
 export const BLUE_HUE = 211
-export const RED_HUE = 346
-export const GREEN_HUE = 152
 
 /**
- * Smooth progression of lightness "stops" for generating HSL colors.
+ * @deprecated use `utils.alpha` from `@bsky.app/alf` instead
  */
-export const COLOR_STOPS = [
-  0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1,
-]
-
-export function generateScale(start: number, end: number) {
-  const range = end - start
-  return COLOR_STOPS.map(stop => {
-    return start + range * stop
-  })
-}
-
-export const defaultScale = generateScale(6, 100)
-// dim shifted 6% lighter
-export const dimScale = generateScale(12, 100)
-
-export function transparentifyColor(color: string, alpha: number) {
-  if (color.startsWith('hsl(')) {
-    return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})`
-  } else if (color.startsWith('rgb(')) {
-    return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})`
-  } else if (color.startsWith('#')) {
-    if (color.length === 7) {
-      const alphaHex = Math.round(alpha * 255).toString(16)
-      // Per MDN: If there is only one number, it is duplicated: e means ee
-      // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
-      return color.slice(0, 7) + alphaHex.padStart(2, alphaHex)
-    } else if (color.length === 4) {
-      // convert to 6-digit hex before adding alpha
-      const [r, g, b] = color.slice(1).split('')
-      const alphaHex = Math.round(alpha * 255).toString(16)
-      return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart(
-        2,
-        alphaHex,
-      )}`
-    }
-  } else {
-    logger.warn(`Could not make '${color}' transparent`)
-  }
-  return color
-}
+export const transparentifyColor = utils.alpha

src/alf/util/platform.ts

@@ -1,62 +1 @@
-import {Platform} from 'react-native'
-
-import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
-
-/**
- * Identity function on web. Returns nothing on other platforms.
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
-export function web(value: any) {
-  if (isWeb) {
-    return value
-  }
-}
-
-/**
- * Identity function on iOS. Returns nothing on other platforms.
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
-export function ios(value: any) {
-  if (isIOS) {
-    return value
-  }
-}
-
-/**
- * Identity function on Android. Returns nothing on other platforms..
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
-export function android(value: any) {
-  if (isAndroid) {
-    return value
-  }
-}
-
-/**
- * Identity function on iOS and Android. Returns nothing on web.
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
-export function native(value: any) {
-  if (isNative) {
-    return value
-  }
-}
-
-/**
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
-export const platform = Platform.select
+export {android, ios, native, platform, web} from '@bsky.app/alf'

src/alf/util/systemUI.ts

@@ -1,7 +1,7 @@
 import * as SystemUI from 'expo-system-ui'
+import {type Theme} from '@bsky.app/alf'
 
 import {isAndroid} from '#/platform/detection'
-import {type Theme} from '../types'
 
 export function setSystemUITheme(themeType: 'theme' | 'lightbox', t: Theme) {
   if (isAndroid) {

src/alf/util/themeSelector.ts

@@ -1,14 +1,3 @@
-import {type ThemeName} from '#/alf/types'
+import {utils} from '@bsky.app/alf'
 
-export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
-  switch (name) {
-    case 'light':
-      return options.light
-    case 'dark':
-      return options.dark || options.dim
-    case 'dim':
-      return options.dim || options.dark
-    default:
-      throw new Error(`select(theme, options) received unknown theme ${name}`)
-  }
-}
+export const select = utils.select

src/alf/util/useColorModeTheme.ts

@@ -1,10 +1,10 @@
 import React from 'react'
 import {type ColorSchemeName, useColorScheme} from 'react-native'
+import {type ThemeName} from '@bsky.app/alf'
 
 import {isWeb} from '#/platform/detection'
 import {useThemePrefs} from '#/state/shell'
 import {dark, dim, light} from '#/alf/themes'
-import {type ThemeName} from '#/alf/types'
 
 export function useColorModeTheme(): ThemeName {
   const theme = useThemeName()