diff --git a/.npmrc b/.npmrc index f025267..1bc96a6 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1 @@ -@NAMESPACE:registry=https://github.com/GhassenEljday/react-mobile-app-button +@NAMESPACE:registry=https://github.com/GhassenEljday/react-mobile-app-button \ No newline at end of file diff --git a/README.md b/README.md index 6de41cf..6198392 100644 --- a/README.md +++ b/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 (
{ - 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 ( { theme={"light"} className={"custom-style"} /> + { | --------- | -------------------------------------------------------- | ---------------- | --------------------------------- | | 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 -``` \ No newline at end of file +``` + +## + +[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/J3J5CGNZQ) diff --git a/package.json b/package.json index 43f59a7..6b56a93 100644 --- a/package.json +++ b/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", diff --git a/src/components/AppGalleryButton/index.tsx b/src/components/AppGalleryButton/index.tsx index 0dccfb0..a6ef515 100644 --- a/src/components/AppGalleryButton/index.tsx +++ b/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 diff --git a/src/components/AppStoreButton/index.tsx b/src/components/AppStoreButton/index.tsx index 7a08358..543a625 100644 --- a/src/components/AppStoreButton/index.tsx +++ b/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 diff --git a/src/components/GooglePlayButton/index.tsx b/src/components/GooglePlayButton/index.tsx index b7beb71..0504459 100644 --- a/src/components/GooglePlayButton/index.tsx +++ b/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 diff --git a/src/stories/AppGalleryButton.stories.js b/src/stories/AppGalleryButton.stories.js index ce11bb4..c7b9a69 100644 --- a/src/stories/AppGalleryButton.stories.js +++ b/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", }, }; diff --git a/src/stories/AppStoreButton.stories.js b/src/stories/AppStoreButton.stories.js index 4a95fb7..a29cdc2 100644 --- a/src/stories/AppStoreButton.stories.js +++ b/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", }, }; diff --git a/src/stories/GooglePlayButton.stories.js b/src/stories/GooglePlayButton.stories.js index 8eadf1a..1ed7273 100644 --- a/src/stories/GooglePlayButton.stories.js +++ b/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", }, }; diff --git a/tsconfig.json b/tsconfig.json index 34c5e54..df3bbce 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,12 @@ { - "compilerOptions": { - "jsx": "react", - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "declaration": true, - "emitDeclarationOnly": true, - "isolatedModules": true - } - } \ No newline at end of file + "compilerOptions": { + "jsx": "react", + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "declaration": true, + "emitDeclarationOnly": true, + "isolatedModules": true, + "outDir": "./lib", + "rootDir": "./src" + } +}