@urbint/cl 1.0.1

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Textarea } from './Textarea';
+import { VStack } from '../VStack';
+import { Text } from '../Text';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+/**
+ * Story container with design system tokens
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <View style={styles.container}>{children}</View>
+);
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Forms/Textarea',
+  component: Textarea,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['outline', 'filled'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    isInvalid: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    showCount: { control: 'boolean' },
+    rows: { control: 'number' },
+  },
+  args: {
+    placeholder: 'Enter your text here...',
+    variant: 'outline',
+    size: 'md',
+    rows: 4,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  render: (args) => <Textarea {...args} />,
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Textarea
+        label="Description"
+        placeholder="Enter a description..."
+      />
+      <Textarea
+        label="Comments"
+        placeholder="Leave a comment..."
+        helperText="Share your thoughts"
+      />
+    </VStack>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Textarea Variants</Text>
+      <Textarea
+        label="Outline"
+        variant="outline"
+        placeholder="Outline variant..."
+      />
+      <Textarea
+        label="Filled"
+        variant="filled"
+        placeholder="Filled variant..."
+      />
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Textarea Sizes</Text>
+      <Textarea
+        label="Small"
+        size="sm"
+        placeholder="Small textarea..."
+        rows={3}
+      />
+      <Textarea
+        label="Medium"
+        size="md"
+        placeholder="Medium textarea..."
+        rows={3}
+      />
+      <Textarea
+        label="Large"
+        size="lg"
+        placeholder="Large textarea..."
+        rows={3}
+      />
+    </VStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Textarea States</Text>
+      <Textarea
+        label="Normal"
+        placeholder="Normal state..."
+      />
+      <Textarea
+        label="Disabled"
+        placeholder="Disabled state..."
+        isDisabled
+        value="This textarea is disabled"
+      />
+      <Textarea
+        label="Read Only"
+        placeholder="Read only state..."
+        isReadOnly
+        value="This content is read-only"
+      />
+      <Textarea
+        label="Required"
+        placeholder="Required field..."
+        isRequired
+      />
+    </VStack>
+  ),
+};
+
+export const Validation: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Validation States</Text>
+      <Textarea
+        label="Valid Input"
+        placeholder="Enter text..."
+        value="This is valid content"
+        helperText="Looking good!"
+      />
+      <Textarea
+        label="Invalid Input"
+        placeholder="Enter text..."
+        isInvalid
+        errorMessage="This field is required"
+      />
+      <Textarea
+        label="With Error Message"
+        placeholder="Enter text..."
+        isInvalid
+        value="Too short"
+        errorMessage="Description must be at least 50 characters"
+      />
+    </VStack>
+  ),
+};
+
+export const CharacterCount: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Character Count</Text>
+      <Textarea
+        label="Bio"
+        placeholder="Tell us about yourself..."
+        showCount
+        maxLength={200}
+        helperText="Maximum 200 characters"
+      />
+      <Textarea
+        label="Tweet"
+        placeholder="What's happening?"
+        showCount
+        maxLength={280}
+        rows={3}
+      />
+    </VStack>
+  ),
+};
+
+export const DifferentRows: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Different Row Heights</Text>
+      <Textarea
+        label="2 Rows"
+        placeholder="Short text area..."
+        rows={2}
+      />
+      <Textarea
+        label="4 Rows"
+        placeholder="Medium text area..."
+        rows={4}
+      />
+      <Textarea
+        label="6 Rows"
+        placeholder="Large text area..."
+        rows={6}
+      />
+      <Textarea
+        label="8 Rows"
+        placeholder="Extra large text area..."
+        rows={8}
+      />
+    </VStack>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Feedback Form</Text>
+      <VStack space={spacing.md}>
+        <Textarea
+          label="Subject"
+          placeholder="Brief summary..."
+          rows={2}
+          isRequired
+        />
+        <Textarea
+          label="Description"
+          placeholder="Please provide details..."
+          rows={5}
+          isRequired
+          helperText="Be as specific as possible"
+        />
+        <Textarea
+          label="Additional Notes"
+          placeholder="Any other information..."
+          rows={3}
+          showCount
+          maxLength={500}
+        />
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const ContactForm: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Contact Form Message</Text>
+      <Textarea
+        label="Your Message"
+        placeholder="How can we help you today?"
+        rows={6}
+        isRequired
+        showCount
+        maxLength={1000}
+        helperText="We typically respond within 24 hours"
+      />
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,212 @@
+/**
+ * Textarea Component
+ * Multi-line text input
+ */
+
+import React, { forwardRef, useState } from 'react';
+import { View, TextInput, TextInputProps, Text, StyleSheet } from 'react-native';
+import { colors, spacing, borderRadius, typography } from '../../styles/tokens';
+
+export interface TextareaProps extends Omit<TextInputProps, 'style'> {
+  /** Textarea variant */
+  variant?: 'outline' | 'filled';
+  /** Textarea size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Label text */
+  label?: string;
+  /** Helper text */
+  helperText?: string;
+  /** Error message */
+  errorMessage?: string;
+  /** Is invalid */
+  isInvalid?: boolean;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Is read only */
+  isReadOnly?: boolean;
+  /** Is required */
+  isRequired?: boolean;
+  /** Number of rows */
+  rows?: number;
+  /** Show character count */
+  showCount?: boolean;
+}
+
+export const Textarea = forwardRef<TextInput, TextareaProps>(
+  (
+    {
+      variant = 'outline',
+      size = 'md',
+      label,
+      helperText,
+      errorMessage,
+      isInvalid = false,
+      isDisabled = false,
+      isReadOnly = false,
+      isRequired = false,
+      rows = 4,
+      showCount = false,
+      maxLength,
+      value = '',
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(value);
+
+    const handleFocus = (e: any) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: any) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const handleChange = (text: string) => {
+      setInternalValue(text);
+      props.onChangeText?.(text);
+    };
+
+    const hasError = isInvalid || !!errorMessage;
+    const currentLength = (value || internalValue).length;
+
+    return (
+      <View style={styles.container}>
+        {label && (
+          <Text style={[styles.label, isDisabled && styles.labelDisabled]}>
+            {label}
+            {isRequired && <Text style={styles.required}> *</Text>}
+          </Text>
+        )}
+        <View
+          style={[
+            styles.textareaWrapper,
+            styles[variant],
+            styles[size],
+            isFocused && styles.focused,
+            hasError && styles.error,
+            isDisabled && styles.disabled,
+            { minHeight: rows * 24 },
+          ]}
+        >
+          <TextInput
+            ref={ref}
+            style={[styles.textarea, styles[`${size}Textarea` as keyof typeof styles], isDisabled && styles.disabledText]}
+            editable={!isDisabled && !isReadOnly}
+            placeholderTextColor={colors.text.disabled}
+            multiline
+            numberOfLines={rows}
+            textAlignVertical="top"
+            maxLength={maxLength}
+            value={value || internalValue}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChangeText={handleChange}
+            {...props}
+          />
+        </View>
+        <View style={styles.footer}>
+          {(helperText || errorMessage) && (
+            <Text style={[styles.helperText, hasError && styles.errorText]}>
+              {errorMessage || helperText}
+            </Text>
+          )}
+          {showCount && maxLength && (
+            <Text style={styles.charCount}>
+              {currentLength}/{maxLength}
+            </Text>
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    marginBottom: spacing.base,
+  },
+  labelDisabled: {
+    color: colors.text.disabled,
+  },
+  required: {
+    color: colors.feedback.error.content,
+  },
+  textareaWrapper: {
+    borderRadius: borderRadius.md,
+  },
+  outline: {
+    borderWidth: 1,
+    borderColor: colors.border.default,
+    backgroundColor: colors.background.default,
+  },
+  filled: {
+    backgroundColor: colors.background.secondary,
+  },
+  sm: {
+    padding: spacing['2x'],
+  },
+  md: {
+    padding: spacing['3x'],
+  },
+  lg: {
+    padding: spacing['4x'],
+  },
+  focused: {
+    borderColor: colors.border.active,
+  },
+  error: {
+    borderColor: colors.border.danger,
+  },
+  disabled: {
+    backgroundColor: colors.background.secondary,
+    borderColor: colors.border.disabled,
+  },
+  textarea: {
+    color: colors.text.default,
+  },
+  smTextarea: {
+    fontSize: typography.fontSize.small,
+  },
+  mdTextarea: {
+    fontSize: typography.fontSize.body,
+  },
+  lgTextarea: {
+    fontSize: typography.fontSize.body,
+  },
+  disabledText: {
+    color: colors.text.disabled,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: spacing.base,
+  },
+  helperText: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+    flex: 1,
+  },
+  errorText: {
+    color: colors.feedback.error.content,
+  },
+  charCount: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+    marginLeft: spacing['2x'],
+  },
+});

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea, type TextareaProps } from './Textarea';
+