@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/tabs/Tabs.tsx

@@ -0,0 +1,253 @@
+import React, { createContext, useContext, useState } from 'react'
+import { View, Text, Pressable, ScrollView, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type TabsVariant = 'line' | 'enclosed' | 'soft-rounded'
+export type TabsOrientation = 'horizontal' | 'vertical'
+
+interface TabsContextType {
+  activeIndex: number
+  setActiveIndex: (index: number) => void
+  variant: TabsVariant
+  orientation: TabsOrientation
+}
+
+const TabsContext = createContext<TabsContextType>({
+  activeIndex: 0,
+  setActiveIndex: () => {},
+  variant: 'line',
+  orientation: 'horizontal',
+})
+
+export interface TabsProps extends ViewProps {
+  /** Currently active tab index */
+  defaultIndex?: number
+  /** Controlled active index */
+  index?: number
+  /** Callback when tab changes */
+  onChange?: (index: number) => void
+  /** Visual variant */
+  variant?: TabsVariant
+  /** Tab orientation */
+  orientation?: TabsOrientation
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Tabs component for tabbed navigation.
+ *
+ * @example
+ * <Tabs defaultIndex={0} onChange={(i) => console.log(i)}>
+ *   <TabList>
+ *     <Tab>Tab 1</Tab>
+ *     <Tab>Tab 2</Tab>
+ *     <Tab>Tab 3</Tab>
+ *   </TabList>
+ *   <TabPanels>
+ *     <TabPanel>Content 1</TabPanel>
+ *     <TabPanel>Content 2</TabPanel>
+ *     <TabPanel>Content 3</TabPanel>
+ *   </TabPanels>
+ * </Tabs>
+ */
+export function Tabs({
+  defaultIndex = 0,
+  index,
+  onChange,
+  variant = 'line',
+  orientation = 'horizontal',
+  className,
+  children,
+  ...props
+}: TabsProps) {
+  const [internalIndex, setInternalIndex] = useState(defaultIndex)
+  const activeIndex = index ?? internalIndex
+
+  const setActiveIndex = (newIndex: number) => {
+    if (index === undefined) {
+      setInternalIndex(newIndex)
+    }
+    onChange?.(newIndex)
+  }
+
+  return (
+    <TabsContext.Provider value={{ activeIndex, setActiveIndex, variant, orientation }}>
+      <View
+        className={cn(
+          orientation === 'vertical' ? 'flex-row' : 'flex-col',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </TabsContext.Provider>
+  )
+}
+
+export interface TabListProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Container for Tab components.
+ */
+export function TabList({ children, className }: TabListProps) {
+  const { variant, orientation } = useContext(TabsContext)
+
+  const variantStyles = {
+    line: orientation === 'horizontal'
+      ? 'border-b border-border-default'
+      : 'border-r border-border-default',
+    enclosed: 'bg-surface-raised rounded-lg p-1',
+    'soft-rounded': 'bg-surface-raised rounded-full p-1',
+  }
+
+  const content = (
+    <View
+      className={cn(
+        orientation === 'horizontal' ? 'flex-row' : 'flex-col',
+        variantStyles[variant],
+        className
+      )}
+    >
+      {React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<any>, { index })
+        }
+        return child
+      })}
+    </View>
+  )
+
+  if (orientation === 'horizontal') {
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ flexGrow: 1 }}
+      >
+        {content}
+      </ScrollView>
+    )
+  }
+
+  return content
+}
+
+export interface TabProps {
+  /** Tab index (injected by TabList) */
+  index?: number
+  /** Whether the tab is disabled */
+  isDisabled?: boolean
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Individual tab button.
+ */
+export function Tab({
+  index = 0,
+  isDisabled = false,
+  className,
+  children,
+}: TabProps) {
+  const { activeIndex, setActiveIndex, variant, orientation } = useContext(TabsContext)
+  const isActive = activeIndex === index
+
+  const baseStyles = 'font-medium text-sm transition-colors'
+
+  const variantStyles = {
+    line: cn(
+      'px-4 py-2',
+      orientation === 'horizontal' ? '-mb-px border-b-2' : '-mr-px border-r-2',
+      isActive
+        ? 'border-brand-primary text-brand-primary'
+        : 'border-transparent text-text-secondary web:hover:text-text-primary'
+    ),
+    enclosed: cn(
+      'px-4 py-2 rounded-md',
+      isActive
+        ? 'bg-surface-elevated text-text-primary shadow-sm'
+        : 'text-text-secondary web:hover:text-text-primary'
+    ),
+    'soft-rounded': cn(
+      'px-4 py-2 rounded-full',
+      isActive
+        ? 'bg-brand-primary text-white'
+        : 'text-text-secondary web:hover:text-text-primary'
+    ),
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive, disabled: isDisabled }}
+      disabled={isDisabled}
+      onPress={() => setActiveIndex(index)}
+      className={cn(
+        baseStyles,
+        variantStyles[variant],
+        isDisabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+    >
+      <Text
+        className={cn(
+          'font-medium',
+          isActive
+            ? variant === 'soft-rounded'
+              ? 'text-white'
+              : 'text-text-primary'
+            : 'text-text-secondary'
+        )}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  )
+}
+
+export interface TabPanelsProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Container for TabPanel components.
+ */
+export function TabPanels({ children, className }: TabPanelsProps) {
+  const { activeIndex } = useContext(TabsContext)
+
+  return (
+    <View className={cn('flex-1', className)}>
+      {React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child) && index === activeIndex) {
+          return child
+        }
+        return null
+      })}
+    </View>
+  )
+}
+
+export interface TabPanelProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Individual tab panel content.
+ */
+export function TabPanel({ children, className }: TabPanelProps) {
+  return (
+    <View className={cn('py-4', className)}>
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1,16 @@
+export {
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from './Tabs'
+export type {
+  TabsProps,
+  TabListProps,
+  TabProps,
+  TabPanelsProps,
+  TabPanelProps,
+  TabsVariant,
+  TabsOrientation,
+} from './Tabs'

package/src/components/ui/toast/Toast.stories.tsx

@@ -0,0 +1,255 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Toast, ToastProvider, useToast } from './Toast'
+import { Button, ButtonText } from '../button'
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Toast',
+  component: Toast,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['success', 'error', 'warning', 'info'],
+    },
+    showIcon: {
+      control: 'boolean',
+    },
+    isClosable: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Toast>
+
+export const Default: Story = {
+  args: {
+    title: 'Notification',
+    description: 'This is a toast notification.',
+    status: 'info',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    title: 'Success!',
+    description: 'Your changes have been saved successfully.',
+    status: 'success',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    title: 'Error',
+    description: 'There was a problem processing your request.',
+    status: 'error',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    title: 'Warning',
+    description: 'Your session is about to expire.',
+    status: 'warning',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    title: 'Information',
+    description: 'A new version is available.',
+    status: 'info',
+  },
+}
+
+export const AllStatuses: Story = {
+  render: () => (
+    <View className="gap-3">
+      <Toast title="Success" description="Operation completed successfully." status="success" />
+      <Toast title="Error" description="Something went wrong." status="error" />
+      <Toast title="Warning" description="Please review your input." status="warning" />
+      <Toast title="Info" description="New features are available." status="info" />
+    </View>
+  ),
+}
+
+export const TitleOnly: Story = {
+  render: () => (
+    <View className="gap-3">
+      <Toast title="File saved" status="success" />
+      <Toast title="Connection lost" status="error" />
+      <Toast title="Low storage" status="warning" />
+    </View>
+  ),
+}
+
+export const WithCloseButton: Story = {
+  args: {
+    title: 'Closable Toast',
+    description: 'Click the X to dismiss this notification.',
+    status: 'info',
+    isClosable: true,
+    onClose: () => console.log('Toast closed'),
+  },
+}
+
+export const WithoutIcon: Story = {
+  args: {
+    title: 'No Icon',
+    description: 'This toast has no status icon.',
+    showIcon: false,
+  },
+}
+
+// Interactive example with provider
+function ToastDemo() {
+  const { addToast, removeAllToasts } = useToast()
+
+  return (
+    <View className="gap-3">
+      <View className="flex-row flex-wrap gap-2">
+        <Button
+          onPress={() =>
+            addToast({
+              title: 'Success!',
+              description: 'Your changes have been saved.',
+              status: 'success',
+            })
+          }
+          color="success"
+        >
+          <ButtonText>Success Toast</ButtonText>
+        </Button>
+
+        <Button
+          onPress={() =>
+            addToast({
+              title: 'Error',
+              description: 'Something went wrong.',
+              status: 'error',
+            })
+          }
+          color="error"
+        >
+          <ButtonText>Error Toast</ButtonText>
+        </Button>
+
+        <Button
+          onPress={() =>
+            addToast({
+              title: 'Warning',
+              description: 'Please check your input.',
+              status: 'warning',
+            })
+          }
+          color="warning"
+        >
+          <ButtonText>Warning Toast</ButtonText>
+        </Button>
+
+        <Button
+          onPress={() =>
+            addToast({
+              title: 'Info',
+              description: 'New updates available.',
+              status: 'info',
+            })
+          }
+          color="info"
+        >
+          <ButtonText>Info Toast</ButtonText>
+        </Button>
+      </View>
+
+      <Button variant="outline" onPress={removeAllToasts}>
+        <ButtonText>Clear All</ButtonText>
+      </Button>
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => (
+    <ToastProvider position="top-right" defaultDuration={3000}>
+      <ToastDemo />
+    </ToastProvider>
+  ),
+}
+
+// Different positions
+function PositionDemo() {
+  const { addToast } = useToast()
+
+  return (
+    <Button
+      onPress={() =>
+        addToast({
+          title: 'Toast at this position',
+          status: 'info',
+        })
+      }
+    >
+      <ButtonText>Show Toast</ButtonText>
+    </Button>
+  )
+}
+
+export const TopPosition: Story = {
+  render: () => (
+    <ToastProvider position="top">
+      <PositionDemo />
+    </ToastProvider>
+  ),
+}
+
+export const BottomPosition: Story = {
+  render: () => (
+    <ToastProvider position="bottom">
+      <PositionDemo />
+    </ToastProvider>
+  ),
+}
+
+export const LongDuration: Story = {
+  render: () => {
+    function Demo() {
+      const { addToast } = useToast()
+      return (
+        <View className="gap-2">
+          <Button
+            onPress={() =>
+              addToast({
+                title: 'Persistent Toast',
+                description: 'This toast will stay for 10 seconds.',
+                duration: 10000,
+              })
+            }
+          >
+            <ButtonText>10 Second Toast</ButtonText>
+          </Button>
+          <Button
+            onPress={() =>
+              addToast({
+                title: 'Manual Close Only',
+                description: 'This toast will not auto-dismiss.',
+                duration: 0,
+                isClosable: true,
+              })
+            }
+            variant="outline"
+          >
+            <ButtonText>Non-Auto-Dismissing Toast</ButtonText>
+          </Button>
+        </View>
+      )
+    }
+
+    return (
+      <ToastProvider position="top-right">
+        <Demo />
+      </ToastProvider>
+    )
+  },
+}