@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/src/components/DataDisplay/DataListItem/DataListItem.tsx

@@ -0,0 +1,370 @@
+import * as React from 'react';
+import {
+  Image,
+  Pressable,
+  Text as RNText,
+  View as RNView,
+  useColorScheme,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ChevronRight, Check } from 'lucide-react-native';
+
+import { cn } from '../../../lib/utils';
+import { THEME } from '../../../lib/theme';
+import { Switch } from '../../Input/switch/Switch';
+
+// NativeWind interop
+cssInterop(RNView, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+cssInterop(Image, { className: 'style' });
+
+const View = RNView as any;
+const Text = RNText as any;
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const DataListItemVariants = {
+  density: ['comfortable', 'compact'] as const,
+  state: ['default', 'pressed', 'selected', 'disabled'] as const,
+  leadingType: ['avatar', 'icon', 'checkbox', 'image'] as const,
+  trailingType: ['chevron', 'switch'] as const,
+} as const;
+
+export type DataListDensity = (typeof DataListItemVariants.density)[number];
+export type DataListState = (typeof DataListItemVariants.state)[number];
+export type DataListLeadingType =
+  (typeof DataListItemVariants.leadingType)[number];
+export type DataListTrailingType =
+  (typeof DataListItemVariants.trailingType)[number];
+
+/* -----------------------------------------------------
+ * Root variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva('w-full relative rounded-xl', {
+  variants: {
+    density: {
+      comfortable: 'flex-row justify-between items-end p-4',
+      compact: 'flex-col items-start gap-4 p-4',
+    },
+    state: {
+      default: 'bg-surface-default',
+      pressed: 'bg-surface-subtle',
+      selected: 'bg-surface-default border border-brand-primary',
+      disabled: 'bg-surface-default opacity-50',
+    },
+  },
+  defaultVariants: {
+    density: 'comfortable',
+    state: 'default',
+  },
+});
+
+const compactRadius = (state: DataListState) =>
+  state === 'pressed' || state === 'selected' ? 'rounded-none' : 'rounded-xl';
+
+/* -----------------------------------------------------
+ * Props
+ * --------------------------------------------------- */
+
+export interface DataListItemProps
+  extends Omit<VariantProps<typeof rootVariants>, 'density' | 'state'> {
+  title: string;
+  subtitle?: string;
+  meta?: string;
+
+  density?: DataListDensity | 'Comfortable' | 'Compact';
+  state?: DataListState | 'Default' | 'Pressed' | 'Selected' | 'Disabled';
+  leadingType?: DataListLeadingType;
+  trailingType?: DataListTrailingType;
+
+  showSubtitle?: boolean;
+  showMeta?: boolean;
+  showLeading?: boolean;
+  showTrailing?: boolean;
+  showDivider?: boolean;
+
+  leadingImage?: ImageSourcePropType;
+  leadingIcon?: React.ReactNode;
+  trailingSwitchChecked?: boolean;
+  onTrailingSwitchChange?: (checked: boolean) => void;
+  trailingSwitchProps?: Omit<
+    React.ComponentProps<typeof Switch>,
+    'checked' | 'onCheckedChange' | 'disabled'
+  >;
+
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+
+  className?: never;
+}
+
+/* -----------------------------------------------------
+ * Normalizers
+ * --------------------------------------------------- */
+
+function normalizeDensity(v: any): DataListDensity {
+  const s = String(v ?? 'comfortable').toLowerCase();
+  return s === 'compact' ? 'compact' : 'comfortable';
+}
+
+function normalizeState(v: any): DataListState {
+  const s = String(v ?? 'default').toLowerCase();
+  if (s === 'pressed' || s === 'selected' || s === 'disabled') return s;
+  return 'default';
+}
+
+/* -----------------------------------------------------
+ * Small UI Components
+ * --------------------------------------------------- */
+
+function LeadingImage({
+  source,
+  shape,
+}: {
+  source?: ImageSourcePropType;
+  shape: 'avatar' | 'image';
+}) {
+  const radius = shape === 'avatar' ? 'rounded-full' : 'rounded-md';
+
+  return (
+    <View className={cn('w-10 h-10 overflow-hidden bg-surface-subtle', radius)}>
+      {source ? (
+        <Image source={source} className="w-full h-full" resizeMode="cover" />
+      ) : null}
+    </View>
+  );
+}
+
+function LeadingIcon({ icon }: { icon?: React.ReactNode }) {
+  return (
+    <View className="w-10 h-10 rounded-full bg-surface-subtle items-center justify-center">
+      {icon}
+    </View>
+  );
+}
+
+function LeadingCheckbox({ checked }: { checked: boolean; isDark: boolean }) {
+  return (
+    <View
+      className={cn(
+        'w-4 h-4 items-center justify-center rounded-[4px] border border-brand-primary bg-surface-subtle'
+      )}
+    >
+      {checked ? <Check size={10} strokeWidth={1.5} color="#121212" /> : null}
+    </View>
+  );
+}
+
+function SelectedCheckbox() {
+  return (
+    <View
+      className={cn(
+        'absolute right-5 top-5 w-[14px] h-[14px] items-center justify-center rounded-[4px] border border-brand-primary bg-surface-subtle'
+      )}
+    >
+      <Check size={10} strokeWidth={1.5} color="#121212" />
+    </View>
+  );
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function DataListItem(props: DataListItemProps) {
+  const {
+    title,
+    subtitle = 'Data List Row Subtitle',
+    meta = 'Meta Content',
+
+    density: densityProp,
+    state: stateProp,
+    leadingType = 'avatar',
+    trailingType = 'chevron',
+
+    showSubtitle = true,
+    showMeta = true,
+    showLeading = true,
+    showTrailing = true,
+    showDivider = false,
+
+    leadingImage,
+    leadingIcon,
+    trailingSwitchChecked = false,
+    onTrailingSwitchChange,
+    trailingSwitchProps,
+    onPress,
+    style,
+    testID,
+  } = props;
+
+  const density = normalizeDensity(densityProp);
+  const state = normalizeState(stateProp);
+  const isCompact = density === 'compact';
+  const isDisabled = state === 'disabled';
+  const isDark = useColorScheme() === 'dark';
+  const iconColor = isDark ? THEME.dark.foreground : THEME.light.foreground;
+
+  return (
+    <View className="w-full">
+      <Pressable
+        testID={testID ?? 'data-list-item'}
+        disabled={isDisabled}
+        onPress={isDisabled ? undefined : onPress}
+        className={cn(
+          rootVariants({ density, state }),
+          isCompact && compactRadius(state)
+        )}
+        style={style}
+      >
+        {/* Checkbox – top right for selected state */}
+        {state === 'selected' ? <SelectedCheckbox /> : null}
+
+        {/* ---------------- COMFORTABLE ---------------- */}
+        {density === 'comfortable' ? (
+          <>
+            <View className="flex-1 flex-col gap-4">
+              <View className="flex-row items-center gap-3">
+                {showLeading ? (
+                  <>
+                    {leadingType === 'avatar' ? (
+                      <LeadingImage source={leadingImage} shape="avatar" />
+                    ) : null}
+                    {leadingType === 'image' ? (
+                      <LeadingImage source={leadingImage} shape="image" />
+                    ) : null}
+                    {leadingType === 'icon' ? (
+                      <LeadingIcon icon={leadingIcon} />
+                    ) : null}
+                    {leadingType === 'checkbox' ? (
+                      <LeadingCheckbox
+                        checked={state === 'selected'}
+                        isDark={isDark}
+                      />
+                    ) : null}
+                  </>
+                ) : null}
+
+                <View className="flex-1">
+                  <Text className="text-base font-semibold text-text-primary">
+                    {title}
+                  </Text>
+
+                  {showSubtitle ? (
+                    <Text className="text-xs font-medium text-text-secondary">
+                      {subtitle}
+                    </Text>
+                  ) : null}
+                </View>
+              </View>
+
+              {showMeta ? (
+                <Text className="text-sm font-medium text-foreground">
+                  {meta}
+                </Text>
+              ) : null}
+            </View>
+
+            {showTrailing ? (
+              <View className="flex-row items-center justify-end">
+                {trailingType === 'chevron' ? (
+                  <ChevronRight size={24} color={iconColor} strokeWidth={2} />
+                ) : null}
+                {trailingType === 'switch' ? (
+                  <Switch
+                    checked={trailingSwitchChecked}
+                    onCheckedChange={onTrailingSwitchChange}
+                    disabled={isDisabled}
+                    {...trailingSwitchProps}
+                  />
+                ) : null}
+              </View>
+            ) : null}
+          </>
+        ) : null}
+
+        {/* ---------------- COMPACT ---------------- */}
+        {density === 'compact' ? (
+          <>
+            <View className="w-full flex-row items-center gap-3">
+              {showLeading ? (
+                <>
+                  {leadingType === 'avatar' ? (
+                    <LeadingImage source={leadingImage} shape="avatar" />
+                  ) : null}
+                  {leadingType === 'image' ? (
+                    <LeadingImage source={leadingImage} shape="image" />
+                  ) : null}
+                  {leadingType === 'icon' ? (
+                    <LeadingIcon icon={leadingIcon} />
+                  ) : null}
+                  {leadingType === 'checkbox' ? (
+                    <LeadingCheckbox
+                      checked={state === 'selected'}
+                      isDark={isDark}
+                    />
+                  ) : null}
+                </>
+              ) : null}
+
+              <View className="flex-1">
+                <Text className="text-base font-semibold text-text-primary">
+                  {title}
+                </Text>
+
+                {showSubtitle ? (
+                  <Text className="text-xs font-medium text-text-secondary">
+                    {subtitle}
+                  </Text>
+                ) : null}
+              </View>
+            </View>
+
+            <View className="w-full flex-row items-end justify-between">
+              {showMeta ? (
+                <Text className="text-sm font-medium text-text-primary">
+                  {meta}
+                </Text>
+              ) : (
+                <View />
+              )}
+
+              {showTrailing ? (
+                <View className="flex-row items-center justify-end">
+                  {trailingType === 'chevron' ? (
+                    <ChevronRight size={24} color={iconColor} strokeWidth={2} />
+                  ) : null}
+                  {trailingType === 'switch' ? (
+                    <Switch
+                      checked={trailingSwitchChecked}
+                      onCheckedChange={onTrailingSwitchChange}
+                      disabled={isDisabled}
+                      {...trailingSwitchProps}
+                    />
+                  ) : null}
+                </View>
+              ) : null}
+            </View>
+          </>
+        ) : null}
+      </Pressable>
+
+      {showDivider && isCompact ? (
+        <View className="w-full h-px bg-border" />
+      ) : null}
+    </View>
+  );
+}
+
+DataListItem.displayName = 'DataListItem';
+
+export { rootVariants };

package/src/components/DataDisplay/Datalist/DataList.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { DataList } from './Datalist';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=183-607';
+
+figma.connect(DataList, FIGMA_URL, {
+  props: {
+    style: figma.enum('style', {
+      card: 'card',
+      plain: 'plain',
+    }),
+    // Data is usually dynamic, so we simulating it in example
+  },
+  example: (props) => (
+    <DataList
+      style={props.style}
+      data={[
+        {
+          name: 'Jane Doe',
+          subtitle: 'Software Engineer',
+          avatarUrl: 'https://example.com/jane.png',
+        },
+        {
+          name: 'John Smith',
+          subtitle: 'Product Manager',
+          avatarUrl: 'https://example.com/john.png',
+        },
+      ]}
+    />
+  ),
+});

package/src/components/DataDisplay/Datalist/Datalist.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { DataListItem } from '../DataListItem/DataListItem';
+
+const dataListVariants = cva('w-full flex-col gap-4', {
+  variants: {
+    style: {
+      card: '',
+      plain: '',
+    },
+  },
+  defaultVariants: {
+    style: 'card',
+  },
+});
+
+export type DataListProps = VariantProps<typeof dataListVariants> & {
+  data: {
+    name: string;
+    subtitle: string;
+    avatarUrl: string;
+  }[];
+};
+
+export function DataList({ data, style }: DataListProps) {
+  return (
+    <View className={cn(dataListVariants({ style }))}>
+      {data.map((item, index) => (
+        <DataListItem
+          key={index}
+          title={item.name}
+          subtitle={item.subtitle}
+          leadingImage={{ uri: item.avatarUrl }}
+          leadingType="avatar"
+          // DataListItem doesn't accept 'style', so we don't pass it.
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/DataDisplay/MonthCalendar/MonthCalendar.figma.tsx

@@ -0,0 +1,15 @@
+import { figma } from '@figma/code-connect';
+import { MonthCalendar } from './MonthCalendar';
+
+figma.connect(
+  MonthCalendar,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=306:9028',
+  {
+    props: {
+      month: figma.string('Month'),
+    },
+    example: (props) => <MonthCalendar {...props} />,
+  }
+);
+
+export default MonthCalendar;