@cdx-ui/components 0.0.1-alpha.1

package/src/components/Select/index.tsx

@@ -0,0 +1,215 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import {
+  createSelect,
+  type ISelectContentProps,
+  type ISelectItemLabelProps,
+  type ISelectItemProps,
+  type ISelectProps,
+  type ISelectTriggerProps,
+  type ISelectValueProps,
+} from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import {
+  type SelectVariantProps,
+  selectContentVariants,
+  selectIconVariants,
+  selectItemLabelVariants,
+  selectItemVariants,
+  selectTriggerVariants,
+  selectValueVariants,
+} from './styles';
+
+const SCOPE = 'SELECT';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps;
+
+const SelectPrimitive = createSelect({
+  Root,
+  Trigger: Pressable,
+  Value: Text,
+  Icon: View,
+  Content: View,
+  Item: Pressable,
+  ItemLabel: Text,
+});
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps {
+  className?: string;
+}
+
+const SelectRoot = forwardRef<View, SelectProps>(
+  ({ variant = 'outline', size = 'md', className, children, style, ...props }, ref) => {
+    return (
+      <SelectPrimitive
+        ref={ref}
+        className={className}
+        style={style}
+        context={{ variant, size }}
+        {...props}
+      >
+        {children}
+      </SelectPrimitive>
+    );
+  },
+);
+
+SelectRoot.displayName = 'Select';
+
+// =============================================================================
+// STYLED TRIGGER COMPONENT
+// =============================================================================
+
+export interface SelectTriggerProps extends ISelectTriggerProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SelectTrigger = forwardRef<View, SelectTriggerProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { variant, size } = useSelectStyleContext();
+
+    const computedClassName = cn(selectTriggerVariants({ variant, size }), className);
+
+    return (
+      <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </SelectPrimitive.Trigger>
+    );
+  },
+);
+
+SelectTrigger.displayName = 'Select.Trigger';
+
+// =============================================================================
+// STYLED VALUE COMPONENT
+// =============================================================================
+
+export interface SelectValueProps extends TextProps, ISelectValueProps {
+  className?: string;
+}
+
+const SelectValue = forwardRef<Text, SelectValueProps>(({ className, style, ...props }, ref) => {
+  const { variant, size } = useSelectStyleContext();
+
+  const computedClassName = cn(selectValueVariants({ variant, size }), className);
+
+  return <SelectPrimitive.Value ref={ref} className={computedClassName} style={style} {...props} />;
+});
+
+SelectValue.displayName = 'Select.Value';
+
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
+
+export interface SelectIconProps extends ViewProps {
+  className?: string;
+}
+
+const SelectIcon = forwardRef<View, SelectIconProps>(({ className, style, ...props }, ref) => {
+  const { variant, size } = useSelectStyleContext();
+
+  const computedClassName = cn(selectIconVariants({ variant, size }), className);
+
+  return <SelectPrimitive.Icon ref={ref} className={computedClassName} style={style} {...props} />;
+});
+
+SelectIcon.displayName = 'Select.Icon';
+
+// =============================================================================
+// STYLED CONTENT COMPONENT
+// =============================================================================
+
+export interface SelectContentProps extends ViewProps, ISelectContentProps {
+  className?: string;
+}
+
+const SelectContent = forwardRef<View, SelectContentProps>(
+  ({ className, style, ...props }, ref) => {
+    const computedClassName = cn(selectContentVariants(), className);
+
+    return (
+      <SelectPrimitive.Content ref={ref} className={computedClassName} style={style} {...props} />
+    );
+  },
+);
+
+SelectContent.displayName = 'Select.Content';
+
+// =============================================================================
+// STYLED ITEM COMPONENT
+// =============================================================================
+
+export interface SelectItemProps extends ISelectItemProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SelectItem = forwardRef<View, SelectItemProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useSelectStyleContext();
+
+    const computedClassName = cn(selectItemVariants({ size }), className);
+
+    return (
+      <SelectPrimitive.Item ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </SelectPrimitive.Item>
+    );
+  },
+);
+
+SelectItem.displayName = 'Select.Item';
+
+// =============================================================================
+// STYLED ITEM LABEL COMPONENT
+// =============================================================================
+
+export interface SelectItemLabelProps extends TextProps, ISelectItemLabelProps {
+  className?: string;
+}
+
+const SelectItemLabel = forwardRef<Text, SelectItemLabelProps>(
+  ({ className, style, ...props }, ref) => {
+    const { size } = useSelectStyleContext();
+
+    const computedClassName = cn(selectItemLabelVariants({ size }), className);
+
+    return (
+      <SelectPrimitive.ItemLabel ref={ref} className={computedClassName} style={style} {...props} />
+    );
+  },
+);
+
+SelectItemLabel.displayName = 'Select.ItemLabel';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type SelectCompoundComponent = typeof SelectRoot & {
+  Trigger: typeof SelectTrigger;
+  Value: typeof SelectValue;
+  Icon: typeof SelectIcon;
+  Content: typeof SelectContent;
+  Item: typeof SelectItem;
+  ItemLabel: typeof SelectItemLabel;
+};
+
+export const Select = Object.assign(SelectRoot, {
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Icon: SelectIcon,
+  Content: SelectContent,
+  Item: SelectItem,
+  ItemLabel: SelectItemLabel,
+}) as SelectCompoundComponent;
+
+export type { SelectVariantProps } from './styles';

package/src/components/Select/styles.ts

@@ -0,0 +1,168 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// ── Trigger ─────────────────────────────────────────────────
+
+export const selectTriggerVariants = cva(
+  [
+    'flex-row items-center justify-between',
+    'rounded-lg',
+    'transition-colors duration-150',
+    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none',
+    'data-[readonly=true]:cursor-default',
+    'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-blue-500 data-[focus-visible=true]:ring-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        outline: [
+          'bg-white border border-gray-300',
+          Platform.select({
+            default: 'data-[active=true]:border-gray-400',
+            web: 'data-[hover=true]:border-gray-400 data-[active=true]:data-[hover=true]:border-gray-500',
+          }),
+          'data-[state=open]:data-[invalid=false]:border-blue-500',
+          'data-[invalid=true]:border-red-500',
+          'data-[readonly=true]:bg-gray-50',
+        ],
+        filled: [
+          'bg-gray-100 border border-transparent',
+          Platform.select({
+            default: 'data-[active=true]:bg-gray-200',
+            web: 'data-[hover=true]:bg-gray-200 data-[active=true]:data-[hover=true]:bg-gray-300',
+          }),
+          'data-[state=open]:border-blue-500',
+          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
+          'data-[readonly=true]:bg-gray-200',
+        ],
+        ghost: [
+          'bg-transparent border border-transparent',
+          Platform.select({
+            default: 'data-[active=true]:bg-gray-100',
+            web: 'data-[hover=true]:bg-gray-50 data-[active=true]:data-[hover=true]:bg-gray-100',
+          }),
+          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
+        ],
+      },
+      size: {
+        sm: 'h-8 px-2.5 gap-1.5',
+        md: 'h-10 px-3 gap-2',
+        lg: 'h-12 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      size: 'md',
+    },
+  },
+);
+
+// ── Value ───────────────────────────────────────────────────
+
+export const selectValueVariants = cva(
+  ['flex-1', 'data-[placeholder=true]:text-gray-400', 'data-[invalid=true]:text-red-600'],
+  {
+    variants: {
+      variant: {
+        outline: 'text-gray-900',
+        filled: 'text-gray-900',
+        ghost: 'text-gray-900',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      size: 'md',
+    },
+  },
+);
+
+// ── Icon ────────────────────────────────────────────────────
+
+export const selectIconVariants = cva(
+  ['items-center justify-center', 'data-[invalid=true]:text-red-500'],
+  {
+    variants: {
+      variant: {
+        outline: 'text-gray-500',
+        filled: 'text-gray-500',
+        ghost: 'text-gray-400',
+      },
+      size: {
+        sm: 'h-4 w-4',
+        md: 'h-5 w-5',
+        lg: 'h-6 w-6',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      size: 'md',
+    },
+  },
+);
+
+// ── Content ─────────────────────────────────────────────────
+
+export const selectContentVariants = cva([
+  'bg-white',
+  'border border-gray-200',
+  'overflow-hidden',
+  'rounded-lg',
+  Platform.select({
+    web: 'shadow-lg',
+    default: '',
+  }),
+  'max-h-60',
+  'py-1',
+]);
+
+// ── Item ────────────────────────────────────────────────────
+
+export const selectItemVariants = cva(
+  [
+    'flex-row items-center',
+    'transition-colors duration-100',
+    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
+    'data-[state=checked]:bg-blue-50',
+    Platform.select({
+      default: 'data-[active=true]:bg-gray-100',
+      web: 'data-[hover=true]:bg-gray-100 data-[active=true]:data-[hover=true]:bg-gray-200 data-[highlighted=true]:bg-blue-50',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'px-2.5 py-1.5',
+        md: 'px-3 py-2',
+        lg: 'px-4 py-2.5',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+// ── ItemLabel ───────────────────────────────────────────────
+
+export const selectItemLabelVariants = cva(
+  ['text-gray-900', 'data-[state=checked]:font-semibold', 'data-[state=checked]:text-blue-700'],
+  {
+    variants: {
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export type SelectVariantProps = VariantProps<typeof selectTriggerVariants>;

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,10 @@
+import { type ForwardedRef, forwardRef } from 'react';
+import { ActivityIndicator, type ActivityIndicatorProps } from 'react-native';
+
+export interface SpinnerProps extends ActivityIndicatorProps {}
+
+export const Spinner = forwardRef<ActivityIndicator, SpinnerProps>(
+  (props, ref: ForwardedRef<ActivityIndicator>) => <ActivityIndicator ref={ref} {...props} />,
+);
+
+Spinner.displayName = 'Spinner';

package/src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/src/components/Stack/HStack.tsx

@@ -0,0 +1,42 @@
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+// import { spacing } from '@cdx-ui/tokens';
+
+// TODO: Integrate with tokens (multiply by spacing)
+const spaceScale = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+  '2xl': 6,
+  '3xl': 7,
+  '4xl': 8,
+} as const;
+
+type StackSpace = keyof typeof spaceScale;
+
+export interface HStackProps extends ViewProps {
+  className?: string;
+  space?: StackSpace;
+  reversed?: boolean;
+}
+
+export const HStack = forwardRef<View, HStackProps>(
+  ({ space, reversed, style, className, children, ...restProps }, ref: ForwardedRef<View>) => {
+    const gap = space ? spaceScale[space] : undefined;
+    return (
+      <View
+        ref={ref}
+        className={className}
+        style={[{ flexDirection: reversed ? 'row-reverse' : 'row' }, gap ? { gap } : null, style]}
+        {...restProps}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+HStack.displayName = 'HStack';

package/src/components/Stack/VStack.tsx

@@ -0,0 +1,46 @@
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+// import { spacing } from '@cdx-ui/tokens';
+
+// TODO: Integrate with tokens (multiply by spacing)
+const spaceScale = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+  '2xl': 6,
+  '3xl': 7,
+  '4xl': 8,
+} as const;
+
+type StackSpace = keyof typeof spaceScale;
+
+export interface VStackProps extends ViewProps {
+  className?: string;
+  space?: StackSpace;
+  reversed?: boolean;
+}
+
+export const VStack = forwardRef<View, VStackProps>(
+  ({ space, reversed, style, className, children, ...restProps }, ref: ForwardedRef<View>) => {
+    const gap = space ? spaceScale[space] : undefined;
+    return (
+      <View
+        ref={ref}
+        className={className}
+        style={[
+          { flexDirection: reversed ? 'column-reverse' : 'column' },
+          gap ? { gap } : null,
+          style,
+        ]}
+        {...restProps}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+VStack.displayName = 'VStack';

package/src/components/Stack/index.ts

@@ -0,0 +1,2 @@
+export { HStack } from './HStack';
+export { VStack } from './VStack';

package/src/components/Text/Text.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from 'react';
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+
+type TypographyVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'caption'
+  | 'button'
+  | 'overline'
+  | 'display1'
+  | 'display2';
+
+interface VariantProps {
+  variant?: TypographyVariant;
+  className?: string;
+}
+
+export interface TextProps extends RNTextProps, VariantProps {}
+
+const joinClassNames = (...parts: (string | undefined | false)[]) =>
+  parts.filter(Boolean).join(' ');
+
+const buildTypographyClassName = (variant: TypographyVariant) =>
+  joinClassNames(
+    `[font-family:var(--type-${variant}-family)]`,
+    `[font-weight:var(--type-${variant}-weight)]`,
+    `text-[var(--type-${variant}-size)]`,
+    `leading-[var(--type-${variant}-lineHeight)]`,
+    `tracking-[var(--type-${variant}-letterSpacing)]`,
+    variant === 'overline' ? 'uppercase' : 'normal-case',
+  );
+
+export const Text = forwardRef<RNText, TextProps>(
+  ({ variant, children, style, className, ...restProps }, ref) => {
+    const variantKey = variant ?? 'body1';
+    const variantClassName = buildTypographyClassName(variantKey);
+    return (
+      <RNText
+        ref={ref}
+        className={joinClassNames(variantClassName, className)}
+        style={style}
+        {...restProps}
+      >
+        {children}
+      </RNText>
+    );
+  },
+);
+
+Text.displayName = 'Text';

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export * from './Text';

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './Box';
+export * from './Button';
+export * from './Input';
+export * from './Select';
+export { HStack, VStack } from './Stack';
+export * from './Text';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/styles.css

@@ -0,0 +1,6 @@
+@source './**/*.{ts,tsx}';
+
+/* TODO: Can we keep this? Check with Michael/Jack */
+*:focus {
+  outline: none;
+}

package/src/utils/WrapStringChild.tsx

@@ -0,0 +1,25 @@
+import { Children, Fragment, isValidElement, type ReactNode } from 'react';
+import { Text, type TextProps } from '../components/Text';
+
+interface WrapStringChildProps {
+  children: ReactNode;
+  textProps?: TextProps;
+}
+
+/** @deprecated Users should wrap their own children in a Text component themselves */
+export function WrapStringChild({ children, textProps }: WrapStringChildProps): ReactNode {
+  return Children.map(children, (child) => {
+    return typeof child === 'string' ||
+      typeof child === 'number' ||
+      (isValidElement(child) &&
+        child.type === Fragment &&
+        child.props &&
+        typeof child.props === 'object' &&
+        'children' in child.props &&
+        (typeof child.props.children === 'string' || typeof child.props.children === 'number')) ? (
+      <Text {...textProps}>{child}</Text>
+    ) : (
+      child
+    );
+  });
+}