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

package/platforms/react-native/generators/init/files/ui/components/TextInput/textInput.types.ts

@@ -0,0 +1,16 @@
+type TextSizes = 's' | 'm' | 'l';
+
+type SpacingProps<Prefix extends string> = {
+  [Size in TextSizes as `${Prefix}-${Size}`]?: boolean;
+};
+
+export interface TTextProps<TThemeColor>
+  extends SpacingProps<'title'>,
+    SpacingProps<'label'>,
+    SpacingProps<'body'>,
+    SpacingProps<'display'>,
+    SpacingProps<'headline'> {
+  color?: TThemeColor | string;
+  disabled?: boolean;
+  flex?: number;
+}

package/platforms/react-native/generators/init/files/ui/components/ThemePicker/ThemePicker.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { SchemaName, themeMeta, themeOrder, useThemeService } from '@theme';
+
+const SWATCH_SIZE = 40;
+const SWATCH_GAP = 16;
+const INDICATOR_HEIGHT = 40;
+const INDICATOR_WIDTH = 70;
+const STEP = SWATCH_SIZE + SWATCH_GAP;
+
+type ThemePickerProps = {
+  value?: SchemaName;
+  onChange?: (name: SchemaName) => void;
+  previewOnSelect?: boolean;
+};
+
+export default function ThemePicker({ value, onChange, previewOnSelect = true }: ThemePickerProps) {
+  const themeService = useThemeService();
+  const [selected, setSelected] = useState<SchemaName>(value ?? SchemaName.Blue);
+  const indicatorOffset = useSharedValue(themeOrder.indexOf(selected) * STEP);
+
+  useEffect(() => {
+    if (value) {
+      setSelected(value);
+      indicatorOffset.value = withTiming(themeOrder.indexOf(value) * STEP, { duration: 300 });
+    }
+  }, [indicatorOffset, value]);
+
+  const handleSelect = useCallback(
+    (name: SchemaName, index: number) => {
+      setSelected(name);
+      indicatorOffset.value = withTiming(index * STEP, { duration: 300 });
+      onChange?.(name);
+
+      if (previewOnSelect) {
+        themeService.setActive(name);
+      }
+    },
+    [indicatorOffset, onChange, previewOnSelect, themeService],
+  );
+
+  return (
+    <View style={styles.container}>
+      {themeOrder.map((name, index) => {
+        const isActive = selected === name;
+        return (
+          <Pressable
+            key={name}
+            onPress={() => handleSelect(name, index)}
+            style={[styles.swatch, { backgroundColor: themeMeta[name].previewColor }, isActive && styles.swatchActive]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SWATCH_GAP,
+    alignItems: 'center',
+  },
+  indicator: {
+    position: 'absolute',
+    top: 16,
+    width: INDICATOR_WIDTH,
+    height: INDICATOR_HEIGHT,
+    borderRadius: 30,
+    borderWidth: 1,
+    borderColor: '#d9cdb9',
+  },
+  swatch: {
+    width: SWATCH_SIZE,
+    height: SWATCH_SIZE,
+    borderWidth: 0,
+    borderRadius: SWATCH_SIZE / 2,
+    shadowColor: '#757575',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.32,
+    shadowRadius: 10,
+    elevation: 4,
+  },
+  swatchActive: {
+    width: INDICATOR_WIDTH,
+    borderRadius: 30,
+    borderWidth: 4,
+    borderColor: '#fffdf8',
+  },
+});

package/platforms/react-native/generators/init/files/ui/components/ThemePicker/index.ts

@@ -0,0 +1 @@
+export { default } from '@components/ThemePicker/ThemePicker.tsx';

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

@@ -0,0 +1,27 @@
+import Box from './Box';
+import Button from './Button';
+import Form from './Form';
+import Grid from './Grid';
+import Icon from './Icon';
+import Loading from './Loading';
+import Screen from './Screen';
+import Text from './Text';
+import TextInput from './TextInput';
+import ThemePicker from './ThemePicker';
+import { useStore } from './utils/useStore';
+// forge:components-import
+
+export {
+  Grid,
+  Box,
+  Text,
+  TextInput,
+  Button,
+  Icon,
+  Screen,
+  Form,
+  Loading,
+  ThemePicker,
+  useStore,
+  // forge:components-export
+};

package/platforms/react-native/generators/init/files/ui/components/utils/color.ts

@@ -0,0 +1,19 @@
+function opacityToHex(opacity: number | undefined) {
+  if (opacity === undefined) return '';
+
+  let value = opacity;
+  if (opacity < 0) value = 0;
+  if (opacity > 1) value = 1;
+
+  return Math.round(value * 255)
+    .toString(16)
+    .padStart(2, '0');
+}
+
+export function colorOpacity(color: string, opacity: number | undefined) {
+  if (opacity !== undefined && color.startsWith('#')) {
+    return `${color}${opacityToHex(opacity)}`;
+  }
+
+  return color;
+}

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

@@ -0,0 +1,3 @@
+import * as color from './color';
+
+export default { color };

package/platforms/react-native/generators/init/files/ui/components/utils/useLoading.hook.spec.tsx

@@ -0,0 +1,202 @@
+import TestRenderer, { act } from 'react-test-renderer';
+
+import { useLoading } from './useLoading.hook';
+
+/**
+ * Мінімальний renderHook на react-test-renderer — у проєкті немає
+ * @testing-library/react(-native), тож рендеримо хук через "порожній"
+ * компонент і читаємо результат з мутабельного об'єкта.
+ */
+function renderHook<TResult>(callback: () => TResult) {
+  const result = { current: undefined as unknown as TResult };
+
+  function TestComponent() {
+    result.current = callback();
+    return null;
+  }
+
+  let renderer!: ReturnType<typeof TestRenderer.create>;
+  act(() => {
+    renderer = TestRenderer.create(<TestComponent />);
+  });
+
+  return {
+    result,
+    unmount: () => act(() => renderer.unmount()),
+  };
+}
+
+// @react-native/jest-preset зазвичай виставляє це сам; дублюємо явно,
+// щоб тести не залежали від конкретного preset-налаштування середовища.
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+describe('useLoading', () => {
+  describe('useLoading — debounce', () => {
+    test('виконує лише останній виклик, попередні резолвляться undefined', async () => {
+      const fn = jest.fn().mockResolvedValue('done');
+      const { result } = renderHook(() => useLoading(fn, { debounce: 100 }));
+
+      let p1!: Promise<unknown>;
+      let p2!: Promise<unknown>;
+      let p3!: Promise<unknown>;
+
+      act(() => {
+        p1 = result.current.handle('a');
+        p2 = result.current.handle('b');
+        p3 = result.current.handle('c');
+      });
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(100);
+      });
+
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenCalledWith('c', expect.any(AbortSignal));
+      await expect(p1).resolves.toBeUndefined();
+      await expect(p2).resolves.toBeUndefined();
+      await expect(p3).resolves.toBe('done');
+    });
+  });
+
+  describe('useLoading — lock', () => {
+    test('ігнорує повторний виклик, поки попередній ще виконується', async () => {
+      let resolveFirst!: (value: unknown) => void;
+      const fn = jest.fn(
+        () =>
+          new Promise(resolve => {
+            resolveFirst = resolve;
+          }),
+      );
+      const { result } = renderHook(() => useLoading(fn));
+
+      let p1!: Promise<unknown>;
+      let p2!: Promise<unknown>;
+      act(() => {
+        p1 = result.current.handle();
+        p2 = result.current.handle();
+      });
+
+      expect(fn).toHaveBeenCalledTimes(1);
+      await expect(p2).resolves.toBeUndefined();
+
+      await act(async () => {
+        resolveFirst('ok');
+        await p1;
+      });
+    });
+  });
+
+  describe('useLoading — throttle', () => {
+    test('пропускає виклики в межах вікна throttle', async () => {
+      const fn = jest.fn().mockResolvedValue('ok');
+      const { result } = renderHook(() => useLoading(fn, { throttle: 200, lock: false }));
+
+      await act(async () => {
+        await result.current.handle();
+      });
+      expect(fn).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        await result.current.handle();
+      });
+      expect(fn).toHaveBeenCalledTimes(1); // ще в межах вікна
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(200);
+        await result.current.handle();
+      });
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('useLoading — minDuration', () => {
+    test('тримає loading=true щонайменше minDuration, навіть якщо fn швидка', async () => {
+      const fn = jest.fn().mockResolvedValue('ok');
+      const { result } = renderHook(() => useLoading(fn, { minDuration: 300 }));
+
+      let promise!: Promise<unknown>;
+      act(() => {
+        promise = result.current.handle();
+      });
+      expect(result.current.loading).toBe(true);
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(0);
+      });
+      expect(result.current.loading).toBe(true);
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(299);
+      });
+      expect(result.current.loading).toBe(true);
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(1);
+      });
+      expect(result.current.loading).toBe(false);
+      await expect(promise).resolves.toBe('ok');
+    });
+  });
+
+  describe('useLoading — unmount', () => {
+    test('скасовує відкладений (debounce) виклик при unmount', async () => {
+      const fn = jest.fn().mockResolvedValue('ok');
+      const { result, unmount } = renderHook(() => useLoading(fn, { debounce: 100 }));
+
+      let promise!: Promise<unknown>;
+      act(() => {
+        promise = result.current.handle();
+      });
+
+      unmount();
+
+      await expect(promise).resolves.toBeUndefined();
+      expect(fn).not.toHaveBeenCalled();
+    });
+
+    test('абортить активний виклик через AbortSignal при unmount', async () => {
+      const fn = jest.fn(
+        (signal: AbortSignal) =>
+          new Promise((_resolve, reject) => {
+            signal.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError')));
+          }),
+      );
+      const { result, unmount } = renderHook(() => useLoading(fn));
+
+      let promise!: Promise<unknown>;
+      act(() => {
+        promise = result.current.handle();
+      });
+
+      unmount();
+
+      await expect(promise).rejects.toThrow('Aborted');
+    });
+
+    test('очищує активний таймер minDuration при unmount, а не залишає його висіти', async () => {
+      const fn = jest.fn().mockResolvedValue('ok');
+      const { result, unmount } = renderHook(() => useLoading(fn, { minDuration: 1000 }));
+
+      act(() => {
+        result.current.handle();
+      });
+
+      await act(async () => {
+        await jest.advanceTimersByTimeAsync(0);
+      });
+      expect(jest.getTimerCount()).toBeGreaterThan(0);
+
+      unmount();
+
+      expect(jest.getTimerCount()).toBe(0);
+    });
+  });
+});

package/platforms/react-native/generators/init/files/ui/components/utils/useLoading.hook.ts

@@ -0,0 +1,172 @@
+import { useEffect, useRef, useState } from 'react';
+
+export type UseLoadingOptions = {
+  debounce?: number;
+  throttle?: number;
+  minDuration?: number;
+  lock?: boolean;
+  /**
+   * Зовнішній сигнал скасування. Коли він абортиться — абортиться і
+   * внутрішній AbortController поточного виклику fn (якщо він у польоті),
+   * а вже розпочаті/заплановані виклики, що ще не стартували, просто
+   * ігноруються (як throttle/lock).
+   */
+  signal?: AbortSignal;
+};
+
+function isThenable(value: unknown): value is PromiseLike<unknown> {
+  return typeof value === 'object' && value !== null && typeof (value as { then?: unknown }).then === 'function';
+}
+
+type PendingDebounce = {
+  timer: ReturnType<typeof setTimeout>;
+  resolve: (value: unknown) => void;
+};
+
+type LatestInputs<TArgs extends unknown[]> = {
+  fn?: (...args: [...TArgs, AbortSignal?]) => unknown;
+  options: UseLoadingOptions;
+};
+
+function createLoadingController<TArgs extends unknown[]>(
+  latest: { current: LatestInputs<TArgs> },
+  notify: (loading: boolean) => void,
+) {
+  let inFlight = 0;
+  let lastCall = 0;
+  let mounted = true;
+  let pending: PendingDebounce | undefined;
+
+  // Активні таймери minDuration — щоб можна було форсовано "розбудити" їх при unmount,
+  // а не просто чекати призначений час у нікуди.
+  const minDurationCancels = new Set<() => void>();
+  // Активні AbortController-и запущених fn — щоб при unmount дати їм шанс перерватись.
+  const activeControllers = new Set<AbortController>();
+
+  const cancelPending = () => {
+    if (!pending) return;
+    clearTimeout(pending.timer);
+    pending.resolve(undefined);
+    pending = undefined;
+  };
+
+  function waitMinDuration(ms: number): Promise<void> {
+    return new Promise<void>(resolve => {
+      const finish = () => {
+        minDurationCancels.delete(finish);
+        clearTimeout(timer);
+        resolve();
+      };
+      const timer = setTimeout(finish, ms);
+      minDurationCancels.add(finish);
+    });
+  }
+
+  async function run(...args: TArgs) {
+    const { throttle = 0, minDuration = 0, lock = true, signal: externalSignal } = latest.current.options;
+
+    if (externalSignal?.aborted) return;
+    if (lock && inFlight > 0) return;
+
+    if (throttle > 0) {
+      const now = Date.now();
+      if (now - lastCall < throttle) return;
+      lastCall = now;
+    }
+
+    const controller = new AbortController();
+    const forwardAbort = () => controller.abort();
+    externalSignal?.addEventListener('abort', forwardAbort);
+    activeControllers.add(controller);
+
+    const detach = () => {
+      activeControllers.delete(controller);
+      externalSignal?.removeEventListener('abort', forwardAbort);
+    };
+
+    const result = latest.current.fn?.(...args, controller.signal);
+    if (!isThenable(result)) {
+      detach();
+      return result;
+    }
+
+    inFlight += 1;
+    const started = Date.now();
+    if (mounted) notify(true);
+
+    try {
+      return await result;
+    } finally {
+      inFlight -= 1;
+      detach();
+
+      // Якщо вже unmounted — не чекаємо штучно minDuration, нікому це вже не покаже UI.
+      const wait = minDuration - (Date.now() - started);
+      if (wait > 0 && mounted) await waitMinDuration(wait);
+
+      if (mounted && inFlight === 0) notify(false);
+    }
+  }
+
+  function handle(...args: TArgs): Promise<unknown> {
+    const { debounce = 0 } = latest.current.options;
+    if (debounce <= 0) return run(...args);
+
+    return new Promise<unknown>((resolve, reject) => {
+      cancelPending();
+      const timer = setTimeout(() => {
+        pending = undefined;
+        run(...args).then(resolve, reject);
+      }, debounce);
+      pending = { timer, resolve };
+    });
+  }
+
+  return {
+    handle,
+    onMount() {
+      mounted = true;
+    },
+    onUnmount() {
+      mounted = false;
+      cancelPending();
+      for (const finish of [...minDurationCancels]) finish();
+      for (const controller of [...activeControllers]) controller.abort();
+    },
+  };
+}
+
+/**
+ * Хук для керування `loading`-станом довкола (можливо асинхронної) функції.
+ *
+ * Debounce: якщо виклик `handle()` скасовано новим викликом (спрацював
+ * дебаунс) або unmount-ом компонента — повернутий Promise резолвиться
+ * значенням `undefined`, а НЕ відхиляється. Це свідоме скасування, а не
+ * помилка виконання: перевіряйте результат на `undefined`, а не покладайтесь
+ * на try/catch, щоб відрізнити "скасовано" від "виконано".
+ *
+ * `fn` опціонально може прийняти останнім аргументом `AbortSignal` — він
+ * абортиться автоматично при unmount, а також коли абортиться переданий
+ * ззовні `options.signal`.
+ */
+export function useLoading<TArgs extends any[]>(
+  fn?: (...args: [...TArgs, AbortSignal?]) => unknown,
+  options: UseLoadingOptions = {},
+): { loading: boolean; handle: (...args: TArgs) => Promise<unknown> } {
+  const [loading, setLoading] = useState(false);
+
+  const latestRef = useRef<LatestInputs<TArgs>>({ fn, options });
+  latestRef.current = { fn, options };
+
+  const controllerRef = useRef<ReturnType<typeof createLoadingController<TArgs>> | undefined>(undefined);
+  if (!controllerRef.current) {
+    controllerRef.current = createLoadingController<TArgs>(latestRef, setLoading);
+  }
+
+  useEffect(() => {
+    controllerRef.current!.onMount();
+    return () => controllerRef.current!.onUnmount();
+  }, []);
+
+  return { loading, handle: controllerRef.current.handle };
+}

package/platforms/react-native/generators/init/files/ui/components/utils/useStore.ts

@@ -0,0 +1,34 @@
+import { Store } from '@effijs/common';
+import { useEffect, useMemo, useState } from 'react';
+
+export function useStore<TSchema extends Store.TData, P extends Store.TPathOf<TSchema>>(
+  store: Store.Common<TSchema>,
+  key: P,
+): Store.PathValue<TSchema, P>;
+export function useStore<TSchema extends Store.TData, P extends Store.TPathOf<TSchema>, T>(
+  store: Store.Common<TSchema>,
+  key: P,
+  handle: (data: Store.PathValue<TSchema, P>) => T,
+): T;
+export function useStore<TSchema extends Store.TData, P extends Store.TPathOf<TSchema>, T>(
+  store: Store.Common<TSchema>,
+  key: P,
+  handle?: (data: Store.PathValue<TSchema, P>) => T,
+): Store.PathValue<TSchema, P> | T {
+  const [data, setData] = useState(handle ? handle(store.getByPath(key)) : store.getByPath(key));
+
+  const hash = useMemo(() => JSON.stringify(key), [key]);
+
+  useEffect(() => {
+    const removeDataSubscription = store.subscribe({ value: key }, subscriptionData =>
+      setData(handle ? handle(subscriptionData.value) : subscriptionData.value),
+    );
+    return () => {
+      removeDataSubscription();
+      // setData({});
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hash]);
+
+  return data;
+}

package/platforms/react-native/generators/init/files/ui/icons/font-icons.json

@@ -0,0 +1,53 @@
+{
+    "water": 61697,
+    "user": 61698,
+    "upload": 61699,
+    "star": 61700,
+    "sleep": 61701,
+    "settings": 61702,
+    "setting": 61703,
+    "search": 61704,
+    "running": 61705,
+    "rerecord": 61706,
+    "repeat": 61707,
+    "reload": 61708,
+    "preset-day": 61709,
+    "plus": 61710,
+    "plus-circle": 61711,
+    "plus-cicle": 61712,
+    "plus-cicle-border": 61713,
+    "pin": 61714,
+    "paint-brush": 61715,
+    "new-event": 61716,
+    "msg": 61717,
+    "low-smile": 61718,
+    "low-sad": 61719,
+    "log-out": 61720,
+    "lock": 61721,
+    "list": 61722,
+    "icon-5": 61723,
+    "icon-4": 61724,
+    "icon-3": 61725,
+    "icon-2": 61726,
+    "icon-1": 61727,
+    "high-smile": 61728,
+    "high-sad": 61729,
+    "heart": 61730,
+    "heart-filled": 61731,
+    "grid": 61732,
+    "flat": 61733,
+    "favourite-event": 61734,
+    "eye": 61735,
+    "ellipsis-horizontal": 61736,
+    "dollar": 61737,
+    "close": 61738,
+    "close-circle": 61739,
+    "clock": 61740,
+    "check": 61741,
+    "calendar": 61742,
+    "bookmark": 61743,
+    "bell": 61744,
+    "back": 61745,
+    "arrow-right": 61746,
+    "arrow-down": 61747
+}