Merge pull request #11 from GhassenEljday/feature/custom-message

Feature/handle-types

.npmrc

@@ -1 +1 @@
-@NAMESPACE:registry=https://github.com/GhassenEljday/react-mobile-app-button
+@NAMESPACE:registry=https://github.com/GhassenEljday/react-mobile-app-button

README.md

@@ -2,7 +2,7 @@
 
 A react component that allows you to place an iOS App Store, Google Play Store and Huawei AppGallery Download button!
 
- Check documentation here => **[React Mobile App Button Docs](https://react-mobile-app-button-one.vercel.app/?path=/docs/example-google-play-button--docs)**
+Check documentation here => **[React Mobile App Button Docs](https://react-mobile-app-button-one.vercel.app/?path=/docs/example-google-play-button--docs)**
 
 ## Install
 
@@ -29,9 +29,10 @@ Example Code:
 
 ```js
 import { GooglePlayButton } from "react-mobile-app-button";
+
 export const MyComponent = () => {
-  const APKUrl =
-    "https://play.google.com/store/apps/details?id=host.exp.exponent";
+  const APKUrl = "https://play.google.com/store/apps/details?id=host";
+
   return (
     <div>
       <GooglePlayButton
@@ -52,17 +53,19 @@ import {
   AppGalleryButton,
   ButtonsContainer,
 } from "react-mobile-app-button";
+
 export const MyComponent = () => {
-  const APKUrl =
-    "https://play.google.com/store/apps/details?id=host.exp.exponent";
+  const APKUrl = "https://play.google.com/store/apps/details?id=host";
   const iOSUrl = "https://apps.apple.com/us/app/expo-go/id982107779";
+
   return (
     <ButtonsContainer>
       <GooglePlayButton
         url={APKUrl}
         theme={"light"}
         className={"custom-style"}
       />
+
       <AppGalleryButton
         url={iOSUrl}
         theme={"light"}
@@ -79,27 +82,34 @@ export const MyComponent = () => {
 | --------- | -------------------------------------------------------- | ---------------- | --------------------------------- |
 | url       | `GooglePlayButton`, `AppGalleryButton`, `AppStoreButton` | string           | Store URL                         |
 | theme     | `GooglePlayButton`, `AppGalleryButton`, `AppStoreButton` | "dark" / "light" | Button Theme                      |
-| className | `GooglePlayButton`, `AppGalleryButton`, `AppStoreButton` | string           | For manual styling              |
+| className | `GooglePlayButton`, `AppGalleryButton`, `AppStoreButton` | string           | For manual styling                |
+| title     | `GooglePlayButton`, `AppGalleryButton`, `AppStoreButton` | string           | For custom message                |
 | height    | `GooglePlayButton`, `AppGalleryButton`, `AppStoreButton` | number           | For manually styling              |
 | width     | `GooglePlayButton`, `AppGalleryButton`, `AppStoreButton` | number           | For manually styling              |
 | gap       | `ButtonsContainer`                                       | number           | Control the space between buttons |
 | direction | `ButtonsContainer`                                       | "row" / "column" | Control flex direction            |
-|  |
+|           |
 
 ## Install and run the project
 
-
 Clone the repository
+
 ```bash
-gir clone https://github.com/GhassenEljday/react-mobile-app-button.git
+git clone https://github.com/GhassenEljday/react-mobile-app-button.git
 ```
 
 Install the dependencies
+
 ```bash
-npm install 
+npm install
 ```
 
-Finally you can run the project using `StoryBook` 
+Finally you can run the project using `StoryBook`
+
 ```bash
 npm run storybook
-```
+```
+
+##
+
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/J3J5CGNZQ)

package.json

@@ -1,11 +1,13 @@
 {
   "name": "react-mobile-app-button",
-  "version": "1.1.13",
+  "version": "1.2.14",
   "description": "A react component which allows you to place an iOS App Store, Google Play Store and Huawei AppGallery Download button!",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel src --extensions .ts,.tsx --out-dir lib && cp -R src/assets lib/",
+    "build": "npm run build:types && npm run build:js",
+    "build:js": "babel src --extensions .ts,.tsx --out-dir lib && cp -R src/assets lib/",
+    "build:types": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "serve-storybook": "npx serve storybook-static"
@@ -31,6 +33,7 @@
   ],
   "author": "Ghassen Eljday",
   "license": "MIT",
+  "homepage": "https://react-mobile-app-button-one.vercel.app/?path=/docs/example-google-play-button--docs",
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.21.8",

src/components/AppGalleryButton/index.tsx

@@ -10,9 +10,9 @@ type AppGalleryButtonProps = {
   theme?: "dark" | "light";
 
   /**
-   * @default "EXPLORE IT ON"
+   * @default EXPLORE IT ON
    */
-  title: string;
+  title?: string;
 
   /**
    * @default 60px
@@ -39,8 +39,8 @@ type AppGalleryButtonProps = {
  *
  * @param {string} theme Choose a theme between dark and light
  * @param {number} height Controls the height of the button
- * @param {string} title Custom title in button
  * @param {number} width Controls the width of the button
+ * @param {string} title Set custom title for the button
  * @param {string} className Add className to the button in order to customize the button appearance
  * @param {string} url Add your store url to the button
  * @example <AppGalleryButton theme="light" height={70} width={130} className="button-container" url="https://appgallery.huawei.com/" />

src/components/AppStoreButton/index.tsx

@@ -11,9 +11,9 @@ type AppStoreButtonProps = {
   theme?: "dark" | "light";
 
   /**
-   * @default "Download on the"
+   * @default Download on the
    */
-  title: string;
+  title?: string;
 
   /**
    * @default 60px
@@ -40,8 +40,8 @@ type AppStoreButtonProps = {
  *
  * @param {string} theme Choose a theme between dark and light
  * @param {number} height Controls the height of the button
- * @param {number} height Controls the height of the button
  * @param {number} width Controls the width of the button
+ * @param {string} title Set custom title for the button
  * @param {string} className Add className to the button in order to customize the button appearance
  * @param {string} url Add your store url to the button
  * @example <AppStoreButton theme="light" height={70} width={130} className="button-container" url="https://www.apple.com/app-store/" />

src/components/GooglePlayButton/index.tsx

@@ -10,9 +10,9 @@ type GooglePlayButtonProps = {
   theme?: "dark" | "light";
 
   /**
-   * @default "GET IT ON"
+   * @default GET IT ON
    */
-  title: string;
+  title?: string;
 
   /**
    * @default 60px
@@ -40,6 +40,7 @@ type GooglePlayButtonProps = {
  * @param {string} theme Choose a theme between dark and light
  * @param {number} height Controls the height of the button
  * @param {number} width Controls the width of the button
+ * @param {string} title Set custom title for the button
  * @param {string} className Add className to the button in order to customize the button appearance
  * @param {string} url Add your store url to the button
  * @example <GooglePlayButton theme="light" height={70} width={130} className="button-container" url="https://play.google.com/" />

src/stories/AppGalleryButton.stories.js

@@ -39,10 +39,10 @@ export const CustomWidth = {
 };
 
 /**
- * Example: "EXPLORE IT ON"
+ * Example: "EXPLÓRALO EN"
  */
 export const CustomTitle = {
   args: {
-    title: "EXPLORE IT ON",
+    title: "EXPLÓRALO EN",
   },
 };

src/stories/AppStoreButton.stories.js

@@ -39,10 +39,10 @@ export const CustomWidth = {
 };
 
 /**
- * Example: title "Download on the"
+ * Example: title "Descargar en"
  */
 export const CustomTitle = {
   args: {
-    title: "Download on the",
+    title: "Descargar en",
   },
 };

src/stories/GooglePlayButton.stories.js

@@ -29,10 +29,20 @@ export const CustomHeight = {
 };
 
 /**
- * Example: "GET IT ON"
+ * Example: width 160px
+ */
+export const CustomWidth = {
+  args: {
+    theme: "dark",
+    width: 160,
+  },
+};
+
+/**
+ * Example: "PÓNGALO EN MARCHA"
  */
 export const CustomTitle = {
   args: {
-    title: "GET IT ON",
+    title: "PÓNGALO EN MARCHA",
   },
 };

tsconfig.json

@@ -1,10 +1,12 @@
 {
-    "compilerOptions": {
-      "jsx": "react",
-      "esModuleInterop": true,
-      "allowSyntheticDefaultImports": true,
-      "declaration": true,
-      "emitDeclarationOnly": true,
-      "isolatedModules": true
-    }
-  }
+  "compilerOptions": {
+    "jsx": "react",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "isolatedModules": true,
+    "outDir": "./lib",
+    "rootDir": "./src"
+  }
+}