@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/drawer/Drawer.tsx

@@ -0,0 +1,228 @@
+import React from 'react'
+import { View, Text, Pressable, Modal, ScrollView, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+export interface DrawerProps extends ViewProps {
+  /** Whether the drawer is open */
+  isOpen: boolean
+  /** Callback when drawer should close */
+  onClose: () => void
+  /** Placement of the drawer */
+  placement?: DrawerPlacement
+  /** Size of the drawer */
+  size?: DrawerSize
+  /** Whether clicking the backdrop closes the drawer */
+  closeOnOverlayClick?: boolean
+  /** Whether to show the close button */
+  showCloseButton?: boolean
+  /** Title for the drawer header */
+  title?: string
+  /** Additional className for the drawer content */
+  className?: string
+  children?: React.ReactNode
+}
+
+const sizeStyles: Record<DrawerPlacement, Record<DrawerSize, string>> = {
+  left: {
+    sm: 'w-64',
+    md: 'w-80',
+    lg: 'w-96',
+    xl: 'w-[480px]',
+    full: 'w-full',
+  },
+  right: {
+    sm: 'w-64',
+    md: 'w-80',
+    lg: 'w-96',
+    xl: 'w-[480px]',
+    full: 'w-full',
+  },
+  top: {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-64',
+    xl: 'h-96',
+    full: 'h-full',
+  },
+  bottom: {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-64',
+    xl: 'h-96',
+    full: 'h-full',
+  },
+}
+
+const placementStyles: Record<DrawerPlacement, string> = {
+  left: 'left-0 top-0 bottom-0 h-full',
+  right: 'right-0 top-0 bottom-0 h-full',
+  top: 'top-0 left-0 right-0 w-full',
+  bottom: 'bottom-0 left-0 right-0 w-full',
+}
+
+/**
+ * Drawer component for side panel overlays.
+ *
+ * @example
+ * <Drawer
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Settings"
+ *   placement="right"
+ * >
+ *   <DrawerBody>
+ *     <Text>Drawer content</Text>
+ *   </DrawerBody>
+ * </Drawer>
+ */
+export function Drawer({
+  isOpen,
+  onClose,
+  placement = 'right',
+  size = 'md',
+  closeOnOverlayClick = true,
+  showCloseButton = true,
+  title,
+  className,
+  children,
+  ...props
+}: DrawerProps) {
+  if (!isOpen) return null
+
+  const handleOverlayPress = () => {
+    if (closeOnOverlayClick) {
+      onClose()
+    }
+  }
+
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <View className="flex-1">
+        {/* Backdrop */}
+        <Pressable
+          onPress={handleOverlayPress}
+          className="absolute inset-0 bg-black/50"
+        />
+
+        {/* Drawer Panel */}
+        <View
+          className={cn(
+            'absolute bg-surface-elevated shadow-2xl',
+            placementStyles[placement],
+            sizeStyles[placement][size],
+            className
+          )}
+          accessibilityRole={'dialog' as any}
+          {...props}
+        >
+          {/* Header */}
+          {(title || showCloseButton) && (
+            <View className="flex-row items-center justify-between px-4 py-3 border-b border-border-default">
+              {title && (
+                <Text className="text-lg font-semibold text-text-primary">
+                  {title}
+                </Text>
+              )}
+              {showCloseButton && (
+                <Pressable
+                  onPress={onClose}
+                  className="p-2 -m-2 rounded-full web:hover:bg-interactive-hover"
+                  accessibilityLabel="Close drawer"
+                >
+                  <Text className="text-text-secondary text-xl">×</Text>
+                </Pressable>
+              )}
+            </View>
+          )}
+
+          {/* Content */}
+          <View className="flex-1">
+            {children}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  )
+}
+
+export interface DrawerHeaderProps extends ViewProps {
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Header section for the drawer.
+ */
+export function DrawerHeader({ className, children, ...props }: DrawerHeaderProps) {
+  return (
+    <View
+      className={cn('px-4 py-3 border-b border-border-default', className)}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}
+
+export interface DrawerBodyProps extends ViewProps {
+  /** Whether the body should scroll */
+  scrollable?: boolean
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Body/content section for the drawer.
+ */
+export function DrawerBody({ scrollable = true, className, children, ...props }: DrawerBodyProps) {
+  if (scrollable) {
+    return (
+      <ScrollView
+        className={cn('flex-1 p-4', className)}
+        {...props}
+      >
+        {children}
+      </ScrollView>
+    )
+  }
+
+  return (
+    <View className={cn('flex-1 p-4', className)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+export interface DrawerFooterProps extends ViewProps {
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Footer section for the drawer, typically for action buttons.
+ */
+export function DrawerFooter({ className, children, ...props }: DrawerFooterProps) {
+  return (
+    <View
+      className={cn(
+        'flex-row items-center justify-end gap-3',
+        'px-4 py-3 border-t border-border-default',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}

package/src/components/ui/drawer/index.ts

@@ -0,0 +1,9 @@
+export { Drawer, DrawerHeader, DrawerBody, DrawerFooter } from './Drawer'
+export type {
+  DrawerProps,
+  DrawerHeaderProps,
+  DrawerBodyProps,
+  DrawerFooterProps,
+  DrawerPlacement,
+  DrawerSize,
+} from './Drawer'

package/src/components/ui/form-field/FormField.stories.tsx

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text, TextInput } from 'react-native'
+import { FormField, FormSection, FormActions, FormRow } from './FormField'
+import { Button, ButtonText } from '../button'
+import { Input } from '../input'
+
+const meta: Meta<typeof FormField> = {
+  title: 'Components/FormField',
+  component: FormField,
+  tags: ['autodocs'],
+  argTypes: {
+    labelSize: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+    },
+    isRequired: {
+      control: 'boolean',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof FormField>
+
+// Simple input for stories
+function SimpleInput({ isInvalid, isDisabled, ...props }: any) {
+  return (
+    <View
+      className={`border rounded-md px-3 py-2 bg-surface-input ${
+        isInvalid ? 'border-status-error' : 'border-border-input'
+      } ${isDisabled ? 'opacity-50' : ''}`}
+    >
+      <TextInput
+        className="text-text-primary"
+        placeholderTextColor="var(--color-text-tertiary)"
+        editable={!isDisabled}
+        {...props}
+      />
+    </View>
+  )
+}
+
+export const Default: Story = {
+  render: () => (
+    <View className="w-80">
+      <FormField label="Email Address">
+        <SimpleInput placeholder="Enter your email" />
+      </FormField>
+    </View>
+  ),
+}
+
+export const Required: Story = {
+  render: () => (
+    <View className="w-80">
+      <FormField label="Email Address" isRequired>
+        <SimpleInput placeholder="Enter your email" />
+      </FormField>
+    </View>
+  ),
+}
+
+export const WithHelperText: Story = {
+  render: () => (
+    <View className="w-80">
+      <FormField
+        label="Username"
+        helperText="Choose a unique username between 3-20 characters"
+      >
+        <SimpleInput placeholder="Enter username" />
+      </FormField>
+    </View>
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <View className="w-80">
+      <FormField
+        label="Password"
+        isRequired
+        errorMessage="Password must be at least 8 characters"
+      >
+        <SimpleInput placeholder="Enter password" isInvalid />
+      </FormField>
+    </View>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <View className="w-80">
+      <FormField label="Email Address" isDisabled>
+        <SimpleInput placeholder="Enter your email" isDisabled />
+      </FormField>
+    </View>
+  ),
+}
+
+export const LabelSizes: Story = {
+  render: () => (
+    <View className="gap-6 w-80">
+      <FormField label="Small Label" labelSize="sm">
+        <SimpleInput placeholder="Small" />
+      </FormField>
+      <FormField label="Medium Label" labelSize="md">
+        <SimpleInput placeholder="Medium" />
+      </FormField>
+      <FormField label="Large Label" labelSize="lg">
+        <SimpleInput placeholder="Large" />
+      </FormField>
+    </View>
+  ),
+}
+
+export const HorizontalLayout: Story = {
+  render: () => (
+    <View className="gap-4 w-96">
+      <FormField label="Name" orientation="horizontal" labelWidth={100}>
+        <SimpleInput placeholder="Enter name" />
+      </FormField>
+      <FormField label="Email" orientation="horizontal" labelWidth={100} isRequired>
+        <SimpleInput placeholder="Enter email" />
+      </FormField>
+      <FormField
+        label="Bio"
+        orientation="horizontal"
+        labelWidth={100}
+        helperText="Brief description about yourself"
+      >
+        <SimpleInput placeholder="Enter bio" />
+      </FormField>
+    </View>
+  ),
+}
+
+export const FormRowExample: Story = {
+  render: () => (
+    <View className="w-full max-w-lg">
+      <FormRow>
+        <FormField label="First Name" isRequired className="flex-1">
+          <SimpleInput placeholder="John" />
+        </FormField>
+        <FormField label="Last Name" isRequired className="flex-1">
+          <SimpleInput placeholder="Doe" />
+        </FormField>
+      </FormRow>
+    </View>
+  ),
+}
+
+export const FormSectionExample: Story = {
+  render: () => (
+    <View className="w-full max-w-lg">
+      <FormSection
+        title="Personal Information"
+        description="Please provide your personal details"
+      >
+        <FormRow>
+          <FormField label="First Name" isRequired className="flex-1">
+            <SimpleInput placeholder="John" />
+          </FormField>
+          <FormField label="Last Name" isRequired className="flex-1">
+            <SimpleInput placeholder="Doe" />
+          </FormField>
+        </FormRow>
+        <FormField label="Email" isRequired helperText="We'll use this for notifications">
+          <SimpleInput placeholder="john@example.com" />
+        </FormField>
+      </FormSection>
+    </View>
+  ),
+}
+
+export const CompleteFormExample: Story = {
+  render: () => (
+    <View className="w-full max-w-lg p-6 bg-surface-base rounded-lg">
+      <FormSection title="Create Account" description="Fill in the details to create your account">
+        <FormRow>
+          <FormField label="First Name" isRequired className="flex-1">
+            <SimpleInput placeholder="John" />
+          </FormField>
+          <FormField label="Last Name" isRequired className="flex-1">
+            <SimpleInput placeholder="Doe" />
+          </FormField>
+        </FormRow>
+
+        <FormField label="Email" isRequired>
+          <SimpleInput placeholder="john@example.com" />
+        </FormField>
+
+        <FormField
+          label="Password"
+          isRequired
+          helperText="At least 8 characters with one uppercase and number"
+        >
+          <SimpleInput placeholder="••••••••" secureTextEntry />
+        </FormField>
+
+        <FormField label="Confirm Password" isRequired>
+          <SimpleInput placeholder="••••••••" secureTextEntry />
+        </FormField>
+      </FormSection>
+
+      <FormSection title="Preferences" description="Customize your experience">
+        <FormField label="Company (optional)">
+          <SimpleInput placeholder="Acme Inc." />
+        </FormField>
+
+        <FormField label="Timezone" helperText="Select your local timezone">
+          <SimpleInput placeholder="America/New_York" />
+        </FormField>
+      </FormSection>
+
+      <FormActions align="right">
+        <Button variant="ghost">
+          <ButtonText>Cancel</ButtonText>
+        </Button>
+        <Button>
+          <ButtonText>Create Account</ButtonText>
+        </Button>
+      </FormActions>
+    </View>
+  ),
+}
+
+export const ValidationStates: Story = {
+  render: () => (
+    <View className="gap-6 w-80">
+      <FormField label="Valid Input" helperText="This field is valid">
+        <View className="border border-status-success rounded-md px-3 py-2 bg-surface-input">
+          <Text className="text-text-primary">valid@email.com</Text>
+        </View>
+      </FormField>
+
+      <FormField
+        label="Invalid Input"
+        isRequired
+        errorMessage="Please enter a valid email address"
+      >
+        <View className="border border-status-error rounded-md px-3 py-2 bg-surface-input">
+          <Text className="text-text-primary">not-an-email</Text>
+        </View>
+      </FormField>
+
+      <FormField label="Disabled Input" isDisabled>
+        <View className="border border-border-input rounded-md px-3 py-2 bg-surface-input opacity-50">
+          <Text className="text-text-tertiary">Disabled value</Text>
+        </View>
+      </FormField>
+    </View>
+  ),
+}