@urbint/cl 1.0.1

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Skeleton, SkeletonText, SkeletonCircle } from './Skeleton';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+/**
+ * Story container with design system tokens
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <View style={styles.container}>{children}</View>
+);
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  args: {
+    width: '100%',
+    height: 20,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Skeleton Variants</Text>
+      <Skeleton variant="text" height={16} width="80%" />
+      <Skeleton variant="rectangular" height={100} />
+      <Skeleton variant="rounded" height={100} />
+      <HStack space={spacing.sm}>
+        <Skeleton variant="circular" width={48} height={48} />
+        <Skeleton variant="circular" width={48} height={48} />
+        <Skeleton variant="circular" width={48} height={48} />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const TextSkeleton: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Text Skeleton</Text>
+      <SkeletonText noOfLines={3} spacing={spacing.sm} />
+      <SkeletonText noOfLines={5} spacing={6} />
+    </VStack>
+  ),
+};
+
+export const CardSkeleton: Story = {
+  render: () => (
+    <VStack space={spacing.md} style={styles.cardSkeleton}>
+      <HStack space={spacing.md}>
+        <SkeletonCircle size={48} />
+        <VStack space={spacing.sm} style={{ flex: 1 }}>
+          <Skeleton variant="text" height={16} width="60%" />
+          <Skeleton variant="text" height={14} width="40%" />
+        </VStack>
+      </HStack>
+      <Skeleton variant="rectangular" height={120} />
+      <SkeletonText noOfLines={2} />
+      <HStack space={spacing.sm} justifyContent="flex-end">
+        <Skeleton variant="rounded" height={32} width={80} />
+        <Skeleton variant="rounded" height={32} width={80} />
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const ListSkeleton: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">List Loading State</Text>
+      {[1, 2, 3, 4].map((item) => (
+        <HStack key={item} space={spacing.md} style={styles.listItem}>
+          <SkeletonCircle size={40} />
+          <VStack space={6} style={{ flex: 1 }}>
+            <Skeleton variant="text" height={14} width="70%" />
+            <Skeleton variant="text" height={12} width="50%" />
+          </VStack>
+          <Skeleton variant="rounded" height={24} width={60} />
+        </HStack>
+      ))}
+    </VStack>
+  ),
+};
+
+export const WithContent: Story = {
+  render: () => {
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    
+    React.useEffect(() => {
+      const timer = setTimeout(() => setIsLoaded(true), 3000);
+      return () => clearTimeout(timer);
+    }, []);
+    
+    return (
+      <VStack space={spacing.md}>
+        <Text weight="semiBold">Loaded State (wait 3s)</Text>
+        <HStack space={spacing.md}>
+          <SkeletonCircle size={48} isLoaded={isLoaded}>
+            <Text>JD</Text>
+          </SkeletonCircle>
+          <VStack space={spacing.xs} style={{ flex: 1 }}>
+            <Skeleton variant="text" height={16} isLoaded={isLoaded}>
+              <Text weight="semiBold">John Doe</Text>
+            </Skeleton>
+            <Skeleton variant="text" height={14} width="60%" isLoaded={isLoaded}>
+              <Text variant="caption" color={colors.text.secondary}>Software Engineer</Text>
+            </Skeleton>
+          </VStack>
+        </HStack>
+      </VStack>
+    );
+  },
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+  cardSkeleton: {
+    padding: spacing.lg,
+    borderRadius: borderRadius.lg,
+    borderWidth: 1,
+    borderColor: colors.border.disabled,
+  },
+  listItem: {
+    padding: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+});
+

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,192 @@
+/**
+ * Skeleton Component
+ * Loading placeholder with shimmer effect
+ */
+
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { View, ViewProps, Animated, Dimensions, StyleSheet } from 'react-native';
+import { colors, borderRadius } from '../../styles/tokens';
+
+export interface SkeletonProps extends ViewProps {
+  /** Is loading */
+  isLoaded?: boolean;
+  /** Width */
+  width?: number | string;
+  /** Height */
+  height?: number | string;
+  /** Border radius */
+  borderRadius?: number;
+  /** Variant */
+  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
+  /** Start color */
+  startColor?: string;
+  /** End color */
+  endColor?: string;
+  /** Animation speed */
+  speed?: number;
+}
+
+export const Skeleton = forwardRef<View, SkeletonProps>(
+  (
+    {
+      style,
+      isLoaded = false,
+      width = '100%',
+      height = 20,
+      borderRadius: customBorderRadius,
+      variant = 'rectangular',
+      startColor,
+      endColor,
+      speed = 800,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const shimmerAnim = useRef(new Animated.Value(0)).current;
+    const screenWidth = Dimensions.get('window').width;
+
+    const bgStartColor = startColor || colors.background.secondary;
+    const bgEndColor = endColor || colors.background.tertiary;
+
+    useEffect(() => {
+      if (!isLoaded) {
+        Animated.loop(
+          Animated.timing(shimmerAnim, {
+            toValue: 1,
+            duration: speed,
+            useNativeDriver: true,
+          })
+        ).start();
+      }
+    }, [isLoaded, speed]);
+
+    if (isLoaded) {
+      return <>{children}</>;
+    }
+
+    const getVariantStyle = () => {
+      switch (variant) {
+        case 'text':
+          return { borderRadius: borderRadius.sm };
+        case 'circular':
+          return { borderRadius: 9999 };
+        case 'rounded':
+          return { borderRadius: borderRadius.lg };
+        default:
+          return { borderRadius: customBorderRadius || borderRadius.md };
+      }
+    };
+
+    const translateX = shimmerAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-screenWidth, screenWidth],
+    });
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          styles.skeleton,
+          { width, height, backgroundColor: bgStartColor },
+          getVariantStyle(),
+          style,
+        ]}
+        {...props}
+      >
+        <Animated.View
+          style={[
+            styles.shimmer,
+            {
+              backgroundColor: bgEndColor,
+              transform: [{ translateX }],
+            },
+          ]}
+        />
+      </View>
+    );
+  }
+);
+
+Skeleton.displayName = 'Skeleton';
+
+export interface SkeletonTextProps extends ViewProps {
+  /** Number of lines */
+  noOfLines?: number;
+  /** Line spacing */
+  spacing?: number;
+  /** Start color */
+  startColor?: string;
+  /** End color */
+  endColor?: string;
+  /** Is loaded */
+  isLoaded?: boolean;
+}
+
+export const SkeletonText = forwardRef<View, SkeletonTextProps>(
+  (
+    {
+      style,
+      noOfLines = 3,
+      spacing = 8,
+      startColor,
+      endColor,
+      isLoaded = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    if (isLoaded) {
+      return <>{children}</>;
+    }
+
+    return (
+      <View ref={ref} style={[styles.textContainer, style]} {...props}>
+        {Array.from({ length: noOfLines }).map((_, index) => (
+          <Skeleton
+            key={index}
+            variant="text"
+            height={14}
+            width={index === noOfLines - 1 ? '70%' : '100%'}
+            startColor={startColor}
+            endColor={endColor}
+            style={{ marginBottom: index < noOfLines - 1 ? spacing : 0 }}
+          />
+        ))}
+      </View>
+    );
+  }
+);
+
+SkeletonText.displayName = 'SkeletonText';
+
+export const SkeletonCircle = forwardRef<View, SkeletonProps>(
+  ({ size = 40, ...props }, ref) => (
+    <Skeleton
+      ref={ref}
+      variant="circular"
+      width={size as number}
+      height={size as number}
+      {...props}
+    />
+  )
+);
+
+SkeletonCircle.displayName = 'SkeletonCircle';
+
+const styles = StyleSheet.create({
+  skeleton: {
+    overflow: 'hidden',
+  },
+  shimmer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '100%',
+    opacity: 0.5,
+  },
+  textContainer: {
+    width: '100%',
+  },
+});

package/src/components/Skeleton/index.ts

@@ -0,0 +1,8 @@
+export {
+  Skeleton,
+  SkeletonText,
+  SkeletonCircle,
+  type SkeletonProps,
+  type SkeletonTextProps,
+} from './Skeleton';
+

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,363 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Slider } from './Slider';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+/**
+ * Story container with design system tokens
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <View style={styles.container}>{children}</View>
+);
+
+const meta: Meta<typeof Slider> = {
+  title: 'Forms/Slider',
+  component: Slider,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    colorScheme: {
+      control: 'select',
+      options: ['primary', 'success', 'danger'],
+    },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    isDisabled: { control: 'boolean' },
+    showValue: { control: 'boolean' },
+  },
+  args: {
+    min: 0,
+    max: 100,
+    defaultValue: 50,
+    size: 'md',
+    colorScheme: 'primary',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  render: (args) => <Slider {...args} />,
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Slider
+        label="Volume"
+        defaultValue={70}
+        showValue
+      />
+      <Slider
+        label="Brightness"
+        defaultValue={50}
+        showValue
+      />
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Slider Sizes</Text>
+      <Slider
+        label="Small"
+        size="sm"
+        defaultValue={30}
+        showValue
+      />
+      <Slider
+        label="Medium"
+        size="md"
+        defaultValue={50}
+        showValue
+      />
+      <Slider
+        label="Large"
+        size="lg"
+        defaultValue={70}
+        showValue
+      />
+    </VStack>
+  ),
+};
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Color Schemes</Text>
+      <Slider
+        label="Primary"
+        colorScheme="primary"
+        defaultValue={60}
+        showValue
+      />
+      <Slider
+        label="Success"
+        colorScheme="success"
+        defaultValue={80}
+        showValue
+      />
+      <Slider
+        label="Danger"
+        colorScheme="danger"
+        defaultValue={40}
+        showValue
+      />
+    </VStack>
+  ),
+};
+
+export const CustomRange: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Custom Ranges</Text>
+      <Slider
+        label="Temperature (°F)"
+        min={32}
+        max={100}
+        defaultValue={72}
+        showValue
+      />
+      <Slider
+        label="Year"
+        min={1990}
+        max={2024}
+        defaultValue={2020}
+        showValue
+      />
+      <Slider
+        label="Percentage"
+        min={0}
+        max={100}
+        defaultValue={75}
+        showValue
+      />
+    </VStack>
+  ),
+};
+
+export const Steps: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Different Step Values</Text>
+      <Slider
+        label="Step 1 (default)"
+        min={0}
+        max={100}
+        step={1}
+        defaultValue={50}
+        showValue
+      />
+      <Slider
+        label="Step 5"
+        min={0}
+        max={100}
+        step={5}
+        defaultValue={50}
+        showValue
+      />
+      <Slider
+        label="Step 10"
+        min={0}
+        max={100}
+        step={10}
+        defaultValue={50}
+        showValue
+      />
+      <Slider
+        label="Step 25"
+        min={0}
+        max={100}
+        step={25}
+        defaultValue={50}
+        showValue
+      />
+    </VStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={spacing.xl}>
+      <Text weight="semiBold">Slider States</Text>
+      <Slider
+        label="Normal"
+        defaultValue={50}
+        showValue
+      />
+      <Slider
+        label="Disabled"
+        defaultValue={50}
+        isDisabled
+        showValue
+      />
+    </VStack>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const ControlledSlider = () => {
+      const [value, setValue] = useState(50);
+      
+      return (
+        <VStack space={spacing.lg}>
+          <Text weight="semiBold">Controlled Slider</Text>
+          <Slider
+            label="Controlled Value"
+            value={value}
+            onChange={setValue}
+            showValue
+          />
+          <HStack space={spacing.sm}>
+            <Text variant="small" color={colors.text.secondary}>Current value: {value}</Text>
+          </HStack>
+          <HStack space={spacing.sm}>
+            <Box
+              p={spacing.sm}
+              bg={colors.feedback.info.background}
+              rounded="md"
+              style={{ cursor: 'pointer' }}
+              onTouchEnd={() => setValue(0)}
+            >
+              <Text variant="small">Set to 0</Text>
+            </Box>
+            <Box
+              p={spacing.sm}
+              bg={colors.feedback.info.background}
+              rounded="md"
+              style={{ cursor: 'pointer' }}
+              onTouchEnd={() => setValue(50)}
+            >
+              <Text variant="small">Set to 50</Text>
+            </Box>
+            <Box
+              p={spacing.sm}
+              bg={colors.feedback.info.background}
+              rounded="md"
+              style={{ cursor: 'pointer' }}
+              onTouchEnd={() => setValue(100)}
+            >
+              <Text variant="small">Set to 100</Text>
+            </Box>
+          </HStack>
+        </VStack>
+      );
+    };
+    
+    return <ControlledSlider />;
+  },
+};
+
+export const VolumeControl: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Volume Control</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+        <VStack space={spacing.lg}>
+          <HStack space={spacing.md} alignItems="center">
+            <Text>🔈</Text>
+            <Box flex={1}>
+              <Slider
+                min={0}
+                max={100}
+                defaultValue={70}
+              />
+            </Box>
+            <Text>🔊</Text>
+          </HStack>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const SettingsPanel: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Display Settings</Text>
+      <Box p={spacing.lg} bg={colors.background.default} rounded="lg" shadow="10">
+        <VStack space={spacing.xl}>
+          <Slider
+            label="Brightness"
+            defaultValue={80}
+            showValue
+            colorScheme="primary"
+          />
+          <Slider
+            label="Contrast"
+            defaultValue={50}
+            showValue
+            colorScheme="primary"
+          />
+          <Slider
+            label="Saturation"
+            defaultValue={60}
+            showValue
+            colorScheme="primary"
+          />
+          <Slider
+            label="Sharpness"
+            defaultValue={40}
+            showValue
+            colorScheme="primary"
+          />
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const PriceRange: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Price Range Filter</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+        <VStack space={spacing.lg}>
+          <Slider
+            label="Max Price"
+            min={0}
+            max={1000}
+            step={50}
+            defaultValue={500}
+            showValue
+          />
+          <Text variant="small" color={colors.text.secondary}>
+            Showing products up to $500
+          </Text>
+        </VStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+