@urbint/cl 1.0.1

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,172 @@
+/**
+ * Switch Component
+ * Toggle switch for boolean values
+ */
+
+import React, { forwardRef, useRef, useEffect } from 'react';
+import { View, ViewProps, Pressable, Text, Animated, StyleSheet } from 'react-native';
+import { colors, spacing, typography, elevation } from '../../styles/tokens';
+
+export interface SwitchProps extends Omit<ViewProps, 'children'> {
+  /** Switch label */
+  label?: string;
+  /** Is checked */
+  isChecked?: boolean;
+  /** Default checked state */
+  defaultChecked?: boolean;
+  /** On change handler */
+  onChange?: (isChecked: boolean) => void;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Switch size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color scheme */
+  colorScheme?: 'primary' | 'success' | 'danger';
+  /** Label position */
+  labelPosition?: 'left' | 'right';
+}
+
+const sizeConfig = {
+  sm: { track: { width: 32, height: 18 }, thumb: 14 },
+  md: { track: { width: 44, height: 24 }, thumb: 20 },
+  lg: { track: { width: 56, height: 30 }, thumb: 26 },
+} as const;
+
+const colorMap = {
+  primary: colors.brand.blue,
+  success: colors.feedback.success.content,
+  danger: colors.feedback.error.content,
+};
+
+export const Switch = forwardRef<View, SwitchProps>(
+  (
+    {
+      style,
+      label,
+      isChecked: controlledChecked,
+      defaultChecked = false,
+      onChange,
+      isDisabled = false,
+      size = 'md',
+      colorScheme = 'primary',
+      labelPosition = 'right',
+      ...props
+    },
+    ref
+  ) => {
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const isControlled = controlledChecked !== undefined;
+    const isChecked = isControlled ? controlledChecked : internalChecked;
+
+    const config = sizeConfig[size];
+    const translateX = useRef(new Animated.Value(isChecked ? config.track.width - config.thumb - 4 : 2)).current;
+    const activeColor = colorMap[colorScheme];
+
+    useEffect(() => {
+      Animated.spring(translateX, {
+        toValue: isChecked ? config.track.width - config.thumb - 4 : 2,
+        useNativeDriver: true,
+        bounciness: 4,
+      }).start();
+    }, [isChecked, config]);
+
+    const handlePress = () => {
+      if (isDisabled) return;
+      const newValue = !isChecked;
+      if (!isControlled) {
+        setInternalChecked(newValue);
+      }
+      onChange?.(newValue);
+    };
+
+    const trackStyle = {
+      width: config.track.width,
+      height: config.track.height,
+      backgroundColor: isChecked
+        ? isDisabled
+          ? colors.border.disabled
+          : activeColor
+        : colors.border.default,
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={isDisabled}
+        style={[
+          styles.container,
+          labelPosition === 'left' && styles.containerReversed,
+          style,
+        ]}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+        {...props}
+      >
+        {label && labelPosition === 'left' && (
+          <Text style={[styles.label, styles[`${size}Label` as keyof typeof styles], isDisabled && styles.labelDisabled]}>
+            {label}
+          </Text>
+        )}
+        <View style={[styles.track, trackStyle]}>
+          <Animated.View
+            style={[
+              styles.thumb,
+              {
+                width: config.thumb,
+                height: config.thumb,
+                transform: [{ translateX }],
+              },
+              isDisabled && styles.thumbDisabled,
+            ]}
+          />
+        </View>
+        {label && labelPosition === 'right' && (
+          <Text style={[styles.label, styles[`${size}Label` as keyof typeof styles], isDisabled && styles.labelDisabled]}>
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  containerReversed: {
+    flexDirection: 'row-reverse',
+  },
+  track: {
+    borderRadius: 9999,
+    justifyContent: 'center',
+  },
+  thumb: {
+    borderRadius: 9999,
+    backgroundColor: colors.white,
+    ...elevation['10'],
+  },
+  thumbDisabled: {
+    backgroundColor: colors.background.secondary,
+  },
+  label: {
+    marginHorizontal: spacing['2x'],
+    color: colors.text.default,
+  },
+  smLabel: {
+    fontSize: typography.fontSize.small,
+  },
+  mdLabel: {
+    fontSize: typography.fontSize.body,
+  },
+  lgLabel: {
+    fontSize: typography.fontSize.body,
+  },
+  labelDisabled: {
+    color: colors.text.disabled,
+  },
+});

package/src/components/Switch/index.ts

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

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,417 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Table, TableColumn } from './Table';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { Badge } from '../Badge';
+import { colors, spacing } from '../../styles/tokens';
+
+const meta: Meta<typeof Table> = {
+  title: 'Data Display/Table',
+  component: Table,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['simple', 'striped', 'unstyled'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+  args: {
+    variant: 'simple',
+    size: 'md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const users: User[] = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' },
+  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'User' },
+];
+
+const columns: TableColumn<User>[] = [
+  { key: 'id', header: 'ID', width: 60 },
+  { key: 'name', header: 'Name' },
+  { key: 'email', header: 'Email' },
+  { key: 'role', header: 'Role' },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Table
+      data={users}
+      columns={columns}
+      keyExtractor={(item) => String(item.id)}
+    />
+  ),
+};
+
+export const Striped: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Striped Table</Text>
+      <Table
+        data={users}
+        columns={columns}
+        variant="striped"
+        keyExtractor={(item) => String(item.id)}
+      />
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <VStack space={spacing.sm}>
+        <Text weight="semiBold">Small</Text>
+        <Table
+          data={users.slice(0, 2)}
+          columns={columns}
+          size="sm"
+          keyExtractor={(item) => String(item.id)}
+        />
+      </VStack>
+      <VStack space={spacing.sm}>
+        <Text weight="semiBold">Medium (Default)</Text>
+        <Table
+          data={users.slice(0, 2)}
+          columns={columns}
+          size="md"
+          keyExtractor={(item) => String(item.id)}
+        />
+      </VStack>
+      <VStack space={spacing.sm}>
+        <Text weight="semiBold">Large</Text>
+        <Table
+          data={users.slice(0, 2)}
+          columns={columns}
+          size="lg"
+          keyExtractor={(item) => String(item.id)}
+        />
+      </VStack>
+    </VStack>
+  ),
+};
+
+const SortableTableDemo = () => {
+  const [sortColumn, setSortColumn] = useState<string>('name');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+
+  const sortedUsers = [...users].sort((a, b) => {
+    const aValue = a[sortColumn as keyof User];
+    const bValue = b[sortColumn as keyof User];
+    if (sortDirection === 'asc') {
+      return String(aValue).localeCompare(String(bValue));
+    }
+    return String(bValue).localeCompare(String(aValue));
+  });
+
+  const sortableColumns: TableColumn<User>[] = [
+    { key: 'id', header: 'ID', width: 60, sortable: true },
+    { key: 'name', header: 'Name', sortable: true },
+    { key: 'email', header: 'Email', sortable: true },
+    { key: 'role', header: 'Role', sortable: true },
+  ];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Sortable Table</Text>
+      <Table
+        data={sortedUsers}
+        columns={sortableColumns}
+        sortColumn={sortColumn}
+        sortDirection={sortDirection}
+        onSortChange={(col, dir) => {
+          setSortColumn(col);
+          setSortDirection(dir);
+        }}
+        keyExtractor={(item) => String(item.id)}
+      />
+    </VStack>
+  );
+};
+
+export const Sortable: Story = {
+  render: () => <SortableTableDemo />,
+};
+
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  stock: number;
+  status: 'active' | 'inactive' | 'low_stock';
+}
+
+const products: Product[] = [
+  { id: 1, name: 'Widget A', price: 29.99, stock: 150, status: 'active' },
+  { id: 2, name: 'Widget B', price: 49.99, stock: 5, status: 'low_stock' },
+  { id: 3, name: 'Widget C', price: 19.99, stock: 0, status: 'inactive' },
+  { id: 4, name: 'Widget D', price: 99.99, stock: 75, status: 'active' },
+];
+
+const CustomRenderDemo = () => {
+  const productColumns: TableColumn<Product>[] = [
+    { key: 'name', header: 'Product' },
+    {
+      key: 'price',
+      header: 'Price',
+      align: 'right',
+      render: (item) => <Text>${item.price.toFixed(2)}</Text>,
+    },
+    {
+      key: 'stock',
+      header: 'Stock',
+      align: 'center',
+      render: (item) => (
+        <Text color={item.stock < 10 ? colors.feedback.error.content : undefined}>
+          {item.stock}
+        </Text>
+      ),
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      align: 'center',
+      render: (item) => {
+        const statusColors = {
+          active: { bg: colors.feedback.success.background, text: colors.feedback.success.content },
+          inactive: { bg: colors.background.secondary, text: colors.text.secondary },
+          low_stock: { bg: colors.feedback.warning.background, text: colors.feedback.warning.content },
+        };
+        const color = statusColors[item.status];
+        const labels = { active: 'Active', inactive: 'Inactive', low_stock: 'Low Stock' };
+        return (
+          <Box px={spacing.sm} py={spacing.xs} bg={color.bg} rounded="full">
+            <Text size="sm" color={color.text}>{labels[item.status]}</Text>
+          </Box>
+        );
+      },
+    },
+  ];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Cell Rendering</Text>
+      <Table
+        data={products}
+        columns={productColumns}
+        keyExtractor={(item) => String(item.id)}
+      />
+    </VStack>
+  );
+};
+
+export const CustomRender: Story = {
+  render: () => <CustomRenderDemo />,
+};
+
+const ClickableRowsDemo = () => {
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Clickable Rows</Text>
+      <Table
+        data={users}
+        columns={columns}
+        onRowPress={(item) => alert(`Clicked: ${item.name}`)}
+        keyExtractor={(item) => String(item.id)}
+      />
+    </VStack>
+  );
+};
+
+export const ClickableRows: Story = {
+  render: () => <ClickableRowsDemo />,
+};
+
+const ActionsDemo = () => {
+  const columnsWithActions: TableColumn<User>[] = [
+    { key: 'name', header: 'Name' },
+    { key: 'email', header: 'Email' },
+    { key: 'role', header: 'Role' },
+    {
+      key: 'actions',
+      header: 'Actions',
+      align: 'right',
+      render: (item) => (
+        <HStack space={spacing.sm} justifyContent="flex-end">
+          <Button
+            size="sm"
+            variant="ghost"
+            onPress={() => console.log('Edit', item.name)}
+          >
+            Edit
+          </Button>
+          <Button
+            size="sm"
+            variant="danger"
+            onPress={() => console.log('Delete', item.name)}
+          >
+            Delete
+          </Button>
+        </HStack>
+      ),
+    },
+  ];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Table with Actions</Text>
+      <Table
+        data={users}
+        columns={columnsWithActions}
+        keyExtractor={(item) => String(item.id)}
+      />
+    </VStack>
+  );
+};
+
+export const WithActions: Story = {
+  render: () => <ActionsDemo />,
+};
+
+export const Empty: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Empty Table</Text>
+      <Table
+        data={[]}
+        columns={columns}
+        emptyState={
+          <VStack space={spacing.sm} alignItems="center">
+            <Text size="lg">📭</Text>
+            <Text color={colors.text.secondary}>No users found</Text>
+            <Button size="sm">Add User</Button>
+          </VStack>
+        }
+      />
+    </VStack>
+  ),
+};
+
+interface Order {
+  id: string;
+  customer: string;
+  date: string;
+  total: number;
+  status: 'pending' | 'processing' | 'shipped' | 'delivered';
+}
+
+const orders: Order[] = [
+  { id: 'ORD-001', customer: 'John Doe', date: '2024-01-15', total: 150.00, status: 'delivered' },
+  { id: 'ORD-002', customer: 'Jane Smith', date: '2024-01-14', total: 89.99, status: 'shipped' },
+  { id: 'ORD-003', customer: 'Bob Johnson', date: '2024-01-14', total: 249.50, status: 'processing' },
+  { id: 'ORD-004', customer: 'Alice Brown', date: '2024-01-13', total: 45.00, status: 'pending' },
+];
+
+const OrdersDemo = () => {
+  const orderColumns: TableColumn<Order>[] = [
+    { key: 'id', header: 'Order ID', width: 100 },
+    { key: 'customer', header: 'Customer' },
+    { key: 'date', header: 'Date', width: 120 },
+    {
+      key: 'total',
+      header: 'Total',
+      align: 'right',
+      render: (item) => <Text weight="medium">${item.total.toFixed(2)}</Text>,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (item) => {
+        const statusConfig = {
+          pending: { variant: 'warning' as const, label: 'Pending' },
+          processing: { variant: 'info' as const, label: 'Processing' },
+          shipped: { variant: 'info' as const, label: 'Shipped' },
+          delivered: { variant: 'success' as const, label: 'Delivered' },
+        };
+        const config = statusConfig[item.status];
+        return <Badge variant={config.variant}>{config.label}</Badge>;
+      },
+    },
+  ];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Orders Table</Text>
+      <Table
+        data={orders}
+        columns={orderColumns}
+        variant="striped"
+        keyExtractor={(item) => item.id}
+      />
+    </VStack>
+  );
+};
+
+export const Orders: Story = {
+  render: () => <OrdersDemo />,
+};
+
+const ColumnAlignmentDemo = () => {
+  interface Stats {
+    metric: string;
+    value: number;
+    change: number;
+  }
+
+  const stats: Stats[] = [
+    { metric: 'Total Users', value: 12543, change: 12.5 },
+    { metric: 'Active Sessions', value: 3421, change: -5.2 },
+    { metric: 'Revenue', value: 54320, change: 8.7 },
+  ];
+
+  const statsColumns: TableColumn<Stats>[] = [
+    { key: 'metric', header: 'Metric', align: 'left' },
+    {
+      key: 'value',
+      header: 'Value',
+      align: 'center',
+      render: (item) => <Text weight="semiBold">{item.value.toLocaleString()}</Text>,
+    },
+    {
+      key: 'change',
+      header: 'Change',
+      align: 'right',
+      render: (item) => (
+        <Text color={item.change >= 0 ? colors.feedback.success.content : colors.feedback.error.content}>
+          {item.change >= 0 ? '+' : ''}{item.change}%
+        </Text>
+      ),
+    },
+  ];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Column Alignment</Text>
+      <Table
+        data={stats}
+        columns={statsColumns}
+        keyExtractor={(item) => item.metric}
+      />
+    </VStack>
+  );
+};
+
+export const ColumnAlignment: Story = {
+  render: () => <ColumnAlignmentDemo />,
+};
+