feat(monorepo): migrate to typescript monorepo

2025-11-07 17:09:29 +02:00
parent 3e09956f05
commit 075a388ccb
745 changed files with 2341 additions and 5082 deletions
@@ -0,0 +1,73 @@
+import React, { useMemo } from "react";
+
+import { IconProps } from "@tamagui/helpers-icon";
+import { ColorTokens, GetProps, Input as TamaguiInput, Label, SizeTokens, styled, XStack, YStack } from "tamagui";
+
+import { Caption } from "@/ui/components/typography";
+
+const StyledInput = styled(TamaguiInput, {
+    size: "$large",
+    flex: 1,
+    borderWidth: 0,
+    placeholderTextColor: "$gray8",
+    backgroundColor: "transparent",
+});
+
+export type InputProps = GetProps<typeof StyledInput> & {
+    label?: string;
+    caption?: string;
+    error?: string;
+    leadingAdornment?: React.ComponentType<IconProps & { size?: SizeTokens; color?: ColorTokens }>;
+    trailingAdornment?: React.ReactNode;
+    onChangeText?: (text: string) => void;
+    id?: string;
+};
+
+export const Input = (props: InputProps) => {
+    const { label, caption, error, leadingAdornment, trailingAdornment, onChangeText, id, ...rest } = props;
+
+    const isInvalid = !!error;
+    const leadingAdornmentComponent = useMemo(() => {
+        return leadingAdornment ? (
+            <XStack paddingLeft="$3" style={{ justifyContent: "center", alignItems: "center" }}>
+                {React.createElement(leadingAdornment, {
+                    size: "$1",
+                    color: "$gray9",
+                })}
+            </XStack>
+        ) : undefined;
+    }, [leadingAdornment]);
+
+    return (
+        <YStack gap="$1">
+            <YStack>
+                {label && (
+                    <Label htmlFor={id} fontWeight="bold" color={isInvalid ? "$red9" : undefined}>
+                        {label}
+                    </Label>
+                )}
+
+                <XStack
+                    backgroundColor="$gray4"
+                    alignItems="center"
+                    borderRadius="$4"
+                    borderWidth="$0.5"
+                    borderColor={isInvalid ? "$red9" : "transparent"}
+                    focusStyle={{
+                        borderColor: "$accent8",
+                    }}
+                    pressStyle={{
+                        borderColor: "$accent8",
+                    }}
+                >
+                    {leadingAdornmentComponent}
+                    <StyledInput id={id} onChangeText={onChangeText} {...rest} />
+                    {trailingAdornment}
+                </XStack>
+            </YStack>
+
+            {caption && !isInvalid && <Caption>{caption}</Caption>}
+            {isInvalid && error && <Caption color="$red9">{error}</Caption>}
+        </YStack>
+    );
+};