rn-vs-lb 1.0.62 → 1.0.63

package/components/Gallery/AiAgentGallery.pure.tsx

@@ -0,0 +1,138 @@
+import React, { memo, useMemo } from "react";
+import { ActivityIndicator, Image, Pressable, StyleSheet, Text, View } from "react-native";
+import { useTheme, ThemeType, SizesType, TypographytType } from "../../theme";
+import { GalleryModal } from "../Modals";
+
+export type AiAgentGalleryViewProps = {
+  isLoading: boolean;
+  photos: string[];
+  galleryColumns: number;
+  galleryItemSize: number;
+
+  visible: boolean;
+  initialIndex: number;
+  onOpenAt: (index: number) => void;
+  onClose: () => void;
+
+  emptyTest: string;
+};
+
+export const AiAgentGalleryView = memo(
+  ({
+    isLoading,
+    photos,
+    galleryColumns,
+    galleryItemSize,
+    visible,
+    initialIndex,
+    onOpenAt,
+    onClose,
+    emptyTest,
+  }: AiAgentGalleryViewProps) => {
+    const { theme, sizes, typography } = useTheme();
+    const isDark = (theme as any)?.isDark ?? false;
+
+    const styles = useMemo(() => getStyles(theme, sizes, typography, isDark), [
+      theme,
+      sizes,
+      typography,
+      isDark,
+    ]);
+
+    if (isLoading) {
+      return (
+        <View style={styles.galleryWrapper}>
+          <ActivityIndicator />
+        </View>
+      );
+    }
+
+    if (!photos.length) {
+      return (
+        <View style={styles.galleryWrapper}>
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyText}>{emptyTest}</Text>
+          </View>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.galleryWrapper}>
+        <View style={styles.galleryGrid}>
+          {photos.map((photo, i) => {
+            const isLastInRow = (i + 1) % galleryColumns === 0;
+            return (
+              <Pressable
+                key={`${photo}-${i}`}
+                onPress={() => onOpenAt(i)}
+                android_ripple={{ color: "#00000022" }}
+                style={[
+                  styles.galleryImage,
+                  isLastInRow && styles.galleryImageLast,
+                  { width: galleryItemSize, height: galleryItemSize },
+                ]}
+              >
+                <Image
+                  source={{ uri: photo }}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    borderRadius: styles.galleryImage.borderRadius,
+                  }}
+                />
+              </Pressable>
+            );
+          })}
+        </View>
+
+        <GalleryModal
+          visible={visible}
+          images={photos}
+          initialIndex={initialIndex}
+          onRequestClose={onClose}
+        />
+      </View>
+    );
+  }
+);
+
+AiAgentGalleryView.displayName = "AiAgentGalleryView";
+
+const getStyles = (
+  theme: ThemeType,
+  sizes: SizesType,
+  typography: TypographytType,
+  isDark: boolean
+) =>
+  StyleSheet.create({
+    galleryWrapper: {
+      paddingHorizontal: sizes.md as number,
+      paddingVertical: sizes.xl as number,
+    },
+    galleryGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+    },
+    galleryImage: {
+      borderRadius: 18,
+      backgroundColor: theme.backgroundSecond,
+      marginRight: sizes.sm as number,
+      marginBottom: sizes.sm as number,
+    },
+    galleryImageLast: {
+      marginRight: 0,
+    },
+    emptyState: {
+      alignItems: "center",
+      justifyContent: "center",
+      paddingVertical: sizes.lg as number,
+    },
+    emptyText: {
+      ...(typography.bodySm as object),
+      color: theme.greyText,
+      textAlign: "center",
+    },
+  });
+
+export default AiAgentGalleryView;

package/components/Gallery/AiAgentGallery.stories.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { View } from 'react-native';
+import { ThemeProvider } from '../../theme';
+import { AiAgentGalleryView } from './AiAgentGallery.pure';
+
+type Props = React.ComponentProps<typeof AiAgentGalleryView>;
+
+const meta: Meta<Props> = {
+  title: 'Gallery/AiAgentGallery',
+  component: AiAgentGalleryView,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ paddingVertical: 24 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    galleryColumns: 3,
+    galleryItemSize: 108,
+    emptyTest: 'No generated images yet. Try creating one with your AI agent!',
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<Props> = ({
+  onOpenAt: _onOpenAt,
+  onClose: _onClose,
+  visible: _visible,
+  initialIndex: _initialIndex,
+  ...rest
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [initialIndex, setInitialIndex] = useState(0);
+
+  return (
+    <AiAgentGalleryView
+      {...rest}
+      visible={visible}
+      initialIndex={initialIndex}
+      onOpenAt={(index) => {
+        setInitialIndex(index);
+        setVisible(true);
+      }}
+      onClose={() => setVisible(false)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  isLoading: false,
+  photos: [
+    'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=600&q=60',
+    'https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=600&q=60',
+    'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=600&q=60',
+    'https://images.unsplash.com/photo-1545239351-1141bd82e8a6?auto=format&fit=crop&w=600&q=60',
+  ],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true,
+  photos: [],
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  isLoading: false,
+  photos: [],
+};

package/components/Gallery/index.ts

@@ -0,0 +1 @@
+export * from "./AiAgentGallery.pure"

package/components/UI/StepProgress.stories.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { View, Alert } from 'react-native';
+import { ThemeProvider } from '../../theme';
+import { StepProgress } from './StepProgress';
+
+type Props = React.ComponentProps<typeof StepProgress>;
+
+const meta: Meta<Props> = {
+  title: 'UI/StepProgress',
+  component: StepProgress,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ padding: 24 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    steps: [
+      { title: 'Briefing', description: 'Share context and goals for your agent.' },
+      { title: 'Generation', description: 'The agent drafts a tailored solution.' },
+      { title: 'Review', description: 'Assess the output and give feedback.' },
+      { title: 'Launch', description: 'Publish or deploy your agent deliverable.' },
+    ],
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<Props> = (args) => <StepProgress {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  activeStep: 1,
+};
+
+export const FirstStep = Template.bind({});
+FirstStep.args = {
+  activeStep: 0,
+};
+
+export const WithClickableSteps: StoryFn<Props> = (args) => {
+  const [activeStep, setActiveStep] = useState(args.activeStep ?? 2);
+
+  return (
+    <StepProgress
+      {...args}
+      activeStep={activeStep}
+      onStepPress={(index) => {
+        Alert.alert('Step selected', args.steps?.[index]?.title ?? `Step ${index + 1}`);
+        setActiveStep(index);
+      }}
+    />
+  );
+};
+WithClickableSteps.args = {
+  activeStep: 2,
+};

package/components/UI/StepProgress.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ThemeType, TypographytType, SizesType, useTheme } from "rn-vs-lb/theme";
+
+interface StepProgressProps {
+  steps: { title: string; description?: string }[];
+  activeStep: number;
+  onStepPress?: (index: number) => void;
+}
+
+export const StepProgress: React.FC<StepProgressProps> = ({ steps, activeStep, onStepPress }) => {
+  const { theme, typography, sizes } = useTheme();
+
+  const styles = useMemo(
+    () => createStyles({ theme, typography, sizes }),
+    [theme, typography, sizes],
+  );
+
+  const currentDescription = steps[activeStep]?.description ?? "";
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.stepsRow}>
+        {steps.map((step, index) => {
+          const isActive = index === activeStep;
+          const isCompleted = index < activeStep;
+          const isPressable = typeof onStepPress === "function" && index < activeStep;
+          return (
+            <TouchableOpacity
+              key={step.title ?? index}
+              style={[styles.stepItem, isPressable && styles.stepItemPressable]}
+              activeOpacity={0.7}
+              onPress={isPressable ? () => onStepPress(index) : undefined}
+              disabled={!isPressable}
+            >
+              <View style={styles.stepHeader}>
+                <View
+                  style={[
+                    styles.circle,
+                    (isActive || isCompleted) && styles.circleActive,
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.circleText,
+                      (isActive || isCompleted) && styles.circleTextActive,
+                    ]}
+                  >
+                    {index + 1}
+                  </Text>
+                </View>
+                {index < steps.length - 1 ? (
+                  <View
+                    style={[
+                      styles.connector,
+                      (isCompleted || (isActive && activeStep === index)) && styles.connectorActive,
+                    ]}
+                  />
+                ) : null}
+              </View>
+              <Text
+                numberOfLines={2}
+                style={[styles.stepTitle, isActive && styles.stepTitleActive]}
+              >
+                {step.title}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      {currentDescription ? (
+        <Text style={styles.description}>{currentDescription}</Text>
+      ) : null}
+    </View>
+  );
+};
+
+const createStyles = ({
+  theme,
+  typography,
+  sizes,
+}: {
+  theme: ThemeType;
+  typography: TypographytType;
+  sizes: SizesType;
+}) =>
+  StyleSheet.create({
+    container: {
+      marginBottom: sizes.xl as number,
+    },
+    stepsRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+    },
+    stepItem: {
+      flex: 1,
+      marginRight: sizes.sm as number,
+    },
+    stepItemPressable: {
+      opacity: 0.9,
+    },
+    stepHeader: {
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: sizes.xs as number,
+    },
+    circle: {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      borderWidth: 2,
+      borderColor: theme.border,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: theme.white,
+    },
+    circleActive: {
+      borderColor: theme.primary,
+      backgroundColor: theme.primary,
+    },
+    circleText: {
+      ...typography.bodyXs,
+      color: theme.text,
+      fontWeight: "600",
+    },
+    circleTextActive: {
+      color: theme.white,
+    },
+    connector: {
+      flex: 1,
+      height: 2,
+      marginLeft: sizes.xs as number,
+      backgroundColor: theme.border,
+    },
+    connectorActive: {
+      backgroundColor: theme.primary,
+    },
+    stepTitle: {
+      ...typography.bodyXs,
+      color: theme.greyText,
+    },
+    stepTitleActive: {
+      color: theme.text,
+      fontWeight: "600",
+    },
+    description: {
+      marginTop: sizes.sm as number,
+      ...typography.bodySm,
+      color: theme.greyText,
+    },
+  });
+

package/components/UI/index.ts

@@ -28,3 +28,4 @@ export { ThreeDotsMenu } from './ThreeDotsMenu';
 export { default as TripleSwitch } from './TripleSwitch';
 export type { TripleSwitchValue } from './TripleSwitch';
 export { UpdateRequiredView } from './UpdateRequiredView';
+export * from "./StepProgress";

package/components/index.ts

@@ -10,3 +10,4 @@ export * from './Specialist';
 export * from './Tooltip';
 export * from './UI';
 export * from './UserCards';
+export * from './Gallery';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.62",
+  "version": "1.0.63",
   "description": "Expo Router + Storybook template ready for npm distribution.",
   "keywords": [
     "expo",