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

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

@@ -0,0 +1,144 @@
+import React, { useCallback, useRef, useState, useEffect } from 'react';
+import { StyleSheet, type LayoutChangeEvent, ScrollView } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { Box, Grid, Text, Button } from '@components';
+import { theme } from '@theme';
+
+interface ISectionData {
+  key: string;
+  title: string;
+}
+
+type SectionVariant = 'default' | 'outlined';
+
+interface ISectionProps {
+  data: ISectionData[];
+  onChange: (value: ISectionData) => void;
+  initialActiveIndex?: number;
+  variant?: SectionVariant;
+}
+
+export default function Section({ data, onChange, initialActiveIndex, variant = 'default' }: ISectionProps) {
+  const [activeIndex, setActiveIndex] = useState(initialActiveIndex || 0);
+  const activeItem = useSharedValue<{ width: number; height: number; left: number; top: number } | null>(null);
+  const dimensions = useRef<Record<number, { width: number; height: number; x: number; y: number }>>({});
+
+  const isOutlined = variant === 'outlined';
+
+  useEffect(() => {
+    if (initialActiveIndex !== undefined && initialActiveIndex !== activeIndex) {
+      setActiveIndex(initialActiveIndex);
+      if (dimensions.current[initialActiveIndex]) {
+        activeItem.value = {
+          width: dimensions.current[initialActiveIndex].width,
+          height: dimensions.current[initialActiveIndex].height,
+          left: dimensions.current[initialActiveIndex].x,
+          top: dimensions.current[initialActiveIndex].y,
+        };
+      }
+    }
+  }, [initialActiveIndex, activeIndex, activeItem]);
+
+  const onPress = useCallback(
+    (index: number) => () => {
+      if (activeIndex === index) return;
+      setActiveIndex(index);
+      onChange?.(data[index]);
+      activeItem.value = {
+        width: dimensions.current[index].width,
+        height: dimensions.current[index].height,
+        left: dimensions.current[index].x,
+        top: dimensions.current[index].y,
+      };
+    },
+    [activeIndex, data, onChange, activeItem],
+  );
+
+  const onLayout = useCallback(
+    (index: number) =>
+      ({
+        nativeEvent: {
+          layout: { width, height, x, y },
+        },
+      }: LayoutChangeEvent) => {
+        dimensions.current[index] = {
+          width,
+          height,
+          x,
+          y,
+        };
+
+        if (index === activeIndex) {
+          activeItem.value = {
+            width: dimensions.current[index].width,
+            height: dimensions.current[index].height,
+            left: dimensions.current[index].x,
+            top: dimensions.current[index].y,
+          };
+        }
+      },
+    [activeIndex, activeItem],
+  );
+
+  const activeStyles = useAnimatedStyle(
+    () => ({
+      position: 'absolute',
+      top: activeItem.value?.top || 0,
+      width: withTiming(activeItem.value?.width || 0, { duration: 200 }),
+      height: activeItem.value?.height || 0,
+      left: withTiming(activeItem.value?.left || 0, { duration: 200 }),
+      borderRadius: 4,
+    }),
+    [activeItem],
+  );
+
+  const containerStyle = isOutlined ? { backgroundColor: theme.color.tertiary } : {};
+
+  const activeItemColor = isOutlined ? theme.color.onPrimary : theme.color.background;
+
+  const getTextColor = (index: number) => {
+    if (isOutlined) {
+      return 'background';
+    }
+    return index === activeIndex ? 'primary' : 'background';
+  };
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <Box style={containerStyle} row p-xxs round="xs" color="primary" gap-xxs>
+        <Animated.View style={[activeStyles, { backgroundColor: activeItemColor }]} />
+        {data.map((item, index) => {
+          return (
+            <Grid key={item.title} flex={1} onLayout={onLayout(index)}>
+              <Button.Touchable
+                round="xxs"
+                activeOpacity={0.96}
+                onPress={onPress(index)}
+                style={isOutlined ? styles.itemContainerOutlined : styles.itemContainer}>
+                <Text title-m center color={getTextColor(index)} accessible={false}>
+                  {item.title}
+                </Text>
+              </Button.Touchable>
+            </Grid>
+          );
+        })}
+      </Box>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    minHeight: 32,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemContainerOutlined: {
+    minHeight: 28,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

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

@@ -0,0 +1,37 @@
+export default {
+  "id": "component:Section",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "Section",
+  "description": "Segmented section control.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui"
+  ],
+  "requires": [],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/Section"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import Section from './Section/Common';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  Section,\n"
+    }
+  ],
+  "manual": [],
+  "api": "Section with data, onChange, and variant.",
+  "example": "<Section data={tabs} onChange={setTab} />"
+};

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

@@ -0,0 +1,29 @@
+# Slider
+
+Slider from the previous template kit. Treat the API as experimental until it is wired into a screen.
+
+## API
+
+Default export from ui/components/Slider.
+
+## Example
+
+```tsx
+import Slider from '@components/Slider';
+```
+
+## 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:Slider`.

package/platforms/react-native/solutions/components/Slider/files/Container.tsx

@@ -0,0 +1,5 @@
+import { SliderProvider } from '@ui/components/Slider/Context.tsx';
+
+export default function SliderContainer<T>({ data, children }: { data: T[]; children: React.ReactNode }) {
+  return <SliderProvider data={data} children={children} />;
+}

package/platforms/react-native/solutions/components/Slider/files/Content.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { ViewToken, ListRenderItem } from 'react-native';
+import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
+
+import { useSliderContext } from '@ui/components/Slider/Context.tsx';
+
+export default function SliderContent<T>({ renderItem }: { renderItem: ListRenderItem<T> }) {
+  const { x, scrollIndex, data } = useSliderContext();
+
+  const onScroll = useAnimatedScrollHandler(
+    {
+      onScroll: event => {
+        x.value = event.contentOffset.x;
+      },
+    },
+    [],
+  );
+
+  const onViewableItemsChanged = useCallback(({ viewableItems }: { viewableItems: ViewToken[] }) => {
+    if (viewableItems.length > 0 && viewableItems[0].index !== null) {
+      scrollIndex.value = viewableItems[0].index;
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Animated.FlatList
+      style={{ flexGrow: 0 }}
+      horizontal
+      pagingEnabled
+      showsHorizontalScrollIndicator={false}
+      data={data}
+      renderItem={renderItem}
+      scrollEventThrottle={16}
+      bounces={false}
+      removeClippedSubviews
+      initialNumToRender={1}
+      maxToRenderPerBatch={1}
+      windowSize={6}
+      viewabilityConfig={{ viewAreaCoveragePercentThreshold: 10, minimumViewTime: 1000 }}
+      onViewableItemsChanged={onViewableItemsChanged}
+      onScroll={onScroll}
+    />
+  );
+}

package/platforms/react-native/solutions/components/Slider/files/Context.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
+
+interface ISliderContext<T = any> {
+  data: T[];
+  length: number;
+  width: number;
+  x: SharedValue<number>;
+  scrollIndex: SharedValue<number>;
+}
+
+const SliderContext = createContext<ISliderContext>(null as unknown as ISliderContext);
+
+export function SliderProvider({ data, children }: { data: any[]; children: React.ReactNode }) {
+  const dimensions = useWindowDimensions();
+  const x = useSharedValue(0);
+  const scrollIndex = useSharedValue(0);
+
+  const value = useMemo(
+    () => ({ width: dimensions.width, x, scrollIndex, length: data.length, data }),
+    [dimensions.width, x, scrollIndex, data],
+  );
+
+  return <SliderContext.Provider value={value} children={children} />;
+}
+
+export function useSliderContext() {
+  return useContext(SliderContext);
+}

package/platforms/react-native/solutions/components/Slider/files/Pagination.Dot.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+
+import { theme } from '@theme';
+import { useSliderContext } from '@ui/components/Slider/Context.tsx';
+
+export default function Pagination() {
+  const { length } = useSliderContext();
+  const dots = useMemo(() => Array.from({ length }), [length]);
+
+  return (
+    <View style={styles.dotContainer}>
+      {dots.map((_, index) => (
+        <PaginationDot key={index} index={index} />
+      ))}
+    </View>
+  );
+}
+
+function PaginationDot({ index }: { index: number }) {
+  const { width: screenWidth, x } = useSliderContext();
+
+  const animation = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      x.value,
+      [(index - 1) * screenWidth, index * screenWidth, (index + 1) * screenWidth],
+      [0.3, 1, 0.3],
+      Extrapolation.CLAMP,
+    );
+
+    const width = interpolate(
+      x.value,
+      [(index - 1) * screenWidth, index * screenWidth, (index + 1) * screenWidth],
+      [8, 16, 8],
+      Extrapolation.CLAMP,
+    );
+
+    return {
+      width,
+      opacity,
+    };
+  }, []);
+
+  return <Animated.View style={[styles.dot, animation]} />;
+}
+
+const styles = StyleSheet.create({
+  dotContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    // justifyContent: ''
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: theme.color.primary,
+  },
+});

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

@@ -0,0 +1,22 @@
+import Container from './Container';
+import Content from './Content';
+import { useSliderContext } from './Context';
+import Pagination from './Pagination.Dot';
+
+type TContainer = typeof Container;
+type TContent = typeof Content;
+type TPagination = typeof Pagination;
+type TuseSliderContext = typeof useSliderContext;
+
+interface ISlider extends TContainer {
+  Content: TContent;
+  Pagination: TPagination;
+  useSliderContext: TuseSliderContext;
+}
+
+const Slider = Container as ISlider;
+Slider.Content = Content;
+Slider.Pagination = Pagination;
+Slider.useSliderContext = useSliderContext;
+
+export default Slider;

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

@@ -0,0 +1,38 @@
+export default {
+  "id": "component:Slider",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "Slider",
+  "description": "Slider 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/Slider"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import Slider from './Slider';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  Slider,\n"
+    }
+  ],
+  "manual": [],
+  "api": "Default export from ui/components/Slider.",
+  "example": "import Slider from '@components/Slider';"
+};

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

@@ -0,0 +1,29 @@
+# Switch
+
+Themed switch.
+
+## API
+
+Switch with value and onValueChange, styled through Switch.PM.
+
+## Example
+
+```tsx
+<Switch value={on} onValueChange={setOn} />
+```
+
+## 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:Switch`.

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
+import { Icon, ProgressIndicator } from '@components';
+import { useLoading } from '@components/utils/useLoading.hook';
+
+import { SwitchPM } from './switch.pm';
+
+interface ISwitchProps {
+  label?: string;
+  value?: boolean;
+  loading?: boolean;
+  onChange?: (value: boolean) => void | Promise<void>;
+  disabled?: boolean;
+  reverse?: boolean;
+  stretched?: boolean;
+}
+
+export default function Switch({ label, value, onChange, disabled, reverse, stretched = true, loading }: ISwitchProps) {
+  const { loading: internalLoading, handle } = useLoading(() => onChange?.(!value));
+
+  const props = SwitchPM.get({ value, loading: loading || internalLoading, disabled, label, reverse, stretched });
+
+  return (
+    <Pressable disabled={disabled || loading} {...props.container} onPress={handle}>
+      <View {...props.wrapper}>
+        <Animated.View layout={LinearTransition.springify(600).damping(14)}>
+          <View {...props.track}>
+            <Icon icon={value ? 'check' : 'close'} size={18} color="primary" />
+          </View>
+        </Animated.View>
+        {/*{loading ? <ProgressIndicator.Circular size={14} /> : null}*/}
+      </View>
+      {props.label.children ? <Text {...props.label} /> : null}
+    </Pressable>
+  );
+}

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

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

package/platforms/react-native/solutions/components/Switch/files/switch.pm.ts

@@ -0,0 +1,53 @@
+import { Prop, Node, PropertyManager, Static } from '@effijs/props-manager';
+
+export const SwitchPM = PropertyManager.create('Switch').node(
+  Node('container')
+    .extends('Grid')
+    .keys(Static({ row: true, 'gap-s': true, 'align-center': true })),
+  Node('track').keys(
+    'style',
+    Static({
+      height: 30,
+      width: 30,
+      borderRadius: 999,
+      backgroundColor: '#FFFFFF',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }),
+  ),
+  Node('wrapper')
+    .extends('Box')
+    .pickKeys('value', 'disabled')
+    .keys(
+      'style',
+      Static({
+        minWidth: 54,
+        height: 36,
+        borderRadius: 18,
+        paddingHorizontal: 3,
+      }),
+    )
+    .keys(
+      Static({
+        color: 'primary',
+        'align-start': true,
+        'justify-center': true,
+      }),
+      Prop('value', () => ({
+        color: 'primary',
+        'align-end': true,
+      })),
+      Prop('disabled', () => ({
+        color: 'outline',
+      })),
+    ),
+  Node('label')
+    .extends('Text')
+    .pickKeys('label', 'stretched')
+    .keys(
+      Static({ 'body-m': true, color: 'secondary' }),
+      Prop(['label', 'stretched'], ({ label, stretched }) => {
+        return { children: label, flex: stretched && label ? 1 : 0 };
+      }),
+    ),
+);

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

@@ -0,0 +1,38 @@
+export default {
+  "id": "component:Switch",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "Switch",
+  "description": "Themed switch.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "form"
+  ],
+  "requires": [],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/Switch"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import Switch from './Switch';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  Switch,\n"
+    }
+  ],
+  "manual": [],
+  "api": "Switch with value and onValueChange, styled through Switch.PM.",
+  "example": "<Switch value={on} onValueChange={setOn} />"
+};

package/platforms/react-native/solutions/install.js

@@ -0,0 +1,97 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { copyStaticFile } from '@effijs/forge';
+import { depsByKeys } from '../../../lib/compat.js';
+import { installPackages } from '../../../lib/install.js';
+import { markInstalled } from '../../../lib/journal.js';
+import { writeMigration, aiPrompt } from '../../../lib/migration.js';
+import { projectRoot } from '../../../lib/project.js';
+
+function markerPattern(name) {
+  const escaped = String(name).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return `// forge:${escaped}`;
+}
+
+async function copySolutionDirectory(forge, from, to, { dryRun, force }) {
+  const previous = forge.runOptions;
+  const runDry = dryRun ?? previous?.dryRun;
+  const runForce = force ?? previous?.force;
+  // processDirectory reads dryRun and force from the forge instance, not its options.
+  forge.runOptions = { ...previous, dryRun: runDry, force: runForce };
+  try {
+    return await forge.processDirectory(from, to, {}, {
+      templateSuffix: '.hbs',
+      dryRun: runDry,
+      force: runForce,
+    });
+  } finally {
+    forge.runOptions = previous;
+  }
+}
+
+export async function installSolution(solution, { forge, outputDir, dryRun, force, compat, packageManager }) {
+  const notes = [];
+  for (const file of solution.files) {
+    const from = path.join(solution._dir, file.from);
+    const to = path.join(outputDir, file.to);
+    const stat = fs.existsSync(from) ? fs.statSync(from) : null;
+    if (!stat) return { success: false, error: `Solution file missing: ${file.from}` };
+    if (stat.isDirectory()) {
+      let copied;
+      try {
+        copied = await copySolutionDirectory(forge, from, to, { dryRun, force });
+      } catch (error) {
+        return { success: false, error: error.message || `Failed to copy ${file.from}` };
+      }
+      const failed = copied.find((item) => !item?.success);
+      if (failed) return { success: false, error: failed.error || `Failed to copy ${file.from}` };
+    } else {
+      const copied = await copyStaticFile(from, to, { dryRun, force });
+      if (!copied.success) return { success: false, error: copied.error || `Failed to copy ${file.from}` };
+    }
+    notes.push(file.to);
+  }
+
+  for (const entry of solution.register ?? []) {
+    const target = path.join(outputDir, entry.file);
+    if (!fs.existsSync(target)) {
+      return { success: false, error: `${entry.file} is missing. Run forge g init first.` };
+    }
+    const appended = await forge.appendToFile(
+      target,
+      entry.code,
+      { pattern: markerPattern(entry.marker), flags: '', before: true, unique: true }, // flags '' keeps the first marker only
+      { dryRun, force },
+    );
+    if (!appended?.success) {
+      return { success: false, error: `${entry.file}: ${appended?.error ?? `Marker // forge:${entry.marker} was not found`}` };
+    }
+    notes.push(`registered ${entry.file}`);
+  }
+
+  if (solution.dependencies?.length && compat) {
+    const deps = depsByKeys(compat, solution.dependencies);
+    const installed = installPackages({
+      root: projectRoot(forge),
+      packageManager,
+      ...deps,
+      dryRun,
+    });
+    if (installed.command) notes.push(installed.command);
+  }
+
+  if (solution.manual?.length && !dryRun) {
+    const file = await writeMigration(projectRoot(forge), {
+      title: `Manual steps for ${solution.id}`,
+      target: solution.id,
+      reason: `${solution.title} needs native or console setup that a generator cannot finish.`,
+      required: solution.manual.join('\n\n'),
+      prompt: aiPrompt('.forge/migrations/<this-file>'),
+    });
+    notes.push(`Manual steps: ${file}`);
+  }
+
+  await markInstalled(projectRoot(forge), solution.id, { dryRun });
+  return { success: true, notes };
+}