@proximus/lavender-skeleton-native 0.1.0-alpha.0 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -3,8 +3,12 @@
 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.0 (2025-09-24)
+# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-skeleton-native@0.1.0-alpha.1...@proximus/lavender-skeleton-native@0.1.0-alpha.2) (2025-09-26)
 
-### Features
+**Note:** Version bump only for package @proximus/lavender-skeleton-native
 
-- **BCRI-4333430:** skeleton components ([#23](https://github.com/Pxs-Corporate/react-native-lavender/issues/23)) ([184f02f](https://github.com/Pxs-Corporate/react-native-lavender/commit/184f02f4f58dd825288b4db905b4bcbe74756ff8))
+# [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-skeleton-native@0.1.0-alpha.0...@proximus/lavender-skeleton-native@0.1.0-alpha.1) (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/CardSkeleton.js

@@ -0,0 +1,18 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+export function PxCardSkeleton({ inverted, containerStyle }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [containerStyle, { borderRadius: theme.t('RadiusMain').number }] },
+        React.createElement(PxSkeleton, { variant: 'assetL', inverted: inverted, expand: true }),
+        React.createElement(View, { style: {
+                gap: theme.t('SpacingSMobile').number,
+                borderBottomEndRadius: theme.t('RadiusMain').number,
+                borderBottomStartRadius: theme.t('RadiusMain').number,
+                padding: theme.t('PaddingSMobile').number,
+                backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+            } },
+            React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+            React.createElement(PxSkeleton, { variant: 'body', inverted: inverted }))));
+}

package/dist/CarouselSkeleton.js

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+export function PxCarouselSkeleton({ inverted, itemsVisible = 1, containerStyle, }) {
+    const { theme } = useTheme();
+    const panelVariant = itemsVisible === 1 ? 'panel' : 'panelS';
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                gap: theme.t('SpacingSMobile').number,
+                borderRadius: theme.t('RadiusMain').number,
+            },
+        ] },
+        React.createElement(View, { style: {
+                flexDirection: 'row',
+                gap: theme.t('SpacingSMobile').number,
+                overflow: 'hidden',
+            } },
+            React.createElement(PxSkeleton, { inverted: inverted, variant: panelVariant }),
+            React.createElement(PxSkeleton, { inverted: inverted, variant: panelVariant }),
+            React.createElement(PxSkeleton, { inverted: inverted, variant: panelVariant })),
+        React.createElement(View, { style: {
+                justifyContent: 'center',
+                flexDirection: 'row',
+            } },
+            React.createElement(PxSkeleton, { inverted: inverted, variant: 'body' }))));
+}

package/dist/DataUsageSkeleton.js

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { PxStatusSkeleton } from './StatusSkeleton';
+export function PxDataUsageSkeleton({ inverted, containerStyle, }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                gap: theme.t('SpacingDefaultMobile').number,
+                borderRadius: theme.t('RadiusMain').number,
+                padding: theme.t('PaddingSMobile').number,
+                backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+            },
+        ] },
+        React.createElement(View, { style: {
+                gap: theme.t('SpacingXsMobile').number,
+            } },
+            React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+            React.createElement(PxSkeleton, { variant: 'body', inverted: inverted })),
+        React.createElement(View, { style: {
+                gap: theme.t('SpacingXsMobile').number,
+            } },
+            React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+            React.createElement(PxSkeleton, { variant: 'body', inverted: inverted, expand: true }),
+            React.createElement(PxStatusSkeleton, null))));
+}

package/dist/MessageCardSkeleton.js

@@ -0,0 +1,27 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+export function PxMessageCardSkeleton({ inverted, containerStyle, }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+                borderRadius: theme.t('RadiusMain').number,
+                padding: theme.t('PaddingSMobile').number,
+                gap: theme.t('SpacingSMobile').number,
+            },
+        ] },
+        React.createElement(View, { style: {
+                flexDirection: 'row',
+                gap: theme.t('SpacingSMobile').number,
+            } },
+            React.createElement(PxSkeleton, { variant: 'assetS', inverted: inverted }),
+            React.createElement(View, { style: { flex: 1, gap: theme.t('SpacingSMobile').number } },
+                React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+                React.createElement(PxSkeleton, { variant: 'body', inverted: inverted })),
+            React.createElement(PxSkeleton, { variant: 'actionS', inverted: inverted })),
+        React.createElement(View, null,
+            React.createElement(PxSkeleton, { variant: 'actionL', inverted: inverted }))));
+}

package/dist/Skeleton.js

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet, View, } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTheme } from '@proximus/lavender-styling-native';
+const DURATION = 1500;
+const ANGLE = 18;
+function useColors({ inverted }) {
+    const { theme } = useTheme();
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    const backgroundColor = theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`);
+    const highlightColor = inverted ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)';
+    const highlightColorWithOpacity = inverted
+        ? 'rgba(0,0,0,0.24)'
+        : 'rgba(255,255,250,.24)';
+    return { backgroundColor, highlightColor, highlightColorWithOpacity };
+}
+export function PxSkeleton(props) {
+    const { inverted = false, containerStyle, variant, expand = false } = props;
+    const [layout, setLayout] = useState({ width: 0, height: 0 });
+    const translateX = useRef(new Animated.Value(0)).current;
+    const { theme } = useTheme();
+    const { backgroundColor, highlightColor, highlightColorWithOpacity } = useColors({ inverted });
+    const loopRef = useRef(null);
+    useEffect(() => {
+        if (layout.width <= 0)
+            return;
+        // Stop any previous loop before starting a new one
+        loopRef.current?.stop();
+        translateX.setValue(-layout.width * 1.5);
+        const loop = Animated.loop(Animated.timing(translateX, {
+            toValue: layout.width,
+            easing: Easing.cubic,
+            duration: DURATION,
+            useNativeDriver: true,
+        }));
+        loopRef.current = loop;
+        loop.start();
+        return () => {
+            loop.stop();
+            loopRef.current = null;
+        };
+    }, [translateX, layout]);
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                backgroundColor,
+                borderRadius: ['actionS', 'actionL'].includes(variant)
+                    ? theme.t('RadiusPill').number
+                    : theme.t('RadiusMain').number,
+                overflow: 'hidden',
+            },
+            styles[props.variant],
+            { ...(expand ? { width: '100%', maxWidth: undefined } : undefined) },
+        ], onLayout: (e) => {
+            const { width, height } = e.nativeEvent.layout;
+            setLayout({ width, height });
+        } },
+        React.createElement(Animated.View, { style: {
+                position: 'absolute',
+                top: -3 * layout.height, // ensure coverage when rotated
+                bottom: -3 * layout.height,
+                width: layout.width,
+                transform: [{ translateX }, { rotate: `${ANGLE}deg` }],
+            } }, layout.width > 0 && ( // Render gradient only when layout is measured will crash otherwise
+        React.createElement(LinearGradient, { style: { flex: 1 }, pointerEvents: "none", colors: [
+                highlightColorWithOpacity,
+                highlightColor,
+                highlightColorWithOpacity,
+            ], locations: [0, 0.5, 1], start: { x: 0, y: 0 }, end: { x: 1, y: 0 } })))));
+}
+const styles = StyleSheet.create({
+    headingS: {
+        height: 24,
+        minWidth: 120,
+        maxWidth: 240,
+    },
+    headingM: {
+        height: 32,
+        minWidth: 120,
+        maxWidth: 240,
+    },
+    headingL: {
+        height: 40,
+        minWidth: 120,
+        maxWidth: 240,
+    },
+    body: {
+        height: 16,
+        maxWidth: 300,
+        minWidth: 120,
+    },
+    bodyS: {
+        height: 16,
+        maxWidth: 180,
+        minWidth: 120,
+    },
+    actionS: {
+        height: 40,
+        width: 40,
+    },
+    actionL: {
+        height: 48,
+        width: 160,
+    },
+    assetS: {
+        height: 40,
+        width: 40,
+    },
+    assetXS: {
+        height: 16,
+        width: 16,
+    },
+    assetL: {
+        height: 80,
+        width: 80,
+    },
+    panel: {
+        height: 200,
+        width: 300,
+    },
+    panelS: {
+        height: 133,
+        width: 144,
+    },
+});

package/dist/StatusSkeleton.js

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+export function PxStatusSkeleton({ inverted, containerStyle }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            { flexDirection: 'row', gap: theme.t('Spacing2xsMobile').number },
+        ] },
+        React.createElement(PxSkeleton, { variant: 'assetXS', inverted: inverted }),
+        React.createElement(PxSkeleton, { variant: 'body', inverted: inverted })));
+}

package/dist/TileSkeleton.js

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+function PxTileSkeleton({ inverted }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: {
+            alignItems: 'center',
+            gap: theme.t('SpacingSMobile').number,
+            borderBottomEndRadius: theme.t('RadiusMain').number,
+            borderBottomStartRadius: theme.t('RadiusMain').number,
+            padding: theme.t('PaddingSMobile').number,
+            backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+        } },
+        React.createElement(PxSkeleton, { variant: 'assetS', inverted: inverted }),
+        React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted })));
+}
+export function PxTilesSkeleton({ inverted, containerStyle }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                gap: theme.t('SpacingSMobile').number,
+                flexDirection: 'row',
+                overflow: 'hidden',
+            },
+        ] },
+        React.createElement(PxTileSkeleton, { inverted: inverted }),
+        React.createElement(PxTileSkeleton, { inverted: inverted }),
+        React.createElement(PxTileSkeleton, { inverted: inverted })));
+}

package/dist/far/away/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@proximus/lavender-skeleton-native",
+  "version": "0.1.0-alpha.2",
+  "description": "Lavender skeleton component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-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.js

@@ -0,0 +1,7 @@
+export * from './Skeleton';
+export * from './CardSkeleton';
+export * from './MessageCardSkeleton';
+export * from './CarouselSkeleton';
+export * from './StatusSkeleton';
+export * from './TileSkeleton';
+export * from './DataUsageSkeleton';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@proximus/lavender-skeleton-native",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Lavender skeleton component",
   "license": "MIT",
   "main": "src/index.ts",
-  "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
-    "prepublish": "yarn clean && yarn build",
+    "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": {
@@ -16,9 +16,9 @@
     "@proximus/lavender-texts-native": "workspace:*"
   },
   "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.4",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.3",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.4"
+    "@proximus/lavender-common-native": "0.1.0-alpha.6",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.5",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.6"
   },
   "publishConfig": {
     "access": "public"
@@ -27,12 +27,18 @@
     "command": {
       "publish": {
         "assets": [
-          "dist",
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
           "src",
           "package.json"
         ]
       }
     }
   },
-  "gitHead": "8794f25d197ead361646d6e655ce64ba1c7f60c0"
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
 }

package/tsconfig.json

@@ -4,5 +4,5 @@
     "outDir": "dist",
   },
   "include": ["src","../../../lib.d.ts"],
-  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["dist", "node_modules", "src/**/*.spec.tsx", "src/**/*.spec.ts"]
 }