[IOPLT-362] Adds the ProgressLoader component

example/ios/Podfile.lock

@@ -636,7 +636,7 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
-    :tag: hermes-2023-03-07-RNv0.71.4-31fdcf738940875c9bacf251e149006cf515d763
+    :tag: hermes-2023-03-20-RNv0.72.0-49794cfc7c81fb8f69fd60c3bbf85a7480cc5a77
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:

example/src/navigation/navigator.tsx

@@ -33,6 +33,7 @@ import { TabNavigationScreen } from "../pages/TabNavigation";
 import { TextInputs } from "../pages/TextInputs";
 import { Toasts } from "../pages/Toasts";
 import { Typography } from "../pages/Typography";
+import { Loaders } from "../pages/Loaders";
 import { AppParamsList } from "./params";
 import APP_ROUTES from "./routes";
 
@@ -155,6 +156,14 @@ const AppNavigator = () => (
         headerBackTitleVisible: false
       }}
     />
+    <Stack.Screen
+      name={APP_ROUTES.FOUNDATION.LOADERS.route}
+      component={Loaders}
+      options={{
+        headerTitle: APP_ROUTES.FOUNDATION.LOADERS.title,
+        headerBackTitleVisible: false
+      }}
+    />
     <Stack.Screen
       name={APP_ROUTES.COMPONENTS.ADVICE.route}
       component={DSAdvice}

example/src/navigation/params.ts

@@ -5,6 +5,7 @@ export type AppParamsList = {
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.COLOR.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.TYPOGRAPHY.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.LAYOUT.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.FOUNDATION.LOADERS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.ICONS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.PICTOGRAMS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.LOGOS.route]: undefined;

example/src/navigation/routes.ts

@@ -4,6 +4,7 @@ const APP_ROUTES = {
     COLOR: { route: "DESIGN_SYSTEM_COLOR", title: "Colors" },
     TYPOGRAPHY: { route: "DESIGN_SYSTEM_TYPOGRAPHY", title: "Typography" },
     LAYOUT: { route: "DESIGN_SYSTEM_LAYOUT", title: "Layout" },
+    LOADERS: { route: "DESIGN_SYSTEM_LOADERS", title: "Loaders" },
     ICONS: { route: "DESIGN_SYSTEM_ICONS", title: "Icons" },
     PICTOGRAMS: { route: "DESIGN_SYSTEM_PICTOGRAMS", title: "Pictograms" },
     LOGOS: { route: "DESIGN_SYSTEM_LOGOS", title: "Logos" }

example/src/pages/Loaders.tsx

@@ -1,17 +1,43 @@
-import { IOColors, LoadingSpinner } from "@pagopa/io-app-design-system";
+import {
+  H3,
+  IOColors,
+  LoadingSpinner,
+  ProgressLoader
+} from "@pagopa/io-app-design-system";
 import React from "react";
 import { View } from "react-native";
 import { Screen } from "../components/Screen";
 
-export const Loaders = () => (
-  <Screen>
-    <View style={{ borderRadius: 8, overflow: "hidden" }}>
-      <View style={{ backgroundColor: IOColors.white, padding: 16 }}>
-        <LoadingSpinner color="blueIO-500" />
+export const Loaders = () => {
+  const [progress, setProgress] = React.useState(0);
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      // console.log("progress", progress, (progress + 10) % 100);
+      setProgress(prev => (prev + 10) % 100);
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Screen>
+      <H3>LoadingSpinner</H3>
+      <View style={{ borderRadius: 8, overflow: "hidden" }}>
+        <View style={{ backgroundColor: IOColors.white, padding: 16 }}>
+          <LoadingSpinner color="blueIO-500" />
+        </View>
+        <View style={{ backgroundColor: IOColors["blueIO-500"], padding: 16 }}>
+          <LoadingSpinner color="white" />
+        </View>
       </View>
-      <View style={{ backgroundColor: IOColors["blueIO-500"], padding: 16 }}>
-        <LoadingSpinner color="white" />
+      <H3>ProgressLoader</H3>
+      <View style={{ borderRadius: 8, overflow: "hidden" }}>
+        <View style={{ backgroundColor: IOColors.white, padding: 16 }}>
+          <ProgressLoader progress={progress} />
+        </View>
+        <View style={{ backgroundColor: IOColors["blueIO-500"], padding: 16 }}>
+          <ProgressLoader progress={90} />
+        </View>
       </View>
-    </View>
-  </Screen>
-);
+    </Screen>
+  );
+};

src/components/index.tsx

@@ -20,6 +20,7 @@ export * from "./modules";
 export * from "./numberpad";
 export * from "./otpInput";
 export * from "./pictograms";
+export * from "./progressLoader";
 export * from "./radio";
 export * from "./spacer";
 export * from "./stepper";

src/components/progressLoader/ProgressLoader.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { IOColors, IOSpringValues } from "../../core";
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    height: 4,
+    backgroundColor: IOColors.white
+  }
+});
+
+export type ProgressLoader = {
+  progress: number;
+  color?: IOColors;
+};
+
+/**
+ * ProgressLoader component
+ * @param progress - the progress percentage
+ * @param color - IOColors value or undefined to define the color of the progress bar
+ */
+export const ProgressLoader = ({
+  progress,
+  color = "blueIO-500"
+}: ProgressLoader) => {
+  const [width, setWidth] = React.useState(0);
+  const progressWidth = useSharedValue(0);
+
+  React.useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    progressWidth.value = withSpring(
+      (progress / 100) * width,
+      IOSpringValues.accordion
+    );
+  }, [progressWidth, progress, width]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: progressWidth.value
+  }));
+
+  return (
+    <View
+      style={styles.container}
+      onLayout={e => setWidth(e.nativeEvent.layout.width)}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          { height: "100%", backgroundColor: IOColors[color] }
+        ]}
+      />
+    </View>
+  );
+};

src/components/progressLoader/index.tsx

@@ -0,0 +1 @@
+export * from "./ProgressLoader";

stories/foundation/progressLoader/ProgressLoader.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ProgressLoader } from "../../../src/components";
+import { withMaxWitdth } from "../../utils";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Foundation/ProgressLoader/ProgressLoader",
+  component: ProgressLoader,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered"
+  },
+  decorators: [withMaxWitdth],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"]
+} satisfies Meta<typeof ProgressLoader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    progress: 15
+  }
+};