@urbint/cl 1.0.1

package/src/components/Table/Table.tsx

@@ -0,0 +1,233 @@
+/**
+ * Table Component
+ * Data table with sorting and styling
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, Text, ScrollView, Pressable, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography } from '../../styles/tokens';
+
+export interface TableColumn<T> {
+  key: keyof T | string;
+  header: string;
+  width?: number | string;
+  render?: (item: T, index: number) => React.ReactNode;
+  sortable?: boolean;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface TableProps<T> extends ViewProps {
+  /** Table data */
+  data: T[];
+  /** Table columns */
+  columns: TableColumn<T>[];
+  /** Is striped */
+  isStriped?: boolean;
+  /** Show borders */
+  showBorders?: boolean;
+  /** Table variant */
+  variant?: 'simple' | 'striped' | 'unstyled';
+  /** Table size */
+  size?: 'sm' | 'md' | 'lg';
+  /** On row press */
+  onRowPress?: (item: T, index: number) => void;
+  /** Key extractor */
+  keyExtractor?: (item: T, index: number) => string;
+  /** Sort column */
+  sortColumn?: string;
+  /** Sort direction */
+  sortDirection?: 'asc' | 'desc';
+  /** On sort change */
+  onSortChange?: (column: string, direction: 'asc' | 'desc') => void;
+  /** Empty state */
+  emptyState?: React.ReactNode;
+}
+
+function TableComponent<T extends Record<string, any>>(
+  {
+    style,
+    data,
+    columns,
+    variant = 'simple',
+    size = 'md',
+    onRowPress,
+    keyExtractor,
+    sortColumn,
+    sortDirection = 'asc',
+    onSortChange,
+    emptyState,
+    ...props
+  }: TableProps<T>,
+  ref: React.Ref<View>
+) {
+  const handleSort = (column: TableColumn<T>) => {
+    if (!column.sortable || !onSortChange) return;
+    const newDirection =
+      sortColumn === column.key && sortDirection === 'asc' ? 'desc' : 'asc';
+    onSortChange(column.key as string, newDirection);
+  };
+
+  const getCellValue = (item: T, column: TableColumn<T>, index: number) => {
+    if (column.render) {
+      return column.render(item, index);
+    }
+    const value = item[column.key as keyof T];
+    return value !== undefined && value !== null ? String(value) : '-';
+  };
+
+  const isStriped = variant === 'striped';
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <View ref={ref} style={[styles.table, style]} {...props}>
+        <View style={styles.header}>
+          {columns.map((column) => (
+            <Pressable
+              key={column.key as string}
+              onPress={() => handleSort(column)}
+              disabled={!column.sortable}
+              style={[
+                styles.headerCell,
+                styles[`${size}Cell` as keyof typeof styles],
+                column.width ? { width: column.width } : styles.flexCell,
+                column.align && styles[`align${column.align.charAt(0).toUpperCase() + column.align.slice(1)}` as keyof typeof styles],
+              ]}
+            >
+              <Text style={styles.headerText}>{column.header}</Text>
+              {column.sortable && sortColumn === column.key && (
+                <View style={styles.sortIcon}>
+                  <Svg width={12} height={12} viewBox="0 0 24 24" fill="none">
+                    <Path
+                      d={sortDirection === 'asc' ? 'M18 15l-6-6-6 6' : 'M6 9l6 6 6-6'}
+                      stroke={colors.text.secondary}
+                      strokeWidth={2}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </Svg>
+                </View>
+              )}
+            </Pressable>
+          ))}
+        </View>
+
+        {data.length === 0 ? (
+          <View style={styles.emptyState}>
+            {emptyState || <Text style={styles.emptyText}>No data available</Text>}
+          </View>
+        ) : (
+          data.map((item, rowIndex) => (
+            <Pressable
+              key={keyExtractor ? keyExtractor(item, rowIndex) : rowIndex}
+              onPress={onRowPress ? () => onRowPress(item, rowIndex) : undefined}
+              style={[
+                styles.row,
+                isStriped && rowIndex % 2 === 1 && styles.stripedRow,
+              ]}
+            >
+              {columns.map((column) => (
+                <View
+                  key={`${rowIndex}-${column.key as string}`}
+                  style={[
+                    styles.cell,
+                    styles[`${size}Cell` as keyof typeof styles],
+                    column.width ? { width: column.width } : styles.flexCell,
+                    column.align && styles[`align${column.align.charAt(0).toUpperCase() + column.align.slice(1)}` as keyof typeof styles],
+                  ]}
+                >
+                  {typeof getCellValue(item, column, rowIndex) === 'string' ? (
+                    <Text style={styles.cellText}>
+                      {getCellValue(item, column, rowIndex)}
+                    </Text>
+                  ) : (
+                    getCellValue(item, column, rowIndex)
+                  )}
+                </View>
+              ))}
+            </Pressable>
+          ))
+        )}
+      </View>
+    </ScrollView>
+  );
+}
+
+export const Table = forwardRef(TableComponent) as <T extends Record<string, any>>(
+  props: TableProps<T> & { ref?: React.Ref<View> }
+) => React.ReactElement;
+
+const styles = StyleSheet.create({
+  table: {
+    borderWidth: 1,
+    borderColor: colors.border.disabled,
+    borderRadius: borderRadius.md,
+    overflow: 'hidden',
+    minWidth: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    backgroundColor: colors.background.secondary,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  headerCell: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerText: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  stripedRow: {
+    backgroundColor: colors.background.secondary,
+  },
+  cell: {},
+  cellText: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.default,
+  },
+  flexCell: {
+    flex: 1,
+    minWidth: 100,
+  },
+  smCell: {
+    paddingVertical: spacing['2x'],
+    paddingHorizontal: spacing['3x'],
+  },
+  mdCell: {
+    paddingVertical: spacing['3x'],
+    paddingHorizontal: spacing['4x'],
+  },
+  lgCell: {
+    paddingVertical: spacing['4x'],
+    paddingHorizontal: spacing['6x'],
+  },
+  alignLeft: {
+    justifyContent: 'flex-start',
+  },
+  alignCenter: {
+    justifyContent: 'center',
+  },
+  alignRight: {
+    justifyContent: 'flex-end',
+  },
+  sortIcon: {
+    marginLeft: spacing.base,
+  },
+  emptyState: {
+    padding: spacing['8x'],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.secondary,
+  },
+});

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { Table, type TableProps, type TableColumn } from './Table';
+

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from './Text';
+import { VStack } from '../VStack';
+import { colors, spacing } from '../../styles/tokens';
+
+const meta: Meta<typeof Text> = {
+  title: 'Components/Text',
+  component: Text,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['body', 'caption', 'label', 'small'],
+    },
+    weight: {
+      control: 'select',
+      options: ['regular', 'medium', 'semiBold', 'bold'],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+    },
+  },
+  args: {
+    children: 'The quick brown fox jumps over the lazy dog.',
+    variant: 'body',
+    weight: 'regular',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text variant="body">Body Text (16px) - Used for longer sections of text</Text>
+      <Text variant="caption">Caption Text (13px) - Used in limited real estate</Text>
+      <Text variant="label">Label Text (14px) - Used for form labels, badges</Text>
+      <Text variant="small">Small Text (12px) - Used for small annotations</Text>
+    </VStack>
+  ),
+};
+
+export const Weights: Story = {
+  render: () => (
+    <VStack space={spacing.sm}>
+      <Text weight="regular">Regular (400) - Normal text weight</Text>
+      <Text weight="medium">Medium (500) - Slightly emphasized</Text>
+      <Text weight="semiBold">Semi Bold (600) - Strong emphasis</Text>
+      <Text weight="bold">Bold (700) - Maximum emphasis</Text>
+    </VStack>
+  ),
+};
+
+export const Styling: Story = {
+  render: () => (
+    <VStack space={spacing.sm}>
+      <Text color="#00A0CC">Custom Color Text</Text>
+      <Text strikethrough>Strikethrough Text</Text>
+      <Text underline>Underlined Text</Text>
+      <Text italic>Italic Text</Text>
+      <Text transform="uppercase">Uppercase Text</Text>
+    </VStack>
+  ),
+};
+
+export const Truncation: Story = {
+  render: () => (
+    <VStack space={spacing.md} style={{ width: 250 }}>
+      <Text truncate>
+        This is a very long text that will be truncated to a single line with ellipsis.
+      </Text>
+      <Text noOfLines={2}>
+        This is a very long text that will be truncated after two lines. It continues with
+        more content that should be cut off and show an ellipsis at the end.
+      </Text>
+    </VStack>
+  ),
+};
+
+export const Alignment: Story = {
+  render: () => (
+    <VStack space={spacing.sm}>
+      <Text align="left">Left aligned text</Text>
+      <Text align="center">Center aligned text</Text>
+      <Text align="right">Right aligned text</Text>
+    </VStack>
+  ),
+};
+

package/src/components/Text/Text.tsx

@@ -0,0 +1,119 @@
+/**
+ * Text Component
+ * Core typography component with variants and styling
+ */
+
+import React, { forwardRef } from 'react';
+import { Text as RNText, TextProps as RNTextProps, TextStyle, StyleSheet } from 'react-native';
+import { colors, typography } from '../../styles/tokens';
+
+export interface TextProps extends RNTextProps {
+  /** Text variant */
+  variant?: 'body' | 'caption' | 'label' | 'small';
+  /** Font weight */
+  weight?: 'regular' | 'medium' | 'semiBold' | 'bold';
+  /** Text color */
+  color?: string;
+  /** Text alignment */
+  align?: TextStyle['textAlign'];
+  /** Transform text */
+  transform?: TextStyle['textTransform'];
+  /** Strikethrough */
+  strikethrough?: boolean;
+  /** Underline */
+  underline?: boolean;
+  /** Italic */
+  italic?: boolean;
+  /** Truncate with ellipsis */
+  truncate?: boolean;
+  /** Number of lines before truncating */
+  noOfLines?: number;
+}
+
+export const Text = forwardRef<RNText, TextProps>(
+  (
+    {
+      style,
+      variant = 'body',
+      weight = 'regular',
+      color,
+      align,
+      transform,
+      strikethrough,
+      underline,
+      italic,
+      truncate,
+      noOfLines,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const textDecorationLine = [
+      strikethrough && 'line-through',
+      underline && 'underline',
+    ]
+      .filter(Boolean)
+      .join(' ') as TextStyle['textDecorationLine'];
+
+    return (
+      <RNText
+        ref={ref}
+        numberOfLines={truncate ? 1 : noOfLines}
+        ellipsizeMode={truncate || noOfLines ? 'tail' : undefined}
+        style={[
+          styles.base,
+          styles[variant],
+          styles[`weight${weight.charAt(0).toUpperCase() + weight.slice(1)}` as keyof typeof styles],
+          color && { color },
+          align && { textAlign: align },
+          transform && { textTransform: transform },
+          textDecorationLine && { textDecorationLine },
+          italic && { fontStyle: 'italic' },
+          style,
+        ]}
+        {...props}
+      >
+        {children}
+      </RNText>
+    );
+  }
+);
+
+Text.displayName = 'Text';
+
+const styles = StyleSheet.create({
+  base: {
+    color: colors.text.default,
+  },
+  body: {
+    fontSize: typography.fontSize.body,
+    lineHeight: typography.fontSize.body * typography.lineHeight.tight,
+  },
+  caption: {
+    fontSize: typography.fontSize.caption,
+    lineHeight: typography.fontSize.caption * typography.lineHeight.normal,
+    color: colors.text.secondary,
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    lineHeight: typography.fontSize.componentLabel * typography.lineHeight.normal,
+  },
+  small: {
+    fontSize: typography.fontSize.small,
+    lineHeight: typography.fontSize.small * typography.lineHeight.normal,
+  },
+  weightRegular: {
+    fontWeight: typography.fontWeight.regular,
+  },
+  weightMedium: {
+    fontWeight: typography.fontWeight.medium,
+  },
+  weightSemiBold: {
+    fontWeight: typography.fontWeight.semiBold,
+  },
+  weightBold: {
+    fontWeight: typography.fontWeight.bold,
+  },
+});
+

package/src/components/Text/index.ts

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