@pagopa/io-app-design-system 1.14.0 → 1.15.0

package/src/components/modules/PressableModuleBase.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { GestureResponderEvent, Pressable } from "react-native";
+import Animated from "react-native-reanimated";
+import { IOModuleIDPSavedVSpacing, IOModuleStyles } from "../../core";
+import { WithTestID } from "../../utils/types";
+import { useModuleSpringAnimation } from "./hooks/useModuleSpringAnimation";
+
+export type PressableModuleBaseProps = WithTestID<{
+  accessibilityLabel?: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  withLooseSpacing?: boolean;
+}>;
+
+export const PressableModuleBase = ({
+  onPress,
+  testID,
+  accessibilityLabel,
+  withLooseSpacing = false,
+  children
+}: React.PropsWithChildren<PressableModuleBaseProps>) => {
+  const { handlePressIn, handlePressOut, animatedStyle } =
+    useModuleSpringAnimation();
+  return (
+    <Pressable
+      onPress={onPress}
+      testID={testID}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={handlePressOut}
+      accessibilityRole="button"
+    >
+      <Animated.View
+        style={[
+          IOModuleStyles.button,
+          withLooseSpacing && { paddingVertical: IOModuleIDPSavedVSpacing },
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </Pressable>
+  );
+};

package/src/components/modules/hooks/useModuleSpringAnimation.ts

@@ -0,0 +1,49 @@
+import {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { useCallback } from "react";
+import { IOScaleValues, IOSpringValues } from "../../../core";
+
+export const useModuleSpringAnimation = () => {
+  const isPressed = useSharedValue(0);
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
+
+  const scaleTraversed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      scaleTraversed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      transform: [{ scale }]
+    };
+  });
+
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  return {
+    animatedStyle,
+    handlePressIn,
+    handlePressOut
+  };
+};

package/src/components/modules/index.tsx

@@ -1,2 +1,3 @@
 export * from "./ModuleIDP";
 export * from "./ModulePaymentNotice";
+export * from "./PressableModuleBase";

package/src/components/textInput/TextInputBase.tsx

@@ -36,6 +36,7 @@ type RNTextInputProps = Pick<
   | "autoComplete"
   | "returnKeyType"
   | "autoCapitalize"
+  | "autoCorrect"
 >;
 
 type InputTextProps = {

package/src/core/IOColors.ts

@@ -285,6 +285,7 @@ export type IOTheme = {
   // Design System related
   "cardBorder-default": IOColors;
   "icon-default": IOColors;
+  "icon-decorative": IOColors;
   // Layout
   "divider-default": IOColors;
   // Status
@@ -312,6 +313,7 @@ export const IOThemeLight: IOTheme = {
   // Design System related
   "cardBorder-default": "grey-100",
   "icon-default": "grey-650",
+  "icon-decorative": "grey-300",
   // Layout
   "divider-default": "grey-200",
   // Status

package/src/core/IOStyles.ts

@@ -1,7 +1,14 @@
 import { Platform, StyleSheet } from "react-native";
 import { IOIconSizeScale } from "../components/icons";
 import { IOColors } from "./IOColors";
-import { IOAppMargin, IOSpacer, IOSpacingScale } from "./IOSpacing";
+import {
+  IOAppMargin,
+  IOModuleIDPHSpacing,
+  IOModuleIDPVSpacing,
+  IOSpacer,
+  IOSpacingScale
+} from "./IOSpacing";
+import { IOModuleIDPRadius } from "./IOShapes";
 
 /**
  * A collection of default styles used within IO App.
@@ -254,6 +261,20 @@ export const IOListItemStyles = StyleSheet.create({
   }
 });
 
+export const IOModuleStyles = StyleSheet.create({
+  button: {
+    borderWidth: 1,
+    borderColor: IOColors["grey-100"],
+    borderRadius: IOModuleIDPRadius,
+    backgroundColor: IOColors.white,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: IOModuleIDPVSpacing,
+    paddingHorizontal: IOModuleIDPHSpacing
+  }
+});
+
 /**
  * SELECTION ITEM STYLES
  */

package/src/stories/ModuleIDP.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { action } from "@storybook/addon-actions";
+
+import { ImageSourcePropType } from "react-native";
+import { ModuleIDP } from "../components";
+import { IOThemeContext, IOThemes } from "..";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/ModuleIDP",
+  component: ModuleIDP,
+  decorators: [
+    Story => (
+      <IOThemeContext.Provider value={IOThemes.dark}>
+        <div style={{ width: "300px" }}>
+          <Story />
+        </div>
+      </IOThemeContext.Provider>
+    )
+  ],
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"]
+} satisfies Meta<typeof ModuleIDP>;
+
+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: {
+    logo: "https://assets.cdn.io.italia.it/spid/idps/spid-idp-posteid.png" as ImageSourcePropType,
+    name: "POSTE ID",
+    accessibilityLabel: "Tap to trigger test alert",
+    localLogo: 0,
+    onPress: e => {
+      action("clicked")(e);
+    }
+  }
+};

package/lib/commonjs/components/avatar/MultiImage.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MultiImage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _image = require("../../utils/image");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-/**
- * An image component that attempts to load the provided images
- * until one is available.
- *
- * Usually you want to provide a local image as last one to make sure
- * there is always an image that can be displayed.
- */
-class MultiImage extends _react.default.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      // start by rendering the first image
-      sourceIndex: props.source.length > 0 ? 0 : undefined
-    };
-  }
-  render() {
-    const sourceIndex = this.state.sourceIndex;
-    if (sourceIndex === undefined) {
-      return null;
-    }
-    const atIndex = this.props.source[sourceIndex];
-    const source = typeof atIndex === "number" ? atIndex : (0, _image.addCacheTimestampToUri)(atIndex);
-    const onError = () => {
-      // if current image fails loading, move to next
-      this.setState((_, props) => ({
-        sourceIndex: sourceIndex < props.source.length ? sourceIndex + 1 : undefined
-      }));
-    };
-    return source && /*#__PURE__*/_react.default.createElement(_reactNative.Image, _extends({}, this.props, {
-      source: source,
-      onError: onError
-    }));
-  }
-}
-exports.MultiImage = MultiImage;
-//# sourceMappingURL=MultiImage.js.map

package/lib/commonjs/components/avatar/MultiImage.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_image","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","MultiImage","React","PureComponent","constructor","props","state","sourceIndex","undefined","render","atIndex","addCacheTimestampToUri","onError","setState","_","createElement","Image","exports"],"sourceRoot":"../../../../src","sources":["components/avatar/MultiImage.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AAA2D,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAU3D;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,UAAU,SAASC,cAAK,CAACC,aAAa,CAAe;EAChEC,WAAWA,CAACC,KAAY,EAAE;IACxB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MACX;MACAC,WAAW,EAAEF,KAAK,CAACV,MAAM,CAACD,MAAM,GAAG,CAAC,GAAG,CAAC,GAAGc;IAC7C,CAAC;EACH;EAEOC,MAAMA,CAAA,EAAG;IACd,MAAMF,WAAW,GAAG,IAAI,CAACD,KAAK,CAACC,WAAW;IAC1C,IAAIA,WAAW,KAAKC,SAAS,EAAE;MAC7B,OAAO,IAAI;IACb;IAEA,MAAME,OAAO,GAAG,IAAI,CAACL,KAAK,CAACV,MAAM,CAACY,WAAW,CAAC;IAE9C,MAAMZ,MAAM,GACV,OAAOe,OAAO,KAAK,QAAQ,GAAGA,OAAO,GAAG,IAAAC,6BAAsB,EAACD,OAAO,CAAC;IAEzE,MAAME,OAAO,GAAGA,CAAA,KAAM;MACpB;MACA,IAAI,CAACC,QAAQ,CAAC,CAACC,CAAC,EAAET,KAAK,MAAM;QAC3BE,WAAW,EACTA,WAAW,GAAGF,KAAK,CAACV,MAAM,CAACD,MAAM,GAAGa,WAAW,GAAG,CAAC,GAAGC;MAC1D,CAAC,CAAC,CAAC;IACL,CAAC;IACD,OACEb,MAAM,iBAAIhB,MAAA,CAAAO,OAAA,CAAA6B,aAAA,CAACjC,YAAA,CAAAkC,KAAK,EAAA7B,QAAA,KAAK,IAAI,CAACkB,KAAK;MAAEV,MAAM,EAAEA,MAAO;MAACiB,OAAO,EAAEA;IAAQ,EAAE,CAAC;EAEzE;AACF;AAACK,OAAA,CAAAhB,UAAA,GAAAA,UAAA"}

package/lib/module/components/avatar/MultiImage.js

@@ -1,39 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
-import { Image } from "react-native";
-import { addCacheTimestampToUri } from "../../utils/image";
-/**
- * An image component that attempts to load the provided images
- * until one is available.
- *
- * Usually you want to provide a local image as last one to make sure
- * there is always an image that can be displayed.
- */
-export class MultiImage extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      // start by rendering the first image
-      sourceIndex: props.source.length > 0 ? 0 : undefined
-    };
-  }
-  render() {
-    const sourceIndex = this.state.sourceIndex;
-    if (sourceIndex === undefined) {
-      return null;
-    }
-    const atIndex = this.props.source[sourceIndex];
-    const source = typeof atIndex === "number" ? atIndex : addCacheTimestampToUri(atIndex);
-    const onError = () => {
-      // if current image fails loading, move to next
-      this.setState((_, props) => ({
-        sourceIndex: sourceIndex < props.source.length ? sourceIndex + 1 : undefined
-      }));
-    };
-    return source && /*#__PURE__*/React.createElement(Image, _extends({}, this.props, {
-      source: source,
-      onError: onError
-    }));
-  }
-}
-//# sourceMappingURL=MultiImage.js.map

package/lib/module/components/avatar/MultiImage.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Image","addCacheTimestampToUri","MultiImage","PureComponent","constructor","props","state","sourceIndex","source","length","undefined","render","atIndex","onError","setState","_","createElement","_extends"],"sourceRoot":"../../../../src","sources":["components/avatar/MultiImage.tsx"],"mappings":";AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,KAAK,QAIA,cAAc;AACrB,SAASC,sBAAsB,QAAQ,mBAAmB;AAU1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,SAASH,KAAK,CAACI,aAAa,CAAe;EAChEC,WAAWA,CAACC,KAAY,EAAE;IACxB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MACX;MACAC,WAAW,EAAEF,KAAK,CAACG,MAAM,CAACC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAGC;IAC7C,CAAC;EACH;EAEOC,MAAMA,CAAA,EAAG;IACd,MAAMJ,WAAW,GAAG,IAAI,CAACD,KAAK,CAACC,WAAW;IAC1C,IAAIA,WAAW,KAAKG,SAAS,EAAE;MAC7B,OAAO,IAAI;IACb;IAEA,MAAME,OAAO,GAAG,IAAI,CAACP,KAAK,CAACG,MAAM,CAACD,WAAW,CAAC;IAE9C,MAAMC,MAAM,GACV,OAAOI,OAAO,KAAK,QAAQ,GAAGA,OAAO,GAAGX,sBAAsB,CAACW,OAAO,CAAC;IAEzE,MAAMC,OAAO,GAAGA,CAAA,KAAM;MACpB;MACA,IAAI,CAACC,QAAQ,CAAC,CAACC,CAAC,EAAEV,KAAK,MAAM;QAC3BE,WAAW,EACTA,WAAW,GAAGF,KAAK,CAACG,MAAM,CAACC,MAAM,GAAGF,WAAW,GAAG,CAAC,GAAGG;MAC1D,CAAC,CAAC,CAAC;IACL,CAAC;IACD,OACEF,MAAM,iBAAIT,KAAA,CAAAiB,aAAA,CAAChB,KAAK,EAAAiB,QAAA,KAAK,IAAI,CAACZ,KAAK;MAAEG,MAAM,EAAEA,MAAO;MAACK,OAAO,EAAEA;IAAQ,EAAE,CAAC;EAEzE;AACF"}

package/lib/typescript/components/avatar/MultiImage.d.ts

@@ -1,22 +0,0 @@
-import { Omit } from "@pagopa/ts-commons/lib/types";
-import React from "react";
-import { ImageProps, ImageRequireSource, ImageURISource } from "react-native";
-interface Props extends Omit<ImageProps, "source"> {
-    source: ReadonlyArray<ImageURISource | ImageRequireSource>;
-}
-type State = Readonly<{
-    sourceIndex?: number;
-}>;
-/**
- * An image component that attempts to load the provided images
- * until one is available.
- *
- * Usually you want to provide a local image as last one to make sure
- * there is always an image that can be displayed.
- */
-export declare class MultiImage extends React.PureComponent<Props, State> {
-    constructor(props: Props);
-    render(): 0 | React.JSX.Element | null;
-}
-export {};
-//# sourceMappingURL=MultiImage.d.ts.map

package/lib/typescript/components/avatar/MultiImage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiImage.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/MultiImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,UAAU,EACV,kBAAkB,EAClB,cAAc,EACf,MAAM,cAAc,CAAC;AAGtB,UAAU,KAAM,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;IAChD,MAAM,EAAE,aAAa,CAAC,cAAc,GAAG,kBAAkB,CAAC,CAAC;CAC5D;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC;gBACnD,KAAK,EAAE,KAAK;IAQjB,MAAM;CAsBd"}

package/src/components/avatar/MultiImage.tsx

@@ -1,57 +0,0 @@
-import { Omit } from "@pagopa/ts-commons/lib/types";
-import React from "react";
-import {
-  Image,
-  ImageProps,
-  ImageRequireSource,
-  ImageURISource
-} from "react-native";
-import { addCacheTimestampToUri } from "../../utils/image";
-
-interface Props extends Omit<ImageProps, "source"> {
-  source: ReadonlyArray<ImageURISource | ImageRequireSource>;
-}
-
-type State = Readonly<{
-  sourceIndex?: number;
-}>;
-
-/**
- * An image component that attempts to load the provided images
- * until one is available.
- *
- * Usually you want to provide a local image as last one to make sure
- * there is always an image that can be displayed.
- */
-export class MultiImage extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      // start by rendering the first image
-      sourceIndex: props.source.length > 0 ? 0 : undefined
-    };
-  }
-
-  public render() {
-    const sourceIndex = this.state.sourceIndex;
-    if (sourceIndex === undefined) {
-      return null;
-    }
-
-    const atIndex = this.props.source[sourceIndex];
-
-    const source =
-      typeof atIndex === "number" ? atIndex : addCacheTimestampToUri(atIndex);
-
-    const onError = () => {
-      // if current image fails loading, move to next
-      this.setState((_, props) => ({
-        sourceIndex:
-          sourceIndex < props.source.length ? sourceIndex + 1 : undefined
-      }));
-    };
-    return (
-      source && <Image {...this.props} source={source} onError={onError} />
-    );
-  }
-}