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

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { ActivityIndicator } from 'react-native';
+
+import TextInput from '../TextInput';
+import { useLoading } from '../utils/useLoading.hook';
+
+import Common from './Common';
+import type { TFormInputProps } from './form.types';
+
+type TFormInputAreaProps = Exclude<TFormInputProps, 'secure' | 'actions'>;
+
+export default function FormInputArea({
+  value,
+  onChange,
+  loading: isLoading,
+  placeholder,
+  keyboardType,
+  maxLength,
+  disabled,
+  type,
+  textContentType,
+  autoCapitalize,
+  ...rest
+}: TFormInputAreaProps) {
+  const { loading, handle } = useLoading(text => onChange?.(text));
+  const [active, setActive] = React.useState(false);
+
+  const onFocus = React.useCallback(() => setActive(true), []);
+  const onBlur = React.useCallback(() => setActive(false), []);
+
+  const hasValue = value != null && String(value).length > 0;
+
+  const externalActions = rest.actions;
+
+  return (
+    <Common
+      active={active}
+      disabled={disabled}
+      type={type}
+      hasValue={hasValue}
+      stretch
+      {...rest}
+      actions={
+        <>
+          {(isLoading === undefined && loading) || (isLoading && loading) ? (
+            <ActivityIndicator size="small" />
+          ) : null}
+          {externalActions}
+        </>
+      }>
+      <TextInput
+        multiline={true}
+        numberOfLines={6}
+        maxLength={maxLength}
+        editable={!disabled}
+        focusable={!disabled}
+        keyboardType={keyboardType}
+        body-l
+        value={value}
+        onChangeText={handle}
+        placeholder={placeholder}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        textContentType={textContentType}
+        autoCapitalize={autoCapitalize}
+        textAlignVertical="top"
+      />
+    </Common>
+  );
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+
+import { Text } from '@components';
+
+export interface ILabelProps extends ViewProps {
+  children: string;
+}
+
+const Label = ({ children }: ILabelProps) => {
+  return (
+    <Text title-l color="outline" center mb-m>
+      {children}
+    </Text>
+  );
+};
+
+export default Label;

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

@@ -0,0 +1,86 @@
+import React, { useCallback, useEffect } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Button, Icon, Box, Text, Grid } from '@components';
+
+import Common from './Common';
+import type { TFormSelectProps, TTitle } from './form.types';
+
+export default function FormSelect<T>({
+  initialTitle,
+  value,
+  onChange,
+  onSelect,
+  placeholder,
+  disabled,
+  trailingIcon,
+  getTitleForValue,
+  onClear,
+  iconColor,
+  type,
+  hideClearButton,
+  ...rest
+}: TFormSelectProps<T>) {
+  const [title, setTitle] = React.useState<TTitle>(getTitleForValue?.(value) || value || initialTitle || '');
+
+  useEffect(() => {
+    if (!value && !initialTitle) {
+      setTitle('');
+    }
+  }, [value, initialTitle]);
+
+  useEffect(() => {
+    if (typeof getTitleForValue === 'function') {
+      setTitle(getTitleForValue(value));
+    }
+  }, [getTitleForValue, value]);
+
+  const onChangeValue = useCallback(
+    (newValue: T | undefined, newTitle: TTitle) => {
+      onChange?.(newValue);
+      setTitle(newTitle);
+    },
+    [onChange, setTitle],
+  );
+
+  const onClearValue = useCallback(() => {
+    onChange?.();
+    setTitle('');
+    onClear?.();
+  }, [onChange, onClear]);
+
+  const onSelectValue = useCallback(() => {
+    if (!disabled) onSelect?.(value, onChangeValue);
+  }, [onSelect, value, onChangeValue, disabled]);
+
+  return (
+    <Common
+      Component={TouchableOpacity}
+      activeOpacity={0.9}
+      onPress={onSelectValue}
+      disabled={disabled}
+      focusable={!disabled}
+      type={type}
+      {...rest}
+      actions={
+        disabled ? null : (
+          <Box row align-center gap-xs mr-xs={type !== 'text'} accessible={false}>
+            {/*{!hideClearButton && (value || title) && (
+              <Button type="text" activeOpacity={0.9} onPress={onClearValue}>
+                <Box color="outlineVariant" round="m" p-xxs>
+                  <Icon icon="close" color="onBackground" size={12} />
+                </Box>
+              </Button>
+            )}*/}
+            <Icon icon="arrow-down" color="primary" />
+          </Box>
+        )
+      }>
+      <Grid justify-center>
+        <Text body-m numberOfLines={1} color={title ? 'outline' : 'onSurfaceVariant'}>
+          {title || placeholder || ''}
+        </Text>
+      </Grid>
+    </Common>
+  );
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Button } from '@components';
+
+interface ISecureTextEntryProps {
+  active?: boolean;
+  error?: any;
+  value: boolean;
+  onChange: () => void;
+  accessibilityLabel?: string;
+}
+
+export default function SecureTextEntry({ value, onChange }: ISecureTextEntryProps) {
+  return (
+    <Button type="text" activeOpacity={0.96} onPress={onChange} min-height={40} center>
+      {value ? 'SHOW' : 'HIDE'}
+    </Button>
+  );
+}

package/platforms/react-native/generators/init/files/ui/components/Form/form.error.ts

@@ -0,0 +1,18 @@
+import { AppError } from '@app/app.error';
+
+export class FormError extends AppError {
+  public readonly data?: Record<string, string[]>;
+
+  constructor(message: string, data?: Record<string, { message: string; property: string }[]>) {
+    super(message);
+
+    if (!Object.keys(data || {}).length) return;
+
+    this.data = Object.entries(data || {}).reduce(
+      (res, [key, errors]) => {
+        return { ...res, [key]: errors.map(({ message, ...e }) => message?.format(e)) };
+      },
+      {} as Record<string, string[]>,
+    );
+  }
+}

package/platforms/react-native/generators/init/files/ui/components/Form/form.pm.ts

@@ -0,0 +1,134 @@
+import { PropertyManager, Static, Prop, Node } from '@effijs/props-manager';
+import { Platform } from 'react-native';
+
+export const FormPM = PropertyManager.create('Form').node(
+  Node('wrapper')
+    .extends('Grid')
+    .keys(
+      Prop('stretch', () => ({
+        flex: 1,
+      })),
+    ),
+  Node('icon')
+    .extends('Icon')
+    .keys(
+      Static({
+        color: 'outlineStrong',
+      }),
+      Prop('icon'),
+      Prop('iconColor', ({ iconColor }: { iconColor?: string }) => ({
+        color: iconColor,
+      })),
+      Prop('iconSize', ({ iconSize }: { iconSize?: number }) => ({
+        size: iconSize,
+      })),
+      Prop('active', { color: 'outline' }),
+      Prop('error', { color: 'error' }),
+    ),
+  Node('label')
+    .extends('Text')
+    .omitKeys('onPress')
+    .keys(
+      Static({
+        'label-m': true,
+        color: 'secondary',
+      }),
+      Prop('error', { color: 'error' }),
+      Prop(['label', 'isRequired'], ({ label, isRequired }: { label: string; isRequired: boolean }) => ({
+        children: `${label}${isRequired ? ' *' : ''}`,
+      })),
+    ),
+  Node('container')
+    .extends('Box')
+    .keys(
+      Static({
+        'min-height': 48,
+        borderColor: 'primary',
+        borderWidth: 1.5,
+        round: 'xxs',
+        row: true,
+        'gap-xs': true,
+        'ph-s': true,
+      }),
+      Prop('stretch', () => ({ flex: 1 })),
+      Prop('onPress'),
+      Prop(['label', 'type'], ({ type }) => ({ 'mt-xs': type !== 'text' })),
+      Prop('active', () => ({
+        borderColor: 'outline',
+      })),
+      Prop(
+        ['type', 'error'],
+        ({ type, error }: { type?: 'filled' | 'outlined' | 'text'; error?: any }) => {
+          if (type === 'outlined') {
+            return {
+              borderColor: error ? 'error' : 'primary',
+              borderWidth: 1,
+              color: 'white',
+            };
+          }
+          if (type === 'filled') {
+            return {
+              'pv-s': Platform.OS === 'ios',
+              borderWidth: 0,
+              color: 'tertiary',
+            };
+          }
+          if (type === 'text') {
+            return {
+              borderColor: 'transparent',
+              borderWidth: 0,
+              // round: undefined,
+              'ph-s': false,
+              'min-height': 40,
+            };
+          }
+          return null;
+        },
+        { nullWhenFirstKeyNull: false },
+      ),
+    ),
+  Node('actions')
+    .extends('Grid')
+    .keys(
+      Static({
+        row: true,
+        justifyContent: 'center',
+        center: true,
+        'ph-xs': true,
+      }),
+      Prop('type', ({ type }: { type?: 'filled' | 'outlined' | 'text' }) => ({
+        'ph-xs': false,
+        'pl-xs': type === 'text',
+      })),
+    )
+    .keys(
+      'style',
+      Static({
+        position: 'absolute',
+        justifyContent: 'center',
+        top: 0,
+        right: 0,
+        bottom: 0,
+      }),
+    ),
+  Node('error')
+    .extends('Text')
+    .keys(
+      Static({
+        alignSelf: 'flex-end',
+        'label-s': true,
+        color: 'error',
+      }),
+      Prop('error', ({ error }: { error: string | { message: string }[] }) => {
+        let children;
+        if (typeof error === 'string') {
+          children = error;
+        }
+        if (Array.isArray(error)) {
+          children = error.join(',');
+        }
+
+        return { children };
+      }),
+    ),
+);

package/platforms/react-native/generators/init/files/ui/components/Form/form.types.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { KeyboardTypeOptions, TextInputProps } from 'react-native';
+
+import { TIconNames } from '@components/Icon/icons.types';
+
+export interface TFormCommonProps extends Record<string, unknown> {
+  label?: string | React.ReactNode;
+  isRequired?: boolean;
+  children?: React.ReactNode;
+  placeholder?: string;
+  active?: boolean;
+  error?: string | { message?: string };
+  actions?: React.ReactNode;
+  disabled?: boolean;
+  static?: boolean;
+  icon?: TIconNames;
+  type?: 'filled' | 'outlined' | 'text';
+  floatingLabel?: boolean;
+}
+
+type RNTextInputProps = Pick<
+  TextInputProps,
+  'keyboardType' | 'textContentType' | 'autoComplete' | 'importantForAutofill' | 'maxLength' | 'autoCapitalize'
+>;
+
+export interface TFormInputProps extends TFormCommonProps, RNTextInputProps {
+  secure?: boolean;
+  value?: string;
+  onChange?: (value: string) => Promise<void> | void;
+  loading?: boolean;
+  clearable?: boolean;
+  keyboardType?: KeyboardTypeOptions;
+  error?: string | { message?: string };
+  maxLength?: number;
+}
+
+export type TTitle = string | React.ReactNode;
+
+export type TOnSelect<V> = (value: V | undefined, onChange: (value: V | undefined, title: TTitle) => void) => void;
+
+export interface TFormSelectProps<T> extends TFormCommonProps {
+  initialTitle?: TTitle;
+  value?: T;
+  onChange?: (value?: T) => void;
+  onClear?: () => void;
+  onSelect: TOnSelect<T>;
+  error?: string | { message?: string };
+  trailingIcon?: TIconNames;
+  getTitleForValue?: (value?: T) => TTitle;
+  hideClearButton?: boolean;
+}
+
+export interface TFormCheckboxProps<T> extends TFormCommonProps {
+  label?: string | React.ReactNode;
+  value?: T;
+  onChange?: (value?: T) => void | Promise<void>;
+  error?: string | { message?: string };
+  stretched?: boolean;
+}

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

@@ -0,0 +1,67 @@
+import { FormStore, EffiJS } from '@effijs/common';
+import EffiForm from '@effijs/form-react/Service';
+import { useEffect, useMemo } from 'react';
+
+import FormInputArea from './InputArea';
+import Colours from './Colours';
+import ErrorText from './ErrorText';
+import FormInput from './Input';
+import Label from './Label';
+import FormSelect from './Select';
+// forge:form-imports
+
+type TForm = typeof EffiForm;
+type TFormInput = typeof FormInput;
+type TFormInputArea = typeof FormInputArea;
+type TFormSelect = typeof FormSelect;
+type TFormLabel = typeof Label;
+type TErrorText = typeof ErrorText;
+type TColoursPicker = typeof Colours;
+
+interface IForm extends TForm {
+  Element: {
+    Input: TFormInput;
+    InputArea: TFormInputArea;
+    Select: TFormSelect;
+    Label: TFormLabel;
+    ErrorText: TErrorText;
+    ColoursPicker: TColoursPicker;
+    // forge:form-types
+  };
+  useFormService: typeof useFormService;
+}
+
+const Form = EffiForm as IForm;
+
+Form.useFormService = useFormService;
+Form.Element = {
+  Input: FormInput,
+  InputArea: FormInputArea,
+  Select: FormSelect,
+  Label,
+  ErrorText,
+  ColoursPicker: Colours,
+  // forge:form-elements
+};
+
+export function useFormService<S extends FormStore.FormStoreService<any>>(
+  FormService: new (...args: any[]) => S,
+  initial?: Partial<FormStore.SchemaOfService<S>> | (() => any),
+): S {
+  const { form, destroy } = useMemo(
+    () => {
+      let data;
+      if (initial instanceof Function) {
+        data = initial();
+      } else {
+        data = initial;
+      }
+      return EffiJS.resolveForm(FormService, data);
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  useEffect(() => () => destroy(), []); // eslint-disable-line react-hooks/exhaustive-deps
+  return form;
+}
+
+export default Form;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+import { GridPM } from './grid.pm';
+import { TGridProps } from './grid.types';
+
+export default function GridCommon({ children, ...commonProps }: TGridProps & ViewProps) {
+  const { container } = GridPM.get(commonProps as Record<string, unknown>);
+
+  return <View {...container} children={children} />;
+}

package/platforms/react-native/generators/init/files/ui/components/Grid/grid.pm.ts

@@ -0,0 +1,93 @@
+import { Pattern, Prop, Node, PropertyManager } from '@effijs/props-manager';
+
+type TAbsoluteStyle = {
+  absolute?: string;
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+
+export const GridPM = PropertyManager.create('Grid').node(
+  Node('container').keys(
+    'style',
+    Prop('style', ({ style }) => style),
+    Pattern('{n}', ({ theme }) => theme.spacing, { providers: ['theme'] })
+      .key('m-{n}', 'margin')
+      .key('ml-{n}', 'marginLeft')
+      .key('mt-{n}', 'marginTop')
+      .key('mr-{n}', 'marginRight')
+      .key('mb-{n}', 'marginBottom')
+      .key('mh-{n}', 'marginHorizontal')
+      .key('mv-{n}', 'marginVertical')
+      .key('p-{n}', 'padding')
+      .key('pl-{n}', 'paddingLeft')
+      .key('pt-{n}', 'paddingTop')
+      .key('pr-{n}', 'paddingRight')
+      .key('pb-{n}', 'paddingBottom')
+      .key('ph-{n}', 'paddingHorizontal')
+      .key('pv-{n}', 'paddingVertical')
+      .key('gap-{n}', 'gap'),
+    Prop('mt', ({ mt }: { mt?: number }) => ({
+      marginTop: mt,
+    })),
+    Prop('pt', ({ pt }: { pt?: number }) => ({
+      paddingTop: pt,
+    })),
+    Prop('pb', ({ pb }: { pb?: number }) => ({
+      paddingBottom: pb,
+    })),
+    Pattern('{n}', {
+      center: 'center',
+      start: 'flex-start',
+      end: 'flex-end',
+    })
+      .key('align-{n}', 'alignItems')
+      .key('justify-{n}', 'justifyContent')
+      .key('align-self-{n}', 'alignSelf'),
+    Pattern('{n}', {
+      between: 'space-between',
+      around: 'space-around',
+    }).key('space-{n}', 'justifyContent'),
+    Prop('center', { alignItems: 'center', justifyContent: 'center' }),
+    Prop('col', { flexDirection: 'column' }),
+    Prop('row', { flexDirection: 'row' }),
+    Prop(
+      ['reverse', 'row'],
+      ({ row }) => ({
+        flexDirection: row ? 'row-reverse' : 'column-reverse',
+      }),
+      { nullWhenFirstKeyNull: true },
+    ),
+    Prop('flex', 'flex'),
+    Prop('flexGrow', 'flexGrow'),
+    Prop('height', 'height'),
+    Prop('width', 'width'),
+    Prop('gap', 'gap'),
+    Prop('ratio', 'aspectRatio'),
+    Prop('min-height', 'minHeight'),
+    Prop('min-width', 'minWidth'),
+    Prop('max-height', 'maxHeight'),
+    Prop('max-width', 'maxWidth'),
+    Prop('overflow-hidden', { overflow: 'hidden' }),
+    Prop(
+      ['absolute', 'top', 'left', 'bottom'],
+      ({ absolute, top, left, bottom }) => {
+        if (!absolute) {
+          return {};
+        }
+        const res = { position: 'absolute', left: left ?? 0, right: 0 } as TAbsoluteStyle;
+        if (top) {
+          res.top = top;
+        } else if (bottom) {
+          res.bottom = 0;
+        } else {
+          res.top = 0;
+          res.bottom = 0;
+        }
+        return res;
+      },
+      { nullWhenFirstKeyNull: true },
+    ),
+  ),
+);

package/platforms/react-native/generators/init/files/ui/components/Grid/grid.types.ts

@@ -0,0 +1,79 @@
+export type TSpacingSizes = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+
+type TSpacingProps<Prefix extends string> = {
+  [Size in TSpacingSizes as `${Prefix}-${Size}`]?: boolean;
+};
+
+interface IAbsoluteProps {
+  absolute?: boolean;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: boolean;
+}
+
+interface IMarginProps
+  extends
+    TSpacingProps<'m'>,
+    TSpacingProps<'mt'>,
+    TSpacingProps<'mr'>,
+    TSpacingProps<'mb'>,
+    TSpacingProps<'ml'>,
+    TSpacingProps<'mv'>,
+    TSpacingProps<'mh'> {}
+
+interface IPaddingProps
+  extends
+    TSpacingProps<'p'>,
+    TSpacingProps<'pt'>,
+    TSpacingProps<'pr'>,
+    TSpacingProps<'pb'>,
+    TSpacingProps<'pl'>,
+    TSpacingProps<'pv'>,
+    TSpacingProps<'ph'> {}
+
+interface IGapProps extends TSpacingProps<'gap'> {}
+
+interface IAlignProps {
+  'align-center'?: boolean;
+  'align-start'?: boolean;
+  'align-end'?: boolean;
+  'align-self-center'?: boolean;
+  'align-self-start'?: boolean;
+  'align-self-end'?: boolean;
+}
+
+interface IJustifyProps {
+  'justify-center'?: boolean;
+  'justify-start'?: boolean;
+  'justify-end'?: boolean;
+  'space-between'?: boolean;
+  'space-around'?: boolean;
+}
+
+interface IFlexProps {
+  flex?: number;
+  flexGrow?: number;
+  // 'flex-1'?: boolean;
+  // 'flex-2'?: boolean;
+}
+
+export interface TGridProps
+  extends IAbsoluteProps, IGapProps, IFlexProps, IAlignProps, IJustifyProps, IMarginProps, IPaddingProps {
+  center?: boolean;
+  col?: boolean;
+  row?: boolean;
+  ratio?: number;
+  reverse?: boolean;
+  height?: number | string | undefined;
+  width?: number | string | undefined;
+  gap?: number;
+  'min-height'?: number | string | undefined;
+  'min-width'?: number | string | undefined;
+  'max-height'?: number | string | undefined;
+  'max-width'?: number | string | undefined;
+  'overflow-hidden'?: boolean;
+  mt?: number | undefined;
+  pt?: number | undefined;
+  pb?: number | undefined;
+}

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

@@ -0,0 +1,13 @@
+import Common from './Common';
+import { GridPM } from './grid.pm';
+
+type TCommon = typeof Common;
+
+interface IGrid extends TCommon {
+  PM: typeof GridPM;
+}
+
+const Grid = Common as IGrid;
+Grid.PM = GridPM;
+
+export default Grid;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { useTheme } from '@theme';
+
+import { IconsPM } from './icons.pm';
+import { IIconProps } from './icons.types';
+
+export default function Common(props: IIconProps) {
+  const theme = useTheme();
+  const {
+    container: { type, ...container },
+  } = IconsPM.get({ theme, ...props });
+
+  if (type === 'font') {
+    return <Text {...container} />;
+  }
+  return null;
+}