New component library based on ALF (#2459)

* Install on native as well

* Add button and link components

* Comments

* Use new prop

* Add some form elements

* Add labels to input

* Fix line height, add suffix

* Date inputs

* Autofill styles

* Clean up InputDate types

* Improve types for InputText, value handling

* Enforce a11y props on buttons

* Add Dialog, Portal

* Dialog contents

* Native dialog

* Clean up

* Fix animations

* Improvements to web modal, exiting still broken

* Clean up dialog types

* Add Prompt, Dialog refinement, mobile refinement

* Integrate new design tokens, reorg storybook

* Button colors

* Dim mode

* Reorg

* Some styles

* Toggles

* Improve a11y

* Autosize dialog, handle max height, Dialog.ScrolLView not working

* Try to use BottomSheet's own APIs

* Scrollable dialogs

* Add web shadow

* Handle overscroll

* Styles

* Dialog text input

* Shadows

* Button focus states

* Button pressed states

* Gradient poc

* Gradient colors and hovers

* Add hrefAttrs to Link

* Some more a11y

* Toggle invalid states

* Update dialog descriptions for demo

* Icons

* WIP Toggle cleanup

* Refactor toggle to not rely on immediate children

* Make Toggle controlled

* Clean up Toggles storybook

* ToggleButton styles

* Improve a11y labels

* ToggleButton hover darkmode

* Some i18n

* Refactor input

* Allow extension of input

* Remove old input

* Improve icons, add CalendarDays

* Refactor DateField, web done

* Add label example

* Clean up old InputDate, DateField android, text area example

* Consistent imports

* Button context, icons

* Add todo

* Add closeAllDialogs control

* Alignment

* Expand color palette

* Hitslops, add shortcut to Storybook in dev

* Fix multiline on ios

* Mark dialog close button as unused

1 files changed, 0 insertions, 204 deletions

diff --git a/src/view/com/Button.tsx b/src/view/com/Button.tsx
deleted file mode 100644
index d1f70d4ae..000000000
--- a/src/view/com/Button.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import React from 'react'
-import {Pressable, Text, PressableProps, TextProps} from 'react-native'
-import * as tokens from '#/alf/tokens'
-import {atoms} from '#/alf'
-
-export type ButtonType =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'positive'
-  | 'negative'
-export type ButtonSize = 'small' | 'large'
-
-export type VariantProps = {
-  type?: ButtonType
-  size?: ButtonSize
-}
-type ButtonState = {
-  pressed: boolean
-  hovered: boolean
-  focused: boolean
-}
-export type ButtonProps = Omit<PressableProps, 'children'> &
-  VariantProps & {
-    children:
-      | ((props: {
-          state: ButtonState
-          type?: ButtonType
-          size?: ButtonSize
-        }) => React.ReactNode)
-      | React.ReactNode
-      | string
-  }
-export type ButtonTextProps = TextProps & VariantProps
-
-export function Button({children, style, type, size, ...rest}: ButtonProps) {
-  const {baseStyles, hoverStyles} = React.useMemo(() => {
-    const baseStyles = []
-    const hoverStyles = []
-
-    switch (type) {
-      case 'primary':
-        baseStyles.push({
-          backgroundColor: tokens.color.blue_500,
-        })
-        break
-      case 'secondary':
-        baseStyles.push({
-          backgroundColor: tokens.color.gray_200,
-        })
-        hoverStyles.push({
-          backgroundColor: tokens.color.gray_100,
-        })
-        break
-      default:
-    }
-
-    switch (size) {
-      case 'large':
-        baseStyles.push(
-          atoms.py_md,
-          atoms.px_xl,
-          atoms.rounded_md,
-          atoms.gap_sm,
-        )
-        break
-      case 'small':
-        baseStyles.push(
-          atoms.py_sm,
-          atoms.px_md,
-          atoms.rounded_sm,
-          atoms.gap_xs,
-        )
-        break
-      default:
-    }
-
-    return {
-      baseStyles,
-      hoverStyles,
-    }
-  }, [type, size])
-
-  const [state, setState] = React.useState({
-    pressed: false,
-    hovered: false,
-    focused: false,
-  })
-
-  const onPressIn = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      pressed: true,
-    }))
-  }, [setState])
-  const onPressOut = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      pressed: false,
-    }))
-  }, [setState])
-  const onHoverIn = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      hovered: true,
-    }))
-  }, [setState])
-  const onHoverOut = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      hovered: false,
-    }))
-  }, [setState])
-  const onFocus = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      focused: true,
-    }))
-  }, [setState])
-  const onBlur = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      focused: false,
-    }))
-  }, [setState])
-
-  return (
-    <Pressable
-      {...rest}
-      style={state => [
-        atoms.flex_row,
-        atoms.align_center,
-        ...baseStyles,
-        ...(state.hovered ? hoverStyles : []),
-        typeof style === 'function' ? style(state) : style,
-      ]}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onHoverIn={onHoverIn}
-      onHoverOut={onHoverOut}
-      onFocus={onFocus}
-      onBlur={onBlur}>
-      {typeof children === 'string' ? (
-        <ButtonText type={type} size={size}>
-          {children}
-        </ButtonText>
-      ) : typeof children === 'function' ? (
-        children({state, type, size})
-      ) : (
-        children
-      )}
-    </Pressable>
-  )
-}
-
-export function ButtonText({
-  children,
-  style,
-  type,
-  size,
-  ...rest
-}: ButtonTextProps) {
-  const textStyles = React.useMemo(() => {
-    const base = []
-
-    switch (type) {
-      case 'primary':
-        base.push({color: tokens.color.white})
-        break
-      case 'secondary':
-        base.push({
-          color: tokens.color.gray_700,
-        })
-        break
-      default:
-    }
-
-    switch (size) {
-      case 'small':
-        base.push(atoms.text_sm, {paddingBottom: 1})
-        break
-      case 'large':
-        base.push(atoms.text_md, {paddingBottom: 1})
-        break
-      default:
-    }
-
-    return base
-  }, [type, size])
-
-  return (
-    <Text
-      {...rest}
-      style={[
-        atoms.flex_1,
-        atoms.font_semibold,
-        atoms.text_center,
-        ...textStyles,
-        style,
-      ]}>
-      {children}
-    </Text>
-  )
-}