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

package/lib/typescript/stories/LabelSmall.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").FC<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "grey-50" | "grey-100" | "grey-300" | "grey-450" | "grey-650" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "noCieButton" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "green" | "greenLight" | ("white" | "grey-200" | "grey-700" | "bluegrey" | "bluegreyDark" | "blue" | "red")> & {
+        style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+    } & {
+        fontSize?: ("small" | "regular") | undefined;
+    }>;
+    parameters: {
+        layout: string;
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+//# sourceMappingURL=LabelSmall.stories.d.ts.map

package/lib/typescript/stories/LabelSmall.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelSmall.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/LabelSmall.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAUyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/lib/typescript/stories/Link.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").FunctionComponent<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+        style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+    } & {
+        fontSize?: ("small" | "regular") | undefined;
+    }>;
+    parameters: {
+        layout: string;
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+//# sourceMappingURL=Link.stories.d.ts.map

package/lib/typescript/stories/Link.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Link.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAUmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/lib/typescript/stories/Monospace.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").FC<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "bluegrey" | "bluegreyDark"> & {
+        style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+    }>;
+    parameters: {
+        layout: string;
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+//# sourceMappingURL=Monospace.stories.d.ts.map

package/lib/typescript/stories/Monospace.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Monospace.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Monospace.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAUwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

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.5.1",
   "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/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"
+  }
+};

package/src/stories/H6.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { H6 } 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/H6",
+  component: H6,
+  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 H6>;
+
+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/Label.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "react-native";
+import { Label } 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/Label",
+  component: Label,
+  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 Label>;
+
+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"
+  }
+};