@effijs/templates 0.0.0-stage → 1.0.0-alpha.0

package/platforms/react-native/solutions/components/BottomSheet/README.md

@@ -0,0 +1,29 @@
+# BottomSheet
+
+Gesture-driven sheet with header and content slots.
+
+## API
+
+BottomSheet, BottomSheet.Header, BottomSheet.Content. Props include onClose and maxHeight.
+
+## Example
+
+```tsx
+<BottomSheet onClose={close}><BottomSheet.Header title="Filter" /></BottomSheet>
+```
+
+## Dependencies
+
+None beyond the setup baseline.
+
+No other solutions are required.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`stable`).
+
+Install with `forge g add --id component:BottomSheet`.

package/platforms/react-native/solutions/components/BottomSheet/files/Common.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Keyboard, Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { KeyboardProvider, useAnimatedKeyboard } from 'react-native-keyboard-controller';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { Theme } from '@theme';
+
+import { resolveMaxHeight, SHEET_BOTTOM_PADDING, SHEET_HORIZONTAL_PADDING } from './bottomSheet.constants';
+import { IBottomSheetProps } from './bottomSheet.types';
+import { BottomSheetContextProvider } from './Context';
+
+export default function BottomSheetCommon(props: IBottomSheetProps) {
+  useEffect(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  return (
+    <GestureHandlerRootView>
+      <KeyboardProvider>
+        <Theme>
+          <Sheet {...props} />
+        </Theme>
+      </KeyboardProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+function Sheet({
+  children,
+  minHeight = 120,
+  maxHeight = '90%',
+  closable = true,
+  backdrop = true,
+  backgroundColor = '#fff',
+  onClose,
+}: IBottomSheetProps) {
+  const { height: windowHeight } = useWindowDimensions();
+  const animatedKeyboard = useAnimatedKeyboard();
+  const isIOS = Platform.OS === 'ios';
+  const backdropOpacity = useSharedValue(0);
+  const sheetOpacity = useSharedValue(0);
+  const sheetTranslateY = useSharedValue(24);
+
+  const resolvedMaxHeight = useMemo(() => resolveMaxHeight(maxHeight, windowHeight), [maxHeight, windowHeight]);
+
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const notifyClose = useCallback(() => onCloseRef.current?.(), []);
+
+  const close = useCallback(() => {
+    backdropOpacity.value = withTiming(0, { duration: 250 });
+    sheetOpacity.value = withTiming(0, { duration: 250 });
+    sheetTranslateY.value = withTiming(24, { duration: 250 }, finished => {
+      if (finished) {
+        runOnJS(notifyClose)();
+      }
+    });
+  }, [backdropOpacity, notifyClose, sheetOpacity, sheetTranslateY]);
+
+  useEffect(() => {
+    backdropOpacity.value = withTiming(1, { duration: 250 });
+    sheetOpacity.value = withTiming(1, { duration: 250 });
+    sheetTranslateY.value = withTiming(0, { duration: 250 });
+  }, [backdropOpacity, sheetOpacity, sheetTranslateY]);
+
+  const contextValue = useMemo(() => ({ close, resolvedMaxHeight }), [close, resolvedMaxHeight]);
+
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  const sheetStyle = useAnimatedStyle(() => ({
+    opacity: sheetOpacity.value,
+    transform: [{ translateY: sheetTranslateY.value }],
+    // Android uses adjustResize (manifest + keyboard-controller), so the overlay root
+    // already shrinks above the keyboard. Adding keyboard height here double-offsets.
+    bottom: SHEET_BOTTOM_PADDING + (isIOS ? animatedKeyboard.height.value : 0),
+  }));
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {backdrop ? (
+        <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]} />
+      ) : null}
+      {closable ? <Pressable style={StyleSheet.absoluteFill} onPress={close} /> : null}
+      <Animated.View
+        style={[
+          styles.sheet,
+          sheetStyle,
+          {
+            minHeight,
+            maxHeight: resolvedMaxHeight,
+          },
+        ]}>
+        <View style={[styles.card, { backgroundColor }]} collapsable={false}>
+          <BottomSheetContextProvider value={contextValue} children={children} />
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  sheet: {
+    position: 'absolute',
+    left: SHEET_HORIZONTAL_PADDING,
+    right: SHEET_HORIZONTAL_PADDING,
+  },
+  card: {
+    flexDirection: 'column',
+    backgroundColor: 'white',
+    borderRadius: 36,
+    overflow: 'hidden',
+  },
+});

package/platforms/react-native/solutions/components/BottomSheet/files/Content.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { type LayoutChangeEvent } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { Grid } from '@components';
+import { usePrivateContext } from '@components/BottomSheet/Context.tsx';
+import { GridPM } from '@components/Grid/grid.pm.ts';
+import { TGridProps } from '@components/Grid/grid.types.ts';
+
+/** Scrollable sheet body; auto-enables scroll when content exceeds the available height. */
+export default function Content({ children, ...gridProps }: TGridProps & { children?: React.ReactNode }) {
+  const props = GridPM.get({ 'ph-m': true, ...gridProps });
+
+  const { resolvedMaxHeight } = usePrivateContext();
+  const [offsetY, setOffsetY] = useState<number | null>(null);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  const availableHeight = useMemo(
+    () => (offsetY === null ? 0 : Math.max(0, resolvedMaxHeight - offsetY)),
+    [offsetY, resolvedMaxHeight],
+  );
+
+  const needsScroll = useMemo(
+    () => offsetY !== null && availableHeight > 0 && contentHeight > availableHeight,
+    [offsetY, availableHeight, contentHeight],
+  );
+
+  const onLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { y },
+      },
+    }: LayoutChangeEvent) => {
+      setOffsetY(y);
+    },
+    [],
+  );
+
+  return (
+    <Grid
+      collapsable={false}
+      min-height={needsScroll ? 0 : undefined}
+      height={needsScroll ? availableHeight : undefined}
+      onLayout={onLayout}>
+      <Animated.ScrollView
+        style={needsScroll ? { flex: 1, minHeight: 0 } : undefined}
+        scrollEnabled={needsScroll}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={props.container?.style}
+        onContentSizeChange={(_, height) => setContentHeight(height)}>
+        {children}
+      </Animated.ScrollView>
+    </Grid>
+  );
+}

package/platforms/react-native/solutions/components/BottomSheet/files/Context.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+export interface IBottomSheetContext {
+  close: () => void;
+  /** Resolved sheet max height in pixels (used to cap scrollable list area). */
+  resolvedMaxHeight: number;
+}
+
+const BottomSheetContext = createContext<IBottomSheetContext>(null as unknown as IBottomSheetContext);
+
+export function BottomSheetContextProvider({ value, children }: { value: IBottomSheetContext; children: ReactNode }) {
+  return <BottomSheetContext.Provider value={value} children={children} />;
+}
+
+export function usePrivateContext() {
+  return useContext(BottomSheetContext);
+}
+
+/** Public imperative API, available to any component rendered inside `<BottomSheet>`. */
+export function useBottomSheet() {
+  return usePrivateContext();
+}

package/platforms/react-native/solutions/components/BottomSheet/files/FlatList.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { FlatList, FlatListProps, type LayoutChangeEvent } from 'react-native';
+
+import { Grid } from '@components';
+
+import { usePrivateContext } from './Context.tsx';
+
+/** FlatList for sheet list content. */
+export default function BottomSheetFlatList<TItem>(props: FlatListProps<TItem>) {
+  const { resolvedMaxHeight } = usePrivateContext();
+  const [offsetY, setOffsetY] = useState<number | null>(null);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  const availableHeight = useMemo(
+    () => (offsetY === null ? 0 : Math.max(0, resolvedMaxHeight - offsetY)),
+    [offsetY, resolvedMaxHeight],
+  );
+
+  const needsScroll = useMemo(
+    () => offsetY !== null && availableHeight > 0 && contentHeight > availableHeight,
+    [offsetY, availableHeight, contentHeight],
+  );
+
+  const onLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { y },
+      },
+    }: LayoutChangeEvent) => {
+      setOffsetY(y);
+    },
+    [],
+  );
+
+  return (
+    <Grid
+      collapsable={false}
+      min-height={needsScroll ? 0 : undefined}
+      height={needsScroll ? availableHeight : undefined}
+      onLayout={onLayout}>
+      <FlatList
+        onContentSizeChange={(_, height) => setContentHeight(height)}
+        scrollEnabled={needsScroll}
+        keyboardShouldPersistTaps="handled"
+        style={needsScroll ? { flex: 1, minHeight: 0 } : undefined}
+        {...props}
+      />
+    </Grid>
+  );
+}

package/platforms/react-native/solutions/components/BottomSheet/files/Header.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Button, Grid, Text } from '@components';
+
+import { IBottomSheetAction, IBottomSheetHeaderProps, TBottomSheetActionToken } from './bottomSheet.types.ts';
+import { usePrivateContext } from './Context.tsx';
+
+function Action({ action }: { action: TBottomSheetActionToken }) {
+  const { close } = usePrivateContext();
+  const resolved: IBottomSheetAction = action === 'close' ? { icon: 'close', onPress: close } : action;
+
+  return (
+    <Button
+      type={action === 'close' ? 'filled' : 'text'}
+      color={'primary'}
+      size={36}
+      round="l"
+      leadingIcon={resolved.icon}
+      onPress={resolved.onPress}
+      accessibilityRole="button"
+    />
+  );
+}
+
+/** Header row: title on the left, action icons on the sides. `'close'` triggers the sheet close. */
+export default function Header({ title, description, leadingActions, trailingActions }: IBottomSheetHeaderProps) {
+  return (
+    <Grid>
+      <Grid row align-center space-between ph-m pv-s>
+        <Grid row align-center gap-s>
+          {leadingActions?.map((action, index) => (
+            <Action action={action} key={typeof action === 'string' ? action : `leading-${index}`} />
+          ))}
+        </Grid>
+        {title ? (
+          <Grid absolute center>
+            <Text title-l color="primary" center>
+              {title}
+            </Text>
+          </Grid>
+        ) : null}
+        <Grid row align-center gap-s>
+          {trailingActions?.map((action, index) => (
+            <Action action={action} key={typeof action === 'string' ? action : `trailing-${index}`} />
+          ))}
+        </Grid>
+      </Grid>
+      <Grid center gap-s>
+        {description ? (
+          <Text mh-m mb-s title-s color="secondary" center>
+            {description}
+          </Text>
+        ) : null}
+      </Grid>
+    </Grid>
+  );
+}

package/platforms/react-native/solutions/components/BottomSheet/files/Search.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { Keyboard, TextInput } from 'react-native';
+
+import { Box, Grid } from '@components';
+
+import { IBottomSheetSearchProps } from './bottomSheet.types';
+
+/** Search input; keyboard avoidance is handled by the sheet root. */
+export default function Search({ placeholder = 'Search', onSearch }: IBottomSheetSearchProps) {
+  useEffect(
+    () => () => {
+      Keyboard.dismiss();
+    },
+    [],
+  );
+
+  return (
+    <Grid ph-m pb-s>
+      <Box borderColor="primary" borderWidth={1} round="xs" justify-center ph-s min-height={48}>
+        <TextInput placeholder={placeholder} onChangeText={onSearch} returnKeyType="search" />
+      </Box>
+    </Grid>
+  );
+}

package/platforms/react-native/solutions/components/BottomSheet/files/bottomSheet.constants.ts

@@ -0,0 +1,13 @@
+/** Horizontal inset of the floating sheet card. */
+export const SHEET_HORIZONTAL_PADDING = 16;
+/** Gap between the sheet card and the bottom of the screen. */
+export const SHEET_BOTTOM_PADDING = 16;
+
+/** Resolves the `maxHeight` cap (px or percentage of the window height) into pixels. */
+export function resolveMaxHeight(maxHeight: number | `${number}%`, windowHeight: number): number {
+  if (typeof maxHeight === 'number') {
+    return maxHeight;
+  }
+
+  return (windowHeight * parseFloat(maxHeight)) / 100;
+}

package/platforms/react-native/solutions/components/BottomSheet/files/bottomSheet.types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+export interface IBottomSheetProps {
+  children: ReactNode;
+  minHeight?: number;
+  maxHeight?: number | `${number}%`;
+  backdrop?: boolean;
+  closable?: boolean;
+  onClose?: () => void;
+  backgroundColor?: string;
+}
+
+export interface IBottomSheetAction {
+  icon: string;
+  onPress?: () => void;
+}
+
+/** `'close'` resolves to a close icon wired to the sheet `close()`. */
+export type TBottomSheetActionToken = 'close' | IBottomSheetAction;
+
+export interface IBottomSheetHeaderProps {
+  title?: string;
+  description?: string;
+  leadingActions?: TBottomSheetActionToken[];
+  trailingActions?: TBottomSheetActionToken[];
+}
+
+export interface IBottomSheetSearchProps {
+  placeholder?: string;
+  onSearch?: (query: string) => void;
+}

package/platforms/react-native/solutions/components/BottomSheet/files/index.ts

@@ -0,0 +1,33 @@
+import Common from './Common.tsx';
+import Content from './Content.tsx';
+import { useBottomSheet } from './Context.tsx';
+import FlatList from './FlatList.tsx';
+import Header from './Header.tsx';
+import Search from './Search.tsx';
+
+type TCommon = typeof Common;
+
+interface IBottomSheet extends TCommon {
+  Header: typeof Header;
+  Content: typeof Content;
+  FlatList: typeof FlatList;
+  Search: typeof Search;
+  useBottomSheet: typeof useBottomSheet;
+}
+
+const BottomSheet = Common as IBottomSheet;
+BottomSheet.Header = Header;
+BottomSheet.Content = Content;
+BottomSheet.FlatList = FlatList;
+BottomSheet.Search = Search;
+BottomSheet.useBottomSheet = useBottomSheet;
+
+export type {
+  IBottomSheetProps,
+  IBottomSheetHeaderProps,
+  IBottomSheetSearchProps,
+  IBottomSheetAction,
+  TBottomSheetActionToken,
+} from './bottomSheet.types.ts';
+
+export default BottomSheet;

package/platforms/react-native/solutions/components/BottomSheet/solution.js

@@ -0,0 +1,38 @@
+export default {
+  "id": "component:BottomSheet",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "BottomSheet",
+  "description": "Gesture-driven sheet with header and content slots.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "overlay"
+  ],
+  "requires": [],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/BottomSheet"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import BottomSheet from './BottomSheet';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  BottomSheet,\n"
+    }
+  ],
+  "manual": [],
+  "api": "BottomSheet, BottomSheet.Header, BottomSheet.Content. Props include onClose and maxHeight.",
+  "example": "<BottomSheet onClose={close}><BottomSheet.Header title=\"Filter\" /></BottomSheet>"
+};

package/platforms/react-native/solutions/components/BottomSheetWidgets/README.md

@@ -0,0 +1,29 @@
+# Bottom sheet widgets
+
+List and date-time sheets, plus Form.Element.SelectPicker.
+
+## API
+
+List bottom sheet and SelectPicker. DateTimePicker widget is used by component:DateTimePicker.
+
+## Example
+
+```tsx
+<Form.Element.SelectPicker data={items} />
+```
+
+## Dependencies
+
+None beyond the setup baseline.
+
+Requires: `component:BottomSheet`.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`stable`).
+
+Install with `forge g add --id component:BottomSheetWidgets`.

package/platforms/react-native/solutions/components/BottomSheetWidgets/files/SelectPicker.tsx

@@ -0,0 +1,47 @@
+import type { TFormSelectProps } from '@components/Form/form.types';
+import FormSelect from '@components/Form/Select';
+import { useNavigation } from '@navigation/navigation.hooks';
+import { IListBottomSheetProps, useListContext } from '@widgets/bottomSheet/List.BottomSheet';
+
+type TFormSelectPossibleProps<T> = Omit<TFormSelectProps<T>, 'onSelect' | 'value'>;
+type TListBottomSheetPossibleProps = Omit<IListBottomSheetProps, 'data' | 'renderItem'>;
+
+interface ISelectPickerProps<T> extends TFormSelectPossibleProps<T>, TListBottomSheetPossibleProps {
+  value?: any;
+  onSearch?: (query: string, item: any) => boolean;
+  getData?: () => T[] | Promise<T[]>;
+  renderItem: (props: {
+    item: T;
+    value: any;
+    onSelectChange: (value: any, title: string) => void;
+  }) => React.ReactElement;
+}
+
+export const useSelectPickerContext = useListContext;
+
+export default function SelectPicker<T>({
+  getData,
+  title,
+  renderItem,
+  value,
+  onSearch,
+  ...props
+}: ISelectPickerProps<T>) {
+  const navigation = useNavigation();
+
+  // const getTitleForValue = (value?: Date) => dayjs(value).format(format || 'DD MMM YYYY HH:mm');
+
+  const onSelect: TFormSelectProps<T>['onSelect'] = async (value, onSelectChange) => {
+    const data = (await getData?.()) || [];
+
+    navigation.widgets.showList({
+      value,
+      data,
+      title,
+      onSearch,
+      renderItem: ({ item }) => renderItem({ item, value, onSelectChange }),
+    });
+  };
+
+  return <FormSelect {...props} value={value} onSelect={onSelect} />;
+}

package/platforms/react-native/solutions/components/BottomSheetWidgets/files/bottomSheet/Content.BottomSheet.tsx

@@ -0,0 +1,22 @@
+import { useNavigation } from '@effijs/navigation-react-native';
+import React from 'react';
+
+import BottomSheet from '@components/BottomSheet';
+
+export interface IContentBottomSheetProps {
+  renderContent: (props: { closeBottomSheet?: (componentId?: string) => Promise<void> }) => React.ReactNode;
+  title?: string;
+  description?: string;
+  backgroundColor?: string;
+}
+
+export default function ContentBottomSheet({ renderContent, title, description }: IContentBottomSheetProps) {
+  const { close } = useNavigation();
+
+  return (
+    <BottomSheet onClose={close} maxHeight={500}>
+      <BottomSheet.Header title={title} description={description} trailingActions={['close']} />
+      <BottomSheet.Content ph-m={false}>{renderContent({ closeBottomSheet: close })}</BottomSheet.Content>
+    </BottomSheet>
+  );
+}

package/platforms/react-native/solutions/components/BottomSheetWidgets/files/bottomSheet/DateTimePicker.BottomSheet.tsx

@@ -0,0 +1,74 @@
+import { useNavigation } from '@effijs/navigation-react-native';
+import DatePicker, { DatePickerProps } from 'react-native-date-picker';
+
+import { Button, Grid, Text } from '@components';
+import BottomSheet from '@components/BottomSheet';
+import { theme, useTheme } from '@theme';
+
+export type TDateTimePickerBottomSheetProps = Pick<DatePickerProps, 'maximumDate' | 'minimumDate' | 'mode'>;
+
+export interface IDateTimePickerBottomSheetProps extends TDateTimePickerBottomSheetProps {
+  onChange?: (date?: Date) => void;
+  onClose?: () => void;
+  value?: Date;
+  title?: string;
+  description?: string;
+  canClear?: boolean;
+}
+
+export default function DateTimePickerBottomSheet({
+  value,
+  title,
+  description,
+  onChange,
+  onClose,
+  canClear,
+  ...datePickerProps
+}: IDateTimePickerBottomSheetProps) {
+  const { close } = useNavigation();
+  useTheme();
+
+  return (
+    <BottomSheet
+      onClose={() => {
+        close?.();
+        onClose?.();
+      }}>
+      <BottomSheet.Header title={title} trailingActions={['close']} />
+      <BottomSheet.Content>
+        {title || description ? (
+          <Grid gap-xs mv-s>
+            {title ? (
+              <Text title-l color="primary" center>
+                {title}
+              </Text>
+            ) : null}
+            {description ? <Text center>{description}</Text> : null}
+          </Grid>
+        ) : null}
+
+        <DatePicker
+          date={value || new Date()}
+          onDateChange={onChange}
+          {...datePickerProps}
+          dividerColor={theme.color.primary}
+          style={{ alignSelf: 'center' }}
+        />
+        {canClear ? (
+          <Button
+            mt-s
+            mb-l
+            type="text"
+            color="error"
+            onPress={() => {
+              onChange?.(undefined);
+              close?.();
+              onClose?.();
+            }}>
+            Clear
+          </Button>
+        ) : null}
+      </BottomSheet.Content>
+    </BottomSheet>
+  );
+}