@admin-layout/gluestack-ui-mobile 12.2.4-alpha.86 → 12.2.5-alpha.13

package/src/components/FlightCards/FlightCards.tsx

@@ -0,0 +1,266 @@
+import React, { memo } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View, useColorScheme, useWindowDimensions } from 'react-native';
+import Svg, { Line, Path } from 'react-native-svg';
+import { toFlightCards } from '@admin-layout/client';
+import type { FlightCardView, FlightOfferSetLike, FlightSliceView } from '@admin-layout/client';
+
+/**
+ * Flight results for a mobile chat: the native twin of ai-chat-ext's web
+ * MessageFlights. Both render from @admin-layout/client's flight model, so a
+ * flight reads the same (times, +1, stops, price) on the web and in the app.
+ */
+
+export interface FlightCardColors {
+    card: string;
+    border: string;
+    ink: string;
+    muted: string;
+    faint: string;
+    accent: string;
+    price: string;
+    nextDay: string;
+}
+
+const LIGHT: FlightCardColors = {
+    card: '#ffffff',
+    border: '#e5e7eb',
+    ink: '#111827',
+    muted: '#6b7280',
+    faint: '#9ca3af',
+    accent: '#3b82f6',
+    price: '#2563eb',
+    nextDay: '#d97706',
+};
+
+const DARK: FlightCardColors = {
+    card: '#1f2937',
+    border: '#374151',
+    ink: '#f9fafb',
+    muted: '#9ca3af',
+    faint: '#6b7280',
+    accent: '#60a5fa',
+    price: '#60a5fa',
+    nextDay: '#fbbf24',
+};
+
+const GAP = 12;
+const SIDE = 8;
+
+export interface FlightCardRowProps {
+    attachment: FlightOfferSetLike & { totalCount?: number; title?: string; actionLabel?: string };
+    /** Open a bookable offer. The host decides how: system browser, in-app browser. */
+    onOpenOffer?: (url: string) => void;
+    /** Open the full result set. Also used by a card that has no seller link. */
+    onViewAll?: () => void;
+    /** Override the palette; defaults follow the system light/dark scheme. */
+    colors?: Partial<FlightCardColors>;
+}
+
+const Plane = ({ color }: { color: string }) => (
+    <Svg width={14} height={14} viewBox="0 0 24 24" style={styles.plane}>
+        <Path
+            fill={color}
+            d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"
+        />
+    </Svg>
+);
+
+// An SVG line, not a dashed border: iOS does not draw borderStyle 'dashed'
+// on a single side, so the route line would vanish on iPhones.
+const Dashes = ({ color }: { color: string }) => (
+    <Svg height={2} width="100%" style={styles.dashes}>
+        <Line x1="0" y1="1" x2="100%" y2="1" stroke={color} strokeWidth={1} strokeDasharray="4 3" />
+    </Svg>
+);
+
+const SliceRow = ({ slice, c }: { slice: FlightSliceView; c: FlightCardColors }) => {
+    return (
+        <View style={styles.slice}>
+            <View>
+                <Text style={[styles.time, { color: c.ink }]}>{slice.departTime ?? '--:--'}</Text>
+                <Text style={[styles.code, { color: c.muted }]}>{slice.origin}</Text>
+            </View>
+            <View style={styles.route} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+                <View style={styles.routeLine}>
+                    <Dashes color={c.border} />
+                    <Plane color={c.accent} />
+                    <Dashes color={c.border} />
+                </View>
+                {slice.meta ? (
+                    <Text style={[styles.meta, { color: c.faint }]} numberOfLines={1}>
+                        {slice.meta}
+                    </Text>
+                ) : null}
+            </View>
+            <View style={styles.arrive}>
+                <View style={styles.arriveTime}>
+                    <Text style={[styles.time, { color: c.ink }]}>{slice.arriveTime ?? '--:--'}</Text>
+                    {slice.dayOffset ? (
+                        <Text style={[styles.nextDay, { color: c.nextDay }]}>{slice.dayOffset}</Text>
+                    ) : null}
+                </View>
+                <Text style={[styles.code, styles.right, { color: c.muted }]}>{slice.destination}</Text>
+            </View>
+        </View>
+    );
+};
+
+export const FlightCard = memo(function FlightCard({
+    card,
+    width,
+    colors: c,
+    onPress,
+}: {
+    card: FlightCardView;
+    width: number | '100%';
+    colors: FlightCardColors;
+    onPress?: () => void;
+}) {
+    const body = (
+        <>
+            <View style={styles.header}>
+                {card.sellerInitial ? (
+                    <View style={[styles.badge, { backgroundColor: c.accent }]}>
+                        <Text style={styles.badgeText}>{card.sellerInitial}</Text>
+                    </View>
+                ) : null}
+                <Text style={[styles.headerText, { color: c.muted }]} numberOfLines={1}>
+                    {card.header}
+                </Text>
+            </View>
+            <View style={styles.slices}>
+                {card.slices.map((s, i) => (
+                    <SliceRow key={i} slice={s} c={c} />
+                ))}
+            </View>
+            <View style={[styles.footer, { borderTopColor: c.border }]}>
+                <Text style={[styles.footerText, { color: c.muted }]} numberOfLines={1}>
+                    {card.footer}
+                </Text>
+                {card.price ? <Text style={[styles.price, { color: c.price }]}>{card.price}</Text> : null}
+            </View>
+        </>
+    );
+    const frame = [styles.card, { width, backgroundColor: c.card, borderColor: c.border }];
+    if (!onPress) {
+        return (
+            <View style={frame} accessible accessibilityLabel={card.accessibleLabel} testID="flight-card">
+                {body}
+            </View>
+        );
+    }
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityRole={card.url ? 'link' : 'button'}
+            accessibilityLabel={card.accessibleLabel}
+            style={({ pressed }) => [...frame, pressed && styles.pressed]}
+            testID="flight-card"
+        >
+            {body}
+        </Pressable>
+    );
+});
+
+const usePalette = (overrides?: Partial<FlightCardColors>): FlightCardColors => {
+    const dark = useColorScheme() === 'dark';
+    return { ...(dark ? DARK : LIGHT), ...overrides };
+};
+
+/** A swipeable row of flight cards; the next card peeks in so the row reads as scrollable. */
+export function FlightCardRow({ attachment, onOpenOffer, onViewAll, colors }: FlightCardRowProps) {
+    const c = usePalette(colors);
+    const { width: screen } = useWindowDimensions();
+    const cards = toFlightCards(attachment);
+    if (cards.length === 0) return null;
+
+    const cardWidth = Math.round(Math.min(304, screen * 0.8));
+    const count = attachment.totalCount ?? attachment.properties?.length ?? cards.length;
+    const press = (card: FlightCardView) =>
+        card.url && onOpenOffer ? () => onOpenOffer(card.url as string) : onViewAll;
+
+    return (
+        <View style={styles.wrap} accessibilityLabel={attachment.title || 'Flight options'}>
+            <ScrollView
+                horizontal
+                nestedScrollEnabled
+                showsHorizontalScrollIndicator={false}
+                // One card per swipe, landing flush with the row's side inset.
+                snapToInterval={cardWidth + GAP}
+                snapToAlignment="start"
+                decelerationRate="fast"
+                contentContainerStyle={styles.row}
+                testID="flight-row"
+            >
+                {cards.map((card) => (
+                    <FlightCard key={card.key} card={card} width={cardWidth} colors={c} onPress={press(card)} />
+                ))}
+            </ScrollView>
+            {onViewAll && count > cards.length ? (
+                <Pressable onPress={onViewAll} accessibilityRole="button" hitSlop={8} style={styles.viewAll}>
+                    <Text style={[styles.viewAllText, { color: c.price }]}>
+                        {attachment.actionLabel || `View all ${count} flights`} ›
+                    </Text>
+                </Pressable>
+            ) : null}
+        </View>
+    );
+}
+
+/** Every flight as a full-width vertical list, for a results screen or sheet. */
+export function FlightCardList({ attachment, onOpenOffer, onViewAll, colors }: FlightCardRowProps) {
+    const c = usePalette(colors);
+    const cards = toFlightCards(attachment);
+    if (cards.length === 0) return null;
+    return (
+        <View style={styles.list}>
+            {cards.map((card) => (
+                <FlightCard
+                    key={card.key}
+                    card={card}
+                    width="100%"
+                    colors={c}
+                    onPress={card.url && onOpenOffer ? () => onOpenOffer(card.url as string) : onViewAll}
+                />
+            ))}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrap: { marginVertical: 8 },
+    row: { paddingHorizontal: SIDE, paddingVertical: 4, gap: GAP },
+    list: { gap: GAP },
+    card: { borderWidth: 1, borderRadius: 16, padding: 16 },
+    pressed: { opacity: 0.85 },
+    header: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    badge: { width: 20, height: 20, borderRadius: 6, alignItems: 'center', justifyContent: 'center' },
+    badgeText: { color: '#ffffff', fontSize: 11, fontWeight: '700' },
+    headerText: { flex: 1, fontSize: 14 },
+    slices: { marginVertical: 16, gap: 16 },
+    slice: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+    time: { fontSize: 24, fontWeight: '700', letterSpacing: -0.5, fontVariant: ['tabular-nums'] },
+    code: { marginTop: 4, fontSize: 14 },
+    right: { textAlign: 'right' },
+    route: { flex: 1, alignItems: 'center', minWidth: 0 },
+    routeLine: { flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch', gap: 6 },
+    dashes: { flex: 1 },
+    plane: { transform: [{ rotate: '90deg' }] },
+    meta: { marginTop: 4, fontSize: 11 },
+    arrive: { alignItems: 'flex-end' },
+    arriveTime: { flexDirection: 'row', alignItems: 'flex-start' },
+    nextDay: { marginLeft: 2, fontSize: 11, fontWeight: '600' },
+    footer: {
+        marginTop: 'auto',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+        borderTopWidth: 1,
+        paddingTop: 12,
+    },
+    footerText: { flex: 1, fontSize: 14 },
+    price: { fontSize: 18, fontWeight: '700', fontVariant: ['tabular-nums'] },
+    viewAll: { marginTop: 4, marginHorizontal: SIDE, alignSelf: 'flex-start' },
+    viewAllText: { fontSize: 14, fontWeight: '600' },
+});

package/src/components/FlightCards/index.ts

@@ -0,0 +1,2 @@
+export { FlightCard, FlightCardRow, FlightCardList } from './FlightCards';
+export type { FlightCardRowProps, FlightCardColors } from './FlightCards';

package/src/components/InputToolBar/InputToolBar.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { TextInput, Modal, ScrollView, Pressable, Text as RNText, Dimensions } from 'react-native';
+import { TextInput, Modal, ScrollView, Pressable, Text as RNText, Dimensions, useColorScheme } from 'react-native';
 import { Box, HStack, VStack, Text, Pressable as GluestackPressable } from '@gluestack-ui/themed';
 import { Ionicons, Feather } from '@expo/vector-icons';
 import type {
@@ -541,6 +541,10 @@ export function InputToolBar({
     const rightItems = rightItemsProp ?? [];
     const hasInputContent = inputConfig != null || children != null;
     const effectiveTopContent = inputConfig != null ? topContent : null;
+    const isDark = useColorScheme() === 'dark';
+    const composerBg = isDark ? '#1e293b' : '$white';
+    const composerText = isDark ? '#e2e8f0' : '#18181b';
+    const composerPlaceholder = isDark ? '#94a3b8' : '#71717a';
 
     const templateModal =
         templateModalConfig != null && templateModalConfig.isOpen
@@ -559,7 +563,7 @@ export function InputToolBar({
             w="100%"
             overflow="visible"
             rounded="$3xl"
-            bg="$white"
+            bg={composerBg}
             shadowColor="$black"
             shadowOffset={{ width: 0, height: 4 }}
             shadowOpacity={0.08}
@@ -581,7 +585,7 @@ export function InputToolBar({
                                 value={inputConfig.value}
                                 onChange={inputConfig.onChange}
                                 placeholder={inputConfig.placeholder ?? 'Ask anything...'}
-                                placeholderTextColor="#71717a"
+                                placeholderTextColor={composerPlaceholder}
                                 editable={!inputConfig.disabled}
                                 multiline
                                 numberOfLines={1}
@@ -589,7 +593,7 @@ export function InputToolBar({
                                     width: '100%',
                                     minHeight: 44,
                                     fontSize: 16,
-                                    color: '#18181b',
+                                    color: composerText,
                                     paddingVertical: 8,
                                     paddingHorizontal: 0,
                                     margin: 0,

package/src/components/WithConfiguration.tsx

@@ -16,7 +16,7 @@ export interface IWithConfigurationProps {
 }
 
 export const WithConfiguration = (props: IWithConfigurationProps) => {
-    const { configKey, children, permissionKeys, resourceName, permissionTypes } = props;
+    const { configKey, children, permissionKeys, resourceName, permissionTypes = [PermissionType.Allow] } = props;
 
     const {
         data,
@@ -65,8 +65,4 @@ export const WithConfiguration = (props: IWithConfigurationProps) => {
     );
 };
 
-WithConfiguration.defaultProps = {
-    permissionTypes: [PermissionType.Allow],
-};
-
 export const WithConfigurationContainer = (props: IWithConfigurationProps) => <WithConfiguration {...props} />;

package/src/components/WithPermission.tsx

@@ -68,15 +68,6 @@ export const WithPermission = ({
     return null;
 };
 
-WithPermission.defaultProps = {
-    permissionTypes: [PermissionType.Allow],
-    behaviour: WithPermissionBehaviour.hide,
-    message: "You don't have permission to access this resource, contact owner",
-    disabledProps: {
-        disabled: true,
-    },
-};
-
 export const WithPermissionContainer = React.memo((props: IWithPermissionProps) => <WithPermission {...props} />);
 export default WithPermissionContainer;
 // export const WithPermissionContainer = (props: IWithPermissionProps) => <WithPermission {...props} />;

package/src/components/index.ts

@@ -14,3 +14,4 @@ export * from './WithConfiguration';
 export * from './WithPolicy';
 export * from './usePermissionAutoFetch';
 export * from './useSetting';
+export * from './FlightCards';