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
2024-01-18 20:28:04 -06:00 · 2024-01-18 20:28:04 -06:00 · 66b8774ecb
commit 66b8774ecb
parent 9cbd3c0937
60 changed files with 4683 additions and 968 deletions
--- a/src/components/forms/InputGroup.tsx
+++ b/src/components/forms/InputGroup.tsx
@ -0,0 +1,43 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms, useTheme} from '#/alf'
+
+/**
+ * NOT FINISHED, just here as a reference
+ */
+export function InputGroup(props: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+  const children = React.Children.toArray(props.children)
+  const total = children.length
+  return (
+    <View style={[atoms.w_full]}>
+      {children.map((child, i) => {
+        return React.isValidElement(child) ? (
+          <React.Fragment key={i}>
+            {i > 0 ? (
+              <View
+                style={[atoms.border_b, {borderColor: t.palette.contrast_500}]}
+              />
+            ) : null}
+            {React.cloneElement(child, {
+              // @ts-ignore
+              style: [
+                ...(Array.isArray(child.props?.style)
+                  ? child.props.style
+                  : [child.props.style || {}]),
+                {
+                  borderTopLeftRadius: i > 0 ? 0 : undefined,
+                  borderTopRightRadius: i > 0 ? 0 : undefined,
+                  borderBottomLeftRadius: i < total - 1 ? 0 : undefined,
+                  borderBottomRightRadius: i < total - 1 ? 0 : undefined,
+                  borderBottomWidth: i < total - 1 ? 0 : undefined,
+                },
+              ],
+            })}
+          </React.Fragment>
+        ) : null
+      })}
+    </View>
+  )
+}