@urbint/cl 1.0.1

package/docs/data/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Data Exports
+ */
+
+export * from './colorTokens';
+export * from './componentData';
+

package/docs/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Documentation Exports
+ */
+
+// Types
+export * from './types';
+
+// Theme and navigation
+export * from './theme';
+export * from './navigation';
+
+// Data
+export * from './data';
+
+// Components
+export * from './components';
+
+// Pages
+export * from './pages';

package/docs/navigation.ts

@@ -0,0 +1,94 @@
+/**
+ * Navigation Configuration
+ */
+
+import { NavItem } from './types';
+
+export const NAV_ITEMS: NavItem[] = [
+  {
+    id: 'getting-started',
+    title: 'Getting Started',
+    icon: '🚀',
+    children: [
+      { id: 'introduction', title: 'Introduction' },
+      { id: 'installation', title: 'Installation' },
+      { id: 'quick-start', title: 'Quick Start' },
+    ],
+  },
+  {
+    id: 'design-system',
+    title: 'Design System',
+    icon: '🎨',
+    children: [
+      { id: 'colors', title: 'Colors' },
+      { id: 'typography', title: 'Typography' },
+      { id: 'spacing', title: 'Spacing' },
+      { id: 'elevation', title: 'Elevation' },
+    ],
+  },
+  {
+    id: 'customization',
+    title: 'Customization',
+    icon: '⚙️',
+    children: [
+      { id: 'theming', title: 'Theming' },
+      { id: 'dark-mode', title: 'Dark Mode' },
+      { id: 'custom-tokens', title: 'Custom Tokens' },
+    ],
+  },
+  {
+    id: 'components',
+    title: 'Components',
+    icon: '📦',
+    children: [
+      // Layout
+      { id: 'component-box', title: 'Box' },
+      { id: 'component-hstack', title: 'HStack' },
+      { id: 'component-vstack', title: 'VStack' },
+      { id: 'component-center', title: 'Center' },
+      { id: 'component-grid', title: 'Grid' },
+      { id: 'component-divider', title: 'Divider' },
+      // Typography
+      { id: 'component-text', title: 'Text' },
+      { id: 'component-heading', title: 'Heading' },
+      { id: 'component-link', title: 'Link' },
+      // Form Controls
+      { id: 'component-button', title: 'Button' },
+      { id: 'component-input', title: 'Input' },
+      { id: 'component-textarea', title: 'Textarea' },
+      { id: 'component-checkbox', title: 'Checkbox' },
+      { id: 'component-radio', title: 'Radio' },
+      { id: 'component-switch', title: 'Switch' },
+      { id: 'component-select', title: 'Select' },
+      { id: 'component-slider', title: 'Slider' },
+      { id: 'component-formcontrol', title: 'FormControl' },
+      // Feedback
+      { id: 'component-alert', title: 'Alert' },
+      { id: 'component-toast', title: 'Toast' },
+      { id: 'component-progress', title: 'Progress' },
+      { id: 'component-spinner', title: 'Spinner' },
+      { id: 'component-skeleton', title: 'Skeleton' },
+      // Data Display
+      { id: 'component-avatar', title: 'Avatar' },
+      { id: 'component-badge', title: 'Badge' },
+      { id: 'component-card', title: 'Card' },
+      { id: 'component-table', title: 'Table' },
+      { id: 'component-icon', title: 'Icon' },
+      { id: 'component-image', title: 'Image' },
+      // Actions
+      { id: 'component-pressable', title: 'Pressable' },
+      { id: 'component-fab', title: 'Fab' },
+      { id: 'component-accordion', title: 'Accordion' },
+      // Overlay
+      { id: 'component-modal', title: 'Modal' },
+      { id: 'component-drawer', title: 'Drawer' },
+      { id: 'component-alertdialog', title: 'AlertDialog' },
+      { id: 'component-popover', title: 'Popover' },
+      { id: 'component-tooltip', title: 'Tooltip' },
+      { id: 'component-menu', title: 'Menu' },
+      { id: 'component-actionsheet', title: 'ActionSheet' },
+      // Utility
+      { id: 'component-portal', title: 'Portal' },
+    ],
+  },
+];

package/docs/pages/ColorsPage.tsx

@@ -0,0 +1,226 @@
+/**
+ * Colors Documentation Page
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { COLOR_GROUPS } from '../data/colorTokens';
+import { CodeBlock } from '../components/CodeBlock';
+import { colors, spacing, fontSize } from '../theme';
+
+const ColorSwatch = ({ name, value, description }: { name: string; value: string; description?: string }) => {
+  const isLight = value === '#FFFFFF' || value === '#F9FAFB' || value === '#F3F4F6';
+  
+  return (
+    <View style={styles.swatchContainer}>
+      <View style={[styles.swatch, { backgroundColor: value, borderWidth: isLight ? 1 : 0, borderColor: colors.borderLight }]}>
+        <Text style={[styles.swatchValue, { color: isLight ? colors.textPrimary : colors.textInverse }]}>
+          {value}
+        </Text>
+      </View>
+      <View style={styles.swatchInfo}>
+        <Text style={styles.swatchName}>{name}</Text>
+        {description && <Text style={styles.swatchDesc}>{description}</Text>}
+      </View>
+    </View>
+  );
+};
+
+export const ColorsPage = () => {
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Colors</Text>
+        <Text style={styles.subtitle}>
+          A comprehensive color palette designed for enterprise applications with proper contrast ratios and semantic meaning.
+        </Text>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Usage</Text>
+          <Text style={styles.paragraph}>
+            Access colors through the theme object or use semantic color names in your components:
+          </Text>
+          <CodeBlock 
+            language="tsx"
+            code={`import { useUnistyles } from 'react-native-unistyles';
+
+function MyComponent() {
+  const { theme } = useUnistyles();
+  
+  return (
+    <Box bg={theme.colors.background.primary}>
+      <Text color={theme.colors.text.primary}>
+        Hello World
+      </Text>
+    </Box>
+  );
+}
+
+// Or use semantic props directly
+<Text color="text.secondary">Subtitle</Text>
+<Button variant="primary">Submit</Button>`}
+          />
+        </View>
+
+        {COLOR_GROUPS.map((group) => (
+          <View key={group.name} style={styles.colorSection}>
+            <Text style={styles.colorGroupTitle}>{group.name}</Text>
+            <Text style={styles.colorGroupDesc}>{group.description}</Text>
+            <View style={styles.swatchGrid}>
+              {group.colors.map((color) => (
+                <ColorSwatch 
+                  key={color.name} 
+                  name={color.name} 
+                  value={color.value} 
+                  description={color.description}
+                />
+              ))}
+            </View>
+          </View>
+        ))}
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Customizing Colors</Text>
+          <Text style={styles.paragraph}>
+            Override default colors by extending the theme configuration:
+          </Text>
+          <CodeBlock 
+            language="tsx"
+            code={`// styles/unistyles.ts
+import { StyleSheet } from 'react-native-unistyles';
+
+const customTheme = {
+  colors: {
+    brand: {
+      primary: '#YOUR_PRIMARY_COLOR',
+      secondary: '#YOUR_SECONDARY_COLOR',
+    },
+    // Override other colors as needed
+  },
+};
+
+StyleSheet.configure({
+  themes: {
+    light: customTheme,
+    dark: customDarkTheme,
+  },
+});`}
+          />
+        </View>
+
+        <View style={styles.infoBox}>
+          <Text style={styles.infoTitle}>🎨 Design Tip</Text>
+          <Text style={styles.infoText}>
+            All colors are designed to meet WCAG 2.1 contrast requirements. Brand colors 
+            maintain a 4.5:1 contrast ratio with background colors for accessibility.
+          </Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: spacing['2xl'],
+    maxWidth: 900,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  subtitle: {
+    fontSize: fontSize.xl,
+    color: colors.textSecondary,
+    lineHeight: 28,
+    marginBottom: spacing['2xl'],
+  },
+  section: {
+    marginBottom: spacing['2xl'],
+  },
+  sectionTitle: {
+    fontSize: fontSize['2xl'],
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  paragraph: {
+    fontSize: fontSize.lg,
+    color: colors.textSecondary,
+    lineHeight: 26,
+    marginBottom: spacing.lg,
+  },
+  colorSection: {
+    marginBottom: spacing['3xl'],
+  },
+  colorGroupTitle: {
+    fontSize: fontSize['2xl'],
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.xs,
+  },
+  colorGroupDesc: {
+    fontSize: fontSize.base,
+    color: colors.textTertiary,
+    marginBottom: spacing.lg,
+  },
+  swatchGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.lg,
+  },
+  swatchContainer: {
+    minWidth: 180,
+    flex: 1,
+  },
+  swatch: {
+    height: 80,
+    borderRadius: 8,
+    justifyContent: 'flex-end',
+    padding: spacing.sm,
+    marginBottom: spacing.sm,
+  },
+  swatchValue: {
+    fontFamily: 'monospace',
+    fontSize: fontSize.sm,
+    fontWeight: '500',
+  },
+  swatchInfo: {
+    gap: spacing.xs,
+  },
+  swatchName: {
+    fontSize: fontSize.base,
+    fontWeight: '600',
+    color: colors.textPrimary,
+  },
+  swatchDesc: {
+    fontSize: fontSize.sm,
+    color: colors.textTertiary,
+    lineHeight: 18,
+  },
+  infoBox: {
+    backgroundColor: '#EFF6FF',
+    padding: spacing.lg,
+    borderRadius: 12,
+    borderLeftWidth: 4,
+    borderLeftColor: colors.info,
+    marginTop: spacing.xl,
+  },
+  infoTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: '600',
+    color: colors.info,
+    marginBottom: spacing.sm,
+  },
+  infoText: {
+    fontSize: fontSize.base,
+    color: colors.textSecondary,
+    lineHeight: 22,
+  },
+});
+

package/docs/pages/ComponentPage.tsx

@@ -0,0 +1,235 @@
+/**
+ * Component Documentation Page
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { COMPONENT_CATEGORIES } from '../data/componentData';
+import { PropTable } from '../components/PropTable';
+import { CodeBlock } from '../components/CodeBlock';
+import { colors, spacing, fontSize } from '../theme';
+
+type ComponentPageProps = {
+  componentId: string;
+};
+
+// Map component IDs to component names
+const componentIdMap: Record<string, string> = {
+  'box': 'Box',
+  'hstack': 'HStack',
+  'vstack': 'VStack',
+  'center': 'Center',
+  'grid': 'Grid',
+  'divider': 'Divider',
+  'text': 'Text',
+  'heading': 'Heading',
+  'link': 'Link',
+  'button': 'Button',
+  'input': 'Input',
+  'textarea': 'Textarea',
+  'checkbox': 'Checkbox',
+  'radio': 'Radio',
+  'switch': 'Switch',
+  'select': 'Select',
+  'slider': 'Slider',
+  'formcontrol': 'FormControl',
+  'alert': 'Alert',
+  'toast': 'Toast',
+  'progress': 'Progress',
+  'spinner': 'Spinner',
+  'skeleton': 'Skeleton',
+  'avatar': 'Avatar',
+  'badge': 'Badge',
+  'card': 'Card',
+  'table': 'Table',
+  'icon': 'Icon',
+  'image': 'Image',
+  'pressable': 'Pressable',
+  'fab': 'Fab',
+  'accordion': 'Accordion',
+  'modal': 'Modal',
+  'drawer': 'Drawer',
+  'alertdialog': 'AlertDialog',
+  'popover': 'Popover',
+  'tooltip': 'Tooltip',
+  'menu': 'Menu',
+  'actionsheet': 'ActionSheet',
+  'portal': 'Portal',
+};
+
+// Find component across all categories
+const findComponent = (componentName: string) => {
+  for (const category of COMPONENT_CATEGORIES) {
+    const component = category.components.find(
+      c => c.name.toLowerCase() === componentName.toLowerCase()
+    );
+    if (component) {
+      return { component, categoryName: category.name };
+    }
+  }
+  return null;
+};
+
+export const ComponentPage = ({ componentId }: ComponentPageProps) => {
+  const componentName = componentIdMap[componentId.toLowerCase()] || componentId;
+  const result = findComponent(componentName);
+
+  if (!result) {
+    return (
+      <ScrollView style={styles.container}>
+        <View style={styles.content}>
+          <Text style={styles.title}>Component not found</Text>
+          <Text style={styles.subtitle}>
+            The component "{componentId}" could not be found.
+          </Text>
+        </View>
+      </ScrollView>
+    );
+  }
+
+  const { component, categoryName } = result;
+
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={styles.content}>
+        {/* Category Badge */}
+        <View style={styles.categoryBadge}>
+          <Text style={styles.categoryBadgeText}>{categoryName}</Text>
+        </View>
+
+        {/* Component Header */}
+        <Text style={styles.componentTitle}>{component.name}</Text>
+        <Text style={styles.componentDesc}>{component.description}</Text>
+
+        {/* Import */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Import</Text>
+          <CodeBlock 
+            language="tsx"
+            code={`import { ${component.name} } from '@urbint/cl';`}
+          />
+        </View>
+
+        {/* Props */}
+        {component.props && component.props.length > 0 && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Props</Text>
+            <PropTable props={component.props} />
+          </View>
+        )}
+
+        {/* Examples */}
+        {component.examples && component.examples.length > 0 && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Examples</Text>
+            {component.examples.map((example, index) => (
+              <View key={index} style={styles.exampleCard}>
+                <View style={styles.exampleHeader}>
+                  <Text style={styles.exampleTitle}>{example.title}</Text>
+                  {example.description && (
+                    <Text style={styles.exampleDesc}>{example.description}</Text>
+                  )}
+                </View>
+                <View style={styles.examplePreview}>
+                  {example.render()}
+                </View>
+                {example.code && (
+                  <View style={styles.exampleCode}>
+                    <CodeBlock code={example.code} />
+                  </View>
+                )}
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: spacing['2xl'],
+    maxWidth: 900,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  subtitle: {
+    fontSize: fontSize.xl,
+    color: colors.textSecondary,
+    lineHeight: 28,
+    marginBottom: spacing['2xl'],
+  },
+  categoryBadge: {
+    backgroundColor: colors.bgTertiary,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.xs,
+    borderRadius: 16,
+    alignSelf: 'flex-start',
+    marginBottom: spacing.lg,
+  },
+  categoryBadgeText: {
+    fontSize: fontSize.sm,
+    fontWeight: '500',
+    color: colors.textSecondary,
+  },
+  componentTitle: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: colors.textPrimary,
+    marginBottom: spacing.sm,
+  },
+  componentDesc: {
+    fontSize: fontSize.lg,
+    color: colors.textSecondary,
+    lineHeight: 26,
+    marginBottom: spacing['2xl'],
+  },
+  section: {
+    marginBottom: spacing['2xl'],
+  },
+  sectionTitle: {
+    fontSize: fontSize['2xl'],
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.lg,
+  },
+  exampleCard: {
+    borderWidth: 1,
+    borderColor: colors.borderLight,
+    borderRadius: 12,
+    overflow: 'hidden',
+    marginBottom: spacing.lg,
+  },
+  exampleHeader: {
+    backgroundColor: colors.bgTertiary,
+    padding: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.borderLight,
+  },
+  exampleTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: '600',
+    color: colors.textPrimary,
+  },
+  exampleDesc: {
+    fontSize: fontSize.base,
+    color: colors.textTertiary,
+    marginTop: spacing.xs,
+  },
+  examplePreview: {
+    padding: spacing.lg,
+    backgroundColor: colors.bgSecondary,
+  },
+  exampleCode: {
+    borderTopWidth: 1,
+    borderTopColor: colors.borderLight,
+  },
+});