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

package/platforms/react-native/solutions/components/Image/files/image.pm.ts

@@ -0,0 +1,25 @@
+import { Prop, Node, PropertyManager } from '@effijs/props-manager';
+
+export const ImagePM = PropertyManager.create('Image').node(
+  Node('container')
+    .extends('Grid')
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Prop('width'),
+      Prop('height'),
+    ),
+
+  Node('svg').keys(
+    Prop(
+      ['color', 'theme'],
+      ({ color, theme: themeName }, { theme }) => ({
+        color: color ? (theme.get(`color.${color}`, themeName) ?? color) : undefined,
+      }),
+      { providers: ['theme'] },
+    ),
+    Prop('width'),
+    Prop('height'),
+    // Prop('image'),
+  ),
+);

package/platforms/react-native/solutions/components/Image/files/image.utils.ts

@@ -0,0 +1,35 @@
+import { launchImageLibrary, launchCamera, ImageLibraryOptions, ImagePickerResponse } from 'react-native-image-picker';
+
+export async function getImageFromLibrary(props: Pick<ImageLibraryOptions, 'selectionLimit'>) {
+  const response = await launchImageLibrary({
+    maxWidth: 600,
+    maxHeight: 600,
+    mediaType: 'photo',
+    selectionLimit: props?.selectionLimit ?? 1,
+    presentationStyle: 'formSheet',
+  });
+
+  return parseResponse(response);
+}
+
+export async function getImageFromCamera() {
+  const response = await launchCamera({
+    maxWidth: 600,
+    maxHeight: 600,
+    mediaType: 'photo',
+  });
+
+  return parseResponse(response);
+}
+
+function parseResponse(response: ImagePickerResponse) {
+  if (response.didCancel) {
+    console.log('User cancelled photo picker');
+    return null;
+  } else if (response.errorCode) {
+    console.log('ImagePicker Error: ', response.errorCode, response.errorMessage);
+    throw new Error(response.errorMessage);
+  } else {
+    return response.assets;
+  }
+}

package/platforms/react-native/solutions/components/Image/files/index.ts

@@ -0,0 +1,5 @@
+import { Image as Native } from 'react-native';
+
+import SVG from './SVG';
+
+export default { SVG, Native };

package/platforms/react-native/solutions/components/Image/solution.js

@@ -0,0 +1,40 @@
+export default {
+  "id": "component:Image",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "Image",
+  "description": "Native and SVG image with theme sizing. SVG rendering uses Skia.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "media"
+  ],
+  "requires": [],
+  "dependencies": [
+    "skia"
+  ],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/Image"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import Image from './Image';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  Image,\n"
+    }
+  ],
+  "manual": [],
+  "api": "Image.Native and Image.SVG.",
+  "example": "<Image.Native source={{ uri }} width={96} height={96} />"
+};

package/platforms/react-native/solutions/components/InputSecurity/README.md

@@ -0,0 +1,29 @@
+# InputSecurity
+
+Sanitize and validate text with the validator package.
+
+## API
+
+sanitizeAndValidate(text, preventInjection, currentValue).
+
+## Example
+
+```tsx
+import { sanitizeAndValidate } from '@components/Form/components/InputSecurity';
+```
+
+## Dependencies
+
+- matrix key `validator`
+
+No other solutions are required.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`experimental`).
+
+Install with `forge g add --id component:InputSecurity`.

package/platforms/react-native/solutions/components/InputSecurity/files/InputSecurity.ts

@@ -0,0 +1,142 @@
+import validator from 'validator';
+
+export const sanitizeAndValidate = (text: string, preventInjection = true, currentValue = '') => {
+  if (!preventInjection) return text;
+
+  if (!text || text.trim().length < 2) return text;
+
+  const createPattern = (pattern: string, flags: string) => new RegExp(pattern, flags);
+
+  const criticalSqlPatterns = [
+    createPattern(
+      '[\'"`]\\s*;\\s*(SELECT\\s+.+\\s+FROM|INSERT\\s+INTO\\s+\\w+|UPDATE\\s+\\w+\\s+SET|DELETE\\s+FROM\\s+\\w+|DROP\\s+TABLE\\s+\\w+)',
+      'i',
+    ),
+
+    createPattern('[\'"`]?\\s*UNION\\s+(ALL\\s+)?SELECT\\s+.+\\s+FROM\\s+\\w+', 'i'),
+
+    createPattern('[\'"`]\\s*(AND|OR)\\s+[\'"`]?\\w*[\'"`]?\\s*[=<>]\\s*[\'"`]?\\w*[\'"`]?\\s*(--|#)', 'i'),
+
+    createPattern('[\'"`]\\s*(AND|OR)\\s+\\d+\\s*[=<>]\\s*\\d+\\s*(--|#)', 'i'),
+
+    createPattern('[\'"`]\\s*(--|#|/\\*).*', ''),
+
+    createPattern('[\'"`]?\\s*;\\s*(DROP\\s+TABLE|DELETE\\s+FROM|UPDATE\\s+\\w+\\s+SET)\\s+\\w+', 'i'),
+
+    createPattern('\\b0x[0-9a-fA-F]{20,}', ''),
+
+    createPattern(
+      '\\b(WAITFOR\\s+DELAY\\s+[\'"][^\'">]+[\'"]|SLEEP\\s*\\(\\s*\\d+\\s*\\)|BENCHMARK\\s*\\(\\s*\\d+)',
+      'i',
+    ),
+
+    createPattern('\\b(EXTRACTVALUE|UPDATEXML|EXP)\\s*\\([^)]+\\)', 'i'),
+
+    createPattern('[\'"`]\\s*(OR|AND)\\s+[\'"`]?[^\'">]+[\'"`]?\\s*[=<>]\\s*[\'"`]?[^\'">]+[\'"`]?\\s*(--|#)', 'i'),
+
+    createPattern('[\'"`]\\s*;\\s*\\w+', 'i'),
+  ];
+
+  const criticalXssPatterns = [
+    createPattern('<script[^>]*>.*</script>', 'is'),
+
+    createPattern('<script[^>]*\\s+src\\s*=', 'i'),
+    // eslint-disable-next-line no-script-url
+    createPattern('javascript:\\s*[a-zA-Z_$][\\w$]*\\s*\\(', 'i'),
+
+    createPattern('<\\w+[^>]*\\bon\\w+\\s*=\\s*[\'"][^\'">]{3,}[\'"]', 'i'),
+
+    createPattern('<(iframe|object|embed)[^>]*\\s+src\\s*=\\s*[\'"][^\'">]+[\'"]', 'i'),
+
+    createPattern('vbscript:\\s*[a-zA-Z_$][\\w$]*', 'i'),
+
+    createPattern('data:\\s*text/(html|javascript)[,;][^\\s]*', 'i'),
+
+    createPattern('expression\\s*\\([^)]{3,}\\)', 'i'),
+
+    createPattern('\\s+(style|href)\\s*=\\s*[\'"][^\'">]*javascript:', 'i'),
+  ];
+
+  const noSqlPatterns = [
+    createPattern('\\$(where|regex)\\s*:\\s*["\']?function\\s*\\(', 'i'),
+
+    createPattern('\\$(gt|gte|lt|lte|ne|in|nin)\\s*:\\s*["\'][^"\']*["\']\\s*,\\s*\\$(gt|gte|lt|lte)', 'i'),
+
+    createPattern('function\\s*\\([^)]*\\)\\s*{[^}]*return[^}]*}', 'i'),
+  ];
+
+  const allCriticalPatterns = [...criticalSqlPatterns, ...criticalXssPatterns, ...noSqlPatterns];
+  const isDangerous = allCriticalPatterns.some(pattern => pattern.test(text));
+
+  if (isDangerous) {
+    return currentValue || '';
+  }
+
+  const cleaned = text
+
+    .replace(createPattern('<script[^>]*>.*?</script>', 'gi'), '')
+    .replace(createPattern('<script[^>]*>', 'gi'), '')
+    // eslint-disable-next-line no-script-url
+    .replace(createPattern('javascript:\\s*[^\\s]+', 'gi'), '')
+    .replace(createPattern('vbscript:\\s*[^\\s]+', 'gi'), '')
+    .replace(createPattern('<iframe[^>]*>', 'gi'), '')
+    .replace(createPattern('<object[^>]*>', 'gi'), '')
+    .replace(createPattern('<embed[^>]*>', 'gi'), '');
+
+  return cleaned;
+};
+
+export const smartSanitize = (text: string, currentValue = '') => {
+  if (!text) return text;
+
+  const context = detectContext(text);
+
+  switch (context) {
+    case 'email':
+      return validator.isEmail(text) ? text : currentValue;
+
+    case 'url':
+      return validator.isURL(text, { require_protocol: false }) ? text : currentValue;
+
+    case 'numeric':
+      return validator.isNumeric(text.replace(/[,.\s]/g, '')) ? text : currentValue;
+
+    case 'dangerous':
+      return sanitizeAndValidate(text, true, currentValue);
+
+    default:
+      return sanitizeAndValidate(text, true, currentValue);
+  }
+};
+
+function detectContext(text: string): 'email' | 'url' | 'numeric' | 'dangerous' | 'safe' {
+  if (
+    /@[a-zA-Z0-9.-]+\.(com|org|net|edu|gov|mil|int|co\.|uk|de|fr|jp|au|ca|lt|lv|ee)($|\s)/.test(text) &&
+    text.split('@').length === 2
+  )
+    return 'email';
+
+  if (/^(https?:\/\/|www\.)|(\.(com|org|net|edu|gov|mil|int|co\.|uk|de|fr|jp|au|ca|lt|lv|ee)($|\/))/.test(text))
+    return 'url';
+
+  if (/^[\d,.\s+()-]+$/.test(text.replace(/[$€£¥₴]/g, ''))) return 'numeric';
+
+  const dangerousPatterns = [
+    /['"]\s*;\s*(SELECT\s+.+\s+FROM|INSERT\s+INTO|UPDATE\s+.+\s+SET|DELETE\s+FROM)\s+\w+/i,
+    /['"]\s*UNION\s+SELECT\s+/i,
+    /<script[^>]*>/i,
+    /javascript:\s*\w+\s*\(/i,
+    /['"]\s*(AND|OR)\s+\d+\s*[=<>]\s*\d+\s*(--|#)/i,
+    /['"]\s*;\s*(pasirinkti|atnaujinti|sukurti|įterpti|ištrinti)\s*;/i,
+  ];
+
+  if (dangerousPatterns.some(pattern => pattern.test(text))) {
+    return 'dangerous';
+  }
+
+  return 'safe';
+}
+
+export const secureInputHandler = (text: string, currentValue = '') => {
+  return sanitizeAndValidate(text, true, currentValue);
+};

package/platforms/react-native/solutions/components/InputSecurity/solution.js

@@ -0,0 +1,28 @@
+export default {
+  "id": "component:InputSecurity",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "InputSecurity",
+  "description": "Sanitize and validate text with the validator package.",
+  "status": "experimental",
+  "since": "1.0.0",
+  "tags": [
+    "form"
+  ],
+  "requires": [],
+  "dependencies": [
+    "validator"
+  ],
+  "files": [
+    {
+      "from": "files/InputSecurity.ts",
+      "to": "ui/components/Form/components/InputSecurity.ts"
+    }
+  ],
+  "register": [],
+  "manual": [],
+  "api": "sanitizeAndValidate(text, preventInjection, currentValue).",
+  "example": "import { sanitizeAndValidate } from '@components/Form/components/InputSecurity';"
+};

package/platforms/react-native/solutions/components/OTP/README.md

@@ -0,0 +1,29 @@
+# OTP
+
+One-time code field attached to TextInput.
+
+## API
+
+TextInput.OTP with length, value, and onChange.
+
+## Example
+
+```tsx
+<TextInput.OTP length={6} value={code} onChange={setCode} />
+```
+
+## Dependencies
+
+None beyond the setup baseline.
+
+No other solutions are required.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`stable`).
+
+Install with `forge g add --id component:OTP`.

package/platforms/react-native/solutions/components/OTP/files/Item.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { OtpPM } from '@components/TextInput/OTP/otp.pm.ts';
+
+interface IOtpItemProps extends Record<string, any> {
+  value: string;
+  borderColor: string;
+}
+
+function Item(itemProps: IOtpItemProps) {
+  const { item } = OtpPM.get(itemProps);
+
+  return <Text {...item} />;
+}
+
+export default Item;

package/platforms/react-native/solutions/components/OTP/files/Items.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import Item from './Item';
+import { Grid } from '@components';
+
+interface IItemsProps {
+  length: number;
+  value: string | undefined;
+  error: any;
+}
+
+function Items({ length, value, error }: IItemsProps) {
+  const items = useMemo(() => {
+    return Array(length)
+      .fill(null)
+      .map((_, i) => value?.[i] ?? '');
+  }, [value, length]);
+
+  return (
+    <Grid row space-between>
+      {items.map((code, index) => (
+        <Item
+          key={index}
+          value={code}
+          borderColor={
+            error ? 'error' : code || index === 0 ? 'outline' : items[index - 1] ? 'outline' : 'outlineVariant'
+          }
+        />
+      ))}
+    </Grid>
+  );
+}
+
+export default Items;

package/platforms/react-native/solutions/components/OTP/files/index.tsx

@@ -0,0 +1,120 @@
+import React, { createRef, useCallback, useEffect } from 'react';
+import { TouchableOpacity, TextInput, Platform, StyleSheet, Keyboard, InteractionManager, View } from 'react-native';
+import Items from './Items';
+
+interface IOTPProps {
+  length: number;
+  value?: string;
+  error?: any;
+  onChange?: (value: string) => void;
+}
+
+export default function OTP({ length = 6, value, error, onChange }: IOTPProps) {
+  const inputRef = createRef<TextInput>();
+
+  useEffect(
+    () => {
+      const { cancel } = InteractionManager.runAfterInteractions(() => {
+        if (inputRef.current) {
+          if (!Keyboard.isVisible()) {
+            Keyboard.dismiss();
+          }
+          inputRef.current.focus();
+        }
+      });
+      return () => cancel();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const onPress = useCallback(() => {
+    if (!Keyboard.isVisible()) {
+      Keyboard.dismiss();
+    }
+    inputRef.current?.focus();
+  }, [inputRef]);
+
+  return (
+    <TouchableOpacity activeOpacity={0.96} onPress={onPress}>
+      <TextInput
+        removeClippedSubviews={false}
+        scrollEnabled={false}
+        selectTextOnFocus={false}
+        selection={undefined}
+        selectionColor="#fff"
+        contextMenuHidden={true}
+        multiline={false}
+        autoComplete="one-time-code"
+        numberOfLines={1}
+        autoCapitalize="none"
+        autoCorrect={false}
+        clearButtonMode="never"
+        clearTextOnFocus={false}
+        keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
+        underlineColorAndroid="transparent"
+        caretHidden
+        ref={inputRef}
+        value={value}
+        onChangeText={text => {
+          const trimmedText = text.slice(0, length);
+          onChange?.(trimmedText);
+        }}
+        maxLength={length}
+        style={styles.hidden}
+      />
+
+      <Items value={value} error={error} length={length} />
+
+      <View style={styles.secondInputVisibility}>
+        <TextInput
+          removeClippedSubviews={false}
+          scrollEnabled={false}
+          selectTextOnFocus={false}
+          selection={undefined}
+          selectionColor="#fff"
+          maxFontSizeMultiplier={1}
+          multiline={false}
+          numberOfLines={1}
+          contextMenuHidden={false}
+          autoCapitalize="none"
+          autoCorrect={false}
+          clearButtonMode="never"
+          clearTextOnFocus={false}
+          shouldRasterizeIOS={false}
+          keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
+          underlineColorAndroid="transparent"
+          caretHidden
+          value={value || ''}
+          onChangeText={text => {
+            inputRef.current?.focus();
+            const trimmedText = text.slice(0, length);
+            onChange?.(trimmedText);
+          }}
+          style={styles.inputStule}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  hidden: {
+    fontSize: 20,
+    position: 'absolute',
+    width: 0.1,
+    color: '#fff',
+  },
+  secondInputVisibility: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  inputStule: {
+    flex: 1,
+    fontSize: 1,
+    color: 'transparent',
+  },
+});

package/platforms/react-native/solutions/components/OTP/files/otp.pm.ts

@@ -0,0 +1,30 @@
+import { Prop, PropertyManager, Static, Node } from '@effijs/props-manager';
+
+export const OtpPM = PropertyManager.create('Otp').node(
+  Node('item')
+    .extends('Text', 'Box')
+    .keys(
+      Static({
+        'headline-s': true,
+      }),
+      Prop('value', 'children'),
+      Static({
+        borderWidth: 1,
+      }),
+      Prop('borderColor'),
+    )
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Static({
+        pointerEvents: 'none',
+        borderRadius: 12,
+        verticalAlign: 'middle',
+        textAlign: 'center',
+        textVerticalAlign: 'center',
+        lineHeight: 42,
+        width: 42,
+        height: 42,
+      }),
+    ),
+);

package/platforms/react-native/solutions/components/OTP/solution.js

@@ -0,0 +1,38 @@
+export default {
+  "id": "component:OTP",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "OTP",
+  "description": "One-time code field attached to TextInput.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "form"
+  ],
+  "requires": [],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/TextInput/OTP"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/TextInput/index.ts",
+      "marker": "text-input-import",
+      "code": "import OTP from './OTP';\n"
+    },
+    {
+      "file": "ui/components/TextInput/index.ts",
+      "marker": "text-input-slots",
+      "code": "TextInput.OTP = OTP;\n"
+    }
+  ],
+  "manual": [],
+  "api": "TextInput.OTP with length, value, and onChange.",
+  "example": "<TextInput.OTP length={6} value={code} onChange={setCode} />"
+};

package/platforms/react-native/solutions/components/ProgressIndicator/README.md

@@ -0,0 +1,29 @@
+# ProgressIndicator
+
+Linear and circular progress drawn with Skia.
+
+## API
+
+ProgressIndicator.Circular and ProgressIndicator.Linear.
+
+## Example
+
+```tsx
+<ProgressIndicator.Circular size={16} />
+```
+
+## Dependencies
+
+- matrix key `skia`
+
+No other solutions are required.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`stable`).
+
+Install with `forge g add --id component:ProgressIndicator`.