@pagopa/io-app-design-system 1.0.0-0

package/lib/typescript/utils/types.d.ts

@@ -0,0 +1,29 @@
+export type ThemeSimpleValue = undefined | number | string;
+/**
+ * Enhance the type with the testID that should be used to locate a view in end-to-end tests.
+ */
+export type TestID = {
+    testID?: string;
+};
+export type WithTestID<T> = T & TestID;
+export type Theme = {
+    [key: string]: ThemeSimpleValue | Theme;
+};
+/**
+ * Ensure that all the keys of type T are required, transforming all optional field of kind T | undefined to T
+ */
+export type RequiredAll<T> = {
+    [K in keyof T]-?: T[K];
+};
+/**
+ * Return a type that prohibits the use of keys that are present only in T but not in U
+ */
+type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+/**
+ * Ensure that the types T and U are mutually exclusive
+ */
+export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAGvC,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,KAAK,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAExD;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,MAAM,GACxC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GACzC,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,163 @@
+{
+  "name": "@pagopa/io-app-design-system",
+  "version": "1.0.0-0",
+  "description": "test",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest --config='./jest.config.js'",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/pagopa/io-app-design-system",
+  "author": "PagoPa (https://github.com/pagopa)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pagopa/io-app-design-system/issues"
+  },
+  "homepage": "https://github.com/pagopa/io-app-design-system#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-functional": "^5.0.8",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^29.5.0",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-builder-bob": "^0.20.0",
+    "react-native-i18n": "^2.0.15",
+    "react-test-renderer": "^18.2.0",
+    "release-it": "^15.0.0",
+    "typescript": "^4.9.5"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-haptic-feedback": "*",
+    "react-native-linear-gradient": "*",
+    "react-native-reanimated": "*",
+    "react-native-svg": "*"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}",
+      "changelog": "yarn auto-changelog --stdout --commit-limit false -u --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs"
+    },
+    "hooks": {
+      "after:bump": "yarn auto-changelog -p && git add ."
+    },
+    "npm": {
+      "publish": false
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {}
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/",
+    "example/webpack.config.js",
+    "example/metro.config.js",
+    "babel.config.js",
+    "scripts/",
+    ".eslintrc.js"
+  ],
+  "prettier": {
+    "trailingComma": "none",
+    "arrowParens": "avoid",
+    "parser": "typescript"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@pagopa/ts-commons": "^12.0.0",
+    "@testing-library/jest-native": "^5.4.2",
+    "@types/react-native-i18n": "2.0.0",
+    "@types/react-test-renderer": "^18.0.0",
+    "auto-changelog": "^2.4.0",
+    "react-native-haptic-feedback": "^2.0.2",
+    "react-native-linear-gradient": "^2.7.3",
+    "react-native-reanimated": "^2.9.1",
+    "react-native-svg": "^12.3.0",
+    "rn-placeholder": "1.3.3"
+  }
+}

package/src/components/Advice/Advice.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { IOColors, IOStyles } from "../../core";
+import { HSpacer } from "../spacer";
+import { Body } from "../typography";
+
+interface Props {
+    text: string;
+    iconName?: IOIcons;
+    iconSize?: IOIconSizeScale;
+    iconColor?: IOColors;
+};
+
+const styles = StyleSheet.create({
+    icon: {
+        marginTop: 4
+    }
+});
+
+const defaultIconSize: IOIconSizeScale = 20;
+
+/**
+ * This component displays an info icon on top-left and a text message
+ * @constructor
+ */
+const AdviceComponent: React.FC<Props> = ({
+    text,
+    iconName = "notice",
+    iconSize = defaultIconSize,
+    iconColor = "blue"
+}) => (
+    <View style={IOStyles.row}>
+        <View style={styles.icon}>
+            <Icon
+                name={iconName}
+                size={iconSize}
+                color={iconColor}
+            />
+        </View>
+        <HSpacer size={8} />
+        <Body>{text}</Body>
+    </View>
+);
+
+export default React.memo(AdviceComponent);

package/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Advice Components Advice Snapshot 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "marginTop": 4,
+      }
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      bbHeight={20}
+      bbWidth={20}
+      color={4278219750}
+      focusable={false}
+      height={20}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#0073E6",
+          },
+          {
+            "flex": 0,
+            "height": 20,
+            "width": 20,
+          },
+        ]
+      }
+      tintColor={4278219750}
+      vbHeight={24}
+      vbWidth={24}
+      width={20}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281 7.5c.8439 0 1.5281-.6842 1.5281-1.5281s-.6842-1.5281-1.5281-1.5281c-.844 0-1.5281.6842-1.5281 1.5281S11.1841 19.5 12.0281 19.5Zm0-15.05618h.0005c.5678 0 1.0281.46029 1.0281 1.02808v8.0046c0 .5678-.4603 1.028-1.0281 1.028h-.0005c-.5678 0-1.0281-.4602-1.0281-1.028V5.4719c0-.56779.4603-1.02808 1.0281-1.02808Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <Text
+    color="bluegrey"
+    defaultColor="bluegrey"
+    defaultWeight="Regular"
+    font="TitilliumWeb"
+    fontStyle={
+      {
+        "fontSize": 16,
+        "lineHeight": 24,
+      }
+    }
+    style={
+      [
+        {
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        {
+          "color": "#475A6D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "400",
+        },
+      ]
+    }
+    weight="Regular"
+  >
+    Text
+  </Text>
+</View>
+`;

package/src/components/Advice/__test__/advice.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import * as TestRenderer from "react-test-renderer";
+import Advice from "../Advice";
+
+describe("Test Advice Components", () => {
+  it("Advice Snapshot", () => {
+    const advice = TestRenderer.create(<Advice text={"Text"}></Advice>).toJSON();
+    expect(advice).toMatchSnapshot();
+  });
+});

package/src/components/Advice/index.tsx

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

package/src/components/accordion/IOAccordion.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { H3 } from "../typography/H3";
+import { IOStyles, IOVisualCostants } from "../../core/IOStyles";
+import { RawAccordion } from "./RawAccordion";
+
+type Props = Omit<React.ComponentProps<typeof RawAccordion>, "header"> & {
+  title: string;
+};
+
+const styles = StyleSheet.create({
+  header: {
+    marginVertical: IOVisualCostants.appMarginDefault
+  }
+});
+
+/**
+ * A simplified accordion that accepts a title and one child and uses {@link RawAccordion}
+ * @param props
+ * @constructor
+ */
+export const IOAccordion = (props: Props): React.ReactElement => (
+  <RawAccordion
+    animated={props.animated}
+    headerStyle={styles.header}
+    accessibilityLabel={props.title}
+    header={
+      <H3 numberOfLines={1} style={IOStyles.flex}>
+        {props.title}
+      </H3>
+    }
+  >
+    {props.children}
+  </RawAccordion>
+);

package/src/components/accordion/RawAccordion.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import {
+  View,
+  AccessibilityProps,
+  Animated,
+  Easing,
+  LayoutAnimation,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  UIManager,
+  Platform
+} from "react-native";
+import { IOStyles, IOVisualCostants } from "../../core/IOStyles";
+import { Icon } from "../icons/Icon";
+
+// TODO: handle external initial open/closed state
+type Props = {
+  // The header component, an arrow indicating the open/closed state will be added on the right
+  header: React.ReactElement;
+  // The accordion component must accept one children
+  children: React.ReactElement;
+  // The component should be animated? default: true
+  animated?: boolean;
+  headerStyle?: React.ComponentProps<typeof View>["style"];
+  accessibilityLabel?: AccessibilityProps["accessibilityLabel"];
+};
+
+const styles = StyleSheet.create({
+  headerIcon: {
+    alignSelf: "center"
+  },
+  row: {
+    ...IOStyles.row,
+    justifyContent: "space-between"
+  },
+  internalHeader: {
+    flex: 1,
+    paddingRight: IOVisualCostants.appMarginDefault
+  }
+});
+
+/**
+ * Obtains the degree starting from the open state
+ * @param isOpen
+ */
+const getDegree = (isOpen: boolean) => (isOpen ? "-90deg" : "-270deg");
+
+/**
+ * The base accordion component, implements the opening and closing logic for viewing the children
+ * @param props
+ * @constructor
+ */
+export const RawAccordion: React.FunctionComponent<Props> = props => {
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const animatedController = useRef(new Animated.Value(1)).current;
+  const shouldAnimate = props.animated ?? true;
+  const headerStyle = props.headerStyle ?? {};
+  const accessibilityLabel = props.accessibilityLabel
+    ? `${props.accessibilityLabel}, `
+    : "";
+
+  const arrowAngle = shouldAnimate
+    ? animatedController.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "-180deg"]
+      })
+    : getDegree(isOpen);
+
+  useEffect(() => {
+    if (Platform.OS === "android") {
+      UIManager.setLayoutAnimationEnabledExperimental(shouldAnimate);
+    }
+  }, [shouldAnimate]);
+
+  const onPress = () => {
+    if (shouldAnimate) {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      Animated.timing(animatedController, {
+        duration: 300,
+        toValue: isOpen ? 1 : 0,
+        useNativeDriver: true,
+        easing: Easing.linear
+      }).start();
+    }
+    setOpen(!isOpen);
+  };
+
+  return (
+    <View style={IOStyles.flex}>
+      <TouchableWithoutFeedback
+        onPress={onPress}
+        accessible={true}
+        accessibilityRole={"button"}
+        accessibilityLabel={
+          accessibilityLabel +
+          (isOpen ? "Paragrafo espanso" : "Paragrafo chiuso")
+        }
+      >
+        <View style={[styles.row, headerStyle]}>
+          <View style={styles.internalHeader}>{props.header}</View>
+          <Animated.View
+            testID={"ArrowAccordion"}
+            style={{
+              ...styles.headerIcon,
+              transform: [{ rotateZ: arrowAngle }]
+            }}
+          >
+            <Icon name="chevronTop" color="blue" size={24} />
+          </Animated.View>
+        </View>
+      </TouchableWithoutFeedback>
+      {isOpen && props.children}
+    </View>
+  );
+};

package/src/components/accordion/index.tsx

@@ -0,0 +1,2 @@
+export * from "./RawAccordion";
+export * from "./IOAccordion";