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

package/package.json

@@ -1,44 +1,18 @@
 {
   "name": "@proximus/lavender-skeleton-native",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.8",
   "description": "Lavender skeleton 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"
-  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
-    "@proximus/lavender-common-native": "workspace:*",
-    "@proximus/lavender-styling-native": "workspace:*",
-    "@proximus/lavender-texts-native": "workspace:*"
-  },
-  "devDependencies": {
-    "@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"
+    "@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/CHANGELOG.md

@@ -1,14 +0,0 @@
-# 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.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)
-
-**Note:** Version bump only for package @proximus/lavender-skeleton-native
-
-# [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/far/away/package.json

@@ -1,33 +0,0 @@
-{
-  "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/src/CardSkeleton.tsx

@@ -1,29 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { ISkeletonProps } from './types';
-
-export function PxCardSkeleton({ inverted, containerStyle }: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={[containerStyle, { borderRadius: theme.t('RadiusMain').number }]}
-    >
-      <PxSkeleton variant={'assetL'} inverted={inverted} expand />
-      <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'),
-        }}
-      >
-        <PxSkeleton variant={'headingS'} inverted={inverted} />
-        <PxSkeleton variant={'body'} inverted={inverted} />
-      </View>
-    </View>
-  );
-}

package/src/CarouselSkeleton.tsx

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

package/src/DataUsageSkeleton.tsx

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

package/src/MessageCardSkeleton.tsx

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

package/src/Skeleton.tsx

@@ -1,187 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  Animated,
-  Easing,
-  LayoutChangeEvent,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { useTheme } from '@proximus/lavender-styling-native';
-
-const DURATION = 1500;
-const ANGLE = 18;
-
-export type SkeletonGradientProps = ViewProps & {
-  /** Predefined shape */
-  variant:
-    | 'headingS'
-    | 'headingM'
-    | 'headingL'
-    | 'body'
-    | 'bodyS'
-    | 'actionS'
-    | 'actionL'
-    | 'assetXS'
-    | 'assetS'
-    | 'assetL'
-    | 'panel'
-    | 'panelS';
-  width?: number | string;
-  containerStyle?: StyleProp<ViewStyle>;
-  expand?: boolean;
-  inverted?: boolean;
-};
-
-function useColors({ inverted }: { inverted: boolean }) {
-  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: SkeletonGradientProps) {
-  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<Animated.CompositeAnimation | null>(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 (
-    <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: LayoutChangeEvent) => {
-        const { width, height } = e.nativeEvent.layout;
-        setLayout({ width, height });
-      }}
-    >
-      <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
-          <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 }}
-          />
-        )}
-      </Animated.View>
-    </View>
-  );
-}
-
-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/src/StatusSkeleton.tsx

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

package/src/TileSkeleton.tsx

@@ -1,46 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { ISkeletonProps } from './types';
-
-function PxTileSkeleton({ inverted }: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <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'),
-      }}
-    >
-      <PxSkeleton variant={'assetS'} inverted={inverted} />
-      <PxSkeleton variant={'headingS'} inverted={inverted} />
-    </View>
-  );
-}
-
-export function PxTilesSkeleton({ inverted, containerStyle }: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={[
-        containerStyle,
-        {
-          gap: theme.t('SpacingSMobile').number,
-          flexDirection: 'row',
-          overflow: 'hidden',
-        },
-      ]}
-    >
-      <PxTileSkeleton inverted={inverted} />
-      <PxTileSkeleton inverted={inverted} />
-      <PxTileSkeleton inverted={inverted} />
-    </View>
-  );
-}

package/src/index.ts

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

package/src/types.ts

@@ -1,6 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native';
-
-export interface ISkeletonProps {
-  inverted?: boolean;
-  containerStyle?: StyleProp<ViewStyle>;
-}

package/tsconfig.json

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