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

package/platforms/react-native/solutions/components/ProgressIndicator/files/Circular.tsx

@@ -0,0 +1,154 @@
+import {
+  Canvas,
+  Group,
+  Path,
+  Skia,
+  // BlurMask, SweepGradient, vec
+} from '@shopify/react-native-skia';
+import React, { useEffect, useMemo } from 'react';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+import Grid from '../Grid';
+
+export type TCircularIndicatorProps = {
+  size?: number;
+  progress?: number;
+  color?: string;
+  backgroundColor?: string;
+  strokeWidth?: number;
+};
+
+export const CircularIndicator: React.FC<TCircularIndicatorProps> = ({
+  size = 24,
+  progress: externalProgress,
+  color = '#ff000050',
+  backgroundColor = '#ff000010',
+  strokeWidth = 4,
+}) => {
+  const radius = (size - strokeWidth) / 2;
+  const canvasSize = size;
+
+  const circle = useMemo(() => {
+    return Skia.Path.Circle(canvasSize / 2, canvasSize / 2, radius);
+  }, [canvasSize, radius]);
+
+  const spinAnimation = useSharedValue(0);
+
+  const isDeterminate = externalProgress !== undefined;
+
+  const progressValue = useSharedValue(isDeterminate ? externalProgress! : 0);
+
+  useEffect(() => () => circle.dispose(), [circle]);
+
+  useEffect(() => {
+    if (!isDeterminate) {
+      spinAnimation.value = withRepeat(
+        withTiming(1, { duration: 2000, easing: Easing.linear }),
+        -1, // infinite repeat
+        false,
+      );
+    }
+  }, [isDeterminate, spinAnimation]);
+
+  useEffect(() => {
+    if (isDeterminate && externalProgress !== undefined) {
+      progressValue.value = withTiming(externalProgress, {
+        duration: 300,
+        easing: Easing.inOut(Easing.quad),
+      });
+    }
+  }, [isDeterminate, externalProgress, progressValue]);
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    return {
+      transform: !isDeterminate ? [{ rotateZ: `${4 * Math.PI * spinAnimation.value}rad` }] : [],
+    };
+  }, [isDeterminate]);
+
+  const startPath = useDerivedValue(() => {
+    if (isDeterminate) {
+      return 0;
+    }
+    return interpolate(spinAnimation.value, [0, 0.6, 1], [0.8, 0.3, 0.8]);
+  }, [isDeterminate]);
+
+  const endPath = useDerivedValue(() => {
+    if (isDeterminate) {
+      return progressValue.value;
+    }
+    return interpolate(spinAnimation.value, [0, 0.6, 1], [1.0, 0.9, 1.0]);
+  }, [isDeterminate, progressValue]);
+
+  const startPath2 = useDerivedValue(() => {
+    if (isDeterminate) return 0;
+    return interpolate(spinAnimation.value, [0, 0.6, 1], [0.35, 0.25, 0.35]);
+  }, [isDeterminate]);
+
+  const endPath2 = useDerivedValue(() => {
+    if (isDeterminate) return 1;
+    return interpolate(spinAnimation.value, [0, 0.6, 1], [0.95, 0.45, 0.95]);
+  }, [isDeterminate]);
+
+  return (
+    <Grid center>
+      <Animated.View entering={FadeIn.duration(500)} exiting={FadeOut.duration(100)} style={rContainerStyle}>
+        <Canvas
+          style={{
+            width: canvasSize,
+            height: canvasSize,
+          }}>
+          <Group
+            transform={[
+              { translateX: canvasSize / 2 },
+              { translateY: canvasSize / 2 },
+              { rotate: -Math.PI / 2 },
+              { rotateX: Math.PI },
+              { translateX: -canvasSize / 2 },
+              { translateY: -canvasSize / 2 },
+            ]}>
+            <Path
+              path={circle}
+              color={color}
+              style="stroke"
+              strokeWidth={strokeWidth}
+              start={startPath}
+              end={endPath}
+              strokeCap={'round'}>
+              {/*<SweepGradient c={vec(canvasSize / 2, canvasSize / 2)} colors={['cyan', 'magenta', 'yellow', 'cyan']} />*/}
+              {/*<BlurMask blur={5} style="solid" />*/}
+            </Path>
+
+            {!isDeterminate && (
+              <Path
+                path={circle}
+                color={backgroundColor}
+                style="stroke"
+                strokeWidth={strokeWidth}
+                start={startPath2}
+                end={endPath2}
+                transform={[
+                  { translateX: canvasSize / 2 },
+                  { translateY: canvasSize / 2 },
+                  { rotate: -Math.PI / 2 },
+                  { translateX: -canvasSize / 2 },
+                  { translateY: -canvasSize / 2 },
+                ]}
+                strokeCap={'round'}
+              />
+            )}
+          </Group>
+        </Canvas>
+      </Animated.View>
+    </Grid>
+  );
+};

package/platforms/react-native/solutions/components/ProgressIndicator/files/Linear.tsx

@@ -0,0 +1,133 @@
+import { Canvas, Path, Skia, RoundedRect } from '@shopify/react-native-skia';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { type LayoutChangeEvent } from 'react-native';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  interpolate,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+import Grid from '@components/Grid';
+
+export type TLinearIndicatorProps = {
+  width?: number;
+  height?: number;
+  progress?: number;
+  color?: string;
+  backgroundColor?: string;
+  borderRadius?: number;
+  duration?: number;
+  onDurationDone?: () => void;
+  reverse?: boolean;
+};
+
+export const LinearIndicator: React.FC<TLinearIndicatorProps> = ({
+  height = 8,
+  progress: externalProgress,
+  color = '#ff000050',
+  backgroundColor = '#ff000010',
+  borderRadius,
+  duration,
+  onDurationDone,
+  reverse = false,
+}) => {
+  const [canvasWidth, setCanvasWidth] = useState(0);
+  const canvasHeight = height;
+  const radius = borderRadius ?? height / 2;
+
+  const backgroundPath = useMemo(() => {
+    const path = Skia.Path.Make();
+    path.addRRect({
+      rect: { x: 0, y: 0, width: canvasWidth, height: canvasHeight },
+      rx: radius,
+      ry: radius,
+    });
+    return path;
+  }, [canvasWidth, canvasHeight, radius]);
+
+  useEffect(() => () => backgroundPath.dispose(), [backgroundPath]);
+
+  const isDeterminate = externalProgress !== undefined || duration !== undefined;
+
+  const initialProgress = useMemo(() => {
+    if (!isDeterminate) return 0;
+    if (externalProgress !== undefined) {
+      return reverse ? 1 - externalProgress : externalProgress;
+    }
+    return reverse ? 1 : 0;
+  }, [isDeterminate, externalProgress, reverse]);
+
+  const progressValue = useSharedValue(initialProgress);
+  const animationProgress = useSharedValue(0);
+
+  useEffect(() => {
+    if (!isDeterminate) {
+      animationProgress.value = withRepeat(withTiming(1, { duration: 2000, easing: Easing.linear }), -1, false);
+    }
+  }, [isDeterminate, animationProgress]);
+
+  useEffect(() => {
+    if (isDeterminate && externalProgress !== undefined) {
+      const target = reverse ? 1 - externalProgress : externalProgress;
+      progressValue.value = withTiming(target, {
+        duration: 300,
+        easing: Easing.inOut(Easing.quad),
+      });
+    } else if (isDeterminate && duration !== undefined) {
+      const toValue = reverse ? 0 : 1;
+      progressValue.value = withTiming(toValue, { duration, easing: Easing.inOut(Easing.quad) }, onDurationDone);
+    }
+  }, [externalProgress, duration, isDeterminate, reverse, onDurationDone, progressValue]);
+
+  const indeterminateWidth = useDerivedValue(() => {
+    if (isDeterminate) return progressValue.value * canvasWidth;
+    return interpolate(
+      animationProgress.value,
+      [0, 0.6, 1],
+      [canvasWidth * 0.01, canvasWidth * 0.7, canvasWidth * 0.01],
+    );
+  }, [isDeterminate, animationProgress, canvasWidth]);
+
+  const indeterminatePosition = useDerivedValue(() => {
+    if (isDeterminate) return 0;
+    return interpolate(animationProgress.value, [0, 0.6, 1], [0, 0, canvasWidth]);
+  }, [isDeterminate, animationProgress, canvasWidth]);
+
+  const progressWidth = useDerivedValue(() => {
+    if (!isDeterminate) return 0;
+    return progressValue.value * canvasWidth;
+  }, [isDeterminate, progressValue, canvasWidth]);
+
+  const onLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+    setCanvasWidth(layout.width);
+  }, []);
+
+  return (
+    <Grid row flex={1} onLayout={onLayout}>
+      <Animated.View entering={FadeIn.duration(500)} exiting={FadeOut.duration(100)}>
+        <Canvas style={{ width: canvasWidth, height: canvasHeight }}>
+          <Path path={backgroundPath} color={backgroundColor} />
+          {isDeterminate && (
+            <RoundedRect x={0} y={0} width={progressWidth} height={canvasHeight} r={radius} color={color} />
+          )}
+
+          {!isDeterminate && (
+            <RoundedRect
+              x={indeterminatePosition}
+              y={0}
+              width={indeterminateWidth}
+              height={canvasHeight}
+              r={radius}
+              color={color}
+            />
+          )}
+        </Canvas>
+      </Animated.View>
+    </Grid>
+  );
+};

package/platforms/react-native/solutions/components/ProgressIndicator/files/circular.pm.ts

@@ -0,0 +1,34 @@
+import { Prop, PropertyManager, Node } from '@effijs/props-manager';
+
+export const CircularIndicatorPM = PropertyManager.create('CircularIndicator').node(
+  Node('container').keys(
+    Prop(
+      'color',
+      ({ color }, { theme }) => ({
+        color: theme.color.hasKey(color) ? theme.color[color] : color,
+        backgroundColor: colorOpacity(theme.color.hasKey(color) ? theme.color[color] : color, 0.3),
+      }),
+      { providers: ['theme'] },
+    ),
+  ),
+);
+
+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/solutions/components/ProgressIndicator/files/index.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { CircularIndicator, type TCircularIndicatorProps } from './Circular';
+import { CircularIndicatorPM } from './circular.pm';
+import { LinearIndicator as Linear } from './Linear';
+
+type TCircularIndicator = React.FC<TCircularIndicatorProps>;
+
+interface ICircularIndicator extends TCircularIndicator {
+  PM: typeof CircularIndicatorPM;
+}
+
+const Circular = CircularIndicator as ICircularIndicator;
+Circular.PM = CircularIndicatorPM;
+
+export default { Circular, Linear };

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

@@ -0,0 +1,39 @@
+export default {
+  "id": "component:ProgressIndicator",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "ProgressIndicator",
+  "description": "Linear and circular progress drawn with Skia.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui"
+  ],
+  "requires": [],
+  "dependencies": [
+    "skia"
+  ],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/ProgressIndicator"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import ProgressIndicator from './ProgressIndicator';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  ProgressIndicator,\n"
+    }
+  ],
+  "manual": [],
+  "api": "ProgressIndicator.Circular and ProgressIndicator.Linear.",
+  "example": "<ProgressIndicator.Circular size={16} />"
+};

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

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

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

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+
+import { RulerProvider } from './Context';
+import { DEFAULT_FRACTION_DIGITS, DEFAULT_RULER_STEP } from './ruler.constants';
+import type { IRulerProps } from './ruler.types';
+import { clamp, validateRulerProps } from './ruler.utils';
+
+export default function RulerCommon({
+  min,
+  max,
+  step = DEFAULT_RULER_STEP,
+  fractionDigits = DEFAULT_FRACTION_DIGITS,
+  value,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  children,
+}: IRulerProps) {
+  validateRulerProps(min, max, step);
+
+  const _value = value === undefined || value === null ? value : clamp(value, min, max);
+
+  useEffect(() => {
+    if (_value !== undefined && _value !== null && _value !== value) {
+      onChange?.(_value);
+    }
+    // Only notify the consumer when their controlled value falls outside [min, max].
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_value, value]);
+
+  return (
+    <RulerProvider
+      min={min}
+      max={max}
+      step={step}
+      fractionDigits={fractionDigits}
+      value={_value}
+      defaultValue={defaultValue}
+      onValueChange={onChange}
+      onValueChangeEnd={onChangeEnd}>
+      {children}
+    </RulerProvider>
+  );
+}

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

@@ -0,0 +1,210 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { DEFAULT_TRACK_VISUAL, RULER_CONTROLLED_TIMING_CONFIG } from './ruler.constants';
+import type { IRulerContextValue, IRulerTrackVisualConfig } from './ruler.types';
+import {
+  formatRulerValue,
+  getMaxOffset,
+  getStepCount,
+  getStepSize,
+  offsetToValue,
+  rescaleOffsetToStepSize,
+  valueToOffset,
+} from './ruler.utils';
+
+const RulerContext = createContext<IRulerContextValue | null>(null);
+
+interface IRulerProviderProps {
+  min: number;
+  max: number;
+  step: number;
+  fractionDigits: number;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  onValueChangeEnd?: (value: number) => void;
+  children: React.ReactNode;
+}
+
+export function RulerProvider({
+  min,
+  max,
+  step,
+  fractionDigits,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  onValueChangeEnd,
+  children,
+}: IRulerProviderProps) {
+  const stepCount = useMemo(() => getStepCount(min, max, step), [min, max, step]);
+  const [trackVisual, setTrackVisual] = useState<IRulerTrackVisualConfig>(DEFAULT_TRACK_VISUAL);
+
+  const initialStepSize = getStepSize(trackVisual.stepWidth, trackVisual.gapBetweenSteps);
+  const initialOffset = valueToOffset(controlledValue ?? defaultValue ?? min, {
+    min,
+    max,
+    step,
+    stepSize: initialStepSize,
+    stepCount,
+  });
+
+  const offset = useSharedValue(initialOffset);
+  const stepSize = useSharedValue(initialStepSize);
+  const maxOffset = useSharedValue(getMaxOffset(stepCount, initialStepSize));
+  const isDragging = useSharedValue(false);
+  const viewportWidth = useSharedValue(0);
+  const viewportHeight = useSharedValue(0);
+  const controlledValueSV = useSharedValue(controlledValue ?? defaultValue ?? min);
+
+  const onValueChangeRef = useRef(onValueChange);
+  const onValueChangeEndRef = useRef(onValueChangeEnd);
+  const isDraggingRef = useRef(false);
+
+  onValueChangeRef.current = onValueChange;
+  onValueChangeEndRef.current = onValueChangeEnd;
+
+  const mathConfig = useMemo(() => ({ min, max, step, stepCount }), [min, max, step, stepCount]);
+
+  const updateTrackVisual = useCallback(
+    (config: Partial<IRulerTrackVisualConfig>) => {
+      setTrackVisual(current => {
+        const next = { ...current, ...config };
+        const previousStepSize = stepSize.value;
+        const nextStepSize = getStepSize(next.stepWidth, next.gapBetweenSteps);
+
+        stepSize.value = nextStepSize;
+        maxOffset.value = getMaxOffset(stepCount, nextStepSize);
+        offset.value = rescaleOffsetToStepSize(offset.value, previousStepSize, nextStepSize, stepCount);
+
+        return next;
+      });
+    },
+    [mathConfig, maxOffset, offset, stepCount, stepSize],
+  );
+
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      controlledValueSV.value = controlledValue;
+    }
+  }, [controlledValue, controlledValueSV]);
+
+  const value = useDerivedValue(() => {
+    return offsetToValue(offset.value, {
+      ...mathConfig,
+      stepSize: stepSize.value,
+    });
+  }, [mathConfig, offset, stepSize]);
+
+  const formattedValue = useDerivedValue(() => {
+    return formatRulerValue(value.value, fractionDigits);
+  }, [fractionDigits, value]);
+
+  const emitValueChange = useCallback((nextValue: number) => {
+    onValueChangeRef.current?.(nextValue);
+  }, []);
+
+  const emitValueChangeEnd = useCallback((nextValue: number) => {
+    onValueChangeEndRef.current?.(nextValue);
+  }, []);
+
+  const setDragging = useCallback((dragging: boolean) => {
+    isDraggingRef.current = dragging;
+  }, []);
+
+  useAnimatedReaction(
+    () => value.value,
+    (current, previous) => {
+      if (current === previous || previous === null) {
+        return;
+      }
+
+      runOnJS(emitValueChange)(current);
+    },
+    [emitValueChange],
+  );
+
+  useAnimatedReaction(
+    () => controlledValueSV.value,
+    (current, previous) => {
+      if (current === previous || isDragging.value) {
+        return;
+      }
+
+      offset.value = withTiming(
+        valueToOffset(current, {
+          ...mathConfig,
+          stepSize: stepSize.value,
+        }),
+        RULER_CONTROLLED_TIMING_CONFIG,
+      );
+    },
+    [controlledValueSV, isDragging, mathConfig, offset, stepSize],
+  );
+
+  useAnimatedReaction(
+    () => isDragging.value,
+    (current, previous) => {
+      if (current === previous) {
+        return;
+      }
+
+      runOnJS(setDragging)(current);
+
+      if (!current && previous) {
+        runOnJS(emitValueChangeEnd)(value.value);
+      }
+    },
+    [emitValueChangeEnd, isDragging, setDragging, value],
+  );
+
+  const contextValue = useMemo<IRulerContextValue>(
+    () => ({
+      value,
+      formattedValue,
+      offset,
+      isDragging,
+      min,
+      max,
+      step,
+      fractionDigits,
+      stepCount,
+      stepSize,
+      maxOffset,
+      trackVisual,
+      viewportWidth,
+      viewportHeight,
+      updateTrackVisual,
+    }),
+    [
+      value,
+      formattedValue,
+      offset,
+      isDragging,
+      min,
+      max,
+      step,
+      fractionDigits,
+      stepCount,
+      stepSize,
+      maxOffset,
+      trackVisual,
+      viewportWidth,
+      viewportHeight,
+      updateTrackVisual,
+    ],
+  );
+
+  return <RulerContext.Provider value={contextValue}>{children}</RulerContext.Provider>;
+}
+
+export function useRuler(): IRulerContextValue {
+  const context = useContext(RulerContext);
+
+  if (!context) {
+    throw new Error('useRuler must be used within a <Ruler> component.');
+  }
+
+  return context;
+}