✨ feat: add showcase on document

baronha · baronha · commit 7a1a8417182a · 2024-12-20T16:39:05.000+07:00
diff --git a/README.md b/README.md
@@ -16,20 +16,30 @@ React Native Multiple Image Picker **(RNMIP)** enables application to pick image
 
 ## Features 🔥
 
-| 🤩  | ![Logo][Logo]                                                                     |
-| --- | --------------------------------------------------------------------------------- |
+| 🤩  | ![Logo][Logo]                                                                         |
+| --- | ------------------------------------------------------------------------------------- |
 | 🍕  | [**Crop**](/docs/docs/CROP.mdx) single/multiple image.                                |
 | 🎑  | [**Preview**](/docs/docs/PREVIEW.mdx) image/video.                                    |
 | 📸  | [**Camera**](/docs/docs/CAMERA.mdx) module for capturing photos and recording videos. |
-| 🐳  | Keep the previous selection.                                                      |
-| 0️⃣  | Selected order index.                                                             |
-| 🎨  | UI Customization (numberOfColumn, spacing, primaryColor ... )                     |
-| 🌚  | Dark Mode, Light Mode                                                             |
-| 🌄  | Choose multiple images/video.                                                     |
-| 📦  | Support smart album `(camera roll, selfies, panoramas, favorites, videos...)`.    |
-| 📺  | Display video duration.                                                           |
-| ⛅️ | Support iCloud Photo Library.                                                     |
-| 🌪  | Scrolling performance. ☕️                                                         |
+| 🐳  | Keep the previous selection.                                                          |
+| 0️⃣  | Selected order index.                                                                 |
+| 🎨  | UI Customization (numberOfColumn, spacing, primaryColor ... )                         |
+| 🌚  | Dark Mode, Light Mode                                                                 |
+| 🌄  | Choose multiple images/video.                                                         |
+| 📦  | Support smart album `(camera roll, selfies, panoramas, favorites, videos...)`.        |
+| 📺  | Display video duration.                                                               |
+| ⛅️ | Support iCloud Photo Library.                                                         |
+| 🌪  | Scrolling performance. ☕️                                                             |
+
+## Requirements
+
+Because RNMIP uses Nitro Module, it complies with Nitro Modules' requirements.
+View Nitro Modules' requirements [here](https://nitro.margelo.com/docs/minimum-requirements)
+
+- `Xcode` 16+
+- `iOS` 13+
+- `react-native` 0.75+
+- `compileSdkVersion` 34+
 
 ## Installation
 
@@ -80,7 +90,7 @@ const onPicker = async () => {
 - [x] Dynamic Language
 - [x] Open Crop Controller.
 - [x] Open Preview Controller.
-- [ ] Open Camera Controller.
+- [x] Open Camera Controller.
 
 ## Sponsor & Support ☕️
 
@@ -98,133 +108,21 @@ To keep this library maintained and up-to-date please consider [sponsoring it on
 
 [![Star History Chart](https://api.star-history.com/svg?repos=baronha/react-native-multiple-image-picker&type=Date)](https://star-history.com/#bytebase/star-history&Date)
 
+## Showcase ✨
+
+List of used applications with `@baronha/react-native-multiple-image-picker`
+
+Contributions are welcome! If you have an application that uses `@baronha/react-native-multiple-image-picker`, please open a [pull request](/docs/docs/SHOWCASE/showcase.json) to add it to the list.
+
+See all [**Showcase**](https://baronha.github.io/react-native-multiple-image-picker/showcase)
+
+
+
 ## Performance
 
 We're trying to improve performance. If you have a better solution, please open a [issue](https://github.com/baronha/react-native-multiple-image-picker/issues)
 or [pull request](https://github.com/baronha/react-native-multiple-image-picker/pulls). Best regards!
 
-## Contributors ✨
-
-Thanks go to these wonderful people:
-
-<!-- readme: collaborators,contributors -start -->
-<table>
-	<tbody>
-		<tr>
-            <td align="center">
-                <a href="https://github.com/baronha">
-                    <img src="https://avatars.githubusercontent.com/u/23580920?v=4" width="100;" alt="baronha"/>
-                    <br />
-                    <sub><b>Bảo Hà.</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/itsnyx">
-                    <img src="https://avatars.githubusercontent.com/u/74738973?v=4" width="100;" alt="itsnyx"/>
-                    <br />
-                    <sub><b>Alireza</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/pnthach95">
-                    <img src="https://avatars.githubusercontent.com/u/31266357?v=4" width="100;" alt="pnthach95"/>
-                    <br />
-                    <sub><b>Phạm Ngọc Thạch</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/crockalet">
-                    <img src="https://avatars.githubusercontent.com/u/60240500?v=4" width="100;" alt="crockalet"/>
-                    <br />
-                    <sub><b>crockalet</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/denisbevilacqua">
-                    <img src="https://avatars.githubusercontent.com/u/8768794?v=4" width="100;" alt="denisbevilacqua"/>
-                    <br />
-                    <sub><b>Denis Bevilacqua</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/cd-butterfly">
-                    <img src="https://avatars.githubusercontent.com/u/6622823?v=4" width="100;" alt="cd-butterfly"/>
-                    <br />
-                    <sub><b>cd-butterfly</b></sub>
-                </a>
-            </td>
-		</tr>
-		<tr>
-            <td align="center">
-                <a href="https://github.com/ctrleffive">
-                    <img src="https://avatars.githubusercontent.com/u/35224957?v=4" width="100;" alt="ctrleffive"/>
-                    <br />
-                    <sub><b>Chandu J S</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/jeongshin">
-                    <img src="https://avatars.githubusercontent.com/u/64301935?v=4" width="100;" alt="jeongshin"/>
-                    <br />
-                    <sub><b>Huckleberry</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/shafiqjefri">
-                    <img src="https://avatars.githubusercontent.com/u/126740667?v=4" width="100;" alt="shafiqjefri"/>
-                    <br />
-                    <sub><b>shafiqjefri</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/rxdsrex">
-                    <img src="https://avatars.githubusercontent.com/u/21159505?v=4" width="100;" alt="rxdsrex"/>
-                    <br />
-                    <sub><b>Rajnarayan Dutta</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/vivianlys90">
-                    <img src="https://avatars.githubusercontent.com/u/22317616?v=4" width="100;" alt="vivianlys90"/>
-                    <br />
-                    <sub><b>vivianLee</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/ymane">
-                    <img src="https://avatars.githubusercontent.com/u/22021856?v=4" width="100;" alt="ymane"/>
-                    <br />
-                    <sub><b>Yogesh Mane</b></sub>
-                </a>
-            </td>
-		</tr>
-		<tr>
-            <td align="center">
-                <a href="https://github.com/ouabing">
-                    <img src="https://avatars.githubusercontent.com/u/1430376?v=4" width="100;" alt="ouabing"/>
-                    <br />
-                    <sub><b>abing</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/hieuphan1030">
-                    <img src="https://avatars.githubusercontent.com/u/108206954?v=4" width="100;" alt="hieuphan1030"/>
-                    <br />
-                    <sub><b>hieuphan1030</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/tuanngocptn">
-                    <img src="https://avatars.githubusercontent.com/u/22292704?v=4" width="100;" alt="tuanngocptn"/>
-                    <br />
-                    <sub><b>Nick - Ngoc Pham</b></sub>
-                </a>
-            </td>
-		</tr>
-	<tbody>
-</table>
-<!-- readme: collaborators,contributors -end -->
-
 ## License
 
 MIT
diff --git a/docs/docs/GETTING_STARTED.mdx b/docs/docs/GETTING_STARTED.mdx
@@ -49,7 +49,8 @@ Install [@baronha/react-native-multiple-image-picker](https://www.npmjs.com/pack
 <TabItem value="rn">
 
 ```bash
-yarn add @baronha/react-native-multiple-image-picker react-native-nitro-modules
+yarn add @baronha/react-native-multiple-image-picker
+yarn add -D react-native-nitro-modules@0.18.2
 cd ios && pod install
 ```
 
@@ -58,7 +59,9 @@ cd ios && pod install
 <TabItem value="expo">
 
 ```bash
-npx expo install @baronha/react-native-multiple-image-picker react-native-nitro-modules
+npx expo install @baronha/react-native-multiple-image-picker 
+npx expo install react-native-nitro-modules@0.18.2 -- --dev
+npx expo prebuild
 ```
 
 </TabItem>
diff --git a/docs/docs/SHOWCASE.mdx b/docs/docs/SHOWCASE.mdx
diff --git a/docs/docs/SHOWCASE/index.mdx b/docs/docs/SHOWCASE/index.mdx
@@ -0,0 +1,33 @@
+---
+id: showcase
+title: Showcase ✨
+sidebar_label: Showcase ✨
+slug: /showcase
+---
+
+import style from './showcase.css'
+import data from './showcase.json'
+
+List of used applications with `@baronha/react-native-multiple-image-picker`
+
+> Contributions are welcome! If you have an application that uses `@baronha/react-native-multiple-image-picker`<br/>
+> please open a [**Pull Request**](https://github.com/baronha/react-native-multiple-image-picker/tree/master/docs/docs/SHOWCASE/data.json) to add it to the list.
+
+<br />
+
+<div className="showcaseContainer">
+  {data.map((item, index) => {
+    return (
+      <a
+        key={`showcase-${index}`}
+        href={item.link}
+        target="_blank"
+        className="showcaseItem"
+      >
+        <img src={item.banner} alt={item.title} />
+        <b>{item.title}</b>
+        <p className="showcaseTagline">{item?.tagline}</p>
+      </a>
+    )
+  })}
+</div>
diff --git a/docs/docs/SHOWCASE/showcase.css b/docs/docs/SHOWCASE/showcase.css
@@ -0,0 +1,68 @@
+.showcaseContainer {
+  display: flex;
+  /* justify-content: space-between; */
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.showcaseItem {
+  flex: 1;
+  color: inherit;
+  text-decoration: none;
+}
+
+.showcaseItem a:hover {
+  color: red;
+  text-decoration: none !important;
+}
+
+.showcaseItem b {
+  font-size: 1rem;
+  
+}
+
+.showcaseItem .showcaseTagline {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .showcaseItem {
+    flex: 100%;
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  /* lg */
+  .showcaseItem {
+    
+    max-width: 33.333%;
+  }
+}
+
+@media (min-width: 1200px) {
+  /* xl */
+  .showcaseItem {
+    
+    max-width: 33.333%;
+  }
+}
+
+@media (min-width: 1400px) {
+  /* xxl */
+  .showcaseItem {
+    
+    max-width: 33.333%;
+  }
+}
+
+@media (max-width: 480px) {
+  .showcaseItem {
+    flex: 100%;
+  }
+}
diff --git a/docs/docs/SHOWCASE/showcase.json b/docs/docs/SHOWCASE/showcase.json
@@ -0,0 +1,8 @@
+[
+  {
+    "banner": "https://github.com/user-attachments/assets/84ec6432-1557-4649-965c-6100d9c4c12d",
+    "title": "✨ Binsoo - Photo Filters & Editor",
+    "link": "https://apps.apple.com/vn/app/binsoo-photo-filters-editor/id6502683720",
+    "tagline": "Endless aesthetics and effects"
+  }
+]
diff --git a/example/package.json b/example/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@baronha/react-native-image-grid": "^0.2.7",
+    "@baronha/react-native-multiple-image-picker": "^2.1.1",
     "@react-native-segmented-control/segmented-control": "2.5.2",
     "expo": "~51.0.38",
     "expo-build-properties": "^0.12.5",
diff --git a/example/yarn.lock b/example/yarn.lock
