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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@admin-layout/gluestack-ui-mobile",
-    "version": "12.2.4-alpha.85",
+    "version": "12.2.5-alpha.13",
     "description": "Glustack-ui for mobile component layout",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -23,7 +23,7 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@admin-layout/client": "12.2.4-alpha.85",
+        "@admin-layout/client": "12.2.5-alpha.7",
         "@gluestack-style/react": "^1.0.53",
         "@gluestack-ui/config": "^1.1.18",
         "@gluestack-ui/nativewind-utils": "^1.0.26",
@@ -36,10 +36,10 @@
     },
     "devDependencies": {
         "@types/react-window": "^1.8.8",
-        "common": "12.2.4-alpha.85"
+        "common": "12.2.5-alpha.2"
     },
     "peerDependencies": {
-        "@common-stack/remix-router-redux": "^6.0.2-alpha.2",
+        "@common-stack/remix-router-redux": "^9.2.1-alpha.0",
         "i18next": "^23.10.1",
         "react-i18next": "^14.1.0",
         "react-native-svg": "13.9.0"
@@ -47,8 +47,8 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "57ad95f9f2fb3faed22f90ac047bde3eca75340f",
     "typescript": {
         "definition": "lib/index.d.ts"
-    }
+    },
+    "gitHead": "b9693200e37d90e37a34dc27b7a30ac6c861bc06"
 }

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';

package/src/components/usePermissionAutoFetch.tsx

@@ -1,31 +1,16 @@
-import { ResourceAuthority, ConfigFragmentName, IContext } from 'common';
-import { generateUserUri } from '@adminide-stack/core';
-import { useGetContextDataQuery } from 'common/lib/generated/generated.js';
-import { useSetting } from './useSetting';
-import type { URI } from '@vscode-alt/monaco-editor/esm/vs/base/common/uri.js';
+import { usePermissionAutoFetch as usePlatformPermissionAutoFetch } from '@adminide-stack/platform-client';
 
 interface userPermissionAutoFetchProps {
     configKey?: string;
 }
 export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
-    const { data, loading } = useGetContextDataQuery();
-    const { orgResource, userId } = (data?.getContextData as IContext) || {};
+    const { permissions, loading } = usePlatformPermissionAutoFetch(options);
 
-    let resource = orgResource || (userId ? generateUserUri({ _id: userId }) : generateUserUri({ _id: 'guest' }));
-
-    const { loading: settingLoading, ...remaining } = useSetting({
-        configKey: options?.configKey || '',
-        overrides: {
-            resource: resource as unknown as URI,
-        },
-        options: {
-            forceExist: false,
-            authority: ResourceAuthority.Defaultpermissions,
-            fragment: ConfigFragmentName.Roles,
-        },
-    });
-
-    return { ...remaining, loading: loading || settingLoading };
+    return {
+        permissions,
+        data: permissions === undefined ? undefined : { resolveConfiguration: permissions },
+        loading,
+    };
 };
 
 // import React from 'react';

package/src/components/useSetting.tsx

@@ -1,30 +1,25 @@
-import React from 'react';
 import type {
-    IResolveConfigurationQuery,
-    IResolveConfigurationQueryVariables,
+    IConfigurationsFlattenedKeys,
     IPreferencesInput,
     IPreferencesOpenOptionsInput,
-    IUpdateConfigurationMutation,
     IConfigurationOverridesInput,
 } from 'common';
 import { ConfigurationTarget } from 'common';
-import { QueryResult } from '@apollo/client/react';
-import { omitBy, isNil } from 'lodash-es';
-import { ExecutionResult } from 'graphql';
-import {
-    useResolveConfigurationQuery,
-    useOpenPreferencesSettingsQuery,
-    useUpdateConfigurationMutation,
-} from 'common/lib/generated/generated.js';
+import { useSetting as usePlatformSetting } from '@adminide-stack/platform-client';
 
 export interface ISettingsVariable {
     overrides?: IConfigurationOverridesInput;
-    configKey: string;
+    configKey: IConfigurationsFlattenedKeys;
     options?: IPreferencesOpenOptionsInput;
     skip?: boolean;
 }
 
-interface IResponse extends QueryResult<IResolveConfigurationQuery, IResolveConfigurationQueryVariables> {
+interface IResponse {
+    data?: {
+        resolveConfiguration?: unknown;
+    };
+    loading: boolean;
+    error?: unknown;
     preferencesInput?: IPreferencesInput;
     updateConfiguration?: ({
         updateKey,
@@ -36,7 +31,9 @@ interface IResponse extends QueryResult<IResolveConfigurationQuery, IResolveConf
         value: string | boolean | number;
         updateOverrides?: IConfigurationOverridesInput;
         target?: ConfigurationTarget;
-    }) => Promise<ExecutionResult<IUpdateConfigurationMutation>>;
+    }) => Promise<unknown>;
+    refetch?: Function;
+    [key: string]: unknown;
 }
 
 /**
@@ -45,93 +42,18 @@ interface IResponse extends QueryResult<IResolveConfigurationQuery, IResolveConf
  * @param baseOptions
  */
 export const useSetting = (settingsVariable: ISettingsVariable): IResponse => {
-    const { overrides, configKey, options, skip = false } = settingsVariable;
-    const targetResource = overrides?.resource ?? null;
-    let prefLoaded = false;
-    const {
-        data: prefData,
-        error: prefError,
-        loading: perfLoading,
-        refetch: refetchPrefData,
-    } = useOpenPreferencesSettingsQuery({
-        variables: { resource: targetResource, options },
-        fetchPolicy: 'cache-first', // to make `{always: true}` to work
-        skip: prefLoaded,
-    });
-    React.useEffect(() => {
-        refetchPrefData({ resource: targetResource, options });
-    }, [targetResource]);
-    prefLoaded = perfLoading || skip;
-    const [updateConfigurationMutation] = useUpdateConfigurationMutation();
-    const modifiedOverrides = {
-        ...overrides,
-        resource: targetResource ? prefData?.openPreferencesSettings?.editableSettingsInput ?? null : null,
-    };
-    const defaultOverrides = omitBy(modifiedOverrides, isNil);
-    let {
-        data: settingsData,
-        error: settingError,
-        loading: settingLoading,
-        ...remaining
-    } = useResolveConfigurationQuery({
-        variables: {
-            input: prefData?.openPreferencesSettings ?? null,
-            key: configKey,
-            overrides: defaultOverrides,
-        },
-        fetchPolicy: 'cache-and-network', // to make `{always: true}` to work
-        skip: prefLoaded || !!prefError || !prefData?.openPreferencesSettings?.editableSettingsInput,
-    });
-    React.useEffect(() => {
-        remaining?.refetch({
-            input: prefData?.openPreferencesSettings ?? null,
-            key: configKey,
-            overrides: defaultOverrides,
-        });
-    }, [prefData]);
-
-    let loading = true;
-    if (!settingLoading && !prefLoaded) {
-        loading = false;
-    }
-    const error = settingError || prefError;
-    if (error) {
-        return {
-            error,
-            data: undefined,
-            loading: false,
-            ...remaining,
-        };
-    }
-    if (loading) {
-        return {
-            error,
-            data: undefined,
-            loading,
-            ...remaining,
-        };
-    }
-
-    const updateConfiguration = ({ value, updateKey, updateOverrides, target }) => {
-        return updateConfigurationMutation({
-            variables: {
-                key: updateKey || configKey,
-                value,
-                target,
-                overrides: updateOverrides || defaultOverrides,
-                input: prefData?.openPreferencesSettings,
-            },
-        });
-    };
+    const { data, updateConfiguration, ...remaining } = usePlatformSetting(settingsVariable as any);
 
     return {
-        data: settingsData,
-        loading,
-        error,
+        data: data === undefined ? undefined : { resolveConfiguration: data },
         ...remaining,
-        preferencesInput: {
-            ...prefData?.openPreferencesSettings,
+        updateConfiguration: ({ value, updateKey, updateOverrides, target }) => {
+            return updateConfiguration?.({
+                value,
+                updateKey,
+                updateOverrides,
+                target,
+            });
         },
-        updateConfiguration,
-    } as any;
+    };
 };