@proximus/lavender-carousel-native 0.1.0-alpha.3

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-carousel-native@0.1.0-alpha.2...@proximus/lavender-carousel-native@0.1.0-alpha.3) (2025-09-26)
+
+**Note:** Version bump only for package @proximus/lavender-carousel-native
+
+# 0.1.0-alpha.2 (2025-09-25)
+
+### Bug Fixes
+
+- **BCRI-000000:** no free space on gh runner during build ([#27](https://github.com/Pxs-Corporate/react-native-lavender/issues/27)) ([a7c8604](https://github.com/Pxs-Corporate/react-native-lavender/commit/a7c86043b5cefcb10fd768d449c5718fbabe87ec))

package/dist/AppleSeed.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function PxAppleSeed({ numberOfItems, selectedItemIndex, }: {
+    numberOfItems: number;
+    selectedItemIndex: number;
+}): React.JSX.Element;
+//# sourceMappingURL=AppleSeed.d.ts.map

package/dist/AppleSeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppleSeed.d.ts","sourceRoot":"","sources":["../src/AppleSeed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,qBAiGA"}

package/dist/AppleSeed.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+const appleSeedSizeL = 14;
+const appleSeedSizeM = 10;
+const appleSeedSizeS = 6;
+const appleSeedSizeXS = 4;
+export function PxAppleSeed({ numberOfItems, selectedItemIndex, }) {
+    const { theme } = useTheme();
+    const tx = useRef(new Animated.Value(0)).current;
+    const prevSelectedItemIndex = useRef(selectedItemIndex);
+    useEffect(() => {
+        if ((selectedItemIndex <= 2 && prevSelectedItemIndex.current != 3) ||
+            numberOfItems - selectedItemIndex < 3) {
+            return;
+        }
+        const translateLeft = selectedItemIndex > prevSelectedItemIndex.current ? -1 : 1;
+        const toValue = translateLeft
+            ? -1 * (selectedItemIndex - 2) * theme.t('SizeIconS').number
+            : (selectedItemIndex - 3) * theme.t('SizeIconS').number;
+        Animated.spring(tx, {
+            toValue,
+            useNativeDriver: true,
+        }).start();
+        prevSelectedItemIndex.current = selectedItemIndex;
+    }, [numberOfItems, selectedItemIndex, theme, tx]);
+    return (React.createElement(View, { style: {
+            flexDirection: 'row',
+            width: 5 * theme.t('SizeIconS').number,
+            justifyContent: numberOfItems < 5 ? 'center' : 'flex-start',
+            alignSelf: 'center',
+            overflow: 'hidden',
+            alignItems: 'center',
+        } }, Array.from({ length: numberOfItems }).map((_, index) => (React.createElement(Animated.View, { key: index, style: {
+            width: theme.t('SizeIconS').number,
+            height: theme.t('SizeIconS').number,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: [
+                {
+                    translateX: tx,
+                },
+            ],
+        } },
+        React.createElement(View, { key: index, style: {
+                borderWidth: theme.t('SizeBorderS').number,
+                height: numberOfItems > 5 ? appleSeedSizeXS : appleSeedSizeM,
+                width: numberOfItems > 5 ? appleSeedSizeXS : appleSeedSizeM,
+                borderRadius: theme.t('RadiusMain').number,
+                borderColor: theme.t('ColorBackgroundStateActiveDefault'),
+                ...(index === numberOfItems - 2 &&
+                    numberOfItems > 6 && {
+                    height: appleSeedSizeM,
+                    width: appleSeedSizeM,
+                }),
+                ...(index === numberOfItems - 3 &&
+                    numberOfItems > 5 && {
+                    height: appleSeedSizeS,
+                    width: appleSeedSizeS,
+                }),
+                ...((index === selectedItemIndex - 2 ||
+                    index === selectedItemIndex + 2) &&
+                    numberOfItems > 5 && {
+                    height: appleSeedSizeS,
+                    width: appleSeedSizeS,
+                }),
+                ...((index === selectedItemIndex - 1 ||
+                    index === selectedItemIndex + 1) &&
+                    numberOfItems > 5 && {
+                    height: appleSeedSizeM,
+                    width: appleSeedSizeM,
+                }),
+                ...(index === selectedItemIndex && {
+                    backgroundColor: theme.t('ColorBackgroundStateActiveDefault'),
+                    ...(numberOfItems > 5 && {
+                        height: appleSeedSizeL,
+                        width: appleSeedSizeL,
+                    }),
+                }),
+            } }))))));
+}

package/dist/Carousel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+export declare function PxCarousel({ numberOfItemsVisible, children, withAppleSeed, containerStyle, testID, accessibilityProps, }: {
+    numberOfItemsVisible?: number;
+    children?: React.ReactNode;
+    withAppleSeed?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+    accessibilityProps?: AccessibilityProps;
+}): React.JSX.Element;
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../src/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,kBAAkB,EAGlB,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,wBAAgB,UAAU,CAAC,EACzB,oBAAwB,EACxB,QAAQ,EACR,aAAoB,EACpB,cAAc,EACd,MAAM,EACN,kBAAkB,GACnB,EAAE;IACD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,qBAgFA"}

package/dist/Carousel.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { Dimensions, FlatList, View, } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { PxAppleSeed } from './AppleSeed';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+const inset = 24;
+export function PxCarousel({ numberOfItemsVisible = 1, children, withAppleSeed = true, containerStyle, testID, accessibilityProps, }) {
+    const [width, setWidth] = useState(0);
+    const [computedGap, setComputedGap] = useState(0);
+    const [elementsCount, setElementsCount] = useState(0);
+    const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+    const [offsets, setOffsets] = useState([]);
+    const { theme } = useTheme();
+    useEffect(() => {
+        setWidth((Dimensions.get('window').width -
+            numberOfItemsVisible * computedGap -
+            2 * inset) /
+            numberOfItemsVisible);
+    }, [numberOfItemsVisible, computedGap, theme]);
+    useEffect(() => {
+        setElementsCount(React.Children.count(children));
+    }, [children]);
+    useEffect(() => {
+        setComputedGap(theme.t(`SpacingSMobile`).number);
+    }, [theme]);
+    useEffect(() => {
+        setOffsets(new Array(elementsCount).fill(0).reduce((prev, _, i) => {
+            return [...prev, prev[i] + width + computedGap];
+        }, [width]));
+    }, [computedGap, elementsCount, width]);
+    return (React.createElement(View, { style: [containerStyle, { flexDirection: 'column', gap: 27.15, flex: 1 }], ...e2eID(testID), ...a11y(accessibilityProps) },
+        React.createElement(FlatList, { data: new Array(React.Children.count(children)).fill(0), renderItem: ({ index }) => (React.createElement(View, { style: { width } }, [...children]?.[index])), contentContainerStyle: {
+                gap: computedGap,
+                alignItems: 'stretch',
+                paddingLeft: computedGap,
+            }, horizontal: true, snapToOffsets: offsets, decelerationRate: "fast", snapToAlignment: numberOfItemsVisible === 1 ? 'center' : 'start', showsHorizontalScrollIndicator: false, onViewableItemsChanged: (event) => {
+                if (event.viewableItems.length === 2 &&
+                    event.viewableItems?.[0]?.index === 0) {
+                    setSelectedItemIndex(0);
+                    return;
+                }
+                setSelectedItemIndex(event.viewableItems?.[1]?.index ?? 0);
+            } }, children),
+        withAppleSeed && elementsCount > 1 && (React.createElement(PxAppleSeed, { numberOfItems: React.Children.count(children), selectedItemIndex: selectedItemIndex }))));
+}

package/dist/far/away/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@proximus/lavender-carousel-native",
+  "version": "0.1.0-alpha.3",
+  "description": "Carousel component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Carousel';
+export * from './AppleSeed';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './Carousel';
+export * from './AppleSeed';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@proximus/lavender-carousel-native",
+  "version": "0.1.0-alpha.3",
+  "description": "Carousel component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "prepublish": "yarn clean && yarn transform-package-json && yarn build",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*"
+  },
+  "devDependencies": {
+    "@proximus/lavender-common-native": "0.1.0-alpha.6",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
+}

package/src/AppleSeed.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+
+const appleSeedSizeL = 14;
+const appleSeedSizeM = 10;
+const appleSeedSizeS = 6;
+const appleSeedSizeXS = 4;
+
+export function PxAppleSeed({
+  numberOfItems,
+  selectedItemIndex,
+}: {
+  numberOfItems: number;
+  selectedItemIndex: number;
+}) {
+  const { theme } = useTheme();
+  const tx = useRef(new Animated.Value(0)).current;
+  const prevSelectedItemIndex = useRef(selectedItemIndex);
+
+  useEffect(() => {
+    if (
+      (selectedItemIndex <= 2 && prevSelectedItemIndex.current != 3) ||
+      numberOfItems - selectedItemIndex < 3
+    ) {
+      return;
+    }
+
+    const translateLeft =
+      selectedItemIndex > prevSelectedItemIndex.current ? -1 : 1;
+
+    const toValue = translateLeft
+      ? -1 * (selectedItemIndex - 2) * theme.t('SizeIconS').number
+      : (selectedItemIndex - 3) * theme.t('SizeIconS').number;
+
+    Animated.spring(tx, {
+      toValue,
+      useNativeDriver: true,
+    }).start();
+
+    prevSelectedItemIndex.current = selectedItemIndex;
+  }, [numberOfItems, selectedItemIndex, theme, tx]);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        width: 5 * theme.t('SizeIconS').number,
+        justifyContent: numberOfItems < 5 ? 'center' : 'flex-start',
+        alignSelf: 'center',
+        overflow: 'hidden',
+        alignItems: 'center',
+      }}
+    >
+      {Array.from({ length: numberOfItems }).map((_, index) => (
+        <Animated.View
+          key={index}
+          style={{
+            width: theme.t('SizeIconS').number,
+            height: theme.t('SizeIconS').number,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: [
+              {
+                translateX: tx,
+              },
+            ],
+          }}
+        >
+          <View
+            key={index}
+            style={{
+              borderWidth: theme.t('SizeBorderS').number,
+              height: numberOfItems > 5 ? appleSeedSizeXS : appleSeedSizeM,
+              width: numberOfItems > 5 ? appleSeedSizeXS : appleSeedSizeM,
+              borderRadius: theme.t('RadiusMain').number,
+              borderColor: theme.t('ColorBackgroundStateActiveDefault'),
+              ...(index === numberOfItems - 2 &&
+                numberOfItems > 6 && {
+                  height: appleSeedSizeM,
+                  width: appleSeedSizeM,
+                }),
+              ...(index === numberOfItems - 3 &&
+                numberOfItems > 5 && {
+                  height: appleSeedSizeS,
+                  width: appleSeedSizeS,
+                }),
+              ...((index === selectedItemIndex - 2 ||
+                index === selectedItemIndex + 2) &&
+                numberOfItems > 5 && {
+                  height: appleSeedSizeS,
+                  width: appleSeedSizeS,
+                }),
+              ...((index === selectedItemIndex - 1 ||
+                index === selectedItemIndex + 1) &&
+                numberOfItems > 5 && {
+                  height: appleSeedSizeM,
+                  width: appleSeedSizeM,
+                }),
+              ...(index === selectedItemIndex && {
+                backgroundColor: theme.t('ColorBackgroundStateActiveDefault'),
+                ...(numberOfItems > 5 && {
+                  height: appleSeedSizeL,
+                  width: appleSeedSizeL,
+                }),
+              }),
+            }}
+          />
+        </Animated.View>
+      ))}
+    </View>
+  );
+}

package/src/Carousel.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react';
+import {
+  AccessibilityProps,
+  Dimensions,
+  FlatList,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { PxAppleSeed } from './AppleSeed';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+
+const inset = 24;
+
+export function PxCarousel({
+  numberOfItemsVisible = 1,
+  children,
+  withAppleSeed = true,
+  containerStyle,
+  testID,
+  accessibilityProps,
+}: {
+  numberOfItemsVisible?: number;
+  children?: React.ReactNode;
+  withAppleSeed?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+  accessibilityProps?: AccessibilityProps;
+}) {
+  const [width, setWidth] = useState(0);
+  const [computedGap, setComputedGap] = useState(0);
+  const [elementsCount, setElementsCount] = useState(0);
+  const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+  const [offsets, setOffsets] = useState([]);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    setWidth(
+      (Dimensions.get('window').width -
+        numberOfItemsVisible * computedGap -
+        2 * inset) /
+        numberOfItemsVisible
+    );
+  }, [numberOfItemsVisible, computedGap, theme]);
+
+  useEffect(() => {
+    setElementsCount(React.Children.count(children));
+  }, [children]);
+
+  useEffect(() => {
+    setComputedGap(theme.t(`SpacingSMobile`).number);
+  }, [theme]);
+
+  useEffect(() => {
+    setOffsets(
+      new Array(elementsCount).fill(0).reduce(
+        (prev, _, i) => {
+          return [...prev, prev[i] + width + computedGap];
+        },
+        [width]
+      )
+    );
+  }, [computedGap, elementsCount, width]);
+
+  return (
+    <View
+      style={[containerStyle, { flexDirection: 'column', gap: 27.15, flex: 1 }]}
+      {...e2eID(testID)}
+      {...a11y(accessibilityProps)}
+    >
+      <FlatList
+        data={new Array(React.Children.count(children)).fill(0)}
+        renderItem={({ index }) => (
+          <View style={{ width }}>
+            {[...(children as Iterable<any>)]?.[index]}
+          </View>
+        )}
+        contentContainerStyle={{
+          gap: computedGap,
+          alignItems: 'stretch',
+          paddingLeft: computedGap,
+        }}
+        horizontal
+        snapToOffsets={offsets}
+        decelerationRate="fast"
+        snapToAlignment={numberOfItemsVisible === 1 ? 'center' : 'start'}
+        showsHorizontalScrollIndicator={false}
+        onViewableItemsChanged={(event) => {
+          if (
+            event.viewableItems.length === 2 &&
+            event.viewableItems?.[0]?.index === 0
+          ) {
+            setSelectedItemIndex(0);
+            return;
+          }
+          setSelectedItemIndex(event.viewableItems?.[1]?.index ?? 0);
+        }}
+      >
+        {children}
+      </FlatList>
+      {withAppleSeed && elementsCount > 1 && (
+        <PxAppleSeed
+          numberOfItems={React.Children.count(children)}
+          selectedItemIndex={selectedItemIndex}
+        />
+      )}
+    </View>
+  );
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Carousel';
+export * from './AppleSeed';

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.npm.json",
+  "compilerOptions": {
+    "outDir": "dist",
+  },
+  "include": ["src","../../../lib.d.ts"],
+  "exclude": ["dist", "node_modules", "src/**/*.spec.tsx", "src/**/*.spec.ts"]
+}