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

package/platforms/react-native/generators/init/files/ui/widgets/toast/Toast.Item.tsx

@@ -0,0 +1,175 @@
+import { EffiJS } from '@effijs/common';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { Box, Grid, Text } from '@components';
+
+import { ToastService } from './toast.service';
+import type { IToastItem, ToastType } from './toast.types';
+
+const SWIPE_THRESHOLD = 50;
+const WARNING_COLOR = '#F5A623';
+
+interface IToastTypeConfig {
+  accentColor: string;
+  backgroundColor: string;
+  titleColor: string;
+  descriptionColor: string;
+}
+
+function getTypeConfig(type: ToastType): IToastTypeConfig {
+  switch (type) {
+    case 'success':
+      return {
+        accentColor: 'primary',
+        backgroundColor: 'primary',
+        titleColor: 'onPrimary',
+        descriptionColor: 'onPrimary',
+      };
+    case 'error':
+      return {
+        accentColor: 'error',
+        backgroundColor: 'error',
+        titleColor: 'onError',
+        descriptionColor: 'onError',
+      };
+    case 'warning':
+      return {
+        accentColor: WARNING_COLOR,
+        backgroundColor: '#ffffff',
+        titleColor: WARNING_COLOR,
+        descriptionColor: WARNING_COLOR,
+      };
+    case 'message':
+      return {
+        accentColor: 'primary',
+        backgroundColor: 'primary',
+        titleColor: 'onPrimary',
+        descriptionColor: 'onPrimary',
+      };
+    default:
+      return getTypeConfig('message');
+  }
+}
+
+interface IToastItemProps {
+  item: IToastItem;
+  stackIndex: number;
+}
+
+export default function ToastItem({ item, stackIndex }: IToastItemProps) {
+  const toastService = useMemo(() => EffiJS.resolve<ToastService>('ToastService'), []);
+  const config = getTypeConfig(item.type);
+
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(-16);
+  const opacity = useSharedValue(0);
+  const scale = useSharedValue(1 - stackIndex * 0.04);
+
+  const dismissedRef = useRef(false);
+
+  const finishDismiss = useCallback(() => {
+    if (dismissedRef.current) {
+      return;
+    }
+    dismissedRef.current = true;
+    toastService.dismiss(item.id);
+  }, [item.id, toastService]);
+
+  const animateDismiss = useCallback(
+    (direction?: 'left' | 'right') => {
+      if (dismissedRef.current) {
+        return;
+      }
+
+      const targetX = direction === 'left' ? -400 : direction === 'right' ? 400 : translateX.value;
+
+      translateX.value = withTiming(targetX, { duration: 200 });
+      opacity.value = withTiming(0, { duration: 200 }, finished => {
+        if (finished) {
+          runOnJS(finishDismiss)();
+        }
+      });
+    },
+    [finishDismiss, opacity, translateX],
+  );
+
+  const handlePress = useCallback(() => {
+    item.onPress?.();
+    animateDismiss();
+  }, [animateDismiss, item]);
+
+  const gesture = usePanGesture({
+    activeOffsetX: [-10, 10],
+    onUpdate: event => {
+      translateX.value = event.translationX;
+    },
+    onDeactivate: event => {
+      if (event.translationX < -SWIPE_THRESHOLD) {
+        runOnJS(animateDismiss)('left');
+      } else if (event.translationX > SWIPE_THRESHOLD) {
+        runOnJS(animateDismiss)('right');
+      } else {
+        translateX.value = withTiming(0, { duration: 150 });
+      }
+    },
+  });
+
+  useEffect(() => {
+    translateY.value = withTiming(0, { duration: 250 });
+    opacity.value = withTiming(1, { duration: 250 });
+    scale.value = withTiming(1 - stackIndex * 0.04, { duration: 250 });
+  }, [opacity, scale, stackIndex, translateY]);
+
+  useEffect(() => {
+    if (item.duration === undefined) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      animateDismiss();
+    }, item.duration);
+
+    return () => clearTimeout(timer);
+  }, [animateDismiss, item.duration]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value + stackIndex * 6 },
+      { scale: scale.value },
+    ],
+  }));
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.itemWrapper, animatedStyle]}>
+        <Pressable onPress={handlePress}>
+          <Box row p-m gap-s round="m" shadow-s align-center color={config.backgroundColor}>
+            <Grid flex={1} gap-xs>
+              {item.title ? (
+                <Text body-m weight={600} color={config.titleColor}>
+                  {item.title}
+                </Text>
+              ) : null}
+              {item.description ? (
+                <Text body-s color={config.descriptionColor}>
+                  {item.description}
+                </Text>
+              ) : null}
+            </Grid>
+          </Box>
+        </Pressable>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  itemWrapper: {
+    width: '100%',
+  },
+});

package/platforms/react-native/generators/init/files/ui/widgets/toast/Toast.Overlay.tsx

@@ -0,0 +1,46 @@
+import { EffiJS } from '@effijs/common';
+import { useNavigation } from '@effijs/navigation-react-native';
+import React, { useEffect, useMemo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useStore } from '@components';
+import { Theme } from '@theme';
+
+import ToastStack from './Toast.Stack';
+import { ToastStore } from './toast.store';
+
+export default function ToastOverlay() {
+  const { close } = useNavigation();
+  const insets = useSafeAreaInsets();
+  const toastStore = useMemo(() => EffiJS.resolve<ToastStore>('ToastStore'), []);
+  const active = useStore(toastStore, 'active');
+  const queue = useStore(toastStore, 'queue');
+
+  useEffect(() => {
+    if (active.length === 0 && queue.length === 0) {
+      toastStore.setOverlayOpen(false);
+      close?.();
+    }
+  }, [active.length, close, queue.length, toastStore]);
+
+  return (
+    <GestureHandlerRootView style={styles.root} pointerEvents="box-none">
+      <Theme>
+        <View style={[styles.container, { paddingTop: insets.top + 8 }]} pointerEvents="box-none">
+          <ToastStack />
+        </View>
+      </Theme>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: Platform.OS === 'ios' ? 1 : undefined,
+  },
+  container: {
+    paddingHorizontal: 16,
+  },
+});

package/platforms/react-native/generators/init/files/ui/widgets/toast/Toast.Stack.tsx

@@ -0,0 +1,75 @@
+import { EffiJS } from '@effijs/common';
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Box, Text, useStore } from '@components';
+
+import ToastItem from './Toast.Item';
+import { ToastStore } from './toast.store';
+
+export default function ToastStack() {
+  const toastStore = useMemo(() => EffiJS.resolve<ToastStore>('ToastStore'), []);
+  const active = useStore(toastStore, 'active');
+  const hiddenCount = useStore(toastStore, 'queue', queue => queue.length as number);
+
+  const badgeScale = useSharedValue(1);
+
+  useEffect(() => {
+    if (hiddenCount > 0) {
+      badgeScale.value = withRepeat(
+        withSequence(withTiming(1.08, { duration: 600 }), withTiming(1, { duration: 600 })),
+        -1,
+        false,
+      );
+    } else {
+      badgeScale.value = withTiming(1, { duration: 150 });
+    }
+  }, [badgeScale, hiddenCount]);
+
+  const badgeStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: badgeScale.value }],
+  }));
+
+  const visibleItems = [...active].reverse();
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      <View style={styles.stack} pointerEvents="box-none">
+        {visibleItems.map((item, index) => (
+          <ToastItem key={item.id} item={item} stackIndex={index} />
+        ))}
+      </View>
+      {hiddenCount > 0 ? (
+        <Animated.View style={[styles.badgeWrap, badgeStyle]}>
+          <Box color="primary" ph-s pv-xs round="full" center>
+            <Text body-s color="onPrimary" weight={600}>
+              +{hiddenCount}
+            </Text>
+          </Box>
+        </Animated.View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    // alignItems: 'center',
+  },
+  stack: {
+    width: '100%',
+    gap: 8,
+  },
+  badgeWrap: {
+    marginTop: 8,
+    alignSelf: 'center',
+  },
+});

package/platforms/react-native/generators/init/files/ui/widgets/toast/index.ts

@@ -0,0 +1,7 @@
+import './toast.store';
+import './toast.service';
+
+export type { IToastShowOptions, IToastItem, ToastType } from './toast.types';
+export { ToastStore } from './toast.store';
+export { ToastService } from './toast.service';
+export { default as ToastOverlay } from './Toast.Overlay';

package/platforms/react-native/generators/init/files/ui/widgets/toast/toast.hooks.ts

@@ -0,0 +1,18 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'message';
+
+export interface IToastShowOptions {
+  type: ToastType;
+  title?: string;
+  description?: string;
+  duration?: number;
+  onPress?: () => void;
+}
+
+export interface IToastItem {
+  id: string;
+  type: ToastType;
+  title?: string;
+  description?: string;
+  duration: number | undefined;
+  onPress?: () => void;
+}

package/platforms/react-native/generators/init/files/ui/widgets/toast/toast.service.ts

@@ -0,0 +1,39 @@
+import { Entity } from '@effijs/common';
+
+import { ToastStore } from './toast.store';
+import type { IToastItem, IToastShowOptions } from './toast.types';
+
+@Entity.Decorators.Service()
+export class ToastService {
+  constructor(readonly store: ToastStore) {}
+
+  show(options: IToastShowOptions): boolean {
+    const duration = 'duration' in options ? options.duration : 5000;
+
+    const item: IToastItem = {
+      id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      type: options.type,
+      title: options.title,
+      description: options.description,
+      duration,
+      onPress: options.onPress,
+    };
+
+    this.store.enqueue(item);
+
+    if (this.store.getByPath('overlayOpen')) {
+      return false;
+    }
+
+    this.store.setOverlayOpen(true);
+    return true;
+  }
+
+  dismiss(id: string) {
+    this.store.remove(id);
+
+    if (this.store.isEmpty()) {
+      this.store.setOverlayOpen(false);
+    }
+  }
+}

package/platforms/react-native/generators/init/files/ui/widgets/toast/toast.store.ts

@@ -0,0 +1,59 @@
+import { Entity, Store } from '@effijs/common';
+
+import type { IToastItem } from './toast.types';
+
+const MAX_ACTIVE = 3;
+
+@Entity.Decorators.Store()
+export class ToastStore extends Store.Common<{
+  active: IToastItem[];
+  queue: IToastItem[];
+  overlayOpen: boolean;
+}> {
+  constructor() {
+    super({
+      active: [],
+      queue: [],
+      overlayOpen: false,
+    });
+  }
+
+  enqueue(item: IToastItem) {
+    const queue = [...this.getByPath('queue'), item];
+    this.set('queue', queue);
+    this.fillActive();
+  }
+
+  remove(id: string) {
+    const active = this.getByPath('active').filter(item => item.id !== id);
+    this.set('active', active);
+    this.fillActive();
+  }
+
+  fillActive() {
+    const active = [...this.getByPath('active')];
+    const queue = [...this.getByPath('queue')];
+
+    while (active.length < MAX_ACTIVE && queue.length > 0) {
+      const next = queue.shift();
+      if (next) {
+        active.push(next);
+      }
+    }
+
+    this.set('active', active);
+    this.set('queue', queue);
+  }
+
+  isEmpty() {
+    return this.getByPath('active').length === 0 && this.getByPath('queue').length === 0;
+  }
+
+  get hiddenCount() {
+    return this.getByPath('queue').length;
+  }
+
+  setOverlayOpen(open: boolean) {
+    this.set('overlayOpen', open);
+  }
+}

package/platforms/react-native/generators/init/files/ui/widgets/toast/toast.types.ts

@@ -0,0 +1,18 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'message';
+
+export interface IToastShowOptions {
+  type: ToastType;
+  title?: string;
+  description?: string;
+  duration?: number;
+  onPress?: () => void;
+}
+
+export interface IToastItem {
+  id: string;
+  type: ToastType;
+  title?: string;
+  description?: string;
+  duration: number | undefined;
+  onPress?: () => void;
+}

package/platforms/react-native/generators/init/files/ui/widgets/widgets.feature.ts

@@ -0,0 +1,14 @@
+import { Entity, EffiJS } from '@effijs/common';
+
+import { ToastService } from './toast';
+// forge:widgets-import
+
+@Entity.Decorators.Feature()
+export class WidgetsFeature {
+  constructor(
+    readonly toast: ToastService,
+    // forge:widgets-ctor
+  ) {}
+}
+
+EffiJS.create(WidgetsFeature, 'WidgetsFeature');

package/platforms/react-native/generators/init/files/utils/date.ts

@@ -0,0 +1,11 @@
+import dayjs from 'dayjs';
+
+export function dayjsInstance() {
+  return dayjs();
+}
+
+export function format(date: Date | string, pattern = 'YYYY-MM-DD') {
+  return dayjs(date).format(pattern);
+}
+
+export { dayjs };

package/platforms/react-native/generators/init/files/utils/index.ts

@@ -0,0 +1,12 @@
+import * as date from './date';
+import * as string from './string';
+export { StorePersistent, StorePersistentSessionBased } from './store.persistent';
+
+export { StoreRegistry } from './store.registry';
+
+function sleep(time: number) {
+  return new Promise(resolve => setTimeout(() => resolve(true), time));
+}
+
+export default { string, sleep, date };
+// forge:utils

package/platforms/react-native/generators/init/files/utils/store.persistent.ts

@@ -0,0 +1,103 @@
+import { Store, Logger } from '@effijs/common';
+import { Configuration, createMMKV } from 'react-native-mmkv';
+
+export class StorePersistent<T extends Store.TData> extends Store.Common<T> {
+  private logger = new Logger(this.constructor.name, { withTimestamp: true });
+
+  constructor(initial?: T) {
+    const storage = createMMKV({
+      id: 'test-general',
+      encryptionKey: 'very$ecretKeyF0rGener@l$t0r@ge',
+      mode: 'single-process',
+    } as Configuration);
+
+    super();
+
+    const key = this.constructor.name;
+    const raw = storage.getString(key);
+    this.logger.log('###### STORE::LOAD::', key, '::', raw);
+    if (raw || initial) {
+      this.set(() => (raw ? JSON.parse(raw) : initial));
+    }
+
+    let timeout: number;
+    this.subscribe('*', data => {
+      this.logger.log('###### STORE::SAVE::', key, '::', data);
+
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        storage.set(key, JSON.stringify(data));
+      }, 100);
+    });
+  }
+}
+
+export class StorePersistentSessionBased<T extends Store.TData> extends Store.Common<T> {
+  protected static store: Set<StorePersistentSessionBased<any>> = new Set();
+  private logger = new Logger(this.constructor.name, { withTimestamp: true });
+
+  static loadFor(sessionId: string) {
+    this.store.forEach(store => {
+      store.loadFor(sessionId);
+    });
+  }
+
+  static destroy() {
+    this.store.forEach(store => {
+      store.destroy();
+    });
+  }
+
+  private timeout?: ReturnType<typeof setTimeout>;
+  private unsubscribe?: () => void;
+  private storage?: ReturnType<typeof createMMKV>;
+  private persistKey = this.constructor.name;
+
+  constructor(initial?: T) {
+    super(initial);
+    StorePersistentSessionBased.store.add(this);
+  }
+
+  private loadFor(sessionId: string) {
+    this.unsubscribe?.();
+    this.unsubscribe = undefined;
+    clearTimeout(this.timeout);
+
+    this.storage = createMMKV({
+      id: sessionId,
+      encryptionKey: `${sessionId}-very$ecretKeyF0rGener@l$t0r@ge`,
+      mode: 'single-process',
+    } as Configuration);
+
+    const raw = this.storage.getString(this.persistKey);
+    this.logger.log('###### STORE::LOAD::', this.persistKey, '::', raw);
+    if (raw) {
+      this.set(() => JSON.parse(raw));
+    }
+
+    this.unsubscribe = this.subscribe('*', data => {
+      this.logger.log('###### STORE::SAVE::', this.persistKey, '::', data);
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.storage?.set(this.persistKey, JSON.stringify(data));
+      }, 100);
+    });
+  }
+
+  private persistNow() {
+    if (!this.storage) {
+      return;
+    }
+
+    clearTimeout(this.timeout);
+    this.storage.set(this.persistKey, JSON.stringify(this.all()));
+  }
+
+  private destroy() {
+    this.persistNow();
+    this.unsubscribe?.();
+    this.unsubscribe = undefined;
+    this.delete('*', { skipNotify: true });
+  }
+}

package/platforms/react-native/generators/init/files/utils/store.registry.ts

@@ -0,0 +1,14 @@
+import { Entity, Store } from '@effijs/common';
+
+@Entity.Decorators.Store()
+export class StoreRegistry {
+  private stores = new Set<Store.Common>();
+
+  register(store: any) {
+    this.stores.add(store);
+  }
+
+  clear() {
+    this.stores.forEach(store => store.delete('*'));
+  }
+}