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

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

@@ -0,0 +1,29 @@
+# Chart
+
+Chart from the previous template kit. Treat the API as experimental until it is wired into a screen.
+
+## API
+
+Default export from ui/components/Chart.
+
+## Example
+
+```tsx
+import Chart from '@components/Chart';
+```
+
+## Dependencies
+
+None beyond the setup baseline.
+
+No other solutions are required.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`experimental`).
+
+Install with `forge g add --id component:Chart`.

package/platforms/react-native/solutions/components/Chart/files/Cilcular.tsx

@@ -0,0 +1,140 @@
+import { Canvas, Path, Skia, SkPath } from '@shopify/react-native-skia';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { theme, useTheme } from '@theme';
+
+export type CircularProgressProps = {
+  /** Progress value from 0 to 1 (e.g. 0.65 = 65%). */
+  progress: number;
+  /** Thickness of the ring's border/stroke. Fully configurable. Default: 12 */
+  strokeWidth?: number;
+  /** Color of the filled progress arc. */
+  color?: string;
+  /** Color of the background track (the "unfilled" part of the ring). */
+  trackColor?: string;
+  /** End cap style for the progress arc. */
+  strokeCap?: 'butt' | 'round' | 'square';
+  /** Animation duration in ms. Default: 800 */
+  duration?: number;
+  /**
+   * Optional fixed diameter. If omitted (recommended), the component
+   * measures its parent and stretches to fill the available free space.
+   */
+  size?: number;
+  /** Optional content rendered centered inside the ring (e.g. a percentage label). */
+  children?: React.ReactNode;
+  /** Style applied to the outer wrapping View. */
+  style?: ViewStyle;
+};
+
+export const CircularChart: React.FC<CircularProgressProps> = ({
+  progress,
+  strokeWidth = 8,
+  color: _color = '#4F46E5',
+  trackColor: _trackColor = '#E5E7EB',
+  strokeCap = 'round',
+  duration = 800,
+  size,
+  children,
+  style,
+}) => {
+  const themeKey = useTheme();
+  const color = theme.hasKey(`color.${_color}`) ? theme.get(`color.${_color}`, themeKey) : _color;
+  const trackColor = theme.hasKey(`color.${_trackColor}`) ? theme.get(`color.${_trackColor}`, themeKey) : _trackColor;
+
+  const [measured, setMeasured] = useState({ width: size ?? 0, height: size ?? 0 });
+
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      if (size) return; // fixed size was given, no need to measure
+      const { width, height } = e.nativeEvent.layout;
+      if (width !== measured.width || height !== measured.height) {
+        setMeasured({ width, height });
+      }
+    },
+    [size, measured.width, measured.height],
+  );
+
+  // Stretch to fill whatever free space is available, staying a perfect
+  // circle by using the smaller of the two dimensions.
+  const diameter = size ?? Math.min(measured.width, measured.height);
+  const radius = Math.max(0, diameter / 2 - strokeWidth / 2);
+  const cx = diameter / 2;
+  const cy = diameter / 2;
+
+  // Build the circular path (starts at 12 o'clock, sweeps clockwise).
+  const path: SkPath = useMemo(() => {
+    const p = Skia.Path.Make();
+    if (diameter > 0 && radius > 0) {
+      const rect = Skia.XYWHRect(cx - radius, cy - radius, radius * 2, radius * 2);
+      p.addArc(rect, -90, 360);
+    }
+    return p;
+  }, [diameter, radius, cx, cy]);
+
+  // Drives the `end` trim of the progress Path. Skia components accept
+  // Reanimated shared values directly as props and update on the UI thread.
+  const animatedEnd = useSharedValue(0);
+
+  useEffect(() => {
+    const clamped = Math.max(0, Math.min(1, progress));
+    animatedEnd.value = withTiming(clamped, {
+      duration,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [progress, duration, animatedEnd]);
+
+  if (diameter <= 0) {
+    // First render before layout is known — just render the measuring container.
+    return <View style={[styles.container, style]} onLayout={onLayout} />;
+  }
+
+  return (
+    <View style={[styles.container, style]} onLayout={onLayout}>
+      <Canvas style={{ width: diameter, height: diameter }}>
+        <Path
+          path={path}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          strokeCap={strokeCap}
+          color={trackColor}
+          opacity={0.8}
+        />
+        <Path
+          path={path}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          strokeCap={strokeCap}
+          color={color}
+          start={0}
+          end={animatedEnd}
+        />
+      </Canvas>
+
+      {children ? (
+        <View pointerEvents="none" style={styles.centerContent}>
+          {children}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  centerContent: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default CircularChart;

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

@@ -0,0 +1,3 @@
+import Circular from './Cilcular';
+
+export default { Circular };

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

@@ -0,0 +1,38 @@
+export default {
+  "id": "component:Chart",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "Chart",
+  "description": "Chart from the previous template kit. Treat the API as experimental until it is wired into a screen.",
+  "status": "experimental",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "kit"
+  ],
+  "requires": [],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/Chart"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import Chart from './Chart';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  Chart,\n"
+    }
+  ],
+  "manual": [],
+  "api": "Default export from ui/components/Chart.",
+  "example": "import Chart from '@components/Chart';"
+};

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

@@ -0,0 +1,29 @@
+# CheckBox
+
+Themed checkbox and the matching form element.
+
+## API
+
+CheckBox and Form.Element.Checkbox.
+
+## Example
+
+```tsx
+<Form.Item name="agree"><Form.Element.Checkbox label="Agree" /></Form.Item>
+```
+
+## 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:CheckBox`.

package/platforms/react-native/solutions/components/CheckBox/files/Common.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+// import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { Icon } from '@components';
+import { CheckBoxPM } from '@components/CheckBox/checkbox.pm';
+import { TGridProps } from '@components/Grid/grid.types';
+import { useLoading } from '@components/utils/useLoading.hook';
+
+// const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+interface ICheckBoxProps {
+  loading?: boolean;
+  value?: boolean;
+  label?: string | React.ReactNode;
+  onChange?: (value: boolean) => void | Promise<void>;
+  disabled?: boolean;
+  reverse?: boolean;
+  round?: boolean;
+  stretched?: boolean;
+  color?: string;
+}
+
+export default function Common({
+  value,
+  onChange,
+  loading,
+  stretched = true,
+  color = 'outline',
+  ...checkBoxProps
+}: ICheckBoxProps & TGridProps) {
+  const { loading: internalLoading, handle } = useLoading(() => onChange?.(!value));
+
+  const props = CheckBoxPM.get({
+    value,
+    loading: internalLoading || loading,
+    color,
+    stretched,
+    ...checkBoxProps,
+  });
+
+  return (
+    <Pressable {...props.container} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} onPress={handle}>
+      <View {...props.checkbox}>
+        {value ? (
+          <View>
+            <Icon {...props.icon} />
+            {/*{loading ? <ProgressIndicator.Circular size={14} /> : null}*/}
+          </View>
+        ) : null}
+      </View>
+      {props.label?.children ? <Text {...props.label} /> : null}
+    </Pressable>
+  );
+}

package/platforms/react-native/solutions/components/CheckBox/files/checkbox.pm.ts

@@ -0,0 +1,71 @@
+import { Prop, Node, PropertyManager, Static } from '@effijs/props-manager';
+
+import { TTheme, ThemeScheme } from '@theme';
+
+export const CheckBoxPM = PropertyManager.create('CheckBox').node(
+  Node('container')
+    .extends('Grid')
+    .keys(
+      Static({ row: true, 'gap-s': true, 'align-center': true }),
+      Prop('reverse'),
+      Prop(['label', 'stretched'], ({ label, stretched }) => ({ flex: stretched && label ? 1 : 0 })),
+    ),
+  Node('label')
+    .extends('Text')
+    .pickKeys('label', 'stretched')
+    .keys(
+      'style',
+      Prop(['label', 'stretched'], ({ label, stretched }) => ({ flex: stretched && label ? 1 : 0 })),
+    )
+    .keys(
+      Static({ 'body-m': true }),
+      Prop(['label'], ({ label }) => ({ children: label })),
+    ),
+
+  Node('icon')
+    // .extends('Text')
+    .pickKeys('color')
+    .keys(
+      Static({ icon: 'check', size: 20 }),
+      Prop(['color'], ({ color }) => ({ color: `on${color.charAt(0).toUpperCase()}${color.slice(1)}` })),
+    ),
+  Node('checkbox')
+    .keys(
+      'style',
+      Prop('style', ({ style }) => style),
+      Static({
+        width: 18,
+        height: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+        borderRadius: 4,
+      }),
+      Prop('round', {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+      }),
+      Prop(
+        ['color', 'value', 'theme'],
+        ({ color, value, theme: themeName }, { theme }: { theme: TTheme }) => {
+          const clr = theme.get(`color.${color as keyof ThemeScheme['color']}`, themeName) ?? color;
+
+          return {
+            borderColor: clr,
+            backgroundColor: value ? clr : 'transparent',
+          };
+        },
+        { nullWhenFirstKeyNull: true, providers: ['theme'] },
+      ),
+      Prop(
+        ['borderColor', 'theme'],
+        ({ borderColor, theme: themeName }, { theme }) => ({
+          borderColor: theme.get(`color.${borderColor}`, themeName) ?? borderColor,
+        }),
+        { nullWhenFirstKeyNull: true, providers: ['theme'] },
+      ),
+      Prop('borderWidth'),
+    )
+    .keys(Prop('disabled')),
+);

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

@@ -0,0 +1,9 @@
+import Common from './Common';
+
+type TCommon = typeof Common;
+
+interface ICheckBox extends TCommon {}
+
+const CheckBox = Common as ICheckBox;
+
+export default CheckBox;

package/platforms/react-native/solutions/components/CheckBox/form/Checkbox.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { CheckBox } from '@components';
+
+import Common from './Common';
+import type { TFormCheckboxProps } from './form.types';
+
+export default function FormCheckbox({
+  label,
+  value,
+  onChange,
+  disabled,
+  type,
+  stretched,
+  ...rest
+}: TFormCheckboxProps<boolean>) {
+  return (
+    <Common disabled={disabled} focusable={!disabled} type={type} {...rest}>
+      <CheckBox label={label} disabled={disabled} onChange={onChange} value={value} stretched={stretched} />
+    </Common>
+  );
+}

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

@@ -0,0 +1,57 @@
+export default {
+  "id": "component:CheckBox",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "CheckBox",
+  "description": "Themed checkbox and the matching form element.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "form"
+  ],
+  "requires": [],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/CheckBox"
+    },
+    {
+      "from": "form/Checkbox.tsx",
+      "to": "ui/components/Form/Checkbox.tsx"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import CheckBox from './CheckBox';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  CheckBox,\n"
+    },
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-imports",
+      "code": "import FormCheckbox from './Checkbox';\n"
+    },
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-types",
+      "code": "    Checkbox: typeof FormCheckbox;\n"
+    },
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-elements",
+      "code": "  Checkbox: FormCheckbox,\n"
+    }
+  ],
+  "manual": [],
+  "api": "CheckBox and Form.Element.Checkbox.",
+  "example": "<Form.Item name=\"agree\"><Form.Element.Checkbox label=\"Agree\" /></Form.Item>"
+};

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

@@ -0,0 +1,29 @@
+# DateTimePicker
+
+Form date field that opens the bottom-sheet picker.
+
+## API
+
+Form.Element.DateTimePicker. format, minimumDate, maximumDate, mode.
+
+## Example
+
+```tsx
+<Form.Item name="date"><Form.Element.DateTimePicker mode="date" /></Form.Item>
+```
+
+## Dependencies
+
+None beyond the setup baseline.
+
+Requires: `component:BottomSheetWidgets`.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`stable`).
+
+Install with `forge g add --id component:DateTimePicker`.

package/platforms/react-native/solutions/components/DateTimePicker/files/DateTimePicker.tsx

@@ -0,0 +1,44 @@
+import dayjs from 'dayjs';
+
+import type { TFormSelectProps } from '@components/Form/form.types';
+import FormSelect from '@components/Form/Select';
+import { useNavigation } from '@navigation/navigation.hooks';
+import { IDateTimePickerBottomSheetProps } from '@widgets/bottomSheet/DateTimePicker.BottomSheet.tsx';
+
+type TFormSelectPossibleProps = Omit<TFormSelectProps<Date>, 'onSelect' | 'value' | 'getTitleForValue' | 'onChange'>;
+
+interface IDateTimePickerProps extends TFormSelectPossibleProps, IDateTimePickerBottomSheetProps {
+  format?: string;
+  emptyValueTitle?: string;
+}
+
+export default function DateTimePicker({
+  format,
+  minimumDate,
+  maximumDate,
+  mode,
+  title,
+  description,
+  emptyValueTitle,
+  canClear,
+  ...props
+}: IDateTimePickerProps) {
+  const navigation = useNavigation();
+
+  const getTitleForValue = (value?: Date) =>
+    value ? dayjs(value).format(format || 'DD MMM YYYY HH:mm') : emptyValueTitle ? emptyValueTitle : '';
+
+  const onSelect: TFormSelectProps<Date>['onSelect'] = (value, onSelectChange) =>
+    navigation.widgets.showDateTime({
+      value,
+      minimumDate,
+      maximumDate,
+      mode,
+      title,
+      description,
+      canClear,
+      onChange: value => onSelectChange(value, getTitleForValue(value) || 'Title '),
+    });
+
+  return <FormSelect {...props} onSelect={onSelect} getTitleForValue={getTitleForValue} />;
+}

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

@@ -0,0 +1,45 @@
+export default {
+  "id": "component:DateTimePicker",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "DateTimePicker",
+  "description": "Form date field that opens the bottom-sheet picker.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "form"
+  ],
+  "requires": [
+    "component:BottomSheetWidgets"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files/DateTimePicker.tsx",
+      "to": "ui/components/Form/DateTimePicker.tsx"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-imports",
+      "code": "import DateTimePicker from './DateTimePicker';\n"
+    },
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-types",
+      "code": "    DateTimePicker: typeof DateTimePicker;\n"
+    },
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-elements",
+      "code": "  DateTimePicker,\n"
+    }
+  ],
+  "manual": [],
+  "api": "Form.Element.DateTimePicker. format, minimumDate, maximumDate, mode.",
+  "example": "<Form.Item name=\"date\"><Form.Element.DateTimePicker mode=\"date\" /></Form.Item>"
+};

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

@@ -0,0 +1,29 @@
+# Image
+
+Native and SVG image with theme sizing. SVG rendering uses Skia.
+
+## API
+
+Image.Native and Image.SVG.
+
+## Example
+
+```tsx
+<Image.Native source={{ uri }} width={96} height={96} />
+```
+
+## 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:Image`.

package/platforms/react-native/solutions/components/Image/files/SVG.tsx

@@ -0,0 +1,74 @@
+import {
+  Canvas,
+  ImageSVG,
+  rect,
+  fitbox,
+  useSVG,
+  Group,
+  type DataSourceParam,
+  Paint,
+  BlendColor,
+} from '@shopify/react-native-skia';
+import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { TGridProps } from '@components/Grid/grid.types.ts';
+import { ImagePM } from '@components/Image/image.pm.ts';
+
+export default function SVG({
+  image,
+  ...svgProps
+}: {
+  image: DataSourceParam;
+  width?: number;
+  height?: number;
+  color?: string;
+} & TGridProps) {
+  const props = ImagePM.get(svgProps);
+  return (
+    <View {...props.container}>
+      <Content image={image} {...props.svg} />
+    </View>
+  );
+}
+
+function Content({
+  image,
+  width = 375,
+  height = 375,
+  color,
+}: {
+  image: DataSourceParam;
+  width?: number;
+  height?: number;
+  color?: string;
+}) {
+  const svg = useSVG(image);
+
+  // useEffect(() => () => svg?.dispose(), [svg]);
+
+  if (!svg) {
+    return null;
+  }
+
+  const src = rect(0, 0, svg.width(), svg.height());
+  const dst = rect(0, 0, width, height);
+
+  return (
+    <View style={{ width, height }}>
+      <Canvas style={{ width, height }}>
+        <Group
+          transform={fitbox('contain', src, dst)}
+          layer={
+            color ? (
+              <Paint>
+                <BlendColor color={color} mode="srcIn" />
+              </Paint>
+            ) : undefined
+          }>
+          <ImageSVG svg={svg} x={0} y={0} width={width} height={height} />
+        </Group>
+      </Canvas>
+    </View>
+  );
+}