@pagopa/io-app-design-system 1.4.0 → 1.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,mDAAoD,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,uCAAwC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAaV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAK7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAKhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAKC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAaC,CAAC"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,mDAAoD,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,uCAAwC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAgBV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAK7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAKhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -34,7 +34,9 @@
     "prepack": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn example && yarn install"
+    "bootstrap": "yarn example && yarn install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "react-native",
@@ -49,13 +51,25 @@
   },
   "homepage": "https://github.com/pagopa/io-app-design-system#readme",
   "devDependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@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",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-react-native-web": "^0.0.21",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.38",
     "@types/react-native": "0.70.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-react-native-web": "^0.19.8",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
@@ -63,15 +77,21 @@
     "eslint-plugin-functional": "^5.0.8",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "jest": "^29.5.0",
+    "metro-react-native-babel-preset": "^0.77.0",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "0.71.8",
     "react-native-builder-bob": "^0.20.0",
     "react-native-i18n": "^2.0.15",
+    "react-native-web": "^0.18.12",
+    "react-native-web-linear-gradient": "^1.1.2",
     "react-test-renderer": "^18.2.0",
     "release-it": "^15.0.0",
+    "storybook": "^7.4.0",
     "typescript": "^4.9.5"
   },
   "resolutions": {
@@ -80,12 +100,12 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": "*",
     "react-native-haptic-feedback": "*",
     "react-native-linear-gradient": "*",
     "react-native-reanimated": "*",
-    "react-native-svg": "*",
     "react-native-safe-area-context": "*",
-    "react-native-gesture-handler": "*"
+    "react-native-svg": "*"
   },
   "engines": {
     "node": ">= 16.0.0"
@@ -149,6 +169,7 @@
     ]
   },
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@expo/vector-icons": "^13.0.0",
     "@pagopa/ts-commons": "^12.0.0",
     "@testing-library/jest-native": "^5.4.2",

package/src/components/buttons/ButtonSolid.tsx

@@ -39,12 +39,28 @@ const styles = StyleSheet.create({
 });
 
 export type ButtonSolidProps = WithTestID<{
+  /**
+   * @default primary
+   */
   color?: ButtonSolidColor;
   label: string;
+  /**
+   * Renders a small variant of the button. This property applies to the legacy look only
+   * @default false
+   */
   small?: boolean;
+  /**
+   * @default false
+   */
   fullWidth?: boolean;
+  /**
+   * @default false
+   */
   disabled?: boolean;
   icon?: IOIcons;
+  /**
+   * @default start
+   */
   iconPosition?: "start" | "end";
   accessibilityLabel: string;
   accessibilityHint?: string;

package/src/components/index.tsx

@@ -18,3 +18,4 @@ export * from "./tag";
 export * from "./tabs";
 export * from "./typography";
 export * from "./textInput";
+export * from "./layout";

package/src/components/layout/BlockButtons.tsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { HSpacer } from "../spacer/Spacer";
+import { ButtonOutline, ButtonSolid, ButtonSolidProps } from "../buttons";
+import { IOStyles } from "../../core";
+
+const styles = StyleSheet.create({
+  button: {
+    alignContent: "center",
+    justifyContent: "center",
+    flex: 1
+  },
+  buttonTwoThirds: {
+    alignContent: "center",
+    flex: 2
+  }
+});
+
+type CommonProps = Readonly<{
+  primary: BlockButtonProps;
+  accessible?: boolean;
+}>;
+
+export type BlockButtonProps = {
+  type: "Solid" | "Outline";
+  buttonProps: ButtonSolidProps;
+};
+
+/**
+ * | single button |
+ */
+export interface SingleButton extends CommonProps {
+  type: "SingleButton";
+}
+
+/**
+ * | left | right |
+ */
+export interface TwoButtonsInlineHalf extends CommonProps {
+  type: "TwoButtonsInlineHalf";
+  secondary: BlockButtonProps;
+}
+
+/**
+ * | left  |       right        |
+ */
+interface TwoButtonsInlineThird extends CommonProps {
+  type: "TwoButtonsInlineThird";
+  secondary: BlockButtonProps;
+}
+
+/**
+ * |      left       |  right  |
+ */
+interface TwoButtonsInlineThirdInverted extends CommonProps {
+  type: "TwoButtonsInlineThirdInverted";
+  secondary: BlockButtonProps;
+}
+
+/**
+ * |  left |  mid  | right |
+ */
+interface ThreeButtonsInLine extends CommonProps {
+  type: "ThreeButtonsInLine";
+  secondary: BlockButtonProps;
+  third: BlockButtonProps;
+}
+
+type Props =
+  | SingleButton
+  | TwoButtonsInlineHalf
+  | TwoButtonsInlineThird
+  | TwoButtonsInlineThirdInverted
+  | ThreeButtonsInLine;
+
+export type BlockButtonsProps = Props;
+
+/**
+ * Implements a component that show buttons on a line on 1, 2 or 3 buttons
+ */
+export const BlockButtons = (props: Props) => {
+  const renderRightButton = () => {
+    if (props.type === "SingleButton") {
+      return null;
+    }
+
+    const secondaryButtonStyle =
+      props.type === "TwoButtonsInlineThird"
+        ? styles.buttonTwoThirds
+        : styles.button;
+
+    return (
+      <React.Fragment>
+        <HSpacer size={16} />
+        {renderButton(props.secondary, secondaryButtonStyle)}
+      </React.Fragment>
+    );
+  };
+
+  const renderMidButton = () => {
+    if (props.type !== "ThreeButtonsInLine") {
+      return null;
+    }
+
+    return (
+      <React.Fragment>
+        <HSpacer size={16} />
+        {renderButton(props.third, styles.button)}
+      </React.Fragment>
+    );
+  };
+
+  const renderLeftButton = () => {
+    const primaryButtonStyle =
+      props.type === "TwoButtonsInlineThirdInverted"
+        ? styles.buttonTwoThirds
+        : styles.button;
+
+    return renderButton(props.primary, primaryButtonStyle);
+  };
+
+  const renderButton = (
+    props: BlockButtonProps,
+    style: React.ComponentProps<typeof View>["style"]
+  ) => (
+    <View style={style}>
+      {props.type === "Solid" ? (
+        <ButtonSolid {...props.buttonProps} />
+      ) : (
+        <ButtonOutline {...props.buttonProps} />
+      )}
+    </View>
+  );
+
+  return (
+    <View style={{ ...IOStyles.flex, ...IOStyles.row }}>
+      {renderLeftButton()}
+      {renderMidButton()}
+      {renderRightButton()}
+    </View>
+  );
+};

package/src/components/layout/FooterWithButtons.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import { StyleSheet, View } from "react-native";
+import { IOStyles } from "../../core";
+import { BlockButtons, BlockButtonsProps } from "./BlockButtons";
+
+// TODO: Refactor with an unique component like `FooterTopShadow` after bonus vacanze
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    width: "100%",
+    // This Magic number is an heritage of the app code-base, this component should be removed in favor of `GradientBottomAction`
+    marginTop: -50,
+    paddingTop: 50,
+    position: "absolute",
+    bottom: 0
+  }
+});
+
+/**
+ * Implements a component that show buttons as sticky footer
+ * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf  or the inlineOneThird style
+ */
+export const FooterWithButtons = (props: BlockButtonsProps) => (
+  <View
+    style={styles.container}
+    accessible={props.accessible}
+    pointerEvents={"box-none"}
+    testID="FooterWithButtons"
+  >
+    <View style={IOStyles.footer}>
+      <BlockButtons {...props} />
+    </View>
+  </View>
+);
+
+export default FooterWithButtons;

package/src/components/layout/index.tsx

@@ -2,3 +2,4 @@ export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
+export * from "./FooterWithButtons";

package/src/components/logos/LogoPayment.tsx

@@ -13,7 +13,6 @@ import LogoPaymentPayPal from "./svg/LogoPaymentPayPal";
 import LogoPaymentBancomatPay from "./svg/LogoPaymentBancomatPay";
 import LogoPaymentVPay from "./svg/LogoPaymentVPay";
 import LogoPaymentPagoBancomat from "./svg/LogoPaymentPagoBancomat";
-import LogoPaymentSatispay from "./svg/LogoPaymentSatispay";
 import LogoPaymentPostepay from "./svg/LogoPaymentPostepay";
 import LogoPaymentMyBank from "./svg/LogoPaymentMyBank";
 import LogoPaymentApplePay from "./svg/LogoPaymentApplePay";
@@ -31,7 +30,6 @@ export const IOPaymentLogos = {
   bancomatPay: LogoPaymentBancomatPay,
   vPay: LogoPaymentVPay,
   pagoBancomat: LogoPaymentPagoBancomat,
-  satispay: LogoPaymentSatispay,
   postepay: LogoPaymentPostepay,
   myBank: LogoPaymentMyBank,
   applePay: LogoPaymentApplePay

package/src/components/logos/LogoPaymentExt.tsx

@@ -13,7 +13,6 @@ import LogoPaymentExtUnionPay from "./svg/LogoPaymentExtUnionPay";
 import LogoPaymentExtPayPal from "./svg/LogoPaymentExtPayPal";
 import LogoPaymentExtBancomatPay from "./svg/LogoPaymentExtBancomatPay";
 import LogoPaymentExtPostepay from "./svg/LogoPaymentExtPostepay";
-import LogoPaymentExtSatispay from "./svg/LogoPaymentExtSatispay";
 import LogoPaymentExtPagoBancomat from "./svg/LogoPaymentExtPagoBancomat";
 import LogoPaymentExtApplePay from "./svg/LogoPaymentExtApplePay";
 
@@ -30,7 +29,6 @@ export const IOPaymentExtLogos = {
   payPal: LogoPaymentExtPayPal,
   bancomatPay: LogoPaymentExtBancomatPay,
   postepay: LogoPaymentExtPostepay,
-  satispay: LogoPaymentExtSatispay,
   pagoBancomat: LogoPaymentExtPagoBancomat,
   applePay: LogoPaymentExtApplePay
 } as const;

package/src/components/pictograms/Pictogram.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ColorValue } from "react-native";
 import { IOColors } from "../../core/IOColors";
 
+import PictogramMessages from "./svg/PictogramMessages";
 import PictogramAbacus from "./svg/PictogramAbacus";
 import PictogramAirBaloon from "./svg/PictogramAirBaloon";
 import PictogramAirship from "./svg/PictogramAirship";
@@ -44,10 +45,11 @@ import PictogramSuccess from "./svg/PictogramSuccess";
 import PictogramFocusOn from "./svg/PictogramFocusOn";
 
 export const IOPictograms = {
+  messages: PictogramMessages,
   airBaloon: PictogramAirBaloon,
   abacus: PictogramAbacus,
-  emailValidation: PictogramEmailValidation /* io-email-validated */,
-  emailToValidate: PictogramEmailToValidate /* io-email-to-validate */,
+  emailValidation: PictogramEmailValidation,
+  emailToValidate: PictogramEmailToValidate,
   inbox: PictogramInbox,
   piggyBank: PictogramPiggyBank,
   processing: PictogramProcessing,
@@ -60,7 +62,7 @@ export const IOPictograms = {
   error: PictogramError,
   umbrella: PictogramUmbrella,
   inProgress: PictogramInProgress,
-  fireworks: PictogramFireworks /* io-fireworks */,
+  fireworks: PictogramFireworks,
   puzzle: PictogramPuzzle,
   question: PictogramQuestion,
   pin: PictogramPin,
@@ -70,7 +72,7 @@ export const IOPictograms = {
   teaBreak: PictogramTeaBreak,
   beerMug: PictogramBeerMug,
   sms: PictogramSms,
-  heart: PictogramHeart /* io-heart */,
+  heart: PictogramHeart,
   completed: PictogramCompleted,
   ibanCard: PictogramIBANCard,
   followMessage: PictogramFollowMessage,

package/src/components/pictograms/README.md

@@ -1,19 +1,12 @@
 # Pictograms
-There are different sets:
-* **General:** Pictograms used to enrich the following states:
-  * Empty 
-  * Success
-  * Error 
-* **Sections:** Pictograms used in the `Header` component as companion of the title. 
 
-## Prefixes
-- **General**: `Pictogram…`
-- **Sections**: `PictogramSection…`
+## Prefix
+To avoid confusion with other components referenced in the codebase, just use the prefix `Pictogram…`
 
 ## Add a new pictogram
 First of all, follow the instructions stated in the main README (`Vector graphics` section).
 
-If you want to add a new pictogram in the `General` set, open the `Pictogram.tsx` file and import the React component:
+If you want to add a new pictogram, open the `Pictogram.tsx` file and import the React component:
 ```jsx
 […]
 import PictogramAirBaloon from "./svg/PictogramAirBaloon";
@@ -29,7 +22,7 @@ export const IOPictograms = {
 You can add the recently added pictogram with the following declaration:
 ```jsx
 // Default size: 120×120px
-// Default color: Aqua
+// Default color: Turquoise
 <Pictogram name="airBaloon">
 ```
 

package/src/components/pictograms/index.tsx

@@ -1,4 +1,2 @@
 export * from "./Pictogram";
 export { Pictogram } from "./Pictogram";
-export { default as PictogramSection } from "./PictogramSection";
-export * from "./PictogramSection";

package/src/components/pictograms/svg/{PictogramSectionMessages.tsx → PictogramMessages.tsx}

@@ -2,11 +2,7 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramSectionMessages = ({
-  size,
-  color,
-  ...props
-}: SVGPictogramProps) => (
+const PictogramMessages = ({ size, color, ...props }: SVGPictogramProps) => (
   <Svg fill="none" width={size} height={size} viewBox="0 0 48 48" {...props}>
     <Path
       fillRule="evenodd"
@@ -17,4 +13,4 @@ const PictogramSectionMessages = ({
   </Svg>
 );
 
-export default PictogramSectionMessages;
+export default PictogramMessages;

package/src/components/textInput/TextInputBase.tsx

@@ -19,6 +19,7 @@ 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";
 
@@ -57,11 +58,10 @@ const styles = StyleSheet.create({
   },
   textInputStyle: {
     ...IOStyles.flex,
+    ...makeFontStyleObject("Regular", false, "ReadexPro"),
     fontSize: 16,
     marginTop: IOSpacingScale[2],
-    fontWeight: "400",
     lineHeight: 24,
-    fontFamily: "Readex Pro",
     height: "100%"
   },
   textInputLabelWrapper: {

package/src/stories/ButtonDS.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { ButtonSolid } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/ButtonSolid",
+  component: ButtonSolid,
+  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 ButtonSolid>;
+
+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: {
+    color: "primary",
+    accessibilityLabel: "Tap to trigger test alert",
+    label: "Primary button",
+    onPress: e => {
+      action("clicked")(e);
+    }
+  }
+};

package/src/stories/H1.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { H1 } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/H1",
+  component: H1,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof H1>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};

package/src/stories/H2.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { H2 } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/H2",
+  component: H2,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof H2>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};

package/src/stories/H3.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { H3 } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/H3",
+  component: H3,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof H3>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};

package/src/stories/H4.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { H4 } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/H4",
+  component: H4,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof H4>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};

package/src/stories/H5.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { H5 } from "../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Example/H5",
+  component: H5,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" }
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof H5>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: "Tap to trigger test alert",
+    onPress: () => Alert.alert("Alert", "Action triggered"),
+    children: "Hello World"
+  }
+};