@urbint/cl 1.0.1

package/src/components/Box/Box.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import { Box } from './Box';
+import { Text } from '../Text';
+import { VStack } from '../VStack';
+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 Box> = {
+  title: 'Layout/Box',
+  component: Box,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    p: { control: 'number' },
+    m: { control: 'number' },
+    bg: { control: 'color' },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
+    },
+    shadow: {
+      control: 'select',
+      options: ['5', '10', '20', '30', '40'],
+    },
+  },
+  args: {
+    p: spacing.lg,
+    bg: colors.feedback.info.background,
+    rounded: 'md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Box>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Box {...args}>
+      <Text>This is a Box component</Text>
+    </Box>
+  ),
+};
+
+export const Padding: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Padding Variations</Text>
+      <Box p={spacing.sm} bg={colors.feedback.info.background} rounded="md">
+        <Text>p={spacing.sm}</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.feedback.info.background} rounded="md">
+        <Text>p={spacing.lg}</Text>
+      </Box>
+      <Box p={spacing.xl} bg={colors.feedback.info.background} rounded="md">
+        <Text>p={spacing.xl}</Text>
+      </Box>
+      <Box px={spacing['2xl']} py={spacing.sm} bg={colors.feedback.info.background} rounded="md">
+        <Text>px={spacing['2xl']} py={spacing.sm}</Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const BorderRadius: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Border Radius Variations</Text>
+      <Box p={spacing.lg} bg={colors.feedback.error.background} rounded="none">
+        <Text>rounded="none"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.feedback.error.background} rounded="sm">
+        <Text>rounded="sm"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.feedback.error.background} rounded="md">
+        <Text>rounded="md"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.feedback.error.background} rounded="lg">
+        <Text>rounded="lg"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.feedback.error.background} rounded="xl">
+        <Text>rounded="xl"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.feedback.error.background} rounded="2xl">
+        <Text>rounded="2xl"</Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Shadows: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Shadow Elevations</Text>
+      <Box p={spacing.lg} bg={colors.background.default} rounded="lg" shadow="5">
+        <Text>shadow="5"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.background.default} rounded="lg" shadow="10">
+        <Text>shadow="10"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.background.default} rounded="lg" shadow="20">
+        <Text>shadow="20"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.background.default} rounded="lg" shadow="30">
+        <Text>shadow="30"</Text>
+      </Box>
+      <Box p={spacing.lg} bg={colors.background.default} rounded="lg" shadow="40">
+        <Text>shadow="40"</Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Sizing: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Fixed Sizes</Text>
+      <Box w={100} h={100} bg={colors.feedback.info.border} rounded="md" alignItems="center" justifyContent="center">
+        <Text>100x100</Text>
+      </Box>
+      <Box w={200} h={60} bg={colors.feedback.info.border} rounded="md" alignItems="center" justifyContent="center">
+        <Text>200x60</Text>
+      </Box>
+      <Box w="100%" h={80} bg={colors.feedback.info.border} rounded="md" alignItems="center" justifyContent="center">
+        <Text>100% width</Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const Borders: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Border Styles</Text>
+      <Box p={spacing.lg} borderWidth={1} borderColor={colors.border.default} rounded="md">
+        <Text>1px border</Text>
+      </Box>
+      <Box p={spacing.lg} borderWidth={2} borderColor={colors.border.active} rounded="md">
+        <Text>2px active border</Text>
+      </Box>
+      <Box p={spacing.lg} borderWidth={3} borderColor={colors.border.danger} rounded="lg">
+        <Text>3px danger border</Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+export const FlexLayout: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Flex Layout</Text>
+      <Box flexDirection="row" justifyContent="space-between" p={spacing.lg} bg={colors.feedback.success.background} rounded="md">
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm">
+          <Text>Item 1</Text>
+        </Box>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm">
+          <Text>Item 2</Text>
+        </Box>
+        <Box p={spacing.sm} bg={colors.feedback.success.border} rounded="sm">
+          <Text>Item 3</Text>
+        </Box>
+      </Box>
+      <Box flexDirection="row" alignItems="center" justifyContent="center" h={100} bg={colors.feedback.warning.background} rounded="md">
+        <Text>Centered Content</Text>
+      </Box>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Box/Box.tsx

@@ -0,0 +1,184 @@
+/**
+ * Box Component
+ * The most fundamental layout component - a div equivalent with styling props
+ */
+
+import React, { forwardRef } from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { spacing, SpacingToken, elevation } from '../../styles/tokens';
+
+/** Spacing value can be a token name or raw number */
+type SpacingValue = SpacingToken | number;
+
+/** Resolve spacing value to pixels */
+const resolveSpacing = (value: SpacingValue | undefined): number | undefined => {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return value;
+  return spacing[value];
+};
+
+export interface BoxProps extends ViewProps {
+  /** Padding - accepts token ('sm', 'md', 'lg') or number */
+  p?: SpacingValue;
+  px?: SpacingValue;
+  py?: SpacingValue;
+  pt?: SpacingValue;
+  pb?: SpacingValue;
+  pl?: SpacingValue;
+  pr?: SpacingValue;
+  /** Margin - accepts token ('sm', 'md', 'lg') or number */
+  m?: SpacingValue;
+  mx?: SpacingValue;
+  my?: SpacingValue;
+  mt?: SpacingValue;
+  mb?: SpacingValue;
+  ml?: SpacingValue;
+  mr?: SpacingValue;
+  /** Gap between children - accepts token or number */
+  gap?: SpacingValue;
+  /** Background color */
+  bg?: string;
+  /** Border radius */
+  rounded?: keyof typeof borderRadiusMap;
+  /** Width */
+  w?: ViewStyle['width'];
+  /** Height */
+  h?: ViewStyle['height'];
+  /** Min width */
+  minW?: ViewStyle['minWidth'];
+  /** Min height */
+  minH?: ViewStyle['minHeight'];
+  /** Max width */
+  maxW?: ViewStyle['maxWidth'];
+  /** Max height */
+  maxH?: ViewStyle['maxHeight'];
+  /** Flex */
+  flex?: number;
+  /** Flex direction */
+  flexDirection?: ViewStyle['flexDirection'];
+  /** Align items */
+  alignItems?: ViewStyle['alignItems'];
+  /** Justify content */
+  justifyContent?: ViewStyle['justifyContent'];
+  /** Position */
+  position?: ViewStyle['position'];
+  /** Overflow */
+  overflow?: ViewStyle['overflow'];
+  /** Border width */
+  borderWidth?: number;
+  /** Border color */
+  borderColor?: string;
+  /** Shadow level */
+  shadow?: '5' | '10' | '20' | '30' | '40';
+}
+
+const borderRadiusMap = {
+  none: 0,
+  sm: 2,
+  md: 4,
+  lg: 8,
+  xl: 12,
+  '2xl': 16,
+  '3xl': 24,
+  full: 9999,
+} as const;
+
+const shadowMap = {
+  '5': elevation['5'],
+  '10': elevation['10'],
+  '20': elevation['20'],
+  '30': elevation['30'],
+  '40': elevation['40'],
+} as const;
+
+export const Box = forwardRef<View, BoxProps>(
+  (
+    {
+      style,
+      p,
+      px,
+      py,
+      pt,
+      pb,
+      pl,
+      pr,
+      m,
+      mx,
+      my,
+      mt,
+      mb,
+      ml,
+      mr,
+      gap,
+      bg,
+      rounded,
+      w,
+      h,
+      minW,
+      minH,
+      maxW,
+      maxH,
+      flex,
+      flexDirection,
+      alignItems,
+      justifyContent,
+      position,
+      overflow,
+      borderWidth,
+      borderColor,
+      shadow,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const boxStyle: ViewStyle = {
+      ...(p !== undefined && { padding: resolveSpacing(p) }),
+      ...(px !== undefined && { paddingHorizontal: resolveSpacing(px) }),
+      ...(py !== undefined && { paddingVertical: resolveSpacing(py) }),
+      ...(pt !== undefined && { paddingTop: resolveSpacing(pt) }),
+      ...(pb !== undefined && { paddingBottom: resolveSpacing(pb) }),
+      ...(pl !== undefined && { paddingLeft: resolveSpacing(pl) }),
+      ...(pr !== undefined && { paddingRight: resolveSpacing(pr) }),
+      ...(m !== undefined && { margin: resolveSpacing(m) }),
+      ...(mx !== undefined && { marginHorizontal: resolveSpacing(mx) }),
+      ...(my !== undefined && { marginVertical: resolveSpacing(my) }),
+      ...(mt !== undefined && { marginTop: resolveSpacing(mt) }),
+      ...(mb !== undefined && { marginBottom: resolveSpacing(mb) }),
+      ...(ml !== undefined && { marginLeft: resolveSpacing(ml) }),
+      ...(mr !== undefined && { marginRight: resolveSpacing(mr) }),
+      ...(gap !== undefined && { gap: resolveSpacing(gap) }),
+      ...(bg !== undefined && { backgroundColor: bg }),
+      ...(rounded !== undefined && { borderRadius: borderRadiusMap[rounded] }),
+      ...(w !== undefined && { width: w }),
+      ...(h !== undefined && { height: h }),
+      ...(minW !== undefined && { minWidth: minW }),
+      ...(minH !== undefined && { minHeight: minH }),
+      ...(maxW !== undefined && { maxWidth: maxW }),
+      ...(maxH !== undefined && { maxHeight: maxH }),
+      ...(flex !== undefined && { flex }),
+      ...(flexDirection !== undefined && { flexDirection }),
+      ...(alignItems !== undefined && { alignItems }),
+      ...(justifyContent !== undefined && { justifyContent }),
+      ...(position !== undefined && { position }),
+      ...(overflow !== undefined && { overflow }),
+      ...(borderWidth !== undefined && { borderWidth }),
+      ...(borderColor !== undefined && { borderColor }),
+      ...(shadow !== undefined && shadowMap[shadow]),
+    };
+
+    return (
+      <View
+        ref={ref}
+        style={[boxStyle, style]}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+Box.displayName = 'Box';
+

package/src/components/Box/index.ts

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

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+import { View, StyleSheet } from 'react-native';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import Svg, { Path } from 'react-native-svg';
+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 Button> = {
+  title: 'Components/Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost', 'danger', 'outline'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    isLoading: {
+      control: 'boolean',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    fullWidth: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    children: 'Button',
+    variant: 'primary',
+    size: 'md',
+    isLoading: false,
+    isDisabled: false,
+    fullWidth: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Button Variants</Text>
+      <HStack space={spacing.sm} wrap>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="outline">Outline</Button>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Button Sizes</Text>
+      <HStack space={spacing.sm} alignItems="center">
+        <Button size="sm">Small</Button>
+        <Button size="md">Medium</Button>
+        <Button size="lg">Large</Button>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Button States</Text>
+      <HStack space={spacing.sm}>
+        <Button>Normal</Button>
+        <Button isLoading>Loading</Button>
+        <Button isDisabled>Disabled</Button>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => {
+    const PlusIcon = (
+      <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M12 5v14M5 12h14"
+          stroke={colors.white}
+          strokeWidth={2}
+          strokeLinecap="round"
+        />
+      </Svg>
+    );
+    const ArrowIcon = (
+      <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M5 12h14M12 5l7 7-7 7"
+          stroke={colors.white}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+    return (
+      <VStack space={spacing.md}>
+        <Text weight="semiBold">Buttons with Icons</Text>
+        <HStack space={spacing.sm}>
+          <Button leftIcon={PlusIcon}>Add Item</Button>
+          <Button rightIcon={ArrowIcon}>Continue</Button>
+        </HStack>
+      </VStack>
+    );
+  },
+};
+
+export const FullWidth: Story = {
+  render: () => (
+    <VStack space={spacing.md}>
+      <Text weight="semiBold">Full Width Button</Text>
+      <Button fullWidth>Full Width Button</Button>
+    </VStack>
+  ),
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+