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

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/switch/NativeSwitch.tsx

@@ -4,13 +4,20 @@ import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
 import { IOSwitchVisualParams } from "../../core/IOStyles";
 
-type OwnProps = Pick<SwitchProps, "onValueChange" | "value">;
+type OwnProps = Pick<
+  SwitchProps,
+  "onValueChange" | "value" | "accessible" | "accessibilityLabel"
+>;
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const bgLegacyTrackColorAndroid =
   Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight;
 
-export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
+export const NativeSwitch = ({
+  onValueChange,
+  value,
+  ...accessibility
+}: OwnProps) => {
   const { isExperimental } = useIOExperimentalDesign();
   const trackColor = {
     false: IOColors[IOSwitchVisualParams.bgColorOffState],
@@ -27,6 +34,7 @@ export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
 
   return (
     <Switch
+      {...accessibility}
       trackColor={trackColorComponent}
       thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
       ios_backgroundColor={

package/src/components/textInput/TextInputBase.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable functional/immutable-data */
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
   Pressable,
   StyleSheet,
@@ -6,7 +7,6 @@ import {
   View,
   ViewStyle
 } from "react-native";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -19,18 +19,24 @@ import {
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { getInputPropsByType } from "../../utils/textInput";
+import { InputType } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
-import { InputType } from "../../utils/types";
-import { getInputPropsByType } from "../../utils/textInput";
-import { makeFontStyleObject } from "../../utils/fonts";
 
 type InputStatus = "initial" | "focused" | "disabled" | "error";
 
 type RNTextInputProps = Pick<
   React.ComponentProps<typeof TextInput>,
-  "keyboardType" | "inputMode" | "textContentType" | "autoComplete"
+  | "keyboardType"
+  | "inputMode"
+  | "textContentType"
+  | "autoComplete"
+  | "returnKeyType"
+  | "autoCapitalize"
+  | "autoCorrect"
 >;
 
 type InputTextProps = {
@@ -39,7 +45,7 @@ type InputTextProps = {
   onChangeText: (value: string) => void;
   accessibilityLabel?: string;
   textInputProps?: RNTextInputProps;
-  inputTyoe?: InputType;
+  inputType?: InputType;
   status?: InputStatus;
   icon?: IOIcons;
   rightElement?: React.ReactNode;
@@ -152,7 +158,7 @@ export const TextInputBase = ({
   onChangeText,
   accessibilityLabel,
   textInputProps,
-  inputTyoe = "default",
+  inputType = "default",
   status,
   icon,
   rightElement,
@@ -248,8 +254,8 @@ export const TextInputBase = ({
   }, [value, labelSharedValue, onBlur]);
 
   const derivedInputProps = useMemo(
-    () => getInputPropsByType(inputTyoe),
-    [inputTyoe]
+    () => getInputPropsByType(inputType),
+    [inputType]
   );
 
   const inputValue = useMemo(
@@ -319,6 +325,7 @@ export const TextInputBase = ({
             style={[
               animatedLabelProps,
               {
+                ...makeFontStyleObject("Regular", false, "TitilliumWeb"),
                 color: IOColors["grey-700"]
               }
             ]}

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/src/utils/textInput/index.ts

@@ -20,7 +20,8 @@ export const getInputPropsByType = (
           autoComplete: "cc-number",
           keyboardType: "numeric",
           textContentType: "creditCardNumber",
-          inputMode: "numeric"
+          inputMode: "numeric",
+          returnKeyType: "done"
         }
       };
     default:

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} />
-    );
-  }
-}