@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/alert/Alert.tsx

@@ -0,0 +1,170 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type AlertStatus = 'success' | 'info' | 'warning' | 'error'
+export type AlertVariant = 'subtle' | 'outline' | 'solid'
+
+export interface AlertProps extends ViewProps {
+  /** Alert status type */
+  status?: AlertStatus
+  /** Visual variant */
+  variant?: AlertVariant
+  /** Custom icon element */
+  icon?: React.ReactNode
+  /** Whether to show the default icon */
+  showIcon?: boolean
+  /** Callback when close button is pressed */
+  onClose?: () => void
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+const statusColors: Record<AlertStatus, {
+  subtle: string
+  outline: string
+  solid: string
+  icon: string
+  text: string
+}> = {
+  success: {
+    subtle: 'bg-status-success-subtle',
+    outline: 'border-2 border-status-success bg-transparent',
+    solid: 'bg-status-success',
+    icon: 'text-status-success',
+    text: 'text-status-success',
+  },
+  info: {
+    subtle: 'bg-status-info-subtle',
+    outline: 'border-2 border-status-info bg-transparent',
+    solid: 'bg-status-info',
+    icon: 'text-status-info',
+    text: 'text-status-info',
+  },
+  warning: {
+    subtle: 'bg-status-warning-subtle',
+    outline: 'border-2 border-status-warning bg-transparent',
+    solid: 'bg-status-warning',
+    icon: 'text-status-warning',
+    text: 'text-status-warning',
+  },
+  error: {
+    subtle: 'bg-status-error-subtle',
+    outline: 'border-2 border-status-error bg-transparent',
+    solid: 'bg-status-error',
+    icon: 'text-status-error',
+    text: 'text-status-error',
+  },
+}
+
+// Default icons for each status
+const defaultIcons: Record<AlertStatus, string> = {
+  success: '✓',
+  info: 'ℹ',
+  warning: '⚠',
+  error: '✕',
+}
+
+/**
+ * Alert component for displaying status messages.
+ *
+ * @example
+ * <Alert status="success">
+ *   <AlertTitle>Success!</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ *
+ * <Alert status="error" variant="solid" onClose={() => {}}>
+ *   <AlertDescription>Something went wrong.</AlertDescription>
+ * </Alert>
+ */
+export function Alert({
+  status = 'info',
+  variant = 'subtle',
+  icon,
+  showIcon = true,
+  onClose,
+  className,
+  children,
+  ...props
+}: AlertProps) {
+  const colors = statusColors[status]
+  const isSolid = variant === 'solid'
+
+  return (
+    <View
+      accessibilityRole="alert"
+      className={cn(
+        'flex-row items-start p-4 rounded-lg',
+        colors[variant],
+        className
+      )}
+      {...props}
+    >
+      {showIcon && (
+        <View className="mr-3 mt-0.5">
+          {icon || (
+            <Text
+              className={cn(
+                'text-lg font-bold',
+                isSolid ? 'text-white' : colors.icon
+              )}
+            >
+              {defaultIcons[status]}
+            </Text>
+          )}
+        </View>
+      )}
+
+      <View className="flex-1">
+        {children}
+      </View>
+
+      {onClose && (
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="Close alert"
+          className="ml-2 p-1 rounded web:hover:bg-black/10 active:bg-black/20"
+        >
+          <Text className={cn('text-lg', isSolid ? 'text-white/70' : 'text-text-secondary')}>
+            ×
+          </Text>
+        </Pressable>
+      )}
+    </View>
+  )
+}
+
+export interface AlertTitleProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Title for Alert component.
+ */
+export function AlertTitle({ children, className }: AlertTitleProps) {
+  return (
+    <Text className={cn('font-semibold text-text-primary mb-1', className)}>
+      {children}
+    </Text>
+  )
+}
+
+export interface AlertDescriptionProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Description for Alert component.
+ */
+export function AlertDescription({ children, className }: AlertDescriptionProps) {
+  return (
+    <Text className={cn('text-sm text-text-secondary', className)}>
+      {children}
+    </Text>
+  )
+}

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

@@ -0,0 +1,8 @@
+export { Alert, AlertTitle, AlertDescription } from './Alert'
+export type {
+  AlertProps,
+  AlertTitleProps,
+  AlertDescriptionProps,
+  AlertStatus,
+  AlertVariant,
+} from './Alert'

package/src/components/ui/autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,299 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View, Text } from 'react-native'
+import { Autocomplete, AutocompleteOption } from './Autocomplete'
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Components/Autocomplete',
+  component: Autocomplete,
+  tags: ['autodocs'],
+  argTypes: {
+    isDisabled: {
+      control: 'boolean',
+    },
+    isLoading: {
+      control: 'boolean',
+    },
+    isClearable: {
+      control: 'boolean',
+    },
+    minChars: {
+      control: { type: 'number', min: 0, max: 5 },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Autocomplete>
+
+const fruitOptions: AutocompleteOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'honeydew', label: 'Honeydew' },
+]
+
+export const Default: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Search fruits..."
+        />
+        <Text className="text-sm text-text-secondary mt-2">
+          Selected: {value || 'None'}
+        </Text>
+      </View>
+    )
+  },
+}
+
+export const WithLabel: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          label="Select a fruit"
+          placeholder="Type to search..."
+          helperText="Choose your favorite fruit"
+        />
+      </View>
+    )
+  },
+}
+
+const userOptions: AutocompleteOption[] = [
+  { value: 'user1', label: 'John Doe', description: 'john@example.com' },
+  { value: 'user2', label: 'Jane Smith', description: 'jane@example.com' },
+  { value: 'user3', label: 'Bob Johnson', description: 'bob@example.com' },
+  { value: 'user4', label: 'Alice Williams', description: 'alice@example.com' },
+  { value: 'user5', label: 'Charlie Brown', description: 'charlie@example.com' },
+]
+
+export const WithDescriptions: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View className="w-80">
+        <Autocomplete
+          options={userOptions}
+          value={value}
+          onChange={setValue}
+          label="Assign to"
+          placeholder="Search users..."
+        />
+      </View>
+    )
+  },
+}
+
+export const MinimumCharacters: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          label="Search (min 2 chars)"
+          placeholder="Type at least 2 characters..."
+          minChars={2}
+        />
+      </View>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          label="Select fruit"
+          placeholder="Search..."
+          isRequired
+          errorMessage="Please select a fruit"
+        />
+      </View>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: function Render() {
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={fruitOptions}
+          value="apple"
+          label="Disabled field"
+          isDisabled
+        />
+      </View>
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={[]}
+          value={value}
+          onChange={setValue}
+          label="Loading state"
+          placeholder="Search..."
+          isLoading
+        />
+      </View>
+    )
+  },
+}
+
+export const DisabledOptions: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    const optionsWithDisabled: AutocompleteOption[] = [
+      { value: 'free', label: 'Free Plan' },
+      { value: 'pro', label: 'Pro Plan' },
+      { value: 'enterprise', label: 'Enterprise Plan', isDisabled: true, description: 'Contact sales' },
+    ]
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={optionsWithDisabled}
+          value={value}
+          onChange={setValue}
+          label="Select plan"
+          placeholder="Choose a plan..."
+        />
+      </View>
+    )
+  },
+}
+
+export const CustomNoResultsText: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Search..."
+          noOptionsText="🔍 No fruits match your search"
+          minCharsText="🍎 Type to find fruits"
+        />
+      </View>
+    )
+  },
+}
+
+export const NonClearable: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('apple')
+    return (
+      <View className="w-64">
+        <Autocomplete
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          label="Cannot clear selection"
+          isClearable={false}
+        />
+      </View>
+    )
+  },
+}
+
+export const FormExample: Story = {
+  render: function Render() {
+    const [country, setCountry] = useState<string | null>(null)
+    const [city, setCity] = useState<string | null>(null)
+
+    const countryOptions: AutocompleteOption[] = [
+      { value: 'us', label: 'United States' },
+      { value: 'uk', label: 'United Kingdom' },
+      { value: 'ca', label: 'Canada' },
+      { value: 'au', label: 'Australia' },
+    ]
+
+    const cityOptions: Record<string, AutocompleteOption[]> = {
+      us: [
+        { value: 'nyc', label: 'New York' },
+        { value: 'la', label: 'Los Angeles' },
+        { value: 'chi', label: 'Chicago' },
+      ],
+      uk: [
+        { value: 'lon', label: 'London' },
+        { value: 'man', label: 'Manchester' },
+        { value: 'bir', label: 'Birmingham' },
+      ],
+      ca: [
+        { value: 'tor', label: 'Toronto' },
+        { value: 'van', label: 'Vancouver' },
+        { value: 'mon', label: 'Montreal' },
+      ],
+      au: [
+        { value: 'syd', label: 'Sydney' },
+        { value: 'mel', label: 'Melbourne' },
+        { value: 'bri', label: 'Brisbane' },
+      ],
+    }
+
+    return (
+      <View className="gap-4 w-80 p-4 bg-surface-base rounded-lg">
+        <Text className="text-lg font-semibold text-text-primary">Location</Text>
+
+        <Autocomplete
+          options={countryOptions}
+          value={country}
+          onChange={(val) => {
+            setCountry(val)
+            setCity(null) // Reset city when country changes
+          }}
+          label="Country"
+          placeholder="Select country..."
+          isRequired
+        />
+
+        <Autocomplete
+          options={country ? cityOptions[country] || [] : []}
+          value={city}
+          onChange={setCity}
+          label="City"
+          placeholder={country ? 'Select city...' : 'Select country first'}
+          isDisabled={!country}
+          isRequired
+        />
+
+        <View className="pt-2 border-t border-border-default">
+          <Text className="text-sm text-text-secondary">
+            Selected: {country ? `${countryOptions.find(c => c.value === country)?.label}` : '-'}
+            {city ? `, ${cityOptions[country!]?.find(c => c.value === city)?.label}` : ''}
+          </Text>
+        </View>
+      </View>
+    )
+  },
+}