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

package/platforms/react-native/generators/init/files/ui/components/Box/box.pm.ts

@@ -0,0 +1,111 @@
+import { Prop, Node, PropertyManager, Parse, Pattern } from '@effijs/props-manager';
+
+import { TTheme, ThemeScheme, theme } from '@theme';
+
+export const BoxPM = PropertyManager.create('Box').node(
+  Node('container')
+    .extends('Grid')
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Prop(
+        ['color', 'opacity', 'theme'],
+        ({ color, opacity, theme: themeName }, { theme }: { theme: TTheme }) => ({
+          backgroundColor: colorOpacity(
+            theme.get(`color.${color as keyof ThemeScheme['color']}`, themeName) ?? color,
+            opacity,
+          ),
+        }),
+        { nullWhenFirstKeyNull: true, providers: ['theme'] },
+      ),
+      Prop(
+        ['borderColor', 'borderWidth', 'borderBottom', 'theme'],
+        ({ borderColor, borderWidth, borderBottom, theme: themeName }, { theme }) => {
+          const style = {
+            borderColor: theme.get(`color.${borderColor}`, themeName) ?? borderColor,
+          } as { borderColor: string; borderWidth?: number; borderBottomWidth?: number };
+
+          if (borderBottom) {
+            style.borderBottomWidth = borderWidth;
+          } else {
+            style.borderWidth = borderWidth;
+          }
+          return style;
+        },
+        { nullWhenFirstKeyNull: true, providers: ['theme'] },
+      ),
+      /*Provider('theme', theme =>
+        Pattern('{n}', theme.spacing).key('round-{n}', borderRadius => ({
+          borderRadius,
+          // overflow: 'hidden',
+        })),
+      ),*/
+      Prop(
+        'round',
+        ({ round }, { theme }) => ({
+          borderRadius: round === 'full' ? 999 : theme.spacing[round],
+        }),
+        { providers: ['theme'] },
+      ),
+
+      Pattern(
+        '{n}',
+        {
+          s: 2,
+          m: 4,
+          l: 6,
+          xl: 8,
+        },
+        { providers: ['theme'] },
+      ).key('shadow-{n}', size => {
+        const sizeNumber = Number(size);
+
+        return {
+          shadowColor: theme.color.primary,
+          elevation: sizeNumber,
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: sizeNumber * 4,
+          shadowOpacity: 0.3,
+        };
+      }),
+
+      // Prop(
+      //   ['shadow-m', 'theme'],
+      //   ({ theme: themeName }, { theme }) => ({
+      //     shadowColor: theme.get(`color.primary`, themeName),
+      //     elevation: 5,
+      //     shadowOffset: {
+      //       width: 0,
+      //       height: 0,
+      //     },
+      //     shadowRadius: 24,
+      //     shadowOpacity: 0.3,
+      //   }),
+      //   { providers: ['theme'] },
+      // ),
+    )
+    .keys(Prop('disabled')),
+);
+
+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');
+}
+
+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/Box/box.types.ts

@@ -0,0 +1,8 @@
+export interface TBoxProps<TThemeColors, TSpacing> {
+  color?: TThemeColors;
+  borderColor?: TThemeColors;
+  borderWidth?: number;
+  borderBottom?: boolean;
+  opacity?: number;
+  round?: TSpacing;
+}

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

@@ -0,0 +1,13 @@
+import Common from './Common';
+import { BoxPM } from './box.pm';
+
+type TCommon = typeof Common;
+
+interface IBox extends TCommon {
+  PM: typeof BoxPM;
+}
+
+const Box = Common as IBox;
+Box.PM = BoxPM;
+
+export default Box;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ActivityIndicator, TouchableOpacity, TouchableOpacityProps, Text, View } from 'react-native';
+
+import { Icon } from '@components';
+import { useTheme } from '@theme';
+
+import type { TSpacingSizes } from '../Grid/grid.types';
+import { useLoading } from '../utils/useLoading.hook';
+
+import { ButtonPM } from './button.pm';
+import { ICommonButtonProps } from './button.types';
+
+export function WithTouchable<T>(Touchable: any) {
+  return function ButtonCommon({
+    onPress,
+    loading: externalLoading,
+    withoutLoadingIndicator,
+    color = 'primary',
+    ...commonProps
+  }: ICommonButtonProps<TSpacingSizes> & T) {
+    const theme = useTheme();
+    const { loading, handle } = useLoading(onPress, { throttle: 300 });
+
+    const props = ButtonPM.get({
+      theme,
+      size: 48,
+      loading: !withoutLoadingIndicator && (loading || externalLoading),
+      color,
+      ...commonProps,
+    } as Record<string, unknown>);
+
+    return (
+      <Touchable
+        {...props.container}
+        onPress={handle}
+        disabled={props.container.disabled || loading || externalLoading}>
+        {props.leadingIcon.icon ? <Icon {...props.leadingIcon} /> : null}
+        {props.text.children ? <Text {...props.text} /> : null}
+        {props.trailingIcon.icon ? <Icon {...props.trailingIcon} /> : null}
+        {!withoutLoadingIndicator && (loading || externalLoading) ? (
+          <View {...props.loaderContainer}>
+            <ActivityIndicator color={theme.color.primary} />
+          </View>
+        ) : null}
+      </Touchable>
+    );
+  };
+}
+
+export default WithTouchable<TouchableOpacityProps>(TouchableOpacity);

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

@@ -0,0 +1,19 @@
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+import { BoxPM } from '@components/Box/box.pm';
+import type { TBoxProps } from '@components/Box/box.types';
+import { debounce } from '@components/Button/button.utils.ts';
+import type { TGridProps } from '@components/Grid/grid.types';
+import type { TThemeColor } from '@theme';
+
+export default function Touchable({
+  onPress,
+  activeOpacity = 0.98,
+  ...boxProps
+}: TBoxProps<TThemeColor, any> & TGridProps & TouchableOpacityProps) {
+  const { container } = BoxPM.get(boxProps);
+
+  const onPressWrapper = debounce(() => onPress?.(), 300);
+
+  return <TouchableOpacity activeOpacity={activeOpacity} onPress={onPressWrapper} {...container} />;
+}

package/platforms/react-native/generators/init/files/ui/components/Button/button.pm.ts

@@ -0,0 +1,197 @@
+import { Node, Prop, PropertyManager, Static } from '@effijs/props-manager';
+
+import { TButtonType } from './button.types';
+
+export const ButtonPM = PropertyManager.create('Button').node(
+  Node('container')
+    .unusedPropsPassHere()
+    .extends('Box')
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Prop('size', ({ size }) => ({
+        minHeight: size,
+        minWidth: size,
+      })),
+      Prop('opacity'),
+      // Prop('style', ({ style }: { style: Record<string, unknown> }) => style)
+      Prop('type', ({ type }: { type: TButtonType }) =>
+        type === 'text'
+          ? {
+              minHeight: 32,
+              paddingHorizontal: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+            }
+          : null,
+      ),
+    )
+    .keys(
+      Static({
+        row: true,
+        'gap-xs': true,
+        'justify-center': true,
+        'align-center': true,
+        round: 'xxs',
+      }),
+      Prop('onPress'),
+      Prop('round'),
+      Prop(
+        ['children', 'leadingIcon'],
+        ({ children: text, leadingIcon }) => ({
+          // 'ph-m': text && icon && true,
+          // 'ph-s': Icon && !text && true,
+
+          'pl-s': leadingIcon && true,
+          'pr-s': leadingIcon && !text && true,
+          'pl-m': !leadingIcon && text && true,
+          'pr-m': text && true,
+        }),
+        { nullWhenFirstKeyNull: true },
+      ),
+      Prop(
+        ['trailingIcon', 'children'],
+        ({ children: text, trailingIcon }) => ({
+          'pr-s': trailingIcon && true,
+          'pl-s': trailingIcon && !text && true,
+        }),
+        { nullWhenFirstKeyNull: true },
+      ),
+      Prop(['type', 'color'], ({ type, color }) => containerByType(type, color)),
+      Prop('error', {
+        color: 'error',
+      }),
+      Prop(['disabled', 'type', 'color'], ({ color, type }) => disabledContainerByType(type, color), {
+        nullWhenFirstKeyNull: true,
+      }),
+    ),
+  Node('leadingIcon')
+    .keys('style', Prop('loading', { opacity: 0 }))
+    .keys(
+      Static({
+        size: 24,
+      }),
+      Prop(
+        'size',
+        ({ size }: { size: number }) => ({
+          size: size < 40 ? 20 : 24,
+        }),
+        { nullWhenFirstKeyNull: true },
+      ),
+      Prop('leadingIcon', 'icon'),
+      Prop(['type', 'color'], ({ type, color }) => contentByType(type, color)),
+      Prop('error', {
+        color: 'error',
+      }),
+      Prop('disabled', { color: 'onSurface', opacity: 0.38 }),
+    ),
+  Node('trailingIcon')
+    .keys('style', Prop('loading', { opacity: 0 }))
+    .keys(
+      Static({
+        size: 24,
+      }),
+      Prop(
+        'size',
+        ({ size }: { size: number }) => ({
+          size: size < 40 ? 20 : 24,
+        }),
+        { nullWhenFirstKeyNull: true },
+      ),
+      Prop('trailingIcon', 'icon'),
+      Prop(['type', 'color'], ({ type, color }) => contentByType(type, color)),
+      Prop('error', {
+        color: 'error',
+      }),
+      Prop('disabled', { color: 'onSurface', opacity: 0.38 }),
+    ),
+  Node('text')
+    .extends('Text')
+    .pickKeys('loading', 'children', 'type', 'color', 'theme', 'error', 'disabled')
+    .keys('style', Prop('loading', { opacity: 0 }))
+    .keys(
+      Static({
+        'title-m': true,
+      }),
+      Prop('children'),
+      Prop(['type', 'color'], ({ type, color }) => contentByType(type, color)),
+      Prop('error', {
+        color: 'error',
+      }),
+      Prop('disabled', { color: 'onSurface', opacity: 1 }),
+    ),
+  Node('loaderContainer').keys(
+    'style',
+    Static({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+    }),
+  ),
+  Node('loader')
+    .extends('CircularIndicator')
+    .keys(
+      Static({
+        size: 24,
+      }),
+      Prop(['type', 'color'], ({ type, color }) => contentByType(type, color)),
+      /*Prop(
+        ['type', 'color'],
+        ({ type, color: _c }, { theme }) => {
+          const color = _c ?? 'primary';
+          const variants = {
+            filled: {
+              color: theme.color.outline,
+              backgroundColor: theme.color[color.replace(/^\w/, c => `on${c.toUpperCase()}`)],
+            },
+            text: {
+              color: theme.color.outline,
+              backgroundColor: theme.color.primary,
+            },
+            outlined: {
+              color: theme.color.outline,
+              backgroundColor: theme.color.primary,
+            },
+          };
+          return variants[type ?? 'filled'] ?? { color: theme.color.outline, backgroundColor: theme.color.primary };
+        },
+        { nullWhenFirstKeyNull: false, providers: ['theme'] },
+      ),*/
+    ),
+);
+
+function containerByType(type: TButtonType, color: string) {
+  return {
+    elevated: { color: 'surfaceContainerLow', 'elevation-1': true },
+    filled: { color },
+    tonal: { color: `${color}Container` },
+    outlined: { color: 'transparent', borderColor: color, borderWidth: 1 },
+    text: { color: 'transparent' },
+  }[type];
+}
+
+function disabledContainerByType(type: TButtonType, color: string) {
+  return {
+    elevated: { color, opacity: 0.12 },
+    filled: { color: 'onSurface', opacity: 0.2 },
+    tonal: { color: 'onSurface', opacity: 0.12 },
+    outlined: { color: 'onSurface', borderColor: 'onSurface', opacity: 0.12 },
+    text: { color: 'transparent' },
+  }[type];
+}
+
+function contentByType(type: TButtonType, color: string) {
+  return {
+    elevated: { color },
+    filled: { color: color.replace(/^\w/, c => `on${c.toUpperCase()}`) },
+    tonal: {
+      color: `on${color.charAt(0).toUpperCase()}${color.slice(1)}Container`,
+    },
+    outlined: { color },
+    text: { color },
+  }[type];
+}

package/platforms/react-native/generators/init/files/ui/components/Button/button.types.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { TGridProps } from '../Grid/grid.types';
+import type { TIconNames } from '../Icon/icons.types';
+
+export type TButtonType = 'filled' | 'text' | 'outlined';
+
+type TButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | string;
+
+export interface ICommonButtonProps<TRound> extends TGridProps {
+  type: TButtonType;
+  color?: TButtonColor;
+  size?: number;
+  disabled?: boolean;
+  loading?: boolean;
+  withoutLoadingIndicator?: boolean;
+  children?: React.ReactNode;
+  round?: TRound;
+  leadingIcon?: TIconNames;
+  trailingIcon?: TIconNames;
+  onPress?: (...args: any[]) => any | Promise<any>;
+}

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

@@ -0,0 +1,16 @@
+export function debounce(handler: (...args: any[]) => any | Promise<any>, delay: number) {
+  let wait = false;
+  return async (...args: any[]) => {
+    if (wait) {
+      return;
+    }
+    wait = true;
+    setTimeout(() => {
+      wait = false;
+    }, delay);
+    const res = handler?.(...args);
+    if (res instanceof Promise) {
+      await res;
+    }
+  };
+}

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

@@ -0,0 +1,19 @@
+import { ButtonPM as PM } from './button.pm';
+import Common, { WithTouchable } from './Common';
+import Touchable from './Touchable';
+
+type TCommon = typeof Common;
+
+interface IButton extends TCommon {
+  PM: typeof PM;
+  WithTouchable: typeof WithTouchable;
+  Touchable: typeof Touchable;
+}
+
+const Button = Common as IButton;
+Button.PM = PM;
+// Button.Type = Type;
+Button.WithTouchable = WithTouchable;
+Button.Touchable = Touchable;
+
+export default Button;

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

@@ -0,0 +1,50 @@
+import { FlatList, View } from 'react-native';
+
+import { Button } from '@components';
+
+export default function Colours({
+  data,
+  value,
+  onChange,
+}: {
+  data: { id: string; value: string }[];
+  value?: string;
+  onChange?: (value: string) => void;
+}) {
+  return (
+    <View>
+      <FlatList
+        data={data}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item }) => (
+          <ColourSwatch
+            key={item.id}
+            colour={item.value}
+            selected={value === item.id}
+            onSelect={() => onChange?.(item.id)}
+          />
+        )}
+      />
+    </View>
+  );
+}
+
+function ColourSwatch({ colour, selected, onSelect }: { colour: string; selected: boolean; onSelect: () => void }) {
+  return (
+    <Button.Touchable
+      mr-xs
+      width={36}
+      height={36}
+      round="full"
+      color={colour}
+      // borderColor="secondary"
+      // borderWidth={selected ? 2 : 0}
+      style={{
+        transform: [{ scale: selected ? 1 : 0.6 }],
+      }}
+      onPress={onSelect}
+      activeOpacity={0.9}
+    />
+  );
+}

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

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { Text, View, type LayoutChangeEvent } from 'react-native';
+
+import { Icon } from '@components';
+
+import { FormPM } from './form.pm';
+import type { TFormCommonProps } from './form.types';
+
+export default function FormElement({
+  Component = View,
+  children,
+  actions,
+  ...formProps
+}: TFormCommonProps & { Component?: any }) {
+  const props = FormPM.get(formProps);
+  const [actionsWidth, setActionsWidth] = React.useState(0);
+  const onActionLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      setActionsWidth(layout.width > 16 ? layout.width - 16 : 0);
+    },
+    [setActionsWidth],
+  );
+
+  return (
+    <View {...props.wrapper}>
+      {formProps.label ? <Text {...props.label} /> : null}
+      <Component {...props.container}>
+        <Icon {...props.icon} />
+        {children}
+        <View style={{ width: actionsWidth }} />
+        <View {...props.actions} onLayout={onActionLayout}>
+          {actions}
+        </View>
+      </Component>
+      <Text {...props.error} />
+    </View>
+  );
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Text } from '@components';
+
+import { FormPM } from './form.pm';
+
+export default function ErrorText({ error }: { error?: any }) {
+  const props = FormPM.get({ error });
+
+  return <Text {...props.error} accessible={Boolean(error)} />;
+}

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { ActivityIndicator } from 'react-native';
+
+import { Button } from '@components';
+import utils from '@utils';
+
+import TextInput from '../TextInput';
+import { useLoading } from '../utils/useLoading.hook';
+
+import Common from './Common';
+import SecureTextEntry from './components/SecureTextEntry';
+import type { TFormInputProps } from './form.types';
+
+interface TSecureFormInputProps extends TFormInputProps {
+  textSkipInjectionValidation?: boolean;
+  textRemoveCyrillic?: boolean;
+  textSanitize?: boolean;
+  textDeduplicate?: boolean;
+  textTrim?: boolean;
+  textNoSpaces?: boolean;
+  textUpperCase?: boolean;
+  textCompanyName?: boolean;
+}
+export default function FormInput({
+  secure,
+  value,
+  onChange,
+  loading: isLoading,
+  placeholder,
+  keyboardType,
+  maxLength,
+  disabled,
+  clearable = false,
+  type,
+  textSkipInjectionValidation = false,
+  textRemoveCyrillic = false,
+  textSanitize = false,
+  textDeduplicate = false,
+  textTrim = false,
+  textNoSpaces = false,
+  textCompanyName = false,
+  textContentType,
+  textUpperCase,
+  autoCapitalize,
+  autoComplete,
+  ...rest
+}: TSecureFormInputProps) {
+  const { loading, handle } = useLoading(text => {
+    const transformed = utils.string.transform(text, {
+      prevValue: value,
+      textSkipInjectionValidation,
+      textRemoveCyrillic,
+      textSanitize,
+      textDeduplicate,
+      textTrim,
+      textNoSpaces,
+      textUpperCase,
+      textCompanyName,
+    });
+    return onChange?.(transformed);
+  });
+  const [active, setActive] = React.useState(false);
+  const [secureTextEntry, setSecureTextEntry] = React.useState(secure || false);
+
+  const onFocus = React.useCallback(() => setActive(true), []);
+  const onBlur = React.useCallback(() => setActive(false), []);
+  const onSecure = React.useCallback(() => setSecureTextEntry(prev => !prev), []);
+
+  const hasValue = value != null && String(value).length > 0;
+  const isClearable = clearable || (rest as any).clearable === true;
+  const showClear = isClearable && !disabled && !secure && hasValue;
+
+  const externalActions = rest.actions;
+  const internalActions = secure ? (
+    <SecureTextEntry active={active} error={rest.error} value={secureTextEntry} onChange={onSecure} />
+  ) : showClear ? (
+    <Button type="text" leadingIcon="close" onPress={() => handle('')} />
+  ) : null;
+
+  return (
+    <Common
+      active={active}
+      disabled={disabled}
+      type={type}
+      hasValue={hasValue}
+      {...rest}
+      actions={
+        <>
+          {(isLoading === undefined && loading) || (isLoading && loading) ? (
+            <ActivityIndicator size="small" />
+          ) : null}
+          {internalActions}
+          {externalActions}
+        </>
+      }>
+      <TextInput
+        maxLength={maxLength}
+        editable={!disabled}
+        focusable={!disabled}
+        keyboardType={keyboardType}
+        flex={1}
+        body-l
+        value={value}
+        onChangeText={handle}
+        placeholder={placeholder}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        secureTextEntry={Boolean(secure && secureTextEntry)}
+        textContentType={secure ? 'none' : textContentType}
+        autoCapitalize={autoCapitalize}
+        autoComplete={autoComplete}
+      />
+    </Common>
+  );
+}