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

package/platforms/react-native/generators/init/files/ui/components/Icon/icons.pm.ts

@@ -0,0 +1,74 @@
+import { Prop, PropertyManager, Node, Static } from '@effijs/props-manager';
+
+import iconCodes from '@icons/font-icons.json';
+
+function getIconType(icon: string) {
+  if (isFontBasedIcon(icon)) {
+    return 'font';
+  } else if (typeof icon === 'string') {
+    return 'text';
+  }
+  return 'component';
+}
+
+function isFontBasedIcon(icon: string) {
+  return Object.prototype.hasOwnProperty.call(iconCodes, icon);
+}
+
+type TObject = Record<string, any>;
+
+export const IconsPM = PropertyManager.create('Icons').node(
+  Node('container')
+    .extends('Grid')
+    .keys(
+      Static({
+        allowFontScaling: false,
+      }),
+      Prop('icon', ({ icon }: { icon: keyof typeof iconCodes | string }) => {
+        const type = getIconType(icon);
+        const res = {
+          type,
+        } as TObject;
+        if (type === 'font') {
+          res.children = String.fromCharCode(iconCodes[icon as keyof typeof iconCodes]);
+        }
+        return res;
+      }),
+    )
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Prop(
+        ['color', 'icon', 'theme'],
+        ({ color, icon, theme: themeName }, { theme }) => {
+          const res = {} as TObject;
+          if (isFontBasedIcon(icon)) {
+            res.color = theme.get(`color.${color}`, themeName) ?? color;
+          }
+          return res;
+        },
+        { providers: ['theme'] },
+      ),
+      Prop(['icon', 'size'], (props: { icon: string; size: number | undefined } | TObject) => {
+        const type = getIconType(props.icon);
+
+        const baseSize = props.size || 24;
+        const scale = Math.min(1, 1);
+        const size = Math.round(baseSize * scale);
+
+        const res = {
+          width: size,
+          height: size,
+        } as TObject;
+        if (type === 'font') {
+          res.fontFamily = 'font-icons';
+          res.fontWeight = 'normal';
+          res.fontStyle = 'normal';
+          res.fontSize = size;
+          res.textAlign = 'center';
+          res.textAlignVertical = 'center';
+        }
+        return res;
+      }),
+    ),
+);

package/platforms/react-native/generators/init/files/ui/components/Icon/icons.types.ts

@@ -0,0 +1,19 @@
+import iconCodes from '@icons/font-icons.json';
+
+export type TIconNames = keyof typeof iconCodes;
+
+export interface IIconProps extends Record<string, unknown> {
+  icon: TIconNames;
+  size?: number;
+  color?: string;
+  /**
+   * Accessibility label for the icon. If not provided, the icon will be hidden from screen readers.
+   * Only provide this if the icon conveys important information not available elsewhere.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Marks the icon as decorative. Decorative icons are hidden from screen readers.
+   * Defaults to true when no accessibilityLabel is provided.
+   */
+  isDecorative?: boolean;
+}

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

@@ -0,0 +1,3 @@
+import Icon from './Common';
+
+export default Icon;

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

@@ -0,0 +1,10 @@
+import { ProgressIndicator } from '@components';
+import { loadingService } from '@components/Loading/loading.service.ts';
+
+export default function Loading({ key }: { key: string }) {
+  const loading = loadingService.isLoading(key);
+
+  if (!loading) return null;
+
+  return <ProgressIndicator.Circular />;
+}

package/platforms/react-native/generators/init/files/ui/components/Loading/loading.hook.ts

@@ -0,0 +1,5 @@
+import { loadingService } from '@components/Loading/loading.service.ts';
+
+export const useLoading = ({ key }: { key: string }) => {
+  return loadingService.isLoading(key);
+};

package/platforms/react-native/generators/init/files/ui/components/Loading/loading.service.ts

@@ -0,0 +1,22 @@
+import { LoadingStore } from '@components/Loading/loading.store';
+
+class LoadingService {
+  private readonly store = new LoadingStore();
+
+  async withLoading(handler: (...args: any[]) => Promise<any>, key: string) {
+    this.store.set(`loading.${key}`, true);
+    try {
+      await handler();
+    } catch (e) {
+      this.store.set(`error.${key}`, e?.message || '');
+    } finally {
+      this.store.set(`loading.${key}`, false);
+    }
+  }
+
+  isLoading(key: string) {
+    return this.store.getByPath(`loading.${key}`);
+  }
+}
+
+export const loadingService = new LoadingService();

package/platforms/react-native/generators/init/files/ui/components/Loading/loading.store.ts

@@ -0,0 +1,8 @@
+import { Store } from '@effijs/common';
+
+export type LoadingStoreState = {
+  loading?: Record<any, boolean>;
+  error?: Record<any, any>;
+};
+
+export class LoadingStore extends Store.Common<LoadingStoreState> {}

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

@@ -0,0 +1,87 @@
+import { useNavigation } from '@effijs/navigation-react-native';
+import React, { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
+import { Navigation } from 'react-native-navigation';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import { Box, Grid, Text } from '@components';
+import configs from '@configs';
+import { Theme } from '@theme';
+
+interface ICommonScreenProps {
+  label?: string;
+  children?: React.ReactNode;
+  withVisibility?: boolean;
+}
+
+export default function CommonScreen({ label, withVisibility, children }: ICommonScreenProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const { componentId } = useNavigation();
+
+  useEffect(() => {
+    if (!componentId) return;
+
+    const listener = {
+      componentDidAppear: () => {
+        console.log('RNN', `componentDidAppear`);
+        setIsVisible(true);
+      },
+      componentDidDisappear: () => {
+        console.log('RNN', `componentDidDisappear`);
+        setIsVisible(false);
+      },
+    };
+    const unsubscribe = Navigation.events().registerComponentListener(listener, componentId);
+    return () => {
+      unsubscribe.remove();
+    };
+  }, [componentId]);
+
+  if (withVisibility && !isVisible) return null;
+
+  const handleStartShouldSetResponder = () => {
+    Keyboard.dismiss();
+    return false;
+  };
+
+  return (
+    <SafeAreaProvider>
+      <KeyboardProvider>
+        <GestureHandlerRootView>
+          <Theme>
+            <Grid flex={1} row>
+              {label ? <ScreenLabel title={label} /> : null}
+              <Box flex={1} color="background" onStartShouldSetResponder={handleStartShouldSetResponder}>
+                {children}
+              </Box>
+            </Grid>
+          </Theme>
+        </GestureHandlerRootView>
+      </KeyboardProvider>
+    </SafeAreaProvider>
+  );
+}
+
+function ScreenLabel({ title }: { title: string }) {
+  return (
+    <Box width={48} row align-start color="primary">
+      <Text
+        family="Athena"
+        weight={300}
+        fontSize={24}
+        color="onPrimary"
+        mb-l
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: -24,
+          transform: [{ rotate: '-90deg' }, { translateX: -100 }],
+        }}>
+        {title}
+      </Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,77 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { type LayoutChangeEvent, Platform } from 'react-native';
+import { useAnimatedKeyboard } from 'react-native-keyboard-controller';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Grid } from '@components';
+import { GridPM } from '@components/Grid/grid.pm.ts';
+
+export default function ScreenContent({
+  children,
+  scrollable,
+  'sa-t': safeAreaTop,
+  'sa-b': safeAreaBottom,
+  ...screenProps
+}: {
+  children?: React.ReactNode;
+  scrollable?: boolean;
+  'sa-t'?: boolean;
+  'sa-b'?: boolean;
+  'mh-s'?: boolean;
+}) {
+  const props = GridPM.get({ flexGrow: 1, ...screenProps });
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const animatedKeyboard = useAnimatedKeyboard();
+  const { top, bottom } = useSafeAreaInsets();
+
+  const onContainerLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }: LayoutChangeEvent) => {
+      setContainerHeight(height);
+    },
+    [],
+  );
+
+  const autoScrollable = useMemo(() => contentHeight > containerHeight, [contentHeight, containerHeight]);
+  const isScrollable = scrollable ?? autoScrollable;
+
+  const keyboardHeight = useAnimatedStyle(
+    () => ({
+      height:
+        (Platform.OS === 'ios' ? animatedKeyboard.height.value : 0) ||
+        (safeAreaBottom ? bottom : 0) ||
+        (Platform.OS === 'android' ? 24 : 0) ||
+        0,
+    }),
+    [safeAreaBottom, bottom],
+  );
+
+  if (scrollable === false) {
+    return (
+      <Grid flex={1} onLayout={onContainerLayout} pt={safeAreaTop ? top : 0} style={props.container?.style}>
+        {children}
+        <Animated.View style={keyboardHeight} />
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid flex={1} onLayout={onContainerLayout} pt={safeAreaTop ? top : 0}>
+      <Animated.ScrollView
+        scrollEnabled={isScrollable}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={props.container?.style}
+        onContentSizeChange={(_, height) => setContentHeight(height)}>
+        {children}
+        <Animated.View style={keyboardHeight} />
+      </Animated.ScrollView>
+    </Grid>
+  );
+}

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

@@ -0,0 +1,80 @@
+import { useNavigation } from '@effijs/navigation-react-native';
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Button, Grid, Text } from '@components';
+import { theme, useTheme } from '@theme';
+
+export default function Header({
+  type = 'modal',
+  title,
+  logo,
+  onBack,
+}: {
+  type?: 'modal' | 'tab' | 'push';
+  title?: string;
+  logo?: boolean;
+  onBack?: () => boolean | Promise<boolean>;
+}) {
+  const { top } = useSafeAreaInsets();
+  const { close } = useNavigation();
+  const themeName = useTheme();
+
+  return (
+    <Grid row>
+      <Grid min-height={60} flex={1} width="100%" mt={top} pt-s={Platform.OS === 'android'} center mb-l={!!logo}>
+        <Grid absolute center pt-s={Platform.OS === 'android'}>
+          <Text fontSize={22} color="outline">
+            {title}
+          </Text>
+        </Grid>
+        <Grid absolute center pt-s={Platform.OS === 'android'}>
+          <Grid>
+            {logo
+              ? null
+              : /*<Image.Native
+                source={require('@images/logo.png')}
+                tintColor={theme.color.primary}
+                style={{ width: 60, height: 60 }}
+                width={60}
+                height={60}
+              />*/
+                null}
+            {/*{logo ? <Image.SVG image={require('@icons/logo.svg')} width={60} height={60} color="primary" /> : null}*/}
+          </Grid>
+        </Grid>
+
+        <Grid row space-between ph-s>
+          <Grid>
+            {type === 'push' ? (
+              <Button
+                type="text"
+                leadingIcon="back"
+                withoutLoadingIndicator
+                size={40}
+                onPress={async () => {
+                  if ((onBack && (await onBack?.())) || !onBack) {
+                    close?.();
+                  }
+                }}
+              />
+            ) : null}
+          </Grid>
+          <Grid flex={1} />
+          <Grid>
+            {type === 'modal' ? (
+              <Button
+                type="filled"
+                leadingIcon="close"
+                withoutLoadingIndicator
+                round="xxl"
+                size={40}
+                onPress={() => close?.()}
+              />
+            ) : null}
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Box, Grid } from '@components';
+
+export default function HeaderTab({ children }: { children: React.ReactNode }) {
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <Box shadow-s width="100%" color="onBackgroundSecondVariant" style={{ zIndex: 100 }}>
+      <Grid min-height={60} mt={top} pt-s={Platform.OS === 'android'} pb-s>
+        {children}
+      </Grid>
+    </Box>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function SafeAreaHOC(Component: any) {
+  return (props: any) => (
+    <SafeAreaProvider pointerEvents="box-none">
+      <Component {...props} />
+    </SafeAreaProvider>
+  );
+}

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

@@ -0,0 +1,22 @@
+import Common from './Common';
+import Content from './Content';
+import Header from './Header';
+import HeaderTab from './HeaderTab';
+
+type TCommon = typeof Common;
+type THeader = typeof Header;
+type THeaderTab = typeof HeaderTab;
+type TContent = typeof Content;
+
+interface IScreen extends TCommon {
+  Content: TContent;
+  Header: THeader;
+  HeaderTab: THeaderTab;
+}
+
+const Screen = Common as IScreen;
+Screen.Content = Content;
+Screen.Header = Header;
+Screen.HeaderTab = HeaderTab;
+
+export default Screen;

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

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { Text, TextProps } from 'react-native';
+
+import { useTheme, TThemeColor } from '@theme';
+
+import { TGridProps } from '../Grid/grid.types';
+
+import { TextPM } from './text.pm';
+import { TTextProps } from './text.types';
+
+const TextCommon = forwardRef<Text, TTextProps<TThemeColor> & TGridProps & TextProps>(
+  ({ children, ...commonProps }, ref) => {
+    const theme = useTheme();
+    const { container } = TextPM.get({ theme, ...commonProps });
+
+    return <Text ref={ref} {...container} children={children} />;
+  },
+);
+
+export default TextCommon;

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

@@ -0,0 +1,13 @@
+import Common from './Common';
+import { TextPM } from './text.pm';
+
+type TCommon = typeof Common;
+
+interface IText extends TCommon {
+  PM: typeof TextPM;
+}
+
+const Text = Common as IText;
+Text.PM = TextPM;
+
+export default Text;

package/platforms/react-native/generators/init/files/ui/components/Text/text.pm.ts

@@ -0,0 +1,55 @@
+import { Pattern, Prop, Node, PropertyManager, Static } from '@effijs/props-manager';
+import { Platform } from 'react-native';
+
+export const TextPM = PropertyManager.create('Text').node(
+  Node('container')
+    .extends('Grid')
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Pattern('{n}', ({ theme }) => theme?.typography, { providers: ['theme'] }).key(
+        '{n}',
+        v => v as Record<string, unknown>,
+      ),
+      Prop(
+        ['color', 'theme'],
+        ({ color, theme: themeName }, { theme }) => ({
+          color: theme.get(`color.${color}`, themeName) ?? color,
+        }),
+        { providers: ['theme'] },
+      ),
+      Prop('center', { textAlign: 'center', textAlignVertical: 'center' }),
+      // Prop('flex', { flex: 1 }),
+      Prop('weight', ({ weight }: { weight: number | 'bold' | 'normal' }) => ({
+        fontWeight: weight,
+      })),
+      Prop('fontSize', 'fontSize'),
+      Prop('lineHeight', 'lineHeight'),
+      Prop('underline', {
+        textDecorationLine: 'underline',
+        textDecorationStyle: 'solid',
+      }),
+      Prop(
+        'family',
+        ({ family }) => {
+          const fontFamily =
+            family === 'Athena'
+              ? Platform.OS === 'ios'
+                ? 'Athena'
+                : 'Athena-Light'
+              : Platform.OS === 'ios'
+                ? 'SF Pro Display'
+                : undefined;
+
+          return fontFamily ? { fontFamily } : {};
+        },
+        { nullWhenFirstKeyNull: false },
+      ),
+    )
+    .keys(
+      Static({
+        allowFontScaling: false,
+      }),
+      Prop('onPress', 'onPress'),
+    ),
+);

package/platforms/react-native/generators/init/files/ui/components/Text/text.types.ts

@@ -0,0 +1,27 @@
+type TTextSizes = 's' | 'm' | 'l';
+type TFontWeight = 'bold' | 'normal' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
+type TSpacingProps<Prefix extends string> = {
+  [Size in TTextSizes as `${Prefix}-${Size}`]?: boolean;
+};
+
+type TFontFamily = 'SF Pro Display' | 'Athena';
+
+export interface TTextProps<TThemeColor>
+  extends
+    TSpacingProps<'title'>,
+    TSpacingProps<'label'>,
+    TSpacingProps<'body'>,
+    TSpacingProps<'display'>,
+    TSpacingProps<'headline'> {
+  color?: TThemeColor;
+  weight?: TFontWeight;
+  disabled?: boolean;
+  error?: boolean;
+  center?: boolean;
+  family?: TFontFamily;
+
+  fontSize?: number;
+  lineHeight?: number;
+  underline?: boolean;
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextInput, TextInputProps } from 'react-native';
+
+import { useTheme } from '@theme';
+
+import { TextInputPM } from './textInput.pm';
+import type { TTextProps } from './textInput.types';
+
+export default function TextInputCommon<TThemeColor>({
+  onChangeText,
+  ...textInputProps
+}: TextInputProps & TTextProps<TThemeColor>) {
+  const theme = useTheme();
+  const { container } = TextInputPM.get({ theme, ...textInputProps });
+
+  delete container.style.lineHeight;
+
+  return <TextInput numberOfLines={1} multiline={false} {...container} onChangeText={onChangeText} />;
+}

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

@@ -0,0 +1,15 @@
+import Common from './Common';
+import { TextInputPM } from './textInput.pm';
+// forge:text-input-import
+
+type TCommon = typeof Common;
+
+interface ITextInput extends TCommon {
+  PM: typeof TextInputPM;
+}
+
+const TextInput = Common as ITextInput;
+TextInput.PM = TextInputPM;
+// forge:text-input-slots
+
+export default TextInput;

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

@@ -0,0 +1,65 @@
+import { PropertyManager, Static, Node, Prop } from '@effijs/props-manager';
+
+export const TextInputPM = PropertyManager.create('TextInput').node(
+  Node('container')
+    .extends('Text')
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Static({
+        textDecorationLine: 'none',
+        textAlignVertical: 'center',
+        // lineHeight: 32,
+        color: '#363636',
+        // cursor: 'none',
+      }),
+    )
+    .keys(
+      Static({
+        flex: 1,
+        allowFontScaling: false,
+        placeholderTextColor: '#8A8A8A',
+        family: 'SF Pro Display',
+        underlineColorAndroid: 'transparent',
+      }),
+      Prop(
+        ['placeholderColor', 'theme'],
+        ({ placeholderColor, theme: themeName }, { theme }) => ({
+          placeholderTextColor: theme.get(`color.${placeholderColor || 'onSurfaceVariant'}`, themeName) ?? undefined,
+        }),
+        { nullWhenFirstKeyNull: false, providers: ['theme'] },
+      ),
+      Prop(
+        'theme',
+        ({ theme: themeName }, { theme }) => {
+          const color = theme.get(`color.outline`, themeName) ?? undefined;
+          if (color) {
+            return {
+              cursorColor: color,
+              // selectionColor: `${color}80`,
+              color: 'outline',
+            };
+          }
+          return {
+            color: 'outline',
+          };
+        },
+        { providers: ['theme'], nullWhenFirstKeyNull: false },
+      ),
+    ),
+);
+/*.styles(
+    Provider('theme', theme =>
+      Pattern('{n}', theme.typography).key(
+        '{n}',
+        v => v as Record<string, unknown>,
+      ),
+    ),
+    Provider('theme', theme =>
+      Prop('color', ({ color }: TObject) => ({
+        color: theme.color.hasKey(color) ? theme.color[color] : color,
+      })),
+    ),
+    Prop('center', { textAlign: 'center', textAlignVertical: 'center' }),
+    Prop('flex', { flex: 1 }),
+  )*/